Lazy load Plaid link tokens, fix link issues on broadcast (#2302)

* Lazy load Plaid link tokens, fix link issues on broadcast

* Fix alert styles

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

@@ -1,4 +1,4 @@
-<%# locals: (path:, us_link_token: nil, eu_link_token: nil) %>
+<%# locals: (path:, accountable_type:, show_us_link: true, show_eu_link: true) %>
 
 <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
   <div class="text-sm">
@@ -9,24 +9,28 @@
       <%= t("accounts.new.method_selector.manual_entry") %>
     <% end %>
 
-    <% if us_link_token %>
+    <% if show_us_link %>
       <%# Default US-only Link %>
-      <button data-controller="plaid" data-action="plaid#open dialog#close" data-plaid-region-value="us" data-plaid-link-token-value="<%= us_link_token %>" class="text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
+      <%= link_to new_plaid_item_path(region: "us", accountable_type: accountable_type), 
+                  class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
+                  data: { turbo_frame: "modal" } 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.connected_entry") %>
-      </button>
+      <% end %>
     <% end %>
 
     <%# EU Link %>
-    <% if eu_link_token %>
-      <button data-controller="plaid" data-action="plaid#open dialog#close" data-plaid-region-value="eu" data-plaid-link-token-value="<%= eu_link_token %>" class="text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
+    <% if show_eu_link %>
+      <%= link_to new_plaid_item_path(region: "eu", accountable_type: accountable_type), 
+                  class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
+                  data: { turbo_frame: "modal" } 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.connected_entry_eu") %>
-      </button>
+      <% end %>
     <% end %>
   </div>
 <% end %>

app/views/credit_cards/new.html.erb

@@ -1,5 +1,9 @@
 <% if params[:step] == "method_select" %>
-  <%= render "accounts/new/method_selector", path: new_credit_card_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
+  <%= render "accounts/new/method_selector", 
+             path: new_credit_card_path(return_to: params[:return_to]), 
+             show_us_link: @show_us_link, 
+             show_eu_link: @show_eu_link,
+             accountable_type: "CreditCard" %>
 <% else %>
   <%= render DialogComponent.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>

app/views/cryptos/new.html.erb

@@ -1,5 +1,9 @@
 <% if params[:step] == "method_select" %>
-  <%= render "accounts/new/method_selector", path: new_crypto_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
+  <%= render "accounts/new/method_selector", 
+             path: new_crypto_path(return_to: params[:return_to]), 
+             show_us_link: @show_us_link, 
+             show_eu_link: @show_eu_link,
+             accountable_type: "Crypto" %>
 <% else %>
   <%= render DialogComponent.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>

app/views/depositories/new.html.erb

@@ -1,5 +1,9 @@
 <% if params[:step] == "method_select" %>
-  <%= render "accounts/new/method_selector", path: new_depository_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
+  <%= render "accounts/new/method_selector", 
+             path: new_depository_path(return_to: params[:return_to]), 
+             show_us_link: @show_us_link, 
+             show_eu_link: @show_eu_link,
+             accountable_type: "Depository" %>
 <% else %>
   <%= render DialogComponent.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>

app/views/investments/new.html.erb

@@ -1,5 +1,9 @@
 <% if params[:step] == "method_select" %>
-  <%= render "accounts/new/method_selector", path: new_investment_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
+  <%= render "accounts/new/method_selector", 
+             path: new_investment_path(return_to: params[:return_to]), 
+             show_us_link: @show_us_link, 
+             show_eu_link: @show_eu_link,
+             accountable_type: "Investment" %>
 <% else %>
   <%= render DialogComponent.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>

app/views/loans/new.html.erb

@@ -1,5 +1,9 @@
 <% if params[:step] == "method_select" %>
-  <%= render "accounts/new/method_selector", path: new_loan_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
+  <%= render "accounts/new/method_selector", 
+             path: new_loan_path(return_to: params[:return_to]), 
+             show_us_link: @show_us_link, 
+             show_eu_link: @show_eu_link,
+             accountable_type: "Loan" %>
 <% else %>
   <%= render DialogComponent.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>

app/views/plaid_items/_auto_link_opener.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (link_token:, region:, item_id:, is_update: false) %>
+
+<%= tag.div data: { 
+              controller: "plaid", 
+              plaid_link_token_value: link_token,  
+              plaid_region_value: region,
+              plaid_item_id_value: item_id,
+              plaid_is_update_value: is_update
+            } %>

app/views/plaid_items/_plaid_item.html.erb

@@ -30,7 +30,7 @@
             </div>
           <% elsif plaid_item.requires_update? %>
             <div class="text-warning flex items-center gap-1">
-              <%= icon "alert-triangle", size: "sm" %>
+              <%= icon "alert-triangle", size: "sm", color: "warning" %>
               <%= tag.span t(".requires_update") %>
             </div>
           <% elsif plaid_item.sync_error.present? %>
@@ -48,56 +48,18 @@
 
       <div class="flex items-center gap-2">
         <% if plaid_item.requires_update? %>
-          <% begin %>
-            <% link_token = plaid_item.get_update_link_token(webhooks_url: plaid_webhooks_url(plaid_item.plaid_region), redirect_url: accounts_url) %>
-
-            <%= render ButtonComponent.new(
-              text: t(".update"),
-              icon: "refresh-cw",
-              variant: "secondary",
-              data: {
-                controller: "plaid",
-                action: "plaid#open",
-                plaid_region_value: plaid_item.plaid_region,
-                plaid_link_token_value: link_token,
-                plaid_is_update_value: true,
-                plaid_item_id_value: plaid_item.id
-              }
-            ) %>
-            <% rescue PlaidItem::PlaidConnectionLostError %>
-            <div class="flex flex-col gap-2">
-              <div class="text-warning flex items-center gap-1">
-                <%= icon "alert-triangle", size: "sm", color: "warning" %>
-                <%= tag.span t(".connection_lost") %>
-              </div>
-
-              <p class="text-sm text-secondary"><%= t(".connection_lost_description") %></p>
-
-              <div class="flex items-center gap-2">
-                <%= render ButtonComponent.new(
-                  text: t(".delete"),
-                  icon: "trash-2",
-                  variant: "destructive",
-                  href: plaid_item_path(plaid_item),
-                  method: :delete,
-                  confirm: CustomConfirm.for_resource_deletion(plaid_item.name, high_severity: true)
-                ) %>
-
-                <%= render LinkComponent.new(
-                  text: t(".add_new"),
-                  icon: "plus",
-                  variant: "secondary",
-                  href: new_account_path
-                ) %>
-              </div>
-            </div>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: t(".update"),
+            icon: "refresh-cw",
+            variant: "secondary",
+            href: edit_plaid_item_path(plaid_item),
+            frame: "modal"
+          ) %>
         <% elsif Rails.env.development? %>
           <%= icon(
             "refresh-cw",
             as_button: true,
-            href: sync_plaid_item_path(plaid_item),
-            disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?
+            href: sync_plaid_item_path(plaid_item)
           ) %>
         <% end %>
 

app/views/plaid_items/edit.html.erb

@@ -0,0 +1,8 @@
+<%# We render this in the empty modal frame so if Plaid flow is closed, user stays on same page they were on %>
+<%= turbo_frame_tag "modal" do %>
+  <%= render "plaid_items/auto_link_opener", 
+           link_token: @link_token, 
+           region: @plaid_item.plaid_region, 
+           item_id: @plaid_item.id, 
+           is_update: true %>
+<% end %>

app/views/plaid_items/new.html.erb

@@ -0,0 +1,8 @@
+<%# We render this in the empty modal frame so if Plaid flow is closed, user stays on same page they were on %>
+<%= turbo_frame_tag "modal" do %>
+  <%= render "plaid_items/auto_link_opener", 
+           link_token: @link_token, 
+           region: params[:region], 
+           item_id: "", 
+           is_update: false %>
+<% end %>