Beta Testing Round 3 Bug Fixes (#1357)

* Clean up env example files

* Fix duplicate category creations

* Fix duplicate tag and merchant creation

* Add initial valuation to imported accounts

* Add upgrade modal prompt

* Don't hide content on billing page

* Add temporary session for new customers

* Lint fixes

* Fix unused translations

* Fix system tests

app/views/categories/_category.html.erb

@@ -9,11 +9,15 @@
       <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
         <%= contextual_menu_modal_action_item t(".edit"), edit_category_path(category) %>
 
-        <%= link_to new_category_deletion_path(category),
+        <% if category.transactions.any? %>
+          <%= link_to new_category_deletion_path(category),
               class: "flex items-center w-full rounded-lg text-red-600 hover:bg-red-50 py-2 px-3 gap-2",
               data: { turbo_frame: :modal } do %>
-          <%= lucide_icon "trash-2", class: "shrink-0 w-5 h-5" %>
-          <span class="text-sm"><%= t(".delete") %></span>
+            <%= lucide_icon "trash-2", class: "shrink-0 w-5 h-5" %>
+            <span class="text-sm"><%= t(".delete") %></span>
+          <% end %>
+        <% else %>
+          <%= contextual_menu_destructive_item t(".delete"), category_path(category), turbo_confirm: nil %>
         <% end %>
       </div>
     <% end %>

app/views/categories/_form.html.erb

@@ -1,5 +1,5 @@
 <div data-controller="color-avatar">
-  <%= styled_form_with model: category, class: "space-y-4", data: { turbo: false } do |f| %>
+  <%= styled_form_with model: category, class: "space-y-4", data: { turbo_frame: :_top } do |f| %>
     <section class="space-y-4">
       <div class="w-fit m-auto">
         <%= render partial: "shared/color_avatar", locals: { name: category.name, color: category.color } %>
@@ -13,7 +13,7 @@
         <% end %>
       </div>
       <div class="relative flex items-center border border-gray-200 rounded-lg">
-        <%= f.text_field :name, placeholder: t(".placeholder"), class: "text-sm font-normal placeholder:text-gray-500 h-10 relative pl-3 w-full border-none rounded-lg", required: true, data: { color_avatar_target: "name" } %>
+        <%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, data: { color_avatar_target: "name" } %>
       </div>
     </section>
 

app/views/layouts/with_sidebar.html.erb

@@ -7,7 +7,12 @@
         <%= render "layouts/sidebar" %>
       <% end %>
     </div>
-    <main class="grow px-20 py-6 h-full overflow-y-auto">
+
+    <main class="grow px-20 py-6 h-full relative <%= require_upgrade? ? "overflow-hidden" : "overflow-y-auto" %>">
+      <% if require_upgrade? %>
+        <%= render "shared/subscribe_modal" %>
+      <% end %>
+
       <%= yield %>
     </main>
   </div>

app/views/merchants/_form.html.erb

@@ -1,5 +1,5 @@
 <div data-controller="color-avatar">
-  <%= styled_form_with model: @merchant, class: "space-y-4", data: { turbo: false } do |f| %>
+  <%= styled_form_with model: @merchant, class: "space-y-4", data: { turbo_frame: :_top } do |f| %>
     <section class="space-y-4">
       <div class="w-fit m-auto">
         <%= render partial: "shared/color_avatar", locals: { name: @merchant.name, color: @merchant.color } %>
@@ -13,7 +13,7 @@
         <% end %>
       </div>
       <div class="relative flex items-center border border-gray-200 rounded-lg">
-        <%= f.text_field :name, placeholder: t(".name_placeholder"), class: "text-sm font-normal placeholder:text-gray-500 h-10 relative pl-3 w-full border-none rounded-lg", required: true, data: { color_avatar_target: "name" } %>
+        <%= f.text_field :name, placeholder: t(".name_placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
       </div>
     </section>
 

app/views/merchants/_merchant.html.erb

@@ -15,11 +15,11 @@
         <%= contextual_menu_destructive_item t(".delete"),
                                              merchant_path(merchant),
                                              turbo_frame: "_top",
-                                             turbo_confirm: {
+                                             turbo_confirm: merchant.transactions.any? ? {
                                                title: t(".confirm_title"),
                                                body: t(".confirm_body"),
                                                accept: t(".confirm_accept")
-                                             } %>
+                                             } : nil %>
       </div>
     <% end %>
   </div>

app/views/onboardings/preferences.html.erb

@@ -8,8 +8,8 @@
         <p class="text-gray-500 text-sm"><%= t(".subtitle") %></p>
       </div>
 
-      <div class="p-1 mb-2">
-        <div class="bg-white p-4 rounded-lg flex gap-8" style="box-shadow: 0px 0px 0px 1px rgba(11, 11, 11, 0.05), 0px 1px 2px 0px rgba(11, 11, 11, 0.05);">
+      <div class="p-1 bg-alpha-black-25 mb-2 rounded-lg">
+        <div class="bg-white p-4 rounded-lg flex gap-8 shadow-xs">
           <div class="space-y-2">
             <%= tag.p t(".example"), class: "text-gray-500 text-sm" %>
             <%= tag.p "$2,323.25", class: "text-gray-900 font-medium text-2xl" %>

app/views/pages/dashboard.html.erb

@@ -24,9 +24,7 @@
     </div>
   </header>
 
-  <% if !Current.family.subscribed? && !self_hosted? %>
-    <%= render "shared/subscribe_prompt" %>
-  <% elsif @accounts.empty? %>
+  <% if @accounts.empty? %>
     <%= render "shared/no_account_empty_state" %>
   <% else %>
     <section class="flex gap-4">

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

@@ -5,11 +5,42 @@
 <div class="space-y-4">
   <h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
   <%= settings_section title: t(".subscription_title"), subtitle: t(".subscription_subtitle") do %>
-    <% if @user.family.stripe_plan_id.blank? %>
-      <%= link_to t(".subscribe_button"), new_subscription_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2", data: { turbo: false } %>
-    <% else %>
-      <%= link_to t(".manage_subscription_button"), subscription_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2", data: { turbo: false } %>
-    <% end %>
+    <div class="space-y-4">
+      <div class="p-3 shadow-xs bg-white border border-alpha-black-200 rounded-lg flex justify-between items-center">
+        <div class="flex items-center gap-3">
+          <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
+            <%= lucide_icon "gem", class: "w-5 h-5 text-gray-500" %>
+          </div>
+
+          <div class="text-sm space-y-1">
+            <% if @user.family.subscribed? || subscription_pending? %>
+              <p class="text-gray-900">You are currently subscribed to <span class="font-medium">Maybe+</span></p>
+              <p class="text-gray-500">Manage your billing settings here.</p>
+            <% else %>
+              <p class="text-gray-900">You are currently <span class="font-medium">not subscribed</span></p>
+              <p class="text-gray-500">Once you subscribe to Maybe+, you’ll see your billing settings here.</p>
+            <% end %>
+          </div>
+        </div>
+
+        <% if @user.family.subscribed? || subscription_pending? %>
+          <%= link_to subscription_path, class: "btn btn--secondary flex items-center gap-1" do %>
+            <span>Manage</span>
+            <%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-gray-500" %>
+          <% end %>
+        <% else %>
+          <%= link_to new_subscription_path, class: "btn btn--secondary flex items-center gap-1" do %>
+            <span>Subscribe</span>
+            <%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-gray-500" %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <%= image_tag "stripe-logo.svg", class: "w-5 h-5 shrink-0" %>
+        <p class="text-gray-500 text-sm">Managed via Stripe</p>
+      </div>
+    </div>
   <% end %>
 
   <%= settings_nav_footer %>

app/views/shared/_subscribe_modal.html.erb

@@ -0,0 +1,25 @@
+<div data-controller="modal" data-modal-open-value="true" class="absolute inset-0 z-50 flex items-center justify-center bg-white/90" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+  <div class="w-[400px] rounded-xl relative overflow-hidden">
+    <div class="bg-white shadow-xl border border-gray-200 rounded-xl relative z-10">
+      <div class="rounded-xl" style="background-image: url('<%= asset_path("maybe-plus-background.png") %>'); background-size: cover; background-position: center;">
+        <div class="text-center rounded-xl" style="background-image: linear-gradient(to bottom, rgba(197,161,119,0.15) 0%, rgba(255,255,255,0.8) 30%, white 40%);">
+          <div class="p-4 rounded-xl">
+            <div class="flex justify-center">
+              <%= image_tag "maybe-plus-logo.png", class: "w-16" %>
+            </div>
+
+            <h2 class="font-medium text-gray-900 mb-2">Join Maybe+</h2>
+
+            <div class="text-gray-500 text-sm space-y-4 mb-5">
+              <p>Nobody likes paywalls, but we need feedback from users willing to pay for Maybe. </p>
+
+              <p>To continue using the app, please subscribe.  In this early beta testing phase, we require that you upgrade within 1 hour to claim your spot.</p>
+            </div>
+
+            <%= link_to "Upgrade to Maybe+", new_subscription_path, class: "btn btn--primary text-center w-full block" %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/shared/_subscribe_prompt.html.erb

@@ -1,16 +0,0 @@
-<div class="flex justify-center items-center h-[800px]">
-  <div class="text-center flex flex-col gap-4 items-center max-w-[300px]">
-    <%= lucide_icon "circle-fading-arrow-up", class: "w-8 h-8 text-green-500" %>
-
-    <div class="space-y-1 text-sm">
-      <p class="text-gray-900 font-medium"><%= t(".title") %></p>
-      <p class="text-gray-500"><%= t(".subtitle") %></p>
-      <p class="text-gray-400 text-xs"><%= t(".guarantee") %></p>
-    </div>
-
-    <%= link_to new_subscription_path, class: "btn btn--primary flex items-center gap-1" do %>
-      <%= lucide_icon("credit-card", class: "w-5 h-5") %>
-      <span><%= t(".subscribe") %></span>
-    <% end %>
-  </div>
-</div>

app/views/tags/_form.html.erb

@@ -1,5 +1,5 @@
 <div data-controller="color-avatar">
-  <%= styled_form_with model: tag, class: "space-y-4", data: { turbo: false } do |f| %>
+  <%= styled_form_with model: tag, class: "space-y-4", data: { turbo_frame: :_top } do |f| %>
     <section class="space-y-4">
       <div class="w-fit m-auto">
         <%= render partial: "shared/color_avatar", locals: { name: tag.name, color: tag.color } %>
@@ -13,7 +13,7 @@
         <% end %>
       </div>
       <div class="relative flex items-center border border-gray-200 rounded-lg">
-        <%= f.text_field :name, placeholder: t(".placeholder"), class: "text-sm font-normal placeholder:text-gray-500 h-10 relative pl-3 w-full border-none rounded-lg", required: true, data: { color_avatar_target: "name" } %>
+        <%= f.text_field :name, placeholder: t(".placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
       </div>
     </section>
 

app/views/tags/_tag.html.erb

@@ -12,11 +12,15 @@
       <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
         <%= contextual_menu_modal_action_item t(".edit"), edit_tag_path(tag) %>
 
-        <%= link_to new_tag_deletion_path(tag),
+        <% if tag.transactions.any? %>
+          <%= link_to new_tag_deletion_path(tag),
                     class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
                     data: { turbo_frame: :modal } do %>
-          <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-          <span><%= t(".delete") %></span>
+            <%= lucide_icon "trash-2", class: "w-5 h-5" %>
+            <span><%= t(".delete") %></span>
+          <% end %>
+        <% else %>
+          <%= contextual_menu_destructive_item t(".delete"), tag_path(tag), turbo_confirm: nil %>
         <% end %>
       </div>
     <% end %>