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

Refactor: Update content on onboarding wizard #7444

Merged
merged 7 commits into from
Jul 15, 2024
Merged

Refactor: Update content on onboarding wizard #7444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a8c4d65
refactor: replace text on Introduction step
pauloiankoski Jul 9, 2024
27a41dd
refactor: replace text on Cause step
pauloiankoski Jul 9, 2024
8c1e53d
refactor: add description to Location step
pauloiankoski Jul 9, 2024
abe2816
refactor: add descriptions to Features step cards
pauloiankoski Jul 9, 2024
3ae06e0
refactor: replace text on Preview step
pauloiankoski Jul 9, 2024
81685b8
refactor: add descriptions to Add-ons step cards
pauloiankoski Jul 9, 2024
5b518cc
refactor: enhance style fidelity with designs
pauloiankoski Jul 10, 2024
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
74 changes: 39 additions & 35 deletions assets/src/js/admin/onboarding-wizard/app/steps/addons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,41 +23,45 @@ const 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>{__('Donors Cover Fees', '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>{__('Multiple Currencies', 'give')}</h2>
<p>{__('Accept donations in your preferred currencies.', 'give')}</p>
</Card>
<Card value="dedicate-donations">
<DedicateDonationsIcon />
<h2>{__('Dedicate Donations', 'give')}</h2>
<p>{__('Allow donors to dedicate their donation to someone special.', 'give')}</p>
</Card>
</CardInput>
<ContinueButton testId="addons-continue-button" />
</div>
);
};

export default Addons;
53 changes: 35 additions & 18 deletions assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,59 @@
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;
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;
margin: 0;
}

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

> svg {
position: absolute;
top: 2.25rem;
left: 50%;
translate: -50%;
}

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

> 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;
}
> p {
color: #4a5568;
font-size: 14px;
font-weight: 400;
line-height: 1.57;
margin: 0;
text-align: center;
}
}

> .give-obw-button {
Expand Down
4 changes: 2 additions & 2 deletions assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const DonationForm = () => {
</div>
<div className="give-obw-donation-form__content">
<div className="give-obw-donation-form__fixed">
<h1>{ __( 'Check out your first donation form!', 'give' ) }</h1>
<h1>{ __( '🎉 Congrats! Check out your first donation form.', 'give' ) }</h1>
<p>
{ __( 'This form is customized based on your responses.', 'give' ) }
</p>
Expand All @@ -38,7 +38,7 @@ const DonationForm = () => {
</li>
<li>
<GradientChevronIcon index={ 4 } />
{ __( 'Extend with add-ons and more!', 'give' ) }
{ __( 'Extend functionality with add-ons and more', 'give' ) }
</li>
</ul>
<ContinueButton testId="preview-continue-button" />
Expand Down
4 changes: 2 additions & 2 deletions assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
font-size: 24px;
line-height: 34px;
color: #333;
margin: 0 0 8px 0;
margin: 0 0 8px;
}

p {
Expand All @@ -34,7 +34,7 @@
font-size: 16px;
line-height: 22px;
color: #333;
margin: 0 0 38px;
margin: 0 0 24px;
}

h2 {
Expand Down
64 changes: 34 additions & 30 deletions assets/src/js/admin/onboarding-wizard/app/steps/features/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,36 +26,40 @@ const Features = () => {
return (
<div className="give-obw-fundraising-needs">
<h1>{ __( 'What do you need in your first donation form?', 'give' ) }</h1>
<p>
{ __( 'Don\'t worry, these settings can always be changed later.', 'give' ) }
</p>
<CardInput values={ features } onChange={ ( value ) => dispatch( setFeatures( value ) ) } >
<Card value="donation-goal">
<DonationGoalIcon />
<strong>{ __( 'Donation Goal', 'give' ) }</strong>
</Card>
<Card value="donation-comments">
<DonationCommentsIcon />
<strong>{ __( 'Donation Comments', 'give' ) }</strong>
</Card>
<Card value="terms-conditions">
<TermsConditionsIcon />
<strong>{ __( 'Terms & Conditions', 'give' ) }</strong>
</Card>
<Card value="offline-donations">
<OfflineDonationsIcon />
<strong>{ __( 'Offline Donations', 'give' ) }</strong>
</Card>
<Card value="anonymous-donations">
<AnonymousDonationsIcon />
<strong>{ __( 'Anonymous Donations', 'give' ) }</strong>
</Card>
<Card value="company-donations">
<CompanyDonationsIcon />
<strong>{ __( 'Company Donations', 'give' ) }</strong>
</Card>
</CardInput>
<ContinueButton testId="features-continue-button" />
<p>{__('Select the features you need. These can always be changed later.', 'give')}</p>
<CardInput values={features} onChange={(value) => dispatch(setFeatures(value))}>
<Card value="donation-goal">
<DonationGoalIcon />
<h2>{__('Donation Goal', 'give')}</h2>
<p>{__('Show the donation goal progress on the form.', 'give')}</p>
</Card>
<Card value="donation-comments">
<DonationCommentsIcon />
<h2>{__('Donation Comments', 'give')}</h2>
<p>{__('Allow donors to add comments to their donations.', 'give')}</p>
</Card>
<Card value="terms-conditions">
<TermsConditionsIcon />
<h2>{__('Terms & Conditions', 'give')}</h2>
<p>{__('Require donors to accept terms and conditions.', 'give')}</p>
</Card>
<Card value="offline-donations">
<OfflineDonationsIcon />
<h2>{__('Offline Donations', 'give')}</h2>
<p>{__('Donors can choose to donate offline, via mail or in person.', 'give')}</p>
</Card>
<Card value="anonymous-donations">
<AnonymousDonationsIcon />
<h2>{__('Anonymous Donations', 'give')}</h2>
<p>{__('Enable donors to give anonymously.', 'give')}</p>
</Card>
<Card value="company-donations">
<CompanyDonationsIcon />
<h2>{__('Company Donations', 'give')}</h2>
<p>{__('Donors can donate via their company.', 'give')}</p>
</Card>
</CardInput>
<ContinueButton testId="features-continue-button" />
</div>
);
};
Expand Down
78 changes: 43 additions & 35 deletions assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,52 @@
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 0;
}

> 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 0 52px 0;
}

.give-obw-card {
box-sizing: border-box;
height: 218px;
width: 242px;
align-items: center;
justify-content: center;
.give-obw-card {
box-sizing: border-box;
width: 17.5rem;
align-items: center;
justify-content: center;

> 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;
}
}
> h2 {
color: #4a5568;
display: flex;
align-items: flex-end;
height: 2em;
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;
}
}

> .give-obw-button {
margin-top: 52px;
Expand Down
2 changes: 1 addition & 1 deletion assets/src/js/admin/onboarding-wizard/app/steps/introduction/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Introduction = () => {
</h1>
<GiveLogo />
<p>
{ __( 'You\'re only minutes away from accepting donations on your website! Use the Onboarding Wizard if this is your first time using GiveWP.', 'give' ) }
{ __( 'Get started quickly with our Onboarding Wizard and begin accepting donations on your website in minutes.', 'give' ) }
</p>
<ContinueButton clickCallback={ () => onStartSetup() } label={ __( 'Start Setup', 'give' ) } testId="intro-continue-button" />
</div>
Expand Down
1 change: 1 addition & 0 deletions assets/src/js/admin/onboarding-wizard/app/steps/location/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const Location = () => {
<div className="give-obw-location">
<BackgroundImage />
<h1>{ __( '🌎 Where are you fundraising?', 'give' ) }</h1>
<p>{__('This information will be used to set up your donation form experience.', 'give')}</p>
<Card>
<SelectInput testId="country-select" label={ __( 'Country', 'give' ) } value={ country } onChange={ onChangeCountry } options={ countriesList } />
<SelectInput testId="state-select" label={ __( 'State / Province', 'give' ) } value={ state } onChange={ ( value ) => dispatch( setState( value ) ) } options={ statesList } isLoading={ fetchingStatesList } />
Expand Down
11 changes: 9 additions & 2 deletions assets/src/js/admin/onboarding-wizard/app/steps/location/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,17 @@
font-size: 24px;
line-height: 34px;
color: #333;

margin: 0 0 52px 0;
margin: 0 0 0.75rem;
}

> p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #333;
margin: 0 0 1.5rem
}

.give-obw-card {
padding: 40px;
margin-bottom: 85px;
Expand Down
2 changes: 1 addition & 1 deletion assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const YourCause = () => {

return (
<div className="give-obw-your-cause">
<h1>{__( '👋 Hi there! Tell us a little about your Organization.', 'give' )}</h1>
<h1>{__( '👋 Hi there! Tell us about your cause.', 'give' )}</h1>
<p>{__( 'This information will be used to customize your experience to your fundraising needs.', 'give' )}</p>
<CardInput values={userType} onChange={( values ) => dispatch( setUserType( values ) )} checkMultiple={false}>
<Card value="individual">
Expand Down
Loading
Loading