ordering-ui-external 2.0.4 → 2.1.0

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

@@ -1,27 +1,23 @@
 import React, { useState } from 'react'
 import { useLanguage } from 'ordering-components-external'
-import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { Heart as DisLike, HeartFill as Like, InfoCircle } from 'react-bootstrap-icons'
 import {
   Container,
   ProfessionalItem,
-  ProfessionalPhoto,
   ContentWrapper,
-  ProfessionalListing,
-  InfoWrapper,
-  HeartIconWrapper,
-  IconWrapper
+  ProfessionalListing
 } from './styles'
 import { Modal } from '../Modal'
 import { ProfessionalProfile } from '../ProfessionalProfile'
 import { AutoScroll } from '../AutoScroll'
 import { ProfessionalInfo } from '../ProfessionalInfo'
+import { SingleProfessionalCard } from '../SingleProfessionalCard'
 
 export const ProfessionalFilter = (props) => {
   const {
     professionals,
     professionalSelected,
-    handleChangeProfessionalSelected
+    handleChangeProfessionalSelected,
+    handleUpdateProfessionals
   } = props
 
   const [, t] = useLanguage()
@@ -30,22 +26,22 @@ export const ProfessionalFilter = (props) => {
   const [currentProfessional, setCurrentProfessional] = useState(null)
 
   const handleOpenProfile = (e, professional) => {
-    if (e.target.closest('.info')) return
+    if (e.target.closest('.info') || e.target.closest('.favorite')) return
     setCurrentProfessional(professional)
     setOpen(true)
   }
 
-  const handleOpenReview = (professional) => {
-    setReviewOpen(true)
-    setCurrentProfessional(professional)
-  }
-
   const handleCloseProfile = () => {
     setCurrentProfessional(null)
     setOpen(false)
     setReviewOpen(false)
   }
 
+  const onUpdateProfessionals = (id, changes) => {
+    const updatedProfessional = professionals.find(professional => professional.id === id)
+    handleUpdateProfessionals({ ...updatedProfessional, ...changes })
+  }
+
   return (
     <>
       <Container>
@@ -59,23 +55,15 @@ export const ProfessionalFilter = (props) => {
               >
                 <p>{t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}</p>
               </ProfessionalItem>
-              {professionals.map((professional, i) => (
-                <ProfessionalItem
-                  key={i}
+              {professionals.map(professional => (
+                <SingleProfessionalCard
+                  isSmallPhoto
+                  handleProfessionalClick={handleOpenProfile}
                   active={professional?.id === professionalSelected?.id}
-                  onClick={(e) => handleOpenProfile(e, professional)}
-                >
-                  {professional?.photo ? <ProfessionalPhoto bgimage={professional?.photo} /> : <FaUserAlt />}
-                  <InfoWrapper>
-                    <p className='name'>{professional?.name} {professional?.lastname}</p>
-                    <IconWrapper>
-                      <InfoCircle className='info' onClick={() => handleOpenReview(professional)} />
-                      <HeartIconWrapper>
-                        {professional?.favorite ? <Like /> : <DisLike />}
-                      </HeartIconWrapper>
-                    </IconWrapper>
-                  </InfoWrapper>
-                </ProfessionalItem>
+                  key={professional.id}
+                  professional={professional}
+                  handleUpdateProfessionals={onUpdateProfessionals}
+                />
               ))}
             </AutoScroll>
           </ProfessionalListing>

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

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components'
-import React from 'react'
 
 export const Container = styled.div`
   > h2 {
@@ -18,7 +17,7 @@ export const ProfessionalItem = styled.div`
   border: 1px solid ${props => props.theme.colors.gray200};
   border-radius: 7.6px;
   cursor: pointer;
-  margin: 0px 6px;
+  margin: 10px 6px;
   transition: all 0.3s linear;
   width: 205px;
   min-width: 205px;
@@ -54,35 +53,6 @@ export const ProfessionalItem = styled.div`
   `}
 `
 
-const ProfessionalPhotoStyled = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  background-repeat: no-repeat, repeat;
-  background-size: cover;
-  background-position: center;
-  object-fit: cover;
-  height: 42px;
-  width: 42px;
-  min-width: 42px;
-  border-radius: 7.6px;
-  margin-right: 12px;
-  ${props => props.theme.rtl && css`
-    margin-left: 12px;
-    margin-right: 0px;
-  `}
-`
-export const ProfessionalPhoto = (props) => {
-  const style = {}
-  if (props.bgimage) {
-    style.backgroundImage = `url(${props.bgimage})`
-  }
-  return (
-    <ProfessionalPhotoStyled {...props} style={style}>
-      {props.children}
-    </ProfessionalPhotoStyled>
-  )
-}
-
 export const ContentWrapper = styled.div`
   overflow: auto hidden;
   width: 100%;
@@ -91,29 +61,3 @@ export const ContentWrapper = styled.div`
 export const ProfessionalListing = styled.div`
   display: flex;
 `
-
-export const InfoWrapper = styled.div`
-  width: calc(100% - 54px);
-`
-
-export const HeartIconWrapper = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  svg {
-    color: ${props => props.theme.colors.danger500};
-      font-size: 16px;
-  }
-`
-
-export const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  .info {
-    margin-right: 10px;
-    ${props => props.theme.rtl && css`
-      margin-left: 10px;
-      margin-right: 0px;
-    `}
-  }
-`

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

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
 import { useLanguage, useConfig, useUtils, useOrderingTheme } from 'ordering-components-external'
 import CgSearch from '@meronex/icons/cg/CgSearch'
-import BsCaretLeftFill from '@meronex/icons/bs/BsCaretLeftFill'
 import { Cart3 } from 'react-bootstrap-icons'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { BusinessBasicInformation as BusinessBasicInformationRed } from '../../../../seven'
@@ -33,8 +32,7 @@ import {
   ProfessionalFilterWrapper,
   WrapperSearchAbsolute,
   NearBusiness,
-  PageBannerWrapper,
-  CategorySelectedContainer
+  PageBannerWrapper
 } from './styles'
 
 import { SearchProducts as SearchProductsOriginal } from '../../../../../themes/five/src/components/SearchProducts'
@@ -46,6 +44,7 @@ import { OrderItAgain } from '../OrderItAgain'
 import { ProfessionalBusinessFilter } from '../ProfessionalBusinessFilter'
 import { PageBanner } from '../PageBanner'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { scrollTo } from '../../../../../utils'
 
 const layoutOne = 'groceries'
 
@@ -86,7 +85,8 @@ export const RenderProductsLayout = (props) => {
     professionalSelected,
     onBusinessClick,
     handleChangePriceFilterValues,
-    priceFilterValues
+    priceFilterValues,
+    handleUpdateProfessionals
   } = props
 
   const theme = useTheme()
@@ -121,6 +121,7 @@ export const RenderProductsLayout = (props) => {
   }
   const showCartOnProductList = !orderingTheme?.theme?.business_view?.components?.cart?.components?.hidden
   const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
+  const hidePreviousOrdered = theme?.business_view?.components?.products_ordered?.hidden
 
   const BusinessLayoutCategories = businessLayout.layoutOne
     ? CategoriesLayoutGroceries
@@ -142,6 +143,19 @@ export const RenderProductsLayout = (props) => {
     handleSaveProduct()
   }, [categorySelected])
 
+  useEffect(() => {
+    if (windowSize.width < 993 && categoryClicked && document.getElementsByClassName('category-title')) {
+      const extraHeight = 80
+      const top = document.getElementsByClassName('category-title')[0].offsetTop - extraHeight
+      window.scrollTo({
+        top: top,
+        behavior: 'smooth'
+      })
+    } else {
+      window.scroll(0, 0)
+    }
+  }, [categoryClicked])
+
   return (
     <>
       {!isLoading && business?.id && (
@@ -172,6 +186,8 @@ export const RenderProductsLayout = (props) => {
                 errorQuantityProducts={errorQuantityProducts}
                 sortByValue={sortByValue}
                 categoryClicked={categoryClicked}
+                categorySelected={categorySelected}
+                setCategoryClicked={setCategoryClicked}
               />
             )}
 
@@ -193,6 +209,13 @@ export const RenderProductsLayout = (props) => {
                 </WrapperSearch>
               </>
             )}
+            {!business?.loading && business?.previously_products?.length > 0 && !hidePreviousOrdered && windowSize.width < 993 && !categoryClicked && (
+              <OrderItAgain
+                onProductClick={onProductClick}
+                productList={business?.previously_products}
+                businessId={business?.id}
+              />
+            )}
             {!businessLayout.layoutOne && (
               <BusinessContent isCustomLayout={isCustomLayout || useKioskApp} id='wrapper-categories'>
                 <BusinessCategoryProductWrapper showCartOnProductList={showCartOnProductList}>
@@ -212,6 +235,7 @@ export const RenderProductsLayout = (props) => {
                           professionals={business?.professionals}
                           professionalSelected={professionalSelected}
                           handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                          handleUpdateProfessionals={handleUpdateProfessionals}
                         />
                       </ProfessionalFilterWrapper>
                     </>
@@ -267,13 +291,6 @@ export const RenderProductsLayout = (props) => {
                     )}
                   </div>
                   <WrapContent id='businessProductList'>
-                    {!business?.loading && business?.previously_products?.length > 0 && (
-                      <OrderItAgain
-                        onProductClick={onProductClick}
-                        productList={business?.previously_products}
-                        businessId={business?.id}
-                      />
-                    )}
                     <BusinessLayoutProductsList
                       categories={[
                         { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
@@ -320,6 +337,7 @@ export const RenderProductsLayout = (props) => {
                             isProducts={currentCart.products.length}
                             isCartOnProductsList={isCartOnProductsList}
                             handleCartOpen={handleCartOpen}
+                            businessConfigs={business?.configs}
                           />
                         </>
                       ) : (
@@ -348,6 +366,7 @@ export const RenderProductsLayout = (props) => {
                       professionals={business?.professionals}
                       professionalSelected={professionalSelected}
                       handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                      handleUpdateProfessionals={handleUpdateProfessionals}
                     />
                   </ProfessionalFilterWrapper>
                 )}
@@ -355,7 +374,7 @@ export const RenderProductsLayout = (props) => {
                   <BusinessCategoriesContainer offSticky>
                     {!(business?.categories?.length === 0 && !categoryId) && (
                       <>
-                        {(!categoryClicked || windowSize.width >= 993) ? (
+                        {(!categoryClicked || windowSize.width >= 993) && (
                           <BusinessLayoutCategories
                             component='categories'
                             categories={[
@@ -373,10 +392,6 @@ export const RenderProductsLayout = (props) => {
                             useKioskApp={useKioskApp}
                             setCategoryClicked={setCategoryClicked}
                           />
-                        ) : (
-                          <CategorySelectedContainer onClick={() => setCategoryClicked(false)}>
-                            <BsCaretLeftFill /> {categorySelected?.name}
-                          </CategorySelectedContainer>
                         )}
                       </>
                     )}
@@ -384,7 +399,7 @@ export const RenderProductsLayout = (props) => {
                   {(categoryClicked || windowSize.width >= 993) && (
                     <BusinessCategoryProductWrapper>
                       <WrapContent isGroceries id='groceries'>
-                        {!business?.loading && business?.previously_products?.length > 0 && (
+                        {!business?.loading && business?.previously_products?.length > 0 && windowSize.width >= 993 && (
                           <OrderItAgain
                             onProductClick={onProductClick}
                             productList={business?.previously_products}
@@ -484,6 +499,7 @@ export const RenderProductsLayout = (props) => {
                 isProducts={currentCart.products.length}
                 isCartOnProductsList={isCartOnProductsList}
                 handleCartOpen={handleCartOpen}
+                businessConfigs={business?.configs}
               />
             </>
           ) : (

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

@@ -224,21 +224,3 @@ export const PageBannerWrapper = styled.div`
     border-radius: 8px;
   }
 `
-
-export const CategorySelectedContainer = styled.div`
-  display: inline;
-  margin-left: 10px;
-  color: ${({ theme }) => theme?.colors?.primary};
-  padding-right: 5px;
-  cursor: pointer;
-  p{
-    margin: 0;
-  }
-  svg {
-    position: relative;
-    top: 2px;
-    margin-right: 3px;
-    width: 14px;
-    height: 14px;
-  }
-`

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

@@ -36,7 +36,6 @@ import {
   NameWrapper,
   StatusInfo,
   DropDownWrapper,
-  DropDownTitle,
   EmptyProfessional,
   SkeletonBlock,
   OrderTimeWrapper,
@@ -143,16 +142,24 @@ const ServiceFormUI = (props) => {
   }
 
   const isBusyTime = (professional) => {
-    if (professional?.busy_times?.length === 0 || !dateSelected) return false
+    if (!dateSelected) return false
+    const startDay = moment(dateSelected).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
     const duration = product?.duration ?? 0
+    const endDay = moment(dateSelected).add(duration - 1, 'minutes').utc().format('d')
+    const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
+    if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
     const busyTimes = isCartProduct
       ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
       : [...professional?.busy_times]
     const valid = busyTimes.some(item => {
       return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() <= moment.utc(item?.end).local().valueOf()) ||
+        moment(dateSelected).valueOf() < moment.utc(item?.end).local().valueOf()) ||
         (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
-        moment(dateSelected).add(duration, 'minutes').valueOf() <= moment.utc(item?.end).local().valueOf())
+        moment(dateSelected).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -328,7 +335,6 @@ const ServiceFormUI = (props) => {
                 </SelectedItem>
                 {isDropDown && (
                   <DropDownWrapper>
-                    <DropDownTitle>{t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}</DropDownTitle>
                     {professionalListState?.professionals?.map((professional) => (
                       <SelectedItem
                         key={professional?.id}

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

@@ -213,7 +213,7 @@ export const SelectedItem = styled.div`
   ${({ isDropDown }) => isDropDown && css`
     border: none;
     padding: 12px 0px;
-    border-top: 1px solid ${props => props.theme.colors.gray200};
+    border-bottom: 1px solid ${props => props.theme.colors.gray200};
     border-radius: 0px;
     &:hover {
       background-color: ${props => props.theme.colors.grayDividerColor};
@@ -225,14 +225,6 @@ export const SelectedItem = styled.div`
   `}
 `
 
-export const DropDownTitle = styled.h1`
-  margin-top: 0px;
-  margin-bottom: 18px;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-`
-
 export const InfoWrapper = styled.div`
   display: flex;
   align-items: center;

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

@@ -324,6 +324,12 @@ const SignUpFormUI = (props) => {
     }
   }, [recaptchaConfig])
 
+  const preventWhiteSpaceOnKeyDown = (e) => {
+    if (e.key === " ") {
+      e.preventDefault()
+    }
+  }
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -417,6 +423,7 @@ const SignUpFormUI = (props) => {
                                             : null,
                                           pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                                         })}
+                                        onKeyDown={preventWhiteSpaceOnKeyDown}
                                         required={!!field.required}
                                         autoComplete='on'
                                         isError={formMethods.errors?.email && !notValidationFields.includes(field.code)}

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage, useUtils, useConfig, useOrder, useOrderingTheme, SingleOrderCard as SingleOrderCardController } from 'ordering-components-external'
+import { useLanguage, useUtils, useConfig, useOrder, SingleOrderCard as SingleOrderCardController } from 'ordering-components-external'
 import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
 import { ReviewOrder } from '../ReviewOrder'
 import { ReviewProduct } from '../ReviewProduct'
@@ -12,6 +12,7 @@ import { Button } from '../../styles/Buttons'
 import Skeleton from 'react-loading-skeleton'
 import { Modal } from '../Modal'
 import { Confirm } from '../Confirm'
+import { OrderEta } from '../OrderDetails/OrderEta'
 import {
   Container,
   Content,
@@ -51,7 +52,6 @@ const SingleOrderCardUI = (props) => {
   const [{ carts }] = useOrder()
   const [{ parsePrice, parseDate, optimizeImage }] = useUtils()
   const [{ configs }] = useConfig()
-  const [orderingTheme] = useOrderingTheme()
   const [isReviewOpen, setIsReviewOpen] = useState(false)
   const [reviewStatus, setReviewStatus] = useState({ order: false, product: false, driver: false })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
@@ -128,8 +128,14 @@ const SingleOrderCardUI = (props) => {
     handleReorder(order.id)
   }
 
-  const showBusinessLogo = !orderingTheme?.theme?.orders?.components?.business_logo?.hidden
-  const showDate = !orderingTheme?.theme?.orders?.components?.date?.hidden
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideFavorite = theme?.orders?.components?.favorite?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
 
   return (
     <>
@@ -151,7 +157,7 @@ const SingleOrderCardUI = (props) => {
             <Skeleton width={60} height={60} />
           ) : (
             <>
-              {!isCustomerMode && showBusinessLogo && (
+              {!isCustomerMode && !hideBusinessLogo && (
                 <>
                   {order?.business?.length > 1 ? (
                     <MultiLogosContainer>
@@ -173,7 +179,7 @@ const SingleOrderCardUI = (props) => {
                   )}
                 </>
               )}
-              {isCustomerMode && showBusinessLogo && (
+              {isCustomerMode && !hideBusinessLogo && (
                 <>
                   {(order.business?.logo || theme.images?.dummies?.businessLogo) && (
                     <Logo>
@@ -186,17 +192,21 @@ const SingleOrderCardUI = (props) => {
           )}
 
           <BusinessInformation activeOrders isMultiCart={order?.business?.length > 1}>
-            {isCustomerMode ? (
-              <TitleContainer>
-                <h2>{isSkeleton ? <Skeleton width={120} /> : order.business?.name}</h2>
-                <Price isBusinessesPage={isBusinessesPage} isCustomerMode={isCustomerMode}>
-                  <h2>
-                    {isSkeleton ? <Skeleton width={50} /> : parsePrice(order?.summary?.total || order?.total)}
-                  </h2>
-                </Price>
-              </TitleContainer>
-            ) : (
-              <h2>{isSkeleton ? <Skeleton width={120} /> : order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}</h2>
+            {!hideBusinessName && (
+              <>
+                {isCustomerMode ? (
+                  <TitleContainer>
+                    <h2>{isSkeleton ? <Skeleton width={120} /> : order.business?.name}</h2>
+                    <Price isBusinessesPage={isBusinessesPage} isCustomerMode={isCustomerMode}>
+                      <h2>
+                        {isSkeleton ? <Skeleton width={50} /> : parsePrice(order?.summary?.total || order?.total)}
+                      </h2>
+                    </Price>
+                  </TitleContainer>
+                ) : (
+                  <h2>{isSkeleton ? <Skeleton width={120} /> : order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}</h2>
+                )}
+              </>
             )}
             {
               isSkeleton ? (
@@ -205,18 +215,23 @@ const SingleOrderCardUI = (props) => {
                 </div>
               ) : (
                 <div className='orders-detail'>
-                  {order?.id && (
+                  {order?.id && !hideOrderNumber && (
                     <>
                       <BsDot />
                       <p name='order_number'>{order?.business?.length > 1 ? `${order?.business?.length} ${t('ORDERS', 'orders')}` : `${t('ORDER_NUM', 'Order No.')} ${order.id}`}</p>
                     </>
                   )}
-                  {showDate && (
+                  {!hideDate && (
                     <>
                       <BsDot />
-                      <p>{order?.delivery_datetime_utc
-                        ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY hh:mm A' })
-                        : parseDate(order?.delivery_datetime, { utc: false })}
+                      <p>
+                        {
+                          pastOrders
+                            ? order?.delivery_datetime_utc
+                              ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY hh:mm A' })
+                              : parseDate(order?.delivery_datetime, { utc: false })
+                            : <OrderEta order={order} />
+                        }
                       </p>
                     </>
 
@@ -224,7 +239,9 @@ const SingleOrderCardUI = (props) => {
                 </div>
               )
             }
-            <p className='order-status'>{isSkeleton ? <Skeleton width={80} /> : getOrderStatus(order.status)?.value}</p>
+            {!hideOrderStatus && (
+              <p className='order-status'>{isSkeleton ? <Skeleton width={80} /> : getOrderStatus(order.status)?.value}</p>
+            )}
           </BusinessInformation>
           {!isCustomerMode && (
             <Price isBusinessesPage={isBusinessesPage}>
@@ -239,7 +256,7 @@ const SingleOrderCardUI = (props) => {
           )}
           {pastOrders && !isCustomerMode && (
             <ButtonWrapper>
-              {!isOrderReviewed && !isFavorite && (!order?.review || (order.driver && !order?.user_review)) && (
+              {!isOrderReviewed && !isFavorite && (!order?.review || (order.driver && !order?.user_review)) && !hideReviewOrderButton && (
                 <Button
                   outline
                   color='primary'
@@ -249,14 +266,14 @@ const SingleOrderCardUI = (props) => {
                   {t('REVIEW', 'Review')}
                 </Button>
               )}
-              {order.cart && (
+              {order.cart && !hideReorderButton && (
                 <Button color='primary' className='reorder' outline onClick={() => handleClickReorder(order)}>
                   {cartState?.loading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
                 </Button>
               )}
             </ButtonWrapper>
           )}
-          {!order?.business?.length && (
+          {!order?.business?.length && !hideFavorite && (
             <FavoriteWrapper onClick={() => handleChangeFavorite(order)} className='favorite'>
               {isSkeleton ? <Skeleton width={20} height={20} /> : (
                 <>

package/src/themes/five/src/components/SingleProductCard/layouts/original/index.js

@@ -15,6 +15,7 @@ import {
   CardContainer,
   CardInfo,
   WrapLogo,
+  WrapTags,
   CardLogo,
   SoldOut,
   PriceWrapper,
@@ -167,11 +168,20 @@ const SingleProductCardUI = (props) => {
                     )}
                   </TitleWrapper>
                   {!isSkeleton ? (
-                    <PriceWrapper>
-                      <span>{product?.price ? parsePrice(product?.price) : ''}</span>
+                    <PriceWrapper isOffPrice={product?.offer_price && product?.in_offer}>
+                      <span className='current-price'>{product?.price ? parsePrice(product?.price) : ''}</span>
                       {!(isSoldOut || maxProductQuantity <= 0) && (
                         <span className='off-price'>{product?.offer_price && product?.in_offer ? parsePrice(product?.offer_price) : ''}</span>
                       )}
+                      {product?.tags && product?.tags.length > 0 && (
+                        <WrapTags>
+                          {product?.tags.map((tag, i) => (
+                            <div key={i}>
+                              <img src={tag.image ?? ''}></img>
+                            </div>
+                          ))}
+                        </WrapTags>
+                      )}
                     </PriceWrapper>
                   ) : (
                     <Skeleton width={100} />