Merge pull request #332 from sledilnik/list-add-xtra-clinic-badge

List add xtra clinic badge + remove accessibility % and add extra circle chart for over 100%
sledilnik · Feb 13, 2023 · 84b504c · 84b504c
2 parents 9a338fc + 470d130
commit 84b504c
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 56 deletions.
diff --git a/src/components/DoctorCard/Info/index.js b/src/components/DoctorCard/Info/index.js
@@ -15,7 +15,7 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
   const [type, ageGroup] = doctor.type.split('-');
 
   const navigate = useNavigate();
-
+  const viewType = isMarker ? 'marker' : 'list';
   const drPath = doctor?.type;
   const slug = doctor?.nameSlug;
   const instId = doctor?.instId;
@@ -42,12 +42,22 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
   return (
     <>
       <CardContent>
-        <Typography component="h2" variant="h2" translate="no">
-          <Shared.LinkNoRel href={path} onClick={e => handleDoctorCard(e, false)}>
-            {doctor.name}
-          </Shared.LinkNoRel>
-        </Typography>
-        {isMarker && <Shared.DoubleChip type={type} ageGroup={ageGroup} isExtra={doctor.isExtra} />}
+        <Stack
+          direction={isMarker ? 'column' : 'row'}
+          alignItems={isMarker ? 'flex-start' : 'center'}
+        >
+          <Typography component="h2" variant="h2" translate="no">
+            <Shared.LinkNoRel href={path} onClick={e => handleDoctorCard(e, false)}>
+              {doctor.name}
+            </Shared.LinkNoRel>
+          </Typography>
+          <Shared.DoubleChip
+            type={type}
+            ageGroup={ageGroup}
+            isExtra={doctor.isExtra}
+            viewType={viewType}
+          />
+        </Stack>
         <Typography component="h3" variant="h3" translate="no">
           {doctor.provider}
         </Typography>

diff --git a/src/components/DoctorCard/PageInfo/index.js b/src/components/DoctorCard/PageInfo/index.js
@@ -83,7 +83,12 @@ const PageInfo = function PageInfo({ doctor }) {
         <Typography component="h1" variant="h1" translate="no">
           {doctor.name}
         </Typography>
-        <Shared.DoubleChip type={type} ageGroup={ageGroup} isExtra={doctor.isExtra} isPageView />
+        <Shared.DoubleChip
+          type={type}
+          ageGroup={ageGroup}
+          isExtra={doctor.isExtra}
+          viewType="page"
+        />
         <Typography component="h2" variant="h2" translate="no">
           {doctor.provider}
         </Typography>

diff --git a/src/components/DoctorCard/Shared/Tooltips.js b/src/components/DoctorCard/Shared/Tooltips.js
@@ -40,9 +40,15 @@ HeadQuotient.propTypes = {
   hasOverride: PropTypes.bool,
 };
 
-export const Availability = function Availability({ date, hasOverride }) {
+export const Availability = function Availability({ date, hasOverride, availability }) {
+  const { lng } = useParams();
+  const availabilityText = toPercent(availability, lng);
+
   return (
     <Stack>
+      <Typography variant="caption" fontWeight="700">
+        {t('doctorAvailabilityLabel')}: {availabilityText}
+      </Typography>
       <Typography variant="caption">{t('doctorAvailability')}</Typography>
       {hasOverride && (
         <>
@@ -59,11 +65,13 @@ export const Availability = function Availability({ date, hasOverride }) {
 Availability.propTypes = {
   date: PropTypes.string,
   hasOverride: PropTypes.bool,
+  availability: PropTypes.number,
 };
 
 Availability.defaultProps = {
   date: undefined,
   hasOverride: undefined,
+  availability: undefined,
 };
 
 export const Updated = function Updated({

diff --git a/src/components/DoctorCard/Shared/index.js b/src/components/DoctorCard/Shared/index.js
@@ -1,4 +1,3 @@
-import { useParams } from 'react-router-dom';
 import { t } from 'i18next';
 
 import { Tooltip } from '@mui/material';
@@ -18,8 +17,6 @@ import {
 } from '../dicts';
 import * as Styled from '../styles';
 
-import { toPercent } from '../utils';
-
 import * as Tooltips from './Tooltips';
 
 export * as Tooltip from './Tooltips';
@@ -31,22 +28,22 @@ export { default as DoctorLinks } from './DoctorLinks';
 export { default as PhoneButton } from './PhoneButton';
 export { default as Accepts } from './Accepts';
 
-export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, isPageView }) {
+export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, viewType }) {
   const drType = t(TypeTranslate[type]);
   const drAgeGroup = t(AgeGroupTranslate?.[ageGroup] ?? 'adults');
   const typeIcon = TypeIconTranslate[type] ?? 'Family';
   const ageGroupIcon = AgeGroupIconTranslate?.[ageGroup] ?? 'Adults';
 
   const isDentist = type === 'den';
 
-  const first = (
+  const first = viewType !== 'list' && (
     <Styled.PageInfo.First single={!isDentist ? 1 : 0} direction="row" component="span" spacing={1}>
       <Icons.Icon name={typeIcon} className="icon" />
       <span className="text">{t(`${drType}`)}</span>
     </Styled.PageInfo.First>
   );
 
-  const second = isDentist && (
+  const second = isDentist && viewType !== 'list' && (
     <Styled.PageInfo.Second direction="row" component="span" spacing={1}>
       <span className="text">{t(`${drAgeGroup}`)}</span>
       <Icons.Icon name={ageGroupIcon} className="icon" />
@@ -56,7 +53,7 @@ export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, isPageV
   let isExtraLabel = '';
   let isExtraTooltip = t('clinicForBetterAccessibility');
 
-  if (!isPageView) {
+  if (viewType !== 'page') {
     /* empty */
   } else {
     isExtraLabel = t('clinicForBetterAccessibility');
@@ -65,15 +62,15 @@ export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, isPageV
 
   const third = isExtra && (
     <Tooltip title={isExtraTooltip} leaveTouchDelay={3000} enterTouchDelay={50}>
-      <Styled.IsExtra direction="row" alignItems="center" spacing={1} isPageView={isPageView}>
+      <Styled.IsExtra direction="row" alignItems="center" spacing={1} viewType={viewType}>
         <Icons.Icon name="ClinicViolet" />
         {isExtraLabel}
       </Styled.IsExtra>
     </Tooltip>
   );
 
   return (
-    <Styled.PageInfo.DCWrapper direction="row">
+    <Styled.PageInfo.DCWrapper direction="row" viewType={viewType}>
       {first}
       {second}
       {third}
@@ -84,14 +81,14 @@ export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, isPageV
 DoubleChip.defaultProps = {
   ageGroup: undefined,
   isExtra: false,
-  isPageView: false,
+  viewType: 'marker',
 };
 
 DoubleChip.propTypes = {
   type: PropTypes.string.isRequired,
   ageGroup: PropTypes.oneOf([undefined, 'students', 'youth']),
   isExtra: PropTypes.bool,
-  isPageView: PropTypes.bool,
+  viewType: PropTypes.oneOf(['marker', 'list', 'page']),
 };
 
 export const HeadQuotient = function HeadQuotient({ load, note, date, accepts, hasOverride }) {
@@ -123,18 +120,19 @@ HeadQuotient.propTypes = {
 };
 
 export const Availability = function Availability({ date, availability, hasOverride }) {
-  const { lng } = useParams();
-  const availabilityText = toPercent(availability, lng);
-
   return (
     <Tooltip
-      title={<Tooltips.Availability date={date} hasOverride={hasOverride} />}
+      title={
+        <Tooltips.Availability date={date} hasOverride={hasOverride} availability={availability} />
+      }
       leaveTouchDelay={3000}
       enterTouchDelay={50}
     >
       <Styled.InfoWrapper direction="row" alignItems="center" spacing={1}>
         <SingleChart size="26px" percent={availability} />
-        <Styled.Availability variant="caption">{availabilityText}</Styled.Availability>
+        {availability > 1 && (
+          <SingleChart size="18px" percent={availability - 1} stroke="#FF4C4C" inner />
+        )}
       </Styled.InfoWrapper>
     </Tooltip>
   );

diff --git a/src/components/DoctorCard/styles/PageInfo.js b/src/components/DoctorCard/styles/PageInfo.js
@@ -2,20 +2,27 @@ import { styled } from '@mui/material/styles';
 
 import Stack from '@mui/material/Stack';
 
-export const DCWrapper = styled(Stack)(({ theme }) => ({
-  color: theme.customColors.doctor.colors.chip,
-  fontSize: '0.8125rem',
-  fontWeight: 400,
-  letterSpacing: 0,
-  borderRadius: '5px',
-  marginBlock: `${theme.spacing(1)} ${theme.spacing(1.5)}`,
-  '.icon': {
-    opacity: 0.25,
-  },
-  '.text': {
-    opacity: 0.56,
-  },
-}));
+export const DCWrapper = styled(Stack)(({ theme, viewType }) => {
+  let marginBlock = `${theme.spacing(1)} ${theme.spacing(1.5)}`;
+  if (viewType === 'list') {
+    marginBlock = '0';
+  }
+
+  return {
+    color: theme.customColors.doctor.colors.chip,
+    fontSize: '0.8125rem',
+    fontWeight: 400,
+    letterSpacing: 0,
+    borderRadius: '5px',
+    marginBlock,
+    '.icon': {
+      opacity: 0.25,
+    },
+    '.text': {
+      opacity: 0.56,
+    },
+  };
+});
 
 export const First = styled(Stack)(({ theme, single }) => ({
   backgroundColor: theme.customColors.doctor.colors.chipBcg1,

diff --git a/src/components/DoctorCard/styles/index.js b/src/components/DoctorCard/styles/index.js
@@ -198,7 +198,7 @@ export const MoreMenu = styled(Menu)(({ theme }) => ({
 export const InfoWrapper = styled(Stack)(({ theme }) => ({
   color: theme.customColors.doctor.availability,
   cursor: 'help',
-  minWidth: '74.5px',
+  position: 'relative',
 }));
 
 export const AcceptsStack = styled(Stack)(({ theme, accepts }) => {
@@ -252,27 +252,43 @@ export const Link = styled(MuiLink)(({ theme }) => ({
   cursor: 'pointer',
 }));
 
-export const IsExtra = styled(Stack)(({ theme, isPageView }) => {
-  const padding = isPageView ? '5px 8px 5px 8px' : '5px 2px 5px 7px';
+export const IsExtra = styled(Stack)(({ theme, viewType }) => {
+  let iconSize = '18px';
+  let bgColor = theme.customColors.doctor.colors.extraClinicBgColor;
+  let padding = '5px 7px';
+  let iconMargin = '0';
+  let iconOpacity = '1';
+  let margin = '0 0 0 10px';
+
+  if (viewType === 'page') {
+    iconMargin = '0 5px 0 0';
+    padding = '5px 8px';
+    iconOpacity = '0.7';
+  } else if (viewType === 'list') {
+    iconSize = '20px';
+    padding = '2px 6px';
+    margin = 0;
+    bgColor = 'transparent';
+  }
 
   return {
     fontWeight: 400,
     fontSize: '12px',
-    background: theme.customColors.doctor.colors.extraClinicBgColor,
+    background: bgColor,
     color: theme.customColors.doctor.colors.extraClinicColor,
     borderRadius: '4px',
     whiteSpace: 'nowrap',
     cursor: 'help',
     padding,
-    margin: '0 0 0 10px',
+    margin,
     display: 'inline-flex',
     alignItems: 'center',
     letterSpacing: '0.3px',
     svg: {
-      width: '18px',
-      height: '18px',
-      opacity: '0.7',
-      margin: '0 5px 0 0',
+      width: iconSize,
+      height: iconSize,
+      opacity: iconOpacity,
+      margin: iconMargin,
     },
   };
 });
diff --git a/src/components/Shared/CircleChart/index.js b/src/components/Shared/CircleChart/index.js
@@ -2,10 +2,30 @@
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
-const CircleChartWrapper = styled('div')(({ theme, size, stroke }) => {
+const CircleChartWrapper = styled('div')(({ theme, size, stroke, inner }) => {
   const strokeColor = stroke ?? theme.customColors.brand;
 
+  let wrapperPosition = 'relative';
+  let wrapperLeft = 'auto';
+  let wrapperTop = 'auto';
+  let margin = 0;
+  let strokeWidth = 2.8;
+  let strokeWidthGray = 3.8;
+  if (inner) {
+    wrapperPosition = 'absolute';
+    wrapperLeft = '4px';
+    wrapperTop = '4px';
+    margin = '0 !important';
+    strokeWidth = 4;
+    strokeWidthGray = 4;
+  }
+
   return {
+    position: wrapperPosition,
+    left: wrapperLeft,
+    top: wrapperTop,
+    margin,
+
     svg: {
       display: 'block',
       margin: '10px auto',
@@ -17,11 +37,11 @@ const CircleChartWrapper = styled('div')(({ theme, size, stroke }) => {
     'svg path:first-of-type': {
       fill: 'none',
       stroke: '#eee',
-      strokeWidth: 3.8,
+      strokeWidth: strokeWidthGray,
     },
     'svg path:last-of-type': {
       fill: 'none',
-      strokeWidth: 2.8,
+      strokeWidth,
       strokeLinecap: 'round',
       animation: 'progress 1s ease-out forwards',
     },
@@ -39,9 +59,15 @@ const CircleChartWrapper = styled('div')(({ theme, size, stroke }) => {
   };
 });
 
-const CircleChart = function CircleChart({ percent = 50, stroke, size = '2rem', noText = true }) {
+const CircleChart = function CircleChart({
+  percent = 50,
+  stroke,
+  size = '2rem',
+  noText = true,
+  inner,
+}) {
   return (
-    <CircleChartWrapper size={size} stroke={stroke}>
+    <CircleChartWrapper size={size} stroke={stroke} inner={inner}>
       <svg viewBox="0 0 36 36">
         <path
           d="M18 2.0845
@@ -69,13 +95,15 @@ CircleChart.propTypes = {
   stroke: PropTypes.string,
   size: PropTypes.string,
   noText: PropTypes.bool,
+  inner: PropTypes.bool,
 };
 
 CircleChart.defaultProps = {
   percent: 50,
   stroke: undefined,
   size: '2rem',
   noText: true,
+  inner: false,
 };
 
 export default CircleChart;
diff --git a/src/const/doctors.js b/src/const/doctors.js
@@ -1,3 +1,3 @@
 export const PER_PAGE = 20;
 export const INSTITUTION_KEY = 'id_inst';
-export const TYPES = ['gp', 'ped', 'gyn', 'den', 'den-y', 'den-s'];
+export const TYPES = ['gp', 'gp-x', 'ped', 'ped-x', 'gyn', 'den', 'den-y', 'den-s'];