feat(deps): update brand, header, and platform dependencies

[andrey-canon]

Description

This adds multiple NELC custom dependencies. That includes the following features

• Language selector
• ProfileDataModal
• Brand (Default font)

Issue # 1803

How to test language selector

1. Checkout this branch
2. Run npm install
3. Run the following commands

export PATH="$(pwd)/node_modules/.bin:$PATH" 
make OPENEDX_ATLAS_PULL=true ATLAS_OPTIONS="--repository=nelc/futurex-translations --revision=open-release/teak.master" pull_translations

4. Add the following setting MFE_CONFIG["ENABLE_HEADER_LANG_SELECTOR"] = True MFE_CONFIG["SITE_SUPPORTED_LANGUAGES"] = ["en", "ar"]
5. Verify the language selector component

Note: the MFE has no translation in the source repo that's why this just shows dependency's translations (like header)

How to branding and primary color customization

1. run npm install
2. Open learning-path -> the mfe must load with default color
3. Add the following setting and check learning-path page -> the mfe must load with red color

  "CUSTOM_PRIMARY_COLORS": {
    "pgn-color-primary-base": "#AA0000"
  },

4. Add the following setting and check discussion page -> the mfe must load with green color

  "PARAGON_THEME_URLS": {
    "core": {
        "url": "https://cdn.jsdelivr.net/combine/npm/@edx/paragon@22.0.0-alpha.13/styles/css/themes/light/utility-classes.min.css,npm/@edx/paragon@22.0.0-alpha.13/dist/core.min.css"
    },
    "defaults": {
        "light": "light"
    },
    "variants": {
        "light": {
            "url": "https://css-varsify.s3.amazonaws.com/public/a9959998-0bab-4447-ada5-6819866195f3.css"
        }
    }
  },

5. check the typography

How to test ProfileDataModal

1. Checkout this branch
2. Run npm install
3. Add the following setting

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"

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

2026-07-21.14-50-09.mp4

[johanseto]

Seem working everything.
Do you know maybe a reason why my local env doesnt show the header lang selector?

[andrey-canon]

Seem working everything. Do you know maybe a reason why my local env doesnt show the header lang selector?

I'm not entirely sure, but the only potential cause I can think of is that the translation download/compilation command wasn't executed.

export PATH="$(pwd)/node_modules/.bin:$PATH" 
make OPENEDX_ATLAS_PULL=true ATLAS_OPTIONS="--repository=nelc/futurex-translations --revision=open-release/teak.master" pull_translations

or maybe these settings

MFE_CONFIG["SITE_SUPPORTED_LANGUAGES"] = ["en", "ar"]
MFE_CONFIG["ENABLE_HEADER_LANG_SELECTOR"] = True

[johanseto]

Ni

Seem working everything. Do you know maybe a reason why my local env doesnt show the header lang selector?

I'm not entirely sure, but the only potential cause I can think of is that the translation download/compilation command wasn't executed.

export PATH="$(pwd)/node_modules/.bin:$PATH" 
make OPENEDX_ATLAS_PULL=true ATLAS_OPTIONS="--repository=nelc/futurex-translations --revision=open-release/teak.master" pull_translations

or maybe these settings

MFE_CONFIG["SITE_SUPPORTED_LANGUAGES"] = ["en", "ar"]
MFE_CONFIG["ENABLE_HEADER_LANG_SELECTOR"] = True

NIce the command I ran it.
I was only missing

MFE_CONFIG["SITE_SUPPORTED_LANGUAGES"] = ["en", "ar"]