feat(core): add customer addresses tab content

.changeset/flat-squids-warn.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Add customer addresses tab content

apps/core/app/[locale]/(default)/account/[tab]/_components/account-tabs.tsx

@@ -18,7 +18,7 @@ export const AccountTabs = ({ children, activeTab, tabs }: Props) => {
 
   return (
     <Tabs activationMode="manual" defaultValue={activeTab}>
-      <TabsList aria-label={t('accountTabsLabel')} className="mb-5 pb-3">
+      <TabsList aria-label={t('accountTabsLabel')} className="mb-5 pb-3 pt-1">
         {tabs.map((tab) => (
           <TabsTrigger asChild key={tab} value={tab}>
             <Link

apps/core/app/[locale]/(default)/account/[tab]/_components/addresses-content.tsx

@@ -0,0 +1,38 @@
+import { getLocale, getTranslations } from 'next-intl/server';
+
+import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
+
+import { Pagination } from '../../../(faceted)/_components/pagination';
+import { TabType } from '../layout';
+import { tabHeading } from '../page';
+
+import { AddressesList } from './addresses-list';
+
+type CustomerAddresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>;
+
+interface Props {
+  addresses: CustomerAddresses['addresses'];
+  pageInfo: CustomerAddresses['pageInfo'];
+  title: TabType;
+}
+
+export const AddressesContent = async ({ addresses, pageInfo, title }: Props) => {
+  const locale = await getLocale();
+  const tPagination = await getTranslations({ locale, namespace: 'Pagination' });
+  const { hasNextPage, hasPreviousPage, startCursor, endCursor } = pageInfo;
+
+  return (
+    <>
+      {tabHeading(title, locale)}
+      <AddressesList customerAddressBook={addresses} />
+      <Pagination
+        endCursor={endCursor}
+        hasNextPage={hasNextPage}
+        hasPreviousPage={hasPreviousPage}
+        nextLabel={tPagination('next')}
+        prevLabel={tPagination('prev')}
+        startCursor={startCursor}
+      />
+    </>
+  );
+};

apps/core/app/[locale]/(default)/account/[tab]/_components/addresses-list.tsx

@@ -0,0 +1,71 @@
+import { Button } from '@bigcommerce/components/button';
+import { useTranslations } from 'next-intl';
+
+import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
+import { Link } from '~/components/link';
+
+type Addresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>['addresses'];
+
+interface Props {
+  customerAddressBook: Addresses;
+}
+
+const AddressChangeButtons = () => {
+  const t = useTranslations('Account.Addresses');
+
+  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>
+    </div>
+  );
+};
+
+export const AddressesList = ({ customerAddressBook }: Props) => {
+  const t = useTranslations('Account.Addresses');
+
+  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>
+        ),
+      )}
+      <li className="flex w-full border-collapse flex-col justify-start gap-2 border-t border-gray-200 pt-8">
+        <Button aria-label={t('addNewAddressButton')} asChild className="w-fit hover:text-white">
+          <Link href="/account/add-new-address">{t('addNewAddressButton')}</Link>
+        </Button>
+      </li>
+    </ul>
+  );
+};

apps/core/app/[locale]/(default)/account/[tab]/page.tsx

@@ -2,15 +2,22 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
+import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
 import { LocaleType } from '~/i18n';
 
+import { AddressesContent } from './_components/addresses-content';
 import { TabType } from './layout';
 
 interface Props {
   params: {
     locale: LocaleType;
     tab: TabType;
   };
+  searchParams: {
+    [key: string]: string | string[] | undefined;
+    before?: string;
+    after?: string;
+  };
 }
 
 export async function generateMetadata({ params: { tab, locale } }: Props): Promise<Metadata> {
@@ -21,22 +28,36 @@ export async function generateMetadata({ params: { tab, locale } }: Props): Prom
   };
 }
 
-const tabHeading = async (heading: string, locale: LocaleType) => {
+const tabHeading = async (heading: string, locale: string) => {
   const t = await getTranslations({ locale, namespace: 'Account.Home' });
 
   return <h2 className="mb-8 text-3xl font-black lg:text-4xl">{t(heading)}</h2>;
 };
 
-export default async function AccountTabPage({ params: { tab, locale } }: Props) {
+export default async function AccountTabPage({ params: { tab, locale }, searchParams }: Props) {
   switch (tab) {
     case 'orders':
       return tabHeading(tab, locale);
 
     case 'messages':
       return tabHeading(tab, locale);
 
-    case 'addresses':
-      return tabHeading(tab, locale);
+    case 'addresses': {
+      const { before, after } = searchParams;
+      const customerAddressesDetails = await getCustomerAddresses({
+        ...(after && { after }),
+        ...(before && { before }),
+        limit: 2,
+      });
+
+      if (!customerAddressesDetails) {
+        notFound();
+      }
+
+      const { addresses, pageInfo } = customerAddressesDetails;
+
+      return <AddressesContent addresses={addresses} pageInfo={pageInfo} title={tab} />;
+    }
 
     case 'wishlists':
       return tabHeading(tab, locale);
@@ -52,4 +73,5 @@ export default async function AccountTabPage({ params: { tab, locale } }: Props)
   }
 }
 
+export { tabHeading };
 export const runtime = 'edge';

apps/core/messages/en.json

@@ -174,6 +174,13 @@
       "recentlyViewed": "Recently viewed",
       "settings": "Account settings"
     },
+    "Addresses": {
+      "defaultAddress": "Default",
+      "alternativeAddress": "Alternative",
+      "addNewAddressButton": "Add new address",
+      "editButton": "Edit",
+      "deleteButton": "Delete"
+    },
     "Login": {
       "heading": "Log In",
       "resetPasswordHeading": "Reset password",