ordering-ui-external 2.0.4 → 2.1.0

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 && (
                   <>