97 lines
2.9 KiB
JavaScript
97 lines
2.9 KiB
JavaScript
import React, { useEffect } from "react";
|
||
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
|
||
import Spotlight from "@enact/spotlight";
|
||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||
|
||
import TButton, { TYPES } from "../../components/TButton/TButton";
|
||
import TPanel from "../../components/TPanel/TPanel";
|
||
import { getWelcomeEventInfo } from "../../features/event/eventSlice";
|
||
import { $L } from "../../utils/helperMethods";
|
||
import css from "../WelcomeEventPanel/WelcomeEventPanel.module.less";
|
||
|
||
const Container = SpotlightContainerDecorator(
|
||
{ enterTo: "last-focused" },
|
||
"div"
|
||
);
|
||
|
||
// 임시 데이터
|
||
const dummyeEvnetData = {
|
||
evntId: "", // 이벤트 아이디
|
||
evntNm: "Win LG OLED TV and MORE!", // 이벤트 이름
|
||
evntTpCd: "", // 이벤트 유형
|
||
expsStrtDt: "2021. March 15st", // 전시 시작일시
|
||
expsEndtDt: "2021. April 13st", // 전시 종료 일시
|
||
evntImgUrl: "", // 이벤트 이미지 URL
|
||
trmsBtnExpsFlag: "Y", // 약관 버튼 노출 여부
|
||
trmsCntt: "", // 약관 내용
|
||
};
|
||
|
||
const WelcomeEventPanel = () => {
|
||
const dispatch = useDispatch();
|
||
const EventInfos = useSelector((state) => state.event);
|
||
|
||
// console.log("#getEventInfos", EventInfos);
|
||
|
||
useEffect(() => {
|
||
dispatch(getWelcomeEventInfo());
|
||
Spotlight.focus("agree");
|
||
}, []);
|
||
|
||
return (
|
||
<TPanel>
|
||
<Container className={css.eventLayout}>
|
||
<div className={css.textLayer}>
|
||
<div className={css.title}>{$L(dummyeEvnetData.evntNm)}</div>
|
||
<div className={css.date}>
|
||
{$L(
|
||
`(Period : ${dummyeEvnetData.expsStrtDt} ~ ${dummyeEvnetData.expsEndtDt})`
|
||
)}
|
||
</div>
|
||
<div className={css.description}>
|
||
{$L(
|
||
`Just input your cell phone number and you’ll be applied automatically!\n`
|
||
)}
|
||
<span>
|
||
{$L(`(Click below `)}
|
||
<span className={css.pointColor}>{$L(`‘Agree’`)}</span>
|
||
{$L(" button)")}
|
||
</span>
|
||
</div>
|
||
<div className={css.BtnLayer}>
|
||
<TButton
|
||
className={css.agreeBtn}
|
||
// onClick={handleAgree}
|
||
spotlightId="agree"
|
||
type={TYPES.agree}
|
||
>
|
||
{$L("Agree")}
|
||
</TButton>
|
||
<TButton
|
||
// onClick={handleDisagree}
|
||
className={css.agreeBtn}
|
||
type={TYPES.agree}
|
||
>
|
||
{$L("Do Not Agree")}
|
||
</TButton>
|
||
</div>
|
||
</div>
|
||
<div className={css.bottomBtnLayer}>
|
||
{dummyeEvnetData.trmsBtnExpsFlag === "Y" && (
|
||
<TButton
|
||
// onClick={() => handleTermsClick("MST00402")}
|
||
className={css.termsBtn}
|
||
type={TYPES.terms}
|
||
>
|
||
{$L("Terms & Conditions")}
|
||
</TButton>
|
||
)}
|
||
</div>
|
||
</Container>
|
||
</TPanel>
|
||
);
|
||
};
|
||
|
||
export default WelcomeEventPanel;
|