From f1defc6f5a634ab492be336158711cf5db273c32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9Eorkell=20M=C3=A1ni=20=C3=9Eorkelsson?= Date: Fri, 3 Jan 2025 15:14:36 +0000 Subject: [PATCH 1/2] feat: integrate new modal --- libs/feature-flags/src/lib/features.ts | 4 + .../core/src/components/Modal/Modal.css.ts | 6 +- .../HealthCenterRegistration.tsx | 221 +++++++++++++----- 3 files changed, 175 insertions(+), 56 deletions(-) diff --git a/libs/feature-flags/src/lib/features.ts b/libs/feature-flags/src/lib/features.ts index 858df10f9027..d40bf1ad593e 100644 --- a/libs/feature-flags/src/lib/features.ts +++ b/libs/feature-flags/src/lib/features.ts @@ -77,6 +77,10 @@ export enum Features { licenseServiceDrivingLicenseClient = 'isLicenseServiceDrivingLicenceClientV2Enabled', licenseServiceDrivingLicencePhotoCheckDisabled = 'isLicenseServiceDrivingLicencePhotoCheckDisabled', + //Use new modal for health + isServicePortalDentistRegistrationModalV2Enabled = 'isServicePortalDentistRegistrationModalV2Enabled', + isServicePortalHealthCenterRegistrationModalV2Enabled = 'isServicePortalHealthCenterRegistrationModalV2Enabled', + //Enable intellectual properties fetch isIntellectualPropertyModuleEnabled = 'isIntellectualPropertyModuleEnabled', diff --git a/libs/portals/my-pages/core/src/components/Modal/Modal.css.ts b/libs/portals/my-pages/core/src/components/Modal/Modal.css.ts index a471a7f93337..6a3f4b2d2218 100644 --- a/libs/portals/my-pages/core/src/components/Modal/Modal.css.ts +++ b/libs/portals/my-pages/core/src/components/Modal/Modal.css.ts @@ -2,11 +2,13 @@ import { style } from '@vanilla-extract/css' import { theme, themeUtils } from '@island.is/island-ui/theme' export const modal = style({ - position: 'relative', + position: 'absolute', maxWidth: `calc(100% - ${theme.spacing['6']}px)`, maxHeight: `calc(100% - ${theme.spacing['6']}px)`, - margin: theme.spacing['3'], borderRadius: theme.border.radius.large, + top: '40%', + left: '50%', + transform: 'translate(-50%, -50%)', overflowY: 'auto', boxShadow: '0px 4px 70px rgba(0, 97, 255, 0.1)', ...themeUtils.responsiveStyle({ diff --git a/libs/portals/my-pages/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx b/libs/portals/my-pages/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx index 5e02f5f00729..5ceb860fb787 100644 --- a/libs/portals/my-pages/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx +++ b/libs/portals/my-pages/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx @@ -10,6 +10,7 @@ import { Button, FilterInput, Tooltip, + Select, } from '@island.is/island-ui/core' import { useLocale, useNamespaces } from '@island.is/localization' import { IntroHeader } from '@island.is/portals/core' @@ -17,6 +18,7 @@ import { EmptyState, ErrorScreen, ExcludesFalse, + Modal, } from '@island.is/portals/my-pages/core' import { messages } from '../../lib/messages' import * as styles from './HealthRegistration.css' @@ -33,6 +35,7 @@ import { useGetHealthCenterQuery, useRightsPortalTransferHealthCenterMutation, } from './HealthCenterRegistration.generated' +import { Features, useFeatureFlagClient } from '@island.is/react/feature-flags' type SelectedHealthCenter = Pick @@ -65,6 +68,26 @@ const HealthCenterRegistration = () => { HealthCenterDoctorOption[] >([]) + const [selectedHealthCenterDoctor, setSelectedHealthCenterDoctor] = useState< + number | undefined + >() + + const [useModalV2, setUseModalV2] = useState(false) + const featureFlagClient = useFeatureFlagClient() + useEffect(() => { + const isFlagEnabled = async () => { + const ffEnabled = await featureFlagClient.getValue( + Features.isServicePortalHealthCenterRegistrationModalV2Enabled, + false, + ) + if (ffEnabled) { + setUseModalV2(ffEnabled as boolean) + } + } + isFlagEnabled() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + const handleOnError = () => { setSelectedHealthCenter(null) setLoadingTransfer(false) @@ -132,14 +155,15 @@ const HealthCenterRegistration = () => { } }, [errorTransfer]) + //todo: remove doctorId when V2 open const handleHealthCenterTransfer = async (doctorId?: number) => { setLoadingTransfer(true) - if (selectedHealthCenter && selectedHealthCenter?.id) { + if (selectedHealthCenter?.id) { await transferHealthCenter({ variables: { input: { id: selectedHealthCenter.id, - doctorId: doctorId, + doctorId: useModalV2 ? selectedHealthCenterDoctor : doctorId, }, }, }) @@ -242,22 +266,25 @@ const HealthCenterRegistration = () => { )} - - { - setSelectedHealthCenter(null) - setHealthCenterDoctors([]) - }} - onAccept={handleHealthCenterTransfer} - isVisible={!!selectedHealthCenter} - buttonLoading={loadingTransfer} - healthCenterDoctors={healthCenterDoctors} - /> + {!useModalV2 && ( + { + setSelectedHealthCenter(null) + setHealthCenterDoctors([]) + }} + onAccept={handleHealthCenterTransfer} + isVisible={!!selectedHealthCenter} + buttonLoading={loadingTransfer} + healthCenterDoctors={healthCenterDoctors} + /> + )} { - {healthCenter.canRegister ? ( - - + + )} + {!useModalV2 && !healthCenter.canRegister && ( + {formatMessage( - messages.healthRegistrationSave, + messages.healthCenterNotAvailableForRegistration, )} - - - ) : ( - - {formatMessage( - messages.healthCenterNotAvailableForRegistration, - )} - + + )} + {useModalV2 && ( + { + setSelectedHealthCenter(null) + setHealthCenterDoctors([]) + }} + title={formatMessage( + messages.healthCenterRegistrationModalTitle, + { + healthCenter: + selectedHealthCenter?.name, + }, )} - placement="right" - /> - - )} + buttons={[ + { + id: 'RegisterHealthCenterModalAccept', + type: 'primary' as const, + text: formatMessage( + messages.healthRegisterModalAccept, + ), + onClick: handleHealthCenterTransfer, + }, + { + id: 'RegisterHealthCenterModalDecline', + type: 'ghost' as const, + text: formatMessage( + messages.healthRegisterModalDecline, + ), + onClick: () => { + setSelectedHealthCenter(null) + setHealthCenterDoctors([]) + }, + }, + ]} + disclosure={ + + } + > + {healthCenterDoctors?.length ? ( + +