@leandrosk/dashboard 3.5.5

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { FacetValueChip } from './facet-value-chip.js';
+import { FacetValueSelector } from './facet-value-selector.js';
+
+// Interface for facet value type
+interface FacetValue {
+    id: string;
+    name: string;
+    code: string;
+    facet: {
+        id: string;
+        name: string;
+        code: string;
+    };
+}
+
+interface AssignedFacetValuesProps {
+    value?: string[] | null;
+    facetValues: FacetValue[];
+    canUpdate?: boolean;
+    onChange?: (value: string[]) => void;
+}
+
+export function AssignedFacetValues({
+    value = [],
+    facetValues,
+    canUpdate = true,
+    onChange,
+}: Readonly<AssignedFacetValuesProps>) {
+    const [knownFacetValues, setKnownFacetValues] = useState<FacetValue[]>(facetValues);
+
+    function onSelectHandler(facetValue: FacetValue) {
+        setKnownFacetValues(prev => [...prev, facetValue]);
+        onChange?.([...new Set([...(value ?? []), facetValue.id])]);
+    }
+
+    function onRemoveHandler(id: string) {
+        onChange?.(value?.filter(fvId => fvId !== id) ?? []);
+    }
+
+    return (
+        <>
+            <div className="flex flex-wrap">
+                {(value ?? []).map(id => {
+                    const facetValue = knownFacetValues.find(fv => fv.id === id);
+                    if (!facetValue) return null;
+                    return (
+                        <div className="mb-2 mr-1" key={facetValue.id}>
+                            <FacetValueChip
+                                facetValue={facetValue}
+                                removable={canUpdate}
+                                onRemove={onRemoveHandler}
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+            {canUpdate && <FacetValueSelector onValueSelect={onSelectHandler} />}
+        </>
+    );
+}

package/src/lib/components/shared/channel-chip.tsx

@@ -0,0 +1,43 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { X } from 'lucide-react';
+import type { SimpleChannel } from '@/vdb/providers/channel-provider.js';
+
+interface ChannelChipProps {
+    channel: SimpleChannel;
+    removable?: boolean;
+    onRemove?: (id: string) => void;
+}
+
+/**
+ * @description
+ * A component for displaying a channel as a chip.
+ *
+ * @docsCategory components
+ * @since 3.5.2
+ */
+export function ChannelChip({
+    channel,
+    removable = true,
+    onRemove,
+}: Readonly<ChannelChipProps>) {
+    return (
+        <Badge
+            variant="secondary"
+            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
+        >
+            <div className="flex items-center gap-1.5">
+                <span className="font-medium">{channel.code}</span>
+            </div>
+            {removable && (
+                <button
+                    type="button"
+                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30 hover:cursor-pointer"
+                    onClick={() => onRemove?.(channel.id)}
+                    aria-label={`Remove ${channel.code} from ${channel.token}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}

package/src/lib/components/shared/channel-code-label.tsx

@@ -0,0 +1,6 @@
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
+import { Trans } from '@lingui/react/macro';
+
+export function ChannelCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
+    return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;
+}

package/src/lib/components/shared/channel-selector.tsx

@@ -0,0 +1,51 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { ChannelCodeLabel } from './channel-code-label.js';
+import { MultiSelect } from './multi-select.js';
+
+const channelsDocument = graphql(`
+    query channels($options: ChannelListOptions) {
+        channels(options: $options) {
+            items {
+                id
+                code
+            }
+        }
+    }
+`);
+
+export interface ChannelSelectorProps<T extends boolean> {
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+}
+
+export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T>) {
+    const { value, onChange, multiple } = props;
+    const { t } = useLingui();
+
+    const { data: channelsData } = useQuery({
+        queryKey: ['channels'],
+        queryFn: () => api.query(channelsDocument, {}),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    const items = (channelsData?.channels.items ?? []).map(channel => ({
+        value: channel.id,
+        label: channel.code,
+        display: <ChannelCodeLabel code={channel.code} />,
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={t`Select a channel`}
+            searchPlaceholder={t`Search channels...`}
+        />
+    );
+}

package/src/lib/components/shared/configurable-operation-arg-input.tsx

@@ -0,0 +1,29 @@
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { FormControlAdapter } from '../../framework/form-engine/form-control-adapter.js';
+
+export interface ConfigurableOperationArgInputProps {
+    definition: ConfigurableOperationDefFragment['args'][number];
+    readOnly?: boolean;
+    value: string;
+    onChange: (value: any) => void;
+}
+
+export function ConfigurableOperationArgInput({
+    definition,
+    value,
+    onChange,
+}: Readonly<ConfigurableOperationArgInputProps>) {
+    return (
+        <FormControlAdapter
+            fieldDef={definition}
+            field={{
+                value,
+                onChange,
+                onBlur: () => {},
+                name: definition.name,
+                ref: () => {},
+            }}
+            valueMode="json-string"
+        />
+    );
+}

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -0,0 +1,190 @@
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { X } from 'lucide-react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button } from '../ui/button.js';
+import { Card, CardContent, CardHeader } from '../ui/card.js';
+import { Form, FormControl, FormField, FormItem, FormLabel } from '../ui/form.js';
+import { ConfigurableOperationArgInput } from './configurable-operation-arg-input.js';
+
+export interface ConfigurableOperationInputProps {
+    operationDefinition: ConfigurableOperationDefFragment;
+    readonly?: boolean;
+    removable?: boolean;
+    position?: number;
+    hideDescription?: boolean;
+    value: ConfigurableOperationInputType;
+    onChange: (val: ConfigurableOperationInputType) => void;
+    onRemove?: () => void;
+    onValidityChange?: (isValid: boolean) => void;
+}
+
+export function ConfigurableOperationInput({
+    operationDefinition,
+    readonly,
+    removable,
+    hideDescription,
+    value,
+    onChange,
+    onRemove,
+    onValidityChange,
+}: Readonly<ConfigurableOperationInputProps>) {
+    const form = useForm({
+        defaultValues: {
+            ...value,
+        },
+    });
+
+    // Check validity of required fields and notify parent.
+    // List args are exempt from required validation (matching legacy Angular admin-ui behavior)
+    // because an empty array is considered a valid value for list types.
+    useEffect(() => {
+        if (!onValidityChange) return;
+
+        const isValid = operationDefinition.args.every(arg => {
+            if (!arg.required || arg.list) return true;
+            const argValue = value.arguments.find(a => a.name === arg.name)?.value;
+            return argValue !== undefined && argValue !== '';
+        });
+
+        onValidityChange(isValid);
+    }, [value.arguments, operationDefinition.args, onValidityChange]);
+
+    const handleInputChange = (name: string, inputValue: string) => {
+        const argIndex = value.arguments.findIndex(arg => arg.name === name);
+        const stringValue = inputValue.toString();
+        let updatedArgs: ConfigurableOperationInputType['arguments'];
+        if (argIndex === -1) {
+            updatedArgs = [...value.arguments, { name, value: stringValue }];
+        } else {
+            updatedArgs = value.arguments.map(arg =>
+                arg.name === name ? { ...arg, value: stringValue } : arg,
+            );
+        }
+        const newVal: ConfigurableOperationInputType = { ...value, arguments: updatedArgs };
+        onChange(newVal);
+    };
+
+    return (
+        <div>
+            <Card className="bg-muted/50 shadow-none">
+                <CardHeader className="pb-3">
+                    <div className="flex items-start justify-between">
+                        <div className="flex-1 min-w-0">
+                            {!hideDescription && (
+                                <div className="font-medium text-sm text-foreground leading-relaxed">
+                                    {interpolateDescription(operationDefinition, value.arguments)}
+                                </div>
+                            )}
+
+                            {operationDefinition.code && (
+                                <div className="text-xs text-muted-foreground mt-1 font-mono">
+                                    {operationDefinition.code}
+                                </div>
+                            )}
+                        </div>
+
+                        {removable !== false && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={onRemove}
+                                className="h-8 w-8 p-0 hover:bg-destructive/10 hover:text-destructive"
+                                disabled={readonly}
+                            >
+                                <X className="h-3.5 w-3.5" />
+                            </Button>
+                        )}
+                    </div>
+                </CardHeader>
+
+                {operationDefinition.args && operationDefinition.args.length > 0 && (
+                    <CardContent className="pt-0">
+                        <Form {...form}>
+                            <div className="space-y-4">
+                                <div
+                                    className={`grid gap-4 ${operationDefinition.args.length === 1 ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}`}
+                                >
+                                    {operationDefinition.args
+                                        .filter(arg => arg.ui?.component !== 'combination-mode-form-input')
+                                        .map(arg => {
+                                            const argValue =
+                                                value.arguments.find(a => a.name === arg.name)?.value || '';
+                                            return (
+                                                <FormField
+                                                    key={arg.name}
+                                                    name={`args.${arg.name}`}
+                                                    render={() => (
+                                                        <FormItem className="space-y-2">
+                                                            <FormLabel className="text-sm font-medium text-foreground">
+                                                                {arg.label || arg.name}
+                                                                {arg.required && !arg.list && (
+                                                                    <span className="text-destructive ml-1">
+                                                                        *
+                                                                    </span>
+                                                                )}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <ConfigurableOperationArgInput
+                                                                    definition={arg}
+                                                                    value={argValue}
+                                                                    onChange={value =>
+                                                                        handleInputChange(arg.name, value)
+                                                                    }
+                                                                    readOnly={readonly}
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            );
+                                        })}
+                                </div>
+                            </div>
+                        </Form>
+                    </CardContent>
+                )}
+            </Card>
+        </div>
+    );
+}
+
+/**
+ * Interpolates the description of an ConfigurableOperation with the given values.
+ */
+export function interpolateDescription(
+    operation: any,
+    values: Array<{ name: string; value: string }>,
+    precisionFactor = 2,
+): string {
+    if (!operation) {
+        return '';
+    }
+    const templateString = operation.description;
+    const interpolated = templateString.replace(
+        /{\s*([a-zA-Z0-9]+)\s*}/gi,
+        (substring: string, argName: string) => {
+            const normalizedArgName = argName.toLowerCase();
+            const value = values.find(v => v.name === normalizedArgName)?.value;
+            if (value == null || value === '') {
+                return '_';
+            }
+            let formatted = value;
+            const argDef = operation.args.find((arg: any) => arg.name === normalizedArgName);
+            if (
+                argDef &&
+                argDef.type === 'int' &&
+                argDef.ui &&
+                argDef.ui.component === 'currency-form-input'
+            ) {
+                formatted = (Number(value) / Math.pow(10, precisionFactor)).toString();
+            }
+            if (argDef && argDef.type === 'datetime' && (value as any) instanceof Date) {
+                formatted = (value as any).toLocaleDateString();
+            }
+            return formatted;
+        },
+    );
+    return interpolated;
+}