{ rerender }
);
};
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
index 70d69e684..9a3c793d3 100644
--- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
+++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
@@ -51,10 +51,14 @@ const BlockPreview = ( {
}
}, [ skeletonLoadingTime ] );
- const storedPreviewSettings = useSelect(
- ( select ) => select( nfdOnboardingStore ).getPreviewSettings(),
- []
- );
+ const { currentData, storedPreviewSettings } = useSelect( ( select ) => {
+ return {
+ currentData:
+ select( nfdOnboardingStore ).getCurrentOnboardingData(),
+ storedPreviewSettings:
+ select( nfdOnboardingStore ).getPreviewSettings(),
+ };
+ }, [] );
useEffect( () => {
if ( previewSettings ) {
@@ -74,7 +78,7 @@ const BlockPreview = ( {
if ( ! previewSettings ) {
setSettings( storedPreviewSettings );
}
- }, [ storedPreviewSettings ] );
+ }, [ storedPreviewSettings, currentData ] );
const SkeletonLivePreview = memo( () => {
return (
@@ -110,4 +114,5 @@ const BlockPreview = ( {
);
};
-export default BlockPreview;
+const BlockPreviewMemo = memo( BlockPreview );
+export default BlockPreviewMemo;
diff --git a/src/OnboardingSPA/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js
index 0f48ccd48..995b71d7d 100644
--- a/src/OnboardingSPA/components/SkipButton/index.js
+++ b/src/OnboardingSPA/components/SkipButton/index.js
@@ -1,4 +1,5 @@
import { __ } from '@wordpress/i18n';
+import { memo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { Button } from '@wordpress/components';
import { useLocation, useNavigate } from 'react-router-dom';
@@ -11,89 +12,88 @@ import { wpAdminPage, bluehostDashboardPage } from '../../../constants';
/**
* Interface Text Inputs with standard design.
*
- * @returns
+ * @return
*/
const SkipButton = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { nextStep, currentData } = useSelect( ( select ) => {
+ return {
+ nextStep: select( nfdOnboardingStore ).getNextStep(),
+ currentData:
+ select( nfdOnboardingStore ).getCurrentOnboardingData(),
+ };
+ }, [] );
- const navigate = useNavigate();
- const location = useLocation();
- const { previousStep, nextStep, currentData } = useSelect(
- (select) => {
- return {
- previousStep: select(nfdOnboardingStore).getPreviousStep(),
- nextStep: select(nfdOnboardingStore).getNextStep(),
- currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
- };
- },
- []
- );
+ const isLastStep = null === nextStep || false === nextStep;
- const isFirstStep = null === previousStep || false === previousStep;
- const isLastStep = null === nextStep || false === nextStep;
+ async function syncSocialSettingsFinish( currentData ) {
+ const initialData = await getSettings();
+ const result = await setSettings( currentData?.data?.socialData );
+ if ( result?.error != null ) {
+ console.error( 'Unable to Save Social Data!' );
+ return initialData?.body;
+ }
+ return result?.body;
+ }
+ async function saveData( path, currentData ) {
+ if ( currentData ) {
+ currentData.isComplete = new Date().getTime();
- async function syncSocialSettingsFinish(currentData) {
- const initialData = await getSettings();
- const result = await setSettings(currentData?.data?.socialData);
- if (result?.error != null) {
- console.error('Unable to Save Social Data!');
- return initialData?.body;
- }
- return result?.body;
- }
+ // If Social Data is changed then sync it
+ if ( path?.includes( 'basic-info' ) ) {
+ const socialData = await syncSocialSettingsFinish(
+ currentData
+ );
- async function saveData(path, currentData) {
+ // If Social Data is changed then Sync that also to the store
+ if ( socialData && currentData?.data )
+ currentData.data.socialData = socialData;
+ }
+ setFlow( currentData );
+ }
+ // Redirect to Admin Page for normal customers
+ // and Bluehost Dashboard for ecommerce customers
+ const exitLink = exitToWordpressForEcommerce()
+ ? bluehostDashboardPage
+ : wpAdminPage;
+ window.location.replace( exitLink );
+ }
- if (currentData) {
- currentData.isComplete = new Date().getTime();
+ function skipStep() {
+ if ( isLastStep ) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
- // If Social Data is changed then sync it
- if (path?.includes('basic-info')) {
- const socialData = await syncSocialSettingsFinish(currentData);
-
- // If Social Data is changed then Sync that also to the store
- if (socialData && currentData?.data)
- currentData.data.socialData = socialData;
- }
- setFlow(currentData);
- }
- // Redirect to Admin Page for normal customers
- // and Bluehost Dashboard for ecommerce customers
- const exitLink = exitToWordpressForEcommerce() ? bluehostDashboardPage : wpAdminPage;
- window.location.replace(exitLink);
- }
-
- function skipStep() {
- if (isLastStep)
- {
- return (
-
- );
- }
- else {
- return (
-
- );
- }
- }
-
- return skipStep();
+ return skipStep();
};
-
/*
- * check if this is the last step
+ * check if this is the last step
*/
const exitToWordpressForEcommerce = () => {
- if (window.nfdOnboarding.currentFlow == 'ecommerce') {
- return true;
- }
- return false;
-}
-export default SkipButton;
+ if ( window.nfdOnboarding.currentFlow == 'ecommerce' ) {
+ return true;
+ }
+ return false;
+};
+
+const SkipButtonMemo = memo( SkipButton );
+export default SkipButtonMemo;
diff --git a/src/OnboardingSPA/components/TextInput/index.js b/src/OnboardingSPA/components/TextInput/index.js
index c5367585a..2fafad95a 100644
--- a/src/OnboardingSPA/components/TextInput/index.js
+++ b/src/OnboardingSPA/components/TextInput/index.js
@@ -1,58 +1,74 @@
-import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useRef, useEffect, useState, memo } from '@wordpress/element';
/**
* Interface Text Inputs with standard design.
*
- * @returns
+ * @param root0
+ * @param root0.title
+ * @param root0.hint
+ * @param root0.placeholder
+ * @param root0.height
+ * @param root0.maxCharacters
+ * @param root0.textValue
+ * @param root0.textValueSetter
+ * @return
*/
-const TextInput = ({ title, hint, placeholder, height, maxCharacters, textValue, textValueSetter }) => {
+const TextInput = ( {
+ title,
+ hint,
+ placeholder,
+ height,
+ maxCharacters,
+ textValue,
+ textValueSetter,
+} ) => {
+ const textareaRef = useRef( null );
+ const [ inputText, setInputText ] = useState( 'nfd-input__field' );
- const textareaRef = useRef(null);
- const [inputText, setInputText] = useState("nfd-input__field");
+ useEffect( () => {
+ textareaRef.current.style.height = height;
+ const scrollHeight = textareaRef.current.scrollHeight;
+ textareaRef.current.style.height = scrollHeight + 'px';
+ }, [ textValue ] );
- useEffect(() => {
- textareaRef.current.style.height = height;
- const scrollHeight = textareaRef.current.scrollHeight;
- textareaRef.current.style.height = scrollHeight + "px";
- }, [textValue]);
+ const onTextChange = ( e ) => {
+ e.preventDefault();
+ textValueSetter( e.target.value );
- const onTextChange = (e) => {
- e.preventDefault();
- textValueSetter(e.target.value);
-
- e.target.value.length == maxCharacters ?
- setInputText("nfd-input__field nfd-input__field_error") :
- setInputText("nfd-input__field")
- }
+ e.target.value.length == maxCharacters
+ ? setInputText( 'nfd-input__field nfd-input__field_error' )
+ : setInputText( 'nfd-input__field' );
+ };
- return (
-
-