@saasquatch/squatch-js 2.3.2-9 → 2.4.0
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 +98 -5
- package/demo/templates/MintGA.ts +62 -52
- package/demo/templates/MintGAContainer.ts +61 -51
- package/demo/templates/MintGAContainerDisplayBlock.ts +60 -51
- package/demo/templates/QuirksMintGA.ts +59 -50
- package/demo/templates/QuirksMintGAContainer.ts +59 -50
- package/demo/templates/QuirksMintGAContainerDisplayBlock.ts +59 -50
- package/demo/toolbar.tsx +115 -82
- package/dist/squatch.esm.js +90 -21
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +90 -21
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +2 -2
- package/dist/squatchjs.min.js +13 -0
- package/dist/stats.html +1 -1
- package/dist/types.d.ts +22 -0
- package/dist/widgets/EmbedWidget.d.ts +4 -2
- package/dist/widgets/Widgets.d.ts +3 -2
- package/package.json +1 -1
- package/dist/squatch.WidgetApi.js +0 -1395
- package/dist/squatch.WidgetApi.min.js +0 -8
|
@@ -1,56 +1,65 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
template: `
|
|
3
3
|
<html>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</sqm-
|
|
35
|
-
</sqm-
|
|
36
|
-
|
|
37
|
-
</sqm-
|
|
38
|
-
|
|
39
|
-
</sqm-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
4
|
+
<head>
|
|
5
|
+
<script type="text/javascript">
|
|
6
|
+
window.widgetIdent = {"programId":"klip-referral-program","userId":"sam+klip@saasquat.ch","accountId":"sam+klip@saasquat.ch","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiIsImN1c3RvbUZpZWxkcyI6e319fQ.4AneYO6_38IcAr6q_k7V-UDeU8aTtOzVu24zvUsnml4","tenantAlias":"test_a74miwdpofztj","engagementMedium":"EMBED","appDomain":"https://staging.referralsaasquatch.com"};
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<link rel="stylesheet" type="text/css" href="https://fast-staging.ssqt.io/npm/@saasquatch/mint-components@1.5.0-62/dist/mint-components/mint-components.css">
|
|
10
|
+
|
|
11
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/bedrock-components@1.3.1-7/dist/bedrock-components/bedrock-components.js"></script>
|
|
12
|
+
|
|
13
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/mint-components@1.5.0-62/dist/mint-components/mint-components.js"></script>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
<script src="https://fast-staging.ssqt.io/npm/@elastic/apm-rum@4.0.1/dist/bundles/elastic-apm-rum.umd.min.js" crossorigin></script>
|
|
17
|
+
<script>
|
|
18
|
+
window.apm = elasticApm.init({
|
|
19
|
+
serviceName: 'programwidget-staging',
|
|
20
|
+
serverUrl: 'https://1c9081d2ac2d43548254f581dca2dbee.apm.us-central1.gcp.cloud.es.io:443',
|
|
21
|
+
active: Math.random() < 0.1
|
|
22
|
+
})
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<sqm-brand brand-color="#4225c4" brand-font="Nunito Sans"><sqm-portal-container style="display:block;" class="squatch-container" direction="column" padding="small" gap="xxxx-large"><sqm-portal-container direction="column" padding="none" gap="xxx-large"><sqm-hero-image image-url="https://i.imgur.com/yr6ER3R.png" header="Klip Rewards" description="Refer friends and complete tasks while using Klip to earn rewards" layout="columns" image-pos="right" background-color="#F9F9F9">
|
|
28
|
+
</sqm-hero-image><sqm-stat-container space="xxxx-large"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE"><sqm-text><p>Giftcards Earned</p></sqm-text></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><sqm-text><p>Points Balance</p></sqm-text></sqm-big-stat></sqm-stat-container><sqm-titled-section align="center"><sqm-text slot="label"><h3>Share $50 with friends</h3></sqm-text><sqm-text slot="content"><p>
|
|
29
|
+
They’ll get a $50 credit towards a new account and you’ll get up to
|
|
30
|
+
$1200
|
|
31
|
+
</p></sqm-text></sqm-titled-section><sqm-referral-card><sqm-timeline slot="left" icon="circle"><sqm-timeline-entry reward="75" unit="points" desc="Your friends signs up for a free trial">
|
|
32
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friends signs up for Klip Business">
|
|
33
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Your friend qualifies as a good fit for Klip Enterprise">
|
|
34
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases Klip Enterprise">
|
|
35
|
+
</sqm-timeline-entry></sqm-timeline><sqm-portal-container gap="large" slot="right"><sqm-text>Choose how you want to share: </sqm-text><sqm-text><p light="">Your unique referral link:</p><sqm-share-link> </sqm-share-link></sqm-text><sqm-portal-container gap="x-small"><sqm-share-button medium="email">
|
|
36
|
+
Share via email
|
|
37
|
+
</sqm-share-button><sqm-share-button medium="linkedin">
|
|
38
|
+
Share on LinkedIn
|
|
39
|
+
</sqm-share-button><sqm-share-button medium="twitter">
|
|
40
|
+
Tweet about us
|
|
41
|
+
</sqm-share-button></sqm-portal-container></sqm-portal-container></sqm-referral-card></sqm-portal-container><sqm-portal-container direction="column" padding="none" gap="xx-large"><sqm-titled-section align="center"><sqm-text slot="label"><h3>Earn more rewards</h3></sqm-text><sqm-text slot="content"><p>
|
|
42
|
+
Get points while using Klip. Use those points to redeem rewards like
|
|
43
|
+
one free month of Klip Enterprise or two plane tickets to anywhere
|
|
44
|
+
in North America
|
|
45
|
+
</p></sqm-text></sqm-titled-section><sqm-card-feed><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" goal="1" stat-type="/programGoals/count/Follow-on-Social-Media" open-new-tab="true" event-key="socialFollow">
|
|
46
|
+
</sqm-task-card></sqb-program-section><sqm-task-card reward-amount="250" goal="500" show-progress-bar="true" card-title="Spend $500 on Klip Products" description="Earn 250 points when you spend $500 or more on Klip products." button-text="See plans" button-link="https://klip-staging.vercel.app/app/plans" stat-type="/customFields/purchaseTotal" open-new-tab="false">
|
|
47
|
+
</sqm-task-card><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="25" goal="1" card-title="Upload Your First Video" description="Earn 25 points for exploring the Klip platform when you upload your first video." button-text="Upload" button-link="https://klip-staging.vercel.app/app" stat-type="/programGoals/count/Record-First-Video" open-new-tab="false">
|
|
48
|
+
</sqm-task-card></sqb-program-section><sqm-task-card reward-amount="100" goal="5" repeatable="true" show-progress-bar="true" steps="true" card-title="Share 5 Videos" description="Earn 100 points for collaborating each time you share 5 videos." button-text="Share" button-link="https://klip-staging.vercel.app/app" stat-type="/customFields/videosShared" open-new-tab="false">
|
|
49
|
+
</sqm-task-card><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Buy a Business or Enterprise plan and get 1 free month of Klip for being a committed customer." button-text="Upgrade" button-link="https://klip-staging.vercel.app/app/plans" stat-type="/programGoals/count/Upgrade-Plan" open-new-tab="false">
|
|
50
|
+
</sqm-task-card></sqb-program-section><sqm-task-card reward-amount="200" goal="5" show-progress-bar="" steps="" card-title="Purchase 5 Seats" description="Earn 200 points when you expand your Klip Team by purchasing 5 or more seats." button-text="Purchase seats" button-link="https://klip-staging.vercel.app/app/plans" stat-type="/customFields/seatCount" reward-duration="2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z" show-expiry="">
|
|
51
|
+
</sqm-task-card><sqm-task-card reward-amount="250" goal="1" repeatable="" show-progress-bar="" card-title="Upload 1 Hour of Video" description="Record and upload an hour of video and get 250 points for being a super user." button-text="Upload" button-link="https://klip-staging.vercel.app/app" stat-type="/customFields/videoHoursCount" reward-duration="2021-12-31T08:00:00.000Z/2022-01-02T08:00:00.000Z" show-expiry="" finite="3" progress-bar-unit="" reward-unit="Points">
|
|
52
|
+
</sqm-task-card><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="100" goal="1" card-title="Complete an NPS Survey" description="Fill out our NPS survey and get 100 points for giving us honest feedback. Be sure to use your Klip account email when completing the survey." button-text="Complete survey" button-link="https://y5tqgj96plv.typeform.com/to/p6N7lHUk" stat-type="/programGoals/count/NPS-Survey" reward-unit="Points" open-new-tab="true">
|
|
53
|
+
</sqm-task-card></sqb-program-section><sqb-conditional-section condition="'champion' in user.segments"><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="$100" goal="1" card-title="Complete a Case Study" description="Write a Klip case study and earn a $100 Visa Gift Card for letting us know how Klip has helped your team succeed." button-text="Complete case study" button-link="https://y5tqgj96plv.typeform.com/to/CPhkFBBW" stat-type="/programGoals/count/Case-Study" reward-unit="Visa Gift Card" open-new-tab="true">
|
|
54
|
+
</sqm-task-card></sqb-program-section></sqb-conditional-section></sqm-card-feed><sl-tab-group><sl-tab slot="nav" panel="referralLeaderboard">Leaderboard </sl-tab><sl-tab slot="nav" panel="referralHistory">Referral history </sl-tab><sl-tab slot="nav" panel="rewardHistory">Reward history </sl-tab><sl-tab slot="nav" panel="rewardExchange">Redeem </sl-tab><sl-tab-panel name="referralHistory"><sqm-referral-table per-page="4"><sqm-referral-table-user-column column-title="User">
|
|
55
|
+
</sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral status">
|
|
56
|
+
</sqm-referral-table-status-column><sqm-referral-table-rewards-column>
|
|
57
|
+
</sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date referred" date-shown="dateReferralStarted">
|
|
58
|
+
</sqm-referral-table-date-column></sqm-referral-table></sl-tab-panel><sl-tab-panel name="referralLeaderboard"><sqm-portal-container gap="large"><sqm-hero-image image-url="https://i.imgur.com/2evfTx7.png" description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!" layout="columns" image-pos="left" background-color="#EFF8FE">
|
|
59
|
+
</sqm-hero-image><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true">
|
|
60
|
+
</sqm-leaderboard></sqm-portal-container></sl-tab-panel><sl-tab-panel name="rewardHistory"><sqb-program-section program-id=""><sqm-rewards-table per-page="4"><sqm-rewards-table-reward-column></sqm-rewards-table-reward-column><sqm-rewards-table-source-column></sqm-rewards-table-source-column><sqm-rewards-table-status-column></sqm-rewards-table-status-column><sqm-rewards-table-date-column></sqm-rewards-table-date-column></sqm-rewards-table></sqb-program-section></sl-tab-panel><sl-tab-panel name="rewardExchange"><sqm-reward-exchange-list></sqm-reward-exchange-list></sl-tab-panel></sl-tab-group></sqm-portal-container></sqm-portal-container></sqm-brand><style>* { box-sizing: border-box; } body {margin: 0;}:root{--sqm-portal-background: white;}sl-tab-panel::part(base){padding-top: !important;padding-right: !important;padding-bottom: !important;padding-left: !important;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}.facebook-button::part(defaultsharebutton-base):active{outline-color:initial;outline-style:none;outline-width:initial;}</style>
|
|
61
|
+
</body>
|
|
62
|
+
</html>`,
|
|
54
63
|
jsOptions: {},
|
|
55
64
|
user: {
|
|
56
65
|
id: "sam+klip@saasquat.ch",
|
package/demo/toolbar.tsx
CHANGED
|
@@ -298,32 +298,6 @@ function VersionList(props) {
|
|
|
298
298
|
);
|
|
299
299
|
}
|
|
300
300
|
|
|
301
|
-
async function getMockWidget(widget, engagementMedium, element?: HTMLElement) {
|
|
302
|
-
window["mockWidget"] = widget;
|
|
303
|
-
window["sandbox"].initObj = {
|
|
304
|
-
...window["sandbox"].initObj,
|
|
305
|
-
engagementMedium,
|
|
306
|
-
};
|
|
307
|
-
|
|
308
|
-
worker.use(
|
|
309
|
-
rest.put(
|
|
310
|
-
"https://staging.referralsaasquatch.com/api/*",
|
|
311
|
-
(req, res, ctx) => {
|
|
312
|
-
return res(
|
|
313
|
-
ctx.delay(500),
|
|
314
|
-
ctx.status(202, "Mocked status"),
|
|
315
|
-
ctx.json(widgets[window["mockWidget"]])
|
|
316
|
-
);
|
|
317
|
-
}
|
|
318
|
-
)
|
|
319
|
-
);
|
|
320
|
-
document.getElementById("squatchembed").innerHTML = "";
|
|
321
|
-
window["squatch"].widgets().upsertUser({
|
|
322
|
-
...window["sandbox"].initObj,
|
|
323
|
-
element,
|
|
324
|
-
});
|
|
325
|
-
}
|
|
326
|
-
|
|
327
301
|
async function getCustomWidget(engagementMedium) {
|
|
328
302
|
window["sandbox"].initObj = {
|
|
329
303
|
...window["sandbox"].initObj,
|
|
@@ -346,15 +320,59 @@ async function getCustomWidget(engagementMedium) {
|
|
|
346
320
|
document.getElementById("squatchembed").innerHTML = "";
|
|
347
321
|
window["squatch"].widgets().upsertUser({
|
|
348
322
|
...window["sandbox"].initObj,
|
|
349
|
-
element: <div className="sam"></div>,
|
|
350
323
|
});
|
|
351
324
|
}
|
|
352
325
|
|
|
353
326
|
function MockedWidgets(props) {
|
|
354
327
|
const { versions } = props;
|
|
355
328
|
const [engagementMedium, setEngagementMedium] = useState("EMBED");
|
|
329
|
+
const [usePreload, setUsePreload] = useState(false);
|
|
356
330
|
const [showWidget, setShowWidget] = useState(false);
|
|
357
|
-
const [
|
|
331
|
+
const [widget, setWidget] = useState(undefined);
|
|
332
|
+
const container = usePreload && document.getElementById("squatchembed");
|
|
333
|
+
const [popupTrigger, setPopupTrigger] = useState(".squatchpop");
|
|
334
|
+
|
|
335
|
+
async function getMockWidget(
|
|
336
|
+
widget,
|
|
337
|
+
containerOverride: string | undefined = undefined
|
|
338
|
+
) {
|
|
339
|
+
window["mockWidget"] = widget;
|
|
340
|
+
window["sandbox"].initObj = {
|
|
341
|
+
...window["sandbox"].initObj,
|
|
342
|
+
engagementMedium,
|
|
343
|
+
};
|
|
344
|
+
|
|
345
|
+
worker.use(
|
|
346
|
+
rest.put(
|
|
347
|
+
"https://staging.referralsaasquatch.com/api/*",
|
|
348
|
+
(req, res, ctx) => {
|
|
349
|
+
return res(
|
|
350
|
+
ctx.delay(500),
|
|
351
|
+
ctx.status(202, "Mocked status"),
|
|
352
|
+
ctx.json(widgets[window["mockWidget"]])
|
|
353
|
+
);
|
|
354
|
+
}
|
|
355
|
+
)
|
|
356
|
+
);
|
|
357
|
+
const defaultElement = document.getElementById(
|
|
358
|
+
"squatchembed"
|
|
359
|
+
) as HTMLElement;
|
|
360
|
+
defaultElement.innerHTML = "";
|
|
361
|
+
document.getElementById("test-selector").innerHTML = "";
|
|
362
|
+
|
|
363
|
+
if (!usePreload) defaultElement.setAttribute("style", "");
|
|
364
|
+
const { widget: embedWidget } = await window["squatch"]
|
|
365
|
+
.widgets()
|
|
366
|
+
.upsertUser({
|
|
367
|
+
...window["sandbox"].initObj,
|
|
368
|
+
container: (usePreload && containerOverride) || container,
|
|
369
|
+
trigger: popupTrigger,
|
|
370
|
+
});
|
|
371
|
+
|
|
372
|
+
if (showWidget) embedWidget.open();
|
|
373
|
+
setWidget(embedWidget);
|
|
374
|
+
}
|
|
375
|
+
|
|
358
376
|
return (
|
|
359
377
|
<details
|
|
360
378
|
title={"Version: " + window["sandbox"].version || "Head"}
|
|
@@ -362,88 +380,103 @@ function MockedWidgets(props) {
|
|
|
362
380
|
id={`dropdown-basic-1`}
|
|
363
381
|
>
|
|
364
382
|
<summary>Mocked Widgets</summary>
|
|
365
|
-
<
|
|
366
|
-
<
|
|
367
|
-
|
|
368
|
-
name="embed"
|
|
369
|
-
checked={engagementMedium === "EMBED"}
|
|
370
|
-
onClick={() => setEngagementMedium("EMBED")}
|
|
371
|
-
></input>
|
|
383
|
+
<h4>Engagement Medium</h4>
|
|
384
|
+
<form onSubmit={(e) => e.preventDefault()}>
|
|
385
|
+
<label>Embed</label>
|
|
372
386
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
387
|
+
<input
|
|
388
|
+
type="radio"
|
|
389
|
+
name="embed"
|
|
390
|
+
checked={engagementMedium === "EMBED"}
|
|
391
|
+
onClick={() => setEngagementMedium("EMBED")}
|
|
392
|
+
></input>
|
|
393
|
+
|
|
394
|
+
<label>Popup</label>
|
|
395
|
+
<input
|
|
396
|
+
type="radio"
|
|
397
|
+
name="popup"
|
|
398
|
+
checked={engagementMedium === "POPUP"}
|
|
399
|
+
onClick={() => setEngagementMedium("POPUP")}
|
|
400
|
+
></input>
|
|
401
|
+
<br />
|
|
402
|
+
<h4>Preload</h4>
|
|
403
|
+
<label>true</label>
|
|
404
|
+
<input
|
|
405
|
+
type="radio"
|
|
406
|
+
name="preload"
|
|
407
|
+
checked={usePreload === true}
|
|
408
|
+
onClick={() => setUsePreload(true)}
|
|
409
|
+
></input>
|
|
410
|
+
|
|
411
|
+
<label>false</label>
|
|
412
|
+
<input
|
|
413
|
+
type="radio"
|
|
414
|
+
name="noPreload"
|
|
415
|
+
checked={usePreload === false}
|
|
416
|
+
onClick={() => setUsePreload(false)}
|
|
417
|
+
></input>
|
|
418
|
+
<br />
|
|
419
|
+
<label>squatch popup trigger</label>
|
|
420
|
+
<input
|
|
421
|
+
value={popupTrigger}
|
|
422
|
+
onChange={(e) => setPopupTrigger(e.target.value)}
|
|
423
|
+
></input>
|
|
424
|
+
</form>
|
|
380
425
|
<br />
|
|
381
426
|
<button
|
|
382
427
|
onClick={() => {
|
|
383
428
|
if (showWidget) {
|
|
384
429
|
setShowWidget(false);
|
|
430
|
+
widget?.close();
|
|
385
431
|
} else {
|
|
386
|
-
|
|
387
|
-
|
|
432
|
+
setShowWidget(true);
|
|
433
|
+
widget?.open();
|
|
388
434
|
}
|
|
389
435
|
}}
|
|
390
436
|
>
|
|
391
437
|
{showWidget ? "hide widget" : "show widget"}
|
|
392
438
|
</button>
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
439
|
+
{engagementMedium === "POPUP" ? (
|
|
440
|
+
<button
|
|
441
|
+
id={popupTrigger.substring(1)}
|
|
442
|
+
className={popupTrigger.substring(1)}
|
|
443
|
+
>
|
|
444
|
+
Open popup
|
|
445
|
+
</button>
|
|
446
|
+
) : (
|
|
447
|
+
""
|
|
448
|
+
)}
|
|
449
|
+
<hr />
|
|
450
|
+
<button onClick={() => getMockWidget("QuirksVanillaGA")}>
|
|
402
451
|
Quirks mode - Vanilla
|
|
403
452
|
</button>
|
|
404
|
-
<button onClick={() => getMockWidget("QuirksMintGA"
|
|
453
|
+
<button onClick={() => getMockWidget("QuirksMintGA")}>
|
|
405
454
|
Quirks mode - Mint
|
|
406
455
|
</button>
|
|
407
|
-
<button onClick={() => getMockWidget("classic"
|
|
408
|
-
|
|
409
|
-
</button>
|
|
410
|
-
<button
|
|
411
|
-
onClick={() => getMockWidget("MintGA", engagementMedium, element)}
|
|
412
|
-
>
|
|
413
|
-
GA - Mint
|
|
414
|
-
</button>
|
|
415
|
-
<button onClick={() => getMockWidget("VanillaGA", engagementMedium)}>
|
|
416
|
-
GA - Vanilla
|
|
417
|
-
</button>
|
|
418
|
-
<button
|
|
419
|
-
onClick={() => getMockWidget("MintGAContainer", engagementMedium)}
|
|
420
|
-
>
|
|
456
|
+
<button onClick={() => getMockWidget("classic")}>Classic</button>
|
|
457
|
+
<button onClick={() => getMockWidget("MintGA")}>GA - Mint</button>
|
|
458
|
+
<button onClick={() => getMockWidget("VanillaGA")}>GA - Vanilla</button>
|
|
459
|
+
<button onClick={() => getMockWidget("MintGAContainer")}>
|
|
421
460
|
Mint - With Container
|
|
422
461
|
</button>
|
|
423
|
-
<button
|
|
424
|
-
onClick={() => getMockWidget("QuirksMintGAContainer", engagementMedium)}
|
|
425
|
-
>
|
|
462
|
+
<button onClick={() => getMockWidget("QuirksMintGAContainer")}>
|
|
426
463
|
Quirks mode - Mint - With Container
|
|
427
464
|
</button>
|
|
428
|
-
<button
|
|
429
|
-
onClick={() =>
|
|
430
|
-
getMockWidget("MintGAContainerDisplayBlock", engagementMedium)
|
|
431
|
-
}
|
|
432
|
-
>
|
|
465
|
+
<button onClick={() => getMockWidget("MintGAContainerDisplayBlock")}>
|
|
433
466
|
Mint - With Container + Display Block
|
|
434
467
|
</button>
|
|
435
468
|
<button
|
|
436
|
-
onClick={() =>
|
|
437
|
-
getMockWidget("QuirksMintGAContainerDisplayBlock", engagementMedium)
|
|
438
|
-
}
|
|
469
|
+
onClick={() => getMockWidget("QuirksMintGAContainerDisplayBlock")}
|
|
439
470
|
>
|
|
440
471
|
Quirks mode - Mint - With Container + Display Block
|
|
441
472
|
</button>
|
|
442
|
-
<button
|
|
443
|
-
onClick={() => getMockWidget("VanillaGANoContainer", engagementMedium)}
|
|
444
|
-
>
|
|
473
|
+
<button onClick={() => getMockWidget("VanillaGANoContainer")}>
|
|
445
474
|
Vanilla - No Container
|
|
446
475
|
</button>
|
|
476
|
+
<button onClick={() => getMockWidget("MintGA", "#test-selector")}>
|
|
477
|
+
Mint - Selector
|
|
478
|
+
</button>
|
|
479
|
+
<hr />
|
|
447
480
|
</details>
|
|
448
481
|
);
|
|
449
482
|
}
|
package/dist/squatch.esm.js
CHANGED
|
@@ -541,7 +541,7 @@ class Widget {
|
|
|
541
541
|
const {
|
|
542
542
|
contentWindow
|
|
543
543
|
} = this.frame;
|
|
544
|
-
if (!contentWindow) throw new Error("Squatch.
|
|
544
|
+
if (!contentWindow) throw new Error("Squatch.js frame inner frame is empty");
|
|
545
545
|
const frameDoc = contentWindow.document;
|
|
546
546
|
|
|
547
547
|
function search() {
|
|
@@ -688,15 +688,48 @@ const _log$5 = debug__default("squatch-js:EMBEDwidget");
|
|
|
688
688
|
|
|
689
689
|
|
|
690
690
|
class EmbedWidget extends Widget {
|
|
691
|
-
constructor(params,
|
|
691
|
+
constructor(params, container) {
|
|
692
692
|
super(params);
|
|
693
|
-
|
|
694
|
-
|
|
693
|
+
let element;
|
|
694
|
+
|
|
695
|
+
if (typeof container === "string") {
|
|
696
|
+
// selector is a string
|
|
697
|
+
element = document.querySelector(container);
|
|
698
|
+
|
|
699
|
+
_log$5("loading widget with selector", element); // selector is an HTML element
|
|
700
|
+
|
|
701
|
+
} else if (container instanceof HTMLElement) {
|
|
702
|
+
element = container;
|
|
703
|
+
|
|
704
|
+
_log$5("loading widget with container", element); // garbage container found
|
|
705
|
+
|
|
706
|
+
} else if (container) {
|
|
707
|
+
element = null;
|
|
708
|
+
|
|
709
|
+
_log$5("container must be an HTMLElement or string", container); // find element on page
|
|
710
|
+
|
|
711
|
+
} else {
|
|
712
|
+
element = document.querySelector("#squatchembed") || document.querySelector(".squatchembed");
|
|
713
|
+
|
|
714
|
+
_log$5("loading widget with default selector", element);
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
if (!(element instanceof HTMLElement)) throw new Error(`element with selector '${container}' not found.'`);
|
|
695
718
|
this.element = element;
|
|
696
719
|
}
|
|
697
720
|
|
|
698
721
|
async load() {
|
|
699
|
-
if (
|
|
722
|
+
if (this.context.container) {
|
|
723
|
+
this.element.style.visibility = "hidden";
|
|
724
|
+
this.element.style.height = "0";
|
|
725
|
+
this.element.style["overflow-y"] = "hidden"; // Widget reloaded - replace existing element
|
|
726
|
+
|
|
727
|
+
if (this.element.firstChild) {
|
|
728
|
+
this.element.replaceChild(this.frame, this.element.firstChild); // Add iframe for the first time
|
|
729
|
+
} else {
|
|
730
|
+
this.element.appendChild(this.frame);
|
|
731
|
+
}
|
|
732
|
+
} else if (!this.element.firstChild || this.element.firstChild.nodeName === "#text") {
|
|
700
733
|
this.element.appendChild(this.frame);
|
|
701
734
|
}
|
|
702
735
|
|
|
@@ -738,16 +771,41 @@ class EmbedWidget extends Widget {
|
|
|
738
771
|
|
|
739
772
|
this.frame.height = height;
|
|
740
773
|
}
|
|
741
|
-
});
|
|
774
|
+
});
|
|
775
|
+
ro.observe(await this._findInnerContainer()); // Regular load - trigger event
|
|
742
776
|
|
|
743
|
-
|
|
777
|
+
if (!this.context.container) {
|
|
778
|
+
this._loadEvent(_sqh);
|
|
744
779
|
|
|
745
|
-
|
|
780
|
+
_log$5("loaded");
|
|
781
|
+
}
|
|
782
|
+
});
|
|
783
|
+
} // Un-hide if element is available and refresh data
|
|
746
784
|
|
|
747
|
-
this._loadEvent(_sqh);
|
|
748
785
|
|
|
749
|
-
|
|
750
|
-
|
|
786
|
+
open() {
|
|
787
|
+
var _this$frame, _this$frame$contentDo, _this$frame2, _this$frame2$contentW, _this$frame3, _this$frame3$contentW;
|
|
788
|
+
|
|
789
|
+
if (!this.frame) return _log$5("no target element to open");
|
|
790
|
+
this.element.style.visibility = "unset";
|
|
791
|
+
this.element.style.height = "auto";
|
|
792
|
+
this.element.style["overflow-y"] = "auto";
|
|
793
|
+
(_this$frame = this.frame) == null ? void 0 : (_this$frame$contentDo = _this$frame.contentDocument) == null ? void 0 : _this$frame$contentDo.dispatchEvent(new CustomEvent("sq:refresh"));
|
|
794
|
+
|
|
795
|
+
const _sqh = ((_this$frame2 = this.frame) == null ? void 0 : (_this$frame2$contentW = _this$frame2.contentWindow) == null ? void 0 : _this$frame2$contentW.squatch) || ((_this$frame3 = this.frame) == null ? void 0 : (_this$frame3$contentW = _this$frame3.contentWindow) == null ? void 0 : _this$frame3$contentW.widgetIdent);
|
|
796
|
+
|
|
797
|
+
this._loadEvent(_sqh);
|
|
798
|
+
|
|
799
|
+
_log$5("loaded");
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
close() {
|
|
803
|
+
if (!this.frame) return _log$5("no target element to close");
|
|
804
|
+
this.element.style.visibility = "hidden";
|
|
805
|
+
this.element.style.height = "0";
|
|
806
|
+
this.element.style["overflow-y"] = "hidden";
|
|
807
|
+
|
|
808
|
+
_log$5("Embed widget closed");
|
|
751
809
|
}
|
|
752
810
|
|
|
753
811
|
_error(rs, mode = "embed", style = "") {
|
|
@@ -771,12 +829,18 @@ const _log$4 = debug__default("squatch-js:POPUPwidget");
|
|
|
771
829
|
class PopupWidget extends Widget {
|
|
772
830
|
constructor(params, trigger = ".squatchpop") {
|
|
773
831
|
super(params);
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
832
|
+
|
|
833
|
+
try {
|
|
834
|
+
this.triggerElement
|
|
835
|
+
/* HTMLButton */
|
|
836
|
+
= document.querySelector(trigger);
|
|
837
|
+
if (trigger && !this.triggerElement) _log$4("No element found with trigger selector", trigger);
|
|
838
|
+
} catch (_unused) {
|
|
839
|
+
_log$4("Not a valid selector", trigger);
|
|
840
|
+
} // Trigger is optional
|
|
841
|
+
|
|
777
842
|
|
|
778
843
|
if (this.triggerElement) {
|
|
779
|
-
//@ts-ignore -- we assume this is an element that can have click events
|
|
780
844
|
this.triggerElement.onclick = () => {
|
|
781
845
|
this.open();
|
|
782
846
|
};
|
|
@@ -787,7 +851,6 @@ class PopupWidget extends Widget {
|
|
|
787
851
|
this.triggerWhenCTA = document.querySelector(".squatchpop");
|
|
788
852
|
|
|
789
853
|
if (trigger === "#cta" && this.triggerWhenCTA) {
|
|
790
|
-
//@ts-ignore -- we assume this is an element that can have click events
|
|
791
854
|
this.triggerWhenCTA.onclick = () => {
|
|
792
855
|
this.open();
|
|
793
856
|
};
|
|
@@ -871,6 +934,8 @@ class PopupWidget extends Widget {
|
|
|
871
934
|
const frameDoc = contentWindow.document; // Adjust frame height when size of body changes
|
|
872
935
|
|
|
873
936
|
domready(frameDoc, () => {
|
|
937
|
+
var _frame$contentDocumen;
|
|
938
|
+
|
|
874
939
|
const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
|
|
875
940
|
|
|
876
941
|
const ctaElement = frameDoc.getElementById("cta");
|
|
@@ -882,6 +947,7 @@ class PopupWidget extends Widget {
|
|
|
882
947
|
|
|
883
948
|
popupdiv.style.visibility = "visible";
|
|
884
949
|
popupdiv.style.top = "0px";
|
|
950
|
+
(_frame$contentDocumen = frame.contentDocument) == null ? void 0 : _frame$contentDocumen.dispatchEvent(new CustomEvent("sq:refresh"));
|
|
885
951
|
|
|
886
952
|
this._loadEvent(_sqh);
|
|
887
953
|
|
|
@@ -1123,8 +1189,9 @@ class Widgets {
|
|
|
1123
1189
|
* @param {string} config.user.accountId The user account id
|
|
1124
1190
|
* @param {WidgetType} config.widgetType The content of the widget.
|
|
1125
1191
|
* @param {EngagementMedium} config.engagementMedium How to display the widget.
|
|
1126
|
-
* @param {string} config.jwt the JSON Web Token (JWT) that is used
|
|
1127
|
-
*
|
|
1192
|
+
* @param {string} config.jwt the JSON Web Token (JWT) that is used to validate the data (can be disabled)
|
|
1193
|
+
* @param {HTMLElement | string | undefined} config.container Element to load the widget into
|
|
1194
|
+
* @param {string | undefined} config.trigger Trigger element for opening the popup widget
|
|
1128
1195
|
*
|
|
1129
1196
|
* @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
|
|
1130
1197
|
*/
|
|
@@ -1140,7 +1207,9 @@ class Widgets {
|
|
|
1140
1207
|
widget: this._renderWidget(response, clean, {
|
|
1141
1208
|
type: "upsert",
|
|
1142
1209
|
user: clean.user,
|
|
1143
|
-
engagementMedium: config.engagementMedium
|
|
1210
|
+
engagementMedium: config.engagementMedium,
|
|
1211
|
+
container: config.container,
|
|
1212
|
+
trigger: config.trigger
|
|
1144
1213
|
}),
|
|
1145
1214
|
user: response.user
|
|
1146
1215
|
};
|
|
@@ -1324,10 +1393,10 @@ class Widgets {
|
|
|
1324
1393
|
}
|
|
1325
1394
|
|
|
1326
1395
|
if (!displayCTA && config.engagementMedium === "EMBED") {
|
|
1327
|
-
widget = new EmbedWidget(params);
|
|
1396
|
+
widget = new EmbedWidget(params, params.context.container);
|
|
1328
1397
|
widget.load();
|
|
1329
1398
|
} else if (!displayCTA && config.engagementMedium === "POPUP") {
|
|
1330
|
-
widget = new PopupWidget(params);
|
|
1399
|
+
widget = new PopupWidget(params, params.context.trigger);
|
|
1331
1400
|
widget.load();
|
|
1332
1401
|
if (displayOnLoad) widget.open();
|
|
1333
1402
|
} else if (displayCTA) {
|