lbry-desktop/ui/modal/modalAffirmPurchase/view.jsx

121 lines
3.3 KiB
React
Raw Normal View History

2018-09-26 19:48:07 +02:00
// @flow
import React from 'react';
2020-05-21 17:38:28 +02:00
import classnames from 'classnames';
import FilePrice from 'component/filePrice';
import { Modal } from 'modal/modal';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
import Button from 'component/button';
2017-09-07 23:18:33 +02:00
2020-05-21 17:38:28 +02:00
// This number is tied to transitions in scss/purchase.scss
const ANIMATION_LENGTH = 2500;
2018-09-26 19:48:07 +02:00
type Props = {
closeModal: () => void,
2020-05-21 17:38:28 +02:00
loadVideo: (string, (GetResponse) => void) => void,
2018-09-26 19:48:07 +02:00
uri: string,
cancelPurchase: () => void,
2019-04-24 16:02:08 +02:00
metadata: StreamMetadata,
2020-05-21 17:38:28 +02:00
analyticsPurchaseEvent: GetResponse => void,
playingUri: ?PlayingUri,
setPlayingUri: (?string) => void,
2018-09-26 19:48:07 +02:00
};
2020-05-21 17:38:28 +02:00
function ModalAffirmPurchase(props: Props) {
const {
closeModal,
loadVideo,
metadata: { title },
uri,
analyticsPurchaseEvent,
playingUri,
setPlayingUri,
2020-05-21 17:38:28 +02:00
} = props;
const [success, setSuccess] = React.useState(false);
const [purchasing, setPurchasing] = React.useState(false);
const modalTitle = __('Confirm Purchase');
2018-05-31 06:32:31 +02:00
2020-05-21 17:38:28 +02:00
function onAffirmPurchase() {
setPurchasing(true);
loadVideo(uri, fileInfo => {
setPurchasing(false);
setSuccess(true);
analyticsPurchaseEvent(fileInfo);
if (!playingUri || playingUri.uri !== uri) {
setPlayingUri(uri);
}
2020-05-21 17:38:28 +02:00
});
2017-09-08 05:15:05 +02:00
}
function cancelPurchase() {
if (playingUri && uri === playingUri.uri) {
setPlayingUri(null);
}
closeModal();
}
2020-05-21 17:38:28 +02:00
React.useEffect(() => {
let timeout;
if (success) {
timeout = setTimeout(() => {
closeModal();
setSuccess(false);
}, ANIMATION_LENGTH);
}
2017-09-07 23:18:33 +02:00
2020-05-21 17:38:28 +02:00
return () => {
if (timeout) {
clearTimeout(timeout);
}
};
}, [success, uri]);
2020-05-21 17:38:28 +02:00
return (
<Modal type="card" isOpen contentLabel={modalTitle} onAborted={cancelPurchase}>
<Card
title={modalTitle}
subtitle={
<div className={classnames('purchase-stuff', { 'purchase-stuff--purchased': success })}>
<div>
{success && (
<div className="purchase-stuff__text--purchased">
{__('Purchased!')}
<div className="purchase_stuff__subtext--purchased">
{__('This content will now be in your Library.')}
</div>
</div>
)}
{/* Keep this message rendered but hidden so the width doesn't change */}
<I18nMessage
tokens={{
claim_title: <strong>{title ? `"${title}"` : uri}</strong>,
}}
>
Are you sure you want to purchase %claim_title%?
</I18nMessage>
</div>
2020-05-21 17:38:28 +02:00
<div>
<FilePrice uri={uri} showFullPrice type="modal" />
</div>
</div>
}
actions={
<div className="section__actions" style={success ? { visibility: 'hidden' } : undefined}>
<Button
button="primary"
disabled={purchasing}
label={purchasing ? __('Purchasing...') : __('Purchase')}
2020-05-21 17:38:28 +02:00
onClick={onAffirmPurchase}
/>
<Button button="link" label={__('Cancel')} onClick={cancelPurchase} />
</div>
}
/>
</Modal>
);
2017-09-07 23:18:33 +02:00
}
export default ModalAffirmPurchase;