[11333] Update the splash screen's layout

assets/js/components/setup/SetupUsingProxyWithSignIn/LegacySplashContent.js

@@ -0,0 +1,158 @@
+/**
+ * LegacySplashContent component.
+ *
+ * Site Kit by Google, Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ActivateAnalyticsNotice from '@/js/components/setup/ActivateAnalyticsNotice';
+import CompatibilityChecks from '@/js/components/setup/CompatibilityChecks';
+import Link from '@/js/components/Link';
+import P from '@/js/components/Typography/P';
+import SetupFlowSVG from './SetupFlowSVG';
+import Typography from '@/js/components/Typography';
+import { Cell, Row } from '@/js/material-components';
+import { DISCONNECTED_REASON_CONNECTED_URL_MISMATCH } from '@/js/googlesitekit/datastore/user/constants';
+
+export default function LegacySplashContent( {
+	analyticsModuleActive,
+	analyticsModuleAvailable,
+	children,
+	connectedProxyURL,
+	description,
+	disconnectedReason,
+	getHelpURL,
+	homeURL,
+	secondAdminLearnMoreLink,
+	title,
+} ) {
+	const showLearnMoreLink = false;
+
+	const cellDetailsProp = analyticsModuleActive
+		? { smSize: 4, mdSize: 8, lgSize: 6 }
+		: { smSize: 4, mdSize: 8, lgSize: 8 };
+
+	return (
+		<Row className="googlesitekit-setup__content">
+			<Cell
+				smSize={ 4 }
+				mdSize={ 8 }
+				lgSize={ ! analyticsModuleActive ? 4 : 6 }
+				className="googlesitekit-setup__icon"
+			>
+				{ analyticsModuleActive && (
+					<SetupFlowSVG name="welcome" width="570" height="336" />
+				) }
+				{ ! analyticsModuleActive && (
+					<SetupFlowSVG
+						name="welcome-analytics"
+						height="167"
+						width="175"
+					/>
+				) }
+			</Cell>
+
+			<Cell { ...cellDetailsProp }>
+				<Typography
+					as="h1"
+					className="googlesitekit-setup__title"
+					size="large"
+					type="headline"
+				>
+					{ title }
+				</Typography>
+
+				<p className="googlesitekit-setup__description">
+					{ ! showLearnMoreLink && description }
+
+					{ showLearnMoreLink &&
+						createInterpolateElement(
+							sprintf(
+								/* translators: 1: The description. 2: The learn more link. */
+								__(
+									'%1$s <Link>%2$s</Link>',
+									'google-site-kit'
+								),
+								description,
+								__( 'Learn more', 'google-site-kit' )
+							),
+							{
+								Link: (
+									<Link
+										href={ secondAdminLearnMoreLink }
+										external
+									/>
+								),
+							}
+						) }
+				</p>
+				{ getHelpURL && (
+					<Link href={ getHelpURL } external>
+						{ __( 'Get help', 'google-site-kit' ) }
+					</Link>
+				) }
+				{ DISCONNECTED_REASON_CONNECTED_URL_MISMATCH ===
+					disconnectedReason &&
+					connectedProxyURL !== homeURL && (
+						<P>
+							{ sprintf(
+								/* translators: %s: Previous Connected Proxy URL */
+								__( '— Old URL: %s', 'google-site-kit' ),
+								connectedProxyURL
+							) }
+							<br />
+							{ sprintf(
+								/* translators: %s: Connected Proxy URL */
+								__( '— New URL: %s', 'google-site-kit' ),
+								homeURL
+							) }
+						</P>
+					) }
+
+				{ analyticsModuleAvailable && ! analyticsModuleActive && (
+					<ActivateAnalyticsNotice />
+				) }
+
+				<CompatibilityChecks>{ children }</CompatibilityChecks>
+			</Cell>
+		</Row>
+	);
+}
+
+LegacySplashContent.propTypes = {
+	analyticsModuleActive: PropTypes.bool,
+	analyticsModuleAvailable: PropTypes.bool,
+	children: PropTypes.func,
+	connectedProxyURL: PropTypes.string,
+	description: PropTypes.string,
+	disconnectedReason: PropTypes.string,
+	getHelpURL: PropTypes.string,
+	homeURL: PropTypes.string,
+	secondAdminLearnMoreLink: PropTypes.string,
+	title: PropTypes.string.isRequired,
+};

assets/js/components/setup/SetupUsingProxyWithSignIn/SetupFlowSVG.js

@@ -0,0 +1,70 @@
+/**
+ * SetupFlowSVG component.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { lazy, Suspense, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PreviewBlock from '@/js/components/PreviewBlock';
+import MediaErrorHandler from '@/js/components/MediaErrorHandler';
+
+export default function SetupFlowSVG( { name, width, height } ) {
+	const LazySVGComponent = useMemo(
+		() => lazy( () => import( `../../../../svg/graphics/${ name }.svg` ) ),
+		[ name ]
+	);
+
+	if ( ! name ) {
+		return null;
+	}
+
+	return (
+		<Suspense
+			fallback={ <PreviewBlock width={ width } height={ height } /> }
+		>
+			<MediaErrorHandler
+				errorMessage={ __(
+					'Failed to load graphic',
+					'google-site-kit'
+				) }
+			>
+				<LazySVGComponent
+					name={ name }
+					width={ width }
+					height={ height }
+				/>
+			</MediaErrorHandler>
+		</Suspense>
+	);
+}
+
+SetupFlowSVG.propTypes = {
+	name: PropTypes.string.isRequired,
+	width: PropTypes.string,
+	height: PropTypes.string,
+};