@deenruv/order-line-attributes-plugin 1.0.0

package/dist/plugin-server/zeus/typedDocumentNode.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/plugin-server/zeus/typedDocumentNode.js

@@ -0,0 +1,31 @@
+"use strict";
+// /* eslint-disable */
+// import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+// import gql from 'graphql-tag';
+// import {
+//   ValueTypes,
+//   GenericOperation,
+//   OperationOptions,
+//   GraphQLTypes,
+//   InputType,
+//   ScalarDefinition,
+//   ThunderGraphQLOptions,
+//   Zeus,
+//   ExtractVariables,
+// } from './';
+// import { Ops } from './const';
+Object.defineProperty(exports, "__esModule", { value: true });
+// export const typedGql =
+//   <O extends keyof typeof Ops, SCLR extends ScalarDefinition, R extends keyof ValueTypes = GenericOperation<O>>(
+//     operation: O,
+//     graphqlOptions?: ThunderGraphQLOptions<SCLR>,
+//   ) =>
+//   <Z extends ValueTypes[R]>(o: Z & {
+//     [P in keyof Z]: P extends keyof ValueTypes[R] ? Z[P] : never;
+//   }, ops?: OperationOptions) => {
+//     const str = Zeus(operation, o, {
+//       operationOptions: ops,
+//       scalars: graphqlOptions?.scalars,
+//     });
+//     return gql(str) as TypedDocumentNode<InputType<GraphQLTypes[R], Z, SCLR>, ExtractVariables<Z>>;
+//   };

package/dist/plugin-ui/components/AttributesInput.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type FacetValueData = {
+    id: string;
+    code: string;
+    name: string;
+    hexColor?: string;
+    imagePreview?: string;
+};
+export type Data = {
+    id: string;
+    code: string;
+    name: string;
+    usedForProductCreations: boolean;
+    facetValues: FacetValueData[];
+};
+export declare const AttributesInput: React.FC;

package/dist/plugin-ui/components/AttributesInput.js

@@ -0,0 +1,24 @@
+import { useCustomFields } from "@deenruv/react-ui-devkit";
+import React, { useMemo } from "react";
+import { FacetValues } from "./FacetValues";
+export const AttributesInput = () => {
+    const { disabled, setValue, value, additionalData } = useCustomFields();
+    const parsedValues = useMemo(() => {
+        if (!value || value === "")
+            return undefined;
+        try {
+            const parsed = JSON.parse(value);
+            if (Object.keys(parsed).length === 0)
+                return undefined;
+            return parsed;
+        }
+        catch (e) {
+            return undefined;
+        }
+    }, [value]);
+    return (React.createElement("div", { className: "flex flex-col gap-4" },
+        React.createElement(FacetValues, { disabled: disabled, value: value, setValue: setValue, additionalData: additionalData }),
+        React.createElement("div", { className: "flex flex-col gap-2" }, parsedValues ? (Object.entries(parsedValues).map(([key, value]) => (React.createElement("div", { key: key, className: "flex gap-2" },
+            React.createElement("span", { className: "capitalize" }, key),
+            React.createElement("span", { className: "capitalize" }, value))))) : (React.createElement("span", null, "There are no attributes")))));
+};

package/dist/plugin-ui/components/FacetValues.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface FacetsAccordionsProps {
+    setValue: (value: string) => void;
+    value?: string | null;
+    additionalData?: Record<string, unknown>;
+    disabled?: boolean;
+}
+export declare const FacetValues: React.FC<FacetsAccordionsProps>;
+export {};

package/dist/plugin-ui/components/FacetValues.js

@@ -0,0 +1,126 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, Input, Label, useLazyQuery, } from "@deenruv/react-ui-devkit";
+import { translationNS } from "../translation-ns";
+import { ProductFacetValuesQuery } from "../graphql/queries";
+import { GroupValue } from "./GroupValue";
+import { Trash } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+const match = (facetValues) => {
+    if (!facetValues)
+        return [];
+    const facets = facetValues.reduce((acc, item) => {
+        const facet = acc.find((f) => f.id === item.facet.id);
+        const newItem = {
+            code: item.code,
+            id: item.id,
+            name: item.name,
+            hexColor: item.customFields?.hexColor || "",
+            imagePreview: item.customFields?.image?.preview ||
+                "",
+        };
+        if (facet) {
+            facet.facetValues.push(newItem);
+        }
+        else {
+            acc.push({
+                id: item.facet.id,
+                code: item.facet.code,
+                name: item.facet.name,
+                usedForProductCreations: !!item.facet.customFields?.usedForProductCreations,
+                facetValues: [newItem],
+            });
+        }
+        return acc;
+    }, []);
+    return facets;
+};
+export const FacetValues = ({ disabled, additionalData, setValue, value, }) => {
+    const { t } = useTranslation(translationNS);
+    const [fetchFacetValues, { loading }] = useLazyQuery(ProductFacetValuesQuery);
+    const id = additionalData?.product &&
+        typeof additionalData.product === "object" &&
+        "id" in additionalData.product
+        ? additionalData.product.id
+        : null;
+    const [facets, setFacets] = useState([]);
+    const currentValue = useMemo(() => value ? JSON.parse(value) : {}, [value]);
+    const [defined, setDefined] = useState({});
+    const [custom, setCustom] = useState([]);
+    useEffect(() => {
+        if (!id || facets.length)
+            return;
+        fetchFacetValues({ productId: id })
+            .then((resp) => {
+            setFacets(match(resp.product?.facetValues));
+        })
+            .catch();
+    }, [id]);
+    useEffect(() => {
+        if (!facets)
+            return;
+        const defined = Object.keys(currentValue)
+            .filter((i) => facets.some((a) => a.code === i))
+            .reduce((acc, val) => ({ ...acc, [val]: currentValue[val] }), {});
+        setDefined(defined);
+        const custom = Object.keys(currentValue)
+            .filter((i) => !facets.some((a) => a.code === i))
+            .map((i) => ({ id: uuidv4(), value: currentValue[i], key: i }));
+        setCustom(custom);
+    }, [facets, currentValue]);
+    const onCustomChange = (id, key, value) => {
+        if (!id)
+            return;
+        const newCustomValues = custom.filter((i) => i.id !== id);
+        if (key && value) {
+            newCustomValues.push({ id, key, value });
+        }
+        setCustom(newCustomValues);
+        setValue(JSON.stringify({
+            ...defined,
+            ...newCustomValues.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {}),
+        }));
+    };
+    const onDefinedChange = (key, value) => {
+        const newDefined = { ...defined, [key]: value };
+        setDefined(newDefined);
+        setValue(JSON.stringify({
+            ...newDefined,
+            ...custom.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {}),
+        }));
+    };
+    if (!facets.length)
+        return null;
+    return (React.createElement(Dialog, null,
+        React.createElement(DialogTrigger, { asChild: true },
+            React.createElement(Button, { disabled: disabled, variant: "outline" }, t("custom.editAttributes"))),
+        React.createElement(DialogContent, { className: "w-[800px] max-w-[800px]" },
+            React.createElement(DialogHeader, null,
+                React.createElement(DialogTitle, null, t("custom.editAttributes")),
+                React.createElement(DialogDescription, null, t("custom.editAttributesDescription"))),
+            React.createElement("div", { className: "flex h-full flex-col overflow-auto" },
+                React.createElement("div", { className: "flex items-center justify-between gap-4 pb-2 " },
+                    React.createElement(Button, { variant: "secondary", className: "w-min", onClick: () => onCustomChange(uuidv4()) }, t("custom.addCustomKey")),
+                    React.createElement(Label, null, t("custom.customAdditional", { value: custom.length }))),
+                React.createElement("div", { className: "grow overflow-y-auto py-2  pr-4" },
+                    React.createElement("div", { className: "flex flex-col gap-4" },
+                        React.createElement("div", { className: "flex flex-col gap-4 border-b pb-4 " }, custom.map((i) => (React.createElement("div", { className: "flex items-center justify-start gap-4 ", key: i.id },
+                            React.createElement(Input, { label: t("custom.customKey"), value: i.key, onChange: (e) => {
+                                    onCustomChange(i.id, e.currentTarget.value, i.value);
+                                } }),
+                            React.createElement(Input, { label: t("custom.customValue"), value: i.value, onChange: (e) => {
+                                    onCustomChange(i.id, i.key, e.currentTarget.value);
+                                } }),
+                            React.createElement(Trash, { className: "mt-[20px] shrink-0 cursor-pointer text-red-600", onClick: () => {
+                                    onCustomChange(i.id);
+                                } }))))),
+                        facets.map((facet) => {
+                            const isCustom = !facet.facetValues.some((i) => i.code === defined[facet.code]);
+                            return (React.createElement("div", { key: facet.id, className: "border-b pb-2" },
+                                React.createElement("div", { className: "mb-2 font-bold" }, facet.name),
+                                React.createElement("div", { className: "grid  grid-cols-4 items-center gap-2" }, facet.facetValues.map((value) => (React.createElement(GroupValue, { key: value.id, entry: value, isValueSelected: defined[facet.code] === value.code, handleFacetValueSelect: () => onDefinedChange(facet.code, value.code) })))),
+                                React.createElement("div", { className: "my-2 flex items-center gap-2" },
+                                    React.createElement("span", { className: "shrink-0" }, t("custom.customLabel")),
+                                    React.createElement(Input, { placeholder: t("custom.customPlaceholder"), value: isCustom ? defined[facet.code] : "", onChange: (e) => onDefinedChange(facet.code, e.currentTarget.value) }))));
+                        })))))));
+};

package/dist/plugin-ui/components/GroupValue.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FacetValueData } from "./AttributesInput";
+export declare const GroupValue: ({ entry, handleFacetValueSelect, isValueSelected, }: {
+    entry: FacetValueData;
+    handleFacetValueSelect: () => void;
+    isValueSelected: boolean;
+}) => React.JSX.Element;

package/dist/plugin-ui/components/GroupValue.js

@@ -0,0 +1,13 @@
+import { Checkbox, HoverCard, HoverCardContent, HoverCardTrigger, cn, } from "@deenruv/react-ui-devkit";
+import React from "react";
+export const GroupValue = ({ entry, handleFacetValueSelect, isValueSelected, }) => {
+    return (React.createElement("div", { className: "flex items-center gap-2 px-1" },
+        React.createElement(Checkbox, { id: entry.id, checked: isValueSelected, onCheckedChange: handleFacetValueSelect }),
+        React.createElement("label", { htmlFor: entry.id },
+            React.createElement(HoverCard, { openDelay: 300 },
+                React.createElement(HoverCardTrigger, { asChild: true },
+                    React.createElement("div", { className: "flex items-center gap-2" },
+                        entry.imagePreview ? (React.createElement("img", { className: "size-5 rounded-full", src: entry.imagePreview || "placeholder" })) : (React.createElement("div", { className: "size-5 shrink-0 rounded-full border border-[rgba(0,0,0,0.4)]", style: { backgroundColor: entry?.hexColor || "transparent" } })),
+                        React.createElement("div", { className: "" }, entry.name))),
+                React.createElement(HoverCardContent, { className: cn("w-80 p-0", !entry.imagePreview && "h-40 w-40") }, entry?.imagePreview ? (React.createElement("img", { className: "rounded object-cover", src: entry.imagePreview || "placeholder" })) : (React.createElement("div", { className: "size-40 rounded", style: { backgroundColor: entry?.hexColor || "transparent" } })))))));
+};

package/dist/plugin-ui/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./FacetValues";
+export * from "./GroupValue";
+export * from "./AttributesInput";

package/dist/plugin-ui/components/index.js

@@ -0,0 +1,3 @@
+export * from "./FacetValues";
+export * from "./GroupValue";
+export * from "./AttributesInput";

package/dist/plugin-ui/graphql/index.d.ts

@@ -0,0 +1 @@
+export * from "./selectors";

package/dist/plugin-ui/graphql/index.js

@@ -0,0 +1 @@
+export * from "./selectors";

package/dist/plugin-ui/graphql/queries.d.ts

@@ -0,0 +1,24 @@
+export declare const ProductFacetValuesQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    product?: {
+        slug: string;
+        facetValues: {
+            id: string;
+            customFields?: {
+                hexColor?: string | null | undefined;
+                image: never;
+            } | undefined;
+            name: string;
+            code: string;
+            facet: {
+                id: string;
+                customFields?: {
+                    usedForProductCreations?: boolean | null | undefined;
+                } | undefined;
+                name: string;
+                code: string;
+            };
+        }[];
+    } | undefined;
+}, {} & {
+    productId: {};
+}>;

package/dist/plugin-ui/graphql/queries.js

@@ -0,0 +1,7 @@
+import { typedGql } from "../zeus/typedDocumentNode";
+import { $ } from "../zeus";
+import { scalars } from "@deenruv/admin-types";
+import { ProductFacetValueSelector } from "./selectors";
+export const ProductFacetValuesQuery = typedGql("query", { scalars })({
+    product: [{ id: $("productId", "ID!") }, ProductFacetValueSelector],
+});

package/dist/plugin-ui/graphql/selectors.d.ts

@@ -0,0 +1,54 @@
+import { FromSelector } from "../zeus";
+declare const FacetSelector: {
+    id: true;
+    name: true;
+    code: true;
+    customFields: {
+        usedForProductCreations: true;
+    };
+};
+declare const FacetValueSelector: {
+    id: true;
+    name: true;
+    code: true;
+    customFields: {
+        hexColor: true;
+        image: {
+            preview: boolean;
+        };
+    };
+    facet: {
+        id: true;
+        name: true;
+        code: true;
+        customFields: {
+            usedForProductCreations: true;
+        };
+    };
+};
+export declare const ProductFacetValueSelector: {
+    slug: true;
+    facetValues: {
+        id: true;
+        name: true;
+        code: true;
+        customFields: {
+            hexColor: true;
+            image: {
+                preview: boolean;
+            };
+        };
+        facet: {
+            id: true;
+            name: true;
+            code: true;
+            customFields: {
+                usedForProductCreations: true;
+            };
+        };
+    };
+};
+export type ProductFacetValueType = FromSelector<typeof ProductFacetValueSelector, "Product">;
+export type FacetValueType = FromSelector<typeof FacetValueSelector, "FacetValue">;
+export type FacetType = FromSelector<typeof FacetSelector, "Facet">;
+export {};

package/dist/plugin-ui/graphql/selectors.js

@@ -0,0 +1,25 @@
+import { Selector } from "../zeus";
+const FacetSelector = Selector("Facet")({
+    id: true,
+    name: true,
+    code: true,
+    customFields: {
+        usedForProductCreations: true,
+    },
+});
+const FacetValueSelector = Selector("FacetValue")({
+    id: true,
+    name: true,
+    code: true,
+    customFields: {
+        hexColor: true,
+        image: {
+            preview: true,
+        },
+    },
+    facet: FacetSelector,
+});
+export const ProductFacetValueSelector = Selector("Product")({
+    slug: true,
+    facetValues: FacetValueSelector,
+});

package/dist/plugin-ui/index.d.ts

@@ -0,0 +1 @@
+export declare const OrderLineAttributesUiPlugin: import("@deenruv/react-ui-devkit").DeenruvUIPlugin<Record<string, any>>;

package/dist/plugin-ui/index.js

@@ -0,0 +1,11 @@
+import { createDeenruvUIPlugin } from "@deenruv/react-ui-devkit";
+import pl from "./locales/pl";
+import en from "./locales/en";
+import { translationNS } from "./translation-ns";
+import { AttributesInput } from "./components/AttributesInput";
+export const OrderLineAttributesUiPlugin = createDeenruvUIPlugin({
+    version: "1.0.0",
+    name: "Order Line Attributes",
+    inputs: [{ id: "attributes-input", component: AttributesInput }],
+    translations: { ns: translationNS, data: { en, pl } },
+});

package/dist/plugin-ui/locales/en/facetValues.json

@@ -0,0 +1,12 @@
+{
+    "custom": {
+        "customLabel": "Custom value",
+        "customPlaceholder": "Value",
+        "addCustomKey": "Add custom attribute",
+        "customKey": "Key",
+        "customValue": "Value",
+        "customAdditional": "Additional custom attributes: {{value}}",
+        "editAttributes": "Edit attributes",
+        "editAttributesDescription": "Edit custom attributes"
+    }
+}

package/dist/plugin-ui/locales/en/index.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    custom: {
+        customLabel: string;
+        customPlaceholder: string;
+        addCustomKey: string;
+        customKey: string;
+        customValue: string;
+        customAdditional: string;
+        editAttributes: string;
+        editAttributesDescription: string;
+    };
+}[];
+export default _default;

package/dist/plugin-ui/locales/en/index.js

@@ -0,0 +1,2 @@
+import facetValues from "./facetValues.json";
+export default [facetValues];

package/dist/plugin-ui/locales/pl/facetValues.json

@@ -0,0 +1,12 @@
+{
+    "custom": {
+        "customLabel": "Wartość niestandardowa",
+        "customPlaceholder": "Wartość",
+        "addCustomKey": "Dodaj atrybut niestandardowy",
+        "customKey": "Klucz",
+        "customValue": "Wartość",
+        "customAdditional": "Dodatkowe atrybuty niestandardowe: {{value}}",
+        "editAttributes": "Edytuj atrybuty",
+        "editAttributesDescription": "Edytuj atrybuty niestandardowe"
+    }
+}

package/dist/plugin-ui/locales/pl/index.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    custom: {
+        customLabel: string;
+        customPlaceholder: string;
+        addCustomKey: string;
+        customKey: string;
+        customValue: string;
+        customAdditional: string;
+        editAttributes: string;
+        editAttributesDescription: string;
+    };
+}[];
+export default _default;

package/dist/plugin-ui/locales/pl/index.js

@@ -0,0 +1,2 @@
+import facetValues from "./facetValues.json";
+export default [facetValues];

package/dist/plugin-ui/translation-ns.d.ts

@@ -0,0 +1 @@
+export declare const translationNS: string;

package/dist/plugin-ui/translation-ns.js

@@ -0,0 +1 @@
+export const translationNS = Symbol("order-line-attributes-plugin").toString();

package/dist/plugin-ui/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "target": "ES2020",
+        "jsx": "react",
+        "outDir": "../../dist/plugin-ui",
+        "importHelpers": true,
+        "declaration": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noImplicitAny": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["./**/*.tsx", "./**/*.json", "./**/*.ts"]
+}

package/dist/plugin-ui/zeus/const.d.ts

@@ -0,0 +1,6 @@
+export declare const AllTypesProps: Record<string, any>;
+export declare const ReturnTypes: Record<string, any>;
+export declare const Ops: {
+    query: "Query";
+    mutation: "Mutation";
+};