From 3e27b80658e135f03ed57e86f983310758ebd37e Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Thu, 28 Jan 2021 15:54:17 -0500 Subject: [PATCH] Added new normalizer for the cart to the UI --- components/cart/CartItem/CartItem.tsx | 12 +-- .../cart/CartSidebarView/CartSidebarView.tsx | 9 +- framework/bigcommerce/lib/normalize.ts | 82 +++++-------------- framework/bigcommerce/types.d.ts | 6 +- framework/commerce/types.d.ts | 20 +++-- 5 files changed, 49 insertions(+), 80 deletions(-) diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 91a70af0b..71ab58966 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -14,14 +14,14 @@ const Item = ({ currencyCode, ...rest }: { - item: CartItem + item: LineItem currencyCode: string }) => { const { closeSidebarIfPresent } = useUI() const { price } = usePrice({ - amount: item.extended_sale_price, - baseAmount: item.extended_list_price, + amount: item.variant.price * item.quantity, + baseAmount: item.variant.listPrice * item.quantity, currencyCode, }) @@ -87,13 +87,13 @@ const Item = ({ className={s.productImage} width={150} height={150} - src={item.images[0].url} - alt={item.images[0].alt} + src={item.variant.image.url} + alt={item.variant.image.altText} unoptimized />
- + closeSidebarIfPresent()} diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 0e0f5e5e9..c25bd7c95 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -15,15 +15,14 @@ const CartSidebarView: FC = () => { const { price: subTotal } = usePrice( data && { - amount: Number(data.subTotal), - currencyCode: data.currency?.code || 'USD', + amount: Number(data.subtotalPrice), + currencyCode: data.currency.code, } ) - const { price: total } = usePrice( data && { - amount: Number(data.total), - currencyCode: data.currency?.code || 'USD', + amount: Number(data.totalPrice), + currencyCode: data.currency.code, } ) const handleClose = () => closeSidebar() diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts index 742f750d5..ec0f73a86 100644 --- a/framework/bigcommerce/lib/normalize.ts +++ b/framework/bigcommerce/lib/normalize.ts @@ -69,22 +69,6 @@ export function normalizeProduct(productNode: any): Product { } export function normalizeCart(data: BigcommerceCart): Cart { - // const d: BaseCart = data && { - // id: data.id, - // customerId: String(data.customer_id), - // email: data.email, - // createdAt: data.created_time, - // currency: data.currency, - // taxesIncluded: data.tax_included, - // lineItems: data.line_items as any, - // lineItemsSubtotalPrice: data.base_amount, - // subtotalPrice: data.base_amount + data.discount_amount, - // totalPrice: data.cart_amount, - // discounts: data.discounts?.map((discount) => ({ - // value: discount.discounted_amount, - // })), - // } - return { id: data.id, customerId: String(data.customer_id), @@ -92,7 +76,7 @@ export function normalizeCart(data: BigcommerceCart): Cart { createdAt: data.created_time, currency: data.currency, taxesIncluded: data.tax_included, - lineItems: data.line_items.physical_items.map(itemsToProducts) as any, + lineItems: data.line_items.physical_items.map(normalizeLineItem), lineItemsSubtotalPrice: data.base_amount, subtotalPrice: data.base_amount + data.discount_amount, totalPrice: data.cart_amount, @@ -100,52 +84,28 @@ export function normalizeCart(data: BigcommerceCart): Cart { value: discount.discounted_amount, })), } - - // return update(data as any, { - // $auto: { - // items: { $set: data?.line_items?.physical_items?.map(itemsToProducts) }, - // subTotal: { $set: data?.base_amount }, - // total: { $set: data?.cart_amount }, - // }, - // $unset: ['created_time', 'coupons', 'line_items', 'email'], - // }) } -function itemsToProducts(item: any): CartItem { - const { - id, - name, - quantity, - product_id, - variant_id, - image_url, - list_price, - sale_price, - extended_list_price, - extended_sale_price, - ...rest - } = item - - return update(item, { - $auto: { - prices: { - $auto: { - listPrice: { $set: list_price }, - salePrice: { $set: sale_price }, - extendedListPrice: { $set: extended_list_price }, - extendedSalePrice: { $set: extended_sale_price }, - }, +function normalizeLineItem(item: any): LineItem { + return { + id: item.id, + variantId: String(item.variant_id), + name: item.name, + quantity: item.quantity, + variant: { + id: String(item.variant_id), + sku: item.sku, + name: item.name, + image: { + url: item.image_url, }, - images: { - $set: [ - { - alt: name, - url: image_url, - }, - ], - }, - productId: { $set: product_id }, - variantId: { $set: variant_id }, + requiresShipping: item.is_require_shipping, + price: item.sale_price, + listPrice: item.list_price, }, - }) + path: item.url.split('/')[3], + discounts: item.discounts.map((discount: any) => ({ + value: discount.discounted_amount, + })), + } } diff --git a/framework/bigcommerce/types.d.ts b/framework/bigcommerce/types.d.ts index d41b22f18..d987381e7 100644 --- a/framework/bigcommerce/types.d.ts +++ b/framework/bigcommerce/types.d.ts @@ -1 +1,5 @@ -interface Cart extends BaseCart {} +interface Cart extends BaseCart { + lineItems: LineItem[] +} + +interface LineItem extends BaseLineItem {} diff --git a/framework/commerce/types.d.ts b/framework/commerce/types.d.ts index c31784984..831af5517 100644 --- a/framework/commerce/types.d.ts +++ b/framework/commerce/types.d.ts @@ -56,6 +56,8 @@ interface BaseLineItem { name: string quantity: number discounts: DiscountBase[] + // A human-friendly unique string automatically generated from the product’s name + path: string variant: BaseProductVariant } @@ -77,16 +79,20 @@ interface BaseProductVariant { sku: string // The product variant’s title, or the product's name. name: string - // Indicates whether this product variant is in stock. - isInStock: boolean - // Indicates if the product variant is available for sale. - availableForSale: boolean - // Whether a customer needs to provide a shipping address when placing - // an order for the product variant. - requiresShipping: boolean // Image associated with the product variant. Falls back to the product image // if no image is available. image: Image + // Whether a customer needs to provide a shipping address when placing + // an order for the product variant. + requiresShipping: boolean + // The product variant’s price after all discounts are applied. + price: number + // Product variant’s price, as quoted by the manufacturer/distributor. + listPrice: number + // Indicates whether this product variant is in stock. + isInStock?: boolean + // Indicates if the product variant is available for sale. + availableForSale?: boolean // The variant's weight. If a weight was not explicitly specified on the // variant this will be the product's weight. weight?: Measurement