style: refresh reward selectors and add coupon update confirmation

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-14 18:21:58 +01:00
parent fbc8603da2
commit 4a334dc961
5 changed files with 438 additions and 274 deletions
--- a/knip.json
+++ b/knip.json
@@ -44,7 +44,12 @@
 		"vite": {
 			"entry": ["tests/**/*.{ts,tsx}", "src/**/*.test.{ts,tsx}"],
 			"project": ["src/**/*.{ts,tsx}", "tests/**/*.{ts,tsx}"],
-			"ignore": ["src/components/ai-elements/**", "src/hooks/useControllableState.ts", "src/types/**/*.d.ts"],
+			"ignore": [
+				"src/components/ai-elements/**",
+				"src/components/ui/scroll-area.tsx",
+				"src/hooks/useControllableState.ts",
+				"src/types/**/*.d.ts"
+			],
 			"ignoreDependencies": [
 				"tailwindcss",
 				"tailwind-scrollbar-hide",
--- a/vite/src/views/products/rewards/reward-config/components/FeatureGrantRewardConfig.tsx
+++ b/vite/src/views/products/rewards/reward-config/components/FeatureGrantRewardConfig.tsx
@@ -253,7 +253,7 @@ export function FeatureGrantRewardConfig({
 					<AnimatePresence initial={false}>
 						{entitlements.map((ent, index) => (
 							<motion.div
-								key={`${ent.feature_id || "new"}-${index}`}
+								key={index}
 								initial={{ opacity: 0, scaleY: 0.95, originY: 0 }}
 								animate={{ opacity: 1, scaleY: 1 }}
 								exit={{ opacity: 0, scaleY: 0.95 }}
--- a/vite/src/views/products/rewards/reward-config/components/ProductPriceSelector.tsx
+++ b/vite/src/views/products/rewards/reward-config/components/ProductPriceSelector.tsx
@@ -1,8 +1,16 @@
-import type { ProductItem } from "@autumn/shared";
-import { Check, X } from "@phosphor-icons/react";
-import { IconButton } from "@/components/v2/buttons/IconButton";
-import { SelectGroup, SelectLabel } from "@/components/v2/selects/Select";
-import { TagSelect } from "@/components/v2/selects/TagSelect";
+import type { ProductItem, ProductV2 } from "@autumn/shared";
+import { PackageIcon, XIcon } from "@phosphor-icons/react";
+import { Checkbox } from "@/components/v2/checkboxes/Checkbox";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "@/components/v2/dropdowns/DropdownMenu";
 import { useOrg } from "@/hooks/common/useOrg";
 import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
 import { useProductsByPriceIdsQuery } from "@/hooks/queries/useProductsByPriceIdsQuery";
@@ -11,11 +19,19 @@ import { isFeatureItem } from "@/utils/product/getItemType";
 import { formatProductItemText } from "@/utils/product/product-item/formatProductItem";
 import type { FrontendReward } from "../../types/frontendReward";

+const MAX_VISIBLE_CHIPS = 3;
+
 interface ProductPriceSelectorProps {
 	reward: FrontendReward;
 	setReward: (reward: FrontendReward) => void;
 }

+const priceItemsOf = (product: ProductV2) =>
+	(product.items ?? []).filter(
+		(item): item is ProductItem & { price_id: string } =>
+			!isFeatureItem(item) && Boolean(item.price_id),
+	);
+
 export function ProductPriceSelector({
 	reward,
 	setReward,
@@ -25,175 +41,268 @@ export function ProductPriceSelector({
 	const { features } = useFeaturesQuery();

 	const config = reward.discount_config!;
+	const priceIds = config.price_ids ?? [];
+	const applyToAll = config.apply_to_all ?? false;

-	const linkedPriceIds = config.price_ids ?? [];
-	const { products: linkedProductVersions } =
-		useProductsByPriceIdsQuery(linkedPriceIds);
+	// Selected price IDs may belong to historical versions absent from the
+	// latest-versions list; resolve their owning product for chip labels.
+	const { products: linkedProductVersions, isLoading: linkedVersionsLoading } =
+		useProductsByPriceIdsQuery(priceIds);

-	const setConfig = (key: string, value: any) => {
-		setReward({
-			...reward,
-			discount_config: { ...config, [key]: value },
-		});
-	};
-
-	const handlePriceToggle = (priceId: string) => {
-		const currentPriceIds = config.price_ids || [];
-		let newPriceIds: string[];
-
-		if (currentPriceIds.includes(priceId)) {
-			newPriceIds = currentPriceIds.filter((id) => id !== priceId);
-		} else {
-			newPriceIds = [...currentPriceIds, priceId];
-		}
-
-		// If selecting a specific price, clear apply_to_all
+	const setPriceIds = (nextPriceIds: string[]) =>
 		setReward({
 			...reward,
 			discount_config: {
 				...config,
 				apply_to_all: false,
-				price_ids: newPriceIds,
+				price_ids: nextPriceIds,
 			},
 		});
-	};

-	const handleApplyToAllToggle = () => {
-		const newApplyToAll = !config.apply_to_all;
+	const toggleApplyToAll = () =>
+		setReward({
+			...reward,
+			discount_config: {
+				...config,
+				apply_to_all: !applyToAll,
+				price_ids: [],
+			},
+		});

-		if (newApplyToAll) {
-			// Enabling "Apply to all" clears price_ids
-			setReward({
-				...reward,
-				discount_config: {
-					...config,
-					apply_to_all: true,
-					price_ids: [],
-				},
-			});
-		} else {
-			// Disabling "Apply to all" just sets it to false
-			setConfig("apply_to_all", false);
-		}
-	};
-
-	const formatPriceTag = (priceId: string) => {
-		const product = linkedProductVersions.find((p: any) =>
-			p.items.find((i: any) => i.price_id === priceId),
+	const togglePrice = (priceId: string) =>
+		setPriceIds(
+			priceIds.includes(priceId)
+				? priceIds.filter((id) => id !== priceId)
+				: [...priceIds, priceId],
 		);
-		const item = product?.items.find((i: any) => i.price_id === priceId);

-		if (!item || !product) return "Unknown Price";
+	const toggleProduct = (product: ProductV2) => {
+		const ids = priceItemsOf(product).map((item) => item.price_id);
+		const allSelected = ids.every((id) => priceIds.includes(id));
+		setPriceIds(
+			allSelected
+				? priceIds.filter((id) => !ids.includes(id))
+				: [...priceIds, ...ids.filter((id) => !priceIds.includes(id))],
+		);
+	};

+	const availableProducts = products.filter(
+		(product) => priceItemsOf(product).length > 0,
+	);
+
+	// Prefer latest versions already on the client; fall back to the async
+	// query only for prices owned by historical versions.
+	const productVersionOf = (priceId: string) =>
+		[...products, ...linkedProductVersions].find((product) =>
+			product.items?.some((item) => item.price_id === priceId),
+		);
+
+	const chipLabel = (priceId: string) => {
+		const product = productVersionOf(priceId);
+		const item = product?.items?.find((i) => i.price_id === priceId);
+		if (!item || !product)
+			return linkedVersionsLoading ? "Loading…" : "Unknown price";
 		const priceText = formatProductItemText({ item, org, features });
 		return `${product.name} v${product.version} — ${priceText}`;
 	};

-	// Get products with non-feature items
-	const availableProducts = products.filter((product: any) => {
-		const nonFeatureItems = product.items?.filter(
-			(item: ProductItem) => !isFeatureItem(item),
-		);
-		return nonFeatureItems && nonFeatureItems.length > 0;
-	});
+	type Chip = { key: string; label: string; onRemove?: () => void };

-	if (!products || products.length === 0) {
-		return <p className="text-sm text-tertiary-foreground">No products available</p>;
-	}
+	// Collapse a product's prices into a single product chip when all are selected.
+	const buildChips = (): Chip[] => {
+		if (applyToAll) return [{ key: "__all__", label: "All products" }];

-	// Build options list - not used for display, just for reference
-	const priceOptions = availableProducts.flatMap((product: any) => {
-		const nonFeatureItems = product.items.filter(
-			(item: ProductItem) => !isFeatureItem(item),
+		const chips: Chip[] = [];
+		const seenProducts = new Set<string>();
+		for (const priceId of priceIds) {
+			const product = productVersionOf(priceId);
+			const productPriceIds = product
+				? priceItemsOf(product).map((item) => item.price_id)
+				: [];
+			const allPricesSelected =
+				productPriceIds.length > 0 &&
+				productPriceIds.every((id) => priceIds.includes(id));
+
+			if (product && allPricesSelected) {
+				const productKey = `${product.id}:${product.version}`;
+				if (seenProducts.has(productKey)) continue;
+				seenProducts.add(productKey);
+				chips.push({
+					key: productKey,
+					label: product.name,
+					onRemove: () =>
+						setPriceIds(priceIds.filter((id) => !productPriceIds.includes(id))),
+				});
+				continue;
+			}
+
+			chips.push({
+				key: priceId,
+				label: chipLabel(priceId),
+				onRemove: () => togglePrice(priceId),
+			});
+		}
+		return chips;
+	};
+
+	if (!products || products.length === 0)
+		return (
+			<p className="text-sm text-tertiary-foreground">No products available</p>
 		);
-		return nonFeatureItems.map((item: any) => ({
-			value: item.price_id,
-			label: formatProductItemText({ item, org, features }),
-		}));
-	});
+
+	const chips = buildChips();

 	return (
-		<TagSelect
-			value={config.price_ids || []}
-			onChange={(values) => setConfig("price_ids", values)}
-			options={priceOptions}
-			placeholder="Select plans or apply to all"
-			formatTag={formatPriceTag}
-			showAllProducts={config.apply_to_all}
-			renderContent={(setOpen) => (
-				<>
-					{/* Apply to all option */}
-					<SelectGroup>
-						<div
-							role="button"
-							tabIndex={0}
-							className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer"
-							onClick={() => {
-								handleApplyToAllToggle();
-								setOpen(false);
-							}}
-							onKeyDown={(e) => {
-								if (e.key === "Enter" || e.key === " ") {
-									e.preventDefault();
-									handleApplyToAllToggle();
-									setOpen(false);
-								}
-							}}
-						>
-							<div className="flex items-center justify-between w-full">
-								<span>Apply to all products</span>
-								{config.apply_to_all && (
-									<Check size={14} className="text-primary ml-2" />
-								)}
-							</div>
-						</div>
-					</SelectGroup>
+		<div className="min-w-0 w-full">
+			<DropdownMenu>
+				<DropdownMenuTrigger className="flex h-8 w-full min-w-0 cursor-pointer items-center gap-1.5 overflow-hidden rounded-xl px-3 input-base input-state-open-tiny text-sm">
+					{chips.length === 0 ? (
+						<span className="text-tertiary-foreground">
+							Select plans or apply to all...
+						</span>
+					) : (
+						<>
+							{chips.slice(0, MAX_VISIBLE_CHIPS).map((chip) => (
+								<span
+									className="flex h-4.5 max-w-48 shrink-0 items-center gap-0.5 rounded border border-border bg-accent px-1 text-[10px] text-foreground"
+									key={chip.key}
+								>
+									<span className="shrink-0 [&_svg]:size-3">
+										<PackageIcon
+											className="text-tertiary-foreground"
+											size={12}
+											weight="duotone"
+										/>
+									</span>
+									<span className="truncate">{chip.label}</span>
+									{chip.onRemove && (
+										<span
+											className="ml-0.5 cursor-pointer text-tertiary-foreground hover:text-destructive"
+											onClick={(e) => {
+												e.stopPropagation();
+												chip.onRemove?.();
+											}}
+											onPointerDown={(e) => e.stopPropagation()}
+										>
+											<XIcon size={10} />
+										</span>
+									)}
+								</span>
+							))}
+							{chips.length > MAX_VISIBLE_CHIPS && (
+								<span className="shrink-0 px-1 text-sm text-tertiary-foreground">
+									+{chips.length - MAX_VISIBLE_CHIPS}
+								</span>
+							)}
+						</>
+					)}
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" className="w-64">
+					<DropdownMenuItem
+						className="flex cursor-pointer items-center gap-2 font-medium"
+						closeOnClick={false}
+						onClick={(e) => {
+							e.preventDefault();
+							toggleApplyToAll();
+						}}
+					>
+						<Checkbox checked={applyToAll} className="border-border" />
+						<span className="truncate">Apply to all products</span>
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<div className="max-h-72 overflow-y-auto">
+						{availableProducts.map((product) => {
+							const priceItems = priceItemsOf(product);

-					{/* Product groups */}
-					{availableProducts.map((product: any) => {
-						const nonFeatureItems = product.items.filter(
-							(item: ProductItem) => !isFeatureItem(item),
-						);
+							if (priceItems.length === 1) {
+								const priceId = priceItems[0].price_id;
+								return (
+									<DropdownMenuItem
+										className="flex cursor-pointer items-center gap-2 font-medium"
+										closeOnClick={false}
+										key={product.id}
+										onClick={(e) => {
+											e.preventDefault();
+											togglePrice(priceId);
+										}}
+									>
+										<Checkbox
+											checked={!applyToAll && priceIds.includes(priceId)}
+											className="border-border"
+										/>
+										<span className="truncate">{product.name}</span>
+									</DropdownMenuItem>
+								);
+							}

-						return (
-							<SelectGroup key={product.id}>
-								<SelectLabel>{product.name}</SelectLabel>
-								{nonFeatureItems.map((item: any) => {
-									const isSelected = config.price_ids?.includes(item.price_id);
-									return (
-										<div
-											key={item.price_id}
-											role="button"
-											tabIndex={0}
-											className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer"
-											onClick={() => handlePriceToggle(item.price_id)}
-											onKeyDown={(e) => {
-												if (e.key === "Enter" || e.key === " ") {
-													e.preventDefault();
-													handlePriceToggle(item.price_id);
-												}
+							const ids = priceItems.map((item) => item.price_id);
+							const selectedCount = ids.filter((id) =>
+								priceIds.includes(id),
+							).length;
+							const allSelected = !applyToAll && selectedCount === ids.length;
+							const someSelected = !applyToAll && selectedCount > 0;
+
+							return (
+								<DropdownMenuSub key={product.id}>
+									<DropdownMenuSubTrigger
+										className="flex cursor-pointer items-center gap-2 font-medium"
+										onClick={(e) => {
+											e.preventDefault();
+											toggleProduct(product);
+										}}
+									>
+										<Checkbox
+											checked={allSelected}
+											indeterminate={someSelected && !allSelected}
+											className="border-border"
+										/>
+										<span className="truncate">{product.name}</span>
+									</DropdownMenuSubTrigger>
+									<DropdownMenuSubContent>
+										<DropdownMenuItem
+											className="flex cursor-pointer items-center gap-2 font-medium"
+											closeOnClick={false}
+											onClick={(e) => {
+												e.preventDefault();
+												toggleProduct(product);
 											}}
 										>
-											<div className="flex items-center justify-between w-full">
+											<Checkbox
+												checked={allSelected}
+												indeterminate={someSelected && !allSelected}
+												className="border-border"
+											/>
+											All prices
+										</DropdownMenuItem>
+										<DropdownMenuSeparator />
+										{priceItems.map((item) => (
+											<DropdownMenuItem
+												className="flex cursor-pointer items-center gap-2 text-sm"
+												closeOnClick={false}
+												key={item.price_id}
+												onClick={(e) => {
+													e.preventDefault();
+													togglePrice(item.price_id);
+												}}
+											>
+												<Checkbox
+													checked={
+														!applyToAll && priceIds.includes(item.price_id)
+													}
+													className="border-border"
+												/>
 												<span className="truncate">
-													{formatProductItemText({
-														item,
-														org,
-														features,
-													})}
+													{formatProductItemText({ item, org, features })}
 												</span>
-												{isSelected && (
-													<Check size={14} className="text-primary ml-2" />
-												)}
-											</div>
-										</div>
-									);
-								})}
-							</SelectGroup>
-						);
-					})}
-				</>
-			)}
-		/>
+											</DropdownMenuItem>
+										))}
+									</DropdownMenuSubContent>
+								</DropdownMenuSub>
+							);
+						})}
+					</div>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
 	);
 }
--- a/vite/src/views/products/rewards/reward-config/components/UpdateRewardSheet.tsx
+++ b/vite/src/views/products/rewards/reward-config/components/UpdateRewardSheet.tsx
@@ -3,6 +3,14 @@ import type { AxiosError } from "axios";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { ShortcutButton } from "@/components/v2/buttons/ShortcutButton";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/v2/dialogs/Dialog";
 import {
 	SheetFooter,
 	SheetHeader,
@@ -40,6 +48,7 @@ export function UpdateRewardSheet({
 	const { features } = useFeaturesQuery();

 	const [loading, setLoading] = useState(false);
+	const [confirmCouponOpen, setConfirmCouponOpen] = useState(false);

 	const reward = useRewardStore((s) => s.reward);
 	const setReward = useRewardStore((s) => s.setReward);
@@ -102,8 +111,8 @@ export function UpdateRewardSheet({
 		return true;
 	};

-	const handleUpdate = async () => {
-		if (!selectedReward || !isFormValid()) return;
+	const performUpdate = async () => {
+		if (!selectedReward) return;

 		setLoading(true);
 		try {
@@ -120,6 +129,7 @@ export function UpdateRewardSheet({

 			await refetch();
 			toast.success("Reward updated successfully");
+			setConfirmCouponOpen(false);
 			setOpen(false);
 		} catch (error: unknown) {
 			toast.error(
@@ -130,55 +140,102 @@ export function UpdateRewardSheet({
 		}
 	};

+	const handleUpdate = async () => {
+		if (!selectedReward || !isFormValid()) return;
+
+		// Stripe can't update coupons in place, so discount updates delete & recreate.
+		if (reward.rewardCategory === "discount") {
+			setConfirmCouponOpen(true);
+			return;
+		}
+
+		await performUpdate();
+	};
+
 	const handleCancel = () => {
 		setOpen(false);
 	};

 	return (
-		<Sheet open={open} onOpenChange={setOpen}>
-			<SheetContent className="flex flex-col overflow-hidden">
-				<SheetHeader
-					title="Update Reward"
-					description="Modify your discount or free plan reward"
-				/>
+		<>
+			<Sheet open={open} onOpenChange={setOpen}>
+				<SheetContent className="flex flex-col overflow-hidden">
+					<SheetHeader
+						title="Update Reward"
+						description="Modify your discount or free plan reward"
+					/>

-				<div className="flex-1 overflow-y-auto">
-					<RewardDetails reward={reward} setReward={setReward} />
-					<SelectRewardType reward={reward} setReward={setReward} />
+					<div className="flex-1 overflow-y-auto">
+						<RewardDetails reward={reward} setReward={setReward} />
+						<SelectRewardType reward={reward} setReward={setReward} />

-					{reward.rewardCategory === "discount" && (
-						<DiscountRewardConfig reward={reward} setReward={setReward} />
-					)}
+						{reward.rewardCategory === "discount" && (
+							<DiscountRewardConfig reward={reward} setReward={setReward} />
+						)}

-					{reward.rewardCategory === "free_product" && (
-						<FreeProductRewardConfig reward={reward} setReward={setReward} />
-					)}
+						{reward.rewardCategory === "free_product" && (
+							<FreeProductRewardConfig reward={reward} setReward={setReward} />
+						)}

-					{reward.rewardCategory === "feature_grant" && (
-						<FeatureGrantRewardConfig reward={reward} setReward={setReward} />
-					)}
-				</div>
+						{reward.rewardCategory === "feature_grant" && (
+							<FeatureGrantRewardConfig reward={reward} setReward={setReward} />
+						)}
+					</div>

-				<SheetFooter>
-					<ShortcutButton
-						variant="secondary"
-						className="w-full"
-						onClick={handleCancel}
-						singleShortcut="escape"
-					>
-						Cancel
-					</ShortcutButton>
-					<ShortcutButton
-						className="w-full"
-						onClick={handleUpdate}
-						metaShortcut="enter"
-						isLoading={loading}
-						disabled={!isFormValid()}
-					>
-						Update reward
-					</ShortcutButton>
-				</SheetFooter>
-			</SheetContent>
-		</Sheet>
+					<SheetFooter>
+						<ShortcutButton
+							variant="secondary"
+							className="w-full"
+							onClick={handleCancel}
+							singleShortcut="escape"
+						>
+							Cancel
+						</ShortcutButton>
+						<ShortcutButton
+							className="w-full"
+							onClick={handleUpdate}
+							metaShortcut="enter"
+							isLoading={loading}
+							disabled={!isFormValid()}
+						>
+							Update reward
+						</ShortcutButton>
+					</SheetFooter>
+				</SheetContent>
+			</Sheet>
+
+			<Dialog open={confirmCouponOpen} onOpenChange={setConfirmCouponOpen}>
+				<DialogContent className="max-w-md">
+					<DialogHeader>
+						<DialogTitle>Update coupon?</DialogTitle>
+						<DialogDescription>
+							Stripe doesn't have functionality to update coupons. This will
+							delete it and recreate it. Existing customers that have this
+							coupon will be unaffected.
+						</DialogDescription>
+					</DialogHeader>
+
+					<DialogFooter className="grid grid-cols-2 gap-2">
+						<ShortcutButton
+							variant="secondary"
+							className="w-full"
+							onClick={() => setConfirmCouponOpen(false)}
+							singleShortcut="escape"
+							disabled={loading}
+						>
+							Cancel
+						</ShortcutButton>
+						<ShortcutButton
+							className="w-full"
+							onClick={performUpdate}
+							metaShortcut="enter"
+							isLoading={loading}
+						>
+							Confirm
+						</ShortcutButton>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</>
 	);
 }
--- a/vite/src/views/products/rewards/reward-programs/RewardProgramConfig.tsx
+++ b/vite/src/views/products/rewards/reward-programs/RewardProgramConfig.tsx
@@ -5,25 +5,16 @@ import {
 	RewardReceivedBy,
 	RewardTriggerEvent,
 } from "@autumn/shared";
-import { Check, ChevronsUpDown, X } from "lucide-react";
-import { useId, useState } from "react";
+import { PackageIcon, XIcon } from "@phosphor-icons/react";
+import { useId } from "react";
 import FieldLabel from "@/components/general/modal-components/FieldLabel";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "@/components/ui/command";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Button } from "@/components/v2/buttons/Button";
 import { Checkbox } from "@/components/v2/checkboxes/Checkbox";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/v2/dropdowns/DropdownMenu";
 import { Input } from "@/components/v2/inputs/Input";
 import {
 	Select,
@@ -188,6 +179,8 @@ export const RewardProgramConfig = ({
 	);
 };

+const MAX_VISIBLE_CHIPS = 3;
+
 const ProductSelector = ({
 	rewardProgram,
 	setRewardProgram,
@@ -196,89 +189,89 @@ const ProductSelector = ({
 	setRewardProgram: (rewardProgram: RewardProgram) => void;
 }) => {
 	const { products } = useProductsQuery();
-	const [open, setOpen] = useState(false);

-	// Handle selection/deselection of a product
-	const handleProductToggle = (productId: string) => {
-		let newProductIds = [...(rewardProgram.product_ids || [])];
-		if (newProductIds.includes(productId)) {
-			newProductIds = newProductIds.filter((id) => id !== productId);
-		} else {
-			newProductIds = [...newProductIds, productId];
-		}
+	const productIds = rewardProgram.product_ids ?? [];
+
+	const toggleProduct = (productId: string) =>
 		setRewardProgram({
 			...rewardProgram,
-			product_ids: newProductIds,
+			product_ids: productIds.includes(productId)
+				? productIds.filter((id) => id !== productId)
+				: [...productIds, productId],
 		});
-	};

 	if (!products || products.length === 0) {
-		return <p className="text-sm text-tertiary-foreground">No products available</p>;
+		return (
+			<p className="text-sm text-tertiary-foreground">No products available</p>
+		);
 	}

-	const getProductText = (productId: string) => {
-		const product = products.find((p: ProductV2) => p.id === productId);
-		return product?.name || "Unknown Plan";
-	};
+	const getProductName = (productId: string) =>
+		products.find((p: ProductV2) => p.id === productId)?.name ?? "Unknown plan";

 	return (
-		<Popover modal open={open} onOpenChange={setOpen}>
-			<PopoverTrigger asChild>
-				<Button
-					variant="muted"
-					role="combobox"
-					aria-expanded={open}
-					className="w-full min-h-9 flex flex-wrap h-fit py-2 justify-start items-center gap-2 relative data-[state=open]:border-focus data-[state=open]:shadow-focus"
-				>
-					{rewardProgram.product_ids?.length === 0
-						? "Select Plans"
-						: rewardProgram.product_ids?.map((productId: string) => (
-								<div
+		<div className="min-w-0 w-full">
+			<DropdownMenu>
+				<DropdownMenuTrigger className="flex h-8 w-full min-w-0 cursor-pointer items-center gap-1.5 overflow-hidden rounded-xl px-3 input-base input-state-open-tiny text-sm">
+					{productIds.length === 0 ? (
+						<span className="text-tertiary-foreground">Select plans...</span>
+					) : (
+						<>
+							{productIds.slice(0, MAX_VISIBLE_CHIPS).map((productId) => (
+								<span
+									className="flex h-4.5 max-w-48 shrink-0 items-center gap-0.5 rounded border border-border bg-accent px-1 text-[10px] text-foreground"
 									key={productId}
-									className="py-0 px-3 text-xs text-tertiary-foreground border-zinc-300 bg-zinc-100 rounded-full w-fit flex items-center gap-2 h-fit"
 								>
-									<p className="text-muted-foreground">{getProductText(productId)}</p>
-									<Button
-										variant="skeleton"
-										size="sm"
+									<span className="shrink-0 [&_svg]:size-3">
+										<PackageIcon
+											className="text-tertiary-foreground"
+											size={12}
+											weight="duotone"
+										/>
+									</span>
+									<span className="truncate">{getProductName(productId)}</span>
+									<span
+										className="ml-0.5 cursor-pointer text-tertiary-foreground hover:text-destructive"
 										onClick={(e) => {
 											e.stopPropagation();
-											handleProductToggle(productId);
+											toggleProduct(productId);
 										}}
-										className="bg-transparent hover:bg-transparent p-0 w-5 h-5"
+										onPointerDown={(e) => e.stopPropagation()}
 									>
-										<X size={12} className="text-tertiary-foreground" />
-									</Button>
-								</div>
+										<XIcon size={10} />
+									</span>
+								</span>
 							))}
-					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 absolute right-2" />
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent className="w-[400px] p-0" align="start">
-				<Command>
-					<CommandInput placeholder="Search plans..." className="h-9" />
-					<CommandList className="max-h-[300px] overflow-y-auto">
-						<ScrollArea>
-							<CommandEmpty>No products found.</CommandEmpty>
-							<CommandGroup>
-								{products.map((product: ProductV2) => (
-									<CommandItem
-										key={product.id}
-										value={product.id}
-										onSelect={() => handleProductToggle(product.id)}
-										className="cursor-pointer"
-									>
-										<div className="flex items-center">{product.name}</div>
-										{rewardProgram.product_ids?.includes(product.id) && (
-											<Check size={12} className="text-tertiary-foreground" />
-										)}
-									</CommandItem>
-								))}
-							</CommandGroup>
-						</ScrollArea>
-					</CommandList>
-				</Command>
-			</PopoverContent>
-		</Popover>
+							{productIds.length > MAX_VISIBLE_CHIPS && (
+								<span className="shrink-0 px-1 text-sm text-tertiary-foreground">
+									+{productIds.length - MAX_VISIBLE_CHIPS}
+								</span>
+							)}
+						</>
+					)}
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" className="w-64">
+					<div className="max-h-72 overflow-y-auto">
+						{products.map((product: ProductV2) => (
+							<DropdownMenuItem
+								className="flex cursor-pointer items-center gap-2 font-medium"
+								closeOnClick={false}
+								key={product.id}
+								onClick={(e) => {
+									e.preventDefault();
+									toggleProduct(product.id);
+								}}
+							>
+								<Checkbox
+									checked={productIds.includes(product.id)}
+									className="border-border"
+								/>
+								<span className="truncate">{product.name}</span>
+							</DropdownMenuItem>
+						))}
+					</div>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
 	);
 };