ordering-ui-admin-external 1.6.2 → 1.6.3

package/src/components/Stores/BusinessSummary/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useLanguage, useUtils, useEvent } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useEvent, useApi } from 'ordering-components-admin-external'
 import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
 import { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -22,7 +22,8 @@ import {
   BusinessConfigsContainer,
   BusinessConfigItem,
   ActionSelectorWrapper,
-  BusinessPreviewHeader
+  BusinessPreviewHeader,
+  ButtonWrapper
 } from './styles'
 
 export const BusinessSummary = (props) => {
@@ -40,6 +41,7 @@ export const BusinessSummary = (props) => {
   const [{ optimizeImage }] = useUtils()
   const [events] = useEvent()
   const theme = useTheme()
+  const [ordering] = useApi()
   const [isBusinessPreview, setIsBusinessPreview] = useState(false)
   const [selectedView, setSelectedView] = useState('desktop')
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
@@ -48,6 +50,10 @@ export const BusinessSummary = (props) => {
     events.emit('go_to_page', { page: 'store', params: { store: businessState?.business?.slug } })
   }
 
+  const handleOpenSite = () => {
+    window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
+  }
+
   const itemsExcluded = ['publishing']
 
   const businessConfigs = [
@@ -208,14 +214,25 @@ export const BusinessSummary = (props) => {
         )}
 
         <BusinessDetailsContent>
-          <Button
-            color='lightPrimary'
-            borderRadius='8px'
-            onClick={handleOpenCategory}
-            disabled={businessState?.loading}
-          >
-            {t('CATEGORIES_AND_PRODUCTS', 'Categories & products')}
-          </Button>
+          <ButtonWrapper>
+            <Button
+              color='lightPrimary'
+              borderRadius='8px'
+              onClick={handleOpenCategory}
+              disabled={businessState?.loading}
+            >
+              {t('CATEGORIES_AND_PRODUCTS', 'Categories & products')}
+            </Button>
+            <Button
+              color='primary'
+              outline
+              borderRadius='8px'
+              onClick={handleOpenSite}
+              disabled={businessState?.loading}
+            >
+              {t('STORE_WEBSITE', 'Store website')}
+            </Button>
+          </ButtonWrapper>
           <BusinessDescription>
             {businessState?.loading ? (
               <Skeleton width={300} />

package/src/components/Stores/BusinessSummary/styles.js

@@ -243,3 +243,10 @@ export const BusinessPreviewHeader = styled.div`
     }
   }
 `
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  > button:first-child {
+    margin-right: 15px;
+  }
+`

package/src/components/Stores/BusinessSync/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { BusinessSyncBasic } from '../BusinessSyncBasic'
+import { BusinessSyncItsaCheckmate } from '../BusinessSyncItsaCheckmate'
 import { BusinessSyncStore } from '../BusinessSyncStore'
 
 import {
@@ -17,7 +18,8 @@ export const BusinessSync = (props) => {
   const [selectedOption, setSelectedOption] = useState('deliverect')
 
   const syncOptions = [
-    { key: 'deliverect', name: t('DELIVERECT', 'Deliverect') }
+    { key: 'deliverect', name: t('DELIVERECT', 'Deliverect') },
+    { key: 'itsacheckmate', name: t('ITSACHECKMATE', 'ItsaCheckmate') }
   ]
 
   const handleChangeOption = (key) => {
@@ -28,7 +30,7 @@ export const BusinessSync = (props) => {
   return (
     <Container>
       <Header>
-        <h2>{t('SYNC_WITH_DELIVERECT', 'Sync with deliverect')}</h2>
+        <h2>{t('SYNC_WITH', 'Sync with')}</h2>
       </Header>
       <Tabs>
         {syncOptions.map(option => (
@@ -44,6 +46,9 @@ export const BusinessSync = (props) => {
       {selectedOption === 'deliverect' && (
         <BusinessSyncBasic />
       )}
+      {selectedOption === 'itsacheckmate' && (
+        <BusinessSyncItsaCheckmate />
+      )}
       {selectedOption === 'synced_store' && (
         <BusinessSyncStore
           handleParentSidebarMove={handleParentSidebarMove}

package/src/components/Stores/BusinessSyncItsaCheckmate/index.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { Check2Circle } from 'react-bootstrap-icons'
+import {
+  Container,
+  LogoWrapper,
+  Description,
+  GetStarted,
+  YoutubeVideoWrapper,
+  YoutubeVideoInner
+} from './styles'
+import { Button } from '../../../styles'
+
+export const BusinessSyncItsaCheckmate = () => {
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  return (
+    <Container>
+      <LogoWrapper>
+        <img src={theme.images.general.ItsaCheckmateLogo} alt='' />
+      </LogoWrapper>
+      <Description>
+        <div
+          className='sub-header'
+          dangerouslySetInnerHTML={{ __html: t('ITSACHECKMATE_SUB_HEADER', 'Take control of all your <strong>Ordering Platform Menus</strong> in one place!') }}
+        />
+        <div className='menu-item'>
+          <Check2Circle />
+          <p>{t('ITSACHECKMATE_MENU_1', '86 items & modifiers')}</p>
+        </div>
+        <div className='menu-item'>
+          <Check2Circle />
+          <p>{t('ITSACHECKMATE_MENU_2', 'Turn on or off ordering platforms')}</p>
+        </div>
+        <div className='menu-item'>
+          <Check2Circle />
+          <p>{t('ITSACHECKMATE_MENU_3', 'Manage delivery hours')}</p>
+        </div>
+        <div className='menu-item'>
+          <Check2Circle />
+          <p>{t('ITSACHECKMATE_MENU_4', 'Add, edit, or delete items ')}</p>
+        </div>
+      </Description>
+      <GetStarted>
+        <h2>{t('GET_STARTED_RIGHT_HERE', 'Get started right here')}</h2>
+        <p>{t('FILL_UP_THIS_FORM_TO_REQUEST_INFORMATION', 'Fill up this form to request more information')}</p>
+        <a href='https://share.hsforms.com/1vuXwaFtfTTeZf362zJgqSg3neff' target='_blank' rel='noopener noreferrer'>
+          <Button color='primary'>{t('SEND_FORM', 'Send Form')}</Button>
+        </a>
+      </GetStarted>
+      <YoutubeVideoWrapper>
+        <YoutubeVideoInner>
+          <iframe
+            title='youtube'
+            src='https://www.youtube.com/embed/_caZDl4ZFp0?feature=oembed'
+          />
+        </YoutubeVideoInner>
+      </YoutubeVideoWrapper>
+    </Container>
+  )
+}

package/src/components/Stores/BusinessSyncItsaCheckmate/styles.js

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div``
+
+export const LogoWrapper = styled.div`
+  width: 216px;
+  height: 216px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+
+  > img {
+    width: 100%;
+  }
+`
+
+export const Description = styled.div`
+  margin-top: 36px;
+  margin-bottom: 50px;
+  div.sub-header {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  div.menu-item {
+    display: flex;
+    align-items: center;
+    svg {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 8px;
+      ` : css`
+        margin-right: 8px;
+      `}
+    }
+    > p {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      margin: 0px;
+    }
+  }
+`
+
+export const GetStarted = styled.div`
+  h2 {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 10px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 8px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+  button {
+    border-radius: 8px;
+    height: 44px;
+  }
+`
+
+export const YoutubeVideoWrapper = styled.div`
+  margin-top: 50px;
+  padding-bottom: 30px;
+`
+
+export const YoutubeVideoInner = styled.div`
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  background-color: ${props => props.theme.colors.secundaryDarkContrast};
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+`

package/src/components/Support/index.js

@@ -59,7 +59,7 @@ export const Support = (props) => {
             <Button
               borderRadius='7.6px'
               color='primary'
-              onClick={() => handleGoToLink('https://www.ordering.co/ordering-support')}
+              onClick={() => handleGoToLink('https://support.ordering.co')}
               outline
             >
               {t('TECH_SUPPORT', 'Tech Support')}

package/src/hooks/useCountdownTimer.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook for countdown seconds
+ * @param {int} initialCount
+ * @param {boolean} start
+ */
+export function useCountdownTimer (initialCount, start) {
+  const [count, setCount] = useState(initialCount)
+
+  useEffect(() => {
+    if (start) {
+      const secondsLeft = setInterval(() => {
+        setCount(c => c - (c === 0 ? 0 : 1))
+      }, 1000)
+      return () => clearInterval(secondsLeft)
+    }
+  }, [start])
+
+  return [
+    count,
+    setCount,
+    /** reset */
+    () => { setCount(initialCount) }
+  ]
+}

package/src/index.js

@@ -341,7 +341,10 @@ import {
   OrderingWebsite,
   CustomerApp,
   StoreApp,
-  DriverApp
+  DriverApp,
+  PosApp,
+  CallCenterApp,
+  KioskApp
 } from './components/MyProducts'
 import { OpenCartListing, RecoveryActionListing } from './components/CartRecovery'
 import { FreeProductsList, PurchasedProductsList } from './components/Downloads'
@@ -741,6 +744,9 @@ export {
   CustomerApp,
   StoreApp,
   DriverApp,
+  PosApp,
+  CallCenterApp,
+  KioskApp,
 
   Layout,
   SidebarMenu,

package/src/utils/index.js

@@ -243,6 +243,16 @@ export const shape = {
   capsuleShape: 'capsule_shape'
 }
 
+/**
+ * Function to check URL
+ * @param {string} url URL of page
+ * @param {string} fallback default URL
+ */
+export const checkPreSiteUrl = (url, fallback) => {
+  if (!url) return fallback
+  return url[0] === '/' ? url : `/${url}`
+}
+
 /**
  * default value for bitton
  */
@@ -252,6 +262,25 @@ export const ribbonValues = {
   shape: 'rectangle',
   enabled: false
 }
+/**
+ * Format seconds to hh:mm:ss
+ * @param {number} seconds
+ */
+export const formatSeconds = (seconds) => {
+  // Hours, minutes and seconds
+  const hrs = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+
+  // Output like '1:01' or '4:03:59' or '123:03:59'
+  let ret = ''
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+  ret += '' + secs
+  return ret
+}
 
 /**
  * Function to check URL
@@ -387,3 +416,35 @@ export const orderRejectCommentList = (status) => {
 }
 
 export const widgetURL = 'https://orderingweb.ordering.co/'
+
+export const getCurrentDiffDays = (time) => {
+  const current = moment().utc()
+  const compared = moment(time)
+  return compared.diff(current, 'days')
+}
+
+export const firstLetterCapital = (text) => {
+  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()
+}
+
+export const stringToSlug = str => {
+  str = str.replace(/^\s+|\s+$/g, '') // trim
+  str = str?.toLowerCase()
+
+  // remove accents, swap ñ for n, etc
+  const from = 'åàáãäâèéëêìíïîòóöôùúüûñç·/_,:;'
+  const to = 'aaaaaaeeeeiiiioooouuuunc------'
+
+  for (let i = 0, l = from.length; i < l; i++) {
+    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i))
+  }
+
+  str = str
+    .replace(/[^a-z0-9 -]/g, '') // remove invalid chars
+    .replace(/\s+/g, '_') // collapse whitespace and replace by -
+    .replace(/-+/g, '_') // collapse dashes
+    .replace(/^-+/, '') // trim - from start of text
+    .replace(/-+$/, '') // trim - from end of text
+
+  return str
+}

package/template/app.js

@@ -54,6 +54,9 @@ import { OrderingWebsite } from './pages/OrderingWebsite'
 import { CustomerApp } from './pages/CustomerApp'
 import { StoreApp } from './pages/StoreApp'
 import { DriverApp } from './pages/DriverApp'
+import { PosApp } from './pages/PosApp'
+import { CallCenterApp } from './pages/CallCenterApp'
+import { KioskApp } from './pages/KioskApp'
 
 import { ScrollToTop } from './components/ScrollToTop'
 import { ListenPageChanges } from './components/ListenPageChanges'
@@ -63,12 +66,11 @@ import { RewardsPrograms } from './pages/RewardsPrograms'
 import { OpenCarts } from './pages/OpenCarts'
 import { RecoveryActionListing } from './pages/RecoveryActionListing'
 import { CampaignListing } from './pages/CampaignListing'
-import { FreeProductsList } from './pages/FreeProductsList'
-import { PurchasedProductsList } from './pages/PurchasedProductsList'
 import { Professionals } from './pages/Professionals'
 import { QueryLogin } from '../src/components/Login'
 import { PluginSettings } from './pages/PluginSettings'
 import { Profile } from './pages/Profile'
+import settings from './config.json'
 
 export const App = () => {
   const [{ auth, loading, user }] = useSession()
@@ -129,7 +131,7 @@ export const App = () => {
             )}
             <Layout>
               {auth && (
-                <SidebarMenu />
+                <SidebarMenu billingUrl={settings?.billing_url} />
               )}
               {onlineStatus && (
                 <ScrollToTop>
@@ -293,18 +295,24 @@ export const App = () => {
                     <ProtectedRoute path='/my-products/ordering-website' allowedLevels={[0]}>
                       <OrderingWebsite />
                     </ProtectedRoute>
-
                     <ProtectedRoute path='/my-products/customer-app' allowedLevels={[0]}>
                       <CustomerApp />
                     </ProtectedRoute>
-
                     <ProtectedRoute path='/my-products/store-app' allowedLevels={[0]}>
                       <StoreApp />
                     </ProtectedRoute>
-
                     <ProtectedRoute path='/my-products/driver-app' allowedLevels={[0]}>
                       <DriverApp />
                     </ProtectedRoute>
+                    <ProtectedRoute path='/my-products/pos-app' allowedLevels={[0]}>
+                      <PosApp />
+                    </ProtectedRoute>
+                    <ProtectedRoute path='/my-products/call-center-app' allowedLevels={[0]}>
+                      <CallCenterApp />
+                    </ProtectedRoute>
+                    <ProtectedRoute path='/my-products/kiosk-app' allowedLevels={[0]}>
+                      <KioskApp />
+                    </ProtectedRoute>
 
                     <ProtectedRoute path='/settings/basic' allowedLevels={[0]}>
                       <BasicSettings />
@@ -332,12 +340,6 @@ export const App = () => {
                       <Support />
                     </ProtectedRoute>
 
-                    <ProtectedRoute path='/downloads/free-products' allowedLevels={[0]}>
-                      <FreeProductsList />
-                    </ProtectedRoute>
-                    <ProtectedRoute path='/downloads/purchased-products' allowedLevels={[0]}>
-                      <PurchasedProductsList />
-                    </ProtectedRoute>
                     <ProtectedRoute path='/ordering-products' allowedLevels={[0]}>
                       <OrderingProducts />
                     </ProtectedRoute>

package/template/components/AutologinParams/index.js

@@ -0,0 +1,79 @@
+import React, { cloneElement, useEffect, useState } from 'react'
+
+import { SpinnerLoader } from '../../../src/components/Shared'
+import settings from '../../config.json'
+import theme from '../../theme.json'
+
+export const AutologinParams = (props) => {
+  const [userState, setUserState] = useState({ loading: true, result: null, error: null })
+
+  const allowedLevels = [0, 2, 5]
+  const search = window.location.search
+
+  let queryProject
+  let queryToken
+
+  if (search) {
+    const query = new URLSearchParams(search)
+    queryProject = query.get('project')
+    queryToken = query.get('token')
+  }
+
+  const setUser = async () => {
+    if (!queryProject || !queryToken) {
+      setUserState({ ...userState, loading: false })
+      return
+    }
+    window.localStorage.removeItem('token')
+    window.localStorage.removeItem('user')
+    window.localStorage.removeItem('project')
+    try {
+      setUserState({ ...userState, loading: true })
+      const requestOptions = {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${queryToken}`
+        }
+      }
+      const response = await fetch(`${settings.api.url}/${settings.api.version}/${settings.api.language}/${queryProject}/users/me`, requestOptions)
+      const { error, result } = await response.json()
+      if (!error && allowedLevels.includes(result.level)) {
+        window.localStorage.setItem('token', queryToken)
+        window.localStorage.setItem('user', JSON.stringify(result))
+        window.localStorage.setItem('project', queryProject)
+      }
+      setUserState({
+        ...userState,
+        loading: false,
+        error: result
+      })
+    } catch (e) {
+      setUserState({
+        ...userState,
+        loading: false,
+        error: e?.message
+      })
+    }
+  }
+
+  useEffect(() => {
+    setUser()
+  }, [])
+
+  return (
+    userState.loading
+      ? <SpinnerLoader content={theme?.defaultLanguages?.LOADING_DELICIOUS_FOOD} />
+      : cloneElement(props.children, {
+        settings: {
+          ...settings,
+          ...props.configFile,
+          project: settings?.use_project_domain
+            ? '_'
+            : queryProject ?? window.localStorage.getItem('project') !== null
+              ? window.localStorage.getItem('project')
+              : props.configFile?.project ?? null
+        }
+      })
+  )
+}

package/template/components/ListenPageChanges/index.js

@@ -42,6 +42,9 @@ export const ListenPageChanges = ({ children }) => {
     customer_app: '/my-products/customer-app',
     store_app: '/my-products/store-app',
     driver_app: '/my-products/driver-app',
+    pos_app: '/my-products/pos-app',
+    call_center_app: '/my-products/call-center-app',
+    kiosk_app: '/my-products/kiosk-app',
     delivery_drivers: '/delivery/drivers-list',
     drivers_managers: '/delivery/drivers-managers',
     drivers_companies: '/delivery/drivers-companies',
@@ -51,8 +54,6 @@ export const ListenPageChanges = ({ children }) => {
     ordering_products: '/ordering-products',
     support: '/support',
     rewards_programs: '/loyalty/rewards-programs',
-    free_products: '/downloads/free-products',
-    purchased_products: '/downloads/purchased-products',
     reset_password: '/password/reset',
     profile: '/profile'
   }

package/template/config.json

@@ -1,6 +1,7 @@
 {
   "app_id": "ordering-admin-react",
   "app_name": "Ordering Admin",
+  "billing_url": "https://billing-dashboard.tryordering.com",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/template/helmetdata.json

@@ -265,6 +265,27 @@
     "robots": "index, follow",
     "canonicalUrl": ""
   },
+  "pos_app": {
+    "title": "POS App",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "call_center_app": {
+    "title": "Call Center App",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "kiosk_app": {
+    "title": "Kiosk App",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
   "support": {
     "title": "Support",
     "description": "a dummy description about this page",

package/template/pages/CallCenterApp/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { CallCenterApp as CallCenterAppController } from '../../../src/components/MyProducts'
+
+export const CallCenterApp = (props) => {
+  return (
+    <>
+      <HelmetTags page='call_center_app' />
+      <CallCenterAppController {...props} />
+    </>
+  )
+}