From f073bf81be93f4b983186a2f1473a1d973c93e61 Mon Sep 17 00:00:00 2001 From: mmtr <1233880+mmtr@users.noreply.github.com> Date: Mon, 21 Oct 2024 17:07:18 +0200 Subject: [PATCH] Tailored Flows: Remove `/setup/blog` flow --- .../landing/stepper/declarative-flow/blog.ts | 70 ---------- .../steps-repository/blogger-intent/icons.jsx | 53 -------- .../steps-repository/blogger-intent/index.tsx | 87 ------------- .../blogger-intent/style.scss | 121 ------------------ .../domains/domain-form-control.tsx | 5 - .../declarative-flow/registered-flows.ts | 2 - client/signup/steps/domains/index.jsx | 5 - 7 files changed, 343 deletions(-) delete mode 100644 client/landing/stepper/declarative-flow/blog.ts delete mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/icons.jsx delete mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/index.tsx delete mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/style.scss diff --git a/client/landing/stepper/declarative-flow/blog.ts b/client/landing/stepper/declarative-flow/blog.ts deleted file mode 100644 index c70209019e80f2..00000000000000 --- a/client/landing/stepper/declarative-flow/blog.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { useEffect } from '@wordpress/element'; -import { translate } from 'i18n-calypso'; -import { redirect } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/import/util'; -import { - type AssertConditionResult, - AssertConditionState, - type Flow, -} from 'calypso/landing/stepper/declarative-flow/internals/types'; -import { useFlowLocale } from 'calypso/landing/stepper/hooks/use-flow-locale'; -import { useSelector } from 'calypso/state'; -import { isUserLoggedIn } from 'calypso/state/current-user/selectors'; -import { useLoginUrl } from '../utils/path'; - -const Blog: Flow = { - name: 'blog', - get title() { - return translate( 'Blog' ); - }, - isSignupFlow: false, - useSteps() { - return [ - { - slug: 'blogger-intent', - asyncComponent: () => import( './internals/steps-repository/blogger-intent' ), - }, - ]; - }, - - useStepNavigation() { - return {}; - }, - - useAssertConditions(): AssertConditionResult { - const flowName = this.name; - const isLoggedIn = useSelector( isUserLoggedIn ); - - const locale = useFlowLocale(); - - const logInUrl = useLoginUrl( { - variationName: 'blogger-intent', - redirectTo: `/setup/blog`, - locale, - pageTitle: translate( 'Blog' ), - } ); - - // Despite sending a CHECKING state, this function gets called again with the - // /setup/blog/blogger-intent route which has no locale in the path so we need to - // redirect off of the first render. - // This effects both /setup/blog/ starting points and /setup/blog/blogger-intent/ urls. - // The double call also hapens on urls without locale. - useEffect( () => { - if ( ! isLoggedIn ) { - redirect( logInUrl ); - } - }, [] ); - - let result: AssertConditionResult = { state: AssertConditionState.SUCCESS }; - - if ( ! isLoggedIn ) { - result = { - state: AssertConditionState.CHECKING, - message: `${ flowName } requires a logged in user`, - }; - } - - return result; - }, -}; - -export default Blog; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/icons.jsx b/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/icons.jsx deleted file mode 100644 index f1c512cf418e4e..00000000000000 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/icons.jsx +++ /dev/null @@ -1,53 +0,0 @@ -export const FeatherIcon = () => ( - - - - - -); - -export const DesignIcon = () => ( - - - - - -); diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/index.tsx deleted file mode 100644 index 90009a0b251a25..00000000000000 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/index.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { Button } from '@automattic/components'; -import { StepContainer } from '@automattic/onboarding'; -import { useSelect } from '@wordpress/data'; -import { useTranslate } from 'i18n-calypso'; -import DocumentHead from 'calypso/components/data/document-head'; -import { USER_STORE } from 'calypso/landing/stepper/stores'; -import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; -import { DesignIcon, FeatherIcon } from './icons'; -import type { Step } from '../../types'; -import type { UserSelect } from '@automattic/data-stores'; - -import './style.scss'; - -const BlogIntent: Step = function BlogIntent() { - const translate = useTranslate(); - - const handleButtonClick = ( intent: string ) => { - recordTracksEvent( 'calypso_blog_onboarding_selection_button_click', { - intent: intent, - } ); - }; - - const currentUser = useSelect( - ( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(), - [] - ); - - const username = currentUser?.display_name ?? currentUser?.username; - - return ( - <> - - -

- { username - ? translate( "Let's start your blog, %(username)s!", { - args: { username }, - } ) - : translate( "Let's start your blog!" ) } -

-
-
-
- - { translate( 'Write your first post' ) } -
- -
-
-
-
- - { translate( 'Pick a design first' ) } -
- -
-
- - } - recordTracksEvent={ recordTracksEvent } - /> - - ); -}; - -export default BlogIntent; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/style.scss deleted file mode 100644 index 77245971a1a431..00000000000000 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/blogger-intent/style.scss +++ /dev/null @@ -1,121 +0,0 @@ -@import "@automattic/onboarding/styles/variables"; -@import "@automattic/onboarding/styles/mixins"; -@import "jetpack-connect/colors"; - -.blog.blogger-intent { - .step-container__header { - margin: 0; - } - - .wordpress-logo { - position: absolute; - inset-block-start: 20px; - inset-inline-start: 24px; - fill: var(--color-text); - transform-origin: 0 0; - } - - .flow-progress { - display: none; - } - - .step-container__content { - min-height: calc(100vh - 170px); - } - - .blogger-intent__container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-left: 20px; - margin-right: 20px; - - margin-top: 104px; - @include break-small { - margin-top: 0; - min-height: calc(100vh - 100px); - } - } - - .blogger-intent__heading { - @include onboarding-heading-title; - text-align: center; - } - - .blogger-intent__content { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - margin: 32px 0 0 0; - - @include break-small { - min-width: 456px; - } - - hr { - background-color: var(--studio-gray-5); - width: 100%; - margin-bottom: 6px; - } - } - - .blogger-intent__row { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - width: 100%; - flex-wrap: wrap; - - .blogger-intent__row-text { - display: flex; - align-items: center; - color: var(--color-neutral-100); - margin-top: 24px; - margin-right: 40px; - margin-left: 5px; - font-size: rem(20px); - - @include break-mobile { - margin-left: 0; - margin-right: 0; - } - - .blogger-intent__icon { - margin-right: 22px; - @include break-mobile { - margin-right: 26px; - } - } - } - - .blogger-intent__button { - margin-top: 24px; - margin-left: 52px; - background-color: var(--studio-blue-50); - border: none; - border-radius: 4px; - font-weight: 500; - min-width: 136px; - - &.disabled, - &.disabled:focus, - &.disabled:hover, - &:disabled { - background: var(--studio-blue-20); - cursor: default; - } - &:focus { - box-shadow: none; - outline: 2px solid var(--studio-blue-60); - outline-offset: 1px; - background: var(--studio-blue-60); - } - &:hover { - background-color: var(--studio-blue-60); - } - } - } -} diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domains/domain-form-control.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/domains/domain-form-control.tsx index 56fc0c2d00d8f0..ed4f268b6825d7 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domains/domain-form-control.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domains/domain-form-control.tsx @@ -182,11 +182,6 @@ export function DomainFormControl( { return true; } - // 'blog' flow, starting with blog themes - if ( flow === 'blog' ) { - return true; - } - return typeof domainForm?.lastQuery === 'string' && domainForm?.lastQuery.includes( '.blog' ); }; diff --git a/client/landing/stepper/declarative-flow/registered-flows.ts b/client/landing/stepper/declarative-flow/registered-flows.ts index 8358010f2c7059..a0af4c5c7c858f 100644 --- a/client/landing/stepper/declarative-flow/registered-flows.ts +++ b/client/landing/stepper/declarative-flow/registered-flows.ts @@ -101,8 +101,6 @@ const availableFlows: Record< string, () => Promise< { default: Flow } > > = { sensei: () => import( /* webpackChunkName: "sensei-flow" */ '../declarative-flow/sensei' ), - blog: () => import( /* webpackChunkName: "blog" */ '../declarative-flow/blog' ), - [ START_WRITING_FLOW ]: () => import( /* webpackChunkName: "start-writing-flow" */ './start-writing' ), diff --git a/client/signup/steps/domains/index.jsx b/client/signup/steps/domains/index.jsx index 8507541ab8f1c3..18a378c4e90381 100644 --- a/client/signup/steps/domains/index.jsx +++ b/client/signup/steps/domains/index.jsx @@ -574,11 +574,6 @@ export class RenderDomainsStep extends Component { return true; } - // 'blog' flow, starting with blog themes - if ( flowName === 'blog' ) { - return true; - } - // No .blog subdomains for domain only sites if ( isDomainOnly ) { return false;