// Add the internal name of your people picker to this variable
const triggerFin = "Approver";

window.dffs_fieldChanged = async function (fin, newValue, oldValue) {
  if (fin === triggerFin) {
    if (newValue.length > 0) {
      const data = await getUserProfile(getFieldValue(fin)[0].accountname);
      const getValue = (arr, targetKey) => data.userProperties.find((item) => item.Key === targetKey)?.Value;
      const phone = getValue(data, 'WorkPhone');
      console.log(phone);
    }
  }
};

async function getUserProfile(loginName) {
  const encodedLoginName = encodeURIComponent(loginName);
  const endpoint = `${_spPageContextInfo.webServerRelativeUrl}/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='${encodedLoginName}'`;
  try {
    const response = await fetch(endpoint, {
      method: 'GET',
      headers: {
        Accept: 'application/json;odata=minimalmetadata',
        'Content-Type': 'application/json;odata=minimalmetadata'
      }
    });
    if (!response.ok) {
      console.error(`HTTP error! status: ${response.status}`);
      return null;
    }
    const data = await response.json();
    return { userProperties: data.UserProfileProperties };
  } catch (error) {
    console.error('Fetch error:', error);
    return null;
  }
}