@saasquatch/squatch-js 2.3.1-7 → 2.3.2-10
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 +6 -1
- package/demo/generate.tsx +2 -6
- package/demo/templates/MintGA.ts +53 -2
- package/demo/templates/MintGAContainer.ts +52 -2
- package/demo/templates/MintGAContainerDisplayBlock.ts +52 -2
- package/demo/templates/QuirksMintGA.ts +52 -2
- package/demo/templates/QuirksMintGAContainer.ts +52 -2
- package/demo/templates/QuirksMintGAContainerDisplayBlock.ts +52 -2
- package/demo/toolbar.tsx +55 -12
- package/dist/squatch.min.js +2 -2
- package/dist/stats.html +1 -1
- package/package.json +2 -2
|
@@ -1,6 +1,56 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
template:
|
|
3
|
-
|
|
2
|
+
template: `
|
|
3
|
+
<html>
|
|
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.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiJ9fQ.a2nYYrSJ81FHXlCU-Sqp_-wquQizinHBhzwzULDzimg","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-30/dist/mint-components/mint-components.css">
|
|
10
|
+
|
|
11
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/bedrock-components@1.3.0/dist/bedrock-components/bedrock-components.js"></script>
|
|
12
|
+
|
|
13
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/mint-components@1.5.0-30/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 class="squatch-container" style="display:block;" direction="column" padding="small" gap="xxxx-large"><sqm-portal-container direction="column" padding="none" gap="xxx-large"><sqm-program-explainer header-background="#f3f0ec" card-background="#f4f2fd" color="black" card-description="Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America." header="Klip Rewards" card-title="Earn rewards with our loyalty program"><sqm-program-explainer-step background="#5B3EDA" color="white" description="Earn up to $1200 in rewards for each referral" card-title="Invite your friends to Klip" icon="person-plus">
|
|
28
|
+
</sqm-program-explainer-step><sqm-program-explainer-step background="#F3CC66" color="black" description="Get a $50 VISA giftcard when they pay for their first month" card-title="If your friend signs up for a Klip Business plan" icon="cash-stack">
|
|
29
|
+
</sqm-program-explainer-step><sqm-program-explainer-step background="#D3CCF5" color="black" description="Get up to $1200 in rewards - a $200 VISA giftcard when our sales team qualifies them as a good fit for Klip, and a $1000 VISA giftcard when they become a paying customer" card-title="If your friend signs up for a Klip Enterprise plan" icon="people">
|
|
30
|
+
</sqm-program-explainer-step></sqm-program-explainer><sqm-portal-container max-width="600px"><sqm-titled-section label-margin="small" padding="none" class="share-link-container"><sqm-text slot="label"><h3>Share your referral link</h3></sqm-text><sqm-share-link slot="content" class="share-link"> </sqm-share-link></sqm-titled-section><sqm-titled-section label-margin="small" padding="none"><sqm-text slot="label"><h3>Share via social media</h3></sqm-text><sqm-portal-container slot="content" direction="row" padding="none" gap="x-large" min-width="160px"><sqm-share-button icon="envelope" medium="email" size="medium" pill="true" class="email-button">Email a friend
|
|
31
|
+
</sqm-share-button><sqm-share-button medium="twitter" size="medium" pill="true" class="twitter-button">Tweet about us
|
|
32
|
+
</sqm-share-button><sqm-share-button medium="whatsapp" size="medium" pill="true" class="facebook-button">Share on Facebook
|
|
33
|
+
</sqm-share-button></sqm-portal-container></sqm-titled-section></sqm-portal-container></sqm-portal-container><sqm-portal-container direction="column" padding="none" gap="xx-large"><sqm-titled-section padding="none" label-margin="none"><sqm-text slot="label"><h2>Referrals and rewards</h2></sqm-text></sqm-titled-section><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/global"><sqm-text><p>Points Balance</p></sqm-text></sqm-big-stat></sqm-stat-container><sqm-card-feed><sqm-task-card reward-amount="75" card-title="Refer a Friend" description="Invite a friend to Klip and get 75 points when they signup for a free trial or contact our us about an enterprise license." button-text="Start referring" button-link="https://klip-staging.vercel.app/app/klip-rewards" goal="1" repeatable="" open-new-tab="false">
|
|
34
|
+
</sqm-task-card><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">
|
|
35
|
+
</sqm-task-card><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">
|
|
36
|
+
</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">
|
|
37
|
+
</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">
|
|
38
|
+
</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">
|
|
39
|
+
</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="">
|
|
40
|
+
</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">
|
|
41
|
+
</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">
|
|
42
|
+
</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">
|
|
43
|
+
</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><sqm-referral-table-user-column column-title="User">
|
|
44
|
+
</sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral Status">
|
|
45
|
+
</sqm-referral-table-status-column><sqm-referral-table-rewards-column>
|
|
46
|
+
</sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date Referred" date-shown="dateReferralStarted">
|
|
47
|
+
</sqm-referral-table-date-column></sqm-referral-table></sl-tab-panel><sl-tab-panel name="referralLeaderboard"><sqm-titled-section padding="medium" label-margin="small"><sqm-text slot="label"><h2>Leaderboard</h2></sqm-text><sqm-text slot="content"><p>
|
|
48
|
+
Be one of the top 3 referrers at the end of the year and receive
|
|
49
|
+
Klip free for 1 year!
|
|
50
|
+
</p></sqm-text></sqm-titled-section><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" interval="2021-10-05T07:00:00.000Z/2022-03-13T08:00:00.000Z" rankheading="Rank">
|
|
51
|
+
</sqm-leaderboard></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-color-primary-hue: var(--sl-color-primary-500);--sl-focus-ring-color-primary: var(--sl-color-primary-100);}.twitter-button::part(defaultsharebutton-base){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;color:rgb(255, 255, 255);border-top-width:initial;border-right-width:initial;border-bottom-width:initial;border-left-width:initial;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;background-image:initial;background-position-x:initial;background-position-y:initial;background-size:initial;background-repeat-x:initial;background-repeat-y:initial;background-attachment:initial;background-origin:initial;background-clip:initial;background-color:rgb(0, 172, 238);}.facebook-button::part(defaultsharebutton-base){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;color:rgb(255, 255, 255);border-top-width:initial;border-right-width:initial;border-bottom-width:initial;border-left-width:initial;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;background-image:initial;background-position-x:initial;background-position-y:initial;background-size:initial;background-repeat-x:initial;background-repeat-y:initial;background-attachment:initial;background-origin:initial;background-clip:initial;background-color:rgb(59, 89, 152);}.email-button::part(defaultsharebutton-base){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;color:rgb(255, 255, 255);border-top-width:initial;border-right-width:initial;border-bottom-width:initial;border-left-width:initial;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;background-image:initial;background-position-x:initial;background-position-y:initial;background-size:initial;background-repeat-x:initial;background-repeat-y:initial;background-attachment:initial;background-origin:initial;background-clip:initial;background-color:rgb(102, 102, 102);}.facebook-button::part(defaultsharebutton-base):active{outline-color:initial;outline-style:none;outline-width:initial;}</style>
|
|
52
|
+
</body>
|
|
53
|
+
</html>`,
|
|
4
54
|
jsOptions: {},
|
|
5
55
|
user: {
|
|
6
56
|
id: "sam+klip@saasquat.ch",
|
package/demo/toolbar.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { Component, useState, version } from "react";
|
|
1
|
+
import React, { Component, useRef, useState, version } from "react";
|
|
2
2
|
import { render } from "react-dom";
|
|
3
3
|
import squatch from "../dist/squatch";
|
|
4
4
|
|
|
@@ -298,7 +298,7 @@ function VersionList(props) {
|
|
|
298
298
|
);
|
|
299
299
|
}
|
|
300
300
|
|
|
301
|
-
async function getMockWidget(widget, engagementMedium) {
|
|
301
|
+
async function getMockWidget(widget, engagementMedium, element?: HTMLElement) {
|
|
302
302
|
window["mockWidget"] = widget;
|
|
303
303
|
window["sandbox"].initObj = {
|
|
304
304
|
...window["sandbox"].initObj,
|
|
@@ -318,14 +318,16 @@ async function getMockWidget(widget, engagementMedium) {
|
|
|
318
318
|
)
|
|
319
319
|
);
|
|
320
320
|
document.getElementById("squatchembed").innerHTML = "";
|
|
321
|
-
window["squatch"].widgets().upsertUser(
|
|
322
|
-
|
|
321
|
+
window["squatch"].widgets().upsertUser({
|
|
322
|
+
...window["sandbox"].initObj,
|
|
323
|
+
element,
|
|
324
|
+
});
|
|
323
325
|
}
|
|
324
326
|
|
|
325
|
-
async function getCustomWidget() {
|
|
327
|
+
async function getCustomWidget(engagementMedium) {
|
|
326
328
|
window["sandbox"].initObj = {
|
|
327
329
|
...window["sandbox"].initObj,
|
|
328
|
-
engagementMedium
|
|
330
|
+
engagementMedium,
|
|
329
331
|
};
|
|
330
332
|
|
|
331
333
|
const value = document.getElementById("custom-widget")?.value;
|
|
@@ -342,14 +344,17 @@ async function getCustomWidget() {
|
|
|
342
344
|
)
|
|
343
345
|
);
|
|
344
346
|
document.getElementById("squatchembed").innerHTML = "";
|
|
345
|
-
window["squatch"].widgets().upsertUser(
|
|
346
|
-
|
|
347
|
+
window["squatch"].widgets().upsertUser({
|
|
348
|
+
...window["sandbox"].initObj,
|
|
349
|
+
element: <div className="sam"></div>,
|
|
350
|
+
});
|
|
347
351
|
}
|
|
348
352
|
|
|
349
353
|
function MockedWidgets(props) {
|
|
350
354
|
const { versions } = props;
|
|
351
|
-
|
|
352
355
|
const [engagementMedium, setEngagementMedium] = useState("EMBED");
|
|
356
|
+
const [showWidget, setShowWidget] = useState(false);
|
|
357
|
+
const [element, setElement] = useState(false);
|
|
353
358
|
return (
|
|
354
359
|
<details
|
|
355
360
|
title={"Version: " + window["sandbox"].version || "Head"}
|
|
@@ -373,6 +378,24 @@ function MockedWidgets(props) {
|
|
|
373
378
|
onClick={() => setEngagementMedium("POPUP")}
|
|
374
379
|
></input>
|
|
375
380
|
<br />
|
|
381
|
+
<button
|
|
382
|
+
onClick={() => {
|
|
383
|
+
if (showWidget) {
|
|
384
|
+
setShowWidget(false);
|
|
385
|
+
} else {
|
|
386
|
+
console.log("why did i do this");
|
|
387
|
+
element?.open();
|
|
388
|
+
}
|
|
389
|
+
}}
|
|
390
|
+
>
|
|
391
|
+
{showWidget ? "hide widget" : "show widget"}
|
|
392
|
+
</button>
|
|
393
|
+
<div
|
|
394
|
+
ref={(el) => {
|
|
395
|
+
setElement(el);
|
|
396
|
+
}}
|
|
397
|
+
></div>
|
|
398
|
+
<br />
|
|
376
399
|
<button
|
|
377
400
|
onClick={() => getMockWidget("QuirksVanillaGA", engagementMedium)}
|
|
378
401
|
>
|
|
@@ -384,7 +407,9 @@ function MockedWidgets(props) {
|
|
|
384
407
|
<button onClick={() => getMockWidget("classic", engagementMedium)}>
|
|
385
408
|
Classic
|
|
386
409
|
</button>
|
|
387
|
-
<button
|
|
410
|
+
<button
|
|
411
|
+
onClick={() => getMockWidget("MintGA", engagementMedium, element)}
|
|
412
|
+
>
|
|
388
413
|
GA - Mint
|
|
389
414
|
</button>
|
|
390
415
|
<button onClick={() => getMockWidget("VanillaGA", engagementMedium)}>
|
|
@@ -425,7 +450,7 @@ function MockedWidgets(props) {
|
|
|
425
450
|
|
|
426
451
|
function CustomMockedWidget(props) {
|
|
427
452
|
const { versions } = props;
|
|
428
|
-
|
|
453
|
+
const [engagementMedium, setEngagementMedium] = useState("EMBED");
|
|
429
454
|
return (
|
|
430
455
|
<details
|
|
431
456
|
title={"Version: " + window["sandbox"].version || "Head"}
|
|
@@ -433,6 +458,22 @@ function CustomMockedWidget(props) {
|
|
|
433
458
|
id={`dropdown-basic-1`}
|
|
434
459
|
>
|
|
435
460
|
<summary>Custom Mocked Widget</summary>
|
|
461
|
+
<label>Embed</label>
|
|
462
|
+
<input
|
|
463
|
+
type="radio"
|
|
464
|
+
name="embed"
|
|
465
|
+
checked={engagementMedium === "EMBED"}
|
|
466
|
+
onClick={() => setEngagementMedium("EMBED")}
|
|
467
|
+
></input>
|
|
468
|
+
|
|
469
|
+
<label>Popup</label>
|
|
470
|
+
<input
|
|
471
|
+
type="radio"
|
|
472
|
+
name="popup"
|
|
473
|
+
checked={engagementMedium === "POPUP"}
|
|
474
|
+
onClick={() => setEngagementMedium("POPUP")}
|
|
475
|
+
></input>
|
|
476
|
+
<br />
|
|
436
477
|
<textarea
|
|
437
478
|
id="custom-widget"
|
|
438
479
|
rows={15}
|
|
@@ -440,7 +481,9 @@ function CustomMockedWidget(props) {
|
|
|
440
481
|
style={{ maxWidth: "100%" }}
|
|
441
482
|
></textarea>
|
|
442
483
|
<div>
|
|
443
|
-
<button onClick={() => getCustomWidget()}>
|
|
484
|
+
<button onClick={() => getCustomWidget(engagementMedium)}>
|
|
485
|
+
Load Widget
|
|
486
|
+
</button>
|
|
444
487
|
</div>
|
|
445
488
|
</details>
|
|
446
489
|
);
|