fix: [IOBP-361] Fix ID Pay rules info bottom sheet in initiative deta…

…ils screen (#5209)

## Short description
This PR fixes the ID Pay initiative rules info bottom sheet height for
shorter contents.



https://github.com/pagopa/io-app/assets/6160324/7ffc63cf-82d8-4349-a55a-651157537887


## List of changes proposed in this pull request
-
[ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx](https://github.com/pagopa/io-app/compare/IOBP-361-fix-idpay-rules-bottom-sheet?expand=1#diff-aec7df12aad70c4276336c3813019b4655fac37dc09eb456b93208f7c6b8b302):
increased bottom padding to `170` for the rules bottom sheet
-
[ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx](https://github.com/pagopa/io-app/compare/IOBP-361-fix-idpay-rules-bottom-sheet?expand=1#diff-763f13f0b9f72e4763aa758664939937121a62cc637c86ff29bfe6f41ab7d56c):
component props refactoring

## How to test
Navigate to the ID Pay initiative details screen and check that the
rules bottom sheet is correctly displayed.

Co-authored-by: Alessandro Izzo <34343582+Hantex9@users.noreply.github.com>

ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx

@@ -34,17 +34,31 @@ import {
   InitiativeRulesInfoBoxSkeleton
 } from "./InitiativeRulesInfoBox";
 
-export type BeneficiaryDetailsProps = {
-  initiativeDetails: InitiativeDTO;
-  beneficiaryDetails: InitiativeDetailDTO;
-  onboardingStatus: OnboardingStatusDTO;
-};
+export type BeneficiaryDetailsProps =
+  | {
+      isLoading?: false;
+      initiativeDetails: InitiativeDTO;
+      beneficiaryDetails: InitiativeDetailDTO;
+      onboardingStatus: OnboardingStatusDTO;
+    }
+  | {
+      isLoading: true;
+      initiativeDetails?: never;
+      beneficiaryDetails?: never;
+      onboardingStatus?: never;
+    };
 
 const formatDate = (fmt: string) => (date: Date) => format(date, fmt);
 
 const BeneficiaryDetailsContent = (props: BeneficiaryDetailsProps) => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
-  const { initiativeDetails, beneficiaryDetails, onboardingStatus } = props;
+  const { initiativeDetails, beneficiaryDetails, onboardingStatus, isLoading } =
+    props;
+
+  if (isLoading) {
+    return <BeneficiaryDetailsContentSkeleton />;
+  }
+
   const {
     initiativeId,
     initiativeName,
@@ -293,4 +307,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export { BeneficiaryDetailsContent, BeneficiaryDetailsContentSkeleton };
+export { BeneficiaryDetailsContent };

ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx

@@ -45,7 +45,7 @@ const InitiativeRulesInfoBox = (props: Props) => {
         </ContentWrapper>
       )
     },
-    130
+    170
   );
 
   return (

ts/features/idpay/details/screens/BeneficiaryDetailsScreen.tsx

@@ -1,18 +1,15 @@
+import { ContentWrapper } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { RouteProp, useRoute } from "@react-navigation/native";
 import { sequenceS } from "fp-ts/lib/Apply";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { ScrollView } from "react-native";
-import { ContentWrapper } from "@pagopa/io-app-design-system";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
-import {
-  BeneficiaryDetailsContent,
-  BeneficiaryDetailsContentSkeleton
-} from "../components/BeneficiaryDetailsContent";
+import { BeneficiaryDetailsContent } from "../components/BeneficiaryDetailsContent";
 import { IDPayDetailsParamsList } from "../navigation";
 import {
   idPayBeneficiaryDetailsSelector,
@@ -57,7 +54,7 @@ const BeneficiaryDetailsScreen = () => {
       onboardingStatus: pipe(idPayOnboardingStatusPot, pot.toOption)
     }),
     O.fold(
-      () => <BeneficiaryDetailsContentSkeleton />,
+      () => <BeneficiaryDetailsContent isLoading={true} />,
       props => <BeneficiaryDetailsContent {...props} />
     )
   );