diff --git a/src/entities/additional-service/api/use-extension-ars-apply-mutation.ts b/src/entities/additional-service/api/ars/use-extension-ars-apply-mutation.ts similarity index 96% rename from src/entities/additional-service/api/use-extension-ars-apply-mutation.ts rename to src/entities/additional-service/api/ars/use-extension-ars-apply-mutation.ts index 675010d..faee522 100644 --- a/src/entities/additional-service/api/use-extension-ars-apply-mutation.ts +++ b/src/entities/additional-service/api/ars/use-extension-ars-apply-mutation.ts @@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error'; import { ExtensionArsApplyParams, ExtensionArsApplyResponse -} from '../model/types'; +} from '../../model/ars/types'; import { useMutation, UseMutationOptions diff --git a/src/entities/additional-service/api/use-extension-ars-detail-mutation.ts b/src/entities/additional-service/api/ars/use-extension-ars-detail-mutation.ts similarity index 96% rename from src/entities/additional-service/api/use-extension-ars-detail-mutation.ts rename to src/entities/additional-service/api/ars/use-extension-ars-detail-mutation.ts index 676e09f..ebdb454 100644 --- a/src/entities/additional-service/api/use-extension-ars-detail-mutation.ts +++ b/src/entities/additional-service/api/ars/use-extension-ars-detail-mutation.ts @@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error'; import { ExtensionArsDetailParams, ExtensionArsDetailResponse -} from '../model/types'; +} from '../../model/ars/types'; import { useMutation, UseMutationOptions diff --git a/src/entities/additional-service/api/use-extension-ars-download-excel-mutation.ts b/src/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation.ts similarity index 97% rename from src/entities/additional-service/api/use-extension-ars-download-excel-mutation.ts rename to src/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation.ts index 858502c..456f690 100644 --- a/src/entities/additional-service/api/use-extension-ars-download-excel-mutation.ts +++ b/src/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation.ts @@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error'; import { ExtensionArsDownloadExcelParams, ExtensionArsDownloadExcelResponse -} from '../model/types'; +} from '../../model/ars/types'; import { useMutation, UseMutationOptions diff --git a/src/entities/additional-service/api/use-extension-ars-list-mutation.ts b/src/entities/additional-service/api/ars/use-extension-ars-list-mutation.ts similarity index 96% rename from src/entities/additional-service/api/use-extension-ars-list-mutation.ts rename to src/entities/additional-service/api/ars/use-extension-ars-list-mutation.ts index 96e5d7f..90e21da 100644 --- a/src/entities/additional-service/api/use-extension-ars-list-mutation.ts +++ b/src/entities/additional-service/api/ars/use-extension-ars-list-mutation.ts @@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error'; import { ExtensionArsListParams, ExtensionArsListResponse -} from '../model/types'; +} from '../../model/ars/types'; import { useMutation, UseMutationOptions diff --git a/src/entities/additional-service/api/use-extension-ars-resend-mutation.ts b/src/entities/additional-service/api/ars/use-extension-ars-resend-mutation.ts similarity index 96% rename from src/entities/additional-service/api/use-extension-ars-resend-mutation.ts rename to src/entities/additional-service/api/ars/use-extension-ars-resend-mutation.ts index 17e8190..c396cac 100644 --- a/src/entities/additional-service/api/use-extension-ars-resend-mutation.ts +++ b/src/entities/additional-service/api/ars/use-extension-ars-resend-mutation.ts @@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error'; import { ExtensionArsResendParams, ExtensionArsResendResponse -} from '../model/types'; +} from '../../model/ars/types'; import { useMutation, UseMutationOptions diff --git a/src/entities/additional-service/model/ars/constant.ts b/src/entities/additional-service/model/ars/constant.ts new file mode 100644 index 0000000..773350a --- /dev/null +++ b/src/entities/additional-service/model/ars/constant.ts @@ -0,0 +1,7 @@ +import { PaymentStatus } from './types'; + +export const PaymentStatusBtnGroup = [ + {name: '전체', value: PaymentStatus.ALL }, + {name: '결제완료', value: PaymentStatus.COMPLETE }, + {name: '미결제', value: PaymentStatus.UNPAID } +]; \ No newline at end of file diff --git a/src/entities/additional-service/model/ars/types.ts b/src/entities/additional-service/model/ars/types.ts new file mode 100644 index 0000000..0a48587 --- /dev/null +++ b/src/entities/additional-service/model/ars/types.ts @@ -0,0 +1,86 @@ +import { + DefaulResponsePagination, + DefaultRequestPagination +} from '@/entities/common/model/types'; + +export enum PaymentStatus { + ALL = 'ALL', + COMPLETE = 'COMPLETE', + UNPAID = 'UNPAID' +}; +export enum OrderStatus { + ALL = 'ALL', + PENDING = 'PENDING', + SUCCESS = 'SUCCESS', + EXPIRED = 'EXPIRED', + CANCELED = 'CANCELED', +}; +export interface ExtensionArsResendParams { + mid: string; + tid: string; +}; +export interface ExtensionArsResendResponse {}; +export interface ExtensionArsListParams { + mid: string; + moid: string; + fromDate: string; + toDate: string; + paymentStatus: string; + orderStatus: string; + minAmount: number; + maxAmount: number; + page: DefaultRequestPagination; +}; +export interface ArsListContent { + tid: string; + paymentDate: string; + paymentStatus: string; + orderStatus: string; + arsPaymentMethod: string; + amount: number; +}; +export interface ExtensionArsListResponse extends DefaulResponsePagination { + content: Array; +}; +export interface ExtensionArsDownloadExcelParams { + mid: string; + moid: string; + fromDate: string; + toDate: string; + paymentStatus: string; + orderStatus: string; + minAmount: number; + maxAmount: number; +}; +export interface ExtensionArsDownloadExcelResponse {}; +export interface ExtensionArsDetailParams { + mid: string; + tid: string; +}; +export interface ExtensionArsDetailResponse { + corpName: string; + mid: string; + arsPaymentMethod: string; + paymentStatus: string; + orderStatus: string; + paymentDate: string; + goodsName: string; + tid: string; + buyerName: string; + phoneNumber: string; + maskPhoneNumber: string; + email: string; + smsVerificationCode: string; +}; +export interface ExtensionArsApplyParams { + mid: string; + moid: string; + goodsName: string; + amount: number; + instmntMonth: string; + buyerName: string; + phoneNumber: string; + email: string; + arsPaymentMethod: string; +}; +export interface ExtensionArsApplyResponse {}; \ No newline at end of file diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index 44d657b..c0cb44b 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -34,6 +34,7 @@ export enum AdditionalServiceCategory { FundAccountResult = 'FundAccountResult', SettlementAgency = 'SettlementAgency', Payout = 'Payout', + Ars = 'Ars', } // ======================================== @@ -766,86 +767,8 @@ export interface ExtensionSmsDetailResponse { sendMessage: string; } -// ARS 카드결제 확장 서비스 -export interface ExtensionArsResendParams extends ExtensionRequestParams { - tid: string; -} -export interface ExtensionArsResendResponse { -} - -export interface ExtensionArsListParams extends ExtensionRequestParams { - moid: string; - fromDate: string; - toDate: string; - paymentStatus: string; - orderStatus: string; - minAmount: number; - maxAmount: number; -} - -export interface ExtensionArsListItemProps { - tid: string; - paymentDate: string; - paymentStatus: string; - orderStatus: string; - arsPaymentMethod: string; - amount: number; -} - -export interface ExtensionArsListResponse extends DefaulResponsePagination { - content: Array -} - -export interface ExtensionArsDownloadExcelParams extends ExtensionRequestParams { - moid: string; - fromDate: string; - toDate: string; - paymentStatus: string; - orderStatus: string; - minAmount: number; - maxAmount: number; -} - -export interface ExtensionArsDownloadExcelResponse { - -} - -export interface ExtensionArsDetailParams extends ExtensionRequestParams { - tid: string; -} - -export interface ExtensionArsDetailResponse { - corpName: string; - mid: string; - arsPaymentMethod: string; - paymentStatus: string; - orderStatus: string; - paymentDate: string; - goodsName: string; - tid: string; - buyerName: string; - phoneNumber: string; - maskPhoneNumber: string; - email: string; - smsVerificationCode: string; -} - -export interface ExtensionArsApplyParams extends ExtensionRequestParams { - moid: string; - goodsName: string; - amount: number; - instmntMonth: string; - buyerName: string; - phoneNumber: string; - email: string; - arsPaymentMethod: string; -} - -export interface ExtensionArsApplyResponse { - -} // 알림톡 확장 서비스 export interface SendMerchantInfoItem { diff --git a/src/pages/additional-service/additional-service-pages.tsx b/src/pages/additional-service/additional-service-pages.tsx index f1f0be9..15576ed 100644 --- a/src/pages/additional-service/additional-service-pages.tsx +++ b/src/pages/additional-service/additional-service-pages.tsx @@ -2,9 +2,9 @@ import { Route } from 'react-router-dom'; import { SentryRoutes } from '@/shared/configs/sentry'; import { ROUTE_NAMES } from '@/shared/constants/route-names'; import { IntroPage } from './intro/intro-page'; -import { ArsCardPaymentListPage } from './ars-card-payment/list-page'; -import { ArsCardPaymentRequestPage } from './ars-card-payment/request-page'; -import { ArsCardPaymentRequestSuccessPage } from './ars-card-payment/request-success-page'; +import { ArsListPage } from './ars/list-page'; +import { ArsRequestPage } from './ars/request-page'; +import { ArsRequestSuccessPage } from './ars/request-success-page'; import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page'; import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page'; import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page'; @@ -43,10 +43,10 @@ export const AdditionalServicePages = () => { } /> - - } /> - } /> - } /> + + } /> + } /> + } /> } /> diff --git a/src/pages/additional-service/ars-card-payment/list-page.tsx b/src/pages/additional-service/ars/list-page.tsx similarity index 61% rename from src/pages/additional-service/ars-card-payment/list-page.tsx rename to src/pages/additional-service/ars/list-page.tsx index d1a472a..4d5fe32 100644 --- a/src/pages/additional-service/ars-card-payment/list-page.tsx +++ b/src/pages/additional-service/ars/list-page.tsx @@ -1,17 +1,43 @@ import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; -import { HeaderType } from '@/entities/common/model/types'; +import { HeaderType, SortByKeys } from '@/entities/common/model/types'; import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; +import { useEffect, useState } from 'react'; +import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; +import { ArsListContent, ExtensionArsDownloadExcelParams, ExtensionArsDownloadExcelResponse, ExtensionArsListParams, ExtensionArsListResponse, OrderStatus, PaymentStatus } from '@/entities/additional-service/model/ars/types'; +import { useExtensionArsListMutation } from '@/entities/additional-service/api/ars/use-extension-ars-list-mutation'; +import moment from 'moment'; +import { useExtensionArsDownloadExcelMutation } from '@/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation'; +import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group'; +import { AdditionalServiceCategory } from '@/entities/additional-service/model/types'; +import { SortOptionsBox } from '@/entities/common/ui/sort-options-box'; +import { PaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant'; -export const ArsCardPaymentListPage = () => { +export const ArsListPage = () => { const { navigate } = useNavigate(); + const [sortBy, setSortBy] = useState(SortByKeys.New); + const [listItems, setListItems] = useState>>({}); + const [filterOn, setFilterOn] = useState(false); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [mid, setMid] = useState('nictest001m'); + const [moid, setMoid] = useState(''); + const [fromDate, setFromDate] = useState(''); + const [toDate, setToDate] = useState(''); + const [paymentStatus, setPaymentStatus] = useState(PaymentStatus.ALL); + const [orderStatus, setOrderStatus] = useState(OrderStatus.ALL); + const [minAmount, setMinAmount] = useState(0); + const [maxAmount, setMaxAmount] = useState(0); + + const { mutateAsync: extensionArsList } = useExtensionArsListMutation(); + const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation(); + useSetHeaderTitle('신용카드 ARS 결제'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); @@ -19,10 +45,103 @@ export const ArsCardPaymentListPage = () => { navigate(PATHS.home); }); - const onClickToNavigation = () => { - navigate(PATHS.additionalService.arsCardPayment.request); + const callList = (option?: { + sortBy?: string, + val?: string + }) => { + pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; + setPageParam(pageParam); + + let params: ExtensionArsListParams = { + mid: mid, + moid: moid, + fromDate: fromDate, + toDate: toDate, + paymentStatus: paymentStatus, + orderStatus: orderStatus, + minAmount: minAmount, + maxAmount: maxAmount, + page: pageParam + }; + extensionArsList(params).then((rs: ExtensionArsListResponse) => { + setListItems(assembleData(rs.content)); + }); }; + const callDownloadExcel = () => { + let params: ExtensionArsDownloadExcelParams = { + mid: mid, + moid: moid, + fromDate: fromDate, + toDate: toDate, + paymentStatus: paymentStatus, + orderStatus: orderStatus, + minAmount: minAmount, + maxAmount: maxAmount, + }; + extensionArsDownloadExcel(params).then((rs: ExtensionArsDownloadExcelResponse) => { + + }); + }; + + const assembleData = (content: Array) => { + let data: any = {}; + if(content && content.length > 0){ + for(let i=0;i { + navigate(PATHS.additionalService.ars.request); + }; + + const onClickToDownloadExcel = () => { + callDownloadExcel(); + }; + const onClickToOpenFilter = () => { + setFilterOn(!filterOn); + }; + const onClickToSort = (sort: SortByKeys) => { + setSortBy(sort); + callList({sortBy: sort}); + }; + const onClickToPaymentStatus = (val: PaymentStatus) => { + setPaymentStatus(val); + callList({val: val}); + }; + + useEffect(() => { + callList(); + }, []); + + const getArsList = () => { + let rs = []; + if(Object.keys(listItems).length > 0){ + for (const [key, value] of Object.entries(listItems)) { + rs.push( + + ); + } + } + return rs; + } + return ( <>
@@ -32,14 +151,15 @@ export const ArsCardPaymentListPage = () => {
- | - -
-
+ +
- 전체 - 결제완료 - 배송등록 + { + PaymentStatusBtnGroup.map((value, index) => ( + onClickToPaymentStatus(value.value) } + >{ value.name } + )) + }
diff --git a/src/pages/additional-service/ars-card-payment/request-page.tsx b/src/pages/additional-service/ars/request-page.tsx similarity index 94% rename from src/pages/additional-service/ars-card-payment/request-page.tsx rename to src/pages/additional-service/ars/request-page.tsx index 0744afe..071da8f 100644 --- a/src/pages/additional-service/ars-card-payment/request-page.tsx +++ b/src/pages/additional-service/ars/request-page.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; -import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/use-extension-ars-apply-mutation'; +import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/ars/use-extension-ars-apply-mutation'; import { HeaderType } from '@/entities/common/model/types'; import { useSetHeaderTitle, @@ -11,7 +11,7 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; -export const ArsCardPaymentRequestPage = () => { +export const ArsRequestPage = () => { const { navigate } = useNavigate(); const { mutateAsync: arsApply } = useExtensionArsApplyMutation(); @@ -20,10 +20,10 @@ export const ArsCardPaymentRequestPage = () => { useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); useSetOnBack(() => { - navigate(PATHS.additionalService.arsCardPayment.list); + navigate(PATHS.additionalService.ars.list); }); - const callArsCardPaymentRequest = () => { + const callArsRequest = () => { let arsApplyParams = { mid: 'string', moid: 'string', @@ -36,7 +36,7 @@ export const ArsCardPaymentRequestPage = () => { arsPaymentMethod: 'SMS', }; arsApply(arsApplyParams).then((rs) => { - navigate(PATHS.additionalService.arsCardPayment.requestSuccess); + navigate(PATHS.additionalService.ars.requestSuccess); console.log(rs) }).catch(() => { @@ -47,7 +47,7 @@ export const ArsCardPaymentRequestPage = () => { }; const onClickToRequest = () => { - callArsCardPaymentRequest(); + callArsRequest(); }; return ( diff --git a/src/pages/additional-service/ars-card-payment/request-success-page.tsx b/src/pages/additional-service/ars/request-success-page.tsx similarity index 90% rename from src/pages/additional-service/ars-card-payment/request-success-page.tsx rename to src/pages/additional-service/ars/request-success-page.tsx index 4126daa..86baa94 100644 --- a/src/pages/additional-service/ars-card-payment/request-success-page.tsx +++ b/src/pages/additional-service/ars/request-success-page.tsx @@ -5,14 +5,14 @@ import { useSetHeaderType, useSetFooterMode, } from '@/widgets/sub-layout/use-sub-layout'; -export const ArsCardPaymentRequestSuccessPage = () => { +export const ArsRequestSuccessPage = () => { const { navigate } = useNavigate(); useSetHeaderType(HeaderType.NoHeader); useSetFooterMode(false); const onClickToNavigate = () => { - navigate(PATHS.additionalService.arsCardPayment.list); + navigate(PATHS.additionalService.ars.list); }; return ( diff --git a/src/pages/additional-service/intro/intro-page.tsx b/src/pages/additional-service/intro/intro-page.tsx index 8405a60..7903c5e 100644 --- a/src/pages/additional-service/intro/intro-page.tsx +++ b/src/pages/additional-service/intro/intro-page.tsx @@ -27,7 +27,7 @@ export const IntroPage = () => { }, { className: 'list-wrap01', serviceName: '신용카드 ARS 결제', serviceDesc: '전화 한 통으로 결제 성공 편리하고 안전한 서비스', - icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.arsCardPayment.list + icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.ars.list }, { className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원', diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index da43a36..b8c63be 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -142,19 +142,19 @@ export const PATHS: RouteNamesType = { additionalService: { base: generatePath(ROUTE_NAMES.additionalService.base), intro: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.intro), - arsCardPayment: { - base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`), + ars: { + base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`), list: generatePath( - `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`, - ROUTE_NAMES.additionalService.arsCardPayment.list, + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`, + ROUTE_NAMES.additionalService.ars.list, ), request: generatePath( - `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`, - ROUTE_NAMES.additionalService.arsCardPayment.request, + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`, + ROUTE_NAMES.additionalService.ars.request, ), requestSuccess: generatePath( - `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`, - ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess, + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`, + ROUTE_NAMES.additionalService.ars.requestSuccess, ), }, keyInPayment: { diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index 30fc05a..91575ba 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -70,8 +70,8 @@ export const ROUTE_NAMES = { additionalService: { base: '/additional-service/*', intro: 'intro', - arsCardPayment: { - base: '/ars-card-payment/*', + ars: { + base: '/ars/*', list: 'list', request: 'request', requestSuccess: 'request-success', diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index 4268767..f0393cd 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/src/shared/ui/assets/css/style-fix.css @@ -77,4 +77,7 @@ main { } .notice-box { margin-top: 1rem; +} +.menu-category:last-of-type{ + padding-bottom: 15px; } \ No newline at end of file diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index 215f1e6..b8eafad 100644 --- a/src/shared/ui/menu/index.tsx +++ b/src/shared/ui/menu/index.tsx @@ -82,7 +82,7 @@ export const Menu = ({ categoryIcon: 'service-icon', items: [ {title: '부가서비스소개', path: PATHS.additionalService.intro}, - {title: 'ARS 카드결제', path: PATHS.additionalService.arsCardPayment.list}, + {title: 'ARS 카드결제', path: PATHS.additionalService.ars.list}, {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment.list}, {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification}, {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},