@layerfi/components 0.1.63 → 0.1.65

package/dist/esm/index.js

@@ -4881,7 +4881,8 @@ import classNames23 from "classnames";
 var ActionableList = ({
   options,
   onClick,
-  selectedId
+  selectedId,
+  showDescriptions = false
 }) => {
   return /* @__PURE__ */ React68.createElement("ul", { className: "Layer__actionable-list" }, options.map((x, idx) => /* @__PURE__ */ React68.createElement(
     "li",
@@ -4900,7 +4901,7 @@ var ActionableList = ({
       { className: "Layer__actionable-list__content" },
       /* @__PURE__ */ React68.createElement(Text, { size: "sm" /* sm */ }, x.label),
       /*TODO: Replace 'See all categories' with something more generic*/
-      x.description && x.label !== "See all categories" && /* @__PURE__ */ React68.createElement(
+      showDescriptions && x.description && x.label !== "See all categories" && /* @__PURE__ */ React68.createElement(
         Text,
         {
           className: "Layer__actionable-list__content-description",
@@ -4927,9 +4928,6 @@ var ActionableList = ({
   )));
 };
 
-// src/components/BankTransactionMobileList/constants.ts
-var PersonalCategories = ["PERSONAL_INCOME", "PERSONAL_EXPENSES"];
-
 // src/components/BankTransactionMobileList/utils.ts
 var mapCategoryToOption = (category) => ({
   label: category.display_name,
@@ -4976,7 +4974,7 @@ var getAssignedValue = (bankTransaction) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ || bankTransaction?.categorization_status === "SPLIT" /* SPLIT */) {
     return;
   }
-  if (bankTransaction.category && !PersonalCategories.includes(bankTransaction.category.display_name)) {
+  if (bankTransaction.category && bankTransaction.category.type != "Exclusion") {
     return mapCategoryToOption(bankTransaction.category);
   }
   if (hasSuggestions(bankTransaction.categorization_flow)) {
@@ -4992,7 +4990,9 @@ var BusinessCategories = ({
   selectedId
 }) => {
   const { categories } = useLayerContext();
-  const categoryOptions = flattenCategories(categories);
+  const categoryOptions = flattenCategories(
+    categories.filter((category) => category.type != "ExclusionNested")
+  );
   const [optionsToShow, setOptionsToShow] = useState11(categoryOptions);
   const [selectedGroup, setSelectedGroup] = useState11();
   const onCategorySelect = (v) => {
@@ -5157,7 +5157,7 @@ var Option2 = (props) => {
       className: `Layer__select__option-menu-content ${props.className}`
     },
     /* @__PURE__ */ React71.createElement("div", { className: "Layer__select__option-menu--name" }, props.isSelected ? /* @__PURE__ */ React71.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React71.createElement(Check_default, { size: 16 })) : /* @__PURE__ */ React71.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React71.createElement("div", { style: { width: 16, height: 16 } })), /* @__PURE__ */ React71.createElement("div", null, props.data.payload.display_name)),
-    props.data.payload.description && /* @__PURE__ */ React71.createElement("div", { className: "Layer__select__option-menu--tooltip" }, /* @__PURE__ */ React71.createElement(Tooltip, null, /* @__PURE__ */ React71.createElement(TooltipTrigger, null, /* @__PURE__ */ React71.createElement(InfoIcon_default, null)), /* @__PURE__ */ React71.createElement(TooltipContent, { className: "Layer__actionable-list__tooltip-content" }, /* @__PURE__ */ React71.createElement(
+    props.showTooltips && props.data.payload.description && /* @__PURE__ */ React71.createElement("div", { className: "Layer__select__option-menu--tooltip" }, /* @__PURE__ */ React71.createElement(Tooltip, null, /* @__PURE__ */ React71.createElement(TooltipTrigger, null, /* @__PURE__ */ React71.createElement(InfoIcon_default, null)), /* @__PURE__ */ React71.createElement(TooltipContent, { className: "Layer__actionable-list__tooltip-content" }, /* @__PURE__ */ React71.createElement(
       Text,
       {
         className: "Layer__actionable-list__content-description",
@@ -5206,6 +5206,7 @@ var CategorySelect = ({
   onChange,
   disabled,
   className,
+  showTooltips,
   excludeMatches = false,
   asDrawer = false
 }) => {
@@ -5269,7 +5270,11 @@ var CategorySelect = ({
       styles: {
         menuPortal: (base) => ({ ...base, zIndex: 9999 })
       },
-      components: { DropdownIndicator, GroupHeading, Option: Option2 },
+      components: {
+        DropdownIndicator,
+        GroupHeading,
+        Option: (optionProps) => /* @__PURE__ */ React71.createElement(Option2, { ...optionProps, showTooltips })
+      },
       isDisabled: disabled,
       isOptionDisabled: (option) => option.disabled ?? false,
       isOptionSelected: (option) => selected?.payload.display_name == option.payload.display_name
@@ -6118,7 +6123,8 @@ var ExpandedBankTransactionRow = forwardRef5(
     containerWidth,
     showDescriptions,
     mode,
-    showReceiptUploads
+    showReceiptUploads,
+    showTooltips
   }, ref) => {
     const {
       categorize: categorizeBankTransaction2,
@@ -6472,7 +6478,8 @@ var ExpandedBankTransactionRow = forwardRef5(
                   onChange: (value) => changeCategory(index, value),
                   className: "Layer__category-menu--full",
                   disabled: bankTransaction.processing || !categorizationEnabled(mode),
-                  excludeMatches: true
+                  excludeMatches: true,
+                  showTooltips
                 }
               ),
               index > 0 && /* @__PURE__ */ React87.createElement(
@@ -6641,6 +6648,7 @@ var BankTransactionRow = ({
   initialLoad,
   showDescriptions,
   showReceiptUploads,
+  showTooltips,
   stringOverrides
 }) => {
   const expandedRowRef = useRef9(null);
@@ -6796,7 +6804,8 @@ var BankTransactionRow = ({
             setSelectedCategory(category);
             setShowRetry(false);
           },
-          disabled: bankTransaction.processing
+          disabled: bankTransaction.processing,
+          showTooltips
         }
       ) : null,
       categorized && !open ? /* @__PURE__ */ React89.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(
@@ -6888,7 +6897,8 @@ var BankTransactionRow = ({
       close: () => setOpen(false),
       containerWidth,
       showDescriptions,
-      showReceiptUploads
+      showReceiptUploads,
+      showTooltips
     }
   ))));
 };
@@ -6941,6 +6951,7 @@ var BankTransactionListItem = ({
   mode,
   showDescriptions,
   showReceiptUploads,
+  showTooltips,
   containerWidth,
   removeTransaction,
   stringOverrides
@@ -7037,7 +7048,8 @@ var BankTransactionListItem = ({
       submitBtnText: categorized ? stringOverrides?.updateButtonText || "Update" : stringOverrides?.approveButtonText || "Approve",
       containerWidth,
       showDescriptions,
-      showReceiptUploads
+      showReceiptUploads,
+      showTooltips
     }
   )), /* @__PURE__ */ React91.createElement("span", { className: `${className}__base-row` }, !categorized ? /* @__PURE__ */ React91.createElement(
     CategorySelect,
@@ -7049,7 +7061,8 @@ var BankTransactionListItem = ({
         setShowRetry(false);
         setSelectedCategory(category);
       },
-      disabled: bankTransaction.processing
+      disabled: bankTransaction.processing,
+      showTooltips
     }
   ) : null, categorized ? /* @__PURE__ */ React91.createElement(Assignment, { bankTransaction }) : null, !categorized && !showRetry ? /* @__PURE__ */ React91.createElement(
     SubmitButton,
@@ -7089,6 +7102,7 @@ var BankTransactionList = ({
   containerWidth,
   showDescriptions = false,
   showReceiptUploads = false,
+  showTooltips,
   stringOverrides
 }) => {
   return /* @__PURE__ */ React92.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
@@ -7105,6 +7119,7 @@ var BankTransactionList = ({
         containerWidth,
         showDescriptions,
         showReceiptUploads,
+        showTooltips,
         stringOverrides
       }
     )
@@ -7122,7 +7137,10 @@ import React98 from "react";
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
 import React93, { useContext as useContext10, useEffect as useEffect14, useMemo as useMemo4, useState as useState17 } from "react";
-var BusinessForm = ({ bankTransaction }) => {
+var BusinessForm = ({
+  bankTransaction,
+  showTooltips
+}) => {
   const { setContent, close } = useContext10(DrawerContext);
   const { categorize: categorizeBankTransaction2, isLoading } = useBankTransactionsContext();
   const [selectedCategory, setSelectedCategory] = useState17(
@@ -7205,7 +7223,8 @@ var BusinessForm = ({ bankTransaction }) => {
     {
       options,
       onClick: onCategorySelect,
-      selectedId: selectedCategory?.id
+      selectedId: selectedCategory?.id,
+      showDescriptions: showTooltips
     }
   ), options.length === 0 ? /* @__PURE__ */ React93.createElement(
     Button,
@@ -7228,12 +7247,21 @@ var BusinessForm = ({ bankTransaction }) => {
 
 // src/components/BankTransactionMobileList/PersonalForm.tsx
 import React94, { useEffect as useEffect15, useState as useState18 } from "react";
+
+// src/components/BankTransactionMobileList/constants.ts
+var PersonalCategories = /* @__PURE__ */ ((PersonalCategories2) => {
+  PersonalCategories2["INCOME"] = "PERSONAL_INFLOWS";
+  PersonalCategories2["EXPENSES"] = "PERSONAL_EXPENSES";
+  return PersonalCategories2;
+})(PersonalCategories || {});
+
+// src/components/BankTransactionMobileList/PersonalForm.tsx
 var isAlreadyAssigned = (bankTransaction) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ || bankTransaction?.categorization_status === "SPLIT" /* SPLIT */) {
     return false;
   }
   return Boolean(
-    bankTransaction.category && PersonalCategories.includes(bankTransaction.category.display_name)
+    bankTransaction.category && Object.values(PersonalCategories).includes(bankTransaction.category.display_name)
   );
 };
 var PersonalForm = ({ bankTransaction }) => {
@@ -7250,8 +7278,8 @@ var PersonalForm = ({ bankTransaction }) => {
       {
         type: "Category",
         category: {
-          type: "StableName",
-          stable_name: isCredit(bankTransaction) ? "PERSONAL_INCOME" : "PERSONAL_EXPENSES"
+          type: "Exclusion",
+          exclusion_type: isCredit(bankTransaction) ? "PERSONAL_INFLOWS" /* INCOME */ : "PERSONAL_EXPENSES" /* EXPENSES */
         }
       },
       true
@@ -7333,7 +7361,8 @@ var MatchForm2 = ({
 import React96, { useEffect as useEffect17, useState as useState20 } from "react";
 import classNames38 from "classnames";
 var SplitForm = ({
-  bankTransaction
+  bankTransaction,
+  showTooltips
 }) => {
   const {
     categorize: categorizeBankTransaction2,
@@ -7484,7 +7513,8 @@ var SplitForm = ({
         className: "Layer__category-menu--full",
         disabled: bankTransaction.processing,
         excludeMatches: true,
-        asDrawer: true
+        asDrawer: true,
+        showTooltips
       }
     )),
     /* @__PURE__ */ React96.createElement(
@@ -7536,28 +7566,48 @@ var SplitForm = ({
 
 // src/components/BankTransactionMobileList/SplitAndMatchForm.tsx
 var SplitAndMatchForm = ({
-  bankTransaction
+  bankTransaction,
+  showTooltips
 }) => {
   const anyMatch = hasMatch(bankTransaction);
   const [formType, setFormType] = useState21(
     bankTransaction.category ? "categorize" /* categorize */ : anyMatch ? "match" /* match */ : "categorize" /* categorize */
   );
-  return /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form" }, formType === "categorize" /* categorize */ && /* @__PURE__ */ React97.createElement(SplitForm, { bankTransaction }), formType === "match" /* match */ && /* @__PURE__ */ React97.createElement(MatchForm2, { bankTransaction }), anyMatch && formType === "match" /* match */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("categorize" /* categorize */) }, "or split transaction")) : null, anyMatch && formType === "categorize" /* categorize */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("match" /* match */) }, "or find match")) : null);
+  return /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form" }, formType === "categorize" /* categorize */ && /* @__PURE__ */ React97.createElement(
+    SplitForm,
+    {
+      bankTransaction,
+      showTooltips
+    }
+  ), formType === "match" /* match */ && /* @__PURE__ */ React97.createElement(MatchForm2, { bankTransaction }), anyMatch && formType === "match" /* match */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("categorize" /* categorize */) }, "or split transaction")) : null, anyMatch && formType === "categorize" /* categorize */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("match" /* match */) }, "or find match")) : null);
 };
 
 // src/components/BankTransactionMobileList/BankTransactionMobileForms.tsx
 var BankTransactionMobileForms = ({
   purpose,
-  bankTransaction
+  bankTransaction,
+  showTooltips
 }) => {
   const getContent = () => {
     switch (purpose) {
       case "business":
-        return /* @__PURE__ */ React98.createElement(BusinessForm, { bankTransaction });
+        return /* @__PURE__ */ React98.createElement(
+          BusinessForm,
+          {
+            bankTransaction,
+            showTooltips
+          }
+        );
       case "personal":
         return /* @__PURE__ */ React98.createElement(PersonalForm, { bankTransaction });
       case "more":
-        return /* @__PURE__ */ React98.createElement(SplitAndMatchForm, { bankTransaction });
+        return /* @__PURE__ */ React98.createElement(
+          SplitAndMatchForm,
+          {
+            bankTransaction,
+            showTooltips
+          }
+        );
       default:
         return null;
     }
@@ -7602,6 +7652,7 @@ var BankTransactionMobileListItem = ({
   editable,
   mode,
   initialLoad,
+  showTooltips,
   isFirstItem = false
 }) => {
   const {
@@ -7619,7 +7670,7 @@ var BankTransactionMobileListItem = ({
   const itemRef = useRef11(null);
   const [removeAnim, setRemoveAnim] = useState23(false);
   const [purpose, setPurpose] = useState23(
-    bankTransaction.category ? bankTransaction.categorization_status === "SPLIT" /* SPLIT */ ? "more" /* more */ : "business" /* business */ : hasMatch(bankTransaction) ? "more" /* more */ : "business" /* business */
+    bankTransaction.category ? bankTransaction.category.type === "Exclusion" ? "personal" /* personal */ : bankTransaction.categorization_status === "SPLIT" /* SPLIT */ ? "more" /* more */ : "business" /* business */ : hasMatch(bankTransaction) ? "more" /* more */ : "business" /* business */
   );
   const [open, setOpen] = useState23(isFirstItem);
   const [showComponent, setShowComponent] = useState23(!initialLoad);
@@ -7753,7 +7804,8 @@ var BankTransactionMobileListItem = ({
         BankTransactionMobileForms,
         {
           purpose,
-          bankTransaction
+          bankTransaction,
+          showTooltips
         }
       )
     )
@@ -7766,6 +7818,7 @@ var BankTransactionMobileList = ({
   removeTransaction,
   editable,
   initialLoad,
+  showTooltips,
   mode
 }) => {
   const transactionToOpenContextData = useTransactionToOpen();
@@ -7777,6 +7830,7 @@ var BankTransactionMobileList = ({
         mode,
         key: bankTransaction.id,
         bankTransaction,
+        showTooltips,
         editable,
         removeTransaction,
         initialLoad,
@@ -7846,7 +7900,8 @@ var SkeletonTableLoader = ({
 
 // src/components/BankTransactionsLoader/BankTransactionsLoader.tsx
 var BankTransactionsLoader = ({
-  isLoading = true
+  isLoading = true,
+  showTooltips
 }) => {
   const inactiveBankTransactionsActions = /* @__PURE__ */ React103.createElement("div", { className: "Layer__bank-transaction-row__actions-container Layer__bank-transaction-row__actions-disabled" }, /* @__PURE__ */ React103.createElement(
     CategorySelect,
@@ -7856,7 +7911,8 @@ var BankTransactionsLoader = ({
       value: void 0,
       onChange: () => {
       },
-      disabled: true
+      disabled: true,
+      showTooltips
     }
   ), /* @__PURE__ */ React103.createElement(
     SubmitButton,
@@ -7939,6 +7995,7 @@ var BankTransactionsTable = ({
   removeTransaction,
   showDescriptions = false,
   showReceiptUploads = false,
+  showTooltips,
   stringOverrides,
   isSyncing = false,
   page,
@@ -7952,7 +8009,7 @@ var BankTransactionsTable = ({
       className: "Layer__table Layer__bank-transactions__table with-cell-separators"
     },
     /* @__PURE__ */ React105.createElement("thead", null, /* @__PURE__ */ React105.createElement("tr", null, /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, stringOverrides?.transactionsTable?.dateColumnHeaderText || "Date"), /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, stringOverrides?.transactionsTable?.transactionColumnHeaderText || "Transaction"), /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, stringOverrides?.transactionsTable?.accountColumnHeaderText || "Account"), /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, stringOverrides?.transactionsTable?.amountColumnHeaderText || "Amount"), categorizeView && editable ? /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, stringOverrides?.transactionsTable?.categorizeColumnHeaderText || "Categorize") : /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, stringOverrides?.transactionsTable?.categoryColumnHeaderText || "Category"))),
-    isLoading && page && page === 1 ? /* @__PURE__ */ React105.createElement(BankTransactionsLoader, { isLoading: true }) : null,
+    isLoading && page && page === 1 ? /* @__PURE__ */ React105.createElement(BankTransactionsLoader, { isLoading: true, showTooltips }) : null,
     /* @__PURE__ */ React105.createElement("tbody", null, !isLoading && bankTransactions?.map(
       (bankTransaction, index) => /* @__PURE__ */ React105.createElement(
         BankTransactionRow,
@@ -7968,6 +8025,7 @@ var BankTransactionsTable = ({
           containerWidth,
           showDescriptions,
           showReceiptUploads,
+          showTooltips,
           stringOverrides: stringOverrides?.bankTransactionCTAs
         }
       )
@@ -8811,6 +8869,7 @@ var BankTransactionsContent = ({
   mode = "self-serve",
   showDescriptions = false,
   showReceiptUploads = false,
+  showTooltips = false,
   monthlyView = false,
   categorizeView: categorizeViewProp,
   mobileComponent,
@@ -8968,6 +9027,7 @@ var BankTransactionsContent = ({
         removeTransaction,
         showDescriptions,
         showReceiptUploads,
+        showTooltips,
         page: currentPage,
         stringOverrides,
         lastPage: isLastPage,
@@ -8982,7 +9042,8 @@ var BankTransactionsContent = ({
         editable,
         removeTransaction,
         containerWidth,
-        stringOverrides: stringOverrides?.bankTransactionCTAs
+        stringOverrides: stringOverrides?.bankTransactionCTAs,
+        showTooltips
       }
     ) : null,
     !isLoading && listView && mobileComponent === "mobileList" ? /* @__PURE__ */ React115.createElement(
@@ -8992,7 +9053,8 @@ var BankTransactionsContent = ({
         editable,
         mode,
         removeTransaction,
-        initialLoad
+        initialLoad,
+        showTooltips
       }
     ) : null,
     listView && isLoading ? /* @__PURE__ */ React115.createElement("div", { className: "Layer__bank-transactions__list-loader" }, /* @__PURE__ */ React115.createElement(Loader2, null)) : null,
@@ -16773,6 +16835,7 @@ var BankTransactionsWithLinkedAccounts = ({
   mode = "self-serve",
   showDescriptions,
   showReceiptUploads,
+  showTooltips = false,
   mobileComponent,
   stringOverrides
 }) => {
@@ -16798,6 +16861,7 @@ var BankTransactionsWithLinkedAccounts = ({
         asWidget: true,
         showDescriptions,
         showReceiptUploads,
+        showTooltips,
         mobileComponent,
         mode,
         stringOverrides: stringOverrides?.bankTransactions