@saasquatch/mint-components 2.1.8-2 → 2.1.9-0

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

@@ -0,0 +1,232 @@
+import { useLocale, useMutation, useQuery, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../tax-and-cash/eventKeys";
+// new field under impactConnection:{ resolvedByEmail: boolean } - determines if connection came from managed identity
+export const GET_USER_PARTNER_INFO = gql `
+  query getUserPartnerInfo {
+    user: viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+        customFields
+        impactConnection {
+          connected
+          publisher {
+            phoneNumber
+            phoneNumberCountryCode
+            countryCode
+            currency
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+            withdrawalSettings {
+              paymentMethod
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export const GET_COUNTRIES = gql `
+  query getCountries {
+    impactPayoutCountries(limit: 1000) {
+      data {
+        countryCode
+        displayName
+      }
+    }
+  }
+`;
+export const GET_CURRENCIES = gql `
+  query currencies($locale: RSLocale) {
+    currencies(limit: 300) {
+      data {
+        displayName(locale: $locale)
+        currencyCode
+      }
+    }
+  }
+`;
+export const CONNECT_PARTNER = gql `
+  mutation createImpactConnection($vars: ImpactConnectionInput!) {
+    createImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_BRAND_NAME = gql `
+  query getTenantSettings {
+    tenantSettings {
+      companyName
+    }
+  }
+`;
+export function usePartnerInfoModal(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const locale = useLocale();
+  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, {});
+  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = useMutation(CONNECT_PARTNER);
+  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) || "");
+  console.log(countryCode, currency, "initial country and currency state"); // TEMP
+  const [countrySearch, setCountrySearch] = useState("");
+  const [currencySearch, setCurrencySearch] = useState("");
+  const [filteredCountries, setFilteredCountries] = useState(((_e = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _e === void 0 ? void 0 : _e.data) || []);
+  const [filteredCurrencies, setFilteredCurrencies] = useState(((_f = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _f === void 0 ? void 0 : _f.data) || []);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const countries = ((_g = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _g === void 0 ? void 0 : _g.data) || [];
+  const currencies = ((_h = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _h === void 0 ? void 0 : _h.data) || [];
+  console.log(user, "user data from partner info query"); // TEMP
+  useEffect(() => {
+    var _a;
+    if (userData && ((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher)) {
+      setCountryCode(user.impactConnection.publisher.countryCode);
+      setCurrency(user.impactConnection.publisher.currency);
+    }
+  }, [userData]);
+  useEffect(() => {
+    if (!(countries === null || countries === void 0 ? void 0 : countries.length))
+      return;
+    if (countrySearch.trim() === "") {
+      setFilteredCountries(countries || []);
+    }
+    else {
+      setFilteredCountries(countries.filter((c) => c.displayName.toLowerCase().includes(countrySearch.toLowerCase())) || []);
+    }
+  }, [countrySearch, countries]);
+  useEffect(() => {
+    if (!(currencies === null || currencies === void 0 ? void 0 : currencies.length))
+      return;
+    if (currencySearch.trim() === "") {
+      setFilteredCurrencies(currencies || []);
+    }
+    else {
+      setFilteredCurrencies(currencies.filter((c) => c.currencyCode.toLowerCase().includes(currencySearch.toLowerCase())) || []);
+    }
+  }, [currencySearch, currencies]);
+  const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
+  function onCountryChange(e) {
+    var _a, _b;
+    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+    if (!value)
+      return;
+    setCountryCode(value);
+    setCurrency("");
+    setError("");
+  }
+  function onCurrencyChange(e) {
+    var _a, _b;
+    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+    if (!value)
+      return;
+    setCurrency(value);
+    setError("");
+  }
+  async function onSubmit() {
+    var _a, _b;
+    if (!countryCode || !currency) {
+      setError(props.missingFieldsErrorText);
+      return;
+    }
+    setError("");
+    try {
+      const vars = {
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+        firstName: user.firstName,
+        lastName: user.lastName,
+        // phoneNumber: null,
+        // phoneNumberCountryCode: null,
+        countryCode,
+        currency,
+      };
+      const result = await connectImpactPartner({ vars });
+      if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message)) {
+        setError(props.networkErrorText);
+        return;
+      }
+      const connectionResult = result
+        .createImpactConnection;
+      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);
+        console.error("Failed to create Impact connection:", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
+        return;
+      }
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
+      await refetch();
+      setSuccess(true);
+    }
+    catch (e) {
+      console.error("Partner creation error:", e);
+      setError(props.networkErrorText);
+    }
+  }
+  console.log(success, "success state in partner info modal");
+  const showModal = !success &&
+    !userLoading &&
+    (!(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected) || !(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher));
+  console.log(showModal, "showModal condition in partner info modal"); // TEMP
+  return {
+    states: {
+      open: showModal,
+      loading: userLoading || countriesLoading || currenciesLoading,
+      submitting: connectLoading,
+      isExistingPartner: (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected) || (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher),
+      countryCode,
+      currency,
+      error,
+      success,
+      brandName: ((_j = tenantSettingsData === null || tenantSettingsData === void 0 ? void 0 : tenantSettingsData.tenantSettings) === null || _j === void 0 ? void 0 : _j.companyName) || "",
+      filteredCountries: filteredCountries || [],
+      filteredCurrencies: filteredCurrencies || [],
+    },
+    callbacks: {
+      onCountryChange,
+      onCurrencyChange,
+      setCurrencySearch,
+      setCountrySearch,
+      onSubmit,
+      onClose: () => {
+        window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
+        setSuccess(true);
+      },
+    },
+    text: props.getTextProps(),
+  };
+}

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

@@ -16,7 +16,6 @@ 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}?${encodeURIComponent(content.codeParam)}=${data.shareCode}` })));
+    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }

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

@@ -22,11 +22,6 @@ 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() { }
@@ -113,33 +108,12 @@ 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; codeParam: string; }; }; data?: { shareCode: string; }; }",
+        "resolved": "{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -107,6 +107,7 @@ import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.s
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
 import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
+import * as PartnerInfoModal from "../sqm-partner-info-modal/PartnerInfoModal.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -218,6 +219,7 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable,
+  PartnerInfoModal,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js

@@ -128,6 +128,9 @@ export class WidgetVerification {
       : useWidgetVerification();
     if (props.loading)
       return h("sl-spinner", null);
+    if (props.showPartnerModal) {
+      return h("sqm-partner-info-modal", null);
+    }
     const generalText = this.getStepTextProps("general_");
     return (h("div", null,
       h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader),
@@ -571,5 +574,5 @@ function useDemoWidgetVerificationInternal(props) {
   const onVerification = () => {
     setContext(true);
   };
-  return deepmerge({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
+  return deepmerge({ showCode, showPartnerModal: false, onVerification, onPartnerModalComplete: () => { }, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-widget-verification/useWidgetVerification.js

@@ -3,6 +3,7 @@ import { useState } from "@saasquatch/stencil-hooks";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../tax-and-cash/eventKeys";
 const USER_LOOKUP = gql `
   query checkUserVerification {
     viewer {
@@ -31,6 +32,7 @@ export function useWidgetVerification() {
   });
   const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   const [loading, setLoading] = useState(true);
+  const [showPartnerModal, setShowPartnerModal] = useState(false);
   const [fetch] = useLazyQuery(USER_LOOKUP);
   useEffect(() => {
     const checkUser = async () => {
@@ -54,7 +56,19 @@ export function useWidgetVerification() {
     checkUser();
   }, []);
   const onVerification = () => {
+    setShowPartnerModal(true);
+  };
+  const onPartnerModalComplete = () => {
+    setShowPartnerModal(false);
     setContext(true);
   };
-  return { showCode, onVerification, loading };
+  // Listen for partner modal completion (fires on successful createImpactConnection or confirm)
+  useEffect(() => {
+    if (!showPartnerModal)
+      return;
+    const handler = () => onPartnerModalComplete();
+    window.addEventListener(TAX_FORM_UPDATED_EVENT_KEY, handler);
+    return () => window.removeEventListener(TAX_FORM_UPDATED_EVENT_KEY, handler);
+  }, [showPartnerModal]);
+  return { showCode, showPartnerModal, onVerification, onPartnerModalComplete, loading };
 }