@deenruv/admin-dashboard 1.0.0

package/dist/pages/roles/_components/RoleDetailView.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Input, Label, MultipleSelector, DEFAULT_CHANNEL_CODE, apiClient, useDetailView, DetailViewMarker, CustomCard, CardIcons, useTranslation, } from '@deenruv/react-ui-devkit';
+import { PermissionsCard } from "./PermissionsCard";
+const ROLE_FORM_KEYS = ['CreateRoleInput', 'code', 'description', 'channelIds', 'permissions'];
+export const RoleDetailView = () => {
+    const { form, fetchEntity, id } = useDetailView('roles-detail-view', ...ROLE_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    const { t } = useTranslation('roles');
+    const [allChannelOptions, setAllChannelOptions] = useState([]);
+    const currentChannelOptions = useMemo(() => {
+        if (!allChannelOptions)
+            return undefined;
+        else
+            return state.channelIds?.value?.map((id) => allChannelOptions.find((o) => o.value === id) || { value: id, label: id });
+    }, [allChannelOptions, state.channelIds?.value]);
+    const fetchChannels = useCallback(async () => {
+        const response = await apiClient('query')({
+            channels: [
+                {},
+                {
+                    items: {
+                        code: true,
+                        id: true,
+                    },
+                },
+            ],
+        });
+        setAllChannelOptions(response.channels.items.map((ch) => ({
+            value: ch.id,
+            label: ch.code === DEFAULT_CHANNEL_CODE ? t('defaultChannel') : ch.code,
+        })));
+    }, [setAllChannelOptions, t]);
+    useEffect(() => {
+        fetchChannels();
+    }, [id, fetchChannels]);
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('code', res.code);
+            setField('description', res.description);
+            setField('channelIds', res.channels.map((ch) => ch.id));
+            setField('permissions', res.permissions);
+        })();
+    }, []);
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/2 xl:basis-1/4", children: _jsx(Input, { label: t('details.basic.description'), value: state.description?.value ?? undefined, onChange: (e) => setField('description', e.target.value), errors: state.description?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/2 xl:basis-1/4", children: _jsx(Input, { label: t('details.basic.code'), value: state.code?.value ?? undefined, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) }), _jsxs("div", { className: "flex basis-full flex-col gap-[6px] xl:basis-1/2", children: [_jsx(Label, { children: t('details.basic.channels') }), _jsx(MultipleSelector, { options: allChannelOptions, value: currentChannelOptions, placeholder: t('details.basic.channelsPlaceholder'), onChange: (channelsOptions) => setField('channelIds', channelsOptions.map((o) => o.value)), hideClearAllButton: true })] })] }) }), _jsx(DetailViewMarker, { position: 'roles-detail-view' }), _jsx(PermissionsCard, { currentPermissions: state.permissions?.value ?? undefined, onPermissionsChange: (e) => setField('permissions', e), errors: state.permissions?.errors })] }) }));
+};

package/dist/pages/roles/index.js

@@ -0,0 +1,2 @@
+export * from './Detail.js';
+export * from './List.js';

package/dist/pages/sellers/Detail.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { useValidators, getMutation, useMutation, DetailView, createDeenruvForm, } from '@deenruv/react-ui-devkit';
+import { SellerDetailView } from "./_components/SellerDetailView.js";
+const CreateSellerMutation = getMutation('createSeller');
+const EditSellerMutation = getMutation('updateSeller');
+const DeleteSellerMutation = getMutation('deleteSeller');
+export const SellersDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditSellerMutation);
+    const [create] = useMutation(CreateSellerMutation);
+    const [remove] = useMutation(DeleteSellerMutation);
+    const { nameValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.name?.validatedValue) {
+            throw new Error('Name is required.');
+        }
+        const inputData = {
+            name: data.name.validatedValue,
+            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+        };
+        if (id) {
+            return update({ input: { id, ...inputData } });
+        }
+        else {
+            return create({ input: inputData });
+        }
+    }, [id, update, create]);
+    const onDeleteHandler = useCallback(() => {
+        if (!id) {
+            throw new Error('Could not find the id.');
+        }
+        return remove({ input: { id } });
+    }, [remove, id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "sellers-detail-view", main: {
+                name: 'seller',
+                label: 'Seller',
+                component: _jsx(SellerDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateSellerInput',
+                    keys: ['name', 'customFields'],
+                    config: { name: nameValidator },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            } }) }));
+};

package/dist/pages/sellers/List.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Routes, apiClient, DetailList, deepMerge, ListLocations } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'sellers-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        sellers: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response['sellers'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteSellers } = await apiClient('mutation')({
+            deleteSellers: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteSellers.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const SellersListPage = () => {
+    return (_jsx(DetailList, { filterFields: [{ key: 'name', operator: 'StringOperators' }], detailLinkColumn: "id", searchFields: ['name'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'Seller', route: Routes['sellers'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateSeller], deletePermissions: [Permission.DeleteSeller] }));
+};

package/dist/pages/sellers/_components/SellerDetailView.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, DetailViewMarker, Input, useDetailView, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+export const SELLER_FORM_KEYS = ['CreateSellerInput', 'name', 'customFields'];
+export const SellerDetailView = () => {
+    const { form, fetchEntity, entity, id } = useDetailView('sellers-detail-view', ...SELLER_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    const { t } = useTranslation('sellers');
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('name', res.name);
+        })();
+    }, []);
+    return (_jsx("main", { className: "my-4 min-h-96", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "flex flex-row justify-between text-base", children: t('details.basic.title') }), _jsx(CardContent, { className: "flex flex-col gap-4 p-0 pt-4", children: _jsx("div", { className: "flex flex-col gap-3", children: _jsx(Input, { className: "w-1/2", label: t('details.basic.name'), value: state.name?.value, onChange: (e) => setField('name', e.target.value), errors: state.name?.errors, required: true }) }) })] }) }), _jsx(DetailViewMarker, { position: 'sellers-detail-view' }), _jsx(EntityCustomFields, { entityName: "seller", id: id, hideButton: true, onChange: (customFields) => {
+                        setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } })] }) }));
+};

package/dist/pages/sellers/index.js

@@ -0,0 +1,2 @@
+export * from './Detail.js';
+export * from './List.js';

package/dist/pages/shipping-methods/Detail.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation, DetailView, createDeenruvForm, getMutation, useMutation, } from '@deenruv/react-ui-devkit';
+import { ShippingMethodDetailView } from "./_components/ShippingMethodDetailView.js";
+const CreateShippingMethodMutation = getMutation('createShippingMethod');
+const EditShippingMethodMutation = getMutation('updateShippingMethod');
+const DeleteShippingMethodMutation = getMutation('deleteShippingMethod');
+export const ShippingMethodsDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditShippingMethodMutation);
+    const [create] = useMutation(CreateShippingMethodMutation);
+    const [remove] = useMutation(DeleteShippingMethodMutation);
+    const { t } = useTranslation('shippingMethods');
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.code?.validatedValue) {
+            throw new Error('Name is required.');
+        }
+        const inputData = {
+            code: data.code?.validatedValue,
+            calculator: data.calculator?.validatedValue,
+            fulfillmentHandler: data.fulfillmentHandler?.validatedValue,
+            translations: data.translations.validatedValue,
+            checker: data.checker?.validatedValue,
+            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+        };
+        if (id) {
+            return update({
+                input: {
+                    id,
+                    ...inputData,
+                    checker: data.checker?.validatedValue?.code !== '' ? data.checker?.validatedValue : undefined,
+                },
+            });
+        }
+        else {
+            return create({
+                input: inputData,
+            });
+        }
+    }, [id, update, create]);
+    const onDeleteHandler = useCallback(() => {
+        if (!id) {
+            throw new Error('Could not find the id.');
+        }
+        return remove({ input: { id } });
+    }, [remove, id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "shippingMethods-detail-view", main: {
+                name: 'shippingMethod',
+                label: 'Shipping method',
+                component: _jsx(ShippingMethodDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateShippingMethodInput',
+                    keys: ['code', 'translations', 'checker', 'calculator', 'fulfillmentHandler', 'customFields'],
+                    config: {
+                        fulfillmentHandler: {
+                            validate: (v) => {
+                                if (!v)
+                                    return [t('validation.fulfillmentHandlerRequired')];
+                            },
+                        },
+                        checker: {
+                            validate: (v) => {
+                                const hasCode = !!v?.code;
+                                const hasArguments = v?.arguments.filter((a) => a.value).length;
+                                const errors = [];
+                                if (!hasCode)
+                                    errors.push(t('validation.checkerCodeRequired'));
+                                if (!hasArguments)
+                                    errors.push(t('validation.checkerArgsRequired'));
+                                return errors;
+                            },
+                        },
+                        calculator: {
+                            validate: (v) => {
+                                const hasCode = !!v?.code;
+                                const hasInvalidArguments = v?.arguments.filter((a) => !a.value || a.value === 'false').length; // args have 'false' value by default
+                                const errors = [];
+                                console.log(v?.arguments);
+                                if (!hasCode)
+                                    errors.push(t('validation.checkerCodeRequired'));
+                                if (hasInvalidArguments)
+                                    errors.push(t('validation.checkerArgsRequired'));
+                                return errors;
+                            },
+                        },
+                        code: {
+                            validate: (v) => {
+                                if (!v || v === '')
+                                    return [t('validation.required')];
+                            },
+                        },
+                        translations: {
+                            validate: (v) => {
+                                const { name } = v[0];
+                                if (!name)
+                                    return [t('validation.nameRequired')];
+                            },
+                        },
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            } }) }));
+};

package/dist/pages/shipping-methods/List.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Routes, apiClient, DetailList, deepMerge, ListLocations, EntityChannelManagementBulkAction, } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'shippingMethods-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        shippingMethods: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response['shippingMethods'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteShippingMethods } = await apiClient('mutation')({
+            deleteShippingMethods: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteShippingMethods.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const ShippingMethodsListPage = () => {
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'name', operator: 'StringOperators' },
+            { key: 'code', operator: 'StringOperators' },
+        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'ShippingMethod', route: Routes['shippingMethods'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateShippingMethod], deletePermissions: [Permission.DeleteShippingMethod] }));
+};

package/dist/pages/shipping-methods/_components/CalculatorCard.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Button, Label, apiClient, ErrorMessage, generateInputComponents, usePluginStore, CustomFieldsProvider, CardIcons, CustomCard, SimpleSelect, useTranslation, PaymentMethodHandlerSelector, } from '@deenruv/react-ui-devkit';
+import { X } from 'lucide-react';
+export const CalculatorCard = ({ currentCalculatorValue, onCalculatorValueChange, errors, }) => {
+    const { t } = useTranslation('shippingMethods');
+    const [calculators, setCalculators] = useState([]);
+    const [allCalculatorsOptions, setAllCalculatorsOptions] = useState([]);
+    const { getInputComponent } = usePluginStore();
+    const fetchOptions = useCallback(async () => {
+        const response = await apiClient('query')({
+            shippingCalculators: PaymentMethodHandlerSelector,
+        });
+        setAllCalculatorsOptions(response.shippingCalculators.map((c) => ({
+            value: c.code,
+            label: c.code,
+        })));
+        setCalculators(response.shippingCalculators);
+    }, [setAllCalculatorsOptions]);
+    useEffect(() => {
+        fetchOptions();
+    }, [fetchOptions]);
+    const handleCalculatorValueChange = useCallback((code, args) => {
+        const correspondingCalculator = calculators.find((h) => h.code === code);
+        console.log('args', args);
+        if (correspondingCalculator)
+            onCalculatorValueChange({
+                code: correspondingCalculator.code,
+                arguments: args ||
+                    correspondingCalculator.args.map((a) => ({
+                        name: a.name,
+                        value: 'false',
+                    })),
+            });
+    }, [calculators, onCalculatorValueChange]);
+    const clearInput = useCallback(() => {
+        onCalculatorValueChange(undefined);
+    }, [onCalculatorValueChange]);
+    return (_jsx(CustomCard, { title: t('details.calculator.title'), icon: _jsx(CardIcons.calc, {}), color: "indigo", children: _jsxs("div", { className: "flex basis-full flex-col gap-3 md:basis-1/2", children: [_jsxs("div", { className: "flex items-end gap-1", children: [_jsx(SimpleSelect, { label: t('details.calculator.type'), value: currentCalculatorValue ? currentCalculatorValue.code : '', onValueChange: handleCalculatorValueChange, options: allCalculatorsOptions }), currentCalculatorValue?.code && (_jsx(Button, { variant: 'secondary', className: "p-2", onClick: clearInput, children: _jsx(X, { size: 20 }) }))] }), _jsx("div", { className: "flex gap-3", children: currentCalculatorValue?.arguments.map((e, i) => {
+                        const calculator = calculators?.find((ch) => ch.code === currentCalculatorValue.code);
+                        const argument = calculator?.args.find((a) => a.name === e.name);
+                        if (!argument)
+                            return null;
+                        return generateInputComponents([
+                            {
+                                ...argument,
+                                label: [{ languageCode: 'en', value: argument.label || argument.name }],
+                                description: [{ languageCode: 'en', value: argument.description || '' }],
+                            },
+                        ], getInputComponent).map((field) => {
+                            const value = e.value;
+                            const setValue = (data) => {
+                                try {
+                                    onCalculatorValueChange({
+                                        code: currentCalculatorValue.code,
+                                        arguments: currentCalculatorValue.arguments.map((a) => {
+                                            try {
+                                                if (a.name === field.name) {
+                                                    return {
+                                                        name: a.name,
+                                                        value: JSON.stringify(data),
+                                                    };
+                                                }
+                                            }
+                                            catch {
+                                                return a;
+                                            }
+                                            return a;
+                                        }),
+                                    });
+                                }
+                                catch {
+                                    console.error('Error setting value');
+                                }
+                            };
+                            return (_jsx(CustomFieldsProvider, { field: field, value: value, setValue: setValue, additionalData: {}, children: _jsxs("div", { children: [_jsx("div", { children: _jsx(Label, { children: field.name }) }), field.component] }, field.name) }, field.name));
+                        });
+                    }) }), _jsx(ErrorMessage, { errors: errors })] }) }));
+};

package/dist/pages/shipping-methods/_components/CheckerCard.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Button, Label, apiClient, ErrorMessage, generateInputComponents, usePluginStore, CustomFieldsProvider, CustomCard, CardIcons, SimpleSelect, useTranslation, PaymentMethodHandlerSelector, } from '@deenruv/react-ui-devkit';
+import { X } from 'lucide-react';
+export const CheckerCard = ({ currentCheckerValue, onCheckerValueChange, errors }) => {
+    const { t } = useTranslation('shippingMethods');
+    const [checkers, setCheckers] = useState([]);
+    const [allCheckersOptions, setAllCheckersOptions] = useState([]);
+    const { getInputComponent } = usePluginStore();
+    const fetchOptions = useCallback(async () => {
+        const response = await apiClient('query')({
+            shippingEligibilityCheckers: PaymentMethodHandlerSelector,
+        });
+        setAllCheckersOptions(response.shippingEligibilityCheckers.map((h) => ({
+            value: h.code,
+            label: h.code,
+        })));
+        setCheckers(response.shippingEligibilityCheckers);
+    }, [setAllCheckersOptions]);
+    useEffect(() => {
+        fetchOptions();
+    }, [fetchOptions]);
+    const handleCheckerValueChange = useCallback((code, args) => {
+        const correspondingChecker = checkers.find((h) => h.code === code);
+        if (correspondingChecker)
+            onCheckerValueChange({
+                code: correspondingChecker.code,
+                arguments: args ||
+                    correspondingChecker.args.map((a) => ({
+                        name: a.name,
+                        value: 'false',
+                    })),
+            });
+    }, [checkers, onCheckerValueChange]);
+    const clearInput = useCallback(() => {
+        console.log('CLICK');
+        onCheckerValueChange(undefined);
+    }, [onCheckerValueChange]);
+    return (_jsx(CustomCard, { title: t('details.options.title'), icon: _jsx(CardIcons.check, {}), color: "teal", upperRight: _jsx(ErrorMessage, { errors: errors }), children: _jsxs("div", { className: "flex basis-full flex-col gap-3 md:basis-1/2", children: [_jsxs("div", { className: "flex items-end gap-1", children: [_jsx(SimpleSelect, { label: t('details.options.checker'), value: currentCheckerValue ? currentCheckerValue.code : '', onValueChange: handleCheckerValueChange, options: allCheckersOptions }), currentCheckerValue?.code && (_jsx(Button, { variant: 'secondary', className: "p-2", onClick: clearInput, children: _jsx(X, { size: 20 }) }))] }), _jsx("div", { className: "flex", children: currentCheckerValue?.arguments.map((e, i) => {
+                        const checker = checkers?.find((ch) => ch.code === currentCheckerValue.code);
+                        const argument = checker?.args.find((a) => a.name === a.name);
+                        if (!argument)
+                            return null;
+                        return generateInputComponents([
+                            {
+                                ...argument,
+                                label: [{ languageCode: 'en', value: argument.label || argument.name }],
+                                description: [{ languageCode: 'en', value: argument.description || '' }],
+                            },
+                        ], getInputComponent).map((field) => {
+                            const value = e.value;
+                            const setValue = (data) => {
+                                try {
+                                    onCheckerValueChange({
+                                        code: currentCheckerValue.code,
+                                        arguments: currentCheckerValue.arguments.map((a) => {
+                                            try {
+                                                if (a.name === field.name) {
+                                                    return { name: field.name, value: JSON.stringify(data) };
+                                                }
+                                            }
+                                            catch {
+                                                return a;
+                                            }
+                                            return a;
+                                        }),
+                                    });
+                                }
+                                catch {
+                                    console.error('Error setting value');
+                                }
+                            };
+                            return (_jsx(CustomFieldsProvider, { field: field, value: value, setValue: setValue, additionalData: {}, children: _jsxs("div", { children: [_jsx("div", { children: _jsx(Label, { children: field.name }) }), field.component] }, field.name) }, field.name));
+                        });
+                    }) })] }) }));
+};

package/dist/pages/shipping-methods/_components/Lines.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageWithPreview, TableHeader, TableRow, TableHead, TableBody, TableCell, Table, Label, useTranslation, DialogProductPicker, } from '@deenruv/react-ui-devkit';
+import { useEffect, useState } from 'react';
+export const Lines = ({ onLinesChange }) => {
+    const { t } = useTranslation('shippingMethods');
+    const [currentProducts, setCurrentProducts] = useState([]);
+    useEffect(() => {
+        onLinesChange(currentProducts.map((p) => ({ productVariantId: p.id, quantity: 1 })));
+    }, [currentProducts, onLinesChange]);
+    return (_jsxs("div", { className: "grid gap-6", children: [_jsx(Label, { htmlFor: "product", children: t('details.lines.placeholder') }), _jsx(DialogProductPicker, { initialValue: currentProducts.map((p) => p.id), multiple: true, mode: "variant", onSubmit: (selectedProducts) => {
+                    const products = selectedProducts.map((product) => ({
+                        id: product.productVariantId,
+                        featuredAsset: product.productVariantAsset,
+                        product: { name: product.productName, featuredAsset: product.productAsset },
+                        price: product.price.__typename === 'SinglePrice' ? product.price.value : product.price.min,
+                        priceWithTax: product.priceWithTax.__typename === 'SinglePrice' ? product.priceWithTax.value : product.priceWithTax.min,
+                    }));
+                    setCurrentProducts(products);
+                } }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "text-nowrap", children: _jsxs(TableRow, { noHover: true, children: [_jsx(TableHead, { children: t('details.lines.product') }), _jsx(TableHead, { children: t('details.lines.price') }), _jsx(TableHead, { children: t('details.lines.total') })] }) }), _jsx(TableBody, { children: currentProducts.length ? (currentProducts.map((line) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex w-max items-center gap-2", children: [_jsx(ImageWithPreview, { imageClassName: "aspect-square w-10 rounded-md object-cover w-[40px] h-[40px]", src: line.featuredAsset?.preview || line.product?.featuredAsset?.preview }), _jsx("div", { className: "font-semibold", children: line.product.name })] }) }), _jsx(TableCell, { children: line.price }), _jsx(TableCell, { children: line.priceWithTax })] }, line.id)))) : (_jsx(TableCell, { colSpan: 8, children: _jsx("div", { className: "mt-4 flex items-center justify-center", children: _jsx("span", { children: t('details.lines.noItems') }) }) })) })] })] }));
+};

package/dist/pages/shipping-methods/_components/ShippingMethodDetailView.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Input, Label, apiClient, SimpleSelect, RichTextEditor, useSettings, useDetailView, DetailViewMarker, CustomCard, CardIcons, setInArrayBy, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { CheckerCard } from "./CheckerCard";
+import { CalculatorCard } from "./CalculatorCard";
+import { TestCard } from "./TestCard";
+const SHIPPING_METHOD_FORM_KEYS = [
+    'CreateShippingMethodInput',
+    'code',
+    'translations',
+    'checker',
+    'calculator',
+    'fulfillmentHandler',
+    'customFields',
+];
+export const ShippingMethodDetailView = () => {
+    const { form, entity, fetchEntity, id } = useDetailView('shippingMethods-detail-view', ...SHIPPING_METHOD_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    const { t } = useTranslation('shippingMethods');
+    const [fulfillmentHandlersOptions, setFulfillmentHandlersOptions] = useState();
+    const { translationsLanguage: currentTranslationLng } = useSettings();
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('code', res.code);
+            setField('translations', res.translations);
+            setField('checker', {
+                arguments: res.checker?.args || [],
+                code: res.checker?.code || '',
+            });
+            setField('calculator', {
+                arguments: res.calculator?.args || [],
+                code: res.calculator?.code || '',
+            });
+            setField('fulfillmentHandler', res.fulfillmentHandlerCode);
+        })();
+    }, []);
+    const fetchFulfillmentHandlers = useCallback(async () => {
+        const response = await apiClient('query')({
+            fulfillmentHandlers: { code: true, description: true },
+        });
+        setFulfillmentHandlersOptions(response.fulfillmentHandlers.map((h) => ({
+            label: h.description,
+            value: h.code,
+        })));
+    }, []);
+    useEffect(() => {
+        fetchFulfillmentHandlers();
+    }, [id, fetchFulfillmentHandlers]);
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
+    const setTranslationField = useCallback((field, e) => {
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+            [field]: e,
+            languageCode: currentTranslationLng,
+        }));
+    }, [currentTranslationLng, translations]);
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4 p-0 pt-4", children: [_jsxs("div", { className: "flex w-full flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e.target.value), errors: state.translations?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.code'), value: state.code?.value ?? undefined, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? undefined, onContentChanged: (e) => setTranslationField('description', e) })] }), _jsx("div", { className: "flex basis-full", children: _jsx(SimpleSelect, { label: t('details.basic.fulfillmentHandler'), value: state.fulfillmentHandler?.value ?? undefined, onValueChange: (e) => setField('fulfillmentHandler', e), options: fulfillmentHandlersOptions, errors: state.fulfillmentHandler?.errors }) })] }) }), _jsx(DetailViewMarker, { position: 'shippingMethods-detail-view' }), _jsx(EntityCustomFields, { entityName: "shippingMethod", id: id, hideButton: true, onChange: (customFields, translations) => {
+                        setField('customFields', customFields);
+                        if (translations)
+                            setField('translations', translations);
+                    }, initialValues: entity && 'customFields' in entity
+                        ? { customFields: entity.customFields, translations: entity.translations }
+                        : { customFields: {} } }), _jsx(CheckerCard, { currentCheckerValue: state.checker?.value ?? undefined, onCheckerValueChange: (checker) => checker && setField('checker', checker), errors: state.checker?.errors }), _jsx(CalculatorCard, { currentCalculatorValue: state.calculator?.value ?? undefined, onCalculatorValueChange: (calculator) => calculator && setField('calculator', calculator), errors: state.calculator?.errors }), _jsx(TestCard, { calculator: state.calculator?.value ?? undefined, checker: state.checker?.value ?? undefined })] }) }));
+};

package/dist/pages/shipping-methods/_components/TestCard.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input, Separator, useServer, apiClient, CustomCard, CardIcons, useGFFLP, SimpleSelect, priceFormatter, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useState } from 'react';
+import { CircleCheck, CircleX } from 'lucide-react';
+import { Lines } from "./Lines";
+export const TestCard = ({ calculator, checker }) => {
+    const { t } = useTranslation('shippingMethods');
+    const [testResult, setTestResult] = useState();
+    const { countries } = useServer();
+    const { state, setField } = useGFFLP('TestShippingMethodInput', 'shippingAddress', 'calculator', 'checker', 'lines')({
+        shippingAddress: {
+            initialValue: {
+                countryCode: '',
+                city: '',
+                streetLine1: 'test',
+                postalCode: '',
+                province: '',
+            },
+        },
+    });
+    useEffect(() => {
+        if (calculator)
+            setField('calculator', calculator);
+        if (checker)
+            setField('checker', checker);
+    }, [calculator, checker, setField]);
+    const setAddressField = useCallback((addressField, e) => {
+        setField('shippingAddress', {
+            ...state.shippingAddress.value,
+            [addressField]: e,
+        });
+    }, [state.shippingAddress]);
+    const testShippingMethod = useCallback(async () => {
+        if (state.calculator && state.checker && state.shippingAddress && state.lines?.validatedValue) {
+            const resp = await apiClient('query')({
+                testShippingMethod: [
+                    {
+                        input: {
+                            calculator: state.calculator.validatedValue,
+                            checker: state.checker.validatedValue,
+                            lines: state.lines.validatedValue,
+                            shippingAddress: state.shippingAddress.validatedValue,
+                        },
+                    },
+                    {
+                        eligible: true,
+                        quote: {
+                            metadata: true,
+                            price: true,
+                            priceWithTax: true,
+                        },
+                    },
+                ],
+            });
+            setTestResult(resp.testShippingMethod);
+        }
+    }, [state]);
+    return (_jsx(CustomCard, { title: t('details.test.title'), icon: _jsx(CardIcons.shipping, {}), color: "cyan", bottomRight: _jsx(Button, { className: "w-48", onClick: testShippingMethod, children: t('details.test.button') }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx("div", { className: "flex flex-1 basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.test.city'), value: state.shippingAddress?.value.city ?? undefined, onChange: (e) => setAddressField('city', e.target.value), required: true }) }), _jsx("div", { className: "flex flex-1 basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.test.province'), value: state.shippingAddress?.value.province ?? undefined, onChange: (e) => setAddressField('province', e.target.value), required: true }) }), _jsx("div", { className: "flex flex-1 basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.test.postalCode'), value: state.shippingAddress?.value.postalCode ?? undefined, onChange: (e) => setAddressField('postalCode', e.target.value), required: true }) }), _jsx("div", { className: "flex flex-1 basis-full md:basis-1/3", children: _jsx(SimpleSelect, { label: t('details.test.country'), value: state.shippingAddress?.value.countryCode, onValueChange: (e) => setAddressField('countryCode', e), options: countries.map((c) => ({
+                                    label: c.name,
+                                    value: c.code,
+                                })) }) })] }), _jsx(Separator, {}), _jsx(Lines, { onLinesChange: (e) => setField('lines', e) }), testResult && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex gap-3", children: testResult.eligible ? (_jsxs(_Fragment, { children: [_jsx(CircleCheck, { color: "green" }), t('details.test.eligible')] })) : (_jsxs(_Fragment, { children: [_jsx(CircleX, { color: "red" }), t('details.test.notEligible')] })) }), _jsxs("div", { children: [_jsxs("span", { className: "font-semibold", children: [t('details.lines.price'), ":"] }), ' ', priceFormatter(testResult.quote?.price)] }), _jsxs("div", { children: [_jsxs("span", { className: "font-semibold", children: [t('details.lines.total'), ":"] }), ' ', priceFormatter(testResult.quote?.priceWithTax)] })] }))] }) }));
+};

package/dist/pages/shipping-methods/index.js

@@ -0,0 +1,2 @@
+export * from './Detail.js';
+export * from './List.js';

package/dist/pages/status/Status.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Health } from './_components/Health.js';
+import { Jobs } from './_components/Jobs.js';
+export const Status = () => {
+    return (_jsx("div", { className: "w-full p-4 md:p-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Health, {}), _jsx(Jobs, {})] }) }));
+};