ee507e0816
This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.
98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { Check, ChevronRight } from 'lucide-react';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
import { Heading } from '@kit/ui/heading';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
/**
|
|
* Retrieves the session status for a Stripe checkout session.
|
|
* Since we should only arrive here for a successful checkout, we only check
|
|
* for the `paid` status.
|
|
*
|
|
* @param {Stripe.Checkout.Session['status']} status - The status of the Stripe checkout session.
|
|
* @param {string} customerEmail - The email address of the customer associated with the session.
|
|
*
|
|
* @returns {ReactElement} - The component to render based on the session status.
|
|
*/
|
|
export function BillingSessionStatus({
|
|
customerEmail,
|
|
redirectPath,
|
|
}: React.PropsWithChildren<{
|
|
customerEmail: string;
|
|
redirectPath: string;
|
|
}>) {
|
|
return (
|
|
<SuccessSessionStatus
|
|
redirectPath={redirectPath}
|
|
customerEmail={customerEmail}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SuccessSessionStatus({
|
|
customerEmail,
|
|
redirectPath,
|
|
}: React.PropsWithChildren<{
|
|
customerEmail: string;
|
|
redirectPath: string;
|
|
}>) {
|
|
return (
|
|
<section
|
|
data-test={'payment-return-success'}
|
|
className={
|
|
'fade-in mx-auto max-w-xl rounded-xl border p-16 xl:drop-shadow-sm' +
|
|
' dark:border-dark-800 border-gray-100' +
|
|
' bg-background animate-in slide-in-from-bottom-8 ease-out' +
|
|
' zoom-in-50 dark:shadow-primary/40 duration-1000 dark:shadow-2xl'
|
|
}
|
|
>
|
|
<div
|
|
className={
|
|
'flex flex-col items-center justify-center space-y-4 text-center'
|
|
}
|
|
>
|
|
<Check
|
|
className={
|
|
'h-16 w-16 rounded-full bg-green-500 p-1 text-white ring-8' +
|
|
' ring-green-500/30 dark:ring-green-500/50'
|
|
}
|
|
/>
|
|
|
|
<Heading level={3}>
|
|
<span className={'mr-4 font-semibold'}>
|
|
<Trans i18nKey={'subscription:checkoutSuccessTitle'} />
|
|
</span>
|
|
🎉
|
|
</Heading>
|
|
|
|
<div
|
|
className={'flex flex-col space-y-4 text-gray-500 dark:text-gray-400'}
|
|
>
|
|
<p>
|
|
<Trans
|
|
i18nKey={'subscription:checkoutSuccessDescription'}
|
|
values={{ customerEmail }}
|
|
/>
|
|
</p>
|
|
</div>
|
|
|
|
<Button data-test={'checkout-success-back-button'} variant={'outline'}>
|
|
<Link href={redirectPath}>
|
|
<span className={'flex items-center space-x-2.5'}>
|
|
<span>
|
|
<Trans i18nKey={'subscription:checkoutSuccessBackButton'} />
|
|
</span>
|
|
|
|
<ChevronRight className={'h-4'} />
|
|
</span>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|