Skip to content

Commit 7a0426a

Browse files
brevillebreville
authored
Merge pull request code-dot-org#26877 from code-dot-org/pl-search-ui-updates
PL search: UI updates
2 parents 6f5cb43 + d52d93c commit 7a0426a

File tree

6 files changed

+210
-103
lines changed

6 files changed

+210
-103
lines changed

‎apps/src/code-studio/pd/application/teacher1920/Section1AboutYou.jsx

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Button
1616
} from 'react-bootstrap';
1717
import SchoolAutocompleteDropdown from '@cdo/apps/templates/SchoolAutocompleteDropdown';
18+
import queryString from 'query-string';
1819
import {styles} from "./TeacherApplicationConstants";
1920
import _ from 'lodash';
2021

@@ -75,13 +76,27 @@ export default class Section1AboutYou extends LabeledFormComponent {
7576
}
7677

7778
render() {
79+
const nominated = queryString.parse(window.location.search).nominated;
80+
7881
return (
7982
<FormGroup>
80-
<p>
81-
Thanks for your interest in the Code.org Professional Learning Program!
82-
This application should take 10 - 15 minutes to complete. Fields marked with a
83-
{' '}<span style={{color: "red"}}>*</span>{' '} are required.
84-
</p>
83+
84+
{!nominated && (
85+
<p>
86+
Thanks for your interest in the Code.org Professional Learning Program!
87+
This application should take 10 - 15 minutes to complete. Fields marked with a
88+
{' '}<span style={{color: "red"}}>*</span>{' '} are required.
89+
</p>
90+
)}
91+
{nominated && (
92+
<p>
93+
Congratulations on your nomination for a scholarship to the Code.org Professional
94+
Learning Program! This application should take 10 - 15 minutes to complete. Fields
95+
marked with a {' '}<span style={{color: "red"}}>*</span>{' '} are required. We will
96+
let your local partner know that you’ve been nominated as they consider your application
97+
for the regional scholarships or discounts they have available.
98+
</p>
99+
)}
85100
<p>
86101
If you need more information about the program before you apply,
87102
please visit
@@ -99,6 +114,20 @@ export default class Section1AboutYou extends LabeledFormComponent {
99114
</a>
100115
</p>
101116

117+
{nominated && (
118+
<div>
119+
<h4>When will I hear back about the scholarships and discounts?</h4>
120+
<p>
121+
In most regions, applications are accepted on a rolling basis. And in
122+
most cases, our local partner will get back to you within 2 weeks
123+
to let you know your application status. Even if you don’t get selected
124+
for the scholarship, you will still be able to attend if you are an
125+
eligible teacher and your school can pay a discounted price (thanks
126+
to our generous donors).
127+
</p>
128+
</div>
129+
)}
130+
102131
<h3>Section 1: {SectionHeaders.section1AboutYou}</h3>
103132

104133
{this.radioButtonsFor("country")}

‎apps/src/templates/RegionalPartnerSearch.jsx

Lines changed: 113 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,41 @@ const styles = {
3434
bold: {
3535
fontFamily: "'Gotham 5r', sans-serif"
3636
},
37+
workshopCollection: {
38+
backgroundColor: color.lightest_purple,
39+
padding: 20,
40+
borderRadius: 10,
41+
marginBottom: 20
42+
},
43+
halfWidth: {
44+
width: "40%",
45+
float: "left",
46+
marginRight: 20,
47+
},
48+
fullWidth: {
49+
width: "100%"
50+
},
3751
workshop: {
3852
marginBottom: 20
53+
},
54+
action: {
55+
marginTop: 20,
56+
marginBottom: 20
57+
},
58+
scholarship: {
59+
backgroundColor: color.lightest_gray,
60+
padding: 20,
61+
borderRadius: 10
62+
},
63+
partnerContact: {
64+
marginBottom: 20
65+
},
66+
bigButton: {
67+
padding: "10px 20px 10px 20px",
68+
height: "initial"
69+
},
70+
clear: {
71+
clear: "both"
3972
}
4073
};
4174

@@ -55,6 +88,7 @@ class RegionalPartnerSearch extends Component {
5588

5689
const partnerId = queryString.parse(window.location.search).partner;
5790
const zip = queryString.parse(window.location.search).zip;
91+
const nominated = queryString.parse(window.location.search).nominated;
5892

5993
if (partnerId) {
6094
if (partnerId === "0") {
@@ -82,7 +116,8 @@ class RegionalPartnerSearch extends Component {
82116
partnerInfo: undefined,
83117
zipValue: zipValue,
84118
error: error,
85-
loading: loading
119+
loading: loading,
120+
nominated: nominated
86121
};
87122
}
88123

@@ -148,9 +183,15 @@ class RegionalPartnerSearch extends Component {
148183
}
149184
];
150185

186+
const workshopCollectionStyle = this.props.responsiveSize === "lg" ? styles.halfWidth : styles.fullWidth;
151187
const appState = partnerInfo && partnerInfo.application_state.state;
152188
const appsOpenDate = partnerInfo && partnerInfo.application_state.earliest_open_date;
153189

190+
let applicationLink = studio("/pd/application/teacher");
191+
if (this.state.nominated) {
192+
applicationLink += "?nominated=true";
193+
}
194+
154195
return (
155196
<div>
156197
{this.state.showZip && (
@@ -176,16 +217,12 @@ class RegionalPartnerSearch extends Component {
176217
</div>
177218
)}
178219

179-
{(this.state.error === WorkshopSearchErrors.no_partner || partnerInfo) && (
180-
<h3>Code.org Regional Partner for your region:</h3>
181-
)}
182-
183220
{(this.state.error === WorkshopSearchErrors.no_state || this.state.error === WorkshopSearchErrors.unknown) && (
184221
<div>
185222
<br/>
186223
<div>We are unable to find this ZIP code. You can still apply directly:</div>
187-
<a href={studio("/pd/application/teacher")}>
188-
<button>
224+
<a href={applicationLink}>
225+
<button style={styles.bigButton}>
189226
Start application
190227
</button>
191228
</a>
@@ -198,6 +235,7 @@ class RegionalPartnerSearch extends Component {
198235

199236
{this.state.error === WorkshopSearchErrors.no_partner && (
200237
<div style={styles.noPartner}>
238+
<h3>Code.org Regional Partner for your region:</h3>
201239
<p>We do not have a Regional Partner in your area. However, we have a number of partners in nearby states or regions who may have space available in their program. If you are willing to travel, please fill out the application. We'll let you know if we can find you a nearby spot in the program!</p>
202240
<p>If we find a spot, we'll let you know the workshop dates and program fees (if applicable) so you can decide at that point if it is something you or your school can cover.</p>
203241
<p>
@@ -217,8 +255,8 @@ class RegionalPartnerSearch extends Component {
217255
<a href="/educate/curriculum/3rd-party">contact one of these computer science providers</a>
218256
{' '}
219257
for other Professional Development options in your area.</p>
220-
<a href={studio("/pd/application/teacher")}>
221-
<button>
258+
<a href={applicationLink}>
259+
<button style={styles.bigButton}>
222260
Start application
223261
</button>
224262
</a>
@@ -227,28 +265,13 @@ class RegionalPartnerSearch extends Component {
227265

228266
{partnerInfo && (
229267
<div>
230-
<div style={styles.bold}>{partnerInfo.name}</div>
231-
{partnerInfo.contact_name && (
232-
<div>{partnerInfo.contact_name}</div>
233-
)}
234-
{partnerInfo.contact_email && (
235-
<div>{partnerInfo.contact_email}</div>
236-
)}
237-
{!partnerInfo.contact_email && (
238-
<div>Direct any questions to your Regional Partner by
239-
{' '}
240-
<a href={studio("/pd/regional_partner_contact/new")}>completing this form</a>
241-
.
242-
</div>
243-
)}
244-
245-
<h3>Workshop information:</h3>
268+
<h3>Workshop information (hosted by {partnerInfo.name}):</h3>
246269
{workshopCollections[0].workshops.length === 0 && workshopCollections[1].workshops.length === 0 && (
247270
<div>Workshop date and location information coming soon.</div>
248271
)}
249272

250273
{workshopCollections.map((collection, collectionIndex) => collection.workshops.length > 0 && (
251-
<div key={collectionIndex}>
274+
<div key={collectionIndex} style={{...styles.workshopCollection, ...workshopCollectionStyle}}>
252275
<h4>{collection.heading}</h4>
253276
{collection.workshops.map((workshop, index) => (
254277
<div key={index} style={styles.workshop}>
@@ -259,16 +282,53 @@ class RegionalPartnerSearch extends Component {
259282
))}
260283
</div>
261284
))}
285+
<div style={styles.clear}/>
262286

263-
{(workshopCollections[0].workshops.length > 0 || workshopCollections[1].workshops.length > 0) && (
264-
<div>In addition to attending a five-day summer workshop, the professional learning program includes up to 4 required one-day, in-person academic year workshops during the 2019-20 school year.</div>
265-
)}
287+
<div style={styles.action}>
288+
{(workshopCollections[0].workshops.length > 0 || workshopCollections[1].workshops.length > 0) && (
289+
<div>In addition to attending a five-day summer workshop, the professional learning program includes up to 4 required one-day, in-person academic year workshops during the 2019-20 school year.</div>
290+
)}
291+
292+
{appState === WorkshopApplicationStates.now_closed && (
293+
<div>Applications are now closed.</div>
294+
)}
295+
296+
{appState === WorkshopApplicationStates.currently_open && !partnerInfo.link_to_partner_application && (
297+
<a className="professional_learning_link" id={`id-${partnerInfo.id}`} href={applicationLink}>
298+
<button style={styles.bigButton}>Start application</button>
299+
</a>
300+
)}
301+
302+
{appState === WorkshopApplicationStates.currently_open && partnerInfo.link_to_partner_application && (
303+
<a className="professional_learning_link" id={`id-${partnerInfo.id}`} href={partnerInfo.link_to_partner_application} target="_blank">
304+
<button style={styles.bigButton}>Apply on partner's site</button>
305+
</a>
306+
)}
307+
308+
{appState === WorkshopApplicationStates.opening_at && (
309+
<h3>Applications will open on {appsOpenDate}.</h3>
310+
)}
311+
312+
{appState === WorkshopApplicationStates.opening_sometime && (
313+
<h3>Program information and the application for this region will be available soon!</h3>
314+
)}
315+
316+
{appState !== WorkshopApplicationStates.currently_open && (
317+
<a href={studio("/pd/regional_partner_contact/new")}>
318+
<button style={styles.bigButton}>
319+
Notify me when I can apply
320+
</button>
321+
</a>
322+
)}
323+
</div>
266324

267325
<div className="professional_learning_information" id={`id-${partnerInfo.id}`}>
268326
{partnerInfo.cost_scholarship_information && (
269327
<div>
270-
<h3>Cost and scholarship information:</h3>
271-
<UnsafeRenderedMarkdown markdown={partnerInfo.cost_scholarship_information}/>
328+
<h3>Scholarship, discounts, and cost information:</h3>
329+
<div style={styles.scholarship}>
330+
<UnsafeRenderedMarkdown markdown={partnerInfo.cost_scholarship_information}/>
331+
</div>
272332
</div>
273333
)}
274334

@@ -280,37 +340,38 @@ class RegionalPartnerSearch extends Component {
280340
)}
281341
</div>
282342

283-
{appState === WorkshopApplicationStates.now_closed && (
284-
<div>Applications are now closed.</div>
285-
)}
343+
<div style={styles.partnerContact}>
344+
<h3>Have more questions?</h3>
345+
<div>Your Code.org Regional Partner is here to help:</div>
346+
<div style={styles.bold}>{partnerInfo.name}</div>
347+
{partnerInfo.contact_name && (
348+
<div>{partnerInfo.contact_name}</div>
349+
)}
350+
{partnerInfo.contact_email && (
351+
<div>{partnerInfo.contact_email}</div>
352+
)}
353+
{!partnerInfo.contact_email && (
354+
<div>Direct any questions to your Regional Partner by
355+
{' '}
356+
<a href={studio("/pd/regional_partner_contact/new")}>completing this form</a>
357+
.
358+
</div>
359+
)}
360+
</div>
286361

362+
{/* These two links duplicate the buttons that appear above. */}
287363
{appState === WorkshopApplicationStates.currently_open && !partnerInfo.link_to_partner_application && (
288-
<a className="professional_learning_link" id={`id-${partnerInfo.id}`} href={studio("/pd/application/teacher")}>
289-
<button>Start application</button>
364+
<a className="professional_learning_link" id={`id-${partnerInfo.id}`} href={applicationLink}>
365+
Start application
290366
</a>
291367
)}
292368

293369
{appState === WorkshopApplicationStates.currently_open && partnerInfo.link_to_partner_application && (
294370
<a className="professional_learning_link" id={`id-${partnerInfo.id}`} href={partnerInfo.link_to_partner_application} target="_blank">
295-
<button>Apply on partner's site</button>
371+
Apply on partner's site
296372
</a>
297373
)}
298374

299-
{appState === WorkshopApplicationStates.opening_at && (
300-
<h3>Applications will open on {appsOpenDate}.</h3>
301-
)}
302-
303-
{appState === WorkshopApplicationStates.opening_sometime && (
304-
<h3>Program information and the application for this region will be available soon!</h3>
305-
)}
306-
307-
{appState !== WorkshopApplicationStates.currently_open && (
308-
<a href={studio("/pd/regional_partner_contact/new")}>
309-
<button>
310-
Notify me when I can apply
311-
</button>
312-
</a>
313-
)}
314375
</div>
315376
)}
316377
</div>

‎pegasus/sites.v3/code.org/public/educate/professional-learning/middle-high.md

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,8 @@ theme: responsive
1818
<br/>
1919

2020
<div class="col-50">
21-
<%= view :course_wide_block, cta_link: '/educate/professional-learning/program-information', img: CDO.code_org_url(http://github.com/'/shared/images/banners/small-teal-icons.png'), title: 'Scholarships Available', description: '<p>Generous scholarships or discounts are available across the country for the Code.org Professional Learning Program.</p>
22-
<p><b>Enter your school’s zip code to learn more.</b></p>
23-
<form action="/educate/professional-learning/program-information" method="get">
24-
<span style="font-size:1.2em">Zip:</span>
25-
<input type="text" name="zip" style="padding:10px">
26-
<input type="submit" value="Submit" style="color:white; background-color:orange; padding:10px; font-size:1.2em">
27-
28-
</form>
29-
30-
'%>
21+
<%= view :regional_partner_zip_form %>
22+
3123
</div>
3224
<div class="col-50" width="75%" style='padding-top: 10px'>
3325
<center>
@@ -41,7 +33,7 @@ theme: responsive
4133
<%= view :three_circles, circles: [] %>
4234

4335

44-
## Who is the Professional Learning program for?
36+
## Who is the Professional Learning program for?
4537

4638
Whether you are new to teaching computer science (CS) or have experience teaching other CS courses, the Code.org Professional Learning Program offers year round support. We’ve designed this program to promote growth by providing space for you to become comfortable with curricular materials, CS content, and pedagogy.
4739

@@ -168,9 +160,11 @@ Be sure to check out our <a href="https://docs.google.com/document/d/e/2PACX-1vS
168160

169161
## Ready to apply?
170162

171-
<a href="https://code.org/educate/professional-learning/program-information"><button>Get started!</button>
172-
173-
163+
<%=
164+
link = "/educate/professional-learning/program-information"
165+
link += "?nominated=true" if params[:nominated]
166+
"<a href='#{link}'><button>Get started!</button></a>"
167+
%>
174168

175169
<!--
176170

‎pegasus/sites.v3/code.org/public/educate/professional-learning/program-information.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,15 @@ title: Program Information
33
theme: responsive
44
---
55

6-
<h2>Find Your Regional Information</h2>
6+
<%=
7+
"<h3>Congratulations on your nomination for a scholarship!</h3> You’ve been nominated as a talented, passionate educator who can bring computer science to the students at your school. Your local partner will have your nomination as they consider your application for the regional scholarships or discounts they have available. Grant funding is limited, so apply soon if you are interested." if params[:nominated]
8+
%>
79

8-
Code.org Regional Partners offer Professional Learning Programs for CS Discoveries and CS Principles throughout the United States. Enter your school’s ZIP code to find your Regional Partner and their program’s cost, application, and workshop information.
10+
<h2>Find your local workshop and apply</h2>
11+
12+
Find the professional learning workshops closest to you.
913

1014
<%= view :regional_partner_search, source_page_id: "program-information" %>
15+
16+
<br/>
17+
<br/>

0 commit comments

Comments
 (0)