optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

myOrder change ui / focus / api

Browse Source
This commit is contained in:
hyunwoo93.cha
2024-06-20 07:52:27 +09:00
parent 14cfb1d944
commit 7de9158799
21 changed files with 1333 additions and 1672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
com.twin.app.shoptime/assets/images/img-my-info-billing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

151
com.twin.app.shoptime/src/actions/orderActions.js
View File

@@ -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;

1
com.twin.app.shoptime/src/api/apiConfig.js
View File

@@ -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",

38
com.twin.app.shoptime/src/reducers/orderReducer.js
View File

@@ -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 {

3
com.twin.app.shoptime/src/utils/Config.js
View File

@@ -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",

6
com.twin.app.shoptime/src/utils/helperMethods.js
View File

@@ -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);
};

7
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.jsx
View File

@@ -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 (
<CardItem className={css.card} aria-label={cardKnd + ", 1 of 1"}>
<h2 className={css.cardKnd}>{cardKnd.toUpperCase()}</h2>

245
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
View File

@@ -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 (
<>
<THeader title={title} />
<TBody scrollable={false}>
<div className={css.myorderscontainer}>
<TabContainer className={css.tabContainer}>
<TButtonTab
contents={tabList}
onItemClick={handleItemClick}
selectedIndex={selectedTab && selectedTab}
listType={LIST_TYPE.large}
className={css.ordersTab}
/>
<TDropDown
className={css.dropdown}
onSelect={handleSelectFilter}
selectedIndex={dropDownTab && dropDownTab}
width="small"
>
{filterMethods}
</TDropDown>
</TabContainer>
<div className={css.orderlist}>
{selectedTab === 0 && (
<OrderList onOrderDetailPopup={""} dropDownTab={dropDownTab} />
<TBody
className={css.tBody}
scrollable={false}
spotlightDisabled={!isOnTop}
>
<TVerticalPagenator
className={css.tVerticalPagenator}
spotlightId="myOrders_verticalPagenator"
onFocusedContainerId={onFocusedContainerId}
cbChangePageRef={cbChangePageRef}
onScrollStop={onScrollStop}
topMargin={40}
>
<Container
spotlightId={"myOrders_top_point_area"}
data-wheel-point={true}
>
{buttonTabList && buttonTabList.length > 0 && (
<TabContainer className={css.tabContainer}>
<TButtonTab
contents={buttonTabList}
onItemClick={handleItemClick}
selectedIndex={selectedTab && selectedTab}
listType={LIST_TYPE.medium}
/>
<TDropDown
className={classNames(
css.dropdown,
styleChange === true ? css.myOrdersDropdown : null
)}
onOpen={handleStyle}
onClose={handleStyleOut}
onSelect={handleSelectFilter}
selectedIndex={dropDownTab}
width="small"
>
{filterMethods}
</TDropDown>
</TabContainer>
)}
{!isLoading &&
(orderInfo && orderInfo.length > 0 ? (
orderInfo.map((item, index) => {
const lastItem = index === orderInfo.length - 1;
{selectedTab === 1 && (
<CancelOrderList
onOrderCancelPopUp={""}
dropDownTab={dropDownTab}
/>
)}
</div>
</div>
return (
<OrderListCard
item={item}
key={index}
lastItem={lastItem}
/>
);
})
) : (
<NoOrderList />
))}
</Container>
</TVerticalPagenator>
</TBody>
</>
);

555
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less
View File

@@ -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);
}
}
}
}
}
}
}

209
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx
View File

@@ -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 (
<div className={css.noOrderList}>
<div className={css.noOrderBox}>
<img src={noOrderImg} alt="No order" />
<span className={css.noOrderTitle}>
{$L("THERE IS NO ORDER HISTORY")}
</span>
<br />
<span className={css.noOrderSub}>
{$L("Use search above to find past orders.")}
</span>
</div>
</div>
);
}
return (
<>
{orderInfo &&
orderInfo.map((order, index) => {
return (
<div className={css.orderBorder} key={index}>
<div className={css.orderNmInfo}>
<p className={css.orderTitle}>
{$L("ORDER NUMBER")} :{" "}
<span className={css.orderNm}>{order.ordNo}</span>
</p>
</div>
<div className={css.orderInfo}>
<div className={css.infoBox}>
<div className={css.leftBox}>
<div className={css.topBox}>
<h4>{$L("payment method")}</h4>
<span>
{order.cardKnd} / {order.cardNo}
</span>
</div>
<div className={css.underBox}>
<h4>{$L("order date")}</h4>
<span>January 5, 2023 : 취소 날짜 확인</span>
</div>
</div>
</div>
<div className={css.orderItemList}>
<ul>
{order.orderProductInfo &&
order.orderProductInfo.map((product, prodIndex) => {
return (
<li key={prodIndex}>
<div className={css.topBox}>
<div className={css.leftSmallBox}>
{product.shptmDlvrStCd === "ORD00201" ? (
<span className={css.orderGreen}>
Ordered
</span>
) : product.shptmDlvrStCd === "ORD00202" ? (
<span className={css.orderGreen}>
Out for delivery
</span>
) : product.shptmDlvrStCd === "ORD00203" ? (
<span className={css.orderGreen}>
Arriving
</span>
) : product.shptmDlvrStCd === "ORD00204" ? (
<span className={css.orderBlue}>
Shipping
</span>
) : product.shptmDlvrStCd === "ORD00205" ? (
<span className={css.orderRed}>Canceled</span>
) : null}
Arriving January 10 ~ January 15 - API 확인 필요{" "}
</div>
<TButton
size="small"
className={css.orderDetailBtn}
onClick={handleOrderDetailClick(
order.orderProductInfo[prodIndex]
)}
>
{$L("view cancelled details")}
</TButton>
</div>
<div className={css.underBox}>
<div className={css.leftBox}>
<div className={css.productBox}>
<div className={css.logo}>
<span className={css.logoImg}>
<img src={product.logoImgPath} />
</span>
<p>{product.prdtNm}</p>
</div>
<div className={css.orderPdInfo}>
<img
className={css.productImg}
src={product.prdtImgUrl}
></img>
<div className={css.pdInfo}>
<ul>
<li>
{$L("ID")}: {product.prdtId}
</li>
<li>
{$L("Qty")}: {product.prodQty}
</li>
<li>
Silver Metallic / XL : API 확인 필요
</li>
</ul>
<div className={css.orderAcc}>
${product.prodPrc}
<span>|</span>
<span>
${$L("OPTIONS TOTAL")}: $
{product.prdtOptPrc}
</span>
<span>|</span>
<span>
{$L("S&H")}: ${product.dlvrAmt}
</span>
</div>
</div>
</div>
</div>
</div>
{/* 디테일 버튼 */}
<div className={css.rightBox}>
<ul>
<li>
<SpottableComponent className={css.divBtn}>
{$L("BUY IT AGAIN")}
</SpottableComponent>
</li>
</ul>
</div>
{/* 디테일 버튼 */}
</div>
</li>
);
})}
</ul>
</div>
</div>
</div>
);
})}
</>
);
}

385
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less
View File

@@ -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;
}
}
}
}
}
}
}
}
}
}
}

354
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx
View File

@@ -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 ? (
<div className={css.noOrderList}>
<div className={css.noOrderBox}>
<img src={noOrderImg} alt="No order" />
<span className={css.noOrderTitle}>
{$L("THERE IS NO ORDER HISTORY")}
</span>
<br />
<span className={css.noOrderSub}>
{$L("Use search above to find past orders.")}
</span>
</div>
</div>
) : (
orderInfo.map((order) => (
<div className={css.orderBorder} key={order.ordNo}>
<div className={css.orderNmInfo}>
<p className={css.orderTitle}>
{$L("ORDER NUMBER")} :{" "}
<span className={css.orderNm}>{order.ordNo}</span>
</p>
<TButton
size="small"
className={css.orderCancelBtn}
onClick={onCancel}
>
{$L("Cancel order")}
</TButton>
</div>
<div className={css.orderInfo}>
<div className={css.infoBox}>
<div className={css.leftBox}>
<div className={css.topBox}>
<h4>{$L("payment method")}</h4>
<span>
{order.cardKnd} / {order.cardNo}
</span>
</div>
<div className={css.underBox}>
<h4>{$L("order date")}</h4>
<span>{order?.regDt}</span>
</div>
</div>
<div className={css.rightBox}>
<ul>
<li>
<div>{$L("item")}</div>
<div>{order?.totProdQty}</div>
</li>
<li>
<div>{$L("item total")}</div>
<div>${order?.totProdPrc}</div>
</li>
<li>
<div>{$L("coupon")}</div>
<div>-${order?.totDcAmt}</div>
</li>
<li>
<div>{$L("OPTIONS TOTAL")}</div>
<div>${order?.totOptPrc}</div>
</li>
<li>
<div>{$L("s&h")}</div>
<div>${order?.totDlvrAmt}</div>
</li>
<li>
<div>{$L("tax")}</div>
<div>${order?.ordTotTaxAmt}</div>
</li>
</ul>
</div>
</div>
<div className={css.totalAccount}>
<div className={css.accTitle}>{$L("order total")}</div>
<div className={css.accountNum}>${order?.ordPmtReqAmt}</div>
</div>
<div className={css.orderItemList}>
<ul>
{order.orderProductInfo.map((product) => (
<li key={product.prdtId}>
<div className={css.topBox}>
<div className={css.leftSmallBox}>
{product.shptmOrdStCd === "ORD00601" ? (
<span className={css.orderGreen}>
Order completed
</span>
) : product.shptmOrdStCd === "ORD00602" ? (
<span className={css.orderGreen}>
Preparing for shipment
</span>
) : product.shptmOrdStCd === "ORD00603" ? (
<span className={css.orderGreen}>In Transit</span>
) : product.shptmOrdStCd === "ORD00604" ? (
<span className={css.orderBlue}>Delivered</span>
) : product.shptmOrdStCd === "ORD00605" ? (
<span className={css.orderRed}>Cancel order</span>
) : product.shptmOrdStCd === "ORD00606" ? (
<span className={css.orderRed}>
Cancellation processing
</span>
) : product.shptmOrdStCd === "ORD00607" ? (
<span className={css.orderRed}>
Cancellation completed
</span>
) : null}
{/* Arriving January 10 ~ January 15 - API 확인 필요 */}
</div>
<TButton
size="small"
className={css.orderDetailBtn}
onClick={() => handleOrderDetailClick(product)}
>
{$L("view order details")}
</TButton>
</div>
<div className={css.underBox}>
<div className={css.leftBox}>
<div className={css.productBox}>
<div className={css.logo}>
<span className={css.logoImg}>
<img
src={product.logoImgPath}
alt="Product Logo"
/>
</span>
<p>{product.prdtNm}</p>
</div>
<div className={css.orderPdInfo}>
<img
className={css.productImg}
src={product.prdtImgUrl}
alt="Product Image"
/>
<div className={css.pdInfo}>
<ul>
<li>
{$L("ID")}: {product.prdtId}
</li>
<li>
{$L("Qty")}: {product.prodQty}
</li>
{/* <li>Silver Metallic / XL : API 확인 필요</li> */}
</ul>
<div className={css.orderAcc}>
${product.prodPrc}
<span>|</span>
<span>
${$L("OPTIONS TOTAL")}: $
{product.prdtOptPrc}
</span>
<span>|</span>
<span>
{$L("S&H")}: ${product.dlvrAmt}
</span>
</div>
</div>
</div>
</div>
</div>
<div className={css.rightBox}>
<ul>
<li>
{product.shptmOrdStCd === "ORD00601" ? (
<>
<SpottableComponent
className={css.divBtn}
onClick={handleBuyClick(product)}
>
{$L("BUY IT AGAIN")}
</SpottableComponent>
<SpottableComponent
className={css.divBtn}
onClick={handleCancelClick}
>
{$L("CANCEL ITEM")}
</SpottableComponent>
</>
) : product.shptmOrdStCd === "ORD00602" ? (
<>
<SpottableComponent className={css.divBtn}>
{$L("BUY IT AGAIN")}
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
{$L("CANCEL ITEM")}
</SpottableComponent>
</>
) : product.shptmOrdStCd === "ORD00603" ? (
<>
<SpottableComponent className={css.divBtn}>
{$L("BUY IT AGAIN")}
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
{$L("RETURN ITEM")}
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
{$L("EXCHANGE ITEM")}
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
{$L("TRACK PACKAGE")}
</SpottableComponent>
</>
) : product.shptmOrdStCd === "ORD00604" ? (
<>
<SpottableComponent className={css.divBtn}>
{$L("BUY IT AGAIN")}
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
{$L("RETURN ITEM")}
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
{$L("EXCHANGE ITEM")}
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
{$L("TRACK PACKAGE")}
</SpottableComponent>
</>
) : product.shptmOrdStCd === "ORD00605" ? (
<>
<SpottableComponent className={css.divBtn}>
{$L("BUY IT AGAIN")}
</SpottableComponent>
</>
) : product.shptmOrdStCd === "ORD00606" ? (
<>
<SpottableComponent className={css.divBtn}>
{$L("BUY IT AGAIN")}
</SpottableComponent>
</>
) : product.shptmOrdStCd === "ORD00607" ? (
<>
<SpottableComponent className={css.divBtn}>
{$L("BUY IT AGAIN")}
</SpottableComponent>
</>
) : null}
</li>
</ul>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
))
)}
{(activePopup === ACTIVE_POPUP.orderDetailPopup ||
activePopup === ACTIVE_POPUP.orderCancelReason) && <MyOrdersPopUp />}
</>
);
}

367
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.module.less
View File

@@ -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;
}
}
}
}
}
}
}
}
}
}
}

18
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.jsx Normal file
View File

@@ -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 (
<div className={css.noOrderList}>
<CustomImage src={noOrderImg} alt="No Data" />
<p className={css.title}>{$L("THERE IS NO ORDER HISTORY")}</p>
<span className={css.desc}>
{$L("Use search above to find past orders.")}
</span>
</div>
);
}

19
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.module.less Normal file
View File

@@ -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;
}
}

87
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.jsx Normal file
View File

@@ -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 (
<OrderListCardContainer
className={css.itemContainer}
data-wheel-point={!lastItem}
>
<div
className={css.cardHeader}
data-wheel-point={lastItem}
data-spotlight-id="lastItemOfOrderListCard"
>
<h2 className={css.orderNumber}>
{$L("ORDER NUMBER")} : <span className={css.ordNo}>{ordNo}</span>
</h2>
<TButton
size="small"
className={css.orderCancelButton}
onSpotlightLeft={onSpotlightLeft}
>
{$L("CANCEL ORDER")}
</TButton>
</div>
<OrderListCardTopContents paymentInfo={paymentInfo} />
<div className={css.orderTotal}>
<span className={css.orderTotalTitle}>{$L("ORDER TOTAL")}</span>
<span className={css.orderTotalPrice}>
{currSign} {ordPmtReqAmt}
</span>
</div>
<OrderListCardStatus
orderProductInfo={orderProductInfo?.[0]}
lastItem={lastItem}
/>
</OrderListCardContainer>
);
});

52
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.module.less Normal file
View File

@@ -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;
}
}
}

173
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx Normal file
View File

@@ -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 (
<>
<TButton size="small" className={css.actionButton}>
{$L("BUY IT AGAIN")}
</TButton>
{shptmOrdStCd === "ORD00601" || shptmOrdStCd === "ORD00602" ? (
<TButton size="small" className={css.actionButton}>
{$L("CANCEL ITEM")}
</TButton>
) : null}
</>
);
case "ORD00603":
case "ORD00604":
return (
<>
<TButton size="small" className={css.actionButton}>
{$L("BUY IT AGAIN")}
</TButton>
<TButton size="small" className={css.actionButton}>
{$L("RETURN ITEM")}
</TButton>
<TButton size="small" className={css.actionButton}>
{$L("EXCHANGE ITEM")}
</TButton>
<TButton size="small" className={css.actionButton}>
{$L("TRACK PACKAGE")}
</TButton>
</>
);
case "ORD00605":
case "ORD00606":
case "ORD00607":
return (
<>
<TButton size="small" className={css.actionButton}>
{$L("BUY IT AGAIN")}
</TButton>
</>
);
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 (
<div
className={css.itemListStatusContainer}
data-wheel-point={lastItem}
data-spotlight-id="lastItemOfOrderListCard1"
>
<div className={css.statusCardHeader}>
<div className={css.wrap}>
<span className={className}>{message}</span>
<span className={css.arrivingDate}>
Arriving January 10 - January 15
</span>
</div>
<TButton size="small" className={css.viewOrderDetailsBtn}>
{$L("VIEW ORDER DETAILS")}
</TButton>
</div>
<div className={css.statusCardBody}>
<div className={css.productDetails}>
<div className={css.productDetailsTitle}>
<CustomImage
src={logoImgPath}
alt="Product logo"
fallbackSrc={defaultLogoImg}
/>
<h2 className={css.productName}>{prdtNm}</h2>
</div>
<div className={css.productDescWrap}>
<div className={css.productImage}>
<CustomImage
src={prdtImgUrl}
alt="Product Image"
fallbackSrc={defaultImageItem}
/>
</div>
<div className={css.productDesc}>
<p>
{$L("ID")} : {prdtId}
</p>
<p>
{$L("Qty")} : {prodQty}
</p>
<p>
{prdtOpt && prdtOpt[0] && prdtOpt[0].optNm
? `${prdtOpt[0].optNm} / `
: " "}
{prdtOpt && prdtOpt[0] && prdtOpt[0].prodOptCval
? prdtOpt[0].prodOptCval
: " "}
</p>
<p className={css.price}>
<strong>
{currSign} {prodPrc}
</strong>{" "}
| {$L("OPTIONS TOTAL")}: {currSign} {prdtOptPrc} | {$L("S&H")}:{" "}
{currSign} {dlvrAmt}
</p>
</div>
</div>
</div>
<div className={css.actionButtons}>
{useMemo(() => renderButtonsByStatus(shptmOrdStCd))}
</div>
</div>
</div>
);
}

175
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.module.less Normal file
View File

@@ -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;
}
}
}
}
}

71
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.jsx Normal file
View File

@@ -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 (
<div className={css.orderCardTopContents}>
<div className={css.left}>
<p className={css.leftTitle}>{$L("PAYMENT METHOD")}</p>
<span className={css.leftDesc}>
{cardKnd} / {getFormattingCardNo(cardNo)}
</span>
<p className={css.leftTitle}>{$L("ORDER DATE")}</p>
<span className={css.leftDesc}>{convertToTimeFormat(regDt, true)}</span>
</div>
<table className={css.table}>
<thead>
<tr>
<th>{$L("ITEM")}</th>
<th>{$L("ITEM TOTAL")}</th>
<th>{$L("OPTION")}</th>
<th>{$L("S&H")}</th>
<th>{$L("TAX")}</th>
<th>{$L("COUPON")}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{totProdQty}</td>
<td>
{currSign} {totProdPrc}
</td>
<td>
{currSign} {totDcAmt}
</td>
<td>
{currSign} {totOptPrc}
</td>
<td>
{currSign} {totDlvrAmt}
</td>
<td>
{currSign} {ordTotTaxAmt}
</td>
</tr>
</tbody>
</table>
</div>
);
});

89
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.module.less Normal file
View File

@@ -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;
}
}
}
}
}
}