ordering-ui-external 1.7.1 → 1.8.0

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

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { ChevronLeft, ChevronRight } from 'react-bootstrap-icons'
+
+import {
+  PaginationContainer,
+  PaginationButtonContainer,
+  PageButton,
+} from './styles'
+
+export const Pagination = (props) => {
+  const {
+    currentPage,
+    totalPages,
+    handleChangePage,
+  } = props
+
+  const [, t] = useLanguage()
+
+  const [visiblePages, setVisiblePages] = useState([])
+  const [activePage, setActivePage] = useState(currentPage)
+
+  const filterPages = (visiblePages, totalPages) => {
+    return visiblePages.filter(page => page <= totalPages)
+  }
+
+  const getVisiblePages = (page, total) => {
+    if (total < 7) {
+      return filterPages([1, 2, 3, 4, 5, 6], total)
+    } else {
+      if (page % 5 >= 0 && page > 4 && page + 2 < total) {
+        return [1, page - 1, page, page + 1, total]
+      } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
+        return [1, total - 3, total - 2, total - 1, total]
+      } else {
+        return [1, 2, 3, 4, 5, total]
+      }
+    }
+  }
+
+  const changePage = (page) => {
+    if (page === activePage) {
+      return
+    }
+    setActivePage(page)
+    const _visiblePages = getVisiblePages(page, totalPages)
+    setVisiblePages(filterPages(_visiblePages, totalPages))
+    handleChangePage(page)
+  }
+
+  useEffect(() => {
+    if (!totalPages) return
+    setVisiblePages(getVisiblePages(null, totalPages))
+  }, [totalPages])
+
+  useEffect(() => {
+    setActivePage(currentPage)
+    const _visiblePages = getVisiblePages(currentPage, totalPages)
+    setVisiblePages(filterPages(_visiblePages, totalPages))
+  }, [currentPage])
+
+  return (
+    <PaginationContainer>
+      <PaginationButtonContainer>
+        <PageButton
+          disabled={activePage === 1}
+          onClick={() => (activePage !== 1) && changePage(activePage - 1)}
+        >
+          <ChevronLeft />
+        </PageButton>
+
+        {visiblePages.map((page, index, array) => (
+          <React.Fragment key={page}>
+            {array[index - 1] + 2 <= page ? (
+              <>
+                <PageButton noEffect>
+                  ...
+                </PageButton>
+                <PageButton
+                  active={activePage === page}
+                  onClick={() => changePage(page)}
+                >
+                  {page}
+                </PageButton>
+              </>
+            ) : (
+              <PageButton
+                active={activePage === page}
+                onClick={() => changePage(page)}
+              >
+                {page}
+              </PageButton>
+            )}
+          </React.Fragment>
+        ))}
+
+        <PageButton
+          disabled={activePage === totalPages}
+          onClick={() => (activePage !== totalPages) && changePage(activePage + 1)}
+        >
+          <ChevronRight />
+        </PageButton>
+      </PaginationButtonContainer>
+    </PaginationContainer>
+  )
+}

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

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const PaginationContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+`
+
+export const PaginationButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 20px;
+  ` : css`
+    margin-right: 20px;
+  `}
+`
+
+export const PageButton = styled.button`
+  background-color: transparent;
+  font-size: 14px;
+  color: ${props => props.theme.colors.headingColor};
+  outline: none;
+  border: none;
+  border-radius: 27px;
+  min-width: 27px;
+  min-height: 27px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 7px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 3px;
+  ` : css`
+    margin-right: 3px;
+  `}
+
+  &:hover {
+    background-color: #1507260a;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:active {
+    background-color: #1507261a;
+  }
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primaryContrast};
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.primary)};
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.primary)};
+    }
+  `}
+
+  ${({ noEffect }) => noEffect && css`
+    cursor: initial;
+    &:hover {
+      background-color: transparent;
+    }
+    &:active {
+      background-color: transparent;
+    }
+  `}
+`
+
+export const PageSizeContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+
+  .select {
+    border-color: ${props => props.theme.colors.lightGray};
+    padding: 5px 0;
+
+    > div:first-child {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+`
+
+export const PageSizeTitle = styled.p`
+  margin: 0px;
+  color: ${props => props.theme.colors.lightGray};
+  font-size: 12px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`
+
+export const Option = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+`

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

@@ -4,6 +4,7 @@ import FiMinusCircle from '@meronex/icons/fi/FiMinusCircle'
 import FiPlusCircle from '@meronex/icons/fi/FiPlusCircle'
 import MdcPlayCircleOutline from '@meronex/icons/mdc/MdcPlayCircleOutline'
 import { LinkableText } from '../LinkableText'
+import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
 import { AutoScroll } from '../AutoScroll'
 
 import {
@@ -60,7 +61,8 @@ import {
   WeightUnitItem,
   ProductTagsListContainer,
   ProductTagWrapper,
-  VideoGalleryWrapper
+  VideoGalleryWrapper,
+  TitleWrapper
 } from './styles'
 import { useTheme } from 'styled-components'
 import { Input, TextArea } from '../../styles/Inputs'
@@ -92,7 +94,8 @@ const ProductOptionsUI = (props) => {
     handleChangeIngredientState,
     handleChangeSuboptionState,
     handleChangeCommentState,
-    productAddedToCartLength
+    productAddedToCartLength,
+    handleFavoriteProduct
   } = props
 
   const { product, loading, error } = productObject
@@ -138,6 +141,15 @@ const ProductOptionsUI = (props) => {
     }
   }
 
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteProduct && handleFavoriteProduct(product, !product?.favorite)
+    } else {
+      setModalPageToShow('login')
+      setModalIsOpen(true)
+    }
+  }
+
   const handleSaveProduct = () => {
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
@@ -321,6 +333,7 @@ const ProductOptionsUI = (props) => {
       setIsHaveWeight(true)
       setPricePerWeightUnit(product?.price / product?.weight)
     }
+
   }, [product])
 
   useEffect(() => {
@@ -360,15 +373,8 @@ const ProductOptionsUI = (props) => {
       ref={productContainerRef}
       useKioskApp={props.useKioskApp}
     >
-      {loading && !error && (
-        <SkeletonBlock width={90}>
-          <Skeleton variant='rect' height={50} />
-          <Skeleton variant='rect' height={50} />
-          <Skeleton variant='rect' height={200} />
-        </SkeletonBlock>
-      )}
 
-      {product && !loading && !error && (
+      {product && !error && (
         <ProductShareWrapper>
           {!props.useKioskApp ? (
             <ProductShare
@@ -383,108 +389,126 @@ const ProductOptionsUI = (props) => {
           )}
         </ProductShareWrapper>
       )}
-
-      {!loading && !error && product && (
-        <>
-          <WrapperImage>
-            <SwiperWrapper isSoldOut={isSoldOut}>
+      {product && (
+        <WrapperImage>
+          <SwiperWrapper isSoldOut={isSoldOut}>
+            <Swiper
+              spaceBetween={10}
+              navigation
+              watchOverflow
+              observer
+              observeParents
+              parallax
+              thumbs={{ swiper: thumbsSwiper }} className='mySwiper2'
+              onSlideChange={() => handleSlideChange()}
+            >
+              {gallery?.map((img, i) => (
+                <SwiperSlide key={i}>
+                  <img src={img} alt='' className='active-img' />
+                </SwiperSlide>
+              ))}
+              {videoGallery && videoGallery?.length > 0 && (
+                <>
+                  {videoGallery?.map((video, j) => (
+                    <SwiperSlide key={j}>
+                      <iframe style={{ border: 'none', width: '100%', height: '100%' }} src={video} />
+                    </SwiperSlide>
+                  ))}
+                </>
+              )}
+            </Swiper>
+            {galleryLength > 2 && (
               <Swiper
-                spaceBetween={10}
-                navigation
+                onSwiper={setThumbsSwiper}
+                spaceBetween={20}
+                slidesPerView={5}
+                breakpoints={{
+                  0: {
+                    slidesPerView: 3,
+                    spaceBetween: 20
+                  },
+                  300: {
+                    slidesPerView: 4,
+                    spaceBetween: 20
+                  },
+                  400: {
+                    slidesPerView: 5,
+                    spaceBetween: 20
+                  },
+                  550: {
+                    slidesPerView: 6,
+                    spaceBetween: 20
+                  },
+                  769: {
+                    slidesPerView: 6,
+                    spaceBetween: 20
+                  }
+                }}
+                freeMode
+                watchSlidesProgress
+                className='product-thumb'
                 watchOverflow
                 observer
                 observeParents
                 parallax
-                thumbs={{ swiper: thumbsSwiper }} className='mySwiper2'
-                onSlideChange={() => handleSlideChange()}
               >
-                {gallery.map((img, i) => (
+                {gallery?.map((img, i) => (
                   <SwiperSlide key={i}>
                     <img src={img} alt='' />
                   </SwiperSlide>
                 ))}
-                {videoGallery && videoGallery.length > 0 && (
+                {videoGallery && videoGallery?.length > 0 && (
                   <>
-                    {videoGallery.map((video, j) => (
+                    {videoGallery?.map((video, j) => (
                       <SwiperSlide key={j}>
-                        <iframe style={{ border: 'none', width: '100%', height: '100%' }} src={video} />
+                        <VideoGalleryWrapper>
+                          <img src={getOverFlowImage(video)} alt='' />
+                          <MdcPlayCircleOutline />
+                        </VideoGalleryWrapper>
                       </SwiperSlide>
                     ))}
                   </>
                 )}
               </Swiper>
-              {galleryLength > 2 && (
-                <Swiper
-                  onSwiper={setThumbsSwiper}
-                  spaceBetween={20}
-                  slidesPerView={5}
-                  breakpoints={{
-                    0: {
-                      slidesPerView: 3,
-                      spaceBetween: 20
-                    },
-                    300: {
-                      slidesPerView: 4,
-                      spaceBetween: 20
-                    },
-                    400: {
-                      slidesPerView: 5,
-                      spaceBetween: 20
-                    },
-                    550: {
-                      slidesPerView: 6,
-                      spaceBetween: 20
-                    },
-                    769: {
-                      slidesPerView: 6,
-                      spaceBetween: 20
-                    }
-                  }}
-                  freeMode
-                  watchSlidesProgress
-                  className='product-thumb'
-                  watchOverflow
-                  observer
-                  observeParents
-                  parallax
-                >
-                  {gallery.map((img, i) => (
-                    <SwiperSlide key={i}>
-                      <img src={img} alt='' />
-                    </SwiperSlide>
-                  ))}
-                  {videoGallery && videoGallery.length > 0 && (
-                    <>
-                      {videoGallery.map((video, j) => (
-                        <SwiperSlide key={j}>
-                          <VideoGalleryWrapper>
-                            <img src={getOverFlowImage(video)} alt='' />
-                            <MdcPlayCircleOutline />
-                          </VideoGalleryWrapper>
-                        </SwiperSlide>
-                      ))}
-                    </>
-                  )}
-                </Swiper>
-              )}
-            </SwiperWrapper>
-          </WrapperImage>
+            )}
+          </SwiperWrapper>
+        </WrapperImage>
+      )}
+      {loading && !error && (
+        <SkeletonBlock width={90}>
+          <Skeleton variant='rect' height={50} />
+          <Skeleton variant='rect' height={50} />
+          <Skeleton variant='rect' height={200} />
+        </SkeletonBlock>
+      )}
+      {!loading && !error && product && (
+        <>
           <ProductInfo>
             <ProductFormTitle>
-              <ProductName>
-                <span>{product?.name}</span>
-                {product?.calories && (<span className='calories'>{product?.calories}{' '}cal</span>)}
-              </ProductName>
+              <TitleWrapper>
+                <ProductName>
+                  <span>{product?.name}</span>
+                </ProductName>
+                <span className='favorite' onClick={() => handleChangeFavorite()} >
+                  {product?.favorite ? <Like /> : <DisLike />}
+                </span>
+              </TitleWrapper>
               <Properties>
                 {isHaveWeight ? (
                   <PriceContent>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</PriceContent>
                 ) : (
                   <PriceContent>
-                    {product?.price ? parsePrice(product?.price) : ''}
+                    <p>{product?.price ? parsePrice(product?.price) : ''}</p>
                     {product?.in_offer && (<span className='offer-price'>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</span>)}
                   </PriceContent>
                 )}
                 <ProductMeta>
+                  {product?.calories && (
+                    <>
+                      <span className='calories'>{product?.calories}{' '}cal</span>
+                      <span>&nbsp;&#183;&nbsp;</span>
+                    </>
+                  )}
                   {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && (
                     <SkuContent>
                       <span>{t('SKU', theme?.defaultLanguages?.SKU || 'Sku')}&nbsp;</span>

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

@@ -22,6 +22,21 @@ export const ProductContainer = styled.div`
   }
 `
 
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-top: 20px;
+ .favorite {
+  cursor: pointer;
+    svg {
+      color: ${props => props.theme.colors.danger500};
+      display: flex;
+      font-size: 20px;
+    }
+  }
+`
+
 export const WrapperImage = styled.div`
   margin-left: -20px;
   margin-top: 20px;
@@ -41,7 +56,9 @@ export const SwiperWrapper = styled.div`
   .mySwiper2 {
     height: 250px;
     width: 100%;
-
+    ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+      height: 290px;
+    `}
     .swiper-slide-active {
       border-radius: 0px;
       img {
@@ -49,11 +66,35 @@ export const SwiperWrapper = styled.div`
       }
     }
 
+    @media (min-width: 480px){
+      ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+        height: 340px;
+      `}
+    }
+
     @media (min-width: 576px) {
       height: 320px;
+      ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+        height: 60vw;
+      `}
     }
+      ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+      @media (min-width: 768px) {
+        height: 40vw;
+      }
+      @media (min-width: 993px) {
+        height: 30vw;
+      }
+      @media (min-width: 1024px){
+        height: 350px !important;
+      }
+      @media (min-width: 1200px) {
+        height: 300px !important;
+        width: 300px !important;
+      }
+    `}
   }
-
+  
 
   .swiper {
     width: 100%;
@@ -65,6 +106,10 @@ export const SwiperWrapper = styled.div`
   .swiper-slide {
     background-size: cover;
     background-position: center;
+    .active-img {
+      ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+      `}
+    }
   }
 
   .product-thumb {
@@ -83,6 +128,10 @@ export const SwiperWrapper = styled.div`
       img {
         border-radius: 7.6px;
         max-height: 70px;
+        ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+          max-width: 80px;
+          max-height: 80px;
+        `}
       }
     }
 
@@ -96,6 +145,33 @@ export const SwiperWrapper = styled.div`
     width: 100%;
     height: 100%;
     object-fit: cover;
+    ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+      border-radius: 50% !important;
+    `}
+  }
+
+  .active-img {
+    ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+      height: 60vw !important;
+      width: 60vw !important;
+      margin: 0 auto;
+      @media (min-width: 768px) {
+        height: 40vw !important;
+        width: 40vw !important;
+      }
+      @media (min-width: 993px) {
+        height: 30vw !important;
+        width: 30vw !important;
+      }
+      @media (min-width: 1024px) {
+        height: 350px !important;
+        width: 350px !important;
+      }
+      @media (min-width: 1200px) {
+        height: 300px !important;
+        width: 300px !important;
+      }
+    `}
   }
 
   .swiper-button-next {
@@ -406,9 +482,9 @@ export const ProductName = styled.h1`
   font-size: 20px;
   line-height: 30px;
   color: #344050;
-  margin-bottom: 10px;
   display: flex;
   justify-content: space-between;
+  margin: 0;
   .calories {
     font-size: 16px;
     font-weight: 100;
@@ -416,7 +492,7 @@ export const ProductName = styled.h1`
     white-space: nowrap;
     display: flex;
     align-items: flex-end;
-  } 
+  }
   @media (min-width: 768px) {
     font-size: 22px;
     line-height: 34px;
@@ -424,18 +500,25 @@ export const ProductName = styled.h1`
 `
 export const Properties = styled.div`
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 20px;
 `
 export const ProductDescription = styled.p`
   margin-top: 0px;
   white-space: pre-wrap;
 `
-export const PriceContent = styled.p`
-  font-size: 18px;
-  line-height: 27px;
-  color: #344050;
-  margin: 0;
-  margin-bottom: 10px;
+export const PriceContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  > p {
+    font-size: 18px;
+    line-height: 27px;
+    color: #344050;
+    margin: 0;
+  }
   .offer-price {
     text-decoration: line-through;
     font-size: 16px;
@@ -449,7 +532,6 @@ export const ProductMeta = styled.div`
     font-size: 16px;
     line-height: 24px;
     color: #909BA9;
-    margin-bottom: 10px;
   }
 `
 export const EstimatedPersons = styled.div`