Merge branch 'master' of github.com:okbel/e-comm-example

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

@@ -17,8 +17,7 @@ const loginHandler: LoginHandlers['login'] = async ({
   // 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 })
+  await login({ variables: { email, password }, config, res })
 
   res.status(200).json({ data: null })
 }

lib/bigcommerce/api/operations/login.ts

@@ -49,9 +49,17 @@ async function login({
     query,
     { variables }
   )
-  const cookie = res.headers.get('Set-Cookie')
+  // Bigcommerce returns a Set-Cookie header with the auth cookie
+  let cookie = res.headers.get('Set-Cookie')
 
   if (cookie && typeof cookie === 'string') {
+    // In development, don't set a secure cookie or the browser will ignore it
+    if (process.env.NODE_ENV !== 'production') {
+      cookie = cookie.replace('; Secure', '')
+      // SameSite=none can't be set unless the cookie is Secure
+      cookie = cookie.replace('; SameSite=none', '; SameSite=lax')
+    }
+
     response.setHeader(
       'Set-Cookie',
       concatHeader(response.getHeader('Set-Cookie'), cookie)!

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

@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+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 { ItemBody, AddItemBody } from '../api/cart'
 import useCart, { Cart } from './use-cart'
@@ -20,9 +21,9 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
     item.quantity &&
     (!Number.isInteger(item.quantity) || item.quantity! < 1)
   ) {
-    throw new Error(
-      'The item quantity has to be a valid integer greater than 0'
-    )
+    throw new CommerceError({
+      message: 'The item quantity has to be a valid integer greater than 0',
+    })
   }
 
   return fetch({

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

@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 import debounce from 'lodash.debounce'
-import { HookFetcher } from '@lib/commerce/utils/types'
+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 { ItemBody, UpdateItemBody } from '../api/cart'
 import { fetcher as removeFetcher } from './use-remove-item'
@@ -24,7 +25,9 @@ export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
       return removeFetcher(null, { itemId }, fetch)
     }
   } else if (item.quantity) {
-    throw new Error('The item quantity has to be a valid integer')
+    throw new CommerceError({
+      message: 'The item quantity has to be a valid integer',
+    })
   }
 
   return fetch({

lib/bigcommerce/use-login.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '@lib/commerce/utils/types'
+import { CommerceError } from '@lib/commerce/utils/errors'
 import useCommerceLogin from '@lib/commerce/use-login'
 import type { LoginBody } from './api/customers/login'
 
@@ -16,9 +17,10 @@ export const fetcher: HookFetcher<null, LoginBody> = (
   fetch
 ) => {
   if (!(email && password)) {
-    throw new Error(
-      'A first name, last name, email and password are required to login'
-    )
+    throw new CommerceError({
+      message:
+        'A first name, last name, email and password are required to login',
+    })
   }
 
   return fetch({

lib/bigcommerce/use-signup.tsx

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

pages/login.tsx

@@ -4,7 +4,7 @@ import { Logo, Modal, Button } from '@components/ui'
 
 export default function Login() {
   const signup = useSignup()
-  // TODO: use this method
+  // TODO: use this method. It can take more than 5 seconds to do a signup
   const handleSignup = async () => {
     // TODO: validate the password and email before calling the signup
     // Passwords must be at least 7 characters and contain both alphabetic