@saasquatch/squatch-js 2.3.2-2 → 2.3.2-23
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/MintGA.ts +62 -52
- package/demo/templates/QuirksMintGA.ts +59 -50
- package/demo/toolbar.tsx +135 -29
- package/dist/squatch.esm.js +68 -11
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +68 -11
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +2 -2
- package/dist/stats.html +1 -1
- package/dist/types.d.ts +4 -0
- package/dist/widgets/EmbedWidget.d.ts +4 -1
- package/dist/widgets/Widgets.d.ts +1 -0
- package/package.json +2 -2
- package/dist/squatch.WidgetApi.js +0 -1395
- package/dist/squatch.WidgetApi.min.js +0 -8
package/demo/templates/MintGA.ts
CHANGED
|
@@ -1,56 +1,66 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
template:
|
|
3
|
-
|
|
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
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</sqm-
|
|
39
|
-
|
|
40
|
-
</sqm-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
2
|
+
template: `
|
|
3
|
+
<!DOCTYPE html>
|
|
4
|
+
<html>
|
|
5
|
+
<head>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
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"};
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<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">
|
|
11
|
+
|
|
12
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/bedrock-components@1.3.1-7/dist/bedrock-components/bedrock-components.js"></script>
|
|
13
|
+
|
|
14
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/mint-components@1.5.0-62/dist/mint-components/mint-components.js"></script>
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
<script src="https://fast-staging.ssqt.io/npm/@elastic/apm-rum@4.0.1/dist/bundles/elastic-apm-rum.umd.min.js" crossorigin></script>
|
|
18
|
+
<script>
|
|
19
|
+
window.apm = elasticApm.init({
|
|
20
|
+
serviceName: 'programwidget-staging',
|
|
21
|
+
serverUrl: 'https://1c9081d2ac2d43548254f581dca2dbee.apm.us-central1.gcp.cloud.es.io:443',
|
|
22
|
+
active: Math.random() < 0.1
|
|
23
|
+
})
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<sqm-brand brand-color="#4225c4" brand-font="Nunito Sans"><sqm-portal-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">
|
|
29
|
+
</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>
|
|
30
|
+
They’ll get a $50 credit towards a new account and you’ll get up to
|
|
31
|
+
$1200
|
|
32
|
+
</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">
|
|
33
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friends signs up for Klip Business">
|
|
34
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Your friend qualifies as a good fit for Klip Enterprise">
|
|
35
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases Klip Enterprise">
|
|
36
|
+
</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">
|
|
37
|
+
Share via email
|
|
38
|
+
</sqm-share-button><sqm-share-button medium="linkedin">
|
|
39
|
+
Share on LinkedIn
|
|
40
|
+
</sqm-share-button><sqm-share-button medium="twitter">
|
|
41
|
+
Tweet about us
|
|
42
|
+
</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>
|
|
43
|
+
Get points while using Klip. Use those points to redeem rewards like
|
|
44
|
+
one free month of Klip Enterprise or two plane tickets to anywhere
|
|
45
|
+
in North America
|
|
46
|
+
</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">
|
|
47
|
+
</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">
|
|
48
|
+
</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">
|
|
49
|
+
</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">
|
|
50
|
+
</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">
|
|
51
|
+
</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="">
|
|
52
|
+
</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">
|
|
53
|
+
</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">
|
|
54
|
+
</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">
|
|
55
|
+
</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">
|
|
56
|
+
</sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral status">
|
|
57
|
+
</sqm-referral-table-status-column><sqm-referral-table-rewards-column>
|
|
58
|
+
</sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date referred" date-shown="dateReferralStarted">
|
|
59
|
+
</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">
|
|
60
|
+
</sqm-hero-image><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true">
|
|
61
|
+
</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>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
54
64
|
`,
|
|
55
65
|
jsOptions: {},
|
|
56
66
|
user: {
|
|
@@ -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 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
|
@@ -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,12 @@ function VersionList(props) {
|
|
|
298
298
|
);
|
|
299
299
|
}
|
|
300
300
|
|
|
301
|
-
async function getMockWidget(
|
|
301
|
+
async function getMockWidget(
|
|
302
|
+
widget,
|
|
303
|
+
engagementMedium,
|
|
304
|
+
element?: HTMLElement,
|
|
305
|
+
showWidget?: boolean
|
|
306
|
+
) {
|
|
302
307
|
window["mockWidget"] = widget;
|
|
303
308
|
window["sandbox"].initObj = {
|
|
304
309
|
...window["sandbox"].initObj,
|
|
@@ -318,7 +323,13 @@ async function getMockWidget(widget, engagementMedium) {
|
|
|
318
323
|
)
|
|
319
324
|
);
|
|
320
325
|
document.getElementById("squatchembed").innerHTML = "";
|
|
321
|
-
|
|
326
|
+
|
|
327
|
+
await window["squatch"].widgets().upsertUser({
|
|
328
|
+
...window["sandbox"].initObj,
|
|
329
|
+
element,
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
if (showWidget) element.open();
|
|
322
333
|
}
|
|
323
334
|
|
|
324
335
|
async function getCustomWidget(engagementMedium) {
|
|
@@ -341,13 +352,19 @@ async function getCustomWidget(engagementMedium) {
|
|
|
341
352
|
)
|
|
342
353
|
);
|
|
343
354
|
document.getElementById("squatchembed").innerHTML = "";
|
|
344
|
-
window["squatch"].widgets().upsertUser(
|
|
355
|
+
window["squatch"].widgets().upsertUser({
|
|
356
|
+
...window["sandbox"].initObj,
|
|
357
|
+
});
|
|
345
358
|
}
|
|
346
359
|
|
|
347
360
|
function MockedWidgets(props) {
|
|
348
361
|
const { versions } = props;
|
|
349
|
-
|
|
350
362
|
const [engagementMedium, setEngagementMedium] = useState("EMBED");
|
|
363
|
+
const [usePreload, setUsePreload] = useState(false);
|
|
364
|
+
const [showWidget, setShowWidget] = useState(false);
|
|
365
|
+
// const [element, setElement] = useState(false);
|
|
366
|
+
const element = usePreload && document.getElementById("squatchembed");
|
|
367
|
+
|
|
351
368
|
return (
|
|
352
369
|
<details
|
|
353
370
|
title={"Version: " + window["sandbox"].version || "Head"}
|
|
@@ -355,65 +372,154 @@ function MockedWidgets(props) {
|
|
|
355
372
|
id={`dropdown-basic-1`}
|
|
356
373
|
>
|
|
357
374
|
<summary>Mocked Widgets</summary>
|
|
358
|
-
<
|
|
359
|
-
<
|
|
360
|
-
|
|
361
|
-
name="embed"
|
|
362
|
-
checked={engagementMedium === "EMBED"}
|
|
363
|
-
onClick={() => setEngagementMedium("EMBED")}
|
|
364
|
-
></input>
|
|
375
|
+
<h4>Engagement Medium</h4>
|
|
376
|
+
<form onSubmit={(e) => e.preventDefault()}>
|
|
377
|
+
<label>Embed</label>
|
|
365
378
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
379
|
+
<input
|
|
380
|
+
type="radio"
|
|
381
|
+
name="embed"
|
|
382
|
+
checked={engagementMedium === "EMBED"}
|
|
383
|
+
onClick={() => setEngagementMedium("EMBED")}
|
|
384
|
+
></input>
|
|
385
|
+
|
|
386
|
+
<label>Popup</label>
|
|
387
|
+
<input
|
|
388
|
+
type="radio"
|
|
389
|
+
name="popup"
|
|
390
|
+
checked={engagementMedium === "POPUP"}
|
|
391
|
+
onClick={() => setEngagementMedium("POPUP")}
|
|
392
|
+
></input>
|
|
393
|
+
<br />
|
|
394
|
+
<h4>Preload</h4>
|
|
395
|
+
<label>true</label>
|
|
396
|
+
<input
|
|
397
|
+
type="radio"
|
|
398
|
+
name="preload"
|
|
399
|
+
checked={usePreload === true}
|
|
400
|
+
onClick={() => setUsePreload(true)}
|
|
401
|
+
></input>
|
|
402
|
+
|
|
403
|
+
<label>false</label>
|
|
404
|
+
<input
|
|
405
|
+
type="radio"
|
|
406
|
+
name="noPreload"
|
|
407
|
+
checked={usePreload === false}
|
|
408
|
+
onClick={() => setUsePreload(false)}
|
|
409
|
+
></input>
|
|
410
|
+
</form>
|
|
373
411
|
<br />
|
|
374
412
|
<button
|
|
375
|
-
onClick={() =>
|
|
413
|
+
onClick={() => {
|
|
414
|
+
if (showWidget) {
|
|
415
|
+
setShowWidget(false);
|
|
416
|
+
element?.close();
|
|
417
|
+
} else {
|
|
418
|
+
setShowWidget(true);
|
|
419
|
+
element?.open();
|
|
420
|
+
}
|
|
421
|
+
}}
|
|
422
|
+
>
|
|
423
|
+
{showWidget ? "hide widget" : "show widget"}
|
|
424
|
+
</button>
|
|
425
|
+
<br />
|
|
426
|
+
<button
|
|
427
|
+
onClick={() =>
|
|
428
|
+
getMockWidget(
|
|
429
|
+
"QuirksVanillaGA",
|
|
430
|
+
engagementMedium,
|
|
431
|
+
element,
|
|
432
|
+
showWidget
|
|
433
|
+
)
|
|
434
|
+
}
|
|
376
435
|
>
|
|
377
436
|
Quirks mode - Vanilla
|
|
378
437
|
</button>
|
|
379
|
-
<button
|
|
438
|
+
<button
|
|
439
|
+
onClick={() =>
|
|
440
|
+
getMockWidget("QuirksMintGA", engagementMedium, element, showWidget)
|
|
441
|
+
}
|
|
442
|
+
>
|
|
380
443
|
Quirks mode - Mint
|
|
381
444
|
</button>
|
|
382
|
-
<button
|
|
445
|
+
<button
|
|
446
|
+
onClick={() =>
|
|
447
|
+
getMockWidget("classic", engagementMedium, element, showWidget)
|
|
448
|
+
}
|
|
449
|
+
>
|
|
383
450
|
Classic
|
|
384
451
|
</button>
|
|
385
|
-
<button
|
|
452
|
+
<button
|
|
453
|
+
onClick={() =>
|
|
454
|
+
getMockWidget("MintGA", engagementMedium, element, showWidget)
|
|
455
|
+
}
|
|
456
|
+
>
|
|
386
457
|
GA - Mint
|
|
387
458
|
</button>
|
|
388
|
-
<button
|
|
459
|
+
<button
|
|
460
|
+
onClick={() =>
|
|
461
|
+
getMockWidget("VanillaGA", engagementMedium, element, showWidget)
|
|
462
|
+
}
|
|
463
|
+
>
|
|
389
464
|
GA - Vanilla
|
|
390
465
|
</button>
|
|
391
466
|
<button
|
|
392
|
-
onClick={() =>
|
|
467
|
+
onClick={() =>
|
|
468
|
+
getMockWidget(
|
|
469
|
+
"MintGAContainer",
|
|
470
|
+
engagementMedium,
|
|
471
|
+
element,
|
|
472
|
+
showWidget
|
|
473
|
+
)
|
|
474
|
+
}
|
|
393
475
|
>
|
|
394
476
|
Mint - With Container
|
|
395
477
|
</button>
|
|
396
478
|
<button
|
|
397
|
-
onClick={() =>
|
|
479
|
+
onClick={() =>
|
|
480
|
+
getMockWidget(
|
|
481
|
+
"QuirksMintGAContainer",
|
|
482
|
+
engagementMedium,
|
|
483
|
+
element,
|
|
484
|
+
showWidget
|
|
485
|
+
)
|
|
486
|
+
}
|
|
398
487
|
>
|
|
399
488
|
Quirks mode - Mint - With Container
|
|
400
489
|
</button>
|
|
401
490
|
<button
|
|
402
491
|
onClick={() =>
|
|
403
|
-
getMockWidget(
|
|
492
|
+
getMockWidget(
|
|
493
|
+
"MintGAContainerDisplayBlock",
|
|
494
|
+
engagementMedium,
|
|
495
|
+
element,
|
|
496
|
+
showWidget
|
|
497
|
+
)
|
|
404
498
|
}
|
|
405
499
|
>
|
|
406
500
|
Mint - With Container + Display Block
|
|
407
501
|
</button>
|
|
408
502
|
<button
|
|
409
503
|
onClick={() =>
|
|
410
|
-
getMockWidget(
|
|
504
|
+
getMockWidget(
|
|
505
|
+
"QuirksMintGAContainerDisplayBlock",
|
|
506
|
+
engagementMedium,
|
|
507
|
+
element,
|
|
508
|
+
showWidget
|
|
509
|
+
)
|
|
411
510
|
}
|
|
412
511
|
>
|
|
413
512
|
Quirks mode - Mint - With Container + Display Block
|
|
414
513
|
</button>
|
|
415
514
|
<button
|
|
416
|
-
onClick={() =>
|
|
515
|
+
onClick={() =>
|
|
516
|
+
getMockWidget(
|
|
517
|
+
"VanillaGANoContainer",
|
|
518
|
+
engagementMedium,
|
|
519
|
+
element,
|
|
520
|
+
showWidget
|
|
521
|
+
)
|
|
522
|
+
}
|
|
417
523
|
>
|
|
418
524
|
Vanilla - No Container
|
|
419
525
|
</button>
|