tabexseriescomponents 0.0.65 → 0.0.67

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+// import { useHistory, Link } from 'react-router-dom';
 // import '../../Generalfiles/CSS_GENERAL/dropdown.css';
 // import headerstyles from './headerstyles.module.css';
 import headerstyles from '../../../styles/headers/headerstyles.module.css';
@@ -35,7 +35,8 @@ import Searchlist from '../../StaticPages/Searchlist/Searchlist.jsx';
 import egyptflag from '../../../assets/images/egyptflag.png';
 import usflag from '../../../assets/images/usflag.png';
 import Headerresponsive from '../Headerresponsive/Headerresponsive.jsx';
-// import Subheader from '../Subheader/Subheader.jsx';
+import Subheader from '../Subheader/Subheader.jsx';
+
 const StylishHeader = (props) => {
     // const { lang, setlang, langdetect } = useContext(LanguageContext);
     // const { fetch_inst_tabex_websitetemplatesQueryContext, StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
@@ -68,7 +69,6 @@ const StylishHeader = (props) => {
     const actions = props.actions;
     // const fetch_inst_tabex_websitetemplatesQueryContext = props.fetch_inst_tabex_websitetemplatesQueryContext;
     useEffect(() => {
-        console.log('asd');
         var secpropobj = {};
         StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
             if (sectionitem.sectionid == props.sectionidprops) {
@@ -312,23 +312,23 @@ const StylishHeader = (props) => {
     const [OpenCloseCartSlider, setOpenCloseCartSlider] = useState(false);
     return (
         <div
-            class={+' row m-0 w-100 d-flex justify-content-center '}
+            className={+' row m-0 w-100 d-flex justify-content-center '}
             style={{
                 width: '100vw',
             }}
         >
             <div
-                class={`${headerstyles.headercontainer}` + ' col-lg-12 p-0 d-md-none '}
+                className={`${headerstyles.headercontainer}` + ' col-lg-12 p-0 d-md-none '}
                 style={{
                     position: sectionproperties.headerstyles_position,
                 }}
             >
-                <div class="row m-0 w-100">
-                    <div class={`${header_cssstyles.upperHeaderSection}` + ' col-lg-12 d-flex align-items-center '}>
-                        <div class="row m-0 w-100 d-flex align-items-center">
-                            <div class="col-lg-4 d-flex justify-content-start">
+                <div className="row m-0 w-100">
+                    <div className={`${header_cssstyles.upperHeaderSection}` + ' col-lg-12 d-flex align-items-center '}>
+                        <div className="row m-0 w-100 d-flex align-items-center">
+                            <div className="col-lg-4 d-flex justify-content-start">
                                 <i
-                                    class={header_cssstyles.searchicon + ' h-100 allcentered '}
+                                    className={header_cssstyles.searchicon + ' h-100 allcentered '}
                                     onClick={() => {
                                         setopenSearchBar(true);
                                     }}
@@ -336,9 +336,9 @@ const StylishHeader = (props) => {
                                     <FiSearch size={sectionproperties.searchbaricon_fontsize} />
                                 </i>
                             </div>
-                            <div class="col-lg-4 allcentered">
+                            <div className="col-lg-4 allcentered">
                                 <div
-                                    class={`${header_cssstyles.header_logo}`}
+                                    className={`${header_cssstyles.header_logo}`}
                                     style={{ cursor: 'pointer' }}
                                     onClick={() => {
                                         routingcountext('home');
@@ -356,15 +356,15 @@ const StylishHeader = (props) => {
                                     />
                                 </div>
                             </div>
-                            <div class="col-lg-4 d-flex justify-content-end">
+                            <div className="col-lg-4 d-flex justify-content-end">
                                 {sectionproperties.showfooterphonenumber == 'Show' && (
-                                    <div class="d-flex align-items-center">
-                                        <a href={'tel:' + authdetailsContext.instinfo.contactinfo.mobile} target={'_self'} class="d-flex align-items-center">
-                                            <i class="h-100 allcentered" style={{ fontSize: sectionproperties.footerinfotext_fontsize + 'px', color: sectionproperties.footerinfotext_color }}>
+                                    <div className="d-flex align-items-center">
+                                        <a href={'tel:' + authdetailsContext.instinfo.contactinfo.mobile} target={'_self'} className="d-flex align-items-center">
+                                            <i className="h-100 allcentered" style={{ fontSize: sectionproperties.footerinfotext_fontsize + 'px', color: sectionproperties.footerinfotext_color }}>
                                                 <BsTelephone />
                                             </i>
                                             <p
-                                                class="m-0 p-0 text-black ml-2 mr-2"
+                                                className="m-0 p-0 text-black ml-2 mr-2"
                                                 style={{ fontSize: sectionproperties.footerinfotext_fontsize + 'px', color: sectionproperties.footerinfotext_color }}
                                             >
                                                 {authdetailsContext.instinfo.contactinfo.mobile}
@@ -381,12 +381,12 @@ const StylishHeader = (props) => {
                                     <Dropdown>
                                         <Dropdown.Toggle>
                                             {!authdetailsContext.loggedin && (
-                                                <div class={header_cssstyles.userBtnContainer + ' d-flex align-items-center justify-content-end p-0 cursor-pointer pt-1 '}>
-                                                    <div class={header_cssstyles.user_btn + ' user_btn allcentered p-0 '}>
+                                                <div className={header_cssstyles.userBtnContainer + ' d-flex align-items-center justify-content-end p-0 cursor-pointer pt-1 '}>
+                                                    <div className={header_cssstyles.user_btn + ' user_btn allcentered p-0 '}>
                                                         <FiUser size={sectionproperties.userBtniconfontsize} />
                                                     </div>
                                                     <p
-                                                        class={header_cssstyles.user_btn + ' user_btn mb-0 p-0 '}
+                                                        className={header_cssstyles.user_btn + ' user_btn mb-0 p-0 '}
                                                         style={{ marginLeft: langdetect == 'en' ? '7px' : 0, marginRight: langdetect == 'en' ? 0 : '7px' }}
                                                     >
                                                         {lang.login}
@@ -394,23 +394,23 @@ const StylishHeader = (props) => {
                                                 </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 flex-column"
+                                                        className="m-0 p-0 flex-column"
                                                         style={{
                                                             textAlign: langdetect == 'en' ? 'left' : 'right',
                                                         }}
                                                     >
-                                                        <p class={header_cssstyles.greetingstyles + ' m-0 p-0 '}>
+                                                        <p className={header_cssstyles.greetingstyles + ' m-0 p-0 '}>
                                                             {lang.hello}
                                                             {langdetect == 'en' ? ',' : '،'}
                                                         </p>
-                                                        <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
+                                                        <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
                                                     </div>
                                                 </div>
                                             )}
@@ -422,10 +422,10 @@ const StylishHeader = (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>
@@ -435,10 +435,10 @@ const StylishHeader = (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>
@@ -447,7 +447,7 @@ const StylishHeader = (props) => {
                                         {authdetailsContext.loggedin && (
                                             <Dropdown.Menu style={{ minWidth: '200px' }}>
                                                 <Dropdown.Item>
-                                                    <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
                                                         <span
                                                             style={{
                                                                 color: sectionproperties.greetingtextcolor,
@@ -459,7 +459,7 @@ const StylishHeader = (props) => {
                                                             {lang.hello},
                                                         </span>
                                                         <p
-                                                            class={`${header_cssstyles.dropdownitem}` + ' font-weight-600 ml-1 mr-1 text-overflow text-capitalize dropdownitem m-0 p-0 '}
+                                                            className={`${header_cssstyles.dropdownitem}` + ' font-weight-600 ml-1 mr-1 text-overflow text-capitalize dropdownitem m-0 p-0 '}
                                                             style={{ maxWidth: '120px', color: sectionproperties.dropdownusernamecolor, fontSize: sectionproperties.dropdownusernamefontsize + 'px' }}
                                                             onClick={() => {
                                                                 routingcountext(StaticPagesLinksContext.accountinfo);
@@ -475,15 +475,15 @@ const StylishHeader = (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>
@@ -493,11 +493,11 @@ const StylishHeader = (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>
@@ -507,10 +507,10 @@ const StylishHeader = (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>
@@ -520,10 +520,10 @@ const StylishHeader = (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>
@@ -535,7 +535,7 @@ const StylishHeader = (props) => {
                         </div>
                     </div>
                     <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',
@@ -543,17 +543,17 @@ const StylishHeader = (props) => {
                     >
                         <div style={{ background: sectionproperties.upperseparatorbgcolor, height: sectionproperties.upperseparatorheight + 'px' }} />
                     </div>
-                    <div class={header_cssstyles.lowerHeaderSection + ' col-lg-12 d-flex align-items-center '}>
-                        <div class="row m-0 w-100 d-flex align-items-center">
-                            <div class="col-lg-8 d-flex align-items-center">
-                                <div class="row m-0 w-100 d-flex align-items-center">
-                                    <nav class={headerstyles.navbar}>
+                    <div className={header_cssstyles.lowerHeaderSection + ' col-lg-12 d-flex align-items-center '}>
+                        <div className="row m-0 w-100 d-flex align-items-center">
+                            <div className="col-lg-8 d-flex align-items-center">
+                                <div className="row m-0 w-100 d-flex align-items-center">
+                                    <nav className={headerstyles.navbar}>
                                         <ul>
                                             {templatepropcontext.pagesnprop.map((item, index) => {
                                                 if (item.isnavigation == 1 && item.isactive == 1) {
                                                     return (
                                                         <li
-                                                            class={header_cssstyles.navItemContainer}
+                                                            className={header_cssstyles.navItemContainer}
                                                             onClick={() => {
                                                                 templatepropcontext.pagesnprop.forEach(function (pageitem, pageindex) {
                                                                     pageitem.isselected = false;
@@ -561,7 +561,7 @@ const StylishHeader = (props) => {
                                                                 templatepropcontext.pagesnprop[index].isselected = true;
                                                             }}
                                                         >
-                                                            <a href={item.navigationroute} class={`${header_cssstyles.navbar_item_text}` + ' navbar_item_text '}>
+                                                            <a href={item.navigationroute} className={`${header_cssstyles.navbar_item_text}` + ' navbar_item_text '}>
                                                                 {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                             </a>
                                                         </li>
@@ -572,15 +572,15 @@ const StylishHeader = (props) => {
                                     </nav>
                                 </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">
                                 <div
-                                    class={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center '}
+                                    className={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center '}
                                     onClick={() => {
                                         routingcountext(StaticPagesLinksContext.Wishlist);
                                     }}
                                 >
                                     <span style={{ position: 'relative' }}>
-                                        <i class={' h-100 d-flex align-items-center '}>
+                                        <i className={' h-100 d-flex align-items-center '}>
                                             {sectionproperties.faviconshape == 'Heart Shape' && (
                                                 <FaRegHeart
                                                     style={{
@@ -597,7 +597,7 @@ const StylishHeader = (props) => {
                                             )}
                                         </i>
                                         <div
-                                            class={
+                                            className={
                                                 `${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}` +
                                                 ' d-flex justify-content-center text-center '
                                             }
@@ -607,7 +607,7 @@ const StylishHeader = (props) => {
                                     </span>
                                 </div>
                                 <div
-                                    class={`${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered '}
+                                    className={`${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered '}
                                     onClick={() => {
                                         setsidecartnavshowcontext(true);
                                     }}
@@ -617,12 +617,12 @@ const StylishHeader = (props) => {
                                     }}
                                 >
                                     <span style={{ position: 'relative' }}>
-                                        <i class={' allcentered '}>
-                                            {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                            {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                            {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                            {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                            {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                        <i className={' allcentered '}>
+                                            {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart className="" size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
                                         </i>
                                         <div
@@ -635,7 +635,7 @@ const StylishHeader = (props) => {
                                                 right: sectionproperties.cartbadgeright + 'px',
                                             }}
                                         >
-                                            {fetchcustomercartQueryContext.data?.data?.customercart != null
+                                            {fetchcustomercartQueryContext?.data?.data?.customercart != null
                                                 ? fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length >= 10
                                                     ? '+9'
                                                     : fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length
@@ -643,19 +643,19 @@ const StylishHeader = (props) => {
                                         </div>
                                     </span>
                                 </div>
-                                <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 '}>
-                                                        <img src={usflag} class="mr-2" style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
+                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <img src={usflag} className="mr-2" style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
-                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <img src={egyptflag} class="ml-2" style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
+                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <img src={egyptflag} className="ml-2" style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
@@ -667,9 +667,9 @@ const StylishHeader = (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,
@@ -677,7 +677,7 @@ const StylishHeader = (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>
@@ -687,9 +687,9 @@ const StylishHeader = (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,
@@ -697,7 +697,7 @@ const StylishHeader = (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>
@@ -707,6 +707,18 @@ const StylishHeader = (props) => {
                             </div>
                         </div>
                     </div>
+                    {sectionproperties.showhidesubheader == 'Show' && (
+                        <Subheader
+                            actions={actions}
+                            sectionpropertiesprops={sectionproperties}
+                            subheaderpropertiesprops={{
+                                subheaderpositionprops: 'Full Width',
+                                paddingLeftprops: '30px',
+                                paddingRightprops: '30px',
+                                subheadercontentpositionprops: 'center',
+                            }}
+                        />
+                    )}
                     <Offcanvas
                         show={OpenCloseCartSlider}
                         onHide={() => {
@@ -720,8 +732,8 @@ const StylishHeader = (props) => {
                         }}
                     >
                         <Offcanvas.Body>
-                            <div class="row m-0 w-100 pt-3">
-                                <div class="col-lg-6 d-flex align-items-center justify-content-start">
+                            <div className="row m-0 w-100 pt-3">
+                                <div className="col-lg-6 d-flex align-items-center justify-content-start">
                                     <IKImage
                                         urlEndpoint={IKurlEndpoint}
                                         publicKey={IKpublicKey}
@@ -733,9 +745,9 @@ const StylishHeader = (props) => {
                                         }}
                                     />
                                 </div>
-                                <div class="col-lg-6 d-flex align-items-center justify-content-end">
+                                <div className="col-lg-6 d-flex align-items-center justify-content-end">
                                     <button
-                                        class="contact100-btn-hide"
+                                        className="contact100-btn-hide"
                                         onClick={() => {
                                             // setaddpostcategoriesshowmodal(false);
                                         }}
@@ -756,17 +768,17 @@ const StylishHeader = (props) => {
                         backdrop={true}
                     >
                         <Offcanvas.Body>
-                            <div class="row m-0 w-100 p-3">
-                                <div class={`${generalstyles.search_modern}`}>
-                                    <div class={`${generalstyles.search_wrap} ${header_cssstyles.search_wrap}`}>
-                                        <div class={' pl-5 pr-5 '}>
-                                            <div class="row m-0 w-100 d-flex align-items-center">
-                                                <div class="col-lg-6">
+                            <div className="row m-0 w-100 p-3">
+                                <div className={`${generalstyles.search_modern}`}>
+                                    <div className={`${generalstyles.search_wrap} ${header_cssstyles.search_wrap}`}>
+                                        <div className={' pl-5 pr-5 '}>
+                                            <div className="row m-0 w-100 d-flex align-items-center">
+                                                <div className="col-lg-6">
                                                     <div style={{ width: '30vh', height: '20vh' }}>
                                                         <IKImage
                                                             urlEndpoint={IKurlEndpoint}
                                                             publicKey={IKpublicKey}
-                                                            class={generalstyles.logo_image}
+                                                            className={generalstyles.logo_image}
                                                             path={langdetect == 'en' ? logoarrayofobjects[0]?.englishlogo : logoarrayofobjects[0]?.arabiclogo}
                                                             style={{
                                                                 width: '100%',
@@ -776,26 +788,26 @@ const StylishHeader = (props) => {
                                                         />
                                                     </div>
                                                 </div>
-                                                <div class="col-lg-6 d-flex align-items-center justify-content-end">
+                                                <div className="col-lg-6 d-flex align-items-center justify-content-end">
                                                     <div
-                                                        class={header_cssstyles.closeOverlayBtn + ' cursor-pointer '}
+                                                        className={header_cssstyles.closeOverlayBtn + ' cursor-pointer '}
                                                         onClick={() => {
                                                             setopenSearchBar(false);
                                                             setSearchHeaderInputContext('');
                                                         }}
                                                     >
-                                                        <i class="h-100 allcentered">
+                                                        <i className="h-100 allcentered">
                                                             <IoClose size={sectionproperties.closeSlider_fontSize} />
                                                         </i>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class={generalstyles.search_form_wrap}>
-                                            <div class={`${generalstyles.search_form} ${header_cssstyles.search_form}`}>
+                                        <div className={generalstyles.search_form_wrap}>
+                                            <div className={`${generalstyles.search_form} ${header_cssstyles.search_form}`}>
                                                 <input
                                                     type="text"
-                                                    class={`${generalstyles.search_field} ${header_cssstyles.search_field}`}
+                                                    className={`${generalstyles.search_field} ${header_cssstyles.search_field}`}
                                                     placeholder={langdetect == 'en' ? "What're we looking for?" : 'البحث...'}
                                                     onChange={(event) => {
                                                         setSearchHeaderInputContext(event.target.value);
@@ -803,8 +815,8 @@ const StylishHeader = (props) => {
                                                 />
                                             </div>
                                         </div>
-                                        <div style={{ position: 'absolute', top: '60%', left: 0, right: 0, backgroundColor: 'red' }} class="allcentered">
-                                            <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'StylishHeader'} actions={actions} />
+                                        <div style={{ position: 'absolute', top: '60%', left: 0, right: 0, backgroundColor: 'red' }} className="allcentered">
+                                            <Searchlist actions={actions} sectionpropertiesprops={sectionproperties} srcfromprops={'StylishHeader'} />
                                         </div>
                                     </div>
                                 </div>
@@ -813,7 +825,7 @@ const StylishHeader = (props) => {
                     </Offcanvas>
                 </div>
             </div>
-            <Headerresponsive sectionpropertiesprops={sectionproperties} actions={actions} />
+            <Headerresponsive actions={actions} sectionpropertiesprops={sectionproperties} />
         </div>
     );
 };