@saasquatch/mint-components 1.5.0-3 → 1.5.0-30

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

@@ -18,19 +18,23 @@ export class SqmRewardExchangeList {
     /**
      * @uiName Exchange button text
      */
-    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} other {Not available} }";
+    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }";
     /**
      * @uiName Choose Reward Progress Title
      */
-    this.chooseRewardTitle = "Choose reward";
+    this.chooseRewardTitle = "Rewards";
     /**
      * @uiName Choose Amount Progress Title
      */
-    this.chooseAmountTitle = "Amount";
+    this.chooseAmountTitle = "Select";
     /**
      * @uiName Confirmation Progress Title
      */
     this.confirmationTitle = "Confirm";
+    /**
+     * @uiName Reward Title Text
+     */
+    this.rewardTitle = "Choose a reward";
     /**
      * @uiName Cancel Button Text
      */
@@ -55,11 +59,28 @@ export class SqmRewardExchangeList {
      * @uiName Confirmation Title Text
      */
     this.redeemTitle = "Confirm and redeem";
-    this.redemptionSuccessText = "Successfully redeemed {sourceValue} for {destinationValue}";
+    /**
+     * @uiName Redemption Success Message
+     */
+    this.redemptionSuccessText = "Redeemed {sourceValue} for {destinationValue}";
+    /**
+     * @uiName Reward Exchange Amount Text
+     */
+    this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
+    /**
+     * Shown when a user copies a fuel tank code
+     *
+     * @uiName Tool Tip Text
+     */
+    this.tooltiptext = "Copied";
     /**
      * @uiName Done Text
      */
     this.doneText = "Done";
+    /**
+     * @uiName Select Amount Text
+     */
+    this.selectText = "Select amount to receive";
     /**
      * @uiName Reward List Error Message
      */
@@ -72,6 +93,14 @@ export class SqmRewardExchangeList {
      * @uiName Not Enough Available Error Message
      */
     this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
+    /**
+     * @uiName Promo Code Text
+     */
+    this.promoCode = "Promo Code";
+    /**
+     * @uiName Number of Skeleton Cards
+     */
+    this.skeletonCardNum = 8;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -85,11 +114,11 @@ export class SqmRewardExchangeList {
     // if (missingProps) {
     //   return <RequiredPropsError missingProps={missingProps} />;
     // }
-    const { states, data, callbacks } = isDemo()
+    const { states, data, callbacks, refs } = isDemo()
       ? useRewardExchangeListDemo(getProps(this))
       : useRewardExchangeList(getProps(this));
     return (h(Host, { style: { display: "contents" } },
-      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks })));
+      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
   }
   static get is() { return "sqm-reward-exchange-list"; }
   static get encapsulation() { return "shadow"; }
@@ -135,7 +164,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "not-available-error",
       "reflect": false,
-      "defaultValue": "\"{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} other {Not available} }\""
+      "defaultValue": "\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }\""
     },
     "chooseRewardTitle": {
       "type": "string",
@@ -156,7 +185,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "choose-reward-title",
       "reflect": false,
-      "defaultValue": "\"Choose reward\""
+      "defaultValue": "\"Rewards\""
     },
     "chooseAmountTitle": {
       "type": "string",
@@ -177,7 +206,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "choose-amount-title",
       "reflect": false,
-      "defaultValue": "\"Amount\""
+      "defaultValue": "\"Select\""
     },
     "confirmationTitle": {
       "type": "string",
@@ -200,6 +229,27 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Confirm\""
     },
+    "rewardTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Title Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-title",
+      "reflect": false,
+      "defaultValue": "\"Choose a reward\""
+    },
     "cancelText": {
       "type": "string",
       "mutable": false,
@@ -337,12 +387,57 @@ export class SqmRewardExchangeList {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Redemption Success Message",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "redemption-success-text",
       "reflect": false,
-      "defaultValue": "\"Successfully redeemed {sourceValue} for {destinationValue}\""
+      "defaultValue": "\"Redeemed {sourceValue} for {destinationValue}\""
+    },
+    "sourceAmountMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Exchange Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "source-amount-message",
+      "reflect": false,
+      "defaultValue": "\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\""
+    },
+    "tooltiptext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Tool Tip Text",
+            "name": "uiName"
+          }],
+        "text": "Shown when a user copies a fuel tank code"
+      },
+      "attribute": "tooltiptext",
+      "reflect": false,
+      "defaultValue": "\"Copied\""
     },
     "doneText": {
       "type": "string",
@@ -365,6 +460,27 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Done\""
     },
+    "selectText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Select Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "select-text",
+      "reflect": false,
+      "defaultValue": "\"Select amount to receive\""
+    },
     "queryError": {
       "type": "string",
       "mutable": false,
@@ -428,12 +544,54 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Not enough {sourceUnit} to redeem for this reward\""
     },
+    "promoCode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Promo Code Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "promo-code",
+      "reflect": false,
+      "defaultValue": "\"Promo Code\""
+    },
+    "skeletonCardNum": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Number of Skeleton Cards",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "skeleton-card-num",
+      "reflect": false,
+      "defaultValue": "8"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<RewardExchangeViewProps>",
-        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; queryError?: boolean; loading: boolean; open: boolean; content: { text: any; }; }; data?: { exchangeList: any; fuelTankCode?: string; }; }",
+        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError?: boolean; queryError?: boolean; loading: boolean; open: boolean; content: { text: any; }; }; data?: { exchangeList: any; fuelTankCode?: string; }; refs?: { canvasRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -486,5 +644,8 @@ function useRewardExchangeListDemo(props) {
       resetState: () => { },
       copyFuelTankCode: () => { },
     },
+    refs: {
+      canvasRef: {}
+    }
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,7 +1,7 @@
-import { useUserIdentity, useQuery, useMutation, } from "@saasquatch/component-boilerplate";
+import { useUserIdentity, useQuery, useMutation, useRefreshDispatcher, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-import { useEffect, useReducer, useState, } from "@saasquatch/universal-hooks";
-// TODO: add rewardInput once it works
+import { useEffect, useReducer, useRef, useState, } from "@saasquatch/universal-hooks";
+import confetti from "canvas-confetti";
 const GET_EXCHANGE_LIST = gql `
   query getExchangeList {
     viewer {
@@ -13,7 +13,6 @@ const GET_EXCHANGE_LIST = gql `
             description
             imageUrl
             available
-            unavailableReason
             unavailableReasonCode
             ruleType
             sourceUnit
@@ -37,6 +36,7 @@ const GET_EXCHANGE_LIST = gql `
               available
               globalRewardKey
               unavailableReasonCode
+              rewardInput
             }
           }
           totalCount
@@ -71,7 +71,7 @@ export function useRewardExchangeList(props) {
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = useUserIdentity();
   const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = useMutation(EXCHANGE);
-  const { data, loading, refetch, errors: queryError, } = useQuery(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data, loading, refetch, errors: queryError, } = useQuery(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   useEffect(() => {
     var _a, _b;
     if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
@@ -81,7 +81,18 @@ export function useRewardExchangeList(props) {
       setExchangeState({ exchangeError: true });
     }
   }, [exchangeResponse, errors]);
-  function exchangeReward() {
+  const canvasRef = useRef();
+  useEffect(() => {
+    if (!canvasRef.current)
+      return;
+    console.log("confetti!");
+    const canvas = canvasRef.current;
+    canvas.confetti =
+      canvas.confetti || confetti.create(canvas, { resize: true, });
+    canvas.confetti();
+  }, [canvasRef.current]);
+  const { refresh } = useRefreshDispatcher();
+  async function exchangeReward() {
     if (!selectedItem)
       return;
     let exchangeVariables = {
@@ -117,9 +128,7 @@ export function useRewardExchangeList(props) {
             unit: selectedItem.sourceUnit,
           },
           globalRewardKey: selectedItem.globalRewardKey,
-          rewardInput: {
-            valueInCents: selectedStep.destinationValue,
-          },
+          rewardInput: selectedStep.rewardInput,
         };
         break;
       case "VARIABLE_CREDIT_REWARD":
@@ -139,14 +148,11 @@ export function useRewardExchangeList(props) {
       default:
         exchangeVariables = {
           ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedItem.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
+          ...selectedStep.rewardInput,
         };
     }
-    exchange({ exchangeRewardInput: exchangeVariables });
+    await exchange({ exchangeRewardInput: exchangeVariables });
+    refresh();
   }
   const resetState = (refresh) => {
     refresh && refetch();
@@ -163,8 +169,6 @@ export function useRewardExchangeList(props) {
   }
   function copyFuelTankCode() {
     var _a, _b;
-    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
-    // Only if called from a user-initiated event
     navigator.clipboard.writeText((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.fuelTankCode);
     setOpen(true);
     setTimeout(() => setOpen(false), 1000);
@@ -194,5 +198,8 @@ export function useRewardExchangeList(props) {
       resetState,
       copyFuelTankCode,
     },
+    refs: {
+      canvasRef,
+    },
   };
 }

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

@@ -0,0 +1,171 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Rewards Table Cell",
+};
+const rewardsData = {
+  id: "61c100117a82a376d8804166",
+  type: "CREDIT",
+  value: 19,
+  unit: "TESTUNIT",
+  name: null,
+  dateGiven: 1640038417468,
+  dateExpires: null,
+  dateCancelled: null,
+  dateRedeemed: null,
+  dateScheduledFor: null,
+  fuelTankCode: null,
+  fuelTankType: null,
+  currency: null,
+  prettyValue: "19 Points",
+  prettyValueNumber: "19",
+  prettyAvailableNumber: "19",
+  prettyRedeemedNumber: "0",
+  statuses: ["AVAILABLE"],
+  globalRewardKey: null,
+  rewardSource: "MANUAL",
+  prettyRedeemedCredit: "0 Points",
+  prettyAssignedCredit: "19 Points",
+  prettyAvailableValue: "19 Points",
+  exchangedRewardRedemptionTransaction: null,
+  referral: null,
+  rewardRedemptionTransactions: {
+    data: null,
+  },
+};
+export const RewardsCellFull = () => {
+  return (h("sqm-rewards-table-rewards-cell", { reward: { ...rewardsData }, availableText: "19 Points available" }));
+};
+const partial = {
+  prettyAvailableValue: "10 Points",
+  prettyRedeemedCredit: "9 Points",
+  prettyRedeemedNumber: "9",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellPartial = () => {
+  return (h("sqm-rewards-table-rewards-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points available" }));
+};
+const empty = {
+  prettyAvailableValue: "0 Points",
+  prettyRedeemedCredit: "19 Points",
+  prettyRedeemedNumber: "19",
+  dateRedeemed: 1640038417468,
+};
+export const RewardsCellEmpty = () => {
+  return (h("sqm-rewards-table-rewards-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points available" }));
+};
+export const RewardsCellNonRedeemable = () => {
+  return (h("sqm-rewards-table-rewards-cell", { reward: { ...rewardsData, ...{ type: "FUELTANK" } }, availableText: "19 Points available" }));
+};
+export const SourceCellText = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
+};
+const exchange = {
+  exchangedRewardRedemptionTransaction: {
+    id: "61c100117a82a376d88041196",
+    creditRedeemed: 1,
+    prettyRedeemedCredit: "1 Money",
+    unit: "TESTUNIT",
+    dateRedeemed: 1640038417173,
+    redeemedRewards: null,
+    exchangedRewards: null,
+  },
+};
+export const SourceCellExchange = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...exchange }, rewardExchangeText: "Reward Exchange" }));
+};
+const johnDoe = {
+  firstName: "John",
+  lastName: "Doe",
+  imageUrl: null,
+};
+const anon = {
+  firstName: "",
+  lastName: "",
+  imageUrl: null,
+};
+const referral = (user = null) => {
+  return {
+    rewardSource: "FRIEND_SIGNUP",
+    referral: {
+      id: "123",
+      dateConverted: 1640038417173,
+      dateReferralStarted: 1640038417173,
+      dateReferralPaid: 1640038417173,
+      dateReferralEnded: null,
+      moderationStatus: null,
+      rewards: null,
+      referrerUser: user,
+      referredUser: user,
+    },
+  };
+};
+const referred = (user = null) => {
+  return {
+    rewardSource: "REFERRED",
+    referral: {
+      id: "123",
+      dateConverted: 1640038417173,
+      dateReferralStarted: 1640038417173,
+      dateReferralPaid: 1640038417173,
+      dateReferralEnded: null,
+      moderationStatus: null,
+      rewards: null,
+      referrerUser: user,
+      referredUser: user,
+    },
+  };
+};
+export const SourceCellReferral = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(johnDoe) }, referralText: "Referral to" }));
+};
+export const SourceCellReferred = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referred(johnDoe) }, referralText: "Referred by" }));
+};
+export const SourceCellAnonymousUser = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
+};
+export const SourceCellDeletedUser = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
+};
+export const StatusCellAvailable = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData }));
+};
+const expire = {
+  dateExpires: 1640038417468,
+};
+export const StatusCellAvailableExpiry = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Available", reward: { ...rewardsData, ...expire }, expiryText: "Expires" }));
+};
+const redeemed = {
+  statuses: ["REDEEMED"],
+  dateRedeemed: 1640038417468,
+};
+export const StatusCellRedeemed = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Redeemed", reward: { ...rewardsData, ...redeemed } }));
+};
+const cancelled = {
+  statuses: ["CANCELLED"],
+  dateCancelled: 1640038417468,
+};
+export const StatusCellCancelled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Cancelled", reward: { ...rewardsData, ...cancelled } }));
+};
+const expired = {
+  statuses: ["EXPIRED"],
+  dateExpires: 1640038417468,
+};
+export const StatusCellExpired = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Expired", reward: { ...rewardsData, ...expired } }));
+};
+const pending = {
+  statuses: ["PENDING"],
+};
+export const StatusCellPending = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending } }));
+};
+export const DateCell = () => {
+  return (h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
+};
+export const EmptyCell = () => {
+  return h("sqm-rewards-table-date-cell", null);
+};

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

@@ -37,7 +37,10 @@ export const RewardsTableWithProgram = createHookStory(() => {
     ignored: true,
   };
   return (h("sqm-rewards-table", null,
-    h("sqm-rewards-table-column", null)));
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-date-column", null)));
 });
 export const RewardsTableNoProgram = createHookStory(() => {
   setupGraphQL();
@@ -49,5 +52,8 @@ export const RewardsTableNoProgram = createHookStory(() => {
     ignored: true,
   };
   return (h("sqm-rewards-table", null,
-    h("sqm-rewards-table-column", null)));
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-date-column", null)));
 });

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

@@ -0,0 +1,42 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { DateTime } from "luxon";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableDateCell {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    const date = !this.date
+      ? "-"
+      : (_a = DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.toLocaleString(DateTime.DATE_MED);
+    return h(TextSpanView, { type: "p" }, date);
+  }
+  static get is() { return "sqm-rewards-table-date-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "date": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "date",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}