ordering-ui-external 2.4.5 → 2.5.0

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

@@ -53,6 +53,15 @@ export const SidebarMenu = (props) => {
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
   const isPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
+  const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
+  const hideOrders = theme?.bar_menu?.components?.orders?.hidden
+  const hideProfile = theme?.bar_menu?.components?.profile?.hidden
+  const hideWallet = theme?.bar_menu?.components?.wallet?.hidden
+  const hideMessages = theme?.bar_menu?.components?.messages?.hidden
+  const hideHelp = theme?.bar_menu?.components?.help?.hidden
+  const hideFavorites = theme?.bar_menu?.components?.favortes?.hidden
+  const hideSession = theme?.bar_menu?.components?.sessions?.hidden
+  const hidePromotions = theme?.bar_menu?.components?.promotions?.hidden
 
   const closeModal = () => {
     setModalIsOpen(false)
@@ -195,38 +204,39 @@ export const SidebarMenu = (props) => {
               </MenuLinkSeparator>
             </WrappContent>
           </MenuLink>
-
           {auth && (
             <>
-              <MenuLink
-                onClick={() => handleGoToPage({ page: 'business_search' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    active={
-                      window.location.pathname === '/business_search'
-                    }
-                  >
-                    <BsSearch />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
+              {!hideBrowse && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'business_search' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
                       active={
                         window.location.pathname === '/business_search'
                       }
                     >
-                      {t('BROWSE_SEARCH', 'Browse & Search')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
+                      <BsSearch />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/business_search'
+                        }
+                      >
+                        {t('BROWSE_SEARCH', 'Browse & Search')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
               {
-                !isCustomerMode && (
+                !isCustomerMode && !hideOrders && (
                   <MenuLink
                     onClick={() => handleGoToPage({ page: 'orders' })}
                   >
@@ -256,34 +266,36 @@ export const SidebarMenu = (props) => {
                   </MenuLink>
                 )
               }
-              <MenuLink
-                onClick={() => handleGoToPage({ page: 'profile' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    active={
-                      window.location.pathname === '/profile'
-                    }
-                  >
-                    <FaRegAddressCard />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
+              {!hideProfile && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'profile' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
                       active={
                         window.location.pathname === '/profile'
                       }
                     >
-                      {t('VIEW_ACCOUNT', 'View account')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
-              {isWalletEnabled && (
+                      <FaRegAddressCard />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/profile'
+                        }
+                      >
+                        {t('VIEW_ACCOUNT', 'View account')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
+              {isWalletEnabled && !hideWallet && (
                 <MenuLink
                   onClick={() => handleGoToPage({ page: 'wallets' })}
                 >
@@ -312,7 +324,7 @@ export const SidebarMenu = (props) => {
                   </WrappContent>
                 </MenuLink>
               )}
-              {isPromotionsEnabled && (
+              {isPromotionsEnabled && !hidePromotions && (
                 <MenuLink
                   onClick={() => handleGoToPage({ page: 'promotions' })}
                 >
@@ -341,116 +353,122 @@ export const SidebarMenu = (props) => {
                   </WrappContent>
                 </MenuLink>
               )}
-
-              <MenuLink
-                onClick={() => handleGoToPage({ page: 'messages' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    active={
-                      window.location.pathname === '/messages'
-                    }
-                  >
-                    <BiMessageDetail />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
+              {!hideMessages && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'messages' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
                       active={
                         window.location.pathname === '/messages'
                       }
                     >
-                      {t('MESSAGES', 'Messages')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
-
-              <MenuLink
-                onClick={() => handleGoToPage({ page: 'help' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    active={
-                      window.location.pathname === '/help'
-                    }
-                  >
-                    <BiHelpCircle />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
+                      <BiMessageDetail />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/messages'
+                        }
+                      >
+                        {t('MESSAGES', 'Messages')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
+              {!hideHelp && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'help' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
                       active={
                         window.location.pathname === '/help'
                       }
                     >
-                      {t('HELP', 'help')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
-              <MenuLink
-                onClick={() => handleGoToPage({ page: 'sessions' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    active={
-                      window.location.pathname === '/sessions'
-                    }
-                  >
-                    <SiJsonwebtokens />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
+                      <BiHelpCircle />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/help'
+                        }
+                      >
+                        {t('HELP', 'help')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
+              {!hideSession && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'sessions' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
                       active={
                         window.location.pathname === '/sessions'
                       }
                     >
-                      {t('SESSIONS', 'Sessions')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
-              <MenuLink
-                onClick={() => handleGoToPage({ page: 'favorite' })}
-              >
-                <WrappContent>
-                  <MenuLinkIcon
-                    active={
-                      window.location.pathname === '/favorite'
-                    }
-                  >
-                    <Heart />
-                  </MenuLinkIcon>
-                  <MenuLinkText>
-                    <TextInfo
+                      <SiJsonwebtokens />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/sessions'
+                        }
+                      >
+                        {t('SESSIONS', 'Sessions')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
+              {!hideFavorites && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'favorite' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
                       active={
                         window.location.pathname === '/favorite'
                       }
                     >
-                      {t('FAVORITES', 'Favorites')}
-                    </TextInfo>
-                  </MenuLinkText>
-                  <MenuLinkSeparator>
-                    <div>
-                      <hr />
-                    </div>
-                  </MenuLinkSeparator>
-                </WrappContent>
-              </MenuLink>
+                      <Heart />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/favorite'
+                        }
+                      >
+                        {t('FAVORITES', 'Favorites')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
               <LogoutButton onCustomClick={() => actionSidebar(false)} />
             </>
           )}

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

@@ -96,7 +96,8 @@ const SignUpFormUI = (props) => {
     signUpTab,
     useSignUpFullDetails,
     useSignUpOtpEmail,
-    useSignUpOtpCellphone
+    useSignUpOtpCellphone,
+    isGuest
   } = props
   const [, t] = useLanguage()
   const [, { showToast }] = useToast()
@@ -182,7 +183,7 @@ const SignUpFormUI = (props) => {
     formMethods.clearErrors()
   }
 
-  const onSubmit = () => {
+  const onSubmit = async () => {
     const isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true
     if (!userPhoneNumber &&
       ((validationFields?.fields?.checkout?.cellphone?.enabled &&
@@ -653,7 +654,7 @@ const SignUpFormUI = (props) => {
               {elementLinkToLogin}
             </RedirectLink>
           )}
-          {Object.keys(configs).length > 0 && (
+          {Object.keys(configs).length > 0 && !isGuest && (
             configs?.business_signup_allow?.value === '1' || configs?.driver_signup_allow?.value === '1'
           ) && !isCustomerMode &&
             (

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

@@ -266,7 +266,7 @@ const SingleOrderCardUI = (props) => {
                   {t('REVIEW', 'Review')}
                 </Button>
               )}
-              {order.cart && !hideReorderButton && (
+              {order.cart && typeof order?.id === 'number' && !hideReorderButton && (
                 <Button color='primary' className='reorder' outline onClick={() => handleClickReorder(order)}>
                   {cartState?.loading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
                 </Button>

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

@@ -6,10 +6,17 @@ export const Container = styled.div`
   margin: 10px 0;
   position: relative;
   background: white;
-  border-radius: 16px;
   display: inline-block;
   text-align: left;
   transition: all 0.3s ease;
+  padding: 10px;
+  border-radius: 8px;
+
+  ${props => props.theme.rtl ? css`
+    margin-left: 15px;
+  ` : css`
+    margin-right: 15px;
+  `}
 
   > span {
     display: flex;
@@ -56,6 +63,7 @@ export const Container = styled.div`
 
   @media (min-width: 768px) {
     margin: 10px;
+    border-radius: 16px;
   }
 
   @media(min-width: 993px){

package/src/themes/five/src/components/SingleProductCard/layouts/original/index.js

@@ -43,7 +43,8 @@ const SingleProductCardUI = (props) => {
     productAddedToCartLength,
     handleFavoriteProduct,
     isFavorite,
-    isPreviously
+    isPreviously,
+    viewString
   } = props
 
   const [, t] = useLanguage()
@@ -72,6 +73,11 @@ const SingleProductCardUI = (props) => {
   const maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance
 
   const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
+  const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+  const hideProductLogo = viewString
+    ? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
+    : theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
+
   // const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
 
   let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - totalBalance
@@ -186,12 +192,16 @@ const SingleProductCardUI = (props) => {
                   ) : (
                     <Skeleton width={100} />
                   )}
-                  {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)}
+                  {!hideProductDescription && (
+                    <>
+                      {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)}
+                    </>
+                  )}
                   {isPreviously && (!isSkeleton ? (<LastOrder>{t('LAST_ORDERED_ON', 'Last ordered on')} {parseDate(product?.last_ordered_date, { outputFormat: 'MMM DD, YYYY' })}</LastOrder>) : (<Skeleton width={80} />))}
                 </CardInfo>
                 {!isSkeleton ? (
                   <WrapLogo
-                    isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
+                    isBgimage={optimizeImage(!hideProductLogo ? product?.images || theme?.images?.dummies?.product : '', 'h_86,c_limit')}
                   >
                     {product?.ribbon?.enabled && (
                       <RibbonBox

package/src/themes/five/src/components/SingleProductCard/layouts/original/styles.js

@@ -36,10 +36,10 @@ export const CardContainer = styled.div`
   }
   ${({ productsRows }) => productsRows ? css`
     width: ${() => productsRows === 3 ? 'calc(33% - 20px)' : 'calc(50% - 20px)'};
-    margin: 10px;
+    margin: 10px 0;
   ` : css`
     width: 100%;
-    margin: 10px;
+    margin: 10px 0;
     @media (min-width: 576px) {
       margin: 10px;
       width: calc(100% - 20px);

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

@@ -131,7 +131,7 @@ const UpsellingPageUI = (props) => {
               <HorizontalUpsellingContainer>
                 {
                   !upsellingProducts.loading ? (
-                    <AutoScroll scrollId='upSelling'>
+                    <AutoScroll scrollId='upSelling' isColumnMode={upsellingProducts.products.length === 1}>
                       {
                         (!upsellingProducts.error && upsellingProducts.products.length > 0) ? upsellingProducts.products.map((product, i) => (
                           <HorizontalItem key={product.id} name={product.name}>

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

@@ -4,6 +4,7 @@ import { useSession, useLanguage, useCustomer, useConfig, useOrderingTheme } fro
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useTheme } from 'styled-components'
+import { SignUpForm } from '../SignUpForm'
 
 import {
   FormInput,
@@ -14,7 +15,8 @@ import {
   InputPhoneNumberWrapper,
   LanguageSelectorWrapper,
   SwitchWrapper,
-  NotificationsGroupSwitchWrapper
+  NotificationsGroupSwitchWrapper,
+  TextLinkWrapper
 } from './styles'
 
 import { Switch } from '../../../../../styles/Switch'
@@ -26,6 +28,7 @@ import { LanguageSelector } from '../../../../../components/LanguageSelector'
 import { Alert } from '../Confirm'
 import { sortInputFields } from '../../../../../utils'
 import { Checkbox } from '../../../../../styles/Checkbox'
+import Modal from '../Modal'
 
 export const UserFormDetailsUI = (props) => {
   const {
@@ -46,24 +49,26 @@ export const UserFormDetailsUI = (props) => {
     handleChangePromotions,
     isOldLayout,
     requiredFields,
-    handleChangeNotifications
+    handleChangeNotifications,
+    handlePlaceOrderAsGuest
   } = props
 
   const formMethods = useForm()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const theme = useTheme()
-  const [{ user: userSession }] = useSession()
+  const [{ user: userSession }, { login }] = useSession()
   const [orderingTheme] = useOrderingTheme()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { setUserCustomer }] = useCustomer()
   const [isChanged, setIsChanged] = useState(false)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
   const emailInput = useRef(null)
-  
+
   const user = userData || userSession
-  
+
   const [notificationList, setNotificationList] = useState({
     email: formState?.result?.result
       ? !!formState?.result?.result?.settings?.email?.newsletter
@@ -75,12 +80,12 @@ export const UserFormDetailsUI = (props) => {
       ? !!formState?.result?.result?.settings?.notification?.newsletter
       : !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))
   })
-  
-  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
-  const showCustomerPassword = !orderingTheme?.theme?.profile?.components?.password?.hidden
-  const showCustomerPromotions = !orderingTheme?.theme?.profile?.components?.promotions?.hidden
-  const showLangauges = !orderingTheme?.theme?.profile?.components?.languages?.hidden
-  const showNotifications = !orderingTheme?.theme?.profile?.components?.notification_settings?.hidden
+
+  const showCustomerCellphone = !theme?.profile?.components?.cellphone?.hidden
+  const showCustomerPassword = !theme?.profile?.components?.password?.hidden
+  const showCustomerPromotions = !theme?.profile?.components?.promotions?.hidden
+  const showLangauges = !theme?.profile?.components?.languages?.hidden
+  const showNotifications = !theme?.profile?.components?.notification_settings?.hidden
 
   const closeAlert = () => {
     setAlertState({
@@ -90,6 +95,14 @@ export const UserFormDetailsUI = (props) => {
     cleanFormState && cleanFormState({ result: { error: false } })
   }
 
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+    handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
+  }
+
   const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
 
   const setUserCellPhone = (isEdit = false) => {
@@ -275,9 +288,9 @@ export const UserFormDetailsUI = (props) => {
     })
   }
 
-  useEffect(()=> {
+  useEffect(() => {
     isEdit && handleChangeNotifications(notificationList)
-  },[notificationList])
+  }, [notificationList])
 
   return (
     <>
@@ -453,7 +466,7 @@ export const UserFormDetailsUI = (props) => {
                   {formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
                 </Button>
               )}
-              {requiredFields && (
+              {requiredFields && !userSession?.guest_id && (
                 <Button
                   id='form-btn'
                   color='primary'
@@ -464,6 +477,24 @@ export const UserFormDetailsUI = (props) => {
                 </Button>
               )}
             </ActionsForm>
+            {requiredFields && isCheckout && userSession?.guest_id && (
+              <>
+                <Button
+                  id='form-btn'
+                  color='primary'
+                  type='button'
+                  onClick={() => setModalIsOpen(true)}
+                  disabled={formState.loading}
+                >
+                  {formState.loading ? t('UPDATING', 'Updating...') : t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')}
+                </Button>
+                <TextLinkWrapper>
+                  <span onClick={() => handlePlaceOrderAsGuest()}>
+                    {t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}
+                  </span>
+                </TextLinkWrapper>
+              </>
+            )}
           </>
         ) : (
           <SkeletonForm>
@@ -482,6 +513,19 @@ export const UserFormDetailsUI = (props) => {
         onAccept={() => closeAlert()}
         closeOnBackdrop={false}
       />
+      <Modal
+        open={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        width='760px'
+      >
+        <SignUpForm
+          useLoginByCellphone
+          useChekoutFileds
+          handleSuccessSignup={handleSuccessSignup}
+          isPopup
+          isGuest
+        />
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (