Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic Info FadeIn State #146

Merged
merged 22 commits into from
Jan 18, 2023
Merged

Basic Info FadeIn State #146

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
517be3e
Basic Info FadeIn State added
Jan 5, 2023
6d55f85
Update basicInfoForm.js
Jan 5, 2023
20b084b
Used a generic component to handle the load state for step
Jan 5, 2023
ea77bc7
Update basicInfoForm.js
Jan 5, 2023
5d9879a
removed modules which are not required
Jan 5, 2023
914f1fb
Formatted the file
Jan 5, 2023
0658900
Merge remote-tracking branch 'origin/release/v1.0.0-polished' into ad…
Jan 5, 2023
f237555
Update basicInfoForm.js
Jan 5, 2023
e04583b
Formatted the files and handled SocialData API
Jan 6, 2023
8fba6fc
Delete build directory
Yashita101 Jan 6, 2023
e719c49
Merge branch 'trunk' into add/PRESS2-466-Skeleton-State-Basic-Info
Jan 6, 2023
7128398
removed duplicate css
Jan 9, 2023
74225dd
Update stylesheet.scss
Jan 9, 2023
5b169a3
Retained the changes made w.r.t scope of this story
Jan 11, 2023
a5f23be
Merge remote-tracking branch 'origin/PRESS2-462-Loader-for-Street-Add…
Jan 16, 2023
236e463
Leveraged Animate Component
Jan 16, 2023
65a2be4
Implemented Animate Component in Basic Info Step
Jan 16, 2023
19e7017
Additional data checks added
Jan 17, 2023
bc50f35
Merge branch 'trunk' of https://github.com/newfold-labs/wp-module-onb…
arunshenoy99 Jan 17, 2023
2838a48
Reverted Ecommerce existing changes
Jan 17, 2023
bffac2a
Merge branch 'add/PRESS2-466-Skeleton-State-Basic-Info' of https://gi…
Jan 17, 2023
6939b92
Merge branch 'trunk' into add/PRESS2-466-Skeleton-State-Basic-Info
Jan 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
347 changes: 207 additions & 140 deletions src/OnboardingSPA/components/MiniPreview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { __, sprintf } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';

Expand All @@ -7,153 +6,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( '' );

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 [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("");
if ( Object.keys( otherURLS ).includes( 'tiktok_url' ) )
setTikTok( otherURLS.tiktok_url ?? '' );
}
}, [ socialData ] );

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"] ?? "");
const isValidUrl = ( urlString ) => {
let url;
try {
url = new URL( urlString );
} catch ( e ) {
return false;
}

if (Object.keys(otherURLS).includes("tiktok_url"))
setTikTok(otherURLS["tiktok_url"] ?? "");
}
}, [socialData]);
if ( url.protocol !== 'http:' && url.protocol !== 'https:' )
return false;
return true;
};

const isValidUrl = (urlString) => {
let url;
try {
url = new URL(urlString);
}
catch (e) {
return false;
}
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)' },
];

if (url.protocol !== "http:" && url.protocol !== "https:")
return false;
return true;
}
function titleToUrl( title ) {
return `https://${ title
?.toLowerCase()
.replace( /\s/g, '' )
.replace( /\W/g, '' ) }.com`;
}

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 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 } }
/>
);
} );
}

function 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 (
<div>
<h4 className="mini-preview">Preview</h4>
<div className="browser-container">
<div className="browser-row-title">
<div className="browser-row-title_main">
<div className="browser-row-title_buttons">
<span className="browser-dot" style={{ background: '#ED594A' }}></span>
<span className="browser-dot" style={{ background: '#FDD800' }}></span>
<span className="browser-dot" style={{ background: '#5AC05A' }}></span>
</div>
</div>
<div className="browser-row-title_bar">
<div className="browser-row-title_bar_before">
<div className="browser-row-title_bar_before-curve"></div>
</div>
<div className="browser-row-title_bar_main">
{(icon == 0 || icon == undefined) && (<div className="browser-icon-title" style={{ content: 'var(--default-logo-icon)' }}></div>)}
{(icon != 0 && icon != undefined) && (<img
className="browser-icon-title"
src={iconPreview.url}
alt="Thumb"
/>)}
<div className="browser-row-title_bar_main-text">{__(
titlePreview?.substring(0, 20),
'wp-module-onboarding'
)}</div>
<div className="browser-row-title_bar_main-cross">x</div>
</div>
<div className="browser-row-title_bar_after">
<div className="browser-row-title_bar_after-curve"></div>
</div>
</div>
</div>
<div className="browser-row-search">
<div className="browser-row-search__icons">
<div className="browser-icon" style={{ backgroundImage: 'var(--back-icon)' }}></div>
<div className="browser-icon" style={{ backgroundImage: 'var(--forward-icon)' }}></div>
<div className="browser-icon" style={{ backgroundImage: 'var(--reload-icon)' }}></div>
</div>
<div className="browser-row-search__search-box">
<input className="browser-row-search__search-box_input" type="text" onChange={(e)=> {}} value={__(
urlPreview,
'wp-module-onboarding'
)}></input>
</div>
<div className="browser-row-search__more">
<div className="browser-icon" style={{ backgroundImage: 'var(--more-icon)' }}></div>
</div>
</div>
<div className="browser-content">
<div className="browser-content_top-row">
<h4 className="browser-content_top-row-name">{__(
titlePreview,
'wp-module-onboarding'
)}</h4>
<a className="browser-content_top-row-link">{__(
urlPreview,
'wp-module-onboarding'
)}</a>
</div>
<h5 className="browser-content_desc">
{__(
descPreview,
'wp-module-onboarding'
)}
</h5>
<div className="browser-content_social">
{socialIconList()}
</div>
</div>
</div>
</div>
);
return (
<div>
<h4 className="mini-preview">Preview</h4>
<div className="browser-container">
<div className="browser-row-title">
<div className="browser-row-title_main">
<div className="browser-row-title_buttons">
<span
className="browser-dot"
style={ { background: '#ED594A' } }
></span>
<span
className="browser-dot"
style={ { background: '#FDD800' } }
></span>
<span
className="browser-dot"
style={ { background: '#5AC05A' } }
></span>
</div>
</div>
<div className="browser-row-title_bar">
<div className="browser-row-title_bar_before">
<div className="browser-row-title_bar_before-curve"></div>
</div>
<div className="browser-row-title_bar_main">
{ ( icon == 0 || icon == undefined ) && (
<div
className="browser-icon-title"
style={ {
content: 'var(--default-logo-icon)',
} }
></div>
) }
{ icon != 0 && icon != undefined && (
<img
className="browser-icon-title"
src={ iconPreview.url }
alt="Thumb"
/>
) }
<div className="browser-row-title_bar_main-text">
{ __(
titlePreview?.substring( 0, 20 ),
'wp-module-onboarding'
) }
</div>
<div className="browser-row-title_bar_main-cross">
x
</div>
</div>
<div className="browser-row-title_bar_after">
<div className="browser-row-title_bar_after-curve"></div>
</div>
</div>
</div>
<div className="browser-row-search">
<div className="browser-row-search__icons">
<div
className="browser-icon"
style={ { backgroundImage: 'var(--back-icon)' } }
></div>
<div
className="browser-icon"
style={ { backgroundImage: 'var(--forward-icon)' } }
></div>
<div
className="browser-icon"
style={ { backgroundImage: 'var(--reload-icon)' } }
></div>
</div>
<div className="browser-row-search__search-box">
<input
className="browser-row-search__search-box_input"
type="text"
onChange={ ( e ) => {} }
value={ __( urlPreview, 'wp-module-onboarding' ) }
></input>
</div>
<div className="browser-row-search__more">
<div
className="browser-icon"
style={ { backgroundImage: 'var(--more-icon)' } }
></div>
</div>
</div>
<div className="browser-content">
<div className="browser-content_top-row">
<h4 className="browser-content_top-row-name">
{ __( titlePreview, 'wp-module-onboarding' ) }
</h4>
<a className="browser-content_top-row-link">
{ __( urlPreview, 'wp-module-onboarding' ) }
</a>
</div>
<h5 className="browser-content_desc">
{ __( descPreview, 'wp-module-onboarding' ) }
</h5>
<div className="browser-content_social">
{ socialIconList() }
</div>
</div>
</div>
</div>
);
};

export default MiniPreview;
Loading