From d7101195cab0939f4199a4cc4e76155ac1451616 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Wed, 18 Aug 2021 20:40:11 +0000 Subject: [PATCH] Add a QR code for PayPal subscriptions on Home --- webclient/package.json | 5 +++-- webclient/src/App.js | 5 +++++ webclient/src/Home.js | 9 +++++++-- webclient/src/PayPal.js | 29 +++++++++++++++++++++++++++++ webclient/yarn.lock | 13 +++++++++++++ 5 files changed, 57 insertions(+), 4 deletions(-) diff --git a/webclient/package.json b/webclient/package.json index 564f882..9ee9267 100644 --- a/webclient/package.json +++ b/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", diff --git a/webclient/src/App.js b/webclient/src/App.js index c3d52e9..000b778 100644 --- a/webclient/src/App.js +++ b/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() { + + + + {user && user.member.set_details ? diff --git a/webclient/src/Home.js b/webclient/src/Home.js index ec7706a..75df819 100644 --- a/webclient/src/Home.js +++ b/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 })} /> + +

Click "Checkout as Guest" if you don't have a PayPal account.

+ + Details @@ -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 ( diff --git a/webclient/src/PayPal.js b/webclient/src/PayPal.js index db58e44..d4fc18c 100644 --- a/webclient/src/PayPal.js +++ b/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) { ); } + +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 ( + +
Create a PayPal Subscription
+ +

Use this page to set up a Protospace membership subscription.

+ + {monthly_fees && id ? + + : +

Error, invalid subscribe link.

+ } + +

Click "Checkout as Guest" if you don't have a PayPal account.

+ + ); +} diff --git a/webclient/yarn.lock b/webclient/yarn.lock index ccf870d..94a9b87 100644 --- a/webclient/yarn.lock +++ b/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"