Merge branch 'main' into kw/fix/SDK-198

Author: krisxcrash

package-lock.json

@@ -97,10 +97,10 @@
     "prettier": "^3.7.4",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "sass-embedded": "^1.97.1",
+    "sass-embedded": "^1.97.2",
     "ts-morph": "^27.0.2",
     "tsx": "^4.21.0",
-    "typescript-eslint": "^8.51.0",
+    "typescript-eslint": "^8.52.0",
     "vite": "^6.4.1",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-circular-dependency": "^0.5.0",
@@ -128,7 +128,7 @@
     "i18next": "^25.7.3",
     "react-aria": "^3.44.0",
     "react-aria-components": "1.13.0",
-    "react-error-boundary": "^6.0.1",
+    "react-error-boundary": "^6.0.2",
     "react-hook-form": "^7.70.0",
     "react-i18next": "^16.5.1",
     "react-robot": "^1.2.0",

package.json

@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslation } from 'react-i18next'
 import type { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentgrouppreview'
+import { useBankAccountsGet } from '@gusto/embedded-api/react-query/bankAccountsGet'
 import type { InternalAlert } from '../types'
 import { CreatePaymentPresentation } from './CreatePaymentPresentation'
 import {
@@ -57,6 +58,9 @@ export const Root = ({ companyId, dictionary, onEvent }: CreatePaymentProps) =>
       contractor.isActive &&
       contractor.onboardingStatus === ContractorOnboardingStatus.ONBOARDING_COMPLETED,
   )
+  const { data: bankAccounts } = useBankAccountsGet({ companyId })
+  // Currently, we only support a single default bank account per company.
+  const bankAccount = bankAccounts?.companyBankAccounts?.[0]
   const initialContractorPayments: (ContractorPayments & { isTouched: boolean })[] = useMemo(
     () =>
       contractors.map(contractor => ({
@@ -248,6 +252,7 @@ export const Root = ({ companyId, dictionary, onEvent }: CreatePaymentProps) =>
           onBackToEdit={onBackToEdit}
           onSubmit={onCreatePaymentGroup}
           isLoading={isCreatingContractorPaymentGroup || isPreviewingContractorPaymentGroup}
+          bankAccount={bankAccount}
         />
       )}
       {!previewData && (

src/components/Contractor/Payments/CreatePayment/CreatePayment.tsx

@@ -3,6 +3,7 @@ import type { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/c
 import type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentforgrouppreview'
 import { useMemo } from 'react'
 import type { Contractor } from '@gusto/embedded-api/models/components/contractor'
+import type { CompanyBankAccount } from '@gusto/embedded-api/models/components/companybankaccount'
 import { getContractorDisplayName } from './helpers'
 import { DataView, Flex } from '@/components/Common'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
@@ -18,6 +19,7 @@ interface PreviewPresentationProps {
   onBackToEdit: () => void
   onSubmit: () => void
   isLoading: boolean
+  bankAccount?: CompanyBankAccount
 }
 
 export const PreviewPresentation = ({
@@ -26,6 +28,7 @@ export const PreviewPresentation = ({
   onBackToEdit,
   onSubmit,
   isLoading,
+  bankAccount,
 }: PreviewPresentationProps) => {
   const { Button, Text, Heading, Alert } = useComponentContext()
   useI18n('Contractor.Payments.CreatePayment')
@@ -105,7 +108,7 @@ export const PreviewPresentation = ({
           },
           {
             title: t('summaryTableHeaders.debitAccount'),
-            render: () => <Text>{'debitAccount'}</Text>,
+            render: () => <Text>{bankAccount?.hiddenAccountNumber ?? t('naDebitAccount')}</Text>,
           },
           {
             title: t('summaryTableHeaders.debitDate'),

src/components/Contractor/Payments/CreatePayment/PreviewPresentation.tsx

@@ -0,0 +1,74 @@
+import { useTranslation } from 'react-i18next'
+import { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'
+import type { OnEventType } from '@/components/Base/useBase'
+import { ActionsLayout, Flex } from '@/components/Common'
+import { Form } from '@/components/Common/Form'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { useComponentDictionary, useI18n } from '@/i18n'
+import { informationRequestEvents, type EventType } from '@/shared/constants'
+
+const INFORMATION_REQUEST_FORM_ID = 'gusto-sdk-information-request-form'
+
+interface InformationRequestFormProps extends BaseComponentInterface<'Payroll.InformationRequestForm'> {
+  requestId: string
+  onEvent: OnEventType<EventType, unknown>
+}
+
+export function InformationRequestForm(props: InformationRequestFormProps) {
+  return (
+    <BaseComponent {...props}>
+      <Root {...props}>{props.children}</Root>
+    </BaseComponent>
+  )
+}
+
+function Root({ dictionary }: InformationRequestFormProps) {
+  useComponentDictionary('Payroll.InformationRequestForm', dictionary)
+  useI18n('Payroll.InformationRequestForm')
+  const { t } = useTranslation('Payroll.InformationRequestForm')
+  const { Heading, Text } = useComponentContext()
+  const { onEvent, baseSubmitHandler } = useBase()
+
+  // TODO: Wire up form submission with API call using the custom RFI submission endpoint created in SC-56
+  const onSubmit = async () => {
+    // TODO: remove this lint ignore once we wire this up and await the api call
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await baseSubmitHandler({}, async () => {
+      // TODO: Call API submission endpoint here
+      onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_DONE)
+    })
+  }
+
+  return (
+    <Flex flexDirection="column" gap={16}>
+      <Heading as="h2">{t('title')}</Heading>
+      <Text>Placeholder: Form content will be rendered here</Text>
+      <Form id={INFORMATION_REQUEST_FORM_ID} onSubmit={onSubmit}>
+        {/* TODO: Add form fields here */}
+      </Form>
+    </Flex>
+  )
+}
+
+const Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {
+  useI18n('Payroll.InformationRequestForm')
+  const { t } = useTranslation('Payroll.InformationRequestForm')
+  const { Button } = useComponentContext()
+
+  const handleCancel = () => {
+    onEvent(informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL)
+  }
+
+  return (
+    <ActionsLayout>
+      <Button variant="secondary" onClick={handleCancel}>
+        {t('cta.cancel')}
+      </Button>
+      <Button variant="primary" type="submit" form={INFORMATION_REQUEST_FORM_ID}>
+        {t('cta.submit')}
+      </Button>
+    </ActionsLayout>
+  )
+}
+
+InformationRequestForm.Footer = Footer

src/components/Payroll/InformationRequests/InformationRequestForm/InformationRequestForm.tsx

@@ -0,0 +1 @@
+export { InformationRequestForm } from './InformationRequestForm'

src/components/Payroll/InformationRequests/InformationRequestForm/index.ts

@@ -0,0 +1,11 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(20);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(2);
+}

src/components/Payroll/InformationRequests/InformationRequestList/InformationRequestList.module.scss

@@ -0,0 +1,85 @@
+import { useTranslation } from 'react-i18next'
+import styles from './InformationRequestList.module.scss'
+import { BaseComponent, type BaseComponentInterface } from '@/components/Base'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { useComponentDictionary, useI18n } from '@/i18n'
+import { DataView } from '@/components/Common/DataView/DataView'
+import { useDataView } from '@/components/Common/DataView/useDataView'
+import { Flex, FlexItem } from '@/components/Common'
+import { informationRequestEvents } from '@/shared/constants'
+
+interface InformationRequestListProps extends BaseComponentInterface<'Payroll.InformationRequestList'> {
+  companyId: string
+  onEvent: BaseComponentInterface['onEvent']
+}
+
+export function InformationRequestList(props: InformationRequestListProps) {
+  return (
+    <BaseComponent {...props}>
+      <Root {...props}>{props.children}</Root>
+    </BaseComponent>
+  )
+}
+
+function Root({ dictionary, onEvent }: InformationRequestListProps) {
+  useComponentDictionary('Payroll.InformationRequestList', dictionary)
+  useI18n('Payroll.InformationRequestList')
+  const { t } = useTranslation('Payroll.InformationRequestList')
+  const { Heading, Text, Button, Badge } = useComponentContext()
+
+  // TODO: Replace with actual RFI data and add it to the following table
+
+  const dataViewProps = useDataView({
+    data: [{ id: 'placeholder' }],
+    columns: [
+      {
+        title: 'Type',
+        render: () => (
+          <FlexItem flexGrow={1}>
+            <Text weight="semibold">Company onboarding</Text>
+          </FlexItem>
+        ),
+      },
+      {
+        title: 'Status',
+        render: () => (
+          <Flex gap={8} alignItems="center">
+            <Badge status="info">Replace with status</Badge>
+          </Flex>
+        ),
+      },
+      {
+        title: '',
+        render: () => (
+          <Flex justifyContent="flex-end" alignItems="center">
+            <Button
+              variant="secondary"
+              onClick={() => {
+                onEvent(informationRequestEvents.INFORMATION_REQUEST_RESPOND, {
+                  requestId: 'placeholder-id',
+                })
+              }}
+            >
+              {t('cta.respond')}
+            </Button>
+          </Flex>
+        ),
+      },
+    ],
+  })
+
+  return (
+    <div className={styles.root}>
+      <Flex flexDirection="column" gap={24}>
+        <div className={styles.header}>
+          <Heading as="h2" styledAs="h3">
+            {t('title')}
+          </Heading>
+          <Text>{t('description')}</Text>
+        </div>
+
+        <DataView {...dataViewProps} label={t('title')} />
+      </Flex>
+    </div>
+  )
+}

src/components/Payroll/InformationRequests/InformationRequestList/InformationRequestList.tsx

@@ -0,0 +1 @@
+export { InformationRequestList } from './InformationRequestList'

src/components/Payroll/InformationRequests/InformationRequestList/index.ts

@@ -0,0 +1,6 @@
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}