tabexseriescomponents 0.2.1280 → 0.2.1281

package/srcbefore27-11/TabexComponents/Headers/Header8/Header8 copy.jsx

@@ -1,1026 +0,0 @@
-// 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;