tabexseriescomponents 0.0.71 → 0.0.73

package/{src1-10 → src-aya}/TabexComponents/Headers/Header8/Header8.jsx

@@ -1,12 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
-// import { Link } from 'react-router-dom';
-// import { LanguageContext } from '../../../../../../../Contexts/LanguageContext';
-// import { FetchingContext } from '../../../../../../../Contexts/FetchingContext';
-// import { WebsiteDesignWorkPlaceContext } from '../../../../../../../Contexts/WebsiteDesignWorkPlaceContext';
-// import { TemplateRoutingContext } from '../../../../../../../Contexts/TemplateRoutingContext';
 import { css } from 'glamor';
 import Dropdown from 'react-bootstrap/Dropdown';
-
 import Searchlist from '../../StaticPages/Searchlist/Searchlist.jsx';
 import egyptflag from '../../../assets/images/egyptflag.png';
 import usflag from '../../../assets/images/usflag.png';
@@ -19,29 +13,13 @@ import { FiShoppingCart, FiShoppingBag } from 'react-icons/fi';
 import { MdOutlinePolicy, MdOutlineShoppingCart } from 'react-icons/md';
 import { IKImage } from 'imagekitio-react';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
-
 import { BsSearch, BsHandbag, BsBag, BsTelephone } from 'react-icons/bs';
 import { AiOutlineHeart } from 'react-icons/ai';
 import { BiUser } from 'react-icons/bi';
 import { HiMenuAlt4 } from 'react-icons/hi';
 import whatsappicon from '../../../assets/images/whatsapp.png';
 
-// import { Contexthandlerscontext } from '../../../../../../../Contexts/Contexthandlerscontext';
 const Header8 = (props) => {
-    // const { lang, setlang, langdetect } = useContext(LanguageContext);
-    // const { templatepropcontext } = useContext(Contexthandlerscontext);
-    // const { StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
-    // const {
-    //     setSearchHeaderInputContext,
-    //     fetchcustomercartQueryContext,
-    //     fetchAuthorizationQueryContext,
-    //     setsidecartnavshowcontext,
-    //     LogoutMutationContext,
-    //     favoriteprojectscountContext,
-    //     templateproperties_context,
-    // } = useContext(FetchingContext);
-    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
-
     const LogoutMutationContext = props.actions.LogoutMutationContext;
     const setsidecartnavshowcontext = props.actions.setsidecartnavshowcontext;
     const setSearchHeaderInputContext = props.actions.setSearchHeaderInputContext;
@@ -78,7 +56,7 @@ const Header8 = (props) => {
     }, [StatePagePropertiesContext]);
     const header_cssstyles = {
         headercontainer: css({
-            position: sectionproperties.headerstyles_position == 'absolute' ? 'absolute' : 'relative',
+            position: sectionproperties.headerstyles_position,
             width: sectionproperties.header_width + 'vw',
             background: sectionproperties.uppersection_bgcolor,
             zIndex: 1000,
@@ -90,19 +68,19 @@ const Header8 = (props) => {
             paddingRight: langdetect == 'en' ? sectionproperties.uppersection_paddingright + 'px' : sectionproperties.uppersection_paddingleft + 'px',
             paddingTop: sectionproperties.uppersection_paddingtop + 'px',
             paddingBottom: sectionproperties.uppersection_paddingbottom + 'px',
-            borderTopLeftRadius: sectionproperties.uppersection_btlradius + 'px',
-            borderTopRightRadius: sectionproperties.uppersection_btrradius + 'px',
-            borderBottomLeftRadius: sectionproperties.uppersection_bblradius + 'px',
-            borderBottomRightRadius: sectionproperties.uppersection_bbrradius + 'px',
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_btlradius + 'px' : sectionproperties.uppersection_btrradius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.uppersection_btrradius + 'px' : sectionproperties.uppersection_btlradius + 'px',
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_bblradius + 'px' : sectionproperties.uppersection_bbrradius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.uppersection_bbrradius + 'px' : sectionproperties.uppersection_bblradius + 'px',
         }),
         lowerheadercontainer: css({
             backgroundColor: sectionproperties.lowersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
-            borderBottomLeftRadius: sectionproperties.lowersection_borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.lowersection_BorderBottomRightRadius + 'px',
-            borderTopLeftRadius: sectionproperties.lowersection_borderTopLeftRadius + 'px',
-            borderTopRightRadius: sectionproperties.lowersection_borderTopRightRadius + 'px',
-            paddingLeft: '30px',
-            paddingRight: '30px',
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.lowersection_borderBottomLeftRadius + 'px' : sectionproperties.lowersection_BorderBottomRightRadius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.lowersection_BorderBottomRightRadius + 'px' : sectionproperties.lowersection_borderBottomLeftRadius + 'px',
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.lowersection_borderTopLeftRadius + 'px' : sectionproperties.lowersection_borderTopRightRadius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.lowersection_borderTopRightRadius + 'px' : sectionproperties.lowersection_borderTopLeftRadius + 'px',
+            paddingLeft: langdetect == 'en' ? sectionproperties.lowersection_paddingleft + 'px' : sectionproperties.lowersection_paddingright + 'px',
+            paddingRight: langdetect == 'en' ? sectionproperties.lowersection_paddingright + 'px' : sectionproperties.lowersection_paddingleft + 'px',
             paddingTop: sectionproperties.lowersection_paddingtop + 'px',
             paddingBottom: sectionproperties.lowersection_paddingbottom + 'px',
         }),
@@ -132,9 +110,6 @@ const Header8 = (props) => {
             fontWeight: sectionproperties.dropdown_fontweight,
             textTransform: sectionproperties.dropdown_texttransform,
         }),
-        dropdownicon: css({
-            color: sectionproperties.dropdowniconcolor,
-        }),
         dropdownitemcontainer: css({
             ':hover .dropdownitem': { color: sectionproperties.dropdown_hovercolor },
         }),
@@ -339,7 +314,7 @@ const Header8 = (props) => {
     }, [templateproperties_context]);
     return (
         <div
-            className="row w-100 ml-0 mr-0 d-flex justify-content-center"
+            class="row w-100 ml-0 mr-0 d-flex justify-content-center"
             style={{
                 marginTop: sectionproperties.header_marginTop + 'px',
                 marginBottom: sectionproperties.header_marginBottom + 'px',
@@ -348,16 +323,16 @@ const Header8 = (props) => {
             {sectionproperties.youtbtn_show == 'Show' && (
                 <>
                     <a
-                        href={'tel:' + authdetailsContext.instinfo.contactinfo.mobile}
+                        href={'tel:' + authdetailsContext?.instinfo?.contactinfo?.mobile}
                         target={'_self'}
                         style={{ position: 'fixed', bottom: 60, right: 10, zIndex: 999999, transition: 'all 0.3s ease-out' }}
                     >
-                        <i className={langdetect == 'en' ? 'h-100 d-flex align-items-center justify-content-center mr-2' : 'h-100 d-flex align-items-center justify-content-center ml-2'}>
+                        <i class={langdetect == 'en' ? 'h-100 d-flex align-items-center justify-content-center mr-2' : 'h-100 d-flex align-items-center justify-content-center ml-2'}>
                             <BsTelephone size={30} color={sectionproperties.uppersection_iconcolor} style={{ transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)' }} />
                         </i>
                     </a>
                     <a
-                        href={'https://api.whatsapp.com/send?phone=' + authdetailsContext.instinfo.contactinfo.mobile}
+                        href={'https://api.whatsapp.com/send?phone=' + authdetailsContext?.instinfo?.contactinfo?.mobile}
                         target={'_blank'}
                         style={{ position: 'fixed', bottom: 10, right: 10, zIndex: 999999, transition: 'all 0.3s ease-out' }}
                     >
@@ -366,17 +341,18 @@ const Header8 = (props) => {
                 </>
             )}
             <div
-                className={`${header_cssstyles.headercontainer}` + ' row ml-0 mr-0 d-flex d-md-none align-items-center  '}
+                class={`${header_cssstyles.headercontainer}` + ' row ml-0 mr-0 d-flex d-md-none align-items-center  '}
                 style={{
                     position: sectionproperties.headerstyles_position,
+                    top: 0,
                 }}
             >
                 {/* Upper Header */}
-                <div className={header_cssstyles.upperheadersection + ' col-lg-12 '}>
-                    <div className="row w-100 m-0 align-items-center ">
-                        <div className="col-lg-2 p-0">
+                <div class={' col-lg-12 p-0 '}>
+                    <div class={header_cssstyles.upperheadersection + ' row w-100 m-0 align-items-center '}>
+                        <div class="col-lg-2 p-0">
                             <div
-                                className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                                class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                     routingcountext('home');
@@ -392,54 +368,38 @@ const Header8 = (props) => {
                                     }}
                                 />
                             </div>
-                            {/* <div
-                            className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
-                            style={{ cursor: 'pointer', width: '70px', height: '70px' }}
-                            onClick={() => {
-                                routingcountext('home');
-                            }}
-                        >
-                            <img
-                                src={logo}
-                                style={{
-                                    maxWidth: '100%',
-                                    maxHeight: '100%',
-                                }}
-                            />
-                        </div> */}
                         </div>
-                        <div className="col-lg-4 p-0">
-                            <div className={header_cssstyles.searchbarcont} style={{ position: 'relative' }}>
+                        <div class="col-lg-4 p-0">
+                            <div class={header_cssstyles.searchbarcont} style={{ position: 'relative' }}>
                                 <input
                                     type="text"
                                     placeholder={lang.searchproducts}
-                                    className={`${header_cssstyles.searchbarcont_input}`}
+                                    class={`${header_cssstyles.searchbarcont_input}`}
                                     onChange={(event) => {
                                         setSearchHeaderInputContext(event.target.value);
                                     }}
                                 />
-                                <button className={` ${header_cssstyles.searchbar_icon_cont}` + ' d-flex align-items-center justify-content-center '}>
+                                <button class={` ${header_cssstyles.searchbar_icon_cont}` + ' d-flex align-items-center justify-content-center '}>
                                     <BsSearch color={sectionproperties.searchbaricon_color} size={sectionproperties.searchbaricon_fontsize} />
                                 </button>
-                                <Searchlist sectionpropertiesprops={sectionproperties} actions={actions} srcfromprops={'headerfullwidth'} />
+                                <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'headerfullwidth'} actions={actions} />
                             </div>
                         </div>
-
-                        <div className="col-lg-3 d-flex flex-column align-items-center justfiy-content-center">
+                        <div class="col-lg-3 d-flex flex-column align-items-center justfiy-content-center">
                             {sectionproperties.showcontactinfo == 'Show' && (
-                                <div className="row m-0 w-100 d-flex align-items-center justify-content-center">
-                                    <i className={langdetect == 'en' ? 'h-100 d-flex align-items-center justify-content-center mr-2' : 'h-100 d-flex align-items-center justify-content-center ml-2'}>
+                                <div class="row m-0 w-100 d-flex align-items-center justify-content-center">
+                                    <i class={langdetect == 'en' ? 'h-100 d-flex align-items-center justify-content-center mr-2' : 'h-100 d-flex align-items-center justify-content-center ml-2'}>
                                         <BsTelephone size={30} color={sectionproperties.uppersection_iconcolor} style={{ transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)' }} />
                                     </i>
                                     <div
-                                        className="d-flex align-items-center flex-column"
+                                        class="d-flex align-items-center flex-column"
                                         onClick={() => {
-                                            window.open('https://api.whatsapp.com/send?phone=' + authdetailsContext.instinfo.contactinfo.mobile, '_blank');
+                                            window.open('https://api.whatsapp.com/send?phone=' + authdetailsContext?.instinfo?.contactinfo?.mobile, '_blank');
                                         }}
                                         style={{ cursor: 'pointer' }}
                                     >
                                         <p
-                                            className="m-0"
+                                            class="m-0"
                                             style={{
                                                 color: sectionproperties.uppersection_infocolor,
                                                 fontSize: sectionproperties.uppersection_infofontsize + 'px',
@@ -447,16 +407,14 @@ const Header8 = (props) => {
                                                 letterSpacing: '2px',
                                             }}
                                         >
-                                            {authdetailsContext.instinfo.contactinfo.mobile}
+                                            {authdetailsContext?.instinfo?.contactinfo?.mobile}
                                         </p>
                                         <p
-                                            className="mb-0 w-100"
+                                            class="mb-0 w-100"
                                             style={{
                                                 textAlign: langdetect == 'en' ? 'right' : 'left',
-                                                // color: '#a3a3a3',
                                                 color: sectionproperties.uppersection_titlecolor,
                                                 fontSize: sectionproperties.uppersection_titlefontsize + 'px',
-                                                // fontSize: '12px',
                                                 fontWeight: sectionproperties.uppersection_titlefontweight,
                                                 textTransform: sectionproperties.uppersection_titletextransform,
                                             }}
@@ -467,10 +425,9 @@ const Header8 = (props) => {
                                 </div>
                             )}
                         </div>
-
-                        <div className={langdetect == 'en' ? 'col-lg-3 d-flex align-items-center p-0 pl-0' : 'col-lg-3 d-flex align-items-center p-0 pr-0'}>
+                        <div class={langdetect == 'en' ? 'col-lg-3 d-flex align-items-center p-0 pl-0' : 'col-lg-3 d-flex align-items-center p-0 pr-0'}>
                             <div
-                                className={'row w-100 m-0 align-items-center justify-content-between '}
+                                class={'row w-100 m-0 align-items-center justify-content-between '}
                                 style={{
                                     paddingLeft: langdetect == 'en' ? (authdetailsContext.loggedin == true ? '.3rem' : '3rem') : 0,
                                     paddingRight: langdetect == 'en' ? 0 : authdetailsContext.loggedin == true ? '1rem' : '3rem',
@@ -479,12 +436,12 @@ const Header8 = (props) => {
                                 <Dropdown>
                                     <Dropdown.Toggle>
                                         {!authdetailsContext.loggedin && (
-                                            <div className={header_cssstyles.user_btnContainer + ' d-flex align-items-center justify-content-end p-0 cursor-pointer pt-1 '}>
-                                                <div className={header_cssstyles.user_btn + ' user_btnbg allcentered p-0 '}>
+                                            <div class={header_cssstyles.user_btnContainer + ' d-flex align-items-center justify-content-end p-0 cursor-pointer pt-1 '}>
+                                                <div class={header_cssstyles.user_btn + ' user_btnbg allcentered p-0 '}>
                                                     <BiUser size={sectionproperties.userBtniconfontsize} />
                                                 </div>
                                                 <p
-                                                    className={header_cssstyles.loggedinusername + ' user_btn mb-0 p-0 '}
+                                                    class={header_cssstyles.loggedinusername + ' user_btn mb-0 p-0 '}
                                                     style={{ marginLeft: langdetect == 'en' ? '3px' : 0, marginRight: langdetect == 'en' ? 0 : '3px' }}
                                                 >
                                                     {lang.login}
@@ -492,20 +449,20 @@ const Header8 = (props) => {
                                             </div>
                                         )}
                                         {authdetailsContext.loggedin && (
-                                            <div className={header_cssstyles.loggedinuserbtnContainer + ' allcentered '} sytle={{ position: 'relative' }}>
-                                                <div className={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
-                                                    <i className={' h-100 allcentered '}>
+                                            <div class={header_cssstyles.loggedinuserbtnContainer + ' allcentered '} sytle={{ position: 'relative' }}>
+                                                <div class={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
+                                                    <i class={' h-100 allcentered '}>
                                                         <BiUser size={sectionproperties.loggedinusericonfontsize} />
                                                     </i>
                                                 </div>
                                                 <div
-                                                    className="m-0 p-0"
+                                                    class="m-0 p-0"
                                                     style={{
                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
                                                     }}
                                                 >
                                                     <p
-                                                        className="m-0 p-0"
+                                                        class="m-0 p-0"
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
@@ -516,8 +473,8 @@ const Header8 = (props) => {
                                                         {lang.hello}
                                                         {langdetect == 'en' ? ',' : '،'}
                                                     </p>
-                                                    <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '} style={{ maxWidth: '100px' }}>
-                                                        {authdetailsContext.customerinfo.name}
+                                                    <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '} style={{ maxWidth: '100px' }}>
+                                                        {authdetailsContext?.customerinfo?.name}
                                                     </p>
                                                 </div>
                                             </div>
@@ -530,10 +487,10 @@ const Header8 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Login);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
                                                         <AiOutlineLogin />
-                                                        <span className="ml-2 mr-2">{lang.login}</span>
+                                                        <span class="ml-2 mr-2">{lang.login}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -543,10 +500,10 @@ const Header8 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Signup);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
                                                         <AiOutlineUserAdd />
-                                                        <span className="ml-2 mr-2">{lang.signup}</span>
+                                                        <span class="ml-2 mr-2">{lang.signup}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -555,7 +512,7 @@ const Header8 = (props) => {
                                     {authdetailsContext.loggedin && (
                                         <Dropdown.Menu style={{ minWidth: '200px' }}>
                                             <Dropdown.Item>
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
                                                     <span
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
@@ -567,13 +524,13 @@ const Header8 = (props) => {
                                                         {lang.hello},
                                                     </span>
                                                     <p
-                                                        className={`${header_cssstyles.dropdownitem}` + ' font-weight-600 ml-1 mr-1 text-overflow text-capitalize dropdownitem m-0 p-0 '}
+                                                        class={`${header_cssstyles.dropdownitem}` + ' font-weight-600 ml-1 mr-1 text-overflow text-capitalize dropdownitem m-0 p-0 '}
                                                         style={{ maxWidth: '120px' }}
                                                         onClick={() => {
                                                             routingcountext(StaticPagesLinksContext.accountinfo);
                                                         }}
                                                     >
-                                                        {authdetailsContext.customerinfo.name}
+                                                        {authdetailsContext?.customerinfo?.name}
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -583,15 +540,15 @@ const Header8 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Ordershistory);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag />}
                                                         {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart />}
                                                         {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart />}
-                                                        <span className="ml-2 mr-2">{lang.orderhistory}</span>
+                                                        <span class="ml-2 mr-2">{lang.orderhistory}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -601,11 +558,11 @@ const Header8 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         {sectionproperties.faviconshape == 'Heart Shape' && <AiOutlineHeart />}
                                                         {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar />}
-                                                        <span className="ml-2 mr-2">{lang.wishlist}</span>
+                                                        <span class="ml-2 mr-2">{lang.wishlist}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -615,10 +572,10 @@ const Header8 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Policies);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         <MdOutlinePolicy />
-                                                        <span className="ml-2 mr-2">{lang.policies}</span>
+                                                        <span class="ml-2 mr-2">{lang.policies}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -628,27 +585,27 @@ const Header8 = (props) => {
                                                     LogoutMutationContext.mutate();
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         <BiLogOutCircle />
-                                                        <span className="ml-2 mr-2">{lang.logout}</span>
+                                                        <span class="ml-2 mr-2">{lang.logout}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
                                         </Dropdown.Menu>
                                     )}
                                 </Dropdown>
-                                <div className="d-flex flex-row p-0 align-items-center">
+                                <div class="d-flex flex-row p-0 align-items-center">
                                     <div
                                         style={{ position: 'relative' }}
-                                        className="cursor-pointer d-flex d-flex align-items-center"
+                                        class="cursor-pointer d-flex d-flex align-items-center"
                                         onClick={() => {
                                             routingcountext(StaticPagesLinksContext.Wishlist);
                                         }}
                                     >
                                         {sectionproperties.faviconshape == 'Heart Shape' && (
                                             <AiOutlineHeart
-                                                className={`${header_cssstyles.wishlist_btn}`}
+                                                class={`${header_cssstyles.wishlist_btn}`}
                                                 size={sectionproperties.favBtnIconfontsize}
                                                 style={{
                                                     position: 'relative',
@@ -657,21 +614,21 @@ const Header8 = (props) => {
                                         )}
                                         {sectionproperties.faviconshape == 'Star Shape' && (
                                             <AiFillStar
-                                                className={`${header_cssstyles.wishlist_btn}`}
+                                                class={`${header_cssstyles.wishlist_btn}`}
                                                 size={sectionproperties.favBtnIconfontsize}
                                                 style={{
                                                     position: 'relative',
                                                 }}
                                             />
                                         )}
-                                        <div className={`${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}`}>
+                                        <div class={`${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}`}>
                                             <span> {favoriteprojectscountContext.length >= 10 ? '+9' : favoriteprojectscountContext.length}</span>
                                         </div>
                                     </div>
                                 </div>
-                                <div className=" d-flex flex-row justify-content-end align-items-center">
+                                <div class=" d-flex flex-row justify-content-end align-items-center">
                                     <div
-                                        className="row w-100 m-0 align-items-center d-flex flex-row justify-content-end"
+                                        class="row w-100 m-0 align-items-center d-flex flex-row justify-content-end"
                                         style={{
                                             position: 'relative',
                                         }}
@@ -679,9 +636,9 @@ const Header8 = (props) => {
                                             setsidecartnavshowcontext(true);
                                         }}
                                     >
-                                        <div style={{ position: 'relative' }} className={`${header_cssstyles.cart_btn}` + ' cursor-pointer d-flex align-items-center justify-content-center '}>
-                                            <div className={`${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.cartbadge}`}>
-                                                {fetchcustomercartQueryContext?.data?.data?.customercart != null ? fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length : 0}
+                                        <div style={{ position: 'relative' }} class={`${header_cssstyles.cart_btn}` + ' cursor-pointer d-flex align-items-center justify-content-center '}>
+                                            <div class={`${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.cartbadge}`}>
+                                                {fetchcustomercartQueryContext.data.data.customercart != null ? fetchcustomercartQueryContext.data.data.customercart.cartitems.length : 0}
                                             </div>
                                             {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag size={sectionproperties.cartBtn_iconFontSize} />}
@@ -690,10 +647,10 @@ const Header8 = (props) => {
                                             {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
                                         </div>
-                                        <div className={langdetect == 'en' ? 'ml-2' : 'mr-2'}>
-                                            <div className="row m-0 w-100 d-flex align-items-center flex-column justify-content-start">
+                                        <div class={langdetect == 'en' ? 'ml-2' : 'mr-2'}>
+                                            <div class="row m-0 w-100 d-flex align-items-center flex-column justify-content-start">
                                                 <p
-                                                    className="m-0 p-0 w-100"
+                                                    class="m-0 p-0 w-100"
                                                     style={{
                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
                                                         color: sectionproperties.cartBtnTextcolor,
@@ -707,7 +664,7 @@ const Header8 = (props) => {
                                                     {lang.cart}
                                                 </p>
                                                 <p
-                                                    className="m-0 text-left"
+                                                    class="m-0 text-left"
                                                     style={{
                                                         color: sectionproperties.card_secondarycolor,
                                                         fontSize: sectionproperties.secondaryfontsize + 'px',
@@ -722,7 +679,7 @@ const Header8 = (props) => {
                                     </div>
                                 </div>
                                 <div
-                                    className="d-flex flex-row justify-content-end align-items-center"
+                                    class="d-flex flex-row justify-content-end align-items-center"
                                     onClick={() => {
                                         if (langdetect == 'en') {
                                             setlang('ar');
@@ -732,12 +689,12 @@ const Header8 = (props) => {
                                     }}
                                 >
                                     {langdetect == 'en' && (
-                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
                                             <img src={egyptflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
                                         </div>
                                     )}
                                     {langdetect == 'ar' && (
-                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
                                             <img src={usflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
                                         </div>
                                     )}
@@ -747,25 +704,25 @@ const Header8 = (props) => {
                     </div>
                 </div>
                 {/* Lower Header */}
-                <div className="col-lg-12 p-0 d-flex justify-content-center" style={{ background: sectionproperties.vl_bg }}>
-                    <div className={`${header_cssstyles.divider}` + ' '}></div>
+                <div class="col-lg-12 p-0 d-flex justify-content-center" style={{ background: sectionproperties.vl_bg }}>
+                    <div class={`${header_cssstyles.divider}` + ' '}></div>
                 </div>
-                <div className={`${header_cssstyles.lowerheadercontainer}` + ' row w-100 m-0 align-items-center '}>
+                <div class={`${header_cssstyles.lowerheadercontainer}` + ' row w-100 m-0 align-items-center '}>
                     <div
-                        className={' col-lg-2 d-flex align-items-center '}
+                        class={' col-lg-2 d-flex align-items-center '}
                         style={{}}
                         onClick={() => {
                             setdropdownselect(!dropdownselect);
                         }}
                     >
-                        <div className={`${header_cssstyles.categorybtn}` + ' categoriesdropdown transformedDropdown  d-flex align-items-center justify-content-center '}>
-                            <Dropdown className="d-flex align-items-center justify-content-center">
-                                <Dropdown.Toggle className="d-flex align-items-center justify-content-center">
-                                    <div className={`${header_cssstyles.btntextcontainer}` + ' row w-100 m-0 align-items-center '} style={{ paddingTop: '7px' }}>
-                                        <i className="h-100 d-flex align-items-center justify-content-center">
+                        <div class={`${header_cssstyles.categorybtn}` + ' categoriesdropdown transformedDropdown  d-flex align-items-center justify-content-center '}>
+                            <Dropdown class="d-flex align-items-center justify-content-center">
+                                <Dropdown.Toggle class="d-flex align-items-center justify-content-center">
+                                    <div class={`${header_cssstyles.btntextcontainer}` + ' row w-100 m-0 align-items-center '} style={{ paddingTop: '7px' }}>
+                                        <i class="h-100 d-flex align-items-center justify-content-center">
                                             <HiMenuAlt4 size={25} color="white" />
                                         </i>
-                                        <p className={langdetect == 'en' ? ' m-0 p-0 ml-2' : ' m-0 p-0 mr-2 '}>{lang.shopbycategory}</p>
+                                        <p class={langdetect == 'en' ? ' m-0 p-0 ml-2' : ' m-0 p-0 mr-2 '}>{lang.shopbycategory}</p>
                                     </div>
                                 </Dropdown.Toggle>
                                 <Dropdown.Menu style={{ minWidth: '250px', marginLeft: '-20px' }}>
@@ -776,11 +733,9 @@ const Header8 = (props) => {
                                                     routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, item.collectionid);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' row m-0 w-100 '}>
-                                                    <div className={' col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start align-items-center '}>
-                                                        <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem text-overflow m-0 p-0 '}>
-                                                            {langdetect == 'en' ? item.title_en : item.title_ar}
-                                                        </p>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' row m-0 w-100 '}>
+                                                    <div class={' col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start align-items-center '}>
+                                                        <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem text-overflow m-0 p-0 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
                                                     </div>
                                                 </div>
                                             </Dropdown.Item>
@@ -791,14 +746,9 @@ const Header8 = (props) => {
                             </Dropdown>
                         </div>
                     </div>
-                    <div
-                        className="col-lg-10 flex-row align-items-center justify-content-start"
-                        style={{
-                            display: sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'block' : 'flex',
-                        }}
-                    >
+                    <div class="col-lg-10 flex-row d-flex align-items-center justify-content-start">
                         <ul
-                            className={' mb-0 pb-0 mt-0 flex-row justify-content-start '}
+                            class={' mb-0 pb-0 mt-0 flex-row justify-content-start '}
                             style={{
                                 display: sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'none' : 'flex',
                             }}
@@ -811,43 +761,20 @@ const Header8 = (props) => {
                                 }
                                 if (item.isnavigation == 1 && item.isactive == 1) {
                                     return (
-                                        // <div
-                                        //     onClick={() => {
-                                        //         history.push(item.navigationroute);
-                                        //     }}
-                                        // >
-                                        //     <li
-                                        //         onClick={() => {
-                                        //             history.push(item.navigationroute);
-                                        //         }}
-                                        //         className={`${activeclass}`}
-                                        //         style={{
-                                        //             marginRight: langdetect == 'en' ? '25px' : 0,
-                                        //             marginLeft: langdetect == 'en' ? 0 : '25px',
-                                        //         }}
-                                        //     >
-                                        //         <div className={`${header_cssstyles.navbar_item_text}`}> {langdetect == 'en' ? item.pagename : item.pagename_ar}</div>
-                                        //     </li>
-                                        // </div>
                                         <div
                                             style={{ cursor: 'pointer' }}
                                             onClick={() => {
                                                 routingcountext(item.navigationroute);
-
-                                                // alert(item.navigationroute);
-                                                // history.push(item.navigationroute);
                                             }}
                                         >
                                             <li
-                                                // className={`${activeclass}`}
+                                                class={`${activeclass}`}
                                                 style={{
                                                     marginRight: langdetect == 'en' ? '25px' : 0,
                                                     marginLeft: langdetect == 'en' ? 0 : '25px',
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.navbar_item_text}`}>
-                                                    <span>{langdetect == 'en' ? item.pagename : item.pagename_ar}</span>
-                                                </div>
+                                                <div class={`${header_cssstyles.navbar_item_text}`}> {langdetect == 'en' ? item.pagename : item.pagename_ar}</div>
                                             </li>
                                         </div>
                                     );
@@ -868,10 +795,10 @@ const Header8 = (props) => {
                     </div>
                 </div>
                 {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Full Width' && (
-                    <div className="col-lg-12 p-0">
+                    <div class="col-lg-12 p-0">
                         <Subheader
-                            sectionpropertiesprops={sectionproperties}
                             actions={actions}
+                            sectionpropertiesprops={sectionproperties}
                             subheaderpropertiesprops={{
                                 subheaderpositionprops: 'Full Width',
                                 paddingLeftprops: '25px',