🐛 Live Stream - Newsletters signup (#859)

SSWConsulting · Jun 23, 2023 · 3bc1016 · 3bc1016
1 parent 583407b
commit 3bc1016
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 28 deletions.
diff --git a/components/blocks/subNewsLetters.tsx b/components/blocks/subNewsLetters.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { Template } from "tinacms";
 import axios from "axios";
+import React, { useState } from "react";
 import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
+import { Template } from "tinacms";
 
 /**
  * A component for subscribing to newsletters.
@@ -15,10 +15,17 @@ const placeholder = {
   email: "Email",
 };
 
+const Default = {
+  headerText:
+    "Subscribe to the <span class='font-bold text-sswRed'>SSW Newsletter</span",
+  subscribeButtonText: "Subscribe",
+  subscribeSubTitle: "Stay tuned for SSW News & upcoming events",
+};
+
 export const SubNewsLetters = ({
-  headerText,
-  subscribeButtonText,
-  subscribeSubTitle,
+  headerText = Default.headerText,
+  subscribeButtonText = Default.subscribeButtonText,
+  subscribeSubTitle = Default.subscribeSubTitle,
 }) => {
   const [email, setEmail] = useState("");
   const [firstName, setFirstName] = useState("");

diff --git a/components/liveStream/liveStream.tsx b/components/liveStream/liveStream.tsx
@@ -4,11 +4,11 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import Script from "next/script";
 import { FC, useEffect, useState } from "react";
-import { FaEnvelope } from "react-icons/fa";
 import { TfiAngleDown, TfiAngleUp } from "react-icons/tfi";
 import { Tooltip } from "react-tooltip";
 import layoutData from "../../content/global/index.json";
 import { LiveStreamWidgetInfo, SpeakerInfo } from "../../services";
+import { SubNewsLetters } from "../blocks/subNewsLetters";
 import ReactPlayer from "../reactPlayer/reactPlayer";
 import { SocialIcons, SocialTypes } from "../util/socialIcons";
 import { LiveStreamProps } from "./useLiveStreamProps";
@@ -342,28 +342,7 @@ export const LiveStream: FC<LiveStreamProps> = ({ isLive, event }) => {
                 excludeMobile={[SocialTypes.phone]}
               />
             </div>
-
-            <div className="mt-17">
-              <h3 className="mb-3 font-bold">
-                Get notified about news & future events
-              </h3>
-              <div className="grid grid-cols-3 gap-8">
-                <input
-                  className="col-span-3 appearance-none rounded border-1 border-gray-300 px-3 py-2 leading-tight text-gray-700 focus:shadow focus:outline md:col-span-2"
-                  id="email"
-                  type="email"
-                  placeholder="Your Email"
-                />
-                {/* TODO: Implement subscribe function */}
-                <a
-                  href="#"
-                  className="col-span-3 flex h-11 items-center justify-center rounded-md bg-sswRed align-middle leading-4 text-white !no-underline hover:!text-gray-125 md:col-span-1"
-                >
-                  <FaEnvelope className="mr-2" />
-                  Subscribe
-                </a>
-              </div>
-            </div>
+            <SubNewsLetters />
           </div>
 
           <div className="bg-gray-75 px-4 py-2">