feat: [IOCOM-871] Pay button on SEND message details, with new DS sys…

…tem (#5664) ⚠️ This PR depends on #5661 ⚠️ ## Short description This PR adds the Pay button to a SEND's message details, with the new DS. ![Simulator Screenshot - iPhone 15 - 2024-04-04 at 10 33 26](https://github.com/pagopa/io-app/assets/5150343/ba4e6217-dec9-46b3-a25c-e6e7c58bba63) ## List of changes proposed in this pull request - `MessageFooter` adapted to use the new DS - `MessageFooter` added to `MessageDetails` - Fixed bad alignment of loading "More Payments" link on `MessagePayments` ## How to test Using the io-dev-api-server, check that: - for a SEND message with no payments, there is no pay button - for a SEND message with one to-pay button, there is the pay button. By clicking it, the payment flow starts and, if the payment completes, the button disappears - for a SEND message with less or up-to five payments, all of them either paid or with an error, there is no button - for a SEND message with less or up-to five payments, where at least one is payable, there is the pay button. By clicking it, the payments bottom sheet appears. When all of them are paid (or have an error), the button disappears - for a SEND message, with more than five payments, no matter their statues, there is the pay button. By clicking it, the payments bottom sheet appears - for a cancelled SEND message with no payments, there is no pay button - for a cancelled SEND message with to-pay payments, there is no pay button - for a cancelled SEND message with paid payments, there is no pay button --------- Co-authored-by: Fabio Bombardi <[email protected]> Co-authored-by: Martino Cesari Tomba <[email protected]>
pagopa · Apr 18, 2024 · 96d0120 · 96d0120
1 parent 8bc70f5
commit 96d0120
Show file tree

Hide file tree

Showing 8 changed files with 404 additions and 315 deletions.
diff --git a/ts/features/pn/components/LegacyMessageDetails.tsx b/ts/features/pn/components/LegacyMessageDetails.tsx
@@ -41,7 +41,7 @@ import { MessageDetailsSection } from "./MessageDetailsSection";
 import { MessageTimeline } from "./MessageTimeline";
 import { MessageTimelineCTA } from "./MessageTimelineCTA";
 import { LegacyMessageF24 } from "./LegacyMessageF24";
-import { LegacyMessageFooter } from "./LegacyMessageFooter";
+import { MessageFooter } from "./MessageFooter";
 import { LegacyMessagePayments } from "./LegacyMessagePayments";
 import { MessagePaymentBottomSheet } from "./MessagePaymentBottomSheet";
 
@@ -194,7 +194,7 @@ export const LegacyMessageDetails = ({
         />
       )}
 
-      <LegacyMessageFooter
+      <MessageFooter
         messageId={messageId}
         payments={payments}
         maxVisiblePaymentCount={maxVisiblePaymentCount}

diff --git a/ts/features/pn/components/MessageDetails.tsx b/ts/features/pn/components/MessageDetails.tsx
@@ -22,15 +22,16 @@ import { MessageDetailsTagBox } from "../../messages/components/MessageDetail/Me
 import { MessageDetailsAttachments } from "../../messages/components/MessageDetail/MessageDetailsAttachments";
 import { UIMessageId } from "../../messages/types";
 import {
-  canShowMorePaymentsLink,
-  maxVisiblePaymentCountGenerator
+  maxVisiblePaymentCountGenerator,
+  shouldUseBottomSheetForPayments
 } from "../utils";
 import { MessageDetailsContent } from "./MessageDetailsContent";
 import { F24Section } from "./F24Section";
 import { MessageBottomMenu } from "./MessageBottomMenu";
 import { MessagePayments } from "./MessagePayments";
 import { MessageInfo } from "./MessageInfo";
 import { MessagePaymentBottomSheet } from "./MessagePaymentBottomSheet";
+import { MessageFooter } from "./MessageFooter";
 
 type MessageDetailsProps = {
   message: PNMessage;
@@ -121,7 +122,14 @@ export const MessageDetails = ({
         </ContentWrapper>
         <MessageBottomMenu serviceId={serviceId} />
       </ScrollView>
-      {canShowMorePaymentsLink(isCancelled, payments) && (
+      <MessageFooter
+        messageId={messageId}
+        payments={payments}
+        maxVisiblePaymentCount={maxVisiblePaymentCount}
+        isCancelled={isCancelled}
+        presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
+      />
+      {shouldUseBottomSheetForPayments(isCancelled, payments) && (
         <MessagePaymentBottomSheet
           messageId={messageId}
           payments={payments}

diff --git a/...res/pn/components/LegacyMessageFooter.tsx → ts/features/pn/components/MessageFooter.tsx b/...res/pn/components/LegacyMessageFooter.tsx → ts/features/pn/components/MessageFooter.tsx
@@ -5,8 +5,9 @@ import {
   IOStyles,
   useIOToast
 } from "@pagopa/io-app-design-system";
-import I18n from "i18n-js";
 import { useDispatch } from "react-redux";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import I18n from "../../../i18n";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
 import { useIOSelector } from "../../../store/hooks";
 import { UIMessageId } from "../../messages/types";
@@ -16,6 +17,8 @@ import { getRptIdStringFromPayment } from "../utils/rptId";
 import { trackPNShowAllPayments } from "../analytics";
 import { initializeAndNavigateToWalletForPayment } from "../../messages/utils";
 import { paymentsButtonStateSelector } from "../store/reducers/payments";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
+import { shouldUseBottomSheetForPayments } from "../utils";
 
 const styles = StyleSheet.create({
   container: {
@@ -25,21 +28,23 @@ const styles = StyleSheet.create({
   }
 });
 
-type LegacyMessageFooterProps = {
+type MessageFooterProps = {
   messageId: UIMessageId;
   payments: ReadonlyArray<NotificationPaymentInfo> | undefined;
   maxVisiblePaymentCount: number;
   isCancelled: boolean;
   presentPaymentsBottomSheetRef: MutableRefObject<(() => void) | undefined>;
 };
 
-export const LegacyMessageFooter = ({
+export const MessageFooter = ({
   messageId,
   payments,
   maxVisiblePaymentCount,
   isCancelled,
   presentPaymentsBottomSheetRef
-}: LegacyMessageFooterProps) => {
+}: MessageFooterProps) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
   const buttonState = useIOSelector(state =>
     paymentsButtonStateSelector(
       state,
@@ -54,7 +59,10 @@ export const LegacyMessageFooter = ({
     canNavigateToPaymentFromMessageSelector(state)
   );
   const onFooterPressCallback = useCallback(() => {
-    if (payments?.length === 1) {
+    if (shouldUseBottomSheetForPayments(false, payments)) {
+      trackPNShowAllPayments();
+      presentPaymentsBottomSheetRef.current?.();
+    } else if (payments) {
       const firstPayment = payments[0];
       const paymentId = getRptIdStringFromPayment(firstPayment);
       initializeAndNavigateToWalletForPayment(
@@ -67,9 +75,6 @@ export const LegacyMessageFooter = ({
         true,
         () => toast.error(I18n.t("genericError"))
       );
-    } else {
-      trackPNShowAllPayments();
-      presentPaymentsBottomSheetRef.current?.();
     }
   }, [
     canNavigateToPayment,
@@ -83,7 +88,23 @@ export const LegacyMessageFooter = ({
     return null;
   }
   const isLoading = buttonState === "visibleLoading";
-  return (
+  return isDesignSystemEnabled ? (
+    <View
+      style={[
+        IOStyles.footer,
+        { paddingBottom: safeAreaInsets.bottom + IOStyles.footer.paddingBottom }
+      ]}
+    >
+      <ButtonSolid
+        disabled={isLoading}
+        label={I18n.t("wallet.continue")}
+        accessibilityLabel={I18n.t("wallet.continue")}
+        onPress={onFooterPressCallback}
+        fullWidth
+        loading={isLoading}
+      />
+    </View>
+  ) : (
     <View style={styles.container}>
       <View style={IOStyles.footer}>
         <ButtonSolid

diff --git a/ts/features/pn/components/MessagePayments.tsx b/ts/features/pn/components/MessagePayments.tsx
@@ -23,11 +23,12 @@ import PN_ROUTES from "../navigation/routes";
 import { MESSAGES_ROUTES } from "../../messages/navigation/routes";
 import { MessagePaymentItem } from "../../messages/components/MessageDetail/MessagePaymentItem";
 import { getRptIdStringFromPayment } from "../utils/rptId";
+import { canShowMorePaymentsLink } from "../utils";
 
 const styles = StyleSheet.create({
   morePaymentsSkeletonContainer: {
     flex: 1,
-    alignItems: "flex-start"
+    alignItems: "center"
   },
   morePaymentsLinkContainer: {
     alignSelf: "center"
@@ -154,8 +155,6 @@ export const MessagePayments = ({
     );
   }
 
-  const showMorePaymentsLink =
-    payments && payments.length > maxVisiblePaymentCount;
   const morePaymentsLabel = payments
     ? `${I18n.t("features.pn.details.paymentSection.morePayments")} (${
         payments.length
@@ -184,7 +183,7 @@ export const MessagePayments = ({
               />
             );
           })}
-          {showMorePaymentsLink && (
+          {canShowMorePaymentsLink(isCancelled, payments) && (
             <>
               <VSpacer size={32} />
               {paymentsButtonStatus === "visibleLoading" && (

diff --git a/...nts/__test__/LegacyMessageFooter.test.tsx → ...omponents/__test__/MessageFooter.test.tsx b/...nts/__test__/LegacyMessageFooter.test.tsx → ...omponents/__test__/MessageFooter.test.tsx
@@ -5,11 +5,11 @@ import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/per
 import { appReducer } from "../../../../store/reducers";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
 import { UIMessageId } from "../../../messages/types";
-import { LegacyMessageFooter } from "../LegacyMessageFooter";
+import { MessageFooter } from "../MessageFooter";
 import * as standardPayments from "../../../messages/store/reducers/payments";
 import * as payments from "../../store/reducers/payments";
 
-describe("LegacyMessageFooter", () => {
+describe("MessageFooter", () => {
   beforeEach(() => {
     jest.resetAllMocks();
     jest.clearAllMocks();
@@ -64,7 +64,7 @@ const renderScreen = (
 
   return renderScreenWithNavigationStoreContext(
     () => (
-      <LegacyMessageFooter
+      <MessageFooter
         messageId={messageId}
         maxVisiblePaymentCount={maxVisiblePaymentCount}
         isCancelled={isCancelled}