@saasquatch/mint-components 1.11.1-32 → 1.11.1-33

package/dist/cjs/{ShadowViewAddon-1ed28176.js → ShadowViewAddon-9a4092ee.js}

@@ -6,7 +6,7 @@ const global = require('./global-e067aa06.js');
 const index_module = require('./index.module-224d7b8d.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-03774c43.js');
+const copyTextView = require('./copy-text-view-6b5c206c.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
 const useChildElements = require('./useChildElements-176ac928.js');

package/dist/cjs/{copy-text-view-03774c43.js → copy-text-view-6b5c206c.js}

@@ -18,7 +18,11 @@ const GET_REFERRAL_CODES = index_module.dist.gql `
         referralCodeList(
           limit: $limit
           offset: $offset
-          filter: { fuelTank_eq: true, programId_eq: $programId }
+          filter: {
+            fuelTank_eq: true
+            programId_eq: $programId
+            dateLastUsedInReferral_eq: false
+          }
         ) {
           data {
             code

package/dist/cjs/sqm-big-stat_38.cjs.entry.js

@@ -9,7 +9,7 @@ const index_module = require('./index.module-224d7b8d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-03774c43.js');
+const copyTextView = require('./copy-text-view-6b5c206c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const reRender = require('./re-render-cd2f8774.js');
@@ -20,7 +20,7 @@ const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-49dd9295.js');
 const utilities = require('./utilities-719c980a.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1ed28176.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9a4092ee.js');
 require('./sqm-portal-container-view-976bf0f5.js');
 
 const BigStat = class {

package/dist/cjs/sqm-pagination_3.cjs.entry.js

@@ -7,7 +7,7 @@ const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
 const index_module = require('./index.module-224d7b8d.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-03774c43.js');
+const copyTextView = require('./copy-text-view-6b5c206c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 

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

@@ -8,7 +8,7 @@ require('./global-e067aa06.js');
 const index_module = require('./index.module-224d7b8d.js');
 require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-03774c43.js');
+const copyTextView = require('./copy-text-view-6b5c206c.js');
 require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const GenericTableView = require('./GenericTableView-bb2fcd95.js');
@@ -29,7 +29,7 @@ const sqmPortalProfileView = require('./sqm-portal-profile-view-7c70d7f9.js');
 require('./utilities-719c980a.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1b85b8cf.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cc3c87c3.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1ed28176.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9a4092ee.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-976bf0f5.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-2f4f426b.js');
 
@@ -4084,7 +4084,7 @@ const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito S
 
 const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\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=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\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-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards Earned</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        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\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 you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\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>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </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                Post about us on X\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\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 X\"\n              description=\"Earn 50 points when you Follow Us on X!\"\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        <sqm-tabs>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\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-tab>\n        </sqm-tabs>\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-brand>\n";
 
-const promoCodeReferralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\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=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\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-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\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          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\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>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </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-referral-codes slot=\"right\">\n            <sqm-pagination slot=\"pagination\"></sqm-pagination>\n            <sqm-referral-code\n              slot=\"shareCodes\"\n              show-notification-text\n            ></sqm-referral-code>\n            <sqm-portal-container gap=\"small\" slot=\"shareButtons\">\n              <sqm-share-button medium=\"email\"\n                >Share via email</sqm-share-button\n              >\n              <sqm-share-button medium=\"fbmessenger\"\n                >Share on Facebook</sqm-share-button\n              >\n              <sqm-share-button medium=\"whatsapp\"\n                >Share on WhatsApp</sqm-share-button\n              >\n            </sqm-portal-container>\n          </sqm-referral-codes>\n        </sqm-referral-card>\n      </sqm-portal-container>\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\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\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-brand>\n";
+const promoCodeReferralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\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=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\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-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\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          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\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>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </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-referral-codes slot=\"right\">\n            <sqm-pagination slot=\"pagination\"></sqm-pagination>\n            <sqm-referral-code\n              slot=\"shareCodes\"\n              show-notification-text=\"true\"\n            ></sqm-referral-code>\n            <sqm-portal-container gap=\"small\" slot=\"shareButtons\">\n              <sqm-share-button medium=\"email\"\n                >Share via email</sqm-share-button\n              >\n              <sqm-share-button medium=\"fbmessenger\"\n                >Share on Facebook</sqm-share-button\n              >\n              <sqm-share-button medium=\"whatsapp\"\n                >Share on WhatsApp</sqm-share-button\n              >\n            </sqm-portal-container>\n          </sqm-referral-codes>\n        </sqm-referral-card>\n      </sqm-portal-container>\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\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\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-brand>\n";
 
 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    background-color=\"#ffffff\"\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 X\"\n              description=\"Earn 50 points when you Follow Us on X!\"\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";
 
@@ -13868,7 +13868,7 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
   Error: Error$7
 });
 
-const scenario$A = "@author:sam\n@owner:sam\nFeature: Referral Code\n\n  The referral code component is a box that allows users to see and copy their referral promo code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code 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 referral code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear 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 will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is \"SHARECODE001\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the referral code component\n    And the component is rendered for \"program-a\"\n    When they click to copy their code\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the referral code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the referral code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
+const scenario$A = "@author:sam\n@owner:sam\nFeature: Referral Code\n\n  The referral code component is a box that allows users to see and copy their referral promo code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code 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 referral code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan can be customized\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 will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is \"SHARECODE001\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the referral code component\n    And the component is rendered for \"program-a\"\n    When they click to copy their code\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the referral code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the referral code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
 
 const ReferralCode_stories = {
   title: "Components/Referral Code",
@@ -15111,7 +15111,7 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
   InvoiceTableDemoHook: InvoiceTableDemoHook
 });
 
-const scenario$E = "@author: sam\n@owner: sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: Clicking any of the share mediums sets the code as copied\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        When clicking <shareMedium> button\n        Then the code is marked as copied\n        And the copied notification text is shown\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: User is notified if the currently viewed promo code has been copied already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been copied already\n        Then no notification text is displayed\n        When the code is changed to one that has been copied\n        Then the notification text is displayed\n\n    @minutia\n    Scenario Outline: Share buttons slots use the link from referral codes instead of the default query\n        Given an authenticated user\n        And the program has promo codes configured\n        And a <shareMedium> button is a child of `<sqm-referral-codes>`\n        Then the <shareMedium> button is shown\n        And the link uses <promoCode>\n        Examples:\n            | propName        | shareMedium | promoCode  |\n            | hideSharelink   | DIRECT      | PROMOCODE1 |\n            | hideEmail       | EMAIL       | PROMOCODE1 |\n            | hideFbMessenger | FBMESSENGER | PROMOCODE1 |\n            | hideWhatsApp    | WHATSAPP    | PROMOCODE1 |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n    @minutia\n    Scenario: Loading state is shown when changing code page\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has more than 1 available\n        When the next button is clicked\n        Then a loading state is shown\n\n\n";
+const scenario$E = "@author:sam\n@owner:sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: Clicking any of the share mediums sets the code as copied\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        When clicking <shareMedium> button\n        Then the code is marked as copied\n        And the copied notification text is shown\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario Outline: User is notified if the currently viewed promo code has been copied already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been copied already\n        Then no notification text is displayed\n        When the code is changed to one that has been copied\n        Then the <notificationText> is displayed\n        Examples:\n            | notificationText               |\n            | You've copied this code before |\n            | Previously Copied              |\n            | foo                            |\n\n    @minutia\n    Scenario Outline: Share buttons slots use the link from referral codes instead of the default query\n        Given an authenticated user\n        And the program has promo codes configured\n        And a <shareMedium> button is a child of `<sqm-referral-codes>`\n        Then the <shareMedium> button is shown\n        And the link uses <promoCode>\n        Examples:\n            | propName        | shareMedium | promoCode  |\n            | hideSharelink   | DIRECT      | PROMOCODE1 |\n            | hideEmail       | EMAIL       | PROMOCODE1 |\n            | hideFbMessenger | FBMESSENGER | PROMOCODE1 |\n            | hideWhatsApp    | WHATSAPP    | PROMOCODE1 |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n    @minutia\n    Scenario: Loading state is shown when changing code page\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has more than 1 available\n        When the next button is clicked\n        Then a loading state is shown\n\n\n";
 
 const ReferralCodes_stories = {
   title: "Components/Referral Codes",

package/dist/collection/components/sqm-referral-codes/useReferralCodes.js

@@ -13,7 +13,11 @@ const GET_REFERRAL_CODES = gql `
         referralCodeList(
           limit: $limit
           offset: $offset
-          filter: { fuelTank_eq: true, programId_eq: $programId }
+          filter: {
+            fuelTank_eq: true
+            programId_eq: $programId
+            dateLastUsedInReferral_eq: false
+          }
         ) {
           data {
             code

package/dist/esm/{ShadowViewAddon-8be5dd91.js → ShadowViewAddon-9e4e4f3f.js}

@@ -4,7 +4,7 @@ import { i as intl } from './global-701bd5b0.js';
 import { d as dist, H, Q, I as In, y as yn, $ as $e, B, a as getEnvironmentSDK, L } from './index.module-5eb0926c.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-1fc818b1.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-3424271a.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
 import { u as useChildElements } from './useChildElements-ebcfbc19.js';

package/dist/esm/{copy-text-view-1fc818b1.js → copy-text-view-3424271a.js}

@@ -16,7 +16,11 @@ const GET_REFERRAL_CODES = dist.gql `
         referralCodeList(
           limit: $limit
           offset: $offset
-          filter: { fuelTank_eq: true, programId_eq: $programId }
+          filter: {
+            fuelTank_eq: true
+            programId_eq: $programId
+            dateLastUsedInReferral_eq: false
+          }
         ) {
           data {
             code

package/dist/esm/sqm-big-stat_38.entry.js

@@ -5,7 +5,7 @@ import { i as isDemo, _, d as dist, Q, H, $ as $e, y as yn, B, L, g as gn, f as
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { C as CopyTextView } from './copy-text-view-1fc818b1.js';
+import { C as CopyTextView } from './copy-text-view-3424271a.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { a as useRequestRerender } from './re-render-b31d83d7.js';
@@ -16,7 +16,7 @@ import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-faea9402.js';
 import { i as isEmpty } from './utilities-292b61b9.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, C as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-8be5dd91.js';
+import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, C as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-9e4e4f3f.js';
 import './sqm-portal-container-view-83df005d.js';
 
 const BigStat = class {

package/dist/esm/sqm-pagination_3.entry.js

@@ -3,7 +3,7 @@ import { n as h$1, k as useState } from './stencil-hooks.module-576d7f01.js';
 import { I as In, i as isDemo, d as dist, H, Q, y as yn, $ as $e, B } from './index.module-5eb0926c.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView, u as useReferralCodes } from './copy-text-view-1fc818b1.js';
+import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView, u as useReferralCodes } from './copy-text-view-3424271a.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 

package/dist/esm/sqm-stencilbook.entry.js

@@ -4,7 +4,7 @@ import './global-701bd5b0.js';
 import { f as $n, S as Sn, c as setUserIdentity, d as dist, X as Xe, p as setProgramId } from './index.module-5eb0926c.js';
 import './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { C as CopyTextView } from './copy-text-view-1fc818b1.js';
+import { C as CopyTextView } from './copy-text-view-3424271a.js';
 import './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { G as GenericTableView } from './GenericTableView-706f5b56.js';
@@ -25,7 +25,7 @@ import { P as PortalProfileView } from './sqm-portal-profile-view-847526a2.js';
 import './utilities-292b61b9.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-865655da.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6c60df25.js';
-import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-8be5dd91.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-9e4e4f3f.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-83df005d.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-7d1aa71f.js';
 
@@ -4080,7 +4080,7 @@ const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito S
 
 const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\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=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\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-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards Earned</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        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\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 you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\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>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </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                Post about us on X\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\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 X\"\n              description=\"Earn 50 points when you Follow Us on X!\"\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        <sqm-tabs>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\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-tab>\n        </sqm-tabs>\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-brand>\n";
 
-const promoCodeReferralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\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=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\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-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\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          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\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>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </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-referral-codes slot=\"right\">\n            <sqm-pagination slot=\"pagination\"></sqm-pagination>\n            <sqm-referral-code\n              slot=\"shareCodes\"\n              show-notification-text\n            ></sqm-referral-code>\n            <sqm-portal-container gap=\"small\" slot=\"shareButtons\">\n              <sqm-share-button medium=\"email\"\n                >Share via email</sqm-share-button\n              >\n              <sqm-share-button medium=\"fbmessenger\"\n                >Share on Facebook</sqm-share-button\n              >\n              <sqm-share-button medium=\"whatsapp\"\n                >Share on WhatsApp</sqm-share-button\n              >\n            </sqm-portal-container>\n          </sqm-referral-codes>\n        </sqm-referral-card>\n      </sqm-portal-container>\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\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\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-brand>\n";
+const promoCodeReferralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n    background-color=\"#ffffff\"\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=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\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-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\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          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\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>\n              They’ll get a $50 credit towards a new account and you’ll get:\n            </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-referral-codes slot=\"right\">\n            <sqm-pagination slot=\"pagination\"></sqm-pagination>\n            <sqm-referral-code\n              slot=\"shareCodes\"\n              show-notification-text=\"true\"\n            ></sqm-referral-code>\n            <sqm-portal-container gap=\"small\" slot=\"shareButtons\">\n              <sqm-share-button medium=\"email\"\n                >Share via email</sqm-share-button\n              >\n              <sqm-share-button medium=\"fbmessenger\"\n                >Share on Facebook</sqm-share-button\n              >\n              <sqm-share-button medium=\"whatsapp\"\n                >Share on WhatsApp</sqm-share-button\n              >\n            </sqm-portal-container>\n          </sqm-referral-codes>\n        </sqm-referral-card>\n      </sqm-portal-container>\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\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\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-brand>\n";
 
 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    background-color=\"#ffffff\"\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 X\"\n              description=\"Earn 50 points when you Follow Us on X!\"\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";
 
@@ -13864,7 +13864,7 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
   Error: Error$7
 });
 
-const scenario$A = "@author:sam\n@owner:sam\nFeature: Referral Code\n\n  The referral code component is a box that allows users to see and copy their referral promo code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code 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 referral code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear 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 will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is \"SHARECODE001\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the referral code component\n    And the component is rendered for \"program-a\"\n    When they click to copy their code\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the referral code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the referral code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
+const scenario$A = "@author:sam\n@owner:sam\nFeature: Referral Code\n\n  The referral code component is a box that allows users to see and copy their referral promo code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code 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 referral code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan can be customized\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 will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is \"SHARECODE001\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the referral code component\n    And the component is rendered for \"program-a\"\n    When they click to copy their code\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the referral code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the referral code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
 
 const ReferralCode_stories = {
   title: "Components/Referral Code",
@@ -15107,7 +15107,7 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
   InvoiceTableDemoHook: InvoiceTableDemoHook
 });
 
-const scenario$E = "@author: sam\n@owner: sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: Clicking any of the share mediums sets the code as copied\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        When clicking <shareMedium> button\n        Then the code is marked as copied\n        And the copied notification text is shown\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: User is notified if the currently viewed promo code has been copied already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been copied already\n        Then no notification text is displayed\n        When the code is changed to one that has been copied\n        Then the notification text is displayed\n\n    @minutia\n    Scenario Outline: Share buttons slots use the link from referral codes instead of the default query\n        Given an authenticated user\n        And the program has promo codes configured\n        And a <shareMedium> button is a child of `<sqm-referral-codes>`\n        Then the <shareMedium> button is shown\n        And the link uses <promoCode>\n        Examples:\n            | propName        | shareMedium | promoCode  |\n            | hideSharelink   | DIRECT      | PROMOCODE1 |\n            | hideEmail       | EMAIL       | PROMOCODE1 |\n            | hideFbMessenger | FBMESSENGER | PROMOCODE1 |\n            | hideWhatsApp    | WHATSAPP    | PROMOCODE1 |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n    @minutia\n    Scenario: Loading state is shown when changing code page\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has more than 1 available\n        When the next button is clicked\n        Then a loading state is shown\n\n\n";
+const scenario$E = "@author:sam\n@owner:sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: Clicking any of the share mediums sets the code as copied\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        When clicking <shareMedium> button\n        Then the code is marked as copied\n        And the copied notification text is shown\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario Outline: User is notified if the currently viewed promo code has been copied already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been copied already\n        Then no notification text is displayed\n        When the code is changed to one that has been copied\n        Then the <notificationText> is displayed\n        Examples:\n            | notificationText               |\n            | You've copied this code before |\n            | Previously Copied              |\n            | foo                            |\n\n    @minutia\n    Scenario Outline: Share buttons slots use the link from referral codes instead of the default query\n        Given an authenticated user\n        And the program has promo codes configured\n        And a <shareMedium> button is a child of `<sqm-referral-codes>`\n        Then the <shareMedium> button is shown\n        And the link uses <promoCode>\n        Examples:\n            | propName        | shareMedium | promoCode  |\n            | hideSharelink   | DIRECT      | PROMOCODE1 |\n            | hideEmail       | EMAIL       | PROMOCODE1 |\n            | hideFbMessenger | FBMESSENGER | PROMOCODE1 |\n            | hideWhatsApp    | WHATSAPP    | PROMOCODE1 |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n    @minutia\n    Scenario: Loading state is shown when changing code page\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has more than 1 available\n        When the next button is clicked\n        Then a loading state is shown\n\n\n";
 
 const ReferralCodes_stories = {
   title: "Components/Referral Codes",