update pay function
This commit is contained in:
@@ -0,0 +1,263 @@
|
||||
/*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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user