4
0
forked from crowetic/commerce

fix conflicts

This commit is contained in:
Franco Arza 2020-10-26 21:03:12 -03:00
commit 348e914a00
15 changed files with 173 additions and 94 deletions

View File

@ -0,0 +1,23 @@
.root {
@apply py-12 flex flex-col w-full px-6;
@screen md {
@apply flex-row;
}
}
.asideWrapper {
@apply pr-3 w-full relative;
@screen md {
@apply w-48;
}
}
.aside {
@apply flex flex-row w-full justify-around mb-12;
@screen md {
@apply mb-0 block sticky top-32;
}
}

View File

@ -0,0 +1,66 @@
import { FC } from 'react'
import Link from 'next/link'
import { getCategoryPath, getDesignerPath } from '@utils/search'
import { Grid } from '@components/ui'
import { ProductCard } from '@components/product'
import s from './HomeAllProductsGrid.module.css'
interface Props {
categories?: any
brands?: any
newestProducts?: any
}
const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
return (
<div className={s.root}>
<div className={s.asideWrapper}>
<div className={s.aside}>
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
</li>
{categories.map((cat: any) => (
<li key={cat.path} className="py-1 text-accents-8">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
</li>
{brands.flatMap(({ node }: any) => (
<li key={node.path} className="py-1 text-accents-8">
<Link href={getDesignerPath(node.path)}>
<a>{node.name}</a>
</Link>
</li>
))}
</ul>
</div>
</div>
<div className="flex-1">
<Grid layout="normal">
{newestProducts.map(({ node }: any) => (
<ProductCard
key={node.path}
product={node}
variant="simple"
imgWidth={480}
imgHeight={480}
/>
))}
</Grid>
</div>
</div>
)
}
export default Head

View File

@ -0,0 +1 @@
export { default } from './HomeAllProductsGrid'

View File

@ -52,7 +52,7 @@ const ProductCard: FC<Props> = ({
}
return (
<Link href={`product${p.path}`}>
<Link href={`/product${p.path}`}>
<a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>

View File

@ -48,7 +48,8 @@
@apply hidden;
@screen sm {
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
@apply block absolute bottom-6 left-1/2;
transform: translateX(-50%);
}
}

View File

@ -2,6 +2,7 @@ import React, { FC, useState } from 'react'
import cn from 'classnames'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
import useAddItem from '@lib/bigcommerce/wishlist/use-add-item'
import useRemoveItem from '@lib/bigcommerce/wishlist/use-remove-item'
import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
import useCustomer from '@lib/bigcommerce/use-customer'
import { Heart } from '@components/icons'
@ -19,19 +20,21 @@ const WishlistButton: FC<Props> = ({
...props
}) => {
const addItem = useAddItem()
const removeItem = useRemoveItem()
const { data } = useWishlist()
const { data: customer } = useCustomer()
const [loading, setLoading] = useState(false)
const { openModal, setModalView } = useUI()
const isInWishlist = data?.items?.some(
const itemInWishlist = data?.items?.find(
(item) =>
item.product_id === productId &&
item.variant_id === variant?.node.entityId
)
const addToWishlist = async (e: any) => {
const handleWishlistChange = async (e: any) => {
e.preventDefault()
setLoading(true)
if (loading) return
// A login is required before adding an item to the wishlist
if (!customer) {
@ -39,11 +42,17 @@ const WishlistButton: FC<Props> = ({
return openModal()
}
setLoading(true)
try {
await addItem({
productId,
variantId: variant?.node.entityId!,
})
if (itemInWishlist) {
await removeItem({ id: itemInWishlist.id! })
} else {
await addItem({
productId,
variantId: variant?.node.entityId!,
})
}
setLoading(false)
} catch (err) {
@ -55,9 +64,9 @@ const WishlistButton: FC<Props> = ({
<button
{...props}
className={cn({ 'opacity-50': loading }, className)}
onClick={addToWishlist}
onClick={handleWishlistChange}
>
<Heart fill={isInWishlist ? 'white' : 'none'} />
<Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
</button>
)
}

View File

@ -9,8 +9,6 @@ import addItem from './handlers/add-item'
import updateItem from './handlers/update-item'
import removeItem from './handlers/remove-item'
type Body<T> = Partial<T> | undefined
export type ItemBody = {
productId: number
variantId: number
@ -46,14 +44,14 @@ export type Cart = {
export type CartHandlers = {
getCart: BigcommerceHandler<Cart, { cartId?: string }>
addItem: BigcommerceHandler<Cart, { cartId?: string } & Body<AddItemBody>>
addItem: BigcommerceHandler<Cart, { cartId?: string } & Partial<AddItemBody>>
updateItem: BigcommerceHandler<
Cart,
{ cartId?: string } & Body<UpdateItemBody>
{ cartId?: string } & Partial<UpdateItemBody>
>
removeItem: BigcommerceHandler<
Cart,
{ cartId?: string } & Body<RemoveItemBody>
{ cartId?: string } & Partial<RemoveItemBody>
>
}

View File

@ -41,7 +41,7 @@ export default async function fetchStoreApi<T>(
throw new BigcommerceApiError(msg, res, data)
}
if (!isJSON) {
if (res.status !== 204 && !isJSON) {
throw new BigcommerceApiError(
`Fetch to Bigcommerce API failed, expected JSON content but found: ${contentType}`,
res

View File

@ -1,20 +1,34 @@
import getCustomerId from '../../operations/get-customer-id'
import getCustomerWishlist, {
Wishlist,
} from '../../operations/get-customer-wishlist'
import type { WishlistHandlers } from '..'
// Return current wishlist info
const removeItem: WishlistHandlers['removeItem'] = async ({
res,
body: { wishlistId, itemId },
body: { customerToken, itemId },
config,
}) => {
if (!wishlistId || !itemId) {
const customerId =
customerToken && (await getCustomerId({ customerToken, config }))
const { wishlist } =
(customerId &&
(await getCustomerWishlist({
variables: { customerId },
config,
}))) ||
{}
if (!wishlist || !itemId) {
return res.status(400).json({
data: null,
errors: [{ message: 'Invalid request' }],
})
}
const result = await config.storeApiFetch<{ data: any } | null>(
`/v3/wishlists/${wishlistId}/items/${itemId}`,
const result = await config.storeApiFetch<{ data: Wishlist } | null>(
`/v3/wishlists/${wishlist.id}/items/${itemId}`,
{ method: 'DELETE' }
)
const data = result?.data ?? null

View File

@ -13,8 +13,6 @@ import removeWishlist from './handlers/remove-wishlist'
import addWishlist from './handlers/add-wishlist'
import { definitions } from '../definitions/wishlist'
type Body<T> = Partial<T> | undefined
export type ItemBody = {
productId: number
variantId: number
@ -22,7 +20,7 @@ export type ItemBody = {
export type AddItemBody = { item: ItemBody }
export type RemoveItemBody = { wishlistId: string; itemId: string }
export type RemoveItemBody = { itemId: string }
export type WishlistBody = {
customer_id: number
@ -40,19 +38,19 @@ export type WishlistHandlers = {
getWishlist: BigcommerceHandler<Wishlist, { customerToken?: string }>
addWishlist: BigcommerceHandler<
Wishlist,
{ wishlistId: string } & Body<AddWishlistBody>
{ wishlistId: string } & Partial<AddWishlistBody>
>
updateWishlist: BigcommerceHandler<
Wishlist,
{ wishlistId: string } & Body<AddWishlistBody>
{ wishlistId: string } & Partial<AddWishlistBody>
>
addItem: BigcommerceHandler<
Wishlist,
{ customerToken?: string } & Body<AddItemBody>
{ customerToken?: string } & Partial<AddItemBody>
>
removeItem: BigcommerceHandler<
Wishlist,
{ wishlistId: string } & Body<RemoveItemBody>
{ customerToken?: string } & Partial<RemoveItemBody>
>
removeWishlist: BigcommerceHandler<Wishlist, { wishlistId: string }>
}
@ -93,11 +91,8 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
}
// Remove an item from the wishlist
if (req.method === 'DELETE' && wishlistId && itemId) {
const body = {
wishlistId: wishlistId as string,
itemId: itemId as string,
}
if (req.method === 'DELETE') {
const body = { ...req.body, customerToken }
return await handlers['removeItem']({ req, res, config, body })
}

View File

@ -26,7 +26,7 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
}
export function extendHook(customFetcher: typeof fetcher) {
const useRemoveItem = (item?: any) => {
const useRemoveItem = () => {
const { mutate } = useCart()
const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(
defaultOpts,
@ -35,7 +35,7 @@ export function extendHook(customFetcher: typeof fetcher) {
return useCallback(
async function removeItem(input: RemoveItemInput) {
const data = await fn({ itemId: input.id ?? item?.id })
const data = await fn({ itemId: input.id })
await mutate(data, false)
return data
},

View File

@ -45,7 +45,7 @@ export function extendHook(customFetcher: typeof fetcher) {
await mutate(data, false)
return data
},
[fn, mutate]
[fn, mutate, customer]
)
}

View File

@ -1,45 +1,55 @@
import { useCallback } from 'react'
import { HookFetcher } from '@lib/commerce/utils/types'
import useAction from '@lib/commerce/utils/use-action'
import { CommerceError } from '@lib/commerce/utils/errors'
import useWishlistRemoveItem from '@lib/commerce/wishlist/use-remove-item'
import type { RemoveItemBody } from '../api/wishlist'
import useCustomer from '../use-customer'
import useWishlist, { Wishlist } from './use-wishlist'
const defaultOpts = {
url: '/api/bigcommerce/wishlists',
url: '/api/bigcommerce/wishlist',
method: 'DELETE',
}
export type RemoveItemInput = {
id: string
id: string | number
}
export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
options,
{ wishlistId, itemId },
{ itemId },
fetch
) => {
return fetch({
...defaultOpts,
...options,
body: { wishlistId, itemId },
body: { itemId },
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useRemoveItem = (wishlistId: string, item?: any) => {
const useRemoveItem = () => {
const { data: customer } = useCustomer()
const { mutate } = useWishlist()
const fn = useAction<Wishlist | null, RemoveItemBody>(
const fn = useWishlistRemoveItem<Wishlist | null, RemoveItemBody>(
defaultOpts,
customFetcher
)
return useCallback(
async function removeItem(input: RemoveItemInput) {
const data = await fn({ wishlistId, itemId: input.id ?? item?.id })
if (!customer) {
// A signed customer is required in order to have a wishlist
throw new CommerceError({
message: 'Signed customer not found',
})
}
const data = await fn({ itemId: String(input.id) })
await mutate(data, false)
return data
},
[fn, mutate]
[fn, mutate, customer]
)
}

View File

@ -0,0 +1,5 @@
import useAction from '../utils/use-action'
const useRemoveItem = useAction
export default useRemoveItem

View File

@ -5,11 +5,10 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
import rangeMap from '@lib/range-map'
import { getCategoryPath, getDesignerPath } from '@utils/search'
import { Layout } from '@components/core'
import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
import Link from 'next/link'
import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid'
export async function getStaticProps({
preview,
@ -129,53 +128,11 @@ export default function Home({
/>
))}
</Marquee>
<div className="py-12 flex flex-row w-full px-6">
<div className="pr-3 w-48 relative">
<div className="sticky top-32">
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-accents-8">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
</li>
{brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-accents-8">
<Link href={getDesignerPath(node.path)}>
<a>{node.name}</a>
</Link>
</li>
))}
</ul>
</div>
</div>
<div className="flex-1">
<Grid layout="normal">
{newestProducts.map(({ node }) => (
<ProductCard
key={node.path}
product={node}
variant="simple"
imgWidth={480}
imgHeight={480}
/>
))}
</Grid>
</div>
</div>
<HomeAllProductsGrid
categories={categories}
brands={brands}
newestProducts={newestProducts}
/>
</div>
)
}