ordering-ui-external 1.9.1 → 1.9.3

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

@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  ${({ isBusinessList }) => isBusinessList && css`
+    position: absolute;
+    top: 10%;
+    width: 100%;
+    padding: 0 15px;
+    box-sizing: border-box;
+  `}
+  margin-top: 10px;
+`
+
+export const AddressMenu = styled.div`
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  background-color: ${props => props.theme.colors.backgroundPage};
+  font-weight: 600;
+  border-radius: 50px;
+  padding: 13px 19px;
+  margin-bottom: 10px;
+  ${({ isCheckOut }) => isCheckOut && css`
+    background-color: ${props => props.theme.colors.grayDividerColor};
+  `}
+
+  span {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  svg {
+    margin-right: 5px;
+    color: ${props => props.theme.colors.lightGray};
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0;
+    `}
+  }
+`
+
+export const FeatureItems = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`
+
+export const ItemInline = styled.div`
+  > span #select-input {
+    background-color: ${props => props.theme.colors.grayDividerColor} !important;
+    border: none;
+    border-radius: 7.6px;
+    svg {
+      font-size: 14px;
+    }
+    #list {
+      background-color: ${props => props.theme.colors.backgroundPage};
+      border: none;
+      border-radius: 7.6px;
+
+      left: 0px;
+      right: initial;
+
+      ${props => props.theme.rtl && css`
+        left: initial;
+        right: 0px;
+      `}
+    }
+
+    > div:first-child {
+      font-size: 11px;
+    }
+  }
+
+  .moment-popover {
+    > div:first-child {
+      font-size: 11px;
+      padding: 4px 7px;
+      svg {
+        font-size: 14px;
+      }
+    }
+  }
+`

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

@@ -400,8 +400,12 @@ const OrderDetailsUI = (props) => {
     businessLogoUrlValidation()
   }, [order])
 
-  const disableLeftButton = [1, 15, 20, 21]
-  const disableRightButton = [1, 15, 21]
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
+  const disableLeftButton = [1, 2, 5, 15, 16, 17, 20, 21]
+  const disableRightButton = [1, 2, 5, 15, 16, 17, 21]
 
   return (
     <Container>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useOrder } from 'ordering-components-external'
+import { useOrder, useOrderingTheme } from 'ordering-components-external'
 import { BusinessController } from '../../BusinessController'
 import { AutoScroll } from '../../AutoScroll'
 import { BusinessList, BusinessListWrapper } from './styles'
@@ -15,14 +15,17 @@ export const PreviousBusinessOrdered = (props) => {
   } = props
 
   const [orderState] = useOrder()
+  const [orderingTheme] = useOrderingTheme()
   const { width } = useWindowSize()
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+
   const onBusinessClick = (business) => {
     onRedirectPage({ page: 'business', params: { store: business.slug } })
   }
 
   return (
     <BusinessListWrapper isLoading={businesses?.loading}>
-      <BusinessList>
+      <BusinessList marginCard={isChew && '0 20px 0 0'}>
         <AutoScroll scrollId='searchlistorder'>
           {
             businesses?.result?.map((business, i) => (

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

@@ -33,6 +33,10 @@ export const BusinessList = styled.div`
       width: calc(100vw - 40px);
       min-width: calc(100vw - 40px);
 
+      ${({ marginCard }) => marginCard && css`
+        margin: ${({ marginCard }) => marginCard} !important;
+      `}
+
       @media (min-width: 681px) {
         width: calc(50vw - 40px);
         min-width: calc(50vw - 40px);

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

@@ -33,6 +33,7 @@ import { useTheme } from 'styled-components'
 
 export const ProductItemAccordion = (props) => {
   const {
+    isDisabledEdit,
     isCartPending,
     isCartProduct,
     product,
@@ -117,11 +118,10 @@ export const ProductItemAccordion = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <AccordionSection isCheckout={isCheckout}>
         <Accordion
-          isValid={product?.valid ?? true}
           className={`product accordion ${setActive}`}
           onClick={(e) => toggleAccordion(e)}
         >
-          <ProductInfo className='info'>
+          <ProductInfo className='info' isValid={product?.valid ?? true}>
             {(product?.images || theme?.images?.dummies?.product) && showProductImage && (
               <WrapperProductImage>
                 <ProductImage bgimage={product?.images || theme?.images?.dummies?.product} />
@@ -140,7 +140,7 @@ export const ProductItemAccordion = (props) => {
               </ScheduleInfoWrapper>
             ) : (
               <>
-                {isCartProduct && !isCartPending && getProductMax ? (
+                {!isDisabledEdit && isCartProduct && !isCartPending && getProductMax ? (
                   <ProductSelectWrapper>
                     <IosArrowDown />
                     <ProductSelect
@@ -180,7 +180,7 @@ export const ProductItemAccordion = (props) => {
                       <p>{parsePrice(product.total || product.price)}</p>
                       {isCartProduct && !isCartPending && (
                         <div>
-                          {onEditProduct && (
+                          {onEditProduct && !isDisabledEdit && (
                             <span ref={productActionsEdit}>
                               <Pencil color='#B1BCCC' onClick={() => onEditProduct(product)} />
                             </span>
@@ -199,20 +199,59 @@ export const ProductItemAccordion = (props) => {
             )}
           </ProductInfo>
 
-          {(product?.valid || !isCartProduct) && windowSize.width > 410 && (
-            <ProductPriceSection>
-              <ProductPrice className='prod-price'>
-                <span>
-                  {parsePrice(product.total || product.price)}
-                </span>
-                {(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
-                  <p>
-                    <IosArrowDown className={`${setRotate}`} />
-                  </p>
-                )}
-              </ProductPrice>
-              {isCartProduct && !isCartPending && (
-                <ProductActions>
+          {product.valid ? (
+            <>
+              {(product?.valid || !isCartProduct) && windowSize.width > 410 && (
+                <ProductPriceSection>
+                  <ProductPrice className='prod-price'>
+                    <span>
+                      {parsePrice(product.total || product.price)}
+                    </span>
+                    {(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
+                      <p>
+                        <IosArrowDown className={`${setRotate}`} />
+                      </p>
+                    )}
+                  </ProductPrice>
+                  {isCartProduct && !isCartPending && (
+                    <ProductActions>
+                      {!isDisabledEdit && (
+                        <ProductActionsEdit
+                          ref={productActionsEdit}
+                          onClick={() => onEditProduct(product)}
+                          disabled={orderState.loading}
+                        >
+                          <Pencil color='#B1BCCC' />
+                        </ProductActionsEdit>
+                      )}
+                      <ProductActionsDelete
+                        ref={productActionsDelete}
+                        onClick={() => onDeleteProduct(product)}
+                        disabled={orderState.loading}
+                      >
+                        <Trash color='#B1BCCC' />
+                      </ProductActionsDelete>
+                    </ProductActions>
+                  )}
+                </ProductPriceSection>
+              )}
+            </>
+          ) : (
+            <ProductActions>
+              <ProductActionsDelete
+                ref={productActionsDelete}
+                onClick={() => onDeleteProduct(product)}
+                disabled={orderState.loading}
+              >
+                <Trash color='#B1BCCC' />
+              </ProductActionsDelete>
+            </ProductActions>
+          )}
+
+          {isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity && (
+            <ProductError>
+              <ProductActions>
+                {!isDisabledEdit && (
                   <ProductActionsEdit
                     ref={productActionsEdit}
                     onClick={() => onEditProduct(product)}
@@ -220,28 +259,7 @@ export const ProductItemAccordion = (props) => {
                   >
                     <Pencil color='#B1BCCC' />
                   </ProductActionsEdit>
-                  <ProductActionsDelete
-                    ref={productActionsDelete}
-                    onClick={() => onDeleteProduct(product)}
-                    disabled={orderState.loading}
-                  >
-                    <Trash color='#B1BCCC' />
-                  </ProductActionsDelete>
-                </ProductActions>
-              )}
-            </ProductPriceSection>
-          )}
-
-          {isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity && (
-            <ProductError>
-              <ProductActions>
-                <ProductActionsEdit
-                  ref={productActionsEdit}
-                  onClick={() => onEditProduct(product)}
-                  disabled={orderState.loading}
-                >
-                  <Pencil color='#B1BCCC' />
-                </ProductActionsEdit>
+                )}
                 <ProductActionsDelete
                   ref={productActionsDelete}
                   onClick={() => onDeleteProduct(product)}

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

@@ -41,9 +41,6 @@ const AccordionStyled = styled.div`
 
 export const Accordion = (props) => {
   const style = {}
-  if (!props.isValid) {
-    style.opacity = '0.5'
-  }
   return (
     <AccordionStyled
       {...props}
@@ -217,6 +214,10 @@ export const ProductInfo = styled.div`
     margin: 0px 5px;
   }
 
+  ${({ isValid }) => !isValid && css`
+    opacity: 0.5;
+  `}
+
   @media (min-width: 411px) {
     width: 80%;
   }

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

@@ -8,6 +8,7 @@ import BsCircleFill from '@meronex/icons/bs/BsCircleFill'
 import BsCircleHalf from '@meronex/icons/bs/BsCircleHalf'
 import BsDashCircle from '@meronex/icons/bs/BsDashCircle'
 import BsPlusCircle from '@meronex/icons/bs/BsPlusCircle'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 import {
   Container,
@@ -43,6 +44,7 @@ const ProductOptionSubOptionUI = (props) => {
   const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
+  const { width } = useWindowSize()
   const [showMessage, setShowMessage] = useState(false)
   const [isDirty, setIsDirty] = useState(false)
 
@@ -112,7 +114,7 @@ const ProductOptionSubOptionUI = (props) => {
           )}
           <Text>
             <div>{suboption?.name}</div>
-            {showMessage && <span>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</span>}
+            {showMessage && width > 576 && <span>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</span>}
           </Text>
         </LeftOptionContainer>
         <RightOptionContainer>
@@ -159,6 +161,11 @@ const ProductOptionSubOptionUI = (props) => {
           )}
         </SuboptionPrice>
       </Container>
+      {showMessage && width < 576 && (
+        <Text noMargin>
+          <span>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</span>
+        </Text>
+      )}
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -59,6 +59,12 @@ export const Text = styled.div`
       margin-right: 10px;    
     `}
   }
+
+  ${({ noMargin }) => noMargin && css`
+    span {
+      margin: 0;
+    }
+  `}
 `
 
 export const SubOptionThumbnail = styled.div`

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

@@ -142,6 +142,7 @@ const SingleOrderCardUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <Container
         id='order-card'
+        w={screen.width - (screen.width < 411 ? -60 : 60)}
         isBusinessesPage={isBusinessesPage}
         isCustomerMode={isCustomerMode}
         onClick={(e) => handleClickCard(e, order)}
@@ -155,20 +156,18 @@ const SingleOrderCardUI = (props) => {
                 <>
                   {order?.business?.length > 1 ? (
                     <MultiLogosContainer>
-                      {order?.business?.map((business, i) => (
-                        <React.Fragment key={business?.id}>
-                          {i > 1 ? (
-                            <p>
-                              + {order?.business?.length - 2}
-                            </p>
-                          ) : (
-                            <BusinessLogoWrapper
-                              bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_400,c_limit')}
-                              isMulti
-                            />
-                          )}
-                        </React.Fragment>
+                      {order?.business?.map((business, i) => i < 2 && (
+                        <BusinessLogoWrapper
+                          key={business?.id}
+                          bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_400,c_limit')}
+                          isMulti
+                        />
                       ))}
+                      {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
+                        <p>
+                          + {order?.business?.length - 2}
+                        </p>
+                      )}
                     </MultiLogosContainer>
                   ) : (
                     <BusinessLogoWrapper bgimage={optimizeImage(order?.business?.logo || theme.images?.dummies?.businessLogo, 'h_400,c_limit')} />

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

@@ -3,7 +3,7 @@ import React from 'react'
 
 export const Container = styled.div`
   cursor: pointer;
-  margin: 10px;
+  margin: 10px 0;
   position: relative;
   background: white;
   border-radius: 16px;
@@ -20,8 +20,8 @@ export const Container = styled.div`
     width: 300px;
     display: inline-block;
   ` : css`
-    min-width: 380px;
-    width: 380px;
+    min-width: ${({ w }) => w ?? 380}px;
+    width: ${({ w }) => w ?? 380}px;
     height: ${({ isBusinessesPage }) => isBusinessesPage && '300px'};
     max-height: ${({ isBusinessesPage }) => isBusinessesPage ? '300px' : '220px'};
   `}
@@ -54,6 +54,10 @@ export const Container = styled.div`
     width: 430px;
   }
 
+  @media (min-width: 768px) {
+    margin: 10px;
+  }
+
   @media(min-width: 993px){
     ${({ isBusinessesPage }) => isBusinessesPage && css`
       margin: 30px 20px;
@@ -66,13 +70,17 @@ export const Content = styled.div`
   display: flex;
   position: relative;
   border-radius: 16px;
-  padding: 10px;
+  padding: 0;
   ${({ isCustomerMode }) => isCustomerMode ? css`
     align-items: center;
   ` : css`
     align-items: flex-start;
     flex: 1;
   `}
+
+  @media (min-width: 768px) {
+    padding: 10px;
+  }
 `
 
 export const Price = styled.div`
@@ -135,13 +143,24 @@ const BusinessLogoWrapperStyled = styled.div`
   border-radius: 7.6px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
 
-  margin-left: 8px;
+  margin-right: 8px;
+  margin-left: 0px;
 
   ${props => props.theme.rtl && css`
-    margin-left: 0px;
-    margin-right: 8px;
+    margin-left: 8px;
+    margin-right: 0px;
   `}
 
+  @media (min-width: 768px) {
+    margin-right: 0px;
+    margin-left: 8px;
+
+    ${props => props.theme.rtl && css`
+      margin-left: 0px;
+      margin-right: 8px;
+    `}
+  }
+
   @media (min-width: 576px) {
     width: 86px;
     min-width: 86px;

package/template/app.js

@@ -369,7 +369,7 @@ export const App = () => {
         loaded && (
           <ThemeProvider theme={themeUpdated}>
             <ListenPageChanges />
-            {!(isKioskApp && isHome) && windowSize.width > 576 && (
+            {!(isKioskApp && isHome) && (
               <HeaderComponent
                 isHome={isHome}
                 location={location}

package/template/components/ListenPageChanges/index.js

@@ -31,8 +31,9 @@ export const ListenPageChanges = ({ children }) => {
     order_detail: '/orders/:orderId',
     checkout: '/checkout/:cartUuid',
     checkout_list: '/checkout',
-    multi_checkout: '/multi-checkout',
-    multi_orders: '/multi-orders',
+    multi_checkout: '/multi-checkout/:cartUuid',
+    multi_orders: '/multi-orders/:orderId',
+    multi_cart: '/multi-cart/:cartUuid/:cartGroup',
     business: businessUrl,
     business_slug: '/:store',
     product: productUrl,

package/template/components/OrderingThemeUpdated/index.js

@@ -0,0 +1,41 @@
+export const orderingThemeUpdated = (theme, orderingTheme) => ({
+  ...theme,
+  ...orderingTheme?.theme,
+  colors: {
+    ...theme.colors,
+    ...(orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_btn_color && { primary: orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_btn_color }),
+    ...(orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_link_color && { links: orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_link_color })
+  },
+  images: {
+    ...theme.images,
+    general: {
+      ...theme.images.general,
+      homeHero: orderingTheme?.theme?.homepage_view?.components?.homepage_header?.components?.image || theme.images?.general?.homeHero,
+      businessHero: orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image || theme.images?.general?.businessHero,
+      notFound: orderingTheme?.theme?.business_listing_view?.components?.not_found_source?.components?.image || theme.images?.general?.notFound,
+      emptyActiveOrders: orderingTheme?.theme?.orders?.components?.active_orders?.components?.not_found_source?.components?.image || theme.images?.general?.emptyActiveOrders,
+      emptyPastOrders: orderingTheme?.theme?.orders?.components?.past_orders?.components?.not_found_source?.components?.image,
+      notNetwork: orderingTheme?.theme?.no_internet?.components?.image || theme.images?.general?.notNetwork,
+      businessSignUpHero: orderingTheme?.theme?.business_signup?.components?.icon?.components?.image || theme.images?.general?.businessSignUpHero,
+      driverSignUpHero: orderingTheme?.theme?.driver_signup?.components?.icon?.components?.image || theme.images?.general?.driverSignUpHero
+    },
+    categories: {
+      ...theme.images.categories,
+      food: orderingTheme?.theme?.business_listing_view?.components?.categories?.components?.food?.image || theme.images.categories.categoryFood,
+      groceries: orderingTheme?.theme?.business_listing_view?.components?.categories?.components?.groceries?.image || theme.images.categories.categoryGroceries,
+      alcohol: orderingTheme?.theme?.business_listing_view?.components?.categories?.components?.alcohol?.image || theme.images.categories.categoryAlcohol,
+      laundry: orderingTheme?.theme?.business_listing_view?.components?.categories?.components?.laundry?.image || theme.images.categories.categoryLaundry,
+      all: orderingTheme?.theme?.business_listing_view?.components?.categories?.components?.all?.image || theme.images.categories.categoryAll
+    },
+    dummies: {
+      ...theme.images.dummies,
+      businessHeader: orderingTheme?.theme?.business_view?.components?.header?.components?.dummy_image || theme.images.dummies.businessHeader,
+      businessLogo: orderingTheme?.theme?.business_view?.components?.header?.components?.logo?.dummy_image || theme.images.dummies.businessLogo,
+      product: orderingTheme?.theme?.business_view?.components?.products?.components?.photo?.components?.dummy_image || theme.images.dummies.product
+    },
+    logos: {
+      ...theme.images.logos,
+      logotype: orderingTheme?.theme?.header?.components?.logo?.components?.image || theme.images.logos.logotype
+    }
+  }
+})

package/template/helmetdata.json

@@ -180,5 +180,12 @@
     "keywords": "test, dummy, data",
     "robots": "index, follow",
     "canonicalUrl": ""
+  },
+  "multi_cart": {
+    "title": "Multi Cart",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
   }
 }

package/template/pages/MessagesList/index.js

@@ -3,11 +3,13 @@ import { MessagesListing } from '../../../src/themes/five/src/components/Message
 
 import { HelmetTags } from '../../components/HelmetTags'
 import { useEvent } from 'ordering-components-external'
+import settings from '../../config'
 
 export const MessagesList = (props) => {
   const [events] = useEvent()
   const messageprops = {
     ...props,
+    franchiseId: settings?.franchiseSlug,
     onRedirectPage: (data) => events.emit('go_to_page', data)
   }
   return (

package/template/pages/MultiCart/index.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { MultiCart as MultiCartController } from '../../../src/themes/five/src/components/MultiCart'
+import { HelmetTags } from '../../components/HelmetTags'
+import { useEvent } from 'ordering-components-external'
+import { useParams } from 'react-router-dom'
+
+export const MultiCart = (props) => {
+  const [events] = useEvent()
+  const { cartUuid, cartGroup } = useParams()
+  const multiCheckoutProps = {
+    ...props,
+    onRedirectPage: (data) => events.emit('go_to_page', data),
+    cartUuid,
+    cartGroup
+  }
+  return (
+    <>
+      <HelmetTags page='multi_cart' />
+      <MultiCartController {...multiCheckoutProps} />
+    </>
+  )
+}
+
+export default MultiCart