SignUp Initial Checkin

components/common/UserNav/UserNav.tsx

@@ -40,8 +40,8 @@ const UserNav: FC<Props> = ({ className }) => {
             </Link>
           </li>
         )}
-
-          <li className={s.item}>
+          {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
+            <li className={s.item}>
             {customer ? (
               <DropdownMenu />
             ) : (
@@ -54,6 +54,8 @@ const UserNav: FC<Props> = ({ className }) => {
               </button>
             )}
           </li>
+          )}
+          
 
       </ul>
     </nav>

framework/kibocommerce/api/endpoints/signup/index.ts

@@ -1 +1,18 @@
-export default function noopApi(...args: any[]): void {}
+import { GetAPISchema, createEndpoint } from '@commerce/api'
+import signupEndpoint from '@commerce/api/endpoints/signup'
+import type { SignupSchema } from '../../../types/signup'
+import type { KiboCommerceAPI } from '../..'
+import signup from './signup'
+
+export type SignupAPI = GetAPISchema<KiboCommerceAPI, SignupSchema>
+
+export type SignupEndpoint = SignupAPI['endpoint']
+
+export const handlers: SignupEndpoint['handlers'] = { signup }
+
+const singupApi = createEndpoint<SignupAPI>({
+  handler: signupEndpoint,
+  handlers,
+})
+
+export default singupApi

framework/kibocommerce/api/endpoints/signup/signup.ts

@@ -0,0 +1,90 @@
+import Cookies from 'js-cookie'
+import { FetcherError } from '@commerce/utils/errors'
+import type { SignupEndpoint } from '.'
+import { registerUserMutation, registerUserLoginMutation } from '../../mutations/signup-mutation'
+import {prepareSetCookie} from '../../../lib/prepareSetCookie';
+import {setCookies} from '../../../lib/setCookie'
+
+const invalidCredentials = /invalid credentials/i
+
+let response;
+
+const signup: SignupEndpoint['handlers']['signup'] = async ({
+  req,
+  res,
+  body: { email, password, firstName, lastName },
+  config,
+  commerce,
+}) => {
+  
+  if (!(email && password)) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+  try {
+
+    // Register user
+    const registerUserVariables = {
+      customerAccountInput: {
+          emailAddress: email,
+          firstName: firstName,
+          lastName: lastName,
+          acceptsMarketing: true,
+          isActive: true,
+          id: 0
+        }
+    }
+    
+    const registerUserResponse = await  config.fetch(registerUserMutation, { variables: registerUserVariables})
+    const accountId  = registerUserResponse.data?.account?.id;
+
+    // Login user
+    const registerUserLoginVairables = {
+      accountId: accountId,
+      customerLoginInfoInput: {
+          emailAddress: email,
+          username: email,
+          password: password,
+          isImport: false
+      }
+    }
+
+    response = await  config.fetch(registerUserLoginMutation, { variables: registerUserLoginVairables})
+    const { account: token }  = response.data;
+  
+    // Set Cookie
+    const authCookie = prepareSetCookie(
+      config.customerCookie,
+      JSON.stringify(token),
+      token.accessTokenExpiration ? { expires: new Date(token.accessTokenExpiration) }: {},
+    )
+
+    setCookies(res, [authCookie])   
+
+  } catch (error) {
+    // Check if the email and password didn't match an existing account
+    if (
+      error instanceof FetcherError &&
+      invalidCredentials.test(error.message)
+    ) {
+      return res.status(401).json({
+        data: null,
+        errors: [
+          {
+            message:
+              'Cannot find an account that matches the provided credentials',
+            code: 'invalid_credentials',
+          },
+        ],
+      })
+    }
+
+    throw error
+  }
+
+  res.status(200).json({ data: response })
+}
+
+export default signup

framework/kibocommerce/api/mutations/signup-mutation.ts

@@ -0,0 +1,41 @@
+
+const registerUserMutation = `
+mutation registerUser($customerAccountInput: CustomerAccountInput!) {
+  account:createCustomerAccount(customerAccountInput:$customerAccountInput) {
+        emailAddress
+        userName
+        firstName
+        lastName
+        localeCode
+        userId
+        id
+        isAnonymous
+          attributes {
+          values
+          fullyQualifiedName
+        }
+    }
+}`;
+
+const registerUserLoginMutation = `
+mutation registerUserLogin($accountId: Int!, $customerLoginInfoInput: CustomerLoginInfoInput!) {
+  account:createCustomerAccountLogin(accountId:$accountId, customerLoginInfoInput:$customerLoginInfoInput) {
+      accessToken
+      accessTokenExpiration
+      refreshToken
+      refreshTokenExpiration
+      userId
+      customerAccount {
+          id
+          emailAddress
+          firstName
+          userName
+      }
+  }
+}`;
+
+export {
+  registerUserMutation,
+  registerUserLoginMutation
+};
+

framework/kibocommerce/auth/use-signup.tsx

@@ -1,19 +1,44 @@
 import { useCallback } from 'react'
-import useCustomer from '../customer/use-customer'
-import { MutationHook } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
 import useSignup, { UseSignup } from '@commerce/auth/use-signup'
+import type { SignupHook } from '../types/signup'
+import useCustomer from '../customer/use-customer'
 
 export default useSignup as UseSignup<typeof handler>
 
-export const handler: MutationHook<any> = {
+export const handler: MutationHook<SignupHook> = {
   fetchOptions: {
-    query: '',
+    url: '/api/signup',
+    method: 'POST',
   },
-  async fetcher() {
-    return null
+  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',
+      })
+    }
+
+    return fetch({
+      ...options,
+      body: { firstName, lastName, email, password },
+    })
+  },
+  useHook: ({ fetch }) => () => {
+    const { revalidate } = useCustomer()
+
+    return useCallback(
+      async function signup(input) {
+        const data = await fetch({ input })
+        // await revalidate()
+        return data
+      },
+      [fetch, revalidate]
+    )
   },
-  useHook:
-    ({ fetch }) =>
-    () =>
-    () => {},
 }

framework/kibocommerce/types/signup.ts

@@ -0,0 +1 @@
+export * from '@commerce/types/signup'