@saasquatch/mint-components 1.5.0-2 → 1.5.0-23

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

@@ -18,7 +18,85 @@ export class SqmRewardExchangeList {
     /**
      * @uiName Exchange button text
      */
-    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }";
+    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} other {Not available} }";
+    /**
+     * @uiName Choose Reward Progress Title
+     */
+    this.chooseRewardTitle = "Rewards";
+    /**
+     * @uiName Choose Amount Progress Title
+     */
+    this.chooseAmountTitle = "Select";
+    /**
+     * @uiName Confirmation Progress Title
+     */
+    this.confirmationTitle = "Confirm";
+    /**
+     * @uiName Reward Title Text
+     */
+    this.rewardTitle = "Choose a reward";
+    /**
+     * @uiName Cancel Button Text
+     */
+    this.cancelText = "Cancel";
+    /**
+     * @uiName Back Button Text
+     */
+    this.backText = "Back";
+    /**
+     * @uiName Continue Button Text
+     */
+    this.continueText = "Continue";
+    /**
+     * @uiName Continue to Confirmation Button Text
+     */
+    this.continueToConfirmationText = "Continue to confirmation";
+    /**
+     * @uiName Redeem Button Text
+     */
+    this.redeemText = "Redeem";
+    /**
+     * @uiName Confirmation Title Text
+     */
+    this.redeemTitle = "Confirm and redeem";
+    /**
+     * @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
+     */
+    this.queryError = "Unable to load reward exchange list";
+    /**
+     * @uiName Redemption Error Message
+     */
+    this.redemptionError = "An error occured trying to redeem this reward. Please try again";
+    /**
+     * @uiName Not Enough Available Error Message
+     */
+    this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
+    /**
+     * @uiName Number of Skeleton Cards
+     */
+    this.skeletonCardNum = 8;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -82,14 +160,413 @@ export class SqmRewardExchangeList {
       },
       "attribute": "not-available-error",
       "reflect": false,
-      "defaultValue": "\"{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }\""
+      "defaultValue": "\"{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} other {Not available} }\""
+    },
+    "chooseRewardTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Choose Reward Progress Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "choose-reward-title",
+      "reflect": false,
+      "defaultValue": "\"Rewards\""
+    },
+    "chooseAmountTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Choose Amount Progress Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "choose-amount-title",
+      "reflect": false,
+      "defaultValue": "\"Select\""
+    },
+    "confirmationTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirmation Progress Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "confirmation-title",
+      "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,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Cancel Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "cancel-text",
+      "reflect": false,
+      "defaultValue": "\"Cancel\""
+    },
+    "backText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Back Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "back-text",
+      "reflect": false,
+      "defaultValue": "\"Back\""
+    },
+    "continueText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Continue Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "continue-text",
+      "reflect": false,
+      "defaultValue": "\"Continue\""
+    },
+    "continueToConfirmationText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Continue to Confirmation Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "continue-to-confirmation-text",
+      "reflect": false,
+      "defaultValue": "\"Continue to confirmation\""
+    },
+    "redeemText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redeem Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "redeem-text",
+      "reflect": false,
+      "defaultValue": "\"Redeem\""
+    },
+    "redeemTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirmation Title Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "redeem-title",
+      "reflect": false,
+      "defaultValue": "\"Confirm and redeem\""
+    },
+    "redemptionSuccessText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redemption Success Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "redemption-success-text",
+      "reflect": false,
+      "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",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Done Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "done-text",
+      "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,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward List Error Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "query-error",
+      "reflect": false,
+      "defaultValue": "\"Unable to load reward exchange list\""
+    },
+    "redemptionError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redemption Error Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "redemption-error",
+      "reflect": false,
+      "defaultValue": "\"An error occured trying to redeem this reward. Please try again\""
+    },
+    "notEnoughError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Not Enough Available Error Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "not-enough-error",
+      "reflect": false,
+      "defaultValue": "\"Not enough {sourceUnit} to redeem for this reward\""
+    },
+    "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; loading: 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; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -129,6 +606,7 @@ function useRewardExchangeListDemo(props) {
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
+      queryError: false,
       loading: false,
     },
     data: {
@@ -139,6 +617,7 @@ function useRewardExchangeListDemo(props) {
       setExchangeState: (_) => { },
       setStage: (_) => { },
       resetState: () => { },
+      copyFuelTankCode: () => { },
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,6 +1,6 @@
 import { useUserIdentity, useQuery, useMutation, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-import { useEffect, useReducer, } from "@saasquatch/universal-hooks";
+import { useEffect, useReducer, useState, } from "@saasquatch/universal-hooks";
 const GET_EXCHANGE_LIST = gql `
   query getExchangeList {
     viewer {
@@ -36,6 +36,7 @@ const GET_EXCHANGE_LIST = gql `
               available
               globalRewardKey
               unavailableReasonCode
+              rewardInput
             }
           }
           totalCount
@@ -66,10 +67,11 @@ export function useRewardExchangeList(props) {
     amount: 0,
     exchangeError: false,
   });
+  const [open, setOpen] = useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = useUserIdentity();
-  const [exchange, { data: exchangeResponse, errors }] = useMutation(EXCHANGE);
-  const { data, loading, refetch } = useQuery(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  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));
   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) {
@@ -115,9 +117,7 @@ export function useRewardExchangeList(props) {
             unit: selectedItem.sourceUnit,
           },
           globalRewardKey: selectedItem.globalRewardKey,
-          rewardInput: {
-            valueInCents: selectedStep.destinationValue,
-          },
+          rewardInput: selectedStep.rewardInput,
         };
         break;
       case "VARIABLE_CREDIT_REWARD":
@@ -137,11 +137,7 @@ export function useRewardExchangeList(props) {
       default:
         exchangeVariables = {
           ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedItem.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
+          ...selectedStep.rewardInput,
         };
     }
     exchange({ exchangeRewardInput: exchangeVariables });
@@ -159,6 +155,12 @@ export function useRewardExchangeList(props) {
   function setStage(stage) {
     setExchangeState({ redeemStage: stage });
   }
+  function copyFuelTankCode() {
+    var _a, _b;
+    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);
+  }
   return {
     states: {
       content: {
@@ -169,7 +171,9 @@ export function useRewardExchangeList(props) {
       amount,
       selectedStep,
       exchangeError,
-      loading,
+      queryError: !!queryError,
+      loading: loading || exchangeLoading,
+      open,
     },
     data: {
       exchangeList: (_b = (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems) === null || _b === void 0 ? void 0 : _b.data,
@@ -180,6 +184,7 @@ export function useRewardExchangeList(props) {
       setExchangeState,
       setStage,
       resetState,
+      copyFuelTankCode,
     },
   };
 }

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": {}
+  }; }
+}