ADD: Display gp floating clinics (gp-f)

src/components/DoctorCard/Info/index.js

@@ -55,6 +55,7 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
             type={type}
             ageGroup={ageGroup}
             isExtra={doctor.isExtra}
+            isFloating={doctor.isFloating}
             viewType={viewType}
           />
         </Stack>
@@ -74,6 +75,7 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false })
               hasOverride={doctor.acceptsOverride || doctor.note ? true : undefined}
             />
             <Shared.Availability
+              isFloating={doctor.isFloating}
               availability={doctor.availability}
               date={doctor.updatedAt && doctor.formatUpdatedAt(lng)}
               hasOverride={doctor.availabilityOverride ? true : undefined}

src/components/DoctorCard/PageInfo/index.js

@@ -87,6 +87,7 @@ const PageInfo = function PageInfo({ doctor }) {
           type={type}
           ageGroup={ageGroup}
           isExtra={doctor.isExtra}
+          isFloating={doctor.isFloating}
           viewType="page"
         />
         <Typography component="h2" variant="h2" translate="no">
@@ -111,8 +112,10 @@ const PageInfo = function PageInfo({ doctor }) {
               hasOverride={doctor.acceptsOverride || doctor.note ? true : undefined}
             />
             <Shared.Availability
+              isFloating={doctor.isFloating}
               availability={doctor.availability}
               date={doctor.updatedAt && doctor.formatUpdatedAt(lng)}
+              viewType="page"
               hasOverride={doctor.availabilityOverride ? true : undefined}
             />
           </Stack>

src/components/DoctorCard/Shared/index.js

@@ -28,7 +28,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, isExtra, viewType }) {
+export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, isFloating, viewType }) {
   const drType = t(TypeTranslate[type]);
   const drAgeGroup = t(AgeGroupTranslate?.[ageGroup] ?? 'adults');
   const typeIcon = TypeIconTranslate[type] ?? 'Family';
@@ -52,20 +52,39 @@ export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, viewTyp
 
   let isExtraLabel = '';
   let isExtraTooltip = t('clinicForBetterAccessibility');
+  let isFloatingLabel = '';
+  let isFloatingTooltip = t('floatingClinic');
 
   if (viewType !== 'page') {
     /* empty */
   } else {
     isExtraLabel = t('clinicForBetterAccessibility');
     isExtraTooltip = t('clinicForBetterAccessibilityDesc');
+    isFloatingLabel = t('floatingClinic');
+    isFloatingTooltip = t('floatingClinic');
   }
 
   const third = isExtra && (
     <Tooltip title={isExtraTooltip} leaveTouchDelay={3000} enterTouchDelay={50}>
-      <Styled.IsExtra direction="row" alignItems="center" spacing={1} viewType={viewType}>
+      <Styled.IsSpecial direction="row" alignItems="center" spacing={1} viewType={viewType}>
         <Icons.Icon name="ClinicViolet" />
         {isExtraLabel}
-      </Styled.IsExtra>
+      </Styled.IsSpecial>
+    </Tooltip>
+  );
+
+  const fourth = isFloating && (
+    <Tooltip title={isFloatingTooltip} leaveTouchDelay={3000} enterTouchDelay={50}>
+      <Styled.IsSpecial
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        viewType={viewType}
+        type="floating"
+      >
+        <Icons.Icon name="GpFloatingBlue" />
+        {isFloatingLabel}
+      </Styled.IsSpecial>
     </Tooltip>
   );
 
@@ -74,20 +93,23 @@ export const DoubleChip = function DoubleChip({ type, ageGroup, isExtra, viewTyp
       {first}
       {second}
       {third}
+      {fourth}
     </Styled.PageInfo.DCWrapper>
   );
 };
 
 DoubleChip.defaultProps = {
   ageGroup: undefined,
   isExtra: false,
+  isFloating: false,
   viewType: 'marker',
 };
 
 DoubleChip.propTypes = {
   type: PropTypes.string.isRequired,
   ageGroup: PropTypes.oneOf([undefined, 'students', 'youth']),
   isExtra: PropTypes.bool,
+  isFloating: PropTypes.bool,
   viewType: PropTypes.oneOf(['marker', 'list', 'page']),
 };
 
@@ -119,7 +141,11 @@ HeadQuotient.propTypes = {
   hasOverride: PropTypes.bool,
 };
 
-export const Availability = function Availability({ date, availability, hasOverride }) {
+export const Availability = function Availability({ date, availability, hasOverride, isFloating }) {
+  if (isFloating) {
+    return '';
+  }
+
   return (
     <Tooltip
       title={
@@ -140,10 +166,12 @@ export const Availability = function Availability({ date, availability, hasOverr
 
 Availability.defaultProps = {
   hasOverride: false,
+  isFloating: false,
 };
 
 Availability.propTypes = {
   date: PropTypes.string.isRequired,
   availability: PropTypes.string.isRequired,
   hasOverride: PropTypes.bool,
+  isFloating: PropTypes.bool,
 };

src/components/DoctorCard/styles/index.js

@@ -215,6 +215,7 @@ export const AcceptsStack = styled(Stack)(({ theme, accepts }) => {
     display: 'flex',
     alignItems: 'center',
     letterSpacing: '0.3px',
+    margin: '11px 0',
 
     svg: {
       width: '14px',
@@ -252,9 +253,14 @@ export const Link = styled(MuiLink)(({ theme }) => ({
   cursor: 'pointer',
 }));
 
-export const IsExtra = styled(Stack)(({ theme, viewType }) => {
+export const IsSpecial = styled(Stack)(({ theme, type, viewType }) => {
   let iconSize = '18px';
   let bgColor = theme.customColors.doctor.colors.extraClinicBgColor;
+  let txtColor = theme.customColors.doctor.colors.extraClinicColor;
+  if (type === 'floating') {
+    bgColor = theme.customColors.lightBlue;
+    txtColor = theme.customColors.darkBlue;
+  }
   let padding = '5px 7px';
   let iconMargin = '0';
   let iconOpacity = '1';
@@ -264,9 +270,12 @@ export const IsExtra = styled(Stack)(({ theme, viewType }) => {
     iconMargin = '0 5px 0 0';
     padding = '5px 8px';
     iconOpacity = '0.7';
+    if (type === 'floating') {
+      iconOpacity = '1';
+    }
   } else if (viewType === 'list') {
-    iconSize = '20px';
-    padding = '2px 6px';
+    iconSize = '22px';
+    padding = '1px 6px';
     margin = 0;
     bgColor = 'transparent';
   }
@@ -275,7 +284,7 @@ export const IsExtra = styled(Stack)(({ theme, viewType }) => {
     fontWeight: 400,
     fontSize: '12px',
     background: bgColor,
-    color: theme.customColors.doctor.colors.extraClinicColor,
+    color: txtColor,
     borderRadius: '4px',
     whiteSpace: 'nowrap',
     cursor: 'help',

src/components/Doctors/Markers.js

@@ -39,7 +39,10 @@ export const Doctor = memo(({ doctor }) => {
   const ref = createRef(null);
   const theme = useTheme();
   const { palette } = theme;
-  const fillColor = doctor.accepts === 'y' ? palette.success.main : palette.error.main;
+  let fillColor = doctor.accepts === 'y' ? palette.success.main : palette.error.main;
+  if (doctor.type === 'gp-f' && doctor.accepts === 'y') {
+    fillColor = '#3d93b9';
+  }
   return (
     <Markers.LeafletCircleMarker
       ref={ref}

src/components/Shared/Icons.js

@@ -50,6 +50,7 @@ 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';
+import { ReactComponent as GpFloatingBlue } from 'assets/icon-gp-floating--blue.svg';
 
 export {
   Menu as MenuIcon,
@@ -119,6 +120,7 @@ const icons = {
   Edit,
   Email,
   ClinicViolet,
+  GpFloatingBlue,
 };
 
 export const Icon = function Icon({ name, ...props }) {

src/const/doctors.js

@@ -1,3 +1,3 @@
 export const PER_PAGE = 20;
 export const INSTITUTION_KEY = 'id_inst';
-export const TYPES = ['gp', 'gp-x', 'ped', 'ped-x', 'gyn', 'den', 'den-y', 'den-s'];
+export const TYPES = ['gp', 'gp-x', 'gp-f', 'ped', 'ped-x', 'gyn', 'den', 'den-y', 'den-s'];

src/const/theme.js

@@ -6,6 +6,7 @@ const colors = {
   successDark: '#81B130',
   dark: '#212529',
   darkBlue: '#104856',
+  lightBlue: '#d7eeff',
   lightGrey: '#CDCDCD',
   background: '#E8EFF0',
   backgroundLight: '#F4F8F8',

src/locales/en.json

@@ -18,6 +18,7 @@
     "adults": "adults",
     "students": "students",
     "youth": "youth",
+    "floatingClinic": "Infirmary for patients without doctors",
     "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": {

src/locales/it.json

@@ -23,6 +23,7 @@
     },
     "pediatrician": "pediatra",
     "youth": "giovani",
+    "floatingClinic": "Ambulatorio per pazienti senza medico",
     "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…",

src/locales/sl.json

@@ -18,6 +18,7 @@
     "adults": "odrasli",
     "students": "študenti",
     "youth": "mladina",
+    "floatingClinic": "Ambulanta za neopredeljene",
     "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": {

src/services/doctors.js

@@ -52,6 +52,7 @@ export function createDoctor(doctor, inst) {
 
   const addressObject = getAddressObject(doctor, institution);
   const isExtra = doctor.type.match(/-x$/);
+  const isFloating = doctor.type.match(/-f$/);
 
   const {
     accepts: acceptsZZZS,
@@ -143,12 +144,15 @@ export function createDoctor(doctor, inst) {
     get isExtra() {
       return isExtra;
     },
+    get isFloating() {
+      return isFloating;
+    },
     get type() {
       return doctor.type;
     },
     get typeClean() {
-      if (isExtra) {
-        return doctor.type.replace(/-x$/, '');
+      if (isExtra || isFloating) {
+        return doctor.type.replace(/-x|f$/, '');
       }
       return doctor.type;
     },
@@ -187,8 +191,13 @@ export default function createDoctors({ doctorsDict, institutionsDict }) {
 
   const filterByTypeAndAccepts = (type, accepts) => {
     let tmpByType = byType[type];
-    if (type === 'gp' && byType['gp-x']) {
-      tmpByType = tmpByType.concat(byType['gp-x']);
+    if (type === 'gp') {
+      if (byType['gp-x']) {
+        tmpByType = tmpByType.concat(byType['gp-x']);
+      }
+      if (byType['gp-f']) {
+        tmpByType = tmpByType.concat(byType['gp-f']);
+      }
     } else if (type === 'ped' && byType['ped-x']) {
       tmpByType = tmpByType.concat(byType['ped-x']);
     }