@plattar/plattar-ar-adapter 1.158.2 → 1.163.1

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

@@ -156,6 +156,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();
         }
@@ -187,6 +188,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;
@@ -211,6 +215,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
      *
@@ -222,6 +234,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

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

@@ -119,6 +119,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;
             }
@@ -143,6 +144,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);
@@ -201,7 +205,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"));

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

@@ -210,7 +210,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");
@@ -223,7 +228,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() {

package/dist/embed/plattar-embed.d.ts

@@ -57,4 +57,6 @@ export default class PlattarEmbed extends HTMLElement {
      * based on the state of the embed, we update the internal structure accordingly
      */
     private _OnAttributesUpdated;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
 }

package/dist/embed/plattar-embed.js

@@ -223,5 +223,21 @@ 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;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="@plattar/plattar-web" />
+/// <reference types="@plattar/plattar-qrcode" />
 export * as PlattarWeb from "@plattar/plattar-web";
 export * as PlattarQRCode from "@plattar/plattar-qrcode";
 export * as version from "./version";

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.158.2";
+declare const _default: "1.163.1";
 export default _default;

package/dist/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = "1.158.2";
+exports.default = "1.163.1";

package/dist/viewers/ar-viewer.d.ts

@@ -1,7 +1,14 @@
-export default abstract class ARViewer {
+export interface ARBanner {
+    readonly title: string;
+    readonly subtitle: string;
+    readonly button: 'Visit';
+}
+export declare abstract class ARViewer {
     modelUrl: string | null;
+    banner: ARBanner | null;
     constructor();
     abstract start(): void;
     abstract get nodeType(): string;
     abstract get device(): string;
+    get composedActionURL(): string;
 }

package/dist/viewers/ar-viewer.js

@@ -1,9 +1,15 @@
 "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;

package/dist/viewers/quicklook-viewer.d.ts

@@ -1,8 +1,5 @@
-import ARViewer from "./ar-viewer";
+import { ARViewer } from "./ar-viewer";
 export default class QuicklookViewer extends ARViewer {
-    araction: string | null;
-    arcallback: () => void;
-    titleHTML: string;
     constructor();
     get nodeType(): string;
     get device(): string;

package/dist/viewers/quicklook-viewer.js

@@ -1,15 +1,9 @@
 "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";
@@ -24,23 +18,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();
     }

package/dist/viewers/reality-viewer.d.ts

@@ -1,4 +1,4 @@
-import ARViewer from "./ar-viewer";
+import { ARViewer } from "./ar-viewer";
 export default class RealityViewer extends ARViewer {
     constructor();
     get nodeType(): string;

package/dist/viewers/reality-viewer.js

@@ -1,10 +1,7 @@
 "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();
     }

package/dist/viewers/scene-viewer.d.ts

@@ -1,7 +1,5 @@
-import ARViewer from "./ar-viewer";
+import { ARViewer } from "./ar-viewer";
 export default class SceneViewer extends ARViewer {
-    araction: string | null;
-    titleHTML: string;
     isVertical: boolean;
     constructor();
     get nodeType(): string;

package/dist/viewers/scene-viewer.js

@@ -1,15 +1,10 @@
 "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() {
@@ -22,27 +17,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);
+        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 (!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;
         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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plattar/plattar-ar-adapter",
-  "version": "1.158.2",
+  "version": "1.163.1",
   "description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,17 +38,17 @@
   "homepage": "https://www.plattar.com",
   "dependencies": {
     "@plattar/plattar-analytics": "^1.152.2",
-    "@plattar/plattar-api": "^1.154.1",
-    "@plattar/plattar-qrcode": "1.150.2",
+    "@plattar/plattar-api": "^1.159.1",
+    "@plattar/plattar-qrcode": "1.160.1",
     "@plattar/plattar-services": "^1.157.1",
     "@plattar/plattar-web": "^1.154.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.15",
-    "@babel/core": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
     "browserify": "^17.0.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.2",
     "uglify-js": "^3.17.4"
   },
   "publishConfig": {