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