@saasquatch/squatch-js 2.7.0-2 → 2.7.0-3

package/dist/widgets/Widget.d.ts

@@ -0,0 +1,57 @@
+import { default as AnalyticsApi } from '../api/AnalyticsApi';
+import { default as WidgetApi } from '../api/WidgetApi';
+import { EngagementMedium, WidgetContext, WidgetType } from '../types';
+export interface Params {
+    type: WidgetType;
+    domain: string;
+    npmCdn: string;
+    content: string;
+    api: WidgetApi;
+    rsCode?: string;
+    context: WidgetContext;
+    container?: string | HTMLElement | null | undefined;
+}
+export type ProgramLoadEvent = {
+    programId: string;
+    tenantAlias?: string;
+    accountId?: string;
+    userId?: string;
+    engagementMedium?: EngagementMedium;
+};
+export type GenericLoadEvent = {
+    mode: any;
+    analytics: any;
+};
+export default abstract class Widget {
+    type: WidgetType;
+    content: string;
+    analyticsApi: AnalyticsApi;
+    widgetApi: WidgetApi;
+    context: WidgetContext;
+    npmCdn: string;
+    container: string | HTMLElement | undefined | null;
+    loadEventListener: EventListener | null;
+    protected constructor(params: Params);
+    _findElement(): HTMLElement;
+    _createFrame(): HTMLIFrameElement;
+    _findFrame(): HTMLIFrameElement | null;
+    abstract load(): void;
+    protected _detachLoadEventListener(frameDoc: Document): void;
+    protected _attachLoadEventListener(frameDoc: Document, sqh: ProgramLoadEvent | GenericLoadEvent): void;
+    protected _loadEvent(sqh: ProgramLoadEvent | GenericLoadEvent): void;
+    protected _shareEvent(sqh: any, medium: any): void;
+    protected _error(rs: any, mode?: string, style?: string): string;
+    protected _findInnerContainer(frame: HTMLIFrameElement): Promise<Element>;
+    /**
+     * Reloads the current widget, makes updated request to API and renders result.
+     * Primarily for Classic widgets with registration
+     * @param param0 Form field values
+     * @param jwt JWT for API authentication
+     */
+    reload({ email, firstName, lastName }: {
+        email: any;
+        firstName: any;
+        lastName: any;
+    }, jwt: any): void;
+    private __deprecated__register;
+}

package/dist/widgets/Widgets.d.ts

@@ -0,0 +1,112 @@
+import { default as 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.
+     *
+     * @param {ConfigOptions} config Config details
+     *
+     * @example <caption>Browser example</caption>
+     * var widgets = new squatch.Widgets({tenantAlias:'test_12b5bo1b25125'});
+     *
+     * @example <caption>Browserify/Webpack example</caption>
+     * var Widgets = require('@saasquatch/squatch-js').Widgets;
+     * var widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
+     *
+     * @example <caption>Babel+Browserify/Webpack example</caption>
+     * import {Widgets} from '@saasquatch/squatch-js';
+     * let widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
+     */
+    constructor(configin: ConfigOptions);
+    /**
+     * This function calls the {@link WidgetApi.upsertUser} method, and it renders
+     * the widget if it is successful. Otherwise it shows the "error" widget.
+     *
+     * @param {Object} config Config details
+     * @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 {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
+     */
+    upsertUser(config: WithRequired<WidgetConfig, "user">): Promise<{
+        widget: any;
+        user: any;
+    }>;
+    /**
+     * This function calls the {@link WidgetApi.render} method, and it renders
+     * the widget if it is successful. Otherwise it shows the "error" widget.
+     *
+     * @param {Object} config Config details
+     * @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 {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
+     */
+    render(config: WidgetConfig): Promise<WidgetResult | undefined>;
+    /**
+     * Autofills a referral code into an element when someone has been referred.
+     * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
+     *
+     * @param selector Element class/id selector, or a callback function
+     * @returns
+     */
+    autofill(selector: string | Function): Promise<void>;
+    /**
+     * @hidden
+     * @param {Object} response The json object return from the WidgetApi
+     * @param {Object} config Config details
+     * @param {string} config.widgetType The widget type (REFERRER_WIDGET, CONVERSION_WIDGET)
+     * @param {string} config.engagementMedium (POPUP, EMBED)
+     * @returns {Widget} widget (PopupWidget or EmbedWidget)
+     */
+    private _renderWidget;
+    private _renderPopupWidget;
+    private _renderEmbedWidget;
+    /**
+     * @hidden
+     * @param {Object} error The json object containing the error details
+     * @param {string} em The engagementMedium
+     * @returns {void}
+     */
+    private _renderErrorWidget;
+    /**
+     * @hidden
+     * @param {string} rule A regular expression
+     * @returns {boolean} true if rule matches Url, false otherwise
+     */
+    private static _matchesUrl;
+}

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

@@ -0,0 +1,100 @@
+import { default as AnalyticsApi } from '../../api/AnalyticsApi';
+import { default as WidgetApi } from '../../api/WidgetApi';
+import { DeclarativeConfigOptions } from '../../types';
+import { default as EmbedWidget } from '../EmbedWidget';
+import { default as 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;
+    /**
+     * 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;
+    /**
+     * 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

@@ -0,0 +1,35 @@
+import { default as 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[];
+    attributeChangedCallback(attr: string, oldVal: string, newVal: string): void;
+    connectedCallback(): Promise<void>;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/squatch-js",
   "type": "module",
-  "version": "2.7.0-2",
+  "version": "2.7.0-3",
   "description": "The official Referral SaaSquatch Javascript Web/Browser SDK https://docs.referralsaasquatch.com/developer/squatchjs/",
   "license": "MIT",
   "author": "ReferralSaaSquatch.com, Inc.",
@@ -101,6 +101,7 @@
     "tsd": "^0.13.1",
     "typedoc": "^0.24.8",
     "typescript": "^5.1.6",
+    "vite-plugin-dts": "^4.5.3",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^6.0.1",
     "webpack-visualizer-plugin": "^0.1.11"

package/vite.config.ts

@@ -1,9 +1,16 @@
 import { resolve } from "path";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import dts from "vite-plugin-dts";
 
 export default defineConfig({
-  plugins: [tsconfigPaths()],
+  plugins: [
+    tsconfigPaths(),
+    dts({
+      outDir: "dist",
+      tsconfigPath: "./tsconfig.json",
+    }),
+  ],
   server: {
     port: 3000,
   },
@@ -23,5 +30,6 @@ export default defineConfig({
         format: "umd",
       },
     },
+    sourcemap: true,
   },
 });