fix(SDK-1286): make the cancel payroll dialog describe cancelling

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,16 +5249,16 @@ 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."` |
 | <a id="property-payrollpayrolloverviewcancellingtitle"></a> `cancellingTitle` | `"Cancelling payroll..."` |
 | <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"` |

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 }))
 

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()
       })
     })
   })

src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx

@@ -115,6 +115,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
@@ -821,7 +829,7 @@ export const PayrollOverviewPresentation = ({
                   {Number(payrollData.totals?.netPayDebit ?? 0) > 0 && (
                     <Text>
                       {t('cancelDialogDescriptionDeadline', {
-                        deadline: dateFormatter.formatWithTime(payrollData.payrollDeadline).time,
+                        deadline: cancelDeadline,
                       })}
                     </Text>
                   )}

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"
   }

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",
@@ -24,7 +24,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}}.",

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