From 15f61e3b65b146c4607d2de2c471653f1fd0b2b7 Mon Sep 17 00:00:00 2001
From: Kelly Phan <keelly.p@gmail.com>
Date: Tue, 30 Jul 2024 17:34:10 +0200
Subject: [PATCH 1/3] fix: move coupons position

---
 .../customers/{ => overview}/CustomerCoupons.tsx          | 4 ++--
 src/components/customers/overview/CustomerOverview.tsx    | 8 +++++++-
 .../CustomerSubscriptionsList.tsx                         | 4 ++--
 src/pages/CustomerDetails.tsx                             | 3 +--
 4 files changed, 12 insertions(+), 7 deletions(-)
 rename src/components/customers/{ => overview}/CustomerCoupons.tsx (98%)
 rename src/components/customers/{subscriptions => overview}/CustomerSubscriptionsList.tsx (96%)

diff --git a/src/components/customers/CustomerCoupons.tsx b/src/components/customers/overview/CustomerCoupons.tsx
similarity index 98%
rename from src/components/customers/CustomerCoupons.tsx
rename to src/components/customers/overview/CustomerCoupons.tsx
index c23ffe69a..1c34752f6 100644
--- a/src/components/customers/CustomerCoupons.tsx
+++ b/src/components/customers/overview/CustomerCoupons.tsx
@@ -21,7 +21,7 @@ import { SectionHeader } from '~/styles/customer'
 import {
   AddCouponToCustomerDialog,
   AddCouponToCustomerDialogRef,
-} from './AddCouponToCustomerDialog'
+} from '../AddCouponToCustomerDialog'
 
 gql`
   fragment CustomerCoupon on AppliedCoupon {
@@ -85,7 +85,7 @@ export const CustomerCoupons = memo(() => {
     <>
       {!!(coupons || [])?.length && (
         <Container data-test="customer-coupon-container">
-          <SectionHeader variant="subhead">
+          <SectionHeader variant="subhead" $hideBottomShadow>
             {translate('text_628b8c693e464200e00e469d')}
             <Button
               variant="quaternary"
diff --git a/src/components/customers/overview/CustomerOverview.tsx b/src/components/customers/overview/CustomerOverview.tsx
index 64d5fea37..ec2ea28f2 100644
--- a/src/components/customers/overview/CustomerOverview.tsx
+++ b/src/components/customers/overview/CustomerOverview.tsx
@@ -2,7 +2,8 @@ import { gql } from '@apollo/client'
 import { Skeleton, Stack } from '@mui/material'
 import { FC, useEffect } from 'react'
 
-import { CustomerSubscriptionsList } from '~/components/customers/subscriptions/CustomerSubscriptionsList'
+import { CustomerCoupons } from '~/components/customers/overview/CustomerCoupons'
+import { CustomerSubscriptionsList } from '~/components/customers/overview/CustomerSubscriptionsList'
 import { Alert, Button, Typography } from '~/components/designSystem'
 import { OverviewCard } from '~/components/OverviewCard'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
@@ -62,12 +63,14 @@ interface CustomerOverviewProps {
   externalCustomerId?: string
   customerTimezone?: TimezoneEnum
   userCurrency?: CurrencyEnum
+  isLoading?: boolean
 }
 
 export const CustomerOverview: FC<CustomerOverviewProps> = ({
   externalCustomerId,
   customerTimezone,
   userCurrency,
+  isLoading,
 }) => {
   const { translate } = useInternationalization()
   const { organization } = useOrganizationInfos()
@@ -229,6 +232,9 @@ export const CustomerOverview: FC<CustomerOverviewProps> = ({
           </Stack>
         </section>
       )}
+
+      {!isLoading && <CustomerCoupons />}
+
       <CustomerSubscriptionsList customerTimezone={customerTimezone} />
     </>
   )
diff --git a/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx b/src/components/customers/overview/CustomerSubscriptionsList.tsx
similarity index 96%
rename from src/components/customers/subscriptions/CustomerSubscriptionsList.tsx
rename to src/components/customers/overview/CustomerSubscriptionsList.tsx
index c52600903..30de448f9 100644
--- a/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx
+++ b/src/components/customers/overview/CustomerSubscriptionsList.tsx
@@ -15,11 +15,11 @@ import { usePermissions } from '~/hooks/usePermissions'
 import { HEADER_TABLE_HEIGHT, theme } from '~/styles'
 import { SectionHeader, SideSection } from '~/styles/customer'
 
-import { SubscriptionItem, SubscriptionItemSkeleton } from './SubscriptionItem'
+import { SubscriptionItem, SubscriptionItemSkeleton } from '../subscriptions/SubscriptionItem'
 import {
   TerminateCustomerSubscriptionDialog,
   TerminateCustomerSubscriptionDialogRef,
-} from './TerminateCustomerSubscriptionDialog'
+} from '../subscriptions/TerminateCustomerSubscriptionDialog'
 
 gql`
   query getCustomerSubscriptionForList($id: ID!) {
diff --git a/src/pages/CustomerDetails.tsx b/src/pages/CustomerDetails.tsx
index e90a1b577..0ef400f6e 100644
--- a/src/pages/CustomerDetails.tsx
+++ b/src/pages/CustomerDetails.tsx
@@ -11,7 +11,6 @@ import {
   AddCustomerDrawer,
   AddCustomerDrawerRef,
 } from '~/components/customers/addDrawer/AddCustomerDrawer'
-import { CustomerCoupons } from '~/components/customers/CustomerCoupons'
 import { CustomerCreditNotesList } from '~/components/customers/CustomerCreditNotesList'
 import { CustomerInvoicesTab } from '~/components/customers/CustomerInvoicesTab'
 import { CustomerMainInfos } from '~/components/customers/CustomerMainInfos'
@@ -359,11 +358,11 @@ const CustomerDetails = () => {
                     ],
                     component: (
                       <SideBlock>
-                        {!loading && <CustomerCoupons />}
                         <CustomerOverview
                           externalCustomerId={externalId}
                           customerTimezone={safeTimezone}
                           userCurrency={data?.customer?.currency || undefined}
+                          isLoading={loading}
                         />
                       </SideBlock>
                     ),

From 3bdc9bbb4a83e3d8f87d87de20ae7ef6cf23aabc Mon Sep 17 00:00:00 2001
From: Kelly Phan <keelly.p@gmail.com>
Date: Tue, 30 Jul 2024 17:34:53 +0200
Subject: [PATCH 2/3] fix: add margin-bottom to customer tabs

---
 src/components/customers/CustomerInvoicesTab.tsx |  5 +++--
 src/pages/CustomerDetails.tsx                    | 12 +++---------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/customers/CustomerInvoicesTab.tsx b/src/components/customers/CustomerInvoicesTab.tsx
index e40390da4..aa28ad3a5 100644
--- a/src/components/customers/CustomerInvoicesTab.tsx
+++ b/src/components/customers/CustomerInvoicesTab.tsx
@@ -14,7 +14,7 @@ import {
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/layouts/CustomerInvoiceDetails'
-import { theme } from '~/styles'
+import { NAV_HEIGHT, theme } from '~/styles'
 
 import { CustomerInvoicesList } from './CustomerInvoicesList'
 
@@ -175,10 +175,11 @@ const DraftWrapper = styled.div`
 `
 
 const Header = styled.div`
+  height: ${NAV_HEIGHT}px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: ${theme.spacing(4)};
+  /* margin-bottom: ${theme.spacing(4)}; */
 `
 
 const EmptyTitle = styled(Typography)`
diff --git a/src/pages/CustomerDetails.tsx b/src/pages/CustomerDetails.tsx
index 0ef400f6e..e0013aad7 100644
--- a/src/pages/CustomerDetails.tsx
+++ b/src/pages/CustomerDetails.tsx
@@ -404,12 +404,12 @@ const CustomerDetails = () => {
                       tab: CustomerDetailsTabsOptions.invoices,
                     }),
                     component: (
-                      <InvoicesBlock>
+                      <SideBlock>
                         <CustomerInvoicesTab
                           customerId={customerId as string}
                           customerTimezone={safeTimezone}
                         />
-                      </InvoicesBlock>
+                      </SideBlock>
                     ),
                   },
                   {
@@ -561,14 +561,8 @@ const SideBlock = styled.div`
   > *:not(:last-child) {
     margin-bottom: ${theme.spacing(8)};
   }
-`
-
-const InvoicesBlock = styled.div`
-  margin-top: ${theme.spacing(8)};
 
-  > *:not(:last-child) {
-    margin-bottom: ${theme.spacing(8)};
-  }
+  margin-bottom: ${theme.spacing(20)};
 `
 
 export default CustomerDetails

From 528735e25015ce6c1acbb07a48ae4d8116f072c8 Mon Sep 17 00:00:00 2001
From: Kelly Phan <keelly.p@gmail.com>
Date: Tue, 30 Jul 2024 17:41:33 +0200
Subject: [PATCH 3/3] fix: remove comment

---
 src/components/customers/CustomerInvoicesTab.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/customers/CustomerInvoicesTab.tsx b/src/components/customers/CustomerInvoicesTab.tsx
index aa28ad3a5..33f8a348d 100644
--- a/src/components/customers/CustomerInvoicesTab.tsx
+++ b/src/components/customers/CustomerInvoicesTab.tsx
@@ -179,7 +179,6 @@ const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  /* margin-bottom: ${theme.spacing(4)}; */
 `
 
 const EmptyTitle = styled(Typography)`