@saasquatch/mint-components 1.5.0-68 → 1.5.0-71

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -21,6 +21,7 @@ const rewardsData = {
   prettyAvailableNumber: "19",
   prettyRedeemedNumber: "0",
   statuses: ["AVAILABLE"],
+  pendingReasons: null,
   globalRewardKey: null,
   rewardSource: "MANUAL",
   prettyRedeemedCredit: "0 Points",
@@ -66,7 +67,11 @@ export const RewardsCellSingleRedeemed = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
 };
 export const RewardsCellNonCredit = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, type: "FUELTANK", prettyValue: "SaaSquatch Giftcard" } }));
+  return (h("sqm-rewards-table-reward-cell", { reward: {
+      ...rewardsData,
+      type: "FUELTANK",
+      prettyValue: "SaaSquatch Giftcard",
+    } }));
 };
 export const SourceCellText = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
@@ -172,9 +177,28 @@ export const StatusCellExpired = () => {
 const pending = {
   statuses: ["PENDING"],
 };
+const us_tax = {
+  pendingReasons: ["US_TAX"],
+};
+const scheduled = {
+  pendingReasons: ["SCHEDULED"],
+  dateScheduledFor: 1640038417468,
+};
+const unhandled = {
+  pendingReasons: ["UNHANDLED_ERROR"],
+};
 export const StatusCellPending = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending } }));
 };
+export const StatusCellPendingUsTax = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...us_tax } }));
+};
+export const StatusCellPendingScheduled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...scheduled } }));
+};
+export const StatusCellPendingUnhandled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...unhandled } }));
+};
 export const DateCell = () => {
   return (h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
 };

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

@@ -5,7 +5,11 @@ import { createStyleSheet } from "../../../styling/JSS";
 import { luxonLocale } from "../../../utils/utils";
 export class RewardTableStatusCell {
   constructor() {
+    this.expiryText = "Expires";
     this.locale = "en";
+    this.pendingUsTax = "W-9 required";
+    this.pendingScheduled = "Until";
+    this.pendingUnhandled = "Fulfillment error";
   }
   rewardStatus(reward) {
     if (reward.dateCancelled)
@@ -77,12 +81,28 @@ export class RewardTableStatusCell {
       `${rewardStatus === "AVAILABLE" && this.reward.dateExpires
         ? this.expiryText + " "
         : ""}${(_a = DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(this.locale))).toLocaleString(DateTime.DATE_MED)}`;
+    const pendingReasons = rewardStatus === "PENDING" ? getRewardPendingReasons(this) : null;
+    console.log(pendingReasons);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
       h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED"
           ? sheet.classes.RedeemBadge
           : sheet.classes.Badge }, statusText),
-      h("p", { class: sheet.classes.Date }, date)));
+      h("p", { class: sheet.classes.Date }, pendingReasons || date)));
+    function getRewardPendingReasons(prop) {
+      var _a;
+      console.log(prop.reward);
+      const pendingCodeMap = {
+        US_TAX: prop.pendingUsTax,
+        SCHEDULED: prop.reward.dateScheduledFor &&
+          prop.pendingScheduled +
+            " " + ((_a = DateTime.fromMillis(prop.reward.dateScheduledFor)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(prop.locale))).toLocaleString(DateTime.DATE_MED)),
+        UNHANDLED_ERROR: prop.pendingUnhandled,
+      };
+      return prop.reward.pendingReasons
+        .map((s) => { var _a; return (_a = pendingCodeMap[s]) !== null && _a !== void 0 ? _a : s; })
+        .join(", ");
+    }
   }
   static get is() { return "sqm-rewards-table-status-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -138,7 +158,8 @@ export class RewardTableStatusCell {
         "text": ""
       },
       "attribute": "expiry-text",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"Expires\""
     },
     "locale": {
       "type": "string",
@@ -157,6 +178,60 @@ export class RewardTableStatusCell {
       "attribute": "locale",
       "reflect": false,
       "defaultValue": "\"en\""
+    },
+    "pendingUsTax": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-us-tax",
+      "reflect": false,
+      "defaultValue": "\"W-9 required\""
+    },
+    "pendingScheduled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-scheduled",
+      "reflect": false,
+      "defaultValue": "\"Until\""
+    },
+    "pendingUnhandled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-unhandled",
+      "reflect": false,
+      "defaultValue": "\"Fulfillment error\""
     }
   }; }
 }

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

@@ -31,7 +31,7 @@ export class RewardTableUserColumn {
     /**
      * @uiName Reward Source Text
      */
-    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}";
+    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Program} other {}}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -176,7 +176,7 @@ export class RewardTableUserColumn {
       },
       "attribute": "reward-source-text",
       "reflect": false,
-      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}\""
+      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {Program} other {}}\""
     }
   }; }
   static get methods() { return {

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

@@ -24,16 +24,16 @@ export class RewardsTable {
     /** @uiName Hide Columns (Mobile View)  */
     this.mdBreakpoint = 899;
     /** @uiName Empty State Image Link  */
-    this.emptyStateImgUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png";
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png";
     /** @uiName Empty State Title  */
-    this.emptyStateTitle = "View your rewards";
+    this.emptyStateHeader = "View your rewards";
     /** @uiName Empty State Text  */
     this.emptyStateText = "See all the rewards you have earned from referring friends and completing tasks";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = (h(EmptySlot, { emptyStateImgUrl: this.emptyStateImgUrl, emptyStateTitle: this.emptyStateTitle, emptyStateText: this.emptyStateText }));
+    const empty = (h(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useRewardsTableDemo(this)
@@ -210,7 +210,7 @@ export class RewardsTable {
       "reflect": false,
       "defaultValue": "899"
     },
-    "emptyStateImgUrl": {
+    "emptyStateImage": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -227,11 +227,11 @@ export class RewardsTable {
           }],
         "text": ""
       },
-      "attribute": "empty-state-img-url",
+      "attribute": "empty-state-image",
       "reflect": false,
       "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png\""
     },
-    "emptyStateTitle": {
+    "emptyStateHeader": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -248,7 +248,7 @@ export class RewardsTable {
           }],
         "text": ""
       },
-      "attribute": "empty-state-title",
+      "attribute": "empty-state-header",
       "reflect": false,
       "defaultValue": "\"View your rewards\""
     },
@@ -278,7 +278,7 @@ export class RewardsTable {
       "mutable": false,
       "complexType": {
         "original": "DemoData<GenericTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -338,30 +338,27 @@ function useRewardsTableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: (h(EmptySlot, { emptyStateImgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateTitle: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks" })),
+      emptyElement: (h(EmptySlot, { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateHeader: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks" })),
       loadingElement: h(LoadingSlot, null),
       // TODO: This should be smarter
       columns: [
-        h("div", null, "Reward"),
-        h("div", null, "Source"),
-        h("div", null, "Status"),
-        h("div", null, "Date recieved"),
+        "Reward",
+        "Source",
+        "Status",
+        "Date recieved",
       ],
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
-function EmptySlot({ emptyStateImgUrl, emptyStateTitle, emptyStateText, }) {
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
   return (h("div", { slot: "empty", style: { display: "contents" } },
     h("sqm-table-row", null,
       h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
-        h("div", { style: { padding: "var(--sl-spacing-xxx-large)" } },
-          h("img", { src: emptyStateImgUrl, style: { width: "100px" } }),
-          h("div", null,
-            h("b", null, emptyStateTitle)),
-          h("div", { style: {
-              marginTop: "var(--sl-spacing-xx-small)",
-              fontSize: "var(--sl-font-size-small)",
-              color: "var(--sl-color-neutral-500)",
-            } }, emptyStateText))))));
+        h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+          h("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }),
+          h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+            h("sqm-text", { slot: "label" },
+              h("h3", null, emptyStateHeader)),
+            h("sqm-text", { slot: "content" }, emptyStateText)))))));
 }

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -4,6 +4,7 @@ import { h } from "@stencil/core";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
+import { generateUserError } from "../sqm-referral-table/useReferralTable";
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `
   query getRewards(
@@ -47,6 +48,7 @@ const GET_REWARDS = gql `
             )
             programId
             statuses
+            pendingReasons
             globalRewardKey
             programRewardKey
             rewardSource
@@ -135,7 +137,7 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
       const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], locale)));
-      const cells = await Promise.all(cellPromise);
+      const cells = (await Promise.all(cellPromise));
       return cells;
     });
     const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
@@ -191,14 +193,6 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     },
   };
 }
-function generateUserError(e) {
-  try {
-    return JSON.stringify(e);
-  }
-  catch (e) {
-    return "An unknown error";
-  }
-}
 async function tryMethod(c, callback) {
   const tag = c.tagName.toLowerCase();
   await customElements.whenDefined(tag);

package/dist/collection/components/sqm-share-button/ShareButton.stories.js

@@ -94,5 +94,5 @@ export const AllMediums = () => {
       h("span", null, "Line Messenger")),
     h("br", null),
     h("sqm-share-button", { medium: "direct" },
-      h("span", null, "Direct"))));
+      h("span", null, "Share"))));
 };

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -2,40 +2,16 @@ import { h, Host } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
 const medium = {
-  facebook: "#1877f2",
-  twitter: "#1da1f2",
-  email: "#666666",
-  direct: "#00008B",
-  linkedin: "#0077b5",
-  sms: "#34DA50",
-  fbmessenger: "#0084ff",
-  whatsapp: "#25d366",
-  linemessenger: "#00B300",
-  pinterest: "#e60023",
-};
-const medium_text = {
-  facebook: "#fff",
-  twitter: "#fff",
-  email: "#fff",
-  direct: "#fff",
-  linkedin: "#fff",
-  sms: "#fff",
-  fbmessenger: "#fff",
-  whatsapp: "#fff",
-  linemessenger: "#fff",
-  pinterest: "#fff",
-};
-const medium_icon = {
-  facebook: "facebook",
-  twitter: "twitter",
-  email: "envelope",
-  direct: "send",
-  linkedin: "linkedin",
-  sms: "chat",
-  fbmessenger: "messenger",
-  whatsapp: "whatsapp",
-  linemessenger: "line",
-  pinterest: "pinterest",
+  facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
+  twitter: { color: "#1da1f2", text: "#fff", icon: "twitter" },
+  email: { color: "#666666", text: "#fff", icon: "envelope" },
+  direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
+  linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
+  sms: { color: "#34DA50", text: "#fff", icon: "chat" },
+  fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
+  whatsapp: { color: "#25d366", text: "#fff", icon: "whatsapp" },
+  linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
+  pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
 };
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
@@ -43,18 +19,18 @@ export function ShareButtonView(props, children) {
 			--sl-focus-ring-color-primary: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""}80!important;
 
       background: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""};
       color: ${props.textcolor
     ? props.textcolor
     : props.medium
-      ? medium_text[props.medium]
+      ? medium[props.medium].text
       : ""};
       border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
     }
@@ -63,7 +39,7 @@ export function ShareButtonView(props, children) {
 		border-color: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""}D1!important;
 	}
 	
@@ -71,7 +47,7 @@ export function ShareButtonView(props, children) {
 		border-color: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""}D1!important;
 	}
 
@@ -95,6 +71,6 @@ export function ShareButtonView(props, children) {
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
     h("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
-      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium_icon[props.medium], exportparts: "icon" })),
+      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
       !props.hidetext && children)));
 }

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -70,10 +70,10 @@ export class ShareButton {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\", \"reminder\", \"unknown\" ]",
+            "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\", \"Reminder\", \"Unknown\"]",
+            "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\"]",
             "name": "uiEnumNames"
           }],
         "text": "The social medium to share on. Share messages and links\r\nwill be pulled from your program config and tagged for analytics."
@@ -135,6 +135,9 @@ export class ShareButton {
         "tags": [{
             "text": "Button background color",
             "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -155,6 +158,9 @@ export class ShareButton {
         "tags": [{
             "text": "Button text color",
             "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -302,7 +308,7 @@ export class ShareButton {
             "text": "Icon used in button. Will try to select an icon based on the share medium if left empty.",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Options available at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -55,6 +55,7 @@ import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
 import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
 import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
 import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
 import * as Image from "../sqm-image/Image.stories";
 import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
 import * as Themes from "./Themes";
@@ -117,6 +118,7 @@ const stories = [
   UseReferralTable,
   HeroImage,
   ReferralCard,
+  Timeline,
   Image,
   TitledSection,
 ];

package/dist/collection/components/sqm-task-card/TaskCard.stories.js

@@ -40,7 +40,6 @@ const oneAction = {
     buttonText: "Take survey",
     buttonLink: "https://example.com/",
     openNewTab: false,
-    showExpiry: false,
     rewardDuration: null,
     completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
     expiryMessage: "Ends {endDate}",
@@ -48,7 +47,7 @@ const oneAction = {
     endedMessage: "Ended {endDate}",
     finite: 0,
     goal: 1,
-    locale: "en"
+    locale: "en",
   },
   states: {
     progress: 0,
@@ -72,7 +71,6 @@ const coupleActions = {
     buttonText: "Take survey",
     buttonLink: "https://example.com/",
     openNewTab: false,
-    showExpiry: false,
     completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
     rewardDuration: null,
     expiryMessage: "Ends {endDate}",
@@ -80,7 +78,7 @@ const coupleActions = {
     endedMessage: "Ended {endDate}",
     finite: 0,
     goal: 5,
-    locale: "en"
+    locale: "en",
   },
   states: {
     progress: 1,
@@ -106,20 +104,18 @@ const manyActions = {
     buttonText: "Take survey",
     buttonLink: "https://example.com/",
     openNewTab: false,
-    showExpiry: false,
     rewardDuration: null,
     expiryMessage: "Ends {endDate}",
     startsOnMessage: "Starts {startDate}",
     endedMessage: "Ended {endDate}",
     finite: 0,
     goal: 500,
-    locale: "en"
+    locale: "en",
   },
   states: { progress: 100, loading: false, loadingEvent: false },
 };
 export const TaskCard = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
   };
   const expireRepeat = { ...expire, repeatable: true };
@@ -240,7 +236,6 @@ export const TaskCardRepeatableFinite = () => {
 };
 export const TaskCardEndDate = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: DateTime.now().minus({ days: 1 }).toISO() +
       "/" +
       DateTime.now().plus({ days: 1 }).toISO(),
@@ -304,7 +299,6 @@ export const TaskCardLoading = () => {
 };
 export const TaskCardNotStarted = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: DateTime.now().plus({ days: 1 }).toISO() +
       "/" +
       DateTime.now().plus({ days: 2 }).toISO(),
@@ -344,7 +338,6 @@ export const TaskCardNotStarted = () => {
 };
 export const TaskCardEnded = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: DateTime.now().minus({ days: 2 }).toISO() +
       "/" +
       DateTime.now().minus({ days: 1 }).toISO(),

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -163,9 +163,9 @@ export function TaskCardView(props) {
   console.log("TASK CARD PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
   console.log({ props });
   const { callbacks, states, content } = props;
-  const dateStart = content.showExpiry &&
+  const dateStart = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[0]);
-  const dateEnd = content.showExpiry &&
+  const dateEnd = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[1]);
   const dateToday = DateTime.now();
   if (content.displayDuration) {
@@ -186,8 +186,8 @@ export function TaskCardView(props) {
     : states.progress;
   const taskComplete = (showComplete && content.repeatable === false) ||
     (content.finite && states.progress >= content.finite * content.goal);
-  const taskEnded = content.showExpiry && dateEnd <= dateToday;
-  const taskNotStarted = content.showExpiry && dateToday <= dateStart;
+  const taskEnded = content.rewardDuration && dateEnd <= dateToday;
+  const taskNotStarted = content.rewardDuration && dateToday <= dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
   const vanillaStyle = `
 	:host{
@@ -266,7 +266,7 @@ export function TaskCardView(props) {
                   ? Math.min(repetitions, content.finite)
                   : repetitions,
               })))),
-            content.showExpiry && !taskUnavailable && (h("span", { class: "datetime" }, intl.formatMessage({
+            dateEnd && !taskUnavailable && (h("span", { class: "datetime" }, intl.formatMessage({
               id: "expiryMessage",
               defaultMessage: content.expiryMessage,
             }, {

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -56,20 +56,10 @@ export class TaskCard {
      * @uiName Progress Bar Unit
      */
     this.progressBarUnit = "";
-    /**
-     * @uiName Show Goal Expiry
-     */
-    this.showExpiry = false;
     /**
      * @uiName Expiry Date Message
      */
     this.expiryMessage = "Ends {endDate}";
-    /**
-     * @uiName Reward Duration
-     * @uiWidget DateRange
-     * @uiOptions {"allowPastDates":true, "months": 1}
-     */
-    this.rewardDuration = "/";
     /**
      * Shown to users before the start of the task duration.
      *
@@ -339,27 +329,6 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "\"\""
     },
-    "showExpiry": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Show Goal Expiry",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "show-expiry",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "expiryMessage": {
       "type": "string",
       "mutable": false,
@@ -405,8 +374,7 @@ export class TaskCard {
         "text": ""
       },
       "attribute": "reward-duration",
-      "reflect": false,
-      "defaultValue": "\"/\""
+      "reflect": false
     },
     "startsOnMessage": {
       "type": "string",