ordering-ui-admin-external 1.0.0

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

@@ -0,0 +1,97 @@
+import React from 'react'
+import { OrdersOverview as OrdersOverviewController, useLanguage } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import {
+  OverViewContainer,
+  OverViewTitle,
+  OverViewItemContent,
+  OverViewItem,
+  OverViewStatusTitle,
+  OverViewStatusValue,
+  SkeletonContainer,
+  SkeletonCard
+} from './styles'
+
+const OrdersOverViewUI = (props) => {
+  const {
+    ordersOverviewList
+  } = props
+  const [, t] = useLanguage()
+
+  return (
+    <OverViewContainer id='overView'>
+      {!ordersOverviewList.loading ? (
+        <>
+          <OverViewTitle>
+            {t('OVERVIEW', 'overview')}
+          </OverViewTitle>
+          <OverViewItemContent>
+            <OverViewItem>
+              <OverViewStatusTitle>
+                {t('ORDERS_TODAY', 'orders today')}
+              </OverViewStatusTitle>
+              <OverViewStatusValue>
+                {ordersOverviewList?.overview?.total || 0}
+              </OverViewStatusValue>
+            </OverViewItem>
+
+            <OverViewItem>
+              <OverViewStatusTitle>
+                {t('PENDING', 'pending')}
+              </OverViewStatusTitle>
+              <OverViewStatusValue>
+                {ordersOverviewList?.overview?.pending || 0}
+              </OverViewStatusValue>
+            </OverViewItem>
+
+            <OverViewItem>
+              <OverViewStatusTitle>
+                {t('IN_PROGRESS', 'in progress')}
+              </OverViewStatusTitle>
+              <OverViewStatusValue>
+                {ordersOverviewList?.overview?.inProgress || 0}
+              </OverViewStatusValue>
+            </OverViewItem>
+
+            <OverViewItem>
+              <OverViewStatusTitle>
+                {t('COMPLETED', 'completed')}
+              </OverViewStatusTitle>
+              <OverViewStatusValue>
+                {ordersOverviewList?.overview?.completed || 0}
+              </OverViewStatusValue>
+            </OverViewItem>
+
+            <OverViewItem>
+              <OverViewStatusTitle>
+                {t('CANCELLED', 'cancelled')}
+              </OverViewStatusTitle>
+              <OverViewStatusValue>
+                {ordersOverviewList?.overview?.cancelled || 0}
+              </OverViewStatusValue>
+            </OverViewItem>
+          </OverViewItemContent>
+        </>
+      ) : (
+        <SkeletonContainer>
+          <Skeleton width={100} height={15} />
+          {[...Array(5)].map((item, i) =>
+            <SkeletonCard key={i}>
+              <Skeleton width={100} height={15} />
+              <Skeleton width={50} height={25} />
+            </SkeletonCard>
+          )}
+        </SkeletonContainer>
+      )}
+    </OverViewContainer>
+  )
+}
+
+export const OverView = (props) => {
+  const OrdersOverviewControlProps = {
+    ...props,
+    UIComponent: OrdersOverViewUI
+  }
+
+  return <OrdersOverviewController {...OrdersOverviewControlProps} />
+}

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

@@ -0,0 +1,65 @@
+import styled from 'styled-components'
+
+export const OverViewContainer = styled.div`
+  position: fixed;
+  width: 140px;
+  right: 0px;
+  top: 68px;
+  min-height: calc(100vh - 68px);
+  background-color: ${({ theme }) => theme.colors.primary};
+  padding: 0px 15px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  z-index: 100;
+  
+  @media (max-width: 1400px) {
+    right: -140px;
+    box-shadow: -2px 2px 5px #00000029;
+  }
+`
+export const OverViewTitle = styled.p`
+  color: ${({ theme }) => theme?.colors?.textBlack};
+  text-transform: capitalize;
+  font-size: 15px;
+  padding: 30px 0;
+  margin: 0px;
+`
+export const OverViewItemContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 45px;
+`
+export const OverViewItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+`
+export const OverViewStatusTitle = styled.p`
+  color: ${({ theme }) => theme?.colors?.textBlackContrast};
+  font-size: 16px;
+  text-transform: capitalize;
+  font-weight: 500;
+  margin: 0px;
+`
+export const OverViewStatusValue = styled.p`
+  color: ${({ theme }) => theme?.colors?.textBlack};
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0px;
+`
+export const SkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > span {
+    margin: 30px 0;
+  }
+
+  > div {
+    margin-bottom: 30px;
+  }
+`
+export const SkeletonCard = styled.div`
+  display: flex;
+  flex-direction: column;
+`

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { PageNotFoundContainer, PageNotFoundText } from './styles'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+
+export const PageNotFound = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  return (
+    <PageNotFoundContainer>
+      <PageNotFoundText>
+        <span>{t('PAGE_NOT_FOUND', 'PAGE NOT FOUND')}</span>
+        <img src={theme.images?.general?.notFoundLighting} alt='lighting' />
+      </PageNotFoundText>
+      <div>
+        <img src={theme.images?.general?.notFound404} alt='error404' />
+      </div>
+    </PageNotFoundContainer>
+  )
+}

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

@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+
+export const PageNotFoundContainer = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 55px;
+  margin-top: 60px;
+  div{
+    width: 50%;
+  }
+  img {
+    width: 100%;
+  }
+  @media (max-width: 980px){
+    div{
+      width: 80%;
+    }
+  }
+  @media (max-width: 550px){
+    div{
+      width: 100%;
+    }
+  }
+`
+
+export const PageNotFoundText = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 14px;
+  span{
+    padding: 12px 20px;
+    background-color: white;
+    font-size: 2.5rem;
+    border-radius: 12px;
+    border: 2px solid black;
+  }
+  img{
+    position: relative;
+    width: 8%;
+    bottom: 17px;
+  }
+  @media (max-width: 1024px){
+    span{
+      padding: 10px 20px;
+      font-size: 1.7rem;
+      border: 1.8px solid black;
+    }
+    img{
+      bottom: 14px;
+    }
+  }
+  @media (max-width: 980px){
+    span{
+      border: 2px solid black;
+    }
+    img{
+      width: 7%;
+    }
+  }
+  @media (max-width: 425px){
+    span{
+      font-size: 1.2rem;
+      border-width: 1px;
+      padding: 10px 15px
+    }
+  }
+  @media (max-width: 320px){
+    img{
+      width: 10%;
+    }
+  }
+`

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

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { MultiSelect } from '../../styles/MultiSelect'
+
+import { Option, PlaceholderTitle } from './styles'
+
+export const PaymethodTypeSelector = (props) => {
+  const {
+    paymethodsList,
+    filterValues,
+    handleChangePaymethodType
+  } = props
+
+  const [, t] = useLanguage()
+  const [paymethodsTypes, setPaymethodsTypes] = useState([])
+  const placeholder = <PlaceholderTitle>{t('SELECT_PAYMETHOD', 'Select paymethod')}</PlaceholderTitle>
+  const paymthodsLoading = [{ value: 'default', content: <Option>{t('PAYMETHODS_LOADING', 'Paymethods loading')}...</Option> }]
+
+  useEffect(() => {
+    const _paymthodsOptionList = []
+    if (!paymethodsList.loading) {
+      const _paymthodsOption = paymethodsList.paymethods.map((paymethod) => {
+        return {
+          value: paymethod.id,
+          content: (
+            <Option>{paymethod.name}</Option>
+          )
+        }
+      })
+
+      for (const option of _paymthodsOption) {
+        _paymthodsOptionList.push(option)
+      }
+    }
+
+    setPaymethodsTypes(_paymthodsOptionList)
+  }, [paymethodsList])
+
+  return (
+    <>
+      {!paymethodsList.loading ? (
+        <MultiSelect
+          defaultValue={filterValues.paymethodIds}
+          placeholder={placeholder}
+          options={paymethodsTypes}
+          optionBottomBorder
+          onChange={(paymethod) => handleChangePaymethodType(paymethod)}
+        />
+      ) : (
+        <MultiSelect
+          defaultValue='default'
+          options={paymthodsLoading}
+          optionBottomBorder
+        />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+`
+export const PlaceholderTitle = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+  padding: 5px 10px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`

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

@@ -0,0 +1,297 @@
+import React, { useState, useRef } from 'react'
+import TiPencil from '@meronex/icons/ti/TiPencil'
+import IosArrowDown from '@meronex/icons/ios/IosArrowDown'
+import VscTrash from '@meronex/icons/vsc/VscTrash'
+import { useUtils, useLanguage, useOrder } from 'ordering-components-admin-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
+  } = props
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+  const [{ parsePrice }] = useUtils()
+  const windowSize = useWindowSize()
+
+  const [setActive, setActiveState] = useState('')
+  const [setHeight, setHeightState] = useState('inherit')
+  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 rotate' : 'accordion__icon'
+    )
+  }
+
+  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)}` : `${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>
+          {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>
+          )}
+          {product?.images && (
+            <WrapperProductImage>
+              <ProductImage bgimage={product?.images} />
+            </WrapperProductImage>
+          )}
+          <ContentInfo>
+            <h3>{product.name}</h3>
+            {windowSize.width <= 410 && (
+              <span>
+                <p>{parsePrice(getProductPrice(product))}</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))}
+              </span>
+              {(productInfo().ingredients?.length > 0 || productInfo().options?.length > 0 || product.comment) && (
+                <p>
+                  <IosArrowDown 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>
+  )
+}