@saasquatch/mint-components 2.0.0-8 → 2.0.0

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() { }
@@ -73,12 +78,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",
@@ -111,6 +140,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-container/sqm-portal-container-view.js

@@ -14,7 +14,7 @@ export function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
-      backgroundColor: props.backgroundColor || "inherit",
+      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
     },
   };
   const vanillaStyle = `

package/dist/collection/components/sqm-portal-forgot-password/PortalForgotPassword.stories.js

@@ -65,6 +65,7 @@ const successProps = {
   content: {
     loginText: "Login",
     messageSlot: "Enter your email below to receive a password reset link.",
+    successAlertText: "An email has been sent with instructions to reset your password.",
   },
 };
 export const Default = () => h(PortalForgotPasswordView, Object.assign({}, defaultProps));

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,16 @@ 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
+ * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
+ */
 export class PortalGoogleRegistrationForm {
   constructor() {
     this.ignored = true;
@@ -156,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 })),
@@ -187,16 +192,14 @@ 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, content: content, refs: refs }));
   }
   static get is() { return "sqm-portal-google-registration-form"; }
   static get encapsulation() { return "shadow"; }
@@ -871,7 +874,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return deepmerge({
-    emailValidationError: true,
+    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,30 +10,40 @@ 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 || control.name !== "/email")
+      if (!control.name)
         return;
-      jsonpointer.set(formData, control.name, control.value);
-      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);
+      }
       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,
@@ -64,8 +73,9 @@ export function usePortalGoogleRegistrationForm(props) {
     }
   };
   return {
+    registrationFormState,
     showRegistrationForm,
-    emailValidationError,
+    validationErrors: registrationFormState.validationErrors,
     handleGoogleInit,
     handleEmailSubmit,
   };

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -30,7 +30,7 @@ export class ReferredRegistration {
     /**
      * @uiName Register button text
      */
-    this.registerLabel = "Start Referring";
+    this.registerLabel = "Claim Your Reward";
     /**
      * Require your participants to enter their first and last name.
      *
@@ -229,7 +229,7 @@ export class ReferredRegistration {
       },
       "attribute": "register-label",
       "reflect": false,
-      "defaultValue": "\"Start Referring\""
+      "defaultValue": "\"Claim Your Reward\""
     },
     "includeName": {
       "type": "boolean",

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -793,39 +793,6 @@ function useRewardExchangeListDemo(props) {
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
-  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, 
-  // {
-  //   states: {
-  //     content: {
-  //       text: props,
-  //     },
-  //     redeemStage: "chooseReward",
-  //     amount: 0,
-  //     selectedStep: undefined,
-  //     selectedItem: undefined,
-  //     open: false,
-  //     exchangeError: false,
-  //     queryError: false,
-  //     loading: false,
-  //     noExchangeOptions: false,
-  //     // empty: EmptySlot(),
-  //   },
-  //   data: {
-  //     // shareCode: "SHARECODE123",
-  //     exchangeList: demoRewardExchange.data.exchangeList,
-  //   },
-  //   callbacks: {
-  //     exchangeReward: () => {},
-  //     setExchangeState: (_: ExchangeState) => {},
-  //     setStage: (_: Stages) => {},
-  //     resetState: () => {},
-  //     copyFuelTankCode: () => {},
-  //   },
-  //   refs: {
-  //     canvasRef: {},
-  //   },
-  // },
-  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
-  console.log({ finalProps });
+  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
   return finalProps;
 }

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -201,8 +201,7 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    // @ts-ignore
-    const getBadgeCSSClass = (badgeType) => {
+    const getBadgeCSSClass = () => {
       switch (rewardStatus) {
         case "AVAILABLE":
           return sheet.classes.SuccessBadge;
@@ -216,7 +215,7 @@ export class RewardTableStatusCell {
           return sheet.classes.DangerBadge;
       }
     };
-    const badgeCSSClass = getBadgeCSSClass(badgeType);
+    const badgeCSSClass = getBadgeCSSClass();
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
       h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -404,7 +404,6 @@ export class ShareLink {
 function useDemoShareLink(props) {
   const [open, setOpen] = useState(false);
   const copyString = "https://www.example.com/sharelink/abc";
-  console.log("Demo props", props);
   return deepmerge({
     copyString: copyString,
     tooltiptext: props.tooltiptext,

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -245,7 +245,6 @@ function ColorScale() {
 }
 function ColorToken({ type = "primary" }) {
   return (h("span", { style: {
-      // background: `var(--sl-color-${type}-500)`,
       width: "1em",
       marginRight: "2px",
       padding: "0 4px",

package/dist/collection/components/sqm-tabs/sqm-tabs-view.js

@@ -1,7 +1,4 @@
 import { h, Host } from "@stencil/core";
-// sl-tab-group {
-//   --sl-color-primary-500: var(--sqm-accent-color-icon);
-// }
 export const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
   const padding = !placement || placement === "top" || placement === "bottom"

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -133,11 +133,11 @@ export class TaskCard {
   disconnectedCallback() { }
   render() {
     const { props } = isDemo()
-      ? useDemoBigStat(this)
+      ? useDemoBigStat(getProps(this))
       : useBigStat({ ...getProps(this), programId: this.programId });
     const { value, loading } = props;
     const { states, callbacks } = isDemo()
-      ? useTaskCardDemo(this)
+      ? useTaskCardDemo(getProps(this))
       : useTaskCard(this);
     return (h(TaskCardView, { callbacks: callbacks, states: {
         loading,

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-controller.js

@@ -34,13 +34,16 @@ function useTemplateChildren({ parent, callback }) {
 /**
  * @uiName Widget Verification Controller
  * @slots [{"name":"not-verified","title":"Not Verified template"},{"name":"verified","title":"Verified template"}]
+ * @exampleGroup Tax and Cash
+ * @example Widget Cash Payout Form - <sqm-widget-verification-controller><template slot="not-verified"><sqm-widget-verification></sqm-widget-verification></template><template slot="verified"><sqm-tax-and-cash></sqm-tax-and-cash></template></sqm-widget-verification-controller>
  * @canvasRenderer always-replace
  */
 export class WidgetVerificationController {
   constructor() {
     /**
-     * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false } }
-     * @componentState { "title": "Tax and cash", "slot": "verified", "props": { "isAuth": true } }
+     * @undocumented
+     * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false }, "disabled": "true" }
+     * @componentState { "title": "Tax and cash", "slot": "verified", "props": { "isAuth": true }, "disabled": "true" }
      */
     this.stateController = "{}";
     withHooks(this);
@@ -136,10 +139,13 @@ export class WidgetVerificationController {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ \"title\": \"Verify email\", \"slot\": \"not-verified\", \"props\": { \"isAuth\": false } }",
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "{ \"title\": \"Verify email\", \"slot\": \"not-verified\", \"props\": { \"isAuth\": false }, \"disabled\": \"true\" }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Tax and cash\", \"slot\": \"verified\", \"props\": { \"isAuth\": true } }",
+            "text": "{ \"title\": \"Tax and cash\", \"slot\": \"verified\", \"props\": { \"isAuth\": true }, \"disabled\": \"true\" }",
             "name": "componentState"
           }],
         "text": ""

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

@@ -1125,9 +1125,10 @@ export const TaxAndCashDashboardW9ThresholdReached = () => {
         documentTypeString: taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
-        notRegistered: true,
+        notRegistered: false,
         showNewFormDialog: false,
         hasHold: false,
+        enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
       },
     } }));
 };
@@ -1153,7 +1154,7 @@ export const TaxAndCashDashboardPayoutsOnHold = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
-        payoutStatus: "DONE",
+        payoutStatus: "HOLD",
         veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: true,
@@ -1165,7 +1166,7 @@ export const TaxAndCashDashboardPayoutsOnHold = () => {
         indirectTaxNumber: "123456",
         country: "Slovania",
         showNewFormDialog: false,
-        hasHold: true,
+        hasHold: false,
       },
     } }));
 };
@@ -1252,13 +1253,9 @@ export const TaxAndCashDashboardDisabled = () => {
       },
     } }));
 };
-// export const TaxAndCashTextProps = () => {
-//   return (
-//     <sqm-tax-and-cash
-//       demoData={{
-//         // @ts-ignore
-//         showTextProps: true,
-//       }}
-//     ></sqm-tax-and-cash>
-//   );
-// };
+export const TaxAndCashTextProps = () => {
+  return (h("sqm-tax-and-cash", { demoData: {
+      // @ts-ignore
+      showTextProps: true,
+    } }));
+};

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -5,6 +5,7 @@ import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
 import { PayoutStatusAlertView, } from "./sqm-payout-status-alert-view";
 import { usePayoutStatus } from "./usePayoutStatus";
+import { parseStates } from "../../../utils/parseStates";
 /**
  * @uiName Payout Status Alert
  * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"]
@@ -109,6 +110,14 @@ export class PayoutStatusAlert {
      * @uiName Error description
      */
     this.errorDescription = "There was an error with determining your payout status.";
+    /**
+     * @undocumented
+     * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -628,6 +637,39 @@ export class PayoutStatusAlert {
       "reflect": false,
       "defaultValue": "\"There was an error with determining your payout status.\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "{ \"title\": \"Payout Info Required\", \"props\": { \"states\": { \"status\": \"INFORMATION_REQUIRED\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Verification Required\", \"props\": { \"states\": { \"status\": \"VERIFICATION:REQUIRED\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Identity Verification\", \"props\": { \"states\": { \"status\": \"VERIFICATION:REVIEW\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Account Hold\", \"props\": { \"states\": { \"status\": \"HOLD\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -661,12 +703,16 @@ export class PayoutStatusAlert {
   }; }
 }
 function useDemoPayoutStatusAlert(props) {
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-payout-status-alert"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   return deepmerge({
     states: {
       error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
-      showVerifyIdentity: false,
+      veriffLoading: false,
     },
     data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
@@ -674,5 +720,5 @@ function useDemoPayoutStatusAlert(props) {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, formatted || props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js

@@ -14,8 +14,7 @@ import { intl } from "../../../global/global";
  * @uiName Tax and Cash
  * @exampleGroup Tax and Cash
  * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section", "template"]
- * @example Tax and Cash Multi Step Form - <sqm-tax-and-cash></sqm-tax-and-cash>
- * @example 2FA Protected Tax and Cash Form - <sqm-widget-verification-controller><template slot="not-verified"><sqm-widget-verification></sqm-widget-verification></template><template slot="verified"><sqm-tax-and-cash></sqm-tax-and-cash></template></sqm-widget-verification-controller>
+ * @example Microsite Cash Payout Form - <sqm-tax-and-cash></sqm-tax-and-cash>
  */
 export class TaxAndCashMonolith {
   constructor() {
@@ -1125,7 +1124,7 @@ export class TaxAndCashMonolith {
       case "/4":
         return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
+        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
       case "/error":
         return (h(ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: intl.formatMessage({
             id: "loadingErrorAlertDescription",