@saasquatch/mint-components 1.15.5-5 → 1.15.6

package/dist/cjs/{usePayoutStatus-7892433f.js → usePayoutStatus-1ffd1cd4.js}

@@ -5,133 +5,6 @@ const index_module = require('./index.module-ee84433d.js');
 
 const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";
 
-const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
-const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
-const USER_QUERY_NAMESPACE = "sq:user-info-query";
-const USER_FORM_CONTEXT_NAMESPACE = "sq:user-form-context";
-const FINANCE_NETWORK_SETTINGS_NAMESPACE = "sq:finance-network-settings";
-const COUNTRIES_NAMESPACE = "sq:countries:list";
-const SORTED_COUNTRIES_NAMESPACE = "sq:countries:sorted";
-const COUNTRIES_QUERY_NAMESPACE = "sq:countries:query";
-const CURRENCIES_NAMESPACE = "sq:currencies:list";
-const CURRENCIES_QUERY_NAMESPACE = "sq:currencies:query";
-const GET_USER = index_module.dist.gql `
-  query getUserTaxInfo {
-    user: viewer {
-      ... on User {
-        id
-        firstName
-        lastName
-        email
-        countryCode
-        customFields
-        rewards(limit: 1000) {
-          data {
-            statuses
-            partnerFundsTransfer {
-              id
-              status
-            }
-          }
-        }
-        managedIdentity {
-          uid
-          email
-          emailVerified
-        }
-        impactConnection {
-          connected
-          user {
-            firstName
-            lastName
-          }
-          publisher {
-            id
-            brandedSignup
-            countryCode
-            currency
-            billingAddress
-            billingCity
-            billingState
-            billingCountryCode
-            billingPostalCode
-            phoneNumberCountryCode
-            phoneNumber
-            taxInformation {
-              indirectTaxId
-              indirectTaxCountryCode
-              indirectTaxRegion
-              additionalTaxId
-              withholdingTaxId
-              withholdingTaxCountryCode
-            }
-            requiredTaxDocumentType
-            currentTaxDocument {
-              status
-              type
-              dateCreated
-            }
-            withdrawalSettings {
-              paymentMethod
-              paypalEmailAddress
-              bankCountry
-              bankAccountNumber
-              paymentSchedulingType
-              paymentThreshold
-              paymentDay
-            }
-            payoutsAccount {
-              hold
-              holdReasons
-              balance
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-const GET_COUNTRIES = index_module.dist.gql `
-  query getCountries {
-    impactPayoutCountries(limit: 1000) {
-      data {
-        countryCode
-        displayName
-      }
-    }
-  }
-`;
-const GET_CURRENCIES = index_module.dist.gql `
-  query currencies($locale: RSLocale) {
-    currencies(limit: 300) {
-      data {
-        displayName(locale: $locale)
-        currencyCode
-      }
-    }
-  }
-`;
-const GET_FINANCE_NETWORK_SETTINGS = index_module.dist.gql `
-  query impactFinanceNetworkSettings(
-    $filter: ImpactFinanceNetworkSettingsFilterInput
-  ) {
-    impactFinanceNetworkSettings(filter: $filter, limit: 1000) {
-      data {
-        countryCode
-        currency
-        defaultFinancePaymentMethodId
-        thresholdOptions
-        withdrawalSettingId
-        internationalEftFee
-        foreignFxFee
-        defaultFxFee
-      }
-      totalCount
-    }
-  }
-`;
-const FORM_STEPS = 4;
-
 var toArray = function toArray(a) {
   var ret = Array(a.length);
   for (var i = 0; i < a.length; ++i) {
@@ -1129,7 +1002,7 @@ const GET_TAX_SETTING = index_module.dist.gql `
   }
 `;
 function getStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   const hasTransferredReward = (_e = (_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.rewards) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.find((reward) => reward.statuses.includes("REDEEMED") &&
     reward.partnerFundsTransfer.status === "TRANSFERRED");
@@ -1147,19 +1020,9 @@ function getStatus(data) {
   if ((_p = account.holdReasons) === null || _p === void 0 ? void 0 : _p.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
   if (((_q = account.holdReasons) === null || _q === void 0 ? void 0 : _q.includes("NEW_PAYEE_REVIEW")) && hasTransferredReward)
-    return "NEW_PAYEE_REVIEW";
-  if ((_r = account.holdReasons) === null || _r === void 0 ? void 0 : _r.includes("PAYMENT_HOLD_ON_CHANGE"))
-    return "PAYMENT_HOLD_ON_CHANGE";
-  if ((_s = account.holdReasons) === null || _s === void 0 ? void 0 : _s.includes("BENEFICIARY_NAME_INVALID"))
-    return "BENEFICIARY_NAME_INVALID";
-  if ((_t = account.holdReasons) === null || _t === void 0 ? void 0 : _t.includes("BENEFICIARY_NAME_MISMATCH"))
-    return "BENEFICIARY_NAME_MISMATCH";
-  if ((_u = account.holdReasons) === null || _u === void 0 ? void 0 : _u.includes("BANK_TAX_NAME_MISMATCH"))
-    return "BANK_TAX_NAME_MISMATCH";
-  if ((_v = account.holdReasons) === null || _v === void 0 ? void 0 : _v.includes("WITHDRAWAL_SETTINGS_INVALID"))
-    return "WITHDRAWAL_SETTINGS_INVALID";
-  if ((_w = account.holdReasons) === null || _w === void 0 ? void 0 : _w.includes("PAYMENT_RETURNED"))
-    return "PAYMENT_RETURNED";
+    return "ACCOUNT_REVIEW";
+  if ((_r = account.holdReasons) === null || _r === void 0 ? void 0 : _r.includes("NEW_PAYEE_REVIEW"))
+    return "DONE";
   if (account.hold)
     return "HOLD";
   return "DONE";
@@ -1171,8 +1034,6 @@ function usePayoutStatus(props) {
   const { data: taxSettingRes } = index_module.wn(GET_TAX_SETTING, {});
   const { render, loading: veriffLoading, errors: veriffErrors, } = useVeriffApp();
   const [status, setStatus] = stencilHooks_module.useState(undefined);
-  const setContext = index_module.En(TAX_FORM_CONTEXT_NAMESPACE);
-  const setStep = index_module.En(TAX_CONTEXT_NAMESPACE);
   const enforceUsTaxComplianceOption = (_a = taxSettingRes === null || taxSettingRes === void 0 ? void 0 : taxSettingRes.tenantSettings) === null || _a === void 0 ? void 0 : _a.enforceUsTaxCompliance;
   stencilHooks_module.useEffect(() => {
     if (!data)
@@ -1200,22 +1061,6 @@ function usePayoutStatus(props) {
       url += "#3";
     window.history.pushState(null, "", url);
   };
-  const onPaymentInfoClick = () => {
-    setContext({
-      overrideNextStep: "/dashboard",
-      overrideBackStep: "/dashboard",
-      hideSteps: true,
-    });
-    setStep("/4");
-  };
-  const onNewFormClick = () => {
-    setContext({
-      overrideNextStep: "/dashboard",
-      overrideBackStep: "/dashboard",
-      hideSteps: true,
-    });
-    setStep("/3");
-  };
   return {
     states: {
       loading,
@@ -1229,28 +1074,11 @@ function usePayoutStatus(props) {
     callbacks: {
       onTermsClick,
       onClick: render,
-      onPaymentInfoClick,
-      onNewFormClick,
     },
   };
 }
 
-exports.COUNTRIES_NAMESPACE = COUNTRIES_NAMESPACE;
-exports.COUNTRIES_QUERY_NAMESPACE = COUNTRIES_QUERY_NAMESPACE;
-exports.CURRENCIES_NAMESPACE = CURRENCIES_NAMESPACE;
-exports.CURRENCIES_QUERY_NAMESPACE = CURRENCIES_QUERY_NAMESPACE;
-exports.FINANCE_NETWORK_SETTINGS_NAMESPACE = FINANCE_NETWORK_SETTINGS_NAMESPACE;
-exports.FORM_STEPS = FORM_STEPS;
-exports.GET_COUNTRIES = GET_COUNTRIES;
-exports.GET_CURRENCIES = GET_CURRENCIES;
-exports.GET_FINANCE_NETWORK_SETTINGS = GET_FINANCE_NETWORK_SETTINGS;
-exports.GET_USER = GET_USER;
-exports.SORTED_COUNTRIES_NAMESPACE = SORTED_COUNTRIES_NAMESPACE;
-exports.TAX_CONTEXT_NAMESPACE = TAX_CONTEXT_NAMESPACE;
-exports.TAX_FORM_CONTEXT_NAMESPACE = TAX_FORM_CONTEXT_NAMESPACE;
 exports.TAX_FORM_UPDATED_EVENT_KEY = TAX_FORM_UPDATED_EVENT_KEY;
-exports.USER_FORM_CONTEXT_NAMESPACE = USER_FORM_CONTEXT_NAMESPACE;
-exports.USER_QUERY_NAMESPACE = USER_QUERY_NAMESPACE;
 exports.VERIFF_COMPLETE_EVENT_KEY = VERIFF_COMPLETE_EVENT_KEY;
 exports.getStatus = getStatus;
 exports.usePayoutStatus = usePayoutStatus;

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-header-logo/sqm-header-logo.js

@@ -5,10 +5,6 @@ import { Component, h, Host, Prop } from "@stencil/core";
  */
 export class HeroImage {
   constructor() {
-    /**
-     * @uiName Logo text
-     */
-    this.logoTextSize = "24px";
     /**
      * Page participants are navigated to after clicking the header logo.
      *
@@ -25,10 +21,8 @@ export class HeroImage {
   disconnectedCallback() { }
   render() {
     return (h(Host, null,
-      h("a", { href: this.nextPage, part: "sqm-link" }, this.imageUrl ? (h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl })) : (h("h3", { style: {
-          fontSize: this.logoTextSize,
-          color: this.logoTextColor || "inherit",
-        } }, this.logoText)))));
+      h("a", { href: this.nextPage, part: "sqm-link" },
+        h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
   }
   static get is() { return "sqm-header-logo"; }
   static get encapsulation() { return "shadow"; }
@@ -42,7 +36,7 @@ export class HeroImage {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "ImageUpload",
@@ -59,70 +53,6 @@ export class HeroImage {
       "attribute": "image-url",
       "reflect": false
     },
-    "logoText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Logo text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "logo-text",
-      "reflect": false
-    },
-    "logoTextSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Logo text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "logo-text-size",
-      "reflect": false,
-      "defaultValue": "\"24px\""
-    },
-    "logoTextColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "Logo text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "logo-text-color",
-      "reflect": false
-    },
     "nextPage": {
       "type": "string",
       "mutable": false,

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,7 +192,7 @@ export class PortalGoogleRegistrationForm {
     };
     if (showRegistrationForm.mode === "base") {
       return (h(BaseRegistrationFormView, { states: {
-          error: emailValidationError,
+          validationErrors,
         }, callbacks: { handleEmailSubmit }, content: content }));
     }
     return (h(PortalRegistrationFormView, { states: {
@@ -874,7 +874,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return deepmerge({
-    emailValidationError: false,
+    validationErrors: {},
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),