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

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

@@ -5,6 +5,7 @@ import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
 import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
+import { demoRewardExchange } from "./RewardExchangeListData";
 /**
  * @uiName Reward Exchange List
  */
@@ -18,19 +19,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,15 +60,32 @@ 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
      */
-    this.queryError = "Unable to load reward exchange list";
+    this.queryError = "Unable to load reward exchange list. Please try again";
     /**
      * @uiName Redemption Error Message
      */
@@ -72,6 +94,32 @@ 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;
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Reward Row Title
+     */
+    this.rewardNameTitle = "Reward";
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Reward Amount Row Title
+     */
+    this.rewardAmountTitle = "Reward Amount";
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Cost Row Title
+     */
+    this.costTitle = "Cost to Redeem";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -85,11 +133,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 +183,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 +204,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "choose-reward-title",
       "reflect": false,
-      "defaultValue": "\"Choose reward\""
+      "defaultValue": "\"Rewards\""
     },
     "chooseAmountTitle": {
       "type": "string",
@@ -177,7 +225,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "choose-amount-title",
       "reflect": false,
-      "defaultValue": "\"Amount\""
+      "defaultValue": "\"Select\""
     },
     "confirmationTitle": {
       "type": "string",
@@ -200,6 +248,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 +406,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 +479,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,
@@ -384,7 +519,7 @@ export class SqmRewardExchangeList {
       },
       "attribute": "query-error",
       "reflect": false,
-      "defaultValue": "\"Unable to load reward exchange list\""
+      "defaultValue": "\"Unable to load reward exchange list. Please try again\""
     },
     "redemptionError": {
       "type": "string",
@@ -428,12 +563,117 @@ 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"
+    },
+    "rewardNameTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Row Title",
+            "name": "uiName"
+          }],
+        "text": "Shown in the confirmation state."
+      },
+      "attribute": "reward-name-title",
+      "reflect": false,
+      "defaultValue": "\"Reward\""
+    },
+    "rewardAmountTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Amount Row Title",
+            "name": "uiName"
+          }],
+        "text": "Shown in the confirmation state."
+      },
+      "attribute": "reward-amount-title",
+      "reflect": false,
+      "defaultValue": "\"Reward Amount\""
+    },
+    "costTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Cost Row Title",
+            "name": "uiName"
+          }],
+        "text": "Shown in the confirmation state."
+      },
+      "attribute": "cost-title",
+      "reflect": false,
+      "defaultValue": "\"Cost to Redeem\""
+    },
     "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",
@@ -478,6 +718,7 @@ function useRewardExchangeListDemo(props) {
     },
     data: {
       shareCode: "SHARECODE123",
+      exchangeList: demoRewardExchange.data.exchangeList,
     },
     callbacks: {
       exchangeReward: () => { },
@@ -486,5 +727,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
@@ -82,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 = {
@@ -141,7 +151,8 @@ export function useRewardExchangeList(props) {
           ...selectedStep.rewardInput,
         };
     }
-    exchange({ exchangeRewardInput: exchangeVariables });
+    await exchange({ exchangeRewardInput: exchangeVariables });
+    refresh();
   }
   const resetState = (refresh) => {
     refresh && refetch();
@@ -158,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);
@@ -189,5 +198,8 @@ export function useRewardExchangeList(props) {
       resetState,
       copyFuelTankCode,
     },
+    refs: {
+      canvasRef,
+    },
   };
 }

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

@@ -0,0 +1,118 @@
+import { h } from "@stencil/core";
+import { GenericTableView } from "../../tables/GenericTableView";
+import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
+import scenario from "./rewards-table.feature";
+export default {
+  title: "Components/Rewards Table",
+  parameters: {
+    scenario,
+  },
+};
+const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null)))));
+const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } },
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
+      h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+        h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", "max-width": "100px" }),
+        h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+          h("sqm-text", { slot: "label" },
+            h("h3", null, "View your rewards")),
+          h("sqm-text", { slot: "content" }, "See all the rewards you have earned from referring friends and completing tasks")))))));
+const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: empty
+      ? "empty"
+      : loading
+        ? "loading"
+        : "rows",
+    namespace: "sqm-rewards-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: prev,
+      moreLabel: next,
+    },
+    hiddenColumns: hidden,
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: rows,
+    emptyElement: emptyElement,
+    loadingElement: loadingElement,
+  },
+});
+const r_available = [
+  h(RewardsCellCreditFull, null),
+  h(StatusCellAvailable, null),
+  h(SourceCellReferral, null),
+  h(DateCell, null),
+];
+const r_expired = [
+  h(RewardsCellCreditPartial, null),
+  h(StatusCellAvailableExpiry, null),
+  h(SourceCellReferred, null),
+  h(DateCell, null),
+];
+const r_cancelled = [
+  h(RewardsCellCreditCancelled, null),
+  h(StatusCellCancelled, null),
+  h(SourceCellDeletedUser, null),
+  h(DateCell, null),
+];
+const r_redeemed = [
+  h(RewardsCellCreditRedeemed, null),
+  h(StatusCellRedeemed, null),
+  h(SourceCellManual, null),
+  h(DateCell, null),
+];
+const r_long = [
+  h(RewardsCellCreditLong, null),
+  h(StatusCellAvailableExpiry, null),
+  h(SourceCellReferred, null),
+  h(DateCell, null),
+];
+export const RewardsTable = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired]))));
+};
+export const RewardsTableSingle = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available]))));
+};
+export const RewardsTableLong = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_redeemed, r_long]))));
+};
+export const RewardsTableEmpty = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTableProps([], true)));
+};
+export const RewardsTableLoading = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([], false, true))));
+};
+export const CustomButtonTextTable = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, "CUSTOM PREVIOUS TEXT", "CUSTOM NEXT TEXT"))));
+};
+export const ColumnsMobileHidden = () => {
+  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, undefined, undefined, "0,1,2,3"))));
+};