1 | import React from 'react';
|
2 |
|
3 | import EmailAddressList from './email-address-list';
|
4 | import Footnote from './footnote';
|
5 | import CustomMessage from './custom-message';
|
6 |
|
7 | export default ({ isReady, isOpen,
|
8 | emailAddresses, emailAddressErrors, onEmailAddressChange, onAddEmailAddress, onRemoveEmailAddress,
|
9 | customMessage, messageText, image, onMessageTyping, messageLength, onSend, isSending, onClose }) => (
|
10 | <div className={`email-article email-article--${isReady && isOpen ? 'open' : 'closed'}`}>
|
11 | <div className="email-article__border">
|
12 | <button onClick={onClose} type="button" className="o-buttons o-buttons--medium email-article__close"><i>Close</i></button>
|
13 | <form noValidate onSubmit={(e) => { e.preventDefault(); onSend() }} className="email-article__container">
|
14 | <h1 className="email-article__title">Email this subscriber-only article</h1>
|
15 | <EmailAddressList
|
16 | items={emailAddresses}
|
17 | errors={emailAddressErrors}
|
18 | onItemChange={onEmailAddressChange}
|
19 | onAdd={onAddEmailAddress}
|
20 | onRemove={onRemoveEmailAddress}
|
21 | showMaySub={true}
|
22 | />
|
23 | <CustomMessage
|
24 | customMessage={customMessage}
|
25 | messageText={messageText}
|
26 | image={image}
|
27 | onMessageTyping={onMessageTyping}
|
28 | messageLength={messageLength}
|
29 | />
|
30 | <button type="submit" disabled={isSending} className="email-article__submit o-buttons o-buttons--standout o-buttons--big">Send article</button>
|
31 | <Footnote />
|
32 | </form>
|
33 | </div>
|
34 | </div>
|
35 | );
|