ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/ProductOption/styles.js

@@ -0,0 +1,76 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  &.error {
+    background-color: orange;
+  }
+`
+
+export const WrapHeader = styled.div`
+  padding: 7px 0px;
+  margin-top: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #FFF;
+`
+
+export const TitleContainer = styled.div`
+  margin: 0px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 60%;
+  display: flex;
+  align-items: center;  
+
+  *:first-child {
+    margin-right: 8px;
+  }
+
+  @media (min-width: 576px) {
+    width: 70%;
+  }
+`
+
+export const Title = styled.h3`
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  display: flex;
+  flex-direction: column;
+  margin: 0px;
+  white-space: normal;
+  span {
+    &:not(:first-child) {
+      color: ${props => props.theme.colors.grayTextColor};
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+`
+
+export const Flag = styled.span`
+  font-size: 13px;
+  margin: 0px;
+  text-transform: capitalize;
+  color: ${props => props.required ? '#E63757' : props.theme.colors.grayTextColor};
+  font-weight: 500;
+
+  @media (min-width: 381px) {
+    font-size: 14px;
+  }
+`
+export const OptionThumbnail = styled.div`
+  display: inline-block;
+  border-radius: 8px;
+  background-image: url(${({ src }) => src});
+  background-repeat: no-repeat, repeat;
+  width: 40px;
+  height: 40px;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  justify-content: center;
+  align-items: center;
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/ProductOptionSubOption/index.js

@@ -0,0 +1,182 @@
+import React, { useState, useEffect, useRef } from 'react'
+import {
+  ProductOptionSuboption as ProductSubOptionController,
+  useUtils,
+  useLanguage
+} from 'ordering-components-external'
+import BsCircleFill from '@meronex/icons/bs/BsCircleFill'
+import BsCircleHalf from '@meronex/icons/bs/BsCircleHalf'
+import BsDashCircle from '@meronex/icons/bs/BsDashCircle'
+import BsPlusCircle from '@meronex/icons/bs/BsPlusCircle'
+
+import {
+  Container,
+  SuboptionPrice,
+  QuantityControl,
+  PositionControl,
+  IconControl,
+  Text,
+  SubOptionThumbnail,
+  LeftOptionContainer,
+  RightOptionContainer
+} from './styles'
+import MdCheckBox from '@meronex/icons/md/MdCheckBox'
+import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
+import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
+import MdRadioButtonUnchecked from '@meronex/icons/md/MdRadioButtonUnchecked'
+
+const ProductOptionSubOptionUI = (props) => {
+  const {
+    state,
+    increment,
+    decrement,
+    balance,
+    option,
+    suboption,
+    toggleSelect,
+    changePosition,
+    isSoldOut,
+    setIsScrollAvailable,
+    onChange
+  } = props
+
+  const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+  const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
+  const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+  const [showMessage, setShowMessage] = useState(false)
+  const dirtyRef = useRef(null)
+
+  const handleIncrement = (e) => {
+    e.stopPropagation()
+    increment()
+  }
+
+  const handleDecrement = (e) => {
+    e.stopPropagation()
+    decrement()
+  }
+
+  const handlePosition = (e, position) => {
+    e.stopPropagation()
+    changePosition(position)
+  }
+
+  const handleSuboptionClick = () => {
+    dirtyRef.current = true
+    toggleSelect()
+    if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1) && !state.selected) {
+      setShowMessage(true)
+    }
+  }
+
+  useEffect(() => {
+    if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1) && !state.selected)) {
+      setShowMessage(false)
+    }
+  }, [balance])
+
+  useEffect(() => {
+    if (balance === option?.max && state?.selected && dirtyRef) {
+      if (dirtyRef?.current !== null) {
+        dirtyRef.current = false
+        setIsScrollAvailable(true)
+      }
+    }
+  }, [state?.selected])
+
+  useEffect(() => {
+    if (dirtyRef?.current || !suboption?.preselected || !option?.respect_to) return
+    const newState = { ...state, selected: suboption?.preselected, quantity: state.selected ? 0 : 1 }
+    onChange(newState, suboption, option)
+  }, [suboption, dirtyRef, option])
+  return (
+    <>
+      <Container onClick={() => handleSuboptionClick()}>
+        <LeftOptionContainer>
+          <IconControl>
+            {((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
+              state?.selected ? (
+                <MdCheckBox />
+              ) : (
+                <MdCheckBoxOutlineBlank disabled />
+              )
+            ) : (
+              state?.selected ? (
+                <RiRadioButtonFill />
+              ) : (
+                <MdRadioButtonUnchecked disabled />
+              )
+            )}
+          </IconControl>
+          {suboption.image && suboption.image !== '-' && (
+            <SubOptionThumbnail src={suboption.image} />
+          )}
+          <Text>
+            <div>{suboption?.name}</div>
+          </Text>
+        </LeftOptionContainer>
+        <RightOptionContainer>
+
+          <QuantityControl>
+            {option?.allow_suboption_quantity && state?.selected && (
+              <>
+                <BsDashCircle
+                  disabled={state.quantity === 0 || isSoldOut}
+                  onClick={handleDecrement}
+                />
+                {state.quantity}
+                <BsPlusCircle
+                  disabled={disableIncrement || isSoldOut}
+                  onClick={handleIncrement}
+                />
+              </>
+            )}
+          </QuantityControl>
+          <PositionControl>
+            {
+              option?.with_half_option && state?.selected && (
+                <>
+                  <BsCircleHalf
+                    className={['reverse', state.selected && state.position === 'left' ? 'selected' : null].filter(classname => classname).join(' ')}
+                    onClick={(e) => handlePosition(e, 'left')}
+                  />
+                  <BsCircleFill
+                    className={[state.selected && state.position === 'whole' ? 'selected' : null].filter(classname => classname).join(' ')}
+                    onClick={(e) => handlePosition(e, 'whole')}
+                  />
+                  <BsCircleHalf
+                    className={[state.selected && state.position === 'right' ? 'selected' : null].filter(classname => classname).join(' ')}
+                    onClick={(e) => handlePosition(e, 'right')}
+                  />
+                </>
+              )
+            }
+          </PositionControl>
+        </RightOptionContainer>
+        <SuboptionPrice>
+          {price > 0 && (
+            <>+ {parsePrice(price)}</>
+          )}
+        </SuboptionPrice>
+      </Container>
+      {showMessage && (
+        <Text noMargin>
+          <span>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</span>
+        </Text>
+      )}
+    </>
+  )
+}
+
+export const ProductOptionSubOption = (props) => {
+  const productOptionSubOptionProps = {
+    ...props,
+    UIComponent: ProductOptionSubOptionUI,
+    isOrigin: true
+  }
+
+  return (
+    <ProductSubOptionController {...productOptionSubOptionProps} />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/ProductOptionSubOption/styles.js

@@ -0,0 +1,195 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0px;
+  cursor: pointer;
+
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+`
+
+export const IconControl = styled.div`
+  display: flex;
+  color: ${props => props.theme.colors.primary};
+  margin-right: 5px;
+  ${props => props.theme?.rtl && css`
+    margin-left: 5px;
+    margin-right: 0px;
+  `}
+  svg {
+    font-size: 24px;
+  }
+
+  svg[disabled] {
+    color: ${props => props.theme.colors.lightGray};
+  }
+`
+export const Text = styled.div`
+  flex: 1 1 auto;
+  display: flex;
+  font-weight: 300;
+  color: #555;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0 8px;
+
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    color: ${props => props.theme.colors.darkGray};
+  }
+
+  span {
+    margin-left: 10px;
+    font-weight: 500;
+    color: ${props => props.theme.colors.primary};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    ${props => props.theme?.rtl && css`
+      margin-left: 0;
+      margin-right: 10px;    
+    `}
+  }
+
+  ${({ noMargin }) => noMargin && css`
+    span {
+      margin: 0;
+    }
+  `}
+`
+
+export const SubOptionThumbnail = styled.div`
+  display: inline-block;
+  border-radius: 8px;
+  background-image: url(${({ src }) => src});
+  background-repeat: no-repeat, repeat;
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  justify-content: center;
+  align-items: center;
+`
+
+export const QuantityControl = styled.div`
+  display: flex;
+  color: ${props => props.theme.colors.darkGray};
+  align-items: center;
+  font-weight: 300;
+  font-size: 18px;
+  margin: 0 5px;
+
+  svg {
+    color: ${props => props.theme.colors.primary};
+    font-size: 20px;
+    margin-right: 6px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 6px;
+      margin-right: 0px;
+    `}
+    @media (min-width: 425px) {
+      margin-right: 3px
+      ${props => props.theme?.rtl && css`
+        margin-right: 3px;
+        margin-left: 0px;
+    `}
+    }
+  }
+
+  svg[disabled] {
+    color: #CBCBCB;
+  }
+
+  svg:last-child {
+    margin-left: 6px;
+    margin-right: 0;
+    ${props => props.theme?.rtl && css`
+      margin-right: 6px;
+      margin-left: 0px;
+  `}
+    @media (min-width: 425px) {
+      margin-left: 3px;
+      margin-right: 0;
+      ${props => props.theme?.rtl && css`
+        margin-right: 3px;
+        margin-left: 0px;
+    `}
+    }
+  }
+`
+
+export const PositionControl = styled.div`
+  display: flex;
+  align-items: center;
+  color: #CBCBCB;
+  font-weight: 300;
+  font-size: 18px;
+  margin: 0 5px;
+
+  svg {
+    font-size: 20px;
+    margin-right: 3px;
+    ${props => props.theme?.rtl && css`
+      margin-left: 3px;
+      margin-right: 0px;
+    `}
+    &.reverse {
+      transform: rotate(180deg);
+    }
+
+    &.selected {
+      color: ${props => props.theme.colors.primary};
+    }
+
+    &:last-child {
+      margin-right: 0;
+      ${props => props.theme?.rtl && css`
+        margin-left: 0;
+      `}
+    }
+  }
+`
+
+export const SuboptionPrice = styled.div`
+  display: flex;
+  white-space: nowrap;
+  font-weight: 300;
+  font-size: 14px;
+  color: ${props => props.theme.colors.darkGray};
+  margin-left: 5px;
+  min-width: 60px;
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 0px;
+  `}
+`
+
+export const LeftOptionContainer = styled.div`
+  display: flex;
+  width: 70%;
+  align-items: center;
+`
+
+export const RightOptionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 25%;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (min-width: 425px) {
+    flex-direction: row;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SelectBusinesses/index.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import { DefaultSelect as Select } from '../../../../styles'
+import {
+  SelectWrapper,
+  Option
+} from './styles'
+
+export const SelectBusinesses = (props) => {
+  const {
+    businessList,
+    selectedBusiness,
+    setSelectedBusiness
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [businessOptions, setBusinessOptions] = useState([])
+  const [searchValue, setSearchValue] = useState('')
+
+  const onChange = (val) => {
+    const findStore = businessList?.businesses.find(store => store?.slug === val)
+    setSelectedBusiness(findStore)
+    setSearchValue('')
+  }
+
+  useEffect(() => {
+    if (businessList?.loading || !businessList?.businesses) return
+    const _businessOptions = []
+    businessList.businesses.filter(business => (business?.name || '').toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())).map(business => {
+      _businessOptions.push({
+        value: business?.slug,
+        content: (
+          <Option>
+            <img src={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} alt='' />
+            <span>{business?.name}</span>
+          </Option>
+        )
+      })
+    })
+    setBusinessOptions(_businessOptions)
+  }, [businessList, searchValue])
+
+  useEffect(() => {
+    if (!selectedBusiness || businessList?.loading || !businessList?.businesses) return
+    const found = businessList.businesses.find(store => store?.slug === selectedBusiness?.slug)
+    if (!found) setSelectedBusiness(null)
+  }, [businessList, selectedBusiness])
+
+  return (
+    <SelectWrapper>
+      <p>{t('SELECT_BUSINESS', 'Select business')}</p>
+      <Select
+        placeholder={<Option>{t('SELECT_BUSINESS', 'Select business')}</Option>}
+        options={businessOptions}
+        defaultValue={selectedBusiness?.slug}
+        onChange={onChange}
+        optionInnerMaxHeight='300px'
+        isShowSearchBar
+        searchValue={searchValue}
+        handleChangeSearch={setSearchValue}
+      />
+    </SelectWrapper>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SelectBusinesses/styles.js

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components'
+
+export const SelectWrapper = styled.div`
+  margin: 50px 0 30px 0;
+
+  > p {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 11px;
+  }
+
+  .select {
+    width: 100%;
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+    font-size: 14px;
+
+    > div:first-child {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+    .list {
+      max-width: 100%;
+    }
+  }
+`
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 7.6px;
+  img {
+    min-height: 38px;
+    min-width: 38px;
+    height: 38px;
+    width: 38px;
+    border-radius: 8px;
+    object-fit: cover;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+  > span {
+    max-width: 200px;
+    font-size: 14px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  @media (min-width: 768px) {
+    > span {
+      max-width: 560px;
+    }
+  }
+`