feat(contractor): add "Record a historical payment" CTA to payments list

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

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 |
 
 ***

src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.module.scss

@@ -19,3 +19,8 @@
 .nowrap {
   white-space: nowrap;
 }
+
+.historicalPaymentCta {
+  width: 100%;
+  max-width: toRem(640);
+}

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

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

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 {