Update text in donations discard dialog

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>

_locales/en/messages.json

@@ -8982,6 +8982,14 @@
     "messageformat": "The minimum amount you can donate is {formattedCurrencyAmount}",
     "description": "Tooltip for a disabled continue button when selecting a donation amount, when the user has entered a custom amount below the minimum allowed donation amount. Minimum amount text includes the currency symbol and is formatted in the locale's standard format. Examples: $3; ¥300; €3"
   },
+  "icu:DonateFlow__discard-dialog-body": {
+    "messageformat": "Leaving this page will remove your credit card information. Do you want to proceed?",
+    "description": "While making a donation and after entering payment details, if you try to navigate away then a dialog shows with this body text."
+  },
+  "icu:DonateFlow__discard-dialog-remove-info": {
+    "messageformat": "Remove info",
+    "description": "While making a donation and after entering payment details, if you try to navigate away then a dialog shows and its primary button has this text to confirm cancellation of the donation."
+  },
   "icu:DonationReceipt__title": {
     "messageformat": "Donation receipt",
     "description": "Title shown at the top of donation receipt documents"

ts/components/ConfirmDiscardDialog.stories.tsx

@@ -5,21 +5,40 @@ import React from 'react';
 
 import { action } from '@storybook/addon-actions';
 import type { Meta } from '@storybook/react';
-import type { PropsType } from './ConfirmDiscardDialog';
+import type { ConfirmDialogProps } from './ConfirmDiscardDialog';
 import { ConfirmDiscardDialog } from './ConfirmDiscardDialog';
 
 const { i18n } = window.SignalContext;
 
-const createProps = (): PropsType => ({
+const createProps = ({
+  bodyText,
+  discardText,
+}: {
+  bodyText?: string;
+  discardText?: string;
+} = {}): ConfirmDialogProps => ({
   i18n,
+  bodyText,
+  discardText,
   onClose: action('onClose'),
   onDiscard: action('onDiscard'),
 });
 
 export default {
   title: 'Components/ConfirmDiscardDialog',
-} satisfies Meta<PropsType>;
+} satisfies Meta<ConfirmDialogProps>;
 
 export function Default(): JSX.Element {
   return <ConfirmDiscardDialog {...createProps()} />;
 }
+
+export function DonateFlow(): JSX.Element {
+  return (
+    <ConfirmDiscardDialog
+      {...createProps({
+        bodyText: i18n('icu:DonateFlow__discard-dialog-body'),
+        discardText: i18n('icu:DonateFlow__discard-dialog-remove-info'),
+      })}
+    />
+  );
+}

ts/components/ConfirmDiscardDialog.tsx

@@ -5,31 +5,35 @@ import React from 'react';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import type { LocalizerType } from '../types/Util';
 
-export type PropsType = {
+export type ConfirmDialogProps = {
   i18n: LocalizerType;
+  bodyText?: string;
+  discardText?: string;
   onClose: () => unknown;
   onDiscard: () => unknown;
 };
 
 export function ConfirmDiscardDialog({
   i18n,
+  bodyText,
+  discardText,
   onClose,
   onDiscard,
-}: PropsType): JSX.Element {
+}: ConfirmDialogProps): JSX.Element {
   return (
     <ConfirmationDialog
       dialogName="ConfirmDiscardDialog"
       actions={[
         {
           action: onDiscard,
-          text: i18n('icu:discard'),
+          text: discardText ?? i18n('icu:discard'),
           style: 'negative',
         },
       ]}
       i18n={i18n}
       onClose={onClose}
     >
-      {i18n('icu:ConfirmDiscardDialog--discard')}
+      {bodyText ?? i18n('icu:ConfirmDiscardDialog--discard')}
     </ConfirmationDialog>
   );
 }

ts/components/PreferencesDonateFlow.tsx

@@ -122,6 +122,8 @@ export function PreferencesDonateFlow({
   const tryClose = useRef<() => void | undefined>();
   const [confirmDiscardModal, confirmDiscardIf] = useConfirmDiscard({
     i18n,
+    bodyText: i18n('icu:DonateFlow__discard-dialog-body'),
+    discardText: i18n('icu:DonateFlow__discard-dialog-remove-info'),
     name: 'PreferencesDonateFlow',
     tryClose,
   });

ts/hooks/useConfirmDiscard.tsx

@@ -10,24 +10,36 @@ import {
   type ExplodePromiseResultType,
 } from '../util/explodePromise';
 
-import type { PropsType } from '../components/ConfirmDiscardDialog';
+import type { ConfirmDialogProps } from '../components/ConfirmDiscardDialog';
 import type { LocalizerType } from '../types/Util';
 
 export function useConfirmDiscard({
   i18n,
+  bodyText,
+  discardText,
   name,
   tryClose,
 }: {
   i18n: LocalizerType;
+  bodyText?: string;
+  discardText?: string;
   name: string;
   tryClose?: React.MutableRefObject<(() => void) | undefined>;
 }): [
   JSX.Element | null,
   (condition: boolean, discardChanges: () => void, cancel?: () => void) => void,
 ] {
-  const [props, setProps] = useState<Omit<PropsType, 'i18n'> | null>(null);
+  const [props, setProps] = useState<Omit<
+    ConfirmDialogProps,
+    'i18n' | 'bodyText' | 'discardText'
+  > | null>(null);
   const confirmElement = props ? (
-    <ConfirmDiscardDialog i18n={i18n} {...props} />
+    <ConfirmDiscardDialog
+      i18n={i18n}
+      bodyText={bodyText}
+      discardText={discardText}
+      {...props}
+    />
   ) : null;
   const confirmDiscardPromise = useRef<
     ExplodePromiseResultType<BeforeNavigateResponse> | undefined