tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/Headers/Header8/Header8 copy.jsx

@@ -0,0 +1,1026 @@
+// import React, { useEffect, useState, useContext } from 'react';
+// import { css } from 'glamor';
+// import Dropdown from 'react-bootstrap/Dropdown';
+// import Searchlist from '../../StaticPages/Searchlist/Searchlist.jsx';
+// import Headerresponsive from '../Headerresponsive/Headerresponsive.jsx';
+// import Subheader from '../Subheader/Subheader.jsx';
+// import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+
+// import { BsSearch } from '@react-icons/all-files/bs/BsSearch';
+// import { HiOutlineShoppingBag } from '@react-icons/all-files/hi/HiOutlineShoppingBag';
+// import { BsBag } from '@react-icons/all-files/bs/BsBag';
+// import { FiPhone } from '@react-icons/all-files/fi/FiPhone';
+// import { AiOutlineSecurityScan } from '@react-icons/all-files/ai/AiOutlineSecurityScan';
+// import { MdAddShoppingCart } from '@react-icons/all-files/md/MdAddShoppingCart';
+// import { FaRegHeart } from '@react-icons/all-files/fa/FaRegHeart';
+// import { BiLogOutCircle } from '@react-icons/all-files/bi/BiLogOutCircle';
+// import { BiUser } from '@react-icons/all-files/bi/BiUser';
+// import { HiMenuAlt4 } from '@react-icons/all-files/hi/HiMenuAlt4';
+// import { AiOutlineUserAdd } from '@react-icons/all-files/ai/AiOutlineUserAdd';
+// import { AiOutlineLogin } from '@react-icons/all-files/ai/AiOutlineLogin';
+// import { AiFillStar } from '@react-icons/all-files/ai/AiFillStar';
+// import { CgShoppingBag } from '@react-icons/all-files/cg/CgShoppingBag';
+// import { FiShoppingCart } from '@react-icons/all-files/fi/FiShoppingCart';
+// import { FiShoppingBag } from '@react-icons/all-files/fi/FiShoppingBag';
+// import { BsChevronLeft } from '@react-icons/all-files/bs/BsChevronLeft';
+// import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
+
+// const Header8 = (props) => {
+//     const actions = props.actions;
+//     const history = props.actions.history;
+//     const lang = props.actions.lang;
+//     const langdetect = props.actions.langdetect;
+//     const setlang = props.actions.setlang;
+//     const LogoutMutationContext = props.actions.LogoutMutationContext;
+//     const setsidecartnavshowcontext = props.actions.setsidecartnavshowcontext;
+//     const setSearchHeaderInputContext = props.actions.setSearchHeaderInputContext;
+//     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+//     const templatepropcontext = props.actions.templatepropcontext;
+//     const authdetailsContext = props.actions.authdetailsContext;
+//     const fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
+//     const templateproperties_context = props.actions.templateproperties_context;
+//     const favoriteprojectscountContext = props.actions.favoriteprojectscountContext;
+//     const routingcountext = props.actions.routingcountext;
+//     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+//     const ikimagecredcontext = props.actions.ikimagecredcontext;
+//     const [sectionproperties, setsectionproperties] = useState('');
+//     const [dropdownselect, setdropdownselect] = useState(false);
+//     const [logoarrayofobjects, setlogoarrayofobjects] = useState([]);
+//     const [Choosenindex, setChoosenindex] = useState('');
+//     const [pcollarray, setpcollarray] = useState([]);
+//     useEffect(() => {
+//         var secpropobj = {};
+//         StatePagePropertiesContext?.pageobj?.sections?.forEach(function (sectionitem, sectionindex) {
+//             if (sectionitem.sectionid == props.sectionidprops) {
+//                 sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+//                     secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+//                 });
+//             }
+//         });
+//         if (Object.keys(secpropobj).length === 0) {
+//             props?.defaultproperties?.forEach(function (defaultpropobj, defaultpropindex) {
+//                 secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+//             });
+//         }
+//         setsectionproperties({ ...secpropobj });
+//     }, [StatePagePropertiesContext]);
+//     const subtotalcart = () => {
+//         var totalprice = 0;
+//         fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.forEach(function (cartitem, cartindex) {
+//             var finalprice = 0;
+//             if (cartitem.productinfo.hassale == 0) {
+//                 finalprice = cartitem.productinfo.defaultprice;
+//             } else if (cartitem.productinfo.hassale == 1) {
+//                 finalprice = cartitem.productinfo.defaultsaleprice;
+//             }
+//             totalprice = parseFloat(finalprice * cartitem.quantity + totalprice).toFixed(2);
+//         });
+//         return totalprice;
+//     };
+//     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]);
+//     useEffect(() => {
+//         var temppcollarray = [...pcollarray];
+//         authdetailsContext?.instinfo?.instcategories?.forEach(function (arrayItem) {
+//             arrayItem?.parentcolletions?.forEach(function (item) {
+//                 temppcollarray.push(item);
+//             });
+//         });
+//         setpcollarray([...temppcollarray]);
+//     }, []);
+//     const ButtonDropdown = (item, index, fetchedarray) => {
+//         var parentclassname = '';
+//         if (sectionproperties.fetchparenttype == 'Categories') {
+//             parentclassname = header_cssstyles.categoryname;
+//         } else if (sectionproperties.fetchparenttype == 'Parent Collections') {
+//             parentclassname = header_cssstyles.parentcollection;
+//         } else {
+//             parentclassname = header_cssstyles.collectionName;
+//         }
+//         return (
+//             <li class="dropdown d-flex align-items-center w-100">
+//                 <div
+//                     class={parentclassname + ' row m-0 w-100 d-flex align-items-center dropdownInnerContainer cursor-pointer '}
+//                     onMouseEnter={() => {
+//                         setChoosenindex(index);
+//                     }}
+//                 >
+//                     <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '}>
+//                         <p
+//                             class={' m-0 p-0 wordbreak wordbreak1 '}
+//                             onClick={() => {
+//                                 if (sectionproperties.fetchparenttype == 'Categories') {
+//                                     routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'categories/' + item.categoryid);
+//                                 } else if (sectionproperties.fetchparenttype == 'Parent Collections') {
+//                                     routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+//                                 } else {
+//                                     routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+//                                 }
+//                             }}
+//                         >
+//                             {langdetect == 'en' ? item.title_en : item.title_ar}
+//                         </p>
+//                     </div>
+//                     {/* {sectionproperties.fetchparenttype == 'Categories' && fetchedarray[Choosenindex]?.parentcolletions.length != 0 && ( */}
+//                     {sectionproperties.fetchparenttype != 'Collections' && (
+//                         <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+//                             <i className={' p-0 h-100 allcentered '}>
+//                                 {langdetect == 'en' ? (
+//                                     <BsChevronRight size={sectionproperties.collectionsectioniconfontsize} />
+//                                 ) : (
+//                                     <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+//                                 )}
+//                             </i>
+//                         </div>
+//                     )}
+//                     {/* )} */}
+//                 </div>
+//                 {sectionproperties.fetchparenttype == 'Categories' && fetchedarray[Choosenindex]?.parentcolletions?.length != 0 && (
+//                     <ul>
+//                         {fetchedarray[Choosenindex]?.parentcolletions?.map((item, index) => (
+//                             <li class="dropdown d-flex align-items-center w-100">
+//                                 <div
+//                                     class={header_cssstyles.parentcollection + ' w-100 dropdownInnerContainer cursor-pointer '}
+//                                     onClick={() => {
+//                                         if (sectionproperties.fetchparenttype == 'Categories') {
+//                                             routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+//                                         } else {
+//                                             routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+//                                         }
+//                                     }}
+//                                 >
+//                                     <div class="row m-0 w-100">
+//                                         <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '}>
+//                                             <p class={' m-0 p-0 wordbreak wordbreak1 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+//                                         </div>
+//                                         {item?.collections.length != 0 && (
+//                                             <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+//                                                 <i className={' p-0 h-100 allcentered '}>
+//                                                     {langdetect == 'en' ? (
+//                                                         <BsChevronRight size={sectionproperties.collectionsectioniconfontsize} />
+//                                                     ) : (
+//                                                         <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+//                                                     )}
+//                                                 </i>
+//                                             </div>
+//                                         )}
+//                                     </div>
+//                                 </div>
+//                                 {item?.collections.length != 0 && (
+//                                     <ul>
+//                                         {item?.collections?.map((item, index) => {
+//                                             return (
+//                                                 <li
+//                                                     class={header_cssstyles.collectionName + ' w-100 d-flex align-items-center dropdownInnerContainer cursor-pointer '}
+//                                                     onClick={() => {
+//                                                         routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+//                                                     }}
+//                                                 >
+//                                                     {langdetect == 'en' ? item.title_en : item.title_ar}
+//                                                 </li>
+//                                             );
+//                                         })}
+//                                     </ul>
+//                                 )}
+//                             </li>
+//                         ))}
+//                     </ul>
+//                 )}
+//                 {sectionproperties.fetchparenttype == 'Parent Collections' && pcollarray[Choosenindex]?.collections.length != 0 && (
+//                     <ul>
+//                         {pcollarray[Choosenindex]?.collections?.map((item, index) => (
+//                             <li class="dropdown d-flex align-items-center w-100">
+//                                 <div
+//                                     class={header_cssstyles.collectionName + ' w-100 dropdownInnerContainer cursor-pointer '}
+//                                     onClick={() => {
+//                                         routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+//                                     }}
+//                                 >
+//                                     <div className={' col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start align-items-center p-0 '}>
+//                                         <p class={' m-0 p-0 wordbreak wordbreak1 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+//                                     </div>
+//                                 </div>
+//                             </li>
+//                         ))}
+//                     </ul>
+//                 )}
+//             </li>
+//         );
+//     };
+//     const header_cssstyles = {
+//         headercontainer: css({
+//             position: sectionproperties.headerstyles_position,
+//             width: sectionproperties.header_width + 'vw',
+//             background: sectionproperties.uppersection_bgcolor,
+//             zIndex: 1000,
+//             transition: 'all 0.2s',
+//         }),
+//         upperheadersection: css({
+//             background: sectionproperties.uppersection_bgcolor,
+//             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',
+//             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: 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',
+//         }),
+//         header_logo: css({
+//             width: templateproperties_context.logo_width + 'px',
+//             height: templateproperties_context.logo_height + 'px',
+//         }),
+//         navbar_item_text: css({
+//             color: sectionproperties.lowersection_fontColor,
+//             fontSize: sectionproperties.lowersection_fontsize + 'px',
+//             textTransform: sectionproperties.lowersection_textTransform,
+//             fontWeight: sectionproperties.lowersection_textfontweight,
+//             transition: '0.3s',
+//             padding: 0,
+//             ':hover': {
+//                 color: sectionproperties.lowersection_fontColoronhover,
+//             },
+//         }),
+//         navbar_item_active: css({
+//             color: sectionproperties.lowersection_fontColoronhover,
+//         }),
+//         dropdownitem: css({
+//             padding: '0 0.1rem',
+//             transition: '.3s',
+//             fontSize: sectionproperties.dropdown_fontsize + 'px',
+//             color: sectionproperties.dropdown_color,
+//             fontWeight: sectionproperties.dropdown_fontweight,
+//             textTransform: sectionproperties.dropdown_texttransform,
+//         }),
+//         dropdownitemcontainer: css({
+//             ':hover .dropdownitem': { color: sectionproperties.dropdown_hovercolor },
+//         }),
+//         divider: css({
+//             height: sectionproperties.vl_height + 'px',
+//             width: sectionproperties.vl_width + '%',
+//             backgroundColor: sectionproperties.vl_bg,
+//             zIndex: 100,
+//         }),
+//         searchbarcont: css({
+//             position: 'relative',
+//             width: sectionproperties.searchbarcont_width + 'px',
+//             maxWidth: '100%',
+//             height: sectionproperties.searchbarcont_height + 'px',
+//             background: sectionproperties.searchbarcont_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.searchbarcont_bgcolor,
+//             borderRadius: sectionproperties.searchbarcont_borderRadius + 'px',
+//             border: sectionproperties.searchbarcontinput_borderwidth + 'px  solid' + sectionproperties.searchbarcontinput_bordercolor,
+//             transition: '.3s',
+//         }),
+//         searchbar_icon_cont: css({
+//             width: sectionproperties.searchbaricon_width + 'px',
+//             height: sectionproperties.searchbaricon_height + 'px',
+//             borderRadius: sectionproperties.searchbaricon_borderRadius + 'px',
+//             color: sectionproperties.searchbaricon_color,
+//             backgroundColor: sectionproperties.searchbaricon_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.searchbaricon_bgcolor,
+//             transition: '0.3s ease',
+//             position: 'absolute',
+//             right: langdetect == 'en' ? 0 : '',
+//             left: langdetect == 'en' ? '' : 0,
+//             transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)',
+//             bottom: 0,
+//             top: 0,
+//             margin: 'auto',
+//         }),
+//         searchbarcont_input: css({
+//             height: '100%',
+//             width: '100%',
+//             outline: 'none',
+//             background: 'transparent',
+//             color: sectionproperties.searchbarcontinput_color,
+//             fontWeight: sectionproperties.searchbarcont_inputfontweight,
+//             fontSize: sectionproperties.searchbarcontinput_fontsize + 'px',
+//             paddingLeft: langdetect == 'en' ? sectionproperties.searchbarcont_paddingLeft + 'px' : sectionproperties.searchbarcont_paddingRight + 'px',
+//             paddingRight: langdetect == 'en' ? sectionproperties.searchbarcont_paddingRight + 'px' : sectionproperties.searchbarcont_paddingLeft,
+//             transition: '0.3s',
+//             ':focus': {
+//                 borderColor: sectionproperties.searchbarcontinput_bordercoloronfocus,
+//             },
+//         }),
+//         wishlist_btn: css({
+//             width: sectionproperties.favBtnWidth + 'px',
+//             height: sectionproperties.favBtnHeight + 'px',
+//             background: sectionproperties.favbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColor,
+//             borderRadius: sectionproperties.fav_btn_borderBottomLeftRadius + 'px',
+//             color: sectionproperties.favBtniconcolor,
+//             border: sectionproperties.favbtnborderwidth + 'px solid ' + sectionproperties.favbtnbordercolor,
+//             fontSize: sectionproperties.favBtnIconfontsize + 'px',
+//             transition: '.3s',
+//             ':hover': {
+//                 background: sectionproperties.favbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColoronhover,
+//                 color: sectionproperties.favBtnTextcoloronhover,
+//             },
+//         }),
+//         wishlistbadge: css({
+//             top: sectionproperties.wishlistbadgetop + 'px',
+//             right: sectionproperties.wishlistbadgeright + 'px',
+//         }),
+//         user_btn: css({
+//             background: sectionproperties.userbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.userBtnbgColor,
+//             width: sectionproperties.userBtnWidth + 'px',
+//             height: sectionproperties.userBtnHeight + 'px',
+//             borderRadius: sectionproperties.userbtn_borderBottomLeftRadius + 'px',
+//             color: sectionproperties.userBtniconcolor,
+//             border: sectionproperties.userbtnborderwidth + 'px solid ' + sectionproperties.userbtnbordercolor,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.userBtnTextcoloronhover,
+//                 background: sectionproperties.userbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.userBtnbgColoronhover,
+//                 borderColor: sectionproperties.userbtn_transparentbgcoloronhover == 'Transparent' ? sectionproperties.userBtnTextcoloronhover : sectionproperties.userBtnbgColoronhover,
+//             },
+//         }),
+//         loggedinusername: css({
+//             fontWeight: sectionproperties.userBtnTextfontweight,
+//             textTransform: sectionproperties.userBtnTexttransform,
+//             color: sectionproperties.userBtnTextcolor,
+//             fontSize: sectionproperties.userBtntextfontsize + 'px',
+//             lineHeight: sectionproperties.userBtntextfontsize + 'px',
+//             transition: '.3s',
+//         }),
+//         user_btnContainer: css({
+//             ':hover .user_btnbg': {
+//                 background: sectionproperties.userbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.userBtnbgColoronhover,
+//                 color: sectionproperties.userBtnTextcoloronhover,
+//             },
+//             ':hover .user_btn': {
+//                 color: sectionproperties.userBtnTextcoloronhover,
+//             },
+//         }),
+//         loggedinuserbtn: css({
+//             width: sectionproperties.loggedinuserbtn_width + 'px',
+//             height: sectionproperties.loggedinuserbtn_height + 'px',
+//             border: sectionproperties.userlogginbtnborderwidth + 'px solid ' + sectionproperties.userlogginbtnbordercolor,
+//             borderRadius: sectionproperties.userbtn_borderBottomLeftRadius + 'px',
+//             background: sectionproperties.userBtnbgColor_loggedin,
+//             color: sectionproperties.userBtniconcolor_loggedin,
+//             transition: '.3s',
+//         }),
+//         loggedinuserbtnContainer: css({
+//             ':hover .loggedinuserbtn': {
+//                 borderColor: sectionproperties.userbtn_loggedin_iconcoloronhover,
+//                 color: sectionproperties.userBtnTextcoloronhover_loggedin,
+//             },
+//             ':hover .loggedinuserbtnbg': {
+//                 backgroundColor: sectionproperties.userBtnbgColoronhover_loggedin,
+//                 color: sectionproperties.userbtn_loggedin_iconcoloronhover,
+//             },
+//         }),
+//         cart_btn: css({
+//             width: sectionproperties.cartBtnWidth + 'px',
+//             height: sectionproperties.cartBtnHeight + 'px',
+//             background: sectionproperties.cartbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColor,
+//             borderRadius: sectionproperties.cart_btn_borderBottomLeftRadius + 'px',
+//             color: sectionproperties.cartBtnTextcolor,
+//             border: sectionproperties.cartbtnborderwidth + 'px solid ' + sectionproperties.cartbtnbordercolor,
+//             color: sectionproperties.cart_iconcolor,
+//             transition: '.3s',
+//             ':hover': {
+//                 background: sectionproperties.cartbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColoronhover,
+//                 color: sectionproperties.cartBtnTextcoloronhover,
+//             },
+//         }),
+//         cartbadge: css({
+//             top: sectionproperties.cartbadgetop + 'px',
+//             right: sectionproperties.cartbadgeright + 'px',
+//         }),
+//         badge_counter_header_notifications: css({
+//             display: 'flex',
+//             justifyContent: 'center',
+//             alignItems: 'center',
+//             position: 'absolute',
+//             top: sectionproperties.badge_top + 'px',
+//             right: sectionproperties.badge_right + 'px',
+//             background: sectionproperties.badge_bgcolor,
+//             width: sectionproperties.badge_width + 'px',
+//             height: sectionproperties.badge_height + 'px',
+//             color: sectionproperties.badge_color,
+//             borderRadius: sectionproperties.badge_borderradius + 'px',
+//             fontSize: sectionproperties.badge_fontsize + 'px',
+//         }),
+//         btntextcontainer: css({
+//             color: sectionproperties.generalbtn_textColor,
+//             fontSize: sectionproperties.generalbtn_fontsize + 'px',
+//             textTransform: sectionproperties.generalbtn_texttransform,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.generalbtn_textColoronhover,
+//             },
+//         }),
+//         languagecontainer: css({
+//             cursor: 'pointer',
+//             transition: '.3s',
+//             color: sectionproperties.language_container_color,
+//             fontSize: sectionproperties.language_container_fontsize + 'px',
+//             ':hover': {
+//                 color: sectionproperties.language_container_coloronhover,
+//             },
+//         }),
+//         storeinfotext: css({
+//             color: sectionproperties.footerinfotext_color,
+//             fontSize: sectionproperties.footerinfotext_fontsize + 'px',
+//             fontWeight: sectionproperties.footerinfotext_fontweight,
+//             letterSpacing: '2px',
+//         }),
+//         storeinfocontainer: css({
+//             ':hover .storeinfotext': {
+//                 transition: '.3s',
+//                 color: sectionproperties.footerinfotext_coloronhover,
+//             },
+//         }),
+//         categorybtn: css({
+//             background: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
+//             width: sectionproperties.generalbtn_width + 'px',
+//             maxWidth: '100%',
+//             height: sectionproperties.generalbtn_height + 'px',
+//             borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+//             borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+//             borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+//             borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+//             border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
+//             color: sectionproperties.generalbtn_textColor,
+//             fontSize: sectionproperties.generalbtn_fontsize + 'px',
+//             fontWeight: sectionproperties.generalbtn_fontweight,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.generalbtn_textColoronhover,
+//                 backgroundColor: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
+//             },
+//             ':hover .categorybtnicon': {
+//                 background: sectionproperties.iconcontainerbgonhover,
+//                 color: sectionproperties.iconcontainercoloronhover,
+//             },
+//         }),
+//         categoryname: css({
+//             color: sectionproperties.subheader_categorytitle_fontColor,
+//             fontSize: sectionproperties.subheader_categorytitle_fontSize + 'px',
+//             textTransform: sectionproperties.subheader_categorytitle_textTransform,
+//             fontWeight: sectionproperties.subheader_categorytitle_textfontweight,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.subheader_categorytitle_coloronhover,
+//             },
+//         }),
+//         parentcollection: css({
+//             color: sectionproperties.subheader_collectiontitle_fontColor,
+//             fontSize: sectionproperties.subheader_collectiontitle_fontSize + 'px',
+//             textTransform: sectionproperties.subheader_collectiontitle_textTransform,
+//             fontWeight: sectionproperties.subheader_collectiontitle_textfontweight,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.subheader_collectiontitle_coloronhover,
+//             },
+//         }),
+//         collectionName: css({
+//             color: sectionproperties.collectionsectiontextcolor,
+//             fontSize: sectionproperties.collectionsectiontextfontsize + 'px',
+//             textTransform: sectionproperties.collectionsectiontexttransform,
+//             fontWeight: sectionproperties.collectionsectiontextfontweight,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.collectionsectiontextcoloronhover,
+//             },
+//         }),
+//     };
+//     return (
+//         <div
+//             class="row w-100 ml-0 mr-0 d-flex justify-content-center"
+//             style={{
+//                 marginTop: sectionproperties.header_marginTop + 'px',
+//                 marginBottom: sectionproperties.header_marginBottom + 'px',
+//             }}
+//         >
+//             {sectionproperties.youtbtn_show == 'Show' && (
+//                 <>
+//                     <a href={'tel:' + authdetailsContext?.CuContactphonenumber} target={'_self'} style={{ position: 'fixed', bottom: 60, right: 10, zIndex: 999999, transition: 'all 0.3s ease-out' }}>
+//                         <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'}>
+//                             <FiPhone 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?.whatsappnumber}
+//                         target={'_blank'}
+//                         style={{ position: 'fixed', bottom: 10, right: 10, zIndex: 999999, transition: 'all 0.3s ease-out' }}
+//                     >
+//                         <img src={whatsappicon} style={{ width: '40px', height: '40px', cursor: 'pointer' }} />
+//                     </a>
+//                 </>
+//             )}
+//             <div
+//                 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 class={' col-lg-12 p-0 '}>
+//                     <div class={header_cssstyles.upperheadersection + ' row w-100 m-0 align-items-center px-1025-1 '}>
+//                         <div class="col-lg-2 p-0">
+//                             <div
+//                                 class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+//                                 style={{ cursor: 'pointer' }}
+//                                 onClick={() => {
+//                                     routingcountext('home');
+//                                 }}
+//                             >
+//                                 <Imagekitimagecomp
+//                                     urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+//                                     publicKey={ikimagecredcontext?.ikimagepublickey}
+//                                     path={langdetect == 'en' ? logoarrayofobjects[0]?.englishlogo : logoarrayofobjects[0]?.arabiclogo}
+//                                     style={{
+//                                         maxWidth: '100%',
+//                                         maxHeight: '100%',
+//                                     }}
+//                                 />
+//                             </div>
+//                         </div>
+//                         <div
+//                             class={sectionproperties.showfooterphonenumber == 'Show' ? 'col-xl-4 col-lg-3 p-0' : 'col-lg-6 p-0'}
+//                             style={{
+//                                 position: 'relative',
+//                             }}
+//                         >
+//                             <div class={header_cssstyles.searchbarcont} style={{ position: 'relative' }}>
+//                                 <input
+//                                     type="text"
+//                                     placeholder={lang.searchproducts}
+//                                     class={`${header_cssstyles.searchbarcont_input}`}
+//                                     onChange={(event) => {
+//                                         setSearchHeaderInputContext(event.target.value);
+//                                     }}
+//                                 />
+//                                 <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} srcfromprops={'headerfullwidth'} actions={actions} />
+//                             </div>
+//                         </div>
+//                         {sectionproperties.showfooterphonenumber == 'Show' && (
+//                             <div class="col-lg-3 d-flex flex-column align-items-center justfiy-content-center">
+//                                 <div
+//                                     class={header_cssstyles.storeinfocontainer + ' row m-0 w-100 d-flex align-items-center justify-content-center cursor-pointer '}
+//                                     onClick={() => {
+//                                         window.open('tel:' + authdetailsContext?.CuContactphonenumber, '_blank');
+//                                     }}
+//                                 >
+//                                     <i
+//                                         class={
+//                                             langdetect == 'en'
+//                                                 ? header_cssstyles.storeinfotext + ' storeinfotext h-100 d-flex align-items-center justify-content-center mr-2 '
+//                                                 : header_cssstyles.storeinfotext + ' storeinfotext h-100 d-flex align-items-center justify-content-center ml-2 '
+//                                         }
+//                                     >
+//                                         <FiPhone size={30} style={{ transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)' }} />
+//                                     </i>
+//                                     <div class="d-flex align-items-center flex-column">
+//                                         <p class={header_cssstyles.storeinfotext + ' m-0 storeinfotext '}>{authdetailsContext?.instinfo?.contactinfo?.mobile}</p>
+//                                         <p
+//                                             class="mb-0 w-100"
+//                                             style={{
+//                                                 textAlign: langdetect == 'en' ? 'right' : 'left',
+//                                                 color: sectionproperties.footerinfotext_secondarycolor,
+//                                                 fontSize: sectionproperties.footerinfotext_secondaryfontsize + 'px',
+//                                                 fontWeight: sectionproperties.footerinfotext_secondaryfontweight,
+//                                             }}
+//                                         >
+//                                             {langdetect == 'en' ? sectionproperties.footerinfotext_en : sectionproperties.footerinfotext_ar}
+//                                         </p>
+//                                     </div>
+//                                 </div>
+//                             </div>
+//                         )}
+//                         <div
+//                             class={
+//                                 sectionproperties.showfooterphonenumber == 'Show'
+//                                     ? langdetect == 'en'
+//                                         ? 'col-xl-3 col-lg-4 d-flex align-items-center p-0 pl-0'
+//                                         : 'col-xl-3 col-lg-4 d-flex align-items-center p-0 pr-0'
+//                                     : 'col-lg-4 d-flex align-items-center'
+//                             }
+//                         >
+//                             <div
+//                                 class={'row w-100 m-0 align-items-center justify-content-between plr-1025-0'}
+//                                 style={{
+//                                     paddingLeft:
+//                                         langdetect == 'en'
+//                                             ? sectionproperties.showfooterphonenumber == 'Show'
+//                                                 ? authdetailsContext.loggedin == true
+//                                                     ? '.3rem'
+//                                                     : '3rem'
+//                                                 : authdetailsContext.loggedin == true
+//                                                 ? '4rem'
+//                                                 : '6rem'
+//                                             : 0,
+//                                     paddingRight:
+//                                         langdetect == 'en'
+//                                             ? 0
+//                                             : sectionproperties.showfooterphonenumber == 'Show'
+//                                             ? authdetailsContext.loggedin == true
+//                                                 ? '1rem'
+//                                                 : '3rem'
+//                                             : authdetailsContext.loggedin == true
+//                                             ? '4rem'
+//                                             : '6rem',
+//                                 }}
+//                             >
+//                                 <Dropdown>
+//                                     <Dropdown.Toggle>
+//                                         {!authdetailsContext.loggedin && (
+//                                             <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
+//                                                     class={header_cssstyles.loggedinusername + ' user_btn mb-0 p-0 '}
+//                                                     style={{ marginLeft: langdetect == 'en' ? '3px' : 0, marginRight: langdetect == 'en' ? 0 : '3px' }}
+//                                                 >
+//                                                     {lang.login}
+//                                                 </p>
+//                                             </div>
+//                                         )}
+//                                         {authdetailsContext.loggedin && (
+//                                             <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
+//                                                     class="m-0 p-0"
+//                                                     style={{
+//                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
+//                                                     }}
+//                                                 >
+//                                                     <p
+//                                                         class="m-0 p-0"
+//                                                         style={{
+//                                                             color: sectionproperties.greetingtextcolor,
+//                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
+//                                                             lineHeight: sectionproperties.greetingtextfontsize + 'px',
+//                                                             fontWeight: 400,
+//                                                         }}
+//                                                     >
+//                                                         {lang.hello}
+//                                                         {langdetect == 'en' ? ',' : '،'}
+//                                                     </p>
+//                                                     <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '} style={{ maxWidth: '100px' }}>
+//                                                         {authdetailsContext?.customerinfo?.name}
+//                                                     </p>
+//                                                 </div>
+//                                             </div>
+//                                         )}
+//                                     </Dropdown.Toggle>
+//                                     {!authdetailsContext.loggedin && (
+//                                         <Dropdown.Menu>
+//                                             <Dropdown.Item
+//                                                 onClick={() => {
+//                                                     routingcountext(StaticPagesLinksContext.Login);
+//                                                 }}
+//                                             >
+//                                                 <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+//                                                     <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+//                                                         <AiOutlineLogin />
+//                                                         <span class="ml-2 mr-2">{lang.login}</span>
+//                                                     </p>
+//                                                 </div>
+//                                             </Dropdown.Item>
+//                                             <Dropdown.Divider style={{ marginBottom: 0, marginTop: 0 }}></Dropdown.Divider>
+//                                             <Dropdown.Item
+//                                                 onClick={() => {
+//                                                     routingcountext(StaticPagesLinksContext.Signup);
+//                                                 }}
+//                                             >
+//                                                 <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+//                                                     <p class={`${header_cssstyles.dropdownitem}` + ' d-flex align-items-center dropdownitem m-0 p-0 '}>
+//                                                         <AiOutlineUserAdd />
+//                                                         <span class="ml-2 mr-2">{lang.signup}</span>
+//                                                     </p>
+//                                                 </div>
+//                                             </Dropdown.Item>
+//                                         </Dropdown.Menu>
+//                                     )}
+//                                     {authdetailsContext.loggedin && (
+//                                         <Dropdown.Menu style={{ minWidth: '200px' }}>
+//                                             <Dropdown.Item>
+//                                                 <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+//                                                     <span
+//                                                         style={{
+//                                                             color: sectionproperties.greetingtextcolor,
+//                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
+
+//                                                             fontWeight: 400,
+//                                                         }}
+//                                                     >
+//                                                         {lang.hello},
+//                                                     </span>
+//                                                     <p
+//                                                         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}
+//                                                     </p>
+//                                                 </div>
+//                                             </Dropdown.Item>
+//                                             <Dropdown.Divider style={{ marginBottom: 0, marginTop: 0 }}></Dropdown.Divider>
+//                                             <Dropdown.Item
+//                                                 onClick={() => {
+//                                                     routingcountext(StaticPagesLinksContext.Ordershistory);
+//                                                 }}
+//                                             >
+//                                                 <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+//                                                     <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+//                                                         {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag />}
+//                                                         {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag />}
+//                                                         {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag />}
+//                                                         {sectionproperties.carticonstyle == 'Shopping bag 4' && <HiOutlineShoppingBag />}
+//                                                         {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart />}
+//                                                         {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdAddShoppingCart />}
+//                                                         <span class="ml-2 mr-2">{lang.orderhistory}</span>
+//                                                     </p>
+//                                                 </div>
+//                                             </Dropdown.Item>
+//                                             <Dropdown.Divider style={{ marginBottom: 0, marginTop: 0 }}></Dropdown.Divider>
+//                                             <Dropdown.Item
+//                                                 onClick={() => {
+//                                                     routingcountext(StaticPagesLinksContext.Wishlist);
+//                                                 }}
+//                                             >
+//                                                 <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+//                                                     <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+//                                                         {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart />}
+//                                                         {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar />}
+//                                                         <span class="ml-2 mr-2">{lang.wishlist}</span>
+//                                                     </p>
+//                                                 </div>
+//                                             </Dropdown.Item>
+//                                             <Dropdown.Divider style={{ marginBottom: 0, marginTop: 0 }}></Dropdown.Divider>
+//                                             <Dropdown.Item
+//                                                 onClick={() => {
+//                                                     routingcountext(StaticPagesLinksContext.Policies);
+//                                                 }}
+//                                             >
+//                                                 <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+//                                                     <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+//                                                         <AiOutlineSecurityScan />
+//                                                         <span class="ml-2 mr-2">{lang.policies}</span>
+//                                                     </p>
+//                                                 </div>
+//                                             </Dropdown.Item>
+//                                             <Dropdown.Divider style={{ marginBottom: 0, marginTop: 0 }}></Dropdown.Divider>
+//                                             <Dropdown.Item
+//                                                 onClick={() => {
+//                                                     LogoutMutationContext.mutate();
+//                                                 }}
+//                                             >
+//                                                 <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+//                                                     <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+//                                                         <BiLogOutCircle />
+//                                                         <span class="ml-2 mr-2">{lang.logout}</span>
+//                                                     </p>
+//                                                 </div>
+//                                             </Dropdown.Item>
+//                                         </Dropdown.Menu>
+//                                     )}
+//                                 </Dropdown>
+//                                 <div class="d-flex flex-row p-0 align-items-center">
+//                                     <div
+//                                         style={{ position: 'relative' }}
+//                                         class="cursor-pointer d-flex d-flex align-items-center"
+//                                         onClick={() => {
+//                                             routingcountext(StaticPagesLinksContext.Wishlist);
+//                                         }}
+//                                     >
+//                                         <span class={`${header_cssstyles.wishlist_btn}`}>
+//                                             <i class="h-100 allcentered">
+//                                                 {sectionproperties.faviconshape == 'Heart Shape' && (
+//                                                     <FaRegHeart
+//                                                         style={{
+//                                                             position: 'relative',
+//                                                         }}
+//                                                     />
+//                                                 )}
+//                                                 {sectionproperties.faviconshape == 'Star Shape' && (
+//                                                     <AiFillStar
+//                                                         style={{
+//                                                             position: 'relative',
+//                                                         }}
+//                                                     />
+//                                                 )}
+//                                             </i>
+//                                         </span>
+//                                         <div class={`${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}`}>
+//                                             <span> {favoriteprojectscountContext.length >= 10 ? '+9' : favoriteprojectscountContext.length}</span>
+//                                         </div>
+//                                     </div>
+//                                 </div>
+//                                 <div class=" d-flex flex-row justify-content-end align-items-center">
+//                                     <div
+//                                         class="row w-100 m-0 align-items-center d-flex flex-row justify-content-end"
+//                                         style={{
+//                                             position: 'relative',
+//                                         }}
+//                                         onClick={() => {
+//                                             setsidecartnavshowcontext(true);
+//                                         }}
+//                                     >
+//                                         <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>
+//                                             <i class="h-100 allcentered">
+//                                                 {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag size={sectionproperties.cartBtn_iconFontSize} />}
+//                                                 {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag size={sectionproperties.cartBtn_iconFontSize} />}
+//                                                 {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag size={sectionproperties.cartBtn_iconFontSize} />}
+//                                                 {sectionproperties.carticonstyle == 'Shopping bag 4' && <HiOutlineShoppingBag size={sectionproperties.cartBtn_iconFontSize} />}
+//                                                 {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
+//                                                 {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdAddShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
+//                                             </i>
+//                                         </div>
+//                                         <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
+//                                                     class="m-0 p-0 w-100"
+//                                                     style={{
+//                                                         textAlign: langdetect == 'en' ? 'left' : 'right',
+//                                                         color: sectionproperties.cartBtnTextcolor,
+//                                                         fontSize: sectionproperties.cartBtnTextfontsize + 'px',
+//                                                         lineHeight: sectionproperties.cartBtnTextfontsize + 'px',
+//                                                         fontWeight: sectionproperties.cartBtnTextfontweight,
+//                                                         textTransform: sectionproperties.cartBtnTexttransform,
+//                                                         cursor: 'pointer',
+//                                                     }}
+//                                                 >
+//                                                     {lang.cart}
+//                                                 </p>
+//                                                 <p
+//                                                     class="m-0 text-left"
+//                                                     style={{
+//                                                         color: sectionproperties.card_secondarycolor,
+//                                                         fontSize: sectionproperties.secondaryfontsize + 'px',
+//                                                         fontWeight: sectionproperties.secondaryfontweight,
+//                                                         cursor: 'pointer',
+//                                                     }}
+//                                                 >
+//                                                     {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {subtotalcart()} {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+//                                                 </p>
+//                                             </div>
+//                                         </div>
+//                                     </div>
+//                                 </div>
+//                                 <div
+//                                     class="d-flex flex-row justify-content-end align-items-center"
+//                                     onClick={() => {
+//                                         if (langdetect == 'en') {
+//                                             setlang('ar');
+//                                         } else {
+//                                             setlang('en');
+//                                         }
+//                                     }}
+//                                 >
+//                                     {langdetect == 'en' && (
+//                                         <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 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>
+//                                     )}
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     </div>
+//                 </div>
+//                 {/* Lower Header */}
+//                 <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 class={`${header_cssstyles.lowerheadercontainer}` + ' row w-100 m-0 align-items-center px-1025-1 '}>
+//                     <div
+//                         class={' col-xl-2 col-lg-3 d-flex align-items-center '}
+//                         onClick={() => {
+//                             setdropdownselect(!dropdownselect);
+//                         }}
+//                     >
+//                         <li class={langdetect == 'en' ? 'dropdown dropdownen w-100' : 'dropdown dropdownar w-100'}>
+//                             <div class={`${header_cssstyles.categorybtn}` + ' m-0 allcentered px-2 cursor-pointer '}>
+//                                 <i class={`${header_cssstyles.categorybtnicon}` + ' categorybtnicon d-flex align-items-center justify-content-center '}>
+//                                     <HiMenuAlt4 size={sectionproperties.icontextfontsize} />
+//                                 </i>
+//                                 <p class={langdetect == 'en' ? ' m-0 p-0 ml-2' : ' m-0 p-0 mr-2 '}>
+//                                     {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
+//                                 </p>
+//                             </div>
+//                             <ul class="w-100 mt-2">
+//                                 {sectionproperties.fetchparenttype == 'Categories' &&
+//                                     authdetailsContext?.instinfo?.instcategories?.map((item, index) => {
+//                                         var fetchedarray = authdetailsContext?.instinfo?.instcategories;
+//                                         if (item.isshowntocustomers == 1) {
+//                                             return <div class="w-100">{ButtonDropdown(item, index, fetchedarray)}</div>;
+//                                         }
+//                                     })}
+//                                 {sectionproperties.fetchparenttype == 'Parent Collections' &&
+//                                     pcollarray?.map((item, index) => {
+//                                         var fetchedarray = pcollarray;
+//                                         if (item.isshowntocustomers == 1) {
+//                                             return <div class="w-100">{ButtonDropdown(item, index, fetchedarray)}</div>;
+//                                         }
+//                                     })}
+//                                 {sectionproperties.fetchparenttype == 'Collections' &&
+//                                     authdetailsContext?.instinfo?.instcollections?.map((item, index) => {
+//                                         var fetchedarray = authdetailsContext?.instinfo?.instcollections;
+//                                         if (item.isshowntocustomers == 1) {
+//                                             return <div class="w-100">{ButtonDropdown(item, index, fetchedarray)}</div>;
+//                                         }
+//                                     })}
+//                             </ul>
+//                         </li>
+//                     </div>
+//                     <div class="col-xl-10 col-lg-9 flex-row d-flex align-items-center justify-content-start">
+//                         <div
+//                             class={' scrollhorizontal w-100 align-items-center justify-content-start '}
+//                             style={{
+//                                 display: sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'none' : 'flex',
+//                             }}
+//                         >
+//                             {templatepropcontext.pagesnprop.map((item, index) => {
+//                                 var activeclass = '';
+//                                 var pagedisabled = '';
+//                                 if (item.isselected) {
+//                                     activeclass = header_cssstyles.navbar_item_active;
+//                                 }
+//                                 if (item.isnavigation == 1 && item.isactive == 1) {
+//                                     return (
+//                                         <div
+//                                             class={`${activeclass}` + ' cursor-pointer scrollhorizontalcard '}
+//                                             onClick={() => {
+//                                                 routingcountext(item.navigationroute);
+//                                             }}
+//                                             style={{
+//                                                 marginRight: langdetect == 'en' ? '25px' : 0,
+//                                                 marginLeft: langdetect == 'en' ? 0 : '25px',
+//                                             }}
+//                                         >
+//                                             <div class={`${header_cssstyles.navbar_item_text}`}> {langdetect == 'en' ? item.pagename : item.pagename_ar}</div>
+//                                         </div>
+//                                     );
+//                                 }
+//                             })}
+//                         </div>
+//                         {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' && (
+//                             <Subheader
+//                                 sectionpropertiesprops={sectionproperties}
+//                                 actions={actions}
+//                                 subheaderpropertiesprops={{
+//                                     subheaderpositionprops: 'in nav',
+//                                     paddingLeftprops: '25px',
+//                                     paddingRightprops: '25px',
+//                                 }}
+//                             />
+//                         )}
+//                     </div>
+//                 </div>
+//                 {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Full Width' && (
+//                     <div class="col-lg-12 p-0">
+//                         <Subheader
+//                             actions={actions}
+//                             sectionpropertiesprops={sectionproperties}
+//                             subheaderpropertiesprops={{
+//                                 subheaderpositionprops: 'Full Width',
+//                                 paddingLeftprops: '25px',
+//                                 paddingRightprops: '25px',
+//                             }}
+//                         />
+//                     </div>
+//                 )}
+//             </div>
+//             <Headerresponsive sectionpropertiesprops={sectionproperties} actions={actions} />
+//         </div>
+//     );
+// };
+// export default Header8;