fix: 👀 QA Add-ons

getlago · Jun 3, 2022 · 51d2215 · 51d2215
1 parent f666691
commit 51d2215
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 260 deletions.
diff --git a/src/components/customers/AddAddOnToCustomerDialog.tsx b/src/components/customers/AddAddOnToCustomerDialog.tsx
@@ -120,7 +120,7 @@ export const AddAddOnToCustomerDialog = forwardRef<
             <Typography color="textPrimary">
               (
               {translate('text_629781ec7c6c1500d94fbc16', {
-                amount: formatAmountToCurrency(amountCents || 0, {
+                amountWithCurrency: formatAmountToCurrency(amountCents || 0, {
                   currencyDisplay: 'code',
                   currency: amountCurrency,
                 }),

diff --git a/src/components/customers/CustomerAddOns.tsx b/src/components/customers/CustomerAddOns.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { useRef, useImperativeHandle, forwardRef, memo } from 'react'
+import { forwardRef, memo, MutableRefObject } from 'react'
 import { gql } from '@apollo/client'
 import styled from 'styled-components'
 import { DateTime } from 'luxon'
@@ -11,7 +11,7 @@ import { Typography, Avatar, Icon, Button } from '~/components/designSystem'
 import { theme, HEADER_TABLE_HEIGHT, NAV_HEIGHT } from '~/styles'
 import { formatAmountToCurrency } from '~/core/currencyTool'
 
-import { AddAddOnToCustomerDialog, AddAddOnToCustomerDialogRef } from './AddAddOnToCustomerDialog'
+import { AddAddOnToCustomerDialogRef } from './AddAddOnToCustomerDialog'
 
 gql`
   fragment CustomerAddOns on AppliedAddOn {
@@ -26,27 +26,15 @@ gql`
   }
 `
 
-export interface CustomerAddOnsListRef {
-  openAddAddOnDialog: () => void
-}
-
 interface CustomerAddOnsProps {
-  customerId: string
   addOns?: CustomerAddOnsFragment[] | null | undefined
 }
 
 export const CustomerAddOns = memo(
-  forwardRef<CustomerAddOnsListRef, CustomerAddOnsProps>(
-    ({ addOns, customerId }: CustomerAddOnsProps, ref) => {
-      const addPlanToCustomerDialogRef = useRef<AddAddOnToCustomerDialogRef>(null)
+  forwardRef<AddAddOnToCustomerDialogRef, CustomerAddOnsProps>(
+    ({ addOns }: CustomerAddOnsProps, ref) => {
       const { translate } = useI18nContext()
 
-      useImperativeHandle(ref, () => ({
-        openAddAddOnDialog: () => {
-          addPlanToCustomerDialogRef?.current?.openDialog()
-        },
-      }))
-
       return (
         <>
           {!!(addOns || [])?.length && (
@@ -55,7 +43,9 @@ export const CustomerAddOns = memo(
                 {translate('text_629781ec7c6c1500d94fbbfe')}
                 <Button
                   variant="quaternary"
-                  onClick={() => addPlanToCustomerDialogRef?.current?.openDialog()}
+                  onClick={() =>
+                    (ref as MutableRefObject<AddAddOnToCustomerDialogRef>)?.current?.openDialog()
+                  }
                 >
                   {translate('text_629781ec7c6c1500d94fbbf8')}
                 </Button>
@@ -95,7 +85,6 @@ export const CustomerAddOns = memo(
               ))}
             </Container>
           )}
-          <AddAddOnToCustomerDialog ref={addPlanToCustomerDialogRef} customerId={customerId} />
         </>
       )
     }

diff --git a/src/components/customers/CustomerCoupons.tsx b/src/components/customers/CustomerCoupons.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { useRef, useImperativeHandle, forwardRef, memo } from 'react'
+import { useRef, memo } from 'react'
 import { gql } from '@apollo/client'
 import styled from 'styled-components'
 
@@ -12,11 +12,6 @@ import { formatAmountToCurrency } from '~/core/currencyTool'
 import { WarningDialog, WarningDialogRef } from '~/components/WarningDialog'
 import { addToast } from '~/core/apolloClient'
 
-import {
-  AddCouponToCustomerDialog,
-  AddCouponToCustomerDialogRef,
-} from './AddCouponToCustomerDialog'
-
 gql`
   fragment CustomerCoupon on AppliedCoupon {
     id
@@ -35,106 +30,86 @@ gql`
   }
 `
 
-export interface CustomerCouponsListRef {
-  openAddCouponDialog: () => void
-}
-
 interface CustomerCouponsProps {
-  customerId: string
   coupons?: CustomerCouponFragment[] | null | undefined
 }
 
-export const CustomerCoupons = memo(
-  forwardRef<CustomerCouponsListRef, CustomerCouponsProps>(
-    ({ coupons, customerId }: CustomerCouponsProps, ref) => {
-      const addPlanToCustomerDialogRef = useRef<AddCouponToCustomerDialogRef>(null)
-      const removeDialogRef = useRef<WarningDialogRef>(null)
-      const deleteCouponId = useRef<string | null>(null)
-      const { translate } = useI18nContext()
-      const [removeCoupon] = useRemoveCouponMutation({
-        onCompleted({ terminateAppliedCoupon }) {
-          if (!!terminateAppliedCoupon) {
-            addToast({
-              severity: 'success',
-              message: translate('text_628b8c693e464200e00e49d1'),
+export const CustomerCoupons = memo(({ coupons }: CustomerCouponsProps) => {
+  const removeDialogRef = useRef<WarningDialogRef>(null)
+  const deleteCouponId = useRef<string | null>(null)
+  const { translate } = useI18nContext()
+  const [removeCoupon] = useRemoveCouponMutation({
+    onCompleted({ terminateAppliedCoupon }) {
+      if (!!terminateAppliedCoupon) {
+        addToast({
+          severity: 'success',
+          message: translate('text_628b8c693e464200e00e49d1'),
+        })
+      }
+    },
+  })
+
+  return (
+    <>
+      {!!(coupons || [])?.length && (
+        <Container>
+          <SectionHeader variant="subhead">
+            {translate('text_628b8c693e464200e00e469d')}
+          </SectionHeader>
+          <ListHeader>
+            <Typography variant="bodyHl" color="disabled" noWrap>
+              {translate('text_628b8c693e464200e00e46ab')}
+            </Typography>
+          </ListHeader>
+          {(coupons || []).map(({ amountCents, amountCurrency, coupon, id }) => (
+            <CouponNameSection key={id}>
+              <ListAvatar variant="connector">
+                <Icon name="coupon" color="dark" />
+              </ListAvatar>
+              <NameBlock>
+                <Typography color="textSecondary" variant="bodyHl" noWrap>
+                  {coupon?.name}
+                </Typography>
+                <Typography variant="caption" noWrap>
+                  {translate('text_62865498824cc10126ab2976', {
+                    amount: formatAmountToCurrency(amountCents || 0, {
+                      currencyDisplay: 'code',
+                      currency: amountCurrency,
+                    }),
+                  })}
+                </Typography>
+              </NameBlock>
+              <DeleteTooltip placement="top-end" title={translate('text_628b8c693e464200e00e4a10')}>
+                <Button
+                  variant="quaternary"
+                  icon="trash"
+                  onClick={() => {
+                    deleteCouponId.current = id
+                    removeDialogRef?.current?.openDialog()
+                  }}
+                />
+              </DeleteTooltip>
+            </CouponNameSection>
+          ))}
+        </Container>
+      )}
+      <WarningDialog
+        ref={removeDialogRef}
+        title={translate('text_628b8c693e464200e00e465f')}
+        description={translate('text_628b8c693e464200e00e466d')}
+        onContinue={async () => {
+          if (deleteCouponId.current) {
+            await removeCoupon({
+              variables: { input: { id: deleteCouponId.current } },
+              refetchQueries: ['getCustomer'],
             })
           }
-        },
-      })
-
-      useImperativeHandle(ref, () => ({
-        openAddCouponDialog: () => {
-          addPlanToCustomerDialogRef?.current?.openDialog()
-        },
-      }))
-
-      return (
-        <>
-          {!!(coupons || [])?.length && (
-            <Container>
-              <SectionHeader variant="subhead">
-                {translate('text_628b8c693e464200e00e469d')}
-              </SectionHeader>
-              <ListHeader>
-                <Typography variant="bodyHl" color="disabled" noWrap>
-                  {translate('text_628b8c693e464200e00e46ab')}
-                </Typography>
-              </ListHeader>
-              {(coupons || []).map(({ amountCents, amountCurrency, coupon, id }) => (
-                <CouponNameSection key={id}>
-                  <ListAvatar variant="connector">
-                    <Icon name="coupon" color="dark" />
-                  </ListAvatar>
-                  <NameBlock>
-                    <Typography color="textSecondary" variant="bodyHl" noWrap>
-                      {coupon?.name}
-                    </Typography>
-                    <Typography variant="caption" noWrap>
-                      {translate('text_62865498824cc10126ab2976', {
-                        amount: formatAmountToCurrency(amountCents || 0, {
-                          currencyDisplay: 'code',
-                          currency: amountCurrency,
-                        }),
-                      })}
-                    </Typography>
-                  </NameBlock>
-                  <DeleteTooltip
-                    placement="top-end"
-                    title={translate('text_628b8c693e464200e00e4a10')}
-                  >
-                    <Button
-                      variant="quaternary"
-                      icon="trash"
-                      onClick={() => {
-                        deleteCouponId.current = id
-                        removeDialogRef?.current?.openDialog()
-                      }}
-                    />
-                  </DeleteTooltip>
-                </CouponNameSection>
-              ))}
-            </Container>
-          )}
-          <AddCouponToCustomerDialog ref={addPlanToCustomerDialogRef} customerId={customerId} />
-          <WarningDialog
-            ref={removeDialogRef}
-            title={translate('text_628b8c693e464200e00e465f')}
-            description={translate('text_628b8c693e464200e00e466d')}
-            onContinue={async () => {
-              if (deleteCouponId.current) {
-                await removeCoupon({
-                  variables: { input: { id: deleteCouponId.current } },
-                  refetchQueries: ['getCustomer'],
-                })
-              }
-            }}
-            continueText={translate('text_628b8c693e464200e00e4689')}
-          />
-        </>
-      )
-    }
+        }}
+        continueText={translate('text_628b8c693e464200e00e4689')}
+      />
+    </>
   )
-)
+})
 
 const Container = styled.div`
   display: flex;