Asetetaan kuukausinäkymä kalenteriin oletukseksi

frontend/src/citizen-frontend/calendar/CalendarMonthView.tsx

@@ -630,7 +630,7 @@ const MonthPicker = React.memo(function MonthPicker({
   const i18n = useTranslation()
   return (
     <MonthPickerContainer>
-      <MonthTitle>
+      <MonthTitle data-qa="calendar-month-title">
         {`${i18n.common.datetime.months[selectedMonthData.month - 1]} ${selectedMonthData.year}`}
         {childSummaries.length > 0 && (
           <InlineInfoButton
@@ -649,13 +649,15 @@ const MonthPicker = React.memo(function MonthPicker({
         onClick={prevMonth}
         disabled={currentIndex === 0}
         aria-label={i18n.calendar.previousMonth}
+        data-qa="previous-month-button"
       />
       <Gap size="s" horizontal />
       <IconOnlyButton
         icon={faChevronRight}
         onClick={nextMonth}
         disabled={currentIndex === monthDataLength - 1}
         aria-label={i18n.calendar.nextMonth}
+        data-qa="next-month-button"
       />
     </MonthPickerContainer>
   )

frontend/src/citizen-frontend/calendar/CalendarPage.tsx

@@ -29,7 +29,6 @@ import { useTranslation } from '../localization'
 
 import AbsenceModal from './AbsenceModal'
 import ActionPickerModal from './ActionPickerModal'
-import CalendarGridView from './CalendarGridView'
 import CalendarListView from './CalendarListView'
 import CalendarMonthView from './CalendarMonthView'
 import CalendarNotifications from './CalendarNotifications'
@@ -73,11 +72,6 @@ function useEventsDefaultRange(): Result<CitizenCalendarEvent[]> {
 
 const CalendarPage = React.memo(function CalendarPage() {
   const user = useUser()
-
-  // TODO wip for featureFlags.calendarMonthView
-  const [overrideToUseCalendarList, setOverrideToUseCalendarList] =
-    useState(false)
-
   const data = useReservationsDefaultRange()
   const events = useEventsDefaultRange()
 
@@ -186,62 +180,28 @@ const CalendarPage = React.memo(function CalendarPage() {
                 </ContentArea>
               </RenderOnlyOn>
               <RenderOnlyOn desktop>
-                {featureFlags.calendarMonthView && (
-                  <CalendarToggle
-                    value={overrideToUseCalendarList}
-                    onClick={() =>
-                      setOverrideToUseCalendarList(!overrideToUseCalendarList)
-                    }
-                  />
-                )}
-                {featureFlags.calendarMonthView &&
-                !overrideToUseCalendarList ? (
-                  <CalendarMonthView
-                    childData={response.children}
-                    calendarDays={response.days}
-                    onCreateReservationClicked={
-                      openReservationModalWithoutInitialRange
-                    }
-                    onCreateAbsencesClicked={(date) =>
-                      openAbsenceModal(date, false)
-                    }
-                    onOpenDiscussionReservationsClicked={
-                      openDiscussionSurveyModal
-                    }
-                    onReportHolidaysClicked={openHolidayModal}
-                    selectedDate={
-                      modalState?.type === 'day' ? modalState.date : undefined
-                    }
-                    selectDate={openDayModal}
-                    includeWeekends={true}
-                    dayIsReservable={dayIsReservable}
-                    events={events}
-                    isDiscussionActionVisible={showDiscussions}
-                  />
-                ) : (
-                  <CalendarGridView
-                    childData={response.children}
-                    calendarDays={response.days}
-                    onCreateReservationClicked={
-                      openReservationModalWithoutInitialRange
-                    }
-                    onCreateAbsencesClicked={(date) =>
-                      openAbsenceModal(date, false)
-                    }
-                    onOpenDiscussionReservationsClicked={
-                      openDiscussionSurveyModal
-                    }
-                    onReportHolidaysClicked={openHolidayModal}
-                    selectedDate={
-                      modalState?.type === 'day' ? modalState.date : undefined
-                    }
-                    selectDate={openDayModal}
-                    includeWeekends={true}
-                    dayIsReservable={dayIsReservable}
-                    events={events}
-                    isDiscussionActionVisible={showDiscussions}
-                  />
-                )}
+                <CalendarMonthView
+                  childData={response.children}
+                  calendarDays={response.days}
+                  onCreateReservationClicked={
+                    openReservationModalWithoutInitialRange
+                  }
+                  onCreateAbsencesClicked={(date) =>
+                    openAbsenceModal(date, false)
+                  }
+                  onOpenDiscussionReservationsClicked={
+                    openDiscussionSurveyModal
+                  }
+                  onReportHolidaysClicked={openHolidayModal}
+                  selectedDate={
+                    modalState?.type === 'day' ? modalState.date : undefined
+                  }
+                  selectDate={openDayModal}
+                  includeWeekends={true}
+                  dayIsReservable={dayIsReservable}
+                  events={events}
+                  isDiscussionActionVisible={showDiscussions}
+                />
               </RenderOnlyOn>
               {modalState?.type === 'day' && (
                 <DayView
@@ -544,27 +504,3 @@ export default React.memo(function CalendarPageWrapper() {
     </>
   )
 })
-
-const CalendarToggle: React.FC<{
-  value: boolean
-  onClick: () => void
-}> = ({ value, onClick }) => {
-  return (
-    <button
-      id="wip-calendar-toggle"
-      style={{
-        display: 'block',
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        zIndex: 100,
-        padding: '4px 8px',
-        minWidth: '120px'
-      }}
-      tabIndex={-1}
-      onClick={onClick}
-    >
-      {value ? 'Month view' : 'List view'}
-    </button>
-  )
-}

frontend/src/citizen-frontend/calendar/DayElem.tsx

@@ -24,7 +24,7 @@ import {
   CalendarEventCount,
   CalendarEventCountContainer
 } from './CalendarEventCount'
-import { countEventsForDay } from './CalendarGridView'
+import { countEventsForDay } from './CalendarMonthView'
 import { HistoryOverlay } from './HistoryOverlay'
 import { ChildImageData } from './RoundChildImages'
 import { Reservations } from './calendar-elements'

frontend/src/citizen-frontend/calendar/hooks.ts

@@ -53,18 +53,19 @@ export function useMonthlySummaryInfo(
   const [displayAlert, setDisplayAlert] = useState(false)
 
   useEffect(() => {
-    setSummaryInfoOpen(false)
-
-    const shouldDisplayAlert = childSummaries.some(
-      ({ reservedMinutes, usedServiceMinutes, serviceNeedMinutes }) =>
-        reservedMinutes > serviceNeedMinutes ||
-        usedServiceMinutes > serviceNeedMinutes
+    setDisplayAlert(
+      childSummaries.some(
+        ({ reservedMinutes, usedServiceMinutes, serviceNeedMinutes }) =>
+          reservedMinutes > serviceNeedMinutes ||
+          usedServiceMinutes > serviceNeedMinutes
+      )
+    )
+    setSummaryInfoOpen(
+      childSummaries.some(
+        ({ reservedMinutes, serviceNeedMinutes }) =>
+          reservedMinutes > serviceNeedMinutes
+      )
     )
-
-    setDisplayAlert(shouldDisplayAlert)
-    if (shouldDisplayAlert) {
-      setSummaryInfoOpen(true)
-    }
   }, [childSummaries, selectedMonthData.month, selectedMonthData.year])
 
   const toggleSummaryInfo = useCallback(() => {

frontend/src/e2e-test/pages/citizen/citizen-calendar.ts

@@ -71,6 +71,10 @@ export default class CitizenCalendarPage {
     this.page.findByDataQa(`${this.type}-calendar-day-${date.formatIso()}`)
   monthlySummaryInfoButton = (year: number, month: number) =>
     this.page.findByDataQa(`monthly-summary-info-button-${month}-${year}`)
+  navigateNextMonthButton = () => this.page.findByDataQa('next-month-button')
+  navigatePreviousMonthButton = () =>
+    this.page.findByDataQa('previous-month-button')
+  monthTitle = () => this.page.findByDataQa('calendar-month-title')
 
   async waitUntilLoaded() {
     await this.page
@@ -166,6 +170,20 @@ export default class CitizenCalendarPage {
     )
   }
 
+  async navigateToNextMonth() {
+    return await this.navigateNextMonthButton().click()
+  }
+
+  async navigateToNextMonths(n: number) {
+    for (let i = 0; i < n; i++) {
+      await this.navigateToNextMonth()
+    }
+  }
+
+  async assertMonthTitle(title: string) {
+    await this.monthTitle().assertTextEquals(title)
+  }
+
   async openMonthlySummary(year: number, month: number) {
     await this.monthlySummaryInfoButton(year, month).click()
     return this.getMonthlySummary(year, month)

frontend/src/e2e-test/specs/0_citizen/citizen-reservations.spec.ts

@@ -61,7 +61,7 @@ async function openCalendarPage(
     mockedTime:
       options?.mockedTime ?? today.toHelsinkiDateTime(LocalTime.of(12, 0)),
     citizenCustomizations: {
-      featureFlags: { calendarMonthView: false, ...options?.featureFlags }
+      featureFlags: options?.featureFlags
     }
   })
   await enduserLogin(page, testAdult)
@@ -634,6 +634,11 @@ describe.each(e)('Citizen attendance reservations (%s)', (env) => {
     )
     await reservationsModal.save()
 
+    if (env === 'desktop') {
+      await calendarPage.navigateToNextMonths(3)
+      await calendarPage.assertMonthTitle('Huhtikuu 2022')
+    }
+
     for (const date of reservationRange.dates()) {
       if (date.isWeekend()) {
         // nothing
@@ -1205,10 +1210,7 @@ describe('Citizen calendar child visibility', () => {
     })
 
     page = await Page.open({
-      mockedTime: today.toHelsinkiDateTime(LocalTime.of(12, 0)),
-      citizenCustomizations: {
-        featureFlags: { calendarMonthView: false }
-      }
+      mockedTime: today.toHelsinkiDateTime(LocalTime.of(12, 0))
     })
     await enduserLogin(page, testAdult)
     header = new CitizenHeader(page, 'desktop')
@@ -1220,12 +1222,23 @@ describe('Citizen calendar child visibility', () => {
 
     await calendarPage.assertChildCountOnDay(placement1start.subDays(1), 0)
     await calendarPage.assertChildCountOnDay(placement1start, 1)
+
+    await calendarPage.navigateToNextMonths(6)
+    await calendarPage.assertMonthTitle('Heinäkuu 2022')
+
     await calendarPage.assertChildCountOnDay(placement1end, 1)
     await calendarPage.assertChildCountOnDay(placement1end.addDays(1), 0)
 
+    await calendarPage.navigateToNextMonths(2)
+    await calendarPage.assertMonthTitle('Syyskuu 2022')
+
     await calendarPage.assertChildCountOnDay(placement2start.subDays(1), 0)
     await calendarPage.assertChildCountOnDay(placement2start, 1)
     await calendarPage.assertChildCountOnDay(placement2start.addDays(1), 1)
+
+    await calendarPage.navigateToNextMonths(4)
+    await calendarPage.assertMonthTitle('Tammikuu 2023')
+
     await calendarPage.assertChildCountOnDay(placement2end, 1)
     await calendarPage.assertChildCountOnDay(placement2end.addDays(1), 0)
 
@@ -1239,6 +1252,10 @@ describe('Citizen calendar child visibility', () => {
     let dayView = await calendarPage.openDayView(today.subDays(1))
     await dayView.assertNoActivePlacementsMsgVisible()
     await dayView.close()
+
+    await calendarPage.navigateToNextMonths(12)
+    await calendarPage.assertMonthTitle('Tammikuu 2023')
+
     dayView = await calendarPage.openDayView(today.addYears(1).addDays(1))
     await dayView.assertNoActivePlacementsMsgVisible()
   })
@@ -1321,6 +1338,10 @@ describe('Citizen calendar child visibility', () => {
     const firstReservationDay = LocalDate.of(2022, 4, 15)
 
     const calendarPage = await openCalendarPage('desktop')
+
+    await calendarPage.navigateToNextMonths(3)
+    await calendarPage.assertMonthTitle('Huhtikuu 2022')
+
     await calendarPage.assertChildCountOnDay(firstReservationDay, 1)
 
     const holidayDayModal = await calendarPage.openDayView(firstReservationDay)

frontend/src/e2e-test/specs/0_citizen/citizen-show-service-usage.spec.ts

@@ -25,10 +25,7 @@ let page: Page
 
 async function openCalendarPage() {
   page = await Page.open({
-    mockedTime: today.toHelsinkiDateTime(LocalTime.of(12, 0)),
-    citizenCustomizations: {
-      featureFlags: { calendarMonthView: false }
-    }
+    mockedTime: today.toHelsinkiDateTime(LocalTime.of(12, 0))
   })
   await enduserLogin(page, testAdult)
   const header = new CitizenHeader(page, 'desktop')
@@ -285,6 +282,10 @@ describe('Service time alert', () => {
     }
 
     const calendarPage = await openCalendarPage()
+
+    await calendarPage.navigateToNextMonth()
+    await calendarPage.assertMonthTitle('Helmikuu 2022')
+
     // Should be open initially, so we call getMonthlySummary instead of openMonthlySummary
     const summary = calendarPage.getMonthlySummary(today.year, 2)
     await summary.title.assertTextEquals('Läsnäolot 01.02. - 28.02.2022')

frontend/src/e2e-test/specs/0_citizen/citizen-start-after-holiday-deadline.spec.ts

@@ -33,10 +33,7 @@ let guardian: DevPerson
 beforeEach(async () => {
   await resetServiceState()
   page = await Page.open({
-    mockedTime: mockedDate.toHelsinkiDateTime(LocalTime.of(12, 0)),
-    citizenCustomizations: {
-      featureFlags: { calendarMonthView: false }
-    }
+    mockedTime: mockedDate.toHelsinkiDateTime(LocalTime.of(12, 0))
   })
 
   const area = await Fixture.careArea(testCareArea).save()
@@ -70,6 +67,9 @@ describe('Placement start after deadline end', () => {
     await new CitizenHeader(page).selectTab('calendar')
     const calendar = new CitizenCalendarPage(page, 'desktop')
 
+    await calendar.navigateToNextMonth()
+    await calendar.assertMonthTitle('Kesäkuu 2024')
+
     await calendar.assertDay(startDate, [
       {
         childIds: [child.id],
@@ -98,6 +98,9 @@ describe('Placement start after deadline end', () => {
     await new CitizenHeader(page).selectTab('calendar')
     const calendar = new CitizenCalendarPage(page, 'desktop')
 
+    await calendar.navigateToNextMonth()
+    await calendar.assertMonthTitle('Kesäkuu 2024')
+
     await calendar.assertDay(startDate, [
       {
         childIds: [child.id],

frontend/src/lib-customizations/espoo/featureFlags.tsx

@@ -42,8 +42,7 @@ const features: Features = {
     jamixIntegration: true,
     forceUnpublishDocumentTemplate: true,
     invoiceDisplayAccountNumber: true,
-    serviceApplications: true,
-    calendarMonthView: true
+    serviceApplications: true
   },
   staging: {
     environmentLabel: 'Staging',
@@ -76,8 +75,7 @@ const features: Features = {
     jamixIntegration: true,
     forceUnpublishDocumentTemplate: true,
     invoiceDisplayAccountNumber: true,
-    serviceApplications: true,
-    calendarMonthView: true
+    serviceApplications: true
   },
   prod: {
     environmentLabel: null,
@@ -109,8 +107,7 @@ const features: Features = {
     discussionReservations: true,
     forceUnpublishDocumentTemplate: false,
     invoiceDisplayAccountNumber: true,
-    serviceApplications: false,
-    calendarMonthView: false
+    serviceApplications: false
   }
 }