feature: implement opt-in for newsletter subscription

impress-org · Jul 18, 2024 · 02b8cef · 02b8cef
1 parent 71dcce7
commit 02b8cef
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 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
@@ -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>

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