Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: announce baan modal #185

Merged
merged 5 commits into from
Jul 27, 2024
Merged

feat: announce baan modal #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
481239f
feat: baan announcement modal
PhorDotC Jul 26, 2024
57ce847
fix: lint
PhorDotC Jul 26, 2024
4208fd8
fix: error condition
PhorDotC Jul 26, 2024
1e219de
Merge pull request #184 from isd-sgcu/phor-fe/joinRpkmModal
TeeGoood Jul 27, 2024
9b94ad0
Merge branch 'main' into dev
TeeGoood Jul 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5,574 changes: 2,462 additions & 3,112 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions public/baan.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/cross-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/line-white.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions public/line-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 44 additions & 1 deletion src/app/(main)/home/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { getCurrentTime } from '@/utils/time';
import { createCheckIn, fetchCheckIn } from '@/utils/checkin';
import { CheckIn, GetCheckIn } from '@/types/checkIn';
import toast from 'react-hot-toast';
import BaanResultModal from '@/components/(main)/home/BaanResultModal';

export default function Home() {
const router = useRouter();
Expand All @@ -35,9 +36,11 @@ export default function Home() {
'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);
const [baanResultModal, setBaanResultModal] = useState<boolean>(false);
const [announce, setAnnounce] = useState<boolean>(false);
const [baanResult, setBaanResult] = useState<boolean>(false);

useEffect(() => {
getCurrentTime().then((res) => {
Expand All @@ -56,6 +59,10 @@ export default function Home() {
(checkIn) => checkIn.event === 'confirm-rpkm'
);
setIsCheckedIn(findEvent);
const findBaanResult = !!checkedIns.find(
(checkIn) => checkIn.event === 'baan-result'
);
setBaanResult(findBaanResult);
} else {
throw new Error('');
}
Expand Down Expand Up @@ -90,6 +97,30 @@ export default function Home() {
}
};

const CheckBaanResult = async () => {
if (!user) {
return;
}

try {
const checkBaanResult: CheckIn | null = await createCheckIn(
user.id,
user.email,
'baan-result'
);

if (checkBaanResult) {
setBaanResult(true);
setBaanResultModal(false);
} else {
throw new Error('Error baan result');
}
resetContext();
} catch (e) {
toast.error('แสดงผลเลือกบ้านไม่สำเร็จ');
}
};

return (
<>
<Border
Expand Down Expand Up @@ -155,6 +186,9 @@ export default function Home() {
registered={!!user && isUserRegistered(user)}
setWaitModal={setWaitModal}
setEvent={setInterestedEvent}
baanResult={baanResult}
setAnnounce={setAnnounce}
setBaanResultModal={setBaanResultModal}
isCheckedIn={isCheckedIn}
setJoinModal={setJoinModal}
>
Expand Down Expand Up @@ -218,8 +252,17 @@ export default function Home() {
modal={joinModal}
setModal={setJoinModal}
isJoined={isJoined}
announce={announce}
baanResult={baanResult}
baanResultModal={baanResultModal}
setBaanResultModal={setBaanResultModal}
checkInConfirm={checkInConfirm}
/>
<BaanResultModal
modal={baanResultModal}
setModal={setBaanResultModal}
checkBaanResult={CheckBaanResult}
/>
</>
);
}
245 changes: 245 additions & 0 deletions src/components/(main)/home/BaanResultModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import CrossIcon from '@public/cross-white.svg';
import LineWhite from '@public/line-white.png';
import Baan from '@public/baan.svg';
import InstagramIcon from '@public/rpkm/instagram-icon.svg';
import { baanInfos } from '@/components/rpkm/Baan/baanInfos';
import BaseModal from '@/components/rpkm/Modal/BaseModal';
import { cn } from '@/lib/utils';
import { useBaan } from '@/context/BaanContext';
import { useAuth } from '@/context/AuthContext';

interface BaanResultModalProps {
modal: boolean;
setModal: (value: boolean) => void;
checkBaanResult: () => void;
}

const BaanResultModal: React.FC<BaanResultModalProps> = ({
modal,
setModal,
checkBaanResult,
}) => {
const router = useRouter();
const [mode, setMode] = useState<'th' | 'en'>('th');
const { isConfirmed } = useBaan();
const { user } = useAuth();

const HandleOnClick = () => {
checkBaanResult();
router.push('/rpkm/activities/home');
};

const findBaan = (result: string) => {
return baanInfos.find((baan) => baan.name.en === result);
};

if (!user) return;
const baan = findBaan(user.baan);

return (
<div>
{isConfirmed && !!baan ? (
<BaseModal
variant="blue"
open={modal}
>
<div className="relative w-[75vw]">
<div className="absolute top-4 right-5">
<button
className="z-10"
onClick={() => {
setModal(false);
HandleOnClick();
}}
>
<Image
src={CrossIcon}
alt="cross"
width={10}
height={10}
style={{ width: '1.76vh', height: '1.76vh' }}
/>
</button>
</div>
<div className="flex items-center justify-center w-full flex-col">
<div className="flex items-center my-2">
<button
onClick={() => setMode('th')}
className={cn(
'px-[0.6rem] rounded-l-full text-sm',
mode == 'th'
? 'bg-rpkm-pink text-white'
: 'bg-white text-black'
)}
>
TH
</button>
<button
onClick={() => setMode('en')}
className={cn(
'px-[0.6rem] rounded-r-full text-sm',
mode == 'th'
? 'bg-white text-black'
: 'bg-rpkm-pink text-white'
)}
>
EN
</button>
</div>
<h1 className="text-3xl font-bold text-white mt-2">
{mode === 'th' ? 'ยินดีด้วย!' : 'Congratulations!'}
</h1>
<p className="text-white text-base text-center">
{mode === 'th'
? 'คุณได้รับเลือกเข้าสู่...!'
: 'You have been selected for...'}
</p>
<div className="flex justify-center w-full my-2">
<Image
src={baan.logo}
alt="baan"
className="w-44 p-1 border-[#F5F5F5] bg-[#F5F5F5] border-1"
/>
</div>
<h2 className="text-2xl font-semibold text-white">
{`'${mode === 'th' ? 'บ้าน' : 'Baan '}${baan.name[mode]}'`}
</h2>
<div className="my-3">
<Image
src={LineWhite}
alt="lineWhite"
/>
</div>
<p
className={cn(
'text-center text-xl font-semibold text-white mt-1',
{
'text-lg': mode === 'en',
}
)}
>
{mode === 'th'
? 'ติดตามข่าวสารต่อได้ที่'
: 'For more information, please visit'}
</p>
<div className="flex flex-row justify-center w-full gap-x-1 mt-2 mb-3">
<Image
src={InstagramIcon}
alt="instagram icon"
/>
<Link
href={`https://www.instagram.com/${baan.ig}/`}
className="text-white text-base text-center"
>
{baan.ig}
</Link>
</div>
</div>
</div>
</BaseModal>
) : (
<BaseModal
variant="blue"
open={modal}
>
<div className="relative w-[75vw]">
<div className="absolute top-4 right-5">
<button
className="z-10"
onClick={() => {
setModal(false);
HandleOnClick();
}}
>
<Image
src={CrossIcon}
alt="cross"
width={10}
height={10}
style={{ width: '1.76vh', height: '1.76vh' }}
/>
</button>
</div>
<div className="flex items-center justify-center w-full flex-col">
<div className="flex items-center my-2">
<button
onClick={() => setMode('th')}
className={cn(
'px-[0.6rem] rounded-l-full text-sm',
mode == 'th'
? 'bg-rpkm-pink text-white'
: 'bg-white text-black'
)}
>
TH
</button>
<button
onClick={() => setMode('en')}
className={cn(
'px-[0.6rem] rounded-r-full text-sm',
mode == 'th'
? 'bg-white text-black'
: 'bg-rpkm-pink text-white'
)}
>
EN
</button>
</div>
<h1 className="text-3xl font-bold text-white mt-2">
{mode === 'th' ? 'น่าเสียดาย!' : 'Unfortunately!'}
</h1>
<p className="text-white text-base text-center">
{mode === 'th'
? 'คุณไม่ได้ทำการเลือกบ้าน'
: 'You did not select any Baans'}
</p>
<div className="flex justify-center w-full mt-6 mb-3">
<Image
src={Baan}
alt="baan"
className="p-1 border-[#F5F5F5] bg-[#F5F5F5] border-1"
/>
</div>
<div className="my-3">
<Image
src={LineWhite}
alt="lineWhite"
/>
</div>
<p
className={cn(
'text-center text-xl font-semibold text-white mt-1',
{
'text-md': mode === 'en',
}
)}
>
{mode === 'th'
? 'ติดต่อสอบถามเพิ่มเติมได้ที่'
: 'For further inquiries, please contact'}
</p>
<div className="flex flex-row justify-center w-full gap-x-1 mt-2 mb-3">
<Image
src={InstagramIcon}
alt="instagram icon"
/>
<Link
href={`https://www.instagram.com/rubpuenkaomai2024/`}
className="text-white text-base text-center"
>
rubpuenkaomai2024
</Link>
</div>
</div>
</div>
</BaseModal>
)}
</div>
);
};

export default BaanResultModal;
Loading
Loading