Change tier

public/assets/css/account.css

@@ -31,7 +31,8 @@
   border-radius: 100%;
   background: var(--btn-secondary);
 }
-.account-sidebar .user #download-cemu-files {
+.account-sidebar .user #download-cemu-files,
+.account-sidebar .user #account-upgrade {
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -40,7 +41,8 @@
   margin: 24px 0 0;
   text-decoration: none;
 }
-.account-sidebar .user #download-cemu-files p.download-caption {
+.account-sidebar .user #download-cemu-files p.caption,
+.account-sidebar .user #account-upgrade p.caption {
   margin: 15px 0 0;
 }
 .account-sidebar .user p.cemu-warning {
@@ -152,7 +154,7 @@ fieldset:disabled form label {
   color: var(--text);
 }
 
-.setting-card #remove-discord-connection {
+.setting-card #link-discord-account {
   width: 100%;
   padding: 12px 48px;
   cursor: pointer;

src/routers/account.js

@@ -29,7 +29,7 @@ router.get('/', async (request, response) => {
 	}
 
 	const { upgrade_success } = request.query;
-	console.log(upgrade_success);
+
 	const stripe = {};
 	if (upgrade_success === 'true') {
 		stripe.showNotice = true;
@@ -193,6 +193,8 @@ router.get('/', async (request, response) => {
 		renderData.discordAuthURL = discordAuthURL;
 	}
 
+	renderData.isTester = false;
+
 	response.render('account/account', renderData);
 });
 
@@ -616,16 +618,48 @@ router.post('/checkout/:priceId', async (request, response) => {
 
 	await database.PNID.updateOne({ pid }, {
 		$set: {
-			connections: {
-				stripe: {
-					customer_id: customer.id // ensure PNID always has latest customer ID
-				}
-			}
+			'connections.stripe.customer_id': customer.id // ensure PNID always has latest customer ID
 		}
 	}, { upsert: true }).exec();
 
 	const priceId = request.params.priceId;
 
+	const pnid = await database.PNID.findOne({ pid });
+
+	if (pnid.get('access_level') >= 2) {
+		response.cookie('error', 'Staff members do not need to purchase tiers', { domain: '.pretendo.network' });
+		return response.redirect('/account');
+	}
+
+	const stripeConnection = pnid.get('connections.stripe');
+
+	if (stripeConnection.subscription_id) {
+		// User already has a subscription with us
+		if (stripeConnection.price_id === priceId) {
+			response.cookie('error', 'Already subscribed to this tier', { domain: '.pretendo.network' });
+			return response.redirect('/account');
+		}
+
+		try {
+			const subscription = await stripe.subscriptions.retrieve(stripeConnection.subscription_id);
+			stripe.subscriptions.update(stripeConnection.subscription_id, {
+				cancel_at_period_end: false,
+				proration_behavior: 'always_invoice',
+				items: [{
+					id: subscription.items.data[0].id,
+					price: priceId,
+				}]
+			});
+
+			return response.redirect('/account?upgrade_success=true');
+		} catch (error) {
+			// Maybe we need a dedicated error page?
+			// Or handle this as not cookies?
+			response.cookie('error', error.message, { domain: '.pretendo.network' });
+			return response.redirect('/account');
+		}
+	}
+
 	try {
 		const session = await stripe.checkout.sessions.create({
 			line_items: [
@@ -643,7 +677,7 @@ router.post('/checkout/:priceId', async (request, response) => {
 		return response.redirect(303, session.url);
 	} catch (error) {
 		// Maybe we need a dedicated error page?
-		// O handle this as not cookies?
+		// Or handle this as not cookies?
 		response.cookie('error', error.message, { domain: '.pretendo.network' });
 		return response.redirect('/account');
 	}

views/account/account.handlebars

@@ -12,9 +12,13 @@
 				<p class="username" value="{{account.username}}">PNID: {{account.username}}</p>
 				<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="download-caption">Download account files</p>
+					<p class="caption">Download account files</p>
 					<p class="cemu-warning">(will not work on Nintendo Network)</p>
 				</a>
+
+				<a class="button secondary" id="account-upgrade" href="/account/upgrade">
+					<p class="caption">Upgrade Account</p>
+				</a>
 			</div>
 		</div>
 
@@ -52,8 +56,8 @@
 			</div>
 
 			<div class="setting-card">
-				<h2 class="header">Beta access</h2>
-				{{#if isTester}}
+				<h2 class="header">Server Environment</h2>
+			{{#if isTester}}
 				<fieldset>
 					<form class="server-selection" id="server">
 						<input type="radio" id="prod" name="server_selection" value="prod" checked="{{ eq account.server_access_level 'prod'}}">
@@ -81,10 +85,13 @@
 					<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 gain access to the developer chats, run /command in the server.</p>
+					<a href="{{ discordAuthURL }}">
+						<button class="button secondary" id="link-discord-account">Link Discord account</button>
+					</a>
 				{{/if}}
 			{{else}}
-				<p>Beta servers are exclusive to testers. To upgrade to a higher tier, click <a href="/account/upgrade">here</a>.</p>
+				<p>Account is not a beta tester, locked to production servers.</p>
+				<p>Beta servers are exclusive to beta testers.<br>To become a beta tester, upgrade to a higher account tier.</p>
 			{{/if}}
 			</div>
 			

views/account/upgrade.handlebars

@@ -26,43 +26,43 @@
 				</g>
 			</svg>
 		</a>
-  
+
 		<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">
-      		{{#each tiers}}
+		<form method="post">
+			{{#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}}">
+				<label class="tier" for="{{this.price_id}}">
 					<div class="tier-thumbnail">
-          				<img src="{{this.thumbnail}}" width="100%" height="auto" alt="Tier icon" />
+						<img src="{{this.thumbnail}}" width="100%" height="auto" alt="Tier icon" />
 					</div>
-          			<div class="tier-text">
+					<div class="tier-text">
 						<p class="tier-name">{{this.name}}</p>
 						<div class="tier-perks">
 							{{#each this.perks}}
 
 								<div>
 									<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-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-            						<p>{{this}}</p>
+								<p>{{this}}</p>
 								</div>
 							{{/each}}
 						</div>
-          			</div>
+					</div>
 					<p class="price">
 						<span>{{this.price}}</span> / month
 					</p>
-       			</label>
-      		{{/each}}
+				</label>
+			{{/each}}
 			<div class="button-wrapper">
 				<button type="submit" id="submitButton">
 					Select a tier
 				</button>
 			</div>
-    	</form>
-  	</div>
+		</form>
+	</div>
 </div>
 
 <script>