tabexseriescomponents 0.0.65 → 0.0.67

package/{srcOLD → src1-10}/TabexComponents/Headers/Header_threesectionslogocentered/Header_threesectionslogocentered.jsx

@@ -1,23 +1,8 @@
 import React, { useEffect, useState, useContext } from 'react';
-// import { useHistory, Link } from 'react-router-dom';
-// import '../../Generalfiles/CSS_GENERAL/dropdown.css';
-
 import headerstyles from '../../../styles/headers/Header_threesectionslogocentered.module.css';
-
 import Dropdown from 'react-bootstrap/Dropdown';
-// import { LanguageContext } from '../../../LanguageContext';
-// import { FetchingContext } from '../../../FetchingContext';
-// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
-// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
 import { GoSearch } from 'react-icons/go';
 import { css } from 'glamor';
-
-// import Searchlist from '../../StaticPages/Searchlist/Searchlist';
-// import Subheader from '../Subheader/Subheader';
-// import Headerresponsive from '../Headerresponsive/Headerresponsive';
-// import egyptflag from '../../Generalfiles/images/egyptflag.png';
-// import usflag from '../../Generalfiles/images/usflag.png';
-
 import { FaFacebookF, FaRegHeart } from 'react-icons/fa';
 import { AiOutlineInstagram, AiOutlineHeart, AiFillStar } from 'react-icons/ai';
 import { MdKeyboardArrowDown } from 'react-icons/md';
@@ -29,7 +14,6 @@ import { MdOutlinePolicy, MdOutlineShoppingCart } from 'react-icons/md';
 import { AiOutlineStar, AiOutlineUserAdd, AiOutlineLogin } from 'react-icons/ai';
 import { IKImage } from 'imagekitio-react';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
-
 import Searchlist from '../../StaticPages/Searchlist/Searchlist.jsx';
 import egyptflag from '../../../assets/images/egyptflag.png';
 import usflag from '../../../assets/images/usflag.png';
@@ -37,14 +21,7 @@ import Headerresponsive from '../Headerresponsive/Headerresponsive.jsx';
 import Subheader from '../Subheader/Subheader.jsx';
 
 const Header_threesectionslogocentered = (props) => {
-    // let history = useHistory();
-    // const { lang, setlang, langdetect } = useContext(LanguageContext);
-    // const { setSearchHeaderInputContext, setsidecartnavshowcontext, fetchAuthorizationQueryContext, fetchcustomercartQueryContext, LogoutMutationContext, templateproperties_context } =
-    // useContext(FetchingContext);
-    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
-    // const { fetch_inst_tabex_websitetemplatesQueryContext, StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
     const [sectionproperties, setsectionproperties] = useState('');
-
     const LogoutMutationContext = props.actions.LogoutMutationContext;
     const fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
     const setsidecartnavshowcontext = props.actions.setsidecartnavshowcontext;
@@ -60,7 +37,6 @@ const Header_threesectionslogocentered = (props) => {
     const routingcountext = props.actions.routingcountext;
     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
     const actions = props.actions;
-    // const fetch_inst_tabex_websitetemplatesQueryContext = props.fetch_inst_tabex_websitetemplatesQueryContext;
     useEffect(() => {
         var secpropobj = {};
         StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
@@ -311,12 +287,12 @@ const Header_threesectionslogocentered = (props) => {
         }
     }, [templateproperties_context]);
     return (
-        <div class={' row m-0 w-100 d-flex justify-content-center align-items-center '} style={{ position: 'relative', zIndex: 1000 }}>
-            <div class="col-lg-12 p-0">
-                <div class={`${header_cssstyles.header_outercontainer}` + ' d-flex d-md-none row ml-0 mr-0 '}>
+        <div className={' row m-0 w-100 d-flex justify-content-center align-items-center '} style={{ position: 'relative', zIndex: 1000 }}>
+            <div className="col-lg-12 p-0">
+                <div className={`${header_cssstyles.header_outercontainer}` + ' d-flex d-md-none row ml-0 mr-0 '}>
                     {sectionproperties.showupperheadersection == 'Show' && (
                         <div
-                            class="col-lg-12"
+                            className="col-lg-12"
                             style={{
                                 paddingLeft: langdetect == 'en' ? sectionproperties.uppersection_paddingleft + 'px' : sectionproperties.uppersection_paddingright + 'px',
                                 paddingRight: langdetect == 'en' ? sectionproperties.uppersection_paddingright + 'px' : sectionproperties.uppersection_paddingleft + 'px',
@@ -325,16 +301,16 @@ const Header_threesectionslogocentered = (props) => {
                                 background: sectionproperties.uppersection_bgcolor,
                             }}
                         >
-                            <div class="row m-0 w-100">
-                                <div class="col-lg-6 d-flex align-items-center">
+                            <div className="row m-0 w-100">
+                                <div className="col-lg-6 d-flex align-items-center">
                                     {sectionproperties.fbbtn_show == 'Show' && (
-                                        <FaFacebookF class={header_cssstyles.fbbtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.facebkbtnniconfontsize} />
+                                        <FaFacebookF className={header_cssstyles.fbbtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.facebkbtnniconfontsize} />
                                     )}
                                     {sectionproperties.instbtn_show == 'Show' && (
-                                        <AiOutlineInstagram class={header_cssstyles.instagrambtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.instgrambtniconfontsize} />
+                                        <AiOutlineInstagram className={header_cssstyles.instagrambtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.instgrambtniconfontsize} />
                                     )}
                                     <p
-                                        class={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
+                                        className={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
                                         onClick={() => {
                                             routingcountext(StaticPagesLinksContext.Wishlist);
                                         }}
@@ -342,7 +318,7 @@ const Header_threesectionslogocentered = (props) => {
                                         {lang.wishlist}
                                     </p>
                                     <p
-                                        class={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
+                                        className={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
                                         onClick={() => {
                                             routingcountext(StaticPagesLinksContext.Policies);
                                         }}
@@ -350,20 +326,20 @@ const Header_threesectionslogocentered = (props) => {
                                         {lang.policies}
                                     </p>
                                 </div>
-                                <div class="col-lg-6 d-flex align-items-center justify-content-end">
-                                    <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div className="col-lg-6 d-flex align-items-center justify-content-end">
+                                    <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                         <Dropdown>
                                             <Dropdown.Toggle>
-                                                <li class={' d-flex align-items-center justify-content-center '}>
+                                                <li className={' d-flex align-items-center justify-content-center '}>
                                                     {langdetect == 'en' && (
-                                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                            <p class="m-0 p-0 mr-2">English</p>
+                                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                            <p className="m-0 p-0 mr-2">English</p>
                                                             <MdKeyboardArrowDown />
                                                         </div>
                                                     )}
                                                     {langdetect == 'ar' && (
-                                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                            <p class="m-0 p-0 ml-2">لغة عربية</p>
+                                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                            <p className="m-0 p-0 ml-2">لغة عربية</p>
                                                             <MdKeyboardArrowDown />
                                                         </div>
                                                     )}
@@ -375,9 +351,9 @@ const Header_threesectionslogocentered = (props) => {
                                                         setlang('ar');
                                                     }}
                                                 >
-                                                    <div class={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                    <div className={`${header_cssstyles.dropdownitemcontainer}`}>
                                                         <p
-                                                            class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                            className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                             style={{
                                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -385,7 +361,7 @@ const Header_threesectionslogocentered = (props) => {
                                                             }}
                                                         >
                                                             <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                            <span class={'ml-2 mr-2'}>{lang.arabic}</span>
+                                                            <span className={'ml-2 mr-2'}>{lang.arabic}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -395,9 +371,9 @@ const Header_threesectionslogocentered = (props) => {
                                                         setlang('en');
                                                     }}
                                                 >
-                                                    <div class={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                    <div className={`${header_cssstyles.dropdownitemcontainer}`}>
                                                         <p
-                                                            class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                            className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                             style={{
                                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -405,7 +381,7 @@ const Header_threesectionslogocentered = (props) => {
                                                             }}
                                                         >
                                                             <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                            <span class={'ml-2 mr-2'}>{lang.english}</span>
+                                                            <span className={'ml-2 mr-2'}>{lang.english}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -416,9 +392,9 @@ const Header_threesectionslogocentered = (props) => {
                             </div>
                         </div>
                     )}
-                    <div class={`${headerstyles.header_innercontainer} ${header_cssstyles.header_innercontainer}` + ' row m-0 w-100 d-flex align-items-center '} style={{ zIndex: 2 }}>
-                        <div class="col-lg-4 p-0 d-flex align-items-center justify-content-start">
-                            <nav class={headerstyles.navbar}>
+                    <div className={`${headerstyles.header_innercontainer} ${header_cssstyles.header_innercontainer}` + ' row m-0 w-100 d-flex align-items-center '} style={{ zIndex: 2 }}>
+                        <div className="col-lg-4 p-0 d-flex align-items-center justify-content-start">
+                            <nav className={headerstyles.navbar}>
                                 <ul>
                                     {templatepropcontext.pagesnprop.map((item, index) => {
                                         var activeclass = '';
@@ -439,8 +415,8 @@ const Header_threesectionslogocentered = (props) => {
                                                             routingcountext(item.navigationroute, false, '');
                                                         }}
                                                     >
-                                                        <div class={`${headerstyles.navbar_item} ${activeclass}`}>
-                                                            <span class={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
+                                                        <div className={`${headerstyles.navbar_item} ${activeclass}`}>
+                                                            <span className={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
                                                                 {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                             </span>
                                                         </div>
@@ -452,9 +428,9 @@ const Header_threesectionslogocentered = (props) => {
                                 </ul>
                             </nav>
                         </div>
-                        <div class="col-lg-4 p-0 d-flex align-items-center justify-content-center">
+                        <div className="col-lg-4 p-0 d-flex align-items-center justify-content-center">
                             <div
-                                class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                                className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                     routingcountext('home');
@@ -471,13 +447,13 @@ const Header_threesectionslogocentered = (props) => {
                                 />
                             </div>
                         </div>
-                        <div class="col-lg-4 d-flex align-items-center justify-content-end">
+                        <div className="col-lg-4 d-flex align-items-center justify-content-end">
                             {sectionproperties.searchbar_show == 'Show' && (
-                                <div class="col-lg-4 p-0 d-flex justify-content-end align-items-center">
-                                    <div class="row m-0 w-100 d-flex justify-content-end align-items-center">
-                                        <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                <div className="col-lg-4 p-0 d-flex justify-content-end align-items-center">
+                                    <div className="row m-0 w-100 d-flex justify-content-end align-items-center">
+                                        <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
                                             <input
-                                                class={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
+                                                className={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
                                                 placeholder={langdetect == 'en' ? "What're we looking for?" : 'البحث...'}
                                                 onChange={(event) => {
                                                     setSearchHeaderInputContext(event.target.value);
@@ -487,8 +463,8 @@ const Header_threesectionslogocentered = (props) => {
                                                     left: langdetect == 'en' ? '' : 0,
                                                 }}
                                             />
-                                            <div class={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
-                                                <i class={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
+                                            <div className={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
+                                                <i className={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
                                                     <GoSearch
                                                         size={sectionproperties.searchbarcontfontsize}
                                                         style={{
@@ -498,42 +474,37 @@ const Header_threesectionslogocentered = (props) => {
                                                 </i>
                                             </div>
                                         </div>
-                                        <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                        <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
                                             <Searchlist actions={actions} sectionpropertiesprops={sectionproperties} srcfromprops={'header-300'} />
                                         </div>
                                     </div>
                                 </div>
                             )}
-                            <div class="headerdropdownml ml-3 mr-3">
+                            <div className="headerdropdownml ml-3 mr-3">
                                 <Dropdown>
                                     <Dropdown.Toggle>
                                         {!authdetailsContext.loggedin && (
-                                            <div class={`${headerstyles.navbar_item}` + ' d-flex justify-content-center align-items-center '}>
-                                                <span
-                                                    class={
-                                                        `${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text} ${header_cssstyles.user_btn}` +
-                                                        ' d-flex justify-content-center align-items-center '
-                                                    }
-                                                >
+                                            <div className={`${headerstyles.navbar_item}` + ' d-flex justify-content-center align-items-center '}>
+                                                <span className={` ${header_cssstyles.user_btn}` + ' d-flex justify-content-center align-items-center '}>
                                                     <FiUser size={sectionproperties.userBtniconfontsize} />
                                                 </span>
                                             </div>
                                         )}
                                         {authdetailsContext.loggedin && (
-                                            <div class={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
-                                                <div class={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
-                                                    <i class={' h-100 allcentered '}>
+                                            <div className={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
+                                                <div className={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
+                                                    <i className={' h-100 allcentered '}>
                                                         <FiUser size={sectionproperties.loggedinusericonfontsize} />
                                                     </i>
                                                 </div>
                                                 <div
-                                                    class="m-0 p-0 loggedinuserbtn flex-column"
+                                                    className="m-0 p-0 loggedinuserbtn flex-column"
                                                     style={{
                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
                                                     }}
                                                 >
                                                     <p
-                                                        class="m-0 p-0"
+                                                        className="m-0 p-0"
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
@@ -544,7 +515,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         {lang.hello}
                                                         {langdetect == 'en' ? ',' : '،'}
                                                     </p>
-                                                    <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
+                                                    <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
                                                         {authdetailsContext.customerinfo.name}
                                                     </p>
                                                 </div>
@@ -558,10 +529,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Login);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
                                                         <AiOutlineLogin />
-                                                        <span class="ml-2 mr-2">{lang.login}</span>
+                                                        <span className="ml-2 mr-2">{lang.login}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -571,10 +542,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Signup);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
                                                         <AiOutlineUserAdd />
-                                                        <span class="ml-2 mr-2 text-transform-none">{lang.signup}</span>
+                                                        <span className="ml-2 mr-2 text-transform-none">{lang.signup}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -583,7 +554,7 @@ const Header_threesectionslogocentered = (props) => {
                                     {authdetailsContext.loggedin && (
                                         <Dropdown.Menu style={{ minWidth: '200px' }}>
                                             <Dropdown.Item>
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}`}>
                                                     <span
                                                         style={{
                                                             color: '#8fa0bd',
@@ -592,7 +563,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         {lang.hello},
                                                     </span>
                                                     <span
-                                                        class={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
+                                                        className={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
                                                         onClick={() => {
                                                             routingcountext(StaticPagesLinksContext.accountinfo);
                                                         }}
@@ -607,15 +578,15 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Ordershistory);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag />}
                                                         {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart />}
                                                         {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart />}
-                                                        <span class="ml-2 mr-2">{lang.orderhistory}</span>
+                                                        <span className="ml-2 mr-2">{lang.orderhistory}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -625,11 +596,11 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         {sectionproperties.faviconshape == 'Heart Shape' && <AiOutlineHeart />}
                                                         {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar />}
-                                                        <span class="ml-2 mr-2">{lang.wishlist}</span>
+                                                        <span className="ml-2 mr-2">{lang.wishlist}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -639,10 +610,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Policies);
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         <MdOutlinePolicy />
-                                                        <span class="ml-2 mr-2">{lang.policies}</span>
+                                                        <span className="ml-2 mr-2">{lang.policies}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -652,10 +623,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     LogoutMutationContext.mutate();
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         <BiLogOutCircle />
-                                                        <span class="ml-2 mr-2">{lang.logout}</span>
+                                                        <span className="ml-2 mr-2">{lang.logout}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -664,7 +635,7 @@ const Header_threesectionslogocentered = (props) => {
                                 </Dropdown>
                             </div>
                             <div
-                                class={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
+                                className={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
                                 onClick={() => {
                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                 }}
@@ -678,14 +649,14 @@ const Header_threesectionslogocentered = (props) => {
                             </div>
                             {sectionproperties.cartBtnShow == 'Show' && (
                                 <div
-                                    class={'d-flex align-items-center justify-content-end'}
+                                    className={'d-flex align-items-center justify-content-end'}
                                     style={{
                                         marginRight: sectionproperties.showupperheadersection == 'Hide' ? (langdetect == 'en' ? '1.5rem' : 0) : 0,
                                         marginLeft: sectionproperties.showupperheadersection == 'Hide' ? (langdetect == 'ar' ? '1.5rem' : 0) : 0,
                                     }}
                                 >
                                     <div
-                                        class={`${header_cssstyles.cart_btn}` + ' allcentered '}
+                                        className={`${header_cssstyles.cart_btn}` + ' allcentered '}
                                         onClick={() => {
                                             setsidecartnavshowcontext(true);
                                         }}
@@ -708,19 +679,19 @@ const Header_threesectionslogocentered = (props) => {
                                 </div>
                             )}
                             {sectionproperties.showupperheadersection == 'Hide' && (
-                                <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                     <Dropdown>
                                         <Dropdown.Toggle>
-                                            <li class={' d-flex align-items-center justify-content-center '}>
+                                            <li className={' d-flex align-items-center justify-content-center '}>
                                                 {langdetect == 'en' && (
-                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p class="m-0 p-0 mr-2">En</p>
+                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p className="m-0 p-0 mr-2">En</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
-                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p class="m-0 p-0 ml-2">ع</p>
+                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p className="m-0 p-0 ml-2">ع</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
@@ -732,9 +703,9 @@ const Header_threesectionslogocentered = (props) => {
                                                     setlang('ar');
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        class={'dropdownitem d-flex align-items-center m-0 p-0'}
+                                                        className={'dropdownitem d-flex align-items-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -742,7 +713,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         }}
                                                     >
                                                         <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                        <span class={'ml-2 mr-2'}>{lang.arabic}</span>
+                                                        <span className={'ml-2 mr-2'}>{lang.arabic}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -752,9 +723,9 @@ const Header_threesectionslogocentered = (props) => {
                                                     setlang('en');
                                                 }}
                                             >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                        className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -762,7 +733,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         }}
                                                     >
                                                         <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                        <span class={'ml-2 mr-2'}>{lang.english}</span>
+                                                        <span className={'ml-2 mr-2'}>{lang.english}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -772,7 +743,7 @@ const Header_threesectionslogocentered = (props) => {
                             )}
                         </div>
                     </div>
-                    <div class="col-lg-12 p-0">
+                    <div className="col-lg-12 p-0">
                         {sectionproperties.showhidesubheader == 'Show' && (
                             <Subheader
                                 sectionpropertiesprops={sectionproperties}
@@ -787,8 +758,8 @@ const Header_threesectionslogocentered = (props) => {
                         )}
                     </div>
                 </div>
-                <div class="col-lg-12 p-0">
-                    <Headerresponsive actions={actions} sectionpropertiesprops={sectionproperties} />
+                <div className="col-lg-12 p-0">
+                    <Headerresponsive sectionpropertiesprops={sectionproperties} actions={actions} />
                 </div>
             </div>
         </div>

package/{srcOLD → src1-10}/TabexComponents/Headers/Headerresponsive/Headerresponsive.jsx

@@ -1,12 +1,7 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import Dropdown from 'react-bootstrap/Dropdown';
-// import { LanguageContext } from '../../../../../../../Contexts/LanguageContext';
-// import { FetchingContext } from '../../../../../../../Contexts/FetchingContext';
-// import { WebsiteDesignWorkPlaceContext } from '../../../../../../../Contexts/WebsiteDesignWorkPlaceContext';
-// import { TemplateRoutingContext } from '../../../../../../../Contexts/TemplateRoutingContext';
 import { MdOutlineShoppingCart } from 'react-icons/md';
-
 import { css } from 'glamor';
 import { BiLogOutCircle, BiChevronDown } from 'react-icons/bi';
 import { MdOutlinePolicy } from 'react-icons/md';
@@ -19,28 +14,13 @@ import { BsBag, BsHandbag } from 'react-icons/bs';
 import { BiUser } from 'react-icons/bi';
 import Subheader from '../Subheader/Subheader.jsx';
 import Searchlist from '../../StaticPages/Searchlist/Searchlist.jsx';
-// import '../../StaticPages/Filter/filter.module.css';
 import egyptflag from '../../Generalfiles/images/egyptflag.png';
 import usflag from '../../Generalfiles/images/usflag.png';
 import { FiShoppingCart } from 'react-icons/fi';
 import { IKImage } from 'imagekitio-react';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
 
-// import { Contexthandlerscontext } from '../../../../../../../Contexts/Contexthandlerscontext';
-
 const Headerresponsive = (props) => {
-    // const { lang, setlang, langdetect } = useContext(LanguageContext);
-    // const { templatepropcontext } = useContext(Contexthandlerscontext);
-    // const {
-    //     setsidecartnavshowcontext,
-    //     fetchAuthorizationQueryContext,
-    //     LogoutMutationContext,
-    //     fetchcustomercartQueryContext,
-    //     templateproperties_context,
-    //     setSearchHeaderInputContext,
-    //     favoriteprojectscountContext,
-    // } = useContext(FetchingContext);
-    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
     const LogoutMutationContext = props.actions.LogoutMutationContext;
     const setsidecartnavshowcontext = props.actions.setsidecartnavshowcontext;
     const setSearchHeaderInputContext = props.actions.setSearchHeaderInputContext;
@@ -348,7 +328,7 @@ const Headerresponsive = (props) => {
                                                     <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
                                                         <p className={' d-flex align-items-center m-0 p-0 '}>
                                                             <AiOutlineUserAdd className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
-                                                            <span>{lang.signup}</span>
+                                                            <span className="text-transform-none">{lang.signup}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -545,7 +525,7 @@ const Headerresponsive = (props) => {
                                             }}
                                         />
 
-                                        <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'respheader'} actions={actions} />
+                                        <Searchlist sectionpropertiesprops={sectionproperties} actions={actions} srcfromprops={'respheader'} />
                                     </div>
                                 </div>
                                 <div className={langdetect == 'en' ? 'col-md-2 allcentered pl-1 pr-1 pt-1 resposiveheader_languagedropdown' : 'col-md-2 allcentered pl-1 pr-1 pt-1'}>
@@ -671,7 +651,7 @@ const Headerresponsive = (props) => {
                             <div className="row m-0 w-100 h-100">
                                 {sectionproperties.showhidesubheader == 'Show' && (
                                     <div className="col-lg-12 p-0 h-100">
-                                        <Subheader sectionpropertiesprops={sectionproperties} actions={props.actions} />
+                                        <Subheader sectionpropertiesprops={sectionproperties} actions={actions} />
                                     </div>
                                 )}
                             </div>