tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Productinfo/Productinfo.jsx

@@ -0,0 +1,1946 @@
+//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 Article_itemtype from './Article_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 [ProductInfoObj, setProductInfoObj] = useState({});
+    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 fetchProductInfoQueryContextProps = props.actions.fetchProductInfoQueryContext;
+    const [fetchProductInfoQueryContext, setfetchProductInfoQueryContext] = useState({});
+
+    useEffect(() => {
+        if (fetchProductInfoQueryContextProps.isSuccess) {
+            setProductInfoObj({ ...fetchProductInfoQueryContextProps.data });
+            setfetchProductInfoQueryContext(fetchProductInfoQueryContextProps);
+        }
+    }, [props.actions, props, fetchProductInfoQueryContextProps.data, fetchProductInfoQueryContextProps.isSuccess]);
+    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 Pixel_EventsContext = props.actions.Pixel_EventsContext;
+
+    const actions = props.actions;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const setCurrentPageIdContext = props.actions.setCurrentPageIdContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const productidparam = props.productidparam;
+
+    const [variantsku, setvariantsku] = useState('');
+    const [isoutofstock, setisoutofstock] = useState(false);
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [CurrentPageId, setCurrentPageId] = useState('');
+    const [RelatedProductsTagid, setRelatedProductsTagid] = 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 [variantvalueidentifier, setvariantvalueidentifier] = 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' && fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos?.length == 0)) {
+                settabname('shippingpolicytab');
+            } else if (
+                fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos?.length != 0 &&
+                sectionproperties.showfirstpolicy == 'Hide' &&
+                sectionproperties.showsecondpolicy == 'Hide'
+            ) {
+                // settabname('videostab');
+                settabname('reviewstab');
+            }
+        }
+    }, [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, props, props.actions]);
+    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 quantitystepincrearse = 1;
+
+                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);
+                            }
+                        },
+                    });
+                }
+                if (fetchProductInfoQueryContext?.data?.data?.productinfo?.item_type == 'package list') {
+                    tempaddtocardpayloadobj.item_type = 'package list';
+                } else {
+                    tempaddtocardpayloadobj.item_type = 'product';
+                }
+
+                if (
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.quantitystepincrearse != undefined &&
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.quantitystepincrearse != null &&
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.quantitystepincrearse != 1 &&
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.quantitystepincrearse != ''
+                ) {
+                    quantitystepincrearse = parseInt(fetchProductInfoQueryContext?.data?.data?.productinfo?.quantitystepincrearse);
+                }
+                tempaddtocardpayloadobj.quantity = quantitystepincrearse;
+                setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
+            }
+        }
+    }, [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;
+        }
+        if (productarr.data.productinfo.productoptions[optionindex].optionname == 'Color' || productarr.data.productinfo.productoptions[optionindex].optionname == 'Colour') {
+            setvariantvalueidentifier(productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex]?.value_identifier);
+        }
+        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) {
+                    setisoutofstock(false);
+                    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;
+                        }
+                    });
+                    if (variantobj.current_quantity <= 0) {
+                        setisoutofstock(true);
+                    } else {
+                        setisoutofstock(false);
+                    }
+                    setvariantsku(variantobj?.sku);
+                    setcurrentshowingimageindex(variantimageindex);
+                    setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
+                    setvariantindexcompleted(ProductVariantIndex);
+                    setvariantindex(ProductVariantIndex);
+                }
+            } else {
+                // setisoutofstock(false);
+            }
+        });
+        // queryClient.setQueryData('fetchProductInfo_API' + JSON.stringify(fetchproductinfoObjContext), productarr);
+        setProductInfoObj({ ...productarr });
+    };
+    const addtocartfunc = (forcetocheckout) => {
+        var runfunc = false;
+        var forcetocheckoutvalue = forcetocheckout;
+        // alert(addtocardpayloadobj.quantity + 'sad');
+        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;
+            if (forcetocheckoutvalue != undefined) {
+                tempaddtocardpayloadobj.forcetocheckoutvalue = forcetocheckoutvalue;
+            }
+            var Extrafieldvalidationresponse = validateextrafields();
+            if (Extrafieldvalidationresponse.status) {
+                Pixel_EventsContext('AddToCart', {
+                    content_ids: [fetchProductInfoQueryContext?.data?.data?.productinfo?.productid],
+                    content_name: fetchProductInfoQueryContext?.data?.data?.productinfo?.name_en + ' - ' + fetchProductInfoQueryContext?.data?.data?.productinfo?.name_ar,
+                    content_sku: fetchProductInfoQueryContext?.data?.data?.productinfo?.sku,
+                    content_type: 'product',
+                    currency: fetchProductInfoQueryContext?.data?.data?.currencyname_en,
+                    value: fetchProductInfoQueryContext?.data?.data?.productinfo?.defaultprice,
+                    quantity: addtocardpayloadobj.quantity,
+                });
+                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': {
+                cursor: 'pointer',
+                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>
+        );
+    };
+    const isproductofstock = () => {
+        var isproductoutofstock = false;
+        var variantindexcompletedloc = variantindexcompleted?.toString();
+        var currquant = 0;
+        if (fetchProductInfoQueryContext.isSuccess) {
+            if (fetchProductInfoQueryContext?.data?.data?.productinfo?.quantavailtype == 'limit') {
+                if (fetchProductInfoQueryContext?.data?.data?.productinfo?.hasvariants == 1) {
+                    if (variantindexcompletedloc != undefined && variantindexcompletedloc != null && variantindexcompletedloc != '') {
+                        if (isoutofstock) {
+                            isproductoutofstock = true;
+                        } else {
+                            isproductoutofstock = false;
+                        }
+                    }
+                } else {
+                    if (fetchProductInfoQueryContext?.data?.data?.productinfo?.quantavailtype == 'limit') {
+                        if (parseFloat(fetchProductInfoQueryContext?.data?.data?.productinfo?.currentquantity) <= 0) {
+                            isproductoutofstock = true;
+                            currquant = fetchProductInfoQueryContext?.data?.data?.productinfo?.currentquantity;
+                        }
+                    }
+                }
+            }
+        }
+        return { isproductoutofstock: isproductoutofstock, currquant: currquant };
+    };
+    return (
+        <div className={productinfo_cssstyles.containerstyles + ' row w-100 ml-0 mr-0 '}>
+            {/* <h1>
+                                {isproductofstock()['isproductoutofstock']?.toString()} -- ff - {ProductInfoObj?.data?.productinfo?.name_en}
+                            </h1> */}
+            {Object.keys(sectionproperties).length != 0 && (
+                <div className="col-lg-12 p-0" style={{ minHeight: '80vh' }}>
+                    {fetchProductInfoQueryContextProps.isFetching && (
+                        <div className={'row ml-0 mr-0 w-100  px-5 py-5'}>
+                            <div class="col-lg-6 col-md-12 is-loading mb-md-4">
+                                <div
+                                    class="image"
+                                    style={{
+                                        width: '100%',
+                                        height: 400,
+                                    }}
+                                ></div>
+                            </div>
+                            <div class="col-lg-6 col-md-12 mb-md-4">
+                                <p class="is-loading"></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                                <p
+                                    class="is-loading"
+                                    style={{
+                                        width: '40%',
+                                    }}
+                                ></p>
+                            </div>
+
+                            {/* <Messaging color="#ccc" width="10px" height="10px" duration="1s" /> */}
+                        </div>
+                    )}
+                    {!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={{
+                                        setisoutofstock: setisoutofstock,
+                                        isoutofstock: isoutofstock,
+                                        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,
+                                        variantsku: variantsku,
+                                        variantvalueidentifier: variantvalueidentifier,
+                                    }}
+                                />
+                            )}
+                            {fetchProductInfoQueryContext.data.data.productinfo.item_type == 'Article' && (
+                                <Article_itemtype
+                                    actions={{
+                                        setisoutofstock: setisoutofstock,
+                                        isoutofstock: isoutofstock,
+                                        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,
+                                        variantsku: variantsku,
+                                        variantvalueidentifier: variantvalueidentifier,
+                                    }}
+                                />
+                            )}
+                            {fetchProductInfoQueryContext.data.data.productinfo.item_type == 'service' && (
+                                <Service_itemtype
+                                    actions={{
+                                        variantsku: variantsku,
+                                        setisoutofstock: setisoutofstock,
+                                        isoutofstock: isoutofstock,
+                                        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,
+                                        currentshowingimageindex: currentshowingimageindex,
+                                        setcurrentshowingimageindex: setcurrentshowingimageindex,
+                                        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' &&
+                                            fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos?.length != 0
+                                                ? 'flex'
+                                                : fetchProductInfoQueryContext?.data?.data?.productinfo?.productcanrate == 1
+                                                ? 'flex'
+                                                : sectionproperties.showfirstpolicy == 'Hide' && sectionproperties.showsecondpolicy == 'Hide'
+                                                ? 'none'
+                                                : sectionproperties.showfirstpolicy == 'Hide' &&
+                                                  sectionproperties.showsecondpolicy == 'Hide' &&
+                                                  sectionproperties.descriptionposition != 'Bottom' &&
+                                                  fetchProductInfoQueryContext?.data?.data?.productinfo?.product_videos?.length == 0
+                                                ? '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;