Join rpkm modal

src/app/(main)/home/page.tsx

@@ -14,29 +14,82 @@ import { useAuth } from '@/context/AuthContext';
 import { useRouter } from 'next/navigation';
 import BottomButton from '@/components/(main)/home/BottomButton';
 import WaitModal from '@/components/(main)/home/WaitModal';
+import JoinModal from '@/components/(main)/home/JoinModal';
 import { isUserRegistered } from '@/utils/user';
 import Border from '@/components/firstdate/Border';
 import CustomButton from '@/components/(main)/home/CustomButton';
 import Link from 'next/link';
 import { getMajorNameById } from '@/utils/register';
 import { getCurrentTime } from '@/utils/time';
+import { createCheckIn, fetchCheckIn } from '@/utils/checkin';
+import { CheckIn, GetCheckIn } from '@/types/checkIn';
+import toast from 'react-hot-toast';
 
 export default function Home() {
   const router = useRouter();
-  const { user, logout } = useAuth();
+  const { user, resetContext, logout } = useAuth();
   const [clientTime, setClientTime] = useState(new Date('1980-01-01'));
   const [qrModal, setQrModal] = useState<boolean>(false);
   const [waitModal, setWaitModal] = useState<boolean>(false);
   const [interestedEvent, setInterestedEvent] = useState<
     'first-date' | 'rup-peun'
   >('first-date');
+  const [joinModal, setJoinModal] = useState<boolean>(false);
+  //const [announce, setAnnounce] = useState<boolean>(false);
+  const [isCheckedIn, setIsCheckedIn] = useState<boolean>(false);
+  const [isJoined, setIsJoined] = useState<boolean>(false);
 
   useEffect(() => {
     getCurrentTime().then((res) => {
       setClientTime(res.currentTime);
     });
+
+    const checkedIn = async () => {
+      if (!user) {
+        return;
+      }
+
+      try {
+        const checkedIns: GetCheckIn[] | null = await fetchCheckIn();
+        if (checkedIns) {
+          const findEvent = !!checkedIns.find(
+            (checkIn) => checkIn.event === 'confirm-rpkm'
+          );
+          setIsCheckedIn(findEvent);
+        } else {
+          throw new Error('');
+        }
+      } catch (e) {
+        console.log('fetch check in', e);
+      }
+    };
+
+    checkedIn();
   }, []);
 
+  const checkInConfirm = async () => {
+    if (!user) {
+      return;
+    }
+
+    try {
+      const checkInConfirm: CheckIn | null = await createCheckIn(
+        user.id,
+        user.email,
+        'confirm-rpkm'
+      );
+
+      if (checkInConfirm) {
+        setIsJoined(true);
+      } else {
+        throw new Error('Error check in');
+      }
+      resetContext();
+    } catch (e) {
+      toast.error('ยืนยันไม่สำเร็จ');
+    }
+  };
+
   return (
     <>
       <Border
@@ -102,6 +155,8 @@ export default function Home() {
               registered={!!user && isUserRegistered(user)}
               setWaitModal={setWaitModal}
               setEvent={setInterestedEvent}
+              isCheckedIn={isCheckedIn}
+              setJoinModal={setJoinModal}
             >
               <div>Rub Peun Kao Mai 2024</div>
             </CustomButton>
@@ -159,6 +214,12 @@ export default function Home() {
         setModal={setWaitModal}
         event={interestedEvent}
       />
+      <JoinModal
+        modal={joinModal}
+        setModal={setJoinModal}
+        isJoined={isJoined}
+        checkInConfirm={checkInConfirm}
+      />
     </>
   );
 }

src/app/(main)/layout.tsx

@@ -1,4 +1,5 @@
 import Footer from '@/components/(main)/Footer';
+import BaanProvider from '@/context/BaanContext';
 import React from 'react';
 
 const layout = ({
@@ -8,7 +9,7 @@ const layout = ({
 }>) => {
   return (
     <main className="bg-1 overflow-auto">
-      {children}
+      <BaanProvider>{children}</BaanProvider>
       <Footer />
     </main>
   );

src/app/rpkm/activities/details/community/page.tsx

@@ -88,6 +88,7 @@ const Page = () => {
           href="https://lin.ee/i9Ezhg7"
           borderClassName="bg-rpkm-cream"
           backgroundClassName="bg-rpkm-green text-center text-lg text-rpkm-gray w-[60vw]"
+          target="_self"
         >
           Line OA ของกิจกรรม
         </ActivityButton>

src/app/rpkm/activities/map/page.tsx

@@ -28,7 +28,7 @@ const page = () => {
                 '1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000',
             }}
           >
-            ข้อมูลที่จัดแต่ละกิจกรรม
+            กิจกรรมชุมชน
           </h2>
         </div>
       </div>

src/components/(main)/home/CustomButton.tsx

@@ -1,3 +1,4 @@
+import { useBaan } from '@/context/BaanContext';
 import { cn } from '@/lib/utils';
 import { createEbookCount } from '@/utils/count';
 import { useRouter } from 'next/navigation';
@@ -9,8 +10,10 @@ interface CustomButtonProps {
   children: React.ReactNode;
   registered?: boolean;
   currentDate: Date;
+  isCheckedIn?: boolean;
   setWaitModal?: (value: boolean) => void;
   setEvent?: (value: 'first-date' | 'rup-peun') => void;
+  setJoinModal?: (value: boolean) => void;
 }
 
 const CustomButton: React.FC<CustomButtonProps> = ({
@@ -19,10 +22,13 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   children,
   registered,
   currentDate,
+  isCheckedIn,
   setWaitModal,
   setEvent,
+  setJoinModal,
 }) => {
   const router = useRouter();
+  const { isConfirmed } = useBaan();
   const firstdate = async () => {
     let firstDateDate = currentDate;
     const firstDate = process.env.NEXT_PUBLIC_FIRST_DATE_DATE;
@@ -43,12 +49,39 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   };
   const rubpeun = async () => {
     let rupPeunDate = currentDate;
+    let closedSelectionDate = currentDate;
+    let baanAnnounceDate = currentDate;
     const rupPeun = process.env.NEXT_PUBLIC_RUP_PEUN_DATE;
+    const closedSelection = process.env.NEXT_PUBLIC_CLOSED_BAAN_SELECTION_DATE;
+    const announce = process.env.NEXT_PUBLIC_BAAN_ANNOUNCEMENT_DATE;
     if (rupPeun) {
       rupPeunDate = new Date(rupPeun);
     }
-    console.log(currentDate.toISOString(), rupPeunDate.toISOString());
-    if (currentDate >= rupPeunDate) {
+    if (closedSelection && announce) {
+      closedSelectionDate = new Date(closedSelection);
+      baanAnnounceDate = new Date(announce);
+    }
+    console.log(
+      currentDate.toISOString(),
+      rupPeunDate.toISOString(),
+      closedSelectionDate.toISOString(),
+      baanAnnounceDate.toISOString()
+    );
+    if (currentDate >= closedSelectionDate) {
+      if (!isConfirmed) {
+        router.push('/rpkm/activities/home');
+      } else if (setJoinModal) {
+        if (isCheckedIn) {
+          router.push('/rpkm/activities/home');
+        } else {
+          setJoinModal(true);
+          //setBaanAnnouncementModal
+        }
+      }
+    } else if (
+      currentDate >= rupPeunDate &&
+      currentDate < closedSelectionDate
+    ) {
       if (registered) {
         router.push('/rpkm/baan/home');
       } else {
@@ -79,7 +112,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
       onClick: rubpeun,
     },
     'e-book': {
-      color: 'bg-project-cream opacity-35 cursor-not-allowed',
+      color: 'bg-project-cream',
       onClick: ebook,
     },
     'contact-list': {

src/components/(main)/home/JoinModal.tsx

@@ -0,0 +1,92 @@
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import Success from '@public/success-white.svg';
+import BaseModal from '@/components/rpkm/Modal/BaseModal';
+import ModalButton from '@/components/rpkm/Modal/ModalButton';
+import modalStyles from '@/components/rpkm/Modal/ModalStyle';
+
+interface JoinModalProps {
+  modal: boolean;
+  setModal: (value: boolean) => void;
+  isJoined: boolean;
+  checkInConfirm: () => void;
+}
+
+const JoinModal: React.FC<JoinModalProps> = ({
+  modal,
+  setModal,
+  isJoined,
+  checkInConfirm,
+}) => {
+  const router = useRouter();
+
+  const HandleOnClick = () => {
+    router.push('/rpkm/activities/home');
+  };
+
+  if (!isJoined) {
+    const { button } = modalStyles['red'];
+    return (
+      <BaseModal
+        variant="red"
+        open={modal}
+      >
+        <div className="flex items-center justify-center max-w-80 flex-col space-y-2 px-4 py-3">
+          <h1 className="text-3xl font-semibold text-white">
+            ยืนยันการเข้าร่วมงาน
+          </h1>
+          <p className="text-white text-sm text-center">ยืนยันการเข้าร่วมงาน</p>
+        </div>
+        <div className="flex flex-row gap-x-5 pb-3 justify-center">
+          <ModalButton
+            callBackFunction={() => setModal(false)}
+            borderClassName={button['cancel-border']}
+            backgroundClassName={button['cancel-background']}
+          >
+            ยกเลิก
+          </ModalButton>
+          <ModalButton
+            callBackFunction={() => {
+              setModal(false);
+              checkInConfirm();
+            }}
+            borderClassName={button['accept-border']}
+            backgroundClassName={button['accept-background']}
+          >
+            ยืนยัน
+          </ModalButton>
+        </div>
+      </BaseModal>
+    );
+  }
+  const { button } = modalStyles['green'];
+  return (
+    <BaseModal
+      variant="green"
+      open={true}
+    >
+      <div className="flex items-center justify-center max-w-80 flex-col space-y-2 px-12 py-3">
+        <Image
+          src={Success}
+          alt="success"
+          className="size-[30%]"
+        />
+        <h1 className="text-3xl font-semibold text-white">ยืนยันสำเร็จ!</h1>
+        <p className="text-white text-sm text-center">
+          แล้วพบกันวันที่ 3 สิงหาคม 2567
+        </p>
+      </div>
+      <div className="flex flex-row gap-x-5 pb-3 justify-center">
+        <ModalButton
+          callBackFunction={HandleOnClick}
+          borderClassName={button['cancel-border']}
+          backgroundClassName={button['cancel-background']}
+        >
+          ต่อไป
+        </ModalButton>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default JoinModal;

src/components/rpkm/Modal/BaseModal.tsx

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils';
 import modalStyles from './ModalStyle';
 
 interface ModalProps {
-  variant: 'red' | 'blue' | 'black';
+  variant: 'red' | 'blue' | 'black' | 'green';
   open: boolean;
   children: React.ReactNode;
 }

src/components/rpkm/Modal/ModalStyle.ts

@@ -26,6 +26,15 @@ const modalStyles = {
       'cancel-border': 'bg-[#F5F5F5]',
     },
   },
+  green: {
+    background: 'bg-[#67AB88]',
+    button: {
+      'accept-background': 'bg-[#C94B4B] text-[#EAE3C3]',
+      'accept-border': 'bg-[#EAE3C3]',
+      'cancel-background': 'bg-[#C94B4B] text-[#EAE3C3]',
+      'cancel-border': 'bg-[#EAE3C3]',
+    },
+  },
 };
 
 export default modalStyles;

src/components/rpkm/Sidebar/Menu.tsx

@@ -9,8 +9,8 @@ function Menu() {
   return (
     <div className="w-full h-full text-left  font-medium flex flex-col pb-[5vh]">
       <Link
-        href="/rpkm/baan/home"
-        className="text-left"
+        href=""
+        className="text-left cursor-not-allowed text-gray-400"
       >
         ลงทะเบียนเลือกบ้าน
       </Link>
@@ -82,19 +82,19 @@ function Menu() {
             aria-label="Accordion 2"
             title={<div>แผนที่</div>}
           >
-            <div className="flex flex-col w-full justify-items-start text-sm px-2 -mt-2">
+            <div className="flex flex-col w-full justify-items-start text-sm px-2 -mt-2 ">
+              <div
+                //href="/rpkm/activities/map"
+                className="text-left text-gray-400 cursor-not-allowed"
+              >
+                ข้อมูลที่จัดแต่ละกิจกรรม
+              </div>
               <Link
                 href="/rpkm/activities/map"
                 className="text-left"
-              >
-                ข้อมูลที่จัดแต่ละกิจกรรม
-              </Link>
-              <div
-                // href="/rpkm/activities/"
-                className="text-left text-gray-400 cursor-not-allowed"
               >
                 กิจกรรมชุมชน
-              </div>
+              </Link>
             </div>
           </AccordionItem>
         </Accordion>