264 lines
9.7 KiB
TypeScript
264 lines
9.7 KiB
TypeScript
/*eslint-disable*/
|
|
'use client';
|
|
|
|
import Card from '@/components/card/Card';
|
|
import DashboardLayout from '@/components/layout';
|
|
import { Database } from '@/types_db';
|
|
import { createStripePortal } from '@/utils/stripe/server';
|
|
import { Badge, Button, Flex, Icon, Link, Text } from '@chakra-ui/react';
|
|
import { User } from '@supabase/supabase-js';
|
|
import { redirect, usePathname, useRouter } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import { MdChevronRight } from 'react-icons/md';
|
|
|
|
type Subscription = Database['public']['Tables']['subscriptions']['Row'];
|
|
type Product = Database['public']['Tables']['products']['Row'];
|
|
type Price = Database['public']['Tables']['prices']['Row'];
|
|
interface ProductWithPrices extends Product {
|
|
prices: Price[];
|
|
}
|
|
interface PriceWithProduct extends Price {
|
|
products: Product | null;
|
|
}
|
|
interface SubscriptionWithProduct extends Subscription {
|
|
prices: PriceWithProduct | null;
|
|
}
|
|
|
|
interface Props {
|
|
user: User | null | undefined;
|
|
products: ProductWithPrices[];
|
|
subscription: SubscriptionWithProduct | null | any;
|
|
userDetails: { [x: string]: any } | null | any;
|
|
}
|
|
|
|
export default function Subscription(props: Props) {
|
|
const router = useRouter();
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const currentPath = usePathname();
|
|
|
|
const handleStripePortalRequest = async () => {
|
|
setIsSubmitting(true);
|
|
const redirectUrl = await createStripePortal(currentPath);
|
|
setIsSubmitting(false);
|
|
return router.push(redirectUrl);
|
|
};
|
|
|
|
if (!props.user) {
|
|
return redirect('/dashboard/signin');
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<DashboardLayout
|
|
userDetails={props.userDetails}
|
|
user={props?.user}
|
|
products={props.products}
|
|
subscription={props.subscription}
|
|
title="Subscription Page"
|
|
description="Manage your subscriptions"
|
|
>
|
|
<Flex
|
|
w="100%"
|
|
direction="column"
|
|
position="relative"
|
|
mt={{ base: '70px', md: '0px', xl: '0px' }}
|
|
>
|
|
<Flex
|
|
mx="auto"
|
|
w={{ base: '100%', md: '100%', xl: '100%' }}
|
|
maxW="100%"
|
|
justify="center"
|
|
direction={{ base: 'column', md: 'row' }}
|
|
>
|
|
<Card w="830px" maxW={{ base: '100%' }} h="min-content">
|
|
<Card
|
|
bg="linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)"
|
|
maxW={{ base: '100%' }}
|
|
px={{ base: '20px', md: '40px', lg: '50px' }}
|
|
py={{ base: '28px', md: '40px', lg: '50px' }}
|
|
me={{ base: '0px', md: '20px' }}
|
|
mb="16px"
|
|
>
|
|
<Badge
|
|
w="max-content"
|
|
mb="10px"
|
|
fontSize="sm"
|
|
bg="rgba(255,255,255,0.12)"
|
|
color="white"
|
|
fontWeight="bold"
|
|
borderRadius="8px"
|
|
>
|
|
CURRENT PLAN
|
|
</Badge>
|
|
{props.subscription ? (
|
|
props.products?.map((product: any) => {
|
|
const price = product?.prices?.find(
|
|
(price: any) => price.id === props.subscription?.price_id
|
|
);
|
|
// {props.subscription?.map((subscription:any) => {
|
|
// const price = subscription?.prices?.find(
|
|
// (user:any) => user.id === props?.userDetails.id,
|
|
// );
|
|
|
|
if (price?.id === props.subscription.price_id)
|
|
return (
|
|
// IN CASE USER HAS PLAN
|
|
<Flex
|
|
justifyContent="space-between"
|
|
direction={{ base: 'column', md: 'row' }}
|
|
>
|
|
<Flex direction="column">
|
|
<Text
|
|
fontSize={{ base: '30px', md: '44px' }}
|
|
color="white"
|
|
fontWeight="800"
|
|
>
|
|
{product?.name
|
|
? product.name?.toString()
|
|
: 'No plan active'}
|
|
</Text>
|
|
<Text
|
|
fontSize={{ base: 'sm', md: '20px' }}
|
|
color="white"
|
|
fontWeight="500"
|
|
mb={{ base: '20px', md: '0px' }}
|
|
>
|
|
{product?.name
|
|
? `You are currently on ${product.name?.toString()}`
|
|
: "You don't have an active subscription."}
|
|
</Text>
|
|
</Flex>
|
|
<Flex direction="column">
|
|
<Text
|
|
fontSize={{ base: 'lg', md: '24px' }}
|
|
color="white"
|
|
textAlign={{ base: 'left', md: 'right' }}
|
|
fontWeight="800"
|
|
mb="10px"
|
|
>
|
|
$
|
|
{price?.unit_amount !== null
|
|
? price?.unit_amount / 100
|
|
: '0'}
|
|
{price?.interval === 'year'
|
|
? '/year'
|
|
: price?.interval === 'month'
|
|
? '/month'
|
|
: 'error'}
|
|
</Text>
|
|
<Button
|
|
py="20px"
|
|
px="16px"
|
|
fontSize="sm"
|
|
variant="outline"
|
|
borderRadius="45px"
|
|
w={{ base: '100%', md: '266px' }}
|
|
h="54px"
|
|
onClick={handleStripePortalRequest}
|
|
>
|
|
{props?.subscription
|
|
? 'Manage your subscription'
|
|
: 'See pricing Plans'}
|
|
<Icon
|
|
as={MdChevronRight}
|
|
display={props?.subscription ? 'none' : 'unset'}
|
|
mt="2px"
|
|
h="16px"
|
|
w="16px"
|
|
/>
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
})
|
|
) : (
|
|
// IN CASE OF NOW PLAN
|
|
<Flex
|
|
justifyContent="space-between"
|
|
direction={{ base: 'column', md: 'row' }}
|
|
>
|
|
<Flex direction="column">
|
|
<Text
|
|
fontSize={{ base: '30px', md: '44px' }}
|
|
color="white"
|
|
fontWeight="800"
|
|
>
|
|
No plan active
|
|
</Text>
|
|
<Text
|
|
fontSize={{ base: 'sm', md: '20px' }}
|
|
color="white"
|
|
fontWeight="500"
|
|
mb={{ base: '20px', md: '0px' }}
|
|
>
|
|
You don't have an active subscription.
|
|
</Text>
|
|
</Flex>
|
|
<Flex direction="column">
|
|
<Text
|
|
fontSize={{ base: 'lg', md: '24px' }}
|
|
color="white"
|
|
textAlign={{ base: 'left', md: 'right' }}
|
|
fontWeight="800"
|
|
mb="10px"
|
|
>
|
|
$0/month
|
|
</Text>
|
|
<Link href="/pricing">
|
|
<Button
|
|
py="20px"
|
|
px="16px"
|
|
fontSize="sm"
|
|
variant="outline"
|
|
borderRadius="45px"
|
|
w={{ base: '100%', md: '190px' }}
|
|
h="54px"
|
|
>
|
|
See pricing Plans
|
|
<Icon
|
|
as={MdChevronRight}
|
|
mt="2px"
|
|
h="16px"
|
|
w="16px"
|
|
/>
|
|
</Button>
|
|
</Link>
|
|
</Flex>
|
|
</Flex>
|
|
)}
|
|
</Card>
|
|
<Flex
|
|
direction={{ base: 'column', md: 'row' }}
|
|
justifyContent="center"
|
|
>
|
|
<Text
|
|
textAlign={'center'}
|
|
fontWeight={'500'}
|
|
fontSize="sm"
|
|
alignSelf="center"
|
|
color="gray.500"
|
|
w={{ base: '70%', md: 'unset' }}
|
|
me="2px"
|
|
>
|
|
Got a question regarding your subscription? Chat with us via{' '}
|
|
</Text>
|
|
<Link href="mailto:hello@horizon-ui.com">
|
|
<Text
|
|
textAlign={'center'}
|
|
fontWeight={'500'}
|
|
fontSize="sm"
|
|
textDecoration="underline"
|
|
color="gray.500"
|
|
>
|
|
hello@horizon-ui.com.
|
|
</Text>
|
|
</Link>
|
|
</Flex>
|
|
</Card>
|
|
</Flex>
|
|
</Flex>
|
|
</DashboardLayout>
|
|
</>
|
|
);
|
|
}
|