feat(native-app): Add medicine section (#16757)

* feat: add medicine purchase to app * feat: final fixes * feat: add support for warning text in input and add for medicine purchase if period is not active --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Nov 11, 2024 · b2a6cd3 · b2a6cd3
1 parent 5cb2c6b
commit b2a6cd3
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 21 deletions.
diff --git a/apps/native/app/src/graphql/queries/health.graphql b/apps/native/app/src/graphql/queries/health.graphql
@@ -11,6 +11,20 @@ query GetHealthInsuranceOverview {
   }
 }
 
+query GetMedicineData {
+  rightsPortalDrugPeriods {
+    id
+    dateFrom
+    dateTo
+    active
+    paidAmount
+    paymentStatus
+    numberOfBills
+    levelNumber
+    levelPercentage
+  }
+}
+
 query GetHealthCenter($input: RightsPortalHealthCenterHistoryInput) {
   rightsPortalHealthCenterRegistrationHistory(input: $input) {
     current {

diff --git a/apps/native/app/src/messages/en.ts b/apps/native/app/src/messages/en.ts
@@ -629,4 +629,10 @@ export const en: TranslatedMessages = {
   'health.overview.paymentDebt': 'Debt',
   'health.overview.therapy': 'Therapy',
   'health.overview.aidsAndNutrition': 'Aids and nutrition',
+  'health.overview.medicinePurchase': 'Medicine purchase',
+  'health.overview.period': 'Period',
+  'health.overview.levelStatus': 'Medicine step',
+  'health.overview.levelStatusValue': 'Level {level}, you pay {percentage}%',
+  'health.overview.medicinePurchaseNoActivePeriodWarning':
+    'A new payment period begins with the next medicine purchase',
 }
diff --git a/apps/native/app/src/messages/is.ts b/apps/native/app/src/messages/is.ts
@@ -629,4 +629,11 @@ export const is = {
   'health.overview.paymentDebt': 'Skuld',
   'health.overview.therapy': 'Þjálfun',
   'health.overview.aidsAndNutrition': 'Hjálpartæki og næring',
+  'health.overview.medicinePurchase': 'Lyfjakaup',
+  'health.overview.period': 'Tímabil',
+  'health.overview.levelStatus': 'Þrepastaða',
+  'health.overview.levelStatusValue':
+    'Greiðsluþrep {level}, þú greiðir {percentage}%',
+  'health.overview.medicinePurchaseNoActivePeriodWarning':
+    'Nýtt greiðslutímabil hefst við næstu lyfjakaup',
 }
diff --git a/apps/native/app/src/screens/health/health-overview.tsx b/apps/native/app/src/screens/health/health-overview.tsx
@@ -15,6 +15,7 @@ import styled, { useTheme } from 'styled-components'
 import {
   useGetHealthCenterQuery,
   useGetHealthInsuranceOverviewQuery,
+  useGetMedicineDataQuery,
   useGetPaymentOverviewQuery,
   useGetPaymentStatusQuery,
 } from '../../graphql/types/schema'
@@ -93,6 +94,7 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
 
   const now = useMemo(() => new Date().toISOString(), [])
 
+  const medicinePurchaseRes = useGetMedicineDataQuery()
   const healthInsuranceRes = useGetHealthInsuranceOverviewQuery()
   const healthCenterRes = useGetHealthCenterQuery()
   const paymentStatusRes = useGetPaymentStatusQuery()
@@ -108,10 +110,18 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
     },
   })
 
+  const medicinePurchaseData =
+    medicinePurchaseRes.data?.rightsPortalDrugPeriods?.[0]
+  const isMedicinePeriodActive =
+    medicinePurchaseData?.active ||
+    (medicinePurchaseData?.dateTo &&
+      new Date(medicinePurchaseData.dateTo) > new Date())
+
   useConnectivityIndicator({
     componentId,
     refetching,
     queryResult: [
+      medicinePurchaseRes,
       healthInsuranceRes,
       healthCenterRes,
       paymentStatusRes,
@@ -124,6 +134,7 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
 
     try {
       const promises = [
+        medicinePurchaseRes.refetch(),
         healthInsuranceRes.refetch(),
         healthCenterRes.refetch(),
         paymentStatusRes.refetch(),
@@ -136,6 +147,7 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
       setRefetching(false)
     }
   }, [
+    medicinePurchaseRes,
     healthInsuranceRes,
     healthCenterRes,
     paymentStatusRes,
@@ -376,6 +388,65 @@ export const HealthOverviewScreen: NavigationFunctionComponent = ({
               noBorder
             />
           </InputRow>
+          <HeadingSection
+            title={intl.formatMessage({
+              id: 'health.overview.medicinePurchase',
+            })}
+            onPress={() =>
+              openBrowser(
+                `${origin}/minarsidur/heilsa/lyf/lyfjakaup`,
+                componentId,
+              )
+            }
+          />
+          <InputRow background>
+            <Input
+              label={intl.formatMessage({
+                id: 'health.overview.period',
+              })}
+              value={
+                medicinePurchaseData?.dateFrom && medicinePurchaseData?.dateTo
+                  ? `${intl.formatDate(
+                      medicinePurchaseData.dateFrom,
+                    )} - ${intl.formatDate(medicinePurchaseData.dateTo)}`
+                  : ''
+              }
+              loading={medicinePurchaseRes.loading && !medicinePurchaseRes.data}
+              error={medicinePurchaseRes.error && !medicinePurchaseRes.data}
+              darkBorder
+            />
+          </InputRow>
+          <InputRow background>
+            <Input
+              label={intl.formatMessage({
+                id: 'health.overview.levelStatus',
+              })}
+              value={
+                medicinePurchaseData?.levelNumber &&
+                medicinePurchaseData?.levelPercentage
+                  ? intl.formatMessage(
+                      {
+                        id: 'health.overview.levelStatusValue',
+                      },
+                      {
+                        level: medicinePurchaseData?.levelNumber,
+                        percentage: medicinePurchaseData?.levelPercentage,
+                      },
+                    )
+                  : ''
+              }
+              loading={medicinePurchaseRes.loading && !medicinePurchaseRes.data}
+              error={medicinePurchaseRes.error && !medicinePurchaseRes.data}
+              noBorder
+              warningText={
+                !isMedicinePeriodActive
+                  ? intl.formatMessage({
+                      id: 'health.overview.medicinePurchaseNoActivePeriodWarning',
+                    })
+                  : ''
+              }
+            />
+          </InputRow>
         </Host>
       </ScrollView>
     </View>

diff --git a/apps/native/app/src/ui/lib/input/input.tsx b/apps/native/app/src/ui/lib/input/input.tsx
@@ -6,6 +6,7 @@ import CopyIcon from '../../assets/icons/copy.png'
 import { dynamicColor } from '../../utils'
 import { Skeleton } from '../skeleton/skeleton'
 import { Typography } from '../typography/typography'
+import { Label } from '@ui'
 
 const Host = styled.SafeAreaView<{
   noBorder: boolean
@@ -35,10 +36,15 @@ const Content = styled.View<{ isCompact: boolean }>`
     theme.spacing[isCompact ? 1 : 3]}px;
 `
 
-const Label = styled(Typography)`
+const LabelText = styled(Typography)`
   margin-bottom: ${({ theme }) => theme.spacing[1]}px;
 `
 
+const WarningMessage = styled.View`
+  margin-top: ${({ theme }) => theme.spacing[2]}px;
+  flex-direction: row;
+`
+
 interface InputProps {
   label: string
   value?: string | null
@@ -50,6 +56,7 @@ interface InputProps {
   isCompact?: boolean
   darkBorder?: boolean
   copy?: boolean
+  warningText?: string
 }
 
 export function Input({
@@ -63,42 +70,52 @@ export function Input({
   isCompact = false,
   darkBorder = false,
   copy = false,
+  warningText = '',
 }: InputProps) {
   const tvalue =
     value !== undefined && typeof value === 'string' && value.trim()
 
   return (
     <Host noBorder={noBorder} darkBorder={darkBorder}>
       <Content isCompact={isCompact}>
-        <Label variant="body3">{label}</Label>
+        <LabelText variant="body3">{label}</LabelText>
         {loading || error ? (
           <Skeleton
             active={loading}
             error={error}
             height={size === 'big' ? 26 : undefined}
           />
         ) : (
-          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-            <Typography
-              testID={valueTestID}
-              selectable
-              variant={size === 'normal' ? 'heading5' : 'heading3'}
-            >
-              {tvalue === '' || !value ? '-' : value}
-            </Typography>
-            {copy && (
-              <TouchableOpacity
-                onPress={() => Clipboard.setString(value ?? '')}
-                style={{ marginLeft: 4 }}
+          <>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Typography
+                testID={valueTestID}
+                selectable
+                variant={size === 'normal' ? 'heading5' : 'heading3'}
               >
-                <Image
-                  source={CopyIcon}
-                  style={{ width: 24, height: 24 }}
-                  resizeMode="contain"
-                />
-              </TouchableOpacity>
+                {tvalue === '' || !value ? '-' : value}
+              </Typography>
+              {copy && (
+                <TouchableOpacity
+                  onPress={() => Clipboard.setString(value ?? '')}
+                  style={{ marginLeft: 4 }}
+                >
+                  <Image
+                    source={CopyIcon}
+                    style={{ width: 24, height: 24 }}
+                    resizeMode="contain"
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+            {warningText && (
+              <WarningMessage>
+                <Label color="warning" icon>
+                  {warningText}
+                </Label>
+              </WarningMessage>
             )}
-          </View>
+          </>
         )}
       </Content>
     </Host>