| 1 |
import { updateOption } from '@launch/api/WPApi'; |
| 2 |
import { Title } from '@launch/components/Title'; |
| 3 |
import { VideoPlayer } from '@launch/components/VideoPlayer'; |
| 4 |
import { useSiteLogo } from '@launch/hooks/useSiteLogo'; |
| 5 |
import { useSitePlugins } from '@launch/hooks/useSitePlugins'; |
| 6 |
import { useSiteProfile } from '@launch/hooks/useSiteProfile'; |
| 7 |
import { useSiteQuestions } from '@launch/hooks/useSiteQuestions'; |
| 8 |
import { PageLayout } from '@launch/layouts/PageLayout'; |
| 9 |
import { pageState } from '@launch/state/factory'; |
| 10 |
import { usePagesStore } from '@launch/state/Pages'; |
| 11 |
import { useUserSelectionStore } from '@launch/state/user-selections'; |
| 12 |
import { useEffect } from '@wordpress/element'; |
| 13 |
import { __ } from '@wordpress/i18n'; |
| 14 |
|
| 15 |
export const state = pageState('Content Gathering', () => ({ |
| 16 |
ready: true, |
| 17 |
canSkip: false, |
| 18 |
useNav: false, |
| 19 |
onRemove: () => {}, |
| 20 |
})); |
| 21 |
|
| 22 |
export const SitePrep = () => { |
| 23 |
const showSiteQuestions = window.extSharedData?.showSiteQuestions ?? false; |
| 24 |
const { nextPage } = usePagesStore(); |
| 25 |
const { setSiteProfile, addMany, setSiteQuestions } = useUserSelectionStore(); |
| 26 |
const { siteProfile } = useSiteProfile(); |
| 27 |
useSiteLogo(); |
| 28 |
const { questions } = useSiteQuestions({ |
| 29 |
disableFetch: !showSiteQuestions, |
| 30 |
}); |
| 31 |
const { sitePlugins } = useSitePlugins({ |
| 32 |
disableFetch: showSiteQuestions, |
| 33 |
}); |
| 34 |
|
| 35 |
useEffect(() => { |
| 36 |
if (!siteProfile) return; |
| 37 |
setSiteProfile(siteProfile); |
| 38 |
updateOption('extendify_site_profile', siteProfile); |
| 39 |
}, [siteProfile, setSiteProfile]); |
| 40 |
|
| 41 |
useEffect(() => { |
| 42 |
let id; |
| 43 |
|
| 44 |
if (sitePlugins && !showSiteQuestions) { |
| 45 |
addMany('sitePlugins', sitePlugins, { clearExisting: true }); |
| 46 |
id = setTimeout(nextPage, 1000); |
| 47 |
} |
| 48 |
|
| 49 |
if (questions && showSiteQuestions) { |
| 50 |
const visible = (questions?.visible || []).map((q) => ({ |
| 51 |
...q, |
| 52 |
group: 'visible', |
| 53 |
})); |
| 54 |
const hidden = (questions?.hidden || []).map((q) => ({ |
| 55 |
...q, |
| 56 |
group: 'hidden', |
| 57 |
})); |
| 58 |
const allQuestions = [...visible, ...hidden]; |
| 59 |
setSiteQuestions({ |
| 60 |
showHidden: false, |
| 61 |
questions: allQuestions, |
| 62 |
}); |
| 63 |
id = setTimeout(nextPage, 1000); |
| 64 |
} |
| 65 |
|
| 66 |
return () => clearTimeout(id); |
| 67 |
}, [ |
| 68 |
nextPage, |
| 69 |
addMany, |
| 70 |
questions, |
| 71 |
setSiteQuestions, |
| 72 |
showSiteQuestions, |
| 73 |
sitePlugins, |
| 74 |
]); |
| 75 |
|
| 76 |
return ( |
| 77 |
<PageLayout> |
| 78 |
<div className="mx-auto grow overflow-y-auto px-4 py-8 md:p-12 md:px-6 3xl:p-16"> |
| 79 |
<div className="mx-auto flex h-full flex-col justify-center"> |
| 80 |
<VideoPlayer |
| 81 |
poster={`${window.extSharedData.assetPath}/data-processing.webp`} |
| 82 |
path="https://images.extendify-cdn.com/launch/data-processing.webm" |
| 83 |
className="mx-auto h-auto w-72 md:h-[288px]" |
| 84 |
/> |
| 85 |
|
| 86 |
<Title |
| 87 |
title={__('Customizing Your Experience', 'extendify-local')} |
| 88 |
description={__( |
| 89 |
'Please wait while we analyze your inputs and tailor your experience.', |
| 90 |
'extendify-local', |
| 91 |
)} |
| 92 |
/> |
| 93 |
</div> |
| 94 |
</div> |
| 95 |
</PageLayout> |
| 96 |
); |
| 97 |
}; |
| 98 |
|
