@gusto/embedded-react-sdk 0.24.0 → 0.25.0

package/dist/components/Contractor/Payments/PaymentFlow/paymentStateMachine.js

@@ -1,17 +1,18 @@
-import { state as r, transition as n, reduce as o } from "robot3";
-import { PaymentListContextual as c, CreatePaymentContextual as s, PaymentHistoryContextual as l } from "./PaymentFlowComponents.js";
-import { componentEvents as m } from "../../../../shared/constants.js";
-import { updateBreadcrumbs as t } from "../../../../helpers/breadcrumbHelpers.js";
-import { createBreadcrumbNavigateTransition as y } from "../../../Common/FlowBreadcrumbs/breadcrumbTransitionHelpers.js";
-const v = {
+import { state as m, transition as n, reduce as r } from "robot3";
+import { getContractorDisplayName as y } from "../CreatePayment/helpers.js";
+import { PaymentStatementContextual as p, PaymentListContextual as c, CreatePaymentContextual as d, PaymentHistoryContextual as i } from "./PaymentFlowComponents.js";
+import { componentEvents as o } from "../../../../shared/constants.js";
+import { updateBreadcrumbs as a } from "../../../../helpers/breadcrumbHelpers.js";
+import { createBreadcrumbNavigateTransition as u } from "../../../Common/FlowBreadcrumbs/breadcrumbTransitionHelpers.js";
+const E = {
   landing: {
     parent: null,
     item: {
       id: "landing",
       label: "breadcrumbLabel",
       namespace: "Contractor.Payments.PaymentsList",
-      onNavigate: ((e) => ({
-        ...e,
+      onNavigate: ((t) => ({
+        ...t,
         currentBreadcrumb: "landing",
         progressBarType: null,
         component: c
@@ -24,86 +25,76 @@ const v = {
       id: "createPayment",
       label: "breadcrumbLabel",
       namespace: "Contractor.Payments.CreatePayment",
-      onNavigate: ((e) => ({
-        ...t("createPayment", e)
-        // component: PayrollConfigurationContextual,
+      onNavigate: ((t) => ({
+        ...a("createPayment", t)
       }))
     }
   },
-  overview: {
-    parent: "createPayment",
+  history: {
+    parent: "landing",
     item: {
-      id: "overview",
+      id: "history",
       label: "breadcrumbLabel",
-      namespace: "Contractor.Payments.Overview",
-      onNavigate: ((e) => ({
-        ...t("overview", e),
-        // component: PayrollOverviewContextual,
-        alerts: void 0
+      namespace: "Contractor.Payments.PaymentHistory",
+      onNavigate: ((t) => ({
+        ...a("history", t),
+        component: i
       }))
     }
   },
-  editPayment: {
-    //TODO: this node is not used - should consider nulls for these
-    parent: "createPayment",
-    item: {
-      id: "editPayment",
-      label: "breadcrumbLabel",
-      namespace: "Contractor.Payments.EditPayment"
-    }
-  },
-  history: {
-    parent: "landing",
+  statement: {
+    parent: "history",
     item: {
-      id: "receipts",
+      id: "statement",
       label: "breadcrumbLabel",
-      namespace: "Contractor.Payments.PaymentHistory"
+      namespace: "Contractor.Payments.PaymentStatement"
     }
   }
-}, d = y(), T = {
-  landing: r(
+}, s = u(), R = {
+  landing: m(
     n(
-      m.CONTRACTOR_PAYMENT_CREATE,
+      o.CONTRACTOR_PAYMENT_CREATE,
       "createPayment",
-      o(
-        (e, a) => ({
-          ...t("createPayment", e),
-          component: s,
+      r(
+        (t, e) => ({
+          ...a("createPayment", t),
+          component: d,
           progressBarType: "breadcrumbs",
           alerts: void 0
         })
       )
     ),
     n(
-      m.CONTRACTOR_PAYMENT_VIEW,
+      o.CONTRACTOR_PAYMENT_VIEW,
       "history",
-      o(
-        (e, a) => ({
-          ...t("history", e),
-          component: l,
-          currentPaymentId: a.payload.paymentId,
+      r(
+        (t, e) => ({
+          ...a("history", t),
+          component: i,
+          currentPaymentId: e.payload.paymentId,
           progressBarType: "breadcrumbs",
           alerts: void 0
         })
       )
     )
   ),
-  createPayment: r(
+  createPayment: m(
     n(
-      m.CONTRACTOR_PAYMENT_CREATED,
+      o.CONTRACTOR_PAYMENT_CREATED,
       "landing",
-      o(
-        (e, a) => {
-          const i = a.payload.contractorPayments?.length || 0;
+      r(
+        (t, e) => {
+          const l = e.payload.contractorPayments?.length || 0;
           return {
-            ...t("landing", e),
+            ...a("landing", t),
+            progressBarType: null,
             component: c,
             alerts: [
               {
                 type: "success",
                 title: "paymentCreatedSuccessfully",
                 translationParams: {
-                  count: i
+                  count: l
                 }
               }
             ]
@@ -111,12 +102,51 @@ const v = {
         }
       )
     ),
-    d("landing")
+    s("landing")
+  ),
+  history: m(
+    n(
+      o.CONTRACTOR_PAYMENT_VIEW_DETAILS,
+      "statement",
+      r(
+        (t, e) => ({
+          ...a("statement", t, {
+            contractorName: y(e.payload.contractor)
+          }),
+          component: p,
+          currentContractorUuid: e.payload.contractor?.uuid,
+          currentPaymentId: e.payload.paymentGroupId,
+          progressBarType: "breadcrumbs",
+          alerts: void 0
+        })
+      )
+    ),
+    n(
+      o.CONTRACTOR_PAYMENT_CANCEL,
+      "landing",
+      r(
+        (t, e) => ({
+          ...a("landing", t),
+          progressBarType: null,
+          component: c,
+          alerts: [
+            {
+              type: "success",
+              title: "paymentCancelledSuccessfully"
+            }
+          ]
+        })
+      )
+    ),
+    s("landing")
   ),
-  history: r()
+  statement: m(
+    s("landing"),
+    s("history")
+  )
 };
 export {
-  v as paymentFlowBreadcrumbsNodes,
-  T as paymentMachine
+  E as paymentFlowBreadcrumbsNodes,
+  R as paymentMachine
 };
 //# sourceMappingURL=paymentStateMachine.js.map

package/dist/components/Contractor/Payments/PaymentFlow/paymentStateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"paymentStateMachine.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/paymentStateMachine.ts"],"sourcesContent":["import { reduce, state, transition } from 'robot3'\nimport type { ContractorPaymentGroup } from '@gusto/embedded-api/models/components/contractorpaymentgroup'\nimport {\n  CreatePaymentContextual,\n  type PaymentFlowContextInterface,\n  PaymentHistoryContextual,\n  PaymentListContextual,\n} from './PaymentFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\nimport { updateBreadcrumbs } from '@/helpers/breadcrumbHelpers'\nimport type { BreadcrumbNodes } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { createBreadcrumbNavigateTransition } from '@/components/Common/FlowBreadcrumbs/breadcrumbTransitionHelpers'\n\ntype EventPayloads = {\n  [componentEvents.CONTRACTOR_PAYMENT_CREATE]: undefined\n  [componentEvents.CONTRACTOR_PAYMENT_PREVIEW]: undefined\n  [componentEvents.CONTRACTOR_PAYMENT_EDIT]: undefined\n  [componentEvents.CONTRACTOR_PAYMENT_UPDATE]: undefined\n  [componentEvents.CONTRACTOR_PAYMENT_SUBMIT]: undefined\n  [componentEvents.CONTRACTOR_PAYMENT_CREATED]: ContractorPaymentGroup\n  [componentEvents.CONTRACTOR_PAYMENT_VIEW]: { paymentId: string }\n  [componentEvents.BREADCRUMB_NAVIGATE]: {\n    key: string\n    onNavigate: (ctx: PaymentFlowContextInterface) => PaymentFlowContextInterface\n  }\n}\n\nexport const paymentFlowBreadcrumbsNodes: BreadcrumbNodes = {\n  landing: {\n    parent: null,\n    item: {\n      id: 'landing',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.PaymentsList',\n      onNavigate: ((ctx: PaymentFlowContextInterface) => ({\n        ...ctx,\n        currentBreadcrumb: 'landing',\n        progressBarType: null,\n        component: PaymentListContextual,\n      })) as (context: unknown) => unknown,\n    },\n  },\n  createPayment: {\n    parent: 'landing',\n    item: {\n      id: 'createPayment',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.CreatePayment',\n      onNavigate: ((ctx: PaymentFlowContextInterface) => ({\n        ...updateBreadcrumbs('createPayment', ctx),\n        // component: PayrollConfigurationContextual,\n      })) as (context: unknown) => unknown,\n    },\n  },\n  overview: {\n    parent: 'createPayment',\n    item: {\n      id: 'overview',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.Overview',\n      onNavigate: ((ctx: PaymentFlowContextInterface) => ({\n        ...updateBreadcrumbs('overview', ctx),\n        // component: PayrollOverviewContextual,\n        alerts: undefined,\n      })) as (context: unknown) => unknown,\n    },\n  },\n  editPayment: {\n    //TODO: this node is not used - should consider nulls for these\n    parent: 'createPayment',\n    item: {\n      id: 'editPayment',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.EditPayment',\n    },\n  },\n  history: {\n    parent: 'landing',\n    item: {\n      id: 'receipts',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.PaymentHistory',\n    },\n  },\n} as const\n\n// const createReducer = (props: Partial<PaymentFlowContextInterface>) => {\n//   return (ctx: PaymentFlowContextInterface): PaymentFlowContextInterface => ({\n//     ...ctx,\n//     ...props,\n//   })\n// }\n\nconst breadcrumbNavigateTransition =\n  createBreadcrumbNavigateTransition<PaymentFlowContextInterface>()\n\nexport const paymentMachine = {\n  landing: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_CREATE,\n      'createPayment',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PAYMENT_CREATE>,\n        ): PaymentFlowContextInterface => {\n          return {\n            ...updateBreadcrumbs('createPayment', ctx),\n            component: CreatePaymentContextual,\n            progressBarType: 'breadcrumbs',\n            alerts: undefined,\n          }\n        },\n      ),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_VIEW,\n      'history',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PAYMENT_VIEW>,\n        ): PaymentFlowContextInterface => {\n          return {\n            ...updateBreadcrumbs('history', ctx),\n            component: PaymentHistoryContextual,\n            currentPaymentId: ev.payload.paymentId,\n            progressBarType: 'breadcrumbs',\n            alerts: undefined,\n          }\n        },\n      ),\n    ),\n  ),\n  createPayment: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_CREATED,\n      'landing',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PAYMENT_CREATED>,\n        ): PaymentFlowContextInterface => {\n          const contractorPaymentGroup = ev.payload\n          const contractorCount = contractorPaymentGroup.contractorPayments?.length || 0\n\n          return {\n            ...updateBreadcrumbs('landing', ctx),\n            component: PaymentListContextual,\n            alerts: [\n              {\n                type: 'success',\n                title: 'paymentCreatedSuccessfully',\n                translationParams: {\n                  count: contractorCount,\n                },\n              },\n            ],\n          }\n        },\n      ),\n    ),\n    breadcrumbNavigateTransition('landing'),\n  ),\n  history: state(),\n}\n"],"names":["paymentFlowBreadcrumbsNodes","ctx","PaymentListContextual","updateBreadcrumbs","breadcrumbNavigateTransition","createBreadcrumbNavigateTransition","paymentMachine","state","transition","componentEvents","reduce","ev","CreatePaymentContextual","PaymentHistoryContextual","contractorCount"],"mappings":";;;;;AA4BO,MAAMA,IAA+C;AAAA,EAC1D,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAa,CAACC,OAAsC;AAAA,QAClD,GAAGA;AAAA,QACH,mBAAmB;AAAA,QACnB,iBAAiB;AAAA,QACjB,WAAWC;AAAA,MAAA;AAAA,IACb;AAAA,EACF;AAAA,EAEF,eAAe;AAAA,IACb,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAa,CAACD,OAAsC;AAAA,QAClD,GAAGE,EAAkB,iBAAiBF,CAAG;AAAA;AAAA,MAAA;AAAA,IAE3C;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAa,CAACA,OAAsC;AAAA,QAClD,GAAGE,EAAkB,YAAYF,CAAG;AAAA;AAAA,QAEpC,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF;AAAA,EAEF,aAAa;AAAA;AAAA,IAEX,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,GASMG,IACJC,EAAA,GAEWC,IAAiB;AAAA,EAC5B,SAASC;AAAA,IACPC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACET,GACAU,OAEO;AAAA,UACL,GAAGR,EAAkB,iBAAiBF,CAAG;AAAA,UACzC,WAAWW;AAAA,UACX,iBAAiB;AAAA,UACjB,QAAQ;AAAA,QAAA;AAAA,MAEZ;AAAA,IACF;AAAA,IAEFJ;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACET,GACAU,OAEO;AAAA,UACL,GAAGR,EAAkB,WAAWF,CAAG;AAAA,UACnC,WAAWY;AAAA,UACX,kBAAkBF,EAAG,QAAQ;AAAA,UAC7B,iBAAiB;AAAA,UACjB,QAAQ;AAAA,QAAA;AAAA,MAEZ;AAAA,IACF;AAAA,EACF;AAAA,EAEF,eAAeJ;AAAA,IACbC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACET,GACAU,MACgC;AAEhC,gBAAMG,IADyBH,EAAG,QACa,oBAAoB,UAAU;AAE7E,iBAAO;AAAA,YACL,GAAGR,EAAkB,WAAWF,CAAG;AAAA,YACnC,WAAWC;AAAA,YACX,QAAQ;AAAA,cACN;AAAA,gBACE,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,mBAAmB;AAAA,kBACjB,OAAOY;AAAA,gBAAA;AAAA,cACT;AAAA,YACF;AAAA,UACF;AAAA,QAEJ;AAAA,MAAA;AAAA,IACF;AAAA,IAEFV,EAA6B,SAAS;AAAA,EAAA;AAAA,EAExC,SAASG,EAAA;AACX;"}
+{"version":3,"file":"paymentStateMachine.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/paymentStateMachine.ts"],"sourcesContent":["import { reduce, state, transition } from 'robot3'\nimport type { ContractorPaymentGroup } from '@gusto/embedded-api/models/components/contractorpaymentgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { getContractorDisplayName } from '../CreatePayment/helpers'\nimport {\n  CreatePaymentContextual,\n  type PaymentFlowContextInterface,\n  PaymentHistoryContextual,\n  PaymentListContextual,\n  PaymentStatementContextual,\n} from './PaymentFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\nimport { updateBreadcrumbs } from '@/helpers/breadcrumbHelpers'\nimport type { BreadcrumbNodes } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { createBreadcrumbNavigateTransition } from '@/components/Common/FlowBreadcrumbs/breadcrumbTransitionHelpers'\n\ntype EventPayloads = {\n  [componentEvents.CONTRACTOR_PAYMENT_CREATE]: undefined\n  [componentEvents.CONTRACTOR_PAYMENT_CREATED]: ContractorPaymentGroup\n  [componentEvents.CONTRACTOR_PAYMENT_VIEW]: { paymentId: string }\n  [componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS]: {\n    contractor?: Contractor\n    paymentGroupId: string\n  }\n  [componentEvents.CONTRACTOR_PAYMENT_CANCEL]: { paymentId: string }\n  [componentEvents.BREADCRUMB_NAVIGATE]: {\n    key: string\n    onNavigate: (ctx: PaymentFlowContextInterface) => PaymentFlowContextInterface\n  }\n}\n\nexport const paymentFlowBreadcrumbsNodes: BreadcrumbNodes = {\n  landing: {\n    parent: null,\n    item: {\n      id: 'landing',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.PaymentsList',\n      onNavigate: ((ctx: PaymentFlowContextInterface) => ({\n        ...ctx,\n        currentBreadcrumb: 'landing',\n        progressBarType: null,\n        component: PaymentListContextual,\n      })) as (context: unknown) => unknown,\n    },\n  },\n  createPayment: {\n    parent: 'landing',\n    item: {\n      id: 'createPayment',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.CreatePayment',\n      onNavigate: ((ctx: PaymentFlowContextInterface) => ({\n        ...updateBreadcrumbs('createPayment', ctx),\n      })) as (context: unknown) => unknown,\n    },\n  },\n  history: {\n    parent: 'landing',\n    item: {\n      id: 'history',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.PaymentHistory',\n      onNavigate: ((ctx: PaymentFlowContextInterface) => ({\n        ...updateBreadcrumbs('history', ctx),\n        component: PaymentHistoryContextual,\n      })) as (context: unknown) => unknown,\n    },\n  },\n  statement: {\n    parent: 'history',\n    item: {\n      id: 'statement',\n      label: 'breadcrumbLabel',\n      namespace: 'Contractor.Payments.PaymentStatement',\n    },\n  },\n} as const\n\nconst breadcrumbNavigateTransition =\n  createBreadcrumbNavigateTransition<PaymentFlowContextInterface>()\n\nexport const paymentMachine = {\n  landing: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_CREATE,\n      'createPayment',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PAYMENT_CREATE>,\n        ): PaymentFlowContextInterface => {\n          return {\n            ...updateBreadcrumbs('createPayment', ctx),\n            component: CreatePaymentContextual,\n            progressBarType: 'breadcrumbs',\n            alerts: undefined,\n          }\n        },\n      ),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_VIEW,\n      'history',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PAYMENT_VIEW>,\n        ): PaymentFlowContextInterface => {\n          return {\n            ...updateBreadcrumbs('history', ctx),\n            component: PaymentHistoryContextual,\n            currentPaymentId: ev.payload.paymentId,\n            progressBarType: 'breadcrumbs',\n            alerts: undefined,\n          }\n        },\n      ),\n    ),\n  ),\n  createPayment: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_CREATED,\n      'landing',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PAYMENT_CREATED>,\n        ): PaymentFlowContextInterface => {\n          const contractorPaymentGroup = ev.payload\n          const contractorCount = contractorPaymentGroup.contractorPayments?.length || 0\n\n          return {\n            ...updateBreadcrumbs('landing', ctx),\n            progressBarType: null,\n            component: PaymentListContextual,\n            alerts: [\n              {\n                type: 'success',\n                title: 'paymentCreatedSuccessfully',\n                translationParams: {\n                  count: contractorCount,\n                },\n              },\n            ],\n          }\n        },\n      ),\n    ),\n    breadcrumbNavigateTransition('landing'),\n  ),\n  history: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS,\n      'statement',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS\n          >,\n        ): PaymentFlowContextInterface => {\n          return {\n            ...updateBreadcrumbs('statement', ctx, {\n              contractorName: getContractorDisplayName(ev.payload.contractor),\n            }),\n            component: PaymentStatementContextual,\n            currentContractorUuid: ev.payload.contractor?.uuid,\n            currentPaymentId: ev.payload.paymentGroupId,\n            progressBarType: 'breadcrumbs',\n            alerts: undefined,\n          }\n        },\n      ),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_CANCEL,\n      'landing',\n      reduce(\n        (\n          ctx: PaymentFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PAYMENT_CANCEL>,\n        ): PaymentFlowContextInterface => {\n          return {\n            ...updateBreadcrumbs('landing', ctx),\n            progressBarType: null,\n            component: PaymentListContextual,\n            alerts: [\n              {\n                type: 'success',\n                title: 'paymentCancelledSuccessfully',\n              },\n            ],\n          }\n        },\n      ),\n    ),\n    breadcrumbNavigateTransition('landing'),\n  ),\n  statement: state<MachineTransition>(\n    breadcrumbNavigateTransition('landing'),\n    breadcrumbNavigateTransition('history'),\n  ),\n}\n"],"names":["paymentFlowBreadcrumbsNodes","ctx","PaymentListContextual","updateBreadcrumbs","PaymentHistoryContextual","breadcrumbNavigateTransition","createBreadcrumbNavigateTransition","paymentMachine","state","transition","componentEvents","reduce","ev","CreatePaymentContextual","contractorCount","getContractorDisplayName","PaymentStatementContextual"],"mappings":"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"}

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistory.d.ts

@@ -1,8 +1,7 @@
 import { BaseComponentInterface } from '../../../Base';
 interface PaymentHistoryProps extends BaseComponentInterface<'Contractor.Payments.PaymentHistory'> {
-    companyId: string;
     paymentId: string;
 }
 export declare function PaymentHistory(props: PaymentHistoryProps): import("react/jsx-runtime").JSX.Element;
-export declare const Root: ({ companyId, paymentId, dictionary, onEvent }: PaymentHistoryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ paymentId, dictionary, onEvent }: PaymentHistoryProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistory.js

@@ -1,26 +1,51 @@
-import { jsx as t, Fragment as e } from "react/jsx-runtime";
-import { PaymentHistoryPresentation as r } from "./PaymentHistoryPresentation.js";
-import { useComponentDictionary as m } from "../../../../i18n/I18n.js";
-import { BaseComponent as a } from "../../../Base/Base.js";
-import "../../../Base/useBase.js";
-function l(n) {
-  return /* @__PURE__ */ t(a, { ...n, children: /* @__PURE__ */ t(i, { ...n, children: n.children }) });
+import { jsx as n, Fragment as f } from "react/jsx-runtime";
+import { useContractorPaymentGroupsGetSuspense as G } from "@gusto/embedded-api/react-query/contractorPaymentGroupsGet";
+import { useContractorsListSuspense as T } from "@gusto/embedded-api/react-query/contractorsList";
+import { useContractorPaymentsDeleteMutation as h } from "@gusto/embedded-api/react-query/contractorPaymentsDelete";
+import { useTranslation as A } from "react-i18next";
+import { PaymentHistoryPresentation as w } from "./PaymentHistoryPresentation.js";
+import { useComponentDictionary as E } from "../../../../i18n/I18n.js";
+import { BaseComponent as N } from "../../../Base/Base.js";
+import { useBase as R } from "../../../Base/useBase.js";
+import { componentEvents as m } from "../../../../shared/constants.js";
+function b(t) {
+  return /* @__PURE__ */ n(N, { ...t, children: /* @__PURE__ */ n(H, { ...t, children: t.children }) });
 }
-const i = ({ companyId: n, paymentId: y, dictionary: o, onEvent: c }) => (m("Contractor.Payments.PaymentHistory", o), /* @__PURE__ */ t(e, { children: /* @__PURE__ */ t(
-  r,
-  {
-    date: "2025-12-17",
-    payments: [],
-    onBack: () => {
-    },
-    onViewPayment: () => {
-    },
-    onCancelPayment: () => {
+const H = ({ paymentId: t, dictionary: s, onEvent: e }) => {
+  E("Contractor.Payments.PaymentHistory", s);
+  const { t: i } = A("Contractor.Payments.PaymentHistory"), { baseSubmitHandler: y } = R(), { data: r } = G({
+    contractorPaymentGroupUuid: t
+  });
+  if (!r.contractorPaymentGroup)
+    throw new Error(i("errors.paymentGroupNotFound"));
+  const a = r.contractorPaymentGroup.companyUuid, { data: u } = T({ companyUuid: a }), c = u.contractorList || [], { mutateAsync: p, isPending: P } = h(), d = (o) => {
+    e(m.CONTRACTOR_PAYMENT_VIEW_DETAILS, {
+      contractor: c.find((l) => l.uuid === o),
+      paymentGroupId: t
+    });
+  }, C = async (o) => {
+    await y(o, async () => {
+      await p({
+        request: {
+          contractorPaymentId: o,
+          companyId: a
+        }
+      });
+    }), e(m.CONTRACTOR_PAYMENT_CANCEL, { paymentId: o });
+  };
+  return /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
+    w,
+    {
+      paymentGroup: r.contractorPaymentGroup,
+      contractors: c,
+      isCancelling: P,
+      onViewPayment: d,
+      onCancelPayment: C
     }
-  }
-) }));
+  ) });
+};
 export {
-  l as PaymentHistory,
-  i as Root
+  b as PaymentHistory,
+  H as Root
 };
 //# sourceMappingURL=PaymentHistory.js.map

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistory.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentHistory.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistory.tsx"],"sourcesContent":["import { PaymentHistoryPresentation } from './PaymentHistoryPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\n\ninterface PaymentHistoryProps extends BaseComponentInterface<'Contractor.Payments.PaymentHistory'> {\n  companyId: string\n  paymentId: string\n}\n\nexport function PaymentHistory(props: PaymentHistoryProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ companyId, paymentId, dictionary, onEvent }: PaymentHistoryProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentHistory', dictionary)\n\n  return (\n    <>\n      <PaymentHistoryPresentation\n        date={'2025-12-17'}\n        payments={[]}\n        onBack={() => {}}\n        onViewPayment={() => {}}\n        onCancelPayment={() => {}}\n      />\n    </>\n  )\n}\n"],"names":["PaymentHistory","props","jsx","BaseComponent","Root","companyId","paymentId","dictionary","onEvent","useComponentDictionary","Fragment","PaymentHistoryPresentation"],"mappings":";;;;;AASO,SAASA,EAAeC,GAA4B;AACzD,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,WAAAC,GAAW,YAAAC,GAAY,SAAAC,SACvDC,EAAuB,sCAAsCF,CAAU,GAGrE,gBAAAL,EAAAQ,GAAA,EACE,UAAA,gBAAAR;AAAA,EAACS;AAAA,EAAA;AAAA,IACC,MAAM;AAAA,IACN,UAAU,CAAA;AAAA,IACV,QAAQ,MAAM;AAAA,IAAC;AAAA,IACf,eAAe,MAAM;AAAA,IAAC;AAAA,IACtB,iBAAiB,MAAM;AAAA,IAAC;AAAA,EAAA;AAAA,GAE5B;"}
+{"version":3,"file":"PaymentHistory.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistory.tsx"],"sourcesContent":["import { useContractorPaymentGroupsGetSuspense } from '@gusto/embedded-api/react-query/contractorPaymentGroupsGet'\nimport { useContractorsListSuspense } from '@gusto/embedded-api/react-query/contractorsList'\nimport { useContractorPaymentsDeleteMutation } from '@gusto/embedded-api/react-query/contractorPaymentsDelete'\nimport { useTranslation } from 'react-i18next'\nimport { PaymentHistoryPresentation } from './PaymentHistoryPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\ninterface PaymentHistoryProps extends BaseComponentInterface<'Contractor.Payments.PaymentHistory'> {\n  paymentId: string\n}\n\nexport function PaymentHistory(props: PaymentHistoryProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ paymentId, dictionary, onEvent }: PaymentHistoryProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentHistory', dictionary)\n  const { t } = useTranslation('Contractor.Payments.PaymentHistory')\n  const { baseSubmitHandler } = useBase()\n\n  const { data: paymentGroupResponse } = useContractorPaymentGroupsGetSuspense({\n    contractorPaymentGroupUuid: paymentId,\n  })\n  if (!paymentGroupResponse.contractorPaymentGroup) {\n    throw new Error(t('errors.paymentGroupNotFound'))\n  }\n\n  const companyId = paymentGroupResponse.contractorPaymentGroup.companyUuid!\n\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = contractorList.contractorList || []\n\n  const { mutateAsync: cancelPayment, isPending: isCancelling } =\n    useContractorPaymentsDeleteMutation()\n\n  const handleViewPayment = (contractorUuid: string) => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS, {\n      contractor: contractors.find(c => c.uuid === contractorUuid),\n      paymentGroupId: paymentId,\n    })\n  }\n\n  const handleCancelPayment = async (paymentId: string) => {\n    await baseSubmitHandler(paymentId, async () => {\n      await cancelPayment({\n        request: {\n          contractorPaymentId: paymentId,\n          companyId,\n        },\n      })\n    })\n\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_CANCEL, { paymentId })\n  }\n\n  return (\n    <>\n      <PaymentHistoryPresentation\n        paymentGroup={paymentGroupResponse.contractorPaymentGroup}\n        contractors={contractors}\n        isCancelling={isCancelling}\n        onViewPayment={handleViewPayment}\n        onCancelPayment={handleCancelPayment}\n      />\n    </>\n  )\n}\n"],"names":["PaymentHistory","props","jsx","BaseComponent","Root","paymentId","dictionary","onEvent","useComponentDictionary","t","useTranslation","baseSubmitHandler","useBase","paymentGroupResponse","useContractorPaymentGroupsGetSuspense","companyId","contractorList","useContractorsListSuspense","contractors","cancelPayment","isCancelling","useContractorPaymentsDeleteMutation","handleViewPayment","contractorUuid","componentEvents","c","handleCancelPayment","Fragment","PaymentHistoryPresentation"],"mappings":";;;;;;;;;;AAaO,SAASA,EAAeC,GAA4B;AACzD,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,YAAAC,GAAY,SAAAC,QAAmC;AAC/E,EAAAC,EAAuB,sCAAsCF,CAAU;AACvE,QAAM,EAAE,GAAAG,EAAA,IAAMC,EAAe,oCAAoC,GAC3D,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GAExB,EAAE,MAAMC,EAAA,IAAyBC,EAAsC;AAAA,IAC3E,4BAA4BT;AAAA,EAAA,CAC7B;AACD,MAAI,CAACQ,EAAqB;AACxB,UAAM,IAAI,MAAMJ,EAAE,6BAA6B,CAAC;AAGlD,QAAMM,IAAYF,EAAqB,uBAAuB,aAExD,EAAE,MAAMG,EAAA,IAAmBC,EAA2B,EAAE,aAAaF,GAAW,GAChFG,IAAcF,EAAe,kBAAkB,CAAA,GAE/C,EAAE,aAAaG,GAAe,WAAWC,EAAA,IAC7CC,EAAA,GAEIC,IAAoB,CAACC,MAA2B;AACpD,IAAAhB,EAAQiB,EAAgB,iCAAiC;AAAA,MACvD,YAAYN,EAAY,KAAK,CAAAO,MAAKA,EAAE,SAASF,CAAc;AAAA,MAC3D,gBAAgBlB;AAAA,IAAA,CACjB;AAAA,EACH,GAEMqB,IAAsB,OAAOrB,MAAsB;AACvD,UAAMM,EAAkBN,GAAW,YAAY;AAC7C,YAAMc,EAAc;AAAA,QAClB,SAAS;AAAA,UACP,qBAAqBd;AAAAA,UACrB,WAAAU;AAAA,QAAA;AAAA,MACF,CACD;AAAA,IACH,CAAC,GAEDR,EAAQiB,EAAgB,2BAA2B,EAAE,WAAAnB,GAAW;AAAA,EAClE;AAEA,SACE,gBAAAH,EAAAyB,GAAA,EACE,UAAA,gBAAAzB;AAAA,IAAC0B;AAAA,IAAA;AAAA,MACC,cAAcf,EAAqB;AAAA,MACnC,aAAAK;AAAA,MACA,cAAAE;AAAA,MACA,eAAeE;AAAA,MACf,iBAAiBI;AAAA,IAAA;AAAA,EAAA,GAErB;AAEJ;"}

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.d.ts

@@ -1,20 +1,11 @@
-interface PaymentData {
-    id: string;
-    name: string;
-    wageType: string;
-    paymentMethod: string;
-    hours: number;
-    wage: string;
-    bonus: number;
-    reimbursement: number;
-    total: number;
-}
+import { ContractorPaymentGroup } from '@gusto/embedded-api/models/components/contractorpaymentgroup';
+import { Contractor } from '@gusto/embedded-api/models/components/contractor';
 interface PaymentHistoryPresentationProps {
-    date: string;
-    payments: PaymentData[];
-    onBack: () => void;
+    paymentGroup: ContractorPaymentGroup;
+    contractors: Contractor[];
     onViewPayment: (paymentId: string) => void;
     onCancelPayment: (paymentId: string) => void;
+    isCancelling: boolean;
 }
-export declare const PaymentHistoryPresentation: ({ date, payments, onBack, onViewPayment, onCancelPayment, }: PaymentHistoryPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaymentHistoryPresentation: ({ paymentGroup, contractors, onViewPayment, onCancelPayment, isCancelling, }: PaymentHistoryPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.js

@@ -1,114 +1,130 @@
-import { jsxs as i, jsx as r, Fragment as y } from "react/jsx-runtime";
-import { useTranslation as f } from "react-i18next";
-import { Flex as o } from "../../../Common/Flex/Flex.js";
+import { jsxs as l, jsx as t, Fragment as D } from "react/jsx-runtime";
+import { useTranslation as N, Trans as x } from "react-i18next";
+import { getContractorDisplayName as C } from "../CreatePayment/helpers.js";
+import h from "./PaymentHistoryPresentation.module.scss.js";
+import { Flex as m } from "../../../Common/Flex/Flex.js";
 import "classnames";
 import "../../../../shared/constants.js";
-import { EmptyData as H } from "../../../Common/EmptyData/EmptyData.js";
-import { ActionsLayout as g } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { HamburgerMenu as C } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as x } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as D } from "../../../../i18n/I18n.js";
-import { formatNumberAsCurrency as c } from "../../../../helpers/formattedStrings.js";
-import { useLocale as P } from "../../../../contexts/LocaleProvider/useLocale.js";
+import { EmptyData as P } from "../../../Common/EmptyData/EmptyData.js";
+import { HamburgerMenu as F } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as S } from "../../../../i18n/I18n.js";
 import { formatHoursDisplay as k } from "../../../Payroll/helpers.js";
-import { DataView as v } from "../../../Common/DataView/DataView.js";
-const G = ({
-  date: u,
-  payments: m,
-  onBack: s,
-  onViewPayment: d,
-  onCancelPayment: b
+import w from "../../../../hooks/useNumberFormatter.js";
+import { useDateFormatter as L } from "../../../../hooks/useDateFormatter.js";
+import M from "../../../../assets/icons/eye.svg.js";
+import T from "../../../../assets/icons/slash-circle.svg.js";
+import { DataView as j } from "../../../Common/DataView/DataView.js";
+const $ = ({
+  paymentGroup: s,
+  contractors: b,
+  onViewPayment: c,
+  onCancelPayment: f,
+  isCancelling: y
 }) => {
-  const { Button: a, Text: n, Heading: p } = x();
-  D("Contractor.Payments.PaymentHistory");
-  const { t: e } = f("Contractor.Payments.PaymentHistory"), { locale: l } = P();
-  return /* @__PURE__ */ i(o, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ i(o, { flexDirection: "column", gap: 8, children: [
-      /* @__PURE__ */ r(p, { as: "h1", children: e("title") }),
-      /* @__PURE__ */ r(n, { children: e("subtitle", { date: u }) })
+  const { Button: g, Text: n, Heading: d } = v();
+  S("Contractor.Payments.PaymentHistory");
+  const { t: r } = N("Contractor.Payments.PaymentHistory"), o = w("currency"), { formatLongWithYear: H } = L(), p = s.contractorPayments || [];
+  return /* @__PURE__ */ l(m, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ l(m, { flexDirection: "column", gap: 8, children: [
+      /* @__PURE__ */ t(d, { as: "h2", children: r("title") }),
+      /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
+        x,
+        {
+          i18nKey: "subtitle",
+          t: r,
+          values: { date: H(s.debitDate) },
+          components: {
+            strong: /* @__PURE__ */ t(n, { weight: "bold", as: "span" })
+          }
+        }
+      ) })
     ] }),
-    /* @__PURE__ */ i(o, { flexDirection: "column", gap: 16, children: [
-      /* @__PURE__ */ r(p, { as: "h2", children: e("paymentsSection") }),
-      m.length === 0 ? /* @__PURE__ */ r(H, { title: e("noPaymentsFound"), description: e("noPaymentsDescription"), children: /* @__PURE__ */ r(g, { justifyContent: "center", children: /* @__PURE__ */ r(a, { variant: "primary", onClick: s, children: e("backButton") }) }) }) : /* @__PURE__ */ i(y, { children: [
-        /* @__PURE__ */ r(
-          v,
-          {
-            columns: [
-              {
-                title: e("tableHeaders.contractor"),
-                render: ({ name: t, id: h }) => /* @__PURE__ */ r(
-                  a,
-                  {
-                    variant: "tertiary",
-                    onClick: () => {
-                      d(h);
-                    },
-                    children: t
-                  }
-                )
-              },
-              {
-                title: e("tableHeaders.wageType"),
-                render: ({ wageType: t }) => /* @__PURE__ */ r(n, { children: t })
-              },
-              {
-                title: e("tableHeaders.paymentMethod"),
-                render: ({ paymentMethod: t }) => /* @__PURE__ */ r(n, { children: t })
-              },
-              {
-                title: e("tableHeaders.hours"),
-                render: ({ hours: t }) => /* @__PURE__ */ r(n, { children: t ? k(t) : "–" })
-              },
+    /* @__PURE__ */ l(m, { flexDirection: "column", gap: 16, children: [
+      /* @__PURE__ */ t(d, { as: "h2", children: r("paymentsSection") }),
+      p.length === 0 ? /* @__PURE__ */ t(P, { title: r("noPaymentsFound"), description: r("noPaymentsDescription") }) : /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(
+        j,
+        {
+          columns: [
+            {
+              title: r("tableHeaders.contractor"),
+              render: ({ contractorUuid: e }) => /* @__PURE__ */ t(
+                g,
+                {
+                  variant: "tertiary",
+                  onClick: () => {
+                    c(e);
+                  },
+                  children: C(
+                    b.find((i) => i.uuid === e)
+                  )
+                }
+              )
+            },
+            {
+              title: r("tableHeaders.wageType"),
+              render: ({ wageType: e }) => /* @__PURE__ */ t(n, { children: e })
+            },
+            {
+              title: r("tableHeaders.paymentMethod"),
+              render: ({ paymentMethod: e }) => /* @__PURE__ */ t(n, { children: e })
+            },
+            {
+              title: r("tableHeaders.hours"),
+              render: ({ hours: e }) => /* @__PURE__ */ t(n, { children: e ? k(Number(e)) : "–" })
+            },
+            {
+              title: r("tableHeaders.wage"),
+              render: ({ wage: e }) => /* @__PURE__ */ t(n, { children: e || "–" })
+            },
+            {
+              title: r("tableHeaders.bonus"),
+              render: ({ bonus: e }) => /* @__PURE__ */ t(n, { children: e ? o(Number(e)) : "–" })
+            },
+            {
+              title: r("tableHeaders.reimbursements"),
+              render: ({ reimbursement: e }) => /* @__PURE__ */ t(n, { children: e ? o(Number(e)) : "–" })
+            },
+            {
+              title: r("tableHeaders.total"),
+              render: ({ wageTotal: e, reimbursement: i, bonus: a }) => /* @__PURE__ */ t(n, { children: e ? o(
+                Number(e) + Number(i) + Number(a)
+              ) : "–" })
+            }
+          ],
+          itemMenu: ({ contractorUuid: e, mayCancel: i, uuid: a }) => {
+            const u = [
               {
-                title: e("tableHeaders.wage"),
-                render: ({ wage: t }) => /* @__PURE__ */ r(n, { children: t || "–" })
-              },
-              {
-                title: e("tableHeaders.bonus"),
-                render: ({ bonus: t }) => /* @__PURE__ */ r(n, { children: t ? c(t, l) : "–" })
-              },
-              {
-                title: e("tableHeaders.reimbursements"),
-                render: ({ reimbursement: t }) => /* @__PURE__ */ r(n, { children: c(t, l) })
-              },
-              {
-                title: e("tableHeaders.total"),
-                render: ({ total: t }) => /* @__PURE__ */ r(n, { children: c(t, l) })
+                label: r("actions.view"),
+                onClick: () => {
+                  c(e);
+                },
+                icon: /* @__PURE__ */ t("span", { className: h.icon, children: /* @__PURE__ */ t(M, { "aria-hidden": !0 }) })
+              }
+            ];
+            return i && u.push({
+              label: r("actions.cancel"),
+              onClick: () => {
+                f(a);
               },
+              icon: /* @__PURE__ */ t("span", { className: h.icon, children: /* @__PURE__ */ t(T, { "aria-hidden": !0 }) })
+            }), /* @__PURE__ */ t(
+              F,
               {
-                title: e("tableHeaders.action"),
-                render: ({ id: t, name: h }) => /* @__PURE__ */ r(
-                  C,
-                  {
-                    items: [
-                      {
-                        label: e("actions.view"),
-                        onClick: () => {
-                          d(t);
-                        }
-                      },
-                      {
-                        label: e("actions.cancel"),
-                        onClick: () => {
-                          b(t);
-                        }
-                      }
-                    ],
-                    triggerLabel: e("tableHeaders.action")
-                  }
-                )
+                items: u,
+                triggerLabel: r("tableHeaders.action"),
+                isLoading: y
               }
-            ],
-            data: m,
-            label: e("title")
-          }
-        ),
-        /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(a, { onClick: s, variant: "secondary", children: e("backButton") }) })
-      ] })
+            );
+          },
+          data: p,
+          label: r("title")
+        }
+      ) })
     ] })
   ] });
 };
 export {
-  G as PaymentHistoryPresentation
+  $ as PaymentHistoryPresentation
 };
 //# sourceMappingURL=PaymentHistoryPresentation.js.map