Merge pull request #140 from newfold-labs/PRESS-2-470-Improve-Social-…

…Media-Capture-UI Press 2 470 Improve Social Media capture UI
newfold-labs · Jan 4, 2023 · 2f73e05 · 2f73e05
2 parents 0b4e51b + 11f4983
commit 2f73e05
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js
@@ -9,7 +9,7 @@ import { translations } from '../../utils/locales/translations';
  *
  * @returns
  */
-const MiniPreview = ({ title, desc, icon, socialData }) => {
+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;
@@ -70,13 +70,14 @@ const MiniPreview = ({ title, desc, icon, socialData }) => {
     }
 
     function socialIconList() {
-        var socialIconList = []
-        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;
+        return socialDataset.map( (socialInfo) => {
+            return (
+                <div key={socialInfo.image} 
+                    onClick={(e) => setIsSocialFormOpen(!isSocialFormOpen)}
+                    className={`browser-content_social_icon ${socialInfo.url ? isValidUrl(socialInfo.url) || '--invalid-url' : '--no-url' }`} 
+                    style={{ backgroundImage: socialInfo.image }} />
+                )
+            })
     }
 
     return (

diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
@@ -88,17 +88,26 @@ $title-browser-color: #3858E9;
         justify-content: flex-start;
 
         &_icon{
+            opacity: 1;
             width: 24px;
             height: 24px;
+            filter: none;
+            cursor: pointer;
             text-align: center;
             padding-right: 6px;
             background-position: center;
             background-repeat: no-repeat;
             background-clip: padding-box;
             transition: opacity 0.4s ease-in-out;
 
-            &.invalid-url {
-                opacity: 0.8;
+            &.--no-url {
+                opacity: 0.5;
+                filter: grayscale(1);
+            }
+
+            &.--invalid-url {
+                opacity: 0.75;
+                filter: none;
             }
         }
     }

diff --git a/src/OnboardingSPA/components/SocialMediaForm/index.js b/src/OnboardingSPA/components/SocialMediaForm/index.js
@@ -4,8 +4,7 @@ import { useState, useEffect } from '@wordpress/element';
 
 import Tooltip from './../Tooltip'
 
-const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
-    const [isActive, setIsActive] = useState(false);
+const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials, isSocialFormOpen, setIsSocialFormOpen }) => {
     const [facebook, setFacebook] = useState("");
     const [twitter, setTwitter] = useState("");
     const [instagram, setInstagram] = useState("");
@@ -105,11 +104,10 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
             }
         }
 
-        setDataAndActiveErrorState( data, activeError);        
+        setDataAndActiveErrorState(data, socialInput, activeError);        
     }
 
-    const setDataAndActiveErrorState = (data, activeError) => {
-
+    const setDataAndActiveErrorState = (data, socialInput, activeError) => {
         if (!data){
             var activeErrorFiltered = activeError.filter(function (item) {
                 return item !== socialInput
@@ -131,7 +129,7 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
     const checkValidUrlDebounce = _.debounce(checkValidUrl, 1000);
 
     const handleAccordion = (e) => {
-        setIsActive(!isActive);
+        setIsSocialFormOpen(!isSocialFormOpen);
     }
 
     const handleChange = (e) => {
@@ -222,9 +220,9 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
                         'wp-module-onboarding'
                     )}
                 </div>
-                <div className={`social-form__top-row_icon ${isActive ? 'social-form__top-row_icon_opened' : ''}`}></div>
+                <div className={`social-form__top-row_icon ${isSocialFormOpen ? 'social-form__top-row_icon_opened' : ''}`}></div>
             </div>
-            <form className={isActive ? 'social-form__main-active' : 'social-form__main-hidden'} onSubmit={(e) => { handleSubmit(e) }}>
+            <form className={isSocialFormOpen ? 'social-form__main-active' : 'social-form__main-hidden'} onSubmit={(e) => { handleSubmit(e) }}>
                 {buildSocialBoxes()}
             </form>
         </div>

diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js
@@ -1,7 +1,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 import content from './content.json';
 import TextInput from '../../../components/TextInput';
@@ -19,6 +19,7 @@ import { translations } from '../../../utils/locales/translations';
  * @return
  */
 const BasicInfoForm = () => {
+	const socialMediaRef = useRef(null);
 	const [ isError, setIsError ] = useState( false );
 	const [ flowData, setFlowData ] = useState();
 	const [ isLoaded, setisLoaded ] = useState( false );
@@ -29,6 +30,7 @@ const BasicInfoForm = () => {
 	const [ siteLogo, setSiteLogo ] = useState( 0 );
 	const [ socialData, setSocialData ] = useState( '' );
 	const [ isValidSocials, setIsValidSocials ] = useState( false );
+	const [ isSocialFormOpen, setIsSocialFormOpen ] = useState( false );
 
 	const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
 	const { editEntityRecord } = useDispatch( coreStore );
@@ -64,6 +66,11 @@ const BasicInfoForm = () => {
 		return dataToSave;
 	}
 
+	useEffect(() => {
+		if(isSocialFormOpen) 
+			socialMediaRef.current.scrollIntoView();
+	}, [isSocialFormOpen]);
+
 	useEffect( () => {
 		async function getFlowData() {
 			const socialDataAPI = await getSettings();
@@ -183,11 +190,13 @@ const BasicInfoForm = () => {
 						textValue={ siteDesc }
 						textValueSetter={ setSiteDesc }
 					/>
-					<div>
+					<div ref={socialMediaRef}>
 						<SocialMediaForm
 							socialData={ socialData }
 							setSocialData={ setSocialData }
+							isSocialFormOpen={ isSocialFormOpen }
 							setIsValidSocials={ setIsValidSocials }
+							setIsSocialFormOpen={ setIsSocialFormOpen }
 						/>
 					</div>
 				</div>
@@ -201,6 +210,8 @@ const BasicInfoForm = () => {
 						title={ siteTitle }
 						desc={ siteDesc }
 						socialData={ socialData }
+						isSocialFormOpen={ isSocialFormOpen } 
+						setIsSocialFormOpen={ setIsSocialFormOpen }
 					/>
 				</div>
 			</div>