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