style: refresh reward selectors and add coupon update confirmation
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Ayush Rodrigues
@@ -44,7 +44,12 @@
|
|||||||
"vite": {
|
"vite": {
|
||||||
"entry": ["tests/**/*.{ts,tsx}", "src/**/*.test.{ts,tsx}"],
|
"entry": ["tests/**/*.{ts,tsx}", "src/**/*.test.{ts,tsx}"],
|
||||||
"project": ["src/**/*.{ts,tsx}", "tests/**/*.{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": [
|
"ignoreDependencies": [
|
||||||
"tailwindcss",
|
"tailwindcss",
|
||||||
"tailwind-scrollbar-hide",
|
"tailwind-scrollbar-hide",
|
||||||
|
|||||||
@@ -253,7 +253,7 @@ export function FeatureGrantRewardConfig({
|
|||||||
<AnimatePresence initial={false}>
|
<AnimatePresence initial={false}>
|
||||||
{entitlements.map((ent, index) => (
|
{entitlements.map((ent, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={`${ent.feature_id || "new"}-${index}`}
|
key={index}
|
||||||
initial={{ opacity: 0, scaleY: 0.95, originY: 0 }}
|
initial={{ opacity: 0, scaleY: 0.95, originY: 0 }}
|
||||||
animate={{ opacity: 1, scaleY: 1 }}
|
animate={{ opacity: 1, scaleY: 1 }}
|
||||||
exit={{ opacity: 0, scaleY: 0.95 }}
|
exit={{ opacity: 0, scaleY: 0.95 }}
|
||||||
|
|||||||
@@ -1,8 +1,16 @@
|
|||||||
import type { ProductItem } from "@autumn/shared";
|
import type { ProductItem, ProductV2 } from "@autumn/shared";
|
||||||
import { Check, X } from "@phosphor-icons/react";
|
import { PackageIcon, XIcon } from "@phosphor-icons/react";
|
||||||
import { IconButton } from "@/components/v2/buttons/IconButton";
|
import { Checkbox } from "@/components/v2/checkboxes/Checkbox";
|
||||||
import { SelectGroup, SelectLabel } from "@/components/v2/selects/Select";
|
import {
|
||||||
import { TagSelect } from "@/components/v2/selects/TagSelect";
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/v2/dropdowns/DropdownMenu";
|
||||||
import { useOrg } from "@/hooks/common/useOrg";
|
import { useOrg } from "@/hooks/common/useOrg";
|
||||||
import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
|
import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
|
||||||
import { useProductsByPriceIdsQuery } from "@/hooks/queries/useProductsByPriceIdsQuery";
|
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 { formatProductItemText } from "@/utils/product/product-item/formatProductItem";
|
||||||
import type { FrontendReward } from "../../types/frontendReward";
|
import type { FrontendReward } from "../../types/frontendReward";
|
||||||
|
|
||||||
|
const MAX_VISIBLE_CHIPS = 3;
|
||||||
|
|
||||||
interface ProductPriceSelectorProps {
|
interface ProductPriceSelectorProps {
|
||||||
reward: FrontendReward;
|
reward: FrontendReward;
|
||||||
setReward: (reward: FrontendReward) => void;
|
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({
|
export function ProductPriceSelector({
|
||||||
reward,
|
reward,
|
||||||
setReward,
|
setReward,
|
||||||
@@ -25,175 +41,268 @@ export function ProductPriceSelector({
|
|||||||
const { features } = useFeaturesQuery();
|
const { features } = useFeaturesQuery();
|
||||||
|
|
||||||
const config = reward.discount_config!;
|
const config = reward.discount_config!;
|
||||||
|
const priceIds = config.price_ids ?? [];
|
||||||
|
const applyToAll = config.apply_to_all ?? false;
|
||||||
|
|
||||||
const linkedPriceIds = config.price_ids ?? [];
|
// Selected price IDs may belong to historical versions absent from the
|
||||||
const { products: linkedProductVersions } =
|
// latest-versions list; resolve their owning product for chip labels.
|
||||||
useProductsByPriceIdsQuery(linkedPriceIds);
|
const { products: linkedProductVersions, isLoading: linkedVersionsLoading } =
|
||||||
|
useProductsByPriceIdsQuery(priceIds);
|
||||||
|
|
||||||
const setConfig = (key: string, value: any) => {
|
const setPriceIds = (nextPriceIds: string[]) =>
|
||||||
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
|
|
||||||
setReward({
|
setReward({
|
||||||
...reward,
|
...reward,
|
||||||
discount_config: {
|
discount_config: {
|
||||||
...config,
|
...config,
|
||||||
apply_to_all: false,
|
apply_to_all: false,
|
||||||
price_ids: newPriceIds,
|
price_ids: nextPriceIds,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
const handleApplyToAllToggle = () => {
|
const toggleApplyToAll = () =>
|
||||||
const newApplyToAll = !config.apply_to_all;
|
setReward({
|
||||||
|
...reward,
|
||||||
|
discount_config: {
|
||||||
|
...config,
|
||||||
|
apply_to_all: !applyToAll,
|
||||||
|
price_ids: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
if (newApplyToAll) {
|
const togglePrice = (priceId: string) =>
|
||||||
// Enabling "Apply to all" clears price_ids
|
setPriceIds(
|
||||||
setReward({
|
priceIds.includes(priceId)
|
||||||
...reward,
|
? priceIds.filter((id) => id !== priceId)
|
||||||
discount_config: {
|
: [...priceIds, priceId],
|
||||||
...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 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 });
|
const priceText = formatProductItemText({ item, org, features });
|
||||||
return `${product.name} v${product.version} — ${priceText}`;
|
return `${product.name} v${product.version} — ${priceText}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Get products with non-feature items
|
type Chip = { key: string; label: string; onRemove?: () => void };
|
||||||
const availableProducts = products.filter((product: any) => {
|
|
||||||
const nonFeatureItems = product.items?.filter(
|
|
||||||
(item: ProductItem) => !isFeatureItem(item),
|
|
||||||
);
|
|
||||||
return nonFeatureItems && nonFeatureItems.length > 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!products || products.length === 0) {
|
// Collapse a product's prices into a single product chip when all are selected.
|
||||||
return <p className="text-sm text-tertiary-foreground">No products available</p>;
|
const buildChips = (): Chip[] => {
|
||||||
}
|
if (applyToAll) return [{ key: "__all__", label: "All products" }];
|
||||||
|
|
||||||
// Build options list - not used for display, just for reference
|
const chips: Chip[] = [];
|
||||||
const priceOptions = availableProducts.flatMap((product: any) => {
|
const seenProducts = new Set<string>();
|
||||||
const nonFeatureItems = product.items.filter(
|
for (const priceId of priceIds) {
|
||||||
(item: ProductItem) => !isFeatureItem(item),
|
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,
|
const chips = buildChips();
|
||||||
label: formatProductItemText({ item, org, features }),
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TagSelect
|
<div className="min-w-0 w-full">
|
||||||
value={config.price_ids || []}
|
<DropdownMenu>
|
||||||
onChange={(values) => setConfig("price_ids", values)}
|
<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">
|
||||||
options={priceOptions}
|
{chips.length === 0 ? (
|
||||||
placeholder="Select plans or apply to all"
|
<span className="text-tertiary-foreground">
|
||||||
formatTag={formatPriceTag}
|
Select plans or apply to all...
|
||||||
showAllProducts={config.apply_to_all}
|
</span>
|
||||||
renderContent={(setOpen) => (
|
) : (
|
||||||
<>
|
<>
|
||||||
{/* Apply to all option */}
|
{chips.slice(0, MAX_VISIBLE_CHIPS).map((chip) => (
|
||||||
<SelectGroup>
|
<span
|
||||||
<div
|
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"
|
||||||
role="button"
|
key={chip.key}
|
||||||
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"
|
<span className="shrink-0 [&_svg]:size-3">
|
||||||
onClick={() => {
|
<PackageIcon
|
||||||
handleApplyToAllToggle();
|
className="text-tertiary-foreground"
|
||||||
setOpen(false);
|
size={12}
|
||||||
}}
|
weight="duotone"
|
||||||
onKeyDown={(e) => {
|
/>
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
</span>
|
||||||
e.preventDefault();
|
<span className="truncate">{chip.label}</span>
|
||||||
handleApplyToAllToggle();
|
{chip.onRemove && (
|
||||||
setOpen(false);
|
<span
|
||||||
}
|
className="ml-0.5 cursor-pointer text-tertiary-foreground hover:text-destructive"
|
||||||
}}
|
onClick={(e) => {
|
||||||
>
|
e.stopPropagation();
|
||||||
<div className="flex items-center justify-between w-full">
|
chip.onRemove?.();
|
||||||
<span>Apply to all products</span>
|
}}
|
||||||
{config.apply_to_all && (
|
onPointerDown={(e) => e.stopPropagation()}
|
||||||
<Check size={14} className="text-primary ml-2" />
|
>
|
||||||
)}
|
<XIcon size={10} />
|
||||||
</div>
|
</span>
|
||||||
</div>
|
)}
|
||||||
</SelectGroup>
|
</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 */}
|
if (priceItems.length === 1) {
|
||||||
{availableProducts.map((product: any) => {
|
const priceId = priceItems[0].price_id;
|
||||||
const nonFeatureItems = product.items.filter(
|
return (
|
||||||
(item: ProductItem) => !isFeatureItem(item),
|
<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 (
|
const ids = priceItems.map((item) => item.price_id);
|
||||||
<SelectGroup key={product.id}>
|
const selectedCount = ids.filter((id) =>
|
||||||
<SelectLabel>{product.name}</SelectLabel>
|
priceIds.includes(id),
|
||||||
{nonFeatureItems.map((item: any) => {
|
).length;
|
||||||
const isSelected = config.price_ids?.includes(item.price_id);
|
const allSelected = !applyToAll && selectedCount === ids.length;
|
||||||
return (
|
const someSelected = !applyToAll && selectedCount > 0;
|
||||||
<div
|
|
||||||
key={item.price_id}
|
return (
|
||||||
role="button"
|
<DropdownMenuSub key={product.id}>
|
||||||
tabIndex={0}
|
<DropdownMenuSubTrigger
|
||||||
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"
|
className="flex cursor-pointer items-center gap-2 font-medium"
|
||||||
onClick={() => handlePriceToggle(item.price_id)}
|
onClick={(e) => {
|
||||||
onKeyDown={(e) => {
|
e.preventDefault();
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
toggleProduct(product);
|
||||||
e.preventDefault();
|
}}
|
||||||
handlePriceToggle(item.price_id);
|
>
|
||||||
}
|
<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">
|
<span className="truncate">
|
||||||
{formatProductItemText({
|
{formatProductItemText({ item, org, features })}
|
||||||
item,
|
|
||||||
org,
|
|
||||||
features,
|
|
||||||
})}
|
|
||||||
</span>
|
</span>
|
||||||
{isSelected && (
|
</DropdownMenuItem>
|
||||||
<Check size={14} className="text-primary ml-2" />
|
))}
|
||||||
)}
|
</DropdownMenuSubContent>
|
||||||
</div>
|
</DropdownMenuSub>
|
||||||
</div>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
</div>
|
||||||
</SelectGroup>
|
</DropdownMenuContent>
|
||||||
);
|
</DropdownMenu>
|
||||||
})}
|
</div>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,14 @@ import type { AxiosError } from "axios";
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { ShortcutButton } from "@/components/v2/buttons/ShortcutButton";
|
import { ShortcutButton } from "@/components/v2/buttons/ShortcutButton";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/v2/dialogs/Dialog";
|
||||||
import {
|
import {
|
||||||
SheetFooter,
|
SheetFooter,
|
||||||
SheetHeader,
|
SheetHeader,
|
||||||
@@ -40,6 +48,7 @@ export function UpdateRewardSheet({
|
|||||||
const { features } = useFeaturesQuery();
|
const { features } = useFeaturesQuery();
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [confirmCouponOpen, setConfirmCouponOpen] = useState(false);
|
||||||
|
|
||||||
const reward = useRewardStore((s) => s.reward);
|
const reward = useRewardStore((s) => s.reward);
|
||||||
const setReward = useRewardStore((s) => s.setReward);
|
const setReward = useRewardStore((s) => s.setReward);
|
||||||
@@ -102,8 +111,8 @@ export function UpdateRewardSheet({
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleUpdate = async () => {
|
const performUpdate = async () => {
|
||||||
if (!selectedReward || !isFormValid()) return;
|
if (!selectedReward) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
@@ -120,6 +129,7 @@ export function UpdateRewardSheet({
|
|||||||
|
|
||||||
await refetch();
|
await refetch();
|
||||||
toast.success("Reward updated successfully");
|
toast.success("Reward updated successfully");
|
||||||
|
setConfirmCouponOpen(false);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
toast.error(
|
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 = () => {
|
const handleCancel = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sheet open={open} onOpenChange={setOpen}>
|
<>
|
||||||
<SheetContent className="flex flex-col overflow-hidden">
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
<SheetHeader
|
<SheetContent className="flex flex-col overflow-hidden">
|
||||||
title="Update Reward"
|
<SheetHeader
|
||||||
description="Modify your discount or free plan reward"
|
title="Update Reward"
|
||||||
/>
|
description="Modify your discount or free plan reward"
|
||||||
|
/>
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto">
|
<div className="flex-1 overflow-y-auto">
|
||||||
<RewardDetails reward={reward} setReward={setReward} />
|
<RewardDetails reward={reward} setReward={setReward} />
|
||||||
<SelectRewardType reward={reward} setReward={setReward} />
|
<SelectRewardType reward={reward} setReward={setReward} />
|
||||||
|
|
||||||
{reward.rewardCategory === "discount" && (
|
{reward.rewardCategory === "discount" && (
|
||||||
<DiscountRewardConfig reward={reward} setReward={setReward} />
|
<DiscountRewardConfig reward={reward} setReward={setReward} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{reward.rewardCategory === "free_product" && (
|
{reward.rewardCategory === "free_product" && (
|
||||||
<FreeProductRewardConfig reward={reward} setReward={setReward} />
|
<FreeProductRewardConfig reward={reward} setReward={setReward} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{reward.rewardCategory === "feature_grant" && (
|
{reward.rewardCategory === "feature_grant" && (
|
||||||
<FeatureGrantRewardConfig reward={reward} setReward={setReward} />
|
<FeatureGrantRewardConfig reward={reward} setReward={setReward} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SheetFooter>
|
<SheetFooter>
|
||||||
<ShortcutButton
|
<ShortcutButton
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
className="w-full"
|
className="w-full"
|
||||||
onClick={handleCancel}
|
onClick={handleCancel}
|
||||||
singleShortcut="escape"
|
singleShortcut="escape"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</ShortcutButton>
|
</ShortcutButton>
|
||||||
<ShortcutButton
|
<ShortcutButton
|
||||||
className="w-full"
|
className="w-full"
|
||||||
onClick={handleUpdate}
|
onClick={handleUpdate}
|
||||||
metaShortcut="enter"
|
metaShortcut="enter"
|
||||||
isLoading={loading}
|
isLoading={loading}
|
||||||
disabled={!isFormValid()}
|
disabled={!isFormValid()}
|
||||||
>
|
>
|
||||||
Update reward
|
Update reward
|
||||||
</ShortcutButton>
|
</ShortcutButton>
|
||||||
</SheetFooter>
|
</SheetFooter>
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,25 +5,16 @@ import {
|
|||||||
RewardReceivedBy,
|
RewardReceivedBy,
|
||||||
RewardTriggerEvent,
|
RewardTriggerEvent,
|
||||||
} from "@autumn/shared";
|
} from "@autumn/shared";
|
||||||
import { Check, ChevronsUpDown, X } from "lucide-react";
|
import { PackageIcon, XIcon } from "@phosphor-icons/react";
|
||||||
import { useId, useState } from "react";
|
import { useId } from "react";
|
||||||
import FieldLabel from "@/components/general/modal-components/FieldLabel";
|
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 { Checkbox } from "@/components/v2/checkboxes/Checkbox";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/v2/dropdowns/DropdownMenu";
|
||||||
import { Input } from "@/components/v2/inputs/Input";
|
import { Input } from "@/components/v2/inputs/Input";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
@@ -188,6 +179,8 @@ export const RewardProgramConfig = ({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const MAX_VISIBLE_CHIPS = 3;
|
||||||
|
|
||||||
const ProductSelector = ({
|
const ProductSelector = ({
|
||||||
rewardProgram,
|
rewardProgram,
|
||||||
setRewardProgram,
|
setRewardProgram,
|
||||||
@@ -196,89 +189,89 @@ const ProductSelector = ({
|
|||||||
setRewardProgram: (rewardProgram: RewardProgram) => void;
|
setRewardProgram: (rewardProgram: RewardProgram) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const { products } = useProductsQuery();
|
const { products } = useProductsQuery();
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
|
|
||||||
// Handle selection/deselection of a product
|
const productIds = rewardProgram.product_ids ?? [];
|
||||||
const handleProductToggle = (productId: string) => {
|
|
||||||
let newProductIds = [...(rewardProgram.product_ids || [])];
|
const toggleProduct = (productId: string) =>
|
||||||
if (newProductIds.includes(productId)) {
|
|
||||||
newProductIds = newProductIds.filter((id) => id !== productId);
|
|
||||||
} else {
|
|
||||||
newProductIds = [...newProductIds, productId];
|
|
||||||
}
|
|
||||||
setRewardProgram({
|
setRewardProgram({
|
||||||
...rewardProgram,
|
...rewardProgram,
|
||||||
product_ids: newProductIds,
|
product_ids: productIds.includes(productId)
|
||||||
|
? productIds.filter((id) => id !== productId)
|
||||||
|
: [...productIds, productId],
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
if (!products || products.length === 0) {
|
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 getProductName = (productId: string) =>
|
||||||
const product = products.find((p: ProductV2) => p.id === productId);
|
products.find((p: ProductV2) => p.id === productId)?.name ?? "Unknown plan";
|
||||||
return product?.name || "Unknown Plan";
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover modal open={open} onOpenChange={setOpen}>
|
<div className="min-w-0 w-full">
|
||||||
<PopoverTrigger asChild>
|
<DropdownMenu>
|
||||||
<Button
|
<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">
|
||||||
variant="muted"
|
{productIds.length === 0 ? (
|
||||||
role="combobox"
|
<span className="text-tertiary-foreground">Select plans...</span>
|
||||||
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"
|
<>
|
||||||
>
|
{productIds.slice(0, MAX_VISIBLE_CHIPS).map((productId) => (
|
||||||
{rewardProgram.product_ids?.length === 0
|
<span
|
||||||
? "Select Plans"
|
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"
|
||||||
: rewardProgram.product_ids?.map((productId: string) => (
|
|
||||||
<div
|
|
||||||
key={productId}
|
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>
|
<span className="shrink-0 [&_svg]:size-3">
|
||||||
<Button
|
<PackageIcon
|
||||||
variant="skeleton"
|
className="text-tertiary-foreground"
|
||||||
size="sm"
|
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) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
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" />
|
<XIcon size={10} />
|
||||||
</Button>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
))}
|
))}
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 absolute right-2" />
|
{productIds.length > MAX_VISIBLE_CHIPS && (
|
||||||
</Button>
|
<span className="shrink-0 px-1 text-sm text-tertiary-foreground">
|
||||||
</PopoverTrigger>
|
+{productIds.length - MAX_VISIBLE_CHIPS}
|
||||||
<PopoverContent className="w-[400px] p-0" align="start">
|
</span>
|
||||||
<Command>
|
)}
|
||||||
<CommandInput placeholder="Search plans..." className="h-9" />
|
</>
|
||||||
<CommandList className="max-h-[300px] overflow-y-auto">
|
)}
|
||||||
<ScrollArea>
|
</DropdownMenuTrigger>
|
||||||
<CommandEmpty>No products found.</CommandEmpty>
|
<DropdownMenuContent align="start" className="w-64">
|
||||||
<CommandGroup>
|
<div className="max-h-72 overflow-y-auto">
|
||||||
{products.map((product: ProductV2) => (
|
{products.map((product: ProductV2) => (
|
||||||
<CommandItem
|
<DropdownMenuItem
|
||||||
key={product.id}
|
className="flex cursor-pointer items-center gap-2 font-medium"
|
||||||
value={product.id}
|
closeOnClick={false}
|
||||||
onSelect={() => handleProductToggle(product.id)}
|
key={product.id}
|
||||||
className="cursor-pointer"
|
onClick={(e) => {
|
||||||
>
|
e.preventDefault();
|
||||||
<div className="flex items-center">{product.name}</div>
|
toggleProduct(product.id);
|
||||||
{rewardProgram.product_ids?.includes(product.id) && (
|
}}
|
||||||
<Check size={12} className="text-tertiary-foreground" />
|
>
|
||||||
)}
|
<Checkbox
|
||||||
</CommandItem>
|
checked={productIds.includes(product.id)}
|
||||||
))}
|
className="border-border"
|
||||||
</CommandGroup>
|
/>
|
||||||
</ScrollArea>
|
<span className="truncate">{product.name}</span>
|
||||||
</CommandList>
|
</DropdownMenuItem>
|
||||||
</Command>
|
))}
|
||||||
</PopoverContent>
|
</div>
|
||||||
</Popover>
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user