335 lines
14 KiB
TypeScript
335 lines
14 KiB
TypeScript
import { ChangeEvent, useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
import { InfoItem } from './info-item';
|
|
import { CardCommissionBottomSheet } from './card-commission-bottom-sheet';
|
|
import { CreditCardListBottomSheet } from './credit-card-list-bottom-sheet';
|
|
import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
|
|
import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation';
|
|
import {
|
|
AccountTransferData,
|
|
BankFees,
|
|
CategoryFees,
|
|
FeeRanges,
|
|
GeneralTabItems,
|
|
InstallmentData,
|
|
InstallmentDetails,
|
|
InstallmentTabItems,
|
|
MobilePaymentData,
|
|
MoneyPointTabItems,
|
|
OtherPaymentData,
|
|
PaymentCardParams,
|
|
PaymentCardResponse,
|
|
PaymentFees,
|
|
PaymentInfoItemType,
|
|
PaymentInstallmentDetailParams,
|
|
PaymentInstallmentDetailResponse,
|
|
PaymentInstallmentParams,
|
|
PaymentInstallmentResponse,
|
|
PaymentNonCardParams,
|
|
PaymentNonCardResponse
|
|
} from '../model/types';
|
|
import { usePaymentCardMutation } from '../api/use-payment-card-mutation';
|
|
import { usePaymentNonCardMutation } from '../api/use-payment-non-card-mutation';
|
|
import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mutation';
|
|
import { useStore } from '@/shared/model/store';
|
|
import { showAlert } from '@/widgets/show-alert';
|
|
import { snackBar } from '@/shared/lib';
|
|
import { TransferCommissionBottomSheet } from './transfer-commission-bottom-sheet';
|
|
|
|
export const InfoWrap = () => {
|
|
const { t } = useTranslation();
|
|
const midOptions = useStore.getState().UserStore.selectOptionsMids;
|
|
const userMid = useStore.getState().UserStore.mid;
|
|
let midItem = midOptions.filter((value, index) => {
|
|
return value.value === userMid;
|
|
});
|
|
|
|
const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
|
|
|
|
const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
|
|
const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = 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 [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
|
|
const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
|
|
|
|
const [payType, setPayType] = useState<number>(2);
|
|
const [itemKey, setItemKey] = useState<string>('');
|
|
const [cardSettlementPeriod, setCardSettlementPeriod] = useState<string>();
|
|
const [nonCardSettlementPeriod, setNonCardSettlementPeriod] = useState<string>();
|
|
const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
|
|
const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
|
|
const [moneyPointTabItems, setMoneyPointTabItems] = useState<Array<MoneyPointTabItems>>([]);
|
|
|
|
const [feeRanges, setFeeRanges] = useState<Array<FeeRanges>>([]);
|
|
const [bankFees, setBankFees] = useState<Array<BankFees>>([]);
|
|
const [paymentFees, setPaymentFees] = useState<Array<PaymentFees>>([]);
|
|
const [categoryFees, setCategoryFees] = useState<Array<CategoryFees>>([]);
|
|
const [feeRate, setFeeRate] = useState<number>(0);
|
|
|
|
const [accountTransferData, setAccountTransferData] = useState<AccountTransferData>();
|
|
const [mobilePaymentData, setMobilePaymentData] = useState<MobilePaymentData>();
|
|
const [otherPaymentData, setOtherPaymentData] = useState<OtherPaymentData>();
|
|
|
|
const [installmentData, setInstallmentData] = useState<Array<InstallmentData>>();
|
|
|
|
const { mutateAsync: paymentCard } = usePaymentCardMutation();
|
|
const { mutateAsync: paymentNonCard } = usePaymentNonCardMutation();
|
|
const { mutateAsync: paymentInstallment } = usePaymentInstallmentMutation();
|
|
const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
|
|
|
|
const list1 = [
|
|
{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, itemKey: 'kakaoPay'},
|
|
{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, itemKey: 'samsungPay'},
|
|
{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, itemKey: 'mobilePaymentFull'},
|
|
{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, itemKey: 'etc'},
|
|
{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, itemKey: 'samsungPayCard'},
|
|
{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, itemKey: 'tossPay'},
|
|
{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, itemKey: 'livePay'},
|
|
{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, itemKey: ''},
|
|
{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, itemKey: 'payU'},
|
|
{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, itemKey: 'ssgPay'},
|
|
{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, itemKey: 'virtualAccount'},
|
|
{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, itemKey: 'accountSimplePayment'},
|
|
];
|
|
|
|
const list2 = [
|
|
{payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: ''},
|
|
{payName: t('payment.paymentMethods.skPay'), payImage: 'pay_20.svg', infoLink: ''},
|
|
{payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: ''},
|
|
{payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_04.svg', infoLink: ''},
|
|
];
|
|
|
|
const getList = (type: PaymentInfoItemType) => {
|
|
let rs = [];
|
|
if(type === PaymentInfoItemType.Comission){
|
|
for(let i=0;i<list1.length;i++){
|
|
let itemKey = list1[i]?.itemKey;
|
|
let payType = list1[i]?.payType;
|
|
|
|
let newBottomSheetOn;
|
|
if(payType === 1){
|
|
newBottomSheetOn = setTransferCommissionBottomSheetOn;
|
|
}
|
|
else if(payType === 2){
|
|
newBottomSheetOn = setCardCommissionBottomSheetOn;
|
|
}
|
|
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){
|
|
for(let i=0;i<list2.length;i++){
|
|
rs.push(
|
|
<InfoItem
|
|
key={ `nointerest-info-wrap-${i}` }
|
|
type={ type }
|
|
payName={ list2[i]?.payName }
|
|
payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
|
|
infoLink={ list2[i]?.infoLink }
|
|
setBottomSheetOn={ setNoInterestInfoBottomSheetOn }
|
|
></InfoItem>
|
|
);
|
|
}
|
|
}
|
|
|
|
return rs;
|
|
};
|
|
|
|
const callPaymentCard = () => {
|
|
let params: PaymentCardParams = {
|
|
mid: mid,
|
|
paymentMethod: 'CREDIT_CARD'
|
|
};
|
|
|
|
paymentCard(params).then((rs: PaymentCardResponse) => {
|
|
setCardSettlementPeriod(rs.settlementPeriod);
|
|
setGeneralTabItems(rs.generalTab.items);
|
|
setInstallmentTabItems(rs.installmentTab.items);
|
|
setMoneyPointTabItems(rs.moneyPointTab.items);
|
|
}).catch((e: any) => {
|
|
if(e.response?.data?.error?.message){
|
|
snackBar(e.response?.data?.error?.message);
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
const callPaymentNonCard = () => {
|
|
let params: PaymentNonCardParams = {
|
|
mid: mid,
|
|
paymentMethod: 'ACCOUNT_TRANSFER'
|
|
};
|
|
|
|
paymentNonCard(params).then((rs: PaymentNonCardResponse) => {
|
|
setNonCardSettlementPeriod(rs.settlementPeriod);
|
|
setFeeRanges(rs.accountTransferData.feeRanges);
|
|
setBankFees(rs.accountTransferData.bankFees);
|
|
setPaymentFees(rs.mobilePaymentData.paymentFees);
|
|
setCategoryFees(rs.mobilePaymentData.categoryFees);
|
|
setFeeRate(rs.otherPaymentData.feeRate);
|
|
}).catch((e: any) => {
|
|
if(e.response?.data?.error?.message){
|
|
snackBar(e.response?.data?.error?.message);
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
const callPaymentIntallment = () => {
|
|
let params: PaymentInstallmentParams = {
|
|
mid: mid,
|
|
paymentMethod: 'CREDIT_CARD'
|
|
};
|
|
|
|
paymentInstallment(params).then((rs: PaymentInstallmentResponse) => {
|
|
console.log(rs);
|
|
setInstallmentData(rs.installmentData);
|
|
}).catch((e: any) => {
|
|
if(e.response?.data?.error?.message){
|
|
snackBar(e.response?.data?.error?.message);
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
|
|
const callPaymentIntallmentDetail = (selectedCardCompany: string) => {
|
|
let params: PaymentInstallmentDetailParams = {
|
|
mid: mid,
|
|
cardCompany: selectedCardCompany
|
|
};
|
|
|
|
paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
|
|
console.log(rs);
|
|
if(rs.cardCompany){
|
|
setCardCompany(rs.cardCompany);
|
|
}
|
|
if(rs.cardCompanyOptions){
|
|
setCardCompanyOptions(rs.cardCompanyOptions);
|
|
}
|
|
if(rs.installmentDetails){
|
|
setInstallmentDetails(rs.installmentDetails);
|
|
}
|
|
}).catch((e: any) => {
|
|
if(e.response?.data?.error?.message){
|
|
snackBar(e.response?.data?.error?.message);
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
const changeToCardCompany = (cardCompany: string) => {
|
|
setCardCompany(cardCompany);
|
|
callPaymentIntallmentDetail(cardCompany);
|
|
};
|
|
useEffect(() => {
|
|
if(!!mid){
|
|
callPaymentCard();
|
|
callPaymentNonCard();
|
|
callPaymentIntallment();
|
|
callPaymentIntallmentDetail(cardCompany);
|
|
}
|
|
}, [mid]);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="input-wrapper top-select mt-30"
|
|
style={{ paddingBottom: 0}}
|
|
>
|
|
<select
|
|
value={ mid }
|
|
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
|
|
>
|
|
{
|
|
midOptions.map((value, index) => (
|
|
<option
|
|
key={ value.value }
|
|
value={ value.value }
|
|
>{ value.name }</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
<div className="ing-list">
|
|
<div className="ing-title">{t('payment.serviceUsageCommissionAndSettlement')}</div>
|
|
<ul className="ing-card-list">
|
|
{ getList(PaymentInfoItemType.Comission) }
|
|
</ul>
|
|
|
|
<div className="ing-title">{t('payment.merchantNoInterestInfo')}</div>
|
|
<ul className="ing-card-list">
|
|
{ getList(PaymentInfoItemType.NoInterest) }
|
|
</ul>
|
|
</div>
|
|
{ !!cardCommissionBottomSheetOn &&
|
|
<CardCommissionBottomSheet
|
|
cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
|
|
setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
|
|
payType={ payType }
|
|
itemKey={ itemKey }
|
|
settlementPeriod={ cardSettlementPeriod }
|
|
generalTabItems={ generalTabItems }
|
|
installmentTabItems={ installmentTabItems }
|
|
moneyPointTabItems= { moneyPointTabItems }
|
|
feeRanges={ feeRanges }
|
|
bankFees={ bankFees }
|
|
paymentFees={ paymentFees }
|
|
categoryFees={ categoryFees }
|
|
feeRate={ feeRate }
|
|
></CardCommissionBottomSheet>
|
|
}
|
|
{ !!transferCommissionBottomSheetOn &&
|
|
<TransferCommissionBottomSheet
|
|
itemKey={ itemKey }
|
|
settlementPeriod={ nonCardSettlementPeriod }
|
|
transferCommissionBottomSheetOn={ transferCommissionBottomSheetOn }
|
|
setTransferCommissionBottomSheetOn={ setTransferCommissionBottomSheetOn }
|
|
></TransferCommissionBottomSheet>
|
|
}
|
|
|
|
<CreditCardListBottomSheet
|
|
creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
|
|
setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }
|
|
></CreditCardListBottomSheet>
|
|
<NoInterestInfoBottomSheet
|
|
noInterestInfoBottomSheetOn={ noInterestInfoBottomSheetOn }
|
|
setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
|
|
cardCompany={ cardCompany }
|
|
cardCompanyOptions={ cardCompanyOptions }
|
|
installmentDetails={ installmentDetails }
|
|
changeToCardCompany={ changeToCardCompany }
|
|
></NoInterestInfoBottomSheet>
|
|
</>
|
|
);
|
|
}; |