tabexseriescomponents 0.0.65 → 0.0.67

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

@@ -327,12 +327,12 @@ const HeaderwithContactinfo = (props) => {
         }
     }, [templateproperties_context]);
     return (
-        <div class={' row m-0 w-100 d-flex justify-content-center align-items-center '} style={{ zIndex: 1000 }}>
-            <div class="col-lg-12 p-0">
-                <div class={`${header_cssstyles.header_outercontainer}` + ' d-flex d-md-none row ml-0 mr-0 '}>
+        <div className={' row m-0 w-100 d-flex justify-content-center align-items-center '} style={{ zIndex: 1000 }}>
+            <div className="col-lg-12 p-0">
+                <div className={`${header_cssstyles.header_outercontainer}` + ' d-flex d-md-none row ml-0 mr-0 '}>
                     {sectionproperties.showupperheadersection == 'Show' && (
                         <div
-                            class="col-lg-12 d-flex align-items-center plr-1025-0"
+                            className="col-lg-12 d-flex align-items-center plr-1025-0"
                             style={{
                                 paddingLeft: langdetect == 'en' ? sectionproperties.uppersection_paddingleft + 'px' : sectionproperties.uppersection_paddingright + 'px',
                                 paddingRight: langdetect == 'en' ? sectionproperties.uppersection_paddingright + 'px' : sectionproperties.uppersection_paddingleft + 'px',
@@ -340,72 +340,72 @@ const HeaderwithContactinfo = (props) => {
                                 borderBottom: sectionproperties.vl_width + 'px solid ' + sectionproperties.vl_bg,
                             }}
                         >
-                            <div class="row m-0 w-100">
-                                <div class="col-lg-3 d-flex align-items-center p-0">
-                                    <div class="row m-0 w-100">
+                            <div className="row m-0 w-100">
+                                <div className="col-lg-3 d-flex align-items-center p-0">
+                                    <div className="row m-0 w-100">
                                         {sectionproperties.fbbtn_show == 'Show' && (
-                                            <div class={header_cssstyles.fbbtn + ' p-0 allcentered cursor-pointer '}>
+                                            <div className={header_cssstyles.fbbtn + ' p-0 allcentered cursor-pointer '}>
                                                 <FaFacebookF size={sectionproperties.facebkbtnniconfontsize} />
                                             </div>
                                         )}
                                         {sectionproperties.youtbtn_show == 'Show' && (
-                                            <div class={header_cssstyles.whatsappbtn + ' p-0 allcentered cursor-pointer '}>
+                                            <div className={header_cssstyles.whatsappbtn + ' p-0 allcentered cursor-pointer '}>
                                                 <BsWhatsapp size={sectionproperties.youtubebtniconfontsize} />
                                             </div>
                                         )}
                                         {sectionproperties.instbtn_show == 'Show' && (
-                                            <div class={header_cssstyles.instagrambtn + ' p-0 allcentered cursor-pointer '}>
+                                            <div className={header_cssstyles.instagrambtn + ' p-0 allcentered cursor-pointer '}>
                                                 <AiOutlineInstagram size={sectionproperties.instgrambtniconfontsize} />
                                             </div>
                                         )}
                                     </div>
                                 </div>
-                                <div class="col-lg-9 d-flex align-items-center justify-content-end">
-                                    <div class="row m-0 w-100 d-flex align-items-center justify-content-end h-100">
+                                <div className="col-lg-9 d-flex align-items-center justify-content-end">
+                                    <div className="row m-0 w-100 d-flex align-items-center justify-content-end h-100">
                                         {sectionproperties.showfooterphonenumber == 'Show' && (
                                             <div
-                                                class="d-flex align-items-center justify-content-center pl-3 pr-3 h-100"
+                                                className="d-flex align-items-center justify-content-center pl-3 pr-3 h-100"
                                                 style={{ borderRight: sectionproperties.vl_width + 'px solid ' + sectionproperties.vl_bg }}
                                             >
-                                                <a href={'tel:' + authdetailsContext.instinfo.contactinfo.mobile} target={'_self'} class="d-flex align-items-center">
-                                                    <AiFillPhone class={header_cssstyles.upperheadertext + '  ml-1 mr-1  '} size={sectionproperties.footerinfotext_fontsize} />
-                                                    <span class={header_cssstyles.upperheadertext}>{authdetailsContext.instinfo.contactinfo.mobile}</span>
+                                                <a href={'tel:' + authdetailsContext.instinfo.contactinfo.mobile} target={'_self'} className="d-flex align-items-center">
+                                                    <AiFillPhone className={header_cssstyles.upperheadertext + '  ml-1 mr-1  '} size={sectionproperties.footerinfotext_fontsize} />
+                                                    <span className={header_cssstyles.upperheadertext}>{authdetailsContext.instinfo.contactinfo.mobile}</span>
                                                 </a>
                                             </div>
                                         )}
                                         {sectionproperties.showfooteremail == 'Show' && (
                                             <div
-                                                class="d-flex align-items-center justify-content-center pl-3 pr-3 h-100 cursor-pointer"
+                                                className="d-flex align-items-center justify-content-center pl-3 pr-3 h-100 cursor-pointer"
                                                 style={{ borderRight: sectionproperties.vl_width + 'px solid ' + sectionproperties.vl_bg }}
                                                 onClick={() => {
                                                     window.open('mailto:' + authdetailsContext.instinfo.contactinfo.email, '_self');
                                                 }}
                                             >
-                                                <AiOutlineMail class={header_cssstyles.upperheadertext + '  ml-1 mr-1  '} size={sectionproperties.footerinfotext_fontsize} />
-                                                <span class={header_cssstyles.upperheadertext}>{authdetailsContext.instinfo.contactinfo.email}</span>
+                                                <AiOutlineMail className={header_cssstyles.upperheadertext + '  ml-1 mr-1  '} size={sectionproperties.footerinfotext_fontsize} />
+                                                <span className={header_cssstyles.upperheadertext}>{authdetailsContext.instinfo.contactinfo.email}</span>
                                             </div>
                                         )}
                                         {sectionproperties.showopeninghours == 'Show' && (
                                             <div
-                                                class="d-flex align-items-center justify-content-center pl-3 pr-3 h-100"
+                                                className="d-flex align-items-center justify-content-center pl-3 pr-3 h-100"
                                                 style={{ borderRight: sectionproperties.vl_width + 'px solid ' + sectionproperties.vl_bg }}
                                             >
-                                                <AiOutlineClockCircle class={header_cssstyles.upperheadertext + '  ml-1 mr-1 '} size={sectionproperties.footerinfotext_fontsize} />
+                                                <AiOutlineClockCircle className={header_cssstyles.upperheadertext + '  ml-1 mr-1 '} size={sectionproperties.footerinfotext_fontsize} />
 
-                                                <span class={header_cssstyles.upperheadertext}> Monday - Friday: 10:00 - 18:00</span>
+                                                <span className={header_cssstyles.upperheadertext}> Monday - Friday: 10:00 - 18:00</span>
                                             </div>
                                         )}
                                         <div
-                                            class="d-flex align-items-center justify-content-center pl-3 pr-3 h-100"
+                                            className="d-flex align-items-center justify-content-center pl-3 pr-3 h-100"
                                             style={{ borderRight: sectionproperties.vl_width + 'px solid ' + sectionproperties.vl_bg }}
                                             onClick={() => {
                                                 setopenSearchBar(true);
                                             }}
                                         >
-                                            <BsSearch class={header_cssstyles.searchicon + ' cursor-pointer '} size={sectionproperties.searchbaricon_fontsize} />
+                                            <BsSearch className={header_cssstyles.searchicon + ' cursor-pointer '} size={sectionproperties.searchbaricon_fontsize} />
                                         </div>
                                         <div
-                                            class={
+                                            className={
                                                 langdetect == 'en'
                                                     ? 'headerdropdownml d-flex align-items-center justify-content-center pl-3 pr-3'
                                                     : 'headerdropdownmr d-flex align-items-center justify-content-center pl-3 pr-3'
@@ -413,16 +413,16 @@ const HeaderwithContactinfo = (props) => {
                                         >
                                             <Dropdown>
                                                 <Dropdown.Toggle>
-                                                    <li class={' d-flex align-items-center justify-content-center '}>
+                                                    <li className={' d-flex align-items-center justify-content-center '}>
                                                         {langdetect == 'en' && (
-                                                            <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                                <p class="m-0 p-0 mr-2">English</p>
+                                                            <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                                <p className="m-0 p-0 mr-2">English</p>
                                                                 <MdKeyboardArrowDown />
                                                             </div>
                                                         )}
                                                         {langdetect == 'ar' && (
-                                                            <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                                <p class="m-0 p-0 ml-2">لغة عربية</p>
+                                                            <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                                <p className="m-0 p-0 ml-2">لغة عربية</p>
                                                                 <MdKeyboardArrowDown />
                                                             </div>
                                                         )}
@@ -434,9 +434,9 @@ const HeaderwithContactinfo = (props) => {
                                                             setlang('ar');
                                                         }}
                                                     >
-                                                        <div class={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                        <div className={`${header_cssstyles.dropdownitemcontainer}`}>
                                                             <p
-                                                                class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                                className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                                 style={{
                                                                     fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                     fontWeight: sectionproperties.dropdown_fontweight,
@@ -444,7 +444,7 @@ const HeaderwithContactinfo = (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>
@@ -454,9 +454,9 @@ const HeaderwithContactinfo = (props) => {
                                                             setlang('en');
                                                         }}
                                                     >
-                                                        <div class={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                        <div className={`${header_cssstyles.dropdownitemcontainer}`}>
                                                             <p
-                                                                class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                                className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                                 style={{
                                                                     fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                     fontWeight: sectionproperties.dropdown_fontweight,
@@ -464,7 +464,7 @@ const HeaderwithContactinfo = (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>
@@ -476,10 +476,10 @@ const HeaderwithContactinfo = (props) => {
                             </div>
                         </div>
                     )}
-                    <div class={`${headerstyles.lowerHeaderContainer} ${header_cssstyles.lowerHeaderContainer}` + ' row m-0 w-100 d-flex align-items-center plr-1025-1 '} style={{ zIndex: 2 }}>
-                        <div class="col-lg-2 p-0 d-flex align-items-center justify-content-start">
+                    <div className={`${headerstyles.lowerHeaderContainer} ${header_cssstyles.lowerHeaderContainer}` + ' row m-0 w-100 d-flex align-items-center plr-1025-1 '} style={{ zIndex: 2 }}>
+                        <div className="col-lg-2 p-0 d-flex align-items-center justify-content-start">
                             <div
-                                class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                                className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                     routingcountext('home');
@@ -496,8 +496,8 @@ const HeaderwithContactinfo = (props) => {
                                 />
                             </div>
                         </div>
-                        <div class="col-lg-6 p-0 d-flex align-items-center justify-content-start">
-                            <nav class={headerstyles.navbar}>
+                        <div className="col-lg-6 p-0 d-flex align-items-center justify-content-start">
+                            <nav className={headerstyles.navbar}>
                                 <ul>
                                     {templatepropcontext.pagesnprop.map((item, index) => {
                                         var activeclass = '';
@@ -518,8 +518,8 @@ const HeaderwithContactinfo = (props) => {
                                                             routingcountext(item.navigationroute, false, '');
                                                         }}
                                                     >
-                                                        <div class={`${headerstyles.navbar_item} ${activeclass}`}>
-                                                            <span class={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
+                                                        <div className={`${headerstyles.navbar_item} ${activeclass}`}>
+                                                            <span className={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
                                                                 {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                             </span>
                                                         </div>
@@ -533,6 +533,7 @@ const HeaderwithContactinfo = (props) => {
                             {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' && (
                                 <Subheader
                                     sectionpropertiesprops={sectionproperties}
+                                    actions={actions}
                                     subheaderpropertiesprops={{
                                         subheaderpositionprops: 'in nav',
                                         paddingLeftprops: '35px',
@@ -543,13 +544,13 @@ const HeaderwithContactinfo = (props) => {
                             )}
                         </div>
 
-                        <div class="col-lg-4 d-flex align-items-center justify-content-end">
+                        <div className="col-lg-4 d-flex align-items-center justify-content-end">
                             {sectionproperties.searchbar_show == 'Show' && (
-                                <div class="col-lg-4 p-0 d-flex justify-content-end align-items-center">
-                                    <div class="row m-0 w-100 d-flex justify-content-end align-items-center">
-                                        <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                <div className="col-lg-4 p-0 d-flex justify-content-end align-items-center">
+                                    <div className="row m-0 w-100 d-flex justify-content-end align-items-center">
+                                        <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
                                             <input
-                                                class={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
+                                                className={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
                                                 placeholder={langdetect == 'en' ? "What're we looking for?" : 'البحث...'}
                                                 onChange={(event) => {
                                                     setSearchHeaderInputContext(event.target.value);
@@ -559,8 +560,8 @@ const HeaderwithContactinfo = (props) => {
                                                     left: langdetect == 'en' ? '' : 0,
                                                 }}
                                             />
-                                            <div class={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
-                                                <i class={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
+                                            <div className={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
+                                                <i className={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
                                                     <GoSearch
                                                         size={sectionproperties.searchbarcontfontsize}
                                                         style={{
@@ -570,19 +571,19 @@ const HeaderwithContactinfo = (props) => {
                                                 </i>
                                             </div>
                                         </div>
-                                        <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
-                                            <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'header-300'} />
+                                        <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                            <Searchlist sectionpropertiesprops={sectionproperties} actions={actions} srcfromprops={'header-300'} />
                                         </div>
                                     </div>
                                 </div>
                             )}
-                            <div class="headerdropdownml ml-3 mr-3">
+                            <div className="headerdropdownml ml-3 mr-3">
                                 <Dropdown>
                                     <Dropdown.Toggle>
                                         {!authdetailsContext.loggedin && (
-                                            <div class={' d-flex justify-content-center align-items-center '}>
+                                            <div className={' d-flex justify-content-center align-items-center '}>
                                                 <span
-                                                    class={
+                                                    className={
                                                         `${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text} ${header_cssstyles.user_btn}` +
                                                         ' d-flex justify-content-center align-items-center '
                                                     }
@@ -592,20 +593,20 @@ const HeaderwithContactinfo = (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 loggedinuserbtn flex-column"
+                                                    className="m-0 p-0 loggedinuserbtn flex-column"
                                                     style={{
                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
                                                     }}
                                                 >
                                                     <p
-                                                        class="m-0 p-0"
+                                                        className="m-0 p-0"
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
@@ -616,7 +617,7 @@ const HeaderwithContactinfo = (props) => {
                                                         {lang.hello}
                                                         {langdetect == 'en' ? ',' : '،'}
                                                     </p>
-                                                    <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
+                                                    <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
                                                         {authdetailsContext.customerinfo.name}
                                                     </p>
                                                 </div>
@@ -630,10 +631,10 @@ const HeaderwithContactinfo = (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>
@@ -643,10 +644,10 @@ const HeaderwithContactinfo = (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>
@@ -655,7 +656,7 @@ const HeaderwithContactinfo = (props) => {
                                     {authdetailsContext.loggedin && (
                                         <Dropdown.Menu style={{ minWidth: '200px' }}>
                                             <Dropdown.Item>
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                <div className={`${header_cssstyles.dropdownitemcontainer}`}>
                                                     <span
                                                         style={{
                                                             color: '#8fa0bd',
@@ -664,7 +665,7 @@ const HeaderwithContactinfo = (props) => {
                                                         {lang.hello},
                                                     </span>
                                                     <span
-                                                        class={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
+                                                        className={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
                                                         onClick={() => {
                                                             routingcountext(StaticPagesLinksContext.accountinfo);
                                                         }}
@@ -679,15 +680,15 @@ const HeaderwithContactinfo = (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>
@@ -697,11 +698,11 @@ const HeaderwithContactinfo = (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>
@@ -711,10 +712,10 @@ const HeaderwithContactinfo = (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>
@@ -724,10 +725,10 @@ const HeaderwithContactinfo = (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>
@@ -736,7 +737,7 @@ const HeaderwithContactinfo = (props) => {
                                 </Dropdown>
                             </div>
                             <div
-                                class={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
+                                className={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
                                 onClick={() => {
                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                 }}
@@ -750,14 +751,14 @@ const HeaderwithContactinfo = (props) => {
                             </div>
                             {sectionproperties.cartBtnShow == 'Show' && (
                                 <div
-                                    class={'d-flex align-items-center justify-content-end'}
+                                    className={'d-flex align-items-center justify-content-end'}
                                     style={{
                                         marginRight: sectionproperties.showupperheadersection == 'Hide' ? (langdetect == 'en' ? '1.5rem' : 0) : 0,
                                         marginLeft: sectionproperties.showupperheadersection == 'Hide' ? (langdetect == 'ar' ? '1.5rem' : 0) : 0,
                                     }}
                                 >
                                     <div
-                                        class={`${header_cssstyles.cart_btn}` + ' allcentered '}
+                                        className={`${header_cssstyles.cart_btn}` + ' allcentered '}
                                         onClick={() => {
                                             setsidecartnavshowcontext(true);
                                         }}
@@ -784,19 +785,19 @@ const HeaderwithContactinfo = (props) => {
                                 </div>
                             )}
                             {sectionproperties.showupperheadersection == 'Hide' && (
-                                <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                     <Dropdown>
                                         <Dropdown.Toggle>
-                                            <li class={' d-flex align-items-center justify-content-center '}>
+                                            <li className={' d-flex align-items-center justify-content-center '}>
                                                 {langdetect == 'en' && (
-                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p class="m-0 p-0 mr-2">En</p>
+                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p className="m-0 p-0 mr-2">En</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
-                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p class="m-0 p-0 ml-2">ع</p>
+                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p className="m-0 p-0 ml-2">ع</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
@@ -808,9 +809,9 @@ const HeaderwithContactinfo = (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,
@@ -818,7 +819,7 @@ const HeaderwithContactinfo = (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>
@@ -828,9 +829,9 @@ const HeaderwithContactinfo = (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,
@@ -838,7 +839,7 @@ const HeaderwithContactinfo = (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>
@@ -848,10 +849,11 @@ const HeaderwithContactinfo = (props) => {
                             )}
                         </div>
                     </div>
-                    <div class="col-lg-12 p-0">
+                    <div className="col-lg-12 p-0">
                         {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Full Width' && (
                             <Subheader
                                 sectionpropertiesprops={sectionproperties}
+                                actions={actions}
                                 subheaderpropertiesprops={{
                                     subheaderpositionprops: 'Full Width',
                                     paddingLeftprops: '35px',
@@ -862,8 +864,8 @@ const HeaderwithContactinfo = (props) => {
                         )}
                     </div>
                 </div>
-                <div class="col-lg-12 p-0">
-                    <Headerresponsive sectionpropertiesprops={sectionproperties} />
+                <div className="col-lg-12 p-0">
+                    <Headerresponsive sectionpropertiesprops={sectionproperties} actions={actions} />
                 </div>
             </div>
             <Offcanvas
@@ -876,17 +878,17 @@ const HeaderwithContactinfo = (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%',
@@ -896,26 +898,26 @@ const HeaderwithContactinfo = (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);
@@ -923,8 +925,8 @@ const HeaderwithContactinfo = (props) => {
                                         />
                                     </div>
                                 </div>
-                                <div style={{ position: 'absolute', top: '60%', left: 0, right: 0 }} class="allcentered">
-                                    <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'StylishHeader'} />
+                                <div style={{ position: 'absolute', top: '60%', left: 0, right: 0 }} className="allcentered">
+                                    <Searchlist sectionpropertiesprops={sectionproperties} actions={actions} srcfromprops={'StylishHeader'} />
                                 </div>
                             </div>
                         </div>