More updates

This commit is contained in:
okbel 2021-01-19 12:33:50 -03:00
parent a8ae360cd4
commit 48b484011d
9 changed files with 57 additions and 50 deletions

View File

@ -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

View File

@ -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}

View File

@ -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)}
>

View File

@ -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

View 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

View File

@ -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']
})
}

View File

@ -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 {

View File

@ -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}

View File

@ -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>