@plattar/plattar-ar-adapter 1.154.2 → 1.155.2

package/dist/embed/controllers/plattar-controller.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlattarController = exports.ControllerState = void 0;
 const plattar_api_1 = require("@plattar/plattar-api");
+const configurator_state_1 = require("../../util/configurator-state");
 var ControllerState;
 (function (ControllerState) {
     ControllerState[ControllerState["None"] = 0] = "None";
@@ -28,25 +29,88 @@ class PlattarController {
         this._state = ControllerState.None;
         this._element = null;
         this._prevQROpt = null;
+        this._selectVariationObserver = null;
+        this._selectVariationSKUObserver = null;
         this._parent = parent;
     }
     /**
-     * Initialise and start AR mode if available
+     * Generates a brand new Configurator State from the provided SceneID or inputted Configurator State
      */
-    startAR() {
-        return new Promise((accept, reject) => {
-            this.initAR().then((launcher) => {
-                launcher.start();
-                accept();
-            }).catch(reject);
+    async createConfiguratorState() {
+        // get our Scene ID
+        const sceneID = this.getAttribute("scene-id");
+        if (!sceneID) {
+            throw new Error("PlattarController.createConfiguratorState() - cannot create as required attribute scene-id is not defined");
+        }
+        const configState = this.getAttribute("config-state");
+        // get a list of variation ID's to use for initialising
+        const variationIDs = this.getAttribute("variation-id");
+        // get a list of variation SKU's to use for initialising
+        const variationSKUs = this.getAttribute("variation-sku");
+        // generate the decoded configurator state
+        const decodedState = configState ? await configurator_state_1.ConfiguratorState.decodeState(sceneID, configState) : await configurator_state_1.ConfiguratorState.decodeScene(sceneID);
+        // change the ID's and SKU's (if any) of the default configuration state
+        const variationIDList = variationIDs ? variationIDs.split(",") : [];
+        const variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
+        variationIDList.forEach((variationID) => {
+            decodedState.state.setVariationID(variationID);
+        });
+        variationSKUList.forEach((variationSKU) => {
+            decodedState.state.setVariationSKU(variationSKU);
+        });
+        // return fully modified configuration state
+        return decodedState;
+    }
+    /**
+     * Setup messenger observers to detect variation changes and apply to the internal
+     * configuration state
+     */
+    setupMessengerObservers(viewer, configState) {
+        this._selectVariationObserver = viewer.messengerInstance.observer.subscribe("selectVariation", (cd) => {
+            if (cd.type === "call") {
+                const args = cd.data[0];
+                const variations = args ? (Array.isArray(args) ? args : [args]) : [];
+                variations.forEach((variationID) => {
+                    configState.state.setVariationID(variationID);
+                });
+            }
+        });
+        this._selectVariationSKUObserver = viewer.messengerInstance.observer.subscribe("selectVariationSKU", (cd) => {
+            if (cd.type === "call") {
+                const args = cd.data[0];
+                const variations = args ? (Array.isArray(args) ? args : [args]) : [];
+                variations.forEach((variationSKU) => {
+                    configState.state.setVariationSKU(variationSKU);
+                });
+            }
         });
     }
+    /**
+     * Remove all pre-existing observers
+     */
+    removeMessengerObservers() {
+        if (this._selectVariationObserver) {
+            this._selectVariationObserver();
+            this._selectVariationObserver = null;
+        }
+        if (this._selectVariationSKUObserver) {
+            this._selectVariationSKUObserver();
+            this._selectVariationSKUObserver = null;
+        }
+    }
+    /**
+     * Initialise and start AR mode if available
+     */
+    async startAR() {
+        const launcher = await this.initAR();
+        return launcher.start();
+    }
     /**
      * Decide which QR Code to render according to the qr-type attribute
      * @param options
      * @returns
      */
-    startQRCode(options) {
+    async startQRCode(options) {
         const qrType = this.getAttribute("qr-type") || "viewer";
         switch (qrType.toLowerCase()) {
             case "ar":
@@ -61,69 +125,76 @@ class PlattarController {
      * @param options
      * @returns
      */
-    startARQRCode(options) {
+    async startARQRCode(options) {
+        // remove the old renderer instance if any
+        this.removeRenderer();
+        const opt = options || this._GetDefaultQROptions();
+        const viewer = document.createElement("plattar-qrcode");
+        this._element = viewer;
+        // required attributes with defaults for plattar-viewer node
+        const width = this.getAttribute("width") || "500px";
+        const height = this.getAttribute("height") || "500px";
+        viewer.setAttribute("width", width);
+        viewer.setAttribute("height", height);
+        if (opt.color) {
+            viewer.setAttribute("color", opt.color);
+        }
+        if (opt.margin) {
+            viewer.setAttribute("margin", "" + opt.margin);
+        }
+        if (opt.qrType) {
+            viewer.setAttribute("qr-type", opt.qrType);
+        }
+        viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
+        const qrOptions = btoa(JSON.stringify(opt));
+        let dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
+        let configState = null;
+        const sceneID = this.getAttribute("scene-id");
+        const embedType = this.getAttribute("embed-type");
+        const productID = this.getAttribute("product-id");
+        const sceneProductID = this.getAttribute("scene-product-id");
+        const variationID = this.getAttribute("variation-id");
+        const variationSKU = this.getAttribute("variation-sku");
+        const arMode = this.getAttribute("ar-mode");
+        try {
+            configState = (await this.getConfiguratorState()).state.encode();
+        }
+        catch (_err) {
+            // config state not available for some reason
+            configState = null;
+        }
+        if (configState) {
+            dst += "&config_state=" + configState;
+        }
+        if (embedType) {
+            dst += "&embed_type=" + embedType;
+        }
+        if (productID) {
+            dst += "&product_id=" + productID;
+        }
+        if (sceneProductID) {
+            dst += "&scene_product_id=" + sceneProductID;
+        }
+        if (variationID) {
+            dst += "&variation_id=" + variationID;
+        }
+        if (variationSKU) {
+            dst += "&variation_sku=" + variationSKU;
+        }
+        if (arMode) {
+            dst += "&ar_mode=" + arMode;
+        }
+        if (sceneID) {
+            dst += "&scene_id=" + sceneID;
+        }
+        viewer.setAttribute("url", opt.url || dst);
+        this._state = ControllerState.QRCode;
+        this._prevQROpt = opt;
         return new Promise((accept, reject) => {
-            // remove the old renderer instance if any
-            this.removeRenderer();
-            const opt = options || this._GetDefaultQROptions();
-            const viewer = document.createElement("plattar-qrcode");
-            // required attributes with defaults for plattar-viewer node
-            const width = this.getAttribute("width") || "500px";
-            const height = this.getAttribute("height") || "500px";
-            viewer.setAttribute("width", width);
-            viewer.setAttribute("height", height);
-            if (opt.color) {
-                viewer.setAttribute("color", opt.color);
-            }
-            if (opt.margin) {
-                viewer.setAttribute("margin", "" + opt.margin);
-            }
-            if (opt.qrType) {
-                viewer.setAttribute("qr-type", opt.qrType);
-            }
-            viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
-            const qrOptions = btoa(JSON.stringify(opt));
-            let dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
-            const sceneID = this.getAttribute("scene-id");
-            const configState = this.getAttribute("config-state");
-            const embedType = this.getAttribute("embed-type");
-            const productID = this.getAttribute("product-id");
-            const sceneProductID = this.getAttribute("scene-product-id");
-            const variationID = this.getAttribute("variation-id");
-            const variationSKU = this.getAttribute("variation-sku");
-            const arMode = this.getAttribute("ar-mode");
-            if (configState) {
-                dst += "&config_state=" + configState;
-            }
-            if (embedType) {
-                dst += "&embed_type=" + embedType;
-            }
-            if (productID) {
-                dst += "&product_id=" + productID;
-            }
-            if (sceneProductID) {
-                dst += "&scene_product_id=" + sceneProductID;
-            }
-            if (variationID) {
-                dst += "&variation_id=" + variationID;
-            }
-            if (variationSKU) {
-                dst += "&variation_sku=" + variationSKU;
-            }
-            if (arMode) {
-                dst += "&ar_mode=" + arMode;
-            }
-            if (sceneID) {
-                dst += "&scene_id=" + sceneID;
-            }
-            viewer.setAttribute("url", opt.url || dst);
+            this.append(viewer);
             viewer.onload = () => {
                 return accept(viewer);
             };
-            this._element = viewer;
-            this._state = ControllerState.QRCode;
-            this._prevQROpt = opt;
-            this.append(viewer);
         });
     }
     /**

package/dist/embed/controllers/product-controller.d.ts

@@ -1,12 +1,23 @@
 import { LauncherAR } from "../../ar/launcher-ar";
 import { PlattarController } from "./plattar-controller";
+import { DecodedConfiguratorState } from "../../util/configurator-state";
 /**
  * Manages an instance of the <plattar-product> HTML Element
+ *
+ * NOTE: As of 14th June 2023, this is now a legacy Controller and only used in legacy embeds
+ * and should be deprecated from both documentation and previous integrations
  */
 export declare class ProductController extends PlattarController {
+    getConfiguratorState(): Promise<DecodedConfiguratorState>;
     constructor(parent: HTMLElement);
-    onAttributesUpdated(): void;
+    onAttributesUpdated(attributeName: string): Promise<void>;
     startViewerQRCode(options: any): Promise<HTMLElement>;
+    /**
+     * Displays a QR Code that sends the user direct to AR
+     * @param options
+     * @returns
+     */
+    startARQRCode(options: any): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;
     removeRenderer(): boolean;

package/dist/embed/controllers/product-controller.js

@@ -7,12 +7,20 @@ const util_1 = require("../../util/util");
 const plattar_controller_1 = require("./plattar-controller");
 /**
  * Manages an instance of the <plattar-product> HTML Element
+ *
+ * NOTE: As of 14th June 2023, this is now a legacy Controller and only used in legacy embeds
+ * and should be deprecated from both documentation and previous integrations
  */
 class ProductController extends plattar_controller_1.PlattarController {
+    async getConfiguratorState() {
+        throw new Error("ProductController.getConfiguratorState() - legacy embeds do not support configurator states");
+    }
     constructor(parent) {
+        // this is a hack against DecodedConfiguratorState that's now stored in PlattarController
+        // this is not used in legacy mode
         super(parent);
     }
-    onAttributesUpdated() {
+    async onAttributesUpdated(attributeName) {
         const state = this._state;
         // re-render the QR Code when attributes have changed
         if (state === plattar_controller_1.ControllerState.QRCode) {
@@ -28,7 +36,6 @@ class ProductController extends plattar_controller_1.PlattarController {
                     viewer.messenger.selectVariation(variationID);
                 }
             }
-            return;
         }
     }
     startViewerQRCode(options) {
@@ -81,6 +88,76 @@ class ProductController extends plattar_controller_1.PlattarController {
             return reject(new Error("ProductController.startQRCode() - minimum required attributes not set, use product-id as a minimum"));
         });
     }
+    /**
+     * Displays a QR Code that sends the user direct to AR
+     * @param options
+     * @returns
+     */
+    startARQRCode(options) {
+        return new Promise((accept, reject) => {
+            // remove the old renderer instance if any
+            this.removeRenderer();
+            const opt = options || this._GetDefaultQROptions();
+            const viewer = document.createElement("plattar-qrcode");
+            // required attributes with defaults for plattar-viewer node
+            const width = this.getAttribute("width") || "500px";
+            const height = this.getAttribute("height") || "500px";
+            viewer.setAttribute("width", width);
+            viewer.setAttribute("height", height);
+            if (opt.color) {
+                viewer.setAttribute("color", opt.color);
+            }
+            if (opt.margin) {
+                viewer.setAttribute("margin", "" + opt.margin);
+            }
+            if (opt.qrType) {
+                viewer.setAttribute("qr-type", opt.qrType);
+            }
+            viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
+            const qrOptions = btoa(JSON.stringify(opt));
+            let dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
+            const sceneID = this.getAttribute("scene-id");
+            const configState = this.getAttribute("config-state");
+            const embedType = this.getAttribute("embed-type");
+            const productID = this.getAttribute("product-id");
+            const sceneProductID = this.getAttribute("scene-product-id");
+            const variationID = this.getAttribute("variation-id");
+            const variationSKU = this.getAttribute("variation-sku");
+            const arMode = this.getAttribute("ar-mode");
+            if (configState) {
+                dst += "&config_state=" + configState;
+            }
+            if (embedType) {
+                dst += "&embed_type=" + embedType;
+            }
+            if (productID) {
+                dst += "&product_id=" + productID;
+            }
+            if (sceneProductID) {
+                dst += "&scene_product_id=" + sceneProductID;
+            }
+            if (variationID) {
+                dst += "&variation_id=" + variationID;
+            }
+            if (variationSKU) {
+                dst += "&variation_sku=" + variationSKU;
+            }
+            if (arMode) {
+                dst += "&ar_mode=" + arMode;
+            }
+            if (sceneID) {
+                dst += "&scene_id=" + sceneID;
+            }
+            viewer.setAttribute("url", opt.url || dst);
+            viewer.onload = () => {
+                return accept(viewer);
+            };
+            this._element = viewer;
+            this._state = plattar_controller_1.ControllerState.QRCode;
+            this._prevQROpt = opt;
+            this.append(viewer);
+        });
+    }
     startRenderer() {
         return new Promise((accept, reject) => {
             // remove the old renderer instance if any

package/dist/embed/controllers/vto-controller.d.ts

@@ -1,11 +1,13 @@
 import { LauncherAR } from "../../ar/launcher-ar";
+import { DecodedConfiguratorState } from "../../util/configurator-state";
 import { PlattarController } from "./plattar-controller";
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
 export declare class VTOController extends PlattarController {
-    constructor(parent: HTMLElement);
-    onAttributesUpdated(): void;
+    private _cachedConfigState;
+    getConfiguratorState(): Promise<DecodedConfiguratorState>;
+    onAttributesUpdated(attributeName: string): Promise<void>;
     startViewerQRCode(options: any): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;