tableberg / src / components / UpsellModal.tsx

UpsellModal.tsx in Tableberg – Simple Gutenberg Table Block 1.1.5, at src/components/UpsellModal.tsx

228 lines 6.5 KB

Raw Download Zip

1	import { useEffect, useState } from "react";
2	import { RawHTML } from "@wordpress/element";
3	import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4	import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
5	import { __ } from "@wordpress/i18n";
6	import blocks, { ENHANCED_FEATURES } from "@tableberg/shared/blocks";
7	import blockIcon from "@tableberg/shared/icons/tableberg";
8	import { PATTERN_UPSELLS } from "./patterns";
9	import { getTablebergConfig } from "../pro-status";
10
11	function getPluginUrl() {
12	return getTablebergConfig().plugin_url \|\| "";
13	}
14
15	function getImageBase() {
16	return getPluginUrl() + "includes/Admin/images/upsell/";
17	}
18
19	function getProBlocks() {
20	const pluginUrl = getPluginUrl();
21	const patternUpsells = PATTERN_UPSELLS.map(pattern => ({
22	...pattern,
23	image: pattern.image
24	? `${pluginUrl}${pattern.image.substring(1)}`
25	: pattern.image,
26	}));
27
28	return [...blocks.filter((b: any) => b.isPro), ...patternUpsells];
29	}
30
31	interface Props {
32	onClose: () => void;
33	selected?: string;
34	link?: string;
35	}
36
37	export interface BlockUpsellInfo {
38	icon: any;
39	title: string;
40	name: string;
41	image?: string;
42	upsellText?: string;
43	}
44	interface ComponentProps {
45	onClose: () => void;
46	info: BlockUpsellInfo;
47	prev?: () => void;
48	next?: () => void;
49	link?: string;
50	}
51
52	export function UpsellModalComponent({
53	onClose,
54	info,
55	prev,
56	next,
57	link = "https://tableberg.com/pricing/",
58	}: ComponentProps) {
59	return (
60	<div className="tableberg-upsell-modal">
61	<div
62	className="tableberg-upsell-modal-backdrop"
63	onClick={onClose}
64	></div>
65	<div className="tableberg-upsell-modal-container">
66	{!!prev && (
67	<button
68	className="tableberg-upsell-modal-prev"
69	onClick={prev}
70	>
71	<FontAwesomeIcon icon={faCaretLeft} />
72	</button>
73	)}
74	<div className="tableberg-upsell-modal-area" key={info.name}>
75	<h2>
76	{info.icon \|\| blockIcon} {info.title}
77	</h2>
78	<div className="tableberg-upsell-modal-content">
79	{info.image && (
80	<img
81	src={
82	info.image.startsWith("http")
83	? info.image
84	: getImageBase() + info.image
85	}
86	alt={info.title + " " + __("Demo", "tableberg")}
87	/>
88	)}
89	{info.upsellText && (
90	<RawHTML className="tableberg-upsell-modal-text">
91	{info.upsellText}
92	</RawHTML>
93	)}
94	<p>
95	{__("Limited Time: Use code", "tableberg")}{" "}
96	<b>TB20</b>{" "}
97	{__("to get a 20% discount.", "tableberg")}
98	</p>
99	</div>
100	<div className="tableberg-upsell-modal-footer">
101	<button onClick={onClose}>
102	{__("Cancel", "tableberg")}
103	</button>
104	<a href={link} target="_blank">
105	{__("Buy PRO", "tableberg")}
106	</a>
107	</div>
108	</div>
109	{!!next && (
110	<button
111	className="tableberg-upsell-modal-next"
112	onClick={next}
113	>
114	<FontAwesomeIcon icon={faCaretRight} />
115	</button>
116	)}
117	</div>
118	</div>
119	);
120	}
121
122	export function UpsellEnhancedModal({
123	onClose,
124	selected,
125	link = "https://tableberg.com/pricing/",
126	}: Props) {
127	const [idx, setIdx] = useState(0);
128	const info = ENHANCED_FEATURES[idx];
129
130	useEffect(() => {
131	if (selected) {
132	selected = selected.replace("-dummy", "");
133	const idx = ENHANCED_FEATURES.findIndex(b => b.name === selected);
134	if (idx > -1) {
135	setIdx(idx);
136	}
137	}
138	}, [selected]);
139
140	const prev = () =>
141	setIdx(idx => {
142	if (idx > 0) {
143	return idx - 1;
144	}
145	return ENHANCED_FEATURES.length - 1;
146	});
147
148	const next = () => setIdx((idx + 1) % ENHANCED_FEATURES.length);
149
150	return (
151	<UpsellModalComponent
152	onClose={onClose}
153	info={info}
154	prev={prev}
155	next={next}
156	link={link}
157	/>
158	);
159	}
160
161	export function UpsellPatternsModal({ onClose, selected }: Props) {
162	const [idx, setIdx] = useState(0);
163	const info = PATTERN_UPSELLS[idx];
164
165	useEffect(() => {
166	if (selected) {
167	const idx = PATTERN_UPSELLS.findIndex(b => b.name === selected);
168	if (idx > -1) {
169	setIdx(idx);
170	}
171	}
172	}, [selected]);
173
174	const prev = () =>
175	setIdx(idx => {
176	if (idx > 0) {
177	return idx - 1;
178	}
179	return PATTERN_UPSELLS.length - 1;
180	});
181
182	const next = () => setIdx((idx + 1) % PATTERN_UPSELLS.length);
183
184	return (
185	<UpsellModalComponent
186	onClose={onClose}
187	info={info as any}
188	prev={prev}
189	next={next}
190	/>
191	);
192	}
193
194	export default function UpsellModal({ onClose, selected }: Props) {
195	const proBlocks = getProBlocks();
196	const [idx, setIdx] = useState(0);
197	const info = proBlocks[idx];
198
199	useEffect(() => {
200	if (selected) {
201	selected = selected.replace("-dummy", "");
202	const idx = proBlocks.findIndex(b => b.name === selected);
203	if (idx > -1) {
204	setIdx(idx);
205	}
206	}
207	}, [selected]);
208
209	const prev = () =>
210	setIdx(idx => {
211	if (idx > 0) {
212	return idx - 1;
213	}
214	return proBlocks.length - 1;
215	});
216
217	const next = () => setIdx((idx + 1) % proBlocks.length);
218
219	return (
220	<UpsellModalComponent
221	onClose={onClose}
222	info={info}
223	prev={prev}
224	next={next}
225	/>
226	);
227	}
228