diff --git a/com.twin.app.shoptime/src/actions/actionTypes.js b/com.twin.app.shoptime/src/actions/actionTypes.js index e2627ae3..4d08f210 100644 --- a/com.twin.app.shoptime/src/actions/actionTypes.js +++ b/com.twin.app.shoptime/src/actions/actionTypes.js @@ -39,6 +39,8 @@ export const types = { // myPage actions GET_MY_RECOMMANDED_KEYWORD: "GET_MY_RECOMMANDED_KEYWORD", GET_MY_FAQ_INFO: "GET_MY_FAQ_INFO", + GET_NOTICE: "GET_NOTICE", + GET_MY_CUSTOMERS: "GET_MY_CUSTOMERS", // onSale actions GET_ON_SALE_INFO: "GET_ON_SALE_INFO", diff --git a/com.twin.app.shoptime/src/actions/myPageActions.js b/com.twin.app.shoptime/src/actions/myPageActions.js index 2fd7047e..7253de82 100644 --- a/com.twin.app.shoptime/src/actions/myPageActions.js +++ b/com.twin.app.shoptime/src/actions/myPageActions.js @@ -54,3 +54,46 @@ export const getMyFaqInfo = () => (dispatch, getState) => { onFail ); }; + +// Notice 조회 (IF-LGSP-049) +export const getNotice = () => (dispatch, getState) => { + const onSuccess = (response) => { + console.log("getMyNotice onSuccess ", response.data); + dispatch({ + type: types.GET_NOTICE, + payload: response.data.data, + }); + }; + + const onFail = (error) => { + console.error("getMyNotice onFail ", error); + }; + + TAxios(dispatch, getState, "get", URLS.GET_NOTICE, {}, {}, onSuccess, onFail); +}; + +// MyPage 파트너사 Contact 정보 조회 (IF-LGSP-033) +export const getMyCustomers = () => (dispatch, getState) => { + const onSuccess = (response) => { + console.log("getMyCustomers onSuccess ", response.data); + dispatch({ + type: types.GET_MY_CUSTOMERS, + payload: response.data.data, + }); + }; + + const onFail = (error) => { + console.error("getMyCustomers onFail ", error); + }; + + TAxios( + dispatch, + getState, + "get", + URLS.GET_MY_CUSTOMERS, + {}, + {}, + onSuccess, + onFail + ); +}; diff --git a/com.twin.app.shoptime/src/api/apiConfig.js b/com.twin.app.shoptime/src/api/apiConfig.js index cb9398f4..bc861a94 100644 --- a/com.twin.app.shoptime/src/api/apiConfig.js +++ b/com.twin.app.shoptime/src/api/apiConfig.js @@ -39,7 +39,7 @@ export const URLS = { //my-page controller GET_MY_RECOMMANDED_KEYWORD: "/lgsp/v1/mypage/reckeyword.lge", GET_MY_FAQ_INFO: "/lgsp/v1/mypage/support/faq.lge", - GET_MY_NOTICE_INFO: "/lgsp/v1/mypage/support/notice.lge", + GET_NOTICE: "/lgsp/v1/mypage/support/notice.lge", GET_MY_CUSTOMERS: "/lgsp/v1/mypage/customers.lge", //search controller diff --git a/com.twin.app.shoptime/src/reducers/myPageReducer.js b/com.twin.app.shoptime/src/reducers/myPageReducer.js index 90ca4c16..9bacb121 100644 --- a/com.twin.app.shoptime/src/reducers/myPageReducer.js +++ b/com.twin.app.shoptime/src/reducers/myPageReducer.js @@ -19,6 +19,16 @@ export const myPageReducer = (state = initialState, action) => { ...state, faqData: action.payload, }; + case types.GET_NOTICE: + return { + ...state, + noticeData: action.payload, + }; + case types.GET_MY_CUSTOMERS: + return { + ...state, + contactData: action.payload, + }; default: return state; diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx index 0451261a..255f4ef1 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx @@ -1,32 +1,16 @@ import React, { useCallback, useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; - -import { getMyFaqInfo } from "../../actions/myPageActions"; import TBody from "../../components/TBody/TBody"; import TPanel from "../../components/TPanel/TPanel"; +import css from "./MyPagePanel.module.less"; import Support from "./MyPageSub/Support/Support"; export default function MyPagePanel() { - const dispatch = useDispatch(); - const [faqs, setFaqs] = useState(); - - const faqInfos = useSelector((state) => state.myPage.faqData.faqInfos); - const contactInfos = useSelector((state) => state.myPage.faqData); - - useEffect(() => { - dispatch(getMyFaqInfo({})); - }, [dispatch]); - - useEffect(() => { - if (faqInfos) { - setFaqs(faqInfos); - } - }, [faqInfos]); - return ( - + + + ); } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.module.less index e69de29b..5103ddaa 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.module.less @@ -0,0 +1,3 @@ +.tBody { + height: 100%; +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ContactContents/ContactContents.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ContactContents/ContactContents.jsx new file mode 100644 index 00000000..3889f2dc --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ContactContents/ContactContents.jsx @@ -0,0 +1,73 @@ +import React, { useEffect } from "react"; + +import { useDispatch, useSelector } from "react-redux"; + +import Spottable from "@enact/spotlight/Spottable"; + +import { getMyCustomers } from "../../../../../actions/myPageActions"; +import TScroller from "../../../../../components/TScroller/TScroller"; +import { $L } from "../../../../../utils/helperMethods"; +import css from "./ContactContents.module.less"; + +const SpottableComponent = Spottable("div"); +const STR_FOOTER = `For any other LG TV Shopping app related inquires, please contact us below\nSupport email address – shoptime.support@lge.com`; + +export default function ContactContents() { + const dispatch = useDispatch(); + + useEffect(() => { + dispatch(getMyCustomers({})); + }, [dispatch]); + + const contactInfos = useSelector( + (state) => state.myPage.contactData.partners + ); + + return ( +
+ + {contactInfos && contactInfos.length > 0 && ( +
+ {contactInfos && + contactInfos.length > 0 && + contactInfos.map((contact, idx) => { + return ( + +
+ {contact.patncLogoPath && ( + partnerImg + )} + {contact.patncNm && contact.patncNm} +
+
+ {contact.csInfos && + contact.csInfos.length > 0 && + contact.csInfos.map((cs, idx) => { + return ( +
+ {cs.csPhnNo && ( + {$L(`Phone: ${cs.csPhnNo}`)} + )} + {cs.csMail && ( + {$L(`Email: ${cs.csMail}`)} + )} + {cs.csSiteUrl && ( + {$L(`Website: ${cs.csSiteUrl}`)} + )} +
+ ); + })} +
+
+ ); + })} +
+ )} +
+
{$L(STR_FOOTER)}
+
+ ); +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ContactContents/ContactContents.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ContactContents/ContactContents.module.less new file mode 100644 index 00000000..04ac18fc --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ContactContents/ContactContents.module.less @@ -0,0 +1,79 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.contactContainer { + width: 1680px; + height: 540px; + + .container { + height: 635px; + width: 100%; + + .contactList { + width: 1650px; + height: 120px; + .flex(@justifyCenter: flex-start); + color: @COLOR_GRAY06; + .font(@fontFamily: @arialFontBold,@fontSize:30px); + background: @COLOR_WHITE; + text-align: left; + letter-spacing: -0.75px; + + box-shadow: 0px 3px 5.6px 0.4px rgba(0, 0, 0, 0.11); + margin: 0 0 10px; + + .border-solid(@size:1px,@color:#cccccc); + border-radius: 8px; + + .partners { + display: flex; + padding: 25px 27px; + align-items: center; + width: 237px; + height: 100%; + background: @COLOR_LIGHT_SKYBLUE; + .font(@fontFamily: @arialFont,@fontSize:28px); + + img { + width: 60px; + height: 60px; + margin-right: 10px; + } + } + + .contents { + padding: 29px 31px; + .font(@fontFamily: @arialFont,@fontSize:28px); + color: @COLOR_GRAY06; + + span:not(:last-child) { + &::after { + content: "|"; + font-size: 26px; + color: @COLOR_GRAY06; + padding: 0 8px; + position: relative; + top: -3px; + } + } + } + + &:focus-within, + &:focus { + box-shadow: 0 3px 5.64px 0.36px #0000007d, + 0 0 0 4px @PRIMARY_COLOR_RED inset; + box-sizing: border-box; + } + } + } +} +.notiBottom { + text-align: center; + .font(@fontFamily: @baseFont,@fontSize:24px); + color: @COLOR_GRAY06; + margin-top: 71px; + white-space: pre-line; + line-height: 1.25; + letter-spacing: normal; + height: 53px; +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx new file mode 100644 index 00000000..9dccf18b --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx @@ -0,0 +1,96 @@ +import React, { useCallback, useEffect, useState } from "react"; + +import { useDispatch, useSelector } from "react-redux"; + +import Spottable from "@enact/spotlight/Spottable"; +import Marquee from "@enact/ui/Marquee"; + +import { getMyFaqInfo, getNotice } from "../../../../../actions/myPageActions"; +import TPopUp from "../../../../../components/TPopUp/TPopUp"; +import TScroller from "../../../../../components/TScroller/TScroller"; +import css from "./ListContents.module.less"; + +const SpottableComponent = Spottable("li"); + +export default function ListContents({ selectedTab }) { + const dispatch = useDispatch(); + + const faqInfos = useSelector((state) => state.myPage.faqData.faqInfos); + const noticeInfos = useSelector( + (state) => state.myPage.noticeData.noticeInfos + ); + + const [faqPopUpOpen, setFaqPopUpOpen] = useState(false); + const [currentInfos, setCurrentInfos] = useState(null); + const [listInfos, setListInfos] = useState([]); + + useEffect(() => { + dispatch(getMyFaqInfo({})); + dispatch(getNotice({})); + }, [dispatch]); + + useEffect(() => { + selectedTab === 0 ? setListInfos(faqInfos) : setListInfos(noticeInfos); + }, [selectedTab, faqInfos, noticeInfos]); + + const handleListClick = useCallback( + (notiNo) => { + if (listInfos) { + const selectedData = listInfos.find((list) => list.notiNo === notiNo); + setCurrentInfos(selectedData); + setFaqPopUpOpen(true); + } + }, + [listInfos, currentInfos, faqInfos, noticeInfos] + ); + + return ( + <> + + + + { + setFaqPopUpOpen(false); + }} + hasButton + button1Text="OK" + > + {currentInfos && ( +
+
+ {currentInfos.notiTitl} + +
+ {currentInfos.expsDt.substring(0, 10)} +
+
+ + {currentInfos.notiCntt} + +
+ )} +
+ + ); +} +0; diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.module.less new file mode 100644 index 00000000..51a3270a --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.module.less @@ -0,0 +1,82 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.scrollContainer { + height: 635px; + width: 1680px; + + > div:nth-child(2) { + padding: 0; + > div { + background-color: #cccccc; + height: 100%; + width: 4px; + > div { + background-color: @COLOR_GRAY05; + } + } + } +} + +.liContainer { + height: 635px; + width: 100%; + + li { + width: 1650px; + height: 70px; + + color: @COLOR_GRAY06; + .font(@fontFamily: @arialFontBold,@fontSize:30px); + background: @COLOR_WHITE; + text-align: left; + + line-height: 70px; + letter-spacing: -0.75px; + padding: 0 61px; + box-shadow: 0px 3px 5.6px 0.4px rgba(0, 0, 0, 0.11); + margin: 0 0 10px; + + .border-solid(@size:1px,@color:#cccccc); + border-radius: 8px; + + &:hover, + &:focus { + box-shadow: 0 3px 5.64px 0.36px #0000007d, + 0 0 0 4px @PRIMARY_COLOR_RED inset; + color: @PRIMARY_COLOR_RED; + box-sizing: border-box; + } + + .marquee { + width: 100%; + } + } +} + +.faqConts { + background-color: @COLOR_WHITE; + font-size: 30px; + border: 1px solid @COLOR_GRAY02; + color: @COLOR_BLACK; + border-radius: 4px; + white-space: pre-wrap; + + .faqTitle { + .font(@fontFamily: @baseFontBold,@fontSize:30px); + border-bottom: 1px solid @COLOR_GRAY02; + padding: 20px 30px; + display: flex; + flex-direction: column; + .expDate { + text-align: right; + .font(@fontFamily: @baseFont,@fontSize:24px); + } + } + + .faqDesc { + padding: 30px; + line-height: 50px; + height: 460px; + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx index cdefd8b3..2dd9a1c8 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx @@ -1,29 +1,22 @@ import React, { useCallback, useState } from "react"; -import { Marquee, MarqueeController } from "@enact/sandstone/Marquee"; -import Spottable from "@enact/spotlight/Spottable"; - -import TBody from "../../../../components/TBody/TBody"; -import TPopUp from "../../../../components/TPopUp/TPopUp"; -import TScroller from "../../../../components/TScroller/TScroller"; +import TButtonTab from "../../../../components/TButtonTab/TButtonTab"; import { $L } from "../../../../utils/helperMethods"; +import ContactContents from "./ContactContents/ContactContents"; +import ListContents from "./ListContents/ListContents"; import css from "./Support.module.less"; -const SpottableComponent = Spottable("li"); +export default function Support() { + const [selectedTab, setSelectedTab] = useState(0); -export default function Support({ faqs }) { - const [faqPopUpOpen, setFaqPopUpOpen] = useState(false); - const [currentFaqs, setCurrentFaqs] = useState(null); + const tabList = [$L("FAQ"), $L("Contact"), $L("Notice")]; - const handleListClick = useCallback( - (notiNo) => { - if (faqs) { - const selectedFaq = faqs.find((faq) => faq.notiNo === notiNo); - setCurrentFaqs(selectedFaq); - setFaqPopUpOpen(true); - } + const handleItemClick = useCallback( + ({ index, ...rest }) => { + console.log("#TButtonTab onItemClick", index, rest); + setSelectedTab(index); }, - [faqs, currentFaqs] + [selectedTab] ); const confirmClick = useCallback(() => { @@ -32,62 +25,20 @@ export default function Support({ faqs }) { return (
-
{$L("Support")}
- - {/* FAQ */} - - - { - setFaqPopUpOpen(false); - }} - hasButton - button1Text="OK" - > - {currentFaqs && ( -
-
- {/* */} - {/*
*/} - {currentFaqs.notiTitl} - {/*
*/} - {/*
*/} -
- {currentFaqs.expsDt.substring(0, 10)} -
-
- {/* - {currentFaqs.notiCntt} - {/* */} - -
- )} -
+
+
{$L("Support")}
+ +
+ {selectedTab && selectedTab === 1 ? ( + + ) : ( + + )}
); } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less index a48e374f..c81522a7 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less @@ -6,81 +6,26 @@ height: 100%; padding-left: 60px; padding-top: 120px; - .title { - color: #9ba5b5; - .font(@fontFamily: @arialFont,@fontSize:60px); - line-height: normal; - letter-spacing: -0.6px; - } - .tBody { - height: 1080px; - } - .liContainer { - height: 640px; - margin-top: 50px; - width: 100%; - } - li { - width: 1660px; - height: 70px; - color: @COLOR_GRAY06; - .font(@fontFamily: @arialFontBold,@fontSize:30px); - background: @COLOR_WHITE; - text-align: left; + .header { + margin-bottom: 50px; - line-height: 70px; - // padding: 25px 0 25px 61px; - letter-spacing: -0.75px; - padding-left: 61px; - box-shadow: 0px 3px 5.6px 0.4px rgba(0, 0, 0, 0.11); - margin: 0 0 10px; + .title { + color: #9ba5b5; + .font(@fontFamily: @baseFont,@fontSize:60px); + line-height: normal; + letter-spacing: -0.6px; + margin-bottom: 35px; + } - .border-solid(@size:1px,@color:#cccccc); - border-radius: 8px; + .tTab { + > div { + min-width: 260px; - &:hover, - &:focus { - // .border-solid(@size:1px,@color:@PRIMARY_COLOR_RED); - // box-shadow: 0 3px 5.64px 0.36px #0000007d; - box-shadow: 0 3px 5.64px 0.36px #0000007d, - 0 0 0 4px @PRIMARY_COLOR_RED inset; - color: @PRIMARY_COLOR_RED; - box-sizing: border-box; + > div { + .font(@fontFamily: @baseFontBold, @fontSize: 30px); + } + } } } } - -.faqConts { - background-color: @COLOR_WHITE; - font-size: 30px; - border: 1px solid @COLOR_GRAY02; - color: @COLOR_BLACK; - border-radius: 4px; - white-space: pre-wrap; - - .faqTitle { - .font(@fontFamily: @baseFontBold,@fontSize:30px); - border-bottom: 1px solid @COLOR_GRAY02; - padding: 20px 30px; - display: flex; - flex-direction: column; - // .marquee { - // width: calc(100% - 150px); - // } - // .notiTitle { - // width: calc(100% - 150px); - // } - .expDate { - // width: 150px; - text-align: right; - .font(@fontFamily: @baseFont,@fontSize:24px); - } - } - - .faqDesc { - padding: 30px; - line-height: 50px; - height: 460px; - } -}