forked from webclinic017/passiv-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
CouponPage.tsx
95 lines (86 loc) · 2.66 KB
/
CouponPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { Redirect, Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { putData } from '../api';
import { loadSubscription } from '../actions';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import ShadowBox from '../styled/ShadowBox';
import { H1, P } from '../styled/GlobalElements';
import { Step } from '../styled/SignupSteps';
import { Error } from '../types/groupInfo';
const BoldCode = styled.span`
font-weight: 600;
font-family: mono;
`;
const CouponPage = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error>();
const [success, setSuccess] = useState(false);
const [code, setCode] = useState<string | null>(null);
const dispatch = useDispatch();
useEffect(() => {
let urlParams = new URLSearchParams(window.location.search);
let coupon = urlParams.get('code');
let couponCode = { coupon: coupon };
setLoading(true);
setCode(coupon);
putData('/api/v1/coupon/', couponCode)
.then(() => {
setLoading(false);
setSuccess(true);
dispatch(loadSubscription());
})
.catch(error => {
setLoading(false);
setError(error.response.data);
dispatch(loadSubscription());
});
}, [dispatch]);
let errorMessage = null;
if (error) {
switch (error.code) {
case '1009':
errorMessage = (
<P>
The coupon code <BoldCode>{code}</BoldCode> is invalid or expired.
</P>
);
break;
default:
errorMessage = (
<P>
We encountered an unexpected error while attempting to apply the
coupon <BoldCode>{code}</BoldCode> to your account. Please try again
later or <Link to="/app/help">contact support</Link> if this
persists.
</P>
);
break;
}
}
if (success) {
return <Redirect to="/app/settings" />;
} else {
return (
<ShadowBox background="#2a2d34">
<H1 color="white">Apply Coupon</H1>
{loading ? (
<React.Fragment>
<Step>
Applying coupon <BoldCode>{code}</BoldCode> to your account...{' '}
<FontAwesomeIcon icon={faSpinner} spin />
</Step>
</React.Fragment>
) : (
<React.Fragment>
<Step>Failed to apply the coupon :(</Step>
<ShadowBox>{errorMessage}</ShadowBox>
</React.Fragment>
)}
</ShadowBox>
);
}
};
export default CouponPage;