nosto-react-p2u
Version:
Forked repository to add custom logic to @nosto/nosto-react
352 lines (351 loc) • 10.5 kB
JavaScript
import { createContext as V, useContext as q, useEffect as E, useRef as P, useMemo as x, cloneElement as F, useState as H, isValidElement as M } from "react";
import { jsx as R } from "react/jsx-runtime";
import z from "react-dom";
const T = V({
account: "",
currentVariation: "",
responseMode: "HTML",
clientScriptLoaded: !1
});
function L() {
return q(T);
}
const A = (e) => String(e) === "[object Object]";
function I(e) {
if (!A(e)) return !1;
const t = e.constructor;
if (t === void 0) return !0;
const n = t.prototype;
return !(!A(n) || !n.hasOwnProperty("isPrototypeOf"));
}
function v(e, t) {
if (e === t)
return !0;
if (e instanceof Date && t instanceof Date)
return e.getTime() === t.getTime();
if (e instanceof Array && t instanceof Array)
return e.length !== t.length ? !1 : e.every((n, r) => v(n, t[r]));
if (I(e) && I(t)) {
const n = Object.entries(e);
return n.length !== Object.keys(t).length ? !1 : n.every(([r, o]) => v(o, t[r]));
}
return !1;
}
function $(e, t) {
return E(e, U(t));
}
function U(e) {
const t = P(e), n = P(0);
return v(e, t.current) || (t.current = e, n.current += 1), x(() => t.current, [n.current]);
}
function D() {
window.nostojs = window.nostojs ?? function(e) {
(window.nostojs.q = window.nostojs.q ?? []).push(e);
};
}
function W() {
return typeof window.nosto < "u";
}
const B = {
production: "https://connect.nosto.com/",
staging: "https://connect.staging.nosto.com/",
local: "https://connect.nosto.com/"
};
function G(e) {
return B[e ?? "production"];
}
function J({ merchantId: e, env: t, options: n, scriptLoader: r }) {
const o = new URL(`/include/${e}`, G(t));
return (r ?? Y)(o.toString(), n);
}
function Y(e, t) {
return new Promise((n, r) => {
const o = document.createElement("script");
o.src = e, o.async = !0, o.type = "text/javascript", o.onload = () => n(), o.onerror = () => r(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, s]) => o.setAttribute(c, s)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(o) : document.body.appendChild(o);
});
}
async function w(e) {
return window.nostojs(e);
}
D();
function d(e, t, n) {
const { clientScriptLoaded: r } = L();
(n != null && n.deep ? $ : E)(() => {
r && w(e);
}, [r, ...t ?? []]);
}
var O, y = z;
if (process.env.NODE_ENV === "production")
O = y.createRoot, y.hydrateRoot;
else {
var b = y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
O = function(e, t) {
b.usingClientEntryPoint = !0;
try {
return y.createRoot(e, t);
} finally {
b.usingClientEntryPoint = !1;
}
};
}
function Z(e) {
return F(e.recommendationComponent, {
// eslint-disable-next-line react/prop-types
nostoRecommendation: e.nostoRecommendation
});
}
function K(e) {
if (!window.nostojs)
throw new Error("Nosto has not yet been initialized");
w((t) => {
t.placements.injectCampaigns(e.recommendations);
});
}
function l() {
const { responseMode: e, recommendationComponent: t } = L(), n = P({});
if (e == "HTML")
return { renderCampaigns: K };
function r(o) {
var s;
const c = ((s = o.campaigns) == null ? void 0 : s.recommendations) ?? {};
for (const a in c) {
const u = { ...c[a], placementId: a }, S = "#" + a, C = document.querySelector(S);
C && (n.current[a] || (n.current[a] = O(C)), n.current[a].render(
/* @__PURE__ */ R(
Z,
{
recommendationComponent: t,
nostoRecommendation: u
}
)
));
}
}
return { renderCampaigns: r };
}
function Q(e) {
const { renderCampaigns: t } = l();
d(async (n) => {
const r = await n.defaultSession().viewNotFound().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
t(r);
});
}
function we(e) {
return Q(e), null;
}
function X({ category: e, placements: t }) {
const { renderCampaigns: n } = l();
d(
async (r) => {
const o = await r.defaultSession().viewCategory(e).setPlacements(t || r.placements.getPlacements()).load();
n(o);
},
[e]
);
}
function Ce(e) {
return X(e), null;
}
function ee(e) {
const { renderCampaigns: t } = l();
d(async (n) => {
const r = await n.defaultSession().viewCart().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
t(r);
});
}
function he(e) {
return ee(e), null;
}
function te(e) {
const { renderCampaigns: t } = l();
d(async (n) => {
const r = await n.defaultSession().viewFrontPage().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
t(r);
});
}
function ye(e) {
return te(e), null;
}
function p(e) {
return !e || typeof e != "object" || ne(e) || oe(e) ? e : Array.isArray(e) ? e.map(p) : Object.keys(e).reduce((t, n) => {
const r = n[0].toLowerCase() + n.slice(1).replace(/([A-Z]+)/g, (o, c) => "_" + c.toLowerCase());
return t[r] = p(e[n]), t;
}, {});
}
function ne(e) {
return Object.prototype.toString.call(e) === "[object Date]";
}
function oe(e) {
return Object.prototype.toString.call(e) === "[object RegExp]";
}
function re({ order: e, placements: t }) {
const { renderCampaigns: n } = l();
d(
async (r) => {
const o = await r.defaultSession().addOrder(p(e)).setPlacements(t || r.placements.getPlacements()).load();
n(o);
},
[e],
{ deep: !0 }
);
}
function Se(e) {
return re(e), null;
}
function ce(e) {
const { renderCampaigns: t } = l();
d(async (n) => {
const r = await n.defaultSession().viewOther().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
t(r);
});
}
function Ne(e) {
return ce(e), null;
}
function Pe({ id: e, pageType: t }) {
return /* @__PURE__ */ R("div", { className: "nosto_element", id: e }, e + (t || ""));
}
function se({ product: e, tagging: t, placements: n, reference: r }) {
const { renderCampaigns: o } = l();
if (t && !t.product_id)
throw new Error("The product object must contain a product_id property");
const c = (t == null ? void 0 : t.product_id) ?? e;
d(
async (s) => {
const a = s.defaultSession().viewProduct(t ?? e).setPlacements(n || s.placements.getPlacements());
r && a.setRef(c, r);
const u = await a.load();
o(u);
},
[c, t == null ? void 0 : t.selected_sku_id]
);
}
function ve(e) {
return se(e), null;
}
function ae(e, t) {
return new Promise((n, r) => {
const o = document.createElement("script");
o.type = "text/javascript", o.src = e, o.async = !0, o.onload = () => n(), o.onerror = () => r(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, s]) => o.setAttribute(c, s)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(o) : document.body.appendChild(o);
});
}
function ie(e) {
return window.nosto && "reload" in window.nosto ? (window.nosto.reload(e), !0) : !1;
}
function ue(e) {
const {
host: t = "connect.nosto.com",
scriptLoader: n = ae,
account: r,
shopifyMarkets: o,
loadScript: c = !0
} = e, [s, a] = H(!1);
return E(() => {
function u() {
"nostoReactTest" in window && ie({
site: "localhost"
}), a(!0);
}
async function S(i, m = {}) {
const f = `//${t}${i}`, N = { "nosto-client-script": "", ...m };
await n(f, { attributes: N }), u();
}
function C() {
var j, g;
const i = document.querySelector("[nosto-client-script]"), m = String((o == null ? void 0 : o.marketId) || ""), f = (o == null ? void 0 : o.language) || "", N = (i == null ? void 0 : i.getAttribute("nosto-language")) !== f || (i == null ? void 0 : i.getAttribute("nosto-market-id")) !== m;
if (!i || N) {
s && a(!1);
const h = document.querySelector("#nosto-sandbox");
(j = i == null ? void 0 : i.parentNode) == null || j.removeChild(i), (g = h == null ? void 0 : h.parentNode) == null || g.removeChild(h);
const k = `/script/shopify/market/nosto.js?merchant=${r}&market=${m}&locale=${f.toLowerCase()}`;
S(k, { "nosto-language": f, "nosto-market-id": m });
}
}
if (D(), !c) {
w(u);
return;
}
async function _() {
await J({
merchantId: r,
options: {
attributes: { "nosto-client-script": "" }
},
scriptLoader: n
}), u();
}
!W() && !o && _(), o && C();
}, [o == null ? void 0 : o.marketId, o == null ? void 0 : o.language]), { clientScriptLoaded: s };
}
function Oe(e) {
const { account: t, multiCurrency: n = !1, children: r, recommendationComponent: o } = e, c = n ? e.currentVariation : "";
if (o && !M(o))
throw new Error(
"The recommendationComponent prop must be a valid React element. Please provide a valid React element."
);
const s = o ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: a } = ue(e);
return a && w((u) => {
u.defaultSession().setVariation(c).setResponseMode(s);
}), /* @__PURE__ */ R(
T.Provider,
{
value: {
account: t,
clientScriptLoaded: a,
currentVariation: c,
responseMode: s,
recommendationComponent: o
},
children: r
}
);
}
function de({ query: e, placements: t }) {
const { renderCampaigns: n } = l();
d(
async (r) => {
const o = await r.defaultSession().viewSearch(e).setPlacements(t || r.placements.getPlacements()).load();
n(o);
},
[e]
);
}
function Ee(e) {
return de(e), null;
}
function le({ cart: e, customer: t } = {}) {
const { clientScriptLoaded: n } = L();
$(() => {
const r = e ? p(e) : void 0, o = t ? p(t) : void 0;
n && w((c) => {
c.defaultSession().setCart(r).setCustomer(o).viewOther().load({ skipPageViews: !0 });
});
}, [n, e, t]);
}
function Re(e) {
return le(e), null;
}
export {
we as Nosto404,
Ce as NostoCategory,
he as NostoCheckout,
T as NostoContext,
ye as NostoHome,
Se as NostoOrder,
Ne as NostoOther,
Pe as NostoPlacement,
ve as NostoProduct,
Oe as NostoProvider,
Ee as NostoSearch,
Re as NostoSession,
Q as useNosto404,
X as useNostoCategory,
ee as useNostoCheckout,
L as useNostoContext,
te as useNostoHome,
re as useNostoOrder,
ce as useNostoOther,
se as useNostoProduct,
de as useNostoSearch,
le as useNostoSession
};