diff --git a/com.twin.app.shoptime/assets/images/img-my-info-billing.png b/com.twin.app.shoptime/assets/images/img-my-info-billing.png new file mode 100644 index 00000000..7658cf02 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/img-my-info-billing.png differ diff --git a/com.twin.app.shoptime/src/actions/orderActions.js b/com.twin.app.shoptime/src/actions/orderActions.js index 57fcbe92..f68ee060 100644 --- a/com.twin.app.shoptime/src/actions/orderActions.js +++ b/com.twin.app.shoptime/src/actions/orderActions.js @@ -2,64 +2,117 @@ import axios from "axios"; import { URLS } from "../api/apiConfig"; import { TAxios } from "../api/TAxios"; +import { GET_MY_INFO_ORDER_SEARCH_LIMIT } from "../utils/Config"; import { types } from "./actionTypes"; -import { getTermsAgreeYn } from "./commonActions"; +import { changeAppStatus, getTermsAgreeYn } from "./commonActions"; // 회원 주문 정보 조회 (IF-LGSP-340) -export const getMyinfoOrderSearch = (params) => (dispatch, getState) => { - const { - mbrNo, - srchMonth, - cancelOrderYn, - keyword, - limitNum, - orderInfoDataIdx, - orderInfo, - orderInfoCount, - } = params; +let getMyinfoOrderSearchKey = null; +let lastMyinfoOrderSearchParams = {}; +export const getMyinfoOrderSearch = + (params, orderInfoDataIdx = 1, key, loading = true) => + (dispatch, getState) => { + const { mbrNo, srchMonth, cancelOrderYn } = params; + let limitNum = params.limitNum || GET_MY_INFO_ORDER_SEARCH_LIMIT; - const onSuccess = (response) => { - console.log("getMyinfoOrderSearch onSuccess ", response.data); + if (orderInfoDataIdx === 1) { + if ( + JSON.stringify(lastMyinfoOrderSearchParams) === JSON.stringify(params) + ) { + console.log("getMyinfoOrderSearch ignore patch"); + return; + } - dispatch({ - type: types.GET_MY_INFO_ORDER_SEARCH, - payload: response.data.data, - }); + lastMyinfoOrderSearchParams = params; + } + + if (loading) { + dispatch( + changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }) + ); + } + + let currentKey = key; + const onSuccess = (response) => { + console.log("getMyinfoOrderSearch onSuccess ", response.data); + + if (orderInfoDataIdx === 1) { + getMyinfoOrderSearchKey = new Date(); + currentKey = getMyinfoOrderSearchKey; + + dispatch({ + type: types.GET_MY_INFO_ORDER_SEARCH, + payload: response.data.data, + orderSearchParams: { + mbrNo, + srchMonth, + cancelOrderYn, + limitNum, + }, + }); + } else if (getMyinfoOrderSearchKey === currentKey) { + dispatch({ + type: types.GET_MY_INFO_ORDER_SEARCH, + payload: response.data.data, + append: true, + startIndex: (orderInfoDataIdx - 1) * limitNum, + }); + } + + if (loading) { + dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); + } + }; + + const onFail = (error) => { + console.error("getMyinfoOrderSearch onFail ", error); + if (loading) { + dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); + } + if (orderInfoDataIdx === 1) { + lastMyinfoOrderSearchParams = {}; + } + }; + + TAxios( + dispatch, + getState, + "get", + URLS.GET_MY_INFO_ORDER_SEARCH, + { + mbrNo, + srchMonth, + cancelOrderYn, + limitNum, + orderInfoDataIdx, + }, + {}, + onSuccess, + onFail + ); }; - const onFail = (error) => { - console.error("getMyinfoOrderSearch onFail ", error); +export const continueGetMyinfoOrderSearch = + (orderInfoDataIdx = 2) => + (dispatch, getState) => { + const orderInfoData = getState().order.orderInfoData || {}; + const totalCount = orderInfoData.orderInfoCount ?? 0; + const startIndex = GET_MY_INFO_ORDER_SEARCH_LIMIT * (orderInfoDataIdx - 1); + + if (startIndex <= 1 || totalCount < startIndex) { + return; + } + + dispatch( + getMyinfoOrderSearch( + { ...lastMyinfoOrderSearchParams }, + orderInfoDataIdx, + getMyinfoOrderSearchKey, + false + ) + ); }; - let apiUrl; - - if (cancelOrderYn === "Y") { - apiUrl = URLS.GET_MY_INFO_ORDER_SEARCH_CANCEL; - } else if (cancelOrderYn === "N") { - apiUrl = URLS.GET_MY_INFO_ORDER_SEARCH; - } - - TAxios( - dispatch, - getState, - "get", - apiUrl, - { - mbrNo, - srchMonth, - cancelOrderYn, - keyword, - limitNum, - orderInfoDataIdx, - orderInfo, - orderInfoCount, - }, - {}, - onSuccess, - onFail - ); -}; - // 회원 주문 상세 정보 조회 (IF-LGSP-341) export const getMyinfoOrderDetailSearch = (params) => (dispatch, getState) => { const { mbrNo, ordNo, prdtId } = params; diff --git a/com.twin.app.shoptime/src/api/apiConfig.js b/com.twin.app.shoptime/src/api/apiConfig.js index 51fb3009..18e1eb1d 100644 --- a/com.twin.app.shoptime/src/api/apiConfig.js +++ b/com.twin.app.shoptime/src/api/apiConfig.js @@ -115,7 +115,6 @@ export const URLS = { SET_PURCHASE_TERMS_AGREE: "/lgsp/v1/myinfo/purchaseTerms/agree.lge", SET_PURCHASE_TERMS_WITHDRAW: "/lgsp/v1/myinfo/purchaseTerms/withdraw.lge", GET_MY_INFO_ORDER_SEARCH: "/lgsp/v1/myinfo/order/info.lge", - GET_MY_INFO_ORDER_SEARCH_CANCEL: "/lgsp/v1/myinfo/order/info.lge", GET_MY_INFO_ORDER_DETAIL_SEARCH: "/lgsp/v1/myinfo/order/detail.lge", GET_MY_INFO_ORDER_SHIPPING_SEARCH: "/lgsp/v1/myinfo/order/shipping.lge", diff --git a/com.twin.app.shoptime/src/reducers/orderReducer.js b/com.twin.app.shoptime/src/reducers/orderReducer.js index ff64e8e3..7761810c 100644 --- a/com.twin.app.shoptime/src/reducers/orderReducer.js +++ b/com.twin.app.shoptime/src/reducers/orderReducer.js @@ -1,10 +1,17 @@ import { types } from "../actions/actionTypes"; +import { GET_MY_INFO_ORDER_SEARCH_LIMIT } from "../utils/Config"; const initialState = { orderDetailData: {}, orderInfoData: {}, orderCancelData: {}, orderShippingData: {}, + orderSearchParams: { + mbrNo: null, + srchMonth: null, + cancelOrderYn: null, + limitNum: GET_MY_INFO_ORDER_SEARCH_LIMIT, + }, }; export const orderReducer = (state = initialState, action) => { @@ -15,11 +22,32 @@ export const orderReducer = (state = initialState, action) => { orderDetailData: action.payload, }; - case types.GET_MY_INFO_ORDER_SEARCH: - return { - ...state, - orderInfoData: action.payload, - }; + case types.GET_MY_INFO_ORDER_SEARCH: { + const newResults = action.payload.orderInfo || []; + const orderInfoCount = action.payload.orderInfoCount; + + if (action.append) { + const existingData = state.orderInfoData.orderInfo || []; + const combinedData = [...existingData, ...newResults]; + + return { + ...state, + orderInfoData: { + ...state.orderInfoData, + orderInfo: combinedData, + orderInfoCount, + }, + }; + } else { + return { + ...state, + orderInfoData: { + ...action.payload, + }, + orderSearchParams: action.orderSearchParams, + }; + } + } case types.GET_MY_INFO_ORDER_SEARCH_CANCEL: return { diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index 29ba9629..c6f8e783 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -43,6 +43,9 @@ export const SEARCH_DATA_MAX_RESULTS_LIMIT = 30; // getSubCategory data export const CATEGORY_DATA_MAX_RESULTS_LIMIT = 20; +// getMyinfoOrderSearch data +export const GET_MY_INFO_ORDER_SEARCH_LIMIT = 5; + // popup export const ACTIVE_POPUP = { alarmOffPopup: "alarmOffPopup", diff --git a/com.twin.app.shoptime/src/utils/helperMethods.js b/com.twin.app.shoptime/src/utils/helperMethods.js index 9675d8ec..59bab8ab 100644 --- a/com.twin.app.shoptime/src/utils/helperMethods.js +++ b/com.twin.app.shoptime/src/utils/helperMethods.js @@ -397,3 +397,9 @@ export const getRectDiff = (element1, element2) => { bottom: element1Rect.bottom - element2Rect.bottom, }; }; + +export const getFormattingCardNo = (cardNumber) => { + return `${"*".repeat(12)}${cardNumber.slice(-4)}` + .replace(/(.{4})/g, "$1-") + .slice(0, -1); +}; 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 8bce9f00..5f8d7cf9 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 @@ -2,17 +2,12 @@ import React, { memo } from "react"; import Spottable from "@enact/spotlight/Spottable"; +import { getFormattingCardNo } from "../../../../../../utils/helperMethods"; import css from "./PaymentItem.module.less"; 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); - }; - return (

{cardKnd.toUpperCase()}

diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx index b27db7c3..600c5fe4 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx @@ -1,8 +1,15 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import classNames from "classnames"; import { useDispatch, useSelector } from "react-redux"; +import { Job } from "@enact/core/util"; import Spotlight from "@enact/spotlight"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; @@ -20,6 +27,7 @@ import { // getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회 - 디테일 // getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회 import { + continueGetMyinfoOrderSearch, getMyinfoOrderDetailSearch, getMyinfoOrderSearch, getMyinfoOrderShippingSearch, @@ -30,36 +38,116 @@ import TButtonTab, { } from "../../../../components/TButtonTab/TButtonTab"; import TDropDown from "../../../../components/TDropDown/TDropDown"; import THeader from "../../../../components/THeader/THeader"; -import TPanel from "../../../../components/TPanel/TPanel"; import TVerticalPagenator from "../../../../components/TVerticalPagenator/TVerticalPagenator"; +import usePrevious from "../../../../hooks/usePrevious"; +import { GET_MY_INFO_ORDER_SEARCH_LIMIT } from "../../../../utils/Config"; import { $L } from "../../../../utils/helperMethods"; +import NoOrderList from "./components/NoOrderList"; +import OrderListCard from "./components/OrderListCard"; import css from "./MyOrders.module.less"; -import CancelOrderList from "./OrderList/CancelOrderList"; -import OrderList from "./OrderList/OrderList"; + +const Container = SpotlightContainerDecorator({ enterTo: null }, "div"); const TabContainer = SpotlightContainerDecorator( { enterTo: "last-focused" }, "div" ); -export default function MyOrders({ title, panelInfo }) { - const { appStatus } = useSelector((state) => state.common); - const [selectedTab, setSelectedTab] = useState(0); - const [dropDownTab, setDropDownTab] = useState(0); - const filterMethods = ["Last 3Month", "Last 6Month"]; - const tabList = [$L("ORDERS"), $L("CANCELLED ORDERS")]; +const getButtonTabList = () => { + return [$L("ORDERS"), $L("CANCELLED ORDERS")]; +}; + +let buttonTabList = null; + +export default function MyOrders({ title, panelInfo, isOnTop }) { + if (!buttonTabList) { + buttonTabList = getButtonTabList(); + } const dispatch = useDispatch(); - const { userNumber } = useSelector( - (state) => state.common.appStatus.loginUserData + const dataAppendJob = useRef(new Job((func) => func(), 1000)); + + const userNumber = useSelector( + (state) => state.common.appStatus?.loginUserData?.userNumber + ); + const orderInfoData = useSelector((state) => state.order?.orderInfoData); + const isLoading = useSelector( + (state) => state.common.appStatus?.showLoadingPanel?.show + ); + const orderSearchParams = useSelector( + (state) => state.order?.orderSearchParams ); - let timerRef = useRef(); + const orderInfo = orderInfoData?.orderInfo || {}; + + const cbChangePageRef = useRef(null); + const focusedContainerIdRef = useRef(null); + + const [selectedTab, setSelectedTab] = useState(0); + const [dropDownTab, setDropDownTab] = useState(0); + const [styleChange, setStyleChange] = useState(false); + + const tabRef = usePrevious(selectedTab); + const dropDownTabRef = usePrevious(dropDownTab); + const orderInfoDataRef = usePrevious(orderInfoData); + + const filterMethods = useMemo( + () => [$L("Last 3 Month"), $L("Last 6 Month")], + [] + ); + + const getSearchParams = useCallback((selectedTab, dropDownTab) => { + let cancelOrderYn = selectedTab === 1 ? "Y" : "N"; + let srchMonth = dropDownTab === 1 ? 6 : 3; + + return { cancelOrderYn, srchMonth }; + }, []); + + const reload = useCallback(() => { + const { cancelOrderYn, srchMonth } = getSearchParams( + tabRef.current, + dropDownTabRef.current + ); + const params = { mbrNo: userNumber, srchMonth, cancelOrderYn }; + + if ( + orderSearchParams.mbrNo !== params.mbrNo || + orderSearchParams.srcMonth !== params.srchMonth || + orderSearchParams.cancelOrderYn !== params.cancelOrderYn + ) { + dispatch(getMyinfoOrderSearch(params)); + } + }, [ + getSearchParams, + userNumber, + orderSearchParams, + dispatch, + tabRef, + dropDownTabRef, + ]); + + useEffect(() => { + if (userNumber) { + reload(); + } + }, [userNumber, dropDownTab, selectedTab, reload]); + + useEffect(() => { + const c = document.getElementById("floatLayer"); + + c.classList.add("myOrders_dropdown"); + return () => { + c.classList.remove("myOrders_dropdown"); + }; + }, []); const handleItemClick = useCallback( ({ index, ...rest }) => { - console.log("#TButtonTab onItemClick", index, rest); + if (index === selectedTab) { + return; + } + setSelectedTab(index); }, [selectedTab] @@ -75,58 +163,97 @@ export default function MyOrders({ title, panelInfo }) { [dropDownTab] ); - useEffect(() => { - const initFoucsedItem = document.querySelector( - '[data-spotlight-id="tab-0"]' - ); - - timerRef.current = setTimeout(() => { - Spotlight.focus(initFoucsedItem); - }, 0); - }, [userNumber]); - - useEffect(() => { - return () => { - clearTimeout(timerRef.current); - }; + const handleStyle = useCallback(() => { + setStyleChange(true); }, []); + const handleStyleOut = useCallback(() => { + setStyleChange(false); + }, []); + + const onFocusedContainerId = useCallback((containerId) => { + focusedContainerIdRef.current = containerId; + }, []); + + const onScrollStop = useCallback( + (event) => { + if (event && event.reachedEdgeInfo) { + if (event.reachedEdgeInfo.bottom) { + const currentCount = orderInfoDataRef.current?.orderInfo?.length ?? 1; + + const nextPage = + Math.ceil(currentCount / GET_MY_INFO_ORDER_SEARCH_LIMIT) + 1; + + dataAppendJob.current.throttle(() => { + dispatch(continueGetMyinfoOrderSearch(nextPage)); + }); + } + } + }, + [dispatch, orderInfoDataRef] + ); + return ( <> - -
- - - - {filterMethods} - - - -
- {selectedTab === 0 && ( - + + + + {buttonTabList && buttonTabList.length > 0 && ( + + + + {filterMethods} + + )} + {!isLoading && + (orderInfo && orderInfo.length > 0 ? ( + orderInfo.map((item, index) => { + const lastItem = index === orderInfo.length - 1; - {selectedTab === 1 && ( - - )} -
-
+ return ( + + ); + }) + ) : ( + + ))} + + ); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less index 0070eeae..c10b0c56 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less @@ -1,252 +1,333 @@ @import "../../../../style/CommonStyle.module.less"; @import "../../../../style/utils.module.less"; -.myorderscontainer { - background: #f8f8f8; - padding: 60px 60px 0; - .tabContainer { - .ordersTab { - width: 100%; - > div { - width: 360px; - height: 66px; - } - } - .dropdown { +.tBody { + width: 100%; + height: calc(100% - 90px); + background-color: @BG_COLOR_01; + + .tVerticalPagenator { + padding-left: 60px; + height: 100%; + + .test { position: absolute; - right: 60px; - top: 60px; + width: 100px; + height: 100px; + top: 100px; + right: 100px; + background-color: red; + z-index: 9999; } - } - .noOrderList { - margin-top: 180px; - .noOrderBox { - width: 540px; - height: 252px; - text-align: center; - margin: 0 auto; - > img { - width: 100%; - } - .noOrderTitle { - font-size: 36px; - color: #a3a3a3; - font-weight: bold; - } - .noOrderSub { - font-size: 24px; - color: #b5b5b5; - font-weight: normal; - } - } - } - .orderlist { - margin-top: 40px; - } -} -.scrollBox { - margin: 30px 60px; - width: 780px; - height: 460px; - overflow: hidden auto; + .tabContainer { + padding-top: 60px; + width: -webkit-fit-content; + height: auto; + position: relative; - > ul { - border: 1px solid #dadada; - > li { - width: 100%; - height: 90px; - border-bottom: 1px solid #dadada; - background: #fff; - padding: 0 30px; - display: flex; - justify-content: space-between; - &.hideInfo { - padding: 30px; - background: #f2f2f2; - height: auto; - display: inline-block; - > h5 { - width: 100%; - color: #333; - font-size: 24px; - font-weight: bold; - margin-bottom: 14px; - } - .shippingInfo { - width: 100%; - list-style: none; - height: 230px; - margin-bottom: 20px; - &:last-child { - margin-bottom: 0; - } - > li { - width: 100%; - font-size: 24px; - font-weight: normal; - color: #808080; - line-height: 1.33; - } - } - .deliveryInfo { - width: 100%; - list-style: none; - height: auto; - > li { - width: 100%; - font-size: 24px; - font-weight: normal; - color: #808080; - line-height: 1.33; - display: flex; - flex-wrap: wrap; - align-items: center; - &.imgLiner { - height: 30px; - width: calc(100% - 23px); - margin-left: 23px; - border-left: 3px solid #808080; - &.active { - border-left: 3px solid #ce1c5e; - } - } + .dropdown { + position: absolute; + right: 0px; + bottom: 5px; + + &.myOrdersDropdown { + > div { > div { - margin-left: 17px; - width: calc(100% - 65px); - flex: none; - line-height: 1; - > h6 { - font-size: 24px; - font-weight: bold; - color: #333; - display: inline-block; - width: 100%; - } - > span { - font-size: 24px; - color: #808080; - font-weight: normal; - display: inline-block; - width: 100%; - } - } - > span { - flex: none; - width: 48px; - height: 48px; - display: inline-block; - &.notYet { - background: url("../../../../../assets/images/icons/ic-track-scheduled@3x.png"); - background-size: contain; - background-repeat: no-repeat; - background-size: 48px 48px; - } - &.delivering { - background: url("../../../../../assets/images/icons/ic-track-ongoing@3x.png"); - background-size: contain; - background-repeat: no-repeat; - background-size: 48px 48px; - } - &.complete { - background: url("../../../../../assets/images/icons/ic-track-completed@3x.png"); - background-size: contain; - background-repeat: no-repeat; - background-size: 48px 48px; - } - } - } - } - .shipmentDetail { - width: 100%; - list-style: none; - height: auto; - margin-bottom: 20px; - &:last-child { - margin-bottom: 0; - } - > li { - width: 100%; - font-size: 24px; - font-weight: normal; - color: #808080; - line-height: 1.33; - } - } - .orderInfo { - width: 100%; - list-style: none; - > li { - display: flex; - flex-wrap: wrap; - width: 100%; - height: 30px; - margin-bottom: 20px; - justify-content: space-between; - &:last-child { - margin-bottom: 0; - } - .title { - color: #333; - font-size: 24px; - font-weight: normal; - } - .info { - font-size: 24px; - font-weight: normal; - color: #808080; + border-radius: 6px 6px 0 0 !important; } } } } - .leftBox { - flex: none; - font-size: 24px; - font-weight: bold; - color: #333; - line-height: 90px; - } - .rightBox { - flex: none; - font-size: 24px; - font-weight: normal; - color: #222; - line-height: 90px; - } - .textList { - color: #333; - font-size: 24px; - font-weight: bold; - width: 720px; - margin: 24px 0; - height: 42px; - line-height: 42px; - .elip(@clamp:1); - .productLogo { - width: 42px; - height: 42px; - background: #c70850; - margin-right: 6px; - display: inline-block; - vertical-align: top; - } - } - &.blackLi { - background: #2c343f; - height: 100px; - line-height: 100px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - .totalList { - font-size: 30px; - font-weight: bold; - color: #fff; - } - .totalAccountList { - font-size: 42px; - font-weight: bold; - color: #fff; + } + + // .noOrderList { + // margin-top: 180px; + // .noOrderBox { + // width: 540px; + // height: 252px; + // text-align: center; + // margin: 0 auto; + // > img { + // width: 100%; + // } + // .noOrderTitle { + // font-size: 36px; + // color: #a3a3a3; + // font-weight: bold; + // } + // .noOrderSub { + // font-size: 24px; + // color: #b5b5b5; + // font-weight: normal; + // } + // } + // } + // .orderlist { + // margin-top: 40px; + // } + + // .scrollBox { + // margin: 30px 60px; + // width: 780px; + // height: 460px; + // overflow: hidden auto; + + // > ul { + // border: 1px solid #dadada; + // > li { + // width: 100%; + // height: 90px; + // border-bottom: 1px solid #dadada; + // background: #fff; + // padding: 0 30px; + // display: flex; + // justify-content: space-between; + // &.hideInfo { + // padding: 30px; + // background: #f2f2f2; + // height: auto; + // display: inline-block; + // > h5 { + // width: 100%; + // color: #333; + // font-size: 24px; + // font-weight: bold; + // margin-bottom: 14px; + // } + // .shippingInfo { + // width: 100%; + // list-style: none; + // height: 230px; + // margin-bottom: 20px; + // &:last-child { + // margin-bottom: 0; + // } + // > li { + // width: 100%; + // font-size: 24px; + // font-weight: normal; + // color: #808080; + // line-height: 1.33; + // } + // } + // .deliveryInfo { + // width: 100%; + // list-style: none; + // height: auto; + // > li { + // width: 100%; + // font-size: 24px; + // font-weight: normal; + // color: #808080; + // line-height: 1.33; + // display: flex; + // flex-wrap: wrap; + // align-items: center; + // &.imgLiner { + // height: 30px; + // width: calc(100% - 23px); + // margin-left: 23px; + // border-left: 3px solid #808080; + // &.active { + // border-left: 3px solid #ce1c5e; + // } + // } + // > div { + // margin-left: 17px; + // width: calc(100% - 65px); + // flex: none; + // line-height: 1; + // > h6 { + // font-size: 24px; + // font-weight: bold; + // color: #333; + // display: inline-block; + // width: 100%; + // } + // > span { + // font-size: 24px; + // color: #808080; + // font-weight: normal; + // display: inline-block; + // width: 100%; + // } + // } + // > span { + // flex: none; + // width: 48px; + // height: 48px; + // display: inline-block; + // &.notYet { + // background: url("../../../../../assets/images/icons/ic-track-scheduled@3x.png"); + // background-size: contain; + // background-repeat: no-repeat; + // background-size: 48px 48px; + // } + // &.delivering { + // background: url("../../../../../assets/images/icons/ic-track-ongoing@3x.png"); + // background-size: contain; + // background-repeat: no-repeat; + // background-size: 48px 48px; + // } + // &.complete { + // background: url("../../../../../assets/images/icons/ic-track-completed@3x.png"); + // background-size: contain; + // background-repeat: no-repeat; + // background-size: 48px 48px; + // } + // } + // } + // } + // .shipmentDetail { + // width: 100%; + // list-style: none; + // height: auto; + // margin-bottom: 20px; + // &:last-child { + // margin-bottom: 0; + // } + // > li { + // width: 100%; + // font-size: 24px; + // font-weight: normal; + // color: #808080; + // line-height: 1.33; + // } + // } + // .orderInfo { + // width: 100%; + // list-style: none; + // > li { + // display: flex; + // flex-wrap: wrap; + // width: 100%; + // height: 30px; + // margin-bottom: 20px; + // justify-content: space-between; + // &:last-child { + // margin-bottom: 0; + // } + // .title { + // color: #333; + // font-size: 24px; + // font-weight: normal; + // } + // .info { + // font-size: 24px; + // font-weight: normal; + // color: #808080; + // } + // } + // } + // } + // .leftBox { + // flex: none; + // font-size: 24px; + // font-weight: bold; + // color: #333; + // line-height: 90px; + // } + // .rightBox { + // flex: none; + // font-size: 24px; + // font-weight: normal; + // color: #222; + // line-height: 90px; + // } + // .textList { + // color: #333; + // font-size: 24px; + // font-weight: bold; + // width: 720px; + // margin: 24px 0; + // height: 42px; + // line-height: 42px; + // .elip(@clamp:1); + // .productLogo { + // width: 42px; + // height: 42px; + // background: #c70850; + // margin-right: 6px; + // display: inline-block; + // vertical-align: top; + // } + // } + // &.blackLi { + // background: #2c343f; + // height: 100px; + // line-height: 100px; + // display: flex; + // flex-wrap: wrap; + // justify-content: space-between; + // .totalList { + // font-size: 30px; + // font-weight: bold; + // color: #fff; + // } + // .totalAccountList { + // font-size: 42px; + // font-weight: bold; + // color: #fff; + // } + // } + // } + // } + // } + } +} + +[class="myOrders_dropdown"] { + > div > div[id] > div:nth-child(2) { + -webkit-filter: none !important; + filter: none !important; + > div:nth-child(1) { + height: 123px !important; + width: 270px !important; + margin-top: 0 !important; + border-radius: 0 0 6px 6px !important; + background-color: @COLOR_GRAY03 !important; + > div { + width: 270px !important; + height: 144px !important; + border-radius: 0 !important; + padding-top: 0 !important; + > div { + > div { + > div { + padding: 0 !important; + &:first-child { + > div:nth-child(1) { + border-radius: 6px 6px 0 0 !important; + overflow: hidden; + &:focus { + border-radius: 0 !important; + } + > div:first-child { + will-change: unset !important; + } + } + } + &:last-child { + > div:nth-child(1) { + border-radius: 0 0 6px 6px !important; + overflow: hidden; + &:focus { + border-radius: 0 0 6px 6px !important; + } + } + } + > div:nth-child(1) { + height: 63px !important; + padding: 20px 19px !important; + &:focus { + background-color: @PRIMARY_COLOR_RED !important; + color: @COLOR_WHITE !important; + box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); + } + } + } + } } } } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx deleted file mode 100644 index 6cc380c5..00000000 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx +++ /dev/null @@ -1,209 +0,0 @@ -import React, { useCallback, useEffect, useState } from "react"; - -import { useDispatch, useSelector } from "react-redux"; - -import Spottable from "@enact/spotlight/Spottable"; - -import noOrderImg from "../../../../../../assets/images/img-my-info-billing@3x.png"; -import { - getMyinfoOrderDetailSearch, - getMyinfoOrderSearch, - getMyinfoOrderShippingSearch, -} from "../../../../../actions/orderActions"; -import TButton from "../../../../../components/TButton/TButton"; -import { $L } from "../../../../../utils/helperMethods"; -import css from "./CancelOrderList.module.less"; - -const SpottableComponent = Spottable("div"); - -export default function OrderList({ onOrderCancelPopUp, dropDownTab }) { - const dispatch = useDispatch(); - - const { appStatus } = useSelector((state) => state.common); - - const orderInfoData = useSelector((state) => state.order?.orderInfoData); - const orderInfo = orderInfoData?.orderInfo; - const orderDetailData = useSelector( - (state) => state.order?.orderDetailData?.data?.orderInfo[0] - ); - - const onCancel = useCallback(() => {}, []); - - // 주문 상세(취소) 팝업 - const handleOrderDetailClick = useCallback( - (orderInfo) => () => { - onOrderCancelPopUp(orderInfo); - }, - [onOrderCancelPopUp] - ); - - // 주문 정보 - useEffect(() => { - if ( - appStatus && - appStatus.loginUserData && - appStatus.loginUserData.userNumber - ) { - dispatch( - getMyinfoOrderSearch({ - mbrNo: appStatus.loginUserData.userNumber, - srchMonth: dropDownTab === 0 ? 3 : 6, - cancelOrderYn: "Y", - }) - ); - } - }, [dispatch, dropDownTab]); - - if (!orderInfo || orderInfo.length === 0) { - return ( -
-
- No order - - {$L("THERE IS NO ORDER HISTORY")} - -
- - {$L("Use search above to find past orders.")} - -
-
- ); - } - - return ( - <> - {orderInfo && - orderInfo.map((order, index) => { - return ( -
-
-

- {$L("ORDER NUMBER")} :{" "} - {order.ordNo} -

-
-
-
-
-
-

{$L("payment method")}

- - {order.cardKnd} / {order.cardNo} - -
-
-

{$L("order date")}

- January 5, 2023 : 취소 날짜 확인 -
-
-
- -
-
    - {order.orderProductInfo && - order.orderProductInfo.map((product, prodIndex) => { - return ( -
  • -
    -
    - {product.shptmDlvrStCd === "ORD00201" ? ( - - Ordered - - ) : product.shptmDlvrStCd === "ORD00202" ? ( - - Out for delivery - - ) : product.shptmDlvrStCd === "ORD00203" ? ( - - Arriving - - ) : product.shptmDlvrStCd === "ORD00204" ? ( - - Shipping - - ) : product.shptmDlvrStCd === "ORD00205" ? ( - Canceled - ) : null} - Arriving January 10 ~ January 15 - API 확인 필요{" "} -
    - - - {$L("view cancelled details")} - -
    - -
    -
    -
    -
    - - - -

    {product.prdtNm}

    -
    -
    - -
    -
      -
    • - {$L("ID")}: {product.prdtId} -
      • -
    • - {$L("Qty")}: {product.prodQty} -
      • -
    • - Silver Metallic / XL : API 확인 필요 -
      • -
    -
    - ${product.prodPrc} - | - - ${$L("OPTIONS TOTAL")}: $ - {product.prdtOptPrc} - - | - - {$L("S&H")}: ${product.dlvrAmt} - -
    -
    -
    -
    -
    - - {/* 디테일 버튼 */} -
    -
      -
    • - - {$L("BUY IT AGAIN")} - -
      • -
    -
    - {/* 디테일 버튼 */} -
    -
    • - ); - })} -
-
-
-
- ); - })} - - ); -} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less deleted file mode 100644 index 9bdff850..00000000 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less +++ /dev/null @@ -1,385 +0,0 @@ -@import "../../../../../style/CommonStyle.module.less"; -@import "../../../../../style/utils.module.less"; -.orderBorder { - background: #f8f8f8; - width: 100%; - overflow: hidden; - border-radius: 12px; - border: 1px solid #dadada; - margin-bottom: 30px; - &:last-child { - margin-bottom: 93px; - } - .orderNmInfo { - height: 90px; - width: 100%; - display: flex; - background: #2c343f; - line-height: 90px; - padding: 0 60px; - justify-content: space-between; - .orderTitle { - color: @COLOR_WHITE; - font-size: 30px; - font-weight: bold; - font-family: @baseFont; - .orderNm { - font-size: 30px; - color: @COLOR_WHITE; - font-weight: normal; - font-family: @baseFont; - } - } - .orderCancelBtn { - .size(@w:224px,@h:60px); - align-self: center; - } - } - .orderInfo { - background-color: #f8f8f8; - .infoBox { - background: #f2f2f2; - width: 1680px; - padding: 40px 60px; - display: flex; - flex-wrap: wrap; - - .leftBox { - width: 400px; - margin-right: 30px; - .topBox { - > h4 { - text-transform: uppercase; - font-size: 24px; - color: #222; - width: 400px; - height: 30px; - font-weight: bold; - } - > span { - display: inline-block; - margin: 6px 0 20px 0; - font-size: 24px; - color: #808080; - width: 400px; - height: 30px; - font-weight: 300; - } - border-bottom: 1px solid #dadada; - } - .underBox { - > h4 { - margin-top: 20px; - text-transform: uppercase; - font-size: 24px; - color: #222; - width: 400px; - height: 30px; - font-weight: bold; - } - > span { - display: inline-block; - margin: 6px 0 0 0; - font-size: 24px; - color: #808080; - width: 400px; - height: 30px; - font-weight: 300; - } - } - } - .rightBox { - width: 1130px; - height: 173px; - background-color: #fff; - border: 1px solid #dadada; - border-radius: 6px; - > ul { - list-style: none; - display: flex; - > li { - width: 188px; - height: 173px; - border-right: 1px solid #dadada; - &:last-child { - border-right: none; - } - > div { - border-bottom: 1px solid #dadada; - text-align: center; - line-height: 86px; - &:first-child { - width: 188px; - height: 86px; - text-transform: uppercase; - font-size: 24px; - font-weight: bold; - color: #222; - } - &:last-child { - width: 188px; - height: 86px; - border-bottom: none; - font-size: 30px; - color: #808080; - } - } - } - } - } - } - .totalAccount { - width: 100%; - height: 80px; - padding: 18px 60px; - background: #dadada; - display: flex; - justify-content: space-between; - .accTitle { - text-transform: uppercase; - line-height: 44px; - color: #222; - font-size: 30px; - font-weight: bold; - } - .accountNum { - color: #c70850; - font-weight: bold; - font-size: 40px; - line-height: 44px; - } - } - .orderItemList { - background: #f8f8f8; - padding: 60px; - width: 100%; - > ul { - list-style: none; - > li { - width: 1560px; - // height: 423px; - background: #fff; - display: flex; - flex-wrap: wrap; - border: 1px solid #dadada; - border-radius: 12px; - margin-bottom: 40px; - &:last-child { - margin-bottom: 0; - } - .topBox { - padding: 20px 60px; - flex: none; - width: 100%; - height: 100px; - border-bottom: 1px solid #dadada; - align-content: center; - display: flex; - justify-content: space-between; - .leftSmallBox { - color: #222; - font-size: 24px; - margin: 9px 0; - .orderGreen { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(8, 199, 73, 0.3); - border: 3px solid #08c749; - border-radius: 6px; - color: #08c749; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - .orderBlue { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(8, 199, 199, 0.3); - border: 3px solid #0877c7; - border-radius: 6px; - color: #0877c7; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - .orderRed { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(199, 8, 80, 0.3); - border: 3px solid #c70850; - border-radius: 6px; - color: #c70850; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - .orderBlack { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(20, 20, 20, 0.3); - border: 3px solid #141414; - border-radius: 6px; - color: #141414; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - } - - .orderDetailBtn { - width: 400px; - height: 60px; - font-size: 24px; - font-weight: bold; - vertical-align: middle; - font-weight: bold; - text-transform: uppercase; - } - } - .underBox { - flex: none; - display: flex; - width: 100%; - // height: 322px; - .leftBox { - width: 1059px; - // height: 322px; - border-right: 1px solid #dadada; - padding: 30px 60px; - .productBox { - .logo { - display: flex; - font-size: 30px; - font-weight: bold; - color: #222; - line-height: 42px; - margin-bottom: 20px; - .logoImg { - width: 42px; - height: 42px; - margin-right: 13px; - > img { - .size(@w:42px, @h:42px); - } - } - > p { - width: calc(100% - 55px); - } - } - .orderPdInfo { - display: flex; - flex-wrap: wrap; - .productImg { - flex: none; - width: 200px; - height: 200px; - border: 1px solid #dadada; - } - .pdInfo { - margin-left: 20px; - > ul { - list-style: none; - > li { - font-size: 24px; - font-weight: normal; - color: #808080; - margin-bottom: 6px; - &:last-child { - margin-bottom: 0; - } - } - } - .orderAcc { - margin-top: 54px; - color: #c70850; - font-size: 30px; - font-weight: bold; - height: 36px; - line-height: 36px; - > span { - color: #808080; - font-size: 24px; - font-weight: normal; - margin: 0 5.5px; - line-height: 36px; - &:first-child { - margin: 0 5.5px 0 11px; - } - } - } - } - } - } - } - .noOrderList { - margin-top: 180px; - .noOrderBox { - width: 540px; - height: 252px; - text-align: center; - margin: 0 auto; - > img { - width: 100%; - } - .noOrderTitle { - font-size: 36px; - color: #a3a3a3; - font-weight: bold; - } - .noOrderSub { - font-size: 24px; - color: #b5b5b5; - font-weight: normal; - } - } - } - .rightBox { - width: 500px; - // height: 322px; - display: flex; - align-items: center; - padding: 0 60px; - > ul { - list-style: none; - height: 100%; - > li { - align-content: center; - display: flex; - flex-wrap: wrap; - height: 100%; - .divBtn { - width: 380px; - height: 60px; - border: 1px solid #dadada; - box-sizing: border-box; - text-align: center; - line-height: 58px; - font-size: 24px; - color: #808080; - font-weight: 600; - border-radius: 6px; - background-image: linear-gradient(to top, #f5f5f5, #fff); - margin-bottom: 6px; - position: relative; - &:focus { - &::after { - .focused(@boxShadow: 0, @borderRadius: 6px); - } - } - &:last-child { - margin-bottom: 0; - } - } - } - } - } - } - } - } - } - } -} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx deleted file mode 100644 index fc3ef912..00000000 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx +++ /dev/null @@ -1,354 +0,0 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; - -import { useDispatch, useSelector } from "react-redux"; - -import Spottable from "@enact/spotlight/Spottable"; - -import noOrderImg from "../../../../../../assets/images/img-my-info-billing@3x.png"; -import { - setHidePopup, - setShowPopup, -} from "../../../../../actions/commonActions"; -import { - getMyinfoOrderDetailSearch, - getMyinfoOrderSearch, - getMyinfoOrderShippingSearch, -} from "../../../../../actions/orderActions"; -import { pushPanel } from "../../../../../actions/panelActions"; -import TButton from "../../../../../components/TButton/TButton"; -import { ACTIVE_POPUP, panel_names } from "../../../../../utils/Config"; -import { $L } from "../../../../../utils/helperMethods"; -import MyOrdersPopUp from "../MyOrdersPopUp"; -import css from "./OrderList.module.less"; - -const SpottableComponent = Spottable("div"); - -export default function OrderList({ onOrderDetailPopup, dropDownTab }) { - const dispatch = useDispatch(); - - const { appStatus } = useSelector((state) => state.common); - const orderInfoData = useSelector((state) => state.order?.orderInfoData); - const orderInfo = useMemo(() => orderInfoData?.orderInfo, [orderInfoData]); - const orderDetailData = useSelector( - (state) => state.order?.orderDetailData?.data?.orderInfo[0] - ); - const { popupVisible, activePopup } = useSelector( - (state) => state.common.popup - ); - - const onCancel = useCallback(() => {}, []); - - // 주문 상세 팝업 - const handleOrderDetailClick = useCallback( - (product) => { - dispatch( - getMyinfoOrderDetailSearch({ - mbrNo: appStatus.loginUserData.userNumber, - ordNo: product.ordNo, - prdtId: product.prdtId, - }) - ); - - dispatch(setShowPopup(ACTIVE_POPUP.orderDetailPopup)); - }, - [dispatch] - ); - - // 다시 주문 (주문 상세 페이지) - const handleBuyClick = useCallback( - (product) => () => { - return dispatch( - pushPanel({ - name: panel_names.DETAIL_PANEL, - panelInfo: { - patnrId: product.patnrId, - prdtId: product.prdtId, - }, - }) - ); - }, - [dispatch] - ); - - // 아이템 취소 - const handleCancelClick = useCallback(() => { - dispatch(setShowPopup(ACTIVE_POPUP.orderCancelReason)); - }, []); - - useEffect(() => { - if ( - appStatus && - appStatus.loginUserData && - appStatus.loginUserData.userNumber - ) { - dispatch( - getMyinfoOrderSearch({ - mbrNo: appStatus.loginUserData.userNumber, - srchMonth: dropDownTab === 0 ? 3 : 6, - cancelOrderYn: "N", - }) - ); - } - }, [dispatch, dropDownTab, appStatus]); - - return ( - <> - {!orderInfo || orderInfo.length === 0 ? ( -
-
- No order - - {$L("THERE IS NO ORDER HISTORY")} - -
- - {$L("Use search above to find past orders.")} - -
-
- ) : ( - orderInfo.map((order) => ( -
-
-

- {$L("ORDER NUMBER")} :{" "} - {order.ordNo} -

- - {$L("Cancel order")} - -
- -
-
-
-
-

{$L("payment method")}

- - {order.cardKnd} / {order.cardNo} - -
-
-

{$L("order date")}

- {order?.regDt} -
-
-
-
    -
  • -
    {$L("item")}
    -
    {order?.totProdQty}
    -
    • -
  • -
    {$L("item total")}
    -
    ${order?.totProdPrc}
    -
    • -
  • -
    {$L("coupon")}
    -
    -${order?.totDcAmt}
    -
    • -
  • -
    {$L("OPTIONS TOTAL")}
    -
    ${order?.totOptPrc}
    -
    • -
  • -
    {$L("s&h")}
    -
    ${order?.totDlvrAmt}
    -
    • -
  • -
    {$L("tax")}
    -
    ${order?.ordTotTaxAmt}
    -
    • -
-
-
- -
-
{$L("order total")}
-
${order?.ordPmtReqAmt}
-
- -
-
    - {order.orderProductInfo.map((product) => ( -
  • -
    -
    - {product.shptmOrdStCd === "ORD00601" ? ( - - Order completed - - ) : product.shptmOrdStCd === "ORD00602" ? ( - - Preparing for shipment - - ) : product.shptmOrdStCd === "ORD00603" ? ( - In Transit - ) : product.shptmOrdStCd === "ORD00604" ? ( - Delivered - ) : product.shptmOrdStCd === "ORD00605" ? ( - Cancel order - ) : product.shptmOrdStCd === "ORD00606" ? ( - - Cancellation processing - - ) : product.shptmOrdStCd === "ORD00607" ? ( - - Cancellation completed - - ) : null} - {/* Arriving January 10 ~ January 15 - API 확인 필요 */} -
    - - handleOrderDetailClick(product)} - > - {$L("view order details")} - -
    - -
    -
    -
    -
    - - Product Logo - -

    {product.prdtNm}

    -
    -
    - Product Image -
    -
      -
    • - {$L("ID")}: {product.prdtId} -
      • -
    • - {$L("Qty")}: {product.prodQty} -
      • - {/*
    • Silver Metallic / XL : API 확인 필요
      • */} -
    -
    - ${product.prodPrc} - | - - ${$L("OPTIONS TOTAL")}: $ - {product.prdtOptPrc} - - | - - {$L("S&H")}: ${product.dlvrAmt} - -
    -
    -
    -
    -
    - -
    -
      -
    • - {product.shptmOrdStCd === "ORD00601" ? ( - <> - - {$L("BUY IT AGAIN")} - - - {$L("CANCEL ITEM")} - - - ) : product.shptmOrdStCd === "ORD00602" ? ( - <> - - {$L("BUY IT AGAIN")} - - - {$L("CANCEL ITEM")} - - - ) : product.shptmOrdStCd === "ORD00603" ? ( - <> - - {$L("BUY IT AGAIN")} - - - {$L("RETURN ITEM")} - - - {$L("EXCHANGE ITEM")} - - - {$L("TRACK PACKAGE")} - - - ) : product.shptmOrdStCd === "ORD00604" ? ( - <> - - {$L("BUY IT AGAIN")} - - - {$L("RETURN ITEM")} - - - {$L("EXCHANGE ITEM")} - - - {$L("TRACK PACKAGE")} - - - ) : product.shptmOrdStCd === "ORD00605" ? ( - <> - - {$L("BUY IT AGAIN")} - - - ) : product.shptmOrdStCd === "ORD00606" ? ( - <> - - {$L("BUY IT AGAIN")} - - - ) : product.shptmOrdStCd === "ORD00607" ? ( - <> - - {$L("BUY IT AGAIN")} - - - ) : null} -
      • -
    -
    -
    -
    • - ))} -
-
-
-
- )) - )} - - {(activePopup === ACTIVE_POPUP.orderDetailPopup || - activePopup === ACTIVE_POPUP.orderCancelReason) && } - - ); -} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.module.less deleted file mode 100644 index 672cf2a4..00000000 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.module.less +++ /dev/null @@ -1,367 +0,0 @@ -@import "../../../../../style/CommonStyle.module.less"; -@import "../../../../../style/utils.module.less"; -.orderBorder { - background: #f8f8f8; - width: 100%; - overflow: hidden; - border-radius: 12px; - border: 1px solid #dadada; - margin-bottom: 30px; - &:last-child { - margin-bottom: 93px; - } - .orderNmInfo { - height: 90px; - width: 100%; - display: flex; - background: #2c343f; - line-height: 90px; - padding: 0 60px; - justify-content: space-between; - .orderTitle { - color: @COLOR_WHITE; - font-size: 30px; - font-weight: bold; - font-family: @baseFont; - .orderNm { - font-size: 30px; - color: @COLOR_WHITE; - font-weight: normal; - font-family: @baseFont; - } - } - .orderCancelBtn { - max-width: none; - min-width: auto; - height: 60px; - align-self: center; - } - } - .orderInfo { - background-color: #f8f8f8; - .infoBox { - background: #f2f2f2; - width: 1680px; - padding: 40px 60px; - display: flex; - flex-wrap: wrap; - - .leftBox { - width: 400px; - margin-right: 30px; - .topBox { - > h4 { - text-transform: uppercase; - font-size: 24px; - color: #222; - width: 400px; - height: 30px; - font-weight: bold; - } - > span { - display: inline-block; - margin: 6px 0 20px 0; - font-size: 24px; - color: #808080; - width: 400px; - height: 30px; - font-weight: 300; - } - border-bottom: 1px solid #dadada; - } - .underBox { - > h4 { - margin-top: 20px; - text-transform: uppercase; - font-size: 24px; - color: #222; - width: 400px; - height: 30px; - font-weight: bold; - } - > span { - display: inline-block; - margin: 6px 0 0 0; - font-size: 24px; - color: #808080; - width: 400px; - height: 30px; - font-weight: 300; - } - } - } - .rightBox { - width: 1130px; - height: 173px; - background-color: #fff; - border: 1px solid #dadada; - border-radius: 6px; - > ul { - list-style: none; - display: flex; - > li { - width: 188px; - height: 173px; - border-right: 1px solid #dadada; - &:last-child { - border-right: none; - } - > div { - border-bottom: 1px solid #dadada; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - &:first-child { - width: 188px; - height: 86px; - text-transform: uppercase; - font-size: 24px; - font-weight: bold; - color: #222; - } - &:last-child { - width: 188px; - height: 86px; - border-bottom: none; - font-size: 30px; - color: #808080; - } - } - } - } - } - } - .totalAccount { - width: 100%; - height: 80px; - padding: 18px 60px; - background: #dadada; - display: flex; - justify-content: space-between; - .accTitle { - text-transform: uppercase; - line-height: 44px; - color: #222; - font-size: 30px; - font-weight: bold; - } - .accountNum { - color: #c70850; - font-weight: bold; - font-size: 40px; - line-height: 44px; - } - } - .orderItemList { - background: #f8f8f8; - padding: 60px; - width: 100%; - > ul { - list-style: none; - > li { - width: 1560px; - // height: 423px; - background: #fff; - display: flex; - flex-wrap: wrap; - border: 1px solid #dadada; - border-radius: 12px; - margin-bottom: 40px; - &:last-child { - margin-bottom: 0; - } - .topBox { - padding: 20px 60px; - flex: none; - width: 100%; - height: 100px; - border-bottom: 1px solid #dadada; - align-content: center; - display: flex; - justify-content: space-between; - .leftSmallBox { - color: #222; - font-size: 24px; - margin: 9px 0; - .orderGreen { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(8, 199, 73, 0.3); - border: 3px solid #08c749; - border-radius: 6px; - color: #08c749; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - .orderBlue { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(8, 199, 199, 0.3); - border: 3px solid #0877c7; - border-radius: 6px; - color: #0877c7; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - .orderRed { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(199, 8, 80, 0.3); - border: 3px solid #c70850; - border-radius: 6px; - color: #c70850; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - .orderBlack { - margin-right: 14px; - height: 42px; - padding: 9px 15px; - background: rgba(20, 20, 20, 0.3); - border: 3px solid #141414; - border-radius: 6px; - color: #141414; - font-size: 20px; - line-height: 36px; - font-weight: normal; - } - } - - .orderDetailBtn { - width: 300px; - height: 60px; - font-size: 24px; - font-weight: bold; - vertical-align: middle; - font-weight: bold; - text-transform: uppercase; - } - } - .underBox { - flex: none; - display: flex; - width: 100%; - // height: 322px; - .leftBox { - width: 1059px; - // height: 322px; - border-right: 1px solid #dadada; - padding: 30px 60px; - .productBox { - .logo { - display: flex; - font-size: 30px; - font-weight: bold; - color: #222; - line-height: 42px; - margin-bottom: 20px; - .logoImg { - width: 42px; - height: 42px; - margin-right: 13px; - > img { - .size(@w:42px, @h:42px); - } - } - > p { - width: calc(100% - 55px); - } - } - .orderPdInfo { - display: flex; - flex-wrap: wrap; - .productImg { - flex: none; - width: 200px; - height: 200px; - border: 1px solid #dadada; - } - .pdInfo { - margin-left: 20px; - > ul { - list-style: none; - > li { - font-size: 24px; - font-weight: normal; - color: #808080; - margin-bottom: 6px; - &:last-child { - margin-bottom: 0; - } - } - } - .orderAcc { - margin-top: 54px; - color: #c70850; - font-size: 30px; - font-weight: bold; - height: 36px; - line-height: 36px; - > span { - color: #808080; - font-size: 24px; - font-weight: normal; - margin: 0 5.5px; - line-height: 36px; - &:first-child { - margin: 0 5.5px 0 11px; - } - } - } - } - } - } - } - .rightBox { - width: 500px; - // height: 322px; - display: flex; - align-items: center; - padding: 0 60px; - > ul { - list-style: none; - height: 100%; - > li { - align-content: center; - display: flex; - flex-wrap: wrap; - height: 100%; - .divBtn { - width: 380px; - height: 60px; - border: 1px solid #dadada; - box-sizing: border-box; - text-align: center; - line-height: 58px; - font-size: 24px; - color: #808080; - font-weight: 600; - border-radius: 6px; - background-image: linear-gradient(to top, #f5f5f5, #fff); - margin-bottom: 6px; - position: relative; - &:focus { - &::after { - .focused(@boxShadow: 0, @borderRadius: 6px); - } - } - &:last-child { - margin-bottom: 0; - } - } - } - } - } - } - } - } - } - } -} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.jsx new file mode 100644 index 00000000..205be711 --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +import noOrderImg from "../../../../../../assets/images/img-my-info-billing.png"; +import CustomImage from "../../../../../components/CustomImage/CustomImage"; +import { $L } from "../../../../../utils/helperMethods"; +import css from "./NoOrderList.module.less"; + +export default function NoOrderList() { + return ( +
+ +

{$L("THERE IS NO ORDER HISTORY")}

+ + {$L("Use search above to find past orders.")} + +
+ ); +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.module.less new file mode 100644 index 00000000..3ec7703c --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.module.less @@ -0,0 +1,19 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.noOrderList { + margin: 180px auto 0; + text-align: center; + + .title { + font-size: 36px; + font-weight: bold; + color: @COLOR_GRAY10; + margin-bottom: 12px; + } + + .desc { + font-size: 24px; + color: #b5b5b5; + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.jsx new file mode 100644 index 00000000..d132fe28 --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.jsx @@ -0,0 +1,87 @@ +import React, { memo, useCallback } from "react"; + +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; + +import TButton from "../../../../../components/TButton/TButton"; +import { $L } from "../../../../../utils/helperMethods"; +import css from "./OrderListCard.module.less"; +import OrderListCardStatus from "./OrderListCardStatus"; +import OrderListCardTopContents from "./OrderListCardTopContents"; + +const OrderListCardContainer = SpotlightContainerDecorator( + { leaveFor: { left: "", right: "" } }, + "div" +); + +export default memo(function OrderListCard({ item, lastItem }) { + const { + ordNo, + currSign, + currSignLoc, + ordPmtReqAmt, + cardKnd, + cardNo, + regDt, + totProdQty, + totProdPrc, + totDcAmt, + totOptPrc, + totDlvrAmt, + ordTotTaxAmt, + orderProductInfo, + } = item || {}; + + const paymentInfo = { + cardKnd, + cardNo, + regDt, + totProdQty, + totProdPrc, + totDcAmt, + totOptPrc, + totDlvrAmt, + ordTotTaxAmt, + currSign, + currSignLoc, + }; + + const onSpotlightLeft = useCallback((e) => { + e.preventDefault(); + e.stopPropagation(); + }, []); + + return ( + +
+

+ {$L("ORDER NUMBER")} : {ordNo} +

+ + {$L("CANCEL ORDER")} + +
+ +
+ {$L("ORDER TOTAL")} + + {currSign} {ordPmtReqAmt} + +
+ + + ); +}); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.module.less new file mode 100644 index 00000000..6143baa0 --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.module.less @@ -0,0 +1,52 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.itemContainer { + .size(@w: 1680px, @h: auto); + background-color: @BG_COLOR_02; + border: 1px solid @COLOR_GRAY02; + margin-top: 40px; + border-radius: 12px; + overflow: hidden; + padding-bottom: 60px; + + &:last-of-type { + margin-bottom: 80px; + } + + .cardHeader { + height: 90px; + background-color: @COLOR_NAVY; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 60px; + + .orderNumber { + .font(@fontFamily: @baseFont, @fontSize: 30px); + font-weight: bold; + color: @COLOR_WHITE; + + .ordNo { + font-weight: normal; + } + } + } + + .orderTotal { + padding: 28px 60px; + display: flex; + justify-content: space-between; + background-color: @COLOR_GRAY02; + + .orderTotalTitle { + font-weight: bold; + color: @COLOR_GRAY07; + } + + .orderTotalPrice { + font-weight: bold; + color: @PRIMARY_COLOR_RED; + } + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx new file mode 100644 index 00000000..43d97934 --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx @@ -0,0 +1,173 @@ +import React, { useMemo } from "react"; + +import defaultLogoImg from "../../../../../../assets/images/ic-tab-partners-default@3x.png"; +import defaultImageItem from "../../../../../../assets/images/img-thumb-empty-product@3x.png"; +import CustomImage from "../../../../../components/CustomImage/CustomImage"; +import TButton from "../../../../../components/TButton/TButton"; +import { $L } from "../../../../../utils/helperMethods"; +import css from "./OrderListCardStatus.module.less"; + +const getStatusMessageAndClass = (shptmOrdStCd) => { + switch (shptmOrdStCd) { + case "ORD00601": + return { message: $L("Order completed"), className: css.orderGreen }; + case "ORD00602": + return { + message: $L("Preparing for shipment"), + className: css.orderGreen, + }; + case "ORD00603": + return { message: $L("In Transit"), className: css.orderGreen }; + case "ORD00604": + return { message: $L("Delivered"), className: css.orderBlue }; + case "ORD00605": + return { message: $L("Cancel order"), className: css.orderRed }; + case "ORD00606": + return { + message: $L("Cancellation processing"), + className: css.orderRed, + }; + case "ORD00607": + return { message: $L("Cancellation completed"), className: css.orderRed }; + default: + return { message: "TODO: 케이스 추가", className: css.orderBlue }; + } +}; + +const renderButtonsByStatus = (shptmOrdStCd) => { + switch (shptmOrdStCd) { + case "ORD00601": + case "ORD00602": + return ( + <> + + {$L("BUY IT AGAIN")} + + {shptmOrdStCd === "ORD00601" || shptmOrdStCd === "ORD00602" ? ( + + {$L("CANCEL ITEM")} + + ) : null} + + ); + case "ORD00603": + case "ORD00604": + return ( + <> + + {$L("BUY IT AGAIN")} + + + {$L("RETURN ITEM")} + + + {$L("EXCHANGE ITEM")} + + + {$L("TRACK PACKAGE")} + + + ); + case "ORD00605": + case "ORD00606": + case "ORD00607": + return ( + <> + + {$L("BUY IT AGAIN")} + + + ); + default: + return "TODO: 케이스 추가"; + } +}; + +export default function OrderListCardStatus({ orderProductInfo, lastItem }) { + const { + prdtId, + shptmOrdStCd, + logoImgPath, + prdtNm, + prdtImgUrl, + prodQty, + prdtOpt, + prodPrc, + currSign, + currSignLoc, + prdtOptPrc, + dlvrAmt, + auctProdYn, + } = orderProductInfo || {}; + + const { message, className } = useMemo(() => + getStatusMessageAndClass(shptmOrdStCd) + ); + + return ( +
+
+
+ {message} + + Arriving January 10 - January 15 + +
+ + {$L("VIEW ORDER DETAILS")} + +
+
+
+
+ +

{prdtNm}

+
+
+
+ +
+
+

+ {$L("ID")} : {prdtId} +

+

+ {$L("Qty")} : {prodQty} +

+

+ {prdtOpt && prdtOpt[0] && prdtOpt[0].optNm + ? `${prdtOpt[0].optNm} / ` + : " "} + {prdtOpt && prdtOpt[0] && prdtOpt[0].prodOptCval + ? prdtOpt[0].prodOptCval + : " "} +

+

+ + {currSign} {prodPrc} + {" "} + | {$L("OPTIONS TOTAL")}: {currSign} {prdtOptPrc} | {$L("S&H")}:{" "} + {currSign} {dlvrAmt} +

+
+
+
+
+ {useMemo(() => renderButtonsByStatus(shptmOrdStCd))} +
+
+
+ ); +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.module.less new file mode 100644 index 00000000..698dff45 --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.module.less @@ -0,0 +1,175 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.itemListStatusContainer { + width: 1560px; + margin: 60px auto 0; + background-color: @COLOR_WHITE; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 20px; + + .statusCardHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 60px; + border-bottom: 1px solid @COLOR_GRAY02; + + .wrap { + display: flex; + align-items: center; + + .orderGreen { + margin-right: 14px; + height: 42px; + padding: 9px 15px; + background: rgba(8, 199, 73, 0.3); + border: 3px solid #08c749; + border-radius: 6px; + color: #08c749; + font-size: 20px; + line-height: 20px; + font-weight: normal; + } + .orderBlue { + margin-right: 14px; + height: 42px; + padding: 9px 15px; + background: rgba(8, 199, 199, 0.3); + border: 3px solid #0877c7; + border-radius: 6px; + color: #0877c7; + font-size: 20px; + line-height: 20px; + font-weight: normal; + } + .orderRed { + margin-right: 14px; + height: 42px; + padding: 9px 15px; + background: rgba(199, 8, 80, 0.3); + border: 3px solid #c70850; + border-radius: 6px; + color: #c70850; + font-size: 20px; + line-height: 20px; + font-weight: normal; + } + .orderBlack { + margin-right: 14px; + height: 42px; + padding: 9px 15px; + background: rgba(20, 20, 20, 0.3); + border: 3px solid #141414; + border-radius: 6px; + color: #141414; + font-size: 20px; + line-height: 20px; + font-weight: normal; + } + + .arrivingDate { + color: @COLOR_GRAY07; + font-size: 24px; + font-weight: normal; + } + } + + .viewOrderDetailsBtn { + width: 350px !important; + max-width: unset !important; + } + } + + .statusCardBody { + display: flex; + flex-wrap: wrap; + align-items: center; + + .productDetails { + border-right: 1px solid @COLOR_GRAY02; + padding: 40px 60px; + width: 70%; + + .productDetailsTitle { + display: flex; + + > img { + width: 40px; + height: 40px; + margin-right: 10px; + } + + .productName { + font-size: 30px; + font-weight: bold; + margin-bottom: 20px; + color: @COLOR_GRAY07; + .elip(@clamp:1); + } + } + + .productDescWrap { + display: flex; + + .productImage { + .size(@w: 200px, @h: 200px); + background-color: @COLOR_WHITE; + border: 1px solid @COLOR_GRAY02; + margin-right: 20px; + + > img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .productDesc { + p { + font-size: 24px; + color: @COLOR_GRAY03; + } + + .price { + margin-top: 66px; + + strong { + color: @PRIMARY_COLOR_RED; + font-size: 30px; + } + } + } + } + } + + .actionButtons { + width: 30%; + display: flex; + flex-direction: column; + align-items: center; + + .actionButton { + background-color: @COLOR_WHITE; + height: 60px !important; + width: 400px !important; + border: 1px solid @COLOR_GRAY02; + color: @COLOR_GRAY03; + font-weight: normal; + font-size: 24px; + position: relative; + + &:focus { + &::after { + .focused(@boxShadow: 0, @borderRadius: 6px); + } + } + + &:first-of-type { + margin-bottom: 6px; + } + } + } + } +} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.jsx new file mode 100644 index 00000000..d6c2001b --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.jsx @@ -0,0 +1,71 @@ +import React, { memo } from "react"; + +import { useSelector } from "react-redux"; + +import { + $L, + convertToTimeFormat, + getFormattingCardNo, +} from "../../../../../utils/helperMethods"; +import css from "./OrderListCardTopContents.module.less"; + +export default memo(function OrderListCardTopContents({ paymentInfo }) { + const { + cardKnd, + cardNo, + regDt, + totProdQty, + totProdPrc, + totDcAmt, + totOptPrc, + totDlvrAmt, + ordTotTaxAmt, + currSign, + currSignLoc, + } = paymentInfo || {}; + + return ( +
+
+

{$L("PAYMENT METHOD")}

+ + {cardKnd} / {getFormattingCardNo(cardNo)} + +

{$L("ORDER DATE")}

+ {convertToTimeFormat(regDt, true)} +
+ + + + + + + + + + + + + + + + + + + + + +
{$L("ITEM")}{$L("ITEM TOTAL")}{$L("OPTION")}{$L("S&H")}{$L("TAX")}{$L("COUPON")}
{totProdQty} + {currSign} {totProdPrc} + + {currSign} {totDcAmt} + + {currSign} {totOptPrc} + + {currSign} {totDlvrAmt} + + {currSign} {ordTotTaxAmt} +
+
+ ); +}); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.module.less new file mode 100644 index 00000000..ad8ca98b --- /dev/null +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.module.less @@ -0,0 +1,89 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.orderCardTopContents { + width: 100%; + padding: 40px 60px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + .font(@fontFamily: @baseFont, @fontSize: 24px); + + .left { + .leftTitle { + color: @COLOR_GRAY07; + font-weight: bold; + + &:last-of-type { + margin-top: 15px; + } + } + + .leftDesc { + color: @COLOR_GRAY03; + display: inline-block; + + &:first-of-type { + padding-bottom: 15px; + border-bottom: 1px solid @COLOR_GRAY02; + } + } + } + + .table { + width: 1130px; + height: 175px; + border-collapse: collapse; + background-color: @COLOR_WHITE; + border-radius: 6px; + + th, + td { + text-align: center; + padding: 10px 20px; + } + + th { + font-weight: bold; + color: @COLOR_GRAY07; + border-bottom: 1px solid @COLOR_GRAY02; + border-right: 1px solid @COLOR_GRAY02; + } + + td { + color: @COLOR_GRAY03; + border-right: 1px solid @COLOR_GRAY02; + } + + thead { + height: 50%; + + tr { + th { + border-top: none; + border-left: none; + + &:last-of-type { + border-right: none; + } + } + } + } + + tbody { + height: 50%; + + tr { + td { + border-top: none; + border-left: none; + + &:last-of-type { + border-right: none; + } + } + } + } + } +}