@saasquatch/mint-components 2.2.0-7 → 2.2.0

package/dist/cjs/{sqm-text-span-view-8a32dd8c.js → sqm-text-span-view-b9e10f5d.js}

@@ -53,7 +53,7 @@ function TextSpanView(props, children) {
       display: inline;
     }
   `;
-  return (index.h("span", { class: sheet.classes[type], part: "sqm-text-span-base" },
+  return (index.h("span", { class: sheet.classes[type], part: "sqm-text-span" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8277cbb3.js');
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-8a32dd8c.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b9e10f5d.js');
 
 const TextSpan = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-user-info-form-view-4d56b339.js → sqm-user-info-form-view-53306f6e.js}

@@ -3,8 +3,7 @@
 const index = require('./index-8277cbb3.js');
 const global = require('./global-b7b1b8fe.js');
 const JSS = require('./JSS-8503a151.js');
-const utils = require('./utils-15ce04e3.js');
-const data = require('./data-c03e282a.js');
+const data = require('./data-8c8a08f6.js');
 
 const style = {
   Description: {
@@ -591,13 +590,13 @@ const OtherRegionSlotView = (props) => {
     return (index.h("div", { class: classes.ConditionalInputsContainer },
       index.h("sl-select", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", 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: utils.formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
+        helpText: data.formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
       }), { id: "subRegion", name: "/subRegion" }), props.data.esRegions.map((r) => (index.h("sl-menu-item", { value: r.regionCode }, r.displayName)))),
       index.h(IndirectTaxNumberInput, { name: "indirectTaxNumber", label: getTaxFieldLabel("VAT"), error: getTaxFieldError("VAT") }),
       index.h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
       formState.hasSubRegionTaxNumber && (index.h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", 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: utils.formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
+        helpText: data.formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
       }), { id: "subRegionTaxNumber", name: "/subRegionTaxNumber" })))));
   };
   const CanadaFields = () => {
@@ -607,13 +606,13 @@ const OtherRegionSlotView = (props) => {
     return (index.h("div", { class: classes.ConditionalInputsContainer },
       index.h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label, base: input-base", 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: utils.formatErrorMessage(text.province, text.error.fieldRequiredError),
+        helpText: data.formatErrorMessage(text.province, text.error.fieldRequiredError),
       }), { id: "province", name: "/province" }), props.data.provinces.map((p) => (index.h("sl-menu-item", { value: p.regionCode }, p.displayName)))),
       currentTaxType === "GST" && (index.h(IndirectTaxNumberInput, { label: getTaxFieldLabel("GST"), error: getTaxFieldError("GST"), name: "indirectTaxNumber" })),
       currentTaxType === "HST" && (index.h(IndirectTaxNumberInput, { label: getTaxFieldLabel("HST"), error: getTaxFieldError("HST"), name: "indirectTaxNumber" })),
       formState.province === "QUEBEC" && (index.h("div", { class: classes.ConditionalInputsContainer },
         index.h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
-        formState.hasQst && (index.h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: utils.formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
+        formState.hasQst && (index.h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: data.formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
   };
   const getActiveForm = (selectedRegion) => {
     var _a;
@@ -639,7 +638,7 @@ const OtherRegionSlotView = (props) => {
       index.h("div", { class: classes.InputContainer },
         index.h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.selectedRegion, exportparts: "label: input-label, base: input-base", 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: utils.formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
+          helpText: data.formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
         }), { id: "selectedRegion", name: "/selectedRegion" }),
           index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
               // Stop shoelace intercepting key presses
@@ -1883,7 +1882,7 @@ const vanillaStyle$1 = `
     }
 `;
 const UserInfoFormView = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+  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: data$1, } = props;
   const { classes } = sheet$1;
   const bankingCollectionText = global.intl.formatMessage({
@@ -1906,14 +1905,9 @@ const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
-  // when creating an impact connection without sending phoneNumber data, the impactAPI defaults the value to "0000000" and the phoneNumberCountryCode to "DZ"
   function isDisabledPartnerInput(field) {
-    var _a, _b;
-    if (((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a.phoneNumber) === "0000000" &&
-      (field === "phoneNumber" || field === "phoneNumberCountryCode")) {
-      return false;
-    }
-    return states.isPartner && !!((_b = data$1.partnerData) === null || _b === void 0 ? void 0 : _b[field]);
+    var _a;
+    return states.isPartner && !!((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a[field]);
   }
   function isDisabledUserInput(field) {
     var _a;
@@ -1932,7 +1926,7 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))))),
-    states.loading ? (index.h(utils.LoadingView, null)) : (index.h("div", null,
+    states.loading ? (index.h(data.LoadingView, null)) : (index.h("div", null,
       index.h("div", { class: classes.TextContainer },
         index.h("div", null,
           !states.hideSteps && (index.h("p", null, global.intl.formatMessage({
@@ -1949,22 +1943,30 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
+      (states.isPartner || states.isUser) && (index.h("sqm-form-message", { loading: states.loading, type: "info" },
+        index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+        index.h("p", { part: "alert-description" }, global.intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })))),
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
           index.h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.firstName, formState.errors.firstName),
+            helpText: data.formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
           index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled || isDisabledUserInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.lastName, formState.errors.lastName),
+            helpText: data.formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
           index.h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
           index.h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledPartnerInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.country, formState.errors.countryCode),
+            helpText: data.formatErrorMessage(text.country, formState.errors.countryCode),
           }
             : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("countryCode", e) }),
             index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
@@ -2003,42 +2005,42 @@ const UserInfoFormView = (props) => {
                 })),
               index.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
-                  utils.validateBillingField(/[a-zA-Z]+/, value) &&
-                    utils.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
+                  data.validateBillingField(/[a-zA-Z]+/, value) &&
+                    data.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
                 }, disabled: states.disabled || isDisabledPartnerInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
-                helpText: utils.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
+                helpText: data.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
                 : {}), { required: true })))),
           index.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
-            !utils.validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              utils.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
+            !data.validateBillingField(/^[\x20-\xFF]+$/, value) &&
+              data.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.address, formState.errors.address),
+            helpText: data.formatErrorMessage(text.address, formState.errors.address),
           }
             : {}), { required: true })),
           index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
             // Checks for non-ASCII characters
-            !utils.validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              utils.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
+            !data.validateBillingField(/^[\x20-\xFF]+$/, value) &&
+              data.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.city, formState.errors.city),
+            helpText: data.formatErrorMessage(text.city, formState.errors.city),
           }
             : {}), { required: true })),
           !states.hideState && (index.h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledPartnerInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.state, formState.errors.state),
+            helpText: data.formatErrorMessage(text.state, formState.errors.state),
           }
             : {}), { required: true }), (_p = data$1.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (index.h("sl-menu-item", { value: r.value }, r.label))))),
           index.h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledPartnerInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.postalCode, formState.errors.postalCode),
+            helpText: data.formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency") }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
+          index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency"), helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
             class: classes.ErrorInput,
-            helpText: utils.formatErrorMessage(text.currency, formState.errors.currency),
+            helpText: data.formatErrorMessage(text.currency, formState.errors.currency),
           }
             : {}), { required: true, ref: (el) => (refs.currencyRef.current = el) }),
             index.h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCurrencyText, onKeyDown: (e) => {
@@ -2054,7 +2056,12 @@ const UserInfoFormView = (props) => {
             _t.map((c) => (index.h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
               c.currencyCode,
               " - ",
-              c.displayName))))),
+              c.displayName)))),
+          index.h("div", { class: classes.CheckboxWrapper },
+            index.h("sl-checkbox", { checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+                e.target.value = e.target.checked;
+              }, disabled: states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
+            ((_u = formState.errors) === null || _u === void 0 ? void 0 : _u.allowBankingCollection) && (index.h("p", { class: classes.ErrorText }, data.formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),
         index.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
 };
 

package/dist/cjs/sqm-widget-verification-controller.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8277cbb3.js');
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
 const index_module = require('./index.module-f8c8495f.js');
-const keys = require('./keys-5a2c9ed2.js');
+const keys = require('./keys-cff24974.js');
 
 const debug = domContextHooks_module.browser("sq:widget-verification");
 function useTemplateChildren({ parent, callback }) {

package/dist/cjs/sqm-widget-verification.cjs.entry.js

@@ -0,0 +1,214 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8277cbb3.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-f8c8495f.js');
+const cjs = require('./cjs-1066ec21.js');
+const utils = require('./utils-6847bc06.js');
+const extractProps = require('./extractProps-e9c55ba8.js');
+const keys = require('./keys-cff24974.js');
+
+const USER_LOOKUP = index_module.dist.gql `
+  query checkUserVerification {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+        managedIdentity {
+          email
+          emailVerified
+        }
+      }
+    }
+  }
+`;
+function useWidgetVerification() {
+  const userIdentity = index_module.J();
+  const [showCode, setShowCode] = index_module.In({
+    namespace: keys.SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = index_module.In({
+    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
+  });
+  const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const [loading, setLoading] = domContextHooks_module.useState(true);
+  const [fetch] = index_module.Xe(USER_LOOKUP);
+  domContextHooks_module.useEffect(() => {
+    const checkUser = async () => {
+      var _a, _b, _c;
+      try {
+        const res = await fetch({});
+        if (!res || res instanceof Error)
+          throw new Error();
+        if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
+          setContext(true);
+        else if ((_c = (_b = res === null || res === void 0 ? void 0 : res.viewer) === null || _b === void 0 ? void 0 : _b.managedIdentity) === null || _c === void 0 ? void 0 : _c.emailVerified)
+          setContext(true);
+      }
+      catch (e) {
+        console.error("Could not fetch user information:", e);
+      }
+      finally {
+        setLoading(false);
+      }
+    };
+    checkUser();
+  }, []);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading };
+}
+
+const WidgetVerification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    GENERAL PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName General verify widget header text
+     * @uiGroup General Text
+     */
+    this.general_verifyEmailHeader = "Verify your email";
+    /**
+     * @uiName General verify widget description text
+     * @uiGroup General Text
+     */
+    this.general_verifyEmailDescription = "To get your cash paid out directly to your bank account, please complete your account setup";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify email widget header text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
+    /**
+     * @uiName Send code to email alert header
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorHeader = "There was an error sending your code.";
+    /**
+     * @uiName Send code to email alert description
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    /**
+     * @uiName Email input label
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailLabel = "Email";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailValidationErrorText = "Please enter a valid email";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * @uiName Reverify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * Text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeText = "Didn't receive your code? {resendCodeLink}";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code label
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeLabel = "Resend code";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_codeResentSuccessfullyText = "Another code has been sent to {email}";
+    /**
+     * Error text displayed under verification input
+     * @uiName Invalid code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
+    /**
+     * @uiName Verify code button text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyText = "Verify";
+    /**
+     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /**
+     * @undocumented
+     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" }
+     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" }
+     */
+    this.stateController = "{}";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = utils.getProps(this);
+    return extractProps.extractProps(props, prefix);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoWidgetVerificationInternal(this)
+      : useWidgetVerification();
+    if (props.loading)
+      return index.h("sl-spinner", null);
+    const generalText = this.getStepTextProps("general_");
+    return (index.h("div", null, index.h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), index.h("p", { style: {
+        color: "var(--sl-color-neutral-500)",
+        fontSize: "var(--sl-font-size-medium)",
+        margin: "0",
+      } }, generalText.verifyEmailDescription), props.showCode ? (index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps.extractProps(props, "sqm-code-verification_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps.extractProps(props, "sqm-email-verification_"))))));
+  }
+};
+function useDemoWidgetVerificationInternal(props) {
+  const [showCode, setShowCode] = index_module.In({
+    namespace: keys.SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = index_module.In({
+    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const states = extractProps.parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
+  const onVerification = () => {
+    setContext(true);
+  };
+  return cjs.cjs({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_widget_verification = WidgetVerification;

package/dist/cjs/{usePayoutStatus-0a98ee05.js → usePayoutStatus-0192fccd.js}

@@ -2,7 +2,8 @@
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
 const index_module = require('./index.module-f8c8495f.js');
-const eventKeys = require('./eventKeys-7af4df4d.js');
+
+const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";
 
 var toArray = function toArray(a) {
   var ret = Array(a.length);
@@ -1061,10 +1062,10 @@ function usePayoutStatus(props) {
   }, [data]);
   domContextHooks_module.useEffect(() => {
     const cb = () => refetch();
-    window.addEventListener(eventKeys.TAX_FORM_UPDATED_EVENT_KEY, cb);
+    window.addEventListener(TAX_FORM_UPDATED_EVENT_KEY, cb);
     window.addEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);
     return () => {
-      window.removeEventListener(eventKeys.TAX_FORM_UPDATED_EVENT_KEY, cb);
+      window.removeEventListener(TAX_FORM_UPDATED_EVENT_KEY, cb);
       window.removeEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);
     };
   }, []);
@@ -1108,6 +1109,7 @@ function usePayoutStatus(props) {
   };
 }
 
+exports.TAX_FORM_UPDATED_EVENT_KEY = TAX_FORM_UPDATED_EVENT_KEY;
 exports.VERIFF_COMPLETE_EVENT_KEY = VERIFF_COMPLETE_EVENT_KEY;
 exports.getStatus = getStatus;
 exports.usePayoutStatus = usePayoutStatus;

package/dist/collection/collection-manifest.json

@@ -5,7 +5,6 @@
     "./components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.js",
     "./components/sqm-referral-codes/sqm-referral-codes.js",
     "./components/sqm-pagination/sqm-pagination.js",
-    "./components/sqm-partner-info-modal/sqm-partner-info-modal.js",
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
@@ -122,6 +121,7 @@
     "./components/sqm-timeline/sqm-timeline-entry.js",
     "./components/sqm-timeline/sqm-timeline.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
+    "./components/sqm-user-attribute/sqm-user-attribute.js",
     "./components/sqm-user-name/sqm-user-name.js",
     "./components/sqm-widget-verification/sqm-widget-verification-controller.js",
     "./components/sqm-widget-verification/sqm-widget-verification.js",

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -188,7 +188,7 @@ _, type, unit, status, global = "") => {
         $programId: ID
         $unit: String
         $type: RewardType
-        $statusFilter: RewardStatusFilterInput
+        ${statusFilter ? "$statusFilter: RewardStatusFilterInput" : ""}
       ) {
         viewer {
           ... on User {
@@ -197,7 +197,7 @@ _, type, unit, status, global = "") => {
                 programId_eq: $programId
                 type_eq: $type
                 unit_eq: $unit
-                statuses_eq: $statusFilter
+                ${statusFilter ? "statuses_eq: $statusFilter" : "statuses_nin: [{status: CANCELLED}, {status: EXPIRED}]"}
               }
             ) {
               totalCount
@@ -223,14 +223,14 @@ const integrationRewardsCountFilteredQuery = (programId,
 _, status, global = "") => {
   const statusFilter = status ? { status } : null;
   return debugQuery(gql `
-      query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
+      query ($programId: ID, ${statusFilter ? "$statusFilter: RewardStatusFilterInput" : ""}) {
         viewer {
           ... on User {
             rewards(
               filter: {
                 programId_eq: $programId
                 type_eq: INTEGRATION
-                statuses_eq: $statusFilter
+                ${statusFilter ? "statuses_eq: $statusFilter" : "statuses_nin: [{status: CANCELLED}, {status: EXPIRED}]"}
               }
             ) {
               totalCount
@@ -729,8 +729,7 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
     const balance = arr === null || arr === void 0 ? void 0 : arr[0];
     const totalEarned = balance
-      ? (balance.totalAssignedCredit || 0) +
-        (balance.totalPendingCredit || 0)
+      ? (balance.totalAssignedCredit || 0) + (balance.totalPendingCredit || 0)
       : 0;
     const result = useQuery(gql `
           query (

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -60,7 +60,7 @@ export function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
         if (!value && !content.checkboxOptional) {
           return content.errorMessage;
         }

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -27,7 +27,7 @@ export class CheckboxField {
      */
     this.checkboxLabelLink = "https://example.com";
     /**
-     * @uiName Checkbox label link lext
+     * @uiName Checkbox label link text
      */
     this.checkboxLabelLinkText = "Terms and Conditions";
     /**
@@ -60,7 +60,6 @@ export class CheckboxField {
     return (h(CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
   }
   static get is() { return "sqm-checkbox-field"; }
-  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "checkboxName": {
       "type": "string",
@@ -142,7 +141,7 @@ export class CheckboxField {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Checkbox label link lext",
+            "text": "Checkbox label link text",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
@@ -24,10 +24,9 @@ export function PortalContainerView(props, children) {
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h(Host, null,
-    h("div", { class: sheet.classes.Container, part: "sqm-base" },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString),
-      children)));
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
 }

package/dist/collection/components/sqm-portal-google-login/sqm-portal-google-login.js

@@ -87,7 +87,7 @@ export class PortalGoogleLogin {
     const styleString = sheet.toString();
     const content = {
       forgotPasswordButton: (h("slot", { name: "forgotPassword" },
-        h("a", { onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+        h("a", { part: "forgot-password-link", onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: (h("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })),
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -79,7 +79,7 @@ export class PortalLogin {
     const styleString = sheet.toString();
     const content = {
       forgotPasswordButton: (h("slot", { name: "forgotPassword" },
-        h("a", { onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+        h("a", { part: "forgot-password-link", onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),

package/dist/collection/components/sqm-referral-iframe/ReferralIframe.stories.js

@@ -16,6 +16,7 @@ const props = {
       iframeSrc: "https://example.com",
       iframeHeight: "100%",
       iframeWidth: "100%",
+      codeParam: "rsCode",
     },
   },
 };

package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe-view.js

@@ -25,5 +25,5 @@ export function ReferralIframeView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
+    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?${encodeURIComponent(content.codeParam)}=${data.shareCode}` })));
 }