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

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-269dffac.js

@@ -0,0 +1,114 @@
+'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);
+  console.log("columns 0", columns);
+  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) ? 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.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-d050c8c7.js

@@ -0,0 +1,242 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const luxon = require('./luxon-59ca7d19.js');
+
+const ReferralTableRewardsCell_stories = {
+  title: "Components/Referral Table Rewards Cell",
+};
+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;