@mxenabled/connect-widget 0.0.11 → 0.0.12

package/dist/index.es.js

@@ -52027,9 +52027,30 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
     institutionWebsite: "",
     institutionLogin: ""
   };
+  const schema = {
+    email: {
+      label: __("Your email address"),
+      required: true,
+      pattern: "email"
+    },
+    institutionName: {
+      label: __("Institution name"),
+      required: true
+    },
+    institutionWebsite: {
+      label: __("Institution website"),
+      required: true,
+      pattern: "url"
+    },
+    institutionLogin: {
+      label: __("Institution login page (optional)"),
+      required: false,
+      pattern: "url"
+    }
+  };
   const { handleTextInputChange, handleSubmit, values, errors } = useForm(
     () => setSubmitting(true),
-    schema$5,
+    schema,
     initialForm
   );
   const tokens = useTokens();
@@ -52067,10 +52088,11 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
             autoComplete: "off",
             autoFocus: !user.email,
             disabled: submitting,
-            error: errors.email,
+            error: !!errors.email,
             fullWidth: true,
             helperText: errors.email,
-            label: schema$5.email.label,
+            id: "email",
+            label: schema.email.label,
             name: "email",
             onChange: handleTextInputChange,
             value: values.email
@@ -52080,12 +52102,13 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
           ProtectedTextField,
           {
             autoComplete: "off",
-            autoFocus: user.email,
+            autoFocus: !!user.email,
             disabled: submitting,
-            error: errors.institutionName,
+            error: !!errors.institutionName,
             fullWidth: true,
             helperText: errors.institutionName,
-            label: schema$5.institutionName.label,
+            id: "institutionName",
+            label: schema.institutionName.label,
             name: "institutionName",
             onChange: handleTextInputChange,
             value: values.institutionName
@@ -52096,10 +52119,11 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
           {
             autoComplete: "off",
             disabled: submitting,
-            error: errors.institutionWebsite,
+            error: !!errors.institutionWebsite,
             fullWidth: true,
             helperText: errors.institutionWebsite,
-            label: schema$5.institutionWebsite.label,
+            id: "institutionWebsite",
+            label: schema.institutionWebsite.label,
             name: "institutionWebsite",
             onChange: handleTextInputChange,
             value: values.institutionWebsite
@@ -52108,13 +52132,14 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.input, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProtectedTextField,
           {
-            "aria-label": schema$5.institutionLogin.label,
+            "aria-label": schema.institutionLogin.label,
             autoComplete: "off",
             disabled: submitting,
-            error: errors.institutionLogin,
+            error: !!errors.institutionLogin,
             fullWidth: true,
             helperText: errors.institutionLogin,
-            label: schema$5.institutionLogin.label,
+            id: "institutionLogin",
+            label: schema.institutionLogin.label,
             name: "institutionLogin",
             onChange: handleTextInputChange,
             value: values.institutionLogin
@@ -52190,27 +52215,6 @@ RequestInstitution.propTypes = {
   user: PropTypes$1.object.isRequired
 };
 RequestInstitution.displayName = "RequestInstitution";
-const schema$5 = {
-  email: {
-    label: __("Your email address"),
-    required: true,
-    pattern: "email"
-  },
-  institutionName: {
-    label: __("Institution name"),
-    required: true
-  },
-  institutionWebsite: {
-    label: __("Institution website"),
-    required: true,
-    pattern: "url"
-  },
-  institutionLogin: {
-    label: __("Institution login page (optional)"),
-    required: false,
-    pattern: "url"
-  }
-};
 
 const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
   const { handleClose, handleTicketSuccess, user } = props;
@@ -52222,9 +52226,24 @@ const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
     issueDescription: "",
     issueDetails: ""
   };
+  const schema = {
+    email: {
+      label: __("Your email address"),
+      required: true,
+      pattern: "email"
+    },
+    issueDescription: {
+      label: __("Brief description of the issue"),
+      required: true
+    },
+    issueDetails: {
+      label: __("Details of the issue"),
+      required: true
+    }
+  };
   const { handleTextInputChange, handleSubmit, values, errors } = useForm(
     () => setSubmitting(true),
-    schema$4,
+    schema,
     initialForm
   );
   const tokens = useTokens();
@@ -52258,10 +52277,11 @@ const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
           autoComplete: "off",
           autoFocus: !user.email,
           disabled: submitting,
-          error: errors.email,
+          error: !!errors.email,
           fullWidth: true,
           helperText: errors.email,
-          label: schema$4.email.label,
+          id: "email",
+          label: schema.email.label,
           name: "email",
           onChange: handleTextInputChange,
           value: values.email
@@ -52273,10 +52293,11 @@ const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
           autoComplete: "off",
           autoFocus: !!user.email,
           disabled: submitting,
-          error: errors.issueDescription,
+          error: !!errors.issueDescription,
           fullWidth: true,
           helperText: errors.issueDescription,
-          label: schema$4.issueDescription.label,
+          id: "issueDescription",
+          label: schema.issueDescription.label,
           name: "issueDescription",
           onChange: handleTextInputChange,
           value: values.issueDescription
@@ -52287,10 +52308,11 @@ const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
         {
           autoComplete: "off",
           disabled: submitting,
-          error: errors.issueDetails,
+          error: !!errors.issueDetails,
           fullWidth: true,
           helperText: errors.issueDetails,
-          label: schema$4.issueDetails.label,
+          id: "issueDetails",
+          label: schema.issueDetails.label,
           multiline: true,
           name: "issueDetails",
           onChange: handleTextInputChange,
@@ -52364,21 +52386,6 @@ GeneralSupport.propTypes = {
   user: PropTypes$1.object.isRequired
 };
 GeneralSupport.displayName = "GeneralSupport";
-const schema$4 = {
-  email: {
-    label: __("Your email address"),
-    required: true,
-    pattern: "email"
-  },
-  issueDescription: {
-    label: __("Brief description of the issue"),
-    required: true
-  },
-  issueDetails: {
-    label: __("Details of the issue"),
-    required: true
-  }
-};
 
 const SupportSuccess = React__default.forwardRef((props, supportSuccessRef) => {
   const { email, handleClose } = props;
@@ -52813,8 +52820,10 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
               }
             ) }) : null
           },
+          disabled: state.currentView === SEARCH_VIEWS.LOADING,
           fullWidth: true,
           id: "mx-connect-search",
+          inputProps: { "aria-label": __("Enter institution name"), "data-test": "search-input" },
           inputRef: searchInput,
           label: "",
           name: "Search",
@@ -53695,13 +53704,13 @@ const DefaultMFA = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProtectedTextField,
           {
-            "aria-label": credential.label,
             disabled: isSubmitting,
             error: true,
             helperText: errors[credential.label],
+            inputProps: { "aria-label": credential.label },
+            inputRef: i === 0 ? buttonRef : null,
             name: credential.label,
             onChange: handleMFACodeChange,
-            ref: i === 0 ? buttonRef : null,
             value: values[credential.label] || ""
           }
         )
@@ -57266,7 +57275,7 @@ const usePasswordInputValidation = () => {
           "aria-label": showPassword ? __("Hide password") : __("Show password"),
           edge: "end",
           onClick: handleTogglePassword,
-          children: showPassword ? /* @__PURE__ */ jsxRuntimeExports.jsx(b, { name: "visibility_off" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(b, { name: "visibility" })
+          children: showPassword ? /* @__PURE__ */ jsxRuntimeExports.jsx(b, { className: "material-symbols-rounded", name: "visibility_off" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(b, { className: "material-symbols-rounded", name: "visibility" })
         }
       ) })
     )
@@ -57596,13 +57605,14 @@ const Credentials = React__default.forwardRef(
                 ProtectedTextField,
                 {
                   InputProps: { endAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(PasswordShowButton, {}) },
-                  "aria-label": field.label,
                   autoCapitalize: "none",
                   autoComplete: "new-password",
                   disabled: isProcessingMember,
                   error: validations.isError || !!errors[field.field_name],
                   fullWidth: true,
                   helperText: validations.isCapsLockOn && __("Caps lock is on") || validations.validateSpaceMessage || errors[field.field_name],
+                  id: field.field_name,
+                  inputProps: { "aria-label": field.label },
                   label: field.label,
                   name: field.field_name,
                   onBlur: handleBlur,
@@ -57619,7 +57629,6 @@ const Credentials = React__default.forwardRef(
               ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: errors[field.field_name] ? styles.inputError : styles.input, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ProtectedTextField,
                 {
-                  "aria-label": __("Enter your %1", field.label),
                   autoCapitalize: "none",
                   autoComplete: "new-password",
                   autoFocus: i === 0,
@@ -57627,6 +57636,8 @@ const Credentials = React__default.forwardRef(
                   error: !!errors[field.field_name],
                   fullWidth: true,
                   helperText: errors[field.field_name],
+                  id: field.field_name,
+                  inputProps: { "aria-label": __("Enter your %1", field.label) },
                   label: field.label,
                   name: field.field_name,
                   onChange: handleUserNameTextChange,
@@ -60097,19 +60108,19 @@ const getStyles$n = (tokens) => {
   };
 };
 
-const schema$3 = {
-  routingNumber: {
-    label: __("Routing number"),
-    required: true,
-    pattern: "digits",
-    length: 9
-  }
-};
 const RoutingNumber = (props) => {
   const { accountDetails, onContinue, stepToIAV } = props;
   const connectConfig = useSelector(selectConnectConfig);
   const includeIdentity = connectConfig?.include_identity ?? false;
   const { api } = useApi();
+  const schema = {
+    routingNumber: {
+      label: __("Routing number"),
+      required: true,
+      pattern: "digits",
+      length: 9
+    }
+  };
   const containerRef = useRef(null);
   useAnalyticsPath(...PageviewInfo.CONNECT_MICRODEPOSITS_ROUTING_NUMBER);
   const tokens = useTokens();
@@ -60123,7 +60134,7 @@ const RoutingNumber = (props) => {
   const initialForm = { routingNumber: accountDetails?.routing_number ?? "" };
   const { handleTextInputChange, handleSubmit, values, errors } = useForm(
     () => setSubmitting(true),
-    schema$3,
+    schema,
     initialForm
   );
   useEffect(() => {
@@ -60207,11 +60218,11 @@ const RoutingNumber = (props) => {
         {
           autoComplete: "off",
           autoFocus: true,
-          "data-test": "routing-number-input",
           disabled: submitting,
-          error: errors.routingNumber ?? routingBlocked,
+          error: !!errors.routingNumber || routingBlocked,
           fullWidth: true,
           helperText: errors.routingNumber ?? routingBlocked,
+          inputProps: { "data-test": "routing-number-input" },
           label: __("Routing number"),
           name: "routingNumber",
           onChange: handleTextInputChange,
@@ -60314,21 +60325,6 @@ HowItWorks.propTypes = {
   onContinue: PropTypes$1.func.isRequired
 };
 
-const schema$2 = {
-  firstName: {
-    label: __("First name"),
-    required: true
-  },
-  lastName: {
-    label: __("Last name"),
-    required: true
-  },
-  email: {
-    label: __("Email"),
-    required: true,
-    pattern: "email"
-  }
-};
 const PersonalInfoForm = ({ accountDetails, onContinue }) => {
   const containerRef = useRef(null);
   useAnalyticsPath(...PageviewInfo.CONNECT_MICRODEPOSITS_PERSONAL_INFO_FORM);
@@ -60338,9 +60334,24 @@ const PersonalInfoForm = ({ accountDetails, onContinue }) => {
     lastName: accountDetails.last_name ?? "",
     email: accountDetails.email ?? ""
   };
+  const schema = {
+    firstName: {
+      label: __("First name"),
+      required: true
+    },
+    lastName: {
+      label: __("Last name"),
+      required: true
+    },
+    email: {
+      label: __("Email"),
+      required: true,
+      pattern: "email"
+    }
+  };
   const { handleTextInputChange, handleSubmit, values, errors } = useForm(
     () => setIsSubmitting(true),
-    schema$2,
+    schema,
     initialFormValues
   );
   const tokens = useTokens();
@@ -60370,11 +60381,11 @@ const PersonalInfoForm = ({ accountDetails, onContinue }) => {
         ProtectedTextField,
         {
           autoFocus: true,
-          "data-test": "first-name-input",
           error: errors.firstName,
           fullWidth: true,
-          helperText: errors.firstName,
-          label: schema$2.firstName.label,
+          helperText: !!errors.firstName,
+          inputProps: { "data-test": "first-name-input" },
+          label: schema.firstName.label,
           name: "firstName",
           onChange: handleTextInputChange,
           value: values.firstName
@@ -60383,11 +60394,11 @@ const PersonalInfoForm = ({ accountDetails, onContinue }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.inputStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProtectedTextField,
         {
-          "data-test": "last-name-input",
           error: errors.lastName,
           fullWidth: true,
-          helperText: errors.lastName,
-          label: schema$2.lastName.label,
+          helperText: !!errors.lastName,
+          inputProps: { "data-test": "last-name-input" },
+          label: schema.lastName.label,
           name: "lastName",
           onChange: handleTextInputChange,
           value: values.lastName
@@ -60396,11 +60407,11 @@ const PersonalInfoForm = ({ accountDetails, onContinue }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.inputStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProtectedTextField,
         {
-          "data-test": "email-input",
-          error: errors.email,
+          error: !!errors.email,
           fullWidth: true,
           helperText: errors.email,
-          label: schema$2.email.label,
+          inputProps: { "data-test": "email-input" },
+          label: schema.email.label,
           name: "email",
           onChange: handleTextInputChange,
           value: values.email
@@ -60442,20 +60453,6 @@ PersonalInfoForm.propTypes = {
   onContinue: PropTypes$1.func.isRequired
 };
 
-const schema$1 = {
-  accountNumber: {
-    label: __("Account number"),
-    required: true,
-    pattern: "digits",
-    equalTo: "accountNumberConfirm"
-  },
-  accountNumberConfirm: {
-    label: __("Confirm account number"),
-    required: true,
-    pattern: "digits",
-    equalTo: "accountNumber"
-  }
-};
 const AccountInfo = (props) => {
   const { accountDetails, focus, onContinue } = props;
   const containerRef = useRef(null);
@@ -60468,9 +60465,23 @@ const AccountInfo = (props) => {
     accountNumber: accountDetails?.account_number ?? "",
     accountNumberConfirm: accountDetails?.account_number ?? ""
   };
+  const schema = {
+    accountNumber: {
+      label: __("Account number"),
+      required: true,
+      pattern: "digits",
+      equalTo: "accountNumberConfirm"
+    },
+    accountNumberConfirm: {
+      label: __("Confirm account number"),
+      required: true,
+      pattern: "digits",
+      equalTo: "accountNumber"
+    }
+  };
   const { handleTextInputChange, handleSubmit, values, errors } = useForm(
     handleContinue,
-    schema$1,
+    schema,
     initialForm
   );
   const tokens = useTokens();
@@ -60527,11 +60538,11 @@ const AccountInfo = (props) => {
           {
             autoComplete: "off",
             autoFocus: focus === AccountFields.ACCOUNT_NUMBER,
-            "data-test": "account-number-input",
-            error: errors.accountNumber,
+            error: !!errors.accountNumber,
             fullWidth: true,
             helperText: errors.accountNumber,
-            label: schema$1.accountNumber.label,
+            inputProps: { "data-test": "account-number-input" },
+            label: schema.accountNumber.label,
             name: "accountNumber",
             onChange: handleTextInputChange,
             type: "tel",
@@ -60542,11 +60553,11 @@ const AccountInfo = (props) => {
           ProtectedTextField,
           {
             autoComplete: "off",
-            "data-test": "confirm-account-number-input",
-            error: errors.accountNumberConfirm,
+            error: !!errors.accountNumberConfirm,
             fullWidth: true,
             helperText: errors.accountNumberConfirm,
-            label: schema$1.accountNumberConfirm.label,
+            inputProps: { "data-test": "confirm-account-number-input" },
+            label: schema.accountNumberConfirm.label,
             name: "accountNumberConfirm",
             onChange: handleTextInputChange,
             type: "tel",
@@ -60947,22 +60958,6 @@ ComeBack.propTypes = {
   onDone: PropTypes$1.func.isRequired
 };
 
-const schema = {
-  firstAmount: {
-    label: __("Amount 1"),
-    pattern: "number",
-    required: true,
-    min: 0.01,
-    max: 0.09
-  },
-  secondAmount: {
-    label: __("Amount 2"),
-    pattern: "number",
-    required: true,
-    min: 0.01,
-    max: 0.09
-  }
-};
 const ACTIONS$1 = {
   SET_SUBMITTING: "verifyDeposits/set_submitting",
   SUBMITTING_ERROR: "verifyDeposits/submitting_error"
@@ -60982,6 +60977,22 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
   useAnalyticsPath(...PageviewInfo.CONNECT_MICRODEPOSITS_VERIFY_DEPOSITS);
   const { api } = useApi();
   const initialForm = { firstAmount: "", secondAmount: "" };
+  const schema = {
+    firstAmount: {
+      label: __("Amount 1"),
+      pattern: "number",
+      required: true,
+      min: 0.01,
+      max: 0.09
+    },
+    secondAmount: {
+      label: __("Amount 2"),
+      pattern: "number",
+      required: true,
+      min: 0.01,
+      max: 0.09
+    }
+  };
   const { handleTextInputChange, handleSubmit, values, errors } = useForm(
     () => dispatch({ type: ACTIONS$1.SET_SUBMITTING }),
     schema,
@@ -61033,10 +61044,12 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.firstInput, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProtectedTextField,
           {
+            FormHelperTextProps: { id: "firstAmount-error" },
             autoComplete: "off",
-            "data-test": "amount-1-input",
-            error: errors.firstAmount,
+            error: !!errors.firstAmount,
             helperText: errors.firstAmount,
+            id: schema.firstAmount.label,
+            inputProps: { "data-test": "amount-1-input" },
             label: schema.firstAmount.label,
             name: "firstAmount",
             onChange: handleTextInputChange,
@@ -61047,10 +61060,12 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.secondInput, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProtectedTextField,
           {
+            FormHelperTextProps: { id: "secondAmount-error" },
             autoComplete: "off",
-            "data-test": "amount-2-input",
-            error: errors.secondAmount,
+            error: !!errors.secondAmount,
             helperText: errors.secondAmount,
+            id: schema.secondAmount.label,
+            inputProps: { "data-test": "amount-2-input" },
             label: schema.secondAmount.label,
             name: "secondAmount",
             onChange: handleTextInputChange,
@@ -62545,11 +62560,13 @@ const ManualAccountForm = React__default.forwardRef(
             return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.dateInput, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProtectedTextField,
               {
+                FormHelperTextProps: { id: field.name + "-error" },
                 autoFocus: shouldFocus(field.name, returnField, i),
-                "data-test": "date-input",
-                error: errors[field.name],
+                error: !!errors[field.name],
                 fullWidth: true,
                 helperText: errors[field.name],
+                id: field.name,
+                inputProps: { "data-test": "date-input" },
                 label: field.label,
                 name: field.name,
                 onChange: () => {
@@ -62580,11 +62597,13 @@ const ManualAccountForm = React__default.forwardRef(
             return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.textInput, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProtectedTextField,
               {
+                FormHelperTextProps: { id: field.name + "-error" },
                 autoFocus: shouldFocus(field.name, returnField, i),
-                "data-test": `text-input-${field.name}`,
-                error: errors[field.name],
+                error: !!errors[field.name],
                 fullWidth: true,
                 helperText: errors[field.name],
+                id: field.name,
+                inputProps: { "data-test": `text-input-${field.name}` },
                 label: field.label,
                 name: field.name,
                 onChange: handleTextInputChange,