diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index cba375ba6..fa542bdea 100644 --- 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; }