@saasquatch/mint-components 1.8.3-3 → 1.8.3

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

@@ -261,5 +261,5 @@ export const BankingInfoFormView = (props) => {
           : slots.paymentFixedDaySelectSlot))))),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        !states.hideBackButton && (h("sl-button", { class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
+        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
 };

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

@@ -8,16 +8,23 @@ import { getCountryObj, validTaxDocument } from "../utils";
 const CONNECT_PARTNER = gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {
-      id
-      accountId
-      impactConnection {
-        connected
-        publisher {
-          brandedSignup
-          requiredTaxDocumentType
-          currentTaxDocument {
-            type
-            status
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
           }
         }
       }
@@ -100,7 +107,7 @@ export function useIndirectTaxForm(props) {
     setFormState((p) => ({ ...p, [field]: value }));
   };
   const onSubmit = async (event) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (!option) {
       setErrors({ taxDetails: true });
       return;
@@ -135,6 +142,12 @@ export function useIndirectTaxForm(props) {
         lastName: userForm.lastName,
         countryCode: userForm.countryCode,
         currency: userForm.currency,
+        address: userForm.address,
+        city: userForm.city,
+        state: userForm.state,
+        postalCode: userForm.postalCode,
+        phoneNumber: userForm.phoneNumber,
+        phoneNumberCountryCode: userForm.phoneNumberCountryCode,
         indirectTaxCountryCode: formData.selectedRegion,
         indirectTaxRegion: formData.province || formData.subRegion,
         indirectTaxId: formData.indirectTaxNumber,
@@ -146,10 +159,16 @@ export function useIndirectTaxForm(props) {
       });
       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 = (_c = (_b = result
-        .createImpactConnection) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher;
-      const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType, (_d = resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument) === null || _d === void 0 ? void 0 : _d.type);
+      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, (_f = resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument) === null || _f === void 0 ? void 0 : _f.type);
       if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
         !hasValidCurrentDocument) {
         // Go to docusign form

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

@@ -25,10 +25,17 @@ export const GET_USER = gql `
             lastName
           }
           publisher {
+            id
+            brandedSignup
             countryCode
             currency
-            requiredTaxDocumentType
-            brandedSignup
+            billingAddress
+            billingCity
+            billingState
+            billingCountryCode
+            billingPostalCode
+            phoneNumberCountryCode
+            phoneNumber
             taxInformation {
               indirectTaxId
               indirectTaxCountryCode
@@ -37,6 +44,7 @@ export const GET_USER = gql `
               withholdingTaxId
               withholdingTaxCountryCode
             }
+            requiredTaxDocumentType
             currentTaxDocument {
               status
               type

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

@@ -41,6 +41,41 @@ export class TaxAndCashMonolith {
      * @uiGroup Step 1 Properties
      */
     this.step1_country = "Country";
+    /**
+     * @uiName Phone number field label
+     * @uiGroup Step 1 Properties
+     */
+    this.step1_phoneNumber = "Phone number";
+    /**
+     * @uiName Address field label
+     * @uiGroup Step 1 Properties
+     */
+    this.step1_address = "Address";
+    /**
+     * @uiName City field label
+     * @uiGroup Step 1 Properties
+     */
+    this.step1_city = "City";
+    /**
+     * @uiName State field label for states
+     * @uiGroup Step 1 Properties
+     */
+    this.step1_state = "State";
+    /**
+     * @uiName State field label for provinces
+     * @uiGroup Step 1 Properties
+     */
+    this.step1_province = "Province";
+    /**
+     * @uiName State field label for regions
+     * @uiGroup Step 1 Properties
+     */
+    this.step1_region = "Region";
+    /**
+     * @uiName Postal code field label
+     * @uiGroup Step 1 Properties
+     */
+    this.step1_postalCode = "Postal code";
     /**
      * @uiName Currency field label
      * @uiGroup Step 1 Properties
@@ -785,6 +820,12 @@ export class TaxAndCashMonolith {
      * @uiGroup General Form Properties
      */
     this.fieldRequiredError = "{fieldName} is required";
+    /**
+     * Displayed under a field that includes invalid characters (non-ASCII).
+     * @uiName Invalid character error message
+     * @uiGroup General Form Properties
+     */
+    this.invalidCharacterError = "{fieldName} includes characters that aren't supported.";
     /**
      * Displayed under a field when it has an invalid entry.
      * @uiName Form field error message
@@ -857,6 +898,7 @@ export class TaxAndCashMonolith {
       generalErrorTitle: props.generalErrorTitle,
       generalErrorDescription: props.generalErrorDescription,
       fieldRequiredError: props.fieldRequiredError,
+      invalidCharacterError: props.invalidCharacterError,
       fieldInvalidError: props.fieldInvalidError,
       continueButton: props.continueButton,
       backButton: props.backButton,
@@ -1003,6 +1045,174 @@ export class TaxAndCashMonolith {
       "reflect": false,
       "defaultValue": "\"Country\""
     },
+    "step1_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": "Step 1 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-1_phone-number",
+      "reflect": false,
+      "defaultValue": "\"Phone number\""
+    },
+    "step1_address": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Address field label",
+            "name": "uiName"
+          }, {
+            "text": "Step 1 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-1_address",
+      "reflect": false,
+      "defaultValue": "\"Address\""
+    },
+    "step1_city": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "City field label",
+            "name": "uiName"
+          }, {
+            "text": "Step 1 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-1_city",
+      "reflect": false,
+      "defaultValue": "\"City\""
+    },
+    "step1_state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "State field label for states",
+            "name": "uiName"
+          }, {
+            "text": "Step 1 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-1_state",
+      "reflect": false,
+      "defaultValue": "\"State\""
+    },
+    "step1_province": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "State field label for provinces",
+            "name": "uiName"
+          }, {
+            "text": "Step 1 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-1_province",
+      "reflect": false,
+      "defaultValue": "\"Province\""
+    },
+    "step1_region": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "State field label for regions",
+            "name": "uiName"
+          }, {
+            "text": "Step 1 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-1_region",
+      "reflect": false,
+      "defaultValue": "\"Region\""
+    },
+    "step1_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": "Step 1 Properties",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "step-1_postal-code",
+      "reflect": false,
+      "defaultValue": "\"Postal code\""
+    },
     "step1_currency": {
       "type": "string",
       "mutable": false,
@@ -4078,6 +4288,30 @@ export class TaxAndCashMonolith {
       "reflect": false,
       "defaultValue": "\"{fieldName} is required\""
     },
+    "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": "General Form Properties",
+            "name": "uiGroup"
+          }],
+        "text": "Displayed under a field that includes invalid characters (non-ASCII)."
+      },
+      "attribute": "invalid-character-error",
+      "reflect": false,
+      "defaultValue": "\"{fieldName} includes characters that aren't supported.\""
+    },
     "fieldInvalidError": {
       "type": "string",
       "mutable": false,

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

@@ -274,7 +274,7 @@ export const TaxAndCashDashboardView = (props) => {
                 documentType: states.documentTypeString,
               })),
               h("span", { class: sheet.classes.StatusAlert }, statusMap[states.status]))),
-          h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: secondarybutton-base" }, text.newFormButton))))))),
+          h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton))))))),
       h("div", { class: sheet.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
         h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,

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

@@ -3,7 +3,7 @@ import { intl } from "../../../../global/global";
 import { createStyleSheet } from "../../../../styling/JSS";
 import { vatLabels } from "../../countries";
 import { INDIRECT_TAX_PROVINCES } from "../../subregions";
-import { getIsRequiredErrorMessage } from "../../utils";
+import { formatErrorMessage } from "../../utils";
 const style = {
   Container: {
     width: "100%",
@@ -88,13 +88,13 @@ export const OtherRegionSlotView = (props) => {
     return (h("div", { class: classes.ConditionalInputsContainer },
       h("sl-select", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, value: formState.subRegion, label: text.subRegion, disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
         class: classes.ErrorInput,
-        helpText: getIsRequiredErrorMessage(text.subRegion, text.error.fieldRequiredError),
+        helpText: formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
       }), { id: "subRegion", name: "/subRegion" }), props.data.esRegions.map((r) => (h("sl-menu-item", { value: r.regionCode }, r.displayName)))),
       h(IndirectTaxNumberInput, { name: "indirectTaxNumber", label: getTaxFieldLabel("VAT"), error: getTaxFieldError("VAT") }),
       h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
       formState.hasSubRegionTaxNumber && (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, label: text.subRegionTaxNumberLabel, disabled: states.loading || states.disabled, value: formState.subRegionTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.subRegionTaxNumber) && {
         class: classes.ErrorInput,
-        helpText: getIsRequiredErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
+        helpText: formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
       }), { id: "subRegionTaxNumber", name: "/subRegionTaxNumber" })))));
   };
   const CanadaFields = () => {
@@ -104,13 +104,13 @@ export const OtherRegionSlotView = (props) => {
     return (h("div", { class: classes.ConditionalInputsContainer },
       h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label", class: classes.Input, label: text.province, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("province", e) }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.province) && {
         class: classes.ErrorInput,
-        helpText: getIsRequiredErrorMessage(text.province, text.error.fieldRequiredError),
+        helpText: formatErrorMessage(text.province, text.error.fieldRequiredError),
       }), { id: "province", name: "/province" }), props.data.provinces.map((p) => (h("sl-menu-item", { value: p.regionCode }, p.displayName)))),
       currentTaxType === "GST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("GST"), error: getTaxFieldError("GST"), name: "indirectTaxNumber" })),
       currentTaxType === "HST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("HST"), error: getTaxFieldError("HST"), name: "indirectTaxNumber" })),
       formState.province === "QUEBEC" && (h("div", { class: classes.ConditionalInputsContainer },
         h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
-        formState.hasQst && (h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: getIsRequiredErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
+        formState.hasQst && (h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
   };
   const getActiveForm = (selectedRegion) => {
     var _a;
@@ -136,7 +136,7 @@ export const OtherRegionSlotView = (props) => {
       h("div", { class: classes.InputContainer },
         h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.selectedRegion, exportparts: "label: input-label", label: text.selectedRegion, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("selectedRegion", e) }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
           class: classes.ErrorInput,
-          helpText: getIsRequiredErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
+          helpText: formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
         }), { id: "selectedRegion", name: "/selectedRegion" }),
           h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
               // Stop shoelace intercepting key presses

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

@@ -3,7 +3,8 @@ import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { GeneralLoadingView } from "../TaxForm.stories";
 import { FORM_STEPS } from "../sqm-tax-and-cash/data";
-import { getIsRequiredErrorMessage } from "../utils";
+import { formatErrorMessage, validateBillingField } from "../utils";
+import { PHONE_EXTENSIONS } from "../phoneExtensions";
 const style = {
   FormWrapper: {},
   ErrorInput: {
@@ -106,9 +107,12 @@ const vanillaStyle = `
       flex-direction: column;
     }
 
+    sl-select#phoneNumberCountryCode::part(menu) {
+      width: 450px;
+    }
   `;
 export const UserInfoFormView = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;
   const { classes } = sheet;
   const bankingCollectionText = intl.formatMessage({
@@ -117,6 +121,20 @@ export const UserInfoFormView = (props) => {
   }, {
     termsAndConditionsLink: (h("a", { href: "https://app.impact.com/", target: "_blank" }, text.termsAndConditionsLabel)),
   });
+  let regionLabel = undefined;
+  switch (data.regionLabelEnum) {
+    case "STATE":
+      regionLabel = text.state;
+      break;
+    case "PROVINCE":
+      regionLabel = text.province;
+      break;
+    case "REGION":
+      regionLabel = text.region;
+      break;
+    default:
+      regionLabel = text.state;
+  }
   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,
@@ -151,18 +169,18 @@ export const UserInfoFormView = (props) => {
         h("div", { class: classes.InputContainer },
           h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
-            helpText: getIsRequiredErrorMessage(text.firstName, text.error.fieldRequiredError),
+            helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
           h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.lastName, label: text.lastName, disabled: states.disabled || states.isUser || states.isPartner }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
             class: classes.ErrorInput,
-            helpText: getIsRequiredErrorMessage(text.lastName, text.error.fieldRequiredError),
+            helpText: formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
           h("sl-input", { exportparts: "label: input-label", 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", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || states.isPartner }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
             class: classes.ErrorInput,
-            helpText: getIsRequiredErrorMessage(text.country, text.error.fieldRequiredError),
+            helpText: formatErrorMessage(text.country, formState.errors.countryCode),
           }
             : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("countryCode", e) }),
             h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
@@ -173,9 +191,66 @@ export const UserInfoFormView = (props) => {
               } }), (_e = data === null || data === void 0 ? void 0 : data.countries) === null || _e === void 0 ? void 0 :
             _e.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_f = data === null || data === void 0 ? void 0 : data.allCountries) === null || _f === void 0 ? void 0 :
             _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
-          h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || states.isPartner, helpText: text.currencyHelpText }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.currency) ? {
+          h("div", { style: { display: "flex", gap: "4px" } },
+            h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label", name: "/phoneNumberCountryCode", label: text.phoneNumber, style: { minWidth: "140px" }, 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) ? {
+              class: classes.ErrorInput,
+            }
+              : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
+              h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+                  // Stop shoelace intercepting key presses
+                  e.stopPropagation();
+                }, "onSl-input": (e) => {
+                  callbacks.setPhoneCountrySearch(e.target.value);
+                } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
+              _h.map((c) => {
+                var _a, _b;
+                return (h("sl-menu-item", { style: { width: "500px" }, value: c.countryCode },
+                  h("div", { slot: "prefix", style: { marginRight: "8px" } }, `${(_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));
+              }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
+              _j.map((c) => {
+                var _a, _b;
+                return (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
+                  h("div", { slot: "prefix", style: { marginRight: "8px" } }, `${(_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", label: " ", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, style: { marginTop: "2px", width: "362px" }, validationError: ({ value }) => 
+              // 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) ? {
+              class: classes.ErrorInput,
+              helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
+            }
+              : {}), { required: true }))),
+          h("sl-input", Object.assign({ exportparts: "label: input-label", 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) ? {
+            class: classes.ErrorInput,
+            helpText: formatErrorMessage(text.address, formState.errors.address),
+          }
+            : {}), { required: true })),
+          h("sl-input", Object.assign({ exportparts: "label: input-label", 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) ? {
+            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", id: "state", name: "/state", value: formState.state, disabled: states.disabled || states.isPartner }, (((_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", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || states.isPartner }, (((_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", 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) ? {
             class: classes.ErrorInput,
-            helpText: getIsRequiredErrorMessage(text.currency, text.error.fieldRequiredError),
+            helpText: formatErrorMessage(text.currency, formState.errors.currency),
           }
             : {}), { required: true, ref: (el) => (refs.currencyRef.current = el) }),
             h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCurrencyText, onKeyDown: (e) => {
@@ -183,12 +258,12 @@ export const UserInfoFormView = (props) => {
                 e.stopPropagation();
               }, "onSl-input": (e) => {
                 callbacks.setCurrencySearch(e.target.value);
-              } }), (_h = data === null || data === void 0 ? void 0 : data.currencies) === null || _h === void 0 ? void 0 :
-            _h.map((c) => (h("sl-menu-item", { value: c.currencyCode },
+              } }), (_s = data === null || data === void 0 ? void 0 : data.currencies) === null || _s === void 0 ? void 0 :
+            _s.map((c) => (h("sl-menu-item", { value: c.currencyCode },
               c.currencyCode,
               " - ",
-              c.displayName))), (_j = data === null || data === void 0 ? void 0 : data.allCurrencies) === null || _j === void 0 ? void 0 :
-            _j.map((c) => (h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
+              c.displayName))), (_t = data === null || data === void 0 ? void 0 : data.allCurrencies) === null || _t === void 0 ? void 0 :
+            _t.map((c) => (h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
               c.currencyCode,
               " - ",
               c.displayName)))),
@@ -196,6 +271,6 @@ export const UserInfoFormView = (props) => {
             h("sl-checkbox", { exportparts: "label: input-label", 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),
-            ((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.allowBankingCollection) && (h("p", { class: classes.ErrorText }, getIsRequiredErrorMessage(text.termsAndConditionsLabel, text.error.fieldRequiredError))))),
+            ((_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))))));
 };