ordering-ui-external 1.0.1 → 1.1.2

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const AccordionSection = styled.div`
@@ -96,6 +97,10 @@ export const ContentInfo = styled.div`
     margin-left: 0;
   `}
 
+  span {
+    cursor: pointer;
+  }
+
   h2, span {
     margin: 0px;
   }
@@ -216,3 +221,44 @@ export const PriceContainer = styled.div`
     height: 50px;
   }
 `
+
+const BusinessLogoStyled = styled.div`
+  display: flex;
+  width: 75px;
+  height: 75px;
+  min-height: 75px;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: contain;
+  object-fit: contain;
+  background-position: center;
+  border-radius: 10px;
+`
+
+export const BusinessLogo = (props) => {
+  return (
+    <BusinessLogoStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </BusinessLogoStyled>
+  )
+}
+
+export const WrapperBusinessLogo = styled.div`
+  max-width: 75px;
+  max-height: 75px;
+  height: 75px;
+  width: 75px;
+  margin-right: 10px;
+`
+
+export const TimeContainer = styled.div`
+  svg{
+    position: relative;
+    top: 1px;
+    margin-right: 5px;
+  }
+`

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   BusinessListingSearchContainer,
   FiltersContainer,
@@ -51,6 +51,8 @@ import { NotFoundSource } from '../NotFoundSource'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import BisDownArrow from '@meronex/icons/bi/BisDownArrow'
 import BisUpArrow from '@meronex/icons/bi/BisUpArrow'
+import { Modal } from '../Modal'
+import { ProductForm } from '../ProductForm'
 
 export const BusinessListingSearchUI = (props) => {
   const {
@@ -72,6 +74,7 @@ export const BusinessListingSearchUI = (props) => {
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [curProduct, setCurProduct] = useState({ business: null, product: null })
   const [{ parsePrice, optimizeImage, parseDistance }] = useUtils()
   const [{ auth }] = useSession()
   const { width } = useWindowSize()
@@ -107,6 +110,19 @@ export const BusinessListingSearchUI = (props) => {
     else handleChangeFilters('price_level', value)
   }
 
+  const onProductClick = (product, business) => {
+    setCurProduct({ business: business, product: product })
+  }
+
+  const handleRedirectToCart = (product, code) => {
+    setCurProduct({ business: null, product: null })
+    onBusinessClick(curProduct?.business)
+  }
+
+  const closeModalProductForm = () => {
+    setCurProduct({ business: null, product: null })
+  }
+
   const MaxSectionItem = ({ title, options, filter }) => {
     const parseValue = (option) => {
       return filter === 'max_distance'
@@ -144,6 +160,7 @@ export const BusinessListingSearchUI = (props) => {
       <SearchBar
         lazyLoad
         isCustomLayout
+        forceFocus
         placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('PLEASE_TYPE_AT_LEAST_3_CHARACTERS', 'Please type at least 3 characters')}`}
         onSearch={(val) => handleChangeTermValue(val)}
         search={termValue}
@@ -354,6 +371,7 @@ export const BusinessListingSearchUI = (props) => {
                           isSoldOut={(product.inventoried && !product.quantity)}
                           product={product}
                           businessId={business?.id}
+                          onProductClick={(product) => onProductClick(product, business)}
                           handleUpdateProducts={(productId, changes) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                         />
                       )))}
@@ -396,6 +414,26 @@ export const BusinessListingSearchUI = (props) => {
           </ProductsList>
         </FiltersResultContainer>
       </FiltersContainer>
+      <Modal
+        width={props?.useKioskApp ? '80%' : '760px'}
+        open={!!curProduct?.product}
+        closeOnBackdrop
+        onClose={() => closeModalProductForm()}
+        padding='0'
+        isProductForm
+        disableOverflowX
+      >
+        {(!!curProduct?.product) && (
+          <ProductForm
+            businessSlug={curProduct?.business?.slug}
+            useKioskApp={props?.useKioskApp}
+            businessId={curProduct?.business?.id}
+            categoryId={curProduct?.product?.category_id}
+            productId={curProduct?.product?.id}
+            onSave={handleRedirectToCart}
+          />
+        )}
+      </Modal>
     </BusinessListingSearchContainer>
   )
 }

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

@@ -145,7 +145,7 @@ const BusinessPreorderUI = (props) => {
     const selectedMenu = menu ? (menu?.use_business_schedule ? business : menu) : business
     const _times = getTimes(dateSelected, selectedMenu)
     setTimeList(_times)
-  }, [dateSelected, menu])
+  }, [dateSelected, menu, business])
 
   useEffect(() => {
     if (type === 'business_hours') setMenu(null)
@@ -254,12 +254,16 @@ const BusinessPreorderUI = (props) => {
                 ))}
               </>
             ) : (
-              <ClosedBusinessMsg>{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}</ClosedBusinessMsg>
+              <ClosedBusinessMsg>
+                {!isProfessional
+                  ? t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')
+                  : t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
+              </ClosedBusinessMsg>
             )}
           </TimeListWrapper>
         </OrderTimeWrapper>
       )}
-      {!isPreOrderSetting && (
+      {!isPreOrderSetting && !isProfessional && (
         <ClosedBusinessMsg>{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}</ClosedBusinessMsg>
       )}
       {showButton && (
@@ -275,7 +279,7 @@ const BusinessPreorderUI = (props) => {
         </ButtonWrapper>
       )}
       {orderState?.loading && (
-        <Layer>
+        <Layer nobg={!!isProfessional}>
           {(window.location.pathname !== '/search' || orderState?.options?.address?.location) && (
             <SpinnerLoader
               style={{

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

@@ -256,6 +256,7 @@ export const TypeContent = styled.div`
 export const Layer = styled.div`
   ${({ nobg }) => !nobg && css`
     background-color: rgba(255, 255, 255, 0.7);
+    z-index: 1;
   `}
   position: absolute;
   top: 0;

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

@@ -18,8 +18,12 @@ const BusinessProductsCategoriesUI = (props) => {
   } = props
 
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
+  const scrollTopSpan = 60
 
   const handleChangeCategory = (category) => {
+    const isBlockScroll = window.location.search.includes('category') &&
+      window.location.search.includes('product')
+
     if (business?.lazy_load_products_recommended) {
       handlerClickCategory({ ...category })
       return
@@ -27,11 +31,13 @@ const BusinessProductsCategoriesUI = (props) => {
     let topPos = 0
     if (!category?.id) topPos = document.getElementById('businessProductList')?.offsetTop
     else topPos = document.getElementById(`category${category.id}`)?.offsetTop
-    window.scroll({
-      top: topPos - 60,
-      left: 0,
-      behavior: 'smooth'
-    })
+    if (!isBlockScroll) {
+      window.scroll({
+        top: topPos - scrollTopSpan,
+        left: 0,
+        behavior: 'smooth'
+      })
+    }
   }
 
   const ProductCategories = () => {
@@ -39,6 +45,7 @@ const BusinessProductsCategoriesUI = (props) => {
       categories && categories.length && categories.map((category, i) => (
         <Tab
           key={i}
+          id={`category-menu${category?.id || '-all'}`}
           className={`category ${category.id === 'featured' ? 'special' : ''}`}
           active={business?.lazy_load_products_recommended ? (categorySelected?.id === category.id) : (selectedCategory?.id === category.id)}
           onClick={() => handleChangeCategory(category)}
@@ -50,66 +57,90 @@ const BusinessProductsCategoriesUI = (props) => {
     )
   }
 
-  useEffect(() => {
-    const handleScroll = () => {
-      if (business?.lazy_load_products_recommended) return
-      const featuredElement = document.getElementById('categoryfeatured')
-      const _categories = featuredElement ? [...categories] : categories.filter(category => category.id !== 'featured')
-      _categories?.length && _categories.forEach(category => {
-        const windowTop = window.scrollY
-        let topPos = 0
-        if (!category?.id) topPos = document.getElementById('businessProductList')?.offsetTop
-        else topPos = document.getElementById(`category${category.id}`)?.offsetTop
-
-        if (windowTop >= (topPos - 60)) {
-          setSelectedCateogry(category)
+  const handleScroll = () => {
+    if (business?.lazy_load_products_recommended) return
+    const featuredElement = document.getElementById('categoryfeatured')
+    const _categories = featuredElement ? [...categories] : categories.filter(category => category.id !== 'featured')
+
+    const windowTop = window.scrollY
+    const categoryListsElement = document.getElementById('category-lists')
+    const categoryAreaWidth = categoryListsElement?.clientWidth || 0
+    const categoryScrollChange = categoryListsElement?.scrollLeft
+
+    const _diff = -50
+    const _moveDiff = 30
+
+    _categories?.length && _categories.some(category => {
+      const topPos = category?.id ? document.getElementById(`category${category.id}`)?.offsetTop
+        : document.getElementById('businessProductList')?.offsetTop
+
+      if (topPos - windowTop < scrollTopSpan + 5 && topPos - windowTop > 0 && category?.id) {
+        const choosedCategory = document.getElementById(`category-menu${category?.id || '-all'}`)
+        const choosedCategoryLeft = choosedCategory?.offsetLeft || 0
+
+        if (choosedCategoryLeft - categoryAreaWidth - categoryScrollChange > _diff || categoryScrollChange - choosedCategoryLeft > 0) {
+          const moveAmount = (choosedCategoryLeft < 100) ? 0 : choosedCategoryLeft - _moveDiff
+          categoryListsElement.scrollTo({
+            top: 0,
+            left: moveAmount,
+            behavior: 'smooth'
+          })
         }
-      })
+        setSelectedCateogry(category)
+        return true
+      }
+    })
+
+    const navbar = document.getElementById('category-lists')
+    const cart = document.getElementById('BusinessCartContainer')
+    const search = document.getElementById('WrapperSearchAbsolute')
+    const wrapperCategories = document.getElementById('wrapper-categories')
+    const limit = window.pageYOffset >= wrapperCategories?.offsetTop && window.pageYOffset > 0
 
-      const navbar = document.getElementById('category-lists')
-      const cart = document.getElementById('BusinessCartContainer')
-      const search = document.getElementById('WrapperSearchAbsolute')
-      const wrapperCategories = document.getElementById('wrapper-categories')
-
-      const styleSheet = document.getElementById('styles').sheet
-
-      let style0 = '.sticky-prod-cat {'
-      style0 += 'position: fixed !important;'
-      style0 += 'top: 0 !important;'
-      style0 += 'width: 65.5% !important;'
-      style0 += '}'
-
-      let style1 = '.sticky-prod-cart {'
-      style1 += 'position: fixed !important;'
-      style1 += 'top: 0 !important;'
-      style1 += 'right: 2.5% !important;'
-      style1 += 'width: 28.5% !important;'
-      style1 += '}'
-
-      let style2 = '.sticky-search {'
-      style2 += 'position: fixed !important;'
-      style2 += 'top: 10px !important;'
-      style2 += 'right: 32% !important;'
-      style2 += 'height: 50px !important;'
-      style2 += 'z-index: 9999 !important;'
-      style2 += '}'
-
-      styleSheet.insertRule(style0, 0)
-      styleSheet.insertRule(style1, 1)
-      styleSheet.insertRule(style2, 2)
-
-      const limit = window.pageYOffset >= wrapperCategories?.offsetTop && window.pageYOffset > 0
-
-      if (limit) {
+    if (limit) {
+      const classAdded = navbar.classList.contains('sticky-prod-cat')
+      if (!classAdded) {
         navbar && navbar.classList.add('sticky-prod-cat')
         cart && cart.classList.add('sticky-prod-cart')
         search && search.classList.add('sticky-search')
-      } else {
-        navbar && navbar.classList.remove('sticky-prod-cat')
-        cart && cart.classList.remove('sticky-prod-cart')
-        search && search.classList.remove('sticky-search')
       }
+    } else {
+      navbar && navbar.classList.remove('sticky-prod-cat')
+      cart && cart.classList.remove('sticky-prod-cart')
+      search && search.classList.remove('sticky-search')
     }
+  }
+
+  useEffect(() => {
+    const styleSheet = document.getElementById('styles').sheet
+
+    let style0 = '.sticky-prod-cat {'
+    style0 += 'position: fixed !important;'
+    style0 += 'top: 0 !important;'
+    style0 += 'width: 97% !important;'
+    style0 += 'padding: 15px 5px 0px 0px;'
+    style0 += '}'
+
+    let style1 = '.sticky-prod-cart {'
+    style1 += 'position: fixed !important;'
+    style1 += 'top: 0 !important;'
+    style1 += 'right: 2.5% !important;'
+    style1 += 'width: 28.5% !important;'
+    style1 += 'margin-top: 32px !important;'
+    style1 += '}'
+
+    let style2 = '.sticky-search {'
+    style2 += 'position: fixed !important;'
+    style2 += 'top: 10px !important;'
+    style2 += 'right: 32% !important;'
+    style2 += 'height: 50px !important;'
+    style2 += 'z-index: 9999 !important;'
+    style2 += '}'
+
+    styleSheet.insertRule(style0, 0)
+    styleSheet.insertRule(style1, 1)
+    styleSheet.insertRule(style2, 2)
+
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])

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

@@ -6,7 +6,7 @@ export const CategoriesContainer = styled.div`
   padding: 5px 0px 0px 0px;
   background: ${props => props.theme.colors.backgroundPage};
   z-index: 1000;
-  position: sticky;
+  position: absolute;
   top: 0;
   border-bottom: 1px solid #D9D9D9;
   text-align: center;

package/src/themes/five/src/components/BusinessProductsList/layouts/groceries/index.js

@@ -50,7 +50,7 @@ const BusinessProductsListUI = (props) => {
   return (
     <ProductsContainer>
       {category?.id && (
-        <WrapAllCategories id='container'>
+        <WrapAllCategories id='container' isCategorySelected>
           <HeaderWrapper>
             <div className='category-title'>
               {

package/src/themes/five/src/components/BusinessProductsList/layouts/groceries/styles.js

@@ -22,12 +22,13 @@ export const WrapAllCategories = styled.div`
   .category-title {
     display: flex;
     align-items: center;
+    justify-content: ${({ isCategorySelected }) => isCategorySelected ? 'flex-start' : 'space-between'};
     margin-left: 10px;
-    width: 100%;
     ${props => props.theme?.rtl && css`
       margin-right: 10px;
       margin-left: 0;
     `}
+
     img {
       border-radius: 7.6px;
       min-width: 41px;
@@ -52,6 +53,7 @@ export const WrapAllCategories = styled.div`
       cursor: pointer;
     }
   }
+
   .wrap-header {
     display: flex;
     justify-content: space-between;
@@ -114,16 +116,20 @@ export const RibbonBox = styled.div`
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin-left: 5px;
+
   ${props => props.theme.rtl && css`
     margin-left: 0px;
     margin-right: 5px;
   `}
+
   ${({ bgColor }) => bgColor && css`
     background-color: ${bgColor};
   `}
+
   ${({ isRoundRect }) => isRoundRect && css`
     border-radius: 7.6px;
   `}
+
   ${({ isCapsule }) => isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -31,6 +31,7 @@ export const WrapAllCategories = styled.div`
       margin-right: 10px;
       margin-left: 0;
     `}
+
     img {
       border-radius: 7.6px;
       min-width: 41px;
@@ -43,10 +44,12 @@ export const WrapAllCategories = styled.div`
         margin-right: 0;
       `}
     }
+
     @media (min-width: 993px) {
       margin: 0px;
     }
   }
+
   h3 {
     font-weight: 600;
     font-size: 24px;
@@ -55,6 +58,7 @@ export const WrapAllCategories = styled.div`
     ${props => props.theme?.rtl && css`
       margin: 0px 10px 0px 0px;
     `}
+
     @media (min-width: 993px) {
       margin: 0px;
     }
@@ -104,9 +108,6 @@ export const DescriptionModalContainer = styled.div`
     min-height: 200px;
     margin-bottom: 20px;
   }
-  p{
-    white-space: pre;
-  }
 `
 
 export const DescriptionContainer = styled.div`
@@ -141,16 +142,20 @@ export const RibbonBox = styled.div`
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin-left: 5px;
+
   ${props => props.theme.rtl && css`
     margin-left: 0px;
     margin-right: 5px;
   `}
+
   ${({ bgColor }) => bgColor && css`
     background-color: ${bgColor};
   `}
+
   ${({ isRoundRect }) => isRoundRect && css`
     border-radius: 7.6px;
   `}
+
   ${({ isCapsule }) => isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { BusinessReviews as BusinessReviewController, useLanguage } from 'ordering-components-external'
+import { BusinessReviews as BusinessReviewController, useLanguage, useOrderingTheme } from 'ordering-components-external'
 import { useTheme } from '../../../../../contexts/ThemeContext'
 import moment from 'moment'
 
@@ -28,12 +28,20 @@ export const BusinessReviewsUI = (props) => {
   const { stars, reviewsList, handleClickOption } = props
   const [, t] = useLanguage()
   const [theme] = useTheme()
-
+  const [orderingTheme] = useOrderingTheme()
   const handleOnChange = (evt) => {
     if (evt.target.value === '') handleClickOption('all')
     else handleClickOption(evt.target.value)
   }
 
+  const showRanking = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.ranking?.hidden
+  const showReviewDate = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.review_date?.hidden
+  const showCustomerComments = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.customer_comments?.hidden
+  const showSearch = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.search?.hidden
+  const hideElement = !(!showReviewDate && !showCustomerComments)
+
+  const reviewPoints = [t('TERRIBLE', 'Terrible'), t('BAD', 'Bad'), t('OKAY', 'Okay'), t('GOOD', 'Good'), t('GREAT', 'Great')]
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -57,61 +65,81 @@ export const BusinessReviewsUI = (props) => {
                 )
               }
             </ReviewsHeaderWrapper>
-            <ReviewOf>
-              {!reviewsList.loading
-                ? (
-                  <SearchContainer>
-                    <input
-                      type='number'
-                      min='1'
-                      max='5'
-                      onChange={handleOnChange}
-                      placeholder={t('SEARCH', 'Search')}
-                      style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
-                    />
-                  </SearchContainer>
-                )
-                : <Skeleton width={200} height={30} />}
-            </ReviewOf>
-            <ReviewsProgressWrapper>
-              <p>{t('REVIEW_ORDER', 'Review order')}</p>
-              <ReviewsProgressContent>
-                <ReviewsProgressBar style={{ width: `${(stars / 5) * 100}%` }} />
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '0', right: theme?.rtl ? '0' : 'initial' }}>{t('TERRIBLE', 'Terrible')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '25%', right: theme?.rtl ? '25%' : 'initial' }}>{t('BAD', 'Bad')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '50%', right: theme?.rtl ? '50%' : 'initial' }}>{t('OKAY', 'Okay')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '75%', right: theme?.rtl ? '75%' : 'initial' }}>{t('GOOD', 'Good')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? '0' : 'initial', right: theme?.rtl ? 'initial' : '0' }}>{t('GREAT', 'Great')}</ReviewsMarkPoint>
-              </ReviewsProgressContent>
-            </ReviewsProgressWrapper>
-            <Content id='content'>
-              {!reviewsList.loading ? reviewsList?.reviews.map((review) => (
-                <Review key={review.id} id='review'>
-                  <ReviewItemHeader>
-                    <ReviewTime>{moment(review?.created_at).format('LLL')}</ReviewTime>
-                  </ReviewItemHeader>
-                  <ReviewItemContent>{review?.comment}</ReviewItemContent>
-                </Review>
-              )) : (
-                <>
-                  {[...Array(2)].map((item, i) => (
-                    <SkeletonContainer key={i}>
-                      <div>
-                        <Skeleton width={100} height={30} />
-                        <Skeleton width={100} />
-                      </div>
-                      <div>
-                        <Skeleton width={150} height={50} />
-                      </div>
-                    </SkeletonContainer>
-                  ))}
+            {showSearch && (
+              <ReviewOf>
+                {!reviewsList.loading
+                  ? (
+                    <SearchContainer>
+                      <input
+                        type='number'
+                        min='1'
+                        max='5'
+                        onChange={handleOnChange}
+                        placeholder={t('SEARCH', 'Search')}
+                        style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
+                      />
+                    </SearchContainer>
+                  )
+                  : <Skeleton width={200} height={30} />}
+              </ReviewOf>
+            )}
+            {showRanking && (
+              <ReviewsProgressWrapper>
+                <p>{t('REVIEW_ORDER', 'Review order')}</p>
+                <ReviewsProgressContent>
+                  <ReviewsProgressBar style={{ width: `${(stars / 5) * 100}%` }} />
+                  {reviewPoints.map((reviewPoint, i) => {
+                    const isLastReviewPoint = i === reviewPoints?.length - 1
+                    return (
+                      <ReviewsMarkPoint
+                        key={i}
+                        style={{
+                          left: theme.rtl !== isLastReviewPoint ? 'initial' : `${25 * (isLastReviewPoint ? 0 : i)}%`,
+                          right: theme.rtl !== isLastReviewPoint ? `${25 * (isLastReviewPoint ? 0 : i)}%` : 'initial'
+                        }}
+                      >
+                        {reviewPoint}
+                      </ReviewsMarkPoint>
+                    )
+                  })}
+                </ReviewsProgressContent>
+              </ReviewsProgressWrapper>
+            )}
+            {hideElement && (
+              <Content id='content'>
+                {!reviewsList.loading ? reviewsList?.reviews.map((review) => (
+                  <Review key={review.id} id='review'>
+                    {showReviewDate && (
+                      <ReviewItemHeader>
+                        <ReviewTime>{moment(review?.created_at).format('LLL')}</ReviewTime>
+                      </ReviewItemHeader>
+                    )}
+                    {showCustomerComments && (
+                      <ReviewItemContent>{review?.comment}</ReviewItemContent>
+                    )}
+                  </Review>
+                )) : (
+                  <>
+                    {[...Array(2)].map((item, i) => (
+                      <SkeletonContainer key={i}>
+                        <div>
+                          <Skeleton width={100} height={30} />
+                          <Skeleton width={100} />
+                        </div>
+                        <div>
+                          <Skeleton width={150} height={50} />
+                        </div>
+                      </SkeletonContainer>
+                    ))}
+
+                  </>
+                )}
+                {!reviewsList.loading && reviewsList?.reviews.length === 0 && (
+                  <ReviewsNotFound>{t('NO_REVIEWS', 'No reviews')}</ReviewsNotFound>
+                )}
+              </Content>
+            )}
 
-                </>
-              )}
-              {!reviewsList.loading && reviewsList?.reviews.length === 0 && (
-                <ReviewsNotFound>{t('NO_REVIEWS', 'No reviews')}</ReviewsNotFound>
-              )}
-            </Content>
           </>
         )}
       </BusinessReviewsContainer>