feat: add frontend-essentials package and implement ProfileDataModal

[andrey-canon]

Description

Adds frontend-essentials package and implements ProfileDataModal into LearningHeader. Migration pr of eduNEXT#1

Issue # 1308

How to test

1. Set the required settings

VALID_PUBLIC_SECTORS = [
    "saudi_post",
    "communications_and_information_technology_commission",
    "ministry_of_communications_and_information_technology",
    "real_estate_development_fund",
    "general_authority_for_statistics",
    "other"
]
REQUIRED_USER_FIELDS = {
    "account": {
    },
    "profile": {
        "phone_number": {"max_length": 15, "format": "phone"},
    },
    "extra_info": {
        "occupation": {
            "char_type": "latin",
            "max_length": 50,
        },
        "sector": {
            "allow_empty": True,
            "dependent_fields": {
                "extrainfo.occupation": {
                    "employee": [
                        "public",
                        "private",
                        "non_profit"
                    ]
                }
            },
            "max_length": 50
        },
        "specific_sector": {
            "allow_empty": True,
            "dependent_fields": {
                "extrainfo.sector": {
                    "public": VALID_PUBLIC_SECTORS,
                }
            },
            "max_length": 150,
        },
        "national_id": {
            "max_length": 15,
            "format": "numeric",
        },
        "arabic_name": {
            "max_length": 50,
            "char_type": "arabic",
        },
    },
}
ENABLE_OTP_VALIDATION = False
USER_PROFILE_API_EXTRA_INFO_FIELDS = [
    "arabic_name",
    "arabic_first_name",
    "arabic_last_name",
    "occupation",
    "sector",
    "national_id",
    "specific_sector",
]
CONDITIONAL_USER_FIELDS = {
    "occupation": {
        "dependent_fields": {
            "employee": [
                "sector",
            ],
        },
        "key": "occupation",
        "options": [
            "employee",
            "student",
            "unemployed",
        ],
    },
    "public_sector": {
        "key": "specificSector",
        "options": VALID_PUBLIC_SECTORS,
    },
    "sector": {
        "dependent_fields": {
            "non_profit": [
                "specific_sector",
            ],
            "private": [
                "specific_sector",
            ],
            "public": [
                "public_sector",
            ]
        },
        "key": "sector",
        "options": [
            "public",
            "private",
            "non_profit",
        ],
    },
}
MFE_CONFIG["CONDITIONAL_USER_FIELDS"] = CONDITIONAL_USER_FIELDS
MFE_CONFIG["COURSE_EXPERIENCE_API_URL"] = "http://local.openedx.io:8000/eox-nelp/api/experience/v1"
MFE_CONFIG["OTP_API_URL"] = "http://local.openedx.io:8000/eox-nelp/api/one-time-password/v1"
MFE_CONFIG["USER_PROFILE_API_URL"] = "http://local.openedx.io:8000/eox-nelp/api/user-profile/v1"

2. Set the module.config.js file

module.exports = {
    /*
    Modules you want to use from local source code.  Adding a module here means that when this app
    runs its build, it'll resolve the source from peer directories of this app.
  
    moduleName: the name you use to import code from the module.
    dir: The relative path to the module's source code.
    dist: The sub-directory of the source code where it puts its build artifact.  Often "dist".
    */
    localModules: [
        { moduleName: '@edx/frontend-component-header/dist', dir: '../frontend-component-header', dist: 'src' },
        { moduleName: '@edx/frontend-component-header', dir: '../frontend-component-header', dist: 'src' },
    ],
};

3. Go to the learning page
4. Verify the modal behavior, complete all the fields and save the data

2025-10-07.10-33-05.mp4

[johanseto]

LGTM

Working in my local env

Screencast.from.08-10-25.09.55.02.webm