add yandex metrika and back button to results page

.eslintrc.core.js

@@ -108,12 +108,6 @@ module.exports = {
       },
     ],
     'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': [
-      'error',
-      {
-        additionalHooks: 'useDelayedEffect',
-      },
-    ],
     'consistent-return': 'off',
     'no-underscore-dangle': ['error', { allowAfterThis: true, allow: ['__'] }],
     '@typescript-eslint/no-use-before-define': [

locales/uz/translation.json

@@ -124,6 +124,7 @@
     "goToAnswers": "Javoblarga",
     "goToResults": "Natijalarga",
     "areYouReady": "Tayyormisiz?",
+    "close": "Yopish",
     "finishTest": "Sinov yopilsinmi?",
     "goToMain": "Bosh sahifaga o'tingmi?",
     "copied": "Nusxalandi",

locales/uzk/translation.json

@@ -124,6 +124,7 @@
     "goToAnswers": "Жавобларга",
     "goToResults": "Жавобларга",
     "areYouReady": "Тайёрмисиз?",
+    "close": "Ёпиш",
     "finishTest": "Синов ёпилсинми?",
     "goToMain": "Бош саҳифага ўтингми?",
     "copied": "Нусхаланди",

package.json

@@ -124,6 +124,7 @@
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.16",
     "@types/react-dom": "^18.0.6",
+    "@types/throttle-debounce": "^5.0.2",
     "@types/web-app-manifest": "^1.0.2",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
@@ -219,8 +220,10 @@
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.10.0",
     "react-swipeable": "^7.0.1",
+    "react-yandex-metrika": "^2.6.0",
     "remeda": "^1.24.0",
     "swiper": "^10.2.0",
+    "throttle-debounce": "^5.0.0",
     "workbox-core": "^6.5.3",
     "workbox-expiration": "^6.5.3",
     "workbox-routing": "^6.5.3",

src/core/App.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { YMInitializer } from 'react-yandex-metrika';
 
 import { Providers } from 'core/Providers';
 import { ThemeProvider } from 'services/settings/view/ThemeProvider/ThemeProvider';
+import { InstallationProvider } from 'services/installation/view/InstallationProvider';
 import { ErrorBoundary } from 'pages/shared/ErrorBoundary/ErrorBoundary';
 import { Router } from 'pages/Router/Router';
 
@@ -12,6 +14,17 @@ export const App = () => (
     <ErrorBoundary>
       <BrowserRouter>
         <Router />
+        <InstallationProvider />
+        <YMInitializer
+          accounts={[95619603]}
+          options={{
+            clickmap: true,
+            trackLinks: true,
+            accurateTrackBounce: true,
+            webvisor: true,
+          }}
+          version="2"
+        />
       </BrowserRouter>
     </ErrorBoundary>
   </Providers>

src/features/quiz/view/Clock/Clock.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 
+import { MAX_WRONG_ANSWERS } from 'services/questions/constants';
 import { ClockIcon, ClockRightIcon, ClockWarnIcon } from 'shared/view/components/icons';
 import { useFeature } from 'features/featureProvider';
 
 export const Clock = observer(function Clock() {
   const { wrongAnswers, questionsAmount, rightAnswers, isFinishedQuiz } = useFeature('quiz');
 
-  if (wrongAnswers > 2 || (isFinishedQuiz && questionsAmount - rightAnswers > 2)) {
+  if (
+    wrongAnswers > MAX_WRONG_ANSWERS ||
+    (isFinishedQuiz && questionsAmount - rightAnswers > MAX_WRONG_ANSWERS)
+  ) {
     return <ClockWarnIcon />;
   }
 
-  if (questionsAmount - rightAnswers <= 2) {
+  if (questionsAmount - rightAnswers <= MAX_WRONG_ANSWERS) {
     return <ClockRightIcon />;
   }
 

src/pages/About/About.tsx

@@ -7,7 +7,7 @@ import { useService } from 'services/servicesProvider';
 import { InnerBlock } from 'pages/shared/InnerBlock/InnerBlock';
 import { Wallet } from 'features/about/view/Wallet/Wallet';
 import { BankCard } from 'features/about/view/BankCard/BankCard';
-import { getDefaultConfig, useSpringOnce } from 'shared/animations/useSpringOnce';
+import { getDefaultConfig, useSpringOnce } from 'shared/animations';
 import { wallets, bankCards } from 'features/about/constants';
 
 import { AboutIcon } from './AboutIcon/AboutIcon';

src/pages/Categories/Categories.tsx

@@ -4,7 +4,7 @@ import { animated } from '@react-spring/web';
 
 import { useService } from 'services/servicesProvider';
 import { useFeature } from 'features/featureProvider';
-import { getDefaultConfig, useSpringOnce } from 'shared/animations/useSpringOnce';
+import { getDefaultConfig, useSpringOnce } from 'shared/animations';
 import { InnerBlock } from 'pages/shared/InnerBlock/InnerBlock';
 import * as M from 'services/questions/mobx/model';
 

src/pages/Main/Main.tsx

@@ -7,8 +7,8 @@ import { useService } from 'services/servicesProvider';
 import { Socials } from 'pages/shared/Socials/Socials';
 import { Policeman } from 'shared/view/components/Policeman';
 import { Speedometer } from 'shared/view/components/Speedometer';
+import { useSpringOnce, getDefaultConfig } from 'shared/animations';
 import { Car } from 'shared/view/components/Car';
-import { useSpringOnce, getDefaultConfig } from 'shared/animations/useSpringOnce';
 
 import { StartButton } from './StartButton/StartButton';
 import styles from './Main.module.scss';

src/pages/Results/Results.module.scss

@@ -71,9 +71,8 @@
 
   max-width: R.rem(370px);
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  justify-items: center;
   gap: R.rem(32px);
 
   &:first-child {
@@ -192,8 +191,14 @@
   grid-template-columns: repeat(5, 1fr);
 }
 
-.repeat-button {
-  width: R.rem(260px);
+.buttons {
+  display: flex;
+  gap: R.rem(16px);
+}
+
+.button {
+  flex-shrink: 0;
+  width: auto;
 }
 
 .icon {

src/pages/Results/Results.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { observer } from 'mobx-react-lite';
+import { animated, useSpring } from '@react-spring/web';
 import { Trans } from 'react-i18next';
 
 import { useService } from 'services/servicesProvider';
@@ -12,15 +13,17 @@ import { Button } from 'shared/view/components/Button';
 import { CheckIcon, CrossIcon } from 'shared/view/components/icons';
 import { useRedirect } from 'shared/view/hooks/useRedirect';
 import { useURLParams } from 'pages/shared/hooks/useURLParams';
+import { getDefaultConfig } from 'shared/animations';
 
 import { ResultsIcon } from './ResultsIcon/ResultsIcon';
 import styles from './Results.module.scss';
 
 type Props = {
-  redirectTo(ticket: string): string;
+  redirectToPage: string;
+  redirectToQuiz(ticket: string): string;
 };
 
-export const Results = observer(function Results({ redirectTo }: Props) {
+export const Results = observer(function Results({ redirectToQuiz, redirectToPage }: Props) {
   const { ticketID, category } = useURLParams();
 
   const { t, tKeys } = useService('i18n');
@@ -35,24 +38,33 @@ export const Results = observer(function Results({ redirectTo }: Props) {
     setCurrentIndex,
   } = useFeature('quiz');
 
-  const redirectPath = redirectTo(ticketID || category || '/');
+  const redirectToQuizPath = redirectToQuiz(ticketID || category || '/');
 
-  const { redirect } = useRedirect(redirectPath);
+  const { redirect: quizRedirect } = useRedirect(redirectToQuizPath);
+  const { redirect: pageRedirect } = useRedirect(redirectToPage);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!questions.length) {
-      redirect();
+      quizRedirect();
     }
   }, [questions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const translations = tKeys.pages.results;
   const sharedTranslations = tKeys.shared;
 
+  const leftSpring = useSpring(getDefaultConfig({ x: '-10%', duration: 1000 }));
+
+  const opacitySpring = useSpring(getDefaultConfig({ duration: 1000 }));
+
+  const iconSpring = useSpring(getDefaultConfig({ x: '20%', duration: 750 }));
+
   return (
-    <div className={styles.root}>
+    <animated.div className={styles.root} style={opacitySpring}>
       <PageHeader />
       <main className={styles.main}>
-        <InnerTitle title={t(translations.title)} gap="medium" />
+        <animated.div style={isMobile ? opacitySpring : leftSpring}>
+          <InnerTitle title={t(translations.title)} gap="medium" />
+        </animated.div>
 
         <div className={styles.content}>
           <div className={styles.column}>
@@ -87,10 +99,18 @@ export const Results = observer(function Results({ redirectTo }: Props) {
               </div>
             </div>
 
-            <div className={styles.repeatButton}>
-              <Button fullWidth onClick={handleRepeatClick}>
-                {t(sharedTranslations.repeat)}
-              </Button>
+            <div className={styles.buttons}>
+              <div className={styles.button}>
+                <Button fullWidth onClick={handleRepeatClick}>
+                  {t(sharedTranslations.repeat)}
+                </Button>
+              </div>
+
+              <div className={styles.button}>
+                <Button fullWidth onClick={handleClick}>
+                  {t(sharedTranslations.goToAnswers)}
+                </Button>
+              </div>
             </div>
           </div>
 
@@ -110,26 +130,32 @@ export const Results = observer(function Results({ redirectTo }: Props) {
         </div>
 
         {isDesktop && (
-          <div className={styles.icon}>
+          <animated.div className={styles.icon} style={iconSpring}>
             <ResultsIcon />
-          </div>
+          </animated.div>
         )}
       </main>
       <QuizFooter
         buttons={[
           {
-            text: t(sharedTranslations.goToAnswers),
-            onClick: handleClick,
+            text: t(sharedTranslations.close),
+            onClick: goBackToPage,
           },
         ]}
         withCopyright={isMobile}
       />
-    </div>
+    </animated.div>
   );
 
   function goToQuiz() {
-    if (redirectPath) {
-      redirect();
+    if (redirectToQuizPath) {
+      quizRedirect();
+    }
+  }
+
+  function goBackToPage() {
+    if (redirectToPage) {
+      pageRedirect();
     }
   }
 

src/pages/Router/Layout/Layout.tsx

@@ -8,6 +8,7 @@ import { PageHeader } from 'pages/shared/PageHeader/PageHeader';
 import { Sphere } from 'shared/view/components/Sphere';
 import { lazyfy } from 'shared/helpers/lazyfy';
 
+import { useHitGoal } from '../useHitGoal';
 import styles from './Layout.module.scss';
 
 const { MainLazy } = lazyfy(
@@ -37,6 +38,8 @@ const { AboutLazy } = lazyfy(
 export const Layout = observer(function Layout() {
   const elementRef = useScrollRestoration('layout');
 
+  useHitGoal();
+
   return (
     <div className={styles.root}>
       <PageHeader />