Merge pull request #2159 from Sefaria/feature/sc-29891/add-email-newsletter-signups-for-sidebar

Email newsletter sign up forms for sidebar ads

Author: edamboritz

static/js/NewsletterSignUpForm.jsx

@@ -6,6 +6,7 @@ export function NewsletterSignUpForm({
                                          includeEducatorOption = true,
                                          emailPlaceholder = {en: 'Sign up for Newsletter', he: "הרשמו לניוזלטר"},
                                          subscribe=Sefaria.subscribeSefariaNewsletter,  // function which sends form data to API to subscribe
+                                         additionalNewsletterMailingLists = [],
                                      }) {
     const [email, setEmail] = useState('');
     const [firstName, setFirstName] = useState('');
@@ -24,15 +25,15 @@ export function NewsletterSignUpForm({
         if (showNameInputs === true) { // submit
             if (firstName.length > 0 && lastName.length > 0) {
                 setSubscribeMessage("Subscribing...");
-                subscribe(firstName, lastName, email, educatorCheck).then(res => {
+                subscribe(firstName, lastName, email, educatorCheck, additionalNewsletterMailingLists).then(res => {
                     setSubscribeMessage("Subscribed! Welcome to our list.");
                     Sefaria.track.event("Newsletter", "Subscribe from " + contextName, "");
                 }).catch(error => {
                     setSubscribeMessage(error?.message || "Sorry, there was an error.");
                     setShowNameInputs(false);
                 });
             } else {
-                setSubscribeMessage("Please enter a valid first and last name");// get he copy
+                setSubscribeMessage("Please enter a valid first and last name");
             }
         } else if (Sefaria.util.isValidEmailAddress(email)) {
             setShowNameInputs(true);

static/js/Promotions.jsx

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import Sefaria from "./sefaria/sefaria";
 import {EnglishText, HebrewText, InterfaceText, OnInView} from "./Misc";
 import $ from "./sefaria/sefariaJquery";
+import { NewsletterSignUpForm } from "./NewsletterSignUpForm";
 
 const Promotions = () => {
   const [inAppAds, setInAppAds] = useState(Sefaria._inAppAds); // local cache
@@ -36,6 +37,11 @@ const Promotions = () => {
             buttonIcon: sidebarAd.buttonIcon,
             buttonLocation: sidebarAd.buttonAboveOrBelow,
             hasBlueBackground: sidebarAd.hasBlueBackground,
+            isNewsletterSubscriptionInputForm: sidebarAd.isNewsletterSubscriptionInputForm,
+            newsletterMailingLists:
+              sidebarAd.newsletterMailingLists?.data.map(
+                (mailingLists) => mailingLists.attributes.newsletterName
+              ) ?? [],
             trigger: {
               showTo: sidebarAd.showTo,
               interfaceLang: "english",
@@ -209,40 +215,47 @@ const SidebarAd = React.memo(({ context, matchingAd }) => {
     );
   }
 
-  return (
-    <OnInView onVisible={() => trackSidebarAdImpression(matchingAd)}>
-      <div className={classes}>
-        <h3
-          className={context.interfaceLang === "hebrew" ? "int-he" : "int-en"}
-        >
-          {matchingAd.title}
-        </h3>
-        {matchingAd.buttonLocation === "below" ? (
-          <>
-            <p
-              className={
-                context.interfaceLang === "hebrew" ? "int-he" : "int-en"
-              }
-            >
-              {matchingAd.bodyText}
-            </p>
-            {getButton()}
-          </>
-        ) : (
-          <>
-            {getButton()}
-            <p
-              className={
-                context.interfaceLang === "hebrew" ? "int-he" : "int-en"
-              }
-            >
-              {matchingAd.bodyText}
-            </p>
-          </>
-        )}
-      </div>
-    </OnInView>
-  );
+    const isHebrew = context.interfaceLang === "hebrew";
+    const getLanguageClass = () => (isHebrew ? "int-he" : "int-en");
+
+    return (
+      <OnInView onVisible={() => trackSidebarAdImpression(matchingAd)}>
+        <div className={classes}>
+          <h3 className={getLanguageClass()}>{matchingAd.title}</h3>
+          {matchingAd.buttonLocation === "below" ? (
+            matchingAd.isNewsletterSubscriptionInputForm ? (
+              <>
+                <p className={getLanguageClass()}>{matchingAd.bodyText}</p>
+                <NewsletterSignUpForm
+                  context={"Sidebar Ad: " + context.keywordTargets.toString()}
+                  includeEducatorOption={false}
+                  additionalNewsletterMailingLists={matchingAd.newsletterMailingLists}
+                />
+              </>
+            ) : (
+              <>
+                <p className={getLanguageClass()}>{matchingAd.bodyText}</p>
+                {getButton()}
+              </>
+            )
+          ) : matchingAd.isNewsletterSubscriptionInputForm ? (
+            <>
+              <NewsletterSignUpForm
+                context={"Sidebar Ad: " + context.keywordTargets.toString()}
+                includeEducatorOption={false}
+                additionalNewsletterMailingLists={matchingAd.newsletterMailingLists}
+              />
+              <p className={getLanguageClass()}>{matchingAd.bodyText}</p>
+            </>
+          ) : (
+            <>
+              {getButton()}
+              <p className={getLanguageClass()}>{matchingAd.bodyText}</p>
+            </>
+          )}
+        </div>
+      </OnInView>
+    );
 });
 
 export { Promotions, GDocAdvertBox };

static/js/context.js

@@ -163,6 +163,14 @@ function StrapiDataProvider({ children }) {
                 showTo
                 startTime
                 updatedAt
+                isNewsletterSubscriptionInputForm
+                newsletterMailingLists {
+                  data {
+                    attributes {
+                      newsletterName
+                    }
+                  }
+                }
               }
             }
           }

static/js/sefaria/sefaria.js

@@ -654,12 +654,13 @@ Sefaria = extend(Sefaria, {
       Sefaria._portals[portalSlug] = response;
       return response;
   },
-  subscribeSefariaNewsletter: async function(firstName, lastName, email, educatorCheck) {
+  subscribeSefariaNewsletter: async function(firstName, lastName, email, educatorCheck, lists = []) {
       const payload = {
         language: Sefaria.interfaceLang === "hebrew" ? "he" : "en",
         educator: educatorCheck,
         firstName: firstName,
         lastName: lastName,
+        ...(lists?.length && { lists }),
       };
       return await Sefaria.apiRequestWithBody(`/api/subscribe/${email}`, null, payload);
   },

static/js/sefaria/strings.js

@@ -500,6 +500,7 @@ const Strings = {
     "Please enter a valid email address.": 'כתובת הדוא"ל שהוזנה אינה תקינה.',
     "Subscribed! Welcome to our list.": "הרשמה בוצעה בהצלחה!",
     "Sorry, there was an error.": "סליחה, ארעה שגיאה",
+    "Please enter a valid first and last name.": "נא להוסיף שם פרטי ושם משפחה.",
 
     // Footer
     "Connect": "צרו קשר",

static/js/sefaria/util.js

@@ -112,19 +112,6 @@ class Util {
         };
         const postData = {json: JSON.stringify(feedback)};
         $.post('/api/send_feedback', postData);
-    }
-     static subscribeToNbList(email, lists) {
-        if (Sefaria.util.isValidEmailAddress(email)) {
-            $.post("/api/subscribe/" + email + "?lists=" + lists, function(data) {
-                if ("error" in data) {
-                    console.log(data.error);
-                } else {
-                    console.log("Subscribed! Welcome to our list.");
-                }
-            }).error(data => console.log("Sorry, there was an error."));
-        } else {
-        console.log("not valid email address")
-        }
     }
     static naturalTimePlural(n, singular, plural) {
       return n <= 1 ? singular : plural;