Refactor: Separate Checkboxes for Telemetry and Newsletter Subscripti…

…on in Onboarding Wizard (#7447)

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(),

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 (
         <div className="give-obw-donation-form">
             <div className="give-obw-donation-form__preview">
@@ -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>

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

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 (
 		<div className="give-obw-your-cause">
@@ -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;
-

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 {

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 {

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 {

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 (
+        <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;

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