@saasquatch/mint-components 1.16.0-8 → 2.0.0-0

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

@@ -1,52 +1,52 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  Wrapper: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-large)",
-  },
-  HeaderContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  ShareCodeContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  ShareButtonContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  TitleText: {
-    color: "var(--sl-color-neutral-700)",
-    fontSize: "var(--sl-font-size-large)",
-    margin: "0",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function ReferralCodesView(props) {
-  const { slots, titleText, states } = props;
+  const { slots, titleText, states, textColor = "var(--sqm-text-subdued)", } = props;
+  const style = {
+    Wrapper: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-large)",
+      color: textColor,
+    },
+    HeaderContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+    },
+    ShareCodeContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    ShareButtonContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    TitleText: {
+      fontSize: "var(--sl-font-size-large)",
+      margin: "0",
+    },
+  };
+  const vanillaStyle = `
+    :host {
+      display: block;
+    }
+    :host([hidden]): {
+      display: none;
+    }
+  `;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const getSlotContent = (states) => {
     if (states.noCodes) {
       return slots.empty;

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

@@ -7,6 +7,7 @@ import { ReferralCodesView, } from "./sqm-referral-codes-view";
 import { useReferralCodes } from "./useReferralCodes";
 /**
  * @uiName Promo Codes
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Promo Codes Content"}]
  * @exampleGroup Sharing
  * @example Promo Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
@@ -76,6 +77,32 @@ export class ReferralCodes {
       "reflect": false,
       "defaultValue": "\"Start sharing\""
     },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
     "emptyStateHeaderText": {
       "type": "string",
       "mutable": false,
@@ -167,7 +194,7 @@ export class ReferralCodes {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; textColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -211,6 +238,7 @@ function LoadingRow() {
 function useDemoReferralCodes(props) {
   return deepmerge({
     titleText: props.titleText,
+    textColor: props.textColor,
     states: {
       noCodes: false,
       loading: false,

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { AvailableNoExpiry, PendingNoUnpend, Redeemed, Denied, PendingReview, PayoutSent, PayoutFailed, PendingNewTaxForm, PendingPartnerCreation, PendingTaxReview, PendingTaxSubmission, PayoutCancelled, } from "./ReferralTableRewardsCell.stories";
-import { DateCell, PendingReview as PendingReviewStatus, Pending as PendingStatus, Denied as DeniedStatus, Converted as ConvertedStatus, InProgress, } from "./ReferralTableCell.stories";
+import { Converted as ConvertedStatus, DateCell, Denied as DeniedStatus, InProgress, PendingReview as PendingReviewStatus, Pending as PendingStatus, } from "./ReferralTableCell.stories";
+import { AvailableNoExpiry, Denied, PayoutCancelled, PayoutFailed, PayoutSent, PendingNewTaxForm, PendingNoUnpend, PendingPartnerCreation, PendingReview, PendingTaxReview, PendingTaxSubmission, Redeemed, } from "./ReferralTableRewardsCell.stories";
 import scenario from "./referral-table.feature";
 export default {
   title: "Components/Referral Table",

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -27,9 +27,7 @@ export class ReferralTableRewardsCell {
         "flex-wrap": "wrap",
       },
       Details: {
-        "padding-bottom": "var(--sl-spacing-small)",
         "max-width": "500px",
-        // "padding-right": "var(--sl-spacing-x-small)",
         "&::part(header)": {
           padding: "var(--sl-spacing-x-small)",
           cursor: `${this.hideDetails ? "default" : "pointer"}`,
@@ -38,6 +36,7 @@ export class ReferralTableRewardsCell {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
         },
         "&::part(base)": {
+          border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
           opacity: "1",
         },
         "&::part(summary-icon)": {
@@ -45,7 +44,6 @@ export class ReferralTableRewardsCell {
         },
         "&::part(summary-icon[open])": {
           transform: "rotate(-90deg)",
-          background: "red",
         },
       },
       BadgeContainer: {
@@ -56,23 +54,64 @@ export class ReferralTableRewardsCell {
       BoldText: {
         "font-weight": "var(--sl-font-weight-semibold)",
       },
-      StatusBadge: {
+      RedeemBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
+          background: "var(--sqm-informative-color-icon)",
+          color: "var(--sl-color-white)",
         },
       },
-      RedeemBadge: {
+      DangerBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
-          background: "var(--sl-color-blue-600)",
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-danger-color-icon)",
+          color: "var(--sl-color-white)",
+        },
+      },
+      WarningBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-warning-color-icon)",
+          color: "var(--sl-color-white)",
+        },
+      },
+      SuccessBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-success-color-icon)",
+          color: "var(--sl-color-white)",
         },
       },
     };
     const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
+    const getBadgeCSSClass = (badgeType) => {
+      switch (badgeType) {
+        case "primary":
+          return sheet.classes.RedeemBadge;
+        case "danger":
+          return sheet.classes.DangerBadge;
+        case "success":
+          return sheet.classes.SuccessBadge;
+        case "warning":
+        case "info":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.WarningBadge;
+      }
+    };
     const getState = (reward, taxConnection) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       const possibleStates = [
@@ -181,20 +220,14 @@ export class ReferralTableRewardsCell {
           h(TextSpanView, { type: "p" },
             h("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)),
           h("div", { class: sheet.classes.BadgeContainer },
-            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
-                ? sheet.classes.RedeemBadge
-                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
+            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, intl.formatMessage({
               id: "pendingForText",
               defaultMessage: this.pendingForText,
             }, {
               status: badgeText,
               date: getTimeDiff(reward.dateScheduledFor),
-            }))) : (h("sl-badge", { class: slBadgeType === "primary"
-                ? sheet.classes.RedeemBadge
-                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
-            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: slBadgeType === "primary"
-                ? sheet.classes.RedeemBadge
-                : sheet.classes.StatusBadge, type: "info", pill: true },
+            }))) : (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, badgeText)),
+            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: "info", pill: true },
               this.expiringText,
               ` ${getTimeDiff(reward.dateExpires)}`)))),
         h("div", null,
@@ -281,7 +314,8 @@ export class ReferralTableRewardsCell {
         "resolved": "Reward[]",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },
@@ -300,7 +334,8 @@ export class ReferralTableRewardsCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-status-cell.js

@@ -1,23 +1,62 @@
 import { Component, h, Prop } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
 const style = {
-  Badge: {
+  SubText: {
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sqm-text-subdued)",
+    margin: "0",
+  },
+  RedeemBadge: {
     "&::part(base)": {
       fontSize: "var(--sl-font-size-small)",
       padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
       whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
-  SubText: {
-    fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
-    margin: "0",
+  DangerBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sl-color-white)",
+    },
   },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export class ReferralTableStatusCell {
   render() {
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
     const getBadgeType = (fraudStatus) => {
       if (fraudStatus === "PENDING")
         return "warning";
@@ -27,9 +66,24 @@ export class ReferralTableStatusCell {
         return "success";
       return "warning";
     };
+    const getBadgeCSSClass = (badgeType) => {
+      switch (badgeType) {
+        case "primary":
+          return sheet.classes.RedeemBadge;
+        case "danger":
+          return sheet.classes.DangerBadge;
+        case "success":
+          return sheet.classes.SuccessBadge;
+        case "warning":
+        case "info":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.WarningBadge;
+      }
+    };
     return (h("div", null,
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: sheet.classes.Badge }, this.statusText),
+      h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: getBadgeCSSClass(getBadgeType(this.fraudStatus)) }, this.statusText),
       this.statusSubText ? (h("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
   }
   static get is() { return "sqm-referral-table-status-cell"; }
@@ -60,7 +114,8 @@ export class ReferralTableStatusCell {
         "resolved": "\"APPROVED\" | \"DENIED\" | \"PENDING\"",
         "references": {
           "FraudStatus": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-column.js

@@ -59,7 +59,8 @@ export class ReferralTableGenericColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -128,7 +128,8 @@ export class ReferralTableDateColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -166,7 +167,8 @@ export class ReferralTableDateColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js

@@ -306,10 +306,12 @@ export class ReferralTableRewardsColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           },
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -347,7 +349,8 @@ export class ReferralTableRewardsColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-status-column.js

@@ -243,10 +243,12 @@ export class ReferralTableStatusColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           },
           "FraudStatus": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -284,7 +286,8 @@ export class ReferralTableStatusColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-user-column.js

@@ -153,7 +153,8 @@ export class ReferralTableUserColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -191,7 +192,8 @@ export class ReferralTableUserColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -10,6 +10,8 @@ import mockReferralData from "./mockReferralData";
 import { tryMethod, useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward was scheduled for payment based on your settings, barring any account holds.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
@@ -270,7 +272,8 @@ export class ReferralTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../saasquatch"
           }
         }
       },

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -6,9 +6,10 @@ import { useInstantAccessRegistration } from "../sqm-instant-access-registration
 import { EmailRegistrationView, } from "../views/email-registration-view";
 /**
  * @uiName Instant Access Friend Registration
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
- * @example Instant Access Friend Registration - <sqm-referred-registration></sqm-referred-registration>
+ * @example Friend Registration - <sqm-referred-registration></sqm-referred-registration>
  * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}]
  */
 export class ReferredRegistration {
@@ -109,13 +110,6 @@ export class ReferredRegistration {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiGroup Card style
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff";
     /**
      * @undocumented
      * @uiType boolean
@@ -564,8 +558,7 @@ export class ReferredRegistration {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "reflect": false
     },
     "includeCookies": {
       "type": "boolean",

package/dist/collection/components/sqm-reward-exchange-list/RewardExchangeList.stories.js

@@ -8,24 +8,24 @@ export default {
     scenario,
   },
 };
-const StoryBase = (props) => () => {
+const StoryBase = (props) => {
   return h(RewardExchangeView, Object.assign({}, props));
 };
-export const ChooseReward = StoryBase(Data.rewardExchange);
-export const CustomErrorMessage = StoryBase(Data.rewardExchangeCustomErrorMsg);
-export const LongTextRewardExhange = StoryBase(Data.rewardExchangeLongText);
-export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected);
-export const ChooseAmount = StoryBase(Data.chooseAmountFixed);
-export const ChooseAmountNoDescription = StoryBase(Data.chooseAmountFixedNoDescription);
-export const ChooseAmountVariableAndStepped = StoryBase(Data.chooseAmountVariable);
-export const ChooseAmountVariableAndSteppedNoDescription = StoryBase(Data.chooseAmountVariableNoDescription);
-export const chooseAmountVariableAndSteppedDisabled = StoryBase(Data.chooseAmountVariableDisabled);
-export const chooseAmountVariableAndSteppedUnavailable = StoryBase(Data.chooseAmountVariableUnavailable);
-export const Confirm = StoryBase(Data.confirmFixed);
-export const ConfirmVariableAndStepped = StoryBase(Data.confirmVariable);
-export const RedemptionError = StoryBase(Data.redemptionError);
-export const QueryError = StoryBase(Data.queryError);
-export const SuccessPromo = StoryBase(Data.success);
-export const SuccessVariableAndStepped = StoryBase(Data.successVariable);
-export const Loading = StoryBase(Data.loading);
-export const Empty = StoryBase(Data.empty);
+export const ChooseReward = () => StoryBase(Data.rewardExchange);
+export const CustomErrorMessage = () => StoryBase(Data.rewardExchangeCustomErrorMsg);
+export const LongTextRewardExhange = () => StoryBase(Data.rewardExchangeLongText);
+export const ChooseRewardSelected = () => StoryBase(Data.rewardExchangeSelected);
+export const ChooseAmount = () => StoryBase(Data.chooseAmountFixed);
+export const ChooseAmountNoDescription = () => StoryBase(Data.chooseAmountFixedNoDescription);
+export const ChooseAmountVariableAndStepped = () => StoryBase(Data.chooseAmountVariable);
+export const ChooseAmountVariableAndSteppedNoDescription = () => StoryBase(Data.chooseAmountVariableNoDescription);
+export const chooseAmountVariableAndSteppedDisabled = () => StoryBase(Data.chooseAmountVariableDisabled);
+export const chooseAmountVariableAndSteppedUnavailable = () => StoryBase(Data.chooseAmountVariableUnavailable);
+export const Confirm = () => StoryBase(Data.confirmFixed);
+export const ConfirmVariableAndStepped = () => StoryBase(Data.confirmVariable);
+export const RedemptionError = () => StoryBase(Data.redemptionError);
+export const QueryError = () => StoryBase(Data.queryError);
+export const SuccessPromo = () => StoryBase(Data.success);
+export const SuccessVariableAndStepped = () => StoryBase(Data.successVariable);
+export const Loading = () => StoryBase(Data.loading);
+export const Empty = () => StoryBase(Data.empty);