ordering-ui-external 1.3.2 → 1.4.1

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

@@ -11,6 +11,8 @@ import BiStore from '@meronex/icons/bi/BiStore'
 import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
 import BiHelpCircle from '@meronex/icons/bi/BiHelpCircle'
 import SiJsonwebtokens from '@meronex/icons/si/SiJsonwebtokens'
+import BiMessageDetail from '@meronex/icons/bi/BiMessageDetail'
+import BsSearch from '@meronex/icons/bs/BsSearch'
 import { Heart, Tag } from 'react-bootstrap-icons'
 
 import { useEvent, useLanguage, useOrder, useSession, useConfig } from 'ordering-components-external'
@@ -196,6 +198,64 @@ export const SidebarMenu = (props) => {
 
           {auth && (
             <>
+              <MenuLink
+                onClick={() => handleGoToPage({ page: 'business_search' })}
+              >
+                <WrappContent>
+                  <MenuLinkIcon
+                    active={
+                      window.location.pathname === '/business_search'
+                    }
+                  >
+                    <BsSearch />
+                  </MenuLinkIcon>
+                  <MenuLinkText>
+                    <TextInfo
+                      active={
+                        window.location.pathname === '/business_search'
+                      }
+                    >
+                      {t('BROWSE_SEARCH', 'Browse & Search')}
+                    </TextInfo>
+                  </MenuLinkText>
+                  <MenuLinkSeparator>
+                    <div>
+                      <hr />
+                    </div>
+                  </MenuLinkSeparator>
+                </WrappContent>
+              </MenuLink>
+              {
+                !isCustomerMode && (
+                  <MenuLink
+                    onClick={() => handleGoToPage({ page: 'orders' })}
+                  >
+                    <WrappContent>
+                      <MenuLinkIcon
+                        active={
+                          window.location.pathname === '/profile/orders'
+                        }
+                      >
+                        <FaRegListAlt />
+                      </MenuLinkIcon>
+                      <MenuLinkText>
+                        <TextInfo
+                          active={
+                            window.location.pathname === '/profile/orders'
+                          }
+                        >
+                          {t('ORDERS', 'Orders')}
+                        </TextInfo>
+                      </MenuLinkText>
+                      <MenuLinkSeparator>
+                        <div>
+                          <hr />
+                        </div>
+                      </MenuLinkSeparator>
+                    </WrappContent>
+                  </MenuLink>
+                )
+              }
               <MenuLink
                 onClick={() => handleGoToPage({ page: 'profile' })}
               >
@@ -213,7 +273,7 @@ export const SidebarMenu = (props) => {
                         window.location.pathname === '/profile'
                       }
                     >
-                      {t('PROFILE', 'Profile')}
+                      {t('VIEW_ACCOUNT', 'View account')}
                     </TextInfo>
                   </MenuLinkText>
                   <MenuLinkSeparator>
@@ -283,23 +343,23 @@ export const SidebarMenu = (props) => {
               )}
 
               <MenuLink
-                onClick={() => handleGoToPage({ page: 'help' })}
+                onClick={() => handleGoToPage({ page: 'messages' })}
               >
                 <WrappContent>
                   <MenuLinkIcon
                     active={
-                      window.location.pathname === '/help'
+                      window.location.pathname === '/messages'
                     }
                   >
-                    <BiHelpCircle />
+                    <BiMessageDetail />
                   </MenuLinkIcon>
                   <MenuLinkText>
                     <TextInfo
                       active={
-                        window.location.pathname === '/help'
+                        window.location.pathname === '/messages'
                       }
                     >
-                      {t('HELP', 'help')}
+                      {t('MESSAGES', 'Messages')}
                     </TextInfo>
                   </MenuLinkText>
                   <MenuLinkSeparator>
@@ -309,24 +369,25 @@ export const SidebarMenu = (props) => {
                   </MenuLinkSeparator>
                 </WrappContent>
               </MenuLink>
+
               <MenuLink
-                onClick={() => handleGoToPage({ page: 'favorite' })}
+                onClick={() => handleGoToPage({ page: 'help' })}
               >
                 <WrappContent>
                   <MenuLinkIcon
                     active={
-                      window.location.pathname === '/favorite'
+                      window.location.pathname === '/help'
                     }
                   >
-                    <Heart />
+                    <BiHelpCircle />
                   </MenuLinkIcon>
                   <MenuLinkText>
                     <TextInfo
                       active={
-                        window.location.pathname === '/favorite'
+                        window.location.pathname === '/help'
                       }
                     >
-                      {t('FAVORITES', 'Favorites')}
+                      {t('HELP', 'help')}
                     </TextInfo>
                   </MenuLinkText>
                   <MenuLinkSeparator>
@@ -363,38 +424,33 @@ export const SidebarMenu = (props) => {
                   </MenuLinkSeparator>
                 </WrappContent>
               </MenuLink>
-              {
-                !isCustomerMode && (
-                  <MenuLink
-                    onClick={() => handleGoToPage({ page: 'orders' })}
+              <MenuLink
+                onClick={() => handleGoToPage({ page: 'favorite' })}
+              >
+                <WrappContent>
+                  <MenuLinkIcon
+                    active={
+                      window.location.pathname === '/favorite'
+                    }
                   >
-                    <WrappContent>
-                      <MenuLinkIcon
-                        active={
-                          window.location.pathname === '/profile/orders'
-                        }
-                      >
-                        <FaRegListAlt />
-                      </MenuLinkIcon>
-                      <MenuLinkText>
-                        <TextInfo
-                          active={
-                            window.location.pathname === '/profile/orders'
-                          }
-                        >
-                          {t('ORDERS', 'Orders')}
-                        </TextInfo>
-                      </MenuLinkText>
-                      <MenuLinkSeparator>
-                        <div>
-                          <hr />
-                        </div>
-                      </MenuLinkSeparator>
-                    </WrappContent>
-                  </MenuLink>
-                )
-              }
-
+                    <Heart />
+                  </MenuLinkIcon>
+                  <MenuLinkText>
+                    <TextInfo
+                      active={
+                        window.location.pathname === '/favorite'
+                      }
+                    >
+                      {t('FAVORITES', 'Favorites')}
+                    </TextInfo>
+                  </MenuLinkText>
+                  <MenuLinkSeparator>
+                    <div>
+                      <hr />
+                    </div>
+                  </MenuLinkSeparator>
+                </WrappContent>
+              </MenuLink>
               <LogoutButton onCustomClick={() => actionSidebar(false)} />
             </>
           )}

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

@@ -188,7 +188,11 @@ export const QuantityContainer = styled.div`
   height: 25px;
   text-align: center;
   border-radius: 50%;
-  transform: translate(-50%, 50%);
+  transform: translate(-20px, 50%);
+
+  @media (min-width: 768px) {
+    transform: translate(-50%, 50%);
+  }
 `
 
 export const RibbonBox = styled.div`

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

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { InfoCircle, Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
+import { useSession, SingleProfessionalCard as SingleProfessionalCardController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { ProfessionalInfo } from '../ProfessionalInfo'
+import { Modal } from '../Modal'
+import {
+  Container,
+  UserPhoto,
+  InfoWrapper,
+  ActionWrapper
+} from './styles'
+
+const SingleProfessionalCardUI = (props) => {
+  const {
+    professional,
+    isSkeleton,
+    handleFavoriteProfessional
+  } = props
+
+  const [{ auth }] = useSession()
+  const [open, setOpen] = useState(false)
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteProfessional && handleFavoriteProfessional(!professional?.favorite)
+    }
+  }
+
+  const handleOpenProfileInfo = () => {
+    setOpen(true)
+  }
+
+  return (
+    <>
+      <Container>
+        {isSkeleton ? (
+          <Skeleton style={{ width: '86px', height: '86px' }} />
+        ) : (
+          <UserPhoto bgimage={professional?.photo} />
+        )}
+        <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>
+            {isSkeleton ? (
+              <>
+                <Skeleton width={16} height={16} />
+                <Skeleton width={16} height={16} style={{ margin: '0px 7px' }} />
+              </>
+            ) : (
+              <>
+                <InfoCircle className='info' onClick={() => handleOpenProfileInfo()} />
+                <span onClick={() => handleChangeFavorite()}>
+                  {professional?.favorite ? <Like /> : <DisLike />}
+                </span>
+              </>
+            )}
+          </ActionWrapper>
+        </InfoWrapper>
+      </Container>
+      <Modal
+        open={open}
+        width='760px'
+        padding='0'
+        onClose={() => setOpen(false)}
+      >
+        <ProfessionalInfo
+          userId={professional?.id}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export const SingleProfessionalCard = (props) => {
+  const singleProfessionalCardProps = {
+    ...props,
+    UIComponent: SingleProfessionalCardUI
+  }
+  return <SingleProfessionalCardController {...singleProfessionalCardProps} />
+}

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

@@ -0,0 +1,92 @@
+import styled, { css } from 'styled-components'
+import React from 'react'
+
+export const Container = styled.div`
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 12px 14px;
+  display: flex;
+  align-items: center;
+  background-color: ${props => props.theme.colors.backgroundPage};
+  border: 1px solid ${props => props.theme.colors.gray200};
+  box-sizing: border-box;
+  margin: 10px;
+`
+
+const UserPhotoStyled = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  background-position: center;
+  object-fit: cover;
+  min-height: 86px;
+  width: 86px;
+  height: 86px;
+  border-radius: 4px;
+
+  ${({ isSkeleton }) => isSkeleton && css`
+    background-color: ${props => props.theme.colors.gray200};
+  `}
+`
+export const UserPhoto = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+  return (
+    <UserPhotoStyled {...props} style={style}>
+      {props.children}
+    </UserPhotoStyled>
+  )
+}
+
+export const InfoWrapper = styled.div`
+  width: calc(100% - 106px);
+  margin-left: 20px;
+  ${props => props.theme.rtl && css`
+    margin-left: 0px;
+    margin-right: 20px;
+  `}
+  > h4 {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  p {
+    margin-top: 2px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 22px;
+  }
+`
+
+export const ActionWrapper = styled.div`
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  > .info {
+    cursor: pointer;
+    font-size: 16px;
+    margin-right: 7px;
+    ${props => props.theme.rtl && css`
+      margin-right: 0px;
+      margin-left: 7px;
+    `}
+  }
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    svg {
+      color: ${props => props.theme.colors.danger500};
+      font-size: 16px;
+      margin-top: 2px;
+    }
+  }
+`

package/src/themes/five/src/styles/Selects/index.js

@@ -43,6 +43,7 @@ export const Options = styled.div`
   border-color: #CCC;
   border-radius: 15px;
   overflow: hidden;
+
   ${({ position }) => position?.toLowerCase() === 'left' && css`
     left: 0;
     margin-left: -1px;

package/template/Utils/index.js

@@ -0,0 +1,4 @@
+export const checkSiteUrl = (url, fallback) => {
+  if (!url) return fallback
+  return url[0] === '/' ? url : `/${url}`
+}