@saasquatch/mint-components 2.1.9-2 → 2.1.9-21

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

@@ -1,7 +1,9 @@
-import { useLocale, useMutation, useQuery, } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { useLocale, useMutation, useQuery, useSetParent, } from "@saasquatch/component-boilerplate";
+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 { 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 {
@@ -16,19 +18,11 @@ export const GET_USER_PARTNER_INFO = gql `
         customFields
         impactConnection {
           connected
+          connectionStatus
           publisher {
-            phoneNumber
-            phoneNumberCountryCode
+            id
             countryCode
             currency
-            requiredTaxDocumentType
-            currentTaxDocument {
-              type
-              status
-            }
-            withdrawalSettings {
-              paymentMethod
-            }
           }
         }
       }
@@ -81,6 +75,32 @@ export const CONNECT_PARTNER = gql `
     }
   }
 `;
+const START_IMPACT_CONNECTION = gql `
+  mutation startImpactConnection($vars: ImpactConnectionInput!) {
+    startImpactConnection(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 {
@@ -89,33 +109,56 @@ const GET_BRAND_NAME = gql `
   }
 `;
 export function usePartnerInfoModal(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g;
   const locale = useLocale();
+  const setVerificationContext = useSetParent(VERIFICATION_PARENT_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, {});
-  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 { data: financeNetworkData } = useQuery(GET_FINANCE_NETWORK_SETTINGS, {
+    variables: { filter: {} },
+  });
+  const [startImpactConnection, { loading: connectLoading, errors: connectErrors },] = 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) ||
+    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) || "");
-  console.log(countryCode, currency, "initial country and currency state"); // TEMP
+  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) => {
+      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)
+        return agg;
+      if (agg.find((c) => c.currencyCode === settings.currency))
+        return agg;
+      if (countryCode && settings.countryCode !== countryCode)
+        return agg;
+      return [...agg, currency];
+    }, []);
+    return (allValidCurrencies || []).sort((a, b) => a.displayName.localeCompare(b.displayName));
+  }, [financeNetworkData, currenciesData, countryCode]);
   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 [filteredCountries, setFilteredCountries] = useState(((_f = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _f === void 0 ? void 0 : _f.data) || []);
+  const [filteredCurrencies, setFilteredCurrencies] = useState(currencies || []);
+  console.log(userData, "userData partner info modal");
   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]);
+    const publisher = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
+    if (!userData || !publisher)
+      return;
+    setCountryCode(publisher.countryCode);
+    setCurrency(publisher.currency);
+  }, [userData, user]);
   useEffect(() => {
     if (!(countries === null || countries === void 0 ? void 0 : countries.length))
       return;
@@ -154,13 +197,24 @@ export function usePartnerInfoModal(props) {
     setCurrency(value);
     setError("");
   }
+  function onCheckboxChange(e) {
+    const checked = e.target.checked;
+    setAllowBankingCollection(checked);
+    if (checked)
+      setCheckboxError("");
+  }
   async function onSubmit() {
     var _a, _b;
+    if (!allowBankingCollection) {
+      setCheckboxError(props.missingFieldsErrorText);
+      return;
+    }
     if (!countryCode || !currency) {
       setError(props.missingFieldsErrorText);
       return;
     }
     setError("");
+    setCheckboxError("");
     try {
       const vars = {
         user: {
@@ -174,13 +228,13 @@ export function usePartnerInfoModal(props) {
         countryCode,
         currency,
       };
-      const result = await connectImpactPartner({ vars });
+      const result = await startImpactConnection({ vars });
       if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message)) {
         setError(props.networkErrorText);
         return;
       }
       const connectionResult = result
-        .createImpactConnection;
+        .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(". ");
@@ -191,34 +245,37 @@ export function usePartnerInfoModal(props) {
       window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setSuccess(true);
+      setVerificationContext(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
+    (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connectionStatus) === "NOT_STARTED";
   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),
+      isExistingPartner: 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) || "",
+      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: {
       onCountryChange,
       onCurrencyChange,
+      onCheckboxChange,
       setCurrencySearch,
       setCountrySearch,
       onSubmit,

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

@@ -108,6 +108,7 @@ 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 * as WidgetVerification from "../sqm-widget-verification/WidgetVerification.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -220,6 +221,7 @@ const stories = [
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable,
   PartnerInfoModal,
+  WidgetVerification,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -50,7 +50,7 @@ export function TextSpanView(props, children) {
       display: inline;
     }
   `;
-  return (h("span", { class: sheet.classes[type], part: "sqm-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-text-span-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Widget Verification",
+};
+export const Step1Email = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: false },
+  }) }));
+export const Step2Code = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: true },
+  }) }));
+export const Step3PartnerModal = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showPartnerModal: true },
+  }) }));
+export const Loading = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { loading: true },
+  }) }));

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

@@ -54,7 +54,6 @@ const style = {
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   FooterContainer: {
     display: "flex",
@@ -132,7 +131,7 @@ export function WidgetCodeVerificationView(props) {
           h("sl-input", { class: inputClass, name: "code" }),
           h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
-      h("div", { class: sheet.classes.FooterContainer },
-        h(TextSpanView, { type: "p" }, resendCodeText)))));
+        h("div", { class: sheet.classes.FooterContainer },
+          h(TextSpanView, { type: "p" }, resendCodeText)),
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)))));
 }

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

@@ -14,11 +14,9 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     position: "relative",
     flexDirection: "column",
-    maxWidth: "320px",
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   SkeletonOne: {
     width: "50%",

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

@@ -7,6 +7,35 @@ import { getProps } from "../../utils/utils";
 import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
 import { useWidgetVerification } from "./useWidgetVerification";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "480px",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+      overflow: "visible",
+    },
+    "&::part(footer)": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+    },
+    "&::part(overlay)": {
+      background: "rgba(0, 0, 0, 0.5)",
+    },
+  },
+  DialogTitle: {
+    fontSize: "var(--sl-font-size-x-large)",
+    fontWeight: "600",
+    padding: "var(--sl-spacing-x-large) 0 0 0",
+    margin: "0",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 /**
  * @uiName Widget Verification Flow
  * @exampleGroup Widget Verification
@@ -14,10 +43,15 @@ import { useWidgetVerification } from "./useWidgetVerification";
  */
 export class WidgetVerification {
   constructor() {
-    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
+    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification AND sqm-partner-info-modal
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                     GENERAL PROPS
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName General widget header text with partner creation
+     * @uiGroup General Text
+     */
+    this.general_widgetHeaderWithPartnerCreation = "Let's get you ready for rewards";
     /**
      * @uiName General verify widget header text
      * @uiGroup General Text
@@ -188,7 +222,7 @@ export class WidgetVerification {
      * @undocumented
      * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" }
      * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" }
-     * @componentState { "title": "Step 3: Create Partner", "props": { "showCode": false }, "dependencies": ["sqm-partner-info-modal"], "uiGroup": "Partner Creation Step" }
+     * @componentState { "title": "Step 3: Create Partner", "props": { "showPartnerModal": true }, "dependencies": ["sqm-partner-info-modal"], "uiGroup": "Partner Creation Step" }
      */
     this.stateController = "{}";
     withHooks(this);
@@ -199,27 +233,71 @@ export class WidgetVerification {
     return extractProps(props, prefix);
   }
   render() {
+    var _a;
     const props = isDemo()
       ? useDemoWidgetVerificationInternal(this)
       : useWidgetVerification();
     if (props.loading)
       return h("sl-spinner", null);
-    if (props.showPartnerModal) {
-      return (h("sqm-partner-info-modal", Object.assign({}, this.getStepTextProps("createPartnerStep_"))));
+    // for handling state previews in content editor
+    const partnerState = typeof props["sqm-partner-info-modal_stateController"] === "string"
+      ? parseStates(props["sqm-partner-info-modal_stateController"])
+      : props["sqm-partner-info-modal_stateController"];
+    if (props.showPartnerModal && ((_a = partnerState === null || partnerState === void 0 ? void 0 : partnerState.states) === null || _a === void 0 ? void 0 : _a.open) === false) {
+      return h("div", null);
     }
-    const generalText = this.getStepTextProps("general_");
+    // const generalText = this.getStepTextProps("general_");
+    const partnerText = this.getStepTextProps("createPartnerStep_");
+    const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
+    const renderStepContent = () => {
+      if (props.showPartnerModal) {
+        return (h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}" })));
+      }
+      if (props.showCode) {
+        return (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
+      }
+      return (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))));
+    };
     return (h("div", null,
-      h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader),
-      h("p", { style: {
-          color: "var(--sl-color-neutral-500)",
-          fontSize: "var(--sl-font-size-medium)",
-          margin: "0",
-        } }, generalText.verifyEmailDescription),
-      props.showCode ? (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))))));
+      h("style", { type: "text/css" }, styleString),
+      h("sl-dialog", { class: sheet.classes.Dialog, noHeader: true, open: true, label: dialogLabel, "onSl-request-close": (e) => {
+          e.preventDefault();
+        }, "onSl-hide": (e) => {
+          var _a;
+          if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
+            e.preventDefault();
+          }
+        } },
+        h("h2", { class: sheet.classes.DialogTitle }, dialogLabel),
+        renderStepContent())));
   }
   static get is() { return "sqm-widget-verification"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "general_widgetHeaderWithPartnerCreation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "General widget header text with partner creation",
+            "name": "uiName"
+          }, {
+            "text": "General Text",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "general_widget-header-with-partner-creation",
+      "reflect": false,
+      "defaultValue": "\"Let's get you ready for rewards\""
+    },
     "general_verifyEmailHeader": {
       "type": "string",
       "mutable": false,
@@ -958,7 +1036,7 @@ export class WidgetVerification {
             "text": "{ \"title\": \"Step 2: Enter code\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"], \"uiGroup\": \"Code Verification Step\" }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Step 3: Create Partner\", \"props\": { \"showCode\": false }, \"dependencies\": [\"sqm-partner-info-modal\"], \"uiGroup\": \"Partner Creation Step\" }",
+            "text": "{ \"title\": \"Step 3: Create Partner\", \"props\": { \"showPartnerModal\": true }, \"dependencies\": [\"sqm-partner-info-modal\"], \"uiGroup\": \"Partner Creation Step\" }",
             "name": "componentState"
           }],
         "text": ""

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

@@ -15,6 +15,9 @@ const USER_LOOKUP = gql `
           email
           emailVerified
         }
+        impactConnection {
+          connected
+        }
       }
     }
   }
@@ -35,15 +38,22 @@ export function useWidgetVerification() {
   const [fetch] = useLazyQuery(USER_LOOKUP);
   useEffect(() => {
     const checkUser = async () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e;
       try {
         const res = await fetch({});
         if (!res || res instanceof Error)
           throw new Error();
-        if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
-          setContext(true);
-        else if ((_c = (_b = res === null || res === void 0 ? void 0 : res.viewer) === null || _b === void 0 ? void 0 : _b.managedIdentity) === null || _c === void 0 ? void 0 : _c.emailVerified)
+        // Flow changed to send email -> verify code -> show early partner creation modal
+        const emailVerified = ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified) || ((_c = (_b = res === null || res === void 0 ? void 0 : res.viewer) === null || _b === void 0 ? void 0 : _b.managedIdentity) === null || _c === void 0 ? void 0 : _c.emailVerified);
+        const isConnected = (_e = (_d = res === null || res === void 0 ? void 0 : res.viewer) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.connected;
+        if (isConnected) {
+          // Partner already created, show widget content
           setContext(true);
+        }
+        else if (emailVerified) {
+          // Email verified but no partner yet, show partner modal
+          setShowPartnerModal(true);
+        }
       }
       catch (e) {
         console.error("Could not fetch user information:", e);

package/dist/collection/components/tax-and-cash/data.js

@@ -38,6 +38,7 @@ export const GET_USER = gql `
         }
         impactConnection {
           connected
+          connectionStatus
           user {
             firstName
             lastName

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.js

@@ -32,6 +32,32 @@ export const CONNECT_PARTNER = gql `
     }
   }
 `;
+export const COMPLETE_PARTNER = gql `
+  mutation completeImpactConnection($vars: ImpactConnectionInput!) {
+    completeImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
 function getOption(countries, countryCode) {
   if (!countries)
     return;
@@ -50,6 +76,7 @@ export function useIndirectTaxForm(props) {
   const context = useParentValue(TAX_FORM_CONTEXT_NAMESPACE);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
   const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = useMutation(CONNECT_PARTNER);
+  const [completeImpactPartner, { loading: completeLoading, errors: completeErrors },] = useMutation(COMPLETE_PARTNER);
   const userForm = useParentValue(USER_FORM_CONTEXT_NAMESPACE);
   const { data: userData, refetch, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
   const { data: _countriesRes, loading: countriesLoading } = useParentQueryValue(COUNTRIES_QUERY_NAMESPACE);
@@ -112,7 +139,7 @@ export function useIndirectTaxForm(props) {
     setFormState((p) => ({ ...p, [field]: value }));
   };
   async function connectPartner(formData) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const vars = {
       user: {
         id: user.id,
@@ -134,19 +161,30 @@ export function useIndirectTaxForm(props) {
       additionalTaxId: formData.qstNumber,
       withholdingTaxId: formData.subRegionTaxNumber,
     };
-    const result = await connectImpactPartner({
-      vars,
-    });
-    if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
+    //AL: TODO completePartnerMutation might change
+    let result = null;
+    let connectionResult;
+    if ((_b = (_a = userData === null || userData === void 0 ? void 0 : userData.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.connected) {
+      result = await completeImpactPartner({
+        vars,
+      });
+      connectionResult = (_c = result) === null || _c === void 0 ? void 0 : _c.completeImpactConnection;
+    }
+    else {
+      result = await connectImpactPartner({
+        vars,
+      });
+      connectionResult = (_d = result) === null || _d === void 0 ? void 0 : _d.createImpactConnection;
+    }
+    if (!result || ((_e = result) === null || _e === void 0 ? void 0 : _e.message))
       throw new Error();
-    if (!((_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.success)) {
+    if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.success)) {
       // Output backend errors to console for now
-      console.error("Failed to create Impact connection: ", result.createImpactConnection.validationErrors);
+      console.error("Failed to create Impact connection: ", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
       throw new Error();
     }
     await refetch();
-    const resultPublisher = (_e = (_d = (_c = result
-      .createImpactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher;
+    const resultPublisher = (_g = (_f = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher;
     const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
     // Fire form change event
     window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
@@ -212,8 +250,8 @@ export function useIndirectTaxForm(props) {
     states: {
       step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
       hideSteps: context.hideSteps,
-      disabled: loading || countriesLoading || connectLoading,
-      loading: loading || connectLoading || countriesLoading,
+      disabled: loading || countriesLoading || connectLoading || completeLoading,
+      loading: loading || connectLoading || countriesLoading || completeLoading,
       isPartner: !!((_e = (_d = userData === null || userData === void 0 ? void 0 : userData.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher),
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       formState: {

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash.js

@@ -7,14 +7,9 @@ function getCurrentStep(user) {
   if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected) || !((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher)) {
     return "/1";
   }
-  const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, payoutsAccount, billingAddress, phoneNumber, billingCity, billingPostalCode, billingState, } = user.impactConnection.publisher;
-  console.log(phoneNumber, "phone number in getCurrentStep");
-  // Early partner creation does not collect these fields
-  if (!billingAddress ||
-    !billingCity ||
-    !billingPostalCode ||
-    !billingState ||
-    !phoneNumber) {
+  const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, payoutsAccount, } = user.impactConnection.publisher;
+  console.log(user.impactConnection, "publisher data in useTaxAndCash to determine step new new");
+  if (user.impactConnection.connectionStatus === "STARTED") {
     return "/1";
   }
   // If they do have a required document, look at current document