tabexseriescomponents 0.0.71 → 0.0.73

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

@@ -53,6 +53,15 @@ const Header_threesectionslogocentered = (props) => {
         }
         setsectionproperties({ ...secpropobj });
     }, [StatePagePropertiesContext]);
+    const [logoarrayofobjects, setlogoarrayofobjects] = useState([]);
+    useEffect(() => {
+        if (templateproperties_context.length != 0 && templateproperties_context.logoarrayofobjects != undefined) {
+            var logoarrayofobjectsparsed = JSON.parse(templateproperties_context.logoarrayofobjects);
+            if (Array.isArray(logoarrayofobjectsparsed)) {
+                setlogoarrayofobjects([...logoarrayofobjectsparsed]);
+            }
+        }
+    }, [templateproperties_context]);
     const header_cssstyles = {
         header_outercontainer: css({
             position: sectionproperties.headerstyles_position,
@@ -61,13 +70,14 @@ const Header_threesectionslogocentered = (props) => {
             marginBottom: sectionproperties.header_marginBottom + 'px',
             width: sectionproperties.header_width + 'vw',
             maxWidth: '100vw',
+            top: 0,
         }),
         header_innercontainer: css({
             backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.header_backgroundColor,
-            borderBottomLeftRadius: sectionproperties.header_borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.header_BorderBottomRightRadius + 'px',
-            borderTopLeftRadius: sectionproperties.header_borderTopLeftRadius + 'px',
-            borderTopRightRadius: sectionproperties.header_borderTopRightRadius + 'px',
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.header_borderBottomLeftRadius + 'px' : sectionproperties.header_BorderBottomRightRadius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.header_BorderBottomRightRadius + 'px' : sectionproperties.header_borderBottomLeftRadius + 'px',
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.header_borderTopLeftRadius + 'px' : sectionproperties.header_borderTopRightRadius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.header_borderTopRightRadius + 'px' : sectionproperties.header_borderTopLeftRadius + 'px',
             paddingLeft: langdetect == 'en' ? sectionproperties.header_paddingLeft + 'px' : sectionproperties.header_paddingRight + 'px',
             paddingRight: langdetect == 'en' ? sectionproperties.header_paddingRight + 'px' : sectionproperties.header_paddingLeft + 'px',
             paddingTop: sectionproperties.header_paddingTop + 'px',
@@ -277,40 +287,31 @@ const Header_threesectionslogocentered = (props) => {
             },
         }),
     };
-    const [logoarrayofobjects, setlogoarrayofobjects] = useState([]);
-    useEffect(() => {
-        if (templateproperties_context.length != 0 && templateproperties_context.logoarrayofobjects != undefined) {
-            var logoarrayofobjectsparsed = JSON.parse(templateproperties_context.logoarrayofobjects);
-            if (Array.isArray(logoarrayofobjectsparsed)) {
-                setlogoarrayofobjects([...logoarrayofobjectsparsed]);
-            }
-        }
-    }, [templateproperties_context]);
     return (
-        <div className={' row m-0 w-100 d-flex justify-content-center align-items-center '} style={{ position: 'relative', zIndex: 1000 }}>
-            <div className="col-lg-12 p-0">
-                <div className={`${header_cssstyles.header_outercontainer}` + ' d-flex d-md-none row ml-0 mr-0 '}>
+        <div class={' row m-0 w-100 d-flex justify-content-center align-items-center '} style={{ position: 'relative', zIndex: 1000 }}>
+            <div class="col-lg-12 p-0">
+                <div class={`${header_cssstyles.header_outercontainer}` + ' d-flex d-md-none row ml-0 mr-0 '}>
                     {sectionproperties.showupperheadersection == 'Show' && (
                         <div
-                            className="col-lg-12"
+                            class="col-lg-12"
                             style={{
                                 paddingLeft: langdetect == 'en' ? sectionproperties.uppersection_paddingleft + 'px' : sectionproperties.uppersection_paddingright + 'px',
                                 paddingRight: langdetect == 'en' ? sectionproperties.uppersection_paddingright + 'px' : sectionproperties.uppersection_paddingleft + 'px',
                                 paddingTop: sectionproperties.uppersection_paddingtop + 'px',
                                 paddingBottom: sectionproperties.uppersection_paddingbottom + 'px',
-                                background: sectionproperties.uppersection_bgcolor,
+                                background: sectionproperties.uppersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.uppersection_bgcolor,
                             }}
                         >
-                            <div className="row m-0 w-100">
-                                <div className="col-lg-6 d-flex align-items-center">
+                            <div class="row m-0 w-100">
+                                <div class="col-lg-6 d-flex align-items-center">
                                     {sectionproperties.fbbtn_show == 'Show' && (
-                                        <FaFacebookF className={header_cssstyles.fbbtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.facebkbtnniconfontsize} />
+                                        <FaFacebookF class={header_cssstyles.fbbtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.facebkbtnniconfontsize} />
                                     )}
                                     {sectionproperties.instbtn_show == 'Show' && (
-                                        <AiOutlineInstagram className={header_cssstyles.instagrambtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.instgrambtniconfontsize} />
+                                        <AiOutlineInstagram class={header_cssstyles.instagrambtn + ' cursor-pointer ml-3 mr-3 '} size={sectionproperties.instgrambtniconfontsize} />
                                     )}
                                     <p
-                                        className={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
+                                        class={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
                                         onClick={() => {
                                             routingcountext(StaticPagesLinksContext.Wishlist);
                                         }}
@@ -318,7 +319,7 @@ const Header_threesectionslogocentered = (props) => {
                                         {lang.wishlist}
                                     </p>
                                     <p
-                                        className={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
+                                        class={header_cssstyles.upperheadertext + ' m-0 p-0 cursor-pointer ml-3 mr-3 '}
                                         onClick={() => {
                                             routingcountext(StaticPagesLinksContext.Policies);
                                         }}
@@ -326,20 +327,20 @@ const Header_threesectionslogocentered = (props) => {
                                         {lang.policies}
                                     </p>
                                 </div>
-                                <div className="col-lg-6 d-flex align-items-center justify-content-end">
-                                    <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div class="col-lg-6 d-flex align-items-center justify-content-end">
+                                    <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                         <Dropdown>
                                             <Dropdown.Toggle>
-                                                <li className={' d-flex align-items-center justify-content-center '}>
+                                                <li class={' d-flex align-items-center justify-content-center '}>
                                                     {langdetect == 'en' && (
-                                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                            <p className="m-0 p-0 mr-2">English</p>
+                                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                            <p class="m-0 p-0 mr-2">English</p>
                                                             <MdKeyboardArrowDown />
                                                         </div>
                                                     )}
                                                     {langdetect == 'ar' && (
-                                                        <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                            <p className="m-0 p-0 ml-2">لغة عربية</p>
+                                                        <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                            <p class="m-0 p-0 ml-2">لغة عربية</p>
                                                             <MdKeyboardArrowDown />
                                                         </div>
                                                     )}
@@ -351,9 +352,9 @@ const Header_threesectionslogocentered = (props) => {
                                                         setlang('ar');
                                                     }}
                                                 >
-                                                    <div className={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}`}>
                                                         <p
-                                                            className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                            class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                             style={{
                                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -361,7 +362,7 @@ const Header_threesectionslogocentered = (props) => {
                                                             }}
                                                         >
                                                             <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                            <span className={'ml-2 mr-2'}>{lang.arabic}</span>
+                                                            <span class={'ml-2 mr-2'}>{lang.arabic}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -371,9 +372,9 @@ const Header_threesectionslogocentered = (props) => {
                                                         setlang('en');
                                                     }}
                                                 >
-                                                    <div className={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}`}>
                                                         <p
-                                                            className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                            class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                             style={{
                                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -381,7 +382,7 @@ const Header_threesectionslogocentered = (props) => {
                                                             }}
                                                         >
                                                             <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                            <span className={'ml-2 mr-2'}>{lang.english}</span>
+                                                            <span class={'ml-2 mr-2'}>{lang.english}</span>
                                                         </p>
                                                     </div>
                                                 </Dropdown.Item>
@@ -392,9 +393,9 @@ const Header_threesectionslogocentered = (props) => {
                             </div>
                         </div>
                     )}
-                    <div className={`${headerstyles.header_innercontainer} ${header_cssstyles.header_innercontainer}` + ' row m-0 w-100 d-flex align-items-center '} style={{ zIndex: 2 }}>
-                        <div className="col-lg-4 p-0 d-flex align-items-center justify-content-start">
-                            <nav className={headerstyles.navbar}>
+                    <div class={`${headerstyles.header_innercontainer} ${header_cssstyles.header_innercontainer}` + ' row m-0 w-100 d-flex align-items-center '} style={{ zIndex: 2 }}>
+                        <div class="col-lg-4 p-0 d-flex align-items-center justify-content-start">
+                            <nav class={headerstyles.navbar}>
                                 <ul>
                                     {templatepropcontext.pagesnprop.map((item, index) => {
                                         var activeclass = '';
@@ -415,8 +416,8 @@ const Header_threesectionslogocentered = (props) => {
                                                             routingcountext(item.navigationroute, false, '');
                                                         }}
                                                     >
-                                                        <div className={`${headerstyles.navbar_item} ${activeclass}`}>
-                                                            <span className={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
+                                                        <div class={`${headerstyles.navbar_item} ${activeclass}`}>
+                                                            <span class={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
                                                                 {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                             </span>
                                                         </div>
@@ -428,9 +429,9 @@ const Header_threesectionslogocentered = (props) => {
                                 </ul>
                             </nav>
                         </div>
-                        <div className="col-lg-4 p-0 d-flex align-items-center justify-content-center">
+                        <div class="col-lg-4 p-0 d-flex align-items-center justify-content-center">
                             <div
-                                className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                                class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                     routingcountext('home');
@@ -447,13 +448,13 @@ const Header_threesectionslogocentered = (props) => {
                                 />
                             </div>
                         </div>
-                        <div className="col-lg-4 d-flex align-items-center justify-content-end">
+                        <div class="col-lg-4 d-flex align-items-center justify-content-end">
                             {sectionproperties.searchbar_show == 'Show' && (
-                                <div className="col-lg-4 p-0 d-flex justify-content-end align-items-center">
-                                    <div className="row m-0 w-100 d-flex justify-content-end align-items-center">
-                                        <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                <div class="col-lg-4 p-0 d-flex justify-content-end align-items-center">
+                                    <div class="row m-0 w-100 d-flex justify-content-end align-items-center">
+                                        <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
                                             <input
-                                                className={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
+                                                class={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
                                                 placeholder={langdetect == 'en' ? "What're we looking for?" : 'البحث...'}
                                                 onChange={(event) => {
                                                     setSearchHeaderInputContext(event.target.value);
@@ -463,8 +464,8 @@ const Header_threesectionslogocentered = (props) => {
                                                     left: langdetect == 'en' ? '' : 0,
                                                 }}
                                             />
-                                            <div className={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
-                                                <i className={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
+                                            <div class={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
+                                                <i class={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
                                                     <GoSearch
                                                         size={sectionproperties.searchbarcontfontsize}
                                                         style={{
@@ -474,37 +475,37 @@ const Header_threesectionslogocentered = (props) => {
                                                 </i>
                                             </div>
                                         </div>
-                                        <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                        <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
                                             <Searchlist actions={actions} sectionpropertiesprops={sectionproperties} srcfromprops={'header-300'} />
                                         </div>
                                     </div>
                                 </div>
                             )}
-                            <div className="headerdropdownml ml-3 mr-3">
+                            <div class="headerdropdownml ml-3 mr-3">
                                 <Dropdown>
                                     <Dropdown.Toggle>
                                         {!authdetailsContext.loggedin && (
-                                            <div className={`${headerstyles.navbar_item}` + ' d-flex justify-content-center align-items-center '}>
-                                                <span className={` ${header_cssstyles.user_btn}` + ' d-flex justify-content-center align-items-center '}>
+                                            <div class={' d-flex justify-content-center align-items-center '}>
+                                                <span class={` ${header_cssstyles.user_btn}` + ' d-flex justify-content-center align-items-center '}>
                                                     <FiUser size={sectionproperties.userBtniconfontsize} />
                                                 </span>
                                             </div>
                                         )}
                                         {authdetailsContext.loggedin && (
-                                            <div className={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
-                                                <div className={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
-                                                    <i className={' h-100 allcentered '}>
+                                            <div class={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
+                                                <div class={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
+                                                    <i class={' h-100 allcentered '}>
                                                         <FiUser size={sectionproperties.loggedinusericonfontsize} />
                                                     </i>
                                                 </div>
                                                 <div
-                                                    className="m-0 p-0 loggedinuserbtn flex-column"
+                                                    class="m-0 p-0 loggedinuserbtn flex-column"
                                                     style={{
                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
                                                     }}
                                                 >
                                                     <p
-                                                        className="m-0 p-0"
+                                                        class="m-0 p-0"
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
@@ -515,7 +516,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         {lang.hello}
                                                         {langdetect == 'en' ? ',' : '،'}
                                                     </p>
-                                                    <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
+                                                    <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '} style={{ maxWidth: '60px' }}>
                                                         {authdetailsContext.customerinfo.name}
                                                     </p>
                                                 </div>
@@ -529,10 +530,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Login);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
                                                         <AiOutlineLogin />
-                                                        <span className="ml-2 mr-2">{lang.login}</span>
+                                                        <span class="ml-2 mr-2">{lang.login}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -542,10 +543,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Signup);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
                                                         <AiOutlineUserAdd />
-                                                        <span className="ml-2 mr-2 text-transform-none">{lang.signup}</span>
+                                                        <span class="ml-2 mr-2 text-transform-none">{lang.signup}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -554,7 +555,7 @@ const Header_threesectionslogocentered = (props) => {
                                     {authdetailsContext.loggedin && (
                                         <Dropdown.Menu style={{ minWidth: '200px' }}>
                                             <Dropdown.Item>
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}`}>
                                                     <span
                                                         style={{
                                                             color: '#8fa0bd',
@@ -563,7 +564,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         {lang.hello},
                                                     </span>
                                                     <span
-                                                        className={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
+                                                        class={`${header_cssstyles.dropdownitem}` + ' dropdownitem font-weight-600 text-overflow text-capitalize p-0 ml-1 mr-1 '}
                                                         onClick={() => {
                                                             routingcountext(StaticPagesLinksContext.accountinfo);
                                                         }}
@@ -578,15 +579,15 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Ordershistory);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag />}
                                                         {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag />}
                                                         {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart />}
                                                         {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart />}
-                                                        <span className="ml-2 mr-2">{lang.orderhistory}</span>
+                                                        <span class="ml-2 mr-2">{lang.orderhistory}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -596,11 +597,11 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         {sectionproperties.faviconshape == 'Heart Shape' && <AiOutlineHeart />}
                                                         {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar />}
-                                                        <span className="ml-2 mr-2">{lang.wishlist}</span>
+                                                        <span class="ml-2 mr-2">{lang.wishlist}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -610,10 +611,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Policies);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         <MdOutlinePolicy />
-                                                        <span className="ml-2 mr-2">{lang.policies}</span>
+                                                        <span class="ml-2 mr-2">{lang.policies}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -623,10 +624,10 @@ const Header_threesectionslogocentered = (props) => {
                                                     LogoutMutationContext.mutate();
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                         <BiLogOutCircle />
-                                                        <span className="ml-2 mr-2">{lang.logout}</span>
+                                                        <span class="ml-2 mr-2">{lang.logout}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -635,7 +636,7 @@ const Header_threesectionslogocentered = (props) => {
                                 </Dropdown>
                             </div>
                             <div
-                                className={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
+                                class={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center cursor-pointer '}
                                 onClick={() => {
                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                 }}
@@ -649,14 +650,14 @@ const Header_threesectionslogocentered = (props) => {
                             </div>
                             {sectionproperties.cartBtnShow == 'Show' && (
                                 <div
-                                    className={'d-flex align-items-center justify-content-end'}
+                                    class={'d-flex align-items-center justify-content-end'}
                                     style={{
                                         marginRight: sectionproperties.showupperheadersection == 'Hide' ? (langdetect == 'en' ? '1.5rem' : 0) : 0,
                                         marginLeft: sectionproperties.showupperheadersection == 'Hide' ? (langdetect == 'ar' ? '1.5rem' : 0) : 0,
                                     }}
                                 >
                                     <div
-                                        className={`${header_cssstyles.cart_btn}` + ' allcentered '}
+                                        class={`${header_cssstyles.cart_btn}` + ' allcentered '}
                                         onClick={() => {
                                             setsidecartnavshowcontext(true);
                                         }}
@@ -679,19 +680,19 @@ const Header_threesectionslogocentered = (props) => {
                                 </div>
                             )}
                             {sectionproperties.showupperheadersection == 'Hide' && (
-                                <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                     <Dropdown>
                                         <Dropdown.Toggle>
-                                            <li className={' d-flex align-items-center justify-content-center '}>
+                                            <li class={' d-flex align-items-center justify-content-center '}>
                                                 {langdetect == 'en' && (
-                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p className="m-0 p-0 mr-2">En</p>
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p class="m-0 p-0 mr-2">En</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
-                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p className="m-0 p-0 ml-2">ع</p>
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p class="m-0 p-0 ml-2">ع</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
@@ -703,9 +704,9 @@ const Header_threesectionslogocentered = (props) => {
                                                     setlang('ar');
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        className={'dropdownitem d-flex align-items-center m-0 p-0'}
+                                                        class={'dropdownitem d-flex align-items-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -713,7 +714,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         }}
                                                     >
                                                         <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                        <span className={'ml-2 mr-2'}>{lang.arabic}</span>
+                                                        <span class={'ml-2 mr-2'}>{lang.arabic}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -723,9 +724,9 @@ const Header_threesectionslogocentered = (props) => {
                                                     setlang('en');
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                        class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -733,7 +734,7 @@ const Header_threesectionslogocentered = (props) => {
                                                         }}
                                                     >
                                                         <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                        <span className={'ml-2 mr-2'}>{lang.english}</span>
+                                                        <span class={'ml-2 mr-2'}>{lang.english}</span>
                                                     </p>
                                                 </div>
                                             </Dropdown.Item>
@@ -743,17 +744,17 @@ const Header_threesectionslogocentered = (props) => {
                             )}
                         </div>
                     </div>
-                    <div className="col-lg-12 p-0">
+                    <div class="col-lg-12 p-0">
                         {sectionproperties.showhidesubheader == 'Show' && (
                             <Subheader
                                 sectionpropertiesprops={sectionproperties}
+                                actions={actions}
                                 subheaderpropertiesprops={{
                                     subheaderpositionprops: 'Full Width',
                                     paddingLeftprops: '35px',
                                     paddingRightprops: '35px',
                                     subheadercontentpositionprops: 'center',
                                 }}
-                                actions={actions}
                             />
                         )}
                     </div>