From 436a18e92b19e2c1fe5d872ad511d7c65e0063ce Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Thu, 18 Jul 2024 14:49:37 -0300 Subject: [PATCH] Refactor: Separate Checkboxes for Telemetry and Newsletter Subscription in Onboarding Wizard (#7447) --- .../js/admin/onboarding-wizard/app/index.js | 2 + .../app/steps/donation-form/index.js | 31 +++++++++++- .../app/steps/donation-form/style.scss | 21 ++++++-- .../app/steps/your-cause/index.js | 43 +++++++++------- .../app/steps/your-cause/style.scss | 23 ++------- .../onboarding-wizard/app/store/actions.js | 20 ++++++++ .../onboarding-wizard/app/store/reducer.js | 14 ++++++ .../components/checkbox-input/index.js | 47 ++++++++++++++++++ .../components/checkbox-input/style.scss | 49 +++++++++++++++++++ 9 files changed, 207 insertions(+), 43 deletions(-) create mode 100644 assets/src/js/admin/onboarding-wizard/components/checkbox-input/index.js create mode 100644 assets/src/js/admin/onboarding-wizard/components/checkbox-input/style.scss diff --git a/assets/src/js/admin/onboarding-wizard/app/index.js b/assets/src/js/admin/onboarding-wizard/app/index.js index aa898a2a09..8a3f0e0a05 100644 --- a/assets/src/js/admin/onboarding-wizard/app/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/index.js @@ -45,6 +45,8 @@ const App = () => { configuration: { userType: 'individual', causeType: '', + usageTracking: true, + newsletterSubscription: true, country: getDefaultCountry(), state: getDefaultState(), currency: getDefaultCurrency(), diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js index b0ba861b1f..b73ad32751 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js @@ -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 (
@@ -40,8 +50,27 @@ const DonationForm = () => { {__('Extend functionality with add-ons and more', 'give')} +
+ dispatch(setNewsletterSubscription(e.target.checked))} + /> +
- + { + if (newsletterSubscription) { + subscribeToNewsletter(configuration); + } + }} + />
diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss index 93e2b5fb9c..fed130765a 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss @@ -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; } @@ -17,6 +17,7 @@ .give-obw-donation-form__fixed { position: fixed; + max-width: 616px; } h1 { @@ -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; + } + } + } } diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js index b1d5e2ee18..fdb176d759 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js @@ -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'; @@ -24,6 +24,7 @@ const YourCause = () => { const userType = configuration.userType; const causeType = configuration.causeType; + const usageTracking = configuration.usageTracking; return (
@@ -53,25 +54,29 @@ const YourCause = () => { dispatch( setCauseType( value ) )} options={getCauseTypes()} />
-
-

{__( '🌱 Would you like to join the GiveWP Community?', 'give' )}

-

{__( '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' )}

-
- - { - // Opt-in to usage tracking. - saveSettingWithOnboardingAPI('usage_tracking', 'enabled'); - - // Subscribe to ActiveCampaign. - subscribeToNewsletter( configuration ); - }} /> +
+ dispatch(setUsageTracking(e.target.checked))} + /> +
- + { + saveSettingWithOnboardingAPI('usage_tracking', usageTracking ? 'enabled' : 'disabled'); + }} + />
-
- ); + + ); }; export default YourCause; - diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss index 50623e9578..abf4784f1c 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss @@ -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 { diff --git a/assets/src/js/admin/onboarding-wizard/app/store/actions.js b/assets/src/js/admin/onboarding-wizard/app/store/actions.js index d0d8f929f0..e431741b59 100644 --- a/assets/src/js/admin/onboarding-wizard/app/store/actions.js +++ b/assets/src/js/admin/onboarding-wizard/app/store/actions.js @@ -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 { diff --git a/assets/src/js/admin/onboarding-wizard/app/store/reducer.js b/assets/src/js/admin/onboarding-wizard/app/store/reducer.js index f59da0e71d..19ff8e0e7d 100644 --- a/assets/src/js/admin/onboarding-wizard/app/store/reducer.js +++ b/assets/src/js/admin/onboarding-wizard/app/store/reducer.js @@ -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 { diff --git a/assets/src/js/admin/onboarding-wizard/components/checkbox-input/index.js b/assets/src/js/admin/onboarding-wizard/components/checkbox-input/index.js new file mode 100644 index 0000000000..a2333ee8ac --- /dev/null +++ b/assets/src/js/admin/onboarding-wizard/components/checkbox-input/index.js @@ -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 ( +
+ {label && ( + + )} + {help &&

{help}

} + +
+ ); +}; + +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; diff --git a/assets/src/js/admin/onboarding-wizard/components/checkbox-input/style.scss b/assets/src/js/admin/onboarding-wizard/components/checkbox-input/style.scss new file mode 100644 index 0000000000..3bddfb5390 --- /dev/null +++ b/assets/src/js/admin/onboarding-wizard/components/checkbox-input/style.scss @@ -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; + } + } +}