braid-ui 1.0.53 → 1.0.55

package/dist/index.cjs

@@ -8435,12 +8435,6 @@ var formatCurrency2 = (value) => {
     minimumFractionDigits: 2
   }).format(numValue);
 };
-var TRANSACTION_TYPES = [
-  { value: "transfer", label: "Transfer", icon: lucideReact.ArrowLeftRight },
-  { value: "adjustment", label: "Adjustment", icon: lucideReact.Settings },
-  { value: "ach", label: "ACH", icon: lucideReact.Building2 },
-  { value: "wire", label: "Wire", icon: lucideReact.Zap }
-];
 var ADJUSTMENT_DIRECTION_OPTIONS = [
   { value: "debit", label: "Debit" },
   { value: "credit", label: "Credit" }
@@ -8473,13 +8467,18 @@ var NewTransactionView = ({
   onCounterpartySearchChange,
   onCounterpartySelect,
   onCounterpartyDropdownClose,
+  counterpartyHasMore,
+  counterpartyTotalResults,
+  isLoadingMoreCounterparties,
+  onLoadMoreCounterparties,
   receiverAccountLookedUp,
   receiverAccountData,
   isReceiverAccountLoading,
   onReceiverAccountLookup,
   onEditReceiverAccount,
   isReviewReady,
-  adjustmentTypeOptions
+  adjustmentTypeOptions,
+  transactionTypeOptions
 }) => {
   const transactionType = form.watch("transactionType");
   const accountNumber = form.watch("accountNumber");
@@ -8529,7 +8528,7 @@ var NewTransactionView = ({
     }
   ] : [];
   const reviewItems = [
-    { label: "Transaction Type", value: TRANSACTION_TYPES.find((t) => t.value === transactionType)?.label || "-" },
+    { label: "Transaction Type", value: transactionTypeOptions.find((t) => t.value === transactionType)?.label || "-" },
     { label: "Account Number", value: accountNumber || "-" },
     ...isAdjustment ? [
       { label: "Direction", value: adjustmentDirection === "debit" ? "Debit" : adjustmentDirection === "credit" ? "Credit" : "-" },
@@ -8593,28 +8592,29 @@ var NewTransactionView = ({
           title: "Transaction Type",
           variant: "default",
           className: cn(!accountLookedUp && "opacity-50 pointer-events-none"),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4", children: TRANSACTION_TYPES.map((type) => {
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4", children: transactionTypeOptions.map((type) => {
             const Icon2 = type.icon;
             const isSelected = transactionType === type.value;
+            const isDisabled = !accountLookedUp || type.disabled;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
-                onClick: () => onTransactionTypeChange(type.value),
-                disabled: !accountLookedUp,
+                onClick: () => !type.disabled && onTransactionTypeChange(type.value),
+                disabled: isDisabled,
                 className: cn(
                   "flex flex-col items-center justify-center p-4 lg:p-3 rounded-lg border-2 transition-all",
-                  "hover:border-primary/50 hover:shadow-md",
-                  isSelected ? "border-primary bg-primary/5 shadow-sm" : "border-border bg-card"
+                  isDisabled ? "opacity-50 cursor-not-allowed border-border bg-muted" : "hover:border-primary/50 hover:shadow-md",
+                  isSelected && !type.disabled ? "border-primary bg-primary/5 shadow-sm" : !isDisabled && "border-border bg-card"
                 ),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: cn(
                     "h-6 w-6 lg:h-5 lg:w-5 mb-2",
-                    isSelected ? "text-primary" : "text-muted-foreground"
+                    isSelected && !type.disabled ? "text-primary" : "text-muted-foreground"
                   ) }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
                     "text-sm font-medium",
-                    isSelected ? "text-primary" : "text-foreground"
+                    isSelected && !type.disabled ? "text-primary" : isDisabled ? "text-muted-foreground" : "text-foreground"
                   ), children: type.label })
                 ]
               },
@@ -8651,19 +8651,41 @@ var NewTransactionView = ({
                 ),
                 isCounterpartySearching && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
               ] }),
-              showCounterpartyDropdown && counterpartySearchResults.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-50 w-full mt-1 bg-popover border border-border rounded-md shadow-lg max-h-60 overflow-auto", children: counterpartySearchResults.map((result) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onCounterpartySelect(result),
-                  className: "w-full px-3 py-2 text-left hover:bg-accent transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm", children: result.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: result.id })
-                  ]
-                },
-                result.id
-              )) }),
+              showCounterpartyDropdown && counterpartySearchResults.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute z-50 w-full mt-1 bg-popover border border-border rounded-md shadow-lg max-h-60 overflow-hidden flex flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b bg-muted/50 flex-shrink-0", children: [
+                  "Showing ",
+                  counterpartySearchResults.length,
+                  " of ",
+                  counterpartyTotalResults,
+                  " results"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto flex-1", children: counterpartySearchResults.map((result) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onCounterpartySelect(result),
+                    className: "w-full px-3 py-2 text-left hover:bg-accent transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm", children: result.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: result.id })
+                    ]
+                  },
+                  result.id
+                )) }),
+                counterpartyHasMore && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onLoadMoreCounterparties,
+                    disabled: isLoadingMoreCounterparties,
+                    className: "w-full px-3 py-2 text-center text-sm text-primary hover:bg-accent border-t flex-shrink-0 disabled:opacity-50",
+                    children: isLoadingMoreCounterparties ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+                      "Loading..."
+                    ] }) : "Load More"
+                  }
+                )
+              ] }),
               showCounterpartyDropdown && counterpartySearchResults.length === 0 && !isCounterpartySearching && counterpartyName.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-50 w-full mt-1 bg-popover border border-border rounded-md shadow-lg p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
                 'No counterparties found matching "',
                 counterpartyName,
@@ -8866,7 +8888,7 @@ var NewTransactionView = ({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Type:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: TRANSACTION_TYPES.find((t) => t.value === transactionType)?.label })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: transactionTypeOptions.find((t) => t.value === transactionType)?.label })
             ] }),
             requiresCounterparty && counterpartyName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Counterparty:" }),
@@ -14402,6 +14424,11 @@ function NewTransaction() {
   const [counterpartySearchResults, setCounterpartySearchResults] = React15.useState([]);
   const [isCounterpartySearching, setIsCounterpartySearching] = React15.useState(false);
   const [showCounterpartyDropdown, setShowCounterpartyDropdown] = React15.useState(false);
+  const [counterpartySearchPage, setCounterpartySearchPage] = React15.useState(1);
+  const [counterpartyHasMore, setCounterpartyHasMore] = React15.useState(false);
+  const [counterpartyTotalResults, setCounterpartyTotalResults] = React15.useState(0);
+  const [isLoadingMoreCounterparties, setIsLoadingMoreCounterparties] = React15.useState(false);
+  const [currentSearchQuery, setCurrentSearchQuery] = React15.useState("");
   const [confirmationOpen, setConfirmationOpen] = React15.useState(false);
   const [submissionStatus, setSubmissionStatus] = React15.useState(null);
   const [errorMessage, setErrorMessage] = React15.useState("");
@@ -14426,6 +14453,12 @@ function NewTransaction() {
       receiverAccountNumber: ""
     }
   });
+  const transactionTypeOptions = React15.useMemo(() => [
+    { value: "transfer", label: "Transfer", icon: lucideReact.ArrowLeftRight, disabled: false },
+    { value: "adjustment", label: "Adjustment", icon: lucideReact.Settings, disabled: false },
+    { value: "ach", label: "ACH", icon: lucideReact.Building2, disabled: true },
+    { value: "wire", label: "Wire", icon: lucideReact.Zap, disabled: false }
+  ], []);
   const adjustmentDirection = form.watch("adjustmentDirection");
   const adjustmentTypeOptions = React15.useMemo(() => {
     if (adjustmentDirection === "credit") {
@@ -14467,37 +14500,60 @@ function NewTransaction() {
     { id: "CP-1234", name: "Global Industries LLC", type: "Business", paymentInstrumentType: "ach" },
     { id: "CP-9012", name: "GlobalCorp Partners", type: "Business", paymentInstrumentType: "both" },
     { id: "CP-3456", name: "Acme Corporation", type: "Business", paymentInstrumentType: "wire" },
-    { id: "CP-7890", name: "Tech Innovations Ltd", type: "Business", paymentInstrumentType: "ach" }
+    { id: "CP-7890", name: "Tech Innovations Ltd", type: "Business", paymentInstrumentType: "ach" },
+    { id: "CP-1111", name: "Global Enterprises", type: "Business", paymentInstrumentType: "wire" },
+    { id: "CP-2222", name: "Global Finance Group", type: "Business", paymentInstrumentType: "both" },
+    { id: "CP-3333", name: "Global Trade Inc.", type: "Business", paymentInstrumentType: "wire" },
+    { id: "CP-4444", name: "Global Services Co.", type: "Business", paymentInstrumentType: "ach" },
+    { id: "CP-5555", name: "Global Ventures Ltd", type: "Business", paymentInstrumentType: "both" }
   ];
+  const PAGE_SIZE = 5;
   const isCounterpartyCompatible = (instrumentType, transactionType) => {
     if (instrumentType === "both") return true;
     if (transactionType === "ach" && instrumentType === "ach") return true;
     if (transactionType === "wire" && instrumentType === "wire") return true;
     return false;
   };
+  const filterByTransactionType = (results, txType) => {
+    if (txType === "ach") {
+      return results.filter(
+        (cp) => cp.paymentInstrumentType === "ach" || cp.paymentInstrumentType === "both"
+      );
+    } else if (txType === "wire") {
+      return results.filter(
+        (cp) => cp.paymentInstrumentType === "wire" || cp.paymentInstrumentType === "both"
+      );
+    }
+    return results;
+  };
   const debouncedSearch = React15.useMemo(
-    () => lodash.debounce(async (query, txType) => {
+    () => lodash.debounce(async (query, txType, page = 1) => {
       if (query.length < 2) {
         setCounterpartySearchResults([]);
         setShowCounterpartyDropdown(false);
+        setCounterpartyHasMore(false);
+        setCounterpartyTotalResults(0);
         return;
       }
-      setIsCounterpartySearching(true);
+      if (page === 1) {
+        setIsCounterpartySearching(true);
+      }
       try {
         await new Promise((resolve) => setTimeout(resolve, 350));
-        let results = mockSearchResults.filter(
+        let filteredResults = mockSearchResults.filter(
           (cp) => cp.name.toLowerCase().includes(query.toLowerCase())
         );
-        if (txType === "ach") {
-          results = results.filter(
-            (cp) => cp.paymentInstrumentType === "ach" || cp.paymentInstrumentType === "both"
-          );
-        } else if (txType === "wire") {
-          results = results.filter(
-            (cp) => cp.paymentInstrumentType === "wire" || cp.paymentInstrumentType === "both"
-          );
+        filteredResults = filterByTransactionType(filteredResults, txType);
+        const startIndex = (page - 1) * PAGE_SIZE;
+        const paginatedResults = filteredResults.slice(startIndex, startIndex + PAGE_SIZE);
+        if (page === 1) {
+          setCounterpartySearchResults(paginatedResults);
+        } else {
+          setCounterpartySearchResults((prev) => [...prev, ...paginatedResults]);
         }
-        setCounterpartySearchResults(results);
+        setCounterpartyTotalResults(filteredResults.length);
+        setCounterpartyHasMore(startIndex + PAGE_SIZE < filteredResults.length);
+        setCounterpartySearchPage(page);
         setShowCounterpartyDropdown(true);
       } finally {
         setIsCounterpartySearching(false);
@@ -14512,11 +14568,19 @@ function NewTransaction() {
   }, [debouncedSearch]);
   const handleCounterpartySearchChange = (value) => {
     form.setValue("counterpartyName", value);
+    setCurrentSearchQuery(value);
+    setCounterpartySearchPage(1);
     if (counterpartyLookedUp) {
       setCounterpartyLookedUp(false);
       setCounterpartyData(null);
     }
-    debouncedSearch(value, form.getValues("transactionType"));
+    debouncedSearch(value, form.getValues("transactionType"), 1);
+  };
+  const handleLoadMoreCounterparties = async () => {
+    setIsLoadingMoreCounterparties(true);
+    const txType = form.getValues("transactionType");
+    await debouncedSearch(currentSearchQuery, txType, counterpartySearchPage + 1);
+    setIsLoadingMoreCounterparties(false);
   };
   const handleTransactionTypeChange = (newType) => {
     form.setValue("transactionType", newType);
@@ -14572,7 +14636,7 @@ function NewTransaction() {
     form.setValue("counterpartyName", "");
     form.setValue("amount", "");
     form.setValue("description", "");
-    form.setValue("adjustmentDirection", "");
+    form.setValue("adjustmentDirection", "debit");
     form.setValue("adjustmentType", "");
     setReceiverAccountLookedUp(false);
     setReceiverAccountData(null);
@@ -14647,6 +14711,22 @@ function NewTransaction() {
     }
     setIsSubmitting(true);
     try {
+      const submissionPayload = {
+        ...data,
+        // Include counterparty details for ACH/Wire transactions
+        ...requiresCounterparty && counterpartyData && {
+          counterpartyId: counterpartyData.counterpartyId,
+          counterpartyType: counterpartyData.counterpartyType,
+          counterpartyPaymentInstrumentType: counterpartyData.paymentInstrumentType
+        },
+        // Include account details
+        accountId: accountData?.customerId,
+        // Include receiver account for transfers
+        ...data.transactionType === "transfer" && receiverAccountData && {
+          receiverAccountId: receiverAccountData.customerId
+        }
+      };
+      console.log("Transaction submission payload:", submissionPayload);
       await new Promise((resolve) => setTimeout(resolve, 1500));
       const hasError = Math.random() > 0.1;
       if (hasError) {
@@ -14676,7 +14756,7 @@ function NewTransaction() {
       amount: "",
       description: "",
       certifyInformation: false,
-      adjustmentDirection: "",
+      adjustmentDirection: "debit",
       adjustmentType: "",
       receiverAccountNumber: ""
     });
@@ -14742,6 +14822,10 @@ function NewTransaction() {
       onCounterpartySearchChange: handleCounterpartySearchChange,
       onCounterpartySelect: handleCounterpartySelect,
       onCounterpartyDropdownClose: () => setShowCounterpartyDropdown(false),
+      counterpartyHasMore,
+      counterpartyTotalResults,
+      isLoadingMoreCounterparties,
+      onLoadMoreCounterparties: handleLoadMoreCounterparties,
       onEditCounterparty: handleEditCounterparty,
       onTransactionTypeChange: handleTransactionTypeChange,
       onSubmit: handleSubmit,
@@ -14755,7 +14839,8 @@ function NewTransaction() {
       onReceiverAccountLookup: handleReceiverAccountLookup,
       onEditReceiverAccount: handleEditReceiverAccount,
       isReviewReady,
-      adjustmentTypeOptions
+      adjustmentTypeOptions,
+      transactionTypeOptions
     }
   );
 }
@@ -16952,7 +17037,6 @@ exports.Statement = Statement;
 exports.StatementHeader = StatementHeader;
 exports.StatementView = StatementView;
 exports.StatusBadge = StatusBadge;
-exports.TRANSACTION_TYPES = TRANSACTION_TYPES;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;