Feature/international tag (#513)

* Node version fixed * Remove package-lock.json * package-lock.json removed * Google ads conversion tracking second iteration. * Preview param bug fix * feature(organization designation): create new tag component * feature(organization designation): replace previous partial with new component * feature(organization designation): remove previous designation methods from org model --------- Co-authored-by: Alan Soto <[email protected]>
TelosLabs · Feb 9, 2024 · 446e35b · 446e35b
1 parent 7c3b5af
commit 446e35b
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 60 deletions.
diff --git a/app/components/designation_tag/component.html.erb b/app/components/designation_tag/component.html.erb
@@ -0,0 +1,22 @@
+<% if designation_map.any? %>
+  <%= content_tag(:div, container_setup) do %>
+    <% designation_map.each do |designation_name, designation_desc| %>
+      <% tooltip_id = SecureRandom.hex(8) %>
+
+      <div class="relative text-xs text-center">
+        <%# Pill %>
+        <span class="block labelled-icon w-fit px-2 py-1 border rounded-lg bg-gray-8 text-gray-4" aria-labelledby="<%= tooltip_id %>">
+          <%= designation_name %>
+        </span>
+
+        <%# Hover over %>
+        <span
+        role="tooltip"
+        id="<%= tooltip_id %>"
+        class="absolute hidden bottom-full right-1/2 py-1 px-3 mb-2 rounded-lg text-white transform translate-x-1/2 bg-gray-2 bg-opacity-90">
+          <%= designation_desc %>
+        </span>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/components/designation_tag/component.rb b/app/components/designation_tag/component.rb
@@ -0,0 +1,32 @@
+class DesignationTag::Component < ApplicationViewComponent
+  attr_reader :organization, :container_options, :designation_map
+
+  def initialize(organization, container_options: {})
+    @organization = organization.decorate
+    @container_options = container_options
+    build_designation_map
+  end
+
+  def container_setup
+    setup = {class: "flex flex-wrap gap-2 mt-2"}
+
+    setup.merge(container_options) do |_key, prev_value, new_value|
+      "#{prev_value}  #{new_value}"
+    end
+  end
+
+  private
+
+  def build_designation_map
+    @designation_map = {}
+
+    if ["nationwide", "internationally"].include? organization.scope_of_work
+      designation_map[organization.scope_of_work.capitalize] =
+        "Services offered #{organization.scope_of_work}"
+    end
+
+    if organization.volunteer_availability
+      designation_map["Volunteer"] = "Volunteer opportunities available"
+    end
+  end
+end
diff --git a/app/components/discover_nonprofit_card/head/component.html.slim b/app/components/discover_nonprofit_card/head/component.html.slim
@@ -15,9 +15,4 @@ div class="flex gap-x-5"
     - if @location.phone_number
       a href="tel:#{@location.phone_number.number}" = @location.phone_number.number
     // Designations
-    - if @location.organization.any_designation?
-      div class="flex flex-wrap gap-2 mt-2"
-        - if @location.organization.nationwide?
-          = render "shared/designation_tag", copy: "Nationwide"
-        - if @location.organization.volunteer_availability?
-          = render "shared/designation_tag", copy: "Volunteer"
+    = render DesignationTag::Component.new(@location.organization)
diff --git a/app/components/map_left_popup/component.html.slim b/app/components/map_left_popup/component.html.slim
@@ -11,12 +11,7 @@ div class="relative flex flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@res
         p class="text-gray-500 lg:text-sm text-xs" id="pointer"
           = link_to @result.formatted_address, @result.link_to_google_maps, target: "blank"
       // Designations
-      - if @result.organization.any_designation?
-        div class="flex flex-wrap gap-2 mt-2"
-          - if @result.organization.nationwide?
-            = render "shared/designation_tag", copy: "Nationwide"
-          - if @result.organization.volunteer_availability?
-            = render "shared/designation_tag", copy: "Volunteer"
+      = render DesignationTag::Component.new(@result.organization)
 
     button type="button" data-action="click->places#hidePopup" class="absolute top-3 right-3" aria-label="close"
       = inline_svg_tag "x-icon.svg", class: "w-3 h-3", aria_hidden: true

diff --git a/app/components/result_card/component.html.erb b/app/components/result_card/component.html.erb
@@ -29,16 +29,7 @@
         <%= link_to "Call: #{@phone_number}", "tel:#{@phone_number}", class: 'text-blue-medium' %>
         <% end %>
         <%# Designations %>
-        <% if any_designation? %>
-          <div class="flex flex-wrap gap-2 mt-2">
-            <% if @nationwide %>
-              <%= render "shared/designation_tag", copy: "Nationwide" %>
-            <% end %>
-            <% if @volunteer %>
-              <%= render "shared/designation_tag", copy: "Volunteer" %>
-            <% end %>
-          </div>
-        <% end %>
+        <%= render DesignationTag::Component.new(Location.find(@id).organization) %>
       </div>
     </div>
   </div>

diff --git a/app/components/result_card/component.rb b/app/components/result_card/component.rb
@@ -4,7 +4,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: {}, nationwide: false, volunteer: false)
+    verified:, causes: [], turbo_frame: {})
     @title = title
     @address = address
     @public_address = public_address
@@ -17,8 +17,6 @@ def initialize(title:, address:, public_address:, link_to_google_maps:,
     @phone_number = phone_number
     @verified = verified
     @causes = causes
-    @nationwide = nationwide
-    @volunteer = volunteer
     # If not targeting a turbo-frame, don't provide this parameter
     @turbo_frame = turbo_frame
     @website_for_display = website_for_display
@@ -33,8 +31,4 @@ def website_for_display
 
     @website.truncate(40)
   end
-
-  def any_designation?
-    @nationwide || @volunteer
-  end
 end
diff --git a/app/decorators/organization_decorator.rb b/app/decorators/organization_decorator.rb
@@ -8,4 +8,12 @@ def donation_link
   def volunteer_link
     object.decorate.url(object.volunteer_link)
   end
+
+  def scope_of_work
+    {
+      "National" => "nationwide",
+      "International" => "internationally",
+      "Regional" => "locally"
+    }[object.scope_of_work]
+  end
 end
diff --git a/app/models/organization.rb b/app/models/organization.rb
@@ -60,14 +60,6 @@ class Organization < ApplicationRecord
   accepts_nested_attributes_for :organization_beneficiaries, allow_destroy: true
   accepts_nested_attributes_for :organization_causes, allow_destroy: true
 
-  def nationwide?
-    scope_of_work == 'National'
-  end
-
-  def any_designation?
-    nationwide? || volunteer_availability
-  end
-
   private
 
   def attach_logo_and_cover

diff --git a/app/views/locations/show.html.slim b/app/views/locations/show.html.slim
@@ -27,12 +27,7 @@ div class=""
             p class="text-xs text-center font-base text-blue-500" id="pointer"
               = link_to "Edit My Nonprofit Page", edit_organization_path( @location.organization)
           // Designations
-          - if @location.organization.any_designation?
-            div class="flex justify-center items-center flex-wrap gap-2 mt-3"
-              - if @location.organization.nationwide?
-                = render "shared/designation_tag", copy: "Nationwide"
-              - if @location.organization.volunteer_availability?
-                = render "shared/designation_tag", copy: "Volunteer"
+          = render DesignationTag::Component.new(@location.organization, container_options: { class: "justify-center items-center" })
 
           div class="mt-4"
             - if @location.public_address?

diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim
@@ -75,8 +75,7 @@ div class="w-full h-full bg-white"
                                                       description: page.organization.mission_statement_en,\
                                                       current_user: current_user,\
                                                       phone_number: page.phone_number&.number,\
-                                                      verified: page.organization.verified?,\
-                                                      nationwide: page.organization.nationwide?)
+                                                      verified: page.organization.verified?)
             - else
               div class="flex justify-center w-full my-16"
                 = inline_svg_tag 'empty_state_1.svg', size:'298*153'

diff --git a/app/views/searches/show.html.slim b/app/views/searches/show.html.slim
@@ -63,8 +63,6 @@
                                                         current_user: current_user,\
                                                         verified: result.organization.verified?,\
                                                         causes: result&.causes,\
-                                                        nationwide: result&.organization&.nationwide?,\
-                                                        volunteer: result&.organization&.volunteer_availability?,\
                                                         turbo_frame: {id: "map-left-popup", src: new_map_popup_path(location_id: result&.id)})
                   - if @pagy.pages > SearchesHelper::MIN_REQUIRED_PAGES
                     div class="h-40 px-4 mt-7"

diff --git a/app/views/shared/_designation_tag.html.slim b/app/views/shared/_designation_tag.html.slim