ordering-ui-admin-external 1.8.5 → 1.10.0

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

@@ -0,0 +1,366 @@
+import styled, { css } from 'styled-components'
+
+export const ItsaCheckmateContainer = 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;
+
+  div.sub-header {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  div.menu-item {
+    display: flex;
+    align-items: center;
+    svg {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 8px;
+      ` : css`
+        margin-right: 8px;
+      `}
+    }
+    > p {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      margin: 0px;
+    }
+  }
+
+  @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/PickerExpress/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,
+  PickerExpressContainer,
+  SettingListConatiner,
+  Tab,
+  Paragraph,
+  PurchaseWrapper
+} from './styles'
+
+const PickerExpressUI = (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('PICKER_EXPRESS_CONNECT_REQUIREMENTS',
+                'For this integration to work you need: \n' +
+                '1.- Picker Express 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('PICKER_EXPRESS_CONNECT_ARTICLE', 'To connect with Picker Express, you’ll have to use plugins, put in your Picker Express credentials, connect your Picker Express 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('PICKER_EXPRESS_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('PICKER_EXPRESS_CONNECT_SUPPORT', 'Are you having trouble connecting this?')}
+            </p>
+            <p>
+              <a onClick={() => handleGoToLink(t('PICKER_EXPRESS_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('PICKER_EXPRESS_CONNECT_PRICE', '$99 monthly')}</span> | {t('PICKER_EXPRESS_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'
+    >
+      <PickerExpressContainer>
+        <DescriptionHeader>
+          <HeaderIcons>
+            <IconButton
+              color='black'
+              onClick={onClose}
+            >
+              <XLg />
+            </IconButton>
+          </HeaderIcons>
+        </DescriptionHeader>
+        <Header>
+          <h1>{t('CONNECT_WITH_PICKER_EXPRESS', 'Connect with Picker Express')}</h1>
+          <Button color='lightPrimary'>{t('NEW', 'New')}</Button>
+        </Header>
+        <Description>
+          {t('CONNECT_WITH_PICKER_EXPRESS_DESCRIPTION', 'If you have already worked with Pickerexpress or are running your business with Pickerexpress 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>
+      </PickerExpressContainer>
+      {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 PickerExpress = (props) => {
+  const apiKeysProps = {
+    ...props,
+    UIComponent: PickerExpressUI
+  }
+
+  return <ApiKeysListController {...apiKeysProps} />
+}