From 96d0120ab120b498d5aadfe4575eb6148dfd8e46 Mon Sep 17 00:00:00 2001 From: Andrea Date: Thu, 18 Apr 2024 18:50:01 +0200 Subject: [PATCH] feat: [IOCOM-871] Pay button on SEND message details, with new DS system (#5664) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ⚠️ 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 <16268789+shadowsheep1@users.noreply.github.com> Co-authored-by: Martino Cesari Tomba <60693085+forrest57@users.noreply.github.com> --- .../pn/components/LegacyMessageDetails.tsx | 4 +- ts/features/pn/components/MessageDetails.tsx | 14 +- ...acyMessageFooter.tsx => MessageFooter.tsx} | 39 +- ts/features/pn/components/MessagePayments.tsx | 7 +- ...Footer.test.tsx => MessageFooter.test.tsx} | 6 +- ...t.tsx.snap => MessageFooter.test.tsx.snap} | 576 +++++++++--------- ts/features/pn/utils/__tests__/index.test.ts | 67 +- ts/features/pn/utils/index.ts | 6 + 8 files changed, 404 insertions(+), 315 deletions(-) rename ts/features/pn/components/{LegacyMessageFooter.tsx => MessageFooter.tsx} (74%) rename ts/features/pn/components/__test__/{LegacyMessageFooter.test.tsx => MessageFooter.test.tsx} (95%) rename ts/features/pn/components/__test__/__snapshots__/{LegacyMessageFooter.test.tsx.snap => MessageFooter.test.tsx.snap} (73%) diff --git a/ts/features/pn/components/LegacyMessageDetails.tsx b/ts/features/pn/components/LegacyMessageDetails.tsx index 063aea1d982..600590dec80 100644 --- 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 = ({ /> )} - - {canShowMorePaymentsLink(isCancelled, payments) && ( + + {shouldUseBottomSheetForPayments(isCancelled, payments) && ( | undefined; maxVisiblePaymentCount: number; @@ -33,13 +36,15 @@ type LegacyMessageFooterProps = { 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 ? ( + + + + ) : ( maxVisiblePaymentCount; const morePaymentsLabel = payments ? `${I18n.t("features.pn.details.paymentSection.morePayments")} (${ payments.length @@ -184,7 +183,7 @@ export const MessagePayments = ({ /> ); })} - {showMorePaymentsLink && ( + {canShowMorePaymentsLink(isCancelled, payments) && ( <> {paymentsButtonStatus === "visibleLoading" && ( diff --git a/ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx b/ts/features/pn/components/__test__/MessageFooter.test.tsx similarity index 95% rename from ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx rename to ts/features/pn/components/__test__/MessageFooter.test.tsx index c69e9f3d332..81539a40c07 100644 --- a/ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx +++ b/ts/features/pn/components/__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( () => ( - `; -exports[`LegacyMessageFooter should match snapshot for hidden button 1`] = ` +exports[`MessageFooter should match snapshot for hidden button 1`] = `