Account Issue Model and Resolution Flow + Troubleshooting guides (#1090)

* Rough draft of issue system

* Simplify design

* Remove stale files from merge conflicts

* STI for issues

* Cleanup

* Improve Synth api key flow

* Stub api key for test

app/views/accounts/_alert.html.erb

@@ -1,19 +0,0 @@
-<%# locals: (message:, help_path: nil) -%>
-<%= tag.div class: "flex gap-6 items-center rounded-xl px-4 py-3 bg-error/5",
-            data: { controller: "element-removal" },
-            role: "alert" do %>
-  <div class="flex gap-3 items-center text-red-500 grow overflow-x-scroll">
-    <%= lucide_icon("alert-octagon", class: "w-5 h-5 shrink-0") %>
-    <p class="text-sm whitespace-nowrap"><%= message %></p>
-  </div>
-
-  <div class="flex items-center gap-4 ml-auto">
-    <% if help_path %>
-      <%= link_to "Troubleshoot", help_path, class: "text-red-500 font-medium hover:underline", data: { turbo_frame: :drawer } %>
-    <% end %>
-
-    <%= tag.button data: { action: "click->element-removal#remove" } do %>
-      <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-red-500") %>
-    <% end %>
-  </div>
-<% end %>

app/views/accounts/show.html.erb

@@ -45,8 +45,8 @@
     </div>
   </div>
 
-  <% if @account.alert %>
-    <%= render "alert", message: @account.alert, help_path: help_article_path("troubleshooting") %>
+  <% if @account.highest_priority_issue %>
+    <%= render partial: "issues/issue", locals: { issue: @account.highest_priority_issue } %>
   <% end %>
 
   <div class="bg-white shadow-xs rounded-xl border border-alpha-black-25 rounded-lg">

app/views/help/articles/show.html.erb

@@ -1,7 +0,0 @@
-<%= drawer do %>
-  <div class="prose">
-    <%= tag.h1 @article.title %>
-
-    <%= sanitize(@article.html).html_safe %>
-  </div>
-<% end %>

app/views/issue/exchange_rate_provider_missings/show.html.erb

@@ -0,0 +1,28 @@
+<%= content_for :title, @issue.title %>
+
+<%= content_for :description do %>
+  <p>You have set your family currency preference to <%= Current.family.currency %>.  <%= @issue.issuable.name %> has
+    entries in another currency, which means we have to fetch exchange rates from a data provider to accurately show
+    historical results.</p>
+
+  <p>We have detected that your exchange rates provider is not configured yet.</p>
+<% end %>
+
+<%= content_for :action do %>
+  <% if self_hosted? %>
+    <p>To fix this issue, you need to provide an API key for your exchange rate provider.</p>
+
+    <p>Currently, we support <%= link_to "Synth Finance", "https://synthfinance.com", target: "_blank" %>, so you need
+      to
+      get a free API key from the link provided.</p>
+
+    <p>Once you have your API key, paste it below to configure it.</p>
+
+    <%= styled_form_with model: @issue, url: issue_exchange_rate_provider_missing_path(@issue), method: :patch, class: "space-y-3" do |form| %>
+      <%= form.text_field :synth_api_key, label: "Synth API Key", placeholder: "Synth API Key", type: "password", class: "w-full", value: Setting.synth_api_key %>
+      <%= form.submit "Save and Re-Sync Account", class: "btn-primary" %>
+    <% end %>
+  <% else %>
+    <p>Please contact the Maybe team.</p>
+  <% end %>
+<% end %>

app/views/issue/exchange_rates_missings/show.html.erb

@@ -0,0 +1,22 @@
+<%= content_for :title, @issue.title %>
+
+<%= content_for :description do %>
+  <p>Some exchange rates are missing for this account.</p>
+
+  <pre><code><%= JSON.pretty_generate(@issue.data) %></code></pre>
+<% end %>
+
+<%= content_for :action do %>
+  <p>The Synth data provider could not find the requested data.</p>
+
+  <p>We are actively developing Synth to be a low cost and easy to use data provider. You can help us improve Synth by
+    requesting the data you need.</p>
+
+  <p>Please post in our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank" %> with the
+    following information:</p>
+
+  <ul>
+    <li>What type of data is missing?</li>
+    <li>Any other information you think might be helpful</li>
+  </ul>
+<% end %>

app/views/issue/unknowns/show.html.erb

@@ -0,0 +1,23 @@
+<%= content_for :title, @issue.title %>
+
+<%= content_for :description do %>
+  <p>An unknown issue has occurred.</p>
+
+  <pre><code><%= JSON.pretty_generate(@issue.data || "No data provided for this issue") %></code></pre>
+<% end %>
+
+<%= content_for :action do %>
+  <p>There is no fix for this issue yet.</p>
+
+  <p>Maybe is in active development and we value your feedback. There are a couple ways you can report this issue to
+    help us make Maybe better:</p>
+
+  <ul>
+    <li>Post in our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank" %></li>
+    <li>Open an issue on
+      our <%= link_to "Github repository", "https://github.com/maybe-finance/maybe/issues", target: "_blank" %></li>
+  </ul>
+
+  <p>If there is data shown in the code block above that you think might be helpful, please include it in your
+    report.</p>
+<% end %>

app/views/issues/_issue.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (issue:) %>
+
+<% priority_class = issue.critical? || issue.error? ? "bg-error/5" : "bg-warning/5" %>
+
+<%= tag.div class: "flex gap-6 items-center rounded-xl px-4 py-3 #{priority_class}" do %>
+  <div class="flex gap-3 items-center text-red-500 grow overflow-x-scroll">
+    <%= lucide_icon("alert-octagon", class: "w-5 h-5 shrink-0") %>
+    <p class="text-sm whitespace-nowrap"><%= issue.title %></p>
+  </div>
+
+  <div class="flex items-center gap-4 ml-auto">
+    <%= link_to "Troubleshoot", issue_path(issue), class: "text-red-500 font-medium hover:underline", data: { turbo_frame: :drawer } %>
+  </div>
+<% end %>

app/views/layouts/issues.html.erb

@@ -0,0 +1,15 @@
+<%= drawer do %>
+  <article class="prose">
+    <%= tag.h2 do %>
+      <%= yield :title %>
+    <% end %>
+
+    <%= tag.h3 t(".description") %>
+    <%= yield :description %>
+
+    <%= tag.h3 t(".action") %>
+    <%= yield :action %>
+  </article>
+<% end %>
+
+<%= render template: "layouts/application" %>