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 { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
|
||||||
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
||||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
const paymentResultBtnGroup = [
|
const getPaymentResultBtnGroup = (t: any) => [
|
||||||
{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
|
{ name: t('additionalService.linkPayment.all'), value: LinkPaymentPaymentStatus.ALL },
|
||||||
{ name: '미완료/활성화', value: LinkPaymentPaymentStatus.ACTIVATE },
|
{ name: t('additionalService.linkPayment.incompleteActive'), value: LinkPaymentPaymentStatus.ACTIVATE },
|
||||||
{ name: '입금요청', value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
|
{ name: t('additionalService.linkPayment.depositRequest'), value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
|
||||||
{ name: '결제완료', value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
|
{ name: t('additionalService.linkPayment.paymentComplete'), value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
|
||||||
{ name: '결제실패', value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
|
{ name: t('additionalService.linkPayment.paymentFailed'), value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
|
||||||
{ name: '결제중단/비활성화', value: LinkPaymentPaymentStatus.INACTIVE },
|
{ name: t('additionalService.linkPayment.paymentStopped'), value: LinkPaymentPaymentStatus.INACTIVE },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const LinkPaymentHistoryWrap = () => {
|
export const LinkPaymentHistoryWrap = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
const userMid = useStore.getState().UserStore.mid;
|
const userMid = useStore.getState().UserStore.mid;
|
||||||
|
|
||||||
@@ -191,19 +193,19 @@ export const LinkPaymentHistoryWrap = () => {
|
|||||||
className="filter-btn">
|
className="filter-btn">
|
||||||
<img
|
<img
|
||||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||||
alt="검색옵션"
|
alt={t('common.searchOptions')}
|
||||||
onClick={() => onClickToOpenFilter()}
|
onClick={() => onClickToOpenFilter()}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
className="download-btn"
|
className="download-btn"
|
||||||
aria-label="다운로드"
|
aria-label={t('common.download')}
|
||||||
onClick={() => onClickToOpenEmailBottomSheet()}
|
onClick={() => onClickToOpenEmailBottomSheet()}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||||
alt="다운로드"
|
alt={t('common.download')}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -218,7 +220,7 @@ export const LinkPaymentHistoryWrap = () => {
|
|||||||
<div className="excrow">
|
<div className="excrow">
|
||||||
<div className="full-menu-keywords no-padding">
|
<div className="full-menu-keywords no-padding">
|
||||||
{
|
{
|
||||||
paymentResultBtnGroup.map((value, index) => (
|
getPaymentResultBtnGroup(t).map((value, index) => (
|
||||||
<span
|
<span
|
||||||
key={`key-service-code=${index}`}
|
key={`key-service-code=${index}`}
|
||||||
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
|
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
|
||||||
@@ -240,7 +242,7 @@ export const LinkPaymentHistoryWrap = () => {
|
|||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
onClick={() => onClickToNavigate()}
|
onClick={() => onClickToNavigate()}
|
||||||
>결제 신청</button>
|
>{t('additionalService.linkPayment.applyRequest')}</button>
|
||||||
</div>
|
</div>
|
||||||
<LinkPaymentHistoryFilter
|
<LinkPaymentHistoryFilter
|
||||||
filterOn={filterOn}
|
filterOn={filterOn}
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
import { PATHS } from '@/shared/constants/paths';
|
import { PATHS } from '@/shared/constants/paths';
|
||||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||||
import { LinkPaymentTabKeys, LinkPaymentTabProps } from '../../model/link-pay/types';
|
import { LinkPaymentTabKeys, LinkPaymentTabProps } from '../../model/link-pay/types';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
export const LinkPaymentTab = ({
|
export const LinkPaymentTab = ({
|
||||||
activeTab
|
activeTab
|
||||||
}: LinkPaymentTabProps) => {
|
}: LinkPaymentTabProps) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const {navigate} = useNavigate();
|
const {navigate} = useNavigate();
|
||||||
|
|
||||||
const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
|
const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
|
||||||
@@ -24,11 +26,11 @@ export const LinkPaymentTab = ({
|
|||||||
<button
|
<button
|
||||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
|
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
|
||||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
|
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
|
||||||
>발송내역</button>
|
>{t('additionalService.linkPayment.shippingHistory')}</button>
|
||||||
<button
|
<button
|
||||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
|
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
|
||||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
|
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
|
||||||
>발송대기</button>
|
>{t('additionalService.linkPayment.pendingSend')}</button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -175,19 +175,19 @@ export const LinkPaymentWaitSendWrap = () => {
|
|||||||
className="filter-btn">
|
className="filter-btn">
|
||||||
<img
|
<img
|
||||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||||
alt="검색옵션"
|
alt={t('common.searchOptions')}
|
||||||
onClick={() => onClickToOpenFilter()}
|
onClick={() => onClickToOpenFilter()}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
className="download-btn"
|
className="download-btn"
|
||||||
aria-label="다운로드"
|
aria-label={t('common.download')}
|
||||||
onClick={() => onClickToOpenEmailBottomSheet()}
|
onClick={() => onClickToOpenEmailBottomSheet()}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||||
alt="다운로드"
|
alt={t('common.download')}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -223,7 +223,7 @@ export const LinkPaymentWaitSendWrap = () => {
|
|||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
onClick={() => onClickToNavigate()}
|
onClick={() => onClickToNavigate()}
|
||||||
>결제 신청</button>
|
>{t('additionalService.linkPayment.applyRequest')}</button>
|
||||||
</div>
|
</div>
|
||||||
<LinkPaymentWaitSendFilter
|
<LinkPaymentWaitSendFilter
|
||||||
filterOn={filterOn}
|
filterOn={filterOn}
|
||||||
|
|||||||
@@ -1013,7 +1013,17 @@
|
|||||||
"resend": "Resend",
|
"resend": "Resend",
|
||||||
"delete": "Delete",
|
"delete": "Delete",
|
||||||
"separateApprovalDetail": "Separate Approval Detail",
|
"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": {
|
"keyIn": {
|
||||||
"fullCancel": "Full Cancel",
|
"fullCancel": "Full Cancel",
|
||||||
|
|||||||
Reference in New Issue
Block a user