fix: fix bugs in delete family member flow

cultuurnet · Nov 21, 2023 · 53c71df · 53c71df
1 parent ba93c7a
commit 53c71df
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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
@@ -48,6 +48,7 @@ const DeleteFamilyMember = ({ name, familyMemberId }: TProps) => {
         </Styled.Title>
         <Trans i18nKey="ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.DESCRIPTION" values={{ name }} />
         <Styled.DeleteButton
+          backgroundColor="error.700"
           fontStyle="semibold"
           label={t('ONBOARDING.FAMILY.DELETE_MEMBER.CONFIRMATION_MODAL.CONFIRM')}
           loading={isLoading}

diff --git a/src/onboarding/family/deleteFamilyMember/style.ts b/src/onboarding/family/deleteFamilyMember/style.ts
@@ -13,7 +13,7 @@ export const DeleteButtonContainer = styled.View`
 `;
 
 export const DeleteButton = styled(Button)`
-  margin-left: 8px;
+  margin-top: 32px;
 `;
 
 export const CloseButton = styled(Button)`

diff --git 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>
   );