refactor: update auth and fix error handling

framework/commercelayer/auth/use-login.tsx

@@ -2,14 +2,14 @@ import { MutationHook } from '@commerce/utils/types'
 import useLogin, { UseLogin } from '@commerce/auth/use-login'
 import { CommerceError } from '@commerce/utils/errors'
 import { getCustomerToken } from '@commercelayer/js-auth'
+import { ENDPOINT, CLIENTID, SCOPE } from '../const'
 import setCookie from '@framework/api/utils/cookies'
 
 export default useLogin as UseLogin<typeof handler>
 
 export const handler: MutationHook<any> = {
   fetchOptions: {
-    // query: 'login',
-    url: '/customer',
+    url: `${ENDPOINT}/api/customers`,
   },
   async fetcher({ input: { email, password }, options, fetch }) {
     if (!(email && password)) {
@@ -17,17 +17,26 @@ export const handler: MutationHook<any> = {
         message: 'An email and password are required to login',
       })
     }
+    try {
       const token = await getCustomerToken(
         {
-        endpoint: process.env.NEXT_PUBLIC_COMMERCELAYER_ENDPOINT as string,
-        clientId: process.env.NEXT_PUBLIC_COMMERCELAYER_CLIENT_ID as string,
-        scope: process.env.NEXT_PUBLIC_COMMERCELAYER_MARKET_SCOPE as string,
+          endpoint: ENDPOINT,
+          clientId: CLIENTID,
+          scope: SCOPE,
         },
         { username: email, password }
       )
       token &&
         setCookie('CL_TOKEN', token.accessToken, { expires: token.expires })
+      alert(`User "${email}" has successfully been logged in.`)
       return token
+    } catch (error) {
+      console.error(error)
+
+      throw new CommerceError({
+        message: `${error}`,
+      })
+    }
   },
   useHook:
     ({ fetch }) =>

framework/commercelayer/auth/use-signup.tsx

@@ -2,18 +2,46 @@ import { useCallback } from 'react'
 import useCustomer from '../customer/use-customer'
 import { MutationHook } from '@commerce/utils/types'
 import useSignup, { UseSignup } from '@commerce/auth/use-signup'
+import { CommerceError } from '@commerce/utils/errors'
+import {ENDPOINT} from '../const'
 
 export default useSignup as UseSignup<typeof handler>
 
 export const handler: MutationHook<any> = {
   fetchOptions: {
-    query: '',
+    query: 'customers',
+    url: `${ENDPOINT}/api/customers`,
+    method: 'POST'
   },
-  async fetcher() {
-    return null
+  async fetcher({ input: { email, password }, options, fetch }) {
+    if (!(email && password)) {
+      throw new CommerceError({
+        message: 'An email and password are required to signup',
+      })
+    }
+
+    try {
+      const data = await fetch({
+        ...options,
+        variables: {
+          email,
+          password,
+        },
+      })
+      alert(`User "${email}" has successfully been created.`)
+      return data
+    } catch (error) {
+      throw new CommerceError({
+        message: `${error}`,
+      })
+    }
   },
   useHook:
     ({ fetch }) =>
-    () =>
-    () => {},
+    () => {
+      return async function signup(input) {
+        const data = await fetch({ input })
+        return data
+      }
+    },
 }

framework/commercelayer/const.ts

@@ -0,0 +1,3 @@
+export const ENDPOINT = process.env.NEXT_PUBLIC_COMMERCELAYER_ENDPOINT as string;
+export const CLIENTID = process.env.NEXT_PUBLIC_COMMERCELAYER_CLIENT_ID as string;
+export const SCOPE = process.env.NEXT_PUBLIC_COMMERCELAYER_MARKET_SCOPE as string;

framework/commercelayer/fetcher.ts

@@ -1,12 +1,29 @@
 import { Fetcher } from '@commerce/utils/types'
+import handleFetchResponse from './utils/handle-fetch-response'
+import { ENDPOINT, CLIENTID, SCOPE } from './const'
+import { getSalesChannelToken } from '@commercelayer/js-auth'
 
-export const fetcher: Fetcher = async () => {
-  console.log('FETCHER')
-  debugger
-  const res = await fetch('./data.json')
-  if (res.ok) {
-    const { data } = await res.json()
-    return data
-  }
-  throw res
+export const fetcher: Fetcher = async ({ url, method, variables, query }) => {
+  const token = await getSalesChannelToken({
+    endpoint: ENDPOINT,
+    clientId: CLIENTID,
+    scope: SCOPE,
+  })
+
+  return handleFetchResponse(
+    await fetch(url!, {
+      method,
+      headers: {
+        Accept: 'application/vnd.api+json',
+        Authorization: `Bearer ${token.accessToken}`,
+        'Content-Type': 'application/vnd.api+json',
+      },
+      body: JSON.stringify({
+        data: {
+          type: query,
+          attributes: variables,
+        },
+      }),
+    })
+  )
 }

framework/commercelayer/utils/handle-fetch-response.ts

@@ -0,0 +1,27 @@
+import { FetcherError } from '@commerce/utils/errors'
+
+export function getError(errors: any[], status: number) {
+  errors = errors ?? [{ message: 'Failed to fetch Commerce Layer API' }]
+  return new FetcherError({ errors, status })
+}
+
+export async function getAsyncError(res: Response) {
+  const data = await res.json()
+  return getError(data.errors, res.status)
+}
+
+const handleFetchResponse = async (res: Response) => {
+  if (res.ok) {
+    const { data, errors } = await res.json()
+
+    if (errors && errors.length) {
+      throw getError(errors, res.status)
+    }
+
+    return data
+  }
+
+  throw await getAsyncError(res)
+}
+
+export default handleFetchResponse