Merge branch 'master' into arzfran/improve-imgs

components/auth/ForgotPassword.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
-import { Info } from'@components/icons'
+import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'
@@ -59,7 +59,7 @@ const ForgotPassword: FC<Props> = () => {
           <div className="text-red border border-red p-3">{message}</div>
         )}
 
-        <Input placeholder="Email" onChange={setEmail} />
+        <Input placeholder="Email" onChange={setEmail} type="email" />
         <div className="pt-2 w-full flex flex-col">
           <Button
             variant="slim"

components/ui/Input/Input.tsx

@@ -20,15 +20,17 @@ const Input: React.FC<Props> = (props) => {
   }
 
   return (
-    <input
+    <label>
-      className={rootClassName}
+      <input
-      onChange={handleOnChange}
+        className={rootClassName}
-      autoComplete="off"
+        onChange={handleOnChange}
-      autoCorrect="off"
+        autoComplete="off"
-      autoCapitalize="off"
+        autoCorrect="off"
-      spellCheck="false"
+        autoCapitalize="off"
-      {...rest}
+        spellCheck="false"
-    />
+        {...rest}
+      />
+    </label>
   )
 }
 

components/ui/context.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
 import { SSRProvider, OverlayProvider } from 'react-aria'
 
@@ -144,18 +144,21 @@ export const UIProvider: FC = (props) => {
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
-  const value = {
+  const value = useMemo(
-    ...state,
+    () => ({
-    openSidebar,
+      ...state,
-    closeSidebar,
+      openSidebar,
-    openDropdown,
+      closeSidebar,
-    closeDropdown,
+      openDropdown,
-    openModal,
+      closeDropdown,
-    closeModal,
+      openModal,
-    setModalView,
+      closeModal,
-    openToast,
+      setModalView,
-    closeToast,
+      openToast,
-  }
+      closeToast,
+    }),
+    [state]
+  )
 
   return <UIContext.Provider value={value} {...props} />
 }

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 */ `

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'
 

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'
 

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 '..'

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'

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 */ `

lib/bigcommerce/api/operations/get-product.ts

@@ -1,7 +1,4 @@
-import type {
+import type { GetProductQuery, GetProductQueryVariables } from '../../schema'
-  GetProductQuery,
-  GetProductQueryVariables,
-} from 'lib/bigcommerce/schema'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import setProductLocaleMeta from '../utils/set-product-locale-meta'
 import { productInfoFragment } from '../fragments/product'

lib/bigcommerce/api/operations/get-site-info.ts

@@ -1,7 +1,4 @@
-import type {
+import type { GetSiteInfoQuery, GetSiteInfoQueryVariables } from '../../schema'
-  GetSiteInfoQuery,
-  GetSiteInfoQueryVariables,
-} from 'lib/bigcommerce/schema'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import filterEdges from '../utils/filter-edges'
 import { BigcommerceConfig, getConfig } from '..'

lib/bigcommerce/api/operations/login.ts

@@ -1,8 +1,5 @@
 import type { ServerResponse } from 'http'
-import type {
+import type { LoginMutation, LoginMutationVariables } from '../../schema'
-  LoginMutation,
-  LoginMutationVariables,
-} from 'lib/bigcommerce/schema'
 import type { RecursivePartial } from '../utils/types'
 import concatHeader from '../utils/concat-cookie'
 import { BigcommerceConfig, getConfig } from '..'

lib/bigcommerce/api/utils/fetch-graphql-api.ts

@@ -1,7 +1,6 @@
-import { FetcherError } from '@lib/commerce/utils/errors'
+import { FetcherError } from '../../../commerce/utils/errors'
-import type { GraphQLFetcher } from '@lib/commerce/api'
+import type { GraphQLFetcher } from '../../../commerce/api'
 import { getConfig } from '..'
-import log from '@lib/logger'
 import fetch from './fetch'
 
 const fetchGraphqlApi: GraphQLFetcher = async (

lib/bigcommerce/api/wishlist/handlers/add-wishlist.ts

@@ -1,25 +0,0 @@
-import type { WishlistHandlers } from '..'
-
-// Return current wishlist info
-const addWishlist: WishlistHandlers['addWishlist'] = async ({
-  res,
-  body: { wishlist },
-  config,
-}) => {
-  if (!wishlist) {
-    return res.status(400).json({
-      data: null,
-      errors: [{ message: 'Missing wishlist data' }],
-    })
-  }
-
-  const options = {
-    method: 'POST',
-    body: JSON.stringify(wishlist),
-  }
-  const { data } = await config.storeApiFetch(`/v3/wishlists/`, options)
-
-  res.status(200).json({ data })
-}
-
-export default addWishlist

lib/bigcommerce/api/wishlist/handlers/get-all-wishlists.ts

@@ -1,23 +0,0 @@
-import type { Wishlist, WishlistHandlers } from '..'
-
-// Return all wishlists
-const getAllWishlists: WishlistHandlers['getAllWishlists'] = async ({
-  res,
-  body: { customerId },
-  config,
-}) => {
-  let result: { data?: Wishlist[] } = {}
-
-  try {
-    result = await config.storeApiFetch(
-      `/v3/wishlists/customer_id=${customerId}`
-    )
-  } catch (error) {
-    throw error
-  }
-
-  const data = (result.data ?? []) as any
-  res.status(200).json({ data })
-}
-
-export default getAllWishlists

lib/bigcommerce/api/wishlist/handlers/remove-wishlist.ts

@@ -1,25 +0,0 @@
-import type { WishlistHandlers } from '..'
-
-// Return current wishlist info
-const removeWishlist: WishlistHandlers['removeWishlist'] = async ({
-  res,
-  body: { wishlistId },
-  config,
-}) => {
-  if (!wishlistId) {
-    return res.status(400).json({
-      data: null,
-      errors: [{ message: 'Invalid request' }],
-    })
-  }
-
-  const result = await config.storeApiFetch<{ data: any } | null>(
-    `/v3/wishlists/${wishlistId}/`,
-    { method: 'DELETE' }
-  )
-  const data = result?.data ?? null
-
-  res.status(200).json({ data })
-}
-
-export default removeWishlist

lib/bigcommerce/api/wishlist/handlers/update-wishlist.ts

@@ -1,27 +0,0 @@
-import type { WishlistHandlers } from '..'
-
-// Update wish info
-const updateWishlist: WishlistHandlers['updateWishlist'] = async ({
-  res,
-  body: { wishlistId, wishlist },
-  config,
-}) => {
-  if (!wishlistId || !wishlist) {
-    return res.status(400).json({
-      data: null,
-      errors: [{ message: 'Invalid request' }],
-    })
-  }
-
-  const { data } = await config.storeApiFetch(
-    `/v3/wishlists/${wishlistId}/`,
-    {
-      method: 'PUT',
-      body: JSON.stringify(wishlist),
-    }
-  )
-
-  res.status(200).json({ data })
-}
-
-export default updateWishlist

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<Wishlist[], { customerId?: string }>
   getWishlist: BigcommerceHandler<Wishlist, { customerToken?: string }>
-  addWishlist: BigcommerceHandler<
-    Wishlist,
-    { wishlistId: string } & Partial<AddWishlistBody>
-  >
-  updateWishlist: BigcommerceHandler<
-    Wishlist,
-    { wishlistId: string } & Partial<AddWishlistBody>
-  >
   addItem: BigcommerceHandler<
     Wishlist,
     { customerToken?: string } & Partial<AddItemBody>
@@ -52,10 +39,9 @@ export type WishlistHandlers = {
     Wishlist,
     { customerToken?: string } & Partial<RemoveItemBody>
   >
-  removeWishlist: BigcommerceHandler<Wishlist, { wishlistId: string }>
 }
 
-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<Wishlist, WishlistHandlers> = async (
@@ -70,8 +56,6 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = 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<Wishlist, WishlistHandlers> = 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<Wishlist, WishlistHandlers> = async (
 export const handlers = {
   getWishlist,
   addItem,
-  updateWishlist,
   removeItem,
-  removeWishlist,
-  getAllWishlists,
-  addWishlist,
 }
 
 export default createApiHandler(wishlistApi, handlers, {})

lib/bigcommerce/cart/use-add-item.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '../../commerce/utils/types'
-import { CommerceError } from '@lib/commerce/utils/errors'
+import { CommerceError } from '../../commerce/utils/errors'
-import useCartAddItem from '@lib/commerce/cart/use-add-item'
+import useCartAddItem from '../../commerce/cart/use-add-item'
 import type { ItemBody, AddItemBody } from '../api/cart'
 import useCart, { Cart } from './use-cart'
 

lib/bigcommerce/cart/use-cart.tsx

@@ -1,6 +1,6 @@
-import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '../../commerce/utils/types'
-import type { SwrOptions } from '@lib/commerce/utils/use-data'
+import type { SwrOptions } from '../../commerce/utils/use-data'
-import useCommerceCart, { CartInput } from '@lib/commerce/cart/use-cart'
+import useCommerceCart, { CartInput } from '../../commerce/cart/use-cart'
 import type { Cart } from '../api/cart'
 
 const defaultOpts = {

lib/bigcommerce/cart/use-remove-item.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import { HookFetcher } from '../../commerce/utils/types'
-import useCartRemoveItem from '@lib/commerce/cart/use-remove-item'
+import useCartRemoveItem from '../../commerce/cart/use-remove-item'
 import type { RemoveItemBody } from '../api/cart'
 import useCart, { Cart } from './use-cart'
 

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 type { HookFetcher } from '../../commerce/utils/types'
-import { CommerceError } from '@lib/commerce/utils/errors'
+import { CommerceError } from '../../commerce/utils/errors'
-import useCartUpdateItem from '@lib/commerce/cart/use-update-item'
+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'

lib/bigcommerce/index.tsx

@@ -3,8 +3,8 @@ import {
   CommerceConfig,
   CommerceProvider as CoreCommerceProvider,
   useCommerce as useCoreCommerce,
-} from 'lib/commerce'
+} from '../commerce'
-import { FetcherError } from '@lib/commerce/utils/errors'
+import { FetcherError } from '../commerce/utils/errors'
 
 async function getText(res: Response) {
   try {

lib/bigcommerce/products/use-search.tsx

@@ -1,6 +1,6 @@
-import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '../../commerce/utils/types'
-import type { SwrOptions } from '@lib/commerce/utils/use-data'
+import type { SwrOptions } from '../../commerce/utils/use-data'
-import useCommerceSearch from '@lib/commerce/products/use-search'
+import useCommerceSearch from '../../commerce/products/use-search'
 import type { SearchProductsData } from '../api/catalog/products'
 
 const defaultOpts = {

lib/bigcommerce/use-customer.tsx

@@ -1,6 +1,6 @@
-import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '../commerce/utils/types'
-import type { SwrOptions } from '@lib/commerce/utils/use-data'
+import type { SwrOptions } from '../commerce/utils/use-data'
-import useCommerceCustomer from '@lib/commerce/use-customer'
+import useCommerceCustomer from '../commerce/use-customer'
 import type { Customer, CustomerData } from './api/customers'
 
 const defaultOpts = {

lib/bigcommerce/use-login.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '../commerce/utils/types'
-import { CommerceError } from '@lib/commerce/utils/errors'
+import { CommerceError } from '../commerce/utils/errors'
-import useCommerceLogin from '@lib/commerce/use-login'
+import useCommerceLogin from '../commerce/use-login'
 import type { LoginBody } from './api/customers/login'
 import useCustomer from './use-customer'
 

lib/bigcommerce/use-logout.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '../commerce/utils/types'
-import useCommerceLogout from '@lib/commerce/use-logout'
+import useCommerceLogout from '../commerce/use-logout'
 import useCustomer from './use-customer'
 
 const defaultOpts = {

lib/bigcommerce/use-signup.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '../commerce/utils/types'
-import { CommerceError } from '@lib/commerce/utils/errors'
+import { CommerceError } from '../commerce/utils/errors'
-import useCommerceSignup from '@lib/commerce/use-signup'
+import useCommerceSignup from '../commerce/use-signup'
 import type { SignupBody } from './api/customers/signup'
 import useCustomer from './use-customer'
 

lib/bigcommerce/wishlist/use-add-item.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import { HookFetcher } from '../../commerce/utils/types'
-import { CommerceError } from '@lib/commerce/utils/errors'
+import { CommerceError } from '../../commerce/utils/errors'
-import useWishlistAddItem from '@lib/commerce/wishlist/use-add-item'
+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'

lib/bigcommerce/wishlist/use-remove-item.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import { HookFetcher } from '../../commerce/utils/types'
-import { CommerceError } from '@lib/commerce/utils/errors'
+import { CommerceError } from '../../commerce/utils/errors'
-import useWishlistRemoveItem from '@lib/commerce/wishlist/use-remove-item'
+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'

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

lib/bigcommerce/wishlist/use-wishlist.tsx

@@ -1,6 +1,6 @@
-import { HookFetcher } from '@lib/commerce/utils/types'
+import { HookFetcher } from '../../commerce/utils/types'
-import { SwrOptions } from '@lib/commerce/utils/use-data'
+import { SwrOptions } from '../../commerce/utils/use-data'
-import useCommerceWishlist from '@lib/commerce/wishlist/use-wishlist'
+import useCommerceWishlist from '../../commerce/wishlist/use-wishlist'
 import type { Wishlist } from '../api/wishlist'
 import useCustomer from '../use-customer'
 

pages/index.tsx

@@ -60,10 +60,10 @@ export default function Home({
     // products, then fill them with products from the products list, this
     // is useful for new commerce sites that don't have a lot of products
     return {
-      featured: rangeMap(
+      featured: rangeMap(6, (i) => featuredProducts[i] ?? products.shift())
-        6,
+        .filter(nonNullable)
-        (i) => featuredProducts[i] ?? products.shift()
+        .sort((a, b) => a.node.prices.price.value - b.node.prices.price.value)
-      ).filter(nonNullable),
+        .reverse(),
       bestSelling: rangeMap(
         6,
         (i) => bestSellingProducts[i] ?? products.shift()
@@ -86,7 +86,7 @@ export default function Home({
         ))}
       </Grid>
       <Marquee variant="secondary">
-        {bestSelling.slice(0, 3).map(({ node }) => (
+        {bestSelling.slice(3, 6).map(({ node }) => (
           <ProductCard
             key={node.path}
             product={node}
@@ -118,7 +118,7 @@ export default function Home({
         ))}
       </Grid>
       <Marquee>
-        {bestSelling.slice(3, 6).map(({ node }) => (
+        {bestSelling.slice(0, 3).map(({ node }) => (
           <ProductCard
             key={node.path}
             product={node}