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 4.5.5, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Modal/ModalFooter.tsx
| 1 | import ButtonInput from "../Inputs/ButtonInput"; |
| 2 | // @ts-ignore |
| 3 | import Icon from '@/utils/Icon'; |
| 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 | } = useOnboardingStore(); |
| 23 | |
| 24 | const upgradeUrl = get_website_url(onboardingData.upgrade, { |
| 25 | utm_source:onboardingData.prefix + '_onboarding', |
| 26 | utm_content: 'upgrade' |
| 27 | }); |
| 28 | |
| 29 | // Decide disabled state once to reuse below |
| 30 | const continueDisabled = isContinueDisabled(); |
| 31 | const isLicenseAndUpdating = currentStep?.type === 'license' && licenseStatus === 'activating' |
| 32 | const isLicenseAndValid = currentStep?.type === 'license' && licenseStatus === 'activated' |
| 33 | |
| 34 | const allInstalled = onboardingData.is_all_plugins_installed; |
| 35 | const isPluginStepAndAllInstalled = currentStep?.type === 'plugins' && allInstalled |
| 36 | |
| 37 | return (<> |
| 38 | {currentStep.enable_premium_btn === true && !onboardingData.is_pro && ( |
| 39 | <div className="flex flex-row gap-4 justify-center items-center min-w-[32ch]"> |
| 40 | <ButtonInput |
| 41 | className="flex justify-center items-center outline-none px-2 py-[5px] relative w-full" |
| 42 | btnVariant="secondary" |
| 43 | size="lg" |
| 44 | link={upgradeUrl} |
| 45 | > |
| 46 | {currentStep.premium_btn_text ? currentStep.premium_btn_text : __('Go Premium', 'ONBOARDING_WIZARD_TEXT_DOMAIN')} |
| 47 | |
| 48 | <Icon |
| 49 | name="magic-wand" |
| 50 | size={24} |
| 51 | color="white" |
| 52 | fill="white" |
| 53 | type="" |
| 54 | className="ml-2" |
| 55 | /> |
| 56 | </ButtonInput> |
| 57 | </div> |
| 58 | )} |
| 59 | |
| 60 | <div className="flex flex-col md:flex-row gap-4 justify-center items-center min-w-[32ch] pt-2"> |
| 61 | {(currentStepIndex > 0 && !isLastStep() && !isLicenseAndUpdating && !isLicenseAndValid && !isPluginStepAndAllInstalled) && ( |
| 62 | <div className="flex flex-row justify-center items-center w-full order-last md:order-first"> |
| 63 | <ButtonInput |
| 64 | className="burst-skip !text-[#C4511C] !font-semibold hover:!text-orange-darkish hover:underline hover:decoration-2 hover:underline-offset-4" |
| 65 | btnVariant="transparent" |
| 66 | size="sm" |
| 67 | onClick={(e) => handleContinue(e)} |
| 68 | > |
| 69 | {__('Skip this step', 'ONBOARDING_WIZARD_TEXT_DOMAIN')} |
| 70 | </ButtonInput> |
| 71 | {/* Skip Step Button Icon - Only render if the icon is provided */} |
| 72 | {currentStep.skip_step && ( |
| 73 | <Icon |
| 74 | name={currentStep.skip_step?.icon ?? 'info'} |
| 75 | color="#C4511C" |
| 76 | fill="#C4511C" |
| 77 | size={16} |
| 78 | tooltip={ |
| 79 | currentStep.skip_step?.tooltip |
| 80 | ? { |
| 81 | ...currentStep.skip_step.tooltip, |
| 82 | side: "bottom", |
| 83 | align: "center", |
| 84 | } |
| 85 | : '' |
| 86 | } |
| 87 | className="ml-2" |
| 88 | /> |
| 89 | )} |
| 90 | </div> |
| 91 | )} |
| 92 | |
| 93 | {!isLicenseAndUpdating && currentStep.button && ( |
| 94 | <ButtonInput |
| 95 | className="burst-continue flex justify-center items-center outline-none px-2 py-[5px] relative w-full" |
| 96 | btnVariant={continueDisabled ? "transparent-disabled" : "secondary"} |
| 97 | size="lg" |
| 98 | disabled={continueDisabled} |
| 99 | onClick={(e) => validateAndContinue(e)} |
| 100 | key={currentStep.id + "continue"} |
| 101 | > |
| 102 | <Icon |
| 103 | name="loading-circle" |
| 104 | size={18} |
| 105 | fill="white" |
| 106 | color={isLastStep() ? "black" : "white"} |
| 107 | className={`absolute left-3 transition-opacity duration-300 ${isUpdating || isInstalling ? "opacity-100" : "opacity-0"}`} |
| 108 | /> |
| 109 | <span className="flex mx-6 font-medium whitespace-nowrap truncate"> |
| 110 | {/* Button label */} |
| 111 | {isLicenseAndValid ? __('Continue', 'ONBOARDING_WIZARD_TEXT_DOMAIN') : currentStep.button.label} |
| 112 | |
| 113 | {/* Button Icon - Only render if icon is provided */} |
| 114 | {currentStep.button.icon && ( |
| 115 | <Icon |
| 116 | name={currentStep.button.icon} |
| 117 | size={currentStepIndex === 0 ? 26 : 18} |
| 118 | color={isLastStep() ? "black" : "white"} |
| 119 | fill={isLastStep() ? "black" : "white"} |
| 120 | type="" |
| 121 | className="ml-2" |
| 122 | /> |
| 123 | )} |
| 124 | </span> |
| 125 | </ButtonInput> |
| 126 | )} |
| 127 | |
| 128 | </div> |
| 129 | {currentStep.note && ( |
| 130 | <div className="text-center"> |
| 131 | <p className="whitespace-break-spaces font-medium text-sm text-[var(--teamupdraft-grey-600)]">{currentStep.note}</p> |
| 132 | </div> |
| 133 | )} |
| 134 | {footerMessage && ( |
| 135 | <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"> |
| 136 | <Icon |
| 137 | name='loading-circle' |
| 138 | color='var(--teamupdraft-orange-dark)' |
| 139 | fill='var(--teamupdraft-orange-dark)' |
| 140 | size={18} |
| 141 | className="mr-2" |
| 142 | /> |
| 143 | <div> |
| 144 | {footerMessage} |
| 145 | </div> |
| 146 | </div> |
| 147 | )} |
| 148 | </> |
| 149 | ); |
| 150 | } |