[Free plan] Features unavailable for free plan should be hidden by default on end-user app

## Background:

* Testing environment: staging
* Testing app: [https://qademowebrefreshtoken.authgear-staging.com](https://qademowebrefreshtoken.authgear-staging.com)
* Testing browser: Chrome on Mac

## Description:

If the project is using free plan, on the end user app settings page, it still shows the unavailable sections, e.g. phone number, username, clicking into those pages will see "No phone numbers available" and no actions can be done.

It is because the end-user access right for those fields are set as editable by default, but free plan projects actually have not access to use them.

## Steps to reproduce:

1. Create a new project with default settings (login by email and password)
2. Keep it as Free plan (don't upgrade)
3. Go to the end user app page (endpoint)
4. Sign up and go to Settings
5. See "Primary Phone Number" and "Username" fields, but clicking into it cannot change anything

## Expected behaviour:

Suggested hiding the features by default if they are not available for the user's plan, i.e. if the project is on free plan, the phone number and username fields should be hidden on the end user app.

But for paid user, it may also be a problem if they found the attributes still hidden after plan upgrade, it may need another handling to help user change / let user know they need to change the attributes to show the components to user.

## Screenshot:






Start with the staging end-user app and its Settings page, following the free-plan reproduction steps for the Primary Phone Number and Username fields. The work is done when unavailable fields are hidden by default for free-plan projects and the behavior after a paid-plan upgrade is handled consistently.

Written by the indexing model from the issue text.