@deenruv/reviews-plugin 1.0.0

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

@@ -0,0 +1,166 @@
+import { Badge, CLOSED_WITHOUT_RESOLUTION, createDialogFromComponent, DetailList, formatDate, useDetailView, useLazyQuery, useMutation, } from "@deenruv/react-ui-devkit";
+import React from "react";
+import { ChangeReviewsStateMutation, ChangeReviewStateMutation, ListReviewQuery, } from "../graphql";
+import { useTranslation } from "react-i18next";
+import { TRANSLATION_NAMESPACE } from "../constants.js";
+import { REVIEWS_ROUTES } from "../index.js";
+import { ReplaceAllIcon, ReplaceIcon } from "lucide-react";
+import { UniversalSelectDialog } from "./UniversalSelectDialog";
+export const ReviewCustomer = () => {
+    const { t } = useTranslation(TRANSLATION_NAMESPACE, {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    const [fetch] = useLazyQuery(ListReviewQuery);
+    const [changeReviewState] = useMutation(ChangeReviewStateMutation);
+    const [changeReviewsState] = useMutation(ChangeReviewsStateMutation);
+    const { id } = useDetailView("customers-detail-view");
+    return (React.createElement(DetailList, { entityName: "Review", tableId: "reviews-list-view", filterFields: [
+            {
+                key: "productId",
+                operator: "IDOperators",
+                translation: t("list.productId"),
+            },
+            {
+                key: "orderId",
+                operator: "IDOperators",
+                translation: t("list.orderId"),
+            },
+        ], createPermissions: [], deletePermissions: [], detailLinkColumn: "id", noCreateButton: true, route: REVIEWS_ROUTES, hideColumns: ["product", "order"], suggestedOrderColumns: {
+            reviewFor: 1,
+            rating: 2,
+            state: 3,
+        }, additionalBulkActions: [
+            {
+                label: t("list.bulkStateChange"),
+                icon: React.createElement(ReplaceAllIcon, { className: "w-4 h-4" }),
+                onClick: async ({ table }) => {
+                    try {
+                        const ids = Object.entries(table.getState().rowSelection)
+                            .map(([key, value]) => {
+                            if (value)
+                                return key;
+                        })
+                            .filter(Boolean);
+                        if (ids.length === 0) {
+                            throw new Error(t("dialog.bulkStateChangeNoSelection"));
+                        }
+                        const { value } = await createDialogFromComponent((UniversalSelectDialog), {
+                            title: t("dialog.bulkStateChangeTitle"),
+                            description: t("dialog.bulkStateChangeDescription"),
+                            selectLabel: t("dialog.bulkStateChangeSelectLabel"),
+                            selectPlaceholder: t("dialog.bulkStateChangeSelectPlaceholder"),
+                            options: [
+                                { label: t("state.accepted"), value: "ACCEPTED" /* ReviewState.ACCEPTED */ },
+                                { label: t("state.declined"), value: "DECLINED" /* ReviewState.DECLINED */ },
+                            ],
+                        });
+                        await changeReviewsState({
+                            input: ids.map((id) => ({ id, state: value })),
+                        });
+                        return { success: t("dialog.bulkStateChangeSuccess") };
+                    }
+                    catch (e) {
+                        const message = e instanceof Error ? e.message : e;
+                        if (typeof message === "string" &&
+                            message.includes(CLOSED_WITHOUT_RESOLUTION)) {
+                            return { info: t("dialog.bulkStateChangeCancelled") };
+                        }
+                        return { error: t("dialog.bulkStateChangeError") };
+                    }
+                },
+            },
+        ], additionalRowActions: [
+            {
+                label: t("list.stateChange"),
+                icon: React.createElement(ReplaceIcon, { className: "w-4 h-4" }),
+                onClick: async ({ row }) => {
+                    try {
+                        if (!row.original.id) {
+                            throw new Error(t("dialog.singleStateChangeNoSelection"));
+                        }
+                        const { value } = await createDialogFromComponent((UniversalSelectDialog), {
+                            title: t("dialog.singleStateChangeTitle"),
+                            description: t("dialog.singleStateChangeDescription"),
+                            selectLabel: t("dialog.singleStateChangeSelectLabel"),
+                            selectPlaceholder: t("dialog.singleStateChangeSelectPlaceholder"),
+                            options: [
+                                { label: t("state.accepted"), value: "ACCEPTED" /* ReviewState.ACCEPTED */ },
+                                { label: t("state.declined"), value: "DECLINED" /* ReviewState.DECLINED */ },
+                            ],
+                        });
+                        await changeReviewState({
+                            input: { id: row.original.id, state: value },
+                        });
+                        return { success: t("dialog.singleStateChangeSuccess") };
+                    }
+                    catch (e) {
+                        const message = e instanceof Error ? e.message : e;
+                        if (typeof message === "string" &&
+                            message.includes(CLOSED_WITHOUT_RESOLUTION)) {
+                            return { info: t("dialog.singleStateChangeCancelled") };
+                        }
+                        return { error: t("dialog.singleStateChangeError") };
+                    }
+                },
+            },
+        ], additionalColumns: [
+            {
+                accessorKey: "reviewFor",
+                header: t("list.reviewFor"),
+                cell: ({ row }) => {
+                    const product = row.original.product;
+                    const order = row.original.order;
+                    return (React.createElement("div", null, product ? (React.createElement(Badge, { variant: "secondary" }, product.name)) : order ? (React.createElement(Badge, { variant: "secondary" }, t("list.orderReview", { orderId: order.id }))) : (React.createElement(Badge, null, t("list.shopReview")))));
+                },
+            },
+            {
+                accessorKey: "responseCreatedAt",
+                header: t("list.responseCreatedAt"),
+                cell: ({ row }) => {
+                    const responseCreatedAt = row.original.responseCreatedAt;
+                    return (React.createElement("div", null, responseCreatedAt
+                        ? t("list.responseCreatedAtValue", {
+                            date: formatDate(responseCreatedAt),
+                        })
+                        : t("list.noResponse")));
+                },
+            },
+            {
+                accessorKey: "state",
+                header: t("list.state"),
+                cell: ({ row }) => {
+                    let variant = "default";
+                    if (row.original.state === "ACCEPTED" /* ReviewState.ACCEPTED */) {
+                        variant = "success";
+                    }
+                    if (row.original.state === "DECLINED" /* ReviewState.DECLINED */) {
+                        variant = "destructive";
+                    }
+                    return (React.createElement(Badge, { variant: variant }, t(`state.${row.original.state.toLowerCase()}`)));
+                },
+            },
+            {
+                accessorKey: "rating",
+                header: t("list.rating"),
+                cell: ({ row }) => {
+                    const rating = row.original.rating;
+                    return (React.createElement("div", null, Array.from({ length: 5 }, (_, index) => (React.createElement("span", { key: index, style: { color: index < rating ? "gold" : "gray" } }, "\u2605")))));
+                },
+            },
+        ], fetch: async ({ page, perPage, filter, filterOperator: operator, sort, }) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const filterOperator = operator;
+            const { listReviews } = await fetch({
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    sort: sort
+                        ? { [sort.key]: sort.sortDir }
+                        : { createdAt: "DESC" /* SortOrder.DESC */ },
+                    ...(filterOperator && { filterOperator }),
+                    filter: { ...filter, customerId: { eq: id } },
+                },
+            });
+            return listReviews;
+        } }));
+};

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ReviewOrder: () => React.JSX.Element | null;

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

@@ -0,0 +1,57 @@
+import { CardContent, CardHeader, CardTitle, CustomCard, formatDate, useLazyQuery, Badge, useOrder, } from "@deenruv/react-ui-devkit";
+import React, { useEffect } from "react";
+import { GetReviewForOrderQuery } from "../graphql";
+import { Calendar, MessageSquare, Star } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { TRANSLATION_NAMESPACE } from "../constants";
+const StarRating = ({ rating, maxRating = 5, }) => {
+    return (React.createElement("div", { className: "flex items-center gap-1" },
+        Array.from({ length: maxRating }, (_, index) => (React.createElement(Star, { key: index, className: `h-4 w-4 ${index < rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-200 text-gray-200"}` }))),
+        React.createElement("span", { className: "ml-2 text-sm text-muted-foreground" },
+            rating,
+            " / ",
+            maxRating)));
+};
+const getStatusColor = (status) => {
+    switch (status.toLowerCase()) {
+        case "ACCEPTED" /* ReviewState.ACCEPTED */:
+            return "bg-green-100 text-green-800 border-green-200";
+        case "PENDING" /* ReviewState.PENDING */:
+            return "bg-yellow-100 text-yellow-800 border-yellow-200";
+        case "DECLINED" /* ReviewState.DECLINED */:
+            return "bg-red-100 text-red-800 border-red-200";
+        default:
+            return "bg-gray-100 text-gray-800 border-gray-200";
+    }
+};
+export const ReviewOrder = () => {
+    const { t } = useTranslation(TRANSLATION_NAMESPACE, {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    const { order } = useOrder();
+    const [getReviewForOrder, { data }] = useLazyQuery(GetReviewForOrderQuery);
+    useEffect(() => {
+        if (!order)
+            return;
+        getReviewForOrder({ orderId: order.id });
+    }, [order]);
+    if (!order || !data?.getReviewForOrder)
+        return null;
+    return (React.createElement(CustomCard, { title: t("reviewOrder.title", { orderId: order.id }), color: "orange" },
+        React.createElement(CardHeader, { className: "p-0 pb-4" },
+            React.createElement("div", { className: "flex items-center justify-between" },
+                React.createElement("div", null,
+                    React.createElement(CardTitle, { className: "flex items-center gap-2" },
+                        React.createElement(MessageSquare, { className: "h-5 w-5 text-orange-500" }),
+                        t("reviewOrder.titleWithId", { orderId: order.id }))),
+                React.createElement(Badge, { className: getStatusColor(data.getReviewForOrder.state) }, data.getReviewForOrder.state))),
+        React.createElement(CardContent, { className: "space-y-4 p-0" },
+            React.createElement("div", { className: "space-y-4" },
+                React.createElement("div", { className: "flex items-center justify-between" },
+                    React.createElement(StarRating, { rating: data.getReviewForOrder.rating })),
+                React.createElement("div", { className: "space-y-2" },
+                    React.createElement("p", { className: "text-sm leading-relaxed text-foreground" }, data.getReviewForOrder.body)),
+                React.createElement("div", { className: "flex items-center gap-4 pt-2 border-t text-xs text-muted-foreground" }, data.getReviewForOrder.createdAt && (React.createElement("div", { className: "flex items-center gap-1" },
+                    React.createElement(Calendar, { className: "h-3 w-3" }),
+                    formatDate(data.getReviewForOrder.createdAt))))))));
+};

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ReviewProductSidebar: () => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import { CustomCard, useDetailView, useLazyQuery, } from "@deenruv/react-ui-devkit";
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { GetReviewInfoForProductQuery } from "../graphql";
+import { useTranslation } from "react-i18next";
+import { TRANSLATION_NAMESPACE } from "../constants";
+export const ReviewProductSidebar = () => {
+    const { t } = useTranslation(TRANSLATION_NAMESPACE, {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    const { entity } = useDetailView("products-detail-view");
+    const [getInfo, { data }] = useLazyQuery(GetReviewInfoForProductQuery);
+    useEffect(() => {
+        if (entity?.id) {
+            getInfo({ productId: entity.id });
+        }
+    }, [entity]);
+    return (React.createElement(CustomCard, { title: "Opinie o produkcie", color: "amber" },
+        React.createElement("div", { className: "text-sm mb-2" }, data?.getReviewInfoForProduct?.averageRating
+            ? `${t("productReviewSidebar.averageRating")}: ${data.getReviewInfoForProduct.averageRating.toFixed(1)}`
+            : t("productReviewSidebar.noAverageRating")),
+        React.createElement("div", { className: "text-sm mb-2" }, data?.getReviewInfoForProduct?.totalReviews
+            ? `${t("productReviewSidebar.totalReviews")}: ${data.getReviewInfoForProduct.totalReviews}`
+            : t("productReviewSidebar.noTotalReviews")),
+        React.createElement("div", { className: "text-sm mb-2" }, data?.getReviewInfoForProduct?.totalRatings
+            ? `${t("productReviewSidebar.totalRatings")}: ${data.getReviewInfoForProduct.totalRatings}`
+            : t("productReviewSidebar.noTotalRatings")),
+        React.createElement(Link, { to: `/admin-ui/extensions/reviews-plugin-ui?filter=%7B"productId"%3A%7B"eq"%3A"${entity?.id}"%7D%7D`, className: "text-sm text-blue-500 hover:underline" }, t("productReviewSidebar.viewAllReviews"))));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { ReviewState } from "../zeus";
+export declare const ReviewStateChange: ({ onSubmit, }: {
+    onSubmit: (state: ReviewState, message?: string) => Promise<void>;
+}) => React.JSX.Element;

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

@@ -0,0 +1,35 @@
+import { Dialog, DialogTrigger, Button, DialogContent, DialogHeader, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, DialogClose, } from "@deenruv/react-ui-devkit";
+import React, { useState } from "react";
+import { TRANSLATION_NAMESPACE } from "../constants";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+export const ReviewStateChange = ({ onSubmit, }) => {
+    const [state, setState] = useState();
+    const [message, setMessage] = useState();
+    const { t } = useTranslation(TRANSLATION_NAMESPACE, {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    return (React.createElement(Dialog, null,
+        React.createElement(DialogTrigger, { asChild: true },
+            React.createElement(Button, { variant: "destructive", size: "sm", className: "text-xs" }, t("detail.changeState"))),
+        React.createElement(DialogContent, null,
+            React.createElement(DialogHeader, null, t("detail.changeState")),
+            React.createElement(Select, { name: "state", onValueChange: setState, value: state },
+                React.createElement(SelectTrigger, null,
+                    React.createElement(SelectValue, { placeholder: t("detail.selectState") })),
+                React.createElement(SelectContent, null,
+                    React.createElement(SelectItem, { key: "ACCEPTED" /* ReviewState.ACCEPTED */, value: "ACCEPTED" /* ReviewState.ACCEPTED */ }, t("state.accepted")),
+                    React.createElement(SelectItem, { key: "DECLINED" /* ReviewState.DECLINED */, value: "DECLINED" /* ReviewState.DECLINED */ }, t("state.declined")))),
+            React.createElement(Input, { className: "w-full", value: message, onChange: (e) => setMessage(e.target.value), name: "message", placeholder: t("detail.businessResponsePlaceholder") }),
+            React.createElement("div", { className: "flex gap-2 justify-end" },
+                React.createElement(DialogClose, { asChild: true },
+                    React.createElement(Button, { type: "button", variant: "outline" }, t("detail.cancel"))),
+                React.createElement(DialogClose, { asChild: true },
+                    React.createElement(Button, { type: "button", variant: "action", disabled: !state, onClick: async () => {
+                            if (!state) {
+                                toast.error(t("detail.stateRequired"));
+                                return;
+                            }
+                            await onSubmit(state, message);
+                        } }, t("detail.confirm")))))));
+};

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { DialogComponentProps } from "@deenruv/react-ui-devkit";
+export declare function UniversalSelectDialog<T extends string>({ close, resolve, data: { title, description, defaultValue, options, selectLabel, selectPlaceholder, }, }: DialogComponentProps<{
+    value: T;
+    label: string;
+}, {
+    title: string;
+    selectLabel: string;
+    selectPlaceholder: string;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    description?: string;
+    defaultValue?: T;
+}>): React.JSX.Element;

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

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { Button, DialogFooter, DialogHeader, DialogTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from "@deenruv/react-ui-devkit";
+import { useTranslation } from "react-i18next";
+import { TRANSLATION_NAMESPACE } from "../constants";
+import { toast } from "sonner";
+export function UniversalSelectDialog({ close, resolve, data: { title, description, defaultValue, options, selectLabel, selectPlaceholder, }, }) {
+    const [value, setValue] = useState(defaultValue ? defaultValue : undefined);
+    const { t } = useTranslation(TRANSLATION_NAMESPACE, {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    const onSubmit = () => {
+        const option = options.find((o) => o.value === value);
+        if (!option) {
+            toast.error(t("dialog.selectError"));
+            return;
+        }
+        resolve({ value: option.value, label: option.label });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DialogHeader, { className: "pb-4 border-b" },
+            React.createElement(DialogTitle, { className: "text-xl font-bold" },
+                title,
+                description && (React.createElement("p", { className: "text-sm text-muted-foreground mt-1" }, description)))),
+        React.createElement("div", null,
+            React.createElement(Select, { value: value, onValueChange: (value) => setValue(value), defaultValue: defaultValue },
+                React.createElement(SelectTrigger, { className: "w-full" },
+                    React.createElement(SelectValue, { placeholder: selectPlaceholder })),
+                React.createElement(SelectContent, null,
+                    React.createElement(SelectGroup, null,
+                        React.createElement(SelectLabel, null, selectLabel),
+                        options.map((option) => (React.createElement(SelectItem, { key: option.value, value: option.value }, option.label))))))),
+        React.createElement(DialogFooter, { className: "pt-4 border-t mt-4" },
+            React.createElement(Button, { variant: "outline", onClick: close }, t("dialog.cancel")),
+            React.createElement(Button, { onClick: onSubmit }, t("dialog.submit")))));
+}

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

@@ -0,0 +1,2 @@
+export * from "./ProductInfo.js";
+export * from "./OrderInfo.js";

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

@@ -0,0 +1,2 @@
+export * from "./ProductInfo.js";
+export * from "./OrderInfo.js";

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

@@ -0,0 +1 @@
+export declare const TRANSLATION_NAMESPACE = "reviews-plugin";

package/dist/plugin-ui/constants.js

@@ -0,0 +1 @@
+export const TRANSLATION_NAMESPACE = "reviews-plugin";

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

@@ -0,0 +1,3 @@
+export * from "./selectors.js";
+export * from "./queries.js";
+export * from "./mutations.js";

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

@@ -0,0 +1,3 @@
+export * from "./selectors.js";
+export * from "./queries.js";
+export * from "./mutations.js";

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

@@ -0,0 +1,35 @@
+export declare const ChangeReviewStateMutation: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    changeReviewState: {
+        success: boolean;
+    };
+}, {} & {
+    input: {
+        id: string | import("../zeus/index.js").Variable<any, string>;
+        state: import("../zeus/index.js").ReviewState | import("../zeus/index.js").Variable<any, string>;
+        message?: string | import("../zeus/index.js").Variable<any, string> | null | undefined;
+    };
+}>;
+export declare const ChangeReviewsStateMutation: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    changeReviewsState: {
+        success: boolean;
+    }[];
+}, {} & {
+    input: {
+        id: string | import("../zeus/index.js").Variable<any, string>;
+        state: import("../zeus/index.js").ReviewState | import("../zeus/index.js").Variable<any, string>;
+        message?: string | import("../zeus/index.js").Variable<any, string> | null | undefined;
+    }[];
+}>;
+export declare const UpdateTranslationsReviewMutation: import("@graphql-typed-document-node/core").TypedDocumentNode<{
+    updateTranslationsReview: {
+        id: string;
+    };
+}, {} & {
+    input: {
+        id: string | import("../zeus/index.js").Variable<any, string>;
+        translations: import("../zeus/index.js").Variable<any, string> | {
+            languageCode: import("../zeus/index.js").LanguageCode | import("../zeus/index.js").Variable<any, string>;
+            body: string | import("../zeus/index.js").Variable<any, string>;
+        }[];
+    };
+}>;

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

@@ -0,0 +1,28 @@
+import { typedGql } from "../zeus/typedDocumentNode.js";
+import { scalars } from "@deenruv/admin-types";
+import { $ } from "../zeus/index.js";
+export const ChangeReviewStateMutation = typedGql("mutation", { scalars })({
+    changeReviewState: [
+        { input: $("input", "ChangeReviewStateInput!") },
+        { success: true },
+    ],
+});
+export const ChangeReviewsStateMutation = typedGql("mutation", { scalars })({
+    changeReviewsState: [
+        { input: $("input", "[ChangeReviewStateInput!]!") },
+        { success: true },
+    ],
+});
+export const UpdateTranslationsReviewMutation = typedGql("mutation", {
+    scalars,
+})({
+    updateTranslationsReview: [
+        { input: $("input", "UpdateTranslationsReviewInput!") },
+        { id: true },
+    ],
+});
+// export const UpdateTranslationReviewMutation = typedGql("mutation", {
+//   scalars,
+// })({
+//   updateTranslationReview: [{}, {}],
+// });