fix(core): modify cart page layout for mobile view (#896)

bigcommerce · May 10, 2024 · b13fecf · b13fecf
1 parent d0b6841
commit b13fecf
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 84 deletions.
diff --git a/.changeset/four-cups-double.md b/.changeset/four-cups-double.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Modify Cart page layout to fix mobile rendering issues.
diff --git a/core/app/[locale]/(default)/cart/_components/cart-item.tsx b/core/app/[locale]/(default)/cart/_components/cart-item.tsx
@@ -133,92 +133,104 @@ export const CartItem = async ({ currencyCode, product }: Props) => {
 
   return (
     <li>
-      <div className="flex items-center gap-6 border-t border-t-gray-200 py-4">
-        <div>
-          <BcImage alt={product.name} height={104} src={product.imageUrl ?? ''} width={104} />
+      <div className="flex gap-4 border-t border-t-gray-200 py-4 md:flex-row">
+        <div className="w-24 flex-none md:w-[144px]">
+          <BcImage alt={product.name} height={144} src={product.imageUrl ?? ''} width={144} />
         </div>
 
         <div className="flex-1">
           <p className="text-base text-gray-500">{product.brand}</p>
-          <p className="text-xl font-bold lg:text-2xl">{product.name}</p>
-
-          {product.selectedOptions.length > 0 && (
-            <div className="mt-2">
-              {product.selectedOptions.map((selectedOption) => {
-                switch (selectedOption.__typename) {
-                  case 'CartSelectedMultipleChoiceOption':
-                    return (
-                      <div key={selectedOption.entityId}>
-                        <span>{selectedOption.name}:</span>{' '}
-                        <span className="font-semibold">{selectedOption.value}</span>
-                      </div>
-                    );
-
-                  case 'CartSelectedCheckboxOption':
-                    return (
-                      <div key={selectedOption.entityId}>
-                        <span>{selectedOption.name}:</span>{' '}
-                        <span className="font-semibold">{selectedOption.value}</span>
-                      </div>
-                    );
-
-                  case 'CartSelectedNumberFieldOption':
-                    return (
-                      <div key={selectedOption.entityId}>
-                        <span>{selectedOption.name}:</span>{' '}
-                        <span className="font-semibold">{selectedOption.number}</span>
-                      </div>
-                    );
-
-                  case 'CartSelectedMultiLineTextFieldOption':
-                    return (
-                      <div key={selectedOption.entityId}>
-                        <span>{selectedOption.name}:</span>{' '}
-                        <span className="font-semibold">{selectedOption.text}</span>
-                      </div>
-                    );
-
-                  case 'CartSelectedTextFieldOption':
-                    return (
-                      <div key={selectedOption.entityId}>
-                        <span>{selectedOption.name}:</span>{' '}
-                        <span className="font-semibold">{selectedOption.text}</span>
-                      </div>
-                    );
-
-                  case 'CartSelectedDateFieldOption':
-                    return (
-                      <div key={selectedOption.entityId}>
-                        <span>{selectedOption.name}:</span>{' '}
-                        <span className="font-semibold">
-                          {format.dateTime(new Date(selectedOption.date.utc))}
-                        </span>
-                      </div>
-                    );
-                }
-
-                return null;
-              })}
+          <div className="flex flex-col gap-2 md:flex-row">
+            <div className="flex flex-1 flex-col gap-2">
+              <p className="text-xl font-bold md:text-2xl">{product.name}</p>
+
+              {product.selectedOptions.length > 0 && (
+                <div>
+                  {product.selectedOptions.map((selectedOption) => {
+                    switch (selectedOption.__typename) {
+                      case 'CartSelectedMultipleChoiceOption':
+                        return (
+                          <div key={selectedOption.entityId}>
+                            <span>{selectedOption.name}:</span>{' '}
+                            <span className="font-semibold">{selectedOption.value}</span>
+                          </div>
+                        );
+
+                      case 'CartSelectedCheckboxOption':
+                        return (
+                          <div key={selectedOption.entityId}>
+                            <span>{selectedOption.name}:</span>{' '}
+                            <span className="font-semibold">{selectedOption.value}</span>
+                          </div>
+                        );
+
+                      case 'CartSelectedNumberFieldOption':
+                        return (
+                          <div key={selectedOption.entityId}>
+                            <span>{selectedOption.name}:</span>{' '}
+                            <span className="font-semibold">{selectedOption.number}</span>
+                          </div>
+                        );
+
+                      case 'CartSelectedMultiLineTextFieldOption':
+                        return (
+                          <div key={selectedOption.entityId}>
+                            <span>{selectedOption.name}:</span>{' '}
+                            <span className="font-semibold">{selectedOption.text}</span>
+                          </div>
+                        );
+
+                      case 'CartSelectedTextFieldOption':
+                        return (
+                          <div key={selectedOption.entityId}>
+                            <span>{selectedOption.name}:</span>{' '}
+                            <span className="font-semibold">{selectedOption.text}</span>
+                          </div>
+                        );
+
+                      case 'CartSelectedDateFieldOption':
+                        return (
+                          <div key={selectedOption.entityId}>
+                            <span>{selectedOption.name}:</span>{' '}
+                            <span className="font-semibold">
+                              {format.dateTime(new Date(selectedOption.date.utc))}
+                            </span>
+                          </div>
+                        );
+                    }
+
+                    return null;
+                  })}
+                </div>
+              )}
+
+              <div className="hidden md:block">
+                <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
+                  <RemoveItem lineItemEntityId={product.entityId} />
+                </NextIntlClientProvider>
+              </div>
             </div>
-          )}
-        </div>
 
-        <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
-          <ItemQuantity product={product} />
-        </NextIntlClientProvider>
-
-        <div>
-          <p className="inline-flex w-24 justify-center text-lg font-bold">
-            {format.number(product.extendedSalePrice.value, {
-              style: 'currency',
-              currency: currencyCode,
-            })}
-          </p>
-        </div>
+            <div className="flex flex-col gap-2 md:items-end">
+              <p className="text-lg font-bold">
+                {format.number(product.extendedSalePrice.value, {
+                  style: 'currency',
+                  currency: currencyCode,
+                })}
+              </p>
+
+              <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
+                <ItemQuantity product={product} />
+              </NextIntlClientProvider>
+            </div>
+          </div>
 
-        <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
-          <RemoveItem lineItemEntityId={product.entityId} />
-        </NextIntlClientProvider>
+          <div className="mt-4 md:hidden">
+            <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
+              <RemoveItem lineItemEntityId={product.entityId} />
+            </NextIntlClientProvider>
+          </div>
+        </div>
       </div>
     </li>
   );

diff --git a/core/app/[locale]/(default)/cart/_components/item-quantity/index.tsx b/core/app/[locale]/(default)/cart/_components/item-quantity/index.tsx
@@ -135,7 +135,7 @@ const Quantity = ({ value }: { value: number }) => {
   const t = useTranslations('Cart.SubmitItemQuantity');
 
   return (
-    <span className="flex w-10 justify-center">
+    <span className="flex w-10 flex-1 justify-center">
       {pending ? (
         <>
           <Spinner aria-hidden="true" className="animate-spin text-primary" />
@@ -175,7 +175,7 @@ export const ItemQuantity = ({ product }: { product: Product }) => {
   };
 
   return (
-    <div className="border-2 border-gray-200 p-2.5">
+    <div className="w-[120px] border-2 border-gray-200 p-2.5">
       <form action={onSubmit} className="flex items-center">
         <SubmitButton onClick={() => setProductQuantity(productQuantity - 1)}>
           <Minus>

diff --git a/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx b/core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Loader2 as Spinner, Trash } from 'lucide-react';
+import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
@@ -11,7 +11,7 @@ export const RemoveFromCartButton = () => {
   return (
     <button
       aria-label={t('submitText')}
-      className="items-center hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
+      className="items-center text-primary hover:text-secondary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
       disabled={pending}
       type="submit"
     >
@@ -21,7 +21,7 @@ export const RemoveFromCartButton = () => {
           <span className="sr-only">{t('spinnerText')}</span>
         </>
       ) : (
-        <Trash aria-hidden="true" />
+        <>{t('remove')}</>
       )}
     </button>
   );

diff --git a/core/messages/en.json b/core/messages/en.json
@@ -162,6 +162,7 @@
       "errorMessage": "Something went wrong while updating item quantity, please try again."
     },
     "SubmitRemoveItem": {
+      "remove": "Remove",
       "spinnerText": "Removing...",
       "submitText": "Remove item from cart",
       "errorMessage": "Something went wrong while removing item, please try again."