function ProfileInfoSection()

in src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfoRedesign.tsx [122:225]
104 lines of code
6 McCabe index (conditional complexity)

function ProfileInfoSection({
  profileData,
}: {
  profileData: OnerepProfileRow;
}) {
  const l10n = useL10n();
  const {
    first_name,
    middle_name,
    last_name,
    first_names,
    middle_names,
    last_names,
    date_of_birth,
    phone_numbers,
    addresses,
  } = profileData;
  const dateOfBirthString = date_of_birth.toLocaleDateString(getLocale(l10n), {
    dateStyle: "short",
    timeZone: "UTC",
  });
  const additionalNamesCount =
    first_names.length + middle_names.length + last_names.length;
  const { city, state } = addresses[0];
  return (
    <section className={styles.section}>
      <div>
        <h4>{l10n.getString("settings-details-about-you-header")}</h4>
        <p>{l10n.getString("settings-details-about-you-description")}</p>
      </div>
      <ul className="noList">
        <li>
          <div className={styles.detailLabel}>
            {l10n.getString("settings-details-about-you-name-label")}
          </div>
          <div className={styles.detailContent}>
            {`${first_name}${middle_name ? ` ${middle_name} ` : " "}${last_name}`}
            {additionalNamesCount > 0 && (
              <span className={styles.detailMore}>
                {l10n.getString("settings-details-about-you-more-indicator", {
                  moreCount: additionalNamesCount,
                })}
              </span>
            )}
          </div>
        </li>
        <li>
          <div className={styles.detailLabel}>
            {l10n.getString("settings-details-about-you-date-of-birth-label")}
          </div>
          <div className={styles.detailContent}>{dateOfBirthString}</div>
        </li>
        {phone_numbers.length > 0 && (
          <li>
            <div className={styles.detailLabel}>
              {l10n.getString("settings-details-about-you-phone-label")}
            </div>
            <div className={styles.detailContent}>
              {formatPhone(phone_numbers[0])}
              {phone_numbers.length > 1 && (
                <span className={styles.detailMore}>
                  {l10n.getString("settings-details-about-you-more-indicator", {
                    moreCount: phone_numbers.length - 1,
                  })}
                </span>
              )}
            </div>
          </li>
        )}
        <li>
          <div className={styles.detailLabel}>
            {l10n.getString("settings-details-about-you-location-label")}
          </div>
          <div className={styles.detailContent}>
            {`${city}, ${state}`}
            {addresses.length > 1 && (
              <span className={styles.detailMore}>
                {l10n.getString("settings-details-about-you-more-indicator", {
                  moreCount: addresses.length - 1,
                })}
              </span>
            )}
          </div>
        </li>
      </ul>
      <span className={styles.addButton}>
        <TelemetryButton
          className={styles.link}
          variant="secondary"
          href={"/user/settings/edit-profile"}
          event={{
            module: "link",
            name: "click",
            data: {
              link_id: "settings_edit_info_add_details",
            },
          }}
        >
          {l10n.getString("settings-details-about-you-button-label")}
        </TelemetryButton>
      </span>
    </section>
  );
}