diff --git a/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation.ts b/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation.ts index e81a6b4..83a92f7 100644 --- a/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation.ts +++ b/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation.ts @@ -17,7 +17,7 @@ export const extensionAlimtalkSettingDetail = (params: ExtensionAlimtalkSettingD ); }; -export const useExtensionAlimtalkSettingSaveMutation = (options?: UseMutationOptions) => { +export const useExtensionAlimtalkSettingDetailMutation = (options?: UseMutationOptions) => { const mutation = useMutation({ ...options, mutationFn: (params: ExtensionAlimtalkSettingDetailParams) => extensionAlimtalkSettingDetail(params), diff --git a/src/entities/additional-service/model/alimtalk/types.ts b/src/entities/additional-service/model/alimtalk/types.ts index 7e7f7ee..11aad2a 100644 --- a/src/entities/additional-service/model/alimtalk/types.ts +++ b/src/entities/additional-service/model/alimtalk/types.ts @@ -1,5 +1,14 @@ import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types'; +export enum AlimtalkSettingFlagKeys { + cardApprovalFlag = 'cardApprovalFlag', + cardCancelFlag = 'cardCancelFlag', + bankApprovalFlag = 'bankApprovalFlag', + bankCancelFlag = 'bankCancelFlag', + virtureAccountDepositRequestFlag = 'virtureAccountDepositRequestFlag', + virtureAccountDepositCompleteFlag = 'virtureAccountDepositCompleteFlag', + virtureAccountRefundFlag = 'virtureAccountRefundFlag' +}; export enum AlimtalkSearchCl { BUYER_NAME = 'BUYER_NAME', TID = 'TID' @@ -24,8 +33,8 @@ export enum AlimTalkSendCl { }; export interface ExtensionAlimtalkSettingSaveParams { mid: string; - sendMerchantInfo: SendMerchantInfo; - sendUserInfo: SendUserInfo; + sendMerchantInfo?: SendMerchantInfo; + sendUserInfo?: SendUserInfo; }; export interface ExtensionAlimtalkSettingSaveResponse {}; diff --git a/src/entities/additional-service/ui/alimtalk/setting-service-row.tsx b/src/entities/additional-service/ui/alimtalk/setting-service-row.tsx new file mode 100644 index 0000000..9d9bcb5 --- /dev/null +++ b/src/entities/additional-service/ui/alimtalk/setting-service-row.tsx @@ -0,0 +1,51 @@ +import { AlimtalkSettingFlagKeys } from "../../model/alimtalk/types"; + +export interface AlimTalkSettingServiceRowProps { + title: string; + merchantFlag?: boolean; + userFlag?: boolean; + setMerchantFlag: (merchantFlag: boolean) => void; + setUserFlag: (userFlag: boolean) => void; +}; + +export const AlimTalkSettingServiceRow = ({ + title, + merchantFlag, + userFlag, + setMerchantFlag, + setUserFlag +}: AlimTalkSettingServiceRowProps) => { + + const onChangeMerchantFlag = (value: boolean) => { + setMerchantFlag(value); + }; + const onChangeUserFlag = (value: boolean) => { + setUserFlag(value); + }; + + return ( + <> +
+ { title } +
+ + +
+
+ + ) +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/list-item.tsx b/src/entities/additional-service/ui/list-item.tsx index 42169fd..e9fbd48 100644 --- a/src/entities/additional-service/ui/list-item.tsx +++ b/src/entities/additional-service/ui/list-item.tsx @@ -231,7 +231,7 @@ export const ListItem = ({ else { return } - return timeStr + return timeStr; }; const getTitle = () => { diff --git a/src/pages/additional-service/alimtalk/detail-page.tsx b/src/pages/additional-service/alimtalk/detail-page.tsx index 323ef0a..e27f702 100644 --- a/src/pages/additional-service/alimtalk/detail-page.tsx +++ b/src/pages/additional-service/alimtalk/detail-page.tsx @@ -1,8 +1,108 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { HeaderType } from '@/entities/common/model/types'; +import { + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode, + useSetOnBack +} from '@/widgets/sub-layout/use-sub-layout'; +import { useLocation } from 'react-router'; +import { useEffect, useState } from 'react'; +import { ExtensionAlimtalkDetailParams, ExtensionAlimtalkDetailResponse } from '@/entities/additional-service/model/alimtalk/types'; +import { useExtensionAlimtalkDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation'; +import moment from 'moment'; + export const AlimtalkDetailPage = () => { + const { navigate } = useNavigate(); + const location = useLocation(); + + const tid = location.state.tid; + const mid = location.state.mid; + + const [detail, setDetail] = useState(); + + const { mutateAsync: extensionAlimtalkDetail } = useExtensionAlimtalkDetailMutation(); + + const callDetail = () => { + let params: ExtensionAlimtalkDetailParams = { + tid: tid, + mid: mid, + }; + + extensionAlimtalkDetail(params).then((rs: ExtensionAlimtalkDetailResponse) => { + setDetail(rs); + }); + }; + + useSetHeaderTitle('알림톡 발송 상세'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(false); + useSetOnBack(() => { + navigate(PATHS.additionalService.alimtalk.list); + }); + + useEffect(() => { + callDetail(); + }, []); + + const getDate = (date?: string) => { + return (date)? moment(date.substr(0, 8)).format('YYYY.MM.DD'): ''; + }; return ( <> - +
+
+
+
+
+ { detail?.receiverName } +
+
{ detail?.merchantName }
+
{ getDate(detail?.sendDate) }
+
+
+
+
거래 정보
+
    +
  • + MID + { detail?.mid } +
    • +
  • + TID + { detail?.tid } +
    • +
  • + 서비스명 + { detail?.serviceName } +
    • +
  • + 발송 종류 + { detail?.sendType } +
    • +
  • + 주문자명 + {detail?.senderName } +
    • +
  • + 결제서비스 + { detail?.paymentMethod } +
    • +
  • + 알림구분 + { detail?.alimCl } +
    • +
  • + 발송구분 + { detail?.sendCl } +
    • +
+
+
+
+
); }; \ No newline at end of file diff --git a/src/pages/additional-service/alimtalk/setting-page.tsx b/src/pages/additional-service/alimtalk/setting-page.tsx index 209a11b..bab01ea 100644 --- a/src/pages/additional-service/alimtalk/setting-page.tsx +++ b/src/pages/additional-service/alimtalk/setting-page.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash-es'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { HeaderType } from '@/entities/common/model/types'; @@ -8,10 +9,100 @@ import { useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; +import { useExtensionAlimtalkSettingDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation'; +import { useExtensionAlimtalkSettingSaveMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-save-mutation'; +import { + AlimtalkSettingFlagKeys, + ExtensionAlimtalkSettingDetailParams, + ExtensionAlimtalkSettingDetailResponse, + ExtensionAlimtalkSettingSaveParams, + SendMerchantInfo, + SendUserInfo +} from '@/entities/additional-service/model/alimtalk/types'; +import { useEffect, useState } from 'react'; +import { AlimTalkSettingServiceRow } from '@/entities/additional-service/ui/alimtalk/setting-service-row'; export const AlimtalkSettingPage = () => { const { navigate } = useNavigate(); + const [mid, setMid] = useState('nictest001m'); + + const [merchantCardApprovalFlag, setMerchantCardApprovalFlag] = useState(false); + const [merchantCardCancelFlag, setMerchantCardCancelFlag] = useState(false); + const [merchantBankApprovalFlag, setMerchantBankApprovalFlag] = useState(false); + const [merchantBankCancelFlag, setMerchantBankCancelFlag] = useState(false); + const [merchantVirtureAccountDepositRequestFlag, setMerchantVirtureAccountDepositRequestFlag] = useState(false); + const [merchantVirtureAccountDepositCompleteFlag, setMerchantVirtureAccountDepositCompleteFlag] = useState(false); + const [merchantVirtureAccountRefundFlag, setMerchantVirtureAccountRefundFlag] = useState(false); + + const [userCardApprovalFlag, setUserCardApprovalFlag] = useState(false); + const [userCardCancelFlag, setUserCardCancelFlag] = useState(false); + const [userBankApprovalFlag, setUserBankApprovalFlag] = useState(false); + const [userBankCancelFlag, setUserBankCancelFlag] = useState(false); + const [userVirtureAccountDepositRequestFlag, setUserVirtureAccountDepositRequestFlag] = useState(false); + const [userVirtureAccountDepositCompleteFlag, setUserVirtureAccountDepositCompleteFlag] = useState(false); + const [userVirtureAccountRefundFlag, setUserVirtureAccountRefundFlag] = useState(false); + + const { mutateAsync: alimtalkSettingDetail } = useExtensionAlimtalkSettingDetailMutation(); + const { mutateAsync: alimtalkSettingSave } = useExtensionAlimtalkSettingSaveMutation(); + + const callSettingDetail = () => { + let params: ExtensionAlimtalkSettingDetailParams = { + mid: mid, + }; + + alimtalkSettingDetail(params).then((rs: ExtensionAlimtalkSettingDetailResponse) => { + let sendMerchantInfo = rs.content[0]?.sendMerchantInfo; + let sendUserInfo = rs.content[0]?.sendUserInfo; + + if(sendMerchantInfo){ + setMerchantCardApprovalFlag((sendMerchantInfo?.cardApprovalFlag || false)); + setMerchantCardCancelFlag(sendMerchantInfo?.cardCancelFlag || false); + setMerchantBankApprovalFlag(sendMerchantInfo?.bankApprovalFlag || false); + setMerchantBankCancelFlag(sendMerchantInfo?.bankCancelFlag || false); + setMerchantVirtureAccountDepositRequestFlag(sendMerchantInfo?.virtureAccountDepositRequestFlag || false); + setMerchantVirtureAccountDepositCompleteFlag(sendMerchantInfo?.virtureAccountDepositCompleteFlag || false); + setMerchantVirtureAccountRefundFlag(sendMerchantInfo?.virtureAccountRefundFlag || false); + } + if(sendUserInfo){ + setUserCardApprovalFlag(sendUserInfo?.cardApprovalFlag || false); + setUserCardCancelFlag(sendUserInfo?.cardCancelFlag || false); + setUserBankApprovalFlag(sendUserInfo?.bankApprovalFlag || false); + setUserBankCancelFlag(sendUserInfo?.bankCancelFlag || false); + setUserVirtureAccountDepositRequestFlag(sendUserInfo?.virtureAccountDepositRequestFlag || false); + setUserVirtureAccountDepositCompleteFlag(sendUserInfo?.virtureAccountDepositCompleteFlag || false); + setUserVirtureAccountRefundFlag(sendUserInfo?.virtureAccountRefundFlag || false); + } + }); + }; + + const callSettingSave = () => { + let params: ExtensionAlimtalkSettingSaveParams = { + mid: mid, + sendMerchantInfo: { + cardApprovalFlag: merchantCardApprovalFlag, + cardCancelFlag: merchantCardCancelFlag, + bankApprovalFlag: merchantBankApprovalFlag, + bankCancelFlag: merchantBankCancelFlag, + virtureAccountDepositRequestFlag: merchantVirtureAccountDepositRequestFlag, + virtureAccountDepositCompleteFlag: merchantVirtureAccountDepositCompleteFlag, + virtureAccountRefundFlag: merchantVirtureAccountRefundFlag + }, + sendUserInfo: { + cardApprovalFlag: userCardApprovalFlag, + cardCancelFlag: userCardCancelFlag, + bankApprovalFlag: userBankApprovalFlag, + bankCancelFlag: userBankCancelFlag, + virtureAccountDepositRequestFlag: userVirtureAccountDepositRequestFlag, + virtureAccountDepositCompleteFlag: userVirtureAccountDepositCompleteFlag, + virtureAccountRefundFlag: userVirtureAccountRefundFlag + }, + }; + alimtalkSettingSave(params).then((rs) => { + console.log(rs); + }); + }; + useSetHeaderTitle('알림톡 결제통보'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); @@ -20,9 +111,13 @@ export const AlimtalkSettingPage = () => { }); const onClickToSave = () => { - + callSettingSave(); }; + useEffect(() => { + callSettingDetail(); + }, []); + return ( <>
@@ -53,97 +148,55 @@ export const AlimtalkSettingPage = () => {
-
- 신용카드(승인) -
- - -
-
-
- 신용카드(취소) -
- - -
-
-
- 계좌이체(승인) -
- - -
-
-
- 계좌이체(취소) -
- - -
-
-
- 가상계좌(입금요청) -
- - -
-
-
- 가상계좌(입금완료) -
- - -
-
-
- 가상계좌(환불) -
- - -
-
+ + + + + + +