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-19 16:35:43 +09:00
parent b71a6bf729
commit 1601ad79e2
5 changed files with 309 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,9 +104,7 @@ export const FavoriteWrapper = ({
const makeFavoriteItems = () => { const makeFavoriteItems = () => {
let rs = []; let rs = [];
let cnt = favoriteItems.length; let cnt = favoriteItems.length;
if(usingType === 'home'){
cnt = (cnt > 4)? 4: cnt;
}
for(let i=0;i<cnt;i++){ for(let i=0;i<cnt;i++){
const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng
? favoriteItems[i]?.menuNameEng ? favoriteItems[i]?.menuNameEng

200
src/entities/payment/ui/card-commission-bottom-sheet.tsx
View File

@@ -10,6 +10,7 @@ export interface CardCommissionBottomSheetProps {
cardCommissionBottomSheetOn: boolean; cardCommissionBottomSheetOn: boolean;
setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void; setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
payType: number; payType: number;
itemKey: string;
settlementPeriod?: string; settlementPeriod?: string;
generalTabItems?: Array<GeneralTabItems>, generalTabItems?: Array<GeneralTabItems>,
installmentTabItems?: Array<InstallmentTabItems>, installmentTabItems?: Array<InstallmentTabItems>,
@@ -30,6 +31,7 @@ export const CardCommissionBottomSheet = ({
cardCommissionBottomSheetOn, cardCommissionBottomSheetOn,
setCardCommissionBottomSheetOn, setCardCommissionBottomSheetOn,
payType, payType,
itemKey,
settlementPeriod, settlementPeriod,
generalTabItems, generalTabItems,
installmentTabItems, installmentTabItems,
@@ -42,18 +44,59 @@ export const CardCommissionBottomSheet = ({
}: CardCommissionBottomSheetProps) => { }: CardCommissionBottomSheetProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const cardList = useStore.getState().CommonStore.creditCardList; const cardList = useStore.getState().CommonStore.creditCardList;
console.log(cardList);
let newCardList = cardList.filter((value, index) => value.code2 === 'pur');
const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL); const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL);
const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1); const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
const [leftTitle, setLeftTitle] = useState<string>('');
const [leftText, setLeftText] = useState<string>('');
const onClickToClose = () => { const onClickToClose = () => {
setCardCommissionBottomSheetOn(false); setCardCommissionBottomSheetOn(false);
}; };
const getItemList = (key?: CardCommissionTabKey) => {
let rs = [];
if(key === CardCommissionTabKey.GENERAL){
for(let i=0;i<newCardList.length;i++){
rs.push(
<div
key={`card-fee-row-${i}`}
className="card-fee-row"
>
<span>{ newCardList[i].desc1 }</span>
<span>2.000%</span>
</div>
);
}
}
return rs;
}
useEffect(() => { useEffect(() => {
// 탭 이동시 할일 // 탭 이동시 할일
}, [onTab]); }, [onTab]);
useEffect(() => {
if(!!itemKey){
if(itemKey === 'kakaoPay'){
setLeftTitle('구분');
setLeftText('카카오머니');
}
else if(itemKey === 'naverPay'){
setLeftTitle('할부개월');
setLeftText('네이버포인트');
}
else if(itemKey === 'tossPay'){
setLeftTitle('할부개원');
setLeftText('토스머니');
}
}
}, [itemKey]);
return ( return (
<> <>
{ cardCommissionBottomSheetOn && { cardCommissionBottomSheetOn &&
@@ -76,7 +119,7 @@ export const CardCommissionBottomSheet = ({
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt={t('common.close')} alt={t('common.close')}
onClick={ () => onClickToClose() } onClick={ onClickToClose }
/> />
</button> </button>
</div> </div>
@@ -109,79 +152,96 @@ export const CardCommissionBottomSheet = ({
>{t('payment.moneyPoint')}</button> >{t('payment.moneyPoint')}</button>
} }
</div> </div>
{ (onTab === CardCommissionTabKey.GENERAL) &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">{t('payment.cardCompany')}</span>
<span className="th-right">{t('payment.commission')}</span>
</div>
{ getItemList(CardCommissionTabKey.GENERAL) }
</div>
}
<div className="card-fee-box"> { (onTab === CardCommissionTabKey.NO_INTEREST) &&
<span className="label">{t('payment.cardCompany')}</span> <>
<div className="field wid-100"> <div className="card-fee-box">
<select <span className="label">{t('payment.cardCompany')}</span>
value={ selectedCard } <div className="field wid-100">
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) } <select
> value={ selectedCard }
{ onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
cardList.map((value, index) => ( >
<option {
key={ `card-list-${value.desc1}`} newCardList.map((value, index) => (
value={ value.desc1 } <option
>{ value.desc1 }</option> key={ `card-list-${value.desc1}`}
)) value={ value.desc1 }
} >{ value.desc1 }</option>
</select> ))
</div> }
</div> </select>
</div>
</div>
<div className="card-fee-list"> <div className="card-fee-list">
<div className="card-fee-list-header"> <div className="card-fee-list-header">
<span className="th-left">{t('payment.installmentMonths')}</span> <span className="th-left">{t('payment.installmentMonths')}</span>
<span className="th-right">{t('payment.commission')}</span> <span className="th-right">{t('payment.commission')}</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 2 })}</span> <span>{t('payment.months', { count: 2 })}</span>
<span>2.000%</span> <span>2.000%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 3 })}</span> <span>{t('payment.months', { count: 3 })}</span>
<span>3.100%</span> <span>3.100%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 4 })}</span> <span>{t('payment.months', { count: 4 })}</span>
<span>4.400%</span> <span>4.400%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 5 })}</span> <span>{t('payment.months', { count: 5 })}</span>
<span>5.200%</span> <span>5.200%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 6 })}</span> <span>{t('payment.months', { count: 6 })}</span>
<span>6.000%</span> <span>6.000%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 7 })}</span> <span>{t('payment.months', { count: 7 })}</span>
<span>6.600%</span> <span>6.600%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 8 })}</span> <span>{t('payment.months', { count: 8 })}</span>
<span>7.500%</span> <span>7.500%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 9 })}</span> <span>{t('payment.months', { count: 9 })}</span>
<span>8.000%</span> <span>8.000%</span>
</div> </div>
<div className="card-fee-row"> <div className="card-fee-row">
<span>{t('payment.months', { count: 10 })}</span> <span>{t('payment.months', { count: 10 })}</span>
<span>9.000%</span> <span>9.000%</span>
</div> </div>
</div> </div>
</>
}
{ (onTab === CardCommissionTabKey.MONEY_POINT) &&
<>
<div className="card-fee-list-header">
<span className="th-left">{ leftTitle }</span>
<span className="th-right">{t('payment.commission')}</span>
</div>
<div className="card-fee-row">
<span>{ leftText }</span>
<span>2.000%</span>
</div>
</>
}
</div> </div>
</div> </div>
{/*
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
disabled
>신청</button>
</div>
*/}
</motion.div> </motion.div>
</> </>
); );

7
src/entities/payment/ui/info-item.tsx
View File

@@ -9,6 +9,8 @@ export interface InfoItemProps {
payImage?: string; payImage?: string;
infoLink?: string; infoLink?: string;
payType?: number; payType?: number;
itemKey?: string;
setItemKey?: (itemKey: string) => void;
setPayType?: (payType: number) => void; setPayType?: (payType: number) => void;
setBottomSheetOn?: (bottomSheetOn: boolean) => void; setBottomSheetOn?: (bottomSheetOn: boolean) => void;
}; };
@@ -19,6 +21,8 @@ export const InfoItem = ({
payImage, payImage,
infoLink, infoLink,
payType, payType,
itemKey,
setItemKey,
setPayType, setPayType,
setBottomSheetOn setBottomSheetOn
}: InfoItemProps) => { }: InfoItemProps) => {
@@ -28,6 +32,9 @@ export const InfoItem = ({
if(setPayType && payType){ if(setPayType && payType){
setPayType(payType); setPayType(payType);
} }
if(setItemKey && itemKey){
setItemKey(itemKey)
}
if(setBottomSheetOn){ if(setBottomSheetOn){
setBottomSheetOn(true); setBottomSheetOn(true);
} }

132
src/entities/payment/ui/info-wrap.tsx
View File

@@ -35,6 +35,7 @@ import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mu
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { showAlert } from '@/widgets/show-alert'; import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib'; import { snackBar } from '@/shared/lib';
import { TransferCommissionBottomSheet } from './transfer-commission-bottom-sheet';
export const InfoWrap = () => { export const InfoWrap = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -49,12 +50,14 @@ export const InfoWrap = () => {
const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false); const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false); const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false); const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);
const [transferCommissionBottomSheetOn, setTransferCommissionBottomSheetOn] = useState<boolean>(false);
const [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard')); const [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard'));
const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>(); const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]); const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
const [payType, setPayType] = useState<number>(2); const [payType, setPayType] = useState<number>(2);
const [itemKey, setItemKey] = useState<string>('');
const [settlementPeriod, setSettlementPeriod] = useState<string>(); const [settlementPeriod, setSettlementPeriod] = useState<string>();
const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]); const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]); const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
@@ -78,30 +81,30 @@ export const InfoWrap = () => {
const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation(); const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
const list1 = [ const list1 = [
{payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2, itemKey: 'creditCard'},
{payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3, itemKey: 'kakaoPay'},
{payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3, itemKey: 'naverPay'},
{payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2, itemKey: 'samsungPay'},
{payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1, itemKey: 'accountTransfer'},
{payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1, itemKey: 'mobilePaymentFull'},
{payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1, itemKey: 'etc'},
{payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1, itemKey: 'etc'},
{payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1, itemKey: 'etc'},
{payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2, itemKey: 'samsungPayCard'},
{payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2, itemKey: 'applePay'},
{payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3, itemKey: 'tossPay'},
{payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2, itemKey: 'payco'},
{payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2, itemKey: 'livePay'},
{payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1, itemKey: ''},
{payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1, itemKey: ''},
{payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2, itemKey: 'lPay'},
{payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2, itemKey: 'payU'},
{payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2, itemKey: 'twLinePay'},
{payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3, itemKey: 'ssgPay'},
{payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2, itemKey: 'kBankPay'},
{payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1, itemKey: 'virtualAccount'},
{payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1, itemKey: 'etc'},
{payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1, itemKey: 'accountSimplePayment'},
]; ];
const list2 = [ const list2 = [
@@ -115,18 +118,36 @@ export const InfoWrap = () => {
let rs = []; let rs = [];
if(type === PaymentInfoItemType.Comission){ if(type === PaymentInfoItemType.Comission){
for(let i=0;i<list1.length;i++){ for(let i=0;i<list1.length;i++){
rs.push( let itemKey = list1[i]?.itemKey;
<InfoItem let payType = list1[i]?.payType;
key={ `comission-info-wrap-${i}` }
type={ type } let newBottomSheetOn;
payName={ list1[i]?.payName } if(payType === 1){
payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage } newBottomSheetOn = setTransferCommissionBottomSheetOn;
infoLink={ list1[i]?.infoLink } }
payType={ list1[i]?.payType } else if(payType === 2){
setPayType={ setPayType } newBottomSheetOn = setCardCommissionBottomSheetOn;
setBottomSheetOn={ setCardCommissionBottomSheetOn } }
></InfoItem> else if(payType === 3){
); newBottomSheetOn = setCardCommissionBottomSheetOn;
}
if(!!newBottomSheetOn){
rs.push(
<InfoItem
key={ `comission-info-wrap-${i}` }
type={ type }
payName={ list1[i]?.payName }
payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
infoLink={ list1[i]?.infoLink }
payType={ payType }
itemKey={ itemKey }
setItemKey={ setItemKey }
setPayType={ setPayType }
setBottomSheetOn={ newBottomSheetOn }
></InfoItem>
);
}
} }
} }
else if(type === PaymentInfoItemType.NoInterest){ else if(type === PaymentInfoItemType.NoInterest){
@@ -270,20 +291,31 @@ export const InfoWrap = () => {
{ getList(PaymentInfoItemType.NoInterest) } { getList(PaymentInfoItemType.NoInterest) }
</ul> </ul>
</div> </div>
<CardCommissionBottomSheet { !!cardCommissionBottomSheetOn &&
cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn } <CardCommissionBottomSheet
setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn } cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
payType={ payType } setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
settlementPeriod={ settlementPeriod } payType={ payType }
generalTabItems={ generalTabItems } itemKey={ itemKey }
installmentTabItems={ installmentTabItems } settlementPeriod={ settlementPeriod }
moneyPointTabItems= { moneyPointTabItems } generalTabItems={ generalTabItems }
feeRanges={ feeRanges } installmentTabItems={ installmentTabItems }
bankFees={ bankFees } moneyPointTabItems= { moneyPointTabItems }
paymentFees={ paymentFees } feeRanges={ feeRanges }
categoryFees={ categoryFees } bankFees={ bankFees }
feeRate={ feeRate } paymentFees={ paymentFees }
></CardCommissionBottomSheet> categoryFees={ categoryFees }
feeRate={ feeRate }
></CardCommissionBottomSheet>
}
{ !!transferCommissionBottomSheetOn &&
<TransferCommissionBottomSheet
itemKey={ itemKey }
transferCommissionBottomSheetOn={ transferCommissionBottomSheetOn }
setTransferCommissionBottomSheetOn={ setTransferCommissionBottomSheetOn }
></TransferCommissionBottomSheet>
}
<CreditCardListBottomSheet <CreditCardListBottomSheet
creditCardListBottomSheetOn={ creditCardListBottomSheetOn } creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn } setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }

113
src/entities/payment/ui/transfer-commission-bottom-sheet.tsx
View File

@@ -1,9 +1,25 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
export const TransferCommissionBottomSheet = () => { export interface TransferCommissionBottomSheetProps {
itemKey: string;
settlementPeriod?: string;
transferCommissionBottomSheetOn: boolean;
setTransferCommissionBottomSheetOn: (transferCommissionBottomSheetOn: boolean) => void;
};
export const TransferCommissionBottomSheet = ({
itemKey,
settlementPeriod,
transferCommissionBottomSheetOn,
setTransferCommissionBottomSheetOn
}: TransferCommissionBottomSheetProps) => {
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
const onClickToClose = () => {
setTransferCommissionBottomSheetOn(false);
};
return ( return (
<> <>
<div className="bg-dim"></div> <div className="bg-dim"></div>
@@ -18,35 +34,80 @@ export const TransferCommissionBottomSheet = () => {
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt={t('common.close')} alt={t('common.close')}
onClick={ onClickToClose }
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="fee-cycle"> <div className="bottomsheet-content">
<div className="desc dot">{t('payment.settlementPeriod')} : {t('payment.dailyPlus3Days')}</div> <div className="card-fee">
<div className="desc dot">{t('payment.commission')}</div> <div className="desc">{t('payment.settlementPeriod')} : { settlementPeriod }</div>
<div className="divider"></div> <div
<ul className="kv-list"> className="desc"
<li className="kv-row pl-10"> style={{ paddingBottom: 0 }}
<span className="k">{t('payment.paymentFeeMinimum')}</span> >수수료 :</div>
<span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span> { (itemKey === 'accountTransfer') &&
</li> <div className="card-fee-list">
<li className="kv-row pl-10"> <div className="card-fee-list-header">
<span className="k">{t('payment.paymentFeeFrom1Won')}</span> <span className="th-left">구간</span>
<span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span> <span className="th-right">수수료</span>
</li> </div>
<li className="kv-row pl-10"> <div className="card-fee-row">
<span className="k">{t('payment.cancellationFee')}</span> <span>&nbsp;</span>
<span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span> <span>&nbsp;</span>
</li> </div>
</ul> </div>
</div> }
{ (itemKey === 'virtualAccount') &&
<div className="bottomsheet-footer"> <div className="card-fee-list">
<button <div className="card-fee-list-header">
className="btn-50 btn-blue flex-1" <span className="th-left">은행</span>
type="button" <span className="th-right">수수료</span>
>{t('common.confirm')}</button> </div>
<div className="card-fee-row">
<span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</div>
}
{ (itemKey === 'livePay' || itemKey === 'kBankPay') &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">결제수수료</span>
<span className="th-right">최저수수료</span>
</div>
<div className="card-fee-row">
<span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</div>
}
{ (itemKey === 'mobilePaymentFull') &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">구분</span>
<span className="th-right">수수료</span>
</div>
<div className="card-fee-row">
<span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</div>
}
{ (itemKey === 'accountSimplePayment') &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">결제수수료</span>
<span className="th-right">취소수수료</span>
</div>
<div className="card-fee-row">
<span>최저수수료</span>
<span>1원~</span>
<span>1원~</span>
</div>
</div>
}
</div>
</div> </div>
</div> </div>
</> </>