ordering-ui-external 1.0.1 → 1.1.0

package/src/themes/franchise/src/components/LoginForm/index.js

@@ -154,7 +154,9 @@ const LoginFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   const handleChangePhoneNumber = (number, isValid) => {
@@ -288,14 +290,14 @@ const LoginFormUI = (props) => {
               isPopup={isPopup}
             >
               {
-              props.beforeMidElements?.map((BeforeMidElements, i) => (
-                <React.Fragment key={i}>
-                  {BeforeMidElements}
-                </React.Fragment>))
+                props.beforeMidElements?.map((BeforeMidElements, i) => (
+                  <React.Fragment key={i}>
+                    {BeforeMidElements}
+                  </React.Fragment>))
               }
               {
-              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-                <BeforeMidComponents key={i} {...props} />))
+                props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                  <BeforeMidComponents key={i} {...props} />))
               }
               {useLoginByEmail && loginTab === 'email' && (
                 <InputWrapper>
@@ -317,7 +319,7 @@ const LoginFormUI = (props) => {
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -372,14 +374,14 @@ const LoginFormUI = (props) => {
                 </InputWrapper>
               )}
               {
-              props.afterMidElements?.map((MidElement, i) => (
-                <React.Fragment key={i}>
-                  {MidElement}
-                </React.Fragment>))
+                props.afterMidElements?.map((MidElement, i) => (
+                  <React.Fragment key={i}>
+                    {MidElement}
+                  </React.Fragment>))
               }
               {
-              props.afterMidComponents?.map((MidComponent, i) => (
-                <MidComponent key={i} {...props} />))
+                props.afterMidComponents?.map((MidComponent, i) => (
+                  <MidComponent key={i} {...props} />))
               }
               {!loginWithOtpState && (
                 <RedirectLink isPopup={isPopup}>
@@ -435,14 +437,14 @@ const LoginFormUI = (props) => {
             Object.keys(configs).length > 0 ? (
               <SocialButtons isPopup={isPopup}>
                 {(configs?.facebook_login?.value === 'true' ||
-                configs?.facebook_login?.value === '1') &&
-                configs?.facebook_id?.value &&
-              (
-                <FacebookLoginButton
-                  appId={configs?.facebook_id?.value}
-                  handleSuccessFacebookLogin={handleSuccessFacebook}
-                />
-              )}
+                  configs?.facebook_login?.value === '1') &&
+                  configs?.facebook_id?.value &&
+                  (
+                    <FacebookLoginButton
+                      appId={configs?.facebook_id?.value}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
                 {configs?.google_login_client_id?.value && (
                   <GoogleLoginButton
                     initParams={initParams}
@@ -451,15 +453,15 @@ const LoginFormUI = (props) => {
                   />
                 )}
                 {configs?.apple_login_client_id?.value &&
-              (
-                <AppleLogin
-                  onSuccess={handleSuccessApple}
-                  onFailure={(data) => console.log('onFailure', data)}
-                />
-              )}
+                  (
+                    <AppleLogin
+                      onSuccess={handleSuccessApple}
+                      onFailure={(data) => console.log('onFailure', data)}
+                    />
+                  )}
                 {useLoginByCellphone && loginTab === 'cellphone' &&
-                configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                  configs?.twilio_service_enabled?.value === '1') && (<SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />)}
+                  configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                    configs?.twilio_service_enabled?.value === '1') && (<SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />)}
               </SocialButtons>
             ) : (
               <SkeletonSocialWrapper>

package/src/themes/franchise/src/components/SignUpForm/index.js

@@ -178,7 +178,9 @@ const SignUpFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/themes/franchise/src/components/UserFormDetails/index.js

@@ -159,7 +159,9 @@ export const UserFormDetailsUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {
@@ -230,14 +232,14 @@ export const UserFormDetailsUI = (props) => {
         {!validationFields?.loading ? (
           <>
             {
-            props.beforeMidElements?.map((BeforeMidElements, i) => (
-              <React.Fragment key={i}>
-                {BeforeMidElements}
-              </React.Fragment>))
+              props.beforeMidElements?.map((BeforeMidElements, i) => (
+                <React.Fragment key={i}>
+                  {BeforeMidElements}
+                </React.Fragment>))
             }
             {
-            props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-              <BeforeMidComponents key={i} {...props} />))
+              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                <BeforeMidComponents key={i} {...props} />))
             }
             <Divider />
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
@@ -255,9 +257,9 @@ export const UserFormDetailsUI = (props) => {
                         disabled={!isEdit}
                         placeholder={t(field.code.toUpperCase(), field?.name)}
                         defaultValue={
-                        formState?.result?.result
-                          ? formState?.result?.result[field.code]
-                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                          formState?.result?.result
+                            ? formState?.result?.result[field.code]
+                            : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                         }
                         onChange={handleChangeInputEmail}
                         ref={(e) => {
@@ -278,9 +280,9 @@ export const UserFormDetailsUI = (props) => {
                         disabled={!isEdit}
                         placeholder={t(field.code.toUpperCase(), field?.name)}
                         defaultValue={
-                        formState?.result?.result
-                          ? formState?.result?.result[field.code]
-                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                          formState?.result?.result
+                            ? formState?.result?.result[field.code]
+                            : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                         }
                         onChange={handleChangeInput}
                         ref={formMethods.register({
@@ -337,14 +339,14 @@ export const UserFormDetailsUI = (props) => {
               <LanguageSelector />
             </LanguageSelectorWrapper>
             {
-            props.afterMidElements?.map((MidElement, i) => (
-              <React.Fragment key={i}>
-                {MidElement}
-              </React.Fragment>))
+              props.afterMidElements?.map((MidElement, i) => (
+                <React.Fragment key={i}>
+                  {MidElement}
+                </React.Fragment>))
             }
             {
-             props.afterMidComponents?.map((MidComponent, i) => (
-               <MidComponent key={i} {...props} />))
+              props.afterMidComponents?.map((MidComponent, i) => (
+                <MidComponent key={i} {...props} />))
             }
             <ActionsForm>
               {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && (

package/src/themes/orderAndPay/src/components/ForgotPasswordForm/index.js

@@ -48,7 +48,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/themes/orderAndPay/src/components/LoginForm/index.js

@@ -85,7 +85,7 @@ const LoginFormUI = (props) => {
   const [validPhoneFieldState, setValidPhoneField] = useState(false)
   const [otpState, setOtpState] = useState('')
   const isAvailableSocialLogin = ((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) || configs?.google_login_client_id?.value || configs?.apple_login_client_id?.value
-  const [otpLeftTime,, resetOtpLeftTime] = useCountdownTimer(
+  const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
     600, !checkPhoneCodeState?.loading && willVerifyOtpState)
 
   const initParams = {
@@ -158,7 +158,9 @@ const LoginFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   const handleChangePhoneNumber = (number, isValid) => {
@@ -297,14 +299,14 @@ const LoginFormUI = (props) => {
               isPopup={isPopup}
             >
               {
-              props.beforeMidElements?.map((BeforeMidElements, i) => (
-                <React.Fragment key={i}>
-                  {BeforeMidElements}
-                </React.Fragment>))
+                props.beforeMidElements?.map((BeforeMidElements, i) => (
+                  <React.Fragment key={i}>
+                    {BeforeMidElements}
+                  </React.Fragment>))
               }
               {
-              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-                <BeforeMidComponents key={i} {...props} />))
+                props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                  <BeforeMidComponents key={i} {...props} />))
               }
               {useLoginByEmail && loginTab === 'email' && (
                 <InputWrapper>
@@ -326,7 +328,7 @@ const LoginFormUI = (props) => {
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -381,14 +383,14 @@ const LoginFormUI = (props) => {
                 </InputWrapper>
               )}
               {
-              props.afterMidElements?.map((MidElement, i) => (
-                <React.Fragment key={i}>
-                  {MidElement}
-                </React.Fragment>))
+                props.afterMidElements?.map((MidElement, i) => (
+                  <React.Fragment key={i}>
+                    {MidElement}
+                  </React.Fragment>))
               }
               {
-              props.afterMidComponents?.map((MidComponent, i) => (
-                <MidComponent key={i} {...props} />))
+                props.afterMidComponents?.map((MidComponent, i) => (
+                  <MidComponent key={i} {...props} />))
               }
               {!loginWithOtpState && (
                 <RedirectLink isPopup={isPopup}>
@@ -446,14 +448,14 @@ const LoginFormUI = (props) => {
                 )}
                 <SocialButtons isPopup={isPopup}>
                   {(configs?.facebook_login?.value === 'true' ||
-                configs?.facebook_login?.value === '1') &&
-                configs?.facebook_id?.value &&
-              (
-                <FacebookLoginButton
-                  appId={configs?.facebook_id?.value}
-                  handleSuccessFacebookLogin={handleSuccessFacebook}
-                />
-              )}
+                    configs?.facebook_login?.value === '1') &&
+                    configs?.facebook_id?.value &&
+                    (
+                      <FacebookLoginButton
+                        appId={configs?.facebook_id?.value}
+                        handleSuccessFacebookLogin={handleSuccessFacebook}
+                      />
+                    )}
                   {configs?.google_login_client_id?.value && (
                     <GoogleLoginButton
                       initParams={initParams}
@@ -462,15 +464,15 @@ const LoginFormUI = (props) => {
                     />
                   )}
                   {configs?.apple_login_client_id?.value &&
-              (
-                <AppleLogin
-                  onSuccess={handleSuccessApple}
-                  onFailure={(data) => console.log('onFailure', data)}
-                />
-              )}
+                    (
+                      <AppleLogin
+                        onSuccess={handleSuccessApple}
+                        onFailure={(data) => console.log('onFailure', data)}
+                      />
+                    )}
                   {useLoginByCellphone && loginTab === 'cellphone' &&
-                configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                  configs?.twilio_service_enabled?.value === '1') && (<SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />)}
+                    configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                      configs?.twilio_service_enabled?.value === '1') && (<SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />)}
                 </SocialButtons>
               </>
             ) : (

package/src/themes/orderAndPay/src/components/SignUpForm/index.js

@@ -184,7 +184,9 @@ const SignUpFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {
@@ -423,14 +425,14 @@ const SignUpFormUI = (props) => {
               {Object.keys(configs).length > 0 ? (
                 <SocialButtons isPopup={isPopup}>
                   {(configs?.facebook_login?.value === 'true' ||
-                configs?.facebook_login?.value === '1') &&
-                configs?.facebook_id?.value &&
-                (
-                  <FacebookLoginButton
-                    appId={configs?.facebook_id?.value}
-                    handleSuccessFacebookLogin={handleSuccessFacebook}
-                  />
-                )}
+                    configs?.facebook_login?.value === '1') &&
+                    configs?.facebook_id?.value &&
+                    (
+                      <FacebookLoginButton
+                        appId={configs?.facebook_id?.value}
+                        handleSuccessFacebookLogin={handleSuccessFacebook}
+                      />
+                    )}
                   {configs?.apple_login_client_id?.value && (
                     <AppleLogin
                       onSuccess={handleSuccessApple}

package/src/themes/orderAndPay/src/components/UserFormDetails/index.js

@@ -159,7 +159,9 @@ export const UserFormDetailsUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {
@@ -229,14 +231,14 @@ export const UserFormDetailsUI = (props) => {
         {!validationFields?.loading ? (
           <>
             {
-            props.beforeMidElements?.map((BeforeMidElements, i) => (
-              <React.Fragment key={i}>
-                {BeforeMidElements}
-              </React.Fragment>))
+              props.beforeMidElements?.map((BeforeMidElements, i) => (
+                <React.Fragment key={i}>
+                  {BeforeMidElements}
+                </React.Fragment>))
             }
             {
-            props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-              <BeforeMidComponents key={i} {...props} />))
+              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                <BeforeMidComponents key={i} {...props} />))
             }
             <Divider />
             {sortInputFields({ values: validationFields?.fields?.checkout || {} }).map(field =>
@@ -254,9 +256,9 @@ export const UserFormDetailsUI = (props) => {
                         disabled={!isEdit}
                         placeholder={t(field.code.toUpperCase(), field?.name)}
                         defaultValue={
-                        formState?.result?.result
-                          ? formState?.result?.result[field.code]
-                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                          formState?.result?.result
+                            ? formState?.result?.result[field.code]
+                            : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                         }
                         onChange={handleChangeInputEmail}
                         ref={(e) => {
@@ -277,9 +279,9 @@ export const UserFormDetailsUI = (props) => {
                         disabled={!isEdit}
                         placeholder={t(field.code.toUpperCase(), field?.name)}
                         defaultValue={
-                        formState?.result?.result
-                          ? formState?.result?.result[field.code]
-                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                          formState?.result?.result
+                            ? formState?.result?.result[field.code]
+                            : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                         }
                         onChange={handleChangeInput}
                         ref={formMethods.register({
@@ -336,14 +338,14 @@ export const UserFormDetailsUI = (props) => {
               <LanguageSelector />
             </LanguageSelectorWrapper>
             {
-            props.afterMidElements?.map((MidElement, i) => (
-              <React.Fragment key={i}>
-                {MidElement}
-              </React.Fragment>))
+              props.afterMidElements?.map((MidElement, i) => (
+                <React.Fragment key={i}>
+                  {MidElement}
+                </React.Fragment>))
             }
             {
-             props.afterMidComponents?.map((MidComponent, i) => (
-               <MidComponent key={i} {...props} />))
+              props.afterMidComponents?.map((MidComponent, i) => (
+                <MidComponent key={i} {...props} />))
             }
             <ActionsForm>
               {onCancel && (

package/src/themes/pwa/src/components/ForgotPasswordForm/index.js

@@ -48,7 +48,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/themes/pwa/src/components/LoginForm/index.js

@@ -154,7 +154,9 @@ const LoginFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   const handleChangePhoneNumber = (number, isValid) => {
@@ -287,14 +289,14 @@ const LoginFormUI = (props) => {
               isPopup={isPopup}
             >
               {
-              props.beforeMidElements?.map((BeforeMidElements, i) => (
-                <React.Fragment key={i}>
-                  {BeforeMidElements}
-                </React.Fragment>))
+                props.beforeMidElements?.map((BeforeMidElements, i) => (
+                  <React.Fragment key={i}>
+                    {BeforeMidElements}
+                  </React.Fragment>))
               }
               {
-              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-                <BeforeMidComponents key={i} {...props} />))
+                props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                  <BeforeMidComponents key={i} {...props} />))
               }
               {useLoginByEmail && loginTab === 'email' && (
                 <InputWrapper>
@@ -316,7 +318,7 @@ const LoginFormUI = (props) => {
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -371,14 +373,14 @@ const LoginFormUI = (props) => {
                 </InputWrapper>
               )}
               {
-              props.afterMidElements?.map((MidElement, i) => (
-                <React.Fragment key={i}>
-                  {MidElement}
-                </React.Fragment>))
+                props.afterMidElements?.map((MidElement, i) => (
+                  <React.Fragment key={i}>
+                    {MidElement}
+                  </React.Fragment>))
               }
               {
-              props.afterMidComponents?.map((MidComponent, i) => (
-                <MidComponent key={i} {...props} />))
+                props.afterMidComponents?.map((MidComponent, i) => (
+                  <MidComponent key={i} {...props} />))
               }
               {!loginWithOtpState && (
                 <RedirectLink isPopup={isPopup}>
@@ -434,14 +436,14 @@ const LoginFormUI = (props) => {
             Object.keys(configs).length > 0 ? (
               <SocialButtons isPopup={isPopup}>
                 {(configs?.facebook_login?.value === 'true' ||
-                configs?.facebook_login?.value === '1') &&
-                configs?.facebook_id?.value &&
-              (
-                <FacebookLoginButton
-                  appId={configs?.facebook_id?.value}
-                  handleSuccessFacebookLogin={handleSuccessFacebook}
-                />
-              )}
+                  configs?.facebook_login?.value === '1') &&
+                  configs?.facebook_id?.value &&
+                  (
+                    <FacebookLoginButton
+                      appId={configs?.facebook_id?.value}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
                 {configs?.google_login_client_id?.value && (
                   <GoogleLoginButton
                     initParams={initParams}
@@ -450,15 +452,15 @@ const LoginFormUI = (props) => {
                   />
                 )}
                 {configs?.apple_login_client_id?.value &&
-              (
-                <AppleLogin
-                  onSuccess={handleSuccessApple}
-                  onFailure={(data) => console.log('onFailure', data)}
-                />
-              )}
+                  (
+                    <AppleLogin
+                      onSuccess={handleSuccessApple}
+                      onFailure={(data) => console.log('onFailure', data)}
+                    />
+                  )}
                 {useLoginByCellphone && loginTab === 'cellphone' &&
-                configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                  configs?.twilio_service_enabled?.value === '1') && (<SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />)}
+                  configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                    configs?.twilio_service_enabled?.value === '1') && (<SmsLoginButton handleSmsLogin={() => { setLoginWithOtpState(true) }} />)}
               </SocialButtons>
             ) : (
               <SkeletonSocialWrapper>

package/src/themes/pwa/src/components/SignUpForm/index.js

@@ -176,7 +176,9 @@ const SignUpFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/themes/pwa/src/components/UserFormDetails/index.js

@@ -157,7 +157,9 @@ export const UserFormDetailsUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/themes/seven/index.js

@@ -43,15 +43,15 @@ import { SidebarMenu } from './src/components/SidebarMenu'
 import { SignUpForm } from './src/components/SignUpForm'
 import { SingleProductCard } from './src/components/SingleProductCard'
 import { UserDetails } from './src/components/UserDetails'
-import { UserFormDetails } from './src/components/UserFormDetails'
+import { UserFormDetailsUI as UserFormDetails } from './src/components/UserFormDetails'
 import { UserPopover } from './src/components/UserPopover'
 import { UserProfileForm } from './src/components/UserProfileForm'
 import { VerticalOrdersLayout } from './src/components/VerticalOrdersLayout'
 
-import { Buttons } from './src/styles/Buttons'
-import { Inputs } from './src/styles/Inputs'
+import { Button as Buttons } from './src/styles/Buttons'
+import { Input as Inputs } from './src/styles/Inputs'
 import { Select } from './src/styles/Select'
-import { Selects } from './src/styles/Selects'
+import { Select as Selects } from './src/styles/Selects'
 import { Tabs } from './src/styles/Tabs'
 
 export {

package/src/themes/seven/src/components/CouponControl/index.js

@@ -44,7 +44,6 @@ const CouponControlUI = (props) => {
     onChangeInputCoupon('')
   }
 
-
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (

package/src/themes/seven/src/components/ForgotPasswordForm/index.js

@@ -44,7 +44,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {