import { useState, useEffect } from 'react'; import useDummyPackStore from '../../util/dummyPackStore'; import Modal from '../Modal'; import { doInstallProcess } from '../../util/dummyPackLib'; import useDummyPackPreinstall from '../../hooks/useDummyPackPreinstall'; export default function InstallProcess() { const { setInstallProcessInProgress, setInstallProcessInProgressStep, setInstallProcessModalOpen, resetInstallProcess, ...rest } = useDummyPackStore(); const { process, inProgress, inProgressStep, isModalOpen, packData } = rest.installProcess; const { resultPreinstall, errorPreinstall, loadingPreinstall } = useDummyPackPreinstall(packData?.ID); const [error, setError] = useState(null); const [payload, setPayload] = useState({}); const [allInstallProcessDone, setAllInstallProcessDone] = useState(false); const [responsePerStep, setResponsePerStep] = useState({}); const [showAllSteps, setShowAllSteps] = useState(false); const onStartInstallProcess = () => { setInstallProcessInProgress(true); }; const installProcessHandler = async (process, retry = 0) => { let __payload = { ...payload, ...process.payload }; if(process.skip) { setInstallProcessInProgressStep(inProgressStep + 1); return; } const response = await doInstallProcess({ ...process, payload: __payload, }); if(response.success != true) { // alert('error: ' + response.data.error_message); let error_message = response.data.error_message ? response.data.error_message : response.data; if (retry > 4) { setError(error_message); return; } // recall setTimeout(() => { installProcessHandler(process, retry + 1); }, 4000); return; } let response_data = { ...payload, ...response.data }; setPayload(response_data); setResponsePerStep({ ...responsePerStep, [process.step]: response.data }); if(response.data.next_step == true) { setInstallProcessInProgressStep(inProgressStep + 1); return; } else { installProcessHandler({ ...process, payload: { ...process.payload, ...response.data, }, }); } }; useEffect(() => { // If inProgressStep is greater than or equal to process.length, the installation is done if (inProgress && inProgressStep >= process.length) { // Mark install process as complete setInstallProcessInProgress(false); setAllInstallProcessDone(true); return; } if(inProgress == true) { installProcessHandler(process[inProgressStep]); } }, [inProgressStep, inProgress]) if(!packData) return <> // Get visible steps: previous, current, and next const getVisibleSteps = () => { const visibleSteps = []; // Handle case when all steps are completed (inProgressStep >= process.length) if (inProgressStep >= process.length && process.length > 0) { const lastIdx = process.length - 1; // Show last 2 steps as completed, or just the last one if there's only 1 step if (lastIdx > 0) { const secondLastIdx = lastIdx - 1; if (process[secondLastIdx]) { visibleSteps.push({ step: process[secondLastIdx], idx: secondLastIdx, type: 'completed' }); } } if (process[lastIdx]) { visibleSteps.push({ step: process[lastIdx], idx: lastIdx, type: 'completed' }); } return visibleSteps; } // Normal case: show previous, current, and next const safeInProgressStep = inProgressStep < process.length ? inProgressStep : Math.max(0, process.length - 1); const prevIdx = safeInProgressStep > 0 ? safeInProgressStep - 1 : null; const currentIdx = safeInProgressStep < process.length ? safeInProgressStep : null; const nextIdx = safeInProgressStep < process.length - 1 ? safeInProgressStep + 1 : null; if (prevIdx !== null && prevIdx >= 0 && prevIdx < process.length && process[prevIdx]) { visibleSteps.push({ step: process[prevIdx], idx: prevIdx, type: 'completed' }); } if (currentIdx !== null && currentIdx >= 0 && currentIdx < process.length && process[currentIdx]) { visibleSteps.push({ step: process[currentIdx], idx: currentIdx, type: 'current' }); } if (nextIdx !== null && nextIdx >= 0 && nextIdx < process.length && process[nextIdx]) { visibleSteps.push({ step: process[nextIdx], idx: nextIdx, type: 'upcoming' }); } return visibleSteps; }; const visibleSteps = getVisibleSteps(); const totalSteps = process.length; const completedSteps = inProgressStep; const progressPercentage = totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0; const currentStepNumber = inProgress ? inProgressStep + 1 : 0; const processStepContent = ( <>
Warning: Your data (database, plugins, uploads) will be lost during this process; for safety, please back it up before proceeding.
Important: To ensure the installation process works properly, please do not close your browser, reload the page, or close this popup while the installation is in progress.
{/* Progress Summary Section */} {inProgress && (

Installation Progress

{completedSteps} of {totalSteps} steps completed

{progressPercentage}%
Complete
{/* Progress Bar */}
{/* Step Indicator */}
Current: Step {currentStepNumber}/{totalSteps} {process[inProgressStep] && inProgressStep < process.length && ( {process[inProgressStep].name} )}
)} {/* Pre-installation Summary */} {!inProgress && !allInstallProcessDone && (

Installation Summary

{totalSteps} steps will be executed

{totalSteps}
Steps
{/* Steps Preview */}
{(showAllSteps ? process : process.slice(0, 3)).map((step, idx) => (
{step.step} {step.name} {step.skip ? '(Skipped)' : ''}
))} {totalSteps > 3 && (
{ e.preventDefault(); e.stopPropagation(); setShowAllSteps(!showAllSteps); } }> { showAllSteps ? 'Show less' : `Show all (${totalSteps})`}
)}
)}
    {visibleSteps.map(({ step, idx, type }) => { // Safety check: skip if step is undefined if (!step) return null; const isCompleted = type === 'completed'; const isCurrent = type === 'current'; return (
  1. {isCompleted ? ( ) : ( {step.step} )}

    {step.name} {step.skip ? '(Skipped)' : ''}

    {step.description}

    {error && isCurrent && (

    {error}

    )} {isCurrent && inProgress && !error && (
    In progress {responsePerStep[step.step]?.__log_process_status ? `(${responsePerStep[step.step]?.__log_process_status})` : ''}...
    )} {isCompleted && ( Completed )}
    2. ); })}
{/* Start Button */} {(!inProgress && !error && !allInstallProcessDone) && (
)} {/* Completion Summary */} {allInstallProcessDone && ( <>

Installation Complete!

All {totalSteps} steps completed successfully

100%
Complete
{/* Progress Bar - Full */}
)} {allInstallProcessDone && (
{/* Button to visit homepage if payload.current_domain exists */} {payload?.current_domain && ( Visit Homepage )}
)} ) return ( { // setInstallProcessModalOpen(false); resetInstallProcess(); setAllInstallProcessDone(false); setError(null); } } title={ `Install "${packData.name}"` } size='xl' > { (() => { if(loadingPreinstall) { return (
Validating package, please wait...
); } if(errorPreinstall) { return ( <>
Warning: Failed to Validate Package
); } return processStepContent })() } ); }