- { onMoveUp && onMoveDown && (
-
-
- ) }
-
-
{ label ?? category?.label }
-
- { description ?? category?.description }
-
-
- { ! isShowMorePatterns && hasNonPriorityPatterns && (
-
-
- ) }
-
- { translate( 'You can edit your content later in the Site Editor' ) }
-
-
- );
-};
-
-export default PatternTooltipDeadClick;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-color-palettes.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-color-palettes.tsx
deleted file mode 100644
index dedde7fa3a8f7..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-color-palettes.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ColorPaletteVariations } from '@automattic/global-styles';
-import { useTranslate } from 'i18n-calypso';
-import { useSiteGlobalStylesStatus } from 'calypso/state/sites/hooks/use-site-global-styles-status';
-import Panel from './panel';
-import type { GlobalStylesObject } from '@automattic/global-styles';
-
-interface Props {
- siteId: number | string;
- stylesheet: string;
- selectedColorPaletteVariation: GlobalStylesObject | null;
- onSelect: ( colorPaletteVariation: GlobalStylesObject | null ) => void;
-}
-
-const ScreenColorPalettes = ( {
- siteId,
- stylesheet,
- selectedColorPaletteVariation,
- onSelect,
-}: Props ) => {
- const { shouldLimitGlobalStyles } = useSiteGlobalStylesStatus( siteId );
- const translate = useTranslate();
-
- return (
-
-
-
- );
-};
-
-export default ScreenColorPalettes;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-confirmation.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-confirmation.scss
deleted file mode 100644
index 490821f952f53..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-confirmation.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import "@automattic/typography/styles/fonts";
-
-.screen-confirmation__list {
- display: flex;
- flex-direction: column;
- gap: 18px;
-}
-
-.screen-confirmation__list-item-icon {
- fill: var(--studio-gray-60);
- height: 24px;
- min-width: 24px !important;
- border-radius: 2px;
- background: var(--studio-gray-0);
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.screen-confirmation__list-item-wrapper {
- display: flex;
- padding-top: 2px;
- flex-direction: column;
- flex-grow: 1;
- gap: 4px;
- font-size: $font-body-small;
- line-height: 20px;
- letter-spacing: -0.15px;
-}
-
-.screen-confirmation__list-item-description {
- color: var(--studio-gray-60);
- text-wrap: pretty;
-}
-
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-confirmation.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-confirmation.tsx
deleted file mode 100644
index fa8da2ab0fc9b..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-confirmation.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Button } from '@automattic/components';
-import { Design } from '@automattic/design-picker';
-import { NavigatorHeader } from '@automattic/onboarding';
-import {
- __experimentalVStack as VStack,
- __experimentalHStack as HStack,
-} from '@wordpress/components';
-import { Icon, image, verse, layout } from '@wordpress/icons';
-import { getLocaleSlug, useTranslate } from 'i18n-calypso';
-import { useSelector } from 'react-redux';
-import { getActiveTheme } from 'calypso/state/themes/selectors';
-import { useScreen } from './hooks';
-import NavigatorTitle from './navigator-title';
-import Survey from './survey';
-import type { IAppState } from 'calypso/state/types';
-import './screen-confirmation.scss';
-
-interface Props {
- isNewSite: boolean;
- siteId?: number;
- selectedDesign?: Design;
- surveyDismissed: boolean;
- setSurveyDismissed: ( dismissed: boolean ) => void;
- onConfirm: () => void;
-}
-
-const ScreenConfirmation = ( {
- isNewSite,
- siteId = 0,
- selectedDesign,
- surveyDismissed,
- setSurveyDismissed,
- onConfirm,
-}: Props ) => {
- const translate = useTranslate();
- const { title, continueLabel } = useScreen( 'confirmation' );
-
- const currentThemeId = useSelector( ( state: IAppState ) => getActiveTheme( state, siteId ) );
- const willThemeChange = currentThemeId !== selectedDesign?.slug;
- const isEnglishLocale = getLocaleSlug()?.startsWith( 'en' );
-
- const description =
- currentThemeId && willThemeChange && ! isNewSite
- ? translate(
- 'Your new theme is %(newThemeName)s. Time to add some content and bring your site to life!',
- {
- args: {
- newThemeName: selectedDesign?.title ?? '',
- },
- }
- )
- : translate( 'Time to add some content and bring your site to life!' );
-
- const list = [
- {
- icon: image,
- title: translate( 'Upload images' ),
- description: translate( 'Showcase your photos in their best light.' ),
- },
- {
- icon: verse,
- title: translate( 'Start writing' ),
- description: translate( 'Get things going and share your insights.' ),
- },
- {
- icon: layout,
- title: translate( 'Customize every detail' ),
- description: translate( 'Make your site even more unique.' ),
- },
- ];
-
- return (
- <>
- }
- description={ description }
- hideBack
- />
-
-
- { list.map( ( { icon, title, description } ) => (
-
-
-
-
-
- { title }
- { description }
-
-
- ) ) }
-
- { ! surveyDismissed && isEnglishLocale && (
-
- ) }
-
-
-
-
- );
-};
-
-export default ScreenConfirmation;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-font-pairings.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-font-pairings.tsx
deleted file mode 100644
index c171472ee5042..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-font-pairings.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { FontPairingVariations } from '@automattic/global-styles';
-import { useTranslate } from 'i18n-calypso';
-import { useSiteGlobalStylesStatus } from 'calypso/state/sites/hooks/use-site-global-styles-status';
-import Panel from './panel';
-import type { GlobalStylesObject } from '@automattic/global-styles';
-
-interface Props {
- siteId: number | string;
- stylesheet: string;
- selectedFontPairingVariation: GlobalStylesObject | null;
- onSelect: ( fontPairingVariation: GlobalStylesObject | null ) => void;
-}
-
-const ScreenFontPairings = ( {
- siteId,
- stylesheet,
- selectedFontPairingVariation,
- onSelect,
-}: Props ) => {
- const translate = useTranslate();
- const { shouldLimitGlobalStyles } = useSiteGlobalStylesStatus( siteId );
-
- return (
-
-
-
- );
-};
-
-export default ScreenFontPairings;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-main.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-main.tsx
deleted file mode 100644
index f8edd2ad6aab0..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-main.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { NavigatorHeader, NavigatorItem, NavigatorItemGroup } from '@automattic/onboarding';
-import {
- Button,
- __experimentalVStack as VStack,
- __experimentalUseNavigator as useNavigator,
-} from '@wordpress/components';
-import { header, footer } from '@wordpress/icons';
-import { useTranslate } from 'i18n-calypso';
-import { useEffect } from 'react';
-import { INITIAL_CATEGORY, NAVIGATOR_PATHS } from './constants';
-import { PATTERN_ASSEMBLER_EVENTS } from './events';
-import { useScreen, usePatternCountMapByCategory } from './hooks';
-import NavigatorTitle from './navigator-title';
-import PatternCategoryList from './pattern-category-list';
-import PatternCount from './pattern-count';
-import { Category, Pattern, PatternType } from './types';
-
-interface Props {
- onMainItemSelect: ( name: string ) => void;
- onPreselectPattern: ( type: PatternType, selectedPattern: Pattern ) => void;
- hasHeader: boolean;
- hasFooter: boolean;
- sections: Pattern[];
- categories: Category[];
- patternsMapByCategory: Record< string, Pattern[] >;
- onContinueClick: () => void;
- recordTracksEvent: ( name: string, eventProperties?: any ) => void;
-}
-
-const ScreenMain = ( {
- onMainItemSelect,
- onPreselectPattern,
- hasHeader,
- hasFooter,
- sections,
- categories,
- patternsMapByCategory,
- onContinueClick,
- recordTracksEvent,
-}: Props ) => {
- const translate = useTranslate();
- const { title, description, continueLabel } = useScreen( 'main' );
- const { location, params, goTo } = useNavigator();
- const patternCountMapByCategory = usePatternCountMapByCategory( sections );
- const selectedCategory = params.categorySlug as string;
- const totalPatternCount = Number( hasHeader ) + sections.length + Number( hasFooter );
- const isButtonDisabled = totalPatternCount === 0;
-
- const handlePreselectCategory = ( category: string ) => {
- goTo( `${ NAVIGATOR_PATHS.MAIN }/${ category }`, { replace: true } );
- };
-
- const handleSelectCategory = ( category: string, type: PatternType = 'section' ) => {
- const basePath = NAVIGATOR_PATHS.MAIN;
- const isBack = category === selectedCategory;
- const nextPath = ! isBack ? `${ basePath }/${ category }` : basePath;
- goTo( nextPath, { replace: true } );
-
- if ( ! isBack ) {
- recordTracksEvent( PATTERN_ASSEMBLER_EVENTS.CATEGORY_LIST_CATEGORY_CLICK, {
- pattern_category: category,
- } );
-
- if ( type !== 'section' ) {
- onMainItemSelect( type );
- }
- }
- };
-
- // On the first Assembler flow load, instead of starting with a blank page,
- // we insert a default header pattern and footer pattern, and then pre-select the first pattern category.
- //
- // This is done by doing all the above in a React effect when there is no selected pattern category,
- // which happens on the first load of the Assembler flow.
- useEffect( () => {
- if ( ! selectedCategory ) {
- if ( ! hasHeader && patternsMapByCategory.header?.length > 0 ) {
- onPreselectPattern( 'header', patternsMapByCategory.header[ 0 ] );
- }
- if ( ! hasFooter && patternsMapByCategory.footer?.length > 0 ) {
- onPreselectPattern( 'footer', patternsMapByCategory.footer[ 0 ] );
- }
- if ( hasHeader && hasFooter ) {
- handlePreselectCategory( INITIAL_CATEGORY );
- }
- }
- }, [
- hasHeader,
- hasFooter,
- patternsMapByCategory.header?.length,
- patternsMapByCategory.footer?.length,
- ] );
-
- return (
- <>
- }
- description={ description }
- hideBack
- />
-
-
-
- handleSelectCategory( 'header', 'header' ) }
- active={ location.path === NAVIGATOR_PATHS.MAIN_HEADER }
- >
- <>
- { translate( 'Header' ) }
-
-
-
-
-
-
-
-
- handleSelectCategory( 'footer', 'footer' ) }
- active={ location.path === NAVIGATOR_PATHS.MAIN_FOOTER }
- >
- <>
- { translate( 'Footer' ) }
-
-
-
-
-
-
-
- { totalPatternCount > 0 &&
- translate(
- 'You’ve selected {{strong}}%(count)s{{/strong}} pattern.',
- 'You’ve selected {{strong}}%(count)s{{/strong}} patterns.',
- {
- count: totalPatternCount,
- args: {
- count: totalPatternCount,
- },
- components: {
- strong: ,
- },
- }
- ) }
-
-
-
-
- );
-};
-
-export default ScreenMain;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-pages.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-pages.tsx
deleted file mode 100644
index 6f0ee9a0c5fdc..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-pages.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { NavigatorHeader } from '@automattic/onboarding';
-import { Button, __experimentalVStack as VStack } from '@wordpress/components';
-import { useEffect, useState } from 'react';
-import { PATTERN_ASSEMBLER_EVENTS } from './events';
-import { useScreen } from './hooks';
-import NavigatorTitle from './navigator-title';
-import PageList from './pages/page-list';
-
-interface Props {
- pagesToShow: any[];
- onSelect: ( page: string ) => void;
- onContinueClick: () => void;
- recordTracksEvent: ( name: string, eventProperties?: any ) => void;
-}
-
-const ScreenPages = ( { pagesToShow, onSelect, onContinueClick, recordTracksEvent }: Props ) => {
- const [ disabled, setDisabled ] = useState( true );
- const { title, description, continueLabel } = useScreen( 'pages' );
-
- const handleContinueClick = () => {
- if ( ! disabled ) {
- onContinueClick();
- }
- };
-
- // Use the mousedown event to prevent either the button focusing or text selection
- const handleMouseDown = ( event: React.MouseEvent ) => {
- if ( disabled ) {
- event.preventDefault();
- recordTracksEvent( PATTERN_ASSEMBLER_EVENTS.CONTINUE_MISCLICK );
- }
- };
-
- // Set a delay to enable the Continue button since the user might mis-click easily when they go back from another screen
- useEffect( () => {
- const timeoutId = window.setTimeout( () => setDisabled( false ), 300 );
- return () => {
- window.clearTimeout( timeoutId );
- };
- }, [] );
-
- return (
- <>
- }
- description={ description }
- hideBack
- />
-
-
-
-
-
- );
-};
-
-export default ScreenPages;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-pattern-list-panel.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-pattern-list-panel.tsx
deleted file mode 100644
index 8c72f52393749..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-pattern-list-panel.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useHasEnTranslation } from '@automattic/i18n-utils';
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
-import { useTranslate } from 'i18n-calypso';
-import PatternListPanel from './pattern-list-panel';
-import type { Pattern, PatternType, Category, PanelObject } from './types';
-
-interface Props {
- categories: Category[];
- selectedHeader: Pattern | null;
- selectedFooter: Pattern | null;
- selectedSections: Pattern[];
- patternsMapByCategory: { [ key: string ]: Pattern[] };
- pages?: Pattern[];
- onSelect: (
- type: PatternType,
- selectedPattern: Pattern | null,
- selectedCategory: string | null
- ) => void;
- recordTracksEvent: ( name: string, eventProperties?: any ) => void;
- isNewSite: boolean;
-}
-
-const ScreenPatternListPanel = ( {
- selectedHeader,
- selectedFooter,
- selectedSections,
- onSelect,
- ...props
-}: Props ) => {
- const hasEnTranslation = useHasEnTranslation();
- const translate = useTranslate();
- const navigator = useNavigator();
- const selectedCategory = navigator.params.categorySlug as string;
- const panels: Record< string, PanelObject > = {
- header: {
- type: 'header',
- label: translate( 'Header' ),
- description: hasEnTranslation(
- 'The header pattern sits at the top of your site and typically shows your site logo, title, and navigation.'
- )
- ? translate(
- 'The header pattern sits at the top of your site and typically shows your site logo, title, and navigation.'
- )
- : translate(
- 'Pick the header that appears at the top of every page and shows your site logo, title and navigation.'
- ),
- category: 'header',
- selectedPattern: selectedHeader,
- },
- footer: {
- type: 'footer',
- label: translate( 'Footer' ),
- description: hasEnTranslation(
- 'The footer pattern sits at the bottom of your site and typically shows useful links and contact information.'
- )
- ? translate(
- 'The footer pattern sits at the bottom of your site and typically shows useful links and contact information.'
- )
- : translate(
- 'Pick the footer that appears at the bottom of every page and shows useful links and contact information.'
- ),
- category: 'footer',
- selectedPattern: selectedFooter,
- },
- default: {
- type: 'section',
- selectedPattern: null,
- selectedPatterns: selectedSections,
- },
- };
-
- const currentPanel = panels[ selectedCategory ] || panels.default;
-
- const handleSelect = ( selectedPattern: Pattern | null ) => {
- onSelect( currentPanel.type, selectedPattern, selectedCategory );
- };
-
- return (
-
- );
-};
-
-export default ScreenPatternListPanel;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-styles.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-styles.tsx
deleted file mode 100644
index a2ea1fa5b875b..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-styles.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { NavigatorItem, NavigatorHeader, NavigatorItemGroup } from '@automattic/onboarding';
-import {
- Button,
- __experimentalVStack as VStack,
- __experimentalUseNavigator as useNavigator,
-} from '@wordpress/components';
-import { color, typography } from '@wordpress/icons';
-import { useTranslate } from 'i18n-calypso';
-import { useEffect, useState } from 'react';
-import { NAVIGATOR_PATHS } from './constants';
-import { PATTERN_ASSEMBLER_EVENTS } from './events';
-import { useScreen } from './hooks';
-import NavigatorTitle from './navigator-title';
-
-interface Props {
- onMainItemSelect: ( name: string ) => void;
- onContinueClick: () => void;
- recordTracksEvent: ( name: string, eventProperties?: any ) => void;
- hasColor: boolean;
- hasFont: boolean;
-}
-
-const ScreenStyles = ( {
- onMainItemSelect,
- onContinueClick,
- recordTracksEvent,
- hasColor,
- hasFont,
-}: Props ) => {
- const translate = useTranslate();
- const [ disabled, setDisabled ] = useState( true );
- const { location, goTo } = useNavigator();
- const { title, description, continueLabel } = useScreen( 'styles' );
-
- const handleNavigatorItemSelect = ( type: string, path: string ) => {
- const nextPath = path !== location.path ? path : NAVIGATOR_PATHS.STYLES;
- goTo( nextPath, { replace: true } );
- onMainItemSelect( type );
- };
-
- const handleContinueClick = () => {
- if ( ! disabled ) {
- onContinueClick();
- }
- };
-
- // Use the mousedown event to prevent either the button focusing or text selection
- const handleMouseDown = ( event: React.MouseEvent ) => {
- if ( disabled ) {
- event.preventDefault();
- recordTracksEvent( PATTERN_ASSEMBLER_EVENTS.CONTINUE_MISCLICK );
- }
- };
-
- // Set a delay to enable the Continue button since the user might mis-click easily when they go back from another screen
- useEffect( () => {
- const timeoutId = window.setTimeout( () => setDisabled( false ), 300 );
- return () => {
- window.clearTimeout( timeoutId );
- };
- }, [] );
-
- return (
- <>
- }
- description={ description }
- hideBack
- />
-
-
-
- <>
-
- handleNavigatorItemSelect( 'color-palettes', NAVIGATOR_PATHS.STYLES_COLORS )
- }
- >
- { translate( 'Colors' ) }
-
-
- handleNavigatorItemSelect( 'font-pairings', NAVIGATOR_PATHS.STYLES_FONTS )
- }
- >
- { translate( 'Fonts' ) }
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ScreenStyles;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-upsell.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-upsell.scss
deleted file mode 100644
index 042c2f91facc8..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-upsell.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@import "@automattic/typography/styles/fonts";
-
-.screen-upsell {
- .screen-upsell__plan {
- margin: 10px 0 16px;
-
- .screen-upsell__plan-heading {
- margin-bottom: 8px;
- font-size: $font-title-small;
- font-weight: 500;
- line-height: 26px;
- color: var(--studio-gray-100, #101517);
- }
-
- .screen-upsell__plan-price {
- display: flex;
-
- .plan-price__integer {
- font-size: $font-title-large;
- font-weight: 500;
- color: var(--studio-gray-100, #101517);
- }
-
- .plan-price__currency-symbol {
- margin-top: 2px;
- font-size: $font-body;
- font-weight: 500;
- color: var(--studio-gray-100, #101517);
- }
- }
-
- .screen-upsell__plan-billing-time-frame {
- font-size: $font-body-extra-small;
- color: var(--studio-gray-70, #3c434a);
- }
- }
-
- .screen-upsell__features-heading {
- margin-bottom: 8px;
- font-size: $font-body-small;
- font-weight: 500;
- line-height: 20px;
- }
-
- ul.screen-upsell__features {
- margin: 0 0 40px;
- font-size: $font-body-small;
- list-style: none;
-
- li {
- display: flex;
- align-items: center;
- margin-top: 8px;
- gap: 16px;
-
- /** Highlight the “Free domain for one year” feature */
- &:first-child strong {
- font-weight: 600;
- }
- }
-
- strong {
- font-weight: normal;
- }
-
- svg {
- color: var(--studio-blue-50);
- }
- }
-
- .pattern-assembler__button + .pattern-assembler__button {
- margin-top: 8px;
- }
-}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-upsell.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-upsell.tsx
deleted file mode 100644
index ae676552312bb..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-upsell.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { PLAN_PREMIUM } from '@automattic/calypso-products';
-import { Button, Gridicon, LoadingPlaceholder, PlanPrice } from '@automattic/components';
-import { Plans } from '@automattic/data-stores';
-import { formatCurrency } from '@automattic/format-currency';
-import { NavigatorHeader } from '@automattic/onboarding';
-import { useTranslate } from 'i18n-calypso';
-import { useSelector } from 'react-redux';
-import useGlobalStylesUpgradeTranslations from 'calypso/components/premium-global-styles-upgrade-modal/use-global-styles-upgrade-translations';
-import useCheckPlanAvailabilityForPurchase from 'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase';
-import { getSelectedSiteId } from 'calypso/state/ui/selectors';
-import { useScreen } from './hooks';
-import NavigatorTitle from './navigator-title';
-import './screen-upsell.scss';
-
-interface Props {
- numOfSelectedGlobalStyles?: number;
- onCheckout: () => void;
- onTryStyle: () => void;
-}
-
-const ScreenUpsell = ( { numOfSelectedGlobalStyles = 1, onCheckout, onTryStyle }: Props ) => {
- const translate = useTranslate();
- const { title, description } = useScreen( 'upsell' );
- const translations = useGlobalStylesUpgradeTranslations( { numOfSelectedGlobalStyles } );
- const selectedSiteId = useSelector( getSelectedSiteId ) ?? undefined;
- const pricingMeta = Plans.usePricingMetaForGridPlans( {
- planSlugs: [ PLAN_PREMIUM ],
- siteId: selectedSiteId,
- coupon: undefined,
- useCheckPlanAvailabilityForPurchase,
- storageAddOns: null,
- } );
- const pricing = pricingMeta?.[ PLAN_PREMIUM ];
- const isPricingLoaded =
- pricing?.currencyCode && pricing?.originalPrice.monthly && pricing?.originalPrice.full;
-
- return (
- <>
- }
- description={ description }
- hideBack
- />
-
-
-
- { translate( '%(planTitle)s plan', {
- args: { planTitle: translations.planTitle },
- } ) }
-
- { isPricingLoaded ? (
-
- ) : (
-
- ) }
-
- { translate( 'per month, {{span}}%(rawPrice)s{{/span}} billed annually, excl. taxes', {
- args: {
- rawPrice: isPricingLoaded
- ? formatCurrency( pricing?.originalPrice.full ?? 0, pricing?.currencyCode ?? '', {
- stripZeros: true,
- isSmallestUnit: true,
- } )
- : '',
- },
- comment: 'excl. taxes is short for excluding taxes',
- components: {
- span: isPricingLoaded ? (
-
- ) : (
-
- ),
- },
- } ) }
-
-
-
- { translate( 'Included with the plan:' ) }
-
-
- { translations.features.map( ( feature, i ) => (
- -
-
- { feature }
-
- ) ) }
-
-
-
-
-
-
- );
-};
-
-export default ScreenUpsell;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/style.scss
deleted file mode 100644
index 95426a0e1c7d9..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/style.scss
+++ /dev/null
@@ -1,263 +0,0 @@
-@import "@wordpress/base-styles/breakpoints";
-@import "@wordpress/base-styles/mixins";
-@import "@automattic/typography/styles/variables";
-@import "./keyframes";
-@import "./variables";
-
-@font-face {
- font-family: Inter;
- font-weight: 500;
- font-display: swap;
- src: url(https://s0.wp.com/i/fonts/inter/Inter-Medium.woff2?v=3.19) format("woff2");
-}
-
-$font-family: "SF Pro Text", $sans;
-
-.pattern-assembler {
- display: flex;
- height: calc(100vh - 60px);
- width: 100%;
-
- .navigator-header {
- // Force display because by default it shows only for min-width break-xlarge
- display: block;
- }
-
- .pattern-assembler__button {
- width: 100%;
- height: 40px;
- border-radius: 4px;
-
- &.components-button.is-primary[aria-disabled="true"] {
- &,
- &:hover,
- &:active {
- background-color: var(--studio-gray-5);
- border-color: var(--studio-gray-5);
- color: var(--studio-white);
- }
- }
- }
-
- .step-container__content {
- display: flex;
- width: 100%;
- }
-
- .pattern-assembler__wrapper {
- display: flex;
- flex-direction: row;
- flex: 1;
- }
-
- .pattern-assembler__sidebar {
- display: flex;
- flex-direction: column;
- width: $pattern-assembler-sidebar-width;
- height: 100vh;
- box-sizing: border-box;
- padding: 110px 32px 32px;
- background-color: var(--color-body-background);
- position: relative;
- z-index: 2;
- overflow-x: visible;
-
- @include break-wide {
- width: $pattern-assembler-sidebar-width-wide;
- }
- }
-
- .pattern-assembler__sidebar-panel {
- margin-inline-end: 22px;
-
- // Disable the animation of the transform on the panel
- .components-navigator-screen {
- transform: none !important;
- }
-
- &:empty {
- display: none;
- }
- }
-
- /**
- * Pattern Selector
- */
- .pattern-selector {
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 100%;
-
- .pattern-selector__header {
- display: flex;
- margin-bottom: 32px;
-
- .button {
- padding: 0;
- width: 25px;
- margin-right: 10px;
-
- &:hover svg {
- fill: var(--color-neutral-70);
- }
- }
-
- svg {
- width: 16px;
- height: 16px;
- top: 4px;
- margin-right: 12px;
- margin-left: 4px;
- fill: var(--studio-gray-100);
- }
-
- h1 {
- font-family: $font-family;
- font-size: $font-title-small;
- font-weight: 500;
- line-height: 26px;
- }
- }
-
- .pattern-selector__body {
- position: relative;
- margin-bottom: 32px;
- padding: 2px 2px 32px;
- // Rest pattern border to expand sides out of wrapper
- margin-right: -2px;
- margin-left: -2px;
-
- &:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- }
- }
-
- .pattern-selector__block-list {
- button {
- box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
- display: block;
- border: 1px solid rgba(0, 0, 0, 5%);
- border-radius: 4px;
- width: 100%;
- overflow: hidden;
- user-select: none;
- cursor: pointer;
- background: #fff;
-
- &:not(:last-child) {
- margin-bottom: 16px;
- }
-
- &.pattern-selector__block-list--selected-pattern {
- box-shadow:
- 0 15px 25px rgba(0, 0, 0, 0.07),
- 0 0 0 2px var(--studio-gray);
- }
-
- &:focus,
- &:hover {
- box-shadow: 0 0 0 2px var(--color-primary-light);
- outline: 0;
- }
- }
- }
- }
-
- /**
- * Screen Container
- */
- .screen-container {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
-
- .screen-container__body {
- display: flex;
- flex-direction: column;
- padding: 2px 16px;
- // Use negative margin to avoid the content and scrollbar overlapping
- margin: 0 -16px 32px;
- margin-bottom: 32px;
- overflow-y: auto;
-
- &.screen-category-list__body {
- // Reduces .navigator-header margin
- margin-top: -10px;
- }
- }
-
- .screen-container__footer {
- margin-top: auto;
-
- .screen-container__footer-description {
- display: inline-block;
- margin-bottom: 8px;
- font-size: $font-body-small;
- color: var(--studio-gray-80);
- }
- }
-
- .screen-container__description {
- display: inline-block;
- padding-bottom: 8px;
- font-size: $font-body-small;
- letter-spacing: -0.15px;
- color: var(--color-neutral-60);
- }
-
- .screen-container__notice {
- padding: 11px 14px;
- margin: 0;
- border: none;
- background-color: var(--studio-blue-0);
-
- .components-notice__dismiss {
- align-self: center;
- min-width: 24px;
- height: 24px;
- padding: 0;
-
- svg {
- width: 20px;
- height: 20px;
- }
- }
- }
-
- /**
- * The header of the stepper framework
- */
- .signup-header {
- z-index: 10; // Increase the z-index to avoid the WordPress Logo being covered by the sidebar
- }
-
- /**
- * Gutenberg Components
- */
- .components-divider {
- border-color: rgba(0, 0, 0, 0.1);
- }
-
- .components-navigator-provider {
- flex-grow: 1;
- height: 100vh;
- margin-top: -60px;
- }
-
- .components-navigator-screen {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- overflow-x: visible;
- }
-
- /**
- * Calypso Components
- */
- .components-button:focus:not(:disabled) {
- box-shadow: 0 0 0 2px var(--color-primary-light);
- }
-}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/survey/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/survey/index.tsx
deleted file mode 100644
index b6294ece285c8..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/survey/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import Banner from 'calypso/components/banner';
-import './survey.scss';
-
-interface Props {
- eventName?: string;
- eventUrl?: string;
- title?: string | React.ReactNode;
- setSurveyDismissed: ( dismissed: boolean ) => void;
-}
-
-const Survey = ( { eventName, eventUrl, title, setSurveyDismissed }: Props ) => {
- if ( ! eventUrl ) {
- return null;
- }
-
- return (
-
- We’d love to hear your thoughts. Fill out this{ ' ' }
-
- quick survey
- { ' ' }
- on your onboarding experience.
-
- )
- }
- event={ eventName }
- onDismiss={ ( e: Event ) => {
- e.stopPropagation();
- setSurveyDismissed( true );
- } }
- dismissTemporary
- disableHref
- showIcon={ false }
- showLinkIcon={ false }
- dismissWithoutSavingPreference
- tracksImpressionName="calypso_onboarding_survey_impression"
- tracksClickName="calypso_onboarding_survey_click"
- tracksDismissName="calypso_onboarding_survey_dismiss"
- />
- );
-};
-
-export default Survey;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/survey/survey.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/survey/survey.scss
deleted file mode 100644
index 922191e6c777a..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/survey/survey.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.pattern-assembler__survey {
- border-radius: 4px;
- background: #f0f7fc;
- margin: 40px 0;
- text-wrap: pretty;
-
- .banner__info .banner__title {
- font-weight: 400;
- line-height: 20px;
- color: var(--studio-gray-70);
- font-size: $font-body-extra-small;
- font-family: "SF Pro Text", $sans;
-
- a,
- a:visited {
- font-weight: 600;
- color: var(--studio-gray-90);
- text-decoration: underline;
- }
- }
-
- .banner__close-icon {
- fill: var(--studio-gray-60);
- top: auto;
- right: 14px;
- height: 15.4px;
- width: 15.4px;
- }
-
- &.banner.card.is-dismissible {
- cursor: default;
- border: 0;
- box-shadow: none;
-
- // Overwrite .banner.card
- @media (min-width: 481px) {
- padding: 14px 42px 14px 16px;
- }
- }
-}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/types.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/types.ts
deleted file mode 100644
index 6fcc1744cac68..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/types.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export type Pattern = {
- ID: number;
- name: string;
- title: string;
- description?: string;
- category?: Category;
- categories: Record< string, Category | undefined >;
- key?: string;
- pattern_meta?: Record< string, boolean | undefined >;
- html?: string;
- tags: Record< string, Tag | undefined >;
-};
-
-export type PatternType = 'header' | 'footer' | 'section';
-
-export interface NavigatorLocation {
- path: string;
- isInitial: boolean;
-}
-
-export type Category = {
- name?: string;
- title?: string;
- slug?: string;
- label?: string;
- description?: string;
-};
-
-export type PanelObject = {
- type: PatternType;
- label?: string;
- description?: string;
- category?: string;
- selectedPattern: Pattern | null;
- selectedPatterns?: Pattern[];
-};
-
-export type ScreenName = 'main' | 'styles' | 'confirmation' | 'upsell' | 'pages';
-
-export type Tag = {
- slug: string;
- title: string;
- description: string;
-};
-
-export type CustomPageTitle = {
- title: string;
- ID: number;
- selected: boolean;
-};
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts
deleted file mode 100644
index f4480b281537c..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { isEnabled } from '@automattic/calypso-config';
-import { translate } from 'i18n-calypso';
-import { getPatternSourceSiteID } from './constants';
-import type { Pattern, Category } from './types';
-
-export const encodePatternId = ( patternId: number ) =>
- `${ patternId }-${ getPatternSourceSiteID() }`;
-
-export const decodePatternId = ( encodedPatternId: number | string ) =>
- `${ encodedPatternId }`.split( '-' )[ 0 ];
-
-export const getShuffledPattern = ( candidates: Pattern[], current: Pattern ) => {
- const filteredCandidates = candidates.filter( ( { ID } ) => ID !== current.ID );
- const shuffledIndex = Math.floor( Math.random() * filteredCandidates.length );
- return filteredCandidates[ shuffledIndex ];
-};
-
-export const injectCategoryToPattern = (
- pattern: Pattern,
- categories: Category[],
- selectedCategory?: string | null
-) => {
- // Inject the selected pattern category or the first category
- // to be used in tracks and as selected pattern name.
- const [ firstCategory ] = Object.keys( pattern.categories );
- pattern.category = categories.find( ( { name } ) => {
- return name === ( selectedCategory || firstCategory );
- } );
-
- return pattern;
-};
-
-export const isPriorityPattern = ( { categories, tags: { assembler_priority } }: Pattern ) =>
- isEnabled( 'pattern-assembler/v2' )
- ? categories.featured || categories.footer || categories.header
- : Boolean( assembler_priority );
-
-export const isPagePattern = ( { categories, tags: { assembler_page } }: Pattern ) =>
- Boolean( isEnabled( 'pattern-assembler/v2' ) ? categories.page : assembler_page );
-
-export const getTitleForRenamedCategories = ( category: Category = {} ) => {
- const { slug, title } = category;
- if ( 'posts' === slug ) {
- return translate( 'Blog' );
- }
- return title;
-};
-
-export const getPagePatternTitle = ( { categories }: Pattern ) => {
- const category = ( Object.values( categories ) as Category[] ).find(
- ( { slug } ) => 'page' !== slug && 'featured' !== slug
- );
- return getTitleForRenamedCategories( category );
-};
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/variables.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/variables.scss
deleted file mode 100644
index 7a2ad847809e6..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$pattern-assembler-sidebar-width: 300px;
-$pattern-assembler-sidebar-width-wide: 348px;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/with-global-styles-provider.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/with-global-styles-provider.tsx
deleted file mode 100644
index 8c1d0681a6c07..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/with-global-styles-provider.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { GlobalStylesProvider } from '@automattic/global-styles';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-import { useSiteIdParam } from '../../../../hooks/use-site-id-param';
-import { useSiteSlugParam } from '../../../../hooks/use-site-slug-param';
-import { ONBOARD_STORE } from '../../../../stores';
-import StepperLoader from '../../components/stepper-loader';
-import type { OnboardSelect } from '@automattic/data-stores';
-
-const withGlobalStylesProvider = createHigherOrderComponent(
- < OuterProps extends object >( InnerComponent: React.ComponentType< OuterProps > ) => {
- return ( props: OuterProps ) => {
- const selectedDesign = useSelect(
- ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDesign(),
- []
- );
- const siteSlug = useSiteSlugParam();
- const siteId = useSiteIdParam();
- const siteSlugOrId = siteSlug ? siteSlug : siteId;
- const stylesheet = selectedDesign?.recipe?.stylesheet;
-
- if ( ! siteSlugOrId || ! stylesheet ) {
- return ;
- }
-
- // TODO: We might need to lazy load the GlobalStylesProvider
- return (
- }
- >
-
-
- );
- };
- },
- 'withGlobalStylesProvider'
-);
-
-export default withGlobalStylesProvider;
diff --git a/client/landing/stepper/declarative-flow/internals/steps.tsx b/client/landing/stepper/declarative-flow/internals/steps.tsx
index 7a88772d87d1c..b8b21a095ea84 100644
--- a/client/landing/stepper/declarative-flow/internals/steps.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps.tsx
@@ -145,11 +145,6 @@ export const STEPS = {
asyncComponent: () => import( './steps-repository/site-options' ),
},
- PATTERN_ASSEMBLER: {
- slug: 'pattern-assembler',
- asyncComponent: () => import( './steps-repository/pattern-assembler' ),
- },
-
PLANS: { slug: 'plans', asyncComponent: () => import( './steps-repository/plans' ) },
PROCESSING: {
@@ -172,11 +167,6 @@ export const STEPS = {
asyncComponent: () => import( './steps-repository/site-picker-list' ),
},
- SITE_PROMPT: {
- slug: 'site-prompt',
- asyncComponent: () => import( './steps-repository/ai-site-prompt' ),
- },
-
STORE_ADDRESS: {
slug: 'storeAddress',
asyncComponent: () => import( './steps-repository/store-address' ),
diff --git a/client/landing/stepper/declarative-flow/site-setup-flow.ts b/client/landing/stepper/declarative-flow/site-setup-flow.ts
index f7043515c0690..b23f26ae3bf57 100644
--- a/client/landing/stepper/declarative-flow/site-setup-flow.ts
+++ b/client/landing/stepper/declarative-flow/site-setup-flow.ts
@@ -1,8 +1,6 @@
import { Onboard } from '@automattic/data-stores';
-import { Design, isAssemblerDesign, isAssemblerSupported } from '@automattic/design-picker';
import { MIGRATION_FLOW } from '@automattic/onboarding';
import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from 'react';
import wpcomRequest from 'wpcom-proxy-request';
import { isTargetSitePlanCompatible } from 'calypso/blocks/importer/util';
import { useIsBigSkyEligible } from 'calypso/landing/stepper/hooks/use-is-site-big-sky-eligible';
@@ -18,7 +16,7 @@ import { useIsGoalsHoldout } from '../hooks/use-is-goals-holdout';
import { useIsPluginBundleEligible } from '../hooks/use-is-plugin-bundle-eligible';
import { useSiteData } from '../hooks/use-site-data';
import { useCanUserManageOptions } from '../hooks/use-user-can-manage-options';
-import { ONBOARD_STORE, SITE_STORE, USER_STORE, STEPPER_INTERNAL_STORE } from '../stores';
+import { ONBOARD_STORE, SITE_STORE, USER_STORE } from '../stores';
import { shouldRedirectToSiteMigration } from './helpers';
import { useLaunchpadDecider } from './internals/hooks/use-launchpad-decider';
import { STEPS } from './internals/steps';
@@ -30,12 +28,7 @@ import {
Flow,
ProvidedDependencies,
} from './internals/types';
-import type {
- OnboardSelect,
- SiteSelect,
- UserSelect,
- StepperInternalSelect,
-} from '@automattic/data-stores';
+import type { OnboardSelect, SiteSelect, UserSelect } from '@automattic/data-stores';
const SiteIntent = Onboard.SiteIntent;
@@ -51,20 +44,6 @@ const siteSetupFlow: Flow = {
name: 'site-setup',
isSignupFlow: false,
- useSideEffect( currentStep, navigate ) {
- const selectedDesign = useSelect(
- ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDesign(),
- []
- );
-
- useEffect( () => {
- // Require to start the flow from the first step
- if ( currentStep === 'pattern-assembler' && ! selectedDesign ) {
- navigate( 'goals' );
- }
- }, [] );
- },
-
useSteps() {
const isGoalsAtFrontExperiment = Boolean(
useSelector( getInitialQueryArguments )?.[ 'goals-at-front-experiment' ]
@@ -76,7 +55,6 @@ const siteSetupFlow: Flow = {
STEPS.OPTIONS,
STEPS.DESIGN_CHOICES,
STEPS.DESIGN_SETUP,
- STEPS.PATTERN_ASSEMBLER,
STEPS.BLOGGER_STARTING_POINT,
STEPS.COURSES,
STEPS.IMPORT,
@@ -110,11 +88,6 @@ const siteSetupFlow: Flow = {
useStepNavigation( currentStep, navigate ) {
const isGoalsHoldout = useIsGoalsHoldout( currentStep );
- const stepData = useSelect(
- ( select ) => ( select( STEPPER_INTERNAL_STORE ) as StepperInternalSelect ).getStepData(),
- []
- );
-
const intent = useSelect(
( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(),
[]
@@ -288,15 +261,8 @@ const siteSetupFlow: Flow = {
}
case 'designSetup': {
- const { selectedDesign: _selectedDesign } = providedDependencies;
- if ( isAssemblerDesign( _selectedDesign as Design ) && isAssemblerSupported() ) {
- return navigate( 'pattern-assembler' );
- }
-
return navigate( 'processing' );
}
- case 'pattern-assembler':
- return navigate( 'processing' );
case 'processing': {
const processingResult = params[ 0 ] as ProcessingResult;
@@ -305,16 +271,6 @@ const siteSetupFlow: Flow = {
return navigate( 'error' );
}
- // End of Pattern Assembler flow
- if ( isAssemblerDesign( selectedDesign ) ) {
- const params = new URLSearchParams( {
- canvas: 'edit',
- assembler: '1',
- } );
-
- return exitFlow( `/site-editor/${ siteSlug }?${ params }` );
- }
-
// If the user skips starting point, redirect them to the post editor
if ( isGoalsHoldout && intent === 'write' && startingPoint !== 'skip-to-my-home' ) {
if ( startingPoint !== 'write' ) {
@@ -561,14 +517,6 @@ const siteSetupFlow: Flow = {
return navigate( 'goals' );
}
- case 'pattern-assembler': {
- if ( stepData?.previousStep ) {
- return navigate( stepData?.previousStep );
- }
-
- return navigate( 'designSetup' );
- }
-
case 'importList':
if ( backToStep ) {
return navigate( `${ backToStep }?siteSlug=${ siteSlug }` );
diff --git a/client/landing/stepper/declarative-flow/update-design.ts b/client/landing/stepper/declarative-flow/update-design.ts
index 89bf009d2187b..24ffe41089c78 100644
--- a/client/landing/stepper/declarative-flow/update-design.ts
+++ b/client/landing/stepper/declarative-flow/update-design.ts
@@ -1,6 +1,5 @@
import { Onboard, useLaunchpad } from '@automattic/data-stores';
-import { isAssemblerDesign } from '@automattic/design-picker';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { translate } from 'i18n-calypso';
import { useLaunchpadDecider } from 'calypso/landing/stepper/declarative-flow/internals/hooks/use-launchpad-decider';
@@ -17,7 +16,6 @@ import { STEPS } from './internals/steps';
import { ProcessingResult } from './internals/steps-repository/processing-step/constants';
import { ProvidedDependencies } from './internals/types';
import type { Flow } from './internals/types';
-import type { OnboardSelect } from '@automattic/data-stores';
const updateDesign: Flow = {
name: 'update-design',
@@ -26,7 +24,7 @@ const updateDesign: Flow = {
},
isSignupFlow: false,
useSteps() {
- return [ STEPS.DESIGN_SETUP, STEPS.PATTERN_ASSEMBLER, STEPS.PROCESSING, STEPS.ERROR ];
+ return [ STEPS.DESIGN_SETUP, STEPS.PROCESSING, STEPS.ERROR ];
},
useSideEffect() {
const { setIntent } = useDispatch( ONBOARD_STORE );
@@ -40,10 +38,6 @@ const updateDesign: Flow = {
const siteSlug = useSiteSlug();
const flowToReturnTo = useQuery().get( 'flowToReturnTo' ) || 'free';
const { setPendingAction } = useDispatch( ONBOARD_STORE );
- const selectedDesign = useSelect(
- ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDesign(),
- []
- );
const { data: { launchpad_screen: launchpadScreenOption } = {} } = useLaunchpad( siteSlug );
const exitFlow = ( to: string ) => {
@@ -73,15 +67,6 @@ const updateDesign: Flow = {
return navigate( 'error' );
}
- if ( isAssemblerDesign( selectedDesign ) ) {
- const params = new URLSearchParams( {
- canvas: 'edit',
- assembler: '1',
- } );
-
- return exitFlow( `/site-editor/${ siteSlug }?${ params }` );
- }
-
if ( launchpadScreenOption === 'skipped' ) {
return window.location.assign( `/home/${ siteSlug }` );
}
@@ -111,26 +96,11 @@ const updateDesign: Flow = {
);
}
- if ( providedDependencies?.shouldGoToAssembler ) {
- return navigate( 'pattern-assembler' );
- }
-
return navigate( `processing?siteSlug=${ siteSlug }&flowToReturnTo=${ flowToReturnTo }` );
-
- case 'pattern-assembler': {
- return navigate( `processing?siteSlug=${ siteSlug }&flowToReturnTo=${ flowToReturnTo }` );
- }
}
}
- const goBack = () => {
- switch ( currentStep ) {
- case 'pattern-assembler':
- return navigate( 'designSetup' );
- }
- };
-
- return { submit, goBack };
+ return { submit };
},
};
diff --git a/client/landing/stepper/declarative-flow/with-theme-assembler-flow.ts b/client/landing/stepper/declarative-flow/with-theme-assembler-flow.ts
index 55912fef980eb..2af009bf451d3 100644
--- a/client/landing/stepper/declarative-flow/with-theme-assembler-flow.ts
+++ b/client/landing/stepper/declarative-flow/with-theme-assembler-flow.ts
@@ -5,13 +5,23 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useQueryTheme } from 'calypso/components/data/query-theme';
+import { useDispatch as useReduxDispatch } from 'calypso/state';
+import { activateOrInstallThenActivate } from 'calypso/state/themes/actions';
import { getTheme } from 'calypso/state/themes/selectors';
-import { useSiteSlug } from '../hooks/use-site-slug';
+import { useSiteData } from '../hooks/use-site-data';
import { ONBOARD_STORE } from '../stores';
import { STEPS } from './internals/steps';
import { ProcessingResult } from './internals/steps-repository/processing-step/constants';
-import { Flow, ProvidedDependencies } from './internals/types';
+import {
+ AssertConditionResult,
+ AssertConditionState,
+ Flow,
+ ProvidedDependencies,
+} from './internals/types';
import type { OnboardSelect } from '@automattic/data-stores';
+import type { CalypsoDispatch } from 'calypso/state/types';
+import type { AnyAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
const SiteIntent = Onboard.SiteIntent;
@@ -53,23 +63,22 @@ const withThemeAssemblerFlow: Flow = {
},
useSteps() {
- return [ STEPS.PATTERN_ASSEMBLER, STEPS.PROCESSING, STEPS.ERROR, STEPS.CELEBRATION ];
+ return [ STEPS.PROCESSING, STEPS.ERROR ];
},
useStepNavigation( _currentStep, navigate ) {
const { setPendingAction } = useDispatch( ONBOARD_STORE );
- const siteSlug = useSiteSlug();
+ const reduxDispatch = useReduxDispatch();
+ const selectedTheme = getAssemblerDesign().slug;
+ const { siteSlug, siteId } = useSiteData();
- const exitFlow = ( to: string ) => {
- setPendingAction( () => {
- return new Promise( () => {
- window.location.assign( to );
- } );
- } );
+ const handleSelectSite = () => {
+ setPendingAction( enableAssemblerTheme( selectedTheme, siteId, siteSlug, reduxDispatch ) );
- return navigate( 'processing' );
+ navigate( 'processing' );
};
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const submit = ( providedDependencies: ProvidedDependencies = {}, ...results: string[] ) => {
switch ( _currentStep ) {
case 'processing': {
@@ -77,35 +86,59 @@ const withThemeAssemblerFlow: Flow = {
return navigate( 'error' );
}
- const params = new URLSearchParams( {
- canvas: 'edit',
- assembler: '1',
- } );
-
- // We will navigate to the celebration step in the follow-up PR
- return exitFlow( `/site-editor/${ siteSlug }?${ params }` );
- }
-
- case 'pattern-assembler': {
- return navigate( 'processing' );
- }
-
- case 'celebration-step': {
- return window.location.assign( providedDependencies.destinationUrl as string );
+ return handleSelectSite();
}
}
};
- const goBack = () => {
- switch ( _currentStep ) {
- case 'pattern-assembler': {
- return window.location.assign( `/themes/${ siteSlug }` );
- }
- }
- };
+ return { submit };
+ },
- return { submit, goBack };
+ useAssertConditions(): AssertConditionResult {
+ const { site, siteSlug } = useSiteData();
+ let result: AssertConditionResult = { state: AssertConditionState.SUCCESS };
+
+ if ( ! siteSlug ) {
+ result = {
+ state: AssertConditionState.FAILURE,
+ message: 'site-setup did not provide the site slug it is configured to.',
+ };
+ }
+
+ if ( ! site ) {
+ result = {
+ state: AssertConditionState.CHECKING,
+ };
+ }
+
+ return result;
},
};
+function enableAssemblerTheme(
+ themeId: string,
+ siteId: number,
+ siteSlug: string,
+ reduxDispatch: CalypsoDispatch
+) {
+ const params = new URLSearchParams( {
+ canvas: 'edit',
+ assembler: '1',
+ } );
+
+ return () =>
+ Promise.resolve()
+ .then( () =>
+ reduxDispatch(
+ activateOrInstallThenActivate( themeId, siteId, { source: 'assembler' } ) as ThunkAction<
+ PromiseLike< string >,
+ any,
+ any,
+ AnyAction
+ >
+ )
+ )
+ .then( () => window.location.assign( `/site-editor/${ siteSlug }?${ params }` ) );
+}
+
export default withThemeAssemblerFlow;
diff --git a/client/my-sites/patterns/components/category-gallery/client.tsx b/client/my-sites/patterns/components/category-gallery/client.tsx
index c08b5efe5bdc9..59536039def33 100644
--- a/client/my-sites/patterns/components/category-gallery/client.tsx
+++ b/client/my-sites/patterns/components/category-gallery/client.tsx
@@ -3,7 +3,6 @@ import { usePatternsRendererContext } from '@automattic/block-renderer/src/compo
import clsx from 'clsx';
import { useTranslate } from 'i18n-calypso';
import { useEffect, useRef } from 'react';
-import { encodePatternId } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils';
import { CategoryGalleryServer } from 'calypso/my-sites/patterns/components/category-gallery/server';
import { LocalizedLink } from 'calypso/my-sites/patterns/components/localized-link';
import {
@@ -12,6 +11,7 @@ import {
} from 'calypso/my-sites/patterns/components/pattern-preview';
import { PatternsSection } from 'calypso/my-sites/patterns/components/section';
import { RENDERER_SITE_ID } from 'calypso/my-sites/patterns/constants';
+import { encodePatternId } from 'calypso/my-sites/patterns/lib/encode-pattern-id';
import { getCategoryUrlPath } from 'calypso/my-sites/patterns/paths';
import { PatternTypeFilter, Category, CategoryGalleryFC } from 'calypso/my-sites/patterns/types';
diff --git a/client/my-sites/patterns/components/pattern-preview/index.tsx b/client/my-sites/patterns/components/pattern-preview/index.tsx
index 3370bc63610e2..be684c8f6e4a1 100644
--- a/client/my-sites/patterns/components/pattern-preview/index.tsx
+++ b/client/my-sites/patterns/components/pattern-preview/index.tsx
@@ -12,12 +12,12 @@ import clsx from 'clsx';
import { useRtl, useTranslate } from 'i18n-calypso';
import { useEffect, useRef, useState } from 'react';
import ClipboardButton from 'calypso/components/forms/clipboard-button';
-import { encodePatternId } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { PatternsGetAccessModal } from 'calypso/my-sites/patterns/components/get-access-modal';
import { patternFiltersClassName } from 'calypso/my-sites/patterns/components/pattern-library';
import { usePatternsContext } from 'calypso/my-sites/patterns/context';
import { useRecordPatternsEvent } from 'calypso/my-sites/patterns/hooks/use-record-patterns-event';
+import { encodePatternId } from 'calypso/my-sites/patterns/lib/encode-pattern-id';
import { getTracksPatternType } from 'calypso/my-sites/patterns/lib/get-tracks-pattern-type';
import { useSelector } from 'calypso/state';
import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
diff --git a/client/my-sites/patterns/constants.ts b/client/my-sites/patterns/constants.ts
index 58a50a7e329ae..20dd6ac36ceda 100644
--- a/client/my-sites/patterns/constants.ts
+++ b/client/my-sites/patterns/constants.ts
@@ -1,4 +1,5 @@
export const CATEGORY_FEATURED = 'featured';
export const CATEGORY_PAGE = 'page';
+export const PATTERN_SOURCE_SITE_ID = 174455321; //dotcompatterns
export const RENDERER_SITE_ID = 226011606; // assemblerdemo
diff --git a/client/my-sites/patterns/lib/encode-pattern-id.ts b/client/my-sites/patterns/lib/encode-pattern-id.ts
new file mode 100644
index 0000000000000..62bca91901cc8
--- /dev/null
+++ b/client/my-sites/patterns/lib/encode-pattern-id.ts
@@ -0,0 +1,4 @@
+import { PATTERN_SOURCE_SITE_ID } from 'calypso/my-sites/patterns/constants';
+
+export const encodePatternId = ( patternId: number ) =>
+ `${ patternId }-${ PATTERN_SOURCE_SITE_ID }`;
diff --git a/client/my-sites/patterns/types.ts b/client/my-sites/patterns/types.ts
index fabd78c615a3c..8dfaada1f8834 100644
--- a/client/my-sites/patterns/types.ts
+++ b/client/my-sites/patterns/types.ts
@@ -1,7 +1,6 @@
import { GlobalStylesObject } from '@automattic/global-styles';
import type { Context } from '@automattic/calypso-router';
import type { QueryClient } from '@tanstack/react-query';
-import type { Pattern as AssemblerPattern } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/types';
import type { PartialContext as PerformanceMarkContext } from 'calypso/server/lib/performance-mark';
export type RouterNext = ( error?: Error ) => void;
@@ -12,6 +11,33 @@ export type RouterContext = Context &
queryClient: QueryClient;
};
+export type AssemblerPattern = {
+ ID: number;
+ name: string;
+ title: string;
+ description?: string;
+ category?: AssemblerCategory;
+ categories: Record< string, AssemblerCategory | undefined >;
+ key?: string;
+ pattern_meta?: Record< string, boolean | undefined >;
+ html?: string;
+ tags: Record< string, AssemblerTag | undefined >;
+};
+
+export type AssemblerCategory = {
+ name?: string;
+ title?: string;
+ slug?: string;
+ label?: string;
+ description?: string;
+};
+
+export type AssemblerTag = {
+ slug: string;
+ title: string;
+ description: string;
+};
+
export type Pattern = AssemblerPattern & {
can_be_copied_without_account?: boolean;
};