feat: 🏷 Allow to apply multiple coupons on customer

getlago · Nov 23, 2022 · b0fb5b2 · b0fb5b2
1 parent e340f80
commit b0fb5b2
Show file tree

Hide file tree

Showing 8 changed files with 361 additions and 28 deletions.
diff --git a/ditto/base.json b/ditto/base.json
@@ -193,6 +193,7 @@
   "text_6310755befed49627644222f": "Persistent",
   "text_6310755befed496276442231": "• The calculated value is not reset to 0, it persists over all billing periods",
   "text_63105dbdd88c7432a3b255eb": "Recurring count",
+  "text_637b4da08cd0118cd0c4486f": "{{amount}} remaining",
   "text_632d68358f1fedc68eed3e5a": "Type",
   "text_632d68358f1fedc68eed3e60": "Fixed amount discount",
   "text_632d68358f1fedc68eed3e9d": "Frequency",

diff --git a/ditto/config.yml b/ditto/config.yml
@@ -87,5 +87,7 @@ projects:
     id: 633b622919283cdbfb2f7233
   - name: "\U0001F44D [Ready for dev] - Settings - Customers - Lago gocardless connection"
     id: 634ea0e94c99df2bb59820d9
+  - name: "\U0001F44D [Ready for dev] - Coupons - Apply several coupons to customer"
+    id: 637b4d9f764dcb190431ad4d
 format: flat
 variants: true
diff --git a/ditto/index.js b/ditto/index.js
@@ -113,6 +113,9 @@ module.exports = {
   "project_63105dba2074ec779d08c6b4": {
     "base": require('./👍 [Ready for dev] - B.metrics - Persistent bm in aggregation type__base.json')
   },
+  "project_637b4d9f764dcb190431ad4d": {
+    "base": require('./👍 [Ready for dev] - Coupons - Apply several coupons to customer__base.json')
+  },
   "project_632d6831010fafe9382b616d": {
     "base": require('./👍 [Ready for dev] - Coupons - Create % and recurring coupons__base.json')
   },

diff --git a/src/components/coupons/CouponCaption.tsx b/src/components/coupons/CouponCaption.tsx
@@ -3,12 +3,7 @@ import { gql } from '@apollo/client'
 import { TypographyProps } from '@mui/material'
 
 import { intlFormatNumber } from '~/core/intlFormatNumber'
-import {
-  CouponItemFragment,
-  CouponTypeEnum,
-  CouponFrequency,
-  CustomerCouponFragment,
-} from '~/generated/graphql'
+import { CouponItemFragment, CouponTypeEnum, CouponFrequency } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { Typography } from '~/components/designSystem'
 
@@ -27,31 +22,49 @@ gql`
     id
     amountCurrency
     amountCents
+    amountCentsRemaining
     percentageRate
     frequency
     frequencyDuration
+    frequencyDurationRemaining
   }
 `
 
+export interface CouponMixedType extends CouponItemFragment {
+  amountCentsRemaining?: number
+  frequencyDurationRemaining?: number
+}
+
 interface CouponCaptionProps {
-  coupon: CouponItemFragment | CustomerCouponFragment
+  coupon: CouponMixedType
   variant?: TypographyProps['variant']
 }
 
 export const CouponCaption = memo(({ coupon, variant = 'caption' }: CouponCaptionProps) => {
   const { translate } = useInternationalization()
 
   const getCaption = () => {
-    const { amountCurrency, amountCents, percentageRate, frequency, frequencyDuration } = coupon
+    const {
+      amountCurrency,
+      amountCents,
+      amountCentsRemaining,
+      percentageRate,
+      frequency,
+      frequencyDuration,
+      frequencyDurationRemaining,
+    } = coupon
     let couponType = amountCents ? CouponTypeEnum.FixedAmount : CouponTypeEnum.Percentage
 
     if (couponType === CouponTypeEnum.FixedAmount && frequency === CouponFrequency.Once) {
-      return translate('text_632d68358f1fedc68eed3e70', {
-        amount: intlFormatNumber(amountCents || 0, {
-          currencyDisplay: 'symbol',
-          currency: amountCurrency || undefined,
-        }),
-      })
+      return translate(
+        amountCentsRemaining ? 'text_637b4da08cd0118cd0c4486f' : 'text_632d68358f1fedc68eed3e70',
+        {
+          amount: intlFormatNumber(amountCentsRemaining || amountCents || 0, {
+            currencyDisplay: 'symbol',
+            currency: amountCurrency || undefined,
+          }),
+        }
+      )
     } else if (couponType === CouponTypeEnum.Percentage && frequency === CouponFrequency.Once) {
       return translate('text_632d68358f1fedc68eed3eb5', {
         rate: intlFormatNumber(Number(percentageRate) || 0, {
@@ -66,13 +79,13 @@ export const CouponCaption = memo(({ coupon, variant = 'caption' }: CouponCaptio
       return translate(
         'text_632d68358f1fedc68eed3ede',
         {
-          amount: intlFormatNumber(amountCents || 0, {
+          amount: intlFormatNumber(amountCentsRemaining || amountCents || 0, {
             currencyDisplay: 'symbol',
             currency: amountCurrency || undefined,
           }),
-          duration: frequencyDuration,
+          duration: frequencyDurationRemaining || frequencyDuration,
         },
-        frequencyDuration || 1
+        frequencyDurationRemaining || frequencyDuration || 1
       )
     } else if (
       couponType === CouponTypeEnum.Percentage &&
@@ -85,9 +98,9 @@ export const CouponCaption = memo(({ coupon, variant = 'caption' }: CouponCaptio
             minimumFractionDigits: 2,
             style: 'percent',
           }),
-          duration: frequencyDuration,
+          duration: frequencyDurationRemaining || frequencyDuration,
         },
-        frequencyDuration || 1
+        frequencyDurationRemaining || frequencyDuration || 1
       )
     }
   }

diff --git a/src/components/customers/AddCouponToCustomerDialog.tsx b/src/components/customers/AddCouponToCustomerDialog.tsx
@@ -206,6 +206,10 @@ export const AddCouponToCustomerDialog = forwardRef<
           getCoupons()
         }
       }}
+      onClickAway={() => {
+        formikProps.resetForm()
+        setCurrencyError(false)
+      }}
       actions={({ closeDialog }) => (
         <>
           <Button

diff --git a/src/components/customers/CustomerCoupons.tsx b/src/components/customers/CustomerCoupons.tsx
@@ -11,11 +11,16 @@ import {
 import { SectionHeader } from '~/styles/customer'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { Typography, Avatar, Icon, Button, Tooltip } from '~/components/designSystem'
-import { CouponCaption } from '~/components/coupons/CouponCaption'
+import { CouponCaption, CouponMixedType } from '~/components/coupons/CouponCaption'
 import { theme, HEADER_TABLE_HEIGHT, NAV_HEIGHT } from '~/styles'
 import { WarningDialog, WarningDialogRef } from '~/components/WarningDialog'
 import { addToast } from '~/core/apolloClient'
 
+import {
+  AddCouponToCustomerDialog,
+  AddCouponToCustomerDialogRef,
+} from './AddCouponToCustomerDialog'
+
 gql`
   fragment CustomerCoupon on AppliedCoupon {
     id
@@ -37,10 +42,12 @@ gql`
 
 interface CustomerCouponsProps {
   coupons?: CustomerCouponFragment[] | null | undefined
+  customerId: string
 }
 
-export const CustomerCoupons = memo(({ coupons }: CustomerCouponsProps) => {
+export const CustomerCoupons = memo(({ coupons, customerId }: CustomerCouponsProps) => {
   const removeDialogRef = useRef<WarningDialogRef>(null)
+  const addCouponDialogRef = useRef<AddCouponToCustomerDialogRef>(null)
   const deleteCouponId = useRef<string | null>(null)
   const { translate } = useInternationalization()
   const [removeCoupon] = useRemoveCouponMutation({
@@ -60,6 +67,15 @@ export const CustomerCoupons = memo(({ coupons }: CustomerCouponsProps) => {
         <Container>
           <SectionHeader variant="subhead">
             {translate('text_628b8c693e464200e00e469d')}
+            <Button
+              variant="quaternary"
+              align="left"
+              onClick={() => {
+                addCouponDialogRef.current?.openDialog()
+              }}
+            >
+              {translate('text_628b8dc14c71840130f8d8a1')}
+            </Button>
           </SectionHeader>
           <ListHeader>
             <Typography variant="bodyHl" color="disabled" noWrap>
@@ -75,7 +91,10 @@ export const CustomerCoupons = memo(({ coupons }: CustomerCouponsProps) => {
                 <Typography color="textSecondary" variant="bodyHl" noWrap>
                   {appliedCoupon.coupon?.name}
                 </Typography>
-                <CouponCaption coupon={appliedCoupon as CustomerCouponFragment} variant="caption" />
+                <CouponCaption
+                  coupon={appliedCoupon as unknown as CouponMixedType}
+                  variant="caption"
+                />
               </NameBlock>
               <DeleteTooltip placement="top-end" title={translate('text_628b8c693e464200e00e4a10')}>
                 <Button
@@ -105,6 +124,8 @@ export const CustomerCoupons = memo(({ coupons }: CustomerCouponsProps) => {
         }}
         continueText={translate('text_628b8c693e464200e00e4689')}
       />
+
+      <AddCouponToCustomerDialog ref={addCouponDialogRef} customerId={customerId} />
     </>
   )
 })