Styled Drawer - Copy this React, Mui Component to your project

import-React,-{-useMemo,-useState-}-from-'react';-import-{-Typography,-Box,-Divider,-Grid,-TextField,-Drawer,-IconButton-}-from-'@mui/material';-import-{-styled-}-from-'@mui/system';-import-{-CardContent,-Card-}-from-'@mui/material';-import-StripePayment-from-'./stripePayement';-import-{-Slide-}-from-'@mui/material';-import-{-Stack-}-from-'@mui/material';-import-HeaderSvg-from-'../../../public/svg/logo';-import-VisaIcon,-{-AmericanCardIcon,-MasterCardIcon-}-from-'assets/svg/visa';-import-{-programLevels-}-from-'pages/college/collegeDetail/addProgram/options';-import-{-applicationPayment-}-from-'services/application';-import-{-openSnackbar-}-from-'api/snackbar';-import-{-SnackbarProps-}-from-'types/snackbar';-import-ThemeButton-from-'components/ui/Button';-import-{-getDiscount-}-from-'services/discount';-import-{-CrossIcon3-}-from-'assets/svg/CrossIcon2';-import-{-formatDollar-}-from-'utils/trimFc';-import-{-student-}-from-'utils/apiUtils/endpoints';-import-useAuth-from-'hooks/useAuth';-const-InvoiceContainer-=-styled(Stack)(({-theme-})-=>-({-width:-'100%',-maxWidth:-800,-margin:-'auto',-backgroundColor:-'transparent',-padding:-theme.spacing(1)-}));-const-Header-=-styled(Box)(({-theme-})-=>-({-backgroundColor:-'#2A50ED',-color:-'#fff',-display:-'flex',-justifyContent:-'space-between',-alignItems:-'center',-padding:-theme.spacing(1),-borderTopLeftRadius:-theme.shape.borderRadius,-borderTopRightRadius:-theme.shape.borderRadius-}));-const-Invoice-=-({-open,-setOpen,-setSelectedRows,-setRowSelection,-payUserDeatils,-setPayUserDeatils,-student_Data,-FetchApplication2,-FetchApplication-}:-any)-=>-{-console.log('student_Data',-student_Data,-payUserDeatils);-const-{-user-}-=-useAuth();-const-[promoCode,-setPromoCode]-=-useState('');-const-[promoDiscount,-setPromoDiscount]-=-useState(0);-const-[pay,-setPay]-=-useState(false);-const-[discountType,-setDiscountType]-=-useState<string>('');-const-[stripeKey,-setStripeKey]-=-useState('');-const-[loading,-setLoading]-=-useState(false);-const-[disLoading,-setDisLoading]-=-useState(false);-const-[offerPrice,-setOfferPrice]-=-useState(false);-const-total-=-useMemo(()-=>-{-const-sum-=-payUserDeatils?.reduce((acc:-number,-app:-any)-=>-{-const-applicationFee-=-parseFloat(app?.application_fee)-||-0;-const-discount-=-parseFloat(app?.discount_amount)-||-0;-return-acc-+-(applicationFee---discount);-},-0);-return-sum-?-Math.max(0,-sum---promoDiscount)-:-0;-},-[payUserDeatils,-promoDiscount]);-const-totalDiscount-=-payUserDeatils?.reduce((sum:-number,-app:-any)-=>-{-const-discount-=-parseFloat(app?.discount_amount)-||-0;-return-sum-+-discount;-},-0);-const-handleApplyPromoCode-=-()-=>-{-setDisLoading(true);-getDiscount({-pathParams:-{-code:-promoCode-}-})-.then((res:-any)-=>-{-setDisLoading(false);-if-(res?.value)-{-setPromoCode(res?.code);-const-discountValue-=-res?.value;-setOfferPrice(discountValue);-if-(res?.type-===-'PERCENTAGE'-&&-total)-{-let-totalAmount-=-total;-let-discountAmount-=-discountValue;-let-promoDiscount-=-(totalAmount-*-discountAmount)-/-100;-setPromoDiscount(promoDiscount);-}-else-{-setPromoDiscount(discountValue);-}-setDiscountType(res?.type);-openSnackbar({-open:-true,-message:-'Promo-code-applied-successfully!',-variant:-'alert',-alert:-{-color:-'success'-},-anchorOrigin:-{-vertical:-'top',-horizontal:-'right'-}-}-as-SnackbarProps);-}-else-{-setDisLoading(false);-setPromoCode('');-setPromoDiscount(0);-openSnackbar({-open:-true,-message:-'Invalid-or-expired-promo-code.',-variant:-'alert',-alert:-{-color:-'error'-},-anchorOrigin:-{-vertical:-'top',-horizontal:-'right'-}-}-as-SnackbarProps);-}-})-.catch((err)-=>-{-setDisLoading(false);-openSnackbar({-open:-true,-message:-err?.data?.message-||-'Invalid-or-expired-promo-code.',-variant:-'alert',-alert:-{-color:-'error'-},-anchorOrigin:-{-vertical:-'top',-horizontal:-'right'-}-}-as-SnackbarProps);-});-};-const-stripePayment-=-()-=>-{-const-application_ids-=-payUserDeatils?.map((ele:-any)-=>-ele?.application_id);-setLoading(true);-applicationPayment({-body:-{-amount:-total,-currency:-'CAD',-metadata:-{-student_id:-student_Data?.id,-applicationIds:-application_ids,-recruiter_id:-student_Data?.recruiter_id,-program_names:-payUserDeatils?.map((ele:-any)-=>-ele?.program_name),-user_id:-user?.user_id,-discount:-totalDiscount-||-0,-amount:-total,-promo_discount:-promoDiscount-||-0,-promo_code:-promoCode-||-0-},-name:-`${student_Data?.first_name}${student_Data?.last_name}`,-line1:-student_Data?.address-||-'123-Main-St',-line2:-'',-city:-student_Data?.city-||-'New-York',-state:-student_Data?.state-||-'NY',-postal_code:-student_Data?.zip-||-'10001',-country:-student_Data?.country-||-'US'-}-})-?.then((res)-=>-{-setLoading(false);-setStripeKey(res?.clientSecret);-setPay(true);-})-.catch((err)-=>-{-openSnackbar({-open:-true,-message:-err?.data?.message-||-'Something-went-wrong',-variant:-'alert',-alert:-{-color:-'error'-},-anchorOrigin:-{-vertical:-'top',-horizontal:-'right'-}-}-as-SnackbarProps);-setLoading(false);-setStripeKey('');-setPay(false);-});-};-const-resetItems-=-()-=>-{-setPay(false);-setOpen(false);-setSelectedRows([]);-setRowSelection({});-setPayUserDeatils([]);-};-return-(-<Drawer-open={open}-onClose={()-=>-{-setOpen(false);-setPromoCode('');-setPromoDiscount(0);-}}-anchor={'right'}-sx={{-height:-'100%',-width:-400,-maxWidth:-400,-overflow:-'auto',-backgroundColor:-'transparent'-}}->-<Stack-spacing={4}-sx={{-height:-'100%',-overflow:-'auto',-bgcolor:-'transparent',-width:-600,-mt:-1-}}>-<InvoiceContainer>-<Header-sx={{-py:-2-}}>-<Typography-variant="h2"-fontWeight={300}>-Invoice-</Typography>-<Stack-direction={'column'}-gap={1}-justifyContent={'center'}-alignItems={'flex-end'}>-<HeaderSvg-/>-<Typography-variant="body2"-fontWeight="bold"-textAlign={'end'}>-1479-Buffalo-Pl,-<br-/>-Winnipeg,-MB,-Canada-</Typography>-<Typography-variant="body2"-fontWeight="bold">-{'-'}-+1-(289)-946-1283-</Typography>-</Stack>-</Header>-<Stack-px={1}-mt={2}>-<Typography-variant="body1"-gutterBottom-fontSize={16}>-Student:-<strong>{`${payUserDeatils[0]?.first_name}-${payUserDeatils[0]?.last_name-||-''}`}</strong>-</Typography>-<Typography-variant="subtitle1"-gutterBottom-fontSize={16}-mt={0.5}>-Applications-</Typography>-<Grid-container-justifyContent="space-between"-alignItems="center"-spacing={2}-width={'100%'}>-{/*-Table-Headers-*/}-<Grid-item-xs={10}>-<Typography-variant="body1"-fontWeight="bold">-Items-</Typography>-</Grid>-<Grid-item-xs={2}-justifyContent={'flex-end'}>-<Typography-variant="body1"-fontWeight="bold"-textAlign={'start'}>-Fee-</Typography>-</Grid>-{payUserDeatils.map((application:-any,-index:-number)-=>-(-<Grid-container-justifyContent="space-between"-alignItems="start"-key={application.application_id}-px={2}-mt={1}>-<Grid-item-xs={8}-mb={1}>-<Typography-variant="body2">-{application?.program_level-?-programLevels?.find((ele)-=>-ele?.value-===-application?.program_level)?.label-:-'N/A'}{'-'}---{application.program_name}-({application.program_id}),-{application.institute_name}-</Typography>-</Grid>-<Grid-item-xs={4}>-{/*-Check-if-discount-exists-*/}-{!application.discount_amount-||-parseFloat(application.discount_amount)-<=-0-?-(-//-Show-only-the-total-amount-if-no-discount-<Typography-variant="body2"-fontWeight="bold"-textAlign="right">-{`${formatDollar(parseFloat(application.application_fee-||-'0').toFixed(2))}-CAD`}-</Typography>-)-:-(-<>-{/*-Base-Total-(Before-Discount)-*/}-<Typography-variant="body2"-fontWeight="bold"-textAlign="right"-sx={{-textDecoration:-'line-through',-//-Cross-out-the-base-total-when-discount-exists-color:-'#ff2828',-//-Red-color-for-crossed-out-total-marginBottom:-'8px'-}}->-{`${formatDollar(parseFloat(application.application_fee-||-'0').toFixed(2))}-CAD`}-</Typography>-{/*-Discounted-Total-*/}-<Typography-variant="body2"-fontWeight="bold"-textAlign="right"-sx={{-cursor:-'pointer'-}}->-{parseFloat(application.application_fee-||-'0')---parseFloat(application.discount_amount-||-'0')-<=-0-?-'Free'-:-`${formatDollar((parseFloat(application.application_fee-||-'0')---parseFloat(application.discount_amount-||-'0')).toFixed(2))}-CAD`}-</Typography>-</>-)}-</Grid>-{index-!==-payUserDeatils.length---1-&&-(-<Grid-item-xs={12}>-<Divider-sx={{-mb:-1-}}-/>-</Grid>-)}-</Grid>-))}-</Grid>-<Divider-sx={{-my:-1-}}-/>-<Grid-container-justifyContent="end"-alignItems="center"-spacing={2}>-<Grid-item>-<Typography-variant="body1"-fontWeight="bold">-Total:-</Typography>-</Grid>-<Grid-item>-<Typography-variant="body1"-fontWeight="bold"-textAlign="right">-{formatDollar(total.toFixed(2))}-CAD-</Typography>-</Grid>-</Grid>-<Stack-mt={promoDiscount->-0-?-1-:-2}>-{promoDiscount-===-0-&&-(-<Grid-container-spacing={1}>-<Grid-item-xs={9}>-<TextField-label="Promo-Code"-variant="outlined"-size="small"-fullWidth-value={promoCode}-onChange={(e)-=>-setPromoCode(e.target.value)}-/>-</Grid>-<Grid-item-xs={3}>-<ThemeButton-variant="contained"-loading={disLoading}-color="primary"-buttonStyle={{-height:-'100%',-width:-'100%'-}}-onClick={()-=>-{-if-(promoCode)-{-handleApplyPromoCode();-}-}}->-Apply-</ThemeButton>-</Grid>-</Grid>-)}-{promoDiscount->-0-&&-(-<Stack-direction="row"-alignItems="center"-justifyContent={'end'}>-<Typography-variant="body1"-color="green"-fontWeight={'semibold'}>-Promo-Code-Applied:-{promoCode}-(-{discountType-===-'PERCENTAGE'-?-`${offerPrice}%-off`-:-`${formatDollar(promoDiscount)}-off`})-</Typography>-<IconButton-size="medium"-color="error"-sx={{-mt:--0.3-}}-onClick={()-=>-{-setPay(false);-setPromoCode('');-setPromoDiscount(0);-}}->-<CrossIcon3-/>-</IconButton>-</Stack>-)}-</Stack>-</Stack>-<Stack-mt={1}-textAlign="center"-px={1}-pt={2}>-<Typography-variant="subtitle1"-mb={2}-fontSize={16}-fontWeight="bold"-textAlign="left">-Payment-Methods-</Typography>-{!pay-&&-(-<Stack-direction="row"-spacing={2}-justifyContent="center"-sx={{-mt:--1-}}>-<Card-sx={{-width:-'100%',-height:-160,-bgcolor:-'transparent',-border:-'1px-solid-#ddd',-borderRadius:-1,-boxShadow:-'none',-display:-'flex',-flexDirection:-'column',-justifyContent:-'space-between',-position:-'relative'-}}->-<CardContent-sx={{-p:-1,-width:-'100%'-}}>-<Box-display="flex"-justifyContent="center"-mb={1}-alignItems={'center'}-gap={2}>-<VisaIcon-/>-<MasterCardIcon-/>-<AmericanCardIcon-/>-</Box>-<Typography-variant="subtitle1"-align="center"-fontWeight={500}-mb={0.5}-color="text.primary">-VISA-DEBIT-/-CREDIT-CARD-</Typography>-<Typography-variant="body2"-align="center"-color="textSecondary"-sx={{-fontSize:-'0.8rem'-}}>-Powered-by-Stripe-</Typography>-</CardContent>-<ThemeButton-variant="contained"-color="primary"-disabled={disLoading}-loading={loading}-buttonStyle={{-width:-'100%',-fontSize:-13,-borderRadius:-0,-fontWeight:-500,-py:-1.5,-backgroundColor:-'#2A50ED',-'&:hover':-{-backgroundColor:-'#2A50ED'-}-}}-onClick={()-=>-{-stripePayment();-}}->-PAY-</ThemeButton>-</Card>-{/*-<Card-sx={{-width:-300,-height:-160,-bgcolor:-'transparent',-border:-'1px-solid-#ddd',-borderRadius:-1,-boxShadow:-'none',-display:-'flex',-flexDirection:-'column',-justifyContent:-'space-between',-position:-'relative'-//-same-position-as-the-previous-card-}}->-<CardContent-sx={{-p:-1-}}>-<Box-display="flex"-justifyContent="center"-mb={1}>-<BankIcon-/>-</Box>-<Typography-variant="subtitle1"-mt={-2}-fontWeight={500}-color="text.primary">-BANK-TRANSFER-</Typography>-</CardContent>-<ThemeButton-variant="contained"-color="secondary"-buttonStyle={{-width:-'100%',-fontSize:-13,-borderRadius:-0,-fontWeight:-500,-py:-1.5,-backgroundColor:-'#2A50ED',-'&:hover':-{-backgroundColor:-'#2A50ED'-}-}}->-DETAILS-/-UPLOAD-</ThemeButton>-</Card>-*/}-</Stack>-)}-{pay-&&-(-<Stack-px={1}>-<Slide-direction="left"-in={pay}-timeout={800}-mountOnEnter-unmountOnExit>-<Box>-<StripePayment-pay={pay}-disLoading={disLoading}-setpay={setPay}-stripeKey={stripeKey}-setOpen={setOpen}-resetItems={resetItems}-FetchApplication2={FetchApplication2}-FetchApplication={FetchApplication}-/>-</Box>-</Slide>-</Stack>-)}-</Stack>-</InvoiceContainer>-</Stack>-</Drawer>-);-};-export-default-Invoice;