Skip to content

Commit

Permalink
Refactor: Update onboarding wizard to be compatible with v3 forms (#7455
Browse files Browse the repository at this point in the history 
)

Co-authored-by: Joshua Dinh <[email protected]>
  • Loading branch information
@pauloiankoski @JoshuaHungDinh @kjohnson
2 people authored and kjohnson committed Aug 21, 2024
1 parent 4f11e99 commit 9bdd668
Show file tree
Hide file tree
Showing 44 changed files with 2,118 additions and 1,527 deletions.
Binary file added assets/src/images/admin/onboarding/header-image.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
150 changes: 76 additions & 74 deletions assets/src/js/admin/onboarding-wizard/app/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// Import vendor dependencies
import { __ } from '@wordpress/i18n'
import {__} from '@wordpress/i18n';

// Import store dependencies
import { StoreProvider } from './store';
import { reducer } from './store/reducer';
import {StoreProvider} from './store';
import {reducer} from './store/reducer';

// Import styles
import './style.scss';
Expand All @@ -21,14 +21,14 @@ import DonationForm from './steps/donation-form';
import Addons from './steps/addons';

import {
getCountryList,
getDefaultStateList,
getCurrencyList,
getFeaturesEnabledDefault,
getAddonsSelectedDefault,
getDefaultCountry,
getDefaultState,
getDefaultCurrency,
getAddonsSelectedDefault,
getCountryList,
getCurrencyList,
getDefaultCountry,
getDefaultCurrency,
getDefaultState,
getDefaultStateList,
getFeaturesEnabledDefault,
} from '../utils';

/**
Expand All @@ -38,70 +38,72 @@ import {
* @returns {array} Array of React elements, comprising the Onboarding Wizard app
*/
const App = () => {
// Initial app state (available in component through useStoreValue)
const initialState = {
currentStep: 0,
lastStep: 5,
configuration: {
userType: 'individual',
causeType: '',
country: getDefaultCountry(),
state: getDefaultState(),
currency: getDefaultCurrency(),
features: getFeaturesEnabledDefault(),
addons: getAddonsSelectedDefault(),
},
countriesList: getCountryList(),
currenciesList: getCurrencyList(),
statesList: getDefaultStateList(),
fetchingStatesList: false,
};
// Initial app state (available in component through useStoreValue)
const initialState = {
currentStep: 0,
lastStep: 5,
configuration: {
userType: 'individual',
causeType: '',
usageTracking: true,
newsletterSubscription: true,
country: getDefaultCountry(),
state: getDefaultState(),
currency: getDefaultCurrency(),
features: getFeaturesEnabledDefault(),
addons: getAddonsSelectedDefault(),
},
countriesList: getCountryList(),
currenciesList: getCurrencyList(),
statesList: getDefaultStateList(),
fetchingStatesList: false,
};

const steps = [
{
title: __( 'Introduction', 'give' ),
component: <Introduction />,
showInNavigation: false,
},
{
title: __( 'Cause', 'give' ),
component: <YourCause />,
showInNavigation: true,
},
{
title: __( 'Location', 'give' ),
component: <Location />,
showInNavigation: true,
},
{
title: __( 'Features', 'give' ),
component: <Features />,
showInNavigation: true,
},
{
title: __( 'Preview', 'give' ),
component: <DonationForm />,
showInNavigation: true,
},
{
title: __( 'Add-ons', 'give' ),
component: <Addons />,
showInNavigation: true,
},
];
const steps = [
{
title: __('Introduction', 'give'),
component: <Introduction />,
showInNavigation: false,
},
{
title: __('Cause', 'give'),
component: <YourCause />,
showInNavigation: true,
},
{
title: __('Location', 'give'),
component: <Location />,
showInNavigation: true,
},
{
title: __('Features', 'give'),
component: <Features />,
showInNavigation: true,
},
{
title: __('Preview', 'give'),
component: <DonationForm />,
showInNavigation: true,
},
{
title: __('Add-ons', 'give'),
component: <Addons />,
showInNavigation: true,
},
];

return (
<StoreProvider initialState={ initialState } reducer={ reducer }>
<Wizard>
{ steps.map( ( step, index ) => {
return (
<Step title={ step.title } showInNavigation={ step.showInNavigation } key={ index }>
{ step.component }
</Step>
);
} ) }
</Wizard>
</StoreProvider>
);
return (
<StoreProvider initialState={initialState} reducer={reducer}>
<Wizard>
{steps.map((step, index) => {
return (
<Step title={step.title} showInNavigation={step.showInNavigation} key={index}>
{step.component}
</Step>
);
})}
</Wizard>
</StoreProvider>
);
};
export default App;
88 changes: 48 additions & 40 deletions assets/src/js/admin/onboarding-wizard/app/steps/addons/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
// Import vendor dependencies
import { __ } from '@wordpress/i18n'
import {__} from '@wordpress/i18n';

// Import store dependencies
import { useStoreValue } from '../../store';
import { setAddons } from '../../store/actions';
import {useStoreValue} from '../../store';
import {setAddons} from '../../store/actions';

// Import components
import Card from '../../../components/card';
import CardInput from '../../../components/card-input';
import ContinueButton from '../../../components/continue-button';
import PreviousButton from '../../../components/previous-button';
import RecurringDonationsIcon from '../../../components/icons/recurring-donations';
import DonorsCoverFeesIcon from '../../../components/icons/donors-cover-fees';
import PDFReceiptsIcon from '../../../components/icons/pdf-receipts';
Expand All @@ -20,44 +21,51 @@ import DedicateDonationsIcon from '../../../components/icons/dedicate-donations'
import './style.scss';

const Addons = () => {
const [ { configuration }, dispatch ] = useStoreValue();
const addons = configuration.addons;
const [{configuration}, dispatch] = useStoreValue();
const addons = configuration.addons;

return (
<div className="give-obw-fundraising-needs">
<h1>{ __( 'What else do you need to support your cause?', 'give' ) }</h1>
<p>
{ __( 'Take your fundraising to the next level with these premium add-ons.', 'give' ) }
</p>
<CardInput values={ addons } onChange={ ( value ) => dispatch( setAddons( value ) ) } >
<Card value="recurring-donations">
<RecurringDonationsIcon />
<strong>{ __( 'Recurring Donations', 'give' ) }</strong>
</Card>
<Card value="donors-cover-fees">
<DonorsCoverFeesIcon />
<strong>{ __( 'Donors Cover Fees', 'give' ) }</strong>
</Card>
<Card value="pdf-receipts">
<PDFReceiptsIcon />
<strong>{ __( 'PDF Receipts', 'give' ) }</strong>
</Card>
<Card value="custom-form-fields">
<CustomFormFieldsIcon />
<strong>{ __( 'Custom Form Fields', 'give' ) }</strong>
</Card>
<Card value="multiple-currencies">
<MultipleCurrenciesIcon />
<strong>{ __( 'Multiple Currencies', 'give' ) }</strong>
</Card>
<Card value="dedicate-donations">
<DedicateDonationsIcon />
<strong>{ __( 'Dedicate Donations', 'give' ) }</strong>
</Card>
</CardInput>
<ContinueButton testId="addons-continue-button" />
</div>
);
return (
<div className="give-obw-fundraising-needs">
<h1>{__('What else do you need to support your cause?', 'give')}</h1>
<p>{__('Take your fundraising to the next level with these premium add-ons.', 'give')}</p>
<CardInput values={addons} onChange={(value) => dispatch(setAddons(value))}>
<Card value="recurring-donations">
<RecurringDonationsIcon />
<h2>{__('Recurring Donations', 'give')}</h2>
<p>{__('Allow donors to make donations on a recurring basis.', 'give')}</p>
</Card>
<Card value="donors-cover-fees">
<DonorsCoverFeesIcon />
<h2>{__('Fee Recovery', 'give')}</h2>
<p>{__('Enable donors to cover payment processing fees.', 'give')}</p>
</Card>
<Card value="pdf-receipts">
<PDFReceiptsIcon />
<h2>{__('PDF Receipts', 'give')}</h2>
<p>{__('Provide custom donation receipts in PDF format.', 'give')}</p>
</Card>
<Card value="custom-form-fields">
<CustomFormFieldsIcon />
<h2>{__('Custom Form Fields', 'give')}</h2>
<p>{__('Add custom fields to your donation forms.', 'give')}</p>
</Card>
<Card value="multiple-currencies">
<MultipleCurrenciesIcon />
<h2>{__('Currency Switcher', 'give')}</h2>
<p>{__('Accept donations in your preferred currencies.', 'give')}</p>
</Card>
<Card value="dedicate-donations">
<DedicateDonationsIcon />
<h2>{__('Tributes', 'give')}</h2>
<p>{__('Allow donors to dedicate their donation to someone special.', 'give')}</p>
</Card>
</CardInput>
<footer className="give-obw-footer">
<ContinueButton testId="addons-continue-button" />
<PreviousButton testId="addons-previous-button" />
</footer>
</div>
);
};

export default Addons;
95 changes: 54 additions & 41 deletions assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,61 @@
.give-obw-fundraising-needs {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;

> h1 {
font-family: Montserrat, Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 34px;
text-align: center;
color: #333;
margin: 0 0 8px 0;
}
> h1 {
font-weight: 600;
font-size: 24px;
line-height: 34px;
text-align: center;
color: #333;
margin: 0 0 8px;
}

> p {
font-family: Montserrat, Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
text-align: center;
color: #333;
margin: 0 0 52px 0;
}
> p {
font-weight: 500;
font-size: 16px;
line-height: 22px;
text-align: center;
color: #333;
margin: 0;
}

.give-obw-card {
box-sizing: border-box;
height: 218px;
width: 242px;
align-items: center;
justify-content: center;
.give-obw-card {
align-items: center;
box-sizing: border-box;
width: 17.5rem;
min-height: 15rem;
position: relative;
padding-top: 7.25rem;

> strong {
font-family: Montserrat, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 18px;
line-height: 24px;
text-align: center;
letter-spacing: 3.5px;
color: #4a5568;
}
}
> svg {
position: absolute;
top: 2.25rem;
left: 50%;
translate: -50%;
}

> .give-obw-button {
margin-top: 52px;
}
> h2 {
color: #4a5568;
display: flex;
align-items: flex-end;
height: 2.66em;
font-size: 18px;
font-weight: 600;
line-height: 1.33;
margin: 0 0 0.25rem;
text-align: center;
text-transform: uppercase;
}

> p {
color: #4a5568;
font-size: 14px;
font-weight: 400;
line-height: 1.57;
margin: 0;
text-align: center;
}
}
}
Loading

0 comments on commit 9bdd668

Please sign in to comment.