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

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

172 lines 7.7 KB

Raw Download Zip

1	import ButtonInput from "../Inputs/ButtonInput";
2	import Icon from "../../utils/Icon";
3	import Tooltip from "../../utils/Tooltip/Tooltip";
4	import { __ } from "@wordpress/i18n";
5	import useOnboardingStore from "../../store/useOnboardingStore";
6	import {get_website_url} from "../../utils/lib.js";
7
8	export const ModalFooter = ({
9	isContinueDisabled,
10	validateAndContinue,
11	currentStep,
12	handleContinue,
13	}) => {
14	const {
15	onboardingData,
16	isUpdating,
17	currentStepIndex,
18	footerMessage,
19	isLastStep,
20	isInstalling,
21	licenseStatus,
22	settings
23	} = useOnboardingStore();
24
25	const upgradeUrl = get_website_url(onboardingData.upgrade, {
26	utm_source:onboardingData.prefix + '_onboarding',
27	utm_content: 'upgrade'
28	});
29
30	// Decide disabled state once to reuse below
31	const continueDisabled = isContinueDisabled();
32	const isLicenseStep = currentStep?.type === 'license';
33	const isLicenseAndUpdating = isLicenseStep && licenseStatus === 'activating'
34	const isLicenseAndValid = isLicenseStep && licenseStatus === 'activated'
35
36	const allInstalled = onboardingData.is_all_plugins_installed;
37	const isPluginStepAndAllInstalled = currentStep?.type === 'plugins' && allInstalled
38
39	const tfaField = currentStep?.fields?.find(f => f.id === 'tfa') ?? null;
40	const tfaValue = settings?.find(s => s.id === 'tfa')?.value ?? null;
41
42	const finalDisabled = isLicenseStep
43	? (
44	continueDisabled \|\|
45	(tfaField && (!tfaValue \|\| String(tfaValue).trim() === ''))
46	)
47	: continueDisabled;
48
49	const showSkipStep = (currentStep.skip_step !== undefined ? currentStep.skip_step !== false : currentStepIndex > 0)
50	&& !isLastStep()
51	&& !isLicenseAndUpdating
52	&& !isLicenseAndValid
53	&& !isPluginStepAndAllInstalled;
54
55	return (<>
56	{currentStep.enable_premium_btn === true && !onboardingData.is_pro && (
57	<div className="flex flex-row gap-4 justify-center items-center min-w-[32ch]">
58	<ButtonInput
59	className="flex justify-center items-center outline-none px-2 py-[5px] relative w-full"
60	btnVariant="secondary"
61	size="lg"
62	link={upgradeUrl}
63	>
64	{currentStep.premium_btn_text ? currentStep.premium_btn_text : __('Go Premium', 'ONBOARDING_WIZARD_TEXT_DOMAIN')}
65
66	<Icon
67	name="magic-wand"
68	size={24}
69	color="white"
70	fill="white"
71	className="ml-2"
72	/>
73	</ButtonInput>
74	</div>
75	)}
76
77	<div className="flex flex-col md:flex-row gap-4 justify-center items-center min-w-[32ch] pt-2">
78	{ showSkipStep && (
79	<div className="flex flex-row justify-center items-center w-full order-last md:order-first">
80	<ButtonInput
81	className="burst-skip !text-[#C4511C] !font-semibold hover:!text-orange-darkish hover:underline hover:decoration-2 hover:underline-offset-4"
82	btnVariant="transparent"
83	size="sm"
84	onClick={(e) => handleContinue(e)}
85	>
86	{currentStep.skip_step?.label ?? __('Skip this step', 'ONBOARDING_WIZARD_TEXT_DOMAIN')}
87	</ButtonInput>
88	{/* Skip Step Button Icon - Only render if the icon is provided */}
89	{currentStep.skip_step?.icon && (
90	(() => {
91	const skipIcon = (
92	<Icon
93	name={currentStep.skip_step.icon}
94	color="#C4511C"
95	fill="#C4511C"
96	size={16}
97	className="ml-2"
98	/>
99	);
100	return currentStep.skip_step?.tooltip ? (
101	<Tooltip
102	tooltip={{
103	...currentStep.skip_step.tooltip,
104	side: "bottom",
105	align: "center",
106	}}
107	>
108	{skipIcon}
109	</Tooltip>
110	) : skipIcon;
111	})()
112	)}
113	</div>
114	)}
115
116	{!isLicenseAndUpdating && currentStep.button && (
117	<ButtonInput
118	className="burst-continue flex justify-center items-center outline-none px-2 py-[5px] relative w-full"
119	btnVariant={finalDisabled ? "transparent-disabled" : "secondary"}
120	size="lg"
121	disabled={finalDisabled}
122	onClick={(e) => validateAndContinue(e)}
123	key={currentStep.id + "continue"}
124	>
125	<Icon
126	name="loading-circle"
127	size={18}
128	fill="white"
129	color={isLastStep() ? "black" : "white"}
130	className={`absolute left-3 transition-opacity duration-300 ${isUpdating \|\| isInstalling ? "opacity-100" : "opacity-0"}`}
131	/>
132	<span className="flex mx-6 font-medium whitespace-nowrap truncate">
133	{/* Button label */}
134	{isLicenseAndValid ? __('Continue', 'ONBOARDING_WIZARD_TEXT_DOMAIN') : currentStep.button.label}
135
136	{/* Button Icon - Only render if icon is provided */}
137	{currentStep.button.icon && (
138	<Icon
139	name={currentStep.button.icon}
140	size={18}
141	color={isLastStep() ? "black" : "white"}
142	fill={isLastStep() ? "black" : "white"}
143	className="ml-2"
144	/>
145	)}
146	</span>
147	</ButtonInput>
148	)}
149
150	</div>
151	{currentStep.note && (
152	<div className="text-center">
153	<p className="whitespace-break-spaces font-medium text-sm text-[var(--teamupdraft-grey-600)]">{currentStep.note}</p>
154	</div>
155	)}
156	{footerMessage && (
157	<div className="flex justify-center gap-2 text-sm text-[var(--teamupdraft-grey-600)] text-center rounded-md border border-[var(--teamupdraft-orange-dark)] p-2 mt-2">
158	<Icon
159	name='loading-circle'
160	color='var(--teamupdraft-orange-dark)'
161	fill='var(--teamupdraft-orange-dark)'
162	size={18}
163	className="mr-2"
164	/>
165	<div>
166	{footerMessage}
167	</div>
168	</div>
169	)}
170	</>
171	);
172	}