mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-05 05:25:24 +02:00
New onboarding, trials, Stripe integration (#2185)
* New onboarding, trials, Stripe integration * Fix tests * Lint fixes * Fix subscription endpoints
This commit is contained in:
Zach Gollwitzer
GitHub
parent
79b4a3769b
commit
a51c4d2cba
53 changed files with 847 additions and 372 deletions
|
|
@ -28,7 +28,7 @@
|
|||
step[:is_complete] ? "text-green-600" : "text-secondary"
|
||||
end %>
|
||||
<% step_class = if is_current
|
||||
"bg-primary text-white"
|
||||
"bg-surface-inset text-primary"
|
||||
else
|
||||
step[:is_complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-container-inset"
|
||||
end %>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<%= link_to step[:path], class: "flex items-center gap-3" do %>
|
||||
<div class="flex items-center gap-2 text-sm font-medium <%= text_class %>">
|
||||
<span class="<%= step_class %> w-7 h-7 rounded-full shrink-0 inline-flex items-center justify-center border border-transparent">
|
||||
<%= step[:is_complete] && !is_current ? icon("check", size: "sm") : idx + 1 %>
|
||||
<%= step[:is_complete] && !is_current ? icon("check", size: "sm", color: "current") : idx + 1 %>
|
||||
</span>
|
||||
|
||||
<span><%= step[:name] %></span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<footer class="p-6">
|
||||
<div class="space-y-2 text-center text-xs text-secondary">
|
||||
<p>© <%= Date.current.year %>, Maybe Finance, Inc.</p>
|
||||
<p><%= link_to t(".privacy_policy"), "https://maybefinance.com/privacy", class: "underline hover:text-gray-600" %> • <%= link_to t(".terms_of_service"), "https://maybefinance.com/tos", class: "underline hover:text-gray-600" %></p>
|
||||
<div class="flex justify-center items-center gap-2">
|
||||
<%= link_to "Privacy Policy", privacy_path, class: "text-secondary", target: "_blank" %>
|
||||
<span>•</span>
|
||||
<%= link_to "Terms of Service", terms_path, class: "text-secondary", target: "_blank" %>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en" data-controller="theme intercom" data-theme-user-preference-value="<%= Current.user&.theme || "system" %>">
|
||||
|
||||
<% theme = Current.user&.theme || "system" %>
|
||||
|
||||
<html
|
||||
lang="en"
|
||||
data-theme="<%= theme %>"
|
||||
data-controller="theme intercom"
|
||||
data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
|
||||
class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>">
|
||||
<head>
|
||||
<%= render "layouts/shared/head" %>
|
||||
<%= yield :head %>
|
||||
</head>
|
||||
|
||||
<body class="h-full overflow-hidden lg:overflow-auto antialiased">
|
||||
<% if Rails.env.development? %>
|
||||
<button hidden data-controller="hotkey" data-hotkey="t t /" data-action="theme#toggle"></button>
|
||||
<% end %>
|
||||
|
||||
<div class="fixed z-50 top-6 md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto mt-safe">
|
||||
<div id="notification-tray" class="space-y-1 w-full">
|
||||
<%= render_flash_notifications %>
|
||||
|
|
@ -20,17 +32,6 @@
|
|||
|
||||
<%= family_stream %>
|
||||
|
||||
<% if Rails.env.development? %>
|
||||
<div class="fixed bottom-32 left-7 flex flex-col gap-1">
|
||||
<%= icon("eclipse", as_button: true, data: { action: "theme#toDark" }) %>
|
||||
<%= icon("sun", as_button: true, data: { action: "theme#toLight" }) %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if require_upgrade? %>
|
||||
<%= render "shared/subscribe_modal" %>
|
||||
<% end %>
|
||||
|
||||
<%= turbo_frame_tag "modal" %>
|
||||
<%= turbo_frame_tag "drawer" %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,37 @@
|
|||
<%= render "layouts/shared/htmldoc" do %>
|
||||
<div class="bg-container flex flex-col h-full">
|
||||
<div class="bg-surface flex flex-col h-full">
|
||||
<header class="flex items-center justify-between p-8">
|
||||
<%= render LinkComponent.new(
|
||||
variant: "icon",
|
||||
icon: "arrow-left",
|
||||
href: content_for(:previous_path) || root_path
|
||||
) %>
|
||||
<% if content_for?(:prev_nav) %>
|
||||
<%= yield :prev_nav %>
|
||||
<% else %>
|
||||
<%= render LinkComponent.new(
|
||||
variant: "icon",
|
||||
icon: "arrow-left",
|
||||
href: content_for(:previous_path) || root_path
|
||||
) %>
|
||||
<% end %>
|
||||
|
||||
<nav>
|
||||
<%= yield :header_nav %>
|
||||
</nav>
|
||||
|
||||
<%= render LinkComponent.new(
|
||||
variant: "icon",
|
||||
icon: "x",
|
||||
href: content_for(:cancel_path) || root_path
|
||||
) %>
|
||||
<% if content_for?(:cancel_action) %>
|
||||
<%= yield :cancel_action %>
|
||||
<% else %>
|
||||
<%= render LinkComponent.new(
|
||||
variant: "icon",
|
||||
icon: "x",
|
||||
href: content_for(:cancel_path) || root_path
|
||||
) %>
|
||||
<% end %>
|
||||
</header>
|
||||
|
||||
<main class="grow px-8 pt-12 pb-32 overflow-y-auto">
|
||||
<%= yield %>
|
||||
</main>
|
||||
|
||||
<% if content_for?(:footer) %>
|
||||
<%= yield :footer %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<header class="flex justify-between items-center p-4">
|
||||
<%= image_tag "logo.svg", class: "h-[22px]" %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= icon("log-in", color: "secondary") %>
|
||||
<%= button_to t(".sign_out"), session_path(Current.session), method: :delete, class: "text-sm text-primary font-medium" %>
|
||||
</div>
|
||||
</header>
|
||||
8
app/views/onboardings/_logout.html.erb
Normal file
8
app/views/onboardings/_logout.html.erb
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<%= render ButtonComponent.new(
|
||||
text: "Sign out",
|
||||
icon: "log-out",
|
||||
icon_position: :right,
|
||||
variant: "ghost",
|
||||
href: session_path(Current.session),
|
||||
method: :delete
|
||||
) %>
|
||||
39
app/views/onboardings/_onboarding_nav.html.erb
Normal file
39
app/views/onboardings/_onboarding_nav.html.erb
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<%# locals: (user:) %>
|
||||
|
||||
<% steps = [
|
||||
{ name: "Setup", path: onboarding_path, is_complete: user.first_name.present?, step_number: 1 },
|
||||
{ name: "Preferences", path: preferences_onboarding_path, is_complete: user.set_onboarding_preferences_at.present?, step_number: 2 },
|
||||
{ name: "Goals", path: goals_onboarding_path , is_complete: user.set_onboarding_goals_at.present?, step_number: 3 },
|
||||
{ name: "Start", path: trial_onboarding_path, is_complete: user.onboarded_at.present?, step_number: 4 },
|
||||
] %>
|
||||
|
||||
<ul class="hidden md:flex items-center gap-2">
|
||||
<% steps.each_with_index do |step, idx| %>
|
||||
<li class="flex items-center gap-2 group">
|
||||
<% is_current = request.path == step[:path] %>
|
||||
|
||||
<% text_class = if is_current
|
||||
"text-primary"
|
||||
else
|
||||
step[:is_complete] ? "text-green-600" : "text-secondary"
|
||||
end %>
|
||||
<% step_class = if is_current
|
||||
"bg-surface-inset text-primary"
|
||||
else
|
||||
step[:is_complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-container-inset"
|
||||
end %>
|
||||
|
||||
<%= link_to step[:path], class: "flex items-center gap-3" do %>
|
||||
<div class="flex items-center gap-2 text-sm font-medium <%= text_class %>">
|
||||
<span class="<%= step_class %> w-7 h-7 rounded-full shrink-0 inline-flex items-center justify-center border border-transparent">
|
||||
<%= step[:is_complete] && !is_current ? icon("check", size: "sm", color: "current") : idx + 1 %>
|
||||
</span>
|
||||
|
||||
<span><%= step[:name] %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<hr class="border border-secondary w-12 group-last:hidden">
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
53
app/views/onboardings/goals.html.erb
Normal file
53
app/views/onboardings/goals.html.erb
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<%= content_for :previous_path, preferences_onboarding_path %>
|
||||
|
||||
<%= content_for :header_nav do %>
|
||||
<%= render "onboardings/onboarding_nav", user: @user %>
|
||||
<% end %>
|
||||
|
||||
<%= content_for :cancel_action do %>
|
||||
<%= render "onboardings/logout" %>
|
||||
<% end %>
|
||||
|
||||
<%= content_for :footer do %>
|
||||
<%= render "layouts/shared/footer" %>
|
||||
<% end %>
|
||||
|
||||
<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0">
|
||||
<div>
|
||||
<div class="space-y-1 mb-6 text-center">
|
||||
<h1 class="text-2xl font-medium md:text-2xl">What brings you to Maybe?</h1>
|
||||
<p class="text-secondary text-sm">Select one or more goals that you have with using Maybe as your personal finance tool.</p>
|
||||
</div>
|
||||
|
||||
<%= form_with model: @user do |form| %>
|
||||
<%= form.hidden_field :redirect_to, value: "trial" %>
|
||||
<%= form.hidden_field :set_onboarding_goals_at, value: Time.current %>
|
||||
|
||||
<div class="space-y-3">
|
||||
<% [
|
||||
{ icon: "layers", label: "See all my accounts in one piece", value: "unified_accounts" },
|
||||
{ icon: "banknote", label: "Understand cashflow and expenses", value: "cashflow" },
|
||||
{ icon: "pie-chart", label: "Manage financial plans and budgeting", value: "budgeting" },
|
||||
{ icon: "users", label: "Manage finances with a partner", value: "partner" },
|
||||
{ icon: "area-chart", label: "Track investments", value: "investments" },
|
||||
{ icon: "bot", label: "Let AI help me understand my finances", value: "ai_insights" },
|
||||
{ icon: "settings-2", label: "Analyze and optimize accounts", value: "optimization" },
|
||||
{ icon: "frown", label: "Reduce financial stress or anxiety", value: "reduce_stress" }
|
||||
].each do |goal| %>
|
||||
<label class="flex items-center gap-2.5 p-4 rounded-lg border border-tertiary cursor-pointer hover:bg-container transition-colors [&:has(input:checked)]:border-solid [&:has(input:checked)]:bg-container">
|
||||
<%= form.check_box :goals, { multiple: true, class: "sr-only" }, goal[:value], nil %>
|
||||
<%= icon goal[:icon] %>
|
||||
<span class="text-primary text-sm"><%= goal[:label] %></span>
|
||||
</label>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<%= render ButtonComponent.new(
|
||||
text: "Next",
|
||||
full_width: true
|
||||
) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,26 +1,33 @@
|
|||
<div class="bg-surface h-screen flex flex-col justify-between">
|
||||
<%= render "onboardings/header" %>
|
||||
<%= content_for :previous_path, onboarding_path %>
|
||||
|
||||
<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0" data-controller="onboarding">
|
||||
<div>
|
||||
<div class="space-y-1 mb-6">
|
||||
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>
|
||||
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
|
||||
</div>
|
||||
<%= content_for :header_nav do %>
|
||||
<%= render "onboardings/onboarding_nav", user: @user %>
|
||||
<% end %>
|
||||
|
||||
<div class="p-1 bg-alpha-black-25 mb-2 rounded-lg">
|
||||
<div class="bg-container p-4 rounded-lg flex gap-8 shadow-border-xs">
|
||||
<div class="space-y-2">
|
||||
<%= tag.p t(".example"), class: "text-secondary text-sm" %>
|
||||
<%= tag.p format_money(Money.new(2325.25, params[:currency] || @user.family.currency)), class: "text-primary font-medium text-2xl" %>
|
||||
<p class="text-sm">
|
||||
<span class="text-green-500 font-medium">+<%= format_money(Money.new(78.90, params[:currency] || @user.family.currency)) %></span>
|
||||
<span class="text-green-500 font-medium">(+<%= format_money(Money.new(6.39, params[:currency] || @user.family.currency)) %>)</span>
|
||||
<span class="text-secondary">as of <%= format_date(Date.parse("2024-10-23"), :default, format_code: params[:date_format] || @user.family.date_format) %></span>
|
||||
</p>
|
||||
</div>
|
||||
<%= content_for :cancel_action do %>
|
||||
<%= render "onboardings/logout" %>
|
||||
<% end %>
|
||||
|
||||
<% placeholder_series_data = [
|
||||
<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0" data-controller="onboarding">
|
||||
<div>
|
||||
<div class="space-y-1 mb-6">
|
||||
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>
|
||||
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
|
||||
</div>
|
||||
|
||||
<div class="p-1 bg-alpha-black-25 mb-2 rounded-lg">
|
||||
<div class="bg-container p-4 rounded-lg flex gap-8 shadow-border-xs">
|
||||
<div class="space-y-2">
|
||||
<%= tag.p t(".example"), class: "text-secondary text-sm" %>
|
||||
<%= tag.p format_money(Money.new(2325.25, params[:currency] || @user.family.currency)), class: "text-primary font-medium text-2xl" %>
|
||||
<p class="text-sm">
|
||||
<span class="text-green-500 font-medium">+<%= format_money(Money.new(78.90, params[:currency] || @user.family.currency)) %></span>
|
||||
<span class="text-green-500 font-medium">(+<%= format_money(Money.new(6.39, params[:currency] || @user.family.currency)) %>)</span>
|
||||
<span class="text-secondary">as of <%= format_date(Date.parse("2024-10-23"), :default, format_code: params[:date_format] || @user.family.date_format) %></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<% placeholder_series_data = [
|
||||
{ date: Date.current - 14.days, value: 200 },
|
||||
{ date: Date.current - 13.days, value: 200 },
|
||||
{ date: Date.current - 12.days, value: 220 },
|
||||
|
|
@ -38,53 +45,54 @@
|
|||
{ date: Date.current, value: 265 }
|
||||
] %>
|
||||
|
||||
<% placeholder_series = Series.from_raw_values(placeholder_series_data) %>
|
||||
<% placeholder_series = Series.from_raw_values(placeholder_series_data) %>
|
||||
|
||||
<div class="flex items-center w-2/5">
|
||||
<div class="h-12 w-full">
|
||||
<div
|
||||
<div class="flex items-center w-2/5">
|
||||
<div class="h-12 w-full">
|
||||
<div
|
||||
id="previewChart"
|
||||
class="h-full w-full"
|
||||
data-controller="time-series-chart"
|
||||
data-time-series-chart-data-value="<%= placeholder_series.to_json %>"
|
||||
data-time-series-chart-use-labels-value="false"
|
||||
data-time-series-chart-use-tooltip-value="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-secondary text-xs mb-4"><%= t(".preview") %></p>
|
||||
<p class="text-secondary text-xs mb-4"><%= t(".preview") %></p>
|
||||
|
||||
<%= styled_form_with model: @user, data: { turbo: false } do |form| %>
|
||||
<%= form.hidden_field :onboarded_at, value: Time.current %>
|
||||
<%= form.hidden_field :redirect_to, value: "home" %>
|
||||
<%= styled_form_with model: @user, data: { turbo: false } do |form| %>
|
||||
<%= form.hidden_field :set_onboarding_preferences_at, value: Time.current %>
|
||||
<%= form.hidden_field :redirect_to, value: "goals" %>
|
||||
|
||||
<div class="space-y-4 mb-4">
|
||||
<%= form.fields_for :family do |family_form| %>
|
||||
<div class="mb-4">
|
||||
<%= form.select :theme, [["System", "system"], ["Light", "light"], ["Dark", "dark"]], { label: "Color theme" }, data: { action: "onboarding#setTheme" } %>
|
||||
</div>
|
||||
|
||||
<%= family_form.select :locale,
|
||||
<div class="space-y-4 mb-4">
|
||||
<%= form.fields_for :family do |family_form| %>
|
||||
|
||||
<%= family_form.select :locale,
|
||||
language_options,
|
||||
{ label: t(".locale"), required: true, selected: params[:locale] || @user.family.locale },
|
||||
{ data: { action: "onboarding#setLocale" } } %>
|
||||
|
||||
<%= family_form.select :currency,
|
||||
<%= family_form.select :currency,
|
||||
Money::Currency.as_options.map { |currency| [ "#{currency.name} (#{currency.iso_code})", currency.iso_code ] },
|
||||
{ label: t(".currency"), required: true, selected: params[:currency] || @user.family.currency },
|
||||
{ data: { action: "onboarding#setCurrency" } } %>
|
||||
|
||||
<%= family_form.select :date_format,
|
||||
<%= family_form.select :date_format,
|
||||
Family::DATE_FORMATS,
|
||||
{ label: t(".date_format"), required: true, selected: params[:date_format] || @user.family.date_format },
|
||||
{ data: { action: "onboarding#setDateFormat" } } %>
|
||||
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= form.submit t(".submit") %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= form.submit t(".submit") %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= render "layouts/shared/footer" %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<div class="bg-surface min-h-screen flex flex-col justify-between">
|
||||
<%= render "onboardings/header" %>
|
||||
|
||||
<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0">
|
||||
<div>
|
||||
<div class="space-y-1 mb-6">
|
||||
<h1 class="text-2xl font-medium md:text-2xl"><%= t(".title") %></h1>
|
||||
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
|
||||
</div>
|
||||
|
||||
<%= styled_form_with model: @user do |form| %>
|
||||
<%= form.hidden_field :redirect_to, value: @invitation ? "home" : "onboarding_preferences" %>
|
||||
<%= form.hidden_field :onboarded_at, value: Time.current if @invitation %>
|
||||
|
||||
<div class="space-y-4 mb-4">
|
||||
<p class="text-secondary text-xs hidden md:block"><%= t(".profile_image") %></p>
|
||||
<%= render "settings/user_avatar_field", form: form, user: @user %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:justify-between md:items-center md:gap-4 space-y-4 md:space-y-0 mb-4">
|
||||
<%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name"), container_class: "bg-container md:w-1/2 w-full", required: true %>
|
||||
<%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name"), container_class: "bg-container md:w-1/2 w-full", required: true %>
|
||||
</div>
|
||||
<% unless @invitation %>
|
||||
<div class="space-y-4 mb-4">
|
||||
<%= form.fields_for :family do |family_form| %>
|
||||
<%= family_form.text_field :name, placeholder: t(".household_name"), label: t(".household_name") %>
|
||||
|
||||
<%= family_form.select :country,
|
||||
country_options,
|
||||
{ label: t(".country") }, required: true %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= form.submit t(".submit") %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render "layouts/shared/footer" %>
|
||||
</div>
|
||||
|
|
@ -1,16 +1,51 @@
|
|||
<div class="bg-surface">
|
||||
<div class="h-screen flex flex-col items-center py-6">
|
||||
<div class="grow flex justify-center items-center flex-col max-w-sm w-full text-center">
|
||||
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
|
||||
<%= tag.h1 t(".title"), class: "text-3xl font-medium mb-2" %>
|
||||
<%= tag.p t(".message"), class: "text-sm text-secondary mb-6" %>
|
||||
<%= content_for :previous_path, onboarding_path %>
|
||||
|
||||
<%= render LinkComponent.new(
|
||||
text: t(".setup"),
|
||||
href: profile_onboarding_path,
|
||||
variant: "primary",
|
||||
full_width: true
|
||||
) %>
|
||||
<%= content_for :header_nav do %>
|
||||
<%= render "onboardings/onboarding_nav", user: @user %>
|
||||
<% end %>
|
||||
|
||||
<%= content_for :cancel_action do %>
|
||||
<%= render "onboardings/logout" %>
|
||||
<% end %>
|
||||
|
||||
<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0">
|
||||
<div>
|
||||
<div class="space-y-1 mb-6 text-center">
|
||||
<h1 class="text-2xl font-medium md:text-2xl">Let's set up your account</h1>
|
||||
<p class="text-secondary text-sm">First things first, let's get your profile set up.</p>
|
||||
</div>
|
||||
|
||||
<%= styled_form_with model: @user do |form| %>
|
||||
<%= form.hidden_field :redirect_to, value: @invitation ? "home" : "onboarding_preferences" %>
|
||||
<%= form.hidden_field :onboarded_at, value: Time.current if @invitation %>
|
||||
|
||||
<div class="mb-6">
|
||||
<%= render "settings/user_avatar_field", form: form, user: @user %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:justify-between md:items-center md:gap-4 space-y-4 md:space-y-0 mb-4">
|
||||
<%= form.text_field :first_name, placeholder: "First name", label: "First name", container_class: "bg-container md:w-1/2 w-full", required: true %>
|
||||
<%= form.text_field :last_name, placeholder: "Last name", label: "Last name", container_class: "bg-container md:w-1/2 w-full", required: true %>
|
||||
</div>
|
||||
|
||||
<% unless @invitation %>
|
||||
<div class="space-y-4 mb-4">
|
||||
<%= form.fields_for :family do |family_form| %>
|
||||
<%= family_form.text_field :name, placeholder: "Household name", label: "Household name" %>
|
||||
|
||||
<%= family_form.select :country,
|
||||
country_options,
|
||||
{ label: "Country" },
|
||||
required: true
|
||||
%>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= form.submit "Continue" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render "layouts/shared/footer" %>
|
||||
</div>
|
||||
|
|
|
|||
121
app/views/onboardings/trial.html.erb
Normal file
121
app/views/onboardings/trial.html.erb
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<%= content_for :previous_path, goals_onboarding_path %>
|
||||
|
||||
<%= content_for :header_nav do %>
|
||||
<%= render "onboardings/onboarding_nav", user: @user %>
|
||||
<% end %>
|
||||
|
||||
<%= content_for :cancel_action do %>
|
||||
<%= render "onboardings/logout" %>
|
||||
<% end %>
|
||||
|
||||
<%= content_for :footer do %>
|
||||
<%= render "layouts/shared/footer" %>
|
||||
<% end %>
|
||||
|
||||
<div class="grow flex flex-col gap-12 items-center justify-center">
|
||||
<div class="max-w-sm mx-auto flex flex-col items-center">
|
||||
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
|
||||
|
||||
<p class="text-xl lg:text-3xl text-primary font-display font-medium">
|
||||
Try Maybe for 14 days.
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl lg:text-3xl font-display text-secondary font-medium mb-2">
|
||||
No credit card required
|
||||
</h2>
|
||||
|
||||
<p class="text-sm text-secondary text-center mb-8">
|
||||
Starting the trial activates your account for Maybe. You won't need to enter payment details.
|
||||
</p>
|
||||
|
||||
<div class="w-full">
|
||||
<%= render ButtonComponent.new(
|
||||
text: "Try Maybe for 14 days",
|
||||
href: start_trial_subscription_path,
|
||||
full_width: true
|
||||
) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<h2 class="text-center text-lg lg:text-2xl font-medium text-primary">How your trial will work</h2>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<div class="rounded-xl p-1 bg-gray-400/20 theme-dark:bg-gray-500/20 flex flex-col justify-between items-center text-secondary">
|
||||
<%= render FilledIconComponent.new(icon: "unlock-keyhole", variant: :inverse) %>
|
||||
<%= render FilledIconComponent.new(icon: "bell", variant: :inverse) %>
|
||||
<%= render FilledIconComponent.new(icon: "credit-card", variant: :inverse) %>
|
||||
</div>
|
||||
|
||||
<div class="space-y-12">
|
||||
<div class="space-y-1.5 text-sm">
|
||||
<p class="text-primary font-medium">Today</p>
|
||||
<p class="text-secondary">You'll get free access to Maybe for 14 days</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5 text-sm">
|
||||
<p class="text-primary font-medium">In 13 days (<%= 13.days.from_now.strftime("%B %d") %>)</p>
|
||||
<p class="text-secondary">We'll notify you to remind you when your trial will end.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5 text-sm">
|
||||
<p class="text-primary font-medium">In 14 days (<%= 14.days.from_now.strftime("%B %d") %>)</p>
|
||||
<p class="text-secondary">Your trial ends — subscribe to continue using Maybe</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 max-w-2xl mx-auto">
|
||||
<h2 class="text-center text-lg lg:text-2xl font-medium text-primary">Here's what's included</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-12 gap-y-6 text-secondary">
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "landmark", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">More than 10,000 institutions to connect to</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "layers", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">Connect unlimited accounts and account types</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "line-chart", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">Performance and investment returns across portfolio</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "credit-card", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">Comprehensive transaction tracking experience</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="pl-2">
|
||||
<%= render "chats/ai_avatar" %>
|
||||
</div>
|
||||
<p class="text-sm text-primary text-center">Unlimited access and chats with Maybe AI</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "keyboard", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">Manual account tracking that works well</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "globe-2", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">Multiple currencies and near global coverage</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "ship", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">Early access to newly released features</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<%= render FilledIconComponent.new(icon: "messages-square", variant: :surface) %>
|
||||
<p class="text-sm text-primary text-center">Priority human support from team</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="space-y-1 mb-6 flex gap-4 justify-between items-center lg:items-start">
|
||||
<div class="space-y-1">
|
||||
<h1 class="text-xl lg:text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
|
||||
<p class="text-sm lg:text-base text-gray-500">Here's what's happening with your finances</p>
|
||||
<p class="text-sm lg:text-base text-secondary">Here's what's happening with your finances</p>
|
||||
</div>
|
||||
|
||||
<%= render LinkComponent.new(
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="h-full" lang="en">
|
||||
<head>
|
||||
<title><%= content_for(:title) || "🔒 Maybe Early Access" %></title>
|
||||
|
||||
<%= csrf_meta_tags %>
|
||||
<%= csp_meta_tag %>
|
||||
|
||||
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
|
||||
|
||||
<%= javascript_importmap_tags %>
|
||||
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
|
||||
|
||||
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Maybe">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<%= yield :head %>
|
||||
</head>
|
||||
|
||||
<body class="subpixel-antialiased h-full bg-black text-white flex flex-col bg-top bg-no-repeat bg-cover" style="background-image: url('<%= asset_path("bg-grid.png") %>');">
|
||||
<div class="grow flex items-center justify-center p-4 sm:p-6 md:p-8">
|
||||
<div class="w-full max-w-sm mx-auto text-center rounded-lg p-6">
|
||||
<%= image_tag "logo-squircle.svg", alt: "Maybe Logo", class: "w-16 h-16 sm:w-18 sm:h-18 mx-auto mb-6 sm:mb-8" %>
|
||||
<h1 class="text-2xl font-normal my-4">Maybe Early Access</h1>
|
||||
<% if @invite_codes_count > 0 %>
|
||||
<p class="text-base text-subdued">There <%= @invite_codes_count == 1 ? "is" : "are" %> <span class="text-white"><%= @invite_codes_count %> invite <%= "code".pluralize(@invite_codes_count) %></span> remaining.</p>
|
||||
<div class="bg-gray-900 border border-gray-800 p-2 rounded-xl my-4">
|
||||
<p class="text-sm text-subdued mt-1 mb-3 sm:mb-4">Your invite code is <span class="font-mono text-white"><%= @invite_code.token %></span></p>
|
||||
<p><%= link_to "Sign up with this code", new_registration_path(invite: @invite_code.token), class: "block w-full bg-container text-black py-2 px-3 rounded-lg no-underline text-sm sm:text-base hover:bg-gray-200 transition duration-150" %></p>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-subdued">You may need to refresh the page to get a new invite code if someone else claimed it before you.</p>
|
||||
|
||||
<p class="mt-4 sm:mt-6">
|
||||
<%= link_to early_access_path, class: "w-full block text-center justify-center inline-flex items-center text-white hover:bg-gray-800 p-2 rounded-md text-base transition duration-150", data: { turbo_method: :get } do %>
|
||||
<%= icon "refresh-cw", class: "mr-2" %>
|
||||
<span>Refresh page</span>
|
||||
<% end %>
|
||||
</p>
|
||||
<% else %>
|
||||
<p class="text-base text-subdued mb-6 sm:mb-8">Sorry, there are <span class="text-white">no invite codes</span> remaining. Join our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank", class: "text-white hover:text-gray-300" %> to get notified when new invite codes are available.</p>
|
||||
<p><%= link_to "Join Discord server", "https://link.maybe.co/discord", target: "_blank", class: "bg-container text-black px-3 py-2 rounded-md no-underline text-base hover:bg-gray-200 transition duration-150" %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="pb-6 sm:pb-10 text-center text-subdued text-sm">
|
||||
©2024 Maybe Finance, Inc.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,40 +1,41 @@
|
|||
<%# locals: (form:, user:) %>
|
||||
|
||||
<div class="flex md:flex-row flex-col md:items-center items-center gap-4" data-controller="profile-image-preview">
|
||||
<div class="relative flex justify-center items-center bg-container size-26 md:size-24 rounded-full border-primary border border-dashed overflow-hidden">
|
||||
|
||||
<%# The image preview once user has uploaded a new file %>
|
||||
<div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
|
||||
<img src="" alt="Preview" class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
|
||||
<%# The placeholder image for empty avatar field %>
|
||||
<div data-profile-image-preview-target="placeholderImage"
|
||||
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
|
||||
<div class="h-full w-full flex justify-center items-center bg-container">
|
||||
<%= icon "image-plus", size: "lg" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# The attached image if user has already uploaded one %>
|
||||
<div data-profile-image-preview-target="attachedImage"
|
||||
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "" : "hidden" %>">
|
||||
<% if user.profile_image.attached? %>
|
||||
<div class="h-full w-full">
|
||||
<%= render "settings/user_avatar", avatar_url: user.profile_image.url %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center gap-4" data-controller="profile-image-preview">
|
||||
<div class="relative">
|
||||
<button type="button"
|
||||
data-profile-image-preview-target="clearBtn"
|
||||
data-action="click->profile-image-preview#clearFileInput"
|
||||
class="<%= user.profile_image.attached? ? "" : "hidden" %> cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
|
||||
class="<%= user.profile_image.attached? ? "" : "hidden" %> z-50 cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
|
||||
<%= icon "x", size: "sm" %>
|
||||
</button>
|
||||
|
||||
<div class="relative flex justify-center items-center bg-surface-inset size-26 md:size-24 rounded-full border-primary border border-dashed overflow-hidden">
|
||||
<%# The image preview once user has uploaded a new file %>
|
||||
<div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
|
||||
<img src="" alt="Preview" class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
|
||||
<%# The placeholder image for empty avatar field %>
|
||||
<div data-profile-image-preview-target="placeholderImage"
|
||||
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
|
||||
<div class="h-full w-full flex justify-center items-center bg-surface-inset">
|
||||
<%= icon "image-plus", size: "lg" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# The attached image if user has already uploaded one %>
|
||||
<div data-profile-image-preview-target="attachedImage"
|
||||
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "" : "hidden" %>">
|
||||
<% if user.profile_image.attached? %>
|
||||
<div class="h-full w-full">
|
||||
<%= render "settings/user_avatar", avatar_url: user.profile_image.url %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:text-left text-center">
|
||||
<div class="text-center">
|
||||
<%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>
|
||||
|
||||
<%= form.label :profile_image, class: "px-3 py-2 rounded-lg text-sm hover:bg-surface-hover border border-secondary inline-flex items-center gap-2 cursor-pointer", data: { profile_image_preview_target: "uploadButton" } do %>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,25 @@
|
|||
<div class="space-y-4">
|
||||
<div class="p-3 shadow-border-xs bg-container 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">
|
||||
<%= icon "gem" %>
|
||||
</div>
|
||||
<%= render FilledIconComponent.new(
|
||||
icon: "gem",
|
||||
rounded: true,
|
||||
size: "lg"
|
||||
) %>
|
||||
|
||||
<div class="text-sm space-y-1">
|
||||
<% if @user.family.subscribed? || subscription_pending? %>
|
||||
<% if subscription_pending? %>
|
||||
<p class="text-primary">
|
||||
Your subscription is pending. You can still use Maybe+ while we process your subscription.
|
||||
</p>
|
||||
<% elsif @user.family.trialing? %>
|
||||
<p class="text-primary">
|
||||
You are currently trialing <span class="font-medium">Maybe+</span>
|
||||
<span class="text-secondary">
|
||||
(<%= @user.family.trial_remaining_days %> days remaining)
|
||||
</span>
|
||||
</p>
|
||||
<% elsif @user.family.subscribed? %>
|
||||
<p class="text-primary">You are currently subscribed to <span class="font-medium">Maybe+</span></p>
|
||||
<% else %>
|
||||
<p class="text-primary">You are currently <span class="font-medium">not subscribed</span></p>
|
||||
|
|
@ -18,24 +31,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<% if @user.family.subscribed? || subscription_pending? %>
|
||||
<% if @user.family.subscribed? %>
|
||||
<%= render LinkComponent.new(
|
||||
text: "Manage",
|
||||
icon: "external-link",
|
||||
variant: "primary",
|
||||
icon_position: "right",
|
||||
href: subscription_path,
|
||||
target: "_blank",
|
||||
rel: "noopener"
|
||||
) %>
|
||||
<% else %>
|
||||
<% elsif @user.family.trialing? && !subscription_pending? %>
|
||||
<%= render LinkComponent.new(
|
||||
text: "Subscribe",
|
||||
text: "Choose plan",
|
||||
variant: "primary",
|
||||
icon: "external-link",
|
||||
icon: "plus",
|
||||
icon_position: "right",
|
||||
href: new_subscription_path,
|
||||
target: "_blank",
|
||||
href: upgrade_subscription_path(view: "upgrade"),
|
||||
rel: "noopener") %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
<%= render DialogComponent.new do |dialog| %>
|
||||
<div class="rounded-xl" style="background-image: url('<%= asset_path("maybe-plus-background.svg") %>'); background-size: cover; background-position: center top;">
|
||||
<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 pt-2 rounded-xl">
|
||||
<div class="flex justify-center">
|
||||
<%= image_tag "maybe-plus-logo.png", class: "w-20" %>
|
||||
</div>
|
||||
|
||||
<h2 class="font-medium text-primary mb-2">Join Maybe+</h2>
|
||||
|
||||
<div class="text-secondary 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 one hour to claim your spot.</p>
|
||||
</div>
|
||||
|
||||
<%= render LinkComponent.new(
|
||||
text: "Upgrade to Maybe+",
|
||||
href: new_subscription_path,
|
||||
variant: "primary",
|
||||
full_width: true
|
||||
) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
data: { controller: "element-removal" } do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-primary">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-destructive">
|
||||
<%= icon "x", size: "xs" %>
|
||||
<%= icon "x", size: "xs", color: "white" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<%# locals: (message:, description: nil) %>
|
||||
|
||||
<%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs",
|
||||
<%= tag.div class: "relative flex gap-3 rounded-lg bg-container p-4 group w-full md:max-w-80 shadow-border-xs",
|
||||
data: {
|
||||
controller: "element-removal",
|
||||
action: "animationend->element-removal#remove"
|
||||
} do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-primary">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-success">
|
||||
<%= icon "check", size: "xs" %>
|
||||
<%= icon "check", size: "xs", color: "white" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
31
app/views/subscriptions/_plan_choice.html.erb
Normal file
31
app/views/subscriptions/_plan_choice.html.erb
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<%# locals: (plan:, form:, checked: false) %>
|
||||
|
||||
<% price = plan == "annual" ? 90 : 9 %>
|
||||
<% frequency = plan == "annual" ? "/year" : "/month" %>
|
||||
|
||||
<div class="relative">
|
||||
<%= form.radio_button :plan, plan, class: "peer sr-only", checked: checked %>
|
||||
<%= form.label "plan_#{plan}", class: class_names(
|
||||
"flex flex-col gap-1 p-4 cursor-pointer rounded-lg border border-primary hover:bg-container",
|
||||
"peer-checked:bg-container peer-checked:rounded-2xl peer-checked:border-solid peer-checked:ring-4 peer-checked:ring-shadow",
|
||||
"transition-all duration-300"
|
||||
) do %>
|
||||
<h3 class="text-sm text-secondary"><%= plan.titleize %></h3>
|
||||
|
||||
<div class="mt-auto flex items-end gap-1">
|
||||
<p class="font-display text-xl lg:text-3xl font-medium text-primary">$<%= price %><%= frequency %></p>
|
||||
|
||||
<% if plan == "annual" %>
|
||||
<span class="text-sm text-secondary mb-1">or <%= Money.new(price.to_f / 52).format %>/week</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-secondary">
|
||||
<% if plan == "annual" %>
|
||||
Billed annually, 2 months free
|
||||
<% else %>
|
||||
Billed monthly
|
||||
<% end %>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
55
app/views/subscriptions/upgrade.html.erb
Normal file
55
app/views/subscriptions/upgrade.html.erb
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<div class="flex flex-col h-full justify-between bg-surface">
|
||||
<nav class="p-4">
|
||||
<h1 class="sr-only">Upgrade</h1>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<%= render ButtonComponent.new(
|
||||
text: "Sign out",
|
||||
icon: "log-out",
|
||||
icon_position: :right,
|
||||
variant: "ghost",
|
||||
href: session_path(Current.session),
|
||||
method: :delete
|
||||
) %>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="grow flex flex-col items-center justify-center">
|
||||
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
|
||||
|
||||
<% if Current.family.trialing? %>
|
||||
<p class="text-xl lg:text-3xl text-primary font-display font-medium">Your trial has <%= Current.family.trial_remaining_days %> days remaining</p>
|
||||
<% else %>
|
||||
<p class="text-xl lg:text-3xl text-primary font-display font-medium">Your trial is over</p>
|
||||
<% end %>
|
||||
|
||||
<h2 class="text-xl lg:text-3xl font-display font-medium mb-2">
|
||||
<span class="text-secondary">Unlock</span>
|
||||
<span class="bg-gradient-to-r from-[#EABE7F] to-[#957049] bg-clip-text text-transparent">Maybe</span>
|
||||
<span class="text-secondary">today</span>
|
||||
</h2>
|
||||
|
||||
<p class="text-sm text-secondary mb-8">To continue using Maybe pick a plan below.</p>
|
||||
|
||||
<%= form_with url: new_subscription_path, method: :get, class: "max-w-xs", data: { turbo: false } do |form| %>
|
||||
<div class="space-y-4 mb-6">
|
||||
<%= render "subscriptions/plan_choice", form: form, plan: "annual", checked: params[:plan] == "annual" || params[:plan].blank? %>
|
||||
<%= render "subscriptions/plan_choice", form: form, plan: "monthly", checked: params[:plan] == "monthly" %>
|
||||
</div>
|
||||
|
||||
<div class="text-center space-y-2">
|
||||
<%= render ButtonComponent.new(
|
||||
text: "Subscribe and unlock Maybe",
|
||||
variant: "primary",
|
||||
full_width: true
|
||||
) %>
|
||||
|
||||
<p class="text-xs text-secondary">
|
||||
In the next step, you'll be redirected to Stripe which handles our billing.
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= render "layouts/shared/footer" %>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue