|
1 |
| -import React, { Component } from 'react'; |
2 |
| -import { Paper, Typography, Container} from '@material-ui/core'; |
3 |
| -import { withStyles } from '@material-ui/core/styles'; |
| 1 | +import React, {Component} from 'react'; |
| 2 | +import {Paper, Typography, Container} from '@material-ui/core'; |
| 3 | +import {withStyles} from '@material-ui/core/styles'; |
4 | 4 | import styles from "./styles/ContactInfo.module.css";
|
5 | 5 | import _ from 'lodash';
|
6 | 6 | import {formatPhoneNumber} from "../../../utils/utils";
|
7 | 7 |
|
8 |
| -const StyledContact = withStyles((theme)=>({ |
9 |
| - root:{ |
10 |
| - span:{ |
11 |
| - fontWeight:600, |
12 |
| - }, |
13 |
| - }, |
14 | 8 |
|
| 9 | +const SOURCE_TYPES = ["salesforcecontacts", "volgistics", "shelterluvpeople"] |
| 10 | +const StyledContact = withStyles((theme) => ({ |
| 11 | + root: { |
| 12 | + span: { |
| 13 | + fontWeight: 600, |
| 14 | + }, |
| 15 | + } |
15 | 16 | }))(Typography);
|
16 | 17 |
|
| 18 | + |
17 | 19 | class ContactInfo extends Component {
|
| 20 | + constructor(props) { |
| 21 | + super(props); |
| 22 | + } |
| 23 | + |
| 24 | + |
| 25 | + populate_participant_with_data_source(participant, participantData) { |
| 26 | + return { |
| 27 | + first_name: _.get(participantData, "first_name") || _.get(participant, "first_name"), |
| 28 | + last_name: _.get(participantData, "last_name") || _.get(participant, "last_name"), |
| 29 | + email: _.get(participantData, "email") || _.get(participant, "email"), |
| 30 | + mobile: _.get(participantData, "mobile") || _.get(participant, "mobile"), |
| 31 | + city: _.get(participantData, "city") || _.get(participant, "city"), |
| 32 | + street_and_number: _.get(participantData, "street_and_number") || _.get(participant, "street_and_number") |
| 33 | + }; |
| 34 | + } |
| 35 | + |
| 36 | + //populates by the order of the source types array |
| 37 | + populate_participant_data(participantArray) { |
| 38 | + let retVal = {}; |
| 39 | + |
| 40 | + _.map(SOURCE_TYPES, source_type => { |
| 41 | + const participant_salesforce_data = _.find(participantArray, {"source_type": source_type}); |
| 42 | + retVal = this.populate_participant_with_data_source(participant_salesforce_data, retVal); |
| 43 | + }); |
| 44 | + |
| 45 | + return retVal |
| 46 | + } |
| 47 | + |
| 48 | + |
18 | 49 | render() {
|
19 |
| - // TODO: move to the backend |
20 | 50 | let participantArray = _.get(this.props, "participant");
|
21 |
| - let participant = {}; |
22 |
| - if (participantArray.length === 1) { |
23 |
| - participant = participantArray[0]; |
24 |
| - } else { |
25 |
| - participantArray = _.filter(participantArray, function(p) { |
26 |
| - if (p["source_type"] === "salesforcecontacts") { |
27 |
| - return p; |
28 |
| - } |
29 |
| - }); |
30 |
| - participant = participantArray[0]; |
31 |
| - } |
32 |
| - const phoneStr = participant.mobile; |
33 |
| - let phone = _.isEmpty(phoneStr) ? '-' : phoneStr.split(" ").join(""); |
34 |
| - return (<Container className={styles.contact_info}> |
35 |
| - <Paper variant='outlined' className={styles.contact_info_main} style={{padding:'1em'}}> |
| 51 | + let participantData = this.populate_participant_data(participantArray); |
| 52 | + |
| 53 | + return ( |
| 54 | + <Container className={styles.contact_info}> |
| 55 | + <Paper variant='outlined' className={styles.contact_info_main} style={{padding: '1em'}}> |
36 | 56 | <div className={styles.contact_container}>
|
37 | 57 | <Typography className={styles.contact_info_name}>
|
38 | 58 | <span>
|
39 |
| - {participant.first_name}{'\t'} |
40 |
| - {participant.last_name} |
| 59 | + {participantData.first_name}{'\t'} |
| 60 | + {participantData.last_name} |
41 | 61 | </span>
|
42 | 62 | </Typography>
|
43 | 63 | <StyledContact className={styles.contact_info_phone}>
|
44 | 64 | <span>
|
45 |
| - {formatPhoneNumber(phone)} |
| 65 | + {formatPhoneNumber(participantData.mobile)} |
46 | 66 | </span>
|
47 | 67 | </StyledContact>
|
48 | 68 | <Typography className={styles.contact_info_email}>
|
49 | 69 | <span>
|
50 |
| - {participant.email} |
| 70 | + {participantData.email} |
51 | 71 | </span>
|
52 | 72 | </Typography>
|
53 | 73 | <Typography className={styles.contact_info_address}>
|
54 |
| - <span style={{"textTransform":"uppercase"}}> |
55 |
| - {participant.street_and_number}{'\t'} |
56 |
| - {participant.city}{'\t'} |
| 74 | + <span style={{"textTransform": "uppercase"}}> |
| 75 | + {participantData.street_and_number}{'\t'} |
| 76 | + {participantData.city}{'\t'} |
57 | 77 | </span>
|
58 | 78 | </Typography>
|
59 | 79 | </div>
|
|
0 commit comments