woo got a dialog

mitodl · Feb 7, 2017 · 81cf797 · 81cf797
1 parent 7d276d5
commit 81cf797
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 35 deletions.
diff --git a/static/js/actions/ui.js b/static/js/actions/ui.js
@@ -84,8 +84,8 @@ export const setEnrollProgramDialogError = createAction(SET_ENROLL_PROGRAM_DIALO
 export const SET_ENROLL_PROGRAM_DIALOG_VISIBILITY = 'SET_ENROLL_PROGRAM_DIALOG_VISIBILITY';
 export const setEnrollProgramDialogVisibility = createAction(SET_ENROLL_PROGRAM_DIALOG_VISIBILITY);
 
-export const SET_ENROLL_COURSE_RUN_DIALOG_VISIBILITY = 'SET_ENROLL_COURSE_RUN_DIALOG_VISIBILITY';
-export const setEnrollCourseRunDialogVisibility = createAction(SET_ENROLL_COURSE_RUN_DIALOG_VISIBILITY);
+export const SET_ENROLL_COURSE_DIALOG_VISIBILITY = 'SET_ENROLL_COURSE_DIALOG_VISIBILITY';
+export const setEnrollCourseDialogVisibility = createAction(SET_ENROLL_COURSE_DIALOG_VISIBILITY);
 
 export const SET_TOAST_MESSAGE = 'SET_TOAST_MESSAGE';
 export const setToastMessage = createAction(SET_TOAST_MESSAGE);

diff --git a/static/js/actions/ui_test.js b/static/js/actions/ui_test.js
@@ -20,7 +20,7 @@ import {
   SET_EMAIL_DIALOG_VISIBILITY,
   SET_ENROLL_PROGRAM_DIALOG_ERROR,
   SET_ENROLL_PROGRAM_DIALOG_VISIBILITY,
-  SET_ENROLL_COURSE_RUN_DIALOG_VISIBILITY,
+  SET_ENROLL_COURSE_DIALOG_VISIBILITY,
   SET_TOAST_MESSAGE,
   SET_ENROLL_SELECTED_PROGRAM,
   SET_ENROLL_SELECTED_COURSE_RUN,
@@ -54,7 +54,7 @@ import {
   setEmailDialogVisibility,
   setEnrollProgramDialogError,
   setEnrollProgramDialogVisibility,
-  setEnrollCourseRunDialogVisibility,
+  setEnrollCourseDialogVisibility,
   setToastMessage,
   setEnrollSelectedProgram,
   setEnrollSelectedCourseRun,
@@ -92,7 +92,7 @@ describe('generated UI action helpers', () => {
       [setEmailDialogVisibility, SET_EMAIL_DIALOG_VISIBILITY],
       [setEnrollProgramDialogError, SET_ENROLL_PROGRAM_DIALOG_ERROR],
       [setEnrollProgramDialogVisibility, SET_ENROLL_PROGRAM_DIALOG_VISIBILITY],
-      [setEnrollCourseRunDialogVisibility, SET_ENROLL_COURSE_RUN_DIALOG_VISIBILITY],
+      [setEnrollCourseDialogVisibility, SET_ENROLL_COURSE_DIALOG_VISIBILITY],
       [setToastMessage, SET_TOAST_MESSAGE],
       [setEnrollSelectedProgram, SET_ENROLL_SELECTED_PROGRAM],
       [setEnrollSelectedCourseRun, SET_ENROLL_SELECTED_COURSE_RUN],

diff --git a/...s/components/CourseRunEnrollmentDialog.js → ...c/js/components/CourseEnrollmentDialog.js b/...s/components/CourseRunEnrollmentDialog.js → ...c/js/components/CourseEnrollmentDialog.js
@@ -3,19 +3,20 @@ import React from 'react';
 import Decimal from 'decimal.js-light';
 import Dialog from 'material-ui/Dialog';
 import Icon from 'react-mdl/lib/Icon';
-import type { CourseRun } from '../flow/programTypes';
+import type { Course, CourseRun } from '../flow/programTypes';
 
-type CourseRunEnrollment = {
+type CourseEnrollment = {
   open:                 boolean,
   setVisibility:        (v: boolean) => void,
+  course:               ?Course,
   courseRun:            ?CourseRun,
 };
 
-const CourseRunEnrollmentDialog = ({ open, setVisibility, courseRun }: CourseEnrollment) => {
-  if (!courseRun) {
+const CourseEnrollmentDialog = ({ open, setVisibility, course, courseRun }: CourseEnrollment) => {
+  if (!courseRun || !course) {
     return null;
   }
-  const title = `Enroll in ${courseRun.title}`;
+  const title = `Enroll in ${course.title}`;
   return <Dialog
     title={title}
     titleClassName="dialog-title"
@@ -29,4 +30,4 @@ const CourseRunEnrollmentDialog = ({ open, setVisibility, courseRun }: CourseEnr
   </Dialog>
 };
 
-export default CourseRunEnrollmentDialog;
+export default CourseEnrollmentDialog;
diff --git a/static/js/components/dashboard/CourseAction.js b/static/js/components/dashboard/CourseAction.js
@@ -8,10 +8,6 @@ import _ from 'lodash';
 
 import SpinnerButton from '../SpinnerButton';
 import { FETCH_PROCESSING } from '../../actions';
-import {
-  setEnrollCourseRunDialogVisibility,
-  setEnrollSelectedCourseRun,
-} from '../../actions/ui';
 import type { CalculatedPrices } from '../../flow/couponTypes';
 import type { CourseRun, FinancialAidUserInfo } from '../../flow/programTypes';
 import {
@@ -45,7 +41,9 @@ export default class CourseAction extends React.Component {
     financialAid: FinancialAidUserInfo,
     hasFinancialAid: boolean,
     openFinancialAidCalculator?: () => void,
-    addCourseEnrollment: (courseId: string) => void
+    addCourseEnrollment: (courseId: string) => void,
+    setEnrollSelectedCourseRun: (r: CourseRun) => void,
+    setEnrollCourseDialogVisibility: (b: boolean) => void,
   };
 
   statusDescriptionClasses = {
@@ -72,7 +70,11 @@ export default class CourseAction extends React.Component {
   }
 
   handleEnrollButtonClick(run: CourseRun): void {
-    debugger;
+    const {
+      setEnrollSelectedCourseRun,
+      setEnrollCourseDialogVisibility,
+    } = this.props;
+
     setEnrollSelectedCourseRun(run);
 
     if (false) {
@@ -81,7 +83,7 @@ export default class CourseAction extends React.Component {
     } else if (this.needsPriceCalculation()) {
       this.props.openFinancialAidCalculator();
     } else {
-      setEnrollCourseRunDialogVisibility(true);
+      setEnrollCourseDialogVisibility(true);
     }
   }
 

diff --git a/static/js/components/dashboard/CourseListCard.js b/static/js/components/dashboard/CourseListCard.js
@@ -16,6 +16,7 @@ import FinancialAidCalculator from '../../containers/FinancialAidCalculator';
 import EmailCompositionDialog from '../email/EmailCompositionDialog';
 import { COURSE_EMAIL_TYPE } from '../email/constants';
 import type { CoursePrice } from '../../flow/dashboardTypes';
+import type { CourseRun } from '../../flow/programTypes';
 import {
   FA_APPROVED_STATUSES,
   COUPON_CONTENT_TYPE_PROGRAM,
@@ -43,6 +44,8 @@ export default class CourseListCard extends React.Component {
     sendEmail:                    () => void,
     emailDialogVisibility:        boolean,
     email:                        EmailState,
+    setEnrollSelectedCourseRun:   (r: CourseRun) => void,
+    setEnrollCourseDialogVisibility: (bool: boolean) => void,
   };
 
   renderPriceMessage() {
@@ -128,7 +131,9 @@ export default class CourseListCard extends React.Component {
       updateEmailEdit,
       sendEmail,
       emailDialogVisibility,
-      email
+      email,
+      setEnrollSelectedCourseRun,
+      setEnrollCourseDialogVisibility,
     } = this.props;
     const now = this.props.now || moment();
 
@@ -146,6 +151,8 @@ export default class CourseListCard extends React.Component {
         now={now}
         addCourseEnrollment={addCourseEnrollment}
         openEmailComposer={R.partial(openEmailComposer, [course])}
+        setEnrollSelectedCourseRun={setEnrollSelectedCourseRun}
+        setEnrollCourseDialogVisibility={setEnrollCourseDialogVisibility}
       />
     );
 

diff --git a/static/js/components/dashboard/CourseRow.js b/static/js/components/dashboard/CourseRow.js
@@ -32,6 +32,8 @@ export default class CourseRow extends React.Component {
     openFinancialAidCalculator: () => void,
     addCourseEnrollment: (courseId: string) => void,
     openEmailComposer: () => void,
+    setEnrollSelectedCourseRun: (r: CourseRun) => void,
+    setEnrollCourseDialogVisibility: (b: boolean) => void,
   };
 
   shouldDisplayGradeColumn = (run: CourseRun): boolean => (
@@ -80,7 +82,9 @@ export default class CourseRow extends React.Component {
       hasFinancialAid,
       openFinancialAidCalculator,
       addCourseEnrollment,
-      openEmailComposer
+      openEmailComposer,
+      setEnrollSelectedCourseRun,
+      setEnrollCourseDialogVisibility,
     } = this.props;
 
     let lastColumnSize, lastColumnClass;
@@ -118,6 +122,8 @@ export default class CourseRow extends React.Component {
           financialAid={financialAid}
           openFinancialAidCalculator={openFinancialAidCalculator}
           addCourseEnrollment={addCourseEnrollment}
+          setEnrollSelectedCourseRun={setEnrollSelectedCourseRun}
+          setEnrollCourseDialogVisibility={setEnrollCourseDialogVisibility}
         />
       </Cell>
     );

diff --git a/static/js/containers/DashboardPage.js b/static/js/containers/DashboardPage.js
@@ -38,8 +38,8 @@ import {
   setConfirmSkipDialogVisibility,
   setDocsInstructionsVisibility,
   setCouponNotificationVisibility,
-  setEnrollCourseRunDialogVisibility,
-  setEnrollSelectedCourseRun
+  setEnrollCourseDialogVisibility,
+  setEnrollSelectedCourseRun,
 } from '../actions/ui';
 import { findCourseRun } from '../util/util';
 import CourseListCard from '../components/dashboard/CourseListCard';
@@ -86,11 +86,12 @@ import type { CouponsState } from '../reducers/coupons';
 import type { EmailState } from '../flow/emailTypes';
 import type { ProfileGetResult } from '../flow/profileTypes';
 import type { Course, CourseRun } from '../flow/programTypes';
+import type { Coupon } from '../flow/couponTypes';
 import { skipFinancialAid } from '../actions/financial_aid';
 import { currencyForCountry } from '../lib/currency';
 import DocsInstructionsDialog from '../components/DocsInstructionsDialog';
 import CouponNotificationDialog from '../components/CouponNotificationDialog';
-import CourseRunEnrollmentDialog from '../components/CourseRunEnrollmentDialog';
+import CourseEnrollmentDialog from '../components/CourseEnrollmentDialog';
 
 const isProcessing = R.equals(FETCH_PROCESSING);
 
@@ -433,7 +434,7 @@ class DashboardPage extends React.Component {
     dispatch(setCouponNotificationVisibility(bool));
   };
 
-  setRecentlyAttachedCoupon = coupon => {
+  setRecentlyAttachedCoupon = (coupon: Coupon) => {
     const { dispatch } = this.props;
     dispatch(setRecentlyAttachedCoupon(coupon));
   };
@@ -443,6 +444,11 @@ class DashboardPage extends React.Component {
     dispatch(setEnrollCourseDialogVisibility(bool));
   }
 
+  setEnrollSelectedCourseRun = (run: CourseRun) => {
+    const { dispatch } = this.props;
+    dispatch(setEnrollSelectedCourseRun(run));
+  }
+
   renderCouponDialog() {
     const {
       programs,
@@ -475,12 +481,21 @@ class DashboardPage extends React.Component {
     />;
   }
 
-  renderCourseRunEnrollmentDialog() {
+  renderCourseEnrollmentDialog() {
     const { ui } = this.props;
-    return <CourseRunEnrollmentDialog
-      courseRun={ui.enrollSelectedCourseRun}
-      open={ui.enrollCourseRunDialogVisibility}
-      setVisibility={this.setEnrollCourseRunDialogVisibility}
+    const program = this.getCurrentlyEnrolledProgram();
+    const courseRun = ui.enrollSelectedCourseRun;
+    let course = null;
+    if (courseRun) {
+      course = program.courses.find(
+        course => R.contains(courseRun.id, R.pluck("id", course.runs))
+      )
+    }
+    return <CourseEnrollmentDialog
+      course={course}
+      courseRun={courseRun}
+      open={ui.enrollCourseDialogVisibility}
+      setVisibility={this.setEnrollCourseDialogVisibility}
     />;
   }
 
@@ -574,7 +589,7 @@ class DashboardPage extends React.Component {
           setDialogVisibility={this.setDocsInstructionsVisibility}
         />
         {this.renderCouponDialog()}
-        {this.renderCourseRunEnrollmentDialog()}
+        {this.renderCourseEnrollmentDialog()}
         <div className="first-column">
           <DashboardUserCard profile={profile} program={program}/>
           <FinalExamCard
@@ -598,6 +613,8 @@ class DashboardPage extends React.Component {
             sendEmail={this.closeEmailComposerAndSend}
             emailDialogVisibility={ui.emailDialogVisibility}
             email={courseTeamEmail}
+            setEnrollSelectedCourseRun={this.setEnrollSelectedCourseRun}
+            setEnrollCourseDialogVisibility={this.setEnrollCourseDialogVisibility}
           />
         </div>
         <div className="second-column">

diff --git a/static/js/reducers/ui.js b/static/js/reducers/ui.js
@@ -31,7 +31,7 @@ import {
 
   SET_ENROLL_PROGRAM_DIALOG_ERROR,
   SET_ENROLL_PROGRAM_DIALOG_VISIBILITY,
-  SET_ENROLL_COURSE_RUN_DIALOG_VISIBILITY,
+  SET_ENROLL_COURSE_DIALOG_VISIBILITY,
   SET_TOAST_MESSAGE,
   SET_ENROLL_SELECTED_PROGRAM,
   SET_ENROLL_SELECTED_COURSE_RUN,
@@ -78,7 +78,7 @@ export type UIState = {
   emailDialogVisibility:            boolean,
   enrollProgramDialogError:         ?string,
   enrollProgramDialogVisibility:    boolean,
-  enrollCourseRunDialogVisibility:  boolean,
+  enrollCourseDialogVisibility:     boolean,
   toastMessage:                     ?ToastMessage,
   enrollSelectedProgram:            ?number,
   enrollSelectedCourseRun:          ?CourseRun,
@@ -115,7 +115,7 @@ export const INITIAL_UI_STATE: UIState = {
   emailDialogVisibility: false,
   enrollProgramDialogError: null,
   enrollProgramDialogVisibility: false,
-  enrollCourseRunDialogVisibility: false,
+  enrollCourseDialogVisibility: false,
   toastMessage: null,
   enrollSelectedProgram: null,
   enrollSelectedCourseRun: null,
@@ -287,10 +287,10 @@ export const ui = (state: UIState = INITIAL_UI_STATE, action: Action) => {
       enrollProgramDialogVisibility: action.payload
     };
   }
-  case SET_ENROLL_COURSE_RUN_DIALOG_VISIBILITY: {
+  case SET_ENROLL_COURSE_DIALOG_VISIBILITY: {
     return {
       ...state,
-      enrollCourseRunDialogVisibility: action.payload
+      enrollCourseDialogVisibility: action.payload
     };
   }
   case SET_PHOTO_DIALOG_VISIBILITY: