update pay function
This commit is contained in:
@@ -0,0 +1,308 @@
|
||||
/*eslint-disable*/
|
||||
'use client';
|
||||
|
||||
// import ManageSubscriptionButton from './ManageSubscriptionButton';
|
||||
import Card from '@/components/card/Card';
|
||||
import DashboardLayout from '@/components/layout';
|
||||
import { HSeparator } from '@/components/separator/Separator';
|
||||
import { Database } from '@/types_db';
|
||||
import { handleRequest } from '@/utils/auth-helpers/client';
|
||||
import { updateEmail, updateName } from '@/utils/auth-helpers/server';
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
FormLabel,
|
||||
Input,
|
||||
Text,
|
||||
useColorModeValue
|
||||
} from '@chakra-ui/react';
|
||||
import { User } from '@supabase/supabase-js';
|
||||
import { redirect, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
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;
|
||||
userDetails: { [x: string]: any } | null;
|
||||
}
|
||||
|
||||
export default function Settings(props: Props) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const router = useRouter();
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
const placeholderColor = useColorModeValue(
|
||||
{ color: 'gray.500' },
|
||||
{ color: 'whiteAlpha.600' }
|
||||
);
|
||||
const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
|
||||
|
||||
// -------------- Input Value Handler --------------
|
||||
|
||||
const handleSubmitEmail = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
setIsSubmitting(true);
|
||||
// Check if the new email is the same as the old email
|
||||
if (e.currentTarget.newEmail.value === props.user.email) {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
handleRequest(e, updateEmail, router);
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const handleSubmitName = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
setIsSubmitting(true);
|
||||
// Check if the new name is the same as the old name
|
||||
if (e.currentTarget.fullName.value === props.user.user_metadata.full_name) {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
handleRequest(e, updateName, router);
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
if (!props.user) {
|
||||
return redirect('/dashboard/signin');
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardLayout
|
||||
userDetails={props.userDetails}
|
||||
user={props?.user}
|
||||
products={props.products}
|
||||
subscription={props.subscription}
|
||||
title="Account Settings"
|
||||
description="Profile settings."
|
||||
>
|
||||
<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
|
||||
// minW={{ base: '100%' }}
|
||||
maxW={{ base: '100%' }}
|
||||
px={{ base: '10px', md: '20px', lg: '20px' }}
|
||||
py={{ base: '28px', md: '20px', lg: '30px' }}
|
||||
w="820px"
|
||||
h="min-content"
|
||||
me={{ base: '0px', md: '20px' }}
|
||||
mb={{ base: '20px', md: '0px' }}
|
||||
>
|
||||
<Text
|
||||
ps={{ base: '10px', md: '32px' }}
|
||||
fontSize={{ base: 'lg', md: '30px' }}
|
||||
color={textColor}
|
||||
fontWeight="800"
|
||||
>
|
||||
Account Settings
|
||||
</Text>
|
||||
<Text
|
||||
ps={{ base: '10px', md: '32px' }}
|
||||
fontSize={{ base: 'sm', md: 'md' }}
|
||||
color="gray.500"
|
||||
fontWeight="500"
|
||||
mb="30px"
|
||||
>
|
||||
Here you can change your account information
|
||||
</Text>
|
||||
<FormLabel
|
||||
px={{ base: '10px', md: '32px' }}
|
||||
display="flex"
|
||||
ms="10px"
|
||||
htmlFor={'fullName'}
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
fontWeight="bold"
|
||||
_hover={{ cursor: 'pointer' }}
|
||||
lineHeight="100%"
|
||||
mb="12px"
|
||||
>
|
||||
Your Name
|
||||
<Text
|
||||
fontSize={'14px'}
|
||||
color="gray.500"
|
||||
fontWeight="500"
|
||||
ms="4px"
|
||||
>
|
||||
{' '}
|
||||
(30 characters maximum)
|
||||
</Text>
|
||||
</FormLabel>
|
||||
<Flex
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
px={{ base: '10px', md: '32px' }}
|
||||
mb={{ base: '30px', md: '0px' }}
|
||||
>
|
||||
<form
|
||||
style={{ width: '100%' }}
|
||||
id="nameForm"
|
||||
onSubmit={(e) => handleSubmitName(e)}
|
||||
>
|
||||
<Input
|
||||
color={textColor}
|
||||
border="1px solid"
|
||||
borderRadius={'45px'}
|
||||
borderColor={borderColor}
|
||||
h="60px"
|
||||
type="text"
|
||||
name="fullName"
|
||||
id="fullName"
|
||||
defaultValue={props.user?.user_metadata.full_name ?? ''}
|
||||
fontWeight="500"
|
||||
placeholder="Please enter your full name"
|
||||
_placeholder={placeholderColor}
|
||||
_focus={{ borderColor: 'none' }}
|
||||
mb={{ base: '14px', md: '26px' }}
|
||||
me="20px"
|
||||
/>
|
||||
</form>
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
ms="10px"
|
||||
variant="primary"
|
||||
borderRadius="45px"
|
||||
h="54px"
|
||||
form="nameForm"
|
||||
type="submit"
|
||||
_hover={{
|
||||
boxShadow:
|
||||
'0px 21px 27px -10px rgba(96, 60, 255, 0.48) !important',
|
||||
bg:
|
||||
'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important',
|
||||
_disabled: {
|
||||
bg:
|
||||
'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
||||
}
|
||||
}}
|
||||
minW="150px"
|
||||
>
|
||||
Update name
|
||||
</Button>
|
||||
<HSeparator
|
||||
bg="gray.200"
|
||||
mt={{ base: '30px', md: '0px' }}
|
||||
display={{ md: 'none' }}
|
||||
alignSelf="center"
|
||||
maxW="90%"
|
||||
/>
|
||||
</Flex>
|
||||
{/* <Text
|
||||
px={{ base: '10px', md: '36px' }}
|
||||
color="red"
|
||||
mb="20px"
|
||||
display={nameError?.status ? 'block' : 'none'}
|
||||
>
|
||||
{nameError?.message}
|
||||
</Text> */}
|
||||
<FormLabel
|
||||
px={{ base: '10px', md: '32px' }}
|
||||
display="flex"
|
||||
htmlFor={'email'}
|
||||
fontSize="md"
|
||||
flexDirection={{ base: 'column', md: 'row' }}
|
||||
color={textColor}
|
||||
letterSpacing="0px"
|
||||
fontWeight="bold"
|
||||
_hover={{ cursor: 'pointer' }}
|
||||
lineHeight="100%"
|
||||
mb="12px"
|
||||
>
|
||||
Your Email
|
||||
<Text
|
||||
fontSize={'14px'}
|
||||
color="gray.500"
|
||||
fontWeight="500"
|
||||
ms={{ base: '0px', md: '4px' }}
|
||||
mt={{ base: '6px', md: '0px' }}
|
||||
>
|
||||
{' '}
|
||||
(We will email you to verify the change)
|
||||
</Text>
|
||||
</FormLabel>
|
||||
<Flex
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
px={{ base: '10px', md: '32px' }}
|
||||
>
|
||||
<form
|
||||
style={{ width: '100%' }}
|
||||
id="emailForm"
|
||||
onSubmit={(e) => handleSubmitEmail(e)}
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
name="newEmail"
|
||||
id="email"
|
||||
color={textColor}
|
||||
border="1px solid"
|
||||
borderRadius={'45px'}
|
||||
borderColor={borderColor}
|
||||
h="60px"
|
||||
fontWeight="500"
|
||||
placeholder="Please enter your email"
|
||||
_placeholder={placeholderColor}
|
||||
_focus={{ borderColor: 'none' }}
|
||||
defaultValue={props.user.email ?? ''}
|
||||
mb={{ base: '14px', md: '26px' }}
|
||||
me="20px"
|
||||
/>
|
||||
</form>
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
type="submit"
|
||||
form="emailForm"
|
||||
variant="primary"
|
||||
borderRadius="45px"
|
||||
ms="10px"
|
||||
h="54px"
|
||||
_hover={{
|
||||
boxShadow:
|
||||
'0px 21px 27px -10px rgba(96, 60, 255, 0.48) !important',
|
||||
bg:
|
||||
'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important',
|
||||
_disabled: {
|
||||
bg:
|
||||
'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
||||
}
|
||||
}}
|
||||
minW="150px"
|
||||
>
|
||||
Update email
|
||||
</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</DashboardLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user