@gusto/embedded-react-sdk 0.22.0 → 0.23.0-rc.1

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

@@ -1,109 +1,140 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useTranslation as T } from "react-i18next";
-import { Flex as o } from "../../../Common/Flex/Flex.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useTranslation as R } from "react-i18next";
+import { useMemo as A } from "react";
+import { getContractorDisplayName as F } from "./helpers.js";
+import { Flex as a, FlexItem as M } from "../../../Common/Flex/Flex.js";
 import "classnames";
-import { HamburgerMenu as x } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as b } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as H } from "../../../../i18n/I18n.js";
-import { formatNumberAsCurrency as i } from "../../../../helpers/formattedStrings.js";
-import { useLocale as C } from "../../../../contexts/LocaleProvider/useLocale.js";
-import { formatHoursDisplay as w } from "../../../Payroll/helpers.js";
-import { DataView as A } from "../../../Common/DataView/DataView.js";
-const v = "0.000", B = ({
-  contractors: s,
-  paymentDate: m,
-  onPaymentDateChange: p,
-  onSaveAndContinue: u,
-  onEditContractor: h,
-  totals: F
+import "../../../../shared/constants.js";
+import { HamburgerMenu as N } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as j } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as v } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as I } from "../../../Payroll/helpers.js";
+import O from "../../../../hooks/useNumberFormatter.js";
+import { DataView as S } from "../../../Common/DataView/DataView.js";
+const U = "0.000", K = ({
+  contractors: u,
+  paymentDate: p,
+  contractorPayments: m,
+  onPaymentDateChange: b,
+  onSaveAndContinue: y,
+  onEditContractor: g,
+  totals: l,
+  alerts: f,
+  isLoading: T
 }) => {
-  const { Button: g, Text: n, Heading: c, TextInput: y } = b();
-  H("Contractor.Payments.CreatePayment");
-  const { t: r } = T("Contractor.Payments.CreatePayment"), { locale: a } = C(), f = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${r("wageTypes.hourly")} ${i(parseFloat(e.hourlyRate), a)}${r("perHour")}` : e.wageType;
-  return /* @__PURE__ */ d(o, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ d(o, { flexDirection: "column", gap: 16, children: [
-      /* @__PURE__ */ t(c, { as: "h1", children: r("title") }),
-      /* @__PURE__ */ t(c, { as: "h2", children: r("subtitle") }),
-      /* @__PURE__ */ t(n, { children: r("paymentSpeedNotice") })
+  const { Button: H, Text: n, Heading: s, TextInput: C, Alert: x } = j();
+  v("Contractor.Payments.CreatePayment");
+  const { t } = R("Contractor.Payments.CreatePayment"), o = O("currency"), w = (e) => e ? e.wageType === "Hourly" && e.hourlyRate ? `${t("wageTypes.hourly")} ${o(Number(e.hourlyRate))}${t("perHour")}` : e.wageType : "", D = A(
+    () => m.map((e) => ({
+      ...e,
+      contractorDetails: u.find(
+        (i) => i.uuid === e.contractorUuid
+      )
+    })),
+    [m, u]
+  );
+  return /* @__PURE__ */ c(a, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ c(a, { justifyContent: "flex-end", gap: 16, children: [
+      /* @__PURE__ */ c(a, { flexDirection: "column", gap: 16, children: [
+        /* @__PURE__ */ r(s, { as: "h2", children: t("title") }),
+        /* @__PURE__ */ r(n, { variant: "supporting", children: t("paymentSpeedNotice") })
+      ] }),
+      /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(H, { onClick: y, variant: "primary", isLoading: T, children: t("continueCta") }) })
     ] }),
-    /* @__PURE__ */ t(o, { flexDirection: "column", gap: 8, children: /* @__PURE__ */ t(
-      y,
+    Object.values(f).map((e) => /* @__PURE__ */ r(
+      x,
+      {
+        label: e.title,
+        onDismiss: e.onDismiss,
+        status: e.type,
+        children: e.content ?? null
+      },
+      e.title
+    )),
+    /* @__PURE__ */ r(a, { flexDirection: "column", gap: 8, children: /* @__PURE__ */ r(
+      C,
       {
         type: "date",
-        value: m,
-        onChange: p,
-        label: r("dateLabel"),
+        value: p,
+        onChange: b,
+        label: t("dateLabel"),
         isRequired: !0
       }
     ) }),
-    /* @__PURE__ */ d(o, { flexDirection: "column", gap: 16, children: [
-      /* @__PURE__ */ t(c, { as: "h2", children: r("enterHoursAndPayments") }),
-      /* @__PURE__ */ t(
-        A,
+    /* @__PURE__ */ c(a, { flexDirection: "column", gap: 16, children: [
+      /* @__PURE__ */ r(s, { as: "h3", children: t("hoursAndPaymentsLabel") }),
+      /* @__PURE__ */ r(
+        S,
         {
           columns: [
             {
-              title: r("contractorTableHeaders.contractor"),
-              render: (e) => /* @__PURE__ */ t(n, { children: e.contractorName })
+              title: t("contractorTableHeaders.contractor"),
+              render: (e) => /* @__PURE__ */ r(n, { children: F(e.contractorDetails) })
             },
             {
-              title: r("contractorTableHeaders.wageType"),
-              render: (e) => /* @__PURE__ */ t(n, { children: f(e) })
+              title: t("contractorTableHeaders.wageType"),
+              render: (e) => /* @__PURE__ */ r(n, { children: w(e.contractorDetails) })
             },
             {
-              title: r("contractorTableHeaders.paymentMethod"),
-              render: ({ paymentMethod: e }) => /* @__PURE__ */ t(n, { children: e || "N/A" })
+              title: t("contractorTableHeaders.paymentMethod"),
+              render: (e) => /* @__PURE__ */ r(n, { children: e.paymentMethod || t("na") })
             },
             {
-              title: r("contractorTableHeaders.hours"),
-              render: ({ hours: e, wageType: l }) => /* @__PURE__ */ t("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ t(n, { children: l === "Hourly" && e ? w(parseFloat(e)) : v }) })
+              title: t("contractorTableHeaders.hours"),
+              render: (e) => /* @__PURE__ */ r(n, { children: e.contractorDetails?.wageType === "Hourly" && e.hours ? I(e.hours) : U })
             },
             {
-              title: r("contractorTableHeaders.wage"),
+              title: t("contractorTableHeaders.wage"),
               render: (e) => {
-                const l = e.wageType === "Fixed" && e.wage ? parseFloat(e.wage) : 0;
-                return /* @__PURE__ */ t("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ t(n, { children: i(l, a) }) });
+                const i = e.contractorDetails?.wageType === "Fixed" && e.wage ? e.wage : 0;
+                return /* @__PURE__ */ r(n, { children: o(i) });
               }
             },
             {
-              title: r("contractorTableHeaders.bonus"),
-              render: ({ bonus: e }) => /* @__PURE__ */ t("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ t(n, { children: i(e ? parseFloat(e) : 0, a) }) })
+              title: t("contractorTableHeaders.bonus"),
+              render: (e) => /* @__PURE__ */ r(n, { children: o(e.bonus || 0) })
             },
             {
-              title: r("contractorTableHeaders.reimbursement"),
-              render: ({ reimbursement: e }) => /* @__PURE__ */ t("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ t(n, { children: i(e ? parseFloat(e) : 0, a) }) })
+              title: t("contractorTableHeaders.reimbursement"),
+              render: (e) => /* @__PURE__ */ r(n, { children: o(e.reimbursement || 0) })
             },
             {
-              title: r("contractorTableHeaders.total"),
-              render: (e) => {
-                const l = e.wageTotal ? parseFloat(e.wageTotal) : 0;
-                return /* @__PURE__ */ t("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ t(n, { children: i(l, a) }) });
+              title: t("contractorTableHeaders.total"),
+              render: ({ bonus: e, reimbursement: i, wage: P, hours: d, contractorDetails: h }) => {
+                const L = (e ?? 0) + (i ?? 0) + (P ?? 0) + (h?.wageType === "Hourly" && d ? d * Number(h.hourlyRate ?? 0) : 0);
+                return /* @__PURE__ */ r(n, { children: o(L) });
               }
             }
           ],
-          data: s,
-          label: r("title"),
-          itemMenu: (e) => /* @__PURE__ */ t(
-            x,
+          data: D,
+          footer: () => ({
+            "column-0": /* @__PURE__ */ r(n, { weight: "bold", children: t("totalsLabel") }),
+            "column-4": /* @__PURE__ */ r(n, { children: o(l.wage) }),
+            "column-5": /* @__PURE__ */ r(n, { children: o(l.bonus) }),
+            "column-6": /* @__PURE__ */ r(n, { children: o(l.reimbursement) }),
+            "column-7": /* @__PURE__ */ r(n, { children: o(l.total) })
+          }),
+          label: t("hoursAndPaymentsLabel"),
+          itemMenu: (e) => /* @__PURE__ */ r(
+            N,
             {
               items: [
                 {
-                  label: r("editContractor"),
+                  label: t("editContractor"),
                   onClick: () => {
-                    h(e);
+                    g(e.contractorUuid);
                   }
                 }
               ],
-              triggerLabel: r("editContractor")
+              triggerLabel: t("editContractor")
             }
           )
         }
       )
-    ] }),
-    /* @__PURE__ */ t(o, { justifyContent: "flex-end", gap: 16, children: /* @__PURE__ */ t(g, { onClick: u, variant: "primary", children: r("saveAndContinueButton") }) })
+    ] })
   ] });
 };
 export {
-  B as CreatePaymentPresentation
+  K as CreatePaymentPresentation
 };
 //# sourceMappingURL=CreatePaymentPresentation.js.map

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 { ContractorPaymentForGroup, ContractorPaymentGroupTotals } from '../types'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ntype ContractorPaymentWithName = ContractorPaymentForGroup & {\n  contractorName: string\n}\n\ninterface ContractorPaymentCreatePaymentPresentationProps {\n  contractors: ContractorPaymentWithName[]\n  paymentDate: string\n  onPaymentDateChange: (date: string) => void\n  onSaveAndContinue: () => void\n  onEditContractor: (contractor: ContractorPaymentWithName) => void\n  totals: ContractorPaymentGroupTotals\n}\n\nexport const CreatePaymentPresentation = ({\n  contractors,\n  paymentDate,\n  onPaymentDateChange,\n  onSaveAndContinue,\n  onEditContractor,\n  totals,\n}: ContractorPaymentCreatePaymentPresentationProps) => {\n  const { Button, Text, Heading, TextInput } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment')\n  const { locale } = useLocale()\n\n  const formatWageType = (contractor: ContractorPaymentForGroup) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${formatNumberAsCurrency(parseFloat(contractor.hourlyRate), locale)}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h1\">{t('title')}</Heading>\n        <Heading as=\"h2\">{t('subtitle')}</Heading>\n        <Text>{t('paymentSpeedNotice')}</Text>\n      </Flex>\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=\"h2\">{t('enterHoursAndPayments')}</Heading>\n\n        <DataView\n          columns={[\n            {\n              title: t('contractorTableHeaders.contractor'),\n              render: contractor => <Text>{contractor.contractorName}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.wageType'),\n              render: contractor => <Text>{formatWageType(contractor)}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.paymentMethod'),\n              render: ({ paymentMethod }) => <Text>{paymentMethod || 'N/A'}</Text>,\n            },\n            {\n              title: t('contractorTableHeaders.hours'),\n              render: ({ hours, wageType }) => (\n                <div style={{ textAlign: 'right' }}>\n                  <Text>\n                    {wageType === 'Hourly' && hours\n                      ? formatHoursDisplay(parseFloat(hours))\n                      : ZERO_HOURS_DISPLAY}\n                  </Text>\n                </div>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.wage'),\n              render: contractor => {\n                const amount =\n                  contractor.wageType === 'Fixed' && contractor.wage\n                    ? parseFloat(contractor.wage)\n                    : 0\n                return (\n                  <div style={{ textAlign: 'right' }}>\n                    <Text>{formatNumberAsCurrency(amount, locale)}</Text>\n                  </div>\n                )\n              },\n            },\n            {\n              title: t('contractorTableHeaders.bonus'),\n              render: ({ bonus }) => (\n                <div style={{ textAlign: 'right' }}>\n                  <Text>{formatNumberAsCurrency(bonus ? parseFloat(bonus) : 0, locale)}</Text>\n                </div>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.reimbursement'),\n              render: ({ reimbursement }) => (\n                <div style={{ textAlign: 'right' }}>\n                  <Text>\n                    {formatNumberAsCurrency(reimbursement ? parseFloat(reimbursement) : 0, locale)}\n                  </Text>\n                </div>\n              ),\n            },\n            {\n              title: t('contractorTableHeaders.total'),\n              render: contractor => {\n                const amount = contractor.wageTotal ? parseFloat(contractor.wageTotal) : 0\n                return (\n                  <div style={{ textAlign: 'right' }}>\n                    <Text>{formatNumberAsCurrency(amount, locale)}</Text>\n                  </div>\n                )\n              },\n            },\n          ]}\n          data={contractors}\n          label={t('title')}\n          itemMenu={contractor => (\n            <HamburgerMenu\n              items={[\n                {\n                  label: t('editContractor'),\n                  onClick: () => {\n                    onEditContractor(contractor)\n                  },\n                },\n              ]}\n              triggerLabel={t('editContractor')}\n            />\n          )}\n        />\n      </Flex>\n\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Button onClick={onSaveAndContinue} variant=\"primary\">\n          {t('saveAndContinueButton')}\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","CreatePaymentPresentation","contractors","paymentDate","onPaymentDateChange","onSaveAndContinue","onEditContractor","totals","Button","Text","Heading","TextInput","useComponentContext","useI18n","t","useTranslation","locale","useLocale","formatWageType","contractor","formatNumberAsCurrency","jsxs","Flex","jsx","DataView","paymentMethod","hours","wageType","formatHoursDisplay","amount","bonus","reimbursement","HamburgerMenu"],"mappings":"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"}
+{"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 } 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        {/* //TODO: add empty state */}\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        />\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"],"mappings":"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"}

package/dist/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.d.ts

@@ -0,0 +1,39 @@
+import { UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+export declare const EditContractorPaymentFormSchema: z.ZodObject<{
+    wageType: z.ZodEnum<["Hourly", "Fixed"]>;
+    hours: z.ZodOptional<z.ZodNumber>;
+    wage: z.ZodOptional<z.ZodNumber>;
+    bonus: z.ZodOptional<z.ZodNumber>;
+    reimbursement: z.ZodOptional<z.ZodNumber>;
+    paymentMethod: z.ZodEnum<["Check", "Direct Deposit", "Historical Payment"]>;
+    hourlyRate: z.ZodOptional<z.ZodNumber>;
+    contractorUuid: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    wageType: "Hourly" | "Fixed";
+    paymentMethod: "Check" | "Direct Deposit" | "Historical Payment";
+    contractorUuid: string;
+    reimbursement?: number | undefined;
+    hours?: number | undefined;
+    wage?: number | undefined;
+    bonus?: number | undefined;
+    hourlyRate?: number | undefined;
+}, {
+    wageType: "Hourly" | "Fixed";
+    paymentMethod: "Check" | "Direct Deposit" | "Historical Payment";
+    contractorUuid: string;
+    reimbursement?: number | undefined;
+    hours?: number | undefined;
+    wage?: number | undefined;
+    bonus?: number | undefined;
+    hourlyRate?: number | undefined;
+}>;
+export type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>;
+interface EditContractorPaymentPresentationProps {
+    isOpen: boolean;
+    onClose: () => void;
+    formMethods: UseFormReturn<EditContractorPaymentFormValues>;
+    onSubmit: (data: EditContractorPaymentFormValues) => void;
+}
+export declare const EditContractorPaymentPresentation: ({ isOpen, onClose, formMethods, onSubmit, }: EditContractorPaymentPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,131 @@
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as w } from "react";
+import { useWatch as a, FormProvider as k } from "react-hook-form";
+import { useTranslation as H } from "react-i18next";
+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 { RadioGroupField as S } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { ActionsLayout as T } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { NumberInputField as m } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
+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(),
+  bonus: t.number().nonnegative().optional(),
+  reimbursement: t.number().nonnegative().optional(),
+  paymentMethod: t.enum(["Check", "Direct Deposit", "Historical Payment"]),
+  hourlyRate: t.number().nonnegative().optional(),
+  contractorUuid: t.string()
+}), Y = ({
+  isOpen: y,
+  onClose: u,
+  formMethods: o,
+  onSubmit: s
+}) => {
+  const d = w();
+  I("Contractor.Payments.CreatePayment");
+  const { t: e } = H("Contractor.Payments.CreatePayment", {
+    keyPrefix: "editContractorPayment"
+  }), { Modal: b, Button: p, Text: h, Heading: l } = L(), g = j("currency"), c = a({
+    name: "wageType",
+    control: o.control
+  }), f = a({
+    name: "hours",
+    control: o.control
+  }), x = a({
+    name: "wage",
+    control: o.control
+  }), C = a({
+    name: "bonus",
+    control: o.control
+  }), P = a({
+    name: "reimbursement",
+    control: o.control
+  }), v = a({
+    name: "hourlyRate",
+    control: o.control
+  }), D = (c === "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") }
+  ];
+  return /* @__PURE__ */ n(
+    b,
+    {
+      isOpen: y,
+      onClose: u,
+      footer: /* @__PURE__ */ r(T, { children: [
+        /* @__PURE__ */ n(p, { variant: "secondary", onClick: u, children: e("cancelCta") }),
+        /* @__PURE__ */ n(
+          p,
+          {
+            variant: "primary",
+            type: "submit",
+            form: d,
+            onClick: () => o.handleSubmit(s),
+            children: e("saveCta")
+          }
+        )
+      ] }),
+      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(l, { as: "h2", children: e("title") }),
+          /* @__PURE__ */ n(h, { children: e("subtitle") }),
+          /* @__PURE__ */ r(h, { weight: "bold", children: [
+            e("totalPay"),
+            ": ",
+            g(D)
+          ] })
+        ] }),
+        c === "Hourly" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("hoursSection") }),
+          /* @__PURE__ */ n(
+            m,
+            {
+              name: "hours",
+              isRequired: !0,
+              label: e("hoursLabel"),
+              adornmentEnd: e("hoursAdornment")
+            }
+          )
+        ] }),
+        c === "Fixed" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("fixedPaySection") }),
+          /* @__PURE__ */ n(m, { name: "wage", isRequired: !0, label: e("wageLabel"), format: "currency" })
+        ] }),
+        /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ n(l, { as: "h3", children: e("additionalEarningsSection") }),
+          /* @__PURE__ */ r(R, { gridTemplateColumns: { base: "1fr", small: [200, 200] }, gap: 16, children: [
+            c === "Hourly" && /* @__PURE__ */ n(m, { name: "bonus", label: e("bonusLabel"), format: "currency" }),
+            /* @__PURE__ */ n(
+              m,
+              {
+                name: "reimbursement",
+                label: e("reimbursementLabel"),
+                format: "currency"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(
+          S,
+          {
+            name: "paymentMethod",
+            options: F,
+            label: e("paymentMethodLabel")
+          }
+        ) })
+      ] }) }) })
+    }
+  );
+};
+export {
+  X as EditContractorPaymentFormSchema,
+  Y as EditContractorPaymentPresentation
+};
+//# sourceMappingURL=EditContractorPaymentPresentation.js.map

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

@@ -0,0 +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                  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 name=\"wage\" isRequired label={t('wageLabel')} format=\"currency\" />\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 name=\"bonus\" label={t('bonusLabel')} format=\"currency\" />\n                )}\n                <NumberInputField\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":"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"}

package/dist/components/Contractor/Payments/CreatePayment/PreviewPresentation.d.ts

@@ -0,0 +1,11 @@
+import { ContractorPaymentGroupPreview } from '@gusto/embedded-api/models/components/contractorpaymentgrouppreview';
+import { Contractor } from '@gusto/embedded-api/models/components/contractor';
+interface PreviewPresentationProps {
+    contractorPaymentGroup: ContractorPaymentGroupPreview;
+    contractors: Contractor[];
+    onBackToEdit: () => void;
+    onSubmit: () => void;
+    isLoading: boolean;
+}
+export declare const PreviewPresentation: ({ contractorPaymentGroup, contractors, onBackToEdit, onSubmit, isLoading, }: PreviewPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,139 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useTranslation as w } from "react-i18next";
+import { useMemo as A } from "react";
+import { getContractorDisplayName as D } from "./helpers.js";
+import { Flex as u } from "../../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../../shared/constants.js";
+import { useComponentContext as H } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as N } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as x } from "../../../Payroll/helpers.js";
+import C from "../../../../hooks/useNumberFormatter.js";
+import { DataView as b } from "../../../Common/DataView/DataView.js";
+const v = "0.000", U = ({
+  contractorPaymentGroup: i,
+  contractors: c,
+  onBackToEdit: h,
+  onSubmit: y,
+  isLoading: p
+}) => {
+  const { Button: s, Text: n, Heading: d, Alert: T } = H();
+  N("Contractor.Payments.CreatePayment");
+  const { t: r } = w("Contractor.Payments.CreatePayment", {
+    keyPrefix: "previewPresentation"
+  }), a = C(), g = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${r("wageTypes.hourly")} ${a(Number(e.hourlyRate))}${r("perHour")}` : e.wageType, l = A(
+    () => i.contractorPayments?.reduce(
+      (e, o) => (e.wageAmount += Number(o.wage || "0"), e.bonusAmount += Number(o.bonus || "0"), e.reimbursementAmount += Number(o.reimbursement || "0"), e.totalAmount += Number(o.wageTotal || "0"), e),
+      { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }
+    ),
+    [i.contractorPayments]
+  ), f = i.contractorPayments || [];
+  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(d, { as: "h2", children: r("reviewAndSubmitTitle") }),
+        /* @__PURE__ */ t(n, { variant: "supporting", children: r("reviewSubtitle", { debitDate: i.debitDate }) })
+      ] }),
+      /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
+        /* @__PURE__ */ t(s, { onClick: h, variant: "secondary", children: r("editButton") }),
+        /* @__PURE__ */ t(s, { onClick: y, variant: "primary", isLoading: p, children: r("submitButton") })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(
+      T,
+      {
+        status: "info",
+        label: r("alerts.submitPaymentsDeadline", {
+          checkDate: i.checkDate,
+          debitDate: i.debitDate
+        })
+      }
+    ),
+    /* @__PURE__ */ t(d, { as: "h3", children: r("paymentSummaryTitle") }),
+    /* @__PURE__ */ t(
+      b,
+      {
+        columns: [
+          {
+            title: r("summaryTableHeaders.totalAmount"),
+            render: () => /* @__PURE__ */ t(n, { children: a(Number(i.totals?.amount || "0")) })
+          },
+          {
+            title: r("summaryTableHeaders.debitAmount"),
+            render: () => /* @__PURE__ */ t(n, { children: a(Number(i.totals?.debitAmount || "0")) })
+          },
+          {
+            title: r("summaryTableHeaders.debitAccount"),
+            render: () => /* @__PURE__ */ t(n, { children: "debitAccount" })
+          },
+          {
+            title: r("summaryTableHeaders.debitDate"),
+            render: () => /* @__PURE__ */ t(n, { children: i.debitDate || "debitDate" })
+          },
+          {
+            title: r("summaryTableHeaders.contractorPayDate"),
+            render: () => /* @__PURE__ */ t(n, { children: i.checkDate || "contractorPayDate" })
+          }
+        ],
+        data: [i],
+        label: "Payment Summary"
+      }
+    ),
+    /* @__PURE__ */ t(
+      b,
+      {
+        columns: [
+          {
+            title: r("contractorTableHeaders.contractor"),
+            render: (e) => /* @__PURE__ */ t(n, { children: D(
+              c.find(
+                (o) => o.uuid === e.contractorUuid
+              )
+            ) })
+          },
+          {
+            title: r("contractorTableHeaders.wageType"),
+            render: (e) => /* @__PURE__ */ t(n, { children: g(e) })
+          },
+          {
+            title: r("contractorTableHeaders.paymentMethod"),
+            render: (e) => /* @__PURE__ */ t(n, { children: e.paymentMethod || "N/A" })
+          },
+          {
+            title: r("contractorTableHeaders.hours"),
+            render: (e) => /* @__PURE__ */ t(n, { children: e.wageType === "Hourly" && e.hours ? x(parseFloat(e.hours)) : v })
+          },
+          {
+            title: r("contractorTableHeaders.wage"),
+            render: (e) => /* @__PURE__ */ t(n, { children: e.wageType === "Fixed" && e.wage ? a(Number(e.wage || "0")) : a(0) })
+          },
+          {
+            title: r("contractorTableHeaders.bonus"),
+            render: (e) => /* @__PURE__ */ t(n, { children: a(Number(e.bonus || "0")) })
+          },
+          {
+            title: r("contractorTableHeaders.reimbursement"),
+            render: (e) => /* @__PURE__ */ t(n, { children: a(Number(e.reimbursement || "0")) })
+          },
+          {
+            title: r("contractorTableHeaders.total"),
+            render: (e) => /* @__PURE__ */ t(n, { children: a(Number(e.wageTotal || "0")) })
+          }
+        ],
+        data: f,
+        footer: () => ({
+          "column-0": /* @__PURE__ */ t(n, { weight: "bold", children: r("totalsLabel") }),
+          "column-4": /* @__PURE__ */ t(n, { children: a(Number(l?.wageAmount || "0")) }),
+          "column-5": /* @__PURE__ */ t(n, { children: a(Number(l?.bonusAmount || "0")) }),
+          "column-6": /* @__PURE__ */ t(n, { children: a(Number(l?.reimbursementAmount || "0")) }),
+          "column-7": /* @__PURE__ */ t(n, { children: a(Number(l?.totalAmount || "0")) })
+        }),
+        label: r("whatYourCompanyPays")
+      }
+    )
+  ] });
+};
+export {
+  U as PreviewPresentation
+};
+//# sourceMappingURL=PreviewPresentation.js.map