diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index f303cf9..b3f85f1 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -110,7 +110,7 @@ const CustomFormWizard = (props) => { useEffect(() => { changePassword(''); - if(captchaImg=="") + if (captchaImg == "") onCaptchaChange(); }, []); @@ -171,7 +171,7 @@ const CustomFormWizard = (props) => { const onCaptchaChange = () => { HttpUtils.post({ url: POST_CAPTCHA, - params: { width: 130, height: 40, captcha: captchaImg}, + params: { width: 130, height: 40, captcha: captchaImg }, onSuccess: (responseData) => { props.setBase64Url(responseData.base64Url) localStorage.setItem("base64Url", responseData.base64Url); @@ -300,7 +300,7 @@ const CustomFormWizard = (props) => { useEffect(() => { props.step == 2 ? _onSubmit() : null; - if(captchaImg=="") + if (captchaImg == "") onCaptchaChange(); checkDataField(values) }, [props.step]) @@ -309,7 +309,7 @@ const CustomFormWizard = (props) => { const _onSubmit = () => { setLoding(true); values.idDocType = selectedIdDocType.type - values.address4 = selectedAddress4==null?"":selectedAddress4.key + values.address4 = selectedAddress4 == null ? "" : selectedAddress4.key values.address5 = selectedAddress5.key // console.log(values) const userAddress = { @@ -383,7 +383,7 @@ const CustomFormWizard = (props) => { }) .then(( // response - ) => { + ) => { // console.log(response) setCheckUpload(true) setLoding(false); @@ -551,27 +551,27 @@ const CustomFormWizard = (props) => { captchaField: '' }), validationSchema: yup.object().shape({ - username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'}))) - .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpecialCharAccount'})) }) - .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpaceAccount'})) }), - password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'}))) - .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpacePassword'})) }) - .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneSmallLetter'})) }) - .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneCapLetter'})) }) - .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1Number'})) }) - .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1SpecialChar'})) }), - confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({id: 'samePassword'}))), - enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))), - chName: yup.string().max(6).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))), - address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))), - address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine2'}))), - address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine3'}))), - email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))), - emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))), - idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({id: 'require'})}${selectedIdDocInputType}${intl.formatMessage({id: 'number'})}`)) - .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({id: 'noSpecialCharacter'})}`) }) - .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({id: 'noSpace'})}`) }) - .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({id: 'requiredValid'})}${selectedIdDocInputType}${intl.formatMessage({id: 'number'})}`), function (value) { + username: yup.string().min(6, displayErrorMsg(intl.formatMessage({ id: 'atLeast6CharAccount' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireUsername' }))) + .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpecialCharAccount' })) }) + .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpaceAccount' })) }), + password: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requirePassword' }))) + .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpacePassword' })) }) + .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneSmallLetter' })) }) + .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneCapLetter' })) }) + .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1Number' })) }) + .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1SpecialChar' })) }), + confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseConfirmPassword' }))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({ id: 'samePassword' }))), + enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))), + chName: yup.string().max(6).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))), + address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))), + address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine2' }))), + address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine3' }))), + email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))), + emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))), + idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({ id: 'require' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`)) + .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) }) + .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpace' })}`) }) + .test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredValid' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`), function (value) { const idDocType = selectedIdDocType.type; var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/; var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/; @@ -622,13 +622,13 @@ const CustomFormWizard = (props) => { } } }), - checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({id: 'requiredNumberInQuote'}))), - idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireIdDocType'}))), - phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))), + checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({ id: 'requiredNumberInQuote' }))), + idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireIdDocType' }))), + phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))), // faxCountryCode: yup.string().min(3,'請輸入3位數字'), - phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))), + phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))), // fax: yup.string().min(8,'請輸入8位數字'), - captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), + captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), }), }); @@ -661,19 +661,19 @@ const CustomFormWizard = (props) => {
- +
- + - + @@ -683,7 +683,7 @@ const CustomFormWizard = (props) => { - + * {/* { props.setUsername(e.target.value) formik.handleChange(e) }} - placeholder={intl.formatMessage({id: 'userLoginName'})} + placeholder={intl.formatMessage({ id: 'userLoginName' })} fullWidth error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} onBlur={formik.handleBlur} @@ -722,7 +722,7 @@ const CustomFormWizard = (props) => { )} {checkUsername && ( - + )} @@ -734,7 +734,7 @@ const CustomFormWizard = (props) => { - + * @@ -763,7 +763,7 @@ const CustomFormWizard = (props) => { } - placeholder={intl.formatMessage({id: 'userPassword'})} + placeholder={intl.formatMessage({ id: 'userPassword' })} onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { @@ -786,7 +786,7 @@ const CustomFormWizard = (props) => { - + @@ -796,7 +796,7 @@ const CustomFormWizard = (props) => { - + * @@ -830,7 +830,7 @@ const CustomFormWizard = (props) => { } - placeholder={intl.formatMessage({id: 'confirmPassword'})} + placeholder={intl.formatMessage({ id: 'confirmPassword' })} fullWidth error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)} /> @@ -841,12 +841,12 @@ const CustomFormWizard = (props) => { )} - + - •
- •
- •
- • + •
+ •
+ •
+ • @@ -856,7 +856,7 @@ const CustomFormWizard = (props) => { - + {/* Already have an account? @@ -868,7 +868,7 @@ const CustomFormWizard = (props) => { - + * @@ -892,9 +892,9 @@ const CustomFormWizard = (props) => { onBlur={formik.handleBlur} filterOptions={(options) => options} inputValue={selectedIdDocInputType} - getOptionLabel={(option) => option.label? intl.formatMessage({ id: option.label }) : ""} + getOptionLabel={(option) => option.label ? intl.formatMessage({ id: option.label }) : ""} onChange={(event, newValue) => { - if (newValue != null ) { + if (newValue != null) { setSelectedIdDocInputType(intl.formatMessage({ id: newValue.label })); setSelectedIdDocType(newValue); if (newValue.type !== "HKID") { @@ -907,13 +907,13 @@ const CustomFormWizard = (props) => { sx={{ "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} renderInput={(params) => } /> {formik.touched.idDocType && ( selectedIdDocType === null ? - + : '' )} @@ -941,7 +941,7 @@ const CustomFormWizard = (props) => { } } }} - placeholder={intl.formatMessage({id: 'idDocNumber'})} + placeholder={intl.formatMessage({ id: 'idDocNumber' })} fullWidth sx={{ mr: 1 }} error={Boolean(formik.touched.idNo && formik.errors.idNo)} @@ -1021,7 +1021,7 @@ const CustomFormWizard = (props) => { } } }} - placeholder={intl.formatMessage({id: 'idDocNumber'})} + placeholder={intl.formatMessage({ id: 'idDocNumber' })} fullWidth sx={{ mr: 1 }} error={Boolean(formik.touched.idNo && formik.errors.idNo)} @@ -1049,7 +1049,7 @@ const CustomFormWizard = (props) => { - + {selectedIdDocType.type === "CNID" ? "" : *} @@ -1059,7 +1059,7 @@ const CustomFormWizard = (props) => { value={formik.values.enName} name="enName" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})} + placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })} fullWidth error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")} onBlur={formik.handleBlur} @@ -1082,7 +1082,7 @@ const CustomFormWizard = (props) => { - + * @@ -1094,7 +1094,7 @@ const CustomFormWizard = (props) => { value={formik.values.chName.trim()} name="chName" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'sameAsYourIdDoc'})} + placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })} onBlur={formik.handleBlur} inputProps={{ maxLength: 6, @@ -1116,7 +1116,7 @@ const CustomFormWizard = (props) => { - + * @@ -1127,7 +1127,7 @@ const CustomFormWizard = (props) => { value={formik.values.address1} name="address1" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'addressLine1'})} + placeholder={intl.formatMessage({ id: 'addressLine1' })} onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { @@ -1144,7 +1144,7 @@ const CustomFormWizard = (props) => { value={formik.values.address2} name="address2" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'addressLine2'})} + placeholder={intl.formatMessage({ id: 'addressLine2' })} inputProps={{ onKeyDown: (e) => { if (e.key === 'Enter') { @@ -1160,7 +1160,7 @@ const CustomFormWizard = (props) => { value={formik.values.address3} name="address3" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'addressLine3'})} + placeholder={intl.formatMessage({ id: 'addressLine3' })} inputProps={{ onKeyDown: (e) => { if (e.key === 'Enter') { @@ -1175,14 +1175,16 @@ const CustomFormWizard = (props) => { value={selectedAddress4} options={ComboData.district} disabled={checkCountry} - getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} + getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { setSelectedAddress4(newValue); }} - sx={{ "& .MuiInputBase-root": { height: "41px" }, + sx={{ + "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 3px" }, - "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } /> { id="address5-combo" value={selectedAddress5} options={ComboData.country} - getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} + getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { if (newValue !== null) { setSelectedAddress5(newValue); @@ -1207,7 +1209,7 @@ const CustomFormWizard = (props) => { }} sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } + renderInput={(params) => } /> {formik.touched.address1 && formik.errors.address1 && ( @@ -1229,7 +1231,7 @@ const CustomFormWizard = (props) => { - + @@ -1239,7 +1241,7 @@ const CustomFormWizard = (props) => { - + * @@ -1251,7 +1253,7 @@ const CustomFormWizard = (props) => { value={formik.values.email.trim()} name="email" onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'userContactEmail'})} + placeholder={intl.formatMessage({ id: 'userContactEmail' })} onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { @@ -1268,7 +1270,7 @@ const CustomFormWizard = (props) => { )} {checkEmail && ( - + )} @@ -1277,7 +1279,7 @@ const CustomFormWizard = (props) => { - + * @@ -1290,7 +1292,7 @@ const CustomFormWizard = (props) => { name="emailConfirm" // onBlur={formik.handleBlur} onChange={formik.handleChange} - placeholder={intl.formatMessage({id: 'confirmEmail'})} + placeholder={intl.formatMessage({ id: 'confirmEmail' })} onBlur={formik.handleBlur} inputProps={{ onKeyDown: (e) => { @@ -1317,7 +1319,7 @@ const CustomFormWizard = (props) => { - + * @@ -1336,7 +1338,7 @@ const CustomFormWizard = (props) => { } formik.setFieldValue("phoneCountryCode", value); }} - placeholder={intl.formatMessage({id: 'dialingCode'})} + placeholder={intl.formatMessage({ id: 'dialingCode' })} error={Boolean(formik.touched.phone && formik.errors.phone)} onBlur={formik.handleBlur} endAdornment={-} @@ -1348,7 +1350,7 @@ const CustomFormWizard = (props) => { } }, }} - sx={{ width: '33%', mr:1}} + sx={{ width: '33%', mr: 1 }} /> { } formik.setFieldValue("phone", value); }} - placeholder={intl.formatMessage({id: 'userContactNumber'})} + placeholder={intl.formatMessage({ id: 'userContactNumber' })} error={Boolean(formik.touched.phone && formik.errors.phone)} onBlur={formik.handleBlur} inputProps={{ @@ -1393,7 +1395,7 @@ const CustomFormWizard = (props) => { - + @@ -1411,7 +1413,7 @@ const CustomFormWizard = (props) => { } formik.setFieldValue("faxCountryCode", value); }} - placeholder={intl.formatMessage({id: 'dialingCode'})} + placeholder={intl.formatMessage({ id: 'dialingCode' })} onBlur={formik.handleBlur} endAdornment={-} inputProps={{ @@ -1422,7 +1424,7 @@ const CustomFormWizard = (props) => { } }, }} - sx={{ width: '33%' , mr: 1}} + sx={{ width: '33%', mr: 1 }} /> { } formik.setFieldValue("fax", value); }} - placeholder={intl.formatMessage({id: 'userFaxNumber'})} + placeholder={intl.formatMessage({ id: 'userFaxNumber' })} inputProps={{ maxLength: 8, onKeyDown: (e) => { @@ -1461,28 +1463,28 @@ const CustomFormWizard = (props) => { - + * - + - + - + {/*如: 香港身份證; 護照; 中國內地身份證等*/} @@ -1501,7 +1503,7 @@ const CustomFormWizard = (props) => { - + * @@ -1526,7 +1528,7 @@ const CustomFormWizard = (props) => { size="small" /> - + @@ -1542,7 +1544,7 @@ const CustomFormWizard = (props) => { size="small" /> - + @@ -1556,7 +1558,7 @@ const CustomFormWizard = (props) => { - + * @@ -1604,12 +1606,12 @@ const CustomFormWizard = (props) => {
- +
{/* 註有*的項目必須輸入資料 */} - + {/* Already have an account? @@ -1621,7 +1623,7 @@ const CustomFormWizard = (props) => { - : + : {formik.values.username} @@ -1631,7 +1633,7 @@ const CustomFormWizard = (props) => { - + {/* Already have an account? @@ -1641,7 +1643,7 @@ const CustomFormWizard = (props) => { - + @@ -1649,17 +1651,18 @@ const CustomFormWizard = (props) => { - : + : - {selectedIdDocType.label} + {intl.formatMessage({ id: selectedIdDocType?.label??" " })} + - : + : {formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null} @@ -1670,7 +1673,7 @@ const CustomFormWizard = (props) => { - : + : {formik.values.enName} @@ -1680,7 +1683,7 @@ const CustomFormWizard = (props) => { - : + : {formik.values.chName} @@ -1690,7 +1693,7 @@ const CustomFormWizard = (props) => { - : + : @@ -1709,19 +1712,19 @@ const CustomFormWizard = (props) => { {selectedAddress5.label === "hongKong" ? - : + : - {!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})} + {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })} : null} - : + : - {intl.formatMessage({id: selectedAddress5.type})} + {intl.formatMessage({ id: selectedAddress5.type })} @@ -1730,14 +1733,14 @@ const CustomFormWizard = (props) => { - + - : + : {formik.values.email} @@ -1747,7 +1750,7 @@ const CustomFormWizard = (props) => { - : + : +{formik.values.phoneCountryCode} {formik.values.phone} @@ -1758,7 +1761,7 @@ const CustomFormWizard = (props) => { - : + : +{formik.values.faxCountryCode} {formik.values.fax} @@ -1771,7 +1774,7 @@ const CustomFormWizard = (props) => { - + {fileList != null ? : null} @@ -1794,13 +1797,13 @@ const CustomFormWizard = (props) => { - + - + : @@ -1812,7 +1815,7 @@ const CustomFormWizard = (props) => { }