fix: Removes NewsletterForm usage in favor of sole link to newsletter (…

…#3897)

Signed-off-by: John McBride <[email protected]>

components/molecules/NewsletterForm/newsletter-form.stories.tsx

@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import NewsletterForm from "components/molecules/NewsletterForm/newsletter-form";
+import NewsletterLink from "components/molecules/NewsletterForm/newsletter-form";
 
 const storyConfig = {
   title: "Design System/Molecules/NewsletterForm",
-} as ComponentMeta<typeof NewsletterForm>;
+} as ComponentMeta<typeof NewsletterLink>;
 
 export default storyConfig;
 
-const NewsletterFormTemplate: ComponentStory<typeof NewsletterForm> = (args) => <NewsletterForm />;
+const NewsletterFormTemplate: ComponentStory<typeof NewsletterLink> = (args) => <NewsletterLink />;
 
 export const Default = NewsletterFormTemplate.bind({});

components/molecules/NewsletterForm/newsletter-form.tsx

@@ -7,6 +7,16 @@ import TextInput from "components/atoms/TextInput/text-input";
 import SaucedLogo from "img/fallbackImageColor.svg";
 import { validateEmail } from "lib/utils/validate-email";
 
+/*
+ * cursed: this form needs a refactor as it won't actually subscribe the user to
+ * the newsletter while still returning success. This is related to breaking changes
+ * with how Next works with Netlify forms: https://docs.netlify.com/frameworks/next-js/overview/#breaking-changes
+ *
+ * For now, use NewsletterLink which is a simple link off to the ghost.io blog directly.
+ *
+ * related to: https://github.com/open-sauced/app/issues/3796
+ */
+
 const NewsletterForm = () => {
   const [loading, setLoading] = useState(false);
   const [email, setEmail] = useState("");
@@ -127,4 +137,30 @@ const NewsletterForm = () => {
   );
 };
 
-export default NewsletterForm;
+const NewsletterLink = () => {
+  return (
+    <aside
+      aria-labelledby="subscribe-to-newsletter"
+      className="newsletter-wrap flex flex-col w-full gap-3 p-6 pt-5 border rounded-lg bg-light-slate-1"
+    >
+      <div className="w-64 space-y-1">
+        <h2 className="text-lg" id="subscribe-to-newsletter">
+          Subscribe to our newsletter
+        </h2>
+        <p className="text-sm font-normal text-light-slate-11">
+          Stay up to date with the latest OpenSauced news and trends!
+        </p>
+      </div>
+      <a
+        href="https://news.opensauced.pizza/#/portal/signup"
+        target="_blank"
+        className="flex flex-none justify-center py-1 border-light-orange-7 text-light-orange-10 px-2"
+        type="button"
+      >
+        Subscribe
+      </a>
+    </aside>
+  );
+};
+
+export default NewsletterLink;

pages/feed/index.tsx

@@ -28,7 +28,7 @@ import Pagination from "components/molecules/Pagination/pagination";
 import PaginationResults from "components/molecules/PaginationResults/pagination-result";
 import FollowingHighlightWrapper from "components/organisms/FollowersHighlightWrapper/following-highlight-wrapper";
 import HomeHighlightsWrapper from "components/organisms/HomeHighlightsWrapper/home-highlights-wrapper";
-import NewsletterForm from "components/molecules/NewsletterForm/newsletter-form";
+import NewsletterLink from "components/molecules/NewsletterForm/newsletter-form";
 import UserCard, { MetaObj } from "components/atoms/UserCard/user-card";
 import FeaturedHighlightsPanel from "components/molecules/FeaturedHighlightsPanel/featured-highlights-panel";
 import AnnouncementCard from "components/molecules/AnnouncementCard/announcement-card";
@@ -165,7 +165,7 @@ export default function Feeds(props: HighlightSSRProps) {
           twitterCard="summary_large_image"
         />
         <div className="hidden">
-          <NewsletterForm />
+          <NewsletterLink />
         </div>
       </>
     );
@@ -361,7 +361,7 @@ export default function Feeds(props: HighlightSSRProps) {
             {featuredHighlights && featuredHighlights.length > 0 && (
               <FeaturedHighlightsPanel highlights={featuredHighlights} />
             )}
-            <NewsletterForm />
+            <NewsletterLink />
           </div>
         </div>
       </WorkspaceLayout>