From fc34856e506a4d8186e792b6845617968e34f4c6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 12 Jan 2021 16:59:07 -0300 Subject: [PATCH] Normalizing Cart Responses --- .../cart/CartSidebarView/CartSidebarView.tsx | 1 + components/common/Layout/Layout.tsx | 5 ++- components/product/helpers.ts | 5 --- framework/bigcommerce/cart/use-cart.tsx | 3 +- framework/bigcommerce/lib/normalize.ts | 22 +++++++--- framework/commerce/cart/use-cart.tsx | 2 +- framework/types.d.ts | 5 ++- pages/cart.tsx | 41 ++++++++++++------- 8 files changed, 54 insertions(+), 30 deletions(-) diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index ca73a6ec3..466ef15b6 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -12,6 +12,7 @@ import s from './CartSidebarView.module.css' const CartSidebarView: FC = () => { const { closeSidebar } = useUI() const { data, isEmpty } = useCart() + const { price: subTotal } = usePrice( data && { amount: data.base_amount, diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index ff8467a23..f4dac69ac 100644 --- a/components/common/Layout/Layout.tsx +++ b/components/common/Layout/Layout.tsx @@ -7,13 +7,12 @@ import { useUI } from '@components/ui/context' import { Navbar, Footer } from '@components/common' import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' import { Sidebar, Button, Modal, LoadingDots } from '@components/ui' -import { CartSidebarView } from '@components/cart' +import CartSidebarView from '@components/cart/CartSidebarView' import LoginView from '@components/auth/LoginView' import { CommerceProvider } from '@framework' import type { Page } from '@framework/api/operations/get-all-pages' - const Loading = () => (
@@ -28,10 +27,12 @@ const SignUpView = dynamic( () => import('@components/auth/SignUpView'), dynamicProps ) + const ForgotPassword = dynamic( () => import('@components/auth/ForgotPassword'), dynamicProps ) + const FeatureBar = dynamic( () => import('@components/common/FeatureBar'), dynamicProps diff --git a/components/product/helpers.ts b/components/product/helpers.ts index 57c37dbc8..ae0c43530 100644 --- a/components/product/helpers.ts +++ b/components/product/helpers.ts @@ -3,11 +3,6 @@ export type SelectedOptions = { color: string | null } -export type ProductOption = { - displayName: string - values: any -} - export function getVariant(product: Product, opts: SelectedOptions) { const variant = product.variants.find((variant) => { return Object.entries(opts).every(([key, value]) => diff --git a/framework/bigcommerce/cart/use-cart.tsx b/framework/bigcommerce/cart/use-cart.tsx index 83743096e..54582372f 100644 --- a/framework/bigcommerce/cart/use-cart.tsx +++ b/framework/bigcommerce/cart/use-cart.tsx @@ -2,6 +2,7 @@ import type { HookFetcher } from '@commerce/utils/types' 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' const defaultOpts = { url: '/api/bigcommerce/cart', @@ -39,7 +40,7 @@ export function extendHook( set: (x) => x, }) - return response + return normalizeCart(response) } useCart.extend = extendHook diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts index 5e3992d4b..686581b9f 100644 --- a/framework/bigcommerce/lib/normalize.ts +++ b/framework/bigcommerce/lib/normalize.ts @@ -1,6 +1,6 @@ import { Product as BCProduct } from '@framework/schema' -function productOptionNormalize({ +function normalizeProductOption({ node: { entityId, values: { edges }, @@ -9,7 +9,7 @@ function productOptionNormalize({ }: any) { return { id: entityId, - values: edges.map(({ node }: any) => node), + values: edges?.map(({ node }: any) => node), ...rest, } } @@ -45,16 +45,18 @@ export function normalizeProduct(productNode: BCProduct): Product { ? variants.edges.map( ({ node: { entityId, productOptions, ...rest } }: any) => ({ id: entityId, - options: productOptions.edges.map(productOptionNormalize), + options: productOptions?.edges + ? productOptions.edges.map(normalizeProductOption) + : [], ...rest, }) ) : [], options: productOptions.edges - ? productOptions.edges.map(productOptionNormalize) + ? productOptions?.edges.map(normalizeProductOption) : [], brand: { - id: brand?.entityId, + id: brand?.entityId ? brand?.entityId : null, ...brand, }, price: { @@ -64,3 +66,13 @@ export function normalizeProduct(productNode: BCProduct): Product { ...rest, } } + +export function normalizeCart({ data, ...rest }: any) { + return { + ...rest, + data: { + products: data?.line_items?.physical_items ?? [], + ...data, + }, + } +} diff --git a/framework/commerce/cart/use-cart.tsx b/framework/commerce/cart/use-cart.tsx index 8aefc3e68..f280923a6 100644 --- a/framework/commerce/cart/use-cart.tsx +++ b/framework/commerce/cart/use-cart.tsx @@ -9,7 +9,7 @@ export type CartResponse = responseInterface & { } export type CartInput = { - cartId: string | undefined + cartId: Cart['id'] } export default function useCart( diff --git a/framework/types.d.ts b/framework/types.d.ts index e020ba893..7d79b6c80 100644 --- a/framework/types.d.ts +++ b/framework/types.d.ts @@ -42,7 +42,10 @@ interface ProductPrice { } interface Cart extends Entity { - id: string + id: string | undefined + currency: { code: string } + taxIncluded?: boolean + totalAmmount: number | string products: Pick[] } diff --git a/pages/cart.tsx b/pages/cart.tsx index fc06c4ced..a9e24edf2 100644 --- a/pages/cart.tsx +++ b/pages/cart.tsx @@ -22,23 +22,34 @@ export async function getStaticProps({ export default function Cart() { const { data, isEmpty } = useCart() - const { price: subTotal } = usePrice( - data && { - amount: data.base_amount, - currencyCode: data.currency.code, - } - ) - const { price: total } = usePrice( - data && { - amount: data.cart_amount, - currencyCode: data.currency.code, - } - ) + const loading = !data - const items = data?.line_items.physical_items ?? [] + if (loading) { + // Load skeleton + return
Loading
+ } - const error = null - const success = null + console.log('Cart Data', data) + + // const { price: subTotal } = usePrice( + // data && { + // amount: data.base_amount, + // currencyCode: data.currency.code, + // } + // ) + // const { price: total } = usePrice( + // data && { + // amount: data.cart_amount, + // currencyCode: data.currency.code, + // } + // ) + + // const items = data?.line_items.physical_items ?? [] + + // const error = null + // const success = null + + return
hola
return (