ordering-ui-admin-external 1.6.5 → 1.7.1

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

@@ -0,0 +1,321 @@
+import styled, { css } from 'styled-components'
+
+export const DoordashConnectContainer = 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;
+  justify-content: space-between;
+  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;
+  }
+
+  button {
+    height: 42px;
+  }
+`
+
+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 Paragraph = styled.div`
+  margin-top: 20px;
+  h2{
+    font-size: 16px;
+  }
+  p{
+    white-space: pre-line;
+    font-size: 12px;
+    margin: 0;
+  }
+  span {
+    font-size: 12px;
+  }
+  a {
+    text-decoration: underline !important;
+    cursor: pointer;
+    font-size: 12px;
+    color: ${props => props.theme.colors.primary} !important;
+  }
+  .bold {
+    font-weight: 600;
+  }
+`
+
+export const PurchaseWrapper = styled.div`
+  button {
+    border-radius: 5px;
+  }
+  margin-top: 15px;
+`

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

@@ -8,6 +8,7 @@ import { SideBar } from '../../Shared'
 import { PluginList } from '../PluginList'
 import { WebhookList } from '../WebhookList'
 import { ApiKeysList } from '../ApiKeysList'
+import { DoordashConnect } from '../DoordashConnect'
 
 import {
   IntegrationsContainer,
@@ -17,11 +18,14 @@ import {
   IconWrapper,
   SettingItemContent
 } from './styles'
+import { useTheme } from 'styled-components'
+import { LalaMoveConnect } from '../LalaMoveConnect'
 
 export const IntegrationListing = (props) => {
   const [, t] = useLanguage()
   const { search } = useLocation()
   const [events] = useEvent()
+  const theme = useTheme()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [showOption, setShowOption] = useState(null)
 
@@ -112,6 +116,28 @@ export const IntegrationListing = (props) => {
               <p>{t('APIKEYS_DESCRIPTION', 'These keys serve to obtain a direct connection to the API without the need for authentication.')}</p>
             </SettingItemContent>
           </SettingItemContainer>
+          <SettingItemContainer
+            onClick={() => handleOpenSetting('doordash')}
+          >
+            <IconWrapper>
+              <img src={theme.images.general.doordash} />
+            </IconWrapper>
+            <SettingItemContent>
+              <h5>{t('CONNECT_WITH_DOORDASH', 'Connect with Doordash')}</h5>
+              <p>{t('CONNECT_DOORDASH_DESCRIPTION', 'Send orders directly to your driver in Doordash and keep customers happy with their deliveries.')}</p>
+            </SettingItemContent>
+          </SettingItemContainer>
+          <SettingItemContainer
+            onClick={() => handleOpenSetting('lalamove')}
+          >
+            <IconWrapper>
+              <img src={theme.images.general.lalamove} />
+            </IconWrapper>
+            <SettingItemContent>
+              <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>
         </SettingListContainer>
       </IntegrationsContainer>
 
@@ -147,6 +173,18 @@ export const IntegrationListing = (props) => {
           <ApiKeysList />
         </SideBar>
       )}
+
+      {showOption === 'doordash' && (
+        <DoordashConnect
+          onClose={() => handleCloseSettings()}
+        />
+      )}
+
+      {showOption === 'lalamove' && (
+        <LalaMoveConnect
+          onClose={() => handleCloseSettings()}
+        />
+      )}
     </>
   )
 }

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

@@ -82,6 +82,10 @@ export const IconWrapper = styled.div`
     font-size: 24px;
     color: ${props => props.theme.colors.secundaryLight};
   }
+  img{
+    width: 100%;
+    height: 100%;
+  }
 `
 
 export const SettingItemContent = styled.div`

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

@@ -0,0 +1,222 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-components-admin-external'
+import { Button, IconButton } from '../../../styles'
+import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { XLg } from 'react-bootstrap-icons'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+
+import {
+  Header,
+  AllSetting,
+  Description,
+  CategoryExtraContent,
+  Container,
+  DescriptionHeader,
+  HeaderIcons,
+  LalaMoveConnectContainer,
+  SettingListConatiner,
+  Tab,
+  Paragraph,
+  PurchaseWrapper
+} from './styles'
+
+const LalaMoveConnectUI = (props) => {
+  const {
+    actionState,
+    onClose
+  } = props
+
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  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'
+      }
+    }
+  }
+
+  const handleGoToLink = (link) => {
+    window.open(link, '_blank')
+  }
+
+  useEffect(() => {
+    if (!actionState?.error) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState?.error])
+
+  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>
+          <Paragraph>
+            <h2>{t('REQUIREMENTS', 'Requirements')}</h2>
+            <p>
+              {t('LALAMOVE_CONNECT_REQUIREMENTS',
+                'For this integration to work you need: \n' +
+                '1.- LalaMove account. \n' +
+                '2.- The advanced logistics module must be active. \n' +
+                '3.- Package of Ordering.'
+              )}
+            </p>
+          </Paragraph>
+          <Paragraph>
+            <h2>{t('ARTICLE', 'Article')}</h2>
+            <p>
+              {t('LALAMOVE_CONNECT_ARTICLE', 'To connect with LalaMove, you’ll have to use plugins, put in your LalaMove credentials, connect your LalaMove account, and create a driver company inside this dashboard; follow the next article step by step and get this connected in less than 5 minutes.')}
+            </p>
+            <a onClick={() => handleGoToLink(t('LALAMOVE_CONNECT_ARTICLE_LINK', 'https://support.ordering.co/hc/en-us/articles/10673894748941'))}>
+              {t('VIEW_ARTICLE', 'View Article')}
+            </a>
+          </Paragraph>
+          <Paragraph>
+            <h2>{t('SUPPORT', 'Support')}</h2>
+            <p>
+              {t('LALAMOVE_CONNECT_SUPPORT', 'Are you having trouble connecting this?')}
+            </p>
+            <p>
+              <a onClick={() => handleGoToLink(t('LALAMOVE_CONNECT_SUPPORT_LINK', 'https://www.ordering.co/contact-ordering'))}>{t('CONTACT_US', 'Contact us')}</a>; <span>{t('WE_ARE_HAPPY_TO_HELP', 'we are happy to help.')}</span>
+            </p>
+          </Paragraph>
+          <Paragraph>
+            <h2>{t('PRICE_INSTALATION', 'Price and installation time.')}</h2>
+            <p>
+              <span className='bold'>{t('DOORDASH_CONNECT_PRICE', '$99 monthly')}</span> | {t('DOORDASH_CONNECT_INSTALLATION', 'less than 24 hrs to get it installed in your project.')}
+            </p>
+          </Paragraph>
+          <PurchaseWrapper>
+            <Button
+              outline
+              color='primary'
+              onClick={() => handleGoToLink(t('PURCHASE_INTEGRATION_LINK', 'https://www.ordering.co/ordering-sales'))}
+            >
+              {t('PURCHASE_INTEGRATION', 'Purchase Integration')}
+            </Button>
+          </PurchaseWrapper>
+        </div>
+      </CategoryExtraContent>
+    )
+  }
+
+  return (
+    <Container
+      id='catDescription'
+    >
+      <LalaMoveConnectContainer>
+        <DescriptionHeader>
+          <HeaderIcons>
+            <IconButton
+              color='black'
+              onClick={onClose}
+            >
+              <XLg />
+            </IconButton>
+          </HeaderIcons>
+        </DescriptionHeader>
+        <Header>
+          <h1>{t('CONNECT_WITH_LALAMOVE', 'Connect with Lalamove')}</h1>
+          <Button color='lightPrimary'>{t('NEW', 'New')}</Button>
+        </Header>
+        <Description>
+          {t('CONNECT_WITH_LALAMOVE_DESCRIPTION', 'If you have already worked with LalaMove or are running your business with LalaMove and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
+        </Description>
+        <AllSetting onClick={() => setSettingsOpen(true)}>
+          <span>{t('SETTINGS', 'All settings')}</span>
+          <BsArrowRight />
+        </AllSetting>
+      </LalaMoveConnectContainer>
+      {settingsOpen && (
+        <>
+          {width >= 1000 ? (
+            <LalaMoveConnectDescription />
+          ) : (
+            <>
+              <Modal
+                width='70%'
+                height='90vh'
+                open
+                padding='0px'
+                onClose={() => setSettingsOpen(false)}
+                hideCloseDefault
+              >
+                <LalaMoveConnectDescription />
+              </Modal>
+            </>
+          )}
+        </>
+      )}
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+      <Confirm
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+    </Container>
+  )
+}
+
+export const LalaMoveConnect = (props) => {
+  const apiKeysProps = {
+    ...props,
+    UIComponent: LalaMoveConnectUI
+  }
+
+  return <ApiKeysListController {...apiKeysProps} />
+}