From b40387eac16a35b8c75680fc01380d8d57618c93 Mon Sep 17 00:00:00 2001
From: Aaron Lee <aaron.lee@gusto.com>
Date: Fri, 24 Jul 2026 12:24:44 -0400
Subject: [PATCH 1/2] feat(contractor): add "Record a historical payment" CTA
 to payments list

Adds a non-functional Box CTA below the contractor payments DataView,
mirroring the off-cycle payroll CTA pattern on PayrollList. Button is
wired to a no-op onClick pending action definition.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../PaymentsListPresentation.module.scss       |  5 +++++
 .../PaymentsList/PaymentsListPresentation.tsx  | 18 +++++++++++++++++-
 .../en/Contractor.Payments.PaymentsList.json   |  5 +++++
 src/i18n/types.d.ts                            |  8 ++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.module.scss b/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.module.scss
index ff41c852f..6a563077a 100644
--- a/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.module.scss
+++ b/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.module.scss
@@ -19,3 +19,8 @@
 .nowrap {
   white-space: nowrap;
 }
+
+.historicalPaymentCta {
+  width: 100%;
+  max-width: toRem(640);
+}
diff --git a/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx b/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx
index 51fdee39e..30e6ef8f8 100644
--- a/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx
+++ b/src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx
@@ -39,7 +39,7 @@ export const PaymentsListPresentation = ({
   onEvent,
   paginationProps,
 }: ContractorPaymentPaymentsListPresentationProps) => {
-  const { Button, Heading, Select, ButtonIcon, Alert } = useComponentContext()
+  const { Box, Button, Heading, Text, Select, ButtonIcon, Alert } = useComponentContext()
   useI18n('Contractor.Payments.PaymentsList')
   const { t } = useTranslation('Contractor.Payments.PaymentsList')
   const currencyFormatter = useNumberFormatter('currency')
@@ -174,6 +174,22 @@ export const PaymentsListPresentation = ({
       </Flex>
 
       <DataView label={t('subtitle')} {...dataViewProps} />
+
+      <div className={styles.historicalPaymentCta}>
+        <Box
+          header={
+            <Flex flexDirection="column" gap={4}>
+              <Text weight="semibold">{t('historicalPaymentCta.title')}</Text>
+              <Text variant="supporting">{t('historicalPaymentCta.description')}</Text>
+            </Flex>
+          }
+          footer={
+            <Button variant="secondary" onClick={() => {}}>
+              {t('historicalPaymentCta.button')}
+            </Button>
+          }
+        />
+      </div>
     </Flex>
   )
 }
diff --git a/src/i18n/en/Contractor.Payments.PaymentsList.json b/src/i18n/en/Contractor.Payments.PaymentsList.json
index 193643529..497998393 100644
--- a/src/i18n/en/Contractor.Payments.PaymentsList.json
+++ b/src/i18n/en/Contractor.Payments.PaymentsList.json
@@ -27,5 +27,10 @@
     "last3Months": "Last 3 months",
     "last6Months": "Last 6 months",
     "last12Months": "Last 12 months"
+  },
+  "historicalPaymentCta": {
+    "title": "Record a historical payment",
+    "description": "Add a contractor payment that was made outside of Gusto to keep your records complete.",
+    "button": "Record a historical payment"
   }
 }
diff --git a/src/i18n/types.d.ts b/src/i18n/types.d.ts
index c98ed7308..db558f825 100644
--- a/src/i18n/types.d.ts
+++ b/src/i18n/types.d.ts
@@ -2511,6 +2511,14 @@ export namespace Translations {
       /** @defaultValue `"Last 12 months"` */
       last12Months: string
     }
+    historicalPaymentCta: {
+      /** @defaultValue `"Record a historical payment"` */
+      title: string
+      /** @defaultValue `"Add a contractor payment that was made outside of Gusto to keep your records complete."` */
+      description: string
+      /** @defaultValue `"Record a historical payment"` */
+      button: string
+    }
   }
   /** Translation keys for the `Contractor.Profile` i18n namespace. */
   export interface ContractorProfile {

From 735abf7430b50e0a764dd69bf9243fa363d9733c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 24 Jul 2026 16:30:44 +0000
Subject: [PATCH 2/2] chore: update derived files

---
 docs/reference/Translations/index.md  | 4 ++++
 docs/reference/component-inventory.md | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/reference/Translations/index.md b/docs/reference/Translations/index.md
index cb01b512e..2f61069d4 100644
--- a/docs/reference/Translations/index.md
+++ b/docs/reference/Translations/index.md
@@ -1689,6 +1689,10 @@ Translation keys for the `Contractor.Payments.PaymentsList` i18n namespace.
 | `dateRanges.last12Months` | `"Last 12 months"` |
 | `dateRanges.last3Months` | `"Last 3 months"` |
 | `dateRanges.last6Months` | `"Last 6 months"` |
+| <a id="property-contractorpaymentspaymentslisthistoricalpaymentcta"></a> `historicalPaymentCta` | |
+| `historicalPaymentCta.button` | `"Record a historical payment"` |
+| `historicalPaymentCta.description` | `"Add a contractor payment that was made outside of Gusto to keep your records complete."` |
+| `historicalPaymentCta.title` | `"Record a historical payment"` |
 | <a id="property-contractorpaymentspaymentslistnopaymentsdescription"></a> `noPaymentsDescription` | `"No contractor payments have been created yet. Create your first payment to get started."` |
 | <a id="property-contractorpaymentspaymentslistnopaymentsfound"></a> `noPaymentsFound` | `"No payments found"` |
 | <a id="property-contractorpaymentspaymentslistpaymentdatecolumnlabel"></a> `paymentDateColumnLabel` | `"Payment date"` |
diff --git a/docs/reference/component-inventory.md b/docs/reference/component-inventory.md
index 8b9abd5a1..706d2088f 100644
--- a/docs/reference/component-inventory.md
+++ b/docs/reference/component-inventory.md
@@ -297,7 +297,7 @@ Renders an icon-only `<button>`; requires `aria-label` since there is no visible
 | `onKeyUp?` | `KeyboardEventHandler`\<`HTMLButtonElement`\> | | - |
 | `tabIndex?` | `number` | | - |
 | `title?` | `string` | | - |
-| `type?` | `"submit"` \| `"reset"` \| `"button"` | `undefined` | - |
+| `type?` | `"submit"` \| `"button"` \| `"reset"` | `undefined` | - |
 | `variant?` | `"error"` \| `"primary"` \| `"secondary"` \| `"tertiary"` | `'primary'` | Visual style variant of the button |
 
 ***
@@ -340,7 +340,7 @@ Renders an HTML button (`<button>`) with primary, secondary, tertiary, and error
 | `onKeyUp?` | `KeyboardEventHandler`\<`HTMLButtonElement`\> | | - |
 | `tabIndex?` | `number` | | - |
 | `title?` | `string` | | - |
-| `type?` | `"submit"` \| `"reset"` \| `"button"` | `undefined` | - |
+| `type?` | `"submit"` \| `"button"` \| `"reset"` | `undefined` | - |
 | `variant?` | `"error"` \| `"primary"` \| `"secondary"` \| `"tertiary"` | `'primary'` | Visual style variant of the button |
 
 ***