ordering-ui-admin-external 1.5.1 → 1.6.0

package/src/components/Marketing/CampaignSMS/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, useEvent } from 'ordering-components-admin-external'
 import { Input, TextArea, Button } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { Alert } from '../../Shared'
@@ -11,7 +11,8 @@ import {
   SmsPreviewWrapper,
   SmsContentLayout,
   SmsPreviewContentWrapper,
-  SmsPreviewContent
+  SmsPreviewContent,
+  Description
 } from './styles'
 
 export const CampaignSMS = (props) => {
@@ -26,6 +27,7 @@ export const CampaignSMS = (props) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const closeAlert = () => {
@@ -76,9 +78,16 @@ export const CampaignSMS = (props) => {
     }
   }
 
+  const handleGoToPage = () => {
+    events.emit('go_to_page', { page: 'operation_settings', search: '?category=26' })
+  }
+
   return (
     <>
       <Container>
+        <Description>
+          {t('TWILIO_SETTINGS_LINK_DESC', 'You need to complete Twilio configuration first, you can do it here:')} <span onClick={() => handleGoToPage()}>{t('TWILIO_SETTINGS', 'Twilio settings')}</span>
+        </Description>
         <InputWrapper>
           <label>{t('TITLE', 'Title')}</label>
           <Input

package/src/components/Marketing/CampaignSMS/styles.js

@@ -93,3 +93,16 @@ export const SmsPreviewContent = styled.div`
     color: ${props => props.theme.colors.lightGray};
   }
 `
+
+export const Description = styled.div`
+  font-size: 14px;
+  margin: 10px 0px;
+  span {
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    transition: all 0.3s linear;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`

package/src/components/Marketing/CampaignWebHook/index.js

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, useEvent } from 'ordering-components-admin-external'
 import { Input, TextArea, Button } from '../../../styles'
 import { Alert } from '../../Shared'
 
 import {
   Container,
   InputWrapper,
-  ButtonWrapper
+  ButtonWrapper,
+  Description
 } from './styles'
 
 export const CampaignWebHook = (props) => {
@@ -20,6 +21,7 @@ export const CampaignWebHook = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [events] = useEvent()
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
@@ -78,9 +80,16 @@ export const CampaignWebHook = (props) => {
     }
   }
 
+  const handleGoToPage = () => {
+    events.emit('go_to_page', { page: 'integrations' })
+  }
+
   return (
     <>
       <Container>
+        <Description>
+          {t('INTEGRATION_SETTINGS_LINK_DESC', 'You need to have an Integration first, you can do it here:')} <span onClick={() => handleGoToPage()}>{t('INTEGRATIONS', 'Integrations')}</span>
+        </Description>
         <InputWrapper>
           <label>{t('TITLE', 'Title')}</label>
           <Input

package/src/components/Marketing/CampaignWebHook/styles.js

@@ -32,3 +32,16 @@ export const ButtonWrapper = styled.div`
     border-radius: 8px;
   }
 `
+
+export const Description = styled.div`
+  font-size: 14px;
+  margin: 10px 0px;
+  span {
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    transition: all 0.3s linear;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import {
+  Container,
+  InfoWrapper
+} from './styles'
+
+export const BoxLayout = (props) => {
+  const {
+    photo,
+    title,
+    description,
+    children
+  } = props
+
+  return (
+    <Container>
+      <img src={photo} alt='' />
+      <InfoWrapper>
+        <h2>{title}</h2>
+        <p>{description}</p>
+        {children}
+      </InfoWrapper>
+    </Container>
+  )
+}

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

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  padding: 0px 20px;
+  margin-top: 25px;
+  > img {
+    width: 100%;
+    max-height: 650px;
+    object-fit: cover;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    padding: 0px 40px;
+    img {
+      width: 40%;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    margin-right: 50px;
+    ${props => props.theme.rtl && css`
+      margin-left: 50px;
+      margin-right: 0px;
+    `}
+  }
+`
+
+export const InfoWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px 0px;
+  margin-left: 20px;
+  ${props => props.theme.rtl && css`
+    margin-right: 20px;
+    margin-left: 0px;
+  `}
+
+  > h2 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 48px;
+    margin-top: 0px;
+    margin-bottom: 7px;
+    text-transform: capitalize;
+  }
+
+  > p {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 30px;
+  }
+
+  @media (min-width: 576px) {
+    margin-left: 45px;
+    ${props => props.theme.rtl && css`
+      margin-right: 45px;
+      margin-left: 0px;
+    `}
+  }
+
+  @media (min-width: 1440px) {
+    > h2 {
+      font-size: 36px;
+    }
+    > p {
+      font-size: 18px;
+    }
+  }
+`

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

@@ -0,0 +1,52 @@
+import React from 'react'
+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 {
+  Container,
+  HeaderTitleContainer,
+  ContentWrapper,
+  ButtonWrapper
+} from './styles'
+import { BoxLayout } from '../BoxLayout'
+
+export const CustomerApp = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  return (
+    <Container>
+      <HeaderTitleContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('MY_PRODUCTS', 'My products')}</h1>
+      </HeaderTitleContainer>
+      <ContentWrapper>
+        <BoxLayout
+          title={t('CUSTOMER_APP', 'Customer app')}
+          photo={theme.images.myProducts.customerApp}
+          description={t('CUSTOMER_APP_DESC', 'Give your customers the chance to order from their mobile devices wherever they are, receive push notifications, offers, and much more.')}
+        >
+          <ButtonWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              onClick={() => window.open('https://www.ordering.co/ordering-sales', '_blank')}
+            >
+              {t('REQUEST_APP_NOW', 'Request app now')}
+            </Button>
+          </ButtonWrapper>
+        </BoxLayout>
+      </ContentWrapper>
+    </Container>
+  )
+}

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

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+  min-height: 100vh;
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const ContentWrapper = styled.div`
+  height: calc(100% - 32px);
+  display: flex;
+  align-items: center;
+`
+
+export const ButtonWrapper = styled.div`
+  button {
+    width: 100%;
+    height: 44px;
+    text-transform: capitalize;
+  }
+
+  @media(min-width: 576px) {
+    button {
+      width: 260px;
+    }
+  }
+`

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

@@ -0,0 +1,83 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { Button, IconButton } from '../../../styles'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import { BoxLayout } from '../BoxLayout'
+import {
+  Container,
+  HeaderTitleContainer,
+  ContentWrapper,
+  FreeBtnWrapper,
+  BrandedBtnWrapper
+} from './styles'
+
+export const DriverApp = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const handleOpenURL = (url) => {
+    window.open(url, '_blank')
+  }
+
+  return (
+    <Container>
+      <HeaderTitleContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('MY_PRODUCTS', 'My products')}</h1>
+      </HeaderTitleContainer>
+      <ContentWrapper>
+        <h1>{t('DRIVER_APP', 'Driver app')}</h1>
+        <p>{t('DRIVER_APP_DESC', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')}</p>
+        <BoxLayout
+          title={t('FREE_TO_USE', 'Free to use')}
+          description={t('FREE_TO_USE_DESC', 'This app can be used by your fleet with the ordering.co logo.')}
+          photo={theme.images.myProducts.driverApp}
+        >
+          <FreeBtnWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              outline
+              onClick={() => handleOpenURL('https://apps.apple.com/us/app/driver-app-2-0/id1606257815')}
+            >
+              {t('DOWNLOAD_APPLE', 'Download apple')}
+            </Button>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              outline
+              onClick={() => handleOpenURL('https://play.google.com/store/apps/details?id=com.ordering.deliveryv5')}
+            >
+              {t('DOWNLOAD_GOOGLE', 'Download google')}
+            </Button>
+          </FreeBtnWrapper>
+        </BoxLayout>
+        <BoxLayout
+          title={t('BRANDED_BY_YOU', 'Branded by you')}
+          description={t('BRANDED_BY_YOU_DESC', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id mi quam aenean in faucibus ac integer libero. Eu egestas sit imperdiet at sit adipiscing ullamcorper sed sit.')}
+          photo={theme.images.myProducts.driverApp}
+        >
+          <BrandedBtnWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              onClick={() => handleOpenURL('https://www.ordering.co/ordering-sales')}
+            >
+              {t('REQUEST_APP_NOW', 'Request app now')}
+            </Button>
+          </BrandedBtnWrapper>
+        </BoxLayout>
+      </ContentWrapper>
+    </Container>
+  )
+}

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

@@ -0,0 +1,104 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+  min-height: 100vh;
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const ContentWrapper = styled.div`
+    margin-top: 27px;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 48px;
+    margin-top: 0px;
+    margin-bottom: 7px;
+  }
+
+  > p {
+    margin: 0px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  }
+`
+
+export const FreeBtnWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  button {
+    width: 100%;
+    height: 44px;
+    text-transform: capitalize;
+    &:first-child {
+      margin-bottom: 15px;
+    }
+  }
+
+  @media (min-width: 769px) {
+    flex-direction: row;
+    button {
+      width: 180px;
+      &:first-child {
+        margin-right: 15px;
+        margin-bottom: 0px;
+        ${props => props.theme.rtl && css`
+          margin-right: 0px;
+          margin-left: 15px;
+        `}
+      }
+    }
+  }
+
+  @media (min-width: 1320px) {
+    button {
+      width: 260px;
+    }
+  }
+`
+
+export const BrandedBtnWrapper = styled.div`
+  button {
+    width: 100%;
+    height: 44px;
+    text-transform: capitalize;
+  }
+
+  @media (min-width: 576px) {
+    width: 260px;
+  }
+`

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { IconButton } from '../../../styles'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import {
+  Container,
+  HeaderTitleContainer,
+  WebsiteWrapper,
+  InfoWrapper
+} from './styles'
+
+export const OrderingWebsite = () => {
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const theme = useTheme()
+
+  return (
+    <Container>
+      <HeaderTitleContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('MY_PRODUCTS', 'My products')}</h1>
+      </HeaderTitleContainer>
+      <WebsiteWrapper>
+        <InfoWrapper>
+          <h1>{t('ORDERING_WEBSITE', 'Ordering website')}</h1>
+          <p>{t('ORDERING_WEBSITE_DESC', 'This product is included in your project by default.')}</p>
+        </InfoWrapper>
+        <img src={theme.images.myProducts.orderingWebsite} alt='ordering-website' />
+      </WebsiteWrapper>
+    </Container>
+  )
+}

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

@@ -0,0 +1,104 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const WebsiteWrapper = styled.div`
+  margin-top: 30px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+
+  > img {
+    width: 100%;
+    margin-top: 20px;
+    max-height: 600px;
+    object-fit: cover;
+  }
+
+  @media (min-width: 769px) {
+    flex-direction: row;
+    padding: 40px;
+
+    img {
+      margin-top: 0px;
+      width: 42%;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    img {
+      width: 35%;
+    }
+    margin-right: 50px;
+    ${props => props.theme.rtl && css`
+      margin-left: 50px;
+      margin-right: 0px;
+    `}
+  }
+`
+
+export const InfoWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  h1 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 48px;
+    margin-top: 0px;
+    margin-bottom: 7px;
+    text-transform: capitalize;
+  }
+  p {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0px;
+  }
+
+  @media (min-width: 769px) {
+    margin-right: 40px;
+    ${props => props.theme.rtl && css`
+      margin-left: 40px;
+      margin-right: 0px;
+    `}
+  }
+`