2022-01-19 00:12:48 +01:00
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
|
import { FC } from 'react';
|
2022-03-03 18:03:21 +01:00
|
|
|
import { Flex, LayoutCurrencyIcon, Text } from '../../../../../common';
|
2022-02-02 21:54:40 +01:00
|
|
|
import { useCatalogContext } from '../../../CatalogContext';
|
2022-01-19 00:12:48 +01:00
|
|
|
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
|
|
|
|
|
|
|
|
interface CatalogPriceDisplayWidgetViewProps
|
|
|
|
{
|
|
|
|
offer: IPurchasableOffer;
|
2022-02-01 07:58:19 +01:00
|
|
|
separator?: boolean;
|
2022-01-19 00:12:48 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProps> = props =>
|
|
|
|
{
|
2022-02-01 07:58:19 +01:00
|
|
|
const { offer = null, separator = false } = props;
|
|
|
|
const { purchaseOptions = null } = useCatalogContext();
|
|
|
|
const { quantity = 1 } = purchaseOptions;
|
2022-01-19 00:12:48 +01:00
|
|
|
|
|
|
|
if(!offer) return null;
|
|
|
|
|
|
|
|
return (
|
2022-02-01 07:58:19 +01:00
|
|
|
<>
|
2022-01-19 00:12:48 +01:00
|
|
|
{ (offer.priceInCredits > 0) &&
|
2022-02-01 07:58:19 +01:00
|
|
|
<Flex alignItems="center" gap={ 1 }>
|
|
|
|
<Text bold>{ (offer.priceInCredits * quantity) }</Text>
|
2022-03-03 18:03:21 +01:00
|
|
|
<LayoutCurrencyIcon type={ -1 } />
|
2022-01-19 00:12:48 +01:00
|
|
|
</Flex> }
|
2022-02-01 07:58:19 +01:00
|
|
|
{ separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
|
|
|
|
<FontAwesomeIcon size="xs" color="black" icon="plus" /> }
|
2022-01-19 00:12:48 +01:00
|
|
|
{ (offer.priceInActivityPoints > 0) &&
|
2022-02-01 07:58:19 +01:00
|
|
|
<Flex alignItems="center" gap={ 1 }>
|
|
|
|
<Text bold>{ (offer.priceInActivityPoints * quantity) }</Text>
|
2022-03-03 18:03:21 +01:00
|
|
|
<LayoutCurrencyIcon type={ offer.activityPointType } />
|
2022-01-19 00:12:48 +01:00
|
|
|
</Flex> }
|
2022-02-01 07:58:19 +01:00
|
|
|
</>
|
2022-01-19 00:12:48 +01:00
|
|
|
);
|
|
|
|
}
|