tabexseriescomponents 0.0.656 → 0.0.657

package/src22-1/TabexComponents/StaticPages/Productinfo/Productinfo.jsx

@@ -1,1729 +0,0 @@
-//productidprops
-import React, { useEffect, useState } from 'react';
-import { Messaging } from 'react-cssfx-loading';
-import { css } from 'glamor';
-import Product_itemtype from './Product_itemtype.jsx';
-import Service_itemtype from './Service_itemtype.jsx';
-import '../../../styles/staticpages/image-gallery.css';
-import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
-import { Box, Tab, Tabs } from '@mui/material';
-import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
-import { HiOutlinePhone } from '@react-icons/all-files/hi/HiOutlinePhone';
-import { AiOutlineMail } from '@react-icons/all-files/ai/AiOutlineMail';
-import { FaShippingFast } from '@react-icons/all-files/fa/FaShippingFast';
-import { RiSecurePaymentLine } from '@react-icons/all-files/ri/RiSecurePaymentLine';
-import ProductReviews from './ProductReviews.jsx';
-import DescriptionContent from './DescriptionContent.jsx';
-import ReactPlayer from 'react-player';
-
-const Productinfo = (props) => {
-    const srcfromprops = props.actions.srcfromprops;
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const templatepropcontext = props.actions.templatepropcontext;
-    const routingcountext = props.actions.routingcountext;
-    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
-    const TabexSectionsComponentsContext = props.actions.TabexSectionsComponentsContext;
-    const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
-    const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
-    const serverbaselink = props.actions.serverbaselink;
-    const AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
-    const ProductIdProdutInfoModalContext = props.actions.ProductIdProdutInfoModalContext;
-    const AddtoCartContext = props.actions.AddtoCartContext;
-    const addtofavoritescontext = props.actions.addtofavoritescontext;
-    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
-    const fetchproductinfoObjContext = props.actions.fetchproductinfoObjContext;
-    const setfetchproductinfoObjContext = props.actions.setfetchproductinfoObjContext;
-    const pageindexcontext = props.actions.pageindexcontext;
-    const setpageindexcontext = props.actions.setpageindexcontext;
-    const authdetailsContext = props.actions.authdetailsContext;
-    const ikimagecredcontext = props.actions.ikimagecredcontext;
-
-    const actions = props.actions;
-    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
-    const setCurrentPageIdContext = props.actions.setCurrentPageIdContext;
-    const NotificationManager = props.actions.NotificationManager;
-    const productidparam = props.productidparam;
-    const [sectionproperties, setsectionproperties] = useState('');
-    const [CurrentPageId, setCurrentPageId] = useState('');
-    const [RelatedProductsTagid, setRelatedProductsTagid] = useState('');
-    const [ProductInfoObj, setProductInfoObj] = useState({});
-    const [filterproductreviews, setfilterproductreviews] = useState('all');
-    const [productreviews, setproductreviews] = useState([]);
-    const [Relatedproducts, setRelatedproducts] = useState([]);
-    const [productimagesarray, setproductimagesarray] = useState([]);
-    const [quantityconditionfoundobj, setquantityconditionfoundobj] = useState(null);
-    const [addtocardpayloadobj, setaddtocardpayloadobj] = useState({
-        functype: 'add',
-        item_type: 'product',
-        productid: '',
-        variantid: '',
-        quantity: 1,
-        date: '',
-        time: '',
-        from: '',
-        to: '',
-        extrafields: [],
-    });
-    const [variantindexcompleted, setvariantindexcompleted] = useState('');
-    const [variantindex, setvariantindex] = useState('');
-    const [isloaded, setisloaded] = useState(false);
-    const [showMore, setShowMore] = useState(false);
-    const [currentshowingimageindex, setcurrentshowingimageindex] = useState(0);
-    const [tabIndex, setTabIndex] = useState('');
-    const [tabname, settabname] = useState('');
-    const [productVideos, setproductVideos] = useState([]);
-
-    const handleTabChange = (event, newTabIndex) => {
-        setTabIndex(newTabIndex);
-    };
-    useEffect(() => {
-        if (Object.keys(StatePagePropertiesContext).length != 0) {
-            var secpropobj = {};
-            StatePagePropertiesContext.pageobj != undefined &&
-                StatePagePropertiesContext.pageobj.pageproperties != undefined &&
-                StatePagePropertiesContext.pageobj.pageproperties.forEach(function (arrayItem, arrayindex) {
-                    secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
-                });
-
-            setsectionproperties({ ...secpropobj });
-            setTabIndex(0);
-            settabname('descriptiontab');
-            if (sectionproperties.prodCatShow == 'Hide' || sectionproperties.descriptionposition != 'Bottom') {
-                settabname('shippingpolicytab');
-            }
-        }
-    }, [StatePagePropertiesContext]);
-    useEffect(() => {
-        if (fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos?.length != 0) {
-            if (Array.isArray(fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos)) {
-                var temparr = [...fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos];
-                temparr.forEach(function (item) {
-                    item.linkclicked = false;
-                });
-                setproductVideos([...temparr]);
-            }
-        }
-    }, [fetchProductInfoQueryContext.isSuccess, fetchProductInfoQueryContext.data]);
-    useEffect(() => {
-        var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '6218bccb810ae');
-
-        if (cartindex >= 0) {
-            setpageindexcontext(cartindex);
-            setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
-            if (props.srcfromprops != 'templatedraftrouter') {
-                setCurrentPageIdContext(templatepropcontext.pagesnprop[cartindex].pageid);
-            }
-        }
-    }, []);
-    useEffect(() => {
-        var secpropobj = {};
-        templatepropcontext?.pagesnprop[pageindexcontext]?.pageproperties?.forEach(function (arrayItem, arrayindex) {
-            secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
-        });
-        setsectionproperties({ ...secpropobj });
-    }, [pageindexcontext]);
-    useEffect(() => {
-        if (productidparam == undefined) {
-            productidassigner(ProductIdProdutInfoModalContext);
-        } else {
-            productidassigner(productidparam);
-        }
-    }, []);
-    useEffect(() => {
-        if (fetchProductInfoQueryContext.isSuccess) {
-            setProductInfoObj(fetchProductInfoQueryContext.data);
-        }
-    }, [fetchProductInfoQueryContext.isSuccess, fetchProductInfoQueryContext.data]);
-    useEffect(() => {
-        if (Object.keys(ProductInfoObj).length != 0 && !isloaded) {
-            variantchecker();
-        }
-    }, [ProductInfoObj, isloaded]);
-    const productidassigner = (productid) => {
-        var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
-        tempFetchQueriesEngineContext.fetchproductinfo = true;
-        setFetchQueriesEngineContext({ ...tempFetchQueriesEngineContext });
-        var tempfetchproductinfoObjContext = { ...fetchproductinfoObjContext };
-
-        tempfetchproductinfoObjContext.productid = productid;
-        setfetchproductinfoObjContext({ ...tempfetchproductinfoObjContext });
-    };
-    useEffect(() => {
-        if (!fetchProductInfoQueryContext.isFetching && fetchProductInfoQueryContext.isSuccess && ikimagecredcontext != undefined) {
-            if (fetchProductInfoQueryContext.data.data.productinfo != null) {
-                var tempproductimagesarray = [];
-                if (Array.isArray(fetchProductInfoQueryContext.data.data.productinfo.productimages)) {
-                    fetchProductInfoQueryContext.data.data.productinfo.productimages.forEach(function (arrayItem, arrayindex) {
-                        var imagepath = arrayItem.path;
-                        if (imagepath.includes('https')) {
-                            let position = imagepath.search('https');
-                            let result = imagepath.slice(position);
-                            var productimagesarrayobj = {
-                                thumbnail: arrayItem.path,
-                                original: arrayItem.path,
-                                galleryid: arrayItem.galleryid,
-                            };
-                        } else {
-                            var productimagesarrayobj = {
-                                thumbnail: ikimagecredcontext?.ikimageendpoint + '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + arrayItem.path,
-                                original: ikimagecredcontext?.ikimageendpoint + '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + arrayItem.path,
-                                galleryid: arrayItem.galleryid,
-                                // description:
-                                //     //    { dangerouslySetInnerHTML={{
-                                //     //         __html:
-                                //     //                  fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en,
-                                //     //     }}}
-                                //     langdetect == 'en' ? fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en : fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar,
-                            };
-                        }
-
-                        tempproductimagesarray.push(productimagesarrayobj);
-                    });
-                }
-                setproductimagesarray([...tempproductimagesarray]);
-                variantchecker();
-                var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
-                tempaddtocardpayloadobj.productid = fetchProductInfoQueryContext.data.data.productinfo.productid;
-                setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
-                setRelatedProductsTagid(fetchProductInfoQueryContext.data.data.productinfo.maintagid);
-                if (fetchProductInfoQueryContext?.data?.data?.productinfo?.maintagid != null && fetchProductInfoQueryContext?.data?.data?.productinfo?.maintagid?.length != 0) {
-                    GeneralAPIMutationContext.mutate({
-                        endpointurl: '/FetchRelatedProducts',
-                        tagid: fetchProductInfoQueryContext.data.data.productinfo.maintagid,
-                        mutateSuccesscallback: (data, variables) => {
-                            if (data.data.status) {
-                                setRelatedproducts(data.data.productsrelated);
-                            } else {
-                                // NotificationManager.warning('', data.data.reason);
-                            }
-                        },
-                    });
-                }
-            }
-        }
-    }, [fetchProductInfoQueryContext.isSuccess, fetchProductInfoQueryContext.data, ikimagecredcontext]);
-    const clearchoosenvaluesbutkeepcurrentvalue = (optionindex, optionvaluesitem, optionvaluesindex) => {
-        var productarr = ProductInfoObj;
-        productarr?.data?.productinfo?.productoptions?.forEach(function (item, index) {
-            item.isselected = 0;
-            item?.optionvalues?.forEach(function (valueitem, valueindex) {
-                valueitem.isselected = 0;
-            });
-        });
-
-        selectproductoptionvalue(optionindex, optionvaluesitem, optionvaluesindex, productarr);
-    };
-    const selectproductoptionvalue = (optionindex, optionvaluesitem, optionvaluesindex, productarrtobepassed) => {
-        if (productarrtobepassed == undefined || productarrtobepassed == null) {
-            var productarr = ProductInfoObj;
-        } else {
-            var productarr = productarrtobepassed;
-        }
-
-        var isselected = productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected;
-        if (isselected == 1) {
-            productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected = 0;
-        } else {
-            productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected = 1;
-        }
-        productarr.data.productinfo.productoptions[optionindex].optionvalues.forEach(function (arrayItem, arrayindex) {
-            if (optionvaluesindex != arrayindex) {
-                arrayItem.isselected = 0;
-            }
-        });
-        variantchecker();
-        variantcompleting();
-        setProductInfoObj({ ...productarr });
-    };
-    const variantchecker = () => {
-        var productarr = ProductInfoObj;
-        if (Object.keys(productarr).length != 0) {
-            if (productarr?.data?.productinfo?.hasvariants == 1) {
-                var selectedoptionsvalues = [];
-                var variantsaccessible = [];
-                productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
-                    productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                        if (ProductOptionValuesitem.isselected == 1) {
-                            selectedoptionsvalues.push(ProductOptionValuesitem);
-                        }
-                    });
-                });
-                if (selectedoptionsvalues.length == 0) {
-                    productarr.data.productinfo.variants.forEach(function (ProductVariantItem, ProductVariantIndex) {
-                        ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
-                            productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
-                                productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                                    if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
-                                        ProductOptionValuesitem.isenabled = 1;
-                                    }
-                                });
-                            });
-                        });
-                    });
-                } else {
-                    productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
-                        productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                            ProductOptionValuesitem.isenabled = 0;
-                        });
-                    });
-
-                    productarr.data.productinfo.variants.forEach(function (ProductVariantItem, ProductVariantIndex) {
-                        var variantcommonvalues = [];
-                        ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
-                            selectedoptionsvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                                if (ProductOptionValuesitem.optionid == varinatoptionitem.optionid) {
-                                    variantcommonvalues.push(varinatoptionitem);
-                                }
-                            });
-                        });
-
-                        var addvariantcount = [];
-                        var addvariant = false;
-                        selectedoptionsvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                            addvariant = false;
-                            variantcommonvalues.forEach(function (varinatoptionitem, variantoptionindex) {
-                                if (ProductOptionValuesitem.optionid == varinatoptionitem.optionid) {
-                                    if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
-                                        addvariant = true;
-                                    } else {
-                                        addvariantcount.push(varinatoptionitem);
-                                    }
-                                }
-                            });
-                        });
-                        if (addvariant && addvariantcount.length == 0) {
-                            variantsaccessible.push(ProductVariantItem);
-                        }
-                    });
-
-                    variantsaccessible.forEach(function (ProductVariantItem, ProductVariantIndex) {
-                        ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
-                            productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
-                                productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                                    if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
-                                        ProductOptionValuesitem.isenabled = 1;
-                                    }
-                                });
-                            });
-                        });
-                    });
-                }
-                // queryClient.setQueryData('fetchProductInfo_API' + JSON.stringify(fetchproductinfoObjContext), productarr);
-                setProductInfoObj({ ...productarr });
-                setisloaded(true);
-            }
-        }
-    };
-    const variantcompleting = () => {
-        setvariantindexcompleted('');
-        var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
-        tempaddtocardpayloadobj.variantid = '';
-        setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
-        var productarr = ProductInfoObj;
-        var selectedoptionsvalues = [];
-
-        productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
-            productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                if (ProductOptionValuesitem.isselected == 1) {
-                    selectedoptionsvalues.push(ProductOptionValuesitem);
-                }
-            });
-        });
-        productarr.data.productinfo.variants.forEach(function (ProductVariantItem, ProductVariantIndex) {
-            var isvariant = false;
-            var variantnotmatch = [];
-            if (selectedoptionsvalues.length == ProductVariantItem.variantoptions.length) {
-                isvariant = true;
-                ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
-                    selectedoptionsvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
-                        if (ProductOptionValuesitem.optionid == varinatoptionitem.optionid) {
-                            if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
-                            } else {
-                                variantnotmatch.push('s');
-                            }
-                        }
-                    });
-                });
-            }
-            if (variantnotmatch.length == 0 && isvariant == true) {
-                var variantobj = fetchProductInfoQueryContext.data.data.productinfo.variants[ProductVariantIndex];
-
-                var variantid = '';
-                if (variantobj == undefined) {
-                    NotificationManager.warning('', 'Variant Not Found');
-                } else {
-                    variantid = variantobj.variantid;
-                    var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
-
-                    tempaddtocardpayloadobj.variantid = variantid;
-                    var variantimageindex = 0;
-                    productimagesarray?.forEach(function (tempimageitem, tempimageindex) {
-                        if (tempimageitem.galleryid == variantobj?.variantgalleryid) {
-                            variantimageindex = tempimageindex;
-                        }
-                    });
-                    setcurrentshowingimageindex(variantimageindex);
-                    setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
-                    setvariantindexcompleted(ProductVariantIndex);
-                    setvariantindex(ProductVariantIndex);
-                }
-            }
-        });
-        // queryClient.setQueryData('fetchProductInfo_API' + JSON.stringify(fetchproductinfoObjContext), productarr);
-        setProductInfoObj({ ...productarr });
-    };
-    const addtocartfunc = () => {
-        var runfunc = false;
-        if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {
-            if (fetchProductInfoQueryContext?.data?.data?.productinfo?.hasvariants == 1) {
-                if (addtocardpayloadobj.variantid.length != 0) {
-                    runfunc = true;
-                } else {
-                    NotificationManager.warning('', 'Please Choose Product Options');
-                }
-            } else {
-                runfunc = true;
-            }
-        } else {
-            NotificationManager.warning('', 'Please Choose Quantity');
-        }
-
-        if (runfunc == true) {
-            var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
-            tempaddtocardpayloadobj.isproductforcedtocheckout = fetchProductInfoQueryContext?.data?.data?.productinfo?.isproductforcedtocheckout;
-            tempaddtocardpayloadobj.vendorid = fetchProductInfoQueryContext?.data?.data?.productinfo?.vendorproviderid;
-            var Extrafieldvalidationresponse = validateextrafields();
-            if (Extrafieldvalidationresponse.status) {
-                AddtoCartContext(tempaddtocardpayloadobj);
-            } else {
-                // NotificationManager.warning('', Extrafieldvalidationresponse.reason);
-            }
-        }
-    };
-    const validateextrafields = () => {
-        var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
-        var status = false;
-        var reason = '';
-        var missingitemsfound = [];
-        var extrafields = fetchProductInfoQueryContext?.data?.data?.productinfo?.productextrafields;
-        if (extrafields?.length == 0) {
-            status = true;
-        } else {
-            extrafields.forEach(function (item, index) {
-                if (item.isrequired == 1) {
-                    var itemfound = null;
-                    tempaddtocardpayloadobj?.extrafields?.forEach(function (cchoosenitemvalue) {
-                        if (cchoosenitemvalue.id == item.id) {
-                            itemfound = cchoosenitemvalue;
-                        }
-                    });
-                    if (itemfound == null) {
-                        missingitemsfound.push(item);
-                    } else {
-                        if (itemfound?.value?.length == 0) {
-                            missingitemsfound.push(item);
-                        }
-                    }
-                }
-            });
-        }
-        if (missingitemsfound.length == 0) {
-            status = true;
-        } else {
-            status = false;
-            reason = 'Missing items';
-            missingitemsfound.forEach(function (missingitem) {
-                var notftitle = langdetect == 'en' ? missingitem.title_en : missingitem.title_ar;
-                NotificationManager.warning('', langdetect == 'en' ? 'Please Choose ' + notftitle : 'من فضلك اختر' + notftitle);
-            });
-        }
-        return { status: status, reason: reason };
-    };
-    const returnpolicyobj = (policytype) => {
-        var policyobj = {};
-        authdetailsContext?.instinfo?.instpolicies?.forEach(function (item, index) {
-            if (item.policytype == policytype) {
-                policyobj = item;
-            }
-        });
-        return policyobj;
-    };
-    const relatedproducts = () => {
-        if (Relatedproducts.length != 0) {
-            return (
-                <div
-                    className="w-100 row ml-0 mr-0 d-flex justify-content-start pl-md-3 pr-md-3 pl-sm-2 pr-sm-2"
-                    style={{
-                        background: sectionproperties.relatedproductsbg,
-                        paddingTop: sectionproperties.relatedproductspaddingTop + 'px',
-                        paddingBottom: sectionproperties.relatedproductspaddingBottom + 'px',
-                        paddingLeft: sectionproperties.relatedproductspaddingLeft + 'px',
-                        paddingRight: sectionproperties.relatedproductspaddingRight + 'px',
-                        borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-                        borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-                        borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-                        borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-                        border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
-                        marginBottom: sectionproperties.relatedProductsMb + 'px',
-                    }}
-                >
-                    {Relatedproducts.length != 0 && (
-                        <div className="col-lg-12 p-0">
-                            <div className="row m-0 w-100">
-                                <div
-                                    className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center p-0 flex-column"
-                                    style={{
-                                        justifyContent: sectionproperties.relatedtitleposition == 'Centered' ? 'center' : 'start',
-                                        marginBottom: sectionproperties.relatedtitlemb + 'px',
-                                    }}
-                                >
-                                    <p
-                                        className={' m-0 p-0 wordbreak '}
-                                        style={{
-                                            fontSize: sectionproperties.relatedproductstitlefontsize + 'px',
-                                            color: sectionproperties.relatedproductstitlecolor,
-                                            fontWeight: sectionproperties.relatedproductstitlefontweight,
-                                            textAlign: sectionproperties.relatedtitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-                                        }}
-                                    >
-                                        {langdetect == 'en' ? sectionproperties.relatedproducttitleEn : sectionproperties.relatedproducttitleAr}
-                                    </p>
-                                    <div
-                                        style={{
-                                            width: sectionproperties.relatedproducttitle_lineafterwidth + 'px',
-                                            height: 2,
-                                            background: sectionproperties.relatedproducttitlelinebgcolor,
-                                            borderRadius: 5,
-                                        }}
-                                    />
-                                </div>
-                                <div className="col-lg-12">
-                                    <ScrollMenu
-                                        transitionBehavior={'auto'}
-                                        wrapperClassName={''}
-                                        itemClassName={'scrollmenuclassnameitemrelatedproduct'}
-                                        scrollContainerClassName={'scrollmenuclasssubscrollbar'}
-                                    >
-                                        {Relatedproducts.map((item, index) => {
-                                            if (item.productinfo != null) {
-                                                if (item.productid != fetchProductInfoQueryContext.data.data.productinfo.productid) {
-                                                    return (
-                                                        <div
-                                                            className="col-lg-12 w-100"
-                                                            onClick={() => {
-                                                                if (props.srcfromprops != 'templatdraftrouter') {
-                                                                    productidassigner(item.productid);
-                                                                } else {
-                                                                    routingcountext(StaticPagesLinksContext.productinfo, true, item.productid);
-                                                                }
-                                                            }}
-                                                        >
-                                                            <div className={productinfo_cssstyles.relatedproductcardcont + ' row w-100 m-0 cursor-pointer '}>
-                                                                <div class={' cursor-pointer w-100 '}>
-                                                                    <div class={`${productinfo_cssstyles.relatedProductImageCont}` + ' w-100 p-0 mb-2 '}>
-                                                                        <Imagekitimagecomp
-                                                                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                            publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                            // path={
-                                                                            //     '/tr:w-' +
-                                                                            //     sectionproperties.relatedProductDimWidth +
-                                                                            //     ',h-' +
-                                                                            //     sectionproperties.galleryHeightDimension +
-                                                                            //     '/' +
-                                                                            //     item.productinfo.productmainimage
-                                                                            // }
-                                                                            path={
-                                                                                '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.productinfo.productmainimage
-                                                                            }
-                                                                            loading="lazy"
-                                                                            style={{
-                                                                                width: '100%',
-                                                                                height: '100%',
-                                                                                objectFit: 'contain',
-                                                                            }}
-                                                                        />
-                                                                    </div>
-                                                                    <div class="row m-0 w-100 ">
-                                                                        <div class="col-lg-12 p-0">
-                                                                            <p
-                                                                                class={
-                                                                                    `${productinfo_cssstyles.relatedproductNameStyles}` +
-                                                                                    '  relatedproductNameStyles wordbreak wordbreak1 text-center m-0 '
-                                                                                }
-                                                                            >
-                                                                                {langdetect == 'en' ? item.productinfo.name_en : item.productinfo.name_ar}
-                                                                            </p>
-                                                                        </div>
-                                                                        <div style={{ flexDirection: 'column' }} class="col-lg-12 d-flex align-items-center justify-content-center p-0 ">
-                                                                            <p class={`${productinfo_cssstyles.relatedproductPricestyles}` + ' m-0 '}>
-                                                                                {item.productinfo.hassale == 1 ? item.productinfo.defaultsaleprice : item.productinfo.defaultprice}{' '}
-                                                                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : authdetailsContext?.currencyname_ar}{' '}
-                                                                            </p>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    );
-                                                }
-                                            }
-                                        })}
-                                    </ScrollMenu>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            );
-        }
-    };
-    // const DescriptionContent = () => {
-    //     return (
-    //         <div class="col-lg-12 pl-5 pr-5 p-md-0 w-100">
-    //             <div class="row m-0 w-100">
-    //                 {langdetect == 'en' &&
-    //                     fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en != '' &&
-    //                     fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en != null &&
-    //                     sectionproperties.prodCatShow == 'Show' && (
-    //                         <div className="col-lg-12 p-0 mb-4 d-flex justify-content-center">
-    //                             <div className="row m-0 w-100 d-flex">
-    //                                 <div class="col-lg-12 p-0 d-flex justify-content-start">
-    //                                     <p
-    //                                         className={'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>
-    //                                 </div>
-    //                                 <div class="col-lg-12 allcentered">
-    //                                     {fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en.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>
-    //                     )}
-    //                 {langdetect == 'ar' &&
-    //                     fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar != '' &&
-    //                     fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar != null &&
-    //                     sectionproperties.prodCatShow == 'Show' && (
-    //                         <div className="col-lg-12 p-0 mb-4 d-flex justify-content-center">
-    //                             <div className="row m-0 w-100 d-flex">
-    //                                 <div class="col-lg-12 p-0 d-flex justify-content-start flex-column">
-    //                                     <p
-    //                                         className={'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>
-    //                                 </div>
-    //                                 <div class="col-lg-12 allcentered">
-    //                                     {fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar.length > 1000 && (
-    //                                         <p class="m-0 p-0 cursor-pointer text-grey font-weight-600 text-right" onClick={() => setShowMore(!showMore)}>
-    //                                             {showMore ? lang.showless : lang.showmore}
-    //                                         </p>
-    //                                     )}
-    //                                 </div>
-    //                             </div>
-    //                         </div>
-    //                     )}
-    //                 {sectionproperties.showGallery == 'Show' && fetchProductInfoQueryContext?.data?.data?.productinfo?.productimages?.length != 0 && (
-    //                     <div class="col-lg-12 p-0">
-    //                         <div
-    //                             class="row m-0 w-100 allcentered pl-md-3 pr-md-3"
-    //                             style={{
-    //                                 paddingLeft: sectionproperties.galleryPaddingHorizontal + 'px',
-    //                                 paddingRight: sectionproperties.galleryPaddingHorizontal + 'px',
-    //                             }}
-    //                         >
-    //                             {fetchProductInfoQueryContext?.data?.data?.productinfo?.productimages?.map((item, index) => {
-    //                                 if (index <= 6) {
-    //                                     return (
-    //                                         <div
-    //                                             class={' col-md-4 col-sm-12 mb-3 col-lg-' + sectionproperties.galleryNoOfCols}
-    //                                             style={{
-    //                                                 height: sectionproperties.galleryHeight + 'px',
-    //                                             }}
-    //                                         >
-    //                                             <Imagekitimagecomp
-    //                                                 urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-    //                                                 publicKey={ikimagecredcontext?.ikimagepublickey}
-    //                                                 path={'/tr:w-' + sectionproperties.galleryWidthDimension + ',h-' + sectionproperties.galleryHeightDimension + '/' + item.path}
-    //                                                 style={{
-    //                                                     width: '100%',
-    //                                                     height: '100%',
-    //                                                     objectFit: 'contain',
-    //                                                 }}
-    //                                                 loading="lazy"
-    //                                             />
-    //                                         </div>
-    //                                     );
-    //                                 }
-    //                             })}
-    //                         </div>
-    //                     </div>
-    //                 )}
-    //             </div>
-    //         </div>
-    //     );
-    // };
-    const productinfo_cssstyles = {
-        containerstyles: css({
-            marginTop: props.srcfromprops != 'templatedraftrouter' ? sectionproperties.marginTop + 'px' : 30,
-            '@media (max-width: 800px)': {
-                marginTop: sectionproperties.marginTopResp + 'px',
-            },
-        }),
-        submitreviewbtn: css({
-            width: sectionproperties.applybtn_width + 'px',
-            height: sectionproperties.applybtn_height + 'px',
-            borderRadius: sectionproperties.applybtn_borderBottomLeftRadius + 'px',
-            fontSize: sectionproperties.applybtn_fontsize + 'px',
-            color: sectionproperties.applybtn_textColor,
-            fontWeight: sectionproperties.applybtn_Textfontweight,
-            backgroundColor: sectionproperties.applybtn_bgColor,
-            border: sectionproperties.applybtnborderwidth + 'px solid ' + sectionproperties.applybtnbordercolor,
-            textTransform: sectionproperties.applybtn_texttransform,
-            ':hover': {
-                transition: '.3s',
-                backgroundColor: sectionproperties.applybtn_bgColoronhover,
-                color: sectionproperties.applybtn_Textcoloronhover,
-            },
-        }),
-        form_control: css({
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            display: 'block',
-            width: '100%',
-            padding: '0 10px',
-            transition: '.3s',
-            fontWeight: 500,
-            border: sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0,
-            borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
-            borderRadius: sectionproperties.inputfieldborderradius + 'px',
-            height: sectionproperties.inputfieldheight + 'px',
-            background: sectionproperties.input_bgcolor,
-            color: sectionproperties.inputfieldcolor,
-            ':focus': {
-                borderColor: sectionproperties.inputfeildbordercoloronfocus,
-            },
-            ':focus .login_input_icon': {
-                color: sectionproperties.inputfeildbordercoloronfocus,
-            },
-        }),
-        inputfield_label: css({
-            color: sectionproperties.form_labelcolor,
-            fontWeight: sectionproperties.form_labelfontweight,
-            fontSize: sectionproperties.form_labelfontsize + 'px',
-            textTransform: sectionproperties.form_labeltexttransform,
-            marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0,
-        }),
-        reviewbutton: css({
-            width: sectionproperties.reviewbtn_width + 'px',
-            height: sectionproperties.reviewbtn_height + 'px',
-            background: sectionproperties.reviewbtn_bgcolor,
-            color: sectionproperties.reviewbtn_color,
-            fontSize: sectionproperties.reviewbtn_fontsize + 'px',
-            borderRadius: sectionproperties.reviewbtn_borderradius + 'px',
-            border: sectionproperties.reviewbtn_borderwidth + 'px solid ' + sectionproperties.reviewbtn_bordercolor,
-            fontWeight: sectionproperties.reviewbtn_fontweight,
-            ':hover': {
-                transition: '.3s',
-                color: sectionproperties.reviewbtn_coloronhover,
-                borderColor: sectionproperties.reviewbtn_coloronhover,
-                backgroundColor: sectionproperties.reviewbtn_bgcoloronhover,
-            },
-        }),
-        before: css({
-            ':before': {
-                background: sectionproperties.activetabbordercolor,
-            },
-        }),
-        reservationtab: css({
-            color: sectionproperties.tabtextactivecolor,
-            fontWeight: sectionproperties.tabtextfontweight,
-            background: sectionproperties.activetabbgcolor,
-            textTransform: sectionproperties.tabtexttexttransform,
-            borderRadius: sectionproperties.tabcontainerborderradius + 'px',
-            fontFamily: 'Poppins',
-            transition: '.3s',
-            textAlign: 'start',
-        }),
-        cart_btn: css({
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            overflow: 'hidden',
-            width: sectionproperties.cartBtnWidth + 'px',
-            height: sectionproperties.cartBtnHeight + 'px',
-            background: sectionproperties.cartbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColor,
-            borderRadius: sectionproperties.cart_btn_borderBottomLeftRadius + 'px',
-            color: sectionproperties.cartBtnTextcolor,
-            fontSize: sectionproperties.cartBtnTextfontsize + 'px',
-            textTransform: sectionproperties.cartBtnTexttransform,
-            fontWeight: sectionproperties.cartBtnTextfontweight,
-            border: sectionproperties.cartbtnborderwidth + 'px solid ' + sectionproperties.cartbtnbordercolor,
-            margin: 0,
-            transition: '.3s',
-            ':hover': {
-                background: sectionproperties.cartbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColoronhover,
-                color: sectionproperties.cartBtnTextcoloronhover,
-                borderColor: sectionproperties.cartBtnTextcoloronhover,
-            },
-        }),
-        quantitybtn: css({
-            width: sectionproperties.quantitybtn_height + 'px',
-            height: sectionproperties.quantitybtn_width + 'px',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-            borderRadius: sectionproperties.quantitybtn_borderradius + 'px',
-            background: sectionproperties.quantitybtn_bgcolor,
-            alignItems: 'center',
-            justifyContent: 'center',
-            margin: 0,
-            position: 'relative',
-            fontWeight: sectionproperties.quantitybtn_textfontweight,
-            color: sectionproperties.quantitybtn_textcolor,
-            fontSize: sectionproperties.quantitybtn_textfontsize + 'px',
-            border: sectionproperties.quantitybtnborderwidth + 'px solid ' + sectionproperties.quantitybtnbordercolor,
-        }),
-        quantitybtn_text: css({
-            margin: 'auto',
-        }),
-        add_quantitybtn_icon_container: css({
-            position: 'relative',
-            width: '35px',
-            height: '35px',
-            background: sectionproperties.add_quantitybtn_bgcolor,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: sectionproperties.add_quantitybtn_borderradius + 'px',
-            fontSize: sectionproperties.add_quantitybtn_textfontsize + 'px',
-            color: sectionproperties.add_quantitybtn_textcolor,
-            transition: '.3s',
-            ':hover': {
-                color: sectionproperties.add_quantitybtn_textcoloronhover,
-                background: sectionproperties.add_quantitybtn_bgcoloronhover,
-            },
-        }),
-        minus_quantitybtn_icon_container: css({
-            position: 'relative',
-            width: '35px',
-            height: '35px',
-            background: sectionproperties.remove_quantitybtn_bgcolor,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: sectionproperties.remove_quantitybtn_borderradius + 'px',
-            fontSize: sectionproperties.remove_quantitybtn_textfontsize + 'px',
-            color: sectionproperties.remove_quantitybtn_textcolor,
-            transition: '.3s',
-            ':hover': {
-                color: sectionproperties.remove_quantitybtn_textcoloronhover,
-                background: sectionproperties.remove_quantitybtn_bgcoloronhover,
-            },
-        }),
-        relatedproductcardcont: css({
-            ':hover .relatedproductNameStyles': {
-                color: sectionproperties.relatedprodNameColoronhover,
-            },
-        }),
-        relatedProductImageCont: css({
-            height: sectionproperties.relatedProductImageHeight + 'px',
-            border: sectionproperties.relatedProductImageBorderWidth + 'px solid ' + sectionproperties.relatedProductImageBorderColor,
-            borderRadius: sectionproperties.relatedProductImageBr + 'px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-        }),
-        relatedproductNameStyles: css({
-            transition: '.3s',
-            color: sectionproperties.relatedprodNameColor,
-            fontSize: sectionproperties.relatedprodNameFontSize + 'px',
-            fontWeight: sectionproperties.relatedprodnamefontWeight,
-            textTransform: sectionproperties.relatedprodNameTextTranform,
-            ':hover': {
-                color: sectionproperties.relatedprodNameColoronhover,
-            },
-        }),
-        relatedproductPricestyles: css({
-            color: sectionproperties.relatedprodPriceColor,
-            fontSize: sectionproperties.relatedprodpriceFontSize + 'px',
-            fontWeight: sectionproperties.relatedprodPriceFontWeight,
-        }),
-        cardcontainer: css({
-            backgroundColor: sectionproperties.backgroundColor,
-            borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-            borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-            borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-            paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
-            paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
-            paddingTop: sectionproperties.paddingTop + 'px',
-            paddingBottom: sectionproperties.paddingBottom + 'px',
-            border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
-            marginBottom: sectionproperties.marginBottom + 'px',
-        }),
-        wishlist_btn: css({
-            // marginTop: sectionproperties.favbtnmargintop + 'px',
-            width: sectionproperties.favBtnWidth + 'px',
-            height: sectionproperties.favBtnHeight + 'px',
-            background: sectionproperties.favbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColor,
-            borderRadius: sectionproperties.fav_btn_borderBottomLeftRadius + 'px',
-            color: sectionproperties.favBtniconcolor,
-            fontSize: sectionproperties.favBtnTextfontsize + 'px',
-            textTransform: sectionproperties.favBtnTexttransform,
-            fontWeight: sectionproperties.favBtnTextfontweight,
-            boxShadow: sectionproperties.favbtn_showshadow == 'Show' ? '0 0 10px ' + sectionproperties.favbtn_shadowcolor : '',
-            border: sectionproperties.favbtnborderwidth + 'px solid ' + sectionproperties.favbtnbordercolor,
-            cursor: 'pointer',
-            transition: '.3s',
-            ':hover': {
-                background: sectionproperties.favbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColoronhover,
-                color: sectionproperties.favBtnTextcoloronhover,
-                borderColor: sectionproperties.favBtnTextcoloronhover,
-            },
-            // '@media (max-width: 800px)': {
-            //     marginTop: sectionproperties.favbtnmargintopresp + 'px',
-            // },
-        }),
-        productname: css({
-            fontSize: sectionproperties.prodNameFontSize + 'px',
-            textTransform: sectionproperties.prodNameTextTranform,
-            fontWeight: sectionproperties.prodNameFontWeight,
-            color: sectionproperties.prodNameColor,
-        }),
-        productnamehover: css({
-            transition: '.3s',
-            ':hover': {
-                color: sectionproperties.prodNameColorOnHover,
-            },
-        }),
-        storeInfo: css({
-            color: sectionproperties.footerinfotext_color,
-            fontSize: sectionproperties.footerinfotext_fontsize + 'px',
-            textTransform: sectionproperties.footerinfotext_textTransform,
-            fontWeight: sectionproperties.footerinfotext_fontweight,
-            transition: '.3s',
-        }),
-        storeInfoContent: css({
-            color: sectionproperties.footerinfotext_secondarycolor,
-            fontSize: sectionproperties.footerinfotext_secondaryfontsize + 'px',
-            fontWeight: sectionproperties.footerinfotext_secondaryfontweight,
-        }),
-        iconContainer: css({
-            width: sectionproperties.iconcontainerwidth + 'px',
-            height: sectionproperties.iconcontainerheight + 'px',
-            borderRadius: sectionproperties.iconcontainerborderbl + 'px',
-            background: sectionproperties.iconcontainerbg,
-            color: sectionproperties.iconcontainercolor,
-        }),
-        storeinfocontainer: css({
-            ':hover .storeInfoContent': {
-                transition: '.3s',
-                color: sectionproperties.footerinfotext_coloronhover,
-            },
-            ':hover .iconContainer': {
-                transition: '.3s',
-                color: sectionproperties.iconcontainercoloronhover,
-                backgroundColor: sectionproperties.iconcontainerbgonhover,
-            },
-        }),
-        shareicon: css({
-            width: sectionproperties.shareiconwidth + 'px',
-            height: sectionproperties.shareiconheight + 'px',
-            borderRadius: sectionproperties.shareiconborderradius + 'px',
-            background: sectionproperties.shareiconbgcolor,
-            color: sectionproperties.shareiconcolor,
-            ':hover': {
-                color: sectionproperties.shareiconcoloronhover,
-                transition: '.3s',
-                cursor: 'pointer',
-            },
-        }),
-        checkoutbtn: css({
-            width: sectionproperties.checkoutBtnWidth + 'px',
-            height: sectionproperties.checkoutBtnHeight + 'px',
-            backgroundColor: sectionproperties.checkoutBtnbgColor,
-            color: sectionproperties.checkoutBtnTextcolor,
-            fontWeight: sectionproperties.checkoutBtnTextfontweight,
-            fontSize: sectionproperties.checkoutBtnTextfontsize + 'px',
-            borderRadius: sectionproperties.checkout_borderBottomLeftRadius + 'px',
-            border: sectionproperties.checkout_borderWidth + 'px solid ' + sectionproperties.checkout_bordercolor,
-            transition: '.3s',
-            ':hover': {
-                backgroundColor: sectionproperties.checkoutBtnbgColoronhover,
-                color: sectionproperties.checkoutBtncoloronhover,
-            },
-        }),
-        outstockbadge: css({
-            minWidth: sectionproperties.outstock_width + 'px',
-            height: sectionproperties.outstock_height + 'px',
-            background: sectionproperties.outstock_bg,
-            color: sectionproperties.outstock_color,
-            fontSize: sectionproperties.outstock_fontSize + 'px',
-            borderRadius: sectionproperties.outstock_borderradius + 'px',
-        }),
-        cashbackoutercontainer: css({
-            // minWidth: 'fit-content',
-            width: sectionproperties.cashbackcontainerwidth + '%',
-            height: sectionproperties.cashbackcontainerheight + 'px',
-            background: sectionproperties.cashbackcontainerbgcolor,
-            color: sectionproperties.cashbackcontainercolor,
-            fontSize: sectionproperties.cashbackcontainerfontsize + 'px',
-            border: sectionproperties.cashbackcontainerborderwidth + 'px ' + sectionproperties.cashbackcontainerborderstyle + sectionproperties.cashbackcontainerbordercolor,
-            borderRadius: sectionproperties.cashbackcontainerborderradius + 'px',
-        }),
-        profitcontainer: css({
-            width: sectionproperties.profitcontainerwidth + '%',
-            height: sectionproperties.profitcontainerheight + 'px',
-            background: sectionproperties.profitcontainerbgcolor,
-            border: sectionproperties.profitcontainerborderwidth + 'px solid' + sectionproperties.profitcontainerbordercolor,
-            borderRadius: sectionproperties.profitcontainerborderradius + 'px',
-            color: sectionproperties.profitcontainercolor,
-            '@media (max-width: 800px)': {
-                width: '90%',
-            },
-        }),
-        imagegallery: css({
-            '.image-gallery-thumbnail.active': {
-                border: '2px solid red ',
-            },
-        }),
-        storeinfobtn: css({
-            width: sectionproperties.storeinfobtnwidth + '%',
-            height: sectionproperties.storeinfobtnheight + 'px',
-            background: sectionproperties.storeinfobtnbgcolor,
-            fontSize: sectionproperties.footerinfotext_fontsize,
-            fontWeight: sectionproperties.footerinfotext_fontweight,
-            color: sectionproperties.footerinfotext_color,
-            borderRadius: sectionproperties.storeinfobtnborderradius + 'px',
-            transition: '.3s',
-            ':hover': {
-                color: sectionproperties.footerinfotext_coloronhover,
-                background: sectionproperties.storeinfobtnbgcoloronhover,
-            },
-        }),
-        storeinfocontainer: css({
-            marginTop: sectionproperties.storeinfomarginvertical + 'px',
-            '@media (max-width: 800px)': {
-                marginTop: sectionproperties.storeinfomarginverticalresp + 'px',
-            },
-        }),
-        // storeinfocontainer2: css({
-        //     marginBottom: sectionproperties.storeinfomarginvertical + 'px',
-        //     '@media (max-width: 800px)': {
-        //         marginBottom: sectionproperties.storeinfomarginverticalresp + 'px',
-        //     },
-        // }),
-    };
-
-    const getprice_discountpriceprops = (type, withtotal, variantindexcompleted) => {
-        var price = 0;
-        var quantityconditions = [];
-        var quantity = 0;
-        if (addtocardpayloadobj.quantity != undefined && addtocardpayloadobj.quantity != null) {
-            quantity = parseFloat(addtocardpayloadobj.quantity);
-        }
-        if (
-            fetchProductInfoQueryContext?.data?.data?.productinfo?.productquantityoptions != undefined &&
-            fetchProductInfoQueryContext?.data?.data?.productinfo?.productquantityoptions != null &&
-            Array.isArray(fetchProductInfoQueryContext?.data?.data?.productinfo?.productquantityoptions) &&
-            fetchProductInfoQueryContext?.data?.data?.productinfo?.productquantityoptions?.length != 0
-        ) {
-            quantityconditions = fetchProductInfoQueryContext.data.data.productinfo.productquantityoptions;
-        }
-        if (type == 'defaultprice') {
-            price = fetchProductInfoQueryContext.data.data.productinfo.defaultprice;
-            if (fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1) {
-                if (variantindexcompleted != undefined) {
-                    if (fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.variantprice != undefined) {
-                        price = fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.variantprice;
-                    }
-                }
-            }
-        } else if (type == 'defaultsaleprice') {
-            price = fetchProductInfoQueryContext.data.data.productinfo.defaultsaleprice;
-            if (fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1) {
-                if (variantindexcompleted != undefined) {
-                    if (fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.variantsaleprice != undefined) {
-                        price = fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.variantsaleprice;
-                    }
-                }
-            }
-        }
-        var localquantityconditionobj = null;
-        var temppriceinseidconditions = price;
-        quantityconditions.forEach(function (item, index) {
-            if (item.fromq <= quantity && item.toq >= quantity) {
-                var discountprice = (item.value / 100) * price;
-                if (item.type == 'add') {
-                    temppriceinseidconditions = price + discountprice;
-                } else if (item.type == 'subtract') {
-                    temppriceinseidconditions = price - discountprice;
-                }
-                localquantityconditionobj = item;
-            }
-        });
-        price = temppriceinseidconditions;
-        setquantityconditionfoundobj(localquantityconditionobj);
-        if (withtotal == true) {
-            price = price * quantity;
-        }
-        if (price != undefined) {
-            return price;
-        } else {
-            return 0;
-        }
-    };
-    const getQuantityCondition = () => {
-        return (
-            <div
-                class="col-lg-12 p-0"
-                style={{
-                    background: sectionproperties.reservation_bgcolor,
-                    borderRadius: sectionproperties.reservation_borderradius + 'px',
-                }}
-            >
-                <div
-                    class="row m-0 w-100"
-                    style={{
-                        paddingLeft: sectionproperties.reservation_padding_left + 'rem',
-                        paddingRight: sectionproperties.reservation_padding_right + 'rem',
-                        paddingTop: sectionproperties.reservation_padding_top + 'rem',
-                        paddingBottom: sectionproperties.reservation_padding_bottom + 'rem',
-                    }}
-                >
-                    <div class="col-lg-12 p-0 mb-4 allcentered flex-column">
-                        <p
-                            class="m-0 p-0 "
-                            style={{
-                                color: sectionproperties.pricelisttitlecolor,
-                                fontSize: sectionproperties.pricelisttitlefontSize + 'px',
-                                fontWeight: sectionproperties.pricelisttitlefontWeight,
-                            }}
-                        >
-                            {langdetect == 'en' ? sectionproperties.pricelisttitle_en : sectionproperties.pricelisttitle_ar}
-                        </p>
-                        <div
-                            style={{
-                                width: '30%',
-                                height: 1,
-                                background: sectionproperties.pricelisttitlecolor,
-                            }}
-                        />
-                    </div>
-                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.productquantityoptions?.map((item, index) => {
-                        return (
-                            <div
-                                className="col-lg-12 p-0 w-100 d-flex align-items-center"
-                                style={{
-                                    marginBottom: fetchProductInfoQueryContext?.data?.data?.productinfo?.productquantityoptions?.length - 1 != index ? '1rem' : 0,
-                                }}
-                            >
-                                <div
-                                    class="d-flex align-items-center"
-                                    style={{
-                                        color: sectionproperties.pricelistlabelcolor,
-                                        fontSize: sectionproperties.pricelistlabelfontsize + 'px',
-                                        fontWeight: sectionproperties.pricelistlabelfontweight,
-                                    }}
-                                >
-                                    <p
-                                        class="m-0 pb-0"
-                                        style={{
-                                            paddingRight: langdetect == 'en' ? '0.5rem' : 0,
-                                            paddingLeft: langdetect == 'ar' ? '0.5rem' : 0,
-                                        }}
-                                    >
-                                        {langdetect == 'en' ? 'From' : 'من'}: {item.fromq} - {item.toq}
-                                    </p>
-                                </div>
-                                <div class="" style={{ flex: 1, borderTop: '5px dotted #ccc' }} />
-                                <p
-                                    class="m-0 pb-0"
-                                    style={{
-                                        paddingLeft: langdetect == 'en' ? '0.5rem' : 0,
-                                        paddingRight: langdetect == 'ar' ? '0.5rem' : 0,
-                                        color: item.type == 'add' ? sectionproperties.valueaddcolor : sectionproperties.valueminuscolor,
-                                        fontSize: sectionproperties.pricelistvaluefontsize + 'px',
-                                        fontWeight: sectionproperties.pricelistvaluefontweight,
-                                    }}
-                                >
-                                    {item.type == 'subtract' ? '-' : '+'} {item.value}%
-                                </p>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        );
-    };
-    const StoreInfo = () => {
-        return (
-            <div class="row m-0 w-100">
-                <div class="col-lg-12 p-0">
-                    {sectionproperties.storeinfostyle == 'Style 1' && (
-                        <div class="row m-0 w-100">
-                            {sectionproperties.productInformationType == 'Product/Service Information' && sectionproperties.showstoreinfo1 == 'Show' && (
-                                <div className={productinfo_cssstyles.storeinfobtn + ' col-lg-12 p-0 w-100 d-flex align-items-center mb-4 '}>
-                                    <div class={productinfo_cssstyles.iconContainer}>
-                                        <i className="h-100 d-flex align-items-center justify-content-center">
-                                            <FaShippingFast size={20} />
-                                        </i>
-                                    </div>
-                                    <div className="col-lg-9 col-md-9 col-sm-9 d-flex justofy-content-start flex-column">
-                                        <p
-                                            className={productinfo_cssstyles.storeInfo + '  m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.otherinfotitle1en : sectionproperties.otherinfotitle1ar}
-                                        </p>
-                                        <p
-                                            className={productinfo_cssstyles.storeInfoContent + '  m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.otherinfodesc1en : sectionproperties.otherinfodesc1ar}
-                                        </p>
-                                    </div>
-                                </div>
-                            )}
-                            {sectionproperties.productInformationType == 'Product/Service Information' && sectionproperties.showstoreinfo2 == 'Show' && (
-                                <div className={productinfo_cssstyles.storeinfobtn + ' col-lg-12 p-0 d-flex align-items-center mb-4 '}>
-                                    <div class={productinfo_cssstyles.iconContainer}>
-                                        <i className="h-100 d-flex align-items-center justify-content-center">
-                                            <RiSecurePaymentLine size={20} />
-                                        </i>
-                                    </div>
-                                    <div className="col-lg-9 col-md-9 col-sm-9 d-flex justofy-content-start flex-column">
-                                        <p
-                                            className={productinfo_cssstyles.storeInfo + ' m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.otherinfotitle2en : sectionproperties.otherinfotitle2ar}
-                                        </p>
-                                        <p
-                                            className={productinfo_cssstyles.storeInfoContent + '  m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.otherinfodesc2en : sectionproperties.otherinfodesc2ar}
-                                        </p>
-                                    </div>
-                                </div>
-                            )}
-                            {sectionproperties.productInformationType == 'Product/Service Information' &&
-                                sectionproperties.showpricinglist == 'Show' &&
-                                fetchProductInfoQueryContext?.data?.data?.productinfo?.productquantityoptions?.length != 0 && <div class="col-lg-12 p-0 mb-4">{getQuantityCondition()}</div>}
-                            {sectionproperties.showfooterphonenumber == 'Show' && (
-                                <div
-                                    className={`${productinfo_cssstyles.storeinfobtn} ${productinfo_cssstyles.storeinfocontainer}` + ' mb-4 col-lg-12 p-0 d-flex align-items-center cursor-pointer '}
-                                    onClick={() => {
-                                        window.open('tel:' + authdetailsContext?.CuContactphonenumber, '_blank');
-                                    }}
-                                >
-                                    <div class={productinfo_cssstyles.iconContainer + ' iconContainer '}>
-                                        <i className="h-100 d-flex align-items-center justify-content-center">
-                                            <HiOutlinePhone size={20} />
-                                        </i>
-                                    </div>
-                                    <div className="col-lg-9 col-md-9 col-sm-9 d-flex justofy-content-start flex-column">
-                                        <p
-                                            className={productinfo_cssstyles.storeInfo + ' m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.phonetitle_en : sectionproperties.phonetitle_ar}
-                                        </p>
-                                        <p
-                                            className={productinfo_cssstyles.storeInfoContent + ' storeInfoContent m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {authdetailsContext?.CuContactphonenumber}
-                                        </p>
-                                    </div>
-                                </div>
-                            )}
-                            {sectionproperties.showfooteremail == 'Show' && (
-                                <div
-                                    className={`${productinfo_cssstyles.storeinfobtn} ${productinfo_cssstyles.storeinfocontainer}` + ' mb-4 col-lg-12 p-0 d-flex align-items-center cursor-pointer '}
-                                    onClick={() => {
-                                        window.open('mailto:' + authdetailsContext?.instinfo?.contactinfo?.email, '_self');
-                                    }}
-                                >
-                                    <div class={productinfo_cssstyles.iconContainer + ' iconContainer '}>
-                                        <i className="h-100 d-flex align-items-center justify-content-center">
-                                            <AiOutlineMail size={20} />
-                                        </i>
-                                    </div>
-                                    <div className="col-lg-9 col-md-9 col-sm-9 d-flex justofy-content-start flex-column">
-                                        <p
-                                            className={productinfo_cssstyles.storeInfo + ' m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.emailtitle_en : sectionproperties.emailtitle_ar}
-                                        </p>
-                                        <p
-                                            className={productinfo_cssstyles.storeInfoContent + ' storeInfoContent m-0 p-0 wordbreak '}
-                                            style={{
-                                                textAlign: langdetect == 'en' ? 'left' : 'right',
-                                            }}
-                                        >
-                                            {authdetailsContext?.instinfo?.contactinfo?.email}
-                                        </p>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    )}
-                    {sectionproperties.storeinfostyle == 'Style 2' && (
-                        <div class="row m-0 w-100">
-                            {sectionproperties.showfooterphonenumber == 'Show' && authdetailsContext?.CuContactphonenumber != null && (
-                                <div class="col-lg-12 allcentered mb-2 p-sm-0">
-                                    <button
-                                        class={productinfo_cssstyles.storeinfobtn + ' allcentered '}
-                                        onClick={() => {
-                                            window.open('tel:' + authdetailsContext?.CuContactphonenumber, '_blank');
-                                        }}
-                                    >
-                                        <p class="m-0 p-0">{langdetect == 'en' ? sectionproperties.phonetitle_en : sectionproperties.phonetitle_ar}</p>
-                                    </button>
-                                </div>
-                            )}
-                            {sectionproperties.showfooteremail == 'Show' && authdetailsContext?.instinfo?.contactinfo?.email != null && (
-                                <div class="col-lg-12 allcentered mb-2 p-sm-0">
-                                    <button
-                                        class={productinfo_cssstyles.storeinfobtn + ' allcentered '}
-                                        onClick={() => {
-                                            window.open('mailto:' + authdetailsContext?.instinfo?.contactinfo?.email, '_self');
-                                        }}
-                                    >
-                                        <p class="m-0 p-0">{langdetect == 'en' ? sectionproperties.emailtitle_en : sectionproperties.emailtitle_ar}</p>
-                                    </button>
-                                </div>
-                            )}
-                            {sectionproperties.showwhatsapp == 'Show' && authdetailsContext?.instinfo?.whatsappnumber != null && (
-                                <div class="col-lg-12 allcentered mb-2 p-sm-0">
-                                    <button
-                                        class={productinfo_cssstyles.storeinfobtn + ' allcentered '}
-                                        onClick={() => {
-                                            if (authdetailsContext?.instinfo?.whatsappnumber != null) {
-                                                window.open('https://api.whatsapp.com/send?phone=' + authdetailsContext?.instinfo?.whatsappnumber, '_blank');
-                                            }
-                                        }}
-                                    >
-                                        <p class="m-0 p-0">{langdetect == 'en' ? sectionproperties.whatsapptitle_en : sectionproperties.whatsapptitle_ar}</p>
-                                    </button>
-                                </div>
-                            )}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    };
-    return (
-        <div className={productinfo_cssstyles.containerstyles + ' row w-100 ml-0 mr-0 '}>
-            {fetchProductInfoQueryContext.isFetching && (
-                <div className={'row ml-0 mr-0 w-100 allcentered'} style={{ height: 200 }}>
-                    <Messaging color="#ccc" width="10px" height="10px" duration="1s" />
-                </div>
-            )}
-            {Object.keys(sectionproperties).length != 0 && (
-                <div className="col-lg-12 p-0">
-                    {!fetchProductInfoQueryContext.isFetching && fetchProductInfoQueryContext.isSuccess && fetchProductInfoQueryContext.data.data.productinfo != null && (
-                        <div
-                            className={sectionproperties.card_marginLeft != 0 ? ' row m-0 w-100 pl-lg-3 pr-lg-3 pl-md-4 pr-md-4 pl-sm-1 pr-sm-1 ' : ' row m-0 w-100 p-sm-0 '}
-                            style={{
-                                paddingLeft: props.srcfromprops == 'Productinfomodel' ? (langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px') : 0,
-                                paddingRight:
-                                    props.srcfromprops == 'Productinfomodel' ? (langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px') : 0,
-                            }}
-                        >
-                            {fetchProductInfoQueryContext.data.data.productinfo.item_type == 'product' && (
-                                <Product_itemtype
-                                    actions={{
-                                        returnpolicyobj: returnpolicyobj,
-                                        langdetect: langdetect,
-                                        lang: lang,
-                                        srcfromprops: props.srcfromprops,
-                                        returnpolicyobj: returnpolicyobj,
-                                        productinfo_cssstyles: productinfo_cssstyles,
-                                        addtocartfunc: addtocartfunc,
-                                        selectproductoptionvalue: selectproductoptionvalue,
-                                        clearchoosenvaluesbutkeepcurrentvalue: clearchoosenvaluesbutkeepcurrentvalue,
-                                        productimagesarray: productimagesarray,
-                                        fetchProductInfoQueryContext: fetchProductInfoQueryContext,
-                                        ProductInfoObj: ProductInfoObj,
-                                        sectionproperties: sectionproperties,
-                                        addtocardpayloadobj: addtocardpayloadobj,
-                                        setaddtocardpayloadobj: setaddtocardpayloadobj,
-                                        routingcountext: routingcountext,
-                                        AddtoCartMutationContext: AddtoCartMutationContext,
-                                        authdetailsContext: authdetailsContext,
-                                        addtofavoritescontext: addtofavoritescontext,
-                                        variantindexcompleted: variantindexcompleted,
-                                        StaticPagesLinksContext: StaticPagesLinksContext,
-                                        NotificationManager: NotificationManager,
-                                        GeneralAPIMutationContext: GeneralAPIMutationContext,
-                                        quantityconditionfoundobjprops: quantityconditionfoundobj,
-                                        relatedproducts: relatedproducts,
-                                        getprice_discountpriceprops: getprice_discountpriceprops,
-                                        StoreInfoprops: StoreInfo,
-                                        currentshowingimageindex: currentshowingimageindex,
-                                        setcurrentshowingimageindex: setcurrentshowingimageindex,
-                                        templatepropcontext: templatepropcontext,
-                                        ikimagecredcontext: ikimagecredcontext,
-                                        variantindex: variantindex,
-                                        setvariantindex: setvariantindex,
-                                    }}
-                                />
-                            )}
-                            {fetchProductInfoQueryContext.data.data.productinfo.item_type == 'service' && (
-                                <Service_itemtype
-                                    actions={{
-                                        returnpolicyobj: returnpolicyobj,
-                                        langdetect: langdetect,
-                                        lang: lang,
-                                        srcfromprops: props.srcfromprops,
-                                        returnpolicyobj: returnpolicyobj,
-                                        productinfo_cssstyles: productinfo_cssstyles,
-                                        addtocartfunc: addtocartfunc,
-                                        selectproductoptionvalue: selectproductoptionvalue,
-                                        clearchoosenvaluesbutkeepcurrentvalue: clearchoosenvaluesbutkeepcurrentvalue,
-                                        productimagesarray: productimagesarray,
-                                        fetchProductInfoQueryContext: fetchProductInfoQueryContext,
-                                        sectionproperties: sectionproperties,
-                                        addtocardpayloadobj: addtocardpayloadobj,
-                                        ProductInfoObj: ProductInfoObj,
-                                        setaddtocardpayloadobj: setaddtocardpayloadobj,
-                                        routingcountext: routingcountext,
-                                        AddtoCartMutationContext: AddtoCartMutationContext,
-                                        authdetailsContext: authdetailsContext,
-                                        addtofavoritescontext: addtofavoritescontext,
-                                        StaticPagesLinksContext: StaticPagesLinksContext,
-                                        variantindexcompleted: variantindexcompleted,
-                                        GeneralAPIMutationContext: GeneralAPIMutationContext,
-                                        NotificationManager: NotificationManager,
-                                        getprice_discountpriceprops: getprice_discountpriceprops,
-                                        quantityconditionfoundobjprops: quantityconditionfoundobj,
-                                        relatedproducts: relatedproducts,
-                                        getQuantityCondition: getQuantityCondition,
-                                        StoreInfoprops: StoreInfo,
-                                        templatepropcontext: templatepropcontext,
-                                        ikimagecredcontext: ikimagecredcontext,
-                                    }}
-                                />
-                            )}
-                            {props.srcfromprops != 'templatedraftrouter' && (
-                                <div
-                                    className={sectionproperties.card_marginLeft != 0 ? ' col-lg-12 p-0 pl-lg-3 pr-lg-3 pl-md-4 pr-md-4 pl-sm-1 pr-sm-1 ' : ' col-lg-12 p-sm-0 '}
-                                    style={{
-                                        paddingLeft:
-                                            props.srcfromprops == 'Productinfomodel' ? (langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px') : 0,
-                                        paddingRight:
-                                            props.srcfromprops == 'Productinfomodel' ? (langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px') : 0,
-                                        display:
-                                            sectionproperties.showfirstpolicy == 'Hide' && sectionproperties.showsecondpolicy == 'Hide' && sectionproperties.gallerystyle == 'Style 2'
-                                                ? 'none'
-                                                : 'flex',
-                                    }}
-                                >
-                                    <div
-                                        class={`${productinfo_cssstyles.cardcontainer}` + ' ml-0 mr-0 w-100 pl-md-3 pr-md-3 px-1025-1 '}
-                                        style={{
-                                            paddingLeft: sectionproperties.tabspaddinghorizontal + 'px',
-                                            paddingRight: sectionproperties.tabspaddinghorizontal + 'px',
-                                            marginBottom: sectionproperties.tabsmb + 'px',
-                                            paddingTop: sectionproperties.tabsPt + 'px',
-                                            paddingBottom: sectionproperties.tabsPb + 'px',
-                                        }}
-                                    >
-                                        {sectionproperties.tabsfullwidth == 'Full Width' && (
-                                            <Box>
-                                                <Tabs
-                                                    value={tabIndex}
-                                                    onChange={handleTabChange}
-                                                    scrollButtons="auto"
-                                                    TabIndicatorProps={{
-                                                        style: {
-                                                            background: sectionproperties.activetabbordercolor,
-                                                            // right: sectionproperties.showfirstpolicy == 'Hide' ? 0 : sectionproperties.showsecondpolicy == 'Hide' ? 0 : '',
-                                                            // margin: sectionproperties.showfirstpolicy == 'Hide' ? 'auto' : sectionproperties.showsecondpolicy == 'Hide' ? 'auto' : '',
-                                                        },
-                                                    }}
-                                                    sx={{
-                                                        '& button': {
-                                                            color: sectionproperties.tabtextcolor,
-                                                            fontWeight: sectionproperties.tabtextfontweight,
-                                                            background: sectionproperties.tabcontainerbgcolor,
-                                                            textTransform: sectionproperties.tabtexttexttransform,
-                                                            borderRadius: sectionproperties.tabcontainerborderradius + 'px',
-                                                            fontFamily: 'Poppins',
-                                                            transition: '.3s',
-                                                            fontSize: sectionproperties.tabtextfontsize + 'px',
-                                                        },
-                                                        '& button:hover': {
-                                                            color: sectionproperties.tabscoloronhover,
-                                                            fontFamily: 'Poppins',
-                                                            transition: '.3s',
-                                                        },
-                                                        '& button.Mui-selected': {
-                                                            color: sectionproperties.tabtextactivecolor,
-                                                            background: sectionproperties.activetabbgcolor,
-                                                            fontFamily: 'Poppins',
-                                                            transition: '.3s',
-                                                        },
-                                                    }}
-                                                    variant={'fullWidth'}
-                                                    // tabsfullwidth
-                                                >
-                                                    {sectionproperties.prodCatShow == 'Show' && sectionproperties.descriptionposition == 'Bottom' && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? sectionproperties.tabsdescEn : sectionproperties.tabsdescAr}
-                                                            onClick={() => {
-                                                                settabname('descriptiontab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {sectionproperties.productInformationType == 'Product/Service Information' && sectionproperties.showfirstpolicy == 'Show' && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? returnpolicyobj('Shipping Policy')?.policypagename_en : returnpolicyobj('Shipping Policy')?.policypagename_ar}
-                                                            onClick={() => {
-                                                                settabname('shippingpolicytab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {sectionproperties.productInformationType == 'Product/Service Information' && sectionproperties.showsecondpolicy == 'Show' && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? returnpolicyobj('Refund Policy')?.policypagename_en : returnpolicyobj('Refund Policy')?.policypagename_ar}
-                                                            onClick={() => {
-                                                                settabname('refundpolicytab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos?.length != 0 && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? sectionproperties.videostitleen : sectionproperties.videostitlear}
-                                                            onClick={() => {
-                                                                settabname('videostab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.productcanrate == 1 && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? 'Reviews' : 'التقييمات'}
-                                                            onClick={() => {
-                                                                settabname('reviewstab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                </Tabs>
-                                            </Box>
-                                        )}
-                                        {sectionproperties.tabsfullwidth != 'Full Width' && (
-                                            <Box>
-                                                <Tabs
-                                                    value={tabIndex}
-                                                    onChange={handleTabChange}
-                                                    scrollButtons="auto"
-                                                    TabIndicatorProps={{
-                                                        style: {
-                                                            background: sectionproperties.activetabbordercolor,
-                                                            // right: sectionproperties.showfirstpolicy == 'Hide' ? 0 : sectionproperties.showsecondpolicy == 'Hide' ? 0 : '',
-                                                            // margin: sectionproperties.showfirstpolicy == 'Hide' ? 'auto' : sectionproperties.showsecondpolicy == 'Hide' ? 'auto' : '',
-                                                        },
-                                                    }}
-                                                    sx={{
-                                                        '& button': {
-                                                            color: sectionproperties.tabtextcolor,
-                                                            fontWeight: sectionproperties.tabtextfontweight,
-                                                            background: sectionproperties.tabcontainerbgcolor,
-                                                            textTransform: sectionproperties.tabtexttexttransform,
-                                                            borderRadius: sectionproperties.tabcontainerborderradius + 'px',
-                                                            fontFamily: 'Poppins',
-                                                            transition: '.3s',
-                                                            fontSize: sectionproperties.tabtextfontsize + 'px',
-                                                        },
-                                                        '& button:hover': {
-                                                            color: sectionproperties.tabscoloronhover,
-                                                            fontFamily: 'Poppins',
-                                                            transition: '.3s',
-                                                        },
-                                                        '& button.Mui-selected': {
-                                                            color: sectionproperties.tabtextactivecolor,
-                                                            background: sectionproperties.activetabbgcolor,
-                                                            fontFamily: 'Poppins',
-                                                            transition: '.3s',
-                                                        },
-                                                    }}
-                                                >
-                                                    {sectionproperties.prodCatShow == 'Show' && sectionproperties.gallerystyle == 'Style 1' && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? sectionproperties.tabsdescEn : sectionproperties.tabsdescAr}
-                                                            onClick={() => {
-                                                                settabname('descriptiontab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {sectionproperties.productInformationType == 'Product/Service Information' && sectionproperties.showfirstpolicy == 'Show' && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? returnpolicyobj('Shipping Policy')?.policypagename_en : returnpolicyobj('Shipping Policy')?.policypagename_ar}
-                                                            onClick={() => {
-                                                                settabname('shippingpolicytab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {sectionproperties.productInformationType == 'Product/Service Information' && sectionproperties.showsecondpolicy == 'Show' && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? returnpolicyobj('Refund Policy')?.policypagename_en : returnpolicyobj('Refund Policy')?.policypagename_ar}
-                                                            onClick={() => {
-                                                                settabname('refundpolicytab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos?.length != 0 && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? 'Videos' : 'فيديوهات'}
-                                                            onClick={() => {
-                                                                settabname('videostab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.productcanrate == 1 && (
-                                                        <Tab
-                                                            label={langdetect == 'en' ? 'Reviews' : 'التقييمات'}
-                                                            onClick={() => {
-                                                                settabname('reviewstab');
-                                                            }}
-                                                        />
-                                                    )}
-                                                </Tabs>
-                                            </Box>
-                                        )}
-                                        <Box class="w-100 mt-5 mb-4">
-                                            {tabname == 'descriptiontab' && sectionproperties.descriptionposition == 'Bottom' && (
-                                                <DescriptionContent
-                                                    actions={{
-                                                        ...actions,
-                                                        productinfo_cssstyles: productinfo_cssstyles,
-                                                        sectionproperties: sectionproperties,
-                                                    }}
-                                                />
-                                            )}
-                                            {tabname == 'shippingpolicytab' && (
-                                                <div class="col-lg-12 pl-5 pr-5 p-md-0 w-100">
-                                                    <p
-                                                        className={' m-0 p-0 wordbreak '}
-                                                        style={{
-                                                            // lineClamp: 10,
-                                                            // WebkitLineClamp: 10,
-                                                            textAlign: langdetect == 'en' ? 'left' : 'right',
-                                                        }}
-                                                        dangerouslySetInnerHTML={{
-                                                            __html: langdetect == 'en' ? returnpolicyobj('Shipping Policy')?.policycontent_en : returnpolicyobj('Shipping Policy')?.policycontent_ar,
-                                                        }}
-                                                    ></p>
-                                                </div>
-                                            )}
-                                            {tabname == 'refundpolicytab' && (
-                                                <div class="col-lg-12 p-0 w-100 pl-5 pr-5 p-md-0">
-                                                    <p
-                                                        className={' m-0 p-0 wordbreak '}
-                                                        style={{
-                                                            // lineClamp: 10,
-                                                            // WebkitLineClamp: 10,
-                                                            textAlign: langdetect == 'en' ? 'left' : 'right',
-                                                        }}
-                                                        dangerouslySetInnerHTML={{
-                                                            __html: langdetect == 'en' ? returnpolicyobj('Refund Policy')?.policycontent_en : returnpolicyobj('Refund Policy')?.policycontent_ar,
-                                                        }}
-                                                    ></p>
-                                                </div>
-                                            )}
-                                            {tabname == 'videostab' && (
-                                                <div class="row m-0 w-100 w-100 pl-5 pr-5 p-md-0">
-                                                    {productVideos.map((item, index) => {
-                                                        return (
-                                                            <div
-                                                                className="col-lg-4 col-md-6 col-sm-12 mb-4"
-                                                                style={{
-                                                                    height: 400,
-                                                                }}
-                                                            >
-                                                                <ReactPlayer url={item.videourl} height={'100%'} width={'100%'} playing={false} controls={true} loop={true} muted={true} />
-                                                            </div>
-                                                        );
-                                                    })}
-                                                </div>
-                                            )}
-                                            {tabname == 'reviewstab' && (
-                                                <div class="col-lg-12 p-0 w-100 pl-5 pr-5 p-md-0">
-                                                    <ProductReviews
-                                                        actions={{
-                                                            ...actions,
-                                                            productinfo_cssstyles: productinfo_cssstyles,
-                                                            sectionproperties: sectionproperties,
-                                                        }}
-                                                    />
-                                                </div>
-                                            )}
-                                        </Box>
-                                    </div>
-                                </div>
-                            )}
-
-                            {props.srcfromprops != 'templatedraftrouter' && (
-                                <div
-                                    className={sectionproperties.card_marginLeft != 0 ? ' col-lg-12 pl-lg-3 pr-lg-3 pl-md-4 pr-md-4 pl-sm-1 pr-sm-1 ' : ' col-lg-12 p-sm-0 '}
-                                    style={{
-                                        paddingLeft:
-                                            props.srcfromprops == 'Productinfomodel' ? (langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px') : 0,
-                                        paddingRight:
-                                            props.srcfromprops == 'Productinfomodel' ? (langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px') : 0,
-                                    }}
-                                >
-                                    {relatedproducts()}
-                                </div>
-                            )}
-                        </div>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
-export default Productinfo;