refactor: [IOBP-1096] Replace legacy markdown component for IDPay (#6585

) ## Short description This pull request includes several changes to the `idpay` feature components, focusing on replacing the `LegacyMarkdown` component with the new `IOMarkdown` component. ## List of changes proposed in this pull request - Replaced `LegacyMarkdown` with `IOMarkdown` for displaying markdown content - Removed `OnboardingDescriptionMarkdown` component in `ts/features/idpay/onboarding/components/OnboardingDescriptionMarkdown.tsx` as already done in #6445 ## How to test Ensure that all legacy IDPay markdown components are aligned with the established design requirements Co-authored-by: Alessandro <[email protected]>
pagopa · Jan 15, 2025 · 6d14bde · 6d14bde
1 parent 40f6224
commit 6d14bde
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 55 deletions.
diff --git a/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx b/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx
@@ -12,9 +12,9 @@ import React from "react";
 import { StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../../i18n";
 import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
+import IOMarkdown from "../../../../components/IOMarkdown";
 
 type Props = {
   content: string;
@@ -25,7 +25,7 @@ const InitiativeRulesInfoBox = (props: Props) => {
 
   const { bottomSheet, present, dismiss } = useIOBottomSheetAutoresizableModal(
     {
-      component: <LegacyMarkdown>{content}</LegacyMarkdown>,
+      component: <IOMarkdown content={content} />,
       title: I18n.t("idpay.initiative.beneficiaryDetails.infoModal.title"),
       footer: (
         <ContentWrapper>

diff --git a/ts/features/idpay/onboarding/components/OnboardingDescriptionMarkdown.tsx b/ts/features/idpay/onboarding/components/OnboardingDescriptionMarkdown.tsx
@@ -1,42 +1,7 @@
+import { VSpacer } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { View } from "react-native";
 import Placeholder from "rn-placeholder";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
-
-type Props = {
-  description: string;
-  onLoadEnd: () => void;
-};
-
-const OnboardingDescriptionMarkdown = (props: Props) => {
-  const { description, onLoadEnd } = props;
-
-  const [isLoaded, setLoaded] = React.useState(false);
-
-  const handleOnLoadEnd = () => {
-    // The markdown component has a different height for some istants after finishing loading
-    // Setting a timeout allows to properly display other components once the Markdown has finished
-    // loading.
-    setTimeout(() => {
-      setLoaded(true);
-      onLoadEnd();
-    }, 300);
-  };
-
-  if (description.length > 0) {
-    return (
-      <View style={{ flexGrow: 1 }}>
-        {!isLoaded && <OnboardingDescriptionMarkdownSkeleton />}
-        <LegacyMarkdown onLoadEnd={handleOnLoadEnd}>
-          {description}
-        </LegacyMarkdown>
-      </View>
-    );
-  }
-
-  return <View style={{ flexGrow: 1 }} />;
-};
 
 const OnboardingDescriptionMarkdownSkeleton = () => (
   <>
@@ -68,4 +33,4 @@ const OnboardingDescriptionMarkdownSkeleton = () => (
   </>
 );
 
-export { OnboardingDescriptionMarkdown, OnboardingDescriptionMarkdownSkeleton };
+export { OnboardingDescriptionMarkdownSkeleton };
diff --git a/ts/features/idpay/onboarding/screens/InitiativeDetailsScreen.tsx b/ts/features/idpay/onboarding/screens/InitiativeDetailsScreen.tsx
@@ -5,16 +5,14 @@ import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import { ForceScrollDownView } from "../../../../components/ForceScrollDownView";
+import IOMarkdown from "../../../../components/IOMarkdown";
 import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent";
 import { FooterActions } from "../../../../components/ui/FooterActions";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { isLoadingSelector } from "../../common/machine/selectors";
-import {
-  OnboardingDescriptionMarkdown,
-  OnboardingDescriptionMarkdownSkeleton
-} from "../components/OnboardingDescriptionMarkdown";
+import { OnboardingDescriptionMarkdownSkeleton } from "../components/OnboardingDescriptionMarkdown";
 import { OnboardingPrivacyAdvice } from "../components/OnboardingPrivacyAdvice";
 import { OnboardingServiceHeader } from "../components/OnboardingServiceHeader";
 import { IdPayOnboardingMachineContext } from "../machine/provider";
@@ -47,7 +45,6 @@ export const InitiativeDetailsScreen = () => {
 
   const initiative = useSelector(selectInitiative);
   const isLoading = useSelector(isLoadingSelector);
-  const [isDescriptionLoaded, setDescriptionLoaded] = React.useState(false);
 
   const handleGoBackPress = () => machine.send({ type: "close" });
   const handleContinuePress = () => machine.send({ type: "next" });
@@ -66,12 +63,7 @@ export const InitiativeDetailsScreen = () => {
     initiative,
     O.fold(
       () => <OnboardingDescriptionMarkdownSkeleton />,
-      ({ description }) => (
-        <OnboardingDescriptionMarkdown
-          onLoadEnd={() => setDescriptionLoaded(true)}
-          description={description}
-        />
-      )
+      ({ description }) => <IOMarkdown content={description} />
     )
   );
 
@@ -85,7 +77,6 @@ export const InitiativeDetailsScreen = () => {
   return (
     <ForceScrollDownView
       threshold={50}
-      scrollEnabled={isDescriptionLoaded}
       contentContainerStyle={styles.scrollContainer}
     >
       <View style={styles.container}>

diff --git a/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx
@@ -13,8 +13,8 @@ import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import IOMarkdown from "../../../../components/IOMarkdown";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import { useIOSelector } from "../../../../store/hooks";
@@ -58,14 +58,14 @@ export const PDNDPrerequisitesScreen = () => {
         "idpay.onboarding.PDNDPrerequisites.prerequisites.info.header"
       ),
       component: (
-        <LegacyMarkdown>
-          {I18n.t(
+        <IOMarkdown
+          content={I18n.t(
             "idpay.onboarding.PDNDPrerequisites.prerequisites.info.body",
             {
               provider: authority
             }
           )}
-        </LegacyMarkdown>
+        />
       ),
       footer: (
         <ContentWrapper>