feat: Contractor Payment Overview Component

src/components/Contractor/Payments/Overview/Overview.stories.tsx

@@ -0,0 +1,72 @@
+import type { StoryDefault, Story } from '@ladle/react'
+import { action } from '@ladle/react'
+import { OverviewPresentation } from './OverviewPresentation'
+
+export default {
+  title: 'Domain/Contractor/Payments',
+} satisfies StoryDefault
+
+export const ReviewAndSubmitDefault: Story = () => {
+  const mockPaymentSummary = {
+    totalAmount: '1180',
+    debitAmount: '1180',
+    debitAccount: 'Checking Account ending in 4567',
+    debitDate: '2025-09-15',
+    contractorPayDate: '2025-09-17',
+    checkDate: '2025-09-17',
+    submitByDate: '2025-09-14',
+  }
+
+  const mockContractorPaymentGroup = {
+    uuid: 'group-1',
+    companyUuid: 'company-1',
+    checkDate: '2025-09-17',
+    debitDate: '2025-09-15',
+    status: 'Unfunded' as const,
+    totals: {
+      amount: '1180',
+      debitAmount: '1180',
+      wageAmount: '1000',
+      reimbursementAmount: '0',
+    },
+    contractorPayments: [
+      {
+        uuid: '1',
+        contractorUuid: 'armstrong-louis',
+        wageType: 'Fixed' as const,
+        paymentMethod: 'Direct Deposit' as const,
+        hours: undefined,
+        wage: '1000',
+        bonus: '0',
+        reimbursement: '0',
+        wageTotal: '1000',
+      },
+      {
+        uuid: '2',
+        contractorUuid: 'fitzgerald-ella',
+        wageType: 'Hourly' as const,
+        hourlyRate: '18',
+        paymentMethod: 'Direct Deposit' as const,
+        hours: '10',
+        wage: undefined,
+        bonus: '0',
+        reimbursement: '0',
+        wageTotal: '180',
+      },
+    ],
+  }
+
+  return (
+    <OverviewPresentation
+      paymentSummary={mockPaymentSummary}
+      contractorPaymentGroup={mockContractorPaymentGroup}
+      onEdit={action('onEdit')}
+      onSubmit={action('onSubmit')}
+    />
+  )
+}
+
+ReviewAndSubmitDefault.meta = {
+  description:
+    'Payment Summary page - final confirmation with payment summary details and all contractor payment information ready for submission',
+}

src/components/Contractor/Payments/Overview/OverviewPresentation.tsx

@@ -0,0 +1,199 @@
+import { useTranslation } from 'react-i18next'
+import type { ContractorPaymentForGroup, ContractorPaymentGroup } from '../types'
+import { DataView, Flex } from '@/components/Common'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { useI18n } from '@/i18n'
+import { formatNumberAsCurrency } from '@/helpers/formattedStrings'
+import { useLocale } from '@/contexts/LocaleProvider/useLocale'
+import { formatHoursDisplay } from '@/components/Payroll/helpers'
+
+const ZERO_HOURS_DISPLAY = '0.000'
+
+interface PaymentSummary {
+  totalAmount: string
+  debitAmount: string
+  debitAccount: string
+  debitDate: string
+  contractorPayDate: string
+  checkDate: string
+  submitByDate: string
+}
+
+interface ContractorPaymentOverviewPresentationProps {
+  paymentSummary: PaymentSummary
+  contractorPaymentGroup: ContractorPaymentGroup
+  onEdit: () => void
+  onSubmit: () => void
+}
+
+export const OverviewPresentation = ({
+  paymentSummary,
+  contractorPaymentGroup,
+  onEdit,
+  onSubmit,
+}: ContractorPaymentOverviewPresentationProps) => {
+  const { Button, Text, Heading } = useComponentContext()
+  useI18n('ContractorPayment.ContractorPaymentOverview')
+  const { t } = useTranslation('ContractorPayment.ContractorPaymentOverview')
+  const { locale } = useLocale()
+
+  const formatWageType = (contractor: ContractorPaymentForGroup) => {
+    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {
+      return `${t('wageTypes.hourly')} ${formatNumberAsCurrency(parseFloat(contractor.hourlyRate), locale)}${t('perHour')}`
+    }
+    return contractor.wageType
+  }
+
+  const contractors: ContractorPaymentForGroup[] = contractorPaymentGroup.contractorPayments || []
+
+  return (
+    <Flex flexDirection="column" gap={32}>
+      <Flex flexDirection="column" gap={16}>
+        <Heading as="h1">{t('title')}</Heading>
+        <Heading as="h2">{t('reviewAndSubmitTitle')}</Heading>
+        <Text>{t('reviewSubtitle', { submitByDate: paymentSummary.submitByDate })}</Text>
+      </Flex>
+
+      {/* Payment Summary */}
+      <Flex flexDirection="column" gap={16}>
+        <DataView
+          columns={[
+            {
+              title: t('summaryTableHeaders.totalAmount'),
+              render: () => (
+                <Text>
+                  {formatNumberAsCurrency(
+                    parseFloat(contractorPaymentGroup.totals?.amount || '0'),
+                    locale,
+                  )}
+                </Text>
+              ),
+            },
+            {
+              title: t('summaryTableHeaders.debitAmount'),
+              render: () => (
+                <Text>
+                  {formatNumberAsCurrency(
+                    parseFloat(contractorPaymentGroup.totals?.debitAmount || '0'),
+                    locale,
+                  )}
+                </Text>
+              ),
+            },
+            {
+              title: t('summaryTableHeaders.debitAccount'),
+              render: () => <Text>{paymentSummary.debitAccount}</Text>,
+            },
+            {
+              title: t('summaryTableHeaders.debitDate'),
+              render: () => (
+                <Text>{contractorPaymentGroup.debitDate || paymentSummary.debitDate}</Text>
+              ),
+            },
+            {
+              title: t('summaryTableHeaders.contractorPayDate'),
+              render: () => (
+                <Text>{contractorPaymentGroup.checkDate || paymentSummary.contractorPayDate}</Text>
+              ),
+            },
+          ]}
+          data={[contractorPaymentGroup]}
+          label="Payment Summary"
+        />
+      </Flex>
+
+      <Flex flexDirection="column" gap={16}>
+        <Flex flexDirection="column" gap={8}>
+          <Heading as="h2">{t('whatYourCompanyPays')}</Heading>
+          <Text variant="supporting">
+            {t('dateLabel')}: {contractorPaymentGroup.checkDate}
+          </Text>
+        </Flex>
+
+        {/* Contractor Payments Table */}
+        <div style={{ width: '100%' }}>
+          <DataView
+            columns={[
+              {
+                title: t('contractorTableHeaders.contractor'),
+                render: contractor => <Text>{contractor.contractorUuid || 'N/A'}</Text>,
+              },
+              {
+                title: t('contractorTableHeaders.wageType'),
+                render: contractor => <Text>{formatWageType(contractor)}</Text>,
+              },
+              {
+                title: t('contractorTableHeaders.paymentMethod'),
+                render: contractor => <Text>{contractor.paymentMethod || 'N/A'}</Text>,
+              },
+              {
+                title: t('contractorTableHeaders.hours'),
+                render: contractor => (
+                  <Text>
+                    {contractor.wageType === 'Hourly' && contractor.hours
+                      ? formatHoursDisplay(parseFloat(contractor.hours))
+                      : ZERO_HOURS_DISPLAY}
+                  </Text>
+                ),
+              },
+              {
+                title: t('contractorTableHeaders.wage'),
+                render: contractor => (
+                  <Text>
+                    {contractor.wageType === 'Fixed' && contractor.wage
+                      ? formatNumberAsCurrency(parseFloat(contractor.wage), locale)
+                      : formatNumberAsCurrency(0, locale)}
+                  </Text>
+                ),
+              },
+              {
+                title: t('contractorTableHeaders.bonus'),
+                render: contractor => (
+                  <Text>
+                    {formatNumberAsCurrency(
+                      contractor.bonus ? parseFloat(contractor.bonus) : 0,
+                      locale,
+                    )}
+                  </Text>
+                ),
+              },
+              {
+                title: t('contractorTableHeaders.reimbursement'),
+                render: contractor => (
+                  <Text>
+                    {formatNumberAsCurrency(
+                      contractor.reimbursement ? parseFloat(contractor.reimbursement) : 0,
+                      locale,
+                    )}
+                  </Text>
+                ),
+              },
+              {
+                title: t('contractorTableHeaders.total'),
+                render: contractor => (
+                  <Text>
+                    {formatNumberAsCurrency(
+                      contractor.wageTotal ? parseFloat(contractor.wageTotal) : 0,
+                      locale,
+                    )}
+                  </Text>
+                ),
+              },
+            ]}
+            data={contractors}
+            label={t('whatYourCompanyPays')}
+          />
+        </div>
+      </Flex>
+
+      <Flex justifyContent="flex-end" gap={16}>
+        <Button onClick={onEdit} variant="secondary">
+          {t('editButton')}
+        </Button>
+        <Button onClick={onSubmit} variant="primary">
+          {t('submitButton')}
+        </Button>
+      </Flex>
+    </Flex>
+  )
+}

src/components/Contractor/Payments/types.ts

@@ -0,0 +1,7 @@
+import type { ContractorPaymentGroup } from '@gusto/embedded-api/models/components/contractorpaymentgroup'
+import type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'
+import type { ContractorPaymentGroupTotals } from '@gusto/embedded-api/models/components/contractorpaymentgroup'
+
+export type { ContractorPaymentGroup, ContractorPaymentForGroup, ContractorPaymentGroupTotals }
+
+export type ContractorPaymentGroupMinimal = Omit<ContractorPaymentGroup, 'contractorPayments'>

src/i18n/en/ContractorPayment.ContractorPaymentOverview.json

@@ -0,0 +1,37 @@
+{
+  "title": "Pay contractors",
+  "reviewAndSubmitTitle": "Review and submit",
+  "reviewSubtitle": "Here's a quick summary to review - we'll debit funds on the debit date listed below. To pay your contractors on the date below, submit payments by {{submitByDate}}",
+  "summaryTableHeaders": {
+    "totalAmount": "Total amount",
+    "debitAmount": "Debit amount",
+    "debitAccount": "Debit account",
+    "debitDate": "Debit date",
+    "contractorPayDate": "Contractor pay date"
+  },
+  "dateLabel": "Date",
+  "whatYourCompanyPays": "What your company pays",
+  "contractorTableHeaders": {
+    "contractor": "Contractor",
+    "wageType": "Wage type",
+    "paymentMethod": "Payment method",
+    "hours": "Hours",
+    "wage": "Wage",
+    "bonus": "Bonus",
+    "reimbursement": "Reimbursement",
+    "total": "Total"
+  },
+  "totalsLabel": "Totals",
+  "editButton": "Edit",
+  "submitButton": "Submit",
+  "perHour": "/hr",
+  "wageTypes": {
+    "fixed": "Fixed",
+    "hourly": "Hourly"
+  },
+  "paymentMethods": {
+    "directDeposit": "Direct Deposit",
+    "check": "Check",
+    "historicalPayment": "Historical Payment"
+  }
+}

src/types/i18next.d.ts

@@ -513,6 +513,43 @@ export interface ContractorSubmit{
 "successMessage":string;
 };
 };
+export interface ContractorPaymentContractorPaymentOverview{
+"title":string;
+"reviewAndSubmitTitle":string;
+"reviewSubtitle":string;
+"summaryTableHeaders":{
+"totalAmount":string;
+"debitAmount":string;
+"debitAccount":string;
+"debitDate":string;
+"contractorPayDate":string;
+};
+"dateLabel":string;
+"whatYourCompanyPays":string;
+"contractorTableHeaders":{
+"contractor":string;
+"wageType":string;
+"paymentMethod":string;
+"hours":string;
+"wage":string;
+"bonus":string;
+"reimbursement":string;
+"total":string;
+};
+"totalsLabel":string;
+"editButton":string;
+"submitButton":string;
+"perHour":string;
+"wageTypes":{
+"fixed":string;
+"hourly":string;
+};
+"paymentMethods":{
+"directDeposit":string;
+"check":string;
+"historicalPayment":string;
+};
+};
 export interface EmployeeBankAccount{
 "accountNumberLabel":string;
 "accountTypeChecking":string;
@@ -1608,6 +1645,6 @@ export interface common{
 
     interface CustomTypeOptions {
         defaultNS: 'common';
-        resources: { 'Company.AddBank': CompanyAddBank, 'Company.Addresses': CompanyAddresses, 'Company.AssignSignatory': CompanyAssignSignatory, 'Company.BankAccount': CompanyBankAccount, 'Company.DocumentList': CompanyDocumentList, 'Company.FederalTaxes': CompanyFederalTaxes, 'Company.Industry': CompanyIndustry, 'Company.Locations': CompanyLocations, 'Company.OnboardingOverview': CompanyOnboardingOverview, 'Company.PaySchedule': CompanyPaySchedule, 'Company.SignatureForm': CompanySignatureForm, 'Company.StateTaxes': CompanyStateTaxes, 'Contractor.Address': ContractorAddress, 'Contractor.ContractorList': ContractorContractorList, 'Contractor.NewHireReport': ContractorNewHireReport, 'Contractor.PaymentMethod': ContractorPaymentMethod, 'Contractor.Profile': ContractorProfile, 'Contractor.Submit': ContractorSubmit, 'Employee.BankAccount': EmployeeBankAccount, 'Employee.Compensation': EmployeeCompensation, 'Employee.Deductions': EmployeeDeductions, 'Employee.DocumentSigner': EmployeeDocumentSigner, 'Employee.EmployeeList': EmployeeEmployeeList, 'Employee.FederalTaxes': EmployeeFederalTaxes, 'Employee.HomeAddress': EmployeeHomeAddress, 'Employee.Landing': EmployeeLanding, 'Employee.OnboardingSummary': EmployeeOnboardingSummary, 'Employee.PaySchedules': EmployeePaySchedules, 'Employee.PaymentMethod': EmployeePaymentMethod, 'Employee.Profile': EmployeeProfile, 'Employee.SplitPaycheck': EmployeeSplitPaycheck, 'Employee.StateTaxes': EmployeeStateTaxes, 'Employee.Taxes': EmployeeTaxes, 'Payroll.PayrollBlocker': PayrollPayrollBlocker, 'Payroll.PayrollConfiguration': PayrollPayrollConfiguration, 'Payroll.PayrollEditEmployee': PayrollPayrollEditEmployee, 'Payroll.PayrollFlow': PayrollPayrollFlow, 'Payroll.PayrollHistory': PayrollPayrollHistory, 'Payroll.PayrollLanding': PayrollPayrollLanding, 'Payroll.PayrollList': PayrollPayrollList, 'Payroll.PayrollOverview': PayrollPayrollOverview, 'Payroll.PayrollReceipts': PayrollPayrollReceipts, 'Payroll.PayrollSchedule': PayrollPayrollSchedule, 'common': common,  }
+        resources: { 'Company.AddBank': CompanyAddBank, 'Company.Addresses': CompanyAddresses, 'Company.AssignSignatory': CompanyAssignSignatory, 'Company.BankAccount': CompanyBankAccount, 'Company.DocumentList': CompanyDocumentList, 'Company.FederalTaxes': CompanyFederalTaxes, 'Company.Industry': CompanyIndustry, 'Company.Locations': CompanyLocations, 'Company.OnboardingOverview': CompanyOnboardingOverview, 'Company.PaySchedule': CompanyPaySchedule, 'Company.SignatureForm': CompanySignatureForm, 'Company.StateTaxes': CompanyStateTaxes, 'Contractor.Address': ContractorAddress, 'Contractor.ContractorList': ContractorContractorList, 'Contractor.NewHireReport': ContractorNewHireReport, 'Contractor.PaymentMethod': ContractorPaymentMethod, 'Contractor.Profile': ContractorProfile, 'Contractor.Submit': ContractorSubmit, 'ContractorPayment.ContractorPaymentOverview': ContractorPaymentContractorPaymentOverview, 'Employee.BankAccount': EmployeeBankAccount, 'Employee.Compensation': EmployeeCompensation, 'Employee.Deductions': EmployeeDeductions, 'Employee.DocumentSigner': EmployeeDocumentSigner, 'Employee.EmployeeList': EmployeeEmployeeList, 'Employee.FederalTaxes': EmployeeFederalTaxes, 'Employee.HomeAddress': EmployeeHomeAddress, 'Employee.Landing': EmployeeLanding, 'Employee.OnboardingSummary': EmployeeOnboardingSummary, 'Employee.PaySchedules': EmployeePaySchedules, 'Employee.PaymentMethod': EmployeePaymentMethod, 'Employee.Profile': EmployeeProfile, 'Employee.SplitPaycheck': EmployeeSplitPaycheck, 'Employee.StateTaxes': EmployeeStateTaxes, 'Employee.Taxes': EmployeeTaxes, 'Payroll.PayrollBlocker': PayrollPayrollBlocker, 'Payroll.PayrollConfiguration': PayrollPayrollConfiguration, 'Payroll.PayrollEditEmployee': PayrollPayrollEditEmployee, 'Payroll.PayrollFlow': PayrollPayrollFlow, 'Payroll.PayrollHistory': PayrollPayrollHistory, 'Payroll.PayrollLanding': PayrollPayrollLanding, 'Payroll.PayrollList': PayrollPayrollList, 'Payroll.PayrollOverview': PayrollPayrollOverview, 'Payroll.PayrollReceipts': PayrollPayrollReceipts, 'Payroll.PayrollSchedule': PayrollPayrollSchedule, 'common': common,  }
     };
 }