Merge pull request #47 from CrystallizeAPI/fix/cart-image

add item image and skeleton
CrystallizeAPI · Jul 25, 2024 · 2f2690a · 2f2690a
2 parents 73b04aa + 9f5f9ef
commit 2f2690a
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 21 deletions.
diff --git a/shared/application/ui/components/add-to-cart-button.tsx b/shared/application/ui/components/add-to-cart-button.tsx
@@ -36,6 +36,7 @@ export const AddToCartBtn: React.FC<{
                         packitem.variant.priceVariants.default.value
                             ? packitem.variant.priceVariants.default.priceFor.price
                             : packitem.variant.priceVariants.default.value,
+                    image: packitem.variant.images?.[0]?.url || '',
                 },
                 packitem.quantity,
             );

diff --git a/shared/application/ui/components/cart.tsx b/shared/application/ui/components/cart.tsx
@@ -8,7 +8,7 @@ import { Image } from '@crystallize/reactjs-components';
 import trashIcon from '~/assets/trashIcon.svg';
 import { Price as CrystallizePrice } from '../lib/pricing/pricing-component';
 import { useAppContext } from '../app-context/provider';
-import { calculateDiscounts, CartItemPrice } from './price';
+import { calculateDiscounts, CartItemPrice, CartItemPriceSkeleton } from './price';
 import { CartItem } from '@crystallize/node-service-api-request-handlers';
 import { VoucherForm } from './voucher';
 import { Voucher } from '~/use-cases/contracts/Voucher';
@@ -123,6 +123,7 @@ export const HydratedCart: React.FC = () => {
                                                         sku: item.variant.sku,
                                                         name: item.variant.name!,
                                                         price: item.variant.price!,
+                                                        image: item.images?.[0]?.url || '',
                                                     });
                                                 }}
                                             >
@@ -212,20 +213,12 @@ export const OptimisticHydratedCart: React.FC = () => {
                 const item = cart.items[sku as keyof typeof cart];
                 total += item.quantity * item.price;
                 return (
-                    <div key={index} className="flex justify-between bg-grey2 py-5 pr-10 pl-5 items-center rounded-lg ">
+                    <div key={index} className="flex justify-between bg-grey2 py-5 pr-10 pl-5 items-center rounded-lg">
                         <div className="flex cart-item gap-3 items-center">
-                            <Image />
+                            <Image src={item.image} alt={item.name} width={60} height={60} />
                             <div className="flex flex-col">
                                 <p className="text-xl font-semibold w-full">{item.name}</p>
-                                <CrystallizePrice currencyCode={contextState.currency.code}>
-                                    {item.price}
-                                </CrystallizePrice>
-                                <div>
-                                    {_t('total')}:{' '}
-                                    <CrystallizePrice currencyCode={contextState.currency.code}>
-                                        {item.price * item.quantity}
-                                    </CrystallizePrice>
-                                </div>
+                                <CartItemPriceSkeleton price={item.price} quantity={item.quantity} />
                             </div>
                         </div>
                         <div className="flex flex-col w-[40px] items-center justify-center gap-3">

diff --git a/shared/application/ui/components/checkout-forms/cart.tsx b/shared/application/ui/components/checkout-forms/cart.tsx
@@ -2,7 +2,7 @@ import { useRemoteCart } from '../../hooks/useRemoteCart';
 import { Image } from '@crystallize/reactjs-components';
 import { useAppContext } from '../../app-context/provider';
 import { Price } from '../../lib/pricing/pricing-component';
-import { CartItemPrice } from '../price';
+import { CartItemPrice, CartItemPriceSkeleton } from '../price';
 import { useLocalCart } from '../../hooks/useLocalCart';
 import { Price as CrystallizePrice } from '../../lib/pricing/pricing-component';
 import { ClientOnly } from '@crystallize/reactjs-hooks';
@@ -96,13 +96,13 @@ export const OptimisticHydratedCart: React.FC = () => {
                         >
                             <div className="flex cart-item gap-3 items-center">
                                 <div className="img-container img-contain w-[60px] h-[60px]">
-                                    <Image />
+                                    <Image src={item.image} alt={item.name} width={60} height={60} />
                                 </div>
                                 <div className="flex flex-col">
-                                    <p className="text-md font-regular w-full">{item.name}</p>
-                                    <CrystallizePrice currencyCode={contextState.currency.code}>
-                                        {item.price}
-                                    </CrystallizePrice>
+                                    <p className="text-md font-regular w-full">
+                                        {item.name} x {item.quantity}
+                                    </p>
+                                    <CartItemPriceSkeleton price={item.price} quantity={item.quantity} />
                                 </div>
                             </div>
                         </div>

diff --git a/shared/application/ui/components/price.tsx b/shared/application/ui/components/price.tsx
@@ -95,7 +95,6 @@ export const CartItemPrice: React.FC<{
 
     return (
         <div className="flex flex-col ">
-            {}
             {discount && discount.length > 0 && (
                 <div className="flex flex-col">
                     <span className="line-through font-semibold pt-1 text-xs">
@@ -129,6 +128,29 @@ export const CartItemPrice: React.FC<{
     );
 };
 
+export const CartItemPriceSkeleton: React.FC<{
+    price: number;
+    quantity: number;
+}> = ({ price, quantity }) => {
+    const { state, _t } = useAppContext();
+    const {
+        currency: { code: currencyCode },
+    } = state;
+    return (
+        <div className="flex flex-col gap-1">
+            <div className="animate-pulse bg-[#efefef] h-1 w-24 mt-2"></div>
+            <span className="text-green2 text-sm">{_t('cart.discount')}:</span>
+            <div className="animate-pulse bg-[#efefef] h-4 w-24 "></div>
+            <div className="text-md flex flex-col gap-1">
+                <CrystallizePrice currencyCode={currencyCode}>{price}</CrystallizePrice>
+                <div className="flex items-center gap-2">
+                    {_t('total')}: <CrystallizePrice currencyCode={currencyCode}>{price * quantity}</CrystallizePrice>
+                </div>
+            </div>
+        </div>
+    );
+};
+
 export const calculateDiscounts = (discounts: any) => {
     return discounts.reduce((memo: number, discount: any) => {
         return memo + (discount?.amount || 0)!;

diff --git a/shared/application/ui/hooks/useLocalCart.ts b/shared/application/ui/hooks/useLocalCart.ts
@@ -53,6 +53,7 @@ export function useLocalCart() {
                 name: string;
                 sku: string;
                 price: number;
+                image: string;
             },
             quantity: number = 1,
         ) => {
@@ -67,6 +68,7 @@ export function useLocalCart() {
                     name: item.name,
                     price: item.price,
                     quantity: quantity,
+                    image: item.image,
                 };
             }
             update(cart);

diff --git a/shared/application/ui/pages/Product.tsx b/shared/application/ui/pages/Product.tsx
@@ -74,7 +74,14 @@ export default ({
                             {selectedVariant && (
                                 <div className="">
                                     <Price variant={selectedVariant} />
-                                    <AddToCartBtn pack={[{ variant: selectedVariant, quantity: 1 }]} />
+                                    <AddToCartBtn
+                                        pack={[
+                                            {
+                                                variant: selectedVariant,
+                                                quantity: 1,
+                                            },
+                                        ]}
+                                    />
                                 </div>
                             )}
                             <div className="bg-[#dfdfdf] h-[1px] mt-5" />
@@ -86,7 +93,7 @@ export default ({
                 {product.relatedItems && (
                     <div className="w-full border-t border-[#dfdfdf] pr-6 sm:pr-0">
                         <h2 className="font-bold mt-20 mb-4 text-xl">{_t('relatedProducts')}</h2>
-                        <div className="grid gap-5 grid-cols-2 grid md:grid-cols-4 lg:grid-cols-5 pb-5">
+                        <div className="grid gap-5 grid-cols-2 md:grid-cols-4 lg:grid-cols-5 pb-5">
                             {product.relatedItems.map((item, index) => (
                                 <Product item={item} key={`${item.path}-${index}`} />
                             ))}

diff --git a/shared/application/use-cases/contracts/LocalCart.ts b/shared/application/use-cases/contracts/LocalCart.ts
@@ -5,6 +5,7 @@ export type LocalCart = {
             quantity: number;
             price: number;
             sku: string;
+            image: string;
         };
     };
     cartId: string;