feat(CustomerRevamp): Refactor customer subscription list, customer coupons and customer details

src/components/OverviewCard.tsx

@@ -9,6 +9,7 @@ interface OverviewCardProps {
   caption: string
   isAccentContent?: boolean
   isLoading?: boolean
+  refresh?: () => void
 }
 
 export const OverviewCard: FC<OverviewCardProps> = ({
@@ -18,26 +19,36 @@ export const OverviewCard: FC<OverviewCardProps> = ({
   caption,
   isAccentContent,
   isLoading,
+  refresh,
 }) => {
   return (
     <Card className="flex-1 gap-4 p-6">
       {isLoading ? (
         <div className="h-22">
-          <Skeleton className="mb-8 w-22" variant="text" />
+          <Skeleton className="w-22" variant="text" />
           <div className="flex flex-col gap-4">
             <Skeleton className="w-50" variant="text" />
             <Skeleton className="w-12" variant="text" />
           </div>
         </div>
       ) : (
         <>
-          <div className="flex items-center gap-2">
-            <Typography variant="captionHl">{title}</Typography>
-            {tooltipContent && (
-              <Tooltip className="flex h-5 items-end" placement="top-start" title={tooltipContent}>
-                <Icon name="info-circle" />
-              </Tooltip>
-            )}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Typography variant="captionHl">{title}</Typography>
+
+              {tooltipContent && (
+                <Tooltip
+                  className="flex h-5 items-end"
+                  placement="top-start"
+                  title={tooltipContent}
+                >
+                  <Icon name="info-circle" />
+                </Tooltip>
+              )}
+            </div>
+
+            {refresh && <Icon name="reload" onClick={refresh} />}
           </div>
 
           <div className="flex flex-col gap-1">

src/components/TimezoneDate.tsx

@@ -3,6 +3,7 @@
 import { TimezoneEnum } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
+import { tw } from '~/styles/utils'
 
 enum MainTimezoneEnum {
   utc0 = 'utc0',
@@ -15,8 +16,9 @@
   mainDateFormat?: string
   mainTimezone?: keyof typeof MainTimezoneEnum
   customerTimezone?: TimezoneEnum
-  mainTypographyProps?: Pick<TypographyProps, 'variant' | 'color'>
+  mainTypographyProps?: Pick<TypographyProps, 'variant' | 'color' | 'className'>
   className?: string
+  typographyClassName?: string
 }
 
 export const TimezoneDate = ({
@@ -25,6 +27,7 @@
   mainTimezone = MainTimezoneEnum.organization,
   customerTimezone,
   mainTypographyProps,
+  typographyClassName,
   className,
 }: TimezoneDateProps) => {
   const { translate } = useInternationalization()
@@ -69,14 +72,14 @@
       placement="top-end"
     >
       <Typography
-        className="w-max border-b-2 border-dotted border-grey-400"
+        className={tw('w-max border-b-2 border-dotted border-grey-400', typographyClassName)}
         color="grey700"
         {...mainTypographyProps}
         noWrap
       >
         {formatDateToTZ(
           date,
           mainTimezone === MainTimezoneEnum.organization
             ? timezone
             : mainTimezone === MainTimezoneEnum.customer
               ? customerTimezone

src/components/coupons/CouponCaption.tsx

@@ -44,104 +44,123 @@ export interface CouponMixedType extends CouponItemFragment {
 interface CouponCaptionProps {
   coupon: CouponMixedType
   variant?: TypographyProps['variant']
+  className?: string
 }
 
-export const CouponCaption = memo(({ coupon, variant = 'caption' }: CouponCaptionProps) => {
-  const { translate } = useInternationalization()
+export const CouponCaption = memo(
+  ({ coupon, variant = 'caption', className }: CouponCaptionProps) => {
+    const { translate } = useInternationalization()
 
-  const getCaption = () => {
-    const {
-      amountCurrency,
-      amountCents,
-      amountCentsRemaining,
-      percentageRate,
-      frequency,
-      frequencyDuration,
-      frequencyDurationRemaining,
-    } = coupon
-    const couponType = amountCents ? CouponTypeEnum.FixedAmount : CouponTypeEnum.Percentage
+    const getCaption = () => {
+      const {
+        amountCurrency,
+        amountCents,
+        amountCentsRemaining,
+        percentageRate,
+        frequency,
+        frequencyDuration,
+        frequencyDurationRemaining,
+      } = coupon
+      const couponType = amountCents ? CouponTypeEnum.FixedAmount : CouponTypeEnum.Percentage
 
-    if (couponType === CouponTypeEnum.FixedAmount && frequency === CouponFrequency.Once) {
-      return translate(
-        amountCentsRemaining ? 'text_637b4da08cd0118cd0c4486f' : 'text_632d68358f1fedc68eed3e70',
-        {
-          amount: intlFormatNumber(
-            deserializeAmount(
-              Number(amountCentsRemaining) || Number(amountCents),
-              amountCurrency || CurrencyEnum.Usd,
-            ) || 0,
-            {
-              currencyDisplay: 'symbol',
-              currency: amountCurrency || undefined,
-            },
-          ),
-        },
-      )
-    } else if (couponType === CouponTypeEnum.Percentage && frequency === CouponFrequency.Once) {
-      return translate('text_632d68358f1fedc68eed3eb5', {
-        rate: intlFormatNumber(Number(percentageRate) / 100 || 0, {
-          style: 'percent',
-        }),
-      })
-    } else if (
-      couponType === CouponTypeEnum.FixedAmount &&
-      frequency === CouponFrequency.Recurring
-    ) {
-      return translate(
-        'text_632d68358f1fedc68eed3ede',
-        {
+      if (couponType === CouponTypeEnum.FixedAmount && frequency === CouponFrequency.Once) {
+        return translate(
+          amountCentsRemaining ? 'text_637b4da08cd0118cd0c4486f' : 'text_632d68358f1fedc68eed3e70',
+          {
+            amount: intlFormatNumber(
+              deserializeAmount(
+                Number(amountCentsRemaining) || Number(amountCents),
+                amountCurrency || CurrencyEnum.Usd,
+              ) || 0,
+              {
+                currencyDisplay: 'symbol',
+                currency: amountCurrency || undefined,
+              },
+            ),
+          },
+        )
+      } else if (couponType === CouponTypeEnum.Percentage && frequency === CouponFrequency.Once) {
+        return translate('text_632d68358f1fedc68eed3eb5', {
+          rate: intlFormatNumber(Number(percentageRate) / 100 || 0, {
+            style: 'percent',
+          }),
+        })
+      } else if (
+        couponType === CouponTypeEnum.FixedAmount &&
+        frequency === CouponFrequency.Recurring
+      ) {
+        return translate(
+          'text_632d68358f1fedc68eed3ede',
+          {
+            amount: intlFormatNumber(
+              deserializeAmount(
+                Number(amountCentsRemaining) || Number(amountCents),
+                amountCurrency || CurrencyEnum.Usd,
+              ) || 0,
+              {
+                currencyDisplay: 'symbol',
+                currency: amountCurrency || undefined,
+              },
+            ),
+            duration: frequencyDurationRemaining || frequencyDuration,
+          },
+          frequencyDurationRemaining || frequencyDuration || 1,
+        )
+      } else if (
+        couponType === CouponTypeEnum.Percentage &&
+        frequency === CouponFrequency.Recurring
+      ) {
+        return translate(
+          'text_632d68358f1fedc68eed3ef9',
+          {
+            rate: intlFormatNumber(Number(percentageRate) / 100 || 0, {
+              style: 'percent',
+            }),
+            duration: frequencyDurationRemaining || frequencyDuration,
+          },
+          frequencyDurationRemaining || frequencyDuration || 1,
+        )
+      } else if (
+        couponType === CouponTypeEnum.FixedAmount &&
+        frequency === CouponFrequency.Forever
+      ) {
+        return translate('text_63c946e8bef768ead2fee35c', {
           amount: intlFormatNumber(
-            deserializeAmount(
-              Number(amountCentsRemaining) || Number(amountCents),
-              amountCurrency || CurrencyEnum.Usd,
-            ) || 0,
+            deserializeAmount(Number(amountCents), amountCurrency || CurrencyEnum.Usd) || 0,
             {
               currencyDisplay: 'symbol',
               currency: amountCurrency || undefined,
             },
           ),
-          duration: frequencyDurationRemaining || frequencyDuration,
-        },
-        frequencyDurationRemaining || frequencyDuration || 1,
-      )
-    } else if (
-      couponType === CouponTypeEnum.Percentage &&
-      frequency === CouponFrequency.Recurring
-    ) {
-      return translate(
-        'text_632d68358f1fedc68eed3ef9',
-        {
+        })
+      } else if (
+        couponType === CouponTypeEnum.Percentage &&
+        frequency === CouponFrequency.Forever
+      ) {
+        return translate('text_63c96b18bfbf40e9ef600e99', {
           rate: intlFormatNumber(Number(percentageRate) / 100 || 0, {
             style: 'percent',
           }),
-          duration: frequencyDurationRemaining || frequencyDuration,
-        },
-        frequencyDurationRemaining || frequencyDuration || 1,
-      )
-    } else if (couponType === CouponTypeEnum.FixedAmount && frequency === CouponFrequency.Forever) {
-      return translate('text_63c946e8bef768ead2fee35c', {
-        amount: intlFormatNumber(
-          deserializeAmount(Number(amountCents), amountCurrency || CurrencyEnum.Usd) || 0,
-          {
-            currencyDisplay: 'symbol',
-            currency: amountCurrency || undefined,
-          },
-        ),
-      })
-    } else if (couponType === CouponTypeEnum.Percentage && frequency === CouponFrequency.Forever) {
-      return translate('text_63c96b18bfbf40e9ef600e99', {
-        rate: intlFormatNumber(Number(percentageRate) / 100 || 0, {
-          style: 'percent',
-        }),
-      })
+        })
+      }
     }
-  }
 
-  return (
-    <Typography variant={variant} color="grey600" noWrap data-test="coupon-caption">
-      {getCaption()}
-    </Typography>
-  )
-})
+    return (
+      <>
+        {!className && (
+          <Typography variant={variant} color="grey600" noWrap data-test="coupon-caption">
+            {getCaption()}
+          </Typography>
+        )}
+
+        {className && (
+          <Typography className={className} data-test="coupon-caption">
+            {getCaption()}
+          </Typography>
+        )}
+      </>
+    )
+  },
+)
 
 CouponCaption.displayName = 'CouponCaption'