Complete guided Scheduling interface patterns

2026-08-03 10:36:14 +02:00
parent 3d8272b28e
commit c17cbdae63
9 changed files with 334 additions and 52 deletions
@@ -116,6 +116,14 @@ type InvitationRevokeTarget = {
  requestId: string;
  participant: SchedulingParticipant;
 };
+type ConsequentialAction = {
+  kind: "close" | "reminder" | "holds" | "final-event";
+  requestId: string;
+};
+type DecisionTarget = {
+  requestId: string;
+  slot: SchedulingCandidateSlot;
+};

 const I18N = {
  actions: "i18n:govoplan-core.actions.c3cd636a",
@@ -133,6 +141,7 @@ const I18N = {
  configuredCalendar: "i18n:govoplan-scheduling.configured_calendar.e2e8ebd5",
  calendarDescription: "i18n:govoplan-scheduling.use_a_calendar_for_availability_checks_tentative_holds_a.20ccc1fa",
  finalEventLabel: "i18n:govoplan-scheduling.create_calendar_event.0b87cfcf",
+  finalEventEffect: "i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252",
  calendarIntegration: "i18n:govoplan-scheduling.calendar_integration.181ad18b",
  calendarUnavailable: "i18n:govoplan-scheduling.calendar_integration_requires_the_calendar_module_plus_c.f892cb1e",
  calendarRequiredAction: "i18n:govoplan-scheduling.enable_calendar_and_grant_calendar_availability_and_event_access.f1a20106",
@@ -143,12 +152,14 @@ const I18N = {
  chooseAvailability: "i18n:govoplan-scheduling.choose_availability.ac95b8f6",
  clipboardUnavailable: "i18n:govoplan-scheduling.the_invitation_link_could_not_be_copied_check_browser_clipboard_permissions_and_try_again.a8b17cbc",
  closePoll: "i18n:govoplan-scheduling.close_poll.a6a18916",
+  closePollEffect: "i18n:govoplan-scheduling.close_stops_accepting_new_availability_responses.a1d57519",
  closed: "i18n:govoplan-scheduling.closed.88d86b77",
  copyInvitationLink: "i18n:govoplan-scheduling.copy_a_fresh_invitation_link_for_value0.e3799c79",
  description: "i18n:govoplan-scheduling.description.55f8ebc8",
  determined: "i18n:govoplan-scheduling.determined.9f23293d",
  decideUnavailable: "i18n:govoplan-scheduling.a_slot_can_be_selected_after_the_request_is_closed.f91ec02d",
  decision: "i18n:govoplan-scheduling.decision.7f59a1f1",
+  decideOn: "i18n:govoplan-scheduling.decide_on_value.196409cd",
  discard: "i18n:govoplan-scheduling.discard.36fff63c",
  discardConfirm: "i18n:govoplan-scheduling.discard_this_unsaved_scheduling_request.4a956be2",
  edit: "i18n:govoplan-scheduling.edit_scheduling_request.7e749c19",
@@ -157,6 +168,7 @@ const I18N = {
  generalSettings: "i18n:govoplan-scheduling.participation_settings.8dc6f62c",
  free: "i18n:govoplan-scheduling.free.75f52718",
  holds: "i18n:govoplan-scheduling.create_tentative_holds.51c4744e",
+  holdsEffect: "i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884",
  invitationDeliveryUnavailable: "i18n:govoplan-scheduling.automatic_invitation_delivery_is_unavailable_copy_the_link_instead.4e39d0b3",
  invitationDeliveryFailed: "i18n:govoplan-scheduling.invitation_delivery_failed_the_link_was_created_but_was_not_delivered.8db0c306",
  invitationDeliveryRequested: "i18n:govoplan-scheduling.invitation_delivery_requested.1aaa78ba",
@@ -216,6 +228,7 @@ const I18N = {
  refresh: "i18n:govoplan-scheduling.refresh_requests.0a3ed7a1",
  reloadInvitation: "i18n:govoplan-scheduling.reload_the_request_before_changing_this_invitation.9e685df4",
  reminder: "i18n:govoplan-scheduling.send_reminder.cf5eb3bf",
+  reminderEffect: "i18n:govoplan-scheduling.reminder_creates_a_notification_job_for_every_active_par.7ec68797",
  revokeInvitation: "i18n:govoplan-scheduling.revoke_the_invitation_link_for_value0.15a9c9fa",
  revokeInvitationConfirm: "i18n:govoplan-scheduling.revoke_the_current_invitation_link_for_value0_it_will_stop_working_immediately.3cdc5817",
  revokeInvitationLabel: "i18n:govoplan-scheduling.revoke_invitation_link.87bf89cf",
@@ -301,6 +314,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
  const [notificationsUnavailable, setNotificationsUnavailable] = useState(false);
  const [detailsLoading, setDetailsLoading] = useState(false);
  const [revokeInvitationTarget, setRevokeInvitationTarget] = useState<InvitationRevokeTarget | null>(null);
+  const [consequentialAction, setConsequentialAction] = useState<ConsequentialAction | null>(null);
+  const [decisionTarget, setDecisionTarget] = useState<DecisionTarget | null>(null);
  const [invitationActionClock, setInvitationActionClock] = useState(() => new Date());
  const detailLoadSequence = useRef(0);

@@ -365,6 +380,9 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
    () => availabilityComment !== savedAvailabilityComment || !availabilityValuesEqual(availability, savedAvailability),
    [availability, availabilityComment, savedAvailability, savedAvailabilityComment]
  );
+  const consequentialActionCopy = consequentialAction
+    ? schedulingActionConfirmation(consequentialAction.kind)
+    : null;
  const editorOriginal = editorMode === "edit"
    ? requests.find((request) => request.id === editingRequestId) ?? null
    : null;
@@ -798,6 +816,31 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
    await runParticipantInvitationAction(target.requestId, target.participant, "revoke");
  }

+  async function confirmSchedulingAction() {
+    if (!consequentialAction || selected?.id !== consequentialAction.requestId) return;
+    const action = consequentialAction;
+    setConsequentialAction(null);
+    if (action.kind === "close") {
+      await runAction(() => closeSchedulingRequest(settings, action.requestId));
+    } else if (action.kind === "reminder") {
+      await runAction(() => createSchedulingNotifications(settings, action.requestId, "reminder"));
+    } else if (action.kind === "holds") {
+      await runAction(() => createSchedulingHolds(settings, action.requestId));
+    } else {
+      await runAction(() => createSchedulingCalendarEvent(settings, action.requestId));
+    }
+  }
+
+  async function confirmSchedulingDecision() {
+    if (!decisionTarget || selected?.id !== decisionTarget.requestId) return;
+    const target = decisionTarget;
+    setDecisionTarget(null);
+    await runAction(() => decideSchedulingRequest(settings, target.requestId, {
+      slot_id: target.slot.id,
+      handoff_to_calendar: selected.create_calendar_event_on_decision
+    }));
+  }
+
  async function sendAvailability(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    await persistAvailability();
@@ -859,9 +902,20 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                    label={I18N.refresh}
                    icon={<RefreshCw aria-hidden="true" size={16} />}
                    onClick={() => requestNavigation(() => void loadRequests(selected?.id))}
-                    disabled={loading || saving} />
+                    disabled={loading || saving}
+                    disabledReason={saving ? I18N.saving : undefined} />
+                  <DocumentationHelpLink
+                    reference={{
+                      topicId: "scheduling.find-and-decide-meeting-time",
+                      documentationType: "user"
+                    }} />
                  {canCreateOrWrite ? (
-                    <Button type="button" variant="primary" onClick={beginCreate} disabled={saving}>
+                    <Button
+                      type="button"
+                      variant="primary"
+                      onClick={beginCreate}
+                      disabled={saving}
+                      disabledReason={saving ? I18N.saving : undefined}>
                      <Plus aria-hidden="true" size={16} /> {I18N.add}
                    </Button>
                  ) : null}
@@ -909,8 +963,24 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                    </div>
                  </div>
                  <div className="scheduling-page-actions">
-                    <Button type="button" onClick={discardEditor} disabled={saving}>{I18N.discard}</Button>
-                    <Button type="submit" form="scheduling-editor-form" variant="primary" disabled={saving || !canCreateOrWrite}>
+                    <DocumentationHelpLink
+                      reference={{
+                        topicId: "scheduling.find-and-decide-meeting-time",
+                        documentationType: "user"
+                      }} />
+                    <Button
+                      type="button"
+                      onClick={discardEditor}
+                      disabled={saving}
+                      disabledReason={saving ? I18N.saving : undefined}>
+                      {I18N.discard}
+                    </Button>
+                    <Button
+                      type="submit"
+                      form="scheduling-editor-form"
+                      variant="primary"
+                      disabled={saving || !canCreateOrWrite}
+                      disabledReason={saving ? I18N.saving : !canCreateOrWrite ? I18N.unavailable : undefined}>
                      <Save aria-hidden="true" size={16} /> {saving ? I18N.saving : I18N.save}
                    </Button>
                  </div>
@@ -1092,7 +1162,11 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                          documentationType: "user"
                        }} />
                      {canEditSelected ? (
-                        <Button type="button" onClick={() => beginEdit(selected)} disabled={saving}>
+                        <Button
+                          type="button"
+                          onClick={() => beginEdit(selected)}
+                          disabled={saving}
+                          disabledReason={saving ? I18N.saving : undefined}>
                          <Pencil aria-hidden="true" size={16} /> {I18N.edit}
                        </Button>
                      ) : null}
@@ -1101,8 +1175,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                          request={selected}
                          saving={saving}
                          onOpen={() => void runAction(() => openSchedulingRequest(settings, selected.id))}
-                          onClose={() => requestNavigation(() => void runAction(() => closeSchedulingRequest(settings, selected.id)))}
-                          onReminder={() => void runAction(() => createSchedulingNotifications(settings, selected.id, "reminder"))} />
+                          onClose={() => requestNavigation(() => setConsequentialAction({ kind: "close", requestId: selected.id }))}
+                          onReminder={() => setConsequentialAction({ kind: "reminder", requestId: selected.id })} />
                      ) : null}
                    </div>
                  )}>
@@ -1154,7 +1228,16 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                        variant="primary"
                        type="submit"
                        form="scheduling-response-form"
-                        disabled={saving || availabilityLoading || !canRespond || (selectedParticipant.status === "responded" && !selected.allow_participant_updates)}>
+                        disabled={saving || availabilityLoading || !canRespond || (selectedParticipant.status === "responded" && !selected.allow_participant_updates)}
+                        disabledReason={saving
+                          ? I18N.saving
+                          : availabilityLoading
+                            ? I18N.loading
+                            : !canRespond
+                              ? I18N.unavailable
+                              : selectedParticipant.status === "responded" && !selected.allow_participant_updates
+                                ? I18N.responseRecorded
+                                : undefined}>
                        <Send aria-hidden="true" size={16} />
                        {selectedParticipant.status === "responded" ? I18N.updateResponse : I18N.sendResponse}
                      </Button>
@@ -1210,10 +1293,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                    saving={saving}
                    allowMaybe={selected.allow_maybe}
                    maxParticipantsPerOption={selected.max_participants_per_option}
-                    onDecide={(slot) => void runAction(() => decideSchedulingRequest(settings, selected.id, {
-                      slot_id: slot.id,
-                      handoff_to_calendar: selected.create_calendar_event_on_decision
-                    }))} />
+                    onDecide={(slot) => setDecisionTarget({ requestId: selected.id, slot })} />
                </Card>

                {selected.calendar_integration_enabled && canManageSelected && (showPlanningCalendarActions || showFinalCalendarAction || selected.calendar_event_id) ? (
@@ -1225,7 +1305,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                          <Button
                            type="button"
                            disabled={saving || !canReadAvailability}
-                            disabledReason={!canReadAvailability ? I18N.requiresAvailabilityRead : undefined}
+                            disabledReason={saving ? I18N.saving : !canReadAvailability ? I18N.requiresAvailabilityRead : undefined}
                            onClick={() => void runAction(() => evaluateSchedulingFreeBusy(settings, selected.id))}>
                            <RefreshCw aria-hidden="true" size={16} /> {I18N.checkFreeBusy}
                          </Button>
@@ -1234,8 +1314,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                          <Button
                            type="button"
                            disabled={saving || !canWriteCalendarEvent}
-                            disabledReason={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
-                            onClick={() => void runAction(() => createSchedulingHolds(settings, selected.id))}>
+                            disabledReason={saving ? I18N.saving : !canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
+                            onClick={() => setConsequentialAction({ kind: "holds", requestId: selected.id })}>
                            <Clock aria-hidden="true" size={16} /> {I18N.holds}
                          </Button>
                        ) : null}
@@ -1243,8 +1323,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                          <Button
                            type="button"
                            disabled={saving || !canWriteCalendarEvent}
-                            disabledReason={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
-                            onClick={() => void runAction(() => createSchedulingCalendarEvent(settings, selected.id))}>
+                            disabledReason={saving ? I18N.saving : !canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
+                            onClick={() => setConsequentialAction({ kind: "final-event", requestId: selected.id })}>
                            <CalendarCheck aria-hidden="true" size={16} /> {I18N.finalEventLabel}
                          </Button>
                        ) : null}
@@ -1326,6 +1406,25 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
        busy={saving}
        onCancel={() => setRevokeInvitationTarget(null)}
        onConfirm={() => void confirmRevokeInvitation()} />
+      <ConfirmDialog
+        open={Boolean(consequentialAction && consequentialActionCopy)}
+        title={consequentialActionCopy?.title ?? I18N.unavailable}
+        message={consequentialActionCopy?.message ?? I18N.unavailable}
+        confirmLabel={consequentialActionCopy?.confirmLabel}
+        tone={consequentialAction?.kind === "close" ? "danger" : "default"}
+        busy={saving}
+        onCancel={() => setConsequentialAction(null)}
+        onConfirm={() => void confirmSchedulingAction()} />
+      <ConfirmDialog
+        open={Boolean(decisionTarget)}
+        title={I18N.decision}
+        message={i18nMessage(I18N.decideOn, { value0: decisionTarget?.slot.label ?? "" })}
+        confirmLabel={decisionTarget
+          ? i18nMessage(I18N.decideOn, { value0: decisionTarget.slot.label })
+          : I18N.decision}
+        busy={saving}
+        onCancel={() => setDecisionTarget(null)}
+        onConfirm={() => void confirmSchedulingDecision()} />
    </main>
  );

@@ -1613,6 +1712,23 @@ function ParticipationStats({
  );
 }

+function schedulingActionConfirmation(kind: ConsequentialAction["kind"]): {
+  title: string;
+  message: string;
+  confirmLabel: string;
+} {
+  if (kind === "close") {
+    return { title: I18N.closePoll, message: I18N.closePollEffect, confirmLabel: I18N.closePoll };
+  }
+  if (kind === "reminder") {
+    return { title: I18N.reminder, message: I18N.reminderEffect, confirmLabel: I18N.reminder };
+  }
+  if (kind === "holds") {
+    return { title: I18N.holds, message: I18N.holdsEffect, confirmLabel: I18N.holds };
+  }
+  return { title: I18N.finalEventLabel, message: I18N.finalEventEffect, confirmLabel: I18N.finalEventLabel };
+}
+
 function LifecycleActions({
  request,
  saving,
@@ -1627,13 +1743,13 @@ function LifecycleActions({
  onReminder: () => void;
 }) {
  if (request.status === "draft") {
-    return <Button type="button" variant="primary" disabled={saving} onClick={onOpen}><Send aria-hidden="true" size={16} /> {I18N.openPoll}</Button>;
+    return <Button type="button" variant="primary" disabled={saving} disabledReason={saving ? I18N.saving : undefined} onClick={onOpen}><Send aria-hidden="true" size={16} /> {I18N.openPoll}</Button>;
  }
  if (request.status === "collecting") {
    return (
      <div className="scheduling-actions">
-        <Button type="button" disabled={saving} onClick={onReminder}><Bell aria-hidden="true" size={16} /> {I18N.reminder}</Button>
-        <Button type="button" variant="primary" disabled={saving} onClick={onClose}><XCircle aria-hidden="true" size={16} /> {I18N.closePoll}</Button>
+        <Button type="button" disabled={saving} disabledReason={saving ? I18N.saving : undefined} onClick={onReminder}><Bell aria-hidden="true" size={16} /> {I18N.reminder}</Button>
+        <Button type="button" variant="primary" disabled={saving} disabledReason={saving ? I18N.saving : undefined} onClick={onClose}><XCircle aria-hidden="true" size={16} /> {I18N.closePoll}</Button>
      </div>
    );
  }
@@ -1859,7 +1975,7 @@ function CandidateSlotsGrid({
        label: i18nMessage("i18n:govoplan-scheduling.decide_on_value.196409cd", { value0: slot.label }),
        icon: <Check aria-hidden="true" size={16} />,
        disabled: saving || !decisionEnabled,
-        disabledReason: !decisionEnabled ? I18N.decideUnavailable : undefined,
+        disabledReason: saving ? I18N.saving : !decisionEnabled ? I18N.decideUnavailable : undefined,
        onClick: () => onDecide(slot)
      }]} />
    } satisfies DataGridColumn<SchedulingCandidateSlot>] : [])
@@ -1925,7 +2041,7 @@ function ParticipantsGrid({
                label: i18nMessage(I18N.copyInvitationLink, { value0: label }),
                icon: <Copy aria-hidden="true" size={16} />,
                disabled: saving || Boolean(copyDisabledReason),
-                disabledReason: copyDisabledReason,
+                disabledReason: saving ? I18N.saving : copyDisabledReason,
                onClick: () => onCopy(participant)
              },
              {
@@ -1933,7 +2049,7 @@ function ParticipantsGrid({
                label: i18nMessage(I18N.sendInvitation, { value0: label }),
                icon: <Send aria-hidden="true" size={16} />,
                disabled: saving || Boolean(deliveryDisabledReason),
-                disabledReason: deliveryDisabledReason,
+                disabledReason: saving ? I18N.saving : deliveryDisabledReason,
                onClick: () => onSend(participant)
              },
              {
@@ -1942,7 +2058,7 @@ function ParticipantsGrid({
                icon: <Link2Off aria-hidden="true" size={16} />,
                variant: "danger",
                disabled: saving || Boolean(revokeDisabledReason),
-                disabledReason: revokeDisabledReason,
+                disabledReason: saving ? I18N.saving : revokeDisabledReason,
                onClick: () => onRevoke(participant)
              }
            ]} />
@@ -4,8 +4,10 @@ import {
  Button,
  Card,
  DismissibleAlert,
+  DocumentationHelpLink,
  FormField,
  LoadingFrame,
+  PasswordField,
  formatDateTime,
  type ApiSettings,
  type AuthInfo
@@ -44,6 +46,7 @@ const I18N = {
  password: "i18n:govoplan-scheduling.guest_password.94545e82",
  response: "i18n:govoplan-scheduling.your_availability.f86c8215",
  saved: "i18n:govoplan-scheduling.your_response_has_been_recorded.b855088d",
+  saving: "i18n:govoplan-scheduling.saving.56a2285c",
  submit: "i18n:govoplan-scheduling.submit_response.a5f0c053",
  unavailable: "i18n:govoplan-scheduling.unavailable.2c9c1f79"
 } as const;
@@ -166,7 +169,15 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli
        )}

        {!response && !loading && (
-          <Card title={I18N.accessDetails}>
+          <Card
+            title={I18N.accessDetails}
+            actions={(
+              <DocumentationHelpLink
+                reference={{
+                  topicId: "scheduling.find-and-decide-meeting-time",
+                  documentationType: "user"
+                }} />
+            )}>
            <form className="scheduling-public-access-form" onSubmit={openRequest}>
              <p className="muted">{I18N.accessHelp}</p>
              {accessAttempted && error && <DismissibleAlert tone="danger">{error}</DismissibleAlert>}
@@ -180,16 +191,20 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli
                  />
                </FormField>
                <FormField label={I18N.password}>
-                  <input
-                    type="password"
+                  <PasswordField
                    autoComplete="current-password"
                    value={password}
-                    onChange={(event) => setPassword(event.target.value)}
-                  />
+                    onValueChange={setPassword} />
                </FormField>
              </div>
              <div className="scheduling-public-actions">
-                <Button type="submit" variant="primary">{I18N.accessRequest}</Button>
+                <Button
+                  type="submit"
+                  variant="primary"
+                  disabled={loading}
+                  disabledReason={loading ? I18N.loading : undefined}>
+                  {I18N.accessRequest}
+                </Button>
              </div>
            </form>
          </Card>
@@ -197,7 +212,15 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli

        {response && (
          <form className="scheduling-public-content" onSubmit={saveResponse}>
-            <Card title={response.title}>
+            <Card
+              title={response.title}
+              actions={(
+                <DocumentationHelpLink
+                  reference={{
+                    topicId: "scheduling.find-and-decide-meeting-time",
+                    documentationType: "user"
+                  }} />
+              )}>
              {response.description && <p className="scheduling-public-description">{response.description}</p>}
              <dl className="scheduling-public-summary">
                {response.location && <><dt>i18n:govoplan-scheduling.location.d219c681</dt><dd>{response.location}</dd></>}
@@ -263,7 +286,13 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli
              )}
              {collecting && (
                <div className="scheduling-public-actions">
-                  <Button type="submit" variant="primary" disabled={saving}>{I18N.submit}</Button>
+                  <Button
+                    type="submit"
+                    variant="primary"
+                    disabled={saving}
+                    disabledReason={saving ? I18N.saving : undefined}>
+                    {I18N.submit}
+                  </Button>
                </div>
              )}
            </Card>}
@@ -1,11 +1,13 @@
-import { useCallback } from "react";
+import { useCallback, type ReactNode } from "react";
 import { CalendarClock } from "lucide-react";
 import { Link } from "react-router";
 import {
  DashboardWidgetList,
  DismissibleAlert,
+  DocumentationHelpLink,
  LoadingFrame,
  StatusBadge,
+  formatDateTime,
  useDashboardWidgetData,
  type ApiSettings,
  type DashboardWidgetConfiguration
@@ -15,6 +17,17 @@ import {
  type SchedulingRequest
 } from "../../api/scheduling";

+const I18N = {
+  candidateSlots: "i18n:govoplan-scheduling.candidate_slots.c414946b",
+  deadline: "i18n:govoplan-scheduling.response_deadline.7fd9e3aa",
+  draft: "i18n:govoplan-scheduling.draft.23d33e22",
+  empty: "i18n:govoplan-scheduling.no_scheduling_request_selected.ac940664",
+  loading: "i18n:govoplan-scheduling.loading_scheduling_requests.f42be95d",
+  open: "i18n:govoplan-scheduling.open.cf9b7706",
+  openScheduling: "i18n:govoplan-scheduling.open_in_scheduling.48df1541",
+  responded: "i18n:govoplan-scheduling.responded.4f218211"
+} as const;
+
 export default function SchedulingRequestsWidget({
  settings,
  refreshKey,
@@ -43,14 +56,14 @@ export default function SchedulingRequestsWidget({
  );

  return (
-    <LoadingFrame loading={loading} label="Loading scheduling requests">
+    <LoadingFrame loading={loading} label={I18N.loading}>
      {error && (
        <DismissibleAlert tone="warning" resetKey={error}>
          {error}
        </DismissibleAlert>
      )}
      <DashboardWidgetList
-        emptyText="No scheduling requests are awaiting responses."
+        emptyText={I18N.empty}
        items={(requests ?? []).map((request) => ({
          id: request.id,
          title: request.title,
@@ -60,15 +73,20 @@ export default function SchedulingRequestsWidget({
          trailing: (
            <StatusBadge
              status={request.status}
-              label={request.status === "collecting" ? "Open" : "Draft"}
+              label={request.status === "collecting" ? I18N.open : I18N.draft}
            />
          ),
-          to: "/scheduling"
+          to: `/scheduling?request_id=${encodeURIComponent(request.id)}`
        }))}
      />
      <div className="dashboard-contribution-footer">
+        <DocumentationHelpLink
+          reference={{
+            topicId: "scheduling.find-and-decide-meeting-time",
+            documentationType: "user"
+          }} />
        <Link className="btn btn-secondary" to="/scheduling">
-          Open scheduling
+          {I18N.openScheduling}
        </Link>
      </div>
    </LoadingFrame>
@@ -94,17 +112,17 @@ function compareRequests(
  );
 }

-function responseLabel(request: SchedulingRequest): string {
+function responseLabel(request: SchedulingRequest): ReactNode {
  const responded = request.participant_aggregate.status_counts.responded ?? 0;
-  return `${responded} of ${request.participant_aggregate.total} responded`;
+  return <>{responded}/{request.participant_aggregate.total} {I18N.responded}</>;
 }

-function deadlineLabel(request: SchedulingRequest): string {
-  if (!request.deadline_at) return `${request.slots.length} options`;
-  return `Due ${new Intl.DateTimeFormat(undefined, {
+function deadlineLabel(request: SchedulingRequest): ReactNode {
+  if (!request.deadline_at) return <>{request.slots.length} {I18N.candidateSlots}</>;
+  return <>{I18N.deadline}: {formatDateTime(request.deadline_at, {
    day: "2-digit",
    month: "short"
-  }).format(new Date(request.deadline_at))}`;
+  })}</>;
 }

 function numberSetting(