tabexseriescomponents 0.0.71 → 0.0.74

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

@@ -1,8 +1,23 @@
 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';
@@ -14,6 +29,7 @@ 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';
@@ -21,7 +37,14 @@ 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;
@@ -37,6 +60,7 @@ 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) {
@@ -287,12 +311,12 @@ const Header_threesectionslogocentered = (props) => {
         }
     }, [templateproperties_context]);
     return (
-        <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 '}>
+        <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 '}>
                     {sectionproperties.showupperheadersection == 'Show' && (
                         <div
-                            className="col-lg-12"
+                            class="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',
@@ -301,16 +325,16 @@ const Header_threesectionslogocentered = (props) => {
                                 background: sectionproperties.uppersection_bgcolor,
                             }}
                         >
-                            <div className="row m-0 w-100">
-                                <div className="col-lg-6 d-flex align-items-center">
+                            <div class="row m-0 w-100">
+                                <div class="col-lg-6 d-flex align-items-center">
                                     {sectionproperties.fbbtn_show == 'Show' && (
-                                        <FaFacebookF className={header_cssstyles.fbbtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.facebkbtnniconfontsize} />
+                                        <FaFacebookF class={header_cssstyles.fbbtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.facebkbtnniconfontsize} />
                                     )}
                                     {sectionproperties.instbtn_show == 'Show' && (
-                                        <AiOutlineInstagram className={header_cssstyles.instagrambtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.instgrambtniconfontsize} />
+                                        <AiOutlineInstagram class={header_cssstyles.instagrambtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.instgrambtniconfontsize} />
                                     )}
                                     <p
-                                        className={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
+                                        class={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
                                         onClick={() => {
                                             routingcountext(StaticPagesLinksContext.Wishlist);
                                         }}
@@ -318,7 +342,7 @@ const Header_threesectionslogocentered = (props) => {
                                         {lang.wishlist}
                                     </p>
                                     <p
-                                        className={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
+                                        class={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
                                         onClick={() => {
                                             routingcountext(StaticPagesLinksContext.Policies);
                                         }}
@@ -326,20 +350,20 @@ const Header_threesectionslogocentered = (props) => {
                                         {lang.policies}
                                     </p>
                                 </div>
-                                <div className="col-lg-6 d-flex align-items-center justify-content-end">
-                                    <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div class="col-lg-6 d-flex align-items-center justify-content-end">
+                                    <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                         <Dropdown>
                                             <Dropdown.Toggle>
-                                                <li className={' d-flex align-items-center justify-content-center '}>
+                                                <li class={' d-flex align-items-center justify-content-center '}>
                                                     {langdetect == 'en' && (
-                                                        <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>
+                                                        <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>
                                                             <MdKeyboardArrowDown />
                                                         </div>
                                                     )}
                                                     {langdetect == 'ar' && (
-                                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                            <p className="m-0 p-0 ml-2">لغة عربية</p>
+                                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                            <p class="m-0 p-0 ml-2">لغة عربية</p>
                                                             <MdKeyboardArrowDown />
                                                         </div>
                                                     )}
@@ -351,9 +375,9 @@ const Header_threesectionslogocentered = (props) => {
                                                         setlang('ar');
                                                     }}
                                                 >
-                                                    <div className={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}`}>
                                                         <p
-                                                            className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                            class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                             style={{
                                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -361,7 +385,7 @@ const Header_threesectionslogocentered = (props) => {
                                                             }}
                                                         >
                                                             <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                            <span className={'ml-2 mr-2'}>{lang.arabic}</span>
+                                                            <span class={'ml-2 mr-2'}>{lang.arabic}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -371,9 +395,9 @@ const Header_threesectionslogocentered = (props) => {
                                                         setlang('en');
                                                     }}
                                                 >
-                                                    <div className={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}`}>
                                                         <p
-                                                            className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                            class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                             style={{
                                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -381,7 +405,7 @@ const Header_threesectionslogocentered = (props) => {
                                                             }}
                                                         >
                                                             <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                            <span className={'ml-2 mr-2'}>{lang.english}</span>
+                                                            <span class={'ml-2 mr-2'}>{lang.english}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -392,9 +416,9 @@ const Header_threesectionslogocentered = (props) => {
                             </div>
                         </div>
                     )}
-                    <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}>
+                    <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}>
                                 <ul>
                                     {templatepropcontext.pagesnprop.map((item, index) => {
                                         var activeclass = '';
@@ -415,8 +439,8 @@ const Header_threesectionslogocentered = (props) => {
                                                             routingcountext(item.navigationroute, false, '');
                                                         }}
                                                     >
-                                                        <div className={`${headerstyles.navbar_item} ${activeclass}`}>
-                                                            <span className={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
+                                                        <div class={`${headerstyles.navbar_item} ${activeclass}`}>
+                                                            <span class={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
                                                                 {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                             </span>
                                                         </div>
@@ -428,9 +452,9 @@ const Header_threesectionslogocentered = (props) => {
                                 </ul>
                             </nav>
                         </div>
-                        <div className="col-lg-4 p-0 d-flex align-items-center justify-content-center">
+                        <div class="col-lg-4 p-0 d-flex align-items-center justify-content-center">
                             <div
-                                className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                                class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                     routingcountext('home');
@@ -447,13 +471,13 @@ const Header_threesectionslogocentered = (props) => {
                                 />
                             </div>
                         </div>
-                        <div className="col-lg-4 d-flex align-items-center justify-content-end">
+                        <div class="col-lg-4 d-flex align-items-center justify-content-end">
                             {sectionproperties.searchbar_show == 'Show' && (
-                                <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">
+                                <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">
                                             <input
-                                                className={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
+                                                class={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
                                                 placeholder={langdetect == 'en' ? "What're we looking for?" : 'البحث...'}
                                                 onChange={(event) => {
                                                     setSearchHeaderInputContext(event.target.value);
@@ -463,8 +487,8 @@ const Header_threesectionslogocentered = (props) => {
                                                     left: langdetect == 'en' ? '' : 0,
                                                 }}
                                             />
-                                            <div className={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
-                                                <i className={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
+                                            <div class={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
+                                                <i class={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
                                                     <GoSearch
                                                         size={sectionproperties.searchbarcontfontsize}
                                                         style={{
@@ -474,37 +498,42 @@ const Header_threesectionslogocentered = (props) => {
                                                 </i>
                                             </div>
                                         </div>
-                                        <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                        <div class="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 className="headerdropdownml ml-3 mr-3">
+                            <div class="headerdropdownml ml-3 mr-3">
                                 <Dropdown>
                                     <Dropdown.Toggle>
                                         {!authdetailsContext.loggedin && (
-                                            <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 '}>
+                                            <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 '
+                                                    }
+                                                >
                                                     <FiUser size={sectionproperties.userBtniconfontsize} />
                                                 </span>
                                             </div>
                                         )}
                                         {authdetailsContext.loggedin && (
-                                            <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 '}>
+                                            <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 '}>
                                                         <FiUser size={sectionproperties.loggedinusericonfontsize} />
                                                     </i>
                                                 </div>
                                                 <div
-                                                    className="m-0 p-0 loggedinuserbtn flex-column"
+                                                    class="m-0 p-0 loggedinuserbtn flex-column"
                                                     style={{
                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
                                                     }}
                                                 >
                                                     <p
-                                                        className="m-0 p-0"
+                                                        class="m-0 p-0"
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
@@ -515,7 +544,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         {lang.hello}
                                                         {langdetect == 'en' ? ',' : '،'}
                                                     </p>
-                                                    <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
+                                                    <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
                                                         {authdetailsContext.customerinfo.name}
                                                     </p>
                                                 </div>
@@ -529,10 +558,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Login);
                                                 }}
                                             >
-                                                <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 '}>
+                                                <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 '}>
                                                         <AiOutlineLogin />
-                                                        <span className="ml-2 mr-2">{lang.login}</span>
+                                                        <span class="ml-2 mr-2">{lang.login}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -542,10 +571,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Signup);
                                                 }}
                                             >
-                                                <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 '}>
+                                                <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 '}>
                                                         <AiOutlineUserAdd />
-                                                        <span className="ml-2 mr-2 text-transform-none">{lang.signup}</span>
+                                                        <span class="ml-2 mr-2 text-transform-none">{lang.signup}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -554,7 +583,7 @@ const Header_threesectionslogocentered = (props) => {
                                     {authdetailsContext.loggedin && (
                                         <Dropdown.Menu style={{ minWidth: '200px' }}>
                                             <Dropdown.Item>
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}`}>
                                                     <span
                                                         style={{
                                                             color: '#8fa0bd',
@@ -563,7 +592,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         {lang.hello},
                                                     </span>
                                                     <span
-                                                        className={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
+                                                        class={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
                                                         onClick={() => {
                                                             routingcountext(StaticPagesLinksContext.accountinfo);
                                                         }}
@@ -578,15 +607,15 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Ordershistory);
                                                 }}
                                             >
-                                                <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 '}>
+                                                <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 '}>
                                                         {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 className="ml-2 mr-2">{lang.orderhistory}</span>
+                                                        <span class="ml-2 mr-2">{lang.orderhistory}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -596,11 +625,11 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                                 }}
                                             >
-                                                <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 '}>
+                                                <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 '}>
                                                         {sectionproperties.faviconshape == 'Heart Shape' && <AiOutlineHeart />}
                                                         {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar />}
-                                                        <span className="ml-2 mr-2">{lang.wishlist}</span>
+                                                        <span class="ml-2 mr-2">{lang.wishlist}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -610,10 +639,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Policies);
                                                 }}
                                             >
-                                                <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 '}>
+                                                <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 '}>
                                                         <MdOutlinePolicy />
-                                                        <span className="ml-2 mr-2">{lang.policies}</span>
+                                                        <span class="ml-2 mr-2">{lang.policies}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -623,10 +652,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     LogoutMutationContext.mutate();
                                                 }}
                                             >
-                                                <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 '}>
+                                                <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 '}>
                                                         <BiLogOutCircle />
-                                                        <span className="ml-2 mr-2">{lang.logout}</span>
+                                                        <span class="ml-2 mr-2">{lang.logout}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -635,7 +664,7 @@ const Header_threesectionslogocentered = (props) => {
                                 </Dropdown>
                             </div>
                             <div
-                                className={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
+                                class={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
                                 onClick={() => {
                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                 }}
@@ -649,14 +678,14 @@ const Header_threesectionslogocentered = (props) => {
                             </div>
                             {sectionproperties.cartBtnShow == 'Show' && (
                                 <div
-                                    className={'d-flex align-items-center justify-content-end'}
+                                    class={'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
-                                        className={`${header_cssstyles.cart_btn}` + ' allcentered '}
+                                        class={`${header_cssstyles.cart_btn}` + ' allcentered '}
                                         onClick={() => {
                                             setsidecartnavshowcontext(true);
                                         }}
@@ -679,19 +708,19 @@ const Header_threesectionslogocentered = (props) => {
                                 </div>
                             )}
                             {sectionproperties.showupperheadersection == 'Hide' && (
-                                <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                     <Dropdown>
                                         <Dropdown.Toggle>
-                                            <li className={' d-flex align-items-center justify-content-center '}>
+                                            <li class={' d-flex align-items-center justify-content-center '}>
                                                 {langdetect == 'en' && (
-                                                    <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>
+                                                    <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>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
-                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p className="m-0 p-0 ml-2">ع</p>
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p class="m-0 p-0 ml-2">ع</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
@@ -703,9 +732,9 @@ const Header_threesectionslogocentered = (props) => {
                                                     setlang('ar');
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        className={'dropdownitem d-flex align-items-center m-0 p-0'}
+                                                        class={'dropdownitem d-flex align-items-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -713,7 +742,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         }}
                                                     >
                                                         <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                        <span className={'ml-2 mr-2'}>{lang.arabic}</span>
+                                                        <span class={'ml-2 mr-2'}>{lang.arabic}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -723,9 +752,9 @@ const Header_threesectionslogocentered = (props) => {
                                                     setlang('en');
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                        class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -733,7 +762,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         }}
                                                     >
                                                         <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                        <span className={'ml-2 mr-2'}>{lang.english}</span>
+                                                        <span class={'ml-2 mr-2'}>{lang.english}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -743,7 +772,7 @@ const Header_threesectionslogocentered = (props) => {
                             )}
                         </div>
                     </div>
-                    <div className="col-lg-12 p-0">
+                    <div class="col-lg-12 p-0">
                         {sectionproperties.showhidesubheader == 'Show' && (
                             <Subheader
                                 sectionpropertiesprops={sectionproperties}
@@ -758,8 +787,8 @@ const Header_threesectionslogocentered = (props) => {
                         )}
                     </div>
                 </div>
-                <div className="col-lg-12 p-0">
-                    <Headerresponsive sectionpropertiesprops={sectionproperties} actions={actions} />
+                <div class="col-lg-12 p-0">
+                    <Headerresponsive actions={actions} sectionpropertiesprops={sectionproperties} />
                 </div>
             </div>
         </div>

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

@@ -1,7 +1,12 @@
 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';
@@ -14,13 +19,28 @@ 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;
@@ -328,7 +348,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 className="text-transform-none">{lang.signup}</span>
+                                                            <span>{lang.signup}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -525,7 +545,7 @@ const Headerresponsive = (props) => {
                                             }}
                                         />
 
-                                        <Searchlist sectionpropertiesprops={sectionproperties} actions={actions} srcfromprops={'respheader'} />
+                                        <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'respheader'} actions={actions} />
                                     </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'}>
@@ -651,7 +671,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={actions} />
+                                        <Subheader sectionpropertiesprops={sectionproperties} actions={props.actions} />
                                     </div>
                                 )}
                             </div>