@saasquatch/squatch-js 2.8.3-0 → 2.8.3-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -8
- package/coverage/clover.xml +630 -593
- package/coverage/coverage-final.json +22 -20
- package/coverage/lcov.info +1087 -997
- package/dist/squatch.cjs.js +275 -18
- package/dist/squatch.cjs.js.map +1 -1
- package/dist/squatch.esm.js +752 -438
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +70 -61
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +2 -2
- package/dist/types.d.ts +134 -1
- package/dist/utils/logger.d.ts +4 -1
- package/dist/widgets/PopupWidget.d.ts +3 -2
- package/dist/widgets/SkeletonTemplate.d.ts +1 -3
- package/dist/widgets/Widget.d.ts +12 -1
- package/package.json +1 -2
- package/dist/SkeletonTemplate-CIRGs_GB.js +0 -258
- package/dist/SkeletonTemplate-CIRGs_GB.js.map +0 -1
- package/dist/SkeletonTemplate-hwDwv3Ys.cjs +0 -250
- package/dist/SkeletonTemplate-hwDwv3Ys.cjs.map +0 -1
package/dist/squatch.min.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(u,
|
|
1
|
+
(function(u,m){typeof exports=="object"&&typeof module<"u"?m(exports):(u=typeof globalThis<"u"?globalThis:u||self,m(u.squatch={}))})(this,(function(u){"use strict";var ot=Object.defineProperty;var st=(u,m,A)=>m in u?ot(u,m,{enumerable:!0,configurable:!0,writable:!0,value:A}):u[m]=A;var l=(u,m,A)=>st(u,typeof m!="symbol"?m+"":m,A);var ge;let m=null;function A(o){const e=o.replace(/[.+?^${}()|[\]\\]/g,"\\$&").replace(/\*/g,".*");m=new RegExp(`^${e}$`)}function be(){m=null}function E(o){const t=(...e)=>{m&&m.test(o)&&console.log(`[${o}]`,...e)};return Object.defineProperty(t,"enabled",{get(){return!!(m&&m.test(o))}}),t}/*! js-cookie v3.0.5 | MIT */function O(o){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)o[n]=e[n]}return o}var Ee={read:function(o){return o[0]==='"'&&(o=o.slice(1,-1)),o.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(o){return encodeURIComponent(o).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};function Q(o,t){function e(i,s,r){if(!(typeof document>"u")){r=O({},t,r),typeof r.expires=="number"&&(r.expires=new Date(Date.now()+r.expires*864e5)),r.expires&&(r.expires=r.expires.toUTCString()),i=encodeURIComponent(i).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var a="";for(var d in r)r[d]&&(a+="; "+d,r[d]!==!0&&(a+="="+r[d].split(";")[0]));return document.cookie=i+"="+o.write(s,i)+a}}function n(i){if(!(typeof document>"u"||arguments.length&&!i)){for(var s=document.cookie?document.cookie.split("; "):[],r={},a=0;a<s.length;a++){var d=s[a].split("="),c=d.slice(1).join("=");try{var h=decodeURIComponent(d[0]);if(r[h]=o.read(c,h),i===h)break}catch{}}return i?r[i]:r}}return Object.create({set:e,get:n,remove:function(i,s){e(i,"",O({},s,{expires:-1}))},withAttributes:function(i){return Q(this.converter,O({},this.attributes,i))},withConverter:function(i){return Q(O({},this.converter,i),this.attributes)}},{attributes:{value:Object.freeze(t)},converter:{value:Object.freeze(o)}})}var j=Q(Ee,{path:"/"});const I="https://app.referralsaasquatch.com",Y="https://fast.ssqt.io/npm",D="squatch",K="impact";function W(o){if(typeof o!="object")throw new Error("config must be an object");const t=window.squatchTenant,e=Z(),n={tenantAlias:(o==null?void 0:o.tenantAlias)||t,domain:(o==null?void 0:o.domain)||(e==null?void 0:e.domain),npmCdn:(o==null?void 0:o.npmCdn)||(e==null?void 0:e.npmCdn),debug:(o==null?void 0:o.debug)||(e==null?void 0:e.debug)};if(typeof n.tenantAlias!="string")throw new Error("tenantAlias not provided");const i=n.tenantAlias,s=typeof n.domain=="string"&&n.domain||I,r=typeof n.debug=="boolean"&&n.debug||!1,a=typeof n.npmCdn=="string"&&n.npmCdn||Y;return{tenantAlias:i,domain:s,debug:r,npmCdn:a}}function _(o){return typeof o=="object"&&!Array.isArray(o)&&o!==null}function xe(o){if(o&&/^[a-z]{2}_(?:[A-Z]{2}|[0-9]{3})$/.test(o))return o}function oe(o){if(!_(o))throw new Error("Widget properties must be an object");if(!(o!=null&&o.user))throw new Error("Required properties missing.");return o}function se(o){if(!_(o))throw new Error("Widget properties must be an object");return o}function $(){return window.impactToken||window.squatchToken}function Z(){return window.impactConfig||window.squatchConfig}async function Ce(o,t,e,n){const i=n||$(),s={Accept:"application/json","Content-Type":"application/json",...i?{Authorization:`Bearer ${i}`}:{},"X-SaaSquatch-Referrer":window?window.location.href:""};try{const r=await fetch(o,{method:"POST",body:JSON.stringify({query:t,variables:e}),headers:s});if(!r.ok)throw new Error(await r.text());return await r.json()}catch(r){throw r}}async function Ae(o,t=""){const e={Accept:"application/json","Content-Type":"application/json"},n=t||$();n&&(e["X-SaaSquatch-User-Token"]=n);try{const i=await fetch(o,{method:"GET",credentials:"include",headers:e}),s=await i.text();if(!i.ok)throw new Error(s);return s&&JSON.parse(s)}catch(i){throw i}}async function ee(o,t,e){const n={Accept:"application/json","Content-Type":"application/json"},i=e||$();i&&(n["X-SaaSquatch-User-Token"]=i);try{const s=await fetch(o,{method:"POST",body:t,headers:n}),r=await s.text();if(!s.ok)throw new Error(r);return r&&JSON.parse(r)}catch(s){throw s}}async function Ie(o,t,e){const n={Accept:"application/json","Content-Type":"application/json","X-SaaSquatch-Referrer":window?window.location.href:""},i=e||$();i&&(n["X-SaaSquatch-User-Token"]=i);try{const s=await fetch(o,{headers:n,method:"PUT",credentials:"include",body:t}),r=await s.text();if(!s.ok)throw new Error(r);return r&&JSON.parse(r)}catch(s){throw s}}const _e=`\n query renderWidget ($user: UserIdInput, $engagementMedium: UserEngagementMedium, $widgetType: WidgetType, $locale: RSLocale) {\n renderWidget(user: $user, engagementMedium: $engagementMedium, widgetType: $widgetType, locale: $locale) {\n template\n user {\n id\n accountId\n }\n jsOptions\n widgetConfig {\n values\n }\n }\n }\n`;class N{constructor(t){l(this,"tenantAlias");l(this,"domain");l(this,"npmCdn");l(this,"referralCookie",this.squatchReferralCookie);const n=W(t);this.tenantAlias=n.tenantAlias,this.domain=n.domain,this.npmCdn=n.npmCdn}upsertUser(t){const n=oe(t),{widgetType:i,engagementMedium:s="POPUP",jwt:r,locale:a,user:d}=n,c=encodeURIComponent(this.tenantAlias),h=d.accountId?encodeURIComponent(d.accountId):null,p=d.id?encodeURIComponent(d.id):null,g=Te({widgetType:i,engagementMedium:s,locale:a}),w=`/api/v1/${c}/widget/account/${h}/user/${p}/upsert${g}`,f=this.domain+w,b=(j||window.Cookies).get("_saasquatch");return b&&(d.cookies=b),Ie(f,JSON.stringify(d),r)}render(t){const n=se(t),{widgetType:i,engagementMedium:s="POPUP",jwt:r,user:a}=n,d=encodeURIComponent(this.tenantAlias),c=a!=null&&a.accountId?encodeURIComponent(a.accountId):null,h=a!=null&&a.id?encodeURIComponent(a.id):null,p=n.locale??xe(navigator.language.replace(/\-/g,"_")),g=`/api/v1/${d}/graphql`,w=this.domain+g;return new Promise((async(f,b)=>{var x;try{const y=await Ce(w,_e,{user:h&&c?{id:h,accountId:c}:null,engagementMedium:s,widgetType:i,locale:p},r);f((x=y==null?void 0:y.data)==null?void 0:x.renderWidget)}catch(y){b(y)}}))}async squatchReferralCookie(){const t=encodeURIComponent(this.tenantAlias),e=(j||window.Cookies).get("_saasquatch")||"",n=e?`?cookies=${encodeURIComponent(e)}`:"",i=`${this.domain}/a/${t}/widgets/squatchcookiejson${n}`,s=await Ae(i);return Promise.resolve({...s,encodedCookie:e})}}function Te({widgetType:o,engagementMedium:t,locale:e}){const n=new URLSearchParams;return n.append("engagementMedium",t),o&&n.append("widgetType",o),e&&n.append("locale",e),`?${n.toString()}`
|
|
2
2
|
/*!
|
|
3
3
|
* domready (c) Dustin Diaz 2014 - License MIT
|
|
4
4
|
*
|
|
5
|
-
*/}function ee(o,t){let e=[],n,i=o,s=i.documentElement.doScroll,a="DOMContentLoaded",r=(s?/^loaded|^c/:/^loaded|^i|^c/).test(i.readyState);return r||i.addEventListener(a,n=()=>{for(i.removeEventListener(a,n),r=!0;n=e.shift();)n()}),r?setTimeout(t,0):e.push(t)}function N({value:o,unit:t}){switch(t){case"px":return`${o}px`;case"%":return`${o}%`;default:return`${o}px`}}class se{constructor(t){l(this,"domain");var i;const n=Ce(t);this.domain=(n==null?void 0:n.domain)||((i=K())==null?void 0:i.domain)||A}pushAnalyticsLoadEvent(t){if(!t.externalUserId||!t.externalAccountId)return;const e=encodeURIComponent(t.tenantAlias),n=encodeURIComponent(t.externalAccountId),i=encodeURIComponent(t.externalUserId),s=encodeURIComponent(t.engagementMedium),a=t.programId?`&programId=${encodeURIComponent(t.programId)}`:"",r=`/a/${e}/widgets/analytics/loaded?externalAccountId=${n}&externalUserId=${i}&engagementMedium=${s}${a}`,d=this.domain+r;return Z(d,JSON.stringify({}))}pushAnalyticsShareClickedEvent(t){const e=encodeURIComponent(t.tenantAlias),n=encodeURIComponent(t.externalAccountId),i=encodeURIComponent(t.externalUserId),s=encodeURIComponent(t.engagementMedium),a=encodeURIComponent(t.shareMedium),r=`/a/${e}/widgets/analytics/shared?externalAccountId=${n}&externalUserId=${i}&engagementMedium=${s}&shareMedium=${a}`,d=this.domain+r;return Z(d,JSON.stringify({}))}}function Ce(o){if(!I(o))throw new Error("'options' should be an object");return o}const y=k("squatch-js:widget");class ae{constructor(t){l(this,"type");l(this,"content");l(this,"analyticsApi");l(this,"widgetApi");l(this,"context");l(this,"npmCdn");l(this,"container");l(this,"loadEventListener",null);var e;y("widget initializing ..."),this.content=t.content==="error"?this._error(t.rsCode):t.content,this.type=t.type,this.widgetApi=t.api,this.npmCdn=t.npmCdn,this.analyticsApi=new se({domain:t.domain}),this.context=t.context,this.container=((e=t.context)==null?void 0:e.container)||t.container}_findElement(){let t;if(typeof this.container=="string"?(t=document.querySelector(this.container),y("loading widget with selector",t)):this.container instanceof HTMLElement?(t=this.container,y("loading widget with container",t)):this.container?(t=null,y("container must be an HTMLElement or string",this.container)):(t=document.querySelector("#squatchembed")||document.querySelector(".squatchembed")||document.querySelector("#impactembed")||document.querySelector(".impactembed"),y("loading widget with default selector",t)),!(t instanceof HTMLElement))throw new Error(`element with selector '${this.container||"#squatchembed, .squatchembed, #impactembed, or .impactembed"}' not found.'`);return t}_createFrame(t){const e=document.createElement("iframe");return e.squatchJsApi=this,e.id="squatchFrame",e.width="100%",e.src="about:blank",e.scrolling="no",e.setAttribute("style","border: 0; background-color: none; width: 1px; min-width: 100%;"),t!=null&&t.minWidth&&(e.style.minWidth=t.minWidth),t!=null&&t.maxWidth&&(e.style.maxWidth=t.maxWidth),(t!=null&&t.maxWidth||t!=null&&t.minWidth)&&(e.style.width="100%"),t!=null&&t.initialHeight&&(e.height=t.initialHeight),e}_findFrame(){const t=this.container?this._findElement():document.body;return(t.shadowRoot||t).querySelector("iframe#squatchFrame")}_detachLoadEventListener(t){this.loadEventListener&&(t.removeEventListener("sq:user-registration",this.loadEventListener),this.loadEventListener=null)}_attachLoadEventListener(t,e){this.loadEventListener===null&&(this.loadEventListener=n=>{this._loadEvent({...e,userId:n.detail.userId,accountId:n.detail.accountId})},t.addEventListener("sq:user-registration",this.loadEventListener))}_loadEvent(t){var n;if(!t)return;if(!I(t))throw new Error("Widget Load event identity property is not an object");let e;if("programId"in t){if(!t.tenantAlias||!t.accountId||!t.userId||!t.engagementMedium)throw new Error("Widget Load event missing required properties");e={tenantAlias:t.tenantAlias,externalAccountId:t.accountId,externalUserId:t.userId,engagementMedium:t.engagementMedium,programId:t.programId}}else{const{analytics:i,mode:s}=t;e={tenantAlias:i.attributes.tenant,externalAccountId:i.attributes.accountId,externalUserId:i.attributes.userId,engagementMedium:s.widgetMode}}(n=this.analyticsApi.pushAnalyticsLoadEvent(e))==null||n.then((i=>{y(`${e.engagementMedium} loaded event recorded.`)})).catch((i=>{y(`ERROR: pushAnalyticsLoadEvent() ${i}`)}))}_shareEvent(t,e){t&&this.analyticsApi.pushAnalyticsShareClickedEvent({tenantAlias:t.analytics.attributes.tenant,externalAccountId:t.analytics.attributes.accountId,externalUserId:t.analytics.attributes.userId,engagementMedium:t.mode.widgetMode,shareMedium:e}).then((n=>{y(`${t.mode.widgetMode} share ${e} event recorded. ${n}`)})).catch((n=>{y(`ERROR: pushAnalyticsShareClickedEvent() ${n}`)}))}_error(t,e="modal",n=""){return`<!DOCTYPE html>\n \x3c!--[if IE 7]><html class="ie7 oldie" lang="en"><![endif]--\x3e\n \x3c!--[if IE 8]><html class="ie8 oldie" lang="en"><![endif]--\x3e\n \x3c!--[if gt IE 8]>\x3c!--\x3e<html lang="en">\x3c!--<![endif]--\x3e\n <head>\n <link rel="stylesheet" media="all" href="https://fast.ssqt.io/assets/css/widget/errorpage.css">\n <style>\n ${n}\n </style>\n </head>\n <body>\n\n <div class="squatch-container ${e}" style="width:100%">\n <div class="errorheader">\n <button type="button" class="close" onclick="window.frameElement.squatchJsApi.close();">×</button>\n <p class="errortitle">Error</p>\n </div>\n <div class="errorbody">\n <div class="sadface"><img src="https://fast.ssqt.io/assets/images/face.png"></div>\n <h4>Our referral program is temporarily unavailable.</h4><br>\n <p>Please reload the page or check back later.</p>\n <p>If the persists please contact our support team.</p>\n <br>\n <br>\n <div class="right-align errtxt">\n Error Code: ${t}\n </div>\n </div>\n </div>\n </body>\n </html>`}async _findInnerContainer(t){const{contentWindow:e}=t;if(!e)throw new Error("Squatch.js frame inner frame is empty");const n=e.document;function i(){const a=n.getElementsByTagName("sqh-global-container"),r=n.getElementsByClassName("squatch-container");return a.length>0?a[0]:r.length>0?r[0]:null}let s=null;for(let a=0;a<5&&(s=i(),!s);a++)await Ae(100);return s||n.body}reload({email:t,firstName:e,lastName:n},i){const s=this._findFrame();if(!s)throw new Error("Could not find widget iframe");const a=s.contentWindow,r=this.context.engagementMedium||"POPUP";if(!a)throw new Error("Frame needs a content window");let d;if(this.context.type==="upsert"){if(!this.context.user)throw new Error("Can't reload without user ids");let c={email:t||null,firstName:e||null,lastName:n||null,id:this.context.user.id,accountId:this.context.user.accountId};d=this.widgetApi.upsertUser({user:c,engagementMedium:r,widgetType:this.type,jwt:i})}else if(this.context.type==="passwordless")d=this.widgetApi.render({user:void 0,engagementMedium:r,widgetType:this.type,jwt:void 0});else throw new Error("can't reload an error widget");d.then((({template:c})=>{c&&(this.content=c,this.__deprecated__register(s,{email:t,engagementMedium:r},(()=>{this.load(),r==="POPUP"&&this.open()})))})).catch((({message:c})=>{y(`${c}`)}))}__deprecated__register(t,e,n){const s=t.contentWindow.document,a=s.createElement("button"),r=s.getElementsByClassName("squatch-register")[0];if(r){a.className="btn btn-primary",a.id="show-stats-btn",a.textContent=this.type==="REFERRER_WIDGET"?"Show Stats":"Show Reward";const d=e.engagementMedium==="POPUP"?"margin-top: 10px; max-width: 130px; width: 100%;":"margin-top: 10px;";a.setAttribute("style",d),a.onclick=n,r.style.paddingTop="30px",r.innerHTML=`<p><strong>${e.email}</strong><br>Has been successfully registered</p>`,r.appendChild(a)}}}function Ae(o){return new Promise((t=>{setTimeout(t,o)}))}const _=k("squatch-js:EMBEDwidget");class q extends ae{constructor(e,n){super(e);l(this,"show",this.open);l(this,"hide",this.close);n&&(this.container=n)}async load(){var m,f,w,b,M,E,ge;const e=(f=(m=this.context.widgetConfig)==null?void 0:m.values)==null?void 0:f.brandingConfig,n=e==null?void 0:e.loadingHeight,i=(w=e==null?void 0:e.widgetSize)==null?void 0:w.embeddedWidgets,s=i!=null&&i.maxWidth?N(i.maxWidth):"",a=i!=null&&i.minWidth?N(i.minWidth):"",r=this._createFrame({minWidth:a,maxWidth:s,initialHeight:n}),d=this._findElement();(b=this.context)!=null&&b.container&&(d.style.visibility="hidden",d.style.height="0",d.style["overflow-y"]="hidden"),this.container?d.shadowRoot?((M=d.shadowRoot.lastChild)==null?void 0:M.nodeName)==="IFRAME"?d.shadowRoot.replaceChild(r,d.shadowRoot.lastChild):d.shadowRoot.appendChild(r):d.firstChild?d.replaceChild(r,d.firstChild):d.appendChild(r):(!d.firstChild||d.firstChild.nodeName==="#text")&&d.appendChild(r);const{contentWindow:c}=r;if(!c)throw new Error("Frame needs a content window");const h=c.document;h.open();const p=this.widgetApi.domain;h.write(`\n ${(E=e==null?void 0:e.main)!=null&&E.brandFont?`\n <link rel="preconnect" href="https://fast${p==="https://staging.referralsaasquatch.com"&&"-staging"}.ssqt.io">\n <link rel="preconnect" href="https://fonts.gstatic.com">\n <link rel="preconnect" href="https://fonts.googleapis.com">\n <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent((ge=e==null?void 0:e.main)==null?void 0:ge.brandFont)}" as="style">`:""}\n <link rel="dns-prefetch" href="https://res.cloudinary.com">\n <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>\n <style data-styles>\n html { visibility:hidden;}\n </style>\n ${this.content}\n\n `),h.close(),ee(h,(async()=>{const me=c.squatch||c.widgetIdent;r.height=n||h.body.scrollHeight;const Ge=new ResizeObserver((Xe=>{for(const Qe of Xe){const{height:Ye}=Qe.contentRect;r.height=Ye}})),Ve=await this._findInnerContainer(r);Ge.observe(Ve),this._shouldFireLoadEvent()?(this._loadEvent(me),_("loaded")):h&&this._attachLoadEventListener(h,me)}))}open(){const e=this._findFrame();if(!e)return _("no target element to open");if(!e.contentWindow)return _("Frame needs a content window");const n=this._findElement();n.style.visibility="unset",n.style.height="auto",n.style["overflow-y"]="auto",e.contentWindow.document.dispatchEvent(new CustomEvent("sq:refresh"));const i=e.contentWindow.squatch||e.contentWindow.widgetIdent;if(this.context.user)this._loadEvent(i),_("loaded");else{if(!e.contentDocument)return;this._attachLoadEventListener(e.contentDocument,i)}}close(){const e=this._findFrame();if(!e)return _("no target element to close");e.contentDocument&&this._detachLoadEventListener(e.contentDocument);const n=this._findElement();n.style.visibility="hidden",n.style.height="0",n.style["overflow-y"]="hidden",_("Embed widget closed")}_error(e,n="embed",i=""){return super._error(e,n,i)}_shouldFireLoadEvent(){const e=!this.container,n=this.container instanceof HTMLElement&&(this.container.tagName.startsWith("SQUATCH-")||this.container.tagName.startsWith("IMPACT-"));return!!this.context.user&&(e||n)}}const $=k("squatch-js:POPUPwidget");let F=0;class R extends ae{constructor(e,n=".squatchpop"){super(e);l(this,"trigger");l(this,"id");l(this,"show",this.open);l(this,"hide",this.close);this.trigger=n,this.container?this.id="squatchModal":(this.id=F===0?"squatchModal":`squatchModal__${F}`,F=F+1),document.head.insertAdjacentHTML("beforeend",`<style>#${this.id}::-webkit-scrollbar { display: none; }</style>`)}_initialiseCTA(){if(!this.trigger)return;let e;try{e=document.querySelector(this.trigger)||document.querySelector(".impactpop"),this.trigger&&!e&&$("No element found with trigger selector",this.trigger)}catch{$("Not a valid selector",this.trigger)}e&&(e.onclick=()=>{this.open()})}_createPopupDialog(e){var d;const n=document.createElement("dialog"),i=(d=e==null?void 0:e.widgetSize)==null?void 0:d.popupWidgets,s=i!=null&&i.minWidth?N(i.minWidth):"auto",a=i!=null&&i.maxWidth?N(i.maxWidth):"500px";n.id=this.id,n.setAttribute("style",`width: 100%; min-width: ${s}; max-width: ${a}; border: none; padding: 0;`);const r=c=>{c.stopPropagation(),c.target===n&&n.close()};return n.addEventListener("click",r),n}async load(){var p,m,f,w,b;const e=(m=(p=this.context.widgetConfig)==null?void 0:p.values)==null?void 0:m.brandingConfig,n=e==null?void 0:e.loadingHeight,i=this._createFrame({initialHeight:n});this._initialiseCTA();const s=this.container?this._findElement():document.body,a=s.shadowRoot||s,r=this._createPopupDialog(e);r.appendChild(i),((f=a.lastChild)==null?void 0:f.nodeName)==="DIALOG"?a.replaceChild(r,a.lastChild):a.appendChild(r);const{contentWindow:d}=i;if(!d)throw new Error("Frame needs a content window");const c=d.document;c.open();const h=this.widgetApi.domain;c.write(`\n ${(w=e==null?void 0:e.main)!=null&&w.brandFont?`\n <link rel="preconnect" href="https://fast${h==="https://staging.referralsaasquatch.com"&&"-staging"}.ssqt.io">\n <link rel="preconnect" href="https://fonts.gstatic.com">\n <link rel="preconnect" href="https://fonts.googleapis.com">\n <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent((b=e==null?void 0:e.main)==null?void 0:b.brandFont)}" as="style">`:""}\n <link rel="dns-prefetch" href="https://res.cloudinary.com">\n <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>\n <style data-styles>\n html { visibility:hidden;}\n </style>\n ${this.content}\n\n `),c.close(),$("Popup template loaded into iframe"),await this._setupResizeHandler(i,n)}async _setupResizeHandler(e,n){const{contentWindow:i}=e;if(!i)throw new Error("Frame needs a content window");const s=i.document;ee(s,(async()=>{s.body.style.overflowY="hidden",e.height=n||s.body.offsetHeight,new ResizeObserver((r=>{for(const d of r){const{top:c,bottom:h}=d.contentRect,p=h+c;e.height=p+"",d.target.style=""}})).observe(await this._findInnerContainer(e))}))}open(){const e=this.container?this._findElement():document.body,i=(e.shadowRoot||e).querySelector(`#${this.id}`);if(!i)throw new Error("Could not determine container div");i.showModal();const s=this._findFrame();if(!s)throw new Error("Could not find iframe");const{contentWindow:a}=s;if(!a)throw new Error("Squatch.js has an empty iframe");const r=a.document;ee(r,(()=>{var c;const d=a.squatch||a.widgetIdent;(c=s.contentDocument)==null||c.dispatchEvent(new CustomEvent("sq:refresh")),this.context.user?(this._loadEvent(d),$("Popup opened")):this._attachLoadEventListener(r,d)}))}close(){const e=this._findFrame();e!=null&&e.contentDocument&&this._detachLoadEventListener(e.contentDocument);const n=this.container?this._findElement():document.body,s=(n.shadowRoot||n).querySelector(`#${this.id}`);if(!s)throw new Error("Could not determine container div");s.close(),$("Popup closed")}_clickedOutside({target:e}){}_error(e,n="modal",i=""){return super._error(e,n,i||"body { margin: 0; } .modal { box-shadow: none; border: 0; }")}}const v=k("squatch-js:widgets");class U{constructor(t){l(this,"api");l(this,"tenantAlias");l(this,"domain");l(this,"npmCdn");const e=T(t);this.tenantAlias=e.tenantAlias,this.domain=e.domain,this.npmCdn=e.npmCdn,this.api=new D(e)}async upsertUser(t){const n=ie(t);try{const i=await this.api.upsertUser(n);return{widget:this._renderWidget(i,n,{type:"upsert",user:n.user,engagementMedium:t.engagementMedium,container:t.container,trigger:t.trigger,widgetConfig:{values:{brandingConfig:i==null?void 0:i.brandingConfig}}}),user:i.user}}catch(i){throw v(i),i.apiErrorCode&&this._renderErrorWidget(i,t.engagementMedium),new Error(i)}}async render(t){const n=oe(t);try{const i=await this.api.render(n);return{widget:this._renderWidget(i,n,{type:"passwordless",engagementMedium:n.engagementMedium,container:n.container,trigger:n.trigger,widgetConfig:i==null?void 0:i.widgetConfig}),user:i.user}}catch(i){throw i.apiErrorCode&&this._renderErrorWidget(i,n.engagementMedium),new Error(i)}}async autofill(t){const e=t;if(typeof e=="function"){try{const s=await this.api.squatchReferralCookie();e(s)}catch(s){throw v("Autofill error",s),new Error(s)}return}if(typeof e!="string")throw new Error("Autofill accepts a string or function");let n=document.querySelectorAll(e),i;if(n.length>0)i=n[0];else throw v("Element id/class or function missing"),new Error("Element id/class or function missing");try{const s=await this.api.squatchReferralCookie();i.value=s.codes[0]}catch(s){throw new Error(s)}}_renderWidget(t,e,n){var d;if(v("Rendering Widget..."),!t)throw new Error("Unable to get a response");let i,s=!!e.displayOnLoad;const a=t.jsOptions||{},r={content:t.template,type:e.widgetType||((d=a.widget)==null?void 0:d.defaultWidgetType),api:this.api,domain:this.domain,npmCdn:this.npmCdn,context:n};return a.widgetUrlMappings&&a.widgetUrlMappings.forEach((c=>{var h,p;U._matchesUrl(c.url)&&(c.widgetType!=="CONVERSION_WIDGET"||(p=(h=t.user)==null?void 0:h.referredBy)!=null&&p.code?(s=c.displayOnLoad,v(`Display ${c.widgetType} on ${c.url}`)):v(`Don't display ${c.widgetType} when no referral on widget rule match ${c.url}`))})),a.fuelTankAutofillUrls&&(v("We found a fuel tank autofill!"),a.fuelTankAutofillUrls.forEach((({url:c,formSelector:h})=>{var p,m,f;if(U._matchesUrl(c)&&(v("Fuel Tank URL matches"),(m=(p=t.user)==null?void 0:p.referredBy)!=null&&m.code)){const w=document.querySelector(h);w?w.value=((f=t.user.referredBy.referredReward)==null?void 0:f.fuelTankCode)||"":v(new Error(`Element with id/class ${h} was not found.`))}}))),e.engagementMedium==="EMBED"?i=this._renderEmbedWidget(r):(i=this._renderPopupWidget(r),s&&i.open()),i}_renderPopupWidget(t){const e=new R(t,t.context.trigger);return e.load(),e}_renderEmbedWidget(t){const e=new q(t,t.context.container);return e.load(),e}_renderErrorWidget(t,e="POPUP"){const{apiErrorCode:n,rsCode:i,message:s}=t;v(new Error(`${n} (${i}) ${s}`));const a={content:"error",rsCode:i,api:this.api,domain:this.domain,npmCdn:this.npmCdn,type:"ERROR_WIDGET",context:{type:"error"}};let r;e==="EMBED"?(r=new q(a),r.load()):e==="POPUP"&&(r=new R(a),r.load())}static _matchesUrl(t){return!!window.location.href.match(new RegExp(t))}}class Ie{constructor(t){l(this,"tenantAlias");l(this,"domain");const n=T(t);this.tenantAlias=n.tenantAlias,this.domain=n.domain}track(t,e){const n=t,i=e,s=_e(n),{jwt:a}=Te(i),r=encodeURIComponent(this.tenantAlias),d=encodeURIComponent(s.userId),c=encodeURIComponent(s.accountId),h=`/api/v1/${r}/open/account/${c}/user/${d}/events`,p=this.domain+h;return Z(p,JSON.stringify(s),a)}}function _e(o){if(!I(o))throw new Error("tracking parameter must be an object");if(!(o!=null&&o.accountId))throw new Error("accountId field is required");if(!(o!=null&&o.events))throw new Error("events field is required");if(!(o!=null&&o.userId))throw new Error("userId field is required");const t=o;if(!Array.isArray(t.events))throw new Error("'events' should be an array");return t}function Te(o){if(!I(o))throw new Error("'options' should be an object");return o}function We(){var i;const o=window[Y]?Y:j,t=((i=window["_"+o])==null?void 0:i.ready)||[],e=window.impactOnReady||window.squatchOnReady,n=[...t,e].filter((s=>!!s));setTimeout((()=>{window[j]&&(window[Y]=window[j],n.forEach((s=>s())),window[j]._auto(),window["_"+o]=void 0,delete window["_"+o])}),0)}const x=k("squatch-js"),re=o=>typeof o=="object"&&!Array.isArray(o),de=(o,t)=>{const e=i=>re(t[i])&&o.hasOwnProperty(i)&&re(o[i]),n=Object.getOwnPropertyNames(t).map((i=>({[i]:e(i)?de(o[i],t[i]):t[i]}))).reduce(((i,s)=>({...i,...s})),{});return{...o,...n}};function H(o){const t=atob(o.replace(/_/g,"/").replace(/-/g,"+")),e=new Uint8Array(t.length);for(let n=0;n<t.length;n++)e[n]=t.charCodeAt(n);return new TextDecoder("utf8").decode(e)}function ce(o){const t=(new TextEncoder).encode(o),e=Array.from(t,(n=>String.fromCodePoint(n))).join("");return btoa(e).replace(/=/g,"").replace(/\+/g,"-").replace(/\//g,"_")}function qe(){var o,t,e="weird_get_top_level_domain=cookie",n=document.location.hostname.split(".");for(o=n.length-1;o>=0;o--)if(t=n.slice(o).join("."),document.cookie=e+";domain=."+t+";",document.cookie.indexOf(e)>-1)return document.cookie=e.split("=")[0]+"=;domain=."+t+";expires=Thu, 01 Jan 1970 00:00:01 GMT;",t}function $e(){const o=window.location.search,e=new URLSearchParams(o).get("_saasquatch")||"";if(e){let n="",i="",s="";try{n=JSON.parse(H(e))}catch(a){x("Unable to decode params",a);return}try{i=JSON.parse(H(O.get("_saasquatch"))),x("existing cookie",i)}catch(a){x("Unable to retrieve cookie",a)}try{const a=qe();if(x("domain retrieved:",a),i){const r=de(i,n);s=ce(JSON.stringify(r)),x("cookie to store:",r)}else s=ce(JSON.stringify(n)),x("cookie to store:",n);O.set("_saasquatch",s,{expires:365,secure:!1,sameSite:"Lax",domain:a,path:"/"})}catch(a){x("Unable to set cookie",a)}}}const J=k("squatch-js");function Re(){var p;const o=window.location.search,e=new URLSearchParams(o).get("_saasquatchExtra")||"";if(!e){J("No _saasquatchExtra param");return}const n=T({tenantAlias:"UNKNOWN"});if(!n.domain){J("domain must be provided in config to use _saasquatchExtra");return}let i;try{i=JSON.parse(H(e))}catch{J("Unable to decode _saasquatchExtra config");return}function s(m){return m.replace(/^https?:\/\//,"")}const a=s(n.domain),r=Object.keys((i==null?void 0:i[a])||{})[0],d=(p=i==null?void 0:i[a])==null?void 0:p[r];if(!d){J("_saasquatchExtra did not have an expected structure");return}const{autoPopupWidgetType:c,...h}=d;return{widgetConfig:{widgetType:c,displayOnLoad:!0,...h},squatchConfig:{...n,tenantAlias:r}}}const Ue=k("squatch-js:decodeUserJwt");function Pe(o){var t;try{const e=o.split(".")[1];if(e===void 0)return null;const n=H(e);return(t=JSON.parse(n))==null?void 0:t.user}catch(e){return Ue(e),null}}const le=k("squatch-js:DeclarativeWidget");class he extends HTMLElement{constructor(){super();l(this,"config");l(this,"token");l(this,"tenant");l(this,"widgetType");l(this,"locale");l(this,"widgetApi");l(this,"analyticsApi");l(this,"widgetInstance");l(this,"type");l(this,"container");l(this,"element");l(this,"loaded");l(this,"_setWidget",((e,n)=>{var s;const i={api:this.widgetApi,content:e.template,context:{type:n.type,user:n.user,container:this.container||void 0,engagementMedium:this.type,widgetConfig:e.widgetConfig},type:this.widgetType,domain:((s=this.config)==null?void 0:s.domain)||A,npmCdn:Q,container:this};if(this.type==="EMBED")return new q(i);{const a=this.firstChild?null:void 0;return new R(i,a)}}));l(this,"setErrorWidget",(e=>{var i;const n={api:this.widgetApi,content:"error",context:{type:"error",container:this.container||void 0},type:"ERROR_WIDGET",domain:((i=this.config)==null?void 0:i.domain)||A,npmCdn:Q,container:this};if(this.type==="EMBED")return new q(n);{const s=this.firstChild?null:void 0;return new R(n,s)}}));l(this,"reload",this.renderWidget);l(this,"show",this.open);l(this,"hide",this.close);this.attachShadow({mode:"open"}).innerHTML="<style>:host { display: block; }</style><slot></slot>",this.config=K(),this.token=W(),this.tenant=window.squatchTenant,this.container=this}_setupApis(e){var n,i;if(!this.tenant)throw new Error("tenantAlias not provided");this.widgetApi=new D({tenantAlias:(e==null?void 0:e.tenantAlias)||this.tenant,domain:(e==null?void 0:e.domain)||((n=this.config)==null?void 0:n.domain)||A}),this.analyticsApi=new se({domain:(e==null?void 0:e.domain)||((i=this.config)==null?void 0:i.domain)||A})}getWidgetType(e){return e&&(e.includes("websiteReferralWidget")||e.includes("friendWidget"))?"instant-access":"verified-access"}async renderPasswordlessVariant(){return this._setupApis(),le("Rendering as an Instant Access widget"),await this.widgetApi.render({engagementMedium:this.type,widgetType:this.widgetType,locale:this.locale}).then((e=>this._setWidget(e,{type:"passwordless"}))).catch(this.setErrorWidget)}async renderUserUpsertVariant(){this._setupApis();const e=Pe(this.token);return e?(le("Rendering as a Verified widget"),await this.widgetApi.upsertUser({user:e,locale:this.locale,engagementMedium:this.type,widgetType:this.widgetType,jwt:this.token}),await this.widgetApi.render({locale:this.locale,engagementMedium:this.type,widgetType:this.widgetType}).then((i=>this._setWidget(i,{type:"upsert",user:e}))).catch(this.setErrorWidget)):this.setErrorWidget(Error("No user object in token."))}async getWidgetInstance(){let e;if(this.widgetType=this.getAttribute("widget")||void 0,this.locale=this.getAttribute("locale")||this.locale,!this.widgetType)throw new Error("No widget has been specified");return this.token?e=await this.renderUserUpsertVariant():e=await this.renderPasswordlessVariant(),this.widgetInstance=e,this.widgetInstance&&this.dispatchEvent(new CustomEvent("sq:widget-loaded")),e}async renderWidget(){await this.getWidgetInstance(),await this.widgetInstance.load()}open(){if(!this.widgetInstance)throw new Error("Widget has not loaded yet");this.widgetInstance.open()}close(){if(!this.widgetInstance)throw new Error("Widget has not loaded yet");this.widgetInstance.close()}static get observedAttributes(){return["widget","locale"]}attributeChangedCallback(e,n,i){if(!(n===i||!this.loaded))switch(e){case"locale":case"widget":this.connectedCallback();break}}async connectedCallback(){this.loaded=!0,this.container=this.getAttribute("container"),this.widgetType=this.getAttribute("widget")||void 0;const e=this.getWidgetType(this.widgetType),{getSkeleton:n}=await Promise.resolve().then((()=>ze)),i=n({height:"100%",type:e}),s=document.createElement("div");s.id="loading-skeleton",s.innerHTML=i;const a=this.shadowRoot||this.attachShadow({mode:"open"});if(this.type==="POPUP"){const d=a.getElementById("#squatchModal");d&&(d.innerHTML="",d.appendChild(s))}else a.innerHTML="",a.appendChild(s);await this.renderWidget();const r=a.getElementById("loading-skeleton");r&&r.remove(),this.getAttribute("open")!==null&&this.open()}}class te extends he{constructor(){super(),this.type="EMBED",this.loaded=!1}}class ne extends he{constructor(){super(),this.type="POPUP",this.loaded=!1,this.addEventListener("click",(t=>{t.stopPropagation(),this.open()}))}}class Se extends te{}class Me extends ne{}class Le extends te{}class Oe extends ne{}window.customElements.get("squatch-embed")||window.customElements.define("squatch-embed",Se),window.customElements.get("impact-embed")||window.customElements.define("impact-embed",Le),window.customElements.get("squatch-popup")||window.customElements.define("squatch-popup",Me),window.customElements.get("impact-popup")||window.customElements.define("impact-popup",Oe);function je(){console.log("Having trouble using Squatch.js? Go to https://docs.referralsaasquatch.com/developer/ for tutorials, references and error codes.")}const P=k("squatch-js");let B=null,z=null,G=null;function De(){return B||S({}),B}function V(){return z||S({}),z}function Ne(){return G||S({}),G}function Fe(o){var t;return(t=V())==null?void 0:t.render(o)}function He(){var t;const o=Re();if(o){const{squatchConfig:e,widgetConfig:n}=o;return S(e),(t=V())==null?void 0:t.render(n)}}function S(o){const e=T(o);e.tenantAlias.match("^test")||e.debug?C("squatch-js*"):fe(),P("initializing ..."),B=new D(e),z=new U(e),G=new Ie(e),P("Widget API instance",B),P("Widgets instance",z),P("Events API instance",G)}function Je(o){o()}function Be(o){V().autofill(o)}function ue(){$e()}typeof document<"u"&&!window.SaaSquatchDoNotAutoDrop&&ue(),(pe=window.squatch)!=null&&pe.init&&P("Squatchjs is being loaded more than once. This may lead to multiple load events being sent, duplicated widgets, and inaccurate analytics."),typeof document<"u"&&We();const ze=Object.freeze(Object.defineProperty({__proto__:null,getSkeleton:({type:o="verified-access",height:t="500px",skeletonBackgroundColor:e="#e0e0e0",skeletonShimmerColor:n="#f5f5f5"})=>`\n <style>\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n .widget-container {\n background: white;\n width: 100%;\n padding: 40px;\n box-sizing: border-box;\n overflow: hidden; \n }\n\n @keyframes shimmer {\n 0% { background-position: -100% 0; }\n 100% { background-position: 100% 0; }\n }\n\n .skeleton {\n background: ${e};\n background: linear-gradient(\n 90deg,\n ${e} 25%,\n ${n} 50%,\n ${e} 75%\n );\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite linear;\n border-radius: 6px;\n margin-bottom: 12px;\n }\n\n /* Typography Skeletons */\n .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }\n .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }\n .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }\n .sk-text-short { width: 40%; }\n .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }\n\n /* Layouts */\n .hero-section {\n display: flex;\n gap: 40px;\n margin-bottom: 40px;\n padding-bottom: 40px;\n flex-direction: row;\n height: 100%;\n /* Removed border-bottom */\n }\n \n .hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n \n .hero-image {\n flex: 1;\n height: 300px;\n border-radius: 12px;\n }\n\n /* -- Specific Instant Access Overrides -- */\n .instant-access-layout {\n margin-bottom: 0;\n padding-bottom: 0;\n align-items: center; \n }\n .ia-image {\n height: 400px; \n }\n .ia-center {\n margin-left: auto;\n margin-right: auto;\n }\n .ia-content {\n align-items: center; \n text-align: center;\n }\n .sk-btn-action {\n height: 45px;\n width: 140px;\n border-radius: 6px;\n margin: 24px auto;\n }\n .input-group {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 400px;\n }\n .sk-btn-copy {\n height: 50px;\n width: 120px;\n border-radius: 8px;\n }\n /* ------------------------------------- */\n\n .share-section { margin-bottom: 40px; }\n .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }\n \n .social-buttons { display: flex; gap: 12px; }\n .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }\n\n .stats-section {\n display: flex;\n gap: 24px;\n margin-bottom: 40px;\n padding: 30px 0;\n /* Removed border-top and border-bottom */\n }\n .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }\n .stat-divider { padding-left: 24px; }\n .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }\n .sk-stat-label { height: 18px; width: 80px; }\n\n /* Table Styles */\n .table-header { display: flex; gap: 16px; margin-bottom: 16px; }\n .sk-th { height: 16px; }\n .table-row { \n display: flex; \n align-items: center; \n gap: 16px; \n padding: 16px 0; \n /* Removed border-bottom */\n }\n \n .col-user { flex: 2; }\n .col-status { flex: 1; }\n .col-reward { flex: 2; }\n .col-date { flex: 1; }\n\n .sk-badge { height: 28px; width: 90px; border-radius: 14px; }\n .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }\n\n .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }\n .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }\n\n @media (max-width: 768px) {\n body { padding: 20px; }\n .widget-container { padding: 24px; }\n\n .hero-section { flex-direction: column-reverse; gap: 24px; }\n .instant-access-layout { flex-direction: column; }\n \n .hero-image { height: 220px; width: 100%; }\n .sk-title-lg { width: 100%; }\n\n .col-date { display: none; }\n }\n </style>\n\n <div class="widget-container">\n ${o==="verified-access"?`\n <div class="hero-section">\n <div class="hero-content">\n <div class="skeleton sk-title-lg"></div>\n <div class="skeleton sk-text"></div>\n <div class="skeleton sk-text sk-text-short"></div>\n </div>\n <div class="skeleton hero-image"></div>\n </div>\n\n <div class="share-section">\n <div class="skeleton sk-label"></div>\n <div class="skeleton sk-input"></div>\n <div class="social-buttons">\n <div class="skeleton sk-btn-social"></div>\n <div class="skeleton sk-btn-social"></div>\n <div class="skeleton sk-btn-social"></div>\n <div class="skeleton sk-btn-social"></div>\n </div>\n </div>\n\n <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>\n <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>\n\n <div class="stats-section">\n <div class="stat-card">\n <div class="skeleton sk-stat-num"></div>\n <div class="skeleton sk-stat-label"></div>\n </div>\n <div class="stat-card stat-divider">\n <div class="skeleton sk-stat-num"></div>\n <div class="skeleton sk-stat-label"></div>\n </div>\n </div>\n\n <div class="skeleton sk-title-md"></div>\n\n <div class="table-header">\n <div class="skeleton sk-th col-user"></div>\n <div class="skeleton sk-th col-status"></div>\n <div class="skeleton sk-th col-reward"></div>\n <div class="skeleton sk-th col-date"></div>\n </div>\n\n <div class="table-row">\n <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>\n <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>\n <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>\n <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>\n </div>\n \n <div class="table-row">\n <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>\n <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>\n <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>\n <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>\n </div>\n\n <div class="table-row">\n <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>\n <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>\n <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>\n <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>\n </div>\n\n <div class="pagination">\n <div class="skeleton sk-btn-page"></div>\n <div class="skeleton sk-btn-page"></div>\n </div>\n `:`\n <div class="hero-section instant-access-layout">\n <div class="skeleton hero-image ia-image"></div>\n \n <div class="hero-content ia-content">\n <div class="skeleton sk-title-lg ia-center"></div>\n <div class="skeleton sk-text ia-center"></div>\n \n <div class="skeleton sk-btn-action"></div>\n\n <div class="skeleton sk-label"></div>\n <div class="input-group">\n <div class="skeleton sk-input"></div>\n <div class="skeleton sk-btn-copy"></div>\n </div>\n\n <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>\n <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>\n </div>\n </div>\n `}\n </div>\n `},Symbol.toStringTag,{value:"Module"}));u.DeclarativeEmbedWidget=te,u.DeclarativePopupWidget=ne,u.EmbedWidget=q,u.PopupWidget=R,u.WidgetApi=D,u.Widgets=U,u._auto=He,u.api=De,u.autofill=Be,u.events=Ne,u.help=je,u.init=S,u.pushCookie=ue,u.ready=Je,u.widget=Fe,u.widgets=V,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
|
|
5
|
+
*/}function te(o,t){let e=[],n,i=o,s=i.documentElement.doScroll,r="DOMContentLoaded",a=(s?/^loaded|^c/:/^loaded|^i|^c/).test(i.readyState);return a||i.addEventListener(r,n=()=>{for(i.removeEventListener(r,n),a=!0;n=e.shift();)n()}),a?setTimeout(t,0):e.push(t)}function F({value:o,unit:t}){switch(t){case"px":return`${o}px`;case"%":return`${o}%`;default:return`${o}px`}}class re{constructor(t){l(this,"domain");var i;const n=We(t);this.domain=(n==null?void 0:n.domain)||((i=Z())==null?void 0:i.domain)||I}pushAnalyticsLoadEvent(t){if(!t.externalUserId||!t.externalAccountId)return;const e=encodeURIComponent(t.tenantAlias),n=encodeURIComponent(t.externalAccountId),i=encodeURIComponent(t.externalUserId),s=encodeURIComponent(t.engagementMedium),r=t.programId?`&programId=${encodeURIComponent(t.programId)}`:"",a=`/a/${e}/widgets/analytics/loaded?externalAccountId=${n}&externalUserId=${i}&engagementMedium=${s}${r}`,d=this.domain+a;return ee(d,JSON.stringify({}))}pushAnalyticsShareClickedEvent(t){const e=encodeURIComponent(t.tenantAlias),n=encodeURIComponent(t.externalAccountId),i=encodeURIComponent(t.externalUserId),s=encodeURIComponent(t.engagementMedium),r=encodeURIComponent(t.shareMedium),a=`/a/${e}/widgets/analytics/shared?externalAccountId=${n}&externalUserId=${i}&engagementMedium=${s}&shareMedium=${r}`,d=this.domain+a;return ee(d,JSON.stringify({}))}}function We(o){if(!_(o))throw new Error("'options' should be an object");return o}const ae=({type:o="verified-access",height:t="500px"})=>{const e="#e0e0e0";return`\n <style>\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n .widget-container {\n background: white;\n width: 100%;\n padding: 40px;\n box-sizing: border-box;\n overflow: hidden; \n }\n\n @keyframes shimmer {\n 0% { background-position: -100% 0; }\n 100% { background-position: 100% 0; }\n }\n\n .skeleton {\n background: ${e};\n background: linear-gradient(\n 90deg,\n ${e} 25%,\n #f5f5f5 50%,\n ${e} 75%\n );\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite linear;\n border-radius: 6px;\n margin-bottom: 12px;\n }\n\n /* Typography Skeletons */\n .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }\n .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }\n .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }\n .sk-text-short { width: 40%; }\n .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }\n\n /* Layouts */\n .hero-section {\n display: flex;\n gap: 40px;\n margin-bottom: 40px;\n padding-bottom: 40px;\n flex-direction: row;\n height: 100%;\n /* Removed border-bottom */\n }\n \n .hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n \n .hero-image {\n flex: 1;\n height: 300px;\n border-radius: 12px;\n }\n\n /* -- Specific Instant Access Overrides -- */\n .instant-access-layout {\n margin-bottom: 0;\n padding-bottom: 0;\n align-items: center; \n }\n .ia-image {\n height: 400px; \n }\n .ia-center {\n margin-left: auto;\n margin-right: auto;\n }\n .ia-content {\n align-items: center; \n text-align: center;\n }\n .sk-btn-action {\n height: 45px;\n width: 140px;\n border-radius: 6px;\n margin: 24px auto;\n }\n .input-group {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 400px;\n }\n .sk-btn-copy {\n height: 50px;\n width: 120px;\n border-radius: 8px;\n }\n /* ------------------------------------- */\n\n .share-section { margin-bottom: 40px; }\n .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }\n \n .social-buttons { display: flex; gap: 12px; }\n .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }\n\n .stats-section {\n display: flex;\n gap: 24px;\n margin-bottom: 40px;\n padding: 30px 0;\n /* Removed border-top and border-bottom */\n }\n .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }\n .stat-divider { padding-left: 24px; }\n .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }\n .sk-stat-label { height: 18px; width: 80px; }\n\n /* Table Styles */\n .table-header { display: flex; gap: 16px; margin-bottom: 16px; }\n .sk-th { height: 16px; }\n .table-row { \n display: flex; \n align-items: center; \n gap: 16px; \n padding: 16px 0; \n /* Removed border-bottom */\n }\n \n .col-user { flex: 2; }\n .col-status { flex: 1; }\n .col-reward { flex: 2; }\n .col-date { flex: 1; }\n\n .sk-badge { height: 28px; width: 90px; border-radius: 14px; }\n .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }\n\n .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }\n .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }\n\n @media (max-width: 768px) {\n body { padding: 20px; }\n .widget-container { padding: 24px; }\n\n .hero-section { flex-direction: column-reverse; gap: 24px; }\n .instant-access-layout { flex-direction: column; }\n \n .hero-image { height: 220px; width: 100%; }\n .sk-title-lg { width: 100%; }\n\n .col-date { display: none; }\n }\n </style>\n\n <div class="widget-container">\n ${o==="verified-access"?`\n <div class="hero-section">\n <div class="hero-content">\n <div class="skeleton sk-title-lg"></div>\n <div class="skeleton sk-text"></div>\n <div class="skeleton sk-text sk-text-short"></div>\n </div>\n <div class="skeleton hero-image"></div>\n </div>\n\n <div class="share-section">\n <div class="skeleton sk-label"></div>\n <div class="skeleton sk-input"></div>\n <div class="social-buttons">\n <div class="skeleton sk-btn-social"></div>\n <div class="skeleton sk-btn-social"></div>\n <div class="skeleton sk-btn-social"></div>\n <div class="skeleton sk-btn-social"></div>\n </div>\n </div>\n\n <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>\n <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>\n\n <div class="stats-section">\n <div class="stat-card">\n <div class="skeleton sk-stat-num"></div>\n <div class="skeleton sk-stat-label"></div>\n </div>\n <div class="stat-card stat-divider">\n <div class="skeleton sk-stat-num"></div>\n <div class="skeleton sk-stat-label"></div>\n </div>\n </div>\n\n <div class="skeleton sk-title-md"></div>\n\n <div class="table-header">\n <div class="skeleton sk-th col-user"></div>\n <div class="skeleton sk-th col-status"></div>\n <div class="skeleton sk-th col-reward"></div>\n <div class="skeleton sk-th col-date"></div>\n </div>\n\n <div class="table-row">\n <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>\n <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>\n <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>\n <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>\n </div>\n \n <div class="table-row">\n <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>\n <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>\n <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>\n <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>\n </div>\n\n <div class="table-row">\n <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>\n <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>\n <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>\n <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>\n </div>\n\n <div class="pagination">\n <div class="skeleton sk-btn-page"></div>\n <div class="skeleton sk-btn-page"></div>\n </div>\n `:`\n <div class="hero-section instant-access-layout">\n <div class="skeleton hero-image ia-image"></div>\n \n <div class="hero-content ia-content">\n <div class="skeleton sk-title-lg ia-center"></div>\n <div class="skeleton sk-text ia-center"></div>\n \n <div class="skeleton sk-btn-action"></div>\n\n <div class="skeleton sk-label"></div>\n <div class="input-group">\n <div class="skeleton sk-input"></div>\n <div class="skeleton sk-btn-copy"></div>\n </div>\n\n <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>\n <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>\n </div>\n </div>\n `}\n </div>\n `},$e=Object.freeze(Object.defineProperty({__proto__:null,getSkeleton:ae},Symbol.toStringTag,{value:"Module"})),v=E("squatch-js:widget");class de{constructor(t){l(this,"type");l(this,"content");l(this,"analyticsApi");l(this,"widgetApi");l(this,"context");l(this,"npmCdn");l(this,"container");l(this,"loadEventListener",null);var e;v("widget initializing ..."),this.content=t.content==="error"?this._error(t.rsCode):t.content,this.type=t.type,this.widgetApi=t.api,this.npmCdn=t.npmCdn,this.analyticsApi=new re({domain:t.domain}),this.context=t.context,this.container=((e=t.context)==null?void 0:e.container)||t.container}_findElement(){let t;if(typeof this.container=="string"?(t=document.querySelector(this.container),v("loading widget with selector",t)):this.container instanceof HTMLElement?(t=this.container,v("loading widget with container",t)):this.container?(t=null,v("container must be an HTMLElement or string",this.container)):(t=document.querySelector("#squatchembed")||document.querySelector(".squatchembed")||document.querySelector("#impactembed")||document.querySelector(".impactembed"),v("loading widget with default selector",t)),!(t instanceof HTMLElement))throw new Error(`element with selector '${this.container||"#squatchembed, .squatchembed, #impactembed, or .impactembed"}' not found.'`);return t}_createFrame(t){const e=document.createElement("iframe");return e.squatchJsApi=this,e.id="squatchFrame",e.width="100%",e.src="about:blank",e.scrolling="no",e.setAttribute("style","border: 0; background-color: none; width: 1px; min-width: 100%; display: block;"),t!=null&&t.minWidth&&(e.style.minWidth=t.minWidth),t!=null&&t.maxWidth&&(e.style.maxWidth=t.maxWidth),(t!=null&&t.maxWidth||t!=null&&t.minWidth)&&(e.style.width="100%"),t!=null&&t.initialHeight&&(e.height=String(t.initialHeight)),e}_findFrame(){const t=this.container?this._findElement():document.body;return(t.shadowRoot||t).querySelector("iframe#squatchFrame")}_detachLoadEventListener(t){this.loadEventListener&&(t.removeEventListener("sq:user-registration",this.loadEventListener),this.loadEventListener=null)}_attachLoadEventListener(t,e){this.loadEventListener===null&&(this.loadEventListener=n=>{this._loadEvent({...e,userId:n.detail.userId,accountId:n.detail.accountId})},t.addEventListener("sq:user-registration",this.loadEventListener))}_loadEvent(t){var n;if(!t)return;if(!_(t))throw new Error("Widget Load event identity property is not an object");let e;if("programId"in t){if(!t.tenantAlias||!t.accountId||!t.userId||!t.engagementMedium)throw new Error("Widget Load event missing required properties");e={tenantAlias:t.tenantAlias,externalAccountId:t.accountId,externalUserId:t.userId,engagementMedium:t.engagementMedium,programId:t.programId}}else{const{analytics:i,mode:s}=t;e={tenantAlias:i.attributes.tenant,externalAccountId:i.attributes.accountId,externalUserId:i.attributes.userId,engagementMedium:s.widgetMode}}(n=this.analyticsApi.pushAnalyticsLoadEvent(e))==null||n.then((i=>{v(`${e.engagementMedium} loaded event recorded.`)})).catch((i=>{v(`ERROR: pushAnalyticsLoadEvent() ${i}`)}))}_shareEvent(t,e){t&&this.analyticsApi.pushAnalyticsShareClickedEvent({tenantAlias:t.analytics.attributes.tenant,externalAccountId:t.analytics.attributes.accountId,externalUserId:t.analytics.attributes.userId,engagementMedium:t.mode.widgetMode,shareMedium:e}).then((n=>{v(`${t.mode.widgetMode} share ${e} event recorded. ${n}`)})).catch((n=>{v(`ERROR: pushAnalyticsShareClickedEvent() ${n}`)}))}_error(t,e="modal",n=""){return`<!DOCTYPE html>\n \x3c!--[if IE 7]><html class="ie7 oldie" lang="en"><![endif]--\x3e\n \x3c!--[if IE 8]><html class="ie8 oldie" lang="en"><![endif]--\x3e\n \x3c!--[if gt IE 8]>\x3c!--\x3e<html lang="en">\x3c!--<![endif]--\x3e\n <head>\n <link rel="stylesheet" media="all" href="https://fast.ssqt.io/assets/css/widget/errorpage.css">\n <style>\n ${n}\n </style>\n </head>\n <body>\n\n <div class="squatch-container ${e}" style="width:100%">\n <div class="errorheader">\n <button type="button" class="close" onclick="window.frameElement.squatchJsApi.close();">×</button>\n <p class="errortitle">Error</p>\n </div>\n <div class="errorbody">\n <div class="sadface"><img src="https://fast.ssqt.io/assets/images/face.png"></div>\n <h4>Our referral program is temporarily unavailable.</h4><br>\n <p>Please reload the page or check back later.</p>\n <p>If the persists please contact our support team.</p>\n <br>\n <br>\n <div class="right-align errtxt">\n Error Code: ${t}\n </div>\n </div>\n </div>\n </body>\n </html>`}async _findInnerContainer(t){const{contentWindow:e}=t;if(!e)throw new Error("Squatch.js frame inner frame is empty");const n=e.document;function i(){const r=n.getElementsByTagName("sqh-global-container"),a=n.getElementsByClassName("squatch-container");return r.length>0?r[0]:a.length>0?a[0]:null}let s=null;for(let r=0;r<5&&(s=i(),!s);r++)await qe(100);return s||n.body}_getSkeletonPreloadHTML(t,e){if(!t)return"";const n=this.context.type==="passwordless"?"instant-access":"verified-access",i=ae({type:n,height:"100%"});return`\n <div id="sq-preload" style="visibility: visible; position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; background: ${e||"white"};">\n ${i}\n </div>\n <script>(${Se.toString()})()<\/script>\n `}reload({email:t,firstName:e,lastName:n},i){const s=this._findFrame();if(!s)throw new Error("Could not find widget iframe");const r=s.contentWindow,a=this.context.engagementMedium||"POPUP";if(!r)throw new Error("Frame needs a content window");let d;if(this.context.type==="upsert"){if(!this.context.user)throw new Error("Can't reload without user ids");let c={email:t||null,firstName:e||null,lastName:n||null,id:this.context.user.id,accountId:this.context.user.accountId};d=this.widgetApi.upsertUser({user:c,engagementMedium:a,widgetType:this.type,jwt:i})}else if(this.context.type==="passwordless")d=this.widgetApi.render({user:void 0,engagementMedium:a,widgetType:this.type,jwt:void 0});else throw new Error("can't reload an error widget");d.then((({template:c})=>{c&&(this.content=c,this.__deprecated__register(s,{email:t,engagementMedium:a},(()=>{this.load(),a==="POPUP"&&this.open()})))})).catch((({message:c})=>{v(`${c}`)}))}__deprecated__register(t,e,n){const s=t.contentWindow.document,r=s.createElement("button"),a=s.getElementsByClassName("squatch-register")[0];if(a){r.className="btn btn-primary",r.id="show-stats-btn",r.textContent=this.type==="REFERRER_WIDGET"?"Show Stats":"Show Reward";const d=e.engagementMedium==="POPUP"?"margin-top: 10px; max-width: 130px; width: 100%;":"margin-top: 10px;";r.setAttribute("style",d),r.onclick=n,a.style.paddingTop="30px",a.innerHTML=`<p><strong>${e.email}</strong><br>Has been successfully registered</p>`,a.appendChild(r)}}}function qe(o){return new Promise((t=>{setTimeout(t,o)}))}function Se(){var o=setTimeout(t,1e4);function t(){var n=document.getElementById("sq-preload");n&&n.remove(),clearTimeout(o)}function e(){var n=new Set;if(document.querySelectorAll("*").forEach((function(i){i.tagName.includes("-")&&n.add(i.tagName.toLowerCase())})),!n.size)return t();Promise.all(Array.from(n).map((function(i){return customElements.whenDefined(i)}))).then((function(){requestAnimationFrame((function(){requestAnimationFrame(t)}))}))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):setTimeout(e,0)}const T=E("squatch-js:EMBEDwidget");class q extends de{constructor(e,n){super(e);l(this,"show",this.open);l(this,"hide",this.close);n&&(this.container=n)}async load(){var f,b,x,y,L,fe,we,ye,ve;const e=(b=(f=this.context.widgetConfig)==null?void 0:f.values)==null?void 0:b.brandingConfig,n=(x=this.content)==null?void 0:x.includes("mint-components"),i=(e==null?void 0:e.loadingHeight)||500,s=(y=e==null?void 0:e.widgetSize)==null?void 0:y.embeddedWidgets,r=s!=null&&s.maxWidth?F(s.maxWidth):"",a=s!=null&&s.minWidth?F(s.minWidth):"",d=this._createFrame({minWidth:a,maxWidth:r,initialHeight:i}),c=this._findElement();(L=this.context)!=null&&L.container&&(c.style.visibility="hidden",c.style.height="0",c.style["overflow-y"]="hidden"),this.container?c.shadowRoot?((fe=c.shadowRoot.lastChild)==null?void 0:fe.nodeName)==="IFRAME"?c.shadowRoot.replaceChild(d,c.shadowRoot.lastChild):c.shadowRoot.appendChild(d):c.firstChild?c.replaceChild(d,c.firstChild):c.appendChild(d):(!c.firstChild||c.firstChild.nodeName==="#text")&&c.appendChild(d);const{contentWindow:h}=d;if(!h)throw new Error("Frame needs a content window");const p=h.document;p.open();const w=this.widgetApi.domain==="https://staging.referralsaasquatch.com"?"-staging":"";p.write(`\n ${(we=e==null?void 0:e.main)!=null&&we.brandFont?`\n <link rel="preconnect" href="https://fast${w}.ssqt.io">\n <link rel="preconnect" href="https://fonts.gstatic.com">\n <link rel="preconnect" href="https://fonts.googleapis.com">\n <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent((ye=e==null?void 0:e.main)==null?void 0:ye.brandFont)}" as="style">`:""}\n <link rel="dns-prefetch" href="https://res.cloudinary.com">\n <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>\n ${n?`\n <style data-styles>\n html { visibility: hidden; }\n </style>`:""}\n ${this._getSkeletonPreloadHTML(n,(ve=e==null?void 0:e.color)==null?void 0:ve.backgroundColor)}\n ${this.content}\n <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>\n `),p.close(),te(p,(async()=>{const ke=h.squatch||h.widgetIdent;d.height=i;const Ze=new h.ResizeObserver((tt=>{for(const nt of tt){const{height:it}=nt.contentRect;d.height=it}})),et=await this._findInnerContainer(d);Ze.observe(et),this._shouldFireLoadEvent()?(this._loadEvent(ke),T("loaded")):p&&this._attachLoadEventListener(p,ke)}))}open(){const e=this._findFrame();if(!e)return T("no target element to open");if(!e.contentWindow)return T("Frame needs a content window");const n=this._findElement();n.style.visibility="unset",n.style.height="auto",n.style["overflow-y"]="auto",e.contentWindow.document.dispatchEvent(new CustomEvent("sq:refresh"));const i=e.contentWindow.squatch||e.contentWindow.widgetIdent;if(this.context.user)this._loadEvent(i),T("loaded");else{if(!e.contentDocument)return;this._attachLoadEventListener(e.contentDocument,i)}}close(){const e=this._findFrame();if(!e)return T("no target element to close");e.contentDocument&&this._detachLoadEventListener(e.contentDocument);const n=this._findElement();n.style.visibility="hidden",n.style.height="0",n.style["overflow-y"]="hidden",T("Embed widget closed")}_error(e,n="embed",i=""){return super._error(e,n,i)}_shouldFireLoadEvent(){const e=!this.container,n=this.container instanceof HTMLElement&&(this.container.tagName.startsWith("SQUATCH-")||this.container.tagName.startsWith("IMPACT-"));return!!this.context.user&&(e||n)}}const S=E("squatch-js:POPUPwidget");let H=0;class P extends de{constructor(e,n=".squatchpop"){super(e);l(this,"trigger");l(this,"id");l(this,"show",this.open);l(this,"hide",this.close);this.trigger=n,this.container?this.id="squatchModal":(this.id=H===0?"squatchModal":`squatchModal__${H}`,H=H+1),document.head.insertAdjacentHTML("beforeend",`<style>#${this.id}::-webkit-scrollbar { display: none; }</style>`)}_initialiseCTA(){if(!this.trigger)return;let e;try{e=document.querySelector(this.trigger)||document.querySelector(".impactpop"),this.trigger&&!e&&S("No element found with trigger selector",this.trigger)}catch{S("Not a valid selector",this.trigger)}e&&(e.onclick=()=>{this.open()})}_createPopupDialog(e){var d;const n=document.createElement("dialog"),i=(d=e==null?void 0:e.widgetSize)==null?void 0:d.popupWidgets,s=i!=null&&i.minWidth?F(i.minWidth):"auto",r=i!=null&&i.maxWidth?F(i.maxWidth):"500px";n.id=this.id,n.setAttribute("style",`width: 100%; min-width: ${s}; max-width: ${r}; border: none; padding: 0;`);const a=c=>{c.stopPropagation(),c.target===n&&n.close()};return n.addEventListener("click",a),n}async load(){var g,w,f,b,x,y,L;const e=(w=(g=this.context.widgetConfig)==null?void 0:g.values)==null?void 0:w.brandingConfig,n=(e==null?void 0:e.loadingHeight)||500,i=(f=this.content)==null?void 0:f.includes("mint-components"),s=this._createFrame();s.style.height=n+"px",this._initialiseCTA();const r=this.container?this._findElement():document.body,a=(r==null?void 0:r.shadowRoot)||r,d=this._createPopupDialog(e);d.appendChild(s),((b=a.lastChild)==null?void 0:b.nodeName)==="DIALOG"?a.replaceChild(d,a.lastChild):a.appendChild(d);const{contentWindow:c}=s;if(!c)throw new Error("Frame needs a content window");const h=c.document;h.open();const p=this.widgetApi.domain;h.write(`\n ${(x=e==null?void 0:e.main)!=null&&x.brandFont?`\n <link rel="preconnect" href="https://fast${p==="https://staging.referralsaasquatch.com"?"-staging":""}.ssqt.io">\n <link rel="preconnect" href="https://fonts.gstatic.com">\n <link rel="preconnect" href="https://fonts.googleapis.com">\n <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent((y=e==null?void 0:e.main)==null?void 0:y.brandFont)}" as="style">`:""}\n <link rel="dns-prefetch" href="https://res.cloudinary.com">\n <link rel="preconnect" href="https://res.cloudinary.com" crossorigin>\n ${i?`\n <style data-styles>\n html { visibility: hidden; }\n </style>`:""}\n ${this._getSkeletonPreloadHTML(i,(L=e==null?void 0:e.color)==null?void 0:L.backgroundColor)}\n ${this.content}\n <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>\n `),h.close(),S("Popup template loaded into iframe"),await this._setupResizeHandler(s)}async _setupResizeHandler(e){const{contentWindow:n}=e;if(!n)throw new Error("Frame needs a content window");const i=n.document;te(i,(async()=>{i.body.style.overflowY="hidden";let s=!0;new n.ResizeObserver((a=>{for(const d of a){const{top:c,bottom:h}=d.contentRect,p=h+c;p<=0||(s?(s=!1,e.style.height="0",e.height=i.body.scrollHeight+"",e.style.height=""):e.height=p+"",d.target.style="")}})).observe(await this._findInnerContainer(e))}))}open(){const e=this.container?this._findElement():document.body,i=(e.shadowRoot||e).querySelector(`#${this.id}`);if(!i)throw new Error("Could not determine container div");i.showModal();const s=this._findFrame();if(!s)throw new Error("Could not find iframe");const{contentWindow:r}=s;if(!r)throw new Error("Squatch.js has an empty iframe");const a=r.document;te(a,(()=>{var c;const d=r.squatch||r.widgetIdent;(c=s.contentDocument)==null||c.dispatchEvent(new CustomEvent("sq:refresh")),this.context.user?(this._loadEvent(d),S("Popup opened")):this._attachLoadEventListener(a,d)}))}close(){const e=this._findFrame();e!=null&&e.contentDocument&&this._detachLoadEventListener(e.contentDocument);const n=this.container?this._findElement():document.body,s=(n.shadowRoot||n).querySelector(`#${this.id}`);if(!s)throw new Error("Could not determine container div");s.close(),S("Popup closed")}_clickedOutside({target:e}){}_error(e,n="modal",i=""){return super._error(e,n,i||"body { margin: 0; } .modal { box-shadow: none; border: 0; }")}}const k=E("squatch-js:widgets");class R{constructor(t){l(this,"api");l(this,"tenantAlias");l(this,"domain");l(this,"npmCdn");const e=W(t);this.tenantAlias=e.tenantAlias,this.domain=e.domain,this.npmCdn=e.npmCdn,this.api=new N(e)}async upsertUser(t){const n=oe(t);try{const i=await this.api.upsertUser(n);return{widget:this._renderWidget(i,n,{type:"upsert",user:n.user,engagementMedium:t.engagementMedium,container:t.container,trigger:t.trigger,widgetConfig:{values:{brandingConfig:i==null?void 0:i.brandingConfig}}}),user:i.user}}catch(i){throw k(i),i.apiErrorCode&&this._renderErrorWidget(i,t.engagementMedium),new Error(i)}}async render(t){const n=se(t);try{const i=await this.api.render(n);return{widget:this._renderWidget(i,n,{type:"passwordless",engagementMedium:n.engagementMedium,container:n.container,trigger:n.trigger,widgetConfig:i==null?void 0:i.widgetConfig}),user:i.user}}catch(i){throw i.apiErrorCode&&this._renderErrorWidget(i,n.engagementMedium),new Error(i)}}async autofill(t){const e=t;if(typeof e=="function"){try{const s=await this.api.squatchReferralCookie();e(s)}catch(s){throw k("Autofill error",s),new Error(s)}return}if(typeof e!="string")throw new Error("Autofill accepts a string or function");let n=document.querySelectorAll(e),i;if(n.length>0)i=n[0];else throw k("Element id/class or function missing"),new Error("Element id/class or function missing");try{const s=await this.api.squatchReferralCookie();i.value=s.codes[0]}catch(s){throw new Error(s)}}_renderWidget(t,e,n){var d;if(k("Rendering Widget..."),!t)throw new Error("Unable to get a response");let i,s=!!e.displayOnLoad;const r=t.jsOptions||{},a={content:t.template,type:e.widgetType||((d=r.widget)==null?void 0:d.defaultWidgetType),api:this.api,domain:this.domain,npmCdn:this.npmCdn,context:n};return r.widgetUrlMappings&&r.widgetUrlMappings.forEach((c=>{var h,p;R._matchesUrl(c.url)&&(c.widgetType!=="CONVERSION_WIDGET"||(p=(h=t.user)==null?void 0:h.referredBy)!=null&&p.code?(s=c.displayOnLoad,k(`Display ${c.widgetType} on ${c.url}`)):k(`Don't display ${c.widgetType} when no referral on widget rule match ${c.url}`))})),r.fuelTankAutofillUrls&&(k("We found a fuel tank autofill!"),r.fuelTankAutofillUrls.forEach((({url:c,formSelector:h})=>{var p,g,w;if(R._matchesUrl(c)&&(k("Fuel Tank URL matches"),(g=(p=t.user)==null?void 0:p.referredBy)!=null&&g.code)){const f=document.querySelector(h);f?f.value=((w=t.user.referredBy.referredReward)==null?void 0:w.fuelTankCode)||"":k(new Error(`Element with id/class ${h} was not found.`))}}))),e.engagementMedium==="EMBED"?i=this._renderEmbedWidget(a):(i=this._renderPopupWidget(a),s&&i.open()),i}_renderPopupWidget(t){const e=new P(t,t.context.trigger);return e.load(),e}_renderEmbedWidget(t){const e=new q(t,t.context.container);return e.load(),e}_renderErrorWidget(t,e="POPUP"){const{apiErrorCode:n,rsCode:i,message:s}=t;k(new Error(`${n} (${i}) ${s}`));const r={content:"error",rsCode:i,api:this.api,domain:this.domain,npmCdn:this.npmCdn,type:"ERROR_WIDGET",context:{type:"error"}};let a;e==="EMBED"?(a=new q(r),a.load()):e==="POPUP"&&(a=new P(r),a.load())}static _matchesUrl(t){return!!window.location.href.match(new RegExp(t))}}class Pe{constructor(t){l(this,"tenantAlias");l(this,"domain");const n=W(t);this.tenantAlias=n.tenantAlias,this.domain=n.domain}track(t,e){const n=t,i=e,s=Re(n),{jwt:r}=Ue(i),a=encodeURIComponent(this.tenantAlias),d=encodeURIComponent(s.userId),c=encodeURIComponent(s.accountId),h=`/api/v1/${a}/open/account/${c}/user/${d}/events`,p=this.domain+h;return ee(p,JSON.stringify(s),r)}}function Re(o){if(!_(o))throw new Error("tracking parameter must be an object");if(!(o!=null&&o.accountId))throw new Error("accountId field is required");if(!(o!=null&&o.events))throw new Error("events field is required");if(!(o!=null&&o.userId))throw new Error("userId field is required");const t=o;if(!Array.isArray(t.events))throw new Error("'events' should be an array");return t}function Ue(o){if(!_(o))throw new Error("'options' should be an object");return o}function Me(){var i;const o=window[K]?K:D,t=((i=window["_"+o])==null?void 0:i.ready)||[],e=window.impactOnReady||window.squatchOnReady,n=[...t,e].filter((s=>!!s));setTimeout((()=>{window[D]&&(window[K]=window[D],n.forEach((s=>s())),window[D]._auto(),window["_"+o]=void 0,delete window["_"+o])}),0)}const C=E("squatch-js"),ce=o=>typeof o=="object"&&!Array.isArray(o),le=(o,t)=>{const e=i=>ce(t[i])&&o.hasOwnProperty(i)&&ce(o[i]),n=Object.getOwnPropertyNames(t).map((i=>({[i]:e(i)?le(o[i],t[i]):t[i]}))).reduce(((i,s)=>({...i,...s})),{});return{...o,...n}};function B(o){const t=atob(o.replace(/_/g,"/").replace(/-/g,"+")),e=new Uint8Array(t.length);for(let n=0;n<t.length;n++)e[n]=t.charCodeAt(n);return new TextDecoder("utf8").decode(e)}function he(o){const t=(new TextEncoder).encode(o),e=Array.from(t,(n=>String.fromCodePoint(n))).join("");return btoa(e).replace(/=/g,"").replace(/\+/g,"-").replace(/\//g,"_")}function Le(){var o,t,e="weird_get_top_level_domain=cookie",n=document.location.hostname.split(".");for(o=n.length-1;o>=0;o--)if(t=n.slice(o).join("."),document.cookie=e+";domain=."+t+";",document.cookie.indexOf(e)>-1)return document.cookie=e.split("=")[0]+"=;domain=."+t+";expires=Thu, 01 Jan 1970 00:00:01 GMT;",t}function Oe(){const o=window.location.search,e=new URLSearchParams(o).get("_saasquatch")||"";if(e){let n="",i="",s="";try{n=JSON.parse(B(e))}catch(r){C("Unable to decode params",r);return}try{i=JSON.parse(B(j.get("_saasquatch"))),C("existing cookie",i)}catch(r){C("Unable to retrieve cookie",r)}try{const r=Le();if(C("domain retrieved:",r),i){const a=le(i,n);s=he(JSON.stringify(a)),C("cookie to store:",a)}else s=he(JSON.stringify(n)),C("cookie to store:",n);j.set("_saasquatch",s,{expires:365,secure:!1,sameSite:"Lax",domain:r,path:"/"})}catch(r){C("Unable to set cookie",r)}}}const J=E("squatch-js");function je(){var p;const o=window.location.search,e=new URLSearchParams(o).get("_saasquatchExtra")||"";if(!e){J("No _saasquatchExtra param");return}const n=W({tenantAlias:"UNKNOWN"});if(!n.domain){J("domain must be provided in config to use _saasquatchExtra");return}let i;try{i=JSON.parse(B(e))}catch{J("Unable to decode _saasquatchExtra config");return}function s(g){return g.replace(/^https?:\/\//,"")}const r=s(n.domain),a=Object.keys((i==null?void 0:i[r])||{})[0],d=(p=i==null?void 0:i[r])==null?void 0:p[a];if(!d){J("_saasquatchExtra did not have an expected structure");return}const{autoPopupWidgetType:c,...h}=d;return{widgetConfig:{widgetType:c,displayOnLoad:!0,...h},squatchConfig:{...n,tenantAlias:a}}}const De=E("squatch-js:decodeUserJwt");function Ne(o){var t;try{const e=o.split(".")[1];if(e===void 0)return null;const n=B(e);return(t=JSON.parse(n))==null?void 0:t.user}catch(e){return De(e),null}}const ue=E("squatch-js:DeclarativeWidget");class pe extends HTMLElement{constructor(){super();l(this,"config");l(this,"token");l(this,"tenant");l(this,"widgetType");l(this,"locale");l(this,"widgetApi");l(this,"analyticsApi");l(this,"widgetInstance");l(this,"type");l(this,"container");l(this,"element");l(this,"loaded");l(this,"_setWidget",((e,n)=>{var s;const i={api:this.widgetApi,content:e.template,context:{type:n.type,user:n.user,container:this.container||void 0,engagementMedium:this.type,widgetConfig:e.widgetConfig},type:this.widgetType,domain:((s=this.config)==null?void 0:s.domain)||I,npmCdn:Y,container:this};if(this.type==="EMBED")return new q(i);{const r=this.firstChild?null:void 0;return new P(i,r)}}));l(this,"setErrorWidget",(e=>{var i;const n={api:this.widgetApi,content:"error",context:{type:"error",container:this.container||void 0},type:"ERROR_WIDGET",domain:((i=this.config)==null?void 0:i.domain)||I,npmCdn:Y,container:this};if(this.type==="EMBED")return new q(n);{const s=this.firstChild?null:void 0;return new P(n,s)}}));l(this,"reload",this.renderWidget);l(this,"show",this.open);l(this,"hide",this.close);this.attachShadow({mode:"open"}).innerHTML="<style>:host { display: block; }</style><slot></slot>",this.config=Z(),this.token=$(),this.tenant=window.squatchTenant,this.container=this}_setupApis(e){var n,i;if(!this.tenant)throw new Error("tenantAlias not provided");this.widgetApi=new N({tenantAlias:(e==null?void 0:e.tenantAlias)||this.tenant,domain:(e==null?void 0:e.domain)||((n=this.config)==null?void 0:n.domain)||I}),this.analyticsApi=new re({domain:(e==null?void 0:e.domain)||((i=this.config)==null?void 0:i.domain)||I})}getWidgetType(e){return e&&(e.includes("websiteReferralWidget")||e.includes("friendWidget"))?"instant-access":"verified-access"}async renderPasswordlessVariant(){return this._setupApis(),ue("Rendering as an Instant Access widget"),await this.widgetApi.render({engagementMedium:this.type,widgetType:this.widgetType,locale:this.locale}).then((e=>this._setWidget(e,{type:"passwordless"}))).catch(this.setErrorWidget)}async renderUserUpsertVariant(){this._setupApis();const e=Ne(this.token);return e?(ue("Rendering as a Verified widget"),await this.widgetApi.upsertUser({user:e,locale:this.locale,engagementMedium:this.type,widgetType:this.widgetType,jwt:this.token}),await this.widgetApi.render({locale:this.locale,engagementMedium:this.type,widgetType:this.widgetType}).then((i=>this._setWidget(i,{type:"upsert",user:e}))).catch(this.setErrorWidget)):this.setErrorWidget(Error("No user object in token."))}async getWidgetInstance(){let e;if(this.widgetType=this.getAttribute("widget")||void 0,this.locale=this.getAttribute("locale")||this.locale,!this.widgetType)throw new Error("No widget has been specified");return this.token?e=await this.renderUserUpsertVariant():e=await this.renderPasswordlessVariant(),this.widgetInstance=e,this.widgetInstance&&this.dispatchEvent(new CustomEvent("sq:widget-loaded")),e}async renderWidget(){await this.getWidgetInstance(),await this.widgetInstance.load()}open(){if(!this.widgetInstance)throw new Error("Widget has not loaded yet");this.widgetInstance.open()}close(){if(!this.widgetInstance)throw new Error("Widget has not loaded yet");this.widgetInstance.close()}static get observedAttributes(){return["widget","locale"]}attributeChangedCallback(e,n,i){if(!(n===i||!this.loaded))switch(e){case"locale":case"widget":this.connectedCallback();break}}async connectedCallback(){this.loaded=!0,this.container=this.getAttribute("container"),this.widgetType=this.getAttribute("widget")||void 0;const e=this.getWidgetType(this.widgetType),{getSkeleton:n}=await Promise.resolve().then((()=>$e)),i=n({height:"100%",type:e}),s=document.createElement("div");s.id="loading-skeleton",s.innerHTML=i;const r=this.shadowRoot||this.attachShadow({mode:"open"});if(this.type==="POPUP"){const d=r.getElementById("#squatchModal");d&&(d.innerHTML="",d.appendChild(s))}else r.innerHTML="",r.appendChild(s);await this.renderWidget();const a=r.getElementById("loading-skeleton");a&&a.remove(),this.getAttribute("open")!==null&&this.open()}}class ne extends pe{constructor(){super(),this.type="EMBED",this.loaded=!1}}class ie extends pe{constructor(){super(),this.type="POPUP",this.loaded=!1,this.addEventListener("click",(t=>{t.stopPropagation(),this.open()}))}}class Fe extends ne{}class He extends ie{}class Be extends ne{}class Je extends ie{}window.customElements.get("squatch-embed")||window.customElements.define("squatch-embed",Fe),window.customElements.get("impact-embed")||window.customElements.define("impact-embed",Be),window.customElements.get("squatch-popup")||window.customElements.define("squatch-popup",He),window.customElements.get("impact-popup")||window.customElements.define("impact-popup",Je);function ze(){console.log("Having trouble using Squatch.js? Go to https://docs.referralsaasquatch.com/developer/ for tutorials, references and error codes.")}const U=E("squatch-js");let z=null,G=null,V=null;function Ge(){return z||M({}),z}function X(){return G||M({}),G}function Ve(){return V||M({}),V}function Xe(o){var t;return(t=X())==null?void 0:t.render(o)}function Qe(){var t;const o=je();if(o){const{squatchConfig:e,widgetConfig:n}=o;return M(e),(t=X())==null?void 0:t.render(n)}}function M(o){const e=W(o);e.tenantAlias.match("^test")||e.debug?A("squatch-js*"):be(),U("initializing ..."),z=new N(e),G=new R(e),V=new Pe(e),U("Widget API instance",z),U("Widgets instance",G),U("Events API instance",V)}function Ye(o){o()}function Ke(o){X().autofill(o)}function me(){Oe()}typeof document<"u"&&!window.SaaSquatchDoNotAutoDrop&&me(),(ge=window.squatch)!=null&&ge.init&&U("Squatchjs is being loaded more than once. This may lead to multiple load events being sent, duplicated widgets, and inaccurate analytics."),typeof document<"u"&&Me(),u.DeclarativeEmbedWidget=ne,u.DeclarativePopupWidget=ie,u.EmbedWidget=q,u.PopupWidget=P,u.WidgetApi=N,u.Widgets=R,u._auto=Qe,u.api=Ge,u.autofill=Ke,u.events=Ve,u.help=ze,u.init=M,u.pushCookie=me,u.ready=Ye,u.widget=Xe,u.widgets=X,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types.d.ts
CHANGED
|
@@ -42,7 +42,13 @@ export interface WidgetConfig {
|
|
|
42
42
|
*/
|
|
43
43
|
export interface WidgetValueConfig {
|
|
44
44
|
values: {
|
|
45
|
-
brandingConfig
|
|
45
|
+
brandingConfig?: BrandingConfiguration;
|
|
46
|
+
meta?: {
|
|
47
|
+
dependencies?: Array<{
|
|
48
|
+
package: string;
|
|
49
|
+
version: string;
|
|
50
|
+
}>;
|
|
51
|
+
};
|
|
46
52
|
};
|
|
47
53
|
}
|
|
48
54
|
/**
|
|
@@ -118,3 +124,130 @@ export type ReferralCookie = {
|
|
|
118
124
|
codes: string[];
|
|
119
125
|
encodedCookie: string;
|
|
120
126
|
};
|
|
127
|
+
export interface BrandingConfiguration {
|
|
128
|
+
/**
|
|
129
|
+
* Defines all branding related styles.
|
|
130
|
+
*/
|
|
131
|
+
main?: {
|
|
132
|
+
brandColor?: string;
|
|
133
|
+
brandFont?: string;
|
|
134
|
+
};
|
|
135
|
+
loadingHeight?: number;
|
|
136
|
+
color?: {
|
|
137
|
+
backgroundColor?: string;
|
|
138
|
+
textColorShades?: {
|
|
139
|
+
mainText: string;
|
|
140
|
+
subduedText: string;
|
|
141
|
+
};
|
|
142
|
+
accentColorShades?: {
|
|
143
|
+
icon?: string;
|
|
144
|
+
text?: string;
|
|
145
|
+
border?: string;
|
|
146
|
+
background?: string;
|
|
147
|
+
};
|
|
148
|
+
success?: {
|
|
149
|
+
text?: string;
|
|
150
|
+
iconAndBadge?: string;
|
|
151
|
+
border?: string;
|
|
152
|
+
background?: string;
|
|
153
|
+
};
|
|
154
|
+
warning?: {
|
|
155
|
+
text?: string;
|
|
156
|
+
iconAndBadge?: string;
|
|
157
|
+
border?: string;
|
|
158
|
+
background?: string;
|
|
159
|
+
};
|
|
160
|
+
critical?: {
|
|
161
|
+
text?: string;
|
|
162
|
+
iconAndBadge?: string;
|
|
163
|
+
border?: string;
|
|
164
|
+
background?: string;
|
|
165
|
+
};
|
|
166
|
+
informative?: {
|
|
167
|
+
text?: string;
|
|
168
|
+
iconAndBadge?: string;
|
|
169
|
+
border?: string;
|
|
170
|
+
background?: string;
|
|
171
|
+
};
|
|
172
|
+
neutral?: {
|
|
173
|
+
text?: string;
|
|
174
|
+
iconAndBadge?: string;
|
|
175
|
+
border?: string;
|
|
176
|
+
background?: string;
|
|
177
|
+
[k: string]: unknown;
|
|
178
|
+
};
|
|
179
|
+
};
|
|
180
|
+
primaryButton?: {
|
|
181
|
+
buttonColor?: {
|
|
182
|
+
background?: string;
|
|
183
|
+
label?: string;
|
|
184
|
+
border?: string;
|
|
185
|
+
};
|
|
186
|
+
buttonHoverColor?: {
|
|
187
|
+
background?: string;
|
|
188
|
+
label?: string;
|
|
189
|
+
border?: string;
|
|
190
|
+
};
|
|
191
|
+
borderRadius?: number;
|
|
192
|
+
};
|
|
193
|
+
secondaryButton?: {
|
|
194
|
+
buttonColor?: {
|
|
195
|
+
background?: string;
|
|
196
|
+
label?: string;
|
|
197
|
+
border?: string;
|
|
198
|
+
};
|
|
199
|
+
buttonHoverColor?: {
|
|
200
|
+
background?: string;
|
|
201
|
+
label?: string;
|
|
202
|
+
border?: string;
|
|
203
|
+
};
|
|
204
|
+
borderRadius?: number;
|
|
205
|
+
};
|
|
206
|
+
/**
|
|
207
|
+
* Defines form field colors.
|
|
208
|
+
*/
|
|
209
|
+
formFields?: {
|
|
210
|
+
formFieldColor?: {
|
|
211
|
+
background?: string;
|
|
212
|
+
inputText?: string;
|
|
213
|
+
border?: string;
|
|
214
|
+
};
|
|
215
|
+
borderRadius?: number;
|
|
216
|
+
disabledBackgroundColor?: string;
|
|
217
|
+
selectedStateColor?: string;
|
|
218
|
+
hoverStateColor?: string;
|
|
219
|
+
};
|
|
220
|
+
/**
|
|
221
|
+
* Defines border styles.
|
|
222
|
+
*/
|
|
223
|
+
border?: {
|
|
224
|
+
borderRadius?: number;
|
|
225
|
+
borderThickness?: number;
|
|
226
|
+
borderColor?: string;
|
|
227
|
+
};
|
|
228
|
+
/**
|
|
229
|
+
* Defines widget dimensions.
|
|
230
|
+
*/
|
|
231
|
+
widgetSize?: {
|
|
232
|
+
embeddedWidgets?: {
|
|
233
|
+
minWidth?: {
|
|
234
|
+
value: number;
|
|
235
|
+
unit: "px" | "%";
|
|
236
|
+
};
|
|
237
|
+
maxWidth?: {
|
|
238
|
+
value: number;
|
|
239
|
+
unit: "px" | "%";
|
|
240
|
+
};
|
|
241
|
+
};
|
|
242
|
+
popupWidgets?: {
|
|
243
|
+
minWidth?: {
|
|
244
|
+
value: number;
|
|
245
|
+
unit: "px" | "%";
|
|
246
|
+
};
|
|
247
|
+
maxWidth?: {
|
|
248
|
+
value: number;
|
|
249
|
+
unit: "px" | "%";
|
|
250
|
+
};
|
|
251
|
+
};
|
|
252
|
+
};
|
|
253
|
+
}
|
package/dist/utils/logger.d.ts
CHANGED
|
@@ -16,5 +16,8 @@ export declare function disableDebug(): void;
|
|
|
16
16
|
/**
|
|
17
17
|
* Create a namespaced logger function.
|
|
18
18
|
* Returns a function that logs to console when the namespace is enabled.
|
|
19
|
+
* The returned function also has an `enabled` property for checking status.
|
|
19
20
|
*/
|
|
20
|
-
export declare function debug(namespace: string): (...args: any[]) => void
|
|
21
|
+
export declare function debug(namespace: string): ((...args: any[]) => void) & {
|
|
22
|
+
enabled: boolean;
|
|
23
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BrandingConfiguration } from '../types';
|
|
1
2
|
import { default as Widget, Params } from './Widget';
|
|
2
3
|
/**
|
|
3
4
|
* The PopupWidget is used to display popups (also known as "Modals").
|
|
@@ -16,9 +17,9 @@ export default class PopupWidget extends Widget {
|
|
|
16
17
|
id: string;
|
|
17
18
|
constructor(params: Params, trigger?: string | null);
|
|
18
19
|
_initialiseCTA(): void;
|
|
19
|
-
_createPopupDialog(brandingConfig?:
|
|
20
|
+
_createPopupDialog(brandingConfig?: BrandingConfiguration): HTMLDialogElement;
|
|
20
21
|
load(): Promise<void>;
|
|
21
|
-
protected _setupResizeHandler(frame: HTMLIFrameElement
|
|
22
|
+
protected _setupResizeHandler(frame: HTMLIFrameElement): Promise<void>;
|
|
22
23
|
open(): void;
|
|
23
24
|
close(): void;
|
|
24
25
|
protected _clickedOutside({ target }: {
|
|
@@ -2,12 +2,10 @@ export type WidgetType = "instant-access" | "verified-access";
|
|
|
2
2
|
interface SkeletonProps {
|
|
3
3
|
type?: WidgetType;
|
|
4
4
|
height?: string | number;
|
|
5
|
-
skeletonBackgroundColor?: string;
|
|
6
|
-
skeletonShimmerColor?: string;
|
|
7
5
|
}
|
|
8
6
|
/**
|
|
9
7
|
* Returns the complete HTML string (including <style>) for the skeleton.
|
|
10
8
|
* Values are injected directly into the CSS string.
|
|
11
9
|
*/
|
|
12
|
-
export declare const getSkeleton: ({ type, height,
|
|
10
|
+
export declare const getSkeleton: ({ type, height, }: SkeletonProps) => string;
|
|
13
11
|
export {};
|
package/dist/widgets/Widget.d.ts
CHANGED
|
@@ -44,7 +44,7 @@ export default abstract class Widget {
|
|
|
44
44
|
_createFrame(options?: {
|
|
45
45
|
minWidth?: string;
|
|
46
46
|
maxWidth?: string;
|
|
47
|
-
initialHeight?: string;
|
|
47
|
+
initialHeight?: string | number;
|
|
48
48
|
}): HTMLIFrameElement;
|
|
49
49
|
_findFrame(): HTMLIFrameElement | null;
|
|
50
50
|
abstract load(): void;
|
|
@@ -54,6 +54,17 @@ export default abstract class Widget {
|
|
|
54
54
|
protected _shareEvent(sqh: any, medium: any): void;
|
|
55
55
|
protected _error(rs: any, mode?: string, style?: string): string;
|
|
56
56
|
protected _findInnerContainer(frame: HTMLIFrameElement): Promise<Element>;
|
|
57
|
+
/**
|
|
58
|
+
* Returns HTML for an in-iframe skeleton preload overlay that is removed
|
|
59
|
+
* once all Stencil component chunks have loaded and been hydrated.
|
|
60
|
+
*
|
|
61
|
+
* Uses a MutationObserver to detect when components receive the `hydrated`
|
|
62
|
+
* class, debouncing removal so the skeleton stays visible until all chunks
|
|
63
|
+
* have finished loading. Includes a timeout fallback.
|
|
64
|
+
*
|
|
65
|
+
* Only generates content for mint-components widgets; returns empty string otherwise.
|
|
66
|
+
*/
|
|
67
|
+
protected _getSkeletonPreloadHTML(hasMintComponents: boolean, backgroundColor?: string): string;
|
|
57
68
|
/**
|
|
58
69
|
* Reloads the current widget, makes updated request to API and renders result.
|
|
59
70
|
* Primarily for Classic widgets with registration
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@saasquatch/squatch-js",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.8.3-
|
|
4
|
+
"version": "2.8.3-2",
|
|
5
5
|
"description": "The official Referral SaaSquatch Javascript Web/Browser SDK https://docs.referralsaasquatch.com/developer/squatchjs/",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"author": "ReferralSaaSquatch.com, Inc.",
|
|
@@ -64,7 +64,6 @@
|
|
|
64
64
|
"@testing-library/dom": "^9.3.1",
|
|
65
65
|
"@types/chai": "^4.3.5",
|
|
66
66
|
"@types/cucumber": "^6.0.1",
|
|
67
|
-
"@types/debug": "4.1.5",
|
|
68
67
|
"@types/estree": "^1.0.1",
|
|
69
68
|
"@types/express": "^4.17.6",
|
|
70
69
|
"@types/inquirer": "^9.0.3",
|