subscribe use turbo frames, all unsubscribe, add module to careers page

chillenberger · chillenberger · commit 9e90df60e51f · 2024-03-12T13:15:37.000-06:00
diff --git a/pgml-dashboard/src/components/cards/newsletter_subscribe/mod.rs b/pgml-dashboard/src/components/cards/newsletter_subscribe/mod.rs
@@ -3,11 +3,34 @@ use sailfish::TemplateOnce;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "cards/newsletter_subscribe/template.html")]
-pub struct NewsletterSubscribe {}
+pub struct NewsletterSubscribe {
+    success: Option<bool>,
+    error_message: Option<String>,
+    email: Option<String>,
+}
 
 impl NewsletterSubscribe {
     pub fn new() -> NewsletterSubscribe {
-        NewsletterSubscribe {}
+        NewsletterSubscribe {
+            success: None,
+            error_message: None,
+            email: None,
+        }
+    }
+
+    pub fn success(mut self, success: bool) -> Self {
+        self.success = Some(success);
+        self
+    }
+
+    pub fn error_message(mut self, error_message: &str) -> Self {
+        self.error_message = Some(error_message.to_owned());
+        self
+    }
+
+    pub fn email(mut self, email: &str) -> Self {
+        self.email = Some(email.to_owned());
+        self
     }
 }
 
diff --git a/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss b/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe.scss
@@ -9,4 +9,17 @@ div[data-controller="cards-newsletter-subscribe"] {
         background-image: url("/dashboard/static/images/newsletter_subscribe_background_mobile.png");
         background-color: #{$pink};
     }
+
+    .message {
+        display: none;
+
+        &.success, &.error {
+            display: block;
+        }
+
+        bottom: -3rem;
+        @include media-breakpoint-up(xl) {
+            left: 0px;
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe_controller.js b/pgml-dashboard/src/components/cards/newsletter_subscribe/newsletter_subscribe_controller.js
diff --git a/pgml-dashboard/src/components/cards/newsletter_subscribe/template.html b/pgml-dashboard/src/components/cards/newsletter_subscribe/template.html
@@ -1,17 +1,54 @@
-<div data-controller="cards-newsletter-subscribe">
-  <div class="d-flex flex-column flex-lg-row gap-4 justify-content-center align-items-center newsletter-subscribe-container p-5 rounded-4">
-    <div class="d-flex flex-column gap-4 text-center text-md-start" style="flex: 4">
-      <h3>Subscribe to our newsletter. (It’s better than you think)</h3>
-      <p>No spam. No sales pitches. Just product updates. Keep up with all our articles and news. Join our newsletter and stay up to date!</p>
-    </div>
+<%
+  use pgml_components::Component;
+
+  let success_class = match success {
+    Some(true) => "success",
+    Some(false) => "error",
+    None => ""
+  };
+
+  let message = match success {
+    Some(true) => "Success".to_string(),
+    Some(false) => error_message.unwrap_or("Something went wrong".to_string()),
+    None => String::new()
+  };
+
+  let error_icon = match success {
+    Some(false) => Component::from(r#"<span class="material-symbols-outlined m-auto pe-2 text-error">warning</span>"#),
+    _ => Component::from("")
+  };
 
-    <form action="/newsletter_subscribe" class="d-flex flex-column justify-content-center align-items-center gap-3 w-100" style="flex: 3" method="post" data-cards-newsletter-subscribe-target="form">
-      <div class="input-group p-1 ps-3 subscribe-input">
-        <input  type="email" class="form-control border-0" placeholder="hootareyou@email.com" name="email" autocomplete="off">
-        <!-- <button type="submit" class="btn btn-primary rounded-2 d-none d-md-block">Subscribe</button> -->
-        <button type="button" class="btn btn-primary rounded-2 d-none d-md-block" data-action="cards-newsletter-subscribe#submitRequest">Subscribe</button>
+  let email_placeholder = match &email {
+    Some(email) => email.clone().to_string(),
+    None => {
+      let message = match success {
+        Some(true) => "Add Another Email".to_string(),
+        _ => "hootareyou@email.com".to_string()
+      };
+      message
+    }
+  };
+%>
+
+<turbo-frame id="newsletter-subscribe-frame">
+  <div data-controller="cards-newsletter-subscribe">
+    <div class="d-flex flex-column flex-lg-row gap-5 justify-content-between align-items-center newsletter-subscribe-container p-5 rounded-4">
+      <div class="d-flex flex-column gap-4 text-center text-md-start w-100">
+        <h3>Subscribe to our newsletter.<br> (It’s better than you think)</h3>
+        <p>No spam. No sales pitches. Just product updates. Keep up with all our articles and news. Join our newsletter and stay up to date!</p>
+      </div>
+
+      <div class="d-flex flex-column justify-content-center align-items-xl-end align-items-center gap-3 w-100 position-relative" style="max-width: 27rem;">
+        <form action="/newsletter_subscribe" class="d-flex flex-lg-row flex-column gap-3 w-100" method="post">
+          <div class="input-group p-1 ps-3 subscribe-input">
+            <input  type="email" class="form-control border-0" placeholder="<%- email_placeholder %>" name="email" autocomplete="off" <% if email.is_some() {%>value="<%- email.unwrap() %><% } %>">
+            <%+ error_icon %>
+            <button type="submit" class="btn btn-primary rounded-2 d-none d-md-block">Subscribe</button>
+          </div>
+          <button type="submit" class="btn btn-primary rounded-2 d-md-none mx-auto">Subscribe</button>
+        </form>
+        <p class="message <%- success_class %> position-absolute body-small-text"><%- message %></p>
       </div>
-      <button type="submit" class="btn btn-primary rounded-2 d-md-none" data-action="cards-newsletter-subscribe#submitRequest">Subscribe</button>
-    </form>
+    </div>
   </div>
-</div>
+</turbo-frame>
diff --git a/pgml-dashboard/src/components/loading/message/mod.rs b/pgml-dashboard/src/components/loading/message/mod.rs
@@ -1,5 +1,5 @@
-use sailfish::TemplateOnce;
 use pgml_components::component;
+use sailfish::TemplateOnce;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "loading/message/template.html")]
diff --git a/pgml-dashboard/src/components/pages/blog/landing_page/template.html b/pgml-dashboard/src/components/pages/blog/landing_page/template.html
@@ -4,8 +4,7 @@
   use crate::components::sections::common_resources::{Cards, CommonResources};
   use crate::components::pages::blog::blog_search::call::Call as BlogSearchCall;
   use crate::components::cards::NewsletterSubscribe;
-
-
+  use crate::utils::config::standalone_dashboard;
 
   let cards = featured_cards.iter().map(|card| {
     ArticlePreview::new(card).featured().render_once().unwrap()
@@ -37,9 +36,12 @@ <h1>PostgresML <span class="text-gradient-blue">Blog</span></h1>
       <%+ BlogSearchCall::new() %>
     </div>
 
+
+    <% if !standalone_dashboard() { %>
     <div class="mt-5 container">
       <%+ NewsletterSubscribe::new() %>
     </div>
+    <% } %>
 
     <div class="mt-5">
       <%+ CommonResources::new().show(Vec::from([Cards::Contribute, Cards::Docs, Cards::Community])) %>
diff --git a/pgml-dashboard/src/components/pages/careers/landing_page/template.html b/pgml-dashboard/src/components/pages/careers/landing_page/template.html
@@ -1,6 +1,8 @@
 <%
   use crate::components::sections::common_resources::{CommonResources, Cards};
   use crate::components::sections::EmploymentBenefits;
+  use crate::components::cards::NewsletterSubscribe;
+  use crate::utils::config::standalone_dashboard;
 %>
 
 <div data-controller="pages-careers-landing-page" class="overflow-hidden tuck-under-navbar">
@@ -84,7 +86,15 @@ <h2>Working with us</h2>
         <%+ EmploymentBenefits::new() %>
       </div>
 
-      <%+ CommonResources::new().show(Vec::from([Cards::Contribute, Cards::Docs, Cards::Community])) %>
+      <% if !standalone_dashboard() { %>
+      <div class="mt-5 container">
+        <%+ NewsletterSubscribe::new() %>
+      </div>
+      <% } %>
+
+      <div class="mt-5">
+        <%+ CommonResources::new().show(Vec::from([Cards::Contribute, Cards::Docs, Cards::Community])) %>
+      </div>
 
     </div>
   </div>
