Merge remote-tracking branch 'origin/trunk' into add/ab-experiment-we…

…lcome-flow

projects/js-packages/ai-client/changelog/update-ai-logo-generator-fix-upgrade-message

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AI Logo Generator: update upgrade message.

projects/js-packages/ai-client/changelog/update-ai-logo-generator-small-ui-fixes

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AI Logo Generator: fix small UI issues.

projects/js-packages/ai-client/src/logo-generator/components/feature-fetch-failure-screen.tsx

@@ -13,7 +13,7 @@ export const FeatureFetchFailureScreen: React.FC< {
 	onRetry: () => void;
 } > = ( { onCancel, onRetry } ) => {
 	const errorMessage = __(
-		'We are sorry. There was an error loading your Jetpack AI account settings. Please, try again.',
+		'We are sorry. There was an error loading your Jetpack AI plan data. Please, try again.',
 		'jetpack-ai-client'
 	);
 

projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx

@@ -235,7 +235,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				/>
 				{ logoAccepted ? (
 					<div className="jetpack-ai-logo-generator__accept">
-						<VisitSiteBanner onVisitBlankTarget={ closeModal } />
+						<VisitSiteBanner />
 						<div className="jetpack-ai-logo-generator__accept-actions">
 							<Button variant="primary" onClick={ closeModal }>
 								{ __( 'Close', 'jetpack-ai-client' ) }

projects/js-packages/ai-client/src/logo-generator/components/upgrade-screen.tsx

@@ -22,7 +22,7 @@ export const UpgradeScreen: React.FC< {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const upgradeMessageFeature = __(
-		'Upgrade your Jetpack AI for access to exclusive features, including logo generation. This upgrade will also increase the amount of requests you can use in all AI-powered features.',
+		'The logo generator requires a paid Jetpack AI plan. Upgrade your plan to access exclusive features, including logo generation. The upgrade will also increase the amount of requests you can use in all AI-powered features.',
 		'jetpack-ai-client'
 	);
 

projects/js-packages/ai-client/src/logo-generator/components/visit-site-banner.tsx

@@ -17,7 +17,7 @@ import type React from 'react';
 
 export const VisitSiteBanner: React.FC< {
 	className?: string;
-	onVisitBlankTarget: () => void;
+	onVisitBlankTarget?: () => void;
 } > = ( { className = null, onVisitBlankTarget } ) => {
 	return (
 		<div className={ clsx( 'jetpack-ai-logo-generator-modal-visit-site-banner', className ) }>
@@ -42,7 +42,7 @@ export const VisitSiteBanner: React.FC< {
 						variant="link"
 						href="https://jetpack.com/redirect/?source=logo_generator_learn_more_about_jetpack_ai"
 						target="_blank"
-						onClick={ onVisitBlankTarget }
+						onClick={ onVisitBlankTarget ? onVisitBlankTarget : null }
 					>
 						{ __( 'Learn more about Jetpack AI', 'jetpack-ai-client' ) }
 						<Icon icon={ external } size={ 20 } />

projects/js-packages/components/changelog/add-preview-section-to-the-social-post-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed TS types for Notice components by marking optional props as such

projects/js-packages/components/components/notice/index.tsx

@@ -5,10 +5,10 @@ import styles from './style.module.scss';
 
 type NoticeProps = {
 	/** The severity of the alert. */
-	level: 'error' | 'warning' | 'info' | 'success';
+	level?: 'error' | 'warning' | 'info' | 'success';
 
 	/** The title of the notice */
-	title: string;
+	title?: string;
 
 	/** A list of action elements to show across the bottom */
 	actions?: React.ReactNode[];

projects/js-packages/components/package.json

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

projects/js-packages/publicize-components/changelog/add-connection-toggle-to-the-social-post-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added connection toggle to social post preview

projects/js-packages/publicize-components/changelog/add-preview-section-to-the-social-post-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added preview section to the social post modal

projects/js-packages/publicize-components/changelog/add-settings-section-to-social-post-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Social: Added settings section to the social post modal

projects/js-packages/publicize-components/changelog/add-social-feature-flag-management-fixed

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added feature flag management for social

projects/js-packages/publicize-components/changelog/add-social-post-ui-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added Social post UI modal and trigger

projects/js-packages/publicize-components/changelog/fix-no-media-notice-for-instagram-when-sig-is-on

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix the media validation notice for Instagram when SIG is enabled

projects/js-packages/publicize-components/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.58.0",
+	"version": "0.59.0-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

projects/js-packages/publicize-components/src/components/connection-management/index.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal';
-import { SupportedService, useSupportedServices } from '../services/use-supported-services';
+import { useService } from '../services/use-service';
 import { ConnectionInfo } from './connection-info';
 import styles from './style.module.scss';
 
@@ -35,14 +35,7 @@ const ConnectionManagement = ( { className = null } ) => {
 		refresh();
 	}, [ refresh ] );
 
-	const supportedServices = useSupportedServices();
-	const servicesByName = supportedServices.reduce< Record< string, SupportedService > >(
-		( acc, service ) => {
-			acc[ service.ID ] = service;
-			return acc;
-		},
-		{}
-	);
+	const getService = useService();
 
 	const { openConnectionsModal } = useDispatch( store );
 
@@ -62,7 +55,7 @@ const ConnectionManagement = ( { className = null } ) => {
 									<Disabled isDisabled={ isUpdatingOrDeleting }>
 										<ConnectionInfo
 											connection={ connection }
-											service={ servicesByName[ connection.service_name ] }
+											service={ getService( connection.service_name ) }
 										/>
 									</Disabled>
 								</li>

projects/js-packages/publicize-components/src/components/form/index.tsx

@@ -14,6 +14,7 @@ import { usePublicizeConfig } from '../../..';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store as socialStore } from '../../social-store';
 import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal';
+import { SocialPostModal } from '../social-post-modal/modal';
 import { AdvancedPlanNudge } from './advanced-plan-nudge';
 import { BrokenConnectionsNotice } from './broken-connections-notice';
 import { ConnectionsList } from './connections-list';
@@ -38,10 +39,11 @@ export default function PublicizeForm() {
 		userConnectionUrl,
 	} = usePublicizeConfig();
 
-	const { useAdminUiV1 } = useSelect( select => {
+	const { useAdminUiV1, featureFlags } = useSelect( select => {
 		const store = select( socialStore );
 		return {
 			useAdminUiV1: store.useAdminUiV1(),
+			featureFlags: store.featureFlags(),
 		};
 	}, [] );
 
@@ -58,6 +60,7 @@ export default function PublicizeForm() {
 					<PanelRow>
 						<ConnectionsList />
 					</PanelRow>
+					{ featureFlags.useEditorPreview ? <SocialPostModal /> : null }
 					<ShareCountInfo />
 					<BrokenConnectionsNotice />
 					<UnsupportedConnectionsNotice />

projects/js-packages/publicize-components/src/components/media-section/index.js

@@ -72,7 +72,10 @@ export default function MediaSection( {
 						mediaDetails={ mediaDetails }
 						onChange={ onChange }
 					/>
-					<ExternalLink href={ getRedirectUrl( 'jetpack-social-media-support-information' ) }>
+					<ExternalLink
+						href={ getRedirectUrl( 'jetpack-social-media-support-information' ) }
+						className={ styles[ 'learn-more' ] }
+					>
 						{ __( 'Learn photo and video best practices', 'jetpack' ) }
 					</ExternalLink>
 				</MediaWrapper>

projects/js-packages/publicize-components/src/components/media-section/styles.module.scss

@@ -31,3 +31,13 @@
 		margin: 0 0 4px;
 	}
 }
+
+.subtitle {
+	color: var(--jp-gray-40);
+	margin-top: 0;
+}
+
+.learn-more {
+	display: block;
+	margin-top: 1rem;
+}

projects/js-packages/publicize-components/src/components/services/use-service-label.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { SupportedService, useSupportedServices } from './use-supported-services';
+import { useService } from './use-service';
 
 interface GetServiceLabel {
 	/**
@@ -14,27 +14,19 @@ interface GetServiceLabel {
  * @returns {GetServiceLabel} - The service label.
  */
 export function useServiceLabel() {
-	const supportedServices = useSupportedServices();
-
-	const servicesMap = supportedServices.reduce< Record< string, SupportedService > >(
-		( acc, service ) => {
-			acc[ service.ID ] = service;
-			return acc;
-		},
-		{}
-	);
+	const getService = useService();
 
 	return useCallback< GetServiceLabel >(
 		service_name => {
 			const serviceLabel =
 				// For Jetpack sites, we should have the service in the map
 				// But for WPCOM sites, we might not have the service in the map yet
-				servicesMap[ service_name ]?.label ||
+				getService( service_name )?.label ||
 				// So we capitalize the service name
 				service_name[ 0 ].toUpperCase() + service_name.substring( 1 );
 
 			return serviceLabel;
 		},
-		[ servicesMap ]
+		[ getService ]
 	);
 }

projects/js-packages/publicize-components/src/components/services/use-service.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo } from 'react';
+import { SupportedService, useSupportedServices } from './use-supported-services';
+
+export interface GetService {
+	/**
+	 * @param {string} service_name - The name of the service.
+	 */
+	( service_name: string ): SupportedService;
+}
+
+export type SupportedServicesMap = Record< string, SupportedService >;
+
+/**
+ * Returns the service object for a service name.
+ *
+ * @returns {GetService} - The service object.
+ */
+export function useService() {
+	const supportedServices = useSupportedServices();
+
+	const servicesMap = useMemo( () => {
+		return supportedServices.reduce< SupportedServicesMap >( ( acc, service ) => {
+			acc[ service.ID ] = service;
+			return acc;
+		}, {} );
+	}, [ supportedServices ] );
+
+	return useCallback< GetService >(
+		service_name => {
+			return servicesMap[ service_name ];
+		},
+		[ servicesMap ]
+	);
+}

projects/js-packages/publicize-components/src/components/social-post-modal/instagram-media-notice.tsx

@@ -0,0 +1,35 @@
+import { Notice, getRedirectUrl } from '@automattic/jetpack-components';
+import { ExternalLink } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import usePublicizeConfig from '../../hooks/use-publicize-config';
+
+/**
+ * Instagram media notice component.
+ *
+ * @returns {import('react').ReactNode} - Instagram media notice component.
+ */
+export function InstagramMediaNotice() {
+	const { isEnhancedPublishingEnabled } = usePublicizeConfig();
+
+	return (
+		<Notice
+			hideCloseButton
+			actions={ [
+				<ExternalLink href={ getRedirectUrl( 'jetpack-social-share-to-instagram' ) }>
+					{ __( 'Learn more', 'jetpack' ) }
+				</ExternalLink>,
+			] }
+		>
+			{ isEnhancedPublishingEnabled
+				? __(
+						'To share to Instagram, add an image/video, or enable Social Image Generator.',
+						'jetpack'
+				  )
+				: _x(
+						'You need a featured image to share to Instagram.',
+						'The message shown in the Instagram social preview',
+						'jetpack'
+				  ) }
+		</Notice>
+	);
+}

projects/js-packages/publicize-components/src/components/social-post-modal/modal.tsx

@@ -0,0 +1,43 @@
+import { Modal, PanelRow, Button } from '@wordpress/components';
+import { useReducer } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import { PreviewSection } from './preview-section';
+import { SettingsSection } from './settings-section';
+import styles from './styles.module.scss';
+
+/**
+ * The Social Post Modal component.
+ *
+ * @returns {import('react').ReactNode} - Social Post Modal component.
+ */
+export function SocialPostModal() {
+	const [ isModalOpen, toggleModal ] = useReducer( state => ! state, false );
+
+	return (
+		<PanelRow className={ styles.panel }>
+			{ isModalOpen && (
+				<Modal
+					onRequestClose={ toggleModal }
+					title={ __( 'Social Previews', 'jetpack' ) }
+					className={ styles.modal }
+					__experimentalHideHeader
+				>
+					<div className={ styles[ 'modal-content' ] }>
+						<SettingsSection />
+						<PreviewSection />
+					</div>
+					<Button
+						className={ styles[ 'close-button' ] }
+						onClick={ toggleModal }
+						icon={ close }
+						label={ __( 'Close', 'jetpack' ) }
+					/>
+				</Modal>
+			) }
+			<Button variant="secondary" onClick={ toggleModal }>
+				{ __( 'Preview social posts', 'jetpack' ) }
+			</Button>
+		</PanelRow>
+	);
+}