@gusto/embedded-react-sdk 0.48.0 → 0.48.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/components/Common/EmptyData/EmptyData.d.ts +1 -1
- package/dist/components/Common/EmptyData/EmptyData.js +10 -12
- package/dist/components/Common/EmptyData/EmptyData.js.map +1 -1
- package/dist/components/Common/EmptyData/EmptyData.module.scss.js +6 -10
- package/dist/components/Common/EmptyData/EmptyData.module.scss.js.map +1 -1
- package/dist/components/Common/Form/Form.d.ts +1 -1
- package/dist/components/Common/Form/Form.js +8 -7
- package/dist/components/Common/Form/Form.js.map +1 -1
- package/dist/components/Common/UI/Card/Card.js +8 -8
- package/dist/components/Common/UI/Card/Card.js.map +1 -1
- package/dist/components/Common/UI/Card/Card.module.scss.js +5 -3
- package/dist/components/Common/UI/Card/Card.module.scss.js.map +1 -1
- package/dist/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.js +13 -13
- package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js +3 -17
- package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js +3 -17
- package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/useAssignSignatory.js +5 -19
- package/dist/components/Company/AssignSignatory/useAssignSignatory.js.map +1 -1
- package/dist/components/Company/BankAccount/BankAccount.js +6 -7
- package/dist/components/Company/BankAccount/BankAccount.js.map +1 -1
- package/dist/components/Company/BankAccount/BankAccountForm/context.js +3 -17
- package/dist/components/Company/BankAccount/BankAccountForm/context.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js +3 -17
- package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentSigner.js +2 -3
- package/dist/components/Company/DocumentSigner/DocumentSigner.js.map +1 -1
- package/dist/components/Company/DocumentSigner/shared/useSignCompanyForm/fields.js +4 -4
- package/dist/components/Company/FederalTaxes/useFederalTaxes.js +12 -26
- package/dist/components/Company/FederalTaxes/useFederalTaxes.js.map +1 -1
- package/dist/components/Company/Industry/Context.js +6 -20
- package/dist/components/Company/Industry/Context.js.map +1 -1
- package/dist/components/Company/Industry/IndustrySelect.js +6 -8
- package/dist/components/Company/Industry/IndustrySelect.js.map +1 -1
- package/dist/components/Company/Locations/LocationForm/useLocationForm.js +3 -17
- package/dist/components/Company/Locations/LocationForm/useLocationForm.js.map +1 -1
- package/dist/components/Company/Locations/LocationsList/useLocationsList.js +3 -17
- package/dist/components/Company/Locations/LocationsList/useLocationsList.js.map +1 -1
- package/dist/components/Company/OnboardingOverview/context.js +4 -18
- package/dist/components/Company/OnboardingOverview/context.js.map +1 -1
- package/dist/components/Company/PaySchedule/PayScheduleForm.js +5 -4
- package/dist/components/Company/PaySchedule/PayScheduleForm.js.map +1 -1
- package/dist/components/Company/PaySchedule/shared/usePayScheduleForm/fields.js +5 -5
- package/dist/components/Company/StateTaxes/StateTaxesForm/context.js +3 -17
- package/dist/components/Company/StateTaxes/StateTaxesForm/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesList/context.js +3 -17
- package/dist/components/Company/StateTaxes/StateTaxesList/context.js.map +1 -1
- package/dist/components/Contractor/Address/useAddress.js +5 -19
- package/dist/components/Contractor/Address/useAddress.js.map +1 -1
- package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatement.js +2 -3
- package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatement.js.map +1 -1
- package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js +2 -3
- package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js.map +1 -1
- package/dist/components/Contractor/Profile/ContractorProfileForm.js +13 -13
- package/dist/components/Contractor/Profile/useContractorProfile.js +39 -48
- package/dist/components/Contractor/Profile/useContractorProfile.js.map +1 -1
- package/dist/components/Employee/Compensation/management/Compensation.js +2 -3
- package/dist/components/Employee/Compensation/management/Compensation.js.map +1 -1
- package/dist/components/Employee/Compensation/management/CompensationAddAnotherJobForm/CompensationAddAnotherJobForm.js +8 -9
- package/dist/components/Employee/Compensation/management/CompensationAddAnotherJobForm/CompensationAddAnotherJobForm.js.map +1 -1
- package/dist/components/Employee/Compensation/management/CompensationAddJobForm/CompensationAddJobForm.js +2 -3
- package/dist/components/Employee/Compensation/management/CompensationAddJobForm/CompensationAddJobForm.js.map +1 -1
- package/dist/components/Employee/Compensation/management/CompensationEditForm/CompensationEditForm.js +2 -3
- package/dist/components/Employee/Compensation/management/CompensationEditForm/CompensationEditForm.js.map +1 -1
- package/dist/components/Employee/Compensation/management/CompensationEditJobForm/CompensationEditJobForm.js +2 -3
- package/dist/components/Employee/Compensation/management/CompensationEditJobForm/CompensationEditJobForm.js.map +1 -1
- package/dist/components/Employee/Compensation/management/CompensationEditPendingJobForm/CompensationEditPendingJobForm.js +2 -3
- package/dist/components/Employee/Compensation/management/CompensationEditPendingJobForm/CompensationEditPendingJobForm.js.map +1 -1
- package/dist/components/Employee/Compensation/onboarding/Compensation.js +2 -3
- package/dist/components/Employee/Compensation/onboarding/Compensation.js.map +1 -1
- package/dist/components/Employee/Compensation/onboarding/EditCompensation/EditCompensation.js +2 -3
- package/dist/components/Employee/Compensation/onboarding/EditCompensation/EditCompensation.js.map +1 -1
- package/dist/components/Employee/Compensation/shared/useCompensationForm/fields.js +6 -6
- package/dist/components/Employee/Compensation/shared/useJobForm/fields.js +10 -10
- package/dist/components/Employee/Deductions/management/Deductions.js +2 -3
- package/dist/components/Employee/Deductions/management/Deductions.js.map +1 -1
- package/dist/components/Employee/Deductions/management/DeductionsEditForm/DeductionsEditForm.js +2 -3
- package/dist/components/Employee/Deductions/management/DeductionsEditForm/DeductionsEditForm.js.map +1 -1
- package/dist/components/Employee/Deductions/shared/useChildSupportGarnishmentForm/fields.js +1 -1
- package/dist/components/Employee/Deductions/shared/useDeductionForm/fields.js +2 -2
- package/dist/components/Employee/Documents/management/Documents.js +2 -3
- package/dist/components/Employee/Documents/management/Documents.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js +3 -17
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentSigner.js +11 -12
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentSigner.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/EmploymentEligibility/EmploymentEligibilityPresentation.js +16 -16
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/I9SignatureForm/I9SignatureForm.js +3 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/I9SignatureForm/I9SignatureForm.js.map +1 -1
- package/dist/components/Employee/Documents/shared/SignatureForm/SignatureForm.js +3 -1
- package/dist/components/Employee/Documents/shared/SignatureForm/SignatureForm.js.map +1 -1
- package/dist/components/Employee/Documents/shared/useSignEmployeeForm/fields.js +2 -2
- package/dist/components/Employee/FederalTaxes/management/FederalTaxes.js +9 -10
- package/dist/components/Employee/FederalTaxes/management/FederalTaxes.js.map +1 -1
- package/dist/components/Employee/FederalTaxes/management/FederalTaxesEditForm.js +2 -3
- package/dist/components/Employee/FederalTaxes/management/FederalTaxesEditForm.js.map +1 -1
- package/dist/components/Employee/FederalTaxes/onboarding/FederalTaxes.js +8 -9
- package/dist/components/Employee/FederalTaxes/onboarding/FederalTaxes.js.map +1 -1
- package/dist/components/Employee/FederalTaxes/shared/FederalTaxesView.js +13 -14
- package/dist/components/Employee/FederalTaxes/shared/FederalTaxesView.js.map +1 -1
- package/dist/components/Employee/FederalTaxes/shared/useFederalTaxesForm/fields.js +1 -1
- package/dist/components/Employee/HomeAddress/management/HomeAddress.js +2 -3
- package/dist/components/Employee/HomeAddress/management/HomeAddress.js.map +1 -1
- package/dist/components/Employee/PaymentMethod/management/PaymentMethod.js +6 -7
- package/dist/components/Employee/PaymentMethod/management/PaymentMethod.js.map +1 -1
- package/dist/components/Employee/PaymentMethod/onboarding/PaymentMethod.js +6 -7
- package/dist/components/Employee/PaymentMethod/onboarding/PaymentMethod.js.map +1 -1
- package/dist/components/Employee/PaymentMethod/shared/useSplitPaymentsForm/splitFieldFactory.js +4 -4
- package/dist/components/Employee/Profile/management/Profile.js +11 -12
- package/dist/components/Employee/Profile/management/Profile.js.map +1 -1
- package/dist/components/Employee/Profile/management/ProfileEditForm.js +12 -13
- package/dist/components/Employee/Profile/management/ProfileEditForm.js.map +1 -1
- package/dist/components/Employee/Profile/onboarding/AdminProfile.js +10 -11
- package/dist/components/Employee/Profile/onboarding/AdminProfile.js.map +1 -1
- package/dist/components/Employee/Profile/onboarding/EmployeeProfile.js +2 -3
- package/dist/components/Employee/Profile/onboarding/EmployeeProfile.js.map +1 -1
- package/dist/components/Employee/Profile/onboarding/Profile.js +11 -12
- package/dist/components/Employee/Profile/onboarding/Profile.js.map +1 -1
- package/dist/components/Employee/Profile/shared/useEmployeeDetailsForm/fields.js +8 -8
- package/dist/components/Employee/Profile/shared/useHomeAddressForm/fields.js +6 -6
- package/dist/components/Employee/Profile/shared/useWorkAddressForm/fields.js +4 -4
- package/dist/components/Employee/StateTaxes/management/StateTaxes.js +9 -10
- package/dist/components/Employee/StateTaxes/management/StateTaxes.js.map +1 -1
- package/dist/components/Employee/StateTaxes/management/StateTaxesEditForm.js +6 -7
- package/dist/components/Employee/StateTaxes/management/StateTaxesEditForm.js.map +1 -1
- package/dist/components/Employee/StateTaxes/onboarding/StateTaxes.js +2 -3
- package/dist/components/Employee/StateTaxes/onboarding/StateTaxes.js.map +1 -1
- package/dist/components/Employee/StateTaxes/shared/EmployeeStateTaxesView.js +2 -3
- package/dist/components/Employee/StateTaxes/shared/EmployeeStateTaxesView.js.map +1 -1
- package/dist/components/Employee/StateTaxes/shared/useEmployeeStateTaxesForm/fieldComponents.js +8 -8
- package/dist/components/Employee/Terminations/TerminateEmployee/TerminateEmployeePresentation.js +10 -10
- package/dist/components/Employee/WorkAddress/management/WorkAddress.js +6 -7
- package/dist/components/Employee/WorkAddress/management/WorkAddress.js.map +1 -1
- package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js +7 -8
- package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js.map +1 -1
- package/dist/components/InformationRequests/InformationRequests.js +7 -8
- package/dist/components/InformationRequests/InformationRequests.js.map +1 -1
- package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.js +16 -17
- package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.js.map +1 -1
- package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.js +2 -3
- package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.js.map +1 -1
- package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.js +8 -8
- package/dist/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.js +0 -1
- package/dist/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.js.map +1 -1
- package/dist/components/Payroll/GrossUpModal/GrossUpModal.js +25 -34
- package/dist/components/Payroll/GrossUpModal/GrossUpModal.js.map +1 -1
- package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js +1 -1
- package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerList.js +2 -3
- package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerList.js.map +1 -1
- package/dist/components/Payroll/PayrollReceipts/PayrollReceipts.js +6 -7
- package/dist/components/Payroll/PayrollReceipts/PayrollReceipts.js.map +1 -1
- package/dist/components/Payroll/RecoveryCases/RecoveryCases.js +6 -7
- package/dist/components/Payroll/RecoveryCases/RecoveryCases.js.map +1 -1
- package/dist/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.js +2 -3
- package/dist/components/Payroll/RecoveryCases/RecoveryCasesList/RecoveryCasesList.js.map +1 -1
- package/dist/components/Payroll/TransitionCreation/TransitionCreationPresentation.js +10 -10
- package/dist/components/Payroll/usePreparedPayrollData.js +22 -33
- package/dist/components/Payroll/usePreparedPayrollData.js.map +1 -1
- package/dist/components/TimeOff/AddEmployeesHoliday/AddEmployeesHoliday.js +2 -3
- package/dist/components/TimeOff/AddEmployeesHoliday/AddEmployeesHoliday.js.map +1 -1
- package/dist/components/TimeOff/AddEmployeesToPolicy/AddEmployeesToPolicy.js +2 -3
- package/dist/components/TimeOff/AddEmployeesToPolicy/AddEmployeesToPolicy.js.map +1 -1
- package/dist/components/TimeOff/PolicyList/PolicyList.js +2 -3
- package/dist/components/TimeOff/PolicyList/PolicyList.js.map +1 -1
- package/dist/i18n/en/common.json.d.ts +0 -1
- package/dist/i18n/en/common.json.js +2 -2
- package/dist/node_modules/react-dnd/dist/core/DndProvider.js +1 -1
- package/dist/node_modules/react-dnd/dist/core/DndProvider.js.map +1 -1
- package/dist/partner-hook-utils/composeErrorHandler.js +3 -1
- package/dist/partner-hook-utils/composeErrorHandler.js.map +1 -1
- package/dist/partner-hook-utils/form/fields/DatePickerHookField.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/i18next.d.ts +0 -1
- package/package.json +19 -7
- package/dist/assets/icons/magnifyingGlass.png.js +0 -5
- package/dist/assets/icons/magnifyingGlass.png.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InformationRequests.js","sources":["../../../src/components/InformationRequests/InformationRequests.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { Suspense, useCallback, useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { InformationRequestList } from './InformationRequestList'\nimport { informationRequestsMachine } from './informationRequestsStateMachine'\nimport { type InformationRequestsContextInterface } from './InformationRequestsComponents'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\n\ninterface SubmissionAlert {\n id: number\n}\n\ninterface SubmissionAlertState {\n nextAlertId: number\n alerts: SubmissionAlert[]\n}\n\nexport interface InformationRequestsFlowProps extends Omit<\n BaseComponentInterface<'InformationRequests'>,\n 'onEvent'\n> {\n companyId: string\n /**\n * When true (default), the submission success alert is rendered at the top of this component.\n * Set to false when embedding in a parent (e.g. PayrollBlockerList) that renders the alert elsewhere.\n */\n withAlert?: boolean\n onEvent?: BaseComponentInterface['onEvent']\n}\n\nconst ALERT_TYPE = 'informationRequestResponded' as const\n\nexport function InformationRequestsFlow({\n companyId,\n dictionary,\n withAlert = true,\n onEvent = () => {},\n}: InformationRequestsFlowProps) {\n useComponentDictionary('InformationRequests', dictionary)\n useI18n('InformationRequests')\n const { t } = useTranslation('InformationRequests')\n const { Modal, LoadingSpinner, Alert, Text } = useComponentContext()\n const [isModalOpen, setIsModalOpen] = useState(false)\n const [alertState, setAlertState] = useState<SubmissionAlertState>({\n nextAlertId: 0,\n alerts: [],\n })\n\n const handleDismissAlert = useCallback((alertId: number) => {\n setAlertState(prev => ({\n ...prev,\n alerts: prev.alerts.filter(alert => alert.id !== alertId),\n }))\n }, [])\n\n const addSubmissionAlert = useCallback(() => {\n setAlertState(prev => ({\n nextAlertId: prev.nextAlertId + 1,\n alerts: [{ id: prev.nextAlertId }, ...prev.alerts],\n }))\n }, [])\n\n const informationRequestsMachineInstance = useMemo(\n () =>\n createMachine(\n 'list',\n informationRequestsMachine,\n (): InformationRequestsContextInterface => ({\n component: null,\n companyId,\n onEvent: handleEvent,\n }),\n ),\n [companyId],\n )\n const [current, send] = useMachine(informationRequestsMachineInstance)\n\n function handleEvent(type: EventType, data?: unknown) {\n send({ type, payload: data })\n\n if (type === informationRequestEvents.INFORMATION_REQUEST_RESPOND) {\n setIsModalOpen(true)\n }\n\n if (\n type === informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL ||\n type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE\n ) {\n setIsModalOpen(false)\n }\n\n if (type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE && withAlert) {\n addSubmissionAlert()\n }\n\n onEvent(type, data)\n }\n\n const handleCloseModal = () => {\n setIsModalOpen(false)\n }\n\n const CurrentComponent = current.context.component\n const Footer = CurrentComponent?.Footer || undefined\n\n return (\n <FlowContext.Provider\n value={{\n ...current.context,\n onEvent: handleEvent,\n }}\n >\n <Flex flexDirection=\"column\" gap={32}>\n {withAlert &&\n alertState.alerts.map(alert => (\n <Alert\n key={alert.id}\n status=\"success\"\n label={t(`alerts.${ALERT_TYPE}.title`)}\n onDismiss={() => {\n handleDismissAlert(alert.id)\n }}\n >\n <Text>{t(`alerts.${ALERT_TYPE}.description`)}</Text>\n </Alert>\n ))}\n\n <Suspense fallback={<LoadingSpinner />}>\n <InformationRequestList companyId={companyId} onEvent={handleEvent} />\n </Suspense>\n <Modal\n isOpen={isModalOpen}\n onClose={handleCloseModal}\n footer={\n Footer && (\n <BaseBoundaries>\n <Suspense fallback={<LoadingSpinner size=\"sm\" />}>\n <Footer onEvent={handleEvent} />\n </Suspense>\n </BaseBoundaries>\n )\n }\n >\n {CurrentComponent && <CurrentComponent />}\n </Modal>\n </Flex>\n </FlowContext.Provider>\n )\n}\n"],"names":["ALERT_TYPE","InformationRequestsFlow","companyId","dictionary","withAlert","onEvent","useComponentDictionary","useI18n","t","useTranslation","Modal","LoadingSpinner","Alert","Text","useComponentContext","isModalOpen","setIsModalOpen","useState","alertState","setAlertState","handleDismissAlert","useCallback","alertId","prev","alert","addSubmissionAlert","informationRequestsMachineInstance","useMemo","createMachine","informationRequestsMachine","handleEvent","current","send","useMachine","type","data","informationRequestEvents","handleCloseModal","CurrentComponent","Footer","jsx","FlowContext","jsxs","Flex","Suspense","InformationRequestList","BaseBoundaries"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InformationRequests.js","sources":["../../../src/components/InformationRequests/InformationRequests.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { Suspense, useCallback, useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { InformationRequestList } from './InformationRequestList'\nimport { informationRequestsMachine } from './informationRequestsStateMachine'\nimport { type InformationRequestsContextInterface } from './InformationRequestsComponents'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { informationRequestEvents, type EventType } from '@/shared/constants'\n\ninterface SubmissionAlert {\n id: number\n}\n\ninterface SubmissionAlertState {\n nextAlertId: number\n alerts: SubmissionAlert[]\n}\n\nexport interface InformationRequestsFlowProps extends Omit<\n BaseComponentInterface<'InformationRequests'>,\n 'onEvent'\n> {\n companyId: string\n /**\n * When true (default), the submission success alert is rendered at the top of this component.\n * Set to false when embedding in a parent (e.g. PayrollBlockerList) that renders the alert elsewhere.\n */\n withAlert?: boolean\n onEvent?: BaseComponentInterface['onEvent']\n}\n\nconst ALERT_TYPE = 'informationRequestResponded' as const\n\nexport function InformationRequestsFlow({\n companyId,\n dictionary,\n withAlert = true,\n onEvent = () => {},\n}: InformationRequestsFlowProps) {\n useComponentDictionary('InformationRequests', dictionary)\n useI18n('InformationRequests')\n const { t } = useTranslation('InformationRequests')\n const { Modal, LoadingSpinner, Alert, Text } = useComponentContext()\n const [isModalOpen, setIsModalOpen] = useState(false)\n const [alertState, setAlertState] = useState<SubmissionAlertState>({\n nextAlertId: 0,\n alerts: [],\n })\n\n const handleDismissAlert = useCallback((alertId: number) => {\n setAlertState(prev => ({\n ...prev,\n alerts: prev.alerts.filter(alert => alert.id !== alertId),\n }))\n }, [])\n\n const addSubmissionAlert = useCallback(() => {\n setAlertState(prev => ({\n nextAlertId: prev.nextAlertId + 1,\n alerts: [{ id: prev.nextAlertId }, ...prev.alerts],\n }))\n }, [])\n\n const informationRequestsMachineInstance = useMemo(\n () =>\n createMachine(\n 'list',\n informationRequestsMachine,\n (): InformationRequestsContextInterface => ({\n component: null,\n companyId,\n onEvent: handleEvent,\n }),\n ),\n [companyId],\n )\n const [current, send] = useMachine(informationRequestsMachineInstance)\n\n function handleEvent(type: EventType, data?: unknown) {\n send({ type, payload: data })\n\n if (type === informationRequestEvents.INFORMATION_REQUEST_RESPOND) {\n setIsModalOpen(true)\n }\n\n if (\n type === informationRequestEvents.INFORMATION_REQUEST_FORM_CANCEL ||\n type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE\n ) {\n setIsModalOpen(false)\n }\n\n if (type === informationRequestEvents.INFORMATION_REQUEST_FORM_DONE && withAlert) {\n addSubmissionAlert()\n }\n\n onEvent(type, data)\n }\n\n const handleCloseModal = () => {\n setIsModalOpen(false)\n }\n\n const CurrentComponent = current.context.component\n const Footer = CurrentComponent?.Footer || undefined\n\n return (\n <FlowContext.Provider\n value={{\n ...current.context,\n onEvent: handleEvent,\n }}\n >\n <Flex flexDirection=\"column\" gap={32}>\n {withAlert &&\n alertState.alerts.map(alert => (\n <Alert\n key={alert.id}\n status=\"success\"\n label={t(`alerts.${ALERT_TYPE}.title`)}\n onDismiss={() => {\n handleDismissAlert(alert.id)\n }}\n >\n <Text>{t(`alerts.${ALERT_TYPE}.description`)}</Text>\n </Alert>\n ))}\n\n <Suspense fallback={<LoadingSpinner />}>\n <InformationRequestList companyId={companyId} onEvent={handleEvent} />\n </Suspense>\n <Modal\n isOpen={isModalOpen}\n onClose={handleCloseModal}\n footer={\n Footer && (\n <BaseBoundaries>\n <Suspense fallback={<LoadingSpinner size=\"sm\" />}>\n <Footer onEvent={handleEvent} />\n </Suspense>\n </BaseBoundaries>\n )\n }\n >\n {CurrentComponent && <CurrentComponent />}\n </Modal>\n </Flex>\n </FlowContext.Provider>\n )\n}\n"],"names":["ALERT_TYPE","InformationRequestsFlow","companyId","dictionary","withAlert","onEvent","useComponentDictionary","useI18n","t","useTranslation","Modal","LoadingSpinner","Alert","Text","useComponentContext","isModalOpen","setIsModalOpen","useState","alertState","setAlertState","handleDismissAlert","useCallback","alertId","prev","alert","addSubmissionAlert","informationRequestsMachineInstance","useMemo","createMachine","informationRequestsMachine","handleEvent","current","send","useMachine","type","data","informationRequestEvents","handleCloseModal","CurrentComponent","Footer","jsx","FlowContext","jsxs","Flex","Suspense","InformationRequestList","BaseBoundaries"],"mappings":"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"}
|
|
@@ -6,41 +6,40 @@ import { useWireInRequestsListSuspense as F } from "@gusto/embedded-api-v-2025-1
|
|
|
6
6
|
import { confirmWireDetailsMachine as D } from "./confirmWireDetailsStateMachine.js";
|
|
7
7
|
import P from "./ConfirmWireDetails.module.scss.js";
|
|
8
8
|
import { BaseComponent as Y, BaseBoundaries as q } from "../../Base/Base.js";
|
|
9
|
-
import "../../Base/useBase.js";
|
|
10
9
|
import { useComponentContext as B } from "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
11
10
|
import { FlowContext as b } from "../../Flow/useFlow.js";
|
|
12
11
|
import { payrollWireEvents as r } from "../../../shared/constants.js";
|
|
13
12
|
import { ConfirmWireDetailsBanner as g } from "./ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.js";
|
|
14
|
-
function
|
|
13
|
+
function $({
|
|
15
14
|
onEvent: t = () => {
|
|
16
15
|
},
|
|
17
|
-
...
|
|
16
|
+
...n
|
|
18
17
|
}) {
|
|
19
|
-
return /* @__PURE__ */ e(Y, { ...
|
|
18
|
+
return /* @__PURE__ */ e(Y, { ...n, onEvent: t, children: /* @__PURE__ */ e(j, { ...n, onEvent: t }) });
|
|
20
19
|
}
|
|
21
|
-
function j({ companyId: t, wireInId:
|
|
20
|
+
function j({ companyId: t, wireInId: n, onEvent: l = () => {
|
|
22
21
|
} }) {
|
|
23
|
-
const { Modal: p, LoadingSpinner: C } = B(), [_, s] = v(!1),
|
|
22
|
+
const { Modal: p, LoadingSpinner: C } = B(), [_, s] = v(!1), f = x(null), { data: L } = F({
|
|
24
23
|
companyUuid: t
|
|
25
|
-
}),
|
|
26
|
-
(
|
|
27
|
-
), W = d(() =>
|
|
24
|
+
}), m = (L.wireInRequestList || []).filter(
|
|
25
|
+
(o) => o.status === "awaiting_funds"
|
|
26
|
+
), W = d(() => n || m[0]?.uuid, [n, m[0]?.uuid]), h = d(
|
|
28
27
|
() => M(
|
|
29
28
|
"banner",
|
|
30
29
|
D,
|
|
31
30
|
() => ({
|
|
32
31
|
component: null,
|
|
33
32
|
companyId: t,
|
|
34
|
-
wireInId:
|
|
33
|
+
wireInId: n,
|
|
35
34
|
selectedWireInId: W,
|
|
36
35
|
onEvent: i,
|
|
37
|
-
modalContainerRef:
|
|
36
|
+
modalContainerRef: f
|
|
38
37
|
})
|
|
39
38
|
),
|
|
40
|
-
[t,
|
|
39
|
+
[t, n]
|
|
41
40
|
), [a, A] = T(h);
|
|
42
|
-
function i(
|
|
43
|
-
A({ type:
|
|
41
|
+
function i(o, R) {
|
|
42
|
+
A({ type: o, payload: R }), o === r.PAYROLL_WIRE_START_TRANSFER && s(!0), (o === r.PAYROLL_WIRE_INSTRUCTIONS_CANCEL || o === r.PAYROLL_WIRE_FORM_CANCEL || o === r.PAYROLL_WIRE_FORM_DONE) && s(!1), l(o, R);
|
|
44
43
|
}
|
|
45
44
|
const E = () => {
|
|
46
45
|
i(r.PAYROLL_WIRE_START_TRANSFER);
|
|
@@ -59,7 +58,7 @@ function j({ companyId: t, wireInId: o, onEvent: l = () => {
|
|
|
59
58
|
g,
|
|
60
59
|
{
|
|
61
60
|
companyId: t,
|
|
62
|
-
wireInId:
|
|
61
|
+
wireInId: n,
|
|
63
62
|
onStartWireTransfer: E,
|
|
64
63
|
onEvent: l,
|
|
65
64
|
confirmationAlert: a.context.confirmationAlert
|
|
@@ -70,7 +69,7 @@ function j({ companyId: t, wireInId: o, onEvent: l = () => {
|
|
|
70
69
|
{
|
|
71
70
|
isOpen: _,
|
|
72
71
|
onClose: O,
|
|
73
|
-
containerRef:
|
|
72
|
+
containerRef: f,
|
|
74
73
|
footer: u && /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
|
|
75
74
|
N,
|
|
76
75
|
{
|
|
@@ -86,6 +85,6 @@ function j({ companyId: t, wireInId: o, onEvent: l = () => {
|
|
|
86
85
|
);
|
|
87
86
|
}
|
|
88
87
|
export {
|
|
89
|
-
|
|
88
|
+
$ as ConfirmWireDetails
|
|
90
89
|
};
|
|
91
90
|
//# sourceMappingURL=ConfirmWireDetails.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmWireDetails.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { Suspense, useMemo, useRef, useState } from 'react'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/wireInRequestsList'\nimport { ConfirmWireDetailsBanner } from './ConfirmWireDetailsBanner'\nimport { confirmWireDetailsMachine } from './confirmWireDetailsStateMachine'\nimport { type ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport type { ConfirmWireDetailsProps } from './types'\nexport type { ConfirmWireDetailsComponentType } from './types'\nimport styles from './ConfirmWireDetails.module.scss'\nimport { BaseComponent, BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\n\ninterface ConfirmWireDetailsInternalProps\n extends Omit<BaseComponentInterface, 'onEvent'>, ConfirmWireDetailsProps {}\n\nexport function ConfirmWireDetails({\n onEvent = () => {},\n ...props\n}: ConfirmWireDetailsInternalProps) {\n return (\n <BaseComponent {...props} onEvent={onEvent}>\n <Root {...props} onEvent={onEvent} />\n </BaseComponent>\n )\n}\n\nfunction Root({ companyId, wireInId, onEvent = () => {} }: ConfirmWireDetailsInternalProps) {\n const { Modal, LoadingSpinner } = useComponentContext()\n const [isModalOpen, setIsModalOpen] = useState(false)\n const modalContainerRef = useRef<HTMLDivElement>(null)\n\n const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n companyUuid: companyId,\n })\n\n const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n r => r.status === 'awaiting_funds',\n )\n\n const selectedWireInId = useMemo(() => {\n if (wireInId) {\n return wireInId\n }\n\n return activeWireInRequests[0]?.uuid\n }, [wireInId, activeWireInRequests[0]?.uuid])\n\n const confirmWireDetailsMachineInstance = useMemo(\n () =>\n createMachine(\n 'banner',\n confirmWireDetailsMachine,\n (): ConfirmWireDetailsContextInterface => ({\n component: null,\n companyId,\n wireInId,\n selectedWireInId,\n onEvent: handleEvent,\n modalContainerRef,\n }),\n ),\n [companyId, wireInId],\n )\n const [current, send] = useMachine(confirmWireDetailsMachineInstance)\n\n function handleEvent(type: EventType, data?: unknown) {\n send({ type, payload: data })\n\n if (type === payrollWireEvents.PAYROLL_WIRE_START_TRANSFER) {\n setIsModalOpen(true)\n }\n\n if (\n type === payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL ||\n type === payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL ||\n type === payrollWireEvents.PAYROLL_WIRE_FORM_DONE\n ) {\n setIsModalOpen(false)\n }\n\n onEvent(type, data)\n }\n\n const handleStartWireTransfer = () => {\n handleEvent(payrollWireEvents.PAYROLL_WIRE_START_TRANSFER)\n }\n\n const handleCloseModal = () => {\n setIsModalOpen(false)\n }\n\n const CurrentComponent = current.context.component\n const Footer = CurrentComponent?.Footer || undefined\n\n return (\n <FlowContext.Provider\n value={{\n ...current.context,\n onEvent: handleEvent,\n }}\n >\n <ConfirmWireDetailsBanner\n companyId={companyId}\n wireInId={wireInId}\n onStartWireTransfer={handleStartWireTransfer}\n onEvent={onEvent}\n confirmationAlert={current.context.confirmationAlert}\n />\n <Modal\n isOpen={isModalOpen}\n onClose={handleCloseModal}\n containerRef={modalContainerRef}\n footer={\n Footer && (\n <BaseBoundaries>\n <Suspense\n fallback={\n <div className={styles.footer}>\n <LoadingSpinner size=\"sm\" />\n </div>\n }\n >\n <Footer onEvent={handleEvent} />\n </Suspense>\n </BaseBoundaries>\n )\n }\n >\n {CurrentComponent && <CurrentComponent />}\n </Modal>\n </FlowContext.Provider>\n )\n}\n"],"names":["ConfirmWireDetails","onEvent","props","jsx","BaseComponent","Root","companyId","wireInId","Modal","LoadingSpinner","useComponentContext","isModalOpen","setIsModalOpen","useState","modalContainerRef","useRef","wireInRequestsData","useWireInRequestsListSuspense","activeWireInRequests","r","selectedWireInId","useMemo","confirmWireDetailsMachineInstance","createMachine","confirmWireDetailsMachine","handleEvent","current","send","useMachine","type","data","payrollWireEvents","handleStartWireTransfer","handleCloseModal","CurrentComponent","Footer","jsxs","FlowContext","ConfirmWireDetailsBanner","BaseBoundaries","Suspense","styles"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ConfirmWireDetails.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { Suspense, useMemo, useRef, useState } from 'react'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/wireInRequestsList'\nimport { ConfirmWireDetailsBanner } from './ConfirmWireDetailsBanner'\nimport { confirmWireDetailsMachine } from './confirmWireDetailsStateMachine'\nimport { type ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport type { ConfirmWireDetailsProps } from './types'\nexport type { ConfirmWireDetailsComponentType } from './types'\nimport styles from './ConfirmWireDetails.module.scss'\nimport { BaseComponent, BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\n\ninterface ConfirmWireDetailsInternalProps\n extends Omit<BaseComponentInterface, 'onEvent'>, ConfirmWireDetailsProps {}\n\nexport function ConfirmWireDetails({\n onEvent = () => {},\n ...props\n}: ConfirmWireDetailsInternalProps) {\n return (\n <BaseComponent {...props} onEvent={onEvent}>\n <Root {...props} onEvent={onEvent} />\n </BaseComponent>\n )\n}\n\nfunction Root({ companyId, wireInId, onEvent = () => {} }: ConfirmWireDetailsInternalProps) {\n const { Modal, LoadingSpinner } = useComponentContext()\n const [isModalOpen, setIsModalOpen] = useState(false)\n const modalContainerRef = useRef<HTMLDivElement>(null)\n\n const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n companyUuid: companyId,\n })\n\n const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n r => r.status === 'awaiting_funds',\n )\n\n const selectedWireInId = useMemo(() => {\n if (wireInId) {\n return wireInId\n }\n\n return activeWireInRequests[0]?.uuid\n }, [wireInId, activeWireInRequests[0]?.uuid])\n\n const confirmWireDetailsMachineInstance = useMemo(\n () =>\n createMachine(\n 'banner',\n confirmWireDetailsMachine,\n (): ConfirmWireDetailsContextInterface => ({\n component: null,\n companyId,\n wireInId,\n selectedWireInId,\n onEvent: handleEvent,\n modalContainerRef,\n }),\n ),\n [companyId, wireInId],\n )\n const [current, send] = useMachine(confirmWireDetailsMachineInstance)\n\n function handleEvent(type: EventType, data?: unknown) {\n send({ type, payload: data })\n\n if (type === payrollWireEvents.PAYROLL_WIRE_START_TRANSFER) {\n setIsModalOpen(true)\n }\n\n if (\n type === payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL ||\n type === payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL ||\n type === payrollWireEvents.PAYROLL_WIRE_FORM_DONE\n ) {\n setIsModalOpen(false)\n }\n\n onEvent(type, data)\n }\n\n const handleStartWireTransfer = () => {\n handleEvent(payrollWireEvents.PAYROLL_WIRE_START_TRANSFER)\n }\n\n const handleCloseModal = () => {\n setIsModalOpen(false)\n }\n\n const CurrentComponent = current.context.component\n const Footer = CurrentComponent?.Footer || undefined\n\n return (\n <FlowContext.Provider\n value={{\n ...current.context,\n onEvent: handleEvent,\n }}\n >\n <ConfirmWireDetailsBanner\n companyId={companyId}\n wireInId={wireInId}\n onStartWireTransfer={handleStartWireTransfer}\n onEvent={onEvent}\n confirmationAlert={current.context.confirmationAlert}\n />\n <Modal\n isOpen={isModalOpen}\n onClose={handleCloseModal}\n containerRef={modalContainerRef}\n footer={\n Footer && (\n <BaseBoundaries>\n <Suspense\n fallback={\n <div className={styles.footer}>\n <LoadingSpinner size=\"sm\" />\n </div>\n }\n >\n <Footer onEvent={handleEvent} />\n </Suspense>\n </BaseBoundaries>\n )\n }\n >\n {CurrentComponent && <CurrentComponent />}\n </Modal>\n </FlowContext.Provider>\n )\n}\n"],"names":["ConfirmWireDetails","onEvent","props","jsx","BaseComponent","Root","companyId","wireInId","Modal","LoadingSpinner","useComponentContext","isModalOpen","setIsModalOpen","useState","modalContainerRef","useRef","wireInRequestsData","useWireInRequestsListSuspense","activeWireInRequests","r","selectedWireInId","useMemo","confirmWireDetailsMachineInstance","createMachine","confirmWireDetailsMachine","handleEvent","current","send","useMachine","type","data","payrollWireEvents","handleStartWireTransfer","handleCloseModal","CurrentComponent","Footer","jsxs","FlowContext","ConfirmWireDetailsBanner","BaseBoundaries","Suspense","styles"],"mappings":"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"}
|
|
@@ -4,13 +4,12 @@ import { useWireInRequestsListSuspense as M } from "@gusto/embedded-api-v-2025-1
|
|
|
4
4
|
import { usePayrollsListSuspense as N } from "@gusto/embedded-api-v-2025-11-15/react-query/payrollsList";
|
|
5
5
|
import { useState as Z, useEffect as _ } from "react";
|
|
6
6
|
import { BaseComponent as j } from "../../../Base/Base.js";
|
|
7
|
-
import "../../../Base/useBase.js";
|
|
8
7
|
import { useComponentContext as k } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
9
8
|
import { useComponentDictionary as E, useI18n as G } from "../../../../i18n/I18n.js";
|
|
10
9
|
import { Flex as g } from "../../../Common/Flex/Flex.js";
|
|
11
10
|
import { useDateFormatter as z } from "../../../../hooks/useDateFormatter.js";
|
|
12
11
|
import H from "../../../../hooks/useNumberFormatter.js";
|
|
13
|
-
function
|
|
12
|
+
function oe(i) {
|
|
14
13
|
return /* @__PURE__ */ n(j, { ...i, children: /* @__PURE__ */ n(J, { ...i, children: i.children }) });
|
|
15
14
|
}
|
|
16
15
|
const J = ({
|
|
@@ -101,6 +100,6 @@ const J = ({
|
|
|
101
100
|
] });
|
|
102
101
|
};
|
|
103
102
|
export {
|
|
104
|
-
|
|
103
|
+
oe as ConfirmWireDetailsBanner
|
|
105
104
|
};
|
|
106
105
|
//# sourceMappingURL=ConfirmWireDetailsBanner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmWireDetailsBanner.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/payrollsList'\nimport { useState, useEffect } from 'react'\nimport type { ConfirmationAlert } from '../types'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\ninterface ConfirmWireDetailsBannerProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsBanner'> {\n wireInId?: string\n companyId: string\n confirmationAlert?: ConfirmationAlert\n onStartWireTransfer: () => void\n}\n\nexport function ConfirmWireDetailsBanner(props: ConfirmWireDetailsBannerProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({\n wireInId,\n companyId,\n dictionary,\n confirmationAlert,\n onStartWireTransfer,\n}: ConfirmWireDetailsBannerProps) => {\n useComponentDictionary('Payroll.ConfirmWireDetailsBanner', dictionary)\n useI18n('Payroll.ConfirmWireDetailsBanner')\n const { t } = useTranslation('Payroll.ConfirmWireDetailsBanner')\n const { Alert, Banner, Button, UnorderedList, Text } = useComponentContext()\n const dateFormatter = useDateFormatter()\n const [isConfirmationAlertDismissed, setIsConfirmationAlertDismissed] = useState(false)\n const currencyFormatter = useNumberFormatter('currency')\n\n useEffect(() => {\n if (confirmationAlert) {\n setIsConfirmationAlertDismissed(false)\n }\n }, [confirmationAlert])\n\n const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n companyUuid: companyId,\n })\n\n const { data: payrollsData } = usePayrollsListSuspense({\n companyId,\n processed: true,\n })\n\n const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n request => request.status === 'awaiting_funds',\n )\n const wireInRequests = wireInId\n ? activeWireInRequests.filter(request => request.uuid === wireInId)\n : activeWireInRequests\n\n const payrolls = payrollsData.payrollList || []\n\n const wireInRequestsWithPayrolls = wireInRequests.map(wireInRequest => {\n const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n const payrollRange = payroll?.payPeriod\n ? dateFormatter.formatPayPeriodRange(payroll.payPeriod.startDate, payroll.payPeriod.endDate)\n : ''\n return {\n wireInRequest,\n payroll,\n payrollRange,\n paymentType: wireInRequest.paymentType,\n requestedAmount: wireInRequest.requestedAmount ?? '',\n }\n })\n\n const shouldShowBanner =\n wireInRequestsWithPayrolls.length > 0 &&\n (wireInRequestsWithPayrolls.length > 1 || wireInRequestsWithPayrolls[0]?.wireInRequest)\n\n const shouldShowConfirmationAlert = !isConfirmationAlertDismissed && confirmationAlert\n\n if (!shouldShowBanner && !shouldShowConfirmationAlert) {\n return null\n }\n\n const formatDeadline = (deadline: string) => {\n const date = new Date(deadline)\n\n const timeRaw = date.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: date.getMinutes() === 0 ? undefined : '2-digit',\n hour12: true,\n timeZone: 'America/Los_Angeles',\n timeZoneName: 'short',\n })\n\n const time = timeRaw.replace(/\\s?(AM|PM)/i, match => match.trim().toLowerCase())\n\n const dateString = date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n timeZone: 'America/Los_Angeles',\n })\n\n return { time, date: dateString }\n }\n\n const getBannerTitle = () => {\n const isSingleWireInRequest = wireInRequestsWithPayrolls.length === 1\n const { wireInRequest, payrollRange } = wireInRequestsWithPayrolls[0] || {}\n\n if (isSingleWireInRequest) {\n if (wireInId && wireInRequest?.wireInDeadline) {\n const { time, date } = formatDeadline(wireInRequest.wireInDeadline)\n return t('banner.title', { time, date })\n }\n return t('banner.titleWithPayroll', { payrollRange })\n }\n return t('banner.titleMultiple', { count: wireInRequestsWithPayrolls.length })\n }\n\n const getBannerContent = () => {\n if (wireInRequestsWithPayrolls.length > 1) {\n return (\n <UnorderedList\n items={wireInRequestsWithPayrolls.map(\n ({ paymentType, payrollRange, requestedAmount }, index) =>\n paymentType === 'Payroll' ? (\n <Text key={index}>{t('banner.requestLabelPayroll', { payrollRange })}</Text>\n ) : (\n <Text key={index}>\n {t('banner.requestLabelContractorPaymentGroup', {\n requestedAmount: currencyFormatter(Number(requestedAmount)),\n })}\n </Text>\n ),\n )}\n />\n )\n }\n }\n\n return (\n <Flex flexDirection=\"column\" gap={16}>\n {shouldShowConfirmationAlert && (\n <Alert\n status=\"success\"\n label={confirmationAlert.title}\n onDismiss={() => {\n setIsConfirmationAlertDismissed(true)\n }}\n >\n {confirmationAlert.content}\n </Alert>\n )}\n {shouldShowBanner && (\n <Banner status=\"warning\" title={getBannerTitle()}>\n <Flex flexDirection=\"column\" gap={16} alignItems=\"flex-start\">\n <div>{t('banner.description')}</div>\n {getBannerContent()}\n <Button variant=\"secondary\" onClick={onStartWireTransfer}>\n {t('cta.startWireTransfer')}\n </Button>\n </Flex>\n </Banner>\n )}\n </Flex>\n )\n}\n"],"names":["ConfirmWireDetailsBanner","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","confirmationAlert","onStartWireTransfer","useComponentDictionary","useI18n","t","useTranslation","Alert","Banner","Button","UnorderedList","Text","useComponentContext","dateFormatter","useDateFormatter","isConfirmationAlertDismissed","setIsConfirmationAlertDismissed","useState","currencyFormatter","useNumberFormatter","useEffect","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","request","wireInRequests","payrolls","wireInRequestsWithPayrolls","wireInRequest","payroll","p","payrollRange","shouldShowBanner","shouldShowConfirmationAlert","formatDeadline","deadline","date","time","match","dateString","getBannerTitle","isSingleWireInRequest","getBannerContent","paymentType","requestedAmount","index","jsxs","Flex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ConfirmWireDetailsBanner.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/payrollsList'\nimport { useState, useEffect } from 'react'\nimport type { ConfirmationAlert } from '../types'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\ninterface ConfirmWireDetailsBannerProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsBanner'> {\n wireInId?: string\n companyId: string\n confirmationAlert?: ConfirmationAlert\n onStartWireTransfer: () => void\n}\n\nexport function ConfirmWireDetailsBanner(props: ConfirmWireDetailsBannerProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({\n wireInId,\n companyId,\n dictionary,\n confirmationAlert,\n onStartWireTransfer,\n}: ConfirmWireDetailsBannerProps) => {\n useComponentDictionary('Payroll.ConfirmWireDetailsBanner', dictionary)\n useI18n('Payroll.ConfirmWireDetailsBanner')\n const { t } = useTranslation('Payroll.ConfirmWireDetailsBanner')\n const { Alert, Banner, Button, UnorderedList, Text } = useComponentContext()\n const dateFormatter = useDateFormatter()\n const [isConfirmationAlertDismissed, setIsConfirmationAlertDismissed] = useState(false)\n const currencyFormatter = useNumberFormatter('currency')\n\n useEffect(() => {\n if (confirmationAlert) {\n setIsConfirmationAlertDismissed(false)\n }\n }, [confirmationAlert])\n\n const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n companyUuid: companyId,\n })\n\n const { data: payrollsData } = usePayrollsListSuspense({\n companyId,\n processed: true,\n })\n\n const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n request => request.status === 'awaiting_funds',\n )\n const wireInRequests = wireInId\n ? activeWireInRequests.filter(request => request.uuid === wireInId)\n : activeWireInRequests\n\n const payrolls = payrollsData.payrollList || []\n\n const wireInRequestsWithPayrolls = wireInRequests.map(wireInRequest => {\n const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n const payrollRange = payroll?.payPeriod\n ? dateFormatter.formatPayPeriodRange(payroll.payPeriod.startDate, payroll.payPeriod.endDate)\n : ''\n return {\n wireInRequest,\n payroll,\n payrollRange,\n paymentType: wireInRequest.paymentType,\n requestedAmount: wireInRequest.requestedAmount ?? '',\n }\n })\n\n const shouldShowBanner =\n wireInRequestsWithPayrolls.length > 0 &&\n (wireInRequestsWithPayrolls.length > 1 || wireInRequestsWithPayrolls[0]?.wireInRequest)\n\n const shouldShowConfirmationAlert = !isConfirmationAlertDismissed && confirmationAlert\n\n if (!shouldShowBanner && !shouldShowConfirmationAlert) {\n return null\n }\n\n const formatDeadline = (deadline: string) => {\n const date = new Date(deadline)\n\n const timeRaw = date.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: date.getMinutes() === 0 ? undefined : '2-digit',\n hour12: true,\n timeZone: 'America/Los_Angeles',\n timeZoneName: 'short',\n })\n\n const time = timeRaw.replace(/\\s?(AM|PM)/i, match => match.trim().toLowerCase())\n\n const dateString = date.toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n timeZone: 'America/Los_Angeles',\n })\n\n return { time, date: dateString }\n }\n\n const getBannerTitle = () => {\n const isSingleWireInRequest = wireInRequestsWithPayrolls.length === 1\n const { wireInRequest, payrollRange } = wireInRequestsWithPayrolls[0] || {}\n\n if (isSingleWireInRequest) {\n if (wireInId && wireInRequest?.wireInDeadline) {\n const { time, date } = formatDeadline(wireInRequest.wireInDeadline)\n return t('banner.title', { time, date })\n }\n return t('banner.titleWithPayroll', { payrollRange })\n }\n return t('banner.titleMultiple', { count: wireInRequestsWithPayrolls.length })\n }\n\n const getBannerContent = () => {\n if (wireInRequestsWithPayrolls.length > 1) {\n return (\n <UnorderedList\n items={wireInRequestsWithPayrolls.map(\n ({ paymentType, payrollRange, requestedAmount }, index) =>\n paymentType === 'Payroll' ? (\n <Text key={index}>{t('banner.requestLabelPayroll', { payrollRange })}</Text>\n ) : (\n <Text key={index}>\n {t('banner.requestLabelContractorPaymentGroup', {\n requestedAmount: currencyFormatter(Number(requestedAmount)),\n })}\n </Text>\n ),\n )}\n />\n )\n }\n }\n\n return (\n <Flex flexDirection=\"column\" gap={16}>\n {shouldShowConfirmationAlert && (\n <Alert\n status=\"success\"\n label={confirmationAlert.title}\n onDismiss={() => {\n setIsConfirmationAlertDismissed(true)\n }}\n >\n {confirmationAlert.content}\n </Alert>\n )}\n {shouldShowBanner && (\n <Banner status=\"warning\" title={getBannerTitle()}>\n <Flex flexDirection=\"column\" gap={16} alignItems=\"flex-start\">\n <div>{t('banner.description')}</div>\n {getBannerContent()}\n <Button variant=\"secondary\" onClick={onStartWireTransfer}>\n {t('cta.startWireTransfer')}\n </Button>\n </Flex>\n </Banner>\n )}\n </Flex>\n )\n}\n"],"names":["ConfirmWireDetailsBanner","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","confirmationAlert","onStartWireTransfer","useComponentDictionary","useI18n","t","useTranslation","Alert","Banner","Button","UnorderedList","Text","useComponentContext","dateFormatter","useDateFormatter","isConfirmationAlertDismissed","setIsConfirmationAlertDismissed","useState","currencyFormatter","useNumberFormatter","useEffect","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","request","wireInRequests","payrolls","wireInRequestsWithPayrolls","wireInRequest","payroll","p","payrollRange","shouldShowBanner","shouldShowConfirmationAlert","formatDeadline","deadline","date","time","match","dateString","getBannerTitle","isSingleWireInRequest","getBannerContent","paymentType","requestedAmount","index","jsxs","Flex"],"mappings":"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"}
|
package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.js
CHANGED
|
@@ -15,11 +15,11 @@ import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/
|
|
|
15
15
|
import { useComponentDictionary as z, useI18n as g } from "../../../../i18n/I18n.js";
|
|
16
16
|
import { Flex as p, FlexItem as f } from "../../../Common/Flex/Flex.js";
|
|
17
17
|
import { payrollWireEvents as I } from "../../../../shared/constants.js";
|
|
18
|
+
import { DatePickerField as V } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
|
|
18
19
|
import "react";
|
|
19
|
-
import { TextAreaField as
|
|
20
|
-
import { useDateFormatter as
|
|
21
|
-
import { NumberInputField as
|
|
22
|
-
import { DatePickerField as X } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
|
|
20
|
+
import { TextAreaField as J } from "../../../Common/Fields/TextAreaField/TextAreaField.js";
|
|
21
|
+
import { useDateFormatter as Q } from "../../../../hooks/useDateFormatter.js";
|
|
22
|
+
import { NumberInputField as X } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
|
|
23
23
|
import { TextInputField as Z } from "../../../Common/Fields/TextInputField/TextInputField.js";
|
|
24
24
|
const $ = r.object({
|
|
25
25
|
amountSent: r.number().positive(),
|
|
@@ -42,7 +42,7 @@ const oe = ({
|
|
|
42
42
|
modalContainerRef: y
|
|
43
43
|
}) => {
|
|
44
44
|
z("Payroll.ConfirmWireDetailsForm", i), g("Payroll.ConfirmWireDetailsForm");
|
|
45
|
-
const { onEvent: a, baseSubmitHandler: C } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R =
|
|
45
|
+
const { onEvent: a, baseSubmitHandler: C } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = Q(), { data: P } = B({
|
|
46
46
|
wireInRequestUuid: o
|
|
47
47
|
}), q = P.wireInRequest, { data: W } = G({
|
|
48
48
|
companyId: n,
|
|
@@ -84,7 +84,7 @@ const oe = ({
|
|
|
84
84
|
className: d.form,
|
|
85
85
|
children: /* @__PURE__ */ m(p, { flexDirection: "column", gap: 20, children: [
|
|
86
86
|
/* @__PURE__ */ e(
|
|
87
|
-
|
|
87
|
+
X,
|
|
88
88
|
{
|
|
89
89
|
name: "amountSent",
|
|
90
90
|
label: t("amountLabel"),
|
|
@@ -94,7 +94,7 @@ const oe = ({
|
|
|
94
94
|
}
|
|
95
95
|
),
|
|
96
96
|
/* @__PURE__ */ e(
|
|
97
|
-
|
|
97
|
+
V,
|
|
98
98
|
{
|
|
99
99
|
name: "dateSent",
|
|
100
100
|
label: t("dateLabel"),
|
|
@@ -114,7 +114,7 @@ const oe = ({
|
|
|
114
114
|
errorMessage: t("validations.bankName")
|
|
115
115
|
}
|
|
116
116
|
),
|
|
117
|
-
/* @__PURE__ */ e(
|
|
117
|
+
/* @__PURE__ */ e(J, { name: "additionalNotes", label: t("notesLabel"), rows: 3 })
|
|
118
118
|
] })
|
|
119
119
|
}
|
|
120
120
|
) })
|
|
@@ -5,7 +5,6 @@ import { useWireInRequestsListSuspense as _ } from "@gusto/embedded-api-v-2025-1
|
|
|
5
5
|
import { usePayrollsListSuspense as E } from "@gusto/embedded-api-v-2025-11-15/react-query/payrollsList";
|
|
6
6
|
import u from "./WireInstructions.module.scss.js";
|
|
7
7
|
import { BaseComponent as O } from "../../../Base/Base.js";
|
|
8
|
-
import "../../../Base/useBase.js";
|
|
9
8
|
import { Flex as p } from "../../../Common/Flex/Flex.js";
|
|
10
9
|
import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
11
10
|
import { useComponentDictionary as U, useI18n as L } from "../../../../i18n/I18n.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WireInstructions.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/payrollsList'\nimport type { ConfirmWireDetailsContextInterface } from '../ConfirmWireDetailsComponents'\nimport styles from './WireInstructions.module.scss'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useFlow } from '@/components/Flow/useFlow'\n\ninterface WireInstructionsProps extends BaseComponentInterface<'Payroll.WireInstructions'> {\n companyId: string\n wireInId?: string\n selectedWireInId?: string\n onEvent: OnEventType<EventType, unknown>\n modalContainerRef?: React.RefObject<HTMLDivElement | null>\n}\n\ninterface WireInstructionFieldProps {\n label: string\n value: string\n onCopy?: () => void\n copyAriaLabel?: string\n showCopiedMessage?: boolean\n copiedMessage?: string\n}\n\nfunction useWireInstructionsState(companyId: string, selectedWireInId?: string) {\n const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n companyUuid: companyId,\n })\n\n const { data: payrollsData } = usePayrollsListSuspense({\n companyId,\n processed: true,\n })\n\n const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n r => r.status === 'awaiting_funds',\n )\n\n const wireInInformation = activeWireInRequests.find(r => r.uuid === selectedWireInId)\n\n const payrolls = payrollsData.payrollList || []\n\n const activeWireInRequestsWithPayrolls = useMemo(\n () =>\n activeWireInRequests.map(wireInRequest => {\n const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n return {\n wireInRequest,\n payroll,\n paymentType: wireInRequest.paymentType,\n requestedAmount: wireInRequest.requestedAmount ?? '',\n }\n }),\n [activeWireInRequests, payrolls],\n )\n\n const selectedInstruction = useMemo(() => {\n if (!wireInInformation) return null\n\n const instruction = {\n id: wireInInformation.uuid || '',\n trackingCode: wireInInformation.uniqueTrackingCode || '',\n amount: parseFloat(wireInInformation.requestedAmount || '0'),\n bankName: wireInInformation.originationBank || '',\n bankAddress: wireInInformation.originationBankAddress || '',\n recipientName: wireInInformation.recipientName || '',\n recipientAddress: wireInInformation.recipientAddress || '',\n recipientAccountNumber: wireInInformation.recipientAccountNumber || '',\n recipientRoutingNumber: wireInInformation.recipientRoutingNumber || '',\n }\n return instruction\n }, [wireInInformation])\n\n return {\n selectedInstruction,\n activeWireInRequestsWithPayrolls,\n }\n}\n\nfunction WireInstructionField({ label, value }: WireInstructionFieldProps) {\n const { Text } = useComponentContext()\n\n return (\n <Flex flexDirection=\"column\" gap={8}>\n <Text className={styles.fieldLabel}>{label}</Text>\n <Text className={styles.fieldValue}>{value}</Text>\n </Flex>\n )\n}\n\nexport function WireInstructions(props: WireInstructionsProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nexport const Root = ({\n companyId,\n wireInId,\n selectedWireInId,\n dictionary,\n onEvent,\n modalContainerRef,\n}: WireInstructionsProps) => {\n useComponentDictionary('Payroll.WireInstructions', dictionary)\n useI18n('Payroll.WireInstructions')\n const { t } = useTranslation('Payroll.WireInstructions')\n const { Select, Card, Text, UnorderedList, Heading, Alert } = useComponentContext()\n const dateFormatter = useDateFormatter()\n const formatCurrency = useNumberFormatter('currency')\n\n const { selectedInstruction, activeWireInRequestsWithPayrolls } = useWireInstructionsState(\n companyId,\n selectedWireInId,\n )\n\n const shouldShowDropdown = !wireInId && activeWireInRequestsWithPayrolls.length > 1\n\n const handleWireInSelection = (updatedSelectedWireInId: string) => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT, {\n selectedWireInId: updatedSelectedWireInId,\n })\n }\n\n if (activeWireInRequestsWithPayrolls.length === 0 || (selectedWireInId && !selectedInstruction)) {\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <Text>{t('messages.noInstructions')}</Text>\n </Flex>\n )\n }\n\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <div>\n <Heading as=\"h2\" styledAs=\"h3\">\n {t('title')}\n </Heading>\n <Text className={styles.subtitle}>{t('subtitle')}</Text>\n </div>\n\n {shouldShowDropdown && (\n <Select\n isRequired\n portalContainer={modalContainerRef?.current || undefined}\n label={t('selectLabel')}\n value={selectedWireInId || ''}\n options={activeWireInRequestsWithPayrolls.map(\n ({ wireInRequest, payroll, paymentType, requestedAmount }) => {\n const payrollRange = payroll?.payPeriod\n ? dateFormatter.formatPayPeriodRange(\n payroll.payPeriod.startDate,\n payroll.payPeriod.endDate,\n )\n : ''\n\n return {\n label:\n paymentType === 'Payroll'\n ? payrollRange\n ? t('selectLabelPayroll', { payrollRange })\n : t('selectFallback')\n : paymentType === 'ContractorPaymentGroup'\n ? t('selectLabelContractorPaymentGroup', {\n requestedAmount: formatCurrency(Number(requestedAmount)),\n })\n : t('selectFallback'),\n value: wireInRequest.uuid || '',\n }\n },\n )}\n onChange={handleWireInSelection}\n />\n )}\n <Alert label={t('requirementsTitle')} disableScrollIntoView>\n <UnorderedList\n className={styles.requirementsList}\n items={[\n t('requirements.trackingCode'),\n t('requirements.amountMatch'),\n t('requirements.usBank'),\n t('requirements.authorized'),\n ]}\n />\n </Alert>\n {selectedInstruction && (\n <Flex flexDirection=\"column\" gap={16}>\n <Card className={styles.requirementsCard}>\n <WireInstructionField\n label={t('fields.trackingCode')}\n value={selectedInstruction.trackingCode}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.amount')}\n value={formatCurrency(selectedInstruction.amount)}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.bankName')}\n value={selectedInstruction.bankName}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.bankAddress')}\n value={selectedInstruction.bankAddress}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.recipientName')}\n value={selectedInstruction.recipientName}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.recipientAddress')}\n value={selectedInstruction.recipientAddress}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.accountNumber')}\n value={selectedInstruction.recipientAccountNumber}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.routingNumber')}\n value={selectedInstruction.recipientRoutingNumber}\n />\n </Card>\n </Flex>\n )}\n </Flex>\n )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n useI18n('Payroll.WireInstructions')\n const { t } = useTranslation('Payroll.WireInstructions')\n const { Button } = useComponentContext()\n const { companyId, selectedWireInId } = useFlow<ConfirmWireDetailsContextInterface>()\n const { selectedInstruction } = useWireInstructionsState(companyId, selectedWireInId)\n\n const handleConfirm = () => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE, {\n selectedWireInId,\n })\n }\n\n return (\n <div className={styles.footer}>\n <Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL)\n }}\n >\n {t('cta.close')}\n </Button>\n <Button variant=\"primary\" onClick={handleConfirm} isDisabled={!selectedInstruction}>\n {t('cta.confirm')}\n </Button>\n </div>\n )\n}\n\nWireInstructions.Footer = Footer\n"],"names":["useWireInstructionsState","companyId","selectedWireInId","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","r","wireInInformation","payrolls","activeWireInRequestsWithPayrolls","useMemo","wireInRequest","payroll","p","WireInstructionField","label","value","Text","useComponentContext","jsxs","Flex","jsx","styles","WireInstructions","props","BaseComponent","Root","wireInId","dictionary","onEvent","modalContainerRef","useComponentDictionary","useI18n","useTranslation","Select","Card","UnorderedList","Heading","Alert","dateFormatter","useDateFormatter","formatCurrency","useNumberFormatter","selectedInstruction","shouldShowDropdown","handleWireInSelection","updatedSelectedWireInId","payrollWireEvents","paymentType","requestedAmount","payrollRange","Footer","t","Button","useFlow","handleConfirm"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WireInstructions.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/payrollsList'\nimport type { ConfirmWireDetailsContextInterface } from '../ConfirmWireDetailsComponents'\nimport styles from './WireInstructions.module.scss'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useFlow } from '@/components/Flow/useFlow'\n\ninterface WireInstructionsProps extends BaseComponentInterface<'Payroll.WireInstructions'> {\n companyId: string\n wireInId?: string\n selectedWireInId?: string\n onEvent: OnEventType<EventType, unknown>\n modalContainerRef?: React.RefObject<HTMLDivElement | null>\n}\n\ninterface WireInstructionFieldProps {\n label: string\n value: string\n onCopy?: () => void\n copyAriaLabel?: string\n showCopiedMessage?: boolean\n copiedMessage?: string\n}\n\nfunction useWireInstructionsState(companyId: string, selectedWireInId?: string) {\n const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n companyUuid: companyId,\n })\n\n const { data: payrollsData } = usePayrollsListSuspense({\n companyId,\n processed: true,\n })\n\n const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n r => r.status === 'awaiting_funds',\n )\n\n const wireInInformation = activeWireInRequests.find(r => r.uuid === selectedWireInId)\n\n const payrolls = payrollsData.payrollList || []\n\n const activeWireInRequestsWithPayrolls = useMemo(\n () =>\n activeWireInRequests.map(wireInRequest => {\n const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n return {\n wireInRequest,\n payroll,\n paymentType: wireInRequest.paymentType,\n requestedAmount: wireInRequest.requestedAmount ?? '',\n }\n }),\n [activeWireInRequests, payrolls],\n )\n\n const selectedInstruction = useMemo(() => {\n if (!wireInInformation) return null\n\n const instruction = {\n id: wireInInformation.uuid || '',\n trackingCode: wireInInformation.uniqueTrackingCode || '',\n amount: parseFloat(wireInInformation.requestedAmount || '0'),\n bankName: wireInInformation.originationBank || '',\n bankAddress: wireInInformation.originationBankAddress || '',\n recipientName: wireInInformation.recipientName || '',\n recipientAddress: wireInInformation.recipientAddress || '',\n recipientAccountNumber: wireInInformation.recipientAccountNumber || '',\n recipientRoutingNumber: wireInInformation.recipientRoutingNumber || '',\n }\n return instruction\n }, [wireInInformation])\n\n return {\n selectedInstruction,\n activeWireInRequestsWithPayrolls,\n }\n}\n\nfunction WireInstructionField({ label, value }: WireInstructionFieldProps) {\n const { Text } = useComponentContext()\n\n return (\n <Flex flexDirection=\"column\" gap={8}>\n <Text className={styles.fieldLabel}>{label}</Text>\n <Text className={styles.fieldValue}>{value}</Text>\n </Flex>\n )\n}\n\nexport function WireInstructions(props: WireInstructionsProps) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nexport const Root = ({\n companyId,\n wireInId,\n selectedWireInId,\n dictionary,\n onEvent,\n modalContainerRef,\n}: WireInstructionsProps) => {\n useComponentDictionary('Payroll.WireInstructions', dictionary)\n useI18n('Payroll.WireInstructions')\n const { t } = useTranslation('Payroll.WireInstructions')\n const { Select, Card, Text, UnorderedList, Heading, Alert } = useComponentContext()\n const dateFormatter = useDateFormatter()\n const formatCurrency = useNumberFormatter('currency')\n\n const { selectedInstruction, activeWireInRequestsWithPayrolls } = useWireInstructionsState(\n companyId,\n selectedWireInId,\n )\n\n const shouldShowDropdown = !wireInId && activeWireInRequestsWithPayrolls.length > 1\n\n const handleWireInSelection = (updatedSelectedWireInId: string) => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT, {\n selectedWireInId: updatedSelectedWireInId,\n })\n }\n\n if (activeWireInRequestsWithPayrolls.length === 0 || (selectedWireInId && !selectedInstruction)) {\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <Text>{t('messages.noInstructions')}</Text>\n </Flex>\n )\n }\n\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <div>\n <Heading as=\"h2\" styledAs=\"h3\">\n {t('title')}\n </Heading>\n <Text className={styles.subtitle}>{t('subtitle')}</Text>\n </div>\n\n {shouldShowDropdown && (\n <Select\n isRequired\n portalContainer={modalContainerRef?.current || undefined}\n label={t('selectLabel')}\n value={selectedWireInId || ''}\n options={activeWireInRequestsWithPayrolls.map(\n ({ wireInRequest, payroll, paymentType, requestedAmount }) => {\n const payrollRange = payroll?.payPeriod\n ? dateFormatter.formatPayPeriodRange(\n payroll.payPeriod.startDate,\n payroll.payPeriod.endDate,\n )\n : ''\n\n return {\n label:\n paymentType === 'Payroll'\n ? payrollRange\n ? t('selectLabelPayroll', { payrollRange })\n : t('selectFallback')\n : paymentType === 'ContractorPaymentGroup'\n ? t('selectLabelContractorPaymentGroup', {\n requestedAmount: formatCurrency(Number(requestedAmount)),\n })\n : t('selectFallback'),\n value: wireInRequest.uuid || '',\n }\n },\n )}\n onChange={handleWireInSelection}\n />\n )}\n <Alert label={t('requirementsTitle')} disableScrollIntoView>\n <UnorderedList\n className={styles.requirementsList}\n items={[\n t('requirements.trackingCode'),\n t('requirements.amountMatch'),\n t('requirements.usBank'),\n t('requirements.authorized'),\n ]}\n />\n </Alert>\n {selectedInstruction && (\n <Flex flexDirection=\"column\" gap={16}>\n <Card className={styles.requirementsCard}>\n <WireInstructionField\n label={t('fields.trackingCode')}\n value={selectedInstruction.trackingCode}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.amount')}\n value={formatCurrency(selectedInstruction.amount)}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.bankName')}\n value={selectedInstruction.bankName}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.bankAddress')}\n value={selectedInstruction.bankAddress}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.recipientName')}\n value={selectedInstruction.recipientName}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.recipientAddress')}\n value={selectedInstruction.recipientAddress}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.accountNumber')}\n value={selectedInstruction.recipientAccountNumber}\n />\n\n <hr />\n\n <WireInstructionField\n label={t('fields.routingNumber')}\n value={selectedInstruction.recipientRoutingNumber}\n />\n </Card>\n </Flex>\n )}\n </Flex>\n )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n useI18n('Payroll.WireInstructions')\n const { t } = useTranslation('Payroll.WireInstructions')\n const { Button } = useComponentContext()\n const { companyId, selectedWireInId } = useFlow<ConfirmWireDetailsContextInterface>()\n const { selectedInstruction } = useWireInstructionsState(companyId, selectedWireInId)\n\n const handleConfirm = () => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE, {\n selectedWireInId,\n })\n }\n\n return (\n <div className={styles.footer}>\n <Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL)\n }}\n >\n {t('cta.close')}\n </Button>\n <Button variant=\"primary\" onClick={handleConfirm} isDisabled={!selectedInstruction}>\n {t('cta.confirm')}\n </Button>\n </div>\n )\n}\n\nWireInstructions.Footer = Footer\n"],"names":["useWireInstructionsState","companyId","selectedWireInId","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","r","wireInInformation","payrolls","activeWireInRequestsWithPayrolls","useMemo","wireInRequest","payroll","p","WireInstructionField","label","value","Text","useComponentContext","jsxs","Flex","jsx","styles","WireInstructions","props","BaseComponent","Root","wireInId","dictionary","onEvent","modalContainerRef","useComponentDictionary","useI18n","useTranslation","Select","Card","UnorderedList","Heading","Alert","dateFormatter","useDateFormatter","formatCurrency","useNumberFormatter","selectedInstruction","shouldShowDropdown","handleWireInSelection","updatedSelectedWireInId","payrollWireEvents","paymentType","requestedAmount","payrollRange","Footer","t","Button","useFlow","handleConfirm"],"mappings":"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"}
|
|
@@ -1,38 +1,29 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useRef as R, useState as
|
|
1
|
+
import { jsx as e, jsxs as a, Fragment as I } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as R, useState as n, useEffect as S } from "react";
|
|
3
3
|
import { useForm as U, FormProvider as j } from "react-hook-form";
|
|
4
4
|
import { useTranslation as k } from "react-i18next";
|
|
5
5
|
import { z as P } from "zod";
|
|
6
6
|
import { zodResolver as z } from "@hookform/resolvers/zod";
|
|
7
|
-
import
|
|
7
|
+
import l from "./GrossUpModal.module.scss.js";
|
|
8
8
|
import { Flex as B } from "../../Common/Flex/Flex.js";
|
|
9
9
|
import { ActionsLayout as D } from "../../Common/ActionsLayout/ActionsLayout.js";
|
|
10
10
|
import { useComponentContext as H } from "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
11
|
-
import "react-error-boundary";
|
|
12
|
-
import "@tanstack/react-query";
|
|
13
11
|
import { useBase as L } from "../../Base/useBase.js";
|
|
14
|
-
import "
|
|
15
|
-
import "
|
|
16
|
-
import "@gusto/embedded-api-v-2025-11-15/models/errors/sdkvalidationerror";
|
|
17
|
-
import "@gusto/embedded-api-v-2025-11-15/models/errors/unprocessableentityerror";
|
|
18
|
-
import "@gusto/embedded-api-v-2025-11-15/models/errors/httpclienterrors";
|
|
19
|
-
import { formatNumberAsCurrency as V } from "../../../helpers/formattedStrings.js";
|
|
20
|
-
import "../../../shared/constants.js";
|
|
21
|
-
import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
|
|
22
|
-
import { useI18n as E } from "../../../i18n/I18n.js";
|
|
12
|
+
import { useI18n as V } from "../../../i18n/I18n.js";
|
|
13
|
+
import { formatNumberAsCurrency as E } from "../../../helpers/formattedStrings.js";
|
|
23
14
|
import { NumberInputField as T } from "../../Common/Fields/NumberInputField/NumberInputField.js";
|
|
24
15
|
const q = P.object({
|
|
25
16
|
netPay: P.number().positive()
|
|
26
17
|
});
|
|
27
|
-
function
|
|
28
|
-
|
|
29
|
-
const { t: r } = k("Payroll.GrossUpModal"), { Modal: M, Heading: u, Text: p, Button: i, Alert: f } = H(), { baseSubmitHandler: y } = L(), N = R(null), [
|
|
18
|
+
function se({ isOpen: o, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
|
|
19
|
+
V("Payroll.GrossUpModal");
|
|
20
|
+
const { t: r } = k("Payroll.GrossUpModal"), { Modal: M, Heading: u, Text: p, Button: i, Alert: f } = H(), { baseSubmitHandler: y } = L(), N = R(null), [t, c] = n(null), [h, m] = n(null), [g, b] = n(!1), [x, v] = n(!1), s = U({
|
|
30
21
|
resolver: z(q),
|
|
31
22
|
defaultValues: { netPay: 0 }
|
|
32
23
|
});
|
|
33
24
|
S(() => {
|
|
34
|
-
|
|
35
|
-
}, [
|
|
25
|
+
o || (s.reset({ netPay: 0 }), c(null), m(null));
|
|
26
|
+
}, [o, s.reset]);
|
|
36
27
|
const F = async (G) => {
|
|
37
28
|
m(null), c(null), b(!0), await y(null, async () => {
|
|
38
29
|
try {
|
|
@@ -46,19 +37,19 @@ function fe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
|
|
|
46
37
|
return /* @__PURE__ */ e(
|
|
47
38
|
M,
|
|
48
39
|
{
|
|
49
|
-
isOpen:
|
|
40
|
+
isOpen: o,
|
|
50
41
|
onClose: d,
|
|
51
42
|
containerRef: N,
|
|
52
|
-
footer: /* @__PURE__ */
|
|
43
|
+
footer: /* @__PURE__ */ a(D, { children: [
|
|
53
44
|
/* @__PURE__ */ e(
|
|
54
45
|
i,
|
|
55
46
|
{
|
|
56
47
|
variant: "primary",
|
|
57
|
-
isDisabled: !
|
|
48
|
+
isDisabled: !t,
|
|
58
49
|
onClick: async () => {
|
|
59
|
-
|
|
50
|
+
t && (v(!0), await y(null, async () => {
|
|
60
51
|
try {
|
|
61
|
-
await A(
|
|
52
|
+
await A(t);
|
|
62
53
|
} finally {
|
|
63
54
|
v(!1);
|
|
64
55
|
}
|
|
@@ -70,15 +61,15 @@ function fe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
|
|
|
70
61
|
),
|
|
71
62
|
/* @__PURE__ */ e(i, { variant: "secondary", onClick: d, children: r("cancelCta") })
|
|
72
63
|
] }),
|
|
73
|
-
children: /* @__PURE__ */
|
|
74
|
-
/* @__PURE__ */
|
|
64
|
+
children: /* @__PURE__ */ a(j, { ...s, children: [
|
|
65
|
+
/* @__PURE__ */ a("div", { className: l.header, children: [
|
|
75
66
|
/* @__PURE__ */ e(u, { as: "h2", styledAs: "h3", children: r("title") }),
|
|
76
67
|
/* @__PURE__ */ e(p, { variant: "supporting", as: "p", children: r("description") })
|
|
77
68
|
] }),
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
h && /* @__PURE__ */ e("div", { className:
|
|
80
|
-
/* @__PURE__ */ e("div", { className:
|
|
81
|
-
/* @__PURE__ */
|
|
69
|
+
/* @__PURE__ */ a("div", { className: l.content, children: [
|
|
70
|
+
h && /* @__PURE__ */ e("div", { className: l.alert, children: /* @__PURE__ */ e(f, { label: h, status: "error", disableScrollIntoView: !0 }) }),
|
|
71
|
+
/* @__PURE__ */ e("div", { className: l.alert, children: /* @__PURE__ */ e(f, { label: r("warning"), status: "warning", disableScrollIntoView: !0 }) }),
|
|
72
|
+
/* @__PURE__ */ a(B, { flexDirection: "row", gap: 8, children: [
|
|
82
73
|
/* @__PURE__ */ e(
|
|
83
74
|
T,
|
|
84
75
|
{
|
|
@@ -94,16 +85,16 @@ function fe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
|
|
|
94
85
|
i,
|
|
95
86
|
{
|
|
96
87
|
variant: "secondary",
|
|
97
|
-
className:
|
|
88
|
+
className: l.calculateButton,
|
|
98
89
|
isDisabled: g,
|
|
99
90
|
onClick: s.handleSubmit(F),
|
|
100
91
|
children: r(g ? "calculatingCta" : "calculateCta")
|
|
101
92
|
}
|
|
102
93
|
)
|
|
103
94
|
] }),
|
|
104
|
-
|
|
95
|
+
t && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ a("div", { className: l.result, children: [
|
|
105
96
|
/* @__PURE__ */ e(p, { size: "sm", variant: "supporting", weight: "semibold", children: r("grossPayResult") }),
|
|
106
|
-
/* @__PURE__ */ e(u, { as: "h3", children:
|
|
97
|
+
/* @__PURE__ */ e(u, { as: "h3", children: E(parseFloat(t)) })
|
|
107
98
|
] }) })
|
|
108
99
|
] })
|
|
109
100
|
] })
|
|
@@ -111,6 +102,6 @@ function fe({ isOpen: n, onCalculateGrossUp: w, onApply: A, onCancel: d }) {
|
|
|
111
102
|
);
|
|
112
103
|
}
|
|
113
104
|
export {
|
|
114
|
-
|
|
105
|
+
se as GrossUpModal
|
|
115
106
|
};
|
|
116
107
|
//# sourceMappingURL=GrossUpModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n useI18n('Payroll.GrossUpModal')\n const { t } = useTranslation('Payroll.GrossUpModal')\n const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n const { baseSubmitHandler } = useBase()\n const modalContainerRef = useRef<HTMLDivElement>(null)\n\n const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n const [errorMessage, setErrorMessage] = useState<string | null>(null)\n const [isCalculating, setIsCalculating] = useState(false)\n const [isApplying, setIsApplying] = useState(false)\n\n const formHandlers = useForm<GrossUpFormValues>({\n resolver: zodResolver(GrossUpFormSchema),\n defaultValues: { netPay: 0 },\n })\n\n useEffect(() => {\n if (!isOpen) {\n formHandlers.reset({ netPay: 0 })\n setCalculatedGrossUp(null)\n setErrorMessage(null)\n }\n }, [isOpen, formHandlers.reset])\n\n const handleCalculate = async (data: GrossUpFormValues) => {\n setErrorMessage(null)\n setCalculatedGrossUp(null)\n setIsCalculating(true)\n\n await baseSubmitHandler(null, async () => {\n try {\n const result = await onCalculateGrossUp(data.netPay)\n\n if (result) {\n setCalculatedGrossUp(result)\n } else {\n setErrorMessage(t('errorMessage'))\n }\n } finally {\n setIsCalculating(false)\n }\n })\n }\n\n const handleApply = async () => {\n if (calculatedGrossUp) {\n setIsApplying(true)\n await baseSubmitHandler(null, async () => {\n try {\n await onApply(calculatedGrossUp)\n } finally {\n setIsApplying(false)\n }\n })\n }\n }\n\n return (\n <Modal\n isOpen={isOpen}\n onClose={onCancel}\n containerRef={modalContainerRef}\n footer={\n <ActionsLayout>\n <Button\n variant=\"primary\"\n isDisabled={!calculatedGrossUp}\n onClick={handleApply}\n isLoading={isApplying}\n >\n {t('applyCta')}\n </Button>\n <Button variant=\"secondary\" onClick={onCancel}>\n {t('cancelCta')}\n </Button>\n </ActionsLayout>\n }\n >\n <FormProvider {...formHandlers}>\n <div className={styles.header}>\n <Heading as=\"h2\" styledAs=\"h3\">\n {t('title')}\n </Heading>\n <Text variant=\"supporting\" as=\"p\">\n {t('description')}\n </Text>\n </div>\n\n <div className={styles.content}>\n {errorMessage && (\n <div className={styles.alert}>\n <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n </div>\n )}\n\n <div className={styles.alert}>\n <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n </div>\n\n <Flex flexDirection=\"row\" gap={8}>\n <NumberInputField\n name=\"netPay\"\n label={t('netPayLabel')}\n format=\"currency\"\n errorMessage={t('validations.netPay')}\n min={0}\n isRequired\n />\n <Button\n variant=\"secondary\"\n className={styles.calculateButton}\n isDisabled={isCalculating}\n onClick={formHandlers.handleSubmit(handleCalculate)}\n >\n {isCalculating ? t('calculatingCta') : t('calculateCta')}\n </Button>\n </Flex>\n\n {calculatedGrossUp && (\n <>\n <div className={styles.result}>\n <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n {t('grossPayResult')}\n </Text>\n <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n </div>\n </>\n )}\n </div>\n </FormProvider>\n </Modal>\n )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField","Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n useI18n('Payroll.GrossUpModal')\n const { t } = useTranslation('Payroll.GrossUpModal')\n const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n const { baseSubmitHandler } = useBase()\n const modalContainerRef = useRef<HTMLDivElement>(null)\n\n const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n const [errorMessage, setErrorMessage] = useState<string | null>(null)\n const [isCalculating, setIsCalculating] = useState(false)\n const [isApplying, setIsApplying] = useState(false)\n\n const formHandlers = useForm<GrossUpFormValues>({\n resolver: zodResolver(GrossUpFormSchema),\n defaultValues: { netPay: 0 },\n })\n\n useEffect(() => {\n if (!isOpen) {\n formHandlers.reset({ netPay: 0 })\n setCalculatedGrossUp(null)\n setErrorMessage(null)\n }\n }, [isOpen, formHandlers.reset])\n\n const handleCalculate = async (data: GrossUpFormValues) => {\n setErrorMessage(null)\n setCalculatedGrossUp(null)\n setIsCalculating(true)\n\n await baseSubmitHandler(null, async () => {\n try {\n const result = await onCalculateGrossUp(data.netPay)\n\n if (result) {\n setCalculatedGrossUp(result)\n } else {\n setErrorMessage(t('errorMessage'))\n }\n } finally {\n setIsCalculating(false)\n }\n })\n }\n\n const handleApply = async () => {\n if (calculatedGrossUp) {\n setIsApplying(true)\n await baseSubmitHandler(null, async () => {\n try {\n await onApply(calculatedGrossUp)\n } finally {\n setIsApplying(false)\n }\n })\n }\n }\n\n return (\n <Modal\n isOpen={isOpen}\n onClose={onCancel}\n containerRef={modalContainerRef}\n footer={\n <ActionsLayout>\n <Button\n variant=\"primary\"\n isDisabled={!calculatedGrossUp}\n onClick={handleApply}\n isLoading={isApplying}\n >\n {t('applyCta')}\n </Button>\n <Button variant=\"secondary\" onClick={onCancel}>\n {t('cancelCta')}\n </Button>\n </ActionsLayout>\n }\n >\n <FormProvider {...formHandlers}>\n <div className={styles.header}>\n <Heading as=\"h2\" styledAs=\"h3\">\n {t('title')}\n </Heading>\n <Text variant=\"supporting\" as=\"p\">\n {t('description')}\n </Text>\n </div>\n\n <div className={styles.content}>\n {errorMessage && (\n <div className={styles.alert}>\n <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n </div>\n )}\n\n <div className={styles.alert}>\n <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n </div>\n\n <Flex flexDirection=\"row\" gap={8}>\n <NumberInputField\n name=\"netPay\"\n label={t('netPayLabel')}\n format=\"currency\"\n errorMessage={t('validations.netPay')}\n min={0}\n isRequired\n />\n <Button\n variant=\"secondary\"\n className={styles.calculateButton}\n isDisabled={isCalculating}\n onClick={formHandlers.handleSubmit(handleCalculate)}\n >\n {isCalculating ? t('calculatingCta') : t('calculateCta')}\n </Button>\n </Flex>\n\n {calculatedGrossUp && (\n <>\n <div className={styles.result}>\n <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n {t('grossPayResult')}\n </Text>\n <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n </div>\n </>\n )}\n </div>\n </FormProvider>\n </Modal>\n )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField","Fragment"],"mappings":"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"}
|
package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js
CHANGED
|
@@ -2,10 +2,10 @@ import { jsxs as i, jsx as r } from "react/jsx-runtime";
|
|
|
2
2
|
import { useTranslation as l } from "react-i18next";
|
|
3
3
|
import a from "./OffCyclePayPeriodDateFormPresentation.module.scss.js";
|
|
4
4
|
import { useI18n as o } from "../../../i18n/I18n.js";
|
|
5
|
+
import { DatePickerField as t } from "../../Common/Fields/DatePickerField/DatePickerField.js";
|
|
5
6
|
import "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
6
7
|
import "react";
|
|
7
8
|
import { CheckboxField as c } from "../../Common/Fields/CheckboxField/CheckboxField.js";
|
|
8
|
-
import { DatePickerField as t } from "../../Common/Fields/DatePickerField/DatePickerField.js";
|
|
9
9
|
function h() {
|
|
10
10
|
o("Payroll.OffCyclePayPeriodDateForm");
|
|
11
11
|
const { t: e } = l("Payroll.OffCyclePayPeriodDateForm");
|
|
@@ -15,10 +15,9 @@ import { useDataView as H } from "../../../Common/DataView/useDataView.js";
|
|
|
15
15
|
import { useComponentDictionary as Q, useI18n as Y } from "../../../../i18n/I18n.js";
|
|
16
16
|
import { RecoveryCases as z } from "../../RecoveryCases/RecoveryCases.js";
|
|
17
17
|
import { BaseComponent as J } from "../../../Base/Base.js";
|
|
18
|
-
import "../../../Base/useBase.js";
|
|
19
18
|
import { recoveryCasesEvents as W, informationRequestEvents as X } from "../../../../shared/constants.js";
|
|
20
19
|
import { InformationRequestsFlow as Z } from "../../../InformationRequests/InformationRequests.js";
|
|
21
|
-
function
|
|
20
|
+
function De(s) {
|
|
22
21
|
return /* @__PURE__ */ o(J, { ...s, children: /* @__PURE__ */ o(ee, { ...s, children: s.children }) });
|
|
23
22
|
}
|
|
24
23
|
function ee({ className: s, companyId: n, dictionary: B, onEvent: u }) {
|
|
@@ -103,6 +102,6 @@ function ee({ className: s, companyId: n, dictionary: B, onEvent: u }) {
|
|
|
103
102
|
] }) }) : /* @__PURE__ */ o("div", { className: k(v.root, s), children: /* @__PURE__ */ o(i, { children: r("noBlockersMessage") }) });
|
|
104
103
|
}
|
|
105
104
|
export {
|
|
106
|
-
|
|
105
|
+
De as PayrollBlockerList
|
|
107
106
|
};
|
|
108
107
|
//# sourceMappingURL=PayrollBlockerList.js.map
|