ordering-ui-external 1.3.2 → 1.4.0

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}`
+}