70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
import { mdiConnection, mdiOpenInNew, mdiWebhook } from '@mdi/js';
|
|
import Head from 'next/head';
|
|
import React, { ReactElement } from 'react';
|
|
import BaseButton from '../components/BaseButton';
|
|
import PaymentProviderConnectors from '../components/ReviewFlow/PaymentProviderConnectors';
|
|
import SectionMain from '../components/SectionMain';
|
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
|
|
import { getPageTitle } from '../config';
|
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
|
|
|
export default function ConnectPage() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Connect')}</title>
|
|
</Head>
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton icon={mdiConnection} title='Connect' main>
|
|
<BaseButton
|
|
href='/reviewflow'
|
|
icon={mdiOpenInNew}
|
|
label='Review Flow'
|
|
color='whiteDark'
|
|
/>
|
|
</SectionTitleLineWithButton>
|
|
|
|
<div className='mb-6 overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950 via-blue-950 to-indigo-950 p-6 text-white shadow-2xl'>
|
|
<div className='grid gap-6 lg:grid-cols-[1.15fr_0.85fr] lg:items-center'>
|
|
<div>
|
|
<p className='mb-3 inline-flex rounded-full bg-white/10 px-4 py-1 text-sm font-semibold text-sky-200 ring-1 ring-white/20'>
|
|
Payment provider setup
|
|
</p>
|
|
<h2 className='max-w-3xl text-4xl font-black tracking-tight md:text-5xl'>
|
|
Connect Stripe, PayPal, and Square.
|
|
</h2>
|
|
<p className='mt-4 max-w-2xl text-base text-slate-200 md:text-lg'>
|
|
Use this page to generate secure webhook URLs for each provider.
|
|
Once connected, successful payments can flow into Review Flow and
|
|
automatically create customers, transactions, and review
|
|
requests.
|
|
</p>
|
|
</div>
|
|
<div className='rounded-3xl bg-white/10 p-5 ring-1 ring-white/15 backdrop-blur'>
|
|
<div className='mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-400/20 text-sky-100'>
|
|
<BaseButton icon={mdiWebhook} color='info' roundedFull />
|
|
</div>
|
|
<h3 className='text-xl font-black'>How connection works</h3>
|
|
<p className='mt-2 text-sm leading-6 text-slate-200'>
|
|
Pick a provider, enter the business review settings, then copy
|
|
the generated webhook URL into that provider dashboard. You can
|
|
rotate URLs anytime if a secret is exposed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<PaymentProviderConnectors
|
|
eyebrow='Provider connections'
|
|
title='Connect your payment accounts'
|
|
description='Choose Stripe, PayPal, or Square below. Each provider gets its own secure webhook URL for the business you configure.'
|
|
/>
|
|
</SectionMain>
|
|
</>
|
|
);
|
|
}
|
|
|
|
ConnectPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|