Skip to content

feat: add nelc custom dependencies#4

Merged
andrey-canon merged 1 commit intoopen-release/teak.nelpfrom
teak-mig/FUTUREX-1530
Oct 29, 2025
Merged

feat: add nelc custom dependencies#4
andrey-canon merged 1 commit intoopen-release/teak.nelpfrom
teak-mig/FUTUREX-1530

Conversation

@andrey-canon
Copy link
Collaborator

Description

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

  • Language selector
  • ProfileDataModal
  • Brand (Default font)
  • Sup

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
  1. Add the following setting MFE_CONFIG["ENABLE_HEADER_LANG_SELECTOR"] = True
  2. Verify the language selector component
2025-10-27.15-57-30.mp4

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"
  },
  1. 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"
        }
    }
  },
  1. check the typography
image image

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"
  1. Go to discussion page
  2. Verify the modal behavior, complete all the fields and save the data
2025-10-27.16-01-54.mp4

Copy link

@johanseto johanseto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
Wroking in my local env

Screencast.from.27-10-25.17.13.41.webm

@andrey-canon andrey-canon force-pushed the teak-mig/FUTUREX-1531 branch from f8c61be to 58195d8 Compare October 29, 2025 17:02
@andrey-canon andrey-canon force-pushed the teak-mig/FUTUREX-1530 branch from e90d860 to d728915 Compare October 29, 2025 17:05
@andrey-canon andrey-canon changed the base branch from teak-mig/FUTUREX-1531 to open-release/teak.nelp October 29, 2025 17:05
@andrey-canon andrey-canon merged commit 249e341 into open-release/teak.nelp Oct 29, 2025
3 checks passed
@andrey-canon andrey-canon temporarily deployed to open-release/teak.nelp October 29, 2025 17:05 — with GitHub Actions Inactive
@andrey-canon andrey-canon temporarily deployed to open-release/teak.nelp October 29, 2025 17:06 — with GitHub Actions Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants