feat(Payroll): redesign Edit payroll UI as card/table sections

docs/reference/Translations/index.md

@@ -4434,6 +4434,7 @@ Translation keys for the `Payroll.PayrollEditEmployee` i18n namespace.
 | Property | Default value |
 | ------ | ------ |
 | <a id="property-payrollpayrolleditemployeeadditionalearningstitle"></a> `additionalEarningsTitle` | `"Additional earnings"` |
+| <a id="property-payrollpayrolleditemployeeaddovertimecta"></a> `addOvertimeCta` | `"Add overtime"` |
 | <a id="property-payrollpayrolleditemployeeaddreimbursementcta"></a> `addReimbursementCta` | `"Add one-time reimbursement"` |
 | <a id="property-payrollpayrolleditemployeeaddreimbursementlink"></a> `addReimbursementLink` | `"Add one-time reimbursement"` |
 | <a id="property-payrollpayrolleditemployeebreadcrumblabel"></a> `breadcrumbLabel` | `"{{firstName}} {{lastName}}"` |
@@ -4445,6 +4446,9 @@ Translation keys for the `Payroll.PayrollEditEmployee` i18n namespace.
 | `compensationNames.regularHours` | `"Regular Hours"` |
 | <a id="property-payrollpayrolleditemployeefinalpayoutdescription"></a> `finalPayoutDescription` | `"Enter the unused hours to pay out on the final paycheck. This is separate from time off hours used during the pay period."` |
 | <a id="property-payrollpayrolleditemployeefinalpayouttitle"></a> `finalPayoutTitle` | `"Unused time off payout"` |
+| <a id="property-payrollpayrolleditemployeefixedamountcolumns"></a> `fixedAmountColumns` | |
+| `fixedAmountColumns.amount` | `"Amount"` |
+| `fixedAmountColumns.type` | `"Type"` |
 | <a id="property-payrollpayrolleditemployeefixedcompensationnames"></a> `fixedCompensationNames` | |
 | `fixedCompensationNames.bonus` | `"Bonus"` |
 | `fixedCompensationNames.cashTips` | `"Cash tips"` |
@@ -4454,7 +4458,11 @@ Translation keys for the `Payroll.PayrollEditEmployee` i18n namespace.
 | `fixedCompensationNames.reimbursement` | `"Reimbursement"` |
 | <a id="property-payrollpayrolleditemployeegrosspaylabel"></a> `grossPayLabel` | `"Gross pay (excluding reimbursements)"` |
 | <a id="property-payrollpayrolleditemployeegrosspaylabelmobile"></a> `grossPayLabelMobile` | `"Gross pay: {{grossPay}} (excluding reimbursements)"` |
+| <a id="property-payrollpayrolleditemployeehourscolumns"></a> `hoursColumns` | |
+| `hoursColumns.hours` | `"Hours"` |
+| `hoursColumns.type` | `"Hour type"` |
 | <a id="property-payrollpayrolleditemployeehoursunit"></a> `hoursUnit` | `"Hours"` |
+| <a id="property-payrollpayrolleditemployeeotherearningstitle"></a> `otherEarningsTitle` | `"Other"` |
 | <a id="property-payrollpayrolleditemployeepagetitle"></a> `pageTitle` | `"Edit payroll for {{employeeName}}"` |
 | <a id="property-payrollpayrolleditemployeepaymentmethoddescription"></a> `paymentMethodDescription` | `"Changing the default payment method will only apply to this payroll."` |
 | <a id="property-payrollpayrolleditemployeepaymentmethodlabel"></a> `paymentMethodLabel` | `"Payment method"` |
@@ -4464,7 +4472,7 @@ Translation keys for the `Payroll.PayrollEditEmployee` i18n namespace.
 | <a id="property-payrollpayrolleditemployeepaymentmethodtitle"></a> `paymentMethodTitle` | `"Payment"` |
 | <a id="property-payrollpayrolleditemployeerecurringreimbursementlabel"></a> `recurringReimbursementLabel` | `"{{description}} (recurring reimbursement)"` |
 | <a id="property-payrollpayrolleditemployeerecurringreimbursementtooltip"></a> `recurringReimbursementTooltip` | `"Recurring reimbursements are managed outside of payroll."` |
-| <a id="property-payrollpayrolleditemployeeregularhourstitle"></a> `regularHoursTitle` | `"Regular hours"` |
+| <a id="property-payrollpayrolleditemployeeregularhourstitle"></a> `regularHoursTitle` | `"Regular and overtime hours"` |
 | <a id="property-payrollpayrolleditemployeereimbursementamountcolumn"></a> `reimbursementAmountColumn` | `"Amount"` |
 | <a id="property-payrollpayrolleditemployeereimbursementamountlabel"></a> `reimbursementAmountLabel` | `"Amount"` |
 | <a id="property-payrollpayrolleditemployeereimbursementdescriptioncolumn"></a> `reimbursementDescriptionColumn` | `"Description"` |
@@ -4482,6 +4490,9 @@ Translation keys for the `Payroll.PayrollEditEmployee` i18n namespace.
 | <a id="property-payrollpayrolleditemployeesavereimbursementcta"></a> `saveReimbursementCta` | `"Save reimbursement"` |
 | <a id="property-payrollpayrolleditemployeetimeoffbalance"></a> `timeOffBalance` | |
 | `timeOffBalance.remaining` | `"{{balance}} remaining"` |
+| <a id="property-payrollpayrolleditemployeetimeoffcolumns"></a> `timeOffColumns` | |
+| `timeOffColumns.hours` | `"Hours"` |
+| `timeOffColumns.type` | `"Type"` |
 | <a id="property-payrollpayrolleditemployeetimeofftitle"></a> `timeOffTitle` | `"Time off"` |
 | <a id="property-payrollpayrolleditemployeetimeofftitledismissal"></a> `timeOffTitleDismissal` | `"Time off hours used this pay period"` |
 

src/components/Payroll/OffCycle/OffCycleExecution.test.tsx

@@ -352,7 +352,7 @@ describe('OffCycleExecution - edit employee hours round-trip', () => {
       ).toBeInTheDocument()
     })
 
-    const regularHoursInput = await screen.findByLabelText('Regular Hours')
+    const regularHoursInput = await screen.findByRole('spinbutton', { name: 'Regular Hours' })
     await user.clear(regularHoursInput)
     await user.type(regularHoursInput, '20')
 

src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.module.scss

@@ -18,16 +18,10 @@
 }
 
 .fieldGroup {
-  padding: toRem(32) 0;
-  border-top: 1px solid var(--g-colorBorderSecondary);
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: toRem(16);
-
-  &:first-child {
-    border-top: none;
-  }
 }
 
 .grossPayLabel {

src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.test.tsx

@@ -473,6 +473,72 @@ describe('PayrollEditEmployeePresentation', () => {
     )
   })
 
+  describe('Overtime', () => {
+    it('hides overtime rows behind an Add overtime button until revealed', async () => {
+      const user = userEvent.setup()
+      const compensationWithZeroOvertime: PayrollEmployeeCompensationsType = {
+        ...mockEmployeeCompensation,
+        hourlyCompensations: [
+          {
+            name: 'Regular Hours',
+            hours: '40.000',
+            flsaStatus: 'Nonexempt',
+            jobUuid: 'job-1',
+            amount: '1000.0',
+            compensationMultiplier: 1.0,
+          },
+          {
+            name: 'Overtime',
+            hours: '0',
+            flsaStatus: 'Nonexempt',
+            jobUuid: 'job-1',
+            amount: '0',
+            compensationMultiplier: 1.5,
+          },
+        ],
+      }
+
+      renderWithProviders(
+        <PayrollEditEmployeePresentation
+          {...defaultProps}
+          employeeCompensation={compensationWithZeroOvertime}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Regular Hours')).toBeInTheDocument()
+      })
+      expect(screen.queryByLabelText('Overtime')).not.toBeInTheDocument()
+
+      const addOvertimeButton = screen.getByText('Add overtime')
+      await user.click(addOvertimeButton)
+
+      expect(screen.getByLabelText('Overtime')).toBeInTheDocument()
+      expect(screen.queryByText('Add overtime')).not.toBeInTheDocument()
+    })
+
+    it('reveals overtime rows by default when the employee already has overtime hours', async () => {
+      renderWithProviders(<PayrollEditEmployeePresentation {...defaultProps} />)
+
+      expect(await screen.findByLabelText('Overtime')).toBeInTheDocument()
+      expect(screen.queryByText('Add overtime')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Section order', () => {
+    it('renders Additional earnings before Time off', async () => {
+      renderWithProviders(<PayrollEditEmployeePresentation {...defaultProps} />)
+
+      const additionalEarningsHeading = await screen.findByText('Additional earnings')
+      const timeOffHeading = screen.getByText('Time off')
+
+      expect(
+        additionalEarningsHeading.compareDocumentPosition(timeOffHeading) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy()
+    })
+  })
+
   describe('Time Off', () => {
     it('renders time off section when employee has time off data', async () => {
       renderWithProviders(<PayrollEditEmployeePresentation {...defaultProps} />)
@@ -821,6 +887,35 @@ describe('PayrollEditEmployeePresentation', () => {
       })
     })
 
+    it('renders cash and paycheck tips under a separate Other section', async () => {
+      const compensationWithTips: PayrollEmployeeCompensationsType = {
+        ...mockEmployeeCompensation,
+        fixedCompensations: [
+          { name: 'Bonus', amount: '500.00', jobUuid: 'job-1' },
+          { name: 'Cash Tips', amount: '20.00', jobUuid: 'job-1' },
+        ],
+      }
+
+      renderWithProviders(
+        <PayrollEditEmployeePresentation
+          {...defaultProps}
+          employeeCompensation={compensationWithTips}
+          fixedCompensationTypes={[{ name: 'Bonus' }, { name: 'Cash Tips' }]}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Additional earnings')).toBeInTheDocument()
+      })
+      expect(screen.getByLabelText('Bonus')).toBeInTheDocument()
+      const otherHeading = screen.getByText('Other')
+      const cashTipsInput = screen.getByLabelText('Cash tips')
+      expect(cashTipsInput).toBeInTheDocument()
+      expect(
+        otherHeading.compareDocumentPosition(cashTipsInput) & Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy()
+    })
+
     it('renders reimbursement rows when present', async () => {
       renderWithProviders(<PayrollEditEmployeePresentation {...defaultProps} />)