ordering-ui-external 1.2.2 → 1.3.0

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

@@ -1,7 +1,7 @@
 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 } from 'react-bootstrap-icons'
+import { Heart as DisLike, HeartFill as Like, InfoCircle } from 'react-bootstrap-icons'
 import {
   Container,
   ProfessionalItem,
@@ -9,11 +9,13 @@ import {
   ContentWrapper,
   ProfessionalListing,
   InfoWrapper,
-  HeartIconWrapper
+  HeartIconWrapper,
+  IconWrapper
 } from './styles'
 import { Modal } from '../Modal'
 import { ProfessionalProfile } from '../ProfessionalProfile'
 import { AutoScroll } from '../AutoScroll'
+import { ProfessionalInfo } from '../ProfessionalInfo'
 
 export const ProfessionalFilter = (props) => {
   const {
@@ -24,16 +26,24 @@ export const ProfessionalFilter = (props) => {
 
   const [, t] = useLanguage()
   const [open, setOpen] = useState(false)
+  const [reviewOpen, setReviewOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState(null)
 
-  const handleOpenProfile = (professional) => {
+  const handleOpenProfile = (e, professional) => {
+    if (e.target.closest('.info')) return
     setCurrentProfessional(professional)
     setOpen(true)
   }
 
+  const handleOpenReview = (professional) => {
+    setReviewOpen(true)
+    setCurrentProfessional(professional)
+  }
+
   const handleCloseProfile = () => {
     setCurrentProfessional(null)
     setOpen(false)
+    setReviewOpen(false)
   }
 
   return (
@@ -53,14 +63,17 @@ export const ProfessionalFilter = (props) => {
                 <ProfessionalItem
                   key={i}
                   active={professional?.id === professionalSelected?.id}
-                  onClick={() => handleOpenProfile(professional)}
+                  onClick={(e) => handleOpenProfile(e, professional)}
                 >
                   {professional?.photo ? <ProfessionalPhoto bgimage={professional?.photo} /> : <FaUserAlt />}
                   <InfoWrapper>
                     <p className='name'>{professional?.name} {professional?.lastname}</p>
-                    <HeartIconWrapper>
-                      {professional?.favorite ? <Like /> : <DisLike />}
-                    </HeartIconWrapper>
+                    <IconWrapper>
+                      <InfoCircle className='info' onClick={() => handleOpenReview(professional)} />
+                      <HeartIconWrapper>
+                        {professional?.favorite ? <Like /> : <DisLike />}
+                      </HeartIconWrapper>
+                    </IconWrapper>
                   </InfoWrapper>
                 </ProfessionalItem>
               ))}
@@ -80,6 +93,16 @@ export const ProfessionalFilter = (props) => {
           handleChangeProfessionalSelected={handleChangeProfessionalSelected}
         />
       </Modal>
+      <Modal
+        open={reviewOpen}
+        width='760px'
+        padding='0'
+        onClose={() => handleCloseProfile()}
+      >
+        <ProfessionalInfo
+          userId={currentProfessional?.id}
+        />
+      </Modal>
     </>
   )
 }

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

@@ -96,11 +96,24 @@ export const InfoWrapper = styled.div`
   width: calc(100% - 54px);
 `
 
-export const HeartIconWrapper = styled.div`
+export const HeartIconWrapper = styled.span`
   display: flex;
-  justify-content: flex-end;
+  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/ProfessionalInfo/index.js

@@ -0,0 +1,133 @@
+import React from 'react'
+import { useUtils, useLanguage, ProfessionalInfo as ProfessionalInfoController } from 'ordering-components-external'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import Skeleton from 'react-loading-skeleton'
+import {
+  Container,
+  PhotoWrapper,
+  ProfessionalPhoto,
+  InfoWrapper,
+  OccupationWrapper,
+  Description,
+  Divider,
+  ReviewWrapper,
+  ReviewItemContatiner,
+  ReviewQualityContainer,
+  ReviewBarContainer,
+  ReviewQualityTextContainer,
+  Comment,
+  ReviewBar,
+  NotReviewed
+} from './styles'
+
+const ProfessionalInfoUI = (props) => {
+  const {
+    userState,
+    userReviewState
+  } = props
+
+  const [{ optimizeImage }] = useUtils()
+  const [, t] = useLanguage()
+
+  const getReviewPercent = (quality) => {
+    const reviewPercents = {
+      1: 0,
+      2: 25,
+      3: 50,
+      4: 75,
+      5: 100
+    }
+    if (typeof reviewPercents[quality] !== 'undefined') return reviewPercents[quality]
+    return quality / 5 * 100
+  }
+
+  return (
+    <Container>
+      <PhotoWrapper>
+        {userState?.loading ? (
+          <Skeleton
+            width={250}
+            height={250}
+          />
+        ) : (
+          <>
+            {userState?.user?.photo ? (
+              <ProfessionalPhoto
+                bgimage={optimizeImage(userState?.user?.photo, 'h_200,c_limit')}
+              />
+            ) : <FaUserAlt />}
+          </>
+        )}
+      </PhotoWrapper>
+      <InfoWrapper>
+        <h2>{userState?.loading ? <Skeleton width={120} height={20} /> : userState?.user?.name}</h2>
+        <OccupationWrapper>
+          {userState?.loading ? <Skeleton width={100} height={15} /> : <p>{userState?.user?.occupation?.name}</p>}
+        </OccupationWrapper>
+        {userState?.user?.occupation?.description && (
+          <Description>{userState?.user?.occupation?.description}</Description>
+        )}
+      </InfoWrapper>
+      <Divider />
+      <ReviewWrapper>
+        <h2>{t('REVIEWS', 'Reviews')}</h2>
+        {userReviewState.loading ? (
+          [...Array(5).keys()].map(i => (
+            <ReviewItemContatiner key={i}>
+              <ReviewQualityContainer>
+                <ReviewBarContainer>
+                  <Skeleton height={10} />
+                </ReviewBarContainer>
+              </ReviewQualityContainer>
+              <ReviewQualityTextContainer>
+                <p><Skeleton width={40} /></p>
+                <p><Skeleton width={40} /></p>
+                <p><Skeleton width={40} /></p>
+                <p><Skeleton width={40} /></p>
+                <p><Skeleton width={40} /></p>
+              </ReviewQualityTextContainer>
+              <Comment>
+                <div><Skeleton width={300} /></div>
+                <div><Skeleton width={200} /></div>
+              </Comment>
+            </ReviewItemContatiner>
+          ))
+        ) : (
+          userReviewState?.reviews.map(review => (
+            <ReviewItemContatiner key={review?.id}>
+              <ReviewQualityContainer>
+                <ReviewBarContainer>
+                  <ReviewBar
+                    percentage={getReviewPercent(review?.qualification)}
+                  />
+                </ReviewBarContainer>
+                <ReviewQualityTextContainer>
+                  <p>{t('TERRIBLE', 'Terrible')}</p>
+                  <p>{t('BAD', 'Bad')}</p>
+                  <p>{t('OKAY', 'Okay')}</p>
+                  <p>{t('GOOD', 'Good')}</p>
+                  <p>{t('GREAT', 'Great')}</p>
+                </ReviewQualityTextContainer>
+              </ReviewQualityContainer>
+              <Comment>{review?.comment}</Comment>
+            </ReviewItemContatiner>
+          ))
+        )}
+
+        {!userReviewState.loading && userReviewState.reviews.length === 0 && (
+          <NotReviewed>
+            {t('ERROR_REVIEW_FIND', 'The review does not exist.')}
+          </NotReviewed>
+        )}
+      </ReviewWrapper>
+    </Container>
+  )
+}
+
+export const ProfessionalInfo = (props) => {
+  const professionalInfoProps = {
+    ...props,
+    UIComponent: ProfessionalInfoUI
+  }
+  return <ProfessionalInfoController {...professionalInfoProps} />
+}

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

@@ -0,0 +1,140 @@
+import styled from 'styled-components'
+import React from 'react'
+
+export const Container = styled.div`
+  position: relative;
+  padding: 30px 20px 0px 20px;
+`
+
+export const PhotoWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+
+  svg {
+    width: 220px;
+    height: 200px;
+  }
+`
+
+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: 298px;
+  width: 314px;
+  min-width: 300px;
+  border-radius: 7.6px;
+  margin-bottom: 36px;
+`
+
+export const ProfessionalPhoto = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+  return (
+    <ProfessionalPhotoStyled {...props} style={style}>
+      {props.children}
+    </ProfessionalPhotoStyled>
+  )
+}
+
+export const InfoWrapper = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 34px;
+    margin-top: 0px;
+    margin-bottom: 4px;
+  }
+`
+
+export const OccupationWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 13px;
+  > p {
+    margin: 0;
+    font-weight: 400;
+    font-size: 16px;
+  }
+`
+
+export const Description = styled.p`
+  margin-top: 0px;
+  margin-bottom: 19px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+`
+
+export const Divider = styled.div`
+  background: ${props => props.theme.colors.grayDividerColor};
+  margin-left: -20px;
+  width: calc(100% + 40px);
+  height: 8px;
+`
+
+export const ReviewWrapper = styled.div`
+  margin-top: 25px;
+  > h2 {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 30px;
+    margin-top: 0px;
+    margin-bottom: 15px;
+  }
+`
+
+export const ReviewItemContatiner = styled.div`
+  margin-bottom: 40px;
+`
+
+export const ReviewQualityContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const ReviewBarContainer = styled.div`
+  margin: 15px 0;
+`
+
+const ReviewBarStyled = styled.div`
+  height: 6px;
+  border-radius: 10px;
+  background: ${props => `linear-gradient(to right, ${props.theme.colors.headingColor} ${props.percentage}%, ${props.theme.colors.grayDividerColor} ${props.percentage}%)`};
+`
+
+export const ReviewBar = (props) => {
+  return (
+    <ReviewBarStyled
+      {...props}
+    >
+      {props.children}
+    </ReviewBarStyled>
+  )
+}
+
+export const ReviewQualityTextContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  p {
+    margin: 0px;
+    color: ${props => props.theme.colors.lightGray};
+    font-size: 12px;
+  }
+`
+
+export const Comment = styled.div`
+  font-size: 12px;
+  margin: 25px 0;
+`
+
+export const NotReviewed = styled.p`
+  font-size: 14px;
+`

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

@@ -41,6 +41,7 @@ import { SearchProducts as SearchProductsStarbucks } from '../../../../six/src/c
 import { ProfessionalFilter } from '../ProfessionalFilter'
 import { SearchIconWrapper } from '../BusinessBasicInformation/styles'
 import { OrderItAgain } from '../OrderItAgain'
+import { ProfessionalBusinessFilter } from '../ProfessionalBusinessFilter'
 
 const layoutOne = 'groceries'
 
@@ -79,7 +80,9 @@ export const RenderProductsLayout = (props) => {
     handleUpdateProducts,
     handleChangeProfessionalSelected,
     professionalSelected,
-    onBusinessClick
+    onBusinessClick,
+    handleChangePriceFilterValues,
+    priceFilterValues
   } = props
 
   const theme = useTheme()
@@ -170,6 +173,26 @@ export const RenderProductsLayout = (props) => {
             {!businessLayout.layoutOne && (
               <BusinessContent isCustomLayout={isCustomLayout || useKioskApp} id='wrapper-categories'>
                 <BusinessCategoryProductWrapper showCartOnProductList={showCartOnProductList}>
+                  {business?.professionals?.length > 0 && !useKioskApp && (
+                    <>
+                      <ProfessionalBusinessFilter
+                        sortByOptions={sortByOptions}
+                        handleChangeSortBy={handleChangeSortBy}
+                        sortByValue={sortByValue}
+                        handleChangeSearch={handleChangeSearch}
+                        business={business}
+                        handleChangePriceFilterValues={handleChangePriceFilterValues}
+                        priceFilterValues={priceFilterValues}
+                      />
+                      <ProfessionalFilterWrapper>
+                        <ProfessionalFilter
+                          professionals={business?.professionals}
+                          professionalSelected={professionalSelected}
+                          handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                        />
+                      </ProfessionalFilterWrapper>
+                    </>
+                  )}
                   <div style={{ position: 'relative' }}>
                     {!(business?.categories?.length === 0 && !categoryId) && (
                       <BusinessLayoutCategories
@@ -186,6 +209,7 @@ export const RenderProductsLayout = (props) => {
                         business={business}
                         currentCart={currentCart}
                         wContainerStyle={useKioskApp && 'calc(100% - 50px)'}
+                        isProfessional={business?.professionals?.length > 0 && !useKioskApp}
                       />
                     )}
                     {useKioskApp && (
@@ -226,15 +250,6 @@ export const RenderProductsLayout = (props) => {
                     </MobileCartViewWrapper>
                   )} */}
                   <WrapContent id='businessProductList'>
-                    {business?.professionals?.length > 0 && (
-                      <ProfessionalFilterWrapper>
-                        <ProfessionalFilter
-                          professionals={business?.professionals}
-                          professionalSelected={professionalSelected}
-                          handleChangeProfessionalSelected={handleChangeProfessionalSelected}
-                        />
-                      </ProfessionalFilterWrapper>
-                    )}
                     {!business?.loading && business?.previously_products?.length > 0 && (
                       <OrderItAgain
                         onProductClick={onProductClick}
@@ -273,7 +288,7 @@ export const RenderProductsLayout = (props) => {
                   </WrapContent>
                 </BusinessCategoryProductWrapper>
                 {showCartOnProductList && (
-                  <BusinessCartContainer id='BusinessCartContainer'>
+                  <BusinessCartContainer id='BusinessCartContainer' isProfessional={business?.professionals?.length > 0 && !useKioskApp}>
                     <BusinessCartContent maxHeight={window.innerHeight - 100}>
                       {currentCart?.products?.length > 0 ? (
                         <>
@@ -395,11 +410,17 @@ export const RenderProductsLayout = (props) => {
               openBusinessInformation={openBusinessInformation}
             />
           )}
-          <BusinessProductsCategories
-            isSkeleton
-            categories={[]}
-            openBusinessInformation={openBusinessInformation}
-          />
+          <BusinessContent isCustomLayout={isCustomLayout || useKioskApp} id='wrapper-categories'>
+            <BusinessCategoryProductWrapper showCartOnProductList={showCartOnProductList}>
+              <div style={{ position: 'relative' }}>
+                <BusinessProductsCategories
+                  isSkeleton
+                  categories={[]}
+                  openBusinessInformation={openBusinessInformation}
+                />
+              </div>
+            </BusinessCategoryProductWrapper>
+          </BusinessContent>
           <WrapContent>
             <BusinessProductsList
               categories={[]}

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

@@ -71,6 +71,11 @@ export const BusinessCartContainer = styled(BusinessCategoriesContainer)`
   display: none;
   margin-top: 70px;
   min-width: 325px;
+  @media (min-width: 769px) {
+    ${({ isProfessional }) => isProfessional && css`
+      margin-top: 0px;
+    `}
+  }
   @media (min-width: 1000px) {
     display: block;
   }
@@ -208,7 +213,7 @@ export const WrapperSearch = styled.div`
 `
 
 export const ProfessionalFilterWrapper = styled.div`
-  margin-bottom: 50px;
+  padding-bottom: 35px;
   ${({ isTop }) => isTop && css`
     margin-top: 30px;
   `}