value: formatPhone()

in src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditProfile/EditProfileFormInputs.tsx [253:328]
76 lines of code
6 McCabe index (conditional complexity)

                value: formatPhone(value),
                index: 0,
              })
            }
            name={`${props.profileDataKey}-0`}
            value={primaryPhoneItem.value}
            isInvalid={!primaryPhoneItem.isValid}
            label={l10n.getString(
              "settings-edit-profile-info-form-input-label-primary-phone-number",
            )}
            errorMessage={l10n.getString(
              "settings-edit-profile-info-form-input-error-invalid-phone-number",
            )}
            hasFloatingLabel
          />
          {secondaryPhoneItems.length > 0 && (
            <div className={styles.secondaryInputs}>
              {phoneData.slice(1).map((item, itemIndex) => {
                const currentItemIndex = itemIndex + 1;
                const inputKey = `${props.profileDataKey}-${currentItemIndex}`;
                return (
                  <Fragment key={inputKey}>
                    {itemIndex === 0 && (
                      <strong>
                        {l10n.getString(
                          "settings-edit-profile-info-form-fieldset-section-other-label-phone-numbers",
                        )}
                      </strong>
                    )}
                    <div className={styles.inputWrapper}>
                      <InputField
                        type="tel"
                        onChange={(value) =>
                          props.handleOnInputChange({
                            key: props.profileDataKey as ProfileDataListKey,
                            value,
                            index: currentItemIndex,
                          })
                        }
                        name={inputKey}
                        value={item.value}
                        isInvalid={!item.isValid || item.isDuplicate}
                        label={l10n.getString(
                          "settings-edit-profile-info-form-input-label-other-phone-number",
                        )}
                        errorMessage={
                          item.isDuplicate
                            ? l10n.getString(
                                "settings-edit-profile-info-form-input-error-duplicate-phone-number",
                              )
                            : l10n.getString(
                                "settings-edit-profile-info-form-input-error-invalid-phone-number",
                              )
                        }
                        hasFloatingLabel
                      />
                      <RemoveItemButton
                        itemKey={props.profileDataKey}
                        onRemove={() =>
                          props.onRemove(
                            props.profileDataKey as ProfileDataListKey,
                            currentItemIndex,
                          )
                        }
                      />
                    </div>
                  </Fragment>
                );
              })}
            </div>
          )}
          {props.profileData[props.profileDataKey].length <
          CONST_DATA_BROKER_PROFILE_DETAIL_LIMITS[props.profileDataKey] ? (
            <AddItemButton
              itemKey={props.profileDataKey}
              onAdd={() =>