Intercom integration (#1267)

* Intercom integration

Includes if/else statements for various ways to reach out. Also, github/discord icons updated to SVG.

* Update app/views/layouts/_sidebar.html.erb

Co-authored-by: Zach Gollwitzer <zach@maybe.co>
Signed-off-by: Josh Pigford <josh@joshpigford.com>

* Update app/views/pages/feedback.html.erb

Co-authored-by: Zach Gollwitzer <zach@maybe.co>
Signed-off-by: Josh Pigford <josh@joshpigford.com>

* Family = Company in Intercom

---------

Signed-off-by: Josh Pigford <josh@joshpigford.com>
Co-authored-by: Zach Gollwitzer <zach@maybe.co>

Gemfile

@@ -45,6 +45,7 @@ gem "rails-settings-cached"
 gem "tzinfo-data", platforms: %i[windows jruby]
 gem "csv"
 gem "redcarpet"
+gem "intercom-rails"
 
 group :development, :test do
   gem "debug", platforms: %i[mri windows]

Gemfile.lock

@@ -207,6 +207,8 @@ GEM
     inline_svg (1.10.0)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
+    intercom-rails (1.0.1)
+      activesupport (> 4.0)
     io-console (0.7.2)
     irb (1.14.1)
       rdoc (>= 4.0.0)
@@ -484,6 +486,7 @@ DEPENDENCIES
   image_processing (>= 1.2)
   importmap-rails
   inline_svg
+  intercom-rails
   letter_opener
   lucide-rails!
   mocha

app/assets/images/discord-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#5865f2" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>

app/assets/images/github-icon.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

app/views/layouts/_sidebar.html.erb

@@ -13,7 +13,7 @@
         <div class="text-white w-9 h-9 bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= Current.user.initial %></div>
       <% end %>
     </button>
-    <div data-menu-target="content" class="hidden absolute w-[240px] z-10 top-10 left-[255px] top-[72px] bg-white rounded-sm shadow-xs border border-alpha-black-25">
+    <div data-menu-target="content" class="hidden absolute w-[240px] z-10 left-[255px] top-[72px] bg-white rounded-sm shadow-xs border border-alpha-black-25">
       <div class="p-3 flex items-center gap-3">
         <% if profile_image_attached %>
           <div class="text-white shrink-0 w-9 h-9">
@@ -57,10 +57,17 @@
           <%= lucide_icon("megaphone", class: "w-5 h-5 text-gray-500 shrink-0") %>
           <span class="text-gray-900 text-sm">Feedback</span>
         <% end %>
+        <% if self_hosted? %>
           <%= link_to "https://link.maybe.co/discord", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
             <%= lucide_icon("message-square-more", class: "w-5 h-5 text-gray-500 shrink-0") %>
             <span class="text-gray-900 text-sm">Contact</span>
           <% end %>
+        <% else %>
+          <%= link_to "mailto:hello@maybe.co", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2", onclick: "Intercom('showNewMessage'); return false;" do %>
+            <%= lucide_icon("message-square-more", class: "w-5 h-5 text-gray-500 shrink-0") %>
+            <span class="text-gray-900 text-sm">Contact</span>
+          <% end %>
+        <% end %>
       </div>
       <div class="p-1">
         <%= button_to session_path(Current.session), method: :delete, class: "w-full text-red-400 flex gap-1 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>

app/views/pages/feedback.html.erb

@@ -9,17 +9,23 @@
     <p class="text-sm text-gray-500 mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
     <div class="flex gap-2">
       <%= link_to "https://github.com/maybe-finance/maybe/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
-        <%= image_tag "github-icon.png", class: "w-8 h-8 mb-2" %>
+        <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
         <span class="text-sm font-medium text-gray-900">Write a feature request</span>
       <% end %>
-
+      <% if self_hosted? %>
         <%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
-        <%= image_tag "github-icon.png", class: "w-8 h-8 mb-2" %>
+          <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
           <span class="text-sm font-medium text-gray-900">File a bug report</span>
         <% end %>
+      <% else %>
+        <%= link_to "mailto:hello@maybe.co", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50", onclick: "Intercom('showNewMessage'); return false;" do %>
+          <%= lucide_icon "bug", class: "w-8 h-8 mb-2" %>
+          <span class="text-sm font-medium text-gray-900">File a bug report</span>
+        <% end %>
+      <% end %>
 
       <%= link_to "https://link.maybe.co/discord", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
-        <%= image_tag "discord-icon.png", class: "w-8 h-8 mb-2" %>
+        <%= image_tag "discord-icon.svg", class: "w-8 h-8 mb-2" %>
         <span class="text-sm font-medium text-gray-900">Discuss Maybe with others</span>
       <% end %>
     </div>

config/initializers/intercom.rb

@@ -0,0 +1,118 @@
+if ENV["INTERCOM_APP_ID"].present? && ENV["INTERCOM_IDENTITY_VERIFICATION_KEY"].present?
+  IntercomRails.config do |config|
+    # == Intercom app_id
+    #
+    config.app_id = ENV["INTERCOM_APP_ID"]
+
+    # == Intercom session_duration
+    #
+    # config.session_duration = 300000
+    # == Intercom secret key
+    # This is required to enable Identity Verification, you can find it on your Setup
+    # guide in the "Identity Verification" step.
+    #
+    config.api_secret = ENV["INTERCOM_IDENTITY_VERIFICATION_KEY"]
+
+    # == Enabled Environments
+    # Which environments is auto inclusion of the Javascript enabled for
+    #
+    config.enabled_environments = [ "development", "production" ]
+
+    # == Current user method/variable
+    # The method/variable that contains the logged in user in your controllers.
+    # If it is `current_user` or `@user`, then you can ignore this
+    #
+    config.user.current = Proc.new { Current.user }
+
+    # == Include for logged out Users
+    # If set to true, include the Intercom messenger on all pages, regardless of whether
+    # The user model class (set below) is present.
+    config.include_for_logged_out_users = true
+
+    # == User model class
+    # The class which defines your user model
+    #
+    # config.user.model = Proc.new { User }
+
+    # == Lead/custom attributes for non-signed up users
+    # Pass additional attributes to for potential leads or
+    # non-signed up users as an an array.
+    # Any attribute contained in config.user.lead_attributes can be used
+    # as custom attribute in the application.
+    # config.user.lead_attributes = %w(ref_data utm_source)
+
+    # == Exclude users
+    # A Proc that given a user returns true if the user should be excluded
+    # from imports and Javascript inclusion, false otherwise.
+    #
+    # config.user.exclude_if = Proc.new { |user| user.deleted? }
+
+    # == User Custom Data
+    # A hash of additional data you wish to send about your users.
+    # You can provide either a method name which will be sent to the current
+    # user object, or a Proc which will be passed the current user.
+    #
+    config.user.custom_data = {
+      family_id: Proc.new { |current_user| current_user.family.id }
+    }
+
+    # == Current company method/variable
+    # The method/variable that contains the current company for the current user,
+    # in your controllers. 'Companies' are generic groupings of users, so this
+    # could be a company, app or group.
+    #
+    config.company.current = Proc.new { Current.family }
+    #
+    # Or if you are using devise you can just use the following config
+    #
+    # config.company.current = Proc.new { current_user.company }
+
+    # == Exclude company
+    # A Proc that given a company returns true if the company should be excluded
+    # from imports and Javascript inclusion, false otherwise.
+    #
+    # config.company.exclude_if = Proc.new { |app| app.subdomain == 'demo' }
+
+    # == Company Custom Data
+    # A hash of additional data you wish to send about a company.
+    # This works the same as User custom data above.
+    #
+    # config.company.custom_data = {
+    #   :number_of_messages => Proc.new { |app| app.messages.count },
+    #   :is_interesting => :is_interesting?
+    # }
+
+    # == Company Plan name
+    # This is the name of the plan a company is currently paying (or not paying) for.
+    # e.g. Messaging, Free, Pro, etc.
+    #
+    # config.company.plan = Proc.new { |current_company| current_company.plan.name }
+
+    # == Company Monthly Spend
+    # This is the amount the company spends each month on your app. If your company
+    # has a plan, it will set the 'total value' of that plan appropriately.
+    #
+    # config.company.monthly_spend = Proc.new { |current_company| current_company.plan.price }
+    # config.company.monthly_spend = Proc.new { |current_company| (current_company.plan.price - current_company.subscription.discount) }
+
+    # == Custom Style
+    # By default, Intercom will add a button that opens the messenger to
+    # the page. If you'd like to use your own link to open the messenger,
+    # uncomment this line and clicks on any element with id 'Intercom' will
+    # open the messenger.
+    #
+    # config.inbox.style = :custom
+    #
+    # If you'd like to use your own link activator CSS selector
+    # uncomment this line and clicks on any element that matches the query will
+    # open the messenger
+    # config.inbox.custom_activator = '.intercom'
+    #
+    # If you'd like to hide default launcher button uncomment this line
+    # config.hide_default_launcher = true
+    #
+    # If you need to route your Messenger requests through a different endpoint than the default, uncomment the below line. Generally speaking, this is not needed.
+    # config.api_base = "https://api-iam.intercom.io"
+    #
+  end
+end