@saasquatch/mint-components 2.0.5-1 → 2.0.5-3

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

@@ -0,0 +1,325 @@
+import { h } from "@stencil/core";
+import { UserInfoFormView, } from "./sqm-user-info-form-view";
+export default {
+  title: "Components/User Info Form View",
+};
+const mockCountries = [
+  { countryCode: "US", displayName: "United States" },
+  { countryCode: "CA", displayName: "Canada" },
+  { countryCode: "GB", displayName: "United Kingdom" },
+  { countryCode: "AU", displayName: "Australia" },
+  { countryCode: "DE", displayName: "Germany" },
+  { countryCode: "FR", displayName: "France" },
+  { countryCode: "ES", displayName: "Spain" },
+];
+const mockCurrencies = [
+  { currencyCode: "USD", displayName: "US Dollar" },
+  { currencyCode: "CAD", displayName: "Canadian Dollar" },
+  { currencyCode: "GBP", displayName: "British Pound" },
+  { currencyCode: "EUR", displayName: "Euro" },
+  { currencyCode: "AUD", displayName: "Australian Dollar" },
+];
+const mockUSRegions = [
+  { label: "California", value: "CA" },
+  { label: "New York", value: "NY" },
+  { label: "Texas", value: "TX" },
+  { label: "Florida", value: "FL" },
+  { label: "Washington", value: "WA" },
+];
+const mockPartnerData = {
+  id: "partner-123",
+  brandedSignup: true,
+  countryCode: "US",
+  currency: "USD",
+  billingAddress: "123 Main St",
+  billingCity: "San Francisco",
+  billingState: "CA",
+  billingCountryCode: "US",
+  billingPostalCode: "94102",
+  phoneNumberCountryCode: "US",
+  phoneNumber: "4155551234",
+  currentTaxDocument: null,
+  taxInformation: null,
+  requiredTaxDocumentType: null,
+  withdrawalSettings: {
+    paymentMethod: "PAYPAL",
+    paypalEmailAddress: null,
+    bankCountry: null,
+    bankAccountNumber: null,
+    paymentSchedulingType: "BALANCE_THRESHOLD",
+    paymentThreshold: null,
+    paymentDay: null,
+  },
+  payoutsAccount: {
+    hold: false,
+    holdReasons: [],
+    balance: "0",
+  },
+};
+const defaultText = {
+  formStep: "Step {step} of {count}",
+  firstName: "First Name",
+  lastName: "Last Name",
+  email: "Email",
+  country: "Country",
+  phoneNumber: "Phone Number",
+  address: "Address",
+  city: "City",
+  state: "State",
+  province: "Province",
+  region: "Region",
+  postalCode: "Postal Code",
+  currency: "Currency",
+  currencyHelpText: "Select your preferred currency for payouts",
+  allowBankingCollection: "I agree to the {termsAndConditionsLink}",
+  personalInformation: "Personal Information",
+  continueButton: "Continue",
+  isPartnerAlertHeader: "Partner Account Detected",
+  isPartnerAlertDescription: "Some fields are pre-filled from your partner account. Contact {supportLink} if you need to make changes.",
+  termsAndConditionsLabel: "Terms and Conditions",
+  termsAndConditionsLink: "https://example.com/terms",
+  taxAndPayoutsDescription: "Please provide your information for tax and payout purposes.",
+  supportLink: "support@example.com",
+  error: {
+    generalTitle: "Error",
+    generalDescription: "An error occurred. Please contact {supportLink} for assistance.",
+    invalidCharacterError: "Invalid characters detected",
+    fieldRequiredError: "{fieldName} is required",
+    fieldInvalidError: "Invalid value",
+    loadingErrorAlertHeader: "Loading Error",
+    loadingErrorAlertDescription: "Failed to load form data. Please contact {supportLink}.",
+  },
+  searchForCountryText: "Search for country...",
+  searchForCurrencyText: "Search for currency...",
+};
+const baseProps = {
+  states: {
+    step: "1",
+    hideState: false,
+    hideSteps: false,
+    disabled: false,
+    loadingError: false,
+    loading: false,
+    isPartner: false,
+    isUser: false,
+    formState: {
+      firstName: "",
+      lastName: "",
+      email: "user@example.com",
+      countryCode: "US",
+      currency: "USD",
+      phoneNumberCountryCode: "US",
+      phoneNumber: "",
+      address: "",
+      city: "",
+      state: "",
+      postalCode: "",
+      allowBankingCollection: false,
+      errors: {},
+    },
+  },
+  data: {
+    regionLabelEnum: "STATE",
+    regions: mockUSRegions,
+    countries: mockCountries,
+    phoneCountries: mockCountries,
+    allCountries: mockCountries,
+    allCurrencies: mockCurrencies,
+    currencies: mockCurrencies,
+    partnerData: undefined,
+    userData: undefined,
+  },
+  callbacks: {
+    setCurrencySearch: (c) => console.log("setCurrencySearch", c),
+    setCountrySearch: (c) => console.log("setCountrySearch", c),
+    setPhoneCountrySearch: (c) => console.log("setPhoneCountrySearch", c),
+    onSubmit: (props) => console.log("onSubmit", props),
+    onFormChange: (field, e) => console.log("onFormChange", field, e),
+  },
+  text: defaultText,
+  refs: {
+    formRef: { current: null },
+    currencyRef: { current: null },
+    phoneCountryRef: { current: null },
+  },
+};
+export const Default = () => {
+  return h(UserInfoFormView, Object.assign({}, baseProps));
+};
+export const WithPrefilledData = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "John",
+        lastName: "Doe",
+        email: "john.doe@example.com",
+        countryCode: "US",
+        currency: "USD",
+        phoneNumberCountryCode: "US",
+        phoneNumber: "4155551234",
+        address: "123 Main St",
+        city: "San Francisco",
+        state: "CA",
+        postalCode: "94102",
+      },
+    } })));
+};
+export const Loading = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      loading: true,
+    } })));
+};
+export const LoadingError = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      loadingError: true,
+    } })));
+};
+export const WithValidationErrors = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "John",
+        lastName: "Doe",
+        errors: {
+          firstName: "First Name is required",
+          lastName: "Last Name is required",
+          phoneNumber: "Phone Number is required",
+          address: "Address contains invalid characters",
+          city: "City is required",
+          state: "State is required",
+          postalCode: "Postal Code is required",
+          currency: "Currency is required",
+          countryCode: "Country is required",
+          allowBankingCollection: "You must accept the terms and conditions",
+        },
+      },
+    } })));
+};
+export const WithGeneralError = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      formState: {
+        ...baseProps.states.formState,
+        errors: {
+          general: "An error occurred. Please contact support for assistance.",
+        },
+      },
+    } })));
+};
+export const PartnerAccount = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      isPartner: true,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Jane",
+        lastName: "Smith",
+        email: "jane.smith@example.com",
+        countryCode: "US",
+        currency: "USD",
+        phoneNumberCountryCode: "US",
+        phoneNumber: "4155551234",
+        address: "123 Main St",
+        city: "San Francisco",
+        state: "CA",
+        postalCode: "94102",
+      },
+    }, data: {
+      ...baseProps.data,
+      partnerData: mockPartnerData,
+    } })));
+};
+export const UserAccount = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      isUser: true,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Bob",
+        lastName: "Johnson",
+        email: "bob.johnson@example.com",
+      },
+    }, data: {
+      ...baseProps.data,
+      userData: {
+        firstName: "Bob",
+        lastName: "Johnson",
+      },
+    } })));
+};
+export const UserAccountMissingLastName = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      isUser: true,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Bob",
+        lastName: undefined,
+        email: "bob.johnson@example.com",
+      },
+    }, data: {
+      ...baseProps.data,
+      userData: {
+        firstName: "Bob",
+        lastName: undefined,
+      },
+    } })));
+};
+export const CanadianAddress = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Alice",
+        lastName: "Martin",
+        countryCode: "CA",
+        state: "BC",
+      },
+    }, data: {
+      ...baseProps.data,
+      regionLabelEnum: "PROVINCE",
+      regions: [
+        { label: "British Columbia", value: "BC" },
+        { label: "Ontario", value: "ON" },
+        { label: "Quebec", value: "QC" },
+        { label: "Alberta", value: "AB" },
+      ],
+    } })));
+};
+export const NoStateRegion = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      hideState: true,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Pierre",
+        lastName: "Dubois",
+        countryCode: "FR",
+      },
+    }, data: {
+      ...baseProps.data,
+      regionLabelEnum: undefined,
+      regions: [],
+    } })));
+};
+export const HideSteps = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      hideSteps: true,
+    } })));
+};
+export const DisabledForm = () => {
+  return (h(UserInfoFormView, Object.assign({}, baseProps, { states: {
+      ...baseProps.states,
+      disabled: true,
+      formState: {
+        ...baseProps.states.formState,
+        firstName: "Disabled",
+        lastName: "User",
+      },
+    } })));
+};

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

@@ -287,6 +287,14 @@ export const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
+  function isDisabledPartnerInput(field) {
+    var _a;
+    return states.isPartner && !!((_a = data.partnerData) === null || _a === void 0 ? void 0 : _a[field]);
+  }
+  function isDisabledUserInput(field) {
+    var _a;
+    return states.isUser && !!((_a = data.userData) === null || _a === void 0 ? void 0 : _a[field]);
+  }
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString,
@@ -327,18 +335,18 @@ export const UserInfoFormView = (props) => {
         })))),
       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 || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled || states.isUser || states.isPartner }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled || isDisabledUserInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
           h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
-          h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || states.isPartner }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+          h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledPartnerInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.country, formState.errors.countryCode),
           }
@@ -354,7 +362,8 @@ export const UserInfoFormView = (props) => {
           h("div", { class: classes.PhoneInputsSection },
             h("p", null, text.phoneNumber),
             h("div", { class: classes.PhoneInputsContainer },
-              h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled || states.isPartner, ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+              h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled ||
+                  isDisabledPartnerInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
                 class: classes.ErrorInput,
               }
                 : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
@@ -380,7 +389,7 @@ export const UserInfoFormView = (props) => {
                   // Naive phone number validation
                   validateBillingField(/[a-zA-Z]+/, value) &&
                     formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
-                }, disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+                }, disabled: states.disabled || isDisabledPartnerInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
                 helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
@@ -388,7 +397,7 @@ export const UserInfoFormView = (props) => {
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
+              formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.address, formState.errors.address),
           }
@@ -396,22 +405,22 @@ export const UserInfoFormView = (props) => {
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
+              formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.city, formState.errors.city),
           }
             : {}), { required: true })),
-          !states.hideState && (h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || states.isPartner }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
+          !states.hideState && (h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledPartnerInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.state, formState.errors.state),
           }
             : {}), { required: true }), (_p = data.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (h("sl-menu-item", { value: r.value }, r.label))))),
-          h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || states.isPartner }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
+          h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledPartnerInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || states.isPartner, helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
+          h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency"), helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.currency, formState.errors.currency),
           }
@@ -433,7 +442,7 @@ export const UserInfoFormView = (props) => {
           h("div", { class: classes.CheckboxWrapper },
             h("sl-checkbox", { checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
                 e.target.value = e.target.checked;
-              }, disabled: states.isPartner ? false : states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
+              }, disabled: states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
             ((_u = formState.errors) === null || _u === void 0 ? void 0 : _u.allowBankingCollection) && (h("p", { class: classes.ErrorText }, formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),
-        h("sl-button", { type: "primary", disabled: states.isPartner ? false : states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
+        h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
 };

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

@@ -889,7 +889,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; }[]; }; 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; 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",

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

@@ -1,11 +1,22 @@
-import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
+import { useMutation, useParent, useParentQueryValue, useParentValue, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
 import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { ADDRESS_REGIONS } from "../subregions";
-import { objectIsFull } from "../utils";
+import { objectIsFull, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
+import { CONNECT_PARTNER, } from "../sqm-indirect-tax-form/useIndirectTaxForm";
+import { gql } from "graphql-request";
+const GET_INDIRECT_TAX_COUNTRY_CODE = gql `
+  query getIndirectTaxCountryCode {
+    tenantSettings {
+      impactBrandCountryCode
+      impactBrandIndirectTaxCountryCode
+    }
+  }
+`;
 export function useUserInfoForm(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const currencyRef = useRef(undefined);
   const phoneCountryRef = useRef(undefined);
   const formRef = useRef(null);
@@ -13,7 +24,10 @@ export function useUserInfoForm(props) {
   const countries = useParentValue(SORTED_COUNTRIES_NAMESPACE);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
   const [userFormContext, setUserFormContext] = useParent(USER_FORM_CONTEXT_NAMESPACE);
-  const { data, loading, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
+  const user = useUserIdentity();
+  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = useMutation(CONNECT_PARTNER);
+  const { data: tenantData } = useQuery(GET_INDIRECT_TAX_COUNTRY_CODE, {});
+  const { data, loading, refetch, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
   const _currencies = useParentValue(CURRENCIES_NAMESPACE);
   const currencies = useMemo(() => [...(_currencies || [])].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
   const [countrySearch, setCountrySearch] = useState("");
@@ -115,6 +129,45 @@ export function useUserInfoForm(props) {
       setFilteredCurrencies(currencies.filter((c) => c.currencyCode.toLowerCase().includes(currencySearch.toLowerCase())) || []);
     }
   }, [currencySearch, currencies]);
+  async function connectPartner(formData) {
+    var _a, _b, _c, _d, _e;
+    const vars = {
+      user: {
+        id: user.id,
+        accountId: user.accountId,
+      },
+      firstName: formData.firstName,
+      lastName: formData.lastName,
+      countryCode: formData.countryCode,
+      currency: formData.currency,
+      address: formData.address,
+      city: formData.city,
+      state: formData.state,
+      postalCode: formData.postalCode,
+      phoneNumber: formData.phoneNumber,
+      phoneNumberCountryCode: formData.phoneNumberCountryCode,
+    };
+    const result = await connectImpactPartner({
+      vars,
+    });
+    if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
+      throw new Error();
+    if (!((_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.success)) {
+      // Output backend errors to console for now
+      console.error("Failed to create Impact connection: ", result.createImpactConnection.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 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));
+    return {
+      resultPublisher,
+      hasValidCurrentDocument,
+    };
+  }
   async function onSubmit(event) {
     let formControls = event.target.getFormControls();
     let formData = {};
@@ -157,9 +210,46 @@ export function useUserInfoForm(props) {
       postalCode: userData.postalCode,
       currency: userData.currency,
     });
-    const nextStep = context.overrideNextStep || "/2";
+    const skipNextStep = getSkipNextStep(userData);
+    if (skipNextStep) {
+      try {
+        const { resultPublisher, hasValidCurrentDocument } = await connectPartner(formData);
+        if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
+          !hasValidCurrentDocument) {
+          // Go to docusign form
+          setStep("/3");
+        }
+        else {
+          if (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.brandedSignup) {
+            // Go to banking information form
+            setStep("/4");
+          }
+          else {
+            // Go right to the dashboard
+            setStep("/dashboard");
+          }
+        }
+        return;
+      }
+      catch (e) {
+        setErrors({ general: true });
+        return;
+      }
+    }
+    const nextStep = context.overrideNextStep || skipNextStep ? "/3" : "/2";
     setStep(nextStep);
   }
+  const indirectTaxCountry = (_a = tenantData === null || tenantData === void 0 ? void 0 : tenantData.tenantSettings) === null || _a === void 0 ? void 0 : _a.impactBrandIndirectTaxCountryCode;
+  const hasIndirectTax = !!indirectTaxCountry;
+  function getSkipNextStep(userData) {
+    if (!hasIndirectTax)
+      return true;
+    if (userData.countryCode === "US")
+      return true;
+    if (hasIndirectTax && userData.countryCode !== indirectTaxCountry)
+      return true;
+    return false;
+  }
   const hasStates = ["ES", "AU", "US", "CA"].includes(userFormContext.countryCode);
   const regionObj = hasStates
     ? ADDRESS_REGIONS[userFormContext === null || userFormContext === void 0 ? void 0 : userFormContext.countryCode]
@@ -187,16 +277,18 @@ export function useUserInfoForm(props) {
       allCountries: countries,
       regionLabelEnum: regionObj === null || regionObj === void 0 ? void 0 : regionObj.labelEnum,
       regions: (regionObj === null || regionObj === void 0 ? void 0 : regionObj.regions) || [],
+      partnerData: (_c = (_b = data === null || data === void 0 ? void 0 : data.user) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher,
+      userData: (_e = (_d = data === null || data === void 0 ? void 0 : data.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.user,
     },
     states: {
       step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
       hideState: !hasStates,
       hideSteps: !!context.hideSteps,
-      disabled: loading,
+      disabled: loading || connectLoading,
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
-      loading: loading,
-      isPartner: !!((_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher),
-      isUser: !!((_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.user),
+      loading: loading || connectLoading,
+      isPartner: !!((_g = (_f = data === null || data === void 0 ? void 0 : data.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher),
+      isUser: !!((_j = (_h = data === null || data === void 0 ? void 0 : data.user) === null || _h === void 0 ? void 0 : _h.impactConnection) === null || _j === void 0 ? void 0 : _j.user),
       formState: {
         ...userFormContext,
         errors: formErrors,

package/dist/esm/{ErrorView-74cb3af8.js → ErrorView-bbf0a042.js}

@@ -1,4 +1,4 @@
-import { h } from './index-38ad4957.js';
+import { h } from './index-b3a06de8.js';
 
 const ErrorView = (props) => {
   return (h("sqm-form-message", { type: "error" },

package/dist/esm/{GenericTableView-8c72ac30.js → GenericTableView-e43d310f.js}

@@ -1,4 +1,4 @@
-import { h } from './index-38ad4957.js';
+import { h } from './index-b3a06de8.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as gap } from './mixins-f750863a.js';
 

package/dist/esm/{ShadowViewAddon-a470afbc.js → ShadowViewAddon-78a1c35c.js}

@@ -1,19 +1,19 @@
-import { h, c as Host, d as getAssetPath, F as Fragment, g as getElement } from './index-38ad4957.js';
-import { i as intl } from './global-31893424.js';
-import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-50442785.js';
-import { H, L, J, d as dist, w as wn, j as jn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-0bef7c88.js';
+import { h, c as Host, d as getAssetPath, F as Fragment, g as getElement } from './index-b3a06de8.js';
+import { i as intl } from './global-58a69018.js';
+import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-63370afd.js';
+import { H, L, J, d as dist, w as wn, j as jn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-9287638d.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-c2e809cf.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-87259b11.js';
-import { u as useChildElements } from './useChildElements-3721fb0b.js';
-import { l as luxon } from './luxon-1be92a8e.js';
-import { T as TextSpanView } from './sqm-text-span-view-738acfb3.js';
+import { C as CopyTextView } from './copy-text-view-fac47254.js';
+import { u as useChildElements } from './useChildElements-3d872cef.js';
+import { l as luxon } from './luxon-bbf75a9d.js';
+import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-add80719.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-a8c708cd.js';
+import { a as isValidColor, b as isMobile } from './utilities-72c07b09.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-176e92e3.js';
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
@@ -2849,14 +2849,14 @@ function ChangeMarktingView(props) {
 }
 
 const vanillaStyle$5 = `
-  :host{
+  :host {
     margin: 0 auto;
     width: 100%;
   }
-  a{
+  a {
     cursor:pointer;
     color: var(--sqm-text-subdued);
-    text-decoration: none ;
+    text-decoration: none;
   }
 `;
 function PortalFooterView(props) {