feat: newsletter email with public endpoint!

Gemfile

@@ -154,3 +154,4 @@ gem "neighbor"
 
 gem "email_reply_parser"
 gem "appsignal"
+gem "mjml-rails"

Gemfile.lock

@@ -381,6 +381,7 @@ GEM
       railties (>= 7.1)
       stimulus-rails
       turbo-rails
+    mjml-rails (5.0.0)
     msgpack (1.8.1)
     multi_xml (0.9.1)
       bigdecimal (>= 3.1, < 5)
@@ -825,6 +826,7 @@ DEPENDENCIES
   letter_opener_web
   lockbox
   mission_control-jobs
+  mjml-rails
   neighbor
   norairrecord
   omniauth

app/assets/stylesheets/admin.scss

@@ -1,5 +1,6 @@
 /* Import page-specific styles */
 @use "pages/admin/ysws_reviews";
+@use "pages/admin/email_templates";
 @use "pages/certification/reports";
 @use "pages/shop/admin_shop_shared";
 @use "pages/shop/admin_shop_dashboard";

app/assets/stylesheets/landing.scss

@@ -29,3 +29,4 @@
 @use "landing/educator_toolkit";
 @use "landing/landing_footer";
 @use "landing/user_ref_modal";
+@use "landing/email_preview";

app/assets/stylesheets/landing/_email_preview.scss

@@ -0,0 +1,42 @@
+.email-preview {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 4rem 2rem;
+  z-index: 0;
+}
+
+.email-preview__bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    transform: none !important;
+  }
+}
+
+.email-preview__frame {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 640px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
+}
+
+.email-preview__iframe {
+  display: block;
+  width: 100%;
+  border: none;
+  overflow: hidden;
+}

app/assets/stylesheets/pages/admin/_email_templates.scss

@@ -0,0 +1,226 @@
+.email-templates {
+  max-width: 860px;
+
+  &__title {
+    font-family: var(--font-family-text);
+    font-size: 40px;
+    font-weight: 700;
+    color: #fff;
+    line-height: 1.1;
+    margin: 0 0 48px;
+  }
+
+  &__upload {
+    background: var(--color-set-2-bg);
+    border: 2px solid var(--color-space-border);
+    border-radius: 8px;
+    padding: 32px;
+    margin-bottom: 48px;
+  }
+
+  &__upload-label {
+    display: block;
+    font-family: var(--font-family-text);
+    font-size: 19px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #fff;
+    margin: 0 0 8px;
+  }
+
+  &__upload-hint {
+    font-family: var(--font-family-text);
+    font-size: 16px;
+    color: #83828d;
+    margin: 0 0 24px;
+  }
+
+  &__upload-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  &__file-input {
+    font-family: var(--font-family-text);
+    font-size: 16px;
+    color: #fff;
+    flex: 1;
+    min-width: 0;
+
+    &::file-selector-button {
+      background: var(--color-set-3-bg);
+      color: #fff;
+      border: none;
+      border-radius: 999px;
+      padding: 3px 16px;
+      font-family: var(--font-family-text);
+      font-size: 16px;
+      font-weight: 700;
+      cursor: pointer;
+      margin-right: 12px;
+      transition:
+        background 120ms ease,
+        color 120ms ease;
+
+      &:hover {
+        background: var(--color-brand-highlight);
+        color: var(--color-set-1-bg);
+      }
+    }
+  }
+
+  &__name-input {
+    font-family: var(--font-family-text);
+    font-size: 16px;
+    color: #fff;
+    background: var(--color-set-1-bg);
+    border: 2px solid var(--color-space-border);
+    border-radius: 8px;
+    padding: 3px 12px;
+    flex: 1;
+    min-width: 160px;
+    transition: border-color 120ms ease;
+
+    &::placeholder {
+      color: #83828d;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-brand-highlight);
+    }
+  }
+
+  &__submit {
+    background: var(--color-brand-highlight);
+    color: var(--color-set-1-bg);
+    border: 2px solid var(--color-brand-highlight);
+    border-radius: 999px;
+    padding: 3px 28px;
+    font-family: var(--font-family-text);
+    font-size: 16px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 120ms ease;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--color-brand-highlight-secondary);
+      border-color: var(--color-brand-highlight-secondary);
+    }
+  }
+
+  &__table-heading {
+    font-family: var(--font-family-text);
+    font-size: 19px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #fff;
+    margin: 0 0 16px;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-family-text);
+    font-size: 16px;
+
+    thead tr {
+      border-bottom: 2px solid var(--color-space-border);
+    }
+
+    th {
+      text-align: left;
+      font-size: 13px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      color: #83828d;
+      padding: 8px 16px 8px 0;
+    }
+
+    tbody tr {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+      transition: background 100ms ease;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.03);
+      }
+    }
+
+    td {
+      padding: 16px 16px 16px 0;
+      color: #fff;
+      vertical-align: middle;
+    }
+  }
+
+  &__name {
+    font-family: monospace;
+    font-size: 14px;
+    background: var(--color-set-1-bg);
+    border: 1px solid var(--color-space-border);
+    border-radius: 4px;
+    padding: 3px 8px;
+    color: var(--color-brand-mint);
+  }
+
+  &__date {
+    color: #83828d;
+    font-size: 14px;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__action-link {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--color-brand-blue);
+    text-decoration: none;
+    border-radius: 999px;
+    padding: 3px 16px;
+    border: 2px solid var(--color-brand-blue);
+    transition:
+      background 120ms ease,
+      color 120ms ease;
+
+    &:hover {
+      background: var(--color-brand-blue);
+      color: var(--color-set-1-bg);
+    }
+  }
+
+  &__action-delete {
+    background: transparent;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--color-brand-salmon);
+    border: 2px solid var(--color-brand-salmon);
+    border-radius: 999px;
+    padding: 3px 16px;
+    cursor: pointer;
+    transition:
+      background 120ms ease,
+      color 120ms ease;
+
+    &:hover {
+      background: var(--color-brand-salmon);
+      color: var(--color-set-1-bg);
+    }
+  }
+
+  &__empty {
+    font-family: var(--font-family-text);
+    font-size: 19px;
+    color: #83828d;
+    padding: 32px 0;
+  }
+}

app/controllers/admin/email_templates_controller.rb

@@ -0,0 +1,49 @@
+module Admin
+  class EmailTemplatesController < Admin::ApplicationController
+    before_action :authorize_email_templates
+    before_action :set_template, only: [ :destroy ]
+    before_action :require_week_2_release
+
+    def index
+      @templates = EmailTemplate.order(:name)
+    end
+
+    def create
+      file = params[:file]
+      unless file.respond_to?(:read)
+        return redirect_to admin_email_templates_path, alert: "Please select a .mjml file."
+      end
+
+      name = params[:name].presence&.strip || File.basename(file.original_filename, ".*").gsub(/\.html$/, "")
+      body = file.read.force_encoding("UTF-8")
+
+      template = EmailTemplate.find_or_initialize_by(name: name)
+      template.body = body
+
+      if template.save
+        redirect_to admin_email_templates_path, notice: "\"#{name}\" #{template.previously_new_record? ? "uploaded" : "updated"}."
+      else
+        redirect_to admin_email_templates_path, alert: template.errors.full_messages.to_sentence
+      end
+    end
+
+    def destroy
+      @template.destroy
+      redirect_to admin_email_templates_path, notice: "\"#{@template.name}\" deleted."
+    end
+
+    private
+
+    def set_template
+      @template = EmailTemplate.find_by!(name: params[:id])
+    end
+
+    def authorize_email_templates
+      authorize :admin, :access_email_templates?
+    end
+
+    def require_week_2_release
+      render_not_found unless Flipper.enabled?(:week_2_release)
+    end
+  end
+end

app/controllers/email_templates_controller.rb

@@ -0,0 +1,19 @@
+class EmailTemplatesController < ApplicationController
+  skip_before_action :show_pending_achievement_notifications!,
+                     :initialize_cache_counters,
+                     :track_active_user,
+                     raise: false
+
+  def show
+    @template = EmailTemplate.find_by!(name: params[:name])
+    @content_url = public_email_template_content_path(params[:name])
+    render "admin/email_templates/preview", layout: false
+  end
+
+  def content
+    Rack::MiniProfiler.deauthorize_request
+    template = EmailTemplate.find_by!(name: params[:name])
+    compiled_html = Mjml::Parser.new(template.name, template.body).render
+    render body: compiled_html, content_type: "text/html"
+  end
+end

app/models/email_template.rb

@@ -0,0 +1,24 @@
+# == Schema Information
+#
+# Table name: email_templates
+#
+#  id         :bigint           not null, primary key
+#  body       :text
+#  name       :string
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
+# Indexes
+#
+#  index_email_templates_on_name  (name) UNIQUE
+#
+class EmailTemplate < ApplicationRecord
+  has_paper_trail
+
+  validates :name, presence: true, uniqueness: true, format: { with: /\A[a-z0-9_-]+\z/, message: "only lowercase letters, numbers, hyphens, underscores" }
+  validates :body, presence: true
+
+  def to_param
+    name
+  end
+end