fix: Reorder function & add breadcrumb

src/app/(main)/purchasing-process/(reservation)/layout.tsx

@@ -3,18 +3,41 @@
 import useTicketPurchasingStore from '@/stores/ticketPurchasing';
 import { useRouter } from 'next/navigation';
 import { ReactNode, useEffect } from 'react';
+import useActivity from '@/hooks/api/useActivity';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
 
 const Layout = ({ children }: { children: ReactNode }) => {
   const activityId = useTicketPurchasingStore.use.activityId();
+  const setActivity = useTicketPurchasingStore.use.setActivity();
   const router = useRouter();
+  const { activity } = useActivity(activityId);
 
   useEffect(() => {
     if (!activityId) {
       router.push('/');
+    } else if (activity) {
+      setActivity(activity);
     }
-  }, []);
+  }, [activityId, activity]);
 
-  return children;
+  return (
+    <>
+      <Breadcrumb style={{ padding: '30px 20px' }}>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">首頁 </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink href={`/activities/${activityId}`}>{activity?.name}</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#" fontWeight="700">
+            購票流程
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+      </Breadcrumb>
+      {children}
+    </>
+  );
 };
 
 export default Layout;

src/app/(main)/purchasing-process/(reservation)/select-area/page.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import StepPage from '@/components/activity/step';
 import useTicketPurchasingStore from '@/stores/ticketPurchasing';
 import SeatSelector from '@/components/activity/step/SeatsSelector';
-import useActivity from '@/hooks/api/useActivity';
 import useSeatAreas from '@/hooks/useSeatAreas';
 import { Area } from '@/types/activityTypes';
 import axiosClient from '@/api/axiosClient';
@@ -13,7 +12,7 @@ const SelectArea = () => {
   const activityId = useTicketPurchasingStore.use.activityId();
   const eventId = useTicketPurchasingStore.use.eventId();
   const setEvent = useTicketPurchasingStore.use.setEvent();
-  const { activity } = useActivity(activityId);
+  const activity = useTicketPurchasingStore.use.activity();
   const { seatAreas, mutate } = useSeatAreas(eventId);
   const [seats, setSeats] = useState<Area[]>([]);
 

src/app/(main)/purchasing-process/(reservation)/select-seats/page.tsx

@@ -5,29 +5,30 @@ import StepPage from '@/components/activity/step';
 import useTicketPurchasingStore from '@/stores/ticketPurchasing';
 import useDialogStore from '@/stores/dialogStore';
 import QuantitySelector from '@/components/activity/step/QuantitySelector';
-import useActivity from '@/hooks/api/useActivity';
 import axiosClient from '@/api/axiosClient';
 
 const SelectSeat = () => {
   const router = useRouter();
   const { openConfirm, openAlert } = useDialogStore();
   const activityId = useTicketPurchasingStore.use.activityId();
   const eventId = useTicketPurchasingStore.use.eventId();
+  const lastEventId = useTicketPurchasingStore.use.lastEventId();
+  const setLastEventId = useTicketPurchasingStore.use.setLastEventId();
   const orderNo = useTicketPurchasingStore.use.orderNo();
   const setOrder = useTicketPurchasingStore.use.setOrder();
-  const { activity } = useActivity(activityId);
+  const activity = useTicketPurchasingStore.use.activity();
 
   const selectArea = useTicketPurchasingStore.use.selectArea();
   const selectSubArea = useTicketPurchasingStore.use.selectSubArea();
 
-  if (activity) {
+  if (activity && eventId && selectArea && selectSubArea) {
     const createOrder = async (quantity: number) => {
       if (!selectSubArea?.remainingSeats)
         openConfirm('已無剩餘座位', () => router.push(`/purchasing-process/select-area`));
 
       try {
         let response;
-        if (orderNo) {
+        if (orderNo && lastEventId === eventId) {
           const patchData = {
             areaId: selectArea?.id,
             subAreaId: selectSubArea?.id,
@@ -43,6 +44,7 @@ const SelectSeat = () => {
             seatAmount: quantity,
           };
           response = await axiosClient.post('/orders', postData);
+          setLastEventId(eventId);
         }
 
         if (response) {

src/stores/ticketPurchasing.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
+import { Activity } from '@/types/activityTypes';
 import createSelectors from './createSelectors';
 
 export interface Area {
@@ -17,11 +18,15 @@ export interface SubArea {
 
 export interface TicketPurchasingStore {
   activityId: string | undefined;
+  activity: Activity | undefined;
   eventId: string | undefined;
+  lastEventId: string | undefined;
   selectArea: Area | undefined;
   selectSubArea: SubArea | undefined;
   orderNo: string | undefined;
   setEvent: (activityId: string, eventId: string) => void;
+  setLastEventId: (eventId: string) => void;
+  setActivity: (activity: Activity) => void;
   setArea: (area: Area, selectSubArea: SubArea) => void;
   setOrder: (orderNo: string) => void;
   clearArea: () => void;
@@ -30,7 +35,9 @@ export interface TicketPurchasingStore {
 
 const initialValues = {
   activityId: undefined,
+  activity: undefined,
   eventId: undefined,
+  lastEventId: undefined,
   selectArea: undefined,
   selectSubArea: undefined,
   orderNo: undefined,
@@ -41,6 +48,8 @@ const useTicketPurchasingStore = createSelectors(
     devtools((set) => ({
       ...initialValues,
       setEvent: (activityId, eventId) => set(() => ({ activityId, eventId })),
+      setLastEventId: (lastEventId) => set(() => ({ lastEventId })),
+      setActivity: (activity) => set(() => ({ activity })),
       setArea: (selectArea, selectSubArea) => set(() => ({ selectArea, selectSubArea })),
       setOrder: (orderNo) => set(() => ({ orderNo })),
       clearArea: () => set(() => ({ selectArea: undefined, selectSubArea: undefined })),