mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
More updates
This commit is contained in:
parent
a8ae360cd4
commit
48b484011d
@ -12,6 +12,7 @@ import useRemoveItem from '@framework/cart/use-remove-item'
|
||||
const Item = ({
|
||||
item,
|
||||
currencyCode,
|
||||
...rest
|
||||
}: {
|
||||
item: CartItem
|
||||
currencyCode: string
|
||||
@ -79,6 +80,7 @@ const Item = ({
|
||||
className={cn('flex flex-row space-x-8 py-8', {
|
||||
'opacity-75 pointer-events-none': removing,
|
||||
})}
|
||||
{...rest}
|
||||
>
|
||||
<div className="w-16 h-16 bg-violet relative overflow-hidden">
|
||||
<Image
|
||||
|
@ -15,14 +15,14 @@ const CartSidebarView: FC = () => {
|
||||
|
||||
const { price: subTotal } = usePrice(
|
||||
data && {
|
||||
amount: data.subTotal,
|
||||
amount: Number(data.subTotal),
|
||||
currencyCode: data.currency?.code || 'USD',
|
||||
}
|
||||
)
|
||||
|
||||
const { price: total } = usePrice(
|
||||
data && {
|
||||
amount: data.total,
|
||||
amount: Number(data.total),
|
||||
currencyCode: data.currency?.code || 'USD',
|
||||
}
|
||||
)
|
||||
@ -94,7 +94,7 @@ const CartSidebarView: FC = () => {
|
||||
My Cart
|
||||
</h2>
|
||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
|
||||
{data?.products?.map((item) => (
|
||||
{data?.items?.map((item) => (
|
||||
<CartItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
|
@ -20,7 +20,7 @@ const ProductCard: FC<Props> = ({
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Link href={`product/${product.slug}`} {...props}>
|
||||
<Link href={`/product/${product.slug}`} {...props}>
|
||||
<a
|
||||
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
|
||||
>
|
||||
|
@ -1,18 +1,19 @@
|
||||
|
||||
import { normalizeCart } from '../lib/normalize'
|
||||
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'
|
||||
import update from 'immutability-helper'
|
||||
import type { Cart as BigCommerceCart } from '../api/cart'
|
||||
import update from "@framework/lib/immutability"
|
||||
|
||||
const defaultOpts = {
|
||||
url: '/api/bigcommerce/cart',
|
||||
method: 'GET',
|
||||
}
|
||||
|
||||
export type { Cart }
|
||||
type UseCartResponse = BigCommerceCart & Cart
|
||||
|
||||
export const fetcher: HookFetcher<Cart | null, CartInput> = (
|
||||
export const fetcher: HookFetcher<UseCartResponse | null , CartInput> = (
|
||||
options,
|
||||
{ cartId },
|
||||
fetch
|
||||
@ -22,7 +23,7 @@ export const fetcher: HookFetcher<Cart | null, CartInput> = (
|
||||
|
||||
export function extendHook(
|
||||
customFetcher: typeof fetcher,
|
||||
swrOptions?: SwrOptions<Cart | null, CartInput>
|
||||
swrOptions?: SwrOptions<UseCartResponse | null, CartInput>
|
||||
) {
|
||||
const useCart = () => {
|
||||
const response = useCommerceCart(defaultOpts, [], customFetcher, {
|
||||
@ -41,9 +42,11 @@ export function extendHook(
|
||||
set: (x) => x,
|
||||
})
|
||||
|
||||
return update(response, {
|
||||
data: { $set: normalizeCart(response.data) }
|
||||
})
|
||||
|
||||
|
||||
return response.data ? update(response, {
|
||||
data: { $set: normalizeCart(response.data ) }
|
||||
}) : response
|
||||
}
|
||||
|
||||
useCart.extend = extendHook
|
||||
|
18
framework/bigcommerce/lib/immutability.ts
Normal file
18
framework/bigcommerce/lib/immutability.ts
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
import update, { Context } from 'immutability-helper';
|
||||
|
||||
const c = new Context();
|
||||
|
||||
c.extend('$auto', function(value, object) {
|
||||
return object ?
|
||||
c.update(object, value):
|
||||
c.update({}, value);
|
||||
});
|
||||
|
||||
c.extend('$autoArray', function(value, object) {
|
||||
return object ?
|
||||
c.update(object, value):
|
||||
c.update([], value);
|
||||
});
|
||||
|
||||
export default c.update
|
@ -1,12 +1,5 @@
|
||||
import update from "@framework/lib/immutability"
|
||||
import { Cart, CartItem, Product } from '../../types'
|
||||
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 {
|
||||
@ -78,11 +71,11 @@ export function normalizeProduct(productNode: any): Product {
|
||||
export function normalizeCart(data: any): Cart {
|
||||
return update(data, {
|
||||
$auto: {
|
||||
products: { $set: data?.line_items?.physical_items?.map(itemsToProducts)},
|
||||
subTotal: { $set: data.base_amount },
|
||||
total: { $set: data.cart_amount }
|
||||
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']
|
||||
$unset: ['created_time', 'coupons', 'line_items', 'email']
|
||||
})
|
||||
}
|
||||
|
||||
|
3
framework/types.d.ts
vendored
3
framework/types.d.ts
vendored
@ -49,9 +49,10 @@ interface Cart extends Entity {
|
||||
id: string | undefined
|
||||
currency: { code: string }
|
||||
taxIncluded?: boolean
|
||||
products: Pick<Product, 'id' | 'name' | 'prices'> & CartItem[]
|
||||
items: Pick<Product, 'id' | 'name' | 'prices'> & CartItem[]
|
||||
subTotal: number | string
|
||||
total: number | string
|
||||
customerId: Customer['id']
|
||||
}
|
||||
|
||||
interface CartItem extends Entity {
|
||||
|
@ -8,6 +8,7 @@ import { Button } from '@components/ui'
|
||||
import { Bag, Cross, Check } from '@components/icons'
|
||||
import { CartItem } from '@components/cart'
|
||||
import { Text } from '@components/ui'
|
||||
import products from '@framework/api/catalog/products'
|
||||
|
||||
export async function getStaticProps({
|
||||
preview,
|
||||
@ -21,34 +22,23 @@ export async function getStaticProps({
|
||||
}
|
||||
|
||||
export default function Cart() {
|
||||
const error = null
|
||||
const success = null
|
||||
const { data, isEmpty } = useCart()
|
||||
const loading = !data
|
||||
|
||||
if (loading) {
|
||||
// Load skeleton
|
||||
return <div>Loading</div>
|
||||
}
|
||||
|
||||
const { price: subTotal } = usePrice(
|
||||
data && {
|
||||
amount: data.base_amount,
|
||||
currencyCode: data.currency.code,
|
||||
amount: Number(data.subTotal),
|
||||
currencyCode: data.currency.code || 'USD',
|
||||
}
|
||||
)
|
||||
const { price: total } = usePrice(
|
||||
data && {
|
||||
amount: data.cart_amount,
|
||||
currencyCode: data.currency.code,
|
||||
amount: Number(data.total),
|
||||
currencyCode: data.currency?.code || 'USD',
|
||||
}
|
||||
)
|
||||
|
||||
// const items = data?.line_items.physical_items ?? []
|
||||
|
||||
// const error = null
|
||||
// const success = null
|
||||
|
||||
return <div>hola</div>
|
||||
|
||||
return (
|
||||
<div className="grid lg:grid-cols-12">
|
||||
<div className="lg:col-span-8">
|
||||
@ -88,7 +78,7 @@ export default function Cart() {
|
||||
<Text variant="pageHeading">My Cart</Text>
|
||||
<Text variant="sectionHeading">Review your Order</Text>
|
||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-b border-accents-2">
|
||||
{items.map((item) => (
|
||||
{data?.items.map((item) => (
|
||||
<CartItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
|
@ -110,9 +110,9 @@ export default function Search({
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
@ -209,9 +209,9 @@ export default function Search({
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
@ -384,9 +384,9 @@ export default function Search({
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
Loading…
x
Reference in New Issue
Block a user