ordering-ui-external 2.0.4 → 2.1.1

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} />

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

@@ -18,6 +18,14 @@ export const CardContainer = styled.div`
   > div {
     display: flex;
     justify-content: space-between;
+    ${({ theme }) => theme?.business_view?.components?.products?.components?.product?.components?.image?.position === 'right'
+    ? css`
+      flex-direction: row-reverse;
+    `
+    : css`
+      flex-direction: row;
+    `
+  }
     align-items: center;
     width: 100%;
   }
@@ -31,7 +39,7 @@ export const CardContainer = styled.div`
     margin: 10px;
   ` : css`
     width: 100%;
-    margin: 10px 0px;
+    margin: 10px;
     @media (min-width: 576px) {
       margin: 10px;
       width: calc(100% - 20px);
@@ -133,13 +141,45 @@ export const WrapLogo = styled.div`
   ${({ isBgimage }) => isBgimage && css`
     width: 86px;
   `}
-  margin-left: 5px;
+  ${({ theme }) => theme?.business_view?.components?.products?.components?.product?.components?.image?.position === 'right'
+    ? css`
+    margin-left: 5px;
+  `
+    : css`
+    margin-right: 5px;
+  `}
   ${props => props.theme?.rtl && css`
     margin-right: 5px;
     margin-left: 0px;
   `}
 `
 
+export const WrapTags = styled.div`
+  display: flex;
+  margin-left: 10px;
+  margin-right: 10px;
+  overflow-x: auto;
+  ${({ isBgimage }) => isBgimage && css`
+    width: 50px;
+  `}
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 0px;
+  `}
+  div {
+    display: flex;
+    margin: auto;
+  }
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  img {
+    width: 30px;
+    height: 30px;
+    margin-right: 5px;
+  }
+`
+
 const CardLogoStyled = styled.div`
   box-sizing: border-box;
   position: relative;
@@ -168,17 +208,26 @@ export const CardLogo = (props) => {
 export const PriceWrapper = styled.div`
   display: flex;
   align-items: center;
+  .current-price {
+    min-width: 64px
+  }
   .off-price {
     font-size: 10px;
     color: #909BA9;
     margin-left: 5px;
     text-decoration: line-through;
+    ${({ isOffPrice }) => isOffPrice && css`
+      min-width: 46px;
+    `}
     ${props => props.theme.rtl && css`
       margin-right: 5px;
       margin-left: 0;
     `}
     @media (min-width: 1024px) {
       font-size: 13px;
+      ${({ isOffPrice }) => isOffPrice && css`
+        min-width: 64px;
+      `}
     }
   }
 `
@@ -194,7 +243,6 @@ export const QuantityContainer = styled.div`
   text-align: center;
   border-radius: 50%;
   transform: translate(-20px, 50%);
-
   @media (min-width: 768px) {
     transform: translate(-50%, 50%);
   }
@@ -218,7 +266,6 @@ export const RibbonBox = styled.div`
   overflow: hidden;
   max-width: 70px;
   word-break: break-all;
-
   ${props => props.theme.rtl && css`
     left: -3px;
     right: initial;

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

@@ -4,18 +4,23 @@ import { useSession, SingleProfessionalCard as SingleProfessionalCardController
 import Skeleton from 'react-loading-skeleton'
 import { ProfessionalInfo } from '../ProfessionalInfo'
 import { Modal } from '../Modal'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import {
   Container,
   UserPhoto,
   InfoWrapper,
-  ActionWrapper
+  ActionWrapper,
+  UserDummyAvatarWrapper
 } from './styles'
 
 const SingleProfessionalCardUI = (props) => {
   const {
     professional,
     isSkeleton,
-    handleFavoriteProfessional
+    handleFavoriteProfessional,
+    isSmallPhoto,
+    active,
+    handleProfessionalClick
   } = props
 
   const [{ auth }] = useSession()
@@ -33,16 +38,22 @@ const SingleProfessionalCardUI = (props) => {
 
   return (
     <>
-      <Container>
+      <Container
+        active={active}
+        isCursor={!!handleProfessionalClick}
+        onClick={e => handleProfessionalClick && handleProfessionalClick(e, professional)}
+      >
         {isSkeleton ? (
           <Skeleton style={{ width: '86px', height: '86px' }} />
         ) : (
-          <UserPhoto bgimage={professional?.photo} />
+          professional?.photo
+            ? <UserPhoto bgimage={professional?.photo} isSmallPhoto={isSmallPhoto} />
+            : <UserDummyAvatarWrapper isSmallPhoto={isSmallPhoto}><FaUserAlt /></UserDummyAvatarWrapper>
         )}
         <InfoWrapper>
           <h4>{isSkeleton ? <Skeleton height={18} width={120} /> : <>{professional?.name} {professional?.last_name}</>}</h4>
           {isSkeleton ? <Skeleton height={15} width={80} /> : <>{professional?.occupation?.name && <p>{professional?.occupation?.name}</p>}</>}
-          <ActionWrapper>
+          <ActionWrapper isSmallPhoto={isSmallPhoto}>
             {isSkeleton ? (
               <>
                 <Skeleton width={16} height={16} />
@@ -51,7 +62,7 @@ const SingleProfessionalCardUI = (props) => {
             ) : (
               <>
                 <InfoCircle className='info' onClick={() => handleOpenProfileInfo()} />
-                <span onClick={() => handleChangeFavorite()}>
+                <span onClick={() => handleChangeFavorite()} className='favorite'>
                   {professional?.favorite ? <Like /> : <DisLike />}
                 </span>
               </>

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

@@ -3,7 +3,7 @@ import React from 'react'
 
 export const Container = styled.div`
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
+  border-radius: 7.6px;
   padding: 12px 14px;
   display: flex;
   align-items: center;
@@ -11,6 +11,13 @@ export const Container = styled.div`
   border: 1px solid ${props => props.theme.colors.gray200};
   box-sizing: border-box;
   margin: 10px;
+  min-width: 205px;
+  ${({ active }) => active && css`
+    border: 1px solid ${props => props.theme.colors.primary};
+  `}
+  ${({ isCursor }) => isCursor && css`
+    cursor: pointer;
+  `}
 `
 
 const UserPhotoStyled = styled.div`
@@ -20,11 +27,18 @@ const UserPhotoStyled = styled.div`
   background-size: cover;
   background-position: center;
   object-fit: cover;
-  min-height: 86px;
-  width: 86px;
-  height: 86px;
   border-radius: 4px;
 
+  ${({ isSmallPhoto }) => isSmallPhoto ? css`
+    min-height: 42px;
+    width: 42px;
+    height: 42px;
+  ` : css`
+    min-height: 86px;
+    width: 86px;
+    height: 86px;
+  `}
+
   ${({ isSkeleton }) => isSkeleton && css`
     background-color: ${props => props.theme.colors.gray200};
   `}
@@ -40,9 +54,20 @@ export const UserPhoto = (props) => {
     </UserPhotoStyled>
   )
 }
+export const UserDummyAvatarWrapper = styled.div`
+  svg {
+    ${({ isSmallPhoto }) => isSmallPhoto ? css`
+      width: 42px;
+      height: 42px;
+    ` : css`
+      width: 86px;
+      height: 86px;
+    `}
+  }
+`
 
 export const InfoWrapper = styled.div`
-  width: calc(100% - 106px);
+  width: calc(100% - 60px);
   margin-left: 20px;
   ${props => props.theme.rtl && css`
     margin-left: 0px;
@@ -66,7 +91,9 @@ export const InfoWrapper = styled.div`
 `
 
 export const ActionWrapper = styled.div`
-  margin-top: 15px;
+  ${({ isSmallPhoto }) => !isSmallPhoto && css`
+    margin-top: 15px;
+  `}
   display: flex;
   align-items: center;
   > .info {

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

@@ -22,6 +22,7 @@ import {
 import { WalletTransactionItem } from '../WalletTransactionItem'
 import { NotFoundSource } from '../../../../../components/NotFoundSource'
 import { Tabs, Tab } from '../../styles/Tabs'
+import { GiftCardUI } from '../GiftCard/GiftCardUI'
 
 const WalletsUI = (props) => {
   const {
@@ -102,7 +103,7 @@ const WalletsUI = (props) => {
                   </span>
                 </BalanceElement>
               </SectionWrapper>
-
+              <GiftCardUI />
               <div className='transactions_list'>
                 {!transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 && (
                   <>