2021-05-07 09:50:20 +02:00
|
|
|
import { UserCurrencyComposer } from 'nitro-renderer';
|
2021-06-22 11:52:47 +02:00
|
|
|
import { FC, useCallback, useEffect, useMemo, useReducer } from 'react';
|
2021-06-23 10:05:23 +02:00
|
|
|
import { GetConfiguration } from '../../api';
|
2021-06-22 11:52:47 +02:00
|
|
|
import { NotificationCenterEvent } from '../../events';
|
|
|
|
import { dispatchUiEvent } from '../../hooks/events';
|
2021-05-07 09:50:20 +02:00
|
|
|
import { SendMessageHook } from '../../hooks/messages/message-event';
|
2021-07-23 09:12:53 +02:00
|
|
|
import { LocalizeText } from '../../utils/LocalizeText';
|
|
|
|
import { CurrencyIcon } from '../shared/currency-icon/CurrencyIcon';
|
2021-06-23 06:03:56 +02:00
|
|
|
import { SetLastCurrencies } from './common/CurrencyHelper';
|
2021-05-07 09:50:20 +02:00
|
|
|
import { PurseContextProvider } from './context/PurseContext';
|
2021-04-15 19:29:48 +02:00
|
|
|
import { CurrencyView } from './currency/CurrencyView';
|
2021-05-07 09:50:20 +02:00
|
|
|
import { PurseMessageHandler } from './PurseMessageHandler';
|
2021-04-15 19:29:48 +02:00
|
|
|
import { PurseViewProps } from './PurseView.types';
|
2021-05-07 09:50:20 +02:00
|
|
|
import { initialPurse, PurseReducer } from './reducers/PurseReducer';
|
2021-07-23 09:12:53 +02:00
|
|
|
import { SeasonalView } from './seasonal/SeasonalView';
|
2021-04-15 19:29:48 +02:00
|
|
|
|
2021-05-07 09:50:20 +02:00
|
|
|
export const PurseView: FC<PurseViewProps> = props =>
|
2021-04-15 19:29:48 +02:00
|
|
|
{
|
2021-05-07 09:50:20 +02:00
|
|
|
const [ purseState, dispatchPurseState ] = useReducer(PurseReducer, initialPurse);
|
|
|
|
const { currencies = [] } = purseState;
|
|
|
|
|
|
|
|
const displayedCurrencies = useMemo(() =>
|
2021-04-15 19:29:48 +02:00
|
|
|
{
|
2021-05-07 09:50:20 +02:00
|
|
|
return GetConfiguration<number[]>('system.currency.types', []);
|
2021-04-21 05:36:39 +02:00
|
|
|
}, []);
|
|
|
|
|
2021-04-15 19:29:48 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
SendMessageHook(new UserCurrencyComposer());
|
|
|
|
}, []);
|
|
|
|
|
2021-05-10 19:11:16 +02:00
|
|
|
SetLastCurrencies(currencies);
|
|
|
|
|
2021-06-22 11:52:47 +02:00
|
|
|
const toggleNotificationCenter = useCallback(() =>
|
|
|
|
{
|
|
|
|
dispatchUiEvent(new NotificationCenterEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER));
|
|
|
|
}, []);
|
|
|
|
|
2021-04-15 19:29:48 +02:00
|
|
|
return (
|
2021-05-07 09:50:20 +02:00
|
|
|
<PurseContextProvider value={ { purseState, dispatchPurseState }}>
|
|
|
|
<PurseMessageHandler />
|
2021-07-07 04:26:22 +02:00
|
|
|
<div className="nitro-purse rounded-bottom d-flex flex-row justify-content-between">
|
2021-07-23 09:12:53 +02:00
|
|
|
<div className="row mx-0 w-100">
|
|
|
|
<div className="col-6 px-0">
|
|
|
|
<div className="d-flex flex-column nitro-currencies">
|
|
|
|
{ currencies && currencies.map((currency, index) =>
|
|
|
|
{
|
|
|
|
if (displayedCurrencies.indexOf(currency.type) === -1) return null;
|
|
|
|
|
|
|
|
if (currency.type === -1 || currency.type === 0 || currency.type === 5) return <CurrencyView key={index} currency={currency} />;
|
2021-04-21 05:36:39 +02:00
|
|
|
|
2021-07-23 09:12:53 +02:00
|
|
|
return null;
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="col-4 px-0">
|
|
|
|
<div className="nitro-purse-hc p-1 d-flex flex-column justify-content-center align-items-center h-100">
|
|
|
|
<CurrencyIcon className="flex-shrink-0" type="hc" />
|
|
|
|
<span>{LocalizeText('purse.clubdays.zero.amount.text')}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="col-2 px-0">
|
|
|
|
<div className="d-flex flex-column nitro-purse-buttons h-100 justify-content-center">
|
|
|
|
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-life-ring"/></div>
|
|
|
|
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-cogs"/></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-07-07 04:26:22 +02:00
|
|
|
</div>
|
|
|
|
{/*<div className="notification-button px-2" onClick={toggleNotificationCenter}>
|
2021-06-22 11:52:47 +02:00
|
|
|
<i className="fas fa-bars" />
|
2021-07-07 04:26:22 +02:00
|
|
|
</div>*/}
|
2021-04-15 19:29:48 +02:00
|
|
|
</div>
|
2021-07-23 09:12:53 +02:00
|
|
|
{ currencies && currencies.map((currency, index) =>
|
|
|
|
{
|
|
|
|
if (displayedCurrencies.indexOf(currency.type) === -1) return null;
|
|
|
|
|
|
|
|
if (currency.type === -1 || currency.type === 0 || currency.type === 5) return null;
|
|
|
|
|
|
|
|
return <SeasonalView key={index} currency={ currency } />;
|
|
|
|
})}
|
2021-05-07 09:50:20 +02:00
|
|
|
</PurseContextProvider>
|
2021-04-15 19:29:48 +02:00
|
|
|
);
|
|
|
|
}
|