Skip to content

Commit 43f8466

Browse files
wjohnstowjohnsto
committed
adding thank-you page, allowing landing pages to not be squeeze/form pages, adding jwt thank you data
1 parent ae88af1 commit 43f8466

File tree

11 files changed

+245
-24
lines changed

11 files changed

+245
-24
lines changed

Diff for: ‎src/components/Card.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
3+
export interface CardProps {
4+
img: {
5+
src: string;
6+
alt: string;
7+
title: string;
8+
};
9+
heading: string;
10+
body: string;
11+
cta: {
12+
url: string;
13+
text: string;
14+
};
15+
}
16+
17+
export default function Card({ img, heading, body, cta }: CardProps) {
18+
return (
19+
<a className="card-link" href={cta.url} target="_blank">
20+
<div className="card">
21+
<div className="card__image">
22+
<img src={img.src} alt={img.alt} title={img.title} />
23+
</div>
24+
<div className="card__body">
25+
<h4>{heading}</h4>
26+
<small>{body}</small>
27+
</div>
28+
<div className="card__footer">
29+
<button className="button button--primary button--block">
30+
{cta.text}
31+
</button>
32+
</div>
33+
</div>
34+
</a>
35+
);
36+
}

Diff for: ‎src/components/LandingPageWrapper.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,24 @@ import useMunchkin from '../hooks/useMunchkin';
55
import useSqueeze from '../hooks/useSqueeze';
66

77
export interface LandingPageWrapperProps {
8-
thankYou: string;
8+
hasForm?: boolean;
99
}
1010

1111
export default function LandingPageWrapper({
12-
thankYou,
12+
hasForm = true,
1313
children,
1414
}: React.PropsWithChildren<LandingPageWrapperProps>) {
15-
useSqueeze();
16-
useForm(thankYou);
17-
useMunchkin();
15+
useSqueeze({ skip: !hasForm });
16+
useForm({ skip: !hasForm });
17+
useMunchkin({ skip: !hasForm });
1818

1919
return (
2020
<>
2121
<Head>
2222
<meta name="robots" content="noindex, nofollow" />
23-
<script src="//lp.redis.com/js/forms2/js/forms2.min.js"></script>
23+
{hasForm && (
24+
<script src="//lp.redis.com/js/forms2/js/forms2.min.js"></script>
25+
)}
2426
</Head>
2527
{children}
2628
</>

Diff for: ‎src/css/custom.scss

+9
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,12 @@ html[data-theme='dark'] {
5454
.home-main {
5555
overflow: hidden;
5656
}
57+
58+
.card-link {
59+
color: var(--primary-black) !important;
60+
text-decoration: none !important;
61+
62+
:hover, :active, :visited, :focus {
63+
text-decoration: none;
64+
}
65+
}

Diff for: ‎src/hooks/useForm.ts

+9-11
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,16 @@ import { useLayoutEffect } from 'react';
33

44
declare const MktoForms2: any;
55

6-
export default function useForm(thankYou: string) {
6+
export interface FormOptions {
7+
skip?: boolean;
8+
}
9+
10+
export default function useForm({ skip = false }: FormOptions) {
711
useLayoutEffect(() => {
12+
if (skip) {
13+
return;
14+
}
15+
816
const interval = setInterval(() => {
917
if (typeof MktoForms2 === 'undefined') {
1018
return;
@@ -38,16 +46,6 @@ export default function useForm(thankYou: string) {
3846
if (Object.keys(prefills).length > 0) {
3947
form.vals(prefills);
4048
}
41-
42-
form.onSuccess(() => {
43-
const el = form.getFormElem();
44-
const parent: HTMLElement = el.parent();
45-
const div = document.createElement('div');
46-
div.textContent = thankYou ?? 'Thank you for your submission!';
47-
48-
parent.append(div);
49-
el.hide();
50-
});
5149
},
5250
);
5351
});

Diff for: ‎src/hooks/useMunchkin.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,24 @@ import { useLayoutEffect } from 'react';
33

44
declare const Munchkin: any;
55

6-
export default function useMunchkin() {
6+
export interface MunchkinOptions {
7+
skip?: boolean;
8+
}
9+
10+
export default function useMunchkin({ skip = false }: MunchkinOptions) {
711
useLayoutEffect(() => {
12+
if (skip) {
13+
return;
14+
}
15+
816
let didInit = false;
917
function initMunchkin() {
1018
if (didInit === false) {
1119
didInit = true;
1220
Munchkin.init('915-NFD-128');
1321
}
1422
}
23+
1524
const s = document.createElement('script');
1625
s.type = 'text/javascript';
1726
s.async = true;
@@ -25,5 +34,5 @@ export default function useMunchkin() {
2534
};
2635
s.onload = initMunchkin;
2736
document.getElementsByTagName('head')[0].appendChild(s);
28-
}, []);
37+
}, [skip]);
2938
}

Diff for: ‎src/hooks/useQueryParams.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/ban-ts-comment */
2+
import { useMemo } from 'react';
3+
4+
export default function useQueryParams() {
5+
return useMemo(() => {
6+
return Object.fromEntries(new URLSearchParams(window.location.search));
7+
}, []);
8+
}

Diff for: ‎src/hooks/useSqueeze.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,16 @@ const selectorsToRemove = [
77
'footer.footer',
88
];
99

10-
export default function useSqueeze() {
10+
export interface SqueezeOptions {
11+
skip?: boolean;
12+
}
13+
14+
export default function useSqueeze({ skip = false }: SqueezeOptions) {
1115
useLayoutEffect(() => {
16+
if (skip) {
17+
return;
18+
}
19+
1220
try {
1321
selectorsToRemove.forEach((selector) => {
1422
document.querySelectorAll(selector).forEach((el) => {
@@ -27,5 +35,5 @@ export default function useSqueeze() {
2735
ev.stopPropagation();
2836
});
2937
} catch (e) {}
30-
});
38+
}, [skip]);
3139
}

Diff for: ‎src/pages/lp/learn-to-earn-jwt.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import LandingPageWrapper from '../../components/LandingPageWrapper';
55

66
export default function LearnToEarnJWT() {
77
return (
8-
<LandingPageWrapper thankYou="Thank you for your submission, check your email to see your score!">
8+
<LandingPageWrapper>
99
{/* @ts-ignore */}
1010
<Layout title="Learn to Earn with Redis!">
11-
<div className="padding-top--md padding-bottom--lg">
11+
<article className="padding-top--md padding-bottom--lg">
1212
<h1
1313
style={{
1414
textAlign: 'center',
@@ -41,7 +41,7 @@ export default function LearnToEarnJWT() {
4141
}}>
4242
<form className="m-form" id="mktoForm_4161"></form>
4343
</div>
44-
</div>
44+
</article>
4545
</Layout>
4646
</LandingPageWrapper>
4747
);

Diff for: ‎src/pages/lp/thank-you/data.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export const codeLinks = {
2+
jwt: [
3+
{
4+
img: {
5+
src: 'https://redis.com/wp-content/uploads/2022/07/try-free-card-500x358-3.jpg?&auto=webp&quality=85,75&width=500',
6+
alt: 'Try Redis Free',
7+
title: 'Try Redis Free',
8+
},
9+
heading: 'Try Redis for Free',
10+
body: 'Get a free account to start building your next app.',
11+
cta: {
12+
text: 'Get started',
13+
url: 'https://redis.com/try-free/',
14+
},
15+
},
16+
{
17+
img: {
18+
src: 'https://redis.com/wp-content/uploads/2022/07/redis-insight-card-500x358-1.jpg?&auto=webp&quality=85,75&width=500',
19+
alt: 'Model your data in real time with RedisInsight',
20+
title: 'Model your data in real time with RedisInsight',
21+
},
22+
heading: 'Model your data in real time with RedisInsight',
23+
body: 'RedisInsight provides an intuitive Redis admin GUI and helps optimize your use of Redis in your applications.',
24+
cta: {
25+
text: 'Download now',
26+
url: 'https://redis.com/redis-enterprise/redis-insight/',
27+
},
28+
},
29+
{
30+
img: {
31+
src: '/img/lp/heart.png',
32+
alt: 'Why developers love Redis',
33+
title: 'Why developers love Redis',
34+
},
35+
heading: 'See why developers love Redis',
36+
body: 'Developers worldwide love Redis because of its flexibility and ease-of-use. This video tells the story.',
37+
cta: {
38+
text: 'Watch video',
39+
url: 'https://www.youtube.com/watch?v=vyxdC1qK4NE',
40+
},
41+
},
42+
],
43+
};

Diff for: ‎src/pages/lp/thank-you/index.tsx

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/* eslint-disable @typescript-eslint/ban-ts-comment */
2+
import React, { useLayoutEffect } from 'react';
3+
import Layout from '@theme/Layout';
4+
import LandingPageWrapper from '../../../components/LandingPageWrapper';
5+
import useQueryParams from '../../../hooks/useQueryParams';
6+
import Card from '../../../components/Card';
7+
import { codeLinks } from './data';
8+
9+
interface ThankYouParams {
10+
m?: string;
11+
code?: string;
12+
}
13+
14+
function alignCardHeights() {
15+
let maxHeight = -1;
16+
const cards = document.querySelectorAll<HTMLElement>('.col-card .card');
17+
cards.forEach((el) => {
18+
if (el.offsetHeight > maxHeight) {
19+
maxHeight = el.offsetHeight;
20+
}
21+
});
22+
23+
cards.forEach((el) => {
24+
el.style.height = `${maxHeight}px`;
25+
});
26+
}
27+
28+
export default function ThankYou() {
29+
const params: ThankYouParams = useQueryParams();
30+
31+
useLayoutEffect(() => {
32+
// attempt this for 1 second to make it as snappy as possible
33+
const timeouts = [
34+
setTimeout(alignCardHeights, 50),
35+
setTimeout(alignCardHeights, 100),
36+
setTimeout(alignCardHeights, 200),
37+
setTimeout(alignCardHeights, 300),
38+
setTimeout(alignCardHeights, 500),
39+
setTimeout(alignCardHeights, 600),
40+
setTimeout(alignCardHeights, 700),
41+
setTimeout(alignCardHeights, 800),
42+
setTimeout(alignCardHeights, 900),
43+
setTimeout(alignCardHeights, 1000),
44+
];
45+
46+
return () => {
47+
timeouts.forEach(clearTimeout);
48+
};
49+
});
50+
51+
const code = params.code;
52+
let links: typeof codeLinks.jwt[0][] = [];
53+
if (!!code) {
54+
links = codeLinks[code as keyof typeof codeLinks];
55+
}
56+
57+
return (
58+
<LandingPageWrapper hasForm={false}>
59+
{/* @ts-ignore */}
60+
<Layout title="Learn to Earn with Redis!">
61+
<article className="padding-top--md">
62+
<div className="padding-vert--md">
63+
<h1
64+
style={{
65+
textAlign: 'center',
66+
}}>
67+
Thank you!
68+
</h1>
69+
<div
70+
style={{
71+
width: '70%',
72+
minWidth: '370px',
73+
margin: 'auto',
74+
textAlign: 'center',
75+
}}>
76+
<p>{params.m ?? 'Thank you for your submission!'}</p>
77+
</div>
78+
</div>
79+
{!!links && links.length > 0 && (
80+
<div
81+
className="padding-vert--md"
82+
style={{
83+
backgroundColor: 'var(--ifm-color-secondary-lightest)',
84+
}}>
85+
<h2
86+
style={{
87+
textAlign: 'center',
88+
}}>
89+
Continue your Redis journey
90+
</h2>
91+
<div className="container">
92+
<div className="row">
93+
{links.map((value) => {
94+
return (
95+
<div key={value.heading} className="col col--4 col-card">
96+
<Card {...value} />
97+
</div>
98+
);
99+
})}
100+
</div>
101+
</div>
102+
</div>
103+
)}
104+
</article>
105+
</Layout>
106+
</LandingPageWrapper>
107+
);
108+
}

Diff for: ‎static/img/lp/heart.png

36.2 KB
Loading

0 commit comments

Comments
 (0)