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

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,
+    },
   };
 }