ordering-ui-external 1.9.2 → 1.9.4

package/template/app.js

@@ -1,4 +1,7 @@
 import React, { useEffect, useState } from 'react'
+import PWAPrompt from 'react-ios-pwa-prompt'
+import { useTheme, ThemeProvider } from 'styled-components'
+import loadable from '@loadable/component'
 import {
   Switch,
   Route,
@@ -6,65 +9,82 @@ import {
   Link,
   useLocation
 } from 'react-router-dom'
-import { useTheme, ThemeProvider } from 'styled-components'
-import PWAPrompt from 'react-ios-pwa-prompt'
 
-import { useSession, useApi, useLanguage, useOrder, Analytics, FacebookPixel, useConfig, AnalyticsSegment, useEvent, useOrderingTheme, useSite } from 'ordering-components-external'
-import { Header } from '../src/themes/five/src/components/Header'
-import { Header as HeaderKiosk } from '../src/themes/five/src/components/Header/layouts/Kiosk'
-import { Footer } from '../src/themes/five/src/components/Footer'
-import { NotNetworkConnectivity } from '../src/themes/five/src/components/NotNetworkConnectivity'
+import {
+  useSession,
+  useApi,
+  useLanguage,
+  useOrder,
+  Analytics,
+  FacebookPixel,
+  useConfig,
+  AnalyticsSegment,
+  useEvent,
+  useOrderingTheme,
+  useSite
+} from 'ordering-components-external'
 
-import { SpinnerLoader } from '../src/components/SpinnerLoader'
-import { Header as HeaderOld } from '../src/components/Header'
-import { Header as HeaderRed } from '../src/themes/seven/src/components/Header'
-import { Header as HeaderStarbucks } from '../src/themes/six/src/components/Header'
 import { useOnlineStatus } from '../src/hooks/useOnlineStatus'
 import { useWindowSize } from '../src/hooks/useWindowSize'
-import { Alert } from '../src/components/Confirm'
-import { SmartAppBanner } from '../src/components/SmartAppBanner'
-
-import { NavigationBar } from '../src/themes/five/src/components/NavigationBar'
-import { Modal } from '../src/themes/five/src/components/Modal'
-
-import { ReviewTrigger } from '../src/themes/five/src/components/ReviewTrigger'
-import { ReviewOrder } from '../src/themes/five/src/components/ReviewOrder'
-import { ReviewProduct } from '../src/themes/five/src/components/ReviewProduct'
-import { ReviewDriver } from '../src/themes/five/src/components/ReviewDriver'
-import { SignUpApproval } from '../src/themes/five/src/components/SignUpApproval'
-
-import { AddressList } from './pages/AddressList'
-import { BusinessesList } from './pages/BusinessesList'
-import { BusinessProductsList } from './pages/BusinessProductsList'
-import { CheckoutPage } from './pages/Checkout'
-import { Cms } from './pages/Cms'
-import { HomePage } from './pages/Home'
-import { MyOrders } from './pages/MyOrders'
-import { OrderDetailsPage } from './pages/OrderDetails'
-import { PageNotFound } from './pages/PageNotFound'
-import { PagesList } from './pages/PagesList'
-import { Profile } from './pages/Profile'
-import { Wallets } from './pages/Wallets'
-import { MessagesList } from './pages/MessagesList'
-import { Help } from './pages/Help'
-import { Favorite } from './pages/Favorite'
-import { SessionsList } from './pages/SessionsList'
-import { SignUpBusiness } from './pages/SignUpBusiness'
-import { SignUpDriver } from './pages/SignUpDriver'
-import { UserVerification } from './pages/UserVerification'
-import { BusinessListingSearch } from './pages/BusinessListingSearch'
-import { ResetPassword } from './pages/ResetPassword'
-import { ScrollToTop } from './components/ScrollToTop'
-import { ListenPageChanges } from './components/ListenPageChanges'
-import { HelmetTags } from './components/HelmetTags'
+
 import settings from './config'
-import { Promotions } from './pages/Promotions'
-import { MultiCheckout } from './pages/MultiCheckout'
-import { MultiOrdersDetails } from './pages/MultiOrdersDetails'
-import { CancellationComponent } from '../src/components/CancellationComponent'
-import { Button } from '../src/themes/five/src/styles/Buttons'
+import { orderingThemeUpdated } from './components/OrderingThemeUpdated'
+
+import { SpinnerLoader } from '../src/components/SpinnerLoader'
 import { Input } from '../src/themes/five/src/styles/Inputs'
 
+const Header = loadable(() => import('../src/themes/five/src/components/Header'))
+const HeaderKiosk = loadable(() => import('../src/themes/five/src/components/Header/layouts/Kiosk'))
+const NotNetworkConnectivity = loadable(() => import('../src/themes/five/src/components/NotNetworkConnectivity'))
+const Footer = loadable(() => import('../src/themes/five/src/components/Footer'))
+const NavigationBar = loadable(() => import('../src/themes/five/src/components/NavigationBar'))
+const Modal = loadable(() => import('../src/themes/five/src/components/Modal'))
+const ReviewTrigger = loadable(() => import('../src/themes/five/src/components/ReviewTrigger'))
+const ReviewOrder = loadable(() => import('../src/themes/five/src/components/ReviewOrder'))
+const ReviewProduct = loadable(() => import('../src/themes/five/src/components/ReviewProduct'))
+const ReviewDriver = loadable(() => import('../src/themes/five/src/components/ReviewDriver'))
+const SignUpApproval = loadable(() => import('../src/themes/five/src/components/SignUpApproval'))
+const Button = loadable(() => import('../src/themes/five/src/styles/Buttons'))
+
+const Alert = loadable(() => import('../src/components/Confirm'))
+const HeaderOld = loadable(() => import('../src/components/Header'))
+
+const SmartAppBanner = loadable(() => import('../src/components/SmartAppBanner'))
+const CancellationComponent = loadable(() => import('../src/components/CancellationComponent'))
+
+const HeaderRed = loadable(() => import('../src/themes/seven/src/components/Header'))
+const HeaderStarbucks = loadable(() => import('../src/themes/six/src/components/Header'))
+
+const AddressList = loadable(() => import('./pages/AddressList'))
+const BusinessesList = loadable(() => import('./pages/BusinessesList'))
+const CheckoutPage = loadable(() => import('./pages/Checkout'))
+const Cms = loadable(() => import('./pages/Cms'))
+const HomePage = loadable(() => import('./pages/Home'))
+const MyOrders = loadable(() => import('./pages/MyOrders'))
+const OrderDetailsPage = loadable(() => import('./pages/OrderDetails'))
+const PageNotFound = loadable(() => import('./pages/PageNotFound'))
+const PagesList = loadable(() => import('./pages/PagesList'))
+const Profile = loadable(() => import('./pages/Profile'))
+const Wallets = loadable(() => import('./pages/Wallets'))
+const MessagesList = loadable(() => import('./pages/MessagesList'))
+const Help = loadable(() => import('./pages/Help'))
+const Favorite = loadable(() => import('./pages/Favorite'))
+const SessionsList = loadable(() => import('./pages/SessionsList'))
+const SignUpBusiness = loadable(() => import('./pages/SignUpBusiness'))
+const SignUpDriver = loadable(() => import('./pages/SignUpDriver'))
+const UserVerification = loadable(() => import('./pages/UserVerification'))
+const BusinessListingSearch = loadable(() => import('./pages/BusinessListingSearch'))
+const ResetPassword = loadable(() => import('./pages/ResetPassword'))
+const Promotions = loadable(() => import('./pages/Promotions'))
+const MultiCheckout = loadable(() => import('./pages/MultiCheckout'))
+const MultiCart = loadable(() => import('./pages/MultiCart'))
+const MultiOrdersDetails = loadable(() => import('./pages/MultiOrdersDetails'))
+const BusinessProductsList = loadable(() => import('./pages/BusinessProductsList'))
+
+const ScrollToTop = loadable(() => import('./components/ScrollToTop'))
+const ListenPageChanges = loadable(() => import('./components/ListenPageChanges'))
+const HelmetTags = loadable(() => import('./components/HelmetTags'))
+
 export const App = () => {
   const [{ auth, user }, { login }] = useSession()
   const [events] = useEvent()
@@ -81,6 +101,7 @@ export const App = () => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const windowSize = useWindowSize()
   const [businessSignUpSuccessed, setBusinessSignUpSuccessed] = useState({ open: false, content: {} })
+  const [searchValue, setSearchValue] = useState('')
   const [lastOrderReview, setLastOrderReview] = useState({
     isReviewOpen: false,
     order: null,
@@ -100,6 +121,38 @@ export const App = () => {
       ...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
+      }
     }
   }
 
@@ -140,6 +193,9 @@ export const App = () => {
   const isUserVerifyRequired = (isEmailVerifyRequired || isPhoneVerifyRequired) && !isKioskApp
   const isHideFooter = orderingTheme?.theme?.footer?.hidden
 
+  const isHome = location.pathname === '/' || location.pathname === '/home'
+  const isFooterPage = location.pathname === '/pages/footer' || isKioskApp || isHideFooter
+
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -152,9 +208,6 @@ export const App = () => {
     window.location.reload()
   }
 
-  const isHome = location.pathname === '/' || location.pathname === '/home'
-  const isFooterPage = location.pathname === '/pages/footer' || isKioskApp || isHideFooter
-
   const handleSuccessSignup = (user) => {
     if (!user?.enabled && (configs?.business_signup_enabled_default?.value === '0' || configs?.driver_signup_enabled_default?.value === '0')) {
       signUpBusinesslayout === 'new'
@@ -277,6 +330,40 @@ export const App = () => {
     }
   }
 
+  useEffect(() => {
+    const link = document.createElement('link')
+    const oldLink = document.getElementById('favicon')
+    link.id = 'favicon'
+    link.rel = 'icon'
+    link.href = themeUpdated?.general?.components?.favicon
+    if (oldLink) {
+      document.head.removeChild(oldLink)
+    }
+    document.head.appendChild(link)
+    const fonts = Object.entries(themeUpdated?.general?.components?.fonts || {})
+    fonts.forEach(([name, fontFamily]) => {
+      const fontElement = window.document.getElementById(`${name}-font-styles`)
+      if (
+        (fontElement?.name !== fontFamily.name && fontFamily.name) ||
+        (fontElement?.href !== fontFamily?.href && fontFamily?.href)
+      ) {
+        window.document.body.removeChild(window.document.getElementById(`${name}-font-styles`))
+        const font = window.document.createElement('link')
+        font.id = `${name}-font-styles`
+        font.rel = 'stylesheet'
+        font.async = true
+        font.defer = true
+        font.name = fontFamily.name
+        font.href = fontFamily.href || `https://fonts.googleapis.com/css2?family=${fontFamily.name}:wght@${fontFamily.weights.join(';')}&display=swap`
+
+        window.document.body.appendChild(font)
+        if (name === 'primary') {
+          window.document.body.style.fontFamily = fontFamily.name
+        }
+      }
+    })
+  }, [themeUpdated])
+
   useEffect(() => {
     if (!isShowReviewsPopupEnabled) return
     const _user = window.localStorage.getItem('user')
@@ -367,13 +454,17 @@ export const App = () => {
       />
       {
         loaded && (
-          <ThemeProvider theme={themeUpdated}>
+          <ThemeProvider
+            theme={orderingThemeUpdated(theme, orderingTheme)}
+          >
             <ListenPageChanges />
-            {!(isKioskApp && isHome) && windowSize.width > 576 && (
+            {!(isKioskApp && isHome) && (
               <HeaderComponent
                 isHome={isHome}
                 location={location}
                 isCustomLayout={singleBusinessConfig.isActive}
+                searchValue={searchValue}
+                setSearchValue={setSearchValue}
               />
             )}
             <NotNetworkConnectivity />
@@ -507,7 +598,7 @@ export const App = () => {
                               <Redirect to='/verify' />
                             ) : (
                               orderStatus.options?.address?.location
-                                ? <BusinessesList />
+                                ? <BusinessesList searchValueCustom={searchValue} />
                                 : <Redirect to={singleBusinessConfig.isActive ? `/${singleBusinessConfig.businessSlug}` : '/'} />
                             )
                           )
@@ -553,7 +644,7 @@ export const App = () => {
                         />
                       )}
                   </Route>
-                  <Route path='/multi-checkout'>
+                  <Route exact path='/multi-checkout/:cartUuid?'>
                     {auth
                       ? isUserVerifyRequired
                         ? <Redirect to='/verify' />
@@ -568,7 +659,22 @@ export const App = () => {
                         />
                       )}
                   </Route>
-                  <Route path='/multi-orders'>
+                  <Route exact path='/multi-cart'>
+                    {auth
+                      ? isUserVerifyRequired
+                        ? <Redirect to='/verify' />
+                        : <MultiCart />
+                      : (
+                        <Redirect to={{
+                          pathname: singleBusinessConfig.isActive
+                            ? `/${singleBusinessConfig.businessSlug}`
+                            : '/',
+                          state: { from: location.pathname || null }
+                        }}
+                        />
+                      )}
+                  </Route>
+                  <Route exact path='/multi-orders/:orderId'>
                     {auth
                       ? isUserVerifyRequired
                         ? <Redirect to='/verify' />
@@ -648,35 +754,42 @@ export const App = () => {
                       <BusinessProductsList />
                     )}
                   </Route>
-                  <Route exact path='/:business_slug'>
+                  <Route exact path='/store/:business_slug'>
                     {isUserVerifyRequired ? (
                       <Redirect to='/verify' />
                     ) : (
                       <BusinessProductsList />
                     )}
                   </Route>
-                  <Route exact path='/:business_slug/:category_slug/:product_slug'>
+                  <Route exact path='/store/:business_slug/:category_slug/:product_slug'>
                     {isUserVerifyRequired ? (
                       <Redirect to='/verify' />
                     ) : (
                       <BusinessProductsList />
                     )}
                   </Route>
-                  <Route exact path='/store/:business_slug'>
+                  <Route exact path='/store/:category_slug/:product_slug'>
                     {isUserVerifyRequired ? (
                       <Redirect to='/verify' />
                     ) : (
                       <BusinessProductsList />
                     )}
                   </Route>
-                  <Route exact path='/store/:business_slug/:category_slug/:product_slug'>
+                  <Route exact path='/:business_slug'>
                     {isUserVerifyRequired ? (
                       <Redirect to='/verify' />
                     ) : (
                       <BusinessProductsList />
                     )}
                   </Route>
-                  <Route exact path='/store/:category_slug/:product_slug'>
+                  <Route exact path='/:business_slug/:category_slug/:product_slug'>
+                    {isUserVerifyRequired ? (
+                      <Redirect to='/verify' />
+                    ) : (
+                      <BusinessProductsList />
+                    )}
+                  </Route>
+                  <Route exact path='/:business_slug/:category_slug'>
                     {isUserVerifyRequired ? (
                       <Redirect to='/verify' />
                     ) : (
@@ -695,7 +808,7 @@ export const App = () => {
             {(!isFooterPage || enabledPoweredByOrdering) && (
               <Footer isFooterPage={isFooterPage} />
             )}
-            {windowSize.width < 576 && onlineStatus && (
+            {(windowSize.width < 576 && onlineStatus) && (
               <NavigationBar />
             )}
             <Alert

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',
     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,30 @@
+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),
+    handleOnRedirectMultiCheckout: (cartUuid) => {
+      events.emit('go_to_page', { page: 'multi_checkout', params: { cartUuid }, replace: true })
+    },
+    handleOnRedirectCheckout: (cartUuid) => {
+      events.emit('go_to_page', { page: 'checkout', params: { cartUuid }, replace: true })
+    },
+    cartUuid,
+    cartGroup
+  }
+  return (
+    <>
+      <HelmetTags page='multi_cart' />
+      <MultiCartController {...multiCheckoutProps} />
+    </>
+  )
+}
+
+export default MultiCart

package/template/pages/MultiCheckout/index.js

@@ -1,22 +1,98 @@
-import React from 'react'
-import { useHistory } from 'react-router-dom'
+import React, { useState } from 'react'
+import { useParams } from 'react-router-dom'
 import { MultiCheckout as MultiCheckoutController } from '../../../src/themes/five/src/components/MultiCheckout'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent } from 'ordering-components-external'
+import { useEvent, useLanguage, useOrder } from 'ordering-components-external'
+import { loadStripe } from '@stripe/stripe-js'
 
 export const MultiCheckout = (props) => {
   const [events] = useEvent()
-  const history = useHistory()
+  const { cartUuid } = useParams()
+  const [, { confirmMultiCarts }] = useOrder()
+  const [, t] = useLanguage()
+  const stripePayments = ['stripe', 'stripe_connect', 'stripe_direct', 'google_pay', 'apple_pay']
+  const [errors, setErrors] = useState([])
+
+  const actionsBeforePlace = async (paymethod, cart) => {
+    if (stripePayments.includes(paymethod.gateway)) {
+      try {
+        const stripe = await loadStripe(paymethod.paymethod?.credentials?.publishable || paymethod?.paymethod?.credentials?.publishable_key)
+        const result = await stripe.confirmCardPayment(cart.paymethod_data.result.client_secret)
+        if (result?.paymentIntent?.status === 'succeeded') {
+          try {
+            const confirmCartRes = await confirmMultiCarts(cartUuid)
+            if (confirmCartRes.error) {
+              setErrors([confirmCartRes.error.message])
+            }
+            if (confirmCartRes.result.order?.uuid) {
+              events.emit('go_to_page', { page: 'multi_orders', params: { orderId: confirmCartRes.result.order.uuid }, replace: true })
+            }
+          } catch (error) {
+            setErrors([error.message])
+          }
+        }
+        if (result?.error?.code === 'payment_intent_authentication_failure') {
+          setErrors([t('CART_STATUS_CANCEL_MESSAGE', 'The payment has not been successful, please try again')])
+        }
+        return true
+      } catch (error) {
+        setErrors([error.message])
+      }
+    } else if (paymethod.gateway === 'stripe_redirect') {
+      const stripe = await loadStripe(paymethod.paymethod?.credentials?.publishable)
+      const confirmOption = {
+        bancontact: {
+          name: 'confirmBancontactPayment',
+          type: 1
+        },
+        alipay: {
+          name: 'confirmAlipayPayment',
+          type: 2
+        },
+        giropay: {
+          name: 'confirmGiropayPayment',
+          type: 1
+        },
+        ideal: {
+          name: 'confirmIdealPayment',
+          type: 2
+        }
+      }
+      const params = {
+        1: {
+          payment_method: {
+            billing_details: cart.paymethod_data.data.owner
+          },
+          return_url: `${window.location.origin}/checkout/${cartUuid}`
+        },
+        2: {
+          return_url: `${window.location.origin}/checkout/${cartUuid}`
+        }
+      }
+      stripe[confirmOption[paymethod.data.type]?.name](
+        cart.paymethod_data.result.client_secret,
+        params[confirmOption[paymethod.data.type]?.type]
+      ).then((result) => {
+        if (result?.error) {
+          setErrors([...errors, result?.error?.message])
+        }
+      }).catch((e) => {
+        setErrors([...errors, e?.message || e?.toString()])
+      })
+    }
+  }
   const multiCheckoutProps = {
     ...props,
+    cartUuid,
+    errors,
+    clearErrors: () => setErrors([]),
     onRedirectPage: (data) => events.emit('go_to_page', data),
-    onPlaceOrderClick: (orderUuids) => {
-      history.push({
-        pathname: '/multi-orders',
-        orderUuids
-      })
-    }
+    onPlaceOrderClick: (order) => {
+      events.emit('go_to_page', { page: 'multi_orders', params: { orderId: order?.id } })
+    },
+    actionsBeforePlace
   }
+
   return (
     <>
       <HelmetTags page='multi_checkout' />

package/template/pages/MultiOrdersDetails/index.js

@@ -1,16 +1,21 @@
 import React from 'react'
-import { useLocation } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { MultiOrdersDetails as MultiOrdersDetailsController } from '../../../src/themes/five/src/components/MultiOrdersDetails'
 import { HelmetTags } from '../../components/HelmetTags'
 import { useEvent } from 'ordering-components-external'
 
 export const MultiOrdersDetails = (props) => {
   const [events] = useEvent()
-  const { orderUuids } = useLocation()
+  const { orderId } = useParams()
+  const history = useHistory()
+
   const multiOrdersDetailsProps = {
     ...props,
-    orderUuids: orderUuids || [],
-    onRedirectPage: () => events.emit('go_to_page', { page: 'search' })
+    orderId: orderId,
+    onRedirectPage: () => events.emit('go_to_page', { page: 'search' }),
+    handleOrderRedirect: () => {
+      history.push('/profile/orders')
+    }
   }
   return (
     <>

package/_bundles/0.ordering-ui.8e20ae6af39ad738a29e.js

@@ -1 +0,0 @@
-(window.webpackJsonpOrderingUI=window.webpackJsonpOrderingUI||[]).push([[0],{625:function(t,n,e){"use strict";function i(t,n){var e,i;return"boolean"==typeof(null==n?void 0:n.enabled)?n.enabled:null===(i=null===(e=null==t?void 0:t.__default)||void 0===e?void 0:e.enabled)||void 0===i||i}e.d(n,"a",(function(){return i}))},728:function(t,n,e){"use strict";e.r(n),e.d(n,"LegacyDestination",(function(){return w})),e.d(n,"ajsDestinations",(function(){return _}));var i=e(4),r=e(58),o=e(47),a=e(21),s=e(103),c=e(66),u=e(625),d=e(193),l=e(198),h=e(48),v=e(72),f=e(194),b=e(87),p=e(108);function g(t){return t.toLowerCase().replace(".","").replace(/\s+/g,"-")}function y(t,n){return void 0===n&&(n=!1),n?btoa(t).replace(/=/g,""):void 0}function j(t,n,e,r){return Object(i.b)(this,void 0,void 0,(function(){var o,a,s,c,u,d;return Object(i.d)(this,(function(l){switch(l.label){case 0:o=g(n),a=y(o,r),s=Object(b.b)(),c="".concat(s,"/integrations/").concat(null!=a?a:o,"/").concat(e,"/").concat(null!=a?a:o,".dynamic.js.gz"),l.label=1;case 1:return l.trys.push([1,3,,4]),[4,Object(p.a)(c)];case 2:return l.sent(),function(t,n,e){var r,o;try{var a=(null!==(o=null===(r=null===window||void 0===window?void 0:window.performance)||void 0===r?void 0:r.getEntriesByName(t,"resource"))&&void 0!==o?o:[])[0];a&&n.stats.gauge("legacy_destination_time",Math.round(a.duration),Object(i.f)([e],a.duration<100?["cached"]:[],!0))}catch(t){}}(c,t,n),[3,4];case 3:throw u=l.sent(),t.stats.gauge("legacy_destination_time",-1,["plugin:".concat(n),"failed"]),u;case 4:return d=window["".concat(o,"Deps")],[4,Promise.all(d.map((function(t){return Object(p.a)(s+t+".gz")})))];case 5:return l.sent(),window["".concat(o,"Loader")](),[2,window["".concat(o,"Integration")]]}}))}))}function O(t){return"object"===Object.prototype.toString.call(t).slice(8,-1).toLowerCase()}function m(t,n){return Object(i.b)(this,void 0,void 0,(function(){var e,r=this;return Object(i.d)(this,(function(s){switch(s.label){case 0:return e=[],Object(o.a)()?[2,n]:[4,Object(l.a)((function(){return n.length>0&&Object(o.b)()}),(function(){return Object(i.b)(r,void 0,void 0,(function(){var r,o;return Object(i.d)(this,(function(i){switch(i.label){case 0:return(r=n.pop())?[4,Object(c.a)(r,t)]:[2];case 1:return o=i.sent(),o instanceof a.a||e.push(r),[2]}}))}))}))];case 1:return s.sent(),e.map((function(t){return n.pushWithBackoff(t)})),[2,n]}}))}))}var w=function(){function t(t,n,e,r,o){void 0===e&&(e={}),this.options={},this.type="destination",this.middleware=[],this._ready=!1,this._initialized=!1,this.flushing=!1,this.name=t,this.version=n,this.settings=Object(i.a)({},e),this.disableAutoISOConversion=r.disableAutoISOConversion||!1,this.integrationSource=o,this.settings.type&&"browser"===this.settings.type&&delete this.settings.type,this.options=r,this.buffer=r.disableClientPersistence?new h.b(4,[]):new v.a(4,"dest-".concat(t)),this.scheduleFlush()}return t.prototype.isLoaded=function(){return this._ready},t.prototype.ready=function(){var t;return null!==(t=this.onReady)&&void 0!==t?t:Promise.resolve()},t.prototype.load=function(t,n){var e;return Object(i.b)(this,void 0,void 0,(function(){var r,o,a=this;return Object(i.d)(this,(function(i){switch(i.label){case 0:return this._ready||void 0!==this.onReady?[2]:null===(e=this.integrationSource)||void 0===e?[3,1]:(o=e,[3,3]);case 1:return[4,j(t,this.name,this.version,this.options.obfuscate)];case 2:o=i.sent(),i.label=3;case 3:r=o,this.integration=function(t,n,e){var i;"Integration"in t?(t({user:function(){return e.user()},addIntegration:function(){}}),i=t.Integration):i=t;var r=new i(n);return r.analytics=e,r}(r,this.settings,n),this.onReady=new Promise((function(t){a.integration.once("ready",(function(){a._ready=!0,t(!0)}))})),this.onInitialize=new Promise((function(t){a.integration.on("initialize",(function(){a._initialized=!0,t(!0)}))}));try{t.stats.increment("analytics_js.integration.invoke",1,["method:initialize","integration_name:".concat(this.name)]),this.integration.initialize()}catch(n){throw t.stats.increment("analytics_js.integration.invoke.error",1,["method:initialize","integration_name:".concat(this.name)]),n}return[2]}}))}))},t.prototype.unload=function(t,n){return function(t,n,e){return Object(i.b)(this,void 0,void 0,(function(){var r,o,a,s;return Object(i.d)(this,(function(i){return r=Object(b.b)(),o=g(t),a=y(t,e),s="".concat(r,"/integrations/").concat(null!=a?a:o,"/").concat(n,"/").concat(null!=a?a:o,".dynamic.js.gz"),[2,Object(p.b)(s)]}))}))}(this.name,this.version,this.options.obfuscate)},t.prototype.addMiddleware=function(){for(var t,n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];this.middleware=(t=this.middleware).concat.apply(t,n)},t.prototype.shouldBuffer=function(t){return"page"!==t.event.type&&(Object(o.a)()||!1===this._ready||!1===this._initialized)},t.prototype.send=function(t,n,e){var r,o;return Object(i.b)(this,void 0,void 0,(function(){var s,c,d,l,h,v;return Object(i.d)(this,(function(b){switch(b.label){case 0:if(this.shouldBuffer(t))return this.buffer.push(t),this.scheduleFlush(),[2,t];if(s=null===(o=null===(r=this.options)||void 0===r?void 0:r.plan)||void 0===o?void 0:o.track,c=t.event.event,s&&c&&"Segment.io"!==this.name){if(d=s[c],!Object(u.a)(s,d))return t.updateEvent("integrations",Object(i.a)(Object(i.a)({},t.event.integrations),{All:!1,"Segment.io":!0})),t.cancel(new a.b({retry:!1,reason:"Event ".concat(c," disabled for integration ").concat(this.name," in tracking plan"),type:"Dropped by plan"})),[2,t];if(t.updateEvent("integrations",Object(i.a)(Object(i.a)({},t.event.integrations),null==d?void 0:d.integrations)),(null==d?void 0:d.enabled)&&!1===(null==d?void 0:d.integrations[this.name]))return t.cancel(new a.b({retry:!1,reason:"Event ".concat(c," disabled for integration ").concat(this.name," in tracking plan"),type:"Dropped by plan"})),[2,t]}return[4,Object(f.applyDestinationMiddleware)(this.name,t.event,this.middleware)];case 1:if(null===(l=b.sent()))return[2,t];h=new n(l,{traverse:!this.disableAutoISOConversion}),t.stats.increment("analytics_js.integration.invoke",1,["method:".concat(e),"integration_name:".concat(this.name)]),b.label=2;case 2:return b.trys.push([2,5,,6]),this.integration?[4,this.integration.invoke.call(this.integration,e,h)]:[3,4];case 3:b.sent(),b.label=4;case 4:return[3,6];case 5:throw v=b.sent(),t.stats.increment("analytics_js.integration.invoke.error",1,["method:".concat(e),"integration_name:".concat(this.name)]),v;case 6:return[2,t]}}))}))},t.prototype.track=function(t){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.d)(this,(function(n){return[2,this.send(t,r.Track,"track")]}))}))},t.prototype.page=function(t){var n;return Object(i.b)(this,void 0,void 0,(function(){var e=this;return Object(i.d)(this,(function(i){return(null===(n=this.integration)||void 0===n?void 0:n._assumesPageview)&&!this._initialized&&this.integration.initialize(),[2,this.onInitialize.then((function(){return e.send(t,r.Page,"page")}))]}))}))},t.prototype.identify=function(t){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.d)(this,(function(n){return[2,this.send(t,r.Identify,"identify")]}))}))},t.prototype.alias=function(t){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.d)(this,(function(n){return[2,this.send(t,r.Alias,"alias")]}))}))},t.prototype.group=function(t){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.d)(this,(function(n){return[2,this.send(t,r.Group,"group")]}))}))},t.prototype.scheduleFlush=function(){var t=this;this.flushing||setTimeout((function(){return Object(i.b)(t,void 0,void 0,(function(){var t;return Object(i.d)(this,(function(n){switch(n.label){case 0:return this.flushing=!0,t=this,[4,m(this,this.buffer)];case 1:return t.buffer=n.sent(),this.flushing=!1,this.buffer.todo>0&&this.scheduleFlush(),[2]}}))}))}),5e3*Math.random())},t}();function _(t,n,e,r,o){var a,c;if(void 0===n&&(n={}),void 0===e&&(e={}),Object(s.b)())return[];t.plan&&((e=null!=e?e:{}).plan=t.plan);var u=null!==(c=null===(a=t.middlewareSettings)||void 0===a?void 0:a.routingRules)&&void 0!==c?c:[],l=t.integrations,h=e.integrations,v=Object(d.a)(t,null!=e?e:{}),f=null==o?void 0:o.reduce((function(t,n){var e;return Object(i.a)(Object(i.a)({},t),((e={})[function(t){return("Integration"in t?t.Integration:t).prototype.name}(n)]=n,e))}),{}),b=new Set(Object(i.f)(Object(i.f)([],Object.keys(l).filter((function(t){return function(t,n){var e,i=n.type,r=n.bundlingStatus,o=n.versionSettings,a="unbundled"!==r&&("browser"===i||(null===(e=null==o?void 0:o.componentTypes)||void 0===e?void 0:e.includes("browser")));return!t.startsWith("Segment")&&"Iterable"!==t&&a}(t,l[t])})),!0),Object.keys(f||{}).filter((function(t){return O(l[t])||O(null==h?void 0:h[t])})),!0));return Array.from(b).filter((function(t){return!function(t,n){var e=!1===n.All&&void 0===n[t];return!1===n[t]||e}(t,n)})).map((function(t){var n=function(t){var n,e,i,r;return null!==(r=null!==(e=null===(n=null==t?void 0:t.versionSettings)||void 0===n?void 0:n.override)&&void 0!==e?e:null===(i=null==t?void 0:t.versionSettings)||void 0===i?void 0:i.version)&&void 0!==r?r:"latest"}(l[t]),i=new w(t,n,v[t],e,null==f?void 0:f[t]);return u.filter((function(n){return n.destinationName===t})).length>0&&r&&i.addMiddleware(r),i}))}}}]);