@saasquatch/mint-components 1.5.0-0 → 1.5.0-4

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

@@ -18,7 +18,60 @@ 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 = "Choose reward";
+    /**
+     * @uiName Choose Amount Progress Title
+     */
+    this.chooseAmountTitle = "Amount";
+    /**
+     * @uiName Confirmation Progress Title
+     */
+    this.confirmationTitle = "Confirm";
+    /**
+     * @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";
+    this.redemptionSuccessText = "Successfully redeemed {sourceValue} for {destinationValue}";
+    /**
+     * @uiName Done Text
+     */
+    this.doneText = "Done";
+    /**
+     * @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";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -82,14 +135,305 @@ 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": "\"Choose reward\""
+    },
+    "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": "\"Amount\""
+    },
+    "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\""
+    },
+    "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": ""
+      },
+      "attribute": "redemption-success-text",
+      "reflect": false,
+      "defaultValue": "\"Successfully redeemed {sourceValue} for {destinationValue}\""
+    },
+    "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\""
+    },
+    "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\""
     },
     "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 +473,7 @@ function useRewardExchangeListDemo(props) {
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
+      queryError: false,
       loading: false,
     },
     data: {
@@ -139,6 +484,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,7 @@
 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";
+// TODO: add rewardInput once it works
 const GET_EXCHANGE_LIST = gql `
   query getExchangeList {
     viewer {
@@ -34,6 +35,7 @@ const GET_EXCHANGE_LIST = gql `
               destinationValue
               prettyDestinationValue
               available
+              globalRewardKey
               unavailableReasonCode
             }
           }
@@ -65,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) {
@@ -96,6 +99,16 @@ export function useRewardExchangeList(props) {
           globalRewardKey: selectedItem.globalRewardKey,
         };
         break;
+      case "STEPPED_FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedStep.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedStep.globalRewardKey,
+        };
+        break;
       case "VARIABLE_GLOBAL_REWARD":
         exchangeVariables = {
           ...exchangeVariables,
@@ -148,6 +161,14 @@ export function useRewardExchangeList(props) {
   function setStage(stage) {
     setExchangeState({ redeemStage: stage });
   }
+  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);
+  }
   return {
     states: {
       content: {
@@ -158,7 +179,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,
@@ -169,6 +192,7 @@ export function useRewardExchangeList(props) {
       setExchangeState,
       setStage,
       resetState,
+      copyFuelTankCode,
     },
   };
 }

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

@@ -109,7 +109,6 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     rewardsData && getComponentData(components);
   }, [rewardsData, components, tick]);
   const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
-  console.log(states.loading, content.loading, rewardsData);
   const show = 
   // 1 - Loading if loading
   states.loading || content.loading

package/dist/collection/components/sqm-share-code/useShareCode.js

@@ -1,4 +1,4 @@
-import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 const MessageLinkQuery = gql `
@@ -10,11 +10,18 @@ const MessageLinkQuery = gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 export function useShareCode(props) {
   var _a, _b;
   const programId = useProgramId();
   const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -25,6 +32,18 @@ export function useShareCode(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }

package/dist/collection/components/sqm-share-link/useShareLink.js

@@ -1,4 +1,4 @@
-import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 const MessageLinkQuery = gql `
@@ -10,11 +10,18 @@ const MessageLinkQuery = gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 export function useShareLink(props) {
   var _a, _b;
   const { programId = useProgramId() } = props;
   const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -25,6 +32,18 @@ export function useShareLink(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }

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

@@ -1,8 +1,38 @@
 import chroma from "chroma-js";
+/**
+ * Generated a Shoelace color scale css string from a base color
+ *
+ * @param color
+ * @param name
+ * @returns
+ */
 export function autoColorScaleCss(color, name = "primary") {
   if (!chroma.valid(color)) {
-    return;
+    return "";
   }
+  const { scale, colorScale } = makeColorScale(color);
+  return scale
+    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
+    .join("\n");
+}
+/**
+ * Generate a Shoelace color scale style objects from a base color
+ *
+ * @param color
+ * @param name
+ * @returns
+ */
+export function autoColorScaleStyleObject(color, name = "primary") {
+  if (!chroma.valid(color)) {
+    return {};
+  }
+  const { scale, colorScale } = makeColorScale(color);
+  return scale.reduce((agg, color, index) => ({
+    ...agg,
+    [`--sl-color-${name}-${colorScale[index]}`]: `${chroma(color).hex()};`,
+  }), { color: "blue", "--sl-color-primary-50": "#eaffea;" });
+}
+function makeColorScale(color) {
   const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
   const hex = chroma(color).hex();
   const scale = chroma
@@ -20,7 +50,5 @@ export function autoColorScaleCss(color, name = "primary") {
     chroma(hex).luminance(0.02),
   ])
     .colors(colorScale.length);
-  return scale
-    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
-    .join("\n");
+  return { scale, colorScale };
 }

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

@@ -36,3 +36,17 @@ export const NYTimes = `
     --sl-font-sans: Georgia, 'Times New Roman', serif;
 }
 `;
+export const Klip = `
+:root{
+	--sl-color-primary-50: #E8E5F8;
+    --sl-color-primary-100: #C6BEED;
+    --sl-color-primary-200: #A192E2;
+    --sl-color-primary-300: #7B66D6;
+    --sl-color-primary-400: #5E46CD;
+    --sl-color-primary-500: #4225C4;
+    --sl-color-primary-600: #3C21BE;
+    --sl-color-primary-700: #331BB6;
+    --sl-color-primary-800: #2B16AF;
+    --sl-color-primary-900: #1D0DA2;
+}
+`;

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

@@ -45,6 +45,9 @@ import * as Hero from "../sqm-hero/Hero.stories";
 import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -95,6 +98,9 @@ const stories = [
   UseRewardExchangeList,
   UseTaskCard,
   UseRewardsTable,
+  ProgramExplainer,
+  ProgramExplainerStep,
+  BrandStories
 ];
 /**
  * For internal documentation