merge master

codegen.json

@@ -8,7 +8,7 @@
   },
   "documents": [
     {
-      "./lib/bigcommerce/api/{operations,fragments}/**/*.ts": {
+      "./lib/bigcommerce/api/**/*.ts": {
         "noRequire": true
       }
     }

components/core/Navbar/Navbar.tsx

@@ -20,7 +20,7 @@ const Navbar: FC<Props> = ({ className }) => {
               <Logo />
             </a>
           </Link>
-          <nav className="space-x-4 ml-6 sm:hidden lg:block">
+          <nav className="space-x-4 ml-6 hidden lg:block">
             <Link href="/">
               <a className={s.link}>All</a>
             </Link>
@@ -33,7 +33,7 @@ const Navbar: FC<Props> = ({ className }) => {
           </nav>
         </div>
 
-        <div className="lg:flex flex-1 justify-center sm:hidden">
+        <div className="flex-1 justify-center hidden lg:flex">
           <Searchbar />
         </div>
 
@@ -48,7 +48,7 @@ const Navbar: FC<Props> = ({ className }) => {
         </div>
       </div>
 
-      <div className="sm:flex pb-4 lg:px-6 lg:hidden">
+      <div className="flex pb-4 lg:px-6 lg:hidden">
         <Searchbar />
       </div>
     </div>

components/core/UserNav/UserNav.module.css

@@ -1,4 +1,5 @@
 .root {
+  @apply relative;
 }
 
 .list {
@@ -15,3 +16,16 @@
     @apply mr-0;
   }
 }
+
+.dropdownMenu {
+  @apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary;
+  max-width: 160px;
+
+  &.dropdownMenuContainer {
+    @apply shadow-lg overflow-hidden relative grid py-2;
+  }
+
+  & .link {
+    @apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+  }
+}

components/core/UserNav/UserNav.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import cn from 'classnames'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import { Avatar } from '@components/core'
@@ -17,6 +17,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
+  const [displayDropdown, setDisplayDropdown] = useState(false)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
@@ -39,10 +40,31 @@ const UserNav: FC<Props> = ({ className }) => {
             <Heart />
           </li>
         </Link>
-        <li className={s.item}>
+        <li
+          className={s.item}
+          onClick={() => {
+            setDisplayDropdown((i) => !i)
+          }}
+        >
           <Avatar />
         </li>
       </ul>
+
+      {displayDropdown && (
+        <div className={s.dropdownMenu}>
+          <nav className={s.dropdownMenuContainer}>
+            <Link href="#">
+              <a className={s.link}>My Purchases</a>
+            </Link>
+            <Link href="#">
+              <a className={s.link}>My Account</a>
+            </Link>
+            <Link href="#">
+              <a className={cn(s.link, 'mt-4')}>Logout</a>
+            </Link>
+          </nav>
+        </div>
+      )}
     </nav>
   )
 }

components/product/ProductCard/ProductCard.module.css

@@ -65,23 +65,40 @@
   @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
-.squareBg.gray {
+.simple {
-  @apply bg-gray-300 !important;
+  & .squareBg {
+    @apply bg-gray-300 !important;
+  }
+
+  & .productTitle {
+    width: 18vw;
+    margin-top: -7px;
+    font-size: 1rem;
+  }
+
+  & .productPrice {
+    @apply text-sm;
+  }
 }
 
 .productTitle {
-  line-height: 40px;
+  @apply pt-4 leading-8;
-  width: 18vw;
+  width: 400px;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
 
   & span {
-    @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
+    @apply inline p-4 bg-primary text-primary font-bold;
+    font-size: inherit;
+    letter-spacing: inherit;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
   }
 }
 
 .productPrice {
-  @apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  letter-spacing: 0.4px;
 }
 
 .wishlistButton {

components/product/ProductCard/ProductCard.tsx

@@ -31,19 +31,21 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
 
   return (
     <Link href={`product${p.path}`}>
-      <a className={cn(s.root, className)}>
+      <a
+        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
+      >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
             className="w-full object-cover"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>
-        <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
+        <div className={s.squareBg} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          <div className="">
+          <div className="absolute top-0 left-0">
-            <p className={s.productTitle}>
+            <h3 className={s.productTitle}>
               <span>{p.name}</span>
-            </p>
+            </h3>
             <span className={s.productPrice}>${p.prices?.price.value}</span>
           </div>
           <div className={s.wishlistButton}>

components/product/ProductView/ProductView.module.css

@@ -37,7 +37,9 @@
   @apply absolute top-6 left-0 z-50;
 
   & .name {
-    @apply px-6 py-2 bg-primary text-primary font-bold text-3xl;
+    @apply px-6 py-2 bg-primary text-primary font-bold;
+    font-size: 2rem;
+    letter-spacing: 0.4px;
   }
 
   & .price {

components/ui/Container/Container.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-7xl px-6 md:px-12', className)
+  const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement

components/ui/Grid/Grid.module.css

@@ -20,7 +20,7 @@
 }
 
 .layoutNormal {
-  @apply gap-6;
+  @apply gap-3;
 
   & > * {
     min-height: 325px;

lib/bigcommerce/api/cart/index.ts

@@ -80,19 +80,19 @@ const cartApi: BigcommerceApiHandler<Cart, CartHandlers> = async (
 
     // Create or add an item to the cart
     if (req.method === 'POST') {
-      const body = { cartId, ...req.body }
+      const body = { ...req.body, cartId }
       return await handlers['addItem']({ req, res, config, body })
     }
 
     // Update item in cart
     if (req.method === 'PUT') {
-      const body = { cartId, ...req.body }
+      const body = { ...req.body, cartId }
       return await handlers['updateItem']({ req, res, config, body })
     }
 
     // Remove an item from the cart
     if (req.method === 'DELETE') {
-      const body = { cartId, ...req.body }
+      const body = { ...req.body, cartId }
       return await handlers['removeItem']({ req, res, config, body })
     }
   } catch (error) {

lib/bigcommerce/api/customers/handlers/create-customer.ts

@@ -1,67 +0,0 @@
-import { BigcommerceApiError } from '../../utils/errors'
-import login from '../../operations/login'
-import type { CustomersHandlers } from '..'
-
-const createCustomer: CustomersHandlers['createCustomer'] = async ({
-  res,
-  body: { firstName, lastName, email, password },
-  config,
-}) => {
-  // TODO: Add proper validations with something like Ajv
-  if (!(firstName && lastName && email && password)) {
-    return res.status(400).json({
-      data: null,
-      errors: [{ message: 'Invalid request' }],
-    })
-  }
-  // TODO: validate the password and email
-  // Passwords must be at least 7 characters and contain both alphabetic
-  // and numeric characters.
-
-  let result: { data?: any } = {}
-
-  try {
-    result = await config.storeApiFetch('/v3/customers', {
-      method: 'POST',
-      body: JSON.stringify([
-        {
-          first_name: firstName,
-          last_name: lastName,
-          email,
-          authentication: {
-            new_password: password,
-          },
-        },
-      ]),
-    })
-  } catch (error) {
-    if (error instanceof BigcommerceApiError && error.status === 422) {
-      const hasEmailError = '0.email' in error.data?.errors
-
-      // If there's an error with the email, it most likely means it's duplicated
-      if (hasEmailError) {
-        return res.status(400).json({
-          data: null,
-          errors: [
-            {
-              message: 'The email is already in use',
-              code: 'duplicated_email',
-            },
-          ],
-        })
-      }
-    }
-
-    throw error
-  }
-
-  console.log('DATA', result.data)
-
-  const loginData = await login({ variables: { email, password }, config })
-
-  console.log('LOGIN DATA', loginData)
-
-  res.status(200).json({ data: result.data ?? null })
-}
-
-export default createCustomer

lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts

@@ -0,0 +1,44 @@
+import { GetLoggedInCustomerQuery } from '@lib/bigcommerce/schema'
+import type { CustomersHandlers } from '..'
+
+export const getLoggedInCustomerQuery = /* GraphQL */ `
+  query getLoggedInCustomer {
+    customer {
+      entityId
+      firstName
+      lastName
+      email
+      company
+      customerGroupId
+      notes
+      phone
+      addressCount
+      attributeCount
+      storeCredit {
+        value
+        currencyCode
+      }
+    }
+  }
+`
+
+const getLoggedInCustomer: CustomersHandlers['getLoggedInCustomer'] = async ({
+  res,
+  config,
+}) => {
+  const data = await config.fetch<GetLoggedInCustomerQuery>(
+    getLoggedInCustomerQuery
+  )
+  const { customer } = data
+
+  if (!customer) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Customer not found', code: 'not_found' }],
+    })
+  }
+
+  res.status(200).json({ data: { customer } })
+}
+
+export default getLoggedInCustomer

lib/bigcommerce/api/customers/handlers/login.ts

@@ -0,0 +1,26 @@
+import login from '../../operations/login'
+import type { LoginHandlers } from '../login'
+
+const loginHandler: LoginHandlers['login'] = async ({
+  res,
+  body: { email, password },
+  config,
+}) => {
+  // TODO: Add proper validations with something like Ajv
+  if (!(email && password)) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+  // TODO: validate the password and email
+  // Passwords must be at least 7 characters and contain both alphabetic
+  // and numeric characters.
+
+  // TODO: Currently not working, fix this asap.
+  const loginData = await login({ variables: { email, password }, config })
+
+  res.status(200).json({ data: null })
+}
+
+export default loginHandler

lib/bigcommerce/api/customers/handlers/signup.ts

@@ -0,0 +1,68 @@
+import { BigcommerceApiError } from '../../utils/errors'
+import login from '../../operations/login'
+import { SignupHandlers } from '../signup'
+
+const signup: SignupHandlers['signup'] = async ({
+  res,
+  body: { firstName, lastName, email, password },
+  config,
+}) => {
+  // TODO: Add proper validations with something like Ajv
+  if (!(firstName && lastName && email && password)) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+  // TODO: validate the password and email
+  // Passwords must be at least 7 characters and contain both alphabetic
+  // and numeric characters.
+
+  let result: { data?: any } = {}
+
+  // try {
+  //   result = await config.storeApiFetch('/v3/customers', {
+  //     method: 'POST',
+  //     body: JSON.stringify([
+  //       {
+  //         first_name: firstName,
+  //         last_name: lastName,
+  //         email,
+  //         authentication: {
+  //           new_password: password,
+  //         },
+  //       },
+  //     ]),
+  //   })
+  // } catch (error) {
+  //   if (error instanceof BigcommerceApiError && error.status === 422) {
+  //     const hasEmailError = '0.email' in error.data?.errors
+
+  //     // If there's an error with the email, it most likely means it's duplicated
+  //     if (hasEmailError) {
+  //       return res.status(400).json({
+  //         data: null,
+  //         errors: [
+  //           {
+  //             message: 'The email is already in use',
+  //             code: 'duplicated_email',
+  //           },
+  //         ],
+  //       })
+  //     }
+  //   }
+
+  //   throw error
+  // }
+
+  console.log('DATA', result.data)
+
+  // TODO: Currently not working, fix this asap.
+  const loginData = await login({ variables: { email, password }, config })
+
+  console.log('LOGIN DATA', loginData)
+
+  res.status(200).json({ data: result.data ?? null })
+}
+
+export default signup

lib/bigcommerce/api/customers/index.ts

@@ -4,42 +4,30 @@ import createApiHandler, {
 } from '../utils/create-api-handler'
 import isAllowedMethod from '../utils/is-allowed-method'
 import { BigcommerceApiError } from '../utils/errors'
-import createCustomer from './handlers/create-customer'
+import getLoggedInCustomer from './handlers/get-logged-in-customer'
 
-type Body<T> = Partial<T> | undefined
+export type Customer = any
 
-export type Customer = null
+export type CustomerData = {
-
+  customer: Customer
-export type CreateCustomerBody = {
-  firstName: string
-  lastName: string
-  email: string
-  password: string
 }
 
 export type CustomersHandlers = {
-  createCustomer: BigcommerceHandler<
+  getLoggedInCustomer: BigcommerceHandler<CustomerData, null>
-    Customer,
-    { cartId?: string } & Body<CreateCustomerBody>
-  >
 }
 
-const METHODS = ['POST']
+const METHODS = ['GET']
 
-const customersApi: BigcommerceApiHandler<Customer, CustomersHandlers> = async (
+const customersApi: BigcommerceApiHandler<
-  req,
+  CustomerData,
-  res,
+  CustomersHandlers
-  config
+> = async (req, res, config, handlers) => {
-) => {
   if (!isAllowedMethod(req, res, METHODS)) return
 
-  const { cookies } = req
-  const cartId = cookies[config.cartCookie]
-
   try {
-    if (req.method === 'POST') {
+    if (req.method === 'GET') {
-      const body = { cartId, ...req.body }
+      const body = null
-      return await handlers['createCustomer']({ req, res, config, body })
+      return await handlers['getLoggedInCustomer']({ req, res, config, body })
     }
   } catch (error) {
     console.error(error)
@@ -53,6 +41,6 @@ const customersApi: BigcommerceApiHandler<Customer, CustomersHandlers> = async (
   }
 }
 
-const handlers = { createCustomer }
+const handlers = { getLoggedInCustomer }
 
 export default createApiHandler(customersApi, handlers, {})

lib/bigcommerce/api/customers/login.ts

@@ -0,0 +1,45 @@
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import isAllowedMethod from '../utils/is-allowed-method'
+import { BigcommerceApiError } from '../utils/errors'
+import login from './handlers/login'
+
+export type LoginBody = {
+  email: string
+  password: string
+}
+
+export type LoginHandlers = {
+  login: BigcommerceHandler<null, Partial<LoginBody>>
+}
+
+const METHODS = ['POST']
+
+const loginApi: BigcommerceApiHandler<null, LoginHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  try {
+    const body = req.body ?? {}
+    return await handlers['login']({ req, res, config, body })
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+const handlers = { login }
+
+export default createApiHandler(loginApi, handlers, {})

lib/bigcommerce/api/customers/signup.ts

@@ -0,0 +1,50 @@
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import isAllowedMethod from '../utils/is-allowed-method'
+import { BigcommerceApiError } from '../utils/errors'
+import signup from './handlers/signup'
+
+export type SignupBody = {
+  firstName: string
+  lastName: string
+  email: string
+  password: string
+}
+
+export type SignupHandlers = {
+  signup: BigcommerceHandler<null, { cartId?: string } & Partial<SignupBody>>
+}
+
+const METHODS = ['POST']
+
+const signupApi: BigcommerceApiHandler<null, SignupHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  const { cookies } = req
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    const body = { ...req.body, cartId }
+    return await handlers['signup']({ req, res, config, body })
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+const handlers = { signup }
+
+export default createApiHandler(signupApi, handlers, {})

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

@@ -20,6 +20,8 @@ export default async function fetchGraphqlApi<Q, V = any>(
     }),
   })
 
+  // console.log('HEADERS', getRawHeaders(res))
+
   const json = await res.json()
   if (json.errors) {
     console.error(json.errors)
@@ -27,3 +29,13 @@ export default async function fetchGraphqlApi<Q, V = any>(
   }
   return json.data
 }
+
+function getRawHeaders(res: Response) {
+  const headers: { [key: string]: string } = {}
+
+  res.headers.forEach((value, key) => {
+    headers[key] = value
+  })
+
+  return headers
+}

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

@@ -1,5 +1,4 @@
-import { BigcommerceApiError } from '../../utils/errors'
+import type { Wishlist, WishlistHandlers } from '..'
-import type { WishlistList, WishlistHandlers } from '..'
 
 // Return all wishlists
 const getAllWishlists: WishlistHandlers['getAllWishlists'] = async ({
@@ -7,10 +6,12 @@ const getAllWishlists: WishlistHandlers['getAllWishlists'] = async ({
   body: { customerId },
   config,
 }) => {
-  let result: { data?: WishlistList } = {}
+  let result: { data?: Wishlist[] } = {}
 
   try {
-    result = await config.storeApiFetch(`/v3/wishlists/customer_id=${customerId}`)
+    result = await config.storeApiFetch(
+      `/v3/wishlists/customer_id=${customerId}`
+    )
   } catch (error) {
     throw error
   }

lib/bigcommerce/api/wishlist/index.ts

@@ -44,10 +44,8 @@ export type Wishlist = {
   // TODO: add missing fields
 }
 
-export type WishlistList = Wishlist[]
-
 export type WishlistHandlers = {
-	getAllWishlists: BigcommerceHandler<WishlistList, { customerId?: string }>
+  getAllWishlists: BigcommerceHandler<Wishlist[], { customerId?: string }>
   getWishlist: BigcommerceHandler<Wishlist, { wishlistId?: string }>
   addWishlist: BigcommerceHandler<
     Wishlist,
@@ -57,7 +55,10 @@ export type WishlistHandlers = {
     Wishlist,
     { wishlistId: string } & Body<AddWishlistBody>
   >
-  addItem: BigcommerceHandler<Wishlist, { wishlistId: string } & Body<AddItemBody>>
+  addItem: BigcommerceHandler<
+    Wishlist,
+    { wishlistId: string } & Body<AddItemBody>
+  >
   removeItem: BigcommerceHandler<
     Wishlist,
     { wishlistId: string } & Body<RemoveItemBody>
@@ -86,13 +87,13 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
 
     // Add an item to the wishlist
     if (req.method === 'POST' && wishlistId) {
-      const body = { wishlistId, ...req.body }
+      const body = { ...req.body, wishlistId }
       return await handlers['addItem']({ req, res, config, body })
     }
 
     // Update a wishlist
     if (req.method === 'PUT' && wishlistId) {
-      const body = { wishlistId, ...req.body }
+      const body = { ...req.body, wishlistId }
       return await handlers['updateWishlist']({ req, res, config, body })
     }
 

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

@@ -26,8 +26,8 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
   }
 
   return fetch({
-    url: options?.url ?? defaultOpts.url,
+    ...defaultOpts,
-    method: options?.method ?? defaultOpts.method,
+    ...options,
     body: { item },
   })
 }

lib/bigcommerce/cart/use-cart.tsx

@@ -5,6 +5,7 @@ import type { Cart } from '../api/cart'
 
 const defaultOpts = {
   url: '/api/bigcommerce/cart',
+  method: 'GET',
 }
 
 export type { Cart }
@@ -14,12 +15,7 @@ export const fetcher: HookFetcher<Cart | null, CartInput> = (
   { cartId },
   fetch
 ) => {
-  return cartId
+  return cartId ? fetch({ ...defaultOpts, ...options }) : null
-    ? fetch({
-        url: options?.url,
-        query: options?.query,
-      })
-    : null
 }
 
 export function extendHook(

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

@@ -19,8 +19,8 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
   fetch
 ) => {
   return fetch({
-    url: options?.url ?? defaultOpts.url,
+    ...defaultOpts,
-    method: options?.method ?? defaultOpts.method,
+    ...options,
     body: { itemId },
   })
 }

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

@@ -28,8 +28,8 @@ export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
   }
 
   return fetch({
-    url: options?.url ?? defaultOpts.url,
+    ...defaultOpts,
-    method: options?.method ?? defaultOpts.method,
+    ...options,
     body: { itemId, item },
   })
 }

lib/bigcommerce/schema.d.ts

@@ -1653,6 +1653,30 @@ export enum CurrencyCode {
   Zwr = 'ZWR',
 }
 
+export type GetLoggedInCustomerQueryVariables = Exact<{ [key: string]: never }>
+
+export type GetLoggedInCustomerQuery = { __typename?: 'Query' } & {
+  customer?: Maybe<
+    { __typename?: 'Customer' } & Pick<
+      Customer,
+      | 'entityId'
+      | 'firstName'
+      | 'lastName'
+      | 'email'
+      | 'company'
+      | 'customerGroupId'
+      | 'notes'
+      | 'phone'
+      | 'addressCount'
+      | 'attributeCount'
+    > & {
+        storeCredit: Array<
+          { __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
+        >
+      }
+  >
+}
+
 export type CategoryTreeItemFragment = {
   __typename?: 'CategoryTreeItem'
 } & Pick<

lib/bigcommerce/use-customer.tsx

@@ -0,0 +1,41 @@
+import { ConfigInterface } from 'swr'
+import { HookFetcher } from '@lib/commerce/utils/types'
+import useCommerceCustomer, { CustomerInput } from '@lib/commerce/use-customer'
+import type { Customer, CustomerData } from './api/customers'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/customer',
+  method: 'GET',
+}
+
+export type { Customer }
+
+export const fetcher: HookFetcher<CustomerData | null, CustomerInput> = (
+  options,
+  { cartId },
+  fetch
+) => {
+  return cartId ? fetch({ ...defaultOpts, ...options }) : null
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: ConfigInterface
+) {
+  const useCustomer = () => {
+    const cart = useCommerceCustomer<CustomerData | null>(
+      defaultOpts,
+      [],
+      customFetcher,
+      { revalidateOnFocus: false, ...swrOptions }
+    )
+
+    return cart
+  }
+
+  useCustomer.extend = extendHook
+
+  return useCustomer
+}
+
+export default extendHook(fetcher)

lib/bigcommerce/use-login.tsx

@@ -0,0 +1,49 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@lib/commerce/utils/types'
+import useCommerceLogin from '@lib/commerce/use-login'
+import type { LoginBody } from './api/customers/login'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/customers/login',
+  method: 'POST',
+}
+
+export type LoginInput = LoginBody
+
+export const fetcher: HookFetcher<null, LoginBody> = (
+  options,
+  { email, password },
+  fetch
+) => {
+  if (!(email && password)) {
+    throw new Error(
+      'A first name, last name, email and password are required to login'
+    )
+  }
+
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { email, password },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useLogin = () => {
+    const fn = useCommerceLogin<null, LoginInput>(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function login(input: LoginInput) {
+        const data = await fn(input)
+        return data
+      },
+      [fn]
+    )
+  }
+
+  useLogin.extend = extendHook
+
+  return useLogin
+}
+
+export default extendHook(fetcher)

lib/bigcommerce/use-signup.tsx

@@ -0,0 +1,49 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@lib/commerce/utils/types'
+import useCommerceSignup from '@lib/commerce/use-signup'
+import type { SignupBody } from './api/customers/signup'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/customers/signup',
+  method: 'POST',
+}
+
+export type SignupInput = SignupBody
+
+export const fetcher: HookFetcher<null, SignupBody> = (
+  options,
+  { firstName, lastName, email, password },
+  fetch
+) => {
+  if (!(firstName && lastName && email && password)) {
+    throw new Error(
+      'A first name, last name, email and password are required to signup'
+    )
+  }
+
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { firstName, lastName, email, password },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useSignup = () => {
+    const fn = useCommerceSignup<null, SignupInput>(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function signup(input: SignupInput) {
+        const data = await fn(input)
+        return data
+      },
+      [fn]
+    )
+  }
+
+  useSignup.extend = extendHook
+
+  return useSignup
+}
+
+export default extendHook(fetcher)

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

@@ -17,8 +17,8 @@ export const fetcher: HookFetcher<Wishlist, AddItemBody> = (
   fetch
 ) => {
   return fetch({
-    url: options?.url ?? defaultOpts.url,
+    ...defaultOpts,
-    method: options?.method ?? defaultOpts.method,
+    ...options,
     body: { wishlistId, item },
   })
 }

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

@@ -19,8 +19,8 @@ export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
   fetch
 ) => {
   return fetch({
-    url: options?.url ?? defaultOpts.url,
+    ...defaultOpts,
-    method: options?.method ?? defaultOpts.method,
+    ...options,
     body: { wishlistId, itemId },
   })
 }

lib/bigcommerce/wishlist/use-wishlist.tsx

@@ -4,6 +4,7 @@ import type { Wishlist } from '../api/wishlist'
 
 const defaultOpts = {
   url: '/api/bigcommerce/wishlists',
+  method: 'GET',
 }
 
 export type { Wishlist }
@@ -18,7 +19,8 @@ export const fetcher: HookFetcher<Wishlist | null, WishlistInput> = (
   fetch
 ) => {
   return fetch({
-    url: options?.url,
+    ...defaultOpts,
+    ...options,
     body: { wishlistId },
   })
 }

lib/commerce/api/index.ts

@@ -14,8 +14,4 @@ export interface CommerceAPIFetchOptions<V> {
   preview?: boolean
 }
 
-// TODO: define interfaces for all the available operations
+// TODO: define interfaces for all the available operations and API endpoints
-
-// export interface CommerceAPI {
-//   getAllProducts(options?: { query: string }): Promise<any>;
-// }

lib/commerce/use-customer.tsx

@@ -0,0 +1,30 @@
+import { responseInterface, ConfigInterface } from 'swr'
+import Cookies from 'js-cookie'
+import type { HookInput, HookFetcher, HookFetcherOptions } from './utils/types'
+import useData from './utils/use-data'
+import { useCommerce } from '.'
+
+export type CustomerResponse<T> = responseInterface<T, Error>
+
+export type CustomerInput = {
+  cartId: string | undefined
+}
+
+export default function useCustomer<T>(
+  options: HookFetcherOptions,
+  input: HookInput,
+  fetcherFn: HookFetcher<T | null, CustomerInput>,
+  swrOptions?: ConfigInterface<T | null>
+) {
+  // TODO: Replace this with the login cookie
+  const { cartCookie } = useCommerce()
+
+  const fetcher: typeof fetcherFn = (options, input, fetch) => {
+    input.cartId = Cookies.get(cartCookie)
+    return fetcherFn(options, input, fetch)
+  }
+
+  const response = useData(options, input, fetcher, swrOptions)
+
+  return response as CustomerResponse<T>
+}

lib/commerce/use-login.tsx

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

lib/commerce/use-signup.tsx

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

lib/commerce/utils/use-action.tsx

@@ -9,9 +9,7 @@ export default function useAction<T, Input>(
   const { fetcherRef } = useCommerce()
 
   return useCallback(
-    function addItem(input: Input) {
+    (input: Input) => fetcher(options, input, fetcherRef.current),
-      return fetcher(options, input, fetcherRef.current)
-    },
     [fetcher]
   )
 }

lib/commerce/utils/use-data.tsx

@@ -9,9 +9,15 @@ export default function useData<T, Input = any>(
   swrOptions?: ConfigInterface<T>
 ) {
   const { fetcherRef } = useCommerce()
-  const fetcher = (url?: string, query?: string, ...args: any[]) => {
+  const fetcher = (
+    url?: string,
+    query?: string,
+    method?: string,
+    ...args: any[]
+  ) => {
     return fetcherFn(
-      { url, query },
+      { url, query, method },
+      // Transform the input array into an object
       args.reduce((obj, val, i) => {
         obj[input[i][0]!] = val
         return obj
@@ -23,7 +29,9 @@ export default function useData<T, Input = any>(
   const response = useSWR(
     () => {
       const opts = typeof options === 'function' ? options() : options
-      return opts ? [opts.url, opts.query, ...input.map((e) => e[1])] : null
+      return opts
+        ? [opts.url, opts.query, opts.method, ...input.map((e) => e[1])]
+        : null
     },
     fetcher,
     swrOptions

package.json

@@ -30,7 +30,7 @@
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
-    "next": "^9.5.6-canary.4",
+    "next": "^9.5.6-canary.9",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "nextjs-progressbar": "^0.0.6",

pages/api/bigcommerce/customers/login.ts

@@ -0,0 +1,3 @@
+import loginApi from '@lib/bigcommerce/api/customers/login'
+
+export default loginApi()

pages/api/bigcommerce/customers/signup.ts

@@ -0,0 +1,3 @@
+import signupApi from '@lib/bigcommerce/api/customers/signup'
+
+export default signupApi()

pages/search.tsx

@@ -59,7 +59,7 @@ export default function Search({
 
   return (
     <Container>
-      <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
+      <div className="grid grid-cols-12 gap-4 mt-3 mb-20">
         <div className="col-span-2">
           <ul className="mb-10">
             <li className="py-1 text-base font-bold tracking-wide">
@@ -143,6 +143,7 @@ export default function Search({
             <Grid layout="normal">
               {data.products.map(({ node }) => (
                 <ProductCard
+                  variant="simple"
                   key={node.path}
                   className="animate__animated animate__fadeIn"
                   product={node}

yarn.lock

@@ -1514,20 +1514,20 @@
     meow "^7.0.0"
     prettier "^2.0.5"
 
-"@next/env@9.5.6-canary.6":
+"@next/env@9.5.6-canary.9":
-  version "9.5.6-canary.6"
+  version "9.5.6-canary.9"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.6.tgz#1aef358efc8d97ef6279d8539067df1ee4cea8af"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.9.tgz#d1f4fbfc424074b791b5e94ed8b1018624d8f588"
-  integrity sha512-WeM+gDMDUSDq+AidayYYkYKM9d8tqrpz6NMeM1Ga7zB96iymj72RdYZjEG2du4YcoSZ69m4nRHKUTMO9D2FTfQ==
+  integrity sha512-/LQJcKrgWOCMWiEE4V56IQivLeVx8dvEpWLNGdeX5zaWIB9Vqp/peK8VJaz2mZf2+RRwy3GidBCueatAa37SLg==
 
-"@next/polyfill-module@9.5.6-canary.6":
+"@next/polyfill-module@9.5.6-canary.9":
-  version "9.5.6-canary.6"
+  version "9.5.6-canary.9"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.6.tgz#185b659bbc06f75ff221c02a934a342bde181f85"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.9.tgz#1270e7bbeb11c88103f6013794f89c92d7e37d5a"
-  integrity sha512-rt1XA3RILd4MU+mVI33yeyyCS8qlEaWuRHbX/LTKNNlVY9u3fQKr1ir0EboPj4ovQrZQaPzShgOoeN9Xe5xeaw==
+  integrity sha512-X4csjgv4CBcu6hr4XT21fWv9s5CvQw7UlCvTQa4H+No/ELfi4ITCBJJzHa4smCYcYSZXRHkW1J71p+D2HvQ23w==
 
-"@next/react-dev-overlay@9.5.6-canary.6":
+"@next/react-dev-overlay@9.5.6-canary.9":
-  version "9.5.6-canary.6"
+  version "9.5.6-canary.9"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.6.tgz#73950f96f2f57b34424988693e4734b3a5c010b6"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.9.tgz#a295117b6837e6c0bd7822fb689a5765e74702b4"
-  integrity sha512-oEY43VgFRdesKzI42Q+gfiagXlBbDtvQ0m8WSuFZS1VqTPFvrOKQ1BqUhOyNciryi5vdNo6QFW0vreeejlccLw==
+  integrity sha512-sqcler8Jl29p4UPdGRUAIfbWO0UwsWUyJ7KY4w5xLNu21z5fu0+cb47JoZAaOfdxYx15ySnkhMqCp5O14/QpUA==
   dependencies:
     "@babel/code-frame" "7.10.4"
     ally.js "1.4.1"
@@ -1540,10 +1540,10 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@9.5.6-canary.6":
+"@next/react-refresh-utils@9.5.6-canary.9":
-  version "9.5.6-canary.6"
+  version "9.5.6-canary.9"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.6.tgz#a81fce1feb00e2ba8bc13e42191b04e4d810c6dd"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.9.tgz#e552e441a6a61acb94d81e76bea315d88bd12fed"
-  integrity sha512-SEVl95GfbwRWBZOkCUkMX9iYnD7EufIsduBs8npFuUfFwqVxGmvL2RmWqKQhloHeLPJELzTzPBxuydJ07MXxog==
+  integrity sha512-i9lbMJ3RTZ3GBVAmgjpRuvr3nxLEdJeAbUD8WDcHJo5Asa2VIsH/+TJgdhZ7Td9eJ6c2A+xmrEVBVvVwZsca+w==
 
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
@@ -2528,16 +2528,13 @@ acorn@^8.0.3:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.0.4.tgz#7a3ae4191466a6984eee0fe3407a4f3aa9db8354"
   integrity sha512-XNP0PqF1XD19ZlLKvB7cMmnZswW4C/03pRHgirB30uSJTaS3A3V1/P4sS3HPvFmjoriPCJQs+JDSbm4bL1TxGQ==
 
-adjust-sourcemap-loader@2.0.0:
+adjust-sourcemap-loader@3.0.0:
-  version "2.0.0"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz#6471143af75ec02334b219f54bc7970c52fb29a4"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz#5ae12fb5b7b1c585e80bbb5a63ec163a1a45e61e"
-  integrity sha512-4hFsTsn58+YjrU9qKzML2JSSDqKvN8mUGQ0nNIrfPi8hmIONT4L3uUaT6MKdMsZ9AjsU6D2xDkZxCkbQPxChrA==
+  integrity sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==
   dependencies:
-    assert "1.4.1"
+    loader-utils "^2.0.0"
-    camelcase "5.0.0"
+    regex-parser "^2.2.11"
-    loader-utils "1.2.3"
-    object-path "0.11.4"
-    regex-parser "2.2.10"
 
 agent-base@6:
   version "6.0.1"
@@ -2732,13 +2729,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
-assert@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
-  integrity sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=
-  dependencies:
-    util "0.10.3"
-
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@@ -3187,11 +3177,6 @@ camelcase-keys@^6.2.2:
     map-obj "^4.0.0"
     quick-lru "^4.0.1"
 
-camelcase@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
-  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
-
 camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -4918,11 +4903,6 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3,
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-inherits@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
-
 ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
@@ -6011,10 +5991,10 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@^9.5.6-canary.4:
+next@^9.5.6-canary.9:
-  version "9.5.6-canary.6"
+  version "9.5.6-canary.9"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.6.tgz#5335a3cd93a3fe85ebfb986c614081885d8e1a2d"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.9.tgz#93acf48d395a54269eeff77d67a5bb6b46c87c22"
-  integrity sha512-u54H/v91wHayaJzIx+u9x9mtt8fuPUJpFzLk6VORM9jhwDZbgbtzaFyp7rkq71rECtJhzu+X2KtTHPcEejtX8A==
+  integrity sha512-i/vNrr4VxqPUiPn5HdR0C2TcAqUmfc5lY6Qj7Hywi4Uit+f9ltWKC+r4WoOw6iIs+TRTej/EzrKnyXEUn5vAcQ==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.6.0"
     "@babel/code-frame" "7.10.4"
@@ -6035,10 +6015,10 @@ next@^9.5.6-canary.4:
     "@babel/runtime" "7.11.2"
     "@babel/types" "7.11.5"
     "@hapi/accept" "5.0.1"
-    "@next/env" "9.5.6-canary.6"
+    "@next/env" "9.5.6-canary.9"
-    "@next/polyfill-module" "9.5.6-canary.6"
+    "@next/polyfill-module" "9.5.6-canary.9"
-    "@next/react-dev-overlay" "9.5.6-canary.6"
+    "@next/react-dev-overlay" "9.5.6-canary.9"
-    "@next/react-refresh-utils" "9.5.6-canary.6"
+    "@next/react-refresh-utils" "9.5.6-canary.9"
     ast-types "0.13.2"
     babel-plugin-transform-define "2.0.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
@@ -6064,7 +6044,7 @@ next@^9.5.6-canary.4:
     prop-types "15.7.2"
     react-is "16.13.1"
     react-refresh "0.8.3"
-    resolve-url-loader "3.1.1"
+    resolve-url-loader "3.1.2"
     sass-loader "10.0.2"
     schema-utils "2.7.1"
     stream-browserify "3.0.0"
@@ -6235,11 +6215,6 @@ object-keys@^1.0.12, object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-path@0.11.4:
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
-  integrity sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=
-
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -7274,10 +7249,10 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regex-parser@2.2.10:
+regex-parser@^2.2.11:
-  version "2.2.10"
+  version "2.2.11"
-  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
-  integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==
+  integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
 
 regexpu-core@^4.7.1:
   version "4.7.1"
@@ -7423,12 +7398,12 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-url-loader@3.1.1:
+resolve-url-loader@3.1.2:
-  version "3.1.1"
+  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz#28931895fa1eab9be0647d3b2958c100ae3c0bf0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
-  integrity sha512-K1N5xUjj7v0l2j/3Sgs5b8CjrrgtC70SmdCuZiJ8tSyb5J+uk3FoeZ4b7yTnH6j7ngI+Bc5bldHJIa8hYdu2gQ==
+  integrity sha512-QEb4A76c8Mi7I3xNKXlRKQSlLBwjUV/ULFMP+G7n3/7tJZ8MG5wsZ3ucxP1Jz8Vevn6fnJsxDx9cIls+utGzPQ==
   dependencies:
-    adjust-sourcemap-loader "2.0.0"
+    adjust-sourcemap-loader "3.0.0"
     camelcase "5.3.1"
     compose-function "3.0.3"
     convert-source-map "1.7.0"
@@ -8417,13 +8392,6 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-util@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
-  dependencies:
-    inherits "2.0.1"
-
 uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"