@plattar/plattar-ar-adapter 1.158.2 → 1.163.1

package/build/es2019/plattar-ar-adapter.js

@@ -10,7 +10,6 @@ const plattar_api_1 = require("@plattar/plattar-api");
 const plattar_services_1 = require("@plattar/plattar-services");
 const util_1 = require("../util/util");
 const quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
-const reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
 const scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
 const launcher_ar_1 = require("./launcher-ar");
 const version_1 = __importDefault(require("../version"));
@@ -18,18 +17,18 @@ const version_1 = __importDefault(require("../version"));
  * Performs AR functionality related to Plattar Scenes
  */
 class ConfiguratorAR extends launcher_ar_1.LauncherAR {
-    constructor(state) {
+    constructor(options) {
         super();
         // analytics instance
         this._analytics = null;
-        if (!state) {
+        if (!options.state) {
             throw new Error("ConfiguratorAR.constructor(state) - state must be defined");
         }
-        this._state = state;
+        this._options = options;
         this._ar = null;
     }
     _SetupAnalytics() {
-        const scene = this._state.scene;
+        const scene = this._options.state.scene;
         let analytics = null;
         // setup scene stuff (if any)
         if (scene) {
@@ -45,6 +44,13 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
             if (application) {
                 analytics.data.push("applicationId", application.id);
                 analytics.data.push("applicationTitle", application.attributes.title);
+                if (this._options.useARBanner) {
+                    this.options.banner = {
+                        title: application.attributes.title,
+                        subtitle: scene.attributes.title,
+                        button: 'Visit'
+                    };
+                }
             }
         }
     }
@@ -53,7 +59,7 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
      * an AR File
      */
     async _Compose(output) {
-        const objects = this._state.state.array();
+        const objects = this._options.state.state.array();
         if (objects.length <= 0) {
             throw new Error("ConfiguratorAR.Compose() - cannot proceed as scene does not contain AR components");
         }
@@ -90,7 +96,7 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
         if (!util_1.Util.canAugment()) {
             throw new Error("ConfiguratorAR.init() - cannot proceed as AR not available in context");
         }
-        const scene = this._state.scene;
+        const scene = this._options.state.scene;
         this._SetupAnalytics();
         const sceneOpt = scene.attributes.custom_json || {};
         // we need to define our AR module here
@@ -101,8 +107,9 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
             if (sceneOpt.anchor === "face") {
                 if (util_1.Util.canRealityViewer()) {
                     const modelUrl = await this._Compose("vto");
-                    this._ar = new reality_viewer_1.default();
+                    this._ar = new quicklook_viewer_1.default();
                     this._ar.modelUrl = modelUrl;
+                    this._ar.banner = this.options.banner;
                     return this;
                 }
                 else {
@@ -114,6 +121,7 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
                 const modelUrl = await this._Compose("usdz");
                 this._ar = new quicklook_viewer_1.default();
                 this._ar.modelUrl = modelUrl;
+                this._ar.banner = this.options.banner;
                 return this;
             }
             throw new Error("ConfiguratorAR.init() - cannot proceed as IOS device does not support AR Mode");
@@ -124,6 +132,7 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
             const arviewer = new scene_viewer_1.default();
             arviewer.modelUrl = modelUrl;
             arviewer.isVertical = this.options.anchor === "vertical" ? true : false;
+            arviewer.banner = this.options.banner;
             if (sceneOpt.anchor === "vertical") {
                 arviewer.isVertical = true;
             }
@@ -161,14 +170,15 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
 }
 exports.ConfiguratorAR = ConfiguratorAR;
 
-},{"../util/util":15,"../version":16,"../viewers/quicklook-viewer":18,"../viewers/reality-viewer":19,"../viewers/scene-viewer":20,"./launcher-ar":2,"@plattar/plattar-analytics":40,"@plattar/plattar-api":44,"@plattar/plattar-services":115}],2:[function(require,module,exports){
+},{"../util/util":15,"../version":16,"../viewers/quicklook-viewer":18,"../viewers/scene-viewer":20,"./launcher-ar":2,"@plattar/plattar-analytics":40,"@plattar/plattar-api":44,"@plattar/plattar-services":115}],2:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LauncherAR = void 0;
 class LauncherAR {
     constructor() {
         this._opt = {
-            anchor: "horizontal_vertical"
+            anchor: "horizontal_vertical",
+            banner: null
         };
     }
     /**
@@ -207,18 +217,18 @@ const version_1 = __importDefault(require("../version"));
  * Performs AT Functionality using Plattar FileModel types
  */
 class ModelAR extends launcher_ar_1.LauncherAR {
-    constructor(modelID = null) {
+    constructor(options) {
         super();
         // analytics instance
         this._analytics = null;
-        if (!modelID) {
+        if (!options.modelID) {
             throw new Error("ModelAR.constructor(modelID) - modelID must be defined");
         }
-        this._modelID = modelID;
+        this._options = options;
         this._ar = null;
     }
     get modelID() {
-        return this._modelID;
+        return this._options.modelID;
     }
     _SetupAnalytics(model) {
         let analytics = null;
@@ -234,6 +244,13 @@ class ModelAR extends launcher_ar_1.LauncherAR {
             analytics.data.push("modelId", model.id);
             analytics.data.push("modelTitle", model.attributes.title);
             this._analytics = analytics;
+            if (this._options.useARBanner) {
+                this.options.banner = {
+                    title: project.attributes.title,
+                    subtitle: model.attributes.title,
+                    button: 'Visit'
+                };
+            }
         }
     }
     /**
@@ -261,12 +278,14 @@ class ModelAR extends launcher_ar_1.LauncherAR {
                     if (model.attributes.reality_filename && util_1.Util.canRealityViewer()) {
                         this._ar = new reality_viewer_1.default();
                         this._ar.modelUrl = plattar_api_1.Server.location().cdn + model.attributes.path + model.attributes.reality_filename;
+                        this._ar.banner = this.options.banner;
                         return accept(this);
                     }
                     // otherwise, load the USDZ stuff second if available
                     if (model.attributes.usdz_filename && util_1.Util.canQuicklook()) {
                         this._ar = new quicklook_viewer_1.default();
                         this._ar.modelUrl = plattar_api_1.Server.location().cdn + model.attributes.path + model.attributes.usdz_filename;
+                        this._ar.banner = this.options.banner;
                         return accept(this);
                     }
                     return reject(new Error("ModelAR.init() - cannot proceed as ModelFile does not have a defined .usdz or .reality file"));
@@ -276,6 +295,7 @@ class ModelAR extends launcher_ar_1.LauncherAR {
                     const arviewer = new scene_viewer_1.default();
                     arviewer.modelUrl = plattar_api_1.Server.location().cdn + model.attributes.path + model.attributes.original_filename;
                     arviewer.isVertical = this.options.anchor === "vertical" ? true : false;
+                    arviewer.banner = this.options.banner;
                     this._ar = arviewer;
                     return accept(this);
                 }
@@ -334,26 +354,38 @@ const version_1 = __importDefault(require("../version"));
  * Performs AR functionality related to Plattar Products and Variation types
  */
 class ProductAR extends launcher_ar_1.LauncherAR {
-    constructor(productID = null, variationID = null, variationSKU = null) {
+    /*
+    constructor(productID: string | undefined | null = null, variationID: string | undefined | null = null, variationSKU: string | undefined | null = null) {
         super();
-        // analytics instance
-        this._analytics = null;
+
         if (!productID) {
             throw new Error("ProductAR.constructor(productID, variationID) - productID must be defined");
         }
+
         this._productID = productID;
         this._variationSKU = variationSKU;
         this._variationID = variationID ? variationID : (variationSKU ? null : "default");
         this._ar = null;
     }
+    */
+    constructor(options) {
+        super();
+        // analytics instance
+        this._analytics = null;
+        if (!options.productID) {
+            throw new Error("ProductAR.constructor(productID, variationID) - productID must be defined");
+        }
+        this._options = options;
+        this._ar = null;
+    }
     get productID() {
-        return this._productID;
+        return this._options.productID;
     }
     get variationID() {
-        return this._variationID;
+        return this._options.variationID;
     }
     get variationSKU() {
-        return this._variationSKU;
+        return this._options.variationSKU;
     }
     _SetupAnalytics(product, variation) {
         let analytics = null;
@@ -372,6 +404,13 @@ class ProductAR extends launcher_ar_1.LauncherAR {
             if (application) {
                 analytics.data.push("applicationId", application.id);
                 analytics.data.push("applicationTitle", application.attributes.title);
+                if (this._options.useARBanner) {
+                    this.options.banner = {
+                        title: product.attributes.title,
+                        subtitle: variation.attributes.title,
+                        button: 'Visit'
+                    };
+                }
             }
         }
         if (analytics) {
@@ -447,12 +486,14 @@ class ProductAR extends launcher_ar_1.LauncherAR {
                     if (model.attributes.reality_filename && util_1.Util.canRealityViewer()) {
                         this._ar = new reality_viewer_1.default();
                         this._ar.modelUrl = plattar_api_1.Server.location().cdn + model.attributes.path + model.attributes.reality_filename;
+                        this._ar.banner = this.options.banner;
                         return accept(this);
                     }
                     // otherwise, load the USDZ stuff second if available
                     if (model.attributes.usdz_filename && util_1.Util.canQuicklook()) {
                         this._ar = new quicklook_viewer_1.default();
                         this._ar.modelUrl = plattar_api_1.Server.location().cdn + model.attributes.path + model.attributes.usdz_filename;
+                        this._ar.banner = this.options.banner;
                         return accept(this);
                     }
                     return reject(new Error("ProductAR.init() - cannot proceed as ModelFile does not have a defined .usdz or .reality file"));
@@ -462,6 +503,7 @@ class ProductAR extends launcher_ar_1.LauncherAR {
                     const arviewer = new scene_viewer_1.default();
                     arviewer.modelUrl = plattar_api_1.Server.location().cdn + model.attributes.path + model.attributes.original_filename;
                     arviewer.isVertical = this.options.anchor === "vertical" ? true : false;
+                    arviewer.banner = this.options.banner;
                     const scene = product.relationships.find(plattar_api_1.Scene);
                     if (scene) {
                         const sceneOpt = scene.attributes.custom_json || {};
@@ -527,17 +569,16 @@ const version_1 = __importDefault(require("../version"));
  * Allows launching AR Experiences provided a single remote 3D Model file
  */
 class RawAR extends launcher_ar_1.LauncherAR {
-    constructor(modelLocation = null, sceneID = null) {
+    constructor(options) {
         super();
         // analytics instance
         this._analytics = null;
-        if (!modelLocation) {
+        if (!options.modelLocation) {
             throw new Error("RawAR.constructor(modelLocation) - modelLocation must be defined");
         }
-        const lowerLoc = modelLocation.toLowerCase();
+        const lowerLoc = options.modelLocation.toLowerCase();
         if (lowerLoc.endsWith("usdz") || lowerLoc.endsWith("glb") || lowerLoc.endsWith("gltf") || lowerLoc.endsWith("reality")) {
-            this._modelLocation = modelLocation;
-            this._sceneID = sceneID;
+            this._options = options;
             this._ar = null;
         }
         else {
@@ -545,11 +586,11 @@ class RawAR extends launcher_ar_1.LauncherAR {
         }
     }
     get modelLocation() {
-        return this._modelLocation;
+        return this._options.modelLocation;
     }
     _SetupAnalytics() {
         return new Promise((accept, _reject) => {
-            const sceneID = this._sceneID;
+            const sceneID = this._options.sceneID;
             if (!sceneID) {
                 return accept();
             }
@@ -568,6 +609,13 @@ class RawAR extends launcher_ar_1.LauncherAR {
                 if (application) {
                     analytics.data.push("applicationId", application.id);
                     analytics.data.push("applicationTitle", application.attributes.title);
+                    if (this._options.useARBanner) {
+                        this.options.banner = {
+                            title: application.attributes.title,
+                            subtitle: scene.attributes.title,
+                            button: 'Visit'
+                        };
+                    }
                 }
                 accept();
             }).catch((_err) => {
@@ -589,7 +637,7 @@ class RawAR extends launcher_ar_1.LauncherAR {
             }
             // send the analytics (if any)
             this._SetupAnalytics().then(() => {
-                const modelLocation = this._modelLocation;
+                const modelLocation = this._options.modelLocation;
                 const lowerLoc = modelLocation.toLowerCase();
                 // we need to define our AR module here
                 // we are in Safari/Quicklook mode here
@@ -598,6 +646,7 @@ class RawAR extends launcher_ar_1.LauncherAR {
                     if (lowerLoc.endsWith("reality") && util_1.Util.canRealityViewer()) {
                         this._ar = new reality_viewer_1.default();
                         this._ar.modelUrl = modelLocation;
+                        this._ar.banner = this.options.banner;
                         return accept(this);
                     }
                     // load the usdz experience if dealing with usdz file
@@ -614,6 +663,7 @@ class RawAR extends launcher_ar_1.LauncherAR {
                         const arviewer = new scene_viewer_1.default();
                         arviewer.modelUrl = modelLocation;
                         arviewer.isVertical = this.options.anchor === "vertical" ? true : false;
+                        arviewer.banner = this.options.banner;
                         this._ar = arviewer;
                         return accept(this);
                     }
@@ -667,7 +717,6 @@ const plattar_api_1 = require("@plattar/plattar-api");
 const plattar_services_1 = require("@plattar/plattar-services");
 const util_1 = require("../util/util");
 const quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
-const reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
 const scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
 const launcher_ar_1 = require("./launcher-ar");
 const version_1 = __importDefault(require("../version"));
@@ -675,19 +724,18 @@ const version_1 = __importDefault(require("../version"));
  * Performs AR functionality related to Plattar Scenes
  */
 class SceneAR extends launcher_ar_1.LauncherAR {
-    constructor(sceneID = null, variationSelection = null) {
+    constructor(options) {
         super();
         // analytics instance
         this._analytics = null;
-        if (!sceneID) {
+        if (!options.sceneID) {
             throw new Error("SceneAR.constructor(sceneID) - sceneID must be defined");
         }
-        this._sceneID = sceneID;
-        this._variationSelection = variationSelection || {};
+        this._options = options;
         this._ar = null;
     }
     get sceneID() {
-        return this._sceneID;
+        return this._options.sceneID;
     }
     _SetupAnalytics(scene) {
         let analytics = null;
@@ -705,6 +753,13 @@ class SceneAR extends launcher_ar_1.LauncherAR {
             if (application) {
                 analytics.data.push("applicationId", application.id);
                 analytics.data.push("applicationTitle", application.attributes.title);
+                if (this._options.useARBanner) {
+                    this.options.banner = {
+                        title: application.attributes.title,
+                        subtitle: scene.attributes.title,
+                        button: 'Visit'
+                    };
+                }
             }
         }
     }
@@ -728,7 +783,7 @@ class SceneAR extends launcher_ar_1.LauncherAR {
             // add our scene products
             sceneProducts.forEach((sceneProduct) => {
                 const product = sceneProduct.relationships.find(plattar_api_1.Product);
-                const selection = this._variationSelection;
+                const selection = this._options.variationSelection;
                 // we have a specific product selection
                 if (sceneProduct.attributes.include_in_augment) {
                     // check if this product is the one we want (from selection optionally)
@@ -793,8 +848,9 @@ class SceneAR extends launcher_ar_1.LauncherAR {
                     if (sceneOpt.anchor === "face") {
                         if (util_1.Util.canRealityViewer()) {
                             return this._ComposeScene(scene, "vto").then((modelUrl) => {
-                                this._ar = new reality_viewer_1.default();
+                                this._ar = new quicklook_viewer_1.default();
                                 this._ar.modelUrl = modelUrl;
+                                this._ar.banner = this.options.banner;
                                 return accept(this);
                             }).catch(reject);
                         }
@@ -807,6 +863,7 @@ class SceneAR extends launcher_ar_1.LauncherAR {
                         return this._ComposeScene(scene, "usdz").then((modelUrl) => {
                             this._ar = new quicklook_viewer_1.default();
                             this._ar.modelUrl = modelUrl;
+                            this._ar.banner = this.options.banner;
                             return accept(this);
                         }).catch(reject);
                     }
@@ -818,6 +875,7 @@ class SceneAR extends launcher_ar_1.LauncherAR {
                         const arviewer = new scene_viewer_1.default();
                         arviewer.modelUrl = modelUrl;
                         arviewer.isVertical = this.options.anchor === "vertical" ? true : false;
+                        arviewer.banner = this.options.banner;
                         if (sceneOpt.anchor === "vertical") {
                             arviewer.isVertical = true;
                         }
@@ -858,7 +916,7 @@ class SceneAR extends launcher_ar_1.LauncherAR {
 }
 exports.SceneAR = SceneAR;
 
-},{"../util/util":15,"../version":16,"../viewers/quicklook-viewer":18,"../viewers/reality-viewer":19,"../viewers/scene-viewer":20,"./launcher-ar":2,"@plattar/plattar-analytics":40,"@plattar/plattar-api":44,"@plattar/plattar-services":115}],7:[function(require,module,exports){
+},{"../util/util":15,"../version":16,"../viewers/quicklook-viewer":18,"../viewers/scene-viewer":20,"./launcher-ar":2,"@plattar/plattar-analytics":40,"@plattar/plattar-api":44,"@plattar/plattar-services":115}],7:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SceneProductAR = void 0;
@@ -870,14 +928,15 @@ const util_1 = require("../util/util");
  * SceneProducts are much more convenient to grab from the Plattar CMS
  */
 class SceneProductAR extends product_ar_1.ProductAR {
-    constructor(sceneProductID = null, variationID = null, variationSKU = null) {
-        super(sceneProductID, variationID, variationSKU);
+    constructor(options) {
+        //super(sceneProductID, variationID, variationSKU);
+        super(options);
         // this is evaluated in the init() function
         this._attachedProductID = null;
-        if (!sceneProductID) {
+        if (!options.productID) {
             throw new Error("SceneProductAR.constructor(sceneProductID, variationID) - sceneProductID must be defined");
         }
-        this._sceneProductID = sceneProductID;
+        this._sceneProductID = options.productID;
     }
     get sceneProductID() {
         return this._sceneProductID;
@@ -986,6 +1045,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
                 this.parent.lockObserver();
                 this.parent.destroy();
                 this.setAttribute("product-id", product.scene_product_id);
+                this.removeAttribute("scene-id");
                 this.parent.unlockObserver();
                 const controller = this.parent.create();
                 if (controller) {
@@ -1016,6 +1076,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
                 this.parent.lockObserver();
                 this.parent.destroy();
                 this.setAttribute("product-id", product.scene_product_id);
+                this.removeAttribute("scene-id");
                 this.parent.unlockObserver();
                 const controller = this.parent.create();
                 if (controller) {
@@ -1050,6 +1111,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         let dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + sceneID;
         const showAR = this.getAttribute("show-ar");
         const showUI = this.getAttribute("show-ui");
+        const showBanner = this.getAttribute("show-ar-banner");
         if (showUI && showUI === "true") {
             dst = plattar_api_1.Server.location().base + "configurator/dist/index.html?scene_id=" + sceneID;
         }
@@ -1059,6 +1121,9 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         if (showAR) {
             dst += "&show_ar=" + showAR;
         }
+        if (showBanner) {
+            dst += "&show_ar_banner=" + showBanner;
+        }
         viewer.setAttribute("url", opt.url || dst);
         this._state = plattar_controller_1.ControllerState.QRCode;
         this._prevQROpt = opt;
@@ -1087,6 +1152,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
                 this.parent.lockObserver();
                 this.parent.destroy();
                 this.setAttribute("product-id", product.scene_product_id);
+                this.removeAttribute("scene-id");
                 this.parent.unlockObserver();
                 const controller = this.parent.create();
                 if (controller) {
@@ -1143,6 +1209,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
                 this.parent.lockObserver();
                 this.parent.destroy();
                 this.setAttribute("product-id", product.scene_product_id);
+                this.removeAttribute("scene-id");
                 this.parent.unlockObserver();
                 const controller = this.parent.create();
                 if (controller) {
@@ -1174,7 +1241,13 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         const state = (await this.getConfiguratorState()).state;
         const first = state.first();
         if (first) {
-            const sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
+            //const sceneProductAR: SceneProductAR = new SceneProductAR(first.scene_product_id, first.product_variation_id);
+            const sceneProductAR = new scene_product_ar_1.SceneProductAR({
+                productID: first.scene_product_id,
+                variationID: first.product_variation_id,
+                variationSKU: null,
+                useARBanner: this.getBooleanAttribute("show-ar-banner")
+            });
             return sceneProductAR.init();
         }
         throw new Error("ConfiguratorController.initAR() - invalid decoded config-state does not have any product states");
@@ -1187,7 +1260,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         if (!sceneID) {
             throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
         }
-        const configAR = new configurator_ar_1.ConfiguratorAR(await this.getConfiguratorState());
+        const configAR = new configurator_ar_1.ConfiguratorAR({ state: await this.getConfiguratorState(), useARBanner: this.getBooleanAttribute("show-ar-banner") });
         return configAR.init();
     }
     removeRenderer() {
@@ -1364,6 +1437,7 @@ class PlattarController {
         const variationID = this.getAttribute("variation-id");
         const variationSKU = this.getAttribute("variation-sku");
         const arMode = this.getAttribute("ar-mode");
+        const showBanner = this.getAttribute("show-ar-banner");
         try {
             configState = (await this.getConfiguratorState()).state.encode();
         }
@@ -1395,6 +1469,9 @@ class PlattarController {
         if (sceneID) {
             dst += "&scene_id=" + sceneID;
         }
+        if (showBanner) {
+            dst += "&show_ar_banner=" + showBanner;
+        }
         viewer.setAttribute("url", opt.url || dst);
         this._state = ControllerState.QRCode;
         this._prevQROpt = opt;
@@ -1419,6 +1496,14 @@ class PlattarController {
     getAttribute(attribute) {
         return this.parent ? (this.parent.hasAttribute(attribute) ? this.parent.getAttribute(attribute) : null) : null;
     }
+    /**
+     * Returns the specified attribute from the parent as a boolean
+     * @param attribute - The name of the attribute
+     * @returns - The attribute value
+     */
+    getBooleanAttribute(attribute) {
+        return this.parent ? (this.parent.hasAttribute(attribute) ? (this.parent.getAttribute(attribute)?.toLowerCase() === "true" ? true : false) : false) : false;
+    }
     /**
      * Sets a particular attribute into the HTML DOM
      *
@@ -1430,6 +1515,16 @@ class PlattarController {
             this.parent.setAttribute(attribute, value);
         }
     }
+    /**
+     * Removes a particular attribute from HTML DOM
+     *
+     * @param attribute - The name of the attribute
+     */
+    removeAttribute(attribute) {
+        if (this.parent) {
+            this.parent.removeAttribute(attribute);
+        }
+    }
     /**
      * Appends the provided element into the shadow-root of the parent element
      * @param element - The element to append
@@ -1563,6 +1658,7 @@ class ProductController extends plattar_controller_1.PlattarController {
             const variationID = this.getAttribute("variation-id");
             const variationSKU = this.getAttribute("variation-sku");
             const arMode = this.getAttribute("ar-mode");
+            const showBanner = this.getAttribute("show-ar-banner");
             if (configState) {
                 dst += "&config_state=" + configState;
             }
@@ -1587,6 +1683,9 @@ class ProductController extends plattar_controller_1.PlattarController {
             if (sceneID) {
                 dst += "&scene_id=" + sceneID;
             }
+            if (showBanner) {
+                dst += "&show_ar_banner=" + showBanner;
+            }
             viewer.setAttribute("url", opt.url || dst);
             viewer.onload = () => {
                 return accept(viewer);
@@ -1645,7 +1744,13 @@ class ProductController extends plattar_controller_1.PlattarController {
             if (productID) {
                 const variationID = this.getAttribute("variation-id");
                 const variationSKU = this.getAttribute("variation-sku");
-                const product = new product_ar_1.ProductAR(productID, variationID, variationSKU);
+                //const product: ProductAR = new ProductAR(productID, variationID, variationSKU);
+                const product = new product_ar_1.ProductAR({
+                    productID: productID,
+                    variationID: variationID ? variationID : (variationSKU ? null : "default"),
+                    variationSKU: variationSKU,
+                    useARBanner: this.getBooleanAttribute("show-ar-banner")
+                });
                 return product.init().then(accept).catch(reject);
             }
             return reject(new Error("ProductController.initAR() - minimum required attributes not set, use product-id as a minimum"));
@@ -1878,7 +1983,12 @@ class VTOController extends plattar_controller_1.PlattarController {
         const state = (await this.getConfiguratorState()).state;
         const first = state.first();
         if (first) {
-            const sceneProductAR = new __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
+            const sceneProductAR = new __1.SceneProductAR({
+                productID: first.scene_product_id,
+                variationID: first.product_variation_id,
+                variationSKU: null,
+                useARBanner: this.getBooleanAttribute("show-ar-banner")
+            });
             return sceneProductAR.init();
         }
         throw new Error("VTOController.initAR() - invalid decoded config-state does not have any product states");
@@ -1891,7 +2001,7 @@ class VTOController extends plattar_controller_1.PlattarController {
         if (!sceneID) {
             throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
         }
-        const configAR = new configurator_ar_1.ConfiguratorAR(await this.getConfiguratorState());
+        const configAR = new configurator_ar_1.ConfiguratorAR({ state: await this.getConfiguratorState(), useARBanner: this.getBooleanAttribute("show-ar-banner") });
         return configAR.init();
     }
     removeRenderer() {
@@ -2135,6 +2245,22 @@ class PlattarEmbed extends HTMLElement {
             this._controller.onAttributesUpdated(attributeName);
         }
     }
+    addEventListener(type, listener, options) {
+        // add to the element event listener
+        super.addEventListener(type, listener, options);
+        const eventType = 'arclick';
+        if (type === eventType) {
+            // automatically enable `show-ar-banner` to true if an arclick event is added
+            this.setAttribute('show-ar-banner', 'true');
+            // if this is a redirect url from an AR Action - we need to fire the event listener now
+            const url = new URL(location.href);
+            if (url.searchParams.get('plattar_ar_action') === 'true') {
+                setTimeout(() => {
+                    this.dispatchEvent(new Event(eventType));
+                }, 200);
+            }
+        }
+    }
 }
 exports.default = PlattarEmbed;
 
@@ -2693,32 +2819,32 @@ exports.Util = Util;
 },{}],16:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = "1.158.2";
+exports.default = "1.163.1";
 
 },{}],17:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ARViewer = void 0;
 class ARViewer {
     constructor() {
         this.modelUrl = null;
-        this.modelUrl = null;
+        this.banner = null;
+    }
+    get composedActionURL() {
+        const link = new URL(location.href);
+        link.searchParams.set("plattar_ar_action", "true");
+        return encodeURI(link.href);
     }
 }
-exports.default = ARViewer;
+exports.ARViewer = ARViewer;
 
 },{}],18:[function(require,module,exports){
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const ar_viewer_1 = __importDefault(require("./ar-viewer"));
-class QuicklookViewer extends ar_viewer_1.default {
+const ar_viewer_1 = require("./ar-viewer");
+class QuicklookViewer extends ar_viewer_1.ARViewer {
     constructor() {
         super();
-        this.araction = null;
-        this.titleHTML = "&checkoutTitle=" + document.title + "&checkoutSubtitle=" + document.title;
-        this.arcallback = () => { };
     }
     get nodeType() {
         return "Quick Look";
@@ -2733,23 +2859,20 @@ class QuicklookViewer extends ar_viewer_1.default {
         const anchor = document.createElement("a");
         anchor.setAttribute("rel", "ar");
         anchor.appendChild(document.createElement("img"));
+        const banner = this.banner;
         let url = this.modelUrl;
-        const araction = this.araction;
-        if (araction) {
+        if (banner) {
+            url += `#callToAction=${banner.button}`;
+            url += `&checkoutTitle=${banner.title}`;
+            url += `&checkoutSubtitle=${banner.subtitle}`;
             const handleQuicklook = (event) => {
                 if (event.data === "_apple_ar_quicklook_button_tapped") {
-                    this.arcallback();
+                    window.location.assign(this.composedActionURL);
                 }
-                document.body.removeChild(anchor);
-                anchor.removeEventListener("message", handleQuicklook, false);
             };
             anchor.addEventListener("message", handleQuicklook, false);
-            document.body.appendChild(anchor);
-            url += "#callToAction=" + araction;
-            if (this.titleHTML) {
-                url += this.titleHTML;
-            }
         }
+        document.body.appendChild(anchor);
         anchor.setAttribute("href", encodeURI(url));
         anchor.click();
     }
@@ -2758,12 +2881,9 @@ exports.default = QuicklookViewer;
 
 },{"./ar-viewer":17}],19:[function(require,module,exports){
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const ar_viewer_1 = __importDefault(require("./ar-viewer"));
-class RealityViewer extends ar_viewer_1.default {
+const ar_viewer_1 = require("./ar-viewer");
+class RealityViewer extends ar_viewer_1.ARViewer {
     constructor() {
         super();
     }
@@ -2788,17 +2908,12 @@ exports.default = RealityViewer;
 
 },{"./ar-viewer":17}],20:[function(require,module,exports){
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const ar_viewer_1 = __importDefault(require("./ar-viewer"));
-class SceneViewer extends ar_viewer_1.default {
+const ar_viewer_1 = require("./ar-viewer");
+class SceneViewer extends ar_viewer_1.ARViewer {
     constructor() {
         super();
-        this.araction = null;
         this.isVertical = false;
-        this.titleHTML = "<b>" + document.title;
         this.isVertical = false;
     }
     get nodeType() {
@@ -2811,27 +2926,18 @@ class SceneViewer extends ar_viewer_1.default {
         if (!this.modelUrl) {
             throw new Error("SceneViewer.start() - model url not set, use SceneViewer.modelUrl");
         }
-        const araction = this.araction;
-        let composedLink = encodeURIComponent(location.href);
-        if (araction) {
-            const link = new URL(location.href);
-            link.searchParams.set("araction", araction);
-            composedLink = encodeURIComponent(link.href);
-        }
-        if (!composedLink) {
-            throw new Error("SceneViewer.start() - failed to create composition link, check parameters");
-        }
-        const linkOverride = encodeURIComponent(location.href + '#no-ar-fallback');
-        let intent = 'intent://arvr.google.com/scene-viewer/1.1';
-        intent += '?file=' + this.modelUrl;
-        intent += '&mode=ar_preferred';
-        intent += '&link=' + composedLink;
-        intent += '&title=<b>' + this.titleHTML;
+        const linkOverride = encodeURIComponent(`${location.href}#no-ar-fallback`);
+        let intent = `intent://arvr.google.com/scene-viewer/1.1?file=${this.modelUrl}&mode=ar_preferred`;
+        const banner = this.banner;
+        if (banner) {
+            intent += `&title=<b>${banner.title}</b><br>${banner.subtitle}`;
+            intent += `&link=${this.composedActionURL}`;
+        }
         if (this.isVertical) {
             intent += '&enable_vertical_placement=true';
         }
         intent += ' #Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;';
-        intent += 'S.browser_fallback_url=' + linkOverride + ';end;';
+        intent += `S.browser_fallback_url=${linkOverride};end;`;
         const anchor = document.createElement("a");
         anchor.setAttribute("href", intent);
         anchor.click();
@@ -5293,7 +5399,7 @@ PlattarServer.match = (serverName) => {
                 api_read: "https://localhost:3000/v3/",
                 api_write: "https://localhost:3000/v3/",
                 cdn: "https://cdn-dev.plattar.space/",
-                cdn_image: "https://images-dev.plattar.space/'",
+                cdn_image: "https://images-dev.plattar.space/",
                 analytics: "https://localhost:3000/api/v2/analytics/",
                 type: "dev"
             }
@@ -6508,7 +6614,7 @@ PlattarUtil.match = (type) => {
 
 module.exports = PlattarUtil;
 },{"../types/application.js":47,"../types/content-pipeline/brief.js":48,"../types/content-pipeline/comment-brief.js":49,"../types/content-pipeline/comment-quote.js":50,"../types/content-pipeline/comment-solution.js":51,"../types/content-pipeline/folder.js":52,"../types/content-pipeline/pipeline-user.js":53,"../types/content-pipeline/quote.js":54,"../types/content-pipeline/rating.js":55,"../types/content-pipeline/solution.js":56,"../types/file/file-audio.js":57,"../types/file/file-image.js":59,"../types/file/file-model.js":60,"../types/file/file-script.js":61,"../types/file/file-video.js":62,"../types/interfaces/plattar-object.js":65,"../types/misc/application-build.js":66,"../types/misc/asset-library":67,"../types/misc/async-job.js":68,"../types/misc/script-event.js":69,"../types/misc/tag.js":70,"../types/page/card-button.js":72,"../types/page/card-html.js":73,"../types/page/card-iframe.js":74,"../types/page/card-image.js":75,"../types/page/card-map.js":76,"../types/page/card-paragraph.js":77,"../types/page/card-row.js":78,"../types/page/card-slider.js":79,"../types/page/card-title.js":80,"../types/page/card-video.js":81,"../types/page/card-youtube.js":82,"../types/page/page.js":83,"../types/product/product-annotation.js":84,"../types/product/product-variation.js":86,"../types/product/product.js":87,"../types/scene/scene-annotation.js":88,"../types/scene/scene-audio.js":89,"../types/scene/scene-button.js":91,"../types/scene/scene-camera.js":92,"../types/scene/scene-carousel.js":93,"../types/scene/scene-image.js":94,"../types/scene/scene-model.js":95,"../types/scene/scene-panorama.js":96,"../types/scene/scene-poller.js":97,"../types/scene/scene-product.js":98,"../types/scene/scene-script.js":99,"../types/scene/scene-shadow.js":100,"../types/scene/scene-video.js":101,"../types/scene/scene-volumetric.js":102,"../types/scene/scene-youtube.js":103,"../types/scene/scene.js":104,"../types/trigger/trigger-image.js":105}],107:[function(require,module,exports){
-module.exports = "1.154.1";
+module.exports = "1.159.1";
 
 },{}],108:[function(require,module,exports){
 const QRCodeStyling = require("qr-code-styling");
@@ -6724,7 +6830,7 @@ class BaseElement extends HTMLElement {
 
             this._UpdateCanvas(width, height);
 
-            div.style.display = "block";
+            div.style.display = "flex";
 
             return;
         }
@@ -6818,7 +6924,7 @@ module.exports = {
     version: Version
 };
 },{"./elements/qrcode-element.js":109,"./version":111}],111:[function(require,module,exports){
-module.exports = "1.150.2";
+module.exports = "1.160.1";
 
 },{}],112:[function(require,module,exports){
 "use strict";