ordering-ui-external 1.8.8 → 1.8.10

package/src/themes/callcenterOriginal/src/components/Shared/SelectBusinessProducts/styles.js

@@ -0,0 +1,124 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+`
+
+export const AccordionSection = styled.div`
+`
+
+const AccordionStyled = styled.div`
+  cursor: pointer;
+  transition: background-color 0.6s ease;
+
+  .rotate {
+    transform: rotate(180deg);
+  }
+
+  .accordion__icon {
+    transition: transform 0.6s ease;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 14px;
+    ` : css`
+      margin-right: 14px;
+    `}
+  }
+
+  @media (min-width: 411px){
+    flex-direction: row;
+  }
+`
+
+export const Accordion = (props) => {
+  const style = {}
+  return (
+    <AccordionStyled
+      {...props}
+      style={style}
+    >
+      {props.children}
+    </AccordionStyled>
+  )
+}
+
+export const AccordionItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+
+  > div {
+    display: flex;
+    align-items: center;
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+      margin: 0 12px;
+    }
+  }
+
+  ${({ isProduct }) => isProduct && css`
+    > div {
+      span {
+        font-weight: 400;
+      }
+    }
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-right: ${({ margin }) => `${margin}px` || '0px'};
+  ` : css`
+    margin-left: ${({ margin }) => `${margin}px` || '0px'};
+  `}
+`
+
+export const AccordionContent = styled.div`
+  overflow: hidden;
+  transition: max-height 0.6s ease;
+  width: 100%;
+`
+
+export const WrapperImage = styled.div`
+  max-width: 38px;
+  max-height: 38px;
+  height: 38px;
+  width: 38px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  margin: 0 10px;
+`
+
+const ImageStyled = 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: 8px;
+`
+
+export const Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}
+export const SkeletonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+
+  > * {
+    &:not(:first-child) {
+      margin: 0 5px;
+    }
+  }
+`

package/src/themes/callcenterOriginal/src/components/Shared/SelectBusinesses/index.js

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import { Checkbox, Button } from '../../../styles'
+import { SearchBar } from '../SearchBar'
+import Skeleton from 'react-loading-skeleton'
+
+import {
+  Container,
+  SearchBarWrapper,
+  ButtonGroup,
+  BusinessesContainer,
+  BusinessWrapper,
+  WrapperImage,
+  Image
+} from './styles'
+
+export const SelectBusinesses = (props) => {
+  const {
+    isSkeleton,
+    isAddMode,
+    isDisabled,
+    allBusinesses,
+    handleSelectBusiness,
+    selectedBusinessIds,
+    handleSelectAllBusinesses,
+    handleSelectNoneBusinesses,
+    handleUpdateClick,
+    handleAddClick
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const [searchValue, setSearchValue] = useState(null)
+  const [filteredBusinesses, setFilteredBusinesses] = useState([])
+
+  useEffect(() => {
+    let _filteredBusinesses = []
+    if (searchValue) {
+      _filteredBusinesses = allBusinesses.filter(business => business?.name?.toLowerCase().includes(searchValue?.toLowerCase()))
+    } else {
+      _filteredBusinesses = [...allBusinesses]
+    }
+    setFilteredBusinesses(_filteredBusinesses)
+  }, [searchValue, allBusinesses])
+
+  return (
+    <Container>
+      <SearchBarWrapper>
+        <SearchBar
+          placeholder={t('SEARCH', 'Search')}
+          isCustomLayout
+          search={searchValue}
+          onSearch={val => setSearchValue(val)}
+        />
+      </SearchBarWrapper>
+      <ButtonGroup>
+        <Button
+          color='secundaryDark'
+          onClick={() => handleSelectAllBusinesses()}
+        >
+          {t('SELECT_ALL', 'Select all')}
+        </Button>
+        <Button
+          color='secundaryDark'
+          onClick={() => handleSelectNoneBusinesses()}
+        >
+          {t('SELECT_NONE', 'Select none')}
+        </Button>
+      </ButtonGroup>
+      <BusinessesContainer>
+        {isSkeleton ? (
+          [...Array(10).keys()].map(i => (
+            <BusinessWrapper key={i}>
+              <Skeleton width={20} height={20} />
+              <WrapperImage isSkeleton>
+                <Skeleton width={40} height={40} />
+              </WrapperImage>
+              <p><Skeleton width={100} /></p>
+            </BusinessWrapper>
+          ))
+        ) : (
+          filteredBusinesses.map(business => (
+            <BusinessWrapper
+              key={business.id}
+            >
+              <Checkbox
+                checked={selectedBusinessIds.includes(business.id)}
+                onChange={e => handleSelectBusiness(business.id, e.target.checked)}
+              />
+              <WrapperImage>
+                <Image bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} />
+              </WrapperImage>
+              <p>{business?.name}</p>
+            </BusinessWrapper>
+          ))
+        )}
+      </BusinessesContainer>
+      <Button
+        borderRadius='8px'
+        color='primary'
+        disabled={isDisabled}
+        onClick={() => {
+          isAddMode ? handleAddClick() : handleUpdateClick()
+        }}
+      >
+        {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
+      </Button>
+    </Container>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Shared/SelectBusinesses/styles.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin-top: 27px;
+  height: calc(100% - 130px);
+
+  > button {
+    position: sticky;
+    top: 100%;
+    height: 44px;
+  }
+`
+export const SearchBarWrapper = styled.div`
+  margin-bottom: 15px;
+`
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 17px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 16px;
+    ` : css`
+      margin-right: 16px;
+    `}
+  }
+`
+export const BusinessesContainer = styled.div`
+  height: calc(100% - 180px);
+  overflow: auto;
+`
+
+export const BusinessWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 15px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+
+  p {
+    margin: 0px;
+    font-size: 12px;
+  }
+`
+
+export const WrapperImage = styled.div`
+  max-width: 40px;
+  max-height: 40px;
+  height: 40px;
+  width: 40px;
+  ${({ isSkeleton }) => !isSkeleton && css`
+    border: 1px solid #E3E3E3;
+  `}
+  border-radius: 8px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  margin: 0 10px;
+`
+
+const ImageStyled = 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: 8px;
+`
+
+export const Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Shared/SelectLoyaltyLevels/index.js

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, PointsWalletLevels as PointsWalletLevelsController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { SearchBar } from '../SearchBar'
+import { Button, Checkbox } from '../../../styles'
+
+import {
+  Container,
+  SearchBarWrapper,
+  ButtonGroup,
+  LevelItem
+} from './styles'
+
+const SelectLoyaltyLevelsUI = (props) => {
+  const {
+    levelList,
+
+    isAddMode,
+    isDisabled,
+    handleAddPromotion,
+    handleUpdateClick,
+
+    selectedLoyaltyLevelIds,
+    handleSelectLoyaltyLevel,
+    handleSelectAllLoyaltyLevels
+  } = props
+  const [, t] = useLanguage()
+  const [searchValue, setSearchValue] = useState(null)
+  const [filteredLevels, setFilteredLevels] = useState([])
+
+  useEffect(() => {
+    if (levelList.loading) return
+    let _filteredLevels = []
+    if (searchValue) {
+      _filteredLevels = levelList.levels.filter(level => level?.name?.toLowerCase().includes(searchValue?.toLowerCase()))
+    } else {
+      _filteredLevels = [...levelList.levels]
+    }
+    setFilteredLevels(_filteredLevels)
+  }, [searchValue, levelList])
+
+  return (
+    <Container>
+      <SearchBarWrapper>
+        <SearchBar
+          placeholder={t('SEARCH', 'Search')}
+          isCustomLayout
+          search={searchValue}
+          onSearch={val => setSearchValue(val)}
+        />
+      </SearchBarWrapper>
+      <ButtonGroup>
+        <Button
+          color='secundaryDark'
+          onClick={() => handleSelectAllLoyaltyLevels(filteredLevels.reduce((ids, level) => [...ids, level.id], []))}
+        >
+          {t('SELECT_ALL', 'Select all')}
+        </Button>
+        <Button
+          color='secundaryDark'
+          onClick={() => handleSelectAllLoyaltyLevels([])}
+        >
+          {t('SELECT_NONE', 'Select none')}
+        </Button>
+      </ButtonGroup>
+      {levelList.loading ? (
+        [...Array(10).keys()].map(i => (
+          <LevelItem key={i}>
+            <Skeleton width={18} height={18} />
+            <span className='name'>
+              <Skeleton width={100} />
+            </span>
+          </LevelItem>
+        ))
+      ) : (
+        filteredLevels.map(level => (
+          <LevelItem key={level.id}>
+            <Checkbox
+              checked={selectedLoyaltyLevelIds.includes(level.id)}
+              onChange={e => handleSelectLoyaltyLevel(e.target.checked, level.id)}
+            />
+            <span className='name'>{level.name}</span>
+          </LevelItem>
+        ))
+      )}
+      <Button
+        borderRadius='8px'
+        color='primary'
+        disabled={isDisabled}
+        onClick={() => {
+          isAddMode ? handleAddPromotion() : handleUpdateClick()
+        }}
+      >
+        {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
+      </Button>
+    </Container>
+  )
+}
+
+export const SelectLoyaltyLevels = (props) => {
+  const levelsProps = {
+    ...props,
+    UIComponent: SelectLoyaltyLevelsUI
+  }
+  return <PointsWalletLevelsController {...levelsProps} />
+}

package/src/themes/callcenterOriginal/src/components/Shared/SelectLoyaltyLevels/styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin-top: 27px;
+
+  > button {
+    height: 44px;
+    margin-top: 20px;
+  }
+`
+export const SearchBarWrapper = styled.div`
+  margin-bottom: 15px;
+`
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 17px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 16px;
+    ` : css`
+      margin-right: 16px;
+    `}
+  }
+`
+export const LevelItem = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  padding: 15px 0;
+
+  span {
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 14px;
+    ` : css`
+      margin-left: 14px;
+    `}
+  }
+`

package/src/themes/callcenterOriginal/src/components/Shared/SelectSites/index.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { Button, Checkbox } from '../../../styles'
+import { SearchBar } from '../SearchBar'
+
+import {
+  ChannelsContainer,
+  SearchBarWrapper,
+  ButtonGroup,
+  ChannelItem
+} from './styles'
+
+export const SelectSites = (props) => {
+  const {
+    isAddMode,
+    isDisabled,
+    selectedSitesIds,
+    allSites,
+    handleSelectSite,
+    handleSelectAllSites,
+    handleSelectNoneSites,
+    handleUpdateClick,
+    handleAddClick
+  } = props
+
+  const [, t] = useLanguage()
+  const [searchValue, setSearchValue] = useState(null)
+  const [filteredSites, setFilteredSites] = useState([])
+
+  useEffect(() => {
+    let _filteredSites = []
+    if (searchValue) {
+      _filteredSites = allSites.filter(site => site?.name?.toLowerCase().includes(searchValue?.toLowerCase()))
+    } else {
+      _filteredSites = [...allSites]
+    }
+    setFilteredSites(_filteredSites)
+  }, [searchValue])
+
+  return (
+    <ChannelsContainer>
+      <SearchBarWrapper>
+        <SearchBar
+          placeholder={t('SEARCH', 'Search')}
+          isCustomLayout
+          search={searchValue}
+          onSearch={val => setSearchValue(val)}
+        />
+      </SearchBarWrapper>
+      <ButtonGroup>
+        <Button
+          color='secundaryDark'
+          onClick={() => handleSelectAllSites()}
+        >
+          {t('SELECT_ALL', 'Select all')}
+        </Button>
+        <Button
+          color='secundaryDark'
+          onClick={() => handleSelectNoneSites()}
+        >
+          {t('SELECT_NONE', 'Select none')}
+        </Button>
+      </ButtonGroup>
+      {filteredSites.map(site => (
+        <ChannelItem
+          key={site.id}
+        >
+          <Checkbox
+            checked={selectedSitesIds.includes(site.id)}
+            onChange={(e) => handleSelectSite(e.target.checked, site.id)}
+          />
+          <span>{site.name}</span>
+        </ChannelItem>
+      ))}
+
+      <Button
+        borderRadius='8px'
+        color='primary'
+        disabled={isDisabled}
+        onClick={() => {
+          isAddMode ? handleAddClick() : handleUpdateClick()
+        }}
+      >
+        {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
+      </Button>
+    </ChannelsContainer>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Shared/SelectSites/styles.js

@@ -0,0 +1,44 @@
+import styled, { css } from 'styled-components'
+
+export const ChannelsContainer = styled.div`
+  margin-top: 27px;
+  height: calc(100% - 130px);
+  overflow: auto;
+
+  > button {
+    position: sticky;
+    top: 100%;
+    height: 44px;
+  }
+`
+export const SearchBarWrapper = styled.div`
+  margin-bottom: 15px;
+`
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 17px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 16px;
+    ` : css`
+      margin-right: 16px;
+    `}
+  }
+`
+export const ChannelItem = styled.div`
+  padding: 15px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  display: flex;
+  align-items: center;
+
+  span {
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 14px;
+    ` : css`
+      margin-left: 14px;
+    `}
+  }
+`