ordering-ui-external 10.2.0 → 10.2.1

package/src/themes/five/src/components/OrdersOption/index.js

@@ -109,7 +109,6 @@ const OrdersOptionUI = (props) => {
     ? orders && orders.length > 0 && !orders.map(order => businessesIds && businessesIds.includes(order.business_id)).every(i => !i)
     : orders.length > 0
 
-  const [loadingOrders, setLoadingOrders] = useState(true)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const closeOrderModal = (e) => {
     const outsideModal = !window.document.getElementById('app-modals') ||
@@ -142,18 +141,6 @@ const OrdersOptionUI = (props) => {
     }
   }
 
-  useEffect(() => {
-    let timeout
-    if (isCustomLayout) {
-      timeout = setTimeout(() => {
-        setLoadingOrders(false)
-      }, 2000)
-    }
-    return () => {
-      typeof timeout === 'number' && clearTimeout(timeout)
-    }
-  }, [])
-
   useEffect(() => {
     if (loading) return
 
@@ -203,7 +190,7 @@ const OrdersOptionUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      {(isCustomLayout ? ((isShowTitles || !isBusinessesPage) && !loadingOrders && !loading && !isBusinessesLoading) : ((isShowTitles || !isBusinessesPage) && !hideOrders)) && (
+      {(isCustomLayout ? ((isShowTitles || !isBusinessesPage) && !loading && !isBusinessesLoading) : ((isShowTitles || !isBusinessesPage) && !hideOrders)) && (
         <>
           {orders.length > 0 && (
             <OptionTitle isBusinessesPage={isBusinessesPage}>
@@ -241,7 +228,7 @@ const OrdersOptionUI = (props) => {
         />
       )}
 
-      {(isCustomLayout ? (loadingOrders || loading || businesses?.loading) : showSkeletons) && (
+      {(isCustomLayout ? (loading || businesses?.loading) : showSkeletons) && (
         <>
           {(businesses?.loading && isBusiness) ? (
             <BusinessControllerSkeleton>
@@ -316,8 +303,7 @@ const OrdersOptionUI = (props) => {
           )}
         </>
       )}
-
-      {(isCustomLayout ? !loadingOrders && !loading && !error && orders.length > 0 && !isBusinessesLoading && !hideOrders : !loading && !error && orders.length > 0 && !hideOrders) && (
+      {(isCustomLayout ? !loading && !error && orders.length > 0 && !isBusinessesLoading && !hideOrders : !loading && !error && orders.length > 0 && !hideOrders) && (
         horizontal ? (
           <HorizontalOrdersLayout
             businessesIds={businessesIds}

package/src/themes/five/src/components/OrdersOption/styles.js

@@ -2,9 +2,8 @@ import styled, { css } from 'styled-components'
 
 export const OptionTitle = styled.div`
   width: 100%;
-  margin: ${({ isBusinessesPage }) => isBusinessesPage ? '10px 20px 0' : '0 auto'};
-  padding: ${({ isBusinessesPage }) => !isBusinessesPage && '0 15px'};
-
+  margin: ${({ isBusinessesPage }) => isBusinessesPage ? '0' : '0 auto'};
+  padding: ${({ isBusinessesPage }) => isBusinessesPage ? '10px 20px 0' : '0 15px'};
   h1{
     text-transform: capitalize;
     font-size: 18px;
@@ -12,7 +11,7 @@ export const OptionTitle = styled.div`
   }
 
   @media (min-width: 768px){
-    padding: 0;
+    padding: ${({ isBusinessesPage }) => isBusinessesPage ? '10px 20px 0' : '0'};
     width: 100%;
   }
 `

package/src/themes/five/src/components/PageBanner/index.js

@@ -132,7 +132,7 @@ const PageBannerUI = (props) => {
         pageBannerState.banner?.items?.length > 0 && (
           <BannerContainer>
             <Swiper
-              navigation
+              navigation={pageBannerState.banner?.items?.length > 1}
               spaceBetween={0}
               shortSwipes={false}
               loop={pageBannerState.banner?.items.length > 1}

package/src/themes/five/src/components/PhoneAutocomplete/index.js

@@ -182,6 +182,7 @@ const PhoneAutocompleteUI = (props) => {
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds
           isCustomerMode
+          isPopup
         />
       </Modal>
       <Modal

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

@@ -420,13 +420,13 @@ const SignUpFormUI = (props) => {
                                         placeholder={t(field.code.toUpperCase(), field.name)}
                                         onChange={handleChangeInputEmail}
                                         ref={formMethods.register({
-                                          required: isRequiredField(field.code)
+                                          required: !isCustomerMode && isRequiredField(field.code)
                                             ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email'))
                                             : null,
                                           pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                                         })}
                                         onKeyDown={preventWhiteSpaceOnKeyDown}
-                                        required={!!field.required}
+                                        required={!!field.required && !isCustomerMode}
                                         autoComplete='on'
                                         isError={formMethods.errors?.email && !notValidationFields.includes(field.code)}
                                       />
@@ -551,7 +551,7 @@ const SignUpFormUI = (props) => {
               )}
 
               <CheckboxArea>
-                {(signUpTab === 'default') && (
+                {(signUpTab === 'default') && !isCustomerMode && (
                   <PromotionsWrapper>
                     <Checkbox
                       name='promotions'
@@ -566,7 +566,7 @@ const SignUpFormUI = (props) => {
                   </PromotionsWrapper>
                 )}
 
-                {configs?.terms_and_conditions?.value === 'true' && (
+                {configs?.terms_and_conditions?.value === 'true' && !isCustomerMode && (
                   <>
                     {formMethods.errors?.acceptTerms && (
                       <ValidationText>
@@ -672,14 +672,14 @@ const SignUpFormUI = (props) => {
                 )}
               </BussinessAndDriverSignUp>
             )}
-          {hasSocialLogin && hasSocialEnabled && (
+          {hasSocialLogin && hasSocialEnabled && !isCustomerMode && (
             <LoginDivider>
               <DividerLine />
               <p>{t('OR', 'or')}</p>
               <DividerLine />
             </LoginDivider>
           )}
-          {!externalPhoneNumber && (
+          {!externalPhoneNumber && !isCustomerMode && (
             <>
               {Object.keys(configs).length > 0 ? (
                 <SocialButtons isPopup={isPopup}>

package/src/themes/five/src/components/UserDetails/index.js

@@ -127,7 +127,7 @@ const UserDetailsUI = (props) => {
   }, [willVerifyOtpState])
 
   useEffect(() => {
-    if (isCheckoutPlace && requiredFields?.length === 0) {
+    if (isCheckoutPlace && requiredFields?.length === 0 && !formState?.loading) {
       setIsSuccess && setIsSuccess(true)
       onClose && onClose()
     }

package/src/themes/five/src/components/UserDetails/styles.js

@@ -114,4 +114,7 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
+  p {
+    margin-bottom: 0;
+  }
 `