chore: pr fixes

Author: jeffredodd

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

@@ -1,43 +1,29 @@
 import type { StoryDefault, Story } from '@ladle/react'
 import { action } from '@ladle/react'
+import { FormWrapper } from '../../../../../.ladle/helpers/FormWrapper'
 import { PaymentEdit } from './PaymentEditPresentation'
 
-const mockContractorFixed = {
-  uuid: '1',
-  contractorUuid: 'armstrong-louis',
-  wageType: 'Fixed' as const,
-  paymentMethod: 'Direct Deposit' as const,
-  hours: undefined,
-  wage: '1000',
-  bonus: '0',
-  reimbursement: '0',
-  wageTotal: '1000',
-}
-
-const mockContractorHourly = {
-  uuid: '2',
-  contractorUuid: 'fitzgerald-ella',
-  wageType: 'Hourly' as const,
-  hourlyRate: '18',
-  paymentMethod: 'Check' as const,
-  hours: '16',
-  wage: undefined,
-  bonus: '350',
-  reimbursement: '0',
-  wageTotal: '638',
-}
-
 export default {
-  title: 'Domain/Contractor/Payments/Individual Contractor Earnings',
+  title: 'Domain/Contractor/Payments/Edit Payment',
 } satisfies StoryDefault
 
 export const EditPaymentFixedWage: Story = () => {
+  const defaultValues = {
+    uuid: '1',
+    contractorUuid: 'armstrong-louis',
+    wageType: 'Fixed',
+    paymentMethod: 'Direct Deposit',
+    hours: undefined,
+    wage: '1000',
+    bonus: '0',
+    reimbursement: '0',
+    wageTotal: '1000',
+  }
+
   return (
-    <PaymentEdit
-      contractor={mockContractorFixed}
-      onSave={action('onSave')}
-      onCancel={action('onCancel')}
-    />
+    <FormWrapper defaultValues={defaultValues}>
+      <PaymentEdit onSave={action('onSave')} onCancel={action('onCancel')} />
+    </FormWrapper>
   )
 }
 
@@ -47,12 +33,23 @@ EditPaymentFixedWage.meta = {
 }
 
 export const EditPaymentHourlyWage: Story = () => {
+  const defaultValues = {
+    uuid: '2',
+    contractorUuid: 'fitzgerald-ella',
+    wageType: 'Hourly',
+    hourlyRate: '18',
+    paymentMethod: 'Check',
+    hours: '16',
+    wage: undefined,
+    bonus: '350',
+    reimbursement: '0',
+    wageTotal: '638',
+  }
+
   return (
-    <PaymentEdit
-      contractor={mockContractorHourly}
-      onSave={action('onSave')}
-      onCancel={action('onCancel')}
-    />
+    <FormWrapper defaultValues={defaultValues}>
+      <PaymentEdit onSave={action('onSave')} onCancel={action('onCancel')} />
+    </FormWrapper>
   )
 }
 

src/components/Contractor/Payments/PaymentEdit/PaymentEditPresentation.tsx

@@ -1,34 +1,20 @@
-import { useState } from 'react'
-import type { ContractorPaymentForGroup } from '../types'
+import { useWatch } from 'react-hook-form'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
-import { Flex, Grid, ActionsLayout } from '@/components/Common'
+import { Flex, Grid, ActionsLayout, NumberInputField, RadioGroupField } from '@/components/Common'
 import { formatNumberAsCurrency } from '@/helpers/formattedStrings'
 import { useLocale } from '@/contexts/LocaleProvider/useLocale'
 
 interface PaymentEditProps {
-  contractor: ContractorPaymentForGroup
-  onSave: (contractor: ContractorPaymentForGroup) => void
+  onSave: () => void
   onCancel: () => void
 }
 
-export const PaymentEdit = ({ contractor, onSave, onCancel }: PaymentEditProps) => {
-  const { Button, Text, Heading, Card, NumberInput, RadioGroup } = useComponentContext()
+export const PaymentEdit = ({ onSave, onCancel }: PaymentEditProps) => {
+  const { Button, Text, Heading, Card } = useComponentContext()
   const { locale } = useLocale()
 
-  const [editedContractor, setEditedContractor] = useState<ContractorPaymentForGroup>({
-    ...contractor,
-  })
-
-  const handleFieldChange = (field: keyof ContractorPaymentForGroup, value: number | string) => {
-    setEditedContractor((prev: ContractorPaymentForGroup) => ({
-      ...prev,
-      [field]: value,
-    }))
-  }
-
-  const handleSave = () => {
-    onSave(editedContractor)
-  }
+  const wageType = useWatch({ name: 'wageType' })
+  const wageTotal = useWatch({ name: 'wageTotal' })
 
   const paymentMethodOptions = [
     { value: 'Check', label: 'Check' },
@@ -48,70 +34,31 @@ export const PaymentEdit = ({ contractor, onSave, onCancel }: PaymentEditProps)
           </Text>
         </Flex>
 
-        {editedContractor.wageType === 'Hourly' && (
+        {wageType === 'Hourly' && (
           <Flex flexDirection="column" gap={16}>
             <Heading as="h3">Hours</Heading>
-            <NumberInput
-              name="hours"
-              value={editedContractor.hours ? parseFloat(editedContractor.hours) : 0}
-              onChange={(value: number) => {
-                handleFieldChange('hours', value ? value.toString() : '0')
-              }}
-              isRequired
-              label="Hours"
-              adornmentEnd="hrs"
-            />
+            <NumberInputField name="hours" isRequired label="Hours" adornmentEnd="hrs" />
           </Flex>
         )}
 
-        {editedContractor.wageType === 'Fixed' && (
+        {wageType === 'Fixed' && (
           <Flex flexDirection="column" gap={16}>
             <Heading as="h3">Fixed pay</Heading>
-            <NumberInput
-              name="wage"
-              value={editedContractor.wage ? parseFloat(editedContractor.wage) : 0}
-              onChange={(value: number) => {
-                handleFieldChange('wage', value ? value.toString() : '0')
-              }}
-              isRequired
-              label="Wage"
-              format="currency"
-            />
+            <NumberInputField name="wage" isRequired label="Wage" format="currency" />
           </Flex>
         )}
 
         <Flex flexDirection="column" gap={16}>
           <Heading as="h3">Additional earnings</Heading>
           <Grid gridTemplateColumns={{ base: '1fr', small: [200, 200] }} gap={16}>
-            <NumberInput
-              name="bonus"
-              value={editedContractor.bonus ? parseFloat(editedContractor.bonus) : 0}
-              onChange={(value: number) => {
-                handleFieldChange('bonus', value ? value.toString() : '0')
-              }}
-              label="Bonus"
-              format="currency"
-            />
-            <NumberInput
-              name="reimbursement"
-              value={
-                editedContractor.reimbursement ? parseFloat(editedContractor.reimbursement) : 0
-              }
-              onChange={(value: number) => {
-                handleFieldChange('reimbursement', value ? value.toString() : '0')
-              }}
-              label="Reimbursement"
-              format="currency"
-            />
+            <NumberInputField name="bonus" label="Bonus" format="currency" />
+            <NumberInputField name="reimbursement" label="Reimbursement" format="currency" />
           </Grid>
         </Flex>
 
         <Flex flexDirection="column" gap={16}>
-          <RadioGroup
-            value={editedContractor.paymentMethod || 'Direct Deposit'}
-            onChange={(value: string) => {
-              handleFieldChange('paymentMethod', value)
-            }}
+          <RadioGroupField
+            name="paymentMethod"
             options={paymentMethodOptions}
             label="Payment Method"
           />
@@ -120,18 +67,14 @@ export const PaymentEdit = ({ contractor, onSave, onCancel }: PaymentEditProps)
         <Flex justifyContent="space-between" alignItems="center">
           <Text>
             <strong>
-              Total pay:{' '}
-              {formatNumberAsCurrency(
-                contractor.wageTotal ? parseFloat(contractor.wageTotal) : 0,
-                locale,
-              )}
+              Total pay: {formatNumberAsCurrency(parseFloat(wageTotal || '0'), locale)}
             </strong>
           </Text>
           <ActionsLayout>
             <Button onClick={onCancel} variant="secondary">
               Cancel
             </Button>
-            <Button onClick={handleSave} variant="primary">
+            <Button onClick={onSave} variant="primary">
               OK
             </Button>
           </ActionsLayout>