1 | import React from 'react'
|
2 | import PropTypes from 'prop-types'
|
3 | import styled from 'styled-components'
|
4 |
|
5 | import { P } from 'SRC'
|
6 | import BrowserDetection from 'services/browserDetection'
|
7 | import ReferralHeader from './ReferralHeader'
|
8 | import EmailShareButton from './EmailShareButton'
|
9 | import SmsButton from './SmsButton'
|
10 | import ShareOptions from './ShareOptions'
|
11 |
|
12 | const Container = styled.div`
|
13 | padding-bottom: 50px;
|
14 | padding-top: 50px;
|
15 | text-align: center;
|
16 | `
|
17 |
|
18 | const HorizontalRule = styled.div`
|
19 | margin: 35px auto 20px;
|
20 | display: flex;
|
21 | flex-direction: row;
|
22 | justify-content: center;
|
23 | align-items: center;
|
24 | max-width: 330px;
|
25 | width: 100%;
|
26 | height: 10px;
|
27 | ${props => props.theme.media.phone`
|
28 | max-width: 290px;
|
29 | `}
|
30 | `
|
31 |
|
32 | const HRule = styled.div`
|
33 | height: 1px;
|
34 | width: 50px;
|
35 | border-bottom: solid #d5d5d5 1px;
|
36 | `
|
37 |
|
38 | const StyledP = styled(P)`
|
39 | font-weight: 100;
|
40 | padding: 0 7px;
|
41 | font-size: 16px;
|
42 | line-height: 1.31;
|
43 | text-align: center;
|
44 | `
|
45 |
|
46 | const StyledSmsButton = styled(SmsButton)`
|
47 | margin-top: 30px;
|
48 | `
|
49 |
|
50 | const StyledEmailButton = styled(EmailShareButton)`
|
51 | margin-top: 30px;
|
52 | `
|
53 |
|
54 | const StyledShareOptions = styled(ShareOptions)`
|
55 | margin-top: 20px;
|
56 | `
|
57 |
|
58 | const BaseReferralSection = ({className, referralValue, homepageUrl, referralClicked, referralCode, email, name}) => {
|
59 | return (
|
60 | <div className={className}>
|
61 | <Container>
|
62 | <ReferralHeader referralValue={referralValue} homepageUrl={homepageUrl} />
|
63 | { BrowserDetection.isMobile() &&
|
64 | <StyledSmsButton
|
65 | referralValue={referralValue}
|
66 | homepageUrl={homepageUrl}
|
67 | referralClicked={referralClicked}
|
68 | referralCode={referralCode}/>
|
69 | }
|
70 | <StyledEmailButton
|
71 | email={email}
|
72 | referralValue={referralValue}
|
73 | homepageUrl={homepageUrl}
|
74 | referralClicked={referralClicked}
|
75 | referralCode={referralCode}/>
|
76 | <HorizontalRule>
|
77 | <HRule />
|
78 | <StyledP>or</StyledP>
|
79 | <HRule />
|
80 | </HorizontalRule>
|
81 | <StyledP>Share your personal link!</StyledP>
|
82 | <StyledShareOptions
|
83 | name={name}
|
84 | homepageUrl={homepageUrl}
|
85 | referralValue={referralValue}
|
86 | referralClicked={referralClicked}
|
87 | referralCode={referralCode}/>
|
88 | </Container>
|
89 | </div>
|
90 | )
|
91 | }
|
92 |
|
93 | BaseReferralSection.propTypes = {
|
94 | className: PropTypes.string,
|
95 | referralValue: PropTypes.string,
|
96 | homepageUrl: PropTypes.string,
|
97 | referralClicked: PropTypes.func,
|
98 | referralCode: PropTypes.string,
|
99 | email: PropTypes.string,
|
100 | name: PropTypes.string
|
101 | }
|
102 |
|
103 | const ReferralSection = styled(BaseReferralSection)`
|
104 | background-color: ${props => props.theme.colors.white};
|
105 | border: 15px solid ${props => props.theme.colors.lightPink};
|
106 | margin-top: 30px;
|
107 | ${props => props.theme.media.tablet`
|
108 | padding-top: 14px;
|
109 | max-width: 600px;
|
110 | margin: 30px auto 0;
|
111 | `}
|
112 |
|
113 | ${props => props.theme.media.tabletMax`
|
114 | border-width: 30px;
|
115 | `}
|
116 | `
|
117 |
|
118 | export default ReferralSection
|