From 1087f95c36b49fba30e041000ecd414e02500743 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 21 Feb 2023 11:22:36 +0530 Subject: [PATCH] Revert "Merge branch 'trunk' of https://github.com/newfold-labs/wp-module-onboarding into add/PRESS2-649-install-razorpay-for-bluehost-india" This reverts commit 0986e236e4b0025f43c3aac536dd7576a55a321d, reversing changes made to 47eb5bf4278e1d4f1773df1ac0b679d30b06c5c0. --- includes/Data/Themes/Colors.php | 251 ++++++------- .../components/CardHeader/index.js | 29 +- .../Drawer/DrawerPanel/DesignColors.js | 166 ++++----- .../Drawer/DrawerPanel/DesignTypography.js | 30 +- .../components/Drawer/DrawerPanel/index.js | 4 +- .../components/Drawer/DrawerToggle/index.js | 58 +-- src/OnboardingSPA/components/Drawer/index.js | 23 +- .../components/Drawer/stylesheet.scss | 9 +- src/OnboardingSPA/components/Header/index.js | 19 +- .../components/ImageUploader/index.js | 185 +++++----- .../LivePreview/BlockPreview/index.js | 32 +- .../LivePreview/GlobalStylesProvider/index.js | 29 +- .../components/MiniPreview/index.js | 349 +++++++----------- .../Sidebar/components/LearnMore/Sidebar.js | 4 +- .../GetStarted/GetStartedExperience/index.js | 16 +- 15 files changed, 545 insertions(+), 659 deletions(-) diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php index a00054c74..2e36e94cf 100644 --- a/includes/Data/Themes/Colors.php +++ b/includes/Data/Themes/Colors.php @@ -14,139 +14,126 @@ final class Colors { */ protected static $theme_colors = array( 'yith-wonder' => array( - 'tailored' => array( - 'calm' => array( - 'header-background' => '#1A4733', - 'header-foreground' => '#FFFFFF', - 'header-titles' => '#FFFFFF', - 'secondary-background' => '#1A4733', - 'secondary-foreground' => '#FFF', - 'tertiary' => '#C7DBFF', - 'secondary' => '#344A77', - 'primary' => '#1A4733', - 'base' => '#FFFFFF', - ), - 'cool' => array( - 'header-background' => '#C7DBFF', - 'header-foreground' => '#21447B', - 'header-titles' => '#21447B', - 'secondary-background' => '#C7DBFF', - 'secondary-foreground' => '#21447B', - 'tertiary' => '#C7DBFF', - 'secondary' => '#3764B4', - 'primary' => '#21447B', - 'base' => '#FFFFFF', - ), - 'warm' => array( - 'header-background' => '#FDE5D0', - 'header-foreground' => '#7A3921', - 'header-titles' => '#7A3921', - 'secondary-background' => '#FDE5D0', - 'secondary-foreground' => '#7A3921', - 'tertiary' => '#FFEDED', - 'secondary' => '#B97040', - 'primary' => '#7A3921', - 'base' => '#FFFFFF', - ), - 'radiant' => array( - 'header-background' => '#63156A', - 'header-foreground' => '#E3F7FF', - 'header-titles' => '#E3F7FF', - 'secondary-background' => '#781980', - 'secondary-foreground' => '#E3F7FF', - 'tertiary' => '#C7F0FF', - 'secondary' => '#64288C', - 'primary' => '#63156A', - 'base' => '#FFFFFF', - ), - 'bold' => array( - 'header-background' => '#FFD7F1', - 'header-foreground' => '#09857C', - 'header-titles' => '#09857C', - 'secondary-background' => '#ffddf3', - 'secondary-foreground' => '#09857C', - 'tertiary' => '#F2A3D6', - 'secondary' => '#076D66', - 'primary' => '#09857C', - 'base' => '#FFFFFF', - ), - 'retro' => array( - 'header-background' => '#096385', - 'header-foreground' => '#F2E6A2', - 'header-titles' => '#F2E6A2', - 'secondary-background' => '#096385', - 'secondary-foreground' => '#F2E6A2', - 'tertiary' => '#F2E6A2', - 'secondary' => '#BE9E00', - 'primary' => '#096385', - 'base' => '#FFFFFF', - ), - 'professional' => array( - 'header-background' => '#6D8258', - 'header-foreground' => '#F5FAFF', - 'header-titles' => '#D2E0F5', - 'secondary-background' => '#6D8258', - 'secondary-foreground' => '#F5FAFF', - 'tertiary' => '#d6e4f9', - 'secondary' => '#405F1C', - 'primary' => '#558320', - 'base' => '#FFFFFF', - ), - 'crisp' => array( - 'header-background' => '#ccc', - 'header-foreground' => '#333', - 'header-titles' => '#234', - 'secondary-background' => '#ccc', - 'secondary-foreground' => '#333', - 'tertiary' => '#777', - 'secondary' => '#17222E', - 'primary' => '#223344', - 'base' => '#FFFFFF', - ), - 'polished' => array( - 'header-background' => '#313131', - 'header-foreground' => '#fff', - 'header-titles' => '#6B69EA', - 'secondary-background' => '#444', - 'secondary-foreground' => '#ddd', - 'tertiary' => '#313131', - 'secondary' => '#6B69EA', - 'primary' => '#5100FA', - 'base' => '#FFFFFF', - ), - 'nightowl' => array( - 'header-background' => '#06080A', - 'header-foreground' => '#fff', - 'header-titles' => '#FAAA14', - 'secondary-background' => '#0A0C0E', - 'secondary-foreground' => '#fff', - 'tertiary' => '#FFDFA3', - 'secondary' => '#06080A', - 'primary' => '#B97900', - 'base' => '#FFFFFF', - ), - 'subtle' => array( - 'header-background' => '#C7ADBB', - 'header-foreground' => '#5A3C4B', - 'header-titles' => '#5A3C4B', - 'secondary-background' => '#C7ADBB', - 'secondary-foreground' => '#5A3C4B', - 'tertiary' => '#D4C9CF', - 'secondary' => '#57203c', - 'primary' => '#5A3C4B', - 'base' => '#FFFFFF', - ), + 'calm' => array( + 'header-background' => '#1A4733', + 'header-foreground' => '#FFFFFF', + 'header-title' => '#FFFFFF', + 'secondary-background' => '#1A4733', + 'secondary-foreground' => '#FFF', + 'tertiary' => '#C7DBFF', + 'secondary' => '#344A77', + 'primary' => '#1A4733', + 'base' => '#FFFFFF', ), - 'custom-picker-grouping' => array( - 'base' => array( - 'header-foreground', - 'header-titles', - 'secondary-foreground', - ), - 'tertiary' => array( - 'header-background', - 'secondary-background', - ), + 'cool' => array( + 'header-background' => '#C7DBFF', + 'header-foreground' => '#21447B', + 'header-titles' => '#21447B', + 'secondary-background' => '#C7DBFF', + 'secondary-foreground' => '#21447B', + 'tertiary' => '#C7DBFF', + 'secondary' => '#3764B4', + 'primary' => '#21447B', + 'base' => '#FFFFFF', + ), + 'warm' => array( + 'header-background' => '#FDE5D0', + 'header-foreground' => '#7A3921', + 'header-titles' => '#7A3921', + 'secondary-background' => '#FDE5D0', + 'secondary-foreground' => '#7A3921', + 'tertiary' => '#FFEDED', + 'secondary' => '#B97040', + 'primary' => '#7A3921', + 'base' => '#FFFFFF', + ), + 'radiant' => array( + 'header-background' => '#63156A', + 'header-foreground' => '#E3F7FF', + 'header-titles' => '#E3F7FF', + 'secondary-background' => '#781980', + 'secondary-foreground' => '#E3F7FF', + 'tertiary' => '#C7F0FF', + 'secondary' => '#64288C', + 'primary' => '#63156A', + 'base' => '#FFFFFF', + ), + 'bold' => array( + 'header-background' => '#FFD7F1', + 'header-foreground' => '#09857C', + 'header-titles' => '#09857C', + 'secondary-background' => '#ffddf3', + 'secondary-foreground' => '#09857C', + 'tertiary' => '#F2A3D6', + 'secondary' => '#076D66', + 'primary' => '#09857C', + 'base' => '#FFFFFF', + ), + 'retro' => array( + 'header-background' => '#096385', + 'header-foreground' => '#F2E6A2', + 'header-titles' => '#F2E6A2', + 'secondary-background' => '#096385', + 'secondary-foreground' => '#F2E6A2', + 'tertiary' => '#F2E6A2', + 'secondary' => '#BE9E00', + 'primary' => '#096385', + 'base' => '#FFFFFF', + ), + 'professional' => array( + 'header-background' => '#6D8258', + 'header-foreground' => '#F5FAFF', + 'header-titles' => '#D2E0F5', + 'secondary-background' => '#6D8258', + 'secondary-foreground' => '#F5FAFF', + 'tertiary' => '#d6e4f9', + 'secondary' => '#405F1C', + 'primary' => '#558320', + 'base' => '#FFFFFF', + ), + 'crisp' => array( + 'header-background' => '#ccc', + 'header-foreground' => '#333', + 'header-titles' => '#234', + 'secondary-background' => '#ccc', + 'secondary-foreground' => '#333', + 'tertiary' => '#777', + 'secondary' => '#17222E', + 'primary' => '#223344', + 'base' => '#FFFFFF', + ), + 'polished' => array( + 'header-background' => '#313131', + 'header-foreground' => '#fff', + 'header-titles' => '#6B69EA', + 'secondary-background' => '#444', + 'secondary-foreground' => '#ddd', + 'tertiary' => '#313131', + 'secondary' => '#6B69EA', + 'primary' => '#5100FA', + 'base' => '#FFFFFF', + ), + 'nightowl' => array( + 'header-background' => '#06080A', + 'header-foreground' => '#fff', + 'header-titles' => '#FAAA14', + 'secondary-background' => '#0A0C0E', + 'secondary-foreground' => '#fff', + 'tertiary' => '#FFDFA3', + 'secondary' => '#06080A', + 'primary' => '#B97900', + 'base' => '#FFFFFF', + ), + 'subtle' => array( + 'header-background' => '#C7ADBB', + 'header-foreground' => '#5A3C4B', + 'header-titles' => '#5A3C4B', + 'secondary-background' => '#C7ADBB', + 'secondary-foreground' => '#5A3C4B', + 'tertiary' => '#D4C9CF', + 'secondary' => '#57203c', + 'primary' => '#5A3C4B', + 'base' => '#FFFFFF', ), ), ); diff --git a/src/OnboardingSPA/components/CardHeader/index.js b/src/OnboardingSPA/components/CardHeader/index.js index d0939b44b..dee9f00fe 100644 --- a/src/OnboardingSPA/components/CardHeader/index.js +++ b/src/OnboardingSPA/components/CardHeader/index.js @@ -6,32 +6,21 @@ * @return CardHeader */ -import { memo } from '@wordpress/element'; +import React from 'react'; + +const CardHeader = ({ heading, subHeading, question }) => { -const CardHeader = ( { heading, subHeading, question } ) => { return (
- { heading && ( -

{ heading }

- ) } + {heading &&

{heading}

} - { subHeading && ( -

- { subHeading } -

- ) } + {subHeading && ( +

{subHeading}

+ )} - { question && ( -

{ question }

- ) } + {question &&

{question}

}
); }; -export default memo( CardHeader ); +export default CardHeader; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 1eefe78f7..21dbf016a 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -1,19 +1,20 @@ import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; +import { useState, useEffect } from '@wordpress/element'; import { Popover, ColorPicker } from '@wordpress/components'; -import { useState, useEffect, useRef } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { GlobalStylesProvider } from '../../LivePreview'; -import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants'; +import { + THEME_STATUS_ACTIVE, + THEME_STATUS_INIT, +} from '../../../../constants'; import Animate from '../../Animate'; const DesignColors = () => { - const customColorsResetRef = useRef( null ); const [ isLoaded, setIsLoaded ] = useState( false ); - const [ customColorsMap, setCustomColorsMap ] = useState(); const [ selectedColors, setSelectedColors ] = useState(); const [ showColorPicker, setShowColorPicker ] = useState( false ); const [ isAccordionClosed, setIsAccordionClosed ] = useState( true ); @@ -106,8 +107,7 @@ const DesignColors = () => { const slug = selectedThemeColorPalette[ idx ]?.slug; if ( isCustomStyle && - selectedColorsLocalTemp?.[ slug ] != '' && - selectedColorsLocalTemp?.[ slug ] != undefined + selectedColorsLocalTemp?.[ slug ] != '' ) selectedThemeColorPalette[ idx ].color = selectedColorsLocalTemp[ slug ]; @@ -126,23 +126,6 @@ const DesignColors = () => { selectedThemeColorPalette[ idx ].color = colorPalettesTemp[ colorStyle ][ slug ]; } - - if ( customColorsMap ) { - const colorVariant = customColorsMap[ slug ]; - if ( colorVariant ) { - colorVariant.forEach( ( variant ) => { - if ( - customColors && - customColors[ slug ] !== undefined - ) { - selectedThemeColorPalette[ - findInCustomColors( variant, slug ) - ].color = customColors[ slug ]; - } - } ); - } - } - break; } } @@ -160,19 +143,6 @@ const DesignColors = () => { } } - function findInCustomColors( slugName, colorPickerCalledBy ) { - const selectedThemeColorPalette = - storedPreviewSettings?.settings?.color?.palette; - const res = selectedThemeColorPalette.findIndex( - ( { slug } ) => slug === slugName - ); - if ( res === -1 ) - return selectedThemeColorPalette.findIndex( - ( { slug } ) => slug === colorPickerCalledBy - ); - return res; - } - async function saveCustomColors() { const selectedGlobalStyle = storedPreviewSettings; const selectedThemeColorPalette = @@ -180,31 +150,39 @@ const DesignColors = () => { if ( selectedThemeColorPalette ) { for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) { - const slug = selectedThemeColorPalette[ idx ]?.slug; - if ( - colorPickerCalledBy === slug && - customColors && - customColors[ slug ] !== undefined - ) - selectedThemeColorPalette[ idx ].color = - customColors[ slug ]; - } - if ( customColorsMap ) { - const colorVariant = customColorsMap[ colorPickerCalledBy ]; - if ( colorVariant ) { - colorVariant.forEach( ( variant ) => { + switch ( selectedThemeColorPalette[ idx ]?.slug ) { + case 'base': if ( - customColors && - customColors[ colorPickerCalledBy ] !== undefined - ) { - selectedThemeColorPalette[ - findInCustomColors( - variant, - colorPickerCalledBy - ) - ].color = customColors[ colorPickerCalledBy ]; - } - } ); + colorPickerCalledBy == 'base' && + customColors?.base + ) + selectedThemeColorPalette[ idx ].color = + customColors?.base; + break; + case 'primary': + if ( + colorPickerCalledBy == 'primary' && + customColors?.primary + ) + selectedThemeColorPalette[ idx ].color = + customColors?.primary; + break; + case 'secondary': + if ( + colorPickerCalledBy == 'secondary' && + customColors?.secondary + ) + selectedThemeColorPalette[ idx ].color = + customColors?.secondary; + break; + case 'tertiary': + if ( + colorPickerCalledBy == 'tertiary' && + customColors?.tertiary + ) + selectedThemeColorPalette[ idx ].color = + customColors?.tertiary; + break; } } @@ -224,8 +202,7 @@ const DesignColors = () => { if ( colorPalettes?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setColorPalettes( colorPalettes?.body.tailored ); - setCustomColorsMap( colorPalettes?.body[ 'custom-picker-grouping' ] ); + setColorPalettes( colorPalettes?.body ); let selectedColors; let selectedColorsLocal; if ( ! currentData?.data?.palette?.slug === '' ) { @@ -242,19 +219,18 @@ const DesignColors = () => { } } setSelectedColors( selectedColors ); + saveThemeColorPalette( + currentData?.data?.palette.slug, + colorPalettes?.body, + selectedColorsLocal, + storedPreviewSettings + ); setIsLoaded( true ); }; useEffect( () => { if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) getColorStylesAndPatterns(); - if ( isCustomColorActive() ) { - setIsAccordionClosed( false ); - customColorsResetRef.current.scrollIntoView( { - behavior: 'smooth', - block: 'end', - } ); - } }, [ isLoaded, themeStatus ] ); const handleClick = ( colorStyle ) => { @@ -286,7 +262,7 @@ const DesignColors = () => { }; async function resetColors() { - const globalStyles = await getGlobalStyles( true ); + const globalStyles = await getGlobalStyles(); let selectedGlobalStyle; if ( currentData?.data?.theme?.variation ) { selectedGlobalStyle = globalStyles.body.filter( @@ -354,27 +330,19 @@ const DesignColors = () => { return paletteRenderedList; } - function isCustomColorActive() { - for ( const custom in customColors ) - if ( customColors[ custom ] != '' ) return true; - - return false; - } - function buildCustomPalette() { - const defaultColor = '#fff'; const primaryColorTemp = - customColors && customColors?.primary !== '' + customColors && customColors?.primary != '' ? customColors?.primary - : selectedColorsLocal?.primary ?? defaultColor; + : selectedColorsLocal?.primary ?? '#fff'; const secondaryColorTemp = - customColors && customColors?.secondary !== '' + customColors && customColors?.secondary != '' ? customColors?.secondary - : selectedColorsLocal?.secondary ?? defaultColor; + : selectedColorsLocal?.secondary ?? '#fff'; const tertiaryColorTemp = - customColors && customColors?.tertiary !== '' + customColors && customColors?.tertiary != '' ? customColors?.tertiary - : selectedColorsLocal?.tertiary ?? defaultColor; + : selectedColorsLocal?.tertiary ?? '#fff'; return (
@@ -415,7 +383,7 @@ const DesignColors = () => { }` } style={ { backgroundColor: `${ - customColors?.base ?? defaultColor + customColors?.base ?? '#FFF' }`, } } > @@ -483,17 +451,6 @@ const DesignColors = () => {
- { isCustomColorActive() && ( - -
-
Reset
-
- - ) } { showColorPicker && (
{ } return ( -
-

{ __( 'Color Palettes', 'wp-module-onboarding' ) }

- { colorPalettes && buildPalettes() } - { colorPalettes && buildCustomPalette() } -
+ +
+

{ __( 'Color Palettes', 'wp-module-onboarding' ) }

+ { /* {selectedColors?.slug && +
+
Reset Button
+
+ } */ } + { colorPalettes && buildPalettes() } + { colorPalettes && buildCustomPalette() } +
+ ); }; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 6020931c3..3ec587d9d 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js @@ -3,9 +3,13 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect, useRef } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; +import { GlobalStylesProvider } from '../../../components/LivePreview'; import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; -import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants'; +import { + THEME_STATUS_ACTIVE, + THEME_STATUS_INIT, +} from '../../../../constants'; const DesignTypography = () => { const drawerFontOptions = useRef(); @@ -142,7 +146,7 @@ const DesignTypography = () => { const paletteRenderedList = []; for ( const fontStyle in fontPalettes ) { const splitLabel = fontPalettes[ fontStyle ]?.label.split( '&', 2 ); - if ( splitLabel.length === 0 ) continue; + if ( splitLabel.length == 0 ) continue; paletteRenderedList.push(
{ } return ( -
-

{ __( 'Font Palettes', 'wp-module-onboarding' ) }

- { /* { selectedFont && -
-
Reset Button
+ +
+

{ __( 'Font Palettes', 'wp-module-onboarding' ) }

+ { /* { selectedFont && +
+
Reset Button
+
+ } */ } + { fontPalettes && buildPalettes() } + { /* { fontPalettes && buildCustomPalette() } */ } +
{ rerender }
- } */ } - { fontPalettes && buildPalettes() } - { /* { fontPalettes && buildCustomPalette() } */ } -
{ rerender }
-
+ ); }; export default DesignTypography; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/index.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/index.js index cdd75fd45..387a416a3 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/index.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/index.js @@ -34,7 +34,7 @@ import classNames from 'classnames'; import { store as nfdOnboardingStore } from '../../../store'; import WithDesignBack from './WithDesignBack'; -const DrawerPanel = () => { +const DrawerPanel = ( { isOpen } ) => { const [ isNavView, setIsNavView ] = useState( true ); // menu-primary is default view const { isDrawerOpen, drawerView } = useSelect( ( select ) => { const { isDrawerOpened, getDrawerView } = select( nfdOnboardingStore ); @@ -121,7 +121,7 @@ const DrawerPanel = () => { - ) } + )}
diff --git a/src/OnboardingSPA/components/Drawer/DrawerToggle/index.js b/src/OnboardingSPA/components/Drawer/DrawerToggle/index.js index cfc95b188..1506bd67a 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerToggle/index.js +++ b/src/OnboardingSPA/components/Drawer/DrawerToggle/index.js @@ -1,57 +1,59 @@ -import { Button, __unstableMotion as motion } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { useEffect, useRef } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; - +import { + Button, + Icon, + __unstableMotion as motion, +} from '@wordpress/components'; import classNames from 'classnames'; import { store as nfdOnboardingStore } from '../../../store'; -const DrawerToggle = ( { isOpen } ) => { - const { isDrawerOpen, isDrawerSuppressed } = useSelect( ( select ) => { +import { useDispatch, useSelect } from '@wordpress/data'; +import { useEffect, useRef } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { wordpress } from '@wordpress/icons'; + +const DrawerToggle = ({ isOpen }) => { + const { isDrawerOpen, isDrawerSuppressed } = useSelect((select) => { return { - isDrawerOpen: select( nfdOnboardingStore ).isDrawerOpened(), - isDrawerSuppressed: - select( nfdOnboardingStore ).isDrawerSuppressed(), + isDrawerOpen: select(nfdOnboardingStore).isDrawerOpened(), + isDrawerSuppressed: select(nfdOnboardingStore).isDrawerSuppressed(), }; - }, [] ); + }, []); - const { setIsDrawerOpened } = useDispatch( nfdOnboardingStore ); + const { setIsDrawerOpened } = useDispatch(nfdOnboardingStore); const drawerToggleRef = useRef(); - useEffect( () => { - if ( ! isDrawerOpen ) { + useEffect(() => { + if (!isDrawerOpen) { drawerToggleRef.current.focus(); } - }, [ isDrawerOpen ] ); + }, [isDrawerOpen]); const toggleDrawer = () => { - isDrawerSuppressed || setIsDrawerOpened( ! isDrawerOpen ); - }; + isDrawerSuppressed || setIsDrawerOpened(!isDrawerOpen); + } return ( diff --git a/src/OnboardingSPA/components/Drawer/index.js b/src/OnboardingSPA/components/Drawer/index.js index 8bca38ffc..9b8908c6a 100644 --- a/src/OnboardingSPA/components/Drawer/index.js +++ b/src/OnboardingSPA/components/Drawer/index.js @@ -1,24 +1,23 @@ -import { useDispatch } from '@wordpress/data'; -import { useViewportMatch } from '@wordpress/compose'; -import { Fragment, useEffect, memo } from '@wordpress/element'; +import { Fragment, useEffect } from '@wordpress/element'; import DrawerPanel from './DrawerPanel'; import DrawerToggle from './DrawerToggle'; import { store as nfdOnboardingStore } from '../../store'; +import { useDispatch } from '@wordpress/data'; +import { useViewportMatch } from '@wordpress/compose'; /** * Off-canvas drawer to left of viewport. - * * @param {*} param0 - * @return + * @returns */ -const Drawer = ( { isDefaultOpen = false } ) => { - const isDesktopViewport = useViewportMatch( 'medium' ); - const { setIsDrawerOpened } = useDispatch( nfdOnboardingStore ); +const Drawer = ({ isDefaultOpen = false }) => { + const isDesktopViewport = useViewportMatch('medium'); + const { setIsDrawerOpened } = useDispatch(nfdOnboardingStore); - useEffect( () => { - setIsDrawerOpened( isDefaultOpen && isDesktopViewport ); - }, [ isDefaultOpen, isDesktopViewport, setIsDrawerOpened ] ); + useEffect(() => { + setIsDrawerOpened(isDefaultOpen && isDesktopViewport); + }, [isDefaultOpen, isDesktopViewport, setIsDrawerOpened]); return ( @@ -28,4 +27,4 @@ const Drawer = ( { isDefaultOpen = false } ) => { ); }; -export default memo( Drawer ); +export default Drawer; diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index db5aecf45..da439f438 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -343,20 +343,19 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); padding: 0 4px; &--reset { - width: 30%; + width: 40%; height: 30px; display: flex; + color: black; cursor: pointer; - margin-top: 12px; + margin-left: 4px; text-align: center; align-items: center; justify-content: center; background-color: white; - color: var(--nfd-onboarding-primary); &:hover { - color: $black; - background-color: #ededed; + background-color: var(--nfd-onboarding-drawer-icon-fill); } } } diff --git a/src/OnboardingSPA/components/Header/index.js b/src/OnboardingSPA/components/Header/index.js index 45d7da21a..b612ef7c7 100644 --- a/src/OnboardingSPA/components/Header/index.js +++ b/src/OnboardingSPA/components/Header/index.js @@ -1,11 +1,10 @@ -import { __ } from '@wordpress/i18n'; import { useLocation } from 'react-router-dom'; -import { memo } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import HeaderEnd from './components/HeaderEnd'; -import ExitToWordPress from '../ExitToWordPress'; import { store as nfdOnboardingStore } from '../../store'; +import ExitToWordPress from '../ExitToWordPress'; +import HeaderEnd from './components/HeaderEnd'; /** * Interface header rendered into header render prop in . @@ -20,7 +19,15 @@ const Header = () => { firstStep: select( nfdOnboardingStore ).getFirstStep(), }; }, [] ); - + const { previousStep, nextStep } = useSelect( + ( select ) => { + return { + previousStep: select( nfdOnboardingStore ).getPreviousStep(), + nextStep: select( nfdOnboardingStore ).getNextStep(), + }; + }, + [ location.path ] + ); const isGettingStarted = firstStep?.path === location?.pathname; return (
@@ -39,4 +46,4 @@ const Header = () => { ); }; -export default memo( Header ); +export default Header; diff --git a/src/OnboardingSPA/components/ImageUploader/index.js b/src/OnboardingSPA/components/ImageUploader/index.js index c4a469b65..c629665e2 100644 --- a/src/OnboardingSPA/components/ImageUploader/index.js +++ b/src/OnboardingSPA/components/ImageUploader/index.js @@ -1,108 +1,107 @@ -import { __ } from '@wordpress/i18n'; -import { memo, useRef, useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { useRef, useState } from '@wordpress/element'; import { ImageUploadLoader } from '../Loaders'; import { uploadImage } from '../../utils/api/uploader'; -/* + /* * Image Uploader * */ -const ImageUploader = ( { icon, iconSetter } ) => { - const inputRef = useRef( null ); - const [ isUploading, setIsUploading ] = useState( false ); +const ImageUploader = ({ icon, iconSetter }) => { - async function updateItem( fileData ) { - if ( fileData ) { - setIsUploading( true ); - const res = await uploadImage( fileData ); - if ( res ) { - const id = res?.body?.id; - const url = res?.body?.source_url; - iconSetter( { - id, - url, - } ); - } else console.error( 'Image Upload Failed' ); - } else console.error( 'No File Attached' ); + const inputRef = useRef(null); + const [isUploading, setIsUploading] = useState(false); - setIsUploading( false ); - } + async function updateItem(fileData) { + if(fileData){ + setIsUploading(true); + const res = await uploadImage(fileData); + if (res) { + const id = res?.body?.id; + const url = res?.body?.source_url; + iconSetter({ + id, + url + }); + } + else console.error('Image Upload Failed'); + } + else console.error('No File Attached'); - const handleClick = () => { - inputRef?.current.click(); - }; + setIsUploading(false); + } - const imageChange = ( e ) => { - if ( e?.target?.files && e?.target?.files.length > 0 ) { - updateItem( e?.target?.files[ 0 ] ); - } - }; + const handleClick = () => { + inputRef?.current.click(); + }; - const removeSelectedImage = () => { - iconSetter( 0 ); - if ( inputRef?.current?.files.length > 0 ) { - inputRef.current.value = ''; - } - }; - function loader() { - return ( -
- -
- ); - } - function getImageUploadWindow() { - return ( -
-
-
- { ( icon == 0 || icon == undefined ) && ( -
- ) } - { icon != 0 && icon != undefined && ( - Thumb - ) } -
-
- { icon != 0 && icon != undefined && ( - - ) } - { ( icon == 0 || icon == undefined ) && ( - - ) } - -
-
- ); - } + const imageChange = (e) => { + if (e?.target?.files && e?.target?.files.length > 0) { + updateItem(e?.target?.files[0]); + } + }; - return ( -
-

Logo

- { isUploading ? loader() : getImageUploadWindow() } -
- ); + const removeSelectedImage = () => { + iconSetter(0); + if (inputRef?.current?.files.length > 0){ + inputRef.current.value = ""; + } + }; + function loader(){ + return ( +
+ +
); + } + function getImageUploadWindow() { + return ( +
+
+
+ {(icon == 0 || icon == undefined) && ( +
) + } + {(icon != 0 && icon != undefined) && ( + Thumb + )} +
+
+ {(icon != 0 && icon != undefined) && ()} + {(icon == 0 || icon == undefined) && ()} + +
+
); + } + + return ( +
+

Logo

+ { isUploading ? loader() : getImageUploadWindow() } +
+ ); }; -export default memo( ImageUploader ); +export default ImageUploader; diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 70d69e684..e34a32660 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -1,7 +1,7 @@ import { useSelect } from '@wordpress/data'; import { BlockEditorProvider } from '@wordpress/block-editor'; import { parse } from '@wordpress/blocks'; -import { useEffect, useState, memo } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; import AutoHeightBlockPreview from './auto'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; @@ -76,25 +76,21 @@ const BlockPreview = ( { } }, [ storedPreviewSettings ] ); - const SkeletonLivePreview = memo( () => { - return ( -
-
- -
-
-
-
-
- ); - } ); - return (
- { loading && } + { loading && ( +
+
+ +
+
+
+
+
+ ) } { settings && ( { useDispatch( nfdOnboardingStore ); const getStylesAndPatterns = async () => { + const globalStyles = await getGlobalStyles(); + if ( globalStyles?.error ) { + return updateThemeStatus( THEME_STATUS_INIT ); + } let selectedGlobalStyle; if ( storedPreviewSettings?.title && storedPreviewSettings?.settings ) selectedGlobalStyle = storedPreviewSettings; - else { - const globalStyles = await getGlobalStyles(); - if ( globalStyles?.error ) { - return updateThemeStatus( THEME_STATUS_INIT ); - } - if ( currentData.data.theme.variation ) { - selectedGlobalStyle = globalStyles.body.filter( - ( globalStyle ) => - globalStyle.title === currentData.data.theme.variation - )[ 0 ]; - } else if ( globalStyles.body[ 0 ]?.id === 0 ) { - selectedGlobalStyle = globalStyles.body[ 0 ]; - } + else if ( currentData.data.theme.variation ) { + selectedGlobalStyle = globalStyles.body.filter( + ( globalStyle ) => + globalStyle.title === currentData.data.theme.variation + )[ 0 ]; + } else if ( globalStyles.body[ 0 ]?.id === 0 ) { + selectedGlobalStyle = globalStyles.body[ 0 ]; } if ( selectedGlobalStyle ) diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js index 2bf4609be..b8a4c4d33 100644 --- a/src/OnboardingSPA/components/MiniPreview/index.js +++ b/src/OnboardingSPA/components/MiniPreview/index.js @@ -1,5 +1,5 @@ import { __, sprintf } from '@wordpress/i18n'; -import { memo, useState, useEffect } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import content from './miniPreview.json'; import { translations } from '../../utils/locales/translations'; @@ -7,221 +7,156 @@ import { translations } from '../../utils/locales/translations'; /** * A Mini Preview Section. * - * @param root0 - * @param root0.title - * @param root0.desc - * @param root0.icon - * @param root0.socialData - * @param root0.isSocialFormOpen - * @param root0.setIsSocialFormOpen - * @return + * @returns */ -const MiniPreview = ( { - title, - desc, - icon, - socialData, - isSocialFormOpen, - setIsSocialFormOpen, -} ) => { - const iconPreview = icon == '' || icon == undefined ? content.icon : icon; - const titlePreview = - title == '' - ? sprintf( - __( content.title, 'wp-module-onboarding' ), - translations( 'Site' ) - ) - : title; - const descPreview = - desc == '' - ? sprintf( - __( content.desc, 'wp-module-onboarding' ), - translations( 'Site' ) - ) - : desc; - const urlPreview = title == '' ? content.url : titleToUrl( title ); +const MiniPreview = ({ title, desc, icon, socialData, isSocialFormOpen, setIsSocialFormOpen }) => { + + var iconPreview = icon == "" || icon == undefined ? content.icon : icon; + var titlePreview = title == "" ? sprintf(__(content.title, 'wp-module-onboarding'), translations('Site')) : title; + var descPreview = desc == "" ? sprintf(__(content.desc, 'wp-module-onboarding'), translations('Site')) : desc; + var urlPreview = title == "" ? content.url : titleToUrl(title); - const [ facebook, setFacebook ] = useState( '' ); - const [ twitter, setTwitter ] = useState( '' ); - const [ instagram, setInstagram ] = useState( '' ); - const [ youtube, setYouTube ] = useState( '' ); - const [ linkedin, setLinkedIn ] = useState( '' ); - const [ yelp, setYelp ] = useState( '' ); - const [ tiktok, setTikTok ] = useState( '' ); + const [facebook, setFacebook] = useState(""); + const [twitter, setTwitter] = useState(""); + const [instagram, setInstagram] = useState(""); + const [youtube, setYouTube] = useState(""); + const [linkedin, setLinkedIn] = useState(""); + const [yelp, setYelp] = useState(""); + const [tiktok, setTikTok] = useState(""); - useEffect( () => { - setFacebook( socialData?.facebook_site ?? '' ); - setTwitter( socialData?.twitter_site ?? '' ); - setInstagram( socialData?.instagram_url ?? '' ); - setYouTube( socialData?.youtube_url ?? '' ); - setLinkedIn( socialData?.linkedin_url ?? '' ); - if ( + useEffect(() => { + setFacebook((socialData?.facebook_site) ?? ""); + setTwitter(socialData?.twitter_site ?? ""); + setInstagram(socialData?.instagram_url ?? ""); + setYouTube(socialData?.youtube_url ?? ""); + setLinkedIn(socialData?.linkedin_url ?? ""); + if ( socialData && Object.keys( socialData ).includes( 'other_social_urls' ) - ) { - const otherURLS = socialData.other_social_urls; - if ( Object.keys( otherURLS ).includes( 'yelp_url' ) ) - setYelp( otherURLS.yelp_url ?? '' ); + ) + { + const otherURLS = socialData.other_social_urls; + if (Object.keys(otherURLS).includes("yelp_url")) + setYelp(otherURLS["yelp_url"] ?? ""); - if ( Object.keys( otherURLS ).includes( 'tiktok_url' ) ) - setTikTok( otherURLS.tiktok_url ?? '' ); - } - }, [ socialData ] ); + if (Object.keys(otherURLS).includes("tiktok_url")) + setTikTok(otherURLS["tiktok_url"] ?? ""); + } + }, [socialData]); - const isValidUrl = ( urlString ) => { - let url; - try { - url = new URL( urlString ); - } catch ( e ) { - return false; - } + const isValidUrl = (urlString) => { + let url; + try { + url = new URL(urlString); + } + catch (e) { + return false; + } - if ( url.protocol !== 'http:' && url.protocol !== 'https:' ) - return false; - return true; - }; + if (url.protocol !== "http:" && url.protocol !== "https:") + return false; + return true; + } - const socialDataset = [ - { url: facebook, image: 'var(--facebook-colored-icon)' }, - { url: twitter, image: 'var(--twitter-colored-icon)' }, - { url: instagram, image: 'var(--instagram-colored-icon)' }, - { url: youtube, image: 'var(--youtube-colored-icon)' }, - { url: linkedin, image: 'var(--linkedin-colored-icon)' }, - { url: yelp, image: 'var(--yelp-colored-icon)' }, - { url: tiktok, image: 'var(--tiktok-colored-icon)' }, - ]; + var socialDataset = [ + {url: facebook, image: 'var(--facebook-colored-icon)'}, + {url: twitter, image: 'var(--twitter-colored-icon)'}, + {url: instagram, image: 'var(--instagram-colored-icon)'}, + {url: youtube, image: 'var(--youtube-colored-icon)'}, + {url: linkedin, image: 'var(--linkedin-colored-icon)'}, + {url: yelp, image: 'var(--yelp-colored-icon)'}, + {url: tiktok, image: 'var(--tiktok-colored-icon)'}, + ] + + function titleToUrl(title) { + return `https://${title?.toLowerCase().replace(/\s/g, '').replace(/\W/g, '')}.com`; + } - function titleToUrl( title ) { - return `https://${ title - ?.toLowerCase() - .replace( /\s/g, '' ) - .replace( /\W/g, '' ) }.com`; - } - - function socialIconList() { - return socialDataset.map( ( socialInfo ) => { - return ( -
- setIsSocialFormOpen( ! isSocialFormOpen ) - } - className={ `browser-content_social_icon ${ - socialInfo.url - ? isValidUrl( socialInfo.url ) || '--invalid-url' - : '--no-url' - }` } - style={ { backgroundImage: socialInfo.image } } - /> - ); - } ); - } - - return ( -
-

Preview

-
-
-
-
- - - -
-
-
-
-
-
-
- { ( icon == 0 || icon == undefined ) && ( -
- ) } - { icon != 0 && icon != undefined && ( - Thumb - ) } -
- { __( - titlePreview?.substring( 0, 20 ), - 'wp-module-onboarding' - ) } -
-
- x -
-
-
-
-
-
-
-
-
-
-
-
-
-
- {} } - value={ __( urlPreview, 'wp-module-onboarding' ) } - > -
-
-
-
-
-
-
-

- { __( titlePreview, 'wp-module-onboarding' ) } -

- - { __( urlPreview, 'wp-module-onboarding' ) } - -
-
- { __( descPreview, 'wp-module-onboarding' ) } -
-
- { socialIconList() } -
-
-
-
- ); + function socialIconList() { + return socialDataset.map( (socialInfo) => { + return ( +
setIsSocialFormOpen(!isSocialFormOpen)} + className={`browser-content_social_icon ${socialInfo.url ? isValidUrl(socialInfo.url) || '--invalid-url' : '--no-url' }`} + style={{ backgroundImage: socialInfo.image }} /> + ) + }) + } + + return ( +
+

Preview

+
+
+
+
+ + + +
+
+
+
+
+
+
+ {(icon == 0 || icon == undefined) && (
)} + {(icon != 0 && icon != undefined) && (Thumb)} +
{__( + titlePreview?.substring(0, 20), + 'wp-module-onboarding' + )}
+
x
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {}} value={__( + urlPreview, + 'wp-module-onboarding' + )}> +
+
+
+
+
+
+
+

{__( + titlePreview, + 'wp-module-onboarding' + )}

+ {__( + urlPreview, + 'wp-module-onboarding' + )} +
+
+ {__( + descPreview, + 'wp-module-onboarding' + )} +
+
+ {socialIconList()} +
+
+
+
+ ); }; -export default memo( MiniPreview ); +export default MiniPreview; diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js index 0d3055c4f..a3ff944a6 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js @@ -1,5 +1,5 @@ import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components'; -import { Fragment, memo, Suspense } from '@wordpress/element'; +import { Fragment, Suspense } from '@wordpress/element'; import { closeSmall } from '@wordpress/icons'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -57,4 +57,4 @@ const LearnMoreSidebar = () => { ); }; -export default memo( LearnMoreSidebar ); +export default LearnMoreSidebar; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js index f8ec79613..119735a11 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js @@ -58,12 +58,14 @@ const GetStartedExperience = () => { } }, [ isLoaded ] ); - const saveData = ( value ) => { - setWpComfortLevel( value ); - const currentDataCopy = currentData; - currentDataCopy.data.wpComfortLevel = value || '0'; - setCurrentOnboardingData( currentDataCopy ); - }; + useEffect( () => { + const saveData = async () => { + const currentDataCopy = currentData; + currentDataCopy.data.wpComfortLevel = wpComfortLevel || '0'; + setCurrentOnboardingData( currentDataCopy ); + }; + if ( isLoaded ) saveData(); + }, [ wpComfortLevel ] ); return ( @@ -100,7 +102,7 @@ const GetStartedExperience = () => { ), }; } ) } - onChange={ ( value ) => saveData( value ) } + onChange={ ( value ) => setWpComfortLevel( value ) } />