From bf71d1d41a0b868cae82ab35efb1a050b8aa67a8 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 15:23:19 -0500 Subject: [PATCH 01/12] Updated wishlist hooks, added more, updated API. --- lib/bigcommerce/api/cart/handlers/add-item.ts | 4 +- .../api/cart/handlers/update-item.ts | 4 +- .../api/operations/get-all-pages.ts | 2 +- .../api/operations/get-customer-id.ts | 34 +++++++++++++ .../api/operations/get-customer-wishlist.ts | 51 +++++++++++++++++++ lib/bigcommerce/api/utils/parse-item.ts | 10 ++-- .../api/wishlist/handlers/add-item.ts | 41 +++++++++++---- .../api/wishlist/handlers/get-wishlist.ts | 25 +++++++-- lib/bigcommerce/api/wishlist/index.ts | 33 +++++------- lib/bigcommerce/cart/use-add-item.tsx | 2 +- lib/bigcommerce/cart/use-cart.tsx | 10 ++-- lib/bigcommerce/schema.d.ts | 6 +++ lib/bigcommerce/wishlist/use-add-item.tsx | 25 ++++++--- lib/bigcommerce/wishlist/use-wishlist.tsx | 50 +++++++++++------- lib/commerce/cart/use-cart.tsx | 2 +- lib/commerce/wishlist/use-add-item.tsx | 5 ++ lib/commerce/wishlist/use-wishlist.tsx | 17 +++++++ pages/api/bigcommerce/wishlist.ts | 3 ++ 18 files changed, 250 insertions(+), 74 deletions(-) create mode 100644 lib/bigcommerce/api/operations/get-customer-id.ts create mode 100644 lib/bigcommerce/api/operations/get-customer-wishlist.ts create mode 100644 lib/commerce/wishlist/use-add-item.tsx create mode 100644 lib/commerce/wishlist/use-wishlist.tsx create mode 100644 pages/api/bigcommerce/wishlist.ts diff --git a/lib/bigcommerce/api/cart/handlers/add-item.ts b/lib/bigcommerce/api/cart/handlers/add-item.ts index f5475fb08..c37abeb63 100644 --- a/lib/bigcommerce/api/cart/handlers/add-item.ts +++ b/lib/bigcommerce/api/cart/handlers/add-item.ts @@ -1,4 +1,4 @@ -import parseItem from '../../utils/parse-item' +import { parseCartItem } from '../../utils/parse-item' import getCartCookie from '../../utils/get-cart-cookie' import type { CartHandlers } from '..' @@ -19,7 +19,7 @@ const addItem: CartHandlers['addItem'] = async ({ const options = { method: 'POST', body: JSON.stringify({ - line_items: [parseItem(item)], + line_items: [parseCartItem(item)], }), } const { data } = cartId diff --git a/lib/bigcommerce/api/cart/handlers/update-item.ts b/lib/bigcommerce/api/cart/handlers/update-item.ts index 0a9fcaca7..c64c111df 100644 --- a/lib/bigcommerce/api/cart/handlers/update-item.ts +++ b/lib/bigcommerce/api/cart/handlers/update-item.ts @@ -1,4 +1,4 @@ -import parseItem from '../../utils/parse-item' +import { parseCartItem } from '../../utils/parse-item' import getCartCookie from '../../utils/get-cart-cookie' import type { CartHandlers } from '..' @@ -20,7 +20,7 @@ const updateItem: CartHandlers['updateItem'] = async ({ { method: 'PUT', body: JSON.stringify({ - line_item: parseItem(item), + line_item: parseCartItem(item), }), } ) diff --git a/lib/bigcommerce/api/operations/get-all-pages.ts b/lib/bigcommerce/api/operations/get-all-pages.ts index 5aa5bde2d..9fe83f2a1 100644 --- a/lib/bigcommerce/api/operations/get-all-pages.ts +++ b/lib/bigcommerce/api/operations/get-all-pages.ts @@ -13,7 +13,7 @@ async function getAllPages(opts?: { preview?: boolean }): Promise -async function getAllPages(opts: { +async function getAllPages(opts: { url: string config?: BigcommerceConfig preview?: boolean diff --git a/lib/bigcommerce/api/operations/get-customer-id.ts b/lib/bigcommerce/api/operations/get-customer-id.ts new file mode 100644 index 000000000..6cabb3ff1 --- /dev/null +++ b/lib/bigcommerce/api/operations/get-customer-id.ts @@ -0,0 +1,34 @@ +import { GetCustomerIdQuery } from '@lib/bigcommerce/schema' +import { BigcommerceConfig, getConfig } from '..' + +export const getCustomerIdQuery = /* GraphQL */ ` + query getCustomerId { + customer { + entityId + } + } +` + +async function getCustomerId({ + customerToken, + config, +}: { + customerToken: string + config?: BigcommerceConfig +}): Promise { + config = getConfig(config) + + const { data } = await config.fetch( + getCustomerIdQuery, + undefined, + { + headers: { + cookie: `${config.customerCookie}=${customerToken}`, + }, + } + ) + + return data?.customer?.entityId +} + +export default getCustomerId diff --git a/lib/bigcommerce/api/operations/get-customer-wishlist.ts b/lib/bigcommerce/api/operations/get-customer-wishlist.ts new file mode 100644 index 000000000..dc5f1ced1 --- /dev/null +++ b/lib/bigcommerce/api/operations/get-customer-wishlist.ts @@ -0,0 +1,51 @@ +import type { RecursivePartial, RecursiveRequired } from '../utils/types' +import { BigcommerceConfig, getConfig } from '..' +import { definitions } from '../definitions/wishlist' + +export type Wishlist = definitions['wishlist_Full'] + +export type GetCustomerWishlistResult< + T extends { wishlist?: any } = { wishlist?: Wishlist } +> = T + +export type GetCustomerWishlistVariables = { + customerId: number +} + +async function getCustomerWishlist(opts: { + variables: GetCustomerWishlistVariables + config?: BigcommerceConfig + preview?: boolean +}): Promise + +async function getCustomerWishlist< + T extends { wishlist?: any }, + V = any +>(opts: { + url: string + variables: V + config?: BigcommerceConfig + preview?: boolean +}): Promise> + +async function getCustomerWishlist({ + config, + variables, +}: { + url?: string + variables: GetCustomerWishlistVariables + config?: BigcommerceConfig + preview?: boolean +}): Promise { + config = getConfig(config) + + const { data } = await config.storeApiFetch< + RecursivePartial<{ data: Wishlist[] }> + >(`/v3/wishlists/customer_id=${variables.customerId}`) + const wishlists = (data as RecursiveRequired) ?? [] + const wishlist = wishlists[0] + + return { wishlist } +} + +export default getCustomerWishlist diff --git a/lib/bigcommerce/api/utils/parse-item.ts b/lib/bigcommerce/api/utils/parse-item.ts index 02c27bea8..2a2c87dde 100644 --- a/lib/bigcommerce/api/utils/parse-item.ts +++ b/lib/bigcommerce/api/utils/parse-item.ts @@ -1,9 +1,13 @@ +import type { ItemBody as WishlistItemBody } from '../wishlist' import type { ItemBody } from '../cart' -const parseItem = (item: ItemBody) => ({ - quantity: item.quantity, +export const parseWishlistItem = (item: WishlistItemBody) => ({ product_id: item.productId, variant_id: item.variantId, }) -export default parseItem +export const parseCartItem = (item: ItemBody) => ({ + quantity: item.quantity, + product_id: item.productId, + variant_id: item.variantId, +}) diff --git a/lib/bigcommerce/api/wishlist/handlers/add-item.ts b/lib/bigcommerce/api/wishlist/handlers/add-item.ts index d6678031f..e8f708454 100644 --- a/lib/bigcommerce/api/wishlist/handlers/add-item.ts +++ b/lib/bigcommerce/api/wishlist/handlers/add-item.ts @@ -1,9 +1,12 @@ import type { WishlistHandlers } from '..' +import getCustomerId from '../../operations/get-customer-id' +import getCustomerWishlist from '../../operations/get-customer-wishlist' +import { parseWishlistItem } from '../../utils/parse-item' -// Return current wishlist info +// Returns the wishlist of the signed customer const addItem: WishlistHandlers['addItem'] = async ({ res, - body: { wishlistId, item }, + body: { customerToken, item }, config, }) => { if (!item) { @@ -13,16 +16,36 @@ const addItem: WishlistHandlers['addItem'] = async ({ }) } + const customerId = + customerToken && (await getCustomerId({ customerToken, config })) + + if (!customerId) { + return res.status(400).json({ + data: null, + errors: [{ message: 'Invalid request' }], + }) + } + + const { wishlist } = await getCustomerWishlist({ + variables: { customerId }, + config, + }) const options = { method: 'POST', - body: JSON.stringify({ - items: [item], - }), + body: JSON.stringify( + wishlist + ? { + items: [parseWishlistItem(item)], + } + : { + customer_id: customerId, + items: [parseWishlistItem(item)], + } + ), } - const { data } = await config.storeApiFetch( - `/v3/wishlists/${wishlistId}/items`, - options - ) + const { data } = wishlist + ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options) + : await config.storeApiFetch('/v3/wishlists', options) res.status(200).json({ data }) } diff --git a/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts b/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts index 5d0aa19c5..a77cf4467 100644 --- a/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts +++ b/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts @@ -1,17 +1,32 @@ +import getCustomerId from '../../operations/get-customer-id' import type { Wishlist, WishlistHandlers } from '..' +import getCustomerWishlist from '../../operations/get-customer-wishlist' // Return wishlist info const getWishlist: WishlistHandlers['getWishlist'] = async ({ res, - body: { wishlistId }, + body: { customerToken }, config, }) => { let result: { data?: Wishlist } = {} - try { - result = await config.storeApiFetch(`/v3/wishlists/${wishlistId}`) - } catch (error) { - throw error + if (customerToken) { + const customerId = + customerToken && (await getCustomerId({ customerToken, config })) + + if (!customerId) { + // If the customerToken is invalid, then this request is too + return res.status(404).json({ + data: null, + errors: [{ message: 'Wishlist not found' }], + }) + } + + const { wishlist } = await getCustomerWishlist({ + variables: { customerId }, + config, + }) + result = { data: wishlist } } res.status(200).json({ data: result.data ?? null }) diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts index 3bcba106b..f95c893d7 100644 --- a/lib/bigcommerce/api/wishlist/index.ts +++ b/lib/bigcommerce/api/wishlist/index.ts @@ -11,15 +11,16 @@ import removeItem from './handlers/remove-item' import updateWishlist from './handlers/update-wishlist' import removeWishlist from './handlers/remove-wishlist' import addWishlist from './handlers/add-wishlist' +import { definitions } from '../definitions/wishlist' type Body = Partial | undefined export type ItemBody = { - product_id: number - variant_id: number + productId: number + variantId: number } -export type AddItemBody = { wishlistId: string; item: ItemBody } +export type AddItemBody = { item: ItemBody } export type RemoveItemBody = { wishlistId: string; itemId: string } @@ -32,21 +33,11 @@ export type WishlistBody = { export type AddWishlistBody = { wishlist: WishlistBody } -// TODO: this type should match: -// https://developer.bigcommerce.com/api-reference/store-management/wishlists/wishlists/wishlistsbyidget -export type Wishlist = { - id: string - customer_id: number - name: string - is_public: boolean - token: string - items: any[] - // TODO: add missing fields -} +export type Wishlist = definitions['wishlist_Full'] export type WishlistHandlers = { getAllWishlists: BigcommerceHandler - getWishlist: BigcommerceHandler + getWishlist: BigcommerceHandler addWishlist: BigcommerceHandler< Wishlist, { wishlistId: string } & Body @@ -57,7 +48,7 @@ export type WishlistHandlers = { > addItem: BigcommerceHandler< Wishlist, - { wishlistId: string } & Body + { customerToken?: string } & Body > removeItem: BigcommerceHandler< Wishlist, @@ -77,17 +68,21 @@ const wishlistApi: BigcommerceApiHandler = async ( ) => { if (!isAllowedMethod(req, res, METHODS)) return + const { cookies } = req + const customerToken = cookies[config.customerCookie] + try { const { wishlistId, itemId, customerId } = req.body + // Return current wishlist info if (req.method === 'GET' && wishlistId) { - const body = { wishlistId: wishlistId as string } + const body = { customerToken } return await handlers['getWishlist']({ req, res, config, body }) } // Add an item to the wishlist - if (req.method === 'POST' && wishlistId) { - const body = { ...req.body, wishlistId } + if (req.method === 'POST') { + const body = { ...req.body, customerToken } return await handlers['addItem']({ req, res, config, body }) } diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx index 36fbec7d2..19caca508 100644 --- a/lib/bigcommerce/cart/use-add-item.tsx +++ b/lib/bigcommerce/cart/use-add-item.tsx @@ -36,7 +36,7 @@ export const fetcher: HookFetcher = ( export function extendHook(customFetcher: typeof fetcher) { const useAddItem = () => { const { mutate } = useCart() - const fn = useCartAddItem(defaultOpts, customFetcher) + const fn = useCartAddItem(defaultOpts, customFetcher) return useCallback( async function addItem(input: AddItemInput) { diff --git a/lib/bigcommerce/cart/use-cart.tsx b/lib/bigcommerce/cart/use-cart.tsx index ce0800ca3..b12362d5c 100644 --- a/lib/bigcommerce/cart/use-cart.tsx +++ b/lib/bigcommerce/cart/use-cart.tsx @@ -23,23 +23,23 @@ export function extendHook( swrOptions?: SwrOptions ) { const useCart = () => { - const cart = useCommerceCart(defaultOpts, [], customFetcher, { + const response = useCommerceCart(defaultOpts, [], customFetcher, { revalidateOnFocus: false, ...swrOptions, }) // Uses a getter to only calculate the prop when required - // cart.data is also a getter and it's better to not trigger it early - Object.defineProperty(cart, 'isEmpty', { + // response.data is also a getter and it's better to not trigger it early + Object.defineProperty(response, 'isEmpty', { get() { - return Object.values(cart.data?.line_items ?? {}).every( + return Object.values(response.data?.line_items ?? {}).every( (items) => !items.length ) }, set: (x) => x, }) - return cart + return response } useCart.extend = extendHook diff --git a/lib/bigcommerce/schema.d.ts b/lib/bigcommerce/schema.d.ts index 69cff1ea6..aaafbe312 100644 --- a/lib/bigcommerce/schema.d.ts +++ b/lib/bigcommerce/schema.d.ts @@ -1886,6 +1886,12 @@ export type GetAllProductsQuery = { __typename?: 'Query' } & { } } +export type GetCustomerIdQueryVariables = Exact<{ [key: string]: never }> + +export type GetCustomerIdQuery = { __typename?: 'Query' } & { + customer?: Maybe<{ __typename?: 'Customer' } & Pick> +} + export type GetProductQueryVariables = Exact<{ hasLocale?: Maybe locale?: Maybe diff --git a/lib/bigcommerce/wishlist/use-add-item.tsx b/lib/bigcommerce/wishlist/use-add-item.tsx index 9bbbe009e..60ea09c7f 100644 --- a/lib/bigcommerce/wishlist/use-add-item.tsx +++ b/lib/bigcommerce/wishlist/use-add-item.tsx @@ -1,7 +1,9 @@ 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 useWishlistAddItem from '@lib/commerce/wishlist/use-add-item' import type { ItemBody, AddItemBody } from '../api/wishlist' +import useCustomer from '../use-customer' import useWishlist, { Wishlist } from './use-wishlist' const defaultOpts = { @@ -13,24 +15,33 @@ export type AddItemInput = ItemBody export const fetcher: HookFetcher = ( options, - { wishlistId, item }, + { item }, fetch ) => { + // TODO: add validations before doing the fetch return fetch({ ...defaultOpts, ...options, - body: { wishlistId, item }, + body: { item }, }) } export function extendHook(customFetcher: typeof fetcher) { - const useAddItem = (wishlistId: string) => { - const { mutate } = useWishlist(wishlistId) - const fn = useAction(defaultOpts, customFetcher) + const useAddItem = () => { + const { data: customer } = useCustomer() + const { mutate } = useWishlist() + const fn = useWishlistAddItem(defaultOpts, customFetcher) return useCallback( async function addItem(input: AddItemInput) { - const data = await fn({ wishlistId, item: input }) + 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({ item: input }) await mutate(data, false) return data }, diff --git a/lib/bigcommerce/wishlist/use-wishlist.tsx b/lib/bigcommerce/wishlist/use-wishlist.tsx index d60660c05..438901de0 100644 --- a/lib/bigcommerce/wishlist/use-wishlist.tsx +++ b/lib/bigcommerce/wishlist/use-wishlist.tsx @@ -1,36 +1,48 @@ import { HookFetcher } from '@lib/commerce/utils/types' -import useData from '@lib/commerce/utils/use-data' +import { SwrOptions } from '@lib/commerce/utils/use-data' +import useCommerceWishlist from '@lib/commerce/wishlist/use-wishlist' import type { Wishlist } from '../api/wishlist' +import useCustomer from '../use-customer' const defaultOpts = { - url: '/api/bigcommerce/wishlists', + url: '/api/bigcommerce/wishlist', method: 'GET', } export type { Wishlist } -export type WishlistInput = { - wishlistId: string | undefined -} - -export const fetcher: HookFetcher = ( +export const fetcher: HookFetcher = ( options, - { wishlistId }, + { customerId }, fetch ) => { - return fetch({ - ...defaultOpts, - ...options, - body: { wishlistId }, - }) + return customerId ? fetch({ ...defaultOpts, ...options }) : null } -export function extendHook(customFetcher: typeof fetcher) { - const useWishlists = (wishlistId: string) => { - const fetchFn: typeof fetcher = (options, input, fetch) => { - return customFetcher(options, input, fetch) - } - const response = useData(defaultOpts, [['wishlistId', wishlistId]], fetchFn) +export function extendHook( + customFetcher: typeof fetcher, + swrOptions?: SwrOptions +) { + const useWishlists = () => { + const { data: customer } = useCustomer() + const response = useCommerceWishlist( + defaultOpts, + [['customerId', customer?.entityId]], + customFetcher, + { + revalidateOnFocus: false, + ...swrOptions, + } + ) + + // Uses a getter to only calculate the prop when required + // 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 + }, + set: (x) => x, + }) return response } diff --git a/lib/commerce/cart/use-cart.tsx b/lib/commerce/cart/use-cart.tsx index 6649b20d0..8aefc3e68 100644 --- a/lib/commerce/cart/use-cart.tsx +++ b/lib/commerce/cart/use-cart.tsx @@ -4,7 +4,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types' import useData, { SwrOptions } from '../utils/use-data' import { useCommerce } from '..' -export type CartResponse = responseInterface & { +export type CartResponse = responseInterface & { isEmpty: boolean } diff --git a/lib/commerce/wishlist/use-add-item.tsx b/lib/commerce/wishlist/use-add-item.tsx new file mode 100644 index 000000000..f6c069f2b --- /dev/null +++ b/lib/commerce/wishlist/use-add-item.tsx @@ -0,0 +1,5 @@ +import useAction from '../utils/use-action' + +const useAddItem = useAction + +export default useAddItem diff --git a/lib/commerce/wishlist/use-wishlist.tsx b/lib/commerce/wishlist/use-wishlist.tsx new file mode 100644 index 000000000..7b2981412 --- /dev/null +++ b/lib/commerce/wishlist/use-wishlist.tsx @@ -0,0 +1,17 @@ +import type { responseInterface } from 'swr' +import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types' +import useData, { SwrOptions } from '../utils/use-data' + +export type WishlistResponse = responseInterface & { + isEmpty: boolean +} + +export default function useWishlist( + options: HookFetcherOptions, + input: HookInput, + fetcherFn: HookFetcher, + swrOptions?: SwrOptions +) { + const response = useData(options, input, fetcherFn, swrOptions) + return Object.assign(response, { isEmpty: true }) as WishlistResponse +} diff --git a/pages/api/bigcommerce/wishlist.ts b/pages/api/bigcommerce/wishlist.ts new file mode 100644 index 000000000..cfc3e00d0 --- /dev/null +++ b/pages/api/bigcommerce/wishlist.ts @@ -0,0 +1,3 @@ +import wishlistApi from '@lib/bigcommerce/api/wishlist' + +export default wishlistApi() From 58385dc491da2621dab917551ecba89c8f69f1b6 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 18:28:09 -0300 Subject: [PATCH 02/12] improve the grid on mobile a bit --- components/product/ProductSlider/ProductSlider.module.css | 3 ++- pages/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index c07228d0b..5ad48cc3d 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -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%); } } diff --git a/pages/index.tsx b/pages/index.tsx index 44a93c1d7..9f374253b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -129,9 +129,9 @@ export default function Home({ /> ))} -
-
-
+
+
+
  • From c2954d8e88c3f3af7a272c4dc525f83ae600e3f6 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 17:11:51 -0500 Subject: [PATCH 03/12] Use password and email types for inputs --- components/auth/LoginView.tsx | 4 ++-- components/auth/SignUpView.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx index b9cb4cb63..f41a128f5 100644 --- a/components/auth/LoginView.tsx +++ b/components/auth/LoginView.tsx @@ -70,8 +70,8 @@ const LoginView: FC = () => {
)} - - + +
-
- -
+
[0] +} & React.ButtonHTMLAttributes + +const WishlistButton: FC = ({ + productId, + variant, + className, + ...props +}) => { + const addItem = useAddItem() + const { data } = useWishlist() + const { data: customer } = useCustomer() + const [loading, setLoading] = useState(false) + const { openModal, setModalView } = useUI() + const isInWishlist = data?.items?.some( + (item) => + item.product_id === productId && + item.variant_id === variant?.node.entityId + ) + + const addToWishlist = async (e: any) => { + e.preventDefault() + setLoading(true) + + // A login is required before adding an item to the wishlist + if (!customer) { + setModalView('LOGIN_VIEW') + return openModal() + } + + try { + await addItem({ + productId, + variantId: variant?.node.entityId!, + }) + + setLoading(false) + } catch (err) { + setLoading(false) + } + } + + return ( + + ) +} + +export default WishlistButton diff --git a/components/wishlist/WishlistButton/index.ts b/components/wishlist/WishlistButton/index.ts new file mode 100644 index 000000000..66e88074b --- /dev/null +++ b/components/wishlist/WishlistButton/index.ts @@ -0,0 +1 @@ +export { default } from './WishlistButton' diff --git a/lib/bigcommerce/api/operations/get-customer-wishlist.ts b/lib/bigcommerce/api/operations/get-customer-wishlist.ts index dc5f1ced1..093b136f1 100644 --- a/lib/bigcommerce/api/operations/get-customer-wishlist.ts +++ b/lib/bigcommerce/api/operations/get-customer-wishlist.ts @@ -41,7 +41,7 @@ async function getCustomerWishlist({ const { data } = await config.storeApiFetch< RecursivePartial<{ data: Wishlist[] }> - >(`/v3/wishlists/customer_id=${variables.customerId}`) + >(`/v3/wishlists?customer_id=${variables.customerId}`) const wishlists = (data as RecursiveRequired) ?? [] const wishlist = wishlists[0] diff --git a/lib/bigcommerce/api/wishlist/handlers/add-item.ts b/lib/bigcommerce/api/wishlist/handlers/add-item.ts index e8f708454..a02ef4434 100644 --- a/lib/bigcommerce/api/wishlist/handlers/add-item.ts +++ b/lib/bigcommerce/api/wishlist/handlers/add-item.ts @@ -38,11 +38,14 @@ const addItem: WishlistHandlers['addItem'] = async ({ items: [parseWishlistItem(item)], } : { + name: 'Wishlist', customer_id: customerId, items: [parseWishlistItem(item)], + is_public: false, } ), } + const { data } = wishlist ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options) : await config.storeApiFetch('/v3/wishlists', options) diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts index f95c893d7..13cbf60f7 100644 --- a/lib/bigcommerce/api/wishlist/index.ts +++ b/lib/bigcommerce/api/wishlist/index.ts @@ -75,7 +75,7 @@ const wishlistApi: BigcommerceApiHandler = async ( const { wishlistId, itemId, customerId } = req.body // Return current wishlist info - if (req.method === 'GET' && wishlistId) { + if (req.method === 'GET') { const body = { customerToken } return await handlers['getWishlist']({ req, res, config, body }) } From 2cd41ee135191a3081e588e63f240a77b82d1abb Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 17:25:15 -0500 Subject: [PATCH 05/12] Temporal fix for types --- lib/bigcommerce/wishlist/use-remove-item.tsx | 2 +- lib/bigcommerce/wishlist/use-wishlist-actions.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/bigcommerce/wishlist/use-remove-item.tsx b/lib/bigcommerce/wishlist/use-remove-item.tsx index 05f9744cb..cd4e7ddeb 100644 --- a/lib/bigcommerce/wishlist/use-remove-item.tsx +++ b/lib/bigcommerce/wishlist/use-remove-item.tsx @@ -27,7 +27,7 @@ export const fetcher: HookFetcher = ( export function extendHook(customFetcher: typeof fetcher) { const useRemoveItem = (wishlistId: string, item?: any) => { - const { mutate } = useWishlist(wishlistId) + const { mutate } = useWishlist() const fn = useAction( defaultOpts, customFetcher diff --git a/lib/bigcommerce/wishlist/use-wishlist-actions.tsx b/lib/bigcommerce/wishlist/use-wishlist-actions.tsx index 7301994b0..ca6d05f0e 100644 --- a/lib/bigcommerce/wishlist/use-wishlist-actions.tsx +++ b/lib/bigcommerce/wishlist/use-wishlist-actions.tsx @@ -3,9 +3,9 @@ import useRemoveItem from './use-remove-item' // This hook is probably not going to be used, but it's here // to show how a commerce should be structuring it -export default function useWishlistActions(wishlistId: string) { - const addItem = useAddItem(wishlistId) - const removeItem = useRemoveItem(wishlistId) +export default function useWishlistActions() { + const addItem = useAddItem() + const removeItem = useRemoveItem('') return { addItem, removeItem } } From 411c6b8d230ad2a0f09da0e2682011b79a5b601a Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Mon, 26 Oct 2020 20:02:29 -0300 Subject: [PATCH 06/12] componentize the homepage grid --- .../HomeAllProductsGrid.module.css | 23 +++++++ .../HomeAllProductsGrid.tsx | 66 +++++++++++++++++++ components/core/HomeAllProductsGrid/index.ts | 1 + pages/index.tsx | 55 ++-------------- 4 files changed, 96 insertions(+), 49 deletions(-) create mode 100644 components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css create mode 100644 components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx create mode 100644 components/core/HomeAllProductsGrid/index.ts diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css new file mode 100644 index 000000000..464087ebc --- /dev/null +++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css @@ -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; + } +} diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx new file mode 100644 index 000000000..fc58486cd --- /dev/null +++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx @@ -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 = ({ categories, brands, newestProducts }) => { + return ( +
+
+
+ + +
+
+
+ + {newestProducts.map(({ node }: any) => ( + + ))} + +
+
+ ) +} + +export default Head diff --git a/components/core/HomeAllProductsGrid/index.ts b/components/core/HomeAllProductsGrid/index.ts new file mode 100644 index 000000000..31d313d16 --- /dev/null +++ b/components/core/HomeAllProductsGrid/index.ts @@ -0,0 +1 @@ +export { default } from './HomeAllProductsGrid' diff --git a/pages/index.tsx b/pages/index.tsx index 64443f536..48777bea5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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({ /> ))} -
-
-
- - -
-
-
- - {newestProducts.map(({ node }) => ( - - ))} - -
-
+
) } From 0f4f061cbde5dd54ad6a7f122e9eaeaa41f7ac67 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 18:25:35 -0500 Subject: [PATCH 07/12] Added useRemoveItem and other fixes --- .../WishlistButton/WishlistButton.tsx | 27 ++++++++++++------ lib/bigcommerce/api/utils/fetch-store-api.ts | 2 +- .../api/wishlist/handlers/remove-item.ts | 22 ++++++++++++--- lib/bigcommerce/api/wishlist/index.ts | 11 +++----- lib/bigcommerce/cart/use-remove-item.tsx | 4 +-- lib/bigcommerce/wishlist/use-add-item.tsx | 2 +- lib/bigcommerce/wishlist/use-remove-item.tsx | 28 +++++++++++++------ lib/commerce/wishlist/use-remove-item.tsx | 5 ++++ 8 files changed, 68 insertions(+), 33 deletions(-) create mode 100644 lib/commerce/wishlist/use-remove-item.tsx diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx index ef19c4dd4..5831df6d4 100644 --- a/components/wishlist/WishlistButton/WishlistButton.tsx +++ b/components/wishlist/WishlistButton/WishlistButton.tsx @@ -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 }) => { 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 = ({ 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 = ({ ) } diff --git a/lib/bigcommerce/api/utils/fetch-store-api.ts b/lib/bigcommerce/api/utils/fetch-store-api.ts index 22b3e5a99..7e59b9f06 100644 --- a/lib/bigcommerce/api/utils/fetch-store-api.ts +++ b/lib/bigcommerce/api/utils/fetch-store-api.ts @@ -41,7 +41,7 @@ export default async function fetchStoreApi( 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 diff --git a/lib/bigcommerce/api/wishlist/handlers/remove-item.ts b/lib/bigcommerce/api/wishlist/handlers/remove-item.ts index 9be970f11..29b6eff60 100644 --- a/lib/bigcommerce/api/wishlist/handlers/remove-item.ts +++ b/lib/bigcommerce/api/wishlist/handlers/remove-item.ts @@ -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 diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts index 13cbf60f7..e9ae8c688 100644 --- a/lib/bigcommerce/api/wishlist/index.ts +++ b/lib/bigcommerce/api/wishlist/index.ts @@ -22,7 +22,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 @@ -52,7 +52,7 @@ export type WishlistHandlers = { > removeItem: BigcommerceHandler< Wishlist, - { wishlistId: string } & Body + { customerToken?: string } & Body > removeWishlist: BigcommerceHandler } @@ -93,11 +93,8 @@ const wishlistApi: BigcommerceApiHandler = 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 }) } diff --git a/lib/bigcommerce/cart/use-remove-item.tsx b/lib/bigcommerce/cart/use-remove-item.tsx index c07aa718e..81897c42a 100644 --- a/lib/bigcommerce/cart/use-remove-item.tsx +++ b/lib/bigcommerce/cart/use-remove-item.tsx @@ -26,7 +26,7 @@ export const fetcher: HookFetcher = ( } export function extendHook(customFetcher: typeof fetcher) { - const useRemoveItem = (item?: any) => { + const useRemoveItem = () => { const { mutate } = useCart() const fn = useCartRemoveItem( 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 }, diff --git a/lib/bigcommerce/wishlist/use-add-item.tsx b/lib/bigcommerce/wishlist/use-add-item.tsx index 60ea09c7f..0545a3607 100644 --- a/lib/bigcommerce/wishlist/use-add-item.tsx +++ b/lib/bigcommerce/wishlist/use-add-item.tsx @@ -45,7 +45,7 @@ export function extendHook(customFetcher: typeof fetcher) { await mutate(data, false) return data }, - [fn, mutate] + [fn, mutate, customer] ) } diff --git a/lib/bigcommerce/wishlist/use-remove-item.tsx b/lib/bigcommerce/wishlist/use-remove-item.tsx index cd4e7ddeb..c7d75f782 100644 --- a/lib/bigcommerce/wishlist/use-remove-item.tsx +++ b/lib/bigcommerce/wishlist/use-remove-item.tsx @@ -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 = ( 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( + const fn = useWishlistRemoveItem( 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] ) } diff --git a/lib/commerce/wishlist/use-remove-item.tsx b/lib/commerce/wishlist/use-remove-item.tsx new file mode 100644 index 000000000..dfa60c363 --- /dev/null +++ b/lib/commerce/wishlist/use-remove-item.tsx @@ -0,0 +1,5 @@ +import useAction from '../utils/use-action' + +const useRemoveItem = useAction + +export default useRemoveItem From 0ec552c2b86faaa02675196db3877674fdd3cdf3 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 18:26:40 -0500 Subject: [PATCH 08/12] Removed Body type --- lib/bigcommerce/api/cart/index.ts | 8 +++----- lib/bigcommerce/api/wishlist/index.ts | 10 ++++------ 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/lib/bigcommerce/api/cart/index.ts b/lib/bigcommerce/api/cart/index.ts index 4f6062674..c8a4913d6 100644 --- a/lib/bigcommerce/api/cart/index.ts +++ b/lib/bigcommerce/api/cart/index.ts @@ -9,8 +9,6 @@ import addItem from './handlers/add-item' import updateItem from './handlers/update-item' import removeItem from './handlers/remove-item' -type Body = Partial | undefined - export type ItemBody = { productId: number variantId: number @@ -46,14 +44,14 @@ export type Cart = { export type CartHandlers = { getCart: BigcommerceHandler - addItem: BigcommerceHandler> + addItem: BigcommerceHandler> updateItem: BigcommerceHandler< Cart, - { cartId?: string } & Body + { cartId?: string } & Partial > removeItem: BigcommerceHandler< Cart, - { cartId?: string } & Body + { cartId?: string } & Partial > } diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts index e9ae8c688..d4fe8472d 100644 --- a/lib/bigcommerce/api/wishlist/index.ts +++ b/lib/bigcommerce/api/wishlist/index.ts @@ -13,8 +13,6 @@ import removeWishlist from './handlers/remove-wishlist' import addWishlist from './handlers/add-wishlist' import { definitions } from '../definitions/wishlist' -type Body = Partial | undefined - export type ItemBody = { productId: number variantId: number @@ -40,19 +38,19 @@ export type WishlistHandlers = { getWishlist: BigcommerceHandler addWishlist: BigcommerceHandler< Wishlist, - { wishlistId: string } & Body + { wishlistId: string } & Partial > updateWishlist: BigcommerceHandler< Wishlist, - { wishlistId: string } & Body + { wishlistId: string } & Partial > addItem: BigcommerceHandler< Wishlist, - { customerToken?: string } & Body + { customerToken?: string } & Partial > removeItem: BigcommerceHandler< Wishlist, - { customerToken?: string } & Body + { customerToken?: string } & Partial > removeWishlist: BigcommerceHandler } From 364ef332c138f94a5004924185c8d25e4ae70909 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 18:46:38 -0500 Subject: [PATCH 09/12] Bug fixes --- components/product/ProductCard/ProductCard.module.css | 2 +- components/product/ProductCard/ProductCard.tsx | 2 +- components/wishlist/WishlistButton/WishlistButton.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 171190df0..e46f6ba5c 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -119,7 +119,7 @@ } .wishlistButton { - @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; + @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer z-10; } .imageContainer { diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index d48c5b4cf..4323977f3 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -52,7 +52,7 @@ const ProductCard: FC = ({ } return ( - + diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx index 5831df6d4..e9d6236f0 100644 --- a/components/wishlist/WishlistButton/WishlistButton.tsx +++ b/components/wishlist/WishlistButton/WishlistButton.tsx @@ -66,7 +66,7 @@ const WishlistButton: FC = ({ className={cn({ 'opacity-50': loading }, className)} onClick={handleWishlistChange} > - + ) } From be03b6eae0cda0b650fb7112c55b1bdf408c51cf Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 19:02:23 -0500 Subject: [PATCH 10/12] Only include required operations for the wishlist API --- lib/bigcommerce/api/wishlist/index.ts | 51 +-------------------------- 1 file changed, 1 insertion(+), 50 deletions(-) diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts index d4fe8472d..79f0a9c1a 100644 --- a/lib/bigcommerce/api/wishlist/index.ts +++ b/lib/bigcommerce/api/wishlist/index.ts @@ -5,12 +5,8 @@ import createApiHandler, { } from '../utils/create-api-handler' import { BigcommerceApiError } from '../utils/errors' import getWishlist from './handlers/get-wishlist' -import getAllWishlists from './handlers/get-all-wishlists' import addItem from './handlers/add-item' import removeItem from './handlers/remove-item' -import updateWishlist from './handlers/update-wishlist' -import removeWishlist from './handlers/remove-wishlist' -import addWishlist from './handlers/add-wishlist' import { definitions } from '../definitions/wishlist' export type ItemBody = { @@ -34,16 +30,7 @@ export type AddWishlistBody = { wishlist: WishlistBody } export type Wishlist = definitions['wishlist_Full'] export type WishlistHandlers = { - getAllWishlists: BigcommerceHandler getWishlist: BigcommerceHandler - addWishlist: BigcommerceHandler< - Wishlist, - { wishlistId: string } & Partial - > - updateWishlist: BigcommerceHandler< - Wishlist, - { wishlistId: string } & Partial - > addItem: BigcommerceHandler< Wishlist, { customerToken?: string } & Partial @@ -52,10 +39,9 @@ export type WishlistHandlers = { Wishlist, { customerToken?: string } & Partial > - removeWishlist: BigcommerceHandler } -const METHODS = ['GET', 'POST', 'PUT', 'DELETE'] +const METHODS = ['GET', 'POST', 'DELETE'] // TODO: a complete implementation should have schema validation for `req.body` const wishlistApi: BigcommerceApiHandler = async ( @@ -70,8 +56,6 @@ const wishlistApi: BigcommerceApiHandler = async ( const customerToken = cookies[config.customerCookie] try { - const { wishlistId, itemId, customerId } = req.body - // Return current wishlist info if (req.method === 'GET') { const body = { customerToken } @@ -84,40 +68,11 @@ const wishlistApi: BigcommerceApiHandler = async ( return await handlers['addItem']({ req, res, config, body }) } - // Update a wishlist - if (req.method === 'PUT' && wishlistId) { - const body = { ...req.body, wishlistId } - return await handlers['updateWishlist']({ req, res, config, body }) - } - // Remove an item from the wishlist if (req.method === 'DELETE') { const body = { ...req.body, customerToken } return await handlers['removeItem']({ req, res, config, body }) } - - // Remove the wishlist - if (req.method === 'DELETE' && wishlistId && !itemId) { - const body = { wishlistId: wishlistId as string } - return await handlers['removeWishlist']({ req, res, config, body }) - } - - // Get all the wishlists - if (req.method === 'GET' && !wishlistId) { - const body = { customerId: customerId as string } - return await handlers['getAllWishlists']({ - req, - res: res as any, - config, - body, - }) - } - - // Create a wishlist - if (req.method === 'POST' && !wishlistId) { - const { body } = req - return await handlers['addWishlist']({ req, res, config, body }) - } } catch (error) { console.error(error) @@ -133,11 +88,7 @@ const wishlistApi: BigcommerceApiHandler = async ( export const handlers = { getWishlist, addItem, - updateWishlist, removeItem, - removeWishlist, - getAllWishlists, - addWishlist, } export default createApiHandler(wishlistApi, handlers, {}) From 008c80766ae20e34843a9d63fcf348e801be361b Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 26 Oct 2020 19:04:51 -0500 Subject: [PATCH 11/12] Fixed type --- lib/bigcommerce/wishlist/use-wishlist-actions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/bigcommerce/wishlist/use-wishlist-actions.tsx b/lib/bigcommerce/wishlist/use-wishlist-actions.tsx index ca6d05f0e..711d00516 100644 --- a/lib/bigcommerce/wishlist/use-wishlist-actions.tsx +++ b/lib/bigcommerce/wishlist/use-wishlist-actions.tsx @@ -5,7 +5,7 @@ import useRemoveItem from './use-remove-item' // to show how a commerce should be structuring it export default function useWishlistActions() { const addItem = useAddItem() - const removeItem = useRemoveItem('') + const removeItem = useRemoveItem() return { addItem, removeItem } } From 200f148488cf842d8c95aaf5e42085ca187ba187 Mon Sep 17 00:00:00 2001 From: luc Date: Tue, 27 Oct 2020 01:04:51 +0100 Subject: [PATCH 12/12] use relative paths in lib folder --- .../api/customers/handlers/get-logged-in-customer.ts | 2 +- lib/bigcommerce/api/customers/handlers/login.ts | 2 +- lib/bigcommerce/api/index.ts | 2 +- lib/bigcommerce/api/operations/get-all-product-paths.ts | 2 +- lib/bigcommerce/api/operations/get-all-products.ts | 2 +- lib/bigcommerce/api/operations/get-customer-id.ts | 2 +- lib/bigcommerce/api/operations/get-product.ts | 5 +---- lib/bigcommerce/api/operations/get-site-info.ts | 5 +---- lib/bigcommerce/api/operations/login.ts | 5 +---- lib/bigcommerce/api/utils/fetch-graphql-api.ts | 5 ++--- lib/bigcommerce/cart/use-add-item.tsx | 6 +++--- lib/bigcommerce/cart/use-cart.tsx | 6 +++--- lib/bigcommerce/cart/use-remove-item.tsx | 4 ++-- lib/bigcommerce/cart/use-update-item.tsx | 6 +++--- lib/bigcommerce/index.tsx | 4 ++-- lib/bigcommerce/products/use-search.tsx | 6 +++--- lib/bigcommerce/use-customer.tsx | 6 +++--- lib/bigcommerce/use-login.tsx | 6 +++--- lib/bigcommerce/use-logout.tsx | 4 ++-- lib/bigcommerce/use-signup.tsx | 6 +++--- lib/bigcommerce/wishlist/use-add-item.tsx | 6 +++--- lib/bigcommerce/wishlist/use-remove-item.tsx | 6 +++--- lib/bigcommerce/wishlist/use-wishlist.tsx | 6 +++--- 23 files changed, 47 insertions(+), 57 deletions(-) diff --git a/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts b/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts index b86a8a01a..698235dda 100644 --- a/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts +++ b/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts @@ -1,4 +1,4 @@ -import type { GetLoggedInCustomerQuery } from '@lib/bigcommerce/schema' +import type { GetLoggedInCustomerQuery } from '../../../schema' import type { CustomersHandlers } from '..' export const getLoggedInCustomerQuery = /* GraphQL */ ` diff --git a/lib/bigcommerce/api/customers/handlers/login.ts b/lib/bigcommerce/api/customers/handlers/login.ts index e744acc31..d280a88d8 100644 --- a/lib/bigcommerce/api/customers/handlers/login.ts +++ b/lib/bigcommerce/api/customers/handlers/login.ts @@ -1,4 +1,4 @@ -import { FetcherError } from '@lib/commerce/utils/errors' +import { FetcherError } from '../../../../commerce/utils/errors' import login from '../../operations/login' import type { LoginHandlers } from '../login' diff --git a/lib/bigcommerce/api/index.ts b/lib/bigcommerce/api/index.ts index 78118b432..78215d4d6 100644 --- a/lib/bigcommerce/api/index.ts +++ b/lib/bigcommerce/api/index.ts @@ -1,5 +1,5 @@ import type { RequestInit } from '@vercel/fetch' -import type { CommerceAPIConfig } from 'lib/commerce/api' +import type { CommerceAPIConfig } from '../../commerce/api' import fetchGraphqlApi from './utils/fetch-graphql-api' import fetchStoreApi from './utils/fetch-store-api' diff --git a/lib/bigcommerce/api/operations/get-all-product-paths.ts b/lib/bigcommerce/api/operations/get-all-product-paths.ts index 9aea42126..71522be35 100644 --- a/lib/bigcommerce/api/operations/get-all-product-paths.ts +++ b/lib/bigcommerce/api/operations/get-all-product-paths.ts @@ -1,7 +1,7 @@ import type { GetAllProductPathsQuery, GetAllProductPathsQueryVariables, -} from 'lib/bigcommerce/schema' +} from '../../schema' import type { RecursivePartial, RecursiveRequired } from '../utils/types' import filterEdges from '../utils/filter-edges' import { BigcommerceConfig, getConfig } from '..' diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts index dbd439d9e..f67d62831 100644 --- a/lib/bigcommerce/api/operations/get-all-products.ts +++ b/lib/bigcommerce/api/operations/get-all-products.ts @@ -1,7 +1,7 @@ import type { GetAllProductsQuery, GetAllProductsQueryVariables, -} from '@lib/bigcommerce/schema' +} from '../../schema' import type { RecursivePartial, RecursiveRequired } from '../utils/types' import filterEdges from '../utils/filter-edges' import setProductLocaleMeta from '../utils/set-product-locale-meta' diff --git a/lib/bigcommerce/api/operations/get-customer-id.ts b/lib/bigcommerce/api/operations/get-customer-id.ts index 6cabb3ff1..7fe84093e 100644 --- a/lib/bigcommerce/api/operations/get-customer-id.ts +++ b/lib/bigcommerce/api/operations/get-customer-id.ts @@ -1,4 +1,4 @@ -import { GetCustomerIdQuery } from '@lib/bigcommerce/schema' +import { GetCustomerIdQuery } from '../../schema' import { BigcommerceConfig, getConfig } from '..' export const getCustomerIdQuery = /* GraphQL */ ` diff --git a/lib/bigcommerce/api/operations/get-product.ts b/lib/bigcommerce/api/operations/get-product.ts index 229d402bc..5071f68ec 100644 --- a/lib/bigcommerce/api/operations/get-product.ts +++ b/lib/bigcommerce/api/operations/get-product.ts @@ -1,7 +1,4 @@ -import type { - GetProductQuery, - GetProductQueryVariables, -} from 'lib/bigcommerce/schema' +import type { GetProductQuery, GetProductQueryVariables } from '../../schema' import type { RecursivePartial, RecursiveRequired } from '../utils/types' import setProductLocaleMeta from '../utils/set-product-locale-meta' import { productInfoFragment } from '../fragments/product' diff --git a/lib/bigcommerce/api/operations/get-site-info.ts b/lib/bigcommerce/api/operations/get-site-info.ts index cc9063b07..0a6e84f0f 100644 --- a/lib/bigcommerce/api/operations/get-site-info.ts +++ b/lib/bigcommerce/api/operations/get-site-info.ts @@ -1,7 +1,4 @@ -import type { - GetSiteInfoQuery, - GetSiteInfoQueryVariables, -} from 'lib/bigcommerce/schema' +import type { GetSiteInfoQuery, GetSiteInfoQueryVariables } from '../../schema' import type { RecursivePartial, RecursiveRequired } from '../utils/types' import filterEdges from '../utils/filter-edges' import { BigcommerceConfig, getConfig } from '..' diff --git a/lib/bigcommerce/api/operations/login.ts b/lib/bigcommerce/api/operations/login.ts index 04faba0fe..e16502af0 100644 --- a/lib/bigcommerce/api/operations/login.ts +++ b/lib/bigcommerce/api/operations/login.ts @@ -1,8 +1,5 @@ import type { ServerResponse } from 'http' -import type { - LoginMutation, - LoginMutationVariables, -} from 'lib/bigcommerce/schema' +import type { LoginMutation, LoginMutationVariables } from '../../schema' import type { RecursivePartial } from '../utils/types' import concatHeader from '../utils/concat-cookie' import { BigcommerceConfig, getConfig } from '..' diff --git a/lib/bigcommerce/api/utils/fetch-graphql-api.ts b/lib/bigcommerce/api/utils/fetch-graphql-api.ts index 049a01e33..02df1337c 100644 --- a/lib/bigcommerce/api/utils/fetch-graphql-api.ts +++ b/lib/bigcommerce/api/utils/fetch-graphql-api.ts @@ -1,7 +1,6 @@ -import { FetcherError } from '@lib/commerce/utils/errors' -import type { GraphQLFetcher } from '@lib/commerce/api' +import { FetcherError } from '../../../commerce/utils/errors' +import type { GraphQLFetcher } from '../../../commerce/api' import { getConfig } from '..' -import log from '@lib/logger' import fetch from './fetch' const fetchGraphqlApi: GraphQLFetcher = async ( diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx index 19caca508..75e8ec3e6 100644 --- a/lib/bigcommerce/cart/use-add-item.tsx +++ b/lib/bigcommerce/cart/use-add-item.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' -import type { HookFetcher } from '@lib/commerce/utils/types' -import { CommerceError } from '@lib/commerce/utils/errors' -import useCartAddItem from '@lib/commerce/cart/use-add-item' +import type { HookFetcher } from '../../commerce/utils/types' +import { CommerceError } from '../../commerce/utils/errors' +import useCartAddItem from '../../commerce/cart/use-add-item' import type { ItemBody, AddItemBody } from '../api/cart' import useCart, { Cart } from './use-cart' diff --git a/lib/bigcommerce/cart/use-cart.tsx b/lib/bigcommerce/cart/use-cart.tsx index b12362d5c..a80d3e091 100644 --- a/lib/bigcommerce/cart/use-cart.tsx +++ b/lib/bigcommerce/cart/use-cart.tsx @@ -1,6 +1,6 @@ -import type { HookFetcher } from '@lib/commerce/utils/types' -import type { SwrOptions } from '@lib/commerce/utils/use-data' -import useCommerceCart, { CartInput } from '@lib/commerce/cart/use-cart' +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' const defaultOpts = { diff --git a/lib/bigcommerce/cart/use-remove-item.tsx b/lib/bigcommerce/cart/use-remove-item.tsx index 81897c42a..319b722d3 100644 --- a/lib/bigcommerce/cart/use-remove-item.tsx +++ b/lib/bigcommerce/cart/use-remove-item.tsx @@ -1,6 +1,6 @@ import { useCallback } from 'react' -import { HookFetcher } from '@lib/commerce/utils/types' -import useCartRemoveItem from '@lib/commerce/cart/use-remove-item' +import { HookFetcher } from '../../commerce/utils/types' +import useCartRemoveItem from '../../commerce/cart/use-remove-item' import type { RemoveItemBody } from '../api/cart' import useCart, { Cart } from './use-cart' diff --git a/lib/bigcommerce/cart/use-update-item.tsx b/lib/bigcommerce/cart/use-update-item.tsx index 875c241f8..e335677d6 100644 --- a/lib/bigcommerce/cart/use-update-item.tsx +++ b/lib/bigcommerce/cart/use-update-item.tsx @@ -1,8 +1,8 @@ import { useCallback } from 'react' import debounce from 'lodash.debounce' -import type { HookFetcher } from '@lib/commerce/utils/types' -import { CommerceError } from '@lib/commerce/utils/errors' -import useCartUpdateItem from '@lib/commerce/cart/use-update-item' +import type { HookFetcher } from '../../commerce/utils/types' +import { CommerceError } from '../../commerce/utils/errors' +import useCartUpdateItem from '../../commerce/cart/use-update-item' import type { ItemBody, UpdateItemBody } from '../api/cart' import { fetcher as removeFetcher } from './use-remove-item' import useCart, { Cart } from './use-cart' diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx index f02d7d5ab..96faef82b 100644 --- a/lib/bigcommerce/index.tsx +++ b/lib/bigcommerce/index.tsx @@ -3,8 +3,8 @@ import { CommerceConfig, CommerceProvider as CoreCommerceProvider, useCommerce as useCoreCommerce, -} from 'lib/commerce' -import { FetcherError } from '@lib/commerce/utils/errors' +} from '../commerce' +import { FetcherError } from '../commerce/utils/errors' async function getText(res: Response) { try { diff --git a/lib/bigcommerce/products/use-search.tsx b/lib/bigcommerce/products/use-search.tsx index e4b1e9b91..f90051887 100644 --- a/lib/bigcommerce/products/use-search.tsx +++ b/lib/bigcommerce/products/use-search.tsx @@ -1,6 +1,6 @@ -import type { HookFetcher } from '@lib/commerce/utils/types' -import type { SwrOptions } from '@lib/commerce/utils/use-data' -import useCommerceSearch from '@lib/commerce/products/use-search' +import type { HookFetcher } from '../../commerce/utils/types' +import type { SwrOptions } from '../../commerce/utils/use-data' +import useCommerceSearch from '../../commerce/products/use-search' import type { SearchProductsData } from '../api/catalog/products' const defaultOpts = { diff --git a/lib/bigcommerce/use-customer.tsx b/lib/bigcommerce/use-customer.tsx index 173f1db9c..8f99d5cde 100644 --- a/lib/bigcommerce/use-customer.tsx +++ b/lib/bigcommerce/use-customer.tsx @@ -1,6 +1,6 @@ -import type { HookFetcher } from '@lib/commerce/utils/types' -import type { SwrOptions } from '@lib/commerce/utils/use-data' -import useCommerceCustomer from '@lib/commerce/use-customer' +import type { HookFetcher } from '../commerce/utils/types' +import type { SwrOptions } from '../commerce/utils/use-data' +import useCommerceCustomer from '../commerce/use-customer' import type { Customer, CustomerData } from './api/customers' const defaultOpts = { diff --git a/lib/bigcommerce/use-login.tsx b/lib/bigcommerce/use-login.tsx index fa91e54b9..b74a0f976 100644 --- a/lib/bigcommerce/use-login.tsx +++ b/lib/bigcommerce/use-login.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' -import type { HookFetcher } from '@lib/commerce/utils/types' -import { CommerceError } from '@lib/commerce/utils/errors' -import useCommerceLogin from '@lib/commerce/use-login' +import type { HookFetcher } from '../commerce/utils/types' +import { CommerceError } from '../commerce/utils/errors' +import useCommerceLogin from '../commerce/use-login' import type { LoginBody } from './api/customers/login' import useCustomer from './use-customer' diff --git a/lib/bigcommerce/use-logout.tsx b/lib/bigcommerce/use-logout.tsx index d12afb4d6..fda8e4c69 100644 --- a/lib/bigcommerce/use-logout.tsx +++ b/lib/bigcommerce/use-logout.tsx @@ -1,6 +1,6 @@ import { useCallback } from 'react' -import type { HookFetcher } from '@lib/commerce/utils/types' -import useCommerceLogout from '@lib/commerce/use-logout' +import type { HookFetcher } from '../commerce/utils/types' +import useCommerceLogout from '../commerce/use-logout' import useCustomer from './use-customer' const defaultOpts = { diff --git a/lib/bigcommerce/use-signup.tsx b/lib/bigcommerce/use-signup.tsx index 4e98e7705..9ff52a57a 100644 --- a/lib/bigcommerce/use-signup.tsx +++ b/lib/bigcommerce/use-signup.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' -import type { HookFetcher } from '@lib/commerce/utils/types' -import { CommerceError } from '@lib/commerce/utils/errors' -import useCommerceSignup from '@lib/commerce/use-signup' +import type { HookFetcher } from '../commerce/utils/types' +import { CommerceError } from '../commerce/utils/errors' +import useCommerceSignup from '../commerce/use-signup' import type { SignupBody } from './api/customers/signup' import useCustomer from './use-customer' diff --git a/lib/bigcommerce/wishlist/use-add-item.tsx b/lib/bigcommerce/wishlist/use-add-item.tsx index 0545a3607..c5f608579 100644 --- a/lib/bigcommerce/wishlist/use-add-item.tsx +++ b/lib/bigcommerce/wishlist/use-add-item.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' -import { HookFetcher } from '@lib/commerce/utils/types' -import { CommerceError } from '@lib/commerce/utils/errors' -import useWishlistAddItem from '@lib/commerce/wishlist/use-add-item' +import { HookFetcher } from '../../commerce/utils/types' +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' diff --git a/lib/bigcommerce/wishlist/use-remove-item.tsx b/lib/bigcommerce/wishlist/use-remove-item.tsx index c7d75f782..f8a4ddba9 100644 --- a/lib/bigcommerce/wishlist/use-remove-item.tsx +++ b/lib/bigcommerce/wishlist/use-remove-item.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' -import { HookFetcher } from '@lib/commerce/utils/types' -import { CommerceError } from '@lib/commerce/utils/errors' -import useWishlistRemoveItem from '@lib/commerce/wishlist/use-remove-item' +import { HookFetcher } from '../../commerce/utils/types' +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' diff --git a/lib/bigcommerce/wishlist/use-wishlist.tsx b/lib/bigcommerce/wishlist/use-wishlist.tsx index 438901de0..ac2f9d496 100644 --- a/lib/bigcommerce/wishlist/use-wishlist.tsx +++ b/lib/bigcommerce/wishlist/use-wishlist.tsx @@ -1,6 +1,6 @@ -import { HookFetcher } from '@lib/commerce/utils/types' -import { SwrOptions } from '@lib/commerce/utils/use-data' -import useCommerceWishlist from '@lib/commerce/wishlist/use-wishlist' +import { HookFetcher } from '../../commerce/utils/types' +import { SwrOptions } from '../../commerce/utils/use-data' +import useCommerceWishlist from '../../commerce/wishlist/use-wishlist' import type { Wishlist } from '../api/wishlist' import useCustomer from '../use-customer'