Moved auth & cart hooks + several fixes

framework/shopify/auth/use-login.tsx

@@ -1,56 +1,80 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
 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-access-token-create'
-import { CustomerAccessTokenCreateInput } from '@framework/schema'
-import handleLogin from '@framework/utils/handle-login'
+import {
+  CustomerAccessToken,
+  CustomerAccessTokenCreateInput,
+  CustomerAccessTokenCreatePayload,
+  CustomerUserError,
+  Mutation,
+  MutationCheckoutCreateArgs,
+} from '@framework/schema'
+import useLogin, { UseLogin } from '@commerce/use-login'
+import { setCustomerToken } from '@framework/utils'
 
-const defaultOpts = {
-  query: createCustomerAccessTokenMutation,
-}
+export default useLogin as UseLogin<typeof handler>
 
-export const fetcher: HookFetcher<null, CustomerAccessTokenCreateInput> = (
-  options,
-  input,
-  fetch
-) => {
-  if (!(input.email && input.password)) {
-    throw new CommerceError({
-      message:
-        'A first name, last name, email and password are required to login',
-    })
+const getErrorMessage = ({ code, message }: CustomerUserError) => {
+  console.log(code)
+
+  switch (code) {
+    case 'UNIDENTIFIED_CUSTOMER':
+      message = 'Cannot find an account that matches the provided credentials'
+      break
   }
-
-  return fetch({
-    ...defaultOpts,
-    ...options,
-    variables: { input },
-  }).then(handleLogin)
+  return message
 }
 
-export function extendHook(customFetcher: typeof fetcher) {
-  const useLogin = () => {
+export const handler: MutationHook<null, {}, CustomerAccessTokenCreateInput> = {
+  fetchOptions: {
+    query: createCustomerAccessTokenMutation,
+  },
+  async fetcher({ input: { email, password }, options, fetch }) {
+    if (!(email && password)) {
+      throw new CommerceError({
+        message:
+          'A first name, last name, email and password are required to login',
+      })
+    }
+
+    const { customerAccessTokenCreate } = await fetch<
+      Mutation,
+      MutationCheckoutCreateArgs
+    >({
+      ...options,
+      variables: {
+        input: { email, password },
+      },
+    })
+
+    const errors = customerAccessTokenCreate?.customerUserErrors
+
+    if (errors && errors.length) {
+      throw new ValidationError({
+        message: getErrorMessage(errors[0]),
+      })
+    }
+    const customerAccessToken = customerAccessTokenCreate?.customerAccessToken
+    const accessToken = customerAccessToken?.accessToken
+
+    if (accessToken) {
+      setCustomerToken(accessToken)
+    }
+
+    return null
+  },
+  useHook: ({ fetch }) => () => {
     const { revalidate } = useCustomer()
-    const fn = useCommerceLogin<null, CustomerAccessTokenCreateInput>(
-      defaultOpts,
-      customFetcher
-    )
 
     return useCallback(
-      async function login(input: CustomerAccessTokenCreateInput) {
-        const data = await fn(input)
+      async function login(input) {
+        const data = await fetch({ input })
         await revalidate()
         return data
       },
-      [fn]
+      [fetch, revalidate]
     )
-  }
-
-  useLogin.extend = extendHook
-
-  return useLogin
+  },
 }
-
-export default extendHook(fetcher)

framework/shopify/auth/use-logout.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@commerce/utils/types'
-import useCommerceLogout from '@commerce/use-logout'
+import type { MutationHook } from '@commerce/utils/types'
+import useLogout, { UseLogout } from '@commerce/use-logout'
 import useCustomer from '../customer/use-customer'
 import customerAccessTokenDeleteMutation from '@framework/utils/mutations/customer-access-token-delete'
 import {
@@ -8,38 +8,32 @@ import {
   setCustomerToken,
 } from '@framework/utils/customer-token'
 
-const defaultOpts = {
-  query: customerAccessTokenDeleteMutation,
-}
+export default useLogout as UseLogout<typeof handler>
 
-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 = () => {
+export const handler: MutationHook<null> = {
+  fetchOptions: {
+    query: customerAccessTokenDeleteMutation,
+  },
+  async fetcher({ options, fetch }) {
+    await fetch({
+      ...options,
+      variables: {
+        customerAccessToken: getCustomerToken(),
+      },
+    })
+    setCustomerToken(null)
+    return null
+  },
+  useHook: ({ fetch }) => () => {
     const { mutate } = useCustomer()
-    const fn = useCommerceLogout<null>(defaultOpts, customFetcher)
 
     return useCallback(
-      async function login() {
-        const data = await fn(null)
+      async function logout() {
+        const data = await fetch()
         await mutate(null, false)
         return data
       },
-      [fn]
+      [fetch, mutate]
     )
-  }
-
-  useLogout.extend = extendHook
-
-  return useLogout
+  },
 }
-
-export default extendHook(fetcher)

framework/shopify/auth/use-signup.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useCommerceSignup from '@commerce/use-signup'
+import useSignup, { UseSignup } from '@commerce/use-signup'
 import useCustomer from '../customer/use-customer'
 import { CustomerCreateInput } from '@framework/schema'
 
@@ -11,63 +11,64 @@ import {
 } from '@framework/utils/mutations'
 import handleLogin from '@framework/utils/handle-login'
 
-const defaultOpts = {
-  query: customerCreateMutation,
-}
+export default useSignup as UseSignup<typeof handler>
 
-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',
+export const handler: MutationHook<
+  null,
+  {},
+  CustomerCreateInput,
+  CustomerCreateInput
+> = {
+  fetchOptions: {
+    query: customerCreateMutation,
+  },
+  async fetcher({
+    input: { firstName, lastName, email, password },
+    options,
+    fetch,
+  }) {
+    if (!(firstName && lastName && email && password)) {
+      throw new CommerceError({
+        message:
+          'A first name, last name, email and password are required to signup',
+      })
+    }
+    const data = await fetch({
+      ...options,
+      variables: {
+        input: {
+          firstName,
+          lastName,
+          email,
+          password,
+        },
+      },
     })
-  }
-  return fetch({
-    ...defaultOpts,
-    ...options,
-    variables: { input },
-  }).then(async (data) => {
+
     try {
       const loginData = await fetch({
         query: customerAccessTokenCreateMutation,
         variables: {
           input: {
-            email: input.email,
-            password: input.password,
+            email,
+            password,
           },
         },
       })
       handleLogin(loginData)
     } catch (error) {}
     return data
-  })
-}
-
-export function extendHook(customFetcher: typeof fetcher) {
-  const useSignup = () => {
+  },
+  useHook: ({ fetch }) => () => {
     const { revalidate } = useCustomer()
-    const fn = useCommerceSignup<null, CustomerCreateInput>(
-      defaultOpts,
-      customFetcher
-    )
 
     return useCallback(
-      async function signup(input: CustomerCreateInput) {
-        const data = await fn(input)
+      async function signup(input) {
+        const data = await fetch({ input })
         await revalidate()
         return data
       },
-      [fn]
+      [fetch, revalidate]
     )
-  }
-
-  useSignup.extend = extendHook
-
-  return useSignup
+  },
 }
-
-export default extendHook(fetcher)