From 701a5cbb6092899cadccc14a7ea00856d2bb66d1 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Tue, 13 Aug 2024 11:49:07 +0800
Subject: [PATCH] Update Continue button container on core profiler extension
 screen (#50582)

* Update core profiler continue button container

On desktop screens 900px and smaller, add a 140px tall container stuck to the bottom of the viewport
Add a transparent to solid white gradient to the container (top to bottom)
Vertically center align the continue button and dislaimer text inside the container

* Add docs

* Update style
---
 .../client/core-profiler/pages/Plugins.tsx    | 88 ++++++++++---------
 .../client/core-profiler/style.scss           | 14 +++
 ...pdate-core-profiler-sticky-continue-button |  4 +
 3 files changed, 63 insertions(+), 43 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/update-core-profiler-sticky-continue-button

diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
index 6b746072925..f3c50c28bc3 100644
--- a/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
@@ -219,51 +219,53 @@ export const Plugins = ( {
 						);
 					} ) }
 				</div>
-				<div className="woocommerce-profiler-plugins-continue-button-container">
-					<Button
-						className="woocommerce-profiler-plugins-continue-button"
-						variant="primary"
-						onClick={
-							selectedPlugins.length
-								? submitInstallationRequest
-								: skipPluginsPage
-						}
-					>
-						{ __( 'Continue', 'woocommerce' ) }
-					</Button>
-				</div>
-				{ pluginsWithAgreement.length > 0 && (
-					<p className="woocommerce-profiler-plugins-jetpack-agreement">
-						{ interpolateComponents( {
-							mixedString: sprintf(
-								/* translators: %s: a list of plugins, e.g. Jetpack */
-								_n(
-									'By installing %s plugin for free you agree to our {{link}}Terms of Service{{/link}}.',
-									'By installing %s plugins for free you agree to our {{link}}Terms of Service{{/link}}.',
-									pluginsWithAgreement.length,
-									'woocommerce'
-								),
-								joinWithAnd(
-									pluginsWithAgreement.map(
-										( plugin ) => plugin.name
+				<div className="woocommerce-profiler-plugins__footer">
+					<div className="woocommerce-profiler-plugins-continue-button-container">
+						<Button
+							className="woocommerce-profiler-plugins-continue-button"
+							variant="primary"
+							onClick={
+								selectedPlugins.length
+									? submitInstallationRequest
+									: skipPluginsPage
+							}
+						>
+							{ __( 'Continue', 'woocommerce' ) }
+						</Button>
+					</div>
+					{ pluginsWithAgreement.length > 0 && (
+						<p className="woocommerce-profiler-plugins-jetpack-agreement">
+							{ interpolateComponents( {
+								mixedString: sprintf(
+									/* translators: %s: a list of plugins, e.g. Jetpack */
+									_n(
+										'By installing %s plugin for free you agree to our {{link}}Terms of Service{{/link}}.',
+										'By installing %s plugins for free you agree to our {{link}}Terms of Service{{/link}}.',
+										pluginsWithAgreement.length,
+										'woocommerce'
+									),
+									joinWithAnd(
+										pluginsWithAgreement.map(
+											( plugin ) => plugin.name
+										)
 									)
-								)
-									.map( composeListFormatParts )
-									.join( '' )
-							),
-							components: {
-								span: <span />,
-								link: (
-									<Link
-										href="https://wordpress.com/tos/"
-										target="_blank"
-										type="external"
-									/>
+										.map( composeListFormatParts )
+										.join( '' )
 								),
-							},
-						} ) }
-					</p>
-				) }
+								components: {
+									span: <span />,
+									link: (
+										<Link
+											href="https://wordpress.com/tos/"
+											target="_blank"
+											type="external"
+										/>
+									),
+								},
+							} ) }
+						</p>
+					) }
+				</div>
 			</div>
 		</div>
 	);
diff --git a/plugins/woocommerce-admin/client/core-profiler/style.scss b/plugins/woocommerce-admin/client/core-profiler/style.scss
index 222f4587aae..1378c8b90d7 100644
--- a/plugins/woocommerce-admin/client/core-profiler/style.scss
+++ b/plugins/woocommerce-admin/client/core-profiler/style.scss
@@ -386,6 +386,20 @@
 		}
 	}
 
+	.woocommerce-profiler-plugins__footer {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		@media screen and ( max-height: 900px ) {
+			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 44.69%);
+			height: 140px;
+			position: fixed;
+			bottom: 0;
+		}
+	}
+
 	.woocommerce-profiler-plugins-continue-button-container {
 		@include breakpoint("<782px") {
 			width: 100%;
diff --git a/plugins/woocommerce/changelog/update-core-profiler-sticky-continue-button b/plugins/woocommerce/changelog/update-core-profiler-sticky-continue-button
new file mode 100644
index 00000000000..25528ca7f07
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-core-profiler-sticky-continue-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update core profiler continue button container on extension screen