mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 15:35:22 +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:
parent
79b4a3769b
commit
a51c4d2cba
53 changed files with 847 additions and 372 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue