@saasquatch/mint-components 1.15.4-0 → 1.15.4-1

package/dist/cjs/sqm-banking-info-form_17.cjs.entry.js

@@ -18,7 +18,7 @@ const luxon = require('./luxon-2926d85f.js');
 const useReferralTable = require('./useReferralTable-7c3f9600.js');
 const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 const ErrorView = require('./ErrorView-b2fcf954.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-3f60fba9.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-5c74607f.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-733ef29a.js');
@@ -7751,12 +7751,6 @@ const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
-  function isDisabledInput(field) {
-    var _a;
-    if (states.isPartner && !!((_a = data.partnerData) === null || _a === void 0 ? void 0 : _a[field]))
-      return true;
-    return false;
-  }
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$6,
@@ -7804,22 +7798,18 @@ const UserInfoFormView = (props) => {
         }))),
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
-          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled ||
-              states.isUser ||
-              isDisabledInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.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 ||
-              states.isUser ||
-              isDisabledInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled || states.isUser || states.isPartner }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.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 || isDisabledInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+          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 || states.isPartner }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.formatErrorMessage(text.country, formState.errors.countryCode),
           }
@@ -7835,8 +7825,7 @@ const UserInfoFormView = (props) => {
           index.h("div", { class: classes.PhoneInputsSection },
             index.h("p", null, text.phoneNumber),
             index.h("div", { class: classes.PhoneInputsContainer },
-              index.h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled ||
-                  isDisabledInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+              index.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) }),
@@ -7862,7 +7851,7 @@ const UserInfoFormView = (props) => {
                   // Naive phone number validation
                   sqmInvoiceTableView.validateBillingField(/[a-zA-Z]+/, value) &&
                     sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
-                }, disabled: states.disabled || isDisabledInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+                }, disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
                 helpText: sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
@@ -7870,7 +7859,7 @@ const UserInfoFormView = (props) => {
           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
             !sqmInvoiceTableView.validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              sqmInvoiceTableView.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("address") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
+              sqmInvoiceTableView.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.formatErrorMessage(text.address, formState.errors.address),
           }
@@ -7878,22 +7867,22 @@ const UserInfoFormView = (props) => {
           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
             !sqmInvoiceTableView.validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              sqmInvoiceTableView.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("city") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
+              sqmInvoiceTableView.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || states.isPartner }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.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 || isDisabledInput("state") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
+          !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 || states.isPartner }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.formatErrorMessage(text.state, formState.errors.state),
           }
             : {}), { required: true }), (_p = data.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 || isDisabledInput("postalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
+          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 || states.isPartner }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.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 || isDisabledInput("currency"), helpText: text.currencyHelpText }, (((_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 || states.isPartner, helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.formatErrorMessage(text.currency, formState.errors.currency),
           }
@@ -7915,13 +7904,13 @@ const UserInfoFormView = (props) => {
           index.h("div", { class: classes.CheckboxWrapper },
             index.h("sl-checkbox", { exportparts: "label: input-label, base: input-base", 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),
+              }, disabled: states.isPartner ? false : 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 }, sqmInvoiceTableView.formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),
-        index.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
+        index.h("sl-button", { type: "primary", disabled: states.isPartner ? false : states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
 };
 
 function useUserInfoForm(props) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d;
   const currencyRef = stencilHooks_module.useRef(undefined);
   const phoneCountryRef = stencilHooks_module.useRef(undefined);
   const formRef = stencilHooks_module.useRef(null);
@@ -8073,15 +8062,9 @@ function useUserInfoForm(props) {
       postalCode: userData.postalCode,
       currency: userData.currency,
     });
-    const skipNextStep = getSkipNextStep(userData);
-    const nextStep = context.overrideNextStep || skipNextStep ? "/3" : "/2";
+    const nextStep = context.overrideNextStep || "/2";
     setStep(nextStep);
   }
-  function getSkipNextStep(userData) {
-    if (userData.countryCode === "US")
-      return true;
-    return true;
-  }
   const hasStates = ["ES", "AU", "US", "CA"].includes(userFormContext.countryCode);
   const regionObj = hasStates
     ? sqmInvoiceTableView.ADDRESS_REGIONS[userFormContext === null || userFormContext === void 0 ? void 0 : userFormContext.countryCode]
@@ -8109,7 +8092,6 @@ function useUserInfoForm(props) {
       allCountries: countries,
       regionLabelEnum: regionObj === null || regionObj === void 0 ? void 0 : regionObj.labelEnum,
       regions: (regionObj === null || regionObj === void 0 ? void 0 : regionObj.regions) || [],
-      partnerData: (_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,
     },
     states: {
       step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
@@ -8118,8 +8100,8 @@ function useUserInfoForm(props) {
       disabled: loading,
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       loading: loading,
-      isPartner: !!((_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.publisher),
-      isUser: !!((_f = (_e = data === null || data === void 0 ? void 0 : data.user) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.user),
+      isPartner: !!((_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),
+      isUser: !!((_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.user),
       formState: {
         ...userFormContext,
         errors: formErrors,

package/dist/cjs/{sqm-base-registration-form-view-8029d30e.js → sqm-base-registration-form-view-66f99821.js}

@@ -40,6 +40,7 @@ sqm-portal-register {
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (index.h("div", { class: sheet.classes.Wrapper },
     index.h("style", { type: "text/css" },
@@ -47,10 +48,8 @@ function BaseRegistrationFormView(props) {
       styleString),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
     index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
-      index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -58,7 +57,13 @@ function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       index.h("div", { class: sheet.classes.ButtonsContainer },
         index.h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         index.h("sl-menu-divider", { style: { margin: "0" } }),

package/dist/cjs/{sqm-invoice-table-view-3f60fba9.js → sqm-invoice-table-view-5c74607f.js}

@@ -508,7 +508,6 @@ const stepOneProps = {
     },
   },
   data: {
-    partnerData: {},
     regionLabelEnum: "STATE",
     regions: [],
     phoneCountries: [

package/dist/cjs/sqm-portal-google-registration-form.cjs.entry.js

@@ -11,7 +11,7 @@ const JSS = require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
 require('./sqm-text-span-view-0aa82125.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8029d30e.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-66f99821.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
 require('./AsYouType-6788393a.js');
 const usePortalRegistrationForm = require('./usePortalRegistrationForm-f25d89e7.js');
@@ -75,7 +75,6 @@ function jwtDecode(token, options) {
 }
 
 function usePortalGoogleRegistrationForm(props) {
-  const [emailValidationError, setEmailValidationError] = stencilHooks_module.useState(null);
   const [registrationFormState, setRegistrationFormState] = useRegistrationFormState.useRegistrationForm();
   const [showRegistrationForm, setShowRegistrationForm] = stencilHooks_module.useState({
     mode: "base",
@@ -83,33 +82,41 @@ function usePortalGoogleRegistrationForm(props) {
   const handleEmailSubmit = async (event) => {
     const formControls = event.target.getFormControls();
     let formData = {};
-    let errorMessage = null;
+    let validationErrors = {};
     formControls.forEach((control) => {
       if (!control.name)
         return;
-      jsonpointer.jsonpointer.set(formData, control.name, control.value);
-      // only validate email field
-      if (control.name !== "/email")
-        return;
-      if (control.required && !control.value)
-        errorMessage = props.requiredFieldErrorMessage;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // errorMessage = props.requiredFieldErrorMessage;
       if (typeof control.validationError === "function") {
         const validate = control.validationError;
         const validationError = validate({
           control,
-          key: "email",
-          value: control.value,
+          key,
+          value,
         });
         if (validationError)
-          errorMessage = validationError;
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
       }
     });
-    if (errorMessage) {
-      setEmailValidationError(errorMessage);
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
       return;
     }
     setRegistrationFormState({
       ...registrationFormState,
+      validationErrors: {},
       initialData: {
         ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
         ...formData,
@@ -139,8 +146,9 @@ function usePortalGoogleRegistrationForm(props) {
     }
   };
   return {
+    registrationFormState,
     showRegistrationForm,
-    emailValidationError,
+    validationErrors: registrationFormState.validationErrors,
     handleGoogleInit,
     handleEmailSubmit,
   };
@@ -296,7 +304,7 @@ const PortalGoogleRegistrationForm = class {
     };
     const sheet = JSS.createStyleSheet(styles);
     const styleString = sheet.toString();
-    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = index_module.isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = index_module.isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
     const content = {
       formData: index.h("slot", { name: "formData" }),
       googleButton: (index.h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
@@ -321,14 +329,16 @@ const PortalGoogleRegistrationForm = class {
     };
     if (showRegistrationForm.mode === "base") {
       return (index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, { states: {
-          error: emailValidationError,
+          validationErrors,
         }, callbacks: { handleEmailSubmit }, content: content }));
     }
     return (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, { states: {
         ...states,
         emailDisabled: true,
         hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: content, refs: refs }));
+      }, callbacks: callbacks,
+      // Show terms only on first screen
+      content: { ...content, terms: null }, refs: refs }));
   }
 };
 function useRegisterDemo(props) {
@@ -364,7 +374,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return cjs.cjs({
-    emailValidationError: false,
+    validationErrors: {},
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -28,7 +28,7 @@ const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-7ebb426a.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-78f19ef9.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8029d30e.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-66f99821.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
 require('./utilities-78f5e169.js');
@@ -38,7 +38,7 @@ require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
 const ShadowViewAddon = require('./ShadowViewAddon-28865623.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-3f60fba9.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-5c74607f.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-89308aab.js');
 
 /**
@@ -15640,7 +15640,7 @@ const BaseRegistrationForm_stories = {
 };
 const defaultProps$q = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -15660,7 +15660,7 @@ const defaultProps$q = {
 const errorProps$a = {
   ...defaultProps$q,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 const Default$o = () => {

package/dist/collection/components/sqm-base-registration/BaseRegistrationForm.stories.js

@@ -5,7 +5,7 @@ export default {
 };
 const defaultProps = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -25,7 +25,7 @@ const defaultProps = {
 const errorProps = {
   ...defaultProps,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 export const Default = () => {

package/dist/collection/components/sqm-base-registration/sqm-base-registration-form-view.js

@@ -37,6 +37,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
@@ -44,10 +45,8 @@ export function BaseRegistrationFormView(props) {
       styleString),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -55,7 +54,13 @@ export function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         h("sl-menu-divider", { style: { margin: "0" } }),

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

@@ -8,7 +8,7 @@ import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
 import { useCheckboxField } from "./useCheckboxField";
 /**
  * @uiName Form Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */

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

@@ -8,7 +8,7 @@ import { DropdownFieldView, } from "./sqm-dropdown-field-view";
 import { useDropdownField } from "./useDropdownField";
 /**
  * @uiName Form Dropdown Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @slots [{"name":"", "title":"Drop Down Option"}]
  * @exampleGroup Microsite Components
  * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>

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

@@ -8,7 +8,7 @@ import { InputFieldView } from "./sqm-input-field-view";
 import { useInputField } from "./useInputField";
 /**
  * @uiName Form Input Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
  */

package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js

@@ -7,7 +7,7 @@ import { CheckboxFieldView, } from "../sqm-checkbox-field/sqm-checkbox-field-vie
 import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField";
 /**
  * @uiName Marketing Emails Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @requiredFeatures ["MARKETING_EMAILS"]
  */
 export class MarketingEmailsCheckbox {

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

@@ -3,13 +3,13 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useState } from "@saasquatch/universal-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
 import { validateNewPassword } from "./passwordValidation";
 import { PortalResetPasswordView, } from "./sqm-password-field-view";
 import { usePasswordField } from "./usePasswordField";
-import { getProps } from "../../utils/utils";
 /**
  * @uiName Form Password Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Password Field - <sqm-password-field field-label="Password"></sqm-password-field>
  */

package/dist/collection/components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js

@@ -2,11 +2,11 @@ import { isDemo, navigation } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { createStyleSheet } from "../../styling/JSS";
 import { BaseRegistrationFormView } from "../sqm-base-registration/sqm-base-registration-form-view";
 import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
 import { usePortalRegistrationForm } from "../sqm-portal-registration-form/usePortalRegistrationForm";
 import { usePortalGoogleRegistrationForm } from "./usePortalGoogleRegistrationForm";
-import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Google Registration
  * @canvasRenderer always-replace
@@ -161,7 +161,7 @@ export class PortalGoogleRegistrationForm {
     };
     const sheet = createStyleSheet(styles);
     const styleString = sheet.toString();
-    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
     const content = {
       formData: h("slot", { name: "formData" }),
       googleButton: (h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
@@ -192,14 +192,16 @@ export class PortalGoogleRegistrationForm {
     };
     if (showRegistrationForm.mode === "base") {
       return (h(BaseRegistrationFormView, { states: {
-          error: emailValidationError,
+          validationErrors,
         }, callbacks: { handleEmailSubmit }, content: content }));
     }
     return (h(PortalRegistrationFormView, { states: {
         ...states,
         emailDisabled: true,
         hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: content, refs: refs }));
+      }, callbacks: callbacks, 
+      // Show terms only on first screen
+      content: { ...content, terms: null }, refs: refs }));
   }
   static get is() { return "sqm-portal-google-registration-form"; }
   static get encapsulation() { return "shadow"; }
@@ -874,7 +876,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return deepmerge({
-    emailValidationError: false,
+    validationErrors: {},
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

package/dist/collection/components/sqm-portal-google-registration-form/usePortalGoogleRegistrationForm.js

@@ -1,9 +1,8 @@
 import { useState } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
-import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
 import { jwtDecode } from "jwt-decode";
+import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function usePortalGoogleRegistrationForm(props) {
-  const [emailValidationError, setEmailValidationError] = useState(null);
   const [registrationFormState, setRegistrationFormState] = useRegistrationForm();
   const [showRegistrationForm, setShowRegistrationForm] = useState({
     mode: "base",
@@ -11,33 +10,41 @@ export function usePortalGoogleRegistrationForm(props) {
   const handleEmailSubmit = async (event) => {
     const formControls = event.target.getFormControls();
     let formData = {};
-    let errorMessage = null;
+    let validationErrors = {};
     formControls.forEach((control) => {
       if (!control.name)
         return;
-      jsonpointer.set(formData, control.name, control.value);
-      // only validate email field
-      if (control.name !== "/email")
-        return;
-      if (control.required && !control.value)
-        errorMessage = props.requiredFieldErrorMessage;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // errorMessage = props.requiredFieldErrorMessage;
       if (typeof control.validationError === "function") {
         const validate = control.validationError;
         const validationError = validate({
           control,
-          key: "email",
-          value: control.value,
+          key,
+          value,
         });
         if (validationError)
-          errorMessage = validationError;
+          jsonpointer.set(validationErrors, key, validationError);
       }
     });
-    if (errorMessage) {
-      setEmailValidationError(errorMessage);
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
       return;
     }
     setRegistrationFormState({
       ...registrationFormState,
+      validationErrors: {},
       initialData: {
         ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
         ...formData,
@@ -67,8 +74,9 @@ export function usePortalGoogleRegistrationForm(props) {
     }
   };
   return {
+    registrationFormState,
     showRegistrationForm,
-    emailValidationError,
+    validationErrors: registrationFormState.validationErrors,
     handleGoogleInit,
     handleEmailSubmit,
   };

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -32,7 +32,6 @@ const stepOneProps = {
     },
   },
   data: {
-    partnerData: {},
     regionLabelEnum: "STATE",
     regions: [],
     phoneCountries: [