ordering-ui-external 2.4.6 → 2.5.1

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/StripeElementsForm/index.js

@@ -22,7 +22,8 @@ const StripeElementsFormUI = (props) => {
     paymethod,
     cart,
     handlePlaceOrder,
-    methodsPay
+    methodsPay,
+    cartGroup
   } = props
   const [, t] = useLanguage()
   return (
@@ -38,6 +39,7 @@ const StripeElementsFormUI = (props) => {
           {methodsPay?.includes(paymethod) ? (
             <StripeMethodForm
               cart={cart}
+              cartGroup={cartGroup}
               handleSource={handleSource}
               onNewCard={onNewCard}
               toSave={toSave}

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}>