Add a QR code for PayPal subscriptions on Home

This commit is contained in:
Tanner Collin 2021-08-18 20:40:11 +00:00
parent 17da308f37
commit d7101195ca
5 changed files with 57 additions and 4 deletions

View File

@ -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",

View File

@ -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'>

View File

@ -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>

View File

@ -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>
);
}

View File

@ -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"