feat: adding RFI alerts to contractor payment list

src/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.tsx

@@ -4,6 +4,7 @@ import { PaymentHistory } from '../PaymentHistory/PaymentHistory'
 import { PaymentStatement } from '../PaymentStatement/PaymentStatement'
 import { PaymentSummary } from '../PaymentSummary'
 import type { InternalAlert } from '../types'
+import { InformationRequestsFlow } from '@/components/InformationRequests'
 import { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'
 import type { BaseComponentInterface } from '@/components/Base'
 import type { BreadcrumbTrail } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'
@@ -60,3 +61,15 @@ export function PaymentSummaryContextual() {
     />
   )
 }
+
+export function InformationRequestsContextual() {
+  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()
+  return (
+    <InformationRequestsFlow
+      companyId={ensureRequired(companyId)}
+      filterByPayrollBlocking={false}
+      withAlert={false}
+      onEvent={onEvent}
+    />
+  )
+}

src/components/Contractor/Payments/PaymentFlow/paymentStateMachine.ts

@@ -9,8 +9,9 @@ import {
   PaymentListContextual,
   PaymentStatementContextual,
   PaymentSummaryContextual,
+  InformationRequestsContextual,
 } from './PaymentFlowComponents'
-import { componentEvents } from '@/shared/constants'
+import { componentEvents, informationRequestEvents } from '@/shared/constants'
 import type { MachineEventType, MachineTransition } from '@/types/Helpers'
 import { updateBreadcrumbs } from '@/helpers/breadcrumbHelpers'
 import type { BreadcrumbNodes } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'
@@ -26,10 +27,13 @@ type EventPayloads = {
     paymentGroupId: string
   }
   [componentEvents.CONTRACTOR_PAYMENT_CANCEL]: { paymentId: string }
+  [componentEvents.CONTRACTOR_PAYMENT_RFI_RESPOND]: undefined
   [componentEvents.BREADCRUMB_NAVIGATE]: {
     key: string
     onNavigate: (ctx: PaymentFlowContextInterface) => PaymentFlowContextInterface
   }
+  [informationRequestEvents.INFORMATION_REQUEST_FORM_DONE]: undefined
+  [informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL]: undefined
 }
 
 export const paymentFlowBreadcrumbsNodes: BreadcrumbNodes = {
@@ -131,6 +135,25 @@ export const paymentMachine = {
         },
       ),
     ),
+    transition(
+      componentEvents.CONTRACTOR_PAYMENT_RFI_RESPOND,
+      'informationRequests',
+      reduce(
+        (
+          ctx: PaymentFlowContextInterface,
+          ev: MachineEventType<
+            EventPayloads,
+            typeof componentEvents.CONTRACTOR_PAYMENT_RFI_RESPOND
+          >,
+        ): PaymentFlowContextInterface => {
+          return {
+            ...ctx,
+            component: InformationRequestsContextual,
+            progressBarType: null,
+          }
+        },
+      ),
+    ),
   ),
   createPayment: state<MachineTransition>(
     transition(
@@ -227,4 +250,44 @@ export const paymentMachine = {
     breadcrumbNavigateTransition('landing'),
     breadcrumbNavigateTransition('history'),
   ),
+  informationRequests: state<MachineTransition>(
+    transition(
+      informationRequestEvents.INFORMATION_REQUEST_FORM_DONE,
+      'landing',
+      reduce(
+        (
+          ctx: PaymentFlowContextInterface,
+          ev: MachineEventType<
+            EventPayloads,
+            typeof informationRequestEvents.INFORMATION_REQUEST_FORM_DONE
+          >,
+        ): PaymentFlowContextInterface => {
+          return {
+            ...updateBreadcrumbs('landing', ctx),
+            component: PaymentListContextual,
+            progressBarType: null,
+          }
+        },
+      ),
+    ),
+    transition(
+      informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL,
+      'landing',
+      reduce(
+        (
+          ctx: PaymentFlowContextInterface,
+          ev: MachineEventType<
+            EventPayloads,
+            typeof informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL
+          >,
+        ): PaymentFlowContextInterface => {
+          return {
+            ...updateBreadcrumbs('landing', ctx),
+            component: PaymentListContextual,
+            progressBarType: null,
+          }
+        },
+      ),
+    ),
+  ),
 }

src/components/Contractor/Payments/PaymentsList/PaymentsList.tsx

@@ -1,5 +1,7 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useCallback } from 'react'
 import { useContractorPaymentGroupsGetListSuspense } from '@gusto/embedded-api/react-query/contractorPaymentGroupsGetList'
+import { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'
+import { InformationRequestStatus } from '@gusto/embedded-api/models/components/informationrequest'
 import type { InternalAlert } from '../types'
 import { PaymentsListPresentation } from './PaymentsListPresentation'
 import { useComponentDictionary } from '@/i18n'
@@ -49,6 +51,11 @@ export const Root = ({ companyId, dictionary, onEvent, alerts }: PaymentsListPro
   })
   const contractorPayments = data.contractorPaymentGroupWithBlockers || []
 
+  const { data: informationRequestsData } = useInformationRequestsGetInformationRequestsSuspense({
+    companyUuid: companyId,
+  })
+  const informationRequests = informationRequestsData.informationRequestList ?? []
+
   const hasUnresolvedWireInRequests = useMemo(() => {
     return contractorPayments.some(payment => {
       const creditBlockers = payment.creditBlockers || []
@@ -62,6 +69,39 @@ export const Root = ({ companyId, dictionary, onEvent, alerts }: PaymentsListPro
     })
   }, [contractorPayments])
 
+  const handleRespondToRfi = useCallback(() => {
+    onEvent(componentEvents.CONTRACTOR_PAYMENT_RFI_RESPOND)
+  }, [onEvent])
+
+  const rfiAlerts = useMemo(() => {
+    const rfiAlertsArray: InternalAlert[] = []
+
+    const hasPendingResponseRfis = informationRequests.some(
+      request => request.status === InformationRequestStatus.PendingResponse,
+    )
+    const hasPendingReviewRfis = informationRequests.some(
+      request => request.status === InformationRequestStatus.PendingReview,
+    )
+
+    if (hasPendingResponseRfis) {
+      rfiAlertsArray.push({
+        type: 'error',
+        title: 'rfiPendingResponseTitle',
+        content: 'rfiPendingResponseDescription',
+        onAction: handleRespondToRfi,
+        actionLabel: 'rfiRespondCta',
+      })
+    } else if (hasPendingReviewRfis) {
+      rfiAlertsArray.push({
+        type: 'info',
+        title: 'rfiPendingReviewTitle',
+        content: 'rfiPendingReviewDescription',
+      })
+    }
+
+    return rfiAlertsArray
+  }, [informationRequests, handleRespondToRfi])
+
   const onCreatePayment = () => {
     onEvent(componentEvents.CONTRACTOR_PAYMENT_CREATE)
   }
@@ -74,14 +114,18 @@ export const Root = ({ companyId, dictionary, onEvent, alerts }: PaymentsListPro
     onEvent(componentEvents.CONTRACTOR_PAYMENT_VIEW, { paymentId })
   }
 
+  const allAlerts = useMemo(() => {
+    return [...rfiAlerts, ...(alerts || [])]
+  }, [rfiAlerts, alerts])
+
   return (
     <PaymentsListPresentation
       contractorPayments={contractorPayments}
       numberOfMonths={numberOfMonths}
       onCreatePayment={onCreatePayment}
       onDateRangeChange={handleDateRangeChange}
       onViewPayment={onViewPayment}
-      alerts={alerts}
+      alerts={allAlerts}
       companyId={companyId}
       hasUnresolvedWireInRequests={hasUnresolvedWireInRequests}
       onEvent={onEvent}

src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx

@@ -108,7 +108,18 @@ export const PaymentsListPresentation = ({
               status={alert.type}
               onDismiss={alert.onDismiss}
             >
-              {alert.content ?? null}
+              <Flex flexDirection="column" gap={12}>
+                {typeof alert.content === 'string'
+                  ? t(`alerts.${alert.content}` as never)
+                  : (alert.content ?? null)}
+                {alert.onAction && alert.actionLabel && (
+                  <div>
+                    <Button variant="secondary" onClick={alert.onAction}>
+                      {t(`alerts.${alert.actionLabel}` as never)}
+                    </Button>
+                  </div>
+                )}
+              </Flex>
             </Alert>
           ))}
         </Flex>

src/components/Contractor/Payments/types.ts

@@ -13,4 +13,6 @@ export type InternalAlert = {
   content?: ReactNode
   onDismiss?: () => void
   translationParams?: Record<string, unknown>
+  onAction?: () => void
+  actionLabel?: string
 }

src/i18n/en/Contractor.Payments.PaymentsList.json

@@ -15,7 +15,12 @@
   "alerts": {
     "paymentCreatedSuccessfully_one": "Successfully created {{count}} contractor payment.",
     "paymentCreatedSuccessfully_other": "Successfully created {{count}} contractor payments.",
-    "paymentCancelledSuccessfully": "Contractor payment cancelled successfully"
+    "paymentCancelledSuccessfully": "Contractor payment cancelled successfully",
+    "rfiPendingResponseTitle": "Payments may be blocked: Provide more information to run payments",
+    "rfiPendingResponseDescription": "We need some more information about your business. Please respond as soon as possible to run payments on time.",
+    "rfiPendingReviewTitle": "Payments may be blocked",
+    "rfiPendingReviewDescription": "We're reviewing information about your business. Payments may be blocked until review is complete.",
+    "rfiRespondCta": "Respond"
   },
   "dateRanges": {
     "last3Months": "Last 3 months",

src/shared/constants.ts

@@ -123,6 +123,7 @@ export const contractorPaymentEvents = {
   CONTRACTOR_PAYMENT_VIEW_DETAILS: 'contractor/payments/view/details',
   CONTRACTOR_PAYMENT_CANCEL: 'contractor/payments/cancel',
   CONTRACTOR_PAYMENT_EXIT: 'contractor/payments/exit',
+  CONTRACTOR_PAYMENT_RFI_RESPOND: 'contractor/payments/rfi/respond',
 } as const
 
 export const payScheduleEvents = {

src/types/i18next.d.ts

@@ -649,6 +649,11 @@ export interface ContractorPaymentsPaymentsList{
 "paymentCreatedSuccessfully_one":string;
 "paymentCreatedSuccessfully_other":string;
 "paymentCancelledSuccessfully":string;
+"rfiPendingResponseTitle":string;
+"rfiPendingResponseDescription":string;
+"rfiPendingReviewTitle":string;
+"rfiPendingReviewDescription":string;
+"rfiRespondCta":string;
 };
 "dateRanges":{
 "last3Months":string;