ordering-ui-external 1.3.2 → 1.4.0

package/template/pages/BusinessProductsList/index.js

@@ -1,34 +1,88 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
-import { useApi, useEvent } from 'ordering-components-external'
-import { BusinessProductsListing } from '../../../src/components/BusinessProductsListing'
+import { useApi, useEvent, useSite } from 'ordering-components-external'
+import { BusinessProductsListing } from '../../../src/themes/five/src/components/BusinessProductsListing'
 import { HelmetTags } from '../../components/HelmetTags'
 import { capitalize } from '../../../src/utils'
+import settings from '../../config'
+import { checkSiteUrl } from '../../Utils'
 
 export const BusinessProductsList = (props) => {
-  const { store } = useParams()
-  const [ordering] = useApi()
+  const [{ site }] = useSite()
   const { search } = useLocation()
+  const [helmetMetaTags, setHelmetMetaTags] = useState({
+    title: '',
+    description: '',
+    keywords: ''
+  })
+
+  let businessSlug = ''
+  const businessUrlTemplate = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
+  const productUrlTemplate = checkSiteUrl(site?.product_url_template, '/store/:business_slug?category=:category_id&product=:product_id')
+  
+  if (businessUrlTemplate.includes('?')) {
+    const businessParameter = businessUrlTemplate.replace('/store?', '').replace('=:business_slug', '')
+    const params = new URLSearchParams(search)
+    businessSlug = params.get(businessParameter)
+  } else {
+    const { business_slug } = useParams()
+    businessSlug = business_slug
+  }
+  const [ordering] = useApi()
 
-  let category
-  let product
+  let categoryId
+  let productId
+  let tableNumber
 
-  if (search) {
-    const data = search.substring(1).split('&')
-    category = data[0]
-    product = data[1]
+  if (productUrlTemplate === '/store/:business_slug/:category_slug/:product_slug' ||
+    productUrlTemplate === '/:business_slug/:category_slug/:product_slug' ||
+    productUrlTemplate.includes('/store/:category_slug/:product_slug')
+  ) {
+    const { category_slug, product_slug } = useParams()
+    categoryId = category_slug
+    productId = product_slug
+  }
+
+  if ((productUrlTemplate.includes('/store/:business_slug') && productUrlTemplate.includes('category_id') ||
+    (productUrlTemplate.includes('/:business_slug') && !productUrlTemplate.includes('store')))
+  ) {
+    if (search) {
+      const ids = productUrlTemplate.split('?')[1].split('&')
+      const categoryParameter = ids[0].replace('=:category_id', '')
+      const productParameter = ids[1].replace('=:product_id', '')
+      const params = new URLSearchParams(search)
+      categoryId = params.get(categoryParameter)
+      productId = params.get(productParameter)
+      tableNumber = params.get('table_number')
+    }
+  }
+
+  if (tableNumber) {
+    const tableNumberFromStorage = window.localStorage.getItem('table_number')
+    if (tableNumberFromStorage) {
+      window.localStorage.removeItem('table_number')
+    }
+
+    window.localStorage.setItem(
+      'table_number',
+      JSON.stringify({
+        tableNumber: tableNumber.split('=')[1],
+        slug: businessSlug
+      })
+    )
   }
 
-  const categoryId = category && category.split('=')[1]
-  const productId = product && product.split('=')[1]
   const [events] = useEvent()
 
   const businessProductsProps = {
     ...props,
     ordering,
+    avoidBusinessLoading: true,
+    isCustomLayout: settings?.use_marketplace,
+    useKioskApp: settings?.use_kiosk,
     isSearchByName: true,
     isSearchByDescription: true,
-    slug: store,
+    slug: businessSlug,
     categoryId,
     productId,
     businessProps: [
@@ -39,8 +93,8 @@ export const BusinessProductsList = (props) => {
       'name',
       'open',
       'about',
-      'description',
       'ribbon',
+      'description',
       'address',
       'location',
       'timezone',
@@ -62,39 +116,108 @@ export const BusinessProductsList = (props) => {
       'products',
       'zones',
       'front_layout',
-      'professionals'
+      'professionals',
+      'facebook_profile',
+      'instagram_profile',
+      'tiktok_profile',
+      'pinterest_profile',
+      'whatsapp_number',
+      'snapchat_profile',
+      'previously_products'
     ],
     handleSearchRedirect: () => {
       events.emit('go_to_page', { page: 'search' })
     },
     onProductRedirect: ({ slug, category, product }) => {
       if (!category && !product) {
-        return window.location.pathname.includes('/store/')
-          ? events.emit('go_to_page', { page: 'business', params: { store: slug }, replace: true })
-          : events.emit('go_to_page', { page: 'business_slug', params: { store: slug }, replace: true })
+        if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+          return events.emit('go_to_page', { page: 'business', params: { business_slug: slug } })
+        } else {
+          return events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}` })
+        }
       }
-      return window.location.pathname.includes('/store/')
-        ? events.emit('go_to_page', {
-          page: 'business',
-          params: { store: slug },
-          search: `?category=${category}&product=${product}`,
+      if (productUrlTemplate === '/store/:business_slug/:category_slug/:product_slug' || productUrlTemplate === '/:business_slug/:category_slug/:product_slug') {
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            business_slug: slug,
+            category_slug: category,
+            product_slug: product
+          },
           replace: true
         })
-        : events.emit('go_to_page', {
-          page: 'business_slug',
-          params: { store: slug },
-          search: `?category=${category}&product=${product}`,
+      }
+      if (productUrlTemplate.includes('/store/:category_slug/:product_slug')) {
+        const businessParameter = businessUrlTemplate.replace('/store?', '').replace('=:business_slug', '')
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            category_slug: category,
+            product_slug: product
+          },
+          search: `?${businessParameter}=${slug}`,
+          replace: true
+        })
+      }
+      if (productUrlTemplate.includes('/store/:business_slug') && productUrlTemplate.includes('category_id')) {
+        const ids = productUrlTemplate.split('?')[1].split('&')
+        const categoryParameter = ids[0].replace('=:category_id', '')
+        const productParameter = ids[1].replace('=:product_id', '')
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            business_slug: slug,
+          },
+          search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
+          replace: true
+        })
+      }
+      if (productUrlTemplate.includes('/:business_slug') && !productUrlTemplate.includes('store')) {
+        const ids = productUrlTemplate.split('?')[1].split('&')
+        const categoryParameter = ids[0].replace('=:category_id', '')
+        const productParameter = ids[1].replace('=:product_id', '')
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            business_slug: slug,
+          },
+          search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
           replace: true
         })
+      }
     },
     onCheckoutRedirect: (cartUuid) => {
       events.emit('go_to_page', { page: 'checkout', params: { cartUuid } })
+    },
+    onChangeMetaTag: (title, description, keywords) => {
+      setHelmetMetaTags({
+        title: title,
+        description: description,
+        keywords: keywords
+      })
+    },
+    onBusinessClick: (business) => {
+      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+        events.emit('go_to_page', { page: 'business', params: { business_slug: business.slug } })
+      } else {
+        events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${business.slug}` })
+      }
     }
   }
 
+  useEffect(() => {
+    if (businessSlug) {
+      const metaTitle = capitalize(businessSlug)
+      setHelmetMetaTags({
+        ...helmetMetaTags,
+        title: metaTitle,
+      })
+    }
+  }, [businessSlug])
+
   return (
     <>
-      <HelmetTags page='business' helmetTitle={capitalize(store)} />
+      <HelmetTags page='business' helmetMetaTags={helmetMetaTags} />
       <BusinessProductsListing {...businessProductsProps} />
     </>
   )

package/template/pages/BusinessesList/index.js

@@ -1,20 +1,31 @@
 import React from 'react'
-import { BusinessesListing } from '../../../src/components/BusinessesListing'
-import { useEvent } from 'ordering-components-external'
+import { BusinessesListing } from '../../../src/themes/five/src/components/BusinessesListing'
+import { useEvent, useSite } from 'ordering-components-external'
 import { HelmetTags } from '../../components/HelmetTags'
+import settings from '../../config'
+import { checkSiteUrl } from '../../Utils'
 
 export const BusinessesList = (props) => {
   const [events] = useEvent()
-  const currentPageParam = window.location.search.split('page=')[1]
+  const [{ site }] = useSite()
+
+  const businessUrlTemplate = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
+
   const businessListingProps = {
     ...props,
     isSearchByName: true,
     isSearchByDescription: true,
+    franchiseId: settings?.franchiseSlug,
     onBusinessClick: (business) => {
-      events.emit('go_to_page', { page: 'business', params: { store: business.slug } })
+      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+        events.emit('go_to_page', { page: 'business', params: { business_slug: business.slug } })
+      } else {
+        events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${business.slug}` })
+      }
     },
-    currentPageParam: parseInt(currentPageParam),
-    propsToFetch: ['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']
+    currentPageParam: 0,
+    propsToFetch: ['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug', 'city', 'city_id'],
+    onRedirectPage: (data) => events.emit('go_to_page', data),
   }
 
   return (

package/template/pages/Checkout/index.js

@@ -2,8 +2,11 @@ import React, { useState } from 'react'
 import { loadStripe } from '@stripe/stripe-js/pure'
 import { useParams, useLocation } from 'react-router-dom'
 import { HelmetTags } from '../../components/HelmetTags'
-import { Checkout } from '../../../src/components/Checkout'
-import { useEvent, useOrder, useLanguage } from 'ordering-components-external'
+
+import { Checkout } from '../../../src/themes/five/src/components/Checkout'
+import { useEvent, useOrder, useLanguage, useSite } from 'ordering-components-external'
+import settings from '../../config'
+import { checkSiteUrl } from '../../Utils'
 
 export const CheckoutPage = (props) => {
   const { cartUuid } = useParams()
@@ -11,7 +14,9 @@ export const CheckoutPage = (props) => {
   const [errors, setErrors] = useState([])
   const [orderState, { confirmCart, changeMoment }] = useOrder()
   const [, t] = useLanguage()
+  const [{ site }] = useSite()
   const stripePayments = ['stripe', 'stripe_connect', 'stripe_direct', 'google_pay', 'apple_pay']
+  const businessUrlTemplate = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
 
   const useQuery = () => {
     return new URLSearchParams(useLocation().search)
@@ -95,6 +100,7 @@ export const CheckoutPage = (props) => {
     clearErrors: () => setErrors([]),
     useValidationFields: true,
     validationFieldsType: 'checkout',
+    useKioskApp: settings?.use_kiosk,
     onPlaceOrderClick: (data, paymethod, cart) => {
       if (cart?.order?.uuid) {
         if (orderState?.options?.moment) {
@@ -115,8 +121,12 @@ export const CheckoutPage = (props) => {
     handleCheckoutListRedirect: () => {
       events.emit('go_to_page', { page: 'checkout_list' })
     },
-    handleStoreRedirect: (store) => {
-      events.emit('go_to_page', { page: 'business', params: { store } })
+    handleStoreRedirect: (slug) => {
+      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+        events.emit('go_to_page', { page: 'business', params: { business_slug: slug } })
+      } else {
+        events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}` })
+      }
     }
   }
   return (

package/template/pages/Favorite/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Favorite as FavoriteController } from '../../../src/themes/five/src/components/Favorite'
+import { HelmetTags } from '../../components/HelmetTags'
+
+export const Favorite = (props) => {
+  return (
+    <>
+      <HelmetTags page='favorite' />
+      <FavoriteController {...props} />
+    </>
+  )
+}

package/template/pages/Help/index.js

@@ -1,12 +1,17 @@
 import React from 'react'
-import { Help as HelpController } from '../../../src/components/Help'
+import { Help as HelpController } from '../../../src/themes/five/src/components/Help'
 import { HelmetTags } from '../../components/HelmetTags'
+import settings from '../../config'
 
 export const Help = (props) => {
+  const helpProps = {
+    ...props,
+    franchiseId: settings?.franchiseSlug
+  }
   return (
     <>
       <HelmetTags page='help' />
-      <HelpController {...props} />
+      <HelpController {...helpProps} />
     </>
   )
 }

package/template/pages/Home/index.js

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, useApi } from 'ordering-components-external'
-import { HomeHero } from '../../../src/components/HomeHero'
+import { useApi, useEvent, useSite } from 'ordering-components-external'
+import { HomeHero } from '../../../src/themes/five/src/components/HomeHero'
+import { KioskHomeHero } from '../../../src/themes/five/src/components/HomeHero/layouts/KioskHomeHero'
 import { useHistory } from 'react-router-dom'
 import { HelmetTags } from '../../components/HelmetTags'
 import Skeleton from 'react-loading-skeleton'
+import settings from '../../config'
 
 import {
   HomeContainer,
@@ -13,23 +15,37 @@ import {
   SkeletonInformation,
   SkeletonSide
 } from './styles'
+import { checkSiteUrl } from '../../Utils'
 
 export const HomePage = (props) => {
   const history = useHistory()
   const [homeState, setHomeState] = useState({ body: null, loading: false, error: null })
   const [ordering] = useApi()
+  const [events] = useEvent()
+  const [{ site }] = useSite()
+
   const requestsState = {}
+  const isKioskApp = settings?.use_kiosk
+  const businessUrlTemplate = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
 
   const handlerFindBusiness = () => {
     history.push('/search')
   }
 
+  const handleGoToBusiness = () => {
+    if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+      events.emit('go_to_page', { page: 'business', params: { business_slug: settings?.businessSlug } })
+    } else {
+      events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${settings?.businessSlug}` })
+    }
+  }
+
   const getPage = async () => {
     setHomeState({ ...homeState, loading: true })
     try {
       const source = {}
       requestsState.page = source
-      const { content: { error, result } } = await ordering.pages('orderingHome').get({ cancelToken: source })
+      const { content: { error, result } } = await ordering.pages('originalHomeContent').get({ cancelToken: source })
       setHomeState({ ...homeState, loading: false })
       if (!error) {
         setHomeState({ ...homeState, body: result.body })
@@ -44,7 +60,9 @@ export const HomePage = (props) => {
   }
 
   useEffect(() => {
-    getPage()
+    if (!isKioskApp) {
+      getPage()
+    }
     return () => {
       if (requestsState.page) {
         requestsState.page.cancel()
@@ -60,39 +78,43 @@ export const HomePage = (props) => {
   return (
     <>
       <HelmetTags page='home' />
-      <HomeContainer>
-        <HomeHero
-          {...homeHeroProps}
-        />
-        {
-          homeState.loading && (
-            <SkeletonContainer>
-              <SkeletonHeader>
-                <Skeleton width='100%' height='100%' />
-              </SkeletonHeader>
-              <SkeletonContent>
-                <SkeletonInformation>
-                  <Skeleton width='100%' height='100px' />
-                  <Skeleton width='100%' height='100px' />
-                  <Skeleton width='100%' height='100px' />
-                  <Skeleton width='100%' height='100px' />
-                </SkeletonInformation>
-                <SkeletonSide>
+      {isKioskApp ? (
+        <KioskHomeHero handleGoToBusiness={handleGoToBusiness} />
+      ) : (
+        <HomeContainer>
+          <HomeHero
+            {...homeHeroProps}
+          />
+          {
+            homeState.loading && (
+              <SkeletonContainer>
+                <SkeletonHeader>
                   <Skeleton width='100%' height='100%' />
-                </SkeletonSide>
-              </SkeletonContent>
-            </SkeletonContainer>
-          )
-        }
-        {
-          homeState.body && (
-            <div dangerouslySetInnerHTML={{
-              __html: homeState.body
-            }}
-            />
-          )
-        }
-      </HomeContainer>
+                </SkeletonHeader>
+                <SkeletonContent>
+                  <SkeletonInformation>
+                    <Skeleton width='100%' height='100px' />
+                    <Skeleton width='100%' height='100px' />
+                    <Skeleton width='100%' height='100px' />
+                    <Skeleton width='100%' height='100px' />
+                  </SkeletonInformation>
+                  <SkeletonSide>
+                    <Skeleton width='100%' height='100%' />
+                  </SkeletonSide>
+                </SkeletonContent>
+              </SkeletonContainer>
+            )
+          }
+          {
+            homeState.body && (
+              <div dangerouslySetInnerHTML={{
+                __html: homeState.body
+              }}
+              />
+            )
+          }
+        </HomeContainer>
+      )}
     </>
   )
 }

package/template/pages/Home/styles.js

@@ -10,17 +10,21 @@ export const HomeSection = styled.div`
   width: 100%;
   box-sizing: border-box;
   background: #FFF;
+
   flex-direction: column;
   padding: 0px 10px 20px;
   &.reverse {
     flex-direction: column-reverse;
   }
+
   ${({ column }) => column && css`
     flex-direction: column;
   `}
+
   ${({ bgColor }) => bgColor && css`
     background: ${bgColor};
   `}
+
   ${({ bgimage }) => bgimage && css`
     background-image: linear-gradient(
       rgba(0, 0, 0, 0.5),
@@ -35,6 +39,7 @@ export const HomeSection = styled.div`
     justify-content: center;
     align-items: center;
   `}
+
   @media (min-width: 943px) {
     padding: 0px 50px 20px;
     flex-direction: ${({ column }) => column ? 'column' : 'row'};
@@ -136,6 +141,7 @@ export const TextContent = styled.div`
   justify-content: center;
   width: 100%;
   text-align: center;
+
   div {
     text-align: left;
     margin-top: 25px;
@@ -143,9 +149,11 @@ export const TextContent = styled.div`
       color: ${props => props.theme.colors.primary};
     }
   }
+
   h2 {
     font-size: 24px;
   }
+
   &.center {
     display: flex;
     flex-direction: column;
@@ -153,11 +161,13 @@ export const TextContent = styled.div`
     align-items: center;
     height: 100%;
     width: 100%;
+
     h2 {
       font-size: 24px;
       color: #FFF;
       text-align: center;
     }
+
     div {
       display: flex;
       flex-direction: column;
@@ -165,14 +175,17 @@ export const TextContent = styled.div`
       align-items: center;
       height: 100%;
     }
+
     button {
       width: 122px;
     }
   }
+
   @media (min-width: 943px) {
     width: 50%;
     text-align: left;
   }
+
   @media (min-width: 481px) {
     div {
       ${props => props.theme?.rtl && css`
@@ -195,6 +208,7 @@ export const Icons = styled.div`
 `
 export const HomeFooter = styled.div`
   font: normal normal normal 128px/160px ${props => props.theme.fonts.special || 'Georgia'};
+
   @media (min-width: 768px) {
     h2 {
       font-size: 50px !important;

package/template/pages/MessagesList/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { MessagesListing } from '../../../src/themes/five/src/components/MessagesListing'
+
+import { HelmetTags } from '../../components/HelmetTags'
+import { useEvent } from 'ordering-components-external'
+
+export const MessagesList = (props) => {
+  const [events] = useEvent()
+  const messageprops = {
+    ...props,
+    onRedirectPage: (data) => events.emit('go_to_page', data)
+  }
+  return (
+    <>
+      <HelmetTags page='messages' />
+      <MessagesListing {...messageprops} />
+    </>
+  )
+}

package/template/pages/MultiCheckout/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useHistory } 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'
+
+export const MultiCheckout = (props) => {
+  const [events] = useEvent()
+  const history = useHistory()
+  const multiCheckoutProps = {
+    ...props,
+    onRedirectPage: (data) => events.emit('go_to_page', data),
+    onPlaceOrderClick: (orderUuids) => {
+      history.push({
+        pathname: '/multi-orders',
+        orderUuids
+      })
+    }
+  }
+  return (
+    <>
+      <HelmetTags page='multi_checkout' />
+      <MultiCheckoutController {...multiCheckoutProps} />
+    </>
+  )
+}

package/template/pages/MultiOrdersDetails/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useLocation } 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 multiOrdersDetailsProps = {
+    ...props,
+    orderUuids: orderUuids || [],
+    onRedirectPage: () => events.emit('go_to_page', { page: 'search' })
+  }
+  return (
+    <>
+      <HelmetTags page='multi_orders' />
+      <MultiOrdersDetailsController {...multiOrdersDetailsProps} />
+    </>
+  )
+}