(null);
25 |
26 | const handleCheckoutEvents = (event: CheckoutEventsData) => {
27 | setCheckoutData(event);
28 | };
29 |
30 | const updateItems = useCallback(
31 | throttle((paddle: Paddle, priceId: string, quantity: number) => {
32 | paddle.Checkout.updateItems([{ priceId, quantity }]);
33 | }, 1000),
34 | [],
35 | );
36 |
37 | useEffect(() => {
38 | if (!paddle?.Initialized && process.env.NEXT_PUBLIC_PADDLE_CLIENT_TOKEN && process.env.NEXT_PUBLIC_PADDLE_ENV) {
39 | initializePaddle({
40 | token: process.env.NEXT_PUBLIC_PADDLE_CLIENT_TOKEN,
41 | environment: process.env.NEXT_PUBLIC_PADDLE_ENV as Environments,
42 | eventCallback: (event) => {
43 | if (event.data && event.name) {
44 | handleCheckoutEvents(event.data);
45 | }
46 | },
47 | checkout: {
48 | settings: {
49 | variant: 'one-page',
50 | displayMode: 'inline',
51 | theme: 'dark',
52 | allowLogout: !userEmail,
53 | frameTarget: 'paddle-checkout-frame',
54 | frameInitialHeight: 450,
55 | frameStyle: 'width: 100%; background-color: transparent; border: none',
56 | successUrl: '/checkout/success',
57 | },
58 | },
59 | }).then(async (paddle) => {
60 | if (paddle && priceId) {
61 | setPaddle(paddle);
62 | paddle.Checkout.open({
63 | ...(userEmail && { customer: { email: userEmail } }),
64 | items: [{ priceId: priceId, quantity: 1 }],
65 | });
66 | }
67 | });
68 | }
69 | }, [paddle?.Initialized, priceId, userEmail]);
70 |
71 | useEffect(() => {
72 | if (paddle && priceId && paddle.Initialized) {
73 | updateItems(paddle, priceId, quantity);
74 | }
75 | }, [paddle, priceId, quantity, updateItems]);
76 |
77 | return (
78 |
83 |
84 |
85 |
88 |
89 |
Payment details
90 |
91 |
92 |
93 |
9 |
10 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/checkout/checkout-line-items.tsx:
--------------------------------------------------------------------------------
1 | import { QuantityField } from '@/components/checkout/quantity-field';
2 | import { Separator } from '@/components/ui/separator';
3 | import { CheckoutEventsData } from '@paddle/paddle-js/types/checkout/events';
4 | import { formatMoney } from '@/utils/paddle/parse-money';
5 | import { Skeleton } from '@/components/ui/skeleton';
6 |
7 | interface LoadingTextProps {
8 | value: number | undefined;
9 | currencyCode: string | undefined;
10 | }
11 |
12 | function LoadingText({ value, currencyCode }: LoadingTextProps) {
13 | if (value === undefined) {
14 | return ;
15 | } else {
16 | return formatMoney(value, currencyCode);
17 | }
18 | }
19 |
20 | interface Props {
21 | checkoutData: CheckoutEventsData | null;
22 | quantity: number;
23 | handleQuantityChange: (quantity: number) => void;
24 | }
25 |
26 | export function CheckoutLineItems({ handleQuantityChange, checkoutData, quantity }: Props) {
27 | return (
28 | <>
29 | {checkoutData?.items[0].price_name}
30 |
31 |
32 |
33 | Subtotal
34 |
35 |
36 |
37 |
38 |
39 | Tax
40 |
41 |
42 |
43 |
44 |
45 |
46 | Due today
47 |
48 |
49 |
50 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/checkout/checkout-price-amount.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from '@/components/ui/skeleton';
2 | import { CheckoutEventsData } from '@paddle/paddle-js/types/checkout/events';
3 | import { formatMoney } from '@/utils/paddle/parse-money';
4 |
5 | interface Props {
6 | checkoutData: CheckoutEventsData | null;
7 | }
8 |
9 | export function CheckoutPriceAmount({ checkoutData }: Props) {
10 | const total = checkoutData?.totals.total;
11 | return (
12 | <>
13 | {total !== undefined ? (
14 |
15 | {formatMoney(total, checkoutData?.currency_code)}
16 | inc. tax
17 |
18 | ) : (
19 |
20 | )}
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/checkout/checkout-price-container.tsx:
--------------------------------------------------------------------------------
1 | import { CheckoutPriceAmount } from '@/components/checkout/checkout-price-amount';
2 | import { CheckoutEventsData } from '@paddle/paddle-js/types/checkout/events';
3 | import { formatMoney } from '@/utils/paddle/parse-money';
4 | import { Skeleton } from '@/components/ui/skeleton';
5 | import { formatBillingCycle } from '@/utils/paddle/data-helpers';
6 |
7 | interface Props {
8 | checkoutData: CheckoutEventsData | null;
9 | }
10 |
11 | export function CheckoutPriceContainer({ checkoutData }: Props) {
12 | const recurringTotal = checkoutData?.recurring_totals?.total;
13 | const billingCycle = checkoutData?.items.find((item) => item.billing_cycle)?.billing_cycle;
14 | return (
15 | <>
16 | Order summary
17 |
18 | {recurringTotal !== undefined ? (
19 | billingCycle && (
20 |
21 | then {formatMoney(recurringTotal, checkoutData?.currency_code)} {formatBillingCycle(billingCycle)}
22 |
23 | )
24 | ) : (
25 |
26 | )}
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/checkout/price-section.tsx:
--------------------------------------------------------------------------------
1 | import { CheckoutLineItems } from '@/components/checkout/checkout-line-items';
2 | import { CheckoutPriceContainer } from '@/components/checkout/checkout-price-container';
3 | import { CheckoutPriceAmount } from '@/components/checkout/checkout-price-amount';
4 | import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
5 | import { Separator } from '@/components/ui/separator';
6 | import { CheckoutEventsData } from '@paddle/paddle-js/types/checkout/events';
7 |
8 | interface Props {
9 | checkoutData: CheckoutEventsData | null;
10 | quantity: number;
11 | handleQuantityChange: (quantity: number) => void;
12 | }
13 |
14 | export function PriceSection({ checkoutData, handleQuantityChange, quantity }: Props) {
15 | return (
16 | <>
17 |
18 |
19 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | Order summary
31 |
32 |
37 |
38 |
39 |
40 |
12 |
22 |
23 | {quantity}
24 |
25 |
32 |
41 | Team members
42 | Invite your team members to collaborate
43 |
44 |
49 |
50 |
51 |
52 | {teamMembers.map((teamMember) => (
53 |
54 |
55 |
56 | {teamMember.initials}
57 |
58 |
59 | {teamMember.name}
60 | {teamMember.email}
61 |
62 |
63 |
13 | Learn how to get the most out of AeroEdit tools and discover your inner artist.
14 |
15 |
16 |
20 |
34 | {cards.map((card) => (
35 |
36 |
37 |
38 | {card.title} {card.icon}
39 |
40 | {card.value}
41 |
42 |
43 | {card.change}
44 |
45 |
46 | ))}
47 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
{children}
31 |
11 |
12 |
13 |
{pageTitle}
14 |
15 |
16 |
Something went wrong, please try again later.
;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/dashboard/layout/loading-screen.tsx:
--------------------------------------------------------------------------------
1 | import { LoaderIcon } from 'lucide-react';
2 |
3 | export function LoadingScreen() {
4 | return (
5 |
6 |
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/dashboard/layout/mobile-sidebar.tsx:
--------------------------------------------------------------------------------
1 | import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
2 | import { Button } from '@/components/ui/button';
3 | import { Menu } from 'lucide-react';
4 | import { Sidebar } from '@/components/dashboard/layout/sidebar';
5 | import { SidebarUserInfo } from '@/components/dashboard/layout/sidebar-user-info';
6 |
7 | export function MobileSidebar() {
8 | return (
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/dashboard/layout/sidebar-user-info.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Separator } from '@/components/ui/separator';
4 | import { LogOut } from 'lucide-react';
5 | import { createClient } from '@/utils/supabase/client';
6 | import { MouseEvent } from 'react';
7 | import { useUserInfo } from '@/hooks/useUserInfo';
8 |
9 | export function SidebarUserInfo() {
10 | const supabase = createClient();
11 | const { user } = useUserInfo(supabase);
12 |
13 | async function handleLogout(e: MouseEvent) {
14 | e.preventDefault();
15 | await supabase.auth.signOut();
16 | location.reload();
17 | }
18 |
19 | return (
20 |
21 |
22 |
23 |
24 |
25 | {user?.user_metadata?.full_name}
26 |
27 |
28 | {user?.email}
29 |
30 |
31 |
32 |
33 |
34 |
35 |
Amount
,
26 | enableResizing: false,
27 | size: columnSize,
28 | cell: ({ row }) => {
29 | const formatted = parseMoney(row.original.details?.totals?.total, row.original.currencyCode);
30 | return {formatted}
;
31 | },
32 | },
33 | {
34 | accessorKey: 'status',
35 | header: 'Status',
36 | size: columnSize,
37 | cell: ({ row }) => {
38 | return ;
39 | },
40 | },
41 | {
42 | accessorKey: 'description',
43 | header: 'Description',
44 | size: columnSize,
45 | cell: ({ row }) => {
46 | return (
47 |
48 |
49 | {getPaymentReason(row.original.origin)}
50 | {row.original.details?.lineItems[0].product?.name}
51 | {row.original.details?.lineItems && row.original.details?.lineItems.length > 1 && (
52 | +{row.original.details?.lineItems.length - 1} more
53 | )}
54 |
55 |
40 |
41 |
42 | {table.getHeaderGroups().map((headerGroup) => (
43 |
44 | {headerGroup.headers.map((header) => {
45 | return (
46 |
53 | {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
54 |
55 | );
56 | })}
57 |
58 | ))}
59 |
60 |
61 | {table.getRowModel().rows?.length ? (
62 | table.getRowModel().rows.map((row) => (
63 |
64 | {row.getVisibleCells().map((cell) => (
65 |
72 | {flexRender(cell.column.columnDef.cell, cell.getContext())}
73 |
74 | ))}
75 |
76 | ))
77 | ) : (
78 |
79 |
80 | No results.
81 |
82 |
83 | )}
84 |
85 |
86 |
87 |
96 |
105 |
106 |
47 |
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/dashboard/subscriptions/components/payment-method-details.tsx:
--------------------------------------------------------------------------------
1 | import { PaymentMethodDetails as PaddlePaymentMethodDetails } from '@paddle/paddle-node-sdk';
2 | import { CreditCard } from 'lucide-react';
3 |
4 | const PaymentMethodLabels: Record = {
5 | card: 'Card',
6 | alipay: 'Alipay',
7 | wire_transfer: 'Wire Transfer',
8 | apple_pay: 'Apple Pay',
9 | google_pay: 'Google Pay',
10 | paypal: 'PayPal',
11 | ideal: 'iDEAL',
12 | bancontact: 'Bancontact',
13 | korea_local: 'Korean Local Payment',
14 | offline: 'Offline',
15 | unknown: 'Unknown',
16 | };
17 |
18 | interface Props {
19 | type: PaddlePaymentMethodDetails['type'];
20 | card?: PaddlePaymentMethodDetails['card'];
21 | }
22 |
23 | export function PaymentMethodDetails({ type, card }: Props) {
24 | if (type === 'card') {
25 | return (
26 | <>
27 |
28 | **** {card?.last4}
29 |
30 | );
31 | } else {
32 | return type ? {PaymentMethodLabels[type]} : '-';
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/dashboard/subscriptions/components/payment-method-section.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/components/ui/button';
2 | import Link from 'next/link';
3 | import { PaymentMethodDetails } from '@/components/dashboard/subscriptions/components/payment-method-details';
4 | import { PaymentType, Transaction } from '@paddle/paddle-node-sdk';
5 |
6 | function findPaymentMethodDetails(transactions?: Transaction[]) {
7 | const transactionWithPaymentDetails = transactions?.find((transaction) => transaction.payments[0]?.methodDetails);
8 | const firstValidPaymentMethod = transactionWithPaymentDetails?.payments[0].methodDetails;
9 | return firstValidPaymentMethod ? firstValidPaymentMethod : { type: 'unknown' as PaymentType, card: null };
10 | }
11 |
12 | interface Props {
13 | updatePaymentMethodUrl?: string | null;
14 | transactions?: Transaction[];
15 | }
16 |
17 | export function PaymentMethodSection({ transactions, updatePaymentMethodUrl }: Props) {
18 | const { type, card } = findPaymentMethodDetails(transactions);
19 | if (type === 'unknown') {
20 | return null;
21 | }
22 | return (
23 |
24 |
25 |
Payment method
26 |
29 |
30 | {updatePaymentMethodUrl && (
31 |
32 |
37 |
38 | )}
39 |
21 | {subscriptions.map((subscription) => {
22 | const subscriptionItem = subscription.items[0];
23 | const price = subscriptionItem.quantity * parseFloat(subscriptionItem.price.unitPrice.amount);
24 | const formattedPrice = parseMoney(price.toString(), subscription.currencyCode);
25 | const frequency =
26 | subscription.billingCycle.frequency === 1
27 | ? `/${subscription.billingCycle.interval}`
28 | : `every ${subscription.billingCycle.frequency} ${subscription.billingCycle.interval}s`;
29 | return (
30 |
31 |
32 |
33 |
39 | {subscriptionItem.product.imageUrl && (
40 |
46 | )}
47 |
48 |
49 |
50 |
56 |
{subscriptionItem.product.description}
57 |
58 | {formattedPrice}
59 | {frequency}
60 |
61 |
65 | );
66 | })}
67 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
27 |
28 |
29 | Cancellation scheduled
30 |
31 | Subscription scheduled to cancel at the end of the billing period.
32 |
33 |
34 |
42 |
43 |
44 |
Error
45 |
46 | Something went wrong, please try again later
47 |
48 |
49 |
28 |
29 |
30 |
31 |
32 | {subscriptionItem.product.imageUrl && (
33 |
34 | )}
35 | {subscriptionItem.product.name}
36 |
37 |
38 |
39 | {formattedPrice}
40 | {frequency}
41 |
42 |
43 |
44 |
45 |
46 |
Started on: {formattedStartedDate}
47 |
48 |
49 | {!(subscription.scheduledChange || subscription.status === 'canceled') && (
50 |
51 | )}
52 |
53 |
19 |
Next payment
20 |
21 |
22 | {parseMoney(subscription?.nextTransaction?.details.totals.total, subscription?.currencyCode)}
23 |
24 | due
25 |
26 | {dayjs(subscription?.nextBilledAt).format('MMM DD, YYYY')}
27 |
28 |
29 |
29 |
30 | {dayjs(transaction.billedAt ?? transaction.createdAt).format('MMM DD, YYYY')}
31 |
32 |
33 | {getPaymentReason(transaction.origin)}
34 |
35 | {transaction.details?.lineItems[0].product?.name}
36 |
37 |
38 |
39 |
{formattedPrice}
40 |
41 |
42 |
11 |
14 |
15 |
16 | No active subscriptions
17 |
18 |
19 |
20 |
21 | Sign up for a subscription to see your subscriptions here.
22 |
23 |
24 |
25 |
28 |
29 |
30 |
6 |
Built with
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | A Next.js template by
17 |
18 |
19 |
20 |
21 |
22 | Explore Paddle
23 |
24 |
25 |
26 |
27 |
28 | Terms of use
29 |
30 |
31 |
32 |
33 |
34 | Privacy
35 |
36 |
37 |
38 |
39 |
19 |
20 |
21 |
22 |
Preview localized prices
23 |
28 |
29 | Learn more
30 |
31 |
32 |
33 |
34 |
35 |
36 | setShowBanner(false)} />
37 |
38 |
39 |
5 |
6 | Powerful design tools.
7 |
8 | Simple pricing.
9 |
10 |
11 | Plans for teams of every size — from start-up to enterprise.
12 |
13 |
23 |
24 |
25 |
26 |
27 |
28 |
11 | {tier.features.map((feature: string) => (
12 | -
13 |
14 | {feature}
15 |
16 | ))}
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/home/pricing/price-amount.tsx:
--------------------------------------------------------------------------------
1 | import { Tier } from '@/constants/pricing-tier';
2 | import { cn } from '@/lib/utils';
3 | import { Skeleton } from '@/components/ui/skeleton';
4 |
5 | interface Props {
6 | loading: boolean;
7 | tier: Tier;
8 | priceMap: Record;
9 | value: string;
10 | priceSuffix: string;
11 | }
12 |
13 | export function PriceAmount({ loading, priceMap, priceSuffix, tier, value }: Props) {
14 | return (
15 |
16 | {loading ? (
17 |
18 | ) : (
19 | <>
20 |
21 | {priceMap[tier.priceId[value]].replace(/\.00$/, '')}
22 |
23 |
{priceSuffix}
24 |
25 | )}
26 |
21 | {PricingTier.map((tier) => (
22 |
23 |
24 | {tier.featured &&
}
25 |
26 |
33 |
34 |
35 |
36 |
{tier.description}
37 |
38 |
39 |
42 |
43 |
44 |
45 | ))}
46 |
17 |
21 | {featured && (
22 |
27 | Most popular
28 |
29 | )}
30 |
32 | {icon}
33 | {text}
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/shared/toggle/toggle.tsx:
--------------------------------------------------------------------------------
1 | import { BillingFrequency, IBillingFrequency } from '@/constants/billing-frequency';
2 | import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
3 |
4 | interface Props {
5 | frequency: IBillingFrequency;
6 | setFrequency: (frequency: IBillingFrequency) => void;
7 | }
8 |
9 | export function Toggle({ setFrequency, frequency }: Props) {
10 | return (
11 |
12 |
15 | setFrequency(BillingFrequency.find((billingFrequency) => value === billingFrequency.value)!)
16 | }
17 | >
18 |
19 | {BillingFrequency.map((billingFrequency) => (
20 |
21 | {billingFrequency.label}
22 |
23 | ))}
24 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as AccordionPrimitive from '@radix-ui/react-accordion';
5 | import { ChevronDown } from 'lucide-react';
6 |
7 | import { cn } from '@/lib/utils';
8 |
9 | const Accordion = AccordionPrimitive.Root;
10 |
11 | const AccordionItem = React.forwardRef<
12 | React.ElementRef,
13 | React.ComponentPropsWithoutRef
14 | >(({ className, ...props }, ref) => (
15 |
16 | ));
17 | AccordionItem.displayName = 'AccordionItem';
18 |
19 | const AccordionTrigger = React.forwardRef<
20 | React.ElementRef,
21 | React.ComponentPropsWithoutRef
22 | >(({ className, children, ...props }, ref) => (
23 |
24 | svg]:rotate-180',
28 | className,
29 | )}
30 | {...props}
31 | >
32 | {children}
33 |
34 |
35 |
36 | ));
37 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
38 |
39 | const AccordionContent = React.forwardRef<
40 | React.ElementRef,
41 | React.ComponentPropsWithoutRef
42 | >(({ className, children, ...props }, ref) => (
43 |
48 | {children}
49 |
50 | ));
51 |
52 | AccordionContent.displayName = AccordionPrimitive.Content.displayName;
53 |
54 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
55 |
--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 |
4 | import { cn } from '@/lib/utils';
5 |
6 | const alertVariants = cva(
7 | 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
8 | {
9 | variants: {
10 | variant: {
11 | default: 'bg-background text-foreground',
12 | destructive: 'border-[#F42566] text-primary bg-[#1A040B]',
13 | },
14 | },
15 | defaultVariants: {
16 | variant: 'default',
17 | },
18 | },
19 | );
20 |
21 | const Alert = React.forwardRef<
22 | HTMLDivElement,
23 | React.HTMLAttributes & VariantProps
24 | >(({ className, variant, ...props }, ref) => (
25 |
26 | ));
27 | Alert.displayName = 'Alert';
28 |
29 | const AlertTitle = React.forwardRef>(
30 | ({ className, ...props }, ref) => (
31 |
32 | ),
33 | );
34 | AlertTitle.displayName = 'AlertTitle';
35 |
36 | const AlertDescription = React.forwardRef>(
37 | ({ className, ...props }, ref) => (
38 |
39 | ),
40 | );
41 | AlertDescription.displayName = 'AlertDescription';
42 |
43 | export { Alert, AlertTitle, AlertDescription };
44 |
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Slot } from '@radix-ui/react-slot';
3 | import { cva, type VariantProps } from 'class-variance-authority';
4 |
5 | import { cn } from '@/lib/utils';
6 |
7 | const buttonVariants = cva(
8 | 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-md font-medium cursor-pointer ring-offset-background transition-colors focus:ring-ring focus:ring-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13 | destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
14 | outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
15 | secondary: 'relative bg-[#fcfcfc33] text-white secondary-button-animation disabled:bg-[#191A1A]',
16 | ghost: 'hover:bg-accent hover:text-accent-foreground',
17 | link: 'text-primary underline-offset-4 hover:underline',
18 | },
19 | size: {
20 | default: 'h-11 px-5 py-[10px]',
21 | sm: 'h-9 text-sm leading-4 rounded-md px-3 py-2',
22 | lg: 'h-11 rounded-md px-8',
23 | icon: 'h-10 w-10',
24 | },
25 | },
26 | defaultVariants: {
27 | variant: 'default',
28 | size: 'default',
29 | },
30 | },
31 | );
32 |
33 | export interface ButtonProps
34 | extends React.ButtonHTMLAttributes,
35 | VariantProps {
36 | asChild?: boolean;
37 | }
38 |
39 | const Button = React.forwardRef(
40 | ({ className, variant, size, asChild = false, ...props }, ref) => {
41 | const Comp = asChild ? Slot : 'button';
42 | return ;
43 | },
44 | );
45 | Button.displayName = 'Button';
46 |
47 | export { Button, buttonVariants };
48 |
--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 |
5 | const Card = React.forwardRef>(({ className, ...props }, ref) => (
6 |
7 | ));
8 | Card.displayName = 'Card';
9 |
10 | const CardHeader = React.forwardRef>(
11 | ({ className, ...props }, ref) => (
12 |
13 | ),
14 | );
15 | CardHeader.displayName = 'CardHeader';
16 |
17 | const CardTitle = React.forwardRef>(
18 | ({ className, ...props }, ref) => (
19 |
20 | ),
21 | );
22 | CardTitle.displayName = 'CardTitle';
23 |
24 | const CardDescription = React.forwardRef>(
25 | ({ className, ...props }, ref) => (
26 |
27 | ),
28 | );
29 | CardDescription.displayName = 'CardDescription';
30 |
31 | const CardContent = React.forwardRef>(
32 | ({ className, ...props }, ref) => ,
33 | );
34 | CardContent.displayName = 'CardContent';
35 |
36 | const CardFooter = React.forwardRef>(
37 | ({ className, ...props }, ref) => (
38 |
39 | ),
40 | );
41 | CardFooter.displayName = 'CardFooter';
42 |
43 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
44 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as DialogPrimitive from '@radix-ui/react-dialog';
5 | import { X } from 'lucide-react';
6 |
7 | import { cn } from '@/lib/utils';
8 |
9 | const Dialog = DialogPrimitive.Root;
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger;
12 |
13 | const DialogPortal = DialogPrimitive.Portal;
14 |
15 | const DialogClose = DialogPrimitive.Close;
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 |
29 | ));
30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31 |
32 | const DialogContent = React.forwardRef<
33 | React.ElementRef,
34 | React.ComponentPropsWithoutRef
35 | >(({ className, children, ...props }, ref) => (
36 |
37 |
38 |
46 | {children}
47 |
48 |
49 | Close
50 |
51 |
52 |
53 | ));
54 | DialogContent.displayName = DialogPrimitive.Content.displayName;
55 |
56 | const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
57 |
58 | );
59 | DialogHeader.displayName = 'DialogHeader';
60 |
61 | const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
62 |
63 | );
64 | DialogFooter.displayName = 'DialogFooter';
65 |
66 | const DialogTitle = React.forwardRef<
67 | React.ElementRef,
68 | React.ComponentPropsWithoutRef
69 | >(({ className, ...props }, ref) => (
70 |
75 | ));
76 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
77 |
78 | const DialogDescription = React.forwardRef<
79 | React.ElementRef,
80 | React.ComponentPropsWithoutRef
81 | >(({ className, ...props }, ref) => (
82 |
83 | ));
84 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
85 |
86 | export {
87 | Dialog,
88 | DialogPortal,
89 | DialogOverlay,
90 | DialogClose,
91 | DialogTrigger,
92 | DialogContent,
93 | DialogHeader,
94 | DialogFooter,
95 | DialogTitle,
96 | DialogDescription,
97 | };
98 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 |
5 | const Input = ({ className, type, ...props }: React.ComponentProps<'input'>) => {
6 | return (
7 |
15 | );
16 | };
17 |
18 | export { Input };
19 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as LabelPrimitive from '@radix-ui/react-label';
5 | import { cva, type VariantProps } from 'class-variance-authority';
6 |
7 | import { cn } from '@/lib/utils';
8 |
9 | const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
10 |
11 | const Label = React.forwardRef<
12 | React.ElementRef,
13 | React.ComponentPropsWithoutRef & VariantProps
14 | >(({ className, ...props }, ref) => (
15 |
16 | ));
17 | Label.displayName = LabelPrimitive.Root.displayName;
18 |
19 | export { Label };
20 |
--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as SeparatorPrimitive from '@radix-ui/react-separator';
5 |
6 | import { cn } from '@/lib/utils';
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
12 |
19 | ));
20 | Separator.displayName = SeparatorPrimitive.Root.displayName;
21 |
22 | export { Separator };
23 |
--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/lib/utils';
2 |
3 | function Skeleton({ className, ...props }: React.HTMLAttributes) {
4 | return ;
5 | }
6 |
7 | export { Skeleton };
8 |
--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 |
5 | const Table = React.forwardRef>(
6 | ({ className, ...props }, ref) => (
7 |
10 | ),
11 | );
12 | Table.displayName = 'Table';
13 |
14 | const TableHeader = React.forwardRef>(
15 | ({ className, ...props }, ref) => ,
16 | );
17 | TableHeader.displayName = 'TableHeader';
18 |
19 | const TableBody = React.forwardRef>(
20 | ({ className, ...props }, ref) => (
21 |
22 | ),
23 | );
24 | TableBody.displayName = 'TableBody';
25 |
26 | const TableFooter = React.forwardRef>(
27 | ({ className, ...props }, ref) => (
28 | tr]:border-b-0', className)} {...props} />
29 | ),
30 | );
31 | TableFooter.displayName = 'TableFooter';
32 |
33 | const TableRow = React.forwardRef>(
34 | ({ className, ...props }, ref) => (
35 | |
40 | ),
41 | );
42 | TableRow.displayName = 'TableRow';
43 |
44 | const TableHead = React.forwardRef>(
45 | ({ className, ...props }, ref) => (
46 | |
54 | ),
55 | );
56 | TableHead.displayName = 'TableHead';
57 |
58 | const TableCell = React.forwardRef>(
59 | ({ className, ...props }, ref) => (
60 | |
61 | ),
62 | );
63 | TableCell.displayName = 'TableCell';
64 |
65 | const TableCaption = React.forwardRef>(
66 | ({ className, ...props }, ref) => (
67 |
68 | ),
69 | );
70 | TableCaption.displayName = 'TableCaption';
71 |
72 | export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
73 |
--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as TabsPrimitive from '@radix-ui/react-tabs';
5 |
6 | import { cn } from '@/lib/utils';
7 |
8 | const Tabs = TabsPrimitive.Root;
9 |
10 | const TabsList = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 |
22 | ));
23 | TabsList.displayName = TabsPrimitive.List.displayName;
24 |
25 | const TabsTrigger = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, ...props }, ref) => (
29 |
37 | ));
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
39 |
40 | const TabsContent = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
52 | ));
53 | TabsContent.displayName = TabsPrimitive.Content.displayName;
54 |
55 | export { Tabs, TabsList, TabsTrigger, TabsContent };
56 |
--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/toast';
4 | import { useToast } from '@/components/ui/use-toast';
5 |
6 | export function Toaster() {
7 | const { toasts } = useToast();
8 |
9 | return (
10 |
11 | {toasts.map(function ({ id, title, description, action, ...props }) {
12 | return (
13 |
14 |
15 | {title && {title}}
16 | {description && {description}}
17 |
18 | {action}
19 |
20 |
21 | );
22 | })}
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/constants/billing-frequency.ts:
--------------------------------------------------------------------------------
1 | export interface IBillingFrequency {
2 | value: string;
3 | label: string;
4 | priceSuffix: string;
5 | }
6 |
7 | export const BillingFrequency: IBillingFrequency[] = [
8 | { value: 'month', label: 'Monthly', priceSuffix: 'per user/month' },
9 | { value: 'year', label: 'Annual', priceSuffix: 'per user/year' },
10 | ];
11 |
--------------------------------------------------------------------------------
/src/constants/pricing-tier.ts:
--------------------------------------------------------------------------------
1 | export interface Tier {
2 | name: string;
3 | id: 'starter' | 'pro' | 'advanced';
4 | icon: string;
5 | description: string;
6 | features: string[];
7 | featured: boolean;
8 | priceId: Record;
9 | }
10 |
11 | export const PricingTier: Tier[] = [
12 | {
13 | name: 'Starter',
14 | id: 'starter',
15 | icon: '/assets/icons/price-tiers/free-icon.svg',
16 | description: 'Ideal for individuals who want to get started with simple design tasks.',
17 | features: ['1 workspace', 'Limited collaboration', 'Export to PNG and SVG'],
18 | featured: false,
19 | priceId: { month: 'pri_01hsxyh9txq4rzbrhbyngkhy46', year: 'pri_01hsxyh9txq4rzbrhbyngkhy46' },
20 | },
21 | {
22 | name: 'Pro',
23 | id: 'pro',
24 | icon: '/assets/icons/price-tiers/basic-icon.svg',
25 | description: 'Enhanced design tools for scaling teams who need more flexibility.',
26 | features: ['Integrations', 'Unlimited workspaces', 'Advanced editing tools', 'Everything in Starter'],
27 | featured: true,
28 | priceId: { month: 'pri_01hsxycme6m95sejkz7sbz5e9g', year: 'pri_01hsxyeb2bmrg618bzwcwvdd6q' },
29 | },
30 | {
31 | name: 'Advanced',
32 | id: 'advanced',
33 | icon: '/assets/icons/price-tiers/pro-icon.svg',
34 | description: 'Powerful tools designed for extensive collaboration and customization.',
35 | features: [
36 | 'Single sign on (SSO)',
37 | 'Advanced version control',
38 | 'Assets library',
39 | 'Guest accounts',
40 | 'Everything in Pro',
41 | ],
42 | featured: false,
43 | priceId: { month: 'pri_01hsxyff091kyc9rjzx7zm6yqh', year: 'pri_01hsxyfysbzf90tkh2wqbfxwa5' },
44 | },
45 | ];
46 |
--------------------------------------------------------------------------------
/src/hooks/usePaddlePrices.ts:
--------------------------------------------------------------------------------
1 | import { Paddle, PricePreviewParams, PricePreviewResponse } from '@paddle/paddle-js';
2 | import { useEffect, useState } from 'react';
3 | import { PricingTier } from '@/constants/pricing-tier';
4 |
5 | export type PaddlePrices = Record;
6 |
7 | function getLineItems(): PricePreviewParams['items'] {
8 | const priceId = PricingTier.map((tier) => [tier.priceId.month, tier.priceId.year]);
9 | return priceId.flat().map((priceId) => ({ priceId, quantity: 1 }));
10 | }
11 |
12 | function getPriceAmounts(prices: PricePreviewResponse) {
13 | return prices.data.details.lineItems.reduce((acc, item) => {
14 | acc[item.price.id] = item.formattedTotals.total;
15 | return acc;
16 | }, {} as PaddlePrices);
17 | }
18 |
19 | export function usePaddlePrices(
20 | paddle: Paddle | undefined,
21 | country: string,
22 | ): { prices: PaddlePrices; loading: boolean } {
23 | const [prices, setPrices] = useState({});
24 | const [loading, setLoading] = useState(true);
25 |
26 | useEffect(() => {
27 | const paddlePricePreviewRequest: Partial = {
28 | items: getLineItems(),
29 | ...(country !== 'OTHERS' && { address: { countryCode: country } }),
30 | };
31 |
32 | setLoading(true);
33 |
34 | paddle?.PricePreview(paddlePricePreviewRequest as PricePreviewParams).then((prices) => {
35 | setPrices((prevState) => ({ ...prevState, ...getPriceAmounts(prices) }));
36 | setLoading(false);
37 | });
38 | }, [country, paddle]);
39 | return { prices, loading };
40 | }
41 |
--------------------------------------------------------------------------------
/src/hooks/usePagination.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | export function usePagination() {
4 | const [nextCursor, setNextCursor] = useState('');
5 | const [cursorHistory, setCursorHistory] = useState([]);
6 |
7 | function goToNextPage(cursor: string) {
8 | setCursorHistory([...cursorHistory, nextCursor]);
9 | setNextCursor(cursor);
10 | }
11 |
12 | function goToPrevPage() {
13 | const lastCursor = cursorHistory[cursorHistory.length - 1] ?? '';
14 | setCursorHistory(cursorHistory.slice(0, -1));
15 | setNextCursor(lastCursor);
16 | }
17 |
18 | return {
19 | after: nextCursor,
20 | hasPrev: cursorHistory.length > 0 || !!nextCursor,
21 | goToNextPage,
22 | goToPrevPage,
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/src/hooks/useUserInfo.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { SupabaseClient, User } from '@supabase/supabase-js';
3 |
4 | export function useUserInfo(supabase: SupabaseClient) {
5 | const [user, setUser] = useState(null);
6 |
7 | useEffect(() => {
8 | (async () => {
9 | const { data } = await supabase.auth.getUser();
10 | if (data?.user) {
11 | setUser(data.user);
12 | }
13 | })();
14 | }, [supabase.auth]);
15 |
16 | return { user };
17 | }
18 |
--------------------------------------------------------------------------------
/src/lib/api.types.ts:
--------------------------------------------------------------------------------
1 | import { Subscription, Transaction } from '@paddle/paddle-node-sdk';
2 |
3 | export interface SubscriptionResponse {
4 | data?: Subscription[];
5 | hasMore: boolean;
6 | totalRecords: number;
7 | error?: string;
8 | }
9 |
10 | export interface TransactionResponse {
11 | data?: Transaction[];
12 | hasMore: boolean;
13 | totalRecords: number;
14 | error?: string;
15 | }
16 |
17 | export interface SubscriptionDetailResponse {
18 | data?: Subscription;
19 | error?: string;
20 | }
21 |
--------------------------------------------------------------------------------
/src/lib/database.types.ts:
--------------------------------------------------------------------------------
1 | export interface Subscription {
2 | subscriptionId: string;
3 | subscriptionStatus: string;
4 | priceId: string;
5 | productId: string;
6 | scheduledChange: string;
7 | customerId: string;
8 | customerEmail: string;
9 | }
10 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { type NextRequest } from 'next/server';
2 | import { updateSession } from '@/utils/supabase/middleware';
3 |
4 | export async function middleware(request: NextRequest) {
5 | return await updateSession(request);
6 | }
7 |
8 | export const config = {
9 | matcher: [
10 | /*
11 | * Match all request paths except for the ones starting with:
12 | * - _next/static (static files)
13 | * - _next/image (image optimization files)
14 | * - favicon.ico (favicon file)
15 | * Feel free to modify this pattern to include more paths.
16 | */
17 | '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
18 | ],
19 | };
20 |
--------------------------------------------------------------------------------
/src/styles/checkout.css:
--------------------------------------------------------------------------------
1 | .checkout-background-base {
2 | width: 100%;
3 | position: absolute;
4 | z-index: -1;
5 | }
6 |
7 | .grain-background {
8 | background: url('/assets/background/grain-bg.svg') repeat;
9 | }
10 |
11 | .grid-bg {
12 | background: url('/assets/background/grid-bg.svg') no-repeat;
13 | }
14 |
15 | .top-left-gradient-background {
16 | background: url('/assets/background/checkout-top-gradient.svg') no-repeat top left;
17 | }
18 | .bottom-right-gradient-background {
19 | background: url('/assets/background/checkout-bottom-gradient.svg') no-repeat bottom right;
20 | }
21 |
22 | .checkout-yellow-highlight {
23 | position: absolute;
24 | left: 96px;
25 | top: 0;
26 | width: 248px;
27 | height: 1px;
28 | background: linear-gradient(
29 | 90deg,
30 | rgba(255, 255, 255, 0) 15%,
31 | rgba(255, 248, 0, 0.6) 50%,
32 | rgba(255, 255, 255, 0) 85%
33 | );
34 | }
35 |
36 | .checkout-hard-blur {
37 | width: 196px;
38 | height: 4px;
39 | position: absolute;
40 | left: 103px;
41 | top: -2px;
42 | background: #fff800;
43 | opacity: 0.1;
44 | filter: blur(12px);
45 | }
46 |
47 | .checkout-soft-blur {
48 | width: 296px;
49 | height: 16.576px;
50 | position: absolute;
51 | left: 52px;
52 | top: -9px;
53 | border-radius: 296px;
54 | opacity: 0.3;
55 | background: #fff800;
56 | filter: blur(32px);
57 | }
58 |
59 | .checkout-mobile-grainy-blur {
60 | width: 211px;
61 | height: 245px;
62 | background: linear-gradient(
63 | 0deg,
64 | rgba(255, 251, 229, 0) 0%,
65 | rgba(21, 227, 227, 0.06) 35.5%,
66 | rgba(255, 248, 0, 0.48) 80.5%
67 | );
68 | filter: blur(26px);
69 | }
70 | .checkout-mobile-grainy-blur::before {
71 | content: '';
72 | left: 55px;
73 | position: absolute;
74 | width: 101px;
75 | height: 167px;
76 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(168, 240, 248, 0.6) 100%);
77 | filter: blur(26px);
78 | }
79 |
80 | .checkout-mobile-top-gradient {
81 | position: absolute;
82 | left: 50%;
83 | margin-left: -105px;
84 | top: -140px;
85 | width: 211px;
86 | height: 280px;
87 | }
88 |
89 | .checkout-mobile-bottom-gradient {
90 | width: 211px;
91 | height: 280px;
92 | position: absolute;
93 | right: -140.023px;
94 | bottom: -109.977px;
95 | }
96 |
97 | .checkout-mobile-bottom-gradient.checkout-mobile-grainy-blur {
98 | transform: rotate(180deg);
99 | }
100 |
101 | .checkout-order-summary-mobile-yellow-highlight::before {
102 | content: '';
103 | position: absolute;
104 | left: 50%;
105 | margin-left: -124px;
106 | top: 0;
107 | width: 248px;
108 | height: 1px;
109 | background: linear-gradient(
110 | 90deg,
111 | rgba(255, 255, 255, 0) 15%,
112 | rgba(255, 248, 0, 0.6) 50%,
113 | rgba(255, 255, 255, 0) 85%
114 | );
115 | }
116 |
117 | .checkout-success-background {
118 | position: absolute;
119 | left: 50%;
120 | margin-left: -410px;
121 | top: -338.001px;
122 | width: 820px;
123 | height: 938px;
124 | border-radius: 820px;
125 | transform: rotate(180deg);
126 | background: linear-gradient(
127 | 180deg,
128 | rgba(255, 251, 229, 0) 0%,
129 | rgba(21, 227, 227, 0.06) 35.5%,
130 | rgba(255, 248, 0, 0.18) 80.5%
131 | );
132 | filter: blur(100px);
133 | }
134 |
135 | .checkout-success-background::before {
136 | content: '';
137 | position: absolute;
138 | width: 394px;
139 | top: 350px;
140 | height: 559px;
141 | left: 50%;
142 | margin-left: -197px;
143 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(168, 240, 248, 0.6) 100%);
144 | filter: blur(100px);
145 | }
146 |
147 | .footer-border {
148 | position: relative;
149 | background: linear-gradient(90deg, rgba(65, 75, 78, 0) 0%, #414b4e 49.5%, rgba(65, 75, 78, 0) 100%);
150 | }
151 | .footer-border::after {
152 | content: '';
153 | position: absolute;
154 | bottom: 0;
155 | left: calc(50% - 124px);
156 | width: 248px;
157 | height: 1px;
158 | background: linear-gradient(
159 | 90deg,
160 | rgba(255, 255, 255, 0) 15%,
161 | rgba(255, 248, 0, 0.6) 50%,
162 | rgba(255, 255, 255, 0) 85%
163 | );
164 | }
165 |
--------------------------------------------------------------------------------
/src/styles/dashboard.css:
--------------------------------------------------------------------------------
1 | .dashboard-background-base {
2 | width: 100%;
3 | position: absolute;
4 | z-index: -1;
5 | }
6 |
7 | .grain-background {
8 | background: url('/assets/background/grain-bg.svg') repeat;
9 | }
10 |
11 | .dashboard-shared-top-grainy-blur {
12 | position: absolute;
13 | left: -131.023px;
14 | top: -127.993px;
15 | width: 211px;
16 | height: 245px;
17 | z-index: -1;
18 | background: linear-gradient(
19 | 0deg,
20 | rgba(255, 251, 229, 0) 0%,
21 | rgba(21, 227, 227, 0.06) 35.5%,
22 | rgba(255, 248, 0, 0.48) 80.5%
23 | );
24 | filter: blur(26px);
25 | }
26 | .dashboard-shared-top-grainy-blur::before {
27 | content: '';
28 | left: 55px;
29 | position: absolute;
30 | width: 101px;
31 | height: 167px;
32 | flex-shrink: 0;
33 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(168, 240, 248, 0.6) 100%);
34 | filter: blur(26px);
35 | }
36 |
37 | .dashboard-shared-bottom-grainy-blur {
38 | position: absolute;
39 | transform: rotate(-90deg);
40 | right: -440.007px;
41 | bottom: -560px;
42 | width: 820px;
43 | height: 951px;
44 | flex-shrink: 0;
45 | border-radius: 951px;
46 | background: linear-gradient(
47 | 180deg,
48 | rgba(255, 251, 229, 0) 0%,
49 | rgba(21, 227, 227, 0.06) 35.5%,
50 | rgba(255, 248, 0, 0.48) 80.5%
51 | );
52 | filter: blur(100px);
53 | }
54 |
55 | .dashboard-shared-bottom-grainy-blur::before {
56 | content: '';
57 | position: absolute;
58 | width: 394px;
59 | height: 648px;
60 | flex-shrink: 0;
61 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(168, 240, 248, 0.6) 100%);
62 | filter: blur(100px);
63 | }
64 |
65 | .dashboard-sidebar-items {
66 | svg.lucide {
67 | color: #4b4f4f;
68 | }
69 | &.dashboard-sidebar-items-active {
70 | background: #161d1d;
71 | svg.lucide {
72 | color: hsl(var(--primary));
73 | }
74 | }
75 | }
76 |
77 | .dashboard-sidebar-items:hover {
78 | background: #161d1d;
79 | svg.lucide {
80 | color: hsl(var(--primary));
81 | }
82 | }
83 |
84 | .dashboard-sidebar-highlight:after {
85 | content: '';
86 | width: 248px;
87 | height: 1px;
88 | position: absolute;
89 | left: 50%;
90 | margin-left: -124px;
91 | top: 0;
92 | background: linear-gradient(
93 | 90deg,
94 | rgba(255, 255, 255, 0) 15%,
95 | rgba(255, 248, 0, 0.6) 50%,
96 | rgba(255, 255, 255, 0) 85%
97 | );
98 | }
99 |
100 | .dashboard-header-highlight::after {
101 | content: '';
102 | width: 248px;
103 | height: 1px;
104 | position: absolute;
105 | left: 8px;
106 | background: linear-gradient(
107 | 90deg,
108 | rgba(255, 255, 255, 0) 15%,
109 | rgba(255, 248, 0, 0.6) 50%,
110 | rgba(255, 255, 255, 0) 85%
111 | );
112 | }
113 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | @plugin "tailwindcss-animate";
4 |
5 | @custom-variant dark (&:is(.dark *));
6 |
7 | :root {
8 | --background: hsl(0 0% 100%);
9 | --foreground: hsl(240 5% 96%);
10 | --card: hsl(0 0% 100%);
11 | --card-foreground: hsl(222.2 84% 4.9%);
12 | --popover: hsl(0 0% 100%);
13 | --popover-foreground: hsl(222.2 84% 4.9%);
14 | --primary: hsl(222.2 47.4% 11.2%);
15 | --primary-foreground: hsl(240 5% 96%);
16 | --secondary: hsl(210 40% 96.1%);
17 | --secondary-foreground: hsl(222.2 47.4% 11.2%);
18 | --muted: hsl(210 40% 96.1%);
19 | --muted-foreground: hsl(215.4 16.3% 46.9%);
20 | --accent: hsl(210 40% 96.1%);
21 | --accent-foreground: hsl(222.2 47.4% 11.2%);
22 | --destructive: hsl(0 84.2% 60.2%);
23 | --destructive-foreground: hsl(210 40% 98%);
24 | --border: hsl(194 9% 28%);
25 | --input: hsl(214.3 31.8% 91.4%);
26 | --ring: hsl(222.2 84% 4.9%);
27 | --radius: 16px;
28 | --chart-1: hsl(12 76% 61%);
29 | --chart-2: hsl(173 58% 39%);
30 | --chart-3: hsl(197 37% 24%);
31 | --chart-4: hsl(43 74% 66%);
32 | --chart-5: hsl(27 87% 67%);
33 | }
34 |
35 | .dark {
36 | --background: hsl(180 18% 7%);
37 | --foreground: hsl(240 5% 96%);
38 | --card: hsl(222.2 84% 4.9%);
39 | --card-foreground: hsl(210 40% 98%);
40 | --popover: hsl(222.2 84% 4.9%);
41 | --popover-foreground: hsl(210 40% 98%);
42 | --primary: hsl(210 40% 98%);
43 | --primary-foreground: hsl(222.2 47.4% 11.2%);
44 | --secondary: hsl(240, 5%, 80%);
45 | --secondary-foreground: hsl(0 0% 100%);
46 | --muted: hsl(217.2 32.6% 17.5%);
47 | --muted-foreground: hsl(180 1% 48%);
48 | --accent: hsl(217.2 32.6% 17.5%);
49 | --accent-foreground: hsl(210 40% 98%);
50 | --destructive: hsl(0 62.8% 30.6%);
51 | --destructive-foreground: hsl(210 40% 98%);
52 | --border: hsl(187 10% 17%);
53 | --input: hsl(217.2 32.6% 17.5%);
54 | --ring: hsl(58 100% 70%);
55 | --chart-1: hsl(220 70% 50%);
56 | --chart-2: hsl(160 60% 45%);
57 | --chart-3: hsl(30 80% 55%);
58 | --chart-4: hsl(280 65% 60%);
59 | --chart-5: hsl(340 75% 55%);
60 | }
61 |
62 | @utility container {
63 | margin-inline: auto;
64 | padding-inline: 2rem;
65 | }
66 |
67 | @theme inline {
68 | --color-background: var(--background);
69 | --color-foreground: var(--foreground);
70 | --color-card: var(--card);
71 | --color-card-foreground: var(--card-foreground);
72 | --color-popover: var(--popover);
73 | --color-popover-foreground: var(--popover-foreground);
74 | --color-primary: var(--primary);
75 | --color-primary-foreground: var(--primary-foreground);
76 | --color-secondary: var(--secondary);
77 | --color-secondary-foreground: var(--secondary-foreground);
78 | --color-muted: var(--muted);
79 | --color-muted-foreground: var(--muted-foreground);
80 | --color-accent: var(--accent);
81 | --color-accent-foreground: var(--accent-foreground);
82 | --color-destructive: var(--destructive);
83 | --color-destructive-foreground: var(--destructive-foreground);
84 | --color-border: var(--border);
85 | --color-input: var(--input);
86 | --color-ring: var(--ring);
87 | --radius-xs: calc(var(--radius) - 8px);
88 | --radius-sm: calc(var(--radius) - 4px);
89 | --radius-md: calc(var(--radius) - 2px);
90 | --radius-lg: var(--radius);
91 | --radius-xl: calc(var(--radius) + 4px);
92 | --animate-accordion-down: accordion-down 0.2s ease-out;
93 | --animate-accordion-up: accordion-up 0.2s ease-out;
94 |
95 | --container-2xs: 16rem;
96 | --container-4xs: 8rem;
97 | --container-16xs: 4rem;
98 |
99 | @keyframes accordion-down {
100 | from {
101 | height: 0;
102 | }
103 | to {
104 | height: var(--radix-accordion-content-height);
105 | }
106 | }
107 |
108 | @keyframes accordion-up {
109 | from {
110 | height: var(--radix-accordion-content-height);
111 | }
112 | to {
113 | height: 0;
114 | }
115 | }
116 | }
117 |
118 | @layer base {
119 | * {
120 | @apply border-border outline-ring/50;
121 | }
122 | body {
123 | @apply bg-background text-foreground;
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/src/styles/home-page.css:
--------------------------------------------------------------------------------
1 | .background-base {
2 | min-height: 1400px;
3 | width: 100%;
4 | position: absolute;
5 | z-index: -1;
6 | }
7 |
8 | .grid-bg {
9 | background: url('/assets/background/grid-bg.svg') no-repeat;
10 | }
11 |
12 | .grain-background {
13 | background: url('/assets/background/grain-bg.svg') repeat;
14 | }
15 |
16 | .grain-blur {
17 | top: -220px;
18 | background: url('/assets/background/grain-blur.svg') no-repeat 50%;
19 | }
20 |
21 | .large-blur {
22 | left: -30px;
23 | top: -864px;
24 | border-radius: 750px;
25 | opacity: 0.2;
26 | background: radial-gradient(
27 | 70.71% 70.71% at 50% 50%,
28 | rgba(117, 173, 255, 0.2) 0%,
29 | rgba(117, 173, 255, 0) 70%,
30 | rgba(117, 173, 255, 0) 100%
31 | );
32 | }
33 |
34 | .small-blur {
35 | background: url('/assets/background/small-blur.svg') no-repeat 50%;
36 | }
37 |
38 | .featured-card-badge {
39 | position: relative;
40 | background: linear-gradient(90deg, #fff800 0%, #fffecc 100%);
41 | background-clip: text;
42 | -webkit-background-clip: text;
43 | -webkit-text-fill-color: transparent;
44 | }
45 |
46 | .featured-card-badge::before {
47 | content: '';
48 | background: linear-gradient(
49 | 90deg,
50 | rgba(255, 255, 255, 0) 15%,
51 | rgba(255, 248, 0, 0.6) 50%,
52 | rgba(255, 255, 255, 0) 85%
53 | );
54 | position: absolute;
55 | left: 8px;
56 | top: -1px;
57 | width: 48px;
58 | height: 1px;
59 | }
60 | .pricing-card-border {
61 | position: relative;
62 | }
63 | .pricing-card-border::before {
64 | content: '';
65 | position: absolute;
66 | inset: 0;
67 | border-radius: 16px 16px 0 0;
68 | padding: 1px 1px 0;
69 | background: linear-gradient(180deg, #414b4e 49.5%, rgba(65, 75, 78, 0) 100%);
70 | -webkit-mask:
71 | linear-gradient(#fff 0 0) content-box,
72 | linear-gradient(#fff 0 0);
73 | -webkit-mask-composite: xor;
74 | mask-composite: exclude;
75 | }
76 |
77 | .footer-border {
78 | position: relative;
79 | background: linear-gradient(90deg, rgba(65, 75, 78, 0) 0%, #414b4e 49.5%, rgba(65, 75, 78, 0) 100%);
80 | }
81 | .footer-border::after {
82 | content: '';
83 | position: absolute;
84 | bottom: 0;
85 | left: calc(50% - 124px);
86 | width: 248px;
87 | height: 1px;
88 | background: linear-gradient(
89 | 90deg,
90 | rgba(255, 255, 255, 0) 15%,
91 | rgba(255, 248, 0, 0.6) 50%,
92 | rgba(255, 255, 255, 0) 85%
93 | );
94 | }
95 |
96 | .featured-price-title {
97 | position: relative;
98 | }
99 | .featured-price-title::before {
100 | content: '';
101 | position: absolute;
102 | left: 44px;
103 | top: -7px;
104 | height: 17px;
105 | width: 296px;
106 | border-radius: 296px;
107 | opacity: 0.2;
108 | background: #fddd35;
109 | filter: blur(32px);
110 | }
111 |
112 | .featured-price-title::after {
113 | content: '';
114 | width: 196px;
115 | height: 4px;
116 | position: absolute;
117 | left: 94px;
118 | top: -2px;
119 | border-radius: 196px;
120 | opacity: 0.5;
121 | background: #4d94ff;
122 | filter: blur(12px);
123 | }
124 |
125 | .featured-hard-blur-bg {
126 | width: 88px;
127 | height: 4px;
128 | position: absolute;
129 | left: 50%;
130 | margin-left: -44px;
131 | top: -2px;
132 | background: #fff800;
133 | opacity: 0.5;
134 | filter: blur(12px);
135 | }
136 |
137 | .featured-yellow-highlight-bg {
138 | content: '';
139 | position: absolute;
140 | left: 50%;
141 | margin-left: -124px;
142 | width: 248px;
143 | height: 1px;
144 | background: linear-gradient(
145 | 90deg,
146 | rgba(255, 255, 255, 0) 15%,
147 | rgba(255, 248, 0, 0.6) 50%,
148 | rgba(255, 255, 255, 0) 85%
149 | );
150 | }
151 | .featured-vertical-hard-blur-bg {
152 | position: absolute;
153 | top: -140px;
154 | left: 50%;
155 | margin-left: -64px;
156 | width: 128px;
157 | height: 280px;
158 | border-radius: 280px;
159 | opacity: 0.1;
160 | background: #fff800;
161 | filter: blur(48px);
162 | }
163 |
164 | .featured-soft-blur-bg {
165 | position: absolute;
166 | top: -19px;
167 | left: 50%;
168 | margin-left: -192px;
169 | width: 384px;
170 | height: 37px;
171 | border-radius: 384px;
172 | opacity: 0.3;
173 | background: #fff800;
174 | filter: blur(32px);
175 | }
176 |
--------------------------------------------------------------------------------
/src/styles/layout.css:
--------------------------------------------------------------------------------
1 | .secondary-button-animation {
2 | &::after {
3 | content: '';
4 | position: absolute;
5 | z-index: -1;
6 | top: 0;
7 | right: 0;
8 | bottom: 0;
9 | left: 0;
10 | display: block;
11 | background: linear-gradient(90deg, hsla(0, 0%, 99%, 0.16), hsla(0, 0%, 99%, 0) 50%, hsla(0, 0%, 99%, 0));
12 | background-size: 200%;
13 | background-position: 100%;
14 | transition: all 0.8s cubic-bezier(0.246, 0.75, 0.187, 1);
15 | border-radius: inherit;
16 | }
17 | &:hover::after {
18 | background-position: 0;
19 | border-radius: inherit;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/styles/login.css:
--------------------------------------------------------------------------------
1 | .login-background-base {
2 | width: 100%;
3 | position: absolute;
4 | z-index: -1;
5 | }
6 |
7 | .grid-bg {
8 | background: url('/assets/background/grid-bg.svg') no-repeat;
9 | }
10 |
11 | .grain-background {
12 | mix-blend-mode: overlay;
13 | background: url('/assets/background/grain-bg.svg') repeat;
14 | }
15 |
16 | .login-gradient-background {
17 | background: url('/assets/background/login-gradient.svg') no-repeat top;
18 | }
19 |
20 | .login-card-border,
21 | .login-card-hard-blur,
22 | .login-card-vertical-hard-blur,
23 | .login-card-soft-blur,
24 | .login-card-yellow-highlight {
25 | position: relative;
26 | }
27 |
28 | .login-card-border::before {
29 | content: '';
30 | z-index: -1;
31 | position: absolute;
32 | inset: 0;
33 | border-radius: 16px 16px 0 0;
34 | padding: 1px 1px 0;
35 | background: linear-gradient(180deg, #414b4e 49.5%, rgba(65, 75, 78, 0) 100%);
36 | -webkit-mask:
37 | linear-gradient(#fff 0 0) content-box,
38 | linear-gradient(#fff 0 0);
39 | -webkit-mask-composite: xor;
40 | mask-composite: exclude;
41 | }
42 |
43 | .login-card-hard-blur::before {
44 | content: '';
45 | width: 88px;
46 | height: 4px;
47 | position: absolute;
48 | left: 50%;
49 | margin-left: -44px;
50 | top: -2px;
51 | background: #fff800;
52 | opacity: 0.5;
53 | filter: blur(12px);
54 | }
55 |
56 | .login-card-vertical-hard-blur::before {
57 | content: '';
58 | width: 128px;
59 | height: 280px;
60 | position: absolute;
61 | left: 50%;
62 | margin-left: -64px;
63 | top: -140px;
64 | border-radius: 280px;
65 | opacity: 0.1;
66 | background: #fff800;
67 | filter: blur(48px);
68 | }
69 |
70 | .login-card-small-soft-blur::before {
71 | width: 250px;
72 | }
73 | .login-card-medium-soft-blur::before {
74 | width: 384px;
75 | }
76 | .login-card-soft-blur::before {
77 | content: '';
78 | height: 37px;
79 | position: absolute;
80 | left: 52px;
81 | top: -19px;
82 | border-radius: 384px;
83 | opacity: 0.2;
84 | background: #fff800;
85 | filter: blur(32px);
86 | }
87 |
88 | .login-card-small-yellow-highlight::before {
89 | width: 250px;
90 | margin-left: -125px;
91 | }
92 | .login-card-medium-yellow-highlight::before {
93 | width: 384px;
94 | margin-left: -192px;
95 | }
96 |
97 | .login-card-yellow-highlight::before {
98 | content: '';
99 | height: 1px;
100 | left: 50%;
101 |
102 | position: absolute;
103 | background: linear-gradient(
104 | 90deg,
105 | rgba(255, 255, 255, 0) 15%,
106 | rgba(255, 248, 0, 0.9) 50%,
107 | rgba(255, 255, 255, 0) 85%
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/src/utils/paddle/data-helpers.ts:
--------------------------------------------------------------------------------
1 | import { CheckoutEventsTimePeriod } from '@paddle/paddle-js';
2 |
3 | export function parseSDKResponse(response: T): T {
4 | return JSON.parse(JSON.stringify(response));
5 | }
6 |
7 | export const ErrorMessage = 'Something went wrong, please try again later';
8 |
9 | export function getErrorMessage() {
10 | return { error: ErrorMessage, data: [], hasMore: false, totalRecords: 0 };
11 | }
12 |
13 | export function getPaymentReason(origin: string) {
14 | if (origin === 'web' || origin === 'subscription_charge') {
15 | return 'New';
16 | } else {
17 | return 'Renewal of ';
18 | }
19 | }
20 |
21 | const BillingCycleMap = {
22 | day: 'daily',
23 | week: 'weekly',
24 | month: 'monthly',
25 | year: 'yearly',
26 | };
27 |
28 | const CustomBillingCycleMap = {
29 | day: 'days',
30 | week: 'weeks',
31 | month: 'months',
32 | year: 'years',
33 | };
34 |
35 | export function formatBillingCycle({ frequency, interval }: CheckoutEventsTimePeriod) {
36 | if (frequency === 1) {
37 | return BillingCycleMap[interval];
38 | } else {
39 | return `every ${frequency} ${CustomBillingCycleMap[interval]}`;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/utils/paddle/get-customer-id.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@/utils/supabase/server';
2 |
3 | export async function getCustomerId() {
4 | const supabase = await createClient();
5 | const user = await supabase.auth.getUser();
6 | if (user.data.user?.email) {
7 | const customersData = await supabase
8 | .from('customers')
9 | .select('customer_id,email')
10 | .eq('email', user.data.user?.email)
11 | .single();
12 | if (customersData?.data?.customer_id) {
13 | return customersData?.data?.customer_id as string;
14 | }
15 | }
16 | return '';
17 | }
18 |
--------------------------------------------------------------------------------
/src/utils/paddle/get-paddle-instance.ts:
--------------------------------------------------------------------------------
1 | import { Environment, LogLevel, Paddle, PaddleOptions } from '@paddle/paddle-node-sdk';
2 |
3 | export function getPaddleInstance() {
4 | const paddleOptions: PaddleOptions = {
5 | environment: (process.env.NEXT_PUBLIC_PADDLE_ENV as Environment) ?? Environment.sandbox,
6 | logLevel: LogLevel.error,
7 | };
8 |
9 | if (!process.env.PADDLE_API_KEY) {
10 | console.error('Paddle API key is missing');
11 | }
12 |
13 | return new Paddle(process.env.PADDLE_API_KEY!, paddleOptions);
14 | }
15 |
--------------------------------------------------------------------------------
/src/utils/paddle/get-subscription.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { getCustomerId } from '@/utils/paddle/get-customer-id';
4 | import { ErrorMessage, parseSDKResponse } from '@/utils/paddle/data-helpers';
5 | import { getPaddleInstance } from '@/utils/paddle/get-paddle-instance';
6 | import { SubscriptionDetailResponse } from '@/lib/api.types';
7 |
8 | export async function getSubscription(subscriptionId: string): Promise {
9 | try {
10 | const customerId = await getCustomerId();
11 | if (customerId) {
12 | const subscription = await getPaddleInstance().subscriptions.get(subscriptionId, {
13 | include: ['next_transaction', 'recurring_transaction_details'],
14 | });
15 |
16 | return { data: parseSDKResponse(subscription) };
17 | }
18 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
19 | } catch (e) {
20 | return { error: ErrorMessage };
21 | }
22 | return { error: ErrorMessage };
23 | }
24 |
--------------------------------------------------------------------------------
/src/utils/paddle/get-subscriptions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { getCustomerId } from '@/utils/paddle/get-customer-id';
4 | import { getPaddleInstance } from '@/utils/paddle/get-paddle-instance';
5 | import { SubscriptionResponse } from '@/lib/api.types';
6 | import { getErrorMessage } from '@/utils/paddle/data-helpers';
7 |
8 | export async function getSubscriptions(): Promise {
9 | try {
10 | const customerId = await getCustomerId();
11 | if (customerId) {
12 | const subscriptionCollection = getPaddleInstance().subscriptions.list({ customerId: [customerId], perPage: 20 });
13 | const subscriptions = await subscriptionCollection.next();
14 | return {
15 | data: subscriptions,
16 | hasMore: subscriptionCollection.hasMore,
17 | totalRecords: subscriptionCollection.estimatedTotal,
18 | };
19 | }
20 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
21 | } catch (e) {
22 | return getErrorMessage();
23 | }
24 | return getErrorMessage();
25 | }
26 |
--------------------------------------------------------------------------------
/src/utils/paddle/get-transactions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { getCustomerId } from '@/utils/paddle/get-customer-id';
4 | import { getErrorMessage, parseSDKResponse } from '@/utils/paddle/data-helpers';
5 | import { getPaddleInstance } from '@/utils/paddle/get-paddle-instance';
6 | import { TransactionResponse } from '@/lib/api.types';
7 |
8 | export async function getTransactions(subscriptionId: string, after: string): Promise {
9 | try {
10 | const customerId = await getCustomerId();
11 | if (customerId) {
12 | const transactionCollection = getPaddleInstance().transactions.list({
13 | customerId: [customerId],
14 | after: after,
15 | perPage: 10,
16 | status: ['billed', 'paid', 'past_due', 'completed', 'canceled'],
17 | subscriptionId: subscriptionId ? [subscriptionId] : undefined,
18 | });
19 | const transactionData = await transactionCollection.next();
20 | return {
21 | data: parseSDKResponse(transactionData ?? []),
22 | hasMore: transactionCollection.hasMore,
23 | totalRecords: transactionCollection.estimatedTotal,
24 | error: undefined,
25 | };
26 | } else {
27 | return { data: [], hasMore: false, totalRecords: 0 };
28 | }
29 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
30 | } catch (e) {
31 | return getErrorMessage();
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/utils/paddle/parse-money.ts:
--------------------------------------------------------------------------------
1 | export function convertAmountFromLowestUnit(amount: string, currency: string) {
2 | switch (currency) {
3 | case 'JPY':
4 | case 'KRW':
5 | return parseFloat(amount);
6 | default:
7 | return parseFloat(amount) / 100;
8 | }
9 | }
10 |
11 | export function parseMoney(amount: string = '0', currency: string = 'USD') {
12 | const parsedAmount = convertAmountFromLowestUnit(amount, currency);
13 | return formatMoney(parsedAmount, currency);
14 | }
15 |
16 | export function formatMoney(amount: number = 0, currency: string = 'USD') {
17 | const language = typeof navigator !== 'undefined' ? navigator.language : 'en-US';
18 | return new Intl.NumberFormat(language ?? 'en-US', {
19 | style: 'currency',
20 | currency: currency,
21 | }).format(amount);
22 | }
23 |
--------------------------------------------------------------------------------
/src/utils/paddle/process-webhook.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CustomerCreatedEvent,
3 | CustomerUpdatedEvent,
4 | EventEntity,
5 | EventName,
6 | SubscriptionCreatedEvent,
7 | SubscriptionUpdatedEvent,
8 | } from '@paddle/paddle-node-sdk';
9 | import { createClient } from '@/utils/supabase/server-internal';
10 |
11 | export class ProcessWebhook {
12 | async processEvent(eventData: EventEntity) {
13 | switch (eventData.eventType) {
14 | case EventName.SubscriptionCreated:
15 | case EventName.SubscriptionUpdated:
16 | await this.updateSubscriptionData(eventData);
17 | break;
18 | case EventName.CustomerCreated:
19 | case EventName.CustomerUpdated:
20 | await this.updateCustomerData(eventData);
21 | break;
22 | }
23 | }
24 |
25 | private async updateSubscriptionData(eventData: SubscriptionCreatedEvent | SubscriptionUpdatedEvent) {
26 | const supabase = await createClient();
27 | const { error } = await supabase
28 | .from('subscriptions')
29 | .upsert({
30 | subscription_id: eventData.data.id,
31 | subscription_status: eventData.data.status,
32 | price_id: eventData.data.items[0].price?.id ?? '',
33 | product_id: eventData.data.items[0].price?.productId ?? '',
34 | scheduled_change: eventData.data.scheduledChange?.effectiveAt,
35 | customer_id: eventData.data.customerId,
36 | })
37 | .select();
38 |
39 | if (error) throw error;
40 | }
41 |
42 | private async updateCustomerData(eventData: CustomerCreatedEvent | CustomerUpdatedEvent) {
43 | const supabase = await createClient();
44 | const { error } = await supabase
45 | .from('customers')
46 | .upsert({
47 | customer_id: eventData.data.id,
48 | email: eventData.data.email,
49 | })
50 | .select();
51 |
52 | if (error) throw error;
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/utils/supabase/client.ts:
--------------------------------------------------------------------------------
1 | import { createBrowserClient } from '@supabase/ssr';
2 |
3 | export function createClient() {
4 | return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!);
5 | }
6 |
--------------------------------------------------------------------------------
/src/utils/supabase/middleware.ts:
--------------------------------------------------------------------------------
1 | import { createServerClient } from '@supabase/ssr';
2 | import { NextResponse, type NextRequest } from 'next/server';
3 |
4 | export async function updateSession(request: NextRequest) {
5 | let supabaseResponse = NextResponse.next({
6 | request,
7 | });
8 |
9 | const supabase = createServerClient(
10 | process.env.NEXT_PUBLIC_SUPABASE_URL!,
11 | process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
12 | {
13 | cookies: {
14 | getAll() {
15 | return request.cookies.getAll();
16 | },
17 | setAll(cookiesToSet) {
18 | cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value));
19 | supabaseResponse = NextResponse.next({
20 | request,
21 | });
22 | cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options));
23 | },
24 | },
25 | },
26 | );
27 |
28 | // Do not run code between createServerClient and
29 | // supabase.auth.getUser(). A simple mistake could make it very hard to debug
30 | // issues with users being randomly logged out.
31 |
32 | // IMPORTANT: DO NOT REMOVE auth.getUser()
33 |
34 | await supabase.auth.getUser();
35 |
36 | // IMPORTANT: You *must* return the supabaseResponse object as it is.
37 | // If you're creating a new response object with NextResponse.next() make sure to:
38 | // 1. Pass the request in it, like so:
39 | // const myNewResponse = NextResponse.next({ request })
40 | // 2. Copy over the cookies, like so:
41 | // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
42 | // 3. Change the myNewResponse object to fit your needs, but avoid changing
43 | // the cookies!
44 | // 4. Finally:
45 | // return myNewResponse
46 | // If this is not done, you may be causing the browser and server to go out
47 | // of sync and terminate the user's session prematurely!
48 |
49 | return supabaseResponse;
50 | }
51 |
--------------------------------------------------------------------------------
/src/utils/supabase/server-internal.ts:
--------------------------------------------------------------------------------
1 | import { createServerClient } from '@supabase/ssr';
2 | import { cookies } from 'next/headers';
3 |
4 | export async function createClient() {
5 | const cookieStore = await cookies();
6 |
7 | return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, {
8 | cookies: {
9 | getAll() {
10 | return cookieStore.getAll();
11 | },
12 | setAll(cookiesToSet) {
13 | try {
14 | cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
15 | } catch {
16 | // The `setAll` method was called from a Server Component.
17 | // This can be ignored if you have middleware refreshing
18 | // user sessions.
19 | }
20 | },
21 | },
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/src/utils/supabase/server.ts:
--------------------------------------------------------------------------------
1 | import { createServerClient } from '@supabase/ssr';
2 | import { cookies } from 'next/headers';
3 |
4 | export async function createClient() {
5 | const cookieStore = await cookies();
6 |
7 | return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
8 | cookies: {
9 | getAll() {
10 | return cookieStore.getAll();
11 | },
12 | setAll(cookiesToSet) {
13 | try {
14 | cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
15 | } catch {
16 | // The `setAll` method was called from a Server Component.
17 | // This can be ignored if you have middleware refreshing
18 | // user sessions.
19 | }
20 | },
21 | },
22 | });
23 | }
24 |
25 | export async function validateUserSession() {
26 | const supabase = await createClient();
27 | const {
28 | data: { session },
29 | } = await supabase.auth.getSession();
30 |
31 | if (!session) {
32 | throw new Error('You are not allowed to perform this action.');
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/supabase/.gitignore:
--------------------------------------------------------------------------------
1 | # Supabase
2 | .branches
3 | .temp
4 | .env
5 |
--------------------------------------------------------------------------------
/supabase/migrations/20240907140223_initialize.sql:
--------------------------------------------------------------------------------
1 | -- Create customers table to map Paddle customer_id to email
2 | create table
3 | public.customers (
4 | customer_id text not null,
5 | email text not null,
6 | created_at timestamp with time zone not null default now(),
7 | updated_at timestamp with time zone not null default now(),
8 | constraint customers_pkey primary key (customer_id)
9 | ) tablespace pg_default;
10 |
11 | -- Create subscription table to store webhook events sent by Paddle
12 | create table
13 | public.subscriptions (
14 | subscription_id text not null,
15 | subscription_status text not null,
16 | price_id text null,
17 | product_id text null,
18 | scheduled_change text null,
19 | customer_id text not null,
20 | created_at timestamp with time zone not null default now(),
21 | updated_at timestamp with time zone not null default now(),
22 | constraint subscriptions_pkey primary key (subscription_id),
23 | constraint public_subscriptions_customer_id_fkey foreign key (customer_id) references customers (customer_id)
24 | ) tablespace pg_default;
25 |
26 | -- Grant access to authenticated users to read the customers table to get the customer_id based on the email
27 | create policy "Enable read access for authenticated users to customers" on "public"."customers" as PERMISSIVE for SELECT to authenticated using ( true );
28 |
29 | -- Grant access to authenticated users to read the subscriptions table
30 | create policy "Enable read access for authenticated users to subscriptions" on "public"."subscriptions" as PERMISSIVE for SELECT to authenticated using ( true );
31 |
--------------------------------------------------------------------------------
/supabase/seed.sql:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PaddleHQ/paddle-nextjs-starter-kit/c3bfe45929fd5cc9af4f710e8b9089f9e457b2e9/supabase/seed.sql
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "target": "ES2015",
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------