Feature/nonprofit form error message (#514)

* Node version fixed

* Remove package-lock.json

* package-lock.json removed

* Google ads conversion tracking second iteration.

* Preview param bug fix

* feature(application): add flash messages partial

* fix(add nonprofit): add model validations, remove reload meta tag, disable turbo in form, and improve form markup.

* fix(add a nonprofit): create separate routes for each type of message

* fix(add a nonprofit): create separate controllers and views for each type of message

* fix(add a nonprofit): disable globally links to message form.

* refactor(messages): rename controllers, views, and path helpers

---------

Co-authored-by: Alan Soto <[email protected]>

app/components/footer/component.html.slim

@@ -6,7 +6,7 @@ footer class="bg-blue-dark"
       div class="grid grid-cols-2 md:gap-20"
         ul class="flex flex-col md:pb-3 md:ml-10"
           li = link_to 'About Us', about_us_path, class:"text-sm md:text-small"
-          li = link_to 'Contact Us', contact_path, class:"text-sm md:text-small"
+          li = link_to 'Contact Us', new_contact_message_path, class:"text-sm md:text-small"
           li = link_to 'Donate' , donate_path, class:"text-sm md:text-small"
         ul class="flex flex-col pb-5 md:pb-3 md:mr-10"
           li = link_to 'Help', faqs_path, class:"text-sm md:text-small"

app/components/navbar/component.html.slim

@@ -13,7 +13,7 @@ nav id="main-navbar" data-controller="navbar--component" class="#{non_sticky_pat
         li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/search") ? "text-seafoam border-seafoam" : ""}"
           = link_to 'Search', search_path
         li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/nonprofit" ? "text-seafoam border-seafoam" : ""}"
-          = link_to 'Add a Nonprofit', non_profit_contact_path
+          = link_to 'Add a Nonprofit', new_nonprofit_request_path
         li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/about_us" ? "text-seafoam border-seafoam" : ""}"
           = link_to 'About Us', about_us_path
         li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/discover") ? "text-seafoam border-seafoam" : ""}"
@@ -40,7 +40,7 @@ nav id="main-navbar" data-controller="navbar--component" class="#{non_sticky_pat
         - if @signed_in
           li = link_to "My Account", my_account_path
         li = link_to "Search", search_path
-        li = link_to "Add a Nonprofit", non_profit_contact_path
+        li = link_to "Add a Nonprofit", new_nonprofit_request_path
         li = link_to "About Us", about_us_path
         li = link_to 'Discover', discover_path
         li = link_to "Donate", donate_path

app/controllers/contact_messages_controller.rb

@@ -0,0 +1,2 @@
+class ContactMessagesController < NonprofitRequestsController
+end

app/controllers/messages_controller.rb → app/controllers/nonprofit_requests_controller.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class MessagesController < ApplicationController
+class NonprofitRequestsController < ApplicationController
   skip_after_action :verify_authorized
   skip_before_action :authenticate_user!
   invisible_captcha only: [:create], honeypot: :street
@@ -16,7 +16,6 @@ def create
       redirect_to root_path
     else
       flash.now[:error] = 'Something went wrong'
-      @form_to_render = message_params[:form_definition]
       render :new, status: :unprocessable_entity
     end
   end
@@ -33,7 +32,7 @@ def message_params
     params.require(:message).permit(
       :name, :email, :phone, :subject, :organization_name,
       :organization_website, :organization_ein, :profile_admin_name,
-      :profile_admin_email, :content, :form_definition
+      :profile_admin_email, :content
     )
   end
 end

app/helpers/application_helper.rb

@@ -9,4 +9,9 @@ def device
     return "mobile" if agent =~ /Mobile/
     return "desktop"
   end
+
+  # recaptcha gem doesn't work well with Turbo
+  def turbo_disabled_urls
+    [new_nonprofit_request_url, new_contact_message_url]
+  end
 end

app/javascript/controllers/disable_turbo_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = { targetUrls: Array }
+
+  disableTurboForTargetUrls(event) {
+    if (this.targetUrlsValue.includes(event.detail.url)) {
+      event.preventDefault();
+    }
+  }
+}

app/models/message.rb

@@ -20,5 +20,5 @@ class Message < ActiveRecord::Base
   attr_accessor :form_definition
 
   validates :name, presence: true
-  validates :email, presence: true
+  validates :email, format: /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
 end

app/views/contact_messages/new.html.slim

@@ -0,0 +1,54 @@
+.main.flex.flex-col.items-center
+  h2 class="pb-4 text-2xl font-bold text-center pt-6 md:pt-16 md:mt-2 md:pb-9 text-gray-3"
+    | Get in Touch
+
+  p class="max-w-lg px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3"
+    | Send us a message and we'll get back to you within 3-5 business days.
+
+  div class="md:hidden -z-1"
+    div class="absolute top-0 left-0 -z-1"
+      = inline_svg_tag 'mob-blur-left-contact.svg', class:"w-10/12 xs:w-full"
+    div class="absolute top-0 right-0 -z-1"
+      = inline_svg_tag 'mob-blur-right-contact.svg', size:"169*248"
+
+  div class="hidden md:flex"
+    div class="absolute top-0 left-0 pl-20 lg:pl-32 -z-1 xl:pl-80"
+      = inline_svg_tag 'desk-blur-left-contact.svg', size:"523*419"
+    div class="absolute top-0 inset-x-1/2 -z-1"
+      = inline_svg_tag 'desk-blur-right-contact.svg', size:"258*248"
+
+  = form_with model: @message, url: create_contact_message_path, method: :post, data: { controller: 'contact-form', "turbo": false} do |f|
+    .c-form class="gap-6 pb-11 md:pb-36"
+      - if @message.errors.any?
+          div class="w-full"
+            p class="text-red-500 italic font-semibold"
+              | Please review the problems below:
+            ul
+              - @message.errors.full_messages.each do |message|
+                li class="text-red-500 text-sm"
+                  = "- #{message}"
+      div class="w-full"
+        = f.label :name, "*Name"
+        = f.text_field :name, class:"c-input", required: true
+      div class="w-full"
+        = f.label :email, "*Email"
+        = f.email_field :email, class:"c-input", required: true
+      div class="w-full"
+        = f.label :phone
+        = f.telephone_field :phone, class: "c-input"
+      div class="w-full"
+        = f.label :subject, "*Subject"
+        = f.select :subject,\
+        [['I want to add a nonprofit to Giving Connection.', '1'],['I want to claim ownership of a nonprofit profile on Giving Connection.', '2'], ['Other', '3']],\
+        {include_blank: "Select a subject"}, {class: "c-input pr-7 bg-white", required: true, data: { action: "change->contact-form#subjectSelected",'contact-form-target': 'subject'}}
+
+      div class="w-full"
+        = f.label :content, "*Message"
+        = f.text_area :content, class:"c-input h-40", required: true, data: { 'contact-form-target': 'message'}
+      // Honeypot
+      = invisible_captcha :street, :message
+      div class="w-full"
+        = recaptcha_tags
+
+      div class="mt-3"
+        = f.submit "Send message", class:"c-button"

app/views/home/index.html.slim

@@ -92,7 +92,7 @@ main
     div class="relative max-w-md pb-20 mx-auto text-center"
       h2 class="px-5 pt-20 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark pb-11"
         | Are you a nonprofit organization interested in joining our listings?
-      = link_to 'Add or Claim a Nonprofit', non_profit_contact_path, class:'c-button inline-block my-1 text-white bg-blue-dark'
+      = link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark'
     div class="top-0 left-0 -z-1 hidden sm:block sm:absolute"
       = inline_svg_tag 'lc-desk-blur-left.svg'
     div class="top-0 right-0 -z-1 hidden sm:block sm:absolute"

app/views/layouts/application.html.erb

@@ -34,14 +34,19 @@
     <script src="https://www.googletagmanager.com/gtag/js?id=AW-11382454124" data-turbo-track="reload" async></script>
   </head>
 
-  <body class="bg-gray-9">
+  <body
+  class="bg-gray-9"
+  data-controller="disable-turbo"
+  data-disable-turbo-target-urls-value="<%= turbo_disabled_urls %>"
+  data-action="turbo:click@document->disable-turbo#disableTurboForTargetUrls">
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%= Rails.application.credentials.dig(Rails.env.to_sym)[:google_tag_key] %>"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <%= render Navbar::Component.new(signed_in: user_signed_in?) %>
     <main class="main">
-      <% flash.each do |type, message| %>
-        <%= render Alert::Component.new(type: type, message: message) %>
-      <% end %>
+      <div id="flash-messages">
+        <%= render "shared/flash_messages" %>
+      </div>
+
       <%= turbo_frame_tag "modal" %>
 
       <%= yield %>

app/views/nonprofit_requests/new.html.slim

@@ -0,0 +1,76 @@
+.main.flex.flex-col.items-center
+  h2 class="pb-4 text-2xl font-bold text-center pt-6 md:pt-16 md:mt-2 md:pb-9 text-gray-3"
+    | Add or Claim a Nonprofit
+
+  p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3"
+    | Giving Connection is a platform designed to connect people with nonprofits in their communities.
+  p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3"
+    |  In order to create a nonprofit profile that is listed in Giving Connection's search results, a representative from your nonprofit should fill out the following form.
+  p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3"
+    |  After we verify the nonprofit organization, we will contact the representative listed below to set up an account. You should expect to hear back from us within 3-5 business days.
+
+  div class="md:hidden -z-1"
+    div class="absolute top-0 left-0 -z-1"
+      = inline_svg_tag 'mob-blur-left-contact.svg', class:"w-10/12 xs:w-full"
+    div class="absolute top-0 right-0 -z-1"
+      = inline_svg_tag 'mob-blur-right-contact.svg', size:"169*248"
+
+  div class="hidden md:flex"
+    div class="absolute top-0 left-0 pl-20 lg:pl-32 -z-1 xl:pl-80"
+      = inline_svg_tag 'desk-blur-left-contact.svg', size:"523*419"
+    div class="absolute top-0 inset-x-1/2 -z-1"
+      = inline_svg_tag 'desk-blur-right-contact.svg', size:"258*248"
+
+  = form_with model: @message, url: create_nonprofit_request_path, method: :post, data: { controller: 'contact-form', "turbo": false} do |f|
+    .c-form class="gap-6 pb-11 md:pb-36"
+      - if @message.errors.any?
+          div class="w-full"
+            p class="text-red-500 italic font-semibold"
+              | Please review the problems below:
+            ul
+              - @message.errors.full_messages.each do |message|
+                li class="text-red-500 text-sm"
+                  = "- #{message}"
+      div class="w-full"
+        = f.label :name, "*Name"
+        = f.text_field :name, class:"c-input", required: true
+      div class="w-full"
+        = f.label :email, "*Email"
+        = f.email_field :email, class:"c-input", required: true
+      div class="w-full"
+        = f.label :phone
+        = f.telephone_field :phone, class: "c-input"
+      div class="w-full"
+        = f.label :subject, "*Subject"
+        = f.select :subject,\
+        [['I want to add a nonprofit to Giving Connection.', '1'],['I want to claim ownership of a nonprofit profile on Giving Connection.', '2'], ['Other', '3']],\
+        {include_blank: "Select a subject"}, {class: "c-input pr-7 bg-white", required: true, data: { action: "change->contact-form#subjectSelected",'contact-form-target': 'subject'}}
+
+      div class="w-full"
+        = f.label :organization_name, "*Organization Name"
+        = f.text_field :organization_name, class:"c-input", required: true
+      div class="w-full"
+        = f.label :organization_website, "Organization Website"
+        = f.text_field :organization_website, class:"c-input", placeholder:"Your Website"
+      div class="w-full"
+        = f.label :organization_ein, "Organization EIN"
+        = f.text_field :organization_ein, class:"c-input", placeholder:"Your Organization EIN"
+      div class="w-full"
+        = f.label :profile_admin_name, "*Profile Admin Name"
+        p class="mt-1.5 text-xs leading-normal"
+          | Your profile admin is the person who will be updating the page information.
+        = f.text_field :profile_admin_name, class:"c-input", required: true
+      div class="w-full"
+        = f.label :profile_admin_email, "*Profile Admin Email"
+        = f.text_field :profile_admin_email, class:"c-input", required: true
+
+      div class="w-full"
+        = f.label :content, "*Message"
+        = f.text_area :content, class:"c-input h-40", data: { 'contact-form-target': 'message'}, required: true
+      // Honeypot
+      = invisible_captcha :street, :message
+      div class="w-full"
+        = recaptcha_tags
+
+      div class="mt-3"
+        = f.submit "Send message", class:"c-button"

app/views/shared/_flash_messages.html.erb

@@ -0,0 +1,3 @@
+<% flash.each do |type, message| %>
+  <%= render Alert::Component.new(type: type, message: message) %>
+<% end %>

config/routes.rb

@@ -35,15 +35,18 @@
     get 'signin' => 'devise/sessions#new'
   end
 
-  get 'contact' => 'messages#new'
-  get '/nonprofit' => 'messages#new', as: :non_profit_contact
+  get '/contact' => 'contact_messages#new', as: :new_contact_message
+  post '/contact' => 'contact_messages#create', as: :create_contact_message
+
+  get '/nonprofit' => 'nonprofit_requests#new', as: :new_nonprofit_request
+  post '/nonprofit' => 'nonprofit_requests#create', as: :create_nonprofit_request
+
   get 'search' => 'searches#show'
   get 'termsofuse' => 'terms_and_conditions#show', as: :terms_of_use
   resource :map_popup, only: [:new]
   resource :search_preview, only: [:show]
 
   resources :users, only: [:update]
-  resources :messages, only: %i[create]
   resources :reset_password, only: %i[new]
 
   resources :locations, only: %i[index new show destroy]