diff options
Diffstat (limited to 'src/components/subscription/SubscriptionPopup.js')
-rw-r--r-- | src/components/subscription/SubscriptionPopup.js | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js new file mode 100644 index 000000000..528d02907 --- /dev/null +++ b/src/components/subscription/SubscriptionPopup.js | |||
@@ -0,0 +1,83 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import Webview from 'react-electron-web-view'; | ||
6 | |||
7 | import Button from '../ui/Button'; | ||
8 | |||
9 | const messages = defineMessages({ | ||
10 | buttonCancel: { | ||
11 | id: 'subscriptionPopup.buttonCancel', | ||
12 | defaultMessage: '!!!Cancel', | ||
13 | }, | ||
14 | buttonDone: { | ||
15 | id: 'subscriptionPopup.buttonDone', | ||
16 | defaultMessage: '!!!Done', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | @observer | ||
21 | export default class SubscriptionPopup extends Component { | ||
22 | static propTypes = { | ||
23 | url: PropTypes.string.isRequired, | ||
24 | closeWindow: PropTypes.func.isRequired, | ||
25 | completeCheck: PropTypes.func.isRequired, | ||
26 | isCompleted: PropTypes.bool.isRequired, | ||
27 | }; | ||
28 | |||
29 | static contextTypes = { | ||
30 | intl: intlShape, | ||
31 | }; | ||
32 | |||
33 | state = { | ||
34 | isFakeLoading: false, | ||
35 | }; | ||
36 | |||
37 | // We delay the window closing a bit in order to give | ||
38 | // the Recurly webhook a few seconds to do it's magic | ||
39 | delayedCloseWindow() { | ||
40 | this.setState({ | ||
41 | isFakeLoading: true, | ||
42 | }); | ||
43 | |||
44 | setTimeout(() => { | ||
45 | this.props.closeWindow(); | ||
46 | }, 4000); | ||
47 | } | ||
48 | |||
49 | render() { | ||
50 | const { url, closeWindow, completeCheck, isCompleted } = this.props; | ||
51 | const { intl } = this.context; | ||
52 | |||
53 | return ( | ||
54 | <div className="subscription-popup"> | ||
55 | <div className="subscription-popup__content"> | ||
56 | <Webview | ||
57 | className="subscription-popup__webview" | ||
58 | |||
59 | autosize | ||
60 | src={encodeURI(url)} | ||
61 | onDidNavigate={completeCheck} | ||
62 | // onNewWindow={(event, url, frameName, options) => | ||
63 | // openWindow({ event, url, frameName, options })} | ||
64 | /> | ||
65 | </div> | ||
66 | <div className="subscription-popup__toolbar franz-form"> | ||
67 | <Button | ||
68 | label={intl.formatMessage(messages.buttonCancel)} | ||
69 | buttonType="secondary" | ||
70 | onClick={closeWindow} | ||
71 | disabled={isCompleted} | ||
72 | /> | ||
73 | <Button | ||
74 | label={intl.formatMessage(messages.buttonDone)} | ||
75 | onClick={() => this.delayedCloseWindow()} | ||
76 | disabled={!isCompleted} | ||
77 | loaded={!this.state.isFakeLoading} | ||
78 | /> | ||
79 | </div> | ||
80 | </div> | ||
81 | ); | ||
82 | } | ||
83 | } | ||