Merge pull request #241 from newfold-labs/fix/PRESS2-949-custom-color…

…-selections Fix custom color selections not reflecting in the accordion
newfold-labs · May 22, 2023 · e81883e · e81883e
2 parents 37b400f + e40d63e
commit e81883e
Showing 1 changed file with 27 additions and 18 deletions.
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -98,13 +98,11 @@ const DesignColors = () => {
 					isCustomStyle &&
 					selectedColorsLocalTemp?.[ slug ] !== '' &&
 					selectedColorsLocalTemp?.[ slug ] !== undefined
-				)
+				) {
 					selectedThemeColorPalette[ idx ].color =
 						selectedColorsLocalTemp[ slug ];
-				/**
-				 * Add Exception for Background.
-				 * (perhaps scope to yith-wonder in future)
-				 */ else if (
+				} else if (
+				// Add Exception for Background.(perhaps scope to yith-wonder in future)
 					colorPalettesTemp?.[ colorStyle ]?.[ slug ] &&
 					'base' === slug
 				) {
@@ -137,10 +135,11 @@ const DesignColors = () => {
 		const res = selectedThemeColorPalette.findIndex(
 			( { slug } ) => slug === slugName
 		);
-		if ( res === -1 )
+		if ( res === -1 ) {
 			return selectedThemeColorPalette.findIndex(
 				( { slug } ) => slug === colorPickerCalledBy
 			);
+		}
 		return res;
 	}
 
@@ -156,9 +155,10 @@ const DesignColors = () => {
 					colorPickerCalledBy === slug &&
 					customColors &&
 					customColors[ slug ] !== undefined
-				)
+				) {
 					selectedThemeColorPalette[ idx ].color =
 						customColors[ slug ];
+				}
 			}
 			if ( customColorsMap ) {
 				const colorVariant = customColorsMap[ colorPickerCalledBy ];
@@ -205,15 +205,15 @@ const DesignColors = () => {
 		let selectedColorsLocalTemp;
 		if ( ! currentData?.data?.palette?.slug === '' ) {
 			selectedColorsTemp = currentData.data.palette;
-			selectedColorsLocalTemp = stateToLocal( selectedColors );
-			setCustomColors( selectedColorsLocal );
+			selectedColorsLocalTemp = stateToLocal( selectedColorsTemp );
+			setCustomColors( selectedColorsLocalTemp );
 			setCurrentOnboardingData( currentData );
 		} else {
 			selectedColorsTemp = currentData.data.palette;
-			selectedColorsLocalTemp = stateToLocal( selectedColors );
+			selectedColorsLocalTemp = stateToLocal( selectedColorsTemp );
 
 			if ( selectedColorsTemp.slug === 'custom' ) {
-				setCustomColors( selectedColorsLocal );
+				setCustomColors( selectedColorsLocalTemp );
 			}
 		}
 		setSelectedColors( selectedColorsTemp );
@@ -227,8 +227,9 @@ const DesignColors = () => {
 	};
 
 	useEffect( () => {
-		if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus )
+		if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) {
 			getColorStylesAndPatterns();
+		}
 		if ( isCustomColorActive() ) {
 			setIsAccordionClosed( false );
 			customColorsResetRef.current.scrollIntoView( {
@@ -240,8 +241,9 @@ const DesignColors = () => {
 
 	const handleClick = ( colorStyle ) => {
 		const customColorsTemp = customColors;
-		for ( const custom in customColorsTemp )
+		for ( const custom in customColorsTemp ) {
 			customColorsTemp[ custom ] = '';
+		}
 
 		setCustomColors( customColorsTemp );
 		saveThemeColorPalette( colorStyle );
@@ -271,8 +273,11 @@ const DesignColors = () => {
 	const selectCustomColor = ( colorType ) => {
 		setShowColorPicker( ! showColorPicker );
 
-		if ( ! showColorPicker ) setColorPickerCalledBy( colorType );
-		else setColorPickerCalledBy( '' );
+		if ( ! showColorPicker ) {
+			setColorPickerCalledBy( colorType );
+		} else {
+			setColorPickerCalledBy( '' );
+		}
 	};
 
 	async function resetColors() {
@@ -292,8 +297,9 @@ const DesignColors = () => {
 		);
 		selectedColors.slug = '';
 		selectedColors.name = '';
-		for ( const colorVal in selectedColors?.color )
+		for ( const colorVal in selectedColors?.color ) {
 			selectedColors.color[ colorVal ].color = '';
+		}
 		setCustomColors( stateToLocal( selectedColors ) );
 		currentData.data.palette = selectedColors;
 
@@ -346,8 +352,11 @@ const DesignColors = () => {
 	}
 
 	function isCustomColorActive() {
-		for ( const custom in customColors )
-			if ( customColors[ custom ] !== '' ) return true;
+		for ( const custom in customColors ) {
+			if ( customColors[ custom ] !== '' ) {
+				return true;
+			}
+		}
 
 		return false;
 	}