ordering-ui-admin-external 1.0.0

package/src/styles/Switch/styles.js

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components'
+
+export const ToggleSwitchContainer = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 25px;
+  height: 14px;
+  margin-bottom: 0px;
+
+  ${({ disabled }) => disabled && css`
+    opacity: 0.6;
+    pointer-events: none;
+  `}
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + span {
+      background-color: ${props => props.theme.colors.primary};
+    }
+    &:focus + span {
+      box-shadow: 0 0 1px ${props => props.theme.colors.primary};
+    }
+    &:checked + span:before {
+      -webkit-transform: translateX(11px);
+      -ms-transform: translateX(11px);
+      transform: translateX(11px);
+    }
+  }
+`
+
+export const Slider = styled.span`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 15px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 1px;
+    bottom: 1px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+`

package/src/styles/Tabs/index.js

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components'
+
+export const Tabs = styled.div`
+  display: flex;
+  
+  ${({ variant }) => variant === 'primary' && css`
+    color: ${props => props.theme.colors.primary};
+  `}  
+`
+
+export const Tab = styled.div`
+  padding: 10px 15px;
+  cursor: pointer;
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.disabled};
+  `}
+`

package/src/styles/Toast/index.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef, useState } from 'react'
+import styled, { css } from 'styled-components'
+import { useToast, ToastType } from 'ordering-components-admin-external'
+
+const ToastContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  .toast-bar {
+    background-color: ${({ backgroundColor }) => backgroundColor};
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 9999;
+    bottom: 30px;
+    border-radius: 8px;
+    opacity: 1;
+
+    ${props => props.theme?.rtl ? css`
+      left: 30px;
+    ` : css`
+      right: 30px;
+    `}
+
+    font-size: 14px;
+    min-width: 200px;
+    max-width: 200px;
+    @media(min-width: 380px){
+      font-size: 16px;
+      min-width: 250px;
+      max-width: initial;
+    }
+  }
+`
+
+export const Toast = () => {
+  const [toastConfig, { hideToast }] = useToast()
+  const toastRef = useRef()
+
+  const [timeoutState, setTimeoutState] = useState(null)
+
+  useEffect(() => {
+    if (!toastConfig && !toastRef.current) return
+    const container = document.getElementById('toast-container')
+    const oldToast = document.querySelector('.toast-bar')
+    clearTimeout(timeoutState)
+    if (oldToast) {
+      container.removeChild(oldToast)
+    }
+    const toast = document.createElement('div')
+    toast.classList.add('toast-bar')
+    toast.innerHTML = message
+    container.appendChild(toast)
+
+    const timeout = setTimeout(() => {
+      toast.remove()
+      hideToast()
+    }, [duration])
+    setTimeoutState(timeout)
+  }, [toastConfig])
+
+  if (!toastConfig) {
+    return null
+  }
+
+  const { type, message, duration } = toastConfig
+
+  let backgroundColor = '#6ba4ff'
+
+  switch (type) {
+    case ToastType.Info:
+      backgroundColor = '#6ba4ff'
+      break
+    case ToastType.Error:
+      backgroundColor = '#D83520'
+      break
+    case ToastType.Success:
+      backgroundColor = '#73bd24'
+      break
+  }
+
+  return (
+    <ToastContainer
+      backgroundColor={backgroundColor}
+      ref={toastRef}
+      id='toast-container'
+    />
+  )
+}

package/src/styles/index.js

@@ -0,0 +1,22 @@
+import { Button, IconButton } from './Buttons'
+import { Checkbox } from './Checkbox'
+import { Input, TextArea } from './Inputs'
+import { MultiSelect } from './MultiSelect'
+import { Select as SecondSelect } from './Select'
+import { Select as DefaultSelect } from './Select/FirstSelect'
+import { Switch } from './Switch'
+import { Tabs, Tab } from './Tabs'
+
+export {
+  Button,
+  IconButton,
+  Checkbox,
+  Input,
+  MultiSelect,
+  Switch,
+  SecondSelect,
+  DefaultSelect,
+  TextArea,
+  Tabs,
+  Tab
+}

package/src/themes/origin/index.js

@@ -0,0 +1,115 @@
+import { CitySelector } from './components/CitySelector'
+import { Confirm, Alert } from './components/Confirm'
+import { DateTypeSelector } from './components/DateTypeSelector'
+import { DeadlineSettingInterface } from './components/DeadlineSettingInterface'
+import { DeadlinesTypeSelector } from './components/DeadlinesTypeSelector'
+import { DeliveryTypeSelector } from './components/DeliveryTypeSelector'
+import { DriverSelector } from './components/DriverSelector'
+import { Dropdown } from './components/Dropdown'
+import { FilterGroupList } from './components/FilterGroupList'
+import { ForgotPasswordForm } from './components/ForgotPasswordForm'
+import { GroupTypeSelector } from './components/GroupTypeSelector'
+import { Header } from './components/Header'
+import { Image } from './components/Image'
+import { LoginForm } from './components/LoginForm'
+import { LogoutButton } from './components/LogoutButton'
+import { Messages } from './components/Messages'
+import { MobileSidebarMenu } from './components/MobileSidebarMenu'
+import { Modal } from './components/Modal'
+import { NotFoundSource } from './components/NotFoundSource'
+import { NotNetworkConnectivity } from './components/NotNetworkConnectivity'
+import { OrderContentHeader } from './components/OrderContentHeader'
+import { OrderDetails } from './components/OrderDetails'
+import { OrderItemAccordion } from './components/OrderItemAccordion'
+import { OrderListing } from './components/OrderListing'
+import { OrdersDashboardControls } from './components/OrdersDashboardControls'
+import { OrdersDashboardSwitch } from './components/OrdersDashboardSwitch'
+import { OrderStatusFilterBar } from './components/OrderStatusFilterBar'
+import { OverView } from './components/OverView'
+import { PageNotFound } from './components/PageNotFound'
+import { ProductItemAccordion } from './components/ProductItemAccordion'
+import { SideMenu } from './components/SideMenu'
+import { SmallOrderItemAccordion } from './components/SmallOrderItemAccordion'
+import { SpinnerLoader } from './components/SpinnerLoader'
+import { UserPopover } from './components/UserPopover'
+import { MainOrdersManager } from './components/MainOrdersManager'
+
+import { AdminLayout } from './layouts/AdminLayout'
+
+import { ThemeContext, ThemeProvider, useTheme } from './contexts/ThemeContext'
+import { ConfigFileContext } from './contexts/ConfigFileContext'
+import { InfoShareContext, InfoShareProvider, useInfoShare } from './contexts/InfoShareContext'
+import { useOnlineStatus } from './hooks/useOnlineStatus'
+import { useWindowSize } from './hooks/useWindowSize'
+import { Button } from './styles/Buttons'
+import { Input, InputGroup, InputPrimary, InputGroupLeft, InputGroupPrimary, InputGroupRight, InputSecundary } from './styles/Inputs'
+import { Select } from './styles/Select'
+import { Tab, Tabs } from './styles/Tabs'
+
+export {
+  CitySelector,
+  Confirm,
+  Alert,
+  DateTypeSelector,
+  DeadlineSettingInterface,
+  DeadlinesTypeSelector,
+  DeliveryTypeSelector,
+  DriverSelector,
+  Dropdown,
+  FilterGroupList,
+  ForgotPasswordForm,
+  GroupTypeSelector,
+  Header,
+  Image,
+  LoginForm,
+  LogoutButton,
+  Messages,
+  MobileSidebarMenu,
+  Modal,
+  NotFoundSource,
+  NotNetworkConnectivity,
+  OrderContentHeader,
+  OrderItemAccordion,
+  OrderDetails,
+  OrderListing,
+  OrdersDashboardControls,
+  OrdersDashboardSwitch,
+  OrderStatusFilterBar,
+  OverView,
+  PageNotFound,
+  ProductItemAccordion,
+  SideMenu,
+  SmallOrderItemAccordion,
+  SpinnerLoader,
+  UserPopover,
+  MainOrdersManager,
+
+  // Contexts
+  ThemeContext,
+  ThemeProvider,
+  useTheme,
+  ConfigFileContext,
+  InfoShareContext,
+  InfoShareProvider,
+  useInfoShare,
+
+  // Hooks
+  useOnlineStatus,
+  useWindowSize,
+
+  // Styles
+  Button,
+  Input,
+  InputGroup,
+  InputPrimary,
+  InputGroupLeft,
+  InputGroupPrimary,
+  InputGroupRight,
+  InputSecundary,
+  Select,
+  Tab,
+  Tabs,
+
+  // layouts
+  AdminLayout
+}

package/src/themes/origin/src/components/AutoScroll/index.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, useLayoutEffect } from 'react'
+import { useWindowSize } from '../../hooks/useWindowSize'
+import { AutoscrollContainer } from './styles'
+import MdKeyboardArrowLeft from '@meronex/icons/md/MdKeyboardArrowLeft'
+import MdKeyboardArrowRight from '@meronex/icons/md/MdKeyboardArrowRight'
+import { useTheme } from '../../contexts/ThemeContext'
+
+export const AutoScroll = ({ children, modal, special, innerScroll }) => {
+  const { width } = useWindowSize()
+  const [parentElement, setParentElement] = useState([])
+  const [containerElement, setContainerElement] = useState([])
+  const [theme] = useTheme()
+
+  useLayoutEffect(() => {
+    const element = document?.getElementById('autoscroll')?.parentNode
+    element && element.parentNode.addEventListener('scroll', handleScroll)
+    const containerElement = element?.parentNode
+    setParentElement(element)
+    setContainerElement(containerElement)
+
+    return () => {
+      if (containerElement?.length) {
+        containerElement.removeEventListener('scroll', handleScroll)
+      }
+    }
+  })
+
+  useEffect(() => {
+    handleScroll()
+  })
+
+  const handleScroll = () => {
+    const botonRight = document.getElementById('right-autoscroll')
+    const botonLeft = document.getElementById('left-autoscroll')
+    if (botonLeft || botonRight) {
+      if (theme?.rtl) {
+        if ((containerElement?.scrollLeft * -1) < 40) {
+          botonRight && botonRight.classList.add('hidden')
+        } else {
+          botonRight && botonRight.classList.remove('hidden')
+        }
+        if ((containerElement?.scrollLeft * -1) > parentElement?.scrollWidth - containerElement?.offsetWidth - 20) {
+          botonLeft && botonLeft.classList.add('hidden')
+        } else {
+          botonLeft && botonLeft.classList.remove('hidden')
+        }
+      } else {
+        if (containerElement?.scrollLeft < 40) {
+          botonLeft && botonLeft.classList.add('hidden')
+        } else {
+          botonLeft && botonLeft.classList.remove('hidden')
+        }
+        if (containerElement?.scrollLeft > parentElement?.scrollWidth - containerElement?.offsetWidth - 20) {
+          botonRight && botonRight.classList.add('hidden')
+        } else {
+          botonRight && botonRight.classList.remove('hidden')
+        }
+      }
+    }
+  }
+
+  const scrolling = (left) => {
+    if (left) {
+      containerElement.scrollBy({
+        top: 0,
+        left: (((-parentElement.offsetWidth / 10) > -200) ? -200 : -parentElement.offsetWidth / 10),
+        behavior: 'smooth'
+      })
+    } else {
+      containerElement.scrollBy({
+        top: 0,
+        left: (((+parentElement.offsetWidth / 10) < 200) ? 200 : +parentElement.offsetWidth / 10),
+        behavior: 'smooth'
+      })
+    }
+  }
+
+  return (
+    <AutoscrollContainer modal={modal} id='autoscroll'>
+      {
+        ((!special ? width < parentElement?.offsetWidth + 50 : width < parentElement?.offsetWidth) || (!special && innerScroll ? containerElement?.offsetWidth < parentElement?.offsetWidth + 50 : containerElement?.offsetWidth < parentElement?.offsetWidth)) ? <MdKeyboardArrowLeft id='left-autoscroll' onMouseDown={() => scrolling(true)} /> : ''
+      }
+      {children}
+      {
+        ((!special ? width < parentElement?.offsetWidth + 50 : width < parentElement?.offsetWidth) || (!special && innerScroll ? containerElement?.offsetWidth < parentElement?.offsetWidth + 50 : containerElement?.offsetWidth < parentElement?.offsetWidth)) ? <MdKeyboardArrowRight id='right-autoscroll' onMouseDown={() => scrolling()} /> : ''
+      }
+    </AutoscrollContainer>
+
+  )
+}

package/src/themes/origin/src/components/AutoScroll/styles.js

@@ -0,0 +1,83 @@
+import styled, { css } from 'styled-components'
+
+export const AutoscrollContainer = styled.span`
+  display: ${props => props.modal ? 'flex' : 'inherit'};
+  width: ${props => props.modal ? '300vw' : 'initial'};
+  
+  svg{
+    background: #D9D9D9;
+    display: inline-block;
+    border-radius: 50%;
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    align-self: center;
+    top: ${props => props.modal ? '35%' : '0'};
+    position: sticky;
+    color: #000000;
+    border: 1px solid #D9D9D9;
+    opacity: 0.8;
+  }
+
+  #right-autoscroll{
+    ${props => props.theme?.rtl ? css`
+      left: 91%;
+    ` : css`
+      right: 1%;
+    `}
+  }
+  #left-autoscroll{
+    ${props => props.theme?.rtl ? css`
+      right: 91%;
+    ` : css`
+      left: 1%;
+    `}    
+  }
+  svg:active{
+    border: 0
+  }
+  svg.hidden{
+    opacity: 0;
+  }
+
+  @media (min-width: 480px){
+    #right-autoscroll{
+    ${props => props.theme?.rtl && css`
+      left: 94%;
+    `}
+   }
+    #left-autoscroll{
+      ${props => props.theme?.rtl && css`
+        right: 94%;
+      `
+      }
+    }
+  }
+
+  @media (min-width: 768px){
+    width: ${props => props.modal && '100%'};
+    display: inherit;
+    ${props => props.modal && css`
+      #left-autoscroll{
+        opacity: 0;
+      }
+      #right-autoscroll{
+        opacity: 0;
+      }
+    `}
+  }
+
+  @media (min-width: 1024px){
+    #right-autoscroll{
+    ${props => props.theme?.rtl && css`
+      left: 97%;
+    `}
+   }
+    #left-autoscroll{
+      ${props => props.theme?.rtl && css`
+        right: 97%;
+      `
+    }
+  }
+  }
+`

package/src/themes/origin/src/components/BusinessesSelector/index.js

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react'
+import {
+  useLanguage
+} from 'ordering-components-admin-external'
+import { MultiSelect } from '../../styles/MultiSelect'
+import {
+  Option,
+  OptionContent,
+  OptionName,
+  OptionCategory,
+  WrapperBusinessImage,
+  BusinessImage
+} from './styles'
+
+export const BusinessesSelector = (props) => {
+  const {
+    filterValues,
+    businessesList,
+    handleChangeBusinesses
+  } = props
+
+  const [, t] = useLanguage()
+  const [businessTypes, setBusinessTypes] = useState([])
+
+  const Placeholder = <Option>{t('SELECT_BUSINESS', 'Select business')}</Option>
+  const businessesLoading = [{ value: 'default', content: <Option>{t('BUSINESSES_LOADING', 'Businesses loading')}...</Option> }]
+
+  useEffect(() => {
+    const _businessesOptionList = []
+    if (!businessesList.loading) {
+      const _businessesOption = businessesList.businesses.map((business) => {
+        return {
+          value: business.id,
+          content: (
+            <Option>
+              <WrapperBusinessImage>
+                {business.logo && <BusinessImage bgimage={business.logo} />}
+              </WrapperBusinessImage>
+              <OptionContent>
+                <OptionName>
+                  {business.name}
+                </OptionName>
+                <OptionCategory>
+                  {business.alcohol && t('ALCOHOL', 'Alcohol')}
+                  {business.food && t('FOOD', 'Food')}
+                  {business.groceries && t('GROCERIES', 'Groceries')}
+                  {business.laundry && t('LAUNDRY', 'Laundry')}
+                </OptionCategory>
+              </OptionContent>
+            </Option>
+          )
+        }
+      })
+
+      for (const option of _businessesOption) {
+        _businessesOptionList.push(option)
+      }
+    }
+
+    setBusinessTypes(_businessesOptionList)
+  }, [businessesList])
+
+  return (
+    <>
+      {!businessesList.loading ? (
+        <MultiSelect
+          defaultValue={filterValues.businessIds}
+          placeholder={Placeholder}
+          options={businessTypes}
+          optionInnerMargin='10px'
+          optionInnerMaxHeight='150px'
+          optionBottomBorder
+          onChange={(business) => handleChangeBusinesses(business)}
+        />
+      ) : (
+        <MultiSelect
+          defaultValue='default'
+          options={businessesLoading}
+          optionInnerMargin='10px'
+          optionInnerMaxHeight='150px'
+          optionBottomBorder
+        />
+      )}
+    </>
+  )
+}

package/src/themes/origin/src/components/BusinessesSelector/styles.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  padding: 15px 10px;
+
+  img {
+    width: 45px;
+  }
+
+`
+export const OptionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const OptionName = styled.div`
+  color: #263238;
+  font-size: 16px;
+  line-height: 1.3;
+`
+export const OptionCategory = styled.div`
+  color: #263238;
+  font-size: 12px;
+  line-height: 1.3;
+`
+
+export const WrapperBusinessImage = styled.div`
+  width: 45px;
+  height: 45px;
+  border: 1px solid #E3E3E3;
+  border-radius: 10px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`
+const BusinessImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 10px;
+`
+export const BusinessImage = (props) => {
+  return (
+    <BusinessImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </BusinessImageStyled>
+  )
+}

package/src/themes/origin/src/components/CitySelector/index.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { MultiSelect } from '../../styles/MultiSelect'
+import {
+  PlaceholderTitle,
+  Option
+} from './styles'
+
+export const CitySelector = (props) => {
+  const {
+    filterValues,
+    handleChangeCity
+  } = props
+
+  const [, t] = useLanguage()
+
+  const cityTypes = [
+    { value: 1, content: <Option>{t('AUSTIN', 'Austin')}</Option> },
+    { value: 2, content: <Option>{t('NEW_YORK', 'New York')}</Option> },
+    { value: 3, content: <Option>{t('SAN_FRANCISCO', 'San Francisco')}</Option> }
+  ]
+
+  const placeholder = <PlaceholderTitle>{t('SELECT_CITY', 'Select City')}</PlaceholderTitle>
+
+  return (
+    <MultiSelect
+      placeholder={placeholder}
+      defaultValue={filterValues.cityIds}
+      options={cityTypes}
+      onChange={(city) => handleChangeCity(city)}
+    />
+  )
+}

package/src/themes/origin/src/components/CitySelector/styles.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components'
+
+export const PlaceholderTitle = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+  padding: 5px 10px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+
+  svg {
+    margin-right: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `} 
+  }
+`