From 63738d8b6a647d47a45b9b78afb6725f3febaa3f Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Thu, 12 Sep 2024 12:16:14 +0800 Subject: [PATCH] add loading for iAmsmart loading data --- .../auth-forms/IAmSmartFormWizard.js | 1378 +++++++++-------- 1 file changed, 691 insertions(+), 687 deletions(-) diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index a6bf6b9..2c6e832 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -53,6 +53,7 @@ const CustomFormWizard = (props) => { const [checkUpload, setCheckUpload] = useState(false); const [isLoading, setLoding] = useState(true); + const [isLoadingData, setLodingData] = useState(true); const [captchaImg, setCaptchaImage] = useState(""); @@ -242,6 +243,7 @@ const CustomFormWizard = (props) => { formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? ""); formik.setFieldValue("address1", iAmSmartData.address1 ?? ""); props.setIdNo(iAmSmartData.idNo ?? ""); + setLodingData(false) } }, [iAmSmartData]) @@ -447,514 +449,517 @@ const CustomFormWizard = (props) => { }, [values]) return ( - -
- {/* Input Form */} - - - - - - -
- - - -
- - - 。 - - iAM Smart: - - - - - - - - - + isLoadingData ? + : + + + {/* Input Form */} + + + + + + +
+ + - - - - - - - - : {iAmSmartData.idNo ? iAM Smart : <>} - {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */} +
+ + + 。 + + iAM Smart: + + + + + + + + + - + + + + + + + + : {iAmSmartData.idNo ? iAM Smart : <>} + {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */} + + + + {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null} + + + {showId ? : } + + + + + + + + + - {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null} + : {iAmSmartData.enName}{iAmSmartData.enName ? iAM Smart : <>} - - {showId ? : } - - - - + + + - - - - - - : {iAmSmartData.enName}{iAmSmartData.enName ? iAM Smart : <>} - - - - - - - - - - {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}{iAmSmartData.chName ? iAM Smart : <>} - - - - - - - - - - * - - - - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {iAmSmartData.address1 != "" && iAmSmartData.address1 == formik.values.address1 ? iAM Smart : null} + + + + + {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}{iAmSmartData.chName ? iAM Smart : <>} + + - - - + + + + + + * + + + + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {iAmSmartData.address1 != "" && iAmSmartData.address1 == formik.values.address1 ? iAM Smart : null} + + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {iAmSmartData.address2 != "" && iAmSmartData.address2 == formik.values.address2 ? iAM Smart : null} + + + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {iAmSmartData.address3 != "" && iAmSmartData.address3 == formik.values.address3 ? iAM Smart : null} + + + + { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, + getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} + onChange={(event, newValue) => { + setSelectedAddress4(newValue); }} + sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} + renderInput={(params) => } /> - {iAmSmartData.address2 != "" && iAmSmartData.address2 == formik.values.address2 ? iAM Smart : null} - - - - - { - if (e.key === 'Enter') { - e.preventDefault(); + option.type ? intl.formatMessage({ id: option.type }) : ""} + onChange={(event, newValue) => { + if (newValue !== null) { + setSelectedAddress5(newValue); + if (newValue.type === 'hongKong') { + setCheckCountry(false) + } else { + setSelectedAddress4(""); + setCheckCountry(true) } - }, - }} - /> - {iAmSmartData.address3 != "" && iAmSmartData.address3 == formik.values.address3 ? iAM Smart : null} - - - - option.type ? intl.formatMessage({ id: option.type }) : ""} - onChange={(event, newValue) => { - setSelectedAddress4(newValue); - }} - sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } - /> - option.type ? intl.formatMessage({ id: option.type }) : ""} - onChange={(event, newValue) => { - if (newValue !== null) { - setSelectedAddress5(newValue); - if (newValue.type === 'hongKong') { - setCheckCountry(false) } else { setSelectedAddress4(""); setCheckCountry(true) } - } else { - setSelectedAddress4(""); - setCheckCountry(true) - } - }} - - sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } - /> - {formik.touched.address1 && formik.errors.address1 && ( - - {formik.errors.address1} - - )} - {formik.touched.address2 && formik.errors.address2 && ( - - {formik.errors.address2} - - )} - {formik.touched.address3 && formik.errors.address3 && ( - - {formik.errors.address3} - - )} - {checkDistrict && ( - - {districtErrStr} - - )} - - - - - - - - - - - - - - - - - * - - - - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {iAmSmartData.email && iAmSmartData.email == formik.values.email ? iAM Smart : null} + }} + + sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} + renderInput={(params) => } + /> + {formik.touched.address1 && formik.errors.address1 && ( + + {formik.errors.address1} + + )} + {formik.touched.address2 && formik.errors.address2 && ( + + {formik.errors.address2} + + )} + {formik.touched.address3 && formik.errors.address3 && ( + + {formik.errors.address3} + + )} + {checkDistrict && ( + + {districtErrStr} + + )} + + + + + + + + + + + + + + + + + * + + + + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {iAmSmartData.email && iAmSmartData.email == formik.values.email ? iAM Smart : null} + + + {formik.touched.email && formik.errors.email && ( + + {formik.errors.email} + + )} + {checkEmail && ( + + + + )} - - {formik.touched.email && formik.errors.email && ( - - {formik.errors.email} - - )} - {checkEmail && ( - - - - )} - - - - - - - - * - - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {iAmSmartData.email && iAmSmartData.email == formik.values.emailConfirm ? iAM Smart : null} + + + + + + + * + + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {iAmSmartData.email && iAmSmartData.email == formik.values.emailConfirm ? iAM Smart : null} + + + {formik.touched.emailConfirm && formik.errors.emailConfirm && ( + + {formik.errors.emailConfirm} + + )} - - {formik.touched.emailConfirm && formik.errors.emailConfirm && ( - - {formik.errors.emailConfirm} - - )} - + - - - - - - - - - - - * - - - - - { - const value = event.target.value; - if (value.match(/[^0-9]/)) { - return event.preventDefault(); - } - formik.setFieldValue("phoneCountryCode", value); - }} - placeholder={intl.formatMessage({ id: 'dialingCode' })} - error={Boolean(formik.touched.phone && formik.errors.phone)} - onBlur={formik.handleBlur} - inputProps={{ - maxLength: 3, - onKeyDown: (e) => { - if (e.key === 'Enter') { - e.preventDefault(); + + + + + + + + + + * + + + + + { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); } - }, - }} - sx={{ width: '25%' }} - /> - { - const value = event.target.value; - if (value.match(/[^0-9]/)) { - return event.preventDefault(); - } - formik.setFieldValue("phone", value); - }} - placeholder={intl.formatMessage({ id: 'userContactNumber' })} - error={Boolean(formik.touched.phone && formik.errors.phone)} - onBlur={formik.handleBlur} - inputProps={{ - maxLength: 11, - onKeyDown: (e) => { - if (e.key === 'Enter') { - e.preventDefault(); + formik.setFieldValue("phoneCountryCode", value); + }} + placeholder={intl.formatMessage({ id: 'dialingCode' })} + error={Boolean(formik.touched.phone && formik.errors.phone)} + onBlur={formik.handleBlur} + inputProps={{ + maxLength: 3, + onKeyDown: (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + sx={{ width: '25%' }} + /> + { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); } - }, - }} - fullWidth - /> - {iAmSmartData.phone && iAmSmartData.phone == formik.values.phone && iAmSmartData.phoneCountryCode == formik.values.phoneCountryCode ? iAM Smart : null} + formik.setFieldValue("phone", value); + }} + placeholder={intl.formatMessage({ id: 'userContactNumber' })} + error={Boolean(formik.touched.phone && formik.errors.phone)} + onBlur={formik.handleBlur} + inputProps={{ + maxLength: 11, + onKeyDown: (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + fullWidth + /> + {iAmSmartData.phone && iAmSmartData.phone == formik.values.phone && iAmSmartData.phoneCountryCode == formik.values.phoneCountryCode ? iAM Smart : null} + + {formik.touched.phone && formik.errors.phone && ( + + {formik.errors.phone} + + )} - {formik.touched.phone && formik.errors.phone && ( - - {formik.errors.phone} - - )} - + - - - - - - - - - - - - { - const value = event.target.value; - if (value.match(/[^0-9]/)) { - return event.preventDefault(); - } - formik.setFieldValue("faxCountryCode", value); - }} - placeholder={intl.formatMessage({ id: 'dialingCode' })} - onBlur={formik.handleBlur} - inputProps={{ - maxLength: 3, - onKeyDown: (e) => { - if (e.key === 'Enter') { - e.preventDefault(); + + + + + + + + + + + { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); } - }, - }} - sx={{ width: '25%' }} - /> - { - const value = event.target.value; - if (value.match(/[^0-9]/)) { - return event.preventDefault(); - } - formik.setFieldValue("fax", value); - }} - placeholder={intl.formatMessage({ id: 'userFaxNumber' })} - inputProps={{ - maxLength: 8, - onKeyDown: (e) => { - if (e.key === 'Enter') { - e.preventDefault(); + formik.setFieldValue("faxCountryCode", value); + }} + placeholder={intl.formatMessage({ id: 'dialingCode' })} + onBlur={formik.handleBlur} + inputProps={{ + maxLength: 3, + onKeyDown: (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + sx={{ width: '25%' }} + /> + { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); } - }, - }} - sx={{ width: '75%' }} - /> + formik.setFieldValue("fax", value); + }} + placeholder={intl.formatMessage({ id: 'userFaxNumber' })} + inputProps={{ + maxLength: 8, + onKeyDown: (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + sx={{ width: '75%' }} + /> + - + - - - - - - - * - - - - - - - -
- - + + + + + + * + - + - - - - - - - + + + +
+ + + + + + + + + + + + + - - - - - - - - + + + + + + + + @@ -962,244 +967,243 @@ const CustomFormWizard = (props) => { - - - - - - - * - - - - - - - { onCaptchaChange() }}> - - - - - { - const value = event.target.value; - props.setCheckCode(event.target.value); - setCheckCode(event.target.value); - formik.setFieldValue("captchaField", value); - }} - sx={{ width: '75%' }} - /> - + + + + + + * + + + + + + + { onCaptchaChange() }}> + + + + + { + const value = event.target.value; + props.setCheckCode(event.target.value); + setCheckCode(event.target.value); + formik.setFieldValue("captchaField", value); + }} + sx={{ width: '75%' }} + /> + + + {formik.touched.captchaField && formik.errors.captchaField && ( + + {formik.errors.captchaField} + + )} - {formik.touched.captchaField && formik.errors.captchaField && ( - - {formik.errors.captchaField} - - )} - + - - - {/* Preview Form */} - - - - -
- - - -
- - - - - - - - - - {/* - Already have an account? - */} - - - - - - - - - {formik?.values?.idNo?.slice(0, 4)} - {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */} - - - {showComId ? formik?.values?.idNo?.slice(4) : "****"}{showComId ? '(' + formik.values.checkDigit + ')' : null} - {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */} - - - {showComId ? : } - - - - - - - : - - - {formik.values.enName} - - {iAmSmartData.enName ? iAM Smart : <>} - - - - - - : - - - {formik.values.chName} - - - - - - - : + + {/* Preview Form */} + + + + +
+ + +
+ + + + + + + + + + {/* + Already have an account? + */} + + + + + + + + + {formik?.values?.idNo?.slice(0, 4)} + {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */} + + + {showComId ? formik?.values?.idNo?.slice(4) : "****"}{showComId ? '(' + formik.values.checkDigit + ')' : null} + {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */} + + + {showComId ? : } + + + + + + + : + + + {formik.values.enName} + + {iAmSmartData.enName ? iAM Smart : <>} + + + + + + : + + + {formik.values.chName} + + + + - - {formik.values.address1} + + : - {formik.values.address2 != null ? - - {formik.values.address2} + + + {formik.values.address1} - : null} - {formik.values.address3 != null ? - - {formik.values.address3} - - : null} - {selectedAddress5.type === "hongKong" ? + {formik.values.address2 != null ? + + {formik.values.address2} + + : null} + {formik.values.address3 != null ? + + {formik.values.address3} + + : null} + {selectedAddress5.type === "hongKong" ? + + {/* + : + */} + + {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })} + + + : null} - {/* - : + {/* + : */} - {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })} + {intl.formatMessage({ id: selectedAddress5.type })} - : null} - - {/* - : - */} - - {intl.formatMessage({ id: selectedAddress5.type })} - - - - - - - - - - - - - - : - - - {formik.values.email} - - - - - - - : - - - +{formik.values.phoneCountryCode} {formik.values.phone} - - - - {formik.values.faxCountryCode != "" && formik.values.fax != "" ? + + + + + + + + + + + + : + + + {formik.values.email} + + + - : + : - - +{formik.values.faxCountryCode} {formik.values.fax} + + +{formik.values.phoneCountryCode} {formik.values.phone} - : null} + {formik.values.faxCountryCode != "" && formik.values.fax != "" ? + + + + : + + + +{formik.values.faxCountryCode} {formik.values.fax} + + + + : null} + - - - {/* Submit page */} - - - {isLoading ? - : - - {checkUpload ? - // SUCCESS page - - - - - - - - - - - : - // ERROR page - - {/* */} - - - - - - - } - - } - - - - + + {/* Submit page */} + + + {isLoading ? + : + + {checkUpload ? + // SUCCESS page + + + + + + + + + + + : + // ERROR page + + {/* */} + + + + + + + } + + } + + + + ); }