알림톡

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<ExtensionAlimtalkSettingDetailResponse, CBDCAxiosError, ExtensionAlimtalkSettingDetailParams>) => {
+export const useExtensionAlimtalkSettingDetailMutation = (options?: UseMutationOptions<ExtensionAlimtalkSettingDetailResponse, CBDCAxiosError, ExtensionAlimtalkSettingDetailParams>) => {
   const mutation = useMutation<ExtensionAlimtalkSettingDetailResponse, CBDCAxiosError, ExtensionAlimtalkSettingDetailParams>({
     ...options,
     mutationFn: (params: ExtensionAlimtalkSettingDetailParams) => extensionAlimtalkSettingDetail(params),

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;
+  sendMerchantInfo?: SendMerchantInfo;
-  sendUserInfo: SendUserInfo;
+  sendUserInfo?: SendUserInfo;
 };
 
 export interface ExtensionAlimtalkSettingSaveResponse {};

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 (
+    <>
+      <div className="service-row">
+        <span>{ title }</span>
+        <div className="switch-group">
+          <label className="settings-switch">
+            <input 
+              type="checkbox"
+              checked={ merchantFlag }
+              onChange={ (e) => onChangeMerchantFlag(e.target.checked) }
+            />
+            <span className="slider"></span>
+          </label>
+          <label className="settings-switch">
+            <input 
+              type="checkbox" 
+              checked={ userFlag } 
+              onChange={ (e) => onChangeUserFlag(e.target.checked) }
+            />
+            <span className="slider"></span>
+          </label>
+        </div>
+      </div>
+    </>
+  )
+};

src/entities/additional-service/ui/list-item.tsx

@@ -231,7 +231,7 @@ export const ListItem = ({
     else {
       return
     }
-    return timeStr
+    return timeStr;
   };
 
   const getTitle = () => {

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<ExtensionAlimtalkDetailResponse>();
+  
+  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 (
     <>
-    
+      <main className="full-height">
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="pay-top">
+              <div className="num-amount">
+                <span className="amount">{ detail?.receiverName }</span>
+              </div>
+              <div className="num-store">{ detail?.merchantName }</div>
+              <div className="num-day">{ getDate(detail?.sendDate) }</div>
+            </div>
+            <div className="detail-divider"></div>
+            <div className="pay-detail">
+              <div className="detail-title">거래 정보</div>
+              <ul className="kv-list">
+                <li className="kv-row">
+                  <span className="k">MID</span>
+                  <span className="v">{ detail?.mid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">TID</span>
+                  <span className="v">{ detail?.tid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">서비스명</span>
+                  <span className="v">{ detail?.serviceName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">발송 종류</span>
+                  <span className="v">{ detail?.sendType }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">주문자명</span>
+                  <span className="v">{detail?.senderName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">결제서비스</span>
+                  <span className="v">{ detail?.paymentMethod }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">알림구분</span>
+                  <span className="v">{ detail?.alimCl }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">발송구분</span>
+                  <span className="v">{ detail?.sendCl }</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
     </>
   );
 };

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<string>('nictest001m');
+  
+  const [merchantCardApprovalFlag, setMerchantCardApprovalFlag] = useState<boolean>(false);
+  const [merchantCardCancelFlag, setMerchantCardCancelFlag] = useState<boolean>(false);
+  const [merchantBankApprovalFlag, setMerchantBankApprovalFlag] = useState<boolean>(false);
+  const [merchantBankCancelFlag, setMerchantBankCancelFlag] = useState<boolean>(false);
+  const [merchantVirtureAccountDepositRequestFlag, setMerchantVirtureAccountDepositRequestFlag] = useState<boolean>(false);
+  const [merchantVirtureAccountDepositCompleteFlag, setMerchantVirtureAccountDepositCompleteFlag] = useState<boolean>(false);
+  const [merchantVirtureAccountRefundFlag, setMerchantVirtureAccountRefundFlag] = useState<boolean>(false);
+
+  const [userCardApprovalFlag, setUserCardApprovalFlag] = useState<boolean>(false);
+  const [userCardCancelFlag, setUserCardCancelFlag] = useState<boolean>(false);
+  const [userBankApprovalFlag, setUserBankApprovalFlag] = useState<boolean>(false);
+  const [userBankCancelFlag, setUserBankCancelFlag] = useState<boolean>(false);
+  const [userVirtureAccountDepositRequestFlag, setUserVirtureAccountDepositRequestFlag] = useState<boolean>(false);
+  const [userVirtureAccountDepositCompleteFlag, setUserVirtureAccountDepositCompleteFlag] = useState<boolean>(false);
+  const [userVirtureAccountRefundFlag, setUserVirtureAccountRefundFlag] = useState<boolean>(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 (
     <>
       <main>
@@ -53,97 +148,55 @@ export const AlimtalkSettingPage = () => {
                 </div>
 
                 <div className="service-section">
-                  <div className="service-row">
+                  <AlimTalkSettingServiceRow
-                    <span>신용카드(승인)</span>
+                    title='신용카드(승인)'
-                    <div className="switch-group">
+                    merchantFlag={ merchantCardApprovalFlag }
-                      <label className="settings-switch">
+                    userFlag={ userCardApprovalFlag }
-                        <input type="checkbox"/>
+                    setMerchantFlag={ setMerchantCardApprovalFlag }
-                        <span className="slider"></span>
+                    setUserFlag={ setUserCardApprovalFlag }
-                      </label>
+                  ></AlimTalkSettingServiceRow>
-                      <label className="settings-switch">
+                  <AlimTalkSettingServiceRow
-                        <input type="checkbox"/>
+                    title='신용카드(취소)'
-                        <span className="slider"></span>
+                    merchantFlag={ merchantBankApprovalFlag }
-                      </label>
+                    userFlag={ userCardCancelFlag }
-                    </div>
+                    setMerchantFlag={ setMerchantBankApprovalFlag }
-                  </div>
+                    setUserFlag={ setUserCardCancelFlag }
-                  <div className="service-row">
+                  ></AlimTalkSettingServiceRow>
-                    <span>신용카드(취소)</span>
+                  <AlimTalkSettingServiceRow
-                    <div className="switch-group">
+                    title='계좌이체(승인)'
-                      <label className="settings-switch">
+                    merchantFlag={ merchantBankApprovalFlag }
-                        <input type="checkbox" checked/>
+                    userFlag={ userBankApprovalFlag }
-                        <span className="slider"></span>
+                    setMerchantFlag={ setMerchantBankApprovalFlag }
-                      </label>
+                    setUserFlag={ setUserBankApprovalFlag }
-                      <label className="settings-switch">
+                  ></AlimTalkSettingServiceRow>
-                        <input type="checkbox" checked/>
+                  <AlimTalkSettingServiceRow
-                        <span className="slider"></span>
+                    title='계좌이체(취소)'
-                      </label>
+                    merchantFlag={ merchantBankCancelFlag }
-                    </div>
+                    userFlag={ userBankCancelFlag }
-                  </div>
+                    setMerchantFlag={ setMerchantBankCancelFlag }
-                  <div className="service-row">
+                    setUserFlag={ setUserBankCancelFlag }
-                    <span>계좌이체(승인)</span>
+                  ></AlimTalkSettingServiceRow>
-                    <div className="switch-group">
+                  <AlimTalkSettingServiceRow
-                      <label className="settings-switch">
+                    title='가상계좌(입금요청)'
-                        <input type="checkbox" checked/>
+                    merchantFlag={ merchantVirtureAccountDepositRequestFlag }
-                        <span className="slider"></span>
+                    userFlag={ userVirtureAccountDepositRequestFlag }
-                      </label>
+                    setMerchantFlag={ setMerchantVirtureAccountDepositRequestFlag }
-                      <label className="settings-switch">
+                    setUserFlag={ setUserVirtureAccountDepositRequestFlag }
-                        <input type="checkbox" checked/>
+                  ></AlimTalkSettingServiceRow>
-                        <span className="slider"></span>
+                  <AlimTalkSettingServiceRow
-                      </label>
+                    title='가상계좌(입금완료)'
-                    </div>
+                    merchantFlag={ merchantVirtureAccountDepositCompleteFlag }
-                  </div>
+                    userFlag={ userVirtureAccountDepositCompleteFlag }
-                  <div className="service-row">
+                    setMerchantFlag={ setMerchantVirtureAccountDepositCompleteFlag }
-                    <span>계좌이체(취소)</span>
+                    setUserFlag={ setUserVirtureAccountDepositCompleteFlag }
-                    <div className="switch-group">
+                  ></AlimTalkSettingServiceRow>
-                      <label className="settings-switch">
+                  <AlimTalkSettingServiceRow
-                        <input type="checkbox" checked/>
+                    title='가상계좌(환불)'
-                        <span className="slider"></span>
+                    merchantFlag={ merchantVirtureAccountRefundFlag }
-                      </label>
+                    userFlag={ userVirtureAccountRefundFlag }
-                      <label className="settings-switch">
+                    setMerchantFlag={ setMerchantVirtureAccountRefundFlag }
-                        <input type="checkbox" checked/>
+                    setUserFlag={ setUserVirtureAccountRefundFlag }
-                        <span className="slider"></span>
+                  ></AlimTalkSettingServiceRow>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>가상계좌(입금요청)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>가상계좌(입금완료)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>가상계좌(환불)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>