payment-kit 1.13.45 → 1.13.47

package/src/pages/checkout/pricing-table.tsx

@@ -58,7 +58,7 @@ const groupItemsByRecurring = (items: TPricingTableItem[]) => {
 };
 
 export default function PricingTable({ id }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const [params] = useSearchParams();
   const { error, loading, data } = useRequest(() => fetchData(id));
   const [state, setState] = useSetState({ interval: '', loading: '' });
@@ -77,18 +77,32 @@ export default function PricingTable({ id }: Props) {
 
   if (error) {
     return (
-      <div style={{ height: '90vh', width: '100vw' }}>
+      <Box
+        sx={{
+          width: '100vw',
+          minHeight: '90vh',
+          pb: 4,
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
         <Header />
         <Center relative="parent">
           <Alert severity="error">{error.message}</Alert>
         </Center>
-      </div>
+      </Box>
     );
   }
 
   if (loading || !data) {
     return (
-      <div style={{ height: '90vh', width: '100vw' }}>
+      <Box
+        sx={{
+          width: '100vw',
+          minHeight: '90vh',
+          pb: 4,
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
         <Header />
         <Center>
           <Stack direction="column" alignItems="center" spacing={4}>
@@ -98,25 +112,32 @@ export default function PricingTable({ id }: Props) {
             <Typography component="div" variant="h6" sx={{ width: '10%' }}>
               <Skeleton />
             </Typography>
-            <Stack direction="row" flexWrap="wrap" spacing={5}>
+            <Stack flexWrap="wrap" direction="row" gap={{ xs: 3, sm: 5, md: 10 }} justifyContent="center">
               <ProductSkeleton key={1} count={2} />
               <ProductSkeleton key={2} count={3} />
               <ProductSkeleton key={3} count={4} />
             </Stack>
           </Stack>
         </Center>
-      </div>
+      </Box>
     );
   }
 
   if (data.items.length === 0) {
     return (
-      <div style={{ height: '90vh', width: '100vw' }}>
+      <Box
+        sx={{
+          width: '100vw',
+          minHeight: '90vh',
+          pb: 4,
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
         <Header />
         <Center relative="parent">
           <Alert severity="warning">{t('checkout.noPricing')}</Alert>
         </Center>
-      </div>
+      </Box>
     );
   }
 
@@ -137,24 +158,53 @@ export default function PricingTable({ id }: Props) {
   };
 
   return (
-    <div style={{ height: '90vh', width: '100vw' }}>
+    <Box
+      sx={{
+        width: '100vw',
+        minHeight: '90vh',
+        pb: 4,
+        display: {
+          xs: 'block',
+          sm: 'flex',
+        },
+        flexDirection: 'column',
+      }}>
       <Header />
       <Center relative="parent">
-        <Stack direction="column" alignItems="center" spacing={5}>
+        <Stack
+          direction="column"
+          alignItems="center"
+          sx={{
+            pt: {
+              xs: 4,
+              sm: 2,
+            },
+            gap: {
+              xs: 3,
+              sm: 5,
+            },
+          }}>
           <Typography variant="h4" color="text.primary" fontWeight={600}>
             {data.name}
             {!livemode && <Livemode />}
           </Typography>
           {Object.keys(recurring).length > 1 && (
-            <ToggleButtonGroup value={state.interval} onChange={(_, value) => setState({ interval: value })} exclusive>
+            <ToggleButtonGroup
+              value={state.interval}
+              onChange={(_, value) => {
+                if (value !== null) {
+                  setState({ interval: value });
+                }
+              }}
+              exclusive>
               {Object.keys(recurring).map((x) => (
                 <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
-                  {formatRecurring(recurring[x] as PriceRecurring)}
+                  {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
                 </ToggleButton>
               ))}
             </ToggleButtonGroup>
           )}
-          <Stack direction="row" flexWrap="wrap" spacing={5}>
+          <Stack flexWrap="wrap" direction="row" gap={{ xs: 3, sm: 5, md: 10 }} justifyContent="center">
             {grouped[state.interval]?.map((x) => {
               return (
                 <Fade in>
@@ -186,10 +236,10 @@ export default function PricingTable({ id }: Props) {
                       <PaymentAmount amount={formatPriceAmount(x.price, data.currency, x.product.unit_label)} />
                       <Stack direction="column" alignItems="flex-start">
                         <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                          per
+                          {t('checkout.per')}
                         </Typography>
                         <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                          {formatRecurring(x.price.recurring as PriceRecurring, false, '')}
+                          {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
                         </Typography>
                       </Stack>
                     </Stack>
@@ -226,6 +276,6 @@ export default function PricingTable({ id }: Props) {
           </Stack>
         </Stack>
       </Center>
-    </div>
+    </Box>
   );
 }