Merge pull request #330 from sledilnik/better-accessibility-clinics

ADD: Show badge for doctors in better accessibility clinics

src/components/DoctorCard/Info/index.js

@@ -47,14 +47,13 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
             {doctor.name}
           </Shared.LinkNoRel>
         </Typography>
-        {isMarker && <Shared.DoubleChip type={type} ageGroup={ageGroup} />}
+        {isMarker && <Shared.DoubleChip type={type} ageGroup={ageGroup} isExtra={doctor.isExtra} />}
         <Typography component="h3" variant="h3">
           {doctor.provider}
         </Typography>
         <Typography component="address" variant="body2">
           {doctor.fullAddress}
         </Typography>
-
         <Stack direction={isMarker ? 'column' : 'row'} justifyContent="space-between">
           <Stack direction="row" alignItems="center" spacing={1}>
             <Shared.HeadQuotient

src/components/DoctorCard/PageInfo/index.js

@@ -83,7 +83,7 @@ const PageInfo = function PageInfo({ doctor }) {
         <Typography component="h1" variant="h1">
           {doctor.name}
         </Typography>
-        <Shared.DoubleChip type={type} ageGroup={ageGroup} />
+        <Shared.DoubleChip type={type} ageGroup={ageGroup} isExtra={doctor.isExtra} isPageView />
         <Typography component="h2" variant="h2">
           {doctor.provider}
         </Typography>

src/components/DoctorCard/Shared/index.js

@@ -31,7 +31,7 @@ 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 }) {
+export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, isPageView }) {
   const drType = t(TypeTranslate[type]);
   const drAgeGroup = t(AgeGroupTranslate?.[ageGroup] ?? 'adults');
   const typeIcon = TypeIconTranslate[type] ?? 'Family';
@@ -53,21 +53,45 @@ export const DoubleChip = function DoubleChip({ type, ageGroup }) {
     </Styled.PageInfo.Second>
   );
 
+  let isExtraLabel = '';
+  let isExtraTooltip = t('clinicForBetterAccessibility');
+
+  if (!isPageView) {
+    /* empty */
+  } else {
+    isExtraLabel = t('clinicForBetterAccessibility');
+    isExtraTooltip = t('clinicForBetterAccessibilityDesc');
+  }
+
+  const third = isExtra && (
+    <Tooltip title={isExtraTooltip} leaveTouchDelay={3000} enterTouchDelay={50}>
+      <Styled.IsExtra direction="row" alignItems="center" spacing={1} isPageView={isPageView}>
+        <Icons.Icon name="ClinicViolet" />
+        {isExtraLabel}
+      </Styled.IsExtra>
+    </Tooltip>
+  );
+
   return (
     <Styled.PageInfo.DCWrapper direction="row">
       {first}
       {second}
+      {third}
     </Styled.PageInfo.DCWrapper>
   );
 };
 
 DoubleChip.defaultProps = {
   ageGroup: undefined,
+  isExtra: false,
+  isPageView: false,
 };
 
 DoubleChip.propTypes = {
   type: PropTypes.string.isRequired,
   ageGroup: PropTypes.oneOf([undefined, 'students', 'youth']),
+  isExtra: PropTypes.bool,
+  isPageView: PropTypes.bool,
 };
 
 export const HeadQuotient = function HeadQuotient({ load, note, date, accepts, hasOverride }) {

src/components/DoctorCard/styles/index.js

@@ -251,3 +251,28 @@ export const Link = styled(MuiLink)(({ theme }) => ({
   color: theme.customColors.doctor.colors.link,
   cursor: 'pointer',
 }));
+
+export const IsExtra = styled(Stack)(({ theme, isPageView }) => {
+  const padding = isPageView ? '5px 8px 5px 8px' : '5px 2px 5px 7px';
+
+  return {
+    fontWeight: 400,
+    fontSize: '12px',
+    background: theme.customColors.doctor.colors.extraClinicBgColor,
+    color: theme.customColors.doctor.colors.extraClinicColor,
+    borderRadius: '4px',
+    whiteSpace: 'nowrap',
+    cursor: 'help',
+    padding,
+    margin: '0 0 0 10px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    letterSpacing: '0.3px',
+    svg: {
+      width: '18px',
+      height: '18px',
+      opacity: '0.7',
+      margin: '0 5px 0 0',
+    },
+  };
+});

src/components/Shared/Icons.js

@@ -49,6 +49,7 @@ import { ReactComponent as More } from 'assets/icon-more.svg';
 import { ReactComponent as Booking } from 'assets/icon-booking.svg';
 import { ReactComponent as Edit } from 'assets/icon-edit.svg';
 import { ReactComponent as Email } from 'assets/icon-email.svg';
+import { ReactComponent as ClinicViolet } from 'assets/icon-clinic--violet.svg';
 
 export {
   Menu as MenuIcon,
@@ -117,6 +118,7 @@ const icons = {
   Booking,
   Edit,
   Email,
+  ClinicViolet,
 };
 
 export const Icon = function Icon({ name, ...props }) {

src/const/theme.js

@@ -36,6 +36,8 @@ const theme = {
         chip: colors.dark,
         chipBcg1: '#F5F5F1',
         chipBcg2: '#EAEAE3',
+        extraClinicColor: '#5C11D2',
+        extraClinicBgColor: '#E6D6FF',
       },
       opacity: {
         type: 0.56,

src/locales/en.json

@@ -18,6 +18,8 @@
     "adults": "adults",
     "students": "students",
     "youth": "youth",
+    "clinicForBetterAccessibility": "Clinic for better accessibility",
+    "clinicForBetterAccessibilityDesc": "In clinics for better accessibility, insured persons who do not have a personal doctor (GP or Pediatrician) can choose their personal doctor (in case there is no available doctor or if the chosen personal doctor is permanently absent).",
     "doctorCard": {
         "more": "More",
         "showOnMap": "Show on map",

src/locales/it.json

@@ -23,6 +23,8 @@
     },
     "pediatrician": "pediatra",
     "youth": "giovani",
+    "clinicForBetterAccessibility": "Clinica per una migliore accessibilità",
+    "clinicForBetterAccessibilityDesc": "Negli ambulatori per una migliore accessibilità, gli assicurati che non hanno un medico personale (medico di base o pediatra) possono scegliere il proprio medico personale (in caso non ci sia un medico disponibile o se il medico personale prescelto è permanentemente assente).",
     "search": "Cerca…",
     "generalPractitioner": "medico di medicina generale",
     "filter": "Filtro",

src/locales/sl.json

@@ -18,6 +18,8 @@
     "adults": "odrasli",
     "students": "študenti",
     "youth": "mladina",
+    "clinicForBetterAccessibility": "Ambulanta za boljšo dostopnost",
+    "clinicForBetterAccessibilityDesc": "V ambulantah za boljšo dostopnost si izbranega osebnega zdravnika lahko izberejo zavarovane osebe, ki v dejavnosti splošne ambulante in dispanzerju za otroke in šolarje nimajo izbranega osebnega zdravnika (sploh nimajo veljavne izbire, ali je izbrani osebni zdravnik trajno odsoten).",
     "doctorCard": {
         "more": "Več",
         "showOnMap": "Pokaži na zemljevidu",

src/services/doctors.js

@@ -51,6 +51,7 @@ export function createDoctor(doctor, inst) {
   };
 
   const addressObject = getAddressObject(doctor, institution);
+  const isExtra = doctor.type.match(/-x$/);
 
   const {
     accepts: acceptsZZZS,
@@ -139,7 +140,13 @@ export function createDoctor(doctor, inst) {
     get searchAddress() {
       return `${addressObject.street}, ${addressObject.postalCode} ${addressObject.city} ${addressObject.municipalityPart} ${addressObject.municipality}`;
     },
+    get isExtra() {
+      return isExtra;
+    },
     get type() {
+      if (isExtra) {
+        return doctor.type.replace(/-x$/, '');
+      }
       return doctor.type;
     },
     get updatedAt() {