ordering-ui-external 1.8.3 → 1.8.5

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

@@ -14,6 +14,7 @@ import { Button } from '../../styles/Buttons'
 
 const DriverTipsUI = (props) => {
   const {
+    isMulti,
     driverTip,
     driverTipsOptions,
     cart,
@@ -38,69 +39,51 @@ const DriverTipsUI = (props) => {
     : `0${configs?.format_number_currency?.value}`
 
   return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <DriverTipContainer id='driver-tip-container'>
-        <>
-          {isDriverTipUseCustom ? (
-            <FormDriverTip>
-              <WrapperInput>
-                <Input
-                  name='drivertip'
-                  type='text'
-                  value={value}
-                  placeholder={placeholderCurrency}
-                  onChange={handleChangeDriverTip}
-                />
-                <Button
-                  color='primary'
-                  disabled={parseFloat(value || 0) < 0 || parseFloat(value || 0) === driverTip || value === ''}
-                  onClick={() => {
-                    handlerChangeOption(value)
-                    setvalue('')
-                  }}
-                >
-                  {t('APPLY_TIP', 'Apply Tip')}
-                </Button>
-              </WrapperInput>
-              {parseFloat(driverTip || 0) > 0 && (
-                <DriverTipMessage>
-                  {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType && ` (${driverTip}%)`}: {isFixedPriceType ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
-                </DriverTipMessage>
-              )}
-            </FormDriverTip>
-          ) : (
-            <WrapperTips>
-              {driverTipsOptions.map((option, i) => (
-                <TipCard
-                  key={i}
-                  className={`${option === driverTip ? 'active' : ''}`}
-                  onClick={() => handlerChangeOption(option)}
-                >
-                  {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
-                </TipCard>
-              ))}
-            </WrapperTips>
-          )}
-        </>
-        {/* {isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0 && (
-          <DriverTipMessage>
-            {t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-          </DriverTipMessage>
-        )} */}
-      </DriverTipContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
+    <DriverTipContainer id='driver-tip-container'>
+      <>
+        {isDriverTipUseCustom && !isMulti ? (
+          <FormDriverTip>
+            <WrapperInput>
+              <Input
+                name='drivertip'
+                type='text'
+                value={value}
+                placeholder={placeholderCurrency}
+                onChange={handleChangeDriverTip}
+              />
+              <Button
+                color='primary'
+                disabled={parseFloat(value || 0) < 0 || parseFloat(value || 0) === driverTip || value === ''}
+                onClick={() => {
+                  handlerChangeOption(value)
+                  setvalue('')
+                }}
+              >
+                {t('APPLY_TIP', 'Apply Tip')}
+              </Button>
+            </WrapperInput>
+            {parseFloat(driverTip || 0) > 0 && (
+              <DriverTipMessage>
+                {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType &&
+                  ` (${driverTip}%)`}: {isFixedPriceType ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+              </DriverTipMessage>
+            )}
+          </FormDriverTip>
+        ) : (
+          <WrapperTips>
+            {driverTipsOptions.map((option, i) => (
+              <TipCard
+                key={i}
+                className={`${option === driverTip ? 'active' : ''}`}
+                onClick={() => handlerChangeOption(option)}
+              >
+                {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
+              </TipCard>
+            ))}
+          </WrapperTips>
+        )}
+      </>
+    </DriverTipContainer>
   )
 }
 

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

@@ -68,7 +68,7 @@ export const Header = (props) => {
   const theme = useTheme()
   const [configState] = useConfig()
   const [customerState, { deleteUserCustomer }] = useCustomer()
-  const [{ theme: orderingTheme }] = useOrderingTheme()
+  const [orderingTheme] = useOrderingTheme()
 
   const clearCustomer = useRef(null)
   const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -93,7 +93,7 @@ export const Header = (props) => {
   const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru')]
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
   const isPreOrderSetting = configState?.configs?.preorder_status_enabled?.value === '1'
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const handleSuccessSignup = (user) => {
     login({
@@ -423,7 +423,7 @@ export const Header = (props) => {
         )}
         {modalIsOpen && (
           <Modal
-            title={(!auth && modalSelected === 'address') && t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+            {...(!auth && modalSelected === 'address' && { title: t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?') })}
             open={modalIsOpen}
             onClose={() => setModalIsOpen(false)}
             width={modalSelected === 'address' ? orderState?.options?.user_id ? '70%' : '50%' : '700px'}

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

@@ -19,10 +19,10 @@ export const HeaderOption = (props) => {
 
   const [{ configs }] = useConfig()
   const [{ parseDate }] = useUtils()
-  const [{ theme: orderingTheme }] = useOrderingTheme()
+  const [orderingTheme] = useOrderingTheme()
   const [, t] = useLanguage()
   const [orderStatus] = useOrder()
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   return (
     <>

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

@@ -8,6 +8,7 @@ import {
   useSession,
   useValidationFields,
   useOrder,
+  useOrderingTheme,
   MultiCheckout as MultiCheckoutController
 } from 'ordering-components-external'
 
@@ -34,8 +35,10 @@ import {
   MultiCartPriceContainer,
   PaymentMethodContainer,
   WrapperPlaceOrderButton,
-  WarningText
+  WarningText,
+  DriverTipContainer
 } from './styles'
+import { DriverTips } from '../DriverTips'
 
 const mapConfigs = {
   mapZoom: 16,
@@ -63,6 +66,7 @@ const MultiCheckoutUI = (props) => {
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
   const [customerState] = useCustomer()
+  const [orderingTheme] = useOrderingTheme()
   const [validationFields] = useValidationFields()
   const [{ user }] = useSession()
   const [orderState] = useOrder()
@@ -74,6 +78,10 @@ const MultiCheckoutUI = (props) => {
   const maximumCarts = 5
   const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts
   const walletCarts = (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
+  const isMultiDriverTips = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
 
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
@@ -193,6 +201,31 @@ const MultiCheckoutUI = (props) => {
                 />
               </PaymentMethodContainer>
 
+              {
+                isMultiDriverTips &&
+                orderState?.options.type === 1 &&
+                validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                openCarts.every(cart => cart.business_id && cart.status !== 2) &&
+                driverTipsOptions.length > 0 &&
+                (
+                  <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
+                      isMulti
+                      carts={openCarts}
+                      businessIds={openCarts.map(cart => 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
+                        ? openCarts[0]?.driver_tip
+                        : openCarts[0]?.driver_tip_rate}
+                      useOrderContext
+                    />
+                  </DriverTipContainer>
+                )
+              }
             </WrapperLeftContent>
           </WrapperLeftContainer>
           <WrapperRightContainer>
@@ -205,7 +238,7 @@ const MultiCheckoutUI = (props) => {
                   <Cart
                     isCartPending={cart?.status === 2}
                     cart={cart}
-                    isMultiCheckout
+                    isMultiCheckout={!isMultiDriverTips}
                     isProducts={cart?.products?.length || 0}
                   />
                   <DriverTipDivider />

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

@@ -63,6 +63,25 @@ export const PaymentMethodContainer = styled.div`
     color: ${props => props.theme.colors.darkTextColor};
   }
 `
+
+export const DriverTipContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0px 0px;
+  h1 {
+    margin: 0px;
+    font-weight: 500;
+    font-size: 20px;
+    color: ${props => props.theme.colors.darkTextColor};
+  }
+  > p {
+    margin: 0;
+    font-size: 16px;
+    color: #909BA9;
+  }
+`
+
 export const CartContainer = styled(PaymentMethodContainer)`
   margin-bottom: 20px;
 `

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

@@ -20,7 +20,8 @@ import {
   ProgressBar,
   ProgressTextWrapper,
   StatusWrapper,
-  TimeWrapper
+  TimeWrapper,
+  OrderProgressWrapper
 } from './styles'
 
 const OrderProgressUI = (props) => {
@@ -73,10 +74,7 @@ const OrderProgressUI = (props) => {
     const deliveryTime = lastOrder?.delivery_datetime_utc
       ? parseDate(lastOrder?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
       : parseDate(lastOrder?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })
-    const hour = time?.split(':')[0]
-    const minute = time?.split(':')[1]
-    const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
-    const returnedDate = moment(new Date(deliveryTime.replace(/-/g, '/'))).add(result, 'minutes').format('hh:mm A')
+    const returnedDate = moment(new Date(deliveryTime.replace(/-/g, '/'))).add(time, 'minutes').format('hh:mm A')
     return returnedDate
   }
 
@@ -93,51 +91,57 @@ const OrderProgressUI = (props) => {
 
   return (
     <>
-      {orderList?.loading && <Skeleton height={150} />}
+      {orderList?.loading && (
+        <OrderProgressWrapper isChew={props.isChew}>
+          <Skeleton height={150} />
+        </OrderProgressWrapper>
+      )}
       {!orderList?.loading && orderList?.orders?.length > 0 && lastOrder && (
-        <OrderProgressContainer>
-          <OrderInfoWrapper>
-            <ProgressLogo bgimage={optimizeImage(lastOrder?.business?.logo || theme.images?.dummies?.businessLogo, 'h_91,c_limit')} />
-            <ProgressDescriptionWrapper>
-              <h2>{t('ORDER_IN_PROGRESS', 'Order in progress')}</h2>
-              <p>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</p>
-              <Button
-                color='primaryContrast'
-                naked
-                onClick={() => handleGoToPage(isCustomerMode ? 'order_detail' : 'orders')}
-              >
-                {isCustomerMode ? (
-                  <>
-                    {t('GO_TO_THE_ORDER', 'Go to the order')}
-                  </>
-                ) : (
-                  <>
-                    {t('GO_TO_MY_ORDERS', 'Go to my orders')}
-                  </>
-                )}
-                <BsArrowRight />
-              </Button>
-            </ProgressDescriptionWrapper>
-          </OrderInfoWrapper>
-          <ProgressBarWrapper>
-            <ProgressContentWrapper>
-              <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status).percentage}%` : '0%' }} />
-            </ProgressContentWrapper>
-            <ProgressTextWrapper>
-              <StatusWrapper>{getOrderStatus(lastOrder?.status)?.value}</StatusWrapper>
-              <TimeWrapper>
-                <span>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}:&nbsp;</span>
-                <span>
-                  {lastOrder?.delivery_datetime_utc
-                    ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
-                    : parseTime(lastOrder?.delivery_datetime, { utc: false })}
-                    &nbsp;-&nbsp;
-                  {convertDiffToHours(lastOrder.delivery_type === 1 ? lastOrder?.business?.delivery_time : lastOrder?.business?.pickup_time)}
-                </span>
-              </TimeWrapper>
-            </ProgressTextWrapper>
-          </ProgressBarWrapper>
-        </OrderProgressContainer>
+        <OrderProgressWrapper isChew={props.isChew}>
+          <OrderProgressContainer>
+            <OrderInfoWrapper>
+              <ProgressLogo bgimage={optimizeImage(lastOrder?.business?.logo || theme.images?.dummies?.businessLogo, 'h_91,c_limit')} />
+              <ProgressDescriptionWrapper>
+                <h2>{t('ORDER_IN_PROGRESS', 'Order in progress')}</h2>
+                <p>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</p>
+                <Button
+                  color='primaryContrast'
+                  naked
+                  onClick={() => handleGoToPage(isCustomerMode ? 'order_detail' : 'orders')}
+                >
+                  {isCustomerMode ? (
+                    <>
+                      {t('GO_TO_THE_ORDER', 'Go to the order')}
+                    </>
+                  ) : (
+                    <>
+                      {t('GO_TO_MY_ORDERS', 'Go to my orders')}
+                    </>
+                  )}
+                  <BsArrowRight />
+                </Button>
+              </ProgressDescriptionWrapper>
+            </OrderInfoWrapper>
+            <ProgressBarWrapper>
+              <ProgressContentWrapper>
+                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status).percentage}%` : '0%' }} />
+              </ProgressContentWrapper>
+              <ProgressTextWrapper>
+                <StatusWrapper>{getOrderStatus(lastOrder?.status)?.value}</StatusWrapper>
+                <TimeWrapper>
+                  <span>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}:&nbsp;</span>
+                  <span>
+                    {lastOrder?.delivery_datetime_utc
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                      : parseTime(lastOrder?.delivery_datetime, { utc: false })}
+                      &nbsp;-&nbsp;
+                    {convertDiffToHours(lastOrder.eta_time)}
+                  </span>
+                </TimeWrapper>
+              </ProgressTextWrapper>
+            </ProgressBarWrapper>
+          </OrderProgressContainer>
+        </OrderProgressWrapper>
       )}
     </>
 

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

@@ -26,6 +26,15 @@ export const OrderProgressContainer = styled.div`
   }
 `
 
+export const OrderProgressWrapper = styled.div`
+  padding: ${props => props.isChew ? '110px 20px 45px' : '45px 20px'};
+  margin: 0px;
+  @media (min-width: 768px) {
+      margin: 0 35px;
+      padding: 45px 20px;
+    }
+`
+
 export const OrderInfoWrapper = styled.div`
   display: flex;
   align-items: center;

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

@@ -110,7 +110,7 @@ const PaymentOptionsUI = (props) => {
 
   const includeKioskPaymethods = ['cash', 'card_delivery']
 
-  const list = paymethods ? paymethods?.map(pay => pay.paymethod) : paymethodsList?.paymethods
+  const list = paymethodsList ? paymethodsList?.paymethods : paymethods?.map(pay => pay.paymethod)
 
   const popupMethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square', 'google_pay', 'apple_pay']
   const supportedMethods = list?.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)

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

@@ -43,7 +43,7 @@ export const UserPopover = (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 isAddressListNewPage = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const extraOptions = [
     { name: 'profile', pathname: '/profile', displayName: 'view account', key: 'view_account', isActive: true },