| 1 |
import { Title } from '@launch/components/Title'; |
| 2 |
import { VideoPlayer } from '@launch/components/VideoPlayer'; |
| 3 |
import { useHomeLayouts } from '@launch/hooks/useHomeLayouts'; |
| 4 |
import { useSiteImages } from '@launch/hooks/useSiteImages'; |
| 5 |
import { useSitePlugins } from '@launch/hooks/useSitePlugins'; |
| 6 |
import { useSiteStrings } from '@launch/hooks/useSiteStrings'; |
| 7 |
import { PageLayout } from '@launch/layouts/PageLayout'; |
| 8 |
import { pageState } from '@launch/state/factory'; |
| 9 |
import { usePagesStore } from '@launch/state/Pages'; |
| 10 |
import { useUserSelectionStore } from '@launch/state/user-selections'; |
| 11 |
import { useEffect } from '@wordpress/element'; |
| 12 |
import { __ } from '@wordpress/i18n'; |
| 13 |
|
| 14 |
export const state = pageState('Content Gathering', () => ({ |
| 15 |
ready: true, |
| 16 |
canSkip: false, |
| 17 |
useNav: false, |
| 18 |
onRemove: () => {}, |
| 19 |
})); |
| 20 |
|
| 21 |
export const ContentGathering = () => { |
| 22 |
const showSiteQuestions = window.extSharedData?.showSiteQuestions ?? false; |
| 23 |
const { loading: loadingSitePlugins, sitePlugins } = useSitePlugins(); |
| 24 |
const waitForPlugins = showSiteQuestions && loadingSitePlugins; |
| 25 |
const { nextPage } = usePagesStore(); |
| 26 |
const { setSiteStrings, setSiteImages, addMany } = useUserSelectionStore(); |
| 27 |
const { siteStrings } = useSiteStrings(); |
| 28 |
const { siteImages } = useSiteImages(); |
| 29 |
const { homeLayouts } = useHomeLayouts({ |
| 30 |
disableFetch: waitForPlugins, |
| 31 |
}); |
| 32 |
|
| 33 |
useEffect(() => { |
| 34 |
if (!sitePlugins) return; |
| 35 |
addMany('sitePlugins', sitePlugins, { clearExisting: true }); |
| 36 |
}, [addMany, sitePlugins]); |
| 37 |
|
| 38 |
useEffect(() => { |
| 39 |
if (!siteStrings) return; |
| 40 |
setSiteStrings(siteStrings); |
| 41 |
}, [siteStrings, setSiteStrings]); |
| 42 |
|
| 43 |
useEffect(() => { |
| 44 |
if (!siteImages) return; |
| 45 |
setSiteImages(siteImages); |
| 46 |
}, [siteImages, setSiteImages]); |
| 47 |
|
| 48 |
useEffect(() => { |
| 49 |
if (!homeLayouts) return; |
| 50 |
const id = setTimeout(nextPage, 1000); |
| 51 |
return () => clearTimeout(id); |
| 52 |
}, [homeLayouts, nextPage]); |
| 53 |
|
| 54 |
return ( |
| 55 |
<PageLayout> |
| 56 |
<div className="mx-auto grow overflow-y-auto px-4 py-8 md:p-12 md:px-6 3xl:p-16"> |
| 57 |
<div className="mx-auto flex h-full flex-col justify-center"> |
| 58 |
<VideoPlayer |
| 59 |
poster={`${window.extSharedData.assetPath}/site-building.webp`} |
| 60 |
path="https://images.extendify-cdn.com/launch/site-building.webm" |
| 61 |
className="mx-auto h-auto w-[200px] md:h-[400px] md:w-[400px]" |
| 62 |
/> |
| 63 |
|
| 64 |
<Title |
| 65 |
title={__('Designing Your Options', 'extendify-local')} |
| 66 |
description={__( |
| 67 |
'Please wait while we build some website options for you to select from.', |
| 68 |
'extendify-local', |
| 69 |
)} |
| 70 |
/> |
| 71 |
</div> |
| 72 |
</div> |
| 73 |
</PageLayout> |
| 74 |
); |
| 75 |
}; |
| 76 |
|
