From dea470146612246717de8528f25131b679315cdb Mon Sep 17 00:00:00 2001
From: Kristine White <kristine.white@gusto.com>
Date: Wed, 26 Aug 2026 15:11:46 -0700
Subject: [PATCH] fix(SDK-1286): make the cancel payroll dialog describe
 cancelling

The dialog opened with "Any changes you have made to this payroll will be saved.",
which never says what cancelling actually does -- it read as stray help text next
to a destructive confirmation. Legacy gws-flows leads with the clause that matters
("You may cancel this payroll and run it again later. Your changes will be
saved."), so this restores that wording.

Also fixes the deadline line, which interpolated only the `time` half of
formatWithTime's { time, date } and so rendered "Run this payroll by 4:00 PM PDT"
with no date at all. Now rendered as "<time> on <date>", matching how
PayrollHistory already formats the same deadline and the existing
alerts.directDepositDeadline string.

Applied to Payroll.PayrollHistory too: it hosts a second cancel-payroll
confirmation whose copy was byte-identical, so fixing only one would have left the
two dialogs disagreeing. PayrollHistory already renders its deadline with the
date, so it needed no code change.

Dropped the stray leading space in confirmCancelCta, which the sibling
PayrollList and PayrollHistory keys do not have.

Updated the three call sites asserting the old copy (PayrollOverview x2,
PayrollConfiguration) and regenerated the derived i18n types and translations
reference.

Copy note for reviewers: legacy gws-flows cancel_message_html is the parity target
used here. This needs a copy reviewer to confirm against Figma.
---
 docs/reference/Translations/index.md          | 10 +--
 .../PayrollConfiguration.test.tsx             |  2 +-
 .../PayrollOverviewPresentation.test.tsx      | 65 ++++++++++++++++++-
 .../PayrollOverviewPresentation.tsx           | 10 ++-
 src/i18n/en/Payroll.PayrollHistory.json       |  4 +-
 src/i18n/en/Payroll.PayrollOverview.json      |  7 +-
 src/i18n/types.d.ts                           | 10 +--
 7 files changed, 87 insertions(+), 21 deletions(-)

diff --git a/docs/reference/Translations/index.md b/docs/reference/Translations/index.md
index 143da02f06..4609d2d718 100644
--- a/docs/reference/Translations/index.md
+++ b/docs/reference/Translations/index.md
@@ -5101,8 +5101,8 @@ Translation keys for the `Payroll.PayrollHistory` i18n namespace.
 | Property | Default value |
 | ------ | ------ |
 | <a id="property-payrollpayrollhistorycanceldialog"></a> `cancelDialog` | |
-| `cancelDialog.body` | `"Any changes you have made to this payroll will be saved."` |
-| `cancelDialog.deadline` | `"Run this payroll by {{deadline}} to ensure your employees are paid on time."` |
+| `cancelDialog.body` | `"You may cancel this payroll and run it again later. Your changes will be saved."` |
+| `cancelDialog.deadline` | `"Run this payroll by {{deadline}} to pay your employees on time."` |
 | `cancelDialog.primaryAction` | `"Yes, cancel payroll"` |
 | `cancelDialog.secondaryAction` | `"No, go back"` |
 | `cancelDialog.title` | `"Cancel {{payPeriod}} payroll?"` |
@@ -5249,8 +5249,8 @@ Translation keys for the `Payroll.PayrollOverview` i18n namespace.
 | <a id="property-payrollpayrolloverviewbackcta"></a> `backCta` | `"Back"` |
 | <a id="property-payrollpayrolloverviewbreadcrumblabel"></a> `breadcrumbLabel` | `"Submit"` |
 | <a id="property-payrollpayrolloverviewcancelcta"></a> `cancelCta` | `"Cancel payroll"` |
-| <a id="property-payrollpayrolloverviewcanceldialogdescription"></a> `cancelDialogDescription` | `"Any changes you have made to this payroll will be saved."` |
-| <a id="property-payrollpayrolloverviewcanceldialogdescriptiondeadline"></a> `cancelDialogDescriptionDeadline` | `"Run this payroll by {{deadline}} to ensure your employees are paid on time."` |
+| <a id="property-payrollpayrolloverviewcanceldialogdescription"></a> `cancelDialogDescription` | `"You may cancel this payroll and run it again later. Your changes will be saved."` |
+| <a id="property-payrollpayrolloverviewcanceldialogdescriptiondeadline"></a> `cancelDialogDescriptionDeadline` | `"Run this payroll by {{deadline}} to pay your employees on time."` |
 | <a id="property-payrollpayrolloverviewcanceldialogtitle"></a> `cancelDialogTitle` | `"Cancel {{startDate}} - {{endDate}} payroll?"` |
 | <a id="property-payrollpayrolloverviewcanceldialogtitledismissal"></a> `cancelDialogTitleDismissal` | `"Cancel payroll?"` |
 | <a id="property-payrollpayrolloverviewcancelledemptystate"></a> `cancelledEmptyState` | `"This payroll has been cancelled."` |
@@ -5258,7 +5258,7 @@ Translation keys for the `Payroll.PayrollOverview` i18n namespace.
 | <a id="property-payrollpayrolloverviewcompensationtypelabels"></a> `compensationTypeLabels` | |
 | `compensationTypeLabels.exempt` | `"Salaried / Exempt"` |
 | `compensationTypeLabels.nonexempt` | `"Hourly / Nonexempt"` |
-| <a id="property-payrollpayrolloverviewconfirmcancelcta"></a> `confirmCancelCta` | `" Yes, cancel payroll"` |
+| <a id="property-payrollpayrolloverviewconfirmcancelcta"></a> `confirmCancelCta` | `"Yes, cancel payroll"` |
 | <a id="property-payrollpayrolloverviewdataloadingtitle"></a> `dataLoadingTitle` | `"Loading payroll..."` |
 | <a id="property-payrollpayrolloverviewdataviews"></a> `dataViews` | |
 | `dataViews.companyPaysTab` | `"Company pays"` |
diff --git a/src/components/Payroll/PayrollConfiguration/PayrollConfiguration.test.tsx b/src/components/Payroll/PayrollConfiguration/PayrollConfiguration.test.tsx
index 058e09138a..c373e2c503 100644
--- a/src/components/Payroll/PayrollConfiguration/PayrollConfiguration.test.tsx
+++ b/src/components/Payroll/PayrollConfiguration/PayrollConfiguration.test.tsx
@@ -364,7 +364,7 @@ describe('PayrollConfiguration', () => {
       await user.click(screen.getByRole('button', { name: /cancel payroll/i }))
 
       await waitFor(() => {
-        expect(screen.getByText(/any changes you have made/i)).toBeInTheDocument()
+        expect(screen.getByText(/your changes will be saved/i)).toBeInTheDocument()
       })
       await user.click(screen.getByRole('button', { name: /yes, cancel payroll/i }))
 
diff --git a/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.test.tsx b/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.test.tsx
index 42e16ddad7..5aaa87df63 100644
--- a/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.test.tsx
+++ b/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.test.tsx
@@ -589,10 +589,10 @@ describe('PayrollOverviewPresentation', () => {
       await user.click(screen.getByRole('button', { name: /Cancel payroll/i }))
 
       await waitFor(() => {
-        expect(screen.getByText(/Any changes you have made/i)).toBeInTheDocument()
+        expect(screen.getByText(/Your changes will be saved/i)).toBeInTheDocument()
       })
 
-      expect(screen.queryByText(/ensure your employees are paid on time/i)).not.toBeInTheDocument()
+      expect(screen.queryByText(/pay your employees on time/i)).not.toBeInTheDocument()
     })
 
     it('shows ACH deadline message for direct deposit payrolls', async () => {
@@ -627,7 +627,66 @@ describe('PayrollOverviewPresentation', () => {
       await user.click(screen.getByRole('button', { name: /Cancel payroll/i }))
 
       await waitFor(() => {
-        expect(screen.getByText(/ensure your employees are paid on time/i)).toBeInTheDocument()
+        expect(screen.getByText(/pay your employees on time/i)).toBeInTheDocument()
+      })
+    })
+
+    // The dialog previously led with "Any changes you have made to this payroll will be
+    // saved.", which says nothing about what cancelling does -- it read as stray help text.
+    // Legacy gws-flows opens with the run-it-again-later clause (SDK-1286).
+    it('explains that the payroll can be run again later', async () => {
+      const user = userEvent.setup()
+
+      renderWithProviders(
+        <PayrollOverviewPresentation {...defaultProps} isProcessed={true} canCancel={true} />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Cancel payroll/i })).toBeInTheDocument()
+      })
+      await user.click(screen.getByRole('button', { name: /Cancel payroll/i }))
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/You may cancel this payroll and run it again later/i),
+        ).toBeInTheDocument()
+      })
+    })
+
+    // Only `time` was interpolated, so the deadline rendered with no date at all.
+    it('includes the run-by date alongside the time in the deadline line', async () => {
+      const user = userEvent.setup()
+      const ddPayroll: PayrollShow = {
+        ...mockPayrollData,
+        employeeCompensations: [
+          {
+            paymentMethod: 'Direct Deposit',
+            excluded: false,
+            fixedCompensations: [],
+            hourlyCompensations: [],
+            paidTimeOff: [],
+            employeeUuid: 'emp-1',
+          },
+        ],
+      }
+
+      renderWithProviders(
+        <PayrollOverviewPresentation
+          {...defaultProps}
+          payrollData={ddPayroll}
+          isProcessed={true}
+          canCancel={true}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Cancel payroll/i })).toBeInTheDocument()
+      })
+      await user.click(screen.getByRole('button', { name: /Cancel payroll/i }))
+
+      // "<time> on <date>", matching how PayrollHistory renders the same deadline.
+      await waitFor(() => {
+        expect(screen.getByText(/Run this payroll by .+ on \w{3}, \w{3} \d+/i)).toBeInTheDocument()
       })
     })
   })
diff --git a/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx b/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx
index 94c2880c97..08faf4c934 100644
--- a/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx
+++ b/src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx
@@ -113,6 +113,14 @@ export const PayrollOverviewPresentation = ({
   )
   const isDismissal = isDismissalPayroll(payrollData.offCycleReason)
 
+  // formatWithTime returns { time, date }, and the cancel dialog used to interpolate only
+  // `time` -- so it read "Run this payroll by 4:00 PM PDT" with no date at all (SDK-1286).
+  // Rendered as "<time> on <date>" to match how PayrollHistory shows the same deadline.
+  const cancelDeadline = (() => {
+    const { time, date } = dateFormatter.formatWithTime(payrollData.payrollDeadline)
+    return date ? `${time} on ${date}` : time
+  })()
+
   const pageSubtitle = (
     <Text>
       <Trans
@@ -807,7 +815,7 @@ export const PayrollOverviewPresentation = ({
                   {Number(payrollData.totals?.netPayDebit ?? 0) > 0 && (
                     <Text>
                       {t('cancelDialogDescriptionDeadline', {
-                        deadline: dateFormatter.formatWithTime(payrollData.payrollDeadline).time,
+                        deadline: cancelDeadline,
                       })}
                     </Text>
                   )}
diff --git a/src/i18n/en/Payroll.PayrollHistory.json b/src/i18n/en/Payroll.PayrollHistory.json
index e3e2ace4fa..cd622b64fc 100644
--- a/src/i18n/en/Payroll.PayrollHistory.json
+++ b/src/i18n/en/Payroll.PayrollHistory.json
@@ -39,8 +39,8 @@
   },
   "cancelDialog": {
     "title": "Cancel {{payPeriod}} payroll?",
-    "body": "Any changes you have made to this payroll will be saved.",
-    "deadline": "Run this payroll by {{deadline}} to ensure your employees are paid on time.",
+    "body": "You may cancel this payroll and run it again later. Your changes will be saved.",
+    "deadline": "Run this payroll by {{deadline}} to pay your employees on time.",
     "primaryAction": "Yes, cancel payroll",
     "secondaryAction": "No, go back"
   }
diff --git a/src/i18n/en/Payroll.PayrollOverview.json b/src/i18n/en/Payroll.PayrollOverview.json
index 21c0eda2a0..f7a217eb6a 100644
--- a/src/i18n/en/Payroll.PayrollOverview.json
+++ b/src/i18n/en/Payroll.PayrollOverview.json
@@ -11,9 +11,9 @@
   "cancelCta": "Cancel payroll",
   "cancelDialogTitle": "Cancel {{startDate}} - {{endDate}} payroll?",
   "cancelDialogTitleDismissal": "Cancel payroll?",
-  "cancelDialogDescription": "Any changes you have made to this payroll will be saved.",
-  "cancelDialogDescriptionDeadline": "Run this payroll by {{deadline}} to ensure your employees are paid on time.",
-  "confirmCancelCta": " Yes, cancel payroll",
+  "cancelDialogDescription": "You may cancel this payroll and run it again later. Your changes will be saved.",
+  "cancelDialogDescriptionDeadline": "Run this payroll by {{deadline}} to pay your employees on time.",
+  "confirmCancelCta": "Yes, cancel payroll",
   "declineCancelCta": "No, go back",
   "payrollReceiptCta": "View payroll receipt",
   "downloadPaystubLabel": "Download paystub pdf",
@@ -23,7 +23,6 @@
   "cancellingTitle": "Cancelling payroll...",
   "cancelledEmptyState": "This payroll has been cancelled.",
   "skippedBadge": "Skipped",
-
   "alerts": {
     "payrollNotCalculated": "Payroll is not calculated",
     "directDepositDeadline": "To pay your employees with direct deposit by {{payDate}}, you'll need to run payroll by {{time}} on {{date}}.",
diff --git a/src/i18n/types.d.ts b/src/i18n/types.d.ts
index 86da0385c7..c34213344f 100644
--- a/src/i18n/types.d.ts
+++ b/src/i18n/types.d.ts
@@ -7561,9 +7561,9 @@ export namespace Translations {
     cancelDialog: {
       /** @defaultValue `"Cancel {{payPeriod}} payroll?"` */
       title: string
-      /** @defaultValue `"Any changes you have made to this payroll will be saved."` */
+      /** @defaultValue `"You may cancel this payroll and run it again later. Your changes will be saved."` */
       body: string
-      /** @defaultValue `"Run this payroll by {{deadline}} to ensure your employees are paid on time."` */
+      /** @defaultValue `"Run this payroll by {{deadline}} to pay your employees on time."` */
       deadline: string
       /** @defaultValue `"Yes, cancel payroll"` */
       primaryAction: string
@@ -7723,11 +7723,11 @@ export namespace Translations {
     cancelDialogTitle: string
     /** @defaultValue `"Cancel payroll?"` */
     cancelDialogTitleDismissal: string
-    /** @defaultValue `"Any changes you have made to this payroll will be saved."` */
+    /** @defaultValue `"You may cancel this payroll and run it again later. Your changes will be saved."` */
     cancelDialogDescription: string
-    /** @defaultValue `"Run this payroll by {{deadline}} to ensure your employees are paid on time."` */
+    /** @defaultValue `"Run this payroll by {{deadline}} to pay your employees on time."` */
     cancelDialogDescriptionDeadline: string
-    /** @defaultValue `" Yes, cancel payroll"` */
+    /** @defaultValue `"Yes, cancel payroll"` */
     confirmCancelCta: string
     /** @defaultValue `"No, go back"` */
     declineCancelCta: string