@saasquatch/mint-components 2.0.0-4 → 2.0.0-5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1568,13 +1568,6 @@ const Hero = class {
1568
1568
  * @uiName Minimum height (in px)
1569
1569
  */
1570
1570
  this.minHeight = 200;
1571
- /**
1572
- * Content background color or image (for use in the left column)
1573
- *
1574
- * @uiName Content background
1575
- * @uiWidget Background
1576
- */
1577
- this.background = "#f9fafb";
1578
1571
  /**
1579
1572
  * @uiName Padding size
1580
1573
  * @uiEnum ["none", "small", "medium","large"]
@@ -4949,7 +4949,7 @@ const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito S
4949
4949
 
4950
4950
  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";
4951
4951
 
4952
- 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=\"inherit\"\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";
4952
+ 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";
4953
4953
 
4954
4954
  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";
4955
4955
 
@@ -24,13 +24,6 @@ export class Hero {
24
24
  * @uiName Minimum height (in px)
25
25
  */
26
26
  this.minHeight = 200;
27
- /**
28
- * Content background color or image (for use in the left column)
29
- *
30
- * @uiName Content background
31
- * @uiWidget Background
32
- */
33
- this.background = "#f9fafb";
34
27
  /**
35
28
  * @uiName Padding size
36
29
  * @uiEnum ["none", "small", "medium","large"]
@@ -138,8 +131,7 @@ export class Hero {
138
131
  "text": "Content background color or image (for use in the left column)"
139
132
  },
140
133
  "attribute": "background",
141
- "reflect": false,
142
- "defaultValue": "\"#f9fafb\""
134
+ "reflect": false
143
135
  },
144
136
  "paddingSize": {
145
137
  "type": "string",
@@ -1564,13 +1564,6 @@ const Hero = class {
1564
1564
  * @uiName Minimum height (in px)
1565
1565
  */
1566
1566
  this.minHeight = 200;
1567
- /**
1568
- * Content background color or image (for use in the left column)
1569
- *
1570
- * @uiName Content background
1571
- * @uiWidget Background
1572
- */
1573
- this.background = "#f9fafb";
1574
1567
  /**
1575
1568
  * @uiName Padding size
1576
1569
  * @uiEnum ["none", "small", "medium","large"]
@@ -4945,7 +4945,7 @@ const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito S
4945
4945
 
4946
4946
  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";
4947
4947
 
4948
- 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=\"inherit\"\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";
4948
+ 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";
4949
4949
 
4950
4950
  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";
4951
4951