@spiffcommerce/core 17.4.0 → 17.5.0-alpha.0

package/dist/index.d.ts

@@ -1428,6 +1428,13 @@ interface WorkflowExperience {
      * A convenience function returning the sum of the selection and base price values.
      */
     getTotalPriceSubunits(): number;
+    /**
+     * Takes selections made by the user in another workflow and applies them to this workflow. For
+     * selections to be copied they must both have a matching global property configuration.
+     * @param experience The experience to take selections from.
+     * @param filter A list of steps to apply the selections to. If undefined all steps will be updated.
+     */
+    copySelections(experience: WorkflowExperience, filter?: StepHandle<AnyStepData>[]): any;
     /**
      * Attach specific details about the customer to the experience. This is useful for things like retargeting. Currently only
      * email is supported. From SpiffCommerce hosted experiences these details will be attached whenever the customer has provided & given permission.
@@ -1504,6 +1511,7 @@ declare class WorkflowExperienceImpl implements WorkflowExperience {
     getSelectionPriceSubunits(): number;
     getBasePriceSubunits(): number;
     getTotalPriceSubunits(): number;
+    copySelections(experience: WorkflowExperience, filter?: StepHandle<AnyStepData>[]): void;
     getStepByName(name: string): TextStepHandle | FrameStepHandle | ShapeStepHandle | InformationStepHandle | IllustrationStepHandle | MaterialStepHandle | ModelStepHandle | PictureStepHandle | QuestionStepHandle | undefined;
     getStepsByType(type: StepType): StepHandle<AnyStepData>[];
     getStepsByScene(scene: Scene): StepHandle<AnyStepData>[];

package/dist/index.js

@@ -1,12 +1,12 @@
 import { createHttpLink as ct, InMemoryCache as gt, ApolloClient as lt, from as Bt, gql as y } from "@apollo/client/core";
-import { fetch as qA, getAttributesFromArrayBuffer as pe, AssetType as re, StepType as f, getFrameData as ZA, frameDataCache as wt, GroupCommand as R, UpdateFramePattern as De, UpdateFrameThresholdSettingsCommand as dt, calculateOffsets as $A, LayoutElementType as U, generate as k, CreateElementCommand as b, generateSVGWithUnknownColors as fe, svgObjectURL as pA, fetchAsString as q, DeleteElementCommand as Z, generateDefaultRectangleFrameSvg as ce, GetSVGDimensions as Et, patternImageDataCache as ge, fetchAsArrayBuffer as ht, findElement as DA, modifySVGWithElementProperties as Ct, IllustrationColorCommand as TA, IllustrationCacheCommand as Qt, getFontMetrics as ut, getPatternImageData as zA, FontAlignmentCommand as mt, FontColorCommand as It, FontImageFillCommand as kA, applyTextTransformations as KA, determineCorrectFontSizeAndLines as uA, FontSourceCommand as le, loadFont as _A, TextChangeCommand as pt, FontSizeCommand as Dt, createElementNS as ft, createElement as gA, _loadFontExternalDataURL as Ae, UpdateWorkflowStateCommand as Be, CommandContext as Ft, createCanvas as fA, getSvgElement as Fe, LayoutRenderingPurpose as Me, renderPapyrusComponentAsString as ye, loadImage as Ye, getDomParser as Se, toBase64 as we, getVariant as Mt, generateFrameSVG as yt, getDefaultVariant as HA, domParser as xe, sanitizeSvgTree as Ne, traverse as Yt, xmlSerializer as He, CreateLayoutCommand as St, AspectType as mA, rehydrateSerializedLayout as _ } from "@spiffcommerce/papyrus";
-import { AssetType as Ns, BringForwardCommand as Hs, BringToBackCommand as Ps, BringToFrontCommand as Rs, CanvasCommand as Us, CommandContext as Gs, CreateElementCommand as vs, CreateLayoutCommand as ks, DeleteElementCommand as Js, FontAlignmentCommand as bs, FontColorCommand as Ls, FontSizeCommand as Os, FontSourceCommand as Ts, GroupCommand as zs, LayoutElementFactory as Ks, LayoutElementType as js, MoveCommand as Vs, ResizeCommand as Ws, RotateCommand as Xs, SendBackwardsCommand as qs, StepAspectType as Zs, StepType as $s, TextChangeCommand as _s, UnitOfMeasurement as Ai, dataUrlFromExternalUrl as ei, determineCorrectFontSizeAndLines as ti, findElement as ai, frameDataCache as ni, generate as si, generateSVGWithUnknownColors as ii, getAttributesFromArrayBuffer as oi, getAxisAlignedBoundingBox as ri, getFrameData as ci, getSvgElement as gi, loadFont as li, patternImageDataCache as Bi, registerFetchImplementation as wi, registerWindowImplementation as di, rehydrateSerializedLayout as Ei, setCanvasModule as hi } from "@spiffcommerce/papyrus";
+import { fetch as qA, getAttributesFromArrayBuffer as pe, AssetType as re, StepType as f, getFrameData as ZA, frameDataCache as wt, GroupCommand as R, UpdateFramePattern as De, UpdateFrameThresholdSettingsCommand as dt, calculateOffsets as $A, LayoutElementType as U, generate as k, CreateElementCommand as b, generateSVGWithUnknownColors as fe, svgObjectURL as pA, fetchAsString as q, DeleteElementCommand as Z, generateDefaultRectangleFrameSvg as ce, GetSVGDimensions as Et, patternImageDataCache as ge, fetchAsArrayBuffer as ht, findElement as DA, modifySVGWithElementProperties as Ct, IllustrationColorCommand as TA, IllustrationCacheCommand as Qt, getFontMetrics as ut, getPatternImageData as zA, FontAlignmentCommand as mt, FontColorCommand as It, FontImageFillCommand as kA, applyTextTransformations as KA, determineCorrectFontSizeAndLines as uA, FontSourceCommand as le, loadFont as _A, TextChangeCommand as pt, FontSizeCommand as Dt, createElementNS as ft, createElement as gA, _loadFontExternalDataURL as Ae, UpdateWorkflowStateCommand as Be, CommandContext as Ft, createCanvas as fA, getSvgElement as Fe, LayoutRenderingPurpose as Me, renderPapyrusComponentAsString as ye, loadImage as Ye, getDomParser as Se, toBase64 as we, getVariant as Mt, generateFrameSVG as yt, getDefaultVariant as PA, domParser as xe, sanitizeSvgTree as Ne, traverse as Yt, xmlSerializer as Pe, CreateLayoutCommand as St, AspectType as mA, rehydrateSerializedLayout as _ } from "@spiffcommerce/papyrus";
+import { AssetType as Ns, BringForwardCommand as Ps, BringToBackCommand as Hs, BringToFrontCommand as Rs, CanvasCommand as Us, CommandContext as Gs, CreateElementCommand as vs, CreateLayoutCommand as ks, DeleteElementCommand as Js, FontAlignmentCommand as bs, FontColorCommand as Ls, FontSizeCommand as Os, FontSourceCommand as Ts, GroupCommand as zs, LayoutElementFactory as Ks, LayoutElementType as js, MoveCommand as Vs, ResizeCommand as Ws, RotateCommand as Xs, SendBackwardsCommand as qs, StepAspectType as Zs, StepType as $s, TextChangeCommand as _s, UnitOfMeasurement as Ai, dataUrlFromExternalUrl as ei, determineCorrectFontSizeAndLines as ti, findElement as ai, frameDataCache as ni, generate as si, generateSVGWithUnknownColors as ii, getAttributesFromArrayBuffer as oi, getAxisAlignedBoundingBox as ri, getFrameData as ci, getSvgElement as gi, loadFont as li, patternImageDataCache as Bi, registerFetchImplementation as wi, registerWindowImplementation as di, rehydrateSerializedLayout as Ei, setCanvasModule as hi } from "@spiffcommerce/papyrus";
 import { setContext as xt } from "@apollo/client/link/context";
 import { onError as Nt } from "@apollo/client/link/error";
-import { Pith as Pe } from "pith";
+import { Pith as He } from "pith";
 import Re from "lodash.debounce";
 import Ue from "lodash.isequal";
-import PA from "lodash.clonedeep";
+import HA from "lodash.clonedeep";
 import { toString as Ge } from "qrcode";
 import { split as jA } from "unicode-default-word-boundary";
 import ee from "svg-path-bbox";
@@ -60,7 +60,7 @@ class sA extends RA {
     super(`Parsing Error: ${A}`);
   }
 }
-class P extends RA {
+class H extends RA {
   constructor(A) {
     super(`Client Error: ${A}`);
   }
@@ -70,7 +70,7 @@ class UA extends RA {
     super(`Resource Generation Failed: ${A}`);
   }
 }
-class Ht {
+class Pt {
   get(A) {
     return localStorage.getItem(A) || void 0;
   }
@@ -113,13 +113,13 @@ class de {
     this.set(A, t);
   }
 }
-const Pt = () => {
+const Ht = () => {
   try {
-    return localStorage ? new Ht() : new de();
+    return localStorage ? new Pt() : new de();
   } catch {
     return console.warn("Local storage was unavilable due to browser security settings. Using in-memory storage instead."), new de();
   }
-}, x = Pt();
+}, x = Ht();
 class Rt {
   constructor() {
     this.defaultServerUrl = "https://api.spiff.com.au", this.defaultServicesApiUrl = "https://services.spiff.com.au", this.defaultHubUrl = "https://hub.spiff.com.au", this.serverUrl = this.defaultServerUrl, this.servicesApiUrl = this.defaultServicesApiUrl, this.hubUrl = this.defaultHubUrl, this.serverUrlCallbacks = [];
@@ -4492,27 +4492,27 @@ IfnI8vaNAAAAAElFTkSuQmCC" transform="matrix(0.13 0.0141 -0.0141 0.1301 104.926 1
 </g>
 </svg>
 
-`, H = (c) => ft("http://www.w3.org/2000/svg", c), ne = (c, A) => {
-  const e = H("rect");
+`, P = (c) => ft("http://www.w3.org/2000/svg", c), ne = (c, A) => {
+  const e = P("rect");
   return e.setAttribute("height", `${c}`), e.setAttribute("width", `${A}`), e;
 }, xa = () => {
-  const c = H("svg");
+  const c = P("svg");
   return c.setAttribute("xmlns", "http://www.w3.org/2000/svg"), c.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), c.setAttribute("version", "1.1"), c;
 }, Na = (c) => {
-  const A = H("use");
+  const A = P("use");
   return A.setAttribute("xlink:href", c), A.setAttribute("href", c), A;
 };
 function qe(c) {
   const A = xa(), e = /viewBox="0 0 (.+?) (.+?)"/.exec(c) || ["0", "0"], t = parseFloat(e[1]), a = parseFloat(e[2]);
   return A.setAttribute("height", `${a}`), A.setAttribute("width", `${t}`), [A, a, t];
 }
-const Ha = (c, A, e) => {
-  const t = H("g");
+const Pa = (c, A, e) => {
+  const t = P("g");
   c.appendChild(t), t.setAttribute("id", e), t.innerHTML = A;
 };
 function Ze(c, A, e) {
   const t = k();
-  Ha(A, e, `bgdef-${t}`), c.appendChild(Na(`#bgdef-${t}`));
+  Pa(A, e, `bgdef-${t}`), c.appendChild(Na(`#bgdef-${t}`));
 }
 const $e = (c, A, e, t) => {
   const a = gA("filter");
@@ -4536,10 +4536,10 @@ function se(c, A, e, t, a, n) {
   };
   if (o.width <= 0)
     return;
-  const r = Pa(o.height, o.width, e * s, t * i), g = (t - r * o.width) / 2 - r * o.x, B = (e - r * o.height) / 2 - r * o.y;
+  const r = Ha(o.height, o.width, e * s, t * i), g = (t - r * o.width) / 2 - r * o.x, B = (e - r * o.height) / 2 - r * o.y;
   c.setAttribute("transform", `translate(${g} ${B}) scale(${r} ${r})`);
 }
-function Pa(c, A, e, t) {
+function Ha(c, A, e, t) {
   const a = e / c, n = t / A;
   return a > 1 && n > 1 ? Math.min(a, n) : a > 1 && n < 1 ? n : a < 1 && n > 1 ? a : Math.min(a, n);
 }
@@ -4669,26 +4669,26 @@ class Ra extends ae {
   }
   brandSvg(A, e) {
     const t = A.toSVG(2), a = A.getBoundingBox(), n = a.x2 - a.x1, s = A.toPathData(3), i = () => {
-      const D = H("g"), p = H("defs");
+      const D = P("g"), p = P("defs");
       D.appendChild(p), p.appendChild($e(3, 7, 4, "shadow"));
-      const m = H("g");
+      const m = P("g");
       D.appendChild(m), m.setAttribute("filter", "url(#shadow)"), m.innerHTML = t;
-      const F = H("g");
+      const F = P("g");
       D.appendChild(F), F.setAttribute("fill", "red"), F.setAttribute("stroke", "red"), F.setAttribute("stroke-width", "9"), F.innerHTML = t;
-      const Y = H("g");
+      const Y = P("g");
       D.appendChild(Y), Y.setAttribute("fill", "#9d2621"), Y.setAttribute("transform", "translate(1,1)"), Y.innerHTML = t;
-      const M = H("g");
+      const M = P("g");
       return D.appendChild(M), M.setAttribute("fill", "yellow"), M.innerHTML = t, new ie(D).transform(([S, J]) => [S, J + (n / 2 - S) ** 2 / (n * 2.9)]), D;
     }, [o, r, g] = qe(e);
     if (!o)
       return "";
-    const B = H("defs");
+    const B = P("defs");
     o.appendChild(B), Ze(o, B, e);
-    const l = r * 0.23, w = g * 0.94, d = g * 0.04, C = r * 0.53, E = H("g");
+    const l = r * 0.23, w = g * 0.94, d = g * 0.04, C = r * 0.53, E = P("g");
     o.appendChild(E), E.setAttribute("transform", `translate(${d} ${C}) rotate(-21)`);
     const Q = ne(l, w);
     Q.setAttribute("opacity", "0"), E.appendChild(Q);
-    const h = H("g");
+    const h = P("g");
     E.appendChild(h);
     const I = i();
     h.appendChild(I);
@@ -4713,11 +4713,11 @@ class Ga extends ae {
   }
   brandSvg(A, e, t) {
     const a = A.toSVG(2), n = A.getBoundingBox(), s = n.y2 - n.y1, i = n.x2 - n.x1, o = A.toPathData(3), r = () => {
-      const m = H("g"), F = H("g");
+      const m = P("g"), F = P("g");
       m.appendChild(F), F.setAttribute("stroke", "#5C1A0D"), F.setAttribute("stroke-width", "4"), F.setAttribute("transform", "translate(1,1)"), F.innerHTML = a;
-      const Y = H("g");
+      const Y = P("g");
       m.appendChild(Y), Y.setAttribute("fill", "#FFE386"), Y.setAttribute("transform", "translate(1,1)"), Y.innerHTML = a;
-      const M = H("g");
+      const M = P("g");
       m.appendChild(M), M.setAttribute("fill", "white"), M.innerHTML = a;
       const G = new ie(m);
       return G.transform(([S, J]) => [S, J + ((i - S) * J) ** 2 / (i * 5e4)]), G.transform(([S, J]) => [
@@ -4727,15 +4727,15 @@ class Ga extends ae {
     }, [g, B, l] = qe(e);
     if (!g)
       return "";
-    const w = H("defs");
+    const w = P("defs");
     g.appendChild(w), Ze(g, w, e);
     let d, C, E, Q;
     t ? (d = B * 0.25 * (1 + 0.1), C = l / 2 * (1 + 0.1), E = l * 0.22, Q = B * 0.32) : (d = B * 0.22 * (1 + 0.1), C = l * 0.8, E = l * 0.067, Q = B * 0.33);
-    const h = H("g");
+    const h = P("g");
     g.appendChild(h), h.setAttribute("transform", `translate(${E} ${Q}) rotate(-10)`);
     const I = ne(d, C);
     I.setAttribute("opacity", "0"), h.appendChild(I);
-    const u = H("g");
+    const u = P("g");
     h.appendChild(u);
     const D = r();
     u.appendChild(D);
@@ -4757,29 +4757,29 @@ class ka extends ae {
   }
   svgElement(A, e) {
     const t = Ae(va), n = A !== "" ? ((I) => I.charAt(0).toUpperCase() + I.substr(1).toLowerCase())(A) : "", s = t.getPath(n, 0, 72, 72), i = s.toSVG(2), o = s.getBoundingBox(), r = o.x2 - o.x1, g = s.toPathData(3), B = () => {
-      const I = H("g");
+      const I = P("g");
       I.classList.add("module-text-group");
-      const u = H("defs");
+      const u = P("defs");
       I.appendChild(u), u.appendChild($e(0, 2, 2, "shadow"));
-      const D = H("path");
+      const D = P("path");
       D.setAttribute("d", g), D.setAttribute("stroke", "black"), D.setAttribute("stroke-width", "3"), u.appendChild(D);
-      const p = H("g");
+      const p = P("g");
       p.classList.add("module-layer0"), I.appendChild(p), p.setAttribute("filter", "url(#shadow)"), p.innerHTML = D.outerHTML;
-      const m = H("g");
+      const m = P("g");
       m.classList.add("module-layer1"), I.appendChild(m), m.setAttribute("stroke-width", "3"), m.setAttribute("stroke", "rgb(45,41,38)"), m.setAttribute("fill", "rgb(45,41,38)"), m.setAttribute("transform", "translate(0.5,0)"), m.innerHTML = i;
-      const F = H("g");
+      const F = P("g");
       F.classList.add("module-layer2"), I.appendChild(F), F.setAttribute("fill", "rgb(255,209,0)"), F.setAttribute("transform", "translate(1,-0.1)"), F.innerHTML = i;
-      const Y = H("g");
+      const Y = P("g");
       return Y.classList.add("module-layer3"), I.appendChild(Y), Y.setAttribute("fill", "white"), Y.innerHTML = i, new ie(I).transform(([G, S]) => [G, S + (r / 2 - G) ** 2 / (r * 6)]), I;
-    }, l = H("g");
+    }, l = P("g");
     l.classList.add("module-root");
-    const w = H("defs");
+    const w = P("defs");
     l.appendChild(w);
-    const d = H("g");
+    const d = P("g");
     d.classList.add("module-bounds"), l.appendChild(d);
     const C = ne(e.height, e.width);
     C.setAttribute("opacity", "0"), d.appendChild(C);
-    const E = H("g");
+    const E = P("g");
     E.classList.add("module-text-enclosure"), l.appendChild(E);
     const Q = B();
     E.appendChild(Q);
@@ -5122,7 +5122,7 @@ class ba {
     const A = this.getCommandContext().getState();
     if (!A)
       throw new v("Attempted to serialize state before it was initialized.");
-    return { transaction: JSON.stringify(this.dehydrateState(PA(A.transaction))) };
+    return { transaction: JSON.stringify(this.dehydrateState(HA(A.transaction))) };
   }
   dehydrateState(A) {
     for (const e of Object.values(A.layouts).map((t) => t.elements).flat())
@@ -6480,7 +6480,7 @@ class dA {
         region: { left: B.x, top: B.y, width: B.width, height: B.height }
       }
     }), C = ye(d);
-    await (await Pe.from(w, C, {
+    await (await He.from(w, C, {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !1,
       createCanvas: fA,
@@ -6519,6 +6519,27 @@ class dA {
   getTotalPriceSubunits() {
     return this.getBasePriceSubunits() + this.getSelectionPriceSubunits();
   }
+  copySelections(A, e) {
+    const t = e == null ? void 0 : e.map((s) => s.getId()), a = this.getSteps().filter((s) => t === void 0 || t.includes(s.getId())), n = A.getSteps();
+    a.forEach((s) => {
+      const i = /* @__PURE__ */ new Set(), o = s.getRaw().globalPropertyAspectConfigurations;
+      o !== void 0 && (o.forEach((r) => i.add(JSON.stringify(r))), n.forEach((r) => {
+        const g = r.getRaw().globalPropertyAspectConfigurations;
+        g !== void 0 && g.forEach((B) => {
+          const l = i.has(JSON.stringify(B));
+          if (l && B.aspectName === "Option") {
+            const w = r.getCurrentVariant();
+            if (!w)
+              return;
+            s.selectVariant(w), i.delete(JSON.stringify(B));
+          } else if (l && B.aspectName === "Text") {
+            const w = r.getText();
+            s.setText(w), i.delete(JSON.stringify(B));
+          }
+        });
+      }));
+    });
+  }
   getStepByName(A) {
     const e = this.getWorkflowManager().getWorkflow().steps.find((t) => t.stepTitle === A);
     if (!(!e || !this.stepHasHandle(e)))
@@ -6592,7 +6613,7 @@ class dA {
   }
   async copy() {
     var i;
-    const A = PA(this.getCommandContext().getState());
+    const A = HA(this.getCommandContext().getState());
     if (!A)
       throw new v("Internal state is undefined! Cannot copy experience!");
     const e = JSON.stringify(A.transaction), t = this.getWorkflowManager().getWorkflow(), a = new Bs({}), n = (i = this.getWorkflowManager().getTransaction().integrationProduct) == null ? void 0 : i.id;
@@ -6739,7 +6760,7 @@ const nn = [
   const a = e.data, n = t.option;
   if (!n)
     return console.error(`No option for step ${t.stepName}.`), [];
-  const s = ((D = n.variants) == null ? void 0 : D.find((m) => m.id === a.illustrationVariantId)) || HA(n);
+  const s = ((D = n.variants) == null ? void 0 : D.find((m) => m.id === a.illustrationVariantId)) || PA(n);
   if (!s)
     return console.error(`No variant with ID: ${a.illustrationVariantId}`), [];
   if (!s.asset)
@@ -6766,7 +6787,7 @@ const nn = [
       m.classList.add(S), C[S] = { browserValue: M };
     }
   });
-  const Q = He().serializeToString(d), h = a.colors;
+  const Q = Pe().serializeToString(d), h = a.colors;
   if (h) {
     for (const [m, F] of Object.entries(C))
       for (const Y of Object.keys(h))
@@ -6838,7 +6859,7 @@ const nn = [
   const a = e.data, n = t.option;
   if (!n)
     return console.error(`No option for step ${t.stepName}.`), [];
-  const s = ((g = n.variants) == null ? void 0 : g.find((l) => l.id === a.pictureVariantId)) || HA(n);
+  const s = ((g = n.variants) == null ? void 0 : g.find((l) => l.id === a.pictureVariantId)) || PA(n);
   if (!s)
     return console.error(`No variant with ID: ${a.pictureVariantId}`), [];
   if (!s.asset)
@@ -6880,7 +6901,7 @@ const nn = [
   const a = e.data, n = t.option;
   if (!n)
     return console.error(`No option for step ${t.stepName}.`), [];
-  const s = ((r = n.variants) == null ? void 0 : r.find((g) => g.id === a.colorVariantId)) || HA(n);
+  const s = ((r = n.variants) == null ? void 0 : r.find((g) => g.id === a.colorVariantId)) || PA(n);
   if (!s)
     return console.error(`No variant with ID: ${a.colorVariantId}`), [];
   A[t.stepName] = { selectedVariants: [s] };
@@ -6970,7 +6991,7 @@ const nn = [
       const l = /<svg.*?<\/svg>/s, w = B.match(l) || [], d = (w == null ? void 0 : w.length) > 0 ? w[0] : "", Q = xe().parseFromString(d, "image/svg+xml").firstElementChild;
       if (!Q)
         throw new sA("Failed to read SVG.");
-      return Ne(Q), He().serializeToString(Q);
+      return Ne(Q), Pe().serializeToString(Q);
     };
     o.forEach((B) => {
       const l = c.find((d) => d.panelId === B.panelId);
@@ -7005,7 +7026,7 @@ const nn = [
     const E = t.option;
     if (!E)
       return;
-    const Q = ((I = E.variants) == null ? void 0 : I.find((u) => u.id === n.fontVariantId)) || HA(E);
+    const Q = ((I = E.variants) == null ? void 0 : I.find((u) => u.id === n.fontVariantId)) || PA(E);
     if (!Q || !Q.asset)
       return;
     A[t.stepName] = { selectedVariants: [Q] };
@@ -7219,7 +7240,7 @@ class Cn {
    * Actions to perform when a static render event is fired for this canvas.
    */
   async render(A, e, t) {
-    const a = PA(e);
+    const a = HA(e);
     this.lastRequestedRenderArguments = {
       workflow: A,
       layouts: a,
@@ -7296,7 +7317,7 @@ class Qn extends Te {
       i = this.getDynamicTextureResolution().width, o = this.getDynamicTextureResolution().height;
     const r = Fe(A.layoutState.layout, e, {
       renderingConfiguration: { purpose: Me.ThreeD }
-    }), g = ye(r), B = await Pe.from(this.ctx, g, {
+    }), g = ye(r), B = await He.from(this.ctx, g, {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !this.nonPOTSupport,
       ignoreAnimation: !0,
@@ -7594,14 +7615,14 @@ const Ms = (c, A) => {
             }
         }
     }
-`, Hn = y`
+`, Pn = y`
     mutation BundleUpdateTransactionOrder($id: String!, $transactionIds: [String!]!) {
         bundleUpdateTransactionOrder(id: $id, transactionIds: $transactionIds) {
             id
         }
     }
 `;
-class Pn {
+class Hn {
   constructor(A) {
     this.handleCache = {}, this.bundle = A;
   }
@@ -7899,7 +7920,7 @@ class bn {
   async setAspect(A, e) {
     if (!this.globalPropertyState)
       throw new Error("Global property state not initialized");
-    const t = PA(this.globalPropertyState), a = this.globalPropertyState.aspects.find((n) => n.name === A);
+    const t = HA(this.globalPropertyState), a = this.globalPropertyState.aspects.find((n) => n.name === A);
     a ? a.value = e : this.globalPropertyState.aspects.push({ name: A, value: e }), await this.updateGlobalPropertyState(), await this.onGlobalPropertyStateChange(t, this.globalPropertyState);
   }
   async updateGlobalPropertyState() {
@@ -8095,7 +8116,7 @@ class Tn {
   getDefaultWorkflow() {
     const A = this.product.workflows || [];
     if (A.length === 0)
-      throw new P(
+      throw new H(
         "No workflows found on product. This is generally due to a configuration error. Please confirm at least one workflow is configured for this product."
       );
     const e = this.productResource.workflowId;
@@ -8201,7 +8222,7 @@ class Ie {
       this.id,
       this.ownerId,
       this.checkConditionalHandlesChanged.bind(this)
-    ), this.globalPropertyHandleService = new Pn(this), this.setPreviewService(t), this.initializationPromise = this.loadExistingBundles(
+    ), this.globalPropertyHandleService = new Hn(this), this.setPreviewService(t), this.initializationPromise = this.loadExistingBundles(
       ((o = e.transactions) == null ? void 0 : o.map((r) => r.id)) || [],
       a
     );
@@ -8575,7 +8596,7 @@ class Ie {
   }
   async updateTransactionOrder() {
     await N.getShadowGraphqlClient().mutate({
-      mutation: Hn,
+      mutation: Pn,
       variables: {
         id: this.id,
         transactionIds: this.workflowExperiences.map((A) => A.getWorkflowManager().getTransaction().id)
@@ -9475,7 +9496,7 @@ class Bs {
           mutation: na
         });
       } catch (t) {
-        throw console.error(t), new P("Critical - Unable to synchronize workflow state with server.");
+        throw console.error(t), new H("Critical - Unable to synchronize workflow state with server.");
       }
     }, this.initialized = !1, this.options = A, this.options.applicationKey && Ut(this.options.applicationKey);
   }
@@ -9799,13 +9820,13 @@ class Bs {
           fetchPolicy: "no-cache"
         });
         if (!((Q = D.data) != null && Q.transactions) || D.data.transactions.length === 0)
-          throw new P("Existing transaction not found.");
+          throw new H("Existing transaction not found.");
         const p = (h = D.data) == null ? void 0 : h.transactions[0];
         if (!p.workflowId)
-          throw new P("Existing transaction has no workflow ID.");
+          throw new H("Existing transaction has no workflow ID.");
         const m = await QA(p.workflowId);
         if (!p.product)
-          throw new P("Failed to load transaction, product not available.");
+          throw new H("Failed to load transaction, product not available.");
         return { transaction: p, workflow: m, readOnly: u };
       }
       if (a.type === "integration" || a.type === "external") {
@@ -9826,15 +9847,15 @@ class Bs {
             context: this.options.applicationKey ? { headers: { "X-Application-Key": this.options.applicationKey } } : void 0
           });
           if (!F.data || !F.data.transactionCreate)
-            throw new P("Failed to create transaction!");
+            throw new H("Failed to create transaction!");
           const Y = F.data.transactionCreate;
           if (!Y.product)
-            throw new P("Failed to create transaction, product not available.");
+            throw new H("Failed to create transaction, product not available.");
           return Y;
         }, u = QA(a.workflowId, a == null ? void 0 : a.graphql), [D, p] = await Promise.all([I(), u]);
         return { transaction: D, workflow: p };
       }
-      throw new P("No workflow ID provided.");
+      throw new H("No workflow ID provided.");
     }, { transaction: s, workflow: i, readOnly: o } = await n();
     this.currencyCode = (B = s.product.partner) == null ? void 0 : B.currencyCode;
     const r = {
@@ -9888,7 +9909,7 @@ class Bs {
    */
   async getWorkflowExperiences(A, e) {
     if (A.length === 0)
-      throw new P("No options provided!");
+      throw new H("No options provided!");
     const t = N.getShadowGraphqlClient(), a = A.map((h, I) => ({ option: h, index: I })), n = a.filter((h) => h.option.type === "transaction"), s = a.filter(
       (h) => h.option.type === "integration" || h.option.type === "external"
     ), i = async () => {
@@ -9905,7 +9926,7 @@ class Bs {
       }), u = I.data.transactions;
       if (u.length !== n.length) {
         const m = ((p = (D = I.errors) == null ? void 0 : D[0]) == null ? void 0 : p.message) || "Unknown error";
-        throw new P(`Not all transactions were found: ${m}`);
+        throw new H(`Not all transactions were found: ${m}`);
       }
       return u.map((m, F) => {
         var Y;
@@ -9936,7 +9957,7 @@ class Bs {
       }), I = (u = h.data) == null ? void 0 : u.transactionCreateMany;
       if (!I || I.length === 0) {
         const m = ((p = (D = h.errors) == null ? void 0 : D[0]) == null ? void 0 : p.message) || "Unknown error";
-        throw new P(`Failed to create transactions: ${m}`);
+        throw new H(`Failed to create transactions: ${m}`);
       }
       return I.map((m, F) => ({
         transaction: m,
@@ -9990,7 +10011,7 @@ class Bs {
   async initFromIntegrationProduct(A) {
     var s;
     if (A === "")
-      throw new P("No integration product ID provided.");
+      throw new H("No integration product ID provided.");
     const t = await N.getShadowGraphqlClient().mutate({
       mutation: he,
       variables: {
@@ -10003,10 +10024,10 @@ class Bs {
       context: this.options.applicationKey ? { headers: { "X-Application-Key": this.options.applicationKey } } : void 0
     });
     if (!t.data || !t.data.transactionCreate)
-      throw new P("Failed to create transaction!");
+      throw new H("Failed to create transaction!");
     const a = t.data.transactionCreate;
     if (!a.product)
-      throw new P("Failed to create transaction, product not available.");
+      throw new H("Failed to create transaction, product not available.");
     this.currencyCode = (s = a.product.partner) == null ? void 0 : s.currencyCode;
     const n = x.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map();
     n.set(a.id, a.transactionOwnerId), x.setMap("transactionOwnerIds", n), this.experienceOptions = {
@@ -10025,7 +10046,7 @@ class Bs {
   async initFromTransaction(A, e = !1) {
     var i, o, r, g;
     if (A === "")
-      throw new P("No transaction ID provided.");
+      throw new H("No transaction ID provided.");
     const t = N.getShadowGraphqlClient(), a = async () => {
       var w, d;
       const l = (w = (await t.query({
@@ -10035,9 +10056,9 @@ class Bs {
         errorPolicy: "all"
       })).data) == null ? void 0 : w.transactions[0];
       if (!l)
-        throw new P("Failed to read transaction.");
+        throw new H("Failed to read transaction.");
       if (!l.product)
-        throw new P("Failed to load transaction, product not available.");
+        throw new H("Failed to load transaction, product not available.");
       this.currencyCode = (d = l.product.partner) == null ? void 0 : d.currencyCode, this.experienceOptions = {
         product: l.product,
         transaction: l,
@@ -10060,9 +10081,9 @@ class Bs {
         errorPolicy: "all"
       })).data) == null ? void 0 : i.transactions[0];
       if (!l)
-        throw new P("Failed to read transaction.");
+        throw new H("Failed to read transaction.");
       if (!l.product)
-        throw new P("Failed to load transaction, product not available.");
+        throw new H("Failed to load transaction, product not available.");
       this.currencyCode = (o = l.product.partner) == null ? void 0 : o.currencyCode, this.experienceOptions = {
         product: l.product,
         transaction: l,
@@ -10079,9 +10100,9 @@ class Bs {
         errorPolicy: "all"
       })).data) == null ? void 0 : r.transactionClaim;
       if (!l)
-        throw new P("Failed to read transaction.");
+        throw new H("Failed to read transaction.");
       if (!l.product)
-        throw new P("Failed to load transaction, product not available.");
+        throw new H("Failed to load transaction, product not available.");
       this.currencyCode = (g = l.product.partner) == null ? void 0 : g.currencyCode, l.transactionOwnerId && (n.set(l.id, l.transactionOwnerId), x.setMap("transactionOwnerIds", n)), this.experienceOptions = {
         product: l.product,
         transaction: l,
@@ -10090,7 +10111,7 @@ class Bs {
         readOnly: e
       }, this.initialized = !0;
     } catch {
-      throw new P("Attempted to access a transaction that isn't available.");
+      throw new H("Attempted to access a transaction that isn't available.");
     }
   }
   /**
@@ -10099,7 +10120,7 @@ class Bs {
   async getWorkflowExperienceDeprecated(A, e, t) {
     var a, n, s, i;
     if (!this.initialized || !this.experienceOptions)
-      throw new P("Cannot launch experience: Not initialized.");
+      throw new H("Cannot launch experience: Not initialized.");
     if (this.experienceOptions.transaction.workflowId) {
       const o = await QA(this.experienceOptions.transaction.workflowId);
       if (this.experienceOptions.workflow = o, this.experienceOptions.transaction.workflowState) {
@@ -10139,7 +10160,7 @@ class Bs {
       const l = new dA(this, this.experienceOptions);
       return await l.getWorkflowManager().getInitializationPromise(), l;
     }
-    throw new P("No workflow ID provided.");
+    throw new H("No workflow ID provided.");
   }
   /**
    * @deprecated The value this returns will be changed whenever `getWorkflowExperience()` is called. Use `workflowExperience.getWorkflowManager().getPreviewService()` instead.
@@ -10155,7 +10176,7 @@ class Bs {
    */
   getProduct() {
     if (!this.initialized || !this.experienceOptions)
-      throw new P("Cannot get product: Not initialized.");
+      throw new H("Cannot get product: Not initialized.");
     return this.experienceOptions.product;
   }
   /**
@@ -10164,7 +10185,7 @@ class Bs {
    */
   getTransaction() {
     if (!this.initialized || !this.experienceOptions)
-      throw new P("Cannot get transaction: Not initialized.");
+      throw new H("Cannot get transaction: Not initialized.");
     return this.experienceOptions.transaction;
   }
   storeCustomer(A) {
@@ -10339,8 +10360,8 @@ class ds extends j {
 export {
   $ as AssetNotFoundError,
   Ns as AssetType,
-  Hs as BringForwardCommand,
-  Ps as BringToBackCommand,
+  Ps as BringForwardCommand,
+  Hs as BringToBackCommand,
   Rs as BringToFrontCommand,
   Us as CanvasCommand,
   Tn as CollectionProduct,

package/dist/index.umd.cjs

@@ -1859,7 +1859,7 @@ IfnI8vaNAAAAAElFTkSuQmCC" transform="matrix(0.13 0.0141 -0.0141 0.1301 104.926 1
             }
         }
     }
-`;class ge{constructor(e,A){var n;if(this.renderableScenes=[],this.renderableSceneCallbacks=[],this.debouncedSavedDesignUpdate=qe(async()=>{await De.getSavedDesignByTransaction(this.getWorkflowManager().getTransaction().id)&&this.save()},2500),this.getCanvasObjectURLAsync=async a=>new Promise((i,o)=>{try{a.toBlob(s=>{if(s){const r=URL.createObjectURL(s);i(r)}})}catch(s){o(s)}}),!A.workflow)throw new Error("No Workflow ID provided.");this.client=e;const t=A.layouts;this.commandContext=new c.CommandContext,this.commandContext.initialize(t,A.reloadedState),this.isReadOnly=A.transaction.isOrdered||!!A.readOnly,this.workflowManager=new _t(A.workflow,((n=A.product.profanities)==null?void 0:n.map(a=>a.word))||[],t,this.commandContext,a=>{try{this.debouncedSavedDesignUpdate()}catch{console.error("Failed to update saved design details.")}return A.stateMutationFunc(a)},A.transaction,A.product,A.previewService,A.renderableContextService,A.reloadedState,A.readOnly,A.modelContainer,A.isReloadedTransaction,A.singleVariantsRenderable),this.workflowManager.addSelectionCallback(a=>{const i=a.traversableScenes.map(o=>{const s=o.renderableSteps.map(r=>r.stepName);return{id:o.name,title:o.title,renderableSteps:s}});this.renderableScenes=i,this.renderableSceneCallbacks.forEach(o=>o(i))})}getClient(){return this.client}getIsReadOnly(){return this.isReadOnly}getCommandContext(){return this.commandContext}getWorkflowManager(){return this.workflowManager}async createPreviewImage(e,A){var C,D;const t=this.workflowManager.getWorkflow(),n=(C=t==null?void 0:t.finalizeStepConfig)==null?void 0:C.lookAtAnimation;if(e){if(!n)throw new Error("Failed to generate cart preview image!");return await((D=this.workflowManager.getPreviewService())==null?void 0:D.renderSceneScreenshot(A??512,n))||""}let a=2048;A&&A<=2048&&(a=A);const i=c.createCanvas(a,a),o=this.commandContext.getAllLayouts(),s=t.defaultPreviewPanelIndex||0,r=t.panels[s],l=o.find(I=>{var F;return((F=I.layoutState)==null?void 0:F.layout.panelId)===(r==null?void 0:r.name)})||o[0],d=l.layoutState.layout.previewRegion?{x:l.layoutState.layout.previewRegion.left,y:l.layoutState.layout.previewRegion.top,width:l.layoutState.layout.previewRegion.width,height:l.layoutState.layout.previewRegion.height}:{x:0,y:0,width:l.layoutState.layout.width,height:l.layoutState.layout.height},B=this.commandContext.getLayoutById(l.layoutState.layout.id),w=i.getContext("2d");if(!w)throw new Ee("Failed to obtain 2D context for preview image creation");const E=c.getSvgElement(B.layoutState.layout,B.layoutState.elements,{renderingConfiguration:{purpose:c.LayoutRenderingPurpose.Print,region:{left:d.x,top:d.y,width:d.width,height:d.height}}}),m=c.renderPapyrusComponentAsString(E);await(await Xe.Pith.from(w,m,{anonymousCrossOrigin:!0,ignoreDimensions:!1,createCanvas:c.createCanvas,createImage:c.loadImage,DOMParser:c.getDomParser(),fetch:c.fetch})).render();const u=await this.getCanvasObjectURLAsync(i);return i.toDataURL(u)}getStepById(e){const A=this.getWorkflowManager().getWorkflow().steps.find(t=>t.stepName===e);if(!(!A||!this.stepHasHandle(A)))return fe.get(this.getWorkflowManager(),A)}getSteps(){return this.getScenes().flatMap(e=>this.getStepsByScene(e))}getScenes(){return this.getWorkflowManager().getWorkflow().stepGroups.map(A=>({id:A.id,name:A.name,stepIds:A.stepNames}))}getSelectionPriceSubunits(){const e=this.getWorkflowManager().getWorkflowSelections();let A=0;return Object.values(e).forEach(t=>{A+=t.selections.map(n=>n.priceModifier).reduce((n,a)=>n+a)}),A}getBasePriceSubunits(){return this.getWorkflowManager().getProduct().basePrice||0}getTotalPriceSubunits(){return this.getBasePriceSubunits()+this.getSelectionPriceSubunits()}getStepByName(e){const A=this.getWorkflowManager().getWorkflow().steps.find(t=>t.stepTitle===e);if(!(!A||!this.stepHasHandle(A)))return fe.get(this.getWorkflowManager(),A)}getStepsByType(e){return this.getWorkflowManager().getWorkflow().steps.filter(A=>A.type===e).map(A=>fe.get(this.getWorkflowManager(),A))}getStepsByScene(e){if(!this.getWorkflowManager().getWorkflow().stepGroups.find(t=>t.name===e.name))throw new Error("Given scene is not present on workflow! Be careful when persisting scenes that you only use them with the relevant workflow.");return e.stepIds.map(t=>this.getWorkflowManager().getWorkflow().steps.find(n=>n.stepName===t)).filter(t=>this.stepHasHandle(t)).map(t=>fe.get(this.getWorkflowManager(),t))}async attachCustomerDetails(e){return this.assignCustomerDetails({emailAddress:e.email})}async assignCustomerDetails(e){var i,o,s;const t=(P.getMap("transactionOwnerIds")||new Map).get(this.getWorkflowManager().getTransaction().id),a=(s=(o=(i=(await H.getShadowGraphqlClient().mutate({mutation:rn,variables:{id:this.getWorkflowManager().getTransaction().id,details:e,type:"Owner"},context:{transactionOwnerId:t}})).data)==null?void 0:i.transactionAddStakeholder)==null?void 0:o.stakeholders)==null?void 0:s.find(r=>{var l;return((l=r.customer)==null?void 0:l.emailAddress)===e.emailAddress});if(a!=null&&a.customer){this.getWorkflowManager().setTransactionCustomer(a.customer);const r=P.getMap("transactionCustomerIds")||new Map;r.set(this.getWorkflowManager().getTransaction().id,a.customer.id),P.setMap("transactionCustomerIds",r)}}attachRenderableSceneListener(e){this.renderableSceneCallbacks.push(e),e(this.renderableScenes)}detachRenderableSceneListener(e){this.renderableSceneCallbacks=this.renderableSceneCallbacks.filter(A=>A!==e)}async save(e){if(!this.getCommandContext().getState())throw new U("State undefined!");const n={title:await(async()=>{var s;if(e)return e;const a=this.getWorkflowManager().getTransaction().id,o=(s=(await De.getSavedDesigns()).find(r=>r.transactionId===a))==null?void 0:s.title;return o||"My design"})(),thumbnail:await this.createPreviewImage(!1,256),transactionId:this.getWorkflowManager().getTransaction().id,productId:this.getWorkflowManager().getProduct().id,integrationProductId:this.getWorkflowManager().getTransaction().integrationProduct.id,workflowName:this.getWorkflowManager().getWorkflow().name,workflowId:this.getWorkflowManager().getWorkflow().id,lastEdited:new Date};return await De.addDesign(n),n}async copy(){var o;const e=de(this.getCommandContext().getState());if(!e)throw new U("Internal state is undefined! Cannot copy experience!");const A=JSON.stringify(e.transaction),t=this.getWorkflowManager().getWorkflow(),n=new ZA({}),a=(o=this.getWorkflowManager().getTransaction().integrationProduct)==null?void 0:o.id;if(!a)throw new U("Integration product id is undefined!");return await n.initFromIntegrationProduct(a),await n.getWorkflowExperience(t.id,A,void 0)}async onDesignFinished(e,A=!0){return bA(this.workflowManager,this.workflowManager.getWorkflow(),this.workflowManager.getLayouts(),()=>this.commandContext.getState(),this.workflowManager.getProduct(),this.workflowManager.getTransaction(),this.workflowManager.getWorkflowSelections(),this.workflowManager.getWorkflow().name,e||(()=>{}),t=>A?this.createPreviewImage(t,1024):Promise.resolve(void 0),this.workflowManager.getWorkflowMetadata())}stepHasHandle(e){return e.type!==c.StepType.SilentIllustration&&e.type!==c.StepType.ProductOverlay}getExportedData(){var n;const e=new Map,A=this.getWorkflowManager().getWorkflowMetadata(),t=this.getWorkflowManager().getWorkflowSelections();return Object.keys(A).forEach(a=>{const i=this.workflowManager.getWorkflow().steps.find(s=>s.stepName===a);if(!i)return;e.has(i.stepTitle)||e.set(i.stepTitle,{});const o=A[a];Object.keys(o).forEach(s=>{e.get(i.stepTitle)[s]=o[s]})}),(n=Object.keys(t))==null||n.forEach(a=>{const i=this.workflowManager.getWorkflow().steps.find(o=>o.stepName===a);i&&(e.has(i.stepTitle)||e.set(i.stepTitle,{}),e.get(i.stepTitle).selection=t[a].selections[0].name)}),e}}const cn=["altGlyph","circle","ellipse","path","polygon","polyline","rect","text","textPath","tref","tspan"],gn=async(g,e,A)=>{const t=e.data,n=A.data.baseUrl,a=t.assetUrl.replace("localhost","localstack"),i=n.slice(0,4)==="http"?"":"https://",o=new URL(i+n);o.searchParams.append("video",c.toBase64(JSON.stringify([{href:a}]))),o.pathname=o.pathname+(o.pathname.slice(-1)==="/"?"":"/");const s=o.toString(),l=`data:image/svg+xml;base64,${c.toBase64(await $e.toString(s,{type:"svg"}))}`,d=w=>{const E=g.find(h=>h.panelId===w.panelId);if(!E)throw new k(w);const m=c.generate();return new c.CreateElementCommand({id:m,src:l,type:c.LayoutElementType.Image,y:w.top,x:w.left,width:w.width,height:w.height,rotation:0},E)},B=A.data.regions;try{return B.map(d)}catch(w){return console.error(w),[]}},ln=async(g,e,A,t)=>{const n=A.data,a=n.assetUrl,i=await c.getPatternImageData(a);try{const o=c.getVariant(n,t.option);o&&(e[t.stepName]={selectedVariants:[o]});const s=async r=>{var m;const l=await c.generateFrameSVG(r||{width:1,height:1},(m=o==null?void 0:o.asset)==null?void 0:m.fileLink),d=await c.getFrameData(l),B=c.generate(),w=g.find(h=>h.panelId===r.panelId);if(!w)throw new k(r);const E=c.calculateOffsets(i,d,{scale:n.scale,left:n.x,top:n.y});return[new c.CreateElementCommand({id:B,path:d.path,dataWidth:d.width,dataHeight:d.height,type:c.LayoutElementType.Frame,focalBlur:t.data.focalBlur,focalBlurStrength:t.data.focalBlurStrength,focalBlurRadius:t.data.focalBlurRadius,forceImageCover:t.data.forceImageCover,x:r.left,y:r.top,width:r.width,height:r.height,layer:r.layer,layerIndex:r.layerIndex,rotation:r.rotation,scaleX:r.width/d.width,scaleY:r.height/d.height,pattern:void 0},w),new c.UpdateFramePattern(B,i,E)]};return(await Promise.all(t.data.regions.map(r=>s(r)))).flat()}catch(o){return console.error(o),[]}},Bn=async(g,e,A,t)=>{var F,p;const n=A.data,a=t.option;if(!a)return console.error(`No option for step ${t.stepName}.`),[];const i=((F=a.variants)==null?void 0:F.find(f=>f.id===n.illustrationVariantId))||c.getDefaultVariant(a);if(!i)return console.error(`No variant with ID: ${n.illustrationVariantId}`),[];if(!i.asset)return console.error(`No asset for variant with ID: ${n.illustrationVariantId}`),[];e[t.stepName]={selectedVariants:[i]};const o=(p=i.asset)==null?void 0:p.fileLink;if(!o)return console.error(`No asset link for variant with ID: ${n.illustrationVariantId}`),[];const s=await c.fetchAsString(o,!0),r=/<svg.*?<\/svg>/s,l=s.match(r)||[],d=(l==null?void 0:l.length)>0?l[0]:"",E=c.domParser().parseFromString(d,"image/svg+xml").firstElementChild;if(!E)return console.error("Failed to read SVG."),[];c.sanitizeSvgTree(E);const m={};c.traverse(E,f=>{cn.includes(f.tagName)&&!f.attributes.getNamedItem("fill")&&f.setAttribute("fill","#000000");const S=f.attributes.getNamedItem("fill");if(S&&S.value!=="none"){const Y=S.value,N=`spiff-fill-${Y.replace(/\W/g,"")}`;f.classList.add(N),m[N]={browserValue:Y}}const y=f.attributes.getNamedItem("stroke");if(y&&y.value!=="none"){const Y=y.value,N=`spiff-stroke-${Y.replace(/\W/g,"")}`;f.classList.add(N),m[N]={browserValue:Y}}});const u=c.xmlSerializer().serializeToString(E),C=n.colors;if(C){for(const[f,S]of Object.entries(m))for(const y of Object.keys(C))if(S.browserValue===y){m[f]={browserValue:C[y]};break}}const D=f=>{const S=g.find(Y=>Y.panelId===f.panelId);if(!S)throw new k(f);const y=c.generate();return new c.CreateElementCommand({colors:m,id:y,svg:u,type:c.LayoutElementType.Illustration,y:f.top,x:f.left,rotation:f.rotation,width:f.width,height:f.height,layer:f.layer,layerIndex:f.layerIndex,immutable:f.immutable},S)},I=t.data.regions;try{return I.map(D)}catch(f){return console.error(f),[]}},dn=async(g,e,A)=>{const t=await FA(A.data.module),n=e.data,a=(o,s)=>{const r=g.find(d=>d.panelId===s.panelId);if(!r)throw new k(s);const l=c.generate();return new c.CreateElementCommand({colors:{},id:l,svg:o,type:c.LayoutElementType.Illustration,y:s.top,x:s.left,rotation:s.rotation,width:s.width,height:s.height,layer:s.layer,layerIndex:s.layerIndex},r)},i=A.data.regions;try{return i.map(o=>a(t.svgPrint(n.text,o),o))}catch(o){return console.error(o),[]}},wn=async(g,e,A,t)=>{var l,d;const n=A.data,a=t.option;if(!a)return console.error(`No option for step ${t.stepName}.`),[];const i=((l=a.variants)==null?void 0:l.find(B=>B.id===n.pictureVariantId))||c.getDefaultVariant(a);if(!i)return console.error(`No variant with ID: ${n.pictureVariantId}`),[];if(!i.asset)return console.error(`No asset for variant with ID: ${n.pictureVariantId}`),[];e[t.stepName]={selectedVariants:[i]};const o=(d=i.asset)==null?void 0:d.fileLink;if(!o)return console.error(`No asset link for variant with ID: ${n.pictureVariantId}`),[];const s=B=>{const w=g.find(m=>m.panelId===B.panelId);if(!w)throw new k(B);const E=c.generate();return new c.CreateElementCommand({id:E,src:o,type:c.LayoutElementType.Image,y:B.top,x:B.left,rotation:B.rotation,width:B.width,height:B.height,layer:B.layer,layerIndex:B.layerIndex,immutable:B.immutable,preserveAspectRatio:"none"},w)},r=t.data.regions;try{return r.map(s)}catch(B){return console.error(B),[]}},En=async(g,e,A,t)=>{var r;const n=A.data,a=t.option;if(!a)return console.error(`No option for step ${t.stepName}.`),[];const i=((r=a.variants)==null?void 0:r.find(l=>l.id===n.colorVariantId))||c.getDefaultVariant(a);if(!i)return console.error(`No variant with ID: ${n.colorVariantId}`),[];e[t.stepName]={selectedVariants:[i]};const o=l=>{const d=g.find(h=>h.panelId===l.panelId);if(!d)throw new k(l);const B=`
+`;class ge{constructor(e,A){var n;if(this.renderableScenes=[],this.renderableSceneCallbacks=[],this.debouncedSavedDesignUpdate=qe(async()=>{await De.getSavedDesignByTransaction(this.getWorkflowManager().getTransaction().id)&&this.save()},2500),this.getCanvasObjectURLAsync=async a=>new Promise((i,o)=>{try{a.toBlob(s=>{if(s){const r=URL.createObjectURL(s);i(r)}})}catch(s){o(s)}}),!A.workflow)throw new Error("No Workflow ID provided.");this.client=e;const t=A.layouts;this.commandContext=new c.CommandContext,this.commandContext.initialize(t,A.reloadedState),this.isReadOnly=A.transaction.isOrdered||!!A.readOnly,this.workflowManager=new _t(A.workflow,((n=A.product.profanities)==null?void 0:n.map(a=>a.word))||[],t,this.commandContext,a=>{try{this.debouncedSavedDesignUpdate()}catch{console.error("Failed to update saved design details.")}return A.stateMutationFunc(a)},A.transaction,A.product,A.previewService,A.renderableContextService,A.reloadedState,A.readOnly,A.modelContainer,A.isReloadedTransaction,A.singleVariantsRenderable),this.workflowManager.addSelectionCallback(a=>{const i=a.traversableScenes.map(o=>{const s=o.renderableSteps.map(r=>r.stepName);return{id:o.name,title:o.title,renderableSteps:s}});this.renderableScenes=i,this.renderableSceneCallbacks.forEach(o=>o(i))})}getClient(){return this.client}getIsReadOnly(){return this.isReadOnly}getCommandContext(){return this.commandContext}getWorkflowManager(){return this.workflowManager}async createPreviewImage(e,A){var C,D;const t=this.workflowManager.getWorkflow(),n=(C=t==null?void 0:t.finalizeStepConfig)==null?void 0:C.lookAtAnimation;if(e){if(!n)throw new Error("Failed to generate cart preview image!");return await((D=this.workflowManager.getPreviewService())==null?void 0:D.renderSceneScreenshot(A??512,n))||""}let a=2048;A&&A<=2048&&(a=A);const i=c.createCanvas(a,a),o=this.commandContext.getAllLayouts(),s=t.defaultPreviewPanelIndex||0,r=t.panels[s],l=o.find(I=>{var F;return((F=I.layoutState)==null?void 0:F.layout.panelId)===(r==null?void 0:r.name)})||o[0],d=l.layoutState.layout.previewRegion?{x:l.layoutState.layout.previewRegion.left,y:l.layoutState.layout.previewRegion.top,width:l.layoutState.layout.previewRegion.width,height:l.layoutState.layout.previewRegion.height}:{x:0,y:0,width:l.layoutState.layout.width,height:l.layoutState.layout.height},B=this.commandContext.getLayoutById(l.layoutState.layout.id),w=i.getContext("2d");if(!w)throw new Ee("Failed to obtain 2D context for preview image creation");const E=c.getSvgElement(B.layoutState.layout,B.layoutState.elements,{renderingConfiguration:{purpose:c.LayoutRenderingPurpose.Print,region:{left:d.x,top:d.y,width:d.width,height:d.height}}}),m=c.renderPapyrusComponentAsString(E);await(await Xe.Pith.from(w,m,{anonymousCrossOrigin:!0,ignoreDimensions:!1,createCanvas:c.createCanvas,createImage:c.loadImage,DOMParser:c.getDomParser(),fetch:c.fetch})).render();const u=await this.getCanvasObjectURLAsync(i);return i.toDataURL(u)}getStepById(e){const A=this.getWorkflowManager().getWorkflow().steps.find(t=>t.stepName===e);if(!(!A||!this.stepHasHandle(A)))return fe.get(this.getWorkflowManager(),A)}getSteps(){return this.getScenes().flatMap(e=>this.getStepsByScene(e))}getScenes(){return this.getWorkflowManager().getWorkflow().stepGroups.map(A=>({id:A.id,name:A.name,stepIds:A.stepNames}))}getSelectionPriceSubunits(){const e=this.getWorkflowManager().getWorkflowSelections();let A=0;return Object.values(e).forEach(t=>{A+=t.selections.map(n=>n.priceModifier).reduce((n,a)=>n+a)}),A}getBasePriceSubunits(){return this.getWorkflowManager().getProduct().basePrice||0}getTotalPriceSubunits(){return this.getBasePriceSubunits()+this.getSelectionPriceSubunits()}copySelections(e,A){const t=A==null?void 0:A.map(i=>i.getId()),n=this.getSteps().filter(i=>t===void 0||t.includes(i.getId())),a=e.getSteps();n.forEach(i=>{const o=new Set,s=i.getRaw().globalPropertyAspectConfigurations;s!==void 0&&(s.forEach(r=>o.add(JSON.stringify(r))),a.forEach(r=>{const l=r.getRaw().globalPropertyAspectConfigurations;l!==void 0&&l.forEach(d=>{const B=o.has(JSON.stringify(d));if(B&&d.aspectName==="Option"){const w=r.getCurrentVariant();if(!w)return;i.selectVariant(w),o.delete(JSON.stringify(d))}else if(B&&d.aspectName==="Text"){const w=r.getText();i.setText(w),o.delete(JSON.stringify(d))}})}))})}getStepByName(e){const A=this.getWorkflowManager().getWorkflow().steps.find(t=>t.stepTitle===e);if(!(!A||!this.stepHasHandle(A)))return fe.get(this.getWorkflowManager(),A)}getStepsByType(e){return this.getWorkflowManager().getWorkflow().steps.filter(A=>A.type===e).map(A=>fe.get(this.getWorkflowManager(),A))}getStepsByScene(e){if(!this.getWorkflowManager().getWorkflow().stepGroups.find(t=>t.name===e.name))throw new Error("Given scene is not present on workflow! Be careful when persisting scenes that you only use them with the relevant workflow.");return e.stepIds.map(t=>this.getWorkflowManager().getWorkflow().steps.find(n=>n.stepName===t)).filter(t=>this.stepHasHandle(t)).map(t=>fe.get(this.getWorkflowManager(),t))}async attachCustomerDetails(e){return this.assignCustomerDetails({emailAddress:e.email})}async assignCustomerDetails(e){var i,o,s;const t=(P.getMap("transactionOwnerIds")||new Map).get(this.getWorkflowManager().getTransaction().id),a=(s=(o=(i=(await H.getShadowGraphqlClient().mutate({mutation:rn,variables:{id:this.getWorkflowManager().getTransaction().id,details:e,type:"Owner"},context:{transactionOwnerId:t}})).data)==null?void 0:i.transactionAddStakeholder)==null?void 0:o.stakeholders)==null?void 0:s.find(r=>{var l;return((l=r.customer)==null?void 0:l.emailAddress)===e.emailAddress});if(a!=null&&a.customer){this.getWorkflowManager().setTransactionCustomer(a.customer);const r=P.getMap("transactionCustomerIds")||new Map;r.set(this.getWorkflowManager().getTransaction().id,a.customer.id),P.setMap("transactionCustomerIds",r)}}attachRenderableSceneListener(e){this.renderableSceneCallbacks.push(e),e(this.renderableScenes)}detachRenderableSceneListener(e){this.renderableSceneCallbacks=this.renderableSceneCallbacks.filter(A=>A!==e)}async save(e){if(!this.getCommandContext().getState())throw new U("State undefined!");const n={title:await(async()=>{var s;if(e)return e;const a=this.getWorkflowManager().getTransaction().id,o=(s=(await De.getSavedDesigns()).find(r=>r.transactionId===a))==null?void 0:s.title;return o||"My design"})(),thumbnail:await this.createPreviewImage(!1,256),transactionId:this.getWorkflowManager().getTransaction().id,productId:this.getWorkflowManager().getProduct().id,integrationProductId:this.getWorkflowManager().getTransaction().integrationProduct.id,workflowName:this.getWorkflowManager().getWorkflow().name,workflowId:this.getWorkflowManager().getWorkflow().id,lastEdited:new Date};return await De.addDesign(n),n}async copy(){var o;const e=de(this.getCommandContext().getState());if(!e)throw new U("Internal state is undefined! Cannot copy experience!");const A=JSON.stringify(e.transaction),t=this.getWorkflowManager().getWorkflow(),n=new ZA({}),a=(o=this.getWorkflowManager().getTransaction().integrationProduct)==null?void 0:o.id;if(!a)throw new U("Integration product id is undefined!");return await n.initFromIntegrationProduct(a),await n.getWorkflowExperience(t.id,A,void 0)}async onDesignFinished(e,A=!0){return bA(this.workflowManager,this.workflowManager.getWorkflow(),this.workflowManager.getLayouts(),()=>this.commandContext.getState(),this.workflowManager.getProduct(),this.workflowManager.getTransaction(),this.workflowManager.getWorkflowSelections(),this.workflowManager.getWorkflow().name,e||(()=>{}),t=>A?this.createPreviewImage(t,1024):Promise.resolve(void 0),this.workflowManager.getWorkflowMetadata())}stepHasHandle(e){return e.type!==c.StepType.SilentIllustration&&e.type!==c.StepType.ProductOverlay}getExportedData(){var n;const e=new Map,A=this.getWorkflowManager().getWorkflowMetadata(),t=this.getWorkflowManager().getWorkflowSelections();return Object.keys(A).forEach(a=>{const i=this.workflowManager.getWorkflow().steps.find(s=>s.stepName===a);if(!i)return;e.has(i.stepTitle)||e.set(i.stepTitle,{});const o=A[a];Object.keys(o).forEach(s=>{e.get(i.stepTitle)[s]=o[s]})}),(n=Object.keys(t))==null||n.forEach(a=>{const i=this.workflowManager.getWorkflow().steps.find(o=>o.stepName===a);i&&(e.has(i.stepTitle)||e.set(i.stepTitle,{}),e.get(i.stepTitle).selection=t[a].selections[0].name)}),e}}const cn=["altGlyph","circle","ellipse","path","polygon","polyline","rect","text","textPath","tref","tspan"],gn=async(g,e,A)=>{const t=e.data,n=A.data.baseUrl,a=t.assetUrl.replace("localhost","localstack"),i=n.slice(0,4)==="http"?"":"https://",o=new URL(i+n);o.searchParams.append("video",c.toBase64(JSON.stringify([{href:a}]))),o.pathname=o.pathname+(o.pathname.slice(-1)==="/"?"":"/");const s=o.toString(),l=`data:image/svg+xml;base64,${c.toBase64(await $e.toString(s,{type:"svg"}))}`,d=w=>{const E=g.find(h=>h.panelId===w.panelId);if(!E)throw new k(w);const m=c.generate();return new c.CreateElementCommand({id:m,src:l,type:c.LayoutElementType.Image,y:w.top,x:w.left,width:w.width,height:w.height,rotation:0},E)},B=A.data.regions;try{return B.map(d)}catch(w){return console.error(w),[]}},ln=async(g,e,A,t)=>{const n=A.data,a=n.assetUrl,i=await c.getPatternImageData(a);try{const o=c.getVariant(n,t.option);o&&(e[t.stepName]={selectedVariants:[o]});const s=async r=>{var m;const l=await c.generateFrameSVG(r||{width:1,height:1},(m=o==null?void 0:o.asset)==null?void 0:m.fileLink),d=await c.getFrameData(l),B=c.generate(),w=g.find(h=>h.panelId===r.panelId);if(!w)throw new k(r);const E=c.calculateOffsets(i,d,{scale:n.scale,left:n.x,top:n.y});return[new c.CreateElementCommand({id:B,path:d.path,dataWidth:d.width,dataHeight:d.height,type:c.LayoutElementType.Frame,focalBlur:t.data.focalBlur,focalBlurStrength:t.data.focalBlurStrength,focalBlurRadius:t.data.focalBlurRadius,forceImageCover:t.data.forceImageCover,x:r.left,y:r.top,width:r.width,height:r.height,layer:r.layer,layerIndex:r.layerIndex,rotation:r.rotation,scaleX:r.width/d.width,scaleY:r.height/d.height,pattern:void 0},w),new c.UpdateFramePattern(B,i,E)]};return(await Promise.all(t.data.regions.map(r=>s(r)))).flat()}catch(o){return console.error(o),[]}},Bn=async(g,e,A,t)=>{var F,p;const n=A.data,a=t.option;if(!a)return console.error(`No option for step ${t.stepName}.`),[];const i=((F=a.variants)==null?void 0:F.find(f=>f.id===n.illustrationVariantId))||c.getDefaultVariant(a);if(!i)return console.error(`No variant with ID: ${n.illustrationVariantId}`),[];if(!i.asset)return console.error(`No asset for variant with ID: ${n.illustrationVariantId}`),[];e[t.stepName]={selectedVariants:[i]};const o=(p=i.asset)==null?void 0:p.fileLink;if(!o)return console.error(`No asset link for variant with ID: ${n.illustrationVariantId}`),[];const s=await c.fetchAsString(o,!0),r=/<svg.*?<\/svg>/s,l=s.match(r)||[],d=(l==null?void 0:l.length)>0?l[0]:"",E=c.domParser().parseFromString(d,"image/svg+xml").firstElementChild;if(!E)return console.error("Failed to read SVG."),[];c.sanitizeSvgTree(E);const m={};c.traverse(E,f=>{cn.includes(f.tagName)&&!f.attributes.getNamedItem("fill")&&f.setAttribute("fill","#000000");const S=f.attributes.getNamedItem("fill");if(S&&S.value!=="none"){const Y=S.value,N=`spiff-fill-${Y.replace(/\W/g,"")}`;f.classList.add(N),m[N]={browserValue:Y}}const y=f.attributes.getNamedItem("stroke");if(y&&y.value!=="none"){const Y=y.value,N=`spiff-stroke-${Y.replace(/\W/g,"")}`;f.classList.add(N),m[N]={browserValue:Y}}});const u=c.xmlSerializer().serializeToString(E),C=n.colors;if(C){for(const[f,S]of Object.entries(m))for(const y of Object.keys(C))if(S.browserValue===y){m[f]={browserValue:C[y]};break}}const D=f=>{const S=g.find(Y=>Y.panelId===f.panelId);if(!S)throw new k(f);const y=c.generate();return new c.CreateElementCommand({colors:m,id:y,svg:u,type:c.LayoutElementType.Illustration,y:f.top,x:f.left,rotation:f.rotation,width:f.width,height:f.height,layer:f.layer,layerIndex:f.layerIndex,immutable:f.immutable},S)},I=t.data.regions;try{return I.map(D)}catch(f){return console.error(f),[]}},dn=async(g,e,A)=>{const t=await FA(A.data.module),n=e.data,a=(o,s)=>{const r=g.find(d=>d.panelId===s.panelId);if(!r)throw new k(s);const l=c.generate();return new c.CreateElementCommand({colors:{},id:l,svg:o,type:c.LayoutElementType.Illustration,y:s.top,x:s.left,rotation:s.rotation,width:s.width,height:s.height,layer:s.layer,layerIndex:s.layerIndex},r)},i=A.data.regions;try{return i.map(o=>a(t.svgPrint(n.text,o),o))}catch(o){return console.error(o),[]}},wn=async(g,e,A,t)=>{var l,d;const n=A.data,a=t.option;if(!a)return console.error(`No option for step ${t.stepName}.`),[];const i=((l=a.variants)==null?void 0:l.find(B=>B.id===n.pictureVariantId))||c.getDefaultVariant(a);if(!i)return console.error(`No variant with ID: ${n.pictureVariantId}`),[];if(!i.asset)return console.error(`No asset for variant with ID: ${n.pictureVariantId}`),[];e[t.stepName]={selectedVariants:[i]};const o=(d=i.asset)==null?void 0:d.fileLink;if(!o)return console.error(`No asset link for variant with ID: ${n.pictureVariantId}`),[];const s=B=>{const w=g.find(m=>m.panelId===B.panelId);if(!w)throw new k(B);const E=c.generate();return new c.CreateElementCommand({id:E,src:o,type:c.LayoutElementType.Image,y:B.top,x:B.left,rotation:B.rotation,width:B.width,height:B.height,layer:B.layer,layerIndex:B.layerIndex,immutable:B.immutable,preserveAspectRatio:"none"},w)},r=t.data.regions;try{return r.map(s)}catch(B){return console.error(B),[]}},En=async(g,e,A,t)=>{var r;const n=A.data,a=t.option;if(!a)return console.error(`No option for step ${t.stepName}.`),[];const i=((r=a.variants)==null?void 0:r.find(l=>l.id===n.colorVariantId))||c.getDefaultVariant(a);if(!i)return console.error(`No variant with ID: ${n.colorVariantId}`),[];e[t.stepName]={selectedVariants:[i]};const o=l=>{const d=g.find(h=>h.panelId===l.panelId);if(!d)throw new k(l);const B=`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlnsXlink="http://www.w3.org/1999/xlink"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spiffcommerce/core",
-    "version": "17.4.0",
+    "version": "17.5.0-alpha.0",
     "description": "Core client API for interacting with the Spiff Commerce backend.",
     "source": "src/index.ts",
     "main": "dist/index.umd.cjs",