@gusto/embedded-react-sdk 0.20.0 → 0.21.0

package/dist/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.js.map

@@ -1 +1 @@
-{"version":3,"file":"WireInstructions.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\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 { payrollWireEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\ninterface WireInstructionsProps extends BaseComponentInterface<'Payroll.WireInstructions'> {\n  companyId: string\n  wireInId?: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function WireInstructions(props: WireInstructionsProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ companyId, wireInId, dictionary, onEvent }: WireInstructionsProps) => {\n  useComponentDictionary('Payroll.WireInstructions', dictionary)\n  useI18n('Payroll.WireInstructions')\n  const { t } = useTranslation('Payroll.WireInstructions')\n  const { Button } = useComponentContext()\n\n  const handleConfirm = () => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE)\n  }\n\n  const handleClose = () => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL)\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <h2>{t('title')}</h2>\n\n      {/* TODO: Wire instructions content will be implemented in subsequent ticket */}\n\n      <Flex gap={12} justifyContent=\"flex-end\">\n        <Button variant=\"secondary\" onClick={handleClose}>\n          {t('cta.close')}\n        </Button>\n        <Button variant=\"primary\" onClick={handleConfirm}>\n          {t('cta.confirm')}\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["WireInstructions","props","jsx","BaseComponent","Root","companyId","wireInId","dictionary","onEvent","useComponentDictionary","useI18n","t","useTranslation","Button","useComponentContext","handleConfirm","payrollWireEvents","handleClose","jsxs","Flex"],"mappings":";;;;;;;;AAcO,SAASA,EAAiBC,GAA8B;AAC7D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,YAAAC,GAAY,SAAAC,QAAqC;AACpF,EAAAC,EAAuB,4BAA4BF,CAAU,GAC7DG,EAAQ,0BAA0B;AAClC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,0BAA0B,GACjD,EAAE,QAAAC,EAAA,IAAWC,EAAA,GAEbC,IAAgB,MAAM;AAC1B,IAAAP,EAAQQ,EAAkB,8BAA8B;AAAA,EAC1D,GAEMC,IAAc,MAAM;AACxB,IAAAT,EAAQQ,EAAkB,gCAAgC;AAAA,EAC5D;AAEA,SACE,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAjB,EAAC,MAAA,EAAI,UAAAS,EAAE,OAAO,EAAA,CAAE;AAAA,IAIhB,gBAAAO,EAACC,GAAA,EAAK,KAAK,IAAI,gBAAe,YAC5B,UAAA;AAAA,MAAA,gBAAAjB,EAACW,KAAO,SAAQ,aAAY,SAASI,GAClC,UAAAN,EAAE,WAAW,GAChB;AAAA,MACA,gBAAAT,EAACW,KAAO,SAAQ,WAAU,SAASE,GAChC,UAAAJ,EAAE,aAAa,EAAA,CAClB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"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/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/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        }\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 = (selectedId: string) => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT, {\n      selectedId,\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(({ wireInRequest, payroll }) => ({\n            label: payroll?.payPeriod\n              ? dateFormatter.formatPayPeriodRange(\n                  payroll.payPeriod.startDate,\n                  payroll.payPeriod.endDate,\n                )\n              : t('selectFallback'),\n            value: wireInRequest.uuid || '',\n          }))}\n          onChange={handleWireInSelection}\n        />\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\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, wireInId } = useFlow<ConfirmWireDetailsContextInterface>()\n  const { selectedInstruction } = useWireInstructionsState(companyId, wireInId)\n\n  const handleConfirm = () => {\n    const selectedId = wireInId || selectedInstruction?.id\n    onEvent(payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE, {\n      selectedId,\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","selectedId","payrollWireEvents","Footer","t","Button","useFlow","handleConfirm"],"mappings":"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"}

package/dist/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.module.scss.js

@@ -0,0 +1,18 @@
+const e = "_subtitle_xw5zx_5", t = "_fieldLabel_xw5zx_10", s = "_fieldValue_xw5zx_17", r = "_requirementsCard_xw5zx_23", i = "_requirementsList_xw5zx_45", _ = "_footer_xw5zx_65", l = {
+  subtitle: e,
+  fieldLabel: t,
+  fieldValue: s,
+  requirementsCard: r,
+  requirementsList: i,
+  footer: _
+};
+export {
+  l as default,
+  t as fieldLabel,
+  s as fieldValue,
+  _ as footer,
+  r as requirementsCard,
+  i as requirementsList,
+  e as subtitle
+};
+//# sourceMappingURL=WireInstructions.module.scss.js.map

package/dist/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WireInstructions.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.d.ts

@@ -1,8 +1,16 @@
+import { ConfirmationAlert } from './types';
 import { payrollWireEvents } from '../../../shared/constants';
 export type EventPayloads = {
+    [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT]: {
+        selectedId: string;
+    };
     [payrollWireEvents.PAYROLL_WIRE_START_TRANSFER]: undefined;
-    [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE]: undefined;
-    [payrollWireEvents.PAYROLL_WIRE_FORM_DONE]: undefined;
+    [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE]: {
+        selectedId: string;
+    };
+    [payrollWireEvents.PAYROLL_WIRE_FORM_DONE]: {
+        confirmationAlert: ConfirmationAlert;
+    };
     [payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL]: undefined;
 };
 export declare const confirmWireDetailsMachine: {

package/dist/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.js

@@ -1,32 +1,43 @@
-import { state as e, transition as r, reduce as o } from "robot3";
-import { ConfirmWireDetailsFormContextual as i, WireInstructionsContextual as R } from "./ConfirmWireDetailsComponents.js";
-import { payrollWireEvents as t } from "../../../shared/constants.js";
-const s = {
-  banner: e(
-    r(
-      t.PAYROLL_WIRE_START_TRANSFER,
+import { state as i, transition as e, reduce as o } from "robot3";
+import { ConfirmWireDetailsFormContextual as a, WireInstructionsContextual as c } from "./ConfirmWireDetailsComponents.js";
+import { payrollWireEvents as r } from "../../../shared/constants.js";
+const m = {
+  banner: i(
+    e(
+      r.PAYROLL_WIRE_START_TRANSFER,
       "wireInstructions",
       o(
         (n) => ({
           ...n,
-          component: R
+          component: c
         })
       )
     )
   ),
-  wireInstructions: e(
-    r(
-      t.PAYROLL_WIRE_INSTRUCTIONS_DONE,
+  wireInstructions: i(
+    e(
+      r.PAYROLL_WIRE_INSTRUCTIONS_SELECT,
+      "wireInstructions",
+      o(
+        (n, t) => ({
+          ...n,
+          selectedWireInId: t.payload.selectedId
+        })
+      )
+    ),
+    e(
+      r.PAYROLL_WIRE_INSTRUCTIONS_DONE,
       "confirmForm",
       o(
-        (n) => ({
+        (n, t) => ({
           ...n,
-          component: i
+          component: a,
+          selectedWireInId: t.payload.selectedId
         })
       )
     ),
-    r(
-      t.PAYROLL_WIRE_FORM_CANCEL,
+    e(
+      r.PAYROLL_WIRE_FORM_CANCEL,
       "banner",
       o(
         (n) => ({
@@ -35,29 +46,32 @@ const s = {
       )
     )
   ),
-  confirmForm: e(
-    r(
-      t.PAYROLL_WIRE_FORM_DONE,
+  confirmForm: i(
+    e(
+      r.PAYROLL_WIRE_FORM_DONE,
       "banner",
       o(
-        (n) => ({
-          ...n
+        (n, t) => ({
+          ...n,
+          component: null,
+          confirmationAlert: t.payload.confirmationAlert
         })
       )
     ),
-    r(
-      t.PAYROLL_WIRE_FORM_CANCEL,
+    e(
+      r.PAYROLL_WIRE_FORM_CANCEL,
       "banner",
       o(
         (n) => ({
-          ...n
+          ...n,
+          component: null
         })
       )
     )
   ),
-  final: e()
+  final: i()
 };
 export {
-  s as confirmWireDetailsMachine
+  m as confirmWireDetailsMachine
 };
 //# sourceMappingURL=confirmWireDetailsStateMachine.js.map

package/dist/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmWireDetailsStateMachine.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.tsx"],"sourcesContent":["import { state, transition, reduce } from 'robot3'\nimport type { ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport {\n  WireInstructionsContextual,\n  ConfirmWireDetailsFormContextual,\n} from './ConfirmWireDetailsComponents'\nimport { payrollWireEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\n\nexport type EventPayloads = {\n  [payrollWireEvents.PAYROLL_WIRE_START_TRANSFER]: undefined\n  [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE]: undefined\n  [payrollWireEvents.PAYROLL_WIRE_FORM_DONE]: undefined\n  [payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL]: undefined\n}\n\nexport const confirmWireDetailsMachine = {\n  banner: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_START_TRANSFER,\n      'wireInstructions',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: WireInstructionsContextual,\n        }),\n      ),\n    ),\n  ),\n  wireInstructions: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE,\n      'confirmForm',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: ConfirmWireDetailsFormContextual,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n        }),\n      ),\n    ),\n  ),\n  confirmForm: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_DONE,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n        }),\n      ),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["confirmWireDetailsMachine","state","transition","payrollWireEvents","reduce","ctx","WireInstructionsContextual","ConfirmWireDetailsFormContextual"],"mappings":";;;AAgBO,MAAMA,IAA4B;AAAA,EACvC,QAAQC;AAAA,IACNC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAWC;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,kBAAkBL;AAAA,IAChBC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAWE;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,QAAA;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA,EAEF,aAAaJ;AAAA,IACXC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,QAAA;AAAA,MACL;AAAA,IACF;AAAA,IAEFH;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,QAAA;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA,EAEF,OAAOJ,EAAA;AACT;"}
+{"version":3,"file":"confirmWireDetailsStateMachine.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.tsx"],"sourcesContent":["import { state, transition, reduce } from 'robot3'\nimport type { ConfirmationAlert } from './types'\nimport type { ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport {\n  WireInstructionsContextual,\n  ConfirmWireDetailsFormContextual,\n} from './ConfirmWireDetailsComponents'\nimport { payrollWireEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\nexport type EventPayloads = {\n  [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT]: {\n    selectedId: string\n  }\n  [payrollWireEvents.PAYROLL_WIRE_START_TRANSFER]: undefined\n  [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE]: {\n    selectedId: string\n  }\n  [payrollWireEvents.PAYROLL_WIRE_FORM_DONE]: {\n    confirmationAlert: ConfirmationAlert\n  }\n  [payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL]: undefined\n}\n\nexport const confirmWireDetailsMachine = {\n  banner: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_START_TRANSFER,\n      'wireInstructions',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: WireInstructionsContextual,\n        }),\n      ),\n    ),\n  ),\n  wireInstructions: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT,\n      'wireInstructions',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT\n          >,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          selectedWireInId: ev.payload.selectedId,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE,\n      'confirmForm',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE\n          >,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: ConfirmWireDetailsFormContextual,\n          selectedWireInId: ev.payload.selectedId,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n        }),\n      ),\n    ),\n  ),\n  confirmForm: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_DONE,\n      'banner',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<EventPayloads, typeof payrollWireEvents.PAYROLL_WIRE_FORM_DONE>,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: null,\n          confirmationAlert: ev.payload.confirmationAlert,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: null,\n        }),\n      ),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["confirmWireDetailsMachine","state","transition","payrollWireEvents","reduce","ctx","WireInstructionsContextual","ev","ConfirmWireDetailsFormContextual"],"mappings":";;;AAwBO,MAAMA,IAA4B;AAAA,EACvC,QAAQC;AAAA,IACNC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAWC;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,kBAAkBL;AAAA,IAChBC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OAIwC;AAAA,UACxC,GAAGF;AAAA,UACH,kBAAkBE,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OAIwC;AAAA,UACxC,GAAGF;AAAA,UACH,WAAWG;AAAA,UACX,kBAAkBD,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,QAAA;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA,EAEF,aAAaJ;AAAA,IACXC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OACwC;AAAA,UACxC,GAAGF;AAAA,UACH,WAAW;AAAA,UACX,mBAAmBE,EAAG,QAAQ;AAAA,QAAA;AAAA,MAChC;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,OAAOJ,EAAA;AACT;"}

package/dist/components/Payroll/ConfirmWireDetails/index.d.ts

@@ -1,3 +1,4 @@
 import "./types/i18next.d.ts"
 export { ConfirmWireDetails } from './ConfirmWireDetails';
 export type { ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents';
+export type { ConfirmationAlert } from './types';

package/dist/components/Payroll/ConfirmWireDetails/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ConfirmationAlert {
+    title: string;
+    content?: ReactNode;
+}

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js

@@ -1,11 +1,13 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as m } from "react/jsx-runtime";
 import { useTranslation as P } from "react-i18next";
 import { getBlockerTranslationKeys as v } from "../payrollHelpers.js";
 import { useComponentContext as A } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Flex as m } from "../../../Common/Flex/Flex.js";
+import { Flex as d } from "../../../Common/Flex/Flex.js";
 import "classnames";
+import "../../../../shared/constants.js";
+import "react";
 import { useI18n as C } from "../../../../i18n/I18n.js";
-function z({
+function H({
   blockers: o,
   onMultipleViewClick: i,
   multipleViewLabel: h,
@@ -29,7 +31,7 @@ function z({
     };
   }), t = p[0];
   if (!y && t)
-    return /* @__PURE__ */ l(a, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 8, children: [
+    return /* @__PURE__ */ l(a, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 8, children: [
       /* @__PURE__ */ l(c, { children: t.description }),
       t.helpText && t.helpText !== t.description && /* @__PURE__ */ l(c, { variant: "supporting", size: "sm", children: t.helpText })
     ] }) });
@@ -40,7 +42,7 @@ function z({
       status: "error",
       label: e("multipleIssuesTitle", { count: o.length }),
       className: s,
-      children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 16, children: [
+      children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 16, children: [
         /* @__PURE__ */ l(x, { items: g }),
         i && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(f, { variant: "secondary", onClick: i, title: u, children: u }) })
       ] })
@@ -48,6 +50,6 @@ function z({
   );
 }
 export {
-  z as PayrollBlockerAlerts
+  H as PayrollBlockerAlerts
 };
 //# sourceMappingURL=PayrollBlockerAlerts.js.map

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type ApiPayrollBlocker, getBlockerTranslationKeys } from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blocker.key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase()),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","l","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"mappings":";;;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAKA,EAAE,YAAA,CAAa;AAAA,IAAA,CACnF,GACKC,IAAcd,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKe,IAAWf,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,oBAAoB,GAAG;AAEzF,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAE;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBR,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBS;AAC1B,WACE,gBAAAC,EAACf,GAAA,EAAM,QAAO,SAAQ,OAAOc,EAAc,OAAO,WAAAlB,GAChD,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACb,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCY,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACb,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMgB,IAAYZ,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDY,IAAuBxB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAiB;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACZ,GAAA,EAAc,OAAOe,EAAA,CAAW;AAAA,QAChCxB,KACC,gBAAAqB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACd,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOyB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type ApiPayrollBlocker, getBlockerTranslationKeys } from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blocker.key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase()),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","l","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"mappings":";;;;;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAKA,EAAE,YAAA,CAAa;AAAA,IAAA,CACnF,GACKC,IAAcd,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKe,IAAWf,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,oBAAoB,GAAG;AAEzF,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAE;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBR,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBS;AAC1B,WACE,gBAAAC,EAACf,GAAA,EAAM,QAAO,SAAQ,OAAOc,EAAc,OAAO,WAAAlB,GAChD,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACb,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCY,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACb,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMgB,IAAYZ,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDY,IAAuBxB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAiB;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACZ,GAAA,EAAc,OAAOe,EAAA,CAAW;AAAA,QAChCxB,KACC,gBAAAqB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACd,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOyB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerList.js

@@ -1,15 +1,17 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useTranslation as f } from "react-i18next";
-import p from "classnames";
+import { useTranslation as p } from "react-i18next";
+import f from "classnames";
 import u from "./PayrollBlockerList.module.scss.js";
 import { useComponentContext as h } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { FlexItem as x, Flex as o } from "../../../Common/Flex/Flex.js";
+import "../../../../shared/constants.js";
+import "react";
 import { DataView as y } from "../../../Common/DataView/DataView.js";
 import { useDataView as g } from "../../../Common/DataView/useDataView.js";
 import { useI18n as b } from "../../../../i18n/I18n.js";
-function v({ blockers: i, className: s }) {
+function V({ blockers: i, className: s }) {
   b("Payroll.PayrollBlocker");
-  const { t: l } = f("Payroll.PayrollBlocker"), { Button: c, Text: n, Heading: m } = h(), d = g({
+  const { t: l } = p("Payroll.PayrollBlocker"), { Button: c, Text: n, Heading: m } = h(), d = g({
     data: i,
     columns: [
       {
@@ -28,12 +30,12 @@ function v({ blockers: i, className: s }) {
       }
     ]
   });
-  return i.length === 0 ? null : /* @__PURE__ */ e("div", { className: p(u.root, s), children: /* @__PURE__ */ a(o, { flexDirection: "column", gap: 24, children: [
+  return i.length === 0 ? null : /* @__PURE__ */ e("div", { className: f(u.root, s), children: /* @__PURE__ */ a(o, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ e(m, { as: "h2", styledAs: "h4", children: l("blockersListTitle") }),
     /* @__PURE__ */ e(y, { ...d, label: l("blockersListTitle") })
   ] }) });
 }
 export {
-  v as PayrollBlockerList
+  V as PayrollBlockerList
 };
 //# sourceMappingURL=PayrollBlockerList.js.map

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlockerList.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport styles from './PayrollBlockerList.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { useI18n } from '@/i18n'\n\nexport interface PayrollBlocker {\n  id: string\n  title: string\n  description: string\n  action?: {\n    label: string\n    onClick: () => void\n  }\n}\n\ninterface PayrollBlockerListProps {\n  blockers: PayrollBlocker[]\n  className?: string\n}\n\n/**\n * PayrollBlockerList - DataView-based component displaying payroll blockers\n * Shows each blocker with individual resolution buttons\n */\nexport function PayrollBlockerList({ blockers, className }: PayrollBlockerListProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Button, Text, Heading } = useComponentContext()\n\n  const dataViewProps = useDataView({\n    data: blockers,\n    columns: [\n      {\n        title: t('blockerSectionLabel'),\n        render: blocker => (\n          <FlexItem flexGrow={1}>\n            <Flex flexDirection=\"column\" gap={8}>\n              <Text weight=\"semibold\">{blocker.title}</Text>\n              <Text variant=\"supporting\">{blocker.description}</Text>\n            </Flex>\n          </FlexItem>\n        ),\n      },\n      {\n        title: '',\n        render: blocker => {\n          // For presentational purposes, just show the primary action if it exists\n          const action = blocker.action\n\n          if (!action) {\n            return null\n          }\n\n          return (\n            <Flex justifyContent=\"flex-end\" alignItems=\"center\">\n              <Button variant=\"secondary\" onClick={action.onClick} title={action.label}>\n                {action.label}\n              </Button>\n            </Flex>\n          )\n        },\n      },\n    ],\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('blockersListTitle')}\n        </Heading>\n\n        <DataView {...dataViewProps} label={t('blockersListTitle')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollBlockerList","blockers","className","useI18n","t","useTranslation","Button","Text","Heading","useComponentContext","dataViewProps","useDataView","blocker","jsx","FlexItem","jsxs","Flex","action","classNames","styles","DataView"],"mappings":";;;;;;;;;AA4BO,SAASA,EAAmB,EAAE,UAAAC,GAAU,WAAAC,KAAsC;AACnF,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GAE5BC,IAAgBC,EAAY;AAAA,IAChC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP;AAAA,QACE,OAAOG,EAAE,qBAAqB;AAAA,QAC9B,QAAQ,CAAAQ,MACN,gBAAAC,EAACC,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAH,EAACN,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAQ,OAAM;AAAA,UACvC,gBAAAC,EAACN,GAAA,EAAK,SAAQ,cAAc,YAAQ,YAAA,CAAY;AAAA,QAAA,EAAA,CAClD,EAAA,CACF;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,CAAAK,MAAW;AAEjB,gBAAMK,IAASL,EAAQ;AAEvB,iBAAKK,sBAKFD,GAAA,EAAK,gBAAe,YAAW,YAAW,UACzC,4BAACV,GAAA,EAAO,SAAQ,aAAY,SAASW,EAAO,SAAS,OAAOA,EAAO,OAChE,UAAAA,EAAO,OACV,EAAA,CACF,IARO;AAAA,QAUX;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAIhB,EAAS,WAAW,IACf,OAIP,gBAAAY,EAAC,OAAA,EAAI,WAAWK,EAAWC,EAAO,MAAMjB,CAAS,GAC/C,UAAA,gBAAAa,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAH,EAACL,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAAJ,EAAE,mBAAmB,GACxB;AAAA,sBAECgB,GAAA,EAAU,GAAGV,GAAe,OAAON,EAAE,mBAAmB,EAAA,CAAG;AAAA,EAAA,EAAA,CAC9D,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"PayrollBlockerList.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport styles from './PayrollBlockerList.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { useI18n } from '@/i18n'\n\nexport interface PayrollBlocker {\n  id: string\n  title: string\n  description: string\n  action?: {\n    label: string\n    onClick: () => void\n  }\n}\n\ninterface PayrollBlockerListProps {\n  blockers: PayrollBlocker[]\n  className?: string\n}\n\n/**\n * PayrollBlockerList - DataView-based component displaying payroll blockers\n * Shows each blocker with individual resolution buttons\n */\nexport function PayrollBlockerList({ blockers, className }: PayrollBlockerListProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Button, Text, Heading } = useComponentContext()\n\n  const dataViewProps = useDataView({\n    data: blockers,\n    columns: [\n      {\n        title: t('blockerSectionLabel'),\n        render: blocker => (\n          <FlexItem flexGrow={1}>\n            <Flex flexDirection=\"column\" gap={8}>\n              <Text weight=\"semibold\">{blocker.title}</Text>\n              <Text variant=\"supporting\">{blocker.description}</Text>\n            </Flex>\n          </FlexItem>\n        ),\n      },\n      {\n        title: '',\n        render: blocker => {\n          // For presentational purposes, just show the primary action if it exists\n          const action = blocker.action\n\n          if (!action) {\n            return null\n          }\n\n          return (\n            <Flex justifyContent=\"flex-end\" alignItems=\"center\">\n              <Button variant=\"secondary\" onClick={action.onClick} title={action.label}>\n                {action.label}\n              </Button>\n            </Flex>\n          )\n        },\n      },\n    ],\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('blockersListTitle')}\n        </Heading>\n\n        <DataView {...dataViewProps} label={t('blockersListTitle')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollBlockerList","blockers","className","useI18n","t","useTranslation","Button","Text","Heading","useComponentContext","dataViewProps","useDataView","blocker","jsx","FlexItem","jsxs","Flex","action","classNames","styles","DataView"],"mappings":";;;;;;;;;;;AA4BO,SAASA,EAAmB,EAAE,UAAAC,GAAU,WAAAC,KAAsC;AACnF,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GAE5BC,IAAgBC,EAAY;AAAA,IAChC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP;AAAA,QACE,OAAOG,EAAE,qBAAqB;AAAA,QAC9B,QAAQ,CAAAQ,MACN,gBAAAC,EAACC,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAH,EAACN,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAQ,OAAM;AAAA,UACvC,gBAAAC,EAACN,GAAA,EAAK,SAAQ,cAAc,YAAQ,YAAA,CAAY;AAAA,QAAA,EAAA,CAClD,EAAA,CACF;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,CAAAK,MAAW;AAEjB,gBAAMK,IAASL,EAAQ;AAEvB,iBAAKK,sBAKFD,GAAA,EAAK,gBAAe,YAAW,YAAW,UACzC,4BAACV,GAAA,EAAO,SAAQ,aAAY,SAASW,EAAO,SAAS,OAAOA,EAAO,OAChE,UAAAA,EAAO,OACV,EAAA,CACF,IARO;AAAA,QAUX;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAIhB,EAAS,WAAW,IACf,OAIP,gBAAAY,EAAC,OAAA,EAAI,WAAWK,EAAWC,EAAO,MAAMjB,CAAS,GAC/C,UAAA,gBAAAa,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAH,EAACL,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAAJ,EAAE,mBAAmB,GACxB;AAAA,sBAECgB,GAAA,EAAU,GAAGV,GAAe,OAAON,EAAE,mBAAmB,EAAA,CAAG;AAAA,EAAA,EAAA,CAC9D,EAAA,CACF;AAEJ;"}

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as o, Fragment as G } from "react/jsx-runtime";
+import { jsx as e, jsxs as l, Fragment as G } from "react/jsx-runtime";
 import { useRef as N } from "react";
 import { useTranslation as S, Trans as O } from "react-i18next";
 import { useFormatEmployeePayRate as V, getRegularHours as _, getOvertimeHours as z, formatHoursDisplay as P, getTotalPtoHours as K, getAdditionalEarnings as W, getReimbursements as X, calculateGrossPay as q } from "../helpers.js";
@@ -7,19 +7,18 @@ import k from "./PayrollConfigurationPresentation.module.scss.js";
 import { useI18n as Q } from "../../../i18n/I18n.js";
 import { Flex as m, FlexItem as h } from "../../Common/Flex/Flex.js";
 import { Grid as Y } from "../../Common/Grid/Grid.js";
-import "classnames";
-import { useComponentContext as Z } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import $ from "../../../assets/icons/pencil.svg.js";
-import ee from "../../../assets/icons/x-circle.svg.js";
-import te from "../../../assets/icons/plus-circle.svg.js";
-import { formatNumberAsCurrency as f, firstLastName as re } from "../../../helpers/formattedStrings.js";
-import { useDateFormatter as ne } from "../../../hooks/useDateFormatter.js";
-import { useLoadingIndicator as ie } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
+import { HamburgerMenu as Z } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as $ } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import ee from "../../../assets/icons/pencil.svg.js";
+import te from "../../../assets/icons/x-circle.svg.js";
+import re from "../../../assets/icons/plus-circle.svg.js";
+import { formatNumberAsCurrency as f, firstLastName as ne } from "../../../helpers/formattedStrings.js";
+import { useDateFormatter as ie } from "../../../hooks/useDateFormatter.js";
+import { useLoadingIndicator as le } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { useContainerBreakpoints as oe } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import { HamburgerMenu as le } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import { DataView as ae } from "../../Common/DataView/DataView.js";
-const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate, l.endDate) : { startDate: "", endDate: "" }, Ie = ({
-  employeeCompensations: l,
+const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate, o.endDate) : { startDate: "", endDate: "" }, Ee = ({
+  employeeCompensations: o,
   employeeDetails: u,
   payPeriod: y,
   paySchedule: T,
@@ -34,14 +33,14 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
   payrollBlockers: D = [],
   pagination: I
 }) => {
-  const { Button: x, Heading: g, Text: i, Badge: R, LoadingSpinner: A, Alert: F } = Z();
+  const { Button: x, Heading: g, Text: i, Badge: R, LoadingSpinner: A, Alert: F } = $();
   Q("Payroll.PayrollConfiguration");
-  const { t: r } = S("Payroll.PayrollConfiguration"), B = ne(), { LoadingIndicator: L } = ie(), U = V(), w = N(null), a = oe({ ref: w }).includes("small"), c = new Map(u.map((t) => [t.uuid, t])), j = (t) => {
+  const { t: r } = S("Payroll.PayrollConfiguration"), B = ie(), { LoadingIndicator: L } = le(), U = V(), w = N(null), a = oe({ ref: w }).includes("small"), c = new Map(u.map((t) => [t.uuid, t])), j = (t) => {
     const n = c.get(t);
-    return n ? re({ first_name: n.firstName, last_name: n.lastName }) : null;
+    return n ? ne({ first_name: n.firstName, last_name: n.lastName }) : null;
   };
-  return /* @__PURE__ */ e("div", { ref: w, className: k.container, children: /* @__PURE__ */ o(m, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ e("div", { ref: w, className: k.container, children: /* @__PURE__ */ l(m, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ l(
       m,
       {
         flexDirection: a ? "row" : "column",
@@ -49,7 +48,7 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
         alignItems: a ? "center" : "stretch",
         gap: a ? 0 : 16,
         children: [
-          /* @__PURE__ */ o(h, { children: [
+          /* @__PURE__ */ l(h, { children: [
             /* @__PURE__ */ e(g, { as: "h1", children: r("pageTitle") }),
             /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
               O,
@@ -81,15 +80,15 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
         ]
       }
     ),
-    (C || d) && /* @__PURE__ */ o(Y, { gap: 16, gridTemplateColumns: "1fr", children: [
+    (C || d) && /* @__PURE__ */ l(Y, { gap: 16, gridTemplateColumns: "1fr", children: [
       d && /* @__PURE__ */ e(F, { status: "info", label: d.label, children: d.content }),
       C
     ] }),
-    p ? /* @__PURE__ */ e(L, { children: /* @__PURE__ */ o(m, { flexDirection: "column", alignItems: "center", gap: 4, children: [
+    p ? /* @__PURE__ */ e(L, { children: /* @__PURE__ */ l(m, { flexDirection: "column", alignItems: "center", gap: 4, children: [
       /* @__PURE__ */ e(A, { size: "lg" }),
       /* @__PURE__ */ e(g, { as: "h4", children: r("loadingTitle") }),
       /* @__PURE__ */ e(i, { children: r("loadingDescription") })
-    ] }) }) : /* @__PURE__ */ o(G, { children: [
+    ] }) }) : /* @__PURE__ */ l(G, { children: [
       /* @__PURE__ */ e("div", { className: k.payrollBlockerContainer, children: D.length > 0 && /* @__PURE__ */ e(
         J,
         {
@@ -97,7 +96,7 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
           onMultipleViewClick: H
         }
       ) }),
-      /* @__PURE__ */ o(h, { children: [
+      /* @__PURE__ */ l(h, { children: [
         /* @__PURE__ */ e(g, { as: "h3", children: r("hoursAndEarningsTitle") }),
         /* @__PURE__ */ e(i, { children: r("hoursAndEarningsDescription") })
       ] }),
@@ -110,7 +109,7 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
               title: /* @__PURE__ */ e(i, { weight: "semibold", children: r("tableColumns.employees") }),
               render: (t) => {
                 const n = c.get(t.employeeUuid || ""), s = U(n);
-                return /* @__PURE__ */ o(m, { flexDirection: "column", gap: 8, children: [
+                return /* @__PURE__ */ l(m, { flexDirection: "column", gap: 8, children: [
                   /* @__PURE__ */ e(i, { weight: "semibold", children: j(t.employeeUuid || "") }),
                   s && /* @__PURE__ */ e(i, { variant: "supporting", children: s }),
                   t.excluded && /* @__PURE__ */ e(R, { status: "warning", children: r("skippedBadge") })
@@ -159,14 +158,14 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
               }
             }
           ],
-          data: l,
+          data: o,
           itemMenu: (t) => /* @__PURE__ */ e(
-            le,
+            Z,
             {
               items: [
                 {
                   label: r("editMenu.edit"),
-                  icon: /* @__PURE__ */ e($, { "aria-hidden": !0 }),
+                  icon: /* @__PURE__ */ e(ee, { "aria-hidden": !0 }),
                   onClick: () => {
                     const n = c.get(t.employeeUuid || "");
                     n && v(n);
@@ -174,7 +173,7 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
                 },
                 {
                   label: r(t.excluded ? "editMenu.unskip" : "editMenu.skip"),
-                  icon: t.excluded ? /* @__PURE__ */ e(te, { "aria-hidden": !0 }) : /* @__PURE__ */ e(ee, { "aria-hidden": !0 }),
+                  icon: t.excluded ? /* @__PURE__ */ e(re, { "aria-hidden": !0 }) : /* @__PURE__ */ e(te, { "aria-hidden": !0 }),
                   onClick: () => {
                     c.get(t.employeeUuid || "") && M(t);
                   }
@@ -190,6 +189,6 @@ const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate,
   ] }) });
 };
 export {
-  Ie as PayrollConfigurationPresentation
+  Ee as PayrollConfigurationPresentation
 };
 //# sourceMappingURL=PayrollConfigurationPresentation.js.map

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  payrollDeadlineNotice?: {\n    label: string\n    content?: ReactNode\n  }\n  isPending?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  isOffCycle = false,\n  alerts,\n  payrollDeadlineNotice,\n  isPending,\n  payrollBlockers = [],\n  pagination,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, LoadingSpinner, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const { LoadingIndicator } = useLoadingIndicator()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            <Text>\n              <Trans\n                i18nKey=\"description\"\n                t={t}\n                components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                values={getPayrollConfigurationTitle(payPeriod, dateFormatter)}\n              />\n            </Text>\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isPending}\n              >\n                {t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isPending}\n                >\n                  {t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollDeadlineNotice) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollDeadlineNotice && (\n              <Alert status=\"info\" label={payrollDeadlineNotice.label}>\n                {payrollDeadlineNotice.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <LoadingIndicator>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={4}>\n              <LoadingSpinner size=\"lg\" />\n              <Heading as=\"h4\">{t('loadingTitle')}</Heading>\n              <Text>{t('loadingDescription')}</Text>\n            </Flex>\n          </LoadingIndicator>\n        ) : (\n          <>\n            <div className={styles.payrollBlockerContainer}>\n              {payrollBlockers.length > 0 && (\n                <PayrollBlockerAlerts\n                  blockers={payrollBlockers}\n                  onMultipleViewClick={onViewBlockers}\n                />\n              )}\n            </div>\n            <FlexItem>\n              <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n              <Text>{t('hoursAndEarningsDescription')}</Text>\n            </FlexItem>\n\n            <DataView\n              label={t('employeeCompensationsTitle')}\n              columns={[\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const payRateDisplay = formatEmployeePayRate(employee)\n                    return (\n                      <Flex flexDirection=\"column\" gap={8 as const}>\n                        <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                        {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                        {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                      </Flex>\n                    )\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const hours = getRegularHours(item)\n                    const overtimeHours = getOvertimeHours(item)\n                    return <Text>{formatHoursDisplay(hours + overtimeHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const ptoHours = getTotalPtoHours(item)\n                    return <Text>{formatHoursDisplay(ptoHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const earnings = getAdditionalEarnings(item)\n                    return <Text>{formatNumberAsCurrency(earnings)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const reimbursements = getReimbursements(item)\n                    return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n                  render: (item: PayrollEmployeeCompensationsType) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const calculatedGrossPay = employee\n                      ? calculateGrossPay(\n                          item,\n                          employee,\n                          payPeriod?.startDate,\n                          paySchedule,\n                          isOffCycle,\n                        )\n                      : 0\n                    return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n                  },\n                },\n              ]}\n              data={employeeCompensations}\n              itemMenu={(item: EmployeeCompensations) => (\n                <HamburgerMenu\n                  items={[\n                    {\n                      label: t('editMenu.edit'),\n                      icon: <PencilSvg aria-hidden />,\n                      onClick: () => {\n                        const employee = employeeMap.get(item.employeeUuid || '')\n                        if (employee) {\n                          onEdit(employee)\n                        }\n                      },\n                    },\n                    {\n                      label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                      icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                      onClick: () => {\n                        const employee = employeeMap.get(item.employeeUuid || '')\n                        if (employee) {\n                          onToggleExclude(item)\n                        }\n                      },\n                    },\n                  ]}\n                  triggerLabel={t('editMenu.edit')}\n                />\n              )}\n              pagination={pagination}\n            />\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","alerts","payrollDeadlineNotice","isPending","payrollBlockers","pagination","Button","Heading","Text","Badge","LoadingSpinner","Alert","useComponentContext","useI18n","t","useTranslation","useDateFormatter","LoadingIndicator","useLoadingIndicator","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle"],"mappings":"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"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  payrollDeadlineNotice?: {\n    label: string\n    content?: ReactNode\n  }\n  isPending?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  isOffCycle = false,\n  alerts,\n  payrollDeadlineNotice,\n  isPending,\n  payrollBlockers = [],\n  pagination,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, LoadingSpinner, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const { LoadingIndicator } = useLoadingIndicator()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            <Text>\n              <Trans\n                i18nKey=\"description\"\n                t={t}\n                components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                values={getPayrollConfigurationTitle(payPeriod, dateFormatter)}\n              />\n            </Text>\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isPending}\n              >\n                {t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isPending}\n                >\n                  {t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollDeadlineNotice) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollDeadlineNotice && (\n              <Alert status=\"info\" label={payrollDeadlineNotice.label}>\n                {payrollDeadlineNotice.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <LoadingIndicator>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={4}>\n              <LoadingSpinner size=\"lg\" />\n              <Heading as=\"h4\">{t('loadingTitle')}</Heading>\n              <Text>{t('loadingDescription')}</Text>\n            </Flex>\n          </LoadingIndicator>\n        ) : (\n          <>\n            <div className={styles.payrollBlockerContainer}>\n              {payrollBlockers.length > 0 && (\n                <PayrollBlockerAlerts\n                  blockers={payrollBlockers}\n                  onMultipleViewClick={onViewBlockers}\n                />\n              )}\n            </div>\n            <FlexItem>\n              <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n              <Text>{t('hoursAndEarningsDescription')}</Text>\n            </FlexItem>\n\n            <DataView\n              label={t('employeeCompensationsTitle')}\n              columns={[\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const payRateDisplay = formatEmployeePayRate(employee)\n                    return (\n                      <Flex flexDirection=\"column\" gap={8 as const}>\n                        <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                        {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                        {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                      </Flex>\n                    )\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const hours = getRegularHours(item)\n                    const overtimeHours = getOvertimeHours(item)\n                    return <Text>{formatHoursDisplay(hours + overtimeHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const ptoHours = getTotalPtoHours(item)\n                    return <Text>{formatHoursDisplay(ptoHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const earnings = getAdditionalEarnings(item)\n                    return <Text>{formatNumberAsCurrency(earnings)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const reimbursements = getReimbursements(item)\n                    return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n                  render: (item: PayrollEmployeeCompensationsType) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const calculatedGrossPay = employee\n                      ? calculateGrossPay(\n                          item,\n                          employee,\n                          payPeriod?.startDate,\n                          paySchedule,\n                          isOffCycle,\n                        )\n                      : 0\n                    return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n                  },\n                },\n              ]}\n              data={employeeCompensations}\n              itemMenu={(item: EmployeeCompensations) => (\n                <HamburgerMenu\n                  items={[\n                    {\n                      label: t('editMenu.edit'),\n                      icon: <PencilSvg aria-hidden />,\n                      onClick: () => {\n                        const employee = employeeMap.get(item.employeeUuid || '')\n                        if (employee) {\n                          onEdit(employee)\n                        }\n                      },\n                    },\n                    {\n                      label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                      icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                      onClick: () => {\n                        const employee = employeeMap.get(item.employeeUuid || '')\n                        if (employee) {\n                          onToggleExclude(item)\n                        }\n                      },\n                    },\n                  ]}\n                  triggerLabel={t('editMenu.edit')}\n                />\n              )}\n              pagination={pagination}\n            />\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","alerts","payrollDeadlineNotice","isPending","payrollBlockers","pagination","Button","Heading","Text","Badge","LoadingSpinner","Alert","useComponentContext","useI18n","t","useTranslation","useDateFormatter","LoadingIndicator","useLoadingIndicator","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle"],"mappings":"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"}