Remove flow dependent logic outside of the design-carousel component (A…

…utomattic#77120)
sirino · May 19, 2023 · b581edb · b581edb
1 parent 714d18c
commit b581edb
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 108 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-carousel/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/design-carousel/index.tsx
@@ -1,18 +1,100 @@
 import { Design } from '@automattic/design-picker';
-import { StepContainer } from '@automattic/onboarding';
+import { useLocale } from '@automattic/i18n-utils';
+import { ECOMMERCE_FLOW, StepContainer, isLinkInBioFlow } from '@automattic/onboarding';
+import { useMediaQuery } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { useI18n } from '@wordpress/react-i18n';
+import { StarterDesigns, useStarterDesignsQuery } from 'calypso/../packages/data-stores/src';
 import AsyncLoad from 'calypso/components/async-load';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import type { Step } from '../../types';
 import './style.scss';
 
+const shouldOnlyDisplayMobileCarousel = ( flow: string | null | undefined ) => {
+	switch ( true ) {
+		case isLinkInBioFlow( flow ):
+			return true;
+		default:
+			return false;
+	}
+};
+
+const getEcommerceDesigns = ( allDesigns: StarterDesigns ) => {
+	let selectedDesigns = allDesigns?.designs;
+	const selectedDesignSlugs = [ 'tsubaki', 'amulet', 'tazza', 'zaino', 'thriving-artist' ];
+
+	// If we have a restricted set of designs, filter out all unwanted designs
+	const filteredDesigns = selectedDesigns.filter( ( design ) =>
+		selectedDesignSlugs.includes( design.slug )
+	);
+
+	// Now order the filtered set based on the supplied slugs.
+	selectedDesigns = selectedDesignSlugs
+		.map( ( selectedDesignSlug ) =>
+			filteredDesigns.find( ( design ) => design.slug === selectedDesignSlug )
+		)
+		.filter( ( selectedDesign ) => !! selectedDesign ) as Design[];
+
+	return selectedDesigns;
+};
+
+const getLinkInBioDesigns = ( allDesigns: StarterDesigns ) => {
+	const designs =
+		allDesigns?.designs.filter(
+			( design ) =>
+				design.is_virtual &&
+				design.categories.some( ( category ) => category.slug === 'link-in-bio' )
+		) ?? [];
+
+	return designs;
+};
+
+const getCarouselDesktopOptions = (
+	flow: string | null | undefined,
+	isLargerThan1440px: boolean
+) => {
+	switch ( true ) {
+		case flow === ECOMMERCE_FLOW:
+			return {
+				w: isLargerThan1440px ? 1920 : 1280,
+				vpw: 1920,
+				vph: 1280,
+				format: 'png',
+			};
+		default:
+			return;
+	}
+};
+
+const getFlowDesigns = (
+	allDesigns: StarterDesigns | undefined,
+	flow: string | null | undefined
+) => {
+	if ( ! allDesigns ) {
+		return null;
+	}
+
+	switch ( true ) {
+		case isLinkInBioFlow( flow ):
+			return getLinkInBioDesigns( allDesigns );
+		case flow === ECOMMERCE_FLOW:
+			return getEcommerceDesigns( allDesigns );
+		default:
+			return allDesigns?.designs;
+	}
+};
+
 const DesignCarousel: Step = function DesignCarousel( { navigation, flow } ) {
 	const { goNext, goBack, submit } = navigation;
 	const { __ } = useI18n();
+	const locale = useLocale();
 	const { setSelectedDesign } = useDispatch( ONBOARD_STORE );
+	const isLargerThan1440px = useMediaQuery( '(min-width: 1440px)' );
+	const { data: allDesigns } = useStarterDesignsQuery( {
+		_locale: locale,
+	} );
 
 	function pickDesign( _selectedDesign: Design ) {
 		setSelectedDesign( _selectedDesign );
@@ -31,8 +113,9 @@ const DesignCarousel: Step = function DesignCarousel( { navigation, flow } ) {
 					require="@automattic/design-carousel"
 					placeholder={ null }
 					onPick={ pickDesign }
-					flow={ flow }
-					selectedDesignSlugs={ [ 'tsubaki', 'amulet', 'tazza', 'zaino', 'thriving-artist' ] }
+					selectedDesigns={ getFlowDesigns( allDesigns, flow ) }
+					onlyDisplayMobileCarousel={ shouldOnlyDisplayMobileCarousel( flow ) }
+					carouselDesktopOptions={ getCarouselDesktopOptions( flow, isLargerThan1440px ) }
 				/>
 			}
 			recordTracksEvent={ recordTracksEvent }

diff --git a/packages/design-carousel/src/index.tsx b/packages/design-carousel/src/index.tsx
@@ -1,9 +1,6 @@
 import { Gridicon } from '@automattic/components';
-import { StarterDesigns, useStarterDesignsQuery } from '@automattic/data-stores';
-import { useLocale } from '@automattic/i18n-utils';
-import { ECOMMERCE_FLOW, MShotsOptions, isLinkInBioFlow } from '@automattic/onboarding';
+import { MShotsOptions } from '@automattic/onboarding';
 import { Button } from '@wordpress/components';
-import { useMediaQuery } from '@wordpress/compose';
 import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useEffect, useRef } from 'react';
@@ -14,111 +11,21 @@ import type { Design } from '@automattic/design-picker/src/types';
 
 type DesignCarouselProps = {
 	onPick: ( design: Design ) => void;
-	selectedDesignSlugs?: string[];
-	flow?: string | null | undefined;
-};
-
-const shouldDisplayMobileViewOnly = ( flow: string | null | undefined ) => {
-	switch ( true ) {
-		case isLinkInBioFlow( flow ):
-			return true;
-		default:
-			return false;
-	}
-};
-
-const getLinkInBioDesigns = ( allDesigns: StarterDesigns | undefined ) => {
-	const designs =
-		allDesigns?.designs.filter(
-			( design ) =>
-				design.is_virtual &&
-				design.categories.some( ( category ) => category.slug === 'link-in-bio' )
-		) ?? [];
-
-	return designs;
-};
-
-const getEcommerceDesigns = (
-	allDesigns: StarterDesigns | undefined,
-	selectedDesignSlugs: string[] | undefined
-) => {
-	let selectedDesigns = allDesigns?.designs;
-
-	if ( selectedDesigns && selectedDesignSlugs ) {
-		// If we have a restricted set of designs, filter out all unwanted designs
-		const filteredDesigns = selectedDesigns.filter( ( design ) =>
-			selectedDesignSlugs.includes( design.slug )
-		);
-
-		// Now order the filtered set based on the supplied slugs.
-		selectedDesigns = selectedDesignSlugs
-			.map( ( selectedDesignSlug ) =>
-				filteredDesigns.find( ( design ) => design.slug === selectedDesignSlug )
-			)
-			.filter( ( selectedDesign ) => !! selectedDesign ) as Design[];
-	}
-
-	return selectedDesigns;
-};
-
-const getCarouselOptions = (
-	flow: string | null | undefined,
-	mobileOptions: MShotsOptions,
-	desktopOptions: MShotsOptions
-) => {
-	switch ( true ) {
-		case isLinkInBioFlow( flow ):
-			return mobileOptions;
-		default:
-			return desktopOptions;
-	}
-};
-
-const getFlowDesigns = (
-	allDesigns: StarterDesigns | undefined,
-	locale: string | undefined,
-	selectedDesignSlugs: string[] | undefined,
-	flow: string | null | undefined
-) => {
-	if ( ! allDesigns || ! locale ) {
-		return null;
-	}
-
-	switch ( true ) {
-		case isLinkInBioFlow( flow ):
-			return getLinkInBioDesigns( allDesigns );
-		case flow === ECOMMERCE_FLOW:
-			return getEcommerceDesigns( allDesigns, selectedDesignSlugs );
-		default:
-			return allDesigns?.designs;
-	}
+	selectedDesigns: Design[] | null | undefined;
+	onlyDisplayMobileCarousel?: boolean;
+	carouselDesktopOptions?: MShotsOptions;
+	carouselMobileOptions?: MShotsOptions;
 };
 
 export default function DesignCarousel( {
 	onPick,
-	selectedDesignSlugs,
-	flow,
+	selectedDesigns,
+	onlyDisplayMobileCarousel = false,
+	carouselDesktopOptions = { w: 1280, vpw: 1920, vph: 1280, format: 'png' },
+	carouselMobileOptions = { w: 400, vpw: 400, vph: 872, format: 'png' },
 }: DesignCarouselProps ) {
 	const { __ } = useI18n();
 	const swiperInstance = useRef< Swiper | null >( null );
-	const locale = useLocale();
-	const isLargerThan1440px = useMediaQuery( '(min-width: 1440px)' );
-	const mobileOptions: MShotsOptions = { w: 400, vpw: 400, vph: 872, format: 'png' };
-	const desktopOptions: MShotsOptions = {
-		w: isLargerThan1440px ? 1920 : 1280,
-		vpw: 1920,
-		vph: 1280,
-		format: 'png',
-	};
-
-	const { data: allDesigns } = useStarterDesignsQuery( {
-		_locale: locale,
-	} );
-
-	const selectedDesigns = getFlowDesigns( allDesigns, locale, selectedDesignSlugs, flow );
-
-	const onlyDisplayMobileCarousel = shouldDisplayMobileViewOnly( flow );
-	const carouselOptions = getCarouselOptions( flow, mobileOptions, desktopOptions );
 
 	useEffect( () => {
 		if ( selectedDesigns ) {
@@ -156,19 +63,19 @@ export default function DesignCarousel( {
 								<>
 									<Item
 										design={ design }
-										options={ carouselOptions }
+										options={ carouselDesktopOptions }
 										className="design-carousel__item-desktop"
 									/>
 									<Item
 										design={ design }
-										options={ mobileOptions }
+										options={ carouselMobileOptions }
 										className="design-carousel__item-mobile"
 									/>
 								</>
 							) : (
 								<Item
 									design={ design }
-									options={ mobileOptions }
+									options={ carouselMobileOptions }
 									className="design-carousel__item-mobile-only"
 								/>
 							) }