Skip to content

Commit 24243d5

Browse files
manzoorwanijkgrzegorz-cpCopilotrobertsreberskiclaude
authored and
mikestottuk
committed
My Jetpack: Onboarding i3 - Feature Branch/PR (#43592)
* Init * My Jetpack: Onboarding i3 - Initialize tab panel (#43595) * My Jetpack: Onboarding i3 - Init tab panel * Improve types and use constants and extractions * Add changelog to make CI happy * Create a shared tab content wrapper to share styling * Use "section" instead of tabs * Rename tab components to content components * Use correct headings * Decrease margins on smaller screens * Fix initial tab changed manually * My Jetpack: Onboarding i3 | Split the overview tab (#43632) * My Jetpack: Onboarding i3 | Split the overview tab * Fix separator position * My Jetpack: Onboarding i3 | Add help section (#43638) * My Jetpack: Onboarding i3 | Update help section * Remove double parenthesis * Thank you copilot * My Jetpack: Updating Products tab. (#43652) * Moving unowned products to the Products tab * Products tab header and spacing update * Moving owned and unowned products into a hook * changelog * Update projects/packages/my-jetpack/_inc/components/product-cards-section/style.module.scss RTL aware alternative Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> * Update projects/packages/my-jetpack/_inc/components/product-cards-section/style.module.scss RTL aware alternative Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> --------- Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> * My Jetpack: Tab filtering for admin role (#43675) * My Jetpack: Tab fitering for admin role * changelog * replacing permission check * My Jetpack: Onboarding i3 | Move Plan and Connection section to Overview tab (#43681) * My Jetpack: Onboarding i3 | Move Plan and Connection section to Overview tab * Remove unused styles * Fix unit tests * Fix E2E tests * Add changelog * Fix top border for the plan and connection section * Fix E2E test heading * Update E2E test string * Update connection owner message when author is not connected * Fix typo in changelog, thanks to copilot review. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix connection block for JN sites * Move Jetpack Manage upsell banner to Overview * Update banner messaging --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * My Jetpack: Onboarding i3 | Fix layout on wider screens (#43699) * My Jetpack: Update upsell banner for Automattic for Agencies (#43697) * Update Jetpack Manage banner to A4A * Fix Help section CTA styling * Remove redundant changelogs * Updating Products tab visibility based on owned products (#43720) * Remove repeated changelog * My Jetpack: Onboarding i3 | Update Products tab description copy (#43724) * Add tracks events for My Jetpack Tab Navigation (#43703) * Add jetpack_myjetpack_tab_click, jetpack_myjetpack_page_view (enhance), jetpack_myjetpack_help_request events * Merge and resolve conflict in my-jetpack-tab-panel/index.tsx Combined functionality from both branches: - Analytics tracking and session duration from HEAD - Product filtering logic from feature/my-jetpack/onboarding-i3 - Maintained all imports and hooks from both versions - Preserved the analytics event tracking while adding dynamic tab visibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Improve source tab definition on help tracking hook --------- Co-authored-by: Claude <noreply@anthropic.com> * My jetpack: Onboarding i3 | Fix layout and alignment issues (#43725) * Fix horizontal scrollable space * Fix Jetpack log and tabs aligment issues * Add changelog * OK Copilot * My Jetpack: Replace deprecated sass APIs with alternatives (#43726) --------- Co-authored-by: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Robert Sreberski <robertsreberski@gmail.com> Co-authored-by: Claude <noreply@anthropic.com>
1 parent c990c8c commit 24243d5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1478
-698
lines changed

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/js-packages/components/changelog/fix-my-jetpack-layout-and-alighment-issues‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: patch
2+
Type: added
3+
4+
Added className prop to AdminPage component.

‎projects/js-packages/components/components/admin-page/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import type React from 'react';
2020
*/
2121
const AdminPage: React.FC< AdminPageProps > = ( {
2222
children,
23+
className,
2324
moduleName = __( 'Jetpack', 'jetpack-components' ),
2425
moduleNameHref,
2526
showHeader = true,
@@ -37,7 +38,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
3738
restApi.setApiNonce( apiNonce );
3839
}, [ apiRoot, apiNonce ] );
3940

40-
const rootClassName = clsx( styles[ 'admin-page' ], {
41+
const rootClassName = clsx( styles[ 'admin-page' ], className, {
4142
[ styles.background ]: showBackground,
4243
} );
4344

‎projects/js-packages/components/components/admin-page/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,9 @@ export type AdminPageProps = {
6565
* Optional menu items to be displayed
6666
*/
6767
optionalMenuItems?: JetpackFooterMenuItem[];
68+
69+
/**
70+
* Class name to be applied to the root element of the component.
71+
*/
72+
className?: string;
6873
};

projects/packages/my-jetpack/_inc/components/jetpack-manage-banner/jetpack-manage.svg renamed to projects/packages/my-jetpack/_inc/components/a4a-banner/icon.svg

File renamed without changes.

projects/packages/my-jetpack/_inc/components/jetpack-manage-banner/index.jsx renamed to projects/packages/my-jetpack/_inc/components/a4a-banner/index.jsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import { UpsellBanner, getRedirectUrl } from '@automattic/jetpack-components';
22
import { __ } from '@wordpress/i18n';
33
import React, { useCallback, useEffect } from 'react';
44
import useAnalytics from '../../hooks/use-analytics';
5-
import jetpackManageIcon from './jetpack-manage.svg';
5+
import icon from './icon.svg';
66

77
/**
8-
* Jetpack Manager Banner component that renders a banner with CTAs.
8+
* Automattic for Agencies Banner component that renders a banner with CTAs.
99
*
1010
* @param {object} props - Component props.
1111
* @param {boolean} props.isAgencyAccount - Whether users account is an Agency account or not.
12-
* @return {object} The JetpackManageBanner component.
12+
* @return {object} The rendered component.
1313
*/
14-
const JetpackManageBanner = props => {
14+
const A4ABanner = props => {
1515
const { isAgencyAccount = false } = props;
1616
const { recordEvent } = useAnalytics();
1717

@@ -42,10 +42,10 @@ const JetpackManageBanner = props => {
4242

4343
return (
4444
<UpsellBanner
45-
icon={ jetpackManageIcon }
46-
title={ __( 'Manage client sites and grow your business', 'jetpack-my-jetpack' ) }
45+
icon={ icon }
46+
title={ __( 'Are you an agency or freelancer?', 'jetpack-my-jetpack' ) }
4747
description={ __(
48-
'Are you an agency or freelancer? We’re working on a new partnership program bringing together the best of Jetpack, Woo, WordPress.com, and Pressable. Get bulk discounts, referral commissions, and more.',
48+
'Automattic for Agencies is the ultimate partnership to access agency pricing, referral earnings, partner badges, and powerful tooling for agencies using WordPress.com, Pressable, WooCommerce, Jetpack, and more. Joining is free.',
4949
'jetpack-my-jetpack'
5050
) }
5151
primaryCtaLabel={ __( 'Sign up now', 'jetpack-my-jetpack' ) }
@@ -56,4 +56,4 @@ const JetpackManageBanner = props => {
5656
);
5757
};
5858

59-
export default JetpackManageBanner;
59+
export default A4ABanner;

‎projects/packages/my-jetpack/_inc/components/connection-status-card/connection-issue-tooltip.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { __ } from '@wordpress/i18n';
2+
import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
3+
import { InfoTooltip } from '../info-tooltip';
4+
5+
interface AccountError {
6+
type: string;
7+
message: string;
8+
details?: Record< string, unknown >;
9+
}
10+
11+
/**
12+
* Tooltip that displays possible account errors for the current user.
13+
*
14+
* @return The tooltip component
15+
*/
16+
export function ConnectionIssueTooltip() {
17+
const { userConnectionData } = useMyJetpackConnection();
18+
19+
return (
20+
userConnectionData.currentUser?.possibleAccountErrors &&
21+
Object.keys( userConnectionData.currentUser.possibleAccountErrors ).length > 0 && (
22+
<span style={ { display: 'inline-flex', verticalAlign: 'middle' } }>
23+
<InfoTooltip
24+
tracksEventName="my_jetpack_account_error_tooltip_open"
25+
tracksEventProps={ {
26+
location: 'connection_status_card',
27+
context: 'non_owner',
28+
error_types: Object.keys( userConnectionData.currentUser.possibleAccountErrors ).join(
29+
','
30+
),
31+
} }
32+
iconSize={ 16 }
33+
className="account-error-tooltip"
34+
>
35+
<div>
36+
{ Object.values( userConnectionData.currentUser.possibleAccountErrors ).map(
37+
( error: AccountError, index ) => (
38+
<p key={ `error-${ index }` } style={ { marginBottom: '1em' } }>
39+
{ error.message ||
40+
__(
41+
'We noticed a possible issue with your account connection that might lead to connection issues.',
42+
'jetpack-my-jetpack'
43+
) }
44+
</p>
45+
)
46+
) }
47+
</div>
48+
</InfoTooltip>
49+
</span>
50+
)
51+
);
52+
}

‎projects/packages/my-jetpack/_inc/components/connection-status-card/connection-owner-info.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { __, sprintf } from '@wordpress/i18n';
2+
import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
3+
import { ConnectionIssueTooltip } from './connection-issue-tooltip';
4+
5+
/**
6+
* Component to display the connection owner information.
7+
*
8+
* @return The connection owner information or null if not applicable.
9+
*/
10+
export function ConnectionOwnerInfo() {
11+
const { userConnectionData, isUserConnected, hasConnectedOwner } = useMyJetpackConnection();
12+
13+
if ( ! isUserConnected && ! hasConnectedOwner ) {
14+
return null;
15+
}
16+
17+
const displayName = userConnectionData.currentUser?.wpcomUser?.display_name || '';
18+
const email = userConnectionData.currentUser?.wpcomUser?.email || '';
19+
const isOwner = userConnectionData.currentUser?.isMaster;
20+
21+
return (
22+
<ul>
23+
{ isUserConnected ? (
24+
<li>
25+
{ isOwner ? (
26+
<>
27+
{ displayName
28+
? sprintf(
29+
/* translators: 1 is user name, 2 is email address */
30+
__( 'Connected as owner: %1$s (%2$s)', 'jetpack-my-jetpack' ),
31+
displayName,
32+
email
33+
)
34+
: __( 'User connected (Owner).', 'jetpack-my-jetpack' ) }
35+
</>
36+
) : (
37+
<>
38+
{ displayName
39+
? sprintf(
40+
/* translators: 1 is user name, 2 is email address */
41+
__( 'Connected as %1$s (%2$s)', 'jetpack-my-jetpack' ),
42+
displayName,
43+
email
44+
)
45+
: __( 'User connected.', 'jetpack-my-jetpack' ) }
46+
</>
47+
) }
48+
<ConnectionIssueTooltip />
49+
</li>
50+
) : null }
51+
{ ! isOwner && userConnectionData?.connectionOwner ? (
52+
<li>
53+
{ sprintf(
54+
/* translators: placeholder is the username of the Jetpack connection owner */
55+
__( 'Also connected: %s (Owner).', 'jetpack-my-jetpack' ),
56+
userConnectionData.connectionOwner
57+
) }
58+
</li>
59+
) : null }
60+
</ul>
61+
);
62+
}

0 commit comments

Comments
 (0)