MCBFrontend/mcb-platform-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pull request #1439: feat(TEAMMSBMOB-20493): актуализированы баннеры к РК 3

Browse Source 
Merge in MCB_FE/mcb-platform-monorepo from story/TEAMMSBMOB-20067_rk-3 to develop

* commit '6899a8023b1cb2a9a2e1f83f91a5e42a910e09e2':
  feat(TEAMMSBMOB-20493): актуализированы баннеры к РК 3
This commit is contained in:
Ильдар Смышляев
2025-11-21 14:33:33 +03:00
parent cd0ca52ac1 6899a8023b
commit f08b5bbceb
66 changed files with 291 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared/constants/paths.tsx
+1
View File
@@ -125,6 +125,7 @@ const EXTERNAL_LINKS = {
const CROSS_SALE_PATHS = {
FUEL_CARD: 'https://www.gazprombank.ru/special/a/toplivnaya-karta/',
AVITO: 'https://www.avito.ru/general/gazprombank/',
};
const CROSS_SELLING_JSON = {
packages/shared/ui/AdvertisingBadge/ui/AdvertisingBadge.tsx
+6 -3
View File
@@ -11,18 +11,21 @@ interface Props {
inn: string;
erid: string;
size?: AdvertisingBadgeSize;
variant?: 'dark' | 'light';
}
const AdvertisingBadge = ({ organizationName, inn, erid, size = 'M' }: Props) => {
const AdvertisingBadge = ({ organizationName, inn, erid, size = 'M', variant = 'light' }: Props) => {
const tooltipRef = useRef(null);
const color = variant === 'light' ? 'bg.primary' : 'text.primary';
return (
<>
<S.Badge ref={tooltipRef}>
<Text.P3 color="bg.primary" fontSize={TEXT_SIZES[size]} opacity="0.72">
<Text.P3 color={color} fontSize={TEXT_SIZES[size]} opacity="0.72">
{LOCALIZATION.ADVERTISEMENT}
</Text.P3>
<ContextMenuIcon color="bg.primary" opacity={0.72} size="XS" width={ICON_SIZES[size]} />
<ContextMenuIcon color={color} opacity={0.72} size="XS" width={ICON_SIZES[size]} />
</S.Badge>
<Tooltip isInteracted anchorEl={tooltipRef} maxWidth={328}>
{organizationName && <Text.P3>{organizationName}</Text.P3>}
packages/shared/ui/CloseBannerButton/CloseBannerButton.styles.ts
+9 -3
View File
@@ -1,15 +1,21 @@
import styled from '@emotion/styled';
const CloseIconBox = styled.div(() => ({
type CloseButtonVariant = 'dark' | 'light';
interface CloseIconBoxProps {
variant?: CloseButtonVariant;
}
const CloseIconBox = styled.div<CloseIconBoxProps>(({ variant = 'light' }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '88px',
padding: '8px',
zIndex: 3,
backgroundColor: 'rgba(255, 255, 255, 0.16)',
backgroundColor: variant === 'light' ? 'rgba(255, 255, 255, 0.16)' : 'rgba(30, 34, 46, 0.08)',
backdropFilter: 'blur(5px)',
cursor: 'pointer',
}));
export { CloseIconBox };
export { CloseIconBox, type CloseButtonVariant };
packages/shared/ui/CloseBannerButton/CloseBannerButton.tsx
+3 -2
View File
@@ -4,11 +4,12 @@ import * as S from './CloseBannerButton.styles';
interface Props {
onClick(): void;
size?: IconSize;
variant?: S.CloseButtonVariant;
}
const CloseBannerButton = ({ onClick, size = 'XS' }: Props) => (
const CloseBannerButton = ({ onClick, size = 'XS', variant = 'light' }: Props) => (
<S.CloseIconBox onClick={onClick}>
<CrossIcon color="control.bg" size={size} />
<CrossIcon color={variant === 'light' ? 'control.bg' : 'text.primary'} size={size} />
</S.CloseIconBox>
);
packages/shared/ui/GhostBanners/assets/InternationalTransfers.webp
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

packages/shared/ui/GhostBanners/assets/SalaryProject.webp
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

packages/shared/ui/GhostBanners/assets/businessCardsImage.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

packages/shared/ui/GhostBanners/assets/guaranteesImage.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

packages/shared/ui/GhostBanners/assets/index.ts
+4 -4
View File
@@ -1,7 +1,7 @@
import internationalTransfers from './InternationalTransfers.webp';
import salaryProject from './SalaryProject.webp';
import businessCardsImage from './businessCardsImage.webp';
import guaranteesImage from './guaranteesImage.webp';
export default {
internationalTransfers,
salaryProject,
businessCardsImage,
guaranteesImage,
};
packages/shared/ui/GhostBanners/constants/banners.ts
+19 -15
View File
@@ -1,26 +1,30 @@
import { CROSS_BORDER_AB_PAYMENTS, EXTERNAL_PATHS, type BannerItemDto } from '@msb/shared';
import { EXTERNAL_PATHS, type BannerItemDto } from '@msb/shared';
import icons from '../assets';
const GHOST_BANNERS: BannerItemDto[] = [
{
id: '6856e7d9-d490-4fcb-aa2e-0b9a8d0f7aa5',
text: 'Зарплатный\nпроект',
description: 'Преимущества\nдля всех',
codeName: 'main_page_salary_banner',
imagePath: icons.salaryProject,
gradient: 'radial-gradient(100% 152.25% at 77.26% 100%, #634AE5 13.65%, #242629 100%)',
href: EXTERNAL_PATHS.SALARY_PROJECT,
id: '6856e7d9-d490-4fcb-aa2e-0b9a8d0f7aa6',
text: 'Бизнес-\nкарта',
description: 'Доступ к средствам\nкруглосуточно',
codeName: 'main_page_business_card_banner',
imagePath: icons.businessCardsImage,
gradient: 'radial-gradient(100% 152.25% at 77.26% 100%, #78209F 13.65%, #242629 100%)',
href: EXTERNAL_PATHS.BUSINESS_CARDS,
isExternal: true,
ymCode: 'ghost_banners_business_card',
closeYmCode: 'ghost_banners_business_card_cancel',
},
{
id: '6856e7d9-d490-4fcb-aa2e-0b9a8d0f7aa4',
text: 'Международные\nпереводы',
description: 'Более чем 100 стран,\nв 4 валютах',
codeName: 'main_page_payments_banner',
imagePath: icons.internationalTransfers,
gradient: 'radial-gradient(81.47% 111.43% at 60.35% 105%, #714FF5 13.97%, #38389E 94.67%)',
href: CROSS_BORDER_AB_PAYMENTS.AUTH,
id: '6856e7d9-d490-4fcb-aa2e-0b9a8d0f7aa7',
text: 'Экспресс-\nгарантия',
description: 'Оформите онлайн\nдо 200 млн.рублей ',
codeName: 'main_page_bank_guarantees_banner',
imagePath: icons.guaranteesImage,
gradient: 'radial-gradient(100% 152.25% at 77.26% 100%, #EB549D 5%, #78209F 100%)',
href: EXTERNAL_PATHS.CREDIT_CABINET,
isExternal: true,
ymCode: 'ghost_banners_bank_guarantees',
closeYmCode: 'ghost_banners_bank_guarantees_cancel',
},
];
packages/shared/ui/GhostBanners/model/types.ts
+2 -1
View File
@@ -9,7 +9,8 @@ interface BannerItemDto {
gradient: string;
href: string;
isExternal?: boolean;
ymCode?: Record<string, Record<'element_name', string>>;
ymCode: string;
closeYmCode: string;
dealType?: BestRateDealType;
}
packages/shared/ui/GhostBanners/ui/GhostBanners/GhostBanners.tsx
+5 -1
View File
@@ -1,5 +1,6 @@
import { type ReactElement } from 'react';
import { Skeleton } from '@fractal-ui/core';
import type { YmPage } from '@msb/shared';
import { MEDIA, useImageItemsLoader, useMediaQuery } from '@msb/shared';
import { BANNER_WIDTH, MIN_NUM_SCROLLING_ELEMENTS, SMALL_BANNER_WIDTH, SMALL_MOBILE_MEDIA } from '../../constants';
import { useShowBanners, type BannerItemDto } from '../../model';
@@ -8,10 +9,11 @@ import * as S from './GhostBanners.styles';
interface Props {
banners: BannerItemDto[];
page: YmPage;
carouselOnMobile?: boolean;
}
const GhostBanners = ({ banners, carouselOnMobile = true }: Props): ReactElement => {
const GhostBanners = ({ banners, carouselOnMobile = true, page }: Props): ReactElement => {
const { loadedImageItems, filterItems } = useImageItemsLoader(banners);
const { removeItem } = useShowBanners(banners, filterItems);
@@ -27,6 +29,7 @@ const GhostBanners = ({ banners, carouselOnMobile = true }: Props): ReactElement
const renderBanner = (banner: typeof loadedImageItems[number]) => (
<StaticBanner
closeYmCode={banner.closeYmCode}
dealType={banner.dealType}
description={banner.description}
gradient={banner.gradient}
@@ -34,6 +37,7 @@ const GhostBanners = ({ banners, carouselOnMobile = true }: Props): ReactElement
imagePath={banner.imagePath}
isExternal={banner.isExternal}
isMobile={isMobile}
page={page}
shouldExpandTitleWidth={loadedImageItems.length === 1}
text={banner.text}
ymCode={banner.ymCode}
packages/shared/ui/GhostBanners/ui/StaticBanner/ui/StaticBanner.tsx
+11 -3
View File
@@ -4,7 +4,7 @@ import { Text, Title } from '@fractal-ui/styling';
import { FEATURE_TOGGLE_NAMES, type BestRateDealType } from '@msb/http';
import { Flex, useBestRatesMainPage, useFeatureToggles } from '@msb/shared';
import { Link } from 'react-router-dom';
import { useYaMetrika, YM_GOALS } from '../../../../../yandex-metrika';
import { useYaMetrika, YM_GOALS, type YmPage } from '../../../../../yandex-metrika';
import * as S from './StaticBanner.styles';
interface Props {
@@ -15,7 +15,9 @@ interface Props {
isMobile: boolean;
shouldExpandTitleWidth: boolean;
href: string;
ymCode?: Record<string, Record<'element_name', string>>;
page: YmPage;
ymCode: string;
closeYmCode: string;
isExternal?: boolean;
dealType?: BestRateDealType;
onClose?(): void;
@@ -30,18 +32,24 @@ const StaticBanner: FC<Props> = ({
onClose,
href,
ymCode,
closeYmCode,
isExternal,
dealType,
page,
}) => {
const { handleReachGoal } = useYaMetrika();
const handleCloseClick = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
handleReachGoal(YM_GOALS.BUTTON_CLICK, { [YM_GOALS.BUTTON_CLICK]: { [page]: { element_name: closeYmCode } } });
onClose?.();
};
const handleClick = () => {
ymCode && handleReachGoal(YM_GOALS.BUTTON_CLICK, { [YM_GOALS.BUTTON_CLICK]: ymCode });
handleReachGoal(YM_GOALS.BUTTON_CLICK, { [YM_GOALS.BUTTON_CLICK]: { [page]: { element_name: ymCode } } });
};
const { isEnabled: isDynamicBannersEnabled } = useFeatureToggles(FEATURE_TOGGLE_NAMES.MAIN_PAGE_DYNAMIC_BANNERS);
packages/shared/ui/PromoBanner/PromoBanner.styles.ts
+1 -1
View File
@@ -13,7 +13,7 @@ const Image = styled.img({
position: 'absolute',
right: 0,
bottom: 0,
height: '174px',
height: '269px',
});
const Content = styled.div({
packages/shared/ui/PromoBanner/PromoBanner.tsx
+3 -1
View File
@@ -16,6 +16,7 @@ interface PromoBannerProps {
image: string;
background: string;
navigateTo(): void;
closeYmCode: string;
buttonText?: string;
className?: string;
dealType?: BestRateDealType;
@@ -32,8 +33,9 @@ const PromoBanner: FC<PromoBannerProps> = ({
background,
navigateTo,
dealType,
closeYmCode,
}) => {
const { shouldRender, onClose } = usePromoBanner({ bannerId: id, codeName });
const { shouldRender, onClose } = usePromoBanner({ bannerId: id, codeName, closeYmCode });
const { isEnabled: isDynamicBannersEnabled } = useFeatureToggles(FEATURE_TOGGLE_NAMES.MAIN_PAGE_DYNAMIC_BANNERS);
packages/shared/ui/PromoBanner/usePromoBanner.ts
+7 -2
View File
@@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { getCookie, setCookie } from '@msb/shared';
import { getCookie, setCookie, useYaMetrika, YM_GOALS } from '@msb/shared';
const BANNER_VIEWS_LS_KEY = 'promo_banner_views';
const COOKIE_DISABLED = 'disabled';
@@ -9,6 +9,7 @@ const BANNER_VIEWS_COUNTER = 3;
interface UsePromoBannerProps {
bannerId: string;
codeName: string;
closeYmCode: string;
}
/**
@@ -28,7 +29,7 @@ interface UsePromoBannerProps {
* @returns OnClose - Функция для закрытия баннера (увеличивает счетчик).
**/
const usePromoBanner = ({ bannerId, codeName }: UsePromoBannerProps) => {
const usePromoBanner = ({ bannerId, codeName, closeYmCode }: UsePromoBannerProps) => {
const [shouldRender, setShouldRender] = useState(false);
const [isInitialized, setIsInitialized] = useState(false);
@@ -90,7 +91,11 @@ const usePromoBanner = ({ bannerId, codeName }: UsePromoBannerProps) => {
}
};
const { handleReachGoal } = useYaMetrika();
const handleClose = async () => {
handleReachGoal(YM_GOALS.BUTTON_CLICK, { [YM_GOALS.BUTTON_CLICK]: { main_page: { element_name: closeYmCode } } });
const currentViews = getBannerViews();
const newViews = currentViews + 1;
packages/shared/yandex-metrika/index.ts
+1
View File
@@ -2,3 +2,4 @@ export * from './useYaMetrika';
export * from './YaMetrikaReachGoal';
export * from './constants';
export * from './initYaMetrika';
export * from './types';
packages/shared/yandex-metrika/types.ts
+3
View File
@@ -0,0 +1,3 @@
type YmPage = 'main_page' | 'services';
export type { YmPage };
services/msb-host/public/product-carousel/product-carousel-data.json
+7 -2
View File
@@ -32,8 +32,13 @@
"saleGradient": "",
"isGift": true,
"imagePath": "/product-carousel/assets/gift.webp",
"navigatePath": "https://sb-service.softbalance.ru/form/pages/gpb/",
"ymCode": "your_products_gift"
"navigatePath": "https://www.avito.ru/general/gazprombank/",
"ymCode": "your_products_gift",
"advertisingInfo": {
"organization": "ООО «КЕХ еКоммерц»",
"inn": "7710668349",
"erid": "2VtzqvFpKE9"
}
},
{
"id": 4,
services/msb-host/public/stories/assets/miniature_12.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

services/msb-host/public/stories/assets/miniature_13.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

services/msb-host/public/stories/assets/story_image_12.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

services/msb-host/public/stories/assets/story_image_13.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

services/msb-host/public/stories/stories-data.json
+27 -27
View File
@@ -2,25 +2,25 @@
"stories": [
{
"id": "0001",
"image": "/stories/assets/miniature_1.webp",
"name": "Счёт\nбесплатно",
"image": "/stories/assets/miniature_12.webp",
"name": "Счёт за 0 ₽",
"ymCode": "stories_slide_account",
"gradient": "sale2",
"items": [
{
"id": "1001",
"gradient": "sale2",
"image": "/stories/assets/story_image_1.webp",
"image": "/stories/assets/story_image_12.webp",
"showTime": 10000,
"content": {
"title": "Счёт для вашего бизнеса",
"description": "5 тарифов для выгодных расчётов\nв рублях и валюте",
"description": "Откройте счёт бесплатно и выберите удобный тариф для расчётов в рубляхи валюте",
"buttons": [
{
"link": "/open-account/new",
"linkType": "eco",
"ymCode": "stories_slide_account_open_account",
"text": "Открыть счёт"
"text": "Отправить заявку"
}
]
}
@@ -29,25 +29,25 @@
},
{
"id": "0002",
"image": "/stories/assets/miniature_4.webp",
"name": "Бизнес-карта\nОнлайн",
"ymCode": "stories_slide_business_cards",
"gradient": "sale2",
"image": "/stories/assets/miniature_13.webp",
"name": "Зарплатный проект",
"ymCode": "stories_slide_salary_project",
"gradient": "sale4",
"items": [
{
"id": "1002",
"gradient": "sale2",
"image": "/stories/assets/story_image_4.webp",
"gradient": "sale4",
"image": "/stories/assets/story_image_13.webp",
"showTime": 10000,
"content": {
"title": "Бизнес-карта",
"description": "Оформите бизнес-карту для оплаты личных покупок и затрат по бизнесу",
"title": "Зарплатный проект",
"description": "Выгодное предложение для вашего бизнеса. Бесплатное обслуживание, быстрое зачисление денежных средств, упрощенный документооборот и персональный менеджер",
"buttons": [
{
"link": "/business-cards/card-issue",
"link": "/zp",
"linkType": "eco",
"text": "Выпустить карту",
"ymCode": "stories_slide_business_cards_open_card"
"text": "Подробнее",
"ymCode": "stories_slide_salary_project_more"
}
]
}
@@ -110,25 +110,25 @@
},
{
"id": "0005",
"image": "/stories/assets/miniature_5.webp",
"name": "Экспресс-гарантия",
"ymCode": "stories_slide_bank_guarantees",
"gradient": "sale6",
"image": "/stories/assets/miniature_4.webp",
"name": "Бизнес-карта\nОнлайн",
"ymCode": "stories_slide_business_cards",
"gradient": "sale2",
"items": [
{
"id": "1005",
"gradient": "sale6",
"image": "/stories/assets/story_image_5.webp",
"gradient": "sale2",
"image": "/stories/assets/story_image_4.webp",
"showTime": 10000,
"content": {
"title": "Электронная\nбанковская гарантия",
"description": "Оформите банковскую гарантию онлайн\nот 10 минут на сумму до 200 млн.рублей.\nБез залога и поручителей.",
"title": "Бизнес-карта",
"description": "Оформите бизнес-карту для оплаты личных покупок и затрат по бизнесу",
"buttons": [
{
"link": "/credit-cabinet/limits",
"link": "/business-cards/card-issue",
"linkType": "eco",
"text": "Отправить заявку",
"ymCode": "stories_slide_bank_guarantees_application"
"text": "Выпустить карту",
"ymCode": "stories_slide_business_cards_open_card"
}
]
}
services/msb-host/src/pages/ServicesPage/constants/banners.ts
-18
View File
@@ -1,18 +0,0 @@
import { type BannerItemDto, GHOST_BANNERS } from '@msb/shared';
const banners: BannerItemDto[] = [
{
...GHOST_BANNERS[0],
id: 'services_salary_banner_id',
codeName: 'services_accounts_banner',
ymCode: { services: { element_name: 'ghost_banners_salary_project' } },
},
{
...GHOST_BANNERS[1],
id: 'services_payments_banner_id',
codeName: 'services_payments_banner',
ymCode: { services: { element_name: 'ghost_banners_payments' } },
},
];
export { banners };
services/msb-host/src/pages/ServicesPage/constants/index.ts
-1
View File
@@ -1,4 +1,3 @@
export * from './services';
export * from './chips';
export * from './localization';
export * from './banners';
services/msb-host/src/pages/ServicesPage/ui/ServicesPage.tsx
+3 -2
View File
@@ -8,6 +8,7 @@ import {
EXTERNAL_PATHS,
Footer,
FullVersion,
GHOST_BANNERS,
GhostBanners,
MEDIA,
PageLayoutWithSections,
@@ -16,7 +17,7 @@ import {
useYaMetrika,
YM_GOALS,
} from '@msb/shared';
import { banners, SERVICES_CHIPS } from '../constants';
import { SERVICES_CHIPS } from '../constants';
import LOCALIZATION from '../constants/localization';
import type { ServicesChipValue } from '../model';
import * as S from './ServicesPage.styles';
@@ -64,7 +65,7 @@ const ServicesPage = () => {
footer={<Footer />}
>
<S.PageWrapper>
<GhostBanners banners={banners} />
<GhostBanners banners={GHOST_BANNERS} page="services" />
<S.ServicesWithTabs>
<ChipsGroup
inverted
services/msb-host/src/widgets/AcrossBanner/assets/AcrossBannerImage.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

services/msb-host/src/widgets/AcrossBanner/assets/Car.webp
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

services/msb-host/src/widgets/AcrossBanner/assets/index.ts
+2 -2
View File
@@ -1,3 +1,3 @@
import carImagePath from './Car.webp';
import acrossBannerImage from './AcrossBannerImage.webp';
export { carImagePath };
export { acrossBannerImage };
services/msb-host/src/widgets/AcrossBanner/constants/advertisingBadgeData.ts
-7
View File
@@ -1,7 +0,0 @@
const ADVERTISING_MAIN_PAGE_DATA = {
organization: 'ООО «Газпромнефть Региональные Продажи»',
inn: '4703105075',
erid: '2VtzqwqugVc',
};
export { ADVERTISING_MAIN_PAGE_DATA };
services/msb-host/src/widgets/AcrossBanner/constants/banner.ts
+17
View File
@@ -0,0 +1,17 @@
import { CROSS_SALE_PATHS } from '@msb/shared';
import type { AcrossBannerModel } from '../model';
const acrossBanner: AcrossBannerModel = {
title: 'Бонус за регистрацию на платформе для клиентов Газпромбанка',
saleGradient: 'sale2',
ymCode: 'wide_banner_avito_more',
closeYmCode: 'wide_banner_avito_cancel',
adBadgeData: {
organization: 'ООО «КЕХ еКоммерц»',
inn: '7710668349',
erid: '2VtzqvFpKE9',
},
link: CROSS_SALE_PATHS.AVITO,
};
export { acrossBanner };
services/msb-host/src/widgets/AcrossBanner/constants/index.ts
+1 -2
View File
@@ -1,4 +1,3 @@
export * from './localization';
export * from './advertisingBadgeData';
export * from './constants';
export * from './ymCodes';
export * from './banner';
services/msb-host/src/widgets/AcrossBanner/constants/localization.ts
-2
View File
@@ -1,6 +1,4 @@
const LOCALIZATION = {
FUEL_DISCOUNT_CARDS: 'Скидка на топливо и ассортимент по топливным картам',
FUEL_DISCOUNT_CARDS_SHORT: 'Скидка по топливным картам',
MORE_DETAILS: 'Подробнее',
};
services/msb-host/src/widgets/AcrossBanner/constants/ymCodes.ts
-3
View File
@@ -1,3 +0,0 @@
const ACROSS_BANNER_MAIN_PAGE_YM_CODE = 'wide_banner_gpn-trade_fuel_card_more';
export { ACROSS_BANNER_MAIN_PAGE_YM_CODE };
services/msb-host/src/widgets/AcrossBanner/model/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './types';
services/msb-host/src/widgets/AcrossBanner/model/types.ts
+17
View File
@@ -0,0 +1,17 @@
import type { SALE_GRADIENTS } from '@msb/shared';
interface AcrossBannerModel {
title: string;
shortTitle?: string;
ymCode: string;
closeYmCode: string;
adBadgeData?: {
organization: string;
inn: string;
erid: string;
};
saleGradient: keyof typeof SALE_GRADIENTS;
link: string;
}
export type { AcrossBannerModel };
services/msb-host/src/widgets/AcrossBanner/ui/AcrossBanner.styles.ts
+3 -7
View File
@@ -6,6 +6,7 @@ import { MEDIA, SALE_GRADIENTS } from '@msb/shared';
const Banner = styled.div<{ $saleGradient: keyof typeof SALE_GRADIENTS }>`
position: relative;
width: 100%;
min-height: 64px;
height: 64px;
padding: 8px;
display: flex;
@@ -22,7 +23,8 @@ const Banner = styled.div<{ $saleGradient: keyof typeof SALE_GRADIENTS }>`
flex-direction: row-reverse;
justify-content: space-between;
gap: 8px;
height: 80px;
min-height: 80px;
height: auto;
}
@media ${MEDIA.mobile} {
@@ -37,12 +39,6 @@ const Image = styled.img`
margin-right: 52px;
}
@media ${MEDIA.mobile} {
height: 60px;
position: absolute;
right: 0;
}
@media (max-width: 375px) {
display: none;
}
services/msb-host/src/widgets/AcrossBanner/ui/AcrossBanner.tsx
+20 -14
View File
@@ -2,21 +2,25 @@ import { useRef, useState } from 'react';
import {
AdvertisingBadge,
CloseBannerButton,
CROSS_SALE_PATHS,
Flex,
MEDIA,
SmoothAutoHeight,
useCrossSaleLink,
useMediaQuery,
useYaMetrika,
YM_GOALS,
} from '@msb/shared';
import { carImagePath } from '../assets';
import { ACROSS_BANNER_KEY, ACROSS_BANNER_MAIN_PAGE_YM_CODE, ADVERTISING_MAIN_PAGE_DATA, LOCALIZATION } from '../constants';
import { acrossBannerImage } from '../assets';
import { ACROSS_BANNER_KEY, acrossBanner, LOCALIZATION } from '../constants';
import * as S from './AcrossBanner.styles';
const AcrossBanner = () => {
const [isOpened, setIsOpened] = useState(!sessionStorage[ACROSS_BANNER_KEY]);
const { handleReachGoal } = useYaMetrika();
const handleCloseBanner = () => {
handleReachGoal(YM_GOALS.BUTTON_CLICK, { [YM_GOALS.BUTTON_CLICK]: { main_page: { element_name: acrossBanner.closeYmCode } } });
setIsOpened(false);
sessionStorage[ACROSS_BANNER_KEY] = true;
};
@@ -31,35 +35,37 @@ const AcrossBanner = () => {
const handleClickMoreDetails = () => {
openLink({
navigate: {
path: CROSS_SALE_PATHS.FUEL_CARD,
path: acrossBanner.link,
},
yaMetrika: {
page: 'main_page',
ymCode: ACROSS_BANNER_MAIN_PAGE_YM_CODE,
ymCode: acrossBanner.ymCode,
},
});
};
return (
<SmoothAutoHeight elementRef={bannerRef} isCollapsed={!isOpened}>
<S.Banner ref={bannerRef} $saleGradient="sale4">
<S.Image src={carImagePath} />
<S.Banner ref={bannerRef} $saleGradient={acrossBanner.saleGradient}>
<S.Image src={acrossBannerImage} />
<S.Content>
{/* // цвет из кросс сейла, нет в палитре фрактала */}
<S.Title color="#F4F4F4">{isMobile ? LOCALIZATION.FUEL_DISCOUNT_CARDS_SHORT : LOCALIZATION.FUEL_DISCOUNT_CARDS}</S.Title>
<S.Title color="#F4F4F4">{isMobile ? acrossBanner.shortTitle || acrossBanner.title : acrossBanner.title}</S.Title>
<Flex row flexDirection={isMobileOrTablet ? 'row-reverse' : 'row'} gap={isMobileOrTablet ? '16px' : '24px'}>
<AdvertisingBadge
erid={ADVERTISING_MAIN_PAGE_DATA.erid}
inn={ADVERTISING_MAIN_PAGE_DATA.inn}
organizationName={ADVERTISING_MAIN_PAGE_DATA.organization}
/>
{acrossBanner.adBadgeData && (
<AdvertisingBadge
erid={acrossBanner.adBadgeData.erid}
inn={acrossBanner.adBadgeData.inn}
organizationName={acrossBanner.adBadgeData.organization}
/>
)}
<S.MoreButton dataAction="more" size="S" onClick={handleClickMoreDetails}>
{LOCALIZATION.MORE_DETAILS}
</S.MoreButton>
</Flex>
</S.Content>
<S.CloseButtonWrapper>
<CloseBannerButton onClick={handleCloseBanner} />
<CloseBannerButton variant="dark" onClick={handleCloseBanner} />
</S.CloseButtonWrapper>
</S.Banner>
</SmoothAutoHeight>
services/msb-host/src/widgets/Sidebar/ui/Sidebar.tsx
+11 -1
View File
@@ -47,7 +47,17 @@ const Sidebar: FC<Props> = ({ modules = [] }) => {
if (item.path in LIST_OF_REDIRECTS) {
return (
<S.StyledExternalLink key={item.title} href={LIST_OF_REDIRECTS[item.path as PATHS]} rel="noopener noreferrer" target="_blank">
<S.StyledExternalLink
key={item.title}
href={LIST_OF_REDIRECTS[item.path as PATHS]}
rel="noopener noreferrer"
target="_blank"
onClick={() =>
handleReachGoal(YM_GOALS.BUTTON_CLICK, {
[YM_GOALS.BUTTON_CLICK]: { sidebar: { element_name: `menu_actions_${item.ymCode}` } },
})
}
>
<SidebarItem icon={icon} isDesktop={isDesktop}>
{item.title}
</SidebarItem>
services/msb-main-page/src/entities/GhostAccount/__tests__/GhostAccount.test.tsx
+1
View File
@@ -8,6 +8,7 @@ import { GhostAccount } from '../ui';
const onCloseMock = jest.fn();
const ghostText = 'Призрак';
const emptyGhostAccountProps: Props = {
imagePath: '',
badgeText: '',
text: ghostText,
isDefaultOpened: true,
services/msb-main-page/src/entities/GhostAccount/assets/heart.webp
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

services/msb-main-page/src/entities/GhostAccount/assets/index.ts
-3
View File
@@ -1,3 +0,0 @@
import heartImage from './heart.webp';
export { heartImage };
services/msb-main-page/src/entities/GhostAccount/ui/GhostAccount.tsx
+3 -3
View File
@@ -4,7 +4,6 @@ import { Badge } from '@fractal-ui/extended';
import { Text } from '@fractal-ui/styling';
import type { DOC_TYPES } from '@msb/shared';
import { MEDIA, SmoothAutoHeight, useCrossSaleLink, useMediaQuery } from '@msb/shared';
import { heartImage } from '../assets';
import * as S from './GhostAccount.styles';
interface Props {
@@ -14,9 +13,10 @@ interface Props {
isDefaultOpened: boolean;
onClose(): void;
ymCode?: string;
imagePath: string;
}
const GhostAccount = ({ badgeText, text, navigateTo, isDefaultOpened, onClose, ymCode }: Props) => {
const GhostAccount = ({ badgeText, text, navigateTo, isDefaultOpened, onClose, ymCode, imagePath }: Props) => {
const isMobile = useMediaQuery(MEDIA.mobile);
const [isOpened, setIsOpened] = useState(isDefaultOpened);
@@ -48,7 +48,7 @@ const GhostAccount = ({ badgeText, text, navigateTo, isDefaultOpened, onClose, y
return (
<SmoothAutoHeight elementRef={accountRef} isCollapsed={!isOpened}>
<S.Account ref={accountRef} onClick={handleClick}>
<S.Image src={heartImage} />
<S.Image src={imagePath} />
<S.Main>
<S.Head>
<Badge size="XS" type="info">
services/msb-main-page/src/entities/ProductAdSlide/ui/ProductAdSlide.styles.ts
+4 -3
View File
@@ -10,6 +10,7 @@ const GiftSlide = styled.a`
text-decoration: none;
display: block;
cursor: pointer;
position: relative;
`;
const GiftImage = styled.img`
@@ -79,11 +80,11 @@ const Icon = styled.img`
object-fit: contain;
`;
const AdBadgeWrapper = styled.div`
const AdBadgeWrapper = styled.div<{ $isGift?: boolean }>`
position: absolute;
bottom: 0;
left: 0;
margin: 8px 12px;
${({ $isGift }) => ($isGift ? 'right: 0;' : 'left: 0;')}
margin: ${({ $isGift }) => ($isGift ? '0' : '8px 12px')};
`;
export { GiftSlide, Head, Icon, ProductDescription, ProductTitle, Slide, GiftImage, AdBadgeWrapper };
services/msb-main-page/src/entities/ProductAdSlide/ui/ProductAdSlide.tsx
+11
View File
@@ -33,6 +33,17 @@ const ProductAdSlide = ({ productAd }: Props) => {
return (
<S.GiftSlide href={productAd.navigatePath} onClick={(event: React.MouseEvent<HTMLAnchorElement>) => handleClick(event)}>
<S.GiftImage src={productAd.imagePath} />
{productAd.advertisingInfo && (
<S.AdBadgeWrapper $isGift>
<AdvertisingBadge
erid={productAd.advertisingInfo.erid}
inn={productAd.advertisingInfo.inn}
organizationName={productAd.advertisingInfo.organization}
size="S"
variant="dark"
/>
</S.AdBadgeWrapper>
)}
</S.GiftSlide>
);
}
services/msb-main-page/src/pages/MainPage/assets/abPaymentsImage.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

services/msb-main-page/src/pages/MainPage/assets/index.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import abPaymentsImage from './abPaymentsImage.webp';
import megaBannerHeader from './megaBannerHeader@2x.webp';
import promoAccount from './promo-account.webp';
const Icons = { promoAccount } as const;
const Icons = { abPaymentsImage } as const;
type IconName = keyof typeof Icons;
services/msb-main-page/src/pages/MainPage/assets/promo-account.webp
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

services/msb-main-page/src/pages/MainPage/constants/banners.ts
+11 -29
View File
@@ -1,35 +1,17 @@
import {
DOC_TYPES,
EXTERNAL_PATHS,
GHOST_BANNERS,
PATHS_DEPOSITS,
TEXT_RATE_KEY,
type BannerItemDto,
type MegaBannerModel,
} from '@msb/shared';
import { CROSS_BORDER_AB_PAYMENTS, DOC_TYPES, PATHS_DEPOSITS, TEXT_RATE_KEY, type MegaBannerModel } from '@msb/shared';
import { Icons, megaBannerHeader } from '../assets';
import type { PromoBanner } from '@/shared/model';
const banners: BannerItemDto[] = [
{
...GHOST_BANNERS[0],
ymCode: { main_page: { element_name: 'ghost_banners_salary_project' } },
},
{
...GHOST_BANNERS[1],
ymCode: { main_page: { element_name: 'ghost_banners_payments' } },
},
];
const promoBanner: PromoBanner = {
id: 'main_page_promo_banner_account_id',
codeName: 'main_page_promo_banner_account',
title: 'Откройте счёт\nдля бизнеса',
description: 'Бесплатно',
image: Icons.promoAccount,
link: EXTERNAL_PATHS.OPEN_NEW_ACCOUNT,
background: 'linear-gradient(134.28deg, #77209E 7.04%, #C5439E 100%)',
ymCode: 'right_side_banner_account_more',
id: 'main_page_promo_banner_ab_payments_id',
codeName: 'main_page_promo_banner_ab_payments',
title: 'Переводы за границу',
description: 'В 7 валютах, более чем\nв 70 стран',
image: Icons.abPaymentsImage,
link: CROSS_BORDER_AB_PAYMENTS.AUTH,
background: 'linear-gradient(136.47deg, #013895 0%, #7D20D4 58.93%, #2690E2 97.56%)',
ymCode: 'right_side_banner_ab_payments_more',
closeYmCode: 'right_side_banner_ab_payments_cancel',
};
const megaBanner: MegaBannerModel = {
@@ -41,4 +23,4 @@ const megaBanner: MegaBannerModel = {
image: megaBannerHeader,
};
export { banners, promoBanner, megaBanner };
export { promoBanner, megaBanner };
services/msb-main-page/src/pages/MainPage/ui/MainPage.tsx
+3 -2
View File
@@ -8,6 +8,7 @@ import {
EXTERNAL_PATHS,
Footer,
FullVersion,
GHOST_BANNERS,
GhostBanners,
GradientButton,
MAIN_PAGE_CONTENT_GAP,
@@ -21,7 +22,7 @@ import {
useYaMetrika,
YM_GOALS,
} from '@msb/shared';
import { banners, LOCALIZATION, megaBanner, promoBanner } from '../constants';
import { LOCALIZATION, megaBanner, promoBanner } from '../constants';
import { useHasOperationHistoryPermission, useMegaBanner } from '../lib';
import * as S from './MainPage.styles';
import { Balance } from '@/widgets/Balance';
@@ -94,7 +95,7 @@ const MainPage = (): ReactElement => {
</S.OpenNewProduct>
)}
<FinancialDashboard />
<GhostBanners banners={banners} />
<GhostBanners banners={GHOST_BANNERS} page="main_page" />
{isOperationHistoryAllowed && <OperationsHistory />}
<ProductCarousel />
services/msb-main-page/src/shared/model/promoBanner/types.ts
+1
View File
@@ -9,6 +9,7 @@ interface PromoBanner {
link: string;
background: string;
ymCode: string;
closeYmCode: string;
dealType?: BestRateDealType;
}
services/msb-main-page/src/widgets/Balance/constants/banners.ts
+1 -1
View File
@@ -35,7 +35,7 @@ const BALANCE_BANNERS: BalanceBannerSlide[] = [
},
{
id: '444',
text: 'Неснижаемый остаток\nпо счетам',
text: 'Неснижаемый\nостаток\nпо счетам',
imagePath: groupAccountsImagePath,
saleGradient: 'sale1',
navigatePath: PATHS_DEPOSITS.TREASURY_DEALS,
services/msb-main-page/src/widgets/Balance/ui/BalanceBanner/BalanceBanner.styles.ts
+5 -4
View File
@@ -7,6 +7,7 @@ const Banner = styled.div<{ $saleGradient: keyof typeof SALE_GRADIENTS }>(({ the
minWidth: '100%',
height: '100px',
padding: '12px 16px',
paddingTop: '8px',
background: SALE_GRADIENTS[$saleGradient],
display: 'flex',
flexDirection: 'column',
@@ -24,12 +25,12 @@ const Banner = styled.div<{ $saleGradient: keyof typeof SALE_GRADIENTS }>(({ the
const SlidesCounter = styled.div`
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
margin: 12px 16px;
z-index: 2;
display: flex;
gap: 4px;
margin: 12px 16px;
`;
const SlideDot = styled.div<{ $isActive: boolean }>(({ theme, $isActive }) => ({
@@ -64,15 +65,15 @@ const CloseIconBox = styled.div(() => ({
const Image = styled.img`
position: absolute;
bottom: 0;
right: 0;
bottom: 0;
height: 100%;
`;
const BannerWrapper = styled.div`
position: relative;
border-radius: 10px;
overflow: hidden;
border-radius: 10px;
`;
const BannerList = styled.div<{ $selectedBannerIndex: number }>(({ $selectedBannerIndex }) => ({
services/msb-main-page/src/widgets/FinancialDashboard/assets/accountsGhostImage.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

services/msb-main-page/src/widgets/FinancialDashboard/assets/depositsGhostImage.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

services/msb-main-page/src/widgets/FinancialDashboard/assets/index.ts
+4
View File
@@ -0,0 +1,4 @@
import accountsGhostImage from './accountsGhostImage.webp';
import depositsGhostImage from './depositsGhostImage.webp';
export { accountsGhostImage, depositsGhostImage };
services/msb-main-page/src/widgets/FinancialDashboard/constants/banners.ts
+28
View File
@@ -0,0 +1,28 @@
import { DOC_TYPES, PATHS_DEPOSITS } from '@msb/shared';
import { accountsGhostImage, depositsGhostImage } from '../assets';
import type { FinanceChipValue, TabGhostBanner } from '../model';
const ghostBanners: Record<FinanceChipValue, TabGhostBanner> = {
accounts: {
imagePath: accountsGhostImage,
title: 'Перейти к оформлению',
badgeText: 'Зарабатывай на остатках',
navigate: {
link: PATHS_DEPOSITS.TREASURY_DEALS,
docType: DOC_TYPES.MNO,
},
ymCode: 'tabs_ghost_products_mno_open',
},
deposits: {
imagePath: depositsGhostImage,
title: 'Перейти к оформлению',
badgeText: 'Депозит на выгодных условиях',
navigate: {
link: PATHS_DEPOSITS.TREASURY_DEALS,
docType: DOC_TYPES.DEPOSIT,
},
ymCode: 'tabs_ghost_products_deposit_open',
},
};
export { ghostBanners };
services/msb-main-page/src/widgets/FinancialDashboard/constants/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export * from './accounts';
export * from './constants';
export * from './localization';
export * from './ymCodes';
export * from './banners';
services/msb-main-page/src/widgets/FinancialDashboard/constants/ymCodes.ts
-4
View File
@@ -1,4 +0,0 @@
const GHOST_MNO_YM_CODE = 'tabs_ghost_products_mno_open';
const GHOST_DEPOSIT_YM_CODE = 'tabs_ghost_products_deposit_open';
export { GHOST_DEPOSIT_YM_CODE, GHOST_MNO_YM_CODE };
services/msb-main-page/src/widgets/FinancialDashboard/model/types.ts
+14 -2
View File
@@ -1,5 +1,17 @@
import type { FINANCE_CHIPS_OPTIONS } from '../constants/constants';
import type { DOC_TYPES } from '@msb/shared';
import type { FINANCE_CHIPS_OPTIONS } from '../constants';
type FinanceChipValue = typeof FINANCE_CHIPS_OPTIONS[number]['value'];
export type { FinanceChipValue };
interface TabGhostBanner {
title: string;
badgeText: string;
imagePath: string;
navigate: {
link: string;
docType?: DOC_TYPES;
};
ymCode: string;
}
export type { FinanceChipValue, TabGhostBanner };
services/msb-main-page/src/widgets/FinancialDashboard/ui/CreditAccounts/components/CreditAccounts.tsx
+1
View File
@@ -54,6 +54,7 @@ const CreditAccounts = ({ creditAccounts, hasError, isGhostAccountOpened, onClos
ghostAccount={
<GhostAccount
badgeText={LOCALIZATION.CREDIT_FOR_AMOUNT}
imagePath=""
isDefaultOpened={isGhostAccountOpened}
navigateTo={{ href: EXTERNAL_PATHS.CREDIT_ACCOUNT, isExternal: true }}
text={LOCALIZATION.GO_REGISTRATION}
services/msb-main-page/src/widgets/FinancialDashboard/ui/DepositAccounts/components/DepositAccounts.tsx
+9 -6
View File
@@ -1,7 +1,7 @@
import { useMemo } from 'react';
import { DOC_TYPES, MEDIA, PATHS_DEPOSITS, SomethingWrongTabError, useMediaQuery, useYaMetrika, YM_GOALS } from '@msb/shared';
import { MEDIA, PATHS_DEPOSITS, SomethingWrongTabError, useMediaQuery, useYaMetrika, YM_GOALS } from '@msb/shared';
import { useHistory } from 'react-router-dom';
import { GHOST_DEPOSIT_YM_CODE, LOCALIZATION } from '../../../constants';
import { ghostBanners, LOCALIZATION } from '../../../constants';
import { DepositAccount, type DepositAccountModel } from '@/entities/DepositAccount';
import { GhostAccount } from '@/entities/GhostAccount';
import { MAX_ACCOUNTS_IN_DASHBOARD_COUNT } from '@/shared/constants/maxAccountsInDashboardCount';
@@ -75,13 +75,16 @@ const DepositAccounts = ({ depositAccounts, hasError, isGhostAccountOpened, onCl
return <SomethingWrongTabError isLoading={isRefetching} onClick={onRefetch} />;
}
const { badgeText, navigate, title, ymCode, imagePath } = ghostBanners.deposits;
const GhostProduct = (
<GhostAccount
badgeText={LOCALIZATION.PERSONAL_DEPOSIT_RATE}
badgeText={badgeText}
imagePath={imagePath}
isDefaultOpened={isGhostAccountOpened}
navigateTo={{ href: PATHS_DEPOSITS.TREASURY_DEALS, docType: DOC_TYPES.DEPOSIT }}
text={LOCALIZATION.GO_REGISTRATION}
ymCode={GHOST_DEPOSIT_YM_CODE}
navigateTo={{ href: navigate.link, docType: navigate.docType }}
text={title}
ymCode={ymCode}
onClose={onCloseGhostAccount}
/>
);
services/msb-main-page/src/widgets/FinancialDashboard/ui/FinancialAccounts/assets/New.svg
-96
View File
@@ -1,96 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_iii_2837_53605)">
<path d="M18.6415 10.5C20.7077 10.5 19.4641 16.7478 23.1294 20.3924C26.7947 24.0369 31.2831 22.9956 31.2831 24.8657C31.2831 26.7358 26.2711 25.5989 23.1294 29.2434C19.9878 32.888 20.7732 39.83 18.6415 39.83C16.5099 39.83 17.3697 32.3673 14.228 29.2434C11.0863 26.1195 6 26.7358 6 24.8657C6 22.9956 11.0863 23.5163 14.228 20.3924C17.3697 17.2685 16.5753 10.5 18.6415 10.5Z" fill="url(#paint0_linear_2837_53605)"/>
</g>
<path d="M18.6415 10.5C20.7077 10.5 19.4641 16.7478 23.1294 20.3924C26.7947 24.0369 31.2831 22.9956 31.2831 24.8657C31.2831 26.7358 26.2711 25.5989 23.1294 29.2434C19.9878 32.888 20.7732 39.83 18.6415 39.83C16.5099 39.83 17.3697 32.3673 14.228 29.2434C11.0863 26.1195 6 26.7358 6 24.8657C6 22.9956 11.0863 23.5163 14.228 20.3924C17.3697 17.2685 16.5753 10.5 18.6415 10.5Z" fill="url(#paint1_linear_2837_53605)"/>
<g filter="url(#filter1_iii_2837_53605)">
<path d="M6 5.5C6.98067 5.5 6.39043 8.48225 8.13007 10.2219C9.86972 11.9615 12 11.4645 12 12.3571C12 13.2498 9.6212 12.7071 8.13007 14.4467C6.63895 16.1864 7.01173 19.5 6 19.5C4.98827 19.5 5.39635 15.9379 3.90522 14.4467C2.4141 12.9556 0 13.2498 0 12.3571C0 11.4645 2.4141 11.713 3.90522 10.2219C5.39635 8.73077 5.01933 5.5 6 5.5Z" fill="url(#paint2_linear_2837_53605)"/>
</g>
<g filter="url(#filter2_iii_2837_53605)">
<path d="M15 0C15.4903 0 15.1952 1.49112 16.065 2.36095C16.9349 3.23077 18 2.98225 18 3.42857C18 3.87489 16.8106 3.60355 16.065 4.47337C15.3195 5.34319 15.5059 7 15 7C14.4941 7 14.6982 5.21893 13.9526 4.47337C13.207 3.72781 12 3.87489 12 3.42857C12 2.98225 13.207 3.10651 13.9526 2.36095C14.6982 1.61538 14.5097 0 15 0Z" fill="url(#paint3_linear_2837_53605)"/>
</g>
<defs>
<filter id="filter0_iii_2837_53605" x="5.6" y="10.25" width="25.9332" height="29.8301" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="0.25" dy="-0.25"/>
<feGaussianBlur stdDeviation="0.25"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.937255 0 0 0 0 0.482353 0 0 0 0 0.329412 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2837_53605"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="0.25" dy="0.25"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.737255 0 0 0 0 0.615686 0 0 0 0 0.415686 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_2837_53605" result="effect2_innerShadow_2837_53605"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-0.4" dy="0.25"/>
<feGaussianBlur stdDeviation="0.2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.901961 0 0 0 0 0.458824 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_2837_53605" result="effect3_innerShadow_2837_53605"/>
</filter>
<filter id="filter1_iii_2837_53605" x="-0.4" y="5.25" width="12.65" height="14.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="0.25" dy="-0.25"/>
<feGaussianBlur stdDeviation="0.25"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.937255 0 0 0 0 0.482353 0 0 0 0 0.329412 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2837_53605"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="0.25" dy="0.25"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.737255 0 0 0 0 0.615686 0 0 0 0 0.415686 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_2837_53605" result="effect2_innerShadow_2837_53605"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-0.4" dy="0.25"/>
<feGaussianBlur stdDeviation="0.2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.901961 0 0 0 0 0.458824 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_2837_53605" result="effect3_innerShadow_2837_53605"/>
</filter>
<filter id="filter2_iii_2837_53605" x="11.6" y="-0.25" width="6.65" height="7.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="0.25" dy="-0.25"/>
<feGaussianBlur stdDeviation="0.25"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.937255 0 0 0 0 0.482353 0 0 0 0 0.329412 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2837_53605"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="0.25" dy="0.25"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.737255 0 0 0 0 0.615686 0 0 0 0 0.415686 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_2837_53605" result="effect2_innerShadow_2837_53605"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-0.4" dy="0.25"/>
<feGaussianBlur stdDeviation="0.2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.901961 0 0 0 0 0.458824 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_2837_53605" result="effect3_innerShadow_2837_53605"/>
</filter>
<linearGradient id="paint0_linear_2837_53605" x1="23.3905" y1="10.5" x2="14.1786" y2="40.4988" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFCF5A"/>
<stop offset="1" stop-color="#FEA254"/>
</linearGradient>
<linearGradient id="paint1_linear_2837_53605" x1="23.3905" y1="10.5" x2="6.53065" y2="36.1228" gradientUnits="userSpaceOnUse">
<stop offset="0.517759" stop-color="#FF886D" stop-opacity="0"/>
<stop offset="1" stop-color="#FF886D"/>
</linearGradient>
<linearGradient id="paint2_linear_2837_53605" x1="8.25397" y1="5.5" x2="3.8362" y2="19.8052" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFCF5A"/>
<stop offset="1" stop-color="#FEA254"/>
</linearGradient>
<linearGradient id="paint3_linear_2837_53605" x1="16.127" y1="5.47013e-07" x2="13.9181" y2="7.15258" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFCF5A"/>
<stop offset="1" stop-color="#FEA254"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

services/msb-main-page/src/widgets/FinancialDashboard/ui/FinancialAccounts/assets/index.ts
-3
View File
@@ -1,3 +0,0 @@
import newProduct from './New.svg';
export default newProduct as unknown as string;
services/msb-main-page/src/widgets/FinancialDashboard/ui/FinancialAccounts/components/FinancialAccounts.tsx
+8 -7
View File
@@ -19,11 +19,9 @@ import {
YM_GOALS,
PATHS_PAYMENTS,
SomethingWrongTabError,
PATHS_DEPOSITS,
DOC_TYPES,
} from '@msb/shared';
import { useHistory } from 'react-router-dom';
import { GHOST_MNO_YM_CODE, LOCALIZATION } from '../../../constants';
import { ghostBanners, LOCALIZATION } from '../../../constants';
import { FinancialAccount } from '@/entities/FinancialAccount';
import { GhostAccount } from '@/entities/GhostAccount';
import { MAX_ACCOUNTS_IN_DASHBOARD_COUNT } from '@/shared/constants/maxAccountsInDashboardCount';
@@ -157,13 +155,16 @@ const FinancialAccounts = ({
</>
);
const { badgeText, navigate, title, ymCode, imagePath } = ghostBanners.accounts;
const GhostProduct = (
<GhostAccount
badgeText={LOCALIZATION.BUSINESS_ACCOUNT_FOR_ZERO}
badgeText={badgeText}
imagePath={imagePath}
isDefaultOpened={isGhostAccountOpened}
navigateTo={{ href: PATHS_DEPOSITS.TREASURY_DEALS, docType: DOC_TYPES.MNO }}
text={LOCALIZATION.GO_REGISTRATION}
ymCode={GHOST_MNO_YM_CODE}
navigateTo={{ href: navigate.link, docType: navigate.docType }}
text={title}
ymCode={ymCode}
onClose={onCloseGhostAccount}
/>
);