mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
✨ feat: register flow
:%s
This commit is contained in:
parent
ba6517ef39
commit
275f10c5e7
@ -7,15 +7,7 @@ interface Props {
|
||||
onRemove?: (id: number) => void
|
||||
}
|
||||
|
||||
const MessageCommon = memo(({ messages, onRemove }: Props) => {
|
||||
useEffect(() => {
|
||||
console.log("this fun change; onRemove")
|
||||
}, [onRemove])
|
||||
|
||||
const handleRemove = (id: number) => {
|
||||
onRemove && onRemove(id)
|
||||
}
|
||||
|
||||
const MessageCommon = memo(({ messages, onRemove }: Props) => {
|
||||
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>
|
||||
|
@ -8,6 +8,8 @@
|
||||
border-radius: 0.8rem;
|
||||
transition: all .5s;
|
||||
animation: showMessage .5s;
|
||||
width: max-content;
|
||||
margin: 0 1.6rem;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
|
@ -2,10 +2,12 @@ import classNames from 'classnames'
|
||||
import { Form, Formik } from 'formik'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import {
|
||||
ButtonCommon,
|
||||
InputFiledInForm,
|
||||
InputPasswordFiledInForm
|
||||
ButtonCommon,
|
||||
InputFiledInForm,
|
||||
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 })
|
||||
// TODO: flow
|
||||
alert('User created. Please verify your email')
|
||||
signup({ email: values.email, password: values.password }, onSignupCallBack)
|
||||
}
|
||||
|
||||
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(() => {
|
||||
|
@ -17,7 +17,7 @@ export function MessageProvider({ children }: Props) {
|
||||
) => {
|
||||
const item: MessageItemProps = {
|
||||
id: currentId + 1,
|
||||
content: currentId + 1 + content,
|
||||
content,
|
||||
type,
|
||||
timeout,
|
||||
}
|
||||
|
@ -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()
|
||||
|
@ -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))
|
||||
}
|
||||
|
||||
|
@ -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)
|
||||
|
||||
const authToken = headers.get('vendure-auth-token')
|
||||
if (authToken != null) {
|
||||
localStorage.setItem('token', authToken)
|
||||
return mutate()
|
||||
}
|
||||
mutate()
|
||||
return data
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err)
|
||||
|
@ -9,5 +9,8 @@ export const LANGUAGE = {
|
||||
},
|
||||
PLACE_HOLDER: {
|
||||
SEARCH: 'Search',
|
||||
},
|
||||
MESSAGE: {
|
||||
ERROR: 'Something went wrong! Please try again!'
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user