From 71dcce7a7b9fdd43fca87dee94ba937001d63a80 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Wed, 10 Jul 2024 15:59:46 -0300 Subject: [PATCH 1/2] refactor: implement explicit opt-in for usage tracking --- .../js/admin/onboarding-wizard/app/index.js | 2 + .../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 +++++++++++++++++++ 7 files changed, 159 insertions(+), 39 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/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; + } + } +} From 02b8cefb93ea0b444f873d23de737850933132c5 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Wed, 10 Jul 2024 16:37:14 -0300 Subject: [PATCH 2/2] feature: implement opt-in for newsletter subscription --- .../app/steps/donation-form/index.js | 31 ++++++++++++++++++- .../app/steps/donation-form/style.scss | 21 +++++++++++-- 2 files changed, 48 insertions(+), 4 deletions(-) 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))} + /> +
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; + } + } + } }