ordering-ui-external 1.0.1 → 1.1.0

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

@@ -76,7 +76,7 @@ const LoginFormUI = (props) => {
 
   const onSubmit = async () => {
     if (loginWithOtpState) {
-      
+
       if (!validPhoneFieldState) {
         setAlertState({
           open: true,
@@ -85,9 +85,9 @@ const LoginFormUI = (props) => {
 
         return
       }
-      
+
       setWillVerifyOtpState(true)
-    
+
     } else {
       handleButtonLoginClick()
     }
@@ -137,7 +137,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) => {
@@ -220,7 +222,7 @@ const LoginFormUI = (props) => {
         open: true,
         content: checkPhoneCodeState?.result?.result || [t('ERROR', 'Error')]
       })
-    
+
     else
       resetOtpLeftTime()
 
@@ -232,10 +234,10 @@ const LoginFormUI = (props) => {
         open: true,
         content: verifyPhoneState?.result?.result || [t('ERROR', 'Error')]
       })
-    
+
     else
       resetOtpLeftTime()
-      
+
   }, [verifyPhoneState])
 
   return (
@@ -279,14 +281,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' && (
                 <Input
@@ -299,12 +301,12 @@ const LoginFormUI = (props) => {
                   autoComplete='off'
                 />
               )}
-              
+
               {(useLoginByCellphone && loginTab === 'cellphone' && !willVerifyOtpState) && (
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -346,7 +348,7 @@ const LoginFormUI = (props) => {
 
               {(verifyPhoneState?.loading || checkPhoneCodeState?.loading) && (
                 <SpinnerLoader
-                  style={{height: 160}}
+                  style={{ height: 160 }}
                 />
               )}
 
@@ -368,14 +370,14 @@ const LoginFormUI = (props) => {
                 </WrapperPassword>
               )}
               {
-              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}>
@@ -390,12 +392,12 @@ const LoginFormUI = (props) => {
                   onClick={formMethods.handleSubmit(onSubmit)}
                   disabled={formState.loading}
                 >
-                {formState.loading
-                  ? `${t('LOADING', 'Loading')}...`
-                  : loginWithOtpState
-                    ? t('GET_VERIFY_CODE', 'Get verify code')
-                    : t('LOGIN', 'Login')
-                }
+                  {formState.loading
+                    ? `${t('LOADING', 'Loading')}...`
+                    : loginWithOtpState
+                      ? t('GET_VERIFY_CODE', 'Get verify code')
+                      : t('LOGIN', 'Login')
+                  }
                 </Button>
               )}
               {(loginWithOtpState && !willVerifyOtpState) && (
@@ -425,29 +427,29 @@ 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?.apple_login_client_id?.value &&
-              (
-                <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)}}
-                />
-              )}
+                  (
+                    <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) }}
+                    />
+                  )}
               </SocialButtons>
             ) : (
               <SkeletonSocialWrapper>

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

@@ -155,7 +155,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(() => {
@@ -367,19 +369,19 @@ const SignUpFormUI = (props) => {
             <>
               {Object.keys(configs).length > 0 ? (
                 <SocialButtons isPopup={isPopup}>
-                  { isFacebookLogin && configs?.facebook_id?.value && (
+                  {isFacebookLogin && configs?.facebook_id?.value && (
                     <FacebookLoginButton
                       appId={configs?.facebook_id?.value}
                       handleSuccessFacebookLogin={handleSuccessFacebook}
                     />
                   )}
                   {configs?.apple_login_client_id?.value &&
-               (
-                 <AppleLogin
-                   onSuccess={handleSuccessApple}
-                   onFailure={(data) => console.log('onFailure', data)}
-                 />
-               )}
+                    (
+                      <AppleLogin
+                        onSuccess={handleSuccessApple}
+                        onFailure={(data) => console.log('onFailure', data)}
+                      />
+                    )}
                 </SocialButtons>
               ) : (
                 <SkeletonSocialWrapper>

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

@@ -46,7 +46,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/two/src/components/LoginForm/index.js

@@ -136,7 +136,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) => {
@@ -216,7 +218,7 @@ const LoginFormUI = (props) => {
         open: true,
         content: checkPhoneCodeState?.result?.result || [t('ERROR', 'Error')]
       })
-    
+
     else
       resetOtpLeftTime()
 
@@ -228,10 +230,10 @@ const LoginFormUI = (props) => {
         open: true,
         content: verifyPhoneState?.result?.result || [t('ERROR', 'Error')]
       })
-    
+
     else
       resetOtpLeftTime()
-      
+
   }, [verifyPhoneState])
 
   return (
@@ -255,26 +257,26 @@ 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?.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') && (
+                    configs?.twilio_service_enabled?.value === '1') && (
                     <SmsLoginButton
                       handleSmsLogin={() => setLoginWithOtpState(true)}
                     />
@@ -321,14 +323,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' && (
                 <Input
@@ -341,12 +343,12 @@ const LoginFormUI = (props) => {
                   autoComplete='off'
                 />
               )}
-              
+
               {(useLoginByCellphone && loginTab === 'cellphone' && !willVerifyOtpState) && (
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -388,7 +390,7 @@ const LoginFormUI = (props) => {
 
               {(verifyPhoneState?.loading || checkPhoneCodeState?.loading) && (
                 <SpinnerLoader
-                  style={{height: 160}}
+                  style={{ height: 160 }}
                 />
               )}
 
@@ -410,14 +412,14 @@ const LoginFormUI = (props) => {
                 </WrapperPassword>
               )}
               {
-              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}>
@@ -436,12 +438,12 @@ const LoginFormUI = (props) => {
                   onClick={formMethods.handleSubmit(onSubmit)}
                   disabled={formState.loading}
                 >
-                {formState.loading
-                  ? `${t('LOADING', 'Loading')}...`
-                  : loginWithOtpState
-                    ? t('GET_VERIFY_CODE', 'Get verify code')
-                    : t('LOGIN', 'Login')
-                }
+                  {formState.loading
+                    ? `${t('LOADING', 'Loading')}...`
+                    : loginWithOtpState
+                      ? t('GET_VERIFY_CODE', 'Get verify code')
+                      : t('LOGIN', 'Login')
+                  }
                 </Button>
               )}
               {(loginWithOtpState && !willVerifyOtpState) && (

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

@@ -158,7 +158,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(() => {
@@ -240,19 +242,19 @@ const SignUpFormUI = (props) => {
               {Object.keys(configs).length > 0 ? (
                 <>
                   <SocialButtons isPopup={isPopup}>
-                    { isFacebookLogin && configs?.facebook_id?.value && (
+                    {isFacebookLogin && configs?.facebook_id?.value && (
                       <FacebookLoginButton
                         appId={configs?.facebook_id?.value}
                         handleSuccessFacebookLogin={handleSuccessFacebook}
                       />
                     )}
                     {configs?.apple_login_client_id?.value &&
-                (
-                  <AppleLogin
-                    onSuccess={handleSuccessApple}
-                    onFailure={(data) => console.log('onFailure', data)}
-                  />
-                )}
+                      (
+                        <AppleLogin
+                          onSuccess={handleSuccessApple}
+                          onFailure={(data) => console.log('onFailure', data)}
+                        />
+                      )}
                   </SocialButtons>
                   <OrDividerContainer isPopup={isPopup}>
                     <div />

package/template/components/ListenPageChanges/index.js

@@ -83,7 +83,7 @@ export const ListenPageChanges = ({ children }) => {
       events.off('go_to_page', handleGoToPage)
       events.off('get_current_view', handleGetCurrentView)
     }
-  }, [])
+  }, [events])
 
   useEffect(() => {
     if (theme.rtl !== languageState?.language?.rtl) {

package/template/pages/Checkout/index.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { loadStripe } from '@stripe/stripe-js/pure'
 import { useParams, useLocation } from 'react-router-dom'
 import { HelmetTags } from '../../components/HelmetTags'
-
 import { Checkout } from '../../../src/components/Checkout'
 import { useEvent, useOrder, useLanguage } from 'ordering-components-external'
 

package/template/pages/Home/styles.js

@@ -10,21 +10,17 @@ export const HomeSection = styled.div`
   width: 100%;
   box-sizing: border-box;
   background: #FFF;
-
   flex-direction: column;
   padding: 0px 10px 20px;
   &.reverse {
     flex-direction: column-reverse;
   }
-
   ${({ column }) => column && css`
     flex-direction: column;
   `}
-
   ${({ bgColor }) => bgColor && css`
     background: ${bgColor};
   `}
-
   ${({ bgimage }) => bgimage && css`
     background-image: linear-gradient(
       rgba(0, 0, 0, 0.5),
@@ -39,7 +35,6 @@ export const HomeSection = styled.div`
     justify-content: center;
     align-items: center;
   `}
-
   @media (min-width: 943px) {
     padding: 0px 50px 20px;
     flex-direction: ${({ column }) => column ? 'column' : 'row'};
@@ -141,7 +136,6 @@ export const TextContent = styled.div`
   justify-content: center;
   width: 100%;
   text-align: center;
-
   div {
     text-align: left;
     margin-top: 25px;
@@ -149,11 +143,9 @@ export const TextContent = styled.div`
       color: ${props => props.theme.colors.primary};
     }
   }
-
   h2 {
     font-size: 24px;
   }
-
   &.center {
     display: flex;
     flex-direction: column;
@@ -161,13 +153,11 @@ export const TextContent = styled.div`
     align-items: center;
     height: 100%;
     width: 100%;
-
     h2 {
       font-size: 24px;
       color: #FFF;
       text-align: center;
     }
-
     div {
       display: flex;
       flex-direction: column;
@@ -175,17 +165,14 @@ export const TextContent = styled.div`
       align-items: center;
       height: 100%;
     }
-
     button {
       width: 122px;
     }
   }
-
   @media (min-width: 943px) {
     width: 50%;
     text-align: left;
   }
-
   @media (min-width: 481px) {
     div {
       ${props => props.theme?.rtl && css`
@@ -208,7 +195,6 @@ export const Icons = styled.div`
 `
 export const HomeFooter = styled.div`
   font: normal normal normal 128px/160px ${props => props.theme.fonts.special || 'Georgia'};
-
   @media (min-width: 768px) {
     h2 {
       font-size: 50px !important;