Extract and move the UpsellBanner component to js-packages/components…

… (2/3) (#35228)

* changelog

* Remove unneeded changelog

* Move UpsellBanner component to js-packages/components.

* In JetpackManageBanner import UpsellBanner from @automattic/jetpack-components

* Update the Jetpack Manage Banner copy.

* changelog

* Rewrite the UpsellBanner component into TypeScript

* Add the UpsellBanner storybook

* Remove the UpsellBanner component from packages/my-jetpack

* Remove the UpsellBanner component from packages/my-jetpack

* Update package version

projects/js-packages/components/changelog/update-move-upsell-banner-componen-to-js-components

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Move the UpsellBanner component to js-packages/components

projects/packages/my-jetpack/_inc/components/upsell-banner/index.jsx → projects/js-packages/components/components/upsell-banner/index.tsx

@@ -2,6 +2,7 @@ import { Button } from '@automattic/jetpack-components';
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import React from 'react';
+import { UpsellBannerProps } from './types';
 
 import './style.scss';
 
@@ -11,11 +12,10 @@ import './style.scss';
  * - The primary CTA is the second button, at the right position.
  * - The secondary CTA is the first button, at the left position.
  *
- * @param {object} props - Component props.
- * @returns {object} UpsellBanner React component.
+ * @param {UpsellBannerProps} props - Component props.
+ * @returns {React.ReactNode} - UpsellBanner component.
  */
-const UpsellBanner = props => {
-	// todo: This component could be extracted into js-packages/components. And also the Jetpack Card component
+const UpsellBanner: React.FC< UpsellBannerProps > = props => {
 	const {
 		icon,
 		title,
@@ -52,7 +52,7 @@ const UpsellBanner = props => {
 							<Button
 								className="upsell-banner--content-cta-button secondary"
 								href={ secondaryCtaURL }
-								onClick={ secondaryCtaOnClick ?? null }
+								onClick={ secondaryCtaOnClick ?? undefined }
 								isExternalLink={ secondaryCtaIsExternalLink }
 							>
 								{ secondaryCtaLabel }
@@ -62,7 +62,7 @@ const UpsellBanner = props => {
 							<Button
 								className="upsell-banner--content-cta-button primary"
 								href={ primaryCtaURL }
-								onClick={ primaryCtaOnClick ?? null }
+								onClick={ primaryCtaOnClick ?? undefined }
 								isExternalLink={ primaryCtaIsExternalLink }
 							>
 								{ primaryCtaLabel }

projects/js-packages/components/components/upsell-banner/stories/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const content: any;
+	export default content;
+}

projects/js-packages/components/components/upsell-banner/stories/index.stories.tsx

@@ -0,0 +1,75 @@
+import UpsellBanner from '..';
+import logoSample from './jetpack-manage.svg';
+
+export default {
+	title: 'JS Packages/Components/Upsell Banner',
+	component: UpsellBanner,
+	parameters: {
+		layout: 'centered',
+	},
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const BannerTemplate = args => {
+	// Set up the first CTA
+	const secondaryCtaLabel = 'Learn more';
+	const secondaryCtaUrl = 'my-jetpack-jetpack-manage-learn-more';
+
+	// Set up the second CTA
+	const primaryCtaLabel = 'Manage sites';
+	const primaryCtaUrl = 'my-jetpack-jetpack-manage-dashboard';
+
+	return (
+		<UpsellBanner
+			icon={ args.showIcon ? logoSample : null }
+			title="Jetpack Manage"
+			description="Jetpack Manage has the tools you need to manage multiple WordPress sites. Monitor site security, performance, and traffic, and get alerted if a site needs attention. Plus, get bulk discounts."
+			secondaryCtaLabel={ args.showSecondary ? secondaryCtaLabel : null }
+			secondaryCtaURL={ args.showSecondary ? secondaryCtaUrl : null }
+			secondaryCtaIsExternalLink={ true }
+			primaryCtaLabel={ args.showPrimary ? primaryCtaLabel : null }
+			primaryCtaURL={ args.showPrimary ? primaryCtaUrl : null }
+			primaryCtaIsExternalLink={ true }
+		/>
+	);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const CompleteBanner = args => {
+	const props = {
+		showIcon: true,
+		showSecondary: true,
+		showPrimary: true,
+	};
+	return <BannerTemplate { ...props } />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const WithoutIcon = args => {
+	const props = {
+		showIcon: false,
+		showSecondary: true,
+		showPrimary: true,
+	};
+	return <BannerTemplate { ...props } />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const WithoutPrimaryBtn = args => {
+	const props = {
+		showIcon: true,
+		showSecondary: true,
+		showPrimary: false,
+	};
+	return <BannerTemplate { ...props } />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const WithoutSecondaryBtn = args => {
+	const props = {
+		showIcon: true,
+		showSecondary: false,
+		showPrimary: true,
+	};
+	return <BannerTemplate { ...props } />;
+};

projects/js-packages/components/components/upsell-banner/types.ts

@@ -0,0 +1,13 @@
+export type UpsellBannerProps = {
+	icon?: string;
+	title: string;
+	description: string;
+	primaryCtaLabel?: string;
+	primaryCtaURL?: string;
+	primaryCtaIsExternalLink?: boolean;
+	primaryCtaOnClick?: () => void;
+	secondaryCtaLabel?: string;
+	secondaryCtaURL?: string;
+	secondaryCtaIsExternalLink?: boolean;
+	secondaryCtaOnClick?: () => void;
+};

projects/js-packages/components/index.ts

@@ -70,4 +70,5 @@ export { default as IndeterminateProgressBar } from './components/indeterminate-
 export { default as ActionPopover } from './components/action-popover';
 export { default as ZendeskChat } from './components/zendesk-chat';
 export { default as ProgressBar } from './components/progress-bar';
+export { default as UpsellBanner } from './components/upsell-banner';
 export { getUserLocale, cleanLocale } from './lib/locale';

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.47.0",
+	"version": "0.48.0-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/packages/my-jetpack/_inc/components/upsell-banner/jetpack-manage-banner/index.jsx → projects/packages/my-jetpack/_inc/components/jetpack-manage-banner/index.jsx

@@ -1,6 +1,5 @@
-import { getRedirectUrl } from '@automattic/jetpack-components';
+import { UpsellBanner, getRedirectUrl } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import UpsellBanner from '../';
 import jetpackManageIcon from './jetpack-manage.svg';
 
 /**
@@ -28,7 +27,7 @@ const JetpackManageBanner = props => {
 			icon={ jetpackManageIcon }
 			title={ __( 'Jetpack Manage', 'jetpack-my-jetpack' ) }
 			description={ __(
-				'Jetpack Manage has the tools you need to manage multiple WordPress sites. Monitor site security, performance, and traffic, and get alerted if a site needs attention.',
+				'Jetpack Manage has the tools you need to manage multiple WordPress sites. Monitor site security, performance, and traffic, and get alerted if a site needs attention. Plus, get bulk discounts.',
 				'jetpack-my-jetpack'
 			) }
 			secondaryCtaLabel={ ctaLearnMoreLabel }

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx

@@ -28,11 +28,11 @@ import useGlobalNotice from '../../hooks/use-notice';
 import { useProduct } from '../../hooks/use-product';
 import ConnectionsSection from '../connections-section';
 import IDCModal from '../idc-modal';
+import JetpackManageBanner from '../jetpack-manage-banner';
 import PlansSection from '../plans-section';
 import { PRODUCT_STATUSES } from '../product-card';
 import ProductCardsSection from '../product-cards-section';
 import StatsSection from '../stats-section';
-import JetpackManageBanner from '../upsell-banner/jetpack-manage-banner';
 import WelcomeBanner from '../welcome-banner';
 import styles from './styles.module.scss';
 

projects/packages/my-jetpack/changelog/update-move-upsell-banner-componen-to-js-components

@@ -0,0 +1,4 @@
+Significance: minor
+Type: removed
+
+UpsellBanner component moved to js-packages/components