From c780852fbb70a1e95d4ed85dfe12617da703642e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 7 Jan 2021 16:28:50 -0300 Subject: [PATCH] Progress --- README.md | 22 +++++++++++++--- .../ProductCard/FUTURE_ProductCard.tsx | 10 ++++--- .../WishlistButton/WishlistButton.tsx | 26 +++++++++---------- framework/bigcommerce/api/wishlist/index.ts | 4 +-- framework/bigcommerce/wishlist/index.ts | 4 +++ framework/types.d.ts | 14 ++++++---- 6 files changed, 53 insertions(+), 27 deletions(-) create mode 100644 framework/bigcommerce/wishlist/index.ts diff --git a/README.md b/README.md index 935c433cf..de1452b75 100644 --- a/README.md +++ b/README.md @@ -84,10 +84,10 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss). ## Goals -* **Next.js Commerce** should have a completely data **agnostic** UI -* **Aware of schema**: should ship with the right data schemas and types. -* All providers should return the right data types and schemas to blend correctly with Next.js Commerce. -* `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._ +- **Next.js Commerce** should have a completely data **agnostic** UI +- **Aware of schema**: should ship with the right data schemas and types. +- All providers should return the right data types and schemas to blend correctly with Next.js Commerce. +- `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._ There is a `framework` folder in the root folder that will contain multiple ecommerce providers. @@ -95,5 +95,19 @@ Additionally, we need to ensure feature parity (not all providers have e.g. wish People actively working on this project: @okbel & @lfades. +## Framework +Framework is where the data comes from. Contains mostly hooks and functions. +## Structure + +- ## product +- wishlist + - useWishlist + - addWishlistItem + - removeWishlistItem +- auth + +- config.json + +## Wishlist diff --git a/components/product/ProductCard/FUTURE_ProductCard.tsx b/components/product/ProductCard/FUTURE_ProductCard.tsx index 604b91460..6ccc79fb9 100644 --- a/components/product/ProductCard/FUTURE_ProductCard.tsx +++ b/components/product/ProductCard/FUTURE_ProductCard.tsx @@ -1,10 +1,9 @@ import { FC } from 'react' import cn from 'classnames' import Link from 'next/link' -import Image, { ImageProps } from 'next/image' import s from './ProductCard.module.css' -// Restore Wishlist func -// import WishlistButton from '@components/wishlist/WishlistButton' +import Image, { ImageProps } from 'next/image' +import WishlistButton from '@components/wishlist/WishlistButton' interface Props { className?: string @@ -52,6 +51,11 @@ const ProductCard: FC = ({ className, product, variant, imgProps }) => { {product.prices[0].currencyCode} +
{product.images[0] && ( diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx index b8b41c90d..fda78a4bf 100644 --- a/components/wishlist/WishlistButton/WishlistButton.tsx +++ b/components/wishlist/WishlistButton/WishlistButton.tsx @@ -1,16 +1,17 @@ import React, { FC, useState } from 'react' import cn from 'classnames' -import type { ProductNode } from '@framework/api/operations/get-all-products' -import useAddItem from '@framework/wishlist/use-add-item' -import useRemoveItem from '@framework/wishlist/use-remove-item' -import useWishlist from '@framework/wishlist/use-wishlist' -import useCustomer from '@framework/use-customer' import { Heart } from '@components/icons' import { useUI } from '@components/ui/context' +import type { ProductNode } from '@framework/api/operations/get-all-products' +import useCustomer from '@framework/use-customer' +import useAddItem from '@framework/wishlist/use-add-item' +import useWishlist from '@framework/wishlist/use-wishlist' +import useRemoveItem from '@framework/wishlist/use-remove-item' + type Props = { - productId: number - variant: NonNullable[0] + productId: Product['id'] + variant: ProductVariant } & React.ButtonHTMLAttributes const WishlistButton: FC = ({ @@ -19,16 +20,15 @@ const WishlistButton: FC = ({ className, ...props }) => { + const { data } = useWishlist() const addItem = useAddItem() const removeItem = useRemoveItem() - const { data } = useWishlist() const { data: customer } = useCustomer() - const [loading, setLoading] = useState(false) const { openModal, setModalView } = useUI() + const [loading, setLoading] = useState(false) + const itemInWishlist = data?.items?.find( - (item) => - item.product_id === productId && - item.variant_id === variant?.node.entityId + (item) => item.product_id === productId && item.variant_id === variant.id ) const handleWishlistChange = async (e: any) => { @@ -50,7 +50,7 @@ const WishlistButton: FC = ({ } else { await addItem({ productId, - variantId: variant?.node.entityId!, + variantId: variant?.id, }) } diff --git a/framework/bigcommerce/api/wishlist/index.ts b/framework/bigcommerce/api/wishlist/index.ts index 94194dd41..e78f0d9b9 100644 --- a/framework/bigcommerce/api/wishlist/index.ts +++ b/framework/bigcommerce/api/wishlist/index.ts @@ -15,8 +15,8 @@ import removeItem from './handlers/remove-item' export type { Wishlist, WishlistItem } export type ItemBody = { - productId: number - variantId: number + productId: Product['id'] + variantId: ProductVariant['id'] } export type AddItemBody = { item: ItemBody } diff --git a/framework/bigcommerce/wishlist/index.ts b/framework/bigcommerce/wishlist/index.ts new file mode 100644 index 000000000..9ea28291c --- /dev/null +++ b/framework/bigcommerce/wishlist/index.ts @@ -0,0 +1,4 @@ +export { default as useAddItem } from './use-add-item' +export { default as useWishlist } from './use-wishlist' +export { default as useRemoveItem } from './use-remove-item' +export { default as useWishlistActions } from './use-wishlist-actions' diff --git a/framework/types.d.ts b/framework/types.d.ts index 4098e5c7e..5d171b5b0 100644 --- a/framework/types.d.ts +++ b/framework/types.d.ts @@ -1,17 +1,21 @@ -interface ProductImage { - url: string - alt?: string -} - interface Product { id: string | number name: string description: string images: ProductImage[] + variants: ProductVariant[] prices: ProductPrice[] slug: string path?: string } +interface ProductImage { + url: string + alt?: string +} + +interface ProductVariant { + id: string | number +} interface ProductPrice { value: number | string