@@ -46,4 +39,4 @@ const Header = () => {
);
};
-export default Header;
+export default memo( Header );
diff --git a/src/OnboardingSPA/components/ImageUploader/index.js b/src/OnboardingSPA/components/ImageUploader/index.js
index c629665e2..c4a469b65 100644
--- a/src/OnboardingSPA/components/ImageUploader/index.js
+++ b/src/OnboardingSPA/components/ImageUploader/index.js
@@ -1,107 +1,108 @@
-import { __ } from '@wordpress/i18n';
-import { useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { memo, useRef, useState } from '@wordpress/element';
import { ImageUploadLoader } from '../Loaders';
import { uploadImage } from '../../utils/api/uploader';
- /*
+/*
* Image Uploader
*
*/
-const ImageUploader = ({ icon, iconSetter }) => {
+const ImageUploader = ( { icon, iconSetter } ) => {
+ const inputRef = useRef( null );
+ const [ isUploading, setIsUploading ] = useState( false );
- const inputRef = useRef(null);
- const [isUploading, setIsUploading] = useState(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' );
- 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');
+ setIsUploading( false );
+ }
- setIsUploading(false);
- }
+ const handleClick = () => {
+ inputRef?.current.click();
+ };
- const handleClick = () => {
- inputRef?.current.click();
- };
+ const imageChange = ( e ) => {
+ if ( e?.target?.files && e?.target?.files.length > 0 ) {
+ updateItem( e?.target?.files[ 0 ] );
+ }
+ };
- const imageChange = (e) => {
- if (e?.target?.files && e?.target?.files.length > 0) {
- updateItem(e?.target?.files[0]);
- }
- };
+ const removeSelectedImage = () => {
+ iconSetter( 0 );
+ if ( inputRef?.current?.files.length > 0 ) {
+ inputRef.current.value = '';
+ }
+ };
+ function loader() {
+ return (
+
+
+ );
+ }
+ function getImageUploadWindow() {
+ return (
+
+
+
+ );
+ }
- const removeSelectedImage = () => {
- iconSetter(0);
- if (inputRef?.current?.files.length > 0){
- inputRef.current.value = "";
- }
- };
- function loader(){
- return (
-
+ { ( icon == 0 || icon == undefined ) && (
+
+ ) }
+ { icon != 0 && icon != undefined && (
+ 
+ ) }
+
+
+ { icon != 0 && icon != undefined && (
+
+ ) }
+ { ( icon == 0 || icon == undefined ) && (
+
+ ) }
+
+
+
-
);
- }
- function getImageUploadWindow() {
- return (
-
-
-
);
- }
-
- return (
-
- {(icon == 0 || icon == undefined) && (
- )
- }
- {(icon != 0 && icon != undefined) && (
- 
- )}
-
-
- {(icon != 0 && icon != undefined) && ()}
- {(icon == 0 || icon == undefined) && ()}
-
-
-
-
- );
+ return (
+ Logo
- { isUploading ? loader() : getImageUploadWindow() } -
+
+ );
};
-export default ImageUploader;
+export default memo( ImageUploader );
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
index e34a32660..70d69e684 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 } from '@wordpress/element';
+import { useEffect, useState, memo } from '@wordpress/element';
import AutoHeightBlockPreview from './auto';
import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
@@ -76,21 +76,25 @@ const BlockPreview = ( {
}
}, [ storedPreviewSettings ] );
+ const SkeletonLivePreview = memo( () => {
+ return (
+ Logo
+ { isUploading ? loader() : getImageUploadWindow() } +
+
+ );
+ } );
+
return (
+
+
+
+
+
- { loading && (
- {
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 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 {
+ 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 ];
+ }
}
if ( selectedGlobalStyle )
diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js
index b8a4c4d33..2bf4609be 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 { useState, useEffect } from '@wordpress/element';
+import { memo, useState, useEffect } from '@wordpress/element';
import content from './miniPreview.json';
import { translations } from '../../utils/locales/translations';
@@ -7,156 +7,221 @@ import { translations } from '../../utils/locales/translations';
/**
* A Mini Preview Section.
*
- * @returns
+ * @param root0
+ * @param root0.title
+ * @param root0.desc
+ * @param root0.icon
+ * @param root0.socialData
+ * @param root0.isSocialFormOpen
+ * @param root0.setIsSocialFormOpen
+ * @return
*/
-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 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 [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;
+ };
- 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`;
- }
+ 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)' },
+ ];
- function socialIconList() {
- return socialDataset.map( (socialInfo) => {
- return (
-
-
- ) }
+ { loading &&
-
-
-
-
- setIsSocialFormOpen(!isSocialFormOpen)}
- className={`browser-content_social_icon ${socialInfo.url ? isValidUrl(socialInfo.url) || '--invalid-url' : '--no-url' }`}
- style={{ backgroundImage: socialInfo.image }} />
- )
- })
- }
-
- return (
-
-
- );
+ function titleToUrl( title ) {
+ return `https://${ title
+ ?.toLowerCase()
+ .replace( /\s/g, '' )
+ .replace( /\W/g, '' ) }.com`;
+ }
+
+ function socialIconList() {
+ return socialDataset.map( ( socialInfo ) => {
+ return (
+ Preview
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(icon == 0 || icon == undefined) && ()}
- {(icon != 0 && icon != undefined) && (
)}
-
- {__(
- 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()}
-
-
+ setIsSocialFormOpen( ! isSocialFormOpen )
+ }
+ className={ `browser-content_social_icon ${
+ socialInfo.url
+ ? isValidUrl( socialInfo.url ) || '--invalid-url'
+ : '--no-url'
+ }` }
+ style={ { backgroundImage: socialInfo.image } }
+ />
+ );
+ } );
+ }
+
+ return (
+
@@ -102,7 +100,7 @@ const GetStartedExperience = () => {
),
};
} ) }
- onChange={ ( value ) => setWpComfortLevel( value ) }
+ onChange={ ( value ) => saveData( value ) }
/>
+
+ );
};
-export default MiniPreview;
+export default memo( MiniPreview );
diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js
index a3ff944a6..0d3055c4f 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, Suspense } from '@wordpress/element';
+import { Fragment, memo, 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 LearnMoreSidebar;
+export default memo( LearnMoreSidebar );
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
index 119735a11..f8ec79613 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
@@ -58,14 +58,12 @@ const GetStartedExperience = () => {
}
}, [ isLoaded ] );
- useEffect( () => {
- const saveData = async () => {
- const currentDataCopy = currentData;
- currentDataCopy.data.wpComfortLevel = wpComfortLevel || '0';
- setCurrentOnboardingData( currentDataCopy );
- };
- if ( isLoaded ) saveData();
- }, [ wpComfortLevel ] );
+ const saveData = ( value ) => {
+ setWpComfortLevel( value );
+ const currentDataCopy = currentData;
+ currentDataCopy.data.wpComfortLevel = value || '0';
+ setCurrentOnboardingData( currentDataCopy );
+ };
return (
Preview
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { ( icon == 0 || icon == undefined ) && (
+
+ ) }
+ { icon != 0 && icon != undefined && (
+
+ ) }
+
+
+ { __(
+ 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() }
+
+