\n )\n}\n\nexport default ServicesFilterTabs","import React, {useMemo} from 'react';\nimport {MDBRow} from 'mdb-react-ui-kit';\nimport Skeleton from 'react-loading-skeleton';\nimport {useSelector} from 'react-redux';\nimport useServicesHook from '../../hooks/useServicesHook';\nimport {servicesCategoriesIcon} from '../../constants/servicesCategoriesIcon';\n\n// Component to render a loading skeleton for the filter buttons\nconst FilterSkeleton = () => (\n // Generate an array of 5 skeletons to mimic loading state\n Array.from({length: 5}).map((_, index) => (\n \n ))\n);\n\n// Component to render each filter button\nconst FilterButton = ({item, active, onClick}) => {\n const {Title, icon} = item;\n // Determine the class for icon styles based on whether the button is active\n const iconClasses = active\n ? '[&_path]:!stroke-whitely-50 [&_rect]:fill-whitely-50'\n : '[&_path]:!stroke-primary-500 [&_rect]:fill-primary-500';\n\n return (\n \n \n {Title} {/* Display the category title */}\n \n );\n};\n\n// Main component for the filter bar\nconst CategoriesSideFilter = () => {\n const {handelGetSevicesByCategory, showFilterInMobile, setShowFilterInMobile, loading} = useServicesHook();\n const {categoriesList} = useSelector((state) => state.services); // Get categories from Redux store\n\n // Enhance categories with icons and sort order, memoized for performance\n const enhancedCategories = useMemo(() => categoriesList.map((item) => {\n const iconItem = servicesCategoriesIcon.find((icon) => icon.ID === item.ID);\n return {\n ...item,\n icon: iconItem?.icon, // Add icon if it matches the category ID\n order: iconItem?.order, // Add order for sorting\n };\n }), [categoriesList]); // Recompute only when categoriesList changes\n\n // Filter and sort categories, excluding a specific one based on language\n const filteredCategories = useMemo(() =>\n enhancedCategories\n .filter((item) => item.ID !== (isArabic ? 4 : 10)) // Exclude a category based on language\n .sort((a, b) => a.order - b.order) // Sort categories by the specified order\n , [enhancedCategories]); // Recompute only when enhancedCategories changes\n //========================================================\n // Render categories or loading skeletons\n //========================================================\n const renderCategories = () => {\n if (loading) {\n return ; // Show skeleton if data is loading\n }\n\n // Render filter buttons for each category\n return filteredCategories.map((item) => (\n handelGetSevicesByCategory(item.ID)} // Set category filter on click\n />\n ));\n };\n\n //========================================================\n // Render a special category that's not in the main list\n //========================================================\n const renderSpecialCategory = () => {\n const specialCategory = categoriesList.find((item) => item.ID === (isArabic ? 4 : 10));\n if (!specialCategory) return null; // If the category isn't found, return nothing\n\n return (\n <>\n {/* Separator for better visual structure */}\n handelGetSevicesByCategory(specialCategory.ID)}\n />\n \n );\n };\n\n // Text variables for easier language support\n const filterTitle = isArabic ? 'كل الفئات' : 'All Categories';\n const filterLabel = isArabic ? 'تصفية' : 'Filter';\n const backButtonIcon = isArabic ? 'fas fa-chevron-right' : 'fas fa-chevron-left';\n const filterByCategory = isArabic ? 'تصفية حسب الفئة' : 'Filter by Category';\n\n return (\n <>\n {/* Header for mobile view with filter button */}\n
\n
{filterTitle}
\n {/* Show filter on mobile */}\n \n
\n\n {/* Filter bar for large screens and conditional mobile display */}\n \n {showFilterInMobile && (\n
\n {/* Hide filter on mobile */}\n \n {filterByCategory}\n
\n )}\n
\n {renderCategories()} {/* Render the list of category buttons */}\n {renderSpecialCategory()} {/* Render the special category button if it exists */}\n
\n \n \n );\n};\n\nexport default CategoriesSideFilter;\n","import React from 'react'\nimport {\n MDBBtn,\n MDBModal,\n MDBModalBody,\n MDBModalContent,\n MDBModalDialog,\n MDBRadio,\n} from 'mdb-react-ui-kit'\nimport { useDispatch } from 'react-redux'\nimport { SET_NABO_SERVICE_MODAL } from '@redux/actions/servicesActions'\nimport './style.scss'\n\nfunction MOENaboServiceModal({ showModal }) {\n const dispatch = useDispatch()\n const [chosenPath, setChosenPath] = React.useState(null)\n const NaboChoices = [\n {\n id: 1,\n label: 'I am a Student',\n labelAr: 'أنا طالب',\n value: 'student_or_parent',\n },\n {\n id: 2,\n label: 'I am a School employee',\n labelAr: 'أنا موظف مدرسة',\n value: 'school_employee',\n },\n {\n id: 3,\n label: 'I am a Instition employee',\n labelAr: 'أنا موظف مؤسسة',\n value: 'instition_employee',\n },\n ]\n\n const handelOnChange = e => {\n setChosenPath(e.target.value)\n }\n\n const handelToggle = () => {\n dispatch({ type: SET_NABO_SERVICE_MODAL, payload: false })\n }\n\n const handelOnClick = path => {\n let targetURL = ''\n switch (path) {\n case 'student_or_parent':\n targetURL = `${baseURL}/EServices/ServiceCard/pages/napo.aspx`\n break\n case 'school_employee':\n // targetURL = `https://adm.moe.gov.ae/schoolportal${isArabic ? '' : '/en'}`\n targetURL = `https://srd-stg.moe.gov.ae/schools/${isArabic ? '' : '/en'}`\n break\n case 'instition_employee':\n targetURL = 'https://adm.moe.gov.ae/Applicant'\n break\n default:\n break\n }\n // Redirect to the selected path URL\n if (!targetURL) return\n handelToggle()\n window.location.href = targetURL\n }\n\n return (\n
\n \n \n \n \n \n
\n
{isArabic ? 'اختر مسارك' : 'Select Your Path'}
\n
\n {isArabic\n ? 'لتوفير تجربة شخصية، يرجى إخبارنا من أنت. حدد الخيار الذي يصفك بشكل أفضل لرؤية المحتوى المناسب لك.'\n : 'To Provide you with a personalized experience, please let us know who you are. select the option that best describes you to see a content that is appropriate to you.'}\n