1 | import React from 'react'
|
2 | import PropTypes from 'prop-types'
|
3 | import styled from 'styled-components'
|
4 |
|
5 | import ToggleIcon from './toggleIcon'
|
6 | import { Button, Input } from '../inputs'
|
7 |
|
8 | const AppliedInput = styled(Input)`
|
9 | max-width: 250px;
|
10 | width: 100%;
|
11 | height: 100%;
|
12 | margin-right: 10px;
|
13 | padding-left: 0;
|
14 | `
|
15 |
|
16 | const PromoButton = styled(Button)`
|
17 | max-width: 100px;
|
18 | height: 100%;
|
19 | ${props => props.theme.breakpointsVerbose.aboveTablet`
|
20 | max-width: 83px;
|
21 | `}
|
22 | `
|
23 |
|
24 | const StyledToggle = styled(ToggleIcon)`
|
25 | margin-left: 0;
|
26 | `
|
27 |
|
28 | const P = styled.p`
|
29 | font-family: ${props => props.theme.fonts.primaryFont};
|
30 | font-size: 14px;
|
31 | font-weight: 500;
|
32 | letter-spacing: 1px;
|
33 | text-align: left;
|
34 | color: ${props => props.theme.colors.rocketBlue};
|
35 | text-transform: uppercase;
|
36 | margin-left: 15px;
|
37 | margin-bottom: 0;
|
38 | margin-top: 0;
|
39 | `
|
40 |
|
41 | const ToggleContainer = styled.div`
|
42 | display: flex;
|
43 | align-items: center;
|
44 | cursor: pointer;
|
45 | justify-content: center;
|
46 | `
|
47 |
|
48 | const ApplyContainer = styled.div`
|
49 | display: flex;
|
50 | max-width: 30rem;
|
51 | margin: 0 auto;
|
52 | height: 60px !important;
|
53 | margin-top: 20px;
|
54 | `
|
55 |
|
56 | export default class CouponCodeInput extends React.Component {
|
57 | state = { show: false }
|
58 | toggle = () => {
|
59 | this.setState({ show: !this.state.show })
|
60 | }
|
61 |
|
62 | _removePromotion = () => {
|
63 | this.setState({
|
64 | couponCode: '',
|
65 | show: false
|
66 | })
|
67 | this.props.removePromotion()
|
68 | }
|
69 |
|
70 | applyPromotion = () => {
|
71 | this.props.applyPromotion(this.props.couponCode)
|
72 | }
|
73 |
|
74 | render () {
|
75 | const { errorMessage, loading, couponCode, onChange, showToggle = true } = this.props
|
76 | const { show } = this.state
|
77 |
|
78 | return (
|
79 | <div>
|
80 | {showToggle && <ToggleContainer onClick={this.toggle}>
|
81 | <StyledToggle
|
82 | show={show} />
|
83 | <P role='link' aria-label='add promo code'>ADD PROMO CODE</P>
|
84 | </ToggleContainer>}
|
85 | {(show || !showToggle) &&
|
86 | <ApplyContainer aria-live='polite'>
|
87 | <AppliedInput
|
88 | type='text'
|
89 | label='PROMO CODE'
|
90 | value={couponCode}
|
91 | onChange={onChange}
|
92 | formError={!!errorMessage}
|
93 | errorMessage={errorMessage} />
|
94 | <PromoButton loading={loading} onClick={this.applyPromotion}>
|
95 | APPLY
|
96 | </PromoButton>
|
97 | </ApplyContainer>
|
98 | }
|
99 | </div>
|
100 | )
|
101 | }
|
102 | }
|
103 |
|
104 | CouponCodeInput.propTypes = {
|
105 | couponCode: PropTypes.string,
|
106 | onChange: PropTypes.func,
|
107 | removePromotion: PropTypes.func,
|
108 | applyPromotion: PropTypes.func,
|
109 | errorMessage: PropTypes.string,
|
110 | loading: PropTypes.bool,
|
111 | showToggle: PropTypes.bool
|
112 | }
|
113 |
|
\ | No newline at end of file |