ordering-ui-admin-external 1.5.1 → 1.6.1

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;
+    `}
+  }
+`

package/src/components/MyProducts/StoreApp/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 StoreApp = () => {
+  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('STORE_APP', 'Store app')}</h1>
+        <p>{t('STORE_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.storeApp}
+        >
+          <FreeBtnWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              outline
+              onClick={() => handleOpenURL('https://apps.apple.com/us/app/store-app-2-0/id1608192050')}
+            >
+              {t('DOWNLOAD_APPLE', 'Download apple')}
+            </Button>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              outline
+              onClick={() => handleOpenURL('https://play.google.com/store/apps/details?id=com.ordering.storeappv5&pli=1')}
+            >
+              {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.storeApp}
+        >
+          <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/StoreApp/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/index.js

@@ -0,0 +1,11 @@
+import { OrderingWebsite } from './OrderingWebsite'
+import { CustomerApp } from './CustomerApp'
+import { StoreApp } from './StoreApp'
+import { DriverApp } from './DriverApp'
+
+export {
+  OrderingWebsite,
+  CustomerApp,
+  StoreApp,
+  DriverApp
+}

package/src/components/OrderingProducts/OrderingProductDetails/index.js

@@ -26,7 +26,7 @@ const OrderingProductDetailsUI = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
   const tabs = [
-    { key: 'general', content: t('GENERAL', 'General') },
+    { key: 'general', content: t('GENERAL', 'General') }
     // { key: 'theme', content: t('THEME', 'Theme') }
   ]
 

package/src/components/Orders/OrdersTable/index.js

@@ -11,7 +11,6 @@ import {
 } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
-import { ChevronRight } from 'react-bootstrap-icons'
 
 import {
   OrdersContainer,
@@ -314,17 +313,14 @@ export const OrdersTable = (props) => {
                   .sort((col1, col2) => allowColumns[col1]?.order - allowColumns[col2]?.order)
                   .map((column, i) => {
                     if (column === 'slaBar') {
-                      return (
-                        <th key={`noDragTh-${i}`}>
-                          <Timestatus />
-                        </th>
-                      )
+                      return
                     }
                     if (column === 'orderNumber') {
                       return (
                         <th
                           className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
                           key={`noDragTh-${i}`}
+                          colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
                         >
                           <CheckBox
                             isChecked={!orderList.loading && isAllChecked}
@@ -348,6 +344,7 @@ export const OrdersTable = (props) => {
                             allowColumns={allowColumns}
                             optionsDefault={optionsDefault}
                             handleChangeAllowColumns={handleChangeAllowColumns}
+                            isOrder
                           />
                         </th>
                       )