From b6eec1e1bf46d46359862855a5eb617ae5c9ef12 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 27 Dec 2022 02:05:58 +0800 Subject: [PATCH] Add introduction banner card to marketing page. --- .../IntroductionBanner.scss | 43 ++++++++++ .../IntroductionBanner/IntroductionBanner.tsx | 86 +++++++++++++++++++ .../IntroductionBanner/illustration.svg | 73 ++++++++++++++++ .../IntroductionBanner/index.ts | 1 + .../IntroductionBanner/woo.svg | 15 ++++ .../MarketingOverviewMultichannel.tsx | 3 + 6 files changed, 221 insertions(+) create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.scss create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/illustration.svg create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/index.ts create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/woo.svg diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.scss new file mode 100644 index 00000000000..6e72fffa54c --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.scss @@ -0,0 +1,43 @@ +.woocommerce-marketing-introduction-banner { + & > div { + display: flex; + } + + .woocommerce-marketing-introduction-banner-content { + width: 350px; + margin: 32px 20px 32px 40px; + + .woocommerce-marketing-introduction-banner-title { + font-size: 20px; + font-weight: 400; + line-height: 28px; + margin-bottom: $gap-smaller; + } + + .woocommerce-marketing-introduction-banner-features { + font-size: 13px; + font-weight: 400; + line-height: 16px; + color: $gray-700; + + svg { + fill: $studio-woocommerce-purple-50; + } + } + } + + .woocommerce-marketing-introduction-banner-illustration { + width: 271px; + background: linear-gradient( + 90deg, + rgba( 247, 237, 247, 0 ) 5.31%, + rgba( 196, 152, 217, 0.12 ) 77.75% + ); + + img { + display: block; + width: 100%; + height: 100%; + } + } +} diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx new file mode 100644 index 00000000000..e56476fa096 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx @@ -0,0 +1,86 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Card, Flex, FlexItem, FlexBlock } from '@wordpress/components'; +import { Icon, trendingUp, megaphone } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import './IntroductionBanner.scss'; +import wooIconUrl from './woo.svg'; +import illustrationUrl from './illustration.svg'; + +export const IntroductionBanner = () => { + return ( + +
+
+ { __( + 'Reach new customers and increase sales without leaving WooCommerce', + 'woocommerce' + ) } +
+ + + + + + { __( + 'Reach customers on other sales channels', + 'woocommerce' + ) } + + + + + + + + { __( + 'Advertise with marketing campaigns', + 'woocommerce' + ) } + + + + + + + } + /> + + { __( 'Built by WooCommerce', 'woocommerce' ) } + + + + +
+
+ { +
+ + ); +}; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/illustration.svg b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/illustration.svg new file mode 100644 index 00000000000..b2834e68fb8 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/illustration.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/index.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/index.ts new file mode 100644 index 00000000000..8ae35a6ca33 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/index.ts @@ -0,0 +1 @@ +export { IntroductionBanner } from './IntroductionBanner'; diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/woo.svg b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/woo.svg new file mode 100644 index 00000000000..fb4a4205043 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/woo.svg @@ -0,0 +1,15 @@ + + +WooCommerce Logo + + + +image/svg+xml + + + + + + + + diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx index e7858c2c01a..9ac491c34a5 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx @@ -7,6 +7,7 @@ import { useUser } from '@woocommerce/data'; * Internal dependencies */ import { getAdminSetting } from '~/utils/admin-settings'; +import { IntroductionBanner } from './IntroductionBanner'; import { Campaigns } from './Campaigns'; import { Channels } from './Channels'; import { InstalledExtensions } from './InstalledExtensions'; @@ -37,6 +38,8 @@ export const MarketingOverviewMultichannel: React.FC = () => { return (
+ { /* TODO: check wp_options and conditionally display introduction banner. */ } + { dataRegistered.length >= 1 && } { ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (