nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

..

Browse Source
This commit is contained in:
focp212@naver.com
2025-11-14 17:06:45 +09:00
parent e981d5cf19
commit ff65807d40
5 changed files with 307 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/entities/home/ui/favorite-wrapper.tsx
View File

@@ -8,7 +8,6 @@ import { useFavoriteEditOnStore, useMenuIds, useMenuOnStore, useStore } from '@/
import { useTranslation } from 'react-i18next';
import { showAlert } from '@/widgets/show-alert';
import { checkGrant } from '@/shared/lib/check-grant';
import { snackBar } from '@/shared/lib';
export interface FavoriteWrapperProps {
usingType: 'home' | 'menu',
@@ -28,7 +27,6 @@ export const FavoriteWrapper = ({
const { menuIds, setMenuIds, deleteMenuId} = useMenuIds();
const [isFirst, setIsFirst] = useState<boolean>(true);
const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
const [prevMenuOn, setPrevMenuOn] = useState<boolean>(false);
const itemAdd: UserFavorite = {
menuId: -1,
@@ -75,12 +73,6 @@ export const FavoriteWrapper = ({
};
const onClickToRemoveItem = (item?: UserFavorite) => {
// 삭제 전에 먼저 개수 체크
if(menuIds.length === 1){
snackBar(t('favorite.cannotDeleteLastItem'));
return; // 삭제 중단
}
let idx = -1;
let newFavorite: Array<UserFavorite> = favoriteItems.filter((value, index) => {
if(value.menuId === item?.menuId){
@@ -88,16 +80,18 @@ export const FavoriteWrapper = ({
}
return value.menuId !== item?.menuId;
});
useStore.getState().UserStore.setUserFavorite(newFavorite);
setFavoriteItems(newFavorite);
if(idx > -1){
goToSlide(idx);
}
if(item?.menuId){
deleteMenuId(item?.menuId);
if(menuIds.length <= 1){
showAlert('바로가기는 1개이상 설정 필요 합니다.');
}
else{
if(item?.menuId){
deleteMenuId(item?.menuId);
}
}
};
@@ -168,31 +162,16 @@ export const FavoriteWrapper = ({
useEffect(() => {
getFavoriteList();
if(usingType === 'home'){
goToSlide('first');
}
else if(usingType === 'menu'){
// 메뉴가 새로 열렸는지 확인 (prevMenuOn: false -> menuOn: true)
const isMenuJustOpened = !prevMenuOn && menuOn;
if(isMenuJustOpened || isFirst){
// 메뉴가 새로 열렸거나 처음 렌더링 시 맨 앞으로
setTimeout(() => {
goToSlide('first');
}, 100);
}
else if(changeMenuId){
// 즐겨찾기 아이템 추가/삭제 시 마지막으로 (변경된 항목 보여주기)
setTimeout(() => {
goToSlide('last');
}, 100);
}
else if(usingType === 'menu' && !isFirst){
setTimeout(() => {
goToSlide('last');
}, 100);
}
setIsFirst(false);
setPrevMenuOn(menuOn);
}, [changeMenuId, favoriteEditOn, menuOn]);
}, [changeMenuId, favoriteEditOn]);
return (
<>

1
src/entities/transaction/model/types.ts
View File

@@ -667,6 +667,7 @@ export interface AllTransactionCancelResponse {
export interface AllTransactionCancelInfoParams {
serviceCode: string;
tid: string;
mid: string;
};
export interface AllTransactionCancelInfoResponse {
debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;

277
src/entities/transaction/ui/all-transaction-cancel.tsx Normal file
View File

@@ -0,0 +1,277 @@
import { motion } from 'framer-motion';
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from "@/entities/common/model/constant";
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
import { useTranslation } from 'react-i18next';
import { AllTransactionAllCancel } from './all-transaction-all-cancel';
import { AllTransactionPartCancel } from './all-transaction-part-cancel';
import { AllTransactionCancelInfoParams, AllTransactionCancelInfoResponse, AllTransactionCancelParams, AllTransactionCancelResponse, CancelTabKeys, DebtPreventionCancelDisplayInfo, DebtPreventionCancelRequestInfo } from '../model/types';
import { useEffect, useState } from 'react';
import { useAllTransactioCancleMutation } from '../api/use-all-transaction-cancel-mutation';
import { useAllTransactioCancleInfoMutation } from '../api/use-all-transaction-cancel-info-mutation';
import { snackBar } from '@/shared/lib';
import { useStore } from '@/shared/model/store';
export interface AllTransactionCancelProps {
cancelOn: boolean;
setCancelOn: (cancelOn: boolean) => void;
serviceCode: string;
tid: string;
};
export const AllTransactionCancel = ({
cancelOn,
setCancelOn,
serviceCode,
tid
}: AllTransactionCancelProps) => {
const { t } = useTranslation();
const userInfo = useStore.getState().UserStore.userInfo;
const userMid = useStore.getState().UserStore.mid;
const [tabAction, setTabAction] = useState<CancelTabKeys>(CancelTabKeys.All);
const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(null);
const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null | undefined>(null);
const [goodsVat, setGoodsVat] = useState<number | null>(null);
const [isCompoundTax, setIsCompoundTax] = useState<boolean>(false);
const [isConditionalVatAutoCalcMerchant, setIsConditionalVatAutoCalcMerchant] = useState<boolean>(false);
const [isNpg, setIsNpg] = useState<boolean>(false);
const [isVatAutoCalcMerchant, setIsVatAutoCalcMerchant] = useState<boolean>(false);
const [isVatDisplayed, setIsVatDisplayed] = useState<boolean>(false);
const [partCancelCl, setPartCancelCl] = useState<boolean>(false);
const [remainAmount, setRemainAmount] = useState<number>(0);
const [serviceAmount, setServiceAmount] = useState<number | null>(null);
const [supplyAmount, setSupplyAmount] = useState<number | null>(null);
const [taxFreeAmount, setTaxFreeAmount] = useState<number | null>(null);
const [vatAutoCalcSummary, setVatAutoCalcSummary] = useState<number>(0);
const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
const [cancelPassword, setCancelPassword] = useState<string>('');
const [cancelSupplyAmount, setCancelSupplyAmount] = useState<number>(0);
const [cancelGoodsVat, setCancelGoodsVat] = useState<number>(0);
const [cancelTaxFreeAmount, setCancelTaxFreeAmount] = useState<number>(0);
const [cancelServiceAmount, setCancelServiceAmount] = useState<number>(0);
const [requestSuccess, setRequestSuccess] = useState<boolean>(true);
const [bankCode, setBankCode] = useState<string>('');
const [accountNo, setAccountNo] = useState<string>('');
const [accountHolder, setAccountHolder] = useState<string>('');
const [cancelPreventBondOn, setCancelPreventBondOn] = useState<boolean>(false);
const { mutateAsync: transactionCancel } = useAllTransactioCancleMutation();
const { mutateAsync: allTransactionCancelInfo } = useAllTransactioCancleInfoMutation();
const callCancelInfo = () => {
let params: AllTransactionCancelInfoParams = {
serviceCode: serviceCode,
tid: tid,
mid: userMid
};
allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
if(rs.debtPreventionCancelDisplayInfo !== null){
setCancelPreventBondOn(true);
}
else{
setDebtPreventionCancelDisplayInfo(rs.debtPreventionCancelDisplayInfo);
setDebtPreventionCancelRequestInfo(rs.debtPreventionCancelRequestInfo);
setGoodsVat(rs.goodsVat);
setIsCompoundTax(rs.isCompoundTax);
setIsConditionalVatAutoCalcMerchant(rs.isConditionalVatAutoCalcMerchant);
setIsNpg(rs.isNpg);
setIsVatAutoCalcMerchant(rs.isVatAutoCalcMerchant);
setIsVatDisplayed(rs.isVatDisplayed);
setPartCancelCl(rs.partCancelCl);
setRemainAmount(rs.remainAmount);
setServiceAmount(rs.serviceAmount);
setSupplyAmount(rs.supplyAmount);
setTaxFreeAmount(rs.taxFreeAmount);
setVatAutoCalcSummary(rs.vatAutoCalcSummary);
if(!partCancelCl){
setTotalCancelAmount(rs.remainAmount);
}
else{
setTotalCancelAmount(0);
}
}
// partCancelCl == true ==> 부분취소 버튼 활성화
// isCompoundTax == true ==> 부분취소의 복합과세 노출
// debtPreventionCancelDisplayInfo != null => 입금 후 취소 페이지 노출
// [취소신청]버튼 클릭시
// debtPreventionCancelDisplayInfo.isCancel == true => 취소api호출
// debtPreventionCancelRequestInfo 이 값 통쨰로 변조없이 그대로 api에 전달
// debtPreventionCancelDisplayInfo.isCancel == false => 얼럿만 띄우고 취소요청하면안됨
}).catch((e: any) => {
if(e.response?.data?.error?.message){
snackBar(e.response?.data?.error?.message);
return;
}
});
};
const callTransactionCancel = () => {
if(debtPreventionCancelDisplayInfo?.isCancel === false){
snackBar('취소요청이 불가능 합니다.');
}
else{
let transactionCancelParams: AllTransactionCancelParams = {
tid: tid,
cancelAmount: totalCancelAmount || 0,
cancelPassword: cancelPassword,
bankCode: bankCode,
accountNo: accountNo,
accountHolder: accountHolder,
supplyAmount: (!!partCancelCl)? cancelSupplyAmount: (supplyAmount || 0),
goodsVatAmount: (!!partCancelCl)? cancelGoodsVat: (goodsVat || 0),
taxFreeAmount: (!!partCancelCl)? cancelTaxFreeAmount: (taxFreeAmount || 0),
serviceAmount: (!!partCancelCl)? cancelServiceAmount: (serviceAmount || 0),
clientIp: userInfo.clientAddressIP,
partCancelCl: partCancelCl,
isNpg: isNpg,
serviceCode: serviceCode
};
transactionCancel(transactionCancelParams).then((rs: AllTransactionCancelResponse) => {
console.log(rs);
setRequestSuccess(true);
}).catch((e: any) => {
setRequestSuccess(false);
if(e.response?.data?.error?.message){
snackBar(e.response?.data?.error?.message);
return;
}
});
}
};
const onClickToClose = () => {
setCancelOn(false);
};
const onClickToChangeTab = (tab: CancelTabKeys) => {
setTabAction(tab);
};
useEffect(() => {
callCancelInfo();
}, []);
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={ (cancelOn)? 'visible': 'hidden' }
variants={ DetailMotionVariants }
transition={ DetailMotionDuration }
style={ DetailMotionStyle }
>
<div className="full-menu-container pdw-16">
<div className="full-menu-header">
<div className="full-menu-title center">{ t('transaction.cancelTitle') }</div>
<div className="full-menu-actions">
<FullMenuClose
addClass="full-menu-close"
onClickToCallback={ onClickToClose }
></FullMenuClose>
</div>
</div>
<div
className="subTab"
style={{ top: '50px' }}
>
<button
className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
>{t('transaction.fullCancel')}</button>
{ !!partCancelCl &&
<button
className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
>{t('transaction.partialCancel')}</button>
}
</div>
<div
className="option-list pb-86"
style={{ marginTop: '81px'}}
>
{ (tabAction === CancelTabKeys.All) &&
<AllTransactionAllCancel
serviceCode={ serviceCode }
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
goodsVat={ goodsVat }
isCompoundTax={ isCompoundTax }
isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
isNpg={ isNpg }
isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
isVatDisplayed={ isVatDisplayed }
partCancelCl={ partCancelCl }
remainAmount={ remainAmount }
serviceAmount={ serviceAmount }
supplyAmount={ supplyAmount }
taxFreeAmount={ taxFreeAmount }
vatAutoCalcSummary={ vatAutoCalcSummary }
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
requestSuccess={ requestSuccess }
totalCancelAmount={ totalCancelAmount }
></AllTransactionAllCancel>
}
{ !!partCancelCl && (tabAction === CancelTabKeys.Part) &&
<AllTransactionPartCancel
serviceCode={ serviceCode }
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
goodsVat={ goodsVat }
isCompoundTax={ isCompoundTax }
isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
isNpg={ isNpg }
isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
isVatDisplayed={ isVatDisplayed }
partCancelCl={ partCancelCl }
remainAmount={ remainAmount }
serviceAmount={ serviceAmount }
supplyAmount={ supplyAmount }
taxFreeAmount={ taxFreeAmount }
vatAutoCalcSummary={ vatAutoCalcSummary }
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
cancelSupplyAmount={ cancelSupplyAmount }
setCancelSupplyAmount={ setCancelSupplyAmount }
cancelGoodsVat={ cancelGoodsVat }
setCancelGoodsVat={ setCancelGoodsVat }
cancelTaxFreeAmount={ cancelTaxFreeAmount}
setCancelTaxFreeAmount={ setCancelTaxFreeAmount }
cancelServiceAmount={ cancelServiceAmount }
setCancelServiceAmount={ setCancelServiceAmount }
requestSuccess={ requestSuccess }
totalCancelAmount={ totalCancelAmount }
setTotalCancelAmount={ setTotalCancelAmount }
></AllTransactionPartCancel>
}
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => callTransactionCancel() }
>{t('transaction.submit')}</button>
</div>
</motion.div>
</>
);
};

16
src/entities/transaction/ui/detail/all-transaction-detail.tsx
View File

@@ -33,6 +33,7 @@ import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib';
import { AllTransactionCancel } from '../all-transaction-cancel';
export interface AllTransactionDetailProps {
detailOn: boolean;
@@ -64,6 +65,7 @@ export const AllTransactionDetail = ({
const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);
const [cancelOn, setCancelOn] = useState<boolean>(false);
const { mutateAsync: allTransactionDetail } = useAllTransactionDetailMutation();
const callDetail = () => {
@@ -85,6 +87,9 @@ export const AllTransactionDetail = ({
}
});
};
const onClickToMoveCancel = () => {
setCancelOn(true);
};
useEffect(() => {
if(!!detailOn && serviceCode && tid){
callDetail();
@@ -117,8 +122,7 @@ export const AllTransactionDetail = ({
afterLeave={ unmount }
open={ isOpen }
onClose={ close }
onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
// onConfirmClick={ () => callCancelInfo() }
onConfirmClick={ onClickToMoveCancel }
message={ msg }
buttonLabel={[t('common.cancel'), t('common.confirm')]}
/>
@@ -247,6 +251,14 @@ export const AllTransactionDetail = ({
>{t('transaction.cancelTransaction')}</button>
</div>
</motion.div>
{ !!cancelOn &&
<AllTransactionCancel
cancelOn={ cancelOn }
setCancelOn={ setCancelOn }
serviceCode={ serviceCode }
tid={ tid }
></AllTransactionCancel>
}
</>
);
};

4
src/pages/transaction/all-transaction/cancel-page.tsx
View File

@@ -29,6 +29,7 @@ export const AllTransactionCancelPage = () => {
const { t } = useTranslation();
const location = useLocation();
const userInfo = useStore.getState().UserStore.userInfo;
const userMid = useStore.getState().UserStore.mid;
const tid = location.state.tid;
const serviceCode = location.state.serviceCode;
@@ -73,7 +74,8 @@ export const AllTransactionCancelPage = () => {
const callCancelInfo = () => {
let params: AllTransactionCancelInfoParams = {
serviceCode: serviceCode,
tid: tid
tid: tid,
mid: userMid
};
allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
if(rs.debtPreventionCancelDisplayInfo !== null){