@saasquatch/squatch-js 2.3.2-22 → 2.3.2-26
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/demo/templates/MintGAContainer.ts +61 -51
- package/demo/templates/MintGAContainerDisplayBlock.ts +60 -51
- package/demo/templates/QuirksMintGAContainer.ts +59 -50
- package/demo/templates/QuirksMintGAContainerDisplayBlock.ts +59 -50
- package/demo/toolbar.tsx +45 -121
- package/dist/squatch.esm.js +28 -42
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +28 -42
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +1 -1
- package/dist/stats.html +1 -1
- package/dist/types.d.ts +3 -4
- package/dist/widgets/EmbedWidget.d.ts +1 -1
- package/dist/widgets/Widgets.d.ts +1 -1
- package/package.json +1 -1
|
@@ -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,40 +298,6 @@ function VersionList(props) {
|
|
|
298
298
|
);
|
|
299
299
|
}
|
|
300
300
|
|
|
301
|
-
async function getMockWidget(
|
|
302
|
-
widget,
|
|
303
|
-
engagementMedium,
|
|
304
|
-
element?: HTMLElement,
|
|
305
|
-
showWidget?: boolean
|
|
306
|
-
) {
|
|
307
|
-
window["mockWidget"] = widget;
|
|
308
|
-
window["sandbox"].initObj = {
|
|
309
|
-
...window["sandbox"].initObj,
|
|
310
|
-
engagementMedium,
|
|
311
|
-
};
|
|
312
|
-
|
|
313
|
-
worker.use(
|
|
314
|
-
rest.put(
|
|
315
|
-
"https://staging.referralsaasquatch.com/api/*",
|
|
316
|
-
(req, res, ctx) => {
|
|
317
|
-
return res(
|
|
318
|
-
ctx.delay(500),
|
|
319
|
-
ctx.status(202, "Mocked status"),
|
|
320
|
-
ctx.json(widgets[window["mockWidget"]])
|
|
321
|
-
);
|
|
322
|
-
}
|
|
323
|
-
)
|
|
324
|
-
);
|
|
325
|
-
document.getElementById("squatchembed").innerHTML = "";
|
|
326
|
-
|
|
327
|
-
await window["squatch"].widgets().upsertUser({
|
|
328
|
-
...window["sandbox"].initObj,
|
|
329
|
-
element,
|
|
330
|
-
});
|
|
331
|
-
|
|
332
|
-
if (showWidget) element.open();
|
|
333
|
-
}
|
|
334
|
-
|
|
335
301
|
async function getCustomWidget(engagementMedium) {
|
|
336
302
|
window["sandbox"].initObj = {
|
|
337
303
|
...window["sandbox"].initObj,
|
|
@@ -362,9 +328,41 @@ function MockedWidgets(props) {
|
|
|
362
328
|
const [engagementMedium, setEngagementMedium] = useState("EMBED");
|
|
363
329
|
const [usePreload, setUsePreload] = useState(false);
|
|
364
330
|
const [showWidget, setShowWidget] = useState(false);
|
|
365
|
-
|
|
331
|
+
const [widget, setWidget] = useState(undefined);
|
|
366
332
|
const element = usePreload && document.getElementById("squatchembed");
|
|
367
333
|
|
|
334
|
+
async function getMockWidget(widget) {
|
|
335
|
+
window["mockWidget"] = widget;
|
|
336
|
+
window["sandbox"].initObj = {
|
|
337
|
+
...window["sandbox"].initObj,
|
|
338
|
+
engagementMedium,
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
worker.use(
|
|
342
|
+
rest.put(
|
|
343
|
+
"https://staging.referralsaasquatch.com/api/*",
|
|
344
|
+
(req, res, ctx) => {
|
|
345
|
+
return res(
|
|
346
|
+
ctx.delay(500),
|
|
347
|
+
ctx.status(202, "Mocked status"),
|
|
348
|
+
ctx.json(widgets[window["mockWidget"]])
|
|
349
|
+
);
|
|
350
|
+
}
|
|
351
|
+
)
|
|
352
|
+
);
|
|
353
|
+
document.getElementById("squatchembed").innerHTML = "";
|
|
354
|
+
|
|
355
|
+
const { widget: embedWidget } = await window["squatch"]
|
|
356
|
+
.widgets()
|
|
357
|
+
.upsertUser({
|
|
358
|
+
...window["sandbox"].initObj,
|
|
359
|
+
element,
|
|
360
|
+
});
|
|
361
|
+
|
|
362
|
+
if (showWidget) embedWidget.open();
|
|
363
|
+
setWidget(embedWidget);
|
|
364
|
+
}
|
|
365
|
+
|
|
368
366
|
return (
|
|
369
367
|
<details
|
|
370
368
|
title={"Version: " + window["sandbox"].version || "Head"}
|
|
@@ -413,114 +411,40 @@ function MockedWidgets(props) {
|
|
|
413
411
|
onClick={() => {
|
|
414
412
|
if (showWidget) {
|
|
415
413
|
setShowWidget(false);
|
|
416
|
-
|
|
414
|
+
widget?.close();
|
|
417
415
|
} else {
|
|
418
416
|
setShowWidget(true);
|
|
419
|
-
|
|
417
|
+
widget?.open();
|
|
420
418
|
}
|
|
421
419
|
}}
|
|
422
420
|
>
|
|
423
421
|
{showWidget ? "hide widget" : "show widget"}
|
|
424
422
|
</button>
|
|
425
423
|
<br />
|
|
426
|
-
<button
|
|
427
|
-
onClick={() =>
|
|
428
|
-
getMockWidget(
|
|
429
|
-
"QuirksVanillaGA",
|
|
430
|
-
engagementMedium,
|
|
431
|
-
element,
|
|
432
|
-
showWidget
|
|
433
|
-
)
|
|
434
|
-
}
|
|
435
|
-
>
|
|
424
|
+
<button onClick={() => getMockWidget("QuirksVanillaGA")}>
|
|
436
425
|
Quirks mode - Vanilla
|
|
437
426
|
</button>
|
|
438
|
-
<button
|
|
439
|
-
onClick={() =>
|
|
440
|
-
getMockWidget("QuirksMintGA", engagementMedium, element, showWidget)
|
|
441
|
-
}
|
|
442
|
-
>
|
|
427
|
+
<button onClick={() => getMockWidget("QuirksMintGA")}>
|
|
443
428
|
Quirks mode - Mint
|
|
444
429
|
</button>
|
|
445
|
-
<button
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
>
|
|
450
|
-
Classic
|
|
451
|
-
</button>
|
|
452
|
-
<button
|
|
453
|
-
onClick={() =>
|
|
454
|
-
getMockWidget("MintGA", engagementMedium, element, showWidget)
|
|
455
|
-
}
|
|
456
|
-
>
|
|
457
|
-
GA - Mint
|
|
458
|
-
</button>
|
|
459
|
-
<button
|
|
460
|
-
onClick={() =>
|
|
461
|
-
getMockWidget("VanillaGA", engagementMedium, element, showWidget)
|
|
462
|
-
}
|
|
463
|
-
>
|
|
464
|
-
GA - Vanilla
|
|
465
|
-
</button>
|
|
466
|
-
<button
|
|
467
|
-
onClick={() =>
|
|
468
|
-
getMockWidget(
|
|
469
|
-
"MintGAContainer",
|
|
470
|
-
engagementMedium,
|
|
471
|
-
element,
|
|
472
|
-
showWidget
|
|
473
|
-
)
|
|
474
|
-
}
|
|
475
|
-
>
|
|
430
|
+
<button onClick={() => getMockWidget("classic")}>Classic</button>
|
|
431
|
+
<button onClick={() => getMockWidget("MintGA")}>GA - Mint</button>
|
|
432
|
+
<button onClick={() => getMockWidget("VanillaGA")}>GA - Vanilla</button>
|
|
433
|
+
<button onClick={() => getMockWidget("MintGAContainer")}>
|
|
476
434
|
Mint - With Container
|
|
477
435
|
</button>
|
|
478
|
-
<button
|
|
479
|
-
onClick={() =>
|
|
480
|
-
getMockWidget(
|
|
481
|
-
"QuirksMintGAContainer",
|
|
482
|
-
engagementMedium,
|
|
483
|
-
element,
|
|
484
|
-
showWidget
|
|
485
|
-
)
|
|
486
|
-
}
|
|
487
|
-
>
|
|
436
|
+
<button onClick={() => getMockWidget("QuirksMintGAContainer")}>
|
|
488
437
|
Quirks mode - Mint - With Container
|
|
489
438
|
</button>
|
|
490
|
-
<button
|
|
491
|
-
onClick={() =>
|
|
492
|
-
getMockWidget(
|
|
493
|
-
"MintGAContainerDisplayBlock",
|
|
494
|
-
engagementMedium,
|
|
495
|
-
element,
|
|
496
|
-
showWidget
|
|
497
|
-
)
|
|
498
|
-
}
|
|
499
|
-
>
|
|
439
|
+
<button onClick={() => getMockWidget("MintGAContainerDisplayBlock")}>
|
|
500
440
|
Mint - With Container + Display Block
|
|
501
441
|
</button>
|
|
502
442
|
<button
|
|
503
|
-
onClick={() =>
|
|
504
|
-
getMockWidget(
|
|
505
|
-
"QuirksMintGAContainerDisplayBlock",
|
|
506
|
-
engagementMedium,
|
|
507
|
-
element,
|
|
508
|
-
showWidget
|
|
509
|
-
)
|
|
510
|
-
}
|
|
443
|
+
onClick={() => getMockWidget("QuirksMintGAContainerDisplayBlock")}
|
|
511
444
|
>
|
|
512
445
|
Quirks mode - Mint - With Container + Display Block
|
|
513
446
|
</button>
|
|
514
|
-
<button
|
|
515
|
-
onClick={() =>
|
|
516
|
-
getMockWidget(
|
|
517
|
-
"VanillaGANoContainer",
|
|
518
|
-
engagementMedium,
|
|
519
|
-
element,
|
|
520
|
-
showWidget
|
|
521
|
-
)
|
|
522
|
-
}
|
|
523
|
-
>
|
|
447
|
+
<button onClick={() => getMockWidget("VanillaGANoContainer")}>
|
|
524
448
|
Vanilla - No Container
|
|
525
449
|
</button>
|
|
526
450
|
</details>
|
package/dist/squatch.esm.js
CHANGED
|
@@ -464,7 +464,6 @@ class Widget {
|
|
|
464
464
|
};
|
|
465
465
|
}
|
|
466
466
|
|
|
467
|
-
console.log("SAM LOOK", this, this.analyticsApi);
|
|
468
467
|
this.analyticsApi.pushAnalyticsLoadEvent(params).then(response => {
|
|
469
468
|
_log$6(`${params.engagementMedium} loaded event recorded.`);
|
|
470
469
|
}).catch(ex => {
|
|
@@ -690,35 +689,28 @@ const _log$5 = debug__default("squatch-js:EMBEDwidget");
|
|
|
690
689
|
|
|
691
690
|
class EmbedWidget extends Widget {
|
|
692
691
|
constructor(params, selector = "#squatchembed") {
|
|
693
|
-
super(params);
|
|
694
|
-
|
|
695
|
-
if (params.context.
|
|
696
|
-
this.
|
|
697
|
-
this.targetElement.open = this.open;
|
|
698
|
-
this.targetElement.close = this.close;
|
|
699
|
-
this.targetElement.frame = this.frame;
|
|
700
|
-
this.targetElement._loadEvent = this._loadEvent;
|
|
701
|
-
this.targetElement.analyticsApi = this.analyticsApi;
|
|
692
|
+
super(params);
|
|
693
|
+
|
|
694
|
+
if (params.context.container) {
|
|
695
|
+
this.hasContainer = true;
|
|
702
696
|
}
|
|
703
697
|
|
|
704
|
-
const element = document.querySelector(selector) || document.querySelector(".squatchembed");
|
|
705
|
-
if (element
|
|
698
|
+
const element = document.querySelector(selector) || document.querySelector(".squatchembed") || params.context.container;
|
|
699
|
+
if (!element) throw new Error(`element with selector '${selector}' not found.'`);
|
|
706
700
|
this.element = element;
|
|
707
701
|
}
|
|
708
702
|
|
|
709
703
|
async load() {
|
|
710
|
-
if (this.
|
|
711
|
-
this.
|
|
712
|
-
this.
|
|
713
|
-
this.
|
|
704
|
+
if (this.hasContainer) {
|
|
705
|
+
this.element.style.visibility = "hidden";
|
|
706
|
+
this.element.style.height = "0";
|
|
707
|
+
this.element.style["overflow-y"] = "hidden"; // Widget reloaded - replace existing element
|
|
714
708
|
|
|
715
|
-
if (this.
|
|
716
|
-
this.
|
|
709
|
+
if (this.element.firstChild) {
|
|
710
|
+
this.element.replaceChild(this.frame, this.element.firstChild); // Add iframe for the first time
|
|
717
711
|
} else {
|
|
718
|
-
this.
|
|
712
|
+
this.element.appendChild(this.frame);
|
|
719
713
|
}
|
|
720
|
-
|
|
721
|
-
this.element = this.targetElement;
|
|
722
714
|
} else if (!this.element.firstChild || this.element.firstChild.nodeName === "#text") {
|
|
723
715
|
this.element.appendChild(this.frame);
|
|
724
716
|
}
|
|
@@ -764,7 +756,7 @@ class EmbedWidget extends Widget {
|
|
|
764
756
|
});
|
|
765
757
|
ro.observe(await this._findInnerContainer()); // Regular load - trigger event
|
|
766
758
|
|
|
767
|
-
if (!this.
|
|
759
|
+
if (!this.hasContainer) {
|
|
768
760
|
this._loadEvent(_sqh);
|
|
769
761
|
|
|
770
762
|
_log$5("loaded");
|
|
@@ -774,30 +766,27 @@ class EmbedWidget extends Widget {
|
|
|
774
766
|
|
|
775
767
|
|
|
776
768
|
open() {
|
|
777
|
-
var
|
|
769
|
+
var _this$frame, _this$frame$contentDo, _this$frame2, _this$frame2$contentW, _this$frame3, _this$frame3$contentW;
|
|
778
770
|
|
|
779
771
|
//@ts-ignore type is set in constructor
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
element.style.
|
|
783
|
-
element.style
|
|
784
|
-
|
|
785
|
-
(_element$frame = element.frame) == null ? void 0 : (_element$frame$conten = _element$frame.contentDocument) == null ? void 0 : _element$frame$conten.dispatchEvent(new CustomEvent("sq:refresh"));
|
|
772
|
+
if (!this.frame) return _log$5("no target element to open");
|
|
773
|
+
this.element.style.visibility = "unset";
|
|
774
|
+
this.element.style.height = "auto";
|
|
775
|
+
this.element.style["overflow-y"] = "auto";
|
|
776
|
+
(_this$frame = this.frame) == null ? void 0 : (_this$frame$contentDo = _this$frame.contentDocument) == null ? void 0 : _this$frame$contentDo.dispatchEvent(new CustomEvent("sq:refresh"));
|
|
786
777
|
|
|
787
|
-
const _sqh = ((
|
|
778
|
+
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);
|
|
788
779
|
|
|
789
|
-
|
|
780
|
+
this._loadEvent(_sqh);
|
|
790
781
|
|
|
791
782
|
_log$5("loaded");
|
|
792
783
|
}
|
|
793
784
|
|
|
794
785
|
close() {
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
element.style
|
|
799
|
-
element.style.height = "0";
|
|
800
|
-
element.style["overflow-y"] = "hidden";
|
|
786
|
+
if (!this.frame) return _log$5("no target element to close");
|
|
787
|
+
this.element.style.visibility = "hidden";
|
|
788
|
+
this.element.style.height = "0";
|
|
789
|
+
this.element.style["overflow-y"] = "hidden";
|
|
801
790
|
|
|
802
791
|
_log$5("Embed widget closed");
|
|
803
792
|
}
|
|
@@ -1177,7 +1166,7 @@ class Widgets {
|
|
|
1177
1166
|
* @param {EngagementMedium} config.engagementMedium How to display the widget.
|
|
1178
1167
|
* @param {string} config.jwt the JSON Web Token (JWT) that is used
|
|
1179
1168
|
* to validate the data (can be disabled)
|
|
1180
|
-
@param {HTMLElement
|
|
1169
|
+
@param {HTMLElement} config.container Element to load the widget into
|
|
1181
1170
|
*
|
|
1182
1171
|
* @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
|
|
1183
1172
|
*/
|
|
@@ -1194,7 +1183,7 @@ class Widgets {
|
|
|
1194
1183
|
type: "upsert",
|
|
1195
1184
|
user: clean.user,
|
|
1196
1185
|
engagementMedium: config.engagementMedium,
|
|
1197
|
-
|
|
1186
|
+
container: config.container
|
|
1198
1187
|
}),
|
|
1199
1188
|
user: response.user
|
|
1200
1189
|
};
|
|
@@ -1322,9 +1311,6 @@ class Widgets {
|
|
|
1322
1311
|
let displayOnLoad = false;
|
|
1323
1312
|
let displayCTA = false;
|
|
1324
1313
|
const opts = response.jsOptions || "";
|
|
1325
|
-
console.log("params config??", {
|
|
1326
|
-
context
|
|
1327
|
-
});
|
|
1328
1314
|
const params = {
|
|
1329
1315
|
content: response.template,
|
|
1330
1316
|
type: config.widgetType || opts.widget.defaultWidgetType,
|