@saasquatch/mint-components 1.10.3 → 1.11.0-1

package/dist/esm/sqm-banking-info-form_16.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as Host, g as getElement } from './index-17b4da69.js';
 import { m as useRef, k as useState, f as useEffect, n as h$1, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-ac12ca1c.js';
-import { i as intl } from './global-04c7d3b5.js';
+import { i as intl } from './global-e7bb0343.js';
 import { d as dist, L, Q, t as bn, I as In, M as Mn, f as $e, i as isDemo, w as wn, u as useCallback, k as kn, v as Pn, _, C as Cn, F as Fn } from './index.module-def4aec5.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -12,7 +12,7 @@ import { u as useChildElements } from './useChildElements-32e1bda1.js';
 import { l as luxon } from './luxon-7600be8d.js';
 import { g as generateUserError } from './useReferralTable-f4de0650.js';
 import { g as getProps, l as luxonLocale } from './utils-334c1e34.js';
-import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-34ac7513.js';
+import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-2175569f.js';
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
 const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
@@ -745,8 +745,7 @@ const style = {
     background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
-    width: "100%",
-    maxWidth: "320px",
+    width: "320px",
     height: "40px",
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",
@@ -1635,6 +1634,13 @@ const GET_TAX_DOCUMENT = dist.gql `
     }
   }
 `;
+const COMPLETE_TAX_DOCUMENT = dist.gql `
+  mutation completeImpactPublisherTaxDocument($vars: UserIdInput!) {
+    completeImpactPublisherTaxDocument(user: $vars) {
+      success
+    }
+  }
+`;
 const DOCUSIGN_ERROR_STATES = [
   "exception",
   "decline",
@@ -1642,22 +1648,22 @@ const DOCUSIGN_ERROR_STATES = [
   "fax_pending",
 ];
 const DOCUSIGN_EXPIRED_STATES = ["ttl_expired", "session_timeout"];
-const DOCUSIGN_SUCCESS_STATES = ["signing_complete", "viewing_complete"];
 function useDocusignForm(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const user = Q();
   const context = In(TAX_FORM_CONTEXT_NAMESPACE);
   const [step, setStep] = bn(TAX_CONTEXT_NAMESPACE);
   const { data, loading: userLoading, refetch, } = Mn(USER_QUERY_NAMESPACE);
   const publisher = (_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;
   const [createTaxDocument, { loading: documentLoading, data: document, errors: documentErrors },] = $e(GET_TAX_DOCUMENT);
+  const [completeTaxDocument, { loading: completeDocumentLoading, data: completeData, errors: completeErrors, },] = $e(COMPLETE_TAX_DOCUMENT);
   const [docusignStatus, setDocusignStatus] = useState(undefined);
   const [participantType, setParticipantType] = useState(undefined);
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
   // Only look at current document if it's valid (same as required type)
-  const existingDocumentType = validTaxDocument(publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType, (_c = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _c === void 0 ? void 0 : _c.type)
-    ? (_d = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _d === void 0 ? void 0 : _d.type : undefined;
+  const existingDocumentType = validTaxDocument(publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType) && (publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument)
+    ? publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType : undefined;
   const actualDocumentType = existingDocumentType ||
     getDocumentType(participantType) || (publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType);
   useEffect(() => {
@@ -1671,19 +1677,14 @@ function useDocusignForm(props) {
     }
   }, [existingDocumentType]);
   useEffect(() => {
-    var _a;
     // Skip if no publisher info
     if (!user || !publisher)
       return;
-    // Skip on initial load of W8 case
-    if (((_a = publisher.requiredTaxDocumentType) === null || _a === void 0 ? void 0 : _a.startsWith("W8")) &&
-      !publisher.currentTaxDocument &&
-      !participantType)
-      return;
     const fetchDocument = async () => {
       try {
         const result = await createTaxDocument({
           vars: {
+            provider: "COMPLY_EXCHANGE",
             user: {
               id: user.id,
               accountId: user.accountId,
@@ -1702,33 +1703,36 @@ function useDocusignForm(props) {
     };
     fetchDocument();
   }, [user, publisher, participantType]);
-  useEffect(() => {
-    const onSubmit = async () => {
-      try {
-        setLoading(true);
-        await refetch();
-        // Skip banking info form if it already is saved
-        // or if brandedSignup is false
-        setStep(context.overrideNextStep ||
-          !!(publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) ||
-          !(publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup)
-          ? "/dashboard"
-          : "/4");
-      }
-      catch (e) {
-        setErrors({ general: true });
-      }
-      finally {
-        setLoading(false);
-      }
-    };
-    // Handled in view
-    if (DOCUSIGN_ERROR_STATES.includes(docusignStatus))
+  const completeDocument = async () => {
+    if (!user)
       return;
-    if (DOCUSIGN_SUCCESS_STATES.includes(docusignStatus)) {
-      onSubmit();
+    try {
+      setLoading(true);
+      const result = await completeTaxDocument({
+        vars: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+      });
+      console.log({ result });
+      if (!result || result.message)
+        throw new Error();
+      // @ts-expect-error: no data type for result
+      if (!result.completeImpactPublisherTaxDocument.success)
+        throw new Error();
+      setStep(context.overrideNextStep ||
+        !!(publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) ||
+        !(publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup)
+        ? "/dashboard"
+        : "/4");
+    }
+    catch (e) {
+      setErrors({ general: true });
+    }
+    finally {
+      setLoading(false);
     }
-  }, [docusignStatus, refetch]);
+  };
   const allLoading = userLoading || documentLoading || loading;
   return {
     states: {
@@ -1736,7 +1740,7 @@ function useDocusignForm(props) {
       hideSteps: context.hideSteps,
       disabled: allLoading,
       participantTypeDisabled: allLoading || !!existingDocumentType,
-      loading: userLoading || loading,
+      loading: userLoading || loading || completeDocumentLoading,
       urlLoading: documentLoading,
       loadingError: !!(documentErrors === null || documentErrors === void 0 ? void 0 : documentErrors.message),
       formState: {
@@ -1750,10 +1754,11 @@ function useDocusignForm(props) {
     },
     data: {
       taxForm: actualDocumentType,
-      documentUrl: (_e = document === null || document === void 0 ? void 0 : document.createImpactPublisherTaxDocument) === null || _e === void 0 ? void 0 : _e.documentUrl,
+      documentUrl: (_c = document === null || document === void 0 ? void 0 : document.createImpactPublisherTaxDocument) === null || _c === void 0 ? void 0 : _c.documentUrl,
     },
     callbacks: {
       setDocusignStatus,
+      completeDocument,
       setParticipantType,
     },
     text: props.getTextProps(),
@@ -1771,7 +1776,8 @@ function getDocumentType(p) {
 const style$1 = {
   DocusignStatusContainer: {
     width: "100%",
-    height: "600px",
+    minHeight: "600px",
+    height: "900px",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -1825,21 +1831,26 @@ const DocusignLoadingView = () => {
     h("div", { class: classes.DocusignStatusContainer },
       h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
 };
-const DocusignIframe = ({ states, callbacks, text, }) => {
+const DocusignIframe = ({ states, data, callbacks, text, }) => {
   if (states.urlLoading)
     return h(DocusignLoadingView, null);
+  // TODO: Confirm impact domain before launch
+  const allowedDomains = [
+    "referralsaasquatch.com",
+    "impacttech.complysandbox.com",
+  ];
   const callback = useCallback((e) => {
-    var _a;
-    if (!((_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes("referralsaasquatch.com")))
+    const allowed = allowedDomains.some((d) => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes(d); });
+    if (!allowed)
       return;
-    if (!e.data)
-      return;
-    callbacks.onStatusChange(e.data.eventStatus);
+    if (e.data === "Complyexchange Thank you page Exit") {
+      callbacks.completeDocument();
+    }
   }, []);
   useEffect(() => {
-    window.addEventListener("message", callback);
+    window.addEventListener("message", callback, false);
     return () => {
-      window.removeEventListener("message", callback);
+      window.removeEventListener("message", callback, false);
     };
   }, []);
   if (DOCUSIGN_ERROR_STATES.includes(states.status)) {
@@ -1847,8 +1858,9 @@ const DocusignIframe = ({ states, callbacks, text, }) => {
   }
   if (DOCUSIGN_EXPIRED_STATES.includes(states.status))
     return h(DocusignExpiredView, { text: text });
-  return (h("iframe", { frameBorder: "0", src: states.url, width: "100%", height: "600px" }));
+  return (h("iframe", { frameBorder: "0", src: data.documentUrl, width: "100%", height: "1000px" }));
 };
+// NWH4QF
 
 const style$2 = {
   FormWrapper: {
@@ -1988,7 +2000,7 @@ const vanillaStyle$1 = `
 
   `;
 const DocusignFormView = (props) => {
-  var _a, _b;
+  var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
   const { classes } = sheet$2;
   return (h("div", { class: classes.Container },
@@ -2014,23 +2026,7 @@ const DocusignFormView = (props) => {
       h("strong", null, text.error.generalTitle),
       h("br", null),
       text.error.generalDescription)),
-    states.documentType !== "W9" && (h("div", { class: classes.CheckboxWrapper },
-      h("p", { class: classes.BoldText }, text.participantType),
-      states.loading ? (h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h("div", { style: { display: "flex", flexDirection: "column" } },
-        h("sl-radio", { exportparts: "base: radio-base", value: "individualParticipant", name: "/participantType", checked: formState.participantType === "individualParticipant", disabled: states.disabled || states.participantTypeDisabled, onClick: () => {
-            if (states.disabled || states.participantTypeDisabled)
-              return;
-            callbacks.setParticipantType("individualParticipant");
-          } },
-          h("span", { class: classes.RadioText }, text.individualParticipant)),
-        h("sl-radio", { exportparts: "base: radio-base", value: "businessEntity", name: "/participantType", checked: formState.participantType === "businessEntity", disabled: states.disabled || states.participantTypeDisabled, onClick: () => {
-            if (states.disabled || states.participantTypeDisabled)
-              return;
-            callbacks.setParticipantType("businessEntity");
-          } },
-          h("span", { class: classes.RadioText }, text.businessEntity)))),
-      ((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.participantType) && (h("p", { class: classes.ErrorText }, text.error.participantType)))),
-    (states.documentType === "W9" || formState.participantType) && (h("div", null,
+    h("div", null,
       h("div", null,
         h("h5", { class: classes.BoldText }, intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),
         h("p", null, intl.formatMessage({
@@ -2045,7 +2041,7 @@ const DocusignFormView = (props) => {
         h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
           h("sl-icon", { class: classes.InfoIcon, slot: "icon", name: "info-circle" }),
           text.docusignSessionWarning),
-        slots.docusignIframeSlot)))));
+        slots.docusignIframeSlot))));
 };
 
 const DocusignForm = class {
@@ -2168,12 +2164,13 @@ const DocusignForm = class {
     const _isDemo = isDemo();
     const props = _isDemo ? useDocusignFormDemo(this) : useDocusignForm(this);
     const docusignIframeSlot = (h(DocusignIframe, { states: {
-        url: props.data.documentUrl,
         status: props.states.docusignStatus,
         loading: props.states.loading,
         urlLoading: props.states.urlLoading,
+      }, data: {
+        documentUrl: props.data.documentUrl,
       }, callbacks: {
-        onStatusChange: props.callbacks.setDocusignStatus,
+        completeDocument: props.callbacks.completeDocument,
       }, text: props.text }));
     return (h(Host, null, h(DocusignFormView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {
         docusignIframeSlot: _isDemo
@@ -2521,7 +2518,7 @@ function useIndirectTaxForm(props) {
     setFormState((p) => ({ ...p, [field]: value }));
   };
   const onSubmit = async (event) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     if (!option) {
       setErrors({ taxDetails: true });
       return;
@@ -2582,7 +2579,7 @@ function useIndirectTaxForm(props) {
       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, (_f = resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument) === null || _f === void 0 ? void 0 : _f.type);
+      const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
       if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
         !hasValidCurrentDocument) {
         // Go to docusign form
@@ -3722,8 +3719,7 @@ function getCurrentStep(user) {
   }
   const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, } = user.impactConnection.publisher;
   // If they do have a required document, look at current document
-  if (requiredTaxDocumentType &&
-    !validTaxDocument(requiredTaxDocumentType, currentTaxDocument === null || currentTaxDocument === void 0 ? void 0 : currentTaxDocument.type))
+  if (requiredTaxDocumentType && !currentTaxDocument)
     return "/3";
   if (!withdrawalSettings && brandedSignup)
     return "/4";
@@ -5170,7 +5166,7 @@ function getIndirectTaxType(taxInformation) {
   return "Indirect Tax";
 }
 const useTaxAndCashDashboard = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const setStep = wn(TAX_CONTEXT_NAMESPACE);
   const setContext = wn(TAX_FORM_CONTEXT_NAMESPACE);
   const [showDialog, setShowDialog] = useState(false);
@@ -5181,8 +5177,8 @@ const useTaxAndCashDashboard = (props) => {
   }, []);
   const { data, loading, errors: userError, } = Mn(USER_QUERY_NAMESPACE);
   const publisher = (_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;
-  const documentType = (_c = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _c === void 0 ? void 0 : _c.type;
-  const submissionDate = (_d = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _d === void 0 ? void 0 : _d.dateCreated;
+  const documentType = publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType;
+  const submissionDate = (_c = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _c === void 0 ? void 0 : _c.dateCreated;
   const dateSubmitted = submissionDate
     ? luxon.DateTime.fromMillis(submissionDate).toFormat("LLL dd, yyyy")
     : undefined;
@@ -5203,23 +5199,23 @@ const useTaxAndCashDashboard = (props) => {
     });
     setStep("/3");
   };
-  const provinceName = (_e = INDIRECT_TAX_PROVINCES.find((p) => { var _a; return p.regionCode === ((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxRegion); })) === null || _e === void 0 ? void 0 : _e.displayName;
+  const provinceName = (_d = INDIRECT_TAX_PROVINCES.find((p) => { var _a; return p.regionCode === ((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxRegion); })) === null || _d === void 0 ? void 0 : _d.displayName;
   return {
     states: {
       dateSubmitted,
       documentType,
       canEditPayoutInfo: publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup,
       documentTypeString: taxTypeToName(documentType),
-      status: (_f = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _f === void 0 ? void 0 : _f.status,
-      subRegion: getSubRegionName((_g = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _g === void 0 ? void 0 : _g.indirectTaxRegion),
-      subRegionTaxNumber: (_h = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _h === void 0 ? void 0 : _h.withholdingTaxId,
-      qstNumber: (_j = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _j === void 0 ? void 0 : _j.additionalTaxId,
+      status: (_e = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _e === void 0 ? void 0 : _e.status,
+      subRegion: getSubRegionName((_f = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _f === void 0 ? void 0 : _f.indirectTaxRegion),
+      subRegionTaxNumber: (_g = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _g === void 0 ? void 0 : _g.withholdingTaxId,
+      qstNumber: (_h = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _h === void 0 ? void 0 : _h.additionalTaxId,
       indirectTaxType: getIndirectTaxType(publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation),
-      indirectTaxNumber: (_k = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _k === void 0 ? void 0 : _k.indirectTaxId,
+      indirectTaxNumber: (_j = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _j === void 0 ? void 0 : _j.indirectTaxId,
       isBusinessEntity: (publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType) === "W8BENE",
       province: provinceName,
-      country: getCountryName((_l = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _l === void 0 ? void 0 : _l.indirectTaxCountryCode, locale),
-      notRegistered: !((_m = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _m === void 0 ? void 0 : _m.indirectTaxId),
+      country: getCountryName((_k = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _k === void 0 ? void 0 : _k.indirectTaxCountryCode, locale),
+      notRegistered: !((_l = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _l === void 0 ? void 0 : _l.indirectTaxId),
       noFormNeeded: !documentType,
       disabled: loading,
       loading,
@@ -6596,27 +6592,6 @@ const style$6 = {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
-  PhoneInputsSection: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    gap: "4px",
-    "& p": {
-      fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-input-label-color)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-  },
-  PhoneInputsContainer: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: "4px",
-    width: "100%",
-    "& #phoneNumber": {
-      width: "100%",
-      minWidth: "0px",
-    },
-  },
 };
 const sheet$5 = createStyleSheet(style$6);
 const styleString$5 = sheet$5.toString();
@@ -6642,7 +6617,7 @@ const vanillaStyle$3 = `
     }
 
     sl-select#phoneNumberCountryCode::part(menu) {
-      min-width: 250px;
+      width: 450px;
     }
   `;
 const UserInfoFormView = (props) => {
@@ -6725,39 +6700,37 @@ 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("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) ? {
-                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", { value: c.countryCode },
-                    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));
-                }), (_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" }, `${(_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: ({ 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("div", { style: { display: "flex", gap: "4px" } },
+            h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", 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, base: input-base", 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, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&