feat: add timezone selector to selection plan edit page

[JpMaxMan]

Summary

• Adds a "Time Zone for Dates" dropdown to the Edit Selection Plan page, positioned between the checkboxes and the date fields
• Defaults to the summit's timezone but allows selecting any timezone for display/input of all 7 date fields (submission start/end, voting start/end, selection start/end, lock down date)
• Client-only change — dates are still sent to the API as UTC epoch timestamps, no backend changes needed

Test plan

• Navigate to a selection plan edit page (e.g. /app/summits/70/selection-plans/67)
• Verify the "Time Zone for Dates" dropdown appears below the checkboxes, defaulting to the summit's timezone
• Change the timezone and verify all date/time pickers update to reflect the new timezone
• Set a date in a non-summit timezone, save, and confirm the correct time is persisted
• Reload the page and confirm dates display correctly (dropdown resets to summit timezone)

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a timezone selector to the selection plan form; chosen timezone is applied to all date/time fields and previews.

• Localization

  • Added "Time Zone for Dates" label for the new selector.

• Bug Fixes

  • Removed a stray debug log from the form rendering.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a user-selectable timezone dropdown to the selection plan form, wires timezones from Redux through EditSelectionPlanPage to SelectionPlanForm, and makes all DateTimePicker and epoch-to-moment conversions use the form's selectedTimezone instead of the summit's timezone.

Changes

Cohort / File(s)	Summary
Form Component src/components/forms/selection-plan-form.js	Introduced selectedTimezone state initialized from currentSummit.time_zone_id; added timezoneDdl options from timezones; rendered timezone dropdown and updated on change; replaced direct uses of currentSummit.time_zone_id with selectedTimezone in DateTimePicker props and epoch conversions; removed stray console.log.
Page & State Wiring src/pages/selection-plans/edit-selection-plan-page.js	Added timezones prop to EditSelectionPlanPage, sourced from baseState.timezones in mapStateToProps, and passed timezones into SelectionPlanForm.
Localization src/i18n/en.json	Added time_zone_for_dates translation with value "Time Zone for Dates" under edit_selection_plan.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant Redux as Redux State
    participant Page as EditSelectionPlanPage
    participant Form as SelectionPlanForm
    participant Picker as DateTimePicker

    Redux->>Page: provide `timezones`, `currentSummit`
    Page->>Form: pass props (`timezones`, `currentSummit`, ...)
    Form->>Form: initialize `selectedTimezone = currentSummit.time_zone_id`
    Form->>Picker: render DateTimePicker using `selectedTimezone`
    Note over Form,Picker: User changes timezone via dropdown
    Form->>Form: update `selectedTimezone`
    Form->>Picker: re-render DateTimePicker with new timezone

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hop through props and spin the time,
A tiny dropdown—now dates align.
From summit tick to picker chime,
I swap the zone and sip chamomile. 🌿✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely summarizes the main change: adding a timezone selector to the selection plan edit page. It clearly conveys the primary purpose of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/add-time-zone-selection-plans

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/forms/selection-plan-form.js (1)

141-157: selectedTimezone is not reset when the edited entity changes.

componentDidUpdate resets entity and errors when props.entity changes (i.e., when the user navigates from one selection plan to another within the same SPA session), but it never resets selectedTimezone back to props.currentSummit.time_zone_id. This means a previously user-chosen non-default timezone silently persists for the newly loaded plan's date fields, contradicting the documented behaviour ("defaults to the summit timezone").

♻️ Proposed fix — reset timezone on entity change

     if (!shallowEqual(prevProps.entity, this.props.entity)) {
       state.entity = { ...this.props.entity };
       state.errors = {};
+      state.selectedTimezone = this.props.currentSummit.time_zone_id;
     }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/forms/selection-plan-form.js` around lines 141 - 157, When
props.entity changes in componentDidUpdate (the block that already sets
state.entity and state.errors), also reset selectedTimezone back to the summit
default by setting state.selectedTimezone =
this.props.currentSummit.time_zone_id (or props.currentSummit.time_zone_id) so
the new entity uses the summit timezone; ensure this key is included in the same
state object merged into setState alongside entity and errors (reference
componentDidUpdate, selectedTimezone, and props.currentSummit.time_zone_id).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/forms/selection-plan-form.js`:
- Line 330: timezoneDdl creation currently calls timezones.map(...) which throws
if timezones is undefined; change the code that builds timezoneDdl (symbol:
timezoneDdl) to defensively handle undefined by using a safe default (e.g.,
treat timezones as an empty array before mapping) or ensure baseState.timezones
is initialized in the reducer/props; update the mapping site that references
timezones (prop: timezones / baseState.timezones) to use a fallback like
(timezones || []) so timezoneDdl always receives an array.

---

Nitpick comments:
In `@src/components/forms/selection-plan-form.js`:
- Around line 141-157: When props.entity changes in componentDidUpdate (the
block that already sets state.entity and state.errors), also reset
selectedTimezone back to the summit default by setting state.selectedTimezone =
this.props.currentSummit.time_zone_id (or props.currentSummit.time_zone_id) so
the new entity uses the summit timezone; ensure this key is included in the same
state object merged into setState alongside entity and errors (reference
componentDidUpdate, selectedTimezone, and props.currentSummit.time_zone_id).