tabexseriescomponents 0.0.707 → 0.0.708

package/{srcoriginal → srcoman}/TabexComponents/Headers/Modernheader/Modernheader.jsx

@@ -410,9 +410,9 @@ const Modernheader = (props) => {
                 }}
             >
                 <div class="row m-0 w-100">
-                    <div class={`${header_cssstyles.top_bar}` + ' row m-0 w-100 d-flex align-items-center px-1025-1 '}>
-                        <div class="col-lg-4 col-md-6 col-sm-12 d-flex align-items-center justify-content-start p-0" style={{}}>
-                            {sectionproperties.searchbartype == 'Full Width' && (
+                    <div class={`${header_cssstyles.top_bar}` + ' row m-0 w-100 d-flex align-items-center justify-content-center px-1025-1 '}>
+                        <div class="col-lg-4 col-md-6 col-sm-12 d-none align-items-center justify-content-start p-0" style={{}}>
+                            {sectionproperties.searchbartype == 'Full Width' && sectionproperties.searchbar_show == 'Show' && (
                                 <div class={header_cssstyles.searchbarcont}>
                                     <input
                                         type="text"
@@ -430,7 +430,7 @@ const Modernheader = (props) => {
                                     <Searchlist sectionpropertiesprops={sectionproperties} srcfromprops={'fullheader'} actions={actions} />
                                 </div>
                             )}
-                            {sectionproperties.searchbartype == 'Icon' && (
+                            {sectionproperties.searchbartype == 'Icon' && sectionproperties.searchbar_show == 'Show' && (
                                 <div
                                     class={header_cssstyles.searchbarcont + ' allcentered '}
                                     style={{
@@ -455,28 +455,14 @@ const Modernheader = (props) => {
                                             <li class={' d-flex align-items-center justify-content-center '}>
                                                 {langdetect == 'en' && (
                                                     <div class={' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p
-                                                            class="m-0 p-0 mr-2 ml-2"
-                                                            style={{
-                                                                color: sectionproperties.searchbaricon_color,
-                                                            }}
-                                                        >
-                                                            {authdetailsContext?.currencyname_en}
-                                                        </p>
-                                                        <MdKeyboardArrowDown color={sectionproperties.searchbaricon_color} />
+                                                        <p class="m-0 p-0 mr-2 ml-2">{authdetailsContext?.currencyname_en}</p>
+                                                        <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
                                                     <div class={' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p
-                                                            class="m-0 p-0 ml-2 mr-2"
-                                                            style={{
-                                                                color: sectionproperties.searchbaricon_color,
-                                                            }}
-                                                        >
-                                                            {authdetailsContext?.currencyname_ar}
-                                                        </p>
-                                                        <MdKeyboardArrowDown color={sectionproperties.searchbaricon_color} />
+                                                        <p class="m-0 p-0 ml-2 mr-2">{authdetailsContext?.currencyname_ar}</p>
+                                                        <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                             </li>
@@ -498,7 +484,6 @@ const Modernheader = (props) => {
                                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                                             fontWeight: sectionproperties.dropdown_fontweight,
                                                                             textTransform: sectionproperties.dropdown_texttransform,
-                                                                            color: sectionproperties.searchbaricon_color,
                                                                         }}
                                                                     >
                                                                         <span class={'ml-2 mr-2'}>{langdetect == 'en' ? item.currencyname_en : item.currencyname_ar}</span>
@@ -520,7 +505,7 @@ const Modernheader = (props) => {
                             )}
                         </div>
 
-                        <div class="col-lg-4 col-md-6 col-sm-12 allcentered p-0">
+                        <div class="col-lg-6 col-md-6 col-sm-12 allcentered p-0">
                             <div
                                 class={`${header_cssstyles.header_logo}` + ' allcentered '}
                                 style={{ cursor: 'pointer' }}
@@ -540,61 +525,62 @@ const Modernheader = (props) => {
                                 />
                             </div>
                         </div>
-                        <div class="col-lg-4 col-md-6 col-sm-12 p-0 d-flex align-items-center justify-content-end">
-                            <div style={{ marginRight: langdetect == 'en' ? '30px' : 0, marginLeft: langdetect == 'en' ? 0 : '30px' }}>
-                                <Dropdown>
-                                    <Dropdown.Toggle>
-                                        {!authdetailsContext.loggedin && (
-                                            <div
-                                                class={` ${header_cssstyles.user_btn}` + ' d-flex align-items-center justify-content-center '}
-                                                sytle={{ position: 'relative' }}
-                                                onClick={() => {
-                                                    routingcountext(StaticPagesLinksContext.Login);
-                                                }}
-                                            >
-                                                <i class={' h-100 d-flex align-items-center '}>
-                                                    <BiUser size={sectionproperties.userBtnTextfontsize} />
-                                                </i>
-                                            </div>
-                                        )}
-                                        {authdetailsContext.loggedin && (
-                                            <div class={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
-                                                <div class={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
-                                                    <i class={' h-100 allcentered '}>
-                                                        <BiUser size={sectionproperties.loggedinusericonfontsize} />
-                                                    </i>
-                                                </div>
+                        <div class="col-lg-4 col-md-6 col-sm-12 p-0 d-none align-items-center justify-content-end">
+                            {sectionproperties.ShowUserBtn == 'Show' && (
+                                <div style={{ marginRight: langdetect == 'en' ? '30px' : 0, marginLeft: langdetect == 'en' ? 0 : '30px' }}>
+                                    <Dropdown>
+                                        <Dropdown.Toggle>
+                                            {!authdetailsContext.loggedin && (
                                                 <div
-                                                    class="m-0 p-0 loggedinuserbtn flex-column"
-                                                    style={{
-                                                        textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                    class={` ${header_cssstyles.user_btn}` + ' d-flex align-items-center justify-content-center '}
+                                                    sytle={{ position: 'relative' }}
+                                                    onClick={() => {
+                                                        routingcountext(StaticPagesLinksContext.Login);
                                                     }}
                                                 >
-                                                    <p
-                                                        class="m-0 p-0 mb-1"
-                                                        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 m-0 p-0 text-overflow '}
+                                                    <i class={' h-100 d-flex align-items-center '}>
+                                                        <BiUser size={sectionproperties.userBtnTextfontsize} />
+                                                    </i>
+                                                </div>
+                                            )}
+                                            {authdetailsContext.loggedin && (
+                                                <div class={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
+                                                    <div class={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
+                                                        <i class={' h-100 allcentered '}>
+                                                            <BiUser size={sectionproperties.loggedinusericonfontsize} />
+                                                        </i>
+                                                    </div>
+                                                    <div
+                                                        class="m-0 p-0 loggedinuserbtn flex-column"
                                                         style={{
-                                                            maxWidth: '120px',
+                                                            textAlign: langdetect == 'en' ? 'left' : 'right',
                                                         }}
                                                     >
-                                                        {authdetailsContext?.customerinfo?.name}
-                                                    </p>
+                                                        <p
+                                                            class="m-0 p-0 mb-1"
+                                                            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 m-0 p-0 text-overflow '}
+                                                            style={{
+                                                                maxWidth: '120px',
+                                                            }}
+                                                        >
+                                                            {authdetailsContext?.customerinfo?.name}
+                                                        </p>
+                                                    </div>
                                                 </div>
-                                            </div>
-                                        )}
-                                    </Dropdown.Toggle>
-                                    {/* {!authdetailsContext.loggedin && (
+                                            )}
+                                        </Dropdown.Toggle>
+                                        {/* {!authdetailsContext.loggedin && (
                                         <Dropdown.Menu>
                                             <Dropdown.Item
                                                 onClick={() => {
@@ -623,70 +609,74 @@ const Modernheader = (props) => {
                                             </Dropdown.Item>
                                         </Dropdown.Menu>
                                     )} */}
-                                    {authdetailsContext.loggedin && (
-                                        <Dropdown.Menu style={{ minWidth: '200px' }}>
-                                            <Dropdown.Item
-                                                onClick={() => {
-                                                    routingcountext(StaticPagesLinksContext.Ordershistory);
-                                                }}
-                                            >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <i class="h-100 allcentered">
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping bag 4' && <HiOutlineShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdAddShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.carticonstyle == 'Calendar 1' && <FiCalendar class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                    </i>
-                                                    <p class={' allcenetered m-0 p-0 '}>{langdetect == 'en' ? sectionproperties.previousorders_titleen : sectionproperties.previousorders_titlear}</p>
-                                                </div>
-                                            </Dropdown.Item>
-                                            <Dropdown.Divider></Dropdown.Divider>
-                                            <Dropdown.Item
-                                                onClick={() => {
-                                                    routingcountext(StaticPagesLinksContext.Wishlist);
-                                                }}
-                                            >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <i class="h-100 allcentered">
-                                                        {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                    </i>
-                                                    <p class={' allcenetered m-0 p-0 '}>{lang.wishlist}</p>
-                                                </div>
-                                            </Dropdown.Item>
-                                            <Dropdown.Divider></Dropdown.Divider>
-                                            <Dropdown.Item
-                                                onClick={() => {
-                                                    routingcountext(StaticPagesLinksContext.Policies);
-                                                }}
-                                            >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <i class="h-100 allcentered">
-                                                        <AiOutlineSecurityScan class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
-                                                    </i>
-                                                    <p class={' allcenetered m-0 p-0 '}>{lang.policies}</p>
-                                                </div>
-                                            </Dropdown.Item>
-                                            <Dropdown.Divider></Dropdown.Divider>
-                                            <Dropdown.Item
-                                                onClick={() => {
-                                                    LogoutMutationContext.mutate();
-                                                }}
-                                            >
-                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <i class="h-100 allcentered">
-                                                        <BiLogOutCircle class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
-                                                    </i>
-                                                    <p class={' allcenetered m-0 p-0 '}>{lang.logout}</p>
-                                                </div>
-                                            </Dropdown.Item>
-                                        </Dropdown.Menu>
-                                    )}
-                                </Dropdown>
-                            </div>
+                                        {authdetailsContext.loggedin && (
+                                            <Dropdown.Menu style={{ minWidth: '200px' }}>
+                                                <Dropdown.Item
+                                                    onClick={() => {
+                                                        routingcountext(StaticPagesLinksContext.Ordershistory);
+                                                    }}
+                                                >
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                        <i class="h-100 allcentered">
+                                                            {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                            {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                            {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                            {sectionproperties.carticonstyle == 'Shopping bag 4' && <HiOutlineShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                            {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                            {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdAddShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                            {sectionproperties.carticonstyle == 'Calendar 1' && <FiCalendar class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        </i>
+                                                        <p class={' allcenetered m-0 p-0 '}>
+                                                            {langdetect == 'en' ? sectionproperties.previousorders_titleen : sectionproperties.previousorders_titlear}
+                                                        </p>
+                                                    </div>
+                                                </Dropdown.Item>
+                                                <Dropdown.Divider></Dropdown.Divider>
+                                                <Dropdown.Item
+                                                    onClick={() => {
+                                                        routingcountext(StaticPagesLinksContext.Wishlist);
+                                                    }}
+                                                >
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                        <i class="h-100 allcentered">
+                                                            {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                            {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        </i>
+                                                        <p class={' allcenetered m-0 p-0 '}>{lang.wishlist}</p>
+                                                    </div>
+                                                </Dropdown.Item>
+                                                <Dropdown.Divider></Dropdown.Divider>
+                                                <Dropdown.Item
+                                                    onClick={() => {
+                                                        routingcountext(StaticPagesLinksContext.Policies);
+                                                    }}
+                                                >
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                        <i class="h-100 allcentered">
+                                                            <AiOutlineSecurityScan class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                        </i>
+                                                        <p class={' allcenetered m-0 p-0 '}>{lang.policies}</p>
+                                                    </div>
+                                                </Dropdown.Item>
+                                                <Dropdown.Divider></Dropdown.Divider>
+                                                <Dropdown.Item
+                                                    onClick={() => {
+                                                        LogoutMutationContext.mutate();
+                                                    }}
+                                                >
+                                                    <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                        <i class="h-100 allcentered">
+                                                            <BiLogOutCircle class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                        </i>
+                                                        <p class={' allcenetered m-0 p-0 '}>{lang.logout}</p>
+                                                    </div>
+                                                </Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        )}
+                                    </Dropdown>
+                                </div>
+                            )}
+
                             {sectionproperties.favBtnShow == 'Show' && (
                                 <div
                                     class={`${header_cssstyles.wishlist_btn} ${headerstyles.header_menu}` + ' cursor-pointer allcentered '}
@@ -724,94 +714,99 @@ const Modernheader = (props) => {
                                     </span>
                                 </div>
                             )}
-                            <div
-                                class={`${headerstyles.header_menu} ${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered  '}
-                                onClick={() => {
-                                    setsidecartnavshowcontext(true);
-                                }}
-                                style={{
-                                    marginRight: langdetect == 'en' ? '30px' : 0,
-                                    marginLeft: langdetect == 'en' ? 0 : '30px',
-                                }}
-                            >
-                                <span class={`${headerstyles.nav_link}` + ' pr-0 '} style={{ position: 'relative' }}>
-                                    <i class={' allcentered '}>
-                                        {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                        {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                        {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                        {sectionproperties.carticonstyle == 'Shopping bag 4' && <HiOutlineShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                        {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                        {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdAddShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
-                                        {sectionproperties.carticonstyle == 'Calendar 1' && <FiCalendar size={sectionproperties.cartBtn_iconFontSize} />}
-                                    </i>
-                                    <div
-                                        className={
-                                            `${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications}` + ' d-flex justify-content-center text-center '
-                                        }
-                                        style={{
-                                            top: sectionproperties.cartbadgetop + 'px',
-                                            right: sectionproperties.cartbadgeright + 'px',
-                                        }}
-                                    >
-                                        {fetchcustomercartQueryContext?.data?.data?.customercart != null
-                                            ? fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length >= 10
-                                                ? '+9'
-                                                : fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length
-                                            : 0}
-                                    </div>
-                                </span>
-                            </div>
-                            <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
-                                <Dropdown>
-                                    <Dropdown.Toggle>
-                                        <li class={`${headerstyles.header_menu}` + ' allcentered '}>
-                                            {langdetect == 'ar' && (
-                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                    <img src={'https://tabex-co.com/storage/StaticImages/egyptflag.png'} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                                    <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
-                                                    <p class="m-0 p-0">ع</p>
-                                                </div>
-                                            )}
-                                            {langdetect == 'en' && (
-                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                    <img src={'https://tabex-co.com/storage/StaticImages/usflag.png'} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                                    <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
-                                                    <p class="m-0 p-0">En</p>
-                                                </div>
-                                            )}
-                                        </li>
-                                    </Dropdown.Toggle>
-                                    <Dropdown.Menu>
-                                        <Dropdown.Item
-                                            class={`${header_cssstyles.dropdownitem}`}
-                                            onClick={() => {
-                                                setlang('ar');
-                                            }}
-                                        >
-                                            <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
-                                                    <img src={'https://tabex-co.com/storage/StaticImages/egyptflag.png'} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                    <span class="ml-2 mr-2">{lang.arabic}</span>
-                                                </p>
-                                            </div>
-                                        </Dropdown.Item>
-                                        <Dropdown.Divider></Dropdown.Divider>
-                                        <Dropdown.Item
-                                            class={`${header_cssstyles.dropdownitem}`}
-                                            onClick={() => {
-                                                setlang('en');
+                            {sectionproperties.cartBtnShow == 'Show' && (
+                                <div
+                                    class={`${headerstyles.header_menu} ${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered  '}
+                                    onClick={() => {
+                                        setsidecartnavshowcontext(true);
+                                    }}
+                                    style={{
+                                        marginRight: langdetect == 'en' ? '30px' : 0,
+                                        marginLeft: langdetect == 'en' ? 0 : '30px',
+                                    }}
+                                >
+                                    <span class={`${headerstyles.nav_link}` + ' pr-0 '} style={{ position: 'relative' }}>
+                                        <i class={' allcentered '}>
+                                            {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping bag 4' && <HiOutlineShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdAddShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
+                                            {sectionproperties.carticonstyle == 'Calendar 1' && <FiCalendar size={sectionproperties.cartBtn_iconFontSize} />}
+                                        </i>
+                                        <div
+                                            className={
+                                                `${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications}` +
+                                                ' d-flex justify-content-center text-center '
+                                            }
+                                            style={{
+                                                top: sectionproperties.cartbadgetop + 'px',
+                                                right: sectionproperties.cartbadgeright + 'px',
                                             }}
                                         >
-                                            <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
-                                                    <img src={'https://tabex-co.com/storage/StaticImages/usflag.png'} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                    <span class="ml-2 mr-2">{lang.english}</span>
-                                                </p>
-                                            </div>
-                                        </Dropdown.Item>
-                                    </Dropdown.Menu>
-                                </Dropdown>
-                            </div>
+                                            {fetchcustomercartQueryContext?.data?.data?.customercart != null
+                                                ? fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length >= 10
+                                                    ? '+9'
+                                                    : fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length
+                                                : 0}
+                                        </div>
+                                    </span>
+                                </div>
+                            )}
+                            {sectionproperties.showlanuagecontainer == 'Show' && (
+                                <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                    <Dropdown>
+                                        <Dropdown.Toggle>
+                                            <li class={`${headerstyles.header_menu}` + ' allcentered '}>
+                                                {langdetect == 'ar' && (
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <img src={'https://tabex-co.com/storage/StaticImages/egyptflag.png'} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
+                                                        <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
+                                                        <p class="m-0 p-0">ع</p>
+                                                    </div>
+                                                )}
+                                                {langdetect == 'en' && (
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <img src={'https://tabex-co.com/storage/StaticImages/usflag.png'} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
+                                                        <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
+                                                        <p class="m-0 p-0">En</p>
+                                                    </div>
+                                                )}
+                                            </li>
+                                        </Dropdown.Toggle>
+                                        <Dropdown.Menu>
+                                            <Dropdown.Item
+                                                class={`${header_cssstyles.dropdownitem}`}
+                                                onClick={() => {
+                                                    setlang('ar');
+                                                }}
+                                            >
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                        <img src={'https://tabex-co.com/storage/StaticImages/egyptflag.png'} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
+                                                        <span class="ml-2 mr-2">{lang.arabic}</span>
+                                                    </p>
+                                                </div>
+                                            </Dropdown.Item>
+                                            <Dropdown.Divider></Dropdown.Divider>
+                                            <Dropdown.Item
+                                                class={`${header_cssstyles.dropdownitem}`}
+                                                onClick={() => {
+                                                    setlang('en');
+                                                }}
+                                            >
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                    <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                                        <img src={'https://tabex-co.com/storage/StaticImages/usflag.png'} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
+                                                        <span class="ml-2 mr-2">{lang.english}</span>
+                                                    </p>
+                                                </div>
+                                            </Dropdown.Item>
+                                        </Dropdown.Menu>
+                                    </Dropdown>
+                                </div>
+                            )}
                         </div>
                     </div>
                     {sectionproperties.showlowerheadersection == 'Show' && (