From 51d2215942bea10d6d5f8f95afa8688fa698aa2f Mon Sep 17 00:00:00 2001
From: MorganeLecurieux <morgane.lecurieux.lafayette@gmail.com>
Date: Thu, 2 Jun 2022 16:56:27 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=91=80=20QA=20Add-ons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customers/AddAddOnToCustomerDialog.tsx    |   2 +-
 src/components/customers/CustomerAddOns.tsx   |  25 +--
 src/components/customers/CustomerCoupons.tsx  | 173 +++++++---------
 .../customers/CustomerSubscriptionsList.tsx   | 196 +++++++-----------
 src/pages/CustomerDetails.tsx                 |  71 ++++---
 5 files changed, 207 insertions(+), 260 deletions(-)

diff --git a/src/components/customers/AddAddOnToCustomerDialog.tsx b/src/components/customers/AddAddOnToCustomerDialog.tsx
index 617c5002e..8189ba1eb 100644
--- 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
index 324100e4b..be645c722 100644
--- 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
index 07ddf7189..6c6d01390 100644
--- 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;
diff --git a/src/components/customers/CustomerSubscriptionsList.tsx b/src/components/customers/CustomerSubscriptionsList.tsx
index 3cbdb3bed..9c91daf7e 100644
--- a/src/components/customers/CustomerSubscriptionsList.tsx
+++ b/src/components/customers/CustomerSubscriptionsList.tsx
@@ -1,4 +1,4 @@
-import { useRef, useMemo, useImperativeHandle, forwardRef } from 'react'
+import { forwardRef, MutableRefObject } from 'react'
 import { gql } from '@apollo/client'
 import styled from 'styled-components'
 import { DateTime } from 'luxon'
@@ -9,7 +9,7 @@ import { useI18nContext } from '~/core/I18nContext'
 import { theme, HEADER_TABLE_HEIGHT, NAV_HEIGHT } from '~/styles'
 import { SectionHeader, SideSection } from '~/styles/customer'
 
-import { AddPlanToCustomerDialog, AddPlanToCustomerDialogRef } from './AddPlanToCustomerDialog'
+import { AddPlanToCustomerDialogRef } from './AddPlanToCustomerDialog'
 
 gql`
   fragment CustomerSubscriptionList on Subscription {
@@ -25,14 +25,8 @@ gql`
   }
 `
 
-export interface CustomerSubscriptionsListRef {
-  openAddPlanDialog: () => void
-}
 interface CustomerSubscriptionsListProps {
-  customerName: string
-  customerId: string
   subscriptions?: CustomerSubscriptionListFragment[]
-  refetchCustomer: () => void
 }
 
 const mapStatus = (type?: StatusTypeEnum | null) => {
@@ -57,116 +51,86 @@ const mapStatus = (type?: StatusTypeEnum | null) => {
 }
 
 export const CustomerSubscriptionsList = forwardRef<
-  CustomerSubscriptionsListRef,
+  AddPlanToCustomerDialogRef,
   CustomerSubscriptionsListProps
->(
-  (
-    { customerId, customerName, subscriptions, refetchCustomer }: CustomerSubscriptionsListProps,
-    ref
-  ) => {
-    const { translate } = useI18nContext()
-    const addPlanToCustomerDialogRef = useRef<AddPlanToCustomerDialogRef>(null)
-    const hasNoSubscription = !subscriptions || !subscriptions.length
-    const selectedPlansId = useMemo(
-      () =>
-        (subscriptions || []).reduce<string[]>((acc, s) => {
-          if (
-            [StatusTypeEnum.Active, StatusTypeEnum.Pending].includes(s.status as StatusTypeEnum)
-          ) {
-            acc.push(s.plan?.id)
+>(({ subscriptions }: CustomerSubscriptionsListProps, ref) => {
+  const { translate } = useI18nContext()
+  const hasNoSubscription = !subscriptions || !subscriptions.length
+  const downgradingTo =
+    !!subscriptions && !!subscriptions.length
+      ? subscriptions.find((s) => s.status === StatusTypeEnum.Pending)
+      : undefined
+
+  return (
+    <SideSection $empty={hasNoSubscription}>
+      <SectionHeader variant="subhead">
+        {translate('text_6250304370f0f700a8fdc28d')}
+        <Button
+          variant="quaternary"
+          onClick={() =>
+            (ref as MutableRefObject<AddPlanToCustomerDialogRef>)?.current?.openDialog()
           }
-          return acc
-        }, []),
-      [subscriptions]
-    )
-    const downgradingTo =
-      !!subscriptions && !!subscriptions.length
-        ? subscriptions.find((s) => s.status === StatusTypeEnum.Pending)
-        : undefined
-
-    useImperativeHandle(ref, () => ({
-      openAddPlanDialog: () => {
-        addPlanToCustomerDialogRef?.current?.openDialog()
-      },
-    }))
-
-    return (
-      <SideSection $empty={hasNoSubscription}>
-        <SectionHeader variant="subhead">
-          {translate('text_6250304370f0f700a8fdc28d')}
-          <Button
-            variant="quaternary"
-            onClick={() => addPlanToCustomerDialogRef?.current?.openDialog()}
-          >
-            {hasNoSubscription
-              ? translate('text_6250304370f0f700a8fdc28b')
-              : translate('text_6253f11816f710014600b9e9')}
-          </Button>
-        </SectionHeader>
-        {hasNoSubscription ? (
-          <Typography>{translate('text_6250304370f0f700a8fdc28f')}</Typography>
-        ) : (
-          <>
-            <ListHeader>
-              <CellBigHeader variant="bodyHl" color="disabled" noWrap>
-                {translate('text_6253f11816f710014600b9ed')}
-              </CellBigHeader>
-              <CellSmall variant="bodyHl" color="disabled">
-                {translate('text_6253f11816f710014600b9ef')}
-              </CellSmall>
-              <CellSmall variant="bodyHl" color="disabled" align="right">
-                {translate('text_6253f11816f710014600b9f1')}
-              </CellSmall>
-            </ListHeader>
-            {subscriptions.map(({ id, plan, status, startedAt, pendingStartDate }) => {
-              const statusConfig = mapStatus(status)
-
-              return (
-                <Item key={id}>
-                  <CellBig>
-                    <Avatar variant="connector">
-                      <Icon name="clock" color="dark" />
-                    </Avatar>
-                    <NameBlock>
-                      <Typography color="textSecondary" variant="bodyHl" noWrap>
-                        {plan.name}
-                      </Typography>
-                      <Typography variant="caption" noWrap>
-                        {plan.code}
-                      </Typography>
-                    </NameBlock>
-                  </CellBig>
-                  <CellStatus type={statusConfig.type} label={translate(statusConfig.label)} />
-                  <CellSmall align="right" color="textSecondary">
-                    {DateTime.fromISO(startedAt ?? pendingStartDate).toFormat('yyyy/LL/dd')}
-                  </CellSmall>
-                </Item>
-              )
-            })}
-            {downgradingTo && (
-              <DowngradeInfo variant="caption">
-                {translate('text_62681c60582e4f00aa82938a', {
-                  planName: downgradingTo?.plan?.name,
-                  dateStartNewPlan: DateTime.fromISO(downgradingTo?.pendingStartDate).toFormat(
-                    'yyyy/LL/dd'
-                  ),
-                })}
-              </DowngradeInfo>
-            )}
-          </>
-        )}
-
-        <AddPlanToCustomerDialog
-          ref={addPlanToCustomerDialogRef}
-          customerName={customerName}
-          customerId={customerId}
-          existingPlanIds={selectedPlansId}
-          refetchCustomer={refetchCustomer}
-        />
-      </SideSection>
-    )
-  }
-)
+        >
+          {hasNoSubscription
+            ? translate('text_6250304370f0f700a8fdc28b')
+            : translate('text_6253f11816f710014600b9e9')}
+        </Button>
+      </SectionHeader>
+      {hasNoSubscription ? (
+        <Typography>{translate('text_6250304370f0f700a8fdc28f')}</Typography>
+      ) : (
+        <>
+          <ListHeader>
+            <CellBigHeader variant="bodyHl" color="disabled" noWrap>
+              {translate('text_6253f11816f710014600b9ed')}
+            </CellBigHeader>
+            <CellSmall variant="bodyHl" color="disabled">
+              {translate('text_6253f11816f710014600b9ef')}
+            </CellSmall>
+            <CellSmall variant="bodyHl" color="disabled" align="right">
+              {translate('text_6253f11816f710014600b9f1')}
+            </CellSmall>
+          </ListHeader>
+          {subscriptions.map(({ id, plan, status, startedAt, pendingStartDate }) => {
+            const statusConfig = mapStatus(status)
+
+            return (
+              <Item key={id}>
+                <CellBig>
+                  <Avatar variant="connector">
+                    <Icon name="clock" color="dark" />
+                  </Avatar>
+                  <NameBlock>
+                    <Typography color="textSecondary" variant="bodyHl" noWrap>
+                      {plan.name}
+                    </Typography>
+                    <Typography variant="caption" noWrap>
+                      {plan.code}
+                    </Typography>
+                  </NameBlock>
+                </CellBig>
+                <CellStatus type={statusConfig.type} label={translate(statusConfig.label)} />
+                <CellSmall align="right" color="textSecondary">
+                  {DateTime.fromISO(startedAt ?? pendingStartDate).toFormat('yyyy/LL/dd')}
+                </CellSmall>
+              </Item>
+            )
+          })}
+          {downgradingTo && (
+            <DowngradeInfo variant="caption">
+              {translate('text_62681c60582e4f00aa82938a', {
+                planName: downgradingTo?.plan?.name,
+                dateStartNewPlan: DateTime.fromISO(downgradingTo?.pendingStartDate).toFormat(
+                  'yyyy/LL/dd'
+                ),
+              })}
+            </DowngradeInfo>
+          )}
+        </>
+      )}
+    </SideSection>
+  )
+})
 
 CustomerSubscriptionsList.displayName = 'CustomerSubscriptionsList'
 
diff --git a/src/pages/CustomerDetails.tsx b/src/pages/CustomerDetails.tsx
index 518fe1c4c..a9bae4552 100644
--- a/src/pages/CustomerDetails.tsx
+++ b/src/pages/CustomerDetails.tsx
@@ -24,13 +24,11 @@ import {
   CustomerCouponFragmentDoc,
   CustomerMainInfosFragmentDoc,
   CustomerAddOnsFragmentDoc,
+  StatusTypeEnum,
 } from '~/generated/graphql'
 import { GenericPlaceholder } from '~/components/GenericPlaceholder'
 import EmojiError from '~/public/images/exploding-head.png'
-import {
-  CustomerSubscriptionsList,
-  CustomerSubscriptionsListRef,
-} from '~/components/customers/CustomerSubscriptionsList'
+import { CustomerSubscriptionsList } from '~/components/customers/CustomerSubscriptionsList'
 import { CustomerInvoicesList } from '~/components/customers/CustomerInvoicesList'
 import { CustomerVatRate } from '~/components/customers/CustomerVatRate'
 import { theme, PageHeader, MenuPopper } from '~/styles'
@@ -40,9 +38,21 @@ import {
   DeleteCustomerDialogRef,
 } from '~/components/customers/DeleteCustomerDialog'
 import { AddCustomerDialog, AddCustomerDialogRef } from '~/components/customers/AddCustomerDialog'
-import { CustomerCoupons, CustomerCouponsListRef } from '~/components/customers/CustomerCoupons'
-import { CustomerAddOns, CustomerAddOnsListRef } from '~/components/customers/CustomerAddOns'
+import { CustomerCoupons } from '~/components/customers/CustomerCoupons'
+import { CustomerAddOns } from '~/components/customers/CustomerAddOns'
 import { CustomerMainInfos } from '~/components/customers/CustomerMainInfos'
+import {
+  AddCouponToCustomerDialog,
+  AddCouponToCustomerDialogRef,
+} from '~/components/customers/AddCouponToCustomerDialog'
+import {
+  AddAddOnToCustomerDialog,
+  AddAddOnToCustomerDialogRef,
+} from '~/components/customers/AddAddOnToCustomerDialog'
+import {
+  AddPlanToCustomerDialog,
+  AddPlanToCustomerDialogRef,
+} from '~/components/customers/AddPlanToCustomerDialog'
 
 gql`
   fragment CustomerDetails on CustomerDetails {
@@ -91,9 +101,9 @@ enum TabsOptions {
 const CustomerDetails = () => {
   const deleteDialogRef = useRef<DeleteCustomerDialogRef>(null)
   const editDialogRef = useRef<AddCustomerDialogRef>(null)
-  const couponListRef = useRef<CustomerCouponsListRef>(null)
-  const addOnListRef = useRef<CustomerAddOnsListRef>(null)
-  const subscriptionsListRef = useRef<CustomerSubscriptionsListRef>(null)
+  const addCouponDialogRef = useRef<AddCouponToCustomerDialogRef>(null)
+  const addOnDialogRef = useRef<AddAddOnToCustomerDialogRef>(null)
+  const subscriptionsDialogRef = useRef<AddPlanToCustomerDialogRef>(null)
   const { translate } = useI18nContext()
   const navigate = useNavigate()
   const { id, tab } = useParams()
@@ -121,6 +131,17 @@ const CustomerDetails = () => {
     ]
   }, [translate])
 
+  const selectedPlansId = useMemo(
+    () =>
+      (subscriptions || []).reduce<string[]>((acc, s) => {
+        if ([StatusTypeEnum.Active, StatusTypeEnum.Pending].includes(s.status as StatusTypeEnum)) {
+          acc.push(s.plan?.id)
+        }
+        return acc
+      }, []),
+    [subscriptions]
+  )
+
   return (
     <div>
       <PageHeader $withSide>
@@ -150,7 +171,7 @@ const CustomerDetails = () => {
                 variant="quaternary"
                 align="left"
                 onClick={() => {
-                  subscriptionsListRef?.current?.openAddPlanDialog()
+                  subscriptionsDialogRef?.current?.openDialog()
                   closePopper()
                 }}
               >
@@ -175,7 +196,7 @@ const CustomerDetails = () => {
                 align="left"
                 disabled={!subscriptions || !subscriptions?.length}
                 onClick={() => {
-                  addOnListRef.current?.openAddAddOnDialog()
+                  addOnDialogRef.current?.openDialog()
                   closePopper()
                 }}
               >
@@ -188,7 +209,7 @@ const CustomerDetails = () => {
                   !subscriptions || !subscriptions?.length || (appliedCoupons || []).length > 0
                 }
                 onClick={() => {
-                  couponListRef.current?.openAddCouponDialog()
+                  addCouponDialogRef.current?.openDialog()
                   closePopper()
                 }}
               >
@@ -288,22 +309,11 @@ const CustomerDetails = () => {
                   )}
                   {!loading && (!tab || tab === TabsOptions.overview) && (
                     <>
-                      <CustomerCoupons
-                        ref={couponListRef}
-                        customerId={id as string}
-                        coupons={appliedCoupons}
-                      />
-                      <CustomerAddOns
-                        ref={addOnListRef}
-                        customerId={id as string}
-                        addOns={appliedAddOns}
-                      />
+                      <CustomerCoupons coupons={appliedCoupons} />
+                      <CustomerAddOns ref={addOnDialogRef} addOns={appliedAddOns} />
                       <CustomerSubscriptionsList
-                        ref={subscriptionsListRef}
-                        customerName={name as string}
-                        customerId={id as string}
+                        ref={subscriptionsDialogRef}
                         subscriptions={subscriptions ?? []}
-                        refetchCustomer={refetch}
                       />
                     </>
                   )}
@@ -324,6 +334,15 @@ const CustomerDetails = () => {
             // @ts-ignore
             customer={data?.customer}
           />
+          <AddCouponToCustomerDialog ref={addCouponDialogRef} customerId={id as string} />
+          <AddAddOnToCustomerDialog ref={addOnDialogRef} customerId={id as string} />
+          <AddPlanToCustomerDialog
+            ref={subscriptionsDialogRef}
+            customerName={name as string}
+            customerId={id as string}
+            existingPlanIds={selectedPlansId}
+            refetchCustomer={refetch}
+          />
         </>
       )}
     </div>