.vscode/settings.json

@@ -7,5 +7,7 @@
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
     ["tw\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
-  "eslint.useFlatConfig": true
+  "eslint.useFlatConfig": true,
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
 }

src/App.tsx

@@ -9,11 +9,10 @@ import { ErrorBoundary } from '~/components/ErrorBoundary'
 import { RouteWrapper } from '~/components/RouteWrapper'
 import { UserIdentifier } from '~/components/UserIdentifier'
 import { envGlobalVar, initializeApolloClient, initializeTranslations } from '~/core/apolloClient'
+import { AppEnvEnum } from '~/core/constants/globalTypes'
 import { initializeYup } from '~/formValidation/initializeYup'
 import { theme } from '~/styles'
 
-import { AppEnvEnum } from './core/constants/globalTypes'
-
 const App = () => {
   const [client, setClient] = useState<ApolloClient<NormalizedCacheObject> | null>(null)
   const { appEnv } = envGlobalVar()

src/components/GenericPlaceholder.tsx

@@ -1,10 +1,8 @@
 import { ReactNode } from 'react'
 
+import { Button, ButtonVariant, Typography } from '~/components/designSystem'
 import { tw } from '~/styles/utils'
 
-import { Button, ButtonVariant } from './designSystem/Button'
-import { Typography } from './designSystem/Typography'
-
 export interface GenericPlaceholderProps {
   className?: string
   title?: string

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 { formatDateToTZ, getTimezoneConfig } from '~/core/timezone'
 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 @@ interface TimezoneDateProps {
   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 @@ export const TimezoneDate = ({
   mainTimezone = MainTimezoneEnum.organization,
   customerTimezone,
   mainTypographyProps,
+  typographyClassName,
   className,
 }: TimezoneDateProps) => {
   const { translate } = useInternationalization()
@@ -69,7 +72,7 @@ export const TimezoneDate = ({
       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

src/components/__tests__/WarningDialog.test.tsx

@@ -1,10 +1,9 @@
 import { act, cleanup, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
+import { WarningDialog } from '~/components/WarningDialog'
 import { render } from '~/test-utils'
 
-import { WarningDialog } from '../WarningDialog'
-
 const onContinueMock = jest.fn()
 
 async function prepare() {

src/components/auth/GoogleAuthButton.tsx

@@ -3,14 +3,13 @@ import { Stack } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
+import { Alert, Button, Typography } from '~/components/designSystem'
 import { hasDefinedGQLError } from '~/core/apolloClient'
 import { DOCUMENTATION_ENV_VARS } from '~/core/constants/externalUrls'
 import { addValuesToUrlState } from '~/core/utils/urlUtils'
 import { LagoApiError, useGetGoogleAuthUrlLazyQuery } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 
-import { Alert, Button, Typography } from '../designSystem'
-
 export type GoogleAuthModeEnum = 'login' | 'signup' | 'invite'
 
 const getErrorKey = (errorCode: string): string => {

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'

src/components/coupons/__tests__/CouponCaption.test.tsx

@@ -1,10 +1,9 @@
 import { act, cleanup, screen } from '@testing-library/react'
 
+import { CouponCaption, CouponMixedType } from '~/components/coupons/CouponCaption'
 import { CouponFrequency, CurrencyEnum } from '~/generated/graphql'
 import { render } from '~/test-utils'
 
-import { CouponCaption, CouponMixedType } from '../CouponCaption'
-
 const amountCurrency = CurrencyEnum.Usd
 
 const couponsDataSet = [