Merge to prod

components/Marathon/ApplyClosePopup.jsx

@@ -0,0 +1,59 @@
+import { useState, forwardRef, useImperativeHandle } from 'react';
+
+const ApplyClosePopup = forwardRef((props, ref) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const popupContent = {
+    title: '活動申請已截止',
+    description: '本次活動申請已截止，歡迎關注下次時間。',
+    content: '預計是7月初開放申請，8月底申請截止，歡迎追蹤社群媒體與訂閱電子報，接收最新訊息。',
+  };
+
+  useImperativeHandle(ref, () => ({
+    showPopup: () => {
+      console.log('showPopup called');
+      setIsVisible(true);
+    },
+    hidePopup: () => {
+      setIsVisible(false);
+    },
+  }));
+
+  if (!isVisible) return null;
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-[100] flex items-center justify-center">
+      <div className="w-full max-w-[400px] bg-white p-6 rounded-2xl shadow-lg">
+        <div className="space-y-4 text-center">
+          <h1 className="text-2xl font-bold text-gray-800">{popupContent.title}</h1>
+
+          <p className="text-gray-600 leading-relaxed">{popupContent.description}</p>
+
+          <p className="text-gray-600 leading-relaxed">
+            {popupContent.content}
+          </p>
+        </div>
+
+        <div className="relative h-64 w-full">
+          <img
+            src="/assets/marathon-apply-close.png"
+            alt="Registration closed illustration"
+            fill
+            className="object-contain"
+          />
+        </div>
+
+        <div className="mr-10 ml-10">
+          <button
+            type="button"
+            className="w-full bg-teal-500 hover:bg-teal-600 text-white p-4  rounded-full text-base font-medium"
+            onClick={() => setIsVisible(false)}
+          >
+            關閉
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default ApplyClosePopup;

components/Marathon/SignUp/ConfirmForm.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { EDUCATION_STEP, ROLE } from '@/constants/member';
 import toast from 'react-hot-toast';
@@ -26,6 +26,7 @@ import {
   StyledGroup
 } from './Edit.styled';
 import MilestoneGroup from './MilestoneGroup';
+import ApplyClosePopup from '../ApplyClosePopup';
 
 const StyledMarathonTitleSection = styled(Box)`
   padding: 10px;
@@ -225,6 +226,7 @@ export default function ConfirmForm({
     education: "",
     avatar: ""
   });
+  const popupRef = useRef(null);
 
   const onPrevStep = () => {
     setCurrentStep(currentStep - 1);
@@ -268,11 +270,13 @@ export default function ConfirmForm({
     }
   }, [userState, openLoginModal]);
   const onSubmit = async () => {
-    const isSignupEnabled = true;
+    const isSignupEnabled = false;
 
     if (!isSignupEnabled) {
-      alert('申請已截止');
+      popupRef.current.showPopup();
       return;
+    } else {
+      popupRef.current.hidePopup();
     }
     if (!marathonState) {
       console.error('no data to submit');
@@ -523,6 +527,9 @@ export default function ConfirmForm({
           {marathonState._id ? '更新報名資料' : '提交申請'}
         </StyledButton>
       </StyledButtonGroup>
+      <ApplyClosePopup
+        ref={popupRef}
+      />
     </>
   );
 }

components/Marathon/SignUp/MarathonForm.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useReducer } from 'react';
+import { useState, useEffect, useReducer, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import toast from 'react-hot-toast';
 import {
@@ -26,6 +26,7 @@ import {
 } from './Edit.styled';
 import MultiSelectDropdown from './MultiSelectDropdown';
 import PricingForm from './PricingForm';
+import ApplyClosePopup from '../ApplyClosePopup';
 
 const marathonFormReducer = (state, action) => {
   const { key, value } = action.payload;
@@ -76,6 +77,7 @@ export default function MarathonForm({
   const reduxDispatch = useDispatch();
   const [hasLoaded, setHasLoaded] = useState(false);
   const [errors, setErrors] = useState({});
+  const popupRef = useRef(null);
   const marathonState = useSelector((state) => { return state.marathon; });
   const localStorgeStored = window.localStorage.getItem('newMarathon');
   const editingMarathon = localStorgeStored ? JSON.parse(localStorgeStored) : null;
@@ -234,11 +236,13 @@ export default function MarathonForm({
   };
 
   const onNextStep = () => {
-    const isSignupEnabled = true;
+    const isSignupEnabled = false;
 
     if (!isSignupEnabled) {
-      alert('申請已截止');
+      popupRef.current.showPopup();
       return;
+    } else {
+      popupRef.current.hidePopup();
     }
     const isValid = handleValidateAll();
     if (!isValid) {
@@ -685,6 +689,9 @@ export default function MarathonForm({
           下一步
         </StyledButton>
       </StyledButtonGroup>
+      <ApplyClosePopup
+        ref={popupRef}
+      />
     </>
 
   );

pages/learning-marathon/index.jsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
 import SEOConfig from '@/shared/components/SEO';
@@ -20,6 +20,7 @@ import { useAuth, useAuthDispatch } from '@/contexts/Auth';
 import { cn } from '@/utils/cn';
 import Banner from '@/components/Banner';
 import { logEvent } from '@/utils/analytics';
+import ApplyClosePopup from '@/components/Marathon/ApplyClosePopup';
 
 const StyledBannerButton = styled(Button)`
   &.MuiButton-root {
@@ -261,6 +262,7 @@ const List = ({ className, children }) => (
 const LearningMarathon = () => {
   const { openLoginModal } = useAuthDispatch();
   const { isLoggedIn, isTemporary } = useAuth();
+  const popupRef = useRef(null);
   const router = useRouter();
   const SEOData = useMemo(
     () => ({
@@ -295,12 +297,15 @@ const LearningMarathon = () => {
   );
 
   const handleClickSignupButton = () => {
-    const isSignupEnabled = true;
+    const isSignupEnabled = false;
 
     if (!isSignupEnabled) {
-      alert('申請已截止');
+      popupRef.current.showPopup();
       return;
+    } else {
+      popupRef.current.hidePopup();
     }
+
     logEvent('Learning Marathon', 'Signup Button Clicked', {
       user_logged_in: isLoggedIn,
       user_temporary: isTemporary
@@ -520,6 +525,9 @@ const LearningMarathon = () => {
           立即申請
         </StyledSignUpButton>
       </Section>
+      <ApplyClosePopup
+        ref={popupRef}
+      />
     </>
   );
 };