fc2e2d2cfc
* Fix error logs * Improve LBC sticker flow/clarity * Show inline error if custom sticker amount below min * Sort emojis alphabetically * Improve loading of Images * Improve quality and display of emojis and fix CSS * Display both USD and LBC prices * Default to LBC tip if creator can't receive USD * Don't clear text-field after sticker is sent * Refactor notification component * Handle notifications * Don't show profile pic on sticker livestream comments * Change Sticker icon * Fix wording and number rounding * Fix blurring emojis * Disable non functional emote buttons
84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
// @flow
|
|
import 'scss/component/_file-price.scss';
|
|
import * as ICONS from 'constants/icons';
|
|
import classnames from 'classnames';
|
|
import CreditAmount from 'component/common/credit-amount';
|
|
import Icon from 'component/common/icon';
|
|
import React from 'react';
|
|
|
|
type Props = {
|
|
claim: ?{},
|
|
claimIsMine: boolean,
|
|
claimWasPurchased: boolean,
|
|
costInfo?: ?{ includesData: boolean, cost: number },
|
|
fetching: boolean,
|
|
showFullPrice: boolean,
|
|
type?: string,
|
|
uri: string,
|
|
// below props are just passed to <CreditAmount />
|
|
customPrices?: { priceFiat: number, priceLBC: number },
|
|
hideFree?: boolean, // hide the file price if it's free
|
|
isFiat?: boolean,
|
|
showLBC?: boolean,
|
|
doFetchCostInfoForUri: (string) => void,
|
|
};
|
|
|
|
class FilePrice extends React.PureComponent<Props> {
|
|
static defaultProps = { showFullPrice: false };
|
|
|
|
componentDidMount() {
|
|
this.fetchCost(this.props);
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
this.fetchCost(this.props);
|
|
}
|
|
|
|
fetchCost = (props: Props) => {
|
|
const { costInfo, uri, fetching, claim, doFetchCostInfoForUri } = props;
|
|
|
|
if (uri && costInfo === undefined && !fetching && claim) doFetchCostInfoForUri(uri);
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
costInfo,
|
|
showFullPrice,
|
|
showLBC,
|
|
isFiat,
|
|
hideFree,
|
|
claimWasPurchased,
|
|
type,
|
|
claimIsMine,
|
|
customPrices,
|
|
} = this.props;
|
|
|
|
if (!customPrices && (claimIsMine || !costInfo || !costInfo.cost || (!costInfo.cost && hideFree))) return null;
|
|
|
|
const className = classnames(claimWasPurchased ? 'filePrice__key' : 'filePrice', {
|
|
'filePrice--filepage': type === 'filepage',
|
|
'filePrice--modal': type === 'modal',
|
|
});
|
|
|
|
return claimWasPurchased ? (
|
|
<span className={className}>
|
|
<Icon icon={ICONS.PURCHASED} size={type === 'filepage' ? 22 : undefined} />
|
|
</span>
|
|
) : (
|
|
<CreditAmount
|
|
amount={costInfo ? costInfo.cost : undefined}
|
|
customAmounts={
|
|
customPrices ? { amountFiat: customPrices.priceFiat, amountLBC: customPrices.priceLBC } : undefined
|
|
}
|
|
className={className}
|
|
isEstimate={!!costInfo && !costInfo.includesData}
|
|
isFiat={isFiat}
|
|
showFree
|
|
showFullPrice={showFullPrice}
|
|
showLBC={showLBC}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default FilePrice;
|