Lunchflow integration (#259)

* First pass lunch flow

* Fixes

- Fix apikey not being saved properly due to provider no reload support
- Fix proper messages if we try to link existing accounts.

* Fix better error handling

* Filter existing transactions and skip duplicates

* FIX messaging

* Branding :)

* Fix XSS and linter

* FIX provider concern

- also fix code duplication

* FIX md5 digest

* Updated determine_sync_start_date to be account-aware

* Review fixes

* Broaden error catch to not crash UI

* Fix buttons styling

* FIX process account error handling

* FIX account cap and url parsing

* Lunch Flow brand

* Found orphan i18n strings

* Remove per conversation with @sokie

---------

Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>

app/views/accounts/index.html.erb

@@ -21,7 +21,7 @@
   </div>
 </header>
 
-<% if @manual_accounts.empty? && @plaid_items.empty? && @simplefin_items.empty? %>
+<% if @manual_accounts.empty? && @plaid_items.empty? && @simplefin_items.empty? && @lunchflow_items.empty? %>
   <%= render "empty" %>
 <% else %>
   <div class="space-y-2">
@@ -33,6 +33,10 @@
       <%= render @simplefin_items.sort_by(&:created_at) %>
     <% end %>
 
+    <% if @lunchflow_items.any? %>
+      <%= render @lunchflow_items.sort_by(&:created_at) %>
+    <% end %>
+
     <% if @manual_accounts.any? %>
       <%= render "accounts/index/manual_accounts", accounts: @manual_accounts %>
     <% end %>

app/views/accounts/new/_method_selector.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (path:, accountable_type:, show_us_link: true, show_eu_link: true) %>
+<%# locals: (path:, accountable_type:, show_us_link: true, show_eu_link: true, show_lunchflow_link: false) %>
 
 <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
   <div class="text-sm">
@@ -33,5 +33,20 @@
       <% end %>
     <% end %>
 
+    <%# Lunchflow Link %>
+    <% if show_lunchflow_link %>
+      <%= link_to select_accounts_lunchflow_items_path(accountable_type: accountable_type, return_to: params[:return_to]),
+                  class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
+                  data: {
+                    turbo_frame: "modal",
+                    turbo_action: "advance"
+                  } do %>
+        <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
+          <%= icon("link-2") %>
+        </span>
+        <%= t("accounts.new.method_selector.lunchflow_entry") %>
+      <% end %>
+    <% end %>
+
   </div>
 <% end %>

app/views/credit_cards/new.html.erb

@@ -3,6 +3,7 @@
              path: new_credit_card_path(return_to: params[:return_to]),
              show_us_link: @show_us_link,
              show_eu_link: @show_eu_link,
+             show_lunchflow_link: @show_lunchflow_link,
              accountable_type: "CreditCard" %>
 <% else %>
   <%= render DS::Dialog.new do |dialog| %>

app/views/depositories/new.html.erb

@@ -3,6 +3,7 @@
              path: new_depository_path(return_to: params[:return_to]),
              show_us_link: @show_us_link,
              show_eu_link: @show_eu_link,
+             show_lunchflow_link: @show_lunchflow_link,
              accountable_type: "Depository" %>
 <% else %>
   <%= render DS::Dialog.new do |dialog| %>

app/views/lunchflow_items/_loading.html.erb

@@ -0,0 +1,16 @@
+<%= turbo_frame_tag "modal" do %>
+  <%= render DS::Dialog.new do |dialog| %>
+    <% dialog.with_header(title: t(".loading_title")) %>
+
+    <% dialog.with_body do %>
+      <div class="flex items-center justify-center py-8">
+        <div class="flex flex-col items-center gap-4">
+          <%= icon("loader-circle", class: "h-8 w-8 animate-spin text-primary") %>
+          <p class="text-sm text-secondary">
+            <%= t(".loading_message") %>
+          </p>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

app/views/lunchflow_items/_lunchflow_item.html.erb

@@ -0,0 +1,79 @@
+<%# locals: (lunchflow_item:) %>
+
+<%= tag.div id: dom_id(lunchflow_item) do %>
+  <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
+    <summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
+      <div class="flex items-center gap-2">
+        <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
+
+        <div class="flex items-center justify-center h-8 w-8 bg-orange-600/10 rounded-full">
+          <% if lunchflow_item.logo.attached? %>
+            <%= image_tag lunchflow_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
+          <% else %>
+            <div class="flex items-center justify-center">
+              <%= tag.p lunchflow_item.name.first.upcase, class: "text-orange-600 text-xs font-medium" %>
+            </div>
+          <% end %>
+        </div>
+
+        <div class="pl-1 text-sm">
+          <div class="flex items-center gap-2">
+            <%= tag.p lunchflow_item.name, class: "font-medium text-primary" %>
+            <% if lunchflow_item.scheduled_for_deletion? %>
+              <p class="text-destructive text-sm animate-pulse"><%= t(".deletion_in_progress") %></p>
+            <% end %>
+          </div>
+          <% if lunchflow_item.syncing? %>
+            <div class="text-secondary flex items-center gap-1">
+              <%= icon "loader", size: "sm", class: "animate-spin" %>
+              <%= tag.span t(".syncing") %>
+            </div>
+          <% elsif lunchflow_item.sync_error.present? %>
+            <div class="text-secondary flex items-center gap-1">
+              <%= render DS::Tooltip.new(text: lunchflow_item.sync_error, icon: "alert-circle", size: "sm", color: "destructive") %>
+              <%= tag.span t(".error"), class: "text-destructive" %>
+            </div>
+          <% else %>
+            <p class="text-secondary">
+              <%= lunchflow_item.last_synced_at ? t(".status", timestamp: time_ago_in_words(lunchflow_item.last_synced_at)) : t(".status_never") %>
+            </p>
+          <% end %>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <% if Rails.env.development? %>
+          <%= icon(
+            "refresh-cw",
+            as_button: true,
+            href: sync_lunchflow_item_path(lunchflow_item)
+          ) %>
+        <% end %>
+
+        <%= render DS::Menu.new do |menu| %>
+          <% menu.with_item(
+            variant: "button",
+            text: t(".delete"),
+            icon: "trash-2",
+            href: lunchflow_item_path(lunchflow_item),
+            method: :delete,
+            confirm: CustomConfirm.for_resource_deletion(lunchflow_item.name, high_severity: true)
+          ) %>
+        <% end %>
+      </div>
+    </summary>
+
+    <% unless lunchflow_item.scheduled_for_deletion? %>
+      <div class="space-y-4 mt-4">
+        <% if lunchflow_item.accounts.any? %>
+          <%= render "accounts/index/account_groups", accounts: lunchflow_item.accounts %>
+        <% else %>
+          <div class="p-4 flex flex-col gap-3 items-center justify-center">
+            <p class="text-primary font-medium text-sm"><%= t(".no_accounts_title") %></p>
+            <p class="text-secondary text-sm"><%= t(".no_accounts_description") %></p>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </details>
+<% end %>

app/views/lunchflow_items/select_accounts.html.erb

@@ -0,0 +1,43 @@
+<%= turbo_frame_tag "modal" do %>
+  <%= render DS::Dialog.new do |dialog| %>
+    <% dialog.with_header(title: t(".title")) %>
+
+    <% dialog.with_body do %>
+      <div class="space-y-4">
+        <p class="text-sm text-secondary">
+          <%= t(".description") %>
+        </p>
+
+        <form action="<%= link_accounts_lunchflow_items_path %>" method="post" class="space-y-4" data-turbo-frame="_top">
+          <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
+          <%= hidden_field_tag :accountable_type, @accountable_type %>
+          <%= hidden_field_tag :return_to, @return_to %>
+
+          <div class="space-y-2">
+            <% @available_accounts.each do |account| %>
+              <label class="flex items-start gap-3 p-3 border border-primary rounded-lg hover:bg-subtle cursor-pointer transition-colors">
+                <%= check_box_tag "account_ids[]", account[:id], false, class: "mt-1" %>
+                <div class="flex-1">
+                  <div class="font-medium text-sm text-primary">
+                    <%= account[:name] %>
+                  </div>
+                  <div class="text-xs text-secondary mt-1">
+                    <%= account[:institution_name] %> • <%= account[:currency] %> • <%= account[:status] %>
+                  </div>
+                </div>
+              </label>
+            <% end %>
+          </div>
+
+          <div class="flex gap-2 justify-end pt-4">
+            <%= link_to t(".cancel"), @return_to || new_account_path,
+                class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg text-primary button-bg-secondary hover:button-bg-secondary-hover",
+                data: { turbo_frame: "_top" } %>
+            <%= submit_tag t(".link_accounts"),
+                class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg text-inverse bg-inverse hover:bg-inverse-hover disabled:button-bg-disabled" %>
+          </div>
+        </form>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

app/views/settings/api_keys/show.html.erb

@@ -148,9 +148,9 @@
   </div>
 <% else %>
   <header class="flex items-center justify-between">
-    <h1 class="text-primary text-xl font-medium">API Key</h1>
+    <h1 class="text-primary text-xl font-medium"><%= t(".no_api_key.title") %></h1>
     <%= render DS::Link.new(
-      text: "Create API Key",
+      text: t(".no_api_key.create_api_key"),
       href: new_settings_api_key_path,
       variant: "primary"
     ) %>
@@ -166,33 +166,34 @@
             size: "lg"
           ) %>
           <div class="flex-1">
-            <h3 class="font-medium text-primary">Access your account data programmatically</h3>
-            <p class="text-secondary text-sm mt-1">Generate an API key to integrate with your applications and access your financial data securely.</p>
+            <h3 class="font-medium text-primary"><%= t(".no_api_key.heading", product_name: product_name) %></h3>
+            <p class="text-secondary text-sm mt-1"><%= t(".no_api_key.description") %></p>
           </div>
         </div>
       </div>
 
       <div class="bg-surface-inset rounded-xl p-4">
-        <h4 class="font-medium text-primary mb-3">What you can do with API keys:</h4>
+        <h4 class="font-medium text-primary mb-3"><%= t(".no_api_key.what_you_can_do") %></h4>
         <ul class="space-y-2 text-sm text-secondary">
           <li class="flex items-start gap-2">
             <%= icon("check", class: "w-4 h-4 text-primary mt-0.5") %>
-            <span>Access your accounts and balances</span>
+            <span><%= t(".no_api_key.feature_1") %></span>
           </li>
           <li class="flex items-start gap-2">
             <%= icon("check", class: "w-4 h-4 text-primary mt-0.5") %>
-            <span>View transaction history</span>
+            <span><%= t(".no_api_key.feature_2") %></span>
           </li>
           <li class="flex items-start gap-2">
             <%= icon("check", class: "w-4 h-4 text-primary mt-0.5") %>
-            <span>Create new transactions</span>
-          </li>
-          <li class="flex items-start gap-2">
-            <%= icon("check", class: "w-4 h-4 text-primary mt-0.5") %>
-            <span>Integrate with third-party applications</span>
+            <span><%= t(".no_api_key.feature_3") %></span>
           </li>
         </ul>
       </div>
+
+      <div class="bg-surface-inset rounded-xl p-4">
+        <h4 class="font-medium text-primary mb-2"><%= t(".no_api_key.security_note_title") %></h4>
+        <p class="text-secondary text-sm"><%= t(".no_api_key.security_note") %></p>
+      </div>
     </div>
   </div>
 <% end %>