Jlc/add nelc custom dependencies

[johanseto]

Description

Add nelc dependencies.

Current status: UNBlocked

Frontend platform is being not compatible due logging app initialization.

jira story: https://edunext.atlassian.net/browse/FUTUREX-1463?atlOrigin=eyJpIjoiNTNhNDRjYWQ4MTFjNDIyYTg3MWY0OTkyOWM4YWQ3MGYiLCJwIjoiaiJ9

After using an appropriate paragon package Frontend platform starts working

• Language selector
• ProfileDataModal
• Brand (Default font)

Issue # 1530

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/redwood.master" pull_translations

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

Screencast.from.31-10-25.11.27.55.webm

How to branding and primary color customization

1. run npm install
2. Open discussion -> the mfe must load with default color
3. Add the following setting and check discussion 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

Screencast.from.31-10-25.11.27.40.webm

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 accounts page
5. Verify the modal behavior, complete all the fields and save the data

Screencast.from.31-10-25.11.25.49.webm

[andrey-canon]

You set the base branch (open-release/teak.nelp) from release/teak, which is incorrect. The correct base is teak-design-tokens. Please retarget your PR to a Paragon-compatible branch—start with teak-design-tokens.

[andrey-canon]

This is missing

[andrey-canon]

After changing the base branch I didn't have any issue

However styles and the custom header are still missing

[andrey-canon]

LGTM

2025-10-31.13-10-58.mp4