ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,92 @@
+import styled, { css } from 'styled-components'
+
+export const HeaderItem = styled.div`
+  display: flex;
+  ${props => props.theme?.rtl ? css`
+    text-align: left;
+    ` : css`
+    text-align: right;
+  `}
+  cursor: pointer;
+  svg {
+    color: ${props => props.theme.colors?.headingColor};
+    font-size: 20px;
+  }
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+    opacity: 0.6;
+  `}
+`
+
+export const PopoverBody = styled.div`
+  position: absolute;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  padding: 15px 0px;
+  border-radius: 10px;
+  max-width: 250px;
+  z-index: 1001;
+  border: 1px solid #E9ECEF;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+  ` : css`
+    right: 0px;
+  `}
+
+  > button {
+    width: calc(100% - 20px);
+    margin: 5px 10px 0 10px;
+  }
+`
+
+export const Title = styled.div`
+  color: ${props => props.theme.colors.headingColor};
+  font-size: 14px;
+  padding: 0 10px;
+`
+
+export const PopoverList = styled.div`
+`
+
+export const CopyItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 7px 10px;
+  cursor: pointer;
+
+  svg {
+    font-size: 24px;
+    color: ${props => props.theme.colors?.headingColor};
+  }
+  span {
+    color: ${props => props.theme.colors?.lightGray};
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 400;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 10px;
+      ` : css`
+      margin-left: 10px;
+    `}
+  }
+
+  ${({ isChecked }) => isChecked && css`
+    svg {
+      color: ${props => props.theme.colors?.primary};
+    }
+  `}
+
+  &:hover {
+    background-color: ${props => props.theme.colors.borderColor};
+  }
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+    svg {
+      opacity: 0.5;
+      color: ${props => props.theme.colors?.primary};
+    }
+  `}
+`

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

@@ -0,0 +1,54 @@
+import React, { useRef, useEffect } from 'react'
+import { SearchContainer } from './styles'
+import IosSearch from '@meronex/icons/ios/IosSearch'
+
+export const SearchBar = (props) => {
+  const {
+    onSearch,
+    search,
+    placeholder,
+    isCustomLayout,
+    lazyLoad,
+    customClass
+  } = props
+  let timeout = null
+  let previousSearch
+  const el = useRef()
+
+  const onChangeSearch = (e) => {
+    clearTimeout(timeout)
+
+    timeout = setTimeout(function () {
+      onSearch(e.target.value)
+    }, 750)
+
+    if (previousSearch !== e.target.value) {
+      if (!lazyLoad) {
+        onSearch(e.target.value)
+      } else {
+        clearTimeout(timeout)
+        timeout = setTimeout(function () {
+          onSearch(e.target.value)
+        }, 750)
+      }
+    }
+    previousSearch = e.target.value
+  }
+
+  useEffect(() => {
+    el.current.onkeyup = onChangeSearch
+  }, [])
+
+  useEffect(() => {
+    if (!search) {
+      el.current.value = ''
+    }
+  }, [search])
+
+  return (
+    <SearchContainer isCustomLayout={isCustomLayout} className={customClass || ''}>
+      <IosSearch />
+      <input type='text' ref={el} name='search' placeholder={placeholder} autoComplete='off' />
+    </SearchContainer>
+  )
+}

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

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components'
+
+export const SearchContainer = styled.div`
+  position: relative;
+
+  svg {
+    position: absolute;
+    top: 10px;
+    ${props => props.theme?.rtl ? css`
+      right: 15px;
+    ` : css`
+      left: 15px;
+    `}
+    font-size: 20px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+
+  > input {
+    width: 250px;
+    border: 1px solid ${props => props.theme.colors.borderColor} !important;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    border-radius: 22px;
+    outline: none;
+    padding: 10px 8px;
+    ${props => props.theme?.rtl ? css`
+      padding-right: 40px;
+    ` : css`
+      padding-left: 40px;
+    `}
+    font-size: 14px;
+    color: ${props => props.theme.colors.headingColor};
+
+    &::placeholder {
+      color: #909BA9;
+    }
+  }
+
+  ${({ isCustomLayout }) => isCustomLayout && css`
+    input {
+      border-radius: 8px;
+      width: 100%;
+      padding: 10px 15px;
+    }
+
+    svg {
+      ${props => props.theme?.rtl ? css`
+        right: initial;
+        left: 10px;
+      ` : css`
+        left: initial;
+        right: 10px;
+      `}
+    }
+  `}
+
+  @media (max-width: 1200px) {
+    flex: 1;
+
+    input {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+`

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

@@ -0,0 +1,161 @@
+import React, { useState, useRef } from 'react'
+import {
+  useApi,
+  BusinessProductsListing as BusinessProductsListingController
+} from 'ordering-components-external'
+import GoTriangleDown from '@meronex/icons/go/GoTriangleDown'
+import { Checkbox } from '../../../styles'
+import Skeleton from 'react-loading-skeleton'
+
+import {
+  Container,
+  AccordionSection,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  SkeletonWrapper
+} from './styles'
+
+const CategoryTreeNode = (props) => {
+  const {
+    category,
+    index,
+    selectedCategoryIds,
+    setSelectedCategoryIds,
+    include
+  } = props
+
+  const content = useRef(null)
+  const checkboxRef = useRef(null)
+  const categoryRef = useRef(null)
+
+  const [setActive, setActiveState] = useState('')
+  const [setRotate, setRotateState] = useState('accordion__icon')
+
+  const toggleAccordion = (e) => {
+    const isActionsClick = categoryRef.current?.contains(e.target) || checkboxRef.current?.contains(e.target)
+    if (isActionsClick) return
+    setActiveState(setActive === '' ? 'active' : '')
+    setRotateState(
+      setActive === 'active' ? 'accordion__icon' : 'accordion__icon rotate'
+    )
+  }
+
+  const handleChangeSelectCategory = (include) => {
+    let categoryIds = []
+    if (category?.subcategories?.length > 0) {
+      category.subcategories.forEach(function iterate (category) {
+        categoryIds = [...categoryIds, category.id]
+        Array.isArray(category?.subcategories) && category.subcategories.forEach(iterate)
+      })
+    }
+    let _selectedCaetegoryIds = {}
+    if (selectedCategoryIds[category.id] && selectedCategoryIds[category.id].include === include) {
+      _selectedCaetegoryIds = { ...selectedCategoryIds }
+      delete _selectedCaetegoryIds[category.id]
+    } else {
+      _selectedCaetegoryIds = {
+        ...selectedCategoryIds
+      }
+      _selectedCaetegoryIds[category.id] = { id: category.id, include }
+      categoryIds.forEach(id => {
+        _selectedCaetegoryIds[id] = { id: id, include }
+      })
+    }
+    setSelectedCategoryIds(_selectedCaetegoryIds)
+  }
+
+  return (
+    <AccordionSection>
+      <Accordion
+        onClick={(e) => toggleAccordion(e, category.id)}
+      >
+        <AccordionItem
+          margin={20 * index}
+        >
+          <GoTriangleDown className={setRotate} />
+          <div>
+            <Checkbox
+              ref={categoryRef}
+              checked={!!selectedCategoryIds[category.id] && selectedCategoryIds[category.id].include === include}
+              onChange={e => handleChangeSelectCategory(include)}
+            />
+            <span>{category.name}</span>
+          </div>
+        </AccordionItem>
+      </Accordion>
+      <AccordionContent
+        ref={content}
+        style={{
+          maxHeight: !setActive && '0px'
+        }}
+      >
+        {(category?.subcategories && category?.subcategories?.length > 0) && (
+          category.subcategories.map(subCategory => (
+            <CategoryTreeNode
+              {...props}
+              key={subCategory.id}
+              category={subCategory}
+              index={index + 1}
+            />
+          ))
+        )}
+      </AccordionContent>
+    </AccordionSection>
+  )
+}
+
+const SelectBusinessCategoriesUI = (props) => {
+  const {
+    businessState,
+    selectedCategoryIds,
+    setSelectedCategoryIds,
+    include
+  } = props
+
+  return (
+    <Container>
+      {businessState?.loading ? (
+        <>
+          {[...Array(10).keys()].map(i => (
+            <SkeletonWrapper key={i}>
+              <Skeleton width={16} height={16} />
+              <Skeleton width={16} height={16} />
+              <Skeleton width={120} height={20} />
+            </SkeletonWrapper>
+          ))}
+        </>
+      ) : (
+        businessState.business?.categories.sort((a, b) => a.rank - b.rank).map(category => (
+          <CategoryTreeNode
+            key={category.id}
+            index={0}
+            category={category}
+            selectedCategoryIds={selectedCategoryIds}
+            setSelectedCategoryIds={setSelectedCategoryIds}
+            include={include}
+          />
+        ))
+      )}
+    </Container>
+  )
+}
+
+export const SelectBusinessCategories = (props) => {
+  const [ordering] = useApi()
+  const [isInitialRender, setIsInitialRender] = useState(false)
+
+  const businessProductslistingProps = {
+    ...props,
+    ordering,
+    UIComponent: SelectBusinessCategoriesUI,
+    isInitialRender,
+    isAllCategoryProducts: true,
+    isSearchByName: true,
+    isSearchByDescription: true,
+    handleUpdateInitialRender: (val) => setIsInitialRender(val)
+  }
+  return (
+    <BusinessProductsListingController {...businessProductslistingProps} />
+  )
+}

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

@@ -0,0 +1,91 @@
+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 SkeletonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+
+  > * {
+    &:not(:first-child) {
+      margin: 0 5px;
+    }
+  }
+`

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

@@ -0,0 +1,243 @@
+import React, { useState, useRef, useEffect } from 'react'
+import {
+  useUtils,
+  useApi,
+  BusinessProductsListing as BusinessProductsListingController
+} from 'ordering-components-external'
+import GoTriangleDown from '@meronex/icons/go/GoTriangleDown'
+import { Checkbox } from '../../../styles'
+import Skeleton from 'react-loading-skeleton'
+import { useTheme } from 'styled-components'
+
+import {
+  Container,
+  AccordionSection,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  WrapperImage,
+  Image,
+  SkeletonWrapper
+} from './styles'
+
+const CategoryTreeNode = (props) => {
+  const {
+    category,
+    index,
+    selectedProductsIds,
+    setSelectedProductsIds,
+    include,
+    subCategoriesList
+  } = props
+
+  const [{ optimizeImage }] = useUtils()
+  const theme = useTheme()
+
+  const content = useRef(null)
+  const checkboxRef = useRef(null)
+  const categoryRef = useRef(null)
+
+  const [setActive, setActiveState] = useState('')
+  const [setRotate, setRotateState] = useState('accordion__icon')
+
+  const toggleAccordion = (e) => {
+    const isActionsClick = categoryRef.current?.contains(e.target) || checkboxRef.current?.contains(e.target)
+    if (isActionsClick) return
+    setActiveState(setActive === '' ? 'active' : '')
+    setRotateState(
+      setActive === 'active' ? 'accordion__icon' : 'accordion__icon rotate'
+    )
+  }
+
+  const isCheckedCategory = () => {
+    if (category?.products) {
+      const productsIds = category.products?.filter(product => product?.enabled).reduce((ids, product) => [...ids, product.id], [])
+      return productsIds.every(id => !!selectedProductsIds[id] && selectedProductsIds[id].include === include)
+    } else {
+      return false
+    }
+  }
+
+  const handleClickProduct = (product, include) => {
+    if (!!selectedProductsIds[product.id] && selectedProductsIds[product.id].include === include) {
+      const _selectedProductsIds = { ...selectedProductsIds }
+      delete _selectedProductsIds[product.id]
+      setSelectedProductsIds(_selectedProductsIds)
+    } else {
+      setSelectedProductsIds({ ...selectedProductsIds, [product.id]: { id: product.id, include: include } })
+    }
+  }
+
+  const handleChangeSelectCategory = (include) => {
+    const productsIds = category.products?.filter(product => product?.enabled).reduce((ids, product) => [...ids, product.id], [])
+    const everyContain = productsIds.every(id => !!selectedProductsIds[id] && selectedProductsIds[id].include === include)
+    let _selectedProductsIds = {}
+    _selectedProductsIds = {
+      ...selectedProductsIds
+    }
+    if (!everyContain) {
+      productsIds.forEach(id => {
+        _selectedProductsIds[id] = { id: id, include }
+      })
+      setSelectedProductsIds(_selectedProductsIds)
+    } else {
+      const _keys = Object.keys(selectedProductsIds)?.reduce((ids, id) => {
+        ids.push(parseInt(id))
+        return ids
+      }, [])
+      const _keysFiltered = _keys.filter(id => productsIds.includes(id))
+      _keysFiltered.forEach(id => delete _selectedProductsIds[id])
+      setSelectedProductsIds(_selectedProductsIds)
+    }
+  }
+
+  return (
+    <>
+      {subCategoriesList.find(_category => _category.id === category.id)?.productIds?.length > 0 && (
+        <AccordionSection>
+          <Accordion
+            onClick={(e) => toggleAccordion(e, category.id)}
+          >
+            <AccordionItem
+              margin={20 * index}
+            >
+              <GoTriangleDown className={setRotate} />
+              <div>
+                <Checkbox
+                  ref={categoryRef}
+                  checked={isCheckedCategory()}
+                  onChange={() => handleChangeSelectCategory(include)}
+                />
+                <span>{category.name}</span>
+              </div>
+            </AccordionItem>
+          </Accordion>
+          <AccordionContent
+            ref={content}
+            style={{
+              maxHeight: !setActive && '0px'
+            }}
+          >
+            {category?.products.filter(product => product?.enabled).map(product => (
+              <AccordionItem
+                key={product.id}
+                margin={20 * (index + 1)}
+                isProduct
+              >
+                <div>
+                  <Checkbox
+                    ref={checkboxRef}
+                    checked={!!selectedProductsIds[product.id] && selectedProductsIds[product.id].include === include}
+                    onChange={() => handleClickProduct(product, include)}
+                  />
+                  <WrapperImage>
+                    <Image bgimage={optimizeImage(product?.images || theme.images?.dummies?.product, 'h_50,c_limit')} />
+                  </WrapperImage>
+                  <span>{product.name}</span>
+                </div>
+              </AccordionItem>
+            ))}
+            {(category?.subcategories && category?.subcategories?.length > 0) && (
+              category.subcategories.map(subCategory => (
+                <CategoryTreeNode
+                  {...props}
+                  key={subCategory.id}
+                  category={subCategory}
+                  index={index + 1}
+                />
+              ))
+            )}
+          </AccordionContent>
+        </AccordionSection>
+      )}
+    </>
+  )
+}
+
+const SelectBusinessProductsUI = (props) => {
+  const {
+    businessState,
+    selectedProductsIds,
+    setSelectedProductsIds,
+    include
+  } = props
+
+  const [subCategoriesList, setSubCategoriesList] = useState([])
+
+  useEffect(() => {
+    if (businessState.loading) return
+    const _subCategoriesList = []
+    const iterateCategories = (categories) => {
+      return (
+        categories?.length > 0 && categories?.forEach(category => {
+          let productIds = []
+          const _productIds = category.products?.reduce((ids, product) => [...ids, product.id], [])
+          productIds = [...productIds, ..._productIds]
+          if (category?.subcategories?.length) {
+            category.subcategories.forEach(function iterate (category) {
+              const _productIds = category.products?.reduce((ids, product) => [...ids, product.id], [])
+              productIds = [...productIds, ..._productIds]
+              Array.isArray(category?.subcategories) && category.subcategories.forEach(iterate)
+            })
+          }
+
+          _subCategoriesList.push({
+            id: category.id,
+            name: category.name,
+            productIds: productIds
+          })
+          iterateCategories(category.subcategories)
+        })
+      )
+    }
+    iterateCategories(businessState.business?.categories)
+    setSubCategoriesList(_subCategoriesList)
+  }, [businessState.business?.categories])
+
+  return (
+    <Container>
+      {businessState?.loading ? (
+        <>
+          {[...Array(10).keys()].map(i => (
+            <SkeletonWrapper key={i}>
+              <Skeleton width={16} height={16} />
+              <Skeleton width={16} height={16} />
+              <Skeleton width={120} height={20} />
+            </SkeletonWrapper>
+          ))}
+        </>
+      ) : (
+        businessState.business?.categories?.filter(category => category?.enabled).sort((a, b) => a.rank - b.rank).map(category => (
+          <CategoryTreeNode
+            subCategoriesList={subCategoriesList}
+            key={category.id}
+            index={0}
+            category={category}
+            selectedProductsIds={selectedProductsIds}
+            setSelectedProductsIds={setSelectedProductsIds}
+            include={include}
+          />
+        ))
+      )}
+    </Container>
+  )
+}
+
+export const SelectBusinessProducts = (props) => {
+  const [ordering] = useApi()
+  const [isInitialRender, setIsInitialRender] = useState(false)
+
+  const businessProductslistingProps = {
+    ...props,
+    ordering,
+    UIComponent: SelectBusinessProductsUI,
+    isInitialRender,
+    isAllCategoryProducts: true,
+    isSearchByName: true,
+    isSearchByDescription: true,
+    handleUpdateInitialRender: (val) => setIsInitialRender(val)
+  }
+  return (
+    <BusinessProductsListingController {...businessProductslistingProps} />
+  )
+}