From 317237b84e7aa94010d68050b365540b673ff933 Mon Sep 17 00:00:00 2001 From: bananica Date: Mon, 13 Feb 2023 10:04:42 +0100 Subject: [PATCH] ADD: Show badge for doctors in better accessibility clinics For doctors in better accessibility clinics show badge on the map info window (only icon + tooltip) and on the doctor page (icon with label + longer desc tooltip). --- src/assets/icon-clinic--violet.svg | 11 +++++++++ src/components/DoctorCard/Info/index.js | 3 +-- src/components/DoctorCard/PageInfo/index.js | 2 +- src/components/DoctorCard/Shared/index.js | 26 ++++++++++++++++++++- src/components/DoctorCard/styles/index.js | 25 ++++++++++++++++++++ src/components/Shared/Icons.js | 2 ++ src/const/theme.js | 2 ++ src/locales/en.json | 2 ++ src/locales/it.json | 2 ++ src/locales/sl.json | 2 ++ src/services/doctors.js | 7 ++++++ 11 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 src/assets/icon-clinic--violet.svg diff --git a/src/assets/icon-clinic--violet.svg b/src/assets/icon-clinic--violet.svg new file mode 100644 index 00000000..1cf3295e --- /dev/null +++ b/src/assets/icon-clinic--violet.svg @@ -0,0 +1,11 @@ + + + icon-clinic--violet + + + + + + + + \ No newline at end of file diff --git a/src/components/DoctorCard/Info/index.js b/src/components/DoctorCard/Info/index.js index 456a7ddb..37d94ee8 100644 --- a/src/components/DoctorCard/Info/index.js +++ b/src/components/DoctorCard/Info/index.js @@ -47,14 +47,13 @@ const Info = function Info({ doctor, handleZoom = () => {}, isMarker = false }) {doctor.name} - {isMarker && } + {isMarker && } {doctor.provider} {doctor.fullAddress} - {doctor.name} - + {doctor.provider} diff --git a/src/components/DoctorCard/Shared/index.js b/src/components/DoctorCard/Shared/index.js index 830bb3d3..d6f93a96 100644 --- a/src/components/DoctorCard/Shared/index.js +++ b/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 }) { ); + let isExtraLabel = ''; + let isExtraTooltip = t('clinicForBetterAccessibility'); + + if (!isPageView) { + /* empty */ + } else { + isExtraLabel = t('clinicForBetterAccessibility'); + isExtraTooltip = t('clinicForBetterAccessibilityDesc'); + } + + const third = isExtra && ( + + + + {isExtraLabel} + + + ); + return ( {first} {second} + {third} ); }; 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 }) { diff --git a/src/components/DoctorCard/styles/index.js b/src/components/DoctorCard/styles/index.js index 44ef5e5a..8c71fd88 100644 --- a/src/components/DoctorCard/styles/index.js +++ b/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', + }, + }; +}); diff --git a/src/components/Shared/Icons.js b/src/components/Shared/Icons.js index 3c276c37..7d5535dd 100644 --- a/src/components/Shared/Icons.js +++ b/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 }) { diff --git a/src/const/theme.js b/src/const/theme.js index 2c4443fa..705f8b53 100644 --- a/src/const/theme.js +++ b/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, diff --git a/src/locales/en.json b/src/locales/en.json index b396fe61..4f3d7ead 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/locales/it.json b/src/locales/it.json index 26fbdd6b..e6b2b739 100644 --- a/src/locales/it.json +++ b/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", diff --git a/src/locales/sl.json b/src/locales/sl.json index 711173e5..e817e723 100644 --- a/src/locales/sl.json +++ b/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", diff --git a/src/services/doctors.js b/src/services/doctors.js index 14c51b51..6190c8bf 100644 --- a/src/services/doctors.js +++ b/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() {