Feature | po box notification (#593)

* Add popover for PO box only locations

* Update vulnerable dependency

Gemfile.lock

@@ -403,7 +403,7 @@ GEM
     responders (3.0.1)
       actionpack (>= 5.0)
       railties (>= 5.0)
-    rexml (3.3.2)
+    rexml (3.3.4)
       strscan
     rgeo (2.3.1)
     rgeo-activerecord (7.0.1)

app/components/result_card/component.html.erb

@@ -1,23 +1,22 @@
 <div id="<%= @id %>" class="p-6 scroll-mt-96" data-controller="result-card--component">
   <div class="flex gap-2.5 mb-3">
-
     <div class="flex-shrink-0 w-24">
       <%= helpers.logo_link(@turbo_frame, @id, @image_url) %>
     </div>
-
     <div class="w-full">
-      <div class="flex flex-row items-start justify-between">
+      <div class="flex flex-row justify-between items-start">
         <%# Org name %>
         <div class="flex items-start">
           <%= helpers.title_link(@turbo_frame, @id, @title) %>
+          <% if @po_box %>
+            <%= render "shared/popover", copy: "No map pin available. Only PO Box listed.", wrapper_icon: "info_circle.svg", position: "right-0 w-28", icon_classes: "h-5 ml-1 p-0" %>
+          <% end %>
           <% if @verified %>
             <%= render "shared/popover", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg", position: "right-0" %>
           <% end %>
         </div>
-
         <%= render SaveButton::Component.new(user: @current_user, location: Location.find(@id), simplified: true) %>
       </div>
-
       <div class="pb-0 text-xs text-gray-4">
         <% if @public_address %>
           <p id="pointer"><%= link_to @address, @link_to_google_maps, target: "blank" %></p>
@@ -26,7 +25,7 @@
           <p><%= link_to @website_for_display, @website, target: '_blank', class: 'text-blue-medium'%></p>
         <% end %>
         <% if @phone_number.present? %>
-        <%= link_to "Call: #{@phone_number}", "tel:#{@phone_number}", class: 'text-blue-medium' %>
+          <%= link_to "Call: #{@phone_number}", "tel:#{@phone_number}", class: 'text-blue-medium' %>
         <% end %>
         <%# Designations %>
         <%= render DesignationTag::Component.new(Location.find(@id).organization) %>
@@ -43,7 +42,7 @@
       <%= formated_description %>
     </p>
   </div>
-  <div class="flex items-center justify-between">
+  <div class="flex justify-between items-center">
     <% unless @causes.empty? %>
       <section>
         <h2 class="mb-2 font-sans text-xs font-bold uppercase">Causes</h2>
@@ -56,7 +55,7 @@
             icon_svg_options: {class: "w-5 h-5", aria_hidden: true}) %>
       </section>
     <% end %>
-    <a href="<%= location_path(@id)%>" class="inline-flex items-center ml-4 text-sm font-bold text-blue-medium whitespace-nowrap", target="_blank">
+    <a href="<%= location_path(@id)%>" class="inline-flex items-center ml-4 text-sm font-bold whitespace-nowrap text-blue-medium", target="_blank">
       Go to Page
       <%= inline_svg_tag 'solid_arrow_right.svg', class: 'w-4 h-4 ml-2 text-blue-medium fill-current'%>
     </a>

app/components/result_card/component.rb

@@ -5,7 +5,7 @@ class ResultCard::Component < ApplicationViewComponent
 
   def initialize(title:, address:, public_address:, link_to_google_maps:,
     image_url:, website:, description:, id:, current_user:, phone_number:,
-    verified:, causes: [], turbo_frame: {})
+    verified:, po_box:, causes: [], turbo_frame: {})
     @title = title
     @address = address
     @public_address = public_address
@@ -17,6 +17,7 @@ def initialize(title:, address:, public_address:, link_to_google_maps:,
     @current_user = current_user
     @phone_number = phone_number
     @verified = verified
+    @po_box = po_box
     @causes = causes
     # If not targeting a turbo-frame, don't provide this parameter
     @turbo_frame = turbo_frame

app/views/my_accounts/show.html.slim

@@ -1,22 +1,22 @@
 div class="w-full h-full bg-white"
-  div class="max-w-6xl py-12 mx-auto md:px-28 md:py-20"
+  div class="py-12 mx-auto max-w-6xl md:px-28 md:py-20"
     h2 class="mb-6 text-2xl font-bold text-center text-grey-2 md:text-left"
       | My Account
     div
       div data-controller="tabs" data-tabs-active-tab="border-blue-medium text-blue-medium"
-        nav class="flex px-6 -mb-px space-x-6 overflow-x-auto text-grey-5" aria-label="Tabs"
+        nav class="flex overflow-x-auto px-6 -mb-px space-x-6 text-grey-5" aria-label="Tabs"
           /! Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-          a class="px-1 py-4 mb-4 text-sm font-medium border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium whitespace-nowrap" href="#" data-action="click->tabs#change" data-tabs-target="tab"
+          a class="px-1 py-4 mb-4 text-sm font-medium whitespace-nowrap border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium" href="#" data-action="click->tabs#change" data-tabs-target="tab"
             | My Profile
-          a class="px-1 py-4 mb-4 text-sm font-medium border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium whitespace-nowrap" href="#" data-action="click->tabs#change" data-tabs-target="tab"
+          a class="px-1 py-4 mb-4 text-sm font-medium whitespace-nowrap border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium" href="#" data-action="click->tabs#change" data-tabs-target="tab"
             | Saved Pages
-          a class="px-1 py-4 mb-4 text-sm font-medium border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium whitespace-nowrap" aria-current="page" href="#" data-action="click->tabs#change" data-tabs-target="tab"
+          a class="px-1 py-4 mb-4 text-sm font-medium whitespace-nowrap border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium" aria-current="page" href="#" data-action="click->tabs#change" data-tabs-target="tab"
             | Alerts
-          a class="px-1 py-4 mb-4 text-sm font-medium border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium whitespace-nowrap" href="#" data-action="click->tabs#change" data-tabs-target="tab"
+          a class="px-1 py-4 mb-4 text-sm font-medium whitespace-nowrap border-b-2 border-transparent hover:text-blue-medium hover:border-blue-medium" href="#" data-action="click->tabs#change" data-tabs-target="tab"
             | My Nonprofit Pages
 
         div class="hidden px-6" data-tabs-target="panel"
-          h4 class="text-xl text-grey-2 my-7"
+          h4 class="my-7 text-xl text-grey-2"
             | My Profile Information
           = form_with model: current_user, url: user_path(current_user), html: { method: :put } do |form|
             div class="grid grid-cols-12 gap-6" data-controller="toggle"
@@ -29,10 +29,10 @@ div class="w-full h-full bg-white"
                 = form.email_field :email, { value: current_user.email, class: "c-input" }
               div class="hidden col-span-3 md:flex"
               div class="col-span-12 py-0 border-t border-gray-8"
-              div class="flex flex-row justify-between col-span-12"
+              div class="flex flex-row col-span-12 justify-between"
                 span class="text-sm font-medium text-grey-4"
                   | Password
-                button class=" text-blue-medium" type="button" data-action=("click->toggle#toggle touch->toggle#toggle")
+                button class="text-blue-medium" type="button" data-action=("click->toggle#toggle touch->toggle#toggle")
                   | Edit
 
               div class="grid hidden grid-cols-12 col-span-12 gap-6" data-toggle-target="toggleable menu"
@@ -53,14 +53,14 @@ div class="w-full h-full bg-white"
                     ' Can't remember your current password?
                     = link_to "Reset via email", new_reset_password_path, class:'text-blue-medium'
               div class="col-span-12 py-0 border-b border-gray-8"
-              div class="flex flex-row justify-center col-span-12"
+              div class="flex flex-row col-span-12 justify-center"
                 = form.submit "Update", class: "mx-auto py-2.5 px-5 text-sm font-bold text-white bg-blue-medium uppercase rounded-6px"
               div class="col-span-12 py-4 border-t border-gray-8"
                 = link_to "Log out", destroy_user_session_path, method: :delete, class:'text-xl font-bold text-blue-dark', data: { turbo: false , test_id: "user_logout_link"}
         div class="hidden" data-tabs-target="panel"
-          h4 class="px-6 text-xl text-grey-2 my-7"
+          h4 class="px-6 my-7 text-xl text-grey-2"
             | My Saved Nonprofit Pages
-          div class="flex flex-col w-full h-full px-2 md:overflow-y-auto"
+          div class="flex flex-col px-2 w-full h-full md:overflow-y-auto"
             - if @saved_pages.present?
               ul class="flex flex-col divide-y divide-gray-8"
                 - @saved_pages.each do |page|
@@ -71,51 +71,52 @@ div class="w-full h-full bg-white"
                                                       link_to_google_maps: page.link_to_google_maps,\
                                                       image_url: page.organization.logo,\
                                                       id: page.id,\
+                                                      po_box: page.po_box?,\
                                                       website: page.decorate.website || page.organization.decorate.website,\
                                                       description: page.organization.mission_statement_en,\
                                                       current_user: current_user,\
                                                       phone_number: page.phone_number&.number,\
                                                       verified: page.organization.verified?)
             - else
-              div class="flex justify-center w-full my-16"
+              div class="flex justify-center my-16 w-full"
                 = inline_svg_tag 'empty_state_1.svg', size:'298*153'
-              div class="flex flex-col items-center justify-center w-full gap-4 my-4 mb-16 text-grey-2"
-                p class="text-xl font-bold text-center "
+              div class="flex flex-col gap-4 justify-center items-center my-4 mb-16 w-full text-grey-2"
+                p class="text-xl font-bold text-center"
                   | You haven’t saved any Nonprofit Pages.
-                p class="max-w-xs px-4 text-base text-center"
+                p class="px-4 max-w-xs text-base text-center"
                   | Click on the top right ribbon to save pages when you are browsing through nonprofit listings.
 
         div class="hidden px-6" data-tabs-target="panel"
-          h4 class="text-xl text-grey-2 mt-7"
+          h4 class="mt-7 text-xl text-grey-2"
             | Manage Alerts
           div class="flex flex-col w-full h-full md:overflow-y-auto"
             - if @alerts.present?
               ul class="flex flex-col divide-y divide-gray-8"
                 - @alerts.each_with_index do |alert, index|
-                  li class="flex flex-col w-full py-10"
+                  li class="flex flex-col py-10 w-full"
                     div class="flex flex-row justify-between w-full"
                       span class="text-lg font-bold text-black capitalize"
                         | #{alert.decorate.title(index)}
                       = link_to "Edit", edit_alert_path(alert), class: "text-blue-medium", data: { turbo_stream: true }
                     div class="flex flex-row text-sm font-normal text-gray-2"
                       | #{list_all_filters(alert).join(', ')}
             - else
-              div class="flex justify-center w-full my-16"
+              div class="flex justify-center my-16 w-full"
                 = inline_svg_tag 'empty_state_2.svg', size:'294*145'
-              div class="flex flex-col items-center justify-center w-full gap-4 my-4 mb-16 text-grey-2"
-                p class="text-xl font-bold text-center "
+              div class="flex flex-col gap-4 justify-center items-center my-4 mb-16 w-full text-grey-2"
+                p class="text-xl font-bold text-center"
                   | You haven’t created any search alerts.
-                p class="max-w-xs px-4 text-base text-center"
+                p class="px-4 max-w-xs text-base text-center"
                   | Create an email alert by clicking on “Create Alert” after making a search.
 
         div class="hidden px-6" data-tabs-target="panel"
-          h4 class="text-xl text-grey-2 my-7"
+          h4 class="my-7 text-xl text-grey-2"
             | My Nonprofit Pages
           div class="flex flex-col w-full h-full md:overflow-y-auto"
             - if @my_organizations.present?
-              ul class="flex flex-col divide-y divide-gray-8 gap-11"
+              ul class="flex flex-col gap-11 divide-y divide-gray-8"
                 - @my_organizations.each do |organization|
-                  li class="flex flex-col w-full "
+                  li class="flex flex-col w-full"
                     div class="flex flex-row justify-between w-full"
                       span class="flex items-center text-base font-medium text-grey-2"
                         | #{organization.name}
@@ -124,10 +125,10 @@ div class="w-full h-full bg-white"
                       = link_to "Edit", edit_organization_path(organization), class:"text-blue-medium"
 
             - else
-              div class="flex justify-center w-full my-16"
+              div class="flex justify-center my-16 w-full"
                 = inline_svg_tag 'empty_state_3.svg', size:'321*169'
-              div class="flex flex-col items-center justify-center w-full gap-4 my-4 mb-16 text-grey-2"
-                p class="text-xl font-bold text-center "
+              div class="flex flex-col gap-4 justify-center items-center my-4 mb-16 w-full text-grey-2"
+                p class="text-xl font-bold text-center"
                   | You haven't claimed or added any Nonprofit Pages.
-                p class="max-w-xs px-4 text-base text-center"
+                p class="px-4 max-w-xs text-base text-center"
                   | Click "Add A Nonprofit" on the top menu bar to contact us about adding or claiming a nonprofit page.

app/views/searches/show.html.slim

@@ -62,6 +62,7 @@
                                                         phone_number: result.phone_number&.number,\
                                                         current_user: current_user,\
                                                         verified: result.organization.verified?,\
+                                                        po_box: result.po_box?,\
                                                         causes: result&.causes,\
                                                         turbo_frame: {id: "map-left-popup", src: new_map_popup_path(location_id: result&.id)})
                   - if @pagy.pages > SearchesHelper::MIN_REQUIRED_PAGES

app/views/shared/_popover.html.erb

@@ -1,6 +1,6 @@
 <div data-controller="popover" class="relative">
   <span data-action="mouseenter->popover#show mouseleave->popover#hide" data-popover-target="popover">
-    <%= inline_svg_tag local_assigns[:wrapper_icon], class: "h-4 ml-1" %>
+    <%= inline_svg_tag local_assigns[:wrapper_icon], class: local_assigns[:icon_classes].presence || "h-4 ml-1" %>
   </span>
   <template data-popover-target="content">
     <div data-popover-target="card" class="absolute z-10 px-3 py-1 mx-1 text-xs text-center text-white rounded-sm bg-gray-2 bg-opacity-90  <%= local_assigns[:position].presence || '' %>" >
@@ -9,4 +9,4 @@
       </p>
     </div>
   </template>
-</div>
+</div>