forked from crowetic/commerce
Normalizing Cart Responses
This commit is contained in:
parent
287e690495
commit
fc34856e50
@ -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,
|
||||||
|
@ -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
|
||||||
|
@ -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]) =>
|
||||||
|
@ -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
|
||||||
|
@ -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,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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>(
|
||||||
|
5
framework/types.d.ts
vendored
5
framework/types.d.ts
vendored
@ -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'>[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user