ordering-ui-external 2.1.4 → 2.2.1

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

@@ -157,6 +157,12 @@ const CheckoutUI = (props) => {
     }
   })
 
+  const hideBusinessAddress = theme?.checkout?.components?.business?.components?.address?.hidden
+  const hideBusinessDetails = theme?.checkout?.components?.business?.hidden
+  const hideBusinessMap = theme?.checkout?.components?.business?.components?.map?.hidden
+  const hideCustomerDetails = theme?.checkout?.components?.customer?.hidden
+  const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && validationFields?.fields?.checkout?.driver_tip?.enabled && driverTipsOptions.length > 0 && !useKioskApp
+
   const handlePlaceOrder = () => {
     if (!userErrors.length && !requiredFields?.length) {
       const body = {}
@@ -452,38 +458,31 @@ const CheckoutUI = (props) => {
               />
             </WalletPaymentOptionContainer>
           )}
-
-          {
-            isMultiDriverTips &&
-            !cartState.loading &&
-            cart &&
-            cart?.business_id &&
-            options.type === 1 &&
-            cart?.status !== 2 &&
-            validationFields?.fields?.checkout?.driver_tip?.enabled &&
-            driverTipsOptions.length > 0 &&
-            !useKioskApp &&
-            (
-              <DriverTipContainer>
-                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-                <DriverTips
-                  businessId={cart?.business_id}
-                  driverTipsOptions={driverTipsOptions}
-                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                    ? cart?.driver_tip
-                    : cart?.driver_tip_rate}
-                  cart={cart}
-                  useOrderContext
-                />
-              </DriverTipContainer>
-            )
-          }
         </WrapperLeftContent>
       </WrapperLeftContainer>
       <WrapperRightContainer>
+
+        {
+          !!(!isMultiDriverTips && driverTipsField) &&
+          <>
+            <DriverTipContainer>
+              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+              <DriverTips
+                businessId={cart?.business_id}
+                driverTipsOptions={driverTipsOptions}
+                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                  ? cart?.driver_tip
+                  : cart?.driver_tip_rate}
+                cart={cart}
+                useOrderContext
+              />
+            </DriverTipContainer>
+            <DriverTipDivider />
+          </>
+        }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
             <PlaceSpot
@@ -497,38 +496,6 @@ const CheckoutUI = (props) => {
             />
           </SelectSpotContainer>
         )}
-        {
-          !isMultiDriverTips &&
-          !cartState.loading &&
-          cart &&
-          cart?.business_id &&
-          options.type === 1 &&
-          cart?.status !== 2 &&
-          validationFields?.fields?.checkout?.driver_tip?.enabled &&
-          driverTipsOptions.length > 0 &&
-          !useKioskApp &&
-          (
-            <>
-              <DriverTipContainer>
-                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-                <DriverTips
-                  businessId={cart?.business_id}
-                  driverTipsOptions={driverTipsOptions}
-                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                    ? cart?.driver_tip
-                    : cart?.driver_tip_rate}
-                  cart={cart}
-                  useOrderContext
-                />
-              </DriverTipContainer>
-              <DriverTipDivider />
-            </>
-          )
-        }
-
         {!cartState.loading && cart && (
           <CartContainer>
             <CartHeader>
@@ -546,6 +513,26 @@ const CheckoutUI = (props) => {
             />
           </CartContainer>
         )}
+        {
+          !!(isMultiDriverTips && driverTipsField) &&
+          (
+            <DriverTipContainer>
+              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+              <DriverTips
+                businessId={cart?.business_id}
+                driverTipsOptions={driverTipsOptions}
+                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                  ? cart?.driver_tip
+                  : cart?.driver_tip_rate}
+                cart={cart}
+                useOrderContext
+              />
+            </DriverTipContainer>
+          )
+        }
 
         {windowSize.width >= 576 && !cartState.loading && cart && cart?.status !== 2 && (
           <WrapperPlaceOrderButton>

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

@@ -258,9 +258,11 @@ export const CartHeader = styled.div`
   span {
     font-size: 13px;
     color: ${props => props.theme.colors.primary};
-    text-decoration: underline;
     cursor: pointer;
     user-select: none;
+    &:hover {
+        text-decoration: underline;
+      }
   }
 
   h1, span {

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

@@ -18,6 +18,7 @@ const DriverTipsUI = (props) => {
     driverTip,
     driverTipsOptions,
     cart,
+    carts,
     isDriverTipUseCustom,
     handlerChangeOption
   } = props
@@ -40,6 +41,10 @@ const DriverTipsUI = (props) => {
     ? `${configs?.format_number_currency?.value}0`
     : `0${configs?.format_number_currency?.value}`
 
+  const multiCartTipsAmmout = carts?.reduce((total, cart) => {
+    return total + parseFloat(cart?.driver_tip || 0)
+  }, 0)
+
   return (
     <DriverTipContainer id='driver-tip-container'>
       <>
@@ -56,7 +61,7 @@ const DriverTipsUI = (props) => {
               {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
             </TipCard>
           ))}
-          {(isDriverTipUseCustom && !isMulti) && (
+          {isDriverTipUseCustom && (
             <TipCard
               className={`${customTip ? 'active' : ''}`}
               onClick={() => setCustomTip(true)}
@@ -90,7 +95,7 @@ const DriverTipsUI = (props) => {
           {currentTip && (
             <DriverTipMessage>
               {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType &&
-                ` (${driverTip}%)`}: {isFixedPriceType ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+                ` (${driverTip}%)`}: {parsePrice(isMulti ? multiCartTipsAmmout : isFixedPriceType ? driverTip : cart?.driver_tip)}
             </DriverTipMessage>
           )}
         </WrapperTips>

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

@@ -100,6 +100,8 @@ export const RightHeader = styled.div`
 export const Menu = styled.div`
   display: flex;
   align-items: center;
+  margin-right: 10px;
+
   #select-input {
     border-radius: 7.6px;
     #list {
@@ -428,7 +430,7 @@ export const LanguageSelectorWrapper = styled(InputGroup)`
     }
   }
   #select-input {
-    margin: 0px 10px 0 5px;
+    margin-left: 5px;
   }
 `
 
@@ -453,7 +455,7 @@ export const LeftSide = styled.div`
   width: 100%;
   @media (min-width: 769px){
     flex-direction: ${({ theme }) =>
-      theme?.header?.components?.logo?.components?.layout?.position === 'center' ? 'row-reverse' : 'row'};
+    theme?.header?.components?.logo?.components?.layout?.position === 'center' ? 'row-reverse' : 'row'};
     width: 60%;
   }
 `

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

@@ -64,7 +64,6 @@ export const Help = (props) => {
                   }
                 </SubPageList>
                 <LastOrdersListWrapper>
-                  <h2>{t('LAST_ORDER', 'Last order')}</h2>
                   <LastOrders {...props} />
                 </LastOrdersListWrapper>
               </HelpContentWrapper>

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

@@ -13,7 +13,6 @@ import {
   OrderInfoBlock,
   BusinessHeader
 } from './styles'
-import { NotFoundSource } from '../NotFoundSource'
 
 export const LastOrdersUI = (props) => {
   const {
@@ -39,33 +38,31 @@ export const LastOrdersUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      <LastOrdersContainer>
-        {orderList?.loading && <Skeleton height={150} />}
-        {!orderList?.loading && orderList?.orders?.length > 0 && orderList?.orders.map((order, i) => (
-          <BusinessHeader key={i} bgimage={optimizeImage(order?.business?.header || theme.images?.dummies?.businessLogo, 'h_400,c_limit')}>
-            <OrderInfoBlock onClick={() => handleClickOrder(order?.uuid)}>
-              {order?.business?.name && (
-                <h4>{order?.business?.name}</h4>
-              )}
-              {(order?.delivery_datetime_utc || order?.delivery_datetime) && (
-                <p>
-                  <span>{t('TUTORIAL_ORDER_COMPLETED', 'Order Completed')} {('ON', 'on')} </span>
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </p>
-              )}
-            </OrderInfoBlock>
-          </BusinessHeader>
-        ))}
-        {!orderList?.loading && orderList?.orders?.length === 0 && (
-          <NotFoundSource
-            image={imageFails}
-            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-            conditioned
-          />
-        )}
-      </LastOrdersContainer>
+      {!orderList?.loading && orderList?.orders?.length > 0 && (
+        <>
+          <h2>{t('LAST_ORDER', 'Last order')}</h2>
+          <LastOrdersContainer>
+            {orderList?.loading && <Skeleton height={150} />}
+            {!orderList?.loading && orderList?.orders?.length > 0 && orderList?.orders.map((order, i) => (
+              <BusinessHeader key={i} bgimage={optimizeImage(order?.business?.header || theme.images?.dummies?.businessLogo, 'h_400,c_limit')}>
+                <OrderInfoBlock onClick={() => handleClickOrder(order?.uuid)}>
+                  {order?.business?.name && (
+                    <h4>{order?.business?.name}</h4>
+                  )}
+                  {(order?.delivery_datetime_utc || order?.delivery_datetime) && (
+                    <p>
+                      <span>{t('TUTORIAL_ORDER_COMPLETED', 'Order Completed')} {('ON', 'on')} </span>
+                      {order?.delivery_datetime_utc
+                        ? parseDate(order?.delivery_datetime_utc)
+                        : parseDate(order?.delivery_datetime, { utc: false })}
+                    </p>
+                  )}
+                </OrderInfoBlock>
+              </BusinessHeader>
+            ))}
+          </LastOrdersContainer>
+        </>
+      )}
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -4,8 +4,9 @@ import { useLanguage, useUtils, useEvent, OrderList as OrderListController, Orde
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { NotFoundSource } from '../../../../../components/NotFoundSource'
 import { getOrderStatus } from '../../../../../utils'
+import { Messages } from '../Messages'
+import { NotFoundSource } from '../NotFoundSource'
 
 import {
   MessagesListingContainer,
@@ -33,7 +34,6 @@ import {
   DriverText,
   NotFoundSourceWrapper
 } from './styles'
-import { Messages } from '../Messages'
 
 const OrdersListingUI = (props) => {
   const {

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

@@ -139,7 +139,9 @@ export const ViewDetails = styled.a`
   cursor: pointer;
   color: ${props => props.theme.colors.primary};
   font-size: 12px;
-  text-decoration: underline;
+  &:hover {
+        text-decoration: underline;
+      }
   margin: 0 10px;
 `
 

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

@@ -20,6 +20,7 @@ import { Alert } from '../Confirm'
 import { UserDetails } from '../UserDetails'
 import { AddressDetails } from '../AddressDetails'
 import { MultiCartsPaymethodsAndWallets } from '../MultiCartsPaymethodsAndWallets'
+import { CouponControl } from '../../../../../components/CouponControl'
 
 import {
   Container,
@@ -35,7 +36,8 @@ import {
   PaymentMethodContainer,
   WrapperPlaceOrderButton,
   WarningText,
-  DriverTipContainer
+  DriverTipContainer,
+  CouponContainer
 } from './styles'
 import { DriverTips } from '../DriverTips'
 
@@ -209,6 +211,23 @@ const MultiCheckoutUI = (props) => {
                 />
               </PaymentMethodContainer>
 
+              {
+                validationFields?.fields?.checkout?.coupon?.enabled &&
+                openCarts.every(cart => cart.business_id && cart.status !== 2) &&
+                configs?.multi_business_checkout_coupon_input_style?.value === 'group' && (
+                  <DriverTipContainer>
+                    <h1>{t('DISCOUNT_COUPON', 'Discount coupon')}</h1>
+                    <CouponContainer>
+                      <CouponControl
+                        carts={openCarts}
+                        businessIds={openCarts.map(cart => cart.business_id)}
+                        price={openCarts.reduce((total, cart) => total + cart.total, 0)}
+                      />
+                    </CouponContainer>
+                  </DriverTipContainer>
+                )
+              }
+
               {
                 isMultiDriverTips &&
                 orderState?.options.type === 1 &&
@@ -244,9 +263,10 @@ const MultiCheckoutUI = (props) => {
               {openCarts.map(cart => (
                 <React.Fragment key={cart.uuid}>
                   <Cart
-                    isCartPending={cart?.status === 2}
                     cart={cart}
                     isMultiCheckout
+                    isCartPending={cart?.status === 2}
+                    hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
                     isProducts={cart?.products?.length || 0}
                     hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
                     hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
@@ -263,20 +283,20 @@ const MultiCheckoutUI = (props) => {
                 <MultiCartPriceContainer totalFeeEnabled={totalFeeEnabled}>
                   {!!totalCartsFee &&
                     configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' &&
-                  (
-                    <span>
-                      <p>{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}</p>
-                      <p>{parsePrice(totalCartsFee)}</p>
-                    </span>
-                  )}
+                    (
+                      <span>
+                        <p>{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}</p>
+                        <p>{parsePrice(totalCartsFee)}</p>
+                      </span>
+                    )}
                   {openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0) > 0 &&
                     configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' &&
-                  (
-                    <span>
-                      <p>{t('DRIVER_TIP', 'Driver tip')}</p>
-                      <p>{parsePrice(openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0))}</p>
-                    </span>
-                  )}
+                    (
+                      <span>
+                        <p>{t('DRIVER_TIP', 'Driver tip')}</p>
+                        <p>{parsePrice(openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0))}</p>
+                      </span>
+                    )}
                   <div>
                     <h4>{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}</h4>
                     <h4>{parsePrice(totalCartsPrice)}</h4>

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

@@ -36,6 +36,15 @@ export const WrapperLeftContent = styled.div`
     margin-bottom: 5px;
   }
 `
+
+export const CouponContainer = styled.div`
+  width: 100%;
+
+  input, button {
+    border-radius: 7.6px;
+  }
+`
+
 export const WrapperRightContainer = styled.div`
   width: 100%;
   background: #F8F9FA;

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

@@ -54,9 +54,6 @@ export const MyOrders = (props) => {
       {hideOrders && !allEmpty && (
         <h2>{t('PREVIOUSLY_ORDERED', 'Previously ordered')}</h2>
       )}
-      {!hideOrders && !props.hideOptions && (
-        <ProfileOptions value='orders' />
-      )}
       <Container hideOrders={hideOrders}>
         {!hideOrders && (
           <h1>{layout === 'appointments' ? t('MY_APPOINTMENTS', 'My appointments') : t('MY_ORDERS', 'My orders')}</h1>

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { useTheme } from 'styled-components'
 import { Button } from '../../styles/Buttons'
+import FdPageSearch from '@meronex/icons/fd/FdPageSearch'
 
 import {
   NotFound,
@@ -17,9 +17,6 @@ export const NotFoundSource = (props) => {
     onClickButton
   } = props
 
-  const theme = useTheme()
-
-  const errorImage = image || theme.images?.general?.notFound
 
   return (
     <>
@@ -30,12 +27,10 @@ export const NotFoundSource = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <NotFound id='not-found-source'>
-        {errorImage && (
-          <NotFoundImage>
-            <img src={errorImage} alt='Not Found' width='300' height='260' loading='lazy' />
-          </NotFoundImage>
-        )}
-        {content && conditioned && !errorImage && <h1>{content}</h1>}
+        <NotFoundImage>
+          <FdPageSearch />
+        </NotFoundImage>
+        {content && conditioned && <h1>{content}</h1>}
         {content && !conditioned && <h1>{content}</h1>}
         {!onClickButton && props.children && (
           props.children

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

@@ -10,7 +10,8 @@ export const NotFound = styled.div`
   margin: 20px auto;
 
   h1 {
-    font-size: 14px;
+    font-size: 20px;
+    opacity: 0.5;
     line-height: 24px;
     text-align: center;
     color: ${props => props.theme.colors?.headingColor};
@@ -24,7 +25,11 @@ export const NotFound = styled.div`
 `
 
 export const NotFoundImage = styled.div`
-  max-width: 300px;
+  svg {
+    width: 150px;
+    height: 120px;
+    opacity: 0.5;
+  }
 `
 
 export const ButtonWrapper = styled.div`

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

@@ -67,7 +67,7 @@ export const OrderContextUI = (props) => {
 
   return (
     <>
-      <Container isBusinessList={isBusinessList}>
+      <Container isBusinessList={isBusinessList} hero={props.hideHero} >
         <AddressMenu
           onClick={() => handleClickAddress()}
           isCheckOut={isCheckOut}

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

@@ -2,12 +2,14 @@ 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;
   `}
+  ${({ hero }) => hero && css`
+    position: absolute;
+    top: 10%;
+  `}
   margin-top: 10px;
 `
 

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

@@ -36,6 +36,8 @@ const OrderProgressUI = (props) => {
   const [events] = useEvent()
   const [lastOrder, setLastOrder] = useState(null)
 
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+
   const handleGoToPage = (index) => {
     events.emit('go_to_page', { page: index, params: { orderId: lastOrder?.uuid } })
   }
@@ -58,7 +60,11 @@ const OrderProgressUI = (props) => {
         <OrderProgressWrapper isChew={props.isChew}>
           <OrderProgressContainer>
             <OrderInfoWrapper>
-              <ProgressLogo bgimage={optimizeImage(lastOrder?.business?.logo || theme.images?.dummies?.businessLogo, 'h_91,c_limit')} />
+              <ProgressLogo
+                bgimage={orderList?.orders.length === 1
+                  ? optimizeImage(lastOrder?.business?.logo || theme.images?.dummies?.businessLogo, 'h_91,c_limit')
+                  : isChew ? theme.images.logos.chewLogoReverse : theme.images.logos.logotype}
+              />
               <ProgressDescriptionWrapper>
                 <h2>{t('ORDER_IN_PROGRESS', 'Order in progress')}</h2>
                 <p>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</p>
@@ -114,7 +120,7 @@ export const OrderProgress = (props) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 1,
+      pageSize: 10,
       controlType: 'infinity'
     }
   }

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

@@ -41,6 +41,7 @@ export const BannerContainer = styled.div`
   }
 `
 export const ImageWrapper = styled.div`
+  cursor: pointer;
   width: 100%;
   padding-top: 260px;
   position: relative;

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

@@ -48,7 +48,7 @@ const getPayIcon = (method) => {
     case 1:
       return <Cash />
     case 22:
-      return <BilStripe />
+      return <CreditCard />
     case 28:
       return <FaCcStripe />
     case 31:

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

@@ -94,10 +94,10 @@ export const AddCommentHideShow = styled.p`
   transition: all 0.3s linear;
   color: #909BA9;
   font-size: 13px;
-
   &:hover {
-    color: ${props => props.theme?.colors.primary};
-  }
+        text-decoration: underline;
+        color: ${props => props.theme?.colors.primary};
+      }
   
   ${({ active }) => active && css`
     color: ${props => props.theme?.colors.primary};