adding economic calendar

src/javascript/app/pages/bottom/__tests__/economic_calendar.js

@@ -0,0 +1,146 @@
+const expect = require('chai').expect;
+const React = require('react');
+const { render, screen, fireEvent, waitFor } = require('@testing-library/react');
+const { act } = require('react-dom/test-utils');
+const BinarySocket = require('../../../base/socket');
+const EconomicCalendar = require('../economic_calendar.jsx').default;
+
+jest.mock('../../../base/socket');
+
+describe('EconomicCalendar', () => {
+    const mockEvent = {
+        release_date: '2024-02-20T13:30:00Z',
+        event_name: 'US GDP',
+        currency: 'USD',
+        forecast: { display_value: '2.5%' },
+        impact: { display_value: 'high' }
+    };
+
+    const mockResponse = {
+        economic_calendar: {
+            events: [mockEvent]
+        }
+    };
+
+    beforeEach(() => {
+        BinarySocket.send.mockImplementation(() => Promise.resolve(mockResponse));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders loading state initially', () => {
+        render(<EconomicCalendar />);
+        expect(screen.getByText('Loading economic calendar data...')).to.exist;
+    });
+
+    it('fetches and displays economic calendar data', async () => {
+        render(<EconomicCalendar />);
+
+        await waitFor(() => {
+            expect(BinarySocket.send).to.have.been.calledWith({ economic_calendar: 1 });
+            expect(screen.getByText('US GDP')).to.exist;
+            expect(screen.getByText('USD')).to.exist;
+            expect(screen.getByText('2.5%')).to.exist;
+            expect(screen.getByText('high')).to.exist;
+        });
+    });
+
+    it('formats date correctly', async () => {
+        render(<EconomicCalendar />);
+
+        await waitFor(() => {
+            const formattedDate = screen.getByText('20/02/2024');
+            expect(formattedDate).to.exist;
+        });
+    });
+
+    it('handles empty data', async () => {
+        BinarySocket.send.mockImplementationOnce(() => 
+            Promise.resolve({ economic_calendar: { events: [] } })
+        );
+
+        render(<EconomicCalendar />);
+
+        await waitFor(() => {
+            expect(screen.getByText('No economic calendar events available')).to.exist;
+        });
+    });
+
+    it('handles API error', async () => {
+        BinarySocket.send.mockImplementationOnce(() => 
+            Promise.reject(new Error('API Error'))
+        );
+
+        render(<EconomicCalendar />);
+
+        await waitFor(() => {
+            expect(screen.getByText('No economic calendar events available')).to.exist;
+        });
+    });
+
+    it('applies correct impact class', async () => {
+        render(<EconomicCalendar />);
+
+        await waitFor(() => {
+            const impactCell = screen.getByText('high').closest('td');
+            expect(impactCell.classList.contains('high-impact')).to.be.true;
+        });
+    });
+
+    it('refreshes data periodically', async () => {
+        jest.useFakeTimers();
+        render(<EconomicCalendar />);
+
+        await waitFor(() => {
+            expect(BinarySocket.send).to.have.been.calledTimes(1);
+        });
+
+        act(() => {
+            jest.advanceTimersByTime(5 * 60 * 1000); // 5 minutes
+        });
+
+        expect(BinarySocket.send).to.have.been.calledTimes(2);
+
+        jest.useRealTimers();
+    });
+
+    it('handles missing forecast values', async () => {
+        const eventWithoutForecast = {
+            ...mockEvent,
+            forecast: null
+        };
+
+        BinarySocket.send.mockImplementationOnce(() => 
+            Promise.resolve({ 
+                economic_calendar: { 
+                    events: [eventWithoutForecast] 
+                } 
+            })
+        );
+
+        render(<EconomicCalendar />);
+
+        await waitFor(() => {
+            const cells = screen.getAllByRole('cell');
+            const forecastCell = cells.find(cell => cell.textContent === '-');
+            expect(forecastCell).to.exist;
+        });
+    });
+
+    it('handles cleanup on unmount', () => {
+        jest.useFakeTimers();
+        const { unmount } = render(<EconomicCalendar />);
+
+        unmount();
+
+        act(() => {
+            jest.advanceTimersByTime(5 * 60 * 1000);
+        });
+
+        expect(BinarySocket.send).to.have.been.calledTimes(1); // Only initial call, no refresh after unmount
+
+        jest.useRealTimers();
+    });
+});

src/javascript/app/pages/bottom/economic_calendar.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import BinarySocket from '../../base/socket';
+import { localize } from '../../../_common/localize';
+
+const EconomicCalendar = () => {
+    const [calendarData, setCalendarData] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchCalendarData = () => {
+            setIsLoading(true);
+            BinarySocket.send({ 
+                economic_calendar: 1
+            }).then((response) => {
+                console.log('Economic Calendar Response:', response);
+                if (response.economic_calendar) {
+                    setCalendarData(response.economic_calendar.events || []);
+                }
+                setIsLoading(false);
+            }).catch((error) => {
+                console.error('Error fetching economic calendar:', error);
+                setIsLoading(false);
+            });
+        };
+
+        fetchCalendarData();
+
+        // Refresh data every 5 minutes
+        const intervalId = setInterval(fetchCalendarData, 5 * 60 * 1000);
+
+        return () => clearInterval(intervalId);
+    }, []);
+
+    const headers = [
+        'Date',
+        'Event',
+        'Currency',
+        'Forecast',
+        'Impact'
+    ];
+
+    const formatDate = (dateString) => {
+        if (!dateString) return '-';
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-GB', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const getImpactClass = (impact) => {
+        if (!impact) return '';
+
+        const impactValue = typeof impact === 'object' ? impact.display_value : impact;
+        if (!impactValue || typeof impactValue !== 'string') return '';
+
+        const impactClasses = {
+            high: 'high-impact',
+            medium: 'medium-impact',
+            low: 'low-impact'
+        };
+        return impactClasses[impactValue.toLowerCase()] || '';
+    };
+
+    const getDisplayValue = (field) => {
+        if (!field) return '-';
+        if (typeof field === 'object' && 'display_value' in field) {
+            return field.display_value;
+        }
+        return field.toString();
+    };
+
+    return (
+        <div className="economic-calendar">
+            {isLoading ? (
+                <div className="loading">{localize('Loading economic calendar data...')}</div>
+            ) : (
+                <table>
+                    <thead>
+                        <tr>
+                            {headers.map((header, index) => (
+                                <th key={index}>{localize(header)}</th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {calendarData.map((event, index) => (
+                            <tr key={index}>
+                                <td>{formatDate(event.release_date)}</td>
+                                <td>{event.event_name}</td>
+                                <td>{event.currency}</td>
+                                <td>{getDisplayValue(event.forecast)}</td>
+                                <td className={getImpactClass(event.impact)}>{getDisplayValue(event.impact)}</td>
+                            </tr>
+                        ))}
+                        {calendarData.length === 0 && (
+                            <tr>
+                                <td colSpan={5} className="no-data">
+                                    {localize('No economic calendar events available')}
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    );
+};
+
+export default EconomicCalendar;

src/javascript/app/pages/bottom/tabs.jsx

@@ -9,6 +9,7 @@ import { useMarketChange, useContractChange } from '../../hooks/events';
 import { localize } from '../../../_common/localize';
 import dataManager from '../../common/data_manager.js';
 import LastDigit from '../trade/last_digit.jsx';
+import EconomicCalendar from './economic_calendar.jsx';
 
 const BottomTabs = () => {
     const has_market_change = useMarketChange();
@@ -29,7 +30,11 @@ const BottomTabs = () => {
         document.querySelectorAll('#trade_analysis li')?.[id]?.querySelector('a').click();
     };
 
-    const tabs = [{ label: localize('Chart') }, { label: localize('Explanation') }];
+    const tabs = [
+        { label: localize('Chart') },
+        { label: localize('Explanation') },
+        { label: localize('Economic Calendar') }
+    ];
 
     const bottom_tab_options = has_last_digit
         ? [...tabs, { label: localize('Last Digit Stats') }]
@@ -46,8 +51,8 @@ const BottomTabs = () => {
     useEffect(() => {
         if (saved_tab !== null) {
             const tab_index = parseInt(saved_tab);
-            if (tab_index === 2 && !has_last_digit) {
-                setSelectedTab(1);
+            if (tab_index === 3 && !has_last_digit) {
+                setSelectedTab(2);
             } else {
                 setSelectedTab(tab_index);
             }
@@ -57,14 +62,14 @@ const BottomTabs = () => {
     }, [has_last_digit]);
 
     useEffect(() => {
-        const opposite_tab = (selected_tab + 1) > 2 ? 0 : (selected_tab + 1);
+        const opposite_tab = (selected_tab + 1) > (has_last_digit ? 3 : 2) ? 0 : (selected_tab + 1);
 
         triggerOldTab(opposite_tab);
 
         trigger_old_tab_timer.current = setTimeout(() => {
             triggerOldTab(selected_tab);
         }, 100);
-    }, [selected_tab, saved_tab]);
+    }, [selected_tab, saved_tab, has_last_digit]);
 
     useEffect(() => () => {
         clearTimeout(trigger_old_tab_timer.current);
@@ -87,7 +92,8 @@ const BottomTabs = () => {
                     onLoad={() => setIsShowGraph(true)}
                 />}
                 {selected_tab === 1 && <Explanation />}
-                {selected_tab === 2 && has_last_digit && <LastDigit />}
+                {selected_tab === 2 && <EconomicCalendar />}
+                {selected_tab === 3 && has_last_digit && <LastDigit />}
 
                 <div id='tab_graph' className={`chart-section ${is_show_graph ? '' : 'graph-hide'}`}>
                     <p className='error-msg' id='chart-error' />

src/sass/app/pages/economic_calendar.scss

@@ -0,0 +1,50 @@
+.economic-calendar {
+    padding: 1rem;
+
+    .loading {
+        text-align: center;
+        padding: 2rem;
+        color: var(--text-general);
+    }
+
+    .no-data {
+        text-align: center;
+        color: var(--text-less-prominent);
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+
+        th, td {
+            padding: 0.75rem;
+            text-align: left;
+            border-bottom: 1px solid var(--general-section-1);
+        }
+
+        th {
+            background-color: var(--general-section-1);
+            color: var(--text-prominent);
+            font-weight: bold;
+        }
+
+        tr:hover {
+            background-color: var(--general-hover);
+        }
+    }
+
+    // Impact level styling
+    .high-impact {
+        color: var(--text-loss-danger);
+        font-weight: bold;
+    }
+
+    .medium-impact {
+        color: var(--text-warning);
+        font-weight: bold;
+    }
+
+    .low-impact {
+        color: var(--text-success);
+    }
+}