@saasquatch/mint-components 2.0.5-2 → 2.0.5

package/dist/esm/{sqm-big-stat_44.entry.js → sqm-big-stat_47.entry.js}

@@ -1,31 +1,33 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-38ad4957.js';
-import { b as buildFontsCssUrl, i as intl } from './global-fc653a2a.js';
-import { n as h, f as useEffect, i as d, k as useState, m as useRef, u as useMemo, b as browser, j as useReducer } from './dom-context-hooks.module-50442785.js';
-import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, b as useCallback, L, y as yn, j as jn, p as Ue, s as setUserIdentity, Q as Qe, k as kn, M as Mn, I as In, S as Sn } from './index.module-849b7d56.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
+import { b as buildFontsCssUrl, i as intl } from './global-58a69018.js';
+import { n as h, f as useEffect, i as d, k as useState, m as useRef, u as useMemo, b as browser, j as useReducer } from './dom-context-hooks.module-63370afd.js';
+import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, u as useCallback, L, y as yn, j as jn, q as Ue, r as un, V as Ve, b as setUserIdentity, Q as Qe, k as kn, M as Mn, I as In, S as Sn } from './index.module-c9811a48.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './useReferralCodes-f87eea47.js';
+import './useReferralCodes-c2e809cf.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-87259b11.js';
-import './sqm-text-span-view-738acfb3.js';
-import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-f149c3ba.js';
-import { a as useRequestRerender } from './re-render-2a5345de.js';
-import { u as useChildElements } from './useChildElements-14eb2cd7.js';
-import './luxon-1be92a8e.js';
+import { C as CopyTextView } from './copy-text-view-fac47254.js';
+import { a as useRequestRerender } from './re-render-7e22fb0d.js';
+import { u as useChildElements } from './useChildElements-3d872cef.js';
+import './luxon-bbf75a9d.js';
+import './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { E as EmailRegistrationView } from './email-registration-view-4cdb4129.js';
-import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-6685ce53.js';
-import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-0d1c899e.js';
-import { i as isEmpty } from './utilities-8dba1079.js';
-import { E as ErrorView } from './ErrorView-74cb3af8.js';
-import { u as useDemoBigStat, U as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, d as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, O as LeadDropdownFieldView, M as LeadFormView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, e as ChangeMarktingView, P as PortalChangePasswordView, f as PortalFooterView, g as PortalFrameView, R as ReferralIframeView, h as RewardExchangeView, W as demoRewardExchange, F as useShareButton, a as ShareButtonView, G as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-2b061a3a.js';
-import './sqm-portal-container-view-a8c708cd.js';
-import { g as getCountryObj, L as LoadingView } from './utils-3c8913e6.js';
+import { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-24d594ea.js';
+import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-dda1f52b.js';
+import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-8d4b2620.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
+import { u as usePortalLogin } from './usePortalLogin-f95bbc67.js';
+import { A as AsYouType } from './AsYouType-46f67d0d.js';
+import { i as isEmpty } from './utilities-72c07b09.js';
+import { E as ErrorView } from './ErrorView-bbf0a042.js';
+import { u as useDemoBigStat, W as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as LeadDropdownFieldView, Q as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, j as RewardExchangeView, Y as demoRewardExchange, J as useShareButton, a as ShareButtonView, K as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-78a1c35c.js';
+import './sqm-portal-container-view-176e92e3.js';
+import { T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, b as COUNTRIES_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, g as getCountryObj, c as USER_QUERY_NAMESPACE, G as GET_USER$2, d as COUNTRIES_QUERY_NAMESPACE, e as GET_COUNTRIES, h as FINANCE_NETWORK_SETTINGS_NAMESPACE, i as GET_FINANCE_NETWORK_SETTINGS, j as CURRENCIES_QUERY_NAMESPACE, k as GET_CURRENCIES, L as LoadingView } from './data-a581119a.js';
 import { p as parseStates, e as extractProps } from './extractProps-54064fb0.js';
-import { u as usePayoutStatus, T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, b as COUNTRIES_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, G as GET_USER$2, d as COUNTRIES_QUERY_NAMESPACE, e as GET_COUNTRIES, F as FINANCE_NETWORK_SETTINGS_NAMESPACE, f as GET_FINANCE_NETWORK_SETTINGS, g as CURRENCIES_QUERY_NAMESPACE, h as GET_CURRENCIES } from './data-4390ef62.js';
+import { u as usePayoutStatus } from './usePayoutStatus-7404eb9d.js';
 
 /**
  *
@@ -2897,6 +2899,12 @@ function useDemoPayoutButtonScroll(props) {
 }
 
 const style$2 = {
+  ButtonContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    marginTop: "var(--sl-spacing-medium)",
+    flexWrap: "wrap",
+  },
   SkeletonOne: {
     width: "50%",
     height: "16px",
@@ -3021,7 +3029,7 @@ function PayoutStatusAlertView(props) {
             icon: "exclamation-triangle",
           };
         }
-      case "ACCOUNT_REVIEW":
+      case "NEW_PAYEE_REVIEW":
         return {
           header: text.accountReviewHeader,
           description: intl.formatMessage({
@@ -3034,6 +3042,92 @@ function PayoutStatusAlertView(props) {
           alertType: "warning",
           icon: "exclamation-triangle",
         };
+      case "PAYMENT_HOLD_ON_CHANGE":
+        return {
+          header: text.paymentHoldOnChangeHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentHoldOnChangeDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BENEFICIARY_NAME_INVALID":
+        return {
+          header: text.beneficiaryNameInvalidHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameInvalidDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BENEFICIARY_NAME_MISMATCH":
+        return {
+          header: text.beneficiaryNameMismatchHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameMismatchDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BANK_TAX_NAME_MISMATCH":
+        return {
+          header: text.bankTaxNameMismatchHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.bankTaxNameMismatchDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "WITHDRAWAL_SETTINGS_INVALID":
+        return {
+          header: text.withdrawalSettingsInvalidHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.withdrawalSettingsInvalidDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "PAYMENT_RETURNED":
+        return {
+          header: text.paymentReturnedHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentReturnedDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "error",
+          icon: "exclamation-triangle",
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
@@ -3069,6 +3163,8 @@ function PayoutStatusAlertView(props) {
         return (h$1("div", { style: { paddingTop: "10px" } },
           h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
       default:
+        if (alertDetails.button)
+          return alertDetails.button;
         return;
     }
   }
@@ -3095,6 +3191,15 @@ const PayoutStatusAlert = class {
      * @uiName Info required alert header
      */
     this.informationRequiredHeader = "Payout and tax information required";
+    /**
+     *
+     * @uiName Edit payment info button label
+     */
+    this.editPaymentInformationButton = "Edit Payout Information";
+    /**
+     * @uiName Submit new tax form button label
+     */
+    this.newFormButton = "Submit new tax form";
     /**
      * @uiName Info required alert description
      */
@@ -3118,7 +3223,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification required internal alert header
      */
-    this.verificationRequiredInternalHeader = "Identity Verification in Progress";
+    this.verificationRequiredInternalHeader = "Identity Verification in progress";
     /**
      * @uiName Verification required internal alert description
      */
@@ -3126,7 +3231,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification review internal alert header
      */
-    this.verificationReviewInternalHeader = "Identity Verification Under Review";
+    this.verificationReviewInternalHeader = "Identity Verification under review";
     /**
      * @uiName Verification review internal alert description
      */
@@ -3134,7 +3239,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification failed internal alert header
      */
-    this.verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    this.verificationFailedInternalHeader = "Identity verification unsuccessful";
     /**
      * @uiName Verification failed internal alert description
      */
@@ -3147,6 +3252,54 @@ const PayoutStatusAlert = class {
      * @uiName Account review alert description
      */
     this.accountReviewDescription = "This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.";
+    /**
+     * @uiName Payment on hold alert header
+     */
+    this.paymentHoldOnChangeHeader = "We are reviewing your new payout settings";
+    /**
+     * @uiName Payment on hold alert description
+     */
+    this.paymentHoldOnChangeDescription = "Your payout is temporarily on hold while we review your new payment information, this process is usually resolved within 48 hours.";
+    /**
+     * @uiName Beneficiary name invalid alert header
+     */
+    this.beneficiaryNameInvalidHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name invalid description
+     */
+    this.beneficiaryNameInvalidDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Beneficiary name mismatch alert header
+     */
+    this.beneficiaryNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name mismatch alert description
+     */
+    this.beneficiaryNameMismatchDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Bank name mismatch alert header
+     */
+    this.bankTaxNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Bank name mismatch alert description
+     */
+    this.bankTaxNameMismatchDescription = "The bank account (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Withdrawal settings invalid alert header
+     */
+    this.withdrawalSettingsInvalidHeader = "Your payment information is incomplete or includes invalid characters";
+    /**
+     * @uiName Withdrawal settings invalid alert description
+     */
+    this.withdrawalSettingsInvalidDescription = "There are missing fields or invalid characters in your payment information. Please review your information and make sure it is correct. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Payment returned alert header
+     */
+    this.paymentReturnedHeader = "Payout unsuccessful";
+    /**
+     * @uiName Payment returned alert description
+     */
+    this.paymentReturnedDescription = "Our recent payment attempt for your earnings was unsuccessful. Please review your payment information and make sure it is correct.";
     /**
      * @uiName W-9 payment threshold alert header
      */
@@ -3216,7 +3369,7 @@ function useDemoPayoutStatusAlert(props) {
   return cjs({
     states: {
       error: false,
-      status: "INFORMATION_REQUIRED",
+      status: props.demoData.states.status,
       loading: false,
       veriffLoading: false,
     },
@@ -3225,6 +3378,8 @@ function useDemoPayoutStatusAlert(props) {
     callbacks: {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
+      onPaymentInfoClick: () => { },
+      onNewFormClick: () => { },
     },
   }, formatted || props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -3654,6 +3809,147 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
+function usePortalForgotPassword(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+  const [request, { loading, data, errors }] = un();
+  const urlParams = new URLSearchParams(jn.location.search);
+  const nextPage = urlParams.get("nextPage");
+  const submit = async (event) => {
+    var _a;
+    setError("");
+    setSuccess(false);
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.set(formData, key, value);
+    });
+    const urlParams = nextPage ? { nextPage } : null;
+    const redirectPath = props.redirectPath;
+    const variables = { email: formData.email, urlParams, redirectPath };
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if (result.message)
+        setError(props.networkErrorMessage);
+      return;
+    }
+    if ((_a = result.requestManagedIdentityPasswordResetEmail) === null || _a === void 0 ? void 0 : _a.success) {
+      setSuccess(true);
+    }
+  };
+  return {
+    states: {
+      loading,
+      error: ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
+        error,
+      success,
+      loginPath: props.loginPath,
+      headerText: props.headerText,
+      loginText: props.loginText,
+    },
+    callbacks: {
+      submit,
+    },
+  };
+}
+
+const PortalForgotPassword = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Redirect participants to this page after they verify their email.
+     *
+     * @uiName Email redirect
+     * @uiWidget pageSelect
+     */
+    this.redirectPath = "/resetPassword";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password reset button text
+     */
+    this.submitLabel = "Request Password Reset";
+    /**
+     * @uiName Login redirect path
+     * @uiWidget pageSelect
+     */
+    this.loginPath = "/login";
+    /**
+     * @uiName Header text
+     * @uiWidget textArea
+     */
+    this.headerText = "Enter your email below to receive a password reset link.";
+    /**
+     * @uiName Sign in link text
+     */
+    this.loginText = "Sign In";
+    /**
+     * Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while loading this page. Please refresh the page.";
+    /**
+     * @uiName Email verification sent text
+     */
+    this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
+    /**
+     * @uiName Border radius
+     * @uiWidget number
+     */
+    this.borderRadius = "var(--sqm-border-radius-normal, 8px)";
+    /**
+     * @uiName Border style
+     * @uiWidget textArea
+     */
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = isDemo()
+      ? usePortalForgotPasswordDemo(this)
+      : usePortalForgotPassword(this);
+    const content = {
+      messageSlot: h$1("slot", { name: "messageSlot" }, this.headerText),
+      emailLabel: this.emailLabel,
+      submitLabel: this.submitLabel,
+      successAlertText: this.successAlertText,
+      loginText: this.loginText,
+      backgroundColor: this.backgroundColor,
+      borderRadius: this.borderRadius,
+      border: this.border,
+    };
+    return (h$1(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function usePortalForgotPasswordDemo(props) {
+  return cjs({
+    states: { error: "", loading: false, success: false },
+    callbacks: {
+      submit: async (_event) => { },
+    },
+    content: {
+      secondaryButton: (h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", disabled: false, onClick: () => jn.push(props.loginPath) }, props.loginText)),
+      messageSlot: h$1("span", null, props.headerText),
+      emailLabel: props.emailLabel,
+      submitLabel: props.submitLabel,
+      successAlertText: props.successAlertText,
+      loginText: props.loginText,
+      backgroundColor: props.backgroundColor,
+      borderRadius: props.borderRadius,
+      border: props.border,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = yn();
   return {
@@ -3728,6 +4024,407 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const PortalLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Redirect participants to this page after they successfully login.
+     *
+     * @uiName Login redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password field label
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Submit button text
+     */
+    this.submitLabel = "Sign In";
+    /**
+     * Redirect participants to this page to reset their password
+     * @uiName Forgot password redirect
+     * @uiWidget pageSelect
+     */
+    this.forgotPasswordPath = "/forgotPassword";
+    /**
+     * @uiName Forgot password text
+     */
+    this.forgotPasswordLabel = "Forgot Password?";
+    /**
+     * @uiName Register button text
+     */
+    this.registerLabel = "Register";
+    /**
+     * Redirect participants to this page to start registration.
+     * @uiName Register button redirect
+     * @uiWidget pageSelect
+     */
+    this.registerPath = "/register";
+    /**
+     * @uiName Heading label
+     * @uiWidget textArea
+     */
+    this.pageLabel = "Sign in to your account";
+    /**
+     * Displayed when the login fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while logging you in. Please refresh the page and try again.";
+    /**
+     * @uiName Register CTA
+     */
+    this.registerCTA = "Don't have an account?";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = isDemo()
+      ? useLoginDemo(this)
+      : usePortalLogin(this);
+    const styles = {
+      RegisterButton: {
+        "&::part(label)": {
+          padding: "0",
+        },
+      },
+    };
+    const sheet = createStyleSheet(styles);
+    const styleString = sheet.toString();
+    const content = {
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      googleButton: null,
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+    };
+    return (h$1(PortalLoginView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useLoginDemo(props) {
+  return cjs({
+    states: {
+      error: "",
+      loading: false,
+      forgotPasswordPath: "/forgotPassword",
+      registerPath: "/register",
+      showLoginForm: "manual",
+    },
+    callbacks: {
+      googleSubmit: async () => {
+        console.log("google submit");
+      },
+      submit: async (_event) => {
+        console.log("submit");
+      },
+    },
+    content: {
+      googleButton: null,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+function usePortalRegister(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = useRef(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState({});
+  const [request, { loading, errors, data }] = Ve();
+  useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  const submit = async (event) => {
+    var _a;
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: props.passwordMismatchErrorMessage,
+      };
+    }
+    if (Object.keys(validationErrors).length) {
+      setRegistrationFormState({ loading: false, error: "", validationErrors });
+      // early return for validation errors
+      return;
+    }
+    setRegistrationFormState({
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    formData = { ...formData };
+    const redirectPath = props.redirectPath;
+    const variables = {
+      email,
+      password,
+      formData,
+      redirectPath,
+    };
+    try {
+      const result = await request(variables);
+      if (result instanceof Error) {
+        throw result;
+      }
+      setRegistrationFormState({
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      if ((_a = result.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
+        jn.push(props.nextPage);
+      }
+    }
+    catch (error) {
+      setRegistrationFormState({
+        loading: false,
+        error: props.networkErrorMessage,
+        validationErrors: {},
+      });
+    }
+  };
+  const inputFunction = useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  let errorMessage = "";
+  if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors.length)) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else {
+    errorMessage =
+      ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
+  }
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+      disablePasswordValidation: props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+const PortalRegister = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = false;
+    /**
+     * Redirect participants to this page from their verification email
+     *
+     * @uiName Registration redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * The page that participants are redirected to from the verification email.
+     *
+     * @uiName Email verification redirect
+     * @uiWidget pageSelect
+     */
+    this.redirectPath = "/verifyEmail";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password field label
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Submit button text
+     */
+    this.submitLabel = "Register";
+    /**
+     * @uiName Login button text
+     */
+    this.loginLabel = "Sign in";
+    /**
+     * @uiName Confirm password field label
+     */
+    this.confirmPasswordLabel = "Confirm Password";
+    /**
+     * @uiName Show confirm password field
+     */
+    this.confirmPassword = false;
+    /**
+     * @uiName Disable password validation
+     */
+    this.disablePasswordValidation = false;
+    /**
+     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
+     *
+     * @uiName Hide default fields
+     */
+    this.hideInputs = false;
+    /**
+     * @uiName Header text
+     */
+    this.pageLabel = "Register";
+    /**
+     * Redirect participants to this page after clicking the login button.
+     *
+     * @uiName Login redirect
+     * @uiWidget pageSelect
+     */
+    this.loginPath = "/login";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Cannot be empty";
+    /**
+     * The message to be displayed when a the form submission fails unexpectedly.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     */
+    this.networkErrorMessage = "Network request failed.";
+    /**
+     * The message to be displayed when password inputs do not match.
+     *
+     * @uiName Password mismatch message
+     * @uiWidget textArea
+     */
+    this.passwordMismatchErrorMessage = "Passwords do not match.";
+    /**
+     * The message to be displayed when the email used is invalid or blocked.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     */
+    this.invalidEmailErrorMessage = "Must be a valid email address";
+    /**
+     * @uiName Password requirement met
+     */
+    this.meetsRequirementsText = "Password has met all requirements";
+    /**
+     * @uiName Password requirement failed
+     */
+    this.doesNotMeetRequirementsText = "Password must meet the following requirements:";
+    /**
+     * @uiName Minimum length text
+     */
+    this.minErrorText = "be a minimum of 8 characters";
+    /**
+     * @uiName Missing uppercase text
+     */
+    this.uppercaseErrorText = "contain at least 1 uppercase character";
+    /**
+     * @uiName Missing lowercase text
+     */
+    this.lowercaseErrorText = "contain at least 1 lowercase character";
+    /**
+     * @uiName Missing number or symbol text
+     */
+    this.hasErrorText = "contain at least 1 number or symbol";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = isDemo()
+      ? useRegisterDemo$1(this)
+      : usePortalRegister(this);
+    const content = {
+      formData: h$1("slot", { name: "formData" }),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => jn.push(states.loginPath) }, this.loginLabel))),
+      terms: h$1("slot", { name: "terms" }),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      meetsRequirementsText: this.meetsRequirementsText,
+      doesNotMeetRequirementsText: this.doesNotMeetRequirementsText,
+      minErrorText: this.minErrorText,
+      uppercaseErrorText: this.uppercaseErrorText,
+      lowercaseErrorText: this.lowercaseErrorText,
+      hasErrorText: this.hasErrorText,
+    };
+    return (h$1(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo$1(props) {
+  return cjs({
+    states: {
+      error: "",
+      loading: false,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs || false,
+      customPasswordField: false,
+      loginPath: props.loginPath,
+      disablePasswordValidation: props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 function ProgramExplainerView(props, children) {
   const style = {
     Container: {
@@ -6720,12 +7417,12 @@ const TaxAndCashMonolith = class {
      * @uiName Submit new tax form button label
      * @uiGroup Dashboard Properties
      */
-    this.dashboard_newFormButton = "Submit new form";
+    this.dashboard_newFormButton = "Submit new tax form";
     /**
      * @uiName Edit payment info button label
      * @uiGroup Dashboard Properties
      */
-    this.dashboard_editPaymentInformationButton = "Edit Payout Information";
+    this.dashboard_editPaymentInformationButton = "Edit payout information";
     /**
      * @uiName Not registered for indirect tax text
      * @uiGroup Dashboard Properties
@@ -6877,7 +7574,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_verificationRequiredInternalHeader = "Identity Verification in Progress";
+    this.dashboard_verificationRequiredInternalHeader = "Identity verification in progress";
     /**
      * @uiName Verification required internal alert description
      * @uiGroup Dashboard Properties
@@ -6889,7 +7586,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_verificationReviewInternalHeader = "Identity Verification Under Review";
+    this.dashboard_verificationReviewInternalHeader = "Identity verification under review";
     /**
      * @uiName Verification review internal alert description
      * @uiGroup Dashboard Properties
@@ -6901,7 +7598,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    this.dashboard_verificationFailedInternalHeader = "Identity verification usuccessful";
     /**
      * @uiName Verification failed internal alert description
      * @uiGroup Dashboard Properties
@@ -6935,6 +7632,54 @@ const TaxAndCashMonolith = class {
      * @uiName Account review alert description
      */
     this.dashboard_accountReviewDescription = "This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.";
+    /**
+     * @uiName Payment on hold alert header
+     */
+    this.dashboard_paymentOnHoldHeader = "We are reviewing your new payout settings";
+    /**
+     * @uiName Payment on hold alert description
+     */
+    this.dashboard_paymentOnHoldDescription = "Your payout is temporarily on hold while we review your new payment information, this process is usually resolved within 48 hours.";
+    /**
+     * @uiName Beneficiary name invalid alert header
+     */
+    this.dashboard_beneficiaryNameInvalidHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name invalid description
+     */
+    this.dashboard_beneficiaryNameInvalidDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Beneficiary name mismatch alert header
+     */
+    this.dashboard_beneficiaryNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name mismatch alert description
+     */
+    this.dashboard_beneficiaryNameMismatchDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Bank name mismatch alert header
+     */
+    this.dashboard_bankNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Bank name mismatch alert description
+     */
+    this.dashboard_bankNameMismatchDescription = "The bank account (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Withdrawal settings invalid alert header
+     */
+    this.dashboard_withdrawalSettingsInvalidHeader = "Your payment information is incomplete or includes invalid characters";
+    /**
+     * @uiName Withdrawal settings invalid alert description
+     */
+    this.dashboard_withdrawalSettingsInvalidDescription = "There are missing fields or invalid characters in your payment information. Please review your information and make sure it is correct. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Payment returned alert header
+     */
+    this.dashboard_paymentReturnedHeader = "Payout unsuccessful";
+    /**
+     * @uiName Payment returned alert description
+     */
+    this.dashboard_paymentReturnedDescription = "Our recent payment attempt for your earnings was unsuccessful. Please review your payment information and make sure it is correct.";
     /**
      * @uiName Terms and Conditions text
      * @uiGroup Dashboard Properties
@@ -7333,4 +8078,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, SqmBrandSelector as sqm_brand_selector, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, LeadDropdownField as sqm_lead_dropdown_field, LeadForm as sqm_lead_form, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, ReferredRegistration as sqm_referred_registration, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, TaxAndCashMonolith as sqm_tax_and_cash, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };
+export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, SqmBrandSelector as sqm_brand_selector, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, LeadDropdownField as sqm_lead_dropdown_field, LeadForm as sqm_lead_form, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalForgotPassword as sqm_portal_forgot_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, ReferredRegistration as sqm_referred_registration, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, TaxAndCashMonolith as sqm_tax_and_cash, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };