@gusto/embedded-react-sdk 0.30.0 → 0.31.0

package/dist/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { ContractorPayments } from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useMemo } from 'react'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from './helpers'\nimport { DataView, Flex, FlexItem, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface ContractorPaymentCreatePaymentPresentationProps {\n  contractors: Contractor[]\n  contractorPayments: ContractorPayments[]\n  paymentDate: string\n  onPaymentDateChange: (date: string) => void\n  onSaveAndContinue: () => void\n  onEditContractor: (contractorUuid: string) => void\n  totals: {\n    wage: number\n    bonus: number\n    reimbursement: number\n    total: number\n  }\n  alerts: Record<string, InternalAlert>\n  isLoading: boolean\n}\n\nexport const CreatePaymentPresentation = ({\n  contractors,\n  paymentDate,\n  contractorPayments,\n  onPaymentDateChange,\n  onSaveAndContinue,\n  onEditContractor,\n  totals,\n  alerts,\n  isLoading,\n}: ContractorPaymentCreatePaymentPresentationProps) => {\n  const { Button, Text, Heading, TextInput, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const formatWageType = (contractor?: Contractor) => {\n    if (!contractor) {\n      return ''\n    }\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const tableData = useMemo(\n    () =>\n      contractorPayments.map(payment => {\n        return {\n          ...payment,\n          contractorDetails: contractors.find(\n            contractor => contractor.uuid === payment.contractorUuid,\n          ),\n        }\n      }),\n    [contractorPayments, contractors],\n  )\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={16}>\n          <Heading as=\"h2\">{t('title')}</Heading>\n          <Text variant=\"supporting\">{t('paymentSpeedNotice')}</Text>\n        </Flex>\n        <FlexItem>\n          <Button onClick={onSaveAndContinue} variant=\"primary\" isLoading={isLoading}>\n            {t('continueCta')}\n          </Button>\n        </FlexItem>\n      </Flex>\n\n      {Object.values(alerts).map(alert => (\n        <Alert\n          key={alert.title}\n          label={alert.title}\n          onDismiss={alert.onDismiss}\n          status={alert.type}\n        >\n          {alert.content ?? null}\n        </Alert>\n      ))}\n\n      <Flex flexDirection=\"column\" gap={8}>\n        <TextInput\n          type=\"date\"\n          value={paymentDate}\n          onChange={onPaymentDateChange}\n          label={t('dateLabel')}\n          isRequired\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h3\">{t('hoursAndPaymentsLabel')}</Heading>\n        <DataView\n          columns={[\n            {\n              title: t('contractorTableHeaders.contractor'),\n              render: paymentData => (\n                <Text>{getContractorDisplayName(paymentData.contractorDetails)}</Text>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.wageType'),\n              render: paymentData => <Text>{formatWageType(paymentData.contractorDetails)}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.paymentMethod'),\n              render: paymentData => <Text>{paymentData.paymentMethod || t('na')}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.hours'),\n              render: paymentData => (\n                <Text>\n                  {paymentData.contractorDetails?.wageType === 'Hourly' && paymentData.hours\n                    ? formatHoursDisplay(paymentData.hours)\n                    : ZERO_HOURS_DISPLAY}\n                </Text>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.wage'),\n              render: paymentData => {\n                const amount =\n                  paymentData.contractorDetails?.wageType === 'Fixed' && paymentData.wage\n                    ? paymentData.wage\n                    : 0\n                return <Text>{currencyFormatter(amount)}</Text>\n              },\n            },\n            {\n              title: t('contractorTableHeaders.bonus'),\n              render: paymentData => <Text>{currencyFormatter(paymentData.bonus || 0)}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.reimbursement'),\n              render: paymentData => (\n                <Text>{currencyFormatter(paymentData.reimbursement || 0)}</Text>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.total'),\n              render: ({ bonus, reimbursement, wage, hours, contractorDetails }) => {\n                const totalAmount =\n                  (bonus ?? 0) +\n                  (reimbursement ?? 0) +\n                  (wage ?? 0) +\n                  (contractorDetails?.wageType === 'Hourly' && hours\n                    ? hours * Number(contractorDetails.hourlyRate ?? 0)\n                    : 0)\n                return <Text>{currencyFormatter(totalAmount)}</Text>\n              },\n            },\n          ]}\n          data={tableData}\n          footer={() => ({\n            'column-0': <Text weight=\"bold\">{t('totalsLabel')}</Text>,\n            'column-4': <Text>{currencyFormatter(totals.wage)}</Text>,\n            'column-5': <Text>{currencyFormatter(totals.bonus)}</Text>,\n            'column-6': <Text>{currencyFormatter(totals.reimbursement)}</Text>,\n            'column-7': <Text>{currencyFormatter(totals.total)}</Text>,\n          })}\n          label={t('hoursAndPaymentsLabel')}\n          itemMenu={paymentData => (\n            <HamburgerMenu\n              items={[\n                {\n                  label: t('editContractor'),\n                  onClick: () => {\n                    onEditContractor(paymentData.contractorUuid!)\n                  },\n                },\n              ]}\n              triggerLabel={t('editContractor')}\n            />\n          )}\n          emptyState={() => (\n            <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n          )}\n        />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","CreatePaymentPresentation","contractors","paymentDate","contractorPayments","onPaymentDateChange","onSaveAndContinue","onEditContractor","totals","alerts","isLoading","Button","Text","Heading","TextInput","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","tableData","useMemo","payment","jsxs","Flex","jsx","FlexItem","alert","DataView","paymentData","getContractorDisplayName","formatHoursDisplay","amount","bonus","reimbursement","wage","hours","contractorDetails","totalAmount","HamburgerMenu","EmptyData"],"mappings":";;;;;;;;;;;;;AAaA,MAAMA,IAAqB,SAmBdC,IAA4B,CAAC;AAAA,EACxC,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,MAAuD;AACrD,QAAM,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,OAAAC,EAAA,IAAUC,EAAA;AACpD,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,EAAA,IAAMC,EAAe,mCAAmC,GAC1DC,IAAoBC,EAAmB,UAAU,GAEjDC,IAAiB,CAACC,MACjBA,IAGDA,EAAW,aAAa,YAAYA,EAAW,aAC1C,GAAG,EAAE,kBAAkB,CAAC,IAAIH,EAAkB,OAAOG,EAAW,UAAU,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,KAE7FA,EAAW,WALT,IAQLC,IAAYC;AAAA,IAChB,MACEpB,EAAmB,IAAI,CAAAqB,OACd;AAAA,MACL,GAAGA;AAAA,MACH,mBAAmBvB,EAAY;AAAA,QAC7B,CAAAoB,MAAcA,EAAW,SAASG,EAAQ;AAAA,MAAA;AAAA,IAC5C,EAEH;AAAA,IACH,CAACrB,GAAoBF,CAAW;AAAA,EAAA;AAGlC,SACE,gBAAAwB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,gBAAe,YAAW,KAAK,IACnC,UAAA;AAAA,MAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAC,EAACf,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,OAAO,GAAE;AAAA,0BAC5BD,GAAA,EAAK,SAAQ,cAAc,UAAA,EAAE,oBAAoB,EAAA,CAAE;AAAA,MAAA,GACtD;AAAA,MACA,gBAAAgB,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACjB,GAAA,EAAO,SAASL,GAAmB,SAAQ,WAAU,WAAAI,GACnD,UAAA,EAAE,aAAa,EAAA,CAClB,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAEC,OAAO,OAAOD,CAAM,EAAE,IAAI,CAAAqB,MACzB,gBAAAF;AAAA,MAACb;AAAA,MAAA;AAAA,QAEC,OAAOe,EAAM;AAAA,QACb,WAAWA,EAAM;AAAA,QACjB,QAAQA,EAAM;AAAA,QAEb,YAAM,WAAW;AAAA,MAAA;AAAA,MALbA,EAAM;AAAA,IAAA,CAOd;AAAA,IAED,gBAAAF,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA,gBAAAC;AAAA,MAACd;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOX;AAAA,QACP,UAAUE;AAAA,QACV,OAAO,EAAE,WAAW;AAAA,QACpB,YAAU;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IAEA,gBAAAqB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,MAAA,gBAAAC,EAACf,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,uBAAuB,GAAE;AAAA,MAC7C,gBAAAe;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,YACP;AAAA,cACE,OAAO,EAAE,mCAAmC;AAAA,cAC5C,QAAQ,CAAAC,MACN,gBAAAJ,EAAChB,KAAM,UAAAqB,EAAyBD,EAAY,iBAAiB,EAAA,CAAE;AAAA,YAAA;AAAA,YAGnE;AAAA,cACE,OAAO,EAAE,iCAAiC;AAAA,cAC1C,QAAQ,CAAAA,MAAe,gBAAAJ,EAAChB,KAAM,UAAAS,EAAeW,EAAY,iBAAiB,EAAA,CAAE;AAAA,YAAA;AAAA,YAE9E;AAAA,cACE,OAAO,EAAE,sCAAsC;AAAA,cAC/C,QAAQ,OAAe,gBAAAJ,EAAChB,GAAA,EAAM,YAAY,iBAAiB,EAAE,IAAI,EAAA,CAAE;AAAA,YAAA;AAAA,YAErE;AAAA,cACE,OAAO,EAAE,8BAA8B;AAAA,cACvC,QAAQ,CAAAoB,MACN,gBAAAJ,EAAChB,GAAA,EACE,YAAY,mBAAmB,aAAa,YAAYoB,EAAY,QACjEE,EAAmBF,EAAY,KAAK,IACpChC,EAAA,CACN;AAAA,YAAA;AAAA,YAGJ;AAAA,cACE,OAAO,EAAE,6BAA6B;AAAA,cACtC,QAAQ,CAAAgC,MAAe;AACrB,sBAAMG,IACJH,EAAY,mBAAmB,aAAa,WAAWA,EAAY,OAC/DA,EAAY,OACZ;AACN,uBAAO,gBAAAJ,EAAChB,GAAA,EAAM,UAAAO,EAAkBgB,CAAM,GAAE;AAAA,cAC1C;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,EAAE,8BAA8B;AAAA,cACvC,QAAQ,OAAe,gBAAAP,EAAChB,GAAA,EAAM,YAAkBoB,EAAY,SAAS,CAAC,EAAA,CAAE;AAAA,YAAA;AAAA,YAE1E;AAAA,cACE,OAAO,EAAE,sCAAsC;AAAA,cAC/C,QAAQ,OACN,gBAAAJ,EAAChB,GAAA,EAAM,YAAkBoB,EAAY,iBAAiB,CAAC,EAAA,CAAE;AAAA,YAAA;AAAA,YAG7D;AAAA,cACE,OAAO,EAAE,8BAA8B;AAAA,cACvC,QAAQ,CAAC,EAAE,OAAAI,GAAO,eAAAC,GAAe,MAAAC,GAAM,OAAAC,GAAO,mBAAAC,QAAwB;AACpE,sBAAMC,KACHL,KAAS,MACTC,KAAiB,MACjBC,KAAQ,MACRE,GAAmB,aAAa,YAAYD,IACzCA,IAAQ,OAAOC,EAAkB,cAAc,CAAC,IAChD;AACN,uBAAO,gBAAAZ,EAAChB,GAAA,EAAM,UAAAO,EAAkBsB,CAAW,GAAE;AAAA,cAC/C;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAMlB;AAAA,UACN,QAAQ,OAAO;AAAA,YACb,YAAY,gBAAAK,EAAChB,GAAA,EAAK,QAAO,QAAQ,UAAA,EAAE,aAAa,GAAE;AAAA,YAClD,YAAY,gBAAAgB,EAAChB,GAAA,EAAM,UAAAO,EAAkBX,EAAO,IAAI,GAAE;AAAA,YAClD,YAAY,gBAAAoB,EAAChB,GAAA,EAAM,UAAAO,EAAkBX,EAAO,KAAK,GAAE;AAAA,YACnD,YAAY,gBAAAoB,EAAChB,GAAA,EAAM,UAAAO,EAAkBX,EAAO,aAAa,GAAE;AAAA,YAC3D,YAAY,gBAAAoB,EAAChB,GAAA,EAAM,UAAAO,EAAkBX,EAAO,KAAK,EAAA,CAAE;AAAA,UAAA;AAAA,UAErD,OAAO,EAAE,uBAAuB;AAAA,UAChC,UAAU,CAAAwB,MACR,gBAAAJ;AAAA,YAACc;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL;AAAA,kBACE,OAAO,EAAE,gBAAgB;AAAA,kBACzB,SAAS,MAAM;AACb,oBAAAnC,EAAiByB,EAAY,cAAe;AAAA,kBAC9C;AAAA,gBAAA;AAAA,cACF;AAAA,cAEF,cAAc,EAAE,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGpC,YAAY,MACV,gBAAAJ,EAACe,GAAA,EAAU,OAAO,EAAE,iBAAiB,GAAG,aAAa,EAAE,uBAAuB,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAErF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"CreatePaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/CreatePaymentPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { ContractorPayments } from '@gusto/embedded-api/models/operations/postv1companiescompanyidcontractorpaymentgroups'\nimport { useMemo } from 'react'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from './helpers'\nimport { DataView, Flex, FlexItem, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface ContractorPaymentCreatePaymentPresentationProps {\n  contractors: Contractor[]\n  contractorPayments: (ContractorPayments & { isTouched?: boolean })[]\n  paymentDate: string\n  onPaymentDateChange: (date: string) => void\n  onSaveAndContinue: () => void\n  onEditContractor: (contractorUuid: string) => void\n  totals: {\n    wage: number\n    bonus: number\n    reimbursement: number\n    total: number\n  }\n  alerts: Record<string, InternalAlert>\n  isLoading: boolean\n}\n\nexport const CreatePaymentPresentation = ({\n  contractors,\n  paymentDate,\n  contractorPayments,\n  onPaymentDateChange,\n  onSaveAndContinue,\n  onEditContractor,\n  totals,\n  alerts,\n  isLoading,\n}: ContractorPaymentCreatePaymentPresentationProps) => {\n  const { Button, Text, Heading, TextInput, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const formatWageType = (contractor?: Contractor) => {\n    if (!contractor) return ''\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const tableData = useMemo(\n    () =>\n      contractorPayments.map(payment => {\n        return {\n          ...payment,\n          contractorDetails: contractors.find(\n            contractor => contractor.uuid === payment.contractorUuid,\n          ),\n        }\n      }),\n    [contractorPayments, contractors],\n  )\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={16}>\n          <Heading as=\"h2\">{t('title')}</Heading>\n          <Text variant=\"supporting\">{t('paymentSpeedNotice')}</Text>\n        </Flex>\n        <FlexItem>\n          <Button onClick={onSaveAndContinue} variant=\"primary\" isLoading={isLoading}>\n            {t('continueCta')}\n          </Button>\n        </FlexItem>\n      </Flex>\n\n      {Object.values(alerts).map(alert => (\n        <Alert\n          key={alert.title}\n          label={alert.title}\n          onDismiss={alert.onDismiss}\n          status={alert.type}\n        >\n          {alert.content ?? null}\n        </Alert>\n      ))}\n\n      <Flex flexDirection=\"column\" gap={8}>\n        <TextInput\n          type=\"date\"\n          value={paymentDate}\n          onChange={onPaymentDateChange}\n          label={t('dateLabel')}\n          isRequired\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h3\">{t('hoursAndPaymentsLabel')}</Heading>\n        <DataView\n          columns={[\n            {\n              title: t('contractorTableHeaders.contractor'),\n              render: paymentData => (\n                <Text>{getContractorDisplayName(paymentData.contractorDetails)}</Text>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.wageType'),\n              render: paymentData => <Text>{formatWageType(paymentData.contractorDetails)}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.paymentMethod'),\n              render: paymentData => <Text>{paymentData.paymentMethod || t('na')}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.hours'),\n              render: paymentData => {\n                const hours = Number(paymentData.hours || '0')\n                return (\n                  <Text>\n                    {paymentData.contractorDetails?.wageType === 'Hourly' && hours\n                      ? formatHoursDisplay(hours)\n                      : ZERO_HOURS_DISPLAY}\n                  </Text>\n                )\n              },\n            },\n            {\n              title: t('contractorTableHeaders.wage'),\n              render: paymentData => {\n                const amount =\n                  paymentData.contractorDetails?.wageType === 'Fixed' && paymentData.wage\n                    ? Number(paymentData.wage || '0')\n                    : 0\n                return <Text>{currencyFormatter(amount)}</Text>\n              },\n            },\n            {\n              title: t('contractorTableHeaders.bonus'),\n              render: paymentData => (\n                <Text>{currencyFormatter(Number(paymentData.bonus || '0'))}</Text>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.reimbursement'),\n              render: paymentData => (\n                <Text>{currencyFormatter(Number(paymentData.reimbursement || '0'))}</Text>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.total'),\n              render: ({ bonus, reimbursement, wage, hours, contractorDetails }) => {\n                const totalAmount =\n                  Number(bonus || '0') +\n                  Number(reimbursement || '0') +\n                  Number(wage || '0') +\n                  (contractorDetails?.wageType === 'Hourly' && hours\n                    ? Number(hours || '0') * Number(contractorDetails.hourlyRate || '0')\n                    : 0)\n                return <Text>{currencyFormatter(totalAmount)}</Text>\n              },\n            },\n          ]}\n          data={tableData}\n          footer={() => ({\n            'column-0': <Text weight=\"bold\">{t('totalsLabel')}</Text>,\n            'column-4': <Text>{currencyFormatter(totals.wage)}</Text>,\n            'column-5': <Text>{currencyFormatter(totals.bonus)}</Text>,\n            'column-6': <Text>{currencyFormatter(totals.reimbursement)}</Text>,\n            'column-7': <Text>{currencyFormatter(totals.total)}</Text>,\n          })}\n          label={t('hoursAndPaymentsLabel')}\n          itemMenu={paymentData => (\n            <HamburgerMenu\n              items={[\n                {\n                  label: t('editContractor'),\n                  onClick: () => {\n                    onEditContractor(paymentData.contractorUuid!)\n                  },\n                },\n              ]}\n              triggerLabel={t('editContractor')}\n            />\n          )}\n          emptyState={() => (\n            <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n          )}\n        />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","CreatePaymentPresentation","contractors","paymentDate","contractorPayments","onPaymentDateChange","onSaveAndContinue","onEditContractor","totals","alerts","isLoading","Button","Text","Heading","TextInput","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","tableData","useMemo","payment","jsxs","Flex","jsx","FlexItem","alert","DataView","paymentData","getContractorDisplayName","hours","formatHoursDisplay","amount","bonus","reimbursement","wage","contractorDetails","totalAmount","HamburgerMenu","EmptyData"],"mappings":"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"}

package/dist/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.js

@@ -6,14 +6,13 @@ import { z as t } from "zod";
 import { useComponentContext as L } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Flex as i } from "../../../Common/Flex/Flex.js";
 import { Grid as R } from "../../../Common/Grid/Grid.js";
-import "classnames";
-import { ActionsLayout as S } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { Form as T } from "../../../Common/Form/Form.js";
-import { useI18n as E } from "../../../../i18n/I18n.js";
-import I from "../../../../hooks/useNumberFormatter.js";
+import { RadioGroupField as S } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { ActionsLayout as T } from "../../../Common/ActionsLayout/ActionsLayout.js";
 import { NumberInputField as c } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
-import { RadioGroupField as j } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
-const Y = t.object({
+import { Form as E } from "../../../Common/Form/Form.js";
+import { useI18n as I } from "../../../../i18n/I18n.js";
+import j from "../../../../hooks/useNumberFormatter.js";
+const X = t.object({
   wageType: t.enum(["Hourly", "Fixed"]),
   hours: t.number().nonnegative().max(2e4).optional(),
   wage: t.number().nonnegative().optional(),
@@ -22,17 +21,17 @@ const Y = t.object({
   paymentMethod: t.enum(["Check", "Direct Deposit", "Historical Payment"]),
   hourlyRate: t.number().nonnegative().optional(),
   contractorUuid: t.string()
-}), Z = ({
+}), Y = ({
   isOpen: y,
   onClose: u,
   formMethods: o,
   onSubmit: s
 }) => {
   const d = w();
-  E("Contractor.Payments.CreatePayment");
+  I("Contractor.Payments.CreatePayment");
   const { t: e } = H("Contractor.Payments.CreatePayment", {
     keyPrefix: "editContractorPayment"
-  }), { Modal: b, Button: p, Text: h, Heading: m } = L(), g = I("currency"), l = a({
+  }), { Modal: b, Button: p, Text: h, Heading: l } = L(), g = j("currency"), m = a({
     name: "wageType",
     control: o.control
   }), f = a({
@@ -50,7 +49,7 @@ const Y = t.object({
   }), v = a({
     name: "hourlyRate",
     control: o.control
-  }), D = (l === "Fixed" ? 0 : C || 0) + (P || 0) + (x || 0) + (f || 0) * (v || 0), F = [
+  }), D = (m === "Fixed" ? 0 : C || 0) + (P || 0) + (x || 0) + (f || 0) * (v || 0), F = [
     { value: "Check", label: e("paymentMethods.check") },
     { value: "Direct Deposit", label: e("paymentMethods.directDeposit") },
     { value: "Historical Payment", label: e("paymentMethods.historicalPayment") }
@@ -60,7 +59,7 @@ const Y = t.object({
     {
       isOpen: y,
       onClose: u,
-      footer: /* @__PURE__ */ r(S, { children: [
+      footer: /* @__PURE__ */ r(T, { children: [
         /* @__PURE__ */ n(p, { variant: "secondary", onClick: u, children: e("cancelCta") }),
         /* @__PURE__ */ n(
           p,
@@ -73,9 +72,9 @@ const Y = t.object({
           }
         )
       ] }),
-      children: /* @__PURE__ */ n(k, { ...o, children: /* @__PURE__ */ n(T, { id: d, onSubmit: o.handleSubmit(s), children: /* @__PURE__ */ r(i, { flexDirection: "column", gap: 32, children: [
+      children: /* @__PURE__ */ n(k, { ...o, children: /* @__PURE__ */ n(E, { id: d, onSubmit: o.handleSubmit(s), children: /* @__PURE__ */ r(i, { flexDirection: "column", gap: 32, children: [
         /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ n(m, { as: "h2", children: e("title") }),
+          /* @__PURE__ */ n(l, { as: "h2", children: e("title") }),
           /* @__PURE__ */ n(h, { children: e("subtitle") }),
           /* @__PURE__ */ r(h, { weight: "bold", children: [
             e("totalPay"),
@@ -83,8 +82,8 @@ const Y = t.object({
             g(D)
           ] })
         ] }),
-        l === "Hourly" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ n(m, { as: "h3", children: e("hoursSection") }),
+        m === "Hourly" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("hoursSection") }),
           /* @__PURE__ */ n(
             c,
             {
@@ -96,8 +95,8 @@ const Y = t.object({
             }
           )
         ] }),
-        l === "Fixed" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ n(m, { as: "h3", children: e("fixedPaySection") }),
+        m === "Fixed" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("fixedPaySection") }),
           /* @__PURE__ */ n(
             c,
             {
@@ -110,9 +109,9 @@ const Y = t.object({
           )
         ] }),
         /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ n(m, { as: "h3", children: e("additionalEarningsSection") }),
+          /* @__PURE__ */ n(l, { as: "h3", children: e("additionalEarningsSection") }),
           /* @__PURE__ */ r(R, { gridTemplateColumns: { base: "1fr", small: [200, 200] }, gap: 16, children: [
-            l === "Hourly" && /* @__PURE__ */ n(
+            m === "Hourly" && /* @__PURE__ */ n(
               c,
               {
                 min: 0,
@@ -133,7 +132,7 @@ const Y = t.object({
           ] })
         ] }),
         /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(
-          j,
+          S,
           {
             name: "paymentMethod",
             options: F,
@@ -145,7 +144,7 @@ const Y = t.object({
   );
 };
 export {
-  Y as EditContractorPaymentFormSchema,
-  Z as EditContractorPaymentPresentation
+  X as EditContractorPaymentFormSchema,
+  Y as EditContractorPaymentPresentation
 };
 //# sourceMappingURL=EditContractorPaymentPresentation.js.map

package/dist/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditContractorPaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { FormProvider, useWatch, type UseFormReturn } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ActionsLayout, Flex, Grid, NumberInputField, RadioGroupField } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nexport const EditContractorPaymentFormSchema = z.object({\n  wageType: z.enum(['Hourly', 'Fixed']),\n  hours: z.number().nonnegative().max(20000).optional(),\n  wage: z.number().nonnegative().optional(),\n  bonus: z.number().nonnegative().optional(),\n  reimbursement: z.number().nonnegative().optional(),\n  paymentMethod: z.enum(['Check', 'Direct Deposit', 'Historical Payment']),\n  hourlyRate: z.number().nonnegative().optional(),\n  contractorUuid: z.string(),\n})\n\nexport type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>\n\ninterface EditContractorPaymentPresentationProps {\n  isOpen: boolean\n  onClose: () => void\n  formMethods: UseFormReturn<EditContractorPaymentFormValues>\n  onSubmit: (data: EditContractorPaymentFormValues) => void\n}\n\nexport const EditContractorPaymentPresentation = ({\n  isOpen,\n  onClose,\n  formMethods,\n  onSubmit,\n}: EditContractorPaymentPresentationProps) => {\n  const formId = useId()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'editContractorPayment',\n  })\n  const { Modal, Button, Text, Heading } = useComponentContext()\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const wageType = useWatch<EditContractorPaymentFormValues, 'wageType'>({\n    name: 'wageType',\n    control: formMethods.control,\n  })\n  const hours = useWatch<EditContractorPaymentFormValues, 'hours'>({\n    name: 'hours',\n    control: formMethods.control,\n  })\n  const wage = useWatch<EditContractorPaymentFormValues, 'wage'>({\n    name: 'wage',\n    control: formMethods.control,\n  })\n  const bonus = useWatch<EditContractorPaymentFormValues, 'bonus'>({\n    name: 'bonus',\n    control: formMethods.control,\n  })\n  const reimbursement = useWatch<EditContractorPaymentFormValues, 'reimbursement'>({\n    name: 'reimbursement',\n    control: formMethods.control,\n  })\n  const hourlyRate = useWatch<EditContractorPaymentFormValues, 'hourlyRate'>({\n    name: 'hourlyRate',\n    control: formMethods.control,\n  })\n\n  const totalAmount =\n    (wageType === 'Fixed' ? 0 : bonus || 0) +\n    (reimbursement || 0) +\n    (wage || 0) +\n    (hours || 0) * (hourlyRate || 0)\n\n  const paymentMethodOptions = [\n    { value: 'Check', label: t('paymentMethods.check') },\n    { value: 'Direct Deposit', label: t('paymentMethods.directDeposit') },\n    { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },\n  ]\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      footer={\n        <ActionsLayout>\n          <Button variant=\"secondary\" onClick={onClose}>\n            {t('cancelCta')}\n          </Button>\n          <Button\n            variant=\"primary\"\n            type=\"submit\"\n            form={formId}\n            onClick={() => formMethods.handleSubmit(onSubmit)}\n          >\n            {t('saveCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formMethods}>\n        <Form id={formId} onSubmit={formMethods.handleSubmit(onSubmit)}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Flex flexDirection=\"column\" gap={16}>\n              <Heading as=\"h2\">{t('title')}</Heading>\n              <Text>{t('subtitle')}</Text>\n              <Text weight=\"bold\">\n                {t('totalPay')}: {currencyFormatter(totalAmount)}\n              </Text>\n            </Flex>\n\n            {wageType === 'Hourly' && (\n              <Flex flexDirection=\"column\" gap={16}>\n                <Heading as=\"h3\">{t('hoursSection')}</Heading>\n                <NumberInputField\n                  min={0}\n                  name=\"hours\"\n                  isRequired\n                  label={t('hoursLabel')}\n                  adornmentEnd={t('hoursAdornment')}\n                />\n              </Flex>\n            )}\n\n            {wageType === 'Fixed' && (\n              <Flex flexDirection=\"column\" gap={16}>\n                <Heading as=\"h3\">{t('fixedPaySection')}</Heading>\n                <NumberInputField\n                  min={0}\n                  name=\"wage\"\n                  isRequired\n                  label={t('wageLabel')}\n                  format=\"currency\"\n                />\n              </Flex>\n            )}\n\n            <Flex flexDirection=\"column\" gap={16}>\n              <Heading as=\"h3\">{t('additionalEarningsSection')}</Heading>\n              <Grid gridTemplateColumns={{ base: '1fr', small: [200, 200] }} gap={16}>\n                {wageType === 'Hourly' && (\n                  <NumberInputField\n                    min={0}\n                    name=\"bonus\"\n                    label={t('bonusLabel')}\n                    format=\"currency\"\n                  />\n                )}\n                <NumberInputField\n                  min={0}\n                  name=\"reimbursement\"\n                  label={t('reimbursementLabel')}\n                  format=\"currency\"\n                />\n              </Grid>\n            </Flex>\n\n            <Flex flexDirection=\"column\" gap={16}>\n              <RadioGroupField\n                name=\"paymentMethod\"\n                options={paymentMethodOptions}\n                label={t('paymentMethodLabel')}\n              />\n            </Flex>\n          </Flex>\n        </Form>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["EditContractorPaymentFormSchema","z","EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","formId","useId","useI18n","t","useTranslation","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hours","wage","bonus","reimbursement","hourlyRate","totalAmount","paymentMethodOptions","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","Grid","RadioGroupField"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAMA,IAAkCC,EAAE,OAAO;AAAA,EACtD,UAAUA,EAAE,KAAK,CAAC,UAAU,OAAO,CAAC;AAAA,EACpC,OAAOA,EAAE,SAAS,cAAc,IAAI,GAAK,EAAE,SAAA;AAAA,EAC3C,MAAMA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAC/B,OAAOA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAChC,eAAeA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACxC,eAAeA,EAAE,KAAK,CAAC,SAAS,kBAAkB,oBAAoB,CAAC;AAAA,EACvE,YAAYA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACrC,gBAAgBA,EAAE,OAAA;AACpB,CAAC,GAWYC,IAAoC,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACF,MAA8C;AAC5C,QAAMC,IAASC,EAAA;AACf,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,qCAAqC;AAAA,IAChE,WAAW;AAAA,EAAA,CACZ,GACK,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GACnCC,IAAoBC,EAAmB,UAAU,GAEjDC,IAAWC,EAAsD;AAAA,IACrE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKgB,IAAQD,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKiB,IAAOF,EAAkD;AAAA,IAC7D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKkB,IAAQH,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKmB,IAAgBJ,EAA2D;AAAA,IAC/E,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKoB,IAAaL,EAAwD;AAAA,IACzE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GAEKqB,KACHP,MAAa,UAAU,IAAII,KAAS,MACpCC,KAAiB,MACjBF,KAAQ,MACRD,KAAS,MAAMI,KAAc,IAE1BE,IAAuB;AAAA,IAC3B,EAAE,OAAO,SAAS,OAAOjB,EAAE,sBAAsB,EAAA;AAAA,IACjD,EAAE,OAAO,kBAAkB,OAAOA,EAAE,8BAA8B,EAAA;AAAA,IAClE,EAAE,OAAO,sBAAsB,OAAOA,EAAE,kCAAkC,EAAA;AAAA,EAAE;AAG9E,SACE,gBAAAkB;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,QAAAT;AAAA,MACA,SAAAC;AAAA,MACA,0BACGyB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAD,EAACf,KAAO,SAAQ,aAAY,SAAST,GAClC,UAAAM,EAAE,WAAW,GAChB;AAAA,QACA,gBAAAkB;AAAA,UAACf;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAMN;AAAA,YACN,SAAS,MAAMF,EAAY,aAAaC,CAAQ;AAAA,YAE/C,YAAE,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,MAGF,4BAACwB,GAAA,EAAc,GAAGzB,GAChB,UAAA,gBAAAuB,EAACG,GAAA,EAAK,IAAIxB,GAAQ,UAAUF,EAAY,aAAaC,CAAQ,GAC3D,UAAA,gBAAA0B,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,OAAO,GAAE;AAAA,UAC7B,gBAAAkB,EAACd,GAAA,EAAM,UAAAJ,EAAE,UAAU,EAAA,CAAE;AAAA,UACrB,gBAAAsB,EAAClB,GAAA,EAAK,QAAO,QACV,UAAA;AAAA,YAAAJ,EAAE,UAAU;AAAA,YAAE;AAAA,YAAGO,EAAkBS,CAAW;AAAA,UAAA,EAAA,CACjD;AAAA,QAAA,GACF;AAAA,QAECP,MAAa,YACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,cAAc,GAAE;AAAA,UACpC,gBAAAkB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOxB,EAAE,YAAY;AAAA,cACrB,cAAcA,EAAE,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAClC,GACF;AAAA,QAGDS,MAAa,WACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,iBAAiB,GAAE;AAAA,UACvC,gBAAAkB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOxB,EAAE,WAAW;AAAA,cACpB,QAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,GACF;AAAA,QAGF,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,2BAA2B,GAAE;AAAA,UACjD,gBAAAsB,EAACG,GAAA,EAAK,qBAAqB,EAAE,MAAM,OAAO,OAAO,CAAC,KAAK,GAAG,EAAA,GAAK,KAAK,IACjE,UAAA;AAAA,YAAAhB,MAAa,YACZ,gBAAAS;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,OAAOxB,EAAE,YAAY;AAAA,gBACrB,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAGX,gBAAAkB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,OAAOxB,EAAE,oBAAoB;AAAA,gBAC7B,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACT,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAkB,EAACK,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAST;AAAA,YACT,OAAOjB,EAAE,oBAAoB;AAAA,UAAA;AAAA,QAAA,EAC/B,CACF;AAAA,MAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"EditContractorPaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { FormProvider, useWatch, type UseFormReturn } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ActionsLayout, Flex, Grid, NumberInputField, RadioGroupField } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nexport const EditContractorPaymentFormSchema = z.object({\n  wageType: z.enum(['Hourly', 'Fixed']),\n  hours: z.number().nonnegative().max(20000).optional(),\n  wage: z.number().nonnegative().optional(),\n  bonus: z.number().nonnegative().optional(),\n  reimbursement: z.number().nonnegative().optional(),\n  paymentMethod: z.enum(['Check', 'Direct Deposit', 'Historical Payment']),\n  hourlyRate: z.number().nonnegative().optional(),\n  contractorUuid: z.string(),\n})\n\nexport type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>\n\ninterface EditContractorPaymentPresentationProps {\n  isOpen: boolean\n  onClose: () => void\n  formMethods: UseFormReturn<EditContractorPaymentFormValues>\n  onSubmit: (data: EditContractorPaymentFormValues) => void\n}\n\nexport const EditContractorPaymentPresentation = ({\n  isOpen,\n  onClose,\n  formMethods,\n  onSubmit,\n}: EditContractorPaymentPresentationProps) => {\n  const formId = useId()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'editContractorPayment',\n  })\n  const { Modal, Button, Text, Heading } = useComponentContext()\n  const currencyFormatter = useNumberFormatter('currency')\n\n  const wageType = useWatch<EditContractorPaymentFormValues, 'wageType'>({\n    name: 'wageType',\n    control: formMethods.control,\n  })\n  const hours = useWatch<EditContractorPaymentFormValues, 'hours'>({\n    name: 'hours',\n    control: formMethods.control,\n  })\n  const wage = useWatch<EditContractorPaymentFormValues, 'wage'>({\n    name: 'wage',\n    control: formMethods.control,\n  })\n  const bonus = useWatch<EditContractorPaymentFormValues, 'bonus'>({\n    name: 'bonus',\n    control: formMethods.control,\n  })\n  const reimbursement = useWatch<EditContractorPaymentFormValues, 'reimbursement'>({\n    name: 'reimbursement',\n    control: formMethods.control,\n  })\n  const hourlyRate = useWatch<EditContractorPaymentFormValues, 'hourlyRate'>({\n    name: 'hourlyRate',\n    control: formMethods.control,\n  })\n\n  const totalAmount =\n    (wageType === 'Fixed' ? 0 : bonus || 0) +\n    (reimbursement || 0) +\n    (wage || 0) +\n    (hours || 0) * (hourlyRate || 0)\n\n  const paymentMethodOptions = [\n    { value: 'Check', label: t('paymentMethods.check') },\n    { value: 'Direct Deposit', label: t('paymentMethods.directDeposit') },\n    { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },\n  ]\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      footer={\n        <ActionsLayout>\n          <Button variant=\"secondary\" onClick={onClose}>\n            {t('cancelCta')}\n          </Button>\n          <Button\n            variant=\"primary\"\n            type=\"submit\"\n            form={formId}\n            onClick={() => formMethods.handleSubmit(onSubmit)}\n          >\n            {t('saveCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formMethods}>\n        <Form id={formId} onSubmit={formMethods.handleSubmit(onSubmit)}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Flex flexDirection=\"column\" gap={16}>\n              <Heading as=\"h2\">{t('title')}</Heading>\n              <Text>{t('subtitle')}</Text>\n              <Text weight=\"bold\">\n                {t('totalPay')}: {currencyFormatter(totalAmount)}\n              </Text>\n            </Flex>\n\n            {wageType === 'Hourly' && (\n              <Flex flexDirection=\"column\" gap={16}>\n                <Heading as=\"h3\">{t('hoursSection')}</Heading>\n                <NumberInputField\n                  min={0}\n                  name=\"hours\"\n                  isRequired\n                  label={t('hoursLabel')}\n                  adornmentEnd={t('hoursAdornment')}\n                />\n              </Flex>\n            )}\n\n            {wageType === 'Fixed' && (\n              <Flex flexDirection=\"column\" gap={16}>\n                <Heading as=\"h3\">{t('fixedPaySection')}</Heading>\n                <NumberInputField\n                  min={0}\n                  name=\"wage\"\n                  isRequired\n                  label={t('wageLabel')}\n                  format=\"currency\"\n                />\n              </Flex>\n            )}\n\n            <Flex flexDirection=\"column\" gap={16}>\n              <Heading as=\"h3\">{t('additionalEarningsSection')}</Heading>\n              <Grid gridTemplateColumns={{ base: '1fr', small: [200, 200] }} gap={16}>\n                {wageType === 'Hourly' && (\n                  <NumberInputField\n                    min={0}\n                    name=\"bonus\"\n                    label={t('bonusLabel')}\n                    format=\"currency\"\n                  />\n                )}\n                <NumberInputField\n                  min={0}\n                  name=\"reimbursement\"\n                  label={t('reimbursementLabel')}\n                  format=\"currency\"\n                />\n              </Grid>\n            </Flex>\n\n            <Flex flexDirection=\"column\" gap={16}>\n              <RadioGroupField\n                name=\"paymentMethod\"\n                options={paymentMethodOptions}\n                label={t('paymentMethodLabel')}\n              />\n            </Flex>\n          </Flex>\n        </Form>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["EditContractorPaymentFormSchema","z","EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","formId","useId","useI18n","t","useTranslation","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hours","wage","bonus","reimbursement","hourlyRate","totalAmount","paymentMethodOptions","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","Grid","RadioGroupField"],"mappings":";;;;;;;;;;;;;;AAUO,MAAMA,IAAkCC,EAAE,OAAO;AAAA,EACtD,UAAUA,EAAE,KAAK,CAAC,UAAU,OAAO,CAAC;AAAA,EACpC,OAAOA,EAAE,SAAS,cAAc,IAAI,GAAK,EAAE,SAAA;AAAA,EAC3C,MAAMA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAC/B,OAAOA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAChC,eAAeA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACxC,eAAeA,EAAE,KAAK,CAAC,SAAS,kBAAkB,oBAAoB,CAAC;AAAA,EACvE,YAAYA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACrC,gBAAgBA,EAAE,OAAA;AACpB,CAAC,GAWYC,IAAoC,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACF,MAA8C;AAC5C,QAAMC,IAASC,EAAA;AACf,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,qCAAqC;AAAA,IAChE,WAAW;AAAA,EAAA,CACZ,GACK,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GACnCC,IAAoBC,EAAmB,UAAU,GAEjDC,IAAWC,EAAsD;AAAA,IACrE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKgB,IAAQD,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKiB,IAAOF,EAAkD;AAAA,IAC7D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKkB,IAAQH,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKmB,IAAgBJ,EAA2D;AAAA,IAC/E,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKoB,IAAaL,EAAwD;AAAA,IACzE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GAEKqB,KACHP,MAAa,UAAU,IAAII,KAAS,MACpCC,KAAiB,MACjBF,KAAQ,MACRD,KAAS,MAAMI,KAAc,IAE1BE,IAAuB;AAAA,IAC3B,EAAE,OAAO,SAAS,OAAOjB,EAAE,sBAAsB,EAAA;AAAA,IACjD,EAAE,OAAO,kBAAkB,OAAOA,EAAE,8BAA8B,EAAA;AAAA,IAClE,EAAE,OAAO,sBAAsB,OAAOA,EAAE,kCAAkC,EAAA;AAAA,EAAE;AAG9E,SACE,gBAAAkB;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,QAAAT;AAAA,MACA,SAAAC;AAAA,MACA,0BACGyB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAD,EAACf,KAAO,SAAQ,aAAY,SAAST,GAClC,UAAAM,EAAE,WAAW,GAChB;AAAA,QACA,gBAAAkB;AAAA,UAACf;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAMN;AAAA,YACN,SAAS,MAAMF,EAAY,aAAaC,CAAQ;AAAA,YAE/C,YAAE,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,MAGF,4BAACwB,GAAA,EAAc,GAAGzB,GAChB,UAAA,gBAAAuB,EAACG,GAAA,EAAK,IAAIxB,GAAQ,UAAUF,EAAY,aAAaC,CAAQ,GAC3D,UAAA,gBAAA0B,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,OAAO,GAAE;AAAA,UAC7B,gBAAAkB,EAACd,GAAA,EAAM,UAAAJ,EAAE,UAAU,EAAA,CAAE;AAAA,UACrB,gBAAAsB,EAAClB,GAAA,EAAK,QAAO,QACV,UAAA;AAAA,YAAAJ,EAAE,UAAU;AAAA,YAAE;AAAA,YAAGO,EAAkBS,CAAW;AAAA,UAAA,EAAA,CACjD;AAAA,QAAA,GACF;AAAA,QAECP,MAAa,YACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,cAAc,GAAE;AAAA,UACpC,gBAAAkB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOxB,EAAE,YAAY;AAAA,cACrB,cAAcA,EAAE,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAClC,GACF;AAAA,QAGDS,MAAa,WACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,iBAAiB,GAAE;AAAA,UACvC,gBAAAkB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOxB,EAAE,WAAW;AAAA,cACpB,QAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,GACF;AAAA,QAGF,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,2BAA2B,GAAE;AAAA,UACjD,gBAAAsB,EAACG,GAAA,EAAK,qBAAqB,EAAE,MAAM,OAAO,OAAO,CAAC,KAAK,GAAG,EAAA,GAAK,KAAK,IACjE,UAAA;AAAA,YAAAhB,MAAa,YACZ,gBAAAS;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,OAAOxB,EAAE,YAAY;AAAA,gBACrB,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAGX,gBAAAkB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,OAAOxB,EAAE,oBAAoB;AAAA,gBAC7B,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACT,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAkB,EAACK,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAST;AAAA,YACT,OAAOjB,EAAE,oBAAoB;AAAA,UAAA;AAAA,QAAA,EAC/B,CACF;AAAA,MAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Contractor/Payments/CreatePayment/FastAchSubmissionBlockerBanner.js

@@ -2,6 +2,7 @@ import { jsx as t, jsxs as r } from "react/jsx-runtime";
 import { useTranslation as _ } from "react-i18next";
 import { Flex as l } from "../../../Common/Flex/Flex.js";
 import "classnames";
+import "../../../../shared/constants.js";
 import { useComponentContext as k } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import "react";
 import { useDateFormatter as w } from "../../../../hooks/useDateFormatter.js";
@@ -9,16 +10,16 @@ import B from "../../../../assets/icons/icon-zap-fast.svg.js";
 const v = {
   fast_ach_threshold_exceeded: "previewPresentation.submissionBlockers.fast_ach_threshold_exceeded.title",
   needs_earned_access_for_fast_ach: "previewPresentation.submissionBlockers.needs_earned_access_for_fast_ach.title"
-}, F = ({
+}, C = ({
   blocker: o,
   selectedValue: p,
-  onUnblockOptionChange: d
+  onUnblockOptionChange: m
 }) => {
-  const { t: e } = _("Contractor.Payments.CreatePayment"), { Banner: h, Text: n, RadioGroup: m, Badge: a } = k(), u = w(), c = o.blockerType || "fast_ach_threshold_exceeded";
-  return /* @__PURE__ */ t(h, { status: "error", title: e(v[c]), children: /* @__PURE__ */ r(l, { flexDirection: "column", gap: 16, children: [
+  const { t: e } = _("Contractor.Payments.CreatePayment"), { Banner: d, Text: n, RadioGroup: h, Badge: a } = k(), u = w(), c = o.blockerType || "fast_ach_threshold_exceeded";
+  return /* @__PURE__ */ t(d, { status: "error", title: e(v[c]), children: /* @__PURE__ */ r(l, { flexDirection: "column", gap: 16, children: [
     /* @__PURE__ */ t(n, { children: e("previewPresentation.submissionBlockers.fastAchOptions.description") }),
     /* @__PURE__ */ t(
-      m,
+      h,
       {
         label: e("previewPresentation.submissionBlockers.fastAchOptions.fundingOptionsLabel"),
         shouldVisuallyHideLabel: !0,
@@ -47,13 +48,13 @@ const v = {
         }) || [],
         value: p,
         onChange: (s) => {
-          d(c, s);
+          m(c, s);
         }
       }
     )
   ] }) });
 };
 export {
-  F as FastAchSubmissionBlockerBanner
+  C as FastAchSubmissionBlockerBanner
 };
 //# sourceMappingURL=FastAchSubmissionBlockerBanner.js.map

package/dist/components/Contractor/Payments/CreatePayment/FastAchSubmissionBlockerBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"FastAchSubmissionBlockerBanner.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/FastAchSubmissionBlockerBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { PayrollSubmissionBlockerType } from '@gusto/embedded-api/models/components/payrollsubmissionblockertype'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport IconFast from '@/assets/icons/icon-zap-fast.svg?react'\n\ntype FastAchBlockerType = 'fast_ach_threshold_exceeded' | 'needs_earned_access_for_fast_ach'\n\nconst blockerTitleKeys = {\n  fast_ach_threshold_exceeded:\n    'previewPresentation.submissionBlockers.fast_ach_threshold_exceeded.title',\n  needs_earned_access_for_fast_ach:\n    'previewPresentation.submissionBlockers.needs_earned_access_for_fast_ach.title',\n} as const\n\ninterface FastAchSubmissionBlockerBannerProps {\n  blocker: PayrollSubmissionBlockerType\n  selectedValue?: string\n  onUnblockOptionChange: (blockerType: string, value: string) => void\n}\n\nexport const FastAchSubmissionBlockerBanner = ({\n  blocker,\n  selectedValue,\n  onUnblockOptionChange,\n}: FastAchSubmissionBlockerBannerProps) => {\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const { Banner, Text, RadioGroup, Badge } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const blockerType = (blocker.blockerType || 'fast_ach_threshold_exceeded') as FastAchBlockerType\n\n  return (\n    <Banner status=\"error\" title={t(blockerTitleKeys[blockerType])}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Text>{t('previewPresentation.submissionBlockers.fastAchOptions.description')}</Text>\n        <RadioGroup\n          label={t('previewPresentation.submissionBlockers.fastAchOptions.fundingOptionsLabel')}\n          shouldVisuallyHideLabel\n          options={\n            blocker.unblockOptions?.map(option => {\n              const isWire = option.unblockType === 'wire_in'\n              const label = isWire\n                ? t('previewPresentation.submissionBlockers.fastAchOptions.wireLabel')\n                : t('previewPresentation.submissionBlockers.fastAchOptions.directDepositLabel')\n              const description = isWire\n                ? t('previewPresentation.submissionBlockers.fastAchOptions.wireDescription')\n                : t(\n                    'previewPresentation.submissionBlockers.fastAchOptions.directDepositDescription',\n                  )\n\n              return {\n                value: option.unblockType || '',\n                label: (\n                  <Flex alignItems=\"center\" gap={8}>\n                    <Text weight=\"semibold\">{label}</Text>\n                    {isWire && (\n                      <Badge status=\"success\">\n                        <IconFast aria-hidden />{' '}\n                        {t(\n                          'previewPresentation.submissionBlockers.fastAchOptions.wireFastestBadge',\n                        )}\n                      </Badge>\n                    )}\n                    {option.checkDate && (\n                      <Badge status=\"info\">\n                        {t(\n                          'previewPresentation.submissionBlockers.fastAchOptions.contractorPayDate',\n                          {\n                            date: dateFormatter.formatShortWithYear(option.checkDate),\n                          },\n                        )}\n                      </Badge>\n                    )}\n                  </Flex>\n                ),\n                description,\n              }\n            }) || []\n          }\n          value={selectedValue}\n          onChange={value => {\n            onUnblockOptionChange(blockerType, value)\n          }}\n        />\n      </Flex>\n    </Banner>\n  )\n}\n"],"names":["blockerTitleKeys","FastAchSubmissionBlockerBanner","blocker","selectedValue","onUnblockOptionChange","t","useTranslation","Banner","Text","RadioGroup","Badge","useComponentContext","dateFormatter","useDateFormatter","blockerType","jsx","jsxs","Flex","option","isWire","label","description","IconFast","value"],"mappings":";;;;;;;;AASA,MAAMA,IAAmB;AAAA,EACvB,6BACE;AAAA,EACF,kCACE;AACJ,GAQaC,IAAiC,CAAC;AAAA,EAC7C,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,uBAAAC;AACF,MAA2C;AACzC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC,GAC1D,EAAE,QAAAC,GAAQ,MAAAC,GAAM,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAA,GACtCC,IAAgBC,EAAA,GAChBC,IAAeZ,EAAQ,eAAe;AAE5C,SACE,gBAAAa,EAACR,GAAA,EAAO,QAAO,SAAQ,OAAOF,EAAEL,EAAiBc,CAAW,CAAC,GAC3D,UAAA,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAF,EAACP,GAAA,EAAM,UAAAH,EAAE,mEAAmE,EAAA,CAAE;AAAA,IAC9E,gBAAAU;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,OAAOJ,EAAE,2EAA2E;AAAA,QACpF,yBAAuB;AAAA,QACvB,SACEH,EAAQ,gBAAgB,IAAI,CAAAgB,MAAU;AACpC,gBAAMC,IAASD,EAAO,gBAAgB,WAChCE,IACFf,EADUc,IACR,oEACA,0EADiE,GAEjEE,IACFhB,EADgBc,IACd,0EAEA,gFAFuE;AAK7E,iBAAO;AAAA,YACL,OAAOD,EAAO,eAAe;AAAA,YAC7B,OACE,gBAAAF,EAACC,GAAA,EAAK,YAAW,UAAS,KAAK,GAC7B,UAAA;AAAA,cAAA,gBAAAF,EAACP,GAAA,EAAK,QAAO,YAAY,UAAAY,GAAM;AAAA,cAC9BD,KACC,gBAAAH,EAACN,GAAA,EAAM,QAAO,WACZ,UAAA;AAAA,gBAAA,gBAAAK,EAACO,GAAA,EAAS,eAAW,GAAA,CAAC;AAAA,gBAAG;AAAA,gBACxBjB;AAAA,kBACC;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAEDa,EAAO,aACN,gBAAAH,EAACL,GAAA,EAAM,QAAO,QACX,UAAAL;AAAA,gBACC;AAAA,gBACA;AAAA,kBACE,MAAMO,EAAc,oBAAoBM,EAAO,SAAS;AAAA,gBAAA;AAAA,cAC1D,EACF,CACF;AAAA,YAAA,GAEJ;AAAA,YAEF,aAAAG;AAAA,UAAA;AAAA,QAEJ,CAAC,KAAK,CAAA;AAAA,QAER,OAAOlB;AAAA,QACP,UAAU,CAAAoB,MAAS;AACjB,UAAAnB,EAAsBU,GAAaS,CAAK;AAAA,QAC1C;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"FastAchSubmissionBlockerBanner.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/FastAchSubmissionBlockerBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { PayrollSubmissionBlockerType } from '@gusto/embedded-api/models/components/payrollsubmissionblockertype'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport IconFast from '@/assets/icons/icon-zap-fast.svg?react'\n\ntype FastAchBlockerType = 'fast_ach_threshold_exceeded' | 'needs_earned_access_for_fast_ach'\n\nconst blockerTitleKeys = {\n  fast_ach_threshold_exceeded:\n    'previewPresentation.submissionBlockers.fast_ach_threshold_exceeded.title',\n  needs_earned_access_for_fast_ach:\n    'previewPresentation.submissionBlockers.needs_earned_access_for_fast_ach.title',\n} as const\n\ninterface FastAchSubmissionBlockerBannerProps {\n  blocker: PayrollSubmissionBlockerType\n  selectedValue?: string\n  onUnblockOptionChange: (blockerType: string, value: string) => void\n}\n\nexport const FastAchSubmissionBlockerBanner = ({\n  blocker,\n  selectedValue,\n  onUnblockOptionChange,\n}: FastAchSubmissionBlockerBannerProps) => {\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const { Banner, Text, RadioGroup, Badge } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const blockerType = (blocker.blockerType || 'fast_ach_threshold_exceeded') as FastAchBlockerType\n\n  return (\n    <Banner status=\"error\" title={t(blockerTitleKeys[blockerType])}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Text>{t('previewPresentation.submissionBlockers.fastAchOptions.description')}</Text>\n        <RadioGroup\n          label={t('previewPresentation.submissionBlockers.fastAchOptions.fundingOptionsLabel')}\n          shouldVisuallyHideLabel\n          options={\n            blocker.unblockOptions?.map(option => {\n              const isWire = option.unblockType === 'wire_in'\n              const label = isWire\n                ? t('previewPresentation.submissionBlockers.fastAchOptions.wireLabel')\n                : t('previewPresentation.submissionBlockers.fastAchOptions.directDepositLabel')\n              const description = isWire\n                ? t('previewPresentation.submissionBlockers.fastAchOptions.wireDescription')\n                : t(\n                    'previewPresentation.submissionBlockers.fastAchOptions.directDepositDescription',\n                  )\n\n              return {\n                value: option.unblockType || '',\n                label: (\n                  <Flex alignItems=\"center\" gap={8}>\n                    <Text weight=\"semibold\">{label}</Text>\n                    {isWire && (\n                      <Badge status=\"success\">\n                        <IconFast aria-hidden />{' '}\n                        {t(\n                          'previewPresentation.submissionBlockers.fastAchOptions.wireFastestBadge',\n                        )}\n                      </Badge>\n                    )}\n                    {option.checkDate && (\n                      <Badge status=\"info\">\n                        {t(\n                          'previewPresentation.submissionBlockers.fastAchOptions.contractorPayDate',\n                          {\n                            date: dateFormatter.formatShortWithYear(option.checkDate),\n                          },\n                        )}\n                      </Badge>\n                    )}\n                  </Flex>\n                ),\n                description,\n              }\n            }) || []\n          }\n          value={selectedValue}\n          onChange={value => {\n            onUnblockOptionChange(blockerType, value)\n          }}\n        />\n      </Flex>\n    </Banner>\n  )\n}\n"],"names":["blockerTitleKeys","FastAchSubmissionBlockerBanner","blocker","selectedValue","onUnblockOptionChange","t","useTranslation","Banner","Text","RadioGroup","Badge","useComponentContext","dateFormatter","useDateFormatter","blockerType","jsx","jsxs","Flex","option","isWire","label","description","IconFast","value"],"mappings":";;;;;;;;;AASA,MAAMA,IAAmB;AAAA,EACvB,6BACE;AAAA,EACF,kCACE;AACJ,GAQaC,IAAiC,CAAC;AAAA,EAC7C,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,uBAAAC;AACF,MAA2C;AACzC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC,GAC1D,EAAE,QAAAC,GAAQ,MAAAC,GAAM,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAA,GACtCC,IAAgBC,EAAA,GAChBC,IAAeZ,EAAQ,eAAe;AAE5C,SACE,gBAAAa,EAACR,GAAA,EAAO,QAAO,SAAQ,OAAOF,EAAEL,EAAiBc,CAAW,CAAC,GAC3D,UAAA,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAF,EAACP,GAAA,EAAM,UAAAH,EAAE,mEAAmE,EAAA,CAAE;AAAA,IAC9E,gBAAAU;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,OAAOJ,EAAE,2EAA2E;AAAA,QACpF,yBAAuB;AAAA,QACvB,SACEH,EAAQ,gBAAgB,IAAI,CAAAgB,MAAU;AACpC,gBAAMC,IAASD,EAAO,gBAAgB,WAChCE,IACFf,EADUc,IACR,oEACA,0EADiE,GAEjEE,IACFhB,EADgBc,IACd,0EAEA,gFAFuE;AAK7E,iBAAO;AAAA,YACL,OAAOD,EAAO,eAAe;AAAA,YAC7B,OACE,gBAAAF,EAACC,GAAA,EAAK,YAAW,UAAS,KAAK,GAC7B,UAAA;AAAA,cAAA,gBAAAF,EAACP,GAAA,EAAK,QAAO,YAAY,UAAAY,GAAM;AAAA,cAC9BD,KACC,gBAAAH,EAACN,GAAA,EAAM,QAAO,WACZ,UAAA;AAAA,gBAAA,gBAAAK,EAACO,GAAA,EAAS,eAAW,GAAA,CAAC;AAAA,gBAAG;AAAA,gBACxBjB;AAAA,kBACC;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAEDa,EAAO,aACN,gBAAAH,EAACL,GAAA,EAAM,QAAO,QACX,UAAAL;AAAA,gBACC;AAAA,gBACA;AAAA,kBACE,MAAMO,EAAc,oBAAoBM,EAAO,SAAS;AAAA,gBAAA;AAAA,cAC1D,EACF,CACF;AAAA,YAAA,GAEJ;AAAA,YAEF,aAAAG;AAAA,UAAA;AAAA,QAEJ,CAAC,KAAK,CAAA;AAAA,QAER,OAAOlB;AAAA,QACP,UAAU,CAAAoB,MAAS;AACjB,UAAAnB,EAAsBU,GAAaS,CAAK;AAAA,QAC1C;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/Contractor/Payments/CreatePayment/PreviewPresentation.js

@@ -3,47 +3,47 @@ import { useTranslation as x } from "react-i18next";
 import { useMemo as C } from "react";
 import { getContractorDisplayName as v } from "./helpers.js";
 import { FastAchSubmissionBlockerBanner as R } from "./FastAchSubmissionBlockerBanner.js";
-import { GenericBlocker as F } from "./GenericBlocker.js";
+import { GenericBlocker as L } from "./GenericBlocker.js";
 import { Flex as u } from "../../../Common/Flex/Flex.js";
 import "classnames";
-import { useComponentContext as L } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as T } from "../../../../shared/constants.js";
+import { useComponentContext as P } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as _ } from "../../../../i18n/I18n.js";
 import { formatHoursDisplay as E } from "../../../Payroll/helpers.js";
-import P from "../../../../hooks/useNumberFormatter.js";
-import { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as p } from "../../../../shared/constants.js";
-import { DataView as T } from "../../../Common/DataView/DataView.js";
+import F from "../../../../hooks/useNumberFormatter.js";
+import { DataView as p } from "../../../Common/DataView/DataView.js";
 const j = "0.000", X = ({
-  contractorPaymentGroup: a,
+  contractorPaymentGroup: i,
   contractors: f,
   onBackToEdit: A,
   onSubmit: g,
   isLoading: d,
   bankAccount: w,
-  selectedUnblockOptions: b = {},
-  onUnblockOptionChange: c
+  selectedUnblockOptions: c = {},
+  onUnblockOptionChange: b
 }) => {
-  const { Button: h, Text: n, Heading: y, Alert: D } = L();
+  const { Button: h, Text: n, Heading: y, Alert: D } = P();
   _("Contractor.Payments.CreatePayment");
   const { t: r } = x("Contractor.Payments.CreatePayment", {
     keyPrefix: "previewPresentation"
-  }), i = P(), N = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${r("wageTypes.hourly")} ${i(Number(e.hourlyRate))}${r("perHour")}` : e.wageType, s = C(
-    () => a.contractorPayments?.reduce(
-      (e, l) => (e.wageAmount += Number(l.wage || "0"), e.bonusAmount += Number(l.bonus || "0"), e.reimbursementAmount += Number(l.reimbursement || "0"), e.totalAmount += Number(l.wageTotal || "0"), e),
+  }), o = F(), H = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${r("wageTypes.hourly")} ${o(Number(e.hourlyRate || "0"))}${r("perHour")}` : e.wageType, s = C(
+    () => i.contractorPayments?.reduce(
+      (e, a) => (e.wageAmount += Number(a.wage || "0"), e.bonusAmount += Number(a.bonus || "0"), e.reimbursementAmount += Number(a.reimbursement || "0"), e.totalAmount += Number(a.wageTotal || "0"), e),
       { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }
     ),
-    [a.contractorPayments]
-  ), H = a.contractorPayments || [], o = (a.submissionBlockers || []).filter(
+    [i.contractorPayments]
+  ), N = i.contractorPayments || [], l = (i.submissionBlockers || []).filter(
     (e) => e.status === "unresolved"
-  ), B = o.some(
-    (e) => !p.includes(e.blockerType || "")
-  ), S = o.some(
-    (e) => !b[e.blockerType || ""]
-  ), k = d || o.length > 0 && (B || S);
+  ), B = l.some(
+    (e) => !T.includes(e.blockerType || "")
+  ), S = l.some(
+    (e) => !c[e.blockerType || ""]
+  ), k = d || l.length > 0 && (B || S);
   return /* @__PURE__ */ m(u, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
       /* @__PURE__ */ m(u, { flexDirection: "column", gap: 2, children: [
         /* @__PURE__ */ t(y, { as: "h2", children: r("reviewAndSubmitTitle") }),
-        /* @__PURE__ */ t(n, { variant: "supporting", children: r("reviewSubtitle", { debitDate: a.debitDate }) })
+        /* @__PURE__ */ t(n, { variant: "supporting", children: r("reviewSubtitle", { debitDate: i.debitDate }) })
       ] }),
       /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
         /* @__PURE__ */ t(h, { onClick: A, variant: "secondary", children: r("editButton") }),
@@ -64,35 +64,35 @@ const j = "0.000", X = ({
       {
         status: "info",
         label: r("alerts.submitPaymentsDeadline", {
-          checkDate: a.checkDate,
-          debitDate: a.debitDate
+          checkDate: i.checkDate,
+          debitDate: i.debitDate
         })
       }
     ),
-    o.length > 0 && c && o.map((e) => {
-      const l = e.blockerType || "";
-      return p.includes(l) ? /* @__PURE__ */ t(
+    l.length > 0 && b && l.map((e) => {
+      const a = e.blockerType || "";
+      return T.includes(a) ? /* @__PURE__ */ t(
         R,
         {
           blocker: e,
-          selectedValue: b[l],
-          onUnblockOptionChange: c
+          selectedValue: c[a],
+          onUnblockOptionChange: b
         },
-        l
-      ) : /* @__PURE__ */ t(F, { blocker: e }, l);
+        a
+      ) : /* @__PURE__ */ t(L, { blocker: e }, a);
     }),
     /* @__PURE__ */ t(y, { as: "h3", children: r("paymentSummaryTitle") }),
     /* @__PURE__ */ t(
-      T,
+      p,
       {
         columns: [
           {
             title: r("summaryTableHeaders.totalAmount"),
-            render: () => /* @__PURE__ */ t(n, { children: i(Number(a.totals?.amount || "0")) })
+            render: () => /* @__PURE__ */ t(n, { children: o(Number(i.totals?.amount || "0")) })
           },
           {
             title: r("summaryTableHeaders.debitAmount"),
-            render: () => /* @__PURE__ */ t(n, { children: i(Number(a.totals?.debitAmount || "0")) })
+            render: () => /* @__PURE__ */ t(n, { children: o(Number(i.totals?.debitAmount || "0")) })
           },
           {
             title: r("summaryTableHeaders.debitAccount"),
@@ -100,32 +100,32 @@ const j = "0.000", X = ({
           },
           {
             title: r("summaryTableHeaders.debitDate"),
-            render: () => /* @__PURE__ */ t(n, { children: a.debitDate || "debitDate" })
+            render: () => /* @__PURE__ */ t(n, { children: i.debitDate || "debitDate" })
           },
           {
             title: r("summaryTableHeaders.contractorPayDate"),
-            render: () => /* @__PURE__ */ t(n, { children: a.checkDate || "contractorPayDate" })
+            render: () => /* @__PURE__ */ t(n, { children: i.checkDate || "contractorPayDate" })
           }
         ],
-        data: [a],
+        data: [i],
         label: "Payment Summary"
       }
     ),
     /* @__PURE__ */ t(
-      T,
+      p,
       {
         columns: [
           {
             title: r("contractorTableHeaders.contractor"),
             render: (e) => /* @__PURE__ */ t(n, { children: v(
               f.find(
-                (l) => l.uuid === e.contractorUuid
+                (a) => a.uuid === e.contractorUuid
               )
             ) })
           },
           {
             title: r("contractorTableHeaders.wageType"),
-            render: (e) => /* @__PURE__ */ t(n, { children: N(e) })
+            render: (e) => /* @__PURE__ */ t(n, { children: H(e) })
           },
           {
             title: r("contractorTableHeaders.paymentMethod"),
@@ -133,32 +133,35 @@ const j = "0.000", X = ({
           },
           {
             title: r("contractorTableHeaders.hours"),
-            render: (e) => /* @__PURE__ */ t(n, { children: e.wageType === "Hourly" && e.hours ? E(parseFloat(e.hours)) : j })
+            render: (e) => {
+              const a = Number(e.hours || "0");
+              return /* @__PURE__ */ t(n, { children: e.wageType === "Hourly" && a ? E(a) : j });
+            }
           },
           {
             title: r("contractorTableHeaders.wage"),
-            render: (e) => /* @__PURE__ */ t(n, { children: e.wageType === "Fixed" && e.wage ? i(Number(e.wage || "0")) : i(0) })
+            render: (e) => /* @__PURE__ */ t(n, { children: e.wageType === "Fixed" && e.wage ? o(Number(e.wage || "0")) : o(0) })
           },
           {
             title: r("contractorTableHeaders.bonus"),
-            render: (e) => /* @__PURE__ */ t(n, { children: i(Number(e.bonus || "0")) })
+            render: (e) => /* @__PURE__ */ t(n, { children: o(Number(e.bonus || "0")) })
           },
           {
             title: r("contractorTableHeaders.reimbursement"),
-            render: (e) => /* @__PURE__ */ t(n, { children: i(Number(e.reimbursement || "0")) })
+            render: (e) => /* @__PURE__ */ t(n, { children: o(Number(e.reimbursement || "0")) })
           },
           {
             title: r("contractorTableHeaders.total"),
-            render: (e) => /* @__PURE__ */ t(n, { children: i(Number(e.wageTotal || "0")) })
+            render: (e) => /* @__PURE__ */ t(n, { children: o(Number(e.wageTotal || "0")) })
           }
         ],
-        data: H,
+        data: N,
         footer: () => ({
           "column-0": /* @__PURE__ */ t(n, { weight: "bold", children: r("totalsLabel") }),
-          "column-4": /* @__PURE__ */ t(n, { children: i(Number(s?.wageAmount || "0")) }),
-          "column-5": /* @__PURE__ */ t(n, { children: i(Number(s?.bonusAmount || "0")) }),
-          "column-6": /* @__PURE__ */ t(n, { children: i(Number(s?.reimbursementAmount || "0")) }),
-          "column-7": /* @__PURE__ */ t(n, { children: i(Number(s?.totalAmount || "0")) })
+          "column-4": /* @__PURE__ */ t(n, { children: o(s?.wageAmount ?? 0) }),
+          "column-5": /* @__PURE__ */ t(n, { children: o(s?.bonusAmount ?? 0) }),
+          "column-6": /* @__PURE__ */ t(n, { children: o(s?.reimbursementAmount ?? 0) }),
+          "column-7": /* @__PURE__ */ t(n, { children: o(s?.totalAmount ?? 0) })
         }),
         label: r("whatYourCompanyPays")
       }

package/dist/components/Contractor/Payments/CreatePayment/PreviewPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/PreviewPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentgrouppreview'\nimport type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentforgrouppreview'\nimport { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api/models/components/companybankaccount'\nimport { getContractorDisplayName } from './helpers'\nimport { FastAchSubmissionBlockerBanner } from './FastAchSubmissionBlockerBanner'\nimport { GenericBlocker } from './GenericBlocker'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PreviewPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroupPreview\n  contractors: Contractor[]\n  onBackToEdit: () => void\n  onSubmit: () => void\n  isLoading: boolean\n  bankAccount?: CompanyBankAccount\n  selectedUnblockOptions?: Record<string, string>\n  onUnblockOptionChange?: (blockerType: string, value: string) => void\n}\n\nexport const PreviewPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  onBackToEdit,\n  onSubmit,\n  isLoading,\n  bankAccount,\n  selectedUnblockOptions = {},\n  onUnblockOptionChange,\n}: PreviewPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'previewPresentation',\n  })\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroupPreview) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const totals = useMemo(\n    () =>\n      contractorPaymentGroup.contractorPayments?.reduce(\n        (acc, contractor) => {\n          acc.wageAmount += Number(contractor.wage || '0')\n          acc.bonusAmount += Number(contractor.bonus || '0')\n          acc.reimbursementAmount += Number(contractor.reimbursement || '0')\n          acc.totalAmount += Number(contractor.wageTotal || '0')\n          return acc\n        },\n        { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 },\n      ),\n    [contractorPaymentGroup.contractorPayments],\n  )\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const submissionBlockers = (contractorPaymentGroup.submissionBlockers || []).filter(\n    blocker => blocker.status === 'unresolved',\n  )\n\n  const hasUnresolvableBlockers = submissionBlockers.some(\n    blocker => !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blocker.blockerType || ''),\n  )\n\n  const hasUnselectedBlockers = submissionBlockers.some(\n    blocker => !selectedUnblockOptions[blocker.blockerType || ''],\n  )\n\n  const isSubmitDisabled =\n    isLoading ||\n    (submissionBlockers.length > 0 && (hasUnresolvableBlockers || hasUnselectedBlockers))\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('reviewAndSubmitTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('reviewSubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Flex justifyContent=\"flex-end\" gap={16}>\n          <Button onClick={onBackToEdit} variant=\"secondary\">\n            {t('editButton')}\n          </Button>\n          <Button\n            onClick={onSubmit}\n            variant=\"primary\"\n            isLoading={isLoading}\n            isDisabled={isSubmitDisabled}\n          >\n            {t('submitButton')}\n          </Button>\n        </Flex>\n      </Flex>\n\n      <Alert\n        status=\"info\"\n        label={t('alerts.submitPaymentsDeadline', {\n          checkDate: contractorPaymentGroup.checkDate,\n          debitDate: contractorPaymentGroup.debitDate,\n        })}\n      />\n\n      {submissionBlockers.length > 0 &&\n        onUnblockOptionChange &&\n        submissionBlockers.map(blocker => {\n          const blockerType = blocker.blockerType || ''\n\n          if (PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blockerType)) {\n            return (\n              <FastAchSubmissionBlockerBanner\n                key={blockerType}\n                blocker={blocker}\n                selectedValue={selectedUnblockOptions[blockerType]}\n                onUnblockOptionChange={onUnblockOptionChange}\n              />\n            )\n          }\n\n          return <GenericBlocker key={blockerType} blocker={blocker} />\n        })}\n\n      {/* Payment Summary */}\n      <Heading as=\"h3\">{t('paymentSummaryTitle')}</Heading>\n      <DataView\n        columns={[\n          {\n            title: t('summaryTableHeaders.totalAmount'),\n            render: () => (\n              <Text>{currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('summaryTableHeaders.debitAmount'),\n            render: () => (\n              <Text>\n                {currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0'))}\n              </Text>\n            ),\n          },\n          {\n            title: t('summaryTableHeaders.debitAccount'),\n            render: () => <Text>{bankAccount?.hiddenAccountNumber ?? t('naDebitAccount')}</Text>,\n          },\n          {\n            title: t('summaryTableHeaders.debitDate'),\n            render: () => <Text>{contractorPaymentGroup.debitDate || 'debitDate'}</Text>,\n          },\n          {\n            title: t('summaryTableHeaders.contractorPayDate'),\n            render: () => <Text>{contractorPaymentGroup.checkDate || 'contractorPayDate'}</Text>,\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label=\"Payment Summary\"\n      />\n\n      {/* Contractor Payments Table */}\n      <DataView\n        columns={[\n          {\n            title: t('contractorTableHeaders.contractor'),\n            render: contractorPayment => (\n              <Text>\n                {getContractorDisplayName(\n                  contractors.find(\n                    contractor => contractor.uuid === contractorPayment.contractorUuid,\n                  ),\n                )}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.wageType'),\n            render: contractorPayment => <Text>{formatWageType(contractorPayment)}</Text>,\n          },\n          {\n            title: t('contractorTableHeaders.paymentMethod'),\n            render: contractorPayment => <Text>{contractorPayment.paymentMethod || 'N/A'}</Text>,\n          },\n          {\n            title: t('contractorTableHeaders.hours'),\n            render: contractorPayment => (\n              <Text>\n                {contractorPayment.wageType === 'Hourly' && contractorPayment.hours\n                  ? formatHoursDisplay(parseFloat(contractorPayment.hours))\n                  : ZERO_HOURS_DISPLAY}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.wage'),\n            render: contractorPayment => (\n              <Text>\n                {contractorPayment.wageType === 'Fixed' && contractorPayment.wage\n                  ? currencyFormatter(Number(contractorPayment.wage || '0'))\n                  : currencyFormatter(0)}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.bonus'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.bonus || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.reimbursement'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.reimbursement || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.total'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.wageTotal || '0'))}</Text>\n            ),\n          },\n        ]}\n        data={contractorPayments}\n        footer={() => ({\n          'column-0': <Text weight=\"bold\">{t('totalsLabel')}</Text>,\n          'column-4': <Text>{currencyFormatter(Number(totals?.wageAmount || '0'))}</Text>,\n          'column-5': <Text>{currencyFormatter(Number(totals?.bonusAmount || '0'))}</Text>,\n          'column-6': <Text>{currencyFormatter(Number(totals?.reimbursementAmount || '0'))}</Text>,\n          'column-7': <Text>{currencyFormatter(Number(totals?.totalAmount || '0'))}</Text>,\n        })}\n        label={t('whatYourCompanyPays')}\n      />\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PreviewPresentation","contractorPaymentGroup","contractors","onBackToEdit","onSubmit","isLoading","bankAccount","selectedUnblockOptions","onUnblockOptionChange","Button","Text","Heading","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","totals","useMemo","acc","contractorPayments","submissionBlockers","blocker","hasUnresolvableBlockers","PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES","hasUnselectedBlockers","isSubmitDisabled","jsxs","Flex","jsx","blockerType","FastAchSubmissionBlockerBanner","GenericBlocker","DataView","contractorPayment","getContractorDisplayName","formatHoursDisplay"],"mappings":"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"}
+{"version":3,"file":"PreviewPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/PreviewPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentgrouppreview'\nimport type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentforgrouppreview'\nimport { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api/models/components/companybankaccount'\nimport { getContractorDisplayName } from './helpers'\nimport { FastAchSubmissionBlockerBanner } from './FastAchSubmissionBlockerBanner'\nimport { GenericBlocker } from './GenericBlocker'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PreviewPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroupPreview\n  contractors: Contractor[]\n  onBackToEdit: () => void\n  onSubmit: () => void\n  isLoading: boolean\n  bankAccount?: CompanyBankAccount\n  selectedUnblockOptions?: Record<string, string>\n  onUnblockOptionChange?: (blockerType: string, value: string) => void\n}\n\nexport const PreviewPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  onBackToEdit,\n  onSubmit,\n  isLoading,\n  bankAccount,\n  selectedUnblockOptions = {},\n  onUnblockOptionChange,\n}: PreviewPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'previewPresentation',\n  })\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroupPreview) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const totals = useMemo(\n    () =>\n      contractorPaymentGroup.contractorPayments?.reduce(\n        (acc, contractor) => {\n          acc.wageAmount += Number(contractor.wage || '0')\n          acc.bonusAmount += Number(contractor.bonus || '0')\n          acc.reimbursementAmount += Number(contractor.reimbursement || '0')\n          acc.totalAmount += Number(contractor.wageTotal || '0')\n          return acc\n        },\n        { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 },\n      ),\n    [contractorPaymentGroup.contractorPayments],\n  )\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const submissionBlockers = (contractorPaymentGroup.submissionBlockers || []).filter(\n    blocker => blocker.status === 'unresolved',\n  )\n\n  const hasUnresolvableBlockers = submissionBlockers.some(\n    blocker => !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blocker.blockerType || ''),\n  )\n\n  const hasUnselectedBlockers = submissionBlockers.some(\n    blocker => !selectedUnblockOptions[blocker.blockerType || ''],\n  )\n\n  const isSubmitDisabled =\n    isLoading ||\n    (submissionBlockers.length > 0 && (hasUnresolvableBlockers || hasUnselectedBlockers))\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('reviewAndSubmitTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('reviewSubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Flex justifyContent=\"flex-end\" gap={16}>\n          <Button onClick={onBackToEdit} variant=\"secondary\">\n            {t('editButton')}\n          </Button>\n          <Button\n            onClick={onSubmit}\n            variant=\"primary\"\n            isLoading={isLoading}\n            isDisabled={isSubmitDisabled}\n          >\n            {t('submitButton')}\n          </Button>\n        </Flex>\n      </Flex>\n\n      <Alert\n        status=\"info\"\n        label={t('alerts.submitPaymentsDeadline', {\n          checkDate: contractorPaymentGroup.checkDate,\n          debitDate: contractorPaymentGroup.debitDate,\n        })}\n      />\n\n      {submissionBlockers.length > 0 &&\n        onUnblockOptionChange &&\n        submissionBlockers.map(blocker => {\n          const blockerType = blocker.blockerType || ''\n\n          if (PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blockerType)) {\n            return (\n              <FastAchSubmissionBlockerBanner\n                key={blockerType}\n                blocker={blocker}\n                selectedValue={selectedUnblockOptions[blockerType]}\n                onUnblockOptionChange={onUnblockOptionChange}\n              />\n            )\n          }\n\n          return <GenericBlocker key={blockerType} blocker={blocker} />\n        })}\n\n      {/* Payment Summary */}\n      <Heading as=\"h3\">{t('paymentSummaryTitle')}</Heading>\n      <DataView\n        columns={[\n          {\n            title: t('summaryTableHeaders.totalAmount'),\n            render: () => (\n              <Text>{currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('summaryTableHeaders.debitAmount'),\n            render: () => (\n              <Text>\n                {currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0'))}\n              </Text>\n            ),\n          },\n          {\n            title: t('summaryTableHeaders.debitAccount'),\n            render: () => <Text>{bankAccount?.hiddenAccountNumber ?? t('naDebitAccount')}</Text>,\n          },\n          {\n            title: t('summaryTableHeaders.debitDate'),\n            render: () => <Text>{contractorPaymentGroup.debitDate || 'debitDate'}</Text>,\n          },\n          {\n            title: t('summaryTableHeaders.contractorPayDate'),\n            render: () => <Text>{contractorPaymentGroup.checkDate || 'contractorPayDate'}</Text>,\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label=\"Payment Summary\"\n      />\n\n      {/* Contractor Payments Table */}\n      <DataView\n        columns={[\n          {\n            title: t('contractorTableHeaders.contractor'),\n            render: contractorPayment => (\n              <Text>\n                {getContractorDisplayName(\n                  contractors.find(\n                    contractor => contractor.uuid === contractorPayment.contractorUuid,\n                  ),\n                )}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.wageType'),\n            render: contractorPayment => <Text>{formatWageType(contractorPayment)}</Text>,\n          },\n          {\n            title: t('contractorTableHeaders.paymentMethod'),\n            render: contractorPayment => <Text>{contractorPayment.paymentMethod || 'N/A'}</Text>,\n          },\n          {\n            title: t('contractorTableHeaders.hours'),\n            render: contractorPayment => {\n              const hours = Number(contractorPayment.hours || '0')\n              return (\n                <Text>\n                  {contractorPayment.wageType === 'Hourly' && hours\n                    ? formatHoursDisplay(hours)\n                    : ZERO_HOURS_DISPLAY}\n                </Text>\n              )\n            },\n          },\n          {\n            title: t('contractorTableHeaders.wage'),\n            render: contractorPayment => (\n              <Text>\n                {contractorPayment.wageType === 'Fixed' && contractorPayment.wage\n                  ? currencyFormatter(Number(contractorPayment.wage || '0'))\n                  : currencyFormatter(0)}\n              </Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.bonus'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.bonus || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.reimbursement'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.reimbursement || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('contractorTableHeaders.total'),\n            render: contractorPayment => (\n              <Text>{currencyFormatter(Number(contractorPayment.wageTotal || '0'))}</Text>\n            ),\n          },\n        ]}\n        data={contractorPayments}\n        footer={() => ({\n          'column-0': <Text weight=\"bold\">{t('totalsLabel')}</Text>,\n          'column-4': <Text>{currencyFormatter(totals?.wageAmount ?? 0)}</Text>,\n          'column-5': <Text>{currencyFormatter(totals?.bonusAmount ?? 0)}</Text>,\n          'column-6': <Text>{currencyFormatter(totals?.reimbursementAmount ?? 0)}</Text>,\n          'column-7': <Text>{currencyFormatter(totals?.totalAmount ?? 0)}</Text>,\n        })}\n        label={t('whatYourCompanyPays')}\n      />\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PreviewPresentation","contractorPaymentGroup","contractors","onBackToEdit","onSubmit","isLoading","bankAccount","selectedUnblockOptions","onUnblockOptionChange","Button","Text","Heading","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","totals","useMemo","acc","contractorPayments","submissionBlockers","blocker","hasUnresolvableBlockers","PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES","hasUnselectedBlockers","isSubmitDisabled","jsxs","Flex","jsx","blockerType","FastAchSubmissionBlockerBanner","GenericBlocker","DataView","contractorPayment","getContractorDisplayName","hours","formatHoursDisplay"],"mappings":"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"}