Fix auth & wishlist

packages/bigcommerce/src/api/endpoints/customer/get-logged-in-customer.ts

@@ -34,7 +34,7 @@ const getLoggedInCustomer: CustomerEndpoint['handlers']['getLoggedInCustomer'] =
         getLoggedInCustomerQuery,
         undefined,
         {
-          'Set-Cookie': `${config.customerCookie}=${token}`,
+          cookie: `${config.customerCookie}=${token}`,
         }
       )
       const { customer } = data

packages/bigcommerce/src/api/endpoints/login/login.ts

@@ -11,12 +11,12 @@ const login: LoginEndpoint['handlers']['login'] = async ({
   commerce,
 }) => {
   try {
-    const res = new Response()
+    const response = await commerce.login({
-    await commerce.login({ variables: { email, password }, config, res })
+      variables: { email, password },
-    return {
+      config,
-      status: res.status,
+    })
-      headers: res.headers,
+
-    }
+    return response
   } catch (error) {
     // Check if the email and password didn't match an existing account
     if (error instanceof FetcherError) {
@@ -24,7 +24,7 @@ const login: LoginEndpoint['handlers']['login'] = async ({
         invalidCredentials.test(error.message)
           ? 'Cannot find an account that matches the provided credentials'
           : error.message,
-        { status: error.status || 401 }
+        { status: 401 }
       )
     } else {
       throw error

packages/bigcommerce/src/api/endpoints/signup/signup.ts

@@ -1,6 +1,5 @@
 import type { SignupEndpoint } from '.'
 import { CommerceAPIError } from '@vercel/commerce/api/utils/errors'
-
 import { BigcommerceApiError } from '../../utils/errors'
 
 const signup: SignupEndpoint['handlers']['signup'] = async ({
@@ -22,28 +21,25 @@ const signup: SignupEndpoint['handlers']['signup'] = async ({
         },
       ]),
     })
-  } 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) {
-        throw new CommerceAPIError('Email already in use', {
-          status: 400,
-          code: 'duplicated_email',
-        })
-      }
-    } else {
-      throw error
-    }
-  }
-
-  const res = new Response()
 
     // Login the customer right after creating it
-  await commerce.login({ variables: { email, password }, res, config })
+    const response = await commerce.login({
+      variables: { email, password },
+      config,
+    })
 
-  return {
+    return response
-    headers: res.headers,
+  } catch (error) {
+    // Display all validation errors from BigCommerce in a single error message
+    if (error instanceof BigcommerceApiError && error.status >= 400) {
+      const message = Object.values(error.data.errors).join('<br />')
+      throw new CommerceAPIError(message, {
+        status: 400,
+        code: 'invalid_request',
+      })
+    }
+
+    throw error
   }
 }
 

packages/bigcommerce/src/api/endpoints/wishlist/add-item.ts

@@ -1,6 +1,7 @@
 import { parseWishlistItem } from '../../utils/parse-item'
 import getCustomerId from '../../utils/get-customer-id'
 import type { WishlistEndpoint } from '.'
+import { normalizeWishlist } from '../../../lib/normalize'
 
 const addItem: WishlistEndpoint['handlers']['addItem'] = async ({
   body: { customerToken, item },
@@ -31,7 +32,7 @@ const addItem: WishlistEndpoint['handlers']['addItem'] = async ({
       }),
     })
     return {
-      data,
+      data: normalizeWishlist(data),
     }
   }
 
@@ -47,7 +48,9 @@ const addItem: WishlistEndpoint['handlers']['addItem'] = async ({
   )
 
   // Returns Wishlist
-  return { data }
+  return {
+    data: normalizeWishlist(data),
+  }
 }
 
 export default addItem

packages/bigcommerce/src/api/endpoints/wishlist/get-wishlist.ts

@@ -1,5 +1,4 @@
 import { CommerceAPIError } from '@vercel/commerce/api/utils/errors'
-import type { Wishlist } from '@vercel/commerce/types/wishlist'
 import type { WishlistEndpoint } from '.'
 import getCustomerId from '../../utils/get-customer-id'
 
@@ -9,8 +8,6 @@ const getWishlist: WishlistEndpoint['handlers']['getWishlist'] = async ({
   config,
   commerce,
 }) => {
-  let result: { data?: Wishlist } = {}
-
   if (customerToken) {
     const customerId =
       customerToken && (await getCustomerId({ customerToken, config }))
@@ -25,10 +22,10 @@ const getWishlist: WishlistEndpoint['handlers']['getWishlist'] = async ({
       config,
     })
 
-    result = { data: wishlist }
+    return { data: wishlist }
   }
 
-  return { data: result.data ?? null }
+  return { data: null }
 }
 
 export default getWishlist

packages/bigcommerce/src/api/endpoints/wishlist/remove-item.ts

@@ -1,7 +1,9 @@
-import type { Wishlist } from '@vercel/commerce/types/wishlist'
-import getCustomerId from '../../utils/get-customer-id'
 import type { WishlistEndpoint } from '.'
+import type { BCWishlist } from '../../utils/types'
+
+import getCustomerId from '../../utils/get-customer-id'
 import { CommerceAPIError } from '@vercel/commerce/api/utils/errors'
+import { normalizeWishlist } from '../../../lib/normalize'
 
 // Return wishlist info
 const removeItem: WishlistEndpoint['handlers']['removeItem'] = async ({
@@ -11,6 +13,7 @@ const removeItem: WishlistEndpoint['handlers']['removeItem'] = async ({
 }) => {
   const customerId =
     customerToken && (await getCustomerId({ customerToken, config }))
+
   const { wishlist } =
     (customerId &&
       (await commerce.getCustomerWishlist({
@@ -23,13 +26,12 @@ const removeItem: WishlistEndpoint['handlers']['removeItem'] = async ({
     throw new CommerceAPIError('Wishlist not found', { status: 400 })
   }
 
-  const result = await config.storeApiFetch<{ data: Wishlist } | null>(
+  const result = await config.storeApiFetch<{ data: BCWishlist } | null>(
     `/v3/wishlists/${wishlist.id}/items/${itemId}`,
     { method: 'DELETE' }
   )
-  const data = result?.data ?? null
 
-  return { data }
+  return { data: result?.data ? normalizeWishlist(result.data) : null }
 }
 
 export default removeItem

packages/bigcommerce/src/api/operations/get-customer-wishlist.ts

@@ -2,13 +2,11 @@ import type {
   OperationContext,
   OperationOptions,
 } from '@vercel/commerce/api/operations'
-import type {
+import type { GetCustomerWishlistOperation } from '@vercel/commerce/types/wishlist'
-  GetCustomerWishlistOperation,
+import type { RecursivePartial, BCWishlist } from '../utils/types'
-  Wishlist,
-} from '@vercel/commerce/types/wishlist'
-import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import { BigcommerceConfig, Provider } from '..'
-import getAllProducts, { ProductEdge } from './get-all-products'
+import { ProductEdge } from './get-all-products'
+import { normalizeWishlist } from '../../lib/normalize'
 
 export default function getCustomerWishlistOperation({
   commerce,
@@ -41,18 +39,22 @@ export default function getCustomerWishlistOperation({
   }): Promise<T['data']> {
     config = commerce.getConfig(config)
 
-    const { data = [] } = await config.storeApiFetch<
+    const { data = [] } = await config.storeApiFetch<{ data: BCWishlist[] }>(
-      RecursivePartial<{ data: Wishlist[] }>
+      `/v3/wishlists?customer_id=${variables.customerId}`
-    >(`/v3/wishlists?customer_id=${variables.customerId}`)
+    )
 
     const wishlist = data[0]
 
     if (includeProducts && wishlist?.items?.length) {
-      const ids = wishlist.items
+      const ids = []
-        ?.map((item) => (item?.productId ? String(item?.productId) : null))
-        .filter((id): id is string => !!id)
 
-      if (ids?.length) {
+      for (let i = 0; i < wishlist.items.length; i++) {
+        if (wishlist.items[i].product_id) {
+          ids.push(String(wishlist.items[i]?.product_id))
+        }
+      }
+
+      if (ids.length) {
         const graphqlData = await commerce.getAllProducts({
           variables: { first: 50, ids },
           config,
@@ -66,7 +68,7 @@ export default function getCustomerWishlistOperation({
         }, {})
         // Populate the wishlist items with the graphql products
         wishlist.items.forEach((item) => {
-          const product = item && productsById[Number(item.productId)]
+          const product = item && productsById[Number(item.product_id)]
           if (item && product) {
             // @ts-ignore Fix this type when the wishlist type is properly defined
             item.product = product
@@ -75,7 +77,7 @@ export default function getCustomerWishlistOperation({
       }
     }
 
-    return { wishlist: wishlist as RecursiveRequired<typeof wishlist> }
+    return { wishlist: wishlist && normalizeWishlist(wishlist) }
   }
 
   return getCustomerWishlist

packages/bigcommerce/src/api/operations/login.ts

@@ -22,26 +22,23 @@ export default function loginOperation({
   async function login<T extends LoginOperation>(opts: {
     variables: T['variables']
     config?: BigcommerceConfig
-    res: Response
   }): Promise<T['data']>
 
   async function login<T extends LoginOperation>(
     opts: {
       variables: T['variables']
       config?: BigcommerceConfig
-      res: Response
     } & OperationOptions
   ): Promise<T['data']>
 
   async function login<T extends LoginOperation>({
     query = loginMutation,
     variables,
-    res: response,
     config,
   }: {
     query?: string
     variables: T['variables']
-    res: Response
+
     config?: BigcommerceConfig
   }): Promise<T['data']> {
     config = commerce.getConfig(config)
@@ -50,6 +47,9 @@ export default function loginOperation({
       query,
       { variables }
     )
+
+    const headers = new Headers()
+
     // Bigcommerce returns a Set-Cookie header with the auth cookie
     let cookie = res.headers.get('Set-Cookie')
 
@@ -63,19 +63,13 @@ export default function loginOperation({
         cookie = cookie.replace(/; SameSite=none/gi, '; SameSite=lax')
       }
 
-      const prevCookie = response.headers.get('Set-Cookie')
+      headers.set('Set-Cookie', cookie)
-      const newCookie = concatHeader(prevCookie, cookie)
-
-      if (newCookie) {
-        res.headers.set(
-          'Set-Cookie',
-          String(Array.isArray(newCookie) ? newCookie.join(',') : newCookie)
-        )
-      }
     }
 
     return {
       result: data.login?.result,
+      headers,
+      status: res.status,
     }
   }
 

packages/bigcommerce/src/api/utils/fetch-graphql-api.ts

@@ -7,7 +7,7 @@ const fetchGraphqlApi: (getConfig: () => BigcommerceConfig) => GraphQLFetcher =
   async (
     query: string,
     { variables, preview } = {},
-    options: { headers?: HeadersInit } = {}
+    headers?: HeadersInit
   ): Promise<any> => {
     // log.warn(query)
     const config = getConfig()
@@ -16,7 +16,7 @@ const fetchGraphqlApi: (getConfig: () => BigcommerceConfig) => GraphQLFetcher =
       method: 'POST',
       headers: {
         Authorization: `Bearer ${config.apiToken}`,
-        ...options.headers,
+        ...headers,
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({

packages/bigcommerce/src/api/utils/get-customer-id.ts

@@ -20,7 +20,7 @@ async function getCustomerId({
     getCustomerIdQuery,
     undefined,
     {
-      'Set-Cookie': `${config.customerCookie}=${customerToken}`,
+      cookie: `${config.customerCookie}=${customerToken}`,
     }
   )
 

packages/bigcommerce/src/api/utils/types.ts

@@ -5,3 +5,15 @@ export type RecursivePartial<T> = {
 export type RecursiveRequired<T> = {
   [P in keyof T]-?: RecursiveRequired<T[P]>
 }
+
+export interface BCWishlist {
+  id: number
+  items: {
+    id: number
+    customer_id: number
+    is_public: boolean
+    product_id: number
+    variant_id: number
+  }[]
+  token: string
+}

packages/bigcommerce/src/lib/normalize.ts

@@ -5,8 +5,10 @@ import type { Category, Brand } from '@vercel/commerce/types/site'
 import type { BigcommerceCart, BCCategory, BCBrand } from '../types'
 import type { ProductNode } from '../api/operations/get-all-products'
 import type { definitions } from '../api/definitions/store-content'
+import type { BCWishlist } from '../api/utils/types'
 
 import getSlug from './get-slug'
+import { Wishlist } from '@vercel/commerce/types/wishlist'
 
 function normalizeProductOption(productOption: any) {
   const {
@@ -137,3 +139,16 @@ export function normalizeBrand(brand: BCBrand): Brand {
     path: `/${slug}`,
   }
 }
+
+export function normalizeWishlist(wishlist: BCWishlist): Wishlist {
+  return {
+    id: String(wishlist.id),
+    token: wishlist.token,
+    items: wishlist.items.map((item: any) => ({
+      id: String(item.id),
+      productId: String(item.product_id),
+      variantId: String(item.variant_id),
+      product: item.product,
+    })),
+  }
+}

packages/commerce/src/api/endpoints/wishlist.ts

@@ -35,7 +35,7 @@ const wishlistEndpoint: GetAPISchema<
   if (req.method === 'GET') {
     const body = getWishlistBodySchema.parse({
       customerToken,
-      includeProducts: !!products,
+      includeProducts: input.includeProducts ?? !!products,
     })
     output = await handlers['getWishlist']({ ...ctx, body })
   }

packages/commerce/src/api/utils/index.ts

@@ -44,7 +44,9 @@ export const transformRequest = (req: NextApiRequest, path: string) => {
     body = JSON.stringify(req.body)
   }
 
-  return new NextRequest(`https://${req.headers.host}/api/commerce/${path}`, {
+  const url = new URL(req.url || '/', `https://${req.headers.host}`)
+
+  return new NextRequest(url, {
     headers,
     method: req.method,
     body,

packages/commerce/src/schemas/customer.ts

@@ -5,6 +5,7 @@ export const getCustomerAddressBodySchema = z.object({
 })
 
 export const customerSchema = z.object({
+  customer: z.object({
     id: z.string(),
     firstName: z.string(),
     lastName: z.string(),
@@ -13,6 +14,7 @@ export const customerSchema = z.object({
     company: z.string().optional(),
     notes: z.string().optional(),
     acceptsMarketing: z.boolean().optional(),
+  }),
 })
 
 export const addressSchema = z.object({

packages/commerce/src/schemas/whishlist.ts

@@ -5,7 +5,7 @@ export const wishlistSchemaItem = z.object({
   id: z.string(),
   productId: z.string(),
   variantId: z.string(),
-  product: productSchema,
+  product: productSchema.optional(),
 })
 
 export const wishlistSchema = z.object({
@@ -15,7 +15,7 @@ export const wishlistSchema = z.object({
 })
 
 export const getWishlistBodySchema = z.object({
-  customerAccessToken: z.string(),
+  customerToken: z.string().optional(),
   includeProducts: z.boolean(),
 })
 
@@ -25,17 +25,17 @@ export const wishlistItemBodySchema = z.object({
 })
 
 export const addItemBodySchema = z.object({
-  cartId: z.string().optional(),
+  customerToken: z.string(),
   item: wishlistItemBodySchema,
 })
 
 export const updateItemBodySchema = z.object({
-  cartId: z.string(),
+  customerToken: z.string(),
   itemId: z.string(),
   item: wishlistItemBodySchema,
 })
 
 export const removeItemBodySchema = z.object({
-  cartId: z.string(),
+  customerToken: z.string(),
   itemId: z.string(),
 })

packages/commerce/src/types/login.ts

@@ -26,6 +26,6 @@ export type LoginSchema = {
 }
 
 export type LoginOperation = {
-  data: { result?: string }
+  data: { result?: string; status?: number; headers?: Headers }
   variables: unknown
 }

site/components/auth/LoginView.tsx

@@ -31,7 +31,6 @@ const LoginView: React.FC = () => {
         email,
         password,
       })
-      setLoading(false)
       closeModal()
     } catch ({ errors }) {
       if (errors instanceof Array) {
@@ -39,15 +38,15 @@ const LoginView: React.FC = () => {
       } else {
         setMessage('Unexpected error')
       }
-      setLoading(false)
       setDisabled(false)
+    } finally {
+      setLoading(false)
     }
   }
 
   const handleValidation = useCallback(() => {
     // Test for Alphanumeric password
     const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
-
     // Unable to send form unless fields are valid.
     if (dirty) {
       setDisabled(!validate(email) || password.length < 7 || !validPassword)

site/components/auth/SignUpView.tsx

@@ -38,7 +38,6 @@ const SignUpView: FC<Props> = () => {
         lastName,
         password,
       })
-      setLoading(false)
       closeModal()
     } catch ({ errors }) {
       console.error(errors)
@@ -47,8 +46,9 @@ const SignUpView: FC<Props> = () => {
       } else {
         setMessage('Unexpected error')
       }
-      setLoading(false)
       setDisabled(false)
+    } finally {
+      setLoading(false)
     }
   }
 

site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.module.css

@@ -4,7 +4,6 @@
   z-index: 10;
   height: 100vh;
   min-width: 100vw;
-  transition: none;
 }
 
 @media screen(lg) {
@@ -18,8 +17,7 @@
 .link {
   @apply text-primary flex cursor-pointer px-6 py-3
     transition ease-in-out duration-150 leading-6
-    font-medium items-center capitalize w-full box-border
+    font-medium items-center capitalize w-full box-border outline-0;
-    outline-0;
 }
 
 .link:hover {

site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx

@@ -35,13 +35,7 @@ export default function CustomerMenuContent() {
   }
 
   return (
-    <DropdownContent
+    <DropdownContent sideOffset={10} id="CustomerMenuContent">
-      asChild
-      side="bottom"
-      sideOffset={10}
-      className={s.root}
-      id="CustomerMenuContent"
-    >
       {LINKS.map(({ name, href }) => (
         <DropdownMenuItem key={href}>
           <a

site/components/common/UserNav/UserNav.module.css

@@ -7,12 +7,15 @@
 }
 
 .item {
-  @apply ml-6 cursor-pointer relative transition ease-in-out
+  @apply ml-6 flex items-center relative;
-  duration-100 flex items-center outline-none text-primary;
 }
 
-.item:hover {
+.item > button {
-  @apply text-accent-6 transition scale-110 duration-100;
+  @apply cursor-pointer transition ease-in-out duration-100 outline-none text-primary;
+}
+
+.item > button:hover {
+  @apply text-accent-6 transition scale-110 outline-none;
 }
 
 .item:first-child {

site/components/common/UserNav/UserNav.tsx

@@ -23,13 +23,8 @@ const UserNav: React.FC<{
 }> = ({ className }) => {
   const { data } = useCart()
   const { data: isCustomerLoggedIn } = useCustomer()
-  const {
+  const { closeSidebarIfPresent, openModal, setSidebarView, openSidebar } =
-    toggleSidebar,
+    useUI()
-    closeSidebarIfPresent,
-    openModal,
-    setSidebarView,
-    openSidebar,
-  } = useUI()
 
   const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
   const DropdownTrigger = isCustomerLoggedIn
@@ -60,9 +55,9 @@ const UserNav: React.FC<{
         {process.env.COMMERCE_WISHLIST_ENABLED && (
           <li className={s.item}>
             <Link href="/wishlist">
-              <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
+              <button onClick={closeSidebarIfPresent} aria-label="Wishlist">
                 <Heart />
-              </a>
+              </button>
             </Link>
           </li>
         )}

site/components/wishlist/WishlistButton/WishlistButton.tsx

@@ -27,10 +27,8 @@ const WishlistButton: FC<Props> = ({
   const { openModal, setModalView } = useUI()
   const [loading, setLoading] = useState(false)
 
-  // @ts-ignore Wishlist is not always enabled
   const itemInWishlist = data?.items?.find(
-    // @ts-ignore Wishlist is not always enabled
+    (item) => item.productId === productId && item.variantId === variant.id
-    (item) => item.product_id === productId && item.variant_id === variant.id
   )
 
   const handleWishlistChange = async (e: any) => {

site/components/wishlist/WishlistCard/WishlistCard.tsx

@@ -19,6 +19,7 @@ const WishlistCard: React.FC<{
   item: WishlistItem
 }> = ({ item }) => {
   const product: Product = item.product
+
   const { price } = usePrice({
     amount: product.price?.value,
     baseAmount: product.price?.retailPrice,

site/pages/wishlist.tsx

@@ -35,9 +35,9 @@ export async function getStaticProps({
 }
 
 export default function Wishlist() {
-  const { data: customer } = useCustomer()
+  const { data, isLoading, isEmpty } = useWishlist({
-  // @ts-ignore Shopify - Fix this types
+    includeProducts: true,
-  const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
+  })
 
   return (
     <Container className="pt-4">
@@ -45,10 +45,10 @@ export default function Wishlist() {
         <Text variant="pageHeading">My Wishlist</Text>
         <div className="group flex flex-col">
           {isLoading ? (
-            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6">
-              {rangeMap(12, (i) => (
+              {rangeMap(4, (i) => (
                 <Skeleton key={i}>
-                  <div className="w-60 h-60" />
+                  <div className="w-full h-[279px]" />
                 </Skeleton>
               ))}
             </div>

site/tsconfig.json

@@ -23,8 +23,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["../packages/commerce/src"],
       "@commerce/*": ["../packages/commerce/src/*"],
-      "@framework": ["../packages/local/src"],
+      "@framework": ["../packages/shopify/src"],
-      "@framework/*": ["../packages/local/src/*"]
+      "@framework/*": ["../packages/shopify/src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],