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.

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: Separate Checkboxes for Telemetry and Newsletter Subscription in Onboarding Wizard #7447

Merged
merged 2 commits into from
Jul 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions assets/src/js/admin/onboarding-wizard/app/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ const App = () => {
configuration: {
userType: 'individual',
causeType: '',
usageTracking: true,
newsletterSubscription: true,
country: getDefaultCountry(),
state: getDefaultState(),
currency: getDefaultCurrency(),
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
// Import vendor dependencies
import {__} from '@wordpress/i18n';

// Import store dependencies
import {useStoreValue} from '../../store';
import {setNewsletterSubscription} from '../../store/actions';
import {subscribeToNewsletter} from '../../../utils';

// Import components
import ContinueButton from '../../../components/continue-button';
import PreviousButton from '../../../components/previous-button';
import DonationFormComponent from '../../../components/donation-form';
import CheckboxInput from '../../../components/checkbox-input';
import Bullet from '../../../components/icons/bullet';

// Import styles
import './style.scss';

const DonationForm = () => {
const [{configuration}, dispatch] = useStoreValue();

const newsletterSubscription = configuration.newsletterSubscription;

return (
<div className="give-obw-donation-form">
<div className="give-obw-donation-form__preview">
Expand Down Expand Up @@ -40,8 +50,27 @@ const DonationForm = () => {
{__('Extend functionality with add-ons and more', 'give')}
</li>
</ul>
<div className="give-obw-newsletter-subscription-field">
<CheckboxInput
testId="newsletter-subscription-checkbox"
label={__('Maximize your fundraising success', 'give')}
help={__(
'By opting in, you get access to tips for improving fundraising strategies and increasing donations, live events, product updates, and online courses. You can unsubscribe any time.',
'give'
)}
checked={newsletterSubscription}
onChange={(e) => dispatch(setNewsletterSubscription(e.target.checked))}
/>
</div>
<footer className="give-obw-footer">
<ContinueButton testId="preview-continue-button" />
<ContinueButton
testId="preview-continue-button"
clickCallback={() => {
if (newsletterSubscription) {
subscribeToNewsletter(configuration);
}
}}
/>
<PreviousButton testId="preview-previous-button" />
</footer>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.give-obw-donation-form {
display: grid;
position: relative;
grid-template-columns: repeat(2, 1fr);
width: 1200px;
grid-gap: 62px;
grid-template-columns: 560px 1fr;
width: 1256px;
grid-gap: 80px;
align-items: center;
}

Expand All @@ -17,6 +17,7 @@

.give-obw-donation-form__fixed {
position: fixed;
max-width: 616px;
}

h1 {
Expand Down Expand Up @@ -69,4 +70,18 @@
}
}
}

.give-obw-newsletter-subscription-field {
margin-bottom: 2rem;
max-width: 590px;

.give-obw-checkbox-input {
margin-left: 0;
margin-right: 0;

&__help {
margin-bottom: 0;
}
}
}
}
43 changes: 24 additions & 19 deletions assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { __ } from '@wordpress/i18n'

// Import store dependencies
import { useStoreValue } from '../../store';
import { setUserType, setCauseType } from '../../store/actions';
import {getCauseTypes, saveSettingWithOnboardingAPI, subscribeToNewsletter} from '../../../utils';
import {setCauseType, setUsageTracking, setUserType} from '../../store/actions';
import {getCauseTypes, saveSettingWithOnboardingAPI} from '../../../utils';

// Import components
import CardInput from '../../../components/card-input';
import Card from '../../../components/card';
import CheckboxInput from '../../../components/checkbox-input';
import SelectInput from '../../../components/select-input';
import ContinueButton from '../../../components/continue-button';
import PreviousButton from '../../../components/previous-button';
import IndividualIcon from '../../../components/icons/individual';
import OrganizationIcon from '../../../components/icons/organization';
import OtherIcon from '../../../components/icons/other';
Expand All @@ -24,6 +24,7 @@ const YourCause = () => {

const userType = configuration.userType;
const causeType = configuration.causeType;
const usageTracking = configuration.usageTracking;

return (
<div className="give-obw-your-cause">
Expand Down Expand Up @@ -53,25 +54,29 @@ const YourCause = () => {
<SelectInput testId="cause-select" value={causeType} onChange={( value ) => dispatch( setCauseType( value ) )} options={getCauseTypes()} />
</div>

<div className="give-obw-community-field">
<h2>{__( '🌱 Would you like to join the GiveWP Community?', 'give' )}</h2>
<p>{__( 'By opting-in, you allow some basic data about how you use GiveWP to be used for us to improve the plugin for others. You also will receive emails from us with fundraising tips and more (which you can always unsubscribe from if you need to). If you skip this step, that\'s okay! GiveWP will still be set up for you no problem.', 'give' )}</p>
</div>

<ContinueButton testId="cause-continue-button" label={__( 'Accept & Continue', 'give' )} clickCallback={() => {
// Opt-in to usage tracking.
saveSettingWithOnboardingAPI('usage_tracking', 'enabled');

// Subscribe to ActiveCampaign.
subscribeToNewsletter( configuration );
}} />
<div className="give-obw-usage-tracking-field">
<CheckboxInput
testId="usage-tracking-checkbox"
label={__('Help us enhance your product experience', 'give')}
help={__(
"By opting-in, you'll enable us to gather anonymous data on how you use GiveWP. This information helps us make GiveWP better for you. No personal information about you or your donors is collected.",
'give'
)}
checked={usageTracking}
onChange={(e) => dispatch(setUsageTracking(e.target.checked))}
/>
</div>

<footer className="give-obw-footer">
<ContinueButton testId="cause-continue-button" />
<ContinueButton
testId="cause-continue-button"
clickCallback={() => {
saveSettingWithOnboardingAPI('usage_tracking', usageTracking ? 'enabled' : 'disabled');
}}
/>
</footer>
</div>
);
</div>
);
};

export default YourCause;

Original file line number Diff line number Diff line change
Expand Up @@ -58,26 +58,9 @@
}
}

.give-obw-community-field {
width: 750px;
text-align: center;

p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #333;
}
}

p.give-obw-email-notice {
font-size: 13px;
color: #a6a6a6;
font-weight: 400;
}

.give-obw-button {
margin-top: 20px;
.give-obw-usage-tracking-field {
margin-bottom: 1.5rem;
width: 956px;
}

.give-obw-card {
Expand Down
20 changes: 20 additions & 0 deletions assets/src/js/admin/onboarding-wizard/app/store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,26 @@ export const setCauseType = ( type ) => {
};
};

// Dispatch SET_USAGE_TRACKING action
export const setUsageTracking = (usageTracking) => {
return {
type: 'SET_USAGE_TRACKING',
payload: {
usageTracking,
},
};
};

// Dispatch SET_NEWSLETTER_SUBSCRIPTION action
export const setNewsletterSubscription = (newsletterSubscription) => {
return {
type: 'SET_NEWSLETTER_SUBSCRIPTION',
payload: {
newsletterSubscription,
},
};
};

// Dispatch SET_COUNTRY action
export const setCountry = ( country ) => {
return {
Expand Down
14 changes: 14 additions & 0 deletions assets/src/js/admin/onboarding-wizard/app/store/reducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,20 @@ export const reducer = ( state, action ) => {
causeType: action.payload.type,
},
};
case 'SET_USAGE_TRACKING':
return {
...state,
configuration: {...state.configuration,
usageTracking: action.payload.usageTracking
},
};
case 'SET_NEWSLETTER_SUBSCRIPTION':
return {
...state,
configuration: {...state.configuration,
newsletterSubscription: action.payload.newsletterSubscription
},
};
case 'SET_COUNTRY':
saveSettingWithOnboardingAPI( 'base_country', action.payload.country );
return {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// Import vendor dependencies
import PropTypes from 'prop-types';

// Import utilities
import {toKebabCase} from '../../utils';

// Import styles
import './style.scss';

const CheckboxInput = ({label, help, value, checked, testId, onChange}) => {
return (
<div className="give-obw-checkbox-input" data-givewp-test={testId}>
{label && (
<label className="give-obw-checkbox-input__label" htmlFor={toKebabCase(label)}>
{label}
</label>
)}
{help && <p className="give-obw-checkbox-input__help">{help}</p>}
<input
type="checkbox"
id={toKebabCase(label)}
className="give-obw-checkbox-input__input"
value={value}
checked={checked}
onChange={onChange}
/>
</div>
);
};

CheckboxInput.propTypes = {
label: PropTypes.string,
help: PropTypes.string,
value: PropTypes.string.isRequired,
checked: PropTypes.bool,
onChange: PropTypes.func,
};

CheckboxInput.defaultProps = {
label: null,
help: null,
value: null,
checked: false,
onChange: null,
};

export default CheckboxInput;
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* stylelint-disable function-url-quotes */

.give-obw-checkbox-input {
margin: 0.5rem 1rem;
position: relative;
padding-left: 2.5rem;

> .give-obw-checkbox-input__label {
color: #333;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.56;
}

> .give-obw-checkbox-input__help {
color: #0e0e0e;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin-top: 0.5rem;
}

> .give-obw-checkbox-input__input {
appearance: none;
background-color: #fff;
border: solid 1px #4fa651;
border-radius: 0.25rem;
color: #4fa651;
cursor: pointer;
font-size: inherit;
height: 1.5rem;
left: 0;
margin: 0;
opacity: 1;
top: 0;
vertical-align: middle;
width: 1.5rem;

&:checked {
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgb%28255, 255, 255%29%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27%3E%3C/polyline%3E%3C/svg%3E");

background-color: #4fa651;
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: 1em auto;
}
}
}
Loading