PRESS 2 111 | Fix Social Data to be handled outside Flow

.github/workflows/lint-check-spa.yml

@@ -41,7 +41,7 @@ jobs:
 
       # Installs @wordpress/scripts for lint checks if it does not exist in the cache.
       - name: Install dependencies
-        run: npm i @wordpress/scripts
+        run: npm i @wordpress/scripts lodash
         if: steps.cache.outputs.cache-hit != 'true'
 
       # Gets the files changed wrt to trunk and filters out the js files.

src/OnboardingSPA/components/App/index.js

@@ -22,68 +22,72 @@ import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface';
  *
  * Is a child of the hash router and error boundary.
  *
- * @return WPComponent
+ * @return {WPComponent} App Component
  */
 const App = () => {
 	const location = useLocation();
-	const isLargeViewport = useViewportMatch('medium');
-	const pathname = kebabCase(location.pathname);
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const pathname = kebabCase( location.pathname );
 
 	const {
 		isDrawerOpen,
 		newfoldBrand,
 		onboardingFlow,
 		currentData,
+		socialData,
 		firstStep,
 		routes,
 		designSteps,
 		allSteps,
-	} = useSelect((select) => {
+	} = useSelect( ( select ) => {
 		return {
-			isDrawerOpen: select(nfdOnboardingStore).isDrawerOpened(),
-			newfoldBrand: select(nfdOnboardingStore).getNewfoldBrand(),
-			onboardingFlow: select(nfdOnboardingStore).getOnboardingFlow(),
-			currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
-			firstStep: select(nfdOnboardingStore).getFirstStep(),
-			routes: select(nfdOnboardingStore).getRoutes(),
-			allSteps: select(nfdOnboardingStore).getAllSteps(),
-			designSteps: select(nfdOnboardingStore).getDesignSteps(),
+			isDrawerOpen: select( nfdOnboardingStore ).isDrawerOpened(),
+			newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(),
+			onboardingFlow: select( nfdOnboardingStore ).getOnboardingFlow(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			socialData: select( nfdOnboardingStore ).getOnboardingSocialData(),
+			firstStep: select( nfdOnboardingStore ).getFirstStep(),
+			routes: select( nfdOnboardingStore ).getRoutes(),
+			allSteps: select( nfdOnboardingStore ).getAllSteps(),
+			designSteps: select( nfdOnboardingStore ).getDesignSteps(),
 		};
-	}, []);
-
-	const [isRequestPlaced, setIsRequestPlaced] = useState(false);
-	const [didVisitBasicInfo, setDidVisitBasicInfo] = useState(false);
-	const [didVisitEcommerce, setDidVisitEcommerce] = useState(false);
-	const { setActiveStep, 
-			setActiveFlow, 
-			updateRoutes,
-			updateDesignSteps,
-			updateAllSteps,
-			setCurrentOnboardingData,
-		} = useDispatch(nfdOnboardingStore);
+	}, [] );
+
+	const [ isRequestPlaced, setIsRequestPlaced ] = useState( false );
+	const [ didVisitBasicInfo, setDidVisitBasicInfo ] = useState( false );
+	const [ didVisitEcommerce, setDidVisitEcommerce ] = useState( false );
+	const {
+		setActiveStep,
+		setActiveFlow,
+		updateRoutes,
+		updateDesignSteps,
+		updateAllSteps,
+		setOnboardingSocialData,
+		setCurrentOnboardingData,
+	} = useDispatch( nfdOnboardingStore );
 
 	async function syncSocialSettings() {
 		const initialData = await getSettings();
-		const result = await setSettings(currentData?.data?.socialData);
-		setDidVisitBasicInfo(false);
-		if (result?.error != null) {
-			console.error('Unable to Save Social Data!');
+		const result = await setSettings( socialData );
+		setDidVisitBasicInfo( false );
+		if ( result?.error !== null ) {
 			return initialData?.body;
 		}
 		return result?.body;
 	}
-	
+
 	async function syncStoreDetails() {
-		let { address, tax } = currentData.storeDetails;
+		const { address, tax } = currentData.storeDetails;
 		let payload = {};
-		if (address !== undefined) {
+		if ( address !== undefined ) {
 			delete address.country;
 			delete address.state;
 			payload = address;
 		}
-		if (tax !== undefined) {
-			let option = tax.option;
-			let isStoreDetailsFilled = tax.isStoreDetailsFilled;
+		if ( tax !== undefined ) {
+			// const option = tax.option;
+			// const isStoreDetailsFilled = tax.isStoreDetailsFilled;
 			delete tax.option;
 			delete tax.isStoreDetailsFilled;
 			// No Auto-calculate taxes for MMP
@@ -96,50 +100,50 @@ const App = () => {
 			// }
 			payload = { ...payload, ...tax };
 		}
-		if (!isEmpty(payload)) {
-			await updateWPSettings(payload);
+		if ( ! isEmpty( payload ) ) {
+			await updateWPSettings( payload );
 		}
 		delete currentData.storeDetails.address;
 		delete currentData.storeDetails.tax;
-		setDidVisitEcommerce(false);
+		setDidVisitEcommerce( false );
 	}
 
 	async function syncStoreToDB() {
 		// The First Welcome Step doesn't have any Store changes
 		const isFirstStep = location?.pathname === firstStep?.path;
-		if (currentData && !isFirstStep){
-			if(!isRequestPlaced){
-				setIsRequestPlaced(true);
+		if ( currentData && ! isFirstStep ) {
+			if ( ! isRequestPlaced ) {
+				setIsRequestPlaced( true );
 
-				if (didVisitEcommerce) {
+				if ( didVisitEcommerce ) {
 					await syncStoreDetails();
 				}
 
 				// If Social Data is changed then sync it
-				if (didVisitBasicInfo){
-					const socialData = await syncSocialSettings();
-					
+				if ( didVisitBasicInfo ) {
+					const socialDataResp = await syncSocialSettings();
+
 					// If Social Data is changed then Sync that also to the store
-					if (socialData && currentData?.data)
-						currentData.data.socialData = socialData;
-				} 
-
-				const result = await setFlow(currentData);
-				if (result?.error != null) {
-					setIsRequestPlaced(false);
-					console.error('Unable to Save data!');
+					if ( socialDataResp ) {
+						setOnboardingSocialData( socialDataResp );
+					}
+				}
+
+				const result = await setFlow( currentData );
+				if ( result?.error !== null ) {
+					setIsRequestPlaced( false );
 				} else {
-					setCurrentOnboardingData(result?.body);
-					setIsRequestPlaced(false);
+					setCurrentOnboardingData( result?.body );
+					setIsRequestPlaced( false );
 				}
-
 			}
 		}
 		// Check if the Basic Info page was visited
-		if (location?.pathname.includes('basic-info'))
-			setDidVisitBasicInfo(true);
-		if (location?.pathname.includes('ecommerce')) {
-			setDidVisitEcommerce(true);
+		if ( location?.pathname.includes( 'basic-info' ) ) {
+			setDidVisitBasicInfo( true );
+		}
+		if ( location?.pathname.includes( 'ecommerce' ) ) {
+			setDidVisitEcommerce( true );
 		}
 	}
 
@@ -151,19 +155,19 @@ const App = () => {
 		];
 		return {
 			routes: orderBy(
-				updates.routes.concat(steps),
-				['priority'],
-				['asc']
+				updates.routes.concat( steps ),
+				[ 'priority' ],
+				[ 'asc' ]
 			),
 			allSteps: orderBy(
-				updates.allSteps.concat(steps),
-				['priority'],
-				['asc']
+				updates.allSteps.concat( steps ),
+				[ 'priority' ],
+				[ 'asc' ]
 			),
 			designSteps: orderBy(
-				updates.designSteps.concat(steps),
-				['priority'],
-				['asc']
+				updates.designSteps.concat( steps ),
+				[ 'priority' ],
+				[ 'asc' ]
 			),
 		};
 	};
@@ -172,51 +176,55 @@ const App = () => {
 		return {
 			routes: filter(
 				routes,
-				(route) =>
-					!route.path.includes(
+				( route ) =>
+					! route.path.includes(
 						conditionalSteps.designColors.path
 					) &&
-					!route.path.includes(
+					! route.path.includes(
 						conditionalSteps.designTypography.path
 					)
 			),
 			allSteps: filter(
 				allSteps,
-				(allStep) =>
-					!allStep.path.includes(
+				( allStep ) =>
+					! allStep.path.includes(
 						conditionalSteps.designColors.path
 					) &&
-					!allStep.path.includes(
+					! allStep.path.includes(
 						conditionalSteps.designTypography.path
 					)
 			),
 			designSteps: filter(
 				designSteps,
-				(designStep) =>
-					!designStep.path.includes(
+				( designStep ) =>
+					! designStep.path.includes(
 						conditionalSteps.designColors.path
 					) &&
-					!designStep.path.includes(
+					! designStep.path.includes(
 						conditionalSteps.designTypography.path
 					)
 			),
 		};
 	};
 
 	function handleColorsAndTypographyRoutes() {
-		if (location?.pathname.includes('colors') || location?.pathname.includes('typography')){
-			let updates;
-			updates = currentData?.data?.customDesign ? addColorAndTypographyRoutes() : removeColorAndTypographyRoutes();
-
-			updateRoutes(updates.routes);
-			updateDesignSteps(updates.designSteps);
-			updateAllSteps(updates.allSteps);
+		if (
+			location?.pathname.includes( 'colors' ) ||
+			location?.pathname.includes( 'typography' )
+		) {
+			const updates = currentData?.data?.customDesign
+				? addColorAndTypographyRoutes()
+				: removeColorAndTypographyRoutes();
+
+			updateRoutes( updates.routes );
+			updateDesignSteps( updates.designSteps );
+			updateAllSteps( updates.allSteps );
 		}
 	}
 
-	useEffect(() => {
-		document.body.classList.add(`nfd-brand-${newfoldBrand}`);
-	}, [newfoldBrand]);
+	useEffect( () => {
+		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
+	}, [ newfoldBrand ] );
 
 	useEffect( () => {
 		syncStoreToDB();
@@ -229,21 +237,21 @@ const App = () => {
 
 	return (
 		<Fragment>
-			<FullscreenMode isActive={true} />\
+			<FullscreenMode isActive={ true } />\
 			<SlotFillProvider>
 				<InterfaceSkeleton
-					className={classNames(
+					className={ classNames(
 						'nfd-onboarding-skeleton',
-						`brand-${newfoldBrand}`,
-						`path-${pathname}`,
+						`brand-${ newfoldBrand }`,
+						`path-${ pathname }`,
 						{ 'is-drawer-open': isDrawerOpen },
 						{ 'is-large-viewport': isLargeViewport },
-						{ 'is-small-viewport': !isLargeViewport }
-					)}
-					header={<Header />}
-					drawer={<Drawer />}
-					content={<Content />}
-					sidebar={<Sidebar />}
+						{ 'is-small-viewport': ! isLargeViewport }
+					) }
+					header={ <Header /> }
+					drawer={ <Drawer /> }
+					content={ <Content /> }
+					sidebar={ <Sidebar /> }
 				/>
 			</SlotFillProvider>
 		</Fragment>