From cb865c6f0f93969ee806357eb5861bbc9d881a3f Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Wed, 4 Dec 2024 12:36:42 -0500 Subject: [PATCH] Add experimental UI for "Why should you host with us?" section --- .../site-migration-identify/index.tsx | 101 ++++++++++++++---- .../site-migration-identify/style.scss | 45 ++++++++ 2 files changed, 124 insertions(+), 22 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/index.tsx index cf1ec2ff52407..4e45c7c52344e 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/index.tsx @@ -1,4 +1,6 @@ +import config from '@automattic/calypso-config'; import { StepContainer, Title, SubTitle, HOSTED_SITE_MIGRATION_FLOW } from '@automattic/onboarding'; +import { Icon, next, published, shield } from '@wordpress/icons'; import { useTranslate } from 'i18n-calypso'; import { type FC, useEffect, useState, useCallback } from 'react'; import CaptureInput from 'calypso/blocks/import/capture/capture-input'; @@ -17,9 +19,37 @@ import type { UrlData } from 'calypso/blocks/import/types'; import './style.scss'; interface HostingDetailsProps { - items: { title: string; description: string }[]; + items: { title?: string; icon?: ReactElement; description: string }[]; } +const isMigrationExperimentEnabled = config.isEnabled( 'migration-flow/experiment' ); + +const HostingDetailsWithIcons: FC< HostingDetailsProps > = ( { items } ) => { + const translate = useTranslate(); + + return ( +
+

+ { translate( 'Why should you host with us?' ) } +

+ +
+ ); +}; + const HostingDetails: FC< HostingDetailsProps > = ( { items } ) => { const translate = useTranslate(); @@ -69,26 +99,49 @@ export const Analyzer: FC< Props > = ( { onComplete, onSkip, hideImporterListLin return ; } - const hostingDetailItems = { - 'unmatched-uptime': { - title: translate( 'Unmatched Reliability and Uptime' ), - description: translate( - "Our infrastructure's 99.99% uptime, combined with our automatic update system, ensures your site remains accessible and secure." - ), - }, - 'effortless-customization': { - title: translate( 'Effortless Customization' ), - description: translate( - 'Our tools and options let you easily design a website to meet your needs, whether you’re a beginner or an expert.' - ), - }, - 'blazing-fast-speed': { - title: translate( 'Blazing Fast Page Speed' ), - description: translate( - 'Our global CDN with 28+ locations delivers lightning-fast load times for a seamless visitor experience.' - ), - }, - }; + let hostingDetailItems; + + if ( isMigrationExperimentEnabled ) { + hostingDetailItems = { + 'blazing-fast-speed': { + icon: next, + description: translate( + 'Blazing fast speeds with lightning-fast load times for a seamless experience.' + ), + }, + 'unmatched-uptime': { + icon: published, + description: translate( + 'Unmatched reliability with 99.999% uptime and unmetered traffic.' + ), + }, + security: { + icon: shield, + description: translate( 'Round-the-clock security monitoring and DDoS protection.' ), + }, + }; + } else { + hostingDetailItems = { + 'unmatched-uptime': { + title: translate( 'Unmatched Reliability and Uptime' ), + description: translate( + "Our infrastructure's 99.99% uptime, combined with our automatic update system, ensures your site remains accessible and secure." + ), + }, + 'effortless-customization': { + title: translate( 'Effortless Customization' ), + description: translate( + 'Our tools and options let you easily design a website to meet your needs, whether you’re a beginner or an expert.' + ), + }, + 'blazing-fast-speed': { + title: translate( 'Blazing Fast Page Speed' ), + description: translate( + 'Our global CDN with 28+ locations delivers lightning-fast load times for a seamless visitor experience.' + ), + }, + }; + } return (
@@ -116,7 +169,11 @@ export const Analyzer: FC< Props > = ( { onComplete, onSkip, hideImporterListLin nextLabelText={ translate( 'Check my site' ) } />
- + { isMigrationExperimentEnabled ? ( + + ) : ( + + ) } ); }; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/style.scss index d8adba1fd2e85..79baf590a2a76 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/style.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/style.scss @@ -124,3 +124,48 @@ } } } + +.import__site-identify-hosting-details-experiment { + margin: 40px auto 0 auto; + max-width: 350px; + + &-title { + color: var(--studio-gray-100); + font-size: 1.25rem; + font-weight: 500; + margin-bottom: 0.5rem; + text-align: center; + } + + &-list { + background-color: #f6f7f7; + font-size: 0.75rem; + list-style: none; + margin: 0; + padding: 2rem; + + &-item { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; + + &:last-child { + margin-bottom: 0; + } + } + } + + &-icon { + background-color: #dcdcde; + border: 2px solid #dcdcde; + display: flex; + fill: var(--studio-gray-70); + flex: 0 0 24px; + padding: 4px; + } + + &-description { + color: var(--studio-black); + line-height: 1.66666667; + } +}