tabexseriescomponents 0.0.217 → 0.0.220

package/srcold/TabexComponents/StaticPages/Productinfo/Serviceinfotabs.jsx

@@ -0,0 +1,501 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import { AiOutlineClockCircle } from '@react-icons/all-files/ai/AiOutlineClockCircle';
+import staticroutersidenav from './staticroutersidenav.module.css';
+import { AiOutlinePlus } from '@react-icons/all-files/ai/AiOutlinePlus';
+import { AiOutlineCheck } from '@react-icons/all-files/ai/AiOutlineCheck';
+import { CircularProgress, Messaging } from 'react-cssfx-loading';
+import { CgShoppingBag } from '@react-icons/all-files/cg/CgShoppingBag';
+import { FiShoppingBag } from '@react-icons/all-files/fi/FiShoppingBag';
+import { FiShoppingCart } from '@react-icons/all-files/fi/FiShoppingCart';
+import { MdAddShoppingCart } from '@react-icons/all-files/md/MdAddShoppingCart';
+import { BsBag } from '@react-icons/all-files/bs/BsBag';
+import { IoBagHandleOutline } from '@react-icons/all-files/io5/IoBagHandleOutline';
+
+const Serviceinfotabs = (props) => {
+    const langdetect = props.actions.langdetect;
+    const lang = props.actions.lang;
+    const sectionproperties = props.actions.sectionproperties;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const productinfo_cssstyles = props.actions.productinfo_cssstyles;
+    const AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const addtocardpayloadobj = props.actions.addtocardpayloadobj;
+    const setaddtocardpayloadobj = props.actions.setaddtocardpayloadobj;
+    const addtocartfunc = props.actions.addtocartfunc;
+    const NotificationManager = props.actions.NotificationManager;
+
+    const [tabsarray, settabsarray] = useState([
+        {
+            tabname: 'Description',
+            tabname_ar: 'التفاصيل',
+            ischecked: true,
+        },
+        {
+            tabname: 'Reservation',
+            tabname_ar: 'الحجز',
+            ischecked: false,
+        },
+    ]);
+    const [currentmutatestate, setcurrentmutatestate] = useState('');
+    const [slots, setslots] = useState([]);
+
+    const TabsStyles = {
+        sidebar_item: css({
+            background: sectionproperties.tabcontainerbgcolor,
+            borderRadius: sectionproperties.tabcontainerborderradius + 'px',
+            fontSize: sectionproperties.tabtextfontsize + 'px',
+            fontWeight: sectionproperties.tabtextfontweight,
+            textTransform: sectionproperties.tabtexttexttransform,
+            color: sectionproperties.tabtextcolor,
+            ':hover': {
+                color: sectionproperties.tabtextactivecolor,
+                background: sectionproperties.activetabbgcolor,
+            },
+        }),
+        sidenav_active: css({
+            color: sectionproperties.tabtextactivecolor,
+            background: sectionproperties.activetabbgcolor,
+        }),
+        sidenavtext_active: css({
+            fontSize: sectionproperties.tabtextfontsize + 'px',
+            color: sectionproperties.tabtextactivecolor,
+            background: sectionproperties.activetabbgcolor,
+        }),
+        booknow_btn: css({
+            width: sectionproperties.generalbtn_width + 'px',
+            height: sectionproperties.generalbtn_height + 'px',
+            background: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
+            borderRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            color: sectionproperties.generalbtn_textColor,
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            textTransform: sectionproperties.generalbtn_texttransform,
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+                // opacity: sectionproperties.favbtn_opacityonhover,
+            },
+        }),
+        booknow_btn_resp: css({
+            width: '30px',
+            height: '30px',
+            background: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
+            borderRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            color: sectionproperties.generalbtn_textColor,
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            textTransform: sectionproperties.generalbtn_texttransform,
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+                // opacity: sectionproperties.favbtn_opacityonhover,
+            },
+        }),
+        booknow_btn_disabled: css({
+            opacity: 0.3,
+        }),
+        timeLabel: css({
+            color: sectionproperties.time_laelColor,
+            fontWeight: sectionproperties.time_labelFonweight,
+            fontSize: sectionproperties.time_labelFontsize + 'px',
+        }),
+        time: css({
+            color: sectionproperties.time_timeColor,
+            fontWeight: sectionproperties.time_timeFontweight,
+            fontSize: sectionproperties.time_timeFontsize + 'px',
+        }),
+        inputfield_label: css({
+            color: sectionproperties.form_labelcolor,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            textTransform: sectionproperties.form_labeltexttransform,
+        }),
+        inputfield: css({
+            height: '40px',
+            borderRadius: sectionproperties.inputfieldborderradius + 'px',
+            fontSize: sectionproperties.inputfieldfontsize + 'px',
+            color: sectionproperties.inputfieldcolor,
+            backgroundColor: sectionproperties.input_bgcolor,
+            border: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
+        }),
+    };
+
+    useEffect(() => {
+        setaddtocardpayloadobj({ ...addtocardpayloadobj, item_type: 'service' });
+    }, [tabsarray]);
+    useEffect(() => {
+        const date1 = new Date(addtocardpayloadobj.from);
+        const date2 = new Date(addtocardpayloadobj.to);
+        const diffTime = Math.abs(date2 - date1);
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+        if (diffDays.toString() != 'NaN') {
+            if (date2 <= date1) {
+                NotificationManager.warning('', 'Please choose another date.');
+                setaddtocardpayloadobj({ ...addtocardpayloadobj, quantity: 0 });
+            } else {
+                if (fetchProductInfoQueryContext.data.data.productinfo.maximumproductquant >= diffDays && fetchProductInfoQueryContext.data.data.productinfo.minimumproductquant <= diffDays) {
+                    setaddtocardpayloadobj({ ...addtocardpayloadobj, quantity: diffDays });
+                } else {
+                    setaddtocardpayloadobj({ ...addtocardpayloadobj, quantity: 0 });
+                    NotificationManager.warning(
+                        '',
+                        'Max: ' + fetchProductInfoQueryContext.data.data.productinfo.maximumproductquant + ', Min: ' + fetchProductInfoQueryContext.data.data.productinfo.minimumproductquant,
+                    );
+                }
+            }
+        }
+    }, [addtocardpayloadobj.from, addtocardpayloadobj.to]);
+    const showaddtocartbuttonbutton = () => {
+        var showbutton = false;
+        if (fetchProductInfoQueryContext?.data?.data?.productinfo?.serviceinfo?.scheduletype == 'days') {
+            if (addtocardpayloadobj.from.length != 0 && addtocardpayloadobj.to.length != 0 && addtocardpayloadobj.quantity != 0) {
+                showbutton = true;
+            }
+        } else if (fetchProductInfoQueryContext?.data?.data?.productinfo?.serviceinfo?.scheduletype == 'minutes') {
+            if (addtocardpayloadobj.date.length != 0 && addtocardpayloadobj.time.length != 0) {
+                showbutton = true;
+            }
+        }
+        return showbutton;
+    };
+    const [showMore, setShowMore] = useState(false);
+
+    return (
+        <div className="col-lg-12 p-0 mt-3">
+            <div class="row ml-0 mr-0 w-100">
+                <div class={staticroutersidenav.horizontal_nav_menu + ' col-lg-12 d-flex justify-content-start p-0 '}>
+                    <div class={langdetect == 'en' ? ' row m-0 w-100 justify-content-start pr-3 pr-md-0 ml-4 ml-md-0 ' : ' row m-0 w-100 justify-content-start pl-3 pl-md-0 mr-4 mr-md-0 '}>
+                        {tabsarray.map((item, index) => {
+                            var activeclass = '';
+                            if (item.ischecked) {
+                                activeclass = TabsStyles.sidenav_active;
+                            }
+                            return (
+                                <div
+                                    onClick={() => {
+                                        var temparray = [...tabsarray];
+                                        temparray[0].ischecked = false;
+                                        temparray[1].ischecked = false;
+
+                                        temparray[index].ischecked = true;
+                                        settabsarray([...temparray]);
+                                    }}
+                                    class={`${staticroutersidenav.sidebar_item} ${TabsStyles.sidebar_item} ${activeclass} ` + ' allcentered cursor-pointer '}
+                                    style={{ height: '45px' }}
+                                >
+                                    <p class={' p-0 allcentered mt-auto mb-auto text-uppercase wordbreak-noellipsis '}>{langdetect == 'en' ? item.tabname : item.tabname_ar}</p>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+                <div class="col-lg-12 p-0">
+                    <hr class={langdetect == 'en' ? 'p-0 m-0 ml-4 ml-md-0' : 'p-0 m-0 mr-4 mr-md-0'} />
+                </div>
+                {tabsarray[0].ischecked && (
+                    <div class="col-lg-12 p-4">
+                        {langdetect == 'en' &&
+                            fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en != '' &&
+                            fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en != null && (
+                                <div
+                                    class={langdetect === 'en' ? 'col-lg-12 p-0 pl-4 pl-md-0 mb-5 d-flex justify-content-center' : 'col-lg-12 p-0 pr-4 pr-0 mb-5 d-flex justify-content-center'}
+                                    style={{ minHeight: '15vh' }}
+                                >
+                                    <div class="row m-0 w-100 d-flex flex-column">
+                                        <p
+                                            class={'text-black text-capitalize m-0 p-0 wordbreak'}
+                                            style={{ textAlign: langdetect == 'en' ? 'left' : 'right' }}
+                                            dangerouslySetInnerHTML={{
+                                                __html:
+                                                    showMore == true
+                                                        ? fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en
+                                                        : fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en.slice(0, 1000),
+                                            }}
+                                        ></p>
+                                        {fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en.length > 1000 && (
+                                            <p class="m-0 p-0 cursor-pointer text-grey font-weight-600 ml-2 mr-2" onClick={() => setShowMore(!showMore)}>
+                                                {showMore ? lang.showless : lang.showmore}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+                        {langdetect == 'ar' &&
+                            fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar != '' &&
+                            fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar != null && (
+                                <div class="col-lg-12 p-0 mb-5 d-flex justify-content-center" style={{ minHeight: '15vh' }}>
+                                    <div class="row m-0 w-100 d-flex flex-column">
+                                        <div class="col-lg-12 p-0 d-flex justify-content-start flex-column">
+                                            <p
+                                                class={'text-black text-capitalize m-0 p-0 wordbreak'}
+                                                style={{ textAlign: langdetect == 'en' ? 'left' : 'right' }}
+                                                dangerouslySetInnerHTML={{
+                                                    __html:
+                                                        showMore == true
+                                                            ? fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar
+                                                            : fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar.slice(0, 1000) + '...',
+                                                }}
+                                            ></p>
+                                            {fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar.length > 1000 && (
+                                                <p class="m-0 p-0 cursor-pointer text-grey font-weight-600" onClick={() => setShowMore(!showMore)}>
+                                                    {showMore ? lang.showless : lang.showmore}
+                                                </p>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                    </div>
+                )}
+                {tabsarray[1].ischecked && (
+                    <div class="col-lg-12 pl-5 pr-5 pt-3 pb-0 pl-sm-3 pr-sm-3">
+                        <div class="row m-0 allcentered w-100">
+                            {/* <div class="col-lg-4 col-md-6 col-sm-12 mb-2 p-0">
+                                <div class="row m-0 w-100">
+                                    <div class="col-lg-12 p-0">
+                                        <p class={TabsStyles.inputfield_label}>{lang.servicename}:</p>
+                                    </div>
+                                    <div class="col-lg-12">
+                                        <p class={TabsStyles.inputfield + ' w-100 allcentered m-0 p-0 '}>
+                                            {langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div> */}
+                            {fetchProductInfoQueryContext?.data?.data?.productinfo?.serviceinfo?.scheduletype == 'days' && (
+                                <>
+                                    <div class="col-lg-12 col-md-12 col-sm-12 mb-2 p-0">
+                                        <div class="row m-0 w-100">
+                                            <div class="col-lg-12 d-flex justify-content-start p-0">
+                                                <p class={TabsStyles.inputfield_label + ' m-0 pb-2 '}>{langdetect == 'en' ? 'From' : 'من'}:</p>
+                                            </div>
+                                            <div class="col-lg-12 p-0 mb-3">
+                                                <input
+                                                    type="date"
+                                                    class={TabsStyles.inputfield + ' w-100 allcentered pl-1 pr-1 '}
+                                                    min={fetchProductInfoQueryContext?.data?.data?.productinfo?.serviceinfo?.reservationstarts}
+                                                    max={fetchProductInfoQueryContext?.data?.data?.productinfo?.serviceinfo?.reservationends}
+                                                    onChange={(event) => {
+                                                        setaddtocardpayloadobj({ ...addtocardpayloadobj, from: event.target.value });
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-12 col-md-12 col-sm-12 mb-2 p-0">
+                                        <div class="row m-0 w-100">
+                                            <div class="col-lg-12 d-flex justify-content-start p-0">
+                                                <p class={TabsStyles.inputfield_label + ' m-0 pb-2 '}>{langdetect == 'en' ? 'To' : 'إلى'}:</p>
+                                            </div>
+                                            <div class="col-lg-12 p-0 mb-3">
+                                                <input
+                                                    type="date"
+                                                    class={TabsStyles.inputfield + ' w-100 allcentered pl-1 pr-1 '}
+                                                    min={fetchProductInfoQueryContext.data.data.productinfo.serviceinfo.reservationstarts}
+                                                    max={fetchProductInfoQueryContext.data.data.productinfo.serviceinfo.reservationends}
+                                                    onChange={(event) => {
+                                                        setaddtocardpayloadobj({ ...addtocardpayloadobj, to: event.target.value });
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            )}
+                            {fetchProductInfoQueryContext?.data?.data?.productinfo?.serviceinfo?.scheduletype == 'minutes' && (
+                                <>
+                                    <div class="col-lg-12 col-md-12 col-sm-12 mb-2 p-0">
+                                        <div class="row m-0 w-100">
+                                            <div class="col-lg-12 d-flex justify-content-start p-0">
+                                                <p class={TabsStyles.inputfield_label + ' m-0 pb-2 '}>{lang.reservationdate}:</p>
+                                            </div>
+                                            <div class="col-lg-12 p-0 mb-3">
+                                                <input
+                                                    type="date"
+                                                    class={TabsStyles.inputfield + ' w-100 allcentered pl-1 pr-1 '}
+                                                    min={fetchProductInfoQueryContext.data.data.productinfo.serviceinfo.reservationstarts}
+                                                    max={fetchProductInfoQueryContext.data.data.productinfo.serviceinfo.reservationends}
+                                                    onChange={(event) => {
+                                                        setaddtocardpayloadobj({ ...addtocardpayloadobj, date: event.target.value });
+                                                        setcurrentmutatestate('/fetchserviceslots');
+                                                        GeneralAPIMutationContext.mutate({
+                                                            endpointurl: '/fetchserviceslots',
+                                                            productid: fetchProductInfoQueryContext.data.data.productinfo.productid,
+                                                            reqdate: event.target.value,
+                                                            mutateSuccesscallback: (data, variables) => {
+                                                                setslots(data.data.slots);
+                                                            },
+                                                        });
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="col-lg-12 p-0">
+                                        <p class={TabsStyles.timeLabel + ' p-0 d-flex justify-content-start m-0 '}>{lang.reservationtime}:</p>
+
+                                        {GeneralAPIMutationContext.isLoading && GeneralAPIMutationContext.variables.endpointurl == '/fetchserviceslots' && (
+                                            <>
+                                                <div className={'row ml-0 mr-0 w-100 allcentered'} style={{ height: 200 }}>
+                                                    <Messaging color="#ccc" width="10px" height="10px" duration="1s" />
+                                                </div>
+                                            </>
+                                        )}
+                                        {slots.map(function (item, index) {
+                                            var ischoosed = false;
+                                            if (item.slot == addtocardpayloadobj.time) {
+                                                ischoosed = true;
+                                            }
+                                            return (
+                                                <>
+                                                    <div class="row m-0 mb-2 d-flex align-items-center w-100">
+                                                        <div class={TabsStyles.time + ' col-lg-6 col-md-6 col-sm-9  p-0 d-flex justify-content-start align-items-center '}>
+                                                            <AiOutlineClockCircle class="ml-1 mr-1" />
+                                                            <p class="p-0 m-0">{item.slot}</p>
+                                                        </div>
+                                                        {item.available && (
+                                                            <>
+                                                                <div class="col-lg-6 col-md-6 col-sm-12  p-0 d-flex d-sm-none justify-content-end justify-content-sm-center align-items-center">
+                                                                    <button
+                                                                        class={TabsStyles.booknow_btn + ' allcentered mt-sm-3 '}
+                                                                        style={{ backgroundColor: ischoosed ? 'green' : '' }}
+                                                                        onClick={() => {
+                                                                            setaddtocardpayloadobj({ ...addtocardpayloadobj, time: item.slot });
+                                                                        }}
+                                                                    >
+                                                                        <span>{langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}</span>
+                                                                    </button>
+                                                                </div>
+
+                                                                <div class="col-sm-3 p-0 d-none d-sm-flex justify-content-end justify-content-sm-center align-items-sm-center">
+                                                                    <button
+                                                                        class={TabsStyles.booknow_btn_resp + ' allcentered  '}
+                                                                        onClick={() => {
+                                                                            setaddtocardpayloadobj({ ...addtocardpayloadobj, time: item.slot });
+                                                                        }}
+                                                                    >
+                                                                        <span className="allcentered">
+                                                                            <AiOutlinePlus />
+                                                                        </span>
+                                                                    </button>
+                                                                </div>
+                                                            </>
+                                                        )}
+                                                        {!item.available && (
+                                                            <>
+                                                                <div class="col-lg-6 col-md-6 col-sm-9  p-0 d-flex d-sm-none justify-content-end justify-content-sm-center align-items-center">
+                                                                    <button
+                                                                        class={TabsStyles.booknow_btn + ' allcentered mt-sm-3 '}
+                                                                        style={{
+                                                                            opacity: 0.5,
+                                                                            cursor: 'not-allowed',
+                                                                        }}
+                                                                    >
+                                                                        <span>{langdetect == 'en' ? sectionproperties.generalbtn_bookedcontent : sectionproperties.generalbtn_bookedcontent_ar}</span>
+                                                                    </button>
+                                                                </div>
+                                                                <div class="col-sm-3 p-0 d-none d-sm-flex justify-content-end justify-content-sm-center align-items-center">
+                                                                    <button
+                                                                        class={TabsStyles.booknow_btn_resp + ' allcentered '}
+                                                                        style={{
+                                                                            opacity: 0.5,
+                                                                            cursor: 'not-allowed',
+                                                                        }}
+                                                                    >
+                                                                        <span class="allcentered">
+                                                                            <AiOutlineCheck />
+                                                                        </span>
+                                                                    </button>
+                                                                </div>
+                                                            </>
+                                                        )}
+                                                    </div>
+                                                    <div class="col-lg-12 p-0">
+                                                        <hr class="m-0 mb-3 mt-3" />
+                                                    </div>
+                                                </>
+                                            );
+                                        })}
+                                    </div>
+                                </>
+                            )}
+                            <div className="col-lg-12 p-0 mb-3">
+                                <div className="row m-0 w-100">
+                                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.serviceinfo?.scheduletype == 'days' && (
+                                        <div className="col-lg-12 p-0 mb-2 d-flex justofy-content-start">
+                                            <p
+                                                className="m-0 p-0"
+                                                style={{
+                                                    color: sectionproperties.quantitytitlecolor,
+                                                    fontSize: sectionproperties.quantitytitlefontSize + 'px',
+                                                    fontWeight: sectionproperties.quantitytitlefontweight,
+                                                }}
+                                            >
+                                                {lang.quantity}:{' '}
+                                                <span
+                                                    style={{
+                                                        color: sectionproperties.quantitybtn_textcolor,
+                                                        fontSize: sectionproperties.quantitybtn_textfontsize + 'px',
+                                                        fontWeight: sectionproperties.quantitybtn_textfontweight,
+                                                    }}
+                                                >
+                                                    {addtocardpayloadobj.quantity}
+                                                </span>
+                                            </p>
+                                        </div>
+                                    )}
+                                    {showaddtocartbuttonbutton() && (
+                                        <div class="col-lg-12 allcentered">
+                                            <button
+                                                className={`${productinfo_cssstyles.cart_btn} ` + ' ml-1 mr-1 d-flex align-items-center justify-content-center ml-sm-auto mr-sm-auto mb-sm-2 '}
+                                                onClick={() => {
+                                                    addtocartfunc();
+                                                }}
+                                                disabled={AddtoCartMutationContext.isLoading == true ? true : false}
+                                            >
+                                                {!AddtoCartMutationContext.isLoading && (
+                                                    <span className={' d-flex align-items-center justify-content-center '}>
+                                                        {sectionproperties.cartBtn_iconFontSize != 0 && (
+                                                            <i
+                                                                className={
+                                                                    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'
+                                                                }
+                                                            >
+                                                                {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                                                {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                                                {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                                                {sectionproperties.carticonstyle == 'Shopping bag 4' && (
+                                                                    <IoBagHandleOutline className="" size={sectionproperties.cartBtn_iconFontSize} />
+                                                                )}
+                                                                {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                                                {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdAddShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
+                                                            </i>
+                                                        )}
+                                                        {langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic}
+                                                    </span>
+                                                )}
+                                                {AddtoCartMutationContext.isLoading && (
+                                                    <div className={' d-flex align-items-center justify-content-center '}>
+                                                        <CircularProgress color="white" width="20px" height="20px" duration="1s" />
+                                                    </div>
+                                                )}
+                                            </button>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+export default Serviceinfotabs;

package/srcold/TabexComponents/StaticPages/Productinfo/staticroutersidenav.module.css

@@ -0,0 +1,145 @@
+/* Side Nav */
+.vertical_nav_menu {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    list-style: none;
+    transition: 0.3s ease-in-out;
+    border-radius: 20px;
+}
+.vertical_nav_menu li.sidebar_item {
+    transition: 0.3s !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: row;
+    padding: 5px !important;
+    position: relative;
+}
+.vertical_nav_menu .sidebar_item::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    display: block;
+    border-radius: 100px 0 100px 0;
+    width: 0;
+    height: 0;
+    transition: 0.2s !important;
+}
+.vertical_nav_menu .sidenav_page_name {
+    transition: 0.3s;
+}
+.vertical_nav_menu li .sidenav_icon_cont {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    transition: all 0.3s;
+    position: relative;
+}
+.vertical_nav_menu i.metismenu_icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #022648;
+    transition: 0.3s;
+    opacity: 1;
+    font-size: 16px;
+}
+/* active */
+.vertical_nav_menu .sidenav_active::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    /* right: -5%; */
+    display: block;
+    border-radius: 100px 0 100px 0;
+    width: 10px;
+    height: 100%;
+    /* background: red !important; */
+}
+.vertical_nav_menu .sidenav_active .sidenav_page_name {
+    font-weight: 600;
+}
+.vertical_nav_menu .sidenav_active .sidenav_icon_cont {
+    /* background-color: rgba(249, 128, 100) !important; */
+    box-shadow: none !important;
+}
+/* hover */
+.vertical_nav_menu .sidebar_item:hover {
+    cursor: pointer;
+    transition: 0.3s;
+}
+.vertical_nav_menu .sidebar_item:hover::after {
+    width: 10px;
+    height: 100%;
+}
+
+.horizontal_nav_menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.horizontal_nav_menu .sidebar_item {
+    transition: 0.3s !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+    width: 180px !important;
+}
+@media screen and (max-width: 800px) {
+    .horizontal_nav_menu {
+        width: 100%;
+        display: block !important;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+    .sidebar_item {
+        width: 30% !important;
+        float: none;
+        display: inline-block;
+        zoom: 1;
+    }
+}
+@media screen and (max-width: 700px) {
+    .horizontal_nav_menu {
+        width: 100%;
+        display: block !important;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+    .sidebar_item {
+        min-width: 40% !important;
+    }
+}
+@media screen and (max-width: 500px) {
+    .horizontal_nav_menu {
+        width: 100%;
+        display: block !important;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+    .sidebar_item {
+        max-width: 40% !important;
+    }
+}
+
+.sidebar_itemlastchild {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+}
+.ss{
+    
+}