TEAMCACQ-25379: добавлена вкладка История операций для СБП

This commit is contained in:
Фадеев Илья
2026-01-21 19:01:23 +04:00
parent 9a17063ed9
commit bd3f1867d2
26 changed files with 527 additions and 63 deletions
@@ -0,0 +1,102 @@
import { Text } from '@fractal-ui/styling';
import { Cell, CELL_TYPE } from '@fractal-ui/table';
import { documentStatusTypeToBadgeType } from '../lib';
import type { TransactionsHistory } from '../model';
import { SBP_OPERATIONS_HISTORY_FIELDS, TRANSACTIONS_HISTORY_STATUS, TRANSACTIONS_HISTORY_TYPE } from '../model';
import { LOCALIZATION } from './localization';
const TRANSACTION_REQUEST_TYPE_OPTIONS = {
[TRANSACTIONS_HISTORY_TYPE.PAYMENT_BACK]: LOCALIZATION.RETURN_TEXT,
[TRANSACTIONS_HISTORY_TYPE.PAYOUT_FROM_MERCHANT]: LOCALIZATION.TRANSFER_TEXT,
[TRANSACTIONS_HISTORY_TYPE.INCOMING_PAYMENT]: LOCALIZATION.INCOMING_PAYMENT,
};
const TRANSACTION_REQUEST_CLIENT_STATUS_LABEL = {
[TRANSACTIONS_HISTORY_STATUS.IN_PROGRESS]: LOCALIZATION[TRANSACTIONS_HISTORY_STATUS.IN_PROGRESS],
[TRANSACTIONS_HISTORY_STATUS.CANCELLED]: LOCALIZATION[TRANSACTIONS_HISTORY_STATUS.CANCELLED],
[TRANSACTIONS_HISTORY_STATUS.PERFORMED]: LOCALIZATION[TRANSACTIONS_HISTORY_STATUS.PERFORMED],
[TRANSACTIONS_HISTORY_STATUS.DRAFT]: LOCALIZATION[TRANSACTIONS_HISTORY_STATUS.DRAFT],
};
const OPERATIONS_HISTORY_COLUMNS = [
{
id: SBP_OPERATIONS_HISTORY_FIELDS.AMOUNT,
label: LOCALIZATION[SBP_OPERATIONS_HISTORY_FIELDS.AMOUNT],
name: SBP_OPERATIONS_HISTORY_FIELDS.AMOUNT,
headerType: 'string',
Cell({ amount }: TransactionsHistory) {
return <Cell cellName={SBP_OPERATIONS_HISTORY_FIELDS.AMOUNT} cellType={CELL_TYPE.STRING} text={amount?.value} />;
},
hasSort: true,
},
{
id: SBP_OPERATIONS_HISTORY_FIELDS.DOC_DATE,
label: LOCALIZATION[SBP_OPERATIONS_HISTORY_FIELDS.DOC_DATE],
name: SBP_OPERATIONS_HISTORY_FIELDS.DOC_DATE,
headerType: 'string',
Cell({ transactionTime }: TransactionsHistory) {
return (
<Cell
cellName={SBP_OPERATIONS_HISTORY_FIELDS.DOC_DATE}
cellType={CELL_TYPE.STRING}
subText={transactionTime.toDateString()}
text={transactionTime.toDateString()}
/>
);
},
hasSort: true,
defaultCanSort: true,
sortDescFirst: true,
width: 100,
},
{
id: SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT_NAME,
label: LOCALIZATION[SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT_NAME],
name: SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT_NAME,
headerType: 'string',
Cell({ merchant, isB2b }: TransactionsHistory) {
return (
<Cell
cellName={SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT_ID}
cellType={CELL_TYPE.STRING}
subText={isB2b ? merchant.id : ''}
text={merchant?.name}
/>
);
},
hasSort: false,
},
{
id: SBP_OPERATIONS_HISTORY_FIELDS.DOC_TYPE,
label: LOCALIZATION[SBP_OPERATIONS_HISTORY_FIELDS.DOC_TYPE],
name: SBP_OPERATIONS_HISTORY_FIELDS.DOC_TYPE,
headerType: 'string',
Cell({ transactionType }: TransactionsHistory) {
return (
<Cell
cellName={SBP_OPERATIONS_HISTORY_FIELDS.DOC_TYPE}
cellType={CELL_TYPE.STRING}
text={TRANSACTION_REQUEST_TYPE_OPTIONS[transactionType]}
/>
);
},
hasSort: true,
width: 130,
},
{
id: SBP_OPERATIONS_HISTORY_FIELDS.STATUS,
label: LOCALIZATION[SBP_OPERATIONS_HISTORY_FIELDS.STATUS],
name: SBP_OPERATIONS_HISTORY_FIELDS.STATUS,
headerType: 'string',
Cell({ status }: { status: TRANSACTIONS_HISTORY_STATUS }) {
return (
<Cell badgeType={documentStatusTypeToBadgeType(status)} cellName={SBP_OPERATIONS_HISTORY_FIELDS.STATUS} cellType={CELL_TYPE.STATUS}>
<Text.P3Short>{TRANSACTION_REQUEST_CLIENT_STATUS_LABEL[status]}</Text.P3Short>
</Cell>
);
},
hasSort: true,
},
];
export { OPERATIONS_HISTORY_COLUMNS, TRANSACTION_REQUEST_TYPE_OPTIONS };
@@ -0,0 +1,3 @@
export * from './constants';
export * from './mocks';
export * from './localization';
@@ -0,0 +1,38 @@
import { SBP_OPERATIONS_HISTORY_FIELDS } from '../model';
import { TRANSACTION_REQUEST_CLIENT_STATUS } from '@/shared/models';
const LOCALIZATION = {
[TRANSACTION_REQUEST_CLIENT_STATUS.DRAFT]: 'Черновик',
[SBP_OPERATIONS_HISTORY_FIELDS.DOC_TYPE]: 'Операция',
[SBP_OPERATIONS_HISTORY_FIELDS.DOC_DATE]: 'Дата',
[SBP_OPERATIONS_HISTORY_FIELDS.CONTRACTOR]: 'Контрагент',
[SBP_OPERATIONS_HISTORY_FIELDS.CONTRACTOR_BANK]: 'Банк контрагента',
[SBP_OPERATIONS_HISTORY_FIELDS.AMOUNT]: 'Сумма',
[SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT_ID]: 'Мерчант',
[SBP_OPERATIONS_HISTORY_FIELDS.STATUS]: 'Статус',
[SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT_NAME]: 'Наименование мерчанта',
PERFORMED: 'Исполнен',
CANCELLED: 'Отменён',
IN_PROGRESS: 'В обработке',
EXPANDED_ROW_RECIPIENT_ACCOUNT: 'Счёт получателя',
EXPANDED_ROW_SENDER_ACCOUNT: 'Счёт отправителя',
EXPANDED_ROW_CONTRACTOR_NAME: 'Иия контрагента',
EXPANDED_ROW_CONTRACTOR_ADDRESS: 'Адрес контрагента',
EXPANDED_ROW_CONTRACTOR_BANK: 'Банк контрагента',
EXPANDED_ROW_PAYMENT_PURPOSE: 'Назначение платежа',
EXPANDED_ROW_TRANSACTION_DATE: 'Дата входящей операции',
EXPANDED_ROW_TRANSACTION_AMOUNT: 'Сумма входящей операции',
EXPANDED_ROW_TRANSACTION_COMMISSION: 'Комиссия',
EXPANDED_ROW_TRANSACTION_TRANSACTION_ID: 'ID транзакции',
EXPANDED_ROW_TRANSACTION_QR_ID: 'ID QR-кода',
EXPANDED_ROW_TRANSACTION_INCOME_CODE: 'Код вида дохода',
EXPANDED_ROW_TRANSACTION_BIC: 'БИК банка',
EXPANDED_ROW_TRANSACTION_AGENT: 'Транзакция при участии Агента ТСП',
RETURN_TEXT: 'Возврат',
TRANSFER_TEXT: 'Перевод',
INCOMING_PAYMENT: 'Входящий платёж',
INN_TEXT: 'ИНН',
BIC_TEXT: 'БИК',
};
export { LOCALIZATION };
@@ -0,0 +1,77 @@
import type { TransactionsHistory } from '../model';
import {
SBP_OPERATIONS_HISTORY_FIELDS,
TRANSACTIONS_HISTORY_CONTRACTOR_TYPE,
TRANSACTIONS_HISTORY_STATUS,
TRANSACTIONS_HISTORY_TYPE,
} from '../model';
const OUTGOING_PAYMENTS_DATA: TransactionsHistory[] = [
{
[SBP_OPERATIONS_HISTORY_FIELDS.AMOUNT]: {
value: '10 000 000,00 ₽',
vat: true,
commissionValue: '500',
vatValue: '22',
},
[SBP_OPERATIONS_HISTORY_FIELDS.CONTRACTOR]: {
contractorBank: {
id: '1',
name: 'ПАО «Сбер Банк»',
},
contractorType: TRANSACTIONS_HISTORY_CONTRACTOR_TYPE.RECIPIENT,
},
[SBP_OPERATIONS_HISTORY_FIELDS.STATUS]: TRANSACTIONS_HISTORY_STATUS.PERFORMED,
[SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT]: {
id: '1',
name: 'Пётр Сергеевич И.',
inn: '121212121212',
},
isB2b: true,
[SBP_OPERATIONS_HISTORY_FIELDS.ACCOUNT]: '111222333',
[SBP_OPERATIONS_HISTORY_FIELDS.PAYMENT_PURPOSE]: 'PURCHASE',
[SBP_OPERATIONS_HISTORY_FIELDS.TRANSACTION_ID]: '12121212121323fdfdfd',
[SBP_OPERATIONS_HISTORY_FIELDS.QR_ID]: '1212wsdf4545454',
id: '1',
b2cRequestId: '123321',
clientId: '3332222111',
transactionTime: new Date(),
transactionType: TRANSACTIONS_HISTORY_TYPE.INCOMING_PAYMENT,
fpMessageId: '000999000',
},
{
[SBP_OPERATIONS_HISTORY_FIELDS.AMOUNT]: {
value: '15 000 000,00 ₽',
vat: true,
commissionValue: '500',
vatValue: '22',
},
[SBP_OPERATIONS_HISTORY_FIELDS.CONTRACTOR]: {
contractorBank: {
id: '2',
name: 'АО «Длинное название банка Российской Федерации»',
},
contractorType: TRANSACTIONS_HISTORY_CONTRACTOR_TYPE.SENDER,
},
[SBP_OPERATIONS_HISTORY_FIELDS.STATUS]: TRANSACTIONS_HISTORY_STATUS.IN_PROGRESS,
[SBP_OPERATIONS_HISTORY_FIELDS.MERCHANT]: {
id: '2',
name: 'Пётр Сергеевич А.',
inn: '777777777',
},
isB2b: false,
[SBP_OPERATIONS_HISTORY_FIELDS.ACCOUNT]: '5656564545',
[SBP_OPERATIONS_HISTORY_FIELDS.PAYMENT_PURPOSE]: 'PURCHASE',
[SBP_OPERATIONS_HISTORY_FIELDS.TRANSACTION_ID]: '3423213357698990',
[SBP_OPERATIONS_HISTORY_FIELDS.QR_ID]: '345787987',
id: '2',
b2cRequestId: '4567898765',
clientId: '22223333300004999',
transactionTime: new Date(),
transactionType: TRANSACTIONS_HISTORY_TYPE.PAYMENT_BACK,
fpMessageId: '34342323434',
agentId: '11111009922',
},
];
export { OUTGOING_PAYMENTS_DATA };
@@ -0,0 +1 @@
export { SbpOperationsHistory } from './ui';
@@ -0,0 +1 @@
export * from './utils';
@@ -0,0 +1,20 @@
import type { BadgeType } from '@fractal-ui/extended';
import { TRANSACTIONS_HISTORY_STATUS } from '../model';
import { TRANSACTION_BADGE_STATUS } from '@/shared/models';
const documentStatusTypeToBadgeType = (status: TRANSACTIONS_HISTORY_STATUS): BadgeType => {
switch (status) {
case TRANSACTIONS_HISTORY_STATUS.DRAFT:
return TRANSACTION_BADGE_STATUS.INFO;
case TRANSACTIONS_HISTORY_STATUS.PERFORMED:
return TRANSACTION_BADGE_STATUS.SUCCESS;
case TRANSACTIONS_HISTORY_STATUS.CANCELLED:
return TRANSACTION_BADGE_STATUS.ERROR;
case TRANSACTIONS_HISTORY_STATUS.IN_PROGRESS:
return TRANSACTION_BADGE_STATUS.WARNING;
default:
return TRANSACTION_BADGE_STATUS.SYSTEM;
}
};
export { documentStatusTypeToBadgeType };
@@ -0,0 +1 @@
export * from './types';
@@ -0,0 +1,105 @@
import type { Bank, Merchant } from '@/shared/models';
enum SBP_OPERATIONS_HISTORY_FIELDS {
DOC_TYPE = 'type',
DOC_DATE = 'docDate',
CONTRACTOR = 'contractor',
AMOUNT = 'amount',
MERCHANT_ID = 'merchantId',
MERCHANT_NAME = 'merchantName',
STATUS = 'status',
IS_B2B = 'isB2b',
MERCHANT = 'merchant',
CONTRACTOR_BANK = 'contractorBank',
ACCOUNT = 'account',
PAYMENT_PURPOSE = 'paymentPurpose',
TRANSACTION_ID = 'transactionId',
QR_ID = 'qrId',
B2C_REQUEST_ID = 'b2cRequestId',
REQUEST_ID = 'requestId',
CLIENT_ID = 'clientId',
TRANSACTION_TIME = 'transactionTime',
TRANSACTION_TYPE = 'transactionType',
QRC_ENTITY_EXIST = 'qrcEntityExists',
FP_MESSAGE_ID = 'fpMessageId',
ORIG_TRANSACTION_ID = 'origTransactionId',
AGENT_ID = 'agentId',
}
enum TRANSACTION_DOCUMENT_TYPE {
TRANSFER = 'TRANSFER',
RETURN = 'RETURN',
INCOMING_PAYMENT = 'INCOMING_PAYMENT',
}
interface AmountData {
value?: string;
vatValue?: string;
noAmountQrc?: boolean;
vat?: boolean;
commissionValue?: string;
}
enum TRANSACTIONS_HISTORY_TYPE {
INCOMING_PAYMENT = 'Входящий платеж',
PAYOUT_FROM_MERCHANT = 'Выплата от ТСП',
PAYMENT_BACK = 'Возврат платежа',
}
enum TRANSACTIONS_HISTORY_STATUS {
DRAFT = 'DRAFT',
IN_PROGRESS = 'IN_PROGRESS',
PERFORMED = 'PERFORMED',
CANCELLED = 'CANCELLED',
}
enum TRANSACTIONS_HISTORY_CONTRACTOR_TYPE {
SENDER = 'SENDER',
RECIPIENT = 'RECIPIENT',
}
interface ITransactionsHistoryContractorDocument {
contractorPhone?: string;
contractorPam?: string;
contractorType: TRANSACTIONS_HISTORY_CONTRACTOR_TYPE;
contractorBank: Partial<Omit<Bank, 'bic'>>;
contractorAccount?: string;
contractorName?: string;
contractorInn?: string;
contractorBic?: string;
}
interface TransactionsHistory {
id: string;
amount?: AmountData;
b2cRequestId: string;
requestId?: string;
clientId: string;
transactionId: string;
transactionTime: Date;
transactionType: TRANSACTIONS_HISTORY_TYPE;
status: TRANSACTIONS_HISTORY_STATUS;
merchant: Omit<Merchant, 'address'>;
account?: string;
contractor?: ITransactionsHistoryContractorDocument;
qrId?: string;
qrcEntityExists?: boolean;
fpMessageId: string;
origTransactionId?: string;
paymentPurpose?: string;
isB2b: boolean;
agentId?: string;
}
interface OperationsHistoryExpandedRowProps {
row: TransactionsHistory;
}
export {
SBP_OPERATIONS_HISTORY_FIELDS,
TRANSACTION_DOCUMENT_TYPE,
TRANSACTIONS_HISTORY_TYPE,
TRANSACTIONS_HISTORY_STATUS,
TRANSACTIONS_HISTORY_CONTRACTOR_TYPE,
};
export type { TransactionsHistory, OperationsHistoryExpandedRowProps };
@@ -0,0 +1,19 @@
import styled from '@emotion/styled';
import { TAB_CONTAINER_FIXED_HEIGHT } from '@/shared/constants';
const SbpOperationsHistoryLayout = styled.div(({ theme }) => ({
backgroundColor: theme.colors.bg.primary,
display: 'flex',
flexDirection: 'column',
borderRadius: '16px',
height: TAB_CONTAINER_FIXED_HEIGHT,
}));
const SbpOperationsHistoryExpandedRowLayout = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 8px;
`;
export { SbpOperationsHistoryLayout, SbpOperationsHistoryExpandedRowLayout };
@@ -0,0 +1,21 @@
import React from 'react';
import { OPERATIONS_HISTORY_COLUMNS, OUTGOING_PAYMENTS_DATA } from '../constants';
import * as S from './SbpOperationsHistory.styles';
import { OutgoingPaymentExpandedRow } from './SbpOperationsHistoryExpandedRow';
import { FractalTable, TableWrapper } from '@/shared/ui';
const SbpOperationsHistory = () => (
<S.SbpOperationsHistoryLayout>
<TableWrapper data-testid="operations-history-table" isEmpty={false} isLoading={false}>
<FractalTable
withSettings
columns={OPERATIONS_HISTORY_COLUMNS}
data={OUTGOING_PAYMENTS_DATA}
expandedRowComponent={OutgoingPaymentExpandedRow}
isLoading={false}
/>
</TableWrapper>
</S.SbpOperationsHistoryLayout>
);
export { SbpOperationsHistory };
@@ -0,0 +1,28 @@
import React from 'react';
import { LOCALIZATION } from '../constants';
import { TRANSACTIONS_HISTORY_TYPE, type OperationsHistoryExpandedRowProps } from '../model';
import * as S from './SbpOperationsHistory.styles';
import { TableExpandedRowInfoCell } from '@/shared/ui/TableExpandedRowInfoCell';
const OutgoingPaymentExpandedRow = ({
row: { transactionType, account, paymentPurpose, transactionId, qrId, contractor, agentId },
}: OperationsHistoryExpandedRowProps) => (
<S.SbpOperationsHistoryExpandedRowLayout>
<TableExpandedRowInfoCell
label={
transactionType === TRANSACTIONS_HISTORY_TYPE.INCOMING_PAYMENT
? LOCALIZATION.EXPANDED_ROW_RECIPIENT_ACCOUNT
: LOCALIZATION.EXPANDED_ROW_SENDER_ACCOUNT
}
value={account}
/>
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_PAYMENT_PURPOSE} value={paymentPurpose} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_TRANSACTION_ID} value={transactionId} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_QR_ID} value={qrId} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_CONTRACTOR_BANK} value={contractor?.contractorBank?.name} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_BIC} value={contractor?.contractorBic} />
{agentId && <TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_AGENT} value={''} />}
</S.SbpOperationsHistoryExpandedRowLayout>
);
export { OutgoingPaymentExpandedRow };
@@ -0,0 +1 @@
export { SbpOperationsHistory } from './SbpOperationsHistory';
@@ -1,5 +1,6 @@
import type { BadgeType } from '@fractal-ui/extended';
import { SBP_OUTGOING_PAYMENT_STATUS, TRANSACTION_REQUEST_CLIENT_STATUS } from '../model';
import { TRANSACTION_REQUEST_CLIENT_STATUS } from '../model';
import { TRANSACTION_BADGE_STATUS } from '@/shared/models';
const getTransactionRequestClientDocumentStatusType = (status: TRANSACTION_REQUEST_CLIENT_STATUS): BadgeType => {
switch (status) {
@@ -13,17 +14,17 @@ const getTransactionRequestClientDocumentStatusType = (status: TRANSACTION_REQUE
case TRANSACTION_REQUEST_CLIENT_STATUS.ACCEPTED_FOR_PROCESSING:
case TRANSACTION_REQUEST_CLIENT_STATUS.ACCEPTED_FOR_EXECUTION:
case TRANSACTION_REQUEST_CLIENT_STATUS.PROCESSING:
return SBP_OUTGOING_PAYMENT_STATUS.WARNING;
return TRANSACTION_BADGE_STATUS.WARNING;
case TRANSACTION_REQUEST_CLIENT_STATUS.DELETED:
case TRANSACTION_REQUEST_CLIENT_STATUS.REJECTED:
return SBP_OUTGOING_PAYMENT_STATUS.ERROR;
return TRANSACTION_BADGE_STATUS.ERROR;
case TRANSACTION_REQUEST_CLIENT_STATUS.COMPLETED:
return SBP_OUTGOING_PAYMENT_STATUS.SUCCESS;
return TRANSACTION_BADGE_STATUS.SUCCESS;
default:
return SBP_OUTGOING_PAYMENT_STATUS.SYSTEM;
return TRANSACTION_BADGE_STATUS.SYSTEM;
}
};
@@ -1,4 +1,4 @@
import type { ReactNode } from 'react';
import type { Bank, Merchant } from '@/shared/models';
enum TRANSACTION_REQUEST_CLIENT_STATUS {
NONE = 'NONE',
@@ -48,20 +48,6 @@ enum TRANSACTION_DOCUMENT_TYPE {
RETURN = 'RETURN',
}
enum SBP_OUTGOING_PAYMENT_STATUS {
SUCCESS = 'success',
WARNING = 'warning',
ERROR = 'error',
SYSTEM = 'system',
}
interface Merchant {
id: string;
name?: string;
address?: string;
inn?: string;
}
interface Contractor {
id: string;
inn?: string;
@@ -70,12 +56,6 @@ interface Contractor {
phone?: string;
}
export interface Bank {
id: string;
name?: string;
bic?: string;
}
interface Commission {
id?: string;
amount?: string;
@@ -119,10 +99,5 @@ interface OutgoingPaymentExpandedRowProps {
row: SbpOutgoingPayment;
}
interface SbpOutgoingPaymentInfoCellProps {
label: string;
value: ReactNode;
}
export { TRANSACTION_REQUEST_CLIENT_STATUS, SBP_OUTGOING_PAYMENT_FIELDS, TRANSACTION_DOCUMENT_TYPE, SBP_OUTGOING_PAYMENT_STATUS };
export type { SbpOutgoingPayment, OutgoingPaymentExpandedRowProps, SbpOutgoingPaymentInfoCellProps };
export { TRANSACTION_REQUEST_CLIENT_STATUS, SBP_OUTGOING_PAYMENT_FIELDS, TRANSACTION_DOCUMENT_TYPE };
export type { SbpOutgoingPayment, OutgoingPaymentExpandedRowProps };
@@ -1,42 +1,42 @@
import React from 'react';
import { LOCALIZATION } from '../constants';
import { TRANSACTION_DOCUMENT_TYPE, type OutgoingPaymentExpandedRowProps } from '../model';
import { SbpOutgoingPaymentInfoCell } from './SbpOutgoingPaymentInfoCell';
import * as S from './SbpOutgoingPayments.styles';
import { TableExpandedRowInfoCell } from '@/shared/ui/TableExpandedRowInfoCell';
const OutgoingPaymentExpandedRow = ({
row: { account, commission, incomeCode, operation, paymentPurpose, type, isB2b, transactionId, qrId, contractorBank, recipientMerchant },
}: OutgoingPaymentExpandedRowProps) => (
<S.OutgoingPaymentExpandedRowLayout>
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_ACCOUNT} value={account} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_ACCOUNT} value={account} />
{isB2b && (
<>
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_CONTRACTOR_NAME} value={recipientMerchant?.name} />
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_CONTRACTOR_ADDRESS} value={recipientMerchant?.address} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_CONTRACTOR_NAME} value={recipientMerchant?.name} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_CONTRACTOR_ADDRESS} value={recipientMerchant?.address} />
</>
)}
<SbpOutgoingPaymentInfoCell
<TableExpandedRowInfoCell
label={LOCALIZATION.EXPANDED_ROW_CONTRACTOR_BANK}
value={`${contractorBank.name ?? ''} ${LOCALIZATION.BIC_TEXT} ${contractorBank.bic ?? ''}`}
/>
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_PAYMENT_PURPOSE} value={paymentPurpose} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_PAYMENT_PURPOSE} value={paymentPurpose} />
{type === TRANSACTION_DOCUMENT_TYPE.RETURN ? (
<>
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_DATE} value={operation?.transactionTime.toISOString()} />
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_AMOUNT} value={operation?.amount} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_DATE} value={operation?.transactionTime.toISOString()} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_AMOUNT} value={operation?.amount} />
</>
) : (
<>
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_COMMISSION} value={commission?.amount} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_COMMISSION} value={commission?.amount} />
{isB2b ? (
<>
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_TRANSACTION_ID} value={transactionId} />
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_QR_ID} value={qrId} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_TRANSACTION_ID} value={transactionId} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_QR_ID} value={qrId} />
</>
) : (
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_INCOME_CODE} value={incomeCode} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_INCOME_CODE} value={incomeCode} />
)}
<SbpOutgoingPaymentInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_AMOUNT} value={operation?.amount} />
<TableExpandedRowInfoCell label={LOCALIZATION.EXPANDED_ROW_TRANSACTION_AMOUNT} value={operation?.amount} />
</>
)}
</S.OutgoingPaymentExpandedRowLayout>
@@ -1,15 +0,0 @@
import React from 'react';
import { Text } from '@fractal-ui/styling';
import type { SbpOutgoingPaymentInfoCellProps } from '../model';
import * as S from './SbpOutgoingPayments.styles';
const SbpOutgoingPaymentInfoCell = ({ label, value }: SbpOutgoingPaymentInfoCellProps) => (
<S.OutgoingPaymentExpandedRowCellLayout>
<S.StyledTextLabelWrapper>
<Text.P3 color="text.secondary">{label}</Text.P3>
</S.StyledTextLabelWrapper>
<Text.P3>{value || <span>&ndash</span>}</Text.P3>
</S.OutgoingPaymentExpandedRowCellLayout>
);
export { SbpOutgoingPaymentInfoCell };
@@ -64,5 +64,45 @@ interface Contract {
salePoints: SalePoint[];
}
export { ACQUIRING_TYPES };
export type { Contract, SalePoint, Outlet, Tariff, Manager, Terminal };
interface Merchant {
id: string;
name?: string;
address?: string;
inn?: string;
}
interface Bank {
id: string;
name?: string;
bic?: string;
}
enum TRANSACTION_REQUEST_CLIENT_STATUS {
NONE = 'NONE',
DRAFT = 'DRAFT',
CREATED = 'CREATED',
WAIT_FOR_SIGN = 'WAIT_FOR_SIGN',
SIGNED_1 = 'SIGNED_1',
SIGNED_2 = 'SIGNED_2',
SIGNED = 'SIGNED',
DELETED = 'DELETED',
SEND = 'SEND',
DELIVERED = 'DELIVERED',
ACCEPTED_FOR_PROCESSING = 'ACCEPTED_FOR_PROCESSING',
ACCEPTED_FOR_EXECUTION = 'ACCEPTED_FOR_EXECUTION',
PROCESSING = 'PROCESSING',
COMPLETED = 'COMPLETED',
REJECTED = 'REJECTED',
CANCELLED = 'CANCELLED',
}
enum TRANSACTION_BADGE_STATUS {
SUCCESS = 'success',
WARNING = 'warning',
ERROR = 'error',
SYSTEM = 'system',
INFO = 'info',
}
export { ACQUIRING_TYPES, TRANSACTION_REQUEST_CLIENT_STATUS, TRANSACTION_BADGE_STATUS };
export type { Contract, SalePoint, Outlet, Tariff, Manager, Terminal, Merchant, Bank };
@@ -0,0 +1,14 @@
import styled from '@emotion/styled';
const SbpOperationsHistoryExpandedRowCellLayout = styled.div`
display: flex;
align-items: center;
justify-content: start;
gap: 24px;
`;
const StyledTextLabelWrapper = styled.div`
width: 150px;
`;
export { SbpOperationsHistoryExpandedRowCellLayout, StyledTextLabelWrapper };
@@ -0,0 +1,15 @@
import React from 'react';
import { Text } from '@fractal-ui/styling';
import * as S from './TableExpandedRowInfoCell.styles';
import type { TableExpandedRowInfoCellProps } from './types';
const TableExpandedRowInfoCell = ({ label, value }: TableExpandedRowInfoCellProps) => (
<S.SbpOperationsHistoryExpandedRowCellLayout>
<S.StyledTextLabelWrapper>
<Text.P3 color="text.secondary">{label}</Text.P3>
</S.StyledTextLabelWrapper>
<Text.P3>{value || <span>-</span>}</Text.P3>
</S.SbpOperationsHistoryExpandedRowCellLayout>
);
export { TableExpandedRowInfoCell };
@@ -0,0 +1 @@
export { TableExpandedRowInfoCell } from './TableExpandedRowInfoCell';
@@ -0,0 +1,8 @@
import type { ReactNode } from 'react';
interface TableExpandedRowInfoCellProps {
label: string;
value: ReactNode;
}
export type { TableExpandedRowInfoCellProps };
@@ -22,6 +22,10 @@ const SBP_TABS = [
value: SBP_TAB_TYPES.PAYMENTS,
label: LOCALIZATION.PAYMENTS,
},
{
value: SBP_TAB_TYPES.OPERATIONS_HISTORY,
label: LOCALIZATION.OPERATIONS_HISTORY,
},
{
value: SBP_TAB_TYPES.OUTGOING_PAYMENTS,
label: LOCALIZATION.OUTGOING_PAYMENTS,
@@ -6,6 +6,7 @@ const LOCALIZATION = {
PAYMENTS: 'Платежи',
OUTGOING_PAYMENTS: 'Исходящие платежи',
APPLICATIONS: 'Заявки',
OPERATIONS_HISTORY: 'История операций',
};
export { LOCALIZATION };
@@ -6,6 +6,7 @@ enum SBP_TAB_TYPES {
PAYMENTS = 'PAYMENTS',
OUTGOING_PAYMENTS = 'OUTGOING_PAYMENTS',
APPLICATIONS = 'APPLICATIONS',
OPERATIONS_HISTORY = 'OPERATIONS_HISTORY',
}
export { SBP_TAB_TYPES };
@@ -4,6 +4,7 @@ import { SBP_TABS } from '../constants';
import { SBP_TAB_TYPES } from '../model';
import * as S from './SbpForm.styles';
import { SbpContracts } from '@/features/SbpContracts';
import { SbpOperationsHistory } from '@/features/SbpOperationsHistory';
import { SbpOutgoingPayments } from '@/features/SbpOutgoingPayments';
import { SbpSalePoints } from '@/features/SbpSalePoints';
@@ -18,6 +19,7 @@ const SbpForm = () => {
{selectedTab === SBP_TAB_TYPES.CONTRACTS && <SbpContracts />}
{selectedTab === SBP_TAB_TYPES.SALE_POINTS && <SbpSalePoints />}
{selectedTab === SBP_TAB_TYPES.OUTGOING_PAYMENTS && <SbpOutgoingPayments />}
{selectedTab === SBP_TAB_TYPES.OPERATIONS_HISTORY && <SbpOperationsHistory />}
</S.SbpFormLayout>
);
};