// @flow import React from 'react'; 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'; // This number is tied to transitions in scss/purchase.scss const ANIMATION_LENGTH = 2500; type Props = { closeModal: () => void, loadVideo: (string, (GetResponse) => void) => void, uri: string, cancelPurchase: () => void, metadata: StreamMetadata, analyticsPurchaseEvent: GetResponse => void, playingUri: ?PlayingUri, setPlayingUri: (?string) => void, }; function ModalAffirmPurchase(props: Props) { const { closeModal, loadVideo, metadata: { title }, uri, analyticsPurchaseEvent, playingUri, setPlayingUri, } = props; const [success, setSuccess] = React.useState(false); const [purchasing, setPurchasing] = React.useState(false); const modalTitle = __('Confirm Purchase'); function onAffirmPurchase() { setPurchasing(true); loadVideo(uri, fileInfo => { setPurchasing(false); setSuccess(true); analyticsPurchaseEvent(fileInfo); if (!playingUri || playingUri.uri !== uri) { setPlayingUri(uri); } }); } function cancelPurchase() { if (playingUri && uri === playingUri.uri) { setPlayingUri(null); } closeModal(); } React.useEffect(() => { let timeout; if (success) { timeout = setTimeout(() => { closeModal(); setSuccess(false); }, ANIMATION_LENGTH); } return () => { if (timeout) { clearTimeout(timeout); } }; }, [success, uri]); return (
{success && (
{__('Purchased!')}
{__('This content will now be in your Library.')}
)} {/* Keep this message rendered but hidden so the width doesn't change */} {title ? `"${title}"` : uri}, }} > Are you sure you want to purchase %claim_title%?
} actions={
} />
); } export default ModalAffirmPurchase;