feat: シフト提出完了ページを追加し成功時に遷移するよう変更

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: yn1323

e2e/pages/StaffSubmitPage.ts

@@ -20,7 +20,8 @@ export class StaffSubmitPage {
   }
 
   async expectCompletionVisible() {
-    await expect(this.page.getByText("提出しました")).toBeVisible();
+    await expect(this.page).toHaveURL(/\/shifts\/submit\/completed$/);
+    await expect(this.page.getByText("提出が完了しました")).toBeVisible();
   }
 
   async expectReadOnlyVisible() {
@@ -52,10 +53,6 @@ export class StaffSubmitPage {
     await this.page.getByRole("button", { name: /提出する/ }).click();
   }
 
-  async clickEdit() {
-    await this.page.getByRole("button", { name: "内容を修正する" }).click();
-  }
-
   async expectDayWorking(dateText: string) {
     const row = this.page.getByText(dateText, { exact: true }).locator("..");
     await expect(row.getByText("〜")).toBeVisible();

e2e/scenarios/staff-shift-submission.test.ts

@@ -42,7 +42,7 @@ test.describe("スタッフのシフト希望提出", () => {
     });
 
     await test.step("Step 3: 修正して再提出する", async () => {
-      await submitPage.clickEdit();
+      await submitPage.goto(token);
       await submitPage.expectFormVisible();
       await submitPage.expectSubmittedBadge();
 

src/components/features/StaffSubmit/ShiftSubmitPage/index.tsx

@@ -1,8 +1,6 @@
-import { useState } from "react";
 import type { DayEntry } from "../DayCard";
 import { ExpiredSubmitView } from "../ExpiredSubmitView";
 import { ReadOnlySubmitView } from "../ReadOnlySubmitView";
-import { SubmitCompleteView } from "../SubmitCompleteView";
 import { type SubmissionData, SubmitFormView } from "../SubmitFormView";
 
 type Props = {
@@ -11,9 +9,6 @@ type Props = {
 };
 
 export const ShiftSubmitPage = ({ data, onSubmit }: Props) => {
-  const [showCompletion, setShowCompletion] = useState(false);
-  const [submittedEntries, setSubmittedEntries] = useState<DayEntry[] | null>(null);
-
   // 状態D: 未提出＋締切後
   if (!data.isBeforeDeadline && !data.hasSubmitted) {
     return <ExpiredSubmitView shopName={data.shopName} />;
@@ -24,22 +19,6 @@ export const ShiftSubmitPage = ({ data, onSubmit }: Props) => {
     return <ReadOnlySubmitView data={data} />;
   }
 
-  // 画面5: 提出完了
-  if (showCompletion && submittedEntries) {
-    return (
-      <SubmitCompleteView shopName={data.shopName} entries={submittedEntries} onEdit={() => setShowCompletion(false)} />
-    );
-  }
-
   // 状態A/B: 締切前（編集可能）
-  return (
-    <SubmitFormView
-      data={data}
-      onSubmit={async (entries) => {
-        await onSubmit(entries);
-        setSubmittedEntries(entries);
-        setShowCompletion(true);
-      }}
-    />
-  );
+  return <SubmitFormView data={data} onSubmit={onSubmit} />;
 };

src/components/features/StaffSubmit/SubmitCompleteView/index.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SubmittedView } from "./index";
+
+const meta = {
+  title: "features/StaffSubmit/SubmittedView",
+  component: SubmittedView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  globals: {
+    viewport: { value: "mobile2", isRotated: false },
+  },
+} satisfies Meta<typeof SubmittedView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/components/features/StaffSubmit/SubmitCompleteView/index.tsx

@@ -0,0 +1,38 @@
+import { Box, Circle, Flex, Icon, Text, VStack } from "@chakra-ui/react";
+import { LuCheck } from "react-icons/lu";
+import { SubmitPageLayout } from "../SubmitPageLayout";
+
+export const SubmittedView = () => {
+  return (
+    <SubmitPageLayout>
+      <Box bg="teal.600" w="full">
+        <Box maxW="1024px" mx="auto" px={4} pt={3} pb={4}>
+          <Text fontSize="xl" fontWeight="bold" color="white">
+            シフト希望を提出
+          </Text>
+        </Box>
+      </Box>
+
+      <Flex flex={1} align="center" justify="center" bg="white" px={4}>
+        <VStack gap={4}>
+          <Circle size="64px" bg="teal.600">
+            <Icon color="white" boxSize={8}>
+              <LuCheck />
+            </Icon>
+          </Circle>
+          <Text fontSize="xl" fontWeight="bold">
+            提出が完了しました
+          </Text>
+          <VStack gap={1}>
+            <Text fontSize="sm" color="fg.muted" textAlign="center">
+              店長からの連絡をお待ちください
+            </Text>
+            <Text fontSize="sm" color="fg.muted" textAlign="center">
+              このページは閉じて大丈夫です
+            </Text>
+          </VStack>
+        </VStack>
+      </Flex>
+    </SubmitPageLayout>
+  );
+};

src/components/features/StaffSubmit/SubmittedView/index.stories.tsx

@@ -20,6 +20,7 @@ import { Route as UnregisteredShiftsViewRouteImport } from './routes/_unregister
 import { Route as UnregisteredShiftsSubmitRouteImport } from './routes/_unregistered/shifts.submit'
 import { Route as UnregisteredShiftsReissueRouteImport } from './routes/_unregistered/shifts.reissue'
 import { Route as AuthShiftboardRecruitmentIdRouteImport } from './routes/_auth/shiftboard.$recruitmentId'
+import { Route as UnregisteredShiftsSubmitCompletedRouteImport } from './routes/_unregistered/shifts.submit_.completed'
 
 const TermsRoute = TermsRouteImport.update({
   id: '/terms',
@@ -77,6 +78,12 @@ const AuthShiftboardRecruitmentIdRoute =
     path: '/shiftboard/$recruitmentId',
     getParentRoute: () => AuthRoute,
   } as any)
+const UnregisteredShiftsSubmitCompletedRoute =
+  UnregisteredShiftsSubmitCompletedRouteImport.update({
+    id: '/shifts/submit_/completed',
+    path: '/shifts/submit/completed',
+    getParentRoute: () => UnregisteredRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -88,6 +95,7 @@ export interface FileRoutesByFullPath {
   '/shifts/reissue': typeof UnregisteredShiftsReissueRoute
   '/shifts/submit': typeof UnregisteredShiftsSubmitRoute
   '/shifts/view': typeof UnregisteredShiftsViewRoute
+  '/shifts/submit/completed': typeof UnregisteredShiftsSubmitCompletedRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -99,6 +107,7 @@ export interface FileRoutesByTo {
   '/shifts/reissue': typeof UnregisteredShiftsReissueRoute
   '/shifts/submit': typeof UnregisteredShiftsSubmitRoute
   '/shifts/view': typeof UnregisteredShiftsViewRoute
+  '/shifts/submit/completed': typeof UnregisteredShiftsSubmitCompletedRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -113,6 +122,7 @@ export interface FileRoutesById {
   '/_unregistered/shifts/reissue': typeof UnregisteredShiftsReissueRoute
   '/_unregistered/shifts/submit': typeof UnregisteredShiftsSubmitRoute
   '/_unregistered/shifts/view': typeof UnregisteredShiftsViewRoute
+  '/_unregistered/shifts/submit_/completed': typeof UnregisteredShiftsSubmitCompletedRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -126,6 +136,7 @@ export interface FileRouteTypes {
     | '/shifts/reissue'
     | '/shifts/submit'
     | '/shifts/view'
+    | '/shifts/submit/completed'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -137,6 +148,7 @@ export interface FileRouteTypes {
     | '/shifts/reissue'
     | '/shifts/submit'
     | '/shifts/view'
+    | '/shifts/submit/completed'
   id:
     | '__root__'
     | '/'
@@ -150,6 +162,7 @@ export interface FileRouteTypes {
     | '/_unregistered/shifts/reissue'
     | '/_unregistered/shifts/submit'
     | '/_unregistered/shifts/view'
+    | '/_unregistered/shifts/submit_/completed'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -239,6 +252,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthShiftboardRecruitmentIdRouteImport
       parentRoute: typeof AuthRoute
     }
+    '/_unregistered/shifts/submit_/completed': {
+      id: '/_unregistered/shifts/submit_/completed'
+      path: '/shifts/submit/completed'
+      fullPath: '/shifts/submit/completed'
+      preLoaderRoute: typeof UnregisteredShiftsSubmitCompletedRouteImport
+      parentRoute: typeof UnregisteredRoute
+    }
   }
 }
 
@@ -259,13 +279,16 @@ interface UnregisteredRouteChildren {
   UnregisteredShiftsReissueRoute: typeof UnregisteredShiftsReissueRoute
   UnregisteredShiftsSubmitRoute: typeof UnregisteredShiftsSubmitRoute
   UnregisteredShiftsViewRoute: typeof UnregisteredShiftsViewRoute
+  UnregisteredShiftsSubmitCompletedRoute: typeof UnregisteredShiftsSubmitCompletedRoute
 }
 
 const UnregisteredRouteChildren: UnregisteredRouteChildren = {
   UnregisteredWelcomeRoute: UnregisteredWelcomeRoute,
   UnregisteredShiftsReissueRoute: UnregisteredShiftsReissueRoute,
   UnregisteredShiftsSubmitRoute: UnregisteredShiftsSubmitRoute,
   UnregisteredShiftsViewRoute: UnregisteredShiftsViewRoute,
+  UnregisteredShiftsSubmitCompletedRoute:
+    UnregisteredShiftsSubmitCompletedRoute,
 }
 
 const UnregisteredRouteWithChildren = UnregisteredRoute._addFileChildren(

src/components/features/StaffSubmit/SubmittedView/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useMutation, useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
@@ -44,6 +44,7 @@ function ShiftSubmitRoute() {
 }
 
 function ShiftSubmitContent({ session }: { session: { sessionToken: string; recruitmentId: string } }) {
+  const navigate = useNavigate();
   const data = useQuery(api.shiftSubmission.queries.getSubmissionPageData, {
     sessionToken: session.sessionToken,
     recruitmentId: session.recruitmentId as Id<"recruitments">,
@@ -62,6 +63,7 @@ function ShiftSubmitContent({ session }: { session: { sessionToken: string; recr
       recruitmentId: session.recruitmentId as Id<"recruitments">,
       requests,
     });
+    await navigate({ to: "/shifts/submit/completed" });
   };
 
   return <ShiftSubmitPage data={data} onSubmit={handleSubmit} />;

src/routeTree.gen.ts

@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SubmittedView } from "@/src/components/features/StaffSubmit/SubmittedView";
+import { buildMeta } from "@/src/helpers/seo";
+
+export const Route = createFileRoute("/_unregistered/shifts/submit_/completed")({
+  head: () => ({
+    meta: buildMeta({ title: "シフト希望の提出完了", noindex: true }),
+  }),
+  component: ShiftSubmitCompletedRoute,
+});
+
+function ShiftSubmitCompletedRoute() {
+  return <SubmittedView />;
+}