@gusto/embedded-react-sdk 0.14.1 → 0.16.0

package/dist/components/Employee/EmployeeList/EmployeeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmployeeList.js","sources":["../../../../src/components/Employee/EmployeeList/EmployeeList.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useEmployeesList } from '@gusto/embedded-api/react-query/employeesList'\nimport type { OnboardingStatus } from '@gusto/embedded-api/models/operations/putv1employeesemployeeidonboardingstatus'\nimport { useEmployeesDeleteMutation } from '@gusto/embedded-api/react-query/employeesDelete'\nimport { useEmployeesUpdateOnboardingStatusMutation } from '@gusto/embedded-api/react-query/employeesUpdateOnboardingStatus'\nimport { keepPreviousData } from '@tanstack/react-query'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlowComponents'\nimport { EmployeeListProvider } from './useEmployeeList'\nimport { Actions } from './Actions'\nimport {\n  BaseComponent,\n  type BaseComponentInterface,\n  type CommonComponentInterface,\n} from '@/components/Base/Base'\nimport { useBase } from '@/components/Base/useBase'\nimport { Flex, Loading } from '@/components/Common'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents, EmployeeOnboardingStatus } from '@/shared/constants'\nimport { Head } from '@/components/Employee/EmployeeList/Head'\nimport { List } from '@/components/Employee/EmployeeList/List'\nimport { useFlow } from '@/components/Flow/useFlow'\n\n//Interface for component specific props\ninterface EmployeeListProps extends CommonComponentInterface<'Employee.EmployeeList'> {\n  companyId: string\n}\n\nexport function EmployeeList(props: EmployeeListProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\nfunction Root({ companyId, className, children, dictionary }: EmployeeListProps) {\n  //Using i18n hook to directly load necessary namespace\n  useI18n('Employee.EmployeeList')\n  useComponentDictionary('Employee.EmployeeList', dictionary)\n  //Getting props from base context\n  const { onEvent, baseSubmitHandler } = useBase()\n  const [currentPage, setCurrentPage] = useState(1)\n  const [itemsPerPage, setItemsPerPage] = useState(5)\n\n  const { data, fetchStatus, isFetching } = useEmployeesList(\n    {\n      companyId,\n      page: currentPage,\n      per: itemsPerPage,\n    },\n    { placeholderData: keepPreviousData },\n  )\n\n  const { mutateAsync: deleteEmployeeMutation } = useEmployeesDeleteMutation()\n  const { mutateAsync: updateEmployeeOnboardingStatusMutation } =\n    useEmployeesUpdateOnboardingStatusMutation()\n\n  if (fetchStatus === 'fetching' && !data) {\n    return <Loading />\n  }\n  const { httpMeta, showEmployees: employeeList } = data!\n  const employees = employeeList!\n\n  const totalPages = Number(httpMeta.response.headers.get('x-total-pages') ?? 1)\n\n  const handleItemsPerPageChange = (newCount: number) => {\n    setItemsPerPage(newCount)\n  }\n  const handleFirstPage = () => {\n    setCurrentPage(1)\n  }\n  const handlePreviousPage = () => {\n    setCurrentPage(prevPage => Math.max(prevPage - 1, 1))\n  }\n  const handleNextPage = () => {\n    setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages))\n  }\n  const handleLastPage = () => {\n    setCurrentPage(totalPages)\n  }\n  const handleDelete = async (uuid: string) => {\n    await baseSubmitHandler(uuid, async payload => {\n      await deleteEmployeeMutation({\n        request: { employeeId: payload },\n      })\n\n      onEvent(componentEvents.EMPLOYEE_DELETED, { employeeId: payload })\n    })\n  }\n  /**Set onboarding status to self_onboarding_awaiting_admin_review and proceed to edit */\n  const handleReview = async (data: string) => {\n    await baseSubmitHandler(data, async employeeId => {\n      await updateOnboardingStatus({\n        employeeId,\n        status: EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW,\n      })\n      onEvent(componentEvents.EMPLOYEE_UPDATE, {\n        employeeId,\n        onboardingStatus: EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW,\n      })\n    })\n  }\n  /**Update employee onboarding status reverting it back to admin_onboarding_incomplete */\n  const handleCancelSelfOnboarding = async (data: string) => {\n    await baseSubmitHandler(data, async employeeId => {\n      await updateOnboardingStatus({\n        employeeId,\n        status: EmployeeOnboardingStatus.ADMIN_ONBOARDING_INCOMPLETE,\n      })\n    })\n  }\n  const updateOnboardingStatus = async (data: { employeeId: string; status: OnboardingStatus }) => {\n    await baseSubmitHandler(data, async ({ employeeId, status }) => {\n      const { employeeOnboardingStatus: responseData } =\n        await updateEmployeeOnboardingStatusMutation({\n          request: { employeeId, requestBody: { onboardingStatus: status } },\n        })\n      onEvent(componentEvents.EMPLOYEE_ONBOARDING_STATUS_UPDATED, responseData)\n    })\n  }\n  const handleNew = () => {\n    onEvent(componentEvents.EMPLOYEE_CREATE)\n  }\n  const handleSkip = () => {\n    onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n  }\n\n  const handleEdit = (uuid: string, onboardingStatus?: OnboardingStatus) => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId: uuid, onboardingStatus })\n  }\n  return (\n    <section className={className}>\n      <EmployeeListProvider\n        value={{\n          handleEdit,\n          handleNew,\n          handleReview,\n          handleDelete,\n          employees,\n          currentPage,\n          totalPages,\n          handleFirstPage,\n          handlePreviousPage,\n          handleNextPage,\n          handleLastPage,\n          handleCancelSelfOnboarding,\n          handleItemsPerPageChange,\n          handleSkip,\n          isFetching,\n        }}\n      >\n        {children ? (\n          children\n        ) : (\n          <Flex flexDirection=\"column\">\n            <Head />\n            <List />\n            <Actions />\n          </Flex>\n        )}\n      </EmployeeListProvider>\n    </section>\n  )\n}\n\n/**\n * Wrapper used inside Flows -> exposes flow context for required parameters\n */\nexport const EmployeeListContextual = () => {\n  const { companyId, onEvent } = useFlow<OnboardingContextInterface>()\n  return <EmployeeList companyId={companyId} onEvent={onEvent} />\n}\n"],"names":["EmployeeList","props","jsx","BaseComponent","Root","companyId","className","children","dictionary","useI18n","useComponentDictionary","onEvent","baseSubmitHandler","useBase","currentPage","setCurrentPage","useState","itemsPerPage","setItemsPerPage","data","fetchStatus","isFetching","useEmployeesList","keepPreviousData","deleteEmployeeMutation","useEmployeesDeleteMutation","updateEmployeeOnboardingStatusMutation","useEmployeesUpdateOnboardingStatusMutation","Loading","httpMeta","employeeList","employees","totalPages","handleItemsPerPageChange","newCount","handleFirstPage","handlePreviousPage","prevPage","handleNextPage","handleLastPage","handleDelete","uuid","payload","componentEvents","handleReview","employeeId","updateOnboardingStatus","EmployeeOnboardingStatus","handleCancelSelfOnboarding","status","responseData","EmployeeListProvider","onboardingStatus","jsxs","Flex","Head","List","Actions","EmployeeListContextual","useFlow"],"mappings":"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"}
+{"version":3,"file":"EmployeeList.js","sources":["../../../../src/components/Employee/EmployeeList/EmployeeList.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useEmployeesList } from '@gusto/embedded-api/react-query/employeesList'\nimport type { OnboardingStatus } from '@gusto/embedded-api/models/operations/putv1employeesemployeeidonboardingstatus'\nimport { useEmployeesDeleteMutation } from '@gusto/embedded-api/react-query/employeesDelete'\nimport { useEmployeesUpdateOnboardingStatusMutation } from '@gusto/embedded-api/react-query/employeesUpdateOnboardingStatus'\nimport { keepPreviousData } from '@tanstack/react-query'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlowComponents'\nimport { EmployeeListProvider } from './useEmployeeList'\nimport { Actions } from './Actions'\nimport {\n  BaseComponent,\n  type BaseComponentInterface,\n  type CommonComponentInterface,\n} from '@/components/Base/Base'\nimport { useBase } from '@/components/Base/useBase'\nimport { Flex, Loading } from '@/components/Common'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents, EmployeeOnboardingStatus } from '@/shared/constants'\nimport { Head } from '@/components/Employee/EmployeeList/Head'\nimport { List } from '@/components/Employee/EmployeeList/List'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport type { PaginationItemsPerPage } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\n//Interface for component specific props\ninterface EmployeeListProps extends CommonComponentInterface<'Employee.EmployeeList'> {\n  companyId: string\n}\n\nexport function EmployeeList(props: EmployeeListProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\nfunction Root({ companyId, className, children, dictionary }: EmployeeListProps) {\n  //Using i18n hook to directly load necessary namespace\n  useI18n('Employee.EmployeeList')\n  useComponentDictionary('Employee.EmployeeList', dictionary)\n  //Getting props from base context\n  const { onEvent, baseSubmitHandler } = useBase()\n  const [currentPage, setCurrentPage] = useState(1)\n  const [itemsPerPage, setItemsPerPage] = useState<PaginationItemsPerPage>(5)\n\n  const { data, fetchStatus, isFetching } = useEmployeesList(\n    {\n      companyId,\n      page: currentPage,\n      per: itemsPerPage,\n    },\n    { placeholderData: keepPreviousData },\n  )\n\n  const { mutateAsync: deleteEmployeeMutation } = useEmployeesDeleteMutation()\n  const { mutateAsync: updateEmployeeOnboardingStatusMutation } =\n    useEmployeesUpdateOnboardingStatusMutation()\n\n  if (fetchStatus === 'fetching' && !data) {\n    return <Loading />\n  }\n  const { httpMeta, showEmployees: employeeList } = data!\n  const employees = employeeList!\n\n  const totalPages = Number(httpMeta.response.headers.get('x-total-pages') ?? 1)\n\n  const handleItemsPerPageChange = (newCount: PaginationItemsPerPage) => {\n    setItemsPerPage(newCount)\n  }\n  const handleFirstPage = () => {\n    setCurrentPage(1)\n  }\n  const handlePreviousPage = () => {\n    setCurrentPage(prevPage => Math.max(prevPage - 1, 1))\n  }\n  const handleNextPage = () => {\n    setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages))\n  }\n  const handleLastPage = () => {\n    setCurrentPage(totalPages)\n  }\n  const handleDelete = async (uuid: string) => {\n    await baseSubmitHandler(uuid, async payload => {\n      await deleteEmployeeMutation({\n        request: { employeeId: payload },\n      })\n\n      onEvent(componentEvents.EMPLOYEE_DELETED, { employeeId: payload })\n    })\n  }\n  /**Set onboarding status to self_onboarding_awaiting_admin_review and proceed to edit */\n  const handleReview = async (data: string) => {\n    await baseSubmitHandler(data, async employeeId => {\n      await updateOnboardingStatus({\n        employeeId,\n        status: EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW,\n      })\n      onEvent(componentEvents.EMPLOYEE_UPDATE, {\n        employeeId,\n        onboardingStatus: EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW,\n      })\n    })\n  }\n  /**Update employee onboarding status reverting it back to admin_onboarding_incomplete */\n  const handleCancelSelfOnboarding = async (data: string) => {\n    await baseSubmitHandler(data, async employeeId => {\n      await updateOnboardingStatus({\n        employeeId,\n        status: EmployeeOnboardingStatus.ADMIN_ONBOARDING_INCOMPLETE,\n      })\n    })\n  }\n  const updateOnboardingStatus = async (data: { employeeId: string; status: OnboardingStatus }) => {\n    await baseSubmitHandler(data, async ({ employeeId, status }) => {\n      const { employeeOnboardingStatus: responseData } =\n        await updateEmployeeOnboardingStatusMutation({\n          request: { employeeId, requestBody: { onboardingStatus: status } },\n        })\n      onEvent(componentEvents.EMPLOYEE_ONBOARDING_STATUS_UPDATED, responseData)\n    })\n  }\n  const handleNew = () => {\n    onEvent(componentEvents.EMPLOYEE_CREATE)\n  }\n  const handleSkip = () => {\n    onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n  }\n\n  const handleEdit = (uuid: string, onboardingStatus?: OnboardingStatus) => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId: uuid, onboardingStatus })\n  }\n  return (\n    <section className={className}>\n      <EmployeeListProvider\n        value={{\n          handleEdit,\n          handleNew,\n          handleReview,\n          handleDelete,\n          employees,\n          currentPage,\n          totalPages,\n          handleFirstPage,\n          handlePreviousPage,\n          handleNextPage,\n          handleLastPage,\n          handleCancelSelfOnboarding,\n          handleItemsPerPageChange,\n          handleSkip,\n          itemsPerPage,\n          isFetching,\n        }}\n      >\n        {children ? (\n          children\n        ) : (\n          <Flex flexDirection=\"column\">\n            <Head />\n            <List />\n            <Actions />\n          </Flex>\n        )}\n      </EmployeeListProvider>\n    </section>\n  )\n}\n\n/**\n * Wrapper used inside Flows -> exposes flow context for required parameters\n */\nexport const EmployeeListContextual = () => {\n  const { companyId, onEvent } = useFlow<OnboardingContextInterface>()\n  return <EmployeeList companyId={companyId} onEvent={onEvent} />\n}\n"],"names":["EmployeeList","props","jsx","BaseComponent","Root","companyId","className","children","dictionary","useI18n","useComponentDictionary","onEvent","baseSubmitHandler","useBase","currentPage","setCurrentPage","useState","itemsPerPage","setItemsPerPage","data","fetchStatus","isFetching","useEmployeesList","keepPreviousData","deleteEmployeeMutation","useEmployeesDeleteMutation","updateEmployeeOnboardingStatusMutation","useEmployeesUpdateOnboardingStatusMutation","Loading","httpMeta","employeeList","employees","totalPages","handleItemsPerPageChange","newCount","handleFirstPage","handlePreviousPage","prevPage","handleNextPage","handleLastPage","handleDelete","uuid","payload","componentEvents","handleReview","employeeId","updateOnboardingStatus","EmployeeOnboardingStatus","handleCancelSelfOnboarding","status","responseData","EmployeeListProvider","onboardingStatus","jsxs","Flex","Head","List","Actions","EmployeeListContextual","useFlow"],"mappings":"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"}

package/dist/components/Employee/EmployeeList/List.js

@@ -1,21 +1,21 @@
-import { jsx as e, jsxs as c, Fragment as A } from "react/jsx-runtime";
-import { useTranslation as T } from "react-i18next";
-import { useState as k } from "react";
-import w from "./List.module.scss.js";
-import { useEmployeeList as B } from "./useEmployeeList.js";
+import { jsx as a, jsxs as c, Fragment as T } from "react/jsx-runtime";
+import { useTranslation as k } from "react-i18next";
+import { useState as w } from "react";
+import B from "./List.module.scss.js";
+import { useEmployeeList as M } from "./useEmployeeList.js";
 import "classnames";
-import { EmptyData as M } from "../../Common/EmptyData/EmptyData.js";
+import { EmptyData as y } from "../../Common/EmptyData/EmptyData.js";
 import { ActionsLayout as h } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as y } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { EmployeeOnboardingStatusBadge as G } from "../../Common/OnboardingStatusBadge/index.js";
+import { useComponentContext as G } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { EmployeeOnboardingStatusBadge as R } from "../../Common/OnboardingStatusBadge/index.js";
 import s from "../../../assets/icons/pencil.svg.js";
-import R from "../../../assets/icons/trashcan.svg.js";
-import { EmployeeOnboardingStatus as i, EmployeeSelfOnboardingStatuses as F } from "../../../shared/constants.js";
-import { firstLastName as x } from "../../../helpers/formattedStrings.js";
-import { HamburgerMenu as V } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useDataView as j } from "../../Common/DataView/useDataView.js";
-import { DataView as W } from "../../Common/DataView/DataView.js";
-const ot = () => {
+import F from "../../../assets/icons/trashcan.svg.js";
+import { EmployeeOnboardingStatus as i, EmployeeSelfOnboardingStatuses as x } from "../../../shared/constants.js";
+import { firstLastName as V } from "../../../helpers/formattedStrings.js";
+import { HamburgerMenu as j } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useDataView as W } from "../../Common/DataView/useDataView.js";
+import { DataView as Y } from "../../Common/DataView/DataView.js";
+const st = () => {
   const {
     handleDelete: g,
     employees: d,
@@ -29,25 +29,26 @@ const ot = () => {
     handleLastPage: N,
     handleItemsPerPageChange: L,
     currentPage: O,
-    totalPages: _,
+    totalPages: P,
+    itemsPerPage: _,
     handleSkip: D,
     isFetching: I
-  } = B(), r = y(), { t: a } = T("Employee.EmployeeList"), [P, u] = k(/* @__PURE__ */ new Set()), { ...v } = j({
+  } = M(), r = G(), { t: e } = k("Employee.EmployeeList"), [v, u] = w(/* @__PURE__ */ new Set()), { ...A } = W({
     data: d,
     columns: [
       {
         key: "name",
-        title: a("nameLabel"),
-        render: (t) => x({
+        title: e("nameLabel"),
+        render: (t) => V({
           first_name: t.firstName,
           last_name: t.lastName
         })
       },
       {
         key: "status",
-        title: a("statusLabel"),
-        render: ({ onboarded: t, onboardingStatus: n }) => /* @__PURE__ */ e(
-          G,
+        title: e("statusLabel"),
+        render: ({ onboarded: t, onboardingStatus: n }) => /* @__PURE__ */ a(
+          R,
           {
             onboarded: t,
             onboardingStatus: n
@@ -58,25 +59,25 @@ const ot = () => {
     itemMenu: (t) => {
       const n = [];
       return (t.onboardingStatus === i.ADMIN_ONBOARDING_INCOMPLETE || t.onboardingStatus === i.SELF_ONBOARDING_PENDING_INVITE || t.onboardingStatus === i.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW || t.onboardingStatus === i.ONBOARDING_COMPLETED) && n.push({
-        label: a("editCta"),
+        label: e("editCta"),
         onClick: () => {
           p(t.uuid, t.onboardingStatus ?? void 0);
         },
-        icon: /* @__PURE__ */ e(s, { "aria-hidden": !0 })
-      }), F.has(t.onboarding_status ?? "") && n.push({
-        label: a("cancelSelfOnboardingCta"),
+        icon: /* @__PURE__ */ a(s, { "aria-hidden": !0 })
+      }), x.has(t.onboarding_status ?? "") && n.push({
+        label: e("cancelSelfOnboardingCta"),
         onClick: async () => {
           await b(t.uuid);
         },
-        icon: /* @__PURE__ */ e(s, { "aria-hidden": !0 })
+        icon: /* @__PURE__ */ a(s, { "aria-hidden": !0 })
       }), t.onboardingStatus === i.SELF_ONBOARDING_COMPLETED_BY_EMPLOYEE && n.push({
-        label: a("reviewCta"),
+        label: e("reviewCta"),
         onClick: () => {
           f(t.uuid);
         },
-        icon: /* @__PURE__ */ e(s, { "aria-hidden": !0 })
+        icon: /* @__PURE__ */ a(s, { "aria-hidden": !0 })
       }), t.onboarded || n.push({
-        label: a("deleteCta"),
+        label: e("deleteCta"),
         onClick: () => {
           u((o) => new Set(o).add(t.uuid)), g(t.uuid).then(() => {
             u((o) => {
@@ -85,13 +86,13 @@ const ot = () => {
             });
           });
         },
-        icon: /* @__PURE__ */ e(R, { "aria-hidden": !0 })
-      }), /* @__PURE__ */ e(
-        V,
+        icon: /* @__PURE__ */ a(F, { "aria-hidden": !0 })
+      }), /* @__PURE__ */ a(
+        j,
         {
           items: n,
-          triggerLabel: a("hamburgerTitle"),
-          isLoading: P.has(t.uuid)
+          triggerLabel: e("hamburgerTitle"),
+          isLoading: v.has(t.uuid)
         }
       );
     },
@@ -103,19 +104,20 @@ const ot = () => {
       handlePreviousPage: S,
       handleItemsPerPageChange: L,
       currentPage: O,
-      totalPages: _
+      totalPages: P,
+      itemsPerPage: _
     },
-    emptyState: () => /* @__PURE__ */ e(M, { title: a("emptyTableTitle"), description: a("emptyTableDescription"), children: /* @__PURE__ */ c(h, { justifyContent: "center", children: [
-      /* @__PURE__ */ e(r.Button, { variant: "secondary", onClick: D, children: a("skipCta") }),
-      /* @__PURE__ */ e(r.Button, { variant: "primary", onClick: l, children: a("addEmployeeCTA") })
+    emptyState: () => /* @__PURE__ */ a(y, { title: e("emptyTableTitle"), description: e("emptyTableDescription"), children: /* @__PURE__ */ c(h, { justifyContent: "center", children: [
+      /* @__PURE__ */ a(r.Button, { variant: "secondary", onClick: D, children: e("skipCta") }),
+      /* @__PURE__ */ a(r.Button, { variant: "primary", onClick: l, children: e("addEmployeeCTA") })
     ] }) })
   });
-  return /* @__PURE__ */ c(A, { children: [
-    d.length > 0 && /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(r.Button, { variant: "secondary", onClick: l, children: a("addAnotherCta") }) }),
-    /* @__PURE__ */ e("div", { className: w.container, children: /* @__PURE__ */ e(W, { label: a("employeeListLabel"), ...v }) })
+  return /* @__PURE__ */ c(T, { children: [
+    d.length > 0 && /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(r.Button, { variant: "secondary", onClick: l, children: e("addAnotherCta") }) }),
+    /* @__PURE__ */ a("div", { className: B.container, children: /* @__PURE__ */ a(Y, { label: e("employeeListLabel"), ...A }) })
   ] });
 };
 export {
-  ot as List
+  st as List
 };
 //# sourceMappingURL=List.js.map

package/dist/components/Employee/EmployeeList/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../../src/components/Employee/EmployeeList/List.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useState } from 'react'\nimport style from './List.module.scss'\nimport { useEmployeeList } from './useEmployeeList'\nimport { DataView, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { EmployeeOnboardingStatusBadge } from '@/components/Common/OnboardingStatusBadge'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { EmployeeOnboardingStatus, EmployeeSelfOnboardingStatuses } from '@/shared/constants'\nimport { firstLastName } from '@/helpers/formattedStrings'\n\n/**List of employees slot for EmployeeList component */\nexport const List = () => {\n  const {\n    handleDelete,\n    employees,\n    handleEdit,\n    handleReview,\n    handleNew,\n    handleCancelSelfOnboarding,\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage,\n    handleItemsPerPageChange,\n    currentPage,\n    totalPages,\n    handleSkip,\n    isFetching,\n  } = useEmployeeList()\n  const Components = useComponentContext()\n\n  const { t } = useTranslation('Employee.EmployeeList')\n  const [deleting, setDeleting] = useState<Set<string>>(new Set())\n  const { ...dataViewProps } = useDataView({\n    data: employees,\n    columns: [\n      {\n        key: 'name',\n        title: t('nameLabel'),\n        render: employee => {\n          return firstLastName({\n            first_name: employee.firstName,\n            last_name: employee.lastName,\n          })\n        },\n      },\n      {\n        key: 'status',\n        title: t('statusLabel'),\n        render: ({ onboarded, onboardingStatus }) => (\n          <EmployeeOnboardingStatusBadge\n            onboarded={onboarded}\n            onboardingStatus={onboardingStatus}\n          />\n        ),\n      },\n    ],\n    itemMenu: employee => {\n      const menuItems = []\n\n      // Edit item\n      if (\n        employee.onboardingStatus === EmployeeOnboardingStatus.ADMIN_ONBOARDING_INCOMPLETE ||\n        employee.onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE ||\n        employee.onboardingStatus ===\n          EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW ||\n        employee.onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED\n      ) {\n        menuItems.push({\n          label: t('editCta'),\n          onClick: () => {\n            handleEdit(employee.uuid, employee.onboardingStatus ?? undefined)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      // Cancel self onboarding item\n      /* @ts-expect-error: onboarding_status during runtime can be one of self onboarding statuses */\n      if (EmployeeSelfOnboardingStatuses.has(employee.onboarding_status ?? '')) {\n        menuItems.push({\n          label: t('cancelSelfOnboardingCta'),\n          onClick: async () => {\n            await handleCancelSelfOnboarding(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      // Review item\n      if (\n        employee.onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_COMPLETED_BY_EMPLOYEE\n      ) {\n        menuItems.push({\n          label: t('reviewCta'),\n          onClick: () => {\n            void handleReview(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      // Delete item\n      if (!employee.onboarded) {\n        menuItems.push({\n          label: t('deleteCta'),\n          onClick: () => {\n            setDeleting(prev => new Set(prev).add(employee.uuid))\n            void handleDelete(employee.uuid).then(() => {\n              setDeleting(prev => {\n                const newSet = new Set(prev)\n                newSet.delete(employee.uuid)\n                return newSet\n              })\n            })\n          },\n          icon: <TrashCanSvg aria-hidden />,\n        })\n      }\n\n      return (\n        <HamburgerMenu\n          items={menuItems}\n          triggerLabel={t('hamburgerTitle')}\n          isLoading={deleting.has(employee.uuid)}\n        />\n      )\n    },\n    isFetching,\n    pagination: {\n      handleNextPage,\n      handleFirstPage,\n      handleLastPage,\n      handlePreviousPage,\n      handleItemsPerPageChange,\n      currentPage,\n      totalPages,\n    },\n    emptyState: () => (\n      <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Components.Button variant=\"secondary\" onClick={handleSkip}>\n            {t('skipCta')}\n          </Components.Button>\n          <Components.Button variant=\"primary\" onClick={handleNew}>\n            {t('addEmployeeCTA')}\n          </Components.Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n  })\n  return (\n    <>\n      {employees.length > 0 && (\n        <ActionsLayout>\n          <Components.Button variant=\"secondary\" onClick={handleNew}>\n            {t('addAnotherCta')}\n          </Components.Button>\n        </ActionsLayout>\n      )}\n      <div className={style.container}>\n        <DataView label={t('employeeListLabel')} {...dataViewProps} />\n      </div>\n    </>\n  )\n}\n"],"names":["List","handleDelete","employees","handleEdit","handleReview","handleNew","handleCancelSelfOnboarding","handleFirstPage","handlePreviousPage","handleNextPage","handleLastPage","handleItemsPerPageChange","currentPage","totalPages","handleSkip","isFetching","useEmployeeList","Components","useComponentContext","t","useTranslation","deleting","setDeleting","useState","dataViewProps","useDataView","employee","firstLastName","onboarded","onboardingStatus","jsx","EmployeeOnboardingStatusBadge","menuItems","EmployeeOnboardingStatus","PencilSvg","EmployeeSelfOnboardingStatuses","prev","newSet","TrashCanSvg","HamburgerMenu","EmptyData","jsxs","ActionsLayout","Fragment","style","DataView"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../../src/components/Employee/EmployeeList/List.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useState } from 'react'\nimport style from './List.module.scss'\nimport { useEmployeeList } from './useEmployeeList'\nimport { DataView, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { EmployeeOnboardingStatusBadge } from '@/components/Common/OnboardingStatusBadge'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { EmployeeOnboardingStatus, EmployeeSelfOnboardingStatuses } from '@/shared/constants'\nimport { firstLastName } from '@/helpers/formattedStrings'\n\n/**List of employees slot for EmployeeList component */\nexport const List = () => {\n  const {\n    handleDelete,\n    employees,\n    handleEdit,\n    handleReview,\n    handleNew,\n    handleCancelSelfOnboarding,\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage,\n    handleItemsPerPageChange,\n    currentPage,\n    totalPages,\n    itemsPerPage,\n    handleSkip,\n    isFetching,\n  } = useEmployeeList()\n  const Components = useComponentContext()\n\n  const { t } = useTranslation('Employee.EmployeeList')\n  const [deleting, setDeleting] = useState<Set<string>>(new Set())\n  const { ...dataViewProps } = useDataView({\n    data: employees,\n    columns: [\n      {\n        key: 'name',\n        title: t('nameLabel'),\n        render: employee => {\n          return firstLastName({\n            first_name: employee.firstName,\n            last_name: employee.lastName,\n          })\n        },\n      },\n      {\n        key: 'status',\n        title: t('statusLabel'),\n        render: ({ onboarded, onboardingStatus }) => (\n          <EmployeeOnboardingStatusBadge\n            onboarded={onboarded}\n            onboardingStatus={onboardingStatus}\n          />\n        ),\n      },\n    ],\n    itemMenu: employee => {\n      const menuItems = []\n\n      // Edit item\n      if (\n        employee.onboardingStatus === EmployeeOnboardingStatus.ADMIN_ONBOARDING_INCOMPLETE ||\n        employee.onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE ||\n        employee.onboardingStatus ===\n          EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW ||\n        employee.onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED\n      ) {\n        menuItems.push({\n          label: t('editCta'),\n          onClick: () => {\n            handleEdit(employee.uuid, employee.onboardingStatus ?? undefined)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      // Cancel self onboarding item\n      /* @ts-expect-error: onboarding_status during runtime can be one of self onboarding statuses */\n      if (EmployeeSelfOnboardingStatuses.has(employee.onboarding_status ?? '')) {\n        menuItems.push({\n          label: t('cancelSelfOnboardingCta'),\n          onClick: async () => {\n            await handleCancelSelfOnboarding(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      // Review item\n      if (\n        employee.onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_COMPLETED_BY_EMPLOYEE\n      ) {\n        menuItems.push({\n          label: t('reviewCta'),\n          onClick: () => {\n            void handleReview(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      // Delete item\n      if (!employee.onboarded) {\n        menuItems.push({\n          label: t('deleteCta'),\n          onClick: () => {\n            setDeleting(prev => new Set(prev).add(employee.uuid))\n            void handleDelete(employee.uuid).then(() => {\n              setDeleting(prev => {\n                const newSet = new Set(prev)\n                newSet.delete(employee.uuid)\n                return newSet\n              })\n            })\n          },\n          icon: <TrashCanSvg aria-hidden />,\n        })\n      }\n\n      return (\n        <HamburgerMenu\n          items={menuItems}\n          triggerLabel={t('hamburgerTitle')}\n          isLoading={deleting.has(employee.uuid)}\n        />\n      )\n    },\n    isFetching,\n    pagination: {\n      handleNextPage,\n      handleFirstPage,\n      handleLastPage,\n      handlePreviousPage,\n      handleItemsPerPageChange,\n      currentPage,\n      totalPages,\n      itemsPerPage,\n    },\n    emptyState: () => (\n      <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Components.Button variant=\"secondary\" onClick={handleSkip}>\n            {t('skipCta')}\n          </Components.Button>\n          <Components.Button variant=\"primary\" onClick={handleNew}>\n            {t('addEmployeeCTA')}\n          </Components.Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n  })\n  return (\n    <>\n      {employees.length > 0 && (\n        <ActionsLayout>\n          <Components.Button variant=\"secondary\" onClick={handleNew}>\n            {t('addAnotherCta')}\n          </Components.Button>\n        </ActionsLayout>\n      )}\n      <div className={style.container}>\n        <DataView label={t('employeeListLabel')} {...dataViewProps} />\n      </div>\n    </>\n  )\n}\n"],"names":["List","handleDelete","employees","handleEdit","handleReview","handleNew","handleCancelSelfOnboarding","handleFirstPage","handlePreviousPage","handleNextPage","handleLastPage","handleItemsPerPageChange","currentPage","totalPages","itemsPerPage","handleSkip","isFetching","useEmployeeList","Components","useComponentContext","t","useTranslation","deleting","setDeleting","useState","dataViewProps","useDataView","employee","firstLastName","onboarded","onboardingStatus","jsx","EmployeeOnboardingStatusBadge","menuItems","EmployeeOnboardingStatus","PencilSvg","EmployeeSelfOnboardingStatuses","prev","newSet","TrashCanSvg","HamburgerMenu","EmptyData","jsxs","ActionsLayout","Fragment","style","DataView"],"mappings":"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"}

package/dist/components/Employee/EmployeeList/useEmployeeList.d.ts

@@ -1,5 +1,6 @@
 import { Employee } from '@gusto/embedded-api/models/components/employee';
 import { OnboardingStatus } from '@gusto/embedded-api/models/operations/putv1employeesemployeeidonboardingstatus';
+import { PaginationItemsPerPage } from '../../Common/PaginationControl/PaginationControlTypes';
 type EmployeeListContextType = {
     handleEdit: (uuid: string, onboardingStatus?: OnboardingStatus) => void;
     handleDelete: (uuid: string) => Promise<void>;
@@ -11,10 +12,11 @@ type EmployeeListContextType = {
     handlePreviousPage: () => void;
     handleNextPage: () => void;
     handleLastPage: () => void;
-    handleItemsPerPageChange: (newCount: number) => void;
+    handleItemsPerPageChange: (newCount: PaginationItemsPerPage) => void;
     currentPage: number;
     totalPages: number;
     employees: Employee[];
+    itemsPerPage: PaginationItemsPerPage;
     isFetching: boolean;
 };
 declare const useEmployeeList: () => EmployeeListContextType, EmployeeListProvider: import('react').Provider<EmployeeListContextType | null>;

package/dist/components/Employee/EmployeeList/useEmployeeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEmployeeList.js","sources":["../../../../src/components/Employee/EmployeeList/useEmployeeList.ts"],"sourcesContent":["import type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { OnboardingStatus } from '@gusto/embedded-api/models/operations/putv1employeesemployeeidonboardingstatus'\nimport { createCompoundContext } from '@/components/Base'\n\n//Interface for context passed down to component slots\ntype EmployeeListContextType = {\n  handleEdit: (uuid: string, onboardingStatus?: OnboardingStatus) => void\n  handleDelete: (uuid: string) => Promise<void>\n  handleCancelSelfOnboarding: (employeeId: string) => Promise<void>\n  handleReview: (employeeId: string) => Promise<void>\n  handleNew: () => void\n  handleSkip: () => void\n  handleFirstPage: () => void\n  handlePreviousPage: () => void\n  handleNextPage: () => void\n  handleLastPage: () => void\n  handleItemsPerPageChange: (newCount: number) => void\n  currentPage: number\n  totalPages: number\n  employees: Employee[]\n  isFetching: boolean\n}\n\nconst [useEmployeeList, EmployeeListProvider] =\n  createCompoundContext<EmployeeListContextType>('EmployeeListContext')\nexport { useEmployeeList, EmployeeListProvider }\n"],"names":["useEmployeeList","EmployeeListProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,CAACA,GAAiBC,CAAoB,IAC1CC,EAA+C,qBAAqB;"}
+{"version":3,"file":"useEmployeeList.js","sources":["../../../../src/components/Employee/EmployeeList/useEmployeeList.ts"],"sourcesContent":["import type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { OnboardingStatus } from '@gusto/embedded-api/models/operations/putv1employeesemployeeidonboardingstatus'\nimport { createCompoundContext } from '@/components/Base'\nimport type { PaginationItemsPerPage } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\n//Interface for context passed down to component slots\ntype EmployeeListContextType = {\n  handleEdit: (uuid: string, onboardingStatus?: OnboardingStatus) => void\n  handleDelete: (uuid: string) => Promise<void>\n  handleCancelSelfOnboarding: (employeeId: string) => Promise<void>\n  handleReview: (employeeId: string) => Promise<void>\n  handleNew: () => void\n  handleSkip: () => void\n  handleFirstPage: () => void\n  handlePreviousPage: () => void\n  handleNextPage: () => void\n  handleLastPage: () => void\n  handleItemsPerPageChange: (newCount: PaginationItemsPerPage) => void\n  currentPage: number\n  totalPages: number\n  employees: Employee[]\n  itemsPerPage: PaginationItemsPerPage\n  isFetching: boolean\n}\n\nconst [useEmployeeList, EmployeeListProvider] =\n  createCompoundContext<EmployeeListContextType>('EmployeeListContext')\nexport { useEmployeeList, EmployeeListProvider }\n"],"names":["useEmployeeList","EmployeeListProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAM,CAACA,GAAiBC,CAAoB,IAC1CC,EAA+C,qBAAqB;"}

package/dist/components/Flow/Flow.js

@@ -1,39 +1,59 @@
-import { jsx as s, Fragment as d, jsxs as f } from "react/jsx-runtime";
-import { useMachine as h } from "react-robot";
-import { useTranslation as g } from "react-i18next";
-import { FlowContext as C } from "./useFlow.js";
-import { useComponentContext as v } from "../../contexts/ComponentAdapter/useComponentContext.js";
-const b = ({ onEvent: l, machine: a }) => {
-  const p = v(), { t: m } = g(), [o, i, c] = h(a, {
-    onEvent: x,
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { useMachine as B } from "react-robot";
+import { useTranslation as C } from "react-i18next";
+import { FlowBreadcrumbs as v } from "../Common/FlowBreadcrumbs/FlowBreadcrumbs.js";
+import { Flex as l, FlexItem as u } from "../Common/Flex/Flex.js";
+import "classnames";
+import { FlowContext as w } from "./useFlow.js";
+import { useComponentContext as F } from "../../contexts/ComponentAdapter/useComponentContext.js";
+const G = ({ onEvent: d, machine: x }) => {
+  const f = F(), { t: b } = C(), [r, g, a] = B(x, {
+    onEvent: m,
     component: null,
     progressBarCta: null
-  }), u = o.context.showProgress ?? !1, t = o.context.totalSteps ?? null, e = o.context.currentStep ?? null;
-  function x(n, r) {
-    c.child ? c.child.send({ type: n, payload: r }) : i({ type: n, payload: r }), l(n, r);
+  }), {
+    progressBarType: i = null,
+    totalSteps: o = null,
+    currentStep: t = null,
+    currentBreadcrumbId: n,
+    breadcrumbs: h = {}
+  } = r.context;
+  function m(s, c) {
+    a.child ? a.child.send({ type: s, payload: c }) : g({ type: s, payload: c }), d(s, c);
   }
-  return /* @__PURE__ */ s(d, { children: /* @__PURE__ */ f(
-    C.Provider,
+  return /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+    w.Provider,
     {
       value: {
-        ...o.context
+        ...r.context
       },
-      children: [
-        u && e && t && /* @__PURE__ */ s(
-          p.ProgressBar,
+      children: /* @__PURE__ */ p(l, { flexDirection: "column", gap: 32, children: [
+        i === "progress" && t && o && /* @__PURE__ */ e(
+          f.ProgressBar,
           {
-            totalSteps: t,
-            currentStep: e,
-            label: m("progressBarLabel", { totalSteps: t, currentStep: e }),
-            cta: o.context.progressBarCta
+            totalSteps: o,
+            currentStep: t,
+            label: b("progressBarLabel", { totalSteps: o, currentStep: t }),
+            cta: r.context.progressBarCta
           }
         ),
-        o.context.component && /* @__PURE__ */ s(o.context.component, {})
-      ]
+        i === "breadcrumbs" && /* @__PURE__ */ p(l, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ e(u, { flexGrow: 1, children: /* @__PURE__ */ e(
+            v,
+            {
+              breadcrumbs: n ? h[n] ?? [] : [],
+              currentBreadcrumbId: n,
+              onEvent: m
+            }
+          ) }),
+          /* @__PURE__ */ e(u, { children: r.context.progressBarCta && /* @__PURE__ */ e(r.context.progressBarCta, {}) })
+        ] }),
+        r.context.component && /* @__PURE__ */ e(r.context.component, {})
+      ] })
     }
   ) });
 };
 export {
-  b as Flow
+  G as Flow
 };
 //# sourceMappingURL=Flow.js.map

package/dist/components/Flow/Flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine } from 'robot3'\nimport { useTranslation } from 'react-i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ntype FlowProps = {\n  machine: Machine<object, FlowContextInterface>\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = ({ onEvent, machine }: FlowProps) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n    progressBarCta: null,\n  })\n\n  const showProgress = current.context.showProgress ?? false\n  const totalSteps = current.context.totalSteps ?? null\n  const currentStep = current.context.currentStep ?? null\n\n  function handleEvent(type: EventType, data: unknown): void {\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      //@ts-expect-error: not sure why 'type' type is incorrectly derived here\n      service.child.send({ type: type, payload: data })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      send({ type: type, payload: data })\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  return (\n    <>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        {showProgress && currentStep && totalSteps && (\n          <Components.ProgressBar\n            totalSteps={totalSteps}\n            currentStep={currentStep}\n            label={t('progressBarLabel', { totalSteps, currentStep })}\n            cta={current.context.progressBarCta}\n          />\n        )}\n        {current.context.component && <current.context.component />}\n      </FlowContext.Provider>\n    </>\n  )\n}\n"],"names":["Flow","onEvent","machine","Components","useComponentContext","t","useTranslation","current","send","service","useMachine","handleEvent","showProgress","totalSteps","currentStep","type","data","jsx","Fragment","jsxs","FlowContext"],"mappings":";;;;;AAcO,MAAMA,IAAO,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAyB;AACvD,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWR,GAAS;AAAA,IACnD,SAASS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA,CACjB,GAEKC,IAAeL,EAAQ,QAAQ,gBAAgB,IAC/CM,IAAaN,EAAQ,QAAQ,cAAc,MAC3CO,IAAcP,EAAQ,QAAQ,eAAe;AAEnD,WAASI,EAAYI,GAAiBC,GAAqB;AAEzD,IAAIP,EAAQ,QAEVA,EAAQ,MAAM,KAAK,EAAE,MAAAM,GAAY,SAASC,GAAM,IAGhDR,EAAK,EAAE,MAAAO,GAAY,SAASC,EAAA,CAAM,GAGpCf,EAAQc,GAAMC,CAAI;AAAA,EACpB;AAEA,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGb,EAAQ;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAAK,KAAgBE,KAAeD,KAC9B,gBAAAI;AAAA,UAACd,EAAW;AAAA,UAAX;AAAA,YACC,YAAAU;AAAA,YACA,aAAAC;AAAA,YACA,OAAOT,EAAE,oBAAoB,EAAE,YAAAQ,GAAY,aAAAC,GAAa;AAAA,YACxD,KAAKP,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxBA,EAAQ,QAAQ,+BAAcA,EAAQ,QAAQ,WAAhB,CAAA,CAA0B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE7D;AAEJ;"}
+{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine } from 'robot3'\nimport { useTranslation } from 'react-i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ntype FlowProps = {\n  machine: Machine<object, FlowContextInterface>\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = ({ onEvent, machine }: FlowProps) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n    progressBarCta: null,\n  })\n\n  const {\n    progressBarType = null,\n    totalSteps = null,\n    currentStep = null,\n    currentBreadcrumbId,\n    breadcrumbs = {},\n  } = current.context\n\n  function handleEvent(type: EventType, data: unknown): void {\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      //@ts-expect-error: not sure why 'type' type is incorrectly derived here\n      service.child.send({ type: type, payload: data })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      send({ type: type, payload: data })\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  return (\n    <Flex>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          {progressBarType === 'progress' && currentStep && totalSteps && (\n            <Components.ProgressBar\n              totalSteps={totalSteps}\n              currentStep={currentStep}\n              label={t('progressBarLabel', { totalSteps, currentStep })}\n              cta={current.context.progressBarCta}\n            />\n          )}\n          {progressBarType === 'breadcrumbs' && (\n            <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n              <FlexItem flexGrow={1}>\n                <FlowBreadcrumbs\n                  breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n                  currentBreadcrumbId={currentBreadcrumbId}\n                  onEvent={handleEvent}\n                />\n              </FlexItem>\n              <FlexItem>\n                {current.context.progressBarCta && <current.context.progressBarCta />}\n              </FlexItem>\n            </Flex>\n          )}\n          {current.context.component && <current.context.component />}\n        </Flex>\n      </FlowContext.Provider>\n    </Flex>\n  )\n}\n"],"names":["Flow","onEvent","machine","Components","useComponentContext","t","useTranslation","current","send","service","useMachine","handleEvent","progressBarType","totalSteps","currentStep","currentBreadcrumbId","breadcrumbs","type","data","Flex","jsx","FlowContext","jsxs","FlexItem","FlowBreadcrumbs"],"mappings":";;;;;;;;AAiBO,MAAMA,IAAO,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAyB;AACvD,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWR,GAAS;AAAA,IACnD,SAASS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA,CACjB,GAEK;AAAA,IACJ,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,qBAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,EAAC,IACbT,EAAQ;AAEZ,WAASI,EAAYM,GAAiBC,GAAqB;AAEzD,IAAIT,EAAQ,QAEVA,EAAQ,MAAM,KAAK,EAAE,MAAAQ,GAAY,SAASC,GAAM,IAGhDV,EAAK,EAAE,MAAAS,GAAY,SAASC,EAAA,CAAM,GAGpCjB,EAAQgB,GAAMC,CAAI;AAAA,EACpB;AAEA,2BACGC,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGd,EAAQ;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAe,EAACH,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,QAAAP,MAAoB,cAAcE,KAAeD,KAChD,gBAAAO;AAAA,UAACjB,EAAW;AAAA,UAAX;AAAA,YACC,YAAAU;AAAA,YACA,aAAAC;AAAA,YACA,OAAOT,EAAE,oBAAoB,EAAE,YAAAQ,GAAY,aAAAC,GAAa;AAAA,YACxD,KAAKP,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxBK,MAAoB,iBACnB,gBAAAU,EAACH,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,aAAaT,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,cAC9E,qBAAAA;AAAA,cACA,SAASJ;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACA,gBAAAS,EAACG,GAAA,EACE,UAAAhB,EAAQ,QAAQ,oCAAmBA,EAAQ,QAAQ,gBAAhB,CAAA,CAA+B,EAAA,CACrE;AAAA,QAAA,GACF;AAAA,QAEDA,EAAQ,QAAQ,+BAAcA,EAAQ,QAAQ,WAAhB,CAAA,CAA0B;AAAA,MAAA,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Flow/useFlow.d.ts

@@ -1,14 +1,23 @@
+import { CustomTypeOptions } from 'i18next';
 import { OnEventType } from '../Base/useBase';
 import { CommonComponentInterface } from '../Base';
+import { BreadcrumbTrail } from '../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes';
 import { EventType } from '../../shared/constants';
+export interface CtaConfig {
+    labelKey: string;
+    namespace?: keyof CustomTypeOptions['resources'];
+}
 export interface FlowContextInterface {
     component: React.ComponentType<CommonComponentInterface> | null;
     onEvent: OnEventType<EventType, unknown>;
-    showProgress?: boolean;
+    progressBarType?: 'progress' | 'breadcrumbs' | null;
     totalSteps?: number;
     currentStep?: number | null;
     defaultValues?: Record<string, unknown>;
     progressBarCta?: React.ComponentType | null;
+    breadcrumbs?: BreadcrumbTrail;
+    currentBreadcrumbId?: string;
+    ctaConfig?: CtaConfig | null;
 }
 export declare const FlowContext: import('react').Context<FlowContextInterface | null>;
 export declare function useFlow<C extends FlowContextInterface>(): C;

package/dist/components/Flow/useFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlow.js","sources":["../../../src/components/Flow/useFlow.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { OnEventType } from '../Base/useBase'\nimport type { CommonComponentInterface } from '../Base'\nimport type { EventType } from '@/shared/constants'\n\nexport interface FlowContextInterface {\n  component: React.ComponentType<CommonComponentInterface> | null\n  onEvent: OnEventType<EventType, unknown>\n  showProgress?: boolean\n  totalSteps?: number\n  currentStep?: number | null\n  defaultValues?: Record<string, unknown>\n  progressBarCta?: React.ComponentType | null\n}\n\nexport const FlowContext = createContext<FlowContextInterface | null>(null)\n\n//TODO: This is hiding the fact that the callsite for useFlow\n//  destructures a `companyId` that doesn't seem to exist\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters\nexport function useFlow<C extends FlowContextInterface>() {\n  // When used outside provider, this is expected to return undefined - consumers must fallback to params\n  const values = useContext<C>(FlowContext as unknown as React.Context<C>)\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!values) {\n    throw new Error('useFlow used outside provider')\n  }\n  return values\n}\n"],"names":["FlowContext","createContext","useFlow","values","useContext"],"mappings":";AAeO,MAAMA,IAAcC,EAA2C,IAAI;AAKnE,SAASC,IAA0C;AAExD,QAAMC,IAASC,EAAcJ,CAA0C;AAEvE,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,+BAA+B;AAEjD,SAAOA;AACT;"}
+{"version":3,"file":"useFlow.js","sources":["../../../src/components/Flow/useFlow.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { CustomTypeOptions } from 'i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport type { CommonComponentInterface } from '../Base'\nimport type { BreadcrumbTrail } from '../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport type { EventType } from '@/shared/constants'\n\nexport interface CtaConfig {\n  labelKey: string\n  namespace?: keyof CustomTypeOptions['resources']\n}\n\nexport interface FlowContextInterface {\n  component: React.ComponentType<CommonComponentInterface> | null\n  onEvent: OnEventType<EventType, unknown>\n  progressBarType?: 'progress' | 'breadcrumbs' | null\n  totalSteps?: number\n  currentStep?: number | null\n  defaultValues?: Record<string, unknown>\n  progressBarCta?: React.ComponentType | null\n  breadcrumbs?: BreadcrumbTrail\n  currentBreadcrumbId?: string\n  ctaConfig?: CtaConfig | null\n}\n\nexport const FlowContext = createContext<FlowContextInterface | null>(null)\n\n//TODO: This is hiding the fact that the callsite for useFlow\n//  destructures a `companyId` that doesn't seem to exist\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters\nexport function useFlow<C extends FlowContextInterface>() {\n  // When used outside provider, this is expected to return undefined - consumers must fallback to params\n  const values = useContext<C>(FlowContext as unknown as React.Context<C>)\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!values) {\n    throw new Error('useFlow used outside provider')\n  }\n  return values\n}\n"],"names":["FlowContext","createContext","useFlow","values","useContext"],"mappings":";AAyBO,MAAMA,IAAcC,EAA2C,IAAI;AAKnE,SAASC,IAA0C;AAExD,QAAMC,IAASC,EAAcJ,CAA0C;AAEvE,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,+BAA+B;AAEjD,SAAOA;AACT;"}

package/dist/components/Payroll/PayrollBlocker/PayrollBlocker.d.ts

@@ -1,5 +1,5 @@
 import { BaseComponentInterface } from '../../Base/Base';
-interface PayrollBlockerProps extends BaseComponentInterface<'PayrollBlocker'> {
+interface PayrollBlockerProps extends BaseComponentInterface<'Payroll.PayrollBlocker'> {
     companyId: string;
 }
 export declare function PayrollBlocker(props: PayrollBlockerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,30 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useTranslation as y } from "react-i18next";
+import { jsx as l } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
 import { usePayrollsGetBlockersSuspense as k } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
 import { PayrollBlockerList as f } from "./components/PayrollBlockerList.js";
 import { getBlockerTranslationKeys as B } from "./payrollHelpers.js";
 import { BaseComponent as d } from "../../Base/Base.js";
 import { useComponentDictionary as P, useI18n as g } from "../../../i18n/I18n.js";
 function U(o) {
-  return /* @__PURE__ */ t(d, { ...o, children: /* @__PURE__ */ t(K, { ...o, children: o.children }) });
+  return /* @__PURE__ */ l(d, { ...o, children: /* @__PURE__ */ l(K, { ...o, children: o.children }) });
 }
-function K({ className: o, dictionary: i, companyId: s }) {
-  P("PayrollBlocker", i), g("PayrollBlocker");
-  const { t: e } = y("PayrollBlocker"), { data: a } = k({
-    companyUuid: s
-  }), l = (a.payrollBlockerList ?? []).map((n) => {
-    const r = n.key ?? "unknown", c = B(r), m = e(c.titleKey, {
-      defaultValue: r.replace(/_/g, " ").replace(/\b\w/g, (u) => u.toUpperCase())
-    }), p = e(c.descriptionKey, {
-      defaultValue: n.message || e("defaultBlockerDescription")
+function K({ className: o, dictionary: c, companyId: i }) {
+  P("Payroll.PayrollBlocker", c), g("Payroll.PayrollBlocker");
+  const { t: r } = u("Payroll.PayrollBlocker"), { data: s } = k({
+    companyUuid: i
+  }), t = (s.payrollBlockerList ?? []).map((n) => {
+    const e = n.key ?? "unknown", a = B(e), y = r(a.titleKey, {
+      defaultValue: e.replace(/_/g, " ").replace(/\b\w/g, (p) => p.toUpperCase())
+    }), m = r(a.descriptionKey, {
+      defaultValue: n.message || r("defaultBlockerDescription")
     });
     return {
-      id: r,
-      title: m,
-      description: p
+      id: e,
+      title: y,
+      description: m
     };
   });
-  return l.length === 0 ? null : /* @__PURE__ */ t(f, { className: o, blockers: l });
+  return t.length === 0 ? null : /* @__PURE__ */ l(f, { className: o, blockers: t });
 }
 export {
   U as PayrollBlocker

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlocker.js","sources":["../../../../src/components/Payroll/PayrollBlocker/PayrollBlocker.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'\nimport { PayrollBlockerList, type PayrollBlocker } from './components/PayrollBlockerList'\nimport { getBlockerTranslationKeys } from './payrollHelpers'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollBlockerProps extends BaseComponentInterface<'PayrollBlocker'> {\n  companyId: string\n}\n\nexport function PayrollBlocker(props: PayrollBlockerProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ className, dictionary, companyId }: PayrollBlockerProps) {\n  useComponentDictionary('PayrollBlocker', dictionary)\n  useI18n('PayrollBlocker')\n  const { t } = useTranslation('PayrollBlocker')\n\n  const { data } = usePayrollsGetBlockersSuspense({\n    companyUuid: companyId,\n  })\n\n  const payrollBlockerList = data.payrollBlockerList ?? []\n\n  const blockers: PayrollBlocker[] = payrollBlockerList.map(blocker => {\n    const blockerKey = blocker.key ?? 'unknown'\n    const translationKeys = getBlockerTranslationKeys(blockerKey)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blockerKey.replace(/_/g, ' ').replace(/\\b\\w/g, letter => letter.toUpperCase()),\n    })\n\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n\n    return {\n      id: blockerKey,\n      title,\n      description,\n    }\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return <PayrollBlockerList className={className} blockers={blockers} />\n}\n"],"names":["PayrollBlocker","props","jsx","BaseComponent","Root","className","dictionary","companyId","useComponentDictionary","useI18n","t","useTranslation","data","usePayrollsGetBlockersSuspense","blockers","blocker","blockerKey","translationKeys","getBlockerTranslationKeys","title","letter","description","PayrollBlockerList"],"mappings":";;;;;;;AAWO,SAASA,EAAeC,GAA4B;AACzD,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,YAAAC,GAAY,WAAAC,KAAkC;AACvE,EAAAC,EAAuB,kBAAkBF,CAAU,GACnDG,EAAQ,gBAAgB;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,gBAAgB,GAEvC,EAAE,MAAAC,EAAA,IAASC,EAA+B;AAAA,IAC9C,aAAaN;AAAA,EAAA,CACd,GAIKO,KAFqBF,EAAK,sBAAsB,CAAA,GAEA,IAAI,CAAAG,MAAW;AACnE,UAAMC,IAAaD,EAAQ,OAAO,WAC5BE,IAAkBC,EAA0BF,CAAU,GAEtDG,IAAQT,EAAEO,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAW,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAUA,EAAO,YAAA,CAAa;AAAA,IAAA,CAC5F,GAEKC,IAAcX,EAAEO,EAAgB,gBAAgB;AAAA,MACpD,cAAcF,EAAQ,WAAWL,EAAE,2BAA2B;AAAA,IAAA,CAC/D;AAED,WAAO;AAAA,MACL,IAAIM;AAAA,MACJ,OAAAG;AAAA,MACA,aAAAE;AAAA,IAAA;AAAA,EAEJ,CAAC;AAED,SAAIP,EAAS,WAAW,IACf,OAGF,gBAAAZ,EAACoB,GAAA,EAAmB,WAAAjB,GAAsB,UAAAS,EAAA,CAAoB;AACvE;"}
+{"version":3,"file":"PayrollBlocker.js","sources":["../../../../src/components/Payroll/PayrollBlocker/PayrollBlocker.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'\nimport { PayrollBlockerList, type PayrollBlocker } from './components/PayrollBlockerList'\nimport { getBlockerTranslationKeys } from './payrollHelpers'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollBlockerProps extends BaseComponentInterface<'Payroll.PayrollBlocker'> {\n  companyId: string\n}\n\nexport function PayrollBlocker(props: PayrollBlockerProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ className, dictionary, companyId }: PayrollBlockerProps) {\n  useComponentDictionary('Payroll.PayrollBlocker', dictionary)\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n\n  const { data } = usePayrollsGetBlockersSuspense({\n    companyUuid: companyId,\n  })\n\n  const payrollBlockerList = data.payrollBlockerList ?? []\n\n  const blockers: PayrollBlocker[] = payrollBlockerList.map(blocker => {\n    const blockerKey = blocker.key ?? 'unknown'\n    const translationKeys = getBlockerTranslationKeys(blockerKey)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blockerKey.replace(/_/g, ' ').replace(/\\b\\w/g, letter => letter.toUpperCase()),\n    })\n\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n\n    return {\n      id: blockerKey,\n      title,\n      description,\n    }\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return <PayrollBlockerList className={className} blockers={blockers} />\n}\n"],"names":["PayrollBlocker","props","jsx","BaseComponent","Root","className","dictionary","companyId","useComponentDictionary","useI18n","t","useTranslation","data","usePayrollsGetBlockersSuspense","blockers","blocker","blockerKey","translationKeys","getBlockerTranslationKeys","title","letter","description","PayrollBlockerList"],"mappings":";;;;;;;AAWO,SAASA,EAAeC,GAA4B;AACzD,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,YAAAC,GAAY,WAAAC,KAAkC;AACvE,EAAAC,EAAuB,0BAA0BF,CAAU,GAC3DG,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAE/C,EAAE,MAAAC,EAAA,IAASC,EAA+B;AAAA,IAC9C,aAAaN;AAAA,EAAA,CACd,GAIKO,KAFqBF,EAAK,sBAAsB,CAAA,GAEA,IAAI,CAAAG,MAAW;AACnE,UAAMC,IAAaD,EAAQ,OAAO,WAC5BE,IAAkBC,EAA0BF,CAAU,GAEtDG,IAAQT,EAAEO,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAW,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAUA,EAAO,YAAA,CAAa;AAAA,IAAA,CAC5F,GAEKC,IAAcX,EAAEO,EAAgB,gBAAgB;AAAA,MACpD,cAAcF,EAAQ,WAAWL,EAAE,2BAA2B;AAAA,IAAA,CAC/D;AAED,WAAO;AAAA,MACL,IAAIM;AAAA,MACJ,OAAAG;AAAA,MACA,aAAAE;AAAA,IAAA;AAAA,EAEJ,CAAC;AAED,SAAIP,EAAS,WAAW,IACf,OAGF,gBAAAZ,EAACoB,GAAA,EAAmB,WAAAjB,GAAsB,UAAAS,EAAA,CAAoB;AACvE;"}

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

@@ -1,26 +1,26 @@
 import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import { useTranslation as v } from "react-i18next";
-import { getBlockerTranslationKeys as A } from "../payrollHelpers.js";
-import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useTranslation as P } from "react-i18next";
+import { getBlockerTranslationKeys as v } from "../payrollHelpers.js";
+import { useComponentContext as A } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Flex as m } from "../../../Common/Flex/Flex.js";
 import "classnames";
-import { useI18n as D } from "../../../../i18n/I18n.js";
+import { useI18n as C } from "../../../../i18n/I18n.js";
 function z({
-  blockers: n,
+  blockers: o,
   onMultipleViewClick: i,
   multipleViewLabel: h,
   className: s
 }) {
-  D("PayrollBlocker");
-  const { t: e } = v("PayrollBlocker"), { Alert: c, Button: f, Text: a, UnorderedList: x } = C();
-  if (n.length === 0)
+  C("Payroll.PayrollBlocker");
+  const { t: e } = P("Payroll.PayrollBlocker"), { Alert: a, Button: f, Text: c, UnorderedList: x } = A();
+  if (o.length === 0)
     return null;
-  const g = n.length > 1, p = n.map((r) => {
-    const o = A(r.key), B = e(o.titleKey, {
+  const y = o.length > 1, p = o.map((r) => {
+    const n = v(r.key), B = e(n.titleKey, {
       defaultValue: r.key.replace(/_/g, " ").replace(/\b\w/g, (K) => K.toUpperCase())
-    }), T = e(o.descriptionKey, {
+    }), T = e(n.descriptionKey, {
       defaultValue: r.message || e("defaultBlockerDescription")
-    }), k = e(o.helpTextKey, { defaultValue: e("defaultBlockerHelpText") });
+    }), k = e(n.helpTextKey, { defaultValue: e("defaultBlockerHelpText") });
     return {
       ...r,
       title: B,
@@ -28,20 +28,20 @@ function z({
       helpText: k
     };
   }), t = p[0];
-  if (!g && t)
-    return /* @__PURE__ */ l(c, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 8, children: [
-      /* @__PURE__ */ l(a, { children: t.description }),
-      t.helpText && t.helpText !== t.description && /* @__PURE__ */ l(a, { variant: "supporting", size: "sm", children: t.helpText })
+  if (!y && t)
+    return /* @__PURE__ */ l(a, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 8, children: [
+      /* @__PURE__ */ l(c, { children: t.description }),
+      t.helpText && t.helpText !== t.description && /* @__PURE__ */ l(c, { variant: "supporting", size: "sm", children: t.helpText })
     ] }) });
-  const y = p.map((r) => r.title), u = h || e("viewAllBlockers");
+  const g = p.map((r) => r.title), u = h || e("viewAllBlockers");
   return /* @__PURE__ */ l(
-    c,
+    a,
     {
       status: "error",
-      label: e("multipleIssuesTitle", { count: n.length }),
+      label: e("multipleIssuesTitle", { count: o.length }),
       className: s,
       children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 16, children: [
-        /* @__PURE__ */ l(x, { items: y }),
+        /* @__PURE__ */ l(x, { items: g }),
         i && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(f, { variant: "secondary", onClick: i, title: u, children: u }) })
       ] })
     }