4
0
forked from crowetic/commerce

Added actions and more stuff to the wishlist page

This commit is contained in:
Luis Alvarez 2020-10-27 03:13:25 -05:00
parent 95fd730f0a
commit 9ad0f0ef6b
8 changed files with 137 additions and 74 deletions

View File

@ -14,7 +14,7 @@ import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import {
getCurrentVariant,
getProductOptions,
ProductOptions,
SelectedOptions,
} from '../helpers'
import WishlistButton from '@components/wishlist/WishlistButton'
@ -29,7 +29,7 @@ const ProductView: FC<Props> = ({ product }) => {
const { openSidebar } = useUI()
const options = getProductOptions(product)
const [loading, setLoading] = useState(false)
const [choices, setChoices] = useState<ProductOptions>({
const [choices, setChoices] = useState<SelectedOptions>({
size: null,
color: null,
})

View File

@ -1,4 +1,14 @@
import { FC } from 'react'
import { FC, useState } from 'react'
import cn from 'classnames'
import Link from 'next/link'
import Image from 'next/image'
import type { WishlistItem } from '@lib/bigcommerce/api/wishlist'
import usePrice from '@lib/commerce/use-price'
import useRemoveItem from '@lib/bigcommerce/wishlist/use-remove-item'
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { useUI } from '@components/ui/context'
import { Button } from '@components/ui'
import { HTMLContent } from '@components/core'
import { Trash } from '@components/icons'
import s from './WishlistCard.module.css'
@ -6,6 +16,7 @@ interface Props {
className?: string
children?: any
data?: ProductData
item: WishlistItem
}
interface ProductData {
@ -15,23 +26,83 @@ interface ProductData {
path: string
}
const WishlistCard: FC<Props> = ({ className, data }) => {
const WishlistCard: FC<Props> = ({ className, item }) => {
const product = item.product!
const { price } = usePrice({
amount: product.prices?.price?.value,
baseAmount: product.prices?.retailPrice?.value,
currencyCode: product.prices?.price?.currencyCode!,
})
const removeItem = useRemoveItem({ includeProducts: true })
const [loading, setLoading] = useState(false)
const [removing, setRemoving] = useState(false)
const addItem = useAddItem()
const { openSidebar } = useUI()
const handleRemove = async () => {
setRemoving(true)
try {
// If this action succeeds then there's no need to do `setRemoving(true)`
// because the component will be removed from the view
await removeItem({ id: item.id! })
} catch (error) {
setRemoving(false)
}
}
const addToCart = async () => {
setLoading(true)
try {
await addItem({
productId: product.entityId,
variantId: product.variants.edges?.[0]?.node.entityId!,
})
openSidebar()
setLoading(false)
} catch (err) {
setLoading(false)
}
}
return (
<div className={s.root}>
<div className={`col-span-3 ${s.productBg}`} />
<div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
<div className={`col-span-3 ${s.productBg}`}>
<Image
src={product.images.edges?.[0]?.node.urlOriginal!}
width={400}
height={400}
alt={product.images.edges?.[0]?.node.altText || 'Product Image'}
// The cart item image is already optimized and very small in size
/>
</div>
<div className="col-span-7">
<h3 className="text-2xl mb-2">Jacket</h3>
<p className="mb-4">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
<button className="py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover">
Add to cart
</button>
<h3 className="text-2xl mb-2">
<Link href={`/product${product.path}`}>
<a>{product.name}</a>
</Link>
</h3>
<div className="mb-4">
<HTMLContent html={product.description!} />
</div>
<Button
aria-label="Add to Cart"
type="button"
className={
'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
}
onClick={addToCart}
loading={loading}
>
Add to Cart
</Button>
</div>
<div className="col-span-2 flex flex-col justify-between">
<div className="flex justify-end font-bold">$ 50.00</div>
<div className="flex justify-end font-bold">{price}</div>
<div className="flex justify-end">
<Trash />
<button onClick={handleRemove}>
<Trash />
</button>
</div>
</div>
</div>

View File

@ -4,9 +4,13 @@ import { BigcommerceConfig, getConfig } from '..'
import getAllProducts, { ProductEdge } from './get-all-products'
export type Wishlist = Omit<definitions['wishlist_Full'], 'items'> & {
items?: (NonNullable<definitions['wishlist_Full']['items']>[0] & {
product?: ProductEdge['node']
})[]
items?: WishlistItem[]
}
export type WishlistItem = NonNullable<
definitions['wishlist_Full']['items']
>[0] & {
product?: ProductEdge['node']
}
export type GetCustomerWishlistResult<

View File

@ -4,12 +4,15 @@ import createApiHandler, {
BigcommerceHandler,
} from '../utils/create-api-handler'
import { BigcommerceApiError } from '../utils/errors'
import type { Wishlist } from '../operations/get-customer-wishlist'
import type {
Wishlist,
WishlistItem,
} from '../operations/get-customer-wishlist'
import getWishlist from './handlers/get-wishlist'
import addItem from './handlers/add-item'
import removeItem from './handlers/remove-item'
export type { Wishlist }
export type { Wishlist, WishlistItem }
export type ItemBody = {
productId: number

View File

@ -4,7 +4,7 @@ import { CommerceError } from '../../commerce/utils/errors'
import useWishlistAddItem from '../../commerce/wishlist/use-add-item'
import type { ItemBody, AddItemBody } from '../api/wishlist'
import useCustomer from '../use-customer'
import useWishlist, { Wishlist } from './use-wishlist'
import useWishlist, { UseWishlistOptions, Wishlist } from './use-wishlist'
const defaultOpts = {
url: '/api/bigcommerce/wishlist',
@ -27,9 +27,9 @@ export const fetcher: HookFetcher<Wishlist, AddItemBody> = (
}
export function extendHook(customFetcher: typeof fetcher) {
const useAddItem = () => {
const useAddItem = (opts?: UseWishlistOptions) => {
const { data: customer } = useCustomer()
const { mutate } = useWishlist()
const { revalidate } = useWishlist(opts)
const fn = useWishlistAddItem(defaultOpts, customFetcher)
return useCallback(
@ -42,10 +42,10 @@ export function extendHook(customFetcher: typeof fetcher) {
}
const data = await fn({ item: input })
await mutate(data, false)
await revalidate()
return data
},
[fn, mutate, customer]
[fn, revalidate, customer]
)
}

View File

@ -4,7 +4,7 @@ import { CommerceError } from '../../commerce/utils/errors'
import useWishlistRemoveItem from '../../commerce/wishlist/use-remove-item'
import type { RemoveItemBody } from '../api/wishlist'
import useCustomer from '../use-customer'
import useWishlist, { Wishlist } from './use-wishlist'
import useWishlist, { UseWishlistOptions, Wishlist } from './use-wishlist'
const defaultOpts = {
url: '/api/bigcommerce/wishlist',
@ -28,9 +28,9 @@ export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
}
export function extendHook(customFetcher: typeof fetcher) {
const useRemoveItem = () => {
const useRemoveItem = (opts?: UseWishlistOptions) => {
const { data: customer } = useCustomer()
const { mutate } = useWishlist()
const { revalidate } = useWishlist(opts)
const fn = useWishlistRemoveItem<Wishlist | null, RemoveItemBody>(
defaultOpts,
customFetcher
@ -46,10 +46,10 @@ export function extendHook(customFetcher: typeof fetcher) {
}
const data = await fn({ itemId: String(input.id) })
await mutate(data, false)
await revalidate()
return data
},
[fn, mutate, customer]
[fn, revalidate, customer]
)
}

View File

@ -60,7 +60,7 @@ export function extendHook(
// response.data is also a getter and it's better to not trigger it early
Object.defineProperty(response, 'isEmpty', {
get() {
return (response.data?.items?.length || 0) > 0
return (response.data?.items?.length || 0) <= 0
},
set: (x) => x,
})

View File

@ -1,64 +1,49 @@
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import type { GetStaticPropsContext } from 'next'
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
import { Layout } from '@components/core'
import { Heart } from '@components/icons'
import { Container, Text } from '@components/ui'
import { WishlistCard } from '@components/wishlist'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { pages } = await getAllPages({ preview })
const { categories, brands } = await getSiteInfo({ preview })
return {
props: { pages, categories, brands },
props: { pages },
}
}
export default function Home({
categories,
brands,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const { data } = useWishlist({ includeProducts: true })
console.log(data)
export default function Wishlist() {
const { data, isEmpty } = useWishlist({ includeProducts: true })
return (
<Container>
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
All Categories
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
</li>
))}
</ul>
</div>
<div className="col-span-8">
<Text variant="pageHeading">My Wishlist</Text>
<div className="group flex flex-col">
{[1, 2, 3, 4, 5, 6].map((i) => (
<WishlistCard key={i} />
))}
</div>
</div>
<div className="col-span-2">
<ul>
<li className="py-1 text-base font-bold tracking-wide">
Relevance
</li>
<li className="py-1 text-secondary">Latest arrivals</li>
<li className="py-1 text-secondary">Trending</li>
<li className="py-1 text-secondary">Price: Low to high</li>
<li className="py-1 text-secondary">Price: High to low</li>
</ul>
<div className="mt-3 mb-20">
<Text variant="pageHeading">My Wishlist</Text>
<div className="group flex flex-col">
{isEmpty ? (
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
<span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
<Heart className="absolute" />
</span>
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your wishlist is empty
</h2>
<p className="text-accents-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>
) : (
data &&
data.items?.map((item) => (
<WishlistCard key={item.id} item={item} />
))
)}
</div>
</div>
</Container>
)
}
Home.Layout = Layout
Wishlist.Layout = Layout