Settings UI: Load in the person social profiles when the switching to represent a person

[igorschoester]

Context

Summary

This PR can be summarized in the following changelog entry:

• Fixes a bug where the social profiles of a user would not be loaded in when switching from representing an organization to representing a person.

Relevant technical choices:

• Moved and renamed the supportedPersonSocialProfiles for clarity and preventing side effects (window variable) in the component.
• Had to move the sync out of PersonSocialProfiles and into SiteRepresentation due to it now needing the current and previous value of the companyOrPerson to check if it changed.
• Used an "overkill" useCallback to keep the useEffect dependencies a bit cleaner.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• In Settings > Site representation
  • Configure person to "admin"
  • Configure representation (back) to organization
  • Save
• Go to WP Users > "admin"
  • Add a Facebook profile URL
• Go to Settings > Site representation
• Switch to Person “admin“
• Verify that Facebook URL is no longer empty

Verify empty

Either reset your database and try the above without configuring the person to "admin" step.
Or update the company_or_person_user_id to 0 in wpseo_titles in your database. This means you never entered a user.

• In Settings > Site representation
  • Configure representation to organization
• Go to WP Users > "admin"
  • Add a Facebook profile URL
• Go to Settings > Site representation
• Ensure you have the network tab in your browser developer tools open
• Switch to Person “admin“
• Verify that Facebook URL is empty
• Verify no request to person_social_profiles with user_id 0 went out

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Block/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change.

Quality assurance

• I have tested this code to the best of my abilities
• I have added unit tests to verify the code works as intended
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label and noted the work hours.

Fixes https://yoast.atlassian.net/browse/DUPP-811

[nolledgeable]

CR & ACC ✅