comi-logic/cfw-autumn
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into dev

Browse Source
This commit is contained in:
John Yeo
2026-06-15 10:25:07 +01:00
committed by GitHub
parent 12a21efd1e f1d2821434
commit 06c6cd2c59
9 changed files with 565 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
knip.json
View File

@@ -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",

20
packages/auth/src/oauth/leafOAuth.ts
View File

@@ -1,15 +1,27 @@
import { LEAF_OAUTH_SCOPES } from "@autumn/shared/leafOAuthScopes";
import type { ScopeString } from "@autumn/shared/scopeDefinitions";
import {
LEGACY_SCOPE_ALIASES,
OPENID_SCOPES,
} from "@autumn/shared/scopeDefinitions";
const leafScopeSet = new Set<string>(LEAF_OAUTH_SCOPES);
const oauthPassthroughScopeSet = new Set<string>(["offline_access"]);
const oauthProtocolScopeSet = new Set<string>(OPENID_SCOPES);
export const getDefaultOAuthScopes = (requestedScopes?: string[] | null) => {
const requested =
requestedScopes && requestedScopes.length > 0
? requestedScopes
: [...LEAF_OAUTH_SCOPES];
: [...LEAF_OAUTH_SCOPES, ...oauthPassthroughScopeSet];
return [...new Set(requested)].filter((scope): scope is ScopeString =>
leafScopeSet.has(scope),
// Issued scopes must echo the client's request verbatim (better-auth
// rejects rewrites), so legacy CRUDL aliases are used for filtering only.
return [...new Set(requested)].filter(
(scope) =>
leafScopeSet.has(LEGACY_SCOPE_ALIASES[scope] ?? scope) ||
oauthPassthroughScopeSet.has(scope),
);
};
export const getOAuthResourceScopes = <T extends string>(scopes: readonly T[]) =>
scopes.filter((scope) => !oauthProtocolScopeSet.has(scope));

12
server/src/internal/auth/oauth/handleOAuthTokenWithApiKey.ts
View File

@@ -1,5 +1,6 @@
import { prefixOAuthToken } from "@autumn/auth";
import {
getOAuthResourceScopes,
getResourceFromOAuthTokenRequest,
returnsOAuthAccessTokenForClientId,
} from "@autumn/auth/oauth";
@@ -123,7 +124,10 @@ export const handleOAuthTokenWithApiKey = async (c: Context) => {
const accessToken = getString(tokenPayload.access_token);
if (!accessToken) return response;
const requestedScopes = scopesFromOAuthScopeString(tokenPayload.scope);
const parsedRequestedScopes = scopesFromOAuthScopeString(tokenPayload.scope);
const requestedScopes = parsedRequestedScopes
? getOAuthResourceScopes(parsedRequestedScopes)
: null;
let apiKeyResult: Awaited<ReturnType<typeof getExternalOAuthApiKeyForToken>>;
try {
const tokenRecord = await getOAuthAccessTokenRecord({
@@ -142,15 +146,15 @@ export const handleOAuthTokenWithApiKey = async (c: Context) => {
const issuedScopes = await getOAuthConsentScopeGrant({
db,
organizationId: tokenRecord.referenceId,
requestedScopes: tokenRecord.scopes,
requestedScopes: parsedRequestedScopes ?? tokenRecord.scopes,
userId: tokenRecord.userId,
});
tokenRecord.scopes = issuedScopes;
tokenRecord.scopes = getOAuthResourceScopes(issuedScopes);
if (tokenRecord.id) {
await oauthAccessTokenRepo.updateScopes({
db,
id: tokenRecord.id,
scopes: issuedScopes,
scopes: tokenRecord.scopes,
});
}
if (tokenRecord.refreshId) {

26
server/src/internal/auth/oauth/oauthConsentScopes.ts
View File

@@ -1,4 +1,7 @@
import { getDefaultOAuthScopes } from "@autumn/auth/oauth";
import {
getDefaultOAuthScopes,
getOAuthResourceScopes,
} from "@autumn/auth/oauth";
import { ErrCode, isScopeSubset, RecaseError } from "@autumn/shared";
import type { DrizzleCli } from "@/db/initDrizzle.js";
import { getScopesForUserInOrg } from "@/utils/authUtils/customSessionScopes.js";
@@ -21,14 +24,21 @@ export const getOAuthConsentScopeGrant = async ({
organizationId,
});
const grant = finalRequestedScopes.filter((scope) =>
const resourceScopes = getOAuthResourceScopes(finalRequestedScopes);
const resourceGrant = resourceScopes.filter((scope) =>
isScopeSubset([scope], userScopes),
);
if (grant.length > 0) return grant;
if (resourceGrant.length === 0) {
throw new RecaseError({
message: "No requested scopes can be granted to this OAuth client",
code: ErrCode.InsufficientScopes,
statusCode: 403,
});
}
throw new RecaseError({
message: "No requested scopes can be granted to this OAuth client",
code: ErrCode.InsufficientScopes,
statusCode: 403,
});
const grantedResourceScopes = new Set(resourceGrant);
return finalRequestedScopes.filter(
(scope) =>
!resourceScopes.includes(scope) || grantedResourceScopes.has(scope),
);
};

18
server/src/internal/dev/cli/handlers/handleCreateOAuthApiKeys.ts
View File

@@ -1,4 +1,10 @@
import { AppEnv, ErrCode, RecaseError, Scopes } from "@autumn/shared";
import {
AppEnv,
ErrCode,
LEGACY_SCOPE_ALIASES,
RecaseError,
Scopes,
} from "@autumn/shared";
import { createRoute } from "@/honoMiddlewares/routeHandler.js";
import { isMcpOAuthClientId } from "@/internal/auth/oauth/mcpOAuthScopes.js";
import {
@@ -84,7 +90,15 @@ export const handleCreateOAuthApiKeys = createRoute({
statusCode: 401,
});
}
const apiKeyScopes = requestedScopes ?? tokenRecord.scopes;
// Tokens may carry legacy CRUDL scopes (old CLI); store modern R/W on keys.
const apiKeyScopes = [
...new Set(
(requestedScopes ?? tokenRecord.scopes).map(
(scope) => LEGACY_SCOPE_ALIASES[scope] ?? scope,
),
),
];
if (await isMcpOAuthClientId({ clientId, ctx })) {
throw new RecaseError({
message: "MCP OAuth clients must use OAuth access tokens directly",

81
server/tests/unit/auth/registerMcpOAuthClient.test.ts
View File

@@ -1,46 +1,105 @@
import { describe, expect, test } from "bun:test";
import { getDefaultOAuthScopes } from "@autumn/auth/oauth";
import {
getDefaultOAuthScopes,
getOAuthResourceScopes,
} from "@autumn/auth/oauth";
import { LEAF_OAUTH_SCOPES } from "@autumn/shared";
import { Scopes } from "@autumn/shared/scopeDefinitions";
import { getRequestedScopesForMcpClient } from "@/internal/auth/actions/registerMcpOAuthClient.js";
const OFFLINE_ACCESS_SCOPE = "offline_access";
const DEFAULT_MCP_SCOPES = [...LEAF_OAUTH_SCOPES, OFFLINE_ACCESS_SCOPE];
describe("getRequestedScopesForMcpClient", () => {
test("defaults Slack MCP clients to Leaf OAuth scopes", () => {
test("defaults Slack MCP clients to Leaf scopes plus offline access", () => {
expect(
getRequestedScopesForMcpClient({ clientType: "slack", scope: undefined }),
).toEqual([...LEAF_OAUTH_SCOPES]);
).toEqual(DEFAULT_MCP_SCOPES);
});
test("defaults Codex MCP clients to Leaf OAuth scopes", () => {
test("defaults Codex MCP clients to Leaf scopes plus offline access", () => {
expect(
getRequestedScopesForMcpClient({ clientType: "codex", scope: undefined }),
).toEqual([...LEAF_OAUTH_SCOPES]);
).toEqual(DEFAULT_MCP_SCOPES);
});
test("defaults dynamic MCP clients to Leaf OAuth scopes", () => {
test("defaults dynamic MCP clients to Leaf scopes plus offline access", () => {
expect(
getRequestedScopesForMcpClient({
clientType: "dynamic",
scope: undefined,
}),
).toEqual([...LEAF_OAUTH_SCOPES]);
).toEqual(DEFAULT_MCP_SCOPES);
});
test("caps explicit requested scopes to Leaf scopes", () => {
test("caps explicit requested scopes to Leaf scopes plus offline access", () => {
expect(
getRequestedScopesForMcpClient({
clientType: "slack",
scope: `${Scopes.Customers.Read} ${Scopes.Plans.Write} ${Scopes.ApiKeys.Write} invalid`,
scope: `${Scopes.Customers.Read} ${Scopes.Plans.Write} ${Scopes.ApiKeys.Write} ${OFFLINE_ACCESS_SCOPE} invalid`,
}),
).toEqual([Scopes.Customers.Read, Scopes.Plans.Write]);
).toEqual([
Scopes.Customers.Read,
Scopes.Plans.Write,
OFFLINE_ACCESS_SCOPE,
]);
});
test("caps OAuth grants to Leaf scopes", () => {
test("preserves offline access in default OAuth scopes", () => {
expect(getDefaultOAuthScopes()).toEqual(DEFAULT_MCP_SCOPES);
});
test("caps OAuth grants to Leaf scopes plus offline access", () => {
expect(
getDefaultOAuthScopes([
Scopes.Customers.Read,
Scopes.ApiKeys.Write,
Scopes.Analytics.Read,
OFFLINE_ACCESS_SCOPE,
]),
).toEqual([
Scopes.Customers.Read,
Scopes.Analytics.Read,
OFFLINE_ACCESS_SCOPE,
]);
});
test("keeps legacy CRUDL scopes (old CLI) whose alias is leaf-allowed, verbatim", () => {
expect(
getDefaultOAuthScopes([
"customers:create",
"customers:read",
"customers:list",
"customers:update",
"customers:delete",
"features:create",
"features:read",
"plans:update",
"apiKeys:create",
"organisation:read",
]),
).toEqual([
"customers:create",
"customers:read",
"customers:list",
"customers:update",
"customers:delete",
"features:create",
"features:read",
"plans:update",
"organisation:read",
]);
});
test("strips OAuth protocol scopes from resource scopes", () => {
expect(
getOAuthResourceScopes([
Scopes.Customers.Read,
OFFLINE_ACCESS_SCOPE,
"openid",
"profile",
"email",
Scopes.Analytics.Read,
]),
).toEqual([Scopes.Customers.Read, Scopes.Analytics.Read]);
});

401
vite/src/views/products/rewards/reward-config/components/ProductPriceSelector.tsx
View File

@@ -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>
);
}

141
vite/src/views/products/rewards/reward-config/components/UpdateRewardSheet.tsx
View File

@@ -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);
@@ -106,8 +115,8 @@ export function UpdateRewardSheet({
return true;
};
const handleUpdate = async () => {
if (!selectedReward || !isFormValid()) return;
const performUpdate = async () => {
if (!selectedReward) return;
setLoading(true);
try {
@@ -124,6 +133,7 @@ export function UpdateRewardSheet({
await refetch();
toast.success("Reward updated successfully");
setConfirmCouponOpen(false);
setOpen(false);
} catch (error: unknown) {
toast.error(
@@ -134,55 +144,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>
</>
);
}

161
vite/src/views/products/rewards/reward-programs/RewardProgramConfig.tsx
View File

@@ -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>
);
};