diff --git a/js/src/components/stepper/step-content-footer/index.scss b/js/src/components/stepper/step-content-footer/index.scss index 47eefea747..b45d742630 100644 --- a/js/src/components/stepper/step-content-footer/index.scss +++ b/js/src/components/stepper/step-content-footer/index.scss @@ -1,4 +1,8 @@ .gla-step-content-footer { display: flex; justify-content: flex-end; + + &[hidden] { + display: none; + } } diff --git a/js/src/css/abstracts/_variables.scss b/js/src/css/abstracts/_variables.scss index 749527dae2..21f32a9964 100644 --- a/js/src/css/abstracts/_variables.scss +++ b/js/src/css/abstracts/_variables.scss @@ -6,6 +6,7 @@ // Typography $gla-font-smallest: 11px; +$gla-font-smaller: 12px; $gla-font-small: 14px; $gla-font-small-medium: 20px; $gla-font-medium: 24px; diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js new file mode 100644 index 0000000000..946758d534 --- /dev/null +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js @@ -0,0 +1,141 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Flex, FlexItem, FlexBlock } from '@wordpress/components'; +import { Pill } from '@woocommerce/components'; +import GridiconCheckmark from 'gridicons/dist/checkmark'; +import GridiconGift from 'gridicons/dist/gift'; + +/** + * Internal dependencies + */ +import Section from '.~/wcdl/section'; +import AppDocumentationLink from '.~/components/app-documentation-link'; +import './paid-ads-features-section.scss'; + +function FeatureList() { + const featuresItems = [ + { + Icon: GridiconCheckmark, + content: __( + 'Promote your products across Google Search, YouTube, Display, Discover, Maps, Gmail, and more.', + 'google-listings-and-ads' + ), + }, + { + Icon: GridiconCheckmark, + content: __( + 'Set a daily budget, and only pay when someone clicks.', + 'google-listings-and-ads' + ), + }, + { + Icon: GridiconGift, + content: __( + 'Claim $500 in ads credit when you spend your first $500 with Google Ads. Terms and conditions apply.', + 'google-listings-and-ads' + ), + }, + ]; + + return ( +
+ { featuresItems.map( ( { Icon, content }, idx ) => ( + + + { content } + + ) ) } +
+ ); +} + +// TODO: `href` is not yet ready. Will be added later. +/** + * @fires gla_documentation_link_click with `{ context: 'setup-paid-ads', link_id: 'paid-ads-with-performance-max-campaigns-learn-more', href: 'https://example.com' }` + */ + +/** + * Renders a section layout to elaborate on the features of paid ads and show the buttons + * for the next actions: skip or continue the paid ads setup. + * + * @param {Object} props React props. + * @param {boolean} props.hideFooterButtons Whether to hide the buttons at the card footer. + * @param {JSX.Element} props.skipButton Button to skip paid ads setup. + * @param {JSX.Element} props.continueButton Button to continue paid ads setup. + */ +export default function PaidAdsFeaturesSection( { + hideFooterButtons, + skipButton, + continueButton, +} ) { + return ( +
{ __( 'Recommended', 'google-listings-and-ads' ) } + } + title={ __( + 'Boost product listings with paid ads', + 'google-listings-and-ads' + ) } + description={ + <> +

+ { __( + 'Get the most out of your paid ads with Performance Max campaigns. With Google’s machine learning technology, your Performance Max campaigns will be automated to show the most impactful ads at the right time and place.', + 'google-listings-and-ads' + ) } +

+

+ + { __( 'Learn more', 'google-listings-and-ads' ) } + +

+ + } + > + + + + + + { __( + 'Drive more traffic and sales by using both free listings and paid ads', + 'google-listings-and-ads' + ) } + +
+ { __( + 'Using free listings and paid ads together can double impressions and increase clicks by 50%*', + 'google-listings-and-ads' + ) } +
+ + + { __( + 'Source: Google Internal Data, July 2020', + 'google-listings-and-ads' + ) } + + + +
+ Will be added by another PR +
+ + + + + +
+ ); +} diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.scss b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.scss new file mode 100644 index 0000000000..3dfb68d4b4 --- /dev/null +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.scss @@ -0,0 +1,38 @@ +.gla-paid-ads-features-section { + .woocommerce-pill { + color: $gray-700; + } + + .wcdl-section-card-title { + margin-bottom: $grid-unit-15; + line-height: $gla-line-height-medium-large; + font-weight: normal; + font-size: $gla-font-small-medium; + color: $gray-900; + } + + &__subtitle { + line-height: $gla-line-height-medium; + font-size: $gla-font-small; + color: $gray-800; + } + + &__feature-list { + display: flex; + flex-direction: column; + gap: $grid-unit-20; + margin: $grid-unit-30 0 $grid-unit-20; + line-height: $gla-line-height-smaller; + color: $gray-800; + + .gridicon { + fill: #5ec862; + } + } + + &__cite { + font-style: normal; + font-size: $gla-font-smaller; + color: $gray-600; + } +} diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index 86025ee2a4..d602fdda84 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -17,6 +17,7 @@ import StepContentFooter from '.~/components/stepper/step-content-footer'; import FaqsSection from '.~/components/paid-ads/faqs-section'; import AppButton from '.~/components/app-button'; import ProductFeedStatusSection from './product-feed-status-section'; +import PaidAdsFeaturesSection from './paid-ads-features-section'; import { getProductFeedUrl } from '.~/utils/urls'; import { GUIDE_NAMES } from '.~/constants'; import { API_NAMESPACE } from '.~/data/constants'; @@ -24,6 +25,7 @@ import { API_NAMESPACE } from '.~/data/constants'; export default function SetupPaidAds() { const adminUrl = useAdminUrl(); const { createNotice } = useDispatchCoreNotices(); + const [ showPaidAdsSetup, setShowPaidAdsSetup ] = useState( false ); const [ completing, setCompleting ] = useState( null ); const finishFreeListingsSetup = async ( event ) => { @@ -56,6 +58,19 @@ export default function SetupPaidAds() { await finishFreeListingsSetup( event ); }; + function createSkipButton( text ) { + return ( + + ); + } + return ( + setShowPaidAdsSetup( true ) } + /> + } + /> - + diff --git a/js/src/wcdl/section/card/footer/index.scss b/js/src/wcdl/section/card/footer/index.scss index 1d587331d7..9e014350fd 100644 --- a/js/src/wcdl/section/card/footer/index.scss +++ b/js/src/wcdl/section/card/footer/index.scss @@ -1,3 +1,7 @@ .wcdl-section-card-footer { padding: calc(var(--large-gap) / 2) var(--large-gap); + + &[hidden] { + display: none; + } } diff --git a/js/src/wcdl/section/index.js b/js/src/wcdl/section/index.js index 54281a5393..b4e8a5918c 100644 --- a/js/src/wcdl/section/index.js +++ b/js/src/wcdl/section/index.js @@ -16,10 +16,18 @@ import './index.scss'; * @param {string} [props.className] Additional CSS class name to be appended. * @param {JSX.Element} [props.title] Section title at the left side. * @param {JSX.Element} [props.description] Section description under the title. + * @param {JSX.Element} [props.topContent] Content at the top of the section title. * @param {JSX.Element} [props.children] Section content at the right side. * @param {boolean} [props.disabled] Whether display the whole section in disabled style. */ -const Section = ( { className, title, description, children, disabled } ) => { +const Section = ( { + className, + title, + description, + topContent, + children, + disabled, +} ) => { const sectionClassName = classnames( 'wcdl-section', disabled ? 'wcdl-section--is-disabled' : false, @@ -29,6 +37,7 @@ const Section = ( { className, title, description, children, disabled } ) => { return (
+ { topContent &&

{ topContent }

} { title &&

{ title }

} { description }
diff --git a/js/src/wcdl/section/index.scss b/js/src/wcdl/section/index.scss index 212f9347ae..d37eb437b6 100644 --- a/js/src/wcdl/section/index.scss +++ b/js/src/wcdl/section/index.scss @@ -27,7 +27,7 @@ } p { - margin: 0 0 1em; + margin: 0 0 $grid-unit; line-height: $gla-line-height-smaller; } }