| @@ -1,24 +1,37 @@ | ||
| 1 | -import { ExtendifyCodeConnector } from '@auto-launch/components/ExtendifyCodeConnector'; | |
| 2 | -import { Launch } from '@auto-launch/components/Launch'; | |
| 1 | +import { CreatingSite } from '@auto-launch/components/CreatingSite'; | |
| 2 | +import { DescriptionGathering } from '@auto-launch/components/DescriptionGathering'; | |
| 3 | 3 | import { LaunchUpdate } from '@auto-launch/components/LaunchUpdate'; |
| 4 | 4 | import { Logo } from '@auto-launch/components/Logo'; |
| 5 | -import { MigrateChoice } from '@auto-launch/components/MigrateChoice'; | |
| 6 | -import { MovingGradient } from '@auto-launch/components/MovingGradients'; | |
| 7 | -import { NeedsTheme } from '@auto-launch/components/NeedsTheme'; | |
| 8 | -import { RestartLaunchModal } from '@auto-launch/components/RestartLaunchModal'; | |
| 9 | -import { ViewportPulse } from '@auto-launch/components/ViewportPulse'; | |
| 5 | +import { | |
| 6 | + ModalHeading, | |
| 7 | + ModalLink, | |
| 8 | + ModalText, | |
| 9 | +} from '@auto-launch/components/Modal'; | |
| 10 | +import { ShaderBackground } from '@auto-launch/components/ShaderBackground'; | |
| 11 | +import { activeLogo } from '@auto-launch/functions/design'; | |
| 10 | 12 | import { getAbTest } from '@auto-launch/functions/getAbTest'; |
| 11 | 13 | import { preLaunchFunctions } from '@auto-launch/functions/setup'; |
| 12 | 14 | import { updateOption } from '@auto-launch/functions/wp'; |
| 15 | +import { useExtendifyCodeConnector } from '@auto-launch/hooks/useExtendifyCodeConnector'; | |
| 16 | +import { useInstallRequiredPlugins } from '@auto-launch/hooks/useInstallRequiredPlugins'; | |
| 17 | +import { useMigrateChoice } from '@auto-launch/hooks/useMigrateChoice'; | |
| 18 | +import { useNeedsTheme } from '@auto-launch/hooks/useNeedsTheme'; | |
| 19 | +import { useRestartLaunch } from '@auto-launch/hooks/useRestartLaunch'; | |
| 13 | 20 | import { useLaunchDataStore } from '@auto-launch/state/launch-data'; |
| 21 | +import { launchStrings } from '@auto-launch/strings'; | |
| 22 | +import { | |
| 23 | + activeChoiceTemplate, | |
| 24 | + activeDescriptionTemplate, | |
| 25 | + activeModalTemplate, | |
| 26 | +} from '@auto-launch/templates'; | |
| 27 | +import { ActionButton, SecondaryButton } from '@auto-launch/templates/button'; | |
| 28 | +import { Heading, PageLink } from '@auto-launch/templates/heading'; | |
| 14 | 29 | import { digest } from '@shared/api/digest'; |
| 15 | 30 | import { registerCoreBlocks } from '@wordpress/block-library'; |
| 16 | 31 | import { getBlockTypes } from '@wordpress/blocks'; |
| 17 | 32 | import { useSelect } from '@wordpress/data'; |
| 18 | -import { useEffect, useRef, useState } from '@wordpress/element'; | |
| 19 | -import { __ } from '@wordpress/i18n'; | |
| 20 | -import { chevronLeft, Icon } from '@wordpress/icons'; | |
| 33 | +import { useEffect, useState } from '@wordpress/element'; | |
| 21 | 34 | import classNames from 'classnames'; |
| 22 | 35 | import { AnimatePresence, motion } from 'framer-motion'; |
| 23 | 36 | import { checkIn, reportRestApiStatus } from './functions/insights'; |
| 24 | 37 | |
| @@ -60,10 +73,23 @@ | ||
| 60 | 73 | getAbTest('AutoLaunch.MigrateScreen').variant === 'B'; |
| 61 | 74 | const [choosingMigration, setChoosingMigration] = useState(inMigrateVariant); |
| 62 | 75 | const showMigrateChoice = !skipDescription && choosingMigration; |
| 63 | 76 | |
| 64 | - const containerRef = useRef(null); | |
| 77 | + // Deleting the old pages first leaves the user on a theme Launch cannot build on. | |
| 78 | + const blocker = launchUpdateNeeded | |
| 79 | + ? 'update' | |
| 80 | + : needsTheme | |
| 81 | + ? 'theme' | |
| 82 | + : needsToReset | |
| 83 | + ? 'reset' | |
| 84 | + : null; | |
| 65 | 85 | |
| 86 | + // Only the describe screen commits to a build; every other screen can still leave. | |
| 87 | + useInstallRequiredPlugins({ | |
| 88 | + enabled: | |
| 89 | + !blocker && !skipDescription && !showConnector && !showMigrateChoice, | |
| 90 | + }); | |
| 91 | + | |
| 66 | 92 | useEffect(() => { |
| 67 | 93 | if (launchUpdateNeeded) return; |
| 68 | 94 | if (launchUpdateGaveUp) { |
| 69 | 95 | digest({ |
| @@ -75,9 +101,9 @@ | ||
| 75 | 101 | }, |
| 76 | 102 | }); |
| 77 | 103 | } |
| 78 | 104 | // translators: Launch is a noun. |
| 79 | - document.title = __('Launch - AI-Powered Web Creation', 'extendify-local'); | |
| 105 | + document.title = launchStrings().documentTitle; | |
| 80 | 106 | updateOption('extendify_launch_loaded', new Date().toISOString()); |
| 81 | 107 | // We load core blocks so we can parse them |
| 82 | 108 | if (getBlockTypes().length === 0) registerCoreBlocks(); |
| 83 | 109 | |
| @@ -85,183 +111,210 @@ | ||
| 85 | 111 | checkIn({ stage: 'launch_page' }); |
| 86 | 112 | reportRestApiStatus(); |
| 87 | 113 | }, [launchUpdateNeeded, launchUpdateGaveUp]); |
| 88 | 114 | |
| 89 | - if (launchUpdateNeeded) { | |
| 90 | - return ( | |
| 91 | - <Wrapper> | |
| 92 | - <div className="bg-white w-full max-w-xl rounded-lg border border-design-main/60 relative z-10"> | |
| 93 | - <LaunchUpdate | |
| 94 | - pluginUpdateNeeded={pluginUpdateNeeded} | |
| 95 | - themeUpdateNeeded={themeUpdateNeeded} | |
| 96 | - pluginUpdateViaRest={pluginUpdateViaRest} | |
| 97 | - pluginSlug={window.extLaunchData?.pluginSlug} | |
| 98 | - attempt={launchUpdateAttempt} | |
| 99 | - /> | |
| 100 | - </div> | |
| 101 | - </Wrapper> | |
| 102 | - ); | |
| 103 | - } | |
| 115 | + const modal = | |
| 116 | + blocker === 'update' ? ( | |
| 117 | + <UpdateScreen | |
| 118 | + pluginUpdateNeeded={pluginUpdateNeeded} | |
| 119 | + themeUpdateNeeded={themeUpdateNeeded} | |
| 120 | + pluginUpdateViaRest={pluginUpdateViaRest} | |
| 121 | + pluginSlug={window.extLaunchData?.pluginSlug} | |
| 122 | + attempt={launchUpdateAttempt} | |
| 123 | + /> | |
| 124 | + ) : blocker === 'theme' ? ( | |
| 125 | + <NeedsThemeScreen /> | |
| 126 | + ) : blocker === 'reset' ? ( | |
| 127 | + <RestartScreen pages={oldPages} /> | |
| 128 | + ) : null; | |
| 129 | + // Site creation must not start behind a modal the user has not cleared. | |
| 130 | + const screen = modal | |
| 131 | + ? 'description' | |
| 132 | + : showConnector | |
| 133 | + ? 'connector' | |
| 134 | + : showMigrateChoice | |
| 135 | + ? 'migrate' | |
| 136 | + : skipDescription | |
| 137 | + ? 'creating' | |
| 138 | + : 'description'; | |
| 104 | 139 | |
| 105 | - if (needsTheme) { | |
| 106 | - return ( | |
| 107 | - <Wrapper> | |
| 108 | - <div className="bg-white w-full max-w-3xl rounded-lg border border-design-main/60 relative z-10"> | |
| 109 | - <NeedsTheme /> | |
| 110 | - </div> | |
| 111 | - </Wrapper> | |
| 112 | - ); | |
| 113 | - } | |
| 140 | + return ( | |
| 141 | + <Viewport modal={modal} screen={screen}> | |
| 142 | + {screen === 'creating' ? ( | |
| 143 | + <CreatingSite /> | |
| 144 | + ) : screen === 'connector' ? ( | |
| 145 | + <ConnectorScreen | |
| 146 | + onProceed={() => setData('go', true)} | |
| 147 | + footer={ | |
| 148 | + <BackLink | |
| 149 | + onClick={() => setData('showExtendifyCodeScreen', false)} | |
| 150 | + /> | |
| 151 | + } | |
| 152 | + /> | |
| 153 | + ) : screen === 'migrate' ? ( | |
| 154 | + <MigrateScreen | |
| 155 | + onBuildNew={() => setChoosingMigration(false)} | |
| 156 | + footer={showExitLink ? <ExitLink /> : null} | |
| 157 | + /> | |
| 158 | + ) : ( | |
| 159 | + <DescriptionPage | |
| 160 | + heading={<TheTitle />} | |
| 161 | + footer={showExitLink ? <ExitLink /> : null} | |
| 162 | + > | |
| 163 | + {/* Matches the migrate screen's height, so choosing Build does not jump. */} | |
| 164 | + <div className={classNames({ 'md:h-72.75': inMigrateVariant })}> | |
| 165 | + <div className="mx-auto w-full"> | |
| 166 | + <DescriptionGathering autoFocus={!modal} /> | |
| 167 | + </div> | |
| 168 | + </div> | |
| 169 | + </DescriptionPage> | |
| 170 | + )} | |
| 171 | + </Viewport> | |
| 172 | + ); | |
| 173 | +}; | |
| 114 | 174 | |
| 115 | - if (needsToReset) { | |
| 116 | - return ( | |
| 117 | - <Wrapper> | |
| 118 | - <div className="w-full max-w-2xl rounded-3xl border bg-gray-100/80 backdrop-blur-2xl shadow-md relative z-10 border-gray-300"> | |
| 119 | - <RestartLaunchModal pages={oldPages} /> | |
| 120 | - </div> | |
| 121 | - </Wrapper> | |
| 122 | - ); | |
| 123 | - } | |
| 124 | - | |
| 175 | +const NeedsThemeScreen = () => { | |
| 176 | + const { title, body, action } = useNeedsTheme(); | |
| 125 | 177 | return ( |
| 126 | - <Wrapper | |
| 127 | - footer={ | |
| 128 | - showConnector ? ( | |
| 129 | - <BackLink onClick={() => setData('showExtendifyCodeScreen', false)} /> | |
| 130 | - ) : showExitLink ? ( | |
| 131 | - <ExitLink /> | |
| 132 | - ) : null | |
| 133 | - } | |
| 134 | - > | |
| 135 | - <AnimatePresence mode="wait" initial={false}> | |
| 136 | - <TheTitle | |
| 137 | - key={showMigrateChoice ? 'migrate' : 'description'} | |
| 138 | - // The connector renders its own heading, so hide the shared one. | |
| 139 | - hide={skipDescription || showConnector} | |
| 140 | - migrate={showMigrateChoice} | |
| 141 | - /> | |
| 142 | - </AnimatePresence> | |
| 143 | - <div | |
| 144 | - ref={containerRef} | |
| 145 | - className={classNames('w-full relative z-10', { | |
| 146 | - 'max-w-3xl': inMigrateVariant || showConnector, | |
| 147 | - 'max-w-2xl': !inMigrateVariant && !showConnector, | |
| 148 | - 'md:h-72.75': inMigrateVariant && !skipDescription, | |
| 149 | - })} | |
| 150 | - > | |
| 151 | - <AnimatePresence mode="wait"> | |
| 152 | - {showConnector && ( | |
| 153 | - <ExtendifyCodeConnector | |
| 154 | - key="extendify-code" | |
| 155 | - onProceed={() => setData('go', true)} | |
| 156 | - /> | |
| 157 | - )} | |
| 158 | - {!showConnector && showMigrateChoice && ( | |
| 159 | - <MigrateChoice | |
| 160 | - key="migrate-choice" | |
| 161 | - onBuildNew={() => setChoosingMigration(false)} | |
| 162 | - /> | |
| 163 | - )} | |
| 164 | - {!showConnector && !showMigrateChoice && ( | |
| 165 | - <Launch | |
| 166 | - key={skipDescription ? 'description-launch' : 'creating-launch'} | |
| 167 | - skipDescription={skipDescription} | |
| 168 | - lastHeight={containerRef.current?.offsetHeight} | |
| 169 | - /> | |
| 170 | - )} | |
| 171 | - </AnimatePresence> | |
| 172 | - </div> | |
| 173 | - </Wrapper> | |
| 178 | + <ModalPage | |
| 179 | + heading={<ModalHeading title={title} />} | |
| 180 | + body={<ModalText>{body}</ModalText>} | |
| 181 | + actions={<ModalLink href={action.href} label={action.label} />} | |
| 182 | + /> | |
| 174 | 183 | ); |
| 175 | 184 | }; |
| 176 | 185 | |
| 177 | -const Wrapper = ({ children, footer }) => { | |
| 178 | - const { pulse } = useLaunchDataStore(); | |
| 186 | +const UpdateScreen = (props) => <LaunchUpdate {...props} />; | |
| 179 | 187 | |
| 188 | +const RestartScreen = ({ pages }) => { | |
| 189 | + const { title, body, note, exit, confirm } = useRestartLaunch({ pages }); | |
| 180 | 190 | return ( |
| 181 | - <div style={{ zIndex: 99999 + 1 }} className="fixed inset-0 bg-white"> | |
| 182 | - <div className="relative h-dvh bg-banner-main text-banner-text text-base overflow-y-auto"> | |
| 183 | - <div className="relative z-10 min-h-dvh w-full flex flex-col items-center justify-between p-6"> | |
| 184 | - <div className="w-full flex flex-col items-center gap-5 md:gap-8 m-auto"> | |
| 185 | - <div className="mb-4"> | |
| 186 | - <Logo /> | |
| 187 | - </div> | |
| 188 | - {children} | |
| 189 | - </div> | |
| 190 | - {footer && <div className="w-full pt-8 shrink-0">{footer}</div>} | |
| 191 | - </div> | |
| 192 | - </div> | |
| 193 | - <MovingGradient /> | |
| 194 | - {pulse ? <ViewportPulse /> : null} | |
| 195 | - </div> | |
| 191 | + <ModalPage | |
| 192 | + left | |
| 193 | + heading={<ModalHeading title={title} />} | |
| 194 | + body={ | |
| 195 | + <> | |
| 196 | + <ModalText>{body}</ModalText> | |
| 197 | + <ModalText strong>{note}</ModalText> | |
| 198 | + </> | |
| 199 | + } | |
| 200 | + actions={ | |
| 201 | + <> | |
| 202 | + <SecondaryButton | |
| 203 | + disabled={confirm.processing} | |
| 204 | + label={exit.label} | |
| 205 | + onClick={exit.onClick} | |
| 206 | + /> | |
| 207 | + <ActionButton {...confirm} /> | |
| 208 | + </> | |
| 209 | + } | |
| 210 | + /> | |
| 196 | 211 | ); |
| 197 | 212 | }; |
| 198 | 213 | |
| 199 | -const ExitLink = () => { | |
| 214 | +const ConnectorScreen = ({ onProceed, footer }) => { | |
| 215 | + const { title, subtitle, options } = useExtendifyCodeConnector({ onProceed }); | |
| 200 | 216 | return ( |
| 201 | - <a | |
| 202 | - className="inline-flex items-center gap-0.5 text-sm text-banner-text opacity-70 hover:opacity-100 transition-opacity" | |
| 203 | - href={window.extSharedData.adminUrl} | |
| 204 | - onClick={() => checkIn({ stage: 'exit_to_wp_admin' })} | |
| 205 | - > | |
| 206 | - <Icon fill="currentColor" icon={chevronLeft} size={20} /> | |
| 207 | - {__('WP Admin Dashboard', 'extendify-local')} | |
| 208 | - </a> | |
| 217 | + <ChoicePage | |
| 218 | + heading={title && <Heading subtitle={subtitle} title={title} />} | |
| 219 | + options={options} | |
| 220 | + footer={footer} | |
| 221 | + /> | |
| 209 | 222 | ); |
| 210 | 223 | }; |
| 211 | 224 | |
| 212 | -const BackLink = ({ onClick }) => { | |
| 225 | +const MigrateScreen = ({ onBuildNew, footer }) => { | |
| 226 | + const { title, options } = useMigrateChoice({ onBuildNew }); | |
| 213 | 227 | return ( |
| 214 | - <button | |
| 215 | - type="button" | |
| 216 | - onClick={onClick} | |
| 217 | - className="inline-flex items-center gap-0.5 border-0 bg-transparent cursor-pointer text-sm text-banner-text opacity-70 hover:opacity-100 transition-opacity" | |
| 218 | - > | |
| 219 | - <Icon fill="currentColor" icon={chevronLeft} size={20} /> | |
| 220 | - {__('Back', 'extendify-local')} | |
| 221 | - </button> | |
| 228 | + <ChoicePage | |
| 229 | + heading={<Heading title={title} />} | |
| 230 | + options={options} | |
| 231 | + footer={footer} | |
| 232 | + /> | |
| 222 | 233 | ); |
| 223 | 234 | }; |
| 224 | 235 | |
| 225 | -const TheTitle = ({ hide, migrate }) => { | |
| 226 | - const useOldHeader = | |
| 227 | - getAbTest('AutoLaunch.HeaderParagraphOld').variant === 'B'; | |
| 228 | - if (hide) return null; | |
| 236 | +const Viewport = ({ children, screen, modal }) => ( | |
| 237 | + // Inline inset: utilities are !important here and would win over it. | |
| 238 | + <div | |
| 239 | + style={{ zIndex: 99999 + 1, top: 0, right: 0, bottom: 0, left: 0 }} | |
| 240 | + className="group fixed bg-ui-page" | |
| 241 | + > | |
| 242 | + <AnimatePresence mode="wait" initial={false}> | |
| 243 | + <motion.div | |
| 244 | + key={screen} | |
| 245 | + className="absolute inset-0" | |
| 246 | + // React 18 drops a boolean inert; only a string reaches the DOM. | |
| 247 | + inert={modal ? '' : undefined} | |
| 248 | + initial={{ opacity: 0 }} | |
| 249 | + animate={{ opacity: 1 }} | |
| 250 | + exit={{ opacity: 0 }} | |
| 251 | + transition={{ duration: 0.25 }} | |
| 252 | + > | |
| 253 | + {children} | |
| 254 | + </motion.div> | |
| 255 | + </AnimatePresence> | |
| 256 | + {modal} | |
| 257 | + <ShaderBackground /> | |
| 258 | + </div> | |
| 259 | +); | |
| 229 | 260 | |
| 230 | - const headingClass = | |
| 231 | - 'text-xl md:text-2xl text-pretty text-banner-text font-semibold p-0 m-0 text-center'; | |
| 232 | - const transition = { | |
| 233 | - animate: { opacity: 1 }, | |
| 234 | - exit: { opacity: 0 }, | |
| 235 | - transition: { duration: 0.4 }, | |
| 261 | +const DescriptionPage = ({ children, footer, heading }) => { | |
| 262 | + const Page = activeDescriptionTemplate(); | |
| 263 | + const { partnerLogo, partnerName } = window.extSharedData ?? {}; | |
| 264 | + // A template cannot tell a heading that renders null from one that draws. | |
| 265 | + const has = { | |
| 266 | + heading: Boolean(heading), | |
| 267 | + footer: Boolean(footer), | |
| 236 | 268 | }; |
| 269 | + const parts = { | |
| 270 | + logo: <Logo name={partnerName} src={activeLogo() ?? partnerLogo} />, | |
| 271 | + heading, | |
| 272 | + content: children, | |
| 273 | + footer, | |
| 274 | + }; | |
| 237 | 275 | |
| 238 | - if (migrate) { | |
| 239 | - return ( | |
| 240 | - <motion.h2 className={headingClass} {...transition}> | |
| 241 | - {__('How would you like to start your website?', 'extendify-local')} | |
| 242 | - </motion.h2> | |
| 243 | - ); | |
| 244 | - } | |
| 276 | + return <Page parts={parts} has={has} />; | |
| 277 | +}; | |
| 245 | 278 | |
| 246 | - if (useOldHeader) { | |
| 247 | - return ( | |
| 248 | - <motion.div className="flex flex-col items-center gap-2" {...transition}> | |
| 249 | - <h2 className={headingClass}> | |
| 250 | - {__('Tell Us About Your Website', 'extendify-local')} | |
| 251 | - </h2> | |
| 252 | - <p className="text-sm md:text-base text-pretty text-banner-text opacity-70 p-0 m-0 text-center max-w-xl"> | |
| 253 | - {__( | |
| 254 | - "Share your vision, and we'll craft a website that's perfectly tailored to your needs, ready to launch in no time.", | |
| 255 | - 'extendify-local', | |
| 256 | - )} | |
| 257 | - </p> | |
| 258 | - </motion.div> | |
| 259 | - ); | |
| 260 | - } | |
| 279 | +const ModalPage = ({ heading, body, actions, left }) => { | |
| 280 | + const Page = activeModalTemplate(); | |
| 281 | + const has = { | |
| 282 | + heading: Boolean(heading), | |
| 283 | + actions: Boolean(actions), | |
| 284 | + card: true, | |
| 285 | + left: Boolean(left), | |
| 286 | + }; | |
| 261 | 287 | |
| 262 | - return ( | |
| 263 | - <motion.h2 className={headingClass} {...transition}> | |
| 264 | - {__('Describe the website you want to build', 'extendify-local')} | |
| 265 | - </motion.h2> | |
| 266 | - ); | |
| 288 | + return <Page parts={{ heading, body, actions }} has={has} />; | |
| 267 | 289 | }; |
| 290 | + | |
| 291 | +const ChoicePage = ({ heading, options, footer }) => { | |
| 292 | + const Page = activeChoiceTemplate(); | |
| 293 | + const { partnerLogo, partnerName } = window.extSharedData ?? {}; | |
| 294 | + const has = { | |
| 295 | + heading: Boolean(heading), | |
| 296 | + footer: Boolean(footer), | |
| 297 | + }; | |
| 298 | + const parts = { | |
| 299 | + logo: <Logo name={partnerName} src={activeLogo() ?? partnerLogo} />, | |
| 300 | + heading, | |
| 301 | + options, | |
| 302 | + footer, | |
| 303 | + }; | |
| 304 | + | |
| 305 | + return <Page parts={parts} has={has} />; | |
| 306 | +}; | |
| 307 | + | |
| 308 | +const ExitLink = () => ( | |
| 309 | + <PageLink | |
| 310 | + href={window.extSharedData.adminUrl} | |
| 311 | + label={launchStrings().exitLink} | |
| 312 | + onClick={() => checkIn({ stage: 'exit_to_wp_admin' })} | |
| 313 | + /> | |
| 314 | +); | |
| 315 | + | |
| 316 | +const BackLink = ({ onClick }) => ( | |
| 317 | + <PageLink label={launchStrings().back} onClick={onClick} /> | |
| 318 | +); | |
| 319 | + | |
| 320 | +const TheTitle = () => <Heading title={launchStrings().heading} />; | |
