Merge branch 'master' into docs-q4-report

README.md

@@ -34,7 +34,7 @@ This repository contains the sources of AsyncAPI website:
 Use the following tools to set up the project:
 
 - [Node.js](https://nodejs.org/) v16.0.0+
-- [npm](https://www.npmjs.com/) v7.10.0+
+- [npm](https://www.npmjs.com/) v8.10.0+
 
 ## Run locally
 

components/Loader.js

@@ -0,0 +1,10 @@
+import { twMerge } from "tailwind-merge"
+
+export default function Loader({ className = "", dark = false }) {
+    return (
+        <div className={twMerge(`w-fit flex flex-col m-auto ${className}`)}>
+        <svg class={`animate-spin mx-auto border-4 border-t-transparent ${dark ? 'border-white' : 'border-black'} h-10 w-10 rounded-full`} viewBox="0 0 24 24"></svg>
+        <div className={`my-2 ${dark ? 'text-white' : 'text-black'}`}>Waiting for response...</div>
+        </div>
+    )
+}

components/NewsletterSubscribe.js

@@ -1,41 +1,114 @@
+import { useState } from "react";
 import Button from "./buttons/Button";
 import Heading from "./typography/Heading";
+import TextLink from "./typography/TextLink";
 import Paragraph from "./typography/Paragraph";
+import Loader from "./Loader";
 import { useTranslation } from "../lib/i18n";
 
-export default function NewsletterSubscribe ({
+export default function NewsletterSubscribe({
   className = 'p-8 text-center',
   dark = false,
   title = 'Subscribe to our newsletter to receive news about AsyncAPI.',
   subtitle = 'We respect your inbox. No spam, promise ✌️',
-  type,
+  type='Newsletter',
 }) {
 
-  const { t } = useTranslation('common'); 
+  const [email, setEmail] = useState('');
+  const [name, setName] = useState('');
+  const [status, setStatus] = useState("normal");
+
+  const { t } = useTranslation('common');
 
   const headTextColor = dark ? 'text-white' : ''
   const paragraphTextColor = dark ? 'text-gray-300' : ''
 
+  const handleSubmit = (e) => {
+    setStatus("loading");
+    e.preventDefault()
+    const data = {
+      name: name,
+      email: email,
+      interest: type
+    }
+
+    fetch("/.netlify/functions/newsletter_subscription", {
+      method: "POST",
+      body: JSON.stringify(data),
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    }).then((res) => {
+      if (res.status === 200) {
+        setFormStatus("success");
+      } else {
+        setFormStatus("error");
+      }
+      return res.json()
+    }).then((data) => console.log(data))
+  }
+
+  const setFormStatus = (formResponse) => {
+    setStatus(formResponse);
+    setTimeout(() => {
+      setStatus("normal");
+    }, 10000);
+  }
+
+  if (status === "success") {
+    return (
+      <div className={className} data-testid="NewsletterSubscribe-main">
+        <Heading
+          level="h3"
+          textColor={headTextColor}
+          typeStyle="heading-lg"
+          className="mb-4"
+        >
+          {t('newsletterCTA.successTitle')}
+        </Heading>
+        <Paragraph className="mb-8" textColor={paragraphTextColor}>
+        {t('newsletterCTA.subtitle')}
+        </Paragraph>
+      </div>
+    )
+  }
+
+  if (status === "error") {
+    return (
+      <div className={className} data-testid="NewsletterSubscribe-main">
+        <Heading
+          level="h3"
+          textColor={headTextColor}
+          typeStyle="heading-lg"
+          className="mb-4"
+        >
+          {t('newsletterCTA.errorTitle')}
+        </Heading>
+        <Paragraph className="mb-8" textColor={paragraphTextColor}>
+          {t('newsletterCTA.errorSubtitle')}{' '}<TextLink href="https://github.com/asyncapi/website/issues/new?template=bug.md" target="_blank">{t('newsletterCTA.errorLinkText')}</TextLink> 
+        </Paragraph>
+      </div>
+    )
+  }
+
   return (
     <div className={className} data-testid="NewsletterSubscribe-main">
-      <Heading 
+      <Heading
         level="h3"
         textColor={headTextColor}
         typeStyle="heading-lg"
         className="mb-4"
       >
-        {t('newsletterCTA.title')}
+        {title}
       </Heading>
       <Paragraph className="mb-8" textColor={paragraphTextColor}>
-        {t('newsletterCTA.subtitle')}
+        {subtitle}
       </Paragraph>
-      <form name="form 1" method="POST" className="md:flex" data-netlify="true">
-        <input type="hidden" name="form-name" value="form 1" />
-        <input type="hidden" name="type" value={type} />
-        <input type="text" name="name" placeholder={t('newsletterCTA.nameInput')} className="form-input block w-full sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-text-input"/>
-        <input type="email" name="email" placeholder={t('newsletterCTA.emailInput')} className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-email-input"/>
+      {status === "loading" ? <Loader dark={dark} /> : <form className="flex flex-col md:flex-row gap-4" onSubmit={handleSubmit}>
+        <input type="text" name="name" placeholder={t('newsletterCTA.nameInput')} value={name} onChange={(e) => setName(e.target.value)} className="form-input block w-full sm:text-sm sm:leading-5 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-text-input" />
+        <input type="email" name="email" placeholder={t('newsletterCTA.emailInput')} value={email} onChange={(e) => setEmail(e.target.value)} className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-email-input" />
         <Button type="submit" text={t('newsletterCTA.subscribeBtn')} className="w-full mt-2 md:mr-2 md:mt-0 md:flex-1" />
-      </form>
+      </form>}
     </div>
   )
 }

config/mailchimp-config.json

@@ -0,0 +1,8 @@
+{
+    "listId": "6e3e437abe",
+    "interests" : {
+        "Newsletter": "a7d6314955",
+        "Meetings": "3505cd49d1",
+        "TSC Voting": "f7204f9b90"
+    }
+}

config/newsroom_videos.json

@@ -1,4 +1,10 @@
 [
+  {
+    "image_url": "https://i.ytimg.com/vi/cb7lrq5hxuE/hqdefault.jpg",
+    "title": "Community Meeting, January 23rd 2024",
+    "description": "Join us for an insightful stream diving deep into the latest advancements of AsyncAPI v3! We'll explore this cutting-edge ...",
+    "videoId": "cb7lrq5hxuE"
+  },
   {
     "image_url": "https://i.ytimg.com/vi/prFgD14u7T0/hqdefault.jpg",
     "title": "Overview of AsyncAPI v3",
@@ -22,11 +28,5 @@
     "title": "AsyncAPI Conf on Tour 2023 in Bangalore, India",
     "description": "AACoT'23 Bangalore Edition live from Postman Offices in India.",
     "videoId": "g6CPg77Lf5Q"
-  },
-  {
-    "image_url": "https://i.ytimg.com/vi/p68PUXDMsks/hqdefault.jpg",
-    "title": "Community Meeting(November 28th, 2023)",
-    "description": "https://github.com/asyncapi/community/issues/918.",
-    "videoId": "p68PUXDMsks"
   }
 ]

cypress/test/components/NewsletterSubscribe.cy.js

@@ -9,8 +9,6 @@ describe('NewsletterSubscribe Component', () => {
     cy.get('[data-testid="NewsletterSubscribe-main"]').should('exist');
     cy.get('[data-testid="NewsletterSubscribe-text-input"]').type("name");
     cy.get('[data-testid="NewsletterSubscribe-email-input"]').type("[email protected]")
-    cy.get('form[name="form 1"]').should('exist');
-    cy.get('input[name="type"]').should('exist');
     cy.get('input[name="name"]').should('exist');
     cy.get('input[name="email"]').should('exist');