mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 11:43:07 +02:00
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||
|
import { FC } from 'react';
|
||
|
import { Flex } from '../../../../../common/Flex';
|
||
|
import { Text } from '../../../../../common/Text';
|
||
|
import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
|
||
|
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
|
||
|
|
||
|
interface CatalogPriceDisplayWidgetViewProps
|
||
|
{
|
||
|
offer: IPurchasableOffer;
|
||
|
}
|
||
|
|
||
|
export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProps> = props =>
|
||
|
{
|
||
|
const { offer = null } = props;
|
||
|
|
||
|
if(!offer) return null;
|
||
|
|
||
|
return (
|
||
|
<Flex gap={ 1 }>
|
||
|
{ (offer.priceInCredits > 0) &&
|
||
|
<Flex alignItems="center" justifyContent="end" gap={ 1 }>
|
||
|
<Text>{ offer.priceInCredits }</Text>
|
||
|
<CurrencyIcon type={ -1 } />
|
||
|
</Flex> }
|
||
|
{ ( offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
|
||
|
<FontAwesomeIcon icon="plus" /> }
|
||
|
{ (offer.priceInActivityPoints > 0) &&
|
||
|
<Flex alignItems="center" justifyContent="end" gap={ 1 }>
|
||
|
<Text>{ offer.priceInActivityPoints }</Text>
|
||
|
<CurrencyIcon type={ offer.activityPointType } />
|
||
|
</Flex> }
|
||
|
</Flex>
|
||
|
);
|
||
|
}
|