From 6c85151b34684017ebce63bcae714aade925ad7d Mon Sep 17 00:00:00 2001
From: abhijitb <abhijit.bhatnagar@gmail.com>
Date: Fri, 6 Jan 2023 02:19:27 +0530
Subject: [PATCH] added fadein affect for the sitetype steps

---
 .../SiteTypeSetup/PrimarySite/index.js        | 111 ++++++++--------
 .../SiteTypeSetup/SecondarySite/index.js      | 123 +++++++++---------
 2 files changed, 121 insertions(+), 113 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
index 43e191521..c978f2857 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
@@ -13,6 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../../components/NeedHelpTag';
 import content from '../content.json';
 import { translations } from '../../../../../utils/locales/translations';
+import StepStateHandler from '../../../../../components/StateHandlers/StepStateHandler';
 
 const StepPrimarySetup = () => {
 	const {
@@ -94,63 +95,65 @@ const StepPrimarySetup = () => {
 						) }
 					/>
 				</div>
-
-				<div className="nfd-setup-primary-categories">
-					{ content.categories.map( ( item, idx ) => {
-						return (
-							<div
-								key={ item?.name }
-								className={ `${
-									clickedIndex === idx ||
-									item.name === selectedPrimaryCategoryInStore
-										? 'chosenPrimaryCategory '
-										: ''
-								}nfd-card-category` }
-								onClick={ ( e ) => handleCategoryClick( idx ) }
-							>
-								<div className="nfd-card-category-wrapper">
-									<span
-										className="icon"
-										style={ {
-											backgroundImage:
-												clickedIndex !== idx &&
-												item.name !==
-													selectedPrimaryCategoryInStore
-													? item?.icon
-													: item?.iconWhite,
-										} }
-									></span>
-									<span className="categName">
-										{ item?.name }
-									</span>
+				<StepStateHandler watch={ content.categories }>
+					<div className="nfd-setup-primary-categories">
+						{ content.categories.map( ( item, idx ) => {
+							return (
+								<div
+									key={ item?.name }
+									className={ `${
+										clickedIndex === idx ||
+										item.name === selectedPrimaryCategoryInStore
+											? 'chosenPrimaryCategory '
+											: ''
+									}nfd-card-category` }
+									onClick={ ( e ) => handleCategoryClick( idx ) }
+								>
+									<div className="nfd-card-category-wrapper">
+										<span
+											className="icon"
+											style={ {
+												backgroundImage:
+													clickedIndex !== idx &&
+													item.name !==
+														selectedPrimaryCategoryInStore
+														? item?.icon
+														: item?.iconWhite,
+											} }
+										></span>
+										<span className="categName">
+											{ item?.name }
+										</span>
+									</div>
 								</div>
-							</div>
-						);
-					} ) }
-				</div>
-
-				<div className="nfd-setup-primary-second">
-					<div className="nfd-setup-primary-second-top">
-						<p className="blackText">or tell us here:</p>
-						<input
-							type="text"
-							onChange={ ( e ) => categoryInput( e ) }
-							className="tellUsInput"
-							placeholder={ sprintf(
-								__(
-									content.placeholderSiteTypeInput,
-									'wp-module-onboarding'
-								),
-								translations( 'site' )
-							) }
-							value={ inputCategVal }
-						/>
+							);
+						} ) }
 					</div>
-					<div className="nfd-setup-primary-second-bottom">
-						<NavCardButton text={ __( content.buttonText ) } />
-						<NeedHelpTag />
+
+					<div className="nfd-setup-primary-second">
+						<div className="nfd-setup-primary-second-top">
+							<p className="blackText">or tell us here:</p>
+							<input
+								type="text"
+								onChange={ ( e ) => categoryInput( e ) }
+								className="tellUsInput"
+								placeholder={ sprintf(
+									__(
+										content.placeholderSiteTypeInput,
+										'wp-module-onboarding'
+									),
+									translations( 'site' )
+								) }
+								value={ inputCategVal }
+							/>
+						</div>
 					</div>
-				</div>
+				</StepStateHandler>
+				<NavCardButton
+					text={ __( content.buttonText ) }
+					disabled={ content.categories === null}
+				/>
+				<NeedHelpTag />
 			</NewfoldLargeCard>
 		</CommonLayout>
 	);
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
index 5c836b0b5..040cebec2 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
@@ -13,6 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../../components/NeedHelpTag';
 import content from '../content.json';
 import { translations } from '../../../../../utils/locales/translations';
+import StepStateHandler from '../../../../../components/StateHandlers/StepStateHandler';
 
 const StepPrimarySetup = () => {
 	const {
@@ -101,71 +102,75 @@ const StepPrimarySetup = () => {
 						) }
 					/>
 				</div>
-
-				<div className="nfd-setup-secondary-categories">
-					<div className="nfd-card-category-wrapper">
-						<div className="category-scrolling-wrapper">
-							<span
-								className="icon"
-								style={ {
-									backgroundImage: categoriesArray[ 0 ].icon,
-								} }
-							/>
-							<p className="categName">
-								{ ' ' }
-								{ categoriesArray[ 0 ].name }
-							</p>
+				<StepStateHandler watch={ categoriesArray[ 0 ]?.subCategories }>
+					<div className="nfd-setup-secondary-categories">
+						<div className="nfd-card-category-wrapper">
+							<div className="category-scrolling-wrapper">
+								<span
+									className="icon"
+									style={ {
+										backgroundImage: categoriesArray[ 0 ].icon,
+									} }
+								/>
+								<p className="categName">
+									{ ' ' }
+									{ categoriesArray[ 0 ].name }
+								</p>
+							</div>
 						</div>
-					</div>
-
-					<div className="subCategoriesSection">
-						{ categoriesArray[ 0 ]?.subCategories?.map(
-							( item, idx ) => {
-								return (
-									<span
-										key={ item }
-										onClick={ ( e ) =>
-											handleCategoryClick( idx )
-										}
-										className={ `${
-											clickedIndex === idx ||
-											item === selectedCategoryInStore
-												? 'chosenSecondaryCategory '
-												: ''
-										}nfd-card-category` }
-									>
-										{ item }
-									</span>
-								);
-							}
-						) }
-					</div>
-				</div>
 
-				<div className="nfd-setup-primary-second">
-					<div className="nfd-setup-primary-second-top">
-						<div className="blackText">
-							{ __(
-								content.tellusHereText,
-								'wp-module-onboarding'
+						<div className="subCategoriesSection">
+							{ categoriesArray[ 0 ]?.subCategories?.map(
+								( item, idx ) => {
+									return (
+										<span
+											key={ item }
+											onClick={ ( e ) =>
+												handleCategoryClick( idx )
+											}
+											className={ `${
+												clickedIndex === idx ||
+												item === selectedCategoryInStore
+													? 'chosenSecondaryCategory '
+													: ''
+											}nfd-card-category` }
+										>
+											{ item }
+										</span>
+									);
+								}
 							) }
 						</div>
-						<input
-							type="text"
-							onChange={ ( e ) => categoryInput( e ) }
-							className="tellUsInput"
-							placeholder={ sprintf(
-								__(
-									content.placeholderSiteTypeInput,
+					</div>
+
+					<div className="nfd-setup-primary-second">
+						<div className="nfd-setup-primary-second-top">
+							<div className="blackText">
+								{ __(
+									content.tellusHereText,
 									'wp-module-onboarding'
-								),
-								translations( 'site' )
-							) }
-							value={ inputCategVal }
-						/>
+								) }
+							</div>
+							<input
+								type="text"
+								onChange={ ( e ) => categoryInput( e ) }
+								className="tellUsInput"
+								placeholder={ sprintf(
+									__(
+										content.placeholderSiteTypeInput,
+										'wp-module-onboarding'
+									),
+									translations( 'site' )
+								) }
+								value={ inputCategVal }
+							/>
+						</div>
 					</div>
-				</div>
-				<NavCardButton text={ __( content.buttonText ) } />
+				</StepStateHandler>
+				<NavCardButton
+					text={ __( content.buttonText ) }
+					disabled={ categoriesArray[ 0 ]?.subCategories === null }
+				/>
 				<NeedHelpTag />
 			</NewfoldLargeCard>
 		</CommonLayout>