ordering-ui-external 1.9.2 → 1.9.4

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

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { useLanguage, useOrder, useConfig, useSession } from 'ordering-components-external'
+import { MomentPopover } from '../../../../pwa/src/components/MomentPopover'
+import { OrderTypeSelectorHeader } from '../../../../../components/OrderTypeSelectorHeader'
+import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
+import { Modal } from '../Modal'
+import { AddressForm } from '../AddressForm'
+import { AddressList } from '../AddressList'
+import { Alert } from '../Confirm'
+import {
+  Container,
+  AddressMenu,
+  FeatureItems,
+  ItemInline
+} from './styles'
+
+export const OrderContextUI = (props) => {
+  const { isCheckOut, setMapErrors, isCustomerMode, isBusinessList } = props
+
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+  const [configState] = useConfig()
+  const [{ auth }] = useSession()
+
+  const [openPopover, setOpenPopover] = useState({})
+  const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
+
+  const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+
+  const handleTogglePopover = (type) => {
+    setOpenPopover({
+      ...openPopover,
+      [type]: !openPopover[type]
+    })
+  }
+
+  const handleClosePopover = (type) => {
+    setOpenPopover({
+      ...openPopover,
+      [type]: false
+    })
+  }
+
+  const handleFindBusinesses = () => {
+    if (!orderState?.options?.address?.location) {
+      setAlertState({ open: true, content: [t('SELECT_AN_ADDRESS_TO_SEARCH', 'Select or add an address to search')] })
+      return
+    }
+    setModals({ listOpen: false, formOpen: false })
+  }
+
+  const handleCloseAlerts = () => {
+    setAlertState({ open: false, content: [] })
+    setMapErrors && setMapErrors('')
+  }
+
+  const handleClickAddress = (e) => {
+    if (auth) {
+      setModals({ ...modals, listOpen: true })
+    } else {
+      setModals({ ...modals, formOpen: true })
+    }
+  }
+
+  return (
+    <>
+      <Container isBusinessList={isBusinessList}>
+        <AddressMenu
+          onClick={() => handleClickAddress()}
+          isCheckOut={isCheckOut}
+        >
+          <FaMapMarkerAlt />
+          <span>{orderState.options?.address?.address || t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}</span>
+        </AddressMenu>
+        <FeatureItems>
+          <ItemInline>
+            <OrderTypeSelectorHeader configTypes={configTypes} />
+          </ItemInline>
+          <ItemInline>
+            <MomentPopover
+              open={openPopover.moment}
+              onClick={() => handleTogglePopover('moment')}
+              onClose={() => handleClosePopover('moment')}
+              isBanner
+            />
+          </ItemInline>
+        </FeatureItems>
+      </Container>
+      <Modal
+        title={t('ADDRESS_FORM', 'Address Form')}
+        open={modals.formOpen}
+        onClose={() => setModals({ ...modals, formOpen: false })}
+      >
+        <AddressForm
+          useValidationFileds
+          address={orderState?.options?.address || {}}
+          onClose={() => setModals({ ...modals, formOpen: false })}
+          onCancel={() => setModals({ ...modals, formOpen: false })}
+          onSaveAddress={() => setModals({ ...modals, formOpen: false })}
+        />
+      </Modal>
+
+      <Modal
+        title={t('ADDRESSES', 'Address List')}
+        open={modals.listOpen}
+        width='70%'
+        onClose={() => setModals({ ...modals, listOpen: false })}
+      >
+        <AddressList
+          isModal
+          changeOrderAddressWithDefault
+          userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
+          onCancel={() => setModals({ ...modals, listOpen: false })}
+          onAccept={() => handleFindBusinesses()}
+          isCustomerMode={isCustomerMode}
+          isMobile
+        />
+      </Modal>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => handleCloseAlerts()}
+        onAccept={() => handleCloseAlerts()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}

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,6 +400,10 @@ const OrderDetailsUI = (props) => {
     businessLogoUrlValidation()
   }, [order])
 
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
   const disableLeftButton = [1, 2, 5, 15, 16, 17, 20, 21]
   const disableRightButton = [1, 2, 5, 15, 16, 17, 21]
 

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

@@ -368,6 +368,7 @@ const OrdersOptionUI = (props) => {
             reorderLoading={reorderState?.loading}
             orders={orders.filter(order => orderStatus.includes(order.status)).sort((a, b) => moment(b?.delivery_datetime_utc).valueOf() - moment(a?.delivery_datetime_utc).valueOf())}
             pagination={pagination}
+            customArray={customArray}
             loadMoreOrders={loadMoreOrders}
             onRedirectPage={onRedirectPage}
             getOrderStatus={getOrderStatus}
@@ -409,7 +410,7 @@ export const OrdersOption = (props) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 3,
+      pageSize: (getAllOrders || props.activeOrders) ? 30 : 10,
       controlType: 'infinity'
     }
   }

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;