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