@leandrosk/dashboard 3.5.5

package/src/app/routes/_authenticated/_payment-methods/components/payment-eligibility-checker-selector.tsx

@@ -0,0 +1,40 @@
+import { ConfigurableOperationSelector } from '@/vdb/components/shared/configurable-operation-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+
+export const paymentEligibilityCheckersDocument = graphql(
+    `
+        query GetPaymentEligibilityCheckers {
+            paymentMethodEligibilityCheckers {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface PaymentEligibilityCheckerSelectorProps {
+    value: ConfigurableOperationInputType | undefined;
+    onChange: (value: ConfigurableOperationInputType | undefined) => void;
+    onValidityChange?: (isValid: boolean) => void;
+}
+
+export function PaymentEligibilityCheckerSelector({
+    value,
+    onChange,
+    onValidityChange,
+}: Readonly<PaymentEligibilityCheckerSelectorProps>) {
+    return (
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={paymentEligibilityCheckersDocument}
+            queryKey="paymentMethodEligibilityCheckers"
+            dataPath="paymentMethodEligibilityCheckers"
+            buttonText="Select Payment Eligibility Checker"
+            emptyText="No checkers found"
+            onValidityChange={onValidityChange}
+        />
+    );
+}

package/src/app/routes/_authenticated/_payment-methods/components/payment-handler-selector.tsx

@@ -0,0 +1,39 @@
+import { ConfigurableOperationSelector } from '@/vdb/components/shared/configurable-operation-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+
+export const paymentHandlersDocument = graphql(
+    `
+        query GetPaymentHandlers {
+            paymentMethodHandlers {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface PaymentHandlerSelectorProps {
+    value: ConfigurableOperationInputType | undefined;
+    onChange: (value: ConfigurableOperationInputType | undefined) => void;
+    onValidityChange?: (isValid: boolean) => void;
+}
+
+export function PaymentHandlerSelector({
+    value,
+    onChange,
+    onValidityChange,
+}: Readonly<PaymentHandlerSelectorProps>) {
+    return (
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={paymentHandlersDocument}
+            queryKey="paymentMethodHandlers"
+            dataPath="paymentMethodHandlers"
+            buttonText="Select Payment Handler"
+            onValidityChange={onValidityChange}
+        />
+    );
+}

package/src/app/routes/_authenticated/_payment-methods/components/payment-method-bulk-actions.tsx

@@ -0,0 +1,58 @@
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+
+import {
+    assignPaymentMethodsToChannelDocument,
+    deletePaymentMethodsDocument,
+    removePaymentMethodsFromChannelDocument,
+} from '../payment-methods.graphql.js';
+
+export const DeletePaymentMethodsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deletePaymentMethodsDocument}
+            entityName="payment methods"
+            requiredPermissions={['DeletePaymentMethod']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignPaymentMethodsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="payment methods"
+            mutationFn={api.mutate(assignPaymentMethodsToChannelDocument)}
+            requiredPermissions={['UpdatePaymentMethod']}
+            buildInput={(channelId: string) => ({
+                paymentMethodIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemovePaymentMethodsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { activeChannel } = useChannel();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="payment methods"
+            mutationFn={api.mutate(removePaymentMethodsFromChannelDocument)}
+            requiredPermissions={['UpdatePaymentMethod']}
+            buildInput={() => ({
+                paymentMethodIds: selection.map(s => s.id),
+                channelId: activeChannel?.id,
+            })}
+        />
+    );
+};

package/src/app/routes/_authenticated/_payment-methods/payment-methods.graphql.ts

@@ -0,0 +1,110 @@
+import { configurableOperationFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const paymentMethodItemFragment = graphql(`
+    fragment PaymentMethodItem on PaymentMethod {
+        id
+        createdAt
+        updatedAt
+        name
+        description
+        code
+        enabled
+    }
+`);
+
+export const paymentMethodListQuery = graphql(
+    `
+        query PaymentMethodList($options: PaymentMethodListOptions) {
+            paymentMethods(options: $options) {
+                items {
+                    ...PaymentMethodItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [paymentMethodItemFragment],
+);
+
+export const paymentMethodDetailDocument = graphql(
+    `
+        query PaymentMethodDetail($id: ID!) {
+            paymentMethod(id: $id) {
+                id
+                createdAt
+                updatedAt
+                name
+                code
+                description
+                enabled
+                translations {
+                    id
+                    languageCode
+                    name
+                    description
+                }
+                checker {
+                    ...ConfigurableOperation
+                }
+                handler {
+                    ...ConfigurableOperation
+                }
+                customFields
+            }
+        }
+    `,
+    [configurableOperationFragment],
+);
+
+export const createPaymentMethodDocument = graphql(`
+    mutation CreatePaymentMethod($input: CreatePaymentMethodInput!) {
+        createPaymentMethod(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updatePaymentMethodDocument = graphql(`
+    mutation UpdatePaymentMethod($input: UpdatePaymentMethodInput!) {
+        updatePaymentMethod(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deletePaymentMethodDocument = graphql(`
+    mutation DeletePaymentMethod($id: ID!) {
+        deletePaymentMethod(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const deletePaymentMethodsDocument = graphql(`
+    mutation DeletePaymentMethods($ids: [ID!]!) {
+        deletePaymentMethods(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const assignPaymentMethodsToChannelDocument = graphql(`
+    mutation AssignPaymentMethodsToChannel($input: AssignPaymentMethodsToChannelInput!) {
+        assignPaymentMethodsToChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);
+
+export const removePaymentMethodsFromChannelDocument = graphql(`
+    mutation RemovePaymentMethodsFromChannel($input: RemovePaymentMethodsFromChannelInput!) {
+        removePaymentMethodsFromChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);

package/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -0,0 +1,88 @@
+import { BooleanDisplayBadge } from '@/vdb/components/data-display/boolean.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import {
+    AssignPaymentMethodsToChannelBulkAction,
+    DeletePaymentMethodsBulkAction,
+    RemovePaymentMethodsFromChannelBulkAction,
+} from './components/payment-method-bulk-actions.js';
+import { paymentMethodListQuery } from './payment-methods.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
+    component: PaymentMethodListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Payment Methods</Trans> }),
+});
+
+function PaymentMethodListPage() {
+    const { t } = useLingui();
+    return (
+        <ListPage
+            pageId="payment-method-list"
+            listQuery={paymentMethodListQuery}
+            route={Route}
+            title={<Trans>Payment Methods</Trans>}
+            defaultVisibility={{
+                name: true,
+                code: true,
+                enabled: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            facetedFilters={{
+                enabled: {
+                    title: t`Enabled`,
+                    options: [
+                        { label: 'Enabled', value: true },
+                        { label: 'Disabled', value: false },
+                    ],
+                },
+            }}
+            customizeColumns={{
+                name: {
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                enabled: {
+                    cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
+                },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
+            }}
+            bulkActions={[
+                {
+                    component: AssignPaymentMethodsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemovePaymentMethodsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: DeletePaymentMethodsBulkAction,
+                    order: 500,
+                },
+            ]}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreatePaymentMethod']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            <Trans>New Payment Method</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -0,0 +1,213 @@
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { PaymentEligibilityCheckerSelector } from './components/payment-eligibility-checker-selector.js';
+import { PaymentHandlerSelector } from './components/payment-handler-selector.js';
+import {
+    createPaymentMethodDocument,
+    paymentMethodDetailDocument,
+    updatePaymentMethodDocument,
+} from './payment-methods.graphql.js';
+
+const pageId = 'payment-method-detail';
+
+export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods_/$id')({
+    component: PaymentMethodDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: paymentMethodDetailDocument,
+        breadcrumb(_isNew, entity) {
+            return [
+                { path: '/payment-methods', label: <Trans>Payment Methods</Trans> },
+                _isNew ? <Trans>New payment method</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function PaymentMethodDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { t } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: paymentMethodDetailDocument,
+        createDocument: createPaymentMethodDocument,
+        updateDocument: updatePaymentMethodDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                enabled: entity.enabled,
+                name: entity.name,
+                code: entity.code,
+                description: entity.description,
+                checker: entity.checker?.code
+                    ? {
+                          code: entity.checker?.code,
+                          arguments: entity.checker?.args,
+                      }
+                    : null,
+                handler: entity.handler?.code
+                    ? {
+                          code: entity.handler?.code,
+                          arguments: entity.handler?.args,
+                      }
+                    : null,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    description: translation.description,
+                    customFields: (translation as any).customFields,
+                })),
+                customFields: entity.customFields,
+            };
+        },
+        transformCreateInput: input => {
+            return {
+                ...input,
+                checker: input.checker?.code ? input.checker : undefined,
+                handler: input.handler,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(
+                creatingNewEntity
+                    ? t`Successfully created payment method`
+                    : t`Successfully updated payment method`,
+            );
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(
+                creatingNewEntity ? t`Failed to create payment method` : t`Failed to update payment method`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    const [checkerArgsValid, setCheckerArgsValid] = useState(true);
+    const [handlerArgsValid, setHandlerArgsValid] = useState(true);
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdatePaymentMethod']}>
+                        <Button
+                            type="submit"
+                            disabled={
+                                !form.formState.isDirty ||
+                                !form.formState.isValid ||
+                                isPending ||
+                                !checkerArgsValid ||
+                                !handlerArgsValid
+                            }
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="enabled">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="enabled"
+                        label={<Trans>Enabled</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                    <TranslatableFormFieldWrapper
+                        control={form.control}
+                        name="description"
+                        label={<Trans>Description</Trans>}
+                        render={({ field }) => <RichTextInput {...field} />}
+                    />
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="PaymentMethod" control={form.control} />
+                <PageBlock
+                    column="main"
+                    blockId="payment-eligibility-checker"
+                    title={<Trans>Payment eligibility checker</Trans>}
+                >
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="checker"
+                        render={({ field }) => (
+                            <PaymentEligibilityCheckerSelector
+                                value={field.value}
+                                onChange={field.onChange}
+                                onValidityChange={setCheckerArgsValid}
+                            />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="payment-handler" title={<Trans>Calculator</Trans>}>
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="handler"
+                        render={({ field }) => (
+                            <PaymentHandlerSelector
+                                value={field.value}
+                                onChange={field.onChange}
+                                onValidityChange={setHandlerArgsValid}
+                            />
+                        )}
+                    />
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_product-variants/components/add-currency-dropdown.tsx

@@ -0,0 +1,49 @@
+import { useLingui } from '@lingui/react/macro';
+import { PlusIcon } from 'lucide-react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+
+interface AddCurrencyDropdownProps {
+    unusedCurrencies: string[];
+    onCurrencySelect: (currencyCode: string) => void;
+    placeholder?: string;
+}
+
+export function AddCurrencyDropdown({
+    unusedCurrencies,
+    onCurrencySelect,
+    placeholder,
+}: AddCurrencyDropdownProps) {
+    const { formatCurrencyName } = useLocalFormat();
+    const { t } = useLingui();
+
+    if (unusedCurrencies.length === 0) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="gap-2">
+                    <PlusIcon className="size-4" />
+                    {placeholder || t`Add a price in another currency`}
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                {unusedCurrencies.map(currencyCode => (
+                    <DropdownMenuItem key={currencyCode} onSelect={() => onCurrencySelect(currencyCode)}>
+                        <span className="uppercase text-muted-foreground">{currencyCode}</span>
+                        {formatCurrencyName(currencyCode)}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/src/app/routes/_authenticated/_product-variants/components/add-stock-location-dropdown.tsx

@@ -0,0 +1,56 @@
+import { useLingui } from '@lingui/react/macro';
+import { PlusIcon } from 'lucide-react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { ResultOf } from 'gql.tada';
+
+import { stockLocationsQueryDocument } from '../product-variants.graphql.js';
+
+interface AddStockLocationDropdownProps {
+    availableStockLocations: ResultOf<typeof stockLocationsQueryDocument>['stockLocations']['items'];
+    usedStockLocationIds: string[];
+    onStockLocationSelect: (stockLocationId: string, stockLocationName: string) => void;
+    placeholder?: string;
+}
+
+export function AddStockLocationDropdown({
+    availableStockLocations,
+    usedStockLocationIds,
+    onStockLocationSelect,
+    placeholder,
+}: AddStockLocationDropdownProps) {
+    const { t } = useLingui();
+
+    const unusedStockLocations = availableStockLocations.filter(sl => !usedStockLocationIds.includes(sl.id));
+
+    if (unusedStockLocations.length === 0) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="gap-2">
+                    <PlusIcon className="size-4" />
+                    {placeholder || t`Add stock level for another location`}
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                {unusedStockLocations.map(location => (
+                    <DropdownMenuItem
+                        key={location.id}
+                        onSelect={() => onStockLocationSelect(location.id, location.name)}
+                    >
+                        {location.name}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}