@lana-commerce/core 11.0.0

package/esm/modules/customer.js

@@ -0,0 +1,2198 @@
+import jwtDecode from "jwt-decode";
+import { combine, createEffect, createEvent, createStore, forward, guard, restore, sample, } from "effector";
+import applyGiftCardMutation from "../graphql/operations/ApplyGiftCardMutation.js";
+import cancelOrderMutation from "../graphql/operations/CancelOrderMutation.js";
+import cancelSubscriptionMutation from "../graphql/operations/CancelSubscriptionMutation.js";
+import connectOAuth2Mutation from "../graphql/operations/ConnectOAuth2Mutation.js";
+import createFavoriteMutation from "../graphql/operations/CreateFavoriteMutation.js";
+import createPaymentSourceMutation from "../graphql/operations/CreatePaymentSourceMutation.js";
+import createReturnMutation from "../graphql/operations/CreateReturnMutation.js";
+import deleteFavoriteMutation from "../graphql/operations/DeleteFavoriteMutation.js";
+import deletePaymentSourceMutation from "../graphql/operations/DeletePaymentSourceMutation.js";
+import disconnectOAuth2Mutation from "../graphql/operations/DisconnectOAuth2Mutation.js";
+import editSubscriptionMutation from "../graphql/operations/EditSubscriptionMutation.js";
+import getCustomerAddressesPageDataQuery from "../graphql/operations/GetCustomerAddressesPageDataQuery.js";
+import getCustomerBalanceHistoryPageQuery from "../graphql/operations/GetCustomerBalanceHistoryPageQuery.js";
+import getCustomerBalanceQuery from "../graphql/operations/GetCustomerBalanceQuery.js";
+import getCustomerInfoQuery from "../graphql/operations/GetCustomerInfoQuery.js";
+import getCustomerQuery from "../graphql/operations/GetCustomerQuery.js";
+import getFavoritesQuery from "../graphql/operations/GetFavoritesQuery.js";
+import getOrderQuery from "../graphql/operations/GetOrderQuery.js";
+import getOrdersPageQuery from "../graphql/operations/GetOrdersPageQuery.js";
+import getPaymentMethodsPageDataQuery from "../graphql/operations/GetPaymentMethodsPageDataQuery.js";
+import getProvincesQuery from "../graphql/operations/GetProvincesQuery.js";
+import getReturnCreationInfoQuery from "../graphql/operations/GetReturnCreationInfoQuery.js";
+import getReturnQuery from "../graphql/operations/GetReturnQuery.js";
+import getReturnsPageQuery from "../graphql/operations/GetReturnsPageQuery.js";
+import getSubscriptionQuery from "../graphql/operations/GetSubscriptionQuery.js";
+import getSubscriptionsPageQuery from "../graphql/operations/GetSubscriptionsPageQuery.js";
+import modifyCustomerMutation from "../graphql/operations/ModifyCustomerMutation.js";
+import modifyFavoriteMutation from "../graphql/operations/ModifyFavoriteMutation.js";
+import newPasswordMutation from "../graphql/operations/NewPasswordMutation.js";
+import pauseSubscriptionMutation from "../graphql/operations/PauseSubscriptionMutation.js";
+import resetPasswordMutation from "../graphql/operations/ResetPasswordMutation.js";
+import resumeSubscriptionMutation from "../graphql/operations/ResumeSubscriptionMutation.js";
+import signInMutation from "../graphql/operations/SignInMutation.js";
+import signInViaEmailCompleteMutation from "../graphql/operations/SignInViaEmailCompleteMutation.js";
+import signInViaEmailInitMutation from "../graphql/operations/SignInViaEmailInitMutation.js";
+import signUpMutation from "../graphql/operations/SignUpMutation.js";
+import skipNextSubscriptionMutation from "../graphql/operations/SkipNextSubscriptionMutation.js";
+import verifyCodeMutation from "../graphql/operations/VerifyCodeMutation.js";
+import { ErrorCode } from "../generated/codes.js";
+import { request, requestMulti } from "../request.js";
+import { mapInvalidInput } from "../mapInvalidInput.js";
+import { matchCVCErrorFromRR, matchExpiryErrorFromRR, matchNumberErrorFromRR, } from "../stripeError.js";
+import { validEmail, validMaxLength160, validMaxLength190, validMaxLength250, validMaxLength32, validMaxLength80, validNonEmpty, } from "../effector/validator.js";
+import { addEmptyListItem } from "../addEmptyListItem.js";
+import { combineEvery } from "../effector/combineEvery.js";
+import { combineSome } from "../effector/combineSome.js";
+import { compact } from "../compact.js";
+import { createBooleanField, createEnumField, createForm, createFormWithCustomError, createStringField, } from "../effector/form.js";
+import { deserialize, serialize } from "./persist.js";
+import { generateRandomToken } from "../generateRandomToken.js";
+import { getTimezone } from "../getTimezone.js";
+import { lastValue } from "../lastValue.js";
+import { mapResponseData } from "../mapResponseData.js";
+import { multiResponseToResponse } from "../multiResponseToResponse.js";
+import { nonNull } from "../nonNull.js";
+import { requestResponseSplit, requestResponseSplitFirst } from "../effector/requestResponse.js";
+import { splitMap } from "../effector/split.js";
+async function getCustomerInfo(shopID, id, opts) {
+    if (!opts?.authToken)
+        return null;
+    const resp = await requestMulti(getCustomerInfoQuery)({ shopID, id }, opts);
+    if (resp.kind === "data_or_error" && resp.data) {
+        const { customer, favorites } = resp.data;
+        if (customer && favorites) {
+            return {
+                customer: customer[0],
+                favorites: compact(favorites.map((f) => f.variant
+                    ? {
+                        id: f.id,
+                        variantID: f.variant.id,
+                        inventoryNotification: f.inventory_notification,
+                        priceNotification: f.price_notification,
+                    }
+                    : undefined)),
+            };
+        }
+    }
+    return null;
+}
+export function createVariantMap(order) {
+    const out = {};
+    for (const li of order.line_items) {
+        if (!li.variant)
+            continue;
+        out[li.variant.id] = li.variant;
+        if (li.variant.type === "bundle" && li.variant.bundle_line_items.length > 0) {
+            for (const bli of li.variant.bundle_line_items) {
+                if (!bli.variant)
+                    continue;
+                out[bli.variant.id] = bli.variant;
+            }
+        }
+    }
+    return out;
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function formToBillingDetails(form) {
+    return {
+        name: form.name,
+        address: {
+            line1: form.address,
+            line2: "",
+            city: form.city,
+            postal_code: form.zip,
+            country: form.country,
+            state: form.province,
+        },
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createAvailableProvincesLogic(binding, validators) {
+    // note that logic is only correct if fields start with these values: [], "", ""
+    const availableProvinces = createStore([]);
+    const country = createStringField("country", "", validators);
+    const province = createStringField("province", "", validators);
+    const clearProvince = createEvent();
+    // really clear province, this ignores initialValue
+    province.value.on(clearProvince, () => "");
+    province.touched.reset(clearProvince);
+    // once "availableProvinces" changes, check if "province" is valid, if not -> clear "province"
+    guard({
+        source: availableProvinces,
+        filter: combine(province.value, availableProvinces, (province, availableProvinces) => !availableProvinces.find((p) => p.code === province)),
+        target: clearProvince,
+    });
+    // "getProvincesFx" and its logic
+    const getProvincesFx = createEffect(lastValue(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(getProvincesQuery)({ shopID, countryCode: p.data }, opts);
+    }));
+    {
+        const getProvincesLastValue = getProvincesFx.doneData.filterMap((v) => v.kind === "resolved" ? v.value : undefined);
+        const getProvincesResult = requestResponseSplit(getProvincesLastValue);
+        // success, apply "availableProvinces"
+        availableProvinces.on(getProvincesResult.data, (_, v) => v);
+        // failure, reset "availableProvinces" and report error
+        availableProvinces.reset(getProvincesResult.error);
+        forward({
+            from: getProvincesResult.error,
+            to: binding.unexpectedError,
+        });
+    }
+    // on "country" changes
+    // 1. if "country" is empty
+    //       -> clear "availableProvinces"
+    //       -> clear "province" field
+    // 2. if "country" is not empty
+    //       -> run "getProvincesFx", it will change "availableProvinces" once resolved
+    const countryChanged = sample(binding.internalConfig, country.value.updates, (config, data) => ({
+        config,
+        data,
+    }));
+    availableProvinces.reset(country.value.updates.filterMap((v) => (!v ? true : undefined)));
+    guard({
+        source: countryChanged,
+        filter: (v) => !!v.data,
+        target: getProvincesFx,
+    });
+    guard({
+        source: countryChanged,
+        filter: (v) => !v.data,
+        target: clearProvince,
+    });
+    return {
+        availableProvinces,
+        country,
+        province,
+    };
+}
+export function isSamePageParam(a, b) {
+    // TODO: probably I can just remove CommonPageParam part and do a deep comparison
+    if (a.kind === "order" && b.kind === "order") {
+        return a.orderID === b.orderID;
+    }
+    else if (a.kind === "create_return" && b.kind === "create_return") {
+        return a.orderID === b.orderID;
+    }
+    else if (a.kind === "subscription" && b.kind === "subscription") {
+        return a.subscriptionID === b.subscriptionID;
+    }
+    else if (a.kind === "return" && b.kind === "return") {
+        return a.returnID === b.returnID;
+    }
+    else if (a.kind === "confirm" && b.kind === "confirm") {
+        return a.token === b.token;
+    }
+    else {
+        return a.kind === b.kind;
+    }
+}
+function defineInit(binding, fn) {
+    const event = createEvent();
+    const load = createEvent();
+    const loadFx = createEffect((p) => fn(p.config, p.param));
+    const loadParam = load.map((p) => p.param);
+    const { initPageSuccess: success, initPageFailure: failure } = splitRequestResponseData(loadFx.doneData);
+    guard({
+        source: sample(binding.internalConfig, load, (config, param) => ({ config, param })),
+        filter: binding.everythingIdle,
+        target: loadFx,
+    });
+    forward({
+        from: success,
+        to: event,
+    });
+    forward({
+        from: failure,
+        to: binding.unexpectedError,
+    });
+    return {
+        event,
+        load,
+        loaded: sample(loadParam, success),
+        pending: loadFx.pending,
+    };
+}
+function defineInitBlank(binding) {
+    return defineInit(binding, async () => ({ kind: "data", data: null }));
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function splitRequestResponseData(source) {
+    const initPageSuccess = createEvent();
+    const initPageFailure = createEvent();
+    splitMap(source)
+        .map((v) => (v.kind === "data" ? v.data : undefined), initPageSuccess)
+        .fallback(initPageFailure);
+    return { initPageSuccess, initPageFailure };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+// pages you're not allowed to be in, while being logged in
+const disallowedAuthPages = {
+    signup: true,
+    signin: true,
+};
+// it's not allowed to store these pages as lastAuthPage
+const disallowedLastAuthPages = {
+    ...disallowedAuthPages,
+    reset_password: true,
+    order: true,
+    create_return: true,
+    subscription: true,
+    return: true,
+    confirm: true,
+};
+// only pages you're allowed to be in, while NOT being logged in
+const allowedNoAuthPages = {
+    signup: true,
+    signin: true,
+    confirm: true,
+    reset_password: true,
+};
+function shouldRedirect(jwt, pp, lastAuthPage) {
+    if (jwt) {
+        if (disallowedAuthPages[pp.kind]) {
+            return lastAuthPage
+                ? { ...lastAuthPage, action: pp.action === "pop" ? "pop_redirect" : "push_redirect" }
+                : { kind: "orders", action: pp.action === "pop" ? "pop_redirect" : "push_redirect" };
+        }
+    }
+    else {
+        if (!allowedNoAuthPages[pp.kind]) {
+            return { kind: "signin", action: pp.action === "pop" ? "pop_redirect" : "push_redirect" };
+        }
+    }
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createFormToggleState(binding, form) {
+    const toggleForReal = createEvent();
+    const toggleFormVisibility = createEvent();
+    const isFormVisible = createStore(false);
+    // form ui logic
+    {
+        guard({
+            source: toggleFormVisibility,
+            filter: binding.everythingIdle,
+            target: toggleForReal,
+        });
+        // toggle form visibility
+        isFormVisible.on(toggleForReal, (v) => !v);
+        // when form visibility changes, on false => true transition reset the form also
+        forward({
+            from: isFormVisible.updates.filterMap((v) => v || undefined),
+            to: form.reset,
+        });
+    }
+    return {
+        toggleFormVisibility,
+        isFormVisible,
+    };
+}
+function handleFormFailure(c, ...prefixMaps) {
+    const source = c.source || createEvent();
+    sample({
+        source,
+        clock: c.form.errorPropagationFailed,
+        target: c.unexpectedError,
+    });
+    splitMap(source)
+        .map((e) => mapInvalidInput(e, ...prefixMaps), c.form.propagateErrors)
+        .fallback(c.unexpectedError);
+    return source;
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createSignupPageGraph(binding) {
+    const init = defineInitBlank(binding);
+    const form = createForm({
+        name: createStringField("name", "", [validNonEmpty, validMaxLength250]),
+        email: createStringField("email", "", [validNonEmpty, validEmail, validMaxLength250]),
+        password: createStringField("password", "", [validNonEmpty]),
+        accepts_marketing: createBooleanField("accepts_marketing", false),
+    });
+    forward({
+        from: init.event,
+        to: form.reset,
+    });
+    const signupFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(signUpMutation)({ shopID, data: p.data }, opts);
+    });
+    guard({
+        source: sample(binding.internalConfig, form.submitted, (config, data) => ({
+            config,
+            data: { ...data, timezone_hint: getTimezone() },
+        })),
+        filter: binding.everythingIdle,
+        target: signupFx,
+    });
+    const { data: signupData, error: signupError } = requestResponseSplit(signupFx.doneData);
+    // success
+    forward({
+        from: signupData.filterMap((v) => v[0].token || undefined),
+        to: binding.setJWT,
+    });
+    // failure
+    handleFormFailure({ source: signupError, form, unexpectedError: binding.unexpectedError }, { from: "[0]." });
+    return {
+        init,
+        form,
+        somethingIsPending: combineSome(init.pending, signupFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createResetPasswordPageGraph(binding) {
+    const init = defineInitBlank(binding);
+    // forms, we use shared fields here
+    const resetPasswordForm = createFormWithCustomError({
+        email: createStringField("email", "", [validNonEmpty, validEmail, validMaxLength250]),
+    }, null);
+    const verifyCodeForm = createFormWithCustomError({
+        code: createStringField("code", "", [validNonEmpty]),
+    }, null);
+    const newPasswordForm = createForm({
+        password: createStringField("password", "", [validNonEmpty]),
+    });
+    const setStep = createEvent();
+    const currentStep = restore(setStep, { kind: "step1", form: resetPasswordForm });
+    forward({
+        from: init.event,
+        to: [resetPasswordForm.reset, verifyCodeForm.reset, newPasswordForm.reset],
+    });
+    currentStep.reset(init.event);
+    // API requests
+    const noAuthConfig = binding.internalConfig.map((v) => ({
+        ...v,
+        opts: {
+            ...v.opts,
+            authToken: undefined,
+        },
+    }));
+    const resetPasswordFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(resetPasswordMutation)({ shopID, data: p.data }, opts);
+    });
+    const verifyCodeFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(verifyCodeMutation)({ shopID, data: p.data }, opts);
+    });
+    const newPasswordFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(newPasswordMutation)({ shopID, data: p.data }, opts);
+    });
+    // wire each form to its own API request
+    const step2Submitted = sample(resetPasswordForm.submitted, verifyCodeForm.submitted, (a, b) => ({ ...a, ...b }));
+    const step3Submitted = sample(step2Submitted, newPasswordForm.submitted, (a, b) => ({ ...a, ...b }));
+    guard({
+        source: sample(noAuthConfig, resetPasswordForm.submitted, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: resetPasswordFx,
+    });
+    guard({
+        source: sample(noAuthConfig, step2Submitted, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: verifyCodeFx,
+    });
+    guard({
+        source: sample(noAuthConfig, step3Submitted, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: newPasswordFx,
+    });
+    // split API response results
+    const resetPasswordResult = requestResponseSplit(resetPasswordFx.doneData);
+    const verifyCodeResult = requestResponseSplit(verifyCodeFx.doneData);
+    const newPasswordResult = requestResponseSplit(newPasswordFx.doneData);
+    // SUCCESS
+    {
+        // form 1 => form 2
+        forward({
+            from: resetPasswordResult.data.map(() => ({ kind: "step2", form: verifyCodeForm })),
+            to: setStep,
+        });
+        // form 2 => form 3
+        forward({
+            from: verifyCodeResult.data.map(() => ({ kind: "step3", form: newPasswordForm })),
+            to: setStep,
+        });
+        // form 3 => drop auth, go to signin page
+        forward({
+            from: newPasswordResult.data.map(() => ""),
+            to: binding.setJWT,
+        });
+        forward({
+            from: newPasswordResult.data.map(() => ({ kind: "signin", action: "push" })),
+            to: binding.goTo,
+        });
+    }
+    // FAILURE
+    {
+        // form 1
+        splitMap(resetPasswordResult.error)
+            .map((e) => e.kind === "error" && e.error.apiError?.code === ErrorCode.TryAgainLater ? "try_again_later" : undefined, resetPasswordForm.setError)
+            .fallback(handleFormFailure({ form: resetPasswordForm, unexpectedError: binding.unexpectedError }));
+        // form 2
+        splitMap(verifyCodeResult.error)
+            .map((e) => (e.kind === "error" && e.error.apiError?.code === ErrorCode.NotFound ? "not_found" : undefined), verifyCodeForm.setError)
+            .fallback(handleFormFailure({ form: verifyCodeForm, unexpectedError: binding.unexpectedError }));
+        // form 3
+        handleFormFailure({
+            source: newPasswordResult.error,
+            form: newPasswordForm,
+            unexpectedError: binding.unexpectedError,
+        });
+    }
+    return {
+        init,
+        currentStep,
+        somethingIsPending: combineSome(init.pending, resetPasswordFx.pending, verifyCodeFx.pending, newPasswordFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createPaymentMethodsPageGraph(binding) {
+    const init = defineInit(binding, async (config, _p) => {
+        const { shopID, opts } = config;
+        const jwt = jwtDecode(nonNull(opts?.authToken, "auth token"));
+        return multiResponseToResponse(await requestMulti(getPaymentMethodsPageDataQuery)({ shopID, customerID: jwt.customer_id }, opts), (v) => {
+            const { countries, storefrontPaymentSources, storefrontCustomers, analyticsGeoip } = v;
+            return countries && storefrontPaymentSources && storefrontCustomers && analyticsGeoip
+                ? {
+                    availableCountries: addEmptyListItem(countries.map((v) => ({ value: v.code, label: v.name }))),
+                    customer: storefrontCustomers[0],
+                    paymentMethods: storefrontPaymentSources,
+                    geoip: analyticsGeoip,
+                }
+                : undefined;
+        });
+    });
+    const pageData = createStore(null);
+    pageData.on(init.event, (_, v) => v);
+    const { availableProvinces, country, province } = createAvailableProvincesLogic(binding, []);
+    const setStripeElement = createEvent();
+    const stripeElement = restore(setStripeElement, null).reset(init.event);
+    const form = createForm({
+        name: createStringField("name", "", []),
+        address: createStringField("address", "", []),
+        city: createStringField("city", "", []),
+        zip: createStringField("zip", "", []),
+        country,
+        province,
+        as_default: createBooleanField("as_default", false),
+    });
+    const formToggleState = createFormToggleState(binding, form);
+    formToggleState.isFormVisible.reset(init.event);
+    forward({
+        from: init.event,
+        to: form.reset,
+    });
+    forward({
+        from: init.event.map((v) => {
+            const dbid = v.customer.default_billing_address_id;
+            const dsid = v.customer.default_shipping_address_id;
+            const addrs = v.customer.addresses;
+            const addr = addrs.find((a) => a.id === dbid) || addrs.find((a) => a.id === dsid) || addrs.find(() => true);
+            if (addr) {
+                return {
+                    name: addr.name,
+                    address: addr.address1,
+                    city: addr.city,
+                    zip: addr.zip,
+                    country: addr.country?.code || "",
+                    province: addr.province?.code || "",
+                };
+            }
+            else {
+                return {
+                    name: "",
+                    address: "",
+                    city: "",
+                    zip: "",
+                    country: v.geoip.country?.code || "",
+                    province: v.geoip.province?.code || "",
+                };
+            }
+        }),
+        to: form.init,
+    });
+    const additionalFormSubmitData = combine(stripeElement, binding.internalConfig, (stripeElement, config) => ({
+        stripeElement,
+        config,
+    }));
+    const addPaymentMethodFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        const jwt = jwtDecode(nonNull(opts?.authToken, "auth token"));
+        if (!p.config.stripePromise)
+            return { kind: "custom_error", text: "stripePromise is not defined in config" };
+        if (!p.data.stripeElement)
+            return { kind: "custom_error", text: "stripeElement is not set" };
+        const stripe = await p.config.stripePromise;
+        if (!stripe)
+            return { kind: "custom_error", text: "failed loading stripe library" };
+        const result = await stripe.createPaymentMethod({
+            type: "card",
+            card: p.data.stripeElement,
+            billing_details: p.data.billingDetails,
+        });
+        if (result.error)
+            return {
+                kind: "custom_error",
+                text: "createPaymentMethod error: " + result.error.message || "\n" + JSON.stringify(result.error, null, 2),
+            };
+        const payment_method = result.paymentMethod.id;
+        const resp = await request(createPaymentSourceMutation)({ shopID, data: { payment_method } }, opts);
+        if (resp.kind !== "data")
+            return resp;
+        const default_payment_source_id = resp.data[0].id;
+        if (p.data.asDefault) {
+            const resp = await request(modifyCustomerMutation)({ shopID, id: jwt.customer_id, data: { default_payment_source_id } }, opts);
+            if (resp.kind !== "data")
+                return resp;
+        }
+        return { kind: "data", data: true };
+    });
+    const deletePaymentMethodFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(deletePaymentSourceMutation)({ shopID, id: p.data }, opts);
+    });
+    function initStripeField() {
+        const setInvalid = createEvent();
+        const setComplete = createEvent();
+        const setAPIError = createEvent();
+        const touched = createStore(false).reset(init.event).reset(form.reset);
+        const complete = restore(setComplete, false).reset(init.event).reset(form.reset);
+        const invalid = restore(setInvalid, null).reset(init.event).reset(form.reset);
+        const apiError = restore(setAPIError, null).reset(init.event).reset(form.reset);
+        const error = combine(touched, invalid, complete, apiError, (touched, invalid, complete, apiError) => {
+            if (apiError)
+                return apiError;
+            if (invalid)
+                return invalid;
+            if (touched && !complete)
+                return "incomplete";
+            return null;
+        });
+        return {
+            setAPIError,
+            setInvalid,
+            setComplete,
+            touched,
+            complete,
+            invalid,
+            apiError,
+            error,
+        };
+    }
+    const stripeNumber = initStripeField();
+    const stripeExpiry = initStripeField();
+    const stripeCVC = initStripeField();
+    const stripeComplete = combineEvery(stripeNumber.complete, stripeExpiry.complete, stripeCVC.complete);
+    forward({
+        from: form.submit.map(() => true),
+        to: [stripeNumber.touched, stripeExpiry.touched, stripeCVC.touched],
+    });
+    guard({
+        source: sample(additionalFormSubmitData, form.submitted, (adata, data) => ({
+            config: adata.config,
+            data: {
+                billingDetails: formToBillingDetails(data),
+                asDefault: data.as_default,
+                stripeElement: adata.stripeElement,
+            },
+        })),
+        filter: combine(binding.everythingIdle, stripeComplete, (a, b) => a && b),
+        target: addPaymentMethodFx,
+    });
+    const addPaymentMethodResult = requestResponseSplit(addPaymentMethodFx.doneData);
+    // success
+    forward({
+        from: addPaymentMethodResult.data,
+        to: binding.reloadPage,
+    });
+    // failure
+    forward({
+        // reset api errors "first"
+        from: addPaymentMethodResult.error.map(() => null),
+        to: [stripeNumber.setAPIError, stripeExpiry.setAPIError, stripeCVC.setAPIError],
+    });
+    splitMap(addPaymentMethodResult.error)
+        .map(matchNumberErrorFromRR, stripeNumber.setAPIError)
+        .map(matchExpiryErrorFromRR, stripeExpiry.setAPIError)
+        .map(matchCVCErrorFromRR, stripeCVC.setAPIError)
+        .fallback(handleFormFailure({ form, unexpectedError: binding.unexpectedError }));
+    const deletePaymentMethodResult = requestResponseSplit(deletePaymentMethodFx.doneData);
+    // success
+    forward({
+        from: deletePaymentMethodResult.data,
+        to: binding.reloadPage,
+    });
+    // failure
+    forward({
+        from: deletePaymentMethodResult.error,
+        to: binding.unexpectedError,
+    });
+    const deletePaymentMethod = createEvent();
+    guard({
+        source: sample(binding.internalConfig, deletePaymentMethod, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: deletePaymentMethodFx,
+    });
+    return {
+        init,
+        form,
+        ...formToggleState,
+        pageData,
+        availableProvinces: availableProvinces.map((v) => addEmptyListItem(v.map((v) => ({ value: v.code, label: v.name })))),
+        somethingIsPending: combineSome(init.pending, addPaymentMethodFx.pending, deletePaymentMethodFx.pending),
+        setStripeElement,
+        stripeNumber,
+        stripeExpiry,
+        stripeCVC,
+        deletePaymentMethod,
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createOrdersPageGraph(binding) {
+    const init = defineInit(binding, async (config, _p) => {
+        const { shopID, opts } = config;
+        return mapResponseData(await request(getOrdersPageQuery)({ shopID, lastKey: "" }, opts), (v) => ({
+            orders: v.items,
+            lastKey: v.last_key,
+        }));
+    });
+    const getPageFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(getOrdersPageQuery)({ shopID, lastKey: p.data }, opts);
+    });
+    const loadMore = createEvent();
+    // init orders and last key stores from API response
+    const orders = createStore([]);
+    const lastKey = createStore("");
+    orders.on(init.event, (_, v) => v.orders);
+    lastKey.on(init.event, (_, v) => v.lastKey);
+    // on loadMore, sample lastKey and fetch next page (if not already pending)
+    guard({
+        source: sample(binding.internalConfig, sample(lastKey, loadMore), (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: getPageFx,
+    });
+    const { data: getPageData, error: getPageError } = requestResponseSplit(getPageFx.doneData);
+    // success: propagate new data to stores (note, last key is only applied when it's there)
+    orders.on(getPageData.map((v) => v.items), (orders, newOrders) => [...orders, ...newOrders]);
+    lastKey.on(getPageData.filterMap((v) => v.last_key || undefined), (_, v) => v);
+    // error: report unexpected error
+    forward({ from: getPageError, to: binding.unexpectedError });
+    return {
+        init,
+        orders,
+        loadMore,
+        somethingIsPending: combineSome(init.pending, getPageFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createSubscriptionsPageGraph(binding) {
+    const init = defineInit(binding, async (config, _p) => {
+        const { shopID, opts } = config;
+        return mapResponseData(await request(getSubscriptionsPageQuery)({ shopID, lastKey: "" }, opts), (v) => ({
+            subscriptions: v.items,
+            lastKey: v.last_key,
+        }));
+    });
+    const getPageFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(getSubscriptionsPageQuery)({ shopID, lastKey: p.data }, opts);
+    });
+    const loadMore = createEvent();
+    // init subscriptions and last key stores from API response
+    const subscriptions = createStore([]);
+    const lastKey = createStore("");
+    subscriptions.on(init.event, (_, v) => v.subscriptions);
+    lastKey.on(init.event, (_, v) => v.lastKey);
+    // on loadMore, sample lastKey and fetch next page (if not already pending)
+    guard({
+        source: sample(binding.internalConfig, sample(lastKey, loadMore), (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: getPageFx,
+    });
+    const { data: getPageData, error: getPageError } = requestResponseSplit(getPageFx.doneData);
+    // success: propagate new data to stores (note, last key is only applied when it's there)
+    subscriptions.on(getPageData.map((v) => v.items), (subscriptions, newSubscriptions) => [...subscriptions, ...newSubscriptions]);
+    lastKey.on(getPageData.filterMap((v) => v.last_key || undefined), (_, v) => v);
+    // error: report unexpected error
+    forward({ from: getPageError, to: binding.unexpectedError });
+    return {
+        init,
+        subscriptions,
+        loadMore,
+        somethingIsPending: combineSome(init.pending, getPageFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createReturnsPageGraph(binding) {
+    const init = defineInit(binding, async (config, _p) => {
+        const { shopID, opts } = config;
+        return mapResponseData(await request(getReturnsPageQuery)({ shopID, lastKey: "" }, opts), (v) => ({
+            returns: v.items,
+            lastKey: v.last_key,
+        }));
+    });
+    const getPageFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(getReturnsPageQuery)({ shopID, lastKey: p.data }, opts);
+    });
+    const loadMore = createEvent();
+    // init returns and last key stores from API response
+    const returns = createStore([]);
+    const lastKey = createStore("");
+    returns.on(init.event, (_, v) => v.returns);
+    lastKey.on(init.event, (_, v) => v.lastKey);
+    // on loadMore, sample lastKey and fetch next page (if not already pending)
+    guard({
+        source: sample(binding.internalConfig, sample(lastKey, loadMore), (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: getPageFx,
+    });
+    const { data: getPageData, error: getPageError } = requestResponseSplit(getPageFx.doneData);
+    // success: propagate new data to stores (note, last key is only applied when it's there)
+    returns.on(getPageData.map((v) => v.items), (returns, newReturns) => [...returns, ...newReturns]);
+    lastKey.on(getPageData.filterMap((v) => v.last_key || undefined), (_, v) => v);
+    // error: report unexpected error
+    forward({ from: getPageError, to: binding.unexpectedError });
+    return {
+        init,
+        returns,
+        loadMore,
+        somethingIsPending: combineSome(init.pending, getPageFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createFavoritesPageGraph(binding) {
+    const init = defineInit(binding, async (config, _p) => {
+        const { shopID, opts } = config;
+        return mapResponseData(await request(getFavoritesQuery)({ shopID }, opts), (v) => ({
+            favorites: v.sort((a, b) => a.created_at.localeCompare(b.created_at)),
+        }));
+    });
+    const favorites = createStore([]);
+    favorites.on(init.event, (_, v) => v.favorites);
+    forward({
+        from: init.event.map((v) => compact(v.favorites.map((v) => v.variant
+            ? {
+                id: v.id,
+                variantID: v.variant.id,
+                inventoryNotification: v.inventory_notification,
+                priceNotification: v.price_notification,
+            }
+            : null))),
+        to: binding.setFavorites,
+    });
+    const addFavoriteFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(createFavoriteMutation)({ shopID, data: p.data }, opts);
+    });
+    const addFavoriteResult = requestResponseSplit(addFavoriteFx.doneData);
+    // success
+    forward({
+        from: addFavoriteResult.data.map(() => "favorites"),
+        to: binding.reloadPageIfActive,
+    });
+    forward({
+        from: addFavoriteFx.done.filterMap((v) => v.result.kind === "data"
+            ? {
+                id: v.result.data[0].id,
+                variantID: v.params.data.variant_id,
+                inventoryNotification: v.result.data[0].inventory_notification,
+                priceNotification: v.result.data[0].price_notification,
+            }
+            : undefined),
+        to: binding.addFavoriteToInfo,
+    });
+    forward({
+        from: addFavoriteResult.data.map(() => "favorite_added"),
+        to: binding.message,
+    });
+    // failure
+    forward({
+        from: addFavoriteResult.error,
+        to: binding.unexpectedError,
+    });
+    const deleteFavoriteFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(deleteFavoriteMutation)({ shopID, id: p.data }, opts);
+    });
+    const deleteFavoriteResult = requestResponseSplit(deleteFavoriteFx.doneData);
+    // success
+    forward({
+        from: deleteFavoriteResult.data.map(() => "favorites"),
+        to: binding.reloadPageIfActive,
+    });
+    forward({
+        from: deleteFavoriteFx.done.filterMap((v) => (v.result.kind === "data" ? v.params.data : undefined)),
+        to: binding.removeFavoriteFromInfo,
+    });
+    forward({
+        from: deleteFavoriteResult.data.map(() => "favorite_deleted"),
+        to: binding.message,
+    });
+    // failure
+    forward({
+        from: deleteFavoriteResult.error,
+        to: binding.unexpectedError,
+    });
+    const modifyFavoriteFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(modifyFavoriteMutation)({ shopID, id: p.data[0], data: p.data[1] }, opts);
+    });
+    const modifyFavoriteResult = requestResponseSplit(modifyFavoriteFx.doneData);
+    // success
+    forward({
+        from: modifyFavoriteResult.data.map(() => "favorites"),
+        to: binding.reloadPageIfActive,
+    });
+    forward({
+        from: modifyFavoriteFx.done.filterMap((v) => v.result.kind === "data"
+            ? {
+                id: v.result.data[0].id,
+                variantID: v.result.data[0].variant?.id || "",
+                inventoryNotification: v.result.data[0].inventory_notification,
+                priceNotification: v.result.data[0].price_notification,
+            }
+            : undefined),
+        to: binding.modifyFavoriteInInfo,
+    });
+    forward({
+        from: modifyFavoriteResult.data.map(() => "favorite_modified"),
+        to: binding.message,
+    });
+    // failure
+    forward({
+        from: modifyFavoriteResult.error,
+        to: binding.unexpectedError,
+    });
+    const deleteFavorite = createEvent();
+    guard({
+        source: sample(binding.internalConfig, deleteFavorite, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: deleteFavoriteFx,
+    });
+    const addFavorite = createEvent();
+    const addFavoriteEx = createEvent();
+    guard({
+        source: sample(binding.internalConfig, addFavorite, (config, variant_id) => ({
+            config,
+            data: { variant_id },
+        })),
+        filter: binding.everythingIdle,
+        target: addFavoriteFx,
+    });
+    guard({
+        source: sample(binding.internalConfig, addFavoriteEx, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: addFavoriteFx,
+    });
+    const modifyFavorite = createEvent();
+    guard({
+        source: sample(binding.internalConfig, modifyFavorite, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: modifyFavoriteFx,
+    });
+    return {
+        init,
+        favorites,
+        addFavorite,
+        addFavoriteEx,
+        modifyFavorite,
+        deleteFavorite,
+        somethingIsPending: combineSome(init.pending, addFavoriteFx.pending, modifyFavoriteFx.pending, deleteFavoriteFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function addressToAPI(addr) {
+    const { country, province, latitude, longitude, ...apiAddr } = addr;
+    return {
+        ...apiAddr,
+        country: addr.country ? addr.country.code : "",
+        province: addr.province ? addr.province.code : "",
+    };
+}
+function createAddressesPageGraph(binding) {
+    const init = defineInit(binding, async (config, _p) => {
+        const { shopID, opts } = config;
+        const jwt = jwtDecode(nonNull(opts?.authToken, "auth token"));
+        return multiResponseToResponse(await requestMulti(getCustomerAddressesPageDataQuery)({ shopID, customerID: jwt.customer_id }, opts), (v) => {
+            const { analyticsGeoip, countries, storefrontCustomers } = v;
+            if (!analyticsGeoip || !countries || !storefrontCustomers) {
+                return undefined;
+            }
+            let geoCountryCode = analyticsGeoip.country?.code || "";
+            let geoProvinceCode = analyticsGeoip.province?.code || "";
+            if (!countries.find((v) => v.code === geoCountryCode)) {
+                geoCountryCode = "";
+                geoProvinceCode = "";
+            }
+            return {
+                availableCountries: addEmptyListItem(countries.map((v) => ({ value: v.code, label: v.name }))),
+                customer: storefrontCustomers[0],
+                geoCountryCode,
+                geoProvinceCode,
+            };
+        });
+    });
+    const { availableProvinces, country, province } = createAvailableProvincesLogic(binding, [validNonEmpty]);
+    const form = createForm({
+        id: createStringField("id", "", []),
+        name: createStringField("name", "", [validNonEmpty, validMaxLength160]),
+        address1: createStringField("address1", "", [validNonEmpty, validMaxLength190]),
+        address2: createStringField("address2", "", [validMaxLength190]),
+        city: createStringField("city", "", [validNonEmpty, validMaxLength80]),
+        zip: createStringField("zip", "", [validNonEmpty, validMaxLength32]),
+        country,
+        province,
+        default_shipping: createBooleanField("default_shipping", false),
+        default_billing: createBooleanField("default_billing", false),
+    });
+    // prefill country/province with geoip data
+    forward({
+        from: init.event.map((v) => v.geoCountryCode),
+        to: form.country.setInitialValue,
+    });
+    forward({
+        from: init.event.map((v) => v.geoProvinceCode),
+        to: form.province.setInitialValue,
+    });
+    const modifyCustomerFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        const jwt = jwtDecode(nonNull(opts?.authToken, "auth token"));
+        return request(modifyCustomerMutation)({ shopID, id: jwt.customer_id, data: p.data }, opts);
+    });
+    const modifyCustomerResult = requestResponseSplitFirst(modifyCustomerFx.doneData);
+    // success
+    forward({
+        from: modifyCustomerResult.data,
+        to: binding.reloadPage,
+    });
+    // failure
+    handleFormFailure({ source: modifyCustomerResult.error, form, unexpectedError: binding.unexpectedError });
+    const pageData = createStore(null);
+    pageData.on(init.event, (_, v) => v);
+    // show form for a particular address
+    const isFormVisible = createStore(false);
+    const addressEditIndex = createStore(-1);
+    const showFormFor = createEvent();
+    const toggleFormVisibility = createEvent();
+    const formVisibilityChanged = createEvent();
+    guard({
+        source: showFormFor.map((index) => ({ visible: true, index })),
+        filter: binding.everythingIdle,
+        target: formVisibilityChanged,
+    });
+    guard({
+        source: sample(isFormVisible, toggleFormVisibility, (v) => ({ visible: !v, index: -1 })),
+        filter: binding.everythingIdle,
+        target: formVisibilityChanged,
+    });
+    forward({
+        from: sample(addressEditIndex, init.event, (index) => ({ visible: false, index })),
+        to: formVisibilityChanged,
+    });
+    forward({
+        from: formVisibilityChanged.map((v) => v.visible),
+        to: isFormVisible,
+    });
+    forward({
+        from: formVisibilityChanged.filterMap((v) => (v.visible ? v.index : undefined)),
+        to: addressEditIndex,
+    });
+    forward({
+        from: sample(pageData, formVisibilityChanged.filterMap((v) => (v.visible ? v : undefined)), (pageData, { index }) => {
+            const empty = {
+                id: "",
+                name: "",
+                address1: "",
+                address2: "",
+                city: "",
+                zip: "",
+                country: "",
+                province: "",
+                default_shipping: false,
+                default_billing: false,
+            };
+            if (index === -1)
+                return empty;
+            const c = pageData?.customer;
+            if (!c)
+                return empty;
+            const a = c.addresses[index];
+            if (!a)
+                return empty;
+            return {
+                id: a.id,
+                name: a.name,
+                address1: a.address1,
+                address2: a.address2,
+                city: a.city,
+                zip: a.zip,
+                country: a.country?.code || "",
+                province: a.province?.code || "",
+                default_shipping: a.id === c.default_shipping_address_id,
+                default_billing: a.id === c.default_billing_address_id,
+            };
+        }),
+        to: form.init,
+    });
+    const formSubmit = sample(combine({ pageData, addressEditIndex }), form.submitted, ({ pageData, addressEditIndex }, data) => {
+        if (addressEditIndex === -1) {
+            const addresses = pageData?.customer.addresses || [];
+            const { default_billing, default_shipping, ...apiData } = data;
+            return {
+                addresses: [
+                    ...addresses.map(addressToAPI),
+                    {
+                        ...apiData,
+                        phone: "",
+                        company: "",
+                    },
+                ],
+                default_billing_address_id: default_billing ? "first" : undefined,
+                default_shipping_address_id: default_shipping ? "first" : undefined,
+            };
+        }
+        else {
+            const { default_billing, default_shipping, ...apiData } = data;
+            const addresses = [...(pageData?.customer.addresses || [])].map(addressToAPI);
+            addresses[addressEditIndex] = { ...apiData, phone: "", company: "" };
+            const prevDB = pageData?.customer.default_billing_address_id === apiData.id;
+            const prevDS = pageData?.customer.default_shipping_address_id === apiData.id;
+            return {
+                addresses,
+                default_billing_address_id: default_billing !== prevDB ? (default_billing ? apiData.id : "") : undefined,
+                default_shipping_address_id: default_shipping !== prevDS ? (default_shipping ? apiData.id : "") : undefined,
+            };
+        }
+    });
+    guard({
+        source: sample(binding.internalConfig, formSubmit, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: modifyCustomerFx,
+    });
+    const deleteAddress = createEvent();
+    const deleteAddressValid = sample(pageData, deleteAddress, (pageData, idx) => {
+        const addressesLength = pageData?.customer.addresses.length || 0;
+        return idx >= 0 && idx < addressesLength ? idx : undefined;
+    }).filterMap((v) => v);
+    const deleteAddressSubmit = sample(pageData, deleteAddressValid, (pageData, idx) => {
+        const dbid = pageData?.customer.default_billing_address_id || "";
+        const dsid = pageData?.customer.default_shipping_address_id || "";
+        const addresses = pageData?.customer.addresses.filter((_, aidx) => aidx !== idx).map(addressToAPI);
+        return {
+            addresses,
+            default_billing_address_id: addresses?.some((a) => a.id === dbid) ? dbid : "",
+            default_shipping_address_id: addresses?.some((a) => a.id === dsid) ? dsid : "",
+        };
+    });
+    const makeDefault = createEvent();
+    const makeDefaultValid = sample(pageData, makeDefault, (pageData, idx) => {
+        const addresses = pageData?.customer.addresses;
+        return addresses && idx >= 0 && idx < addresses.length ? addresses[idx].id : undefined;
+    }).filterMap((v) => v);
+    const makeDefaultSubmit = makeDefaultValid.map((id) => {
+        return {
+            default_billing_address_id: id,
+            default_shipping_address_id: id,
+        };
+    });
+    guard({
+        source: sample(binding.internalConfig, deleteAddressSubmit, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: modifyCustomerFx,
+    });
+    guard({
+        source: sample(binding.internalConfig, makeDefaultSubmit, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: modifyCustomerFx,
+    });
+    return {
+        init,
+        form,
+        showFormFor,
+        toggleFormVisibility,
+        isFormVisible,
+        addressEditIndex,
+        pageData,
+        availableProvinces: availableProvinces.map((v) => addEmptyListItem(v.map((v) => ({ value: v.code, label: v.name })))),
+        deleteAddress,
+        makeDefault,
+        somethingIsPending: combineSome(init.pending, modifyCustomerFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createOrderPageGraph(binding) {
+    const init = defineInit(binding, async (config, p) => {
+        const { shopID, opts } = config;
+        return mapResponseData(await request(getOrderQuery)({ shopID, id: p.param.orderID }, opts), (v) => ({
+            order: v[0],
+        }));
+    });
+    const order = createStore(null).on(init.event, (_, v) => v.order);
+    const cancelOrderFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(cancelOrderMutation)({ shopID, id: p.data }, opts);
+    });
+    const cancelOrderResult = requestResponseSplit(cancelOrderFx.doneData);
+    // success
+    forward({
+        from: cancelOrderResult.data,
+        to: binding.reloadPage,
+    });
+    // failure
+    forward({
+        from: cancelOrderResult.error,
+        to: binding.unexpectedError,
+    });
+    const cancelOrder = createEvent();
+    const canCancelOrder = order.map((o) => o !== null && o.on_hold && !o.canceled_at);
+    guard({
+        source: sample(combine({ config: binding.internalConfig, order }), cancelOrder, ({ config, order }) => ({
+            config,
+            data: order?.id || "",
+        })),
+        filter: combineEvery(binding.everythingIdle, canCancelOrder),
+        target: cancelOrderFx,
+    });
+    return {
+        init,
+        order,
+        cancelOrder,
+        canCancelOrder,
+        somethingIsPending: combineSome(init.pending, cancelOrderFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createSubscriptionPageGraph(binding) {
+    const init = defineInit(binding, async (config, p) => {
+        const { shopID, opts } = config;
+        const jwt = jwtDecode(nonNull(opts?.authToken, "auth token"));
+        return multiResponseToResponse(await requestMulti(getSubscriptionQuery)({ shopID, subscriptionID: p.param.subscriptionID, customerID: jwt.customer_id }, opts), (v) => {
+            if (!v.storefrontSubscriptions || !v.storefrontCustomers)
+                return undefined;
+            return {
+                customer: v.storefrontCustomers?.[0],
+                paymentMethods: v.storefrontPaymentSources || [],
+                subscription: v.storefrontSubscriptions[0],
+            };
+        }, true);
+    });
+    const subscription = createStore(null).on(init.event, (_, v) => v.subscription);
+    const customer = createStore(null).on(init.event, (_, v) => v.customer);
+    const paymentMethods = createStore([]).on(init.event, (_, v) => v.paymentMethods);
+    const form = createForm({
+        billing_address: createEnumField("billing_address", "origin_order", []),
+        billing_address_id: createStringField("billing_address_id", "", []),
+        shipping_address: createEnumField("shipping_address", "origin_order", []),
+        shipping_address_id: createStringField("shipping_address_id", "", []),
+        payment_source: createEnumField("payment_source", "origin_order", []),
+        payment_source_id: createStringField("payment_source_id", "", []),
+    });
+    forward({
+        from: init.event.map((v) => {
+            const s = v.subscription;
+            return {
+                billing_address: s?.billing_address || "origin_order",
+                billing_address_id: s?.billing_address_id || "",
+                shipping_address: s?.shipping_address || "origin_order",
+                shipping_address_id: s?.shipping_address_id || "",
+                payment_source: s?.payment_source || "origin_order",
+                payment_source_id: s?.payment_source_id || "",
+            };
+        }),
+        to: form.init,
+    });
+    const cancel = createEvent();
+    const pause = createEvent();
+    const resume = createEvent();
+    const skipNext = createEvent();
+    const editFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(editSubscriptionMutation)({ shopID, subscriptionID: p.data[0], data: p.data[1] }, opts);
+    });
+    const cancelFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(cancelSubscriptionMutation)({ shopID, subscriptionID: p.data }, opts);
+    });
+    const pauseFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(pauseSubscriptionMutation)({ shopID, subscriptionID: p.data }, opts);
+    });
+    const resumeFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(resumeSubscriptionMutation)({ shopID, subscriptionID: p.data }, opts);
+    });
+    const skipNextFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(skipNextSubscriptionMutation)({ shopID, subscriptionID: p.data }, opts);
+    });
+    const configAndSubscription = combine({ config: binding.internalConfig, subscription });
+    const connectEventToFx = (ev, fx) => {
+        guard({
+            source: sample(configAndSubscription, ev, (cas) => ({
+                config: cas.config,
+                data: cas.subscription?.id || "",
+            })),
+            filter: binding.everythingIdle,
+            target: fx,
+        });
+    };
+    connectEventToFx(cancel, cancelFx);
+    connectEventToFx(pause, pauseFx);
+    connectEventToFx(resume, resumeFx);
+    connectEventToFx(skipNext, skipNextFx);
+    const cancelResult = requestResponseSplit(cancelFx.doneData);
+    const pauseResult = requestResponseSplit(pauseFx.doneData);
+    const resumeResult = requestResponseSplit(resumeFx.doneData);
+    const skipNextResult = requestResponseSplit(skipNextFx.doneData);
+    // success
+    forward({ from: cancelResult.data, to: binding.reloadPage });
+    forward({ from: pauseResult.data, to: binding.reloadPage });
+    forward({ from: resumeResult.data, to: binding.reloadPage });
+    forward({ from: skipNextResult.data, to: binding.reloadPage });
+    // failure
+    forward({ from: cancelResult.error, to: binding.unexpectedError });
+    forward({ from: pauseResult.error, to: binding.unexpectedError });
+    forward({ from: resumeResult.error, to: binding.unexpectedError });
+    forward({ from: skipNextResult.error, to: binding.unexpectedError });
+    const editResult = requestResponseSplit(editFx.doneData);
+    // success
+    forward({
+        from: editResult.data,
+        to: binding.reloadPage,
+    });
+    // failure
+    handleFormFailure({ source: editResult.error, form, unexpectedError: binding.unexpectedError });
+    const formSubmit = sample(subscription, form.submitted, (subscription, data) => {
+        const r = [subscription?.id || "", data];
+        return r;
+    });
+    guard({
+        source: sample(binding.internalConfig, formSubmit, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: editFx,
+    });
+    const setBillingAddressValueAndID = createEvent();
+    const setShippingAddressValueAndID = createEvent();
+    const setPaymentSourceValueAndID = createEvent();
+    forward({ from: setBillingAddressValueAndID.map((v) => v[0]), to: form.billing_address.change });
+    forward({ from: setBillingAddressValueAndID.map((v) => v[1]), to: form.billing_address_id.change });
+    forward({ from: setShippingAddressValueAndID.map((v) => v[0]), to: form.shipping_address.change });
+    forward({ from: setShippingAddressValueAndID.map((v) => v[1]), to: form.shipping_address_id.change });
+    forward({ from: setPaymentSourceValueAndID.map((v) => v[0]), to: form.payment_source.change });
+    forward({ from: setPaymentSourceValueAndID.map((v) => v[1]), to: form.payment_source_id.change });
+    return {
+        init,
+        form,
+        subscription,
+        customer,
+        paymentMethods,
+        cancel,
+        pause,
+        resume,
+        skipNext,
+        somethingIsPending: combineSome(init.pending, editFx.pending, cancelFx.pending, pauseFx.pending, resumeFx.pending, skipNextFx.pending),
+        setBillingAddressValueAndID,
+        setShippingAddressValueAndID,
+        setPaymentSourceValueAndID,
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createReturnPageGraph(binding) {
+    const init = defineInit(binding, async (config, p) => {
+        const { shopID, opts } = config;
+        return multiResponseToResponse(await requestMulti(getReturnQuery)({ shopID, id: p.param.returnID }, opts), (v) => {
+            const { returnReasons: reasons, storefrontReturns } = v;
+            return storefrontReturns
+                ? {
+                    reasons: reasons || [],
+                    ret: storefrontReturns[0],
+                }
+                : undefined;
+        });
+    });
+    const data = createStore(null).on(init.event, (_, v) => v);
+    return {
+        init,
+        data,
+        somethingIsPending: init.pending,
+    };
+}
+function createCreateReturnPageGraph(binding) {
+    const init = defineInit(binding, async (config, p) => {
+        const { shopID, opts } = config;
+        return multiResponseToResponse(await requestMulti(getReturnCreationInfoQuery)({ shopID, id: p.param.orderID }, opts), (v) => {
+            const { storefrontOrderFulfillments: fulfillments, storefrontOrders: orders, storefrontReturnsFindPolicy: policy, returnReasons: reasons, } = v;
+            return fulfillments && orders
+                ? {
+                    fulfillments,
+                    order: orders[0],
+                    policy: policy || null,
+                    reasons: reasons || [],
+                }
+                : undefined;
+        }, true);
+    });
+    const ret = createStore(null);
+    ret.on(init.event, () => null);
+    const refundToCustomerBalance = createStore(false);
+    refundToCustomerBalance.on(init.event, (ov, v) => {
+        const p = v.policy;
+        if (!p)
+            return ov;
+        if (p.refund_option === "customer_balance")
+            return true;
+        return false;
+    });
+    const setRefundToCustomerBalance = createEvent();
+    refundToCustomerBalance.on(setRefundToCustomerBalance, (_, v) => v);
+    const shippingOptionIndex = createStore(0);
+    shippingOptionIndex.reset(init.event);
+    const info = createStore(null);
+    info.on(init.event, (_, v) => v);
+    const setShippingOptionIndex = createEvent();
+    shippingOptionIndex.on(sample(info, setShippingOptionIndex, (info, idx) => {
+        const p = info?.policy;
+        if (!p)
+            return undefined;
+        return Math.max(0, Math.min(idx, p.shipping_options.length - 1));
+    }), (_, v) => v);
+    const items = createStore([]);
+    items.on(init.event, (_, v) => {
+        const vmap = createVariantMap(v.order);
+        return v.fulfillments.map((f) => f.line_items.map((fli) => {
+            const v = vmap[fli.variant_id];
+            const p = v?.product;
+            const quantity = Math.max(0, p?.return_mode === "not_allowed" ? 0 : fli.quantity - fli.returned);
+            return {
+                selected: false,
+                quantity,
+                maxQuantity: quantity,
+                reason: null,
+            };
+        }));
+    });
+    const updateItem = createEvent();
+    items.on(updateItem, (old, [i, j, v]) => {
+        const newItem = { ...old[i][j] };
+        if (v.selected !== undefined)
+            newItem.selected = v.selected;
+        if (v.quantity !== undefined) {
+            newItem.quantity = Math.max(0, Math.min(v.quantity, newItem.maxQuantity));
+        }
+        if (v.reason !== undefined)
+            newItem.reason = v.reason;
+        const newItems = [...old];
+        newItems[i] = [...old[i]];
+        newItems[i][j] = newItem;
+        return newItems;
+    });
+    const submit = createEvent();
+    const createReturnFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(createReturnMutation)({ shopID, data: p.data }, opts);
+    });
+    const preparedData = combine({ config: binding.internalConfig, items, info, refundToCustomerBalance, shippingOptionIndex }, ({ config, items, info, refundToCustomerBalance, shippingOptionIndex }) => {
+        if (!info || !info.policy)
+            return null;
+        const lineItems = [];
+        info.fulfillments.forEach((f, i) => {
+            f.line_items.forEach((fli, j) => {
+                const item = items[i][j];
+                if (!item.selected)
+                    return;
+                if (item.quantity <= 0)
+                    return;
+                lineItems.push({
+                    fulfillment_id: f.id,
+                    line_item_id: fli.line_item_id,
+                    reason: item.reason || "other_reason",
+                    return_quantity: item.quantity,
+                    variant_id: fli.variant_id,
+                });
+            });
+        });
+        if (lineItems.length === 0)
+            return null;
+        const data = {
+            order_id: info.order.id,
+            return_policy_id: info.policy.id,
+            shipping_option_index: shippingOptionIndex,
+            customer_balance: refundToCustomerBalance,
+            line_items: lineItems,
+        };
+        return { config, data };
+    });
+    const canSubmit = preparedData.map((v) => !!v);
+    const submitted = sample(preparedData, submit).filterMap((v) => v || undefined);
+    guard({
+        source: submitted,
+        filter: binding.everythingIdle,
+        target: createReturnFx,
+    });
+    const createReturnResult = requestResponseSplitFirst(createReturnFx.doneData);
+    // success
+    forward({
+        from: createReturnResult.data,
+        to: ret,
+    });
+    // failure
+    forward({
+        from: createReturnResult.error,
+        to: binding.unexpectedError,
+    });
+    return {
+        init,
+        ret,
+        info,
+        items,
+        updateItem,
+        setRefundToCustomerBalance,
+        refundToCustomerBalance,
+        setShippingOptionIndex,
+        shippingOptionIndex,
+        submit,
+        canSubmit,
+        somethingIsPending: combineSome(init.pending, createReturnFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createStoreCreditPageGraph(binding) {
+    const init = defineInit(binding, async (config, p) => {
+        const { shopID, currency, opts } = config;
+        return multiResponseToResponse(await requestMulti(getCustomerBalanceQuery)({ shopID, currency }, opts), (v) => {
+            const { storefrontCustomerBalance: customerBalance, storefrontCustomerBalanceHistory: history } = v;
+            return customerBalance && history
+                ? {
+                    customerBalance,
+                    history,
+                    currency,
+                    resetSuccess: p.previousPageKind !== "store_credit",
+                }
+                : undefined;
+        });
+    });
+    const getPageFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return mapResponseData(await request(getCustomerBalanceHistoryPageQuery)({ shopID, ...p.data }, opts), (data) => {
+            return { ...data, isFirstPage: p.data.lastKey === "", currency: p.data.currency };
+        });
+    });
+    const setCurrency = createEvent();
+    const loadMore = createEvent();
+    const redeemedGiftCard = createEvent();
+    const customerBalance = createStore(null).on(init.event, (_, v) => v.customerBalance);
+    const history = createStore([]);
+    const lastKey = createStore("");
+    const historyCurrency = createStore("");
+    const currency = createStore("");
+    history.on(init.event, (_, v) => v.history.items);
+    lastKey.on(init.event, (_, v) => v.history.last_key);
+    historyCurrency.on(init.event, (_, v) => v.currency);
+    currency.on(init.event, (_, v) => v.currency);
+    // on currency change and if it's some new currency, reload history
+    {
+        const currencyChangeAccepted = guard({
+            source: guard({
+                source: sample(historyCurrency, setCurrency, (historyCurrency, currency) => ({ historyCurrency, currency })),
+                filter: (source) => source.currency !== source.historyCurrency,
+            }),
+            filter: binding.everythingIdle,
+        });
+        forward({
+            from: sample(binding.internalConfig, currencyChangeAccepted, (config, v) => ({
+                config,
+                data: { lastKey: "", currency: v.currency },
+            })),
+            to: getPageFx,
+        });
+        forward({
+            from: currencyChangeAccepted.map((v) => v.currency),
+            to: currency,
+        });
+    }
+    // on loadMore, sample lastKey, currency and fetch next page (if not already pending)
+    guard({
+        source: sample(combine({ config: binding.internalConfig, lastKey, historyCurrency }), loadMore, (s) => ({
+            config: s.config,
+            data: { lastKey: s.lastKey, currency: s.historyCurrency },
+        })),
+        filter: binding.everythingIdle,
+        target: getPageFx,
+    });
+    const { data: getPageData, error: getPageError } = requestResponseSplit(getPageFx.doneData);
+    // success: propagate new data to stores (note, last key is only applied when it's there)
+    history.on(getPageData, (history, p) => (p.isFirstPage ? p.items : [...history, ...p.items]));
+    lastKey.on(getPageData.filterMap((v) => v.last_key || undefined), (_, v) => v);
+    historyCurrency.on(getPageData.map((v) => v.currency), (_, v) => v);
+    // error: report unexpected error
+    forward({ from: getPageError, to: binding.unexpectedError });
+    // form
+    const form = createFormWithCustomError({
+        gift_card_code: createStringField("gift_card_code", "", [validNonEmpty]),
+    }, null);
+    const formToggleState = createFormToggleState(binding, form);
+    formToggleState.isFormVisible.reset(init.event);
+    forward({
+        from: init.event,
+        to: form.reset,
+    });
+    // create apply gift card effect and wire it to form
+    const applyGiftCardFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(applyGiftCardMutation)({ shopID, data: p.data }, opts);
+    });
+    guard({
+        source: sample(binding.internalConfig, form.submitted, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: applyGiftCardFx,
+    });
+    const applyGiftCardResult = requestResponseSplit(applyGiftCardFx.doneData);
+    // success
+    forward({
+        from: applyGiftCardResult.data,
+        to: binding.reloadPage,
+    });
+    forward({
+        from: applyGiftCardResult.data,
+        to: redeemedGiftCard,
+    });
+    forward({
+        from: applyGiftCardResult.data.map(() => false),
+        to: formToggleState.isFormVisible,
+    });
+    // failure
+    splitMap(applyGiftCardResult.error)
+        .map((e) => (e.kind === "error" && e.error.apiError?.code === ErrorCode.NotFound ? "not_found" : undefined), form.setError)
+        .fallback(handleFormFailure({ form, unexpectedError: binding.unexpectedError }));
+    return {
+        init,
+        form,
+        ...formToggleState,
+        customerBalance,
+        somethingIsPending: combineSome(init.pending, applyGiftCardFx.pending, getPageFx.pending),
+        redeemedGiftCard,
+        setCurrency,
+        currency,
+        loadMore,
+        historyCurrency,
+        history,
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createProfilePageGraph(binding) {
+    const init = defineInit(binding, async (config, _p) => {
+        const { shopID, opts } = config;
+        const jwt = jwtDecode(nonNull(opts?.authToken, "auth token"));
+        return mapResponseData(await request(getCustomerQuery)({ shopID, id: jwt.customer_id }, opts), (v) => ({
+            customer: v[0],
+        }));
+    });
+    const form = createForm({
+        name: createStringField("name", "", [validNonEmpty, validMaxLength250]),
+        display_name: createStringField("display_name", "", [validMaxLength250]),
+        mobile: createStringField("mobile", "", []),
+        mobile_notifications: createBooleanField("mobile_notifications", false),
+        accepts_marketing: createBooleanField("accepts_marketing", false),
+    });
+    forward({
+        from: init.event.map((v) => ({
+            name: v.customer.name,
+            display_name: v.customer.display_name,
+            mobile: v.customer.mobile,
+            mobile_notifications: v.customer.mobile_notifications,
+            accepts_marketing: v.customer.accepts_marketing,
+        })),
+        to: form.init,
+    });
+    // submit form API call
+    const saveFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        const jwt = jwtDecode(nonNull(opts?.authToken, "auth token"));
+        return request(modifyCustomerMutation)({ shopID, id: jwt.customer_id, data: p.data }, opts);
+    });
+    guard({
+        source: sample(binding.internalConfig, form.submitted, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: saveFx,
+    });
+    const { data: saveData, error: saveError } = requestResponseSplit(saveFx.doneData);
+    // success
+    forward({ from: saveData, to: binding.reloadPage });
+    // failure
+    handleFormFailure({ source: saveError, form, unexpectedError: binding.unexpectedError }, { from: "[0]." });
+    return {
+        init,
+        form,
+        somethingIsPending: combineSome(init.pending, saveFx.pending),
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+function createSigninPageGraph(binding) {
+    const init = defineInitBlank(binding);
+    const setSignInMode = createEvent();
+    const signInMode = restore(setSignInMode, "email-otp-init");
+    const form = createFormWithCustomError({
+        email: createStringField("email", "", [validNonEmpty, validEmail, validMaxLength250]),
+        password: createStringField("password", "", [validNonEmpty]),
+    }, null);
+    const formOTPInit = createFormWithCustomError({
+        email: createStringField("email", "", [validNonEmpty, validEmail, validMaxLength250]),
+    }, null);
+    const formOTPComplete = createFormWithCustomError({
+        code: createStringField("code", "", [validNonEmpty, validMaxLength250]),
+    }, null);
+    forward({
+        from: init.event,
+        to: [form.reset, formOTPInit.reset, formOTPComplete.reset],
+    });
+    signInMode.reset(init.event);
+    const signinFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(signInMutation)({ shopID, data: p.data }, opts);
+    });
+    guard({
+        source: sample(binding.internalConfig, form.submitted, (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: signinFx,
+    });
+    const signInViaEmailInitFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(signInViaEmailInitMutation)({ shopID, data: p.data }, opts);
+    });
+    guard({
+        source: sample(binding.internalConfig, formOTPInit.submitted, (config, data) => ({
+            config,
+            data: { ...data, timezone_hint: getTimezone() },
+        })),
+        filter: binding.everythingIdle,
+        target: signInViaEmailInitFx,
+    });
+    const signInViaEmailCompleteFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(signInViaEmailCompleteMutation)({ shopID, data: p.data }, opts);
+    });
+    guard({
+        source: sample(combine({ config: binding.internalConfig, email: formOTPInit.email.value }), formOTPComplete.submitted, ({ config, email }, data) => ({ config, data: { ...data, email } })),
+        filter: binding.everythingIdle,
+        target: signInViaEmailCompleteFx,
+    });
+    // email/password form
+    {
+        const { data: signinData } = requestResponseSplit(signinFx.doneData);
+        // success
+        forward({
+            from: signinData.filterMap((v) => v.token || undefined),
+            to: binding.setJWT,
+        });
+        // failure
+        splitMap(signinFx.done)
+            .map((e) => e.result.kind === "error" && e.result.error.apiError?.code === ErrorCode.Unauthorized
+            ? e.params.data.email
+                ? "unauthorized"
+                : "unauthorized_oauth"
+            : undefined, form.setError)
+            .map((e) => (e.result.kind !== "data" ? e.result : undefined), handleFormFailure({ form, unexpectedError: binding.unexpectedError }));
+    }
+    // OTP init form
+    {
+        const { data, error } = requestResponseSplit(signInViaEmailInitFx.doneData);
+        // success
+        forward({
+            from: data.map(() => "email-otp-complete"),
+            to: setSignInMode,
+        });
+        // failure
+        splitMap(error)
+            .map((e) => e.kind === "error" && e.error.apiError?.code === ErrorCode.TryAgainLater ? "try_again_later" : undefined, formOTPInit.setError)
+            .fallback(handleFormFailure({ form: formOTPInit, unexpectedError: binding.unexpectedError }));
+    }
+    // OTP complete form
+    {
+        const { data, error } = requestResponseSplit(signInViaEmailCompleteFx.doneData);
+        // success
+        forward({
+            from: data.filterMap((v) => v.token || undefined),
+            to: binding.setJWT,
+        });
+        // failure
+        splitMap(error)
+            .map((e) => (e.kind === "error" && e.error.apiError?.code === ErrorCode.NotFound ? "unauthorized" : undefined), formOTPComplete.setError)
+            .fallback(handleFormFailure({ form: formOTPComplete, unexpectedError: binding.unexpectedError }));
+    }
+    // oauth flow
+    const oauth2Click = createEvent();
+    guard({
+        source: oauth2Click.map((kind) => ({ kind, route: "signin" })),
+        filter: binding.everythingIdle,
+        target: binding.oauth2.requestFx,
+    });
+    guard({
+        source: sample(binding.internalConfig, binding.oauth2.requestFx.doneData.filterMap((r) => r.route === "signin" && r.response.kind === "success"
+            ? { oauth_provider: r.kind, oauth_code: r.response.code, timezone_hint: getTimezone() }
+            : r.route === "signin" && r.response.kind === "success_oauth1"
+                ? {
+                    oauth_provider: r.kind,
+                    oauth_token: r.response.token,
+                    oauth_verifier: r.response.verifier,
+                    timezone_hint: getTimezone(),
+                }
+                : undefined), (config, data) => ({ config, data })),
+        filter: binding.everythingIdle,
+        target: signinFx,
+    });
+    return {
+        init,
+        form,
+        formOTPInit,
+        formOTPComplete,
+        signInMode,
+        setSignInMode,
+        oauth2Click,
+        somethingIsPending: combineSome(init.pending, signinFx.pending),
+    };
+}
+function createOAuth2RequestGraph(config) {
+    const cancelFuncs = [];
+    const cancel = createEvent();
+    cancel.watch(() => {
+        for (const c of cancelFuncs) {
+            c();
+        }
+    });
+    const requestFx = createEffect(async (req) => {
+        const randomToken = generateRandomToken();
+        if (!config.oauth2)
+            return { kind: req.kind, route: req.route, response: { kind: "failure" } };
+        const [requestPromise, cancelFunc] = config.oauth2.request({ kind: req.kind, randomToken });
+        cancelFuncs.push(cancelFunc);
+        const r = await requestPromise;
+        {
+            // TODO: is it safe?
+            const i = cancelFuncs.findIndex((f) => f === cancelFunc);
+            if (i !== -1) {
+                cancelFuncs.splice(i, 1);
+            }
+        }
+        return { kind: req.kind, route: req.route, response: r };
+    });
+    const providers = createStore([...(config.oauth2?.providers || [])]);
+    return {
+        providers,
+        cancel,
+        requestFx,
+    };
+}
+//===================================================================================================================
+//===================================================================================================================
+//===================================================================================================================
+// not really a part of any page, but somewhat follows page graph conventions, except it doesn't have init.
+function createOAuth2UtilsGraph(binding) {
+    const ROUTE = "connect";
+    const connectOAuth2 = createEvent();
+    const disconnectOAuth2 = createEvent();
+    const connectFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(connectOAuth2Mutation)({ shopID, ...p.data }, opts);
+    });
+    const disconnectFx = createEffect(async (p) => {
+        const { shopID, opts } = p.config;
+        return request(disconnectOAuth2Mutation)({ shopID }, opts);
+    });
+    // connect flow
+    {
+        guard({
+            source: connectOAuth2.map((kind) => ({ kind, route: ROUTE })),
+            filter: binding.everythingIdle,
+            target: binding.oauth2.requestFx,
+        });
+        guard({
+            source: sample(binding.internalConfig, binding.oauth2.requestFx.doneData.filterMap((r) => r.route === ROUTE && r.response.kind === "success"
+                ? { provider: r.kind, code: r.response.code }
+                : r.route === ROUTE && r.response.kind === "success_oauth1"
+                    ? { provider: r.kind, token: r.response.token, verifier: r.response.verifier }
+                    : undefined), (config, data) => ({ config, data })),
+            filter: binding.everythingIdle,
+            target: connectFx,
+        });
+        const { data: connectData, error: connectError } = requestResponseSplit(connectFx.doneData);
+        // success
+        forward({
+            from: connectData,
+            to: binding.fetchCustomerInfoNow,
+        });
+        forward({
+            from: connectData.map(() => "oauth2_connected"),
+            to: binding.message,
+        });
+        // failure
+        forward({
+            from: connectError,
+            to: binding.unexpectedError,
+        });
+    }
+    // disconnect flow
+    {
+        guard({
+            source: sample(binding.internalConfig, disconnectOAuth2, (config, data) => ({ config, data })),
+            filter: binding.everythingIdle,
+            target: disconnectFx,
+        });
+        const { data: disconnectData, error: disconnectError } = requestResponseSplit(disconnectFx.doneData);
+        // success
+        forward({
+            from: disconnectData,
+            to: binding.fetchCustomerInfoNow,
+        });
+        forward({
+            from: disconnectData.map(() => "oauth2_disconnected"),
+            to: binding.message,
+        });
+        // failure
+        forward({
+            from: disconnectError,
+            to: binding.unexpectedError,
+        });
+    }
+    return {
+        connectOAuth2,
+        disconnectOAuth2,
+        somethingIsPending: combineSome(connectFx.pending, disconnectFx.pending),
+    };
+}
+export function createCustomer(config, init) {
+    const currency = config.currency || createStore(config.shopCurrency);
+    const oauth2 = createOAuth2RequestGraph(config);
+    const setCustomerInfo = createEvent();
+    const customerInfo = createStore(null).on(setCustomerInfo, (_, v) => v);
+    const everythingIdle = createStore(true);
+    const internalConfig = combine({
+        jwt: config.jwt,
+        locale: config.locale,
+        currency,
+    }, ({ jwt, locale, currency }) => ({
+        shopID: config.shopID,
+        oauth2: config.oauth2,
+        stripePromise: config.stripePromise,
+        currency,
+        opts: {
+            ...config.opts,
+            authToken: jwt,
+            locale,
+        },
+    }));
+    const getCustomerInfoFx = createEffect(async (cfg) => {
+        const { shopID, opts } = cfg;
+        let customerID = "";
+        try {
+            customerID = jwtDecode(nonNull(opts?.authToken, "auth token"))?.customer_id || "";
+        }
+        catch {
+            // do nothing
+        }
+        return getCustomerInfo(shopID, customerID, opts);
+    });
+    forward({
+        from: getCustomerInfoFx.doneData,
+        to: customerInfo,
+    });
+    forward({
+        from: internalConfig,
+        to: getCustomerInfoFx,
+    });
+    const fetchCustomerInfoNow = createEvent();
+    forward({
+        from: sample(internalConfig, fetchCustomerInfoNow),
+        to: getCustomerInfoFx,
+    });
+    const unexpectedError = createEvent();
+    const setJWT = createEvent();
+    const setFavorites = createEvent();
+    const addFavoriteToInfo = createEvent();
+    const modifyFavoriteInInfo = createEvent();
+    const removeFavoriteFromInfo = createEvent();
+    const reloadPage = createEvent();
+    const reloadPageIfActive = createEvent();
+    const internalGoTo = createEvent();
+    const externalGoTo = createEvent();
+    const message = createEvent();
+    const binding = {
+        everythingIdle,
+        internalConfig,
+        unexpectedError,
+        setJWT,
+        setFavorites,
+        addFavoriteToInfo,
+        modifyFavoriteInInfo,
+        removeFavoriteFromInfo,
+        reloadPage,
+        reloadPageIfActive,
+        goTo: internalGoTo,
+        message,
+        fetchCustomerInfoNow,
+        oauth2,
+    };
+    config.jwt.on(setJWT, (_, v) => v);
+    customerInfo.on(setFavorites, (pv, favorites) => {
+        if (!pv)
+            return null;
+        return { ...pv, favorites };
+    });
+    customerInfo.on(addFavoriteToInfo, (pv, v) => {
+        if (!pv)
+            return null;
+        if (pv.favorites.find((f) => f.id === v.id))
+            return pv;
+        return {
+            ...pv,
+            favorites: [...pv.favorites, v],
+        };
+    });
+    customerInfo.on(modifyFavoriteInInfo, (pv, v) => {
+        if (!pv)
+            return null;
+        const newFavs = [...pv.favorites];
+        const idx = newFavs.findIndex((f) => f.id === v.id);
+        if (idx !== -1) {
+            newFavs[idx] = { ...newFavs[idx], ...v };
+        }
+        return {
+            ...pv,
+            favorites: newFavs,
+        };
+    });
+    customerInfo.on(removeFavoriteFromInfo, (pv, v) => {
+        if (!pv)
+            return null;
+        return {
+            ...pv,
+            favorites: pv.favorites.filter((f) => f.id !== v),
+        };
+    });
+    // on locale changes, reload the page
+    forward({
+        from: config.locale.updates,
+        to: reloadPage,
+    });
+    const pages = {
+        signin: createSigninPageGraph(binding),
+        signup: createSignupPageGraph(binding),
+        resetPassword: createResetPasswordPageGraph(binding),
+        addresses: createAddressesPageGraph(binding),
+        favorites: createFavoritesPageGraph(binding),
+        orders: createOrdersPageGraph(binding),
+        subscriptions: createSubscriptionsPageGraph(binding),
+        returns: createReturnsPageGraph(binding),
+        order: createOrderPageGraph(binding),
+        subscription: createSubscriptionPageGraph(binding),
+        return: createReturnPageGraph(binding),
+        createReturn: createCreateReturnPageGraph(binding),
+        storeCredit: createStoreCreditPageGraph(binding),
+        profile: createProfilePageGraph(binding),
+        paymentMethods: createPaymentMethodsPageGraph(binding),
+    };
+    const oauth2Utils = createOAuth2UtilsGraph(binding);
+    const currentPage = createStore(null);
+    const loadPage = createEvent();
+    const loadPageExt = sample(currentPage, loadPage, (p, param) => ({
+        previousPageKind: p?.kind || null,
+        param,
+    }));
+    const loadSignin = loadPageExt.filterMap((v) => (v.param.kind === "signin" ? { ...v, param: v.param } : undefined));
+    const loadSignup = loadPageExt.filterMap((v) => (v.param.kind === "signup" ? { ...v, param: v.param } : undefined));
+    const loadResetPassword = loadPageExt.filterMap((v) => v.param.kind === "reset_password" ? { ...v, param: v.param } : undefined);
+    const loadAddresses = loadPageExt.filterMap((v) => v.param.kind === "addresses" ? { ...v, param: v.param } : undefined);
+    const loadFavorites = loadPageExt.filterMap((v) => v.param.kind === "favorites" ? { ...v, param: v.param } : undefined);
+    const loadOrders = loadPageExt.filterMap((v) => (v.param.kind === "orders" ? { ...v, param: v.param } : undefined));
+    const loadSubscriptions = loadPageExt.filterMap((v) => v.param.kind === "subscriptions" ? { ...v, param: v.param } : undefined);
+    const loadReturns = loadPageExt.filterMap((v) => (v.param.kind === "returns" ? { ...v, param: v.param } : undefined));
+    const loadOrder = loadPageExt.filterMap((v) => (v.param.kind === "order" ? { ...v, param: v.param } : undefined));
+    const loadSubscription = loadPageExt.filterMap((v) => v.param.kind === "subscription" ? { ...v, param: v.param } : undefined);
+    const loadReturn = loadPageExt.filterMap((v) => (v.param.kind === "return" ? { ...v, param: v.param } : undefined));
+    const loadCreateReturn = loadPageExt.filterMap((v) => v.param.kind === "create_return" ? { ...v, param: v.param } : undefined);
+    const loadStoreCredit = loadPageExt.filterMap((v) => v.param.kind === "store_credit" ? { ...v, param: v.param } : undefined);
+    const loadProfile = loadPageExt.filterMap((v) => (v.param.kind === "profile" ? { ...v, param: v.param } : undefined));
+    const loadPaymentMethods = loadPageExt.filterMap((v) => v.param.kind === "payment_methods" ? { ...v, param: v.param } : undefined);
+    forward({ from: loadSignin, to: pages.signin.init.load });
+    forward({ from: loadSignup, to: pages.signup.init.load });
+    forward({ from: loadResetPassword, to: pages.resetPassword.init.load });
+    forward({ from: loadAddresses, to: pages.addresses.init.load });
+    forward({ from: loadFavorites, to: pages.favorites.init.load });
+    forward({ from: loadOrders, to: pages.orders.init.load });
+    forward({ from: loadSubscriptions, to: pages.subscriptions.init.load });
+    forward({ from: loadReturns, to: pages.returns.init.load });
+    forward({ from: loadOrder, to: pages.order.init.load });
+    forward({ from: loadSubscription, to: pages.subscription.init.load });
+    forward({ from: loadReturn, to: pages.return.init.load });
+    forward({ from: loadCreateReturn, to: pages.createReturn.init.load });
+    forward({ from: loadStoreCredit, to: pages.storeCredit.init.load });
+    forward({ from: loadProfile, to: pages.profile.init.load });
+    forward({ from: loadPaymentMethods, to: pages.paymentMethods.init.load });
+    const lastAuthPage = createStore(null);
+    lastAuthPage.on(externalGoTo.filter({ fn: (pp) => pp === null || !disallowedLastAuthPages[pp.kind] }), (_, v) => v);
+    const jwtAndCurrentPage = combine(config.jwt, currentPage);
+    const jwtAndCurrentPageAndLastAuthPage = combine(config.jwt, currentPage, lastAuthPage);
+    forward({
+        from: [
+            pages.signin.init.loaded,
+            pages.signup.init.loaded,
+            pages.resetPassword.init.loaded,
+            pages.addresses.init.loaded,
+            pages.favorites.init.loaded,
+            pages.orders.init.loaded,
+            pages.subscriptions.init.loaded,
+            pages.returns.init.loaded,
+            pages.order.init.loaded,
+            pages.subscription.init.loaded,
+            pages.return.init.loaded,
+            pages.createReturn.init.loaded,
+            pages.storeCredit.init.loaded,
+            pages.profile.init.loaded,
+            pages.paymentMethods.init.loaded,
+        ],
+        to: currentPage,
+    });
+    const somethingPending = combineSome(pages.signin.somethingIsPending, pages.signup.somethingIsPending, pages.resetPassword.somethingIsPending, pages.addresses.somethingIsPending, pages.favorites.somethingIsPending, pages.orders.somethingIsPending, pages.subscriptions.somethingIsPending, pages.returns.somethingIsPending, pages.order.somethingIsPending, pages.subscription.somethingIsPending, pages.return.somethingIsPending, pages.createReturn.somethingIsPending, pages.storeCredit.somethingIsPending, pages.profile.somethingIsPending, pages.paymentMethods.somethingIsPending, oauth2Utils.somethingIsPending);
+    forward({
+        from: somethingPending.map((v) => !v),
+        to: everythingIdle,
+    });
+    const logout = createEvent();
+    // goTo triggers loadPage, but with possible redirect based on jwt
+    sample({
+        source: config.jwt,
+        clock: internalGoTo,
+        fn: (jwt, pageParam) => shouldRedirect(jwt, pageParam) || pageParam,
+        target: loadPage,
+    });
+    // on page reload, just "goTo" "currentPage"
+    forward({
+        from: sample(currentPage, reloadPage).filterMap((v) => v || undefined),
+        to: internalGoTo,
+    });
+    // optional page reload
+    forward({
+        from: sample(currentPage, reloadPageIfActive, (currentPage, target) => ({ currentPage, target })).filterMap(({ currentPage, target }) => (currentPage?.kind === target ? currentPage : undefined)),
+        to: internalGoTo,
+    });
+    // Based on "jwt"/"currentPage" state, kick us out from pages we're not allowed to be in.
+    // It's unlikely that we get here due to "currentPage" changes, because goToFx also handles this.
+    // However, when "jwt" changes, we might end up being on a wrong page.
+    forward({
+        from: jwtAndCurrentPageAndLastAuthPage.updates.filterMap(([jwt, currentPage, lastAuthPage]) => currentPage ? shouldRedirect(jwt, currentPage, lastAuthPage) : undefined),
+        to: internalGoTo,
+    });
+    // expose only "logout" via API
+    guard({
+        source: logout.map(() => ""),
+        filter: everythingIdle,
+        target: setJWT,
+    });
+    guard({
+        source: logout.map(() => ({ kind: "signin", action: "push" })),
+        filter: everythingIdle,
+        target: internalGoTo,
+    });
+    // start with signin page (will be redirected for logged in customer)
+    if (init.kind === "goto") {
+        internalGoTo(init.dest);
+    }
+    else if (init.kind === "default") {
+        internalGoTo({ kind: "signin", action: "push" });
+    }
+    {
+        const cfg = internalConfig.getState();
+        let persistLoaded = false;
+        if (config.persist) {
+            const VERSION = 1;
+            const { load, save, onChange, maxAgeMs } = config.persist;
+            const realMaxAgeMs = Math.max(maxAgeMs ?? 0, 0) || 1800000;
+            {
+                const ci = deserialize(load(), VERSION, realMaxAgeMs);
+                if (ci !== undefined) {
+                    setCustomerInfo(ci);
+                    persistLoaded = true;
+                }
+            }
+            customerInfo.updates.watch((data) => {
+                save(serialize(data, VERSION));
+            });
+            onChange((data) => {
+                const ci = deserialize(data, VERSION, realMaxAgeMs);
+                if (ci !== undefined) {
+                    setCustomerInfo(ci);
+                }
+            });
+        }
+        if (cfg.opts?.authToken && !persistLoaded) {
+            fetchCustomerInfoNow();
+        }
+    }
+    forward({
+        from: externalGoTo,
+        to: internalGoTo,
+    });
+    // customerMenuVisible helper
+    const customerLoggedIn = jwtAndCurrentPage.map(([jwt, currentPage]) => jwt !== "" && currentPage && currentPage.kind !== "signin" && currentPage.kind !== "signup");
+    return {
+        message,
+        logout,
+        currentPage,
+        customerLoggedIn,
+        customerInfo,
+        goTo: externalGoTo,
+        unexpectedError,
+        reloadPage,
+        pages,
+        somethingPending,
+        oauth2: {
+            cancel: oauth2.cancel,
+            pending: oauth2.requestFx.pending,
+            providers: oauth2.providers,
+            connect: oauth2Utils.connectOAuth2,
+            disconnect: oauth2Utils.disconnectOAuth2,
+        },
+    };
+}