ordering-ui-admin-external 1.8.0 → 1.8.1

package/src/components/MyProducts/AppLayout/index.js

@@ -3,7 +3,7 @@ import { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton, Button } from '../../../styles'
 import { List as MenuIcon } from 'react-bootstrap-icons'
-import { useTheme } from 'styled-components'
+import { insertIntercom } from '../../../utils'
 import {
   Container,
   HeaderTitleContainer,
@@ -11,17 +11,21 @@ import {
   BoxWrapper,
   AppInfoContainer,
   ImageWrapper,
-  AppStoreLinksWrapper,
   DownloadLink,
-  ButtonWRapper
+  ButtonWRapper,
+  DownLoadWrapper
 } from './styles'
 
 export const AppLayout = (props) => {
-  const { appInfo } = props
+  const { appInfo, isDriver } = props
   const [, t] = useLanguage()
-  const theme = useTheme()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
 
+  const showMessage = (message) => {
+    insertIntercom()
+    window.Intercom && window.Intercom('showNewMessage', message)
+  }
+
   return (
     <Container>
       <HeaderTitleContainer>
@@ -40,42 +44,52 @@ export const AppLayout = (props) => {
         <p>{appInfo.description}</p>
         <BoxWrapper>
           <AppInfoContainer>
-            <ImageWrapper>
+            <ImageWrapper isDriver={isDriver}>
               <img src={appInfo.images.live} alt='' />
             </ImageWrapper>
             <h2>{appInfo.live_title}</h2>
+            {appInfo?.downloads && (
+              <DownLoadWrapper>
+                {appInfo.downloads.map(item => (
+                  <img
+                    src={item.icon}
+                    alt=''
+                    key={item.id}
+                    onClick={() => window.open(item.link, '_blank')}
+                  />
+                ))}
+              </DownLoadWrapper>
+            )}
+            {appInfo?.web_url && (
+              <DownloadLink href={appInfo.web_url} target='_blank' isSingle className='download-link'>
+                {appInfo.web_link_title}
+              </DownloadLink>
+            )}
             <p>{appInfo.live_description}</p>
-            {appInfo?.live_purchase_link ? (
+            {appInfo?.purchase_message && (
               <ButtonWRapper>
                 <Button
                   color='primary'
                   borderRadius='8px'
-                  onClick={() => window.open(`${appInfo.live_purchase_link}`, '_blank')}
+                  onClick={() => showMessage(appInfo?.purchase_message)}
                 >
                   {t('PURCHASE_NOW', 'Purchase Now')}
                 </Button>
-              </ButtonWRapper>
-            ) : (
-              <AppStoreLinksWrapper>
-                {appInfo.web_url ? (
-                  <DownloadLink href={appInfo.web_url} target='_blank' isSingle className='download-link'>
-                    {appInfo.web_link_title}
-                  </DownloadLink>
-                ) : (
-                  <>
-                    <DownloadLink href={appInfo.apple_store_link} target='_blank' className='download-link'>
-                      <img src={theme.images.general.appStore} alt='App store' />
-                    </DownloadLink>
-                    <DownloadLink href={appInfo.google_play_link} target='_blank' className='download-link'>
-                      <img src={theme.images.general.googlePlay} alt='Google play' />
-                    </DownloadLink>
-                  </>
+                {appInfo?.demo_book_message && (
+                  <Button
+                    color='primary'
+                    outline
+                    borderRadius='8px'
+                    onClick={() => showMessage(appInfo?.demo_book_message)}
+                  >
+                    {t('BOOK_A_DEMO', 'Book a demo')}
+                  </Button>
                 )}
-              </AppStoreLinksWrapper>
+              </ButtonWRapper>
             )}
           </AppInfoContainer>
           <AppInfoContainer>
-            <ImageWrapper>
+            <ImageWrapper isDriver={isDriver}>
               <img src={appInfo.images.brand} alt='' />
             </ImageWrapper>
             <h2>{appInfo.brand_title}</h2>
@@ -84,7 +98,7 @@ export const AppLayout = (props) => {
               <Button
                 color='primary'
                 borderRadius='8px'
-                onClick={() => window.open(`${appInfo.purchase_link}`, '_blank')}
+                onClick={() => showMessage(appInfo?.purchase_message)}
               >
                 {t('PURCHASE_NOW', 'Purchase Now')}
               </Button>

package/src/components/MyProducts/AppLayout/styles.js

@@ -79,12 +79,13 @@ export const AppInfoContainer = styled.div`
   h2 {
     font-size: 24px;
     margin-top: 0;
-    margin-bottom: 32px;
+    margin-bottom: 16px;
   }
 
   p {
     font-size: 14px;
-    margin: 0;
+    margin-top: 16px;
+    margin-bottom: 0;
   }
   @media (min-width: 1024px) {
     width: calc(50% - 23px);
@@ -102,44 +103,48 @@ export const ImageWrapper = styled.div`
   flex: 1;
   margin-bottom: 25px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   img {
     width: 100%;
     max-width: 430px;
   }
-`
-export const AppStoreLinksWrapper = styled.div`
-  margin-top: 33px;
-  display: flex;
-  > a {
-    &:not(:first-child) {
-      ${props => props.theme?.rtl ? css`
-        margin-right: 24px;
-      ` : css`
-        margin-left: 24px;
-      `}
+  ${({ isDriver }) => isDriver && css`
+    img {
+      max-width: 500px;
     }
-  }
+  `}
 `
-export const DownloadLink = styled.a`
-  flex: 1;
-  img {
-    width: 100%;
-    object-fit: cover;
-  }
 
-  ${({ isSingle }) => isSingle ? css`
-    margin: 0 auto;
-    text-decoration: underline;
-  ` : css`
-    max-width: 200px;
-  `}
+export const DownloadLink = styled.a`
+  text-decoration: underline;
 `
 export const ButtonWRapper = styled.div`
-  margin-top: 31px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding-top: 15px;
   button {
     height: 44px;
-    min-width: 250px;
+    width: 100%;
+    margin-top: 16px;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    button {
+      width: calc(50% - 10px);
+    }
+  }
+`
+
+export const DownLoadWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  img {
+    cursor: pointer;
+    &:last-child {
+      margin: 0px 15px;
+    }
   }
 `

package/src/components/MyProducts/CallCenterApp/index.js

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { AppLayout } from '../AppLayout'
+import { removeIntercom } from '../../../utils'
 
 export const CallCenterApp = () => {
   const [, t] = useLanguage()
@@ -20,9 +21,16 @@ export const CallCenterApp = () => {
     web_link_title: t('CALL_CENTER', 'Call center'),
     brand_title: t('YOUR_BRANDED_KIOSK', 'Your Branded Kiosk'),
     brand_description: t('CALL_CENTER_BRANDED_DESCRIPTION', 'The Call Center is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet or device you add it to.'),
-    purchase_link: 'https://www.ordering.co/ordering-sales'
+    demo_book_message: 'I would like to book a Demo about the Call center , can you assist me?',
+    purchase_message: 'I would like to know about the Call center, can you assist me?'
   }
 
+  useEffect(() => {
+    return () => {
+      removeIntercom()
+    }
+  }, [])
+
   return (
     <AppLayout appInfo={appInfo} />
   )

package/src/components/MyProducts/CustomerApp/index.js

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { AppLayout } from '../AppLayout'
+import { removeIntercom } from '../../../utils'
 
 export const CustomerApp = () => {
   const [, t] = useLanguage()
@@ -16,12 +17,22 @@ export const CustomerApp = () => {
     },
     live_title: t('MULTI-STORE-CUSTOMER-APP', 'Multi-store Customer App'),
     live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
-    live_purchase_link: 'https://www.ordering.co/ordering-sales',
+    demo_book_message: 'I would like to book a Demo for the customer app , can you assist me?',
     brand_title: t('SINGLE_STORE_CUSTOMER_APP', 'Single Store Customer App'),
     brand_description: t('BRANDED_APP_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
-    purchase_link: 'https://www.ordering.co/ordering-sales'
+    purchase_message: 'I would like to know about the customer app, can you assist me?',
+    downloads: [
+      { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/customer-app-2-0/id1607414555' },
+      { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.onlineorderingappv5&hl=en&gl=US' }
+    ]
   }
 
+  useEffect(() => {
+    return () => {
+      removeIntercom()
+    }
+  }, [])
+
   return (
     <AppLayout appInfo={appInfo} />
   )

package/src/components/MyProducts/DriverApp/index.js

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { AppLayout } from '../AppLayout'
+import { removeIntercom } from '../../../utils'
 
 export const DriverApp = () => {
   const [, t] = useLanguage()
@@ -16,14 +17,23 @@ export const DriverApp = () => {
     },
     live_title: t('FREE_TO_USE', 'Free to use'),
     live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
-    apple_store_link: 'https://apps.apple.com/us/app/driver-app-2-0/id1606257815',
-    google_play_link: 'https://play.google.com/store/apps/details?id=com.ordering.deliveryv5',
     brand_title: t('YOUR_BRANDED_APP', 'Your Branded App'),
     brand_description: t('BRANDED_APP_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
-    purchase_link: 'https://www.ordering.co/ordering-sales'
+    demo_book_message: 'I would like to book a Demo about the Driver app , can you assist me?',
+    purchase_message: 'I would like to know about the Driver app, can you assist me?',
+    downloads: [
+      { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/driver-app-2-0/id1606257815' },
+      { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.deliveryv5' }
+    ]
   }
 
+  useEffect(() => {
+    return () => {
+      removeIntercom()
+    }
+  }, [])
+
   return (
-    <AppLayout appInfo={appInfo} />
+    <AppLayout appInfo={appInfo} isDriver />
   )
 }

package/src/components/MyProducts/KioskApp/index.js

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { AppLayout } from '../AppLayout'
+import { removeIntercom } from '../../../utils'
 
 export const KioskApp = () => {
   const [, t] = useLanguage()
@@ -16,13 +17,22 @@ export const KioskApp = () => {
     },
     live_title: t('LIVE_DEMO', 'Live Demo'),
     live_description: t('APP_LIVE_DEMO_DESCRIPTION', 'This is a branded Ordering.co product. play with it and understand how it works'),
-    apple_store_link: 'https://apps.apple.com/us/app/ordering-kiosk-2-0/id1609314960',
-    google_play_link: 'https://play.google.com/store/apps/details?id=com.ordering.orderingkioskv5&hl=en&gl=US',
     brand_title: t('YOUR_BRANDED_KIOSK', 'Your Branded Kiosk'),
     brand_description: t('KIOSK_BRANDED_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet you add it to.'),
-    purchase_link: 'https://www.ordering.co/ordering-sales'
+    demo_book_message: 'I would like to book a Demo about the Kiosk app, can you assist me?',
+    purchase_message: 'I would like to know about the Kiosk app, can you assist me?',
+    downloads: [
+      { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/ordering-kiosk-2-0/id1615828153' },
+      { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.orderingkioskv5&hl=en&gl=US' }
+    ]
   }
 
+  useEffect(() => {
+    return () => {
+      removeIntercom()
+    }
+  }, [])
+
   return (
     <AppLayout appInfo={appInfo} />
   )

package/src/components/MyProducts/PosApp/index.js

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { AppLayout } from '../AppLayout'
+import { removeIntercom } from '../../../utils'
 
 export const PosApp = () => {
   const [, t] = useLanguage()
@@ -16,13 +17,22 @@ export const PosApp = () => {
     },
     live_title: t('FREE_TO_USE', 'Free to use'),
     live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
-    apple_store_link: 'https://apps.apple.com/us/app/ordering-pos-2-0/id1609520468',
-    google_play_link: 'https://play.google.com/store/apps/details?id=com.ordering.posv5&hl=en&gl=US',
     brand_title: t('YOUR_BRANDED_POS', 'Your Branded POS'),
     brand_description: t('POS_BRANDED_DESCRIPTION', 'The POS is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet or device you add it to.'),
-    purchase_link: 'https://www.ordering.co/ordering-sales'
+    demo_book_message: 'I would like to book a Demo about the POS app , can you assist me?',
+    purchase_message: 'I would like to know about the POS app, can you assist me?',
+    downloads: [
+      { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/ordering-pos-2-0/id1609520468' },
+      { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.posv5&hl=en&gl=US' }
+    ]
   }
 
+  useEffect(() => {
+    return () => {
+      removeIntercom()
+    }
+  }, [])
+
   return (
     <AppLayout appInfo={appInfo} />
   )

package/src/components/MyProducts/StoreApp/index.js

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { AppLayout } from '../AppLayout'
+import { removeIntercom } from '../../../utils'
 
 export const StoreApp = () => {
   const [, t] = useLanguage()
@@ -16,13 +17,22 @@ export const StoreApp = () => {
     },
     live_title: t('FREE_TO_USE', 'Free to use'),
     live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
-    apple_store_link: 'https://apps.apple.com/us/app/store-app-2-0/id1608192050',
-    google_play_link: 'https://play.google.com/store/apps/details?id=com.ordering.storeappv5&pli=1',
+    demo_book_message: 'I would like to book a Demo about the Store app , can you assist me?',
     brand_title: t('YOUR_BRANDED_APP', 'Your Branded App'),
     brand_description: t('BRANDED_APP_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
-    purchase_link: 'https://www.ordering.co/ordering-sales'
+    purchase_message: 'I would like to know about the Store app, can you assist me?',
+    downloads: [
+      { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/store-app-2-0/id1608192050' },
+      { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.storeappv5&pli=1' }
+    ]
   }
 
+  useEffect(() => {
+    return () => {
+      removeIntercom()
+    }
+  }, [])
+
   return (
     <AppLayout appInfo={appInfo} />
   )

package/src/utils/index.js

@@ -292,6 +292,36 @@ export const checkSiteUrl = (url, fallback) => {
   return url[url?.length - 1] === '/' ? url : `${url}/`
 }
 
+/**
+ * Function to insert intercom script dynamically
+ */
+export const insertIntercom = () => {
+  if (document.getElementById('intercom-sdk')) return
+
+  const script = document.createElement('script')
+  script.async = true
+  script.id = 'intercom-sdk'
+  script.defer = true
+  script.innerHTML = 'window.intercomSettings = { api_base: \'https://api-iam.intercom.io\', app_id: \'o912y2nt\' };(function () { var w = window; var ic = w.Intercom; if (typeof ic === \'function\') { ic(\'reattach_activator\'); ic(\'update\', w.intercomSettings) } else { var d = document; var i = function () { i.c(arguments) }; i.q = []; i.c = function (args) { i.q.push(args) }; w.Intercom = i; var l = function () { var s = d.createElement(\'script\'); s.type = \'text/javascript\'; s.async = true; s.src = \'https://widget.intercom.io/widget/o912y2nt\'; var x = d.getElementsByTagName(\'script\')[0]; x.parentNode.insertBefore(s, x) }; if (document.readyState === \'complete\') { l() } else if (w.attachEvent) { w.attachEvent(\'onload\', l) } else { w.addEventListener(\'load\', l, false) } } })();'
+  document.body.appendChild(script)
+}
+
+/**
+ * Function to remove intercom script dynamically
+ */
+export const removeIntercom = () => {
+  const intercomSDK = document.getElementById('intercom-sdk')
+  const intercomContainer = document.getElementById('intercom-container')
+  const intercomFrame = document.getElementById('intercom-frame')
+  const intercomLightWeight = document.querySelector('.intercom-lightweight-app')
+  intercomSDK && document.body.removeChild(intercomSDK)
+  intercomContainer && document.body.removeChild(intercomContainer)
+  intercomFrame && document.body.removeChild(intercomFrame)
+  intercomLightWeight && document.body.removeChild(intercomLightWeight)
+  window.Intercom = null
+  window.intercomSettings = null
+}
+
 /**
  * function to manage review comment list
  * @param {number} param0 type of reviews to return