@saasquatch/mint-components 2.2.0-0 → 2.2.0-10

package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal.js

@@ -11,15 +11,10 @@ import { usePartnerInfoModal, } from "./usePartnerInfoModal";
  * @exampleGroup Tax and Cash
  * @validParents ["sqm-portal-container", "sqm-portal-frame", "div", "sqm-divided-layout", "sqb-program-section", "sqb-conditional-section"]
  * @example Partner Info Modal - <sqm-partner-info-modal></sqm-partner-info-modal>
+ * @hidden
  */
 export class PartnerInfoModal {
   constructor() {
-    /**
-     * Brand name shown in the modal header
-     *
-     * @uiName Brand name
-     */
-    this.brandName = "";
     /**
      * Header text when user has no existing partner
      *
@@ -54,7 +49,13 @@ export class PartnerInfoModal {
      * @uiName Existing partner support description
      * @uiWidget textArea
      */
-    this.supportDescriptionExistingPartner = "If this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    this.supportDescriptionExistingPartner = "If this is a mistake, please contact {supportLink} or sign up for this referral program with a different email.";
+    /**
+     * Support description for existing partner confirmation
+     *
+     * @uiName Existing partner support description
+     */
+    this.supportLink = "Support";
     /**
      * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
      * @uiName Terms and conditions checkbox
@@ -104,7 +105,7 @@ export class PartnerInfoModal {
      * @uiName Missing fields error text
      * @uiWidget textArea
      */
-    this.missingFieldsErrorText = "Please select both a country and currency.";
+    this.missingFieldsErrorText = "Please fill out all fields.";
     /**
      * Used to render in another modal.
      * @undocumented
@@ -112,11 +113,11 @@ export class PartnerInfoModal {
     this.inModal = false;
     /**
      * @undocumented
+     * @componentState { "title": "Connected (hidden)", "default": true, "props": { "states": { "open": false } } }
      * @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
      * @componentState { "title": "Existing partner", "props": { "states": { "open": true, "isExistingPartner": true, "countryCode": "US", "currency": "USD" } } }
-     * @componentState { "title": "Connected (hidden)", "props": { "states": { "open": false } } }
      */
-    this.stateController = "{}";
+    this.stateController = '{"sqm-partner-info-modal":{"states":{"open":false}}}';
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -135,27 +136,6 @@ export class PartnerInfoModal {
   static get is() { return "sqm-partner-info-modal"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "brandName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Brand name",
-            "name": "uiName"
-          }],
-        "text": "Brand name shown in the modal header"
-      },
-      "attribute": "brand-name",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
     "modalHeader": {
       "type": "string",
       "mutable": false,
@@ -274,7 +254,28 @@ export class PartnerInfoModal {
       },
       "attribute": "support-description-existing-partner",
       "reflect": false,
-      "defaultValue": "\"If this is a mistake, please contact Support or sign up for this referral program with a different email.\""
+      "defaultValue": "\"If this is a mistake, please contact {supportLink} or sign up for this referral program with a different email.\""
+    },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Existing partner support description",
+            "name": "uiName"
+          }],
+        "text": "Support description for existing partner confirmation"
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"Support\""
     },
     "allowBankingCollection": {
       "type": "string",
@@ -514,7 +515,7 @@ export class PartnerInfoModal {
       },
       "attribute": "missing-fields-error-text",
       "reflect": false,
-      "defaultValue": "\"Please select both a country and currency.\""
+      "defaultValue": "\"Please fill out all fields.\""
     },
     "inModal": {
       "type": "boolean",
@@ -552,27 +553,27 @@ export class PartnerInfoModal {
             "text": undefined,
             "name": "undocumented"
           }, {
-            "text": "{ \"title\": \"New partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": false } } }",
+            "text": "{ \"title\": \"Connected (hidden)\", \"default\": true, \"props\": { \"states\": { \"open\": false } } }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Existing partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": true, \"countryCode\": \"US\", \"currency\": \"USD\" } } }",
+            "text": "{ \"title\": \"New partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": false } } }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Connected (hidden)\", \"props\": { \"states\": { \"open\": false } } }",
+            "text": "{ \"title\": \"Existing partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": true, \"countryCode\": \"US\", \"currency\": \"USD\" } } }",
             "name": "componentState"
           }],
         "text": ""
       },
       "attribute": "state-controller",
       "reflect": false,
-      "defaultValue": "\"{}\""
+      "defaultValue": "'{\"sqm-partner-info-modal\":{\"states\":{\"open\":false}}}'"
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PartnerInfoModalResult>",
-        "resolved": "{ states?: { open: boolean; loading: boolean; submitting: boolean; isExistingPartner: boolean; countryCode: string; currency: string; error: string; success: boolean; brandName: string; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; allowBankingCollection: boolean; checkboxError: string; disabled: boolean; }; }",
+        "resolved": "{ states?: { open: boolean; loading: boolean; submitting: boolean; isExistingPartner: boolean; countryCode: string; currency: string; error: string; success: boolean; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; allowBankingCollection: boolean; disabled: boolean; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -609,7 +610,6 @@ function useDemoPartnerInfoModal(props) {
   // @ts-ignore
   return deepmerge({
     states: {
-      brandName: "Test Brand",
       open: false,
       loading: false,
       submitting: false,
@@ -621,7 +621,6 @@ function useDemoPartnerInfoModal(props) {
       filteredCountries: [],
       filteredCurrencies: [],
       allowBankingCollection,
-      checkboxError: "",
       disabled: false,
     },
     callbacks: {
@@ -664,6 +663,7 @@ function useDemoPartnerInfoModal(props) {
       searchCountryPlaceholder: props.searchCountryPlaceholder,
       searchCurrencyPlaceholder: props.searchCurrencyPlaceholder,
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
+      supportLink: props.supportLink,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
   }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });

package/dist/collection/components/sqm-partner-info-modal/usePartnerInfoModal.js

@@ -2,9 +2,8 @@ import { useLocale, useMutation, useQuery, useSetParent, } from "@saasquatch/com
 import { useEffect, useMemo, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { TAX_FORM_UPDATED_EVENT_KEY } from "../tax-and-cash/eventKeys";
-import { VERIFICATION_PARENT_NAMESPACE } from "../sqm-widget-verification/keys";
+import { PARTNER_CREATED_NAMESPACE } from "../sqm-widget-verification/keys";
 import { GET_FINANCE_NETWORK_SETTINGS, } from "../tax-and-cash/data";
-// new field under impactConnection:{ resolvedByEmail: boolean } - determines if connection came from managed identity
 export const GET_USER_PARTNER_INFO = gql `
   query getUserPartnerInfo {
     user: viewer {
@@ -101,51 +100,47 @@ const START_IMPACT_CONNECTION = gql `
     }
   }
 `;
-const GET_BRAND_NAME = gql `
-  query getTenantSettings {
-    tenantSettings {
-      companyName
-    }
-  }
-`;
 export function usePartnerInfoModal(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const locale = useLocale();
-  const setVerificationContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
+  const setPartnerCreated = useSetParent(PARTNER_CREATED_NAMESPACE);
   const { data: userData, loading: userLoading, refetch, } = useQuery(GET_USER_PARTNER_INFO, {});
   const user = userData === null || userData === void 0 ? void 0 : userData.user;
   const { data: currenciesData, loading: currenciesLoading } = useQuery(GET_CURRENCIES, { variables: { locale } });
   const { data: countriesData, loading: countriesLoading } = useQuery(GET_COUNTRIES, {});
-  const { data: tenantSettingsData } = useQuery(GET_BRAND_NAME, {});
+  // No pre-filled country, use locale to determine countryCode instead
+  const [countryCode, setCountryCode] = useState(((_b = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.countryCode) || locale.replace(/^.*_/, ""));
+  const [currency, setCurrency] = useState(((_d = (_c = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher) === null || _d === void 0 ? void 0 : _d.currency) || "");
   const { data: financeNetworkData } = useQuery(GET_FINANCE_NETWORK_SETTINGS, {
-    variables: { filter: {} },
+    variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
   });
-  const [startImpactConnection, { loading: connectLoading, errors: connectErrors },] = useMutation(START_IMPACT_CONNECTION);
+  const [startImpactConnection, { loading: connectLoading }] = useMutation(START_IMPACT_CONNECTION);
   const [allowBankingCollection, setAllowBankingCollection] = useState(false);
-  const [checkboxError, setCheckboxError] = useState("");
-  // No pre-filled country, use locale to determine countryCode instead
-  const [countryCode, setCountryCode] = useState(((_b = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.countryCode) || "");
-  const [currency, setCurrency] = useState(((_d = (_c = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher) === null || _d === void 0 ? void 0 : _d.currency) || "");
   const countries = ((_e = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _e === void 0 ? void 0 : _e.data) || [];
-  // copied from useTaxAndCash for displaying currencies based on country - could be in helper?
-  const currencies = useMemo(() => {
-    var _a, _b;
-    const allValidCurrencies = (_b = (_a = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.reduce((agg, settings) => {
+  const isExistingPartner = !!((_f = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _f === void 0 ? void 0 : _f.publisher);
+  const _currencies = useMemo(() => {
+    var _a, _b, _c;
+    // if isExistingPartner, grab all currencies since select is disabled anyways
+    if (isExistingPartner) {
+      return ((_a = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _a === void 0 ? void 0 : _a.data) || [];
+    }
+    const allValidCurrencies = (_c = (_b = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.reduce((agg, settings) => {
       var _a, _b;
-      const currency = (_b = (_a = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.find((c) => c.currencyCode === settings.currency);
-      if (!currency)
+      if (countryCode && settings.countryCode !== countryCode)
         return agg;
-      if (agg.find((c) => c.currencyCode === settings.currency))
+      const c = (_b = (_a = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.find((cur) => cur.currencyCode === settings.currency);
+      if (!c)
         return agg;
-      if (countryCode && settings.countryCode !== countryCode)
+      if (agg.find((cur) => cur.currencyCode === settings.currency))
         return agg;
-      return [...agg, currency];
+      return [...agg, c];
     }, []);
-    return (allValidCurrencies || []).sort((a, b) => a.displayName.localeCompare(b.displayName));
-  }, [financeNetworkData, currenciesData, countryCode]);
+    return allValidCurrencies || [];
+  }, [financeNetworkData, currenciesData, countryCode, isExistingPartner]);
+  const currencies = useMemo(() => [..._currencies].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
   const [countrySearch, setCountrySearch] = useState("");
   const [currencySearch, setCurrencySearch] = useState("");
-  const [filteredCountries, setFilteredCountries] = useState(((_f = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _f === void 0 ? void 0 : _f.data) || []);
+  const [filteredCountries, setFilteredCountries] = useState(((_g = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _g === void 0 ? void 0 : _g.data) || []);
   const [filteredCurrencies, setFilteredCurrencies] = useState(currencies || []);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
@@ -198,13 +193,11 @@ export function usePartnerInfoModal(props) {
   function onCheckboxChange(e) {
     const checked = e.target.checked;
     setAllowBankingCollection(checked);
-    if (checked)
-      setCheckboxError("");
   }
   async function onSubmit() {
     var _a, _b;
     if (!allowBankingCollection) {
-      setCheckboxError(props.missingFieldsErrorText);
+      setError(props.missingFieldsErrorText);
       return;
     }
     if (!countryCode || !currency) {
@@ -212,7 +205,10 @@ export function usePartnerInfoModal(props) {
       return;
     }
     setError("");
-    setCheckboxError("");
+    if (!user) {
+      setError(props.networkErrorText);
+      return;
+    }
     try {
       const vars = {
         user: {
@@ -221,8 +217,6 @@ export function usePartnerInfoModal(props) {
         },
         firstName: user.firstName,
         lastName: user.lastName,
-        // phoneNumber: null,
-        // phoneNumberCountryCode: null,
         countryCode,
         currency,
       };
@@ -233,7 +227,6 @@ export function usePartnerInfoModal(props) {
       }
       const connectionResult = result
         .startImpactConnection;
-      console.log(result, connectionResult, "result and connectionResult from creating partner from modal");
       if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.success)) {
         const validationMsg = (_b = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors) === null || _b === void 0 ? void 0 : _b.map((e) => e.message).join(". ");
         setError(validationMsg || props.networkErrorText);
@@ -242,14 +235,15 @@ export function usePartnerInfoModal(props) {
       }
       window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
+      setPartnerCreated === null || setPartnerCreated === void 0 ? void 0 : setPartnerCreated(true);
       setSuccess(true);
-      setVerificationContext(true);
     }
     catch (e) {
       console.error("Partner creation error:", e);
       setError(props.networkErrorText);
     }
   }
+  console.log(impactConnection, "impactConnection in partner modal");
   const showModal = !success &&
     !userLoading &&
     (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connectionStatus) === "NOT_STARTED";
@@ -258,16 +252,14 @@ export function usePartnerInfoModal(props) {
       open: showModal,
       loading: userLoading || countriesLoading || currenciesLoading,
       submitting: connectLoading,
-      isExistingPartner: impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher,
+      isExistingPartner,
       countryCode,
       currency,
       error,
       success,
-      brandName: ((_g = tenantSettingsData === null || tenantSettingsData === void 0 ? void 0 : tenantSettingsData.tenantSettings) === null || _g === void 0 ? void 0 : _g.companyName) || "",
       filteredCountries: filteredCountries || [],
       filteredCurrencies: filteredCurrencies || [],
       allowBankingCollection,
-      checkboxError,
       disabled: userLoading || connectLoading,
     },
     callbacks: {

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
@@ -24,10 +24,9 @@ export function PortalContainerView(props, children) {
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h(Host, null,
-    h("div", { class: sheet.classes.Container, part: "sqm-base" },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString),
-      children)));
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
 }

package/dist/collection/components/sqm-portal-google-login/sqm-portal-google-login.js

@@ -87,7 +87,7 @@ export class PortalGoogleLogin {
     const styleString = sheet.toString();
     const content = {
       forgotPasswordButton: (h("slot", { name: "forgotPassword" },
-        h("a", { onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+        h("a", { part: "forgot-password-link", onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: (h("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })),
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -79,7 +79,7 @@ export class PortalLogin {
     const styleString = sheet.toString();
     const content = {
       forgotPasswordButton: (h("slot", { name: "forgotPassword" },
-        h("a", { onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+        h("a", { part: "forgot-password-link", onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),

package/dist/collection/components/sqm-referral-iframe/ReferralIframe.stories.js

@@ -16,6 +16,7 @@ const props = {
       iframeSrc: "https://example.com",
       iframeHeight: "100%",
       iframeWidth: "100%",
+      codeParam: "rsCode",
     },
   },
 };

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

@@ -25,5 +25,5 @@ export function ReferralIframeView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
+    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?${encodeURIComponent(content.codeParam)}=${data.shareCode}` })));
 }

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

@@ -22,6 +22,11 @@ export class SqmReferralIframe {
      * @uiName IFrame width
      */
     this.iframeWidth = "100%";
+    /**
+     * Override the default parameter name used in the iframe
+     * @uiName Referral code parameter name
+     */
+    this.codeParam = "rsCode";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -108,12 +113,33 @@ export class SqmReferralIframe {
       "reflect": false,
       "defaultValue": "\"100%\""
     },
+    "codeParam": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Referral code parameter name",
+            "name": "uiName"
+          }],
+        "text": "Override the default parameter name used in the iframe"
+      },
+      "attribute": "code-param",
+      "reflect": false,
+      "defaultValue": "\"rsCode\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralIframeViewProps>",
-        "resolved": "{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }",
+        "resolved": "{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; codeParam: string; }; }; data?: { shareCode: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -59,6 +59,7 @@ const baseReward = {
       },
     ],
   },
+  rewardedCash: false,
 };
 // Reward Status Cases
 const pendingReward = {

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

@@ -82,6 +82,7 @@ const cashPayoutSentReward = {
   statuses: ["AVAILABLE"],
   globalRewardKey: "Key",
   rewardRedemptionTransactions: null,
+  rewardedCash: true,
 };
 const nullExpiresIn = {
   dateExpires: null,