index.js
57 lines
| 1 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; |
| 2 | import {useSelector} from 'react-redux'; |
| 3 | import {__} from '@wordpress/i18n'; |
| 4 | |
| 5 | import './style.scss'; |
| 6 | |
| 7 | const DonorInfo = () => { |
| 8 | const {name, addresses, company, sinceLastDonation, sinceCreated, avatarUrl, initials} = useSelector( |
| 9 | (state) => state.profile |
| 10 | ); |
| 11 | const address = addresses && addresses.billing ? addresses.billing[0] : null; |
| 12 | |
| 13 | return ( |
| 14 | <div className="give-donor-dashboard-donor-info"> |
| 15 | <div className="give-donor-dashboard-donor-info__avatar"> |
| 16 | <div className="give-donor-dashboard-donor-info__avatar-container"> |
| 17 | {avatarUrl ? ( |
| 18 | <img alt="Donor Picture" src={avatarUrl} /> |
| 19 | ) : ( |
| 20 | <span className="give-donor-dashboard-donor-info__avatar-initials"> |
| 21 | {initials ? initials : <FontAwesomeIcon icon="user" />} |
| 22 | </span> |
| 23 | )} |
| 24 | </div> |
| 25 | </div> |
| 26 | <div className="give-donor-dashboard-donor-info__details"> |
| 27 | {name && <div className="give-donor-dashboard-donor-info__name">{name}</div>} |
| 28 | {address && ( |
| 29 | <div className="give-donor-dashboard-donor-info__detail"> |
| 30 | <FontAwesomeIcon icon="map-pin" fixedWidth={true} /> {address.city},{' '} |
| 31 | {address.state.length > 0 ? address.state : address.country} |
| 32 | </div> |
| 33 | )} |
| 34 | {company && ( |
| 35 | <div className="give-donor-dashboard-donor-info__detail"> |
| 36 | <FontAwesomeIcon icon="building" fixedWidth={true} /> {company} |
| 37 | </div> |
| 38 | )} |
| 39 | {sinceLastDonation && ( |
| 40 | <div className="give-donor-dashboard-donor-info__detail"> |
| 41 | <FontAwesomeIcon icon="clock" fixedWidth={true} />{' '} |
| 42 | {sprintf(__('Last donated %s ago', 'give'), sinceLastDonation)} |
| 43 | </div> |
| 44 | )} |
| 45 | {sinceCreated && ( |
| 46 | <div className="give-donor-dashboard-donor-info__detail"> |
| 47 | <FontAwesomeIcon icon="heart" fixedWidth={true} />{' '} |
| 48 | {sprintf(__('Donor for %s', 'give'), sinceCreated)} |
| 49 | </div> |
| 50 | )} |
| 51 | </div> |
| 52 | <div className="give-donor-dashboard-donor-info__badges"></div> |
| 53 | </div> |
| 54 | ); |
| 55 | }; |
| 56 | export default DonorInfo; |
| 57 |