✨ feat: register flow

:%s

src/components/common/MessageCommon/MessageCommon.tsx

@@ -7,15 +7,7 @@ interface Props {
   onRemove?: (id: number) => void
 }
 
-const MessageCommon = memo(({ messages, onRemove }: Props) => {
+const MessageCommon = memo(({ messages, onRemove }: Props) => {  
-  useEffect(() => {
-    console.log("this fun change; onRemove")
-  }, [onRemove])
-
-  const handleRemove = (id: number) => {
-    onRemove && onRemove(id)
-  }
-  
   return (
     <div className={s.messageCommon}>
       {messages.reverse().map((item) => (
@@ -23,7 +15,7 @@ const MessageCommon = memo(({ messages, onRemove }: Props) => {
           key={item.id}
           id={item.id}
           content={item.content}
-          onRemove={handleRemove}
+          onRemove={onRemove}
         />
       ))}
     </div>

src/components/common/MessageCommon/MessageItem/MessageItem.module.scss

@@ -8,6 +8,8 @@
     border-radius: 0.8rem;
     transition: all .5s;
     animation: showMessage .5s;
+    width: max-content;
+    margin: 0 1.6rem;
 
     &.hide {
         display: none;  

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

@@ -2,10 +2,12 @@ import classNames from 'classnames'
 import { Form, Formik } from 'formik'
 import React, { useEffect, useRef } from 'react'
 import {
-    ButtonCommon,
+  ButtonCommon,
-    InputFiledInForm,
+  InputFiledInForm,
-    InputPasswordFiledInForm
+  InputPasswordFiledInForm,
 } from 'src/components/common'
+import { useMessage } from 'src/components/contexts'
+import { LANGUAGE } from 'src/utils/language.utils'
 import { CustomInputCommon } from 'src/utils/type.utils'
 import * as Yup from 'yup'
 import { useSignup } from '../../../../hooks'
@@ -32,6 +34,7 @@ const DisplayingErrorMessagesSchema = Yup.object().shape({
 const FormRegister = ({ onSwitch, isHide }: Props) => {
   const emailRef = useRef<CustomInputCommon>(null)
   const { loading, signup, error } = useSignup()
+  const { showMessageSuccess, showMessageError } = useMessage()
 
   useEffect(() => {
     if (!isHide) {
@@ -40,9 +43,15 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
   }, [isHide])
 
   const onSignup = (values: { email: string; password: string }) => {
-    signup({ email: values.email, password: values.password })
+    signup({ email: values.email, password: values.password }, onSignupCallBack)
-    // TODO: flow
+  }
-    alert('User created. Please verify your email')
+
+  const onSignupCallBack = (isSuccess: boolean, message?: string) => {
+    if (isSuccess) {
+      showMessageSuccess("Create account successfully. Please verify your email to login.")
+    } else {
+      showMessageError(message || LANGUAGE.MESSAGE.ERROR)
+    }
   }
 
   useEffect(() => {

src/components/contexts/Message/MessageProvider.tsx

@@ -17,7 +17,7 @@ export function MessageProvider({ children }: Props) {
   ) => {
     const item: MessageItemProps = {
       id: currentId + 1,
-      content: currentId + 1 + content,
+      content,
       type,
       timeout,
     }

src/components/hooks/useLogin.tsx

@@ -42,6 +42,7 @@ const useLogin = () => {
           throw CommonError.create(data.login.message, data.login.errorCode)
         }
         const authToken = headers.get('vendure-auth-token')
+        console.log("auth token: ", authToken)
         if (authToken != null) {
           localStorage.setItem('token', authToken)
           return mutate()

src/components/hooks/useSignup.tsx

@@ -32,7 +32,10 @@ const useSignup = () => {
   const [error, setError] = useState<Error | null>(null)
   const { mutate } = useActiveCustomer()
 
-  const signup = ({ firstName, lastName, email, password }: SignupInput) => {
+  const signup = (
+    { firstName, lastName, email, password }: SignupInput,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+  ) => {
     setError(null)
     setLoading(true)
     fetcher<SignupMutation>({
@@ -53,11 +56,15 @@ const useSignup = () => {
             data.registerCustomerAccount.errorCode
           )
         }
-        console.log(data)
+        
         mutate()
+        fCallBack(true)
         return data
       })
-      .catch(setError)
+      .catch((error) => {
+        setError(error)
+        fCallBack(false, error.message)
+      })
       .finally(() => setLoading(false))
   }
 

src/components/hooks/useVerifyCustomer.tsx

@@ -25,7 +25,7 @@ const useVerifyCustomer = () => {
       query: VERIFY_CUSTOMER_ACCOUNT,
       variables: options,
     })
-      .then(({ data, headers }) => {
+      .then(({ data }) => {
         if (data.verifyCustomerAccount.__typename !== 'CurrentUser') {
           throw CommonError.create(
             data.verifyCustomerAccount.message,
@@ -33,12 +33,8 @@ const useVerifyCustomer = () => {
           )
         }
         fCallBack && fCallBack(true)
-
+        mutate()
-        const authToken = headers.get('vendure-auth-token')
+        return data
-        if (authToken != null) {
-          localStorage.setItem('token', authToken)
-          return mutate()
-        }
       })
       .catch((err) => {
         setError(err)

src/utils/language.utils.ts

@@ -9,5 +9,8 @@ export const LANGUAGE = {
     },
     PLACE_HOLDER: {
         SEARCH: 'Search',
+    },
+    MESSAGE: {
+        ERROR: 'Something went wrong! Please try again!'
     }
 }