@saasquatch/mint-components 1.6.6 → 1.6.7-0

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -51,15 +51,15 @@ export function ProgramExplainerStepView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    :host{
-      display: block;
-    }
+  const vanillaStyle = `
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
   }`;
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),

package/dist/collection/components/sqm-referral-card/sqm-referral-card-view.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
+    "& p": { margin: "0" },
     display: "flex",
     color: "var(--sl-color-neutral-900)",
     background: "var(--sl-color-neutral-0)",
@@ -12,8 +13,6 @@ const style = {
       paddingRight: "var(--sl-spacing-medium)",
       "@media (max-width: 499px)": {
         width: "100%",
-        padding: "0",
-        marginBottom: "var(--sl-spacing-xx-large)",
       },
     },
     "& .right": {
@@ -23,7 +22,6 @@ const style = {
       paddingLeft: "var(--sl-spacing-medium)",
       "@media (max-width: 499px)": {
         width: "100%",
-        padding: "0",
       },
     },
     border: "1px solid var(--sl-color-neutral-300)",
@@ -36,17 +34,17 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
   `;
 export function ReferralCardView(props) {
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { class: sheet.classes.Container },
+    h("div", { part: "sqm-base", class: sheet.classes.Container },
       h("div", { class: "left", style: {
           alignSelf: props.verticalAlignment,
         } }, props.slots.left),

package/dist/collection/components/sqm-referral-iframe/useReferralIframe.js

@@ -1,13 +1,13 @@
 import { useProgramId, useUserIdentity, useQuery, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
-const GET_USER_DETAILS = gql `
-  query getUser($programId: ID) {
-    viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
+const GET_USER_DETAILS = gql `
+  query getUser($programId: ID) {
+    viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
 `;
 export function useReferralIframe(props) {
   var _a;

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -99,10 +99,10 @@ export class ReferralTableDateColumn {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"dateConverted\",\r\n\"dateReferralStarted\",\r\n\"dateFraudChecksCompleted\",\r\n\"dateModerated\",\r\n\"dateModified\",\r\n\"dateReferralEnded\",\r\n\"dateReferralPaid\",\r\n\"dateUserModified\"]",
+            "text": "[\"dateConverted\",\n\"dateReferralStarted\",\n\"dateFraudChecksCompleted\",\n\"dateModerated\",\n\"dateModified\",\n\"dateReferralEnded\",\n\"dateReferralPaid\",\n\"dateUserModified\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Date Converted\",\r\n\"Date Referral Started\",\r\n\"Date Fraud Checks Completed\",\r\n\"Date Moderated\",\r\n\"Date Modified\",\r\n\"Date Referral Ended\",\r\n\"Date Referral Paid\",\r\n\"Date User Modified\"]",
+            "text": "[\"Date Converted\",\n\"Date Referral Started\",\n\"Date Fraud Checks Completed\",\n\"Date Moderated\",\n\"Date Modified\",\n\"Date Referral Ended\",\n\"Date Referral Paid\",\n\"Date User Modified\"]",
             "name": "uiEnumNames"
           }],
         "text": ""

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -78,7 +78,7 @@ export class ReferralTable {
             "text": "programSelector",
             "name": "uiWidget"
           }],
-        "text": "Filters to only show referrals in this program. Will default to filtering by the program context where\r\nthis table lives. If no program ID is set or provided by context, then shows all referrals from all programs.\r\nIf program ID is \"classic\", shows classic-only referrals"
+        "text": "Filters to only show referrals in this program. Will default to filtering by the program context where\nthis table lives. If no program ID is set or provided by context, then shows all referrals from all programs.\nIf program ID is \"classic\", shows classic-only referrals"
       },
       "attribute": "program-id",
       "reflect": false
@@ -258,7 +258,7 @@ export class ReferralTable {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<GenericTableViewProps> & {\r\n    mockData?: { data: Referral[] };\r\n  }",
+        "original": "DemoData<GenericTableViewProps> & {\n    mockData?: { data: Referral[] };\n  }",
         "resolved": "Partial<Pick<GenericTableViewProps, \"states\" | \"data\" | \"elements\">> & { mockData?: { data: Referral[]; }; }",
         "references": {
           "DemoData": {

package/dist/collection/components/sqm-referral-table/useReferralTable.js

@@ -7,190 +7,190 @@ import { useChildElements } from "../../tables/useChildElements";
 import debugFn from "debug";
 const debug = debugFn("sq:useReferralTable");
 export const CSS_NAMESPACE = "sqm-referral-table";
-const GET_REFERRER_DATA = gql `
-  query getReferrals(
-    $programId: ID
-    $rewardFilter: RewardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        referredByReferral(programId: $programId) {
-          dateConverted
-          dateFraudChecksCompleted
-          dateModerated
-          dateModified
-          dateReferralEnded
-          dateReferralPaid
-          dateReferralStarted
-          dateUserModified
-          referrerUser {
-            firstName
-            lastName
-          }
-          rewards(filter: $rewardFilter) {
-            id
-            type
-            value
-            unit
-            name
-            dateGiven
-            dateExpires
-            dateCancelled
-            dateRedeemed
-            dateScheduledFor
-            fuelTankCode
-            fuelTankType
-            currency
-            prettyValue(locale: $locale)
-            statuses
-            globalRewardKey
-            programRewardKey
-            meta {
-              status
-              integration {
-                name
-              }
-              message
-              customMeta
-            }
-            rewardRedemptionTransactions {
-              data {
-                exchangedRewards {
-                  data {
-                    prettyValue(locale: $locale)
-                    type
-                    fuelTankCode
-                    globalRewardKey
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+const GET_REFERRER_DATA = gql `
+  query getReferrals(
+    $programId: ID
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        referredByReferral(programId: $programId) {
+          dateConverted
+          dateFraudChecksCompleted
+          dateModerated
+          dateModified
+          dateReferralEnded
+          dateReferralPaid
+          dateReferralStarted
+          dateUserModified
+          referrerUser {
+            firstName
+            lastName
+          }
+          rewards(filter: $rewardFilter) {
+            id
+            type
+            value
+            unit
+            name
+            dateGiven
+            dateExpires
+            dateCancelled
+            dateRedeemed
+            dateScheduledFor
+            fuelTankCode
+            fuelTankType
+            currency
+            prettyValue(locale: $locale)
+            statuses
+            globalRewardKey
+            programRewardKey
+            meta {
+              status
+              integration {
+                name
+              }
+              message
+              customMeta
+            }
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue(locale: $locale)
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 `;
-const GET_REFERRAL_DATA = gql `
-  query getReferrals(
-    $limit: Int!
-    $offset: Int!
-    $referralFilter: ReferralFilterInput
-    $rewardFilter: RewardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        id
-        paidReferrals: referrals(
-          filter: { dateReferralPaid_timeframe: "this_10_years" }
-          limit: 1
-        ) {
-          totalCount
-        }
-        referrals(limit: $limit, offset: $offset, filter: $referralFilter) {
-          totalCount
-          count
-          data {
-            id
-            referredUser {
-              id
-              accountId
-              firstName
-              lastName
-              email
-              programGoals {
-                goalId
-                programId
-                count
-                firstDate
-                lastDate
-                conversionCount
-              }
-            }
-            shareLinkUsed
-            referralCodeUsed
-            moderationStatus
-            dateConverted
-            dateFraudChecksCompleted
-            dateModerated
-            dateModified
-            dateReferralEnded
-            dateReferralPaid
-            dateReferralStarted
-            dateUserModified
-            programId
-            program {
-              id
-              name
-            }
-            rewards(filter: $rewardFilter) {
-              id
-              type
-              value
-              unit
-              name
-              dateGiven
-              dateExpires
-              dateCancelled
-              dateRedeemed
-              dateScheduledFor
-              fuelTankCode
-              fuelTankType
-              currency
-              prettyValue(locale: $locale)
-              pendingReasons
-              statuses
-              globalRewardKey
-              programRewardKey
-              meta {
-                status
-                integration {
-                  name
-                }
-                message
-                customMeta
-              }
-              rewardRedemptionTransactions {
-                data {
-                  exchangedRewards {
-                    data {
-                      prettyValue(locale: $locale)
-                      type
-                      fuelTankCode
-                      globalRewardKey
-                    }
-                  }
-                }
-              }
-            }
-            childNodes(limit: 10, offset: 0) {
-              data {
-                data {
-                  id
-                  ... on FlatReward {
-                    id
-                    statuses
-                    type
-                    value
-                  }
-                  ... on ProgramEmailTransaction {
-                    id
-                    rewardId
-                    dateCreated
-                    dateSent
-                    dateQueued
-                  }
-                }
-                depth
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+const GET_REFERRAL_DATA = gql `
+  query getReferrals(
+    $limit: Int!
+    $offset: Int!
+    $referralFilter: ReferralFilterInput
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        id
+        paidReferrals: referrals(
+          filter: { dateReferralPaid_timeframe: "this_10_years" }
+          limit: 1
+        ) {
+          totalCount
+        }
+        referrals(limit: $limit, offset: $offset, filter: $referralFilter) {
+          totalCount
+          count
+          data {
+            id
+            referredUser {
+              id
+              accountId
+              firstName
+              lastName
+              email
+              programGoals {
+                goalId
+                programId
+                count
+                firstDate
+                lastDate
+                conversionCount
+              }
+            }
+            shareLinkUsed
+            referralCodeUsed
+            moderationStatus
+            dateConverted
+            dateFraudChecksCompleted
+            dateModerated
+            dateModified
+            dateReferralEnded
+            dateReferralPaid
+            dateReferralStarted
+            dateUserModified
+            programId
+            program {
+              id
+              name
+            }
+            rewards(filter: $rewardFilter) {
+              id
+              type
+              value
+              unit
+              name
+              dateGiven
+              dateExpires
+              dateCancelled
+              dateRedeemed
+              dateScheduledFor
+              fuelTankCode
+              fuelTankType
+              currency
+              prettyValue(locale: $locale)
+              pendingReasons
+              statuses
+              globalRewardKey
+              programRewardKey
+              meta {
+                status
+                integration {
+                  name
+                }
+                message
+                customMeta
+              }
+              rewardRedemptionTransactions {
+                data {
+                  exchangedRewards {
+                    data {
+                      prettyValue(locale: $locale)
+                      type
+                      fuelTankCode
+                      globalRewardKey
+                    }
+                  }
+                }
+              }
+            }
+            childNodes(limit: 10, offset: 0) {
+              data {
+                data {
+                  id
+                  ... on FlatReward {
+                    id
+                    statuses
+                    type
+                    value
+                  }
+                  ... on ProgramEmailTransaction {
+                    id
+                    rewardId
+                    dateCreated
+                    dateSent
+                    dateQueued
+                  }
+                }
+                depth
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 `;
 export function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c;

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

@@ -3,14 +3,14 @@ import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
 import { gql } from "graphql-request";
 import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-const EXCHANGE = gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-      }
-    }
-  }
+const EXCHANGE = gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+      }
+    }
+  }
 `;
 export default {
   title: "Hooks / useRewardExchange",

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

@@ -2,7 +2,7 @@ import { getAssetPath, h } from "@stencil/core";
 import { intl } from "../../global/global";
 import { HostBlock } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
-import { ShareLinkView } from "../sqm-share-link/sqm-share-link-view";
+import { CopyTextView } from "../views/copy-text-view";
 import { ProgressBar } from "./progressBar";
 import { CheckmarkFilled, Gift } from "./SVGs";
 const style = {
@@ -538,7 +538,7 @@ export function RewardExchangeView(props) {
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }

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

@@ -2,58 +2,58 @@ import { useUserIdentity, useQuery, useMutation, useRefreshDispatcher, } from "@
 import { gql } from "graphql-request";
 import { useEffect, useReducer, useRef, useState, } from "@saasquatch/universal-hooks";
 import confetti from "canvas-confetti";
-const GET_EXCHANGE_LIST = gql `
-  query getExchangeList {
-    viewer {
-      ... on User {
-        visibleRewardExchangeItems(limit: 20, offset: 0) {
-          data {
-            key
-            name
-            description
-            imageUrl
-            available
-            unavailableReasonCode
-            ruleType
-            sourceUnit
-            sourceValue
-            prettySourceValue
-            sourceMinValue
-            prettySourceMinValue
-            sourceMaxValue
-            prettySourceMaxValue
-            destinationMinValue
-            prettyDestinationMinValue
-            destinationMaxValue
-            prettyDestinationMaxValue
-            globalRewardKey
-            destinationUnit
-            steps {
-              sourceValue
-              prettySourceValue
-              destinationValue
-              prettyDestinationValue
-              available
-              globalRewardKey
-              unavailableReasonCode
-              rewardInput
-            }
-          }
-          totalCount
-        }
-      }
-    }
-  }
+const GET_EXCHANGE_LIST = gql `
+  query getExchangeList {
+    viewer {
+      ... on User {
+        visibleRewardExchangeItems(limit: 20, offset: 0) {
+          data {
+            key
+            name
+            description
+            imageUrl
+            available
+            unavailableReasonCode
+            ruleType
+            sourceUnit
+            sourceValue
+            prettySourceValue
+            sourceMinValue
+            prettySourceMinValue
+            sourceMaxValue
+            prettySourceMaxValue
+            destinationMinValue
+            prettyDestinationMinValue
+            destinationMaxValue
+            prettyDestinationMaxValue
+            globalRewardKey
+            destinationUnit
+            steps {
+              sourceValue
+              prettySourceValue
+              destinationValue
+              prettyDestinationValue
+              available
+              globalRewardKey
+              unavailableReasonCode
+              rewardInput
+            }
+          }
+          totalCount
+        }
+      }
+    }
+  }
 `;
-const EXCHANGE = gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-        fuelTankCode
-      }
-    }
-  }
+const EXCHANGE = gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+        fuelTankCode
+      }
+    }
+  }
 `;
 export function useRewardExchangeList(props) {
   var _a, _b, _c, _d, _e;

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

@@ -147,11 +147,11 @@ export class RewardTableRewardsCell {
         return (h("div", null,
           h("style", { type: "text/css" }, styleString),
           h("div", { class: sheet.classes.Container },
-            h("span", null, pimpedPrettyValue + " "),
+            h("span", { part: "sqm-rewards-cell-value" }, pimpedPrettyValue + " "),
             h("br", null),
             " ",
-            h("div", { class: sheet.classes.Progress }),
-            h("span", { class: sheet.classes.Subtext }, progressBarSubtext))));
+            h("div", { part: "sqm-rewards-cell-progress-bar", class: sheet.classes.Progress }),
+            h("span", { part: "sqm-rewards-cell-subtext", class: sheet.classes.Subtext }, progressBarSubtext))));
       }
       return h("div", null, pimpedPrettyValue);
     };