@saasquatch/squatch-js 2.6.0-1 → 2.6.0-11

package/dist/types.d.ts

@@ -77,19 +77,21 @@ export type EngagementMedium =
 "POPUP"
 /**  Displays the widget embedded in the page. Create an {@link EmbedWidget} */
  | "EMBED";
-export type WidgetContext = {
-    type: "cookie" | "error" | "passwordless";
+export type UpsertWidgetContext = {
+    type: "upsert";
+    user?: User | null;
     engagementMedium?: EngagementMedium;
     container?: HTMLElement | string;
     trigger?: string;
-    displayOnLoad?: boolean;
-} | {
-    type: "upsert";
-    user?: User | null;
+};
+export type BaseWidgetContext = {
+    type: "cookie" | "error" | "passwordless";
     engagementMedium?: EngagementMedium;
     container?: HTMLElement | string;
     trigger?: string;
+    displayOnLoad?: boolean;
 };
+export type WidgetContext = UpsertWidgetContext | BaseWidgetContext;
 export type WidgetContextType = "upsert" | "cookie" | "error" | "passwordless";
 /**
  * WidgetType is an enum for types of ways a Widget can be displayed.

package/dist/utils/decodeJwt.d.ts

@@ -0,0 +1 @@
+export declare function decodeUserJwt(tokenStr: string): any;

package/dist/utils/validate.d.ts

@@ -1,6 +1,4 @@
 import { ConfigOptions, WidgetConfig } from "../types";
-export declare const DEFAULT_DOMAIN = "https://app.referralsaasquatch.com";
-export declare const DEFAULT_NPM_CDN = "https://fast.ssqt.io/npm";
 type Required<T> = T extends object ? {
     [P in keyof T]-?: NonNullable<T[P]>;
 } : T;
@@ -9,4 +7,6 @@ export declare function isObject(obj: unknown): obj is object;
 export declare function validateLocale(locale?: string): string | undefined;
 export declare function validateWidgetConfig(raw: unknown | undefined): WidgetConfig;
 export declare function validatePasswordlessConfig(raw: unknown | undefined): WidgetConfig;
+export declare function getToken(): string;
+export declare function getConfig(): Omit<ConfigOptions, "tenantAlias">;
 export {};

package/dist/widgets/EmbedWidget.d.ts

@@ -4,13 +4,22 @@ import Widget, { Params } from "./Widget";
  *
  * To create an EmbedWidget use {@link Widgets}
  *
+ * @example
+ * const widget = new EmbedWidget({ ... })
+ * widget.load() // Loads widget into the DOM
+ * widget.open() // Makes the iframe container visible
+ * widget.close() // Hides the iframe container
  */
 export default class EmbedWidget extends Widget {
     constructor(params: Params, container?: HTMLElement | string);
     load(): Promise<void>;
+    /**
+     * Un-hide if element is available and refresh data
+     */
     open(): void;
     close(): void;
     protected _error(rs: any, mode?: string, style?: string): string;
+    private _shouldFireLoadEvent;
     show: () => void;
     hide: () => void;
 }

package/dist/widgets/PopupWidget.d.ts

@@ -5,15 +5,20 @@ import Widget, { Params } from "./Widget";
  *
  * To create a PopupWidget use {@link Widgets}
  *
+ * @example
+ * const widget = new PopupWidget({ ... })
+ * widget.load() // Loads the widget into a dialog element
+ * widget.open() // Opens the dialog element
+ * widget.close() // Hides the dialog element
  */
 export default class PopupWidget extends Widget {
     trigger: string | null;
     id: string;
     constructor(params: Params, trigger?: string | null);
-    _initialiseCTA(frame: HTMLIFrameElement): void;
+    _initialiseCTA(): void;
     _createPopupDialog(): HTMLDialogElement;
-    load(): void;
-    protected _setupResizeHandler(frame: HTMLIFrameElement): void;
+    load(): Promise<void>;
+    protected _setupResizeHandler(frame: HTMLIFrameElement): Promise<void>;
     open(): void;
     close(): void;
     protected _clickedOutside({ target }: {

package/dist/widgets/Widgets.d.ts

@@ -1,15 +1,28 @@
 import WidgetApi from "../api/WidgetApi";
 import { ConfigOptions, WidgetConfig, WidgetResult, WithRequired } from "../types";
 /**
- *
  * `Widgets` is a factory for creating widgets. It's possible to build your own widgets using the
  * {@link WidgetApi} but most people will prefer to use these easy methods.
- *
+ * @class
  */
 export default class Widgets {
+    /**
+     * Instance of {@link WidgetApi}
+     */
     api: WidgetApi;
+    /**
+     * Tenant alias of SaaSquatch tenant
+     */
     tenantAlias: string;
+    /**
+     * SaaSquatch domain for API requests
+     * @default "https://app.referralsaasquatch.com"
+     */
     domain: string;
+    /**
+     * Hosted CDN for npm packages
+     * @default "https://fast.ssqt.io/npm"
+     */
     npmCdn: string;
     /**
      * Initialize a new {@link Widgets} instance.
@@ -36,13 +49,13 @@ export default class Widgets {
      * @param {Object} config.user The user details
      * @param {string} config.user.id The user id
      * @param {string} config.user.accountId The user account id
-     * @param {WidgetType} config.widgetType The content of the widget.
-     * @param {EngagementMedium} config.engagementMedium How to display the widget.
+     * @param {WidgetType} config.widgetType The content of the widget
+     * @param {EngagementMedium} config.engagementMedium How to display the widget
      * @param {string} config.jwt the JSON Web Token (JWT) that is used to validate the data (can be disabled)
      * @param {HTMLElement | string | undefined} config.container Element to load the widget into
      * @param {string | undefined} config.trigger Trigger element for opening the popup widget
      *
-     * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
+     * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
      */
     upsertUser(config: WithRequired<WidgetConfig, "user">): Promise<{
         widget: any;
@@ -56,12 +69,12 @@ export default class Widgets {
      * @param {Object} config.user The user details
      * @param {string} config.user.id The user id
      * @param {string} config.user.accountId The user account id
-     * @param {WidgetType} config.widgetType The content of the widget.
-     * @param {EngagementMedium} config.engagementMedium How to display the widget.
+     * @param {WidgetType} config.widgetType The content of the widget
+     * @param {EngagementMedium} config.engagementMedium How to display the widget
      * @param {string} config.jwt the JSON Web Token (JWT) that is used
      *                            to validate the data (can be disabled)
      *
-     * @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
+     * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
      */
     render(config: WidgetConfig): Promise<WidgetResult | undefined>;
     /**

package/dist/widgets/declarative/DeclarativeWidget.d.ts

@@ -3,28 +3,98 @@ import WidgetApi from "../../api/WidgetApi";
 import { DeclarativeConfigOptions } from "../../types";
 import EmbedWidget from "../EmbedWidget";
 import PopupWidget from "../PopupWidget";
+/**
+ * Abstract class for building web-components that render SaaSquatch widgets to the DOM
+ * @abstract
+ * @example
+ * class TestWidgetElement extends DeclarativeWidget {}
+ * const testWidget = new TestWidgetElement()
+ * testWidget.widgetType = 'w/widget-type'
+ * testWidget.type = 'EMBED'
+ * testWidget.renderWidget()
+ */
 export default abstract class DeclarativeWidget extends HTMLElement {
+    /**
+     * Configuration overrides
+     * @default window.squatchConfig
+     */
     config: DeclarativeConfigOptions | undefined;
+    /**
+     * Signed JWT containing user information
+     * @default window.squatchToken
+     */
     token: string | undefined;
+    /**
+     * Tenant alias of SaaSquatch tenant
+     * @default window.squatchTenant
+     */
     tenant: string | undefined;
+    /**
+     * widgetType of widget to load
+     */
     widgetType: string | undefined;
+    /**
+     * Locale to render the widget in
+     */
+    locale: string | undefined;
+    /**
+     * Instance of {@link WidgetApi}
+     */
     widgetApi: WidgetApi;
+    /**
+     * Instance of {@link AnalyticsApi}
+     */
     analyticsApi: AnalyticsApi;
-    type: "EMBED" | "POPUP";
+    /**
+     * Instance of {@link EmbedWidget} or {@link PopupWidget}
+     */
     widgetInstance: EmbedWidget | PopupWidget;
+    /**
+     * Determines whether to render the widget as an embedding widget or popup widget
+     */
+    type: "EMBED" | "POPUP";
+    /**
+     * Container element to contain the widget iframe
+     * @default this
+     */
     container: string | HTMLElement | undefined | null;
     element: HTMLElement | undefined;
-    _hasChildren: boolean;
+    /**
+     * Flag for if the component has been loaded or not
+     * @hidden
+     */
+    loaded: boolean;
     constructor();
     private _setupApis;
     private renderPasswordlessVariant;
     private renderUserUpsertVariant;
     private _setWidget;
+    /**
+     * Fetches widget content from SaaSquatch and builds a Widget instance to support rendering the widget in the DOM
+     * @returns Instance of either {@link EmbedWidget} or {@link PopupWidget} depending on `this.type`
+     * @throws Throws an Error if `widgetType` is undefined
+     */
     getWidgetInstance(): Promise<EmbedWidget | PopupWidget>;
+    /**
+     * Calls {@link getWidgetInstance} to build the Widget instance and loads the widget iframe into the DOM
+     */
     renderWidget(): Promise<void>;
+    /**
+     * Builds a Widget instance for the default error widget
+     * @returns Instance of either {@link EmbedWidget} or {@link PopupWidget} depending on `this.type`
+     */
     setErrorWidget: (e: Error) => EmbedWidget | PopupWidget;
+    /**
+     * Calls `open` method of `widgetInstance`
+     * @throws Throws an Error if called before the widget has loaded
+     */
     open(): void;
+    /**
+     * Calls `close` method of `widgetInstance`
+     * @throws Throws an Error if called before the widget has loaded
+     */
     close(): void;
+    reload: () => Promise<void>;
     show: () => void;
     hide: () => void;
 }

package/dist/widgets/declarative/DeclarativeWidgets.d.ts

@@ -1,10 +1,32 @@
 import DeclarativeWidget from "./DeclarativeWidget";
+/**
+ * Base class for `squatch-embed` web-component
+ * @extends {DeclarativeWidget}
+ * @class
+ * @example
+ * window.createCustomElement('squatch-embed', DeclarativeEmbedWidget)
+ * const widget = document.querySelector('squatch-embed') as DeclarativeEmbedWidget
+ * widget.open()
+ * widget.close()
+ * widget.reload()
+ */
 export declare class DeclarativeEmbedWidget extends DeclarativeWidget {
     constructor();
     static get observedAttributes(): string[];
     attributeChangedCallback(attr: string, oldVal: string, newVal: string): void;
     connectedCallback(): Promise<void>;
 }
+/**
+ * Base class for `squatch-popup` web-component
+ * @extends {DeclarativeWidget}
+ * @class
+ * @example
+ * window.createCustomElement('squatch-popup', DeclarativePopupWidget)
+ * const widget = document.querySelector('squatch-popup') as DeclarativePopupWidget
+ * widget.open()
+ * widget.close()
+ * widget.reload()
+ */
 export declare class DeclarativePopupWidget extends DeclarativeWidget {
     constructor();
     static get observedAttributes(): string[];