@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/legacy/calendar/native-recurrence-form.tsx

@@ -0,0 +1,340 @@
+'use client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type {
+  CalendarProviderSeriesCapabilities,
+  CalendarProviderSeriesSource,
+} from '@tuturuuu/internal-api/calendar-provider-series';
+import {
+  createNativeCalendarSeries,
+  mutateNativeCalendarSeries,
+  type NativeCalendarSeries,
+} from '@tuturuuu/internal-api/calendar-series';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { inspectCalendarRecurrenceSlot } from '@tuturuuu/utils/calendar-recurrence';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { nativeOccurrencesKey } from '../../../../hooks/use-native-calendar-occurrences';
+import type { useWorkspaceActor } from '../../../../hooks/use-workspace-visibility';
+import { Button } from '../../button';
+import { DialogFooter } from '../../dialog';
+import { Label } from '../../label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../select';
+import { NativeRecurrenceFields } from './native-recurrence-fields';
+import {
+  newRecurrenceDraft,
+  type RecurrenceScope,
+  recurrenceDraftPayload,
+  recurrenceEditDraft,
+  recurrenceMutation,
+  recurrenceRequestIdentity,
+} from './native-recurrence-model';
+import { useProviderRecurrenceOperation } from './use-provider-recurrence-operation';
+export function NativeRecurrenceForm({
+  wsId,
+  actor,
+  series,
+  occurrence,
+  timezone,
+  readOnly,
+  capabilities,
+  onDone,
+  onReload,
+}: {
+  wsId: string;
+  actor: NonNullable<ReturnType<typeof useWorkspaceActor>>;
+  series?: NativeCalendarSeries;
+  occurrence?: CalendarEvent;
+  timezone?: string;
+  readOnly: boolean;
+  capabilities?: CalendarProviderSeriesCapabilities;
+  onDone: () => void;
+  onReload: () => void;
+}) {
+  const t = useTranslations('calendar.recurrence');
+  const client = useQueryClient();
+  const [scope, setScope] = useState<RecurrenceScope>('this');
+  const createsFutureTail = useMemo(() => {
+    if (scope !== 'future' || !series || !occurrence?.originalStartLocal)
+      return false;
+    try {
+      return (
+        inspectCalendarRecurrenceSlot({
+          rule: series.rule,
+          anchor: series.anchor,
+          originalStartLocal: occurrence.originalStartLocal,
+        }).precedingCount > 0
+      );
+    } catch {
+      return false;
+    }
+  }, [scope, series, occurrence?.originalStartLocal]);
+  const [draft, setDraft] = useState(() =>
+    series && occurrence
+      ? recurrenceEditDraft(series, occurrence, 'this')
+      : newRecurrenceDraft(
+          timezone && timezone !== 'auto'
+            ? timezone
+            : Intl.DateTimeFormat().resolvedOptions().timeZone
+        )
+  );
+  const identity = useRef(recurrenceRequestIdentity());
+  const [invalid, setInvalid] = useState(false);
+  const [sourceId, setSourceId] = useState('native');
+  const selectedSource =
+    series?.providerSource ??
+    capabilities?.sources.find(
+      (source) => `${source.provider}:${source.connectionId}` === sourceId
+    );
+  const providerSource: CalendarProviderSeriesSource | undefined =
+    selectedSource && {
+      provider: selectedSource.provider,
+      connectionId: selectedSource.connectionId,
+    };
+  const providerAllowed =
+    !!providerSource &&
+    !!capabilities?.enabled &&
+    capabilities.sources.some(
+      (source) =>
+        source.provider === providerSource.provider &&
+        source.connectionId === providerSource.connectionId
+    );
+  const finish = useCallback(() => {
+    actor.assertActive();
+    void client.invalidateQueries({ queryKey: nativeOccurrencesKey(wsId) });
+    void client.invalidateQueries({
+      queryKey: ['native-calendar-series', wsId, actor.actorId],
+    });
+    onDone();
+  }, [actor, client, wsId, onDone]);
+  const finishProvider = useCallback(() => {
+    actor.assertActive();
+    // Calendar combines canonical occurrences with retained provider/database views.
+    // Revalidate those views only after provider publication, including a resumed creation.
+    void client.invalidateQueries({
+      queryKey: ['databaseCalendarEvents', wsId],
+    });
+    void client.invalidateQueries({ queryKey: ['googleCalendarEvents', wsId] });
+    finish();
+  }, [actor, client, wsId, finish]);
+  const providerOperation = useProviderRecurrenceOperation({
+    wsId,
+    actor,
+    identity: occurrence?.id ?? 'new',
+    onApplied: finishProvider,
+  });
+  const providerBlocked = !!series?.providerSource && !providerAllowed;
+  const frozen = readOnly || providerBlocked || providerOperation.pending;
+
+  const submission = useMutation({
+    mutationFn: async (action: 'update' | 'delete') => {
+      actor.assertActive();
+      if (frozen) throw new Error('Calendar is read only');
+      const actorKey = `${actor.actorId}:${wsId}:${providerSource ? `${providerSource.provider}:${providerSource.connectionId}` : 'native'}`;
+      if (series && occurrence) {
+        const payload = recurrenceMutation(
+          draft,
+          series,
+          occurrence,
+          scope,
+          'placeholder',
+          action
+        );
+        const { requestId: _placeholder, ...intent } = payload;
+        const requestId = identity.current(actorKey, intent, action);
+        if (providerSource) {
+          if (!providerAllowed) throw new Error('Provider source unavailable');
+          providerOperation.submission.mutate({
+            ...payload,
+            requestId,
+            action,
+            source: providerSource,
+            seriesId: series.id,
+          });
+          return 'provider' as const;
+        }
+        await mutateNativeCalendarSeries(
+          wsId,
+          series.id,
+          { ...payload, requestId },
+          action
+        );
+      } else {
+        if (action === 'delete') throw new Error('No series selected');
+        const payload = recurrenceDraftPayload(draft);
+        const requestId = identity.current(actorKey, payload, 'create');
+        if (sourceId !== 'native') {
+          if (!providerSource || !providerAllowed)
+            throw new Error('Provider source unavailable');
+          providerOperation.submission.mutate({
+            ...payload,
+            requestId,
+            action: 'create',
+            source: providerSource,
+          });
+          return 'provider' as const;
+        }
+        await createNativeCalendarSeries(wsId, { ...payload, requestId });
+      }
+      actor.assertActive();
+    },
+    onSuccess: (result) => {
+      if (result !== 'provider') finish();
+    },
+  });
+  const submit = (action: 'update' | 'delete') => {
+    setInvalid(false);
+    try {
+      if (action === 'update')
+        recurrenceDraftPayload(draft, !!series && scope === 'this');
+      actor.assertActive();
+      if (!frozen) submission.mutate(action);
+    } catch {
+      setInvalid(true);
+    }
+  };
+  const conflict =
+    submission.error instanceof InternalApiError &&
+    submission.error.status === 409;
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit('update');
+      }}
+      className="space-y-4"
+    >
+      {!series && (
+        <div className="space-y-1">
+          <Label>{t('provider_source')}</Label>
+          <Select
+            value={sourceId}
+            disabled={frozen || submission.isPending}
+            onValueChange={setSourceId}
+          >
+            <SelectTrigger aria-label={t('provider_source')}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="native">{t('native_source')}</SelectItem>
+              {capabilities?.enabled &&
+                capabilities.sources.map((source) => (
+                  <SelectItem
+                    key={`${source.provider}:${source.connectionId}`}
+                    value={`${source.provider}:${source.connectionId}`}
+                  >
+                    {source.label} ·{' '}
+                    {source.provider === 'google' ? 'Google' : 'Outlook'}
+                  </SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+      {providerBlocked && <p role="status">{t('provider_disabled')}</p>}
+      {providerOperation.pending && (
+        <div role="status" className="space-y-2">
+          <p>{t('provider_pending')}</p>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={providerOperation.submission.isPending}
+            onClick={providerOperation.retry}
+          >
+            {t('provider_retry')}
+          </Button>
+        </div>
+      )}
+      {providerOperation.submission.isError && (
+        <p role="alert" className="text-destructive text-sm">
+          {t('failed')}
+        </p>
+      )}
+      {series && occurrence && (
+        <div className="space-y-1">
+          <Label>{t('scope')}</Label>
+          <Select
+            value={scope}
+            disabled={frozen || submission.isPending}
+            onValueChange={(value) => {
+              const next = value as RecurrenceScope;
+              setScope(next);
+              setDraft(recurrenceEditDraft(series, occurrence, next));
+              setInvalid(false);
+              submission.reset();
+            }}
+          >
+            <SelectTrigger aria-label={t('scope')}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {(['this', 'all', 'future'] as const).map((value) => (
+                <SelectItem key={value} value={value}>
+                  {t(value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {createsFutureTail && (
+            <p className="text-muted-foreground text-xs">
+              {t('futureExceptionsReset')}
+            </p>
+          )}
+        </div>
+      )}
+      <NativeRecurrenceFields
+        draft={draft}
+        setDraft={(value) => {
+          setDraft(value);
+          setInvalid(false);
+        }}
+        nativeStorageHint={!series?.providerSource && sourceId === 'native'}
+        occurrenceOnly={!!series && scope === 'this'}
+        disabled={frozen || submission.isPending}
+      />
+      {(invalid || submission.isError) && (
+        <p role="alert" className="text-destructive text-sm">
+          {t(invalid ? 'invalid' : conflict ? 'conflict' : 'failed')}
+        </p>
+      )}
+      <DialogFooter>
+        {conflict && (
+          <Button type="button" variant="outline" onClick={onReload}>
+            {t('reload')}
+          </Button>
+        )}
+        {series && (
+          <Button
+            type="button"
+            variant="destructive"
+            disabled={frozen || submission.isPending}
+            onClick={() => submit('delete')}
+          >
+            {t('delete')}
+          </Button>
+        )}
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onDone}
+          disabled={frozen || submission.isPending}
+        >
+          {t('cancel')}
+        </Button>
+        <Button type="submit" disabled={frozen || submission.isPending}>
+          {t(
+            submission.isPending || providerOperation.pending
+              ? 'saving'
+              : 'save'
+          )}
+        </Button>
+      </DialogFooter>
+    </form>
+  );
+}

package/src/components/ui/legacy/calendar/native-recurrence-model.test.ts

@@ -0,0 +1,234 @@
+import type { NativeCalendarSeries } from '@tuturuuu/internal-api/calendar-series';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { expandCalendarRecurrence } from '@tuturuuu/utils/calendar-recurrence';
+import { describe, expect, it } from 'vitest';
+import {
+  newRecurrenceDraft,
+  recurrenceAllDay,
+  recurrenceDraftPayload,
+  recurrenceEditDraft,
+  recurrenceMutation,
+  recurrenceRequestIdentity,
+} from './native-recurrence-model';
+
+const series: NativeCalendarSeries = {
+  id: 'series',
+  ws_id: 'ws',
+  revision: 7,
+  workspace_calendar_id: null,
+  rule: {
+    version: 1,
+    frequency: 'daily',
+    interval: 1,
+    timeZone: 'America/New_York',
+    end: { type: 'count', count: 5 },
+  },
+  anchor: {
+    startLocal: '2026-03-06T09:00:00',
+    endLocal: '2026-03-06T10:00:00',
+    allDay: false,
+  },
+  payload: { title: 'Daily' },
+  exceptions: [],
+};
+const event: CalendarEvent = {
+  id: 'occurrence',
+  seriesId: 'series',
+  seriesRevision: 6,
+  originalStartLocal: '2026-03-08T09:00:00',
+  start_at: '2026-03-08T13:00:00Z',
+  end_at: '2026-03-08T14:00:00Z',
+  title: 'Moved title',
+};
+function draft() {
+  return {
+    ...newRecurrenceDraft('America/New_York', new Date('2026-03-06T14:00:00Z')),
+    title: 'Planning',
+    frequency: 'daily' as const,
+  };
+}
+describe('native recurrence form contract', () => {
+  it('keeps wall-clock time through DST rather than fixed UTC intervals', () => {
+    const payload = recurrenceDraftPayload(draft());
+    const rows = expandCalendarRecurrence({
+      ...payload,
+      from: '2026-03-06T00:00:00Z',
+      to: '2026-03-10T00:00:00Z',
+    }).occurrences;
+    expect(rows.map((r) => r.start_at)).toEqual([
+      '2026-03-06T14:00:00Z',
+      '2026-03-07T14:00:00Z',
+      '2026-03-08T13:00:00Z',
+      '2026-03-09T13:00:00Z',
+    ]);
+  });
+  it('skips nonexistent spring-forward slots and uses the earlier fold instant', () => {
+    const spring = {
+      ...draft(),
+      startLocal: '2026-03-08T02:30',
+      endLocal: '2026-03-08T03:30',
+    };
+    expect(
+      expandCalendarRecurrence({
+        ...recurrenceDraftPayload(spring),
+        from: '2026-03-08T00:00:00Z',
+        to: '2026-03-10T00:00:00Z',
+      }).occurrences[0]?.originalStartLocal
+    ).toBe('2026-03-09T02:30:00');
+    const fold = {
+      ...draft(),
+      startLocal: '2026-11-01T01:30',
+      endLocal: '2026-11-01T02:30',
+    };
+    expect(
+      expandCalendarRecurrence({
+        ...recurrenceDraftPayload(fold),
+        from: '2026-11-01T00:00:00Z',
+        to: '2026-11-02T00:00:00Z',
+      }).occurrences[0]?.start_at
+    ).toBe('2026-11-01T05:30:00Z');
+  });
+  it.each([
+    { title: ' ' },
+    { interval: '0' },
+    { interval: '1.5' },
+    { timeZone: '+07:00' },
+    { endLocal: '2026-03-06T08:00' },
+    { frequency: 'weekly' as const, weekdays: [] },
+  ])('rejects invalid form data %o', (change) => {
+    expect(() => recurrenceDraftPayload({ ...draft(), ...change })).toThrow();
+  });
+  it('uses exclusive midnight boundaries for all-day creation', () => {
+    const payload = recurrenceDraftPayload(recurrenceAllDay(draft(), true));
+    expect(payload.anchor).toEqual({
+      startLocal: '2026-03-06T00:00:00',
+      endLocal: '2026-03-07T00:00:00',
+      allDay: true,
+    });
+  });
+  it('keeps the whole-series original anchor rather than the clicked occurrence date', () => {
+    expect(recurrenceEditDraft(series, event, 'all').startLocal).toBe(
+      '2026-03-06T09:00'
+    );
+  });
+  it('reduces future count by preceding slots without changing the selected original slot', () => {
+    const edited = recurrenceEditDraft(series, event, 'future');
+    expect(edited.endValue).toBe('3');
+    const result = recurrenceMutation(
+      edited,
+      series,
+      event,
+      'future',
+      'request',
+      'update'
+    );
+    expect(result).toMatchObject({
+      scope: 'future',
+      expectedRevision: 7,
+      originalStartLocal: '2026-03-08T09:00:00',
+      rule: { end: { type: 'count', count: 3 } },
+    });
+  });
+  it('moves a single occurrence while preserving its immutable original identity', () => {
+    const edited = {
+      ...recurrenceEditDraft(series, event, 'this'),
+      startLocal: '2026-04-01T11:00',
+      endLocal: '2026-04-01T12:00',
+    };
+    const result = recurrenceMutation(
+      edited,
+      series,
+      event,
+      'this',
+      'request',
+      'update'
+    );
+    expect(result.originalStartLocal).toBe(event.originalStartLocal);
+    expect(result.anchor?.startLocal).toBe('2026-04-01T11:00:00');
+    expect(result.rule).toBeUndefined();
+    expect(result.expectedRevision).toBe(7);
+  });
+  it.each(['this', 'all', 'future'] as const)(
+    'deletes only the explicitly selected %s scope',
+    (scope) => {
+      const result = recurrenceMutation(
+        draft(),
+        series,
+        event,
+        scope,
+        'request',
+        'delete'
+      );
+      expect(result).toEqual({
+        requestId: 'request',
+        expectedRevision: 7,
+        scope,
+        originalStartLocal: event.originalStartLocal,
+      });
+    }
+  );
+  it('rejects an occurrence from another series or without a slot', () => {
+    expect(() =>
+      recurrenceMutation(
+        draft(),
+        series,
+        { ...event, seriesId: 'other' },
+        'this',
+        'request',
+        'update'
+      )
+    ).toThrow();
+    expect(() =>
+      recurrenceEditDraft(
+        series,
+        { ...event, originalStartLocal: undefined },
+        'this'
+      )
+    ).toThrow();
+  });
+  it('preserves advanced relative-weekday rules while editing event details', () => {
+    const advanced = {
+      ...series,
+      anchor: {
+        ...series.anchor,
+        startLocal: '2026-03-27T09:00:00',
+        endLocal: '2026-03-27T10:00:00',
+      },
+      rule: {
+        ...series.rule,
+        frequency: 'monthly' as const,
+        weekdays: ['FR' as const],
+        weekIndex: -1 as const,
+      },
+    };
+    expect(
+      recurrenceDraftPayload(recurrenceEditDraft(advanced, event, 'all')).rule
+    ).toEqual(advanced.rule);
+  });
+  it('reuses retry intent IDs and resets for actor, workspace, revision, scope and changed drafts', () => {
+    let count = 0;
+    const id = recurrenceRequestIdentity(() => String(++count));
+    const payload = recurrenceDraftPayload(draft());
+    expect(id('actor:ws', payload, 'create')).toBe('1');
+    expect(id('actor:ws', payload, 'create')).toBe('1');
+    expect(id('other:ws', payload, 'create')).toBe('2');
+    expect(id('other:next', payload, 'create')).toBe('3');
+    expect(
+      id('other:next', { ...payload, event: { title: 'Changed' } }, 'create')
+    ).toBe('4');
+    const edit = recurrenceMutation(
+      draft(),
+      series,
+      event,
+      'this',
+      'unused',
+      'update'
+    );
+    const { requestId: _, ...intent } = edit;
+    expect(id('actor:ws', intent, 'update')).toBe('5');
+    expect(id('actor:ws', { ...intent, expectedRevision: 8 }, 'update')).toBe(
+      '6'
+    );
+    expect(id('actor:ws', { ...intent, scope: 'future' }, 'update')).toBe('7');
+  });
+});