Login, Sign Up, Log Out, and checkout & customer association

framework/shopify/auth/use-login.tsx

@@ -1,21 +1,37 @@
 import { useCallback } from 'react'
 import type { HookFetcher } from '@commerce/utils/types'
-import { CommerceError } from '@commerce/utils/errors'
+import { CommerceError, ValidationError } from '@commerce/utils/errors'
 import useCommerceLogin from '@commerce/use-login'
 import useCustomer from '../customer/use-customer'
-import createCustomerAccessTokenMutation from '../utils/mutations/customer-acces-token-create'
+import createCustomerAccessTokenMutation from '../utils/mutations/customer-access-token-create'
 import { CustomerAccessTokenCreateInput } from '@framework/schema'
+import { setCustomerToken } from '@framework/utils/customer-token'
 
 const defaultOpts = {
   query: createCustomerAccessTokenMutation,
 }
 
+const getErrorMessage = ({
+  code,
+  message,
+}: {
+  code: string
+  message: string
+}) => {
+  switch (code) {
+    case 'UNIDENTIFIED_CUSTOMER':
+      message = 'Cannot find an account that matches the provided credentials'
+      break
+  }
+  return message
+}
+
 export const fetcher: HookFetcher<null, CustomerAccessTokenCreateInput> = (
   options,
-  { email, password },
+  input,
   fetch
 ) => {
-  if (!(email && password)) {
+  if (!(input.email && input.password)) {
     throw new CommerceError({
       message:
         'A first name, last name, email and password are required to login',
@@ -25,7 +41,25 @@ export const fetcher: HookFetcher<null, CustomerAccessTokenCreateInput> = (
   return fetch({
     ...defaultOpts,
     ...options,
-    body: { email, password },
+    variables: { input },
+  }).then((data) => {
+    const response = data?.customerAccessTokenCreate
+    const errors = response?.customerUserErrors
+
+    if (errors && errors.length) {
+      throw new ValidationError({
+        message: getErrorMessage(errors[0]),
+      })
+    }
+
+    const customerAccessToken = response?.customerAccessToken
+    const accessToken = customerAccessToken?.accessToken
+
+    if (accessToken) {
+      setCustomerToken(accessToken)
+    }
+
+    return customerAccessToken
   })
 }
 

framework/shopify/auth/use-logout.tsx

@@ -1,13 +1,45 @@
 import { useCallback } from 'react'
+import type { HookFetcher } from '@commerce/utils/types'
+import useCommerceLogout from '@commerce/use-logout'
+import useCustomer from '../customer/use-customer'
+import customerAccessTokenDeleteMutation from '@framework/utils/mutations/customer-access-token-delete'
+import {
+  getCustomerToken,
+  setCustomerToken,
+} from '@framework/utils/customer-token'
 
-export function emptyHook() {
-  const useEmptyHook = async (options = {}) => {
-    return useCallback(async function () {
-      return Promise.resolve()
-    }, [])
-  }
-
-  return useEmptyHook
+const defaultOpts = {
+  query: customerAccessTokenDeleteMutation,
 }
 
-export default emptyHook
+export const fetcher: HookFetcher<null> = (options, _, fetch) => {
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    variables: {
+      customerAccessToken: getCustomerToken(),
+    },
+  }).then((d) => setCustomerToken(null))
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useLogout = () => {
+    const { mutate } = useCustomer()
+    const fn = useCommerceLogout<null>(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function login() {
+        const data = await fn(null)
+        await mutate(null, false)
+        return data
+      },
+      [fn]
+    )
+  }
+
+  useLogout.extend = extendHook
+
+  return useLogout
+}
+
+export default extendHook(fetcher)

framework/shopify/auth/use-signup.tsx

@@ -1,13 +1,57 @@
 import { useCallback } from 'react'
+import type { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useCommerceSignup from '@commerce/use-signup'
+import useCustomer from '../customer/use-customer'
+import customerCreateMutation from '@framework/utils/mutations/customer-create'
+import { CustomerCreateInput } from '@framework/schema'
 
-export function emptyHook() {
-  const useEmptyHook = async (options = {}) => {
-    return useCallback(async function () {
-      return Promise.resolve()
-    }, [])
-  }
-
-  return useEmptyHook
+const defaultOpts = {
+  query: customerCreateMutation,
 }
 
-export default emptyHook
+export const fetcher: HookFetcher<null, CustomerCreateInput> = (
+  options,
+  input,
+  fetch
+) => {
+  if (!(input.firstName && input.lastName && input.email && input.password)) {
+    throw new CommerceError({
+      message:
+        'A first name, last name, email and password are required to signup',
+    })
+  }
+
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    variables: { input },
+  }).then((data) => {
+    return data
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useSignup = () => {
+    const { revalidate } = useCustomer()
+    const fn = useCommerceSignup<null, CustomerCreateInput>(
+      defaultOpts,
+      customFetcher
+    )
+
+    return useCallback(
+      async function signup(input: CustomerCreateInput) {
+        const data = await fn(input)
+        await revalidate()
+        return data
+      },
+      [fn]
+    )
+  }
+
+  useSignup.extend = extendHook
+
+  return useSignup
+}
+
+export default extendHook(fetcher)