From cbabcba904afe4c2ed2dec1c4685504f1775e448 Mon Sep 17 00:00:00 2001 From: Roberto Aranda Date: Wed, 20 Nov 2024 17:36:59 +0100 Subject: [PATCH] Business Tools: Refactor to extract component logic to a data component (#96542) * Business Tools: Refactor to extract component logic to a data component * Move translate and localizeUrl functions to main component * Lift business logic to data component * Move config logic to data component --- client/sites/marketing/tools/index.tsx | 181 ++++-------------- .../tools/marketing-features-data.ts | 107 +++++++++++ client/sites/marketing/tools/types.ts | 10 + 3 files changed, 150 insertions(+), 148 deletions(-) create mode 100644 client/sites/marketing/tools/marketing-features-data.ts create mode 100644 client/sites/marketing/tools/types.ts diff --git a/client/sites/marketing/tools/index.tsx b/client/sites/marketing/tools/index.tsx index 07dfa89b75d318..499cfb44d7c5b1 100644 --- a/client/sites/marketing/tools/index.tsx +++ b/client/sites/marketing/tools/index.tsx @@ -1,47 +1,35 @@ -import config from '@automattic/calypso-config'; import page from '@automattic/calypso-router'; import { Gridicon } from '@automattic/components'; import { localizeUrl } from '@automattic/i18n-utils'; import { Button } from '@wordpress/components'; -import { useTranslate, getLocaleSlug } from 'i18n-calypso'; -import { Fragment, FunctionComponent, ReactNode } from 'react'; -import fiverrLogo from 'calypso/assets/images/customer-home/fiverr-logo.svg'; -import rocket from 'calypso/assets/images/customer-home/illustration--rocket.svg'; -import earnIllustration from 'calypso/assets/images/customer-home/illustration--task-earn.svg'; -import wordPressLogo from 'calypso/assets/images/icons/wordpress-logo.svg'; +import { useTranslate } from 'i18n-calypso'; +import { Fragment } from 'react'; import QueryJetpackPlugins from 'calypso/components/data/query-jetpack-plugins'; import PageViewTracker from 'calypso/lib/analytics/page-view-tracker'; -import { marketingConnections, pluginsPath } from 'calypso/my-sites/marketing/paths'; +import { pluginsPath } from 'calypso/my-sites/marketing/paths'; import { useDispatch, useSelector } from 'calypso/state'; import { recordTracksEvent as recordTracksEventAction } from 'calypso/state/analytics/actions'; import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors'; import * as T from 'calypso/types'; import MarketingToolsFeature from './feature'; import MarketingToolsHeader from './header'; +import { getMarketingFeaturesData } from './marketing-features-data'; import './style.scss'; -const FeaturedButton: FunctionComponent< { - children: ReactNode; - onClick: () => void; - href?: string; - target?: string; -} > = ( { children, onClick, href, target } ) => { - return ( - - ); -}; - -export const MarketingTools: FunctionComponent = () => { +export default function MarketingTools() { const translate = useTranslate(); const dispatch = useDispatch(); const recordTracksEvent = ( event: string ) => dispatch( recordTracksEventAction( event ) ); const selectedSiteSlug: T.SiteSlug | null = useSelector( getSelectedSiteSlug ); const siteId = useSelector( getSelectedSiteId ) || 0; - const isEnglish = ( config( 'english_locales' ) as string[] ).includes( getLocaleSlug() ?? '' ); + + const marketingFeatures = getMarketingFeaturesData( + selectedSiteSlug, + recordTracksEvent, + translate, + localizeUrl + ); const handleBusinessToolsClick = () => { recordTracksEvent( 'calypso_marketing_tools_business_tools_button_click' ); @@ -49,34 +37,6 @@ export const MarketingTools: FunctionComponent = () => { page( pluginsPath( selectedSiteSlug ) ); }; - const handleEarnClick = () => { - recordTracksEvent( 'calypso_marketing_tools_earn_button_click' ); - - page( `/earn/${ selectedSiteSlug }` ); - }; - - const handleBuiltByWpClick = () => { - recordTracksEvent( 'calypso_marketing_tools_built_by_wp_button_click' ); - }; - - const handleCreateALogoClick = () => { - recordTracksEvent( 'calypso_marketing_tools_create_a_logo_button_click' ); - }; - - const handleHireAnSEOExpertClick = () => { - recordTracksEvent( 'calypso_marketing_tools_hire_an_seo_expert_button_click' ); - }; - - const handleStartSharingClick = () => { - recordTracksEvent( 'calypso_marketing_tools_start_sharing_button_click' ); - - page( marketingConnections( selectedSiteSlug ) ); - }; - - const handleSEOCourseClick = () => { - recordTracksEvent( 'calypso_marketing_tools_seo_course_button_click' ); - }; - return ( @@ -85,103 +45,28 @@ export const MarketingTools: FunctionComponent = () => {
- - - { translate( 'Get started' ) } - - - - - - { translate( 'Start earning' ) } - - - - - - { translate( 'Make your brand' ) } - - - - - - { translate( 'Talk to an SEO expert today' ) } - - - - - - { translate( 'Start sharing' ) } - - - - { isEnglish && ( - - { + return ( + - { translate( 'Register now' ) } - - - ) } + + + ); + } ) }
); -}; - -export default MarketingTools; +} diff --git a/client/sites/marketing/tools/marketing-features-data.ts b/client/sites/marketing/tools/marketing-features-data.ts new file mode 100644 index 00000000000000..dbe406616f19db --- /dev/null +++ b/client/sites/marketing/tools/marketing-features-data.ts @@ -0,0 +1,107 @@ +import config from '@automattic/calypso-config'; +import page from '@automattic/calypso-router'; +import { getLocaleSlug } from 'i18n-calypso'; +import fiverrLogo from 'calypso/assets/images/customer-home/fiverr-logo.svg'; +import rocket from 'calypso/assets/images/customer-home/illustration--rocket.svg'; +import earnIllustration from 'calypso/assets/images/customer-home/illustration--task-earn.svg'; +import wordPressLogo from 'calypso/assets/images/icons/wordpress-logo.svg'; +import { marketingConnections } from 'calypso/my-sites/marketing/paths'; +import * as T from 'calypso/types'; +import { MarketingToolsFeatureData } from './types'; + +export const getMarketingFeaturesData = ( + selectedSiteSlug: T.SiteSlug | null, + recordTracksEvent: ( event: string ) => void, + translate: ( text: string ) => string, + localizeUrl: ( url: string ) => string +): MarketingToolsFeatureData[] => { + const isEnglish = ( config( 'english_locales' ) as string[] ).includes( getLocaleSlug() ?? '' ); + const result: MarketingToolsFeatureData[] = [ + { + title: translate( 'Let our WordPress.com experts build your site!' ), + description: translate( + "Hire our dedicated experts to build a handcrafted, personalized website. Share some details about what you're looking for, and we'll make it happen." + ), + imagePath: wordPressLogo, + buttonText: translate( 'Get started' ), + buttonHref: localizeUrl( 'https://wordpress.com/website-design-service/?ref=tools-banner' ), + buttonTarget: '_blank', + onClick: () => { + recordTracksEvent( 'calypso_marketing_tools_built_by_wp_button_click' ); + }, + }, + { + title: translate( 'Monetize your site' ), + description: translate( + 'Accept payments or donations with our native payment blocks, limit content to paid subscribers only, opt into our ad network to earn revenue, and refer friends to WordPress.com for credits.' + ), + imagePath: earnIllustration, + imageAlt: translate( 'A stack of coins' ), + buttonText: translate( 'Start earning' ), + onClick: () => { + recordTracksEvent( 'calypso_marketing_tools_earn_button_click' ); + + page( `/earn/${ selectedSiteSlug }` ); + }, + }, + { + title: translate( 'Fiverr logo maker' ), + description: translate( + 'Create a standout brand with a custom logo. Our partner makes it easy and quick to design a professional logo that leaves a lasting impression.' + ), + imagePath: fiverrLogo, + imageAlt: translate( 'Fiverr logo' ), + buttonText: translate( 'Make your brand' ), + buttonHref: 'https://wp.me/logo-maker/?utm_campaign=marketing_tab', + buttonTarget: '_blank', + onClick: () => { + recordTracksEvent( 'calypso_marketing_tools_create_a_logo_button_click' ); + }, + }, + { + title: translate( 'Hire an SEO expert' ), + description: translate( + 'In today‘s digital age, visibility is key. Hire an SEO expert to boost your online presence and capture valuable opportunities.' + ), + imagePath: fiverrLogo, + imageAlt: translate( 'Fiverr logo' ), + buttonText: translate( 'Talk to an SEO expert today' ), + buttonHref: 'https://wp.me/hire-seo-expert/?utm_source=marketing_tab', + buttonTarget: '_blank', + onClick: () => { + recordTracksEvent( 'calypso_marketing_tools_hire_an_seo_expert_button_click' ); + }, + }, + { + title: translate( 'Get social, and share your blog posts where the people are' ), + description: translate( + "Use your site's Jetpack Social tools to connect your site and your social media accounts, and share your new posts automatically. Connect to Facebook, LinkedIn, and more." + ), + imagePath: '/calypso/images/marketing/social-media-logos.svg', + imageAlt: translate( 'Logos for Facebook, Twitter, LinkedIn, and Tumblr' ), + buttonText: translate( 'Start sharing' ), + onClick: () => { + recordTracksEvent( 'calypso_marketing_tools_start_sharing_button_click' ); + + page( marketingConnections( selectedSiteSlug ) ); + }, + }, + ]; + if ( isEnglish ) { + result.push( { + title: translate( 'Increase traffic to your WordPress.com site' ), + description: translate( + 'Take our free introductory course about search engine optimization (SEO) and learn how to improve your site or blog for both search engines and humans.' + ), + imagePath: rocket, + imageAlt: translate( 'A rocketship' ), + buttonText: translate( 'Register now' ), + buttonHref: 'https://wordpress.com/learn/courses/intro-to-seo/', + buttonTarget: '_blank', + onClick: () => { + recordTracksEvent( 'calypso_marketing_tools_seo_course_button_click' ); + }, + } ); + } + return result; +}; diff --git a/client/sites/marketing/tools/types.ts b/client/sites/marketing/tools/types.ts new file mode 100644 index 00000000000000..e59cd9683abd91 --- /dev/null +++ b/client/sites/marketing/tools/types.ts @@ -0,0 +1,10 @@ +export interface MarketingToolsFeatureData { + title: string; + description: string; + imagePath: string; + imageAlt?: string; + buttonText: string; + buttonHref?: string; + buttonTarget?: '_blank'; + onClick?: () => void; +}