From 9a4445032e61557c90818c86a363342a69e1b08d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9B=D0=B8=D1=81=D0=B8=D1=86=D1=8B=D0=BD=20=D0=94=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D0=B8=D0=BB?= Date: Wed, 8 Oct 2025 14:42:46 +0300 Subject: [PATCH 1/3] =?UTF-8?q?story(TEAMMSBMOB-15549):=20screen=20view=20?= =?UTF-8?q?=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D1=8F=20=D0=B2=20=D0=B4?= =?UTF-8?q?=D0=B5=D0=BF=D0=BE=D0=B7=D0=B8=D1=82=D0=B0=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/CancelDocumentPage.tsx | 4 ++-- .../model/useHandleSubmit.ts | 5 ++++- .../src/shared/constants/index.ts | 1 + .../src/shared/constants/metrika.ts | 19 +++++++++++++++++++ .../ui/SignCancelDocuments.tsx | 7 +++++-- .../SignEarlyRefund/ui/SignEarlyRefund.tsx | 6 ++++-- 6 files changed, 35 insertions(+), 7 deletions(-) create mode 100644 services/msb-deposits/src/shared/constants/metrika.ts diff --git a/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx b/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx index 8828c60b4..74c81e08e 100644 --- a/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx +++ b/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import { useEffect, useState, useMemo } from 'react'; import { Button } from '@fractal-ui/core'; -import { useRedirect } from '@msb/shared'; +import { DOC_TYPES, useRedirect } from '@msb/shared'; import dayjs from 'dayjs'; import { useLocation } from 'react-router-dom'; import { LOCALIZATION } from '../constants'; @@ -14,7 +14,7 @@ import { SignCancelDocuments } from '@/widgets/SignCancelDocuments'; interface LocationState { id: string; - docType: string; + docType: DOC_TYPES; } const titleVariant: Record = { diff --git a/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts b/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts index f33c30c4e..0db41972f 100644 --- a/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts +++ b/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts @@ -4,13 +4,14 @@ import type { DocumentRateResponseDto, DocumentValidateRequestBody, MessagesResp import { fetchValidate, to } from '@msb/http'; import { localization } from '@msb/localization'; import type { DOC_TYPES } from '@msb/shared'; -import { BaseDialog, checkHaveUserPermissions, PATHS, useAppContext, useModal, useRedirect } from '@msb/shared'; +import { BaseDialog, checkHaveUserPermissions, PATHS, useAppContext, useModal, useRedirect, useYaMetrika, YM_GOALS } from '@msb/shared'; import type { ValidationErrors } from 'final-form'; import { DIGITAL_SIGNATURE_TOOL_VIEW, LOCALIZATION } from '../constants'; import { transformValidationErrors } from './useAsyncValidation'; import { validate } from './validation'; import { generateSignDataDepositDocument, signAndSendDepositDocument, useLazyCreateToSignDepositDocument } from '@/entities/documents'; import { parseSignDataToCryptoData } from '@/shared/lib'; +import { SCREEN_VIEW } from '@/shared/constants'; interface Params { values: any; @@ -22,6 +23,7 @@ interface Params { const useHandleSubmit = (docType: DOC_TYPES) => { const { userAuthorities } = useAppContext(); + const { handleReachGoal } = useYaMetrika(); const { createToSignDepositDocumentAsync } = useLazyCreateToSignDepositDocument(docType); const { showModal } = useModal(BaseDialog); const toDeposits = useRedirect(PATHS.DEPOSITS); @@ -131,6 +133,7 @@ const useHandleSubmit = (docType: DOC_TYPES) => { }); if (response.signedDocs.length > 0) { + handleReachGoal(YM_GOALS.SCREEN_VIEW, { [YM_GOALS.SCREEN_VIEW]: { screen_name: SCREEN_VIEW.SUCCESS[docType] } }); await showModal({ header: LOCALIZATION.MODAL_HEADER, message: accountWriteOff diff --git a/services/msb-deposits/src/shared/constants/index.ts b/services/msb-deposits/src/shared/constants/index.ts index 1b937e83c..03073a9ef 100644 --- a/services/msb-deposits/src/shared/constants/index.ts +++ b/services/msb-deposits/src/shared/constants/index.ts @@ -3,3 +3,4 @@ export * from './maps'; export * from './documents'; export * from './localization'; export * from './actions'; +export * from './metrika'; diff --git a/services/msb-deposits/src/shared/constants/metrika.ts b/services/msb-deposits/src/shared/constants/metrika.ts new file mode 100644 index 000000000..f8b331ed1 --- /dev/null +++ b/services/msb-deposits/src/shared/constants/metrika.ts @@ -0,0 +1,19 @@ +import { DOC_TYPES } from '@msb/shared'; + +const SCREEN_VIEW = { + SUCCESS: { + [DOC_TYPES.DEPOSIT]: 'deposit_success', + [DOC_TYPES.MNO]: 'mno_success', + [DOC_TYPES.GSNO]: 'gsno_success', + [DOC_TYPES.OVERNIGHT]: 'deposit_success', + EARLY_REFUND: 'deposit_earlyRefund_success', + DOCUMENT_CANCEL: { + [DOC_TYPES.DEPOSIT]: 'deposit_cancel_success', + [DOC_TYPES.MNO]: 'mno_cancel_success', + [DOC_TYPES.GSNO]: 'gsno_cancel_success', + [DOC_TYPES.OVERNIGHT]: 'deposit_cancel_success', + }, + }, +} as const; + +export { SCREEN_VIEW }; diff --git a/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx b/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx index 61fcf453d..b81058344 100644 --- a/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx +++ b/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx @@ -2,12 +2,13 @@ import { useEffect } from 'react'; import { Button } from '@fractal-ui/core'; import { openSignModal } from '@msb/crypto'; import type { CancelDocumentDto } from '@msb/http'; -import { useModal, BaseDialog, useRedirect, PATHS, PATHS_DEPOSITS } from '@msb/shared'; +import { useModal, BaseDialog, useRedirect, PATHS, PATHS_DEPOSITS, useYaMetrika, YM_GOALS, DOC_TYPES } from '@msb/shared'; import { LOCALIZATION } from '../constants'; import { useSignCancelDocuments } from './useSignCancelDocuments'; +import { SCREEN_VIEW } from '@/shared/constants'; interface SignCancelDocumentsProps { - docType: string; + docType: DOC_TYPES; cancelDocument: CancelDocumentDto; clientId: string; timeExpired: boolean; @@ -17,6 +18,7 @@ interface SignCancelDocumentsProps { const SignCancelDocuments = ({ docType, clientId, cancelDocument, timeExpired, fields }: SignCancelDocumentsProps) => { const { signData, signService } = useSignCancelDocuments(cancelDocument, docType, fields, clientId); const { showModal, hideModal } = useModal(BaseDialog); + const { handleReachGoal } = useYaMetrika(); const toDeposits = useRedirect(PATHS_DEPOSITS.PRODUCTS); const toMain = useRedirect(PATHS.HOME); @@ -34,6 +36,7 @@ const SignCancelDocuments = ({ docType, clientId, cancelDocument, timeExpired, f console.log(response); if (response.signedDocs.length > 0) { + handleReachGoal(YM_GOALS.SCREEN_VIEW, { [YM_GOALS.SCREEN_VIEW]: { screen_name: SCREEN_VIEW.SUCCESS.DOCUMENT_CANCEL[docType] } }); await showModal({ header: LOCALIZATION.MODAL_HEADER, message: LOCALIZATION.MODAL_MESSAGE, diff --git a/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx b/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx index a27ca9b42..bfc0e9545 100644 --- a/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx +++ b/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx @@ -2,10 +2,10 @@ import { useCallback } from 'react'; import { Button } from '@fractal-ui/core'; import { openSignModal } from '@msb/crypto'; import type { BankAccount, DocumentData } from '@msb/http'; -import { BaseDialog, useModal, useRedirect, PATHS as GLOBAL_PATHS } from '@msb/shared'; +import { BaseDialog, useModal, useRedirect, PATHS as GLOBAL_PATHS, useYaMetrika, YM_GOALS } from '@msb/shared'; import { LOCALIZATION } from '../constants'; import { useSignEarlyRefund } from './useSignEarlyRefund'; -import { PATHS } from '@/shared/constants'; +import { PATHS, SCREEN_VIEW } from '@/shared/constants'; interface SignEarlyRefundProps { currentAccount: BankAccount; @@ -17,6 +17,7 @@ interface SignEarlyRefundProps { const SignEarlyRefund = ({ clientId, currentAccount, refundDocument, fields }: SignEarlyRefundProps) => { const { signService, signData } = useSignEarlyRefund(clientId, currentAccount, refundDocument, fields); const { showModal } = useModal(BaseDialog); + const { handleReachGoal } = useYaMetrika(); const toDeposits = useRedirect(GLOBAL_PATHS.DEPOSITS); const toMain = useRedirect(GLOBAL_PATHS.HOME); @@ -36,6 +37,7 @@ const SignEarlyRefund = ({ clientId, currentAccount, refundDocument, fields }: S }); if (response.signedDocs.length > 0) { + handleReachGoal(YM_GOALS.SCREEN_VIEW, { [YM_GOALS.SCREEN_VIEW]: { screen_name: SCREEN_VIEW.SUCCESS.EARLY_REFUND } }); await showModal({ header: LOCALIZATION.MODAL_HEADER, message: LOCALIZATION.MODAL_MESSAGE, From a92afc219b51bfc37ae99fba314ae5027fdd43cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9B=D0=B8=D1=81=D0=B8=D1=86=D1=8B=D0=BD=20=D0=94=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D0=B8=D0=BB?= Date: Mon, 13 Oct 2025 14:50:47 +0300 Subject: [PATCH 2/3] =?UTF-8?q?story(TEAMMSBMOB-15549):=20button=20click?= =?UTF-8?q?=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D1=8F=20=D0=B2=20=D0=B4?= =?UTF-8?q?=D0=B5=D0=BF=D0=BE=D0=B7=D0=B8=D1=82=D0=B0=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/EventsCalendar/ui/EventCalendar.tsx | 7 +-- .../constants/constants.ts | 16 ++++++- .../model/useOpenTreasuryDeals.ts | 36 ++++++++++++--- .../constants/constants.ts | 11 +++++ .../constants/index.ts | 1 + .../ui/TreasuryDealsActionsButtons.tsx | 24 ++++++++-- .../ui/TreasuryDealsBestRates.tsx | 6 +++ .../ui/CancelDocumentPage.tsx | 3 +- .../DepositsMainPage/ui/DepositsMainPage.tsx | 22 +++++++-- .../DepositsMainPage/ui/NavBar/ui/NavBar.tsx | 45 ++++++++++++------- .../ui/NavBar/ui/constants.ts | 5 ++- .../model/useHandleSubmit.ts | 2 +- .../src/shared/constants/metrika.ts | 43 +++++++++++++++++- .../ui/DepositCalculator.tsx | 14 +++--- .../ExpandedComponentContent.tsx | 26 ++++++++--- .../widgets/ProductTable/ui/ProductTable.tsx | 22 ++++++++- .../widgets/Products/constants/tabOptions.ts | 20 ++++++--- .../ui/ProductsFilters/ui/ProductsFilters.tsx | 10 +++-- .../Products/ui/ProductsTableContent.tsx | 19 ++++++-- .../constants/constants.ts | 11 +++++ .../SignCancelDocuments/constants/index.ts | 1 + .../ui/SignCancelDocuments.tsx | 11 +++-- .../SignConfirmation/constants/constants.ts | 11 +++++ .../SignConfirmation/constants/index.ts | 1 + .../SignConfirmation/ui/SignConfirmation.tsx | 10 ++++- .../SignEarlyRefund/ui/SignEarlyRefund.tsx | 8 +++- 26 files changed, 316 insertions(+), 69 deletions(-) create mode 100644 services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/constants.ts create mode 100644 services/msb-deposits/src/widgets/SignCancelDocuments/constants/constants.ts create mode 100644 services/msb-deposits/src/widgets/SignConfirmation/constants/constants.ts diff --git a/packages/shared/ui/EventsCalendar/ui/EventCalendar.tsx b/packages/shared/ui/EventsCalendar/ui/EventCalendar.tsx index 88debad4e..50e7370ff 100644 --- a/packages/shared/ui/EventsCalendar/ui/EventCalendar.tsx +++ b/packages/shared/ui/EventsCalendar/ui/EventCalendar.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import { useState, useCallback, useMemo, useRef, useLayoutEffect } from 'react'; +import { useState, useCallback, useMemo, useRef, memo, useLayoutEffect } from 'react'; import { Icon } from '@fractal-ui/library'; import type { IconName } from '@fractal-ui/library/dist-types/icon/types'; import { Calendar } from '@msb/fractal-ui-composites'; @@ -15,7 +15,7 @@ import CalendarFolder from '@msb/shared/assets/calendar_folder.png'; const MAX_VISIBLE_RECORDS = 2; -const EventCalendar = (): ReactElement => { +const EventCalendar = memo(({ onDateChange }: { onDateChange?: () => void }): ReactElement => { const [selectedDate, setSelectedDate] = useState(new Date()); const [visibleMonth, setVisibleMonth] = useState(dayjs()); const [recordHeight, setRecordHeight] = useState(0); @@ -32,6 +32,7 @@ const EventCalendar = (): ReactElement => { const isLoading = isLoadingWorkCalendar || isLoadingDealMarkers || isLoadingDealEvents; const handleDateChange = useCallback((date: DateValue) => { + onDateChange?.(); setSelectedDate(Array.isArray(date) ? date[0] : date); }, []); @@ -134,6 +135,6 @@ const EventCalendar = (): ReactElement => { ); -}; +}); export { EventCalendar }; diff --git a/services/msb-deposits/src/features/OpenTreasuryDealsButton/constants/constants.ts b/services/msb-deposits/src/features/OpenTreasuryDealsButton/constants/constants.ts index 0a5f6e74d..8f6f1a188 100644 --- a/services/msb-deposits/src/features/OpenTreasuryDealsButton/constants/constants.ts +++ b/services/msb-deposits/src/features/OpenTreasuryDealsButton/constants/constants.ts @@ -1,7 +1,21 @@ +import { DOC_TYPES } from '@msb/shared'; +import { BUTTON_CLICK, SCREEN_NAME } from '@/shared/constants'; + const PERMISSIONS: Record = { DEPOSIT: ['TREASURY_COMMON', 'TREASURY_DEPOSIT_DEALS_COMMON', 'TREASURY_GENERAL_AGREEMENTS_COMMON'], MNO: ['TREASURY_COMMON', 'TREASURY_MNO_DEALS_COMMON', 'TREASURY_GENERAL_AGREEMENTS_COMMON'], GSNO: ['TREASURY_COMMON', 'TREASURY_GSNO_DEALS_COMMON', 'TREASURY_GENERAL_AGREEMENTS_COMMON'], }; -export { PERMISSIONS }; +const SCREEN_NAME_MATCHER: Record = { + deposits: SCREEN_NAME.DEPOSITS, + products: SCREEN_NAME.DEPOSITS_PRODUCTS, +}; + +const ELEMENT_NAME_MATCHER: Record = { + [DOC_TYPES.DEPOSIT]: BUTTON_CLICK.ELEMENT_NAME.OPEN_DEPOSIT, + [DOC_TYPES.MNO]: BUTTON_CLICK.ELEMENT_NAME.OPEN_MNO, + [DOC_TYPES.GSNO]: BUTTON_CLICK.ELEMENT_NAME.OPEN_GSNO, +}; + +export { PERMISSIONS, SCREEN_NAME_MATCHER, ELEMENT_NAME_MATCHER }; diff --git a/services/msb-deposits/src/features/OpenTreasuryDealsButton/model/useOpenTreasuryDeals.ts b/services/msb-deposits/src/features/OpenTreasuryDealsButton/model/useOpenTreasuryDeals.ts index 56a63d58b..fd1553f7e 100644 --- a/services/msb-deposits/src/features/OpenTreasuryDealsButton/model/useOpenTreasuryDeals.ts +++ b/services/msb-deposits/src/features/OpenTreasuryDealsButton/model/useOpenTreasuryDeals.ts @@ -1,7 +1,8 @@ -import { checkHaveUserPermissions, useAppContext, useUnauthorizedModal, DOC_TYPES } from '@msb/shared'; -import { useHistory } from 'react-router-dom'; -import { PERMISSIONS } from '../constants'; -import { PATHS } from '@/shared/constants'; +import { useMemo } from 'react'; +import { checkHaveUserPermissions, useAppContext, useUnauthorizedModal, DOC_TYPES, useYaMetrika, YM_GOALS } from '@msb/shared'; +import { useHistory, useLocation } from 'react-router-dom'; +import { ELEMENT_NAME_MATCHER, PERMISSIONS, SCREEN_NAME_MATCHER } from '../constants'; +import { ACTIONS_LEADING_TO_TREASURY_DEALS_FORM, BUTTON_CLICK, PATHS } from '@/shared/constants'; import type { HistoryState } from '@/shared/model'; /** @@ -11,6 +12,9 @@ const useOpenTreasuryDeals = () => { const { userAuthorities } = useAppContext(); const history = useHistory(); const { showUnauthorizedModal: notEnoughRights } = useUnauthorizedModal(); + const { handleReachGoal } = useYaMetrika(); + const { pathname } = useLocation(); + const segment = useMemo(() => pathname.split('/').pop() || '', [pathname]); if (!userAuthorities?.data) { return { openDeposit: notEnoughRights, openMNO: notEnoughRights, openGSNO: notEnoughRights }; @@ -18,7 +22,21 @@ const useOpenTreasuryDeals = () => { const { authorities } = userAuthorities.data; + const handleMetrika = (docType: DOC_TYPES, payload?: HistoryState) => { + const actionType = payload?.actionType; + const screenName = SCREEN_NAME_MATCHER[segment]; + const element_name = + actionType === ACTIONS_LEADING_TO_TREASURY_DEALS_FORM.SHOWCASE + ? BUTTON_CLICK.ELEMENT_NAME.DEPOSIT_OFFER + : ELEMENT_NAME_MATCHER[docType]; + + handleReachGoal(YM_GOALS.BUTTON_CLICK, { [YM_GOALS.BUTTON_CLICK]: { [screenName]: { element_name } } }); + }; + + // TODO: привести все к одной функции открытия продукта, так как функционал повторяется const openDeposit = (payload?: HistoryState) => { + handleMetrika(DOC_TYPES.DEPOSIT, payload); + const havePermission = checkHaveUserPermissions(authorities, PERMISSIONS.DEPOSIT); if (!havePermission) { @@ -27,10 +45,12 @@ const useOpenTreasuryDeals = () => { return; } - history.push(PATHS.TREASURY_DEALS.PATH, { ...payload, docType: DOC_TYPES.DEPOSIT, showcasePath: PATHS.HOME.PATH }); + history.push(PATHS.TREASURY_DEALS.PATH, { ...payload, docType: DOC_TYPES.DEPOSIT }); }; const openMNO = (payload?: HistoryState) => { + handleMetrika(DOC_TYPES.MNO, payload); + const havePermission = checkHaveUserPermissions(authorities, PERMISSIONS.MNO); if (!havePermission) { @@ -39,10 +59,12 @@ const useOpenTreasuryDeals = () => { return; } - history.push(PATHS.TREASURY_DEALS.PATH, { ...payload, docType: DOC_TYPES.MNO, showcasePath: PATHS.HOME.PATH }); + history.push(PATHS.TREASURY_DEALS.PATH, { ...payload, docType: DOC_TYPES.MNO }); }; const openGSNO = (payload?: HistoryState) => { + handleMetrika(DOC_TYPES.GSNO, payload); + const havePermission = checkHaveUserPermissions(authorities, PERMISSIONS.GSNO); if (!havePermission) { @@ -51,7 +73,7 @@ const useOpenTreasuryDeals = () => { return; } - history.push(PATHS.TREASURY_DEALS.PATH, { ...payload, docType: DOC_TYPES.GSNO, showcasePath: PATHS.HOME.PATH }); + history.push(PATHS.TREASURY_DEALS.PATH, { ...payload, docType: DOC_TYPES.GSNO }); }; return { openDeposit, openMNO, openGSNO }; diff --git a/services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/constants.ts b/services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/constants.ts new file mode 100644 index 000000000..155348d65 --- /dev/null +++ b/services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/constants.ts @@ -0,0 +1,11 @@ +import { DOC_TYPES } from '@msb/shared'; +import { SCREEN_NAME } from '@/shared/constants'; + +const SCREEN_NAME_MATCHER: Record = { + [DOC_TYPES.DEPOSIT]: SCREEN_NAME.DEPOSIT_FORM, + [DOC_TYPES.MNO]: SCREEN_NAME.MNO_FORM, + [DOC_TYPES.GSNO]: SCREEN_NAME.GSNO_FORM, + [DOC_TYPES.OVERNIGHT]: SCREEN_NAME.DEPOSIT_FORM, +}; + +export { SCREEN_NAME_MATCHER }; diff --git a/services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/index.ts b/services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/index.ts index 7a8bed41f..428d91d38 100644 --- a/services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/index.ts +++ b/services/msb-deposits/src/features/TreasuryDealsActionsButtons/constants/index.ts @@ -1 +1,2 @@ export * from './localization'; +export * from './constants'; diff --git a/services/msb-deposits/src/features/TreasuryDealsActionsButtons/ui/TreasuryDealsActionsButtons.tsx b/services/msb-deposits/src/features/TreasuryDealsActionsButtons/ui/TreasuryDealsActionsButtons.tsx index 4511c79ea..83bb5bb23 100644 --- a/services/msb-deposits/src/features/TreasuryDealsActionsButtons/ui/TreasuryDealsActionsButtons.tsx +++ b/services/msb-deposits/src/features/TreasuryDealsActionsButtons/ui/TreasuryDealsActionsButtons.tsx @@ -2,9 +2,10 @@ import { useEffect } from 'react'; import { Button } from '@fractal-ui/core'; import type { DocumentNewForEditDto, SaveTemplateRequestBody } from '@msb/http'; import type { DOC_TYPES } from '@msb/shared'; -import { Flex } from '@msb/shared'; -import { TREASURY_DEALS_ACTIONS_BUTTONS } from '../constants'; +import { Flex, useYaMetrika, YM_GOALS } from '@msb/shared'; +import { SCREEN_NAME_MATCHER, TREASURY_DEALS_ACTIONS_BUTTONS } from '../constants'; import { useHandleSave } from '../model'; +import { BUTTON_CLICK } from '@/shared/constants'; interface Props { isSigner?: boolean; @@ -24,6 +25,7 @@ interface Props { const TreasuryDealsActionsButtons = ({ isSigner, requestBody, setRequestBody, handleSubmit, docType }: Props) => { const { handleSave, saveTemplateData } = useHandleSave(docType); + const { handleReachGoal } = useYaMetrika(); useEffect(() => { const draft = saveTemplateData?.data; @@ -33,13 +35,27 @@ const TreasuryDealsActionsButtons = ({ isSigner, requestBody, setRequestBody, ha } }, [saveTemplateData, setRequestBody]); + const handleClickSaveButton = () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME_MATCHER[docType]]: { element_name: BUTTON_CLICK.ELEMENT_NAME.SAVE_DRAFT } }, + }); + handleSave(requestBody); + }; + + const handleClickSumbitButton = () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME_MATCHER[docType]]: { element_name: BUTTON_CLICK.ELEMENT_NAME.SIGN } }, + }); + handleSubmit(); + }; + return ( - {isSigner && ( - )} diff --git a/services/msb-deposits/src/features/TreasuryDealsBestRates/ui/TreasuryDealsBestRates.tsx b/services/msb-deposits/src/features/TreasuryDealsBestRates/ui/TreasuryDealsBestRates.tsx index 22bec0ca2..b47d7fe90 100644 --- a/services/msb-deposits/src/features/TreasuryDealsBestRates/ui/TreasuryDealsBestRates.tsx +++ b/services/msb-deposits/src/features/TreasuryDealsBestRates/ui/TreasuryDealsBestRates.tsx @@ -2,10 +2,12 @@ import type { RefObject } from 'react'; import { useEffect, useState } from 'react'; import { Title, Wrapper } from '@fractal-ui/styling'; import type { BestRatesResponseDto } from '@msb/http'; +import { useYaMetrika, YM_GOALS } from '@msb/shared'; import { localization } from '../constants'; import { RadioGroupItem } from './RadioGroupItem'; import * as S from './TreasuryDealsBestRates.styles'; import { TREASURY_DEALS_FORM_FIELDS } from '@/entities/treasuryDealsForm'; +import { BUTTON_CLICK, SCREEN_NAME } from '@/shared/constants'; interface Props { treausuryDealsBestRatesData: BestRatesResponseDto; @@ -16,8 +18,12 @@ interface Props { const TreasuryDealsBestRates = ({ treausuryDealsBestRatesData, rateValue, currency, formRef }: Props) => { const [selectedRate, setSelectedRate] = useState(null); + const { handleReachGoal } = useYaMetrika(); const handleRateChange = (index: number) => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSIT_FORM]: { element_name: BUTTON_CLICK.ELEMENT_NAME.BEST_RATE } }, + }); setSelectedRate(index); }; diff --git a/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx b/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx index 74c81e08e..5f28d7b54 100644 --- a/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx +++ b/services/msb-deposits/src/pages/CancelDocumentPage/ui/CancelDocumentPage.tsx @@ -1,7 +1,8 @@ import type { ReactElement } from 'react'; import { useEffect, useState, useMemo } from 'react'; import { Button } from '@fractal-ui/core'; -import { DOC_TYPES, useRedirect } from '@msb/shared'; +import type { DOC_TYPES } from '@msb/shared'; +import { useRedirect } from '@msb/shared'; import dayjs from 'dayjs'; import { useLocation } from 'react-router-dom'; import { LOCALIZATION } from '../constants'; diff --git a/services/msb-deposits/src/pages/DepositsMainPage/ui/DepositsMainPage.tsx b/services/msb-deposits/src/pages/DepositsMainPage/ui/DepositsMainPage.tsx index 4df98af1e..ebec27363 100644 --- a/services/msb-deposits/src/pages/DepositsMainPage/ui/DepositsMainPage.tsx +++ b/services/msb-deposits/src/pages/DepositsMainPage/ui/DepositsMainPage.tsx @@ -1,7 +1,15 @@ -import type { ReactElement } from 'react'; +import { useCallback, type ReactElement } from 'react'; import { SystemResponse } from '@fractal-ui/extended'; import { Title } from '@fractal-ui/styling'; -import { PageLayoutWithSections, EventCalendar, checkHaveUserPermissions, useAppContext, useRedirect } from '@msb/shared'; +import { + PageLayoutWithSections, + EventCalendar, + checkHaveUserPermissions, + useAppContext, + useRedirect, + useYaMetrika, + YM_GOALS, +} from '@msb/shared'; import { LOCALIZATION, TREASURY_COMMON, @@ -13,6 +21,7 @@ import * as S from './DepositsMainPage.styles'; import { useCalculator } from '@/entities/calculator'; import { OpenTreasuryDealsButton } from '@/features/OpenTreasuryDealsButton'; import { NavBar } from '@/pages/DepositsMainPage/ui/NavBar'; +import { BUTTON_CLICK, SCREEN_NAME } from '@/shared/constants'; import { DepositCalculator } from '@/widgets/DepositCalculator'; import { Showcase } from '@/widgets/Showcase'; @@ -20,6 +29,7 @@ const DepositsMainPage = (): ReactElement => { const { isCalculatorVisible } = useCalculator(); const { userAuthorities } = useAppContext(); const redirectToProduct = useRedirect('b'); + const { handleReachGoal } = useYaMetrika(); const userAuthoritiesList = userAuthorities?.data.authorities || []; @@ -32,8 +42,14 @@ const DepositsMainPage = (): ReactElement => { const haveShowcasePermission = haveMainSignatire && haveOtherSignatire; + const onDateChange = useCallback(() => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS]: { element_name: BUTTON_CLICK.ELEMENT_NAME.CALENDAR_DATE } }, + }); + }, [handleReachGoal]); + return ( - }> + }> {LOCALIZATION.DEPOSITS_AND_MNO} {haveShowcasePermission && } diff --git a/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/NavBar.tsx b/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/NavBar.tsx index c453479ae..a73a79a10 100644 --- a/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/NavBar.tsx +++ b/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/NavBar.tsx @@ -1,27 +1,38 @@ import type { ReactElement } from 'react'; +import { useYaMetrika, YM_GOALS } from '@msb/shared'; import * as S from './NavBar.styles'; import { NAV_BUTTONS } from './constants'; +import type { BUTTON_CLICK } from '@/shared/constants'; +import { SCREEN_NAME } from '@/shared/constants'; + +const NavBar = (): ReactElement => { + const { handleReachGoal } = useYaMetrika(); + const handleClick = (metrikaAttr: typeof BUTTON_CLICK.ELEMENT_NAME[keyof typeof BUTTON_CLICK.ELEMENT_NAME]) => () => + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS]: { element_name: metrikaAttr } }, + }); + + return ( + + {NAV_BUTTONS.map(({ text, icon, href, isExternal, metrikaAttr }) => { + if (isExternal) { + return ( + + + {text} + + ); + } -const NavBar = (): ReactElement => ( - - {NAV_BUTTONS.map(({ text, icon, href, isExternal }) => { - if (isExternal) { return ( - + {text} - + ); - } - - return ( - - - {text} - - ); - })} - -); + })} + + ); +}; export { NavBar }; diff --git a/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/constants.ts b/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/constants.ts index 18f660dca..f03dbd818 100644 --- a/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/constants.ts +++ b/services/msb-deposits/src/pages/DepositsMainPage/ui/NavBar/ui/constants.ts @@ -1,6 +1,6 @@ import { ECO_SERVICES_PATHS } from '@msb/shared'; import { Icons } from './assets'; -import { PATHS } from '@/shared/constants'; +import { BUTTON_CLICK, PATHS } from '@/shared/constants'; const NAV_BUTTONS = [ { @@ -8,18 +8,21 @@ const NAV_BUTTONS = [ icon: Icons.myProducts, href: PATHS.PRODUCTS.PATH, isExternal: false, + metrikaAttr: BUTTON_CLICK.ELEMENT_NAME.MY_PRODUCTS, }, { text: 'Соглашения', icon: Icons.accounts, href: ECO_SERVICES_PATHS.WEB_DEALING_AGREEMENTS, isExternal: true, + metrikaAttr: BUTTON_CLICK.ELEMENT_NAME.AGREEMENTS, }, { text: 'Счета', icon: Icons.agreements, href: ECO_SERVICES_PATHS.WEB_DEALING_ACCOUNTS, isExternal: true, + metrikaAttr: BUTTON_CLICK.ELEMENT_NAME.ACCOUNTS, }, ]; diff --git a/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts b/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts index 0db41972f..2cc115ffe 100644 --- a/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts +++ b/services/msb-deposits/src/pages/TreasuryDealsPage/model/useHandleSubmit.ts @@ -10,8 +10,8 @@ import { DIGITAL_SIGNATURE_TOOL_VIEW, LOCALIZATION } from '../constants'; import { transformValidationErrors } from './useAsyncValidation'; import { validate } from './validation'; import { generateSignDataDepositDocument, signAndSendDepositDocument, useLazyCreateToSignDepositDocument } from '@/entities/documents'; -import { parseSignDataToCryptoData } from '@/shared/lib'; import { SCREEN_VIEW } from '@/shared/constants'; +import { parseSignDataToCryptoData } from '@/shared/lib'; interface Params { values: any; diff --git a/services/msb-deposits/src/shared/constants/metrika.ts b/services/msb-deposits/src/shared/constants/metrika.ts index f8b331ed1..a8c5035f8 100644 --- a/services/msb-deposits/src/shared/constants/metrika.ts +++ b/services/msb-deposits/src/shared/constants/metrika.ts @@ -1,5 +1,21 @@ import { DOC_TYPES } from '@msb/shared'; +const SCREEN_NAME = { + DEPOSITS: 'deposits', + DEPOSITS_CALCULATOR: 'deposits_calculator', + DEPOSITS_PRODUCTS: 'deposits_products', + DEPOSIT_FORM: 'deposit_form', + MNO_FORM: 'mno_form', + GSNO_FORM: 'gsno_form', + DEPOSIT_CONFIRM: 'deposit_confirm', + MNO_CONFIRM: 'mno_confirm', + GSNO_CONFIRM: 'gsno_confirm', + DEPOSIT_EARLY_REFUND: 'deposit_earlyRefund', + DEPOSIT_CANCEL: 'deposit_cancel', + MNO_CANCEL: 'mno_cancel', + GSNO_CANCEL: 'gsno_cancel', +} as const; + const SCREEN_VIEW = { SUCCESS: { [DOC_TYPES.DEPOSIT]: 'deposit_success', @@ -16,4 +32,29 @@ const SCREEN_VIEW = { }, } as const; -export { SCREEN_VIEW }; +const BUTTON_CLICK = { + ELEMENT_NAME: { + DEPOSIT_OFFER: 'deposit_offer', + OPEN_PRODUCT: 'open_product', + CALENDAR_DATE: 'calendar_date', + MY_PRODUCTS: 'my_products', + AGREEMENTS: 'agreements', + ACCOUNTS: 'accounts', + OPEN_DEPOSIT: 'open_deposit', + OPEN_MNO: 'open_mno', + OPEN_GSNO: 'open_gsno', + SIGN: 'sign', + CONFIRM: 'confirm', + SHOW_MORE: 'show_more', + VIOLATED: 'violated', + CONFIRMATION: 'confirmation', + ALL: 'all', + FILTER: 'filter', + EARLY_REFUND: 'early_refund', + CANCEL: 'cancel', + SAVE_DRAFT: 'save_draft', + BEST_RATE: 'best_rate', + }, +} as const; + +export { SCREEN_NAME, SCREEN_VIEW, BUTTON_CLICK }; diff --git a/services/msb-deposits/src/widgets/DepositCalculator/ui/DepositCalculator.tsx b/services/msb-deposits/src/widgets/DepositCalculator/ui/DepositCalculator.tsx index 71d3cb190..9a8e5591d 100644 --- a/services/msb-deposits/src/widgets/DepositCalculator/ui/DepositCalculator.tsx +++ b/services/msb-deposits/src/widgets/DepositCalculator/ui/DepositCalculator.tsx @@ -1,22 +1,26 @@ import { useState } from 'react'; import { StatusModal } from '@fractal-ui/overlays'; import { Title, Text } from '@fractal-ui/styling'; -import { ECO_SERVICES_PATHS } from '@msb/shared'; +import { ECO_SERVICES_PATHS, useYaMetrika, YM_GOALS } from '@msb/shared'; import { initialFormData, LOCALIZATION } from '../constants'; import { CalculatorCardResult } from './CalculatorCardResult'; import { CalculatorForm } from './CalculatorForm'; import * as S from './DepositCalculator.styles'; import { useDepositCalculatorForm } from './useDepositCalculatorForm'; +import { BUTTON_CLICK, SCREEN_NAME } from '@/shared/constants'; import { PageLayout } from '@/shared/ui'; const DepositCalculator = () => { const { handleChangeFormData, calculateData, formData, isCalculateLoading } = useDepositCalculatorForm(); - + const { handleReachGoal } = useYaMetrika(); const [opened, setOpened] = useState(false); - - const handleOpen = () => setOpened(true); + const handleOpen = () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_CALCULATOR]: { element_name: BUTTON_CLICK.ELEMENT_NAME.OPEN_PRODUCT } }, + }); + setOpened(true); + }; const handleClose = () => setOpened(false); - const goToAgreement = () => window.open(ECO_SERVICES_PATHS.TREASURY_AGREEMENT, '_blank'); return ( diff --git a/services/msb-deposits/src/widgets/ProductTable/ui/ExpandedComponent/ExpandedComponentContent.tsx b/services/msb-deposits/src/widgets/ProductTable/ui/ExpandedComponent/ExpandedComponentContent.tsx index 60e416b4f..a145d359f 100644 --- a/services/msb-deposits/src/widgets/ProductTable/ui/ExpandedComponent/ExpandedComponentContent.tsx +++ b/services/msb-deposits/src/widgets/ProductTable/ui/ExpandedComponent/ExpandedComponentContent.tsx @@ -5,14 +5,14 @@ import { OkIcon, PdfIcon } from '@fractal-ui/library'; import type { ModalProps } from '@fractal-ui/overlays'; import { Modal, useSnackbar } from '@fractal-ui/overlays'; import { Text } from '@fractal-ui/styling'; -import { DAYS, getFormattedBalance, pluralize } from '@msb/shared'; +import { DAYS, getFormattedBalance, pluralize, useYaMetrika, YM_GOALS } from '@msb/shared'; import { useHistory } from 'react-router-dom'; import { LOCALIZATION } from '../../constants'; import { getActionsOrder, getCopyData } from '../../lib'; import type { RowDataProps } from '../../model'; import * as S from './ExpandedComponent.styled'; import { SignersContent } from './SignersContent'; -import { PATHS, paymentMethodsMap, documentsTypeMap } from '@/shared/constants'; +import { PATHS, paymentMethodsMap, documentsTypeMap, SCREEN_NAME, BUTTON_CLICK } from '@/shared/constants'; import { fetchDocument } from '@/shared/lib'; interface Props { @@ -39,6 +39,7 @@ const ExpandedComponentContent = ({ row }: Props): ReactElement => { } = row; const history = useHistory(); const { showSnackbarMessage } = useSnackbar(); + const { handleReachGoal } = useYaMetrika(); const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -86,11 +87,26 @@ const ExpandedComponentContent = ({ row }: Props): ReactElement => { }; // TODO: подумать о переносе экшенов сюда mcb-platform-monorepo/services/msb-deposits/src/widgets/ProductTable/constants/common.ts - const cancelDocumentAction = () => history.push(PATHS.CANCEL_DOCUMENT.PATH, { id, docType }); - const earlyRefundAction = () => history.push(PATHS.EARLY_REFUND.PATH, { id }); + const cancelDocumentAction = () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_PRODUCTS]: { element_name: BUTTON_CLICK.ELEMENT_NAME.CANCEL } }, + }); + history.push(PATHS.CANCEL_DOCUMENT.PATH, { id, docType }); + }; + const earlyRefundAction = () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_PRODUCTS]: { element_name: BUTTON_CLICK.ELEMENT_NAME.EARLY_REFUND } }, + }); + history.push(PATHS.EARLY_REFUND.PATH, { id }); + }; const retryAction = () => history.push(PATHS.TREASURY_DEALS.PATH, { id, docType, actionType: 'COPY' }); const editAction = () => history.push(PATHS.TREASURY_DEALS.PATH, { id, docType, actionType: 'EDIT' }); - const confirmAction = () => history.push(PATHS.CONFIRMATION.PATH, { id, docType, actionType: 'CONFIRM' }); + const confirmAction = () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_PRODUCTS]: { element_name: BUTTON_CLICK.ELEMENT_NAME.CONFIRM } }, + }); + history.push(PATHS.CONFIRMATION.PATH, { id, docType, actionType: 'CONFIRM' }); + }; return ( diff --git a/services/msb-deposits/src/widgets/ProductTable/ui/ProductTable.tsx b/services/msb-deposits/src/widgets/ProductTable/ui/ProductTable.tsx index 4b02ab664..5c4c9799c 100644 --- a/services/msb-deposits/src/widgets/ProductTable/ui/ProductTable.tsx +++ b/services/msb-deposits/src/widgets/ProductTable/ui/ProductTable.tsx @@ -1,4 +1,4 @@ -import type { ReactElement } from 'react'; +import { type ReactElement } from 'react'; import { Table, Cell, CELL_TYPE, type CellDataProps, type UnionColumnProps } from '@fractal-ui/table'; import type { FetchNextPageOptions, InfiniteQueryObserverResult, ProductsResponseDto } from '@msb/http'; import { getFormattedBalance } from '@msb/shared'; @@ -108,6 +108,24 @@ const ProductTable = ({ }: ProductTableProps): ReactElement => { const resultData = parseGetPageRespToColumns(productsData); const resultColumns = clientIdsCount > 1 ? columns : columns.filter(el => el.name !== 'organization'); + // const [expandedRows, setExpandedRows] = useState([]); + // const { handleReachGoal } = useYaMetrika(); + + // Обработчик изменения раскрытых строк (TODO: пока ломает подкапотную логику раскрытия, надо будет позже вернуться к этому) + // const handleExpandedRowsChange = useCallback((rows: Array) => { + // setExpandedRows((prevRows) => { + // const prevCount = prevRows.length; + // const currentCount = rows.length; + + // //Если текущее значение раскрытых строк больше предыдущего, то это означает, что пользователь раскрыл expandedComponent, в противном случае он скрыл expandedComponent + // if (currentCount > prevCount) { + // console.log({ [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_PRODUCTS]: { element_name: BUTTON_CLICK.ELEMENT_NAME.SHOW_MORE } } }) + // handleReachGoal(YM_GOALS.BUTTON_CLICK, { [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_PRODUCTS]: { element_name: BUTTON_CLICK.ELEMENT_NAME.SHOW_MORE } } }); + // } + + // return rows + // }); + // }, []); return ( { diff --git a/services/msb-deposits/src/widgets/Products/constants/tabOptions.ts b/services/msb-deposits/src/widgets/Products/constants/tabOptions.ts index 115222d7b..fed412ccc 100644 --- a/services/msb-deposits/src/widgets/Products/constants/tabOptions.ts +++ b/services/msb-deposits/src/widgets/Products/constants/tabOptions.ts @@ -1,18 +1,28 @@ import type { TabOption } from '@msb/fractal-ui-composites'; +import { BUTTON_CLICK } from '@/shared/constants'; -const allTab: TabOption = { - label: 'Все ', +interface ExtendedTabOption extends TabOption { + elementName: string; +} + +const allTab: ExtendedTabOption = { + label: 'Все', value: '0', + elementName: BUTTON_CLICK.ELEMENT_NAME.ALL, }; -const violatedTab: TabOption = { +const violatedTab: ExtendedTabOption = { label: 'Нарушено', value: '1', status: 'warning', + elementName: BUTTON_CLICK.ELEMENT_NAME.VIOLATED, }; -const confirmationTab: TabOption = { +const confirmationTab: ExtendedTabOption = { label: 'Требуют подтверждения', value: '2', status: 'warning', + elementName: BUTTON_CLICK.ELEMENT_NAME.CONFIRMATION, }; -export { allTab, violatedTab, confirmationTab }; +const TabsOptions = [allTab, violatedTab, confirmationTab]; + +export { allTab, violatedTab, confirmationTab, TabsOptions }; diff --git a/services/msb-deposits/src/widgets/Products/ui/ProductsFilters/ui/ProductsFilters.tsx b/services/msb-deposits/src/widgets/Products/ui/ProductsFilters/ui/ProductsFilters.tsx index 0019016c5..ed511bd66 100644 --- a/services/msb-deposits/src/widgets/Products/ui/ProductsFilters/ui/ProductsFilters.tsx +++ b/services/msb-deposits/src/widgets/Products/ui/ProductsFilters/ui/ProductsFilters.tsx @@ -2,11 +2,12 @@ import type { ReactElement } from 'react'; import { useCallback, useMemo, useRef, useEffect } from 'react'; import { createField } from '@fractal-ui/form'; import { Select } from '@msb/fractal-ui-composites'; -import { isEqual, MultiSelect, useAppContext } from '@msb/shared'; +import { isEqual, MultiSelect, useAppContext, useYaMetrika, YM_GOALS } from '@msb/shared'; import { FormSpy, Form } from 'react-final-form'; import { DOCUMENTS_FILTER_VALUES, LOCALIZATION } from '../constants'; import * as S from './ProductsFilters.styles'; import { useFetchedFilters } from '@/entities/filters'; +import { BUTTON_CLICK, SCREEN_NAME } from '@/shared/constants'; import { useFiltersContext } from '@/shared/lib'; import { useSelectMaxWidth } from '@/widgets/Products/ui/ProductsFilters/lib'; @@ -20,7 +21,7 @@ const ProductsFilters = (): ReactElement => { const { organizations } = useAppContext(); const { fetchedFilters } = useFetchedFilters(); const { filters, updateFilter } = useFiltersContext(); - + const { handleReachGoal } = useYaMetrika(); const wrapperRef = useRef(null); const formRef = useRef(null); @@ -43,10 +44,13 @@ const ProductsFilters = (): ReactElement => { const handleChange = useCallback( values => { if (!isEqual(values, filters)) { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_PRODUCTS]: { element_name: BUTTON_CLICK.ELEMENT_NAME.FILTER } }, + }); updateFilter(values.values); } }, - [filters, updateFilter] + [filters, updateFilter, handleReachGoal] ); const EmptyFn = useCallback(() => {}, []); diff --git a/services/msb-deposits/src/widgets/Products/ui/ProductsTableContent.tsx b/services/msb-deposits/src/widgets/Products/ui/ProductsTableContent.tsx index bf29a7954..af7df66a8 100644 --- a/services/msb-deposits/src/widgets/Products/ui/ProductsTableContent.tsx +++ b/services/msb-deposits/src/widgets/Products/ui/ProductsTableContent.tsx @@ -5,11 +5,11 @@ import { Informer } from '@fractal-ui/extended'; import type { TabOption } from '@msb/fractal-ui-composites'; import { Tabs } from '@msb/fractal-ui-composites'; import type { FetchNextPageOptions, InfiniteQueryObserverResult, ProductsResponseDto } from '@msb/http'; -import { pluralize, REQUEST, SystemResponseStatus, UNCONFIRMED } from '@msb/shared'; -import { allTab, confirmationTab, violatedTab, LOCALIZATION } from '../constants'; +import { pluralize, REQUEST, SystemResponseStatus, UNCONFIRMED, useYaMetrika, YM_GOALS } from '@msb/shared'; +import { allTab, confirmationTab, violatedTab, LOCALIZATION, TabsOptions } from '../constants'; import type { TreasuryDealsFilters } from '../constants'; import * as S from './Products.styles'; -import { PATHS } from '@/shared/constants'; +import { PATHS, SCREEN_NAME } from '@/shared/constants'; import { useFiltersContext } from '@/shared/lib'; import { PageLayout, PageHeader } from '@/shared/ui'; import { ProductTable } from '@/widgets/ProductTable'; @@ -60,7 +60,18 @@ const ProductsTableContent = ({ const [currentTab, setCurrentTab] = useState('0'); const [tabs, setTabs] = useState([allTab]); - const tabHandleChange = (tab: string) => setCurrentTab(tab); + const { handleReachGoal } = useYaMetrika(); + const tabHandleChange = (tab: string) => { + const tabElementName = TabsOptions.find(option => option.value === tab)?.elementName; + + if (tabElementName) { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSITS_PRODUCTS]: { element_name: tabElementName } }, + }); + } + + setCurrentTab(tab); + }; const [didAutoSelect, setDidAutoSelect] = useState(false); diff --git a/services/msb-deposits/src/widgets/SignCancelDocuments/constants/constants.ts b/services/msb-deposits/src/widgets/SignCancelDocuments/constants/constants.ts new file mode 100644 index 000000000..2fd3495f5 --- /dev/null +++ b/services/msb-deposits/src/widgets/SignCancelDocuments/constants/constants.ts @@ -0,0 +1,11 @@ +import { DOC_TYPES } from '@msb/shared'; +import { SCREEN_NAME } from '@/shared/constants'; + +const SCREEN_NAME_MATCHER: Record = { + [DOC_TYPES.DEPOSIT]: SCREEN_NAME.DEPOSIT_CANCEL, + [DOC_TYPES.MNO]: SCREEN_NAME.MNO_CANCEL, + [DOC_TYPES.GSNO]: SCREEN_NAME.GSNO_CANCEL, + [DOC_TYPES.OVERNIGHT]: SCREEN_NAME.DEPOSIT_CANCEL, +}; + +export { SCREEN_NAME_MATCHER }; diff --git a/services/msb-deposits/src/widgets/SignCancelDocuments/constants/index.ts b/services/msb-deposits/src/widgets/SignCancelDocuments/constants/index.ts index 1605d3914..67a6514a7 100644 --- a/services/msb-deposits/src/widgets/SignCancelDocuments/constants/index.ts +++ b/services/msb-deposits/src/widgets/SignCancelDocuments/constants/index.ts @@ -1,2 +1,3 @@ export * from './localization'; export * from './endpoints'; +export * from './constants'; diff --git a/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx b/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx index b81058344..2a23c803d 100644 --- a/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx +++ b/services/msb-deposits/src/widgets/SignCancelDocuments/ui/SignCancelDocuments.tsx @@ -2,10 +2,11 @@ import { useEffect } from 'react'; import { Button } from '@fractal-ui/core'; import { openSignModal } from '@msb/crypto'; import type { CancelDocumentDto } from '@msb/http'; -import { useModal, BaseDialog, useRedirect, PATHS, PATHS_DEPOSITS, useYaMetrika, YM_GOALS, DOC_TYPES } from '@msb/shared'; -import { LOCALIZATION } from '../constants'; +import type { DOC_TYPES } from '@msb/shared'; +import { useModal, BaseDialog, useRedirect, PATHS, PATHS_DEPOSITS, useYaMetrika, YM_GOALS } from '@msb/shared'; +import { LOCALIZATION, SCREEN_NAME_MATCHER } from '../constants'; import { useSignCancelDocuments } from './useSignCancelDocuments'; -import { SCREEN_VIEW } from '@/shared/constants'; +import { BUTTON_CLICK, SCREEN_VIEW } from '@/shared/constants'; interface SignCancelDocumentsProps { docType: DOC_TYPES; @@ -24,6 +25,10 @@ const SignCancelDocuments = ({ docType, clientId, cancelDocument, timeExpired, f const toMain = useRedirect(PATHS.HOME); const handleClick = async () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME_MATCHER[docType]]: { element_name: BUTTON_CLICK.ELEMENT_NAME.SIGN } }, + }); + if (signData) { try { const response = await openSignModal({ diff --git a/services/msb-deposits/src/widgets/SignConfirmation/constants/constants.ts b/services/msb-deposits/src/widgets/SignConfirmation/constants/constants.ts new file mode 100644 index 000000000..0d4bd93e0 --- /dev/null +++ b/services/msb-deposits/src/widgets/SignConfirmation/constants/constants.ts @@ -0,0 +1,11 @@ +import { DOC_TYPES } from '@msb/shared'; +import { SCREEN_NAME } from '@/shared/constants'; + +const SCREEN_NAME_MATCHER: Record = { + [DOC_TYPES.DEPOSIT]: SCREEN_NAME.DEPOSIT_CONFIRM, + [DOC_TYPES.MNO]: SCREEN_NAME.MNO_CONFIRM, + [DOC_TYPES.GSNO]: SCREEN_NAME.GSNO_CONFIRM, + [DOC_TYPES.OVERNIGHT]: SCREEN_NAME.DEPOSIT_CONFIRM, +}; + +export { SCREEN_NAME_MATCHER }; diff --git a/services/msb-deposits/src/widgets/SignConfirmation/constants/index.ts b/services/msb-deposits/src/widgets/SignConfirmation/constants/index.ts index 7a8bed41f..428d91d38 100644 --- a/services/msb-deposits/src/widgets/SignConfirmation/constants/index.ts +++ b/services/msb-deposits/src/widgets/SignConfirmation/constants/index.ts @@ -1 +1,2 @@ export * from './localization'; +export * from './constants'; diff --git a/services/msb-deposits/src/widgets/SignConfirmation/ui/SignConfirmation.tsx b/services/msb-deposits/src/widgets/SignConfirmation/ui/SignConfirmation.tsx index ec29d6898..9dc479fc5 100644 --- a/services/msb-deposits/src/widgets/SignConfirmation/ui/SignConfirmation.tsx +++ b/services/msb-deposits/src/widgets/SignConfirmation/ui/SignConfirmation.tsx @@ -11,8 +11,9 @@ import type { import { useTreasuryDealsI18n } from '@msb/http'; import type { AccountDetails } from '@msb/http/model'; import type { DOC_TYPES } from '@msb/shared'; -import { PATHS, useRedirect, BaseDialog, useModal } from '@msb/shared'; -import { LOCALIZATION } from '../constants'; +import { PATHS, useRedirect, BaseDialog, useModal, useYaMetrika, YM_GOALS } from '@msb/shared'; +import { LOCALIZATION, SCREEN_NAME_MATCHER } from '../constants'; +import { BUTTON_CLICK } from '@/shared/constants'; import { handleSign } from '@/widgets/SignConfirmation/lib'; interface AccountsDetailsWrapper { @@ -33,6 +34,7 @@ interface SignConfirmationProps { } const SignConfirmation = (props: SignConfirmationProps) => { + const { handleReachGoal } = useYaMetrika(); const { showModal } = useModal(BaseDialog); const toDeposits = useRedirect(PATHS.DEPOSITS); const toMain = useRedirect(PATHS.HOME); @@ -40,6 +42,10 @@ const SignConfirmation = (props: SignConfirmationProps) => { const { treasuryDealsI18nData } = useTreasuryDealsI18n(); const handleClick = async () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME_MATCHER[docType]]: { element_name: BUTTON_CLICK.ELEMENT_NAME.SIGN } }, + }); + const form = formRef.current; await form.submit(); diff --git a/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx b/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx index bfc0e9545..40e8db975 100644 --- a/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx +++ b/services/msb-deposits/src/widgets/SignEarlyRefund/ui/SignEarlyRefund.tsx @@ -5,7 +5,7 @@ import type { BankAccount, DocumentData } from '@msb/http'; import { BaseDialog, useModal, useRedirect, PATHS as GLOBAL_PATHS, useYaMetrika, YM_GOALS } from '@msb/shared'; import { LOCALIZATION } from '../constants'; import { useSignEarlyRefund } from './useSignEarlyRefund'; -import { PATHS, SCREEN_VIEW } from '@/shared/constants'; +import { BUTTON_CLICK, PATHS, SCREEN_NAME, SCREEN_VIEW } from '@/shared/constants'; interface SignEarlyRefundProps { currentAccount: BankAccount; @@ -23,6 +23,10 @@ const SignEarlyRefund = ({ clientId, currentAccount, refundDocument, fields }: S const toMain = useRedirect(GLOBAL_PATHS.HOME); const handleClick = useCallback(async () => { + handleReachGoal(YM_GOALS.BUTTON_CLICK, { + [YM_GOALS.BUTTON_CLICK]: { [SCREEN_NAME.DEPOSIT_EARLY_REFUND]: { element_name: BUTTON_CLICK.ELEMENT_NAME.SIGN } }, + }); + if (signData) { const response = await openSignModal({ type: 'single', @@ -51,7 +55,7 @@ const SignEarlyRefund = ({ clientId, currentAccount, refundDocument, fields }: S return response; } } - }, [showModal, signData, signService, toDeposits, toMain]); + }, [showModal, signData, signService, toDeposits, toMain, handleReachGoal]); return (