@rahul_vendure/vendure-plugin-channel-product-availability 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.1.0
+
+### Changed
+
+- Redesigned the Dashboard "Channel availability" block:
+  - each channel has a **Global / On / Off** segmented control; Global shows what it currently resolves to
+  - an "Available in X of Y channels" summary and a global-status pill
+  - callouts when the product is globally disabled but still sold somewhere, or globally enabled but hidden somewhere
+  - changes apply instantly and roll back if the server rejects them; toasts name the product and channel
+  - readable channel names ("Default channel"), a "Current" marker, and view-only rows (with a lock icon) for channels where the admin lacks update permission
+  - skeleton loading and styled permission/error states; refreshes when the product's own Enabled switch is saved
+
+### Fixed
+
+- Dashboard on Vendure 3.8: the "Unavailable" badge used `variant="secondary"`, which no longer exists in `@vendure-io/ui` 2.x and rendered unstyled. The block now uses only primitives shared by `@vendure-io/ui` 1.x and 2.x.
+
 ## 1.0.0
 
 Initial release.

package/README.md

@@ -57,15 +57,14 @@ Indexes: `UNIQUE (productId, channelId)` and `(channelId, enabled)`.
 
 ### Dashboard
 
-The React Dashboard extension is discovered automatically through the plugin's `dashboard` metadata. It adds a **Channel availability** block to the product detail page. For each channel the product is assigned to, the block shows:
+The React Dashboard extension is discovered automatically through the plugin's `dashboard` metadata. It adds a **Channel availability** block to the product detail page:
 
-- whether the product is available there
-- whether that comes from the global flag or from an override
-- buttons to enable, disable, or go back to the global flag (**Use global**)
+- a **Global / On / Off** control per channel. *Global* follows the product's own Enabled switch; *On* and *Off* override it for that channel only.
+- an "Available in X of Y channels" summary and a callout when the global switch and a channel disagree (e.g. "Disabled globally, but still sold in UK")
+- changes apply instantly and roll back if the server rejects them
+- channels where the admin has read but not update permission are shown as **view only**; channels the admin can't read at all are not listed
 
-The block also warns when a product is disabled globally but explicitly enabled somewhere. Channels where the admin can't update show as read-only.
-
-The backend works without the Dashboard.
+Rendered and click-tested in light and dark themes on Vendure 3.6 (`@vendure-io/ui` 1.x). It uses only components whose API is identical in `@vendure-io/ui` 2.x (Vendure 3.8), but it has not been rendered on 3.8 yet. The backend works without the Dashboard.
 
 ## Options
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rahul_vendure/vendure-plugin-channel-product-availability",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Per-channel product enable/disable overrides for Vendure, enforced across catalog, search, cart and checkout",
   "exports": {
     "./package.json": "./package.json",

package/src/dashboard/channel-availability-block.tsx

@@ -1,5 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { api, Badge, Button, useAuth } from '@vendure/dashboard';
+import { api, ChannelCodeLabel, Skeleton, useAuth, useChannel } from '@vendure/dashboard';
+import { AlertTriangle, Eye, EyeOff, Globe, Info, Loader2, Lock } from 'lucide-react';
+import type { ReactNode } from 'react';
 import { toast } from 'sonner';
 
 import {
@@ -8,163 +10,347 @@ import {
     setProductChannelAvailabilityMutation,
 } from './channel-availability.graphql';
 
+// Only primitives whose API is identical in @vendure-io/ui 1.x (Vendure <=3.7) and
+// 2.x (3.8+) are used; status pills and the segmented control are plain elements.
+
 const UPDATE_PERMISSIONS = ['UpdateCatalog', 'UpdateProduct'];
 
+type OverrideState = 'INHERITED' | 'ENABLED' | 'DISABLED';
+
 type Row = {
     channelId: string;
     channelCode: string;
     globalEnabled: boolean;
     override: boolean | null;
-    overrideState: 'INHERITED' | 'ENABLED' | 'DISABLED';
+    overrideState: OverrideState;
     effectiveEnabled: boolean;
 };
 
+type Change = { channelId: string; channelCode: string; next: OverrideState };
+
+function cx(...classes: Array<string | false | null | undefined>) {
+    return classes.filter(Boolean).join(' ');
+}
+
 function isForbidden(error: unknown) {
     const message = error instanceof Error ? error.message : String(error);
     return /not currently authorized|FORBIDDEN/i.test(message);
 }
 
+function applyChange(row: Row, next: OverrideState): Row {
+    const override = next === 'INHERITED' ? null : next === 'ENABLED';
+    return {
+        ...row,
+        override,
+        overrideState: next,
+        effectiveEnabled: override ?? row.globalEnabled,
+    };
+}
+
 /**
- * Per-channel availability of the product shown on the product detail page.
- * Each action only changes the override for that one channel; the product's
+ * Per-channel availability of the product on the product detail page.
+ *
+ * Each control only changes the override for that one channel; the product's
  * global "Enabled" switch is never modified here.
  */
-export function ChannelAvailabilityBlock({ productId }: { productId: string }) {
+export function ChannelAvailabilityBlock({
+    productId,
+    productName,
+    globalEnabledHint,
+}: {
+    productId: string;
+    productName?: string;
+    /** The product's saved `enabled` value; refetches when it changes. */
+    globalEnabledHint?: boolean;
+}) {
     const queryClient = useQueryClient();
     const { channels } = useAuth();
-    const queryKey = ['productChannelAvailabilities', productId];
+    const { activeChannel } = useChannel();
+    const queryKey = ['productChannelAvailabilities', productId, globalEnabledHint];
 
     const { data, isLoading, error } = useQuery({
         queryKey,
         queryFn: () => api.query(productChannelAvailabilitiesQuery, { productId }),
     });
 
-    const onSuccess = () => queryClient.invalidateQueries({ queryKey });
-    const onError = (err: unknown) =>
-        toast.error('Could not update channel availability', {
-            description: err instanceof Error ? err.message : 'Unknown error',
-        });
-
-    const setOverride = useMutation({
-        mutationFn: (input: { channelId: string; enabled: boolean }) =>
-            api.mutate(setProductChannelAvailabilityMutation, { input: { productId, ...input } }),
-        onSuccess,
-        onError,
-    });
-    const clearOverride = useMutation({
-        mutationFn: (input: { channelId: string }) =>
-            api.mutate(clearProductChannelAvailabilityMutation, { input: { productId, ...input } }),
-        onSuccess,
-        onError,
+    const mutation = useMutation<unknown, unknown, Change, { previous: unknown }>({
+        mutationFn: ({ channelId, next }: Change): Promise<unknown> =>
+            next === 'INHERITED'
+                ? api.mutate(clearProductChannelAvailabilityMutation, { input: { productId, channelId } })
+                : api.mutate(setProductChannelAvailabilityMutation, {
+                      input: { productId, channelId, enabled: next === 'ENABLED' },
+                  }),
+        // Optimistic: flip the row immediately, roll back if the server rejects it.
+        onMutate: async ({ channelId, next }) => {
+            await queryClient.cancelQueries({ queryKey });
+            const previous = queryClient.getQueryData<any>(queryKey);
+            queryClient.setQueryData<any>(queryKey, (old: any) =>
+                old
+                    ? {
+                          ...old,
+                          productChannelAvailabilities: old.productChannelAvailabilities.map((r: Row) =>
+                              r.channelId === channelId ? applyChange(r, next) : r,
+                          ),
+                      }
+                    : old,
+            );
+            return { previous };
+        },
+        onError: (err, { channelCode }, context) => {
+            queryClient.setQueryData(queryKey, context?.previous);
+            toast.error(`Could not update ${channelLabel(channelCode)}`, {
+                description: isForbidden(err)
+                    ? 'You do not have permission to change availability in this channel.'
+                    : err instanceof Error
+                      ? err.message
+                      : 'Unknown error',
+            });
+        },
+        onSuccess: (_result, { channelCode, next }) => {
+            const subject = productName ?? 'Product';
+            const where = channelLabel(channelCode);
+            toast.success(
+                next === 'INHERITED'
+                    ? `${subject} now follows the global status in ${where}`
+                    : `${subject} is now ${next === 'ENABLED' ? 'available' : 'hidden'} in ${where}`,
+            );
+        },
+        onSettled: () => queryClient.invalidateQueries({ queryKey: ['productChannelAvailabilities', productId] }),
     });
-    const busy = setOverride.isPending || clearOverride.isPending;
 
     const canUpdateIn = (channelId: string) => {
-        const permissions = channels?.find(c => c.id === channelId)?.permissions ?? [];
-        return UPDATE_PERMISSIONS.some(p => (permissions as string[]).includes(p));
+        const permissions = (channels?.find(c => c.id === channelId)?.permissions ?? []) as string[];
+        return UPDATE_PERMISSIONS.some(p => permissions.includes(p));
     };
 
     if (isLoading) {
         return (
-            <div className="space-y-2" aria-busy="true">
-                <div className="h-10 animate-pulse rounded-md bg-muted" />
-                <div className="h-10 animate-pulse rounded-md bg-muted" />
+            <div className="space-y-3" aria-busy="true" aria-label="Loading channel availability">
+                <Skeleton className="h-4 w-40" />
+                <Skeleton className="h-[88px] w-full rounded-lg" />
+                <Skeleton className="h-[88px] w-full rounded-lg" />
             </div>
         );
     }
+
     if (error) {
+        const forbidden = isForbidden(error);
         return (
-            <p className="text-sm text-destructive" role="alert">
-                {isForbidden(error)
-                    ? 'You do not have permission to view channel availability for this product.'
-                    : `Could not load channel availability: ${error instanceof Error ? error.message : String(error)}`}
-            </p>
+            <div
+                role="alert"
+                className="flex gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive"
+            >
+                {forbidden ? <Lock className="mt-0.5 h-4 w-4 shrink-0" /> : <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />}
+                <span>
+                    {forbidden
+                        ? 'You do not have permission to view channel availability for this product.'
+                        : `Could not load channel availability. ${error instanceof Error ? error.message : ''}`}
+                </span>
+            </div>
         );
     }
+
     const rows = (data?.productChannelAvailabilities ?? []) as Row[];
     if (!rows.length) {
         return (
-            <p className="text-sm text-muted-foreground">
+            <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
                 This product is not assigned to any channel you can manage.
-            </p>
+            </div>
         );
     }
 
     const globalEnabled = rows[0].globalEnabled;
+    const availableCount = rows.filter(r => r.effectiveEnabled).length;
     const enabledDespiteGlobal = rows.filter(r => !r.globalEnabled && r.overrideState === 'ENABLED');
+    const hiddenDespiteGlobal = rows.filter(r => r.globalEnabled && r.overrideState === 'DISABLED');
 
     return (
         <div className="space-y-3">
-            <p className="text-xs text-muted-foreground">
-                Global status: <strong>{globalEnabled ? 'Enabled' : 'Disabled'}</strong>. Channels without an
-                override follow it; an override always wins.
-            </p>
-            {enabledDespiteGlobal.length > 0 && (
-                <p className="rounded-md border border-warning-border bg-warning/10 p-2 text-xs text-warning">
-                    This product is disabled globally but explicitly enabled in{' '}
-                    {enabledDespiteGlobal.map(r => r.channelCode).join(', ')}. Customers there can find and buy it.
+            <div className="flex flex-wrap items-center justify-between gap-x-2 gap-y-1">
+                <p className="text-sm text-muted-foreground">
+                    Available in <span className="font-semibold text-foreground">{availableCount}</span> of{' '}
+                    {rows.length} channel{rows.length === 1 ? '' : 's'}
                 </p>
+                <span
+                    className={cx(
+                        'inline-flex items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] font-medium',
+                        globalEnabled ? 'border-success/30 text-success' : 'text-muted-foreground',
+                    )}
+                    title="The product's own Enabled switch. Channels set to Global follow it."
+                >
+                    <Globe className="h-3 w-3" />
+                    Global {globalEnabled ? 'on' : 'off'}
+                </span>
+            </div>
+
+            {enabledDespiteGlobal.length > 0 && (
+                <Callout tone="warning">
+                    Disabled globally, but still <strong>sold</strong> in{' '}
+                    {joinLabels(enabledDespiteGlobal)} because of a channel override.
+                </Callout>
             )}
-            <ul className="divide-y rounded-md border">
-                {rows.map(row => {
-                    const canUpdate = canUpdateIn(row.channelId);
-                    return (
-                        <li key={row.channelId} className="space-y-2 p-2">
-                            <div className="flex items-center justify-between gap-2">
-                                <span className="truncate text-sm font-medium" title={row.channelCode}>
-                                    {row.channelCode}
-                                </span>
-                                <Badge variant={row.effectiveEnabled ? 'success' : 'secondary'}>
-                                    {row.effectiveEnabled ? 'Available' : 'Unavailable'}
-                                </Badge>
-                            </div>
-                            <div className="text-xs text-muted-foreground">
-                                {row.overrideState === 'INHERITED'
-                                    ? 'Inherited from global status'
-                                    : row.overrideState === 'ENABLED'
-                                      ? 'Explicitly enabled in this channel'
-                                      : 'Explicitly disabled in this channel'}
-                            </div>
-                            {canUpdate ? (
-                                <div className="flex flex-wrap gap-1">
-                                    {row.overrideState !== 'ENABLED' && (
-                                        <Button
-                                            size="sm"
-                                            variant="outline"
-                                            disabled={busy}
-                                            onClick={() => setOverride.mutate({ channelId: row.channelId, enabled: true })}
-                                        >
-                                            Enable
-                                        </Button>
-                                    )}
-                                    {row.overrideState !== 'DISABLED' && (
-                                        <Button
-                                            size="sm"
-                                            variant="outline"
-                                            disabled={busy}
-                                            onClick={() => setOverride.mutate({ channelId: row.channelId, enabled: false })}
-                                        >
-                                            Disable
-                                        </Button>
-                                    )}
-                                    {row.overrideState !== 'INHERITED' && (
-                                        <Button
-                                            size="sm"
-                                            variant="ghost"
-                                            disabled={busy}
-                                            onClick={() => clearOverride.mutate({ channelId: row.channelId })}
-                                        >
-                                            Use global
-                                        </Button>
-                                    )}
-                                </div>
-                            ) : (
-                                <div className="text-xs text-muted-foreground">Read only</div>
-                            )}
-                        </li>
-                    );
-                })}
+            {hiddenDespiteGlobal.length > 0 && (
+                <Callout tone="info">
+                    Enabled globally, but <strong>hidden</strong> in {joinLabels(hiddenDespiteGlobal)}.
+                </Callout>
+            )}
+
+            <ul className="space-y-2">
+                {rows.map(row => (
+                    <ChannelRow
+                        key={row.channelId}
+                        row={row}
+                        isActive={row.channelId === activeChannel?.id}
+                        canUpdate={canUpdateIn(row.channelId)}
+                        pending={mutation.isPending && mutation.variables?.channelId === row.channelId}
+                        disabled={mutation.isPending}
+                        onChange={next =>
+                            next !== row.overrideState &&
+                            mutation.mutate({ channelId: row.channelId, channelCode: row.channelCode, next })
+                        }
+                    />
+                ))}
             </ul>
         </div>
     );
 }
+
+function ChannelRow({
+    row,
+    isActive,
+    canUpdate,
+    pending,
+    disabled,
+    onChange,
+}: {
+    row: Row;
+    isActive: boolean;
+    canUpdate: boolean;
+    pending: boolean;
+    disabled: boolean;
+    onChange: (next: OverrideState) => void;
+}) {
+    const options: Array<{ value: OverrideState; label: string; hint: string }> = [
+        { value: 'INHERITED', label: 'Global', hint: `Follow the global status (${row.globalEnabled ? 'on' : 'off'})` },
+        { value: 'ENABLED', label: 'On', hint: 'Always available in this channel' },
+        { value: 'DISABLED', label: 'Off', hint: 'Always hidden in this channel' },
+    ];
+    const description =
+        row.overrideState === 'INHERITED'
+            ? `Follows global (${row.globalEnabled ? 'on' : 'off'})`
+            : row.overrideState === 'ENABLED'
+              ? row.globalEnabled
+                  ? 'Always on here'
+                  : 'On here, despite global off'
+              : 'Always off here';
+
+    return (
+        <li
+            className={cx(
+                'rounded-lg border bg-card p-3 transition-colors',
+                'border-l-[3px]',
+                row.effectiveEnabled ? 'border-l-success' : 'border-l-muted-foreground/30',
+            )}
+        >
+            <div className="flex items-center justify-between gap-2">
+                <p className="min-w-0 truncate text-sm font-medium" title={row.channelCode}>
+                    <ChannelCodeLabel code={row.channelCode} />
+                </p>
+                <StatusPill available={row.effectiveEnabled} pending={pending} />
+            </div>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+                {isActive && <span className="font-medium text-foreground/70">Current · </span>}
+                {description}
+            </p>
+
+            {canUpdate ? (
+                <div
+                    role="radiogroup"
+                    aria-label={`Availability in ${channelLabel(row.channelCode)}`}
+                    className="mt-3 grid grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5"
+                >
+                    {options.map(option => {
+                        const selected = row.overrideState === option.value;
+                        return (
+                            <button
+                                key={option.value}
+                                type="button"
+                                role="radio"
+                                aria-checked={selected}
+                                title={option.hint}
+                                disabled={disabled}
+                                onClick={() => onChange(option.value)}
+                                className={cx(
+                                    'inline-flex items-center justify-center gap-1 rounded-[5px] px-2 py-1 text-xs font-medium transition-all',
+                                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                                    'disabled:cursor-not-allowed',
+                                    selected
+                                        ? 'bg-background text-foreground shadow-sm'
+                                        : 'text-muted-foreground hover:text-foreground',
+                                    disabled && !selected && 'opacity-60',
+                                )}
+                            >
+                                {option.value === 'INHERITED' && <Globe className="h-3 w-3" />}
+                                {option.value === 'ENABLED' && <Eye className="h-3 w-3" />}
+                                {option.value === 'DISABLED' && <EyeOff className="h-3 w-3" />}
+                                {option.label}
+                            </button>
+                        );
+                    })}
+                </div>
+            ) : (
+                <p
+                    className="mt-2 inline-flex items-center gap-1 text-xs text-muted-foreground"
+                    title="You need UpdateCatalog or UpdateProduct permission in this channel to change it."
+                >
+                    <Lock className="h-3 w-3" />
+                    View only in this channel
+                </p>
+            )}
+        </li>
+    );
+}
+
+function StatusPill({ available, pending }: { available: boolean; pending: boolean }) {
+    return (
+        <span
+            className={cx(
+                'inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium',
+                available ? 'bg-success/10 text-success' : 'bg-muted text-muted-foreground',
+            )}
+        >
+            {pending ? (
+                <Loader2 className="h-3 w-3 animate-spin" />
+            ) : (
+                <span className={cx('h-1.5 w-1.5 rounded-full', available ? 'bg-success' : 'bg-muted-foreground/60')} />
+            )}
+            {available ? 'Available' : 'Hidden'}
+        </span>
+    );
+}
+
+function Callout({ tone, children }: { tone: 'warning' | 'info'; children: ReactNode }) {
+    return (
+        <div
+            className={cx(
+                'flex gap-2 rounded-lg border p-2.5 text-xs leading-relaxed',
+                tone === 'warning' ? 'border-warning/40 bg-warning/10 text-warning' : 'bg-muted/50 text-muted-foreground',
+            )}
+        >
+            {tone === 'warning' ? (
+                <AlertTriangle className="mt-px h-3.5 w-3.5 shrink-0" />
+            ) : (
+                <Info className="mt-px h-3.5 w-3.5 shrink-0" />
+            )}
+            <span>{children}</span>
+        </div>
+    );
+}
+
+function channelLabel(code: string) {
+    return code === '__default_channel__' ? 'Default channel' : code;
+}
+
+function joinLabels(rows: Row[]) {
+    return rows.map(r => channelLabel(r.channelCode)).join(', ');
+}

package/src/dashboard/index.tsx

@@ -15,7 +15,13 @@ defineDashboardExtension({
             },
             requiresPermission: ['ReadCatalog', 'ReadProduct'],
             shouldRender: context => !!context.entity?.id,
-            component: ({ context }) => <ChannelAvailabilityBlock productId={context.entity.id} />,
+            component: ({ context }) => (
+                <ChannelAvailabilityBlock
+                    productId={context.entity.id}
+                    productName={context.entity.name}
+                    globalEnabledHint={context.entity.enabled}
+                />
+            ),
         },
     ],
 });