feat: [IOCOM-1199] Vertically ordered CTAs and Payment button on new …

…DS message details screen (#5636)

## Short description
This PR changes the CTAs and Payment buttons alignment on a message
details screen with the new DS.
|Payment with<br/>double CTAs|Payment with<br/>CTA|No payment<br/>double
CTAs|
|-|-|-|
|![Simulator Screenshot - iPhone 15 - 2024-03-27 at 13 03
41](https://github.com/pagopa/io-app/assets/5150343/29de6e5f-f7e5-4593-936e-3b030a54a441)|![Simulator
Screenshot - iPhone 15 - 2024-03-27 at 13 03
48](https://github.com/pagopa/io-app/assets/5150343/eab13609-742a-4f90-9b83-03627e2ed0d4)|![Simulator
Screenshot - iPhone 15 - 2024-03-27 at 13 03
56](https://github.com/pagopa/io-app/assets/5150343/36704748-e221-439c-9519-d6e88d312c81)|

|Payment<br/>without CTAs|CTA without<br/>payment|No payment<br/>no
CTAs|
|-|-|-|
|![Simulator Screenshot - iPhone 15 - 2024-03-27 at 13 04
09](https://github.com/pagopa/io-app/assets/5150343/7d6249ee-e753-4784-9a81-18348c890b86)|![Simulator
Screenshot - iPhone 15 - 2024-03-27 at 13 04
18](https://github.com/pagopa/io-app/assets/5150343/fe97bf76-ef3f-4bd1-952e-74dbc83139ff)|![Simulator
Screenshot - iPhone 15 - 2024-03-27 at 13 04
23](https://github.com/pagopa/io-app/assets/5150343/852615b9-1c00-4d79-a660-9aefa7515957)|

## List of changes proposed in this pull request
The algorithm is a follow:
- if there is a payment and two CTAs, the payment button is shown on top
(solid), the first CTA button is on the middle (Outline) and the second
CTA button is on the bottom (as a link)
- if there is a payment and a single CTA, the payment button is shown on
top (solid) and the CTA button is on the bottom (as a link)
- if there is no payment and two CTAs, the first CTA button in on top
(solid) and the second CTA button is on the bottom (as a link)
- if there is a payment and no CTAs, the payment button is displayed
(solid)
- if there is no payment and a single CTA, the CTA button is displayed
(solid)
- if there is no payment and no CTAs, the sticky footer is not displayed

Keep in mind that the payment button may disappear asynchronously if the
payment is later checked to be paid.

## How to test
Using the io-dev-api-server, generate some messages with payment and
CTAs and check that each of the conditions described above is verified.

ts/components/cta/ExtractedCTABar.tsx

@@ -68,7 +68,7 @@ const ExtractedCTABar: React.FunctionComponent<Props> = (
         props,
         linkTo,
         false,
-        props.isPNOptInMessage?.cta2HasServiceNavigationLink ?? false,
+        props.isPNOptInMessage?.cta2LinksToPNService ?? false,
         ctas.cta_2
       ),
     [ctas.cta_2, linkTo, props]
@@ -79,7 +79,7 @@ const ExtractedCTABar: React.FunctionComponent<Props> = (
         props,
         linkTo,
         true,
-        props.isPNOptInMessage?.cta1HasServiceNavigationLink ?? false,
+        props.isPNOptInMessage?.cta1LinksToPNService ?? false,
         ctas.cta_1
       ),
     [ctas.cta_1, linkTo, props]

ts/features/messages/components/MessageDetail/MessageDetailsPaymentButton.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ButtonSolid, useIOToast } from "@pagopa/io-app-design-system";
+import { PaymentData, UIMessageId } from "../../types";
+import { useIODispatch } from "../../../../store/hooks";
+import I18n from "../../../../i18n";
+import {
+  getRptIdStringFromPaymentData,
+  initializeAndNavigateToWalletForPayment
+} from "../../utils";
+
+type MessageDetailsPaymentButtonProps = {
+  messageId: UIMessageId;
+  paymentData: PaymentData;
+  canNavigateToPayment: boolean;
+  isLoading: boolean;
+};
+
+export const MessageDetailsPaymentButton = ({
+  messageId,
+  paymentData,
+  canNavigateToPayment,
+  isLoading
+}: MessageDetailsPaymentButtonProps) => {
+  const dispatch = useIODispatch();
+  const toast = useIOToast();
+  return (
+    <ButtonSolid
+      label={I18n.t("features.messages.payments.pay")}
+      accessibilityLabel={I18n.t("features.messages.payments.pay")}
+      onPress={() =>
+        initializeAndNavigateToWalletForPayment(
+          messageId,
+          getRptIdStringFromPaymentData(paymentData),
+          false,
+          paymentData.amount,
+          canNavigateToPayment,
+          dispatch,
+          false,
+          () => toast.error(I18n.t("genericError"))
+        )
+      }
+      fullWidth
+      loading={isLoading}
+    />
+  );
+};

ts/features/messages/components/MessageDetail/MessageDetailsScrollViewAdditionalSpace.tsx

@@ -9,25 +9,29 @@ import { gapBetweenItemsInAGrid } from "../../utils";
 
 type ScrollViewAdditionalSpaceProps = {
   messageId: UIMessageId;
-  hasCTAS: boolean;
+  hasCTA1: boolean;
+  hasCTA2: boolean;
 };
 
 export const MessageDetailsScrollViewAdditionalSpace = ({
   messageId,
-  hasCTAS
+  hasCTA1,
+  hasCTA2
 }: ScrollViewAdditionalSpaceProps) => {
   const safeAreaInsets = useSafeAreaInsets();
   const isShowingPaymentButton = useIOSelector(state =>
     isPaymentsButtonVisibleSelector(state, messageId)
   );
-  const stickyFooterRowHeight =
-    IOStyles.footer.paddingBottom + buttonSolidHeight + gapBetweenItemsInAGrid;
+  const hasAtLeastAButton = isShowingPaymentButton || hasCTA1 || hasCTA2;
 
   const height =
-    safeAreaInsets.bottom +
+    (hasAtLeastAButton ? IOStyles.footer.paddingBottom : 0) +
+    (isShowingPaymentButton ? buttonSolidHeight + gapBetweenItemsInAGrid : 0) +
+    (hasCTA1 ? buttonSolidHeight + gapBetweenItemsInAGrid : 0) +
+    (hasCTA2 ? buttonSolidHeight + gapBetweenItemsInAGrid : 0) +
+    gapBetweenItemsInAGrid +
     IOStyles.footer.paddingBottom +
-    (isShowingPaymentButton ? stickyFooterRowHeight : 0) +
-    (hasCTAS ? stickyFooterRowHeight : 0);
+    safeAreaInsets.bottom;
   return (
     <View
       style={{