ordering-ui-external 1.8.7 → 1.8.9

package/src/themes/callcenterOriginal/src/components/Orders/ProductItemAccordion/index.js

@@ -0,0 +1,298 @@
+import React, { useState, useRef } from 'react'
+import TiPencil from '@meronex/icons/ti/TiPencil'
+import IosArrowUp from '@meronex/icons/ios/IosArrowUp'
+import VscTrash from '@meronex/icons/vsc/VscTrash'
+import { useUtils, useLanguage, useOrder } from 'ordering-components-external'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+
+import {
+  AccordionSection,
+  Accordion,
+  AccordionContent,
+  WrapperProductImage,
+  ProductImage,
+  ContentInfo,
+  ProductComment,
+  ProductInfo,
+  ProductError,
+  ProductActions,
+  ProductActionsEdit,
+  ProductActionsDelete,
+  ProductPriceSection,
+  ProductPrice,
+  ProductNotAvailable,
+  ProductSelect,
+  ProductOptionsList,
+  ProductQuantity
+} from './styles'
+
+export const ProductItemAccordion = (props) => {
+  const {
+    isCartProduct,
+    product,
+    changeQuantity,
+    getProductMax,
+    offsetDisabled,
+    onDeleteProduct,
+    onEditProduct,
+    currency
+  } = props
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+  const [{ parsePrice, optimizeImage }] = useUtils()
+  const windowSize = useWindowSize()
+
+  const [setActive, setActiveState] = useState('active')
+  const [setHeight, setHeightState] = useState('0px')
+  const [setRotate, setRotateState] = useState('accordion__icon rotate')
+
+  const content = useRef(null)
+  const productSelect = useRef(null)
+  const productActionsEdit = useRef(null)
+  const productActionsDelete = useRef(null)
+
+  const productInfo = () => {
+    if (isCartProduct) {
+      const ingredients = JSON.parse(JSON.stringify(Object.values(product.ingredients ?? {})))
+      let options = JSON.parse(JSON.stringify(Object.values(product.options ?? {})))
+
+      options = options.map(option => {
+        option.suboptions = Object.values(option.suboptions ?? {})
+        return option
+      })
+      return {
+        ...productInfo,
+        ingredients,
+        options
+      }
+    }
+    return product
+  }
+
+  const toggleAccordion = (e) => {
+    const isActionsClick = productSelect.current?.contains(e.target) || productActionsEdit.current?.contains(e.target) || productActionsDelete.current?.contains(e.target)
+    if ((!product?.valid_menu && isCartProduct) || isActionsClick) return
+    setActiveState(setActive === '' ? 'active' : '')
+    setHeightState(
+      setActive === 'active' ? `${content.current.scrollHeight}px` : '0px'
+    )
+    setRotateState(
+      setActive === 'active' ? 'accordion__icon' : 'accordion__icon rotate'
+    )
+  }
+
+  const handleChangeQuantity = (value) => {
+    if (parseInt(value) === 0) {
+      onDeleteProduct(product)
+    } else {
+      changeQuantity(product, parseInt(value))
+    }
+  }
+
+  const getFormattedSubOptionName = ({ quantity, name, position, price }) => {
+    if (name !== 'No') {
+      const pos = position ? `(${position})` : ''
+      return price > 0 ? `${name} ${pos} ${parsePrice(quantity * price, { currencyPosition: 'left' })}` : `${name} ${pos}`
+    } else {
+      return 'No'
+    }
+  }
+
+  const getProductPrice = (product) => {
+    let subOptionPrice = 0
+    if (Array.isArray(product.options)) {
+      if (product.options?.length > 0) {
+        for (const option of product.options) {
+          for (const suboption of option.suboptions) {
+            subOptionPrice += suboption.quantity * suboption.price
+          }
+        }
+      }
+    }
+
+    const price = product.quantity * (product.price + subOptionPrice)
+    return parseFloat(price.toFixed(2))
+  }
+
+  return (
+    <AccordionSection>
+      <Accordion
+        isValid={product?.valid ?? true}
+        className={`product accordion ${setActive}`}
+        onClick={(e) => toggleAccordion(e)}
+      >
+        <ProductInfo>
+          {product?.images && (
+            <WrapperProductImage>
+              <ProductImage bgimage={optimizeImage(product?.images, 'h_100,c_limit')} />
+            </WrapperProductImage>
+          )}
+          {isCartProduct ? (
+            <ProductSelect
+              ref={productSelect}
+              value={product.quantity}
+              onChange={(e) => handleChangeQuantity(Number(e.target.value))}
+            >
+              {[...Array(getProductMax(product) + 1)].map((v, i) => (
+                <option
+                  key={i}
+                  value={i}
+                  disabled={offsetDisabled(product) < i && i !== 0}
+                >
+                  {i === 0 ? t('REMOVE', 'Remove') : i}
+                </option>
+              ))}
+            </ProductSelect>
+          ) : (
+            <ProductQuantity>
+              {product?.quantity}
+            </ProductQuantity>
+          )}
+          <ContentInfo>
+            <h3>{product.name}</h3>
+            {windowSize.width <= 410 && (
+              <span>
+                <p>{parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}</p>
+                {isCartProduct && (
+                  <div>
+                    {onEditProduct && (
+                      <span ref={productActionsEdit}>
+                        <TiPencil color='#F2BB40' onClick={() => onEditProduct(product)} />
+                      </span>
+                    )}
+                    {onDeleteProduct && (
+                      <span ref={productActionsDelete}>
+                        <VscTrash color='#D81212' onClick={() => onDeleteProduct(product)} />
+                      </span>
+                    )}
+                  </div>
+                )}
+              </span>
+            )}
+          </ContentInfo>
+        </ProductInfo>
+
+        {(product?.valid || !isCartProduct) && windowSize.width > 410 && (
+          <ProductPriceSection>
+            <ProductPrice>
+              <span>
+                {parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}
+              </span>
+              {(productInfo().ingredients?.length > 0 || productInfo().options?.length > 0 || product.comment) && (
+                <p>
+                  <IosArrowUp className={`${setRotate}`} />
+                </p>
+              )}
+            </ProductPrice>
+            {isCartProduct && (
+              <ProductActions>
+                <ProductActionsEdit
+                  ref={productActionsEdit}
+                  onClick={() => onEditProduct(product)}
+                  disabled={orderState.loading}
+                >
+                  <TiPencil color='#F2BB40' />
+                </ProductActionsEdit>
+                <ProductActionsDelete
+                  ref={productActionsDelete}
+                  onClick={() => onDeleteProduct(product)}
+                  disabled={orderState.loading}
+                >
+                  <VscTrash color='#D81212' />
+                </ProductActionsDelete>
+              </ProductActions>
+            )}
+          </ProductPriceSection>
+        )}
+
+        {isCartProduct && product?.valid_menu && !product?.valid_quantity && (
+          <ProductError>
+            <ProductActions>
+              <ProductActionsEdit
+                ref={productActionsEdit}
+                onClick={() => onEditProduct(product)}
+                disabled={orderState.loading}
+              >
+                <TiPencil color='#F2BB40' />
+              </ProductActionsEdit>
+              <ProductActionsDelete
+                ref={productActionsDelete}
+                onClick={() => onDeleteProduct(product)}
+                disabled={orderState.loading}
+              >
+                <VscTrash color='#D81212' />
+              </ProductActionsDelete>
+            </ProductActions>
+            <ProductNotAvailable>
+              {t('PRODUCT_QUANTITY_ERROR', 'Not available')}
+            </ProductNotAvailable>
+          </ProductError>
+        )}
+
+        {!product?.valid_menu && isCartProduct && (
+          <ProductError>
+            <ProductActions>
+              <ProductActionsDelete
+                ref={productActionsDelete}
+                onClick={() => onDeleteProduct(product)}
+                disabled={orderState.loading}
+              >
+                <VscTrash color='#D81212' />
+              </ProductActionsDelete>
+            </ProductActions>
+            <ProductNotAvailable>
+              {t('PRODUCT_QUANTITY_ERROR', 'Not available')}
+            </ProductNotAvailable>
+          </ProductError>
+        )}
+      </Accordion>
+
+      <AccordionContent
+        ref={content}
+        style={{ maxHeight: `${setHeight}` }}
+      >
+        {productInfo().ingredients?.length > 0 && productInfo().ingredients.some(ingredient => !ingredient.selected) && (
+          <ProductOptionsList>
+            <p>{t('INGREDIENTS', 'Ingredients')}</p>
+            {productInfo().ingredients.map((ingredient) => !ingredient.selected && (
+              <li className='ingredient' key={ingredient.id}>
+                <span>{t('NO', 'No')} {ingredient.name}</span>
+              </li>
+            ))}
+          </ProductOptionsList>
+        )}
+        {productInfo().options?.length > 0 && (
+          <ProductOptionsList>
+            {Array.isArray(productInfo().options) && productInfo().options.map((option, i) => (
+              <li key={i}>
+                <p>{option.name}</p>
+                <ProductOptionsList className='suboption'>
+                  {option.suboptions.map(suboption => (
+                    <React.Fragment key={suboption.id}>
+                      <li>
+                        <span>
+                          {getFormattedSubOptionName({
+                            quantity: suboption.quantity,
+                            name: suboption.name,
+                            position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
+                            price: suboption.price
+                          })}
+                        </span>
+                      </li>
+                    </React.Fragment>
+                  ))}
+                </ProductOptionsList>
+              </li>
+            ))}
+          </ProductOptionsList>
+        )}
+        {product.comment && (
+          <ProductComment>
+            <p>{t('COMMENT', 'Comment')}</p>
+            <h3>{product.comment}</h3>
+          </ProductComment>
+        )}
+      </AccordionContent>
+    </AccordionSection>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/ProductItemAccordion/styles.js

@@ -0,0 +1,373 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const AccordionSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 10px 0px;
+  color: #191919;
+`
+
+const AccordionStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: background-color 0.6s ease;
+
+  .rotate {
+    transform: rotate(180deg);
+  }
+
+  .accordion__icon {
+    margin-left: auto;
+    transition: transform 0.6s ease;
+    ${props => props.theme?.rtl && css`
+      margin-right: auto;
+      margin-left: initial;
+    `}
+  }
+
+  @media (min-width: 411px){
+    flex-direction: row;
+  }
+
+`
+
+export const Accordion = (props) => {
+  const style = {}
+  if (!props.isValid) {
+    style.opacity = '0.5'
+  }
+  return (
+    <AccordionStyled
+      {...props}
+      style={style}
+    >
+      {props.children}
+    </AccordionStyled>
+  )
+}
+
+export const WrapperProductImage = styled.div`
+  max-width: 55px;
+  max-height: 55px;
+  height: 55px;
+  width: 55px;
+  border-radius: 7.6px;
+
+  @media (min-width: 768px) {
+    max-width: 62px;
+    max-height: 62px;
+    height: 62px;
+    width: 62px;
+  }
+`
+
+const ProductImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: contain;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 10px;
+`
+
+export const ProductImage = (props) => {
+  return (
+    <ProductImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ProductImageStyled>
+  )
+}
+
+export const ContentInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-transform: capitalize;
+  margin-left: 10px;
+  width: 55%;
+
+  @media (min-width: 411px) {
+    width: calc(65% - 60px);
+  }
+
+  ${props => props.theme?.rtl && css`
+    margin-right: 10px;
+    margin-left: 0px;
+  `}
+
+  h3 {
+    font-size: 14px;
+    margin: 0px;
+    font-weight: 400;
+    color: ${props => props.theme.colors.headingColor};
+  }
+
+  span {
+    display: flex;
+    justify-content: space-between;
+    margin: 0px;
+
+    p {
+      margin: 0px;
+      font-size: 14px;
+    }
+
+    div {
+      display: flex;
+
+      span {
+        height: 20px;
+        svg {
+          font-size: 20px;
+          &:nth-child(1) {
+            margin-right: 3px;
+            ${props => props.theme?.rtl && css`
+              margin-left: 3px;
+              margin-right: 0px;
+            `}
+          }
+        }
+      }
+    }
+  }
+
+  @media (min-width: 577px) {
+    h3 {
+      font-size: 18px;
+    }
+  }
+`
+
+export const AccordionContent = styled.div`
+  overflow: hidden;
+  transition: max-height 0.6s ease;
+  width: 100%;
+  margin: auto;
+
+  @media (min-width: 481px) {
+    width: 80%;
+  }
+
+  @media print {
+    margin-top: 20px;
+  }
+`
+
+export const AccordionText = styled.div`
+  font-weight: 400;
+  font-size: 14px;
+  padding: 18px;
+`
+
+export const ProductComment = styled.div`
+  padding-left: 40px;
+  ${props => props.theme?.rtl && css`
+    padding-right: 40px;
+    padding-left: 0px;
+  `}
+  p {
+    font-weight: bold;
+    margin: 0px;
+  }
+
+  h3 {
+    font-size: 14px;
+    font-weight: normal;
+    text-transform: capitalize;
+    margin: 0px 20px 0px 40px;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 1.5;
+    overflow: hidden;
+    ${props => props.theme?.rtl && css`
+      margin: 0px 40px 0px 20px;
+    `}
+  }
+`
+
+export const ProductInfo = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  h1,
+  h3 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 15px;
+  }
+
+  p {
+    font-size: 20px;
+    margin: 0px 5px;
+  }
+
+  @media (min-width: 411px) {
+    width: 80%;
+  }
+
+  @media (min-width: 481px) {
+    width: 70%;
+  }
+`
+
+export const ProductError = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  span {
+    font-size: 18px;
+    text-align: center;
+  }
+
+  @media (min-width: 411px){
+    width: 35%;
+
+    span{
+      text-align: right;
+    }
+  }
+`
+
+export const ProductActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`
+
+export const ProductActionsEdit = styled.span`
+  svg {
+    font-size: 20px;
+    margin-right: 5px;
+    cursor: pointer;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `}
+  }
+`
+
+export const ProductActionsDelete = styled(ProductActionsEdit)`
+  display: none;
+  svg {
+    margin-right: 0px;
+  }
+
+  @media (min-width: 411px){
+    display: block;
+  }
+`
+
+export const ProductPriceSection = styled.div`
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`
+
+export const ProductPrice = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  p,
+  span {
+    font-size: 14px;
+    color: ${props => props.theme.colors.headingColor};
+  }
+
+  span {
+    font-weight: 500;
+  }
+
+  p {
+    margin: 0px 5px;
+  }
+
+  svg {
+    cursor: pointer;
+  }
+`
+
+export const ProductSelect = styled.select`
+  max-width: 55px;
+  height: 50px;
+  border: 0;
+  background-color: transparent;
+  font-size: 17px;
+  outline: none;
+  margin-left: 5px;
+
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 0px;
+  `}
+`
+
+export const ProductNotAvailable = styled.span`
+  color: #D81212;
+`
+
+export const ProductOptionsList = styled.ul`
+  list-style-type: none;
+
+  .suboption {
+    margin-left: -25px;
+    ${props => props.theme?.rtl && css`
+      margin-right: -25px;
+      margin-left: 0px;
+  `}
+  }
+
+  p:nth-child(1) {
+    margin-bottom: 0;
+  }
+
+  p {
+    font-weight: 400;
+    margin: 0px;
+    color: ${props => props.theme.colors.lightGray};
+    font-size: 12px;
+  }
+
+  li span {
+    color: ${props => props.theme.colors.lightGray};
+    font-size: 12px;
+  }
+
+  li.ingredient {
+    padding-left: 15px;
+    ${props => props.theme?.rtl && css`
+      padding-right: 15px;
+      padding-left: 0px;
+    `}
+  }
+`
+
+export const ProductQuantity = styled.span`
+  display: flex;
+  p {
+    margin: 0px 5px;
+  }
+  margin: 0 10px 0 20px;
+
+  ${props => props.theme?.rtl && css`
+    margin: 0 20px 0 10px;
+  `}
+`