ordering-ui-external 2.5.0 → 2.5.2

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   useLanguage,
   useConfig,
@@ -28,6 +28,8 @@ import {
   SectionLeft,
   SectionLeftText
 } from './styles'
+import { StripeElementsForm } from '../StripeElementsForm'
+import Modal from '../Modal'
 
 const stripeOptions = ['stripe_direct', 'stripe', 'stripe_connect']
 
@@ -72,17 +74,21 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
     handlePaymethodDataChange,
     setCardList,
     walletsPaymethod,
-    isCustomerMode
+    isCustomerMode,
+    handlePlaceOrder,
+    cartGroup
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
+  const [openPaymethod, setOpenPaymethod] = useState(null)
 
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
-
+  const methodsPay = ['global_google_pay', 'global_apple_pay']
+  const stripeDirectMethods = ['stripe_direct', ...methodsPay]
   const walletName = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -109,7 +115,10 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
               {(!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
                 <PayCard
                   isActive={paymethodSelected?.id === paymethod.id}
-                  onClick={() => handleSelectPaymethod({ ...paymethod, paymethod: { gateway: paymethod.gateway }, paymethod_id: paymethod?.id })}
+                  onClick={() => {
+                    handleSelectPaymethod({ ...paymethod, paymethod: { gateway: paymethod.gateway }, paymethod_id: paymethod?.id })
+                    setOpenPaymethod(paymethod)
+                  }}
                 >
                   <div>{getPayIcon(paymethod.id)}</div>
                   <p>{t(paymethod?.gateway.toUpperCase(), paymethod?.name)}</p>
@@ -161,57 +170,80 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
               {walletsState?.result?.filter(wallet =>
                 paymethodsAndWallets.wallets.find(item => item.type === wallet.type))
                 .map((wallet, idx) => walletName[wallet.type]?.isActive &&
-              (
-                <WalletOptionContainer
-                  key={wallet.type}
-                  isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
-                >
-                  <SectionLeft>
-                    <Checkbox
-                      name={`payment_option_${wallet.type}`}
-                      id={`custom-checkbox-${idx}`}
-                      disabled={
-                        (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
-                        wallet.balance === 0
-                      }
-                      value={`payment_option_${wallet.type}`}
-                      checked={!!walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id}
-                      onChange={() => handleSelectWallet(
-                        !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id,
-                        wallet
-                      )}
-                    />
-                    <SectionLeftText>
-                      <label
-                        style={{
-                          color: (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
-                            wallet.balance === 0 ? theme.colors.darkGray : 'black'
-                        }}
-                        htmlFor={`custom-checkbox-${idx}`}
-                      >
-                        {walletName[wallet.type]?.name}
-                      </label>
-                    </SectionLeftText>
-                  </SectionLeft>
-                  <div>
-                    {wallet.type === 'cash' && (
-                      <span>{parsePrice(wallet?.balance, { isTruncable: true })}</span>
-                    )}
-                    {wallet.type === 'credit_point' && (
-                      <span>
-                        <span style={{ color: theme.colors.primary }}>
-                          {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                        </span> {wallet?.balance > 0 && `= ${parsePrice(wallet?.balance / wallet?.redemption_rate, { isTruncable: true })}`}
-                      </span>
-                    )}
-                  </div>
-                </WalletOptionContainer>
-              ))}
+                  (
+                    <WalletOptionContainer
+                      key={wallet.type}
+                      isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
+                    >
+                      <SectionLeft>
+                        <Checkbox
+                          name={`payment_option_${wallet.type}`}
+                          id={`custom-checkbox-${idx}`}
+                          disabled={
+                            (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
+                            wallet.balance === 0
+                          }
+                          value={`payment_option_${wallet.type}`}
+                          checked={!!walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id}
+                          onChange={() => handleSelectWallet(
+                            !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id,
+                            wallet
+                          )}
+                        />
+                        <SectionLeftText>
+                          <label
+                            style={{
+                              color: (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
+                                wallet.balance === 0 ? theme.colors.darkGray : 'black'
+                            }}
+                            htmlFor={`custom-checkbox-${idx}`}
+                          >
+                            {walletName[wallet.type]?.name}
+                          </label>
+                        </SectionLeftText>
+                      </SectionLeft>
+                      <div>
+                        {wallet.type === 'cash' && (
+                          <span>{parsePrice(wallet?.balance, { isTruncable: true })}</span>
+                        )}
+                        {wallet.type === 'credit_point' && (
+                          <span>
+                            <span style={{ color: theme.colors.primary }}>
+                              {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                            </span> {wallet?.balance > 0 && `= ${parsePrice(wallet?.balance / wallet?.redemption_rate, { isTruncable: true })}`}
+                          </span>
+                        )}
+                      </div>
+                    </WalletOptionContainer>
+                  ))}
             </>
           )}
         </WalletPaymentOptionContainer>
       )}
-
+      {/* Stripe direct, Google pay, Apple pay */}
+      <Modal
+        title={t('ADD_CARD', 'Add card')}
+        open={stripeDirectMethods?.includes(openPaymethod?.gateway) && !paymethodSelected?.paymethod_data?.id}
+        className='modal-info'
+        onClose={() => setOpenPaymethod(null)}
+      >
+        {!paymethodSelected?.data?.publishable &&
+          <Container>
+            <p>{t('ADD_PUBLISHABLE_KEY', 'Please add a publishable key')}</p>
+          </Container>}
+        {paymethodSelected?.data?.publishable && stripeDirectMethods?.includes(paymethodSelected?.paymethod?.gateway) && (
+          <StripeElementsForm
+            methodsPay={methodsPay}
+            paymethod={paymethodSelected?.paymethod?.gateway}
+            businessId={props.businessId}
+            cartGroup={cartGroup?.result}
+            publicKey={paymethodSelected?.data?.publishable || paymethodSelected?.data?.publishable_key}
+            handleSource={handlePaymethodDataChange}
+            onCancel={() => setOpenPaymethod(null)}
+            handlePlaceOrder={handlePlaceOrder}
+          />
+        )}
+      </Modal>
     </Container>
   )
 }

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

@@ -101,6 +101,11 @@ const MultiCheckoutUI = (props) => {
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
 
+  const methodsPay = ['global_google_pay', 'global_apple_pay']
+  const creditPointPlan = loyaltyPlansState?.result?.find((loyal) => loyal.type === 'credit_point')
+  const businessIds = openCarts.map((cart) => cart.business_id)
+  const loyalBusinessIds = creditPointPlan?.businesses?.filter((b) => b.accumulates).map((item) => item.business_id) ?? []
+  const creditPointPlanOnBusiness = businessIds.every((bid) => loyalBusinessIds.includes(bid)) && creditPointPlan
   const creditPointGeneralPlan = loyaltyPlansState?.result?.find((loyal) => loyal.type === 'credit_point')
   const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b) => b.accumulates) ?? []
 
@@ -209,6 +214,15 @@ const MultiCheckoutUI = (props) => {
     }
   }, [walletState.error])
 
+  useEffect(() => {
+    if (methodsPay.includes(paymethodSelected?.paymethod?.gateway) && typeof paymethodSelected?.paymethod_data === 'string') {
+      const hasSource = JSON.parse(paymethodSelected?.paymethod_data)?.source_id
+      if (hasSource) {
+        handlePlaceOrder()
+      }
+    }
+  }, [paymethodSelected])
+
   return (
     <>
       {((!cartGroup?.loading && openCarts.length === 0) || !cartUuid) ? (
@@ -260,7 +274,9 @@ const MultiCheckoutUI = (props) => {
                   handlePaymethodDataChange={handlePaymethodDataChange}
                   cartUuid={cartUuid}
                   isCustomerMode={isCustomerMode}
+                  cartGroup={cartGroup}
                   setCardList={setCardList}
+                  handlePlaceOrder={handlePlaceOrder}
                 />
               </PaymentMethodContainer>
 

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

@@ -38,9 +38,11 @@ export const OrderEta = (props) => {
       }
       _estimatedTime = moment.utc(_delivery).add(totalEta, 'minutes')
     } else {
-      _estimatedTime = moment.utc(_delivery).add(order?.eta_time, 'minutes')
+      const _etaTime = order?.delivered_in
+        ? order?.delivered_in + order?.eta_time
+        : order?.eta_time
+      _estimatedTime = moment.utc(_delivery).add(_etaTime, 'minutes')
     }
-    if (order?.delivered_in) { _estimatedTime = moment.utc(_delivery).add(order?.delivered_in, 'minutes')}
     _estimatedTime = outputFormat ? moment(_estimatedTime).local().format(outputFormat) : parseDate(_estimatedTime, { utc: false })
     setEstimatedDeliveryTime(_estimatedTime)
   }

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

@@ -3,6 +3,7 @@ import {
   useLanguage,
   useUtils,
   useEvent,
+  useConfig,
   OrderList as OrderListController
 } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
@@ -31,11 +32,12 @@ const OrderProgressUI = (props) => {
     isCustomerMode
   } = props
   const [, t] = useLanguage()
-  const [{ optimizeImage, parseTime }] = useUtils()
+  const [{ optimizeImage, parseTime, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
   const theme = useTheme()
   const [events] = useEvent()
   const [lastOrder, setLastOrder] = useState(null)
-  const statusToShow = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21]
+  const statusToShow = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
 
   const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
@@ -110,7 +112,11 @@ const OrderProgressUI = (props) => {
                       ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A', utc: false })
                       : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                      - 
-                    <OrderEta order={lastOrder} outputFormat='hh:mm A' />
+                    {statusToShow.includes(lastOrder?.status) ? (
+                      <OrderEta order={lastOrder} outputFormat={configs?.general_hour_format?.value || 'HH:mm'} />
+                    ) : (
+                      parseDate(lastOrder?.reporting_data?.at[`status:${lastOrder.status}`], { outputFormat: configs?.general_hour_format?.value })
+                    )}
                   </span>
                 </TimeWrapper>
               </ProgressTextWrapper>

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

@@ -112,10 +112,13 @@ const PaymentOptionsUI = (props) => {
 
   const includeKioskPaymethods = ['cash', 'card_delivery']
 
+  const multiCheckoutMethods = ['global_google_pay', 'global_apple_pay']
+
   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)
+
+  const supportedMethods = list?.filter(p => !multiCheckoutMethods.includes(p.gateway))?.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)
 
   const handlePaymentMethodClick = (paymethod) => {
     if (paymethod?.gateway === 'paypal' &&
@@ -176,7 +179,7 @@ const PaymentOptionsUI = (props) => {
     if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
       handlePlaceOrder()
     }
-  }, [paymethodData, paymethodSelected])
+  }, [JSON.stringify(paymethodData), paymethodSelected])
 
   return (
     <>
@@ -193,10 +196,10 @@ const PaymentOptionsUI = (props) => {
             supportedMethods.sort((a, b) => a.id - b.id).map(paymethod => (
               <React.Fragment key={paymethod.id}>
                 {
-                  (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
+                  ((!isCustomerMode && paymethod.gateway) || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
                     <PayCard
                       isDisabled={isDisabled}
-                      className={`card ${(paymethodSelected?.id || isOpenMethod?.paymethod?.id) === paymethod.id ? 'active' : ''}`}
+                      className={`${(paymethodSelected?.id || isOpenMethod?.paymethod?.id) === paymethod.id ? 'active' : ''}`}
                       onClick={() => handlePaymentMethodClick(paymethod)}
                     >
                       <div>

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}