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

PRESS 2-462 Loader for Street Address step Ecommerce #145

Merged
merged 5 commits into from
Jan 17, 2023
Merged

PRESS 2-462 Loader for Street Address step Ecommerce #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
76f8631
Added Classes and CSS
officiallygod Jan 4, 2023
de8bdd2
Added a Step State Handler for Generic use
officiallygod Jan 5, 2023
706f02a
Refactored Code to use an Animate component
officiallygod Jan 13, 2023
26a3ba9
Code Refactor
officiallygod Jan 13, 2023
c8c0c7f
Typos Fixed
officiallygod Jan 13, 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
37 changes: 37 additions & 0 deletions src/OnboardingSPA/components/Animate/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* A Animator to show animation
*
* @param {string} type The name of Animation to be shown.
* @param { object | boolean } after The variable to look after for before showing the animation, by default true to show the children right away.
*
*/
const Animate = ( { type, after = true, children } ) => {
const prefix = 'animate';

/**
* Returns the appropriate className
*
* @return {string | void} ClassName that applies the animations
*/
function getAnimateClassName() {
if ( type ) {
let classname = '';

switch ( type ) {
// Add animation types and appropriate CSS
case 'fade-in':
classname = prefix.concat( '__fade-in' );
break;
}
return classname;
}
}

return ! after ? (
<div className={ `${ prefix }__blank` }>{ children }</div>
) : (
<div className={ getAnimateClassName() }>{ children }</div>
);
};

export default Animate;
11 changes: 11 additions & 0 deletions src/OnboardingSPA/components/Animate/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.animate {

&__blank {
opacity: 0;
pointer-events: none;
}

&__fade-in {
animation: fadeInWithDisabledClicks 500ms ease-in;
}
}
206 changes: 104 additions & 102 deletions src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import content from '../content.json';
import countries from '../countries.json';
import currencies from '../currencies.json';
import { useWPSettings } from '../useWPSettings';
import Animate from '../../../../components/Animate';
import { EcommerceStateHandler } from '../../../../components/StateHandlers';

const StepAddress = () => {
Expand Down Expand Up @@ -148,131 +149,132 @@ const StepAddress = () => {
'wp-module-onboarding'
)}
/>
{settings === null && <p>Loading your details...</p>}
</div>
<div className='store-address-form'>
<div data-name='country'>
<label aria-required>
{__('Where is your store based?', 'wp-module-onboarding')}
</label>
{settings === null ? (
<input type='text' disabled />
) : (
<select
type='text'
name='country'
required
defaultValue={selectedCountry}
{...fieldProps}
>
{countries.map((country) => (
<option key={country.code} value={country.code}>
{country.name}
</option>
))}
</select>
)}
</div>
<div data-name='woocommerce_store_address'>
<label aria-required>
{__('Address', 'wp-module-onboarding')}
</label>
<input
name='woocommerce_store_address'
type='text'
required
defaultValue={address?.woocommerce_store_address}
{...fieldProps}
/>
</div>
<div
data-name='full-address'
data-state-empty={states.length === 0}
>
<div data-name='woocommerce_store_city'>
<Animate type="fade-in" after={ settings }>
<div className={'store-address-form'}>
<div data-name='country'>
<label aria-required>
{__('City', 'wp-module-onboarding')}
{__('Where is your store based?', 'wp-module-onboarding')}
</label>
{settings === null ? (
<input type='text' disabled />
) : (
<select
type='text'
name='country'
required
defaultValue={selectedCountry}
{...fieldProps}
>
{countries.map((country) => (
<option key={country.code} value={country.code}>
{country.name}
</option>
))}
</select>
)}
</div>
<div data-name='woocommerce_store_address'>
<label aria-required>
{__('Address', 'wp-module-onboarding')}
</label>
<input
name='woocommerce_store_city'
name='woocommerce_store_address'
type='text'
required
defaultValue={address?.woocommerce_store_city}
defaultValue={address?.woocommerce_store_address}
{...fieldProps}
/>
</div>
{states.length === 0 || settings === null ? null : (
<div data-name='state'>
<div
data-name='full-address'
data-state-empty={states.length === 0}
>
<div data-name='woocommerce_store_city'>
<label aria-required>
{__('State', 'wp-module-onboarding')}
{__('City', 'wp-module-onboarding')}
</label>
<select
<input
name='woocommerce_store_city'
type='text'
name='state'
required
defaultValue={
selectedCountry == defaultCountry ? defaultState : ''
}
defaultValue={address?.woocommerce_store_city}
{...fieldProps}
>
<option key={''} value={''} selected />
{states.map((state) => (
<option key={state.code} value={state.code}>
{state.name}
</option>
))}
</select>
/>
</div>
)}
<div data-name='woocommerce_store_postcode'>
{states.length === 0 || settings === null ? null : (
<div data-name='state'>
<label aria-required>
{__('State', 'wp-module-onboarding')}
</label>
<select
type='text'
name='state'
required
defaultValue={
selectedCountry == defaultCountry ? defaultState : ''
}
{...fieldProps}
>
<option key={''} value={''} selected />
{states.map((state) => (
<option key={state.code} value={state.code}>
{state.name}
</option>
))}
</select>
</div>
)}
<div data-name='woocommerce_store_postcode'>
<label aria-required>
{__('Postal Code', 'wp-module-onboarding')}
</label>
<input
name='woocommerce_store_postcode'
type='text'
required
defaultValue={address?.woocommerce_store_postcode}
{...fieldProps}
/>
</div>
</div>
<div>
<label aria-required>
{__('Postal Code', 'wp-module-onboarding')}
{__('Email', 'wp-module-onboarding')}
</label>
<input
name='woocommerce_store_postcode'
type='text'
name='woocommerce_email_from_address'
type='email'
required
defaultValue={address?.woocommerce_store_postcode}
defaultValue={address?.woocommerce_email_from_address}
{...fieldProps}
/>
</div>
<div>
<label>
{__(
'What currency do you want to display in your store?',
'wp-module-onboarding'
)}
</label>
<select
type='text'
name='woocommerce_currency'
value={address?.woocommerce_currency}
{...fieldProps}
>
{Object.entries(currencies).map(([code, currency]) => (
<option
key={code}
value={code}
dangerouslySetInnerHTML={{ __html: currency }}
/>
))}
</select>
</div>
<em style={{ display: 'inline' }}>* required</em>
</div>
<div>
<label aria-required>
{__('Email', 'wp-module-onboarding')}
</label>
<input
name='woocommerce_email_from_address'
type='email'
required
defaultValue={address?.woocommerce_email_from_address}
{...fieldProps}
/>
</div>
<div>
<label>
{__(
'What currency do you want to display in your store?',
'wp-module-onboarding'
)}
</label>
<select
type='text'
name='woocommerce_currency'
value={address?.woocommerce_currency}
{...fieldProps}
>
{Object.entries(currencies).map(([code, currency]) => (
<option
key={code}
value={code}
dangerouslySetInnerHTML={{ __html: currency }}
/>
))}
</select>
</div>
<em style={{ display: 'inline' }}>* required</em>
</div>
</Animate>
<button
className='nfd-nav-card-button nfd-card-button'
disabled={settings === null}
Expand Down
12 changes: 12 additions & 0 deletions src/OnboardingSPA/styles/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,18 @@
}
}

@keyframes fadeInWithDisabledClicks {

from {
opacity: 0;
pointer-events: none;
}

to {
opacity: 1;
}
}

@keyframes fadeInRight {
from {
opacity: 0;
Expand Down
1 change: 1 addition & 0 deletions src/OnboardingSPA/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
@import "../components/RadioControl/RadioControlSkeleton/stylesheet";
@import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
@import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";
@import "../components/Animate/stylesheet";

// CSS for Pages
@import "../pages/Steps/BasicInfo/stylesheet";
Expand Down