@lana-commerce/core 11.0.0

package/esm/modules/product.js

@@ -0,0 +1,1278 @@
+import jwtDecode from "jwt-decode";
+import { combine, createEffect, createEvent, createStore, forward, guard, restore, sample, } from "effector";
+import { request, requestMulti, } from "../request.js";
+import { rdsToInitialScores } from "../rdsToInitialScores.js";
+import { combineEvery } from "../effector/combineEvery.js";
+import { combineSome } from "../effector/combineSome.js";
+import { compact } from "../compact.js";
+import { createForm, createStringField } from "../effector/form.js";
+import { generateUUID } from "../generateUUID.js";
+import { mapResponseMultiData } from "../mapResponseMultiData.js";
+import { nonNull } from "../nonNull.js";
+import { requestResponseSplit, requestResponseSplitFirst } from "../effector/requestResponse.js";
+import { requestResponseSplitMulti } from "../effector/requestResponseMulti.js";
+import { uploadFile } from "../file.js";
+import { validMaxLength250, validMaxLengthLongText, validNonEmpty } from "../effector/validator.js";
+import { wrapSignInRequired } from "../effector/wrapSignInRequired.js";
+function customerIDFromJWT(jwt) {
+    try {
+        const data = jwtDecode(jwt);
+        return data.customer_id || undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function createFormToggleStateWithArgs(everythingIdle, form) {
+    const showForm = createEvent();
+    const showFormForReal = createEvent();
+    const hideForm = createEvent();
+    const hideFormForReal = createEvent();
+    const isFormVisible = createStore(null);
+    // form ui logic
+    {
+        guard({
+            source: showForm,
+            filter: everythingIdle,
+            target: showFormForReal,
+        });
+        guard({
+            source: hideForm,
+            filter: everythingIdle,
+            target: hideFormForReal,
+        });
+        // toggle form visibility
+        isFormVisible.on(showFormForReal, (_, v) => v);
+        isFormVisible.on(hideFormForReal, () => null);
+        // when form visibility changes, on false => true transition reset the form also
+        guard({
+            source: isFormVisible.updates.map(() => { }),
+            filter: isFormVisible.map((v) => v !== null),
+            target: form.reset,
+        });
+    }
+    return {
+        showForm,
+        hideForm,
+        isFormVisible,
+    };
+}
+function createFormToggleState(everythingIdle, form) {
+    const toggleForReal = createEvent();
+    const toggleFormVisibility = createEvent();
+    const isFormVisible = createStore(false);
+    // form ui logic
+    {
+        guard({
+            source: toggleFormVisibility,
+            filter: everythingIdle,
+            target: toggleForReal,
+        });
+        // toggle form visibility
+        isFormVisible.on(toggleForReal, (v) => !v);
+        // when form visibility changes, on false => true transition reset the form also
+        guard({
+            source: isFormVisible.updates,
+            filter: (v) => !!v,
+            target: form.reset,
+        });
+    }
+    return {
+        toggleFormVisibility,
+        isFormVisible,
+    };
+}
+function createProductForms(everythingIdle) {
+    // QUESTION FORM
+    const questionForm = createForm({
+        text: createStringField("text", "", [validNonEmpty, validMaxLengthLongText]),
+    });
+    const { showForm: showQuestionForm, hideForm: hideQuestionForm, isFormVisible: isQuestionFormVisible, } = createFormToggleStateWithArgs(everythingIdle, questionForm);
+    // QUESTION ANSWER FORM
+    const questionAnswerForm = createForm({
+        text: createStringField("text", "", [validNonEmpty, validMaxLengthLongText]),
+    });
+    const { showForm: showQuestionAnswerForm, hideForm: hideQuestionAnswerForm, isFormVisible: isQuestionAnswerFormVisible, } = createFormToggleStateWithArgs(everythingIdle, questionAnswerForm);
+    // REVIEW FORM
+    const reviewForm = createForm({
+        title: createStringField("title", "", [validNonEmpty, validMaxLength250]),
+        text: createStringField("text", "", [validNonEmpty, validMaxLengthLongText]),
+    });
+    const uploadReviewImageFile = createEvent();
+    const removeReviewImageFile = createEvent();
+    const appendReviewImageFile = createEvent();
+    const updateReviewImageFile = createEvent();
+    const reviewImageFiles = createStore([])
+        .on(removeReviewImageFile, (files, idx) => {
+        if (idx < 0 || idx >= files.length)
+            return files;
+        const newFiles = [...files];
+        newFiles.splice(idx, 1);
+        return newFiles;
+    })
+        .on(updateReviewImageFile, (files, data) => {
+        const idx = files.findIndex((f) => f.uuid === data.uuid);
+        if (idx === -1)
+            return files;
+        const newFiles = [...files];
+        newFiles[idx] = { ...newFiles[idx] };
+        if (data.id !== undefined)
+            newFiles[idx].id = data.id;
+        if (data.preview !== undefined)
+            newFiles[idx].preview = data.preview;
+        if (data.public_url !== undefined)
+            newFiles[idx].public_url = data.public_url;
+        if (data.status !== undefined)
+            newFiles[idx].status = data.status;
+        return newFiles;
+    })
+        .on(appendReviewImageFile, (files, data) => {
+        const newFile = {
+            uuid: data.uuid,
+            id: data.id || "",
+            preview: data.preview || "",
+            public_url: data.public_url || "",
+            status: data.status || "ok",
+        };
+        return [...files, newFile];
+    });
+    const setReviewScores = createEvent();
+    const reviewScores = restore(setReviewScores, []);
+    const setReviewRecommended = createEvent();
+    const reviewRecommended = restore(setReviewRecommended, "not_voted");
+    const { isFormVisible: isReviewFormVisible, toggleFormVisibility: toggleReviewFormVisibility } = createFormToggleState(everythingIdle, reviewForm);
+    return {
+        questionForm,
+        showQuestionForm,
+        hideQuestionForm,
+        isQuestionFormVisible,
+        questionAnswerForm,
+        showQuestionAnswerForm,
+        hideQuestionAnswerForm,
+        isQuestionAnswerFormVisible,
+        reviewForm,
+        uploadReviewImageFile,
+        removeReviewImageFile,
+        updateReviewImageFile,
+        appendReviewImageFile,
+        reviewImageFiles,
+        setReviewScores,
+        reviewScores,
+        setReviewRecommended,
+        reviewRecommended,
+        isReviewFormVisible,
+        toggleReviewFormVisibility,
+    };
+}
+function replaceReview(reviews, newReview) {
+    if (!reviews)
+        return reviews;
+    const idx = reviews.findIndex((r) => r.id === newReview.id);
+    if (idx !== -1) {
+        const newReviews = [...reviews];
+        newReviews[idx] = newReview;
+        return newReviews;
+    }
+    return reviews;
+}
+function replaceOrCreateOwnReview(review, newReview) {
+    if (!review)
+        return newReview;
+    if (review.id !== newReview.id)
+        return review;
+    return newReview;
+}
+function replaceOwnReview(review, newReview) {
+    if (!review)
+        return review;
+    if (review.id !== newReview.id)
+        return review;
+    return newReview;
+}
+function replaceQuestion(questions, newQuestion) {
+    if (!questions)
+        return questions;
+    const idx = questions.findIndex((r) => r.id === newQuestion.id);
+    if (idx !== -1) {
+        const newQuestions = [...questions];
+        newQuestions[idx] = newQuestion;
+        return newQuestions;
+    }
+    return questions;
+}
+function replaceOrCreateOwnQuestion(questions, newQuestion) {
+    if (!questions)
+        return [newQuestion];
+    const idx = questions.findIndex((q) => q.id === newQuestion.id);
+    if (idx !== -1) {
+        const newQuestions = [...questions];
+        newQuestions[idx] = newQuestion;
+        return newQuestions;
+    }
+    else {
+        return [...questions, newQuestion];
+    }
+    return questions;
+}
+function deleteQuestionFromList(questions, questionID) {
+    if (!questions)
+        return questions;
+    const idx = questions.findIndex((q) => q.id === questionID);
+    if (idx !== -1) {
+        const newQuestions = [...questions];
+        newQuestions.splice(idx, 1);
+        return newQuestions;
+    }
+    return questions;
+}
+function deleteQuestionAnswerFromList(questions, [questionID, questionAnswerID]) {
+    if (!questions)
+        return questions;
+    const idx = questions.findIndex((q) => q.id === questionID);
+    if (idx !== -1) {
+        const newQuestion = {
+            ...questions[idx],
+            answers: questions[idx].answers?.filter((qa) => qa?.id !== questionAnswerID) || [],
+        };
+        const newQuestions = [...questions];
+        newQuestions[idx] = newQuestion;
+        return newQuestions;
+    }
+    return questions;
+}
+function deleteOwnReview(review, reviewID) {
+    if (review && review.id === reviewID)
+        return null;
+    return review;
+}
+function deleteReviewFromList(reviews, reviewID) {
+    if (!reviews)
+        return reviews;
+    const idx = reviews.findIndex((q) => q.id === reviewID);
+    if (idx !== -1) {
+        const newReviews = [...reviews];
+        newReviews.splice(idx, 1);
+        return newReviews;
+    }
+    return reviews;
+}
+export function createProduct(config) {
+    const configWithJWTAndLocale = combine(config.jwt, config.locale, (authToken, locale) => ({
+        ...config,
+        opts: {
+            ...config.opts,
+            authToken,
+            locale,
+        },
+    }));
+    const setReviewsSortBy = createEvent();
+    const setReviewsSortDesc = createEvent();
+    const setQuestionsSortBy = createEvent();
+    const setQuestionsSortDesc = createEvent();
+    const message = createEvent();
+    const pendingStores = [];
+    const pendingStoresButImageUpload = [];
+    const addPendingStore = (s, isImageUpload) => {
+        pendingStores.push(s);
+        if (!isImageUpload) {
+            pendingStoresButImageUpload.push(s);
+        }
+    };
+    const everythingIdle = createStore(true);
+    const everythingIdleButImageUpload = createStore(true);
+    const load = createEvent();
+    const unexpectedError = createEvent();
+    // state received from the server
+    const dataReviewsSortBy = createStore("rating").reset(load);
+    const dataReviewsSortDesc = createStore(true).reset(load);
+    const dataQuestionsSortBy = createStore("rating").reset(load);
+    const dataQuestionsSortDesc = createStore(true).reset(load);
+    const product = createStore(null).reset(load);
+    const totalReviews = createStore(0).reset(load);
+    const totalQuestions = createStore(0).reset(load);
+    const reviewsSortBy = createStore("rating")
+        .reset(load)
+        .on(setReviewsSortBy, (_, v) => v);
+    const reviewsSortDesc = createStore(true)
+        .reset(load)
+        .on(setReviewsSortDesc, (_, v) => v);
+    const reviews = createStore(null).reset(load);
+    const questionsSortBy = createStore("rating")
+        .reset(load)
+        .on(setQuestionsSortBy, (_, v) => v);
+    const questionsSortDesc = createStore(true)
+        .reset(load)
+        .on(setQuestionsSortDesc, (_, v) => v);
+    const questions = createStore(null).reset(load);
+    const canLoadMoreReviews = combine(totalReviews, reviews, (totalReviews, reviews) => (reviews?.length || 0) < totalReviews);
+    const canLoadMoreQuestions = combine(totalQuestions, questions, (totalQuestions, questions) => (questions?.length || 0) < totalQuestions);
+    const loadMoreReviews = createEvent();
+    const loadMoreQuestions = createEvent();
+    const loadMoreReviewsGeneric = createEvent("append");
+    const loadMoreQuestionsGeneric = createEvent("append");
+    const ownReview = createStore(null).reset(load);
+    const ownQuestions = createStore(null).reset(load);
+    const forms = createProductForms(everythingIdle);
+    const images = createStore(null).reset(load);
+    // reset form visibility on load
+    forms.isReviewFormVisible.reset(load);
+    forms.isQuestionFormVisible.reset(load);
+    forms.isQuestionAnswerFormVisible.reset(load);
+    function msgFilter(done, filter) {
+        return done.filterMap((v) => (v.result.kind === "data" ? filter(v.params) : undefined));
+    }
+    // derive initial question form values from own questions
+    {
+        const questionFormInitialValue = combine(ownQuestions, forms.isQuestionFormVisible, (questions, questionID) => {
+            const q = questions?.find((q) => q.id === questionID);
+            return {
+                text: q?.text || "",
+            };
+        });
+        forward({
+            from: questionFormInitialValue.map((v) => v.text),
+            to: forms.questionForm.text.setInitialValue,
+        });
+    }
+    // derive initial question answer form values from questions
+    {
+        const questionAnswerFormInitialValue = combine(questions, ownQuestions, forms.isQuestionAnswerFormVisible, (qs1, qs2, target) => {
+            const [questionID, questionAnswerID] = target || ["", ""];
+            const q = qs1?.find((q) => q.id === questionID) || qs2?.find((q) => q.id === questionID);
+            const qa = q?.answers?.find((qa) => qa?.id === questionAnswerID);
+            return {
+                text: qa?.text || "",
+            };
+        });
+        forward({
+            from: questionAnswerFormInitialValue.map((v) => v.text),
+            to: forms.questionAnswerForm.text.setInitialValue,
+        });
+    }
+    // derive initial review form values from product properties + review settings + own review
+    {
+        const reviewFormInitialValue = combine(configWithJWTAndLocale, product, ownReview, (config, product, ownReview) => {
+            const rds = config.reviewSettings.default_review_dimension_set || product?.review_dimension_set;
+            const title = ownReview?.title || "";
+            const text = ownReview?.text || "";
+            const scores = rdsToInitialScores(rds, config.reviewDimensions, ownReview?.scores);
+            const recommended = ownReview?.recommended || "not_voted";
+            const imageFiles = compact(ownReview?.image_files) || [];
+            return {
+                title,
+                text,
+                scores,
+                recommended,
+                imageFiles,
+            };
+        });
+        const scoresInitialValue = reviewFormInitialValue.map((v) => v.scores);
+        const recommendedInitialValue = reviewFormInitialValue.map((v) => v.recommended);
+        const reviewImageFilesInitialValue = reviewFormInitialValue.map((v) => v.imageFiles.map((f) => ({ ...f, preview: "", uuid: "", status: "ok" })));
+        forward({
+            from: reviewFormInitialValue.map((v) => v.title),
+            to: forms.reviewForm.title.setInitialValue,
+        });
+        forward({
+            from: reviewFormInitialValue.map((v) => v.text),
+            to: forms.reviewForm.text.setInitialValue,
+        });
+        // on form reset propagate initial values to their corresponding stores
+        forward({
+            from: sample(scoresInitialValue, forms.reviewForm.reset),
+            to: forms.reviewScores,
+        });
+        forward({
+            from: sample(recommendedInitialValue, forms.reviewForm.reset),
+            to: forms.reviewRecommended,
+        });
+        forward({
+            from: sample(reviewImageFilesInitialValue, forms.reviewForm.reset),
+            to: forms.reviewImageFiles,
+        });
+    }
+    // reload on configWithJWTAndLocale, but only if current product is not null
+    {
+        const hasProductID = product.map((p) => !!p);
+        const productID = product.map((p) => p?.id || "");
+        guard({
+            source: sample(productID, configWithJWTAndLocale),
+            filter: hasProductID,
+            target: load,
+        });
+    }
+    //================================================================================================================
+    // QUESTION FORM SUBMIT
+    //================================================================================================================
+    {
+        const createOrModifyQuestionFx = createEffect(async (p) => {
+            const sharedData = {
+                text: p.text,
+            };
+            if (p.question) {
+                return request(p.config.graphql.modifyQuestionMutation)({ shopID: p.config.shopID, questionID: p.question.id, data: sharedData }, p.config.opts);
+            }
+            else {
+                return request(p.config.graphql.createQuestionMutation)({ shopID: p.config.shopID, data: { product_id: p.product.id, ...sharedData } }, p.config.opts);
+            }
+        });
+        addPendingStore(createOrModifyQuestionFx.pending);
+        const createOrModifyQuestionResult = requestResponseSplitFirst(createOrModifyQuestionFx.doneData);
+        // success
+        forward({
+            from: msgFilter(createOrModifyQuestionFx.done, (p) => (p.question ? "question_modified" : "question_created")),
+            to: message,
+        });
+        ownQuestions.on(createOrModifyQuestionResult.data, replaceOrCreateOwnQuestion);
+        forward({
+            from: createOrModifyQuestionResult.data,
+            to: forms.hideQuestionForm,
+        });
+        // failure
+        forward({
+            from: createOrModifyQuestionResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample({
+                source: combine([configWithJWTAndLocale, forms.isQuestionFormVisible, ownQuestions, product]),
+                clock: forms.questionForm.submitted,
+                fn: ([config, questionID, ownQuestions, product], data) => {
+                    const question = ownQuestions?.find((q) => q.id === questionID) || null;
+                    return {
+                        config,
+                        ...data,
+                        question,
+                        product: nonNull(product, "question product"),
+                    };
+                },
+            }),
+            filter: everythingIdle,
+            target: createOrModifyQuestionFx,
+        });
+    }
+    //================================================================================================================
+    // QUESTION ANSWER FORM SUBMIT
+    //================================================================================================================
+    {
+        const createOrModifyQuestionAnswerFx = createEffect(async (p) => {
+            const sharedData = {
+                text: p.text,
+            };
+            let resp;
+            if (p.questionID && p.questionAnswerID) {
+                resp = await request(p.config.graphql.modifyQuestionAnswerMutation)({
+                    shopID: p.config.shopID,
+                    questionID: p.questionID,
+                    questionAnswerID: p.questionAnswerID,
+                    data: sharedData,
+                }, p.config.opts);
+            }
+            else {
+                resp = await request(p.config.graphql.createQuestionAnswerMutation)({ shopID: p.config.shopID, questionID: p.questionID, data: sharedData }, p.config.opts);
+            }
+            if (resp.kind !== "data")
+                return resp;
+            return request(p.config.graphql.getQuestionQuery)({ shopID: p.config.shopID, questionID: p.questionID }, p.config.opts);
+        });
+        addPendingStore(createOrModifyQuestionAnswerFx.pending);
+        const createOrModifyQuestionAnswerResult = requestResponseSplitFirst(createOrModifyQuestionAnswerFx.doneData);
+        // success
+        forward({
+            from: msgFilter(createOrModifyQuestionAnswerFx.done, (p) => p.questionAnswerID ? "question_answer_modified" : "question_answer_created"),
+            to: message,
+        });
+        questions.on(createOrModifyQuestionAnswerResult.data, replaceQuestion);
+        ownQuestions.on(createOrModifyQuestionAnswerResult.data, replaceQuestion);
+        forward({
+            from: createOrModifyQuestionAnswerResult.data,
+            to: forms.hideQuestionAnswerForm,
+        });
+        // failure
+        forward({
+            from: createOrModifyQuestionAnswerResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample({
+                source: combine([configWithJWTAndLocale, forms.isQuestionAnswerFormVisible]),
+                clock: forms.questionAnswerForm.submitted,
+                fn: ([config, target], data) => {
+                    const [questionID, questionAnswerID] = target || ["", null];
+                    return {
+                        config,
+                        ...data,
+                        questionID,
+                        questionAnswerID,
+                    };
+                },
+            }),
+            filter: everythingIdle,
+            target: createOrModifyQuestionAnswerFx,
+        });
+    }
+    //================================================================================================================
+    // DELETE REVIEW
+    //================================================================================================================
+    const deleteReview = createEvent();
+    {
+        const deleteReviewFx = createEffect(async (p) => {
+            return request(p.config.graphql.deleteReviewMutation)({ shopID: p.config.shopID, reviewID: p.reviewID }, p.config.opts);
+        });
+        addPendingStore(deleteReviewFx.pending);
+        const deleteReviewResult = requestResponseSplit(deleteReviewFx.doneData);
+        // success
+        const deletedID = deleteReviewFx.done.filterMap((v) => (v.result.kind === "data" ? v.params.reviewID : undefined));
+        forward({
+            from: deletedID.map(() => "review_deleted"),
+            to: message,
+        });
+        reviews.on(deletedID, deleteReviewFromList);
+        ownReview.on(deletedID, deleteOwnReview);
+        // failure
+        forward({
+            from: deleteReviewResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, deleteReview, (config, reviewID) => ({ config, reviewID })),
+            filter: everythingIdle,
+            target: deleteReviewFx,
+        });
+    }
+    //================================================================================================================
+    // DELETE QUESTION ANSWER
+    //================================================================================================================
+    const deleteQuestionAnswer = createEvent();
+    {
+        const deleteQuestionAnswerFx = createEffect(async (p) => {
+            return request(p.config.graphql.deleteQuestionAnswerMutation)({ shopID: p.config.shopID, questionAnswerID: p.questionAnswerID }, p.config.opts);
+        });
+        addPendingStore(deleteQuestionAnswerFx.pending);
+        const deleteQuestionAnswerResult = requestResponseSplit(deleteQuestionAnswerFx.doneData);
+        // success
+        const deletedID = deleteQuestionAnswerFx.done.filterMap((v) => v.result.kind === "data" ? [v.params.questionID, v.params.questionAnswerID] : undefined);
+        forward({
+            from: deletedID.map(() => "question_answer_deleted"),
+            to: message,
+        });
+        questions.on(deletedID, deleteQuestionAnswerFromList);
+        ownQuestions.on(deletedID, deleteQuestionAnswerFromList);
+        // failure
+        forward({
+            from: deleteQuestionAnswerResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, deleteQuestionAnswer, (config, [questionID, questionAnswerID]) => ({
+                config,
+                questionID,
+                questionAnswerID,
+            })),
+            filter: everythingIdle,
+            target: deleteQuestionAnswerFx,
+        });
+    }
+    //================================================================================================================
+    // DELETE QUESTION
+    //================================================================================================================
+    const deleteQuestion = createEvent();
+    {
+        const deleteQuestionFx = createEffect(async (p) => {
+            return request(p.config.graphql.deleteQuestionMutation)({ shopID: p.config.shopID, questionID: p.questionID }, p.config.opts);
+        });
+        addPendingStore(deleteQuestionFx.pending);
+        const deleteQuestionResult = requestResponseSplit(deleteQuestionFx.doneData);
+        // success
+        const deletedID = deleteQuestionFx.done.filterMap((v) => v.result.kind === "data" ? v.params.questionID : undefined);
+        forward({
+            from: deletedID.map(() => "question_deleted"),
+            to: message,
+        });
+        questions.on(deletedID, deleteQuestionFromList);
+        ownQuestions.on(deletedID, deleteQuestionFromList);
+        // failure
+        forward({
+            from: deleteQuestionResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, deleteQuestion, (config, questionID) => ({ config, questionID })),
+            filter: everythingIdle,
+            target: deleteQuestionFx,
+        });
+    }
+    //================================================================================================================
+    // REVIEW FORM SUBMIT
+    //================================================================================================================
+    {
+        const createOrModifyReviewFx = createEffect(async (p) => {
+            const sharedData = {
+                title: p.title,
+                text: p.text,
+                recommended: p.recommended,
+                scores: p.scores.map((s) => ({ review_dimension_id: s.review_dimension_id, score: s.score })),
+                image_file_ids: compact(p.imageFiles.map((f) => f.id || undefined)),
+            };
+            if (p.ownReview) {
+                return request(p.config.graphql.modifyReviewMutation)({ shopID: p.config.shopID, reviewID: p.ownReview.id, data: sharedData }, p.config.opts);
+            }
+            else {
+                return request(p.config.graphql.createReviewMutation)({ shopID: p.config.shopID, data: { product_id: p.product.id, ...sharedData } }, p.config.opts);
+            }
+        });
+        addPendingStore(createOrModifyReviewFx.pending);
+        const createOrModifyReviewResult = requestResponseSplitFirst(createOrModifyReviewFx.doneData);
+        // success
+        forward({
+            from: msgFilter(createOrModifyReviewFx.done, (p) => (p.ownReview ? "review_modified" : "review_created")),
+            to: message,
+        });
+        ownReview.on(createOrModifyReviewResult.data, replaceOrCreateOwnReview);
+        forward({
+            from: createOrModifyReviewResult.data,
+            to: forms.toggleReviewFormVisibility,
+        });
+        // failure
+        forward({
+            from: createOrModifyReviewResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample({
+                source: combine([
+                    configWithJWTAndLocale,
+                    forms.reviewScores,
+                    forms.reviewImageFiles,
+                    forms.reviewRecommended,
+                    ownReview,
+                    product,
+                ]),
+                clock: forms.reviewForm.submitted,
+                fn: ([config, scores, imageFiles, recommended, ownReview, product], data) => {
+                    return {
+                        config,
+                        ...data,
+                        scores,
+                        imageFiles,
+                        recommended,
+                        ownReview,
+                        product: nonNull(product, "review product"),
+                    };
+                },
+            }),
+            filter: everythingIdle,
+            target: createOrModifyReviewFx,
+        });
+    }
+    //================================================================================================================
+    // FILE UPLOAD
+    //================================================================================================================
+    {
+        // file upload process
+        const uploadFileEv = forms.uploadReviewImageFile.map((file) => ({ file, uuid: generateUUID() }));
+        const uploadFileFx = createEffect(async (p) => {
+            const result = await uploadFile(p.file, p.config.shopID, p.config.opts);
+            return {
+                result,
+                uuid: p.uuid,
+            };
+        });
+        addPendingStore(uploadFileFx.pending, "image_upload_store");
+        // append the file right away to the list of files with preview
+        forward({
+            from: uploadFileEv.map((v) => {
+                const preview = URL.createObjectURL(v.file);
+                return {
+                    uuid: v.uuid,
+                    preview,
+                    status: "uploading",
+                };
+            }),
+            to: forms.appendReviewImageFile,
+        });
+        // upload file when it arrives (note that we allow uploading multiple files in parallel and we don't block on "pending")
+        guard({
+            source: sample(configWithJWTAndLocale, uploadFileEv, (config, data) => ({ config, ...data })),
+            filter: everythingIdleButImageUpload,
+            target: uploadFileFx,
+        });
+        // once upload is complete, update the file with the outcome
+        forward({
+            from: uploadFileFx.doneData.map((v) => {
+                if (v.result.kind === "ok") {
+                    const file = v.result.file;
+                    return {
+                        uuid: v.uuid,
+                        id: file.id,
+                        public_url: file.public_url,
+                        preview: "",
+                        status: "ok",
+                    };
+                }
+                else {
+                    return { uuid: v.uuid, status: v.result.kind };
+                }
+            }),
+            to: forms.updateReviewImageFile,
+        });
+    }
+    //================================================================================================================
+    // LOAD EVERYTHING
+    //================================================================================================================
+    {
+        const loadFx = createEffect(async (p) => {
+            const jwt = p.config.opts?.authToken || "";
+            if (!jwt) {
+                return mapResponseMultiData(await requestMulti(p.config.graphql.loadProductNoCustomerQuery)({ shopID: p.config.shopID, productID: p.productID }, p.config.opts), (v) => ({
+                    ...v,
+                    ownReviews: null,
+                    ownQuestions: null,
+                }));
+            }
+            else {
+                const customerID = jwtDecode(p.config.opts?.authToken || "").customer_id;
+                return requestMulti(config.graphql.loadProductQuery)({ shopID: p.config.shopID, customerID, productID: p.productID }, p.config.opts);
+            }
+        });
+        addPendingStore(loadFx.pending);
+        const loadResult = requestResponseSplitMulti(loadFx.doneData);
+        // success
+        forward({ from: loadResult.data.map(() => "rating"), to: dataReviewsSortBy });
+        forward({ from: loadResult.data.map(() => true), to: dataReviewsSortDesc });
+        forward({ from: loadResult.data.map(() => "rating"), to: dataQuestionsSortBy });
+        forward({ from: loadResult.data.map(() => true), to: dataQuestionsSortDesc });
+        forward({
+            from: loadResult.data.map((v) => v.products?.[0] || null),
+            to: product,
+        });
+        forward({
+            from: loadResult.data.map((v) => compact(v.reviews?.items || null)),
+            to: reviews,
+        });
+        forward({
+            from: loadResult.data.map((v) => compact(v.questions?.items)),
+            to: questions,
+        });
+        forward({
+            from: loadResult.data.map((v) => v.ownReviews?.items?.[0] || null),
+            to: ownReview,
+        });
+        forward({
+            from: loadResult.data.map((v) => v.ownQuestions?.items || null),
+            to: ownQuestions,
+        });
+        forward({
+            from: loadResult.data.map((v) => v.reviews?.count || 0),
+            to: totalReviews,
+        });
+        forward({
+            from: loadResult.data.map((v) => v.questions?.count || 0),
+            to: totalQuestions,
+        });
+        forward({
+            from: loadResult.data.map((v) => v.images),
+            to: images,
+        });
+        // failure
+        forward({
+            from: loadResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, load, (config, productID) => ({ config, productID })),
+            filter: everythingIdle,
+            target: loadFx,
+        });
+    }
+    //================================================================================================================
+    // LOAD MORE REVIEWS
+    //================================================================================================================
+    {
+        const loadMoreReviewsFx = createEffect(async (p) => {
+            const jwt = p.config.opts?.authToken || "";
+            const customerID = jwt ? customerIDFromJWT(jwt) : undefined;
+            return request(p.config.graphql.searchReviewsQuery)({
+                shopID: p.config.shopID,
+                productID: p.productID,
+                limit: p.limit,
+                offset: p.offset,
+                sortBy: p.sortBy,
+                sortDesc: p.sortDesc,
+                notCustomerID: customerID,
+            }, p.config.opts);
+        });
+        addPendingStore(loadMoreReviewsFx.pending);
+        const loadResult = requestResponseSplit(loadMoreReviewsFx.doneData);
+        // success
+        const successParamsAndData = loadMoreReviewsFx.done.filterMap((v) => v.result.kind === "data" ? { params: v.params, data: v.result.data } : undefined);
+        forward({ from: successParamsAndData.map((v) => v.params.sortBy), to: dataReviewsSortBy });
+        forward({ from: successParamsAndData.map((v) => v.params.sortDesc), to: dataReviewsSortDesc });
+        reviews.on(successParamsAndData, (reviews, pd) => pd.params.action === "replace"
+            ? [...compact(pd.data.items)]
+            : [...(reviews || []), ...compact(pd.data.items || [])]);
+        // failure
+        forward({
+            from: loadResult.error,
+            to: unexpectedError,
+        });
+        sample({ source: dataReviewsSortBy, clock: loadResult.error, target: reviewsSortBy });
+        sample({ source: dataReviewsSortDesc, clock: loadResult.error, target: reviewsSortDesc });
+        guard({
+            source: sample(combine(configWithJWTAndLocale, reviews, reviewsSortBy, reviewsSortDesc, product), loadMoreReviewsGeneric, ([config, reviews, reviewsSortBy, reviewsSortDesc, product], action) => ({
+                config,
+                productID: nonNull(product, "load more reviews product").id,
+                limit: 10,
+                offset: action === "replace" ? 0 : reviews?.length || 0,
+                sortBy: reviewsSortBy,
+                sortDesc: reviewsSortDesc,
+                action,
+            })),
+            filter: combineEvery(everythingIdle),
+            target: loadMoreReviewsFx,
+        });
+    }
+    //================================================================================================================
+    // LOAD MORE QUESTIONS
+    //================================================================================================================
+    {
+        const loadMoreQuestionsFx = createEffect(async (p) => {
+            const jwt = p.config.opts?.authToken || "";
+            const customerID = jwt ? customerIDFromJWT(jwt) : undefined;
+            return request(p.config.graphql.searchQuestionsQuery)({
+                shopID: p.config.shopID,
+                productID: p.productID,
+                limit: p.limit,
+                offset: p.offset,
+                sortBy: p.sortBy,
+                sortDesc: p.sortDesc,
+                notCustomerID: customerID,
+            }, p.config.opts);
+        });
+        addPendingStore(loadMoreQuestionsFx.pending);
+        const loadResult = requestResponseSplit(loadMoreQuestionsFx.doneData);
+        // success
+        const successParamsAndData = loadMoreQuestionsFx.done.filterMap((v) => v.result.kind === "data" ? { params: v.params, data: v.result.data } : undefined);
+        forward({ from: successParamsAndData.map((v) => v.params.sortBy), to: dataQuestionsSortBy });
+        forward({ from: successParamsAndData.map((v) => v.params.sortDesc), to: dataQuestionsSortDesc });
+        questions.on(successParamsAndData, (questions, pd) => pd.params.action === "replace"
+            ? [...compact(pd.data.items)]
+            : [...(questions || []), ...compact(pd.data.items || [])]);
+        // failure
+        forward({
+            from: loadResult.error,
+            to: unexpectedError,
+        });
+        sample({ source: dataQuestionsSortBy, clock: loadResult.error, target: questionsSortBy });
+        sample({ source: dataQuestionsSortDesc, clock: loadResult.error, target: questionsSortDesc });
+        guard({
+            source: sample(combine(configWithJWTAndLocale, questions, questionsSortBy, questionsSortDesc, product), loadMoreQuestionsGeneric, ([config, questions, questionsSortBy, questionsSortDesc, product], action) => ({
+                config,
+                productID: nonNull(product, "load more questions product").id,
+                limit: 10,
+                offset: action === "replace" ? 0 : questions?.length || 0,
+                sortBy: questionsSortBy,
+                sortDesc: questionsSortDesc,
+                action,
+            })),
+            filter: combineEvery(everythingIdle),
+            target: loadMoreQuestionsFx,
+        });
+    }
+    //================================================================================================================
+    // VOTE REVIEW
+    //================================================================================================================
+    const voteReviewYes = createEvent();
+    const voteReviewNo = createEvent();
+    const voteReviewDelete = createEvent();
+    {
+        const voteReviewFx = createEffect(async (p) => {
+            const resp = await request(config.graphql.voteReviewMutation)({ shopID: p.config.shopID, reviewID: p.reviewID, y: p.y, delete: p.delete }, p.config.opts);
+            if (resp.kind !== "data")
+                return resp;
+            return request(config.graphql.getReviewQuery)({ shopID: p.config.shopID, reviewID: p.reviewID }, p.config.opts);
+        });
+        addPendingStore(voteReviewFx.pending);
+        const voteResult = requestResponseSplitFirst(voteReviewFx.doneData);
+        // success
+        forward({
+            from: msgFilter(voteReviewFx.done, (p) => {
+                if (p.delete)
+                    return "review_vote_deleted";
+                return p.y ? "review_voted_yes" : "review_voted_no";
+            }),
+            to: message,
+        });
+        reviews.on(voteResult.data, replaceReview);
+        ownReview.on(voteResult.data, replaceOwnReview);
+        // failure
+        forward({
+            from: voteResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteReviewYes, (config, reviewID) => ({
+                config,
+                reviewID,
+                y: true,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: voteReviewFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteReviewNo, (config, reviewID) => ({
+                config,
+                reviewID,
+                y: false,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: voteReviewFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteReviewDelete, (config, reviewID) => ({
+                config,
+                reviewID,
+                y: false,
+                delete: true,
+            })),
+            filter: everythingIdle,
+            target: voteReviewFx,
+        });
+    }
+    //================================================================================================================
+    // FLAG REVIEW
+    //================================================================================================================
+    const flagReview = createEvent();
+    const flagReviewDelete = createEvent();
+    {
+        const flagReviewFx = createEffect(async (p) => {
+            const resp = await request(config.graphql.flagReviewMutation)({ shopID: p.config.shopID, reviewID: p.reviewID, delete: p.delete }, p.config.opts);
+            if (resp.kind !== "data")
+                return resp;
+            return request(config.graphql.getReviewQuery)({ shopID: p.config.shopID, reviewID: p.reviewID }, p.config.opts);
+        });
+        addPendingStore(flagReviewFx.pending);
+        const flagResult = requestResponseSplitFirst(flagReviewFx.doneData);
+        // success
+        forward({
+            from: msgFilter(flagReviewFx.done, (p) => (p.delete ? "review_unflagged" : "review_flagged")),
+            to: message,
+        });
+        reviews.on(flagResult.data, replaceReview);
+        ownReview.on(flagResult.data, replaceOwnReview);
+        // failure
+        forward({
+            from: flagResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, flagReview, (config, reviewID) => ({ config, reviewID, delete: false })),
+            filter: everythingIdle,
+            target: flagReviewFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, flagReviewDelete, (config, reviewID) => ({
+                config,
+                reviewID,
+                delete: true,
+            })),
+            filter: everythingIdle,
+            target: flagReviewFx,
+        });
+    }
+    //================================================================================================================
+    // VOTE QUESTION
+    //================================================================================================================
+    const voteQuestionYes = createEvent();
+    const voteQuestionNo = createEvent();
+    const voteQuestionDelete = createEvent();
+    {
+        const voteQuestionFx = createEffect(async (p) => {
+            const resp = await request(config.graphql.voteQuestionMutation)({ shopID: p.config.shopID, questionID: p.questionID, y: p.y, delete: p.delete }, p.config.opts);
+            if (resp.kind !== "data")
+                return resp;
+            return request(config.graphql.getQuestionQuery)({ shopID: p.config.shopID, questionID: p.questionID }, p.config.opts);
+        });
+        addPendingStore(voteQuestionFx.pending);
+        const voteResult = requestResponseSplitFirst(voteQuestionFx.doneData);
+        // success
+        forward({
+            from: msgFilter(voteQuestionFx.done, (p) => {
+                if (p.delete)
+                    return "question_vote_deleted";
+                return p.y ? "question_voted_yes" : "question_voted_no";
+            }),
+            to: message,
+        });
+        questions.on(voteResult.data, replaceQuestion);
+        ownQuestions.on(voteResult.data, replaceQuestion);
+        // failure
+        forward({
+            from: voteResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteQuestionYes, (config, questionID) => ({
+                config,
+                questionID,
+                y: true,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: voteQuestionFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteQuestionNo, (config, questionID) => ({
+                config,
+                questionID,
+                y: false,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: voteQuestionFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteQuestionDelete, (config, questionID) => ({
+                config,
+                questionID,
+                y: false,
+                delete: true,
+            })),
+            filter: everythingIdle,
+            target: voteQuestionFx,
+        });
+    }
+    //================================================================================================================
+    // FLAG QUESTION
+    //================================================================================================================
+    const flagQuestion = createEvent();
+    const flagQuestionDelete = createEvent();
+    {
+        const flagQuestionFx = createEffect(async (p) => {
+            const resp = await request(config.graphql.flagQuestionMutation)({ shopID: p.config.shopID, questionID: p.questionID, delete: p.delete }, p.config.opts);
+            if (resp.kind !== "data")
+                return resp;
+            return request(config.graphql.getQuestionQuery)({ shopID: p.config.shopID, questionID: p.questionID }, p.config.opts);
+        });
+        addPendingStore(flagQuestionFx.pending);
+        const flagResult = requestResponseSplitFirst(flagQuestionFx.doneData);
+        // success
+        forward({
+            from: msgFilter(flagQuestionFx.done, (p) => (p.delete ? "question_unflagged" : "question_flagged")),
+            to: message,
+        });
+        questions.on(flagResult.data, replaceQuestion);
+        ownQuestions.on(flagResult.data, replaceQuestion);
+        // failure
+        forward({
+            from: flagResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, flagQuestion, (config, questionID) => ({
+                config,
+                questionID,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: flagQuestionFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, flagQuestionDelete, (config, questionID) => ({
+                config,
+                questionID,
+                delete: true,
+            })),
+            filter: everythingIdle,
+            target: flagQuestionFx,
+        });
+    }
+    //================================================================================================================
+    // VOTE QUESTION ANSWER
+    //================================================================================================================
+    const voteQuestionAnswerYes = createEvent();
+    const voteQuestionAnswerNo = createEvent();
+    const voteQuestionAnswerDelete = createEvent();
+    {
+        const voteQuestionAnswerFx = createEffect(async (p) => {
+            const resp = await request(config.graphql.voteQuestionAnswerMutation)({ shopID: p.config.shopID, questionAnswerID: p.questionAnswerID, y: p.y, delete: p.delete }, p.config.opts);
+            if (resp.kind !== "data")
+                return resp;
+            return request(config.graphql.getQuestionQuery)({ shopID: p.config.shopID, questionID: p.questionID }, p.config.opts);
+        });
+        addPendingStore(voteQuestionAnswerFx.pending);
+        const voteResult = requestResponseSplitFirst(voteQuestionAnswerFx.doneData);
+        // success
+        forward({
+            from: msgFilter(voteQuestionAnswerFx.done, (p) => {
+                if (p.delete)
+                    return "question_answer_vote_deleted";
+                return p.y ? "question_answer_voted_yes" : "question_answer_voted_no";
+            }),
+            to: message,
+        });
+        questions.on(voteResult.data, replaceQuestion);
+        ownQuestions.on(voteResult.data, replaceQuestion);
+        // failure
+        forward({
+            from: voteResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteQuestionAnswerYes, (config, [questionID, questionAnswerID]) => ({
+                config,
+                questionID,
+                questionAnswerID,
+                y: true,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: voteQuestionAnswerFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteQuestionAnswerNo, (config, [questionID, questionAnswerID]) => ({
+                config,
+                questionID,
+                questionAnswerID,
+                y: false,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: voteQuestionAnswerFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, voteQuestionAnswerDelete, (config, [questionID, questionAnswerID]) => ({
+                config,
+                questionID,
+                questionAnswerID,
+                y: false,
+                delete: true,
+            })),
+            filter: everythingIdle,
+            target: voteQuestionAnswerFx,
+        });
+    }
+    //================================================================================================================
+    // FLAG QUESTION ANSWER
+    //================================================================================================================
+    const flagQuestionAnswer = createEvent();
+    const flagQuestionAnswerDelete = createEvent();
+    {
+        const flagQuestionAnswerFx = createEffect(async (p) => {
+            const resp = await request(config.graphql.flagQuestionAnswerMutation)({ shopID: p.config.shopID, questionAnswerID: p.questionAnswerID, delete: p.delete }, p.config.opts);
+            if (resp.kind !== "data")
+                return resp;
+            return request(config.graphql.getQuestionQuery)({ shopID: p.config.shopID, questionID: p.questionID }, p.config.opts);
+        });
+        addPendingStore(flagQuestionAnswerFx.pending);
+        const flagResult = requestResponseSplitFirst(flagQuestionAnswerFx.doneData);
+        // success
+        forward({
+            from: msgFilter(flagQuestionAnswerFx.done, (p) => p.delete ? "question_answer_unflagged" : "question_answer_flagged"),
+            to: message,
+        });
+        questions.on(flagResult.data, replaceQuestion);
+        ownQuestions.on(flagResult.data, replaceQuestion);
+        // failure
+        forward({
+            from: flagResult.error,
+            to: unexpectedError,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, flagQuestionAnswer, (config, [questionID, questionAnswerID]) => ({
+                config,
+                questionID,
+                questionAnswerID,
+                delete: false,
+            })),
+            filter: everythingIdle,
+            target: flagQuestionAnswerFx,
+        });
+        guard({
+            source: sample(configWithJWTAndLocale, flagQuestionAnswerDelete, (config, [questionID, questionAnswerID]) => ({
+                config,
+                questionID,
+                questionAnswerID,
+                delete: true,
+            })),
+            filter: everythingIdle,
+            target: flagQuestionAnswerFx,
+        });
+    }
+    const somethingPending = combineSome(...pendingStores);
+    const somethingPendingButImageUpload = combineSome(...pendingStoresButImageUpload);
+    forward({
+        from: somethingPending.map((v) => !v),
+        to: everythingIdle,
+    });
+    forward({
+        from: somethingPendingButImageUpload.map((v) => !v),
+        to: everythingIdleButImageUpload,
+    });
+    forward({
+        from: [setReviewsSortBy.map(() => "replace"), setReviewsSortDesc.map(() => "replace")],
+        to: loadMoreReviewsGeneric,
+    });
+    forward({
+        from: [setQuestionsSortBy.map(() => "replace"), setQuestionsSortDesc.map(() => "replace")],
+        to: loadMoreQuestionsGeneric,
+    });
+    forward({
+        from: loadMoreReviews.map(() => "append"),
+        to: loadMoreReviewsGeneric,
+    });
+    forward({
+        from: loadMoreQuestions.map(() => "append"),
+        to: loadMoreQuestionsGeneric,
+    });
+    // a special event which is fired when user invokes some event which requires auth, but jwt is missing
+    const signInRequired = createEvent();
+    return {
+        signInRequired,
+        message,
+        load,
+        unexpectedError,
+        product,
+        images,
+        reviews,
+        reviewsSortBy,
+        reviewsSortDesc,
+        setReviewsSortBy,
+        setReviewsSortDesc,
+        questions,
+        questionsSortBy,
+        questionsSortDesc,
+        setQuestionsSortBy,
+        setQuestionsSortDesc,
+        ownReview,
+        ownQuestions,
+        somethingPending,
+        forms,
+        voteReviewYes: wrapSignInRequired(config.jwt, signInRequired, voteReviewYes),
+        voteReviewNo: wrapSignInRequired(config.jwt, signInRequired, voteReviewNo),
+        voteReviewDelete: wrapSignInRequired(config.jwt, signInRequired, voteReviewDelete),
+        flagReview: wrapSignInRequired(config.jwt, signInRequired, flagReview),
+        flagReviewDelete: wrapSignInRequired(config.jwt, signInRequired, flagReviewDelete),
+        voteQuestionYes: wrapSignInRequired(config.jwt, signInRequired, voteQuestionYes),
+        voteQuestionNo: wrapSignInRequired(config.jwt, signInRequired, voteQuestionNo),
+        voteQuestionDelete: wrapSignInRequired(config.jwt, signInRequired, voteQuestionDelete),
+        flagQuestion: wrapSignInRequired(config.jwt, signInRequired, flagQuestion),
+        flagQuestionDelete: wrapSignInRequired(config.jwt, signInRequired, flagQuestionDelete),
+        deleteReview: wrapSignInRequired(config.jwt, signInRequired, deleteReview),
+        deleteQuestion: wrapSignInRequired(config.jwt, signInRequired, deleteQuestion),
+        deleteQuestionAnswer: wrapSignInRequired(config.jwt, signInRequired, deleteQuestionAnswer),
+        voteQuestionAnswerYes: wrapSignInRequired(config.jwt, signInRequired, voteQuestionAnswerYes),
+        voteQuestionAnswerNo: wrapSignInRequired(config.jwt, signInRequired, voteQuestionAnswerNo),
+        voteQuestionAnswerDelete: wrapSignInRequired(config.jwt, signInRequired, voteQuestionAnswerDelete),
+        flagQuestionAnswer: wrapSignInRequired(config.jwt, signInRequired, flagQuestionAnswer),
+        flagQuestionAnswerDelete: wrapSignInRequired(config.jwt, signInRequired, flagQuestionAnswerDelete),
+        totalReviews,
+        totalQuestions,
+        canLoadMoreReviews,
+        canLoadMoreQuestions,
+        loadMoreReviews,
+        loadMoreQuestions,
+    };
+}