fix(refresh): refresh token fix

This reverts commit fc3a3c052c.

.drone.yml

@@ -174,32 +174,63 @@ steps:
     depends_on:
       - make-lff
 
-#  - name: make-diwansport
-#    image: node:16-alpine
-#    environment:
-#      REACT_APP_STRIPE_PK:
-#        from_secret: REACT_APP_STRIPE_PK
-#    commands:
-#      - apk add --no-cache make
-#      - make diwansport-prod
-#    depends_on:
-#      - npm-install
-#
-#  - name: deploy-diwansport
-#    image: amazon/aws-cli:latest
-#    environment:
-#      AWS_ACCESS_KEY_ID:
-#        from_secret: AWS_ACCESS_KEY_ID
-#      AWS_SECRET_ACCESS_KEY:
-#        from_secret: AWS_SECRET_ACCESS_KEY
-#      AWS_DEFAULT_REGION:
-#        from_secret: AWS_DEFAULT_REGION
-#      AWS_MAX_ATTEMPTS: 10
-#    commands:
-#      - aws s3 sync build_insports-diwansport s3://insports-diwansport --delete
-#      - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*"
-#    depends_on:
-#      - make-diwansport
+  - name: make-diwansport
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make diwansport-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-diwansport
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_tunisia s3://insports-diwansport --delete
+      - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*"  # # diwansport.net
+      - aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*"  # tunisia.insports.tv
+
+    depends_on:
+      - make-diwansport
+
+  - name: make-fqtv
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make fqtv-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-fqtv
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_fqtv s3://insports-fqtv-com-au --delete
+      - aws cloudfront create-invalidation --distribution-id E2MFJBSBIUQSDH --paths "/*"  # # fqtv.insports.tv
+      - aws cloudfront create-invalidation --distribution-id E22TED4Z46Q01V --paths "/*"  # fqtv.com.au
+
+    depends_on:
+      - make-fqtv
 
 ---
 kind: pipeline
@@ -656,9 +687,28 @@ trigger:
   - refs/heads/test-auth
 
 steps:
-  - name: deploy script
+  - name: npm-install
     image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-auth
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make auth-build
+    depends_on:
+      - npm-install
 
+  - name: deploy-S3-auth
+    image: amazon/aws-cli:latest
     environment:
       AWS_ACCESS_KEY_ID:
         from_secret: AWS_ACCESS_KEY_ID
@@ -666,23 +716,12 @@ steps:
         from_secret: AWS_SECRET_ACCESS_KEY
       AWS_DEFAULT_REGION:
         from_secret: AWS_DEFAULT_REGION
-      REACT_APP_STRIPE_PK:
-        from_secret: REACT_APP_STRIPE_PK_TEST
-      SSH_KEY_AUTH_TEST:
-        from_secret: SSH_KEY_AUTH_TEST
-
+      AWS_MAX_ATTEMPTS: 10
     commands:
-      - apk add --no-cache aws-cli bash git openssh-client make rsync
-      - npm install --legacy-peer-deps
-      - make auth-build
-      - eval $(ssh-agent -s)
-      - echo -n "$SSH_KEY_AUTH_TEST" | tr -d '\r' | ssh-add -
-      - mkdir -p ~/.ssh && chmod 700 ~/.ssh
-      - ssh-keyscan auth.test.insports.tv >> ~/.ssh/known_hosts
-      - rsync -v -r -C build_auth/ ubuntu@auth.test.insports.tv:/home/ubuntu/ott-auth/src/frontend/
-      - rsync -v -r -C build_auth/clients/* ubuntu@auth.test.insports.tv:/home/ubuntu/ott-auth/src/frontend/templates
-      - aws s3 sync build_auth s3://auth-insports-test --delete
+      - aws s3 sync build_auth s3://insports-auth-test --delete
       - aws cloudfront create-invalidation --distribution-id E10YI3RFOZZDLZ --paths "/*"
+    depends_on:
+      - make-auth
 
 
 ---
@@ -752,3 +791,272 @@ steps:
       - rsync -v -r -C build_auth/ ubuntu@auth.insports.tv:/home/ubuntu/ott-auth/src/frontend/
     depends_on:
       - make-auth
+
+---
+kind: pipeline
+type: docker
+name: deploy diwan.insports.tv
+
+concurrency:
+  limit: 1
+
+platform:
+  os: linux
+  arch: amd64
+
+trigger:
+  ref:
+  - refs/heads/diwan.insports.tv
+
+steps:
+  - name: npm-install
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-diwansport
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make diwansport-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-diwansport
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_tunisia s3://insports-diwansport --delete
+      - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*"  # # diwansport.net
+      - aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*"  # tunisia.insports.tv
+
+    depends_on:
+      - make-diwansport
+
+---
+kind: pipeline
+type: docker
+name: deploy fqtv.insports.tv
+
+concurrency:
+  limit: 1
+
+platform:
+  os: linux
+  arch: amd64
+
+trigger:
+  ref:
+  - refs/heads/fqtv.insports.tv
+
+steps:
+  - name: npm-install
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-fqtv
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make fqtv-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-fqtv
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_fqtv s3://insports-fqtv-com-au --delete
+      - aws cloudfront create-invalidation --distribution-id E2MFJBSBIUQSDH --paths "/*"  # # fqtv.insports.tv
+      - aws cloudfront create-invalidation --distribution-id E22TED4Z46Q01V --paths "/*"  # fqtv.com.au
+
+    depends_on:
+      - make-fqtv
+
+---
+kind: pipeline
+type: docker
+name: deploy india.insports.tv
+
+concurrency:
+  limit: 1
+
+platform:
+  os: linux
+  arch: amd64
+
+trigger:
+  ref:
+  - refs/heads/india.insports.tv
+
+steps:
+  - name: npm-install
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-india
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make india-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-india
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_india s3://insports-india --delete
+      - aws cloudfront create-invalidation --distribution-id E5DKN8IPOMASO --paths "/*"
+    depends_on:
+      - make-india
+
+---
+kind: pipeline
+type: docker
+name: deploy tv.rustatsport.ru
+
+concurrency:
+  limit: 1
+
+platform:
+  os: linux
+  arch: amd64
+
+trigger:
+  ref:
+  - refs/heads/tv.rustatsport.ru
+
+steps:
+  - name: npm-install
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-rustat
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make rustat-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-rustat
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_rustat s3://insports-tv-rustatsport --delete
+      - aws cloudfront create-invalidation --distribution-id E15IFY23VM147K --paths "/*"
+    depends_on:
+      - make-rustat
+
+---
+kind: pipeline
+type: docker
+name: deploy insport.live
+
+concurrency:
+  limit: 1
+
+platform:
+  os: linux
+  arch: amd64
+
+trigger:
+  ref:
+  - refs/heads/insport.live
+
+steps:
+  - name: npm-install
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-insport-live
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make insport-live-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-insport-live
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_insport_live s3://insports-live --delete
+      - aws cloudfront create-invalidation --distribution-id E1LBC88VYP6XVB --paths "/*"
+    depends_on:
+      - make-insport-live

.eslintrc

@@ -11,6 +11,7 @@
     "postro4no"
   ],
   "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/array-type": [
       "warn",
       { "default" : "generic" }
@@ -79,8 +80,16 @@
     ],
     "typescript-sort-keys/interface": 1,
     "typescript-sort-keys/string-enum": 1,
-
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      },
+    ],
+    "react/jsx-no-useless-fragment": [2, { "allowExpressions": true }],
     "camelcase": "off",
+    "default-param-last": 0,
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
     "indent": "off",
@@ -93,6 +102,7 @@
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
-    "semi": "off"
+    "semi": "off",
+    "no-multiple-empty-lines":["error",{ "max":1 }]
   }
 }

.gitignore

@@ -7,13 +7,11 @@
 
 # testing
 /coverage
+/cypress/videos
+/cypress/screenshots
 
 # production
-/build
-/build_auth
-/build_india
-/build_facr
-/build_lff
+/build*
 
 # misc
 .DS_Store
@@ -32,3 +30,6 @@ yarn.lock
 # IntelliJ IDEA products
 .idea
 .eslintcache
+
+# ssl keys
+*.pem

Makefile

@@ -130,12 +130,30 @@ india-build: clean
     REACT_APP_CLIENT=india \
     npm run build
 
+tunisia-build: clean
+	REACT_APP_TYPE=ott \
+    REACT_APP_ENV=staging \
+    REACT_APP_CLIENT=tunisia \
+    npm run build
+
+fqtv-build: clean
+	REACT_APP_TYPE=ott \
+    REACT_APP_ENV=staging \
+    REACT_APP_CLIENT=fqtv \
+    npm run build
+
 lff-build: clean
 	REACT_APP_TYPE=ott \
     REACT_APP_ENV=staging \
 	REACT_APP_CLIENT=lff \
     npm run build
 
+rustat-build: clean
+	REACT_APP_TYPE=ott \
+	REACT_APP_ENV=staging \
+	REACT_APP_CLIENT=rustat \
+	npm run build
+
 .PHONY: build
 
 prod: clean
@@ -180,9 +198,48 @@ lff-prod:
 	BUILD_PATH=build_lff \
 	npm run build && cp -r .well-known build_lff
 
-deploy-all: prod preprod facr-prod lff-prod
+diwansport-prod:
+	rm -rf build_tunisia && \
+	REACT_APP_TYPE=ott \
+	REACT_APP_ENV=production \
+	REACT_APP_STRIPE_PK=pk_live_51J5TEYEDSxVnTgDW5XxhC6ntKZKddXgKHq5HOCDmJTdfSKluMYCdLHOcUA3Miuy8HesxG1eS4c0dQRQpMsEHRrQL00USpu5xIq \
+	REACT_APP_CLIENT=tunisia \
+	BUILD_PATH=build_tunisia \
+	npm run build && cp -r .well-known build_tunisia
+
+fqtv-prod:
+	rm -rf build_fqtv && \
+	REACT_APP_TYPE=ott \
+	REACT_APP_ENV=production \
+	REACT_APP_STRIPE_PK=pk_live_51J5TEYEDSxVnTgDW5XxhC6ntKZKddXgKHq5HOCDmJTdfSKluMYCdLHOcUA3Miuy8HesxG1eS4c0dQRQpMsEHRrQL00USpu5xIq \
+	REACT_APP_CLIENT=fqtv \
+	BUILD_PATH=build_fqtv \
+	npm run build && cp -r .well-known build_fqtv
+
+rustat-prod:
+	rm -rf build_rustat && \
+	REACT_APP_TYPE=ott \
+	REACT_APP_ENV=production \
+	REACT_APP_CLIENT=rustat \
+	REACT_APP_STRIPE_PK=pk_live_51J5TEYEDSxVnTgDW5XxhC6ntKZKddXgKHq5HOCDmJTdfSKluMYCdLHOcUA3Miuy8HesxG1eS4c0dQRQpMsEHRrQL00USpu5xIq \
+	BUILD_PATH=build_rustat \
+	npm run build && cp -r .well-known build_rustat
+
+insport-live-prod:
+	rm -rf build_insport_live && \
+	REACT_APP_TYPE=ott \
+	REACT_APP_ENV=staging \
+	REACT_APP_CLIENT=lff \
+	REACT_APP_STRIPE_PK=pk_live_51J5TEYEDSxVnTgDW5XxhC6ntKZKddXgKHq5HOCDmJTdfSKluMYCdLHOcUA3Miuy8HesxG1eS4c0dQRQpMsEHRrQL00USpu5xIq \
+	BUILD_PATH=build_insport_live \
+	npm run build && cp -r .well-known build_insport_live
+
+deploy-all: prod preprod facr-prod lff-prod diwansport-prod india-prod fqtv-prod rustat-prod
 
 test:
 	npm test
 
 .PHONY: test
+
+generate-ssl-keys:
+	openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start",
+    "start-https": "export PORT=443 HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",
     "build": "GENERATE_SOURCEMAP=false react-scripts build && gzipper --verbose ./build",
     "test": "react-scripts test --testMatch '**/__tests__/*' --passWithNoTests --watchAll=false",
     "test:watch": "react-scripts test --testMatch '**/__tests__/*'",
@@ -17,15 +18,19 @@
     "facr": "REACT_APP_CLIENT=facr react-scripts start",
     "lff": "REACT_APP_CLIENT=lff react-scripts start",
     "india": "REACT_APP_CLIENT=india react-scripts start",
-    "tunis": "REACT_APP_CLIENT=tunis react-scripts start",
+    "tunisia": "REACT_APP_CLIENT=tunisia react-scripts start",
+    "fqtv": "REACT_APP_CLIENT=fqtv react-scripts start",
     "insports": "REACT_APP_CLIENT=insports react-scripts start"
   },
   "dependencies": {
-    "@jonkoops/matomo-tracker-react": "^0.7.0",
+    "@reactour/tour": "^3.3.0",
+    "@sentry/react": "^7.53.1",
     "@stripe/react-stripe-js": "^1.4.0",
     "@stripe/stripe-js": "^1.13.2",
     "babel-polyfill": "^6.26.0",
     "date-fns": "^2.14.0",
+    "dueljs": "^1.2.7",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
     "history": "^4.10.1",
     "hls.js": "^1.1.1",
     "lodash": "^4.17.15",
@@ -34,11 +39,12 @@
     "react": "^17.0.2",
     "react-datepicker": "^3.1.3",
     "react-dom": "^17.0.2",
+    "react-ga": "^3.3.1",
+    "react-query": "^3.39.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
     "react-window": "^1.8.6",
-    "react-youtube": "^7.14.0",
     "recoil": "^0.7.4",
     "screenfull": "^5.0.2",
     "styled-components": "^5.3.3",
@@ -51,10 +57,10 @@
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
+    "@storybook/addons": "^7.0.2",
     "@storybook/preset-create-react-app": "^3.0.0",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.3.12",
+    "@storybook/react": "^7.0.2",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.1.2",
@@ -71,8 +77,8 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.15",
     "commitizen": "^4.2.4",
-    "eslint": "^7.0.1",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint": "^8.38.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
@@ -80,13 +86,12 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sort-destructure-keys": "^1.3.5",
-    "eslint-plugin-typescript-sort-keys": "^1.5.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "gzipper": "^3.7.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
     "miragejs": "^0.1.45",
-    "storybook-addon-styled-component-theme": "^1.3.0",
+    "storybook-addon-styled-component-theme": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
     "stylelint-config-styled-components": "^0.1.1",

public/ads.txt

@@ -0,0 +1 @@
+google.com, pub-6802442215403184, DIRECT, f08c47fec0942fa0

public/clients/india/favicon/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png"/>
+            <square144x144logo src="/mstile-144x144.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/clients/india/favicon/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

public/clients/india/favicon/safari-pinned-tab.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000" preserveAspectRatio="xMidYMid meet">
+  <metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+  <g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
+    <path d="M1499 6996 c-2 -2 -59 -6 -125 -9 -247 -12 -462 -57 -614 -129 -64
+-30 -206 -123 -265 -173 -105 -89 -173 -164 -247 -270 -153 -219 -210 -411
+-235 -790 -11 -161 -10 -4130 0 -4270 12 -158 20 -222 43 -331 60 -297 246
+-573 515 -766 182 -130 345 -193 584 -225 22 -2 51 -6 65 -8 124 -17 518 -20
+2260 -20 1773 0 2220 4 2295 19 11 2 45 7 75 10 75 9 120 17 190 36 121 32
+186 61 300 129 87 53 77 46 155 109 140 114 277 283 353 437 83 166 119 330
+139 630 11 160 10 4107 0 4260 -29 420 -108 642 -311 880 -175 205 -390 346
+-626 412 -47 13 -107 26 -135 29 -27 4 -52 8 -55 9 -3 2 -44 6 -90 10 -47 4
+-96 9 -110 13 -26 6 -4154 14 -4161 8z" />
+  </g>
+</svg>

public/clients/insports/privacy-policy-and-statement.html

@@ -86,7 +86,8 @@
       </p>
 
       <p>
-        (inSports TV also referred to as "us", "we", "our" or "the company"; refers to InSport TV Limited)
+        (inSports TV also referred to as "us", "we", "our" or "the company";
+        refers to InSport TV Limited)
       </p>
 
       <p
@@ -105,12 +106,11 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >inSports TV is committed to the privacy of those that we engage with and
-          this statements details our approach. While using this site or
+          >inSports TV is committed to the privacy of those that we engage with
+          and this statements details our approach. While using this site or
           providing personal data to us in the course of business, we will
           manage your data in accordance with this privacy statement.
-          </span
-        >
+        </span>
       </p>
 
       <ul style="margin-top: 0in" type="disc">
@@ -175,10 +175,10 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >inSports TV provides an online platform that allows to broadcast sports
-          video content. This is a legitimate interest pursued by inSports TV.
-          Personal data processed by the business is done so in accordance with
-          current Data Protection Regulation and GDPR.</span
+          >inSports TV provides an online platform that allows to broadcast
+          sports video content. This is a legitimate interest pursued by
+          inSports TV. Personal data processed by the business is done so in
+          accordance with current Data Protection Regulation and GDPR.</span
         >
       </p>
       <p
@@ -219,7 +219,18 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >We may obtain personal data including name, address, phone numbers, e-mail address, other electronic identifiers, title, images, IP address, company details, information about usage of inSports TV services (e.g., the types of content that you engage with), device information, transaction information including a credit card number and other authentication information (only when the transaction on our products is made) and other information provided by you or by other people when they use our products in accordance with this policy and with data protection law. We may also obtain similar information from other sources such as club, league or broadcast game footage, or from your use of inSports TV services, or when you sign up to our services, or attend events or otherwise engage with the business.</span
+          >We may obtain personal data including name, address, phone numbers,
+          e-mail address, other electronic identifiers, title, images, IP
+          address, company details, information about usage of inSports TV
+          services (e.g., the types of content that you engage with), device
+          information, transaction information including a credit card number
+          and other authentication information (only when the transaction on our
+          products is made) and other information provided by you or by other
+          people when they use our products in accordance with this policy and
+          with data protection law. We may also obtain similar information from
+          other sources such as club, league or broadcast game footage, or from
+          your use of inSports TV services, or when you sign up to our services,
+          or attend events or otherwise engage with the business.</span
         >
       </p>
 
@@ -261,9 +272,10 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >We use personal data for the purposes for which it was provided to us as
-           expressed at the point of collection or as is obvious in the context of collection. 
-           Typically, information is collected for the following purposes:</span
+          >We use personal data for the purposes for which it was provided to us
+          as expressed at the point of collection or as is obvious in the
+          context of collection. Typically, information is collected for the
+          following purposes:</span
         >
       </p>
 
@@ -601,7 +613,13 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >We take all reasonable measures to protect your personal information while it is in our possession. Your personal information may be transferred to third party service providers who process information on the inSports TV behalf, including providers of information technology, identity management, website hosting and management, network services, data analysis, anti-spam services, data back-up, security, and storage services.</span
+          >We take all reasonable measures to protect your personal information
+          while it is in our possession. Your personal information may be
+          transferred to third party service providers who process information
+          on the inSports TV behalf, including providers of information
+          technology, identity management, website hosting and management,
+          network services, data analysis, anti-spam services, data back-up,
+          security, and storage services.</span
         >
       </p>
 
@@ -621,7 +639,12 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Your Personal data may also be transferred to joint sponsors of events, or to certification bodies. We may also provide access to your personal information to law enforcement authorities, revenue commissioners, regulatory or other government agencies, or to other third parties should we receive a valid request compatible with applicable law or regulation.</span
+          >Your Personal data may also be transferred to joint sponsors of
+          events, or to certification bodies. We may also provide access to your
+          personal information to law enforcement authorities, revenue
+          commissioners, regulatory or other government agencies, or to other
+          third parties should we receive a valid request compatible with
+          applicable law or regulation.</span
         >
       </p>
 
@@ -641,7 +664,14 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Personal data submitted through this site may be transferred to third party service providers or to other companies within the inSports group of companies that are outside of the state, and outside of the European Economic Area (EEA). Where you request goods or services to be provided outside the EEA (European Economic Area), or to be delivered in conjunction with others outside of the EEA, personal data provided by you may be shared with organizations or state bodies (customs, revenue authorities and etc.) to fulfil an agreement.</span
+          >Personal data submitted through this site may be transferred to third
+          party service providers or to other companies within the inSports
+          group of companies that are outside of the state, and outside of the
+          European Economic Area (EEA). Where you request goods or services to
+          be provided outside the EEA (European Economic Area), or to be
+          delivered in conjunction with others outside of the EEA, personal data
+          provided by you may be shared with organizations or state bodies
+          (customs, revenue authorities and etc.) to fulfil an agreement.</span
         >
       </p>
 
@@ -683,7 +713,15 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Customers and other organizations engaging with us for service shall warrant that personal information provided to us for the administration and delivery of goods and services being provided under the Agreement has been obtained fairly and lawfully. Such customers or organizations shall also warrant that subjects are aware of the purpose for which their personal data is being used and that such data may be transferred outside of the EEA for processing or to deliver the service or upon your request, and that the privacy rights of subjects have been upheld.</span
+          >Customers and other organizations engaging with us for service shall
+          warrant that personal information provided to us for the
+          administration and delivery of goods and services being provided under
+          the Agreement has been obtained fairly and lawfully. Such customers or
+          organizations shall also warrant that subjects are aware of the
+          purpose for which their personal data is being used and that such data
+          may be transferred outside of the EEA for processing or to deliver the
+          service or upon your request, and that the privacy rights of subjects
+          have been upheld.</span
         >
       </p>
 
@@ -725,7 +763,15 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >inSports TV have implemented generally accepted standards of technology and operational security to protect personal data from alteration, unauthorized disclosure or destruction, and from use for unauthorized purposes. Furthermore, we have taken measures to ensure that contracts with all third parties that provide technical and processing services include terms that specify appropriate technical and organizational security measures to prevent accidental, unauthorized or unlawful disclosure or processing of personal data.</span
+          >inSports TV have implemented generally accepted standards of
+          technology and operational security to protect personal data from
+          alteration, unauthorized disclosure or destruction, and from use for
+          unauthorized purposes. Furthermore, we have taken measures to ensure
+          that contracts with all third parties that provide technical and
+          processing services include terms that specify appropriate technical
+          and organizational security measures to prevent accidental,
+          unauthorized or unlawful disclosure or processing of personal
+          data.</span
         >
       </p>
 
@@ -1191,31 +1237,14 @@
         >
       </p>
 
-      <p style="margin-bottom: 0in; line-height: normal; background: #f2f2f2">
-        <span
-          style="
-            font-size: 9pt;
-            font-family: 'Trebuchet MS', sans-serif;
-            color: black;
-          "
-          >© inSportsTV.com All right reserved.</span
-        >
-      </p>
-    </div>
-    <div
-      style="
-        background-color: white;
-        max-width: 1264px;
-        padding: 40px;
-        margin: 0 auto;
-      "
-    >
       <p
         style="
           margin-top: 22.5pt;
           margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-          line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <b
@@ -1225,7 +1254,7 @@
               font-family: 'Trebuchet MS', sans-serif;
               color: #002060;
             "
-            >*ERSTE LIGA ADDITIONAL NOTICE</span
+            >Cookies Policy</span
           ></b
         >
       </p>
@@ -1235,7 +1264,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1244,35 +1274,39 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >In the case of ERSTE LIGA TV channel, data is processed jointly in
-          accordance with EU Regulation 2016/679 (hereinafter GDPR). When
-          registering on the inSports site, after accepting this Privacy Policy
-          and Privacy Statement, the user provides the e-mail address required
-          to use the service, which is handed over to the Hungarian Ice Hockey
-          Federation (hereinafter referred to as HIHF), the rights holder of the
-          ERSTE LIGA TV channel, within the framework of joint data processing.
-          Details of the joint processing by the HIHF:
+          >We use cookies, pixels, and other technologies (collectively,
+          “cookies”) to recognize your browser or device, learn more about your
+          interests, and provide you with essential features and services and
+          for additional purposes.<br />
+          If you opt out of advertising cookies, you may still see /platform
+          name/ ads on other sites, but those ads will not be customized by us
+          or our service providers and we will continue to customize your
+          experience on our website via our use of cookies you have not
+          refused.<br />
+          Please note that some of the services will not function as well if
+          cookies are disabled.
         </span>
       </p>
       <p
         style="
-          margin-top: 7.5pt;
-          margin-right: 0in;
+          margin-top: 22.5pt;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-          margin-left: 0in;
-          line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-        <span
+        <b
+          ><span
             style="
-            font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-            color: black;
+              color: #002060;
             "
-          >Purpose of data processing: the HIHF sends marketing, PR and sports
-          promotional content by electronic messages to users who accept this
-          Privacy Statement,  to the e-mail address they have provided.
-        </span>
+            >What kind of cookies do we use?</span
+          ></b
+        >
       </p>
       <p
         style="
@@ -1280,7 +1314,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1289,8 +1324,19 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Legal basis for processing: consent of the data subject.
-        </span>
+          ><i>Analytics and Performance:</i> We make use of analytic cookies to
+          analyze how our visitors use our Website and to monitor Website
+          performance. This allows us to provide a high-quality experience by
+          customizing our offering and quickly identifying and fixing any issues
+          that arise. For example, we might use performance cookies to keep
+          track of which pages are most popular, which method of linking between
+          pages is most effective, and to determine why some pages are receiving
+          error messages. We might also use these cookies to highlight articles
+          or site services that we think will be of interest to you based on
+          your usage of the Website. The information collected by these cookies
+          is not associated with your personal information by us or by our
+          contractors.</span
+        >
       </p>
       <p
         style="
@@ -1298,7 +1344,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1307,9 +1354,13 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >The scope of the data processed: the e-mail address of the user
-          registered on inSports.tv.
-        </span>
+          ><i>Website Functionality:</i> We make use of cookies to provide you
+          with certain functionality. For example, to remember choices you make
+          (such as your username, language or the region you are in), or to
+          recognize the platform from which you access the Website, and to
+          provide enhanced and more personal features. These cookies are not
+          used to track your browsing on other sites.</span
+        >
       </p>
       <p
         style="
@@ -1317,7 +1368,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1326,28 +1378,38 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Duration of processing: until the data subject's consent is
-          withdrawn.
-        </span>
+          ><i>Advertising:</i> Advertising cookies (also known as Third Party or
+          targeting cookies) collect information about the browsing habits
+          associated with your device and are used to make advertising more
+          relevant to you and your interests. Advertisers such as Facebook,
+          Google, Twitter and others may have buttons embedded on our webpage
+          that such as ‘Like' or ‘Share' buttons in addition to providing the
+          requested functionality or if you click on an advertiser’s ad on our
+          website and are taken to the advertiser’s website (these are Third
+          Party Cookies).</span
+        >
       </p>
       <p
         style="
-          margin-top: 7.5pt;
-          margin-right: 0in;
+          margin-top: 22.5pt;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-          margin-left: 0in;
-          line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-        <span
+        <b
+          ><span
             style="
-            font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-            color: black;
+              color: #002060;
+              font-style: italic;
             "
-          >Method of processing: electronically, in compliance with the
-          necessary security standards.
-        </span>
+            >What is the lifespan of cookies?</span
+          ></b
+        >
       </p>
       <p
         style="
@@ -1355,7 +1417,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1363,58 +1426,35 @@
             font-size: 10.5pt;
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
+            font-style: italic;
           "
-          >Data subjects' rights:
-        </span>
-      </p>
-      <ol style="margin-top: 0in" start="1" type="a">
-        <li style="color: black; margin-bottom: 0in; line-height: 1.1">
-          <span
-            style="font-size: 10.5pt; font-family: 'Trebuchet MS', sans-serif"
-            >The data subject has the right to withdraw consent to data
-            processing at any time. Withdrawal of consent does not affect the
-            lawfulness of the prior processing.</span
         >
-        </li>
-        <li style="color: black; margin-bottom: 0in; line-height: 1.1">
-          <span
-            style="font-size: 10.5pt; font-family: 'Trebuchet MS', sans-serif"
-            >The data subject may also exercise his or her right of access to
-            his or her personal data (right to request information about the
-            processing), the right to rectification of his or her personal data
-            (e.g. if his or her e-mail address changes), the right to object to
-            processing, the right to restriction of processing (e.g. if he or
-            she does not wish to receive e-mails for a certain period of time),
-            the right to erasure or blocking of his or her data, and the right
-            to data portability.
+          Analytics and Performance: 2 Years;<br />
+          Website Functionality: 100 days;<br />
+          Advertising: 2 Years;
         </span>
-        </li>
-        <li style="color: black; margin-bottom: 0in; line-height: 1.1">
-          <span
-            style="font-size: 10.5pt; font-family: 'Trebuchet MS', sans-serif"
-            >If the data subject wishes to exercise his or her rights in
-            relation to the joint processing described in this paragraph, he or
-            she may do so by the means listed below:
-          </span>
-        </li>
+      </p>
+
       <p
         style="
           margin-top: 22.5pt;
-            margin-right: 0in;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
-            line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >Name: Hungarian Ice Hockey Federation (hereinafter referred to as
-            the "Controller")
-          </span>
+            >Local storage</span
+          ></b
+        >
       </p>
       <p
         style="
@@ -1422,7 +1462,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1431,26 +1472,39 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-            >Seat: H-1146 Budapest, Istvánmezei út 1-3.
+        >
+          Local storage is a feature we utilize on our website to enhance your
+          user experience. It allows us to store your user preferences and
+          settings, such as volume/mute settings, and enables the smooth
+          functioning of animated content on our website. Additionally, we can
+          utilize local storage to remember the point at which you left off
+          while watching content. This means that if you navigate away from the
+          page or close your browser, you can easily resume viewing from where
+          you left off without any hassle. Rest assured that this information is
+          stored securely and can only be accessed by our website.
         </span>
       </p>
+
       <p
         style="
-            margin-top: 7.5pt;
-            margin-right: 0in;
+          margin-top: 22.5pt;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
-            line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >Postal address: H-1146 Budapest, Istvánmezei út 1-3.
-          </span>
+            >Use of IP addresses and web logs</span
+          ></b
+        >
       </p>
       <p
         style="
@@ -1458,7 +1512,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1467,26 +1522,37 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-            >Represented by: Zsolt Levente Sipos, General Secretary
+        >
+          We may also use your IP address and browser type to help diagnose
+          problems with our server, to administer our Website and to improve the
+          services we offer to you. An IP address is a numeric code that
+          identifies your computer on the internet. Your IP address might also
+          be used to gather broad demographic information.<br />
+          We may perform IP lookups to determine which domain you are coming
+          from (e.g. google.com) to more accurately gauge our users'
+          demographics.
         </span>
       </p>
       <p
         style="
-            margin-top: 7.5pt;
-            margin-right: 0in;
+          margin-top: 22.5pt;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
-            line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >Phone: +36 1 460 6863
-          </span>
+            >Cookie Notice does not cover third party websites</span
+          ></b
+        >
       </p>
       <p
         style="
@@ -1494,7 +1560,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1503,35 +1570,43 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-            >Fax: +36 1 460 6864
+        >
+          Please note that this Cookie Notice does not apply to, and we are not
+          responsible for, the privacy practices of third-party websites which
+          may be linked to this Website.
         </span>
       </p>
+
       <p
         style="
-            margin-top: 7.5pt;
-            margin-right: 0in;
+          margin-top: 22.5pt;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
-            line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >E-mail: adatvedelem@icehockey.hu
-          </span>
+            >Changes to the Cookie Notice</span
+          ></b
+        >
       </p>
-      </ol>
+
       <p
         style="
           margin-top: 7.5pt;
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1540,11 +1615,23 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >HIHF ERSTE LIGA TV Terms and Conditions of Use, including the Privacy
-          Statement, can be found at the following link:
-          "ersteligatv.hu/Felhasznalasi-feltetelek"
+        >
+          We may update this Cookie Notice and we would encourage you to review
+          the notice from time to time to stay informed of how we are using
+          cookies.
         </span>
       </p>
+
+      <p style="margin-bottom: 0in; line-height: normal; background: #f2f2f2">
+        <span
+          style="
+            font-size: 9pt;
+            font-family: 'Trebuchet MS', sans-serif;
+            color: black;
+          "
+          >© inSportsTV.com All right reserved.</span
+        >
+      </p>
     </div>
   </body>
 </html>

public/clients/tunisia/favicon/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png"/>
+            <square144x144logo src="/mstile-144x144.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/clients/tunisia/favicon/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

public/clients/tunisia/favicon/safari-pinned-tab.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000" preserveAspectRatio="xMidYMid meet">
+  <metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+  <g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
+    <path d="M1499 6996 c-2 -2 -59 -6 -125 -9 -247 -12 -462 -57 -614 -129 -64
+-30 -206 -123 -265 -173 -105 -89 -173 -164 -247 -270 -153 -219 -210 -411
+-235 -790 -11 -161 -10 -4130 0 -4270 12 -158 20 -222 43 -331 60 -297 246
+-573 515 -766 182 -130 345 -193 584 -225 22 -2 51 -6 65 -8 124 -17 518 -20
+2260 -20 1773 0 2220 4 2295 19 11 2 45 7 75 10 75 9 120 17 190 36 121 32
+186 61 300 129 87 53 77 46 155 109 140 114 277 283 353 437 83 166 119 330
+139 630 11 160 10 4107 0 4260 -29 420 -108 642 -311 880 -175 205 -390 346
+-626 412 -47 13 -107 26 -135 29 -27 4 -52 8 -55 9 -3 2 -44 6 -90 10 -47 4
+-96 9 -110 13 -26 6 -4154 14 -4161 8z" />
+  </g>
+</svg>

public/images/dollar-sign-grey.svg

@@ -1,3 +0,0 @@
-<svg width="6" height="13" viewBox="0 0 6 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.80998 0.90332V2.65527H2.90764V0.90332H3.80998ZM3.69865 10.4717V12.042H2.80217V10.4717H3.69865ZM4.58342 8.5791C4.58342 8.35254 4.53654 8.15527 4.44279 7.9873C4.35295 7.81543 4.20451 7.66113 3.99748 7.52441C3.79045 7.38379 3.51311 7.25293 3.16545 7.13184C2.66545 6.95605 2.22795 6.75879 1.85295 6.54004C1.48186 6.31738 1.19279 6.04395 0.985762 5.71973C0.782637 5.3916 0.681075 4.9834 0.681075 4.49512C0.681075 4.01465 0.79045 3.59863 1.0092 3.24707C1.23186 2.89551 1.54045 2.62402 1.93498 2.43262C2.32951 2.24121 2.79045 2.14551 3.31779 2.14551C3.72404 2.14551 4.08928 2.20605 4.4135 2.32715C4.74162 2.44824 5.02092 2.62598 5.25139 2.86035C5.48186 3.09473 5.65764 3.38379 5.77873 3.72754C5.90373 4.06738 5.96623 4.45801 5.96623 4.89941H4.55998C4.55998 4.64941 4.53068 4.42676 4.47209 4.23145C4.4174 4.03223 4.33537 3.86426 4.226 3.72754C4.11662 3.58691 3.98381 3.47949 3.82756 3.40527C3.67522 3.33105 3.50139 3.29395 3.30607 3.29395C3.02873 3.29395 2.80022 3.34668 2.62053 3.45215C2.44084 3.55371 2.30803 3.69434 2.22209 3.87402C2.14006 4.05371 2.09904 4.25879 2.09904 4.48926C2.09904 4.71191 2.14201 4.90723 2.22795 5.0752C2.31389 5.24316 2.46037 5.39551 2.6674 5.53223C2.87834 5.66504 3.1674 5.7998 3.53459 5.93652C4.0385 6.11621 4.47404 6.31738 4.84123 6.54004C5.21232 6.75879 5.49748 7.03027 5.6967 7.35449C5.89982 7.6748 6.00139 8.0791 6.00139 8.56738C6.00139 9.07129 5.8842 9.49902 5.64982 9.85059C5.41936 10.2021 5.09514 10.4697 4.67717 10.6533C4.26311 10.833 3.78068 10.9229 3.2299 10.9229C2.88225 10.9229 2.53654 10.8779 2.19279 10.7881C1.85295 10.6943 1.54436 10.542 1.26701 10.3311C0.989669 10.1201 0.768965 9.84082 0.604903 9.49316C0.44084 9.1416 0.358809 8.71191 0.358809 8.2041H1.77678C1.77678 8.50879 1.81779 8.7627 1.89982 8.96582C1.98186 9.16895 2.09318 9.3291 2.23381 9.44629C2.37443 9.56348 2.53068 9.64746 2.70256 9.69824C2.87834 9.74902 3.05412 9.77441 3.2299 9.77441C3.52287 9.77441 3.76897 9.72559 3.96818 9.62793C4.17131 9.52637 4.32365 9.38574 4.42522 9.20605C4.53068 9.02246 4.58342 8.81348 4.58342 8.5791Z" fill="white" fill-opacity="0.7"/>
-</svg>

public/images/dollar-sign.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="23" viewBox="0 0 12 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.81201 15.5813C8.81201 14.9172 8.60107 14.3704 8.1792 13.9407C7.75732 13.5032 7.0542 13.1125 6.06982 12.7688C5.08545 12.4172 4.31982 12.093 3.77295 11.7961C1.95264 10.8196 1.04248 9.37427 1.04248 7.46021C1.04248 6.16333 1.43701 5.09692 2.22607 4.26099C3.01514 3.42505 4.08545 2.92896 5.43701 2.77271V0.218018H7.31201V2.79614C8.67139 2.99146 9.72217 3.56958 10.4644 4.53052C11.2065 5.48364 11.5776 6.72583 11.5776 8.25708H8.7417C8.7417 7.27271 8.51904 6.49927 8.07373 5.93677C7.63623 5.36646 7.03857 5.0813 6.28076 5.0813C5.53076 5.0813 4.94482 5.28442 4.52295 5.69067C4.10107 6.09692 3.89014 6.67896 3.89014 7.43677C3.89014 8.11646 4.09717 8.66333 4.51123 9.07739C4.93311 9.48364 5.64404 9.87036 6.64404 10.2375C7.64404 10.6047 8.4292 10.9446 8.99951 11.2571C9.56982 11.5696 10.0503 11.929 10.4409 12.3352C10.8315 12.7336 11.1323 13.1946 11.3433 13.718C11.5542 14.2415 11.6597 14.8547 11.6597 15.5579C11.6597 16.8782 11.2534 17.9485 10.4409 18.7688C9.63623 19.5891 8.51123 20.0735 7.06592 20.2219V22.5071H5.20264V20.2336C3.65576 20.0618 2.46436 19.5071 1.62842 18.5696C0.800293 17.6321 0.38623 16.3899 0.38623 14.843H3.23389C3.23389 15.8274 3.47998 16.5891 3.97217 17.1282C4.47217 17.6672 5.17529 17.9368 6.08154 17.9368C6.97217 17.9368 7.64795 17.7219 8.10889 17.2922C8.57764 16.8625 8.81201 16.2922 8.81201 15.5813Z" fill="#333333"/>
-</svg>

public/images/matchTabs/bets.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.75 6.5C20.9489 6.5 21.1397 6.42098 21.2803 6.28033C21.421 6.13968 21.5 5.94891 21.5 5.75V2C21.5 1.60218 21.342 1.22064 21.0607 0.93934C20.7794 0.658035 20.3978 0.5 20 0.5H2C1.60218 0.5 1.22064 0.658035 0.93934 0.93934C0.658035 1.22064 0.5 1.60218 0.5 2V5.75C0.5 5.94891 0.579018 6.13968 0.71967 6.28033C0.860322 6.42098 1.05109 6.5 1.25 6.5C1.64782 6.5 2.02936 6.65804 2.31066 6.93934C2.59196 7.22064 2.75 7.60218 2.75 8C2.75 8.39782 2.59196 8.77936 2.31066 9.06066C2.02936 9.34196 1.64782 9.5 1.25 9.5C1.05109 9.5 0.860322 9.57902 0.71967 9.71967C0.579018 9.86032 0.5 10.0511 0.5 10.25V14C0.5 14.3978 0.658035 14.7794 0.93934 15.0607C1.22064 15.342 1.60218 15.5 2 15.5H20C20.3978 15.5 20.7794 15.342 21.0607 15.0607C21.342 14.7794 21.5 14.3978 21.5 14V10.25C21.5 10.0511 21.421 9.86032 21.2803 9.71967C21.1397 9.57902 20.9489 9.5 20.75 9.5C20.3522 9.5 19.9706 9.34196 19.6893 9.06066C19.408 8.77936 19.25 8.39782 19.25 8C19.25 7.60218 19.408 7.22064 19.6893 6.93934C19.9706 6.65804 20.3522 6.5 20.75 6.5ZM20 10.9025V14H14.75V11.75H13.25V14H2V10.9025C2.642 10.7347 3.21025 10.3588 3.61582 9.8336C4.02139 9.3084 4.24139 8.66356 4.24139 8C4.24139 7.33644 4.02139 6.6916 3.61582 6.1664C3.21025 5.64121 2.642 5.2653 2 5.0975V2H13.25V4.25H14.75V2H20V5.0975C19.358 5.2653 18.7898 5.64121 18.3842 6.1664C17.9786 6.6916 17.7586 7.33644 17.7586 8C17.7586 8.66356 17.9786 9.3084 18.3842 9.8336C18.7898 10.3588 19.358 10.7347 20 10.9025Z" fill="white"/>
+</svg>

public/images/matchTabs/chat.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="white"/>
+</svg>

public/images/matchTabs/likes.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9261 5.8212C12.9307 5.87963 12.9358 5.93231 12.9406 5.97754C12.9332 5.99732 12.9251 6.019 12.9163 6.04251C12.8651 6.17851 12.7898 6.37523 12.6939 6.61585C12.502 7.09769 12.229 7.75251 11.9041 8.44659C11.5783 9.14247 11.2053 9.86744 10.8143 10.4938C10.4154 11.1329 10.0302 11.616 9.69372 11.8772C9.66718 11.8978 9.64228 11.9205 9.61923 11.9449C9.18111 12.41 8.91275 12.9173 8.74763 13.3195L8.7475 13.3194L8.74278 13.3316C8.71208 13.4109 8.6845 13.4866 8.66007 13.556C8.58397 13.7007 8.41439 13.9457 8.03684 14.1757C7.79824 14.321 7.67921 14.6026 7.74121 14.875L9.45857 22.4214C9.51892 22.6866 9.738 22.8862 10.0077 22.9216L10.0924 22.2772C10.0077 22.9216 10.0077 22.9216 10.0078 22.9216L10.008 22.9217L10.0085 22.9217L10.0104 22.922L10.0169 22.9228L10.0413 22.9259L10.1335 22.9373C10.2137 22.9471 10.3304 22.9608 10.4785 22.977C10.7745 23.0094 11.1963 23.052 11.7023 23.0927C12.704 23.1733 14.0447 23.2476 15.3961 23.2207C16.4734 23.3062 17.6651 23.3176 18.6492 23.1041C20.351 22.7378 21.1491 21.9031 21.424 21.0082C21.5524 20.5903 21.5506 20.2065 21.5195 19.9324C21.5184 19.923 21.5173 19.9137 21.5162 19.9045C22.2578 19.2016 22.4576 18.4095 22.4234 17.7496C22.407 17.4337 22.3384 17.1612 22.268 16.9564C22.532 16.603 22.6944 16.243 22.7698 15.8841C22.869 15.4117 22.8081 14.9852 22.6891 14.6367C22.5848 14.3315 22.4352 14.0826 22.3041 13.9021C22.3596 13.7543 22.414 13.5732 22.4473 13.3692C22.5426 12.7857 22.4608 11.9957 21.7482 11.3383C21.301 10.9249 20.7077 10.7201 20.1465 10.6173C19.5762 10.5129 18.9701 10.5014 18.4303 10.5271C17.8871 10.553 17.3897 10.6177 17.0293 10.6755C16.8485 10.7044 16.7006 10.7319 16.5969 10.7524C16.545 10.7626 16.504 10.7711 16.4753 10.7772L16.4465 10.7835C16.2767 10.8127 16.1004 10.8472 15.9166 10.8879C15.9176 10.8109 15.9236 10.7124 15.9386 10.5884C15.9877 10.1833 16.1238 9.57481 16.4163 8.67814C17.0456 6.75441 16.9047 5.43702 16.2643 4.58987C15.6381 3.76143 14.6875 3.5895 14.1627 3.5895C13.6555 3.5895 13.3235 3.89075 13.149 4.21465C12.9929 4.50432 12.9404 4.83899 12.9208 5.09751C12.9001 5.36964 12.9113 5.63254 12.9261 5.8212Z" stroke="white" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M7.34175 23.2783C7.70504 23.2809 8.04815 23.132 8.27682 22.8488C8.50519 22.566 8.57817 22.2007 8.50503 21.8497C8.50503 21.8496 8.50503 21.8496 8.50503 21.8496L7.204 15.603L7.204 15.6029C7.06791 14.9497 6.44949 14.4357 5.77589 14.4357H3.29278C2.93392 14.4357 2.64296 14.7265 2.64278 15.0853L2.63906 22.6279C2.63898 22.8004 2.70742 22.9658 2.82933 23.0878C2.95124 23.2097 3.11662 23.2783 3.28906 23.2783H7.34175ZM7.34175 23.2783C7.34045 23.2783 7.33916 23.2782 7.33786 23.2782L7.34456 22.6283V23.2783H7.34175Z" stroke="white" stroke-width="1.3" stroke-linejoin="round"/>
+</svg>

public/images/matchTabs/players.svg

@@ -0,0 +1,6 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1862 14.29C15.1862 14.29 14.4125 13.347 13.7596 13.1778C11.7528 12.67 10.8824 12.0414 10.5681 11.6787C10.689 11.582 10.8099 11.4611 10.9308 11.3402C12.2606 9.84117 12.0672 7.32661 12.043 7.0123C11.8979 3.99001 9.6735 3.26466 8.36787 3.31301C7.06224 3.26466 4.83783 4.01418 4.69276 7.0123C4.66859 7.30244 4.47516 9.81698 5.80497 11.3402C5.92586 11.4853 6.07093 11.6304 6.216 11.7271C6.16764 11.7512 6.14346 11.7754 6.14346 11.7996C5.78079 12.1865 4.93455 12.7184 3.07282 13.2019C2.37164 13.3712 1.59794 14.5076 1.59794 14.5076C1.59794 14.5076 0.928283 15.9908 1.10911 16.1968C2.86924 18.199 5.44868 19.4641 8.31951 19.4641C11.3689 19.4641 14.0895 18.0368 15.8487 15.8148C15.6145 14.8567 15.1862 14.29 15.1862 14.29ZM3.41131 14.5801C2.90357 14.701 2.7585 15.3296 2.7585 15.8374C4.2092 17.1914 6.16764 18.0376 8.31951 18.0376C10.5681 18.0376 12.5991 17.1188 14.0981 15.6681C14.0503 14.7595 13.6004 14.6312 13.4268 14.5817L13.4211 14.5801C12.3331 14.3142 11.5111 13.9998 10.9066 13.6855C10.3021 14.4834 9.35918 14.967 8.34369 14.967C7.35238 14.967 6.4336 14.5076 5.82914 13.7339C5.22469 14.024 4.4268 14.3142 3.41131 14.5801ZM8.36787 10.9775C9.02068 10.9775 9.50425 10.7841 9.86692 10.3731C10.6648 9.47849 10.6648 7.73765 10.5923 7.13319V7.08483C10.5439 6.06934 10.1812 5.36817 9.52843 5.0055C9.02505 4.73093 8.50002 4.73784 8.38365 4.73938C8.37705 4.73946 8.37176 4.73953 8.36787 4.73953H8.27115C8.10191 4.73953 7.61834 4.73953 7.15895 5.0055C6.50614 5.36817 6.14346 6.06934 6.09511 7.08483V7.13319C6.02257 7.73765 6.04675 9.47849 6.84463 10.3731C7.20731 10.7599 7.69087 10.9775 8.34369 10.9775H8.36787ZM8.29533 12.4282C8.02937 12.4282 7.76341 12.4041 7.5458 12.3557C7.42491 12.525 7.25567 12.7426 7.03806 12.936C7.35238 13.3228 7.83594 13.5404 8.34369 13.5404C8.89979 13.5404 9.38336 13.2745 9.72185 12.8635C9.52843 12.67 9.38336 12.5008 9.28664 12.3315C9.02068 12.3799 8.75472 12.4282 8.4404 12.4282H8.29533Z" fill="white"/>
+<rect x="13.3672" y="4.10608" width="6.14323" height="1.53581" rx="0.767904" fill="white"/>
+<rect x="13.3672" y="6.40979" width="6.14323" height="1.53581" rx="0.767904" fill="white"/>
+<rect x="13.3672" y="8.7135" width="6.14323" height="1.53581" rx="0.767904" fill="white"/>
+</svg>

public/images/matchTabs/plays.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.9915 0.666626C4.3915 0.666626 0.666504 4.39996 0.666504 8.99996C0.666504 13.6 4.3915 17.3333 8.9915 17.3333C13.5998 17.3333 17.3332 13.6 17.3332 8.99996C17.3332 4.39996 13.5998 0.666626 8.9915 0.666626ZM8.99984 15.6666C5.3165 15.6666 2.33317 12.6833 2.33317 8.99996C2.33317 5.31663 5.3165 2.33329 8.99984 2.33329C12.6832 2.33329 15.6665 5.31663 15.6665 8.99996C15.6665 12.6833 12.6832 15.6666 8.99984 15.6666Z" fill="white"/>
+<path d="M9.4165 5.45829C9.4165 5.11311 9.13668 4.83329 8.7915 4.83329C8.44633 4.83329 8.1665 5.11311 8.1665 5.45829V9.2671C8.1665 9.61837 8.3508 9.94387 8.65201 10.1246L12.0317 12.1524C12.3139 12.3217 12.6797 12.2316 12.851 11.9507C13.0246 11.666 12.9321 11.2942 12.6453 11.1241L9.90623 9.49886C9.60263 9.31873 9.4165 8.99187 9.4165 8.63885V5.45829Z" fill="white"/>
+</svg>

public/images/matchTabs/stats.svg

@@ -0,0 +1,12 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.1 0H0.9C0.4 0 0 0.4 0 0.9V17.1C0 17.5 0.4 18 0.9 18H21.1C21.5 18 22 17.5 22 17.1V0.9C22 0.4 21.5 0 21.1 0ZM20 16H2V2H20V16Z" fill="white"/>
+<path d="M13.5 4H9C8.44772 4 8 4.44772 8 5C8 5.55228 8.44772 6 9 6H13.5C14.0523 6 14.5 5.55228 14.5 5C14.5 4.44772 14.0523 4 13.5 4Z" fill="white"/>
+<path d="M13.5 8H9C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H13.5C14.0523 10 14.5 9.55228 14.5 9C14.5 8.44772 14.0523 8 13.5 8Z" fill="white"/>
+<path d="M13.5 12H9C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14H13.5C14.0523 14 14.5 13.5523 14.5 13C14.5 12.4477 14.0523 12 13.5 12Z" fill="white"/>
+<path d="M4 13C4 13.5523 4.44772 14 5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13Z" fill="white"/>
+<path d="M4 9C4 9.55228 4.44772 10 5 10C5.55228 10 6 9.55228 6 9C6 8.44772 5.55228 8 5 8C4.44772 8 4 8.44772 4 9Z" fill="white"/>
+<path d="M4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5Z" fill="white"/>
+<path d="M16.5 13C16.5 13.5523 16.9477 14 17.5 14C18.0523 14 18.5 13.5523 18.5 13C18.5 12.4477 18.0523 12 17.5 12C16.9477 12 16.5 12.4477 16.5 13Z" fill="white"/>
+<path d="M16.5 9C16.5 9.55228 16.9477 10 17.5 10C18.0523 10 18.5 9.55228 18.5 9C18.5 8.44772 18.0523 8 17.5 8C16.9477 8 16.5 8.44772 16.5 9Z" fill="white"/>
+<path d="M16.5 5C16.5 5.55228 16.9477 6 17.5 6C18.0523 6 18.5 5.55228 18.5 5C18.5 4.44772 18.0523 4 17.5 4C16.9477 4 16.5 4.44772 16.5 5Z" fill="white"/>
+</svg>

public/images/matchTabs/watch.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12.5C8 13.324 8.94076 13.7944 9.6 13.3L12.9333 10.8C13.4667 10.4 13.4667 9.6 12.9333 9.2L9.6 6.7C8.94076 6.20557 8 6.67595 8 7.5V12.5ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" fill="white"/>
+</svg>

public/images/score-switch-tunisia-off.svg

@@ -0,0 +1,22 @@
+<svg width="38" height="23" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 18H11C7.1 18 4 14.9 4 11C4 7.1 7.1 4 11 4H31C34.9 4 38 7.1 38 11C38 14.9 34.9 18 31 18Z" fill="white" fill-opacity="0.4"/>
+<g filter="url(#filter0_dd_1_1015)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" fill="#E1E1E1"/>
+</g>
+<defs>
+<filter id="filter0_dd_1_1015" x="0" y="0" width="22" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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 dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_1015"/>
+<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/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1_1015" result="effect2_dropShadow_1_1015"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1_1015" result="shape"/>
+</filter>
+</defs>
+</svg>

public/images/score-switch-tunisia-on.svg

@@ -0,0 +1,29 @@
+<svg width="38" height="23" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7 4L27 4C30.9 4 34 7.1 34 11C34 14.9 30.9 18 27 18L7 18C3.1 18 2.71011e-07 14.9 6.11959e-07 11C9.52908e-07 7.1 3.1 4 7 4Z"
+    fill="#0E8F84" />
+  <g filter="url(#filter0_dd_1_1076)">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M27 0.999999C21.4772 0.999999 17 5.47715 17 11C17 16.5228 21.4772 21 27 21C32.5228 21 37 16.5228 37 11C37 5.47715 32.5228 1 27 0.999999Z"
+      fill="#E1E1E1" />
+  </g>
+  <defs>
+    <filter id="filter0_dd_1_1076" x="16" y="0" width="22" height="23" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <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 dy="1" />
+      <feGaussianBlur stdDeviation="0.5" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_1076" />
+      <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 />
+      <feGaussianBlur stdDeviation="0.5" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+      <feBlend mode="normal" in2="effect1_dropShadow_1_1076" result="effect2_dropShadow_1_1076" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1_1076" result="shape" />
+    </filter>
+  </defs>
+</svg>

public/images/sortUp.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="6" viewBox="0 0 7 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.06699 0.75C3.25944 0.416667 3.74056 0.416667 3.93301 0.75L6.09808 4.5C6.29053 4.83333 6.04996 5.25 5.66506 5.25L1.33494 5.25C0.950036 5.25 0.709474 4.83333 0.901924 4.5L3.06699 0.75Z" fill="white" fill-opacity="0.7"/>
+</svg>

public/images/tunis_auth_logo_mobile.svg

@@ -0,0 +1,29 @@
+<svg width="102" height="75" viewBox="0 0 102 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8_12573)">
+<path d="M87.7871 0H14.2129C6.36333 0 0 6.37899 0 14.2479V47.1045C0 54.9734 6.36333 61.3524 14.2129 61.3524H87.7871C95.6367 61.3524 102 54.9734 102 47.1045V14.2479C102 6.37899 95.6367 0 87.7871 0Z" fill="#0B2E4D"/>
+<path d="M88.6677 33.2715H13.3323C5.96907 33.2715 0 39.2553 0 46.6366V61.626C0 69.0074 5.96907 74.9911 13.3323 74.9911H88.6677C96.0309 74.9911 102 69.0074 102 61.626V46.6366C102 39.2553 96.0309 33.2715 88.6677 33.2715Z" fill="url(#paint0_linear_8_12573)"/>
+<path d="M26.3565 21.1689C26.3565 26.5538 23.838 29.2551 18.801 29.2551C14.169 29.2551 11.853 26.8805 11.853 22.1223C11.853 20.8511 12.038 19.5182 12.4078 18.1146L17.1895 17.2583C16.7139 18.8031 16.4762 20.2773 16.4762 21.681C16.4762 24.3204 17.348 25.6358 19.1004 25.6358C20.0338 25.6358 20.6943 25.3444 21.0905 24.753C21.5044 24.1262 21.707 23.0404 21.707 21.4867V12.1559H26.3477V21.1689H26.3565ZM17.031 15.5545C16.5995 15.122 16.3881 14.6011 16.3881 13.992C16.3881 13.3829 16.5995 12.8621 17.031 12.4295C17.4536 12.0058 17.9644 11.7939 18.5808 11.7939C19.1972 11.7939 19.708 12.0058 20.1395 12.4295C20.571 12.8621 20.7823 13.3829 20.7823 13.992C20.7823 14.6011 20.571 15.122 20.1395 15.5545C19.708 15.9783 19.1884 16.1901 18.5808 16.1901C17.9732 16.1901 17.4536 15.9783 17.031 15.5545Z" fill="white"/>
+<path d="M29.3945 6.42676H34.0177V23.6407H29.3945V6.42676Z" fill="white"/>
+<path d="M36.7301 29.5023L36.9679 25.8035C38.0862 26.0154 39.3103 26.1213 40.64 26.1213C43.0088 26.1213 44.1976 25.3003 44.1976 23.6496V23.6231H43.0792C38.6322 23.6231 36.4043 21.7604 36.4043 18.0352C36.4043 16.2608 36.9327 14.8131 37.9982 13.6919C39.2134 12.4207 40.9746 11.7852 43.2818 11.7852C45.404 11.7852 47.2093 12.0676 48.6799 12.6326V20.0126H50.626V23.6231H48.6535C48.5302 25.5563 47.7817 27.0394 46.4167 28.0811C44.9902 29.1757 42.9472 29.723 40.2789 29.723C39.1077 29.723 37.9189 29.6436 36.7213 29.4847L36.7301 29.5023ZM44.1976 15.6958C43.8366 15.5016 43.3875 15.4133 42.8415 15.4133C42.2515 15.4133 41.7936 15.634 41.4501 16.0842C41.1419 16.4991 40.9834 17.0111 40.9834 17.6379C40.9834 19.2357 41.82 20.0302 43.4931 20.0302H44.1976V15.7046V15.6958Z" fill="white"/>
+<path d="M50.2646 20.0303H55.3545V23.6408H50.2646V20.0303Z" fill="white"/>
+<path d="M54.8613 20.0303H59.9512V23.6408H54.8613V20.0303Z" fill="white"/>
+<path d="M59.4673 20.0303H64.5572V23.6408H59.4673V20.0303Z" fill="white"/>
+<path d="M64.0728 20.0303H69.1626V23.6408H64.0728V20.0303Z" fill="white"/>
+<path d="M68.6694 20.0305H72.8083V12.1562H77.4314V23.6322H68.6694V20.0217V20.0305ZM72.2359 28.8406C71.8308 29.2643 71.3288 29.4762 70.7388 29.4762C70.1488 29.4762 69.6645 29.2643 69.2682 28.8406C68.872 28.4168 68.6694 27.9048 68.6694 27.3046C68.6694 26.7043 68.8632 26.2099 69.2682 25.795C69.6733 25.3713 70.1665 25.1594 70.7388 25.1594C71.3112 25.1594 71.8308 25.3713 72.2359 25.795C72.6321 26.2187 72.8347 26.7219 72.8347 27.3046C72.8347 27.8872 72.6321 28.4168 72.2359 28.8406ZM76.9119 28.8406C76.5156 29.2643 76.0224 29.4762 75.4412 29.4762C74.8601 29.4762 74.3581 29.2643 73.953 28.8406C73.548 28.4168 73.3454 27.9048 73.3454 27.3046C73.3454 26.7043 73.548 26.2099 73.953 25.795C74.3581 25.3713 74.8512 25.1594 75.4412 25.1594C76.0313 25.1594 76.5156 25.3713 76.9119 25.795C77.3081 26.2187 77.5107 26.7219 77.5107 27.3046C77.5107 27.8872 77.3081 28.4168 76.9119 28.8406Z" fill="white"/>
+<path d="M79.6855 20.0299H86.0435C85.9202 18.8028 85.4183 17.7788 84.5465 16.9402C83.6306 16.0574 82.3978 15.4925 80.8744 15.2364L81.9487 11.4141C87.699 12.5705 90.5698 15.9162 90.5698 21.4511V23.6404H79.6855V20.0299Z" fill="white"/>
+<path d="M20.7294 63.4183C19.0651 64.8484 16.9604 65.5634 14.4067 65.5634C12.3373 65.5634 10.5761 65.378 9.10546 65.0161L9.61621 59.384C11.2189 60.0638 12.8568 60.408 14.53 60.408C15.9037 60.408 16.5906 59.9049 16.5906 58.8897C16.5906 58.2188 16.1767 57.6715 15.3401 57.2566C15.0583 57.1153 14.6356 56.9299 14.072 56.7092C13.35 56.4532 12.8568 56.2679 12.6014 56.1531C9.93322 55.0232 8.60352 53.0634 8.60352 50.265C8.60352 48.1111 9.38725 46.4073 10.9459 45.1538C12.5398 43.8915 14.7237 43.2559 17.5152 43.2559C18.9154 43.2559 20.2274 43.3971 21.4515 43.6708L20.9583 48.782C19.7519 48.3583 18.5279 48.1464 17.3039 48.1464C15.7452 48.1464 14.9615 48.6319 14.9615 49.5941C14.9615 50.1679 15.3929 50.6623 16.2471 51.1037C16.5289 51.2361 16.9604 51.4303 17.5592 51.6775L19.0739 52.2954C21.8213 53.5489 23.1951 55.4822 23.1951 58.104C23.1951 60.2403 22.3761 62.0059 20.7294 63.4183Z" fill="white"/>
+<path d="M38.4733 56.3913C36.853 58.0068 34.581 58.8101 31.6574 58.8101C31.358 58.8101 31.0938 58.8013 30.8649 58.7748V65.1395H24.9648V43.6794C27.0783 43.5647 29.3767 43.5117 31.8423 43.5117C37.7512 43.5117 40.7012 45.8864 40.7012 50.6357C40.7012 52.9838 39.9615 54.8994 38.4733 56.3825V56.3913ZM31.6926 48.3669C31.4637 48.3669 31.1907 48.3758 30.8737 48.4023V53.8401C31.1731 53.9019 31.5253 53.9372 31.9304 53.9372C33.7268 53.9372 34.625 53.0015 34.625 51.1388C34.625 49.2762 33.6476 48.3758 31.7014 48.3758L31.6926 48.3669Z" fill="white"/>
+<path d="M59.3964 62.4296C57.3446 64.5394 54.7732 65.5988 51.6999 65.5988C48.3977 65.5988 45.888 64.6454 44.1708 62.7298C42.5065 60.876 41.6787 58.2453 41.6787 54.8466C41.6787 51.448 42.7442 48.5878 44.8665 46.3986C46.9183 44.2976 49.4808 43.2471 52.5453 43.2471C55.8476 43.2471 58.3661 44.2005 60.0921 46.1161C61.7564 47.9611 62.5842 50.5829 62.5842 53.9904C62.5842 57.3978 61.5186 60.2668 59.3964 62.4385V62.4296ZM52.1755 48.6408C50.8722 48.6408 49.8507 49.1263 49.0934 50.0974C48.3361 51.0949 47.9662 52.4808 47.9662 54.2728C47.9662 58.1835 49.3399 60.1433 52.0874 60.1433C53.3907 60.1433 54.4122 59.6666 55.1519 58.7132C55.918 57.7333 56.2967 56.3474 56.2967 54.5553C56.2967 50.6094 54.9229 48.6408 52.1755 48.6408Z" fill="white"/>
+<path d="M74.6221 65.1395L70.6594 57.3182H70.3776V65.1395H64.4775V43.6794C66.1419 43.5647 68.5811 43.5117 71.8041 43.5117C77.4752 43.5117 80.3107 45.7451 80.3107 50.2208C80.3107 51.5273 79.9673 52.719 79.2892 53.796C78.5848 54.8994 77.6513 55.6763 76.4713 56.1088C77.1054 57.0622 77.6161 57.892 78.0212 58.5894L81.799 65.1395H74.6309H74.6221ZM71.4959 48.3846C71.0116 48.3846 70.6417 48.4023 70.3776 48.4464V53.0544C70.677 53.0986 71.0028 53.1162 71.355 53.1162C73.1867 53.1162 74.0937 52.2953 74.0937 50.6621C74.0937 49.1438 73.2307 48.3758 71.4959 48.3758V48.3846Z" fill="white"/>
+<path d="M91.6619 48.7644V65.1397H85.7618V48.7644H81.1299V43.6885H96.2938V48.7644H91.6619Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8_12573" x1="0" y1="54.1401" x2="102" y2="54.1401" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005D6B"/>
+<stop offset="1" stop-color="#1DB9AB"/>
+</linearGradient>
+<clipPath id="clip0_8_12573">
+<rect width="102" height="75" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/index.html

@@ -42,14 +42,13 @@
           name="msapplication-config"
           content="%PUBLIC_URL%/clients/%REACT_APP_CLIENT%/favicon/browserconfig.xml" />
     <% } %>
-      <!-- Matomo Tag Manager -->
-      <script>
-        var _mtm = window._mtm = window._mtm || [];
-        _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src='https://matomo.insports.tv/js/container_KFCeSAkC.js'; s.parentNode.insertBefore(g,s);
-      </script>
-      <!-- End Matomo Tag Manager -->
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5K7GHJB');</script>
+    <!-- End Google Tag Manager -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -67,5 +66,11 @@
     <!-- Start of ChromeCast script -->
     <script src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
     <!-- End of ChromeCast script -->
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5K7GHJB"
+                      height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
   </body>
 </html>

public/silent-refresh.html

@@ -1,15 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <title></title>
 </head>
+
 <body>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.11.5/oidc-client.min.js" integrity="sha512-pGtU1n/6GJ8fu6bjYVGIOT9Dphaw5IWPwVlqkpvVgqBxFkvdNbytUh0H8AP15NYF777P4D3XEeA/uDWFCpSQ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.11.5/oidc-client.min.js"
+    integrity="sha512-pGtU1n/6GJ8fu6bjYVGIOT9Dphaw5IWPwVlqkpvVgqBxFkvdNbytUh0H8AP15NYF777P4D3XEeA/uDWFCpSQ1g=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script>
     new Oidc.UserManager().signinSilentCallback()
+      // обновляем рефреш токен в локалсторадже
+      // так как safari не дает доступ к кукам
+      .then(() => {
+        const refreshToken = localStorage.getItem('refresh_token');
+        if (refreshToken) {
+          localStorage.setItem('refresh_token', new URLSearchParams(document.location.search).get('refresh_token'));
+        }
+      })
       .catch((err) => {
         console.error('OIDC: silent refresh callback error', err);
       });
   </script>
 </body>
+
 </html>

src/components/AccessTimer/index.tsx

@@ -107,7 +107,7 @@ export const AccessTimer = ({
                 <T9n t='sign_in_full_game' />
               </SignText>
             </TimerContainer>
-            <SignInBtn onClick={() => logout('saveToken')}>
+            <SignInBtn onClick={() => logout('saveToken')} id='match_register'>
               <T9n t='sign_in' />
             </SignInBtn>
           </AccessTimerContainer>

src/components/Ads/components/AdComponent/hooks.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react'
+
+import ReactGA from 'react-ga'
+
+import { updateAdsView } from 'requests'
+
+import { useToggle } from 'hooks'
+
+import { getLocalStorageItem, isMatchPage } from 'helpers'
+
+import {
+  device,
+  COUNTRY,
+} from 'config'
+
+import { useMatchPageStore } from 'features/MatchPage/store'
+
+import type { AdComponentType } from './index'
+
+import { checkVideo } from '../../helpers'
+import {
+  adsViews,
+  EventGA,
+  ViewsType,
+} from '../../types'
+
+const countryCode = getLocalStorageItem(COUNTRY)
+
+export const useAd = ({ ad }: AdComponentType) => {
+  const isMatch = isMatchPage()
+
+  const [isOpenAd, setIsOpenAd] = useState(isMatch)
+  const [isNeedToShow, setIsNeedToShow] = useState(isMatch)
+  const [shownTime, setShownTime] = useState(0)
+
+  const { isFullscreen } = useMatchPageStore()
+
+  const views = getLocalStorageItem(adsViews) as ViewsType
+  const {
+    duration,
+    frequency,
+    id,
+    media,
+    name,
+    time_close,
+  } = ad
+
+  const {
+    close,
+    isOpen: isOpenCloseBtn,
+    open: showCloseBtn,
+  } = useToggle()
+
+  const isNeedBanner = Number(views?.HOME) % frequency === 0
+  const isVideo = checkVideo(media.url)
+  const currentAdsTime = duration - shownTime
+
+  useEffect(() => {
+    if (!isFullscreen) {
+      if (currentAdsTime === 0) {
+        setShownTime(0)
+      } else {
+        const stopWatch = setInterval(() => {
+          setShownTime((prev) => prev + 1)
+        }, 1000)
+        return () => clearInterval(stopWatch)
+      }
+    }
+    return undefined
+  }, [
+    isFullscreen,
+    currentAdsTime,
+  ])
+
+  const handleClose = () => {
+    setIsOpenAd(false)
+    isMatch && setIsNeedToShow(false)
+    sendBannerClickEvent(EventGA.CLOSE)
+  }
+
+  const sendBannerClickEvent = (event: EventGA) => {
+    ReactGA.initialize('Advertisement')
+    ReactGA.event({
+      action: event,
+      category: 'Advertisement',
+      label: `${name}_${countryCode ?? ''}_${device}`,
+      value: id,
+    })
+  }
+
+  useEffect(() => {
+    setShownTime(0)
+
+    if (isMatch) {
+      const interval = setInterval(() => {
+        setIsNeedToShow(true)
+        setIsOpenAd(true)
+      }, frequency * 1000)
+
+      return () => clearInterval(interval)
+    }
+
+    setIsNeedToShow(isNeedBanner)
+    return setIsOpenAd(isNeedBanner)
+  }, [
+    frequency,
+    isNeedToShow,
+    views?.HOME,
+    isNeedBanner,
+    isMatch,
+  ])
+
+  useEffect(() => {
+    if (isFullscreen || !isOpenAd) return undefined
+
+    const timeoutCloseAd = setTimeout(handleClose, currentAdsTime * 1000)
+    return () => {
+      clearTimeout(timeoutCloseAd)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    isNeedToShow,
+    isOpenAd,
+    isFullscreen,
+    currentAdsTime,
+  ])
+
+  useEffect(() => {
+    close()
+    const timeoutCloseBtn = time_close && setTimeout(showCloseBtn, time_close * 1000)
+    return () => {
+      time_close && clearTimeout(timeoutCloseBtn)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    isNeedToShow,
+    isOpenAd,
+    views?.HOME,
+  ])
+
+  useEffect(() => {
+    if (!isNeedToShow || (!isMatch && !isNeedBanner)) return
+
+    (async () => {
+      await updateAdsView({ adv_id: id })
+    })()
+    sendBannerClickEvent(EventGA.DISPLAY)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    id,
+    isNeedToShow,
+    isMatch,
+  ])
+
+  return {
+    handleClose,
+    isNeedToShow,
+    isOpenAd,
+    isOpenCloseBtn,
+    isVideo,
+    sendBannerClickEvent,
+  }
+}

src/components/Ads/components/AdComponent/index.tsx

@@ -0,0 +1,91 @@
+import type { MouseEvent } from 'react'
+import { memo } from 'react'
+
+import type { AdType } from 'requests'
+
+import { useLexicsStore } from 'features/LexicsStore'
+
+import { useAd } from './hooks'
+
+import { EventGA } from '../../types'
+
+import {
+  AdImg,
+  AdVideo,
+  AdWrapper,
+  LinkWrapper,
+  AdsCloseButton,
+} from './styled'
+
+export type AdComponentType = {
+  ad: AdType,
+}
+export const AdComponent = memo(({ ad }: AdComponentType) => {
+  const {
+    link,
+    media,
+    position,
+  } = ad
+
+  const {
+    handleClose,
+    isNeedToShow,
+    isOpenAd,
+    isOpenCloseBtn,
+    isVideo,
+    sendBannerClickEvent,
+  } = useAd({ ad })
+
+  const { suffix } = useLexicsStore()
+
+  const close = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    handleClose()
+  }
+
+  const onLinkClick = () => {
+    link && sendBannerClickEvent(EventGA.CLICK)
+  }
+
+  return (
+    position && isOpenAd && isNeedToShow
+      ? (
+        <AdWrapper
+          position={position.id}
+          isOpenAd={isOpenAd}
+        >
+          {isOpenCloseBtn && (
+            <AdsCloseButton
+              onClick={close}
+              size={12}
+              position={position.id}
+            />
+          )}
+          <LinkWrapper
+            href={link}
+            target='_blank'
+            rel='noreferrer'
+            onClick={onLinkClick}
+          >
+            {isVideo
+              ? (
+                <AdVideo
+                  muted={isVideo}
+                  autoPlay={isVideo}
+                  loop={isVideo}
+                  src={media.url}
+                  position={position.id}
+                />
+              )
+              : (
+                <AdImg
+                  src={media.url}
+                  position={position.id}
+                  alt={`name_${suffix}`}
+                />
+              )}
+          </LinkWrapper>
+        </AdWrapper>
+      ) : null
+  )
+})

src/components/Ads/components/AdComponent/styled.tsx

@@ -0,0 +1,109 @@
+import styled, { css } from 'styled-components/macro'
+
+import includes from 'lodash/includes'
+
+import { CloseButton } from 'features/PopupComponents'
+
+import {
+  MATCH_ADS,
+  PLAYER_ADS,
+  VIEW_ADS,
+} from '../../types'
+
+type Props = {
+  position: number,
+}
+
+const header = [7, 8, 9]
+
+const chooseStyle = (type: number) => {
+  switch (true) {
+    case VIEW_ADS.COLUMN === type:
+      return 'grid-row: 1 / 3; img {max-height: none;}'
+    case VIEW_ADS.ROW === type:
+      return 'grid-column: 1 / 3'
+    case VIEW_ADS.SQUARE === type:
+      return 'grid-row: 1 / 3; grid-column: 1 / 3; img {max-height: none;}'
+    case VIEW_ADS.SECOND_COLUMN === type:
+      return 'grid-column: 2 / 3; grid-row: 1 / 1'
+    case VIEW_ADS.SECOND_ROW === type:
+      return 'grid-column: 1 / 2; grid-row: 2 / 3;'
+    case MATCH_ADS.PLAYS_TOP === type:
+      return 'margin-left: 14px; height: 48px'
+    case MATCH_ADS.PLAYS_BOTTOM === type:
+      return 'grid-row: 4; margin-bottom: 12px; height: 48px;'
+    case PLAYER_ADS.LEFT_BOTTOM === type:
+      return css`
+        height: auto; 
+        width: 42.4%; 
+        bottom: 100px; 
+        left: 20px; 
+      `
+    case PLAYER_ADS.CENTER_BOTTOM === type:
+      return css`
+        height: 18.3%; 
+        width: 81.3%; 
+        bottom: 100px; 
+        left: 50%; 
+        transform: translateX(-50%);
+      `
+    case PLAYER_ADS.RIGHT === type:
+      return css`
+        height: 87.2%; 
+        width: 18.3%; 
+        bottom: 90px; 
+        right: 18px;
+      `
+    case PLAYER_ADS.FULL_SCREEN === type:
+      return 'bottom: 0; left: 0;'
+    default:
+      return ''
+  }
+}
+
+export const AdImg = styled.img<Props>`
+  width: 100%;
+  min-height: ${({ position }) => (!includes(header, position) && '100%')};
+  max-height: ${({ position }) => (includes(header, position) ? '13rem' : '100%')};
+  cursor: pointer;
+  border-radius: 3px;
+`
+
+export const AdVideo = styled.video<Props>`
+  object-fit: contain;
+  width: 100%;
+  cursor: pointer;
+  max-height: ${({ position }) => (includes(header, position) ? '283px' : '100%')};
+  background-color: black;
+  border-radius: 3px;
+`
+
+export const AdWrapper = styled.div<Props & {isOpenAd: boolean}>`
+  position: ${({ position }) => (includes(PLAYER_ADS, position) ? 'absolute' : 'relative')};
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  
+  ${({ position }) => chooseStyle(position)};
+  
+  display: ${({ isOpenAd }) => (isOpenAd ? '' : 'none')};
+`
+
+export const AdsCloseButton = styled(CloseButton)<Props>`
+  position: absolute;
+  right: ${({ position }) => (position === PLAYER_ADS.FULL_SCREEN ? '10px' : '0')};
+  top: ${({ position }) => (position === PLAYER_ADS.FULL_SCREEN ? '10px' : '0')};
+  background: none;
+  border-radius: 0;
+  z-index: 2;
+  cursor: pointer;
+  color: #9B9B9B;
+  width: 28px;
+  height: 28px;
+  
+  :hover {
+    background: none;
+  }
+`
+
+export const LinkWrapper = styled.a``

src/components/Ads/components/MobileAd/index.tsx

@@ -0,0 +1,79 @@
+import type { MouseEvent } from 'react'
+
+import includes from 'lodash/includes'
+
+import type { AdType } from 'requests'
+
+import { useLexicsStore } from 'features/LexicsStore'
+
+import { useAd } from '../AdComponent/hooks'
+import { EventGA, PLAYER_MOBILE_FULL_SCREEN } from '../../types'
+
+import {
+  AdsCloseButton,
+  Img,
+  MobileAdWrapper,
+  Video,
+} from './styled'
+
+type MobileAdTypes = {
+  ad: AdType,
+}
+
+export const MobileAd = ({ ad }: MobileAdTypes) => {
+  const {
+    link,
+    media,
+    position,
+  } = ad
+
+  const { suffix } = useLexicsStore()
+
+  const {
+    handleClose,
+    isNeedToShow,
+    isOpenAd,
+    isOpenCloseBtn,
+    isVideo,
+    sendBannerClickEvent,
+  } = useAd({ ad })
+
+  const close = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    handleClose()
+  }
+
+  const onLinkClick = () => {
+    if (link) {
+      sendBannerClickEvent(EventGA.CLICK)
+      window.open(link, '_blank')
+    }
+  }
+
+  return (
+    position && isOpenAd && isNeedToShow ? (
+      <MobileAdWrapper
+        position={position.id}
+        onClick={onLinkClick}
+      >
+        {isOpenCloseBtn
+            && (
+              <AdsCloseButton
+                position={position.id}
+                onClick={close}
+                size={includes(PLAYER_MOBILE_FULL_SCREEN, position.id) ? 12 : 8}
+              />
+            )}
+        {isVideo
+          ? <Video position={position.id} src={media.url} />
+          : (
+            <Img
+              position={position.id}
+              src={media.url}
+              alt={`name_${suffix}`}
+            />
+          )}
+      </MobileAdWrapper>
+    ) : null
+  )
+}

src/components/Ads/components/MobileAd/styled.tsx

@@ -0,0 +1,115 @@
+import styled, { css } from 'styled-components/macro'
+
+import includes from 'lodash/includes'
+
+import { CloseButton } from 'features/PopupComponents'
+
+import {
+  MATCH_ADS,
+  PLAYER_MOBILE_FULL_SCREEN,
+  PLAYER_MOBILE_ADS,
+  MATCH_PAGE_MOBILE_ADS,
+  VIEW_ADS,
+} from '../../types'
+
+type Props = {
+  position: number,
+}
+
+const chooseStyle = (type: number) => {
+  switch (type) {
+    case MATCH_ADS.PLAYS_BOTTOM_MOBILE:
+      return css`
+        grid-row: 4; 
+        margin-bottom: 12px; 
+        height: 48px;
+      `
+    case PLAYER_MOBILE_ADS:
+      return css`
+        position: absolute;
+        width: 92%; 
+        bottom: 50px; 
+        left: 15px;
+      `
+    case PLAYER_MOBILE_FULL_SCREEN.VERTICAL_FULL_SCREEN:
+    case PLAYER_MOBILE_FULL_SCREEN.HORIZONTAL_FULL_SCREEN:
+      return css`
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        padding: 5px; 
+        background-color: rgba(0, 0, 0, 0.7);
+      `
+    case VIEW_ADS.MOBILE_IN_COLLAPSE_FOOTER:
+    case VIEW_ADS.MOBILE_IN_COLLAPSE_HEADER:
+      return 'margin-top: 6px'
+    default:
+      return ''
+  }
+}
+
+export const MobileAdWrapper = styled.div<Props>`
+  position: relative;
+  width: 100%;
+  z-index: ${({ position }) => (includes(PLAYER_MOBILE_FULL_SCREEN, position) ? '101' : '4')};
+  
+  ${({ position }) => chooseStyle(position)};
+`
+
+export const AdsCloseButton = styled(CloseButton)<Props>`
+  position: absolute;
+  right: ${({ position }) => (includes(PLAYER_MOBILE_FULL_SCREEN, position) ? '-5px' : '-10px')};
+  top: ${({ position }) => (includes(PLAYER_MOBILE_FULL_SCREEN, position) ? '15px' : '10px')};
+  background: none;
+  border-radius: 0;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  color: #9B9B9B;
+`
+
+export const Img = styled.img<Props>`
+  border-radius: 2px;
+  width: 100%;
+
+  object-fit: ${({ position }) => {
+    switch (true) {
+      case position === PLAYER_MOBILE_FULL_SCREEN.VERTICAL_FULL_SCREEN:
+        return 'fill'
+      case position === MATCH_ADS.PLAYS_TOP_MOBILE:
+        return 'contain'
+      default:
+        return 'cover'
+    }
+  }};
+
+  height: ${({ position }) => {
+    switch (true) {
+      case position === 10:
+        return '50px'
+      case includes(MATCH_PAGE_MOBILE_ADS, position):
+        return '100%'
+      default:
+        return '75px'
+    }
+  }}
+`
+
+export const Video = styled.video<Props>`
+  max-height: 100%;
+  object-fit: cover;
+  min-width: 100%;
+  height: ${({ position }) => (position === 10 ? '50px' : '75px')};
+  border-radius: 2px;
+
+  height: ${({ position }) => {
+    switch (true) {
+      case position === 10:
+        return '50px'
+      case position === MATCH_ADS.PLAYS_TOP_MOBILE:
+        return '48px'
+      default:
+        return '75px'
+    }
+  }}
+`

src/components/Ads/helpers/calcMaxDurationAds.tsx

@@ -0,0 +1,16 @@
+import type { AdResponse, AdsListType } from 'requests'
+
+export const calcMaxAdDurationAds = (advertisements: AdResponse) => {
+  const allAds = Object.values(advertisements)
+
+  const combineAds = allAds.reduce((result, currentAd) => {
+    result.push(...currentAd)
+
+    return result
+  }, [] as AdsListType)
+
+  const maxDuration = combineAds
+    .reduce((result, { duration }) => Math.max(result, duration), 0)
+
+  return maxDuration
+}

src/components/Ads/helpers/index.tsx

@@ -0,0 +1 @@
+export * from './isVideo'

src/components/Ads/helpers/isVideo.tsx

@@ -0,0 +1,2 @@
+const regexp = /^https?:\/\/\S+(?:mp4)$/
+export const checkVideo = (url: string) => regexp.test(url)

src/components/Ads/hooks.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from 'react'
+
+import { useQuery } from 'react-query'
+
+import { useRecoilState } from 'recoil'
+
+import { isMobileDevice, querieKeys } from 'config'
+
+import { getAds } from 'requests'
+
+import { isMatchPage } from 'helpers/isMatchPage'
+import { useLang } from 'features/LexicsStore/hooks/useLang'
+import { useAuthStore } from 'features/AuthStore'
+
+import {
+  DeviceType,
+  PageType,
+} from './types'
+import { calcMaxAdDurationAds } from './helpers/calcMaxDurationAds'
+import { adsStore } from '../../pages/HighlightsPage/storeHighlightsAtoms'
+
+type Props = {
+  matchId?: number,
+  sportType?: number,
+  tournamentId?: number,
+}
+
+export const useAds = ({
+  matchId,
+  sportType,
+  tournamentId,
+}: Props) => {
+  const [ads, setAds] = useRecoilState(adsStore)
+  const { lang } = useLang()
+  const { user } = useAuthStore()
+
+  useQuery({
+    enabled: isMatchPage() ? (!!user && !!tournamentId) : !!user,
+    queryFn: async () => {
+      const adsList = await getAds({
+        client_type: isMobileDevice ? DeviceType.MOBILE : DeviceType.WEB,
+        language: lang,
+        type_id: isMatchPage() ? PageType.MATCH : PageType.HOME,
+        ...isMatchPage() && {
+          matches: [{
+            match_id: matchId,
+            sport_id: sportType,
+          }],
+          tournaments: [{
+            sport_id: sportType,
+            tournament_id: tournamentId,
+          }],
+        },
+      })
+      adsList && setAds(adsList)
+      return adsList
+    },
+    queryKey: [querieKeys.ads, matchId],
+    staleTime: useMemo(() => Math.max(calcMaxAdDurationAds(ads), 60 * 1000), [ads]),
+  })
+
+  return {
+    ads,
+  }
+}

src/components/Ads/index.tsx

@@ -0,0 +1,31 @@
+import type { AdType } from 'requests'
+
+import { isMobileDevice } from 'config'
+
+import type { AdsPropsType } from './types'
+import { AdComponent } from './components/AdComponent'
+import { MobileAd } from './components/MobileAd'
+
+import {
+  HeaderWrapAd,
+} from './styled'
+
+export const HeaderAds = ({ ads }: AdsPropsType) => (
+  ads?.length ? (
+    <HeaderWrapAd column={ads?.length}>
+      {ads.map((ad: AdType) => (
+        !isMobileDevice ? (
+          <AdComponent
+            ad={ad}
+            key={ad.id}
+          />
+        ) : (
+          <MobileAd
+            ad={ad}
+            key={ad.id}
+          />
+        )
+      ))}
+    </HeaderWrapAd>
+  ) : null
+)

src/components/Ads/styled.tsx

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config'
+
+export const HeaderWrapAd = styled.div<{column: number}>`
+  width: 100%;
+  margin-bottom: 0.7rem;
+  display: grid;
+  grid-column-gap: 0.9rem;
+  grid-template-columns: ${({ column }) => (column > 1 ? `repeat(${column},${16.3 * 6 / column}%)` : 'repeat(1, 98.7%)')};
+  
+  ${isMobileDevice && css`
+    padding: 0 0.71rem;
+    grid-template-columns: none;
+  `}}
+`

src/components/Ads/types.tsx

@@ -0,0 +1,59 @@
+import type { AdsListType } from 'requests'
+
+export enum PageType {
+  HOME = 1,
+  MATCH = 2,
+}
+
+export enum DeviceType {
+  MOBILE = 'mobile',
+  WEB = 'web'
+}
+
+export type ViewsType = Partial<Record<keyof typeof PageType, number>>
+
+export enum EventGA {
+  CLICK = 'banner_click',
+  CLOSE = 'banner_close',
+  DISPLAY = 'banner_display'
+}
+
+export enum VIEW_ADS {
+  ROW = 4,
+  COLUMN = 5,
+  SQUARE = 6,
+  SECOND_COLUMN = 2,
+  SECOND_ROW = 3,
+  MOBILE_IN_COLLAPSE_HEADER = 12,
+  MOBILE_IN_COLLAPSE_FOOTER = 25
+}
+
+export const HEADER_MOBILE_ADS = [10, 11]
+
+export enum MATCH_ADS {
+  WATCH_TOP = 13,
+  PLAYS_TOP = 14,
+  PLAYS_BOTTOM = 15,
+  PLAYS_TOP_MOBILE = 16,
+  PLAYS_BOTTOM_MOBILE = 17,
+}
+
+export enum PLAYER_ADS {
+  LEFT_BOTTOM = 18,
+  CENTER_BOTTOM = 19,
+  RIGHT = 20,
+  FULL_SCREEN = 21,
+}
+
+export const PLAYER_MOBILE_ADS = 22
+
+export enum PLAYER_MOBILE_FULL_SCREEN {
+  VERTICAL_FULL_SCREEN = 23,
+  HORIZONTAL_FULL_SCREEN = 24,
+}
+
+export const MATCH_PAGE_MOBILE_ADS = [16, 17, 22, 23, 24]
+
+export type AdsPropsType = Record<'ads', AdsListType | undefined>
+
+export const adsViews = 'adsViews'

src/components/Carousel/helpers/common.tsx

@@ -0,0 +1,72 @@
+import type { Props, State } from '../types'
+import {
+  createVariableSizingTransformationSet,
+  createClones,
+  createDefaultTransformationSet,
+  getElementDimensions,
+  getItemsCount,
+  getItemsOffset,
+  getTransitionProperty,
+  getTranslate3dProperty,
+  getItemsInSlide,
+} from './elements'
+import { getActiveIndex, getStartIndex } from './math'
+
+export const calculateInitialState = (props: Props, el: HTMLElement | null): State => {
+  const {
+    activeIndex: propsActiveIndex = 0,
+    animationDuration = 0,
+    infinite = false,
+    variableSizing = false,
+  } = props
+  const clones = createClones(props)
+  const transition = getTransitionProperty()
+  const itemsCount = getItemsCount(props)
+  const itemsOffset = getItemsOffset(props)
+  const itemsInSlide = getItemsInSlide(itemsCount, props)
+  const startIndex = getStartIndex(propsActiveIndex, itemsCount)
+  const activeIndex = getActiveIndex({
+    infinite,
+    itemsCount,
+    startIndex,
+  })
+  const { width: listWidth } = getElementDimensions(el)
+
+  const transformationSet = variableSizing
+    ? createVariableSizingTransformationSet({
+      el,
+      infinite,
+      listWidth,
+      props,
+    }).coords
+    : createDefaultTransformationSet({
+      children: clones,
+      infinite,
+      itemsInSlide,
+      listWidth,
+      props,
+    }).coords
+
+  const translate3d = getTranslate3dProperty(activeIndex, {
+    infinite,
+    itemsInSlide,
+    itemsOffset,
+    transformationSet,
+    variableSizing,
+  })
+
+  return {
+    activeIndex,
+    animationDuration,
+    clones,
+    infinite,
+    itemsCount,
+    itemsInSlide,
+    itemsOffset,
+    listWidth,
+    transformationSet,
+    transition,
+    translate3d,
+    variableSizing,
+  }
+}

src/components/Carousel/helpers/elements.tsx

@@ -0,0 +1,274 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { Children } from 'react'
+
+import type {
+  Transformations,
+  ItemCoords,
+  Props,
+  State,
+  Transition,
+} from '../types'
+import { mapPartialCoords, mapPositionCoords } from './mappers'
+import { getShiftIndex } from './math'
+
+export const getSlides = ({ children }: Props) => Children.toArray(children)
+
+export const getItemsCount = (props: Props) => getSlides(props).length
+
+export const getItemsOffset = ({ infinite }: Props) => (infinite ? 1 : 0)
+
+export const createClones = (props: Props) => {
+  const slides = getSlides(props)
+
+  if (!props.infinite) return slides
+
+  const itemsCount = getItemsCount(props)
+  const itemsOffset = getItemsOffset(props)
+  const itemsInSlide = getItemsInSlide(itemsCount, props)
+  const cursor = Math.min(itemsInSlide, itemsCount) + itemsOffset
+
+  const clonesAfter = slides.slice(0, cursor)
+  const clonesBefore = slides.slice(-cursor)
+
+  if (itemsOffset && itemsInSlide === itemsCount) {
+    const afterOffsetClone = slides[0]
+    const [beforeOffsetClone] = slides.slice(-1)
+
+    clonesBefore.unshift(beforeOffsetClone)
+    clonesAfter.push(afterOffsetClone)
+  }
+
+  return clonesBefore.concat(slides, clonesAfter)
+}
+
+type CreateVariableSizingTransformationSetArgs = {
+  el: HTMLElement | null,
+  infinite: boolean,
+  listWidth: number,
+  props: Props,
+}
+
+export const createVariableSizingTransformationSet = ({
+  el,
+  infinite,
+  listWidth,
+  props,
+}: CreateVariableSizingTransformationSetArgs) => {
+  let content = 0
+  let partial = true
+  let coords: Array<ItemCoords> = []
+
+  const { spaceBetween = 0 } = props
+
+  const children: Array<HTMLElement | Element> = Array.from(el?.children || [])
+
+  coords = children.reduce<Array<ItemCoords>>((
+    acc,
+    child,
+    i,
+  ) => {
+    let position = 0
+    const previewsChildCursor = i - 1
+    const previewsChild = acc[previewsChildCursor]
+    const { width = 0 } = getElementDimensions(child?.firstChild as HTMLElement)
+
+    content += width + spaceBetween
+    partial = listWidth >= content
+
+    if (previewsChild) {
+      position = previewsChildCursor === 0
+        ? previewsChild.width + spaceBetween
+        : previewsChild.width + previewsChild.position + spaceBetween
+    }
+
+    acc.push({ position, width })
+    return acc
+  }, [])
+
+  if (!infinite) {
+    if (partial) {
+      coords = mapPartialCoords(coords)
+    } else {
+      const position = content - listWidth
+      coords = mapPositionCoords(coords, position)
+    }
+  }
+
+  return {
+    content,
+    coords,
+    partial,
+  }
+}
+
+type CreateDefaultTransformationSetArgs = {
+  children: Array<ReactNode>,
+  infinite: boolean,
+  itemsInSlide: number,
+  listWidth: number,
+  props: Props,
+}
+
+export const createDefaultTransformationSet = ({
+  children,
+  infinite,
+  itemsInSlide,
+  listWidth,
+  props,
+}: CreateDefaultTransformationSetArgs): Transformations => {
+  let content = 0
+  let partial = true
+  let coords: Array<ItemCoords> = []
+
+  const { spaceBetween = 0 } = props
+
+  const width = getItemWidth({
+    galleryWidth: listWidth,
+    itemsInSlide,
+    props,
+  })
+
+  coords = children.reduce<Array<ItemCoords>>((
+    acc,
+    _,
+    i,
+  ) => {
+    let position = 0
+    const previewsChild = acc[i - 1]
+
+    content += width + spaceBetween
+    partial = listWidth >= content
+
+    if (previewsChild) {
+      position = width + spaceBetween + previewsChild.position || 0
+    }
+
+    acc.push({ position, width })
+    return acc
+  }, [])
+
+  if (!infinite) {
+    if (partial) {
+      coords = mapPartialCoords(coords)
+    } else {
+      const position = content - listWidth
+      coords = mapPositionCoords(coords, position)
+    }
+  }
+
+  return {
+    content,
+    coords,
+    partial,
+  }
+}
+
+type GetItemWidthArgs = {
+  galleryWidth: number,
+  itemsInSlide: number,
+  props: Props,
+}
+
+export const getItemWidth = ({
+  galleryWidth,
+  itemsInSlide,
+  props: { spaceBetween = 0 },
+}: GetItemWidthArgs) => (itemsInSlide > 0
+  ? (galleryWidth - spaceBetween * (itemsInSlide - 1)) / itemsInSlide
+  : galleryWidth)
+
+export const getElementDimensions = (element: HTMLElement | null) => {
+  const { height, width } = element?.getBoundingClientRect() || { height: 0, width: 0 }
+
+  return { height, width }
+}
+
+export const getTransitionProperty = (options?: Transition): string => {
+  const { animationDuration = 0, animationTimingFunction = 'ease' } = options || {}
+  return `transform ${animationDuration}ms ${animationTimingFunction} 0ms`
+}
+
+export const getListElementStyles = (
+  { translate3d }: Partial<State>,
+  currentStyles: CSSProperties,
+): CSSProperties => {
+  const transform = `translate3d(${-(translate3d || 0)}px, 0, 0)`
+
+  return { ...currentStyles, transform }
+}
+
+export const getItemStyles = (index: number, state: State): CSSProperties => {
+  const { transformationSet } = state
+  const { width } = transformationSet[index] || {}
+
+  return {
+    width,
+  }
+}
+
+export const getTranslate3dProperty = (nextIndex: number, state: Partial<State>) => {
+  let cursor = nextIndex
+
+  const {
+    infinite,
+    itemsInSlide = 0,
+    itemsOffset = 0,
+    transformationSet = [],
+  } = state
+
+  if (infinite) {
+    cursor = nextIndex + getShiftIndex(itemsInSlide, itemsOffset)
+  }
+
+  return (transformationSet[cursor] || {}).position || 0
+}
+
+export const isDisplayedItem = (i = 0, state: State) => {
+  const {
+    activeIndex,
+    infinite,
+    itemsInSlide,
+    itemsOffset,
+    variableSizing,
+  } = state
+
+  const shiftIndex = getShiftIndex(itemsInSlide, itemsOffset)
+
+  if (variableSizing && infinite) {
+    return i - shiftIndex === activeIndex + itemsOffset
+  }
+
+  const index = activeIndex + shiftIndex
+
+  if (!infinite) {
+    return i >= activeIndex && i < index
+  }
+
+  return i >= index && i < index + itemsInSlide
+}
+
+export const getItemsInSlide = (itemsCount: number, props: Props) => {
+  let itemsInSlide = 1
+
+  const {
+    breakpoints = {},
+    infinite,
+    variableSizing,
+  } = props
+
+  if (variableSizing) {
+    return infinite ? itemsCount : itemsInSlide
+  }
+
+  const configKeys = Object.keys(breakpoints)
+
+  configKeys.forEach((key) => {
+    if (Number(key) <= window.innerWidth) {
+      const { items, itemsFit = 'fill' } = breakpoints[key]
+
+      itemsInSlide = itemsFit === 'contain' ? items : Math.min(items, itemsCount)
+    }
+  })
+
+  return itemsInSlide || 1
+}

src/components/Carousel/helpers/index.tsx

@@ -0,0 +1,4 @@
+export * from './common'
+export * from './elements'
+export * from './math'
+export * from './mappers'

src/components/Carousel/helpers/mappers.tsx

@@ -0,0 +1,12 @@
+import type { ItemCoords } from '../types'
+
+export const mapPartialCoords = (coords: Array<ItemCoords>) => (
+  coords.map(({ width }) => ({ position: 0, width }))
+)
+
+export const mapPositionCoords = (coords: Array<ItemCoords>, position = 0) => coords.map((item) => {
+  if (item.position > position) {
+    return { ...item, position }
+  }
+  return item
+})

src/components/Carousel/helpers/math.tsx

@@ -0,0 +1,44 @@
+import type { ItemCoords } from '../types'
+
+export const getShiftIndex = (itemsInSlide = 0, itemsOffset = 0) => itemsInSlide + itemsOffset
+
+export const getStartIndex = (index = 0, itemsCount = 0) => {
+  if (itemsCount) {
+    if (index >= itemsCount) {
+      return itemsCount - 1
+    }
+
+    if (index > 0) {
+      return index
+    }
+  }
+
+  return 0
+}
+
+export const getActiveIndex = ({
+  infinite = false,
+  itemsCount = 0,
+  startIndex = 0,
+}) => (infinite ? startIndex : getStartIndex(startIndex, itemsCount))
+
+export const getUpdateSlidePositionIndex = (activeIndex: number, itemsCount: number) => {
+  if (activeIndex < 0) return itemsCount - 1
+  if (activeIndex >= itemsCount) return 0
+
+  return activeIndex
+}
+
+export const shouldRecalculateSlideIndex = (activeIndex: number, itemsCount: number) => (
+  activeIndex < 0 || activeIndex >= itemsCount
+)
+
+export const shouldCancelSlideAnimation = (activeIndex: number, itemsCount: number) => (
+  activeIndex < 0 || activeIndex >= itemsCount
+)
+
+export const getTransformationItemIndex = (
+  transformationSet: Array<ItemCoords> = [],
+  position = 0,
+) => transformationSet.findIndex((item) => item.position >= Math.abs(position))
+

src/components/Carousel/hooks.tsx

@@ -0,0 +1,160 @@
+import {
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  type ReactNode,
+} from 'react'
+
+import { KEYBOARD_KEYS } from 'config'
+
+import { useEventListener, useObjectState } from 'hooks'
+
+import type { State, Props } from './types'
+import * as Utils from './helpers'
+import { ListItem } from './styled'
+
+export const useCarousel = (props: Props) => {
+  const [state, setState] = useObjectState<State>(Utils.calculateInitialState(props, null))
+  const isAnimationDisabledRef = useRef(false)
+  const slideEndTimeoutIdRef = useRef<number | null>(null)
+  const listElementRef = useRef<HTMLUListElement>(null)
+  const rootElementRef = useRef<HTMLDivElement>(null)
+
+  const {
+    activeIndex,
+    animationDuration,
+    clones,
+    itemsCount,
+    itemsInSlide,
+    transition,
+    translate3d,
+  } = state
+
+  const {
+    animationTimingFunction,
+    infinite,
+    onSlideChange,
+    useKeyboardNavigation,
+  } = props
+
+  const listElementStyles = Utils.getListElementStyles({ translate3d }, { transition })
+
+  const clearSlideEndTimeout = () => {
+    slideEndTimeoutIdRef.current && clearTimeout(slideEndTimeoutIdRef.current)
+    slideEndTimeoutIdRef.current = null
+  }
+
+  const slidePrev = () => {
+    const newActiveIndex = activeIndex - 1
+
+    handleSlideTo(newActiveIndex)
+  }
+
+  const slideNext = () => {
+    const newActiveIndex = activeIndex + 1
+
+    handleSlideTo(newActiveIndex)
+  }
+
+  const handleUpdateSlidePosition = (index: number) => {
+    const newTranslate3d = Utils.getTranslate3dProperty(index, state)
+    const newTransition = Utils.getTransitionProperty({ animationDuration: 0 })
+
+    setState({
+      activeIndex: index,
+      transition: newTransition,
+      translate3d: newTranslate3d,
+    })
+  }
+
+  const handleBeforeSlideEnd = (index: number) => {
+    if (Utils.shouldRecalculateSlideIndex(index, itemsCount)) {
+      const nextIndex = Utils.getUpdateSlidePositionIndex(index, itemsCount)
+      handleUpdateSlidePosition(nextIndex)
+    }
+
+    isAnimationDisabledRef.current = false
+  }
+
+  const handleSlideTo = (newActiveIndex = 0) => {
+    if (
+      isAnimationDisabledRef.current
+        || newActiveIndex === activeIndex
+        || (!infinite && Utils.shouldCancelSlideAnimation(newActiveIndex, itemsCount))
+    ) return
+
+    isAnimationDisabledRef.current = true
+    clearSlideEndTimeout()
+
+    const newTranslate3d = Utils.getTranslate3dProperty(newActiveIndex, state)
+
+    const newTransition = Utils.getTransitionProperty({
+      animationDuration,
+      animationTimingFunction,
+    })
+
+    onSlideChange?.(newActiveIndex)
+
+    setState({
+      activeIndex: newActiveIndex,
+      transition: newTransition,
+      translate3d: newTranslate3d,
+    })
+
+    slideEndTimeoutIdRef.current = setTimeout(
+      () => handleBeforeSlideEnd(newActiveIndex),
+      animationDuration,
+    )
+  }
+
+  const renderItem = (item: ReactNode, index: number) => {
+    const styles = Utils.getItemStyles(index, state)
+
+    return (
+      <ListItem
+        key={index}
+        style={styles}
+        aria-hidden={!Utils.isDisplayedItem(index, state)}
+      >
+        {item}
+      </ListItem>
+    )
+  }
+
+  useEventListener({
+    callback: (e) => {
+      if (!useKeyboardNavigation) return
+      if (e.key === KEYBOARD_KEYS.ArrowLeft) slidePrev()
+      if (e.key === KEYBOARD_KEYS.ArrowRight) slideNext()
+    },
+    event: 'keydown',
+  })
+
+  useLayoutEffect(() => {
+    const setInitialState = () => {
+      const initialState = Utils.calculateInitialState(props, listElementRef.current)
+
+      setState(initialState)
+    }
+
+    setInitialState()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.activeIndex])
+
+  useEffect(() => () => {
+    slideEndTimeoutIdRef.current && clearTimeout(slideEndTimeoutIdRef.current)
+  }, [])
+
+  return {
+    activeIndex,
+    clones,
+    itemsCount,
+    itemsInSlide,
+    listElementRef,
+    listElementStyles,
+    renderItem,
+    rootElementRef,
+    slideNext,
+    slidePrev,
+  }
+}