My Jetpack: Onboarding i3 | Add help section (#43638)

* My Jetpack: Onboarding i3 | Update help section

* Remove double parenthesis

* Thank you copilot

Author: manzoorwanijk

pnpm-lock.yaml

@@ -0,0 +1,37 @@
+import { ExternalLink } from '@wordpress/components';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+
+export type HelpCardProps = {
+	title: string;
+	icon: React.ReactNode;
+	headingTag?: `h${ 1 | 2 | 3 | 4 | 5 | 6 }`;
+	description?: React.ReactNode;
+	link?: string;
+	className?: string;
+};
+
+/**
+ * The component for displaying a help card.
+ *
+ * @param {HelpCardProps} props - The component props.
+ * @return The rendered help card component.
+ */
+export function HelpCard( {
+	icon,
+	title,
+	headingTag: Heading = 'h3',
+	description,
+	link,
+	className,
+}: HelpCardProps ) {
+	return (
+		<section className={ clsx( styles.wrapper, className ) }>
+			{ icon ? <div className={ styles.icon }>{ icon }</div> : null }
+			<Heading className={ styles.heading }>
+				{ link ? <ExternalLink href={ link }>{ title }</ExternalLink> : title }
+			</Heading>
+			{ description ? <p className={ styles.description }>{ description }</p> : null }
+		</section>
+	);
+}

projects/packages/my-jetpack/_inc/components/help-card/index.tsx

@@ -0,0 +1,51 @@
+.wrapper {
+    width: 100%;
+    min-width: 20rem;
+    display: flex;
+    padding: 1.5rem;
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 8px;
+    border: 1px solid var(--jp-gray-5);
+    background: var(--jp-white);
+}
+
+.icon {
+
+    svg {
+        color: var(--jp-gray-90)
+    }
+}
+
+.heading {
+    font-size: 1.25rem;
+    line-height: 24px;
+    font-weight: 500;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+
+    :global(.components-external-link__contents) {
+        color: var(--jp-black);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    :global(.components-external-link__icon) {
+        color: var(--jp-black);
+        text-decoration: none;
+        font-weight: 400;
+        font-size: 0.875rem;
+        margin-inline-start: 0.5rem;
+    }
+}
+
+.description {
+    font-size: 0.8125rem;
+    line-height: 20px;
+    color: var(--jp-gray-80);
+    font-weight: 400;
+    margin-block: 0;
+}

projects/packages/my-jetpack/_inc/components/help-card/styles.module.scss

@@ -0,0 +1,15 @@
+/**
+ * Code icon component
+ *
+ * @return The rendered component.
+ */
+export function CodeIcon() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
+			<path
+				d="M21.1333 10.7004L16.8333 6.40039L15.7333 7.50039L20.0333 11.8004C20.1333 11.9004 20.1333 12.1004 20.0333 12.2004L15.7333 16.5004L16.8333 17.6004L21.1333 13.3004C21.8333 12.5004 21.8333 11.4004 21.1333 10.7004ZM4.5333 11.8004L8.8333 7.50039L7.8333 6.50039L3.5333 10.8004C2.8333 11.5004 2.8333 12.6004 3.5333 13.3004L7.8333 17.6004L8.9333 16.5004L4.6333 12.2004C4.4333 12.1004 4.4333 11.9004 4.5333 11.8004Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

projects/packages/my-jetpack/_inc/components/icons/code.tsx

@@ -0,0 +1,15 @@
+/**
+ * Comment icon component
+ *
+ * @return The rendered component.
+ */
+export function CommentIcon() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+			<path
+				d="M18 4H6C4.9 4 4 4.9 4 6V18.9C4 19.5 4.5 20 5.1 20C5.4 20 5.6 19.9 5.9 19.7L8.5 17H18C19.1 17 20 16.1 20 15V6C20 4.9 19.1 4 18 4ZM18.5 15C18.5 15.3 18.3 15.5 18 15.5H7.9L5.5 17.9V6C5.5 5.7 5.7 5.5 6 5.5H18C18.3 5.5 18.5 5.7 18.5 6V15Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

projects/packages/my-jetpack/_inc/components/icons/comment.tsx

@@ -0,0 +1,15 @@
+/**
+ * Tool icon component
+ *
+ * @return The rendered component.
+ */
+export function ToolIcon() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
+			<path
+				d="M14.7694 7.12815L17.0294 4.86815C16.3421 4.62306 15.6009 4.57062 14.886 4.71651C14.1711 4.8624 13.5097 5.20107 12.9734 5.69584C12.4371 6.19061 12.0464 6.82264 11.8435 7.52352C11.6406 8.2244 11.6333 8.96742 11.8224 9.67215L6.49437 15.0002C6.30334 15.1846 6.15098 15.4053 6.04616 15.6493C5.94134 15.8934 5.88617 16.1558 5.88386 16.4214C5.88156 16.6869 5.93216 16.9503 6.03272 17.1961C6.13328 17.4419 6.28179 17.6652 6.46958 17.8529C6.65736 18.0407 6.88066 18.1892 7.12646 18.2898C7.37225 18.3904 7.63561 18.441 7.90117 18.4387C8.16673 18.4363 8.42917 18.3812 8.67317 18.2764C8.91718 18.1715 9.13787 18.0192 9.32237 17.8282L14.6514 12.5002C15.3562 12.6893 16.0994 12.682 16.8004 12.4791C17.5014 12.2762 18.1335 11.8854 18.6283 11.3489C19.1231 10.8125 19.4618 10.151 19.6076 9.43588C19.7533 8.7208 19.7007 7.97946 19.4554 7.29215L17.1944 9.55215L15.2824 9.04015L14.7694 7.12815ZM7.55537 16.7682C7.50761 16.722 7.46952 16.6669 7.44331 16.6059C7.41711 16.5449 7.40332 16.4792 7.40274 16.4129C7.40216 16.3465 7.41481 16.2806 7.43995 16.2192C7.46509 16.1577 7.50222 16.1019 7.54917 16.055C7.59611 16.008 7.65194 15.9709 7.71339 15.9457C7.77484 15.9206 7.84068 15.908 7.90707 15.9085C7.97346 15.9091 8.03907 15.9229 8.10007 15.9491C8.16107 15.9753 8.21624 16.0134 8.26237 16.0612C8.35344 16.1555 8.40384 16.2818 8.4027 16.4129C8.40156 16.544 8.34898 16.6694 8.25627 16.7621C8.16357 16.8548 8.03816 16.9073 7.90707 16.9085C7.77597 16.9096 7.64967 16.8592 7.55537 16.7682Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

projects/packages/my-jetpack/_inc/components/icons/tool.tsx

@@ -0,0 +1,46 @@
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { HelpCard } from '../../help-card';
+import { CodeIcon } from '../../icons/code';
+import { CommentIcon } from '../../icons/comment';
+import { ToolIcon } from '../../icons/tool';
+import styles from './styles.module.scss';
+
+/**
+ * Renders the help cards for the Help section of My Jetpack.
+ *
+ * @return The rendered help cards component.
+ */
+export function HelpCards() {
+	return (
+		<div className={ styles.cards }>
+			<HelpCard
+				title={ __( 'Ask us a question', 'jetpack-my-jetpack' ) }
+				link={ getRedirectUrl( 'jetpack-contact-support' ) }
+				icon={ <CommentIcon /> }
+				description={ __(
+					'Have a question? Our AI Assistant can help, or connect you to our support team.',
+					'jetpack-my-jetpack'
+				) }
+			/>
+			<HelpCard
+				title={ __( 'Troubleshooting', 'jetpack-my-jetpack' ) }
+				link={ getRedirectUrl( 'jetpack-support' ) }
+				icon={ <ToolIcon /> }
+				description={ __(
+					'Having trouble with Jetpack? Check out recommended steps to fix common problems.',
+					'jetpack-my-jetpack'
+				) }
+			/>
+			<HelpCard
+				title={ __( 'Jetpack for developers', 'jetpack-my-jetpack' ) }
+				link={ getRedirectUrl( 'jetpack-for-developers' ) }
+				icon={ <CodeIcon /> }
+				description={ __(
+					'Want to test Jetpack features locally or add Featured Content and Social Links to your theme? Start here.',
+					'jetpack-my-jetpack'
+				) }
+			/>
+		</div>
+	);
+}

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help-content.tsx

@@ -0,0 +1,42 @@
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { HelpCards } from './cards';
+import { HelpFooter } from './footer';
+import styles from './styles.module.scss';
+
+/**
+ * The Help content component.
+ *
+ * @return The rendered component.
+ */
+export function HelpContent() {
+	return (
+		<div className={ styles.content }>
+			<h2>{ __( 'Need assistance?', 'jetpack-my-jetpack' ) }</h2>
+			<p className={ styles.description }>
+				{ __(
+					'Browse our expert guides to get help with setup, features, and troubleshooting.',
+					'jetpack-my-jetpack'
+				) }
+			</p>
+			<Button
+				variant="primary"
+				href={ getRedirectUrl( 'jetpack-support' ) }
+				target="_blank"
+				rel="noopener noreferrer"
+				className={ styles.cta }
+			>
+				<span>
+					{ __( 'Explore our Help Center', 'jetpack-my-jetpack' ) }
+					<span role="presentation" aria-hidden="true">
+						&nbsp;
+						{ '↗' }
+					</span>
+				</span>
+			</Button>
+			<HelpCards />
+			<HelpFooter />
+		</div>
+	);
+}

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/cards.tsx

@@ -0,0 +1,50 @@
+import { getAdminUrl } from '@automattic/jetpack-script-data';
+import { ExternalLink } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import styles from './styles.module.scss';
+
+/**
+ * Renders the footer for the Help section of My Jetpack.
+ *
+ * @return The rendered footer component.
+ */
+export function HelpFooter() {
+	return (
+		<div className={ styles.footer }>
+			<section>
+				<h3>{ __( 'Real humans. Real support.', 'jetpack-my-jetpack' ) }</h3>
+				<p className={ styles.description }>
+					{ __(
+						'We are the people behind WordPress.com, WooCommerce, Jetpack, Simplenote, and more. We believe in making the web a better place.',
+						'jetpack-my-jetpack'
+					) }
+				</p>
+				<ExternalLink
+					className={ styles[ 'footer-learn-more' ] }
+					href="https://automattic.com/about/"
+				>
+					{ __( 'Learn more about us', 'jetpack-my-jetpack' ) }
+				</ExternalLink>
+
+				<nav
+					className={ styles[ 'footer-nav' ] }
+					aria-label={ __( 'Useful links', 'jetpack-my-jetpack' ) }
+				>
+					<h4>{ __( 'Useful links', 'jetpack-my-jetpack' ) }</h4>
+					<ul>
+						<li>
+							<a href={ getAdminUrl( 'admin.php?page=jetpack_modules' ) }>
+								{ __( 'All Jetpack modules', 'jetpack-my-jetpack' ) }
+							</a>
+						</li>
+						<li>
+							<a href={ getAdminUrl( 'admin.php?page=jetpack-debugger' ) }>
+								{ __( 'Debug information', 'jetpack-my-jetpack' ) }
+							</a>
+						</li>
+					</ul>
+				</nav>
+			</section>
+		</div>
+	);
+}