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

fadein loading state for sitetype steps #147

Merged
merged 5 commits into from
Jan 25, 2023
Merged

fadein loading state for sitetype steps #147

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6c85151
added fadein affect for the sitetype steps
abhijitb Jan 5, 2023
e55601a
using Animate component checking for more variables for animation
abhijitb Jan 17, 2023
e04e06f
Merge branch 'trunk' into PRESS2-439-loading-state-for-sitetype-steps
abhijitb Jan 17, 2023
b9e3433
fixed blank category state when category is not selected
abhijitb Jan 19, 2023
a4f68a4
added null check for redux store values
abhijitb Jan 19, 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
111 changes: 57 additions & 54 deletions src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
import NeedHelpTag from '../../../../../components/NeedHelpTag';
import content from '../content.json';
import { translations } from '../../../../../utils/locales/translations';
import Animate from '../../../../../components/Animate';

const StepPrimarySetup = () => {
const {
Expand Down Expand Up @@ -94,63 +95,65 @@ const StepPrimarySetup = () => {
) }
/>
</div>

<div className="nfd-setup-primary-categories">
{ content.categories.map( ( item, idx ) => {
return (
<div
key={ item?.name }
className={ `${
clickedIndex === idx ||
item.name === selectedPrimaryCategoryInStore
? 'chosenPrimaryCategory '
: ''
}nfd-card-category` }
onClick={ ( e ) => handleCategoryClick( idx ) }
>
<div className="nfd-card-category-wrapper">
<span
className="icon"
style={ {
backgroundImage:
clickedIndex !== idx &&
item.name !==
selectedPrimaryCategoryInStore
? item?.icon
: item?.iconWhite,
} }
></span>
<span className="categName">
{ item?.name }
</span>
<Animate type="fade-in" after={ content.categories && selectedPrimaryCategoryInStore }>
<div className="nfd-setup-primary-categories">
{ content.categories.map( ( item, idx ) => {
return (
<div
key={ item?.name }
className={ `${
clickedIndex === idx ||
item.name === selectedPrimaryCategoryInStore
? 'chosenPrimaryCategory '
: ''
}nfd-card-category` }
onClick={ ( e ) => handleCategoryClick( idx ) }
>
<div className="nfd-card-category-wrapper">
<span
className="icon"
style={ {
backgroundImage:
clickedIndex !== idx &&
item.name !==
selectedPrimaryCategoryInStore
? item?.icon
: item?.iconWhite,
} }
></span>
<span className="categName">
{ item?.name }
</span>
</div>
</div>
</div>
);
} ) }
</div>

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<p className="blackText">or tell us here:</p>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
);
} ) }
</div>
<div className="nfd-setup-primary-second-bottom">
<NavCardButton text={ __( content.buttonText ) } />
<NeedHelpTag />

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<p className="blackText">or tell us here:</p>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
</div>
</div>
</div>
</Animate>
<NavCardButton
abhijitb marked this conversation as resolved.
Show resolved Hide resolved
text={ __( content.buttonText ) }
disabled={ content.categories === null}
/>
<NeedHelpTag />
</NewfoldLargeCard>
</CommonLayout>
);
Expand Down
123 changes: 64 additions & 59 deletions src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
import NeedHelpTag from '../../../../../components/NeedHelpTag';
import content from '../content.json';
import { translations } from '../../../../../utils/locales/translations';
import Animate from '../../../../../components/Animate';

const StepPrimarySetup = () => {
const {
Expand Down Expand Up @@ -101,71 +102,75 @@ const StepPrimarySetup = () => {
) }
/>
</div>

<div className="nfd-setup-secondary-categories">
<div className="nfd-card-category-wrapper">
<div className="category-scrolling-wrapper">
<span
className="icon"
style={ {
backgroundImage: categoriesArray[ 0 ].icon,
} }
/>
<p className="categName">
{ ' ' }
{ categoriesArray[ 0 ].name }
</p>
<Animate type="fade-in" after={ categoriesArray[ 0 ]?.subCategories && selectedCategoryInStore }>
<div className="nfd-setup-secondary-categories">
abhijitb marked this conversation as resolved.
Show resolved Hide resolved
<div className="nfd-card-category-wrapper">
<div className="category-scrolling-wrapper">
<span
className="icon"
style={ {
backgroundImage: categoriesArray[ 0 ].icon,
} }
/>
<p className="categName">
{ ' ' }
{ categoriesArray[ 0 ].name }
</p>
</div>
</div>
</div>

<div className="subCategoriesSection">
{ categoriesArray[ 0 ]?.subCategories?.map(
( item, idx ) => {
return (
<span
key={ item }
onClick={ ( e ) =>
handleCategoryClick( idx )
}
className={ `${
clickedIndex === idx ||
item === selectedCategoryInStore
? 'chosenSecondaryCategory '
: ''
}nfd-card-category` }
>
{ item }
</span>
);
}
) }
</div>
</div>

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<div className="blackText">
{ __(
content.tellusHereText,
'wp-module-onboarding'
<div className="subCategoriesSection">
{ categoriesArray[ 0 ]?.subCategories?.map(
( item, idx ) => {
return (
<span
key={ item }
onClick={ ( e ) =>
handleCategoryClick( idx )
}
className={ `${
clickedIndex === idx ||
item === selectedCategoryInStore
? 'chosenSecondaryCategory '
: ''
}nfd-card-category` }
>
{ item }
</span>
);
}
) }
</div>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
</div>

<div className="nfd-setup-primary-second">
<div className="nfd-setup-primary-second-top">
<div className="blackText">
{ __(
content.tellusHereText,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
) }
</div>
<input
type="text"
onChange={ ( e ) => categoryInput( e ) }
className="tellUsInput"
placeholder={ sprintf(
__(
content.placeholderSiteTypeInput,
'wp-module-onboarding'
),
translations( 'site' )
) }
value={ inputCategVal }
/>
</div>
</div>
</div>
<NavCardButton text={ __( content.buttonText ) } />
</Animate>
<NavCardButton
text={ __( content.buttonText ) }
disabled={ categoriesArray[ 0 ]?.subCategories === null }
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could include these tags within the StepStateHandler tag too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can .. but then the button will also not appear when the page loads .. it will appear after a delay of 500ms ... we will have to take a call on that whether we want to do that with the buttons also

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can ask David but I don't think it's a good idea to move the NavCardButton and the NeedHelpTag into the handler because these are not dependent on the data that is being waited for and hence do not need the delay, if navigation is the concern then let me remind you that the user can always navigate using the header navigation regardless. We also do not want to hide the need help tag incase something breaks and the component does not fade in its children.

<NeedHelpTag />
</NewfoldLargeCard>
</CommonLayout>
Expand Down