npm - @saasquatch/mint-components - Versions diffs - 1.6.8-13 → 1.6.8-15 - Mend

@saasquatch/mint-components 1.6.8-13 → 1.6.8-15

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.

Files changed (241) hide show

package/dist/cjs/sqm-stencilbook.cjs.entry.js CHANGED Viewed

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-require('./global-f85048bf.js');
+require('./global-5b8a6adf.js');
 require('./use-callback-86e9ac75.js');
-const index_module = require('./index.module-2ca13866.js');
+const index_module = require('./index.module-dba49050.js');
 require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const GenericTableView = require('./GenericTableView-380b83e2.js');
-require('./useChildElements-65547fd2.js');
+require('./useChildElements-9e028700.js');
 const luxon = require('./luxon-53e983a6.js');
 require('./utils-6847bc06.js');
 require('./sqm-text-span-view-3c734dbb.js');
@@ -20,16 +20,16 @@ const sqmHeroView = require('./sqm-hero-view-ddd1ef43.js');
 const emailRegistrationView = require('./email-registration-view-972baf62.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
 const sqmLinkButtonView = require('./sqm-link-button-view-2ee270e0.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-9c3f9464.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-b830e8d8.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-828f3fe3.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-1ae8805f.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-2a340425.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-9cabaffe.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-f73bb724.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-4baa40c2.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-9ec4a51c.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-e182df83.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-fd739843.js');
-const ShadowViewAddon = require('./ShadowViewAddon-e9b5b949.js');
+const ShadowViewAddon = require('./ShadowViewAddon-fe65e8c7.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-6accb54a.js');
-const sqmUserIdentifierView = require('./sqm-user-identifier-view-53f37293.js');
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1445,7 +1445,7 @@ var _createEmotion = createEmotion({
 }),
     css = _createEmotion.css;
-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 s(n,t){return t||(t=n.slice(0)),n.raw=t,n}var a$1,l,u,c$1=css(a$1||(a$1=s(['\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(a,f){var b=f.h,y=void 0===b?index.h:b,g=f.title,m=void 0===g?"Stencilbook":g,x=f.homepage,h=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=stencilHooks_module.useMemo(function(){return a.map(d$1).reduce(p$1,{_:[]})},a),S=stencilHooks_module.useState(void 0),C=S[0],z=S[1],O=null==C?void 0:C.key,j=stencilHooks_module.useState("desktop"),T=j[0],_=j[1],B=stencilHooks_module.useState(!0),D=B[0],L=B[1],N=stencilHooks_module.useState(!1),q=N[0],A=N[1],M=function(){return y("div",{class:"dynamic-display-wrapper"},y("div",{class:"button-wrapper"},y("button",{class:"desktop"===T?"active":"",onClick:function(){return _("desktop")}},"Desktop"),y("button",{class:"tablet"===T?"active":"",onClick:function(){return _("tablet")}},"Tablet"),y("button",{class:"mobile"===T?"active":"",onClick:function(){return _("mobile")}},"Mobile")),y("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),y("hr",null),y("button",{class:q?"active":"",onClick:function(){return A(function(n){return !n})}},"Toggle Dark Background"),y("hr",null),y("button",{class:D?"active":"",onClick:function(){return L(function(n){return !n})}},"Toggle Sidebar"))},P="mobile"===T?"375px":"tablet"===T?"768px":"1124px",V=css(l||(l=s(["\n    max-width: ",";\n    margin-left: ",";\n  "])),P,D?"250px":"0px"),X=css(u||(u=s(["\n    display: none;\n  "])));document.body.style.backgroundColor=q?"#232323":"#fafafa";var E=function(n){var t=n.selected,o=k.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)},F=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(D?"":X)},y("div",{class:"header",onClick:function(){z(void 0);}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),w[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+"/"+o,i=t.subs[o],s=i.storyName||lodash_startcase(o);return y("div",{class:"subStory "+(O===e?"selected":"")},y("a",{onClick:function(){return function(n,t,o,r){z({key:t,story:n,parent:o,label:r});}(i,e,t.story,s)}},s))})))}))}))),y(M,null),y("div",{class:"component "+V},!O&&h,O&&y("div",null,y("h3",null,C.label),y(E,{selected:C}))))};return {class:c$1,children:y(F,null),View:F,selected:C}}
+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}}
 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";
@@ -3892,13 +3892,13 @@ const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\
 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";
-const instantAccessShareWidget = "<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 &#x24;50 with friends</h3>\n        <p slot=\"content\">\n          They&#x2019;ll get a &#x24;50 credit towards a new account and\n          you&#x2019;ll get up to &#x24;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-user-identifier\n          switch-user-link=\"https://www.example.com\"\n        ></sqm-user-identifier\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";
+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 &#x24;50 with friends</h3>\n        <p slot=\"content\">\n          They&#x2019;ll get a &#x24;50 credit towards a new account and\n          you&#x2019;ll get up to &#x24;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";
-const instantAccessCouponWidget = "<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";
+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";
-const instantAccessReferrerRegistationWidget = "<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 &#x24;50 with friends</h3>\n      <p slot=\"content\">\n        They&#x2019;ll get a &#x24;50 credit towards a new account and\n        you&#x2019;ll get up to &#x24;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";
+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 &#x24;50 with friends</h3>\n      <p slot=\"content\">\n        They&#x2019;ll get a &#x24;50 credit towards a new account and\n        you&#x2019;ll get up to &#x24;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";
-const instantAccessReferredRegistationWidget = "<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";
+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";
 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";
@@ -7106,20 +7106,20 @@ const Loyalty = createHookStory(() => {
   const { states, callbacks } = useTemplate$2(loyaltyWidget);
   return (index.h(DefaultTemplateView$1, { states: states, callbacks: callbacks, template: loyaltyWidget }));
 });
-const InstantAccessShareWidget = createHookStory(() => {
-  const { states, callbacks } = useTemplate$2(instantAccessShareWidget);
+const InstantAccessReferrerShareWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate$2(instantAccessReferrerShareWidget);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
-const InstantAccessCouponWidget = createHookStory(() => {
-  const { states, callbacks } = useTemplate$2(instantAccessCouponWidget);
+const InstantAccessFriendCouponWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate$2(instantAccessFriendCouponWidget);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
-const InstantAccessReferrerRegistationWidget = createHookStory(() => {
-  const { states, callbacks } = useTemplate$2(instantAccessReferrerRegistationWidget);
+const InstantAccessReferrerRegistrationWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate$2(instantAccessReferrerRegistrationWidget);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
-const InsantAccessReferredRegistationWidget = createHookStory(() => {
-  const { states, callbacks } = useTemplate$2(instantAccessReferredRegistationWidget);
+const InstantAccessFriendRegistrationWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate$2(instantAccessFriendRegistrationWidget);
   return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
@@ -7129,10 +7129,10 @@ const Widget$1 = /*#__PURE__*/Object.freeze({
   ReferralWidget: ReferralWidget,
   MonoWidget: MonoWidget,
   Loyalty: Loyalty,
-  InstantAccessShareWidget: InstantAccessShareWidget,
-  InstantAccessCouponWidget: InstantAccessCouponWidget,
-  InstantAccessReferrerRegistationWidget: InstantAccessReferrerRegistationWidget,
-  InsantAccessReferredRegistationWidget: InsantAccessReferredRegistationWidget
+  InstantAccessReferrerShareWidget: InstantAccessReferrerShareWidget,
+  InstantAccessFriendCouponWidget: InstantAccessFriendCouponWidget,
+  InstantAccessReferrerRegistrationWidget: InstantAccessReferrerRegistrationWidget,
+  InstantAccessFriendRegistrationWidget: InstantAccessFriendRegistrationWidget
 });
 const SidebarItem_stories = {
@@ -13171,10 +13171,12 @@ const EmailRegistration = /*#__PURE__*/Object.freeze({
   EmptyEmailError: EmptyEmailError
 });
+const scenario$A = "@author:truman\n@owner:truman\nFeature: Coupon Code\n\n    The coupon code component is a box that allows users to see and copy their coupon code for a given program\n\n    @motivating\n    Scenario: A Users sharelink can be copied to their clipboard\n        Given tooltipText is \"hello tooltip\"\n        When the component renders\n        Then there is a textbox with the user's coupon code\n        When the clipboard icon is clicked\n        Then the link is copied to clipboard\n        And a tooltip appears for ~1 second\n\n    @minutia\n    Scenario: Tooltip lifespan defaults to 2000\n        Given the tooltip's lifespan is set to 2000\n        And there is tooltip text\n        When the component renders\n        And the clipboard icon is clicked\n        Then a tooltip appears for ~2 seconds\n\n    @minutia\n    Scenario: Component shows an error state when there are no coupon codes\n        Given a user is viewing the coupon code component\n        When there are no coupon code to display\n        Then the coupon code input box has a red border\n        And there is red help text about the error\n        And in place of the coupon code is \"CODE ERROR\"\n        When the copy button's position is set to \"below\"\n        Then the red help text is below the copy button\n\n    @ui\n    Scenario: user can edit the error message and code placeholder\n\n    @ui\n    Scenario: user can edit the alignment of the coupon code text\n\n    @ui\n    Scenario Outline: The position of the copy button can be changed\n        Given a user is editing the coupon code component\n        When they change the option \"Button style\" to <option>\n        Then they see the copy button in <position>\n        Examples:\n            | option         | position                        |\n            | button inside  | inside the input, on the right  |\n            | button outside | outside the input, on the right |\n            | button below   | outside the input, below        |";
 const CouponCode_stories = {
   title: "Components/Coupon Code",
   parameters: {
-  // scenario,
+    scenario: scenario$A,
   },
 };
 const defaultProps$e = {
@@ -13182,8 +13184,8 @@ const defaultProps$e = {
   copyString: "THANKSJANE125uv125",
   open: false,
   copyButtonLabel: "Copy Coupon",
-  errorText: "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later.",
   inputPlaceholderText: "CODE ERROR",
+  rewardStatus: "AVAILABLE",
 };
 const CouponCode = () => {
   return index.h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
@@ -13206,11 +13208,20 @@ const CopyButtonInside$2 = () => {
 const CopyButtonBelow$2 = () => {
   return (index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { buttonStyle: "button below" })));
 };
-const Error$9 = () => {
-  return index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { error: true }));
+const ErrorPending = () => {
+  return (index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { rewardStatus: "PENDING", errorText: "Oops! Looks like we weren\u2019t able to retrieve a code for you. Please try again later or contact support." })));
+};
+const ErrorCancelled = () => {
+  return (index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { rewardStatus: "CANCELLED", errorText: "Oops! Your coupon code is cancelled. Please try again later or contact support." })));
+};
+const ErrorRedeemed = () => {
+  return (index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { rewardStatus: "REDEEMED", errorText: "Oops! Your coupon code has already been redeemed. Please try again later or contact support." })));
+};
+const ErrorExpired = () => {
+  return (index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { rewardStatus: "EXPIRED", errorText: "Oops! Your coupon code is expired. Please try again later or contact support." })));
 };
 const ErrorButtonBelow = () => {
-  return (index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { error: true, buttonStyle: "button below" })));
+  return (index.h(ShadowViewAddon.CopyTextView, Object.assign({}, defaultProps$e, { rewardStatus: "PENDING", buttonStyle: "button below" })));
 };
 const CouponCode$1 = /*#__PURE__*/Object.freeze({
@@ -13223,16 +13234,19 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
   CopyButton: CopyButton$2,
   CopyButtonInside: CopyButtonInside$2,
   CopyButtonBelow: CopyButtonBelow$2,
-  Error: Error$9,
+  ErrorPending: ErrorPending,
+  ErrorCancelled: ErrorCancelled,
+  ErrorRedeemed: ErrorRedeemed,
+  ErrorExpired: ErrorExpired,
   ErrorButtonBelow: ErrorButtonBelow
 });
-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";
+const scenario$B = "@author:noah\n@owner:noah\n\nFeature: Logout Current User\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";
-const UserIdentifier_stories = {
-  title: "Components/User Identifier",
+const LogoutCurrentUser_stories = {
+  title: "Components/Logout Current User",
   parameters: {
-    scenario: scenario$A,
+    scenario: scenario$B,
   },
 };
 const defaultProps$f = {
@@ -13241,21 +13255,21 @@ const defaultProps$f = {
   switchUserText: "not you?",
 };
 const Default$f = () => {
-  return index.h(sqmUserIdentifierView.UserIdentifierView, Object.assign({}, defaultProps$f));
+  return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$f));
 };
-const UserIdentifier = /*#__PURE__*/Object.freeze({
+const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': UserIdentifier_stories,
+  'default': LogoutCurrentUser_stories,
   Default: Default$f
 });
-const scenario$B = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\tScenario: When a user clicks the button a link open\n\t\tWhen a user clicks the button\n\t\tThen a link opens\n\t\tAnd if `openInNewTab` is set to true then the link opens in a new tab";
+const scenario$C = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\tScenario: When a user clicks the button a link open\n\t\tWhen a user clicks the button\n\t\tThen a link opens\n\t\tAnd if `openInNewTab` is set to true then the link opens in a new tab";
 const LinkButton_stories = {
   title: "Components/Link Button",
   parameters: {
-    scenario: scenario$B,
+    scenario: scenario$C,
   },
 };
 const defaultProps$g = {
@@ -15987,7 +16001,7 @@ const stories = [
   Tabs,
   ShareCode$1,
   CouponCode$1,
-  UserIdentifier,
+  LogoutCurrentUser,
   LinkButton,
   EmailRegistration,
 ];

package/dist/cjs/sqm-tab.cjs.entry.js CHANGED Viewed

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
 require('./use-callback-86e9ac75.js');
-require('./index.module-2ca13866.js');
-const reRender = require('./re-render-c00242fe.js');
+require('./index.module-dba49050.js');
+const reRender = require('./re-render-3b3d609d.js');
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

package/dist/cjs/sqm-tabs.cjs.entry.js CHANGED Viewed

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
 require('./use-callback-86e9ac75.js');
-const index_module = require('./index.module-2ca13866.js');
-const reRender = require('./re-render-c00242fe.js');
-const useChildElements = require('./useChildElements-65547fd2.js');
+const index_module = require('./index.module-dba49050.js');
+const reRender = require('./re-render-3b3d609d.js');
+const useChildElements = require('./useChildElements-9e028700.js');
 const utils = require('./utils-6847bc06.js');
 const TabsView = ({ content, placement, }) => {

package/dist/cjs/{useChildElements-65547fd2.js → useChildElements-9e028700.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-const index_module = require('./index.module-2ca13866.js');
+const index_module = require('./index.module-dba49050.js');
 function useChildElements() {
   const host = index_module.V();

package/dist/cjs/{useInstantAccessRegistration-e6387667.js → useInstantAccessRegistration-2d149bea.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-const index_module = require('./index.module-2ca13866.js');
+const index_module = require('./index.module-dba49050.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 function useInstantAccessRegistration(options) {

package/dist/cjs/{useReferralTable-1ad18c8b.js → useReferralTable-53104b33.js} RENAMED Viewed

@@ -2,9 +2,9 @@
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-const index_module = require('./index.module-2ca13866.js');
-const reRender = require('./re-render-c00242fe.js');
-const useChildElements = require('./useChildElements-65547fd2.js');
+const index_module = require('./index.module-dba49050.js');
+const reRender = require('./re-render-3b3d609d.js');
+const useChildElements = require('./useChildElements-9e028700.js');
 const luxon = require('./luxon-53e983a6.js');
 const mockRewardData = (count = 4) => {
@@ -343,8 +343,8 @@ const GET_REFERRAL_DATA = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c;
-  const user = index_module.H();
-  const programIdContext = index_module.N();
+  const user = index_module.L();
+  const programIdContext = index_module.O();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -366,7 +366,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.O();
+  const locale = index_module.W();
   const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.mn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,

package/dist/cjs/{useRegistrationFormState-59c2c7d2.js → useRegistrationFormState-81f74f14.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-const index_module = require('./index.module-2ca13866.js');
+const index_module = require('./index.module-dba49050.js');
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -26,6 +26,7 @@
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-link-button/sqm-link-button.js",
+    "./components/sqm-logout-current-user/sqm-logout-current-user.js",
     "./components/sqm-name-fields/sqm-name-fields.js",
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
@@ -90,7 +91,6 @@
     "./components/sqm-timeline/sqm-timeline-entry.js",
     "./components/sqm-timeline/sqm-timeline.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
-    "./components/sqm-user-identifier/sqm-user-identifier.js",
     "./components/sqm-user-name/sqm-user-name.js"
   ],
   "compiler": {

package/dist/collection/components/sqm-coupon-code/CouponCode.stories.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { h } from "@stencil/core";
 import { CopyTextView } from "../views/copy-text-view";
+import scenario from "./sqm-coupon-code.feature";
 export default {
   title: "Components/Coupon Code",
   parameters: {
-  // scenario,
+    scenario,
   },
 };
 const defaultProps = {
@@ -11,8 +12,8 @@ const defaultProps = {
   copyString: "THANKSJANE125uv125",
   open: false,
   copyButtonLabel: "Copy Coupon",
-  errorText: "Oops! Looks like we weren’t able to retrieve a code for you. Please try again later.",
   inputPlaceholderText: "CODE ERROR",
+  rewardStatus: "AVAILABLE",
 };
 export const CouponCode = () => {
   return h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
@@ -35,9 +36,18 @@ export const CopyButtonInside = () => {
 export const CopyButtonBelow = () => {
   return (h(CopyTextView, Object.assign({}, defaultProps, { buttonStyle: "button below" })));
 };
-export const Error = () => {
-  return h(CopyTextView, Object.assign({}, defaultProps, { error: true }));
+export const ErrorPending = () => {
+  return (h(CopyTextView, Object.assign({}, defaultProps, { rewardStatus: "PENDING", errorText: "Oops! Looks like we weren\u2019t able to retrieve a code for you. Please try again later or contact support." })));
+};
+export const ErrorCancelled = () => {
+  return (h(CopyTextView, Object.assign({}, defaultProps, { rewardStatus: "CANCELLED", errorText: "Oops! Your coupon code is cancelled. Please try again later or contact support." })));
+};
+export const ErrorRedeemed = () => {
+  return (h(CopyTextView, Object.assign({}, defaultProps, { rewardStatus: "REDEEMED", errorText: "Oops! Your coupon code has already been redeemed. Please try again later or contact support." })));
+};
+export const ErrorExpired = () => {
+  return (h(CopyTextView, Object.assign({}, defaultProps, { rewardStatus: "EXPIRED", errorText: "Oops! Your coupon code is expired. Please try again later or contact support." })));
 };
 export const ErrorButtonBelow = () => {
-  return (h(CopyTextView, Object.assign({}, defaultProps, { error: true, buttonStyle: "button below" })));
+  return (h(CopyTextView, Object.assign({}, defaultProps, { rewardStatus: "PENDING", buttonStyle: "button below" })));
 };