diff --git a/libs/portals/my-pages/social-insurance-maintenance/src/lib/messages.ts b/libs/portals/my-pages/social-insurance-maintenance/src/lib/messages.ts index f90f69b54bab..233106923711 100644 --- a/libs/portals/my-pages/social-insurance-maintenance/src/lib/messages.ts +++ b/libs/portals/my-pages/social-insurance-maintenance/src/lib/messages.ts @@ -122,9 +122,9 @@ export const m = defineMessages({ id: 'sp.social-insurance-maintenance:income-plan-link-text', defaultMessage: 'Hvað er tekjuáætlun?', }, - incomePlanTemporarilyUnavailable: { - id: 'sp.social-insurance-maintenance:income-plan-temporarily-unavailable', + paymentPlanTemporarilyUnavailable: { + id: 'sp.social-insurance-maintenance:payment-plan-temporarily-unavailable', defaultMessage: - 'Bráðabirgðatekjuáætlun 2025 verður tilbúin seinni part desember', + 'Bráðabirgðagreiðsluáætlun 2025 verður tilbúin seinni part desember', }, }) diff --git a/libs/portals/my-pages/social-insurance-maintenance/src/screens/PaymentPlan/PaymentPlan.tsx b/libs/portals/my-pages/social-insurance-maintenance/src/screens/PaymentPlan/PaymentPlan.tsx index 35e746a9b6c0..fd05bd116943 100644 --- a/libs/portals/my-pages/social-insurance-maintenance/src/screens/PaymentPlan/PaymentPlan.tsx +++ b/libs/portals/my-pages/social-insurance-maintenance/src/screens/PaymentPlan/PaymentPlan.tsx @@ -1,27 +1,76 @@ -import { Box, Divider, Stack, Text } from '@island.is/island-ui/core' +import { + AlertMessage, + Box, + Divider, + Stack, + Text, +} from '@island.is/island-ui/core' import { useLocale, useNamespaces } from '@island.is/localization' import { Problem } from '@island.is/react-spa/shared' import { - FootNote, - IntroHeader, + IntroWrapper, LinkButton, UserInfoLine, amountFormat, m as coreMessages, } from '@island.is/portals/my-pages/core' import { m } from '../../lib/messages' -import { useGetPreviousPaymentsQuery } from './PaymentPlan.generated' import { PaymentGroupTable } from '../../components' +import { useEffect, useState } from 'react' +import { useFeatureFlagClient } from '@island.is/react/feature-flags' +import { useGetPreviousPaymentsLazyQuery } from './PaymentPlan.generated' const PaymentPlan = () => { useNamespaces('sp.social-insurance-maintenance') const { formatMessage } = useLocale() - const { data, loading, error } = useGetPreviousPaymentsQuery() + const [displayPaymentPlan, setDisplayPaymentPlan] = useState(false) + const [query, { data, loading, error }] = useGetPreviousPaymentsLazyQuery() + + const featureFlagClient = useFeatureFlagClient() + useEffect(() => { + const isFlagEnabled = async () => { + const ffEnabled = await featureFlagClient.getValue( + `isServicePortalPaymentPlan2025Enabled`, + false, + ) + if (ffEnabled) { + setDisplayPaymentPlan(ffEnabled as boolean) + } + } + isFlagEnabled() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + useEffect(() => { + if (displayPaymentPlan) { + query() + } + }, [displayPaymentPlan]) + + if (!displayPaymentPlan) { + return ( + + + + ) + } return ( - { serviceProviderTooltip={formatMessage( coreMessages.socialInsuranceTooltip, )} - /> - {error && !loading ? ( - - ) : !error && !loading && !data?.socialInsurancePayments ? ( - - ) : ( - <> - - - - - - - + > + {error && !loading ? ( + + ) : !error && !loading && !data?.socialInsurancePayments ? ( + + ) : ( + <> + + + + + + + - - {formatMessage(coreMessages.period)} - + + {formatMessage(coreMessages.period)} + - - - - - {formatMessage(m.maintenanceFooter)} - {formatMessage(m.maintenanceFooterLink, { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - link: (str: any) => ( - - ), - })} - - - - )} - + + + + + {formatMessage(m.maintenanceFooter)} + {formatMessage(m.maintenanceFooterLink, { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + link: (str: any) => ( + + ), + })} + + + + )} + ) }