feat: UIT-198 add delete family member modal

src/_assets/icons/index.ts

@@ -15,6 +15,8 @@ export const CircledCheck = require('./circledCheck.png');
 export const Clock = require('./clock.png');
 export const Close = require('./close.png');
 export const Copy = require('./copy.png');
+export const Delete = require('./delete.png');
+export const Edit = require('./edit.png');
 export const External = require('./external.png');
 export const Family = require('./family.png');
 export const Filter = require('./filter.png');

src/_components/button/Button.tsx

@@ -9,6 +9,7 @@ import * as Styled from './style';
 export type TButtonProps = {
   accessibilityHint?: string;
   accessibilityLabel?: string;
+  backgroundColor?: ThemeColor;
   centered?: boolean;
   children?: ReactNode;
   color?: ThemeColor;
@@ -37,6 +38,7 @@ const Button: FC<TButtonProps> = ({
   loading,
   variant = 'contained',
   color,
+  backgroundColor,
   underline = true,
   fontStyle = 'bold',
   inline,
@@ -57,6 +59,7 @@ const Button: FC<TButtonProps> = ({
   return (
     <Styled.ButtonElement
       $active={isActive}
+      $backgroundColor={backgroundColor}
       $color={color}
       $inline={inline}
       $radius={radius}

src/_components/button/style.ts

@@ -11,6 +11,7 @@ export const ButtonContainer = styled.View<Pick<TButtonProps, 'inline' | 'center
 
 export const ButtonElement = styled(TouchableRipple)<{
   $active: boolean;
+  $backgroundColor: TButtonProps['backgroundColor'];
   $color: TButtonProps['color'];
   $inline: TButtonProps['inline'];
   $radius: TButtonProps['radius'];
@@ -23,7 +24,10 @@ export const ButtonElement = styled(TouchableRipple)<{
   align-items: center;
   border-radius: ${({ $inline, $radius }) => (!$radius ? '0px' : $inline ? '24px' : '16px')};
   opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
-  background-color: ${({ $active, $variant, theme }) => {
+  background-color: ${({ $active, $variant, $backgroundColor, theme }) => {
+    if ($backgroundColor) {
+      return getColor($backgroundColor);
+    }
     if ($variant === 'contained') {
       return $active ? theme.palette.primary['900'] : theme.palette.primary['700'];
     }

src/_hooks/usePubliqApi.ts

@@ -85,6 +85,40 @@ export function usePubliqApi(host: ApiHost = 'uitpas') {
     [defaultHeaders, apiHost],
   );
 
+  const put = useCallback(
+    <T = unknown, MutationParams extends TMutationParams = TMutationParams>(
+      mutationKey: unknown[],
+      path: string,
+      options: TPostOptions<T> = {},
+    ) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useMutation<T, TApiError, MutationParams>({
+        mutationFn: async ({ body, headers }) => HttpClient.put<T>(`${apiHost}${path}`, body, { ...defaultHeaders, ...headers }),
+        mutationKey,
+        networkMode: 'offlineFirst',
+        ...options,
+      });
+    },
+    [defaultHeaders, apiHost],
+  );
+
+  const deleteMutation = useCallback(
+    <T = unknown, MutationParams extends TMutationParams = TMutationParams>(
+      mutationKey: unknown[],
+      path: string,
+      options: TPostOptions<T> = {},
+    ) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useMutation<T, TApiError, MutationParams>({
+        mutationFn: async ({ headers }) => HttpClient.delete<T>(`${apiHost}${path}`, { ...defaultHeaders, ...headers }),
+        mutationKey,
+        networkMode: 'offlineFirst',
+        ...options,
+      });
+    },
+    [defaultHeaders, apiHost],
+  );
+
   const getInfinite = useCallback(
     <T extends TPaginatedResponse = TPaginatedResponse>(
       queryKey: unknown[],
@@ -116,5 +150,5 @@ export function usePubliqApi(host: ApiHost = 'uitpas') {
     [accessToken, defaultHeaders, apiHost],
   );
 
-  return { get, getInfinite, post };
+  return { deleteMutation, get, getInfinite, post, put };
 }

src/_routing/_components/RootStackNavigator.tsx

@@ -17,6 +17,7 @@ import Login from '../../login/Login';
 import {
   AddFamilyMember,
   AddFamilyMemberError,
+  EditFamilyMember,
   FamilyInformation,
   FamilyOnboarding,
   FamilyOverview,
@@ -98,10 +99,20 @@ export const RootStackNavigator = () => {
               headerShown: false,
             }}
           />
+          <RootStack.Screen
+            component={EditFamilyMember}
+            name="EditFamilyMember"
+            options={{
+              headerBackTitle: '',
+              title: i18n.t('ONBOARDING.FAMILY.EDIT_MEMBER.TITLE'),
+            }}
+          />
           <RootStack.Screen
             component={FamilyInformation}
             name="FamilyInformation"
             options={{
+              gestureEnabled: false,
+              headerBackVisible: false,
               headerRight: UserPoints,
               title: i18n.t('NAVIGATION.SHOP'),
             }}
@@ -232,6 +243,13 @@ export const RootStackNavigator = () => {
                 headerShown: false,
               }}
             />
+            <RootStack.Screen
+              component={EditFamilyMember}
+              name="EditFamilyMember"
+              options={{
+                title: i18n.t('ONBOARDING.FAMILY.EDIT_MEMBER.TITLE'),
+              }}
+            />
             <RootStack.Screen
               component={FamiliesOverview}
               name="FamiliesOverview"

src/_routing/_components/TRootStackParamList.ts

@@ -2,6 +2,7 @@ import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
+import { TFamilyMember } from '../../profile/_models';
 import { TRedeemedReward } from '../../redeemedRewards/_models/redeemedReward';
 import { TCheckInResponse } from '../../scan/_models';
 import { TFilterRewardCategory, TFilterRewardSection } from '../../shop/_hooks/useRewardFilters';
@@ -31,6 +32,7 @@ export type TRootStackParamList = {
   About: undefined;
   AddFamilyMember: undefined;
   AddFamilyMemberError: { description: string };
+  EditFamilyMember: { mainFamilyMember?: boolean; member: TFamilyMember };
   Error: {
     gotoAfterClose?: [TRootRoute, TMainRoute] | keyof TRootStackParamList;
     message: string;

src/_translations/locales/nl.json

@@ -37,6 +37,15 @@
         "DONE": "Klaar",
         "CANCEL": "Annuleren"
       },
+      "DELETE_MEMBER": {
+        "CTA": "Gezinslid verwijderen",
+        "CONFIRMATION_MODAL": {
+          "TITLE": "Gezinslid verwijderen",
+          "DESCRIPTION": "Ben je zeker dat je <bold>{{name}}</bold> wil verwijderen uit je gezin?",
+          "CONFIRM": "Verwijderen",
+          "CANCEL": "Annuleren"
+        }
+      },
       "ADD_MEMBER": {
         "TITLE": "Gezinslid toevoegen",
         "UITPAS_NUMBER": "UiTPAS nummer",
@@ -55,6 +64,12 @@
           "BACK_TO_FAMILY_OVERVIEW": "Terug naar gezinsoverzicht"
         }
       },
+      "EDIT_MEMBER": {
+        "TITLE": "Gezinslid wijzigen",
+        "DESCRIPTION": "Kies de weergave van het gezinslid",
+        "SAVE": "Opslaan",
+        "DELETE_MEMBER": "Gezinslid verwijderen"
+      },
       "INFORMATION": {
         "INFO_TITLE": "Bekijk je gezin via deze knop",
         "INFO": "Hier kan je snel je gezinssamenstelling raadplegen en alle UiTPAS kaarten raadplegen.",

src/_utils/imageHelpers.ts

@@ -2,6 +2,10 @@ import * as Avatars from '../_assets/images/avatars';
 
 export const DEFAULT_AVATAR_NAME = 'Emoji0';
 
+export const getValidAvatarNameOrDefault = (name: string) => {
+  return Avatars[name] ? name : DEFAULT_AVATAR_NAME;
+};
+
 export const getAvatarByNameOrDefault = (name: string) => {
   return Avatars[name] ?? Avatars[DEFAULT_AVATAR_NAME];
 };

src/onboarding/family/_queries/index.ts

@@ -1,4 +1,6 @@
+export * from './useEditFamilyMember';
 export * from './useGetFamilyMembers';
 export * from './useHasFamilyMembers';
 export * from './useGetRegistrationToken';
 export * from './useRegisterFamilyMember';
+export * from './useDeleteFamilyMember';

src/onboarding/family/_queries/useDeleteFamilyMember.ts

@@ -0,0 +1,10 @@
+import { usePubliqApi } from '../../../_hooks/usePubliqApi';
+import { useGetMe } from '../../../profile/_queries/useGetMe';
+
+export const useDeleteFamilyMember = (familyMemberId: string) => {
+  const {
+    data: { id: passholderId },
+  } = useGetMe();
+  const api = usePubliqApi();
+  return api.deleteMutation<string>(['family-member-delete'], `/passholders/${passholderId}/family-members/${familyMemberId}`);
+};

src/onboarding/family/_queries/useEditFamilyMember.ts

@@ -0,0 +1,16 @@
+import { TMutationParams, usePubliqApi } from '../../../_hooks/usePubliqApi';
+import { useGetMe } from '../../../profile/_queries/useGetMe';
+
+export type TEditFamilyMemberParams = TMutationParams<{
+  icon: string;
+}>;
+
+export const useEditFamilyMember = (familyMemberId: string) => {
+  const { data: user } = useGetMe();
+  const api = usePubliqApi();
+
+  return api.put<string, TEditFamilyMemberParams>(
+    ['family-member-edit'],
+    `/passholders/${user.id}/family-members/${familyMemberId}`,
+  );
+};

src/onboarding/family/_queries/useRegisterFamilyMember.ts

@@ -1,14 +1,10 @@
-import { usePubliqApi } from '../../../_hooks/usePubliqApi';
-import { Headers } from '../../../_http/HttpClient';
+import { TMutationParams, usePubliqApi } from '../../../_hooks/usePubliqApi';
 import { useGetMe } from '../../../profile/_queries/useGetMe';
 
-type TRegisterFamilyMemberParams = {
-  body: {
-    icon: string;
-    uitpasNumber: string;
-  };
-  headers: Headers;
-};
+type TRegisterFamilyMemberParams = TMutationParams<{
+  icon: string;
+  uitpasNumber: string;
+}>;
 
 export const useRegisterFamilyMember = () => {
   const { data: user } = useGetMe();

src/onboarding/family/addFamilyMember/AddFamilyMember.tsx

@@ -126,9 +126,6 @@ export const AddFamilyMember = ({ navigation }: TProps) => {
           loading={registrationTokenIsLoading || registerFamilyMemberIsLoading}
           onPress={handleSubmit(formData => getRegistrationToken(formData))}
         />
-        {registrationTokenError?.status === 403 && (
-          <Styled.CancelButton color="primary.700" label={t('ONBOARDING.FAMILY.ADD_MEMBER.CANCEL')} variant="outline" />
-        )}
       </Styled.StickyFooter>
     </Styled.ScreenContainer>
   );

src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigation } from '@react-navigation/native';
+
+import { BlurredModal, Icon, Trans } from '../../../_components';
+import { queryClient } from '../../../_context';
+import { useDeleteFamilyMember } from '../_queries';
+import * as Styled from './style';
+
+type TProps = {
+  familyMemberId: string;
+  name: string;
+};
+
+const DeleteFamilyMember = ({ name, familyMemberId }: TProps) => {
+  const navigation = useNavigation();
+  const [isVisible, setIsVisible] = useState(false);
+  const { mutateAsync, isLoading } = useDeleteFamilyMember(familyMemberId);
+  const { t } = useTranslation();
+
+  const handleToggleIsVisible = () => {
+    setIsVisible(currentIsVisible => !currentIsVisible);
+  };
+
+  const handleDelete = async () => {
+    await mutateAsync({});
+    queryClient.invalidateQueries(['family-members']);
+    handleToggleIsVisible();
+    navigation.goBack();
+  };
+
+  return (
+    <>
+      <Styled.DeleteButtonContainer>
+        <Icon name="Delete" />
+        <Styled.DeleteMemberButton
+          color="error.800"
+          fontStyle="normal"
+          label={t('ONBOARDING.FAMILY.EDIT_MEMBER.DELETE_MEMBER')}
+          onPress={handleToggleIsVisible}
+          underline={false}
+          variant="link"
+        />
+      </Styled.DeleteButtonContainer>
+      <BlurredModal isVisible={isVisible} toggleIsVisible={handleToggleIsVisible}>
+        <Styled.Title fontStyle="bold" size="large">
+          {t('ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.TITLE')}
+        </Styled.Title>
+        <Trans i18nKey="ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.DESCRIPTION" values={{ name }} />
+        <Styled.DeleteModalButton
+          backgroundColor="error.700"
+          fontStyle="semibold"
+          label={t('ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.CONFIRM')}
+          loading={isLoading}
+          onPress={handleDelete}
+          underline={false}
+        />
+        <Styled.CloseModalButton
+          color="primary.700"
+          fontStyle="semibold"
+          label={t('ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.CANCEL')}
+          onPress={handleToggleIsVisible}
+          variant="outline"
+        />
+      </BlurredModal>
+    </>
+  );
+};
+
+export default DeleteFamilyMember;

src/onboarding/family/deleteFamilyMember/style.ts

@@ -0,0 +1,25 @@
+import styled from 'styled-components/native';
+
+import { Button, Typography } from '../../../_components';
+
+export const Title = styled(Typography)`
+  margin-bottom: 8px;
+`;
+
+export const DeleteButtonContainer = styled.View`
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 24px;
+`;
+
+export const DeleteMemberButton = styled(Button)`
+  margin-left: 8px;
+`;
+
+export const DeleteModalButton = styled(Button)`
+  margin-top: 32px;
+`;
+
+export const CloseModalButton = styled(Button)`
+  margin-top: 16px;
+`;