import React, { useState, useEffect, useContext } from "react"; import axios from 'axios'; import Header from "../Header"; import ChartBar from "../../../components/ChartBar"; import ChartLine from "../../../components/ChartLine"; import { SettingsContext } from "../../App/SettingsContext"; import { translate, formatPrice } from "../../../Helper"; import { displayProPopup } from "../../../Helper"; import Loader from "../../../components/core/Loader"; function ReportsTab() { const { isPro } = useContext(SettingsContext); const [activeReportTab, setActiveReportTab] = useState(localStorage.getItem('active-report-tab') || 'total_referral_coupons'); const [loading, setLoading] = useState(false); const [reportsData, setReportsData] = useState(null); const [timeRange, setTimeRange] = useState(localStorage.getItem('active-report-timerange') || 'echo_range_last_week'); const [totalDiscount, setTotalDiscount] = useState(0); const [totalDiscountWithCoupon, setTotalDiscountWithCoupon] = useState(0); const [totalSales, setTotalSales] = useState(0); const [totalSalesWithCoupon, setTotalSalesWithCoupon] = useState(0); const [totalReferralOrderWithCoupon, setTotalReferralOrderWithCoupon] = useState(0); const handleActiveReportTab = (name) => { localStorage.setItem('active-report-tab', name); setActiveReportTab(name); }; const handleTimeRangeChange = (range) => { localStorage.setItem('active-report-timerange', range); setTimeRange(range); }; const fetchReportsData = async () => { setLoading(true); try { const formData = new FormData(); formData.append('action', 'get_chart_data'); formData.append('nonce', ecreAdmin.nonce); formData.append('report_fetch_data[time_range]', timeRange); formData.append('report_fetch_data[report_tab]', activeReportTab); const response = await axios.post(ecreAdmin.ajaxurl, formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); if (response.data) { setReportsData(response.data); } else { console.error('Error fetching data'); } } catch (error) { console.error('Error fetching data:', error); } finally { setLoading(false); } }; useEffect(() => { fetchReportsData(); }, [activeReportTab, timeRange]); useEffect(() => { // Initialize totals let discount = 0; let discountWithCoupon = 0; let salesCnt = 0; let salesWithCouponCnt = 0; let totalReferralOrderCount = 0; // Validate and process reportsData if (reportsData && Array.isArray(reportsData.chart_data) && reportsData.chart_data.length > 0) { if (activeReportTab === 'total_discount_coupons') { reportsData.chart_data.forEach((entry) => { const totalDiscount = parseFloat(entry.total_discount) || 0; // Corrected key const totalDiscountWithReferral = parseFloat(entry.total_discount_with_referral) || 0; // Corrected key // Accumulate totals discount += totalDiscount; discountWithCoupon += totalDiscountWithReferral; }); } if (activeReportTab === 'total_sales_coupons') { reportsData.chart_data.forEach((entry) => { const totalSales = parseFloat(entry.total_sales) || 0; // Corrected key const totalSalesWithReferral = parseFloat(entry.total_sales_with_referral) || 0; // Corrected key // Accumulate totals salesCnt += totalSales; salesWithCouponCnt += totalSalesWithReferral; }); } if (activeReportTab === 'total_referral_coupons') { reportsData.chart_data.forEach((entry) => { const referralCount = parseInt(entry.referral_order_count, 10) || 0; // Base-10 parsing for referral_order_count totalReferralOrderCount += referralCount; }); } } // Update state setTotalDiscount(discount); setTotalDiscountWithCoupon(discountWithCoupon); setTotalSales(salesCnt); setTotalSalesWithCoupon(salesWithCouponCnt); setTotalReferralOrderWithCoupon(totalReferralOrderCount); }, [reportsData, activeReportTab, timeRange]); return (
{activeReportTab === 'total_referral_coupons' ? ( reportsData && reportsData.chart_data ? (
{translate('total_referral_coupons')}
{translate('view_referral_coupons')}
{totalReferralOrderWithCoupon}
{translate('referral_coupons_total')}
{reportsData.top_coupons && reportsData.top_coupons.length > 0 ? (
{translate('top_coupons')}
{reportsData.top_coupons.map((coupon, index) => ( ))}
{translate('coupon_code')} {translate('total_orders')} {translate('total_discount')}{translate('creation_date')} {translate('expiration_date')} {translate('discount_type')}
{coupon.coupon_code} {coupon.total_orders} {formatPrice(coupon.total_discount)} {coupon.creation_date} {coupon.expiration_date} {translate(coupon.discount_type)}
) : (
{translate('no_top_coupons')}
)}
) : ) : null} {activeReportTab === 'total_sales_coupons' ? ( reportsData && reportsData.chart_data ? (
{translate('sales_referral_coupon')}
{translate('view_sales_referral_coupon')}
{formatPrice(totalSales)}
{translate('total_sales')}
{formatPrice(totalSalesWithCoupon)}
{translate('total_sales_with_coupon')}
) : ) : ''} {activeReportTab === 'total_discount_coupons' ? ( reportsData && reportsData.chart_data ? (
{translate('total_discount')}
{translate('view_total_discount')}
{formatPrice(totalDiscount)}
{translate('total_discount_offered')}
{formatPrice(totalDiscountWithCoupon)}
{translate('total_discount_with_coupon')}
) : ) : ''}
); } export default ReportsTab;