user upgrades: update upgrade landing page.

* Add a frequently asked questions section.
* Add nicer looking upgrade buttons.
* Format the page nicer.
* Prevent users from attempting invalid upgrades on users that are
  already Platinum or above.
This commit is contained in:
evazion
2020-12-25 00:27:08 -06:00
parent 058d71aa30
commit 069231a33b
9 changed files with 283 additions and 147 deletions

View File

@@ -1,15 +1,18 @@
class UserUpgradesController < ApplicationController
helper_method :user
respond_to :js, :html
def create
@user_upgrade = authorize UserUpgrade.create(recipient: user, purchaser: CurrentUser.user, status: "pending", upgrade_type: params[:upgrade_type])
@user_upgrade = authorize UserUpgrade.create(recipient: recipient, purchaser: CurrentUser.user, status: "pending", upgrade_type: params[:upgrade_type])
@checkout = @user_upgrade.create_checkout!
respond_with(@user_upgrade)
end
def new
@user_upgrade = authorize UserUpgrade.new(recipient: recipient, purchaser: CurrentUser.user)
@recipient = @user_upgrade.recipient
respond_with(@user_upgrade)
end
def show
@@ -17,7 +20,9 @@ class UserUpgradesController < ApplicationController
respond_with(@user_upgrade)
end
def user
private
def recipient
if params[:user_id]
User.find(params[:user_id])
else

View File

@@ -118,6 +118,17 @@ table tfoot {
margin-top: 2em;
}
details {
border-bottom: 1px solid var(--details-border);
summary {
cursor: pointer;
user-select: none;
outline: none;
line-height: 2em;
}
}
.fineprint {
color: var(--muted-text-color);
font-style: italic;

View File

@@ -35,9 +35,12 @@
--quick-search-form-background: var(--body-background-color);
--user-upgrade-basic-background-color: #F5F5FF;
--user-upgrade-gold-background-color: #FFF380;
--user-upgrade-platinum-background-color: #EEE;
--user-upgrade-table-row-hover-background-color: #FEF;
--user-upgrade-button-text-color: white;
--user-upgrade-button-background-color: var(--link-color);
--user-upgrade-button-hover-background-color: hsl(213, 100%, 40%);
--table-header-border: 2px solid #666;
--table-row-border: 1px solid #CCC;
@@ -72,6 +75,8 @@
--comment-sticky-background-color: var(--subnav-menu-background-color);
--details-border: #DDD;
--post-tooltip-background-color: var(--body-background-color);
--post-tooltip-border-color: hsla(210, 100%, 3%, 0.15);
--post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10);
@@ -157,7 +162,8 @@
--bulk-update-request-failed-color: red;
--login-link-color: #E00;
--footer-border: 1px solid #EEE;
--footer-border: 1px solid #DDD;
--details-border: #DDD;
--jquery-ui-widget-content-background: var(--body-background-color);
--jquery-ui-widget-content-text-color: var(--text-color);
@@ -255,6 +261,7 @@ body[data-current-user-theme="dark"] {
--subnav-menu-background-color: var(--grey-2);
--responsive-menu-background-color: var(--grey-3);
--footer-border: 1px solid var(--grey-3);
--details-border: var(--grey-3);
--table-header-border: 2px solid var(--grey-3);
--table-even-row-background: var(--grey-2);
@@ -419,9 +426,12 @@ body[data-current-user-theme="dark"] {
--uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--user-upgrade-gold-background-color: var(--yellow-0);
--user-upgrade-basic-background-color: var(--grey-2);
--user-upgrade-gold-background-color: var(--indigo-0);
--user-upgrade-platinum-background-color: var(--blue-0);
--user-upgrade-table-row-hover-background-color: transparent;
--user-upgrade-button-text-color: white;
--user-upgrade-button-background-color: var(--link-color);
--user-upgrade-button-hover-background-color: var(--link-hover-color);
--wiki-page-other-name-background-color: var(--grey-3);
--wiki-page-versions-diff-del-background: var(--red-0);

View File

@@ -1,43 +1,66 @@
div#c-user-upgrades {
div#a-new {
form.stripe {
display: inline;
}
margin: 0 auto;
div.section {
margin-bottom: 2em;
}
div#feature-comparison {
overflow: hidden;
* {
margin-bottom: 1em;
}
table {
width: 100%;
h1 {
text-align: center;
}
colgroup {
width: 10em;
}
.login-button, form.button_to input[type="submit"] {
display: inline-block;
colgroup#gold {
background-color: var(--user-upgrade-gold-background-color);
}
color: var(--user-upgrade-button-text-color);
background-color: var(--user-upgrade-button-background-color);
colgroup#platinum {
background-color: var(--user-upgrade-platinum-background-color);
}
border: none;
border-radius: 4px;
padding: 0.75em;
td, th {
text-align: center;
vertical-align: top;
padding: 0.5em 0;
}
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
tbody {
tr:hover {
background-color: var(--user-upgrade-table-row-hover-background-color);
}
}
&:hover:not([disabled]) {
background-color: var(--user-upgrade-button-hover-background-color);
box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)
}
&[disabled] {
background-color: grey;
cursor: default;
}
}
table#feature-comparison {
width: 100%;
th {
font-weight: bold;
}
colgroup {
width: 10em;
}
colgroup#basic {
background-color: var(--user-upgrade-basic-background-color);
}
colgroup#gold {
background-color: var(--user-upgrade-gold-background-color);
}
colgroup#platinum {
background-color: var(--user-upgrade-platinum-background-color);
}
td, th {
text-align: center;
vertical-align: top;
padding: 0.5em 0;
}
}
}

View File

@@ -14,6 +14,14 @@ class UserUpgrade < ApplicationRecord
complete: 20
}
def self.enabled?
stripe_secret_key.present? && stripe_publishable_key.present? && stripe_webhook_secret.present?
end
def self.stripe_secret_key
Danbooru.config.stripe_secret_key
end
def self.stripe_publishable_key
Danbooru.config.stripe_publishable_key
end

View File

@@ -3,6 +3,10 @@ class UserUpgradePolicy < ApplicationPolicy
user.is_member?
end
def new?
UserUpgrade.enabled?
end
def show?
record.recipient == user || record.purchaser == user || user.is_owner?
end

View File

@@ -6,116 +6,165 @@
<div id="c-user-upgrades">
<div id="a-new" class="fixed-width-container">
<h1>Upgrade Account</h1>
<% unless params[:user_id] %>
<p class="copy">Want more searching power? Upgrade your account and become a power user of the best database of anime artwork on the internet.</p>
<% if @user_upgrade.is_gift? %>
<h1>Gift Account Upgrade</h1>
<div id="feature-comparison">
<table>
<thead>
<tr>
<th></th>
<th>Basic</th>
<th>Gold</th>
<th>Platinum</th>
</tr>
</thead>
<tbody>
<colgroup id="labels"></colgroup>
<colgroup id="basic"></colgroup>
<colgroup id="gold"></colgroup>
<colgroup id="platinum"></colgroup>
<tr>
<td>Cost</td>
<td>Free</td>
<td>
<%= cents_to_usd(UserUpgrade.gold_price) %>
<div class="fineprint">One time fee</div>
</td>
<td>
<%= cents_to_usd(UserUpgrade.platinum_price) %>
<div class="fineprint">One time fee</div>
</td>
</tr>
<tr>
<td>Tag Limit</td>
<td>2</td>
<td><%= Danbooru.config.base_tag_query_limit %></td>
<td><%= Danbooru.config.base_tag_query_limit*2 %></td>
</tr>
<tr>
<td>Favorite Limit</td>
<td>10,000</td>
<td>20,000</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Favorite Groups</td>
<td>3</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>Page Limit</td>
<td>1,000</td>
<td>2,000</td>
<td>5,000</td>
</tr>
<tr>
<td>Saved Searches</td>
<td>250</td>
<td>250</td>
<td>1,000</td>
</tr>
<tr>
<td>See Hidden Tags</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Search Timeout</td>
<td>3 sec</td>
<td>6 sec</td>
<td>9 sec</td>
</tr>
</tbody>
</table>
</div>
<% if @user_upgrade.recipient.is_platinum? %>
<p><%= link_to_user @recipient %> is already above Platinum level and can't be upgraded!</p>
<% else %>
<h6>You are gifting this upgrade to <%= link_to_user @user_upgrade.recipient %>.</h6>
<% end %>
<% else %>
<h1>Upgrade Account</h1>
<p>Upgrading your account gives you exclusive benefits and helps support
<%= Danbooru.config.canonical_app_name %>. Your support helps keep the
site ad-free for everyone!</p>
<p>You can also gift an account upgrade to someone else. Just go to
their profile page and look for a "Gift Upgrade" link.</p>
<% end %>
<div class="section">
<% if params[:user_id] %>
<p>You are gifting this account upgrade to <%= link_to user.pretty_name, user_path(params[:user_id]) %>.</p>
<% else %>
<p>You can also upgrade someone else's account for the same price. The easiest way is to go to their profile page and look for a "Gift Upgrade" link.</p>
<% end %>
</div>
<% if Danbooru.config.stripe_publishable_key %>
<% if CurrentUser.is_anonymous? %>
<p><%= link_to "Sign up", new_user_path %> or <%= link_to "login", login_path(url: new_user_upgrade_path) %> first to upgrade your account.</p>
<% elsif CurrentUser.safe_mode? %>
<div class="section">
<p>You can pay with a credit or debit card. Safebooru uses <a href="https://www.stripe.com">Stripe</a>
as a payment intermediary so none of your personal information will be stored on the site.</p>
<% if user.level == User::Levels::MEMBER %>
<p><%= button_to "Upgrade to Gold", user_upgrades_path(user_id: user.id, upgrade_type: "gold"), remote: true, disable_with: "Redirecting..." %></p>
<p><%= button_to "Upgrade to Platinum", user_upgrades_path(user_id: user.id, upgrade_type: "platinum"), remote: true, disable_with: "Redirecting..." %></p>
<% elsif user.level == User::Levels::GOLD %>
<p><%= button_to "Upgrade Gold to Platinum", user_upgrades_path(user_id: user.id, upgrade_type: "gold_to_platinum"), remote: true, disable_with: "Redirecting..." %></p>
<table id="feature-comparison">
<thead>
<tr>
<th></th>
<th>Basic</th>
<th>Gold</th>
<th>Platinum</th>
</tr>
</thead>
<tbody>
<colgroup id="labels"></colgroup>
<colgroup id="basic"></colgroup>
<colgroup id="gold"></colgroup>
<colgroup id="platinum"></colgroup>
<tr>
<td></td>
<td>Free</td>
<td>
<%= cents_to_usd(UserUpgrade.gold_price) %>
<div class="fineprint">One time fee</div>
</td>
<td>
<%= cents_to_usd(UserUpgrade.platinum_price) %>
<div class="fineprint">One time fee</div>
</td>
</tr>
<tr>
<td>Tag Limit</td>
<td>2</td>
<td><%= Danbooru.config.base_tag_query_limit %></td>
<td><%= Danbooru.config.base_tag_query_limit*2 %></td>
</tr>
<tr>
<td>See Hidden Tags</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Page Limit</td>
<td>1,000</td>
<td>2,000</td>
<td>5,000</td>
</tr>
<tr>
<td>Favorite Limit</td>
<td>10,000</td>
<td>20,000</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Favorite Groups</td>
<td>3</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>Saved Searches</td>
<td>250</td>
<td>250</td>
<td>1,000</td>
</tr>
<tr>
<td>Search Timeout</td>
<td>3 sec</td>
<td>6 sec</td>
<td>9 sec</td>
</tr>
<tr>
<td></td>
<% if @user_upgrade.purchaser.is_anonymous? %>
<td><%= link_to "Login", login_path(url: new_user_upgrade_path), class: "login-button" %></td>
<td><%= link_to "Get #{Danbooru.config.canonical_app_name} Gold", login_path(url: new_user_upgrade_path), class: "login-button" %></td>
<td><%= link_to "Get #{Danbooru.config.canonical_app_name} Platinum", login_path(url: new_user_upgrade_path), class: "login-button" %></td>
<% elsif @recipient.level == User::Levels::MEMBER %>
<td></td>
<td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold"), remote: true, disable_with: "Redirecting..." %></td>
<td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "platinum"), remote: true, disable_with: "Redirecting..." %></td>
<% elsif @recipient.level == User::Levels::GOLD %>
<td></td>
<td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, disabled: true %></td>
<td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold_to_platinum"), remote: true, disable_with: "Redirecting..." %></td>
<% else %>
<td></td>
<td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, disabled: true %></td>
<td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", nil, disabled: true %></td>
<% end %>
</div>
<% else %>
<div class="section">
<p>You can pay with a credit or debit card on
<%= link_to "Safebooru", new_user_upgrade_url(user_id: user.id, host: "safebooru.donmai.us", protocol: "https") %>.
Your account will then also be upgraded on Danbooru. You can login to
Safebooru with the same username and password you use on Danbooru.</p>
</div>
<% end %>
<% end %>
</tr>
</tbody>
</table>
<h2>Frequently Asked Questions</h2>
<div id="frequently-asked-questions">
<details>
<summary>What are the benefits of <%= Danbooru.config.canonical_app_name %> Gold?</summary>
<p><%= Danbooru.config.canonical_app_name %> Gold lets you do more
complicated searches, and it lets you see hidden tags that non-Gold users
can't see. You can search more tags at once, browser deeper in search
results, and also keep more favorites, favorite groups, and saved searches.</p>
</details>
<details>
<summary>What are the benefits of <%= Danbooru.config.canonical_app_name %> Platinum?</summary>
<p>Platinum is like Gold, but it lets you search even more tags at once,
and keep even more favorites, favorite groups, and saved searches.</p>
</details>
<details>
<summary>What payment methods do you support?</summary>
<p>We support all major credit and debit cards, including international
cards. Payments are securely handled by <a href="https://www.stripe.com">Stripe</a>.
We don't support PayPal or Bitcoin at this time.</p>
</details>
<details>
<summary>Is this a subscription?</summary>
<p>No, this is not a subscription. This is a one-time payment. You pay
only once and keep the upgrade forever.</p>
</details>
<details>
<summary>If I upgrade to Gold first, can I upgrade to Platinum later?</summary>
<p>Yes, if you have a Gold account, you can always upgrade to a Platinum
account later. You don't have to pay full price to upgrade from Gold to
Platinum. You only have to pay the difference.</p>
</details>
<details>
<summary>What is your refund policy?</summary>
<p>You can <%= link_to "contact us", contact_path %> to request a refund
for any reason within 48 hours of your purchase.</p>
</details>
</div>
</div>
</div>

View File

@@ -75,8 +75,13 @@
<th>Level</th>
<td>
<%= user.level_string %>
<% if CurrentUser.user == user && !CurrentUser.is_gold? %>
(<%= link_to "upgrade", new_user_upgrade_path %>)
<% if !user.is_platinum? %>
<% if CurrentUser.user == user %>
(<%= link_to "Upgrade account", new_user_upgrade_path %>)
<% else %>
(<%= link_to "Gift upgrade", new_user_upgrade_path(user_id: user.id) %>)
<% end %>
<% end %>
</td>
</tr>

View File

@@ -3,20 +3,41 @@ require 'test_helper'
class UserUpgradesControllerTest < ActionDispatch::IntegrationTest
context "The user upgrades controller" do
context "new action" do
should "render for a self upgrade" do
should "render for a self upgrade to Gold" do
@user = create(:user)
get_auth new_user_upgrade_path, @user
assert_response :success
end
should "render for a gift upgrade" do
should "render for a self upgrade to Platinum" do
@user = create(:gold_user)
get_auth new_user_upgrade_path, @user
assert_response :success
end
should "render for a gifted upgrade to Gold" do
@recipient = create(:user)
get_auth new_user_upgrade_path(user_id: @recipient.id), create(:user)
assert_response :success
end
should "render for a gifted upgrade to Platinum" do
@recipient = create(:gold_user)
get_auth new_user_upgrade_path(user_id: @recipient.id), create(:user)
assert_response :success
end
should "render for an invalid gifted upgrade to a user who is already Platinum" do
@recipient = create(:platinum_user)
get_auth new_user_upgrade_path(user_id: @recipient.id), create(:user)
assert_response :success
end
should "render for an anonymous user" do
get new_user_upgrade_path