| 1 |
import { __ } from '@wordpress/i18n' |
| 2 |
import { PagePreview } from '@onboarding/components/PagePreview' |
| 3 |
import { SuggestedPlugins } from '@onboarding/components/SuggestedPlugins' |
| 4 |
import { PageLayout } from '@onboarding/layouts/PageLayout' |
| 5 |
import { usePagesStore } from '@onboarding/state/Pages' |
| 6 |
import { useUserSelectionStore } from '@onboarding/state/UserSelections' |
| 7 |
import { pageState } from '@onboarding/state/factory' |
| 8 |
import { Checkmark } from '@onboarding/svg' |
| 9 |
|
| 10 |
export const state = pageState('Site Summary', () => ({ |
| 11 |
title: __('Summary', 'extendify'), |
| 12 |
default: undefined, |
| 13 |
showInSidebar: true, |
| 14 |
// Not ready because this is where the launch button shows |
| 15 |
ready: false, |
| 16 |
isDefault: () => true, |
| 17 |
})) |
| 18 |
export const SiteSummary = () => { |
| 19 |
const { siteType, style, pages, goals } = useUserSelectionStore() |
| 20 |
const setPage = usePagesStore((state) => state.setPage) |
| 21 |
|
| 22 |
return ( |
| 23 |
<PageLayout> |
| 24 |
<div> |
| 25 |
<h1 className="text-3xl text-partner-primary-text mb-4 mt-0"> |
| 26 |
{__("Let's launch your site!", 'extendify')} |
| 27 |
</h1> |
| 28 |
<p className="text-base mb-0"> |
| 29 |
{__('Review your site configuration.', 'extendify')} |
| 30 |
</p> |
| 31 |
</div> |
| 32 |
<div className="w-full"> |
| 33 |
<div className="flex flex-col gap-y-12"> |
| 34 |
<div className="block"> |
| 35 |
<h2 className="text-lg m-0 mb-4 text-gray-900"> |
| 36 |
{__('Design', 'extendify')} |
| 37 |
</h2> |
| 38 |
|
| 39 |
{style?.label ? ( |
| 40 |
<div className="overflow-hidden rounded-lg relative"> |
| 41 |
<span |
| 42 |
aria-hidden="true" |
| 43 |
className="absolute top-0 bottom-0 left-3/4 right-0 z-40 bg-gradient-to-l from-white pointer-events-none"></span> |
| 44 |
{pages.length > 0 && ( |
| 45 |
<div className="flex justify-center lg:justify-start w-full overflow-y-scroll lg:pr-52"> |
| 46 |
<div className="flex flex-col lg:flex-row lg:flex-no-wrap gap-4"> |
| 47 |
{pages?.map((page) => { |
| 48 |
return ( |
| 49 |
<div |
| 50 |
className="relative pointer-events-none" |
| 51 |
style={{ |
| 52 |
height: 360, |
| 53 |
width: 255, |
| 54 |
}} |
| 55 |
key={page.id}> |
| 56 |
<PagePreview |
| 57 |
displayOnly={true} |
| 58 |
page={page} |
| 59 |
blockHeight={356} |
| 60 |
/> |
| 61 |
</div> |
| 62 |
) |
| 63 |
})} |
| 64 |
</div> |
| 65 |
</div> |
| 66 |
)} |
| 67 |
</div> |
| 68 |
) : ( |
| 69 |
<button |
| 70 |
onClick={() => setPage('style')} |
| 71 |
className="bg-transparent text-partner-primary underline text-base cursor-pointer"> |
| 72 |
{__('Press to change the style', 'extendify')} |
| 73 |
</button> |
| 74 |
)} |
| 75 |
</div> |
| 76 |
<div className="block"> |
| 77 |
<h2 className="text-lg m-0 mb-4"> |
| 78 |
{__('Industry', 'extendify')} |
| 79 |
</h2> |
| 80 |
|
| 81 |
{siteType?.label ? ( |
| 82 |
<div className="flex items-center"> |
| 83 |
<Checkmark |
| 84 |
className="text-extendify-main-dark" |
| 85 |
style={{ width: 24 }} |
| 86 |
/> |
| 87 |
<span className="text-base pl-2"> |
| 88 |
{siteType.label} |
| 89 |
</span> |
| 90 |
</div> |
| 91 |
) : ( |
| 92 |
<button |
| 93 |
onClick={() => setPage('site-type')} |
| 94 |
className="bg-transparent text-partner-primary underline text-base cursor-pointer"> |
| 95 |
{__('Press to set a site type', 'extendify')} |
| 96 |
</button> |
| 97 |
)} |
| 98 |
</div> |
| 99 |
{goals?.length > 0 ? ( |
| 100 |
<div className="block"> |
| 101 |
<h2 className="text-lg m-0 mb-4"> |
| 102 |
{__('Goals', 'extendify')} |
| 103 |
</h2> |
| 104 |
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> |
| 105 |
{goals?.map((goal) => { |
| 106 |
return ( |
| 107 |
<div |
| 108 |
className="flex items-center" |
| 109 |
key={goal.id}> |
| 110 |
<Checkmark |
| 111 |
className="text-extendify-main-dark" |
| 112 |
style={{ width: 24 }} |
| 113 |
/> |
| 114 |
<span className="text-base pl-2"> |
| 115 |
{goal.title} |
| 116 |
</span> |
| 117 |
</div> |
| 118 |
) |
| 119 |
})} |
| 120 |
</div> |
| 121 |
</div> |
| 122 |
) : null} |
| 123 |
<div className="block"> |
| 124 |
<h2 className="text-lg m-0 mb-4"> |
| 125 |
{__('Pages', 'extendify')} |
| 126 |
</h2> |
| 127 |
|
| 128 |
{pages.length > 0 ? ( |
| 129 |
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> |
| 130 |
{pages?.map((page) => { |
| 131 |
return ( |
| 132 |
<div |
| 133 |
className="flex items-center" |
| 134 |
key={page.id}> |
| 135 |
<Checkmark |
| 136 |
className="text-extendify-main-dark" |
| 137 |
style={{ width: 24 }} |
| 138 |
/> |
| 139 |
<span className="text-base pl-2"> |
| 140 |
{page.title} |
| 141 |
</span> |
| 142 |
</div> |
| 143 |
) |
| 144 |
})} |
| 145 |
</div> |
| 146 |
) : ( |
| 147 |
<button |
| 148 |
onClick={() => setPage('pages')} |
| 149 |
className="bg-transparent text-partner-primary underline text-base cursor-pointer"> |
| 150 |
{__('Press to set your pages', 'extendify')} |
| 151 |
</button> |
| 152 |
)} |
| 153 |
</div> |
| 154 |
<div className="block"> |
| 155 |
<h2 className="text-lg m-0 mb-4"> |
| 156 |
{__('Plugins', 'extendify')} |
| 157 |
</h2> |
| 158 |
<SuggestedPlugins /> |
| 159 |
</div> |
| 160 |
</div> |
| 161 |
</div> |
| 162 |
</PageLayout> |
| 163 |
) |
| 164 |
} |
| 165 |
|
