ordering-ui-admin-external 1.8.5 → 1.10.0

package/src/components/Settings/Deliverect/styles.js

@@ -0,0 +1,344 @@
+import styled, { css } from 'styled-components'
+
+export const DeliverectContainer = styled.div`
+  padding: 26px 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
+
+  @media (min-width: 768px) {
+    padding: 26px 40px;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 35px;
+  ` : css`
+    margin-right: 35px;
+  `}
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0px;
+    text-transform: capitalize;
+  }
+
+  button {
+    line-height: 12px;
+    height: 16px;
+    font-size: 10px;
+    margin-left: 15px;
+    padding: 2px 8px;
+    border-radius: 50px;
+    ${props => props.theme.rtl && css`
+      margin-right: 15px;
+      margin-left: 0px;
+    `}
+  }
+`
+
+export const ApiKeysListTable = styled.table`
+  width: 100%;
+  margin-top: 25px;
+
+  thead {
+    border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
+    th {
+      padding: 10px 0;
+      &:last-child {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+  }
+  tr {
+    width: 100%;
+    th,
+    td {
+      font-size: 12px;
+      word-break: break-all;
+
+      &:last-child {
+        width: 100px;
+        > div {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+      }
+    }
+  }
+
+  tbody {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    td {
+      padding-top: 9px;
+      padding-bottom: 9px;
+
+      &:last-child {
+        > div {
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+`
+
+export const DropdownButtonWrapper = styled.div`
+  ${props => props?.theme?.rtl ? css`
+    border-right: 1px solid ${props => props.theme.colors.borderColor};
+  ` : css`
+    border-left: 1px solid ${props => props.theme.colors.borderColor};
+  `}
+  padding: 5px 20px;
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => props.theme.colors.secundary} !important;
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`
+export const AddNewButton = styled.div`
+  cursor: pointer;
+  font-size: 12px;
+  color: ${props => props.theme.colors.lightGray};
+  margin: 20px 0;
+  width: fit-content;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const AllSetting = styled.div`
+  user-select: none;
+  cursor: pointer;
+  margin-top: 36px;
+  cursor: pointer;
+  span {
+    font-weight: 600;
+    font-size: 14px;
+    color: ${props => props.theme.colors.primary};
+  }
+  svg {
+    color: ${props => props.theme.colors.primary};
+    margin-left: 5px;
+    transition: 0.2s linear;
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0px;
+    `}
+  }
+  &:hover {
+    svg {
+      transform: translateX(3px);
+    }
+  }
+`
+
+export const Description = styled.p`
+  margin-top: 40px;
+  font-size: 14px;
+  margin-bottom: 0px;
+  text-align: justify;
+
+  @media (min-width: 768px) {
+    text-align: initial;
+  }
+`
+
+export const CategoryExtraContent = styled.div`
+  position: relative;
+  padding: 26px 26px 60px 26px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+
+  ${props => props.theme?.rtl ? css`
+    border-right: 1px solid #E9ECEF;
+  ` : css`
+    border-left: 1px solid #E9ECEF;
+  `}
+
+  > button {
+    z-index: 100;
+    position: absolute;
+    top: 25px;
+    ${props => props.theme?.rtl ? css`
+      left: 20px;
+    ` : css`
+      right: 20px;
+    `}
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  width: 0;
+  position: fixed;
+  box-shadow: -4px 0px 7px #ccc;
+
+  ${({ isDriverOrders }) => isDriverOrders && css`
+    position: absolute;
+    box-shadow: none;
+
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #CCC;
+    ` : css`
+      border-left: 1px solid #CCC;
+    `}
+  `}
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  height: calc(var(--vh, 1vh) * 100);
+  top: 0px;
+  z-index: 1001;
+  overflow-x: hidden;
+  transition: 0.3s;
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+    ` : css`
+    right: 0px;
+  `}
+  @media print {
+    box-shadow: none;
+  }
+`
+
+export const DescriptionHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`
+
+export const HeaderIcons = styled.div`
+  display: flex;
+  position: absolute;
+  top: 25px;
+  right: 20px;
+
+  > button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+`
+
+export const SettingListConatiner = styled.div`
+  width: 100%;
+  margin: 20px 0;
+  border-bottom: 1px solid #E9ECEF;
+`
+
+export const Tab = styled.div`
+  user-select: none;
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  font-size: 14px;
+  white-space: nowrap;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 2px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: #909BA9;
+  `}
+`
+
+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/Settings/DoordashConnect/index.js

@@ -101,7 +101,7 @@ const DoordashConnectUI = (props) => {
                 '1.- Doordash account. \n' +
                 '2.- The advanced logistics module must be active. \n' +
                 '3.- Package of Ordering. \n' +
-                '4.- This is only available for United States currently.'
+                '4.- This is only available for United States, Canada and Australia currently.'
               )}
             </p>
           </Paragraph>

package/src/components/Settings/IntegrationListing/index.js

@@ -9,6 +9,10 @@ import { PluginList } from '../PluginList'
 import { WebhookList } from '../WebhookList'
 import { ApiKeysList } from '../ApiKeysList'
 import { DoordashConnect } from '../DoordashConnect'
+import { useTheme } from 'styled-components'
+import { LalaMoveConnect } from '../LalaMoveConnect'
+import { Deliverect } from '../Deliverect'
+import { ItsaCheckmate } from '../ItsaCheckmate'
 
 import {
   IntegrationsContainer,
@@ -18,8 +22,7 @@ import {
   IconWrapper,
   SettingItemContent
 } from './styles'
-import { useTheme } from 'styled-components'
-import { LalaMoveConnect } from '../LalaMoveConnect'
+import { PickerExpress } from '../PickerExpress'
 
 export const IntegrationListing = (props) => {
   const [, t] = useLanguage()
@@ -134,10 +137,43 @@ export const IntegrationListing = (props) => {
               <img src={theme.images.general.lalamove} />
             </IconWrapper>
             <SettingItemContent>
-              <h5>{t('CONNECT_WITH_LALAMOVE', 'Connect with lalamove')}</h5>
+              <h5>{t('CONNECT_WITH_LALAMOVE', 'Connect with Lalamove')}</h5>
               <p>{t('CONNECT_LALAMOVE_DESCRIPTION', 'Send orders directly to your drivers in LalaMove and keep customers happy with their deliveries.')}</p>
             </SettingItemContent>
           </SettingItemContainer>
+          <SettingItemContainer
+            onClick={() => handleOpenSetting('picker_express')}
+          >
+            <IconWrapper fullWidth>
+              <img src={theme.images.general.pickerExpress} />
+            </IconWrapper>
+            <SettingItemContent>
+              <h5>{t('CONNECT_WITH_PICKER_EXPRESS', 'Connect with Picker Express')}</h5>
+              <p>{t('CONNECT_PICKER_EXPRESS_DESCRIPTION', 'Picker express connect you with +200 hundred thousand driver from +10 delivery companies from your city.')}</p>
+            </SettingItemContent>
+          </SettingItemContainer>
+          <SettingItemContainer
+            onClick={() => handleOpenSetting('deliverect')}
+          >
+            <IconWrapper>
+              <img src={theme.images.general.deliverect} />
+            </IconWrapper>
+            <SettingItemContent>
+              <h5>{t('DELIVERECT', 'Deliverect')}</h5>
+              <p>{t('SYNC_DEC_FIRST', 'The easiest way to manage all your online orders.')}</p>
+            </SettingItemContent>
+          </SettingItemContainer>
+          <SettingItemContainer
+            onClick={() => handleOpenSetting('itsacheckmate')}
+          >
+            <IconWrapper>
+              <img src={theme.images.general.ItsaCheckmateLogo} />
+            </IconWrapper>
+            <SettingItemContent>
+              <h5>{t('ITSACHECKMATE', 'ItsaCheckmate')}</h5>
+              <p dangerouslySetInnerHTML={{ __html: t('ITSACHECKMATE_SUB_HEADER', 'Take control of all your <strong>Ordering Platform Menus</strong> in one place!') }} />
+            </SettingItemContent>
+          </SettingItemContainer>
         </SettingListContainer>
       </IntegrationsContainer>
 
@@ -174,17 +210,15 @@ export const IntegrationListing = (props) => {
         </SideBar>
       )}
 
-      {showOption === 'doordash' && (
-        <DoordashConnect
-          onClose={() => handleCloseSettings()}
-        />
-      )}
+      {showOption === 'doordash' && <DoordashConnect onClose={() => handleCloseSettings()} />}
 
-      {showOption === 'lalamove' && (
-        <LalaMoveConnect
-          onClose={() => handleCloseSettings()}
-        />
-      )}
+      {showOption === 'lalamove' && <LalaMoveConnect onClose={() => handleCloseSettings()} />}
+
+      {showOption === 'picker_express' && <PickerExpress onClose={() => handleCloseSettings()} />}
+
+      {showOption === 'deliverect' && <Deliverect onClose={() => handleCloseSettings()} />}
+
+      {showOption === 'itsacheckmate' && <ItsaCheckmate onClose={() => handleCloseSettings()} />}
     </>
   )
 }

package/src/components/Settings/IntegrationListing/styles.js

@@ -77,6 +77,7 @@ export const IconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 
   svg {
     font-size: 24px;
@@ -84,8 +85,13 @@ export const IconWrapper = styled.div`
   }
   img{
     width: 100%;
-    height: 100%;
+    max-width: 90%;
   }
+  ${({ fullWidth }) => fullWidth && css`
+    img {
+      max-width: 100%;
+    }
+  `}
 `
 
 export const SettingItemContent = styled.div`

package/src/components/Settings/ItsaCheckmate/index.js

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, IconButton } from '../../../styles'
+import { DragScroll, Modal } from '../../Shared'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { XLg, Check2Circle } from 'react-bootstrap-icons'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+
+import {
+  Header,
+  AllSetting,
+  Description,
+  CategoryExtraContent,
+  Container,
+  DescriptionHeader,
+  HeaderIcons,
+  ItsaCheckmateContainer,
+  SettingListConatiner,
+  Tab,
+  GetStarted,
+  YoutubeVideoWrapper,
+  YoutubeVideoInner
+} from './styles'
+
+export const ItsaCheckmate = (props) => {
+  const {
+    onClose
+  } = props
+
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
+  const toggleMainContent = () => {
+    if (width <= 500) {
+      document.getElementById('catDescription').style.width = '100vw'
+    } else {
+      if ((settingsOpen) && width >= 1000) {
+        document.getElementById('catDescription').style.width = '1000px'
+      } else {
+        document.getElementById('catDescription').style.width = '500px'
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (width < 1000) return
+    if (settingsOpen) {
+      document.getElementById('catDescription').style.width = '1000px'
+    } else {
+      toggleMainContent()
+    }
+  }, [settingsOpen])
+
+  useEffect(() => {
+    toggleMainContent()
+  }, [width])
+
+  const LalaMoveConnectDescription = () => {
+    return (
+      <CategoryExtraContent>
+        <IconButton
+          color='black'
+          onClick={() => setSettingsOpen(false)}
+        >
+          <XLg />
+        </IconButton>
+        <div>
+          <Header>
+            <h1>{t('MORE_INFO', 'More Info')}</h1>
+          </Header>
+          <SettingListConatiner>
+            <DragScroll>
+              <Tab
+                active
+              >
+                {t('GENERAL', 'General')}
+              </Tab>
+            </DragScroll>
+          </SettingListConatiner>
+          <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>
+        </div>
+      </CategoryExtraContent>
+    )
+  }
+
+  return (
+    <Container
+      id='catDescription'
+    >
+      <ItsaCheckmateContainer>
+        <DescriptionHeader>
+          <HeaderIcons>
+            <IconButton
+              color='black'
+              onClick={onClose}
+            >
+              <XLg />
+            </IconButton>
+          </HeaderIcons>
+        </DescriptionHeader>
+        <Header>
+          <h1>{t('ITSACHECKMATE', 'ItsaCheckmate')}</h1>
+          <Button color='lightPrimary'>{t('NEW', 'New')}</Button>
+        </Header>
+        <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>
+        <AllSetting onClick={() => setSettingsOpen(true)}>
+          <span>{t('SETTINGS', 'All settings')}</span>
+          <BsArrowRight />
+        </AllSetting>
+      </ItsaCheckmateContainer>
+      {settingsOpen && (
+        <>
+          {width >= 1000 ? (
+            <LalaMoveConnectDescription />
+          ) : (
+            <>
+              <Modal
+                width='70%'
+                height='90vh'
+                open
+                padding='0px'
+                onClose={() => setSettingsOpen(false)}
+                hideCloseDefault
+              >
+                <LalaMoveConnectDescription />
+              </Modal>
+            </>
+          )}
+        </>
+      )}
+    </Container>
+  )
+}