feat: redesign payment success screen

__tests__/screens/send-bitcoin-completed-screen.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { fireEvent, render, screen, waitFor } from "@testing-library/react-native"
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react-native"
 import { loadLocale } from "@app/i18n/i18n-util.sync"
 import { i18nObject } from "@app/i18n/i18n-util"
 import {
@@ -9,13 +9,20 @@ import {
   SuccessAction,
 } from "@app/screens/send-bitcoin-screen/send-bitcoin-completed-screen.stories"
 import { ContextForScreen } from "./helper"
-import { Linking } from "react-native"
+import { Linking, View } from "react-native"
 
 jest.mock("react-native-in-app-review", () => ({
   isAvailable: () => true,
   RequestInAppReview: jest.fn(),
 }))
 
+jest.mock("react-native-view-shot", () => {
+  return {
+    __esModule: true,
+    default: ({ children }: { children: React.ReactNode }) => <View>{children}</View>,
+  }
+})
+
 describe("SendBitcoinCompletedScreen", () => {
   let LL: ReturnType<typeof i18nObject>
 
@@ -32,9 +39,7 @@ describe("SendBitcoinCompletedScreen", () => {
     )
 
     const successTextElement = await waitFor(() => screen.findByTestId("Success Text"))
-    expect(successTextElement.props.children).toContain(
-      "Payment has been sent successfully",
-    )
+    expect(within(successTextElement).getByTestId("SUCCESS")).toBeTruthy()
   })
 
   it("renders the Queued state correctly", async () => {
@@ -45,9 +50,7 @@ describe("SendBitcoinCompletedScreen", () => {
     )
 
     const queuedTextElement = await waitFor(() => screen.findByTestId("Success Text"))
-    expect(queuedTextElement.props.children).toEqual(
-      expect.stringContaining("Your transaction is queued"),
-    )
+    expect(within(queuedTextElement).getByTestId("QUEUED")).toBeTruthy()
   })
 
   it("renders the Pending state correctly", async () => {
@@ -58,9 +61,7 @@ describe("SendBitcoinCompletedScreen", () => {
     )
 
     const pendingTextElement = await waitFor(() => screen.findByTestId("Success Text"))
-    expect(pendingTextElement.props.children).toEqual(
-      expect.stringContaining("The payment has been sent"),
-    )
+    expect(within(pendingTextElement).getByTestId("PENDING")).toBeTruthy()
   })
 
   it("render successAction - LUD 09 - message", async () => {
@@ -78,6 +79,11 @@ describe("SendBitcoinCompletedScreen", () => {
           iv: null,
           decipher: () => null,
         },
+        formatAmount: "$0.03 (25 SAT)",
+        feeDisplayText: "$0.00 (0 SAT)",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -88,7 +94,15 @@ describe("SendBitcoinCompletedScreen", () => {
     )
 
     expect(screen.getByText(lud09MessageRoute.params.successAction.message)).toBeTruthy()
-    expect(screen.getByText(LL.SendBitcoinScreen.note())).toBeTruthy()
+    expect(screen.getByText(lud09MessageRoute.params.formatAmount)).toBeTruthy()
+    expect(
+      screen.getByText(
+        `${lud09MessageRoute.params.feeDisplayText} | ${lud09MessageRoute.params.paymentType}`,
+      ),
+    ).toBeTruthy()
+    expect(screen.getByText(lud09MessageRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
+    expect(screen.getByText(LL.common.close())).toBeTruthy()
   })
 
   it("render successAction - LUD 09 - URL", async () => {
@@ -106,6 +120,11 @@ describe("SendBitcoinCompletedScreen", () => {
           iv: null,
           decipher: () => null,
         },
+        formatAmount: "$0.03 (25 SAT)",
+        feeDisplayText: "$0.00 (0 SAT)",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -115,13 +134,23 @@ describe("SendBitcoinCompletedScreen", () => {
       </ContextForScreen>,
     )
 
-    const button = screen.getByText(LL.ScanningQRCodeScreen.openLinkTitle())
-
+    const button = await waitFor(() =>
+      screen.findByTestId(LL.ScanningQRCodeScreen.openLinkTitle()),
+    )
     expect(button).toBeTruthy()
-
     fireEvent.press(button)
-
     expect(Linking.openURL).toHaveBeenCalledWith(lud09URLRoute.params.successAction.url)
+
+    expect(screen.getByText(lud09URLRoute.params.successAction.url)).toBeTruthy()
+    expect(screen.getByText(lud09URLRoute.params.formatAmount)).toBeTruthy()
+    expect(
+      screen.getByText(
+        `${lud09URLRoute.params.feeDisplayText} | ${lud09URLRoute.params.paymentType}`,
+      ),
+    ).toBeTruthy()
+    expect(screen.getByText(lud09URLRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
+    expect(screen.getByText(LL.common.close())).toBeTruthy()
   })
 
   it("render successAction - LUD 09 - URL with description", async () => {
@@ -139,6 +168,11 @@ describe("SendBitcoinCompletedScreen", () => {
           iv: null,
           decipher: () => null,
         },
+        formatAmount: "$0.03 (25 SAT)",
+        feeDisplayText: "$0.00 (0 SAT)",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -148,19 +182,28 @@ describe("SendBitcoinCompletedScreen", () => {
       </ContextForScreen>,
     )
 
-    expect(
-      screen.getByText(lud09URLWithDescRoute.params.successAction.description),
-    ).toBeTruthy()
-
-    const button = screen.getByText(LL.ScanningQRCodeScreen.openLinkTitle())
-
+    const button = await waitFor(() =>
+      screen.findByTestId(LL.ScanningQRCodeScreen.openLinkTitle()),
+    )
     expect(button).toBeTruthy()
-
     fireEvent.press(button)
-
     expect(Linking.openURL).toHaveBeenCalledWith(
       lud09URLWithDescRoute.params.successAction.url,
     )
+
+    expect(
+      screen.getByText(lud09URLWithDescRoute.params.successAction.description),
+    ).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.successAction.url)).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.formatAmount)).toBeTruthy()
+    expect(
+      screen.getByText(
+        `${lud09URLWithDescRoute.params.feeDisplayText} | ${lud09URLWithDescRoute.params.paymentType}`,
+      ),
+    ).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
+    expect(screen.getByText(LL.common.close())).toBeTruthy()
   })
 
   it("render successAction - LUD 10 - message", async () => {
@@ -180,6 +223,11 @@ describe("SendBitcoinCompletedScreen", () => {
           decipher: () => null,
         },
         preimage: "25004cd52960a3bac983e3f95c432341a7052cef37b9253b0b0b1256d754559b",
+        formatAmount: "$0.03 (25 SAT)",
+        feeDisplayText: "$0.00 (0 SAT)",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -189,8 +237,19 @@ describe("SendBitcoinCompletedScreen", () => {
       </ContextForScreen>,
     )
 
-    expect(screen.getByText(lud10AESRoute.params.successAction.description)).toBeTruthy()
-    expect(screen.getByText(encryptedMessage)).toBeTruthy()
-    expect(screen.getByText(LL.SendBitcoinScreen.note())).toBeTruthy()
+    expect(
+      screen.getByText(
+        `${lud10AESRoute.params.successAction.description} ${encryptedMessage}`,
+      ),
+    ).toBeTruthy()
+    expect(screen.getByText(lud10AESRoute.params.formatAmount)).toBeTruthy()
+    expect(
+      screen.getByText(
+        `${lud10AESRoute.params.feeDisplayText} | ${lud10AESRoute.params.paymentType}`,
+      ),
+    ).toBeTruthy()
+    expect(screen.getByText(lud10AESRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
+    expect(screen.getByText(LL.common.close())).toBeTruthy()
   })
 })

app/components/success-action/field-with-icon.props.tsx

@@ -0,0 +1,7 @@
+import { IconNamesType } from "@app/components/atomic/galoy-icon"
+
+export type FieldWithIconProps = {
+  title?: string
+  value: string
+  iconName?: IconNamesType
+}