ordering-ui-external 1.4.5 → 1.5.1

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

@@ -25,7 +25,9 @@ import {
   ProductSelect,
   ProductOptionsList,
   ProductQuantity,
-  ProductSelectWrapper
+  ProductSelectWrapper,
+  ScheduleInfoWrapper,
+  ScheduleInfo
 } from './styles'
 
 export const ProductItemAccordion = (props) => {
@@ -44,7 +46,7 @@ export const ProductItemAccordion = (props) => {
   } = props
   const [, t] = useLanguage()
   const [orderState] = useOrder()
-  const [{ parsePrice }] = useUtils()
+  const [{ parsePrice, parseDate }] = useUtils()
   const windowSize = useWindowSize()
   const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
@@ -122,61 +124,73 @@ export const ProductItemAccordion = (props) => {
                 <ProductImage bgimage={product?.images} />
               </WrapperProductImage>
             )}
-            {isCartProduct && !isCartPending && getProductMax ? (
-              <ProductSelectWrapper>
-                <IosArrowDown />
-                <ProductSelect
-                  ref={productSelect}
-                  value={product.quantity}
-                  isCheckout={isCheckout}
-                  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>
-              </ProductSelectWrapper>
+            {product?.calendar_event ? (
+              <ScheduleInfoWrapper>
+                <h3>{product.name}</h3>
+                <ScheduleInfo>
+                  <span>{parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}</span>
+                </ScheduleInfo>
+              </ScheduleInfoWrapper>
             ) : (
-              <ProductQuantity>
-                {product?.quantity}
-              </ProductQuantity>
-            )}
+              <>
+                {isCartProduct && !isCartPending && getProductMax ? (
+                  <ProductSelectWrapper>
+                    <IosArrowDown />
+                    <ProductSelect
+                      ref={productSelect}
+                      value={product.quantity}
+                      isCheckout={isCheckout}
+                      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>
+                  </ProductSelectWrapper>
+                ) : (
+                  <ProductQuantity>
+                    {product?.quantity}
+                  </ProductQuantity>
+                )}
 
-            <ContentInfo>
-              <div>
-                <h3>{product.name}</h3>
-                {
-                  product?.comment && (
-                    <p>{product?.comment}</p>
-                  )
-                }
-              </div>
-              {windowSize.width <= 410 && (
-                <span>
-                  <p>{parsePrice(product.total || product.price)}</p>
-                  {isCartProduct && !isCartPending && (
-                    <div>
-                      {onEditProduct && (
-                        <span ref={productActionsEdit}>
-                          <Pencil color='#B1BCCC' onClick={() => onEditProduct(product)} />
-                        </span>
-                      )}
-                      {onDeleteProduct && (
-                        <span ref={productActionsDelete}>
-                          <Trash color='#B1BCCC' onClick={() => onDeleteProduct(product)} />
-                        </span>
+                <ContentInfo>
+                  <div>
+                    <h3>{product.name}</h3>
+                    {
+                      product?.comment && (
+                        <p>{product?.comment}</p>
+                      )
+                    }
+                  </div>
+                  {windowSize.width <= 410 && (
+                    <span>
+                      <p>{parsePrice(product.total || product.price)}</p>
+                      {isCartProduct && !isCartPending && (
+                        <div>
+                          {onEditProduct && (
+                            <span ref={productActionsEdit}>
+                              <Pencil color='#B1BCCC' onClick={() => onEditProduct(product)} />
+                            </span>
+                          )}
+                          {onDeleteProduct && (
+                            <span ref={productActionsDelete}>
+                              <Trash color='#B1BCCC' onClick={() => onDeleteProduct(product)} />
+                            </span>
+                          )}
+                        </div>
                       )}
-                    </div>
+                    </span>
                   )}
-                </span>
-              )}
-            </ContentInfo>
+                </ContentInfo>
+              </>
+            )}
+
           </ProductInfo>
 
           {(product?.valid || !isCartProduct) && windowSize.width > 410 && (

package/src/themes/five/src/components/ProductItemAccordion/styles.js

@@ -387,3 +387,29 @@ export const ProductOptionsList = styled.ul`
 export const ProductQuantity = styled.span`
   margin: 0 5px;
 `
+
+export const ScheduleInfoWrapper = styled.div`
+  width: calc(100% - 65px);
+  box-sizing: border-box;
+  h3 {
+    margin: 0px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  padding-left: 10px;
+  ${props => props.theme.rtl && css`
+    padding-left: 0px;
+    padding-right: 10px;
+  `}
+`
+
+export const ScheduleInfo = styled.div`
+  span {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 15px;
+    color: ${props => props.theme.colors.darkGray};
+  }
+`

package/src/themes/five/src/components/ProductShare/ProductCopyURL.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { useUtils, useLanguage } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import { Button } from '../../styles/Buttons'
+import BsCheck from '@meronex/icons/bs/BsCheck'
+
+import {
+  ProductCopyURLContainer,
+  ProductImageWrapper
+} from './styles'
+
+export const ProductCopyURL = (props) => {
+  const {
+    urlToShare,
+    product
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [copiedToClipboard, setcopiedToClipboard] = useState(false)
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(urlToShare)
+    setcopiedToClipboard(true)
+    setTimeout(() => {
+      props.onClose && props.onClose()
+    }, 1000)
+  }
+
+  return (
+    <ProductCopyURLContainer>
+      <ProductImageWrapper>
+        <img
+          src={optimizeImage(product?.images || theme.images?.dummies?.product, 'h_200,c_limit')}
+          loading='lazy'
+          alt='product image'
+        />
+      </ProductImageWrapper>
+      <p className='name'>{product?.name}</p>
+      {product?.description && (
+        <p className='description'>{product?.description}</p>
+      )}
+      <Button
+        outline={!copiedToClipboard}
+        color='primary'
+        onClick={() => handleCopyToClipboard()}
+      >
+        {copiedToClipboard ? <BsCheck /> : t('COPY_URL', 'Copy URL')}
+      </Button>
+    </ProductCopyURLContainer>
+  )
+}

package/src/themes/five/src/components/ProductShare/index.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef, useState } from 'react'
+import FiShare2 from '@meronex/icons/fi/FiShare2'
+import { ProductShare as ProductShareController } from 'ordering-components-external'
+import HiLink from '@meronex/icons/hi/HiLink'
+import { Modal } from '../Modal'
+import { ProductCopyURL } from './ProductCopyURL'
+
+import {
+  IconShare,
+  ShareButtons,
+  CopyButton
+} from './styles'
+
+import { Button } from '../../styles/Buttons'
+
+const ProductShareUI = (props) => {
+  const {
+    updateShowValue,
+    showShareButton,
+    urlToShare,
+    btnText,
+    withBtn,
+    product
+  } = props
+
+  const iconElement = useRef()
+  const contentElement = useRef()
+  const [openCopyUrlModal, setOpenCopyUrlModal] = useState(false)
+
+  const handleClickOutside = (e) => {
+    const outsideIcon = !iconElement.current?.contains(e.target)
+    const outsideButtonsShare = !contentElement.current?.contains(e.target)
+    if (outsideIcon && outsideButtonsShare) {
+      updateShowValue && updateShowValue(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    return () => window.removeEventListener('mouseup', handleClickOutside)
+  }, [])
+
+  const handleClickShare = () => {
+    updateShowValue(!showShareButton)
+  }
+
+  return (
+    <>
+      <IconShare ref={iconElement} name='icon-share'>
+        {withBtn ? (
+          <Button
+            outline
+            color='primary'
+            onClick={handleClickShare}
+          >
+            <FiShare2 />
+            {btnText}
+          </Button>
+        ) : (
+          <FiShare2 onClick={handleClickShare} />
+        )}
+        <ShareButtons
+          ref={contentElement}
+          className='a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style'
+          data-a2a-url={urlToShare}
+          showShareButton={showShareButton}
+        >
+          <CopyButton onClick={() => setOpenCopyUrlModal(true)}>
+            <span>
+              <HiLink />
+            </span>
+          </CopyButton>
+          <a className='a2a_button_facebook' />
+          <a className='a2a_button_whatsapp' />
+          <a className='a2a_button_twitter' />
+          <a className='a2a_button_email' />
+          <a className='a2a_dd' href='https://www.addtoany.com/share' />
+        </ShareButtons>
+      </IconShare>
+
+      <Modal
+        width='650px'
+        open={openCopyUrlModal}
+        onClose={() => setOpenCopyUrlModal(false)}
+      >
+        <ProductCopyURL
+          urlToShare={urlToShare}
+          product={product}
+          onClose={() => setOpenCopyUrlModal(false)}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export const ProductShare = (props) => {
+  const productShareProps = {
+    ...props,
+    UIComponent: ProductShareUI
+  }
+  return (
+    <ProductShareController {...productShareProps} />
+  )
+}

package/src/themes/five/src/components/ProductShare/styles.js

@@ -0,0 +1,165 @@
+import styled, { css } from 'styled-components'
+
+export const IconShare = styled.div`
+  position: fixed;
+  margin: 0px;
+  top: 10px;
+  font-size: 22px;
+  right: 16px;
+  left: 10px;
+  z-index: 9999995;
+  background: rgba(255,255,255,0.5);
+  height: 30px;
+  border-radius: 50%;
+  width: 30px;
+  svg {
+    position: relative;
+    cursor: pointer;
+    color: #333;
+    left: 3px;
+    ${props => props.theme?.rtl && css`
+      left: 0;
+      right: 5px;
+    `}
+  }
+  ${props => props.theme?.rtl && css`
+    left: 16px;
+    right: 10px;
+  `}
+
+
+  @media(min-width: 769px){
+    position: relative;
+    left: 5px;
+    top: 0;
+
+    svg{
+      position: static;
+    }
+
+    ${props => props.theme?.rtl && css`
+      left: 0;
+      right: 5px;
+    `}
+  }
+
+  @media (min-width: 1201px) {
+    position: sticky;
+    width: 0;
+
+    &:nth-child(1) > svg {
+      background-color: white;
+      padding: 5px;
+      border-radius: 9px;
+      margin: 5px 0px;
+    }
+
+    ${props => props.theme?.rtl && css`
+      right: 0;
+      left: initial;
+    `}
+  }
+`
+
+export const ShareButtons = styled.div`
+  visibility: ${({ showShareButton }) => showShareButton ? 'visible' : 'hidden'};
+  top: 28px;
+  width: 40px;
+  position: absolute !important;
+
+  ${props => props.theme?.rtl ? css`
+    right: -12px;
+  ` : css`
+    left: -12px;
+  `}
+
+  @media (min-width: 1201px) {
+    top: 35px;
+    left: 0px;
+    right: 0px;
+  }
+`
+export const CopyButton = styled.a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    > span {
+      opacity: 0.7;
+    }
+  }
+  > span {
+    background-color: #0166ff;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+
+    svg {
+      font-size: 24px;
+      color: #FFF;
+    }
+  }
+`
+export const ProductCopyURLContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 30px;
+
+  p {
+    text-align: center;
+    &.name {
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 30px;
+      margin-bottom: 0;
+      margin-top: 15px;
+    }
+
+    &.description {
+      font-size: 14px;
+      line-height: 24px;
+      margin: 0;
+    }
+  }
+
+  button {
+    margin-top: 50px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 100px;
+
+    svg {
+      font-size: 24px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    button {
+      width: 100%;
+      margin-top: 115px;
+    }
+  }
+`
+export const ProductImageWrapper = styled.div`
+  width: 95px;
+  height: 95px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+  }
+
+  @media (min-width: 768px) {
+    width: 200px;
+    height: 200px;
+  }
+`

package/src/themes/five/src/components/RenderProductsLayout/index.js

@@ -243,12 +243,6 @@ export const RenderProductsLayout = (props) => {
                       </WrapperSearchAbsolute>
                     )}
                   </div>
-                  {/* {windowSize.width < 500 && (
-                    <MobileCartViewWrapper>
-                      <span>{currentCart?.products?.length > 0 ? parsePrice(currentCart?.total) : parsePrice(0)}</span>
-                      <Button color='primary' onClick={() => setisCartModal(true)}>{t('VIEW_CART', 'View cart')}</Button>
-                    </MobileCartViewWrapper>
-                  )} */}
                   <WrapContent id='businessProductList'>
                     {!business?.loading && business?.previously_products?.length > 0 && (
                       <OrderItAgain
@@ -288,7 +282,7 @@ export const RenderProductsLayout = (props) => {
                   </WrapContent>
                 </BusinessCategoryProductWrapper>
                 {showCartOnProductList && (
-                  <BusinessCartContainer id='BusinessCartContainer' isProfessional={business?.professionals?.length > 0 && !useKioskApp}>
+                  <BusinessCartContainer isProfessional={business?.professionals?.length > 0 && !useKioskApp}>
                     <BusinessCartContent maxHeight={window.innerHeight - 100}>
                       {currentCart?.products?.length > 0 ? (
                         <>
@@ -335,7 +329,7 @@ export const RenderProductsLayout = (props) => {
                   </ProfessionalFilterWrapper>
                 )}
                 <BusinessContent>
-                  <BusinessCategoriesContainer>
+                  <BusinessCategoriesContainer offSticky>
                     {!(business?.categories?.length === 0 && !categoryId) && (
                       <BusinessLayoutCategories
                         component='categories'

package/src/themes/five/src/components/RenderProductsLayout/styles.js

@@ -62,6 +62,10 @@ export const BusinessCategoriesContainer = styled.div`
   margin: 0;
   margin-right: 10px;
   width: 100%;
+  ${(props) => !props.offSticky && css`
+    top: 65px;
+    position: sticky;
+  `}
   @media (min-width: 993px) {
     width: calc(31% - 25px);
   }
@@ -71,6 +75,7 @@ export const BusinessCartContainer = styled(BusinessCategoriesContainer)`
   display: none;
   margin-top: 70px;
   min-width: 325px;
+  height: fit-content;
   @media (min-width: 769px) {
     ${({ isProfessional }) => isProfessional && css`
       margin-top: 0px;

package/src/themes/five/src/components/ReviewProduct/index.js

@@ -13,7 +13,9 @@ import {
   AdditionCommentsWrapper,
   AddCommentHideShow,
   Comments,
-  CommentsList
+  CommentsList,
+  WrapperProductLogo,
+  ProductLogo,
 } from './styles'
 import AiOutlineLike from '@meronex/icons/ai/AiOutlineLike'
 import AiOutlineDislike from '@meronex/icons/ai/AiOutlineDislike'
@@ -89,7 +91,12 @@ const SingleProductReview = (props) => {
 
   return (
     <SingleProductReviewContainer>
-      <HandReviewWrapper>
+        {(product?.images || theme.images?.dummies?.businessLogo) && (
+          <WrapperProductLogo>
+                  <ProductLogo bgimage={product?.images || theme.images?.dummies?.businessLogo} />
+          </WrapperProductLogo>
+        )}
+        <HandReviewWrapper>
         <p>{product?.name}</p>
         <HandReviewContent>
           <HandIconWrapper onClick={() => setIsLike(true)} active={isLike}>
@@ -201,7 +208,7 @@ const ReviewProductUI = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <ReviewProductContainer onSubmit={handleSubmit(onSubmit)}>
-        {order?.products && order.products.length > 0 && order.products.map((product, i) => (
+        {order?.products && order.products.length > 0 && order.products.map((product, i) => !product?.deleted && (
           <SingleProductReview
             {...props}
             key={i}

package/src/themes/five/src/components/ReviewProduct/styles.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 import { Button } from '../../styles/Buttons'
 
@@ -156,3 +157,45 @@ export const ButtonCustomized = styled(Button)`
     color: white;
   `}
 `
+export const WrapperProductLogo = styled.div`
+  width: 124px;
+  height: 124px;
+  min-height: 124px;
+  max-width: 124px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  margin: 0 auto;
+`
+
+const ProductLogoStyled = styled.div`
+  display: flex;
+  width: 124px;
+  height: 124px;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  min-height: 124px;
+  border-radius: 7.6px;
+
+  @media (min-width: 481px){
+    width: 100%;
+    height: 100%;
+    min-height: 124px;
+  }
+`
+
+export const ProductLogo = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+
+  return (
+    <ProductLogoStyled {...props} style={style}>
+      {props.children}
+    </ProductLogoStyled>
+  )
+}

package/src/themes/five/src/components/SearchProducts/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react'
-import { useLanguage, useEvent } from 'ordering-components-external'
-// import { Input } from '../../styles/Inputs'
+import { useLanguage, useEvent, useConfig } from 'ordering-components-external'
 import { SearchBar } from '../SearchBar'
 import { useTheme } from 'styled-components'
 import { BusinessProductsList } from '../BusinessProductsList'
+import { BusinessProductsList as ProductListLayoutGroceries } from '../BusinessProductsList/layouts/groceries'
 
 import {
   Container,
@@ -17,6 +17,8 @@ import {
   BusinessProductsListWrapper
 } from './styles'
 
+const layoutOne = 'groceries'
+
 export const SearchProducts = (props) => {
   const {
     onClose,
@@ -30,13 +32,24 @@ export const SearchProducts = (props) => {
   const theme = useTheme()
   const [, t] = useLanguage()
   const [events] = useEvent()
+  const [{ configs }] = useConfig()
   const searchRef = useRef()
 
+  const isUseParentCategory = (configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1')
+  const frontLayout = business?.front_layout
+  const businessLayout = {
+    layoutOne: frontLayout === layoutOne && isUseParentCategory
+  }
+
   const handleGoToPage = (data) => {
     events.emit('go_to_page', data)
     document.body.style.overflowY = 'auto'
   }
 
+  const BusinessLayoutProductsList = businessLayout.layoutOne
+    ? ProductListLayoutGroceries
+    : BusinessProductsList
+
   useEffect(() => {
     searchRef?.current?.focus && searchRef.current.focus()
   }, [searchRef?.current])
@@ -70,7 +83,7 @@ export const SearchProducts = (props) => {
       {searchValue && (
         <BusinessProductsListContainer>
           <BusinessProductsListWrapper>
-            <BusinessProductsList
+            <BusinessLayoutProductsList
               {...props}
               categories={[
                 { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },