Add PayPal button to Home for new member subscriptions

webclient/src/Classes.js

@@ -6,7 +6,7 @@ import moment from 'moment';
 import { isAdmin, isInstructor, BasicTable, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
-import { PayPal } from './PayPal.js';
+import { PayPalPayNow } from './PayPal.js';
 
 function ClassTable(props) {
 	const { classes } = props;
@@ -211,7 +211,7 @@ export function ClassDetail(props) {
 									{userTraining.attendance_status === 'Waiting for payment' &&
 										<div>
 											<p>Please pay the course fee of ${clazz.cost} to confirm your attendance.</p>
-											<PayPal
+											<PayPalPayNow
 												amount={clazz.cost}
 												name={clazz.course_name}
 												custom={JSON.stringify({ training: userTraining.id })}

webclient/src/Home.js

@@ -6,6 +6,7 @@ import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Me
 import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 import { AccountForm } from './Account.js';
+import { PayPalSubscribeDeal } from './PayPal.js';
 
 function MemberInfo(props) {
 	const user = props.user;
@@ -54,11 +55,21 @@ function MemberInfo(props) {
 				</p>
 			</Message>}
 
-			{!member.photo_medium && <Message warning>
+			{!!lastTrans.length && !member.photo_medium && <Message warning>
 				<Message.Header>Please set a member photo!</Message.Header>
 				<p>Visit the <Link to='/account'>account settings</Link> page to set one.</p>
 			</Message>}
 
+			{!lastTrans.length && <div>
+				<Header size='medium'>PayPal</Header>
+				<p>Create a ${user.member.monthly_fees} / month subscription, get your first three months for the price of two:</p>
+				<PayPalSubscribeDeal
+					amount={user.member.monthly_fees}
+					name='Protospace Membership'
+					custom={JSON.stringify({ deal: 3, member: user.member.id })}
+				/>
+			</div>}
+
 			<Header size='medium'>Details</Header>
 			<BasicTable>
 				<Table.Body>

webclient/src/PayPal.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useReducer } from 'react';
 
-export function PayPal(props) {
+export function PayPalPayNow(props) {
 	const { amount, custom, name } = props;
 
 	return (
@@ -24,3 +24,56 @@ export function PayPal(props) {
 		</div>
 	);
 }
+
+export function PayPalSubscribe(props) {
+	const { amount, custom, name } = props;
+
+	return (
+		<div className='paypal-container'>
+			<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
+				<input type='hidden' name='cmd' value='_xclick-subscriptions' />
+				<input type='hidden' name='business' value='info@protospace.ca' />
+				<input type='hidden' name='lc' value='US' />
+				<input type='hidden' name='item_name' value={name} />
+				<input type='hidden' name='no_note' value='1' />
+				<input type='hidden' name='src' value='1' />
+				<input type='hidden' name='a3' value={amount} />
+				<input type='hidden' name='custom' value={custom} />
+				<input type='hidden' name='p3' value='1' />
+				<input type='hidden' name='t3' value='M' />
+				<input type='hidden' name='currency_code' value='CAD' />
+				<input type='hidden' name='bn' value='PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHostedGuest' />
+				<input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!' />
+				<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1' />
+			</form>
+		</div>
+	);
+}
+
+export function PayPalSubscribeDeal(props) {
+	const { amount, custom, name } = props;
+
+	return (
+		<div className='paypal-container'>
+			<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
+				<input type='hidden' name='cmd' value='_xclick-subscriptions' />
+				<input type='hidden' name='business' value='info@protospace.ca' />
+				<input type='hidden' name='lc' value='US' />
+				<input type='hidden' name='item_name' value={name}/>
+				<input type='hidden' name='no_note' value='1' />
+				<input type='hidden' name='a1' value={amount * 2} />
+				<input type='hidden' name='p1' value='3' />
+				<input type='hidden' name='t1' value='M' />
+				<input type='hidden' name='src' value='1' />
+				<input type='hidden' name='a3' value={amount} />
+				<input type='hidden' name='custom' value={custom} />
+				<input type='hidden' name='p3' value='1' />
+				<input type='hidden' name='t3' value='M' />
+				<input type='hidden' name='currency_code' value='CAD' />
+				<input type='hidden' name='bn' value='PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHostedGuest' />
+				<input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!' />
+				<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1' />
+			</form>
+		</div>
+	);
+}