@saasquatch/squatch-js 2.8.2-20 → 2.8.2-21

package/dist/squatch.cjs.js

@@ -1118,87 +1118,16 @@ class EmbedWidget extends Widget {
       this.container = container;
     }
   }
-  //Old code for testing
-  // async load() {
-  //   const brandingConfig = this.context.widgetConfig?.values?.brandingConfig;
-  //   const sizes = brandingConfig?.widgetSize?.embeddedWidgets;
-  //   const maxWidth = sizes?.maxWidth ? formatWidth(sizes.maxWidth) : "";
-  //   const minWidth = sizes?.minWidth ? formatWidth(sizes.minWidth) : "";
-  //   const frame = this._createFrame({ minWidth, maxWidth });
-  //   const element = this._findElement();
-  //   if (this.context?.container) {
-  //     // Custom container is used
-  //     element.style.visibility = "hidden";
-  //     element.style.height = "0";
-  //     element.style["overflow-y"] = "hidden";
-  //   }
-  // if (this.container) {
-  //   if (element.shadowRoot) {
-  //     if (element.shadowRoot.lastChild?.nodeName === "IFRAME") {
-  //       element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
-  //     } else {
-  //       element.shadowRoot.appendChild(frame);
-  //     }
-  //   }
-  //   // Widget reloaded - replace existing element
-  //   else if (element.firstChild) {
-  //     element.replaceChild(frame, element.firstChild);
-  //     // Add iframe for the first time
-  //   } else {
-  //     element.appendChild(frame);
-  //   }
-  // } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-  //   element.appendChild(frame);
-  // }
-  //   const { contentWindow } = frame;
-  //   if (!contentWindow) {
-  //     throw new Error("Frame needs a content window");
-  //   }
-  //   const frameDoc = contentWindow.document;
-  //   frameDoc.open();
-  //   frameDoc.write(this.content);
-  //   frameDoc.write(
-  //     `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-  //   );
-  //   frameDoc.close();
-  //   domready(frameDoc, async () => {
-  //     const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-  //     // @ts-ignore -- number will be cast to string by browsers
-  //     frame.height = frameDoc.body.scrollHeight;
-  //     // Adjust frame height when size of body changes
-  //     /* istanbul ignore next: hard to test */
-  //     const ro = new contentWindow["ResizeObserver"]((entries) => {
-  //       for (const entry of entries) {
-  //         const { height } = entry.contentRect;
-  //         // @ts-ignore -- number will be cast to string by browsers
-  //         frame.height = height;
-  //       }
-  //     });
-  //     const container = await this._findInnerContainer(frame);
-  //     ro.observe(container);
-  //     if (this._shouldFireLoadEvent()) {
-  //       this._loadEvent(_sqh);
-  //       _log("loaded");
-  //     } else if (frameDoc) {
-  //       this._attachLoadEventListener(frameDoc, _sqh);
-  //     }
-  //   });
-  // }
   async load() {
     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 initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
-    (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
-    (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
-    (_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 brandingConfig2 = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+    const initialHeight = brandingConfig2 == null ? void 0 : brandingConfig2.loadingHeight;
+    (_d = (_c = brandingConfig2 == null ? void 0 : brandingConfig2.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
+    (_f = (_e = brandingConfig2 == null ? void 0 : brandingConfig2.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
+    (_g = brandingConfig2 == null ? void 0 : brandingConfig2.border) == null ? void 0 : _g.borderColor;
+    const sizes = (_h = brandingConfig2 == null ? void 0 : brandingConfig2.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) : "";
-    console.log({
-      brandingConfig,
-      initialHeight,
-      widgetConfig: this.context.widgetConfig
-    });
     const frame = this._createFrame({
       minWidth,
       maxWidth,
@@ -1233,12 +1162,12 @@ class EmbedWidget extends Widget {
     frameDoc.open();
     const domain = this.widgetApi.domain;
     frameDoc.write(`
-      ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) ? `
+      ${((_k = brandingConfig2 == null ? void 0 : brandingConfig2.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
+      (_l = brandingConfig2 == null ? void 0 : brandingConfig2.main) == null ? void 0 : _l.brandFont
     )}" as="style">` : ""}
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
       <style data-styles>
@@ -1350,8 +1279,8 @@ class PopupWidget extends Widget {
   _createPopupDialog() {
     var _a2, _b, _c;
     const dialog = document.createElement("dialog");
-    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.popupWidgets;
+    const brandingConfig2 = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+    const sizes = (_c = brandingConfig2 == null ? void 0 : brandingConfig2.widgetSize) == null ? void 0 : _c.popupWidgets;
     const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "auto";
     const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
     dialog.id = this.id;
@@ -1933,6 +1862,351 @@ function _getAutoConfig() {
     }
   };
 }
+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$2 = browserExports.debug("squatch-js:decodeUserJwt");
 function decodeUserJwt(tokenStr) {
   var _a2;
@@ -2168,11 +2442,8 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   async connectedCallback() {
     this.loaded = true;
     this.container = this.getAttribute("container");
-    const skeletonHTML = `
-      <div>
-        <h1>Do I see this text ????</h1>
-      </div>
-    `;
+    brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
+    const skeletonHTML = getSkeleton({});
     const skeletonContainer = document.createElement("div");
     skeletonContainer.id = "loading-skeleton";
     skeletonContainer.innerHTML = skeletonHTML;