@saasquatch/mint-components 1.8.3-2 → 1.8.3

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

@@ -29,6 +29,34 @@ export class TaxForm {
      * @uiName Country field label
      */
     this.country = "Country";
+    /**
+     * @uiName Phone number field label
+     */
+    this.phoneNumber = "Phone number";
+    /**
+     * @uiName Address field label
+     */
+    this.address = "Address";
+    /**
+     * @uiName City field label
+     */
+    this.city = "City";
+    /**
+     * @uiName State field label
+     */
+    this.state = "State";
+    /**
+     * @uiName State field label
+     */
+    this.province = "Province";
+    /**
+     * @uiName State field label
+     */
+    this.region = "Region";
+    /**
+     * @uiName Postal code field label
+     */
+    this.postalCode = "Postal code";
     /**
      * @uiName Currency field label
      */
@@ -99,6 +127,16 @@ export class TaxForm {
      * @uiName Empty form field error message
      */
     this.fieldRequiredError = "{fieldName} is required";
+    /**
+     * Displayed under a field when it has an invalid entry.
+     * @uiName Form field error message
+     */
+    this.fieldInvalidError = "{fieldName} is invalid";
+    /**
+     * Displayed under Address or City fields that includes invalid characters (non-ASCII).
+     * @uiName Invalid character error message
+     */
+    this.invalidCharacterError = "{fieldName} includes characters that aren't supported.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Page load error message title
@@ -125,10 +163,12 @@ export class TaxForm {
       ...props,
       error: {
         fieldRequiredError: props.fieldRequiredError,
+        fieldInvalidError: props.fieldInvalidError,
         generalTitle: props.generalErrorTitle,
         generalDescription: props.generalErrorDescription,
         loadingErrorAlertHeader: props.loadingErrorAlertHeader,
         loadingErrorAlertDescription: props.loadingErrorAlertDescription,
+        invalidCharacterError: props.invalidCharacterError,
       },
     };
   }
@@ -229,6 +269,153 @@ export class TaxForm {
       "reflect": false,
       "defaultValue": "\"Country\""
     },
+    "phoneNumber": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Phone number field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "phone-number",
+      "reflect": false,
+      "defaultValue": "\"Phone number\""
+    },
+    "address": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Address field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "address",
+      "reflect": false,
+      "defaultValue": "\"Address\""
+    },
+    "city": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "City field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "city",
+      "reflect": false,
+      "defaultValue": "\"City\""
+    },
+    "state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "State field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "state",
+      "reflect": false,
+      "defaultValue": "\"State\""
+    },
+    "province": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "State field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "province",
+      "reflect": false,
+      "defaultValue": "\"Province\""
+    },
+    "region": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "State field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "region",
+      "reflect": false,
+      "defaultValue": "\"Region\""
+    },
+    "postalCode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Postal code field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "postal-code",
+      "reflect": false,
+      "defaultValue": "\"Postal code\""
+    },
     "currency": {
       "type": "string",
       "mutable": false,
@@ -538,6 +725,48 @@ export class TaxForm {
       "reflect": false,
       "defaultValue": "\"{fieldName} is required\""
     },
+    "fieldInvalidError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Form field error message",
+            "name": "uiName"
+          }],
+        "text": "Displayed under a field when it has an invalid entry."
+      },
+      "attribute": "field-invalid-error",
+      "reflect": false,
+      "defaultValue": "\"{fieldName} is invalid\""
+    },
+    "invalidCharacterError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Invalid character error message",
+            "name": "uiName"
+          }],
+        "text": "Displayed under Address or City fields that includes invalid characters (non-ASCII)."
+      },
+      "attribute": "invalid-character-error",
+      "reflect": false,
+      "defaultValue": "\"{fieldName} includes characters that aren't supported.\""
+    },
     "loadingErrorAlertHeader": {
       "type": "string",
       "mutable": false,
@@ -612,7 +841,7 @@ export class TaxForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseUserInfoFormResult>",
-        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; countryCode: string; currency: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; }; data?: { currencies: { displayName: string; currencyCode: string; }[]; countries: TaxCountry[]; allCurrencies: { displayName: string; currencyCode: string; }[]; allCountries: TaxCountry[]; }; 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; }[]; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -654,16 +883,19 @@ function useDemoUserInfoForm(props) {
     refs: {
       formRef: { current: null },
       currencyRef: { current: null },
+      phoneCountryRef: { current: null },
     },
     data: {
       currencies: [{ currencyCode: "CAD", displayName: "CAD" }],
       allCurrencies: [{ currencyCode: "CAD", displayName: "CAD" }],
       countries: [{ countryCode: "CA", displayName: "Canada" }],
+      phoneCountries: [{ countryCode: "CA", displayName: "Canada" }],
       allCountries: [{ countryCode: "CA", displayName: "Canada" }],
     },
     callbacks: {
       setCurrencySearch: (c) => console.log(c),
       setCountrySearch: (c) => console.log(c),
+      setPhoneCountrySearch: (c) => console.log(c),
       onFormChange: () => { },
     },
     states: {

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

@@ -2,10 +2,12 @@ import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hoo
 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 "../sqm-tax-and-cash/data";
 import { objectIsFull } from "../utils";
-import { useParent, useParentQueryValue, useParentValue } from "@saasquatch/component-boilerplate";
+import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
+import { ADDRESS_REGIONS } from "../subregions";
 export function useUserInfoForm(props) {
   var _a, _b, _c, _d;
   const currencyRef = useRef(undefined);
+  const phoneCountryRef = useRef(undefined);
   const formRef = useRef(null);
   const context = useParentValue(TAX_FORM_CONTEXT_NAMESPACE);
   const countries = useParentValue(SORTED_COUNTRIES_NAMESPACE);
@@ -15,12 +17,14 @@ export function useUserInfoForm(props) {
   const _currencies = useParentValue(CURRENCIES_NAMESPACE);
   const currencies = useMemo(() => [...(_currencies || [])].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
   const [countrySearch, setCountrySearch] = useState("");
+  const [phoneCountrySearch, setPhoneCountrySearch] = useState("");
   const [filteredCountries, setFilteredCountries] = useState(countries || []);
+  const [filteredPhoneCountries, setFilteredPhoneCountries] = useState(countries || []);
   const [currencySearch, setCurrencySearch] = useState("");
   const [filteredCurrencies, setFilteredCurrencies] = useState(currencies || []);
   const [formErrors, setErrors] = useState({});
   useEffect(() => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const user = data === null || data === void 0 ? void 0 : data.user;
     if (!user || step !== "/1")
       return;
@@ -35,6 +39,12 @@ export function useUserInfoForm(props) {
         lastName: user.impactConnection.user.lastName,
         countryCode: user.impactConnection.publisher.countryCode,
         currency: user.impactConnection.publisher.currency,
+        phoneNumberCountryCode: user.impactConnection.publisher.phoneNumberCountryCode,
+        phoneNumber: user.impactConnection.publisher.phoneNumber,
+        address: user.impactConnection.publisher.billingAddress,
+        city: user.impactConnection.publisher.billingCity,
+        state: user.impactConnection.publisher.billingState,
+        postalCode: user.impactConnection.publisher.billingPostalCode,
       });
     }
     else if (!(userFormContext === null || userFormContext === void 0 ? void 0 : userFormContext.email)) {
@@ -45,6 +55,12 @@ export function useUserInfoForm(props) {
         lastName: user.lastName,
         countryCode: user.countryCode || "US",
         currency: (_c = user.customFields) === null || _c === void 0 ? void 0 : _c.currency,
+        phoneNumberCountryCode: ((_d = user.customFields) === null || _d === void 0 ? void 0 : _d.phoneNumberCountryCode) || "US",
+        phoneNumber: (_e = user.customFields) === null || _e === void 0 ? void 0 : _e.phoneNumber,
+        address: (_f = user.customFields) === null || _f === void 0 ? void 0 : _f.address,
+        city: (_g = user.customFields) === null || _g === void 0 ? void 0 : _g.city,
+        state: (_h = user.customFields) === null || _h === void 0 ? void 0 : _h.state,
+        postalCode: (_j = user.customFields) === null || _j === void 0 ? void 0 : _j.postalCode,
       });
     }
   }, [data, step, userFormContext]);
@@ -57,8 +73,10 @@ export function useUserInfoForm(props) {
       ...userFormContext,
       [field]: value,
     });
-    if (field === "countryCode")
+    if (field === "countryCode") {
+      phoneCountryRef.current.value = value;
       currencyRef.current.value = "";
+    }
   };
   useEffect(() => {
     if (!(countries === null || countries === void 0 ? void 0 : countries.length))
@@ -70,6 +88,16 @@ export function useUserInfoForm(props) {
       setFilteredCountries(countries.filter((c) => c.displayName.toLowerCase().includes(countrySearch.toLowerCase())) || []);
     }
   }, [countrySearch, countries]);
+  useEffect(() => {
+    if (!(countries === null || countries === void 0 ? void 0 : countries.length))
+      return;
+    if (phoneCountrySearch.trim() === "") {
+      setFilteredPhoneCountries(countries || []);
+    }
+    else {
+      setFilteredPhoneCountries(countries.filter((c) => c.displayName.toLowerCase().includes(phoneCountrySearch.toLowerCase())) || []);
+    }
+  }, [phoneCountrySearch, countries]);
   useEffect(() => {
     if (!(currencies === null || currencies === void 0 ? void 0 : currencies.length))
       return;
@@ -89,10 +117,6 @@ export function useUserInfoForm(props) {
         return;
       const key = control.name;
       const value = control.value;
-      // required validation
-      if (control.required && !value) {
-        jsonpointer.set(errors, key, props.fieldRequiredError);
-      }
       // custom validation
       if (typeof control.validationError === "function") {
         const validate = control.validationError;
@@ -100,6 +124,11 @@ export function useUserInfoForm(props) {
         if (validationError)
           jsonpointer.set(errors, key, validationError);
       }
+      // required validation
+      if (control.required) {
+        if (!value || (typeof value === "string" && value.trim() === ""))
+          jsonpointer.set(errors, key, props.fieldRequiredError);
+      }
       jsonpointer.set(formData, key, value);
     });
     if (Object.keys(errors).length) {
@@ -110,12 +139,22 @@ export function useUserInfoForm(props) {
     const { allowBankingCollection, ...userData } = formData;
     setUserFormContext({
       ...userFormContext,
+      phoneNumberCountryCode: userData.phoneNumberCountryCode,
+      phoneNumber: userData.phoneNumber,
       countryCode: userData.countryCode,
+      address: userData.address,
+      city: userData.city,
+      state: userData.state,
+      postalCode: userData.postalCode,
       currency: userData.currency,
     });
     const nextStep = context.overrideNextStep || "/2";
     setStep(nextStep);
   }
+  const hasStates = ["ES", "AU", "US", "CA"].includes(userFormContext.countryCode);
+  const regionObj = hasStates
+    ? ADDRESS_REGIONS[userFormContext === null || userFormContext === void 0 ? void 0 : userFormContext.countryCode]
+    : {};
   return {
     setStep: setStep,
     onSubmit,
@@ -123,20 +162,26 @@ export function useUserInfoForm(props) {
     callbacks: {
       setCurrencySearch,
       setCountrySearch,
+      setPhoneCountrySearch,
       onFormChange,
     },
     refs: {
       formRef,
       currencyRef,
+      phoneCountryRef,
     },
     data: {
       currencies: filteredCurrencies,
       countries: filteredCountries,
+      phoneCountries: filteredPhoneCountries,
       allCurrencies: currencies,
       allCountries: countries,
+      regionLabelEnum: regionObj === null || regionObj === void 0 ? void 0 : regionObj.labelEnum,
+      regions: (regionObj === null || regionObj === void 0 ? void 0 : regionObj.regions) || [],
     },
     states: {
       step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
+      hideState: !hasStates,
       hideSteps: !!context.hideSteps,
       disabled: loading,
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),