wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Modal / ModalContent.tsx

ModalContent.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.7.0, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Modal/ModalContent.tsx

91 lines 3.6 KB

Raw Download Zip

1	import type {SettingField, Step} from "../../types";
2	import {memo} from "@wordpress/element";
3	import Premium from "./Premium";
4	import Fields from "../Fields/Fields";
5	// @ts-ignore
6	import Icon from '@/utils/Icon';
7	import Accordion from "../Fields/Accordion";
8	// @ts-ignore
9	import useOnboardingStore from "@/store/useOnboardingStore";
10
11	export const ModalContent = memo(
12	({
13	step,
14	onFieldChange,
15	}: {
16	step: Step;
17	settings: SettingField[];
18	onFieldChange: (fieldId: string, value: string \| boolean) => void;
19	}) => {
20	const { licenseStatus, isUpdating } = useOnboardingStore();
21
22	const isLicenseStep = step.id === "license";
23
24	const hasBullets = Array.isArray(step.bullets) && step.bullets.length > 0;
25	const shouldShowBullets =
26	hasBullets && (!isLicenseStep \|\| licenseStatus === "activated");
27
28	const shouldShowFields = !isLicenseStep
29	? true
30	: licenseStatus !== "activated" && !isUpdating;
31
32	return (
33	<div className="w-full max-w-[70ch] mx-auto flex flex-col my-3 space-y-2 gap-2">
34	{step.intro_bullets?.length > 0 && (
35	<div className="space-y-2 flex flex-col ">
36	{step.intro_bullets.map((bullet, index) => (
37	<div
38	key={`${step.id}-bullet-${index}`}
39	className="flex items-center gap-2 ml-2"
40	>
41	<span className="flex-shrink-0">
42	<Icon
43	name={bullet.icon}
44	size={24}
45	type=""
46	strokeWidth={1}
47	stroke="none"
48	color="var(--teamupdraft-orange-dark)"
49	className="bg-[#fff5eb] rounded-[80px] p-2 shadow-[0_0_10px_#fff5eb] border border-[#fff5eb]"
50	/>
51	</span>
52	<div>
53	<p className="font-medium text-md">{bullet.title}</p>
54	<p className="text-[var(--teamupdraft-grey-600)] text-md">
55	{bullet.desc}
56	</p>
57	</div>
58	</div>
59	))}
60	</div>
61	)}
62
63	{shouldShowBullets &&
64	<Premium bullets={step.bullets} />}
65
66	{shouldShowFields && (
67	<>
68	{ /Grouped field/ }
69	{step?.groups?.length > 0 && (
70	<Accordion
71	key={step.id}
72	groups={step.groups}
73	fields={step.fields}
74	onChange={onFieldChange}
75	/>
76	)}
77
78	{/* Non-grouped field, which are all fields without a group_id. */ }
79	{step?.fields?.some((f) => !f.group_id) && (
80	<Fields
81	fields={step.fields.filter((f) => !f.group_id)}
82	onChange={onFieldChange}
83	/>
84	)}
85	</>
86	)}
87	</div>
88	);
89	}
90	);
91