Add PayPal pay now button to course signup

webclient/src/Classes.js

@@ -6,6 +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';
 
 function ClassTable(props) {
 	const { classes } = props;
@@ -190,14 +191,27 @@ export function ClassDetail(props) {
 							(userTraining ?
 								<div>
 									<p>Status: {userTraining.attendance_status}</p>
-									{userTraining.attendance_status === 'Withdrawn' ?
-										<Button onClick={() => handleToggle('Waiting for payment')}>
-											Sign back up
-										</Button>
-									:
-										<Button onClick={() => handleToggle('Withdrawn')}>
-											Withdraw from Class
-										</Button>
+									<p>
+										{userTraining.attendance_status === 'Withdrawn' ?
+											<Button onClick={() => handleToggle('Waiting for payment')}>
+												Sign back up
+											</Button>
+										:
+											<Button onClick={() => handleToggle('Withdrawn')}>
+												Withdraw from Class
+											</Button>
+										}
+									</p>
+
+									{userTraining.attendance_status === 'Waiting for payment' &&
+										<div>
+											<p>Please pay the course fee of ${clazz.cost} to confirm your attendance.</p>
+											<PayPal
+												amount={clazz.cost}
+												name={clazz.course_name}
+												custom={JSON.stringify({ training: userTraining.id })}
+											/>
+										</div>
 									}
 								</div>
 							: