tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Productinfo4-4/Variantoptions21-9.jsx

@@ -0,0 +1,324 @@
+//productidprops
+import React, { useEffect, useState } from 'react';
+import productinfostyles from '../../../styles/staticpages/productinfo.module.css';
+import '../../../styles/staticpages/image-gallery.css';
+import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+import loginstyles from '../../../styles/staticpages/signup.module.css';
+import { css } from 'glamor';
+import { defaultstylesnone } from '../../../StylesJS/Customstyles';
+
+const Select = React.lazy(() => import('react-select'));
+
+const Variantoptions = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const selectproductoptionvalue = props.actions.selectproductoptionvalue;
+    const clearchoosenvaluesbutkeepcurrentvalue = props.actions.clearchoosenvaluesbutkeepcurrentvalue;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const sectionproperties = props.actions.sectionproperties;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const ProductInfoObj = props.actions.ProductInfoObj;
+    const formstyles = {
+        input_label_name: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0,
+        }),
+        form_control: css({
+            background: 'transparent',
+            color: sectionproperties.inputfieldcolor,
+            fontSize: sectionproperties.inputfieldfontsize + 'px',
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            // height: '35px',
+            padding: '0 10px',
+            transition: '.3s',
+            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,
+            },
+        }),
+    };
+    return (
+        <>
+            {fetchProductInfoQueryContext?.data?.data?.productinfo?.hasvariants == 1 && sectionproperties.productInformationType == 'Product/Service Information' && (
+                <div className="row m-0 w-100 d-flex align-items-start">
+                    {sectionproperties.variantstyle == 'Slider' &&
+                        ProductInfoObj?.data?.productinfo?.productoptions?.map((item, index) => {
+                            return (
+                                <div className="col-lg-12 p-0 mb-3 d-flex justify-content-start">
+                                    <div className="row m-0 w-100 d-flex align-items-start">
+                                        <div className="col-lg-12 col-md-12 p-0 d-flex">
+                                            <p
+                                                className={' m-0 p-0 wordbreak'}
+                                                style={{
+                                                    color: sectionproperties.varianttitle_color,
+                                                    fontWeight: sectionproperties.varianttitle_fontweight,
+                                                    textTransform: sectionproperties.varianttitle_texttransform,
+                                                    fontSize: sectionproperties.varianttitle_fontSize + 'px',
+                                                }}
+                                            >
+                                                {sectionproperties.showselect == 'Show' && <span>{lang.select}</span>} {''} {langdetect == 'en' ? item.optionname : item.optionname_ar}:
+                                            </p>
+                                        </div>
+                                        <div
+                                            className="col-lg-12 col-md-12 d-flex pb-md-3 justify-content-start align-items-start scrollhorixontalcontainer pt-1"
+                                            style={{
+                                                paddingTop: sectionproperties.showRemovebutton == 'Show' ? '1rem' : 0,
+                                            }}
+                                        >
+                                            {item.optionvalues.map((optionvaluesitem, optionvaluesindex) => {
+                                                var isoptionvalueselected = 0;
+                                                if (optionvaluesitem.isselected == 1) {
+                                                    isoptionvalueselected = 1;
+                                                } else {
+                                                    isoptionvalueselected = 0;
+                                                }
+                                                var isoptionvaluedenabled = 0;
+                                                if (optionvaluesitem.isenabled == 1) {
+                                                    isoptionvaluedenabled = 1;
+                                                } else {
+                                                    isoptionvaluedenabled = 0;
+                                                }
+                                                if (item.optionname == 'color' || item.optionname == 'Color') {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                productinfostyles.color_container +
+                                                                ' mr-2 variabttcontainer ' +
+                                                                `${isoptionvalueselected == 1 ? productinfostyles.color_container_active : ''}`
+                                                            }
+                                                            onClick={() => {
+                                                                if (optionvaluesitem.isenabled == 1) {
+                                                                    selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                } else {
+                                                                    clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                background: optionvaluesitem.valuename,
+                                                                opacity: isoptionvaluedenabled == 1 ? 1 : 0.2,
+                                                                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
+                                                            }}
+                                                        ></div>
+                                                    );
+                                                } else if (item.optionname == 'size' || item.optionname == 'Size') {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                `${productinfostyles.variant_container} ${productinfostyles.size_variant_container}` +
+                                                                ' mr-2 variabttcontainer allcentered ' +
+                                                                `${isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''}`
+                                                            }
+                                                            onClick={() => {
+                                                                if (optionvaluesitem.isenabled == 1) {
+                                                                    selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                } else {
+                                                                    clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
+                                                                backgroundColor:
+                                                                    isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
+                                                                minWidth: sectionproperties.variantcontainer_minwidth + 'px',
+                                                                height: sectionproperties.variantcontainer_height + 'px',
+                                                                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
+                                                                position: 'relative',
+                                                                border:
+                                                                    isoptionvalueselected == 1
+                                                                        ? '1px solid green'
+                                                                        : isoptionvaluedenabled == 1
+                                                                        ? '1px solid ' + sectionproperties.variantcontainerbordercolor
+                                                                        : '1px solid ' + ' grey ',
+                                                            }}
+                                                        >
+                                                            {isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && (
+                                                                <p
+                                                                    class="m-0 p-0 bg-danger bgdanger-hover"
+                                                                    style={{
+                                                                        position: 'absolute',
+                                                                        top: '-15px',
+                                                                        right: '-5px',
+                                                                        width: '3vh',
+                                                                        height: '3vh',
+                                                                        borderRadius: 100,
+                                                                    }}
+                                                                >
+                                                                    <i class="h-100 allcentered">
+                                                                        <IoMdClose />
+                                                                    </i>
+                                                                </p>
+                                                            )}
+                                                            <p
+                                                                className={'wordbreak m-0 p-0 d-flex align-items-center justify-content-center'}
+                                                                style={{
+                                                                    color: sectionproperties.variantcontainer_color,
+                                                                    fontSize: sectionproperties.variantcontainer_fontSize + 'px',
+                                                                    fontWeight: 500,
+                                                                }}
+                                                            >
+                                                                {langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar}
+                                                            </p>
+                                                        </div>
+                                                    );
+                                                } else {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                productinfostyles.variant_container +
+                                                                ' mr-2 variabttcontainer allcentered pl-2 pr-2 ' +
+                                                                `${isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''}`
+                                                            }
+                                                            onClick={() => {
+                                                                if (optionvaluesitem.isenabled == 1) {
+                                                                    selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                } else {
+                                                                    clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                backgroundColor:
+                                                                    isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
+                                                                width: 'auto',
+                                                                height: sectionproperties.variantcontainer_height + 'px',
+                                                                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
+                                                                position: 'relative',
+                                                            }}
+                                                        >
+                                                            {isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && (
+                                                                <p
+                                                                    class="m-0 p-0 bg-danger bgdanger-hover"
+                                                                    style={{
+                                                                        position: 'absolute',
+                                                                        top: '-15px',
+                                                                        right: '-5px',
+                                                                        width: '3vh',
+                                                                        height: '3vh',
+                                                                        borderRadius: 100,
+                                                                    }}
+                                                                >
+                                                                    <i class="h-100 allcentered">
+                                                                        <IoMdClose />
+                                                                    </i>
+                                                                </p>
+                                                            )}
+                                                            <p
+                                                                className={'m-0 p-0 allcentered'}
+                                                                style={{
+                                                                    color: sectionproperties.variantcontainer_color,
+                                                                    fontSize: sectionproperties.variantcontainer_fontSize + 'px',
+                                                                }}
+                                                            >
+                                                                {langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar}
+                                                            </p>
+                                                        </div>
+                                                    );
+                                                }
+                                            })}
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    {sectionproperties.variantstyle == 'Select Box' &&
+                        ProductInfoObj?.data?.productinfo?.productoptions?.map((item, index) => {
+                            var orgselectoptions = [];
+                            var selecteditemid = null;
+                            var placeholdervalue = '';
+                            placeholdervalue = 'Choose' + ' ' + (langdetect == 'en' ? item.optionname : item.optionname_ar);
+                            if (item.optionvalues != undefined && Array.isArray(item.optionvalues)) {
+                                orgselectoptions = item.optionvalues;
+                                // optionvaluesitem.isselected
+                            }
+                            orgselectoptions.forEach(function (getselcitem, getselindex) {
+                                if (getselcitem.isselected == 1) {
+                                    selecteditemid = getselcitem.valueid;
+                                }
+                            });
+                            return (
+                                <div
+                                    class={
+                                        sectionproperties.numberofcolsperrow == '2'
+                                            ? 'col-lg-2 col-md-3 col-sm-12 mb-3 p-sm-0'
+                                            : sectionproperties.numberofcolsperrow == '3'
+                                            ? ' col-lg-3 col-md-3 col-sm-12 mb-3 p-sm-0'
+                                            : sectionproperties.numberofcolsperrow == '4'
+                                            ? 'col-lg-4 col-md-4 col-sm-12 mb-3 p-sm-0'
+                                            : sectionproperties.numberofcolsperrow == '6'
+                                            ? 'col-lg-6 col-md-6 col-sm-12 mb-3 p-sm-0'
+                                            : 'col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0'
+                                    }
+                                >
+                                    <label
+                                        className={' d-flex align-items-start mb-2 '}
+                                        style={{
+                                            color: sectionproperties.varianttitle_color,
+                                            fontWeight: sectionproperties.varianttitle_fontweight,
+                                            textTransform: sectionproperties.varianttitle_texttransform,
+                                            fontSize: sectionproperties.varianttitle_fontSize + 'px',
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? item.optionname : item.optionname_ar}
+                                    </label>
+                                    <div
+                                        style={{
+                                            width: '100%',
+                                        }}
+                                        className={`${loginstyles.form_control} ${formstyles.form_control}` + ' variantselectbox '}
+                                    >
+                                        <Select
+                                            options={orgselectoptions}
+                                            getOptionLabel={(option) => {
+                                                var crname = '';
+                                                if (langdetect == 'en') {
+                                                    crname = option.valuename;
+                                                } else if (langdetect == 'ar') {
+                                                    crname = option.valuename_ar;
+                                                }
+                                                return crname;
+                                            }}
+                                            getOptionValue={(option) => option.valueid}
+                                            value={orgselectoptions.filter((option) => option.valueid == selecteditemid)}
+                                            onChange={(optionvaluesitem) => {
+                                                var optionvaluesindex = null;
+                                                orgselectoptions?.forEach(function (tempitm, tempind) {
+                                                    if (tempitm.valueid == optionvaluesitem.valueid) {
+                                                        optionvaluesindex = tempind;
+                                                    }
+                                                });
+                                                if (optionvaluesindex != null) {
+                                                    if (optionvaluesitem.isenabled == 1) {
+                                                        selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                    } else {
+                                                        clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                    }
+                                                }
+                                            }}
+                                            styles={defaultstylesnone}
+                                            placeholder={placeholdervalue}
+                                            isSearchable={true}
+                                        />
+                                    </div>
+                                </div>
+                            );
+                        })}
+                </div>
+            )}
+        </>
+    );
+};
+export default Variantoptions;

package/srcoman/TabexComponents/StaticPages/Productinfo4-4/staticroutersidenav.module.css

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

package/srcoman/TabexComponents/StaticPages/RefundPolicy/RefundPolicy.jsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from 'react';
+import tabstyles from '../../../styles/general/tabs.module.css';
+import { css } from 'glamor';
+import Staticpagesrouter from '../Staticpagesrouter/Staticpagesrouter.jsx';
+import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+
+const RefundPolicy = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [policychoosedindex, setpolicychoosedindex] = useState('');
+    const templatepropcontext = props.actions.templatepropcontext;
+    const fetchInstitutePoliciesQueryContext = props.actions.fetchInstitutePoliciesQueryContext;
+    const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
+    const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const actions = props.actions;
+    const [CurrentPageId, setCurrentPageId] = useState('');
+    const routingcountext = props.actions.routingcountext;
+
+    useEffect(() => {
+        if (Object.keys(StatePagePropertiesContext).length != 0) {
+            var secpropobj = {};
+            StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+                secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+            });
+            setsectionproperties({ ...secpropobj });
+        }
+    }, [StatePagePropertiesContext]);
+    useEffect(() => {
+        var cartindex = templatepropcontext?.pagesnprop?.findIndex((x) => x.staticpageid == '650c3c37dd5bf');
+        if (cartindex >= 0) {
+            setCurrentPageId(cartindex);
+        }
+    }, []);
+    useEffect(() => {
+        var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
+        tempFetchQueriesEngineContext.fetchinstitutepolicy = true;
+        setFetchQueriesEngineContext({ ...tempFetchQueriesEngineContext });
+    }, []);
+    const [bgimagesarray, setbgimagesarray] = useState([]);
+    useEffect(() => {
+        if (sectionproperties.length != 0) {
+            if (sectionproperties.arrayofobjectimagesonly != null) {
+                var arrayofobjectimagesonlyparsed = JSON.parse(sectionproperties.arrayofobjectimagesonly);
+                if (Array.isArray(arrayofobjectimagesonlyparsed)) {
+                    setbgimagesarray([...arrayofobjectimagesonlyparsed]);
+                }
+            }
+        }
+    }, [sectionproperties]);
+    const returnpolicyobj = (policytype) => {
+        var policyobj = {};
+        fetchInstitutePoliciesQueryContext?.data?.data?.policies?.forEach(function (item, index) {
+            if (item.policytype == policytype) {
+                policyobj = item;
+            }
+        });
+        return policyobj;
+    };
+
+    const policies_cssstyles = {
+        containerstyle: css({
+            paddingTop: sectionproperties.paddingTop + 'px',
+            paddingBottom: sectionproperties.paddingBottom + 'px',
+            backgroundColor: sectionproperties.backgroundColor,
+            '@media (max-width: 800px)': {
+                paddingTop: sectionproperties.paddingtopresponsive + 'px',
+            },
+        }),
+        sectiontitle: css({
+            fontSize: sectionproperties.sectionTitleFontSize + 'px',
+            color: sectionproperties.sectionTitleColor,
+            fontWeight: sectionproperties.sectionTitleFontWeight,
+            marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+            marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+            '@media (max-width: 800px)': {
+                fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
+            },
+        }),
+    };
+    return (
+        <div className={' row ml-0 mr-0 w-100 d-flex justify-content-center '} style={{ minHeight: '70vh', backgroundColor: sectionproperties.backgroundColor }}>
+            <div className={' col-lg-12 p-0 '}>
+                <div className={policies_cssstyles.containerstyle + ' row ml-0 mr-0 w-100 '}>
+                    {sectionproperties.image_height != 0 && (
+                        <div
+                            className="col-lg-12 p-0 d-flex justify-content-center"
+                            style={{
+                                cursor: bgimagesarray[0]?.IsClickable == 'Yes' ? 'pointer' : 'default',
+                            }}
+                            onClick={() => {
+                                if (bgimagesarray[0]?.IsClickable == 'Yes') {
+                                    if (bgimagesarray[0]?.clickable_page_route && bgimagesarray[0]?.clickable_page_route.length != 0) {
+                                        routingcountext(bgimagesarray[0].clickable_page_route, false, '');
+                                    } else {
+                                        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + bgimagesarray[0].Clickable_Reference_Collection_ID);
+                                    }
+                                }
+                            }}
+                        >
+                            <div
+                                class={sectionproperties.bgcovercontainresponsive == 'Contain' ? 'h-sm-auto mb-sm-4' : ''}
+                                style={{
+                                    width: sectionproperties.image_width + 'vw',
+                                    height: 'auto',
+                                    marginBottom: sectionproperties.image_mb + 'px',
+                                    position: 'relative',
+                                }}
+                            >
+                                <Imagekitimagecomp
+                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                    path={
+                                        bgimagesarray.length != 0
+                                            ? langdetect == 'en'
+                                                ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + bgimagesarray[0]?.bgsection_image
+                                                : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + bgimagesarray[0]?.bgsection_image_ar
+                                            : ''
+                                    }
+                                    class="d-flex d-sm-none"
+                                    style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        margin: 0,
+                                        padding: 0,
+                                        borderRadius: sectionproperties.imageborderradius + 'px',
+                                        zIndex: -1,
+                                        objectFit: 'contain',
+                                    }}
+                                />
+                                <Imagekitimagecomp
+                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                    path={
+                                        bgimagesarray.length != 0
+                                            ? langdetect == 'en'
+                                                ? '/tr:w-' + sectionproperties.imagetr_w_resp + ',h-' + sectionproperties.imagetr_h_resp + '/' + bgimagesarray[0]?.bgsection_imageresponsive
+                                                : '/tr:w-' + sectionproperties.imagetr_w_resp + ',h-' + sectionproperties.imagetr_h_resp + '/' + bgimagesarray[0]?.bgsection_imageresponsive_ar
+                                            : ''
+                                    }
+                                    class="d-none d-sm-flex"
+                                    style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        margin: 0,
+                                        padding: 0,
+                                        objectFit: sectionproperties.bgcovercontainresponsive,
+                                        borderRadius: sectionproperties.imageborderradius + 'px',
+                                        zIndex: -1,
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                    <div
+                        class="row m-0 w-100 pl-md-4 pr-md-4"
+                        style={{
+                            paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+                            paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+                        }}
+                    >
+                        <div class={' col-lg-12 p-0 text-start '}>
+                            <p class={policies_cssstyles.sectiontitle + ' p-0 '}>
+                                {langdetect == 'en' ? returnpolicyobj('Refund Policy')?.policypagename_en : returnpolicyobj('Refund Policy')?.policypagename_ar}
+                            </p>
+                        </div>
+                        <div
+                            className={'col-lg-12 p-0 text-start'}
+                            style={{
+                                color: sectionproperties.prodCatColor,
+                                fontSize: sectionproperties.prodCatFontSize + 'px',
+                                fontWeight: sectionproperties.prodCatFontWeight,
+                            }}
+                        >
+                            {!fetchInstitutePoliciesQueryContext.isFetching && fetchInstitutePoliciesQueryContext.isSuccess && (
+                                <p
+                                    dangerouslySetInnerHTML={{
+                                        __html: langdetect == 'en' ? returnpolicyobj('Refund Policy')?.policycontent_en : returnpolicyobj('Refund Policy')?.policycontent_ar,
+                                    }}
+                                    style={{
+                                        textAlign: langdetect == 'en' ? 'left' : 'right',
+                                    }}
+                                ></p>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default RefundPolicy;