@saasquatch/mint-components 1.12.0-1 → 1.12.0-10

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

@@ -1,16 +1,17 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
 import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
 import { useWidgetCodeVerification } from "./useCodeVerification";
+import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 export class WidgetCodeVerification {
   constructor() {
     /**
      * @uiName Verify code widget header text
      */
-    this.verifyCodeHeaderText = "Enter the code sent to email@example.com from our referral provider, impact.com.";
+    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
     /**
      * @uiName Reverify code widget header text
      */
@@ -25,27 +26,16 @@ export class WidgetCodeVerification {
      * @uiName Resend code label
      */
     this.resendCodeLabel = "Resend code";
-    /**
-     * The link that appears in the resend code link
-     * @uiName Resend code link
-     */
-    // AL: TODO connect route to resend verification code
-    this.resendCodeLink = "/resend-code";
     /**
      * Link text displayed under verify button
      * @uiName Resend code text
      */
     this.codeResentSuccessfullyText = "Another code has been sent to {email}";
-    /**
-     * Link text displayed under the verify button
-     * @uiName Use different email text
-     */
-    this.useDifferentEmailText = "Use a different email";
     /**
      * Error text displayed under verification input
      * @uiName Invalid code text
      */
-    this.invalidCodeText = " Please check your code and try again. If you’re still having trouble, try resending your code.";
+    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
     /**
      * @uiName Verify code button text
      */
@@ -89,7 +79,7 @@ export class WidgetCodeVerification {
       },
       "attribute": "verify-code-header-text",
       "reflect": false,
-      "defaultValue": "\"Enter the code sent to email@example.com from our referral provider, impact.com.\""
+      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
     },
     "reverifyCodeHeaderText": {
       "type": "string",
@@ -154,27 +144,6 @@ export class WidgetCodeVerification {
       "reflect": false,
       "defaultValue": "\"Resend code\""
     },
-    "resendCodeLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code link",
-            "name": "uiName"
-          }],
-        "text": "The link that appears in the resend code link"
-      },
-      "attribute": "resend-code-link",
-      "reflect": false,
-      "defaultValue": "\"/resend-code\""
-    },
     "codeResentSuccessfullyText": {
       "type": "string",
       "mutable": false,
@@ -196,27 +165,6 @@ export class WidgetCodeVerification {
       "reflect": false,
       "defaultValue": "\"Another code has been sent to {email}\""
     },
-    "useDifferentEmailText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Use different email text",
-            "name": "uiName"
-          }],
-        "text": "Link text displayed under the verify button"
-      },
-      "attribute": "use-different-email-text",
-      "reflect": false,
-      "defaultValue": "\"Use a different email\""
-    },
     "invalidCodeText": {
       "type": "string",
       "mutable": false,
@@ -236,7 +184,7 @@ export class WidgetCodeVerification {
       },
       "attribute": "invalid-code-text",
       "reflect": false,
-      "defaultValue": "\" Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
+      "defaultValue": "\"Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
     },
     "verifyText": {
       "type": "string",
@@ -285,7 +233,7 @@ export class WidgetCodeVerification {
       "mutable": false,
       "complexType": {
         "original": "DemoData<WidgetCodeVerificationViewProps>",
-        "resolved": "{ states?: { loading: boolean; email: string; verifyFailed?: boolean; codeResent?: boolean; }; refs?: { codeWrapperRef: any; }; }",
+        "resolved": "{ states?: { initialiseLoading: boolean; loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -309,21 +257,44 @@ export class WidgetCodeVerification {
           }],
         "text": ""
       }
+    },
+    "onVerification": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(token: string) => any",
+        "resolved": "(token: string) => any",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      }
     }
   }; }
 }
 function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = useState(false);
+  const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   return deepmerge({
     states: {
       loading: false,
-      email: "",
-      verifyFailed: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: true,
+      verifyFailed: true,
     },
     refs: {
       codeWrapperRef: () => { },
     },
     callbacks: {
-      submitCode: async () => { },
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/useCodeVerification.js

@@ -1,12 +1,14 @@
 import { useMutation, useParent, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useHost, useState } from "@saasquatch/stencil-hooks";
-import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_EVENT_KEY, } from "../keys";
-import { useVerificationEmailMutation } from "../sqm-email-verification/useEmailVerification";
 import { gql } from "graphql-request";
-// TODO: Move to component-boilerplate
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, } from "../keys";
+import { useVerificationEmail } from "../useVerificationEmail";
 export const VerifyEmailWithCodeMutation = gql `
-  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
-    verifyUserEmail(user: $user, code: $code) {
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
       verifiedEmail
       accessKey
     }
@@ -43,9 +45,8 @@ export function useWidgetCodeVerification(props) {
   const [emailResent, setEmailResent] = useState(false);
   const [codeRef, setCodeRef] = useState(null);
   const [validationError, setValidationError] = useState(false);
-  // TODO: Need to handle error states for these errors
-  const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] = useCodeVerificationMutation();
-  const [request, { loading: resendLoading, data, errors: resendErrors }] = useVerificationEmailMutation();
+  const [emailError, setEmailError] = useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
   useEffect(() => {
     if (!codeRef)
       return;
@@ -61,7 +62,7 @@ export function useWidgetCodeVerification(props) {
         }
       });
       element.addEventListener("input", (e) => {
-        const input = e.target.value;
+        const input = e.data;
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
@@ -71,8 +72,10 @@ export function useWidgetCodeVerification(props) {
         if (input.length > 1) {
           const rest = input.slice(1);
           e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
         }
         codeElements[idx + 1].focus();
       });
@@ -83,14 +86,16 @@ export function useWidgetCodeVerification(props) {
     setValidationError(false);
   };
   const resendEmail = async () => {
-    // TODO: Error checks, depends on what mutation is set up as
-    const result = await request();
-    if (emailSent) {
-      setEmailResent(true);
-      setTimeout(() => {
-        setEmailResent(false);
-      }, 500);
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result) {
+      setEmailError(true);
+      return;
     }
+    if (emailSent)
+      setEmailResent(true);
     setEmailSent(true);
   };
   const submitCode = async () => {
@@ -104,16 +109,13 @@ export function useWidgetCodeVerification(props) {
     codeElements.forEach((element) => {
       code = `${code}${element.value}`;
     });
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
     setValidationError(false);
-    // Only 123456 passes for a valid code rn
-    const res = await verifyUser(code);
-    if (res) {
-      const event = new CustomEvent(VERIFICATION_EVENT_KEY, {
-        detail: { token: res.verifyUserEmail.accessKey },
-        composed: true,
-        bubbles: true,
-      });
-      host.dispatchEvent(event);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
       reset();
     }
     else {
@@ -121,10 +123,15 @@ export function useWidgetCodeVerification(props) {
     }
   };
   useEffect(() => {
+    // Wait for mutations to be determined from user lookup
+    if (!initialized)
+      return;
     // email should already exist if user has completed email-verification
     if (!email)
       resendEmail();
-  }, []);
+    else
+      setEmailSent(true);
+  }, [initialized]);
   return {
     refs: {
       codeWrapperRef: setCodeRef,
@@ -132,7 +139,9 @@ export function useWidgetCodeVerification(props) {
     states: {
       email,
       emailResent,
-      loading: verifyLoading || resendLoading,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
       verifyFailed: !!validationError,
     },
     callbacks: {

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories.js

@@ -4,19 +4,39 @@ export default {
 };
 const defaultProps = {
   email: "",
-  error: "",
+  error: false,
   loading: false,
+  initialLoading: false,
+  sendCodeError: false,
 };
 export const Default = () => (h("sqm-email-verification", { demoData: {} }));
+export const EmailIsPrefilled = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      email: "test@example.com",
+    },
+  } }));
 export const Loading = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      initialLoading: true,
+    },
+  } }));
+export const SaveLoading = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps,
       loading: true,
     },
   } }));
-export const Error = () => (h("sqm-email-verification", { demoData: {
+export const InvalidEmail = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      error: true,
+    },
+  } }));
+export const SendCodeError = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps,
-      error: "Email is invalid",
+      sendCodeError: true,
     },
   } }));

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js

@@ -15,6 +15,16 @@ const style = {
     flexDirection: "column",
     maxWidth: "320px",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "&::part(message)": {
+      display: "flex",
+      flexDirection: "column",
+    },
+  },
   ContinueButton: {
     width: "100%",
     maxWidth: "100px",
@@ -63,15 +73,18 @@ export function WidgetEmailVerificationView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.loading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
-      " ",
+    states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      h("b", null, text.sendCodeErrorHeader),
+      text.sendCodeErrorDescription)),
+    states.initialLoading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
       h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       h("sl-form", { "onSl-submit": callbacks.submitEmail },
         h("div", { class: sheet.classes.InputsContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", required: true }, (states.error
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
             ? {
               class: sheet.classes.ErrorInput,
-              helpText: "Please enter a valid email",
+              helpText: text.emailValidationErrorText,
             }
             : {}))),
           h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));

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

@@ -3,8 +3,9 @@ import { Component, h, Prop } from "@stencil/core";
 import { useWidgetEmailVerification } from "./useEmailVerification";
 import { WidgetEmailVerificationView, } from "./sqm-email-verification-view";
 import { getProps } from "../../../utils/utils";
-import { isDemo } from "@saasquatch/component-boilerplate";
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
+import { SHOW_CODE_NAMESPACE } from "../keys";
 /**
  * @uiName Widget Verification Gate
  */
@@ -15,9 +16,13 @@ export class WidgetEmailVerification {
      */
     this.verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
     /**
-     * @uiName Verify email error text
+     * @uiName Send code to email alert header
      */
-    this.errorText = "Failed to send an email. If this continues, contact Support with impact.com";
+    this.sendCodeErrorHeader = "There was an error sending your code.";
+    /**
+     * @uiName Send code to email alert description
+     */
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
     /**
      * @uiName Email input label
      */
@@ -26,6 +31,10 @@ export class WidgetEmailVerification {
      * @uiName Send code button text
      */
     this.sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     */
+    this.emailValidationErrorText = "Please enter a valid email";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -62,7 +71,28 @@ export class WidgetEmailVerification {
       "reflect": false,
       "defaultValue": "\"Start by verifying your email. We\u2019ll send you a code through our referral provider, impact.com.\""
     },
-    "errorText": {
+    "sendCodeErrorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code to email alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "send-code-error-header",
+      "reflect": false,
+      "defaultValue": "\"There was an error sending your code.\""
+    },
+    "sendCodeErrorDescription": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -74,14 +104,14 @@ export class WidgetEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Verify email error text",
+            "text": "Send code to email alert description",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "error-text",
+      "attribute": "send-code-error-description",
       "reflect": false,
-      "defaultValue": "\"Failed to send an email. If this continues, contact Support with impact.com\""
+      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
     },
     "emailLabel": {
       "type": "string",
@@ -125,12 +155,33 @@ export class WidgetEmailVerification {
       "reflect": false,
       "defaultValue": "\"Send code\""
     },
+    "emailValidationErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "email-validation-error-text",
+      "reflect": false,
+      "defaultValue": "\"Please enter a valid email\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<WidgetEmailVerificationViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; email: string; }; }",
+        "resolved": "{ states?: { error: boolean; initialLoading: boolean; loading: boolean; email: string; sendCodeError: boolean; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -158,14 +209,17 @@ export class WidgetEmailVerification {
   }; }
 }
 function useDemoWidgetEmailVerification(props) {
+  const setShowCode = useSetParent(SHOW_CODE_NAMESPACE);
   return deepmerge({
     states: {
-      error: "",
+      error: true,
+      initialLoading: false,
       loading: false,
-      email: "",
+      email: "test@example.com",
+      sendCodeError: true,
     },
     callbacks: {
-      submitEmail: async () => { },
+      submitEmail: async () => setShowCode(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/useEmailVerification.js

@@ -1,24 +1,44 @@
-import { useMutation, useParent, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/universal-hooks";
+import { useMutation, useParent, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "../keys";
-export const VerificationEmailMutation = gql `
-  mutation requestUserEmailVerification($user: UserIdInput!) {
-    requestUserEmailVerification(user: $user) {
-      success
+import { useVerificationEmail } from "../useVerificationEmail";
+export const UpsertUserEmailMutation = gql `
+  mutation upsertUser($userInput: UserInput!) {
+    user(userInput: $userInput) {
+      id
+      accountId
+      email
     }
   }
 `;
-// TODO: Move to component-boilerplate
-export function useVerificationEmailMutation() {
+export const UserLookupQuery = gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+export function useUpsertUserEmail() {
   const user = useUserIdentity();
-  const [request, { loading, data, errors }] = useMutation(VerificationEmailMutation);
-  const sendVerificationEmailMutation = async () => {
+  const [request, { loading: loading, data, errors }] = useMutation(UpsertUserEmailMutation);
+  const upsertUserEmail = async (email) => {
     try {
       const result = await request({
         user: {
           id: user.id,
           accountId: user.accountId,
+          email,
         },
       });
       if (result instanceof Error || !result)
@@ -26,12 +46,12 @@ export function useVerificationEmailMutation() {
       return result;
     }
     catch (e) {
-      console.error("Could not send verification email", e);
+      console.error("Could not set email on user", e);
       return undefined;
     }
   };
   return [
-    sendVerificationEmailMutation,
+    upsertUserEmail,
     {
       loading,
       data,
@@ -42,19 +62,53 @@ export function useVerificationEmailMutation() {
 export function useWidgetEmailVerification(props) {
   const [_, setShowCode] = useParent(SHOW_CODE_NAMESPACE);
   const [email, setEmail] = useParent(VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = useState(false);
   const [error, setError] = useState(false);
-  const [sendVerificationEmailMutation, { loading, data, errors }] = useVerificationEmailMutation();
+  const [mutationError, setMutationError] = useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = useState(true);
+  const { data, loading: initialLoading } = useQuery(UserLookupQuery, {});
+  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  useEffect(() => {
+    if (initialized)
+      setLoading(false);
+  }, [initialized]);
   const submitEmail = async (e) => {
     e.preventDefault();
-    const formData = e.detail.formData;
-    const toAddress = formData.get("email").toString();
-    const result = await sendVerificationEmailMutation();
-    if (!result || !result.requestUserEmailVerification.success)
-      setError(true);
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setLoading(true);
+    const toAddress = data.viewer.email;
+    if (!toAddress) {
+      // If no email on the user, set one
+      const formData = e.detail.formData;
+      const newEmail = formData.get("email").toString();
+      if (!emailRegex.test(newEmail)) {
+        setError(true);
+        return;
+      }
+      const result = await upsertUserEmail(newEmail);
+      if (!result || !result.user.email)
+        setError(true);
+    }
+    // UI should not allow this call til initialisation is done
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result || !result.success)
+      setMutationError(true);
     else {
+      // This is used to let the code verification widget know an email was already sent
       setEmail(toAddress);
       setShowCode(true);
     }
+    setLoading(false);
   };
   return {
     callbacks: {
@@ -62,8 +116,10 @@ export function useWidgetEmailVerification(props) {
     },
     states: {
       loading,
-      error: error && props.errorText,
-      email,
+      initialLoading: initialLoading && !initialized,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
     },
     text: props.getTextProps(),
   };