From d03df631cef305ef3400ee948a3c535721a62803 Mon Sep 17 00:00:00 2001 From: okbel Date: Mon, 18 Jan 2021 16:24:22 -0300 Subject: [PATCH] Cart Normalized --- CHANGELOG.md | 4 ++ components/cart/CartItem/CartItem.tsx | 8 ++- framework/bigcommerce/cart/use-cart.tsx | 5 +- framework/bigcommerce/lib/normalize.ts | 83 +++++++++++++------------ framework/types.d.ts | 2 - tsconfig.json | 2 +- 6 files changed, 60 insertions(+), 44 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 000000000..b2d1092e3 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,4 @@ +## Changelog + +- Select Variants Working +- Click on cart item title, closes the sidebar \ No newline at end of file diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index c5a48c8e6..47389aee4 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -4,6 +4,7 @@ import Image from 'next/image' import Link from 'next/link' import s from './CartItem.module.css' import { Trash, Plus, Minus } from '@components/icons' +import {useUI} from '@components/ui/context' import usePrice from '@framework/product/use-price' import useUpdateItem from '@framework/cart/use-update-item' import useRemoveItem from '@framework/cart/use-remove-item' @@ -16,18 +17,23 @@ const Item = ({ item: CartItem currencyCode: string }) => { + const { closeSidebarIfPresent } = useUI() + const { price } = usePrice({ amount: item.extended_sale_price, baseAmount: item.extended_list_price, currencyCode, }) + const updateItem = useUpdateItem(item) const removeItem = useRemoveItem() const [quantity, setQuantity] = useState(item.quantity) const [removing, setRemoving] = useState(false) + const updateQuantity = async (val: number) => { await updateItem({ quantity: val }) } + const handleQuantity = (e: ChangeEvent) => { const val = Number(e.target.value) @@ -87,7 +93,7 @@ const Item = ({
- + closeSidebarIfPresent()}> {item.name} diff --git a/framework/bigcommerce/cart/use-cart.tsx b/framework/bigcommerce/cart/use-cart.tsx index 54582372f..a1ace483d 100644 --- a/framework/bigcommerce/cart/use-cart.tsx +++ b/framework/bigcommerce/cart/use-cart.tsx @@ -3,6 +3,7 @@ import type { SwrOptions } from '@commerce/utils/use-data' import useCommerceCart, { CartInput } from '@commerce/cart/use-cart' import type { Cart } from '../api/cart' import { normalizeCart } from '../lib/normalize' +import update from 'immutability-helper' const defaultOpts = { url: '/api/bigcommerce/cart', @@ -40,7 +41,9 @@ export function extendHook( set: (x) => x, }) - return normalizeCart(response) + return update(response, { + data: { $set: normalizeCart(response.data) } + }) } useCart.extend = extendHook diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts index d9e0274c7..cd7763c6e 100644 --- a/framework/bigcommerce/lib/normalize.ts +++ b/framework/bigcommerce/lib/normalize.ts @@ -1,6 +1,12 @@ import { Cart, CartItem, Product } from '../../types' -import { Product as BigCommerceProduct } from '@framework/schema' -import update from "immutability-helper" +import update, { extend } from "immutability-helper" + +// Allows auto creation when needed +extend('$auto', function(value, object) { + return object ? + update(object, value): + update({}, value); +}); function normalizeProductOption(productOption:any) { const { @@ -69,47 +75,46 @@ export function normalizeProduct(productNode: any): Product { }) } -export function normalizeCart({ data, ...rest }: any): Cart { - return { - ...rest, - data: { - products: data?.line_items?.physical_items.map(itemsToProducts) ?? [], - ...data, +export function normalizeCart(cart: any): Cart { + return update(cart, { + $auto: { + products: { $set: cart?.line_items?.physical_items?.map(itemsToProducts)} }, - } + $unset: ['created_time', 'coupons', 'line_items'] + }) } -function itemsToProducts({ - id, - name, - quantity, - product_id, - variant_id, - image_url, - list_price, - sale_price, - extended_list_price, - extended_sale_price, - ...rest -}: any): CartItem { - return { +function itemsToProducts(item: any): CartItem { + const { id, name, - prices: { - listPrice: list_price, - salePrice: sale_price, - extendedListPrice: extended_list_price, - extendedSalePrice: extended_sale_price, - }, - images: [ - { - alt: name, - url: image_url, - }, - ], - productId: product_id, - variantId: variant_id, quantity, - ...rest, - } + 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 }, + } + }, + images: { $set: [{ + alt: name, + url: image_url + }]}, + productId: { $set: product_id }, + variantId: { $set: variant_id } + } + }) } diff --git a/framework/types.d.ts b/framework/types.d.ts index e68b6fd17..9ee622c4b 100644 --- a/framework/types.d.ts +++ b/framework/types.d.ts @@ -1,5 +1,3 @@ -import { CartItem } from '@components/cart' - interface Entity { id: string | number [prop: string]: any diff --git a/tsconfig.json b/tsconfig.json index e6201f640..856ebbff5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,7 +27,7 @@ } }, "include": [ - "/framework/types.d.ts", + "framework/types.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx",