From 8dcbf72ed3604759a7c5ac6e42ec10abfeed92dc Mon Sep 17 00:00:00 2001 From: "hyunwoo93.cha" Date: Mon, 4 Mar 2024 22:35:15 +0900 Subject: [PATCH] =?UTF-8?q?[myPage]=20myInfo=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- com.twin.app.shoptime/package-lock.json | 15 ++ .../src/actions/actionTypes.js | 6 + .../src/actions/billingActions.js | 32 ++++ .../src/actions/shippingActions.js | 32 ++++ com.twin.app.shoptime/src/api/apiConfig.js | 6 + com.twin.app.shoptime/src/lunaSend/account.js | 30 +++- com.twin.app.shoptime/src/lunaSend/common.js | 2 +- .../src/reducers/billingReducer.js | 18 +++ .../src/reducers/shippingReducer.js | 18 +++ com.twin.app.shoptime/src/store/store.js | 4 + .../src/style/CommonStyle.module.less | 2 + com.twin.app.shoptime/src/utils/Config.js | 1 + .../MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx | 148 ++++++++++++------ .../BillingAddressTab/BillingAddressItem.jsx | 43 +++++ .../BillingAddressItem.module.less | 63 ++++++++ .../BillingAddressTab/BillingAddressTab.jsx | 75 ++++++++- .../BillingAddressTab.module.less | 5 + .../MyInfoTabContents/CouponTab/CouponTab.jsx | 6 + .../MyInfoNoResults/MyInfoNoResults.jsx | 26 +++ .../MyInfoNoResults.module.less | 20 +++ .../MyInfoTabContentsContainer.jsx | 6 +- .../PaymentTab/PaymentItem.jsx | 44 ++---- .../PaymentTab/PaymentItem.module.less | 44 +++--- .../PaymentTab/PaymentTab.jsx | 19 +-- .../ShippingAddressItem.jsx | 43 +++++ .../ShippingAddressItem.module.less | 63 ++++++++ .../ShippingAddressTab/ShippingAddressTab.jsx | 70 ++++++++- .../ShippingAddressTab.module.less | 5 + 28 files changed, 717 insertions(+), 129 deletions(-) create mode 100644 com.twin.app.shoptime/src/actions/billingActions.js create mode 100644 com.twin.app.shoptime/src/actions/shippingActions.js create mode 100644 com.twin.app.shoptime/src/reducers/billingReducer.js create mode 100644 com.twin.app.shoptime/src/reducers/shippingReducer.js create mode 100644 com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.jsx create mode 100644 com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.module.less create mode 100644 com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.jsx create mode 100644 com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.module.less create mode 100644 com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.jsx create mode 100644 com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.module.less diff --git a/com.twin.app.shoptime/package-lock.json b/com.twin.app.shoptime/package-lock.json index c08979d0..ced9968f 100644 --- a/com.twin.app.shoptime/package-lock.json +++ b/com.twin.app.shoptime/package-lock.json @@ -18,6 +18,7 @@ "axios": "^0.21.1", "ilib": "^14.3.0", "prop-types": "^15.6.2", + "qrcode.react": "^3.1.0", "react": "^16.7.0", "react-dom": "^16.7.0", "react-redux": "^7.2.3", @@ -443,6 +444,14 @@ "react-is": "^16.13.1" } }, + "node_modules/qrcode.react": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz", + "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/ramda": { "version": "0.24.1", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", @@ -1012,6 +1021,12 @@ "react-is": "^16.13.1" } }, + "qrcode.react": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz", + "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==", + "requires": {} + }, "ramda": { "version": "0.24.1", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", diff --git a/com.twin.app.shoptime/src/actions/actionTypes.js b/com.twin.app.shoptime/src/actions/actionTypes.js index 8ed7fec9..41080538 100644 --- a/com.twin.app.shoptime/src/actions/actionTypes.js +++ b/com.twin.app.shoptime/src/actions/actionTypes.js @@ -19,9 +19,15 @@ export const types = { SET_EXIT_APP: "SET_EXIT_APP", GET_LOGIN_USER_DATA: "GET_LOGIN_USER_DATA", + // billing actions + GET_MY_INFO_BILLING_SEARCH: "GET_MY_INFO_BILLING_SEARCH", + // card actions GET_MY_INFO_CARD_SEARCH: "GET_MY_INFO_CARD_SEARCH", + // shipping actions + GET_MY_INFO_SHIPPING_SEARCH: "GET_MY_INFO_SHIPPING_SEARCH", + // appData actions ADD_MAIN_INDEX: "ADD_MAIN_INDEX", diff --git a/com.twin.app.shoptime/src/actions/billingActions.js b/com.twin.app.shoptime/src/actions/billingActions.js new file mode 100644 index 00000000..e8399980 --- /dev/null +++ b/com.twin.app.shoptime/src/actions/billingActions.js @@ -0,0 +1,32 @@ +import { URLS } from "../api/apiConfig"; +import { TAxios } from "../api/TAxios"; +import { types } from "./actionTypes"; + +// IF-LGSP-328 : 회원 Billing Address 조회 +export const getMyInfoBillingSearch = (props) => (dispatch, getState) => { + const { mbrNo } = props; + + const onSuccess = (response) => { + console.log("getMyInfoBillingSearch onSuccess: ", response.data); + + dispatch({ + type: types.GET_MY_INFO_BILLING_SEARCH, + payload: response.data.data, + }); + }; + + const onFail = (error) => { + console.error("getMyInfoBillingSearch onFail: ", error); + }; + + TAxios( + dispatch, + getState, + "get", + URLS.GET_MY_INFO_BILLING_SEARCH, + { mbrNo }, + {}, + onSuccess, + onFail + ); +}; diff --git a/com.twin.app.shoptime/src/actions/shippingActions.js b/com.twin.app.shoptime/src/actions/shippingActions.js new file mode 100644 index 00000000..aba1d659 --- /dev/null +++ b/com.twin.app.shoptime/src/actions/shippingActions.js @@ -0,0 +1,32 @@ +import { URLS } from "../api/apiConfig"; +import { TAxios } from "../api/TAxios"; +import { types } from "./actionTypes"; + +// IF-LGSP-324 회원 Shipping Address 조회 +export const getMyInfoShippingSearch = (props) => (dispatch, getState) => { + const { mbrNo } = props; + + const onSuccess = (response) => { + console.log("getmyInfoShippingSearch OnSuccess: ", response.data); + + dispatch({ + type: types.GET_MY_INFO_SHIPPING_SEARCH, + payload: response.data.data, + }); + }; + + const onFail = (error) => { + console.error("getmyInfoShippingSearch onFail: ", error); + }; + + TAxios( + dispatch, + getState, + "get", + URLS.GET_MY_INFO_SHIPPING_SEARCH, + { mbrNo }, + {}, + onSuccess, + onFail + ); +}; diff --git a/com.twin.app.shoptime/src/api/apiConfig.js b/com.twin.app.shoptime/src/api/apiConfig.js index 6111b5a1..22ef0d0e 100644 --- a/com.twin.app.shoptime/src/api/apiConfig.js +++ b/com.twin.app.shoptime/src/api/apiConfig.js @@ -11,9 +11,15 @@ export const URLS = { REGISTER_DEVICE: "/lgsp/v1/device/register.lge", REGISTER_DEVICE_INFO: "/lgsp/v1/device/register/info.lge", + // billing controller + GET_MY_INFO_BILLING_SEARCH: "/lgsp/v1/myinfo/address/billing/search.lge", + // card controller GET_MY_INFO_CARD_SEARCH: "/lgsp/v1/myinfo/card/search.lge", + // shipping controller + GET_MY_INFO_SHIPPING_SEARCH: "/lgsp/v1/myinfo/address/shipping/search.lge", + //home controller GET_HOME_TERMS: "/lgsp/v1/home/terms.lge", GET_HOME_MENU: "/lgsp/v1/home/menu.lge", diff --git a/com.twin.app.shoptime/src/lunaSend/account.js b/com.twin.app.shoptime/src/lunaSend/account.js index 5790e8cc..9948c0cc 100644 --- a/com.twin.app.shoptime/src/lunaSend/account.js +++ b/com.twin.app.shoptime/src/lunaSend/account.js @@ -108,13 +108,41 @@ export const getLoginUserData = ( } else { onSuccess({ userId: "twin", - userInfo: "US2401051532595", + userInfo: "US2308020104782", email: "twin@t-win.kr", returnValue: true, }); } }; +export const logoutAccount = ( + parameters, + { onSuccess, onFailure, onComplete } +) => { + if (typeof window === "object" && window.PalmSystem) { + if (process.env.REACT_APP_MODE === "DEBUG") { + console.log("logoutAccount"); + return "Mock Data"; + } else { + return new LS2Request().send({ + service: "luna://com.webos.service.accountmanager", + method: "logoutAccount", + parameters: parameters, + onSuccess, + onFailure, + onComplete, + }); + } + } else { + onSuccess({ + useId: null, + userInfo: null, + email: null, + returnValue: true, + }); + } +}; + export const launchMembershipApp = ({ onSuccess, onFailure, onComplete }) => { if (typeof window === "object" && window.PalmSystem) { if (process.env.REACT_APP_MODE === "DEBUG") { diff --git a/com.twin.app.shoptime/src/lunaSend/common.js b/com.twin.app.shoptime/src/lunaSend/common.js index dd179127..ed1c8f99 100644 --- a/com.twin.app.shoptime/src/lunaSend/common.js +++ b/com.twin.app.shoptime/src/lunaSend/common.js @@ -67,7 +67,7 @@ export const getHttpHeaderForServiceRequest = ({ } else { onSuccess({ HOST: "US.nextlgsdp.com", - "X-User-Number": "US2401051532595", + "X-User-Number": "US2308020104782", Authorization: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJuZXh0bGdzZHAuY29tIiwiYXVkIjoibmV4dGxnc2RwLmNvbSIsImlhdCI6MTcwNzc4NTUyNSwiZXhwIjoxNzA3NzkyNzI1LCJtYWNBZGRyZXNzIjoiZWVkMDQ2NjdiNjUzOWU3YmQxMDA1OTljYjBkYTI5ZjRjZTgyZGZlOGZkNzIzMDAxZGVmMjg4NWRkNWZiODRmNWNiMzZlM2QwNzYzNWZjZGJjYWNjNGVjMzI5NWIwNjZjOTMwNmNmNDI1ZGQzMmQ2MDMxMjc1NWNkOTIyNjEwMzcifQ.vqPdYGnN46diesDBLzA4UhACCJVdIycLs7wZu9M55Hc", "X-Authentication": "MkOLvUocrJ69RH/iV1ZABJhjR2g=", diff --git a/com.twin.app.shoptime/src/reducers/billingReducer.js b/com.twin.app.shoptime/src/reducers/billingReducer.js new file mode 100644 index 00000000..adbca646 --- /dev/null +++ b/com.twin.app.shoptime/src/reducers/billingReducer.js @@ -0,0 +1,18 @@ +import { types } from "../actions/actionTypes"; + +const initialState = { + billingData: null, +}; + +export const billingReducer = (state = initialState, action) => { + switch (action.type) { + case types.GET_MY_INFO_BILLING_SEARCH: + return { + ...state, + billingData: action.payload, + }; + + default: + return state; + } +}; diff --git a/com.twin.app.shoptime/src/reducers/shippingReducer.js b/com.twin.app.shoptime/src/reducers/shippingReducer.js new file mode 100644 index 00000000..044bee6a --- /dev/null +++ b/com.twin.app.shoptime/src/reducers/shippingReducer.js @@ -0,0 +1,18 @@ +import { types } from "../actions/actionTypes"; + +const initialState = { + shippingData: null, +}; + +export const shippingReducer = (state = initialState, action) => { + switch (action.type) { + case types.GET_MY_INFO_SHIPPING_SEARCH: + return { + ...state, + shippingData: action.payload, + }; + + default: + return state; + } +}; diff --git a/com.twin.app.shoptime/src/store/store.js b/com.twin.app.shoptime/src/store/store.js index ff1991ac..42e520e8 100644 --- a/com.twin.app.shoptime/src/store/store.js +++ b/com.twin.app.shoptime/src/store/store.js @@ -2,6 +2,7 @@ import { applyMiddleware, combineReducers, createStore } from "redux"; import thunk from "redux-thunk"; import { appDataReducer } from "../reducers/appDataReducer"; +import { billingReducer } from "../reducers/billingReducer"; import { brandReducer } from "../reducers/brandReducer"; import { cardReducer } from "../reducers/cardReducer"; import { commonReducer } from "../reducers/commonReducer"; @@ -16,6 +17,7 @@ import { onSaleReducer } from "../reducers/onSaleReducer"; import { panelsReducer } from "../reducers/panelReducer"; import { productReducer } from "../reducers/productReducer"; import { searchReducer } from "../reducers/searchReducer"; +import { shippingReducer } from "../reducers/shippingReducer"; const rootReducer = combineReducers({ panels: panelsReducer, @@ -33,6 +35,8 @@ const rootReducer = combineReducers({ event: eventReducer, coupon: couponReducer, card: cardReducer, + billing: billingReducer, + shipping: shippingReducer, }); export const store = createStore(rootReducer, applyMiddleware(thunk)); diff --git a/com.twin.app.shoptime/src/style/CommonStyle.module.less b/com.twin.app.shoptime/src/style/CommonStyle.module.less index 609ccb70..83ec501f 100644 --- a/com.twin.app.shoptime/src/style/CommonStyle.module.less +++ b/com.twin.app.shoptime/src/style/CommonStyle.module.less @@ -50,6 +50,7 @@ @BG_COLOR_02: #f2f2f2; @BG_COLOR_03: #f2f6fb; @BG_COLOR_04: #f5f5f5; +@BG_COLOR_05: #fcfcfc; /* MAIN COLOR */ @PRIMARY_COLOR_RED: #c70850; @@ -66,6 +67,7 @@ @COLOR_GRAY07: #222222; @COLOR_GRAY08: #1a1a1a; @COLOR_GRAY09: #999999; +@COLOR_GRAY10: #a3a3a3; @COLOR_BLACK: #000000; @COLOR_NAVY: #2c343f; diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index cea31e14..5129c664 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -45,6 +45,7 @@ export const ACTIVE_POPUP = { couponPopup: "couponPopup", favoritePopup: "favoritePopup", loginPopup: "loginPopup", + logoutPopup: "logoutPopup", }; export const AUTO_SCROLL_DELAY = 600; diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx index 9c606210..ec6cd215 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx @@ -7,11 +7,17 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco import ic_profile from "../../../../../assets/images/icons/ic-profile.svg"; import myinfo_login from "../../../../../assets/images/img-banner-myinfo-login@3x.png"; +import { getMyInfoBillingSearch } from "../../../../actions/billingActions"; import { getMyInfoCardSearch } from "../../../../actions/cardActions"; +import { setHidePopup, setShowPopup } from "../../../../actions/commonActions"; +import { getProductCouponInfo } from "../../../../actions/couponActions"; +import { getMyInfoShippingSearch } from "../../../../actions/shippingActions"; import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton"; import TButtonTab, { LIST_TYPE, } from "../../../../components/TButtonTab/TButtonTab"; +import TPopUp from "../../../../components/TPopUp/TPopUp"; +import * as Config from "../../../../utils/Config"; import { $L } from "../../../../utils/helperMethods"; import css from "../MyInfo/MyInfo.module.less"; import BillingAddressTab from "./MyInfoTabContents/BillingAddressTab/BillingAddressTab"; @@ -52,6 +58,9 @@ export default function MyInfo() { const { userId, userInfo, email } = useSelector( (state) => state.common.appStatus.loginUserData ); + const { popupVisible, activePopup } = useSelector( + (state) => state.common.popup + ); const [tab, setTab] = useState(0); @@ -69,7 +78,12 @@ export default function MyInfo() { useEffect(() => { setTab(0); - dispatch(getMyInfoCardSearch(userInfo)); + if (userInfo) { + dispatch(getMyInfoCardSearch({ mbrNo: userInfo })); + dispatch(getMyInfoBillingSearch({ mbrNo: userInfo })); + dispatch(getMyInfoShippingSearch({ mbrNo: userInfo })); + dispatch(getProductCouponInfo({ mbrNo: userInfo })); + } }, [userInfo, dispatch]); const handleItemClick = useCallback( @@ -99,63 +113,95 @@ export default function MyInfo() { }; }, []); + const handleLogoutButtonClick = useCallback(() => { + dispatch(setShowPopup(Config.ACTIVE_POPUP.logoutPopup)); + }, [dispatch]); + + const handleCancel = useCallback(() => { + dispatch(setHidePopup()); + }, [dispatch]); + + useEffect(() => { + Spotlight.focus(); + }, [popupVisible]); + return ( - -
-
-
- -
+ <> + +
+
+
+ +
+ {userInfo ? ( + <>{`${$L("Hi")}, ${userId}`} + ) : ( + $L("Please log in to use your LG Shoptime.") + )} +
+
+
+
+
Email
+
{userInfo ? email : "-"}
+
{userInfo ? ( - <>{`${$L("Hi")}, ${userId}`} + + {$L("LOG OUT")} + ) : ( - $L("Please log in to use your LG Shoptime.") + + {$L("SIGN IN (LG Account)")} + )}
-
-
-
Email
-
{userInfo ? email : "-"}
+ {userInfo ? ( + <> + {buttonTabList && buttonTabList.length > 0 && ( + + + + {$L("ADD/EDIT")} + + + )} + {SelectedComponent && } + + ) : ( +
+
- {userInfo ? ( - - {$L("LOG OUT")} - - ) : ( - - {$L("SIGN IN (LG Account)")} - - )} -
+ )}
- {userInfo ? ( - <> - {buttonTabList && buttonTabList.length > 0 && ( - - - - {$L("ADD/EDIT")} - - - )} - {SelectedComponent && } - - ) : ( -
- -
- )} -
- + + + {/* logout */} + {activePopup === Config.ACTIVE_POPUP.logoutPopup && ( + + )} + ); } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.jsx new file mode 100644 index 00000000..6380bdba --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.jsx @@ -0,0 +1,43 @@ +import React, { memo } from "react"; + +import Spottable from "@enact/spotlight/Spottable"; + +import css from "./BillingAddressItem.module.less"; + +const ItemContainer = Spottable("div"); + +export default memo(function BillingAddressItem({ + bilOdrFnm, + bilOdrLnm, + bilZpcd, + bilStatNm, + bilCityNm, + bilDtlAddr, + bilCtpt, + bilEmalAddr, +}) { + return ( + +

+ {bilOdrFnm} {bilOdrLnm} +

+
+

+ {bilZpcd} {bilStatNm},
+ {bilCityNm}
+ {bilDtlAddr} +

+
+
+

+ + {bilCtpt.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`)} +

+

+ + {bilEmalAddr} +

+
+ + ); +}); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.module.less new file mode 100644 index 00000000..2dadeeca --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem.module.less @@ -0,0 +1,63 @@ +@import "../../../../../../style/CommonStyle.module.less"; +@import "../../../../../../style/utils.module.less"; + +.itemContainer { + .size(@w: 444px, @h: 348px); + background-color: @BG_COLOR_05; + border-radius: 12px; + padding: 32px 30px; + position: relative; + + .title { + color: @COLOR_GRAY06; + .font(@fontFamily: @baseFontBold, @fontSize: 36px); + margin-bottom: 19px; + } + + .addressWrap { + color: @COLOR_GRAY03; + line-height: 1.33; + margin-bottom: 37px; + font-size: 24px; + } + + .cardFooter { + .font(@fontFamily: @baseFontBold, @fontSize: 24px); + color: @COLOR_GRAY03; + + .callNumber { + padding-left: 42px; + margin-bottom: 6px; + + > span { + background-image: url("../../../../../../../assets/images/icons/ic-gr-call.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + .size(@w: 36px, @h: 36px); + position: absolute; + left: 30px; + } + } + + .email { + padding-left: 42px; + + > span { + background-image: url("../../../../../../../assets/images/icons/ic-gr-mail-36.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + .size(@w: 36px, @h: 36px); + position: absolute; + left: 30px; + } + } + } + + &:focus { + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + } + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.jsx index 7612e451..5dafbb86 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.jsx @@ -1,9 +1,80 @@ -import React from "react"; +import React, { useCallback } from "react"; +import { useSelector } from "react-redux"; + +import TVirtualGridList from "../../../../../../components/TVirtualGridList/TVirtualGridList"; +import useScrollTo from "../../../../../../hooks/useScrollTo"; +import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults"; import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer"; +import BillingAddressItem from "./BillingAddressItem"; +import css from "./BillingAddressTab.module.less"; + +export const ITEM_SIZE = { + itemWidth: 444, + itemHeight: 348, + spacing: 18, +}; export default function BillingAddressTab() { + const billingDatas = useSelector((state) => state.billing.billingData); + const { billingInfo } = billingDatas || {}; + + const { getScrollTo, scrollLeft } = useScrollTo(); + + const renderItem = useCallback( + ({ index, ...rest }) => { + const { + bilAddrSno, + bilCityNm, + bilCtpt, + bilDtlAddr, + bilEmalAddr, + bilOdrFnm, + bilOdrLnm, + bilStatNm, + bilStatPvc, + bilZpcd, + chgDt, + cntryCd, + cntryNm, + mbrNo, + regDt, + useFlag, + } = billingInfo[index]; + + return ( + + ); + }, + [billingInfo] + ); + return ( - BillingAddressTab + + {billingDatas && billingInfo && billingInfo.length > 0 ? ( + + ) : ( + + )} + ); } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.module.less index e69de29b..b91a5456 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.module.less @@ -0,0 +1,5 @@ +.grid { + > div { + height: 348px; + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx index dab26a55..95c375df 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx @@ -1,7 +1,13 @@ import React from "react"; +import { useSelector } from "react-redux"; + import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer"; export default function CouponTab() { + const couponDatas = useSelector( + (state) => state.coupon.productCouponInfoData + ); + return Coupon; } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.jsx new file mode 100644 index 00000000..c35894b1 --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.jsx @@ -0,0 +1,26 @@ +import React from "react"; + +import NoResultsImgBilling from "../../../../../../../assets/images/img-my-info-billing@3x.png"; +import NoResultsImgCoupon from "../../../../../../../assets/images/img-myinfo-coupon@3x.png"; +import NoResultsImgPayment from "../../../../../../../assets/images/img-myinfo-payment@3x.png"; +import NoResultsImgShipping from "../../../../../../../assets/images/img-myinfo-shipping@3x.png"; +import { $L } from "../../../../../../utils/helperMethods"; +import css from "./MyInfoNoResults.module.less"; + +const NO_RESULTS_IMAGE = { + PAYMENT: NoResultsImgPayment, + "BILLING ADDRESS": NoResultsImgBilling, + "SHIPPING ADDRESS": NoResultsImgShipping, + COUPON: NoResultsImgCoupon, +}; + +export default function MyInfoNoResults({ type }) { + return ( +
+ No Results +

+ {$L("There is No Registered")} {$L(type)} +

+
+ ); +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.module.less new file mode 100644 index 00000000..ca8fc401 --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults.module.less @@ -0,0 +1,20 @@ +@import "../../../../../../style/CommonStyle.module.less"; +@import "../../../../../../style/utils.module.less"; + +.container { + .size(@w: 100%, @h: 390px); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + > img { + .size(@w: 360px, @h: 180px); + } + + > p { + .font(@fontFamily: @baseFontBold, @fontSize: 36px); + margin-top: 10px; + color: @COLOR_GRAY10; + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoTabContentsContainer.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoTabContentsContainer.jsx index 6ca5024e..2270f81b 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoTabContentsContainer.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoTabContentsContainer.jsx @@ -1,5 +1,7 @@ import React from "react"; +import classNames from "classnames"; + import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import css from "./MyInfoTabContentsContainer.module.less"; @@ -10,5 +12,7 @@ const Container = SpotlightContainerDecorator( ); export default function MyInfoTabContentsContainer({ children }) { - return {children}; + return ( + {children} + ); } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.jsx index ef74f96a..14c19787 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.jsx @@ -1,48 +1,22 @@ -import React, { useCallback } from "react"; +import React, { memo } from "react"; -import { useDispatch, useSelector } from "react-redux"; +import Spottable from "@enact/spotlight/Spottable"; -import { - alertToast, - changeAppStatus, -} from "../../../../../../actions/commonActions"; -import TButton, { - SIZES, - TYPES, -} from "../../../../../../components/TButton/TButton"; -import TToast from "../../../../../../components/TToast/TToast"; -import { $L } from "../../../../../../utils/helperMethods"; import css from "./PaymentItem.module.less"; -export default function PaymentItem({ easyPmtSeq, cardKnd, cardNo }) { - const dispatch = useDispatch(); +const CardItem = Spottable("div"); +export default memo(function PaymentItem({ easyPmtSeq, cardKnd, cardNo }) { const getFormattingCardNo = (cardNumber) => { return `${"*".repeat(12)}${cardNumber.slice(-4)}` .replace(/(.{4})/g, "$1-") .slice(0, -1); }; - const handleClick = useCallback(() => { - dispatch(alertToast($L("Deleted a Payment Method"))); - }, [dispatch]); - return ( - <> -
-
-

{cardKnd.toUpperCase()}

-

{getFormattingCardNo(cardNo)}

-
- - {$L("DELETE")} - -
- + +

{cardKnd.toUpperCase()}

+

{getFormattingCardNo(cardNo)}

+ ); -} +}); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.module.less index f817cc7f..87fe6692 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.module.less @@ -1,32 +1,30 @@ @import "../../../../../../style/CommonStyle.module.less"; @import "../../../../../../style/utils.module.less"; -.itemContainer { - .size(@w: 402px, @h: 354px); +.card { + .size(@w: 402px, @h: 270px); + background-image: url("../../../../../../../assets/images/mypagepanel/img-card-bg.png"); + background-repeat: no-repeat; + background-size: cover; + padding: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + color: @COLOR_WHITE; + border-radius: 12px; + position: relative; - .card { - .size(@w: 100%, @h: 270px); - background-image: url("../../../../../../../assets/images/mypagepanel/img-card-bg.png"); - background-repeat: no-repeat; - background-size: cover; - padding: 30px; - display: flex; - flex-direction: column; - justify-content: space-between; - color: @COLOR_WHITE; - - .cardKnd { - .font(@fontFamily: @baseFontBold, @fontSize: 36px); - } - - .cardNo { - font-size: 24px; - } + .cardKnd { + .font(@fontFamily: @baseFontBold, @fontSize: 36px); } - .deleteBtn { - margin: 12px auto 0; - .size(@w: 138px, @h: 60px); + .cardNo { font-size: 24px; } + + &:focus { + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + } + } } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentTab.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentTab.jsx index 9f72941a..4d3b1765 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentTab.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentTab.jsx @@ -2,30 +2,23 @@ import React from "react"; import { useSelector } from "react-redux"; +import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults"; import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer"; import PaymentItem from "./PaymentItem"; -const mockData = { - easyPmtSeq: "202306290001561", - cardKnd: "Visa", - cardNo: "4111111111111234", -}; - export default function PaymentTab() { const cardDatas = useSelector((state) => state.card.cardData); - const { easyPmtSeq, cardKnd, cardNo } = mockData; - return ( - {mockData ? ( + {cardDatas ? ( ) : ( -

no card

+ )} ); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.jsx new file mode 100644 index 00000000..31b88beb --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.jsx @@ -0,0 +1,43 @@ +import React, { memo } from "react"; + +import Spottable from "@enact/spotlight/Spottable"; + +import css from "./ShippingAddressItem.module.less"; + +const ItemContainer = Spottable("div"); + +export default memo(function ShippingAddressItem({ + dlvrOdrFnm, + dlvrOdrLnm, + dlvrZpcd, + dlvrStatNm, + dlvrCityNm, + dlvrDtlAddr, + dlvrCtpt, + dlvrEmalAddr, +}) { + return ( + +

+ {dlvrOdrFnm} {dlvrOdrLnm} +

+
+

+ {dlvrZpcd} {dlvrStatNm},
+ {dlvrCityNm}
+ {dlvrDtlAddr} +

+
+
+

+ + {dlvrCtpt.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`)} +

+

+ + {dlvrEmalAddr} +

+
+ + ); +}); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.module.less new file mode 100644 index 00000000..2dadeeca --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressItem.module.less @@ -0,0 +1,63 @@ +@import "../../../../../../style/CommonStyle.module.less"; +@import "../../../../../../style/utils.module.less"; + +.itemContainer { + .size(@w: 444px, @h: 348px); + background-color: @BG_COLOR_05; + border-radius: 12px; + padding: 32px 30px; + position: relative; + + .title { + color: @COLOR_GRAY06; + .font(@fontFamily: @baseFontBold, @fontSize: 36px); + margin-bottom: 19px; + } + + .addressWrap { + color: @COLOR_GRAY03; + line-height: 1.33; + margin-bottom: 37px; + font-size: 24px; + } + + .cardFooter { + .font(@fontFamily: @baseFontBold, @fontSize: 24px); + color: @COLOR_GRAY03; + + .callNumber { + padding-left: 42px; + margin-bottom: 6px; + + > span { + background-image: url("../../../../../../../assets/images/icons/ic-gr-call.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + .size(@w: 36px, @h: 36px); + position: absolute; + left: 30px; + } + } + + .email { + padding-left: 42px; + + > span { + background-image: url("../../../../../../../assets/images/icons/ic-gr-mail-36.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + .size(@w: 36px, @h: 36px); + position: absolute; + left: 30px; + } + } + } + + &:focus { + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + } + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.jsx index 2f63543b..93becee9 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.jsx @@ -1,9 +1,75 @@ -import React from "react"; +import React, { useCallback } from "react"; +import { useSelector } from "react-redux"; + +import TVirtualGridList from "../../../../../../components/TVirtualGridList/TVirtualGridList"; +import useScrollTo from "../../../../../../hooks/useScrollTo"; +import { ITEM_SIZE } from "../BillingAddressTab/BillingAddressTab"; +import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults"; import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer"; +import ShippingAddressItem from "./ShippingAddressItem"; +import css from "./ShippingAddressTab.module.less"; export default function ShippingAddressTab() { + const shippingDatas = useSelector((state) => state.shipping.shippingData); + const { dlvrInfo } = shippingDatas || {}; + + const { getScrollTo, scrollLeft } = useScrollTo(); + + const renderItem = useCallback( + ({ index, ...rest }) => { + const { + chgDt, + cntryCd, + cntryNm, + dlvrAddSno, + dlvrCityNm, + dlvrCtpt, + dlvrDtlAddr, + dlvrEmalAddr, + dlvrOdrFnm, + dlvrOdrLnm, + dlvrStatNm, + dlvrStatPvc, + dlvrZpcd, + mbrNo, + regDt, + useFlag, + } = dlvrInfo[index]; + + return ( + + ); + }, + [shippingDatas] + ); + return ( - Shipping Address + + {shippingDatas && dlvrInfo && dlvrInfo.length > 0 ? ( + + ) : ( + + )} + ); } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.module.less index e69de29b..b91a5456 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.module.less @@ -0,0 +1,5 @@ +.grid { + > div { + height: 348px; + } +}