Add/PRESS 2 111 extract social media data outside current data

.gitignore

@@ -1,3 +1,4 @@
+build
 node_modules
 vendor
 .DS_Store

src/OnboardingSPA/components/App/index.js

@@ -32,26 +32,33 @@ const App = () => {
 		isDrawerOpen,
 		newfoldBrand,
 		onboardingFlow,
-		currentData,
+		flowData,
+		socialData,
 		firstStep
 	} = useSelect((select) => {
 		return {
 			isDrawerOpen: select(nfdOnboardingStore).isDrawerOpened(),
 			newfoldBrand: select(nfdOnboardingStore).getNewfoldBrand(),
 			onboardingFlow: select(nfdOnboardingStore).getOnboardingFlow(),
-			currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
+			flowData: select(nfdOnboardingStore).getCurrentOnboardingFlowData(),
+			socialData: select(nfdOnboardingStore).getCurrentOnboardingSocialData(),
 			firstStep: select(nfdOnboardingStore).getFirstStep(),
 		};
 	}, []);
 
 	const [isRequestPlaced, setIsRequestPlaced] = useState(false);
 	const [didVisitBasicInfo, setDidVisitBasicInfo] = useState(false);
 	const [didVisitEcommerce, setDidVisitEcommerce] = useState(false);
-	const { setActiveStep, setActiveFlow, setCurrentOnboardingData } = useDispatch(nfdOnboardingStore);
+	const { 
+		setActiveStep, 
+		setActiveFlow, 
+		setCurrentOnboardingFlowData, 
+		setCurrentOnboardingSocialData 
+	} = useDispatch(nfdOnboardingStore);
 
 	async function syncSocialSettings() {
 		const initialData = await getSettings();
-		const result = await setSettings(currentData?.data?.socialData);
+		const result = await setSettings(socialData);
 		setDidVisitBasicInfo(false);
 		if (result?.error != null) {
 			console.error('Unable to Save Social Data!');
@@ -61,7 +68,7 @@ const App = () => {
 	}
 
 	async function syncStoreDetails() {
-		let { address, tax } = currentData.storeDetails;
+		let { address, tax } = flowData?.storeDetails;
 		let payload = {};
 		if (address !== undefined) {
 			delete address.country;
@@ -86,15 +93,15 @@ const App = () => {
 		if (!isEmpty(payload)) {
 			await updateWPSettings(payload);
 		}
-		delete currentData.storeDetails.address;
-		delete currentData.storeDetails.tax;
+		delete flowData?.storeDetails?.address;
+		delete flowData?.storeDetails?.tax;
 		setDidVisitEcommerce(false);
 	}
 
 	async function syncStoreToDB() {
 		// The First Welcome Step doesn't have any Store changes
 		const isFirstStep = location?.pathname === firstStep?.path;
-		if (currentData && !isFirstStep){
+		if (flowData && !isFirstStep){
 			if(!isRequestPlaced){
 				setIsRequestPlaced(true);
 
@@ -104,19 +111,19 @@ const App = () => {
 
 				// If Social Data is changed then sync it
 				if (didVisitBasicInfo){
-					const socialData = await syncSocialSettings();
+					const socialDataToBeSaved = await syncSocialSettings();
 
 					// If Social Data is changed then Sync that also to the store
-					if (socialData && currentData?.data)
-						currentData.data.socialData = socialData;
+					if (socialDataToBeSaved && flowData?.data)
+						setCurrentOnboardingSocialData(socialDataToBeSaved);
 				} 
 
-				const result = await setFlow(currentData);
+				const result = await setFlow(flowData);
 				if (result?.error != null) {
 					setIsRequestPlaced(false);
 					console.error('Unable to Save data!');
 				} else {
-					setCurrentOnboardingData(result?.body);
+					setCurrentOnboardingFlowData(result?.body);
 					setIsRequestPlaced(false);
 				}
 

src/OnboardingSPA/components/ExitToWordPress/index.js

@@ -31,10 +31,10 @@ const ExitToWordPress = ({
 	const closeModal = () => setIsOpen(false);
 
 	const location = useLocation();
-	const { currentData } = useSelect(
+	const { flowData } = useSelect(
 		(select) => {
 			return {
-				currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
+				flowData: select(nfdOnboardingStore).getCurrentOnboardingFlowData(),
 			};
 		},
 		[location.pathname]
@@ -45,30 +45,30 @@ const ExitToWordPress = ({
 		'wp-module-onboarding'
 	);
 
-	async function syncSocialSettingsFinish(currentData) {
+	async function syncSocialSettingsFinish(flowData) {
 		const initialData = await getSettings();
-		const result = await setSettings(currentData?.data?.socialData);
+		const result = await setSettings(flowData?.data?.socialData);
 		if (result?.error != null) {
 			console.error('Unable to Save Social Data!');
 			return initialData?.body;
 		}
 		return result?.body;
 	}
 
-	async function saveData(path, currentData) {
+	async function saveData(path, flowData) {
 
-		if (currentData) {
-               currentData.hasExited = new Date().getTime();
+		if (flowData) {
+               flowData.hasExited = new Date().getTime();
 
 			// If Social Data is changed then sync it
 			if (path?.includes('basic-info')) {
-				const socialData = await syncSocialSettingsFinish(currentData);
+				const socialData = await syncSocialSettingsFinish(flowData);
 
 				// If Social Data is changed then Sync that also to the store
-				if (socialData && currentData?.data)
-					currentData.data.socialData = socialData;
+				if (socialData && flowData?.data)
+					flowData.data.socialData = socialData;
 			}
-			setFlow(currentData);
+			setFlow(flowData);
 		}
 		//Redirect to Admin Page for normal customers 
 		// and Bluehost Dashboard for ecommerce customers
@@ -98,7 +98,7 @@ const ExitToWordPress = ({
 						</Button>
 						<Button
 							variant="primary"
-							onClick={(e) => saveData(location.pathname, currentData)} >
+							onClick={(e) => saveData(location.pathname, flowData)} >
 							{__('Exit', 'wp-module-onboarding')}
 						</Button>
 					</ButtonGroup>

src/OnboardingSPA/components/Header/step-navigation.js

@@ -47,29 +47,29 @@ const Next = ({ path }) => {
 	);
 };
 
-async function syncSocialSettingsFinish( currentData ) {
+async function syncSocialSettingsFinish( flowData ) {
 	const initialData = await getSettings();
-	const result = await setSettings(currentData?.data?.socialData);
+	const result = await setSettings(flowData?.data?.socialData);
 	if (result?.error != null) {
 		console.error('Unable to Save Social Data!');
 		return initialData?.body;
 	}
 	return result?.body;
 }
 
-async function saveData(path, currentData) {
+async function saveData(path, flowData) {
 
-	if (currentData) {
-          currentData.isComplete = new Date().getTime();
+	if (flowData) {
+          flowData.isComplete = new Date().getTime();
 		// If Social Data is changed then sync it
 		if (path?.includes('basic-info')) {
-			const socialData = await syncSocialSettingsFinish(currentData);
+			const socialData = await syncSocialSettingsFinish(flowData);
 
 			// If Social Data is changed then Sync that also to the store
-			if (socialData && currentData?.data)
-				currentData.data.socialData = socialData;
+			if (socialData && flowData?.data)
+				flowData.data.socialData = socialData;
 		}
-		setFlow(currentData);
+		setFlow(flowData);
 	}
 	//Redirect to Admin Page for normal customers 
 	// and Bluehost Dashboard for ecommerce customers
@@ -81,9 +81,9 @@ async function saveData(path, currentData) {
  * Finish step navigation button.
  * @returns
  */
-const Finish = ({ path, currentData, saveData }) => (
+const Finish = ({ path, flowData, saveData }) => (
 	<Button
-		onClick={(e) => saveData(path, currentData)}
+		onClick={(e) => saveData(path, flowData)}
 		className="navigation-buttons navigation-buttons_finish"
 		variant="primary">
 		{__('Finish', 'wp-module-onboarding')}
@@ -97,12 +97,12 @@ const Finish = ({ path, currentData, saveData }) => (
  */
 const StepNavigation = () => {
 	const location = useLocation();
-	const { previousStep, nextStep, currentData } = useSelect(
+	const { previousStep, nextStep, flowData } = useSelect(
 		(select) => {
 			return {
 				nextStep: select(nfdOnboardingStore).getNextStep(),
 				previousStep: select(nfdOnboardingStore).getPreviousStep(),
-				currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
+				flowData: select(nfdOnboardingStore).getCurrentOnboardingFlowData(),
 			};
 		},
 		[location.pathname]
@@ -113,7 +113,7 @@ const StepNavigation = () => {
 		<div className="nfd-onboarding-header__step-navigation">
 			<ButtonGroup style={{ display: 'flex', columnGap: '0.5rem' }}>
 				{isFirstStep ? null : <Back path={previousStep.path} />}
-				{isLastStep ? <Finish path={location.pathname} currentData={currentData} saveData={saveData}/> : <Next path={nextStep.path} />}
+				{isLastStep ? <Finish path={location.pathname} flowData={flowData} saveData={saveData}/> : <Next path={nextStep.path} />}
 			</ButtonGroup>
 		</div>
 	);

src/OnboardingSPA/components/MiniPreview/index.js

@@ -24,19 +24,20 @@ const MiniPreview = ({ title, desc, icon, socialData }) => {
     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 (Object.keys(socialData).includes("other_social_urls"))
-        {
-            const otherURLS = socialData.other_social_urls;
-            if (Object.keys(otherURLS).includes("yelp_url"))
-                setYelp(otherURLS["yelp_url"] ?? "");
+        if( socialData ) {
+            setFacebook((socialData?.facebook_site) ?? "");
+            setTwitter(socialData?.twitter_site ?? "");
+            setInstagram(socialData?.instagram_url ?? "");
+            setYouTube(socialData?.youtube_url ?? "");
+            setLinkedIn(socialData?.linkedin_url ?? "");
+            if (Object.keys(socialData).includes("other_social_urls")) {
+                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"] ?? "");
+                if (Object.keys(otherURLS).includes("tiktok_url"))
+                    setTikTok(otherURLS["tiktok_url"] ?? "");
+            }
         }
     }, [socialData]);
 
@@ -70,11 +71,13 @@ const MiniPreview = ({ title, desc, icon, socialData }) => {
 
     function socialIconList() {
         var socialIconList = []
-        socialDataset.map( (socialInfo) => {
+        if (socialDataset) {
+            socialDataset.map( (socialInfo) => {
                 !socialInfo.url ||
                 socialIconList.push(
                     <div key={socialInfo.image} className={`browser-content_social_icon ${isValidUrl(socialInfo.url) || 'invalid-url' }`} style={{ backgroundImage: socialInfo.image }} />)
-        })
+            })
+        }
         return socialIconList;
     }
 

src/OnboardingSPA/components/SkipButton/index.js

@@ -17,12 +17,12 @@ const SkipButton = () => {
 
     const navigate = useNavigate();
     const location = useLocation();
-    const { previousStep, nextStep, currentData } = useSelect(
+    const { previousStep, nextStep, flowData } = useSelect(
         (select) => {
             return {
                 previousStep: select(nfdOnboardingStore).getPreviousStep(),
                 nextStep: select(nfdOnboardingStore).getNextStep(),
-                currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
+                flowData: select(nfdOnboardingStore).getCurrentOnboardingFlowData(),
             };
         },
         []
@@ -32,30 +32,30 @@ const SkipButton = () => {
     const isLastStep = null === nextStep || false === nextStep;
 
 
-    async function syncSocialSettingsFinish(currentData) {
+    async function syncSocialSettingsFinish(flowData) {
         const initialData = await getSettings();
-        const result = await setSettings(currentData?.data?.socialData);
+        const result = await setSettings(flowData?.data?.socialData);
         if (result?.error != null) {
             console.error('Unable to Save Social Data!');
             return initialData?.body;
         }
         return result?.body;
     }
 
-    async function saveData(path, currentData) {
+    async function saveData(path, flowData) {
 
-        if (currentData) {
-          currentData.isComplete = new Date().getTime();
+        if (flowData) {
+          flowData.isComplete = new Date().getTime();
 
             // If Social Data is changed then sync it
             if (path?.includes('basic-info')) {
-                const socialData = await syncSocialSettingsFinish(currentData);
+                const socialData = await syncSocialSettingsFinish(flowData);
 
                 // If Social Data is changed then Sync that also to the store
-                if (socialData && currentData?.data)
-                    currentData.data.socialData = socialData;
+                if (socialData && flowData?.data)
+                    flowData.data.socialData = socialData;
             }
-            setFlow(currentData);
+            setFlow(flowData);
         }
         // Redirect to Admin Page for normal customers 
         // and Bluehost Dashboard for ecommerce customers
@@ -68,7 +68,7 @@ const SkipButton = () => {
        {
            return (
                <Button className="skip-button"
-                   onClick={(e) => saveData(location.pathname, currentData)} >
+                   onClick={(e) => saveData(location.pathname, flowData)} >
                     {__('Skip this Step', 'wp-module-onboarding')}
                 </Button>
            );

src/OnboardingSPA/components/SocialMediaForm/index.js

@@ -49,21 +49,21 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
     }
 
     useEffect(() => {
-        setFacebook(socialData?.facebook_site ?? "");
-        setTwitter(socialData?.twitter_site ?? "");
-        setInstagram(socialData?.instagram_url ?? "");
-        setYouTube(socialData?.youtube_url ?? "");
-        setLinkedIn(socialData?.linkedin_url ?? "");
-        if (Object.keys(socialData).includes("other_social_urls"))
-        {
-            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"] ?? "");
+        if( socialData ) {
+            setFacebook(socialData?.facebook_site ?? "");
+            setTwitter(socialData?.twitter_site ?? "");
+            setInstagram(socialData?.instagram_url ?? "");
+            setYouTube(socialData?.youtube_url ?? "");
+            setLinkedIn(socialData?.linkedin_url ?? "");
+            if (Object.keys(socialData).includes("other_social_urls")) {
+                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]);
 
     const isValidUrl = (urlString) => {