@saasquatch/squatch-js 2.8.2-0 → 2.8.2-2

package/dist/squatch.js

@@ -704,6 +704,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const raw = params;
       const clean = validatePasswordlessConfig(raw);
       const { widgetType, engagementMedium = "POPUP", jwt, user } = clean;
+      console.log({ params });
       const tenantAlias = encodeURIComponent(this.tenantAlias);
       const accountId = (user == null ? void 0 : user.accountId) ? encodeURIComponent(user.accountId) : null;
       const userId = (user == null ? void 0 : user.id) ? encodeURIComponent(user.id) : null;
@@ -892,6 +893,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if ((options == null ? void 0 : options.maxWidth) || (options == null ? void 0 : options.minWidth)) {
         frame.style.width = "100%";
       }
+      if (options == null ? void 0 : options.initialHeight) {
+        frame.height = options.initialHeight;
+      }
       return frame;
     }
     _findFrame() {
@@ -1106,6 +1110,351 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       setTimeout(resolve, duration);
     });
   }
+  const getSkeleton = ({
+    height = "500px",
+    skeletonBackgroundColor = "#e0e0e0",
+    skeletonShimmerColor = "#f5f5f5",
+    borderColor = "#ccc"
+  }) => {
+    return `
+    <style>
+        * {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
+
+			.widget-container {
+				background: white;
+				width: 100%;
+				max-width: 900px;
+				padding: 40px;
+				border-radius: 12px;
+				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+				box-sizing: border-box;
+			}
+
+			@keyframes shimmer {
+				0% {
+					background-position: -100% 0;
+				}
+				100% {
+					background-position: 100% 0;
+				}
+			}
+
+			.skeleton {
+				background: ${skeletonBackgroundColor};
+				background: linear-gradient(
+					90deg,
+					${skeletonBackgroundColor} 25%,
+					${skeletonShimmerColor} 50%,
+					${skeletonBackgroundColor} 75%
+				);
+				background-size: 200% 100%;
+				animation: shimmer 1.5s infinite linear;
+				border-radius: 6px;
+				margin-bottom: 12px;
+			}
+
+			.sk-title-lg {
+				height: 36px;
+				width: 50%;
+				margin-bottom: 16px;
+			}
+			.sk-title-md {
+				height: 28px;
+				width: 30%;
+				margin-bottom: 20px;
+				margin-top: 40px;
+			}
+			.sk-text {
+				height: 16px;
+				width: 80%;
+				margin-bottom: 8px;
+			}
+			.sk-text-short {
+				width: 40%;
+			}
+			.sk-label {
+				height: 14px;
+				width: 25%;
+				margin-bottom: 10px;
+			}
+
+			.hero-section {
+				display: flex;
+				gap: 40px;
+				margin-bottom: 40px;
+				border-bottom: 1px solid ${borderColor};
+				padding-bottom: 40px;
+				flex-direction: row;
+			}
+			.hero-content {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+			.hero-image {
+				flex: 1;
+				height: 300px;
+				border-radius: 12px;
+			}
+
+			.share-section {
+				margin-bottom: 40px;
+			}
+			.sk-input {
+				height: 50px;
+				width: 100%;
+				border-radius: 8px;
+				margin-bottom: 16px;
+			}
+			.social-buttons {
+				display: flex;
+				gap: 12px;
+			}
+			.sk-btn-social {
+				flex: 1;
+				height: 50px;
+				border-radius: 8px;
+			}
+
+			.stats-section {
+				display: flex;
+				gap: 24px;
+				margin-bottom: 40px;
+				padding: 30px 0;
+				border-top: 1px solid ${borderColor};
+				border-bottom: 1px solid ${borderColor};
+			}
+			.stat-card {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+			.stat-divider {
+				padding-left: 24px;
+			}
+
+			.sk-stat-num {
+				height: 48px;
+				width: 120px;
+				margin-bottom: 8px;
+			}
+			.sk-stat-label {
+				height: 18px;
+				width: 80px;
+			}
+
+			.table-header {
+				display: flex;
+				gap: 16px;
+				margin-bottom: 16px;
+			}
+			.sk-th {
+				height: 16px;
+			}
+			.table-row {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				padding: 16px 0;
+				border-bottom: 1px solid ${borderColor};
+			}
+
+			.col-user {
+				flex: 2;
+			}
+			.col-status {
+				flex: 1;
+			}
+			.col-reward {
+				flex: 2;
+			}
+			.col-date {
+				flex: 1;
+			}
+
+			.sk-badge {
+				height: 28px;
+				width: 90px;
+				border-radius: 14px;
+			}
+			.sk-reward-block {
+				height: 36px;
+				width: 100%;
+				border-radius: 6px;
+			}
+
+			.pagination {
+				display: flex;
+				justify-content: flex-end;
+				gap: 8px;
+				margin-top: 24px;
+			}
+			.sk-btn-page {
+				height: 36px;
+				width: 64px;
+				border-radius: 6px;
+				margin-bottom: 0;
+			}
+
+			@media (max-width: 768px) {
+				body {
+					padding: 20px;
+				}
+				.widget-container {
+					padding: 24px;
+				}
+
+				.hero-section {
+					flex-direction: column-reverse;
+					gap: 24px;
+				}
+				.hero-image {
+					height: 220px;
+					width: 100%;
+				}
+				.sk-title-lg {
+					width: 80%;
+				}
+
+				.col-date {
+					display: none;
+				}
+			}
+
+			@media (max-width: 480px) {
+				body {
+					padding: 10px;
+				}
+				.widget-container {
+					padding: 16px;
+				}
+
+				.sk-stat-num {
+					width: 80px;
+					height: 40px;
+				}
+
+				.col-reward {
+					display: none;
+				}
+
+				.col-user {
+					flex: 3;
+				}
+				.col-status {
+					flex: 2;
+					display: flex;
+					justify-content: flex-end;
+				}
+			}
+    </style>
+
+    <div class="widget-container">
+			<div class="hero-section">
+				<div class="hero-content">
+					<div class="skeleton sk-title-lg"></div>
+					<div class="skeleton sk-text"></div>
+					<div class="skeleton sk-text sk-text-short"></div>
+				</div>
+				<div class="skeleton hero-image"></div>
+			</div>
+
+			<div class="share-section">
+				<div class="skeleton sk-label"></div>
+				<div class="skeleton sk-input"></div>
+				<div class="social-buttons">
+					<div class="skeleton sk-btn-social"></div>
+					<div class="skeleton sk-btn-social"></div>
+					<div class="skeleton sk-btn-social"></div>
+					<div class="skeleton sk-btn-social"></div>
+				</div>
+			</div>
+
+			<div
+				class="skeleton sk-title-md"
+				style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
+			></div>
+			<div
+				class="skeleton sk-text"
+				style="width: 60%; margin-left: auto; margin-right: auto"
+			></div>
+
+			<div class="stats-section">
+				<div class="stat-card">
+					<div class="skeleton sk-stat-num"></div>
+					<div class="skeleton sk-stat-label"></div>
+				</div>
+				<div class="stat-card stat-divider">
+					<div class="skeleton sk-stat-num"></div>
+					<div class="skeleton sk-stat-label"></div>
+				</div>
+			</div>
+
+			<div class="skeleton sk-title-md"></div>
+
+			<div class="table-header">
+				<div class="skeleton sk-th col-user"></div>
+				<div class="skeleton sk-th col-status"></div>
+				<div class="skeleton sk-th col-reward"></div>
+				<div class="skeleton sk-th col-date"></div>
+			</div>
+
+			<div class="table-row">
+				<div class="col-user">
+					<div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
+				</div>
+				<div class="col-status">
+					<div class="skeleton sk-badge" style="margin: 0"></div>
+				</div>
+				<div class="col-reward">
+					<div class="skeleton sk-reward-block" style="margin: 0"></div>
+				</div>
+				<div class="col-date">
+					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
+				</div>
+			</div>
+			<div class="table-row">
+				<div class="col-user">
+					<div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
+				</div>
+				<div class="col-status">
+					<div class="skeleton sk-badge" style="margin: 0"></div>
+				</div>
+				<div class="col-reward">
+					<div class="skeleton sk-reward-block" style="margin: 0"></div>
+				</div>
+				<div class="col-date">
+					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
+				</div>
+			</div>
+			<div class="table-row">
+				<div class="col-user">
+					<div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
+				</div>
+				<div class="col-status">
+					<div class="skeleton sk-badge" style="margin: 0"></div>
+				</div>
+				<div class="col-reward">
+					<div class="skeleton sk-reward-block" style="margin: 0"></div>
+				</div>
+				<div class="col-date">
+					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
+				</div>
+			</div>
+
+			<div class="pagination">
+				<div class="skeleton sk-btn-page"></div>
+				<div class="skeleton sk-btn-page"></div>
+			</div>
+		</div>
+  `;
+  };
   const _log$7 = browserExports.debug("squatch-js:EMBEDwidget");
   class EmbedWidget extends Widget {
     constructor(params, container) {
@@ -1115,32 +1464,59 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (container) this.container = container;
     }
     async load() {
-      var _a2, _b, _c, _d, _e;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-      const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.embeddedWidgets;
+      const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
+      const skeletonBackgroundColor = (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
+      const skeletonShimmerColor = (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
+      const borderColor = (_g = brandingConfig == null ? void 0 : brandingConfig.border) == null ? void 0 : _g.borderColor;
+      const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
       const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
       const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
-      const frame = this._createFrame({ minWidth, maxWidth });
+      console.log({
+        brandingConfig,
+        initialHeight,
+        widgetConfig: this.context.widgetConfig
+      });
+      const skeletonHTML = getSkeleton({
+        height: initialHeight,
+        skeletonBackgroundColor,
+        skeletonShimmerColor,
+        borderColor
+      });
+      const skeletonContainer = document.createElement("div");
+      skeletonContainer.innerHTML = skeletonHTML;
+      const frame = this._createFrame({
+        minWidth,
+        maxWidth,
+        initialHeight
+      });
       const element = this._findElement();
-      if ((_d = this.context) == null ? void 0 : _d.container) {
+      frame.style.display = "none";
+      const injectContents = (target) => {
+        target.appendChild(skeletonContainer);
+        target.appendChild(frame);
+      };
+      if ((_i = this.context) == null ? void 0 : _i.container) {
         element.style.visibility = "hidden";
         element.style.height = "0";
         element.style["overflow-y"] = "hidden";
       }
       if (this.container) {
         if (element.shadowRoot) {
-          if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
+          if (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
             element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
           } else {
-            element.shadowRoot.appendChild(frame);
+            injectContents(element.shadowRoot);
           }
         } else if (element.firstChild) {
-          element.replaceChild(frame, element.firstChild);
+          element.innerHTML = "";
+          injectContents(element);
         } else {
-          element.appendChild(frame);
+          injectContents(element);
         }
       } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-        element.appendChild(frame);
+        injectContents(element);
       }
       const { contentWindow } = frame;
       if (!contentWindow) {
@@ -1148,19 +1524,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const frameDoc = contentWindow.document;
       frameDoc.open();
+      console.log({ content: this.content, context: this.context, this: this });
+      const domain = this.widgetApi.domain;
       frameDoc.write(`
+      ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) && `
+        <link rel="preconnect" href="https://fast${domain === "https://staging.referralsaasquatch.com" && "-staging"}.ssqt.io">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+        (_l = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _l.brandFont
+      )}">`}
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-      <style>
-      sqm-stencilbook, sqm-portal-google-registration-form, sqm-widget-verification, sqm-portal-google-login, sqm-portal-registration-form, sqm-portal-reset-password, sqm-instant-access-registration, sqm-portal-email-verification, sqm-portal-profile, sqm-portal-verify-email, sqm-qr-code, sqm-rewards-table-customer-note-column, raisins-plop-target, sqm-close-button, sqm-context-router, sqm-graphql-client-provider, sqm-header-logo, sqm-lead-checkbox-field, sqm-leaderboard-rank, sqm-logout-current-user, sqm-navigation-sidebar, sqm-navigation-sidebar-item, sqm-popup-container, sqm-portal-logout, sqm-portal-protected-route, sqm-route, sqm-tab, sqm-tabs, sqm-text-span, sqm-widget-verification-controller, sqm-email-verification, sqm-google-sign-in, sqm-lead-input-field, sqm-rewards-table-customer-note-cell, sqm-referral-codes, sqm-pagination, sqm-referral-code, sqm-scroll, sqm-form-message, sqm-code-verification, sqm-password-field, sqm-invoice-table-data-cell, sqm-invoice-table-date-cell, sqm-invoice-table-download-cell, sqm-table-cell, sqm-table-row, sqm-empty, sqm-portal-container, sqm-text, sqm-titled-section, sqm-rewards-table, sqm-rewards-table-date-column, sqm-rewards-table-reward-column, sqm-rewards-table-source-column, sqm-rewards-table-status-column, sqm-rewards-table-date-cell, sqm-rewards-table-reward-cell, sqm-rewards-table-source-cell, sqm-rewards-table-status-cell, sqm-referral-table-column, sqm-referral-table, sqm-referral-table-date-column, sqm-referral-table-rewards-column, sqm-referral-table-status-column, sqm-referral-table-user-column, sqm-referral-table-cell, sqm-referral-table-date-cell, sqm-referral-table-rewards-cell, sqm-referral-table-status-cell, sqm-referral-table-user-cell, sqm-tax-and-cash-dashboard, sqm-banking-info-form, sqm-docusign-form, sqm-indirect-tax-form, sqm-user-info-form, sqm-invoice-table, sqm-invoice-table-data-column, sqm-invoice-table-date-column, sqm-invoice-table-download-column, sqm-payout-details-card, sqm-tax-and-cash, sqm-leaderboard, sqm-reward-exchange-list, sqm-lead-form, sqm-payout-status-alert, sqm-portal-change-password, sqm-portal-register, sqm-coupon-code, sqm-edit-profile, sqm-payout-button-scroll, sqm-portal-change-marketing, sqm-portal-forgot-password, sqm-portal-login, sqm-referred-registration, sqm-big-stat, sqm-brand, sqm-brand-selector, sqm-card-feed, sqm-checkbox-field, sqm-divided-layout, sqm-dropdown-field, sqm-hero, sqm-hero-image, sqm-hook-story-container, sqm-image, sqm-input-field, sqm-lead-dropdown-field, sqm-link-button, sqm-marketing-emails-checkbox, sqm-name-fields, sqm-navigation-menu, sqm-portal-footer, sqm-portal-frame, sqm-program-explainer, sqm-program-explainer-step, sqm-program-menu, sqm-referral-card, sqm-referral-iframe, sqm-router, sqm-share-button, sqm-share-code, sqm-share-link, sqm-stat-container, sqm-task-card, sqm-timeline, sqm-timeline-entry, sqm-user-name {
-    visibility: hidden;
-}
+      <style data-styles>
+        html { visibility:hidden;}
       </style>
       ${this.content}
+
       `);
       frameDoc.close();
       domready(frameDoc, async () => {
+        if (skeletonContainer && skeletonContainer.parentNode) {
+          skeletonContainer.parentNode.removeChild(skeletonContainer);
+        }
+        frame.style.display = "block";
         const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-        frame.height = frameDoc.body.scrollHeight;
+        frame.height = initialHeight || frameDoc.body.scrollHeight;
         console.log({ height: frameDoc.body.scrollHeight });
         const ro = new contentWindow["ResizeObserver"]((entries) => {
           for (const entry of entries) {
@@ -1797,7 +2185,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   const _log$3 = browserExports.debug("squatch-js");
-  function _getAutoConfig(configIn) {
+  function _getAutoConfig() {
+    var _a2;
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     const refParam = urlParams.get("_saasquatchExtra") || "";
@@ -1805,6 +2194,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       _log$3("No _saasquatchExtra param");
       return;
     }
+    const config = validateConfig({
+      tenantAlias: "UNKNOWN"
+    });
+    if (!config.domain) {
+      _log$3("domain must be provided in config to use _saasquatchExtra");
+      return;
+    }
     let raw;
     try {
       raw = JSON.parse(b64decode(refParam));
@@ -1812,8 +2208,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       _log$3("Unable to decode _saasquatchExtra config");
       return;
     }
-    const { domain, tenantAlias, widgetConfig } = convertExtraToConfig(raw);
-    if (!domain || !tenantAlias || !widgetConfig) {
+    function normalizeDomain(domain) {
+      return domain.replace(/^https?:\/\//, "");
+    }
+    const normalizedDomain = normalizeDomain(config.domain);
+    const tenantAlias = Object.keys((raw == null ? void 0 : raw[normalizedDomain]) || {})[0];
+    const widgetConfig = (_a2 = raw == null ? void 0 : raw[normalizedDomain]) == null ? void 0 : _a2[tenantAlias];
+    if (!widgetConfig) {
       _log$3("_saasquatchExtra did not have an expected structure");
       return void 0;
     }
@@ -1825,20 +2226,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         ...rest
       },
       squatchConfig: {
-        ...configIn ? { configIn } : {},
-        domain,
+        ...config,
         tenantAlias
       }
     };
   }
-  function convertExtraToConfig(obj) {
-    var _a2;
-    const _domain = Object.keys(obj || {})[0];
-    const tenantAlias = Object.keys((obj == null ? void 0 : obj[_domain]) || {})[0];
-    const widgetConfig = (_a2 = obj == null ? void 0 : obj[_domain]) == null ? void 0 : _a2[tenantAlias];
-    const domain = _domain ? `https://${_domain}` : void 0;
-    return { domain, tenantAlias, widgetConfig };
-  }
   const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
   function decodeUserJwt(tokenStr) {
     var _a2;
@@ -2151,9 +2543,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     var _a2;
     return (_a2 = widgets()) == null ? void 0 : _a2.render(widgetConfig);
   }
-  function _auto(configIn) {
+  function _auto() {
     var _a2;
-    const configs = _getAutoConfig(configIn);
+    const configs = _getAutoConfig();
     if (configs) {
       const { squatchConfig, widgetConfig } = configs;
       init(squatchConfig);