ordering-ui-external 1.3.2 → 1.4.0

package/template/components/HelmetTags/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import helmetData from '../../helmetdata.json'
+import settings from '../../config'
 
 export const HelmetTags = (props) => {
   const {
@@ -9,10 +10,10 @@ export const HelmetTags = (props) => {
 
   const metaTag = page ? helmetData[page] : helmetData.app
   return (
-    <Helmet titleTemplate={!page ? '' : 'Ordering - %s'}>
-      <title>{props.helmetTitle || metaTag.title}</title>
-      <meta name='description' content={props.description || metaTag.description} />
-      <meta name='keywords' content={props.keywords || metaTag.keywords} />
+    <Helmet titleTemplate={!page ? '' : `${settings.app_name} - %s`}>
+      <title>{props.helmetMetaTags?.title || metaTag.title}</title>
+      <meta name='description' content={props.helmetMetaTags?.description || metaTag.description} />
+      <meta name='keywords' content={props.helmetMetaTags?.keywords || metaTag.keywords} />
       {props.robots ? (
         <meta name='robots' content={props.robots} />
       ) : (

package/template/components/ListenPageChanges/index.js

@@ -1,34 +1,47 @@
 import React, { useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
-import { useEvent, useLanguage } from 'ordering-components-external'
+import { useEvent, useLanguage, useSite } from 'ordering-components-external'
 import { useTheme } from '../../../src/contexts/ThemeContext'
+import { checkSiteUrl } from '../../Utils'
 
 export const ListenPageChanges = ({ children }) => {
   const history = useHistory()
   const [events] = useEvent()
   const [languageState] = useLanguage()
   const [theme, { merge }] = useTheme()
+  const [{ site }] = useSite()
+
+  const businessUrlChecked = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
+  const businessUrl = businessUrlChecked.includes('?') ? businessUrlChecked.split('?')[0] : businessUrlChecked
+
+  const productUrlTemplate = checkSiteUrl(site?.product_url_template, '/store/:business_slug?category=:category_id&product=:product_id')
+  const productUrl = productUrlTemplate.includes('?') ? productUrlTemplate.split('?')[0] : productUrlTemplate
 
   const routes = {
     home: '/',
     search: '/search',
-    delivery: '/delivery',
-    pickup: '/pickup',
-    eatin: '/eatin',
-    curbside: '/curbside',
-    drivethru: '/drivethru',
-    signup: '/signup',
-    signin: '/signin',
     profile: '/profile',
+    messages: '/messages',
+    verify: '/verify',
+    wallets: '/wallets',
+    help: '/help',
+    signup_business: '/signup_business',
+    signup_driver: '/signup-driver',
     orders: '/profile/orders',
     order_detail: '/orders/:orderId',
     checkout: '/checkout/:cartUuid',
     checkout_list: '/checkout',
-    business: '/store/:store',
+    multi_checkout: '/multi-checkout',
+    multi_orders: '/multi-orders',
+    business: businessUrl,
     business_slug: '/:store',
-    forgot_password: '/password/forgot',
+    product: productUrl,
+    business_search: '/business_search',
     reset_password: '/password/reset',
-    help: '/help'
+    sessions: '/sessions',
+    promotions: '/promotions',
+    addresses: '/profile/addresses',
+    favorite: '/favorite'
   }
 
   const handleGoToPage = ({ page, params = {}, search, replace = false }) => {
@@ -83,7 +96,7 @@ export const ListenPageChanges = ({ children }) => {
       events.off('go_to_page', handleGoToPage)
       events.off('get_current_view', handleGetCurrentView)
     }
-  }, [events])
+  }, [])
 
   useEffect(() => {
     if (theme.rtl !== languageState?.language?.rtl) {

package/template/components/ScrollToTop/index.js

@@ -1,7 +1,11 @@
 import React, { useEffect } from 'react'
 import { withRouter } from 'react-router-dom'
+import { useSite } from 'ordering-components-external'
+import { checkSiteUrl } from '../../Utils'
 
 export const ScrollToTop = withRouter(({ history, children }) => {
+  const [{ site }] = useSite()
+  const productUrlTemplate = checkSiteUrl(site?.product_url_template, '/store/:business_slug?category=:category_id&product=:product_id')
   useEffect(() => {
     const unlisten = history.listen((data) => {
       if (!window.location.pathname.includes('/store/')) {

package/template/config.js

@@ -0,0 +1,14 @@
+import settings from './config.json'
+
+const keysToNull = [
+  'franchiseSlug',
+  'businessSlug'
+]
+
+keysToNull.forEach(key => {
+  if (settings[key] === '0' || settings[key] === 'null') {
+    settings[key] = null
+  };
+})
+
+export default settings

package/template/config.json

@@ -1,5 +1,6 @@
 {
   "app_id": "ordering-react",
+  "app_name": "Ordering",
   "project": "luisv4",
   "api": {
     "url": "https://apiv4.ordering.co",

package/template/helmetdata.json

@@ -13,34 +13,6 @@
     "robots": "index, follow",
     "canonicalUrl": ""
   },
-  "login": {
-    "title": "Login",
-    "description": "a dummy description about this page",
-    "keywords": "test, dummy, data",
-    "robots": "index, follow",
-    "canonicalUrl": ""
-  },
-  "signup": {
-    "title": "Signup",
-    "description": "a dummy description about this page",
-    "keywords": "test, dummy, data",
-    "robots": "index, follow",
-    "canonicalUrl": ""
-  },
-  "forgotpassword": {
-    "title": "Forgot Password",
-    "description": "a dummy description about this page",
-    "keywords": "test, dummy, data",
-    "robots": "index, follow",
-    "canonicalUrl": ""
-  },
-  "resetpassword": {
-    "title": "Reset Password",
-    "description": "a dummy description about this page",
-    "keywords": "test, dummy, data",
-    "robots": "index, follow",
-    "canonicalUrl": ""
-  },
   "profile": {
     "title": "Profile",
     "description": "a dummy description about this page",
@@ -117,5 +89,96 @@
     "keywords": "test, dummy, data",
     "robots": "index, follow",
     "canonicalUrl": ""
+  },
+  "signup_business": {
+    "title": "SignUp for business",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "messages": {
+    "title": "Messages",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "wallets": {
+    "title": "Wallets",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "user-verification": {
+    "title": "User Verification",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "business_search": {
+    "title": "Business Search",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "resetpassword": {
+    "title": "Reset Password",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "sessions": {
+    "title": "Sessions",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "signup_driver": {
+    "title": "SignUp for driver",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "promotions": {
+    "title": "Promotions",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "addresses": {
+    "title": "Addresses",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "favorite": {
+    "title": "Favorite",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "multi_checkout": {
+    "title": "Multi checkout",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "multi_orders": {
+    "title": "Multi Orders",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
   }
 }

package/template/pages/AddressList/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { AddressList as AddressListController } from '../../../src/themes/five/src/components/AddressList'
+import { ProfileOptions } from '../../../src/themes/five/src/components/UserProfileForm/ProfileOptions'
+import { useLanguage, useSession, useOrderingTheme } from 'ordering-components-external'
+import { HelmetTags } from '../../components/HelmetTags'
+import { SavedPlaces } from './styles'
+
+export const AddressList = (props) => {
+  const [{ user }] = useSession()
+  const [, t] = useLanguage()
+  const [orderingTheme] = useOrderingTheme()
+  const addressListParams = {
+    ...props,
+    addressList: user?.addresses,
+    isProfile: true,
+    isModal: true
+  }
+  const showProfileOptions = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+
+  return (
+    <>
+      <HelmetTags page='addresses' />
+      {showProfileOptions && (
+        <ProfileOptions value='addresses' />
+      )}
+      <SavedPlaces>
+        <h1>
+          {t('SAVED_PLACES', 'Saved places')}
+        </h1>
+        <AddressListController {...addressListParams} />
+      </SavedPlaces>
+    </>
+  )
+}

package/template/pages/AddressList/styles.js

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components'
+
+export const SavedPlaces = styled.div`
+  width: 90%;
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 40px;
+  margin-bottom: 20px;
+
+
+  h1{
+    font-size: 24px;
+    text-align: left;
+    ${props => props.theme?.rtl && css`
+    text-align: right;
+    `}
+  }
+
+  > div{
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+
+  button{
+    width: 100%;
+    align-self: center;
+  }
+
+  @media (min-width: 768px){
+    width: 90%;
+    margin-top: 40px;
+    h1 {
+      text-align: center;
+    }
+    ul{
+      width: 100%;
+    }
+    button {
+      width: 65%;
+    }
+  }
+`

package/template/pages/BusinessListingSearch/index.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+import { BusinessListingSearch as BusinessListingSearchController } from '../../../src/themes/five/src/components/BusinessListingSearch'
+import { useEvent, useSite } from 'ordering-components-external'
+import { HelmetTags } from '../../components/HelmetTags'
+import { checkSiteUrl } from '../../Utils'
+
+export const BusinessListingSearch = (props) => {
+  const [events] = useEvent()
+  const { search } = useLocation()
+  const searchParams = new URLSearchParams(search)
+  const defaultTerm = searchParams.get('term') || ''
+
+  const [{ site }] = useSite()
+  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')
+
+  const businessListingProps = {
+    ...props,
+    defaultTerm: defaultTerm,
+    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}` })
+      }
+    },
+    onRedirectPage: (data) => {
+      if (data.page === 'business') {
+        const businessSlug = data.params?.store
+        if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+          events.emit('go_to_page', { page: 'business', params: { business_slug: businessSlug } })
+        } else {
+          events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${businessSlug}` })
+        }
+      } else {
+        events.emit('go_to_page', data)
+      }
+    },
+    onProductRedirect: ({ slug, category, product }) => {
+      if (!category && !product) {
+        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}` })
+        }
+      }
+      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
+        })
+      }
+      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
+        })
+      }
+    },
+  }
+
+  return (
+    <>
+      <HelmetTags page='business_search' />
+      <BusinessListingSearchController {...businessListingProps} />
+    </>
+  )
+}