@saasquatch/mint-components 2.3.0-11 → 2.3.0-13

package/dist/cjs/{useIndirectTaxForm-112914a0.js → useIndirectTaxForm-c439eb81.js}

@@ -3,7 +3,7 @@
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
 const index_module = require('./index.module-f8c8495f.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const subregions = require('./subregions-984e30d7.js');
+const subregions = require('./subregions-3542b0b8.js');
 const data = require('./data-89ac73dd.js');
 const eventKeys = require('./eventKeys-7af4df4d.js');
 
@@ -1151,6 +1151,8 @@ const COMPLETE_PARTNER = index_module.dist.gql `
         impactConnection {
           connected
           publisher {
+            phoneNumber
+            phoneNumberCountryCode
             brandedSignup
             requiredTaxDocumentType
             currentTaxDocument {
@@ -1174,7 +1176,7 @@ function getOption(countries, countryCode) {
   }
 }
 function useIndirectTaxForm(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const user = index_module.J();
   const locale = index_module.L();
   const formRef = domContextHooks_module.useRef(null);
@@ -1359,6 +1361,8 @@ function useIndirectTaxForm(props) {
       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),
+      isPartnerLegacy: !!((_g = (_f = userData === null || userData === void 0 ? void 0 : userData.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher) &&
+        ((_j = (_h = userData === null || userData === void 0 ? void 0 : userData.user) === null || _h === void 0 ? void 0 : _h.impactConnection) === null || _j === void 0 ? void 0 : _j.connectionStatus) !== "STARTED",
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       formState: {
         checked: option,

package/dist/cjs/usePortalRegistrationForm-8a3a14ac.js

@@ -0,0 +1,215 @@
+'use strict';
+
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-f8c8495f.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+const AsYouType = require('./AsYouType-d15caac8.js');
+const useRegistrationFormState = require('./useRegistrationFormState-4fe5b770.js');
+
+const RegistrationFormQuery = index_module.dist.gql `
+  query RegistrationFormQuery($key: String!) {
+    form(key: $key) {
+      key
+      type
+      initialData {
+        initialData
+        isEnabled
+        isEnabledErrorMessage
+      }
+    }
+  }
+`;
+function usePortalRegistrationForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = domContextHooks_module.useRef(null);
+  const locale = index_module.L();
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
+  const [request, { loading, errors, data, formError }] = index_module.Oe();
+  const queryResponse = index_module.wn(RegistrationFormQuery, { key: props.formKey });
+  const formLoading = loading || queryResponse.loading;
+  domContextHooks_module.useEffect(() => {
+    var _a, _b, _c;
+    const initialData = (_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData.initialData;
+    const disabled = ((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false;
+    const disabledMessage = ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+      props.formDisabledErrorMessage;
+    const formState = {
+      loading: formLoading,
+      disabled,
+      disabledMessage,
+      initialData,
+    };
+    setRegistrationFormState(formState);
+  }, [(_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData]);
+  domContextHooks_module.useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  const submit = async (event) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      // control.value = initialData[key] || control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: props.passwordMismatchErrorMessage,
+      };
+    }
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
+      return;
+    }
+    setRegistrationFormState({
+      ...registrationFormState,
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    const redirectPath = props.redirectPath;
+    const _googleOAuthIdToken = registrationFormState._googleOAuthIdToken;
+    const variables = {
+      key: props.formKey,
+      formData: {
+        ...(_googleOAuthIdToken ? { _googleOAuthIdToken } : {}),
+        locale,
+        email,
+        password,
+        redirectPath,
+        ...formData,
+      },
+    };
+    try {
+      const result = await request(variables);
+      if (result instanceof Error) {
+        throw result;
+      }
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      const managedIdentityResponse = (_a = result.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => { var _a; return ((_a = result === null || result === void 0 ? void 0 : result.formHandler) === null || _a === void 0 ? void 0 : _a.namespace) === "identity"; });
+      if (managedIdentityResponse &&
+        managedIdentityResponse.result.results.length &&
+        managedIdentityResponse.result.results[0].success &&
+        managedIdentityResponse.result.results[0].data.token) {
+        index_module.jn.push(props.nextPage);
+      }
+      else if (
+      // check for blocked email error response
+      ((_b = result.submitForm) === null || _b === void 0 ? void 0 : _b.results.length) === 1 &&
+        ((_f = (_e = (_d = (_c = result.submitForm) === null || _c === void 0 ? void 0 : _c.results[0]) === null || _d === void 0 ? void 0 : _d.result) === null || _e === void 0 ? void 0 : _e.results) === null || _f === void 0 ? void 0 : _f.length) === 1 &&
+        ((_l = (_k = (_j = (_h = (_g = result.submitForm) === null || _g === void 0 ? void 0 : _g.results[0]) === null || _h === void 0 ? void 0 : _h.result) === null || _j === void 0 ? void 0 : _j.results) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.success) ===
+          false && ((_s = (_r = (_q = (_p = (_o = (_m = result.submitForm) === null || _m === void 0 ? void 0 : _m.results[0]) === null || _o === void 0 ? void 0 : _o.result) === null || _p === void 0 ? void 0 : _p.results) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) === null || _s === void 0 ? void 0 : _s.startsWith("Blocked email"))) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: {
+            email: props.invalidEmailErrorMessage,
+          },
+        });
+      }
+    }
+    catch (error) {
+      // check for invalid email
+      if ((_t = error === null || error === void 0 ? void 0 : error.message) === null || _t === void 0 ? void 0 : _t.includes("is not a valid email address")) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: { email: props.invalidEmailErrorMessage },
+        });
+      }
+      else {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: props.networkErrorMessage,
+          validationErrors: {},
+        });
+      }
+    }
+  };
+  const inputFunction = index_module.useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new AsYouType.AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  let errorMessage = "";
+  if (((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false) {
+    errorMessage =
+      ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+        props.formDisabledErrorMessage;
+  }
+  else if ((_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors.length)) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else {
+    errorMessage =
+      formError || ((_j = (_h = (_g = (_f = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.errors) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
+  }
+  return {
+    states: {
+      loading: loading || queryResponse.loading,
+      error: errorMessage,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+      enablePasswordValidation: !props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+exports.usePortalRegistrationForm = usePortalRegistrationForm;

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -14,6 +14,8 @@ const stepOneProps = {
     disabled: false,
     isPartner: false,
     isUser: false,
+    isPartnerLegacy: false,
+    isUserLegacy: false,
     loadingError: false,
     formState: {
       firstName: "Bob",
@@ -134,6 +136,7 @@ const stepTwoProps = {
     disabled: false,
     loading: false,
     isPartner: false,
+    isPartnerLegacy: false,
     loadingError: false,
     formState: {
       checked: undefined,

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

@@ -219,6 +219,10 @@ export const PHONE_EXTENSIONS = {
     name: "Cuba",
     dial_code: "+53",
   },
+  CW: {
+    name: "Curaçao",
+    dial_code: "+599",
+  },
   CY: {
     name: "Cyprus",
     dial_code: "+357",
@@ -299,6 +303,10 @@ export const PHONE_EXTENSIONS = {
     name: "French Polynesia",
     dial_code: "+689",
   },
+  TF: {
+    name: "French Southern Territories",
+    dial_code: "+262",
+  },
   GA: {
     name: "Gabon",
     dial_code: "+241",
@@ -955,6 +963,10 @@ export const PHONE_EXTENSIONS = {
     name: "Wallis and Futuna",
     dial_code: "+681",
   },
+  EH: {
+    name: "Western Sahara",
+    dial_code: "+212",
+  },
   YE: {
     name: "Yemen",
     dial_code: "+967",

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

@@ -157,6 +157,14 @@ export const IndirectTaxFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
+      states.isPartnerLegacy && (h("sqm-form-message", { loading: states.loading, type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+        intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       h("div", null,
         h("h4", null, text.indirectTaxDetails))),
     states.loading ? (h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h("div", null,

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

@@ -887,7 +887,7 @@ export class IndirectTaxForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseIndirectTaxFormResult>",
-        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; loading: boolean; isPartner: boolean; loadingError: boolean; formState: { checked: \"hstCanada\" | \"otherRegion\" | \"notRegistered\"; errors: {}; }; }; refs?: { formRef: Ref<HTMLFormElement>; }; data?: { esRegions: { regionCode: string; taxType: string; displayName: string; }[]; countries: { countryCode: string; displayName: any; }[]; allCountries: { countryCode: string; displayName: any; }[]; provinces: { regionCode: string; taxType: string; displayName: string; }[]; }; slotProps?: { formState: { selectedRegion?: string; subRegion?: string; subRegionTaxNumber?: string; qstNumber?: string; province?: string; indirectTaxNumber?: string; hasQst?: boolean; hasSubRegionTaxNumber?: boolean; errors?: any; error?: string; }; }; }",
+        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; loading: boolean; isPartner: boolean; isPartnerLegacy: boolean; loadingError: boolean; formState: { checked: \"hstCanada\" | \"otherRegion\" | \"notRegistered\"; errors: {}; }; }; refs?: { formRef: Ref<HTMLFormElement>; }; data?: { esRegions: { regionCode: string; taxType: string; displayName: string; }[]; countries: { countryCode: string; displayName: any; }[]; allCountries: { countryCode: string; displayName: any; }[]; provinces: { regionCode: string; taxType: string; displayName: string; }[]; }; slotProps?: { formState: { selectedRegion?: string; subRegion?: string; subRegionTaxNumber?: string; qstNumber?: string; province?: string; indirectTaxNumber?: string; hasQst?: boolean; hasSubRegionTaxNumber?: boolean; errors?: any; error?: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -921,6 +921,7 @@ function useDemoIndirectTaxForm(props) {
       disabled: false,
       loading: false,
       isPartner: false,
+      isPartnerLegacy: false,
       loadingError: false,
       errors: {},
       formState: {

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

@@ -46,6 +46,8 @@ export const COMPLETE_PARTNER = gql `
         impactConnection {
           connected
           publisher {
+            phoneNumber
+            phoneNumberCountryCode
             brandedSignup
             requiredTaxDocumentType
             currentTaxDocument {
@@ -69,7 +71,7 @@ function getOption(countries, countryCode) {
   }
 }
 export function useIndirectTaxForm(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const user = useUserIdentity();
   const locale = useLocale();
   const formRef = useRef(null);
@@ -254,6 +256,8 @@ export function useIndirectTaxForm(props) {
       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),
+      isPartnerLegacy: !!((_g = (_f = userData === null || userData === void 0 ? void 0 : userData.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher) &&
+        ((_j = (_h = userData === null || userData === void 0 ? void 0 : userData.user) === null || _h === void 0 ? void 0 : _h.impactConnection) === null || _j === void 0 ? void 0 : _j.connectionStatus) !== "STARTED",
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       formState: {
         checked: option,

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

@@ -9,15 +9,18 @@ function getCurrentStep(user) {
     return "/1";
   }
   const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, payoutsAccount, billingAddress, billingCity, billingCountryCode, billingPostalCode, phoneNumber, phoneNumberCountryCode, } = user.impactConnection.publisher;
-  const hasBillingInfo = billingAddress &&
-    billingCity &&
-    billingCountryCode &&
-    billingPostalCode &&
-    phoneNumberCountryCode &&
-    phoneNumber &&
-    isValidI18nPhoneNumber(phoneNumberCountryCode, phoneNumber);
-  if (!hasBillingInfo) {
-    return "/1";
+  const isCompleted = user.impactConnection.connectionStatus === "COMPLETED";
+  if (!isCompleted) {
+    const hasBillingInfo = billingAddress &&
+      billingCity &&
+      billingCountryCode &&
+      billingPostalCode &&
+      phoneNumberCountryCode &&
+      phoneNumber &&
+      isValidI18nPhoneNumber(phoneNumberCountryCode, phoneNumber);
+    if (!hasBillingInfo) {
+      return "/1";
+    }
   }
   // If they do have a required document, look at current document
   if (requiredTaxDocumentType && !currentTaxDocument) {

package/dist/collection/components/tax-and-cash/sqm-user-info-form/UserInfoFormView.stories.js

@@ -11,6 +11,11 @@ const mockCountries = [
   { countryCode: "DE", displayName: "Germany" },
   { countryCode: "FR", displayName: "France" },
   { countryCode: "ES", displayName: "Spain" },
+  // Show handling of long country names
+  {
+    countryCode: "CD",
+    displayName: "Congo, The Democratic Republic of the Congo",
+  },
 ];
 const mockCurrencies = [
   { currencyCode: "USD", displayName: "US Dollar" },
@@ -101,6 +106,8 @@ const baseProps = {
     loading: false,
     isPartner: false,
     isUser: false,
+    isPartnerLegacy: false,
+    isUserLegacy: false,
     formState: {
       firstName: "",
       lastName: "",
@@ -213,6 +220,7 @@ export const PartnerAccount = () => {
   return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       isPartner: true,
+      isPartnerLegacy: true,
       formState: {
         ...baseProps.states.formState,
         firstName: "Jane",
@@ -232,10 +240,53 @@ export const PartnerAccount = () => {
       partnerData: mockPartnerData,
     } })));
 };
+// Early partner created via <sqm-partner-info-modal>: connectionStatus is "STARTED",
+// publisher has only countryCode + currency populated. Banner must NOT show; only
+// country + currency disabled; firstName/lastName disabled via userData; everything
+// else (phone, address, city, state, postalCode) stays editable.
+export const EarlyPartnerFromModal = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      isPartner: true,
+      isUser: true,
+      isPartnerLegacy: false,
+      isUserLegacy: false,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Jane",
+        lastName: "Smith",
+        email: "jane.smith@example.com",
+        countryCode: "US",
+        currency: "USD",
+        phoneNumberCountryCode: undefined,
+        phoneNumber: undefined,
+        address: undefined,
+        city: undefined,
+        state: undefined,
+        postalCode: undefined,
+      },
+    }, data: {
+      ...baseProps.data,
+      partnerData: {
+        ...mockPartnerData,
+        billingAddress: undefined,
+        billingCity: undefined,
+        billingState: undefined,
+        billingPostalCode: undefined,
+        phoneNumber: undefined,
+        phoneNumberCountryCode: undefined,
+      },
+      userData: {
+        firstName: "Jane",
+        lastName: "Smith",
+      },
+    } })));
+};
 export const UserAccount = () => {
   return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       isUser: true,
+      isUserLegacy: true,
       formState: {
         ...baseProps.states.formState,
         firstName: "Bob",
@@ -254,6 +305,7 @@ export const UserAccountMissingLastName = () => {
   return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       isUser: true,
+      isUserLegacy: true,
       formState: {
         ...baseProps.states.formState,
         firstName: "Bob",

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { AsYouType } from "libphonenumber-js";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { FORM_STEPS } from "../data";
@@ -107,10 +108,6 @@ const vanillaStyle = `
       flex-direction: column;
     }
 
-    sl-select#phoneNumberCountryCode::part(menu) {
-      min-width: 250px;
-    }
-
     sl-button[type="primary"]::part(base){
         background-color: var(--sqm-primary-button-background);
         color: var(--sqm-primary-button-color);
@@ -204,6 +201,7 @@ const vanillaStyle = `
       background: var(--sqm-input-background, inherit);
       color: var(--sqm-input-color, inherit);
       border:none;
+      min-width: max-content;
     }
 
     sl-menu-item::part(base) {
@@ -336,6 +334,14 @@ export const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
+      (states.isPartnerLegacy || states.isUserLegacy) && (h("sqm-form-message", { loading: states.loading, type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+        h("p", { part: "alert-description" }, intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })))),
       h("div", null,
         h("div", { class: classes.InputContainer },
           h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
@@ -388,7 +394,14 @@ export const UserInfoFormView = (props) => {
                     h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
                     _b.dial_code));
                 })),
-              h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ control, value, formData }) => {
+              h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber !== null
+                  ? formState.phoneNumber
+                  : "", "onSl-input": (e) => {
+                  var _a;
+                  const target = e.target;
+                  const country = (((_a = refs.phoneCountryRef.current) === null || _a === void 0 ? void 0 : _a.value) || "US");
+                  target.value = new AsYouType(country).input(target.value);
+                }, validationError: ({ control, value, formData }) => {
                   // skip validation for values the user can't edit
                   if (control === null || control === void 0 ? void 0 : control.disabled)
                     return undefined;

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.js

@@ -864,7 +864,7 @@ export class TaxForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseUserInfoFormResult>",
-        "resolved": "{ states?: { step: string; hideState: boolean; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; phoneNumberCountryCode: string; phoneNumber: string; countryCode: string; currency: string; address: string; city: string; state: string; postalCode: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; phoneCountryRef: Ref<HTMLSelectElement>; }; data?: { currencies: { displayName: string; currencyCode: string; }[]; countries: TaxCountry[]; phoneCountries: TaxCountry[]; allCurrencies: { displayName: string; currencyCode: string; }[]; allCountries: TaxCountry[]; regionLabelEnum: \"STATE\" | \"PROVINCE\" | \"REGION\"; regions: { label: string; value: string; }[]; partnerData: ImpactPublisher; userData: ImpactUser; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
+        "resolved": "{ states?: { step: string; hideState: boolean; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; isUserLegacy: boolean; isPartnerLegacy: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; phoneNumberCountryCode: string; phoneNumber: string; countryCode: string; currency: string; address: string; city: string; state: string; postalCode: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; phoneCountryRef: Ref<HTMLSelectElement>; }; data?: { currencies: { displayName: string; currencyCode: string; }[]; countries: TaxCountry[]; phoneCountries: TaxCountry[]; allCurrencies: { displayName: string; currencyCode: string; }[]; allCountries: TaxCountry[]; regionLabelEnum: \"STATE\" | \"PROVINCE\" | \"REGION\"; regions: { label: string; value: string; }[]; partnerData: ImpactPublisher; userData: ImpactUser; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -927,6 +927,8 @@ function useDemoUserInfoForm(props) {
       loading: false,
       isPartner: false,
       isUser: false,
+      isPartnerLegacy: false,
+      isUserLegacy: false,
       loadingError: false,
       formState: {
         errors: {