Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
May 10, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/four-cups-double.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-core": patch
---

Modify Cart page layout to fix mobile rendering issues.
170 changes: 91 additions & 79 deletions core/app/[locale]/(default)/cart/_components/cart-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions core/app/[locale]/(default)/cart/_components/item-quantity/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions core/app/[locale]/(default)/cart/_components/remove-from-cart-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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"
>
Expand All @@ -21,7 +21,7 @@ export const RemoveFromCartButton = () => {
<span className="sr-only">{t('spinnerText')}</span>
</>
) : (
<Trash aria-hidden="true" />
<>{t('remove')}</>
)}
</button>
);
Expand Down
1 change: 1 addition & 0 deletions core/messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
Loading