@saasquatch/mint-components 1.5.0-8 → 1.5.0-83

package/CHANGELOG.md

@@ -7,41 +7,168 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.5.0] - 2022-01-10
+
+### Added
+
+- Added Components:
+
+  - \<sqm-brand>
+    - Takes in a brand colour, creates a colour palette from it and sets --sl-primary colour's accordingly to child components
+    - Takes in a brand font and applies it to child components
+  - \<sqm-card-feed>
+    - Applies a masonry style grid to child components (created for sqm-task-card)
+    - Child width and gap between children is configurable
+  - \<sqm-program-explainer>
+    - Designed to wrap \<sqm-program-explainer-step>
+    - Adds header and footer sections
+    - Text (titles and descriptions) and colours (background and text) are configurable
+  - \<sqm-program-explainer-step>
+    - Card to explain part of a customers program
+    - Icon, background colour, text colour, title and description text are configurable
+  - \<sqm-reward-exchange-list>
+    - Allows users to exchange rewards configured by Tenant level reward exchange rules
+    - Includes props for complete text editability
+    - Has a 4 step process, select exchange rule, select reward, confirm exchange, exchanged
+  - \<sqm-rewards-table>
+    - Displays a table of users rewards with help from column and cell components
+    - Program Id prop specifies from which programs to show rewards for, defaults to program context but shows rewards globally if no program is provided through prop or context
+    - Column titles are shown by default but can be hidden via prop
+    - 3 rewards are shown per page by default but is customizable via prop
+    - Mobile responsive functionality
+    - Includes props for mobile and table breakpoints, which trigger mobile friendly views
+    - Includes prop to hide column titles in mobile view
+    - \<sqm-rewards-table-date-column>
+      - Displays reward dates in a column using the \<sqm-rewards-table-date-cell>
+      - Includes prop to configure what date to show (date given, expires, cancelled, redeemed, scheduled for)
+      - Includes prop to configure column title text
+    - \<sqm-rewards-table-date-cell>
+      - Displays reward date
+    - \<sqm-rewards-table-reward-column>
+      - Displays rewards in a column using the \<sqm-rewards-table-rewards-cell>
+      - Includes prop to configure column title and other text
+    - \<sqm-rewards-table-rewards-cell>
+      - Displays the amount and type of a reward
+      - Displays how much of the reward is available/redeemed
+    - \<sqm-rewards-table-source-column>
+      - Displays reward sources in a column using the \<sqm-rewards-table-source-cell>
+      - Includes props to configure text elements used in the source cell
+      - Includes prop to configure column title
+    - \<sqm-rewards-table-source-cell>
+      - Displays the source of a reward (Program/Automated, Manual, Referral, Reward Exchange)
+    - \<sqm-rewards-status-column>
+      - Displays reward statuses in a column using the \<sqm-rewards-table-status-cell>
+      - Includes props to configure reward status text
+      - Includes prop to configure column title
+    - \<sqm-rewards-table-status-cell>
+      - Displays the status of a reward along with status information (expiry or pending date, etc)
+  - \<sqm-task-card>
+    - Displays Tasks which correspond to program goals for users to complete
+    - Users progress comes from custom field or program goal, configured by prop
+    - Includes prop to disable cards outside of an activities duration, default is no duration (always available)
+    - Includes props for text configuration like card title, description, CTA button text
+    - Includes CTA button to redirect users to where they need to complete the task (new tab or existing tab), route is configurable via prop
+    - Progress bar is hidden or shown by prop, hidden by default
+    - Includes text showing how many times a user has completed a task if repeatable, text is configurable
+
+### Changed
+
+- Changed Components:
+  - \<sqm-big-stat>
+    - Added hook functionality to query customfields
+    - Hooks now returns value (number) and statValue (string)
+    - Added loading state into the hook
+  - \<sqm-leaderboard> CHANGES IN PROGRESS - UPDATE ME
+  - \<sqm-portal-container>
+    - Added max width prop, defaults to 100%
+  - \<sqm-referral-table>
+    - Added empty state text prop
+    - Added mobile responsive functionality
+    - Added props for mobile and table breakpoints, which trigger mobile friendly views
+    - Added prop to hide column titles in mobile view
+  - \<sqm-share-button>
+    - Added prop to override button colour
+    - Added prop to override button text colour
+    - Added prop to override border radius
+    - Added default button colours for all share mediums --TO DO--
+  - \<sqm-share-code>
+    - Sends a "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic with "DIRECT" share medium event on copy code click
+  - \<sqm-share-link>
+    - Sends a "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic with "DIRECT" share medium event on copy link click
+
+## [1.4.2] - 2022-01-14
+
+### Changed
+
+- Added ability to include slotted content on \<sqm-portal-register> using `slot="terms"`
+  - Slotted content is displayed above the registration button
+
+## [1.4.1] - 2021-01-17
+
+### Fixed
+
+- Fixed broken WhatsApp icon by updating the version of bootstrap icons from 1.2.0 to 1.7.2
+
+## [1.4.0] - 2021-12-09
+
+### Changed
+
+- Updated version of component-boilerplate to prevent rare case of user context being deleted during register
+- Updated version of component-boilerplate to support new registration, password reset, and verify requests
+- Changed components:
+  - \<sqm-portal-email-verification>
+    - Added prop to customize what page a user is redirected to from their verify email, defaults to /verifyEmail
+  - \<sqm-portal-forgot-password>
+    - Added prop to customize what page a user is redirected to from their password reset email, defaults to /resetPassword
+    - Added prop to customize the login button redirection path, defaults to /login
+  - \<sqm-portal-login>
+    - Added prop to customize the register button redirection path, defaults to /register
+    - Added prop to customize the forgot password text link redirection path, defaults to /forgotPassword
+  - \<sqm-portal-register>
+    - Added prop to customize the login button redirection path, defaults to /login
+    - Added prop to customize what page a user is redirect to from their initial verify email, defaults to /verifyEmail
+  - \<sqm-portal-reset-password>
+    - Added prop to customize what path users are redirected to when oobcode validation fails, defaults to /
+  - \<sqm-portal-verify-email>
+    - Added prop to customize what path users are redirected to when oobcode validation fails, defaults to /
+  - \<sqm-big-stat>
+    - Added program ID prop to optionally be used instead of the default program context
+
 ## [1.3.0] - 2021-11-08
 
 ### Changed
 
 - Changed components:
   - \<sqm-share-button>
-      - Exported "icon" part so it can be customizable in the future
-  - \<sqm-portal-change-password> 
-      - Changed sl-button in modal to be of type "primary" instead of "default"
-      - Swapped location of cancel and change password buttons
-      - Added padding between fields
-      - Changed hardcoded text into customizable props
-      - Changed password field input default label to "New Password"
-  - \<sqm-portal-profile> 
-      - Changed hardcoded text into customizable props
-      - Added padding text below header
-  - \<sqm-portal-reset-password> 
-      - Changed hardcoded text into customizable props
-      - Changed password field input default label to "New Password"
-  - \<sqm-portal-register> 
-      - Changed hardcoded text into customizable props
-      - Changed formData slot to add custom inputs to the top of form instead of the bottom
-      - Fixed bug causing the correct error validation message from being shown 
+    - Exported "icon" part so it can be customizable in the future
+  - \<sqm-portal-change-password>
+    - Changed sl-button in modal to be of type "primary" instead of "default"
+    - Swapped location of cancel and change password buttons
+    - Added padding between fields
+    - Changed hardcoded text into customizable props
+    - Changed password field input default label to "New Password"
+  - \<sqm-portal-profile>
+    - Changed hardcoded text into customizable props
+    - Added padding text below header
+  - \<sqm-portal-reset-password>
+    - Changed hardcoded text into customizable props
+    - Changed password field input default label to "New Password"
+  - \<sqm-portal-register>
+    - Changed hardcoded text into customizable props
+    - Changed formData slot to add custom inputs to the top of form instead of the bottom
+    - Fixed bug causing the correct error validation message from being shown
   - \<sqm-portal-email-verification>
-      - Changed hardcoded text into customizable props
+    - Changed hardcoded text into customizable props
   - \<sqm-portal-verify-email>
-      - Fixed bug causing users to get stuck if no userIdent existed when verifying their email
+    - Fixed bug causing users to get stuck if no userIdent existed when verifying their email
 
 ### Added
 
 - Default affiliate portal templates now provided in [Stencilbook](https://mint-components.stencilbook.saasquat.ch)
-    - Default Portal
-    - Multi Program Portal
-    - Lead Submit Portal
-    - Portal Dashboard (program widget)
+  - Default Portal
+  - Multi Program Portal
+  - Lead Submit Portal
+  - Portal Dashboard (program widget)
 - New components added for default affiliate portals
   - \<sqm-portal-footer> Footer for providing FAQ, T&S, and support email
   - \<sqm-hero> One or two column landing page with an optional background
@@ -159,7 +286,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - \<sqm-popup-container>
   - \<sqm-stencilbook>
 
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.3.0...HEAD
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.4.0...HEAD
+[1.5.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.0
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.4.2...HEAD
+[1.4.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.2
+[1.4.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.1
+[1.4.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.0
 [1.3.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.3.0
 [1.2.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.2.0
 [1.1.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.1.1

package/dist/cjs/GenericTableView-39e0998e.js

@@ -0,0 +1,113 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const mixins = require('./mixins-7b7c59fe.js');
+const JSS = require('./JSS-c65a40f1.js');
+
+function GenericTableView(props) {
+  const { states, data, callbacks, elements } = props;
+  const { columns, rows } = elements;
+  const { show } = states;
+  console.log("table", props);
+  const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
+  const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
+  const style = {
+    Table: {
+      //   borderCollapse: "collapse",
+      tableLayout: "fixed",
+      width: "100%",
+      "& th": {
+        paddingBottom: "var(--sl-spacing-small)",
+        textAlign: "left",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        overflowWrap: "anywhere",
+      },
+      "& tr": {},
+      "& td": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+      [mobile]: {
+        "& thead": {
+          display: "none",
+        },
+        "& tr": {
+          display: "block",
+          background: "#FFFFFF",
+          border: "1px solid var(--sl-color-neutral-200)",
+          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "var(--sl-border-radius-medium)",
+          padding: "var(--sl-spacing-medium)",
+          fontSize: "var(--sl-font-size-small)",
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "& td": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          borderTop: "none",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-medium)",
+          "&:first-child": {
+            textAlign: "left",
+          },
+          "&:before": {
+            content: "attr(data-label)",
+            whiteSpace: "nowrap",
+          },
+          "&:last-child": {
+            marginBottom: "0",
+          },
+          "&.hidden:before": {
+            content: "none",
+          },
+        },
+      },
+      [tablet]: {
+        "& tbody": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          gap: "25px",
+        },
+      },
+    },
+    ButtonContainer: {
+      display: "flex",
+      "justify-content": "flex-end",
+      "margin-top": "var(--sl-spacing-small)",
+      ...mixins.gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+    },
+    ButtonDisabled: {
+      "&::part(base)": {
+        opacity: "0.25",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("table", { class: sheet.classes.Table },
+      data.textOverrides.showLabels && (index.h("thead", null,
+        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (index.h("th", null, column)))))),
+      index.h("tbody", null,
+        show === "loading" && elements.loadingElement,
+        show === "empty" && elements.emptyElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => {
+          console.log("ROW", row);
+          return (index.h("tr", { style: {
+              borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+            }, part: "table-row" }, row.map((cell, j) => {
+            console.log("CELL", cell);
+            return (index.h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":" }, cell));
+          })));
+        })))),
+    index.h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      index.h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
+      index.h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
+}
+
+exports.GenericTableView = GenericTableView;

package/dist/cjs/{jss-preset-default.esm-6304d24f.js → JSS-c65a40f1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const _extends = require('./extends-0302d27d.js');
+const _extends = require('./extends-08099afd.js');
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -4269,5 +4269,7 @@ var create$1 = function create(options) {
   };
 };
 
-exports.create = create$1;
-exports.jss = jss;
+const jss$1 = create(create$1());
+const createStyleSheet = (...args) => jss$1.createStyleSheet(...args);
+
+exports.createStyleSheet = createStyleSheet;

package/dist/cjs/ReferralTableRewardsCell.stories-cd7b9c93.js

@@ -0,0 +1,261 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const luxon = require('./luxon-59ca7d19.js');
+
+const column = "@author:noah\r\n@owner:noah\r\nFeature: Referral Table User Column\r\n\r\n    Shows the same custom content for each referral\r\n\r\n    Background:\r\n        Given the column in included in the referral table\r\n\r\n    @motivating\r\n    Scenario: The title of the date column is configurable\r\n        Given the \"column-title\" prop is set to \"My column title\"\r\n        Then the date column is shown with \"My column title\"\r\n\r\n    @motivating\r\n    Scenario: The same custom content is shown for each referral\r\n        Given there is at least one referral\r\n        Then for each referral custom content is shown\r\n        And the custom content is provided as slot content";
+
+const date = "@author:noah\r\n@owner:noah\r\nFeature: Referral Table Date Column\r\n\r\n    Shows the date of each referral\r\n\r\n    Background:\r\n        Given the date column is included in the referral table\r\n\r\n    @motivating\r\n    Scenario Outline: The title of the date column is configurable\r\n        Given the \"column-title\" prop is set to <value>\r\n        Then the date column is shown with <columTitle>\r\n        Examples:\r\n            | value           | columnTitle     |\r\n            |                 | Date Converted  |\r\n            | My column title | My column title |\r\n\r\n    @motivating\r\n    Scenario Outline: A configurable date associated with the referral is shown for each referral\r\n        Given the \"date-shown\" prop is set to <dateType>\r\n        And referrals exist\r\n        Then for each referral the <referralDate> is shown in the table\r\n        And the date is localized to the users locale\r\n        Examples:\r\n            | dateType            | referralDate          |\r\n            | dateReferralStarted | date referral started |\r\n            | dateReferralPaid    | date referral paid    |\r\n            | dateReferralEnded   | date referral ended   |\r\n            | dateModerated       | date moderated        |\r\n            | dateUserModified    | date user modified    |\r\n            | dateConverted       | date converted        |\r\n            | dateModified        | date modified         |\r\n            |                     | date converted        |";
+
+const reward = "@author:noah\r\n@owner:noah\r\nFeature: Referral Table Reward Column\r\n\r\n    Shows the reward associated with each referral\r\n\r\n    Background:\r\n        Given the status column is included in the referral table\r\n        And at least one referral exists\r\n\r\n    @motivating\r\n    Scenario Outline: The referral reward and it's status are shown for each referral\r\n        Then for each referral reward there exists a reward cell\r\n        And the reward type and value is displayed in the cell\r\n        And the status of each reward is displayed as a pill in the cell\r\n        And rewards of <status> have a <pillColour> pill with the text <statusText>\r\n        Examples:\r\n            | status    | pillColour | statusText |\r\n            | Available | green      | Available  |\r\n            | Pending   | orange     | Pending    |\r\n            | Cancelled | red        | Cancelled  |\r\n            | Expired   | red        | Expired    |\r\n            | Redeemed  | blue       | Redeemed   |\r\n\r\n    @motivating\r\n    Scenario: The pending period of a referral reward is shown if it exists\r\n        Given a reward that is pending\r\n        And the reward has a set pending period\r\n        Then the status pill of the reward will instead have the text \"Pending for <relativeTime>\"\r\n        And all dates are localized to the users locale\r\n        Examples:\r\n            | relativeTime |\r\n            | 2 days       |\r\n            | 1 week       |\r\n            | 3 months     |\r\n            | 2 years      |\r\n\r\n    @motivating\r\n    Scenario: The expiry date of a reward is shown if it exists\r\n        Given a reward that is available\r\n        And the reward has a set expiry date\r\n        Then an additional grey pill will appear next to the status pill with the text \"Expiring in <relativeTime>\"\r\n        And all dates are localized to the users locale\r\n        Examples:\r\n            | relativeTime |\r\n            | 2 days       |\r\n            | 1 week       |\r\n            | 3 months     |\r\n            | 2 years      |\r\n\r\n    @motivating\r\n    Scenario: Each reward can be expanded to show additional details about the reward\r\n        When a reward cell is clicked\r\n        Then it expands to show the following additional information (if it's available):\r\n            | Date the reward was received     |\r\n            | Date the reward was cancelled    |\r\n            | Date the reward expires          |\r\n            | Date the reward is pending until |\r\n            | Coupon code                      |\r\n        And all dates are localized to a users locale";
+
+const status = "@author:noah\r\n@owner:noah\r\nFeature: Referral Table Status Column\r\n\r\n    Shows the status of each referral\r\n\r\n    Background:\r\n        Given the status column is included in the referral table\r\n\r\n    @motivating\r\n    Scenario: The title of the date column is configurable\r\n        Given the \"column-title\" prop is set to \"My column title\"\r\n        Then the date column is shown with \"My column title\"\r\n\r\n    @motivating\r\n    Scenario Outline: The status column displays the status of each referral\r\n        Given referrals exist\r\n        Then the status of each referral is displayed\r\n        And the status <status> is displayed as text from <statusTextProp> in a <pillColour> pill\r\n        Examples:\r\n            | status      | statusTextProp       | pillColour |\r\n            | IN PROGRESS | inProgressStatusText | Orange     |\r\n            | Converted   | convertedStatusText  | Green      |\r\n";
+
+const user = "@author:noah\r\n@owner:noah\r\nFeature: Referral Table User Column\r\n\r\n    Shows the user of each referral\r\n\r\n    Background:\r\n        Given the user column is included in the referral table\r\n\r\n    @motivating\r\n    Scenario: The title of the date column is configurable\r\n        Given the \"column-title\" prop is set to \"My column title\"\r\n        Then the date column is shown with \"My column title\"\r\n\r\n    @motivating\r\n    Scenario: The first and last name of the other user in the referral is displayed for each referral\r\n        Given at least one referral exists\r\n        Then for each referral where the other user's name is available their first and last name is displayed\r\n\r\n    @motivating\r\n    Scenario: Deleted users are displayed with a fallback name\r\n        Given a referral exists where the other user was deleted\r\n        Then in place of the name the text from the prop \"deleted-user\" is used\r\n\r\n    @motivating\r\n    Scenario: Anonymous users are displayed with a fallback name\r\n        Given a referral exists where the other user was anonymous\r\n        Then in place of the name the text from the prop \"anonymous-user\" is used";
+
+const scenario = column + date + reward + status + user;
+const ReferralTableRewardsCell_stories = {
+  title: "Components/Referral Table Rewards Cell",
+  parameters: {
+    scenario,
+  },
+};
+const baseReward = {
+  id: "123",
+  type: "CREDIT",
+  value: 19,
+  unit: "POINT",
+  name: "test",
+  dateGiven: 1627427794891,
+  dateScheduledFor: getDays(),
+  dateExpires: getMonths(),
+  dateCancelled: 134400,
+  dateRedeemed: 0,
+  fuelTankCode: "ABC",
+  fuelTankType: "Code",
+  currency: "null",
+  prettyValue: "19 Points",
+  statuses: ["AVAILABLE"],
+  globalRewardKey: "Key",
+  rewardRedemptionTransactions: {
+    data: [
+      {
+        exchangedRewards: {
+          data: [
+            {
+              prettyValue: "19 Points",
+              type: "CREDIT",
+              fuelTankCode: "ABC",
+              globalRewardKey: "Key",
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
+const nullExpiresIn = {
+  dateExpires: null,
+};
+const nullScheduledFor = {
+  dateScheduledFor: null,
+};
+const nullFuelTank = {
+  fuelTankCode: null,
+};
+// Reward Type Cases
+const discountReward = {
+  type: "PCT_DISCOUNT",
+};
+const creditReward = {
+  type: "CREDIT",
+};
+const fuelTankReward = {
+  type: "FUELTANK",
+};
+const integrationReward = {
+  type: "INTEGRATION",
+};
+// Reward Status Cases
+const pendingReward = {
+  statuses: ["AVAILABLE", "PENDING"],
+};
+const cancelledReward = {
+  statuses: ["PENDING", "CANCELLED"],
+  dateCancelled: 1626850800000,
+};
+const expiredReward = {
+  statuses: ["EXPIRED", "AVAILABLE"],
+  dateExpires: 1626850800000,
+};
+const redeemedReward = {
+  statuses: ["AVAILABLE", "EXPIRED", "REDEEMED"],
+};
+const availableReward = {
+  statuses: ["AVAILABLE"],
+};
+const zeroRewards = [];
+const oneReward = [{ ...baseReward, ...availableReward }];
+const twoRewards = [
+  { ...baseReward, ...discountReward, ...pendingReward },
+  { ...baseReward, ...creditReward },
+];
+const threeRewards = [
+  { ...baseReward, ...fuelTankReward, ...nullExpiresIn },
+  { ...baseReward, ...fuelTankReward, ...expiredReward },
+  { ...baseReward, ...pendingReward, ...nullFuelTank },
+];
+const fiveRewards = [
+  { ...baseReward, ...fuelTankReward },
+  { ...baseReward, ...integrationReward },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn, ...nullFuelTank },
+  { ...baseReward, ...expiredReward, ...nullFuelTank },
+];
+const eightRewards = [
+  { ...baseReward, ...redeemedReward, ...nullFuelTank },
+  { ...baseReward, ...availableReward, ...nullExpiresIn },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...cancelledReward },
+  { ...baseReward, ...expiredReward },
+  { ...baseReward, ...pendingReward, ...nullExpiresIn, ...nullScheduledFor },
+  { ...baseReward, ...cancelledReward },
+  { ...baseReward, ...expiredReward },
+];
+const tenRewards = [
+  { ...baseReward, ...integrationReward },
+  { ...baseReward, ...redeemedReward },
+  { ...baseReward, ...availableReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
+  { ...baseReward, ...expiredReward },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...discountReward },
+  { ...baseReward, ...fuelTankReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
+  { ...baseReward, ...creditReward },
+];
+function getSeconds() {
+  return luxon.luxon.DateTime.now().toMillis() + 10000;
+}
+function getMinutes() {
+  return luxon.luxon.DateTime.now().toMillis() + 400000;
+}
+function getHours() {
+  return luxon.luxon.DateTime.now().toMillis() + 9000000;
+}
+function getDays() {
+  return luxon.luxon.DateTime.now().toMillis() + 600000000;
+}
+function getMonths() {
+  return luxon.luxon.DateTime.now().toMillis() + 10000000000;
+}
+function getYears() {
+  return luxon.luxon.DateTime.now().toMillis() + 200000000000;
+}
+const PendingNoUnpend = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const PendingNoUnpendNoDetails = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { hideDetails: true, rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const PendingWithUnpend = () => {
+  return [
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getSeconds() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getMinutes() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getHours() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getDays() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getMonths() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...pendingReward, dateScheduledFor: getYears() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+  ];
+};
+const AvailableNoExpiry = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, ...nullExpiresIn }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const AvailableWithExpiry = () => {
+  return [
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...availableReward, dateExpires: getSeconds() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...availableReward, dateExpires: getMinutes() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getHours() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getDays() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [
+        { ...baseReward, ...availableReward, dateExpires: getMonths() },
+      ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getYears() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+  ];
+};
+const Redeemed = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...redeemedReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const Cancelled = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...cancelledReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const Expired = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const EmptyCell = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: zeroRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const oneRewardCell = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: oneReward, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const twoRewardsCell = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: twoRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const threeRewardsCell = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: threeRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const fiveRewardsCell = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: fiveRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const eightRewardsCell = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: eightRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+const tenRewardsCell = () => {
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: tenRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+};
+
+const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': ReferralTableRewardsCell_stories,
+    PendingNoUnpend: PendingNoUnpend,
+    PendingNoUnpendNoDetails: PendingNoUnpendNoDetails,
+    PendingWithUnpend: PendingWithUnpend,
+    AvailableNoExpiry: AvailableNoExpiry,
+    AvailableWithExpiry: AvailableWithExpiry,
+    Redeemed: Redeemed,
+    Cancelled: Cancelled,
+    Expired: Expired,
+    EmptyCell: EmptyCell,
+    oneRewardCell: oneRewardCell,
+    twoRewardsCell: twoRewardsCell,
+    threeRewardsCell: threeRewardsCell,
+    fiveRewardsCell: fiveRewardsCell,
+    eightRewardsCell: eightRewardsCell,
+    tenRewardsCell: tenRewardsCell
+});
+
+exports.AvailableNoExpiry = AvailableNoExpiry;
+exports.Cancelled = Cancelled;
+exports.PendingNoUnpend = PendingNoUnpend;
+exports.ReferralTableRewardsCell = ReferralTableRewardsCell;
+exports.column = column;
+exports.date = date;
+exports.reward = reward;
+exports.status = status;
+exports.user = user;