/
[offer].js
171 lines (162 loc) · 4.97 KB
/
[offer].js
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
import React from "react";
import { useRouter } from "next/router";
import {
Button,
Container,
Grid,
List,
ListItem,
ListItemIcon,
ListItemText,
} from "@material-ui/core";
import { CheckCircle } from "@material-ui/icons";
import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { BrandedHeader, WideRow } from "../../components/helpers";
import useLocalStorageState from "use-local-storage-state";
// Page presenting the user with some type of offer, as specified in the url path.
//
// Utilises next.js dynamic routes to identify the offer type, hence the weird filename:
// https://nextjs.org/docs/routing/dynamic-routes
//
// Initial implementation is dumb (non-working buttons, etc) and intended just to
// demo how one might handle users of different classifications.
export default function GiveOffer(props) {
const theme = useTheme();
const router = useRouter();
const { offer } = router.query;
const [companyName, setCompanyName] = useLocalStorageState("companyName");
let sellingPoints = [
"Email Comments and Attachments",
"Future Recurring Tasks on Calendar",
"Drag and Drop Attachments",
"Copy Projects, Spaces and Lists",
"Natural Language Processing",
"Firefox and Safari Extensions",
];
// Use the company name to tailor the selling points.
if (companyName) {
sellingPoints = [
"Give your workflow a boost at " + companyName + "!",
].concat(sellingPoints);
}
const whatsNew = [
"Natural Language Processing",
"Firefox and Safari Extensions",
];
let background = "url(/images/saas-offer.png)";
if (offer === "free" || offer === "success") {
background = "url(/images/saas-register.png)";
}
return (
<Container maxWidth="lg">
<Grid
container
justifyContent="center"
alignItems="center"
spacing={2}
style={{
minHeight: useMediaQuery(theme.breakpoints.up("md")) ? "100vh" : "0",
}}
>
<Grid
item
xs={12}
md={6}
style={{
backgroundImage: background,
backgroundPosition: "center",
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
height: useMediaQuery(theme.breakpoints.up("md"))
? "640px"
: "128px",
}}
/>
<Grid item xs={12} md={6}>
{offer === "free" && (
<Offer
header="Three Months Free Trial"
copy="As a special welcome offer, we're offering your first three months for free!"
packageName="Plus Package"
sellingPoints={sellingPoints}
callToAction="Accept Offer"
/>
)}
{offer === "paid" && (
<Offer
header="$2 for Two Months"
copy="Looks like you've already redeemed a trial. Try out again for a special price"
packageName={companyName ? "Corporate Package" : "Deluxe Package"}
sellingPoints={sellingPoints}
callToAction="Choose Plan"
/>
)}
{offer === "team" && (
<Offer
header="Upgrade to Teams"
copy="Tired of sharing? Get a better experience. Choose a Team plan and bring the team along"
packageName="Team Plan"
sellingPoints={["$5 per person"].concat(sellingPoints)}
callToAction="Choose Plan"
/>
)}
{offer === "success" && (
<Offer
header="Welcome Back"
copy="Check out some of the great improvements we've made in the last month"
packageName="What's new"
sellingPoints={whatsNew}
callToAction="Continue"
/>
)}
</Grid>
</Grid>
</Container>
);
}
// Component for the actual details of an offer.
function Offer(props) {
const navigateHome = () => {
window.location.href = window.location.href.replace(/\/offer\/.*/, "");
};
return (
<Container maxWidth="sm">
<WideRow>
<BrandedHeader
logo="/images/saas-company.png"
logoAlt="btect"
text={props.header}
/>
<div>{props.copy}</div>
</WideRow>
<WideRow>
<h2>{props.packageName}</h2>
<List>
{props.sellingPoints.map((point, idx) => {
return (
<ListItem key={idx}>
<ListItemIcon>
<CheckCircle color="primary" />
</ListItemIcon>
<ListItemText>{point}</ListItemText>
</ListItem>
);
})}
</List>
</WideRow>
<WideRow>
<Button
fullWidth
size="large"
type="submit"
variant="contained"
color="primary"
onClick={navigateHome}
>
{props.callToAction}
</Button>
</WideRow>
</Container>
);
}