Skip to content
This repository has been archived by the owner on Jan 25, 2020. It is now read-only.

WIP but has structure #144

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WIP but has structure #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
339 changes: 184 additions & 155 deletions src/pages/Application/ApplicationDecision.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,78 @@
import React, { Component } from 'react';
import { Button } from 'bm-kit';
import { Button, Card } from 'bm-kit';
import ApplicationTextField from './ApplicationTextField';
import ApplicationSelectField from './ApplicationSelectField';
import ApplicationRSVPToggle from './ApplicationRSVPToggle';
import { dietOptions, shirtOptions, skillOptions } from './ApplicationConsts';

class ApplicationForm extends Component {
render() {
// let decisionMap = {
// 4: 'EXPIRED',
// 3: 'ACCEPT',
// 2: 'WAITLIST',
// 1: 'REJECT',
// 0: 'UNDECIDED'
// };
class ApplicationDecision extends Component {
renderHasBus() {
const { applicationForm } = this.props.application;
const isLoading = this.props.application.loading;

let transitMessage;
switch (applicationForm.school.transit_method) {
case 'bus':
transitMessage = (
<div className="section">
<p>We'll be sending a bus to {applicationForm.school.name}!</p>
<p>
Join the Facebook event{' '}
<a
href={`https://www.facebook.com/events/${
applicationForm.school.facebook_event_id
}`}
>
here
</a>{' '}
to stay up to date!
</p>
</div>
);
break;
case 'car':
transitMessage = (
<div className="section">
<p>
Sadly we won't be able to send a bus to{' '}
<b>{applicationForm.school.name}.</b>
</p>
<p>
However, if you're willing to get here by your own means, we'd
love to have you!.
</p>
<p>
<i>
Please note that we will not be providing any form of travel
reimbursements.
</i>
</p>
</div>
);
break;
default:
case 'walk':
transitMessage = (
<p>
Well, you have it easy! BoilerMake will be happening in the Black &
Gold Gyms of the CoRec on campus.
</p>
);
break;
}
return (
<div className="section">
<p>We'll be sending a bus to {applicationForm.school.name}!</p>
<p>
Join the Facebook event{' '}
<a
href={`https://www.facebook.com/events/${
applicationForm.school.facebook_event_id
}`}
>
here
</a>{' '}
to stay up to date!
</p>
</div>
);
}

renderHasCar() {
const { applicationForm } = this.props.application;

let rsvpYes = (
return (
<div className="section">
<p>
Sadly we won't be able to send a bus to{' '}
<b>{applicationForm.school.name}.</b>
</p>
<p>
However, if you're willing to get here by your own means, we'd love to
have you!.
</p>
<p>
<i>
Please note that we will not be providing any form of travel
reimbursements.
</i>
</p>
</div>
);
}

renderHasFeet() {
return (
<p>
Well, you have it easy! BoilerMake will be happening in the Black & Gold
Gyms of the CoRec on campus.
</p>
);
}

renderTransitMethod() {
const { applicationForm } = this.props.application;
const method = applicationForm.school.transit_method;

if (method === 'bus') return this.renderHasBus();
if (method === 'car') return this.renderHasCar();
if (method === 'walk') return this.renderHasFeet();
}

renderRSVPYes() {
// const { applicationForm } = this.props.application;
const isLoading = this.props.application.loading;

return (
<div className="section">
<h2>Neat! Just a few more steps.</h2>
<p>
Expand Down Expand Up @@ -120,8 +124,12 @@ class ApplicationForm extends Component {
</Button>
</div>
);
}

renderRSVPNo() {
// const { applicationForm } = this.props.application;

let rsvpNo = (
return (
<p className="section">
Aw{' '}
<span role="img" aria-label="Sad">
Expand All @@ -130,99 +138,120 @@ class ApplicationForm extends Component {
Please come back and apply next year though!{' '}
</p>
);
}

let decisionForm;
switch (applicationForm.decision) {
case 3: //ACCEPT
decisionForm = (
<div className="section">
{applicationForm.is_rsvp_confirmed === 1 ? (
<div>
<div className="appInfoBanner">
Your RSVP has been recorded - we will see you at BoilerMake!
<h2>
Your check in code is:{' '}
<b>
<code>{applicationForm.user.hashid}</code>
</b>
<br /> Please have this + your photo ID ready to expedite
check in.
</h2>
</div>
</div>
) : (
<p>
Can you come? You must RSVP{' '}
{applicationForm.rsvp_deadline ? (
<span>by {applicationForm.rsvp_deadline}</span>
) : (
<span>soon</span>
)}{' '}
or else we will offer your spot to someone else.
</p>
)}
<h1>You're in!</h1>
<p>
Congratulations, we’re excited to invite you to this year’s retro
twist on BoilerMake.{' '}
<span role="img" aria-label="Heart">
💜
</span>
<br />
BoilerMake will last from around 6PM on Friday Sept 29 until
approximately 2PM on Sunday October 1, and it will be held on
Purdue's campus in West Lafayette.
<br />
All we need from you now is to RSVP so we know whether to expect
you there or not!
</p>
<h2>Getting to BoilerMake</h2>
{transitMessage}
<ApplicationRSVPToggle />
{applicationForm.rsvp !== null
? applicationForm.rsvp === 1
? rsvpYes
: rsvpNo
: null //don't show rest of form if they haven't clicked yes or no yet
}
</div>
);
break;
case 2: //WAITLIST
decisionForm = (
<div className="section">
<h1>Thanks for applying.</h1>
<p>
Unfortunately, we cannot accept you just yet. But don’t fret!
We’ll let you know if space opens up so that you can hopefully
attend BoilerMake this year.
</p>
</div>
);
break;
case 4: //EXPIRED
decisionForm = (
<div className="section">
<h1>Sorry about that.</h1>
<p>
Unfortunately, your acceptance offer has expired. We hope to see
you at next year’s BoilerMake!
</p>
</div>
);
break;
default:
decisionForm = (
<div className="section">
<h1>There was an error!</h1>
<p>
Sorry for the inconvenience. Please email us at{' '}
<a href="mailto:[email protected]">[email protected]</a>
</p>
renderAccepted() {
const { applicationForm } = this.props.application;

return (
<div className="section">
{applicationForm.is_rsvp_confirmed === 1 ? (
<div>
<div className="appInfoBanner">
Your RSVP has been recorded - we will see you at BoilerMake!
<h2>
Your check in code is:{' '}
<b>
<code>{applicationForm.user.hashid}</code>
</b>
<br /> Please have this + your photo ID ready to expedite check
in.
</h2>
</div>
</div>
);
}
return <div>{decisionForm}</div>;
) : (
<p>
Can you come? You must RSVP{' '}
{applicationForm.rsvp_deadline ? (
<span>by {applicationForm.rsvp_deadline}</span>
) : (
<span>soon</span>
)}{' '}
or else we will offer your spot to someone else.
</p>
)}
<h1>You're in!</h1>
<p>
Congratulations, we’re excited to invite you to this year’s retro
twist on BoilerMake.{' '}
<span role="img" aria-label="Heart">
💜
</span>
<br />
BoilerMake will last from around 6PM on Friday Sept 29 until
approximately 2PM on Sunday October 1, and it will be held on Purdue's
campus in West Lafayette.
<br />
All we need from you now is to RSVP so we know whether to expect you
there or not!
</p>
<h2>Getting to BoilerMake</h2>
{this.renderTransitMethod()}
<ApplicationRSVPToggle />
{applicationForm.rsvp !== null
? applicationForm.rsvp === 1
? this.renderRSVPYes()
: this.renderRSVPNo()
: null //don't show rest of form if they haven't clicked yes or no yet
}
</div>
);
}

renderWaitlist() {
return (
<div className="section">
<h1>Thanks for applying.</h1>
<p>
Unfortunately, we cannot accept you just yet. But don’t fret! We’ll
let you know if space opens up so that you can hopefully attend
BoilerMake this year.
</p>
</div>
);
}

renderExpired() {
return (
<div className="section">
<h1>Sorry about that.</h1>
<p>
Unfortunately, your acceptance offer has expired. We hope to see you
at next year’s BoilerMake!
</p>
</div>
);
}

renderError() {
return (
<div className="section">
<h1>There was an error!</h1>
<p>
Sorry for the inconvenience. Please email us at{' '}
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
);
}

render() {
// let decisionMap = {
// 4: 'EXPIRED',
// 3: 'ACCEPT',
// 2: 'WAITLIST',
// 1: 'REJECT',
// 0: 'UNDECIDED'
// };
const { applicationForm } = this.props.application;

return (
<Card className="p-decision">
{applicationForm === 3 ? this.renderAccepted() : null}
{applicationForm === 2 ? this.renderWaitlist() : null}
{applicationForm === 4 ? this.renderExpired() : null}
</Card>
);
}
}

Expand Down Expand Up @@ -253,4 +282,4 @@ const mapDispatchToProps = dispatch => {
export default connect(
mapStateToProps,
mapDispatchToProps
)(ApplicationForm);
)(ApplicationDecision);
4 changes: 4 additions & 0 deletions src/pages/Application/_pillar.application.source.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,3 +76,7 @@
color: $dark_mono;
text-decoration: underline;
}

.p-decision {
margin-bottom: $spacing_100;
}
4 changes: 2 additions & 2 deletions src/pages/Dashboard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ class Application extends Component {
return (
<div className="p-dashboard">
<h1>Dashboard</h1>
{doesUserHaveDecision ? <ApplicationDecision /> : null}

<div className="p-dashboard__content_wrapper">
<div className="p-dashboard__application">
<Card className="p-dashboard__application_link">
Expand Down Expand Up @@ -125,8 +127,6 @@ class Application extends Component {
<Button onClick={this.submitProjectTeamInfo}>Save</Button>
</Card>
</div>

{doesUserHaveDecision ? <ApplicationDecision /> : null}
</div>
);
}
Expand Down