bitsnap-payloadcms 0.0.0-stage → 0.1.2

package/dist/ui/BitsnapManager.js

@@ -0,0 +1,642 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Banner, Button, CopyToClipboard, FieldDescription, Pill, SelectInput, TextInput, useForm, useFormFields } from '@payloadcms/ui';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getBitsnapClientConfig } from './getBitsnapClientConfig.js';
+import './BitsnapManager.css';
+const statusLabels = {
+    DRAFT: 'Szkic',
+    UNPUBLISHED: 'Nieopublikowany',
+    PUBLISHED: 'Opublikowany'
+};
+/**
+ * Matches any field path that ends with `productID` — layout agnostic on purpose,
+ * the plugin must not depend on a specific block layout of the consuming app.
+ */ const productIDPathPattern = /(?:^|\.)productID$/;
+/**
+ * Extracts the numeric index of a block/array row out of a field path
+ * (`layout.2.productID` -> `2`). Paths without an index sort last.
+ */ const getPathIndex = (path)=>{
+    const match = /(?:^|\.)(\d+)(?:\.|$)/.exec(path);
+    if (!match || match[1] === undefined) {
+        return Number.MAX_SAFE_INTEGER;
+    }
+    return Number(match[1]);
+};
+const getProductIDPaths = (fields)=>Object.keys(fields).filter((path)=>productIDPathPattern.test(path)).sort((a, b)=>{
+        const indexA = getPathIndex(a);
+        const indexB = getPathIndex(b);
+        if (indexA !== indexB) {
+            return indexA - indexB;
+        }
+        return a.localeCompare(b);
+    });
+const groszeToZl = (grosze)=>grosze === null ? '' : (grosze / 100).toFixed(2).replace('.', ',');
+const parsePrice = (value)=>{
+    const trimmed = value.trim();
+    if (trimmed === '') return undefined;
+    const normalized = trimmed.replace(/\s/g, '').replace(',', '.');
+    const parsed = Number.parseFloat(normalized);
+    if (!Number.isFinite(parsed) || parsed < 0) return null;
+    return Math.round(parsed * 100);
+};
+const parseQuantity = (value)=>{
+    const trimmed = value.trim();
+    if (trimmed === '') return undefined;
+    const parsed = Number(trimmed);
+    if (!Number.isInteger(parsed) || parsed < 0) return null;
+    return parsed;
+};
+export const BitsnapManager = (props)=>{
+    const { dispatchFields } = useForm();
+    const { apiBaseUrl, currency, dashboardUrl } = getBitsnapClientConfig(props);
+    const description = typeof props.field.admin?.description === 'string' ? props.field.admin.description : undefined;
+    const productIDPathsKey = useFormFields(([fields])=>getProductIDPaths(fields).join(','));
+    const productIDPaths = useMemo(()=>productIDPathsKey === '' ? [] : productIDPathsKey.split(','), [
+        productIDPathsKey
+    ]);
+    const linkedProductID = useFormFields(([fields])=>{
+        for (const path of getProductIDPaths(fields)){
+            const value = fields[path]?.value;
+            if (typeof value === 'string' && value !== '') return value;
+        }
+        return null;
+    });
+    const productTitle = useFormFields(([fields])=>{
+        const value = fields.title?.value;
+        return typeof value === 'string' ? value : '';
+    });
+    const [status, setStatus] = useState('DRAFT');
+    const [price, setPrice] = useState('');
+    const [stock, setStock] = useState('');
+    const [variants, setVariants] = useState([]);
+    const [revision, setRevision] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [newName, setNewName] = useState(null);
+    const [newPrice, setNewPrice] = useState('');
+    const [newStatus, setNewStatus] = useState('DRAFT');
+    const [isCreating, setIsCreating] = useState(false);
+    const [createdProductID, setCreatedProductID] = useState(null);
+    const applyProduct = useCallback((product)=>{
+        setStatus(product.status);
+        setPrice(groszeToZl(product.priceAmount));
+        setStock(product.availableQuantity === null ? '' : String(product.availableQuantity));
+        setRevision(product.revision);
+        setVariants(product.variants.map((variant)=>({
+                id: variant.id,
+                name: variant.name,
+                price: groszeToZl(variant.priceAmount),
+                stock: variant.availableQuantity === null ? '' : String(variant.availableQuantity)
+            })));
+    }, []);
+    const load = useCallback(async ()=>{
+        if (!linkedProductID) {
+            setRevision(null);
+            setVariants([]);
+            return false;
+        }
+        setIsLoading(true);
+        setMessage(null);
+        try {
+            const response = await fetch(`${apiBaseUrl}/products/${encodeURIComponent(linkedProductID)}`);
+            const payload = await response.json();
+            if (!response.ok || !payload.product) {
+                throw new Error(payload.error ?? 'Nie udało się pobrać produktu z Bitsnapa');
+            }
+            applyProduct(payload.product);
+            return true;
+        } catch (error) {
+            setMessage({
+                tone: 'error',
+                text: error instanceof Error ? error.message : 'Nie udało się pobrać produktu z Bitsnapa'
+            });
+            return false;
+        } finally{
+            setIsLoading(false);
+        }
+    }, [
+        apiBaseUrl,
+        applyProduct,
+        linkedProductID
+    ]);
+    useEffect(()=>{
+        void load();
+    }, [
+        load
+    ]);
+    const save = useCallback(async ()=>{
+        if (!linkedProductID || revision === null) return;
+        const priceAmount = parsePrice(price);
+        const availableQuantity = parseQuantity(stock);
+        if (priceAmount === null) {
+            setMessage({
+                tone: 'error',
+                text: 'Cena bazowa musi być liczbą'
+            });
+            return;
+        }
+        if (availableQuantity === null) {
+            setMessage({
+                tone: 'error',
+                text: 'Limit sztuk musi być liczbą'
+            });
+            return;
+        }
+        const payloadVariants = [];
+        for (const variant of variants){
+            const name = variant.name.trim();
+            const variantPrice = parsePrice(variant.price);
+            const variantStock = parseQuantity(variant.stock);
+            if (name === '') {
+                setMessage({
+                    tone: 'error',
+                    text: 'Nazwa wariantu jest wymagana'
+                });
+                return;
+            }
+            if (variantPrice === null || variantPrice === undefined) {
+                setMessage({
+                    tone: 'error',
+                    text: `Cena wariantu „${name}” jest wymagana`
+                });
+                return;
+            }
+            if (variantStock === null) {
+                setMessage({
+                    tone: 'error',
+                    text: `Limit sztuk wariantu „${name}” musi być liczbą`
+                });
+                return;
+            }
+            payloadVariants.push({
+                ...variant.id ? {
+                    id: variant.id
+                } : {},
+                name,
+                priceAmount: variantPrice,
+                priceCurrency: currency,
+                ...variantStock === undefined ? {} : {
+                    availableQuantity: variantStock
+                }
+            });
+        }
+        setIsSaving(true);
+        setMessage(null);
+        try {
+            const response = await fetch(`${apiBaseUrl}/products/${encodeURIComponent(linkedProductID)}`, {
+                body: JSON.stringify({
+                    revision,
+                    status,
+                    ...priceAmount === undefined ? {} : {
+                        priceAmount
+                    },
+                    ...availableQuantity === undefined ? {} : {
+                        availableQuantity
+                    },
+                    variants: payloadVariants
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                method: 'PATCH'
+            });
+            const payload = await response.json();
+            if (!response.ok) {
+                if (response.status === 409) {
+                    setMessage({
+                        tone: 'error',
+                        text: 'Produkt zmienił się w Bitsnap — kliknij Odśwież'
+                    });
+                    return;
+                }
+                throw new Error(payload.error ?? 'Nie udało się zapisać produktu w Bitsnapie');
+            }
+            const reloaded = await load();
+            if (reloaded) {
+                setMessage({
+                    tone: 'success',
+                    text: 'Zapisano w Bitsnapie'
+                });
+            }
+        } catch (error) {
+            setMessage({
+                tone: 'error',
+                text: error instanceof Error ? error.message : 'Nie udało się zapisać produktu w Bitsnapie'
+            });
+        } finally{
+            setIsSaving(false);
+        }
+    }, [
+        apiBaseUrl,
+        currency,
+        linkedProductID,
+        load,
+        price,
+        revision,
+        status,
+        stock,
+        variants
+    ]);
+    const create = useCallback(async ()=>{
+        const name = (newName ?? productTitle).trim();
+        const priceAmount = parsePrice(newPrice);
+        if (name === '') {
+            setMessage({
+                tone: 'error',
+                text: 'Podaj nazwę produktu'
+            });
+            return;
+        }
+        if (priceAmount === null || priceAmount === undefined) {
+            setMessage({
+                tone: 'error',
+                text: 'Podaj cenę produktu w zł'
+            });
+            return;
+        }
+        setIsCreating(true);
+        setMessage(null);
+        try {
+            const response = await fetch(`${apiBaseUrl}/products`, {
+                body: JSON.stringify({
+                    name,
+                    priceAmount,
+                    priceCurrency: currency,
+                    status: newStatus
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                method: 'POST'
+            });
+            const payload = await response.json();
+            if (!response.ok || !payload.id) {
+                throw new Error(payload.error ?? 'Nie udało się utworzyć produktu w Bitsnapie');
+            }
+            setCreatedProductID(payload.id);
+            const targetPath = productIDPaths[0];
+            if (targetPath) {
+                dispatchFields({
+                    path: targetPath,
+                    type: 'UPDATE',
+                    value: payload.id
+                });
+                setMessage({
+                    tone: 'success',
+                    text: `Utworzono produkt ${payload.id} i przypisano go do bloku produktu`
+                });
+            } else {
+                setMessage({
+                    tone: 'success',
+                    text: `Utworzono produkt ${payload.id}. Dodaj blok produktu i wybierz ten produkt.`
+                });
+            }
+        } catch (error) {
+            setMessage({
+                tone: 'error',
+                text: error instanceof Error ? error.message : 'Nie udało się utworzyć produktu w Bitsnapie'
+            });
+        } finally{
+            setIsCreating(false);
+        }
+    }, [
+        apiBaseUrl,
+        currency,
+        dispatchFields,
+        newName,
+        newPrice,
+        newStatus,
+        productIDPaths,
+        productTitle
+    ]);
+    const updateVariant = (index, patch)=>{
+        setVariants((current)=>current.map((variant, variantIndex)=>variantIndex === index ? {
+                    ...variant,
+                    ...patch
+                } : variant));
+    };
+    const statusOptions = Object.keys(statusLabels).map((option)=>({
+            label: statusLabels[option],
+            value: option
+        }));
+    const renderStatusSelect = (value, onChange, path)=>/*#__PURE__*/ _jsx(SelectInput, {
+            isClearable: false,
+            label: "Status",
+            name: path,
+            onChange: (option)=>{
+                const next = Array.isArray(option) ? undefined : option?.value;
+                if (next === 'DRAFT' || next === 'UNPUBLISHED' || next === 'PUBLISHED') {
+                    onChange(next);
+                }
+            },
+            options: statusOptions,
+            path: path,
+            value: value
+        });
+    const header = /*#__PURE__*/ _jsx("div", {
+        className: "group-field__header",
+        children: /*#__PURE__*/ _jsxs("header", {
+            children: [
+                /*#__PURE__*/ _jsx("h3", {
+                    className: "group-field__title",
+                    children: typeof props.field.label === 'string' ? props.field.label : 'Bitsnap'
+                }),
+                /*#__PURE__*/ _jsx(FieldDescription, {
+                    path: props.path,
+                    description: description
+                })
+            ]
+        })
+    });
+    const banner = message && /*#__PURE__*/ _jsx(Banner, {
+        type: message.tone === 'error' ? 'error' : 'success',
+        children: message.text
+    });
+    if (!linkedProductID) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "group-field group-field--top-level bitsnap-manager",
+            children: [
+                header,
+                /*#__PURE__*/ _jsx("p", {
+                    className: "bitsnap-manager__lead",
+                    children: "Ten produkt nie jest jeszcze powiązany z Bitsnapem. Utwórz go tutaj — id trafi do bloku produktu."
+                }),
+                banner,
+                /*#__PURE__*/ _jsx("div", {
+                    className: "field-type row",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "row__fields",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "bitsnap-manager__col--half",
+                                children: /*#__PURE__*/ _jsx(TextInput, {
+                                    label: "Nazwa",
+                                    onChange: (event)=>setNewName(event.target.value),
+                                    path: "bitsnapManager.newName",
+                                    value: newName ?? productTitle
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "bitsnap-manager__col--quarter",
+                                children: /*#__PURE__*/ _jsx(TextInput, {
+                                    label: "Cena (zł)",
+                                    onChange: (event)=>setNewPrice(event.target.value),
+                                    path: "bitsnapManager.newPrice",
+                                    placeholder: "49,00",
+                                    value: newPrice
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "bitsnap-manager__col--quarter",
+                                children: renderStatusSelect(newStatus, setNewStatus, 'bitsnapManager.newStatus')
+                            })
+                        ]
+                    })
+                }),
+                createdProductID && productIDPaths.length === 0 && /*#__PURE__*/ _jsxs(Banner, {
+                    type: "info",
+                    children: [
+                        "Dodaj blok produktu (np. Zdjęcie produktu) i wybierz w nim produkt ",
+                        createdProductID,
+                        "."
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "bitsnap-manager__actions",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "primary",
+                        disabled: isCreating,
+                        onClick: ()=>{
+                            void create();
+                        },
+                        children: isCreating ? 'Tworzenie…' : 'Utwórz produkt w Bitsnap'
+                    })
+                })
+            ]
+        });
+    }
+    const isInitialLoad = isLoading && revision === null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "group-field group-field--top-level bitsnap-manager",
+        children: [
+            header,
+            banner,
+            isInitialLoad ? /*#__PURE__*/ _jsxs("div", {
+                className: "bitsnap-manager__loading",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "bitsnap-manager__loading-row"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "bitsnap-manager__loading-row"
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "field-type row",
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "row__fields",
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "bitsnap-manager__col--third",
+                                    children: renderStatusSelect(status, setStatus, 'bitsnapManager.status')
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "bitsnap-manager__col--third",
+                                    children: /*#__PURE__*/ _jsx(TextInput, {
+                                        label: "Cena bazowa (zł)",
+                                        onChange: (event)=>setPrice(event.target.value),
+                                        path: "bitsnapManager.price",
+                                        placeholder: "49,00",
+                                        value: price
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "bitsnap-manager__col--third",
+                                    children: /*#__PURE__*/ _jsx(TextInput, {
+                                        description: "Sprzedane i zarezerwowane sztuki są od niego odejmowane. Puste pole — bez zmian.",
+                                        label: "Limit sztuk (łącznie)",
+                                        onChange: (event)=>setStock(event.target.value),
+                                        path: "bitsnapManager.stock",
+                                        placeholder: "np. 100",
+                                        value: stock
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("section", {
+                        "aria-labelledby": "bitsnap-variants-title",
+                        className: "bitsnap-manager__variants",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "bitsnap-manager__variants-header",
+                                children: [
+                                    /*#__PURE__*/ _jsx("h4", {
+                                        className: "bitsnap-manager__variants-title",
+                                        id: "bitsnap-variants-title",
+                                        children: "Warianty"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Pill, {
+                                        size: "small",
+                                        children: variants.length
+                                    })
+                                ]
+                            }),
+                            variants.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                                className: "bitsnap-manager__empty",
+                                children: "Brak wariantów — produkt sprzedaje się w jednej wersji."
+                            }) : /*#__PURE__*/ _jsxs("div", {
+                                className: "bitsnap-manager__grid",
+                                role: "table",
+                                "aria-label": "Warianty",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "bitsnap-manager__grid-head",
+                                        role: "row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "field-label",
+                                                role: "columnheader",
+                                                children: "Nazwa"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "field-label",
+                                                role: "columnheader",
+                                                children: "Cena (zł)"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "field-label",
+                                                role: "columnheader",
+                                                children: "Limit sztuk"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                role: "columnheader",
+                                                className: "bitsnap-manager__sr-only",
+                                                children: "Akcje"
+                                            })
+                                        ]
+                                    }),
+                                    variants.map((variant, index)=>/*#__PURE__*/ _jsxs("div", {
+                                            className: "bitsnap-manager__grid-row",
+                                            role: "row",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    role: "cell",
+                                                    children: /*#__PURE__*/ _jsx(TextInput, {
+                                                        onChange: (event)=>updateVariant(index, {
+                                                                name: event.target.value
+                                                            }),
+                                                        path: `bitsnapManager.variants.${index}.name`,
+                                                        placeholder: `Wariant ${index + 1}, np. M`,
+                                                        value: variant.name
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    role: "cell",
+                                                    children: /*#__PURE__*/ _jsx(TextInput, {
+                                                        onChange: (event)=>updateVariant(index, {
+                                                                price: event.target.value
+                                                            }),
+                                                        path: `bitsnapManager.variants.${index}.price`,
+                                                        placeholder: "49,00",
+                                                        value: variant.price
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    role: "cell",
+                                                    children: /*#__PURE__*/ _jsx(TextInput, {
+                                                        onChange: (event)=>updateVariant(index, {
+                                                                stock: event.target.value
+                                                            }),
+                                                        path: `bitsnapManager.variants.${index}.stock`,
+                                                        placeholder: "np. 10",
+                                                        value: variant.stock
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    role: "cell",
+                                                    className: "bitsnap-manager__remove",
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        "aria-label": `Usuń wariant ${variant.name || index + 1}`,
+                                                        buttonStyle: "icon-label",
+                                                        icon: "x",
+                                                        onClick: ()=>setVariants((current)=>current.filter((_, i)=>i !== index)),
+                                                        round: true,
+                                                        tooltip: "Usuń wariant"
+                                                    })
+                                                })
+                                            ]
+                                        }, variant.id ?? `new-${index}`))
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "icon-label",
+                                icon: "plus",
+                                iconPosition: "left",
+                                iconStyle: "with-border",
+                                onClick: ()=>setVariants((current)=>[
+                                            ...current,
+                                            {
+                                                name: '',
+                                                price: '',
+                                                stock: ''
+                                            }
+                                        ]),
+                                children: "Dodaj wariant"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "bitsnap-manager__actions",
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "primary",
+                        disabled: isSaving || isLoading || revision === null,
+                        onClick: ()=>{
+                            void save();
+                        },
+                        children: isSaving ? 'Zapisywanie…' : 'Zapisz w Bitsnap'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "secondary",
+                        disabled: isLoading || isSaving,
+                        onClick: ()=>{
+                            void load();
+                        },
+                        children: isLoading && !isInitialLoad ? 'Odświeżanie…' : 'Odśwież'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "subtle",
+                        className: "bitsnap-manager__open",
+                        el: "anchor",
+                        newTab: true,
+                        url: `${dashboardUrl}/app/product/${encodeURIComponent(linkedProductID)}`,
+                        children: "Otwórz w Bitsnap"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "bitsnap-manager__meta",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        children: "Produkt w Bitsnap"
+                    }),
+                    /*#__PURE__*/ _jsx("code", {
+                        children: linkedProductID
+                    }),
+                    /*#__PURE__*/ _jsx(CopyToClipboard, {
+                        value: linkedProductID
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=BitsnapManager.js.map