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

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-big-stat_43.cjs.entry.js

@@ -24,7 +24,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-28865623.js');
+const ShadowViewAddon = require('./ShadowViewAddon-e9dc77e3.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-733ef29a.js');
 
@@ -2029,6 +2029,7 @@ function useNameFields(props) {
   const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
+      optional: props.optional,
       registrationFormState,
       content: {
         lastNameLabel: props.lastNameLabel,
@@ -2050,6 +2051,11 @@ const NameFields = class {
      * @uiName Last name label
      */
     this.lastNameLabel = "Last Name";
+    /**
+     * @uiName Optional
+     * @uiWidget
+     */
+    this.optional = false;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -2061,6 +2067,7 @@ const NameFields = class {
 function useNameFieldsDemo(props) {
   return cjs.cjs({
     states: {
+      optional: props.optional,
       validationErrors: [],
       content: {
         firstNameLabel: props.firstNameLabel,

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');
@@ -36,9 +36,9 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-28865623.js');
+const ShadowViewAddon = require('./ShadowViewAddon-e9dc77e3.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');
 
 /**
@@ -10833,6 +10833,7 @@ const NameFields_stories = {
 };
 const props$1 = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: undefined,
     },
@@ -10844,6 +10845,7 @@ const props$1 = {
 };
 const errorProps$9 = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: {
         firstName: "Cannot be empty",
@@ -15640,7 +15642,7 @@ const BaseRegistrationForm_stories = {
 };
 const defaultProps$q = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -15660,7 +15662,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 = () => {
@@ -15707,6 +15709,7 @@ const defaultProps$r = {
     formData: (index.h("div", null,
       " ",
       index.h(ShadowViewAddon.NameFieldsView, { states: {
+          optional: false,
           registrationFormState: {
             validationErrors: undefined,
             disabled: true,

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-name-fields/NameFields.stories.js

@@ -9,6 +9,7 @@ export default {
 };
 const props = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: undefined,
     },
@@ -20,6 +21,7 @@ const props = {
 };
 const errorProps = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: {
         firstName: "Cannot be empty",

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
 import { ErrorStyles } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 const style = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
@@ -31,7 +31,7 @@ export function NameFieldsView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, 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) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: !states.optional, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
@@ -39,7 +39,7 @@ export function NameFieldsView(props) {
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: !states.optional, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
       value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -21,6 +21,11 @@ export class NameFields {
      * @uiName Last name label
      */
     this.lastNameLabel = "Last Name";
+    /**
+     * @uiName Optional
+     * @uiWidget
+     */
+    this.optional = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -72,12 +77,36 @@ export class NameFields {
       "reflect": false,
       "defaultValue": "\"Last Name\""
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Optional",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<NameFieldsViewProps>",
-        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
+        "resolved": "{ states?: { optional: boolean; registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -110,6 +139,7 @@ export class NameFields {
 function useNameFieldsDemo(props) {
   return deepmerge({
     states: {
+      optional: props.optional,
       validationErrors: [],
       content: {
         firstNameLabel: props.firstNameLabel,

package/dist/collection/components/sqm-name-fields/useNameFields.js

@@ -4,6 +4,7 @@ export function useNameFields(props) {
   const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
+      optional: props.optional,
       registrationFormState,
       content: {
         lastNameLabel: props.lastNameLabel,

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/PortalGoogleRegistrationForm.stories.js

@@ -31,6 +31,7 @@ const defaultProps = {
     formData: (h("div", null,
       " ",
       h(NameFieldsView, { states: {
+          optional: false,
           registrationFormState: {
             validationErrors: undefined,
             disabled: true,

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: [