fix(core): change pagination layout and minor changes to address book (…

…#1087)

.changeset/wise-needles-jog.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+change pagination layout and minor changes to address book

core/app/[locale]/(default)/(faceted)/_components/pagination.tsx

@@ -4,8 +4,10 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { usePathname, useSearchParams } from 'next/navigation';
 
 import { Link } from '~/components/link';
+import { cn } from '~/lib/utils';
 
 interface PaginationProps {
+  className?: string;
   endCursor: string | null;
   hasPreviousPage: boolean;
   hasNextPage: boolean;
@@ -15,6 +17,7 @@ interface PaginationProps {
 }
 
 export const Pagination = ({
+  className,
   endCursor,
   hasPreviousPage,
   hasNextPage,
@@ -42,23 +45,23 @@ export const Pagination = ({
   }
 
   return (
-    <nav aria-label="Pagination" className="my-6 text-center text-primary">
+    <nav aria-label="Pagination" className={cn('my-6 text-center text-primary', className)}>
       {hasPreviousPage ? (
         <Link className="inline-block" href={`${pathname}?${beforeSearchParams.toString()}`}>
           <span className="sr-only">{prevLabel}</span>
-          <ChevronLeft aria-hidden="true" className="inline-block h-8 w-8" />
+          <ChevronLeft aria-hidden="true" className="m-2 inline-block h-8 w-8" />
         </Link>
       ) : (
-        <ChevronLeft aria-hidden="true" className="inline-block h-8 w-8 text-gray-200" />
+        <ChevronLeft aria-hidden="true" className="m-2 inline-block h-8 w-8 text-gray-200" />
       )}
 
       {hasNextPage ? (
         <Link className="inline-block" href={`${pathname}?${afterSearchParams.toString()}`}>
           <span className="sr-only">{nextLabel}</span>
-          <ChevronRight aria-hidden="true" className="inline-block h-8 w-8" />
+          <ChevronRight aria-hidden="true" className="m-2 inline-block h-8 w-8" />
         </Link>
       ) : (
-        <ChevronRight aria-hidden="true" className="inline-block h-8 w-8 text-gray-200" />
+        <ChevronRight aria-hidden="true" className="m-2 inline-block h-8 w-8 text-gray-200" />
       )}
     </nav>
   );

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 
 import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
 import { Link } from '~/components/link';
@@ -34,7 +34,7 @@ const AddressChangeButtons = ({ addressId, isAddressRemovable, onDelete }: Addre
   };
 
   return (
-    <div className="my-2 flex w-fit gap-x-2 divide-y-0">
+    <div className="flex w-fit gap-x-2 divide-y-0">
       <Button aria-label={t('editButton')} asChild variant="secondary">
         <Link
           href={{
@@ -63,7 +63,11 @@ interface AddressBookProps {
   addressesCount: number;
 }
 
-export const AddressBook = ({ addressesCount, customerAddresses }: AddressBookProps) => {
+export const AddressBook = ({
+  children,
+  addressesCount,
+  customerAddresses,
+}: PropsWithChildren<AddressBookProps>) => {
   const t = useTranslations('Account.Addresses');
   const [addressBook, setAddressBook] = useState(customerAddresses);
   const { accountState } = useAccountStatusContext();
@@ -89,7 +93,7 @@ export const AddressBook = ({ addressesCount, customerAddresses }: AddressBookPr
             countryCode,
           }) => (
             <li
-              className="flex w-full border-collapse flex-col justify-start gap-2 border-t border-gray-200 pb-3 pt-5"
+              className="flex w-full border-collapse flex-col justify-start gap-3 border-t border-gray-200 py-6"
               key={entityId}
             >
               <div className="inline-flex flex-col justify-start text-base">
@@ -111,12 +115,17 @@ export const AddressBook = ({ addressesCount, customerAddresses }: AddressBookPr
             </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">
+        <li className="align-center flex w-full border-collapse flex-col justify-center gap-2 border-t border-gray-200 pt-8 md:flex-row md:justify-between">
+          <Button
+            aria-label={t('addNewAddress')}
+            asChild
+            className="w-full hover:text-white md:w-fit"
+          >
             <Link href={{ pathname: '/account/addresses', query: { action: 'add-new-address' } }}>
               {t('addNewAddress')}
             </Link>
           </Button>
+          {children}
         </li>
       </ul>
     </>

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

@@ -58,15 +58,17 @@ export const AddressesContent = async ({
   return (
     <>
       <TabHeading heading="addresses" />
-      <AddressBook addressesCount={addressesCount} customerAddresses={addresses} key={endCursor} />
-      <Pagination
-        endCursor={endCursor}
-        hasNextPage={hasNextPage}
-        hasPreviousPage={hasPreviousPage}
-        nextLabel={tPagination('next')}
-        prevLabel={tPagination('prev')}
-        startCursor={startCursor}
-      />
+      <AddressBook addressesCount={addressesCount} customerAddresses={addresses} key={endCursor}>
+        <Pagination
+          className="my-0 flex inline-flex justify-center text-center"
+          endCursor={endCursor}
+          hasNextPage={hasNextPage}
+          hasPreviousPage={hasPreviousPage}
+          nextLabel={tPagination('next')}
+          prevLabel={tPagination('prev')}
+          startCursor={startCursor}
+        />
+      </AddressBook>
     </>
   );
 };