4
0
forked from crowetic/commerce

Normalizing Cart Responses

This commit is contained in:
Belen Curcio 2021-01-12 16:59:07 -03:00
parent 287e690495
commit fc34856e50
8 changed files with 54 additions and 30 deletions

View File

@ -12,6 +12,7 @@ import s from './CartSidebarView.module.css'
const CartSidebarView: FC = () => { const CartSidebarView: FC = () => {
const { closeSidebar } = useUI() const { closeSidebar } = useUI()
const { data, isEmpty } = useCart() const { data, isEmpty } = useCart()
const { price: subTotal } = usePrice( const { price: subTotal } = usePrice(
data && { data && {
amount: data.base_amount, amount: data.base_amount,

View File

@ -7,13 +7,12 @@ import { useUI } from '@components/ui/context'
import { Navbar, Footer } from '@components/common' import { Navbar, Footer } from '@components/common'
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui' 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 LoginView from '@components/auth/LoginView'
import { CommerceProvider } from '@framework' import { CommerceProvider } from '@framework'
import type { Page } from '@framework/api/operations/get-all-pages' import type { Page } from '@framework/api/operations/get-all-pages'
const Loading = () => ( const Loading = () => (
<div className="w-80 h-80 flex items-center text-center justify-center p-3"> <div className="w-80 h-80 flex items-center text-center justify-center p-3">
<LoadingDots /> <LoadingDots />
@ -28,10 +27,12 @@ const SignUpView = dynamic(
() => import('@components/auth/SignUpView'), () => import('@components/auth/SignUpView'),
dynamicProps dynamicProps
) )
const ForgotPassword = dynamic( const ForgotPassword = dynamic(
() => import('@components/auth/ForgotPassword'), () => import('@components/auth/ForgotPassword'),
dynamicProps dynamicProps
) )
const FeatureBar = dynamic( const FeatureBar = dynamic(
() => import('@components/common/FeatureBar'), () => import('@components/common/FeatureBar'),
dynamicProps dynamicProps

View File

@ -3,11 +3,6 @@ export type SelectedOptions = {
color: string | null color: string | null
} }
export type ProductOption = {
displayName: string
values: any
}
export function getVariant(product: Product, opts: SelectedOptions) { export function getVariant(product: Product, opts: SelectedOptions) {
const variant = product.variants.find((variant) => { const variant = product.variants.find((variant) => {
return Object.entries(opts).every(([key, value]) => return Object.entries(opts).every(([key, value]) =>

View File

@ -2,6 +2,7 @@ import type { HookFetcher } from '@commerce/utils/types'
import type { SwrOptions } from '@commerce/utils/use-data' import type { SwrOptions } from '@commerce/utils/use-data'
import useCommerceCart, { CartInput } from '@commerce/cart/use-cart' import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
import type { Cart } from '../api/cart' import type { Cart } from '../api/cart'
import { normalizeCart } from '../lib/normalize'
const defaultOpts = { const defaultOpts = {
url: '/api/bigcommerce/cart', url: '/api/bigcommerce/cart',
@ -39,7 +40,7 @@ export function extendHook(
set: (x) => x, set: (x) => x,
}) })
return response return normalizeCart(response)
} }
useCart.extend = extendHook useCart.extend = extendHook

View File

@ -1,6 +1,6 @@
import { Product as BCProduct } from '@framework/schema' import { Product as BCProduct } from '@framework/schema'
function productOptionNormalize({ function normalizeProductOption({
node: { node: {
entityId, entityId,
values: { edges }, values: { edges },
@ -9,7 +9,7 @@ function productOptionNormalize({
}: any) { }: any) {
return { return {
id: entityId, id: entityId,
values: edges.map(({ node }: any) => node), values: edges?.map(({ node }: any) => node),
...rest, ...rest,
} }
} }
@ -45,16 +45,18 @@ export function normalizeProduct(productNode: BCProduct): Product {
? variants.edges.map( ? variants.edges.map(
({ node: { entityId, productOptions, ...rest } }: any) => ({ ({ node: { entityId, productOptions, ...rest } }: any) => ({
id: entityId, id: entityId,
options: productOptions.edges.map(productOptionNormalize), options: productOptions?.edges
? productOptions.edges.map(normalizeProductOption)
: [],
...rest, ...rest,
}) })
) )
: [], : [],
options: productOptions.edges options: productOptions.edges
? productOptions.edges.map(productOptionNormalize) ? productOptions?.edges.map(normalizeProductOption)
: [], : [],
brand: { brand: {
id: brand?.entityId, id: brand?.entityId ? brand?.entityId : null,
...brand, ...brand,
}, },
price: { price: {
@ -64,3 +66,13 @@ export function normalizeProduct(productNode: BCProduct): Product {
...rest, ...rest,
} }
} }
export function normalizeCart({ data, ...rest }: any) {
return {
...rest,
data: {
products: data?.line_items?.physical_items ?? [],
...data,
},
}
}

View File

@ -9,7 +9,7 @@ export type CartResponse<Result> = responseInterface<Result, Error> & {
} }
export type CartInput = { export type CartInput = {
cartId: string | undefined cartId: Cart['id']
} }
export default function useCart<Result>( export default function useCart<Result>(

View File

@ -42,7 +42,10 @@ interface ProductPrice {
} }
interface Cart extends Entity { interface Cart extends Entity {
id: string id: string | undefined
currency: { code: string }
taxIncluded?: boolean
totalAmmount: number | string
products: Pick<Product, 'id' | 'name' | 'prices'>[] products: Pick<Product, 'id' | 'name' | 'prices'>[]
} }

View File

@ -22,23 +22,34 @@ export async function getStaticProps({
export default function Cart() { export default function Cart() {
const { data, isEmpty } = useCart() const { data, isEmpty } = useCart()
const { price: subTotal } = usePrice( const loading = !data
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 ?? [] if (loading) {
// Load skeleton
return <div>Loading</div>
}
const error = null console.log('Cart Data', data)
const success = null
// 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 <div>hola</div>
return ( return (
<div className="grid lg:grid-cols-12"> <div className="grid lg:grid-cols-12">