✨ feat: verify customer

:%s

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/verify.tsx

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { Layout } from 'src/components/common'
+import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
+import { useVerifyCustomer } from 'src/components/hooks'
+
+export default function VerifyCustomer() {
+    const router = useRouter()
+    const { error, loading, verify } = useVerifyCustomer()
+
+    useEffect(() => {
+        const { token } = router.query
+        console.log("token: ", token)
+        if (token) {
+            verify({ token: token.toString() })
+        }
+    }, [])
+
+    return (
+        <div>
+            {
+                loading ? <>
+                    <LoadingCommon />
+                    Verifing your account ....
+                </> : <div className="error">
+                    {error?.message}
+                </div>
+            }
+        </div>
+    )
+}
+
+
+VerifyCustomer.Layout = Layout

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
-import s from '../FormAuthen.module.scss'
-import styles from './FormRegister.module.scss'
-import SocialAuthen from '../SocialAuthen/SocialAuthen'
 import classNames from 'classnames'
+import React, { useEffect, useRef, useState } from 'react'
+import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
 import { CustomInputCommon } from 'src/utils/type.utils'
+import { useSignup } from '../../../../hooks'
+import s from '../FormAuthen.module.scss'
+import SocialAuthen from '../SocialAuthen/SocialAuthen'
+import styles from './FormRegister.module.scss'
 
 interface Props {
     isHide: boolean,
@@ -13,6 +14,10 @@ interface Props {
 
 const FormRegister = ({ onSwitch, isHide }: Props) => {
     const emailRef = useRef<CustomInputCommon>(null)
+    const { loading, signup, error } = useSignup()
+    const [email, setEmail] = useState<string>('')
+    const [password, setPassword] = useState<string>('')
+
 
     useEffect(() => {
         if (!isHide) {
@@ -20,6 +25,18 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
         }
     }, [isHide])
 
+    const onSignup = () => {
+        // TODO: validate fields
+        signup({ email, password })
+    }
+
+
+    useEffect(() => {
+        if (error) {
+            alert(error.message)
+        }
+    }, [error])
+
     return (
         <section className={classNames({
             [s.formAuthen]: true,
@@ -27,14 +44,29 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
         })}>
             <div className={s.inner}>
                 <div className={s.body}>
-                    <Inputcommon placeholder='Email Address' type='email' ref={emailRef}/>
-                    <InputPassword placeholder='Password'/>
+                    <Inputcommon
+                        placeholder='Email Address'
+                        type='email'
+                        ref={emailRef}
+                        value={email}
+                        onChange={(val) => setEmail(val.toString())}
+                    />
+                    <InputPassword
+                        placeholder='Password'
+                        value={password}
+                        onChange={(val) => setPassword(val.toString())}
+                    />
+
                     <div className={styles.passwordNote}>
                         Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character.
                     </div>
                 </div>
                 <div className={styles.bottom}>
-                    <ButtonCommon size='large'>Create Account</ButtonCommon>
+                    <ButtonCommon size='large'
+                        loading={loading}
+                        onClick={onSignup}>
+                        Create Account
+                    </ButtonCommon>
                 </div>
                 <SocialAuthen />
                 <div className={s.others}>

src/components/hooks/index.ts

@@ -1 +1,3 @@
 export { default as useModalCommon } from './useModalCommon'
+export { default as useVerifyCustomer } from './useVerifyCustomer'
+export { default as useSignup } from './useSignup'

src/components/hooks/useSignup.tsx

@@ -22,8 +22,8 @@ const query = gql`
 
 interface SignupInput {
   email: string
-  firstName: string
-  lastName: string
+  firstName?: string
+  lastName?: string
   password: string
 }
 

src/components/hooks/useVerifyCustomer.tsx

@@ -0,0 +1,43 @@
+import { LoginMutation } from '@framework/schema'
+import { useState } from 'react'
+import { CommonError } from 'src/domains/interfaces/CommonError'
+import rawFetcher from 'src/utils/rawFetcher'
+import { VERIFY_CUSTOMER_ACCOUNT } from '../../graphql/mutation'
+import useActiveCustomer from './useActiveCustomer'
+
+interface VerifyInput {
+  token: string
+  password?: string
+}
+
+const useVerifyCustomer = () => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<CommonError | null>(null)
+  // const { mutate } = useActiveCustomer()
+
+  const verify = (options: VerifyInput) => {
+    setError(null)
+    setLoading(true)
+    rawFetcher<LoginMutation>({
+      query: VERIFY_CUSTOMER_ACCOUNT,
+      variables: options,
+    })
+      .then(({ data, headers }) => {
+        console.log("data: ", data)
+        // if (data.login.__typename !== 'CurrentUser') {
+        //   throw CommonError.create(data.login.message, data.login.errorCode)
+        // }
+        // const authToken = headers.get('vendure-auth-token')
+        // if (authToken != null) {
+        //   localStorage.setItem('token', authToken)
+        //   return mutate()
+        // }
+      })
+      .catch(setError)
+      .finally(() => setLoading(false))
+  }
+
+  return { loading, verify, error }
+}
+
+export default useVerifyCustomer

src/graphql/mutation/index.ts

@@ -0,0 +1 @@
+export * from './user.mutation'

src/graphql/mutation/user.mutation.ts

@@ -0,0 +1,16 @@
+import { gql } from 'graphql-request'
+
+
+export const VERIFY_CUSTOMER_ACCOUNT = gql`
+mutation verifyCustomerAccount(token: String!, password: String) {
+  verifyCustomerAccount( token: $token, password: $password) {
+      ...on CurrentUser {
+          id
+          identifier
+      }
+      ...ErrorResult
+  }
+}
+`
+
+

src/graphql/query/index.ts

@@ -0,0 +1 @@
+// export * from './user.mutation'

src/graphql/query/user.query.ts

@@ -0,0 +1 @@
+// query here