1 | import React from 'react';
|
2 |
|
3 | function giftLabelText (credit, monthlyAllowance) {
|
4 | if (credit > 0) return (
|
5 | <div className="gift-or-not__option-text">
|
6 | <div>Send as a gift article that can be read by anyone</div>
|
7 | <div className="gift-or-not__gift-note">
|
8 | You can send <span className="gift-or-not__gift-count">{credit} gift article{credit !== 1 ? 's' : ''}</span> this month
|
9 | </div>
|
10 | </div>
|
11 | )
|
12 | else return (
|
13 | <div className="gift-or-not__option-text">
|
14 | <div className="gift-or-not__gift-note">
|
15 | You can send <span className="gift-or-not__gift-count">0 gift articles</span> this month.
|
16 | You will be able to send {monthlyAllowance} more next month
|
17 | </div>
|
18 | </div>
|
19 | )
|
20 | }
|
21 |
|
22 | export default ({ isGift, onIsGiftChange, credit, monthlyAllowance }) => (
|
23 | <div className="gift-or-not">
|
24 | <div className="gift-or-not__option">
|
25 | <input type="radio" onChange={() => onIsGiftChange(true)} checked={isGift} disabled={credit === 0}
|
26 | id="gift-or-not__option--gift" className="o-forms-radio" />
|
27 | <label htmlFor="gift-or-not__option--gift" className="gift-or-not__label o-forms-label">
|
28 | <div className="gift-or-not__option-icon gift-or-not__option-icon--gift"></div>
|
29 | {giftLabelText(credit, monthlyAllowance)}
|
30 | </label>
|
31 | </div>
|
32 | <div className="gift-or-not__option">
|
33 | <input type="radio" onChange={() => onIsGiftChange(false)} checked={!isGift}
|
34 | id="gift-or-not__option--non-gift" className="o-forms-radio" />
|
35 | <label htmlFor="gift-or-not__option--non-gift" className="gift-or-not__label o-forms-label">
|
36 | <div className="gift-or-not__option-icon gift-or-not__option-icon--non-gift"></div>
|
37 | <div className="gift-or-not__option-text">
|
38 | Send as a non-gift article that can be read by subscribers only
|
39 | </div>
|
40 | </label>
|
41 | </div>
|
42 | </div>
|
43 | )
|