tabexseriescomponents 0.0.694 → 0.0.696

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

@@ -512,6 +512,23 @@ const Header8 = (props) => {
                 color: sectionproperties.collectionsectiontextcoloronhover,
             },
         }),
+        floatingbtn: css({
+            width: sectionproperties.floatingbtnwidth + '%',
+            height: sectionproperties.floatingbtnheight + 'px',
+            background: sectionproperties.floatingbtnbg,
+            fontSize: sectionproperties.floatingbtnfontsize + 'px',
+            color: sectionproperties.floatingbtncolor,
+            borderRadius: 10,
+            ':hover': {
+                color: sectionproperties.floatingbtncolorhover,
+                backgroundColor: sectionproperties.floatingbtnbghover,
+                transitions: '.3s',
+                cursor: 'pointer',
+            },
+            '@media (max-width: 800px)': {
+                width: '50%',
+            },
+        }),
     };
     return (
         <div
@@ -526,7 +543,30 @@ const Header8 = (props) => {
                     <MarqueeHeader sectionpropertiesprops={sectionproperties} templateproperties_contextprops={templateproperties_context} actions={actions} />
                 </div>
             )}
-
+            {sectionproperties.showfloatingbtn == 'Show' && (
+                <div
+                    style={{
+                        position: 'fixed',
+                        bottom: 15,
+                        right: 15,
+                        zIndex: 2000,
+                        transition: 'all 0.3s ease-out',
+                        width: '100%',
+                        display: sectionproperties.showfloatingbtn == 'Show when logged in' ? 'none' : 'flex',
+                    }}
+                    class="text-end"
+                >
+                    <div
+                        class={header_cssstyles.floatingbtn + ' allcentered '}
+                        style={{}}
+                        onClick={() => {
+                            routingcountext(sectionproperties.floatingbtnlink, false, '');
+                        }}
+                    >
+                        <p class="m-0 p-0">{langdetect == 'en' ? sectionproperties.floatingbtntxten : sectionproperties.floatingbtntxtar}</p>
+                    </div>
+                </div>
+            )}
             {sectionproperties.showfloatingcallbtn == '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'}>

package/{srcoman → srcoriginal}/TabexComponents/Headers/Headerresponsive/HeaderresponsiveStyle2.jsx

@@ -367,33 +367,261 @@ const HeaderresponsiveStyle2 = (props) => {
                                         position: 'relative',
                                     }}
                                 >
-                                    <div className="col-md-6 col-sm-6 d-flex filter align-items-center p-0">{InstLogoContainer()}</div>
-                                    <div className="col-md-6 col-sm-6 text-end p-0">
-                                        <div style={{}}>
-                                            <i
-                                                class={' h-100 allcentered '}
+                                    {sectionproperties.logocentered == 'Centered' && (
+                                        <div className="col-md-4 col-sm-3 text-start p-0">
+                                            <div style={{}}>
+                                                <i
+                                                    class={' h-100 allcentered '}
+                                                    style={{
+                                                        color: sectionproperties.resp_sidenav_color,
+                                                    }}
+                                                    onClick={() => {
+                                                        if (sectionproperties.responsiveheaderstyle == 'Style 2') {
+                                                            if (menuactive == true) {
+                                                                setmenuactive(false);
+                                                            } else {
+                                                                setmenuactive(true);
+                                                            }
+                                                        } else {
+                                                            setopenmenuCanvas(true);
+                                                            setactiveTab('menu');
+                                                        }
+                                                    }}
+                                                >
+                                                    {menuactive == false && <FiMenu size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
+                                                    {menuactive == true && <AiOutlineClose size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
+                                                </i>
+                                            </div>
+                                            {sectionproperties.searchbar_show == 'Show' && (
+                                                <div
+                                                    style={{
+                                                        width: '30px',
+                                                        height: sectionproperties.cart_BtnHeight_resp + 'px',
+                                                    }}
+                                                >
+                                                    <i
+                                                        class="h-100 allcentered"
+                                                        onClick={() => {
+                                                            setopenSearch(true);
+                                                        }}
+                                                    >
+                                                        <IoSearchOutline size={22} color={sectionproperties.cart_BtnTextcolor_resp} />
+                                                    </i>
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+                                    {sectionproperties.logocentered == 'Not Centered' && (
+                                        <div className="col-md-6 col-sm-6 d-flex filter align-items-center p-0">
+                                            <div
                                                 style={{
-                                                    color: sectionproperties.resp_sidenav_color,
+                                                    width: sectionproperties.cart_BtnWidth_resp + 'px',
+                                                    height: sectionproperties.cart_BtnHeight_resp + 'px',
                                                 }}
-                                                onClick={() => {
-                                                    if (sectionproperties.responsiveheaderstyle == 'Style 2') {
-                                                        if (menuactive == true) {
-                                                            setmenuactive(false);
+                                                class={langdetect == 'en' ? 'mr-2' : 'ml-2'}
+                                            >
+                                                <i
+                                                    class={' h-100 allcentered '}
+                                                    style={{
+                                                        color: sectionproperties.cart_BtnTextcolor_resp,
+                                                    }}
+                                                    onClick={() => {
+                                                        if (sectionproperties.responsiveheaderstyle == 'Style 2') {
+                                                            if (menuactive == true) {
+                                                                setmenuactive(false);
+                                                            } else {
+                                                                setmenuactive(true);
+                                                            }
                                                         } else {
-                                                            setmenuactive(true);
+                                                            setopenmenuCanvas(true);
+                                                            setactiveTab('menu');
                                                         }
+                                                    }}
+                                                >
+                                                    {menuactive == false && <FiMenu size={20} color={sectionproperties.cart_BtnTextcolor_resp} />}
+                                                    {menuactive == true && <AiOutlineClose size={20} color={sectionproperties.cart_BtnTextcolor_resp} />}
+                                                </i>
+                                            </div>
+                                            {InstLogoContainer()}
+                                        </div>
+                                    )}
+                                    {sectionproperties.logocentered == 'Centered' && <div className="col-md-4 col-sm-6 allcentered p-0">{InstLogoContainer()}</div>}
+                                    <div
+                                        className={
+                                            sectionproperties.logocentered != 'Centered'
+                                                ? 'col-md-6 col-sm-6 d-flex align-items-center justify-content-end p-0'
+                                                : 'col-md-4 col-sm-3 d-flex align-items-center justify-content-end p-0'
+                                        }
+                                    >
+                                        {sectionproperties.searchbar_show == 'Show' && sectionproperties.logocentered == 'Not Centered' && (
+                                            <div
+                                                style={{
+                                                    width: '30px',
+                                                    height: sectionproperties.cart_BtnHeight_resp + 'px',
+                                                }}
+                                            >
+                                                <i
+                                                    class="h-100 allcentered"
+                                                    onClick={() => {
+                                                        setopenSearch(true);
+                                                    }}
+                                                >
+                                                    <IoSearchOutline size={22} color={sectionproperties.cart_BtnTextcolor_resp} />
+                                                </i>
+                                            </div>
+                                        )}
+                                        {templateproperties_context.showfavorites == 'Show' && (
+                                            <div
+                                                style={{
+                                                    width: '30px',
+                                                    height: sectionproperties.cart_BtnHeight_resp + 'px',
+                                                }}
+                                            >
+                                                <i
+                                                    class="h-100 allcentered"
+                                                    onClick={() => {
+                                                        routingcountext(StaticPagesLinksContext.Wishlist);
+                                                    }}
+                                                >
+                                                    <FaRegHeart size={22} color={sectionproperties.cart_BtnTextcolor_resp} />
+                                                </i>
+                                            </div>
+                                        )}
+                                        {sectionproperties.cartBtnShow == 'Show' && CartButton()}
+                                        {authdetailsContext != undefined && authdetailsContext?.instinfo?.instcurrencies?.length > 1 && (
+                                            <div class={'d-flex align-items-center pl-1 pr-1 pt-1'} style={{}}>
+                                                <Dropdown>
+                                                    <Dropdown.Toggle>
+                                                        <li class={' d-flex align-items-center justify-content-center '}>
+                                                            {langdetect == 'en' && (
+                                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                                    <p class="m-0 p-0 mr-1 ml-1">{authdetailsContext?.currencyname_en}</p>
+                                                                    <MdKeyboardArrowDown />
+                                                                </div>
+                                                            )}
+                                                            {langdetect == 'ar' && (
+                                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                                    <p class="m-0 p-0 ml-1 mr-1">{authdetailsContext?.currencyname_ar}</p>
+                                                                    <MdKeyboardArrowDown />
+                                                                </div>
+                                                            )}
+                                                        </li>
+                                                    </Dropdown.Toggle>
+                                                    <Dropdown.Menu>
+                                                        {authdetailsContext?.instinfo?.instcurrencies?.map(function (item, index) {
+                                                            return (
+                                                                <Dropdown.Item
+                                                                    class="m-0 p-0"
+                                                                    onClick={() => {
+                                                                        setcurrencyfunccontext(item);
+                                                                    }}
+                                                                >
+                                                                    <div class="row m-0 w-100">
+                                                                        <div class="col-lg-12 p-0 d-flex justify-content-start">
+                                                                            <div class={`${header_cssstyles.dropdownitemcontainer}`}>
+                                                                                <p
+                                                                                    class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                                                    style={{
+                                                                                        fontSize: sectionproperties.dropdown_fontsize + 'px',
+                                                                                        fontWeight: sectionproperties.dropdown_fontweight,
+                                                                                        textTransform: sectionproperties.dropdown_texttransform,
+                                                                                    }}
+                                                                                >
+                                                                                    <FaMoneyBillWave />
+                                                                                    <span class={'ml-2 mr-2'}>{langdetect == 'en' ? item.currencyname_en : item.currencyname_ar}</span>
+                                                                                </p>
+                                                                            </div>
+                                                                        </div>
+                                                                        {index != authdetailsContext?.instinfo?.instcurrencies?.length - 1 && (
+                                                                            <div class="col-lg-12 p-0">
+                                                                                <hr class="m-0" />
+                                                                            </div>
+                                                                        )}
+                                                                    </div>
+                                                                </Dropdown.Item>
+                                                            );
+                                                        })}
+                                                    </Dropdown.Menu>
+                                                </Dropdown>
+                                            </div>
+                                        )}
+                                        {/* here */}
+                                        {sectionproperties.searchbar_show == 'Hide' &&
+                                            sectionproperties.logocentered == 'Centered' &&
+                                            sectionproperties.cartBtnShow == 'Hide' &&
+                                            sectionproperties.favBtnShow == 'Hide' && (
+                                                <div
+                                                    className={'allcentered resposiveheader_languagedropdown'}
+                                                    style={{
+                                                        marginLeft: langdetect == 'en' ? '0.25rem' : 0,
+                                                        marginRight: langdetect == 'ar' ? '0.25rem' : 0,
+                                                    }}
+                                                >
+                                                    {langdetect == 'en' && (
+                                                        <div
+                                                            className={' row m-0 w-100 allcentered '}
+                                                            style={{ direction: 'rtl', color: sectionproperties.cart_BtnTextcolor_resp }}
+                                                            onClick={() => {
+                                                                setlang('ar');
+                                                            }}
+                                                        >
+                                                            <p class="m-0 p-0 font-weight-500">ع</p>
+                                                            <i className={langdetect == 'en' ? 'h-100 allcentered mr-1' : 'h-100 allcentered ml-1'}>
+                                                                <BiChevronDown size={20} />
+                                                            </i>
+                                                        </div>
+                                                    )}
+                                                    {langdetect == 'ar' && (
+                                                        <div
+                                                            className={' row m-0 w-100 allcentered '}
+                                                            style={{ direction: 'ltr', color: sectionproperties.cart_BtnTextcolor_resp }}
+                                                            onClick={() => {
+                                                                setlang('en');
+                                                            }}
+                                                        >
+                                                            <p class="m-0 p-0 font-weight-500 mr-1">En</p>
+                                                            <i className="h-100 allcentered">
+                                                                <BiChevronDown size={20} />
+                                                            </i>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            )}
+                                        {sectionproperties.logocentered == 'Not Centered' && sectionproperties.showlanuagecontainer == 'Show' && (
+                                            <div
+                                                class={langdetect == 'en' ? ' allcentered m-0 cursor-pointer ml-1 ' : ' m-0 cursor-pointer mr-1 '}
+                                                style={{ minWidth: '30px' }}
+                                                onClick={() => {
+                                                    if (langdetect == 'en') {
+                                                        setlang('ar');
                                                     } else {
-                                                        setopenmenuCanvas(true);
-                                                        setactiveTab('menu');
+                                                        setlang('en');
                                                     }
                                                 }}
                                             >
-                                                {menuactive == false && <FiMenu size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
-                                                {menuactive == true && <AiOutlineClose size={sectionproperties.resp_sidenav_size} color={sectionproperties.resp_sidenav_color} />}
-                                            </i>
-                                        </div>
+                                                {langdetect == 'en' && (
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered w-100 '}>
+                                                        <p class="m-0 p-0 d-flex align-items-center w-100">
+                                                            En{' '}
+                                                            <i class="h-100 allcentered ml-auto pl-3">
+                                                                <BsChevronDown />
+                                                            </i>
+                                                        </p>
+                                                    </div>
+                                                )}
+                                                {langdetect == 'ar' && (
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 allcentered w-100 '}>
+                                                        <p class="m-0 p-0 d-flex align-items-center w-100">
+                                                            ع{' '}
+                                                            <i class="h-100 allcentered mr-auto pr-3">
+                                                                <BsChevronDown />
+                                                            </i>
+                                                        </p>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        )}
                                     </div>
-
                                     {menuactive == true && (
                                         <div
                                             class="px-4 py-4 scrollvertical"
@@ -1206,7 +1434,7 @@ const HeaderresponsiveStyle2 = (props) => {
                                     {activeTab == 'categories' && (
                                         <div className={' row m-0 w-100 accordionContainer anim'}>
                                             {sectionproperties.subheaderParentType == 'Categories' && (
-                                                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                                <Accordion allowMultipleExpanded={false} allowZeroExpanded={true}>
                                                     {fetchCategoriesQueryContext?.data?.data?.categories.map((item, index) => {
                                                         if (item.isshowntocustomers == 1) {
                                                             return (
@@ -1267,7 +1495,7 @@ const HeaderresponsiveStyle2 = (props) => {
                                                                     </AccordionItemHeading>
                                                                     <AccordionItemPanel className="p-0">
                                                                         <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
-                                                                            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                                                            <Accordion allowMultipleExpanded={false} allowZeroExpanded={true}>
                                                                                 {Choosenindex.length != 0 &&
                                                                                     fetchCategoriesQueryContext?.data?.data?.categories[Choosenindex]?.parentcolletions?.length != 0 &&
                                                                                     fetchCategoriesQueryContext?.data?.data?.categories[Choosenindex]?.parentcolletions.map((pitem, pindex) => {
@@ -1388,7 +1616,7 @@ const HeaderresponsiveStyle2 = (props) => {
                                                 </Accordion>
                                             )}
                                             {sectionproperties.subheaderParentType == 'Parent Collections' && (
-                                                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                                <Accordion allowMultipleExpanded={false} allowZeroExpanded={true}>
                                                     {pcollarray.map((item, index) => {
                                                         if (item.isshowntocustomers == 1) {
                                                             return (