mirror of
https://github.com/we-promise/sure.git
synced 2026-04-19 12:04:08 +00:00
Initial enable banking implementation (#382)
* Initial enable banking implementation * Handle multiple connections * Amount fixes * Account type mapping * Add option to skip accounts * Update schema.rb * Transaction fixes * Provider fixes * FIX account identifier * FIX support unlinking * UI style fixes * FIX safe redirect and brakeman issue * FIX - pagination max fix - wrap crud in transaction logic * FIX api uid access - The Enable Banking API expects the UUID (uid from the API response) to fetch balances/transactions, not the identification_hash * FIX add new connection * FIX erb code * Alert/notice box overflow protection * Give alert/notification boxes room to grow (3 lines max) * Add "Enable Banking (beta)" to `/settings/bank_sync` * Make Enable Banking section collapsible like all others * Add callback hint to error message --------- Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
This commit is contained in:
soky srm
109
app/views/enable_banking_items/_enable_banking_item.html.erb
Normal file
109
app/views/enable_banking_items/_enable_banking_item.html.erb
Normal file
@@ -0,0 +1,109 @@
|
||||
<%# locals: (enable_banking_item:) %>
|
||||
|
||||
<%= tag.div id: dom_id(enable_banking_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-success/10 rounded-full">
|
||||
<% if enable_banking_item.logo.attached? %>
|
||||
<%= image_tag enable_banking_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
|
||||
<% else %>
|
||||
<div class="flex items-center justify-center">
|
||||
<%= tag.p enable_banking_item.institution_display_name.first.upcase, class: "text-success text-xs font-medium" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="pl-1 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<%= tag.p enable_banking_item.institution_display_name, class: "font-medium text-primary" %>
|
||||
<% if enable_banking_item.scheduled_for_deletion? %>
|
||||
<p class="text-destructive text-sm animate-pulse">Deletion in progress</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<p class="text-xs text-secondary">Enable Banking</p>
|
||||
<% if enable_banking_item.syncing? %>
|
||||
<div class="text-secondary flex items-center gap-1">
|
||||
<%= icon "loader", size: "sm", class: "animate-spin" %>
|
||||
<%= tag.span "Syncing..." %>
|
||||
</div>
|
||||
<% elsif enable_banking_item.requires_update? %>
|
||||
<div class="text-warning flex items-center gap-1">
|
||||
<%= icon "alert-triangle", size: "sm", color: "warning" %>
|
||||
<%= tag.span "Re-authorization required" %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-secondary">
|
||||
<% if enable_banking_item.last_synced_at %>
|
||||
Last synced <%= time_ago_in_words(enable_banking_item.last_synced_at) %> ago
|
||||
<% if enable_banking_item.sync_status_summary %>
|
||||
· <%= enable_banking_item.sync_status_summary %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
Never synced
|
||||
<% end %>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<% if enable_banking_item.requires_update? %>
|
||||
<%= button_to reauthorize_enable_banking_item_path(enable_banking_item),
|
||||
method: :post,
|
||||
class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg text-white bg-warning hover:opacity-90 transition-colors",
|
||||
data: { turbo: false } do %>
|
||||
<%= icon "refresh-cw", size: "sm" %>
|
||||
Re-authorize
|
||||
<% end %>
|
||||
<% elsif Rails.env.development? %>
|
||||
<%= icon(
|
||||
"refresh-cw",
|
||||
as_button: true,
|
||||
href: sync_enable_banking_item_path(enable_banking_item)
|
||||
) %>
|
||||
<% end %>
|
||||
|
||||
<%= render DS::Menu.new do |menu| %>
|
||||
<% menu.with_item(
|
||||
variant: "button",
|
||||
text: "Delete",
|
||||
icon: "trash-2",
|
||||
href: enable_banking_item_path(enable_banking_item),
|
||||
method: :delete,
|
||||
confirm: CustomConfirm.for_resource_deletion(enable_banking_item.institution_display_name, high_severity: true)
|
||||
) %>
|
||||
<% end %>
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
<% unless enable_banking_item.scheduled_for_deletion? %>
|
||||
<div class="space-y-4 mt-4">
|
||||
<% if enable_banking_item.accounts.any? %>
|
||||
<%= render "accounts/index/account_groups", accounts: enable_banking_item.accounts %>
|
||||
<% end %>
|
||||
|
||||
<% if enable_banking_item.unlinked_accounts_count > 0 %>
|
||||
<div class="p-4 flex flex-col gap-3 items-center justify-center">
|
||||
<p class="text-primary font-medium text-sm">Setup needed</p>
|
||||
<p class="text-secondary text-sm"><%= pluralize(enable_banking_item.unlinked_accounts_count, "account") %> imported from Enable Banking need to be set up</p>
|
||||
<%= render DS::Link.new(
|
||||
text: "Set up accounts",
|
||||
icon: "settings",
|
||||
variant: "primary",
|
||||
href: setup_accounts_enable_banking_item_path(enable_banking_item),
|
||||
frame: :modal
|
||||
) %>
|
||||
</div>
|
||||
<% elsif enable_banking_item.accounts.empty? && enable_banking_item.enable_banking_accounts.empty? %>
|
||||
<div class="p-4 flex flex-col gap-3 items-center justify-center">
|
||||
<p class="text-primary font-medium text-sm">No accounts found</p>
|
||||
<p class="text-secondary text-sm">No accounts were found from Enable Banking. Try syncing again.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</details>
|
||||
<% end %>
|
||||
14
app/views/enable_banking_items/_subtype_select.html.erb
Normal file
14
app/views/enable_banking_items/_subtype_select.html.erb
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="subtype-select" data-type="<%= account_type %>" style="display: none;">
|
||||
<% if subtype_config[:options].present? %>
|
||||
<%= label_tag "account_subtypes[#{enable_banking_account.id}]", subtype_config[:label],
|
||||
class: "block text-sm font-medium text-primary mb-2" %>
|
||||
<% selected_value = account_type == "Depository" ?
|
||||
(enable_banking_account.name.downcase.include?("checking") ? "checking" :
|
||||
enable_banking_account.name.downcase.include?("savings") ? "savings" : "") : "" %>
|
||||
<%= select_tag "account_subtypes[#{enable_banking_account.id}]",
|
||||
options_for_select([["Select #{account_type == 'Depository' ? 'subtype' : 'type'}", ""]] + subtype_config[:options], selected_value),
|
||||
{ class: "appearance-none bg-container border border-primary rounded-md px-3 py-2 text-sm leading-6 text-primary focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none w-full" } %>
|
||||
<% else %>
|
||||
<p class="text-sm text-secondary"><%= subtype_config[:message] %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
57
app/views/enable_banking_items/select_bank.html.erb
Normal file
57
app/views/enable_banking_items/select_bank.html.erb
Normal file
@@ -0,0 +1,57 @@
|
||||
<%= turbo_frame_tag "modal" do %>
|
||||
<%= render DS::Dialog.new do |dialog| %>
|
||||
<% dialog.with_header(title: t(".title", default: "Select Your Bank")) %>
|
||||
|
||||
<% dialog.with_body do %>
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-secondary">
|
||||
<%= t(".description", default: "Choose the bank you want to connect to your account.") %>
|
||||
</p>
|
||||
|
||||
<% if @error_message.present? %>
|
||||
<div class="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
|
||||
<%= @error_message %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @aspsps.present? %>
|
||||
<div class="space-y-2 max-h-80 overflow-y-auto">
|
||||
<% @aspsps.each do |aspsp| %>
|
||||
<%= button_to authorize_enable_banking_item_path(@enable_banking_item),
|
||||
method: :post,
|
||||
params: { aspsp_name: aspsp[:name], new_connection: @new_connection },
|
||||
class: "w-full flex items-center gap-4 p-3 rounded-lg border border-primary bg-container hover:bg-subtle transition-colors text-left",
|
||||
data: { turbo: false } do %>
|
||||
<% if aspsp[:logo].present? %>
|
||||
<img src="<%= aspsp[:logo] %>" alt="<%= aspsp[:name] %>" class="w-10 h-10 rounded object-contain">
|
||||
<% else %>
|
||||
<div class="w-10 h-10 rounded bg-gray-100 flex items-center justify-center">
|
||||
<%= icon "building-bank", class: "w-5 h-5 text-gray-400" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-sm text-primary"><%= aspsp[:name] %></p>
|
||||
<% if aspsp[:bic].present? %>
|
||||
<p class="text-xs text-secondary">BIC: <%= aspsp[:bic] %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= icon "chevron-right", class: "w-5 h-5 text-secondary" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="text-center py-8">
|
||||
<p class="text-secondary"><%= t(".no_banks", default: "No banks available for this country.") %></p>
|
||||
<p class="text-sm text-secondary mt-2"><%= t(".check_country", default: "Please check your country code setting.") %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<%= link_to t(".cancel", default: "Cancel"), settings_providers_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", action: "DS--dialog#close" } %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
118
app/views/enable_banking_items/setup_accounts.html.erb
Normal file
118
app/views/enable_banking_items/setup_accounts.html.erb
Normal file
@@ -0,0 +1,118 @@
|
||||
<%= render DS::Dialog.new do |dialog| %>
|
||||
<% dialog.with_header(title: "Set Up Your Enable Banking Accounts") do %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= icon "building-2", class: "text-primary" %>
|
||||
<span class="text-primary">Choose the correct account types for your imported accounts</span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% dialog.with_body do %>
|
||||
<%= form_with url: complete_account_setup_enable_banking_item_path(@enable_banking_item),
|
||||
method: :post,
|
||||
local: true,
|
||||
data: {
|
||||
controller: "loading-button",
|
||||
action: "submit->loading-button#showLoading",
|
||||
loading_button_loading_text_value: "Creating Accounts...",
|
||||
turbo_frame: "_top"
|
||||
},
|
||||
class: "space-y-6" do |form| %>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-surface border border-primary p-4 rounded-lg">
|
||||
<div class="flex items-start gap-3">
|
||||
<%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
|
||||
<div>
|
||||
<p class="text-sm text-primary mb-2">
|
||||
<strong>Choose the correct account type for each Enable Banking account:</strong>
|
||||
</p>
|
||||
<ul class="text-xs text-secondary space-y-1 list-disc list-inside">
|
||||
<% @account_type_options.reject { |_, type| type == "skip" }.each do |label, _| %>
|
||||
<li><strong><%= label %></strong></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sync Date Range Selection -->
|
||||
<div class="bg-surface border border-primary p-4 rounded-lg">
|
||||
<div class="flex items-start gap-3">
|
||||
<%= icon "calendar", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm text-primary mb-3">
|
||||
<strong>Historical Data Range:</strong>
|
||||
</p>
|
||||
<%= form.date_field :sync_start_date,
|
||||
label: "Start syncing transactions from:",
|
||||
value: @enable_banking_item.sync_start_date || 3.months.ago.to_date,
|
||||
min: 1.year.ago.to_date,
|
||||
max: Date.current,
|
||||
class: "w-full max-w-xs rounded-md border border-primary px-3 py-2 text-sm bg-container-inset text-primary",
|
||||
help_text: "Select how far back you want to sync transaction history. Maximum 1 year of history available." %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% @enable_banking_accounts.each do |enable_banking_account| %>
|
||||
<div class="border border-primary rounded-lg p-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div>
|
||||
<h3 class="font-medium text-primary">
|
||||
<%= enable_banking_account.name %>
|
||||
<% if enable_banking_account.iban.present? %>
|
||||
<span class="text-secondary">• <%= enable_banking_account.iban.last(4) %></span>
|
||||
<% end %>
|
||||
</h3>
|
||||
<div class="text-sm text-secondary space-y-0.5">
|
||||
<% if enable_banking_account.account_type_display.present? %>
|
||||
<p><%= enable_banking_account.account_type_display %></p>
|
||||
<% end %>
|
||||
<% if enable_banking_account.current_balance.present? %>
|
||||
<p>Balance: <%= number_to_currency(enable_banking_account.current_balance, unit: enable_banking_account.currency) %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3" data-controller="account-type-selector" data-account-type-selector-account-id-value="<%= enable_banking_account.id %>">
|
||||
<div>
|
||||
<%= label_tag "account_types[#{enable_banking_account.id}]", "Account Type:",
|
||||
class: "block text-sm font-medium text-primary mb-2" %>
|
||||
<%= select_tag "account_types[#{enable_banking_account.id}]",
|
||||
options_for_select(@account_type_options, "skip"),
|
||||
{ class: "appearance-none bg-container border border-primary rounded-md px-3 py-2 text-sm leading-6 text-primary focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none w-full",
|
||||
data: {
|
||||
action: "change->account-type-selector#updateSubtype"
|
||||
} } %>
|
||||
</div>
|
||||
|
||||
<!-- Subtype dropdowns (shown/hidden based on account type) -->
|
||||
<div data-account-type-selector-target="subtypeContainer">
|
||||
<% @subtype_options.each do |account_type, subtype_config| %>
|
||||
<%= render "enable_banking_items/subtype_select", account_type: account_type, subtype_config: subtype_config, enable_banking_account: enable_banking_account %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<%= render DS::Button.new(
|
||||
text: "Create Accounts",
|
||||
variant: "primary",
|
||||
icon: "plus",
|
||||
type: "submit",
|
||||
class: "flex-1",
|
||||
data: { loading_button_target: "button" }
|
||||
) %>
|
||||
<%= render DS::Link.new(
|
||||
text: "Cancel",
|
||||
variant: "secondary",
|
||||
href: accounts_path
|
||||
) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
Reference in New Issue
Block a user