Localize link-payment UI components
- Added linkPayment translation keys to en.json: - shippingHistory, pendingSend, all, incompleteActive - depositRequest, paymentComplete, paymentFailed, paymentStopped - applyRequest, noData - Localized link-payment-tab.tsx: - Tab button labels (shippingHistory, pendingSend) - Added useTranslation hook - Localized link-payment-history-wrap.tsx: - Payment status button group with function getPaymentResultBtnGroup(t) - Alt texts and aria-labels for filter and download buttons - Apply request button text - Added useTranslation hook - Localized link-payment-wait-send-wrap.tsx: - Alt texts and aria-labels for filter and download buttons - Apply request button text - Uses getProcessStatusBtnGroup(t) from constant file 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -15,17 +15,19 @@ import { useStore } from '@/shared/model/store';
|
||||
import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
|
||||
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const paymentResultBtnGroup = [
|
||||
{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
|
||||
{ name: '미완료/활성화', value: LinkPaymentPaymentStatus.ACTIVATE },
|
||||
{ name: '입금요청', value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
|
||||
{ name: '결제완료', value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
|
||||
{ name: '결제실패', value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
|
||||
{ name: '결제중단/비활성화', value: LinkPaymentPaymentStatus.INACTIVE },
|
||||
const getPaymentResultBtnGroup = (t: any) => [
|
||||
{ name: t('additionalService.linkPayment.all'), value: LinkPaymentPaymentStatus.ALL },
|
||||
{ name: t('additionalService.linkPayment.incompleteActive'), value: LinkPaymentPaymentStatus.ACTIVATE },
|
||||
{ name: t('additionalService.linkPayment.depositRequest'), value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
|
||||
{ name: t('additionalService.linkPayment.paymentComplete'), value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
|
||||
{ name: t('additionalService.linkPayment.paymentFailed'), value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
|
||||
{ name: t('additionalService.linkPayment.paymentStopped'), value: LinkPaymentPaymentStatus.INACTIVE },
|
||||
];
|
||||
|
||||
export const LinkPaymentHistoryWrap = () => {
|
||||
const { t } = useTranslation();
|
||||
const { navigate } = useNavigate();
|
||||
const userMid = useStore.getState().UserStore.mid;
|
||||
|
||||
@@ -191,19 +193,19 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
className="filter-btn">
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
alt={t('common.searchOptions')}
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
aria-label={t('common.download')}
|
||||
onClick={() => onClickToOpenEmailBottomSheet()}
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
alt={t('common.download')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -218,7 +220,7 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
paymentResultBtnGroup.map((value, index) => (
|
||||
getPaymentResultBtnGroup(t).map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
|
||||
@@ -240,7 +242,7 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigate()}
|
||||
>결제 신청</button>
|
||||
>{t('additionalService.linkPayment.applyRequest')}</button>
|
||||
</div>
|
||||
<LinkPaymentHistoryFilter
|
||||
filterOn={filterOn}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { LinkPaymentTabKeys, LinkPaymentTabProps } from '../../model/link-pay/types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const LinkPaymentTab = ({
|
||||
activeTab
|
||||
}: LinkPaymentTabProps) => {
|
||||
const { t } = useTranslation();
|
||||
const {navigate} = useNavigate();
|
||||
|
||||
const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
|
||||
@@ -21,14 +23,14 @@ export const LinkPaymentTab = ({
|
||||
return (
|
||||
<>
|
||||
<div className="subTab">
|
||||
<button
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
|
||||
>발송내역</button>
|
||||
<button
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
|
||||
>{t('additionalService.linkPayment.shippingHistory')}</button>
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
|
||||
>발송대기</button>
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
|
||||
>{t('additionalService.linkPayment.pendingSend')}</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -175,19 +175,19 @@ export const LinkPaymentWaitSendWrap = () => {
|
||||
className="filter-btn">
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
alt={t('common.searchOptions')}
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
aria-label={t('common.download')}
|
||||
onClick={() => onClickToOpenEmailBottomSheet()}
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
alt={t('common.download')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -223,7 +223,7 @@ export const LinkPaymentWaitSendWrap = () => {
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigate()}
|
||||
>결제 신청</button>
|
||||
>{t('additionalService.linkPayment.applyRequest')}</button>
|
||||
</div>
|
||||
<LinkPaymentWaitSendFilter
|
||||
filterOn={filterOn}
|
||||
|
||||
@@ -1013,7 +1013,17 @@
|
||||
"resend": "Resend",
|
||||
"delete": "Delete",
|
||||
"separateApprovalDetail": "Separate Approval Detail",
|
||||
"warning": "Warning"
|
||||
"warning": "Warning",
|
||||
"shippingHistory": "Shipping History",
|
||||
"pendingSend": "Pending Send",
|
||||
"all": "All",
|
||||
"incompleteActive": "Incomplete/Active",
|
||||
"depositRequest": "Deposit Request",
|
||||
"paymentComplete": "Payment Complete",
|
||||
"paymentFailed": "Payment Failed",
|
||||
"paymentStopped": "Payment Stopped/Inactive",
|
||||
"applyRequest": "Request",
|
||||
"noData": "No data available"
|
||||
},
|
||||
"keyIn": {
|
||||
"fullCancel": "Full Cancel",
|
||||
|
||||
Reference in New Issue
Block a user