= ({
+ coursePace,
+ assignments,
+ paceWeeks,
+ projectedEndDate
+}) => {
+ const formatDate = useDateTimeFormat('date.formats.long', coursePaceTimezone, ENV.LOCALE)
+ const enrollmentType = coursePace.context_type === 'Enrollment'
+ const startDateValue = coursePace.start_date
+ const startHelpText = START_DATE_CAPTIONS[coursePace.start_date_context]
+ let endDateValue, endHelpText
+ if (enrollmentType) {
+ endDateValue = projectedEndDate
+ endHelpText = END_DATE_CAPTIONS.user
+ } else {
+ endDateValue =
+ coursePace.end_date_context === 'hypothetical' ? projectedEndDate : coursePace.end_date
+ endHelpText = END_DATE_CAPTIONS[coursePace.end_date_context]
+ }
+
+ const hasAtLeastOneDate = () => !!(startDateValue || endDateValue)
+
+ const renderDate = (label, dateValue, helpText, testid) => {
+ return (
+
+
+ {label}
+
+
+ {dateValue ? (
+ formatDate(moment.tz(dateValue, coursePaceTimezone).toISOString(true))
+ ) : (
+
+ {DASH} {I18n.t('Not Specified')} {DASH}
+
+ )}
+
+
+
+ {helpText}
+
+
+
+ )
+ }
+
+ const renderSummary = () => {
+ return (
+
+
+
+
+ {I18n.t(
+ {
+ one: '1 assignment',
+ other: '%{count} assignments'
+ },
+ {count: assignments}
+ )}
+
+
+
+ |
+
+
+
+ {I18n.t(
+ {
+ one: '1 week',
+ other: '%{count} weeks'
+ },
+ {count: paceWeeks}
+ )}
+
+
+
+
+
+ {I18n.t('Dates shown in course time zone')}
+
+
+
+ )
+ }
+
+ return (
+
+
+ {hasAtLeastOneDate() && (
+ <>
+
+ {renderDate(
+ I18n.t('Start Date'),
+ startDateValue,
+ startHelpText,
+ 'coursepace-start-date'
+ )}
+
+
+ {renderDate(I18n.t('End Date'), endDateValue, endHelpText, 'coursepace-end-date')}
+
+ >
+ )}
+
+ {renderSummary()}
+
+
+
+ )
+}
+
+const mapStateToProps = (state: StoreState) => {
+ return {
+ coursePace: getCoursePace(state),
+ assignments: getCoursePaceItems(state).length,
+ paceWeeks: getPaceWeeks(state),
+ projectedEndDate: getProjectedEndDate(state)
+ }
+}
+export default connect(mapStateToProps)(ProjectedDates)
diff --git a/ui/features/course_paces/react/reducers/ui.ts b/ui/features/course_paces/react/reducers/ui.ts
index 64dcb59329e..970e199d03a 100644
--- a/ui/features/course_paces/react/reducers/ui.ts
+++ b/ui/features/course_paces/react/reducers/ui.ts
@@ -32,7 +32,7 @@ export const initialState: UIState = {
editingBlackoutDates: false,
showLoadingOverlay: false,
responsiveSize: 'large',
- showProjections: false
+ showProjections: true
}
/* Selectors */
diff --git a/ui/features/course_paces/react/types.ts b/ui/features/course_paces/react/types.ts
index c90f72c045b..43cb4bec0ce 100644
--- a/ui/features/course_paces/react/types.ts
+++ b/ui/features/course_paces/react/types.ts
@@ -69,11 +69,14 @@ export interface Module {
export type PaceContextTypes = 'Course' | 'Section' | 'Enrollment'
export type WorkflowStates = 'unpublished' | 'active' | 'deleted'
export type ProgressStates = 'queued' | 'running' | 'completed' | 'failed'
+export type ContextTypes = 'user' | 'course' | 'term' | 'hypothetical'
export interface CoursePace {
readonly id?: string
- readonly start_date?: string
- readonly end_date?: string
+ readonly start_date: string
+ readonly start_date_context: ContextTypes
+ readonly end_date: string | null
+ readonly end_date_context: ContextTypes
readonly workflow_state: WorkflowStates
readonly modules: Module[]
readonly exclude_weekends: boolean