tabexseriescomponents 0.0.706 → 0.0.708

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

@@ -0,0 +1,312 @@
+//productidprops
+import React, { useEffect, useState } from 'react';
+import { css } from 'glamor';
+
+const ProductHeaderPricing = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const sectionproperties = props.actions.sectionproperties;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const variantindexcompleted = props.actions.variantindexcompleted;
+    const getprice_discountpriceprops = props.actions.getprice_discountpriceprops;
+    const quantityconditionfoundobjprops = props.actions.quantityconditionfoundobjprops;
+    const productinfo_cssstyles = props.actions.productinfo_cssstyles;
+    const [defaultpricing, setdefaultpricing] = useState('');
+    useEffect(() => {
+        var price = '';
+        if (variantindexcompleted.length == 0 && fetchProductInfoQueryContext.data.data.productinfo.hassale == 0) {
+            price = getprice_discountpriceprops('defaultprice', 0, variantindexcompleted);
+        } else if (variantindexcompleted.length == 0 && fetchProductInfoQueryContext.data.data.productinfo.hassale == 1) {
+            price = getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted);
+        } else if (variantindexcompleted.length != 0 && fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 1) {
+            price = getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted);
+        } else {
+            price = getprice_discountpriceprops('defaultprice', 0, variantindexcompleted);
+        }
+        setdefaultpricing(price);
+    }, [variantindexcompleted]);
+    const SaleCounterPill = () => {
+        return (
+            <div class="row m-0 w-100">
+                <div class="col-lg-12 p-0 d-flex align-items-center justift-content-start">
+                    <p class="m-0 p-0 d-flex align-items-center justift-content-start">
+                        <span
+                            style={{
+                                fontSize: sectionproperties.counterTitleFontSize + 'px',
+                                color: sectionproperties.counterTitleColor,
+                                fontWeight: sectionproperties.counterTitleFontWeight,
+                            }}
+                        >
+                            {langdetect == 'en' ? sectionproperties.countertitleen : sectionproperties.countertitlear}
+                        </span>
+                        <span
+                            class="ml-1 mr-1"
+                            style={{
+                                fontSize: sectionproperties.counterValueFontSize + 'px',
+                                color: sectionproperties.counterValueColor,
+                                fontWeight: sectionproperties.counterValueFontWeight,
+                            }}
+                        >
+                            {parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted) - getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted)).toFixed(2)}{' '}
+                            {langdetect == 'en' ? authdetailsContext?.currencyname_en : authdetailsContext?.currencyname_ar}
+                        </span>
+                    </p>
+
+                    <div
+                        style={{
+                            background: sectionproperties.pillbgcolor,
+                            width: 'fit-content',
+                            borderRadius: sectionproperties.pillborderBottomLeftRadius + 'px',
+                            border: sectionproperties.pillBorderWidth + 'px solid ' + sectionproperties.pillBorderColor,
+                            direction: 'ltr',
+                        }}
+                        class="ml-2 mr-2"
+                    >
+                        <p
+                            class="m-0 pl-2 pr-2 py-0"
+                            style={{
+                                color: sectionproperties.pillcolor,
+                                fontWeight: sectionproperties.pillfontWeight,
+                                fontSize: '13px',
+                                lineHeight: '25px',
+                            }}
+                        >
+                            {'-' +
+                                parseFloat(
+                                    Math.round(
+                                        10.0 *
+                                            ((parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)) -
+                                                parseFloat(getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted))) /
+                                                parseFloat(getprice_discountpriceprops('defaultprice', 0, variantindexcompleted))) *
+                                            100,
+                                    ) / 10.0,
+                                ).toFixed(0) +
+                                '%'}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div class="col-lg-12 p-0">
+            <div
+                class="row mx-0 w-100"
+                style={{
+                    marginBottom: sectionproperties.reservationmarginvertical + 'px',
+                    marginTop: sectionproperties.reservationmarginvertical + 'px',
+                }}
+            >
+                {sectionproperties.showDefaultPricingSection == 'Show' && (
+                    <div
+                        class="col-lg-12 p-0 mb-3 d-flex justift-content-start"
+                        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',
+                            }}
+                        >
+                            <span
+                                style={{
+                                    fontSize: sectionproperties.defaultPriceFontSize + 'px',
+                                    fontWeight: sectionproperties.defaultPriceFontWeight,
+                                    color: sectionproperties.defaultPriceColor,
+                                }}
+                            >
+                                {quantityconditionfoundobjprops != null && (
+                                    <>
+                                        {quantityconditionfoundobjprops?.type == 'add' ? '+' : '-'}
+                                        {quantityconditionfoundobjprops?.value}%
+                                    </>
+                                )}
+                            </span>
+                            <div class="col-lg-12 p-0 d-flex justift-content-start">
+                                <p class="m-0 p-0">
+                                    <span
+                                        style={{
+                                            fontSize: sectionproperties.defaultPriceFontSize + 'px',
+                                            fontWeight: sectionproperties.defaultPriceFontWeight,
+                                            color: sectionproperties.defaultPriceColor,
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''}{' '}
+                                        {/* {fetchProductInfoQueryContext.data.data.productinfo.hassale == 0
+                                            ? getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)
+                                            : getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted)}{' '} */}
+                                        {/* {defaultpricing}  */}
+                                        {variantindexcompleted != undefined &&
+                                            variantindexcompleted.length == 0 &&
+                                            fetchProductInfoQueryContext.data.data.productinfo.hassale == 0 &&
+                                            getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)}
+                                        {variantindexcompleted != undefined &&
+                                            variantindexcompleted.length == 0 &&
+                                            fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 &&
+                                            getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted)}
+                                        {variantindexcompleted != undefined &&
+                                            variantindexcompleted.length != 0 &&
+                                            fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 1 &&
+                                            getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted)}
+                                        {variantindexcompleted != undefined &&
+                                            variantindexcompleted.length != 0 &&
+                                            fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 0 &&
+                                            getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)}
+                                        {/* if (variantindexcompleted.length == 0 && fetchProductInfoQueryContext.data.data.productinfo.hassale == 0) {
+            price = getprice_discountpriceprops('defaultprice', 0, variantindexcompleted);
+        } else if (variantindexcompleted.length == 0 && fetchProductInfoQueryContext.data.data.productinfo.hassale == 1) {
+            price = getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted);
+        } else if (variantindexcompleted.length != 0 && fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 1) {
+            price = getprice_discountpriceprops('defaultsaleprice', 0, variantindexcompleted);
+        } else {
+            price = getprice_discountpriceprops('defaultprice', 0, variantindexcompleted);
+        } */}
+                                        {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                    </span>
+                                    {fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && variantindexcompleted.length == 0 && (
+                                        <span
+                                            style={{
+                                                fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
+                                                fontWeight: sectionproperties.defaultSalePriceFontWeight,
+                                                color: sectionproperties.defaultSalePriceColor,
+                                            }}
+                                        >
+                                            {' '}
+                                            -{' '}
+                                        </span>
+                                    )}
+                                    {fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1 &&
+                                        variantindexcompleted != undefined &&
+                                        fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 1 && (
+                                            <span
+                                                style={{
+                                                    fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
+                                                    fontWeight: sectionproperties.defaultSalePriceFontWeight,
+                                                    color: sectionproperties.defaultSalePriceColor,
+                                                }}
+                                            >
+                                                {' '}
+                                                -{' '}
+                                            </span>
+                                        )}
+                                    {fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && variantindexcompleted.length == 0 && (
+                                        <span
+                                            class="linethrough"
+                                            style={{
+                                                fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
+                                                fontWeight: sectionproperties.defaultSalePriceFontWeight,
+                                                color: sectionproperties.defaultSalePriceColor,
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)}{' '}
+                                            {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                        </span>
+                                    )}
+                                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.hasvariants == 1 &&
+                                        fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 1 && (
+                                            <span
+                                                class="linethrough"
+                                                style={{
+                                                    fontSize: sectionproperties.defaultSalePriceFontSize + 'px',
+                                                    fontWeight: sectionproperties.defaultSalePriceFontWeight,
+                                                    color: sectionproperties.defaultSalePriceColor,
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {getprice_discountpriceprops('defaultprice', 0, variantindexcompleted)}{' '}
+                                                {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                            </span>
+                                        )}
+                                </p>
+                            </div>
+                            {/* here */}
+                            {fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && sectionproperties.showpill == 'Show' && variantindexcompleted.length == 0 && (
+                                <div class="col-lg-12 p-0 d-flex align-items-center justift-content-start">{SaleCounterPill()}</div>
+                            )}
+                            {fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1 &&
+                                variantindexcompleted != undefined &&
+                                fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 1 && (
+                                    // fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1 &&
+                                    //     variantindexcompleted != undefined &&
+                                    //     fetchProductInfoQueryContext?.data?.data?.productinfo?.variants[variantindexcompleted]?.hassale == 1 &&
+                                    <div class="col-lg-12 p-0 d-flex align-items-center justift-content-start">{SaleCounterPill()}</div>
+                                )}
+                        </div>
+                    </div>
+                )}
+                {/*  */}
+                {sectionproperties.showcashbackcontainer == 'Show' && fetchProductInfoQueryContext?.data?.data?.productinfo?.productcashbackvalue > 0 && (
+                    <div class="col-lg-12 p-0 d-flex justify-content-start mt-1 mb-2">
+                        <div class={`${productinfo_cssstyles.cashbackoutercontainer}` + ' d-flex flex-row allcentered px-2 '}>
+                            <p
+                                class="m-0 p-0"
+                                style={{
+                                    fontWeight: 500,
+                                }}
+                            >
+                                {langdetect == 'en' ? sectionproperties.cashbackcontainercontenten : sectionproperties.cashbackcontainercontentar}
+                            </p>
+                            <p
+                                class="m-0 p-0 mx-1"
+                                style={{
+                                    fontWeight: 600,
+                                }}
+                            >
+                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {fetchProductInfoQueryContext?.data?.data?.productinfo?.productcashbackvalue}{' '}
+                                {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                            </p>
+                        </div>
+                    </div>
+                )}
+                {sectionproperties.showprofitcontainer == 'Show' && (
+                    <div class="col-lg-12 p-0 mb-2">
+                        <div class={productinfo_cssstyles.profitcontainer + ' allcentered '}>
+                            <p class={' m-0 p-0 d-flex align-items-center justify-content-center '}>
+                                <span
+                                    style={{
+                                        fontWeight: sectionproperties.profitcontainerfontweight,
+                                    }}
+                                >
+                                    {langdetect == 'en' ? sectionproperties.profitcontainercontenten : sectionproperties.profitcontainercontentar}:{' '}
+                                </span>
+                                <span
+                                    class="mx-1"
+                                    style={{
+                                        fontWeight: sectionproperties.profitcontainersecondaryfontweight,
+                                    }}
+                                >
+                                    {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''}{' '}
+                                    {parseFloat(
+                                        Math.round(
+                                            parseInt(
+                                                fetchProductInfoQueryContext.data.data.productinfo.hassale == 0
+                                                    ? parseFloat(getprice_discountpriceprops('defaultprice', 1, variantindexcompleted)).toFixed(2)
+                                                    : parseFloat(getprice_discountpriceprops('defaultsaleprice', 1, variantindexcompleted)).toFixed(2),
+                                            ) *
+                                                (fetchProductInfoQueryContext.data.data.productinfo.prodaffpercentprofit / 100),
+                                        ),
+                                    ).toFixed(0)}{' '}
+                                    {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                    {/* {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''}{' '}
+                                    {parseFloat(
+                                        Math.round(
+                                            parseInt(item.hassale == 1 ? item.defaultsaleprice : item.defaultprice) * (fetchProductInfoQueryContext.data.data.productinfo.prodaffpercentprofit / 100),
+                                        ),
+                                    ).toFixed(0)}{' '}
+                                    {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar} */}
+                                </span>
+                            </p>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+export default ProductHeaderPricing;

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

@@ -0,0 +1,235 @@
+//productidprops
+import React, { useEffect, useState } from 'react';
+import { Messaging } from 'react-cssfx-loading';
+import '../../../styles/staticpages/image-gallery.css';
+import ReactStars from 'react-rating-stars-component';
+import { Modal } from 'react-bootstrap';
+// import Addreviewform from './Addreviewform.jsx';
+import AddReview from '../AddReview/AddReview.jsx';
+const ProductReviews = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const sectionproperties = props.actions.sectionproperties;
+    const actions = props.actions;
+    const productid = fetchProductInfoQueryContext?.data?.data?.productinfo?.productid;
+    const productinfo_cssstyles = props.actions.productinfo_cssstyles;
+    const [canuserreview, setcanuserreview] = useState(false);
+    const [openreviewmodal, setopenreviewmodal] = useState(false);
+    const [filterproductreviews, setfilterproductreviews] = useState('all');
+    const [productreviews, setproductreviews] = useState([]);
+    useEffect(() => {
+        if (fetchProductInfoQueryContext.isSuccess) {
+            getreviewsassignermutationfunc();
+        }
+    }, [filterproductreviews]);
+    const getreviewsassignermutationfunc = () => {
+        GeneralAPIMutationContext.mutate({
+            endpointurl: '/fetchproductreviews',
+            productid: fetchProductInfoQueryContext?.data?.data?.productinfo?.productid,
+            filterproductreviews: filterproductreviews,
+            mutateSuccesscallback: (data, variables) => {
+                if (data.data.status) {
+                    setproductreviews(data.data.productreviews);
+                    setcanuserreview(data.data.canuserAddReview);
+                } else {
+                    // NotificationManager.warning('', data.data.reason);
+                }
+            },
+        });
+    };
+    const addreviewcallback = () => {
+        setopenreviewmodal(false);
+        getreviewsassignermutationfunc();
+        fetchProductInfoQueryContext.refetch();
+    };
+
+    return (
+        <div
+            className={'row w-100 ml-0 mr-0'}
+            style={{
+                marginTop: sectionproperties.marginTop + 'px',
+            }}
+        >
+            <div class="col-lg-12 p-0 w-100 pl-5 pr-5 p-md-0 plr-1025-0">
+                {GeneralAPIMutationContext.isLoading && (
+                    <div class="col-lg-12 allcentered" style={{ height: '20vh' }}>
+                        <Messaging color="#ccc" width="10px" height="10px" duration="1s" />
+                    </div>
+                )}
+                {!GeneralAPIMutationContext.isLoading && (
+                    <div class="row m-0 w-100">
+                        <div class="col-lg-3">
+                            <div class="row m-0 w-100 allcentered">
+                                {canuserreview && (
+                                    <div class="col-lg-12 allcentered mb-3 p-0">
+                                        <button
+                                            class={`${productinfo_cssstyles.reviewbutton}` + ' '}
+                                            onClick={() => {
+                                                setopenreviewmodal(true);
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? sectionproperties.reviewbtn_contenten : sectionproperties.reviewbtn_contentar}
+                                        </button>
+                                    </div>
+                                )}
+                                <div class="col-lg-12 p-0 mb-3">
+                                    <div
+                                        class="row m-0 w-100 py-3 px-2"
+                                        style={{
+                                            borderRadius: 10,
+                                            background: '#eee',
+                                        }}
+                                    >
+                                        <div class="col-lg-12 p-0 allcentered">
+                                            <p
+                                                class="m-0 font-weight-600 text-uppercase"
+                                                style={{
+                                                    fontSize: '17px',
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? 'Overall Ratings' : 'جميع التقييمات'}
+                                            </p>
+                                        </div>
+                                        <div class="col-lg-12 pl-3 pr-3">
+                                            <hr />
+                                        </div>
+                                        <div class="col-lg-12 p-0 allcentered">
+                                            <p
+                                                class="m-0 p-0 font-weight-600"
+                                                style={{
+                                                    fontSize: '20px',
+                                                }}
+                                            >
+                                                {fetchProductInfoQueryContext?.data?.data?.productinfo?.productoverallrate}/5
+                                            </p>
+                                        </div>
+                                        <div class="col-lg-12 p-0 allcentered">
+                                            <ReactStars
+                                                count={5}
+                                                value={fetchProductInfoQueryContext?.data?.data?.productinfo?.productoverallrate}
+                                                edit={false}
+                                                size={18}
+                                                emptyIcon={<i className="far fa-star" style={{ color: '#bfbfbf' }}></i>}
+                                                halfIcon={<i className="fa fa-star-half-alt style={{ color: '#FAB400' }}"></i>}
+                                                filledIcon={<i className="fa fa-star" style={{ color: '#FAB400' }}></i>}
+                                                activeColor="#ffd700"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-12 p-0 d-flex justify-content-start mb-3">
+                                    <div
+                                        class="row m-0 w-100 py-3 px-2"
+                                        style={{
+                                            borderRadius: 10,
+                                            background: '#eee',
+                                        }}
+                                    >
+                                        <div class="col-lg-12 p-0 allcentered">
+                                            <p
+                                                class="m-0 font-weight-600 text-uppercase"
+                                                style={{
+                                                    fontSize: '17px',
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                                            </p>
+                                        </div>
+                                        <div class="col-lg-12 pl-3 pr-3">
+                                            <hr />
+                                        </div>
+                                        <div class="col-lg-12 d-flex justify-content-center">
+                                            <ReactStars
+                                                count={5}
+                                                value={filterproductreviews}
+                                                // edit={false}
+                                                size={18}
+                                                emptyIcon={<i className="far fa-star" style={{ color: '#bfbfbf' }}></i>}
+                                                halfIcon={<i className="fa fa-star-half-alt style={{ color: '#FAB400' }}"></i>}
+                                                filledIcon={<i className="fa fa-star" style={{ color: '#FAB400' }}></i>}
+                                                activeColor="#ffd700"
+                                                onChange={(event) => {
+                                                    setfilterproductreviews(event);
+                                                }}
+                                            />
+
+                                            {/* <select
+                                                                    value={filterproductreviews}
+                                                                    onChange={(event) => {
+                                                                        setfilterproductreviews(event.target.value);
+                                                                    }}
+                                                                >
+                                                                    <option value="all">all</option>
+                                                                    <option value="5">5</option>
+                                                                    <option value="4">4</option>
+                                                                    <option value="3">3</option>
+                                                                    <option value="2">2</option>
+                                                                    <option value="1">1</option>
+                                                                </select> */}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-9">
+                            <div class="row m-0 w-100">
+                                {productreviews?.map(function (reviewitem, reviewindex) {
+                                    return (
+                                        <div class="col-lg-12 flex-column">
+                                            <div class="row m-0 w-100">
+                                                <div class="col-lg-12 d-flex justify-content-start p-0 mb-2">
+                                                    <ReactStars
+                                                        count={5}
+                                                        value={reviewitem.review_rating}
+                                                        edit={false}
+                                                        size={18}
+                                                        emptyIcon={<i className="far fa-star" style={{ color: '#bfbfbf' }}></i>}
+                                                        halfIcon={<i className="fa fa-star-half-alt style={{ color: '#FAB400' }}"></i>}
+                                                        filledIcon={<i className="fa fa-star" style={{ color: '#FAB400' }}></i>}
+                                                        activeColor="#ffd700"
+                                                    />
+                                                </div>
+                                                <div class="col-lg-12 p-0 mb-2 d-flex justify-content-start ">
+                                                    <p
+                                                        class="m-0 p-0 font-weight-600"
+                                                        style={{
+                                                            fontSize: '17px',
+                                                        }}
+                                                    >
+                                                        {reviewitem.reviewtitle}
+                                                    </p>
+                                                </div>
+                                                <div class="col-lg-12 p-0 d-flex justify-content-start mb-2">
+                                                    <p class="m-0 p-0 font-weight-500">{reviewitem.reviewbody}</p>
+                                                </div>
+                                                <div class="col-lg-6 d-flex align-items-center justify-content-start p-0">
+                                                    <p class="m-0 p-0 font-weight-600">
+                                                        {langdetect == 'en' ? 'By' : 'عن طريق'}: {reviewitem.review_name}
+                                                    </p>
+                                                </div>
+                                                <div class="col-lg-6 d-flex align-items-center justify-content-end justify-content-md-start p-0 font-weight-500 text-light">
+                                                    <i class="fa fa-clock text-light ml-2 mr-2" /> {reviewitem.timestamp}
+                                                </div>
+                                            </div>
+                                            <hr />
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+            <Modal show={openreviewmodal} onHide={() => setopenreviewmodal(false)} centered size="md" class="reviewmodal">
+                <Modal.Body>
+                    <AddReview actions={{ ...actions, productid: productid, canuserreview: canuserreview, addreviewcallback: addreviewcallback }} />
+                    {/* <Addreviewform actions={{ ...actions, productid: productid, canuserreview: canuserreview, addreviewcallback: addreviewcallback, productinfo_cssstyles: productinfo_cssstyles }} /> */}
+                </Modal.Body>
+            </Modal>
+        </div>
+    );
+};
+export default ProductReviews;