diff --git a/src/components/CookieConsent/README.md b/src/components/CookieConsent/README.md index d13ddb92..14d47553 100644 --- a/src/components/CookieConsent/README.md +++ b/src/components/CookieConsent/README.md @@ -30,6 +30,8 @@ import {CookieConsent} from '@gravity-ui/components'; const consentManager = new ConsentManager('manage'); const Analytics = () => { + const {t} = i18n.useTranslation(); + const onUpdateConsent = (consents: Consents) => { // do something: e.g. sent events to analytics }; @@ -38,7 +40,7 @@ const Analytics = () => { return ['necessary', 'analytics'].map((type) => { return { type, - titleLabel: type === 'necessary' ? i18n('necessary_cookie_title_label') : undefined, + titleLabel: type === 'necessary' ? t('necessary_cookie_title_label') : undefined, link: {href: 'https://google.com'}, }; }); diff --git a/src/components/CookieConsent/components/ConsentNotification/ConsentNotification.tsx b/src/components/CookieConsent/components/ConsentNotification/ConsentNotification.tsx index 7f145063..deca4809 100644 --- a/src/components/CookieConsent/components/ConsentNotification/ConsentNotification.tsx +++ b/src/components/CookieConsent/components/ConsentNotification/ConsentNotification.tsx @@ -11,14 +11,18 @@ import './ConsentNotification.scss'; const b = block('consent-notification'); -export const ConsentNotification = ({ - policyLink, - onAction, - className, - policyLinkText = i18n('label_policy'), - text = i18n('label_text'), - buttonOkText = i18n('button_OK'), -}: ConsentNotificationProps) => { +export const ConsentNotification = (props: ConsentNotificationProps) => { + const {t} = i18n.useTranslation(); + + const { + policyLink, + onAction, + className, + policyLinkText = t('label_policy'), + text = t('label_text'), + buttonOkText = t('button_OK'), + } = props; + const mobile = useMobile(); const onClick = () => { onAction('All'); @@ -28,7 +32,7 @@ export const ConsentNotification = ({ {text} {policyLink ? ( - {i18n('details_text')}{' '} + {t('details_text')}{' '} {policyLinkText} diff --git a/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx b/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx index 85e7b50c..f6b864af 100644 --- a/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx +++ b/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx @@ -30,11 +30,13 @@ const Header = ({ manageTitleText, mainTitleText, }: HeaderProps) => { + const {t} = i18n.useTranslation(); + const renderTitle = () => { if (currentStep === ConsentPopupStep.Manage) { - return manageTitleText || i18n('label_title_manage'); + return manageTitleText || t('label_title_manage'); } - return mainTitleText || i18n('label_title_main'); + return mainTitleText || t('label_title_main'); }; return ( @@ -58,16 +60,20 @@ const Header = ({ ); }; -const Footer = ({ - onAction, - currentStep, - currentConsents, - buttonAcceptText = i18n('button_accept_all'), - buttonNecessaryText = i18n('button_necessary'), - buttonConfirmText = i18n('button_confirm'), - onChangeStep, - initialStep, -}: FooterProps) => { +const Footer = (props: FooterProps) => { + const {t} = i18n.useTranslation(); + + const { + onAction, + currentStep, + currentConsents, + buttonAcceptText = t('button_accept_all'), + buttonNecessaryText = t('button_necessary'), + buttonConfirmText = t('button_confirm'), + onChangeStep, + initialStep, + } = props; + const mobile = useMobile(); const isManageStep = currentStep === ConsentPopupStep.Manage; const onButtonClick = (onlyNecessary: boolean) => { @@ -122,7 +128,7 @@ const Footer = ({ size="l" view="flat-secondary" > - {i18n('label_manage_cookie_link_text')} + {t('label_manage_cookie_link_text')} ), back: () => ( @@ -133,7 +139,7 @@ const Footer = ({ size="l" view="flat-secondary" > - {i18n('button_back')} + {t('button_back')} ), }; @@ -163,24 +169,28 @@ const Footer = ({ ); }; -export const ConsentPopup = ({ - policyLink, - onAction, - className, - modalClassName, - policyLinkText = i18n('label_policy_extended'), - text, - manageLabelText = i18n('manage_label_text_extended'), - manageTitleText, - mainTitleText, - noSubtitle, - step = ConsentPopupStep.Main, - cookieList, - onClose, - consentManager, - disableHeightTransition, - ...buttonsParams -}: ConsentPopupProps) => { +export const ConsentPopup = (props: ConsentPopupProps) => { + const {t} = i18n.useTranslation(); + + const { + policyLink, + onAction, + className, + modalClassName, + policyLinkText = t('label_policy_extended'), + text, + manageLabelText = t('manage_label_text_extended'), + manageTitleText, + mainTitleText, + noSubtitle, + step = ConsentPopupStep.Main, + cookieList, + onClose, + consentManager, + disableHeightTransition, + ...buttonsParams + } = props; + const mobile = useMobile(); const [currentConsents, setCurrentConsents] = React.useState( consentManager.getConsents(), @@ -198,18 +208,18 @@ export const ConsentPopup = ({ checked: Boolean(currentConsents[item.type]), disabled: isNecessaryItem, defaultExpand: isNecessaryItem, - title: item.title || i18n(`cookie_${item.type}_title`), - text: item.text || i18n(`cookie_${item.type}_text`), + title: item.title || t(`cookie_${item.type}_title`), + text: item.text || t(`cookie_${item.type}_text`), link: item.link ? { href: item.link?.href, - title: item.link?.title || i18n(`cookie_link_text`), + title: item.link?.title || t(`cookie_link_text`), } : undefined, titleLabel: item.titleLabel, }; }); - }, [cookieList, currentConsents]); + }, [cookieList, currentConsents, t]); const onChoose = (checkedItems: number[]) => { if (!cookieList) return; @@ -251,7 +261,7 @@ export const ConsentPopup = ({ className={b('text')} variant={mobile ? 'subheader-3' : 'subheader-2'} > - {i18n('manage_subtitle_extended')} + {t('manage_subtitle_extended')} )}
@@ -280,7 +290,7 @@ export const ConsentPopup = ({
diff --git a/src/components/CookieConsent/components/SimpleConsent/SimpleConsent.tsx b/src/components/CookieConsent/components/SimpleConsent/SimpleConsent.tsx index 61258019..184136f3 100644 --- a/src/components/CookieConsent/components/SimpleConsent/SimpleConsent.tsx +++ b/src/components/CookieConsent/components/SimpleConsent/SimpleConsent.tsx @@ -11,11 +11,13 @@ const b = block('simple-consent'); const buttons = ['decline', 'accept'] as const; export const SimpleConsent = (props: SimpleConsentProps) => { + const {t} = i18n.useTranslation(); + const { className, - text = i18n('label_text'), - buttonAcceptText = i18n('button_accept'), - buttonDeclineText = i18n('button_decline'), + text = t('label_text'), + buttonAcceptText = t('button_accept'), + buttonDeclineText = t('button_decline'), onAction, } = props;