From aca3e1541340146ab287657feb13713e44e74b4c Mon Sep 17 00:00:00 2001
From: Chennara Nhes <chennara.nhes@gmail.com>
Date: Mon, 20 Nov 2023 22:24:19 +0100
Subject: [PATCH 1/7] feat: add edit family member screen

---
 src/_assets/icons/edit.png                    | Bin 0 -> 249 bytes
 src/_assets/icons/edit@2x.png                 | Bin 0 -> 293 bytes
 src/_assets/icons/edit@3x.png                 | Bin 0 -> 348 bytes
 src/_assets/icons/index.ts                    |   1 +
 .../_components/RootStackNavigator.tsx        |  25 ++++++
 .../_components/TRootStackParamList.ts        |   2 +
 src/_translations/locales/nl.json             |   5 ++
 src/_utils/imageHelpers.ts                    |   4 +
 .../editFamilyMember/EditFamilyMember.tsx     |  73 ++++++++++++++++++
 .../family/editFamilyMember/style.ts          |  49 ++++++++++++
 .../family/familyOverview/FamilyOverview.tsx  |  46 +++++++----
 src/onboarding/family/familyOverview/style.ts |  21 +++--
 src/onboarding/family/index.ts                |   1 +
 13 files changed, 205 insertions(+), 22 deletions(-)
 create mode 100644 src/_assets/icons/edit.png
 create mode 100644 src/_assets/icons/edit@2x.png
 create mode 100644 src/_assets/icons/edit@3x.png
 create mode 100644 src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
 create mode 100644 src/onboarding/family/editFamilyMember/style.ts

diff --git a/src/_assets/icons/edit.png b/src/_assets/icons/edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..f16e7de4d81ff19feb099a72626922dd4205d859
GIT binary patch
literal 249
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5zt7XfF{FZV?F2^N1_c4vgOUe0W*y+jVwPUX
zxui+Z=YY=x9|u<H2ghZlwG5u8R5#bk6|g7Q^R6vrQwdPmUMV!m&~rn>$u(~mnkY#-
z7N28J>Di>jd%{?t<nvC}viP&wFY;$DvgtlGrJR4J8H>dI6W^x$?AU3vOw1(XSJ3X;
qC9b^F7JNJTj{A@tlZ{Hf6#JYDr8g`l9ee_G8H1;*pUXO@geCyh)ly&p

literal 0
HcmV?d00001

diff --git a/src/_assets/icons/edit@2x.png b/src/_assets/icons/edit@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..31eebf3fb8adc750765ed2e640a002b00f3e0c4d
GIT binary patch
literal 293
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9E$svykh8Km+7D9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5f0w6=V@L(#)2R<RTMT$wgLg2>Jal`(agS~L
z!L>!RkMII{7Ul&kcNe(5=@$r^V$$@Wnf<Bh-?*3aneK#XF7=pqLis1}yrhD4{1qMt
ztUp~}>vAYEE`E^>cUNt7XT$fLSgo0BKKPxSa5m|joAI6v?L7O^Hgd(y_}IGn=06{c
zIIe#-yz}_C{=9HsR*$Rh-3MjX&<}f?q<%P`T%?hCt;c3^ykZNZj#9?tZTCGVzm4>8
k)XbW?voX)^u<lldZ@F4x3`<&bfxckyboFyt=akR{0Pz)Y3;+NC

literal 0
HcmV?d00001

diff --git a/src/_assets/icons/edit@3x.png b/src/_assets/icons/edit@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..08729d82e2690e4d475bcfb4e7004c97ba603af1
GIT binary patch
literal 348
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbBI14-?iy0UcEkKyjb(&!UP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{zp$2$B+ufx7XhCHW>)8J;;8<&~tzz?}1j{
z1CDE)YlL60^&R2>iaeM6z4&6(uY+HIEzU1e+_J@{k(+VB^5?=XHi5d^)+tCb&G~3v
zKH-FX56`LQ%79G4Dg2MmTy<?VxEeU)!hts$XEGA_vu67<iJ2JmN<W{)>ebB3>+_uX
z>XS3)1B7&dlFwv$cXl3Z2}qj3;KlcNjj3+pld5IOLf7*8EX|rX&h|T-@aEX&%?~AZ
zwy{rUPCB}z>4u@^0<9Sl0_thojqES=);#uKwYRt~&@1!7iR;2$oowe4eoSwaU3{S5
osKg?Gw{fd^l`mUWmDFkOtc=`8Q4?C3fu3jZboFyt=akR{0CO^h>;M1&

literal 0
HcmV?d00001

diff --git a/src/_assets/icons/index.ts b/src/_assets/icons/index.ts
index 2ec34eea..ec1aef2c 100644
--- a/src/_assets/icons/index.ts
+++ b/src/_assets/icons/index.ts
@@ -15,6 +15,7 @@ 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 Edit = require('./edit.png');
 export const External = require('./external.png');
 export const Family = require('./family.png');
 export const Filter = require('./filter.png');
diff --git a/src/_routing/_components/RootStackNavigator.tsx b/src/_routing/_components/RootStackNavigator.tsx
index a720a14f..dffeacf6 100644
--- a/src/_routing/_components/RootStackNavigator.tsx
+++ b/src/_routing/_components/RootStackNavigator.tsx
@@ -17,6 +17,7 @@ import Login from '../../login/Login';
 import {
   AddFamilyMember,
   AddFamilyMemberError,
+  EditFamilyMember,
   FamilyInformation,
   FamilyOnboarding,
   FamilyOverview,
@@ -97,10 +98,18 @@ export const RootStackNavigator = () => {
               headerShown: false,
             }}
           />
+          <RootStack.Screen
+            component={EditFamilyMember}
+            name="EditFamilyMember"
+            options={{
+              title: i18n.t('ONBOARDING.FAMILY.EDIT_MEMBER.TITLE'),
+            }}
+          />
           <RootStack.Screen
             component={FamilyInformation}
             name="FamilyInformation"
             options={{
+              gestureEnabled: false,
               headerRight: UserPoints,
               title: i18n.t('NAVIGATION.SHOP'),
             }}
@@ -231,6 +240,22 @@ export const RootStackNavigator = () => {
                 headerShown: false,
               }}
             />
+            <RootStack.Screen
+              component={EditFamilyMember}
+              name="EditFamilyMember"
+              options={{
+                title: i18n.t('ONBOARDING.FAMILY.EDIT_MEMBER.TITLE'),
+              }}
+            />
+            <RootStack.Screen
+              component={FamilyInformation}
+              name="FamilyInformation"
+              options={{
+                gestureEnabled: false,
+                headerRight: UserPoints,
+                title: i18n.t('NAVIGATION.SHOP'),
+              }}
+            />
           </RootStack.Group>
         </>
       )}
diff --git a/src/_routing/_components/TRootStackParamList.ts b/src/_routing/_components/TRootStackParamList.ts
index 3b14f52b..465650f2 100644
--- a/src/_routing/_components/TRootStackParamList.ts
+++ b/src/_routing/_components/TRootStackParamList.ts
@@ -8,6 +8,7 @@ import { TFilterRewardCategory, TFilterRewardSection } from '../../shop/_hooks/u
 import { TReward, TRewardType } from '../../shop/_models/reward';
 import { TSearchFilters } from '../../shop/_models/searchFilters';
 import { TFilterRewardSorting } from '../../shop/_queries/useGetRewards';
+import { TFamilyMember } from '../../profile/_models';
 
 export type TRootRoute = keyof TRootStackParamList;
 export type TMainRoute = keyof TMainParamsList;
@@ -31,6 +32,7 @@ export type TRootStackParamList = {
   About: undefined;
   AddFamilyMember: undefined;
   AddFamilyMemberError: { description: string };
+  EditFamilyMember: { member: TFamilyMember };
   Error: {
     gotoAfterClose?: [TRootRoute, TMainRoute] | keyof TRootStackParamList;
     message: string;
diff --git a/src/_translations/locales/nl.json b/src/_translations/locales/nl.json
index 58a38daf..1189564e 100644
--- a/src/_translations/locales/nl.json
+++ b/src/_translations/locales/nl.json
@@ -55,6 +55,11 @@
           "BACK_TO_FAMILY_OVERVIEW": "Terug naar gezinsoverzicht"
         }
       },
+      "EDIT_MEMBER": {
+        "TITLE": "Gezinslid wijzigen",
+        "DESCRIPTION": "Kies de weergave van het gezinslid",
+        "SAVE": "Opslaan"
+      },
       "INFORMATION": {
         "INFO_TITLE": "Bekijk je gezin via deze knop",
         "INFO": "Hier kan je snel je gezinssamenstelling raadplegen en alle UiTPAS kaarten raadplegen.",
diff --git a/src/_utils/imageHelpers.ts b/src/_utils/imageHelpers.ts
index 368b320e..a5b6b60f 100644
--- a/src/_utils/imageHelpers.ts
+++ b/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];
 };
diff --git a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
new file mode 100644
index 00000000..f9f1e971
--- /dev/null
+++ b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
@@ -0,0 +1,73 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlatList } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import * as Avatars from '../../../_assets/images/avatars';
+import { Button, SafeAreaView, Typography } from '../../../_components';
+import { TRootStackRouteProp } from '../../../_routing';
+import { applyBarcodeMask, getAvatarByNameOrDefault, getValidAvatarNameOrDefault } from '../../../_utils';
+import * as Styled from './style';
+
+type TProps = {
+  route: TRootStackRouteProp<'EditFamilyMember'>;
+};
+
+export const EditFamilyMember = ({ route }: TProps) => {
+  const { member } = route.params;
+
+  const [selectedAvatar, setSelectedAvatar] = useState(getValidAvatarNameOrDefault(member.icon));
+  const sortedAvatars = useMemo(() => {
+    const avatars = Object.keys(Avatars).slice();
+    avatars.sort((item, item2) => {
+      if (item.includes('Emoji') && !item2.includes('Emoji')) {
+        return -1;
+      }
+      if (item2.includes('Emoji') && !item.includes('Emoji')) {
+        return 1;
+      }
+      return item.localeCompare(item2);
+    });
+    return avatars;
+  }, []);
+
+  const { bottom } = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  return (
+    <Styled.ScreenContainer>
+      <SafeAreaView backgroundColor="neutral.0" edges={['bottom']}>
+        <FlatList
+          ListHeaderComponent={
+            <Styled.Header>
+              <Typography fontStyle="bold" numberOfLines={1} size="xxlarge">
+                {member.firstName}
+              </Typography>
+              <Styled.UitpasNumber color="primary.700" fontStyle="bold">
+                {applyBarcodeMask(member.uitpasNumber)}
+              </Styled.UitpasNumber>
+              <Styled.SelectedAvatarImage resizeMode="contain" source={getAvatarByNameOrDefault(member.icon)} />
+              <Styled.Description color="primary.700" fontStyle="semibold">
+                {t('ONBOARDING.FAMILY.EDIT_MEMBER.DESCRIPTION')}
+              </Styled.Description>
+            </Styled.Header>
+          }
+          columnWrapperStyle={{ padding: 8 }}
+          contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
+          data={sortedAvatars}
+          numColumns={5}
+          renderItem={({ item: avatar }) => (
+            <Styled.AvatarItemBorder isSelected={avatar === selectedAvatar} onPress={() => setSelectedAvatar(avatar)}>
+              <Styled.AvatarItemContainer>
+                <Styled.AvatarItemImage resizeMode="contain" source={getAvatarByNameOrDefault(avatar)} />
+              </Styled.AvatarItemContainer>
+            </Styled.AvatarItemBorder>
+          )}
+        />
+      </SafeAreaView>
+      <Styled.StickyFooter style={{ marginBottom: bottom }}>
+        <Button label={t('ONBOARDING.FAMILY.EDIT_MEMBER.SAVE')} onPress={() => {}} />
+      </Styled.StickyFooter>
+    </Styled.ScreenContainer>
+  );
+};
diff --git a/src/onboarding/family/editFamilyMember/style.ts b/src/onboarding/family/editFamilyMember/style.ts
new file mode 100644
index 00000000..6e4ba223
--- /dev/null
+++ b/src/onboarding/family/editFamilyMember/style.ts
@@ -0,0 +1,49 @@
+import styled from 'styled-components/native';
+
+import { TouchableRipple, Typography } from '../../../_components';
+import { theme } from '../../../_styles/theme';
+
+export const ScreenContainer = styled.View`
+  flex: 1;
+  padding-top: 16px;
+  background-color: ${theme.palette.neutral['0']};
+`;
+
+export const Header = styled.View`
+  align-items: center;
+`;
+
+export const UitpasNumber = styled(Typography)`
+  margin-top: 8px;
+`;
+
+export const SelectedAvatarImage = styled.Image`
+  width: 96px;
+  height: 96px;
+  border-radius: 48px;
+  margin-vertical: 24px;
+`;
+
+export const Description = styled(Typography)`
+  font-size: 12px;
+`;
+
+export const AvatarItemBorder = styled(TouchableRipple)<{ isSelected: boolean }>`
+  margin-horizontal: 8px;
+  border: ${({ isSelected }) => `2px solid ${isSelected ? theme.palette.primary['700'] : 'transparent'}`};
+  border-radius: 26px;
+`;
+
+export const AvatarItemContainer = styled.View`
+  padding: 2px;
+`;
+
+export const AvatarItemImage = styled.Image`
+  width: 48px;
+  height: 48px;
+`;
+
+export const StickyFooter = styled.View`
+  padding-horizontal: 16px;
+  background-color: ${theme.palette.neutral['0']};
+`;
diff --git a/src/onboarding/family/familyOverview/FamilyOverview.tsx b/src/onboarding/family/familyOverview/FamilyOverview.tsx
index 23edb9ab..f0d33e22 100644
--- a/src/onboarding/family/familyOverview/FamilyOverview.tsx
+++ b/src/onboarding/family/familyOverview/FamilyOverview.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { FlatList, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { Icon } from '../../../_components';
+import { Icon, TouchableRipple } from '../../../_components';
 import { useOnboarding } from '../../../_context';
 import { TMainNavigationProp } from '../../../_routing';
 import { getAvatarByNameOrDefault } from '../../../_utils';
@@ -47,11 +47,18 @@ export const FamilyOverview = ({ navigation }: TProps) => {
     <>
       <FlatList
         ListHeaderComponent={
-          <Styled.Header>
-            <Styled.MyAvatar source={getAvatarByNameOrDefault(me?.icon)} />
-            <Styled.MyName color="neutral.0" fontStyle="semibold" numberOfLines={1}>
-              {me?.firstName} {t('ONBOARDING.FAMILY.OVERVIEW.YOU')}
-            </Styled.MyName>
+          <Styled.Header onPress={() => navigation.navigate('EditFamilyMember', { member: me })}>
+            <>
+              <View>
+                <Styled.MyAvatar resizeMode="contain" source={getAvatarByNameOrDefault(me?.icon)} />
+                <Styled.EditProfileIconContainer>
+                  <Icon color="neutral.0" name="Edit" size={12} />
+                </Styled.EditProfileIconContainer>
+              </View>
+              <Styled.MyName color="neutral.0" fontStyle="semibold" numberOfLines={1}>
+                {me?.firstName} {t('ONBOARDING.FAMILY.OVERVIEW.YOU')}
+              </Styled.MyName>
+            </>
           </Styled.Header>
         }
         columnWrapperStyle={{ margin: 8 }}
@@ -62,20 +69,27 @@ export const FamilyOverview = ({ navigation }: TProps) => {
         renderItem={({ item: formItem }) => {
           if (formItem.type === TFormItemType.FamilyMemberItem) {
             return (
-              <Styled.FormItemContainer>
-                <Styled.FormItem>
-                  <Styled.FamilyMemberAvatar source={getAvatarByNameOrDefault(formItem?.icon)} />
-                  <Styled.FormItemLabel color="primary.700" fontStyle="semibold" numberOfLines={1}>
-                    {formItem.firstName}
-                  </Styled.FormItemLabel>
-                </Styled.FormItem>
-              </Styled.FormItemContainer>
+              <Styled.FormItemButtonWrapper>
+                <TouchableRipple borderless onPress={() => navigation.navigate('EditFamilyMember', { member: formItem })}>
+                  <Styled.FormItem>
+                    <View>
+                      <Styled.FamilyMemberAvatar resizeMode="contain" source={getAvatarByNameOrDefault(formItem?.icon)} />
+                      <Styled.EditProfileIconContainer>
+                        <Icon color="neutral.0" name="Edit" size={12} />
+                      </Styled.EditProfileIconContainer>
+                    </View>
+                    <Styled.FormItemLabel color="primary.700" fontStyle="semibold" numberOfLines={1}>
+                      {formItem.firstName}
+                    </Styled.FormItemLabel>
+                  </Styled.FormItem>
+                </TouchableRipple>
+              </Styled.FormItemButtonWrapper>
             );
           } else if (formItem.type === TFormItemType.FamilyMemberAddButton) {
             return (
               <>
                 <Styled.FormItemButtonWrapper>
-                  <Styled.FormItemButton borderless onPress={() => navigation.navigate('AddFamilyMember')}>
+                  <TouchableRipple borderless onPress={() => navigation.navigate('AddFamilyMember')}>
                     <Styled.FormItem>
                       <Styled.AddIconContainer>
                         <Icon name="Plus" />
@@ -84,7 +98,7 @@ export const FamilyOverview = ({ navigation }: TProps) => {
                         {t('ONBOARDING.FAMILY.OVERVIEW.ADD_MEMBER')}
                       </Styled.FormItemLabel>
                     </Styled.FormItem>
-                  </Styled.FormItemButton>
+                  </TouchableRipple>
                 </Styled.FormItemButtonWrapper>
                 {familyMembers?.length % 2 === 1 && <Styled.FormItemContainer />}
               </>
diff --git a/src/onboarding/family/familyOverview/style.ts b/src/onboarding/family/familyOverview/style.ts
index 0cf85d6c..6fa72593 100644
--- a/src/onboarding/family/familyOverview/style.ts
+++ b/src/onboarding/family/familyOverview/style.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components/native';
 import { Button, TouchableRipple, Typography } from '../../../_components';
 import { theme } from '../../../_styles/theme';
 
-export const Header = styled.View`
+export const Header = styled(TouchableRipple)`
   justify-content: center;
   align-items: center;
   height: 133px;
@@ -32,16 +32,13 @@ export const FormItemContainer = styled.View`
 `;
 
 export const FormItemButtonWrapper = styled.View`
+  flex: 1;
+  height: 133px;
   margin-horizontal: 8px;
   border-radius: 16px;
   overflow: hidden;
 `;
 
-export const FormItemButton = styled(TouchableRipple)`
-  flex: 1;
-  height: 133px;
-`;
-
 export const FormItem = styled.View`
   justify-content: space-between;
   align-items: center;
@@ -61,6 +58,18 @@ export const FamilyMemberAvatar = styled.Image`
   height: 64px;
 `;
 
+export const EditProfileIconContainer = styled.View`
+  position: absolute;
+  bottom: -3px;
+  right: -3px;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  justify-content: center;
+  align-items: center;
+  background-color: ${theme.palette.neutral['900']};
+`;
+
 export const AddIconContainer = styled.View`
   justify-content: center;
   align-items: center;
diff --git a/src/onboarding/family/index.ts b/src/onboarding/family/index.ts
index 8076122f..28cb42d9 100644
--- a/src/onboarding/family/index.ts
+++ b/src/onboarding/family/index.ts
@@ -1,5 +1,6 @@
 export * from './FamilyOnboarding';
 export * from './addFamilyMember/AddFamilyMember';
 export * from './addFamilyMember/addFamilyMemberError/AddFamilyMemberError';
+export * from './editFamilyMember/EditFamilyMember';
 export * from './familyInformation/FamilyInformation';
 export * from './familyOverview/FamilyOverview';

From 50fc5111d2aa9f9faeca93196b0c08597fa98702 Mon Sep 17 00:00:00 2001
From: Chennara Nhes <chennara.nhes@gmail.com>
Date: Tue, 21 Nov 2023 10:31:50 +0100
Subject: [PATCH 2/7] feat: add API calls when deleting a family member

---
 src/_assets/icons/delete.png                  | Bin 0 -> 483 bytes
 src/_assets/icons/delete@2x.png               | Bin 0 -> 645 bytes
 src/_assets/icons/delete@3x.png               | Bin 0 -> 1000 bytes
 src/_assets/icons/index.ts                    |   1 +
 src/_hooks/usePubliqApi.ts                    |  19 +++-
 src/_translations/locales/nl.json             |   3 +-
 src/onboarding/family/_queries/index.ts       |   1 +
 .../family/_queries/useEditFamilyMember.ts    |  18 ++++
 .../_queries/useRegisterFamilyMember.ts       |  14 +--
 .../editFamilyMember/EditFamilyMember.tsx     |  90 +++++++++++-------
 .../family/editFamilyMember/style.ts          |  13 ++-
 11 files changed, 114 insertions(+), 45 deletions(-)
 create mode 100644 src/_assets/icons/delete.png
 create mode 100644 src/_assets/icons/delete@2x.png
 create mode 100644 src/_assets/icons/delete@3x.png
 create mode 100644 src/onboarding/family/_queries/useEditFamilyMember.ts

diff --git a/src/_assets/icons/delete.png b/src/_assets/icons/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb85dd060da8d900eae72682cc91bcca55ef352d
GIT binary patch
literal 483
zcmV<90UZ8`P)<h;3K|Lk000e1NJLTq000vJ000#T1^@s6qzTp000009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0eDG7K~#7F?UXT6
z!!Qs<cV&mz1%tVPOA5%C8<-oUVa7wp2_Pq6I6=4pLzkf;oFL%@hztcCI)W==2-!t)
zaImq>*v!!J8%w+L(@NT1gbK}fB42dii~;=bJ_Jy-fOGe0q$+%6CB5hwDnL1@u1NM#
zj^n)1E=3hYAy5iZOmJM<UBIQ;XaOCwMizWY@8|@W`fCHS$AAF<$G|8{F=6WS^gsgh
zS7b=HHu5rL#4xk*`sC>8VOWCc6`$Xra7iq{CJP5hbO#`Y2rP+k01btLhmf8^oOZ33
zE8CSLrSC~1X*gr-K8~hMVaZ+;o9LM60cYb_)GcJc@1>8C(_3&Dn6#<;rxy0Q>D=gO
zCk9~V225n#;|5=}hGkm5TVBDyxb<sT8~wxD%dYk4S_8IXuvwXD0*Q3lnWpx(FlTmc
z@@bt@+pBhS06*vtkBJ=UdYeE~t=dr$mfi<AN_+k4wo|7Rq_XBvXxsDMVqrItV<$3e
Z-yc}pi$KWk%6I?(002ovPDHLkV1i8g&B*`&

literal 0
HcmV?d00001

diff --git a/src/_assets/icons/delete@2x.png b/src/_assets/icons/delete@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e73d1e5fe5b0cc2a8821258d2f681473e4f7f1d
GIT binary patch
literal 645
zcmV;00($+4P)<h;3K|Lk000e1NJLTq001Tc001cn1^@s6S!-K+00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0vbs~K~#7F?U+wa
z!ax+pznLP+4sTF*E)1z&!0H8LV?x|`1mg*;H}D9$Bf9Yh;t8z87<YODS(t#v&iF?D
zgaW1WS~M*BO9&}^)A>5{=5^i(Fwt(k+N-YBq2Su+9f;THOW#*snr~nrIO1OI=!C2V
z^r?agbrh_&o97I@9iO$vnWmc~7wUAaeSKl0v@+J+Y`CI~SL8-_R^{i02yZ)S$`Wi?
zfj{xf8;#x-ETAVprZ0DJRqaI-pTK2WJ3C_{9_YqYrQHl{ns#dqW9}^JUddgW#$Lmx
zRpuv(G<Hepk2z~;fqU3=z-;S$N4MqYn^1gsM_x&(2P_d<VNW_r)v;_y_>!iug(bsG
z=WmRCd52!4oO+&E;*!`G4OHc++4^0T<?tq?uaH(yKu$+uBeY$8T+;fISW*gOT<kLc
z1jB?pOomxC^I(sdNytLs&b($+$$98*k%0`Fg&Uhn$a4BsW}``?2!1YwF)oEME`>2J
zg)uILF)n;#{o+LruC&?KBxpv=)GXSVDHNoPcF5T|)qnf5_F4nY_CT|jWj~f_qc|*H
z@@nQ$1V5M5sWhiGHc(B7MKafzsg|h_4Pb%o1B~B$-mziKn1<+xQ6@00;g46#3q?#`
zs@N%GEXIV=nO9L>w3M-27c*w^kI6mgCs2)l!t_}Q<HzkYXPJssS15U)q1N$-2*`J>
f)T0@Y$^U);rkLKOeD>Ur00000NkvXXu0mjfC_N;R

literal 0
HcmV?d00001

diff --git a/src/_assets/icons/delete@3x.png b/src/_assets/icons/delete@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0558d3edb6b13283d17826fd78a51fe224b317f
GIT binary patch
literal 1000
zcmV<E0~h>>P)<h;3K|Lk000e1NJLTq001}u002D*1^@s6_)Ds-00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1AR$EK~#7F?V8<A
z6G0Tm&zXME8lv?HT;Rr#6jq-A@Lq|=(0C*I0`LaF3rKhYgEv_80(b$+8@Lo>yt4HL
zv?gjxY3F!m`H+-Z=<ZIT+w3pdY<6d-%zqDa&e=1AV3@jHu=r#_KoZcdrJaus7y`in
zWX<N9w=)X_xX4#I2v3y<ww@M^HFUOX5Q5MG>-P&5rlABOtab?%YQjwRYq1Ie2_>+{
z;!X)AQa}hWg{#n8af%U4!CMGOU<<M{nL_DW?>ZooY{k#TJ@82q0z#5z(ewR~1BAhx
z1HzQ<E(&_W=RNRAV1a^gQm2mqR<h;IWeC9Ei8=L)s{(LA(`-QiLd`)f(*IjN1qBix
zJK9FVI}m^~3#wRlluKD{NOTv+q>6W_8Kks%enL=Cib?gBE;e9J&3ovQtaChH-4XsC
ze_<z+R5BE#`-O^VwV%2cOeW<Pp9V>sVnimzt~fEf1p^7@l#{8#03&!ZR@t?`gMozB
z&fH)<Uzq2Mm+l3kt#>#f0=P-g_29Oqp~g9nqt1l1pDh=cwW&xWUnuD^3Qm`%gQQC)
zISE12oF?vGXe20Q4vI79Z<!DDeMT%W>cj%0&cF){{5|N!;Y4AHW09?5kv!sW!z*ej
zoan2R-%bh1RXMN(;(EIL-dN&c)PjwPxm6zIG9k_q!aSzwQ*->e?e#nttso)gNHRes
z^}LF`5@`J}UkF@->BN{oRbd0SE_xo!Q7W<E*(t@6Qn1vSH7T(t1?13}vtUO5MZ(#S
z<<$j`k9*q2mYFY{*o#J;SYXtN1xB4%VAP2PMx9t-)QJT~omgPhi3N5`qS^MnD1*G1
zz(-FPbBqc6lRn~QIQ)6x4{(*ttB*t^KK3<D6;q2m#suDVwrlMcs+FAzxVuTXc&Iki
zT~Y$%<t=`YR=AS3cG`#S`lBVpGcbhFIXL`f!^xD3qiR<YHDQzmyt=B-t@5VYI<iOt
zMq4fMa7fh0hMf&#+bN9~eieTIy?B*bovP3SVlNtXVu4Y|x04C85A7!KB@l&tKpeW^
zhVk66r@^NM#T)GIcY93tgV4@FUcUMcQ3UB%=Pj*3Npc&a2PZ>ftMjJkd}`ziyWBbr
z(cv4XiDR8NJ;MYg;5GbDockG4Te#SKk93V!dc@;Rdib~>cLSrFzsjAVgAY4i&-?=g
WS{$kRT;zQK0000<MNUMnLSTXgAja_k

literal 0
HcmV?d00001

diff --git a/src/_assets/icons/index.ts b/src/_assets/icons/index.ts
index ec1aef2c..10fd324f 100644
--- a/src/_assets/icons/index.ts
+++ b/src/_assets/icons/index.ts
@@ -15,6 +15,7 @@ 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');
diff --git a/src/_hooks/usePubliqApi.ts b/src/_hooks/usePubliqApi.ts
index f4fd153a..c605aebd 100644
--- a/src/_hooks/usePubliqApi.ts
+++ b/src/_hooks/usePubliqApi.ts
@@ -85,6 +85,23 @@ 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 getInfinite = useCallback(
     <T extends TPaginatedResponse = TPaginatedResponse>(
       queryKey: unknown[],
@@ -116,5 +133,5 @@ export function usePubliqApi(host: ApiHost = 'uitpas') {
     [accessToken, defaultHeaders, apiHost],
   );
 
-  return { get, getInfinite, post };
+  return { get, getInfinite, post, put };
 }
diff --git a/src/_translations/locales/nl.json b/src/_translations/locales/nl.json
index 1189564e..d0059b0d 100644
--- a/src/_translations/locales/nl.json
+++ b/src/_translations/locales/nl.json
@@ -58,7 +58,8 @@
       "EDIT_MEMBER": {
         "TITLE": "Gezinslid wijzigen",
         "DESCRIPTION": "Kies de weergave van het gezinslid",
-        "SAVE": "Opslaan"
+        "SAVE": "Opslaan",
+        "DELETE_MEMBER": "Gezinslid verwijderen"
       },
       "INFORMATION": {
         "INFO_TITLE": "Bekijk je gezin via deze knop",
diff --git a/src/onboarding/family/_queries/index.ts b/src/onboarding/family/_queries/index.ts
index bf39a764..dfa10601 100644
--- a/src/onboarding/family/_queries/index.ts
+++ b/src/onboarding/family/_queries/index.ts
@@ -1,3 +1,4 @@
+export * from './useEditFamilyMember';
 export * from './useGetFamilyMembers';
 export * from './useHasFamilyMembers';
 export * from './useGetRegistrationToken';
diff --git a/src/onboarding/family/_queries/useEditFamilyMember.ts b/src/onboarding/family/_queries/useEditFamilyMember.ts
new file mode 100644
index 00000000..ef82c166
--- /dev/null
+++ b/src/onboarding/family/_queries/useEditFamilyMember.ts
@@ -0,0 +1,18 @@
+import { MutateOptions, useMutation } from '@tanstack/react-query';
+
+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}`,
+  );
+};
diff --git a/src/onboarding/family/_queries/useRegisterFamilyMember.ts b/src/onboarding/family/_queries/useRegisterFamilyMember.ts
index 23af0bbf..42df1f04 100644
--- a/src/onboarding/family/_queries/useRegisterFamilyMember.ts
+++ b/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();
diff --git a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
index f9f1e971..3b6f90ef 100644
--- a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
+++ b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
@@ -4,16 +4,19 @@ import { FlatList } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import * as Avatars from '../../../_assets/images/avatars';
-import { Button, SafeAreaView, Typography } from '../../../_components';
-import { TRootStackRouteProp } from '../../../_routing';
+import { Button, Icon, Typography } from '../../../_components';
+import { queryClient } from '../../../_context';
+import { TMainNavigationProp, TRootStackRouteProp } from '../../../_routing';
 import { applyBarcodeMask, getAvatarByNameOrDefault, getValidAvatarNameOrDefault } from '../../../_utils';
+import { useEditFamilyMember } from '../_queries';
 import * as Styled from './style';
 
 type TProps = {
+  navigation: TMainNavigationProp<'Profile'>;
   route: TRootStackRouteProp<'EditFamilyMember'>;
 };
 
-export const EditFamilyMember = ({ route }: TProps) => {
+export const EditFamilyMember = ({ navigation, route }: TProps) => {
   const { member } = route.params;
 
   const [selectedAvatar, setSelectedAvatar] = useState(getValidAvatarNameOrDefault(member.icon));
@@ -30,43 +33,64 @@ export const EditFamilyMember = ({ route }: TProps) => {
     });
     return avatars;
   }, []);
+  const { mutate: editFamilyMember } = useEditFamilyMember(member.passholderId);
 
   const { bottom } = useSafeAreaInsets();
   const { t } = useTranslation();
 
+  const handleDelete = () => {};
+
+  const handleSubmit = () => {
+    editFamilyMember({ body: { icon: selectedAvatar } });
+    queryClient.invalidateQueries(['family-members']);
+    navigation.goBack();
+  };
+
   return (
     <Styled.ScreenContainer>
-      <SafeAreaView backgroundColor="neutral.0" edges={['bottom']}>
-        <FlatList
-          ListHeaderComponent={
-            <Styled.Header>
-              <Typography fontStyle="bold" numberOfLines={1} size="xxlarge">
-                {member.firstName}
-              </Typography>
-              <Styled.UitpasNumber color="primary.700" fontStyle="bold">
-                {applyBarcodeMask(member.uitpasNumber)}
-              </Styled.UitpasNumber>
-              <Styled.SelectedAvatarImage resizeMode="contain" source={getAvatarByNameOrDefault(member.icon)} />
-              <Styled.Description color="primary.700" fontStyle="semibold">
-                {t('ONBOARDING.FAMILY.EDIT_MEMBER.DESCRIPTION')}
-              </Styled.Description>
-            </Styled.Header>
-          }
-          columnWrapperStyle={{ padding: 8 }}
-          contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
-          data={sortedAvatars}
-          numColumns={5}
-          renderItem={({ item: avatar }) => (
-            <Styled.AvatarItemBorder isSelected={avatar === selectedAvatar} onPress={() => setSelectedAvatar(avatar)}>
-              <Styled.AvatarItemContainer>
-                <Styled.AvatarItemImage resizeMode="contain" source={getAvatarByNameOrDefault(avatar)} />
-              </Styled.AvatarItemContainer>
-            </Styled.AvatarItemBorder>
-          )}
-        />
-      </SafeAreaView>
+      <FlatList
+        ListFooterComponent={
+          <Styled.ListFooter>
+            <Icon name="Delete" />
+            <Styled.DeleteMemberButton
+              color="error.800"
+              fontStyle="normal"
+              label={t('ONBOARDING.FAMILY.EDIT_MEMBER.DELETE_MEMBER')}
+              onPress={handleDelete}
+              underline={false}
+              variant="link"
+            />
+          </Styled.ListFooter>
+        }
+        ListFooterComponentStyle={{ width: '100%' }}
+        ListHeaderComponent={
+          <Styled.Header>
+            <Typography fontStyle="bold" numberOfLines={1} size="xxlarge">
+              {member.firstName}
+            </Typography>
+            <Styled.UitpasNumber color="primary.700" fontStyle="bold">
+              {applyBarcodeMask(member.uitpasNumber)}
+            </Styled.UitpasNumber>
+            <Styled.SelectedAvatarImage resizeMode="contain" source={getAvatarByNameOrDefault(selectedAvatar)} />
+            <Styled.Description color="primary.700" fontStyle="semibold">
+              {t('ONBOARDING.FAMILY.EDIT_MEMBER.DESCRIPTION')}
+            </Styled.Description>
+          </Styled.Header>
+        }
+        columnWrapperStyle={{ padding: 8 }}
+        contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
+        data={sortedAvatars}
+        numColumns={5}
+        renderItem={({ item: avatar }) => (
+          <Styled.AvatarItemBorder isSelected={avatar === selectedAvatar} onPress={() => setSelectedAvatar(avatar)}>
+            <Styled.AvatarItemContainer>
+              <Styled.AvatarItemImage resizeMode="contain" source={getAvatarByNameOrDefault(avatar)} />
+            </Styled.AvatarItemContainer>
+          </Styled.AvatarItemBorder>
+        )}
+      />
       <Styled.StickyFooter style={{ marginBottom: bottom }}>
-        <Button label={t('ONBOARDING.FAMILY.EDIT_MEMBER.SAVE')} onPress={() => {}} />
+        <Button label={t('ONBOARDING.FAMILY.EDIT_MEMBER.SAVE')} onPress={handleSubmit} />
       </Styled.StickyFooter>
     </Styled.ScreenContainer>
   );
diff --git a/src/onboarding/family/editFamilyMember/style.ts b/src/onboarding/family/editFamilyMember/style.ts
index 6e4ba223..6f9ce32d 100644
--- a/src/onboarding/family/editFamilyMember/style.ts
+++ b/src/onboarding/family/editFamilyMember/style.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components/native';
 
-import { TouchableRipple, Typography } from '../../../_components';
+import { Button, TouchableRipple, Typography } from '../../../_components';
 import { theme } from '../../../_styles/theme';
 
 export const ScreenContainer = styled.View`
@@ -43,7 +43,18 @@ export const AvatarItemImage = styled.Image`
   height: 48px;
 `;
 
+export const ListFooter = styled.View`
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 24px;
+`;
+
+export const DeleteMemberButton = styled(Button)`
+  margin-left: 8px;
+`;
+
 export const StickyFooter = styled.View`
   padding-horizontal: 16px;
+  padding-top: 16px;
   background-color: ${theme.palette.neutral['0']};
 `;

From 4f7229204bd17a9191cd0273dba7136942c208ef Mon Sep 17 00:00:00 2001
From: Chennara Nhes <chennara.nhes@gmail.com>
Date: Tue, 21 Nov 2023 10:52:00 +0100
Subject: [PATCH 3/7] fix: remove unused imports from useEditFamilyMember

---
 src/onboarding/family/_queries/useEditFamilyMember.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/onboarding/family/_queries/useEditFamilyMember.ts b/src/onboarding/family/_queries/useEditFamilyMember.ts
index ef82c166..9b219db3 100644
--- a/src/onboarding/family/_queries/useEditFamilyMember.ts
+++ b/src/onboarding/family/_queries/useEditFamilyMember.ts
@@ -1,5 +1,3 @@
-import { MutateOptions, useMutation } from '@tanstack/react-query';
-
 import { TMutationParams, usePubliqApi } from '../../../_hooks/usePubliqApi';
 import { useGetMe } from '../../../profile/_queries/useGetMe';
 

From 8f9e9f58cc0a6b9d1c11c3dfd976f1d7e8f0b6ad Mon Sep 17 00:00:00 2001
From: Chennara Nhes <chennara.nhes@gmail.com>
Date: Tue, 21 Nov 2023 11:32:41 +0100
Subject: [PATCH 4/7] fix: fix bugs in family overview

References: UIT-195
---
 src/_components/datePicker/DatePicker.tsx        |  3 +--
 .../family/addFamilyMember/AddFamilyMember.tsx   |  3 ---
 .../family/familyOverview/FamilyOverview.tsx     |  8 +++++---
 src/onboarding/family/familyOverview/style.ts    |  5 +++++
 src/profile/family/FamiliesOverview.tsx          | 16 +++++++++-------
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/_components/datePicker/DatePicker.tsx b/src/_components/datePicker/DatePicker.tsx
index 19f9fea5..8546a427 100644
--- a/src/_components/datePicker/DatePicker.tsx
+++ b/src/_components/datePicker/DatePicker.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import RnDatePicker from 'react-native-date-picker';
 import { format } from 'date-fns';
 
-import { getCorrectLocale } from '../../_utils';
 import FakeTextInput from '../textInput/fakeTextInput/FakeTextInput';
 
 type TProps = {
@@ -39,7 +38,7 @@ const DatePicker = ({ date, onSelectDate, ...textInputProps }: TProps) => {
         cancelText={t('DATE_PICKER.CANCEL')}
         confirmText={t('DATE_PICKER.CONFIRM')}
         date={date ?? new Date()}
-        locale={getCorrectLocale().code}
+        locale="nl"
         modal
         mode="date"
         onCancel={handleClose}
diff --git a/src/onboarding/family/addFamilyMember/AddFamilyMember.tsx b/src/onboarding/family/addFamilyMember/AddFamilyMember.tsx
index 9d40eb42..9971e173 100644
--- a/src/onboarding/family/addFamilyMember/AddFamilyMember.tsx
+++ b/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>
   );
diff --git a/src/onboarding/family/familyOverview/FamilyOverview.tsx b/src/onboarding/family/familyOverview/FamilyOverview.tsx
index f0d33e22..7ed8f521 100644
--- a/src/onboarding/family/familyOverview/FamilyOverview.tsx
+++ b/src/onboarding/family/familyOverview/FamilyOverview.tsx
@@ -91,9 +91,11 @@ export const FamilyOverview = ({ navigation }: TProps) => {
                 <Styled.FormItemButtonWrapper>
                   <TouchableRipple borderless onPress={() => navigation.navigate('AddFamilyMember')}>
                     <Styled.FormItem>
-                      <Styled.AddIconContainer>
-                        <Icon name="Plus" />
-                      </Styled.AddIconContainer>
+                      <Styled.FormItemBody>
+                        <Styled.AddIconContainer>
+                          <Icon name="Plus" />
+                        </Styled.AddIconContainer>
+                      </Styled.FormItemBody>
                       <Styled.FormItemLabel align="center" color="primary.700" fontStyle="semibold" numberOfLines={2}>
                         {t('ONBOARDING.FAMILY.OVERVIEW.ADD_MEMBER')}
                       </Styled.FormItemLabel>
diff --git a/src/onboarding/family/familyOverview/style.ts b/src/onboarding/family/familyOverview/style.ts
index 6fa72593..360fe9d3 100644
--- a/src/onboarding/family/familyOverview/style.ts
+++ b/src/onboarding/family/familyOverview/style.ts
@@ -48,6 +48,11 @@ export const FormItem = styled.View`
   padding: 16px;
 `;
 
+export const FormItemBody = styled.View`
+  flex: 1;
+  justify-content: center;
+`;
+
 export const FormItemLabel = styled(Typography)`
   font-size: 14px;
   line-height: 21px;
diff --git a/src/profile/family/FamiliesOverview.tsx b/src/profile/family/FamiliesOverview.tsx
index f435da00..3892fdc4 100644
--- a/src/profile/family/FamiliesOverview.tsx
+++ b/src/profile/family/FamiliesOverview.tsx
@@ -15,13 +15,15 @@ export const FamiliesOverview: React.FC<TProps> = ({ navigation }) => {
   return (
     <Styled.SafeAreaView edges={['bottom']}>
       <Styled.FamilyTile onPress={() => navigation.navigate('FamilyOverview')}>
-        <Icon name="MainFamilyMember" size={24} />
-        <View>
-          <Typography color="primary.700" fontStyle="bold">
-            {t('PROFILE.FAMILY.FAMILY_COMPOSITION.TITLE')}
-          </Typography>
-          <Typography>{t('PROFILE.FAMILY.FAMILY_COMPOSITION.DESCRIPTION')}</Typography>
-        </View>
+        <>
+          <Icon name="MainFamilyMember" size={24} />
+          <View>
+            <Typography color="primary.700" fontStyle="bold">
+              {t('PROFILE.FAMILY.FAMILY_COMPOSITION.TITLE')}
+            </Typography>
+            <Typography>{t('PROFILE.FAMILY.FAMILY_COMPOSITION.DESCRIPTION')}</Typography>
+          </View>
+        </>
       </Styled.FamilyTile>
     </Styled.SafeAreaView>
   );

From dd5056cfdaa51cc0791c263054fec79036f8f512 Mon Sep 17 00:00:00 2001
From: Chennara Nhes <chennara.nhes@gmail.com>
Date: Tue, 21 Nov 2023 11:48:10 +0100
Subject: [PATCH 5/7] fix: fix bottom padding in edit family member screen

---
 src/onboarding/family/editFamilyMember/EditFamilyMember.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
index 3b6f90ef..f0c29e52 100644
--- a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
+++ b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
@@ -89,7 +89,7 @@ export const EditFamilyMember = ({ navigation, route }: TProps) => {
           </Styled.AvatarItemBorder>
         )}
       />
-      <Styled.StickyFooter style={{ marginBottom: bottom }}>
+      <Styled.StickyFooter style={{ marginBottom: bottom + 16 }}>
         <Button label={t('ONBOARDING.FAMILY.EDIT_MEMBER.SAVE')} onPress={handleSubmit} />
       </Styled.StickyFooter>
     </Styled.ScreenContainer>

From f49b1cb496adf239d4bdc1d7f038797bf8ca7006 Mon Sep 17 00:00:00 2001
From: Chennara Nhes <chennara.nhes@gmail.com>
Date: Tue, 21 Nov 2023 12:25:25 +0100
Subject: [PATCH 6/7] fix: add delete member logic

---
 .../deleteFamilyMember/DeleteFamilyMember.tsx | 26 ++++++++++++-------
 .../family/deleteFamilyMember/style.ts        | 10 +++++--
 .../editFamilyMember/EditFamilyMember.tsx     | 19 +++-----------
 .../family/editFamilyMember/style.ts          | 10 -------
 4 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx b/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx
index cf29c820..6a8186d1 100644
--- a/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx
+++ b/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ImageStyle, StyleProp } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 
-import { BlurredModal, Icon, TouchableRipple, Trans, Typography } from '../../../_components';
+import { BlurredModal, Icon, Trans } from '../../../_components';
 import { queryClient } from '../../../_context';
 import { useDeleteFamilyMember } from '../_queries';
 import * as Styled from './style';
@@ -10,10 +10,10 @@ import * as Styled from './style';
 type TProps = {
   familyMemberId: string;
   name: string;
-  style?: StyleProp<ImageStyle>;
 };
 
-const DeleteFamilyMember = ({ style, name, familyMemberId }: TProps) => {
+const DeleteFamilyMember = ({ name, familyMemberId }: TProps) => {
+  const navigation = useNavigation();
   const [isVisible, setIsVisible] = useState(false);
   const { mutateAsync, isLoading } = useDeleteFamilyMember(familyMemberId);
   const { t } = useTranslation();
@@ -26,16 +26,22 @@ const DeleteFamilyMember = ({ style, name, familyMemberId }: TProps) => {
     await mutateAsync({});
     queryClient.invalidateQueries(['family-members']);
     handleToggleIsVisible();
+    navigation.goBack();
   };
 
   return (
     <>
-      <TouchableRipple onPress={handleToggleIsVisible} style={style}>
-        <>
-          <Icon name="Delete" size="small" style={style} />
-          <Typography color="error.800">{t('ONBOARDING.FAMILY.DELETE_MEMBER.CTA')}</Typography>
-        </>
-      </TouchableRipple>
+      <Styled.DeleteButtonContainer>
+        <Icon name="Delete" />
+        <Styled.DeleteButton
+          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')}
diff --git a/src/onboarding/family/deleteFamilyMember/style.ts b/src/onboarding/family/deleteFamilyMember/style.ts
index 24784f52..01ec0fe2 100644
--- a/src/onboarding/family/deleteFamilyMember/style.ts
+++ b/src/onboarding/family/deleteFamilyMember/style.ts
@@ -6,10 +6,16 @@ export const Title = styled(Typography)`
   margin-bottom: 8px;
 `;
 
+export const DeleteButtonContainer = styled.View`
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 24px;
+`;
+
 export const DeleteButton = styled(Button)`
-  margin-top: 32px;
-  background-color: ${({ theme }) => theme.palette.error[700]};
+  margin-left: 8px;
 `;
+
 export const CloseButton = styled(Button)`
   margin-top: 16px;
 `;
diff --git a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
index f0c29e52..4449fe64 100644
--- a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
+++ b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
@@ -4,11 +4,12 @@ import { FlatList } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import * as Avatars from '../../../_assets/images/avatars';
-import { Button, Icon, Typography } from '../../../_components';
+import { Button, Typography } from '../../../_components';
 import { queryClient } from '../../../_context';
 import { TMainNavigationProp, TRootStackRouteProp } from '../../../_routing';
 import { applyBarcodeMask, getAvatarByNameOrDefault, getValidAvatarNameOrDefault } from '../../../_utils';
 import { useEditFamilyMember } from '../_queries';
+import DeleteFamilyMember from '../deleteFamilyMember/DeleteFamilyMember';
 import * as Styled from './style';
 
 type TProps = {
@@ -38,8 +39,6 @@ export const EditFamilyMember = ({ navigation, route }: TProps) => {
   const { bottom } = useSafeAreaInsets();
   const { t } = useTranslation();
 
-  const handleDelete = () => {};
-
   const handleSubmit = () => {
     editFamilyMember({ body: { icon: selectedAvatar } });
     queryClient.invalidateQueries(['family-members']);
@@ -49,19 +48,7 @@ export const EditFamilyMember = ({ navigation, route }: TProps) => {
   return (
     <Styled.ScreenContainer>
       <FlatList
-        ListFooterComponent={
-          <Styled.ListFooter>
-            <Icon name="Delete" />
-            <Styled.DeleteMemberButton
-              color="error.800"
-              fontStyle="normal"
-              label={t('ONBOARDING.FAMILY.EDIT_MEMBER.DELETE_MEMBER')}
-              onPress={handleDelete}
-              underline={false}
-              variant="link"
-            />
-          </Styled.ListFooter>
-        }
+        ListFooterComponent={<DeleteFamilyMember familyMemberId={member.passholderId} name={member.firstName} />}
         ListFooterComponentStyle={{ width: '100%' }}
         ListHeaderComponent={
           <Styled.Header>
diff --git a/src/onboarding/family/editFamilyMember/style.ts b/src/onboarding/family/editFamilyMember/style.ts
index 6f9ce32d..3f53d16a 100644
--- a/src/onboarding/family/editFamilyMember/style.ts
+++ b/src/onboarding/family/editFamilyMember/style.ts
@@ -43,16 +43,6 @@ export const AvatarItemImage = styled.Image`
   height: 48px;
 `;
 
-export const ListFooter = styled.View`
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 24px;
-`;
-
-export const DeleteMemberButton = styled(Button)`
-  margin-left: 8px;
-`;
-
 export const StickyFooter = styled.View`
   padding-horizontal: 16px;
   padding-top: 16px;

From 4047b7d0b7703b888105cd9e24b0008081a1f821 Mon Sep 17 00:00:00 2001
From: Chennara Nhes <chennara.nhes@gmail.com>
Date: Tue, 21 Nov 2023 13:13:07 +0100
Subject: [PATCH 7/7] fix: fix bugs in delete family member flow

---
 src/_components/button/Button.tsx                         | 3 +++
 src/_components/button/style.ts                           | 6 +++++-
 .../family/deleteFamilyMember/DeleteFamilyMember.tsx      | 7 ++++---
 src/onboarding/family/deleteFamilyMember/style.ts         | 8 ++++++--
 .../family/editFamilyMember/EditFamilyMember.tsx          | 8 ++++----
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/_components/button/Button.tsx b/src/_components/button/Button.tsx
index 9c8fe1ea..ded2627b 100644
--- a/src/_components/button/Button.tsx
+++ b/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}
diff --git a/src/_components/button/style.ts b/src/_components/button/style.ts
index 2e8a7258..c15bb1be 100644
--- a/src/_components/button/style.ts
+++ b/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'];
     }
diff --git a/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx b/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx
index 6a8186d1..5df761a7 100644
--- a/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx
+++ b/src/onboarding/family/deleteFamilyMember/DeleteFamilyMember.tsx
@@ -33,7 +33,7 @@ const DeleteFamilyMember = ({ name, familyMemberId }: TProps) => {
     <>
       <Styled.DeleteButtonContainer>
         <Icon name="Delete" />
-        <Styled.DeleteButton
+        <Styled.DeleteMemberButton
           color="error.800"
           fontStyle="normal"
           label={t('ONBOARDING.FAMILY.EDIT_MEMBER.DELETE_MEMBER')}
@@ -47,14 +47,15 @@ const DeleteFamilyMember = ({ name, familyMemberId }: TProps) => {
           {t('ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.TITLE')}
         </Styled.Title>
         <Trans i18nKey="ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.DESCRIPTION" values={{ name }} />
-        <Styled.DeleteButton
+        <Styled.DeleteModalButton
+          backgroundColor="error.700"
           fontStyle="semibold"
           label={t('ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.CONFIRM')}
           loading={isLoading}
           onPress={handleDelete}
           underline={false}
         />
-        <Styled.CloseButton
+        <Styled.CloseModalButton
           color="primary.700"
           fontStyle="semibold"
           label={t('ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.CANCEL')}
diff --git a/src/onboarding/family/deleteFamilyMember/style.ts b/src/onboarding/family/deleteFamilyMember/style.ts
index 01ec0fe2..42edf7c0 100644
--- a/src/onboarding/family/deleteFamilyMember/style.ts
+++ b/src/onboarding/family/deleteFamilyMember/style.ts
@@ -12,10 +12,14 @@ export const DeleteButtonContainer = styled.View`
   margin-top: 24px;
 `;
 
-export const DeleteButton = styled(Button)`
+export const DeleteMemberButton = styled(Button)`
   margin-left: 8px;
 `;
 
-export const CloseButton = styled(Button)`
+export const DeleteModalButton = styled(Button)`
+  margin-top: 32px;
+`;
+
+export const CloseModalButton = styled(Button)`
   margin-top: 16px;
 `;
diff --git a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
index 4449fe64..d976cfc8 100644
--- a/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
+++ b/src/onboarding/family/editFamilyMember/EditFamilyMember.tsx
@@ -34,13 +34,13 @@ export const EditFamilyMember = ({ navigation, route }: TProps) => {
     });
     return avatars;
   }, []);
-  const { mutate: editFamilyMember } = useEditFamilyMember(member.passholderId);
+  const { mutateAsync: editFamilyMember, isLoading } = useEditFamilyMember(member.passholderId);
 
   const { bottom } = useSafeAreaInsets();
   const { t } = useTranslation();
 
-  const handleSubmit = () => {
-    editFamilyMember({ body: { icon: selectedAvatar } });
+  const handleSubmit = async () => {
+    await editFamilyMember({ body: { icon: selectedAvatar } });
     queryClient.invalidateQueries(['family-members']);
     navigation.goBack();
   };
@@ -77,7 +77,7 @@ export const EditFamilyMember = ({ navigation, route }: TProps) => {
         )}
       />
       <Styled.StickyFooter style={{ marginBottom: bottom + 16 }}>
-        <Button label={t('ONBOARDING.FAMILY.EDIT_MEMBER.SAVE')} onPress={handleSubmit} />
+        <Button label={t('ONBOARDING.FAMILY.EDIT_MEMBER.SAVE')} loading={isLoading} onPress={handleSubmit} />
       </Styled.StickyFooter>
     </Styled.ScreenContainer>
   );