function MonitoredEmail()

in src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.tsx [37:114]
68 lines of code
5 McCabe index (conditional complexity)

function MonitoredEmail(props: {
  emailAddress: SanitizedEmailAddressRow;
  breachCount: number;
  onRemoveEmail: typeof onRemoveEmail;
}) {
  const l10n = useL10n();
  const recordTelemetry = useTelemetry();
  const [isVerificationEmailResent, setIsVerificationEmailResent] =
    useState(false);
  const isInvalid = !props.emailAddress.verified;

  return (
    <>
      <InputField
        aria-label={props.emailAddress.email}
        type="email"
        defaultValue={props.emailAddress.email}
        isDisabled
        iconButton={
          <Button
            onPress={() => {
              recordTelemetry("button", "click", {
                button_id: "removed_email_address",
              });
              void props.onRemoveEmail(props.emailAddress);
            }}
            variant="icon"
            small
          >
            <DeleteIcon
              alt={l10n.getString("settings-remove-email-button-label")}
            />
          </Button>
        }
        isInvalid={isInvalid}
        errorMessage={l10n.getString("settings-email-verification-callout")}
        description={l10n.getString("settings-email-number-of-breaches-info", {
          breachCount: props.breachCount,
        })}
      />
      {!props.emailAddress.verified && (
        <div className={styles.resendButtonWrapper}>
          <Button
            variant="link"
            className={styles.resendButton}
            isDisabled={isVerificationEmailResent}
            onPress={() => {
              void fetch("/api/v1/user/resend-email", {
                headers: {
                  "Content-Type": "application/json",
                  Accept: "text/html", // set to request localized HTML email
                },
                mode: "same-origin",
                method: "POST",
                body: JSON.stringify({ emailId: props.emailAddress.id }),
              })
                .then((response) => {
                  if (response.ok) {
                    setIsVerificationEmailResent(true);
                  }
                })
                // This catch block is only reporting an error to Sentry.
                /* c8 ignore next 3 */
                .catch((error) => {
                  captureException(error);
                });
            }}
          >
            {l10n.getString("settings-resend-email-verification-link")}
            {isVerificationEmailResent && (
              <CheckIcon alt="" width={14} height={14} />
            )}
          </Button>
        </div>
      )}
    </>
  );
}