From 287fe558bd1792e87c2b80803714288632bc6078 Mon Sep 17 00:00:00 2001
From: Madhu Dollu <madhusudhan.dollu@gmail.com>
Date: Wed, 11 Dec 2024 12:31:49 +0530
Subject: [PATCH] Move big sky button from nav-container to filters container
 (#97165)

* Move big buttons from nav-container to setup-container

* update big sky button layout for the new designs

* send impression event only when button is visible

* adjusted the button size and alignment

* minor improvements

* fix merge conflict issues
---
 .../steps-repository/design-setup/style.scss  | 26 +++++--
 .../design-setup/unified-design-picker.tsx    | 69 +++++++++----------
 .../design-picker/src/components/style.scss   | 25 +++++--
 .../src/components/unified-design-picker.tsx  | 34 +++++++--
 4 files changed, 98 insertions(+), 56 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss
index 2fc1dc851e6e8..3bd9437d5b460 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss
@@ -6,20 +6,32 @@
 $gray-100: #101517;
 $gray-60: #50575e;
 $design-button-primary-color: rgb(17, 122, 201);
+$container-padding-small: 20px;
+$container-padding-large: 48px;
 
 .design-setup {
 	.step-container {
-		padding-inline-start: 20px;
-		padding-inline-end: 20px;
+		padding-inline-start: $container-padding-small;
+		padding-inline-end: $container-padding-small;
 		max-width: 1440px;
 
-		.step-container__content {
-			margin-top: 32px;
+		@include break-small {
+			padding-inline-start: $container-padding-large;
+			padding-inline-end: $container-padding-large;
 		}
 
-		@include break-small {
-			padding-inline-start: 48px;
-			padding-inline-end: 48px;
+		.setup-container__big-sky-container {
+			position: absolute;
+			top: $container-padding-small;
+			right: $container-padding-small;
+
+			@include break-small {
+				display: none;
+			}
+		}
+
+		.step-container__content {
+			margin-top: 32px;
 		}
 	}
 
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
index f6fcb5ab2f0a1..c42958e4a4c7e 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
@@ -926,44 +926,14 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 		categorization.selections = [ 'blog' ];
 	}
 
-	const stepContent = (
-		<UnifiedDesignPicker
-			designs={ designs }
-			locale={ locale }
-			onPreview={ previewDesign }
-			onChangeVariation={ onChangeVariation }
-			onViewAllDesigns={ trackAllDesignsView }
-			heading={ heading }
-			categorization={ categorization }
-			isPremiumThemeAvailable={ isPremiumThemeAvailable }
-			shouldLimitGlobalStyles={ shouldLimitGlobalStyles }
-			getBadge={ getBadge }
-			oldHighResImageLoading={ oldHighResImageLoading }
-			siteActiveTheme={ siteActiveTheme?.[ 0 ]?.stylesheet ?? null }
-			showActiveThemeBadge={ intent !== 'build' }
-			isTierFilterEnabled={ isGoalCentricFeature }
-			isMultiFilterEnabled={ isGoalCentricFeature }
-			onChangeTier={ handleChangeTier }
-		/>
-	);
+	function onDesignWithAI() {
+		recordTracksEvent( 'calypso_design_picker_big_sky_button_click', commonFilterProperties );
+		navigate( `/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site?.ID }` );
+	}
 
-	const bigSkyButtons = (
+	const bigSkyButton = isBigSkyEligible && (
 		<>
-			{ isBigSkyEligible && (
-				<Button
-					onClick={ () => {
-						navigate(
-							`/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site.ID }`
-						);
-						recordTracksEvent(
-							'calypso_design_picker_big_sky_button_click',
-							commonFilterProperties
-						);
-					} }
-				>
-					{ translate( 'Create yours with AI' ) }
-				</Button>
-			) }
+			<Button onClick={ onDesignWithAI }>{ translate( 'Design with AI' ) }</Button>
 			<TrackComponentView
 				eventName="calypso_design_picker_big_sky_button_impression"
 				eventProperties={ commonFilterProperties }
@@ -971,6 +941,32 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 		</>
 	);
 
+	const stepContent = (
+		<>
+			<div className="setup-container__big-sky-container">{ bigSkyButton }</div>
+			<UnifiedDesignPicker
+				designs={ designs }
+				locale={ locale }
+				onDesignWithAI={ onDesignWithAI }
+				onPreview={ previewDesign }
+				onChangeVariation={ onChangeVariation }
+				onViewAllDesigns={ trackAllDesignsView }
+				heading={ heading }
+				categorization={ categorization }
+				isPremiumThemeAvailable={ isPremiumThemeAvailable }
+				shouldLimitGlobalStyles={ shouldLimitGlobalStyles }
+				getBadge={ getBadge }
+				oldHighResImageLoading={ oldHighResImageLoading }
+				siteActiveTheme={ siteActiveTheme?.[ 0 ]?.stylesheet ?? null }
+				showActiveThemeBadge={ intent !== 'build' }
+				isTierFilterEnabled={ isGoalCentricFeature }
+				isMultiFilterEnabled={ isGoalCentricFeature }
+				onChangeTier={ handleChangeTier }
+				isBigSkyEligible={ isBigSkyEligible }
+			/>
+		</>
+	);
+
 	return (
 		<StepContainer
 			stepName={ STEP_NAME }
@@ -979,7 +975,6 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 			hideFormattedHeader
 			hideSkip
 			backLabelText={ translate( 'Back' ) }
-			customizedActionButtons={ bigSkyButtons }
 			stepContent={ stepContent }
 			recordTracksEvent={ recordStepContainerTracksEvent }
 			goNext={ handleSubmit }
diff --git a/packages/design-picker/src/components/style.scss b/packages/design-picker/src/components/style.scss
index 290a2568e80e1..d286467e3eeb4 100644
--- a/packages/design-picker/src/components/style.scss
+++ b/packages/design-picker/src/components/style.scss
@@ -41,6 +41,13 @@
 			&.grow {
 				flex-grow: 1;
 			}
+
+			.design-picker__category-group-content {
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+				gap: 8px 16px;
+			}
 		}
 
 		.design-picker__category-group-label {
@@ -49,16 +56,22 @@
 			font-weight: 500;
 		}
 
+		.design-picker__tier-filter {
+			height: 40px; // match button height
+			margin-bottom: 6px;
+		}
+
 		.design-picker__design-your-own-button {
 			flex-shrink: 0;
-			height: 32px;
-			line-height: 14px;
-			margin-top: 8px;
-			margin-bottom: 8px;
+			margin-bottom: 6px;
 		}
 
-		.design-picker__tier-filter {
-			height: 48px; // match button height
+		.design-picker__design-with-ai {
+			display: none;
+			
+			@include break-small {
+				display: block;
+			}
 		}
 
 		.design-picker__design-your-own-button-without-categories {
diff --git a/packages/design-picker/src/components/unified-design-picker.tsx b/packages/design-picker/src/components/unified-design-picker.tsx
index b86345449f082..51ac24779c5a9 100644
--- a/packages/design-picker/src/components/unified-design-picker.tsx
+++ b/packages/design-picker/src/components/unified-design-picker.tsx
@@ -1,4 +1,5 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { Button } from '@automattic/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -184,13 +185,14 @@ const DesignPickerFilterGroup: React.FC< DesignPickerFilterGroupProps > = ( {
 	return (
 		<div className={ clsx( 'design-picker__category-group', { grow } ) }>
 			<div className="design-picker__category-group-label">{ title }</div>
-			{ children }
+			<div className="design-picker__category-group-content">{ children }</div>
 		</div>
 	);
 };
 
 interface DesignPickerProps {
 	locale: string;
+	onDesignWithAI?: () => void;
 	onPreview: ( design: Design, variation?: StyleVariation ) => void;
 	onChangeVariation: ( design: Design, variation?: StyleVariation ) => void;
 	designs: Design[];
@@ -204,10 +206,12 @@ interface DesignPickerProps {
 	isTierFilterEnabled?: boolean;
 	isMultiFilterEnabled?: boolean;
 	onChangeTier?: ( value: boolean ) => void;
+	isBigSkyEligible?: boolean;
 }
 
 const DesignPicker: React.FC< DesignPickerProps > = ( {
 	locale,
+	onDesignWithAI,
 	onPreview,
 	onChangeVariation,
 	designs,
@@ -221,6 +225,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 	isTierFilterEnabled = false,
 	isMultiFilterEnabled = false,
 	onChangeTier,
+	isBigSkyEligible = false,
 } ) => {
 	const filteredDesigns = useFilteredDesigns( designs );
 	const categoryTypes = useMemo(
@@ -261,11 +266,22 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 						/>
 					</DesignPickerFilterGroup>
 				) }
-				{ isTierFilterEnabled && (
-					<DesignPickerFilterGroup>
-						<DesignPickerTierFilter onChange={ onChangeTier } />
-					</DesignPickerFilterGroup>
-				) }
+				<DesignPickerFilterGroup>
+					{ isTierFilterEnabled && <DesignPickerTierFilter onChange={ onChangeTier } /> }
+					{ isBigSkyEligible && (
+						<Button
+							className={ clsx(
+								'design-picker__design-your-own-button',
+								'design-picker__design-with-ai'
+							) }
+							onClick={ () => {
+								onDesignWithAI && onDesignWithAI();
+							} }
+						>
+							{ translate( 'Design with AI' ) }
+						</Button>
+					) }
+				</DesignPickerFilterGroup>
 			</div>
 
 			<div className="design-picker__grid">
@@ -294,6 +310,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 
 export interface UnifiedDesignPickerProps {
 	locale: string;
+	onDesignWithAI?: () => void;
 	onPreview: ( design: Design, variation?: StyleVariation ) => void;
 	onChangeVariation: ( design: Design, variation?: StyleVariation ) => void;
 	onViewAllDesigns: () => void;
@@ -309,10 +326,12 @@ export interface UnifiedDesignPickerProps {
 	isTierFilterEnabled?: boolean;
 	isMultiFilterEnabled?: boolean;
 	onChangeTier?: ( value: boolean ) => void;
+	isBigSkyEligible?: boolean;
 }
 
 const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 	locale,
+	onDesignWithAI,
 	onPreview,
 	onChangeVariation,
 	onViewAllDesigns,
@@ -328,6 +347,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 	isTierFilterEnabled = false,
 	isMultiFilterEnabled = false,
 	onChangeTier,
+	isBigSkyEligible = false,
 } ) => {
 	const hasCategories = !! Object.keys( categorization?.categories || {} ).length;
 
@@ -351,6 +371,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 			<div className="unified-design-picker__designs">
 				<DesignPicker
 					locale={ locale }
+					onDesignWithAI={ onDesignWithAI }
 					onPreview={ onPreview }
 					onChangeVariation={ onChangeVariation }
 					designs={ designs }
@@ -364,6 +385,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 					isTierFilterEnabled={ isTierFilterEnabled }
 					isMultiFilterEnabled={ isMultiFilterEnabled }
 					onChangeTier={ onChangeTier }
+					isBigSkyEligible={ isBigSkyEligible }
 				/>
 				{ bottomAnchorContent }
 			</div>