mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-04-24 15:37:12 -05:00
Merge pull request #118 from PretendoNetwork/feature-stripe-tiers-change-tier
Add tier change styling
This commit is contained in:
Jonathan Barrow
GitHub
commit
d3b0f100bc
|
|
@ -31,21 +31,22 @@
|
|||
border-radius: 100%;
|
||||
background: var(--btn-secondary);
|
||||
}
|
||||
.account-sidebar .user #download-cemu-files,
|
||||
.account-sidebar .user #account-upgrade {
|
||||
.account-sidebar .buttons a {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
padding: 20px 24px;
|
||||
background: #383f6b;
|
||||
margin: 24px 0 0;
|
||||
margin: 20px 0 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.account-sidebar .user #download-cemu-files p.caption,
|
||||
.account-sidebar .user #account-upgrade p.caption {
|
||||
margin: 15px 0 0;
|
||||
.account-sidebar .buttons a svg {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.account-sidebar .user p.cemu-warning {
|
||||
.account-sidebar .buttons a p.caption {
|
||||
margin: 0;
|
||||
}
|
||||
.account-sidebar .buttons p.cemu-warning {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
|
|
@ -117,13 +118,11 @@
|
|||
}
|
||||
|
||||
fieldset {
|
||||
position: relative;
|
||||
height: min-content;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
fieldset:disabled form label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.setting-card .server-selection {
|
||||
display: flex;
|
||||
|
|
@ -161,9 +160,11 @@ fieldset:disabled form label {
|
|||
background: #383f6b;
|
||||
}
|
||||
|
||||
.setting-card.sign-in-history a button {
|
||||
.setting-card button {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
padding: 12px 48px;
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
background: #383f6b;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
|
@ -14,6 +15,31 @@
|
|||
height: 1400px;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
padding: 6px 10px;
|
||||
background: var(--btn-secondary);
|
||||
border-radius: 24px;
|
||||
|
||||
transition: filter 150ms;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
}
|
||||
.back-arrow:hover {
|
||||
filter: brightness(1.5)
|
||||
}
|
||||
.back-arrow svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.back-arrow span {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.account-form-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
@ -164,8 +190,10 @@ label.tier p.price span {
|
|||
|
||||
form .button-wrapper {
|
||||
grid-column: 2 / span 1;
|
||||
position: relative;
|
||||
margin-top: 24px;
|
||||
}
|
||||
form button {
|
||||
button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
|
|
@ -179,21 +207,101 @@ form button {
|
|||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
pointer-events: none;
|
||||
filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */
|
||||
|
||||
transition: filter 300ms;
|
||||
}
|
||||
form .tier-radio:checked ~ .button-wrapper button {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
filter: none;
|
||||
}
|
||||
form button.disabled {
|
||||
pointer-events: none;
|
||||
filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
form button.unsubscribe {
|
||||
position: relative;
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
form button.unsubscribe.hidden {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
form button.unsubscribe:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
div.unsub-modal-wrapper,
|
||||
div.switch-tier-modal-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
div.unsub-modal-wrapper.hidden,
|
||||
div.switch-tier-modal-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
div.unsub-modal,
|
||||
div.switch-tier-modal {
|
||||
background: #393b5f;
|
||||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
width: min(660px, 90%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.unsub-modal h1,
|
||||
div.switch-tier-modal h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p.unsub-modal-caption,
|
||||
p.switch-tier-modal-caption {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
p.unsub-modal-caption span,
|
||||
p.switch-tier-modal-caption span {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.unsub-modal-button-wrapper,
|
||||
.switch-tier-modal-button-wrapper {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.unsub-modal-button-wrapper button,
|
||||
.switch-tier-modal-button-wrapper button {
|
||||
margin-left: 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
.unsub-modal-button-wrapper button.cancel,
|
||||
.switch-tier-modal-button-wrapper button.cancel {
|
||||
background: none;
|
||||
}
|
||||
.unsub-modal-button-wrapper button.confirm,
|
||||
.switch-tier-modal-button-wrapper button.confirm {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.account-form-wrapper {
|
||||
width: min(500px, 100%);
|
||||
margin-bottom: 120px;
|
||||
margin-bottom: 172px;
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -215,16 +323,28 @@ form .tier-radio:checked ~ .button-wrapper button {
|
|||
form .button-wrapper::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: -24px;
|
||||
left: -100vw;
|
||||
width: 200vw;
|
||||
height: 150%;
|
||||
height: 300%;
|
||||
background: #111531;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
div.unsub-modal {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
label.tier .tier-perks {
|
||||
width: 80%;
|
||||
}
|
||||
.back-arrow {
|
||||
padding: 6px;
|
||||
}
|
||||
.back-arrow span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
102
public/assets/js/upgrade.js
Normal file
102
public/assets/js/upgrade.js
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
const buttons = {
|
||||
submit: document.getElementById('submitButton'),
|
||||
unsubModal: {
|
||||
show: document.getElementById('unsubModalShowButton'),
|
||||
close: document.getElementById('unsubModalCloseButton'),
|
||||
confirm: document.getElementById('unsubModalConfirmButton'),
|
||||
},
|
||||
switchTierModal: {
|
||||
show: document.getElementById('switchTierShowButton'),
|
||||
close: document.getElementById('switchTierCloseButton'),
|
||||
confirm: document.getElementById('switchTierConfirmButton'),
|
||||
},
|
||||
};
|
||||
|
||||
const currentTierID = document.querySelector('form').dataset.currentTier;
|
||||
|
||||
const currentTierElement = document.querySelector(`#${currentTierID}`) || undefined;
|
||||
|
||||
// if the condition is met, we disable the submit button and enable the unsubscribe button
|
||||
function conditionalSubmitButton(condition, target) {
|
||||
if (condition) {
|
||||
buttons.submit.innerText = 'Already subscribed to this tier';
|
||||
buttons.unsubModal.show.innerText = `Unsubscribe from ${currentTierElement.dataset.tierName}`;
|
||||
buttons.submit.disabled = true;
|
||||
buttons.submit.classList.add('disabled');
|
||||
buttons.unsubModal.show.classList.remove('hidden');
|
||||
} else {
|
||||
buttons.submit.classList.remove('disabled');
|
||||
buttons.unsubModal.show.classList.add('hidden');
|
||||
buttons.submit.disabled = false;
|
||||
buttons.submit.innerText = `Subscribe to ${target.dataset.tierName}`;
|
||||
}
|
||||
}
|
||||
|
||||
// If the currect tier exists, select it from the list and disable the submit button.
|
||||
if (currentTierElement) {
|
||||
currentTierElement.click();
|
||||
conditionalSubmitButton(true);
|
||||
}
|
||||
|
||||
// If a tier is selected, conditionally enable the submit button.
|
||||
document.querySelector('form').addEventListener('change', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// If the selected tier is the current tier, set the button to disabled. Else we enable the button
|
||||
conditionalSubmitButton(e.target.value === currentTierElement?.value, e.target);
|
||||
});
|
||||
|
||||
// handle the submit button
|
||||
buttons.submit.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// If the user is already subscribed to another tier, we show the confirm modal, else if this is a new subscription we submit the form.
|
||||
if (currentTierElement) {
|
||||
const oldTierNameSpan = document.querySelector('.switch-tier-modal-caption span.oldtier');
|
||||
const newTierNameSpan = document.querySelector('.switch-tier-modal-caption span.newtier');
|
||||
oldTierNameSpan.innerText = currentTierElement.dataset.tierName;
|
||||
newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName;
|
||||
|
||||
document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden');
|
||||
} else {
|
||||
const form = document.querySelector('form');
|
||||
const selectedTier = form.querySelector('input[type="radio"]:checked').value;
|
||||
form.action = `/account/checkout/${selectedTier}`;
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
buttons.unsubModal.show.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const tierNameSpan = document.querySelector('.unsub-modal-caption span');
|
||||
tierNameSpan.innerText = currentTierElement.dataset.tierName;
|
||||
|
||||
// Show the unsubscribe modal
|
||||
document.querySelector('.unsub-modal-wrapper').classList.remove('hidden');
|
||||
});
|
||||
buttons.unsubModal.close.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide the unsubscribe modal
|
||||
document.querySelector('.unsub-modal-wrapper').classList.add('hidden');
|
||||
});
|
||||
buttons.unsubModal.confirm.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
/* unsub logic here */
|
||||
alert('lol unsubbed');
|
||||
});
|
||||
|
||||
buttons.switchTierModal.close.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide the switch tier modal
|
||||
document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden');
|
||||
});
|
||||
buttons.switchTierModal.confirm.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
/* tier switching logic here */
|
||||
alert('lol switched tier');
|
||||
});
|
||||
|
|
@ -193,8 +193,6 @@ router.get('/', async (request, response) => {
|
|||
renderData.discordAuthURL = discordAuthURL;
|
||||
}
|
||||
|
||||
renderData.isTester = false;
|
||||
|
||||
response.render('account/account', renderData);
|
||||
});
|
||||
|
||||
|
|
@ -524,7 +522,8 @@ router.get('/upgrade', async (request, response) => {
|
|||
layout: 'main',
|
||||
locale: util.getLocale(request.locale.region, request.locale.language),
|
||||
localeString: request.locale.toString(),
|
||||
error: request.cookies.error
|
||||
error: request.cookies.error,
|
||||
currentTier: 'price_1LBnZADOJlJAaQQ3pEUjNWbY' // To be replaced
|
||||
};
|
||||
|
||||
const { data: prices } = await stripe.prices.list();
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
<img src="{{account.mii.image_url}}" class="mii" />
|
||||
<p class="miiname">{{account.mii.name}}</p>
|
||||
<p class="username" value="{{account.username}}">PNID: {{account.username}}</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button secondary" id="download-cemu-files" href="/account/online-files" download>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
|
||||
<p class="caption">Download account files</p>
|
||||
|
|
@ -17,7 +19,7 @@
|
|||
</a>
|
||||
|
||||
<a class="button secondary" id="account-upgrade" href="/account/upgrade">
|
||||
<p class="caption">Upgrade Account</p>
|
||||
<p class="caption">Upgrade account</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,9 +58,8 @@
|
|||
</div>
|
||||
|
||||
<div class="setting-card">
|
||||
<h2 class="header">Server Environment</h2>
|
||||
{{#if isTester}}
|
||||
<fieldset>
|
||||
<h2 class="header">Server environment</h2>
|
||||
<fieldset {{#unless isTester}}disabled{{/unless}}>
|
||||
<form class="server-selection" id="server">
|
||||
<input type="radio" id="prod" name="server_selection" value="prod" checked="{{ eq account.server_access_level 'prod'}}">
|
||||
<label for="prod">
|
||||
|
|
@ -72,6 +73,7 @@
|
|||
</svg>
|
||||
<h2>Production</h2>
|
||||
</label>
|
||||
{{#if isTester}}
|
||||
<input type="radio" id="beta" name="server_selection" value="beta" checked="{{ neq account.server_access_level 'prod'}}">
|
||||
<label for="beta">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -79,20 +81,14 @@
|
|||
</svg>
|
||||
<h2>Beta</h2>
|
||||
</label>
|
||||
{{/if}}
|
||||
</form>
|
||||
</fieldset>
|
||||
{{#if discordUser}}
|
||||
<p>Connected to Discord as {{ discordUser.username }}#{{ discordUser.discriminator }}</p>
|
||||
<button class="button secondary" id="remove-discord-connection">Remove Discord account</button>
|
||||
{{else}}
|
||||
<a href="{{ discordAuthURL }}">
|
||||
<button class="button secondary" id="link-discord-account">Link Discord account</button>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<p>Account is not a beta tester, locked to production servers.</p>
|
||||
{{#unless isTester}}
|
||||
<p>Beta servers are exclusive to beta testers.<br>To become a beta tester, upgrade to a higher account tier.</p>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<p>Your current tier (insert current tier{{currentTier}}) gives you beta server access. Cool!</p>
|
||||
{{/unless}}
|
||||
</div>
|
||||
|
||||
<h2 class="section-header" id="security">Sign in and security</h2>
|
||||
|
|
@ -132,13 +128,25 @@
|
|||
</div>
|
||||
|
||||
<h2 class="section-header" id="other">Other settings</h2>
|
||||
<div class="setting-card span-both-columns">
|
||||
<div class="setting-card">
|
||||
<h2 class="header">Discord</h2>
|
||||
{{#if discordUser}}
|
||||
<p>Connected to Discord as {{ discordUser.username }}#{{ discordUser.discriminator }}</p>
|
||||
<button class="button secondary" id="remove-discord-connection">Remove Discord account</button>
|
||||
{{else}}
|
||||
<p>To link your Discord account, run /whatever in the <a href="https://invite.gg/pretendo" >Discord server</a></p>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="setting-card">
|
||||
<h2 class="header">Newsletter</h2>
|
||||
<form id="other">
|
||||
<input type="checkbox" id="marketing" name="marketing" {{#if account.flags.marketing}}checked{{/if}}>
|
||||
<label for="marketing">Receive project updates via email (you can opt-out at any time)</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{> footer }}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<link rel="stylesheet" href="/assets/css/upgrade.css" />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
|
||||
<a href="/account" class="back-arrow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
||||
<span>Back</span>
|
||||
</a>
|
||||
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
|
|
@ -30,9 +35,7 @@
|
|||
<h1 class="title dot">Upgrade</h1>
|
||||
<p class="caption">Subscribing to a tier gives you access to our developer chats and, depending on the tier,
|
||||
to our beta servers. Please someone reword this, it sucks. No fr.</p>
|
||||
|
||||
|
||||
<form method="post">
|
||||
<form method="post" data-current-tier="{{currentTier}}">
|
||||
{{#each tiers}}
|
||||
<input type="radio" class="tier-radio" data-tier-name="{{this.name}}" name="tier" value="{{this.price_id}}" id="{{this.price_id}}" />
|
||||
<label class="tier" for="{{this.price_id}}">
|
||||
|
|
@ -56,30 +59,37 @@
|
|||
</p>
|
||||
</label>
|
||||
{{/each}}
|
||||
<div class="button-wrapper">
|
||||
<button type="submit" id="submitButton">
|
||||
Select a tier
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="button-wrapper">
|
||||
<button class="disabled" type="submit" id="submitButton">Select a tier</button>
|
||||
<button class="unsubscribe hidden" id="unsubModalShowButton">Unsubscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="unsub-modal-wrapper hidden">
|
||||
<div class="unsub-modal">
|
||||
<h1 class="title dot">Unsubscribe</h1>
|
||||
<p class="unsub-modal-caption">Are you sure you want to unsubscribe from <span>tiername</span>?
|
||||
You will lose access to the perks associated with that tier.</p>
|
||||
<div class="unsub-modal-button-wrapper">
|
||||
<button class="cancel" id="unsubModalCloseButton">Cancel</button>
|
||||
<button class="confirm" id="unsubModalConfirmButton">Unsubscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="switch-tier-modal-wrapper hidden">
|
||||
<div class="switch-tier-modal">
|
||||
<h1 class="title dot">Change tier</h1>
|
||||
<p class="switch-tier-modal-caption">Are you sure you want to unsubscribe
|
||||
from <span class="oldtier">oldtiername</span> and subscribe to <span class="newtier">newtiername</span>?</p>
|
||||
<div class="switch-tier-modal-button-wrapper">
|
||||
<button class="cancel" id="switchTierCloseButton">Cancel</button>
|
||||
<button class="confirm" id="switchTierConfirmButton">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelector('#submitButton').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const form = document.querySelector('form');
|
||||
const selectedTier = form.querySelector('input[type="radio"]:checked').value;
|
||||
form.action = `/account/checkout/${selectedTier}`;
|
||||
form.submit();
|
||||
});
|
||||
|
||||
document.querySelector('form').addEventListener('change', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const clickedTierID = e.srcElement.id;
|
||||
const clickedTierName = e.srcElement.dataset.tierName;
|
||||
document.querySelector('#submitButton').innerText = `Subscribe to ${clickedTierName}`;
|
||||
});
|
||||
</script>
|
||||
<script src="/assets/js/upgrade.js" />
|
||||
Loading…
Reference in New Issue
Block a user