feat: redesign payment success screen

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

@@ -1,5 +1,12 @@
 import React from "react"
-import { fireEvent, render, screen, waitFor } from "@testing-library/react-native"
+import {
+  act,
+  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 +16,22 @@ 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>,
+  }
+})
+
+jest.useFakeTimers()
+
 describe("SendBitcoinCompletedScreen", () => {
   let LL: ReturnType<typeof i18nObject>
 
@@ -32,9 +48,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 +59,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 +70,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 +88,13 @@ describe("SendBitcoinCompletedScreen", () => {
           iv: null,
           decipher: () => null,
         },
+        currencyAmount: "$0.03",
+        satAmount: "25 SAT",
+        currencyFeeAmount: "$0.00",
+        satFeeAmount: "0 SAT",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -87,8 +104,16 @@ describe("SendBitcoinCompletedScreen", () => {
       </ContextForScreen>,
     )
 
+    act(() => {
+      jest.advanceTimersByTime(2300)
+    })
+
     expect(screen.getByText(lud09MessageRoute.params.successAction.message)).toBeTruthy()
-    expect(screen.getByText(LL.SendBitcoinScreen.note())).toBeTruthy()
+    expect(screen.getByText(lud09MessageRoute.params.currencyAmount)).toBeTruthy()
+    expect(screen.getByText(lud09MessageRoute.params.currencyFeeAmount)).toBeTruthy()
+    expect(screen.getByText(lud09MessageRoute.params.paymentType)).toBeTruthy()
+    expect(screen.getByText(lud09MessageRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
   })
 
   it("render successAction - LUD 09 - URL", async () => {
@@ -106,6 +131,13 @@ describe("SendBitcoinCompletedScreen", () => {
           iv: null,
           decipher: () => null,
         },
+        currencyAmount: "$0.03",
+        satAmount: "25 SAT",
+        currencyFeeAmount: "$0.00",
+        satFeeAmount: "0 SAT",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -115,13 +147,23 @@ describe("SendBitcoinCompletedScreen", () => {
       </ContextForScreen>,
     )
 
-    const button = screen.getByText(LL.ScanningQRCodeScreen.openLinkTitle())
+    act(() => {
+      jest.advanceTimersByTime(2300)
+    })
 
+    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.currencyAmount)).toBeTruthy()
+    expect(screen.getByText(lud09URLRoute.params.currencyFeeAmount)).toBeTruthy()
+    expect(screen.getByText(lud09URLRoute.params.paymentType)).toBeTruthy()
+    expect(screen.getByText(lud09URLRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
   })
 
   it("render successAction - LUD 09 - URL with description", async () => {
@@ -139,6 +181,13 @@ describe("SendBitcoinCompletedScreen", () => {
           iv: null,
           decipher: () => null,
         },
+        currencyAmount: "$0.03",
+        satAmount: "25 SAT",
+        currencyFeeAmount: "$0.00",
+        satFeeAmount: "0 SAT",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -147,20 +196,29 @@ describe("SendBitcoinCompletedScreen", () => {
         <SuccessAction route={lud09URLWithDescRoute} />
       </ContextForScreen>,
     )
-
-    expect(
-      screen.getByText(lud09URLWithDescRoute.params.successAction.description),
-    ).toBeTruthy()
-
-    const button = screen.getByText(LL.ScanningQRCodeScreen.openLinkTitle())
-
+    act(() => {
+      jest.advanceTimersByTime(2300)
+    })
+    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, {
+        exact: false,
+      }),
+    ).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.successAction.url)).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.currencyAmount)).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.currencyFeeAmount)).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.paymentType)).toBeTruthy()
+    expect(screen.getByText(lud09URLWithDescRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
   })
 
   it("render successAction - LUD 10 - message", async () => {
@@ -180,6 +238,13 @@ describe("SendBitcoinCompletedScreen", () => {
           decipher: () => null,
         },
         preimage: "25004cd52960a3bac983e3f95c432341a7052cef37b9253b0b0b1256d754559b",
+        currencyAmount: "$0.03",
+        satAmount: "25 SAT",
+        currencyFeeAmount: "$0.00",
+        satFeeAmount: "0 SAT",
+        destination: "moises",
+        paymentType: "lightning",
+        createdAt: 1747691078,
       },
     } as const
 
@@ -188,9 +253,19 @@ describe("SendBitcoinCompletedScreen", () => {
         <SuccessAction route={lud10AESRoute} />
       </ContextForScreen>,
     )
+    act(() => {
+      jest.advanceTimersByTime(2300)
+    })
 
-    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.currencyAmount)).toBeTruthy()
+    expect(screen.getByText(lud10AESRoute.params.currencyFeeAmount)).toBeTruthy()
+    expect(screen.getByText(lud10AESRoute.params.paymentType)).toBeTruthy()
+    expect(screen.getByText(lud10AESRoute.params.destination)).toBeTruthy()
+    expect(screen.getByText(LL.common.share())).toBeTruthy()
   })
 })

app/components/stablesats-modal/stablesats-modal.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles(({ colors }) => ({
 }))
 
 const STABLESATS_LINK = "https://www.stablesats.com"
-const STABLESATS_TERMS_LINK = "https://www.bbw.sv/terms"
+const STABLESATS_TERMS_LINK = "https://www.blink.sv/en/terms-conditions"
 
 type Props = {
   isVisible: boolean

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

@@ -0,0 +1,5 @@
+export type FieldWithEventProps = {
+  title: string
+  value: string
+  subValue?: string
+}