Skip to content

Commit

Permalink
Business Tools: Refactor to extract component logic to a data component
Browse files Browse the repository at this point in the history
  • Loading branch information
epeicher committed Nov 19, 2024
1 parent de8dcd4 commit 0be003b
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 148 deletions.
181 changes: 33 additions & 148 deletions client/sites/marketing/tools/index.tsx
Original file line number Diff line number Diff line change
@@ -1,82 +1,38 @@
// import { useTranslate, getLocaleSlug } from 'i18n-calypso';
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 { getLocaleSlug } 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 (
<Button onClick={ onClick } href={ href } target={ target } variant="link">
{ children }
<Gridicon style={ { marginLeft: '8px' } } icon="chevron-right" size={ 12 } />
</Button>
);
};

export const MarketingTools: FunctionComponent = () => {
const translate = useTranslate();
export default function MarketingTools() {
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 );

const handleBusinessToolsClick = () => {
recordTracksEvent( 'calypso_marketing_tools_business_tools_button_click' );

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 (
<Fragment>
<QueryJetpackPlugins siteIds={ [ siteId ] } />
Expand All @@ -85,103 +41,32 @@ export const MarketingTools: FunctionComponent = () => {
<MarketingToolsHeader handleButtonClick={ handleBusinessToolsClick } />

<div className="tools__feature-list">
<MarketingToolsFeature
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 }
>
<FeaturedButton
onClick={ handleBuiltByWpClick }
href={ localizeUrl( 'https://wordpress.com/website-design-service/?ref=tools-banner' ) }
target="_blank"
>
{ translate( 'Get started' ) }
</FeaturedButton>
</MarketingToolsFeature>

<MarketingToolsFeature
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' ) }
>
<FeaturedButton onClick={ handleEarnClick }>
{ translate( 'Start earning' ) }
</FeaturedButton>
</MarketingToolsFeature>

<MarketingToolsFeature
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' ) }
>
<FeaturedButton
onClick={ handleCreateALogoClick }
href="https://wp.me/logo-maker/?utm_campaign=marketing_tab"
target="_blank"
>
{ translate( 'Make your brand' ) }
</FeaturedButton>
</MarketingToolsFeature>

<MarketingToolsFeature
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' ) }
>
<FeaturedButton
onClick={ handleHireAnSEOExpertClick }
href="https://wp.me/hire-seo-expert/?utm_source=marketing_tab"
target="_blank"
>
{ translate( 'Talk to an SEO expert today' ) }
</FeaturedButton>
</MarketingToolsFeature>

<MarketingToolsFeature
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' ) }
>
<FeaturedButton onClick={ handleStartSharingClick }>
{ translate( 'Start sharing' ) }
</FeaturedButton>
</MarketingToolsFeature>

{ isEnglish && (
<MarketingToolsFeature
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' ) }
>
<FeaturedButton
onClick={ handleSEOCourseClick }
href="https://wordpress.com/learn/courses/intro-to-seo/"
target="_blank"
{ marketingFeatures.map( ( feature, index ) => {
if ( feature.showOnlyInEnglish && ! isEnglish ) {
return null;
}

return (
<MarketingToolsFeature
key={ index }
title={ feature.title }
description={ feature.description }
imagePath={ feature.imagePath }
imageAlt={ feature.imageAlt }
>
{ translate( 'Register now' ) }
</FeaturedButton>
</MarketingToolsFeature>
) }
<Button
onClick={ feature.onClick }
href={ feature.buttonHref }
target={ feature.buttonTarget }
variant="link"
>
{ feature.buttonText }
<Gridicon style={ { marginLeft: '8px' } } icon="chevron-right" size={ 12 } />
</Button>
</MarketingToolsFeature>
);
} ) }
</div>
</Fragment>
);
};

export default MarketingTools;
}
100 changes: 100 additions & 0 deletions client/sites/marketing/tools/marketing-features-data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import page from '@automattic/calypso-router';
import { localizeUrl } from '@automattic/i18n-utils';
import { translate } 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
): 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 ) );
},
},
{
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' );
},
showOnlyInEnglish: true,
},
];
11 changes: 11 additions & 0 deletions client/sites/marketing/tools/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export interface MarketingToolsFeatureData {
title: string;
description: string;
imagePath: string;
imageAlt?: string;
buttonText: string;
buttonHref?: string;
buttonTarget?: '_blank' | '_self';
onClick?: () => void;
showOnlyInEnglish?: boolean;
}

0 comments on commit 0be003b

Please sign in to comment.