diff --git a/vite/src/views/customers2/components/sheets/BalanceEditSheet.tsx b/vite/src/views/customers2/components/sheets/BalanceEditSheet.tsx
new file mode 100644
index 000000000..fa80540fc
--- /dev/null
+++ b/vite/src/views/customers2/components/sheets/BalanceEditSheet.tsx
@@ -0,0 +1,314 @@
+import {
+ type FullCusProduct,
+ type FullCustomerEntitlement,
+ type FullCustomerPrice,
+ getCusEntBalance,
+} from "@autumn/shared";
+import { ArrowLeft } from "@phosphor-icons/react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { AdminHover } from "@/components/general/AdminHover";
+import { DateInputUnix } from "@/components/general/DateInputUnix";
+import { Button } from "@/components/v2/buttons/Button";
+import { CopyButton } from "@/components/v2/buttons/CopyButton";
+import { LabelInput } from "@/components/v2/inputs/LabelInput";
+import {
+ SheetFooter,
+ SheetHeader,
+ SheetSection,
+} from "@/components/v2/sheets/InlineSheet";
+import { useCustomerBalanceSheetStore } from "@/hooks/stores/useCustomerBalanceSheetStore";
+import { useSheetStore } from "@/hooks/stores/useSheetStore";
+import { CusService } from "@/services/customers/CusService";
+import { useAxiosInstance } from "@/services/useAxiosInstance";
+import { getBackendErr, notNullish } from "@/utils/genUtils";
+import { getCusEntHoverTexts } from "@/views/admin/adminUtils";
+import { useCusQuery } from "@/views/customers/customer/hooks/useCusQuery";
+import { InfoBox } from "@/views/onboarding2/integrate/components/InfoBox";
+import { useCustomerContext } from "../../customer/CustomerContext";
+
+export function BalanceEditSheet() {
+ const { customer, refetch } = useCusQuery();
+ const { entityId } = useCustomerContext();
+ const {
+ featureId,
+ originalEntitlements,
+ selectedCusEntId,
+ closeSheet: closeBalanceSheet,
+ } = useCustomerBalanceSheetStore();
+ const closeSheet = useSheetStore((s) => s.closeSheet);
+ const setSheet = useSheetStore((s) => s.setSheet);
+ const setBalanceSheet = useCustomerBalanceSheetStore((s) => s.setSheet);
+
+ const axiosInstance = useAxiosInstance();
+ const [updateLoading, setUpdateLoading] = useState(false);
+
+ const hasMultipleBalances = originalEntitlements.length > 1;
+
+ const initialFields = useMemo(() => {
+ if (!originalEntitlements.length) {
+ return new Map<
+ string,
+ { balance: number | null; next_reset_at: number | null }
+ >();
+ }
+
+ const fields = new Map<
+ string,
+ { balance: number | null; next_reset_at: number | null }
+ >();
+
+ for (const cusEnt of originalEntitlements) {
+ const balance = getCusEntBalance({
+ cusEnt,
+ entityId,
+ }).balance;
+
+ fields.set(cusEnt.id, {
+ balance,
+ next_reset_at: cusEnt.next_reset_at,
+ });
+ }
+
+ return fields;
+ }, [originalEntitlements, entityId]);
+
+ const [updateFields, setUpdateFields] = useState(initialFields);
+
+ // Reset fields when feature changes
+ useEffect(() => {
+ setUpdateFields(initialFields);
+ }, [initialFields]);
+
+ const getCusProduct = (cusEnt: FullCustomerEntitlement) => {
+ const cusProduct = customer?.customer_products.find(
+ (cp: FullCusProduct) => cp.id === cusEnt.customer_product_id,
+ );
+ return cusProduct;
+ };
+
+ const handleClose = () => {
+ closeBalanceSheet();
+ closeSheet();
+ };
+
+ const handleBackToSelection = () => {
+ setBalanceSheet({
+ type: "edit-balance",
+ featureId,
+ originalEntitlements,
+ selectedCusEntId: null,
+ });
+ setSheet({ type: "balance-selection" });
+ };
+
+ const handleUpdateCusEntitlement = async (
+ cusEnt: FullCustomerEntitlement,
+ ) => {
+ const fields = updateFields.get(cusEnt.id);
+ if (!fields) return;
+
+ const balanceInt = parseFloat(String(fields.balance));
+ if (Number.isNaN(balanceInt)) {
+ toast.error("Balance not valid");
+ return;
+ }
+
+ const cusProduct = getCusProduct(cusEnt);
+ const cusPrice = cusProduct?.customer_prices.find(
+ (cp: FullCustomerPrice) =>
+ cp.price.entitlement_id === cusEnt.entitlement.id,
+ );
+
+ if (cusPrice && fields.next_reset_at !== cusEnt.next_reset_at) {
+ toast.error("Not allowed to change reset at for paid features");
+ return;
+ }
+
+ setUpdateLoading(true);
+ try {
+ await CusService.updateCusEntitlement(
+ axiosInstance,
+ customer.id || customer.internal_id,
+ cusEnt.id,
+ {
+ balance: balanceInt,
+ next_reset_at: fields.next_reset_at,
+ entity_id: entityId,
+ },
+ );
+ toast.success("Balance updated successfully");
+ await refetch();
+ handleClose();
+ } catch (error) {
+ toast.error(getBackendErr(error, "Failed to update entitlement"));
+ }
+ setUpdateLoading(false);
+ };
+
+ if (!featureId || !originalEntitlements.length) {
+ return (
+
+
+
+ );
+ }
+
+ const firstEnt = originalEntitlements[0];
+ const feature = firstEnt.entitlement.feature;
+
+ // Get the selected entitlement
+ const selectedCusEnt = hasMultipleBalances
+ ? originalEntitlements.find((ent) => ent.id === selectedCusEntId)
+ : originalEntitlements[0];
+
+ if (!selectedCusEnt) {
+ return (
+
+
+
+ );
+ }
+
+ const fields = updateFields.get(selectedCusEnt.id);
+ if (!fields) return null;
+
+ const cusProduct = getCusProduct(selectedCusEnt);
+ const cusPrice = cusProduct?.customer_prices.find(
+ (cp: FullCustomerPrice) =>
+ cp.price.entitlement_id === selectedCusEnt.entitlement.id,
+ );
+
+ return (
+
+
+ {feature.id}
+
+ }
+ >
+ {hasMultipleBalances && (
+
+ )}
+
+
+
+
+
+
+
+ Plan ID:
+
+
+ {cusProduct?.product_id || "N/A"}
+
+
+ {cusProduct?.entity_id && (
+
+ Entity ID:
+
+ {cusProduct.entity_id}
+
+
+ )}
+
+
+ Reset Interval:
+
+
+ {selectedCusEnt.entitlement.interval === "lifetime"
+ ? "never"
+ : selectedCusEnt.entitlement.interval}
+
+
+
+
+
+
+
+
{
+ const newFields = new Map(updateFields);
+ const current = newFields.get(selectedCusEnt.id) || {
+ balance: null,
+ next_reset_at: null,
+ };
+ newFields.set(selectedCusEnt.id, {
+ ...current,
+ balance: e.target.value ? parseFloat(e.target.value) : null,
+ });
+ setUpdateFields(newFields);
+ }}
+ />
+
+
+
Next Reset
+
{
+ const newFields = new Map(updateFields);
+ const current = newFields.get(selectedCusEnt.id) || {
+ balance: null,
+ next_reset_at: null,
+ };
+ newFields.set(selectedCusEnt.id, {
+ ...current,
+ next_reset_at: unixDate,
+ });
+ setUpdateFields(newFields);
+ }}
+ />
+
+
+ {cusPrice && (
+
+ Reset cycle cannot be changed for paid features, as it follows
+ the billing cycle.
+
+ )}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/vite/src/views/customers2/components/sheets/BalanceSelectionSheet.tsx b/vite/src/views/customers2/components/sheets/BalanceSelectionSheet.tsx
new file mode 100644
index 000000000..126f7c5a3
--- /dev/null
+++ b/vite/src/views/customers2/components/sheets/BalanceSelectionSheet.tsx
@@ -0,0 +1,120 @@
+import {
+ type FullCusProduct,
+ type FullCustomerEntitlement,
+ getCusEntBalance,
+} from "@autumn/shared";
+import { CopyButton } from "@/components/v2/buttons/CopyButton";
+import { SheetHeader, SheetSection } from "@/components/v2/sheets/InlineSheet";
+import { useCustomerBalanceSheetStore } from "@/hooks/stores/useCustomerBalanceSheetStore";
+import { useSheetStore } from "@/hooks/stores/useSheetStore";
+import { notNullish } from "@/utils/genUtils";
+import { useCusQuery } from "@/views/customers/customer/hooks/useCusQuery";
+import { useCustomerContext } from "../../customer/CustomerContext";
+
+export function BalanceSelectionSheet() {
+ const { customer } = useCusQuery();
+ const { entityId } = useCustomerContext();
+ const {
+ featureId,
+ originalEntitlements,
+ setSheet: setBalanceSheet,
+ } = useCustomerBalanceSheetStore();
+ const setSheet = useSheetStore((s) => s.setSheet);
+
+ if (!featureId || !originalEntitlements.length) {
+ return (
+
+
+
+ );
+ }
+
+ const firstEnt = originalEntitlements[0];
+ const feature = firstEnt.entitlement.feature;
+
+ const getCusProduct = (cusEnt: FullCustomerEntitlement) => {
+ const cusProduct = customer?.customer_products.find(
+ (cp: FullCusProduct) => cp.id === cusEnt.customer_product_id,
+ );
+ return cusProduct;
+ };
+
+ const handleSelectBalance = (cusEntId: string) => {
+ setBalanceSheet({
+ type: "edit-balance",
+ featureId,
+ originalEntitlements,
+ selectedCusEntId: cusEntId,
+ });
+ setSheet({ type: "balance-edit" });
+ };
+
+ return (
+
+
+ {feature.name}
+
+ }
+ />
+
+
+
+
+ {originalEntitlements.map((cusEnt: FullCustomerEntitlement) => {
+ const cusProduct = getCusProduct(cusEnt);
+ const balance = getCusEntBalance({
+ cusEnt,
+ entityId,
+ }).balance;
+
+ return (
+
+ );
+ })}
+
+
+ );
+}
diff --git a/vite/src/views/customers2/components/sheets/SubscriptionDetailSheet.tsx b/vite/src/views/customers2/components/sheets/SubscriptionDetailSheet.tsx
index caec9f0fb..764b36275 100644
--- a/vite/src/views/customers2/components/sheets/SubscriptionDetailSheet.tsx
+++ b/vite/src/views/customers2/components/sheets/SubscriptionDetailSheet.tsx
@@ -1,4 +1,5 @@
import {
+ CusProductStatus,
type Entity,
type FeatureOptions,
getProductItemDisplay,
@@ -8,10 +9,13 @@ import {
Calendar,
CheckCircle,
CreditCard,
+ CubeIcon,
+ GitBranchIcon,
Hash,
+ HashIcon,
Info,
- Package,
PencilSimple,
+ PencilSimpleIcon,
Tag,
XCircle,
} from "@phosphor-icons/react";
@@ -20,12 +24,12 @@ import { useEffect } from "react";
import { useNavigate } from "react-router";
// import { Badge } from "@/components/v2/Badge";
import { Button } from "@/components/v2/buttons/Button";
+import { IconButton } from "@/components/v2/buttons/IconButton";
import { SheetHeader, SheetSection } from "@/components/v2/sheets/InlineSheet";
import { SheetFooter } from "@/components/v2/sheets/SharedSheetComponents";
import { useOrg } from "@/hooks/common/useOrg";
import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
import {
- useHasChanges,
usePrepaidItems,
useProductStore,
} from "@/hooks/stores/useProductStore";
@@ -47,14 +51,18 @@ export function SubscriptionDetailSheet() {
const resetProductStore = useProductStore((s) => s.reset);
const sheetType = useSheetStore((s) => s.type);
// Get edited product from store
- const hasChanges = useHasChanges();
+
const storeProduct = useProductStore((s) => s.product);
// Check if there are changes in the product store
- const shouldShowEditedProduct = hasChanges && !!storeProduct;
+ const showUpdateProduct = storeProduct?.id;
// Get customer product and productV2 by itemId
const { cusProduct, productV2 } = useSubscriptionById({ itemId });
+ const isExpired = cusProduct?.status === CusProductStatus.Expired;
+
+ console.log("cusProduct", cusProduct);
+ console.log("productV2", productV2);
useEffect(() => {
if (
@@ -120,42 +128,67 @@ export function SubscriptionDetailSheet() {
return (
{/* Product Information */}
-
-
-
}
- label="Product Name"
- value={cusProduct.product.name}
- />
-
}
- label="Product ID"
- value={cusProduct.product_id}
- mono
- />
-
}
- label="Version"
- value={cusProduct.product.version}
- />
- {cusProduct.quantity && cusProduct.quantity > 1 && (
+
}
+ >
+ Edit Plan
+
+ )
+ }
+ >
+
+
}
- label="Quantity"
- value={cusProduct.quantity.toString()}
+ icon={}
+ label="Plan"
+ value={cusProduct.product.name}
/>
+ }
+ label="ID"
+ value={cusProduct.product_id}
+ mono
+ />
+ }
+ label="Version"
+ value={cusProduct.product.version}
+ />
+ {cusProduct.quantity && cusProduct.quantity > 1 && (
+ }
+ label="Quantity"
+ value={cusProduct.quantity.toString()}
+ />
+ )}
+
+ {!isExpired && (
+
}
+ >
+ Edit Plan
+
)}
{/* Status & Dates */}
-
+
}
@@ -257,72 +290,70 @@ export function SubscriptionDetailSheet() {
)}
{/* Edited Plan Items - Show pending changes */}
- {shouldShowEditedProduct &&
- storeProduct &&
- storeProduct.items.length > 0 && (
-
-
-
-
-
- These changes are pending and will be applied when you save.
-
-
- {storeProduct.items.map((item, index) => {
- const display = getProductItemDisplay({
- item,
- features,
- currency: org?.default_currency || "USD",
- fullDisplay: true,
- amountFormatOptions: { currencyDisplay: "narrowSymbol" },
- });
+ {showUpdateProduct && storeProduct && storeProduct.items.length > 0 && (
+
+
+
+
+
+ These changes are pending and will be applied when you save.
+
+
+ {storeProduct.items.map((item, index) => {
+ const display = getProductItemDisplay({
+ item,
+ features,
+ currency: org?.default_currency || "USD",
+ fullDisplay: true,
+ amountFormatOptions: { currencyDisplay: "narrowSymbol" },
+ });
- const isFeatureItem =
- item.type === ProductItemType.Feature ||
- item.type === ProductItemType.FeaturePrice;
+ const isFeatureItem =
+ item.type === ProductItemType.Feature ||
+ item.type === ProductItemType.FeaturePrice;
- // Find prepaid quantity from cusProduct.options
- const prepaidOption = cusProduct?.options?.find(
- (opt: FeatureOptions) => opt.feature_id === item.feature_id,
- );
- const prepaidQuantity = prepaidOption
- ? prepaidOption.quantity / (item.billing_units || 1)
- : null;
+ // Find prepaid quantity from cusProduct.options
+ const prepaidOption = cusProduct?.options?.find(
+ (opt: FeatureOptions) => opt.feature_id === item.feature_id,
+ );
+ const prepaidQuantity = prepaidOption
+ ? prepaidOption.quantity / (item.billing_units || 1)
+ : null;
- return (
-
-
-
-
- {display.primary_text}
- {prepaidQuantity !== null && (
-
- Qty: {prepaidQuantity}
-
- )}
-
- {display.secondary_text && (
-
- {display.secondary_text}
-
+ return (
+
+
+
+
+ {display.primary_text}
+ {prepaidQuantity !== null && (
+
+ Qty: {prepaidQuantity}
+
)}
+ {display.secondary_text && (
+
+ {display.secondary_text}
+
+ )}
- );
- })}
-
-
- )}
+
+ );
+ })}
+
+
+ )}
{/* Pricing Summary */}
@@ -389,34 +420,21 @@ export function SubscriptionDetailSheet() {
)}
-
{icon}
-
-
{label}
+
+
{icon}
+
+
+ {label}
+
;
}) => {
const { customer } = useCusQuery();
const customerId = customer?.id;
@@ -39,6 +37,7 @@ const FormContent = ({
const prepaidItems = usePrepaidItems({ product });
const prepaidOptions = form.state.values.prepaidOptions;
+ const initialPrepaidOptions = form.state.values.initialPrepaidOptions;
const previewQuery = useAttachPreview({
customerId,
@@ -61,7 +60,8 @@ const FormContent = ({
// Check if there are any changes from initial values
const hasQuantityChanges = prepaidItems.some((item) => {
const currentQuantity = prepaidOptions?.[item.feature_id as string];
- const initialQuantity = initialPrepaidOptions[item.feature_id as string];
+ const initialQuantity =
+ initialPrepaidOptions?.[item.feature_id as string];
return currentQuantity !== initialQuantity;
});
@@ -76,6 +76,7 @@ const FormContent = ({
previewData={previewQuery.data}
isLoading={previewQuery.isLoading}
product={product}
+ form={form}
/>
s.setSheet);
const storeProduct = useProductStore((s) => s.product);
- const form = useAttachProductForm({
- initialProductId: cusProduct?.product.id ?? undefined,
- });
-
// Memoize initial prepaid options from cusProduct
const initialPrepaidOptions = useMemo(
() =>
@@ -119,6 +116,11 @@ function SheetContent({
[cusProduct.options],
);
+ const form = useAttachProductForm({
+ initialProductId: cusProduct?.product.id ?? undefined,
+ initialPrepaidOptions,
+ });
+
const product = storeProduct?.id ? storeProduct : (productV2 ?? undefined);
const prepaidItems = usePrepaidItems({ product });
@@ -183,7 +185,6 @@ function SheetContent({
productV2={productV2}
cusProduct={cusProduct}
form={form}
- initialPrepaidOptions={initialPrepaidOptions}
/>
)}
@@ -200,7 +201,6 @@ export function SubscriptionUpdateSheet() {
const { cusProduct, productV2 } = useSubscriptionById({ itemId });
- const entityId = cusProduct?.entity_id ?? undefined;
const sheetType = useSheetStore((s) => s.type);
const resetProductStore = useProductStore((s) => s.reset);
diff --git a/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTable.tsx b/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTable.tsx
index 328d2e2c6..5a491d676 100644
--- a/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTable.tsx
+++ b/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTable.tsx
@@ -4,6 +4,7 @@ import type {
} from "@autumn/shared";
import { Table } from "@/components/general/table";
import { useCustomerBalanceSheetStore } from "@/hooks/stores/useCustomerBalanceSheetStore";
+import { useSheetStore } from "@/hooks/stores/useSheetStore";
import { useCustomerTable } from "@/views/customers2/hooks/useCustomerTable";
import { CustomerBalanceTableColumns } from "./CustomerBalanceTableColumns";
@@ -20,7 +21,15 @@ export function CustomerBalanceTable({
aggregatedMap: Map;
isLoading: boolean;
}) {
- const setSheet = useCustomerBalanceSheetStore((s) => s.setSheet);
+ const setBalanceSheet = useCustomerBalanceSheetStore((s) => s.setSheet);
+ const setSheet = useSheetStore((s) => s.setSheet);
+ const sheetType = useSheetStore((s) => s.type);
+ const balanceOpen =
+ sheetType === "balance-selection" || sheetType === "balance-edit";
+ const selectedCusEntId = useCustomerBalanceSheetStore(
+ (s) => s.selectedCusEntId,
+ );
+ const selectedFeatureId = useCustomerBalanceSheetStore((s) => s.featureId);
const columns = CustomerBalanceTableColumns({
filteredCustomerProducts,
@@ -38,11 +47,37 @@ export function CustomerBalanceTable({
const handleRowClick = (ent: FullCusEntWithFullCusProduct) => {
const featureId = ent.entitlement.feature.id;
const ents = aggregatedMap.get(featureId) || [ent];
- setSheet({
+ const hasMultipleBalances = ents.length > 1;
+
+ // Set balance data in balance store
+ setBalanceSheet({
type: "edit-balance",
featureId,
originalEntitlements: ents,
+ selectedCusEntId: hasMultipleBalances ? null : ents[0].id,
});
+
+ // Open the appropriate inline sheet
+ if (hasMultipleBalances) {
+ setSheet({ type: "balance-selection" });
+ } else {
+ setSheet({ type: "balance-edit" });
+ }
+ };
+
+ // Determine the selected row ID based on whether it's an aggregated balance or single balance
+ const getSelectedRowId = () => {
+ if (!balanceOpen) return undefined;
+ // For single balance selection, match by customer entitlement ID
+ if (selectedCusEntId) return selectedCusEntId;
+ // For aggregated balance selection, find the row that matches the feature ID
+ if (selectedFeatureId) {
+ const matchingEnt = allEnts.find(
+ (ent) => ent.entitlement.feature.id === selectedFeatureId,
+ );
+ return matchingEnt?.id;
+ }
+ return undefined;
};
return (
@@ -53,6 +88,8 @@ export function CustomerBalanceTable({
enableSorting,
isLoading,
onRowClick: handleRowClick,
+ flexibleTableColumns: true,
+ selectedItemId: getSelectedRowId(), //decides the highlighted row on sheetopen
}}
>
diff --git a/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTableColumns.tsx b/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTableColumns.tsx
index 3fd24e8b3..058bcbf27 100644
--- a/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTableColumns.tsx
+++ b/vite/src/views/customers2/components/table/customer-balance/CustomerBalanceTableColumns.tsx
@@ -24,8 +24,9 @@ export const CustomerBalanceTableColumns = ({
}) => [
{
header: "Feature",
- size: 160,
accessorKey: "feature",
+ enableResizing: true,
+ minSize: 100,
cell: ({ row }: { row: Row }) => {
const ent = row.original;
const featureId = ent.entitlement.feature.id;
@@ -49,7 +50,9 @@ export const CustomerBalanceTableColumns = ({
},
{
header: "Usage",
- size: 200,
+ // enableResizing: true,
+ // size: 200,
+ // minSize: 100,
accessorKey: "usage",
cell: ({ row }: { row: Row }) => {
const ent = row.original;
@@ -136,29 +139,31 @@ export const CustomerBalanceTableColumns = ({
);
},
},
- {
- header: "Reset Date",
- size: 120,
- accessorKey: "reset_date",
- cell: ({ row }: { row: Row }) => {
- const ent = row.original;
+ // {
+ // header: "Reset Date",
+ // size: 120,
+ // accessorKey: "reset_date",
+ // cell: ({ row }: { row: Row }) => {
+ // const ent = row.original;
- if (!ent.next_reset_at) {
- return ;
- }
+ // if (!ent.next_reset_at) {
+ // return ;
+ // }
- return (
-
-
- Resets {formatUnixToDateTimeString(ent.next_reset_at)}
-
-
- );
- },
- },
+ // return (
+ //
+ //
+ // Resets {formatUnixToDateTimeString(ent.next_reset_at)}
+ //
+ //
+ // );
+ // },
+ // },
{
header: "Bar",
size: 220,
+ // maxSize: 220,
+ // enableResizing: true,
accessorKey: "bar",
cell: ({ row }: { row: Row }) => {
const ent = row.original;
@@ -193,12 +198,17 @@ export const CustomerBalanceTableColumns = ({
return (
- {/*
+
Resets {formatUnixToDateTimeString(ent.next_reset_at)}
- */}
+
0 ? "opacity-100" : "opacity-0",
)}
>
diff --git a/vite/src/views/customers2/components/table/customer-invoices/CustomerInvoicesTable.tsx b/vite/src/views/customers2/components/table/customer-invoices/CustomerInvoicesTable.tsx
index 7209c3983..26f2b3083 100644
--- a/vite/src/views/customers2/components/table/customer-invoices/CustomerInvoicesTable.tsx
+++ b/vite/src/views/customers2/components/table/customer-invoices/CustomerInvoicesTable.tsx
@@ -78,7 +78,7 @@ export function CustomerInvoicesTable() {
},
});
- const hasInvoices = invoices.length > 0;
+ // const hasInvoices = invoices.length > 0;
return (
diff --git a/vite/src/views/customers2/components/table/customer-list/CustomerListTable.tsx b/vite/src/views/customers2/components/table/customer-list/CustomerListTable.tsx
index 1afb6d6d2..eac20d0cf 100644
--- a/vite/src/views/customers2/components/table/customer-list/CustomerListTable.tsx
+++ b/vite/src/views/customers2/components/table/customer-list/CustomerListTable.tsx
@@ -21,6 +21,8 @@ export function CustomerListTable({
}) {
const navigate = useNavigate();
+ // Close any open sheet on mount in useEffect
+
const columns = useMemo(() => createCustomerListColumns(), []);
const table = useCustomerTable({
diff --git a/vite/src/views/customers2/components/table/customer-products/AttachProductSheetTrigger.tsx b/vite/src/views/customers2/components/table/customer-products/AttachProductSheetTrigger.tsx
index fd942d650..ca48fd297 100644
--- a/vite/src/views/customers2/components/table/customer-products/AttachProductSheetTrigger.tsx
+++ b/vite/src/views/customers2/components/table/customer-products/AttachProductSheetTrigger.tsx
@@ -6,27 +6,28 @@ import {
useSheetStore,
} from "@/hooks/stores/useSheetStore";
import { useEntity } from "@/hooks/stores/useSubscriptionStore";
+import { cn } from "@/lib/utils";
export function AttachProductSheetTrigger() {
const { setSheet, closeSheet } = useSheetStore();
const isAttachingProduct = useIsAttachingProduct();
const { entity } = useEntity();
const features = useFeaturesQuery();
+ const sheetType = useSheetStore((s) => s.type);
const feature = features.features.find((f) => f.id === entity?.feature_id);
const handleClick = () => {
- if (isAttachingProduct) {
- closeSheet();
- } else {
- setSheet({ type: "attach-product" });
- }
+ setSheet({ type: "attach-product" });
};
return (