Add UI for users to see an org's FAQ (#673)

* Add UI to allow all users to view an orgs FAQs regardless of authentication status

* lint fix

* Move question and answer to a component for reusability

* update ID

---------

Co-authored-by: Ben Robinson <ben.robinson@b2bwave.com>

app/controllers/organizations/public_faq_controller.rb

@@ -0,0 +1,7 @@
+class Organizations::PublicFaqController < Organizations::BaseController
+  skip_verify_authorized only: %i[index]
+
+  def index
+    @faqs = Faq.all
+  end
+end

app/controllers/static_pages_controller.rb

@@ -14,9 +14,6 @@ def account_select
   def about_us
   end
 
-  def faq
-  end
-
   def partners
   end
 

app/views/components/_question_and_answer.html.erb

@@ -0,0 +1,13 @@
+<div class="border-bottom py-3" id="heading_<%= faq.id %>">
+  <h3 class="mb-0 fw-bold">
+    <a href="#" class="d-flex align-items-center text-inherit active collapsed" data-bs-toggle="collapse" data-bs-target="#collapse_<%= faq.id %>" aria-expanded="false" aria-controls="collapse_<%= faq.id %>">
+      <span class="me-auto"><%= faq.question %></span>
+      <span class="collapse-toggle ms-4">
+          <i class="fe fe-plus text-primary"></i>
+        </span>
+    </a>
+  </h3>
+</div>
+<div id="collapse_<%= faq.id %>" class="collapse" aria-labelledby="heading_<%= faq.id %>" data-bs-parent="#accordion-public-faq">
+  <div class="py-3 fs-4"><%= faq.answer %></div>
+</div>

app/views/contacts/new.html.erb

@@ -10,7 +10,7 @@
     </div>
  <!--container-->
     <div class='mb-3 text-center bigger'>
-      Please refer to the <%= link_to 'FAQ', faq_static_path %> and send us a message 
+      Please refer to the <%= link_to 'FAQ', public_faq_index_path %> and send us a message
       if you still have questions/comments.
     </div>
     <div class="row">

app/views/layouts/adopter_foster_dashboard.html.erb

@@ -76,7 +76,7 @@
                         </li>
                         <!-- Nav item -->
                         <li class="nav-item">
-                          <%= active_link_to adopter_foster_dashboard_index_path, class: "nav-link" do %>
+                          <%= active_link_to public_faq_index_path, class: "nav-link" do %>
                             <i class="fe fe-help-circle nav-icon"></i> FAQ
                           <% end %>
                         </li>

app/views/layouts/shared/_navbar.html.erb

@@ -41,6 +41,9 @@
         <li class="nav-item">
           <%= active_link_to 'Donate', donate_path, class: 'nav-link' %>
         </li>
+        <li class="nav-item">
+          <%= active_link_to 'FAQ', public_faq_index_path, class: 'nav-link' %>
+        </li>
         <% if user_signed_in? %>
           <% if allowed_to?(:index?, with: Organizations::AdopterFosterDashboardPolicy, context: {organization: Current.organization}) %>            <li class='nav-item'>
               <%= active_link_to 'Dashboard', adopter_foster_dashboard_index_path, class: 'nav-link' %>

app/views/organizations/adoptable_pets/show.html.erb

@@ -72,7 +72,8 @@
               <!-- heading -->
               <span class="text-uppercase text-primary fw-semibold ls-md"><%= t('.adoption_process') %></span>
               <!-- para -->
-              <p class="fs-3  mb-5"><%= t('.please_read_faq_html') %></p>
+              <p class="fs-3  mb-5"><%= t('.please_read_faq_html', faq_link: link_to('FAQ', public_faq_index_path)) %></p>
+
             </div>
 
             <div class=" row align-items-center ">

app/views/organizations/home/index.html.erb

@@ -177,7 +177,7 @@
           Before applying to adopt a pet it is important you read and understand how our process works.
         </p>
         <p>
-          <%= link_to 'Learn more', faq_static_path, class: 'custom-btn-green' %>
+          <%= link_to 'Learn more', public_faq_index_path, class: 'custom-btn-green' %>
         </p>
       </div>
       <div class="col-md-4 p-3">

app/views/organizations/public_faq/index.html.erb

@@ -0,0 +1,26 @@
+<header class="pt-5 pb-5" >
+  <div class="container">
+    <div class="text-center">
+      <h1 class="section-heading text-uppercase underline">
+        <%= t('.header') %>
+      </h1>
+    </div>
+  </div> <!--container-->
+</header>
+
+<section class="pb-5" id="public_faq">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8 col-md-10 col-12">
+        <div class="accordion accordion-flush" id="accordion-public-faq">
+          <% @faqs.each do |faq| %>
+            <%= render "components/question_and_answer", faq: faq %>
+          <% end %>
+        </div>
+        <div class="mt-8 text-center">
+          <%= link_to t('.more_questions'), new_contact_path, class: "btn btn-outline-primary" %>
+        </div>
+      </div>
+    </div>
+  </div> <!--container-->
+</section>

config/locales/en.yml

@@ -271,7 +271,7 @@ en:
         header: "Up for adoption"
       show:
         adoption_process: "Adoption Process"
-        please_read_faq_html: "Please read the <a href='/faq'>FAQ</a> before applying to adopt."
+        please_read_faq_html: "Please read the %{faq_link} before applying to adopt."
         please_know_that: "Please know that"
         please_know_that_items_html: |
           <li>Adopters must be located in Canada, USA or Mexico</li>
@@ -353,6 +353,10 @@ en:
         edit_faq: "Edit FAQ"
       faq:
         are_you_sure_delete: "Are you sure you want to delete this FAQ?"
+    public_faq:
+      index:
+        header: "Frequently Asked Questions"
+        more_questions: "More Questions? Contact us"
     pets:
       show:
         pause_applications: "Pause Applications?"

config/routes.rb

@@ -8,21 +8,23 @@
   resources :donations, only: [:create]
 
   scope module: :organizations do
+    resources :home, only: [:index]
+
     resource :organization_profile, only: %i[edit update]
     resource :page_text, only: [:edit, :update]
 
     resource :adopter_foster_profile, except: :destroy, as: "profile"
     resources :profile_reviews, only: [:show]
     resources :adoptable_pets, only: [:index, :show]
 
-    resources :home, only: [:index]
     resources :pets do
       resources :tasks
       post "attach_images", on: :member, to: "pets#attach_images"
       post "attach_files", on: :member, to: "pets#attach_files"
     end
     resources :default_pet_tasks
     resources :faqs
+    resources :public_faq, only: [:index]
     resources :dashboard, only: [:index]
     resources :adopter_foster_dashboard, only: [:index]
     resources :adopter_applications, path: "applications",
@@ -51,7 +53,6 @@
 
   root "root#index"
   get "/about_us", to: "static_pages#about_us"
-  get "/faq_static", to: "static_pages#faq"
   get "/partners", to: "static_pages#partners"
   get "/donate", to: "static_pages#donate"
   get "/privacy_policy", to: "static_pages#privacy_policy"