@saasquatch/mint-components 1.6.8-13 → 1.6.8-14
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/dist/cjs/{ShadowViewAddon-e9b5b949.js → ShadowViewAddon-57cfb0e8.js} +7 -13
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mint-components.cjs.js +1 -1
- package/dist/cjs/sqm-big-stat_37.cjs.entry.js +2 -2
- package/dist/cjs/{sqm-user-identifier-view-53f37293.js → sqm-logout-current-user-view-9c3f9464.js} +2 -2
- package/dist/cjs/{sqm-user-identifier.cjs.entry.js → sqm-logout-current-user.cjs.entry.js} +8 -8
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +25 -25
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/sqm-coupon-code/CouponCode.stories.js +1 -1
- package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js +2 -2
- package/dist/collection/components/{sqm-user-identifier/UserIdentifier.stories.js → sqm-logout-current-user/LogoutCurrentUser.stories.js} +3 -3
- package/dist/collection/components/{sqm-user-identifier/sqm-user-identifier-view.js → sqm-logout-current-user/sqm-logout-current-user-view.js} +1 -1
- package/dist/collection/components/{sqm-user-identifier/sqm-user-identifier.js → sqm-logout-current-user/sqm-logout-current-user.js} +9 -9
- package/dist/collection/components/{sqm-user-identifier/useUserIdentifer.js → sqm-logout-current-user/useLogoutCurrentUser.js} +1 -1
- package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js +2 -2
- package/dist/collection/components/views/copy-text-view.js +7 -13
- package/dist/collection/stories/Widget.stories.js +12 -12
- package/dist/esm/{ShadowViewAddon-2dad6900.js → ShadowViewAddon-c76ceb19.js} +7 -13
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mint-components.js +1 -1
- package/dist/esm/sqm-big-stat_37.entry.js +2 -2
- package/dist/esm/{sqm-user-identifier-view-ca48b8e4.js → sqm-logout-current-user-view-5dd42341.js} +2 -2
- package/dist/esm/{sqm-user-identifier.entry.js → sqm-logout-current-user.entry.js} +8 -8
- package/dist/esm/sqm-stencilbook.entry.js +25 -25
- package/dist/esm-es5/ShadowViewAddon-c76ceb19.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mint-components.js +1 -1
- package/dist/esm-es5/sqm-big-stat_37.entry.js +1 -1
- package/dist/esm-es5/{sqm-user-identifier-view-ca48b8e4.js → sqm-logout-current-user-view-5dd42341.js} +1 -1
- package/dist/esm-es5/sqm-logout-current-user.entry.js +1 -0
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/p-04751f3a.system.js +1 -1
- package/dist/mint-components/{p-7be51ca9.js → p-04754621.js} +1 -1
- package/dist/mint-components/p-20f88c26.system.js +1 -0
- package/dist/mint-components/p-6721ed80.entry.js +9 -0
- package/dist/mint-components/{p-5698b30e.js → p-72f635dd.js} +1 -1
- package/dist/mint-components/p-8d2cfc36.entry.js +1 -0
- package/dist/mint-components/{p-a8f38714.entry.js → p-90740675.entry.js} +2 -2
- package/dist/mint-components/p-a686bf17.system.entry.js +1 -0
- package/dist/mint-components/{p-e8bb9b24.system.js → p-c2adbe14.system.js} +1 -1
- package/dist/mint-components/p-ee62225c.system.entry.js +1 -0
- package/dist/mint-components/p-fcac2cfd.system.entry.js +1 -0
- package/dist/types/components/sqm-logout-current-user/sqm-logout-current-user-view.d.ts +6 -0
- package/dist/types/components/{sqm-user-identifier/sqm-user-identifier.d.ts → sqm-logout-current-user/sqm-logout-current-user.d.ts} +2 -2
- package/dist/types/components/sqm-logout-current-user/useLogoutCurrentUser.d.ts +3 -0
- package/dist/types/components.d.ts +43 -43
- package/dist/types/global/android.d.ts +7 -0
- package/dist/types/global/demo.d.ts +1 -0
- package/dist/types/stories/Widget.stories.d.ts +4 -4
- package/dist/types/stories/features.d.ts +4 -0
- package/dist/types/stories/templates.d.ts +4 -0
- package/docs/docs.docx +0 -0
- package/docs/raisins.json +1 -1
- package/grapesjs/grapesjs.js +1 -1
- package/package.json +2 -2
- package/dist/esm-es5/ShadowViewAddon-2dad6900.js +0 -1
- package/dist/esm-es5/sqm-user-identifier.entry.js +0 -1
- package/dist/mint-components/p-215c517c.entry.js +0 -1
- package/dist/mint-components/p-25632b7a.system.entry.js +0 -1
- package/dist/mint-components/p-2d3ab333.entry.js +0 -9
- package/dist/mint-components/p-56a5a523.system.entry.js +0 -1
- package/dist/mint-components/p-af27369e.system.js +0 -1
- package/dist/mint-components/p-c14d5640.system.entry.js +0 -1
- package/dist/types/components/sqm-user-identifier/sqm-user-identifier-view.d.ts +0 -6
- package/dist/types/components/sqm-user-identifier/useUserIdentifer.d.ts +0 -3
- /package/dist/types/components/{sqm-user-identifier/UserIdentifier.stories.d.ts → sqm-logout-current-user/LogoutCurrentUser.stories.d.ts} +0 -0
|
@@ -20,6 +20,7 @@ const sqmHeroView = require('./sqm-hero-view-ddd1ef43.js');
|
|
|
20
20
|
const emailRegistrationView = require('./email-registration-view-972baf62.js');
|
|
21
21
|
const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
|
|
22
22
|
const sqmLinkButtonView = require('./sqm-link-button-view-2ee270e0.js');
|
|
23
|
+
const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-9c3f9464.js');
|
|
23
24
|
const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-b830e8d8.js');
|
|
24
25
|
const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-828f3fe3.js');
|
|
25
26
|
const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-1ae8805f.js');
|
|
@@ -27,9 +28,8 @@ const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-f
|
|
|
27
28
|
const sqmPortalProfileView = require('./sqm-portal-profile-view-4baa40c2.js');
|
|
28
29
|
const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-e182df83.js');
|
|
29
30
|
const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-fd739843.js');
|
|
30
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
31
|
+
const ShadowViewAddon = require('./ShadowViewAddon-57cfb0e8.js');
|
|
31
32
|
const sqmPortalContainerView = require('./sqm-portal-container-view-6accb54a.js');
|
|
32
|
-
const sqmUserIdentifierView = require('./sqm-user-identifier-view-53f37293.js');
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* lodash (Custom Build) <https://lodash.com/>
|
|
@@ -1445,7 +1445,7 @@ var _createEmotion = createEmotion({
|
|
|
1445
1445
|
}),
|
|
1446
1446
|
css = _createEmotion.css;
|
|
1447
1447
|
|
|
1448
|
-
function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function
|
|
1448
|
+
function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function a$1(n,t){return t||(t=n.slice(0)),n.raw=t,n}var s,l,c$1,u=css(s||(s=a$1(['\n width: 100vw;\n height: 100vh;\n\n .story-book-outer-div {\n .story-div {\n font-family: "Arial", sans-serif;\n font-size: 12px;\n }\n padding-bottom: 500px;\n }\n\n .story-div {\n position: fixed;\n box-sizing: border-box;\n top: 0;\n width: 250px;\n height: 100vh;\n z-index: 999;\n overflow-y: scroll;\n background: white;\n margin-bottom: 32px;\n }\n\n .header {\n padding: 24px 0 16px 16px;\n margin-bottom: 24px;\n color: white;\n background: #333;\n cursor: pointer;\n\n h2 {\n letter-spacing: 3px;\n font-weight: 400;\n }\n }\n\n .parentStoryList {\n list-style: none;\n padding-left: 16px;\n\n summary {\n margin-bottom: 4px;\n }\n }\n .parentStory {\n cursor: pointer;\n }\n .parentStory.selected {\n font-weight: bold;\n }\n\n .subStory {\n font-size: 12px;\n cursor: pointer;\n line-height: 1.5em;\n margin-top: 4px;\n\n a {\n display: block;\n padding: 4px 4px 4px 16px;\n }\n }\n .subStory:hover {\n background-color: #eee;\n }\n .subStory.selected {\n background-color: lightgreen;\n }\n\n .component {\n padding: 24px 16px;\n }\n\n h4.group-header {\n margin: 8px 0;\n text-transform: uppercase;\n font-weight: 600;\n font-size: 14px;\n color: #575757;\n }\n\n .group-wrapper {\n margin-bottom: 24px;\n }\n\n .dynamic-display-wrapper {\n position: fixed;\n display: flex;\n flex-direction: column;\n bottom: 0;\n left: 100%;\n padding: 16px;\n z-index: 1000;\n background: white;\n transform: translateX(-100%);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n & > :not(:first-child) {\n margin-top: 12px;\n }\n\n p {\n font-size: 12px;\n margin: 0;\n padding: 0;\n }\n\n .button-wrapper {\n display: flex;\n\n & > :not(:first-child) {\n margin-left: 12px;\n }\n }\n\n & button {\n border: 1px solid #eaeaea;\n background: white;\n border-radius: 4px;\n color: #777;\n padding: 4px 12px;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n &.active {\n background: #555;\n border-color: #555;\n color: white;\n }\n }\n }\n'])));function p$1(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i$1({},n,((o={})[e]=[].concat(n[e]||[],[{story:i$1({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function d$1(n){return {story:n.default,subs:function(n,t){if(null==n)return {};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(s,f){var m=f.h,y=void 0===m?index.h:m,b=f.title,g=void 0===b?"Stencilbook":b,x=f.homepage,h=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,w=void 0===v?[]:v,k=stencilHooks_module.useMemo(function(){return s.map(d$1).reduce(p$1,{_:[]})},s),S=decodeURIComponent(window.location.hash).replace("#",""),C=stencilHooks_module.useState(q(S)),z=C[0],O=C[1],j=null==z?void 0:z.key,I=stencilHooks_module.useState("desktop")[0],R=stencilHooks_module.useState(!0),U=R[0],_=R[1],B=stencilHooks_module.useState(!1),L=B[0],T=B[1];function q(n){var t;if(n){var o=decodeURIComponent(n).split("-"),r=o[1],e=o[2],i=null==(t=k[o[0]])?void 0:t.find(function(n){return n.story.title===r}),a=i.subs[e];return {key:n,story:a,parent:null==i?void 0:i.story,label:null==a?void 0:a.name}}}var A=function(){return y("div",{class:"dynamic-display-wrapper"},y("button",{class:L?"active":"",onClick:function(){return T(function(n){return !n})}},"Toggle Dark Background"),y("button",{class:U?"active":"",onClick:function(){return _(function(n){return !n})}},"Toggle Sidebar"))},D="mobile"===I?"375px":"tablet"===I?"768px":"1124px",N=css(l||(l=a$1(["\n max-width: ",";\n margin-left: ",";\n "])),D,U?"250px":"0px"),P=css(c$1||(c$1=a$1(["\n display: none;\n "])));document.body.style.backgroundColor=L?"#232323":"#fafafa";var V=function(n){var t=n.selected,o=w.reduce(function(n,o){return function(){return y(o,{story:i$1({},t)},y(n,null))}},null==t?void 0:t.story);return y(o,null)},X=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(U?"":P)},y("div",{class:"header",onClick:function(){O(void 0);}},y("h2",null,g)),y("ul",{class:"parentStoryList"},Object.keys(k).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),k[n].map(function(t){return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"}},y("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"-"+t.story.title+"-"+o,i=t.subs[o].storyName||lodash_startcase(o);return y("div",{class:"subStory "+(j===e?"selected":"")},y("a",{onClick:function(){return function(n){window.location.hash=encodeURIComponent(n),O(q(n));}(e)}},i))})))}))}))),y(A,null),y("div",{class:"component "+N},!j&&h,j&&y("div",null,y("h3",null,z.label),y(V,{selected:z}))))};return {class:u,children:y(X,null),View:X,selected:z}}
|
|
1449
1449
|
|
|
1450
1450
|
const scenario = "@author:noah\n@owner:noah\nFeature: Share Button\n\n The share button redirects users to a platform where they can share their referral link\n\n @motivating\n @ui\n Scenario Outline: Share button displays for various platforms\n Given the share button's medium prop is \"<medium>\"\n And the button's child is text saying \"BUTTON_TEXT\"\n When the share button is rendered\n Then the button has text \"BUTTON_TEXT\"\n And the button is <colour>\n And it displays an <icon> beside the text\n And clicking the button redirects to an appropriate link\n Examples:\n | medium | colour | icon |\n | facebook | #1877f2 | facebook logo |\n | twitter | #1da1f2 | twitter logo |\n | email | #666666 | envelope |\n | direct | brand colour | paper plane |\n | linkedin | #0077b5 | linkedIn logo |\n | sms | #34DA50 | chat bubble |\n | fbmessenger | #0084ff | messenger logo |\n | whatsapp | #25d366 | whatsapp logo |\n | linemessenger | #00B300 | linemessenger logo |\n | pinterest | #e60023 | pinterest logo |\n\n @minutia\n @ui\n Scenario Outline: Default icons can be overwritten\n Given a share button for any medium with <iconPropValue>\n When the share button is rendered\n Then it displays a <iconPropValue> instead of the share mediums default icon\n Examples:\n | iconPropValue |\n | basket |\n | bluetooth |\n | bandaid |\n\n @motivating\n @ui\n Scenario Outline: Default share medium colours can be overwritten\n Given a share button for any medium with <backgroundColourPropValue>\n When the share button is rendered\n Then the share button is <backgroundColourPropValue>\n Examples:\n | backgroundColourPropValue |\n | blue |\n | black |\n | green |\n\n @minutia\n @ui\n Scenario Outline: Share medium icons and text can be hidden\n Given a share button with <prop> <value>\n When the share button is rendered\n Then <element> is hidden\n Examples:\n | prop | value | element |\n | hideicon | true | icon |\n | hidetext | true | text |\n\n @minutia\n @ui\n Scenario Outline: Icons can be on either side of the text\n Given a share button with <iconslotPropValue>\n When the share button is rendered\n Then the icon is displayed to the <direction> of the text\n Examples:\n | iconslotPropValue | direction |\n | suffix | right |\n | prefix | left |\n | prefix | left |\n\n @minutia\n Scenario: Unsupported browsers hide native share buttons\n Given the share button's medium prop is \"direct\"\n And your browser does not support the Web Share API\n Then the share button is hidden\n\n @minutia\n Scenario: SMS share buttons are hidden on non Android and iOS devices\n Given the share button's medium is \"sms\"\n And the share button is being viewed on a device which is not an Android or iOS device\n Then the share button is hidden\n\n @motivating\n Scenario: Facebook share buttons uses SquatchAndroid sharing features\n Given the share button's medium is \"facebook\"\n And the share button is being viewed in a web view with the SquatchAndroid API\n And the Facebook app is available\n Then tapping the share button opens the phone's Facebook app\n And a share activity is opened with the share link prefilled\n\n @motivating\n Scenario: SquatchAndroid falls back to the Facebook website if no app is available\n Given the share button's medium is \"facebook\"\n And the share button is being viewed in a web view with the SquatchAndroid API\n And the Facebook app is not available\n Then tapping the share button opens the the Facebook mobile site in the device's browser\n And a share activity is opened with the share link prefilled\n\n @minutia\n Scenario: A supplied program ID is used if available\n Given the program id is supplied to the component in the \"programId\" prop\n Then the program ID in the \"programId\" prop is used to retrieve share links\n\n @minutia\n Scenario: The program ID is automatically fetched from context\n Given the program id is not supplied to the component in the \"programId\" prop\n Then the program ID is retrieved from context";
|
|
1451
1451
|
|
|
@@ -3892,13 +3892,13 @@ const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\
|
|
|
3892
3892
|
|
|
3893
3893
|
const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n <sqm-portal-container\n direction=\"column\"\n padding=\"small\"\n gap=\"xxxx-large\"\n display=\"grid\"\n max-width=\"100%\"\n >\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xxx-large\"\n display=\"grid\"\n max-width=\"100%\"\n >\n <sqm-hero-image\n image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n header=\"MyCompany Rewards\"\n description=\"Complete tasks to earn rewards\"\n layout=\"overlay\"\n padding-image=\"xxxx-large\"\n padding-text=\"xxx-large\"\n image-pos=\"center\"\n overlay-color=\"#5e5669\"\n overlay-opacity=\"0.9\"\n >\n </sqm-hero-image>\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xxx-large\"\n max-width=\"770px\"\n center\n display=\"grid\"\n >\n <sqm-program-explainer header=\"How it works\">\n <sqm-program-explainer-step\n description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n header=\"Earn points for using our product\"\n icon=\"cash-stack\"\n text-color=\"#000000\"\n >\n </sqm-program-explainer-step>\n <sqm-program-explainer-step\n description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n header=\"Redeem rewards with your points\"\n icon=\"people\"\n text-color=\"#000000\"\n >\n </sqm-program-explainer-step>\n </sqm-program-explainer>\n <sqm-portal-container\n center\n direction=\"row\"\n display=\"flex\"\n justify-content=\"space-between\"\n gap=\"xxx-large\"\n max-width=\"100%\"\n padding=\"none\"\n >\n <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n >\n <p>Points Redeemed</p>\n </sqm-big-stat>\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n >\n <p>Points Balance</p>\n </sqm-big-stat>\n </sqm-stat-container>\n </sqm-portal-container>\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xx-large\"\n display=\"grid\"\n max-width=\"100%\"\n >\n <sqm-titled-section\n label-margin=\"small\"\n padding=\"none\"\n text-align=\"center\"\n >\n <h3 slot=\"label\">Earn points</h3>\n </sqm-titled-section>\n <sqm-card-feed gap=\"24\" width=\"347\">\n <sqm-task-card\n reward-amount=\"20\"\n goal=\"1\"\n card-title=\"Complete a Survey\"\n description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\n button-text=\"Take survey\"\n reward-unit=\"Points\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n finite=\"0\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n <sqm-task-card\n reward-amount=\"250\"\n goal=\"500\"\n show-progress-bar\n card-title=\"Spend $500\"\n description=\"Earn 250 points when you spend $500 or more.\"\n button-text=\"See plans\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n progress-bar-unit=\"$\"\n finite=\"0\"\n reward-unit=\"Points\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n <sqm-task-card\n goal=\"1\"\n reward-amount=\"50\"\n card-title=\"Follow Us on Twitter\"\n description=\"Earn 50 points when you follow us on Twitter!\"\n button-text=\"Follow\"\n button-link=\"https://twitter.com/\"\n open-new-tab=\"true\"\n event-key=\"socialFollow\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n finite=\"0\"\n reward-unit=\"Points\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n <sqm-task-card\n reward-amount=\"1\"\n reward-unit=\"Free Month\"\n goal=\"1\"\n card-title=\"Upgrade Your Plan\"\n description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n button-text=\"Upgrade\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n open-new-tab=\"false\"\n finite=\"0\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n </sqm-card-feed>\n <sqm-portal-container\n gap=\"large\"\n direction=\"column\"\n display=\"grid\"\n max-width=\"100%\"\n padding=\"none\"\n >\n <sqm-titled-section\n padding=\"none\"\n text-align=\"center\"\n label-margin=\"xx-small\"\n >\n <h3 slot=\"label\">Reward History</h3>\n </sqm-titled-section>\n <sqm-rewards-table\n per-page=\"4\"\n hidden-columns=\"0\"\n more-label=\"Next\"\n prev-label=\"Prev\"\n sm-breakpoint=\"599\"\n md-breakpoint=\"799\"\n >\n <sqm-rewards-table-reward-column\n available-text=\"{availableAmount} remaining\"\n column-title=\"Reward\"\n copy-text=\"Copied!\"\n redeemed-text=\"{redeemedAmount} redeemed\"\n >\n </sqm-rewards-table-reward-column>\n <sqm-rewards-table-source-column\n anonymous-user=\"Anonymous User\"\n column-title=\"Source\"\n deleted-user=\"Deleted User\"\n referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n reward-exchange-text=\"Reward Exchange\"\n reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n >\n </sqm-rewards-table-source-column>\n <sqm-rewards-table-status-column\n column-title=\"Status\"\n expiry-text=\"Expires on \"\n status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n >\n </sqm-rewards-table-status-column>\n <sqm-rewards-table-date-column\n column-title=\"Date received\"\n date-shown=\"dateGiven\"\n >\n </sqm-rewards-table-date-column>\n <sqm-empty\n slot=\"empty\"\n empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n empty-state-header=\"View your rewards\"\n empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n >\n </sqm-empty>\n </sqm-rewards-table>\n </sqm-portal-container>\n </sqm-portal-container>\n <sqm-portal-footer\n support-email=\"support@example.com\"\n terms-link=\"https://example.com\"\n faq-link=\"https://example.com\"\n terms-text=\"Terms And Conditions\"\n faq-text=\"FAQ\"\n show-powered-by=\"true\"\n padding-bottom=\"none\"\n padding-left=\"none\"\n padding-right=\"none\"\n padding-top=\"none\"\n ></sqm-portal-footer>\n </sqm-portal-container>\n </sqm-portal-container>\n </sqm-portal-container>\n</sqm-brand>\n";
|
|
3894
3894
|
|
|
3895
|
-
const
|
|
3895
|
+
const instantAccessReferrerShareWidget = "<sqm-brand>\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xx-large\"\n max-width=\"770px\"\n center\n display=\"grid\"\n >\n <sqm-referral-card vertical-alignment=\"start\">\n <sqm-titled-section\n text-align=\"center\"\n label-margin=\"xxx-small\"\n padding=\"none\"\n slot=\"header\"\n >\n <h3 slot=\"label\">Share $50 with friends</h3>\n <p slot=\"content\">\n They’ll get a $50 credit towards a new account and\n you’ll get up to $1200\n </p>\n </sqm-titled-section>\n <sqm-portal-container\n gap=\"large\"\n slot=\"left\"\n direction=\"column\"\n display=\"grid\"\n max-width=\"100%\"\n padding=\"none\"\n >\n <p>How to get rewarded!</p>\n <sqm-timeline icon=\"circle\">\n <sqm-timeline-entry\n reward=\"$50\"\n unit=\"visa giftcard\"\n desc=\"Your friend purchases a Business plan\"\n icon=\"circle\"\n >\n </sqm-timeline-entry>\n <sqm-timeline-entry\n reward=\"$200\"\n unit=\"visa giftcard\"\n desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n icon=\"circle\"\n >\n </sqm-timeline-entry>\n <sqm-timeline-entry\n reward=\"$1000\"\n unit=\"visa giftcard\"\n desc=\"Your friend purchases an Enterprise plan\"\n icon=\"circle\"\n >\n </sqm-timeline-entry>\n </sqm-timeline>\n </sqm-portal-container>\n <sqm-portal-container\n gap=\"large\"\n slot=\"right\"\n direction=\"column\"\n display=\"grid\"\n max-width=\"100%\"\n padding=\"none\"\n >\n <p>Choose how you want to share:</p>\n <p><sub>Your unique referral link:</sub></p>\n <sqm-share-link\n tooltip-text=\"Copied to Clipboard\"\n tooltip-lifespan=\"1000\"\n >\n </sqm-share-link>\n <sqm-portal-container\n gap=\"x-small\"\n direction=\"column\"\n display=\"grid\"\n max-width=\"100%\"\n padding=\"none\"\n >\n <sqm-share-button\n medium=\"email\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Share via email\n </sqm-share-button>\n <sqm-share-button\n medium=\"linkedin\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Share on LinkedIn\n </sqm-share-button>\n <sqm-share-button\n medium=\"twitter\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Tweet about us\n </sqm-share-button>\n </sqm-portal-container>\n </sqm-portal-container>\n <sqm-portal-container\n slot=\"footer\"\n direction=\"column\"\n gap=\"small\"\n justify-content=\"center\"\n display=\"flex\"\n padding=\"large\"\n >\n <sqm-logout-current-user\n switch-user-link=\"https://www.example.com\"\n ></sqm-logout-current-user\n ><sqm-portal-footer\n padding-top=\"none\"\n padding-bottom=\"none\"\n padding-left=\"none\"\n padding-right=\"none\"\n ></sqm-portal-footer>\n </sqm-portal-container>\n </sqm-referral-card>\n </sqm-portal-container>\n</sqm-brand>\n";
|
|
3896
3896
|
|
|
3897
|
-
const
|
|
3897
|
+
const instantAccessFriendCouponWidget = "<sqm-brand>\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xx-large\"\n max-width=\"770px\"\n center\n display=\"grid\"\n >\n <sqm-referral-card vertical-alignment=\"start\">\n <sqm-portal-container\n gap=\"large\"\n direction=\"column\"\n display=\"flex\"\n justify-content=\"center\"\n max-width=\"100%\"\n padding=\"none\"\n slot=\"header\"\n >\n <sqm-titled-section\n text-align=\"center\"\n label-margin=\"xxx-small\"\n padding=\"none\"\n >\n <h3 slot=\"label\">You got $50 off thanks to a friend!</h3>\n\n <p slot=\"content\">\n Description about sharing the products wiht friends will make your\n life 100 times better!\n </p>\n </sqm-titled-section>\n\n <sqm-portal-container>\n <p>\n The coupon code has some conditions that are described concisely in\n this paragraph so that you don’t get upset if the code doesn’t work\n </p></sqm-portal-container\n >\n\n <sqm-coupon-code></sqm-coupon-code>\n </sqm-portal-container>\n\n <sqm-portal-footer\n slot=\"footer\"\n padding-top=\"none\"\n padding-bottom=\"none\"\n padding-left=\"none\"\n padding-right=\"none\"\n ></sqm-portal-footer>\n </sqm-referral-card>\n </sqm-portal-container>\n</sqm-brand>\n";
|
|
3898
3898
|
|
|
3899
|
-
const
|
|
3899
|
+
const instantAccessReferrerRegistrationWidget = "<sqm-brand>\n <sqm-instant-access-registration include-name=\"true\">\n <sqm-titled-section\n text-align=\"center\"\n label-margin=\"xxx-small\"\n padding=\"none\"\n slot=\"top-slot\"\n >\n <h3 slot=\"label\">Share $50 with friends</h3>\n <p slot=\"content\">\n They’ll get a $50 credit towards a new account and\n you’ll get up to $1200\n </p>\n </sqm-titled-section>\n\n <sqm-portal-footer\n hide-support-text=\"true\"\n terms-link=\"https://example.com\"\n terms-text=\"Terms And Conditions\"\n faq-text=\"FAQ\"\n show-powered-by=\"true\"\n padding-bottom=\"none\"\n padding-left=\"none\"\n padding-right=\"none\"\n padding-top=\"none\"\n slot=\"bottom-slot\"\n ></sqm-portal-footer>\n </sqm-instant-access-registration>\n</sqm-brand>\n";
|
|
3900
3900
|
|
|
3901
|
-
const
|
|
3901
|
+
const instantAccessFriendRegistrationWidget = "<sqm-brand>\n <sqm-referred-registration register-label=\"Get $50 off\">\n <sqm-titled-section\n text-align=\"center\"\n label-margin=\"xxx-small\"\n padding=\"none\"\n slot=\"top-slot\"\n >\n <h3 slot=\"label\">You got $50 off thanks to a friend!</h3>\n <p slot=\"content\">\n Description about sharing the products with friends will make your life\n 100 times better!\n </p>\n </sqm-titled-section>\n\n <div slot=\"bottom-slot\">\n <p style=\"text-align: center; margin-top: 0; margin-bottom: 1.5rem\">\n *Valid on purchases of $75 or more\n </p>\n <sqm-portal-footer\n hide-support-text=\"true\"\n terms-link=\"https://example.com\"\n terms-text=\"Terms And Conditions\"\n faq-text=\"FAQ\"\n show-powered-by=\"true\"\n padding-bottom=\"none\"\n padding-left=\"none\"\n padding-right=\"none\"\n padding-top=\"none\"\n ></sqm-portal-footer>\n </div>\n </sqm-referred-registration>\n</sqm-brand>\n";
|
|
3902
3902
|
|
|
3903
3903
|
const portalTemplate = "<sqm-portal-frame>\n <a slot=\"header\" href=\"/\">\n <sqm-text style=\"height: 60px\">\n <img\n style=\"height: 60px\"\n src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n />\n </sqm-text>\n </a>\n <sqb-program-section program-id=\"referral-program\">\n <sqm-router>\n <template\n path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n >\n <sqm-hero\n background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n >\n <sqm-router>\n <template path=\"/register\">\n <sqm-portal-register>\n <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n </sqm-portal-register>\n </template>\n\n <template path=\"/emailVerification\">\n <sqm-portal-protected-route\n redirect-to=\"/login\"\n ></sqm-portal-protected-route>\n <sqm-portal-email-verification></sqm-portal-email-verification>\n </template>\n\n <template path=\"/login\">\n <sqm-portal-login></sqm-portal-login>\n </template>\n\n <template path=\"/verifyEmail\">\n <sqm-portal-verify-email></sqm-portal-verify-email>\n </template>\n\n <template path=\"/forgotPassword\">\n <sqm-portal-forgot-password\n email-label=\"Business Email\"\n ></sqm-portal-forgot-password>\n </template>\n\n <template path=\"/resetPassword\">\n <sqm-portal-reset-password\n confirm-password=\"true\"\n ></sqm-portal-reset-password>\n </template>\n <template path=\"/logout\">\n <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n </template>\n </sqm-router>\n </sqm-hero>\n </template>\n </sqm-router>\n <sqm-router>\n <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n <sqm-divided-layout\n direction=\"row\"\n style=\"\n border-top: 1px solid #eaeaea;\n border-bottom: 1px solid #eaeaea;\n \"\n >\n <sqm-navigation-sidebar>\n <sqm-navigation-sidebar-item\n path=\"/\"\n icon=\"house\"\n label=\"Dashboard\"\n ></sqm-navigation-sidebar-item>\n <sqm-navigation-sidebar-item\n path=\"/activity\"\n icon=\"bar-chart\"\n label=\"Activity\"\n ></sqm-navigation-sidebar-item>\n <sqm-navigation-sidebar-item\n path=\"/editProfile\"\n icon=\"person\"\n label=\"Edit Profile\"\n ></sqm-navigation-sidebar-item>\n <sqm-navigation-sidebar-item\n path=\"/logout\"\n icon=\"box-arrow-right\"\n label=\"Logout\"\n ></sqm-navigation-sidebar-item>\n </sqm-navigation-sidebar>\n <sqm-divided-layout direction=\"column\">\n <sqm-router>\n <template path=\"/\">\n <sqm-portal-protected-route\n require-email-verification=\"true\"\n redirect-to=\"/login\"\n redirect-to-unverified=\"/emailVerification\"\n ></sqm-portal-protected-route>\n <sqb-widget\n widget-type=\"p/referral-program/w/referrerWidget\"\n track-loads=\"true\"\n ></sqb-widget>\n </template>\n <template path=\"/editProfile\">\n <sqm-portal-protected-route\n require-email-verification=\"true\"\n redirect-to=\"/login\"\n redirect-to-unverified=\"/emailVerification\"\n ></sqm-portal-protected-route>\n <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n <sqm-portal-change-password></sqm-portal-change-password>\n </sqm-portal-container>\n </template>\n\n <template path=\"/activity\">\n <sqm-portal-protected-route\n require-email-verification=\"true\"\n redirect-to=\"/login\"\n redirect-to-unverified=\"/emailVerification\"\n ></sqm-portal-protected-route>\n <sqm-portal-container\n direction=\"column\"\n padding=\"xxx-large\"\n gap=\"xxx-large\"\n >\n <sqm-text> <h1>Activity</h1></sqm-text>\n <sqm-stat-container space=\"xxxx-large\"\n ><sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/referralsCount\"\n ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n >\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n >\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardBalance/CREDIT/CENTS\"\n ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n >\n </sqm-stat-container>\n <sqm-referral-table>\n <sqm-referral-table-user-column></sqm-referral-table-user-column>\n <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n <sqm-referral-table-status-column></sqm-referral-table-status-column>\n <sqm-referral-table-date-column\n column-title=\"Referred\"\n date-shown=\"dateReferralStarted\"\n ></sqm-referral-table-date-column> </sqm-referral-table\n ></sqm-portal-container>\n </template>\n </sqm-router>\n </sqm-divided-layout>\n </sqm-divided-layout>\n </template>\n </sqm-router>\n </sqb-program-section>\n <sqm-portal-footer\n slot=\"footer\"\n support-email=\"support@example.com\"\n terms-link=\"https://example.com\"\n faq-link=\"https://example.com\"\n terms-text=\"Terms And Conditions\"\n faq-text=\"FAQ\"\n show-powered-by=\"true\"\n ></sqm-portal-footer>\n</sqm-portal-frame>\n";
|
|
3904
3904
|
|
|
@@ -7106,20 +7106,20 @@ const Loyalty = createHookStory(() => {
|
|
|
7106
7106
|
const { states, callbacks } = useTemplate$2(loyaltyWidget);
|
|
7107
7107
|
return (index.h(DefaultTemplateView$1, { states: states, callbacks: callbacks, template: loyaltyWidget }));
|
|
7108
7108
|
});
|
|
7109
|
-
const
|
|
7110
|
-
const { states, callbacks } = useTemplate$2(
|
|
7109
|
+
const InstantAccessReferrerShareWidget = createHookStory(() => {
|
|
7110
|
+
const { states, callbacks } = useTemplate$2(instantAccessReferrerShareWidget);
|
|
7111
7111
|
return index.h(TemplateView$1, { states: states, callbacks: callbacks });
|
|
7112
7112
|
});
|
|
7113
|
-
const
|
|
7114
|
-
const { states, callbacks } = useTemplate$2(
|
|
7113
|
+
const InstantAccessFriendCouponWidget = createHookStory(() => {
|
|
7114
|
+
const { states, callbacks } = useTemplate$2(instantAccessFriendCouponWidget);
|
|
7115
7115
|
return index.h(TemplateView$1, { states: states, callbacks: callbacks });
|
|
7116
7116
|
});
|
|
7117
|
-
const
|
|
7118
|
-
const { states, callbacks } = useTemplate$2(
|
|
7117
|
+
const InstantAccessReferrerRegistrationWidget = createHookStory(() => {
|
|
7118
|
+
const { states, callbacks } = useTemplate$2(instantAccessReferrerRegistrationWidget);
|
|
7119
7119
|
return index.h(TemplateView$1, { states: states, callbacks: callbacks });
|
|
7120
7120
|
});
|
|
7121
|
-
const
|
|
7122
|
-
const { states, callbacks } = useTemplate$2(
|
|
7121
|
+
const InstantAccessFriendRegistrationWidget = createHookStory(() => {
|
|
7122
|
+
const { states, callbacks } = useTemplate$2(instantAccessFriendRegistrationWidget);
|
|
7123
7123
|
return index.h(TemplateView$1, { states: states, callbacks: callbacks });
|
|
7124
7124
|
});
|
|
7125
7125
|
|
|
@@ -7129,10 +7129,10 @@ const Widget$1 = /*#__PURE__*/Object.freeze({
|
|
|
7129
7129
|
ReferralWidget: ReferralWidget,
|
|
7130
7130
|
MonoWidget: MonoWidget,
|
|
7131
7131
|
Loyalty: Loyalty,
|
|
7132
|
-
|
|
7133
|
-
|
|
7134
|
-
|
|
7135
|
-
|
|
7132
|
+
InstantAccessReferrerShareWidget: InstantAccessReferrerShareWidget,
|
|
7133
|
+
InstantAccessFriendCouponWidget: InstantAccessFriendCouponWidget,
|
|
7134
|
+
InstantAccessReferrerRegistrationWidget: InstantAccessReferrerRegistrationWidget,
|
|
7135
|
+
InstantAccessFriendRegistrationWidget: InstantAccessFriendRegistrationWidget
|
|
7136
7136
|
});
|
|
7137
7137
|
|
|
7138
7138
|
const SidebarItem_stories = {
|
|
@@ -13182,7 +13182,7 @@ const defaultProps$e = {
|
|
|
13182
13182
|
copyString: "THANKSJANE125uv125",
|
|
13183
13183
|
open: false,
|
|
13184
13184
|
copyButtonLabel: "Copy Coupon",
|
|
13185
|
-
errorText: "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later.",
|
|
13185
|
+
errorText: "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later or contact support.",
|
|
13186
13186
|
inputPlaceholderText: "CODE ERROR",
|
|
13187
13187
|
};
|
|
13188
13188
|
const CouponCode = () => {
|
|
@@ -13229,7 +13229,7 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
|
|
|
13229
13229
|
|
|
13230
13230
|
const scenario$A = "@author:noah\n@owner:noah\n\nFeature: User Identifier\n\n Scenario: A user on an instant access widget\n Given a user viewing an instant access widget\n And the user is identified\n And the user is not logged in\n Then the component identifies the user by email\n\n Scenario: Users can switch who they are identified as through a link\n Given a user viewing an instant access widget\n And the user is identified\n And the user is not logged in\n When the user clicks the link in the component\n Then they are sent back to the registration form to re-identify themselves";
|
|
13231
13231
|
|
|
13232
|
-
const
|
|
13232
|
+
const LogoutCurrentUser_stories = {
|
|
13233
13233
|
title: "Components/User Identifier",
|
|
13234
13234
|
parameters: {
|
|
13235
13235
|
scenario: scenario$A,
|
|
@@ -13241,12 +13241,12 @@ const defaultProps$f = {
|
|
|
13241
13241
|
switchUserText: "not you?",
|
|
13242
13242
|
};
|
|
13243
13243
|
const Default$f = () => {
|
|
13244
|
-
return index.h(
|
|
13244
|
+
return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$f));
|
|
13245
13245
|
};
|
|
13246
13246
|
|
|
13247
|
-
const
|
|
13247
|
+
const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
|
|
13248
13248
|
__proto__: null,
|
|
13249
|
-
'default':
|
|
13249
|
+
'default': LogoutCurrentUser_stories,
|
|
13250
13250
|
Default: Default$f
|
|
13251
13251
|
});
|
|
13252
13252
|
|
|
@@ -15987,7 +15987,7 @@ const stories = [
|
|
|
15987
15987
|
Tabs,
|
|
15988
15988
|
ShareCode$1,
|
|
15989
15989
|
CouponCode$1,
|
|
15990
|
-
|
|
15990
|
+
LogoutCurrentUser,
|
|
15991
15991
|
LinkButton,
|
|
15992
15992
|
EmailRegistration,
|
|
15993
15993
|
];
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"./components/sqm-leaderboard/sqm-leaderboard.js",
|
|
27
27
|
"./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
|
|
28
28
|
"./components/sqm-link-button/sqm-link-button.js",
|
|
29
|
+
"./components/sqm-logout-current-user/sqm-logout-current-user.js",
|
|
29
30
|
"./components/sqm-name-fields/sqm-name-fields.js",
|
|
30
31
|
"./components/sqm-navigation-menu/sqm-navigation-menu.js",
|
|
31
32
|
"./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
|
|
@@ -90,7 +91,6 @@
|
|
|
90
91
|
"./components/sqm-timeline/sqm-timeline-entry.js",
|
|
91
92
|
"./components/sqm-timeline/sqm-timeline.js",
|
|
92
93
|
"./components/sqm-titled-section/sqm-titled-section.js",
|
|
93
|
-
"./components/sqm-user-identifier/sqm-user-identifier.js",
|
|
94
94
|
"./components/sqm-user-name/sqm-user-name.js"
|
|
95
95
|
],
|
|
96
96
|
"compiler": {
|
|
@@ -11,7 +11,7 @@ const defaultProps = {
|
|
|
11
11
|
copyString: "THANKSJANE125uv125",
|
|
12
12
|
open: false,
|
|
13
13
|
copyButtonLabel: "Copy Coupon",
|
|
14
|
-
errorText: "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later.",
|
|
14
|
+
errorText: "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later or contact support.",
|
|
15
15
|
inputPlaceholderText: "CODE ERROR",
|
|
16
16
|
};
|
|
17
17
|
export const CouponCode = () => {
|
|
@@ -53,7 +53,7 @@ export class CouponCode {
|
|
|
53
53
|
*
|
|
54
54
|
* @uiName Error message
|
|
55
55
|
*/
|
|
56
|
-
this.errorText = "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later.";
|
|
56
|
+
this.errorText = "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later or contact support.";
|
|
57
57
|
/**
|
|
58
58
|
* Set coupon code placeholder for when there there is no coupon code to display
|
|
59
59
|
*
|
|
@@ -238,7 +238,7 @@ export class CouponCode {
|
|
|
238
238
|
},
|
|
239
239
|
"attribute": "error-text",
|
|
240
240
|
"reflect": false,
|
|
241
|
-
"defaultValue": "\"Oops! Looks like we weren\u2019t able to retrieve a code for you. Please try again later.\""
|
|
241
|
+
"defaultValue": "\"Oops! Looks like we weren\u2019t able to retrieve a code for you. Please try again later or contact support.\""
|
|
242
242
|
},
|
|
243
243
|
"couponCodePlaceholder": {
|
|
244
244
|
"type": "string",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
-
import scenario from "./sqm-user
|
|
3
|
-
import {
|
|
2
|
+
import scenario from "./sqm-logout-current-user.feature";
|
|
3
|
+
import { LogoutCurrentUserView } from "./sqm-logout-current-user-view";
|
|
4
4
|
export default {
|
|
5
5
|
title: "Components/User Identifier",
|
|
6
6
|
parameters: {
|
|
@@ -13,5 +13,5 @@ const defaultProps = {
|
|
|
13
13
|
switchUserText: "not you?",
|
|
14
14
|
};
|
|
15
15
|
export const Default = () => {
|
|
16
|
-
return h(
|
|
16
|
+
return h(LogoutCurrentUserView, Object.assign({}, defaultProps));
|
|
17
17
|
};
|
|
@@ -17,7 +17,7 @@ const vanillaStyle = `
|
|
|
17
17
|
`;
|
|
18
18
|
const sheet = createStyleSheet(style);
|
|
19
19
|
const styleString = sheet.toString();
|
|
20
|
-
export function
|
|
20
|
+
export function LogoutCurrentUserView(props) {
|
|
21
21
|
const { userIdentificationText, onSwitchClick, switchUserText } = props;
|
|
22
22
|
return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
|
|
23
23
|
h("style", { type: "text/css" },
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { isDemo, setUserIdentity } from "@saasquatch/component-boilerplate";
|
|
2
2
|
import { Component, h, Prop } from "@stencil/core";
|
|
3
3
|
import deepmerge from "deepmerge";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { LogoutCurrentUserView, } from "./sqm-logout-current-user-view";
|
|
5
|
+
import { useLogoutCurrentUser } from "./useLogoutCurrentUser";
|
|
6
6
|
/**
|
|
7
7
|
* @uiName User Identifier
|
|
8
8
|
* @exampleGroup Common Components
|
|
9
|
-
* @example User Identifier - <sqm-user
|
|
9
|
+
* @example User Identifier - <sqm-logout-current-user user-identification-text="Showing data for {email}" switch-user-link="#" switch-user-text="not you?"></sqm-logout-current-user>
|
|
10
10
|
*/
|
|
11
|
-
export class
|
|
11
|
+
export class LogoutCurrentUser {
|
|
12
12
|
constructor() {
|
|
13
13
|
/**
|
|
14
14
|
* @required
|
|
@@ -23,11 +23,11 @@ export class UserIdentifier {
|
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
25
|
const props = isDemo()
|
|
26
|
-
?
|
|
27
|
-
:
|
|
28
|
-
return h(
|
|
26
|
+
? useDemoLogoutCurrentUser(this)
|
|
27
|
+
: useLogoutCurrentUser(this);
|
|
28
|
+
return h(LogoutCurrentUserView, Object.assign({}, props));
|
|
29
29
|
}
|
|
30
|
-
static get is() { return "sqm-user
|
|
30
|
+
static get is() { return "sqm-logout-current-user"; }
|
|
31
31
|
static get encapsulation() { return "shadow"; }
|
|
32
32
|
static get properties() { return {
|
|
33
33
|
"userIdentificationText": {
|
|
@@ -110,7 +110,7 @@ export class UserIdentifier {
|
|
|
110
110
|
}
|
|
111
111
|
}; }
|
|
112
112
|
}
|
|
113
|
-
function
|
|
113
|
+
function useDemoLogoutCurrentUser(props) {
|
|
114
114
|
return deepmerge({
|
|
115
115
|
onSwitchClick: () => setUserIdentity(undefined),
|
|
116
116
|
userIdentificationText: props.userIdentificationText,
|
|
@@ -71,7 +71,7 @@ import * as Tabs from "../sqm-tabs/Tabs.stories";
|
|
|
71
71
|
import * as ShareCode from "../sqm-share-code/ShareCode.stories";
|
|
72
72
|
import * as EmailRegistration from "../views/EmailRegistration.stories";
|
|
73
73
|
import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
|
|
74
|
-
import * as
|
|
74
|
+
import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
|
|
75
75
|
import * as LinkButton from "../sqm-link-button/LinkButton.stories";
|
|
76
76
|
import * as Themes from "./Themes";
|
|
77
77
|
import { CucumberAddon } from "./CucumberAddon";
|
|
@@ -148,7 +148,7 @@ const stories = [
|
|
|
148
148
|
Tabs,
|
|
149
149
|
ShareCode,
|
|
150
150
|
CouponCode,
|
|
151
|
-
|
|
151
|
+
LogoutCurrentUser,
|
|
152
152
|
LinkButton,
|
|
153
153
|
EmailRegistration,
|
|
154
154
|
];
|
|
@@ -15,17 +15,13 @@ const style = {
|
|
|
15
15
|
},
|
|
16
16
|
containerStyle: {
|
|
17
17
|
display: "flex",
|
|
18
|
+
alignItems: "center",
|
|
18
19
|
gap: "8px",
|
|
19
20
|
},
|
|
20
21
|
errorTextStyle: {
|
|
21
22
|
margin: "0",
|
|
22
23
|
color: "red",
|
|
23
24
|
},
|
|
24
|
-
helptextStyle: {
|
|
25
|
-
display: "flex",
|
|
26
|
-
flexDirection: "column",
|
|
27
|
-
marginTop: "8px",
|
|
28
|
-
},
|
|
29
25
|
};
|
|
30
26
|
const textAlignStyle = `
|
|
31
27
|
:host{
|
|
@@ -39,7 +35,7 @@ const sheet = createStyleSheet(style);
|
|
|
39
35
|
const styleString = sheet.toString();
|
|
40
36
|
export function CopyTextView(props) {
|
|
41
37
|
const { buttonStyle = "icon", errorText = "An error occurred" } = props;
|
|
42
|
-
const copyButton = buttonStyle === "icon" ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: buttonStyle === "button
|
|
38
|
+
const copyButton = buttonStyle === "icon" ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "small", style: { width: `${buttonStyle === "button below" && "100%"}` }, disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
|
|
43
39
|
const inputText = !props.copyString || props.error
|
|
44
40
|
? props.inputPlaceholderText
|
|
45
41
|
: props.copyString;
|
|
@@ -52,11 +48,9 @@ export function CopyTextView(props) {
|
|
|
52
48
|
flexDirection: `${buttonStyle === "button below" ? "column" : "row"}`,
|
|
53
49
|
width: "100%",
|
|
54
50
|
} },
|
|
55
|
-
h("sl-input", { class: `${sheet.classes.inputStyle} ${props.error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: inputText, readonly: true, style: {} },
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
copyButton,
|
|
61
|
-
props.error && (h("p", { class: sheet.classes.errorTextStyle }, errorText))))))));
|
|
51
|
+
h("sl-input", { class: `${sheet.classes.inputStyle} ${props.error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: inputText, readonly: true, style: {} }, buttonStyle === "icon" ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })) : (buttonStyle === "button inside" && copyButton)),
|
|
52
|
+
(buttonStyle === "button outside" ||
|
|
53
|
+
buttonStyle === "button below") &&
|
|
54
|
+
copyButton),
|
|
55
|
+
props.error && h("p", { class: sheet.classes.errorTextStyle }, errorText))));
|
|
62
56
|
}
|
|
@@ -4,10 +4,10 @@ import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
|
|
|
4
4
|
import referralWidget from "../templates/ReferralWidget.html";
|
|
5
5
|
import monoWidget from "../templates/MonoWidget.html";
|
|
6
6
|
import loyaltyWidget from "../templates/LoyaltyWidget.html";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
7
|
+
import instantAccessReferrerShareWidget from "../templates/InstantAccessReferrerShareWidget.html";
|
|
8
|
+
import instantAccessFriendCouponWidget from "../templates/InstantAccessFriendCouponWidget.html";
|
|
9
|
+
import instantAccessReferrerRegistrationWidget from "../templates/InstantAccessReferrerRegistrationWidget.html";
|
|
10
|
+
import instantAccessFriendRegistrationWidget from "../templates/InstantAccessFriendRegistrationWidget.html";
|
|
11
11
|
import { TemplateView } from "./PortalTemplates.stories";
|
|
12
12
|
export default {
|
|
13
13
|
title: "Templates / Widgets",
|
|
@@ -52,19 +52,19 @@ export const Loyalty = createHookStory(() => {
|
|
|
52
52
|
const { states, callbacks } = useTemplate(loyaltyWidget);
|
|
53
53
|
return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: loyaltyWidget }));
|
|
54
54
|
});
|
|
55
|
-
export const
|
|
56
|
-
const { states, callbacks } = useTemplate(
|
|
55
|
+
export const InstantAccessReferrerShareWidget = createHookStory(() => {
|
|
56
|
+
const { states, callbacks } = useTemplate(instantAccessReferrerShareWidget);
|
|
57
57
|
return h(TemplateView, { states: states, callbacks: callbacks });
|
|
58
58
|
});
|
|
59
|
-
export const
|
|
60
|
-
const { states, callbacks } = useTemplate(
|
|
59
|
+
export const InstantAccessFriendCouponWidget = createHookStory(() => {
|
|
60
|
+
const { states, callbacks } = useTemplate(instantAccessFriendCouponWidget);
|
|
61
61
|
return h(TemplateView, { states: states, callbacks: callbacks });
|
|
62
62
|
});
|
|
63
|
-
export const
|
|
64
|
-
const { states, callbacks } = useTemplate(
|
|
63
|
+
export const InstantAccessReferrerRegistrationWidget = createHookStory(() => {
|
|
64
|
+
const { states, callbacks } = useTemplate(instantAccessReferrerRegistrationWidget);
|
|
65
65
|
return h(TemplateView, { states: states, callbacks: callbacks });
|
|
66
66
|
});
|
|
67
|
-
export const
|
|
68
|
-
const { states, callbacks } = useTemplate(
|
|
67
|
+
export const InstantAccessFriendRegistrationWidget = createHookStory(() => {
|
|
68
|
+
const { states, callbacks } = useTemplate(instantAccessFriendRegistrationWidget);
|
|
69
69
|
return h(TemplateView, { states: states, callbacks: callbacks });
|
|
70
70
|
});
|
|
@@ -200,17 +200,13 @@ const style$2 = {
|
|
|
200
200
|
},
|
|
201
201
|
containerStyle: {
|
|
202
202
|
display: "flex",
|
|
203
|
+
alignItems: "center",
|
|
203
204
|
gap: "8px",
|
|
204
205
|
},
|
|
205
206
|
errorTextStyle: {
|
|
206
207
|
margin: "0",
|
|
207
208
|
color: "red",
|
|
208
209
|
},
|
|
209
|
-
helptextStyle: {
|
|
210
|
-
display: "flex",
|
|
211
|
-
flexDirection: "column",
|
|
212
|
-
marginTop: "8px",
|
|
213
|
-
},
|
|
214
210
|
};
|
|
215
211
|
const textAlignStyle = `
|
|
216
212
|
:host{
|
|
@@ -224,7 +220,7 @@ const sheet$2 = createStyleSheet(style$2);
|
|
|
224
220
|
const styleString$2 = sheet$2.toString();
|
|
225
221
|
function CopyTextView(props) {
|
|
226
222
|
const { buttonStyle = "icon", errorText = "An error occurred" } = props;
|
|
227
|
-
const copyButton = buttonStyle === "icon" ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: buttonStyle === "button
|
|
223
|
+
const copyButton = buttonStyle === "icon" ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "small", style: { width: `${buttonStyle === "button below" && "100%"}` }, disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
|
|
228
224
|
const inputText = !props.copyString || props.error
|
|
229
225
|
? props.inputPlaceholderText
|
|
230
226
|
: props.copyString;
|
|
@@ -237,13 +233,11 @@ function CopyTextView(props) {
|
|
|
237
233
|
flexDirection: `${buttonStyle === "button below" ? "column" : "row"}`,
|
|
238
234
|
width: "100%",
|
|
239
235
|
} },
|
|
240
|
-
h("sl-input", { class: `${sheet$2.classes.inputStyle} ${props.error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: inputText, readonly: true, style: {} },
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
copyButton,
|
|
246
|
-
props.error && (h("p", { class: sheet$2.classes.errorTextStyle }, errorText))))))));
|
|
236
|
+
h("sl-input", { class: `${sheet$2.classes.inputStyle} ${props.error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: inputText, readonly: true, style: {} }, buttonStyle === "icon" ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })) : (buttonStyle === "button inside" && copyButton)),
|
|
237
|
+
(buttonStyle === "button outside" ||
|
|
238
|
+
buttonStyle === "button below") &&
|
|
239
|
+
copyButton),
|
|
240
|
+
props.error && h("p", { class: sheet$2.classes.errorTextStyle }, errorText))));
|
|
247
241
|
}
|
|
248
242
|
|
|
249
243
|
function BigStatView(props) {
|