Add a QR code for PayPal subscriptions on Home

webclient/package.json

@@ -15,14 +15,15 @@
 		"react-datetime": "~2.16.3",
 		"react-dom": "^16.13.1",
 		"react-image-crop": "^8.6.4",
+		"react-qr-code": "^2.0.1",
 		"react-quill": "~1.3.3",
 		"react-router-dom": "~5.1.2",
 		"react-scripts": "3.4.1",
 		"react-to-print": "~2.5.1",
 		"recharts": "~1.8.5",
 		"semantic-ui-react": "~0.88.2",
-		"three": "^0.125.0",
+		"serialize-javascript": "^3.1.0",
-		"serialize-javascript": "^3.1.0"
+		"three": "^0.125.0"
 	},
 	"scripts": {
 		"start": "react-scripts start",

webclient/src/App.js

@@ -21,6 +21,7 @@ import { Classes, ClassDetail } from './Classes.js';
 import { Members, MemberDetail } from './Members.js';
 import { Charts } from './Charts.js';
 import { Auth } from './Auth.js';
+import { Subscribe } from './PayPal.js';
 import { PasswordReset, ConfirmReset } from './PasswordReset.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { Footer } from './Footer.js';
@@ -226,6 +227,10 @@ function App() {
 						<Auth user={user} />
 					</Route>
 
+					<Route path='/subscribe'>
+						<Subscribe />
+					</Route>
+
 					{user && user.member.set_details ?
 						<Switch>
 							<Route path='/account'>

webclient/src/Home.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useReducer } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation } from 'react-router-dom';
 import moment from 'moment-timezone';
+import QRCode from 'react-qr-code';
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Popup, Segment, Table } from 'semantic-ui-react';
-import { statusColor, BasicTable, staticUrl, requester, isAdmin } from './utils.js';
+import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 import { AccountForm } from './Account.js';
 import { PayPalSubscribeDeal } from './PayPal.js';
@@ -68,6 +69,10 @@ function MemberInfo(props) {
 					name='Protospace Membership'
 					custom={JSON.stringify({ deal: 3, member: user.member.id })}
 				/>
+
+				<p>Click "Checkout as Guest" if you don't have a PayPal account.</p>
+
+				<QRCode value={siteUrl + '/subscribe?monthly_fees=' + user.member.monthly_fees + '&id=' + user.member.id} />
 			</React.Fragment>}
 
 			<Header size='medium'>Details</Header>
@@ -159,7 +164,7 @@ export function Home(props) {
 	const getTrackAgo = (x) => stats && stats.track && stats.track[x] ? moment.unix(stats.track[x]['time']).tz('America/Edmonton').fromNow() : '';
 	const getTrackName = (x) => stats && stats.track && stats.track[x] && stats.track[x]['username'] ? stats.track[x]['username'] : 'Unknown';
 
-	const alarmStat = () => stats && stats.alarm && moment().unix() - stats.alarm['time'] < 300 ? stats.alarm['data'] > 200 ? 'Armed' : 'Disarmed' : 'Unknown';
+	const alarmStat = () => stats && stats.alarm && moment().unix() - stats.alarm['time'] < 300 ? stats.alarm['data'] < 270 ? 'Armed' : 'Disarmed' : 'Unknown';
 
 	return (
 		<Container>

webclient/src/PayPal.js

@@ -1,4 +1,6 @@
 import React, { useState, useEffect, useReducer } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
 
 export function PayPalPayNow(props) {
 	const { amount, custom, name } = props;
@@ -77,3 +79,30 @@ export function PayPalSubscribeDeal(props) {
 		</div>
 	);
 }
+
+export function Subscribe(props) {
+	const qs = useLocation().search;
+	const params = new URLSearchParams(qs);
+	const monthly_fees = params.get('monthly_fees') || false;
+	const id = params.get('id') || false;
+
+	return (
+		<Container>
+			<Header size='large'>Create a PayPal Subscription</Header>
+
+			<p>Use this page to set up a Protospace membership subscription.</p>
+
+			{monthly_fees && id ?
+				<PayPalSubscribeDeal
+					amount={monthly_fees}
+					name='Protospace Membership'
+					custom={JSON.stringify({ deal: 3, member: id })}
+				/>
+			:
+				<p>Error, invalid subscribe link.</p>
+			}
+
+			<p>Click "Checkout as Guest" if you don't have a PayPal account.</p>
+		</Container>
+	);
+}

webclient/yarn.lock

@@ -8779,6 +8779,11 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -8979,6 +8984,14 @@ react-popper@^1.3.4:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-qr-code@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.1.tgz#9b7cbdb0fcbdc4bd04f27c62fe865ac6306ece5e"
+  integrity sha512-Qoe05Qkl1U7PsbhvOjhA/XSIKXDX3oX/uR1mWTrwBsi+aRJvMfPCRgWZJZLJazFFqsQAuMFyaI+UCh/Lhue+xQ==
+  dependencies:
+    prop-types "^15.7.2"
+    qr.js "0.0.0"
+
 react-quill@~1.3.3:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/react-quill/-/react-quill-1.3.5.tgz#8c4ad759da03365b17c79c6c52afa9772259844e"