From b20168c8f787aea8ea75ea3d2bfa8e9ae2c9c31a Mon Sep 17 00:00:00 2001
From: Alexander Saiannyi <alexander.saiannyi@bigcommerce.com>
Date: Sat, 6 Apr 2024 22:21:10 +0200
Subject: [PATCH] feat(core): add delete address functionality for account

---
 .changeset/grumpy-rice-bake.md                |   5 +
 .../(faceted)/_components/pagination.tsx      |  10 +-
 .../account/[tab]/_actions/delete-address.ts  |  33 ++++
 .../_components/account-status-provider.tsx   |  38 +++++
 .../[tab]/_components/addresses-content.tsx   |   9 +-
 .../[tab]/_components/addresses-list.tsx      | 155 +++++++++++++-----
 .../account/[tab]/_components/modal.tsx       |  70 ++++++++
 .../(default)/account/[tab]/layout.tsx        |  11 +-
 .../[locale]/(default)/account/[tab]/page.tsx |  13 +-
 core/messages/en.json                         |   4 +-
 public                                        |   1 +
 11 files changed, 292 insertions(+), 57 deletions(-)
 create mode 100644 .changeset/grumpy-rice-bake.md
 create mode 100644 core/app/[locale]/(default)/account/[tab]/_actions/delete-address.ts
 create mode 100644 core/app/[locale]/(default)/account/[tab]/_components/account-status-provider.tsx
 create mode 100644 core/app/[locale]/(default)/account/[tab]/_components/modal.tsx
 create mode 160000 public

diff --git a/.changeset/grumpy-rice-bake.md b/.changeset/grumpy-rice-bake.md
new file mode 100644
index 000000000..0467307d1
--- /dev/null
+++ b/.changeset/grumpy-rice-bake.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add delete address functionality for account
diff --git a/core/app/[locale]/(default)/(faceted)/_components/pagination.tsx b/core/app/[locale]/(default)/(faceted)/_components/pagination.tsx
index f93fba9b2..f3efea782 100644
--- a/core/app/[locale]/(default)/(faceted)/_components/pagination.tsx
+++ b/core/app/[locale]/(default)/(faceted)/_components/pagination.tsx
@@ -28,12 +28,18 @@ export const Pagination = ({
   const beforeSearchParams = new URLSearchParams(searchParams);
 
   beforeSearchParams.delete('after');
-  beforeSearchParams.set('before', String(startCursor));
+
+  if (startCursor) {
+    beforeSearchParams.set('before', String(startCursor));
+  }
 
   const afterSearchParams = new URLSearchParams(searchParams);
 
   afterSearchParams.delete('before');
-  afterSearchParams.set('after', String(endCursor));
+
+  if (endCursor) {
+    afterSearchParams.set('after', String(endCursor));
+  }
 
   return (
     <nav aria-label="Pagination" className="my-6 text-center text-primary">
diff --git a/core/app/[locale]/(default)/account/[tab]/_actions/delete-address.ts b/core/app/[locale]/(default)/account/[tab]/_actions/delete-address.ts
new file mode 100644
index 000000000..6c13739de
--- /dev/null
+++ b/core/app/[locale]/(default)/account/[tab]/_actions/delete-address.ts
@@ -0,0 +1,33 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+
+import { deleteCustomerAddress } from '~/client/mutations/delete-customer-address';
+
+import { State } from './submit-customer-change-password-form';
+
+export const deleteAddress = async (addressId: number): Promise<State> => {
+  try {
+    const response = await deleteCustomerAddress(addressId);
+
+    revalidatePath('/account/addresses', 'page');
+
+    if (response.errors.length === 0) {
+      return { status: 'success', message: 'The address has been deleted' };
+    }
+
+    return {
+      status: 'error',
+      message: response.errors.map((error) => error.message).join('\n'),
+    };
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return {
+        status: 'error',
+        message: error.message,
+      };
+    }
+
+    return { status: 'error', message: 'Unknown error' };
+  }
+};
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/account-status-provider.tsx b/core/app/[locale]/(default)/account/[tab]/_components/account-status-provider.tsx
new file mode 100644
index 000000000..97c2b1f31
--- /dev/null
+++ b/core/app/[locale]/(default)/account/[tab]/_components/account-status-provider.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+
+import { State as AccountState } from '../_actions/submit-customer-change-password-form';
+
+export const AccountStatusContext = createContext<{
+  accountState: AccountState;
+  setAccountState: (state: AccountState | ((prevState: AccountState) => AccountState)) => void;
+} | null>(null);
+
+export const AccountStatusProvider = ({ children }: PropsWithChildren) => {
+  const [accountState, setAccountState] = useState<AccountState>({ status: 'idle', message: '' });
+
+  useEffect(() => {
+    if (accountState.status !== 'idle') {
+      setTimeout(() => {
+        setAccountState({ status: 'idle', message: '' });
+      }, 3000);
+    }
+  }, [accountState, setAccountState]);
+
+  return (
+    <AccountStatusContext.Provider value={{ accountState, setAccountState }}>
+      {children}
+    </AccountStatusContext.Provider>
+  );
+};
+
+export function useAccountStatusContext() {
+  const context = useContext(AccountStatusContext);
+
+  if (!context) {
+    throw new Error('useAccountStatusContext must be used within a AccountStatusProvider');
+  }
+
+  return context;
+}
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content.tsx
index c1e4a2f9d..eff7ce78c 100644
--- a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content.tsx
+++ b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content.tsx
@@ -12,11 +12,12 @@ type CustomerAddresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddres
 
 interface Props {
   addresses: CustomerAddresses['addresses'];
+  addressesCount: number;
   pageInfo: CustomerAddresses['pageInfo'];
   title: TabType;
 }
 
-export const AddressesContent = async ({ addresses, pageInfo, title }: Props) => {
+export const AddressesContent = async ({ addresses, addressesCount, pageInfo, title }: Props) => {
   const locale = await getLocale();
   const tPagination = await getTranslations({ locale, namespace: 'Pagination' });
   const { hasNextPage, hasPreviousPage, startCursor, endCursor } = pageInfo;
@@ -24,7 +25,11 @@ export const AddressesContent = async ({ addresses, pageInfo, title }: Props) =>
   return (
     <>
       <TabHeading heading={title} locale={locale} />
-      <AddressesList customerAddressBook={addresses} />
+      <AddressesList
+        addressesCount={addressesCount}
+        customerAddressBook={addresses}
+        key={endCursor}
+      />
       <Pagination
         endCursor={endCursor}
         hasNextPage={hasNextPage}
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-list.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-list.tsx
index 2edef68a7..77622d7c4 100644
--- a/core/app/[locale]/(default)/account/[tab]/_components/addresses-list.tsx
+++ b/core/app/[locale]/(default)/account/[tab]/_components/addresses-list.tsx
@@ -1,71 +1,136 @@
+'use client';
+
 import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 
 import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
+import { Message } from '~/components/ui/message';
 
-type Addresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>['addresses'];
+import { deleteAddress } from '../_actions/delete-address';
+import { State } from '../_actions/submit-customer-change-password-form';
 
-interface Props {
-  customerAddressBook: Addresses;
+import { useAccountStatusContext } from './account-status-provider';
+import { Modal } from './modal';
+
+export type Addresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>['addresses'];
+
+interface AddressChangeProps {
+  addressId: number;
+  isAddressRemovable: boolean;
+  onDelete: (state: Addresses | ((prevState: Addresses) => Addresses)) => void;
+  onAddressChange: (state: State | ((prevState: State) => State)) => void;
 }
 
-const AddressChangeButtons = () => {
+const AddressChangeButtons = ({
+  addressId,
+  isAddressRemovable,
+  onDelete,
+  onAddressChange,
+}: AddressChangeProps) => {
   const t = useTranslations('Account.Addresses');
 
+  const handleDeleteAddress = async () => {
+    const { status, message } = await deleteAddress(addressId);
+
+    if (status === 'success') {
+      onDelete((prevAddressBook) =>
+        prevAddressBook.filter(({ entityId }) => entityId !== addressId),
+      );
+
+      onAddressChange({ status, message: 'Address deleted from your account.' });
+    }
+
+    if (status === 'error') {
+      onAddressChange({ status, message });
+    }
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
   return (
     <div className="my-2 flex w-fit gap-x-2 divide-y-0">
       <Button aria-label={t('editButton')} variant="secondary">
         {t('editButton')}
       </Button>
-      <Button aria-label={t('deleteButton')} variant="subtle">
-        {t('deleteButton')}
-      </Button>
+      <Modal
+        actionHandler={handleDeleteAddress}
+        confirmationText={t('confirmDeleteAddress')}
+        title={t('deleteModalTitle')}
+      >
+        <Button aria-label={t('deleteButton')} disabled={!isAddressRemovable} variant="subtle">
+          {t('deleteButton')}
+        </Button>
+      </Modal>
     </div>
   );
 };
 
-export const AddressesList = ({ customerAddressBook }: Props) => {
+interface Props {
+  customerAddressBook: Addresses;
+  addressesCount: number;
+}
+
+export const AddressesList = ({ customerAddressBook, addressesCount }: Props) => {
   const t = useTranslations('Account.Addresses');
+  const [addressBook, setAddressBook] = useState(customerAddressBook);
+  const { accountState, setAccountState } = useAccountStatusContext();
 
   return (
-    <ul className="mb-12">
-      {customerAddressBook.map(
-        ({
-          entityId,
-          firstName,
-          lastName,
-          address1,
-          address2,
-          city,
-          stateOrProvince,
-          postalCode,
-          countryCode,
-        }) => (
-          <li
-            className="flex w-full border-collapse flex-col justify-start gap-2 border-t border-gray-200 pb-3 pt-5"
-            key={entityId}
-          >
-            <div className="inline-flex flex-col justify-start text-base">
-              <p>
-                {firstName} {lastName}
-              </p>
-              <p>{address1}</p>
-              {Boolean(address2) && <p>{address2}</p>}
-              <p>
-                {city}, {stateOrProvince} {postalCode}
-              </p>
-              <p>{countryCode}</p>
-            </div>
-            <AddressChangeButtons />
-          </li>
-        ),
+    <>
+      {(accountState.status === 'error' || accountState.status === 'success') && (
+        <Message className="mb-8 w-full text-gray-500" variant={accountState.status}>
+          <p>{accountState.message}</p>
+        </Message>
       )}
-      <li className="flex w-full border-collapse flex-col justify-start gap-2 border-t border-gray-200 pt-8">
-        <Button aria-label={t('addNewAddress')} asChild className="w-fit hover:text-white">
-          <Link href="/account/add-new-address">{t('addNewAddress')}</Link>
-        </Button>
-      </li>
-    </ul>
+
+      <ul className="mb-12">
+        {addressBook.map(
+          ({
+            entityId,
+            firstName,
+            lastName,
+            address1,
+            address2,
+            city,
+            stateOrProvince,
+            postalCode,
+            countryCode,
+          }) => (
+            <li
+              className="flex w-full border-collapse flex-col justify-start gap-2 border-t border-gray-200 pb-3 pt-5"
+              key={entityId}
+            >
+              <div className="inline-flex flex-col justify-start text-base">
+                <p>
+                  {firstName} {lastName}
+                </p>
+                <p>{address1}</p>
+                {Boolean(address2) && <p>{address2}</p>}
+                <p>
+                  {city}, {stateOrProvince} {postalCode}
+                </p>
+                <p>{countryCode}</p>
+              </div>
+              <AddressChangeButtons
+                addressId={entityId}
+                isAddressRemovable={addressesCount > 1}
+                onAddressChange={setAccountState}
+                onDelete={setAddressBook}
+              />
+            </li>
+          ),
+        )}
+        <li className="flex w-full border-collapse flex-col justify-start gap-2 border-t border-gray-200 pt-8">
+          <Button aria-label={t('addNewAddress')} asChild className="w-fit hover:text-white">
+            <Link href="/account/add-address">{t('addNewAddress')}</Link>
+          </Button>
+        </li>
+      </ul>
+    </>
   );
 };
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/modal.tsx b/core/app/[locale]/(default)/account/[tab]/_components/modal.tsx
new file mode 100644
index 000000000..0ef78a23d
--- /dev/null
+++ b/core/app/[locale]/(default)/account/[tab]/_components/modal.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { MouseEventHandler, PropsWithChildren } from 'react';
+
+import { Button } from '~/components/ui/button';
+import {
+  Dialog,
+  DialogAction,
+  DialogCancel,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from '~/components/ui/dialog';
+
+interface Props extends PropsWithChildren {
+  actionHandler?: MouseEventHandler<HTMLButtonElement>;
+  title: string;
+  descriptionText?: string;
+  confirmationText?: string;
+  abortText?: string;
+}
+
+export const Modal = ({
+  abortText = 'Cancel',
+  actionHandler,
+  confirmationText = 'OK',
+  descriptionText,
+  title,
+  children,
+}: Props) => {
+  return (
+    <Dialog>
+      <DialogTrigger aria-controls="modal-content" asChild>
+        {children}
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogContent className="w-full sm:w-8/12 md:w-6/12 lg:w-5/12" id="modal-content">
+          <div className="flex justify-between gap-4 p-6">
+            <DialogTitle>{title}</DialogTitle>
+            <DialogCancel asChild>
+              <Button className="ms-auto w-min p-2" type="button" variant="subtle">
+                <X>
+                  <title>{abortText}</title>
+                </X>
+              </Button>
+            </DialogCancel>
+          </div>
+          {Boolean(descriptionText) && <DialogDescription>{descriptionText}</DialogDescription>}
+          <div className="flex flex-col gap-2 p-6 lg:flex-row">
+            <DialogAction asChild>
+              <Button className="w-full lg:w-fit" onClick={actionHandler} variant="primary">
+                {confirmationText}
+              </Button>
+            </DialogAction>
+            <DialogCancel asChild>
+              <Button className="w-full lg:w-fit" variant="subtle">
+                {abortText}
+              </Button>
+            </DialogCancel>
+          </div>
+        </DialogContent>
+      </DialogPortal>
+    </Dialog>
+  );
+};
diff --git a/core/app/[locale]/(default)/account/[tab]/layout.tsx b/core/app/[locale]/(default)/account/[tab]/layout.tsx
index a09fa233b..482937906 100644
--- a/core/app/[locale]/(default)/account/[tab]/layout.tsx
+++ b/core/app/[locale]/(default)/account/[tab]/layout.tsx
@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react';
 
 import { LocaleType } from '~/i18n';
 
+import { AccountStatusProvider } from './_components/account-status-provider';
 import { AccountTabs } from './_components/account-tabs';
 
 const tabList = [
@@ -30,10 +31,12 @@ export default async function AccountTabLayout({ children, params: { locale, tab
 
   return (
     <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
-      <h1 className="my-6 my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
-      <AccountTabs activeTab={tab} tabs={[...tabList]}>
-        {children}
-      </AccountTabs>
+      <AccountStatusProvider>
+        <h1 className="my-6 my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
+        <AccountTabs activeTab={tab} tabs={[...tabList]}>
+          {children}
+        </AccountTabs>
+      </AccountStatusProvider>
     </NextIntlClientProvider>
   );
 }
diff --git a/core/app/[locale]/(default)/account/[tab]/page.tsx b/core/app/[locale]/(default)/account/[tab]/page.tsx
index b22dd54dd..5453a8f0c 100644
--- a/core/app/[locale]/(default)/account/[tab]/page.tsx
+++ b/core/app/[locale]/(default)/account/[tab]/page.tsx
@@ -50,9 +50,16 @@ export default async function AccountTabPage({ params: { tab, locale }, searchPa
         notFound();
       }
 
-      const { addresses, pageInfo } = customerAddressesDetails;
-
-      return <AddressesContent addresses={addresses} pageInfo={pageInfo} title={tab} />;
+      const { addresses, pageInfo, addressesCount } = customerAddressesDetails;
+
+      return (
+        <AddressesContent
+          addresses={addresses}
+          addressesCount={addressesCount}
+          pageInfo={pageInfo}
+          title={tab}
+        />
+      );
     }
 
     case 'wishlists':
diff --git a/core/messages/en.json b/core/messages/en.json
index fcf7ac459..cdde95f5e 100644
--- a/core/messages/en.json
+++ b/core/messages/en.json
@@ -192,7 +192,9 @@
       "alternativeAddress": "Alternative",
       "addNewAddress": "Add new address",
       "editButton": "Edit",
-      "deleteButton": "Delete"
+      "deleteButton": "Delete",
+      "confirmDeleteAddress": "Delete address",
+      "deleteModalTitle": "Are you sure you want to delete this address?"
     },
     "Login": {
       "heading": "Log In",
diff --git a/public b/public
new file mode 160000
index 000000000..92a5189fb
--- /dev/null
+++ b/public
@@ -0,0 +1 @@
+Subproject commit 92a5189fbf628cae51d77bab5546f608ec3d7129