Add school year to adoption and renewal forms

[CORE-758]

Author: RoyEJohnson

src/app/components/multiselect/book-tags/sf-book-context.js

@@ -22,7 +22,7 @@ function useContextValue({selected: selectedValues = [], booksAllowed}) {
     const [filter, setFilter] = React.useState('');
     const matchingBooks = React.useMemo(
         () => books.filter(
-            (b) => b.text.toLowerCase().includes(filter.toLowerCase())
+            (b) => b.text?.toLowerCase().includes(filter.toLowerCase())
         ),
         [books, filter]
     );

src/app/components/year-selector/year-selector.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import DropdownSelect from '~/components/select/drop-down/drop-down';
+
+const now = new Date();
+const previousAcademicYear = now.getFullYear() - (
+    now.getMonth() < 7 ? 2 : 1
+);
+
+export default function YearSelector({
+    selectedYear=(previousAcademicYear + 1).toString(),
+    onValueUpdate
+}: {
+    selectedYear?: string;
+    onValueUpdate?: (value: string) => void
+}) {
+    const yearOptions = React.useMemo(() =>
+        [0, 1, 2].map((plusYears) => previousAcademicYear + plusYears)
+        .map((startYear) => ({
+            label: `${startYear}-${startYear + 1}`,
+            value: startYear.toString(),
+            selected: selectedYear === startYear.toString()
+        })),
+        [selectedYear]
+    );
+
+    return (
+        <label className="year-selector">
+            I am reporting usage of OpenStax books for the
+            <DropdownSelect
+                name='baseYear'
+                options={yearOptions}
+                required
+                onValueUpdate={onValueUpdate}
+            />
+            school year
+        </label>
+    );
+}

src/app/pages/adoption/adoption.js

@@ -1,10 +1,12 @@
 import React, {useState, useRef} from 'react';
+import {useLocation} from 'react-router-dom';
 import useDocumentHead, {useCanonicalLink} from '~/helpers/use-document-head';
 import FormHeader from '~/components/form-header/form-header';
 import RoleSelector from '~/components/role-selector/role-selector';
 import StudentForm from '~/components/student-form/student-form';
 import MultiPageForm from '~/components/multi-page-form/multi-page-form';
 import ContactInfo from '~/components/contact-info/contact-info';
+import YearSelector from '~/components/year-selector/year-selector';
 import {useAfterSubmit} from '~/components/book-selector/after-form-submit';
 import BookSelector, {
     useSelectedBooks
@@ -16,7 +18,7 @@ import TrackingParameters from '~/components/tracking-parameters/tracking-parame
 import {useIntl} from 'react-intl';
 import './adoption.scss';
 
-function BookSelectorPage({selectedBooksRef}) {
+function BookSelectorPage({selectedBooksRef, year}) {
     const [selectedBooks, toggleBook] = useSelectedBooks();
     const bookList = React.useMemo(
     () => selectedBooks.map((b) => b.value.replace(/ *\[.*/, '')).join('; '),
@@ -44,7 +46,7 @@ function BookSelectorPage({selectedBooksRef}) {
             <input type="hidden" name="subject_interest" value={bookList} />
             <label>
                 <div className="control-group">
-                    <HowUsing selectedBooks={selectedBooks} />
+                    <HowUsing selectedBooks={selectedBooks} year={year} />
                 </div>
             </label>
         </React.Fragment>
@@ -77,6 +79,9 @@ function FacultyForm({position, onPageChange}) {
         },
         [onSubmit]
     );
+    const {search} = useLocation();
+    const selectedYear = new window.URLSearchParams(search).get('year') ?? undefined;
+    const [copyOfYear, setCopyOfYear] = React.useState();
 
     return (
         <React.Fragment>
@@ -92,9 +97,12 @@ function FacultyForm({position, onPageChange}) {
                     <input type="hidden" name="role" value="Instructor" />
                     <input type="hidden" name="lead_source" value="Adoption Form" />
                     <input type="hidden" name="process_adoptions" value={true} />
+                    <div className="year-selector-container">
+                        <YearSelector selectedYear={selectedYear} onValueUpdate={setCopyOfYear} />
+                    </div>
                     <ContactInfo />
                 </React.Fragment>
-                <BookSelectorPage selectedBooksRef={selectedBooksRef} />
+                <BookSelectorPage selectedBooksRef={selectedBooksRef} year={copyOfYear} />
             </MultiPageForm>
         </React.Fragment>
     );

src/app/pages/adoption/adoption.scss

@@ -1,6 +1,10 @@
 @import 'pattern-library/core/pattern-library/headers';
 
 .adoption-form-v2 {
+    .year-selector-container {
+        margin-bottom: $normal-margin;
+    }
+    
     .hint {
         @include set-font(helper-label);
         color: text-color(helper);

src/app/pages/adoption/how-using/how-using.js

@@ -74,7 +74,7 @@ function reducer(state, action) {
     return {...state, ...action};
 }
 
-export default function HowUsing({selectedBooks}) {
+export default function HowUsing({selectedBooks, year}) {
     const [bookData, dispatch] = React.useReducer(reducer, {});
     const [useData, udDispatch] = React.useReducer(reducer, {});
     const json = React.useMemo(() => {
@@ -91,9 +91,10 @@ export default function HowUsing({selectedBooks}) {
         });
 
         return JSON.stringify({
+            baseYear: year,
             Books: rewrittenBookData
         });
-    }, [bookData, useData, selectedBooks]);
+    }, [bookData, useData, selectedBooks, year]);
 
     return (
         <div className="how-using">

src/app/pages/renewal-form/renewal-form.js

@@ -3,6 +3,7 @@ import {useLocation} from 'react-router-dom';
 import linkHelper from '~/helpers/link';
 import useUserContext from '~/contexts/user';
 import useAdoptions from '~/models/renewals';
+import YearSelector from '~/components/year-selector/year-selector';
 import TrackingParameters from '~/components/tracking-parameters/tracking-parameters';
 // -- We'll be trying to do this for the next release.
 // import _adoptionsPromise from './salesforce-data';
@@ -40,7 +41,7 @@ function useFormData(adoptions) {
     return {counts, updateCount, defaultCount};
 }
 
-function HiddenFields({email, uuid, counts}) {
+function HiddenFields({email, uuid, counts, year}) {
     const {search} = useLocation();
     const params = new window.URLSearchParams(search);
     const fromValue = params.get('from');
@@ -49,11 +50,12 @@ function HiddenFields({email, uuid, counts}) {
     const {selectedItems} = useBookTagsContext();
     const json = React.useMemo(
         () => JSON.stringify({
+            baseYear: year,
             'Books': selectedItems.map(
                 ({value: name}) => ({name, students: +counts[name]})
             )
         }),
-        [selectedItems, counts]
+        [selectedItems, counts, year]
     );
     const subjects = React.useMemo(
         () => selectedItems ? selectedItems.map((i) => i.value).join(';') : '',
@@ -141,6 +143,9 @@ function TheForm() {
         [select, counts, updateCount, defaultCount]
     );
     const [initialized, setInitialized] = React.useState(false);
+    const {search} = useLocation();
+    const selectedYear = new window.URLSearchParams(search).get('year') ?? undefined;
+    const [copyOfYear, setCopyOfYear] = React.useState(selectedYear);
 
     // Initialize selections from adoptions
     React.useEffect(
@@ -159,12 +164,13 @@ function TheForm() {
 
     return (
         <form action={window.SETTINGS.renewalEndpoint} method="post">
-            <HiddenFields email={email} uuid={uuid} counts={counts} />
+            <HiddenFields email={email} uuid={uuid} counts={counts} year={copyOfYear} />
             <div className="fixed-fields">
                 <FixedField label="First name" name="first_name" value={firstName} />
                 <FixedField label="Last name" name="last_name" value={lastName} />
                 <FixedField label="School name" name="school" value={school} />
             </div>
+            <YearSelector selectedYear={selectedYear} onValueUpdate={setCopyOfYear} />
             <BooksAndStudentCounts counts={counts} updateCount={updateCount} />
             <input type="submit" />
         </form>

src/app/pages/renewal-form/renewal-form.scss

@@ -13,6 +13,14 @@
         @include set-font(h2);
     }
 
+    label {
+        font-weight: bold;
+
+        .Select {
+            font-weight: normal;
+        }
+    }
+
     form {
         background-color: ui-color(white);
         border: thin solid ui-color(form-border);