From a06fcdcb5dd513939b65608e195ca176b4fb8a03 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 15 Jan 2021 03:11:20 +0100
Subject: [PATCH 001/157] add the possibility to add more table buttons

---
 src/components/Table/Table.tsx         | 30 ++++++++++++++------------
 src/components/Table/table.stories.mdx | 15 +++++++++++++
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 752b1bd84..386ad39c4 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -52,6 +52,13 @@ type TableOptions<T> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
+type TableButtonProps = {
+  label: string;
+  icon?: string | Node;
+  onClick: (e: SyntheticEvent) => any;
+  type: string;
+};
+
 type Props<T = Data> = {
   columns: Array<Column> | any;
   data: Array<any>;
@@ -60,12 +67,7 @@ type Props<T = Data> = {
   options: TableOptions<T>;
   showLoader?: boolean;
   renderEmptyTable?: boolean;
-  tableButton?: {
-    label: string;
-    icon?: string | Node;
-    onClick: (e: SyntheticEvent) => any;
-    type: string;
-  };
+  tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
 };
 
@@ -94,7 +96,7 @@ class Table<T> extends Component<Props<T>, State> {
     },
     showLoader: false,
     renderEmptyTable: false,
-    tableButton: null,
+    tableButton: [],
     actionsRowTitle: 'Actions',
   };
 
@@ -264,23 +266,23 @@ class Table<T> extends Component<Props<T>, State> {
         </thead>
         <tbody>{this.renderData(columns, data)}</tbody>
         <tfoot>
-          {tableButton && (
-            <ButtonTableRow>
+          {tableButton?.map((button: TableButtonProps) => (
+            <ButtonTableRow key={button.label}>
               <TableCell colSpan={columnContent.length}>
                 <TableButton
                   modifiers={['buttonLink']}
                   fullWidth
                   fullHeight
-                  onClick={tableButton.onClick}
-                  icon={tableButton.icon}
+                  onClick={button.onClick}
+                  icon={button.icon}
                   iconPosition="left"
-                  type={tableButton.type}
+                  type={button.type}
                 >
-                  {tableButton.label}
+                  {button.label}
                 </TableButton>
               </TableCell>
             </ButtonTableRow>
-          )}
+          ))}
         </tfoot>
       </TableWrapper>
     );
diff --git a/src/components/Table/table.stories.mdx b/src/components/Table/table.stories.mdx
index 287578f90..fb51375a4 100644
--- a/src/components/Table/table.stories.mdx
+++ b/src/components/Table/table.stories.mdx
@@ -4,6 +4,7 @@ import Table from './'
 import { MdDelete, MdErrorOutline } from 'react-icons/md';
 import Pagination from '../Pagination'
 import { columns, data } from './data.tsx'
+import { IoIosAddCircleOutline } from 'react-icons/io';
 
 <Meta title="Table" component={<Table/>} />
 
@@ -32,6 +33,20 @@ const Page = () => (
                       { icon: "trash", onClick: (id) => console.log(id) },
                 ],
             }}
+            tableButton={[
+              {
+                label: 'Table button 1',
+                icon: <IoIosAddCircleOutline />,
+                onClick: () => null,
+                type: 'button',
+              },
+              {
+                label: 'Table button 2',
+                icon: <IoIosAddCircleOutline />,
+                onClick: () => null,
+                type: 'button',
+              }
+            ]}
         />
         <Pagination
             onPageChange={console.log}

From fc17490c32b314e42da52274ae680225ea4deac8 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 15 Jan 2021 03:14:14 +0100
Subject: [PATCH 002/157] add table button props interface

---
 index.d.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 4570f85ef..ef65fa7ec 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -147,6 +147,13 @@ export interface TableOptions<T extends TableRowData> {
   headerSection?: Node | JSX.Element | null;
 }
 
+export interface TableButtonProps {
+  label: string;
+  icon ?: string | Node;
+  onClick: (e: SyntheticEvent) => any;
+  type: string;
+};
+
 export interface TableProps<TableData extends TableRowData = TableRowData> {
   columns: Array<TableColumn<TableData>>;
   data: Array<TableData>;
@@ -155,12 +162,7 @@ export interface TableProps<TableData extends TableRowData = TableRowData> {
   className?: string;
   style?: CSSProperties;
   options?: Partial<TableOptions<TableData>>;
-  tableButton?: {
-    label: string;
-    icon?: string | Node | JSX.Element;
-    onClick: (e: SyntheticEvent) => any;
-    type: string;
-  };
+  tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
 }
 

From c112fb3e87c9312c8a1d35773b535ccf978eae87 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 15 Jan 2021 03:20:13 +0100
Subject: [PATCH 003/157] fix icon type

---
 index.d.ts                     | 2 +-
 src/components/Table/Table.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index ef65fa7ec..3be7bb514 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -149,7 +149,7 @@ export interface TableOptions<T extends TableRowData> {
 
 export interface TableButtonProps {
   label: string;
-  icon ?: string | Node;
+  icon?: string | ReactNode;
   onClick: (e: SyntheticEvent) => any;
   type: string;
 };
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 386ad39c4..e9e87caf8 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -54,7 +54,7 @@ type TableOptions<T> = {
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 type TableButtonProps = {
   label: string;
-  icon?: string | Node;
+  icon?: string | ReactNode;
   onClick: (e: SyntheticEvent) => any;
   type: string;
 };

From 1b0e815b87d052610ef3f757c63b8d128dd236d5 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 15 Jan 2021 10:38:46 +0100
Subject: [PATCH 004/157] update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2cd5d232b..58f6f0486 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.4.3] - 15-11-2020
+
+### Changes
+
+- Add the possibility to have more than one table button
+
 # [2.4.2] - 11-11-2020
 
 ### Changes

From 2e1246b785facbee24d6c978434a8d951c349008 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 15 Jan 2021 10:52:32 +0100
Subject: [PATCH 005/157] chore: update chlog

---
 CHANGELOG.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f8bf0dc6..3d226d9d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,7 @@
 
 All notable changes to this project will be documented in this file.
 
-# [2.4.3] - 15-11-2020
-
+# [2.5.1] - 15-11-2020
 ### Changes
 
 - Add the possibility to have more than one table button

From 5a8cd672ddb8493b8f95cb96a442c27c65a158f8 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 15 Jan 2021 10:53:19 +0100
Subject: [PATCH 006/157] chore: update chlog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d226d9d3..781dc6948 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 
 # [2.5.1] - 15-11-2020
-### Changes
+### Added
 
 - Add the possibility to have more than one table button
 

From 1d14312afc6789fa9b8c804b509590326cb602ed Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 15 Jan 2021 10:57:51 +0100
Subject: [PATCH 007/157] chore: update npm libs

---
 package.json |  50 ++++++------
 yarn.lock    | 220 ++++++++++++++++++++++++++-------------------------
 2 files changed, 139 insertions(+), 131 deletions(-)

diff --git a/package.json b/package.json
index 27b088cc3..1cf528208 100644
--- a/package.json
+++ b/package.json
@@ -38,17 +38,17 @@
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-private-methods": "^7.12.1",
     "@babel/plugin-transform-classes": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.12.1",
-    "@rollup/plugin-babel": "^5.2.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-image": "^2.0.6",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@storybook/addon-docs": "^6.0.21",
     "@storybook/addon-info": "^5.3.21",
@@ -56,34 +56,34 @@
     "@storybook/react": "^6.0.21",
     "@types/dompurify": "^2.0.4",
     "@types/lodash": "^4.14.165",
-    "@types/react": "^16.9.56",
+    "@types/react": "^17.0.0",
     "@types/react-dates": "^21.8.0",
-    "@types/react-dom": "^16.9.9",
+    "@types/react-dom": "^17.0.0",
     "@types/react-toggle": "^4.0.2",
     "@types/styled-components": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "4.3.0",
-    "@typescript-eslint/parser": "4.8.2",
+    "@typescript-eslint/parser": "4.13.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "1.10.5",
-    "dompurify": "^2.0.17",
-    "eslint": "^7.9.0",
-    "eslint-config-airbnb": "^18.2.0",
+    "dompurify": "^2.2.6",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-watch": "^7.0.0",
-    "html-react-parser": "^0.14.1",
+    "html-react-parser": "^0.14.3",
     "lodash-es": "^4.17.15",
     "moment": "^2.29.1",
-    "polished": "^4.0.3",
-    "prettier": "^2.1.2",
-    "rc-progress": "^3.1.0",
+    "polished": "^4.0.5",
+    "prettier": "^2.2.1",
+    "rc-progress": "^3.1.3",
     "react": "^17.0.1",
     "react-addons-shallow-compare": "^15.6.2",
     "react-dates": "^21.8.0",
@@ -92,15 +92,15 @@
     "react-paginate": "^6.5.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-filesize": "^9.0.2",
+    "rollup-plugin-filesize": "^9.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.2.1",
     "styled-components-modifiers": "^1.2.5",
     "styled-tools": "^1.7.2",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^4.0.5"
+    "typescript": "^4.1.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 8a659867f..c656bdea8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@babel/cli@^7.12.1":
-  version "7.12.8"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.12.8.tgz#3b24ed2fd5da353ee6f19e8935ff8c93b5fe8430"
-  integrity sha512-/6nQj11oaGhLmZiuRUfxsujiPDc9BBReemiXgIbxc+M5W+MIiFKYwvNDJvBfnGKNsJTKbUfEheKc9cwoPHAVQA==
+"@babel/cli@^7.12.10":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.12.10.tgz#67a1015b1cd505bde1696196febf910c4c339a48"
+  integrity sha512-+y4ZnePpvWs1fc/LhZRTHkTesbXkyBYuOB+5CyodZqrEuETXi3zOVfpAQIdgC3lXbHLTDG9dQosxR9BhvLKDLQ==
   dependencies:
     commander "^4.0.1"
     convert-source-map "^1.1.0"
@@ -60,7 +60,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.7.5", "@babel/core@^7.9.0":
+"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.7.5", "@babel/core@^7.9.0":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.10.tgz#b79a2e1b9f70ed3d84bbfb6d8c4ef825f606bccd"
   integrity sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==
@@ -956,7 +956,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/preset-env@^7.12.1", "@babel/preset-env@^7.9.5", "@babel/preset-env@^7.9.6":
+"@babel/preset-env@^7.12.11", "@babel/preset-env@^7.9.5", "@babel/preset-env@^7.9.6":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.11.tgz#55d5f7981487365c93dbbc84507b1c7215e857f9"
   integrity sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==
@@ -1047,7 +1047,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.12.5", "@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
+"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.12.10", "@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.10.tgz#4fed65f296cbb0f5fb09de6be8cddc85cc909be9"
   integrity sha512-vtQNjaHRl4DUpp+t+g4wvTHsLQuye+n0H/wsXIZRn69oz/fvNC7gQ4IK73zGJBaxvHoxElDvnYCthMcT7uzFoQ==
@@ -1058,7 +1058,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.12.7"
     "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
 
-"@babel/preset-typescript@^7.12.1", "@babel/preset-typescript@^7.9.0":
+"@babel/preset-typescript@^7.12.7", "@babel/preset-typescript@^7.9.0":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.7.tgz#fc7df8199d6aae747896f1e6c61fc872056632a3"
   integrity sha512-nOoIqIqBmHBSEgBXWR4Dv/XBehtIFcw9PqZw6rFYuKrzsZmOQm3PR5siLBnKZFEsDb03IegG8nSjU/iXXXYRmw==
@@ -1484,10 +1484,10 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
-"@rollup/plugin-babel@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz#20fc8f8864dc0eaa1c5578408459606808f72924"
-  integrity sha512-Jd7oqFR2dzZJ3NWANDyBjwTtX/lYbZpVcmkHrfQcpvawHs9E4c0nYk5U2mfZ6I/DZcIvy506KZJi54XK/jxH7A==
+"@rollup/plugin-babel@^5.2.2":
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz#e5623a01dd8e37e004ba87f2de218c611727d9b2"
+  integrity sha512-MjmH7GvFT4TW8xFdIeFS3wqIX646y5tACdxkTO+khbHvS3ZcVJL6vkAHLw2wqPmkhwCfWHoNsp15VYNwW6JEJA==
   dependencies:
     "@babel/helper-module-imports" "^7.10.4"
     "@rollup/pluginutils" "^3.1.0"
@@ -1505,13 +1505,13 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
-"@rollup/plugin-image@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.0.5.tgz#07859a69f5fe592643c2ad3ef59ae8a5c268a7ef"
-  integrity sha512-R+yGLJjLN1won2JlZPZmdlyZGLZwwsW8V/RYu3mTcRq8Aqd9GC2fo4Zi892bFteM5LolfbpxK8Y9QQcAhbBwSQ==
+"@rollup/plugin-image@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.0.6.tgz#2e6d7a72b25df81aa80c8c0866d45a45c1e6a265"
+  integrity sha512-bB+spXogbPiFjhBS7i8ajUOgOnVwWK3bnJ6VroxKey/q8/EPRkoSh+4O1qPCw97qMIDspF4TlzXVBhZ7nojIPw==
   dependencies:
-    "@rollup/pluginutils" "^3.0.4"
-    mini-svg-data-uri "^1.1.3"
+    "@rollup/pluginutils" "^3.1.0"
+    mini-svg-data-uri "^1.2.3"
 
 "@rollup/plugin-node-resolve@^10.0.0":
   version "10.0.0"
@@ -1525,7 +1525,7 @@
     is-module "^1.0.0"
     resolve "^1.17.0"
 
-"@rollup/pluginutils@^3.0.4", "@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@@ -2654,14 +2654,14 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
   integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
 
-"@types/htmlparser2@3.10.1":
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/@types/htmlparser2/-/htmlparser2-3.10.1.tgz#1e65ba81401d53f425c1e2ba5a3d05c90ab742c7"
-  integrity sha512-fCxmHS4ryCUCfV9+CJZY1UjkbR+6Al/EQdX5Jh03qBj9gdlPG5q+7uNoDgE/ZNXb3XNWSAQgqKIWnbRCbOyyWA==
+"@types/htmlparser2@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@types/htmlparser2/-/htmlparser2-3.10.2.tgz#bd43702eaf2f15c2d26784c8427352a0a4aa75eb"
+  integrity sha512-81vjuO800UMoHjYbCbqtBmfC3iCsrROKpqndo0acKiN6k/cpW+YOw9FzRP0ghujHeUNCOox2AQPrrMy6+j5UpQ==
   dependencies:
-    "@types/domhandler" "*"
     "@types/domutils" "*"
     "@types/node" "*"
+    domhandler "^2.4.0"
 
 "@types/is-function@^1.0.0":
   version "1.0.0"
@@ -2805,10 +2805,10 @@
     "@types/react-outside-click-handler" "*"
     moment "^2.26.0"
 
-"@types/react-dom@^16.9.9":
-  version "16.9.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.9.tgz#d2d0a6f720a0206369ccbefff752ba37b9583136"
-  integrity sha512-jE16FNWO3Logq/Lf+yvEAjKzhpST/Eac8EMd1i4dgZdMczfgqC8EjpxwNgEe3SExHYLliabXDh9DEhhqnlXJhg==
+"@types/react-dom@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
+  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
   dependencies:
     "@types/react" "*"
 
@@ -2847,7 +2847,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.56":
+"@types/react@*":
   version "16.9.56"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.56.tgz#ea25847b53c5bec064933095fc366b1462e2adf0"
   integrity sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==
@@ -2855,6 +2855,14 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
+  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2972,16 +2980,24 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.8.2.tgz#78dccbe5124de2b8dea2d4c363dee9f769151ca8"
-  integrity sha512-u0leyJqmclYr3KcXOqd2fmx6SDGBO0MUNHHAjr0JS4Crbb3C3d8dwAdlazy133PLCcPn+aOUFiHn72wcuc5wYw==
+"@typescript-eslint/parser@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.13.0.tgz#c413d640ea66120cfcc37f891e8cb3fd1c9d247d"
+  integrity sha512-KO0J5SRF08pMXzq9+abyHnaGQgUJZ3Z3ax+pmqz9vl81JxmTTOUfQmq7/4awVfq09b6C4owNlOgOwp61pYRBSg==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.8.2"
-    "@typescript-eslint/types" "4.8.2"
-    "@typescript-eslint/typescript-estree" "4.8.2"
+    "@typescript-eslint/scope-manager" "4.13.0"
+    "@typescript-eslint/types" "4.13.0"
+    "@typescript-eslint/typescript-estree" "4.13.0"
     debug "^4.1.1"
 
+"@typescript-eslint/scope-manager@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.13.0.tgz#5b45912a9aa26b29603d8fa28f5e09088b947141"
+  integrity sha512-UpK7YLG2JlTp/9G4CHe7GxOwd93RBf3aHO5L+pfjIrhtBvZjHKbMhBXTIQNkbz7HZ9XOe++yKrXutYm5KmjWgQ==
+  dependencies:
+    "@typescript-eslint/types" "4.13.0"
+    "@typescript-eslint/visitor-keys" "4.13.0"
+
 "@typescript-eslint/scope-manager@4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.3.0.tgz#c743227e087545968080d2362cfb1273842cb6a7"
@@ -2990,23 +3006,29 @@
     "@typescript-eslint/types" "4.3.0"
     "@typescript-eslint/visitor-keys" "4.3.0"
 
-"@typescript-eslint/scope-manager@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.8.2.tgz#a18388c63ae9c17adde519384f539392f2c4f0d9"
-  integrity sha512-qHQ8ODi7mMin4Sq2eh/6eu03uVzsf5TX+J43xRmiq8ujng7ViQSHNPLOHGw/Wr5dFEoxq/ubKhzClIIdQy5q3g==
-  dependencies:
-    "@typescript-eslint/types" "4.8.2"
-    "@typescript-eslint/visitor-keys" "4.8.2"
+"@typescript-eslint/types@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.13.0.tgz#6a7c6015a59a08fbd70daa8c83dfff86250502f8"
+  integrity sha512-/+aPaq163oX+ObOG00M0t9tKkOgdv9lq0IQv/y4SqGkAXmhFmCfgsELV7kOCTb2vVU5VOmVwXBXJTDr353C1rQ==
 
 "@typescript-eslint/types@4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.3.0.tgz#1f0b2d5e140543e2614f06d48fb3ae95193c6ddf"
   integrity sha512-Cx9TpRvlRjOppGsU6Y6KcJnUDOelja2NNCX6AZwtVHRzaJkdytJWMuYiqi8mS35MRNA3cJSwDzXePfmhU6TANw==
 
-"@typescript-eslint/types@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.8.2.tgz#c862dd0e569d9478eb82d6aee662ea53f5661a36"
-  integrity sha512-z1/AVcVF8ju5ObaHe2fOpZYEQrwHyZ7PTOlmjd3EoFeX9sv7UekQhfrCmgUO7PruLNfSHrJGQvrW3Q7xQ8EoAw==
+"@typescript-eslint/typescript-estree@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.13.0.tgz#cf6e2207c7d760f5dfd8d18051428fadfc37b45e"
+  integrity sha512-9A0/DFZZLlGXn5XA349dWQFwPZxcyYyCFX5X88nWs2uachRDwGeyPz46oTsm9ZJE66EALvEns1lvBwa4d9QxMg==
+  dependencies:
+    "@typescript-eslint/types" "4.13.0"
+    "@typescript-eslint/visitor-keys" "4.13.0"
+    debug "^4.1.1"
+    globby "^11.0.1"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
 
 "@typescript-eslint/typescript-estree@4.3.0":
   version "4.3.0"
@@ -3022,19 +3044,13 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/typescript-estree@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.8.2.tgz#eeec34707d8577600fb21661b5287226cc8b3bed"
-  integrity sha512-HToGNwI6fekH0dOw3XEVESUm71Onfam0AKin6f26S2FtUmO7o3cLlWgrIaT1q3vjB3wCTdww3Dx2iGq5wtUOCg==
+"@typescript-eslint/visitor-keys@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.13.0.tgz#9acb1772d3b3183182b6540d3734143dce9476fe"
+  integrity sha512-6RoxWK05PAibukE7jElqAtNMq+RWZyqJ6Q/GdIxaiUj2Ept8jh8+FUVlbq9WxMYxkmEOPvCE5cRSyupMpwW31g==
   dependencies:
-    "@typescript-eslint/types" "4.8.2"
-    "@typescript-eslint/visitor-keys" "4.8.2"
-    debug "^4.1.1"
-    globby "^11.0.1"
-    is-glob "^4.0.1"
-    lodash "^4.17.15"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
+    "@typescript-eslint/types" "4.13.0"
+    eslint-visitor-keys "^2.0.0"
 
 "@typescript-eslint/visitor-keys@4.3.0":
   version "4.3.0"
@@ -3044,14 +3060,6 @@
     "@typescript-eslint/types" "4.3.0"
     eslint-visitor-keys "^2.0.0"
 
-"@typescript-eslint/visitor-keys@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.8.2.tgz#62cd3fbbbf65f8eccfbe6f159eb1b84a243a3f77"
-  integrity sha512-Vg+/SJTMZJEKKGHW7YC21QxgKJrSbxoYYd3MEUGtW7zuytHuEcksewq0DUmo4eh/CTNrVJGSdIY9AtRb6riWFw==
-  dependencies:
-    "@typescript-eslint/types" "4.8.2"
-    eslint-visitor-keys "^2.0.0"
-
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -3739,7 +3747,7 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0:
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
   integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
 
-babel-loader@^8.0.6, babel-loader@^8.1.0:
+babel-loader@^8.0.6, babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
   integrity sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==
@@ -5523,17 +5531,17 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
   integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
-domhandler@2.4.2, domhandler@^2.3.0:
+domhandler@2.4.2, domhandler@^2.3.0, domhandler@^2.4.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
   integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
-dompurify@^2.0.17:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.4.tgz#a98cd182b729bdd8715c3eb7a8bf8eafb2ff7410"
-  integrity sha512-jE21SelIgWrGKoXGfGPA524Zt1IJFBnktwfFMHDlEYRx5FZOdc+4eEH9mkA6PuhExrq3HVpJnY8hMYUzAMl0OA==
+dompurify@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.6.tgz#54945dc5c0b45ce5ae228705777e8e59d7b2edc4"
+  integrity sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ==
 
 domutils@1.5.1:
   version "1.5.1"
@@ -5899,7 +5907,7 @@ eslint-config-airbnb-base@^14.2.1:
     object.assign "^4.1.2"
     object.entries "^1.1.2"
 
-eslint-config-airbnb@^18.2.0:
+eslint-config-airbnb@^18.2.1:
   version "18.2.1"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9"
   integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg==
@@ -5949,7 +5957,7 @@ eslint-module-utils@^2.6.0:
     debug "^2.6.9"
     pkg-dir "^2.0.0"
 
-eslint-plugin-import@^2.22.0:
+eslint-plugin-import@^2.22.1:
   version "2.22.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
   integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
@@ -5968,7 +5976,7 @@ eslint-plugin-import@^2.22.0:
     resolve "^1.17.0"
     tsconfig-paths "^3.9.0"
 
-eslint-plugin-jsx-a11y@^6.3.1:
+eslint-plugin-jsx-a11y@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
   integrity sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==
@@ -5985,10 +5993,10 @@ eslint-plugin-jsx-a11y@^6.3.1:
     jsx-ast-utils "^3.1.0"
     language-tags "^1.0.5"
 
-eslint-plugin-prettier@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2"
-  integrity sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==
+eslint-plugin-prettier@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7"
+  integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
@@ -5997,10 +6005,10 @@ eslint-plugin-react-hooks@^4.1.2:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
   integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
 
-eslint-plugin-react@^7.20.6:
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz#50b21a412b9574bfe05b21db176e8b7b3b15bff3"
-  integrity sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==
+eslint-plugin-react@^7.22.0:
+  version "7.22.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz#3d1c542d1d3169c45421c1215d9470e341707269"
+  integrity sha512-p30tuX3VS+NWv9nQot9xIGAHBXR0+xJVaZriEsHoJrASGCJZDJ8JLNM0YqKqI0AKm6Uxaa1VUHoNEibxRCMQHA==
   dependencies:
     array-includes "^3.1.1"
     array.prototype.flatmap "^1.2.3"
@@ -6065,7 +6073,7 @@ eslint-watch@^7.0.0:
     optionator "^0.9.1"
     source-map-support "^0.5.13"
 
-eslint@^7.9.0:
+eslint@^7.17.0:
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.17.0.tgz#4ccda5bf12572ad3bf760e6f195886f50569adb0"
   integrity sha512-zJk08MiBgwuGoxes5sSQhOtibZ75pz0J35XTRlZOk9xMffhpA9BTbQZxoXZzOl5zMbleShbGwtw+1kGferfFwQ==
@@ -7292,12 +7300,12 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
-html-react-parser@^0.14.1:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.14.2.tgz#d8cd84e8dc041680f28274e0e41d637bc784d111"
-  integrity sha512-ZyjUlNZ0cAUhknoXSTfE2yZteY+pnbGXE3Flp5l3Qk40UvKDRp+F/nBvRbIHrWa7tGLZInigJoBuFylxyhGU9w==
+html-react-parser@^0.14.3:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.14.3.tgz#bd126bba11dce88b97168b5c879e031b6c2209e5"
+  integrity sha512-scZ1DHGbyRv0AjsavBndhTzAOQ5iWxzmD5z74cXU07mMcegt8MtlQoHx3SVGhVAkScqNgk1hgKoE80S3OFUt4A==
   dependencies:
-    "@types/htmlparser2" "3.10.1"
+    "@types/htmlparser2" "3.10.2"
     html-dom-parser "0.3.0"
     react-property "1.0.1"
     style-to-js "1.1.0"
@@ -8899,7 +8907,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
   integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
 
-mini-svg-data-uri@^1.1.3:
+mini-svg-data-uri@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
   integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
@@ -9939,7 +9947,7 @@ polished@^3.3.1, polished@^3.4.4:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-polished@^4.0.3:
+polished@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/polished/-/polished-4.0.5.tgz#3f91873c8f72dec1723b3f892f57fbb22645b23d"
   integrity sha512-BY2+LVtOHQWBQpGN4GPAKpCdsBePOdSdHTpZegRDRCrvGPkRPTx1DEC+vGjIDPhXS7W2qiBxschnwRWTFdMZag==
@@ -10106,10 +10114,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
-  integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
 prettier@~2.0.5:
   version "2.0.5"
@@ -10383,10 +10391,10 @@ raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.5"
 
-rc-progress@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.1.1.tgz#f7ba5eb33cc438862513ab5a71739feaf6b3ef4f"
-  integrity sha512-1ns3pW7ll9bHfdXtlVLF+vngdvlxiCDtiqwXnZFEdurst11JTiPxVdeqnCNbhWx5hP4kCKkAPqG1N0FVfTSUGA==
+rc-progress@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.1.3.tgz#d77d8fd26d9d948d72c2a28b64b71a6e86df2426"
+  integrity sha512-Jl4fzbBExHYMoC6HBPzel0a9VmhcSXx24LVt/mdhDM90MuzoMCJjXZAlhA0V0CJi+SKjMhfBoIQ6Lla1nD4QNw==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.6"
@@ -11267,7 +11275,7 @@ rollup-plugin-copy@^3.3.0:
     globby "10.0.1"
     is-plain-object "^3.0.0"
 
-rollup-plugin-filesize@^9.0.2:
+rollup-plugin-filesize@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-filesize/-/rollup-plugin-filesize-9.1.0.tgz#e6032a2975d1c0c8f2c30ecaa73a12bf39406461"
   integrity sha512-3umx+e2AzYH4lJaBtyeWk2kC7JafzZhy5AJwj2amudWWgqIFpI/QH7s2+9LWBwIvjK5ty6K6eM3i6dw7qF4GrQ==
@@ -12121,7 +12129,7 @@ stylelint-processor-styled-components@^1.10.0:
     micromatch "^4.0.2"
     postcss "^7.0.26"
 
-stylelint@^13.7.2:
+stylelint@^13.8.0:
   version "13.8.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.8.0.tgz#446765dbe25e3617f819a0165956faf2563ddc23"
   integrity sha512-iHH3dv3UI23SLDrH4zMQDjLT9/dDIz/IpoFeuNxZmEx86KtfpjDOscxLTFioQyv+2vQjPlRZnK0UoJtfxLICXQ==
@@ -12640,10 +12648,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
-  integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
+typescript@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
 ua-parser-js@^0.7.18:
   version "0.7.21"

From 186f1a4343d9e5ac2abcb5fcb108c5296bf66027 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 15 Jan 2021 11:00:51 +0100
Subject: [PATCH 008/157] v2.5.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1cf528208..6e5232e37 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.0",
+  "version": "2.5.1",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From ca39226f0f138eb96c2589acd2f31fffff855c11 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 15 Jan 2021 11:02:40 +0100
Subject: [PATCH 009/157] chore: update chlog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 781dc6948..f3457626b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,11 +3,13 @@
 All notable changes to this project will be documented in this file.
 
 # [2.5.1] - 15-11-2020
+
 ### Added
 
 - Add the possibility to have more than one table button
 
 # [2.5.0] - 12-01-2021
+
 ### Changes
 
 - Change footer text depending on user auth state

From a41b614c933e756aeeb2deb86557704923579b82 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 22 Jan 2021 16:12:26 +0100
Subject: [PATCH 010/157] change: use pixels instead of rem for font sizes

---
 src/theme/theme.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index f0eab88cc..b484bda99 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -38,17 +38,17 @@ export const Theme: DefaultTheme = {
       bold: 700,
     },
     sizes: {
-      extraSmall: rem(12),
-      small: rem(14),
-      medium: rem(16),
-      large: rem(18),
-      extraLarge: rem(50),
-      h1: rem(40),
-      h2: rem(36),
-      h3: rem(32),
-      h4: rem(28),
-      h5: rem(24),
-      h6: rem(20),
+      extraSmall: '12px',
+      small: '14px',
+      medium: '16px',
+      large: '18px',
+      extraLarge: '50px',
+      h1: '40px',
+      h2: '36px',
+      h3: '32px',
+      h4: '28px',
+      h5: '24px',
+      h6: '20px',
     },
   },
 };

From 85fa6063c20407ce84018ddddf71a55e4b383765 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 22 Jan 2021 16:13:39 +0100
Subject: [PATCH 011/157] chore: update chlog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3457626b..7c7bfb857 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.2] - 22-01-2021
+
+### Change
+
+- Use pixels instead of rem for font sizes
+
 # [2.5.1] - 15-11-2020
 
 ### Added

From 6dec509e90bcdd6732bcf026004edb3ce8c9f155 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 22 Jan 2021 16:13:57 +0100
Subject: [PATCH 012/157] chore: update chlog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c7bfb857..acaad667b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ All notable changes to this project will be documented in this file.
 
 - Use pixels instead of rem for font sizes
 
-# [2.5.1] - 15-11-2020
+# [2.5.1] - 15-01-2021
 
 ### Added
 

From ae8f8966d527206eff8ee271f3e94ea11d9c37b7 Mon Sep 17 00:00:00 2001
From: srdjanRakic <srgjan.rakic@gmail.com>
Date: Fri, 22 Jan 2021 16:16:53 +0100
Subject: [PATCH 013/157] v2.5.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6e5232e37..abf2bfe9d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.1",
+  "version": "2.5.2",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 74af445325d07b2a60033d9f295ba9eec3a70939 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 1 Feb 2021 15:04:26 +0000
Subject: [PATCH 014/157] chore(deps): [security] bump nested-object-assign
 from 1.0.3 to 1.0.4

Bumps [nested-object-assign](https://github.com/Geta/NestedObjectAssign) from 1.0.3 to 1.0.4. **This update includes a security fix.**
- [Release notes](https://github.com/Geta/NestedObjectAssign/releases)
- [Commits](https://github.com/Geta/NestedObjectAssign/compare/v1.0.3...v1.0.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index c656bdea8..5606f7bcd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9147,9 +9147,9 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
 nested-object-assign@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/nested-object-assign/-/nested-object-assign-1.0.3.tgz#5aca69390d9affe5a612152b5f0843ae399ac597"
-  integrity sha512-kgq1CuvLyUcbcIuTiCA93cQ2IJFSlRwXcN+hLcb2qLJwC2qrePHGZZa7IipyWqaWF6tQjdax2pQnVxdq19Zzwg==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/nested-object-assign/-/nested-object-assign-1.0.4.tgz#c9db56078eb6043960fdb6ba918a5122a06ccac4"
+  integrity sha512-FlZ7oN9ICt+fbcJ4ag2IsALIcalfE/E16ttdSA8peBiHJI+oEKdOcafqDnUbeUe5NwWGn/m9zZGO9qrAGzfesg==
 
 next-tick@~1.0.0:
   version "1.0.0"

From 2dbc2066bbccbf2446e3b9c82aa51f9bf99bec51 Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Tue, 9 Feb 2021 12:41:48 +0100
Subject: [PATCH 015/157] chore: add new datepicker type with presets and
 dropdown

---
 index.d.ts                                    |  1 +
 src/components/DatePicker/DatePicker.tsx      | 78 +++++++++++++++++--
 .../DatePicker/DatePickerWrapper.ts           | 63 +++++++++++----
 .../DatePicker/datepicker.stories.mdx         | 68 ++++++++++++++++
 src/components/Dropdown/Dropdown.tsx          |  6 +-
 5 files changed, 196 insertions(+), 20 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 3be7bb514..b7d4822db 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -344,6 +344,7 @@ export interface DatePickerProps {
   activePeriodPreset?: string;
   disabled?: boolean;
   showPresets?: boolean;
+  showPresetsWithDropdown?: boolean;
   showInnerPresets?: boolean;
 }
 
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index fa1da1da4..26612dc6f 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -1,21 +1,37 @@
 import React, { useState, useEffect } from 'react';
 import moment, { Moment } from 'moment';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { FocusedInputShape, DateRangePicker } from 'react-dates';
+import { FaCalendarAlt } from 'react-icons/fa';
 import colors from '../../theme/colors';
 import { getMonthOptions, getYearOptions } from '../../utils/helpers';
 import Dropdown from '../Dropdown';
+import { Option } from '../Dropdown/Dropdown';
 import DatePickerWrapper from './DatePickerWrapper';
 import { PERIODS, INNERPERIODS } from './periods';
 import { Styled } from './styles';
 import 'react-dates/initialize';
 
-const ContentHolder = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  width: 86%;
+const ContentHolder = styled.div<{ isDropdown?: boolean }>`
   margin: 0 auto;
   padding: 15px 0 15px;
+  ${({ isDropdown }) =>
+    !isDropdown &&
+    css`
+      display: flex;
+      justify-content: flex-end;
+      width: 86%;
+    `}
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin-right: 1rem;
+  color: ${colors.blue};
+  background-color: transparent;
+  border: 1px solid ${colors.blue};
+  font-size: ${({ theme }) => theme.font.sizes.extraSmall};
+  font-weight: ${({ theme }) => theme.font.weights.bold};
+  border-radius: 5px;
 `;
 
 const AnalyticsPeriods = styled.div`
@@ -82,6 +98,7 @@ type Props = {
   showPresets?: boolean;
   showInnerPresets?: boolean;
   className?: string;
+  showPresetsWithDropdown?: boolean;
 };
 
 const DatePicker = ({
@@ -99,6 +116,7 @@ const DatePicker = ({
   focusedInput,
   className = '',
   minimumNights = 0,
+  showPresetsWithDropdown = false,
 }: Props) => {
   const [activePeriod, setActivePeriod] = useState('');
 
@@ -220,6 +238,23 @@ const DatePicker = ({
 
   const handleDateChange = ({ startDate, endDate }: DateChangeArgs) => {
     onDateChange({ startDate, endDate });
+    setActivePeriod('');
+  };
+
+  const options: Array<Option> = [
+    { value: PERIODS.ONE_MONTH, displayName: '1 month' },
+    { value: PERIODS.ONE_WEEK, displayName: '1 week' },
+    { value: PERIODS.TWO_WEEKS, displayName: '2 weeks' },
+    { value: PERIODS.SIX_MONTHS, displayName: '6 months' },
+    { value: PERIODS.ONE_YEAR, displayName: '1 year' },
+    { value: PERIODS.TODAY, displayName: 'last 24 hours' },
+    { value: PERIODS.ALL, displayName: 'all' },
+  ];
+
+  const defaultOption = { displayName: 'Choose period', disabled: true };
+
+  const handleDropdownChange = (value: string) => {
+    handleRangeClick(value);
   };
 
   const renderPeriodElement = (periodConst: string, periodText: string, key: number) => (
@@ -235,6 +270,39 @@ const DatePicker = ({
     </SpanContainer>
   );
 
+  if (showPresetsWithDropdown) {
+    return (
+      <ContentHolder isDropdown>
+        <StyledDropdown
+          defaultOption={defaultOption}
+          options={options}
+          value={activePeriod}
+          onChange={handleDropdownChange}
+        />
+        <DatePickerWrapper showPresetsWithDropdown className={className}>
+          <DateRangePicker
+            isOutsideRange={isOutsideRange}
+            onDatesChange={handleDateChange}
+            onFocusChange={onFocusChange}
+            renderMonthElement={renderMonthElement}
+            focusedInput={focusedInput}
+            startDate={startDateProp}
+            startDateId={startDateId}
+            endDate={endDateProp}
+            endDateId={endDateId}
+            customArrowIcon="-"
+            calendarInfoPosition="before"
+            minimumNights={minimumNights}
+            enableOutsideDays
+            readOnly
+            renderCalendarInfo={renderDatePresets}
+            customInputIcon={<FaCalendarAlt />}
+          />
+        </DatePickerWrapper>
+      </ContentHolder>
+    );
+  }
+
   if (showPresets) {
     return (
       <ContentHolder>
diff --git a/src/components/DatePicker/DatePickerWrapper.ts b/src/components/DatePicker/DatePickerWrapper.ts
index 049dbbcd2..2e4b0baa4 100644
--- a/src/components/DatePicker/DatePickerWrapper.ts
+++ b/src/components/DatePicker/DatePickerWrapper.ts
@@ -1,8 +1,11 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 import colors from '../../theme/colors';
 
-const DatePickerWrapper = styled.span`
+interface Props {
+  showPresetsWithDropdown?: boolean;
+}
+const DatePickerAnalyticsWrapper = styled.span<Props>`
   .PresetDateRangePicker_panel {
     padding: 0 1.375rem 0.6875rem;
   }
@@ -253,7 +256,7 @@ const DatePickerWrapper = styled.span`
     position: absolute;
     top: 18px;
     line-height: 0.78;
-    border-radius: 3px;
+    border-radius: 5px;
     padding: 0.375rem 0.5625rem;
   }
 
@@ -334,7 +337,7 @@ const DatePickerWrapper = styled.span`
 
   .DayPicker__withBorder {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
+    border-radius: 5px;
   }
 
   .DayPicker_portal__horizontal {
@@ -408,7 +411,7 @@ const DatePickerWrapper = styled.span`
   .DayPicker_transitionContainer {
     position: relative;
     overflow: hidden;
-    border-radius: 3px;
+    border-radius: 5px;
   }
 
   .DayPicker_transitionContainer__horizontal {
@@ -433,10 +436,9 @@ const DatePickerWrapper = styled.span`
   .DateInput {
     margin: 0;
     padding: 0;
-    background: ${colors.white};
     position: relative;
     display: inline-block;
-    width: 85px;
+    width: ${({ showPresetsWithDropdown }) => (showPresetsWithDropdown ? '70px' : '85px')};
     vertical-align: middle;
   }
 
@@ -465,12 +467,21 @@ const DatePickerWrapper = styled.span`
     border-radius: 0;
     display: inline-block;
     font-size: ${({ theme }) => theme.font.sizes.medium};
-    line-height: 28px;
+    line-height: 29px;
     cursor: pointer;
     color: ${({ theme }) => theme.palette.text.main};
     text-align: center;
     padding: 0;
     outline: none;
+
+    ${({ showPresetsWithDropdown, theme }) =>
+      showPresetsWithDropdown &&
+      css`
+        font-size: ${theme.font.sizes.small};
+        font-weight: ${theme.font.weights.bold};
+        color: ${colors.blue};
+        background-color: transparent;
+      `}
   }
 
   .DateInput_input__small {
@@ -517,10 +528,17 @@ const DatePickerWrapper = styled.span`
     box-sizing: border-box;
     background: ${colors.white};
     border: 1px solid ${colors.gray};
-    border-radius: 3px;
+    border-radius: 5px;
     display: inline-block;
     cursor: pointer;
     position: relative;
+
+    ${({ showPresetsWithDropdown }) =>
+      showPresetsWithDropdown &&
+      css`
+        padding: 0 0.25rem;
+        background: transparent;
+      `}
   }
 
   .DateRangePickerInput__disabled {
@@ -528,8 +546,10 @@ const DatePickerWrapper = styled.span`
   }
 
   .DateRangePickerInput__withBorder {
-    border-radius: 3px;
-    border: 1px solid ${colors.gray};
+    border-radius: 5px;
+    border: 1px solid
+      ${({ showPresetsWithDropdown }) =>
+        showPresetsWithDropdown ? `   ${colors.blue};` : `${colors.gray}`};
   }
 
   .DateRangePickerInput__rtl {
@@ -550,8 +570,14 @@ const DatePickerWrapper = styled.span`
     padding: 0.3125rem 0.625rem;
     font-size: ${({ theme }) => theme.font.sizes.small};
     line-height: 1rem;
-    color: ${({ theme }) => theme.palette.text.light};
     font-weight: ${({ theme }) => theme.font.weights.light};
+
+    ${({ showPresetsWithDropdown }) =>
+      showPresetsWithDropdown &&
+      css`
+        padding: 0.12rem;
+        color: ${colors.blue};
+      `}
   }
 
   .DateRangePicker {
@@ -603,6 +629,17 @@ const DatePickerWrapper = styled.span`
     background-color: ${colors.blue};
     color: white;
   }
+
+  .DateRangePickerInput_calendarIcon {
+    border: none;
+    background: none;
+    color: ${colors.blue};
+    padding: 1px 6px 1px 3px;
+
+    :focus {
+      outline: none;
+    }
+  }
 `;
 
-export default DatePickerWrapper;
+export default DatePickerAnalyticsWrapper;
diff --git a/src/components/DatePicker/datepicker.stories.mdx b/src/components/DatePicker/datepicker.stories.mdx
index d6fc47469..2a7cf4a96 100644
--- a/src/components/DatePicker/datepicker.stories.mdx
+++ b/src/components/DatePicker/datepicker.stories.mdx
@@ -30,6 +30,39 @@ const Page = () => (
 ### DateRangePicker
 <Preview withSource="open">
   <Story name="default">
+    { ()=> {
+    const initialStartDate = moment().subtract(1, 'month');
+    const initialEndDate = moment();
+    const [startDate, setStartDate] = useState(initialStartDate);
+    const [endDate, setEndDate] = useState(initialEndDate);
+    const [focusedInput, setFocusedInput] = useState(null);
+    const onDateChange = ({startDate, endDate}) => {
+        setStartDate(startDate);
+        setEndDate(endDate);
+    }
+    const onFocusChange = (fInput) => {
+        setFocusedInput(fInput);
+    }
+        return (
+            <div style={{ height: '330px'}}>
+                <DatePicker
+                    showInnerPresets
+                    startDate={startDate}
+                    startDateId="startDate"
+                    endDate={endDate}
+                    endDateId="endDate"
+                    onDateChange={onDateChange}
+                    focusedInput={focusedInput}
+                    onFocusChange={onFocusChange}
+                />
+            </div>
+        )
+  }}
+  </Story>
+</Preview>
+
+<Preview withSource="open">
+  <Story name="with presets">
     { ()=> {
     const initialStartDate = moment().subtract(1, 'month');
     const initialEndDate = moment();
@@ -55,6 +88,7 @@ const Page = () => (
                     onDateChange={onDateChange}
                     focusedInput={focusedInput}
                     onFocusChange={onFocusChange}
+                    showPresets      
                 />
             </div>
         )
@@ -62,3 +96,37 @@ const Page = () => (
   </Story>
 </Preview>
 
+<Preview withSource="open">
+  <Story name="with dropdown presets">
+    { ()=> {
+    const initialStartDate = moment().subtract(1, 'month');
+    const initialEndDate = moment();
+    const [startDate, setStartDate] = useState(initialStartDate);
+    const [endDate, setEndDate] = useState(initialEndDate);
+    const [focusedInput, setFocusedInput] = useState(null);
+    const onDateChange = ({startDate, endDate}) => {
+        setStartDate(startDate);
+        setEndDate(endDate);
+    }
+    const onFocusChange = (fInput) => {
+        setFocusedInput(fInput);
+    }
+        return (
+            <div style={{ height: '330px'}}>
+                <DatePicker
+                    showPresets
+                    showInnerPresets
+                    startDate={startDate}
+                    startDateId="startDate"
+                    endDate={endDate}
+                    endDateId="endDate"
+                    onDateChange={onDateChange}
+                    focusedInput={focusedInput}
+                    onFocusChange={onFocusChange}
+                    showPresetsWithDropdown      
+                />
+            </div>
+        )
+  }}
+  </Story>
+</Preview>
\ No newline at end of file
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index bd5f80591..311a2960c 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,7 +1,7 @@
 import React, { SelectHTMLAttributes, ChangeEvent } from 'react';
 import DropdownContainer from './DropdownContainer';
 
-type Option = {
+export type Option = {
   value: string;
   displayName: string;
 };
@@ -11,7 +11,9 @@ type DefaultOption = {
   disabled?: boolean;
 };
 
-type Props = SelectHTMLAttributes<HTMLSelectElement> & {
+type SelectHTMLProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'>;
+
+type Props = SelectHTMLProps & {
   modifiers?: Array<string>;
   value: string;
   onChange?: (value: string) => void;

From bd4521453b672e497f07d7afc039d778578179ac Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Tue, 9 Feb 2021 15:37:49 +0100
Subject: [PATCH 016/157] chore: update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index acaad667b..b970e9c49 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.3] - 10-02-2021
+
+### Added
+
+- Add another type of datepicker component with dropdown presets
 # [2.5.2] - 22-01-2021
 
 ### Change

From ded11755163747a939323d091db5039999b46d78 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 23 Feb 2021 15:46:56 +0100
Subject: [PATCH 017/157] add classname in order to add external styles with
 styled components

---
 src/components/Switch/Switch.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 025b8b9f8..214deebeb 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -10,6 +10,7 @@ type SwitchProps = {
   id: string;
   label: string;
   onChange: (checked: boolean) => void;
+  className?: string;
 };
 
 const MarginLeftLabel = styled(Label)`
@@ -66,7 +67,7 @@ const Slider = styled.span`
   }
 `;
 
-const Switch = ({ id, checked, label, disabled = false, onChange }: SwitchProps) => {
+const Switch = ({ id, checked, label, disabled = false, onChange, className }: SwitchProps) => {
   const onToggleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target) {
       onChange(e.target.checked);
@@ -74,7 +75,7 @@ const Switch = ({ id, checked, label, disabled = false, onChange }: SwitchProps)
   };
 
   return (
-    <SwitchWrapper>
+    <SwitchWrapper className={className}>
       <MarginLeftLabel disabled={disabled} htmlFor={id}>
         <Span>{label}</Span>
         <Input

From 442fbdf6709019ee73017ae242a8a21d05612b62 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 23 Feb 2021 15:49:44 +0100
Subject: [PATCH 018/157] update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index acaad667b..475c526dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,11 @@
 # Change Log
 
 All notable changes to this project will be documented in this file.
+# [2.5.3] - 23-02-2021
 
+### Change
+
+- Add missing className for Switch component in order to externaly style it with styled-components
 # [2.5.2] - 22-01-2021
 
 ### Change

From 59677b9a30c3d242f083ee5f312979f697492deb Mon Sep 17 00:00:00 2001
From: Srdjan Rakic <srgjan.rakic@gmail.com>
Date: Thu, 25 Feb 2021 13:07:58 +0100
Subject: [PATCH 019/157] fix: daypicker moment type error

---
 src/components/DayPicker/DayPicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DayPicker/DayPicker.tsx b/src/components/DayPicker/DayPicker.tsx
index 944a0de7c..97bb60c24 100644
--- a/src/components/DayPicker/DayPicker.tsx
+++ b/src/components/DayPicker/DayPicker.tsx
@@ -80,7 +80,7 @@ const DayPicker = ({
         onFocusChange={onFocusChange}
         renderMonthElement={renderMonthElement}
         focused={focused}
-        date={typeof date === 'string' ? moment(date) : date}
+        date={date ? moment(date) : null}
         numberOfMonths={numberOfMonths}
         disabled={disabled}
         placeholder={placeholder}

From 82ab61eb8c42815e2a4094b8fee8567053512239 Mon Sep 17 00:00:00 2001
From: Srdjan Rakic <srgjan.rakic@gmail.com>
Date: Thu, 25 Feb 2021 13:09:00 +0100
Subject: [PATCH 020/157] Update CHANGELOG.md

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index acaad667b..bb9523ab5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.3] - 25-02-2021
+
+### Fixes
+
+- Daypicker moment type error
+
 # [2.5.2] - 22-01-2021
 
 ### Change

From f92d03a13625674a38e032c0d44a1253acee4448 Mon Sep 17 00:00:00 2001
From: Srdjan Rakic <srgjan.rakic@gmail.com>
Date: Thu, 25 Feb 2021 13:16:04 +0100
Subject: [PATCH 021/157] v2.5.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index abf2bfe9d..c26b371df 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.2",
+  "version": "2.5.3",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 5a62b7540f8d2f80ab8e5d195d0099a10504b93f Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Mon, 8 Mar 2021 17:03:59 +0100
Subject: [PATCH 022/157] :feat: implement drawer component functionality and
 design

---
 index.d.ts                                |  9 +++++
 src/components/Drawer/Drawer.tsx          | 15 ++++++++
 src/components/Drawer/DrawerContainer.tsx | 44 +++++++++++++++++++++++
 src/components/Drawer/drawer.stories.mdx  | 43 ++++++++++++++++++++++
 src/components/Drawer/index.ts            |  3 ++
 src/components/Drawer/styles.ts           | 41 +++++++++++++++++++++
 src/components/index.ts                   |  1 +
 src/index.ts                              |  1 +
 8 files changed, 157 insertions(+)
 create mode 100644 src/components/Drawer/Drawer.tsx
 create mode 100644 src/components/Drawer/DrawerContainer.tsx
 create mode 100644 src/components/Drawer/drawer.stories.mdx
 create mode 100644 src/components/Drawer/index.ts
 create mode 100644 src/components/Drawer/styles.ts

diff --git a/index.d.ts b/index.d.ts
index 3be7bb514..85f190c68 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -406,6 +406,15 @@ export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement> {
 
 export declare const Dropdown: FunctionComponent<DropdownProps>;
 
+export interface DrawerProps {
+  handleClose: () => void;
+  drawerIsOpen: boolean;
+  width?: string;
+}
+
+export declare const Drawer: FunctionComponent<DrawerProps>;
+
+
 export type LabelModifier =
   | 'fontSizeExtraSmall'
   | 'fontSizeSmall'
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
new file mode 100644
index 000000000..5b758132e
--- /dev/null
+++ b/src/components/Drawer/Drawer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import DrawerContainer from './DrawerContainer';
+
+interface Props {
+  handleClose: () => void;
+  drawerIsOpen: boolean;
+  width?: string;
+}
+
+const Drawer: React.FC<Props> = ({ children, handleClose, drawerIsOpen, width = '40%' }) => (
+  <DrawerContainer shouldShowDrawer={drawerIsOpen} closeDrawer={handleClose} width={width}>
+    {children}
+  </DrawerContainer>
+);
+export default Drawer;
diff --git a/src/components/Drawer/DrawerContainer.tsx b/src/components/Drawer/DrawerContainer.tsx
new file mode 100644
index 000000000..53efbf069
--- /dev/null
+++ b/src/components/Drawer/DrawerContainer.tsx
@@ -0,0 +1,44 @@
+import React, { useRef, useEffect } from 'react';
+import { CloseSection, StyledIcon, SideDrawer } from './styles';
+
+interface Props {
+  shouldShowDrawer: boolean;
+  closeDrawer: (event: any) => void;
+  width: string;
+}
+
+const DrawerContainer: React.FC<Props> = ({ shouldShowDrawer, children, closeDrawer, width }) => {
+  const reference = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const listener = (event: { target: any }) => {
+      // if inside drawer
+      if (!reference.current || reference.current.contains(event.target)) {
+        return;
+      }
+
+      closeDrawer(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [reference, closeDrawer]);
+
+  return (
+    <>
+      <SideDrawer isOpen={shouldShowDrawer} ref={reference} width={width}>
+        <CloseSection>
+          <StyledIcon onClick={closeDrawer} />
+        </CloseSection>
+        {children}
+      </SideDrawer>
+    </>
+  );
+};
+
+export default DrawerContainer;
diff --git a/src/components/Drawer/drawer.stories.mdx b/src/components/Drawer/drawer.stories.mdx
new file mode 100644
index 000000000..13550d85a
--- /dev/null
+++ b/src/components/Drawer/drawer.stories.mdx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import Drawer from './'
+
+<Meta title="Drawer" component={<Drawer/>} />
+
+# Drawer
+
+A simple Drawer controlled component
+
+```jsx
+import { Drawer } from '@inplayer-org/inplayer-ui';
+
+const Page = () => (
+  <Drawer />
+)
+```
+
+
+### Standard drawer
+<Preview withSource="open">
+  <Story name="standard">
+    { () => {
+        const [drawerIsOpen, setDrawerIsOpen] = useState(false);
+        const handleToggleDrawer = () => {
+          setDrawerIsOpen(!drawerIsOpen);
+        };
+        const handleClose = () => {
+          setDrawerIsOpen(false);
+        };
+        return (
+            <div>
+              <button type="button" onClick={handleToggleDrawer}>
+                Open drawer
+              </button> 
+              <Drawer drawerIsOpen={drawerIsOpen} handleClose={handleClose}> Hi there! </Drawer>
+            </div>
+        )
+  }}
+  </Story>
+</Preview>
+
+
diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts
new file mode 100644
index 000000000..d7bddb736
--- /dev/null
+++ b/src/components/Drawer/index.ts
@@ -0,0 +1,3 @@
+import Drawer from './Drawer';
+
+export default Drawer;
diff --git a/src/components/Drawer/styles.ts b/src/components/Drawer/styles.ts
new file mode 100644
index 000000000..c9fa8a322
--- /dev/null
+++ b/src/components/Drawer/styles.ts
@@ -0,0 +1,41 @@
+import { ImCross } from 'react-icons/im';
+import styled, { css } from 'styled-components';
+
+import colors from '../../theme/colors';
+
+interface SideDrawerProps {
+  isOpen: boolean;
+  width: string;
+}
+export const SideDrawer = styled.div<SideDrawerProps>`
+  height: 100%;
+  background: ${colors.white};
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: ${({ width }) => width};
+  z-index: 1000;
+
+  transform: translateX(100%);
+  transition: transform 0.3s ease-out;
+
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
+      transform: translateX(0);
+      box-shadow: 0 20px 25px 10000px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    `}
+`;
+export const CloseSection = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin: 1rem;
+`;
+export const StyledIcon = styled(ImCross)`
+  color: ${colors.fontGray};
+
+  :hover {
+    color: ${colors.fontDarkGray};
+    cursor: pointer;
+  }
+`;
diff --git a/src/components/index.ts b/src/components/index.ts
index 62e6f66f2..257dc8f42 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,3 +25,4 @@ export { default as Table } from './Table';
 export { default as Modal } from './Modal';
 export { default as Radio } from './Radio';
 export { default as Pagination } from './Pagination';
+export { default as Drawer } from './Drawer';
diff --git a/src/index.ts b/src/index.ts
index 33f01dd54..71490e911 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,6 +26,7 @@ export { default as Table } from './components/Table';
 export { default as Modal } from './components/Modal';
 export { default as Radio } from './components/Radio';
 export { default as Pagination } from './components/Pagination';
+export { default as Drawer } from './components/Drawer';
 
 // previews
 export { default as Preview1 } from './paywall-previews/Preview1';

From 859f3986d16d295283ecec2e1d396ca122ebeca4 Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Mon, 8 Mar 2021 17:09:00 +0100
Subject: [PATCH 023/157] :chore: update changelog

---
 CHANGELOG.md                    | 6 ++++++
 src/components/Drawer/styles.ts | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb9523ab5..a6473f6e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.6.0] - 09-03-2021
+
+### Added
+
+- Add new Drawer component
+
 # [2.5.3] - 25-02-2021
 
 ### Fixes
diff --git a/src/components/Drawer/styles.ts b/src/components/Drawer/styles.ts
index c9fa8a322..98f0e4c62 100644
--- a/src/components/Drawer/styles.ts
+++ b/src/components/Drawer/styles.ts
@@ -17,7 +17,7 @@ export const SideDrawer = styled.div<SideDrawerProps>`
   z-index: 1000;
 
   transform: translateX(100%);
-  transition: transform 0.3s ease-out;
+  transition: transform 0.5s ease-out;
 
   ${({ isOpen }) =>
     isOpen &&

From 1ed7082b28fb107b818a92bdfe3b91e533bc9e8d Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Mon, 8 Mar 2021 17:15:16 +0100
Subject: [PATCH 024/157] :chore: css transition change

---
 src/components/Drawer/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Drawer/styles.ts b/src/components/Drawer/styles.ts
index 98f0e4c62..94b997bc0 100644
--- a/src/components/Drawer/styles.ts
+++ b/src/components/Drawer/styles.ts
@@ -17,7 +17,7 @@ export const SideDrawer = styled.div<SideDrawerProps>`
   z-index: 1000;
 
   transform: translateX(100%);
-  transition: transform 0.5s ease-out;
+  transition: transform 0.4s ease-out;
 
   ${({ isOpen }) =>
     isOpen &&

From 2f3fb012cd81e15e778c60f7d64fe8afbc89f9d9 Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Tue, 16 Mar 2021 16:32:39 +0100
Subject: [PATCH 025/157] :feat: design changes on all preview templates for
 geo and url restrictions

---
 src/paywall-previews/Preview1/Preview1.tsx    |  23 +++-
 src/paywall-previews/Preview1/styled.ts       |  11 +-
 src/paywall-previews/Preview2/Preview2.tsx    | 103 ++++++++++--------
 src/paywall-previews/Preview2/styled.ts       |  17 ++-
 src/paywall-previews/Preview3/Preview3.tsx    |  20 +++-
 src/paywall-previews/Preview3/styled.tsx      |   7 +-
 src/paywall-previews/Preview4/Preview4.tsx    |  24 +++-
 src/paywall-previews/Preview4/styled.ts       |  10 +-
 src/paywall-previews/Preview5/Preview5.tsx    |  28 ++++-
 src/paywall-previews/Preview5/styled.ts       |  18 ++-
 src/paywall-previews/Preview6/Preview6.tsx    |  21 +++-
 src/paywall-previews/Preview6/styled.ts       |  33 +++++-
 src/paywall-previews/Preview7/Preview7.tsx    |  24 +++-
 src/paywall-previews/Preview7/styled.ts       |  21 +++-
 .../shared/PreviewComponents.tsx              |  28 ++++-
 15 files changed, 307 insertions(+), 81 deletions(-)

diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index 473dc8b34..236b99cd1 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -8,7 +8,11 @@ import Branding from '../types/branding';
 
 // Components
 import FooterText from '../shared/FooterText';
-import { OverlayLabel } from '../shared/PreviewComponents';
+import {
+  OverlayLabel,
+  RestrictedAssetContainer,
+  RestrictedAssetIcon,
+} from '../shared/PreviewComponents';
 import PreviewText from '../shared/PreviewText';
 import {
   InPlayerPreviewBox,
@@ -57,8 +61,12 @@ const Preview1 = ({
   isRestrictedAsset = false,
   isAuthenticated = false,
 }: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-
+  // eslint-disable-next-line no-param-reassign
+  isRestrictedAsset = true;
+  const image = imageUrl;
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  premiumContentLabel = 'This content is not available in your country';
   return (
     <InPlayerPreviewBox className="inplayer-preview-box">
       {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
@@ -68,7 +76,14 @@ const Preview1 = ({
           src={image}
           role="presentation"
           className="inplayer-paywall"
+          isRestrictedAsset
         />
+        {isRestrictedAsset && (
+          <RestrictedAssetContainer>
+            <RestrictedAssetIcon />
+            {premiumContentLabel}
+          </RestrictedAssetContainer>
+        )}
         <PaywallExplain
           hasProtectedByLabel={hasProtectedByLabel}
           className="inplayer-paywallexplain"
@@ -78,7 +93,7 @@ const Preview1 = ({
             <a href="https://inplayer.com">InPlayer Paywall</a>
           </InplayerWhiteLogo>
           <LockIcon className="inplayer-lock" />
-          <span>{premiumContentLabel}</span>
+          <span>{!isRestrictedAsset && premiumContentLabel}</span>
         </PaywallExplain>
       </ImageHolder>
       <ItemDetails className="inplayer-itemdetails">
diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index fa8344b0e..ccf06b977 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
 import { FaLock } from 'react-icons/fa';
@@ -206,11 +206,18 @@ export const InplayerFooter = styled.div`
   }
 `;
 
-export const PreviewImage = styled.img`
+export const PreviewImage = styled.img<{ isRestrictedAsset?: boolean }>`
   width: 100%;
   object-fit: cover;
   object-position: 50% 50%;
   cursor: pointer;
+
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.2);
+      position: absolute;
+    `}
 `;
 
 export const LockIcon = styled(FaLock)`
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index 16d77eaf4..033b620f7 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -1,15 +1,6 @@
 import React from 'react';
 
 // Colors
-import colors from '../../theme/colors';
-
-// Types
-import Branding from '../types/branding';
-
-// Components
-import FooterText from '../shared/FooterText';
-import PreviewText from '../shared/PreviewText';
-import { StyledPaywallDescription, BuyButton, FooterLink } from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledImageHolder,
@@ -18,7 +9,22 @@ import {
   BuyButtonWrapper,
   StyledIcon,
   Footer,
+  StyledRestrictedAssetContainer,
 } from './styled';
+import colors from '../../theme/colors';
+
+// Types
+import Branding from '../types/branding';
+
+// Components
+import FooterText from '../shared/FooterText';
+import PreviewText from '../shared/PreviewText';
+import {
+  StyledPaywallDescription,
+  BuyButton,
+  FooterLink,
+  RestrictedAssetIcon,
+} from '../shared/PreviewComponents';
 
 type Props = {
   branding?: Branding;
@@ -55,43 +61,46 @@ const Preview2 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
-}: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minHeight={minHeight}
-      minWidth={minWidth}
-      height={height}
-      width={width}
-    >
-      <StyledImageHolder backgroundImage={image} onClick={handleOpenModal} />
-      <AssetDetails>
-        <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-          <PaywallDescriptionSpan>
-            <StyledIcon name="star" />
-            {premiumContentLabel}
-          </PaywallDescriptionSpan>
-        </StyledPaywallDescription>
-        <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />
-        <PreviewText value={previewDescription} />
-        <BuyButtonWrapper>
-          <BuyButton
-            buttonBgColor={buttonBgColor}
-            buttonTextColor={buttonTextColor}
-            onClick={handleOpenModal}
-          >
-            {previewButtonLabel}
-          </BuyButton>
-        </BuyButtonWrapper>
-        <Footer color={colors.fontGray}>
-          <FooterLink href="#login" onClick={handleOpenModal}>
-            <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-          </FooterLink>
-        </Footer>
-      </AssetDetails>
-    </StyledPreviewBox>
-  );
-};
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minHeight={minHeight}
+    minWidth={minWidth}
+    height={height}
+    width={width}
+  >
+    <StyledImageHolder isRestrictedAsset backgroundImage={imageUrl} onClick={handleOpenModal} />
+    {isRestrictedAsset && (
+      <StyledRestrictedAssetContainer>
+        <RestrictedAssetIcon />
+        This content is not available in your country
+      </StyledRestrictedAssetContainer>
+    )}
+    <AssetDetails>
+      <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
+        <PaywallDescriptionSpan>
+          <StyledIcon name="star" />
+          {!isRestrictedAsset && premiumContentLabel}
+        </PaywallDescriptionSpan>
+      </StyledPaywallDescription>
+      <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />
+      <PreviewText value={previewDescription} />
+      <BuyButtonWrapper>
+        <BuyButton
+          buttonBgColor={buttonBgColor}
+          buttonTextColor={buttonTextColor}
+          onClick={handleOpenModal}
+        >
+          {previewButtonLabel}
+        </BuyButton>
+      </BuyButtonWrapper>
+      <Footer color={colors.fontGray}>
+        <FooterLink href="#login" onClick={handleOpenModal}>
+          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+        </FooterLink>
+      </Footer>
+    </AssetDetails>
+  </StyledPreviewBox>
+);
 
 export default Preview2;
diff --git a/src/paywall-previews/Preview2/styled.ts b/src/paywall-previews/Preview2/styled.ts
index 394a1f8a6..95881c0b4 100644
--- a/src/paywall-previews/Preview2/styled.ts
+++ b/src/paywall-previews/Preview2/styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 import { MdStar } from 'react-icons/md';
 
@@ -11,6 +11,7 @@ import {
   ImageHolder,
   PreviewFooter,
   DescriptionSpan,
+  RestrictedAssetContainer,
 } from '../shared/PreviewComponents';
 
 export const StyledPreviewBox = styled(PreviewBox)`
@@ -29,6 +30,7 @@ export const StyledPreviewBox = styled(PreviewBox)`
 
 interface StyledImageHolder {
   backgroundImage: string;
+  isRestrictedAsset?: boolean;
 }
 
 export const StyledImageHolder = styled(ImageHolder)<StyledImageHolder>`
@@ -41,6 +43,11 @@ export const StyledImageHolder = styled(ImageHolder)<StyledImageHolder>`
   @media screen and (max-width: 768px) {
     width: 100%;
   }
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.2);
+    `}
 `;
 
 export const AssetDetails = styled.div`
@@ -87,3 +94,11 @@ export const Footer = styled(PreviewFooter)`
   text-align: left;
   padding-top: 0.5em;
 `;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  left: 25%;
+  @media screen and (max-width: 768px) {
+    left: 50%;
+    top: 30%;
+  }
+`;
diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index 62084abd2..d88e46d72 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -9,7 +9,7 @@ import colors from '../../theme/colors';
 // Components
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
-import { StyledPaywallDescription } from '../shared/PreviewComponents';
+import { RestrictedAssetContainer, StyledPaywallDescription } from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledImageHolder,
@@ -59,7 +59,13 @@ const Preview3 = ({
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
 }: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  isRestrictedAsset = true;
+  const image = imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  premiumContentLabel = 'This content is not available in your country';
+
   return (
     <StyledPreviewBox
       id="preview-container"
@@ -74,9 +80,13 @@ const Preview3 = ({
         </Header>
         <StyledTextWrapper onClick={handleOpenModal}>
           <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-            <PaywallDescriptionSpan>
-              <GiCutDiamond /> {premiumContentLabel}
-            </PaywallDescriptionSpan>
+            {isRestrictedAsset ? (
+              <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
+            ) : (
+              <PaywallDescriptionSpan>
+                <GiCutDiamond /> {premiumContentLabel}
+              </PaywallDescriptionSpan>
+            )}
           </StyledPaywallDescription>
           <TitleWrapper>
             <TitleBorder color={buttonBgColor}>
diff --git a/src/paywall-previews/Preview3/styled.tsx b/src/paywall-previews/Preview3/styled.tsx
index c88826a2e..570623137 100644
--- a/src/paywall-previews/Preview3/styled.tsx
+++ b/src/paywall-previews/Preview3/styled.tsx
@@ -63,13 +63,16 @@ export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
   margin-bottom: 20px;
+  justify-content: center;
+  position: relative;
 `;
 
 export const TitleBorder = styled.div`
   margin-bottom: 2%;
-  width: 300px;
+  left: 0;
+  position: absolute;
   background: linear-gradient(${({ color }) => `${color},${color}`}) bottom left no-repeat;
-  background-size: 35% 4px;
+  background-size: 100% 4px;
 `;
 
 export const StyledIcon = styled(FaRegPlayCircle)`
diff --git a/src/paywall-previews/Preview4/Preview4.tsx b/src/paywall-previews/Preview4/Preview4.tsx
index ce3fa6080..a20b8f975 100644
--- a/src/paywall-previews/Preview4/Preview4.tsx
+++ b/src/paywall-previews/Preview4/Preview4.tsx
@@ -10,7 +10,11 @@ import colors from '../../theme/colors';
 // Components
 import StyledContainer from '../shared/StyledContainer';
 import PreviewText from '../shared/PreviewText';
-import { OverlayLabel } from '../shared/PreviewComponents';
+import {
+  OverlayLabel,
+  RestrictedAssetContainer,
+  RestrictedAssetIcon,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledButton,
@@ -35,6 +39,7 @@ type Props = {
   width?: string;
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
+  premiumContentLabel?: string;
 };
 
 const removeTags = (str: string) => str.replace(/<.*?>/g, ' ').replace(/ +/g, ' ').trim();
@@ -59,10 +64,16 @@ const Preview4 = ({
   width = '',
   isRestrictedAsset = false,
   handleOpenModal,
+  premiumContentLabel = 'Premium content',
 }: Props) => {
   const previewTitleText = removeTags(previewTitle);
   const previewDescriptionText = removeTags(previewDescription);
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  isRestrictedAsset = true;
+  const image = imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  // premiumContentLabel = 'This content is not available in your country';
 
   return (
     <StyledPreviewBox
@@ -93,7 +104,14 @@ const Preview4 = ({
             <FaLock />
           </Icon>
         </StyledIconWrapper>
-        <StyledPreviewImage src={image} />
+        <StyledPreviewImage isRestrictedAsset src={image} />
+        {isRestrictedAsset && (
+          <RestrictedAssetContainer>
+            <RestrictedAssetIcon />
+            {premiumContentLabel}
+          </RestrictedAssetContainer>
+        )}
+
         <StyledTextWrapper>
           <TextElement width={width}>
             <PreviewText
diff --git a/src/paywall-previews/Preview4/styled.ts b/src/paywall-previews/Preview4/styled.ts
index 6378de82b..40cf1a278 100644
--- a/src/paywall-previews/Preview4/styled.ts
+++ b/src/paywall-previews/Preview4/styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 
 // utils
@@ -55,8 +55,14 @@ export const Icon = styled.div`
   transform: rotate(-45deg);
 `;
 
-export const StyledPreviewImage = styled(PreviewImage)`
+export const StyledPreviewImage = styled(PreviewImage)<{ isRestrictedAsset?: boolean }>`
   position: absolute;
+
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.2);
+    `}
 `;
 
 export const StyledTextWrapper = styled(TextWrapper)`
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index 53490efde..703bdc066 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -9,7 +9,11 @@ import PreviewText from '../shared/PreviewText';
 import Branding from '../types/branding';
 
 // Components
-import { StyledPaywallDescription } from '../shared/PreviewComponents';
+import {
+  RestrictedAssetContainer,
+  RestrictedAssetIcon,
+  StyledPaywallDescription,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   ImageWrapper,
@@ -22,6 +26,7 @@ import {
   PaywallDescriptionSpan,
   TitleHolder,
   DescriptionHolder,
+  RestrictedAssetText,
 } from './styled';
 
 type Props = {
@@ -56,7 +61,15 @@ const Preview5 = ({
   isRestrictedAsset = false,
   premiumContentLabel = 'Premium content',
 }: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  isRestrictedAsset = true;
+  const image = imageUrl;
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  premiumContentLabel = 'This content is not available in your country';
+
   return (
     <StyledPreviewBox
       id="preview-container"
@@ -65,8 +78,14 @@ const Preview5 = ({
       width={width}
       height={height}
     >
-      <ImageWrapper height={height} backgroundImage={image} onClick={handleOpenModal}>
+      <ImageWrapper
+        isRestrictedAsset
+        height={height}
+        backgroundImage={image}
+        onClick={handleOpenModal}
+      >
         <Overlay />
+
         <BuyButtonHolder>
           <BuyButtonBorder>
             <StyledBuyButton
@@ -79,6 +98,9 @@ const Preview5 = ({
           </BuyButtonBorder>
         </BuyButtonHolder>
       </ImageWrapper>
+      {isRestrictedAsset && (
+        <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
+      )}
       <ItemDetails height={height}>
         <StyledPaywallDescription
           color={lighten(0.01, buttonBgColor)}
diff --git a/src/paywall-previews/Preview5/styled.ts b/src/paywall-previews/Preview5/styled.ts
index 3f74eeacf..27e8488da 100644
--- a/src/paywall-previews/Preview5/styled.ts
+++ b/src/paywall-previews/Preview5/styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { GiCutDiamond } from 'react-icons/gi';
 import { transparentize } from 'polished';
 
@@ -21,12 +21,18 @@ export const StyledPreviewBox = styled(PreviewBox)<any>`
 type ImageWrapperProps = {
   height: any;
   backgroundImage: any;
+  isRestrictedAsset?: boolean;
 };
 
 export const ImageWrapper = styled(ImageHolder)<ImageWrapperProps>`
   height: ${({ height }) => (height < 75 ? '45%' : '65%')};
   background-image: url(${({ backgroundImage }) => backgroundImage});
   margin: 0;
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.3);
+    `}
 `;
 
 export const Overlay = styled.div`
@@ -103,3 +109,13 @@ export const TitleHolder = styled.div`
 export const DescriptionHolder = styled.div`
   margin-bottom: 0.6em;
 `;
+export const RestrictedAssetText = styled.p`
+  z-index: 100;
+  position: absolute;
+  color: white;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  bottom: 25%;
+`;
diff --git a/src/paywall-previews/Preview6/Preview6.tsx b/src/paywall-previews/Preview6/Preview6.tsx
index 6f356d7eb..e7a2be284 100644
--- a/src/paywall-previews/Preview6/Preview6.tsx
+++ b/src/paywall-previews/Preview6/Preview6.tsx
@@ -18,8 +18,9 @@ import {
   PreviewFooter,
   IconHolder,
   StyledBuyButton,
+  StyledRestrictedAssetContainer,
 } from './styled';
-import { PreviewFooterLink } from '../shared/PreviewComponents';
+import { PreviewFooterLink, RestrictedAssetIcon } from '../shared/PreviewComponents';
 
 // Types
 import Branding from '../types/branding';
@@ -38,6 +39,7 @@ type Props = {
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
   isAuthenticated?: boolean;
+  premiumContentLabel?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
@@ -61,8 +63,14 @@ const Preview6 = ({
   isRestrictedAsset = false,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
+  premiumContentLabel = 'Premium content',
 }: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  isRestrictedAsset = true;
+  const image = imageUrl;
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
   return (
     <StyledPreviewBox
       id="preview-container"
@@ -71,7 +79,14 @@ const Preview6 = ({
       width={width}
       height={height}
     >
-      <ImageWrapper backgroundImage={image} onClick={handleOpenModal} />
+      <ImageWrapper isRestrictedAsset backgroundImage={image} onClick={handleOpenModal} />
+      {isRestrictedAsset && (
+        <StyledRestrictedAssetContainer fontSize="14px">
+          <RestrictedAssetIcon size="5rem" />
+          {premiumContentLabel}
+        </StyledRestrictedAssetContainer>
+      )}
+
       <ItemDetails>
         <PreviewText value={title} />
         <PreviewText value={description} />
diff --git a/src/paywall-previews/Preview6/styled.ts b/src/paywall-previews/Preview6/styled.ts
index 8c3aa2a5f..5150b8e20 100644
--- a/src/paywall-previews/Preview6/styled.ts
+++ b/src/paywall-previews/Preview6/styled.ts
@@ -1,7 +1,12 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 // Components
-import { PreviewBox, ImageHolder, BuyButton } from '../shared/PreviewComponents';
+import {
+  PreviewBox,
+  ImageHolder,
+  BuyButton,
+  RestrictedAssetContainer,
+} from '../shared/PreviewComponents';
 
 export const StyledPreviewBox = styled(PreviewBox)`
   max-width: ${({ width }) => (width ? '' : '850px')};
@@ -13,13 +18,21 @@ export const StyledPreviewBox = styled(PreviewBox)`
   grid-template-columns: 1fr 0.5fr 1fr;
   grid-template-rows: 1fr auto;
   grid-column-gap: 1rem;
+  position: relative;
   @media screen and (max-width: 1100px) {
     grid-template-columns: 2fr 1fr 1fr;
   }
 `;
 
+export const Container = styled.div`
+  /* @media screen and (max-width: 1100px) {
+    position: relative;
+  } */
+`;
+
 interface ImageWrapperProps {
   backgroundImage: string;
+  isRestrictedAsset?: boolean;
 }
 
 export const ImageWrapper = styled(ImageHolder)<ImageWrapperProps>`
@@ -38,6 +51,12 @@ export const ImageWrapper = styled(ImageHolder)<ImageWrapperProps>`
     margin: 0;
     grid-row: 1;
   }
+
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.2);
+    `}
 `;
 
 export const ItemDetails = styled.div`
@@ -88,3 +107,13 @@ export const IconHolder = styled.div<IconHolderProps>`
   font-size: ${({ theme }) => theme.font.sizes.small};
   margin-left: 0.4rem;
 `;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  width: 50%;
+  top: 45%;
+  left: 20%;
+  @media screen and (max-width: 1100px) {
+    left: 25%;
+    top: 32%;
+  }
+`;
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index c837a9e9d..63f14cb63 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -9,7 +9,12 @@ import Branding from '../types/branding';
 
 // Components
 import FooterText from '../shared/FooterText';
-import { OverlayLabel, PreviewFooterLink } from '../shared/PreviewComponents';
+import {
+  OverlayLabel,
+  PreviewFooterLink,
+  RestrictedAssetContainer,
+  RestrictedAssetIcon,
+} from '../shared/PreviewComponents';
 import PreviewText from '../shared/PreviewText';
 import {
   StyledPreviewBox,
@@ -36,6 +41,7 @@ type Props = {
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
   isAuthenticated?: boolean;
+  premiumContentLabel?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
@@ -61,9 +67,13 @@ const Preview7 = ({
   isRestrictedAsset = false,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
+  premiumContentLabel = 'Premium content',
 }: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-
+  // eslint-disable-next-line no-param-reassign
+  isRestrictedAsset = true;
+  const image = imageUrl;
+  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
+  // eslint-disable-next-line no-param-reassign
   return (
     <StyledPreviewBox
       id="preview-container"
@@ -74,7 +84,13 @@ const Preview7 = ({
     >
       {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
       <StyledImageWrapper onClick={handleOpenModal}>
-        <StyledPreviewImage src={image} imageWidth="250px" imageBorderRadius />
+        <StyledPreviewImage isRestrictedAsset src={image} imageWidth="250px" imageBorderRadius />
+        {isRestrictedAsset && (
+          <RestrictedAssetContainer fontSize="14px">
+            <RestrictedAssetIcon size="4rem" />
+            {premiumContentLabel}
+          </RestrictedAssetContainer>
+        )}
         <StyledIconWrapper
           backgroundColor={buttonBgColor}
           hasProtectedByLabel={hasProtectedByLabel}
diff --git a/src/paywall-previews/Preview7/styled.ts b/src/paywall-previews/Preview7/styled.ts
index ef98ee015..89139a613 100644
--- a/src/paywall-previews/Preview7/styled.ts
+++ b/src/paywall-previews/Preview7/styled.ts
@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { MdDoNotDisturbAlt } from 'react-icons/md';
 
 // utils
 import colors from '../../theme/colors';
@@ -32,6 +33,11 @@ export const StyledImageWrapper = styled(ImageHolder)`
 
 export const StyledPreviewImage = styled(PreviewImage)<any>`
   height: 250px;
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.2);
+    `}
 `;
 
 export const StyledIconWrapper = styled(IconWrapper)`
@@ -80,3 +86,16 @@ export const StyledPreviewFooter = styled(PreviewFooter)`
   padding-top: 5px;
   height: 5%;
 `;
+
+export const RestrictedAssetText = styled.p`
+  z-index: 100;
+  position: absolute;
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
diff --git a/src/paywall-previews/shared/PreviewComponents.tsx b/src/paywall-previews/shared/PreviewComponents.tsx
index 23772d642..5e0605843 100644
--- a/src/paywall-previews/shared/PreviewComponents.tsx
+++ b/src/paywall-previews/shared/PreviewComponents.tsx
@@ -1,8 +1,9 @@
 import { darken, transparentize } from 'polished';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { prop } from 'styled-tools';
 
 // utils
+import { MdDoNotDisturbAlt } from 'react-icons/md';
 import colors from '../../theme/colors';
 
 // components
@@ -33,6 +34,7 @@ export const PreviewBox = styled.div<PreviewBoxProps>`
 
 type PreviewImageProps = {
   imageBorderRadius?: string;
+  isRestrictedAsset?: boolean;
 };
 
 export const PreviewImage = styled.img<PreviewImageProps>`
@@ -169,3 +171,27 @@ export const PreviewFooterLink = styled(FooterLink)`
   background: transparent;
   color: ${({ theme }) => theme.palette.text.main};
 `;
+
+export const RestrictedAssetIcon = styled(MdDoNotDisturbAlt)<{ size?: string }>`
+  top: 25%;
+  width: ${({ size }) => size || '8rem'};
+  height: ${({ size }) => size || '8rem'};
+`;
+interface RestrictedAssetContainerProps {
+  fontSize?: string;
+}
+export const RestrictedAssetContainer = styled.div<RestrictedAssetContainerProps>`
+  z-index: 100;
+  position: absolute;
+  color: white;
+  font-size: ${({ fontSize }) => fontSize || '18px'};
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;

From fd7d4b488db295a3b947a25bad347ee563a85370 Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Wed, 17 Mar 2021 10:11:29 +0100
Subject: [PATCH 026/157] :chore: remove testing variables from each preview
 and minor css brightness change

---
 src/paywall-previews/Preview1/Preview1.tsx | 111 ++++++++++-----------
 src/paywall-previews/Preview1/styled.ts    |   2 +-
 src/paywall-previews/Preview2/Preview2.tsx |   6 +-
 src/paywall-previews/Preview2/styled.ts    |   2 +-
 src/paywall-previews/Preview3/Preview3.tsx |  79 +++++++--------
 src/paywall-previews/Preview4/Preview4.tsx |   9 +-
 src/paywall-previews/Preview4/styled.ts    |   2 +-
 src/paywall-previews/Preview5/Preview5.tsx | 101 +++++++++----------
 src/paywall-previews/Preview6/Preview6.tsx |  88 ++++++++--------
 src/paywall-previews/Preview6/styled.ts    |   2 +-
 src/paywall-previews/Preview7/Preview7.tsx | 107 ++++++++++----------
 src/paywall-previews/Preview7/styled.ts    |   2 +-
 12 files changed, 234 insertions(+), 277 deletions(-)

diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index 236b99cd1..53af29c0f 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -60,67 +60,56 @@ const Preview1 = ({
   premiumContentLabel = 'Premium content',
   isRestrictedAsset = false,
   isAuthenticated = false,
-}: Props) => {
-  // eslint-disable-next-line no-param-reassign
-  isRestrictedAsset = true;
-  const image = imageUrl;
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  premiumContentLabel = 'This content is not available in your country';
-  return (
-    <InPlayerPreviewBox className="inplayer-preview-box">
-      {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
-      <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
-        <PreviewImage
-          alt="coverPhoto"
-          src={image}
-          role="presentation"
-          className="inplayer-paywall"
-          isRestrictedAsset
-        />
-        {isRestrictedAsset && (
-          <RestrictedAssetContainer>
-            <RestrictedAssetIcon />
-            {premiumContentLabel}
-          </RestrictedAssetContainer>
-        )}
-        <PaywallExplain
-          hasProtectedByLabel={hasProtectedByLabel}
-          className="inplayer-paywallexplain"
-        >
-          <InplayerWhiteLogo id="inplayer-whitelogo">
-            <strong>{protectedByLabel} inplayer</strong>
-            <a href="https://inplayer.com">InPlayer Paywall</a>
-          </InplayerWhiteLogo>
-          <LockIcon className="inplayer-lock" />
-          <span>{!isRestrictedAsset && premiumContentLabel}</span>
-        </PaywallExplain>
-      </ImageHolder>
-      <ItemDetails className="inplayer-itemdetails">
-        <PreviewText value={previewTitle} className="inplayer-title" />
-        <PreviewText value={previewDescription} />
-      </ItemDetails>
-      {displayBuyButton && (
-        <BuyButtonWrapper className="inplayer-buybutton">
-          <BuyButton
-            className="inplayer-button inplayer-submit-button"
-            buttonBgColor={buttonBgColor}
-            buttonTextColor={buttonTextColor}
-            onClick={handleOpenModal}
-          >
-            {previewButtonLabel}
-          </BuyButton>
-        </BuyButtonWrapper>
+}: Props) => (
+  <InPlayerPreviewBox className="inplayer-preview-box">
+    {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
+    <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
+      <PreviewImage
+        alt="coverPhoto"
+        src={imageUrl}
+        role="presentation"
+        className="inplayer-paywall"
+        isRestrictedAsset={isRestrictedAsset}
+      />
+      {isRestrictedAsset && (
+        <RestrictedAssetContainer>
+          <RestrictedAssetIcon />
+          {premiumContentLabel}
+        </RestrictedAssetContainer>
       )}
-      <InplayerFooter className="inplayer-preview-footer">
-        <div className="inplayer-guest-footer">
-          <a href="#login" onClick={handleOpenModal}>
-            <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-          </a>
-        </div>
-      </InplayerFooter>
-    </InPlayerPreviewBox>
-  );
-};
+      <PaywallExplain hasProtectedByLabel={hasProtectedByLabel} className="inplayer-paywallexplain">
+        <InplayerWhiteLogo id="inplayer-whitelogo">
+          <strong>{protectedByLabel} inplayer</strong>
+          <a href="https://inplayer.com">InPlayer Paywall</a>
+        </InplayerWhiteLogo>
+        <LockIcon className="inplayer-lock" />
+        <span>{!isRestrictedAsset && premiumContentLabel}</span>
+      </PaywallExplain>
+    </ImageHolder>
+    <ItemDetails className="inplayer-itemdetails">
+      <PreviewText value={previewTitle} className="inplayer-title" />
+      <PreviewText value={previewDescription} />
+    </ItemDetails>
+    {displayBuyButton && (
+      <BuyButtonWrapper className="inplayer-buybutton">
+        <BuyButton
+          className="inplayer-button inplayer-submit-button"
+          buttonBgColor={buttonBgColor}
+          buttonTextColor={buttonTextColor}
+          onClick={handleOpenModal}
+        >
+          {previewButtonLabel}
+        </BuyButton>
+      </BuyButtonWrapper>
+    )}
+    <InplayerFooter className="inplayer-preview-footer">
+      <div className="inplayer-guest-footer">
+        <a href="#login" onClick={handleOpenModal}>
+          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+        </a>
+      </div>
+    </InplayerFooter>
+  </InPlayerPreviewBox>
+);
 
 export default Preview1;
diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index ccf06b977..0c9e2b1bd 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -215,7 +215,7 @@ export const PreviewImage = styled.img<{ isRestrictedAsset?: boolean }>`
   ${({ isRestrictedAsset }) =>
     isRestrictedAsset &&
     css`
-      filter: brightness(0.2);
+      filter: brightness(0.3);
       position: absolute;
     `}
 `;
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index 033b620f7..4b860cf11 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -69,7 +69,11 @@ const Preview2 = ({
     height={height}
     width={width}
   >
-    <StyledImageHolder isRestrictedAsset backgroundImage={imageUrl} onClick={handleOpenModal} />
+    <StyledImageHolder
+      isRestrictedAsset={isRestrictedAsset}
+      backgroundImage={imageUrl}
+      onClick={handleOpenModal}
+    />
     {isRestrictedAsset && (
       <StyledRestrictedAssetContainer>
         <RestrictedAssetIcon />
diff --git a/src/paywall-previews/Preview2/styled.ts b/src/paywall-previews/Preview2/styled.ts
index 95881c0b4..3f71bb229 100644
--- a/src/paywall-previews/Preview2/styled.ts
+++ b/src/paywall-previews/Preview2/styled.ts
@@ -46,7 +46,7 @@ export const StyledImageHolder = styled(ImageHolder)<StyledImageHolder>`
   ${({ isRestrictedAsset }) =>
     isRestrictedAsset &&
     css`
-      filter: brightness(0.2);
+      filter: brightness(0.3);
     `}
 `;
 
diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index d88e46d72..c67b22a19 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -58,49 +58,40 @@ const Preview3 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
-}: Props) => {
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  isRestrictedAsset = true;
-  const image = imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  premiumContentLabel = 'This content is not available in your country';
-
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minHeight={minHeight}
-      minWidth={minWidth}
-      width={width}
-      height={height}
-    >
-      <StyledImageHolder backgroundImage={image} onClick={handleOpenModal}>
-        <Header onClick={handleOpenModal} color={colors.fontLightGray}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </Header>
-        <StyledTextWrapper onClick={handleOpenModal}>
-          <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-            {isRestrictedAsset ? (
-              <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
-            ) : (
-              <PaywallDescriptionSpan>
-                <GiCutDiamond /> {premiumContentLabel}
-              </PaywallDescriptionSpan>
-            )}
-          </StyledPaywallDescription>
-          <TitleWrapper>
-            <TitleBorder color={buttonBgColor}>
-              <PreviewText value={previewTitle} textColor={colors.white} />
-            </TitleBorder>
-            <StyledIcon color={buttonBgColor} />
-          </TitleWrapper>
-          <DescriptionWrapper>
-            <PreviewText value={previewDescription} textColor={colors.white} />
-          </DescriptionWrapper>
-        </StyledTextWrapper>
-      </StyledImageHolder>
-    </StyledPreviewBox>
-  );
-};
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minHeight={minHeight}
+    minWidth={minWidth}
+    width={width}
+    height={height}
+  >
+    <StyledImageHolder backgroundImage={imageUrl} onClick={handleOpenModal}>
+      <Header onClick={handleOpenModal} color={colors.fontLightGray}>
+        <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+      </Header>
+      <StyledTextWrapper onClick={handleOpenModal}>
+        <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
+          {isRestrictedAsset ? (
+            <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
+          ) : (
+            <PaywallDescriptionSpan>
+              <GiCutDiamond /> {premiumContentLabel}
+            </PaywallDescriptionSpan>
+          )}
+        </StyledPaywallDescription>
+        <TitleWrapper>
+          <TitleBorder color={buttonBgColor}>
+            <PreviewText value={previewTitle} textColor={colors.white} />
+          </TitleBorder>
+          <StyledIcon color={buttonBgColor} />
+        </TitleWrapper>
+        <DescriptionWrapper>
+          <PreviewText value={previewDescription} textColor={colors.white} />
+        </DescriptionWrapper>
+      </StyledTextWrapper>
+    </StyledImageHolder>
+  </StyledPreviewBox>
+);
 
 export default Preview3;
diff --git a/src/paywall-previews/Preview4/Preview4.tsx b/src/paywall-previews/Preview4/Preview4.tsx
index a20b8f975..acfff23a8 100644
--- a/src/paywall-previews/Preview4/Preview4.tsx
+++ b/src/paywall-previews/Preview4/Preview4.tsx
@@ -68,13 +68,6 @@ const Preview4 = ({
 }: Props) => {
   const previewTitleText = removeTags(previewTitle);
   const previewDescriptionText = removeTags(previewDescription);
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  isRestrictedAsset = true;
-  const image = imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  // premiumContentLabel = 'This content is not available in your country';
-
   return (
     <StyledPreviewBox
       id="preview-container"
@@ -104,7 +97,7 @@ const Preview4 = ({
             <FaLock />
           </Icon>
         </StyledIconWrapper>
-        <StyledPreviewImage isRestrictedAsset src={image} />
+        <StyledPreviewImage isRestrictedAsset={isRestrictedAsset} src={imageUrl} />
         {isRestrictedAsset && (
           <RestrictedAssetContainer>
             <RestrictedAssetIcon />
diff --git a/src/paywall-previews/Preview4/styled.ts b/src/paywall-previews/Preview4/styled.ts
index 40cf1a278..a42e00a30 100644
--- a/src/paywall-previews/Preview4/styled.ts
+++ b/src/paywall-previews/Preview4/styled.ts
@@ -61,7 +61,7 @@ export const StyledPreviewImage = styled(PreviewImage)<{ isRestrictedAsset?: boo
   ${({ isRestrictedAsset }) =>
     isRestrictedAsset &&
     css`
-      filter: brightness(0.2);
+      filter: brightness(0.3);
     `}
 `;
 
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index 703bdc066..67117136f 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -60,64 +60,53 @@ const Preview5 = ({
   handleOpenModal,
   isRestrictedAsset = false,
   premiumContentLabel = 'Premium content',
-}: Props) => {
-  // eslint-disable-next-line no-param-reassign
-  isRestrictedAsset = true;
-  const image = imageUrl;
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  premiumContentLabel = 'This content is not available in your country';
-
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minHeight={minHeight}
-      minWidth={minWidth}
-      width={width}
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minHeight={minHeight}
+    minWidth={minWidth}
+    width={width}
+    height={height}
+  >
+    <ImageWrapper
+      isRestrictedAsset={isRestrictedAsset}
       height={height}
+      backgroundImage={imageUrl}
+      onClick={handleOpenModal}
     >
-      <ImageWrapper
-        isRestrictedAsset
-        height={height}
-        backgroundImage={image}
-        onClick={handleOpenModal}
-      >
-        <Overlay />
+      <Overlay />
 
-        <BuyButtonHolder>
-          <BuyButtonBorder>
-            <StyledBuyButton
-              buttonBgColor={buttonBgColor}
-              buttonTextColor={buttonTextColor}
-              onClick={handleOpenModal}
-            >
-              {previewButtonLabel}
-            </StyledBuyButton>
-          </BuyButtonBorder>
-        </BuyButtonHolder>
-      </ImageWrapper>
-      {isRestrictedAsset && (
-        <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
-      )}
-      <ItemDetails height={height}>
-        <StyledPaywallDescription
-          color={lighten(0.01, buttonBgColor)}
-          hasProtectedByLabel={hasProtectedByLabel}
-        >
-          <StyledIcon />
-          <PaywallDescriptionSpan>{premiumContentLabel}</PaywallDescriptionSpan>
-        </StyledPaywallDescription>
-        <TitleHolder>
-          <PreviewText value={previewTitle} />
-        </TitleHolder>
-        <DescriptionHolder>
-          <PreviewText value={previewDescription} />
-        </DescriptionHolder>
-      </ItemDetails>
-    </StyledPreviewBox>
-  );
-};
+      <BuyButtonHolder>
+        <BuyButtonBorder>
+          <StyledBuyButton
+            buttonBgColor={buttonBgColor}
+            buttonTextColor={buttonTextColor}
+            onClick={handleOpenModal}
+          >
+            {previewButtonLabel}
+          </StyledBuyButton>
+        </BuyButtonBorder>
+      </BuyButtonHolder>
+    </ImageWrapper>
+    {isRestrictedAsset && (
+      <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
+    )}
+    <ItemDetails height={height}>
+      <StyledPaywallDescription
+        color={lighten(0.01, buttonBgColor)}
+        hasProtectedByLabel={hasProtectedByLabel}
+      >
+        <StyledIcon />
+        <PaywallDescriptionSpan>{premiumContentLabel}</PaywallDescriptionSpan>
+      </StyledPaywallDescription>
+      <TitleHolder>
+        <PreviewText value={previewTitle} />
+      </TitleHolder>
+      <DescriptionHolder>
+        <PreviewText value={previewDescription} />
+      </DescriptionHolder>
+    </ItemDetails>
+  </StyledPreviewBox>
+);
 
 export default Preview5;
diff --git a/src/paywall-previews/Preview6/Preview6.tsx b/src/paywall-previews/Preview6/Preview6.tsx
index e7a2be284..cbdccd09a 100644
--- a/src/paywall-previews/Preview6/Preview6.tsx
+++ b/src/paywall-previews/Preview6/Preview6.tsx
@@ -64,52 +64,48 @@ const Preview6 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
   premiumContentLabel = 'Premium content',
-}: Props) => {
-  // eslint-disable-next-line no-param-reassign
-  isRestrictedAsset = true;
-  const image = imageUrl;
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minWidth={minWidth}
-      minHeight={minHeight}
-      width={width}
-      height={height}
-    >
-      <ImageWrapper isRestrictedAsset backgroundImage={image} onClick={handleOpenModal} />
-      {isRestrictedAsset && (
-        <StyledRestrictedAssetContainer fontSize="14px">
-          <RestrictedAssetIcon size="5rem" />
-          {premiumContentLabel}
-        </StyledRestrictedAssetContainer>
-      )}
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minWidth={minWidth}
+    minHeight={minHeight}
+    width={width}
+    height={height}
+  >
+    <ImageWrapper
+      isRestrictedAsset={isRestrictedAsset}
+      backgroundImage={imageUrl}
+      onClick={handleOpenModal}
+    />
+    {isRestrictedAsset && (
+      <StyledRestrictedAssetContainer fontSize="14px">
+        <RestrictedAssetIcon size="5rem" />
+        {premiumContentLabel}
+      </StyledRestrictedAssetContainer>
+    )}
 
-      <ItemDetails>
-        <PreviewText value={title} />
-        <PreviewText value={description} />
-      </ItemDetails>
-      <ButtonWrapper>
-        <StyledBuyButton
-          buttonBgColor={buttonBgColor}
-          buttonTextColor={buttonTextColor}
-          onClick={handleOpenModal}
-        >
-          {buttonLabel}
-        </StyledBuyButton>
-      </ButtonWrapper>
-      <PreviewFooter>
-        <PreviewFooterLink href="#login" onClick={handleOpenModal}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </PreviewFooterLink>
-        <IconHolder hasProtectedByLabel={hasProtectedByLabel}>
-          <LockIcon />
-        </IconHolder>
-      </PreviewFooter>
-    </StyledPreviewBox>
-  );
-};
+    <ItemDetails>
+      <PreviewText value={title} />
+      <PreviewText value={description} />
+    </ItemDetails>
+    <ButtonWrapper>
+      <StyledBuyButton
+        buttonBgColor={buttonBgColor}
+        buttonTextColor={buttonTextColor}
+        onClick={handleOpenModal}
+      >
+        {buttonLabel}
+      </StyledBuyButton>
+    </ButtonWrapper>
+    <PreviewFooter>
+      <PreviewFooterLink href="#login" onClick={handleOpenModal}>
+        <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+      </PreviewFooterLink>
+      <IconHolder hasProtectedByLabel={hasProtectedByLabel}>
+        <LockIcon />
+      </IconHolder>
+    </PreviewFooter>
+  </StyledPreviewBox>
+);
 
 export default Preview6;
diff --git a/src/paywall-previews/Preview6/styled.ts b/src/paywall-previews/Preview6/styled.ts
index 5150b8e20..7bc386c18 100644
--- a/src/paywall-previews/Preview6/styled.ts
+++ b/src/paywall-previews/Preview6/styled.ts
@@ -55,7 +55,7 @@ export const ImageWrapper = styled(ImageHolder)<ImageWrapperProps>`
   ${({ isRestrictedAsset }) =>
     isRestrictedAsset &&
     css`
-      filter: brightness(0.2);
+      filter: brightness(0.3);
     `}
 `;
 
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index 63f14cb63..c17fcb159 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -68,62 +68,57 @@ const Preview7 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
   premiumContentLabel = 'Premium content',
-}: Props) => {
-  // eslint-disable-next-line no-param-reassign
-  isRestrictedAsset = true;
-  const image = imageUrl;
-  // const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  // eslint-disable-next-line no-param-reassign
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minWidth={minWidth}
-      minHeight={minHeight}
-      width={width}
-      height={height}
-    >
-      {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
-      <StyledImageWrapper onClick={handleOpenModal}>
-        <StyledPreviewImage isRestrictedAsset src={image} imageWidth="250px" imageBorderRadius />
-        {isRestrictedAsset && (
-          <RestrictedAssetContainer fontSize="14px">
-            <RestrictedAssetIcon size="4rem" />
-            {premiumContentLabel}
-          </RestrictedAssetContainer>
-        )}
-        <StyledIconWrapper
-          backgroundColor={buttonBgColor}
-          hasProtectedByLabel={hasProtectedByLabel}
-        >
-          <FaLock />
-        </StyledIconWrapper>
-      </StyledImageWrapper>
-      <ItemDetails>
-        <PreviewHeader variant="h4">
-          <PreviewText value={previewTitle} isTextCenter padding="0 0 0.5rem 0" />
-        </PreviewHeader>
-        <ItemContent variant="p">
-          <PreviewText value={previewDescription} isTextCenter />
-        </ItemContent>
-      </ItemDetails>
-      {displayBuyButton && (
-        <ButtonWrapper>
-          <StyledBuyButton
-            buttonBgColor={buttonBgColor}
-            buttonTextColor={buttonTextColor}
-            onClick={handleOpenModal}
-          >
-            {previewButtonLabel}
-          </StyledBuyButton>
-        </ButtonWrapper>
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minWidth={minWidth}
+    minHeight={minHeight}
+    width={width}
+    height={height}
+  >
+    {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
+    <StyledImageWrapper onClick={handleOpenModal}>
+      <StyledPreviewImage
+        isRestrictedAsset={isRestrictedAsset}
+        src={imageUrl}
+        imageWidth="250px"
+        imageBorderRadius
+      />
+      {isRestrictedAsset && (
+        <RestrictedAssetContainer fontSize="14px">
+          <RestrictedAssetIcon size="4rem" />
+          {premiumContentLabel}
+        </RestrictedAssetContainer>
       )}
-      <StyledPreviewFooter>
-        <PreviewFooterLink href="#login" onClick={handleOpenModal}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </PreviewFooterLink>
-      </StyledPreviewFooter>
-    </StyledPreviewBox>
-  );
-};
+      <StyledIconWrapper backgroundColor={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
+        <FaLock />
+      </StyledIconWrapper>
+    </StyledImageWrapper>
+    <ItemDetails>
+      <PreviewHeader variant="h4">
+        <PreviewText value={previewTitle} isTextCenter padding="0 0 0.5rem 0" />
+      </PreviewHeader>
+      <ItemContent variant="p">
+        <PreviewText value={previewDescription} isTextCenter />
+      </ItemContent>
+    </ItemDetails>
+    {displayBuyButton && (
+      <ButtonWrapper>
+        <StyledBuyButton
+          buttonBgColor={buttonBgColor}
+          buttonTextColor={buttonTextColor}
+          onClick={handleOpenModal}
+        >
+          {previewButtonLabel}
+        </StyledBuyButton>
+      </ButtonWrapper>
+    )}
+    <StyledPreviewFooter>
+      <PreviewFooterLink href="#login" onClick={handleOpenModal}>
+        <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+      </PreviewFooterLink>
+    </StyledPreviewFooter>
+  </StyledPreviewBox>
+);
 
 export default Preview7;
diff --git a/src/paywall-previews/Preview7/styled.ts b/src/paywall-previews/Preview7/styled.ts
index 89139a613..4f08ef573 100644
--- a/src/paywall-previews/Preview7/styled.ts
+++ b/src/paywall-previews/Preview7/styled.ts
@@ -36,7 +36,7 @@ export const StyledPreviewImage = styled(PreviewImage)<any>`
   ${({ isRestrictedAsset }) =>
     isRestrictedAsset &&
     css`
-      filter: brightness(0.2);
+      filter: brightness(0.3);
     `}
 `;
 

From 297bd925446438768b1d4602261642b2067217c9 Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Wed, 17 Mar 2021 11:38:57 +0100
Subject: [PATCH 027/157] :chore: rename drawer drawerIsOpen prop

---
 index.d.ts                               | 2 +-
 src/components/Drawer/Drawer.tsx         | 6 +++---
 src/components/Drawer/drawer.stories.mdx | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 85f190c68..410f94dd1 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -408,7 +408,7 @@ export declare const Dropdown: FunctionComponent<DropdownProps>;
 
 export interface DrawerProps {
   handleClose: () => void;
-  drawerIsOpen: boolean;
+  isOpen: boolean;
   width?: string;
 }
 
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 5b758132e..c82814d7f 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -3,12 +3,12 @@ import DrawerContainer from './DrawerContainer';
 
 interface Props {
   handleClose: () => void;
-  drawerIsOpen: boolean;
+  isOpen: boolean;
   width?: string;
 }
 
-const Drawer: React.FC<Props> = ({ children, handleClose, drawerIsOpen, width = '40%' }) => (
-  <DrawerContainer shouldShowDrawer={drawerIsOpen} closeDrawer={handleClose} width={width}>
+const Drawer: React.FC<Props> = ({ children, handleClose, isOpen, width = '40%' }) => (
+  <DrawerContainer shouldShowDrawer={isOpen} closeDrawer={handleClose} width={width}>
     {children}
   </DrawerContainer>
 );
diff --git a/src/components/Drawer/drawer.stories.mdx b/src/components/Drawer/drawer.stories.mdx
index 13550d85a..30e21a019 100644
--- a/src/components/Drawer/drawer.stories.mdx
+++ b/src/components/Drawer/drawer.stories.mdx
@@ -21,19 +21,19 @@ const Page = () => (
 <Preview withSource="open">
   <Story name="standard">
     { () => {
-        const [drawerIsOpen, setDrawerIsOpen] = useState(false);
+        const [isOpen, setisOpen] = useState(false);
         const handleToggleDrawer = () => {
-          setDrawerIsOpen(!drawerIsOpen);
+          setisOpen(!isOpen);
         };
         const handleClose = () => {
-          setDrawerIsOpen(false);
+          setisOpen(false);
         };
         return (
             <div>
               <button type="button" onClick={handleToggleDrawer}>
                 Open drawer
               </button> 
-              <Drawer drawerIsOpen={drawerIsOpen} handleClose={handleClose}> Hi there! </Drawer>
+              <Drawer isOpen={isOpen} handleClose={handleClose}> Hi there! </Drawer>
             </div>
         )
   }}

From 59da3484a4047f7d4763754d124e42fac903d515 Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Mon, 22 Mar 2021 15:16:56 +0100
Subject: [PATCH 028/157] :chore: remove display button for restricted asset on
 preview templates 3 and 5

---
 src/paywall-previews/Preview3/Preview3.tsx    | 13 +++++++--
 src/paywall-previews/Preview5/Preview5.tsx    | 29 +++++++++++--------
 .../shared/PreviewComponents.tsx              |  4 ++-
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index c67b22a19..c922eeb1b 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -9,7 +9,11 @@ import colors from '../../theme/colors';
 // Components
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
-import { RestrictedAssetContainer, StyledPaywallDescription } from '../shared/PreviewComponents';
+import {
+  RestrictedAssetContainer,
+  RestrictedAssetIcon,
+  StyledPaywallDescription,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledImageHolder,
@@ -73,7 +77,10 @@ const Preview3 = ({
       <StyledTextWrapper onClick={handleOpenModal}>
         <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
           {isRestrictedAsset ? (
-            <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
+            <RestrictedAssetContainer height="40%">
+              <RestrictedAssetIcon />
+              {premiumContentLabel}
+            </RestrictedAssetContainer>
           ) : (
             <PaywallDescriptionSpan>
               <GiCutDiamond /> {premiumContentLabel}
@@ -84,7 +91,7 @@ const Preview3 = ({
           <TitleBorder color={buttonBgColor}>
             <PreviewText value={previewTitle} textColor={colors.white} />
           </TitleBorder>
-          <StyledIcon color={buttonBgColor} />
+          {!isRestrictedAsset && <StyledIcon color={buttonBgColor} />}
         </TitleWrapper>
         <DescriptionWrapper>
           <PreviewText value={previewDescription} textColor={colors.white} />
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index 67117136f..eafa5274d 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -76,20 +76,25 @@ const Preview5 = ({
     >
       <Overlay />
 
-      <BuyButtonHolder>
-        <BuyButtonBorder>
-          <StyledBuyButton
-            buttonBgColor={buttonBgColor}
-            buttonTextColor={buttonTextColor}
-            onClick={handleOpenModal}
-          >
-            {previewButtonLabel}
-          </StyledBuyButton>
-        </BuyButtonBorder>
-      </BuyButtonHolder>
+      {!isRestrictedAsset && (
+        <BuyButtonHolder>
+          <BuyButtonBorder>
+            <StyledBuyButton
+              buttonBgColor={buttonBgColor}
+              buttonTextColor={buttonTextColor}
+              onClick={handleOpenModal}
+            >
+              {previewButtonLabel}
+            </StyledBuyButton>
+          </BuyButtonBorder>
+        </BuyButtonHolder>
+      )}
     </ImageWrapper>
     {isRestrictedAsset && (
-      <RestrictedAssetContainer>{premiumContentLabel}</RestrictedAssetContainer>
+      <RestrictedAssetContainer height="38%">
+        <RestrictedAssetIcon />
+        {premiumContentLabel}
+      </RestrictedAssetContainer>
     )}
     <ItemDetails height={height}>
       <StyledPaywallDescription
diff --git a/src/paywall-previews/shared/PreviewComponents.tsx b/src/paywall-previews/shared/PreviewComponents.tsx
index 5e0605843..ce549fd9c 100644
--- a/src/paywall-previews/shared/PreviewComponents.tsx
+++ b/src/paywall-previews/shared/PreviewComponents.tsx
@@ -176,9 +176,11 @@ export const RestrictedAssetIcon = styled(MdDoNotDisturbAlt)<{ size?: string }>`
   top: 25%;
   width: ${({ size }) => size || '8rem'};
   height: ${({ size }) => size || '8rem'};
+  margin-bottom: 1rem;
 `;
 interface RestrictedAssetContainerProps {
   fontSize?: string;
+  height?: string;
 }
 export const RestrictedAssetContainer = styled.div<RestrictedAssetContainerProps>`
   z-index: 100;
@@ -188,7 +190,7 @@ export const RestrictedAssetContainer = styled.div<RestrictedAssetContainerProps
   font-weight: bold;
   text-align: center;
   width: 100%;
-  top: 50%;
+  top: ${({ height }) => height || '50%'};
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;

From fd82d6ba57aed2cdc66fcad06f23171f43306187 Mon Sep 17 00:00:00 2001
From: Kristina Taneva <kristinataneva@pop-os.localdomain>
Date: Mon, 22 Mar 2021 15:46:20 +0100
Subject: [PATCH 029/157] :chore: update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1c50517a..d13c95e1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,12 @@
 # Change Log
 
 All notable changes to this project will be documented in this file.
+
+# [2.5.4] - 22-03-2021
+
+### Change
+
+- Add styling changes for asset restrictions in preview templates
 # [2.5.3] - 23-02-2021
 
 ### Change

From e0e1c7d64297ab538c5c8e6d45f0b9fe71aa47f2 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Wed, 24 Mar 2021 15:45:30 +0100
Subject: [PATCH 030/157] Changelog updated

---
 CHANGELOG.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d13c95e1d..4e175946f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,11 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
-# [2.5.4] - 22-03-2021
+# [2.5.5] - 22-03-2021
 
 ### Change
 
 - Add styling changes for asset restrictions in preview templates
+
+# [2.5.4] - 12-03-2021
+
+### Change
+
+- Add missing className for Switch component in order to externaly style it with styled-components
+
 # [2.5.3] - 23-02-2021
 
 ### Change

From 3bc6ef9a68e519110427f22dce06c95f8366dcea Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Wed, 24 Mar 2021 16:15:51 +0100
Subject: [PATCH 031/157] v2.5.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c26b371df..0b15bde2d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.3",
+  "version": "2.5.5",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From ae9e2352c0843527c917743b82acafd396ceda03 Mon Sep 17 00:00:00 2001
From: Vladimir <vladimir@inplayer.com>
Date: Fri, 9 Apr 2021 09:54:46 +0200
Subject: [PATCH 032/157] Changed width, height and padding-left of Checkbox
 component's top wrapper to be in `em` instead of `rem`

---
 CHANGELOG.md                               |  8 +++++++-
 src/components/Checkbox/CheckboxWrapper.ts | 14 +++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e175946f..3ea4a0ddd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.6] - 09-04-2021
+
+### Fixes
+
+- Changed width, height and padding-left of Checkbox component's top wrapper to be in `em` instead of `rem`
+
 # [2.5.5] - 22-03-2021
 
 ### Change
@@ -19,7 +25,7 @@ All notable changes to this project will be documented in this file.
 ### Change
 
 - Add missing className for Switch component in order to externaly style it with styled-components
-  
+
 ### Fixes
 
 - Daypicker moment type error
diff --git a/src/components/Checkbox/CheckboxWrapper.ts b/src/components/Checkbox/CheckboxWrapper.ts
index fd8cbf6d6..be2ac830a 100644
--- a/src/components/Checkbox/CheckboxWrapper.ts
+++ b/src/components/Checkbox/CheckboxWrapper.ts
@@ -10,7 +10,7 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
 
   > input + label {
     position: relative;
-    padding-left: 1.5rem;
+    padding-left: 1.5em;
     cursor: pointer;
 
     &::before {
@@ -18,8 +18,8 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
       position: absolute;
       left: 0;
       top: 0;
-      width: 1rem;
-      height: 1rem;
+      width: 1em;
+      height: 1em;
       border: 1px solid ${colors.gray};
       background: ${colors.white};
       border-radius: 2px;
@@ -44,8 +44,8 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
       border: 2px solid ${colors.skyBlue};
       border-top: none;
       border-right: none;
-      width: 0.5rem;
-      height: 0.25rem;
+      width: 0.5em;
+      height: 0.25em;
       opacity: 1;
       transform: scale(1) rotate(-45deg);
     }
@@ -56,8 +56,8 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
       border: 2px solid ${colors.white};
       border-top: none;
       border-right: none;
-      width: 0.5rem;
-      height: 0.25rem;
+      width: 0.5em;
+      height: 0.25em;
       opacity: 1;
       transform: scale(0);
     }

From 384f4e4d9836874ba3189dca81f50482e28d7cec Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Mon, 12 Apr 2021 09:21:43 +0200
Subject: [PATCH 033/157] CHANGELOG.md updated

---
 CHANGELOG.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ea4a0ddd..4c0c61692 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,10 +22,6 @@ All notable changes to this project will be documented in this file.
 
 # [2.5.3] - 23-02-2021
 
-### Change
-
-- Add missing className for Switch component in order to externaly style it with styled-components
-
 ### Fixes
 
 - Daypicker moment type error

From f1e5af5d803b5b5649cab640fbefd0aeb4a505d8 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Thu, 17 Jun 2021 17:46:44 +0200
Subject: [PATCH 034/157] Set new inplayer logo in preview 1 & change loader
 color

---
 src/components/Loader/Loader.tsx                  | 2 +-
 src/paywall-previews/Preview1/styled.ts           | 2 +-
 src/paywall-previews/shared/PreviewComponents.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index dac0cd1e8..e27c94c31 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -38,7 +38,7 @@ type Props = {
 const Loader = ({
   height = 100,
   width = 100,
-  color = `${colors.skyBlue}`,
+  color = `${colors.alizarin}`,
   lineWidth = 2,
   direction = 'right',
 }: Props) => (
diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index 0c9e2b1bd..d876861f1 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -92,7 +92,7 @@ export const InplayerWhiteLogo = styled.div`
   }
 
   a {
-    background: url('https://assets.inplayer.com/images/paywall/ip-logicon.svg') no-repeat center
+    background: url('https://assets.inplayer.com/images/inplayer_icon-fs.svg') no-repeat center
       center;
     height: 30px;
     width: 30px;
diff --git a/src/paywall-previews/shared/PreviewComponents.tsx b/src/paywall-previews/shared/PreviewComponents.tsx
index ce549fd9c..8d94e611b 100644
--- a/src/paywall-previews/shared/PreviewComponents.tsx
+++ b/src/paywall-previews/shared/PreviewComponents.tsx
@@ -1,5 +1,5 @@
 import { darken, transparentize } from 'polished';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { prop } from 'styled-tools';
 
 // utils

From 035f921be0ae60f3837635c18f7baeb40b5dc75a Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Thu, 17 Jun 2021 17:50:12 +0200
Subject: [PATCH 035/157] Changelog updated

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c0c61692..fbb6d1d28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.7] - 17-06-2021
+
+### Change
+
+- Changes connected with logo re-branding 
+
 # [2.5.6] - 09-04-2021
 
 ### Fixes

From 5492511aecc0d3ba3ed7467d2ac372f5d55affbc Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Thu, 17 Jun 2021 18:26:22 +0200
Subject: [PATCH 036/157] v2.5.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0b15bde2d..d76e9583c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.5",
+  "version": "2.5.7",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 19a856491f7e12556560f7344099673a4fff13bb Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 19 Aug 2021 09:46:26 +0200
Subject: [PATCH 037/157] return accordion panel's label when accordion panel
 is toggled

---
 index.d.ts                             |  2 +-
 src/components/Accordion/Accordion.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 3be7bb514..505cc1117 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -236,7 +236,7 @@ export interface AccordionProps {
   isExtendable?: boolean;
   width?: string;
   extendWidth?: string;
-  onActivePanelChange?: (index: number) => void;
+  onActivePanelChange?: (index: number, label: string) => void;
   shouldClose?: boolean;
   onRequestClose?: () => void;
 }
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index ac16b8015..3ab3b5bc9 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -21,7 +21,7 @@ type Props = {
   width?: string;
   extendWidth?: string;
   isExtendable?: boolean;
-  onActivePanelChange?: (index: number) => void;
+  onActivePanelChange?: (index: number, label: string) => void;
   shouldClose?: boolean;
   onRequestClose?: () => void;
 };
@@ -39,20 +39,20 @@ export const Accordion = ({
   const [activePanel, setActivePanel] = useState(-1);
   const [open, setOpen] = useState(false);
 
-  const openPanel = (panelIndex: number) => {
+  const openPanel = (panelIndex: number, label: string) => {
     if (panelIndex !== activePanel) {
       setActivePanel(panelIndex);
-      if (onActivePanelChange) onActivePanelChange(panelIndex);
+      if (onActivePanelChange) onActivePanelChange(panelIndex, label);
     }
   };
 
   const closePanel = (e?: SyntheticEvent) => {
     if (e) e.stopPropagation();
     setActivePanel(-1);
-    if (onActivePanelChange) onActivePanelChange(-1);
+    if (onActivePanelChange) onActivePanelChange(-1, '');
   };
 
-  const togglePanel = (panelIndex: number) => (e: any) => {
+  const togglePanel = (panelIndex: number, label: string) => (e: any) => {
     e.stopPropagation();
     if (activePanel !== -1) {
       if (shouldClose) {
@@ -61,7 +61,7 @@ export const Accordion = ({
         onRequestClose();
       }
     } else {
-      openPanel(panelIndex);
+      openPanel(panelIndex, label);
     }
   };
 
@@ -95,7 +95,7 @@ export const Accordion = ({
                 isOtherPanelActive={isOtherPanelActive}
                 contentHeight={contentHeight}
                 disabled={disabled}
-                togglePanel={togglePanel(index)}
+                togglePanel={togglePanel(index, label)}
               />
             </div>
           );

From 3261b64a33442eaa4f91ba6bf15d0fe6c40517f9 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 19 Aug 2021 09:50:55 +0200
Subject: [PATCH 038/157] update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbb6d1d28..b3f44bc20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.8] - 19-08-2021
+
+### Change
+
+- Return Accordion panel label when toggling it.
+
 # [2.5.7] - 17-06-2021
 
 ### Change

From b511b15d0c250716db22a515c583b48272a74954 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Thu, 23 Sep 2021 11:34:31 +0200
Subject: [PATCH 039/157] package.json updated

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index abf2bfe9d..842ca0545 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.2",
+  "version": "2.5.8",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 81b1ca579c2434a6cf29c08a98f16e53855af120 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Thu, 23 Sep 2021 14:19:36 +0200
Subject: [PATCH 040/157] Changelog updated

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 301ddcacf..737f65342 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 ### Added
 
 - Add another type of datepicker component with dropdown presets
+- Drawer component functionality and design
 
 # [2.5.8] - 19-08-2021
 

From 9597601c55fc46b061f65476aefc5f26606cc503 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Thu, 23 Sep 2021 14:51:58 +0200
Subject: [PATCH 041/157] v2.5.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 842ca0545..24a1eeec9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.8",
+  "version": "2.5.9",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From e1f038b4f197b8eee86bcc51e6ce4d95c9bcc997 Mon Sep 17 00:00:00 2001
From: Stojan Dimitrovski <stojan.dimitrovski@inplayer.com>
Date: Mon, 27 Sep 2021 12:08:21 +0200
Subject: [PATCH 042/157] Add basic analytics types and components (#1374)

---
 src/analytics/index.tsx                       | 75 +++++++++++++++++++
 src/components/Button/Button.tsx              |  3 +-
 src/components/Card/Card.tsx                  |  5 +-
 src/components/Checkbox/Checkbox.tsx          |  3 +-
 src/components/DatePicker/DatePicker.tsx      |  3 +-
 src/components/DayPicker/DayPicker.tsx        |  3 +-
 src/components/Drawer/Drawer.tsx              |  5 +-
 src/components/Dropdown/Dropdown.tsx          |  7 +-
 src/components/Grid/Cell.ts                   |  3 +-
 src/components/Grid/Container.ts              |  3 +-
 src/components/Input/Input.tsx                |  3 +-
 src/components/Label/Label.tsx                |  3 +-
 src/components/Loader/Loader.tsx              |  3 +-
 src/components/Modal/Modal.tsx                | 26 ++++---
 src/components/Note/Note.tsx                  |  5 +-
 src/components/Notification/Notification.tsx  |  3 +-
 src/components/Pagination/Pagination.tsx      |  3 +-
 src/components/Pagination/styled.ts           | 24 +++---
 src/components/PillLabel/PillLabel.ts         |  3 +-
 src/components/Progress/Progress.tsx          |  3 +-
 src/components/Radio/Radio.tsx                |  3 +-
 src/components/StepWizard/Nav.tsx             |  5 +-
 src/components/StepWizard/StepWizard.tsx      |  3 +-
 src/components/Switch/Switch.tsx              |  3 +-
 .../TabNavigation/TabNavigation.tsx           |  7 +-
 src/components/Table/Table.tsx                |  3 +-
 src/components/Tabs/{Tab.ts => Tab.tsx}       |  9 ++-
 src/components/Tabs/Tabs.tsx                  |  3 +-
 src/components/TextArea/TextArea.ts           |  3 +-
 src/components/Tooltip/Arrow.tsx              |  3 +-
 src/components/Tooltip/Bubble.ts              |  3 +-
 src/components/Tooltip/Tooltip.tsx            |  3 +-
 src/index.ts                                  |  3 +
 33 files changed, 177 insertions(+), 60 deletions(-)
 create mode 100644 src/analytics/index.tsx
 rename src/components/Tabs/{Tab.ts => Tab.tsx} (80%)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
new file mode 100644
index 000000000..f57c7a8b4
--- /dev/null
+++ b/src/analytics/index.tsx
@@ -0,0 +1,75 @@
+export type AnalyticsTag = string;
+
+/**
+ * Props present on various components which aid in the tracking of analytics events.
+ */
+export interface AnalyticsProps {
+  /** Unique identifier of the component within the logical page hierarchy. */
+  tag: AnalyticsTag;
+
+  /** Posiition of the component within a table-like component. */
+  position?: {
+    /** Unique ID of the row (usually what you would use as a key in react). */
+    id: string;
+
+    /** Row index. */
+    row?: number;
+
+    /** Column index or name. */
+    column?: number | string;
+  };
+}
+
+/** Receives tracking events and dispatches them to handlers. */
+export class AnalyticsTracker {}
+
+export type AnalyticsPageType = 'page' | 'modal' | 'tab';
+
+export interface AnalyticsPage {
+  tag: AnalyticsTag;
+  type: AnalyticsPageType;
+}
+
+export interface AnalyticsContextValue {
+  pages: AnalyticsPage[];
+  tracker: AnalyticsTracker;
+}
+
+export const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue = {
+  pages: [],
+  tracker: new AnalyticsTracker(),
+};
+
+/** React context you can use to access the current tracker and page hierarchy. */
+export const AnalyticsContext = React.createContext(ROOT_ANALYTICS_CONTEXT);
+
+export type AnalyticsPageProps = {
+  /** Tag of this page. */
+  tag: AnalyticsTag;
+
+  /** Type of this page. */
+  type: AnalyticsPageType;
+
+  /** Children in the page. */
+  children?: React.ReactNode;
+};
+
+export type AnalyticsComponentProps = {
+  children?: (context: AnalyticsContextValue) => React.ReactNode;
+};
+
+/** A component to wrap other components with to gain access to the AnalyticsContextValue. */
+export const AnalyticsComponent = ({ children }: AnalyticsComponentProps) => (
+  <AnalyticsContext.Consumer>{children}</AnalyticsContext.Consumer>
+);
+
+/** Registers a subpage in the analytics component hierarchy. */
+export const AnalyticsPage = ({ tag, type, children }: AnalyticsPageProps) => (
+  <AnalyticsContext.Consumer>
+    {({ pages, tracker }) => (
+      <AnalyticsContext.Provider value={{ pages: [...pages, { tag, type }], tracker }}>
+        {children}
+      </AnalyticsContext.Provider>
+    )}
+  </AnalyticsContext.Consumer>
+);
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b258c5d0c..3500e149d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes, ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import ButtonWrapper from './ButtonWrapper';
+import { AnalyticsProps } from '../../analytics';
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -17,7 +18,7 @@ export type Props = ButtonHTMLAttributes<HTMLButtonElement> &
     className?: string;
     fullWidth?: boolean;
     fullHeight?: boolean;
-  };
+  } & AnalyticsProps;
 
 const ContentHolder = styled.span`
   margin-top: 2px;
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index b4cbfda1d..780784f51 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -4,6 +4,7 @@ import { transparentize } from 'polished';
 import colors from '../../theme/colors';
 import Typography, { TypographyVariant } from '../Typography/Typography';
 import CardContent from './CardContent';
+import { AnalyticsProps } from '../../analytics';
 
 const CardWrapper = styled.div`
   display: flex;
@@ -32,12 +33,12 @@ const CardTitle = styled(Typography)`
   display: inline-block;
 `;
 
-interface Props {
+type Props = {
   title?: string;
   titleVariant?: TypographyVariant;
   className?: string;
   children: ReactChild;
-}
+} & AnalyticsProps;
 
 const Card = ({ title, titleVariant = 'h1', className = '', children }: Props) => (
   <CardWrapper className={className}>
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index f5171b587..2b4296ce0 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,6 +1,7 @@
 import React, { ChangeEvent, RefObject } from 'react';
 import Label from '../Label';
 import CheckboxWrapper from './CheckboxWrapper';
+import { AnalyticsProps } from '../../analytics';
 
 type Props = {
   label: string;
@@ -10,7 +11,7 @@ type Props = {
   onChange: (checked: boolean) => any;
   containerRef?: RefObject<HTMLDivElement> | null;
   disabled?: boolean;
-};
+} & AnalyticsProps;
 
 const Checkbox: React.FC<Props> = ({
   label,
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 26612dc6f..757a01199 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -10,6 +10,7 @@ import { Option } from '../Dropdown/Dropdown';
 import DatePickerWrapper from './DatePickerWrapper';
 import { PERIODS, INNERPERIODS } from './periods';
 import { Styled } from './styles';
+import { AnalyticsProps } from '../../analytics';
 import 'react-dates/initialize';
 
 const ContentHolder = styled.div<{ isDropdown?: boolean }>`
@@ -99,7 +100,7 @@ type Props = {
   showInnerPresets?: boolean;
   className?: string;
   showPresetsWithDropdown?: boolean;
-};
+} & AnalyticsProps;
 
 const DatePicker = ({
   activePeriodPreset = '',
diff --git a/src/components/DayPicker/DayPicker.tsx b/src/components/DayPicker/DayPicker.tsx
index 97bb60c24..40a23d3b2 100644
--- a/src/components/DayPicker/DayPicker.tsx
+++ b/src/components/DayPicker/DayPicker.tsx
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import DayPickerWrapper from './DayPickerWrapper';
 import Dropdown from '../Dropdown';
 import { getMonthOptions, getYearOptions } from '../../utils/helpers';
+import { AnalyticsProps } from '../../analytics';
 
 const CustomMonthContainer = styled.div`
   display: flex;
@@ -36,7 +37,7 @@ type Props = {
   placeholder?: string;
   onClose?: () => any;
   disablePastDays?: boolean;
-};
+} & AnalyticsProps;
 
 const DayPicker = ({
   isOutsideRange = () => false,
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index c82814d7f..af946e297 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import DrawerContainer from './DrawerContainer';
+import { AnalyticsProps } from '../../analytics';
 
-interface Props {
+type Props = {
   handleClose: () => void;
   isOpen: boolean;
   width?: string;
-}
+} & AnalyticsProps;
 
 const Drawer: React.FC<Props> = ({ children, handleClose, isOpen, width = '40%' }) => (
   <DrawerContainer shouldShowDrawer={isOpen} closeDrawer={handleClose} width={width}>
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 311a2960c..bcb3a3ec9 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,15 +1,16 @@
 import React, { SelectHTMLAttributes, ChangeEvent } from 'react';
 import DropdownContainer from './DropdownContainer';
+import { AnalyticsProps } from '../../analytics';
 
 export type Option = {
   value: string;
   displayName: string;
-};
+} & AnalyticsProps;
 
 type DefaultOption = {
   displayName: string;
   disabled?: boolean;
-};
+} & AnalyticsProps;
 
 type SelectHTMLProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'>;
 
@@ -22,7 +23,7 @@ type Props = SelectHTMLProps & {
   disabled?: boolean;
   defaultOption?: DefaultOption;
   className?: string;
-};
+} & AnalyticsProps;
 
 const Dropdown: React.FC<Props> = ({
   options,
diff --git a/src/components/Grid/Cell.ts b/src/components/Grid/Cell.ts
index 9386009da..c19b97c37 100644
--- a/src/components/Grid/Cell.ts
+++ b/src/components/Grid/Cell.ts
@@ -1,4 +1,5 @@
 import styled, { CSSProperties } from 'styled-components';
+import { AnalyticsProps } from '../../analytics';
 
 type CellProps = {
   width?: CSSProperties;
@@ -8,7 +9,7 @@ type CellProps = {
   center?: CSSProperties;
   area?: CSSProperties;
   middle?: CSSProperties;
-};
+} & AnalyticsProps;
 
 const Cell = styled.div<CellProps>`
   height: 100%;
diff --git a/src/components/Grid/Container.ts b/src/components/Grid/Container.ts
index c859eed59..ceb5ae08f 100644
--- a/src/components/Grid/Container.ts
+++ b/src/components/Grid/Container.ts
@@ -1,4 +1,5 @@
 import styled, { CSSProperties, CSSObject } from 'styled-components';
+import { AnalyticsProps } from '../../analytics';
 
 const autoRows = ({ minRowHeight = '20px' }) => `minmax(${minRowHeight}, auto)`;
 
@@ -18,7 +19,7 @@ type GridContainerProps = {
   areas?: any;
   justifyContent?: CSSProperties;
   alignContent?: CSSProperties;
-};
+} & AnalyticsProps;
 
 const GridContainer = styled.div<GridContainerProps>`
   display: grid;
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index be89ccec7..5c206df13 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { ifProp, switchProp } from 'styled-tools';
 import { MdSearch } from 'react-icons/md';
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 type Size = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -84,7 +85,7 @@ type Props = {
   sizeProp?: Size;
   icon?: ReactNode;
   className?: string;
-};
+} & AnalyticsProps;
 
 type RefType =
   | ((instance: HTMLInputElement | null) => void)
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 99ec86803..9275f8868 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { applyStyleModifiers } from 'styled-components-modifiers';
 import { fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge } from '../../modifiers';
+import { AnalyticsProps } from '../../analytics';
 
 const typographyModifiers = {
   fontSizeExtraSmall,
@@ -10,7 +11,7 @@ const typographyModifiers = {
   fontSizeLarge,
 };
 
-const Label = styled.label<{ disabled?: boolean }>`
+const Label = styled.label<{ disabled?: boolean } & AnalyticsProps>`
   font-size: ${({ theme }) => theme.font.sizes.medium};
   font-weight: ${({ theme }) => theme.font.weights.normal};
   color: ${({ theme }) => theme.palette.text.main};
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index e27c94c31..7aec8cd3c 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 const directions: Record<string, any> = {
   up: '16,0 32,32 0,32',
@@ -33,7 +34,7 @@ type Props = {
   color?: string;
   lineWidth?: number;
   direction?: string;
-};
+} & AnalyticsProps;
 
 const Loader = ({
   height = 100,
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index fae9f44b6..d885fdffb 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -6,6 +6,7 @@ import { transparentize } from 'polished';
 import colors from '../../theme/colors';
 import ModalHeader from './ModalHeader';
 import ModalContent from './ModalContent';
+import { AnalyticsProps, AnalyticsPage } from '../../analytics';
 
 interface ModalWrapperProps {
   isOpen: boolean;
@@ -40,9 +41,10 @@ type Props = {
   isOverflowVisible?: boolean;
   className?: string;
   children: ReactChild;
-};
+} & AnalyticsProps;
 
 const Modal = ({
+  tag,
   isOverflowVisible = false,
   isModalOpen,
   closeModal,
@@ -50,16 +52,18 @@ const Modal = ({
   title,
   className = '',
 }: Props) => (
-  <ModalWrapper
-    className={className}
-    isOpen={isModalOpen}
-    onClick={isModalOpen ? closeModal : undefined}
-  >
-    <ModalContainer isOverflowVisible={isOverflowVisible} onClick={(e) => e.stopPropagation()}>
-      <ModalHeader closeModal={closeModal}>{title}</ModalHeader>
-      <ModalContent>{children}</ModalContent>
-    </ModalContainer>
-  </ModalWrapper>
+  <AnalyticsPage tag={tag} type="modal">
+    <ModalWrapper
+      className={className}
+      isOpen={isModalOpen}
+      onClick={isModalOpen ? closeModal : undefined}
+    >
+      <ModalContainer isOverflowVisible={isOverflowVisible} onClick={(e) => e.stopPropagation()}>
+        <ModalHeader closeModal={closeModal}>{title}</ModalHeader>
+        <ModalContent>{children}</ModalContent>
+      </ModalContainer>
+    </ModalWrapper>
+  </AnalyticsPage>
 );
 
 export default Modal;
diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index 5a609a442..c676915a2 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -4,14 +4,15 @@ import { MdInfoOutline, MdWarning } from 'react-icons/md';
 import { IoIosCheckmarkCircle } from 'react-icons/io';
 
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 import NoteWrapper, { NoteType } from './NoteWrapper';
 
-interface Props {
+type Props = {
   title: string;
   text: string;
   type: NoteType;
-}
+} & AnalyticsProps;
 
 interface IconProps {
   color?: string;
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index 95888297b..94acec439 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import NotificationContainer, { CloseIcon } from './NotificationContainer';
+import { AnalyticsProps } from '../../analytics';
 
 export type NotificationVariant = 'success' | 'danger' | 'warning' | '';
 
@@ -10,7 +11,7 @@ type Props = {
   variant?: NotificationVariant;
   duration?: number;
   close?: () => void;
-};
+} & AnalyticsProps;
 
 const divs: Array<HTMLDivElement> = [];
 
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 89de7dd4d..0e9054e50 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { FaAngleDoubleLeft, FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import { PageBox, PaginationContainer } from './styled';
+import { AnalyticsProps } from '../../analytics';
 
 type PaginationProps = {
   onPageChange: (pageNumber: number) => void;
@@ -8,7 +9,7 @@ type PaginationProps = {
   startPage?: number;
   numberOfPagesDisplayed?: number;
   itemsPerPage?: number;
-};
+} & AnalyticsProps;
 
 // Kibana has limit of 10000 items
 const itemsLimit = 10000;
diff --git a/src/components/Pagination/styled.ts b/src/components/Pagination/styled.ts
index 37822dad5..8733ca2c0 100644
--- a/src/components/Pagination/styled.ts
+++ b/src/components/Pagination/styled.ts
@@ -30,18 +30,18 @@ const getBoxStyles = ({
     `;
   }
   return css`
-  :hover {
-    border: 1px solid ${colors.skyBlue};
-    ${ifProp(
-      'hideBorder',
-      css`
-        border: none;
-      `
-    )}
-    color: ${colors.skyBlue};
-    font-weight: bold;
-  }
-`;
+    :hover {
+      border: 1px solid ${colors.skyBlue};
+      ${ifProp(
+        'hideBorder',
+        css`
+          border: none;
+        `
+      )}
+      color: ${colors.skyBlue};
+      font-weight: bold;
+    }
+  `;
 };
 
 export const PageBox = styled.button`
diff --git a/src/components/PillLabel/PillLabel.ts b/src/components/PillLabel/PillLabel.ts
index 0c181eecb..a182472a3 100644
--- a/src/components/PillLabel/PillLabel.ts
+++ b/src/components/PillLabel/PillLabel.ts
@@ -3,6 +3,7 @@ import { applyStyleModifiers } from 'styled-components-modifiers';
 import { transparentize } from 'polished';
 import { switchProp } from 'styled-tools';
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 const modifiers = {
   primary: () => `
@@ -32,7 +33,7 @@ const modifiers = {
   `,
 };
 
-const PillLabel = styled.span<{ size?: string; modifiers?: Array<string> }>`
+const PillLabel = styled.span<{ size?: string; modifiers?: Array<string> } & AnalyticsProps>`
   display: inline-block;
   background: ${colors.white};
   color: ${({ theme }) => theme.palette.text.main};
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index 137b4d8ca..70f2c7b83 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Line, Circle } from 'rc-progress';
+import { AnalyticsProps } from '../../analytics';
 
 type ProgressType = 'circle' | 'line';
 
@@ -19,7 +20,7 @@ type RCProgressProps = {
   gapPosition?: 'top' | 'right' | 'bottom' | 'left';
 };
 
-type Props = Type & RCProgressProps;
+type Props = Type & RCProgressProps & AnalyticsProps;
 
 const Progress = ({ type, ...rest }: Props) =>
   type === 'circle' ? <Circle {...rest} /> : <Line {...rest} />;
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index ce9e46330..afb26a000 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent, InputHTMLAttributes } from 'react';
 import { StyledLabel, Root, Input, Fill } from './RadioWrapper';
+import { AnalyticsProps } from '../../analytics';
 
 type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
   label: string;
@@ -9,7 +10,7 @@ type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
   onChange: (e: ChangeEvent<HTMLInputElement>) => any;
   onBlur?: (e: any) => any;
   disabled?: boolean;
-};
+} & AnalyticsProps;
 
 const Radio = ({
   label,
diff --git a/src/components/StepWizard/Nav.tsx b/src/components/StepWizard/Nav.tsx
index 7ac8d6db4..ae071fa35 100644
--- a/src/components/StepWizard/Nav.tsx
+++ b/src/components/StepWizard/Nav.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 
+import { AnalyticsProps } from '../../analytics';
 import colors from '../../theme/colors';
 
 const StepNavigation = styled.div`
@@ -50,13 +51,13 @@ export type StepItem = {
   isDisabled: boolean;
   isCompleted: boolean;
   component: React.ReactChild;
-};
+} & AnalyticsProps;
 
 type Props = {
   steps: Array<StepItem>;
   activeStep: number;
   goToStep: (activeStep: number) => void;
-};
+} & AnalyticsProps;
 
 const Nav = ({ steps, goToStep, activeStep }: Props) => (
   <StepNavigation>
diff --git a/src/components/StepWizard/StepWizard.tsx b/src/components/StepWizard/StepWizard.tsx
index affbc074f..de89d6be6 100644
--- a/src/components/StepWizard/StepWizard.tsx
+++ b/src/components/StepWizard/StepWizard.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Nav, { StepItem } from './Nav';
 import Step from './Step';
+import { AnalyticsProps } from '../../analytics';
 
 type TransitionVariant = 'fadeInLeft' | 'fadeInRight' | 'fadeOutLeft' | 'fadeOutRight';
 
@@ -9,7 +10,7 @@ type StepWizardProps = {
   activeStep: number;
   onStepChange?: (activeStep: number) => void;
   transition?: TransitionVariant;
-};
+} & AnalyticsProps;
 
 const StepWizard = ({
   steps,
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 214deebeb..cfac531c6 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import colors from '../../theme/colors';
 import SwitchWrapper from './SwitchWrapper';
 import Label from '../Label';
+import { AnalyticsProps } from '../../analytics';
 
 type SwitchProps = {
   checked: boolean;
@@ -11,7 +12,7 @@ type SwitchProps = {
   label: string;
   onChange: (checked: boolean) => void;
   className?: string;
-};
+} & AnalyticsProps;
 
 const MarginLeftLabel = styled(Label)`
   margin-right: 0.5rem;
diff --git a/src/components/TabNavigation/TabNavigation.tsx b/src/components/TabNavigation/TabNavigation.tsx
index 301893685..7eedf77c3 100644
--- a/src/components/TabNavigation/TabNavigation.tsx
+++ b/src/components/TabNavigation/TabNavigation.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
+import { AnalyticsProps } from '../../analytics';
 
 const Tab = styled.a<{ active: boolean }>`
   height: 100%;
@@ -39,20 +40,20 @@ const TabContainer = styled.div`
 
 type NavigationTab = {
   title: string;
-};
+} & AnalyticsProps;
 
 export type Props = {
   tabs: Array<NavigationTab>;
   onTabClick: (index: number) => void;
   selectedTabIndex: number;
-};
+} & AnalyticsProps;
 
 const TabNavigation = ({ tabs, onTabClick, selectedTabIndex }: Props) => (
   <TabContainer>
     {tabs.map((tab, index) => (
       <Tab
-        id={tab.title.toLowerCase()}
         key={tab.title}
+        id={tab.title.toLowerCase()}
         onClick={() => onTabClick(index)}
         active={selectedTabIndex === index}
       >
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index e9e87caf8..7632f7c49 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -3,6 +3,7 @@ import React, { ReactNode, SyntheticEvent, Component } from 'react';
 import { CSSProperties } from 'styled-components';
 import Grid from '../Grid';
 import Loader from '../Loader';
+import { AnalyticsProps } from '../../analytics';
 import {
   ButtonTableRow,
   LoaderContainer,
@@ -69,7 +70,7 @@ type Props<T = Data> = {
   renderEmptyTable?: boolean;
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
-};
+} & AnalyticsProps;
 
 type State = {
   selected: {
diff --git a/src/components/Tabs/Tab.ts b/src/components/Tabs/Tab.tsx
similarity index 80%
rename from src/components/Tabs/Tab.ts
rename to src/components/Tabs/Tab.tsx
index 45949b145..d6c004655 100644
--- a/src/components/Tabs/Tab.ts
+++ b/src/components/Tabs/Tab.tsx
@@ -1,9 +1,10 @@
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 
+import { AnalyticsProps } from '../../analytics';
 import colors from '../../theme/colors';
 
-const Tab = styled.div<{ selected: boolean }>`
+const TabWrapper = styled.div<{ selected: boolean }>`
   margin: 0;
   padding: 0.5rem 0;
   display: flex;
@@ -42,4 +43,10 @@ const Tab = styled.div<{ selected: boolean }>`
   )};
 `;
 
+export type Props = {
+  selected: boolean;
+} & AnalyticsProps;
+
+const Tab = ({ tag, ...rest }: Props) => <TabWrapper {...rest} />
+
 export default Tab;
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 1b57ef57c..6ca163e3b 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, ReactElement } from 'react';
 import Tab from './Tab';
 import TabsWrapper from './TabsWrapper';
+import { AnalyticsProps } from '../../analytics';
 
 interface TabInfo {
   name: string;
@@ -16,7 +17,7 @@ type TabsProps = HTMLAttributes<HTMLDivElement> &
     tabs: Array<TabInfo>;
     selectedTabIndex: number;
     onTabClick: (index: number) => void;
-  };
+  } & AnalyticsProps;
 
 const Content = ({ icon = null, iconPosition = 'left', name }: ContentProps) =>
   iconPosition === 'right' ? (
diff --git a/src/components/TextArea/TextArea.ts b/src/components/TextArea/TextArea.ts
index cbc1e722b..2946afe71 100644
--- a/src/components/TextArea/TextArea.ts
+++ b/src/components/TextArea/TextArea.ts
@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 
+import { AnalyticsProps } from '../../analytics';
 import colors from '../../theme/colors';
 
-const TextArea = styled.textarea`
+const TextArea = styled.textarea<AnalyticsProps>`
   vertical-align: middle;
   box-sizing: border-box;
   overflow: hidden;
diff --git a/src/components/Tooltip/Arrow.tsx b/src/components/Tooltip/Arrow.tsx
index 093835c68..362b6b1b1 100644
--- a/src/components/Tooltip/Arrow.tsx
+++ b/src/components/Tooltip/Arrow.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { AnalyticsProps } from '../../analytics';
 
 type ArrowsProps = {
   width: number;
@@ -59,7 +60,7 @@ type Props = {
   border: string;
   placement: string;
   width: number;
-};
+} & AnalyticsProps;
 
 const Arrow = ({ background, border, placement, width }: Props) => {
   const Component = arrows[placement] || arrows.top;
diff --git a/src/components/Tooltip/Bubble.ts b/src/components/Tooltip/Bubble.ts
index 71618b688..132b851fb 100644
--- a/src/components/Tooltip/Bubble.ts
+++ b/src/components/Tooltip/Bubble.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 type BubbleProps = {
   background?: string;
@@ -7,7 +8,7 @@ type BubbleProps = {
   border?: string;
   padding?: number;
   fontSize?: string;
-};
+} & AnalyticsProps;
 
 const Bubble = styled.div<BubbleProps>`
   color: ${colors.white};
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 3b3f07dfe..1b9c76344 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import Arrow from './Arrow';
 import TooltipWrapper, { FadeEasing } from './TooltipWrapper';
 import Bubble from './Bubble';
+import { AnalyticsProps } from '../../analytics';
 
 export interface FlashTooltipRef {
   flashTooltip: () => Promise<void>;
@@ -38,7 +39,7 @@ export type TooltipProps = {
   className?: string;
   children?: ReactChild | ReactNode | null;
   ref: Ref<FlashTooltipRef>;
-};
+} & AnalyticsProps;
 
 const Container = styled.div`
   position: relative;
diff --git a/src/index.ts b/src/index.ts
index 71490e911..3e70d4baa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -42,3 +42,6 @@ export { default as ThemeWrapper } from './theme/ThemeWrapper';
 
 // colors
 export { default as Colors } from './theme/colors';
+
+// analytics
+export * from './analytics';

From 632b386530284e958ff54594165090c59de9ef5b Mon Sep 17 00:00:00 2001
From: Stojan Dimitrovski <stojan.dimitrovski@inplayer.com>
Date: Mon, 27 Sep 2021 13:52:55 +0200
Subject: [PATCH 043/157] Add optional analytics tag

---
 src/analytics/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index f57c7a8b4..5b68be75e 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -5,7 +5,7 @@ export type AnalyticsTag = string;
  */
 export interface AnalyticsProps {
   /** Unique identifier of the component within the logical page hierarchy. */
-  tag: AnalyticsTag;
+  tag?: AnalyticsTag;
 
   /** Posiition of the component within a table-like component. */
   position?: {

From 76971030a42d22856391f718172d7251277160ce Mon Sep 17 00:00:00 2001
From: Stojan Dimitrovski <stojan.dimitrovski@inplayer.com>
Date: Mon, 27 Sep 2021 13:56:01 +0200
Subject: [PATCH 044/157] Add info to the changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 737f65342..5ce8d67cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.10] - 27-09-2021
+
+### Added
+
+- Analytics tracking props for all components.
+
 # [2.5.9] - 23-09-2021
 
 ### Added

From 2fa9b02329af5426d335bf3b7aa294f320a73858 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Mon, 27 Sep 2021 15:12:16 +0200
Subject: [PATCH 045/157] v2.5.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 24a1eeec9..eba53af7c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.9",
+  "version": "2.5.10",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 7a636081667e739d45494019adb2225bc90c69fd Mon Sep 17 00:00:00 2001
From: Stojan Dimitrovski <stojan.dimitrovski@inplayer.com>
Date: Tue, 28 Sep 2021 14:54:01 +0200
Subject: [PATCH 046/157] Add forgotten React import (#1376)

* Add forgotten React import

* Add info to changelog
---
 CHANGELOG.md            | 6 ++++++
 src/analytics/index.tsx | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ce8d67cf..bd7393670 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.11] - 28-09-2021
+
+## Added
+
+- Analytics tracking adds forgotten import for React.
+
 # [2.5.10] - 27-09-2021
 
 ### Added
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index 5b68be75e..e0e909642 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+
 export type AnalyticsTag = string;
 
 /**

From 115b05810f2866a619692cc9947110e3401ae54f Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Tue, 28 Sep 2021 15:08:03 +0200
Subject: [PATCH 047/157] v2.5.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eba53af7c..c09804fb4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.10",
+  "version": "2.5.11",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 587ec52aadd07dcae9cee2d76346b6cefe946555 Mon Sep 17 00:00:00 2001
From: Stojan Dimitrovski <stojan.dimitrovski@inplayer.com>
Date: Wed, 29 Sep 2021 11:14:47 +0200
Subject: [PATCH 048/157] Add explicit exports from analytics (#1377)

* Add explicit exports from analytics

* Update changelog

* Add different style of export
---
 CHANGELOG.md            |  6 ++++++
 src/analytics/index.tsx |  2 +-
 src/index.ts            | 15 ++++++++++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd7393670..20fa5aacb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.12] - 28-09-2021
+
+## Added
+
+- Explicit exports for components, types and interfaces from `src/analytics`.
+
 # [2.5.11] - 28-09-2021
 
 ## Added
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index e0e909642..cab8282ce 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export type AnalyticsTag = string;
 
diff --git a/src/index.ts b/src/index.ts
index 3e70d4baa..3f094df75 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,4 +44,17 @@ export { default as ThemeWrapper } from './theme/ThemeWrapper';
 export { default as Colors } from './theme/colors';
 
 // analytics
-export * from './analytics';
+export type {
+  AnalyticsProps,
+  AnalyticsPageProps,
+  AnalyticsPageType,
+  AnalyticsTag,
+  AnalyticsContextValue
+} from './analytics';
+
+export {
+  AnalyticsPage,
+  AnalyticsContext,
+  AnalyticsTracker,
+  AnalyticsComponent
+} from './analytics';

From 33d5632dde59dc1e11ed97dd4bf24c49a792ac7c Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Wed, 29 Sep 2021 11:24:49 +0200
Subject: [PATCH 049/157] v2.5.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c09804fb4..a4386b217 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.11",
+  "version": "2.5.12",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From ad80f3737c8591668c484528a6adeafa1e2416b8 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 14:50:08 +0200
Subject: [PATCH 050/157] add analytics props to components in index.d.ts file

---
 index.d.ts | 76 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index ebf0c39d1..a404bfb3b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -19,7 +19,23 @@ import { FocusedInputShape } from 'react-dates';
 
 export { FocusedInputShape } from 'react-dates';
 
-export interface ContainerProps {
+interface AnalyticsProps {
+  /** Unique identifier of the component within the logical page hierarchy. */
+  tag?: AnalyticsTag;
+
+  /** Posiition of the component within a table-like component. */
+  position?: {
+    /** Unique ID of the row (usually what you would use as a key in react). */
+    id: string;
+
+    /** Row index. */
+    row?: number;
+
+    /** Column index or name. */
+    column?: number | string;
+  };
+}
+export interface ContainerProps extends AnalyticsProps{
   className?: string;
   columns?: number | string;
   gap?: string;
@@ -34,7 +50,7 @@ export interface ContainerProps {
   alignContent?: string;
 }
 
-export interface CellProps {
+export interface CellProps extends AnalyticsProps{
   className?: string;
   width?: number;
   height?: number;
@@ -52,7 +68,7 @@ interface IGrid {
 
 export declare const Grid: IGrid;
 
-export interface CheckboxProps {
+export interface CheckboxProps extends AnalyticsProps{
   label: string;
   id: string;
   name?: string;
@@ -74,7 +90,7 @@ export interface MenuItem {
   smallSize?: boolean;
 }
 
-export interface ModalProps {
+export interface ModalProps extends AnalyticsProps{
   isModalOpen: boolean;
   closeModal: () => any;
   children: ReactNode;
@@ -87,7 +103,7 @@ export declare const Modal: FunctionComponent<ModalProps>;
 
 export type NoteType = 'informative' | 'success' | 'warning' | 'danger';
 
-export interface NoteProps {
+export interface NoteProps extends AnalyticsProps{
   title: string;
   text: string;
   type: NoteType;
@@ -95,7 +111,7 @@ export interface NoteProps {
 
 export declare const Note: FunctionComponent<NoteProps>;
 
-export interface RadioProps {
+export interface RadioProps extends AnalyticsProps{
   label: string;
   id: string;
   name?: string;
@@ -154,7 +170,7 @@ export interface TableButtonProps {
   type: string;
 };
 
-export interface TableProps<TableData extends TableRowData = TableRowData> {
+export interface TableProps<TableData extends TableRowData = TableRowData> extends AnalyticsProps{
   columns: Array<TableColumn<TableData>>;
   data: Array<TableData>;
   showLoader?: boolean;
@@ -184,7 +200,7 @@ export declare class Table<TableData extends TableRowData> extends Component<
   renderColumns: (data: Array<TableColumn<TableData>>) => ReactNodeArray;
   renderRows: (data: Array<TableData>) => ReactNodeArray;
 }
-interface NavigationTab {
+interface NavigationTab extends AnalyticsProps{
   title: string;
 }
 
@@ -194,7 +210,7 @@ export interface TabContentProps {
   iconModifiers?: Array<string>;
 }
 
-export interface TabNavigationProps<T> extends DivHTMLAttributes<HTMLDivElement>, TabContentProps {
+export interface TabNavigationProps<T> extends DivHTMLAttributes<HTMLDivElement>, TabContentProps, AnalyticsProps {
   tabs: Array<NavigationTab>;
   onTabClick: (index: number) => any;
   selectedTabIndex: number;
@@ -208,7 +224,7 @@ interface TabInfo {
   name: string;
 }
 
-interface TabsProps {
+interface TabsProps extends AnalyticsProps{
   tabs: Array<TabInfo>;
   selectedTabIndex: number;
   onTabClick: (index: number) => void;
@@ -271,7 +287,7 @@ export type ButtonModifier =
 
 export interface ButtonProps<T>
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonContentProps {
+  ButtonContentProps, AnalyticsProps {
   buttonModifiers?: Array<ButtonModifier>;
   size?: ButtonSize;
   style?: CSSProperties;
@@ -283,7 +299,7 @@ export interface ButtonProps<T>
 
 export declare class Button<T = {}> extends Component<T & ButtonProps<T>> {}
 
-export interface CardProps {
+export interface CardProps extends AnalyticsProps{
   title?: string;
   titleVariant?: string;
   className?: string;
@@ -301,7 +317,7 @@ export type DayPicker$OnDateChange = (values: DayPicker$OnDateChange$Arguments)
 
 export type DayPicker$OnFocusChange = (focusedInput: boolean) => any;
 
-export interface DayPickerProps {
+export interface DayPickerProps extends AnalyticsProps{
   isOutsideRange?: (day: number) => any;
   onDateChange: (date: Moment) => any;
   onFocusChange: (focused: any) => any;
@@ -327,7 +343,7 @@ export type DatePicker$OnDateChange = (values: DatePicker$OnDateChange$Arguments
 
 export type DatePicker$OnFocusChange = (focusedInput: FocusedInputShape | null) => any;
 
-export interface DatePickerProps {
+export interface DatePickerProps extends AnalyticsProps {
   startDate: Moment;
   endDate?: Moment;
   startDateId?: string;
@@ -377,12 +393,12 @@ export declare class DatePicker extends Component<DatePickerProps, DatePickerSta
   renderDatePresets: () => ReactNode;
 }
 
-export interface Option {
+export interface Option extends AnalyticsProps{
   value: string;
   displayName: string;
 }
 
-export interface DefaultOption {
+export interface DefaultOption extends AnalyticsProps{
   displayName: string;
   disabled?: boolean;
 }
@@ -393,7 +409,7 @@ export type DropdownModifier =
   | 'fontSizeMedium'
   | 'fontSizeLarge';
 
-export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement> {
+export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement>, AnalyticsProps {
   value: string;
   onChange?: (value: string) => any;
   color?: string;
@@ -407,7 +423,7 @@ export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement> {
 
 export declare const Dropdown: FunctionComponent<DropdownProps>;
 
-export interface DrawerProps {
+export interface DrawerProps extends AnalyticsProps{
   handleClose: () => void;
   isOpen: boolean;
   width?: string;
@@ -422,14 +438,14 @@ export type LabelModifier =
   | 'fontSizeMedium'
   | 'fontSizeLarge';
 
-export interface LabelProps {
+export interface LabelProps extends AnalyticsProps{
   disabled?: boolean;
   modifiers?: Array<LabelModifier>;
 }
 
 export declare const Label: StyledComponent<'label', Theme, LabelProps>;
 
-export interface LoaderProps {
+export interface LoaderProps extends AnalyticsProps{
   height?: number;
   width?: number;
   color?: string;
@@ -441,7 +457,7 @@ export declare const Loader: StyledComponent<'div', Theme, LoaderProps>;
 
 export type NotificationVariant = 'success' | 'danger' | 'warning';
 
-interface NotificationProps {
+interface NotificationProps extends AnalyticsProps{
   title: string;
   content: string;
   variant?: NotificationVariant;
@@ -459,7 +475,7 @@ interface INotification extends FunctionComponent<NotificationProps> {
 
 export declare const Notification: INotification;
 
-export interface PaginationProps {
+export interface PaginationProps extends AnalyticsProps{
   onPageChange: (pageNumber: number) => any;
   totalItems: number;
   startPage?: number;
@@ -473,7 +489,7 @@ export type PillLabelModifier = 'primary' | 'info' | 'success' | 'danger' | 'war
 
 export type PillLabelSize = 'xs' | 'sm' | 'md' | 'lg';
 
-interface PillLabelProps {
+interface PillLabelProps extends AnalyticsProps{
   modifiers?: Array<PillLabelModifier>;
   size?: PillLabelSize;
 }
@@ -482,7 +498,7 @@ export declare const PillLabel: StyledComponent<'span', Theme, PillLabelProps>;
 
 export type ProgressType = 'circle' | 'line';
 
-export interface ProgressProps {
+export interface ProgressProps extends AnalyticsProps{
   type?: ProgressType;
   strokeWidth?: number;
   strokeColor?: string;
@@ -499,7 +515,7 @@ export interface ProgressProps {
 
 export declare const Progress: FunctionComponent<ProgressProps>;
 
-export interface SwitchProps {
+export interface SwitchProps extends AnalyticsProps{
   checked: boolean;
   disabled?: boolean;
   id: string;
@@ -513,7 +529,7 @@ export declare const TextArea: StyledComponent<'input', Theme>;
 
 export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
 
-export interface InputProps extends AllHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends AllHTMLAttributes<HTMLInputElement>, AnalyticsProps {
   ref?: Ref<HTMLInputElement>;
   size?: InputSize;
   style?: CSSProperties;
@@ -539,7 +555,7 @@ export interface TypographyProps {
 
 export declare const Typography: FunctionComponent<TypographyProps>;
 
-export interface Theme {
+export interface Theme extends AnalyticsProps{
   palette: {
     primary: {
       main: string;
@@ -668,7 +684,7 @@ export type FadeEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-o
 
 export type TooltipBehavior = 'hover' | 'click' | 'ref';
 
-export interface TooltipProps {
+export interface TooltipProps extends AnalyticsProps{
   behavior?: TooltipBehavior;
   durationOnClick?: number;
   arrowWidth?: number;
@@ -703,13 +719,13 @@ export declare class Tooltip extends Component<TooltipProps, TooltipState> {
 
 type TransitionVariant = 'fadeInLeft' | 'fadeInRight' | 'fadeOutLeft' | 'fadeOutRight';
 
-interface Step {
+interface Step extends AnalyticsProps{
   isDisabled: boolean;
   isCompleted: boolean;
   component: ReactNode;
 }
 
-interface StepWizardProps {
+interface StepWizardProps extends AnalyticsProps{
   steps: Array<Step>;
   activeStep: number;
   className?: string;

From 270691ba1c7c0b8b6022fa390da5c1358e254b47 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 14:54:54 +0200
Subject: [PATCH 051/157] add AnalyticsTag type

---
 index.d.ts   | 5 +++++
 src/index.ts | 9 ++-------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index a404bfb3b..f1ee2ee41 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -19,6 +19,11 @@ import { FocusedInputShape } from 'react-dates';
 
 export { FocusedInputShape } from 'react-dates';
 
+export type AnalyticsTag = string;
+
+/**
+ * Props present on various components which aid in the tracking of analytics events.
+ */
 interface AnalyticsProps {
   /** Unique identifier of the component within the logical page hierarchy. */
   tag?: AnalyticsTag;
diff --git a/src/index.ts b/src/index.ts
index 3f094df75..b0ef7c8fd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,12 +49,7 @@ export type {
   AnalyticsPageProps,
   AnalyticsPageType,
   AnalyticsTag,
-  AnalyticsContextValue
+  AnalyticsContextValue,
 } from './analytics';
 
-export {
-  AnalyticsPage,
-  AnalyticsContext,
-  AnalyticsTracker,
-  AnalyticsComponent
-} from './analytics';
+export { AnalyticsPage, AnalyticsContext, AnalyticsTracker, AnalyticsComponent } from './analytics';

From 90362915890e600abbd1e24d475ead5d57a73ccf Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 15:05:44 +0200
Subject: [PATCH 052/157] update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20fa5aacb..2c051cbcd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.13] - 05-10-2021
+
+## Added
+
+- AnalyticsProps type to the components in index.d.ts file.
+
 # [2.5.12] - 28-09-2021
 
 ## Added

From 86cf9967b352103583dc0769f24e38a84ee95e07 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 16:19:53 +0200
Subject: [PATCH 053/157] export interface

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index f1ee2ee41..8ec312ed5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -24,7 +24,7 @@ export type AnalyticsTag = string;
 /**
  * Props present on various components which aid in the tracking of analytics events.
  */
-interface AnalyticsProps {
+export interface AnalyticsProps {
   /** Unique identifier of the component within the logical page hierarchy. */
   tag?: AnalyticsTag;
 

From 30760158d5db118603b306bb176a73012e4e5563 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 16:19:53 +0200
Subject: [PATCH 054/157] export interface

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index f1ee2ee41..8ec312ed5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -24,7 +24,7 @@ export type AnalyticsTag = string;
 /**
  * Props present on various components which aid in the tracking of analytics events.
  */
-interface AnalyticsProps {
+export interface AnalyticsProps {
   /** Unique identifier of the component within the logical page hierarchy. */
   tag?: AnalyticsTag;
 

From 9d7d285ecfd4043f00f99e15c196cdfa926e9607 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 17:48:39 +0200
Subject: [PATCH 055/157] update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 842ca0545..a4386b217 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.8",
+  "version": "2.5.12",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 98f46975ad9ce9b223af0517f1c733e8ab2bea6d Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 17:52:32 +0200
Subject: [PATCH 056/157] Revert "update version"

This reverts commit 9d7d285ecfd4043f00f99e15c196cdfa926e9607.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a4386b217..842ca0545 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.12",
+  "version": "2.5.8",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From c04f1f6f65548e698539d4b6210e9f5e1ab22223 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 17:53:15 +0200
Subject: [PATCH 057/157] update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 842ca0545..a4386b217 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.8",
+  "version": "2.5.12",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 772aeee92421ef5322bcea522307fa0f03e6c676 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 5 Oct 2021 18:04:40 +0200
Subject: [PATCH 058/157] v2.5.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a4386b217..d58dcc498 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.12",
+  "version": "2.5.13",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 7d91ccdbadc66c76ab1142998f9259e37caebe6d Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 6 Oct 2021 15:14:11 +0200
Subject: [PATCH 059/157] add tagging on pagination component for user tracking

---
 src/components/Pagination/Pagination.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 0e9054e50..976d72cf5 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -122,10 +122,20 @@ const Pagination = ({
 
   return (
     <PaginationContainer>
-      <PageBox type="button" disabled={activePage === 1} onClick={goToStart}>
+      <PageBox
+        tag="button_page_first"
+        type="button"
+        disabled={activePage === 1}
+        onClick={goToStart}
+      >
         <FaAngleDoubleLeft />
       </PageBox>
-      <PageBox type="button" disabled={activePage === 1} onClick={onPageClick(activePage - 1)}>
+      <PageBox
+        tag="button_page_previous"
+        type="button"
+        disabled={activePage === 1}
+        onClick={onPageClick(activePage - 1)}
+      >
         <FaAngleLeft />
       </PageBox>
       {!visiblePages.some((index) => index === 1) && (
@@ -135,6 +145,7 @@ const Pagination = ({
       )}
       {visiblePages.map((index) => (
         <PageBox
+          tag={`button_page_${activePage}`}
           type="button"
           selected={activePage === index}
           key={index}
@@ -149,13 +160,19 @@ const Pagination = ({
         </PageBox>
       )}
       <PageBox
+        tag="button_page_next"
         type="button"
         disabled={activePage === totalPages}
         onClick={onPageClick(activePage + 1)}
       >
         <FaAngleRight />
       </PageBox>
-      <PageBox type="button" disabled={activePage === totalPages} onClick={goToEnd}>
+      <PageBox
+        tag="button_page_last"
+        type="button"
+        disabled={activePage === totalPages}
+        onClick={goToEnd}
+      >
         <FaAngleDoubleRight />
       </PageBox>
     </PaginationContainer>

From 27f9cd071973076c59d92400681908a978ba5a4d Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 6 Oct 2021 15:14:23 +0200
Subject: [PATCH 060/157] add type

---
 src/components/Pagination/styled.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Pagination/styled.ts b/src/components/Pagination/styled.ts
index 8733ca2c0..b1e3d3ac4 100644
--- a/src/components/Pagination/styled.ts
+++ b/src/components/Pagination/styled.ts
@@ -1,20 +1,20 @@
+import { AnalyticsProps } from 'analytics';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import colors from '../../theme/colors';
 
+type BoxStyles = {
+  disabled?: boolean;
+  selected?: boolean;
+  hideBorder?: boolean;
+};
+
 export const PaginationContainer = styled.div`
   display: flex;
   justify-content: center;
 `;
 
-const getBoxStyles = ({
-  disabled = false,
-  selected = false,
-}: {
-  disabled?: boolean;
-  selected?: boolean;
-  hideBorder?: boolean;
-}) => {
+const getBoxStyles = ({ disabled = false, selected = false }: BoxStyles) => {
   if (disabled) {
     return css`
       cursor: not-allowed;
@@ -44,7 +44,7 @@ const getBoxStyles = ({
   `;
 };
 
-export const PageBox = styled.button`
+export const PageBox = styled.button<AnalyticsProps & BoxStyles>`
   width: fit-content;
   min-width: 2rem;
   height: 2rem;
@@ -52,7 +52,7 @@ export const PageBox = styled.button`
   margin: 0 0.2rem;
   text-align: center;
   border: 1px solid ${colors.gray};
-  color: ${({ theme }) => theme.palette.text.main}
+  color: ${({ theme }) => theme.palette.text.main};
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: ${({ theme }) => theme.palette.background.main};

From f975f4e32d14be6fc0b15a143cb27d39c01a9cf0 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 6 Oct 2021 16:35:43 +0200
Subject: [PATCH 061/157] add tagging on tabnavigation component

---
 src/components/TabNavigation/TabNavigation.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/TabNavigation/TabNavigation.tsx b/src/components/TabNavigation/TabNavigation.tsx
index 7eedf77c3..92557a4d9 100644
--- a/src/components/TabNavigation/TabNavigation.tsx
+++ b/src/components/TabNavigation/TabNavigation.tsx
@@ -3,7 +3,11 @@ import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { AnalyticsProps } from '../../analytics';
 
-const Tab = styled.a<{ active: boolean }>`
+type TabProps = {
+  active: boolean;
+} & AnalyticsProps;
+
+const Tab = styled.a<TabProps>`
   height: 100%;
   display: flex;
   align-items: center;
@@ -40,6 +44,7 @@ const TabContainer = styled.div`
 
 type NavigationTab = {
   title: string;
+  subTag?: string;
 } & AnalyticsProps;
 
 export type Props = {
@@ -56,6 +61,7 @@ const TabNavigation = ({ tabs, onTabClick, selectedTabIndex }: Props) => (
         id={tab.title.toLowerCase()}
         onClick={() => onTabClick(index)}
         active={selectedTabIndex === index}
+        tag={tab.subTag || tab.tag}
       >
         {tab.title}
       </Tab>

From a1a0aa41e8ae4db6053d7486e56974bb2954e99a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 6 Oct 2021 16:58:30 +0200
Subject: [PATCH 062/157] fix pagination index

---
 src/components/Pagination/Pagination.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 976d72cf5..07c9c62a2 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -145,7 +145,7 @@ const Pagination = ({
       )}
       {visiblePages.map((index) => (
         <PageBox
-          tag={`button_page_${activePage}`}
+          tag={`button_page_${index}`}
           type="button"
           selected={activePage === index}
           key={index}

From 1ded85d58a26c4056744b6b93ca69aa98702b469 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 18 Oct 2021 16:07:46 +0200
Subject: [PATCH 063/157] add tagging options in accordion

---
 index.d.ts                                  | 2 +-
 src/components/Accordion/Accordion.tsx      | 7 ++++---
 src/components/Accordion/AccordionPanel.tsx | 7 +++++--
 src/components/Accordion/panels.tsx         | 3 +++
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 8ec312ed5..e3fddba35 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -243,7 +243,7 @@ export interface ActionButtonRenderProps {
   closeAccordion: (e?: SyntheticEvent<*>) => void;
 }
 
-export interface AccordionPanel {
+export interface AccordionPanel extends AnalyticsProps{
   label: string;
   icon?: ReactNode;
   iconTooltip?: TooltipProps;
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 3ab3b5bc9..417ed243e 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -5,6 +5,7 @@ import Arrow from './Arrow';
 import { TooltipProps } from '../Tooltip/Tooltip';
 import { AccordionWrapper } from './styled';
 import AccordionPanel from './AccordionPanel';
+import { AnalyticsProps } from '../../..';
 
 // Types
 type Panel = {
@@ -13,7 +14,7 @@ type Panel = {
   iconTooltip?: TooltipProps;
   renderContent: () => any;
   disabled?: boolean;
-};
+} & AnalyticsProps;
 
 type Props = {
   panels: Array<Panel>;
@@ -78,10 +79,9 @@ export const Accordion = ({
     >
       <div>
         {panels.map((panel, index) => {
-          const { icon, iconTooltip, label, renderContent, disabled = false } = panel;
+          const { icon, iconTooltip, label, renderContent, disabled = false, tag = '' } = panel;
           const isActive = activePanel === index;
           const isOtherPanelActive = !isActive && activePanel !== -1;
-
           return (
             <div key={index}>
               <AccordionPanel
@@ -96,6 +96,7 @@ export const Accordion = ({
                 contentHeight={contentHeight}
                 disabled={disabled}
                 togglePanel={togglePanel(index, label)}
+                tag={tag}
               />
             </div>
           );
diff --git a/src/components/Accordion/AccordionPanel.tsx b/src/components/Accordion/AccordionPanel.tsx
index e663d8538..1ba4a879a 100644
--- a/src/components/Accordion/AccordionPanel.tsx
+++ b/src/components/Accordion/AccordionPanel.tsx
@@ -7,6 +7,7 @@ import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
 import colors from '../../theme/colors';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 import Typography from '../Typography';
+import { AnalyticsProps } from '../../..';
 
 // Types
 type AccordionPanelContainerProps = {
@@ -18,7 +19,7 @@ type AccordionPanelHeaderProps = {
   isActive: boolean;
   disabled: boolean;
   onClick: any;
-};
+} & AnalyticsProps;
 
 type AccordionTitleProps = {
   isActive: boolean;
@@ -124,7 +125,7 @@ type Props = {
   renderContent: (actions: { closePanel: (e?: SyntheticEvent) => void }) => any;
   closePanel: (e?: SyntheticEvent) => void;
   disabled: boolean;
-};
+} & AnalyticsProps;
 
 const AccordionPanel = ({
   label,
@@ -137,12 +138,14 @@ const AccordionPanel = ({
   disabled,
   togglePanel,
   closePanel,
+  tag,
 }: Props) => (
   <>
     <AccordionPanelHeader
       disabled={disabled}
       onClick={!disabled ? togglePanel : null}
       isActive={isActive}
+      tag={tag}
     >
       <AccordionTitle variant="h6" isActive={isActive} disabled={disabled}>
         {label}
diff --git a/src/components/Accordion/panels.tsx b/src/components/Accordion/panels.tsx
index 79449425c..40e32ff86 100644
--- a/src/components/Accordion/panels.tsx
+++ b/src/components/Accordion/panels.tsx
@@ -16,6 +16,7 @@ export const panels = [
         <h1>Long Content for the accordion1</h1>
       </div>
     ),
+    tag: 'tag1',
   },
   {
     label: 'Disabled Accordion',
@@ -31,6 +32,7 @@ export const panels = [
       </div>
     ),
     disabled: true,
+    tag: 'tag2',
   },
   {
     label: 'Accordion3',
@@ -45,5 +47,6 @@ export const panels = [
         <h1>Long Content for the accordion3</h1>
       </div>
     ),
+    tag: 'tag3',
   },
 ];

From c9f3b3f4850265d58b35221da2ff9585eb379cbf Mon Sep 17 00:00:00 2001
From: Stojan Dimitrovski <stojan.dimitrovski@inplayer.com>
Date: Mon, 18 Oct 2021 16:21:31 +0200
Subject: [PATCH 064/157] Add click tracker for Button

---
 src/analytics/index.tsx          | 18 ++++++++++++-
 src/components/Button/Button.tsx | 46 +++++++++++++++++++++++---------
 src/components/Tabs/Tab.tsx      |  2 +-
 3 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index cab8282ce..f9529f9c7 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -23,7 +23,23 @@ export interface AnalyticsProps {
 }
 
 /** Receives tracking events and dispatches them to handlers. */
-export class AnalyticsTracker {}
+export class AnalyticsTracker {
+  track = (event: {
+    event: 'click';
+    type: 'button';
+    tag: AnalyticsTag;
+    pages: AnalyticsPage[];
+  }) => {
+    const url = new URL('https://staging-v2.inplayer.com/analytics/track');
+
+    url.append('event', event.event);
+    url.append('type', event.type);
+    url.append('tag', event.tag);
+    url.append('pages', event.pages.map((page) => `${page.type}:${page.tag}`).join('/'));
+
+    fetch(url);
+  };
+}
 
 export type AnalyticsPageType = 'page' | 'modal' | 'tab';
 
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 3500e149d..46c0b18be 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes, ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import ButtonWrapper from './ButtonWrapper';
-import { AnalyticsProps } from '../../analytics';
+import { AnalyticsProps, AnalyticsComponent } from '../../analytics';
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -55,6 +55,7 @@ const Content = ({ icon = null, iconPosition = 'left', children }: ContentProps)
 
 const Button = ({
   size = 'md',
+  tag,
   buttonModifiers,
   className = '',
   icon,
@@ -62,20 +63,39 @@ const Button = ({
   children,
   fullWidth,
   fullHeight,
+  onClick,
   ...rest
 }: Props) => (
-  <ButtonWrapper
-    className={className}
-    size={size}
-    modifiers={buttonModifiers}
-    fullWidth={fullWidth}
-    fullHeight={fullHeight}
-    {...rest}
-  >
-    <Content icon={icon} iconPosition={iconPosition}>
-      {children}
-    </Content>
-  </ButtonWrapper>
+  <AnalyticsComponent>
+    {({ pages, tracker }) => (
+      <ButtonWrapper
+        className={className}
+        size={size}
+        modifiers={buttonModifiers}
+        fullWidth={fullWidth}
+        fullHeight={fullHeight}
+        onClick={
+          !tag
+            ? onClick
+            : (e) => {
+                onClick(e);
+
+                tracker.track({
+                  event: 'click',
+                  type: 'button',
+                  tag,
+                  pages,
+                });
+              }
+        }
+        {...rest}
+      >
+        <Content icon={icon} iconPosition={iconPosition}>
+          {children}
+        </Content>
+      </ButtonWrapper>
+    )}
+  </AnalyticsComponent>
 );
 
 export default Button;
diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
index d6c004655..851def1c6 100644
--- a/src/components/Tabs/Tab.tsx
+++ b/src/components/Tabs/Tab.tsx
@@ -47,6 +47,6 @@ export type Props = {
   selected: boolean;
 } & AnalyticsProps;
 
-const Tab = ({ tag, ...rest }: Props) => <TabWrapper {...rest} />
+const Tab = ({ tag, ...rest }: Props) => <TabWrapper {...rest} />;
 
 export default Tab;

From 476531f1cfd963847a7a61c7934a730fada86aec Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 19 Oct 2021 20:25:18 +0200
Subject: [PATCH 065/157] Add button click event handler(tracker)

---
 src/analytics/index.tsx          | 20 +++++++++++++-------
 src/components/Button/Button.tsx |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index f9529f9c7..e250a3f5e 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -32,12 +32,18 @@ export class AnalyticsTracker {
   }) => {
     const url = new URL('https://staging-v2.inplayer.com/analytics/track');
 
-    url.append('event', event.event);
-    url.append('type', event.type);
-    url.append('tag', event.tag);
-    url.append('pages', event.pages.map((page) => `${page.type}:${page.tag}`).join('/'));
-
-    fetch(url);
+    url.searchParams.append('tag', event.tag);
+    url.searchParams.append('action', event.event);
+    url.searchParams.append('type', event.type);
+    if (event.pages[0]) {
+      url.searchParams.append('page', event.pages[0].tag);
+      if (event.pages[1]) {
+        url.searchParams.append('subpage', event.pages[1].tag);
+      }
+    }
+    url.searchParams.append('timestamp', (Date.now() as unknown) as string);
+
+    fetch(url.href);
   };
 }
 
@@ -73,7 +79,7 @@ export type AnalyticsPageProps = {
 };
 
 export type AnalyticsComponentProps = {
-  children?: (context: AnalyticsContextValue) => React.ReactNode;
+  children: (context: AnalyticsContextValue) => React.ReactNode;
 };
 
 /** A component to wrap other components with to gain access to the AnalyticsContextValue. */
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 46c0b18be..ef4ff20da 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -78,7 +78,7 @@ const Button = ({
           !tag
             ? onClick
             : (e) => {
-                onClick(e);
+                if (onClick) onClick(e);
 
                 tracker.track({
                   event: 'click',

From f49e1a69945b142353021e3e486289cca77889fb Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 19 Oct 2021 20:29:46 +0200
Subject: [PATCH 066/157] Add AnalyticsPage in index.d.ts

---
 index.d.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index 8ec312ed5..16b848724 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -40,6 +40,23 @@ export interface AnalyticsProps {
     column?: number | string;
   };
 }
+
+export type AnalyticsPageProps = {
+  /** Tag of this page. */
+  tag: AnalyticsTag;
+
+  /** Type of this page. */
+  type: AnalyticsPageType;
+
+  /** Children in the page. */
+  children?: React.ReactNode;
+};
+
+export type AnalyticsComponentProps = {
+  children: (context: AnalyticsContextValue) => React.ReactNode;
+};
+
+export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>
 export interface ContainerProps extends AnalyticsProps{
   className?: string;
   columns?: number | string;

From 837143d36717860efcadfb0adf586c3d517c5ab1 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 20 Oct 2021 16:01:39 +0200
Subject: [PATCH 067/157] Add ip and merchantId in context and send them in
 analytics/track request

---
 index.d.ts                       |  6 +++
 src/analytics/index.tsx          | 64 ++++++++++++++++++++++----------
 src/components/Button/Button.tsx |  4 +-
 src/components/Modal/Modal.tsx   |  2 +-
 4 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 16b848724..589f456dd 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -50,6 +50,12 @@ export type AnalyticsPageProps = {
 
   /** Children in the page. */
   children?: React.ReactNode;
+
+  /** merchant id */
+  merchantId?: number;
+
+  /** user ip address */
+  ip?: string;
 };
 
 export type AnalyticsComponentProps = {
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index e250a3f5e..a76118636 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -1,7 +1,21 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 export type AnalyticsTag = string;
 
+export type AnalyticsPageType = 'page' | 'modal' | 'tab';
+
+export interface AnalyticsPage {
+  tag: AnalyticsTag;
+  type: AnalyticsPageType;
+}
+
+export interface AnalyticsContextValue {
+  pages: AnalyticsPage[];
+  tracker: AnalyticsTracker;
+  merchantId: number;
+  ip: string;
+}
+
 /**
  * Props present on various components which aid in the tracking of analytics events.
  */
@@ -21,14 +35,15 @@ export interface AnalyticsProps {
     column?: number | string;
   };
 }
-
 /** Receives tracking events and dispatches them to handlers. */
-export class AnalyticsTracker {
+export class AnalyticsTracker extends Component<void, void> {
   track = (event: {
     event: 'click';
     type: 'button';
     tag: AnalyticsTag;
     pages: AnalyticsPage[];
+    merchantId: number;
+    ip: string;
   }) => {
     const url = new URL('https://staging-v2.inplayer.com/analytics/track');
 
@@ -42,28 +57,18 @@ export class AnalyticsTracker {
       }
     }
     url.searchParams.append('timestamp', (Date.now() as unknown) as string);
-
+    url.searchParams.append('mid', (event.merchantId as unknown) as string);
+    url.searchParams.append('hash', event.ip);
     fetch(url.href);
   };
 }
 
-export type AnalyticsPageType = 'page' | 'modal' | 'tab';
-
-export interface AnalyticsPage {
-  tag: AnalyticsTag;
-  type: AnalyticsPageType;
-}
-
-export interface AnalyticsContextValue {
-  pages: AnalyticsPage[];
-  tracker: AnalyticsTracker;
-}
-
 export const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue = {
   pages: [],
   tracker: new AnalyticsTracker(),
+  merchantId: 0,
+  ip: '',
 };
-
 /** React context you can use to access the current tracker and page hierarchy. */
 export const AnalyticsContext = React.createContext(ROOT_ANALYTICS_CONTEXT);
 
@@ -76,6 +81,12 @@ export type AnalyticsPageProps = {
 
   /** Children in the page. */
   children?: React.ReactNode;
+
+  /** merchant id */
+  merchantId?: number;
+
+  /** user ip address */
+  ip?: string;
 };
 
 export type AnalyticsComponentProps = {
@@ -88,10 +99,23 @@ export const AnalyticsComponent = ({ children }: AnalyticsComponentProps) => (
 );
 
 /** Registers a subpage in the analytics component hierarchy. */
-export const AnalyticsPage = ({ tag, type, children }: AnalyticsPageProps) => (
+export const AnalyticsPage = ({
+  tag,
+  type,
+  children,
+  merchantId: mid,
+  ip: ipAddress,
+}: AnalyticsPageProps) => (
   <AnalyticsContext.Consumer>
-    {({ pages, tracker }) => (
-      <AnalyticsContext.Provider value={{ pages: [...pages, { tag, type }], tracker }}>
+    {({ pages, tracker, merchantId, ip }) => (
+      <AnalyticsContext.Provider
+        value={{
+          pages: [...pages, { tag, type }],
+          tracker,
+          merchantId: mid || merchantId,
+          ip: ipAddress || ip,
+        }}
+      >
         {children}
       </AnalyticsContext.Provider>
     )}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index ef4ff20da..32ce101ec 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -67,7 +67,7 @@ const Button = ({
   ...rest
 }: Props) => (
   <AnalyticsComponent>
-    {({ pages, tracker }) => (
+    {({ pages, tracker, merchantId, ip }) => (
       <ButtonWrapper
         className={className}
         size={size}
@@ -85,6 +85,8 @@ const Button = ({
                   type: 'button',
                   tag,
                   pages,
+                  merchantId,
+                  ip,
                 });
               }
         }
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index d885fdffb..110ac5706 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -44,7 +44,7 @@ type Props = {
 } & AnalyticsProps;
 
 const Modal = ({
-  tag,
+  tag = '',
   isOverflowVisible = false,
   isModalOpen,
   closeModal,

From c93a7d11f38a3916fd05683060f291135bac7cf6 Mon Sep 17 00:00:00 2001
From: Stojan Dimitrovski <stojan.dimitrovski@inplayer.com>
Date: Thu, 21 Oct 2021 11:41:54 +0200
Subject: [PATCH 068/157] Add support for custom analytics handlers

---
 src/analytics/index.tsx | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index a76118636..5b65831cf 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -35,31 +35,33 @@ export interface AnalyticsProps {
     column?: number | string;
   };
 }
+
+export type AnalyticsHandlerFn = (event: {
+  event: 'click';
+  type: 'button';
+  tag: AnalyticsTag;
+  pages: AnalyticsPage[];
+}) => void;
+
 /** Receives tracking events and dispatches them to handlers. */
 export class AnalyticsTracker extends Component<void, void> {
+  handlers: AnalyticsHandlerFn[] = [];
+
+  registerHandler = (fn: AnalyticsHandlerFn) => {
+    this.handlers.push(fn);
+  };
+
+  deregisterHandler = (fn: AnalyticsHandlerFn) => {
+    // TODO
+  };
+
   track = (event: {
     event: 'click';
     type: 'button';
     tag: AnalyticsTag;
     pages: AnalyticsPage[];
-    merchantId: number;
-    ip: string;
   }) => {
-    const url = new URL('https://staging-v2.inplayer.com/analytics/track');
-
-    url.searchParams.append('tag', event.tag);
-    url.searchParams.append('action', event.event);
-    url.searchParams.append('type', event.type);
-    if (event.pages[0]) {
-      url.searchParams.append('page', event.pages[0].tag);
-      if (event.pages[1]) {
-        url.searchParams.append('subpage', event.pages[1].tag);
-      }
-    }
-    url.searchParams.append('timestamp', (Date.now() as unknown) as string);
-    url.searchParams.append('mid', (event.merchantId as unknown) as string);
-    url.searchParams.append('hash', event.ip);
-    fetch(url.href);
+    this.handlers.forEach((handler) => handler(event));
   };
 }
 

From 76e9ef8e66ccb35f43721f50423bde8b47a10393 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 27 Oct 2021 10:11:08 +0200
Subject: [PATCH 069/157] export root analytics context

---
 index.d.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index 589f456dd..da78f5898 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -41,6 +41,18 @@ export interface AnalyticsProps {
   };
 }
 
+export declare class AnalyticsTracker {
+  registerHandler: (fn: AnalyticsHandlerFn) => void;
+  deregisterHandler: (fn: AnalyticsHandlerFn) => void;
+}
+
+export interface AnalyticsContextValue {
+  pages: AnalyticsPage[];
+  tracker: AnalyticsTracker;
+  merchantId: number;
+  ip: string;
+}
+
 export type AnalyticsPageProps = {
   /** Tag of this page. */
   tag: AnalyticsTag;
@@ -62,6 +74,10 @@ export type AnalyticsComponentProps = {
   children: (context: AnalyticsContextValue) => React.ReactNode;
 };
 
+export declare const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue;
+
+export type AnalyticsHandlerFn = (event: Record<string, any>) => void;
+
 export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>
 export interface ContainerProps extends AnalyticsProps{
   className?: string;

From e5de8ae9b870d9bd0871b4316898c2155d7e26d0 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 27 Oct 2021 10:11:20 +0200
Subject: [PATCH 070/157] export root analytics

---
 src/analytics/index.tsx | 4 ++--
 src/index.ts            | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index 5b65831cf..16bd06030 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 export type AnalyticsTag = string;
 
@@ -44,7 +44,7 @@ export type AnalyticsHandlerFn = (event: {
 }) => void;
 
 /** Receives tracking events and dispatches them to handlers. */
-export class AnalyticsTracker extends Component<void, void> {
+export class AnalyticsTracker {
   handlers: AnalyticsHandlerFn[] = [];
 
   registerHandler = (fn: AnalyticsHandlerFn) => {
diff --git a/src/index.ts b/src/index.ts
index b0ef7c8fd..58ed4adbe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -52,4 +52,10 @@ export type {
   AnalyticsContextValue,
 } from './analytics';
 
-export { AnalyticsPage, AnalyticsContext, AnalyticsTracker, AnalyticsComponent } from './analytics';
+export {
+  AnalyticsPage,
+  AnalyticsContext,
+  AnalyticsTracker,
+  AnalyticsComponent,
+  ROOT_ANALYTICS_CONTEXT,
+} from './analytics';

From 852028cba132fabb12e731654a36d530828e66a3 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 27 Oct 2021 13:40:07 +0200
Subject: [PATCH 071/157] extend accordion panel type to accept analytic props

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index da78f5898..dfc6271b0 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -282,7 +282,7 @@ export interface ActionButtonRenderProps {
   closeAccordion: (e?: SyntheticEvent<*>) => void;
 }
 
-export interface AccordionPanel {
+export interface AccordionPanel extends AnalyticsProps{
   label: string;
   icon?: ReactNode;
   iconTooltip?: TooltipProps;

From b5ac2a5d1cfb28de3be97003176af6e252e31684 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 27 Oct 2021 13:48:51 +0200
Subject: [PATCH 072/157] update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c051cbcd..637432c8c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.14] - 27.10.2021
+
+## Added
+
+- Analytics handler for button component
+
 # [2.5.13] - 05-10-2021
 
 ## Added

From 031990707733a8c77dd1f26262379b75610e90d6 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 1 Nov 2021 19:51:37 +0100
Subject: [PATCH 073/157] fix tab component and make it analytics ready

---
 src/components/Tabs/Tab.tsx  | 12 +++++-------
 src/components/Tabs/Tabs.tsx |  5 +++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
index 851def1c6..9e724d79b 100644
--- a/src/components/Tabs/Tab.tsx
+++ b/src/components/Tabs/Tab.tsx
@@ -4,7 +4,11 @@ import { ifProp } from 'styled-tools';
 import { AnalyticsProps } from '../../analytics';
 import colors from '../../theme/colors';
 
-const TabWrapper = styled.div<{ selected: boolean }>`
+interface Props extends AnalyticsProps {
+  selected: boolean;
+}
+
+const Tab = styled.div<Props>`
   margin: 0;
   padding: 0.5rem 0;
   display: flex;
@@ -43,10 +47,4 @@ const TabWrapper = styled.div<{ selected: boolean }>`
   )};
 `;
 
-export type Props = {
-  selected: boolean;
-} & AnalyticsProps;
-
-const Tab = ({ tag, ...rest }: Props) => <TabWrapper {...rest} />;
-
 export default Tab;
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 6ca163e3b..a1d499448 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -3,7 +3,7 @@ import Tab from './Tab';
 import TabsWrapper from './TabsWrapper';
 import { AnalyticsProps } from '../../analytics';
 
-interface TabInfo {
+interface TabInfo extends AnalyticsProps {
   name: string;
 }
 
@@ -37,8 +37,9 @@ const renderTabs = (
   selectedTabIndex: number,
   onTabClick: (index: number) => void
 ) =>
-  tabs.map(({ name, ...rest }, index) => (
+  tabs.map(({ name, tag, ...rest }, index) => (
     <Tab
+      tag={tag}
       selected={selectedTabIndex === index}
       key={name}
       onClick={() => {

From 2e88cd6acb45947b1ff6023c08db249eebbcec15 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 2 Nov 2021 14:08:00 +0100
Subject: [PATCH 074/157] udpate changelog

---
 CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 637432c8c..1ddc99c5a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.15] - 02.11.2021
+
+## Fixes
+
+- Tab component import bug
+
+### Change
+
+- Accordion component to be analytics ready
+
 # [2.5.14] - 27.10.2021
 
 ## Added

From 733dd935cbe02498c1e7fe60af448e484e35a05d Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 2 Nov 2021 14:08:21 +0100
Subject: [PATCH 075/157] update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d58dcc498..00c8f5de3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.13",
+  "version": "2.5.15",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From cd372fef100dbd76dd4f1f22df081744c9d43623 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 2 Nov 2021 14:30:17 +0100
Subject: [PATCH 076/157] fix import

---
 src/components/Accordion/Accordion.tsx      | 2 +-
 src/components/Accordion/AccordionPanel.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 417ed243e..69d9c6fbd 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -5,7 +5,7 @@ import Arrow from './Arrow';
 import { TooltipProps } from '../Tooltip/Tooltip';
 import { AccordionWrapper } from './styled';
 import AccordionPanel from './AccordionPanel';
-import { AnalyticsProps } from '../../..';
+import { AnalyticsProps } from '../../analytics';
 
 // Types
 type Panel = {
diff --git a/src/components/Accordion/AccordionPanel.tsx b/src/components/Accordion/AccordionPanel.tsx
index 1ba4a879a..175f27408 100644
--- a/src/components/Accordion/AccordionPanel.tsx
+++ b/src/components/Accordion/AccordionPanel.tsx
@@ -7,7 +7,7 @@ import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
 import colors from '../../theme/colors';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 import Typography from '../Typography';
-import { AnalyticsProps } from '../../..';
+import { AnalyticsProps } from '../../analytics';
 
 // Types
 type AccordionPanelContainerProps = {

From 4979185e32bd8dc63199ff23cfb73287a27d5abf Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 8 Nov 2021 04:42:59 +0100
Subject: [PATCH 077/157] apply tagging handler for dropdown

---
 src/analytics/index.tsx              | 11 ++++--
 src/components/Dropdown/Dropdown.tsx | 56 ++++++++++++++++++++++------
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index 16bd06030..9fff2d577 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -37,8 +37,8 @@ export interface AnalyticsProps {
 }
 
 export type AnalyticsHandlerFn = (event: {
-  event: 'click';
-  type: 'button';
+  event: 'click' | 'dropdown_change';
+  type: 'button' | 'dropdown';
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
 }) => void;
@@ -56,10 +56,13 @@ export class AnalyticsTracker {
   };
 
   track = (event: {
-    event: 'click';
-    type: 'button';
+    event: 'click' | 'dropdown_change';
+    type: 'button' | 'dropdown';
     tag: AnalyticsTag;
+    selectedValue?: string;
     pages: AnalyticsPage[];
+    merchantId: number;
+    ip: string;
   }) => {
     this.handlers.forEach((handler) => handler(event));
   };
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index bcb3a3ec9..c453440e4 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,6 +1,10 @@
 import React, { SelectHTMLAttributes, ChangeEvent } from 'react';
+import { snakeCase } from 'lodash';
+import styled from 'styled-components';
 import DropdownContainer from './DropdownContainer';
-import { AnalyticsProps } from '../../analytics';
+import { AnalyticsComponent, AnalyticsProps } from '../../analytics';
+
+const StyledOption = styled.option<AnalyticsProps>``;
 
 export type Option = {
   value: string;
@@ -30,6 +34,7 @@ const Dropdown: React.FC<Props> = ({
   onChange = () => null,
   defaultOption,
   className,
+  tag,
   ...rest
 }) => {
   const onDropdownChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -38,18 +43,45 @@ const Dropdown: React.FC<Props> = ({
     }
   };
   return (
-    <DropdownContainer onChange={onDropdownChange} className={className} {...rest}>
-      {defaultOption && (
-        <option value="" disabled={defaultOption.disabled}>
-          {defaultOption.displayName}
-        </option>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <DropdownContainer
+          onChange={
+            !tag
+              ? onDropdownChange
+              : (e) => {
+                  if (onDropdownChange) onDropdownChange(e);
+
+                  const selectedValue = e.currentTarget.selectedIndex;
+                  tracker.track({
+                    event: 'dropdown_change',
+                    type: 'dropdown',
+                    tag,
+                    selectedValue: `dropdown_${snakeCase(
+                      e.currentTarget.options[selectedValue].text
+                    )}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+          }
+          className={className}
+          {...rest}
+        >
+          {defaultOption && (
+            <option value="" disabled={defaultOption.disabled}>
+              {defaultOption.displayName}
+            </option>
+          )}
+          {options.map(({ value, displayName }) => (
+            <option value={value} key={value}>
+              {displayName}
+            </option>
+          ))}
+        </DropdownContainer>
       )}
-      {options.map(({ value, displayName }) => (
-        <option value={value} key={value}>
-          {displayName}
-        </option>
-      ))}
-    </DropdownContainer>
+    </AnalyticsComponent>
   );
 };
 

From cc7a210d02c4cf6534feb437d22245a43c04117a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 9 Nov 2021 10:38:27 +0100
Subject: [PATCH 078/157] add handler when dropdown is selected

---
 src/analytics/index.tsx              |  5 ++---
 src/components/Dropdown/Dropdown.tsx | 23 ++++++++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index 9fff2d577..cbe525dbf 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -37,7 +37,7 @@ export interface AnalyticsProps {
 }
 
 export type AnalyticsHandlerFn = (event: {
-  event: 'click' | 'dropdown_change';
+  event: 'click' | 'dropdown_change' | 'dropdown_select';
   type: 'button' | 'dropdown';
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
@@ -56,10 +56,9 @@ export class AnalyticsTracker {
   };
 
   track = (event: {
-    event: 'click' | 'dropdown_change';
+    event: 'click' | 'dropdown_change' | 'dropdown_select';
     type: 'button' | 'dropdown';
     tag: AnalyticsTag;
-    selectedValue?: string;
     pages: AnalyticsPage[];
     merchantId: number;
     ip: string;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index c453440e4..80ae43413 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -4,8 +4,6 @@ import styled from 'styled-components';
 import DropdownContainer from './DropdownContainer';
 import { AnalyticsComponent, AnalyticsProps } from '../../analytics';
 
-const StyledOption = styled.option<AnalyticsProps>``;
-
 export type Option = {
   value: string;
   displayName: string;
@@ -35,6 +33,7 @@ const Dropdown: React.FC<Props> = ({
   defaultOption,
   className,
   tag,
+  onClick,
   ...rest
 }) => {
   const onDropdownChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -42,6 +41,7 @@ const Dropdown: React.FC<Props> = ({
       onChange(e.target.value);
     }
   };
+
   return (
     <AnalyticsComponent>
       {({ pages, tracker, merchantId, ip }) => (
@@ -56,10 +56,23 @@ const Dropdown: React.FC<Props> = ({
                   tracker.track({
                     event: 'dropdown_change',
                     type: 'dropdown',
+                    tag: `dropdown_${snakeCase(e.currentTarget.options[selectedValue].text)}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+          }
+          onClick={
+            !tag
+              ? onClick
+              : (e) => {
+                  if (onClick) onClick(e);
+
+                  tracker.track({
+                    event: 'dropdown_select',
+                    type: 'dropdown',
                     tag,
-                    selectedValue: `dropdown_${snakeCase(
-                      e.currentTarget.options[selectedValue].text
-                    )}`,
                     pages,
                     merchantId,
                     ip,

From dc56eba7b21789b6f4d93a315ffce740f99c1d04 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 11 Nov 2021 14:18:13 +0100
Subject: [PATCH 079/157] refactor

---
 src/components/Dropdown/Dropdown.tsx | 1 -
 src/components/Tabs/Tab.tsx          | 4 +---
 src/components/Tabs/Tabs.tsx         | 3 +--
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 80ae43413..69dbca12f 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,6 +1,5 @@
 import React, { SelectHTMLAttributes, ChangeEvent } from 'react';
 import { snakeCase } from 'lodash';
-import styled from 'styled-components';
 import DropdownContainer from './DropdownContainer';
 import { AnalyticsComponent, AnalyticsProps } from '../../analytics';
 
diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
index 9e724d79b..37eaaebb2 100644
--- a/src/components/Tabs/Tab.tsx
+++ b/src/components/Tabs/Tab.tsx
@@ -1,10 +1,8 @@
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
-
-import { AnalyticsProps } from '../../analytics';
 import colors from '../../theme/colors';
 
-interface Props extends AnalyticsProps {
+interface Props {
   selected: boolean;
 }
 
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index a1d499448..c29bc2b74 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -37,9 +37,8 @@ const renderTabs = (
   selectedTabIndex: number,
   onTabClick: (index: number) => void
 ) =>
-  tabs.map(({ name, tag, ...rest }, index) => (
+  tabs.map(({ name, ...rest }, index) => (
     <Tab
-      tag={tag}
       selected={selectedTabIndex === index}
       key={name}
       onClick={() => {

From 4cc3feeba286192004e683dd2d68aff51943d2ea Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 12 Nov 2021 13:40:19 +0100
Subject: [PATCH 080/157] add types for events and analytic buttons

---
 .eslintrc                            | 16 ++--------------
 index.d.ts                           | 11 +++++++++++
 src/analytics/index.tsx              | 19 +++++++++++++++----
 src/components/Button/Button.tsx     | 11 ++++++++---
 src/components/Dropdown/Dropdown.tsx | 15 ++++++++++-----
 5 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 19f5c0b80..7e8c30b67 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -110,20 +110,8 @@
     "consistent-return": "off",
     "jsx-a11y/accessible-emoji": "off",
     "radix": "off",
-    "no-shadow": [
-      2,
-      {
-        "hoist": "all",
-        "allow": [
-          "resolve",
-          "reject",
-          "done",
-          "next",
-          "err",
-          "error"
-        ]
-      }
-    ],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"],
     "quotes": [
       2,
       "single",
diff --git a/index.d.ts b/index.d.ts
index dfc6271b0..d0d8a1522 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -76,6 +76,17 @@ export type AnalyticsComponentProps = {
 
 export declare const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue;
 
+export enum AnalyticsEvents {
+  CLICK = 'click',
+  DROPDOWN_CHANGE = 'dropdown_change',
+  DROPDOWN_SELECT = 'dropdown_select',
+}
+
+export enum AnalyticsComponentType {
+  BUTTON = 'button',
+  DROPDOWN = 'dropdown',
+}
+
 export type AnalyticsHandlerFn = (event: Record<string, any>) => void;
 
 export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index cbe525dbf..f98a2e546 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -36,9 +36,20 @@ export interface AnalyticsProps {
   };
 }
 
+export enum AnalyticsEvents {
+  CLICK = 'click',
+  DROPDOWN_CHANGE = 'dropdown_change',
+  DROPDOWN_SELECT = 'dropdown_select',
+}
+
+export enum AnalyticsComponentType {
+  BUTTON = 'button',
+  DROPDOWN = 'dropdown',
+}
+
 export type AnalyticsHandlerFn = (event: {
-  event: 'click' | 'dropdown_change' | 'dropdown_select';
-  type: 'button' | 'dropdown';
+  event: AnalyticsEvents;
+  type: AnalyticsComponentType;
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
 }) => void;
@@ -56,8 +67,8 @@ export class AnalyticsTracker {
   };
 
   track = (event: {
-    event: 'click' | 'dropdown_change' | 'dropdown_select';
-    type: 'button' | 'dropdown';
+    event: AnalyticsEvents;
+    type: AnalyticsComponentType;
     tag: AnalyticsTag;
     pages: AnalyticsPage[];
     merchantId: number;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 32ce101ec..d6d6072a3 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,12 @@
 import React, { ButtonHTMLAttributes, ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import ButtonWrapper from './ButtonWrapper';
-import { AnalyticsProps, AnalyticsComponent } from '../../analytics';
+import {
+  AnalyticsProps,
+  AnalyticsComponent,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -81,8 +86,8 @@ const Button = ({
                 if (onClick) onClick(e);
 
                 tracker.track({
-                  event: 'click',
-                  type: 'button',
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.BUTTON,
                   tag,
                   pages,
                   merchantId,
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 69dbca12f..d69782675 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,7 +1,12 @@
 import React, { SelectHTMLAttributes, ChangeEvent } from 'react';
 import { snakeCase } from 'lodash';
 import DropdownContainer from './DropdownContainer';
-import { AnalyticsComponent, AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsEvents,
+  AnalyticsComponentType,
+  AnalyticsComponent,
+  AnalyticsProps,
+} from '../../analytics';
 
 export type Option = {
   value: string;
@@ -53,8 +58,8 @@ const Dropdown: React.FC<Props> = ({
 
                   const selectedValue = e.currentTarget.selectedIndex;
                   tracker.track({
-                    event: 'dropdown_change',
-                    type: 'dropdown',
+                    event: AnalyticsEvents.DROPDOWN_CHANGE,
+                    type: AnalyticsComponentType.DROPDOWN,
                     tag: `dropdown_${snakeCase(e.currentTarget.options[selectedValue].text)}`,
                     pages,
                     merchantId,
@@ -69,8 +74,8 @@ const Dropdown: React.FC<Props> = ({
                   if (onClick) onClick(e);
 
                   tracker.track({
-                    event: 'dropdown_select',
-                    type: 'dropdown',
+                    event: AnalyticsEvents.DROPDOWN_SELECT,
+                    type: AnalyticsComponentType.DROPDOWN,
                     tag,
                     pages,
                     merchantId,

From 95d34f918e518395c3d4e2c31311d5bc268dac85 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 12 Nov 2021 13:49:09 +0100
Subject: [PATCH 081/157] add interface for event tracker

---
 index.d.ts              | 7 +++++++
 src/analytics/index.tsx | 6 ++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index d0d8a1522..c687ec383 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -87,6 +87,13 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
 }
 
+export interface Event {
+  event: AnalyticsEvents;
+  type: AnalyticsComponentType;
+  tag: AnalyticsTag;
+  pages: AnalyticsPage[];
+}
+
 export type AnalyticsHandlerFn = (event: Record<string, any>) => void;
 
 export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index f98a2e546..4661bd060 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -47,12 +47,14 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
 }
 
-export type AnalyticsHandlerFn = (event: {
+export interface Event {
   event: AnalyticsEvents;
   type: AnalyticsComponentType;
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
-}) => void;
+}
+
+export type AnalyticsHandlerFn = (event: Event) => void;
 
 /** Receives tracking events and dispatches them to handlers. */
 export class AnalyticsTracker {

From a1314dabab5c1adbf010e6db4f41c10841310d41 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 12 Nov 2021 14:08:35 +0100
Subject: [PATCH 082/157] update changelog

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ddc99c5a..c7f2d0f37 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.16] - 12.11.2021
+
+## Added
+
+- Analytics handler for dropdown component
+- Tagging for pagination and navbar
+
 # [2.5.15] - 02.11.2021
 
 ## Fixes

From 7a562ae731b3a2d76ac59840bba244f2b1df2078 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 12 Nov 2021 14:23:35 +0100
Subject: [PATCH 083/157] fix lint errors

---
 .eslintrc               | 16 ++++++++++++++--
 src/analytics/index.tsx |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 7e8c30b67..19f5c0b80 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -110,8 +110,20 @@
     "consistent-return": "off",
     "jsx-a11y/accessible-emoji": "off",
     "radix": "off",
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": ["error"],
+    "no-shadow": [
+      2,
+      {
+        "hoist": "all",
+        "allow": [
+          "resolve",
+          "reject",
+          "done",
+          "next",
+          "err",
+          "error"
+        ]
+      }
+    ],
     "quotes": [
       2,
       "single",
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index 4661bd060..dd8ff76b0 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-shadow */
 import React from 'react';
 
 export type AnalyticsTag = string;

From b46d5a836f0772d5a845a092da64ae7dae70b49d Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 12 Nov 2021 14:54:45 +0100
Subject: [PATCH 084/157] refactor tracking function

---
 src/components/Dropdown/Dropdown.tsx | 58 +++++++++++++---------------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index d69782675..a65f946cf 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -50,39 +50,35 @@ const Dropdown: React.FC<Props> = ({
     <AnalyticsComponent>
       {({ pages, tracker, merchantId, ip }) => (
         <DropdownContainer
-          onChange={
-            !tag
-              ? onDropdownChange
-              : (e) => {
-                  if (onDropdownChange) onDropdownChange(e);
+          onChange={(e) => {
+            onDropdownChange?.(e);
 
-                  const selectedValue = e.currentTarget.selectedIndex;
-                  tracker.track({
-                    event: AnalyticsEvents.DROPDOWN_CHANGE,
-                    type: AnalyticsComponentType.DROPDOWN,
-                    tag: `dropdown_${snakeCase(e.currentTarget.options[selectedValue].text)}`,
-                    pages,
-                    merchantId,
-                    ip,
-                  });
-                }
-          }
-          onClick={
-            !tag
-              ? onClick
-              : (e) => {
-                  if (onClick) onClick(e);
+            if (tag) {
+              const selectedValue = e.currentTarget.selectedIndex;
+              tracker.track({
+                event: AnalyticsEvents.DROPDOWN_CHANGE,
+                type: AnalyticsComponentType.DROPDOWN,
+                tag: `dropdown_${snakeCase(e.currentTarget.options[selectedValue].text)}`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }
+          }}
+          onClick={(e) => {
+            onClick?.(e);
 
-                  tracker.track({
-                    event: AnalyticsEvents.DROPDOWN_SELECT,
-                    type: AnalyticsComponentType.DROPDOWN,
-                    tag,
-                    pages,
-                    merchantId,
-                    ip,
-                  });
-                }
-          }
+            if (tag) {
+              tracker.track({
+                event: AnalyticsEvents.DROPDOWN_SELECT,
+                type: AnalyticsComponentType.DROPDOWN,
+                tag,
+                pages,
+                merchantId,
+                ip,
+              });
+            }
+          }}
           className={className}
           {...rest}
         >

From 9a1d7c9b1cc7a5937659a4e0b62827233585304f Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 15 Nov 2021 16:59:48 +0100
Subject: [PATCH 085/157] add types in d.ts file

---
 index.d.ts   | 10 ++++++++--
 src/index.ts |  3 +++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index c687ec383..6e4f457f3 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -44,6 +44,7 @@ export interface AnalyticsProps {
 export declare class AnalyticsTracker {
   registerHandler: (fn: AnalyticsHandlerFn) => void;
   deregisterHandler: (fn: AnalyticsHandlerFn) => void;
+  track: (event: Event) => void;
 }
 
 export interface AnalyticsContextValue {
@@ -88,15 +89,20 @@ export enum AnalyticsComponentType {
 }
 
 export interface Event {
-  event: AnalyticsEvents;
-  type: AnalyticsComponentType;
+  // temporarily mark them as strings
+  event: AnalyticsEvents | string;
+  type: AnalyticsComponentType | string;
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
+  merchantId: number;
+  ip: string;
 }
 
 export type AnalyticsHandlerFn = (event: Record<string, any>) => void;
 
 export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>
+
+export declare const AnalyticsComponent: FunctionComponent<AnalyticsComponentProps>
 export interface ContainerProps extends AnalyticsProps{
   className?: string;
   columns?: number | string;
diff --git a/src/index.ts b/src/index.ts
index 58ed4adbe..e92ad1ba9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -50,6 +50,9 @@ export type {
   AnalyticsPageType,
   AnalyticsTag,
   AnalyticsContextValue,
+  AnalyticsComponentProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
 } from './analytics';
 
 export {

From 084770dc85f660f5b4ea8d026975d530044df74f Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 18 Nov 2021 19:35:23 +0100
Subject: [PATCH 086/157] add tagging for stepwizzard

---
 index.d.ts                               | 2 +-
 src/components/StepWizard/StepWizard.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index c687ec383..88845bd29 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -781,7 +781,7 @@ export declare class Tooltip extends Component<TooltipProps, TooltipState> {
 
 type TransitionVariant = 'fadeInLeft' | 'fadeInRight' | 'fadeOutLeft' | 'fadeOutRight';
 
-interface Step extends AnalyticsProps{
+export interface Step extends AnalyticsProps{
   isDisabled: boolean;
   isCompleted: boolean;
   component: ReactNode;
diff --git a/src/components/StepWizard/StepWizard.tsx b/src/components/StepWizard/StepWizard.tsx
index de89d6be6..2d7aa90df 100644
--- a/src/components/StepWizard/StepWizard.tsx
+++ b/src/components/StepWizard/StepWizard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Nav, { StepItem } from './Nav';
 import Step from './Step';
-import { AnalyticsProps } from '../../analytics';
+import { AnalyticsPage, AnalyticsProps } from '../../analytics';
 
 type TransitionVariant = 'fadeInLeft' | 'fadeInRight' | 'fadeOutLeft' | 'fadeOutRight';
 
@@ -47,10 +47,10 @@ const StepWizard = ({
   });
 
   return (
-    <>
+    <AnalyticsPage tag={steps[activeStep].tag || ''} type="page">
       <Nav steps={steps} activeStep={activeStep} goToStep={goToStep} />
       <div>{renderSteps}</div>
-    </>
+    </AnalyticsPage>
   );
 };
 

From 003c7de9c225626d311ae8d266e4705110d05494 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 22 Nov 2021 20:04:42 +0100
Subject: [PATCH 087/157] fix dropdown options tagging

---
 src/components/Dropdown/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index a65f946cf..cd4cbfd86 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -58,7 +58,7 @@ const Dropdown: React.FC<Props> = ({
               tracker.track({
                 event: AnalyticsEvents.DROPDOWN_CHANGE,
                 type: AnalyticsComponentType.DROPDOWN,
-                tag: `dropdown_${snakeCase(e.currentTarget.options[selectedValue].text)}`,
+                tag: `${tag}_${snakeCase(e.currentTarget.options[selectedValue].text)}`,
                 pages,
                 merchantId,
                 ip,

From 7e3f82880f80bd1953ae2dee4a222b1336f0426a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 26 Nov 2021 13:30:58 +0100
Subject: [PATCH 088/157] fix interface

---
 index.d.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 20398743e..085d52dcf 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -89,9 +89,8 @@ export enum AnalyticsComponentType {
 }
 
 export interface Event {
-  // temporarily mark them as strings
-  event: AnalyticsEvents | string;
-  type: AnalyticsComponentType | string;
+  event: AnalyticsEvents;
+  type: AnalyticsComponentType;
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
   merchantId: number;

From a954d31af5ec914660e100011bbf2ad051790f72 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 26 Nov 2021 13:38:51 +0100
Subject: [PATCH 089/157] change version and update changelog

---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7f2d0f37..07e835488 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.17] - 12.11.2021
+
+## Added
+
+- Tagging for StepWizard
+
+## Fixes
+
+- Dropdown component tag sent in tracker
+
 # [2.5.16] - 12.11.2021
 
 ## Added
diff --git a/package.json b/package.json
index 00c8f5de3..00c9051ec 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.15",
+  "version": "2.5.17",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 00edc8190adb4b21e5d247f76a0972c2e353da0a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 26 Nov 2021 14:07:00 +0100
Subject: [PATCH 090/157] fix types

---
 index.d.ts              | 6 ++++--
 src/analytics/index.tsx | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 085d52dcf..a152e7518 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -86,11 +86,13 @@ export enum AnalyticsEvents {
 export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
+  ICON = 'icon',
 }
 
 export interface Event {
-  event: AnalyticsEvents;
-  type: AnalyticsComponentType;
+  // temporarily mark them as strings
+  event: AnalyticsEvents | string;
+  type: AnalyticsComponentType | string;
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
   merchantId: number;
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index dd8ff76b0..6b6bd00ab 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -46,6 +46,7 @@ export enum AnalyticsEvents {
 export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
+  ICON = 'icon',
 }
 
 export interface Event {

From 983ddea3c450f2c405d4339b67e60a12cba3dded Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 26 Nov 2021 14:27:22 +0100
Subject: [PATCH 091/157] add link as analytic component type

---
 index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.d.ts b/index.d.ts
index a152e7518..815229cdc 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -87,6 +87,7 @@ export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
   ICON = 'icon',
+  LINK = 'link',
 }
 
 export interface Event {

From 24cd317e08d3caa4beb6e770673664eb99c3df08 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 26 Nov 2021 14:27:32 +0100
Subject: [PATCH 092/157] add link

---
 src/analytics/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index 6b6bd00ab..cb1d928f0 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -47,6 +47,7 @@ export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
   ICON = 'icon',
+  LINK = 'link',
 }
 
 export interface Event {

From 96b6e3101217fdec0c769818430ff56549f72d88 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 23 Dec 2021 19:25:20 +0100
Subject: [PATCH 093/157] add handlers for checkbox, radiobutton and tag for
 tablebuttons

---
 index.d.ts                            |  8 +++-
 src/analytics/index.tsx               |  4 ++
 src/components/Button/Button.tsx      | 28 ++++++-------
 src/components/Checkbox/Checkbox.tsx  | 50 +++++++++++++++++++---
 src/components/Radio/Radio.tsx        | 60 ++++++++++++++++++---------
 src/components/Radio/RadioWrapper.tsx |  2 +-
 src/components/Table/Table.tsx        |  5 ++-
 7 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 815229cdc..9ab69807b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -81,6 +81,9 @@ export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
 }
 
 export enum AnalyticsComponentType {
@@ -88,6 +91,7 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  CHECKBOX = 'checkbox'
 }
 
 export interface Event {
@@ -233,12 +237,12 @@ export interface TableOptions<T extends TableRowData> {
   headerSection?: Node | JSX.Element | null;
 }
 
-export interface TableButtonProps {
+interface TableButtonProps extends AnalyticsProps {
   label: string;
   icon?: string | ReactNode;
   onClick: (e: SyntheticEvent) => any;
   type: string;
-};
+}
 
 export interface TableProps<TableData extends TableRowData = TableRowData> extends AnalyticsProps{
   columns: Array<TableColumn<TableData>>;
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index cb1d928f0..85fd80efe 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -41,6 +41,9 @@ export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
 }
 
 export enum AnalyticsComponentType {
@@ -48,6 +51,7 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  CHECKBOX = 'checkbox',
 }
 
 export interface Event {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index d6d6072a3..1a8388edf 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -79,22 +79,20 @@ const Button = ({
         modifiers={buttonModifiers}
         fullWidth={fullWidth}
         fullHeight={fullHeight}
-        onClick={
-          !tag
-            ? onClick
-            : (e) => {
-                if (onClick) onClick(e);
+        onClick={(e) => {
+          onClick?.(e);
 
-                tracker.track({
-                  event: AnalyticsEvents.CLICK,
-                  type: AnalyticsComponentType.BUTTON,
-                  tag,
-                  pages,
-                  merchantId,
-                  ip,
-                });
-              }
-        }
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.BUTTON,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
         {...rest}
       >
         <Content icon={icon} iconPosition={iconPosition}>
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 2b4296ce0..7d9199014 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,7 +1,12 @@
 import React, { ChangeEvent, RefObject } from 'react';
 import Label from '../Label';
 import CheckboxWrapper from './CheckboxWrapper';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsProps,
+  AnalyticsEvents,
+} from '../../analytics';
 
 type Props = {
   label: string;
@@ -19,15 +24,50 @@ const Checkbox: React.FC<Props> = ({
   onChange,
   containerRef = null,
   disabled = false,
+  tag = '',
   ...rest
 }) => {
   const onCheckboxChange = (e: ChangeEvent<HTMLInputElement>): any => onChange(e.target.checked);
 
   return (
-    <CheckboxWrapper ref={containerRef}>
-      <input disabled={disabled} type="checkbox" id={id} onChange={onCheckboxChange} {...rest} />
-      <Label htmlFor={id}>{label}</Label>
-    </CheckboxWrapper>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <CheckboxWrapper ref={containerRef}>
+          <input
+            disabled={disabled}
+            type="checkbox"
+            id={id}
+            onChange={(e) => {
+              onCheckboxChange(e);
+
+              if (tag) {
+                if (e.target.checked) {
+                  tracker.track({
+                    event: AnalyticsEvents.CHECKBOX_ON,
+                    type: AnalyticsComponentType.CHECKBOX,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                } else {
+                  tracker.track({
+                    event: AnalyticsEvents.CHECKBOX_OFF,
+                    type: AnalyticsComponentType.CHECKBOX,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+              }
+            }}
+            {...rest}
+          />
+          <Label htmlFor={id}>{label}</Label>
+        </CheckboxWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index afb26a000..d1b175937 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,6 +1,11 @@
 import React, { ChangeEvent, InputHTMLAttributes } from 'react';
 import { StyledLabel, Root, Input, Fill } from './RadioWrapper';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
 type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
   label: string;
@@ -20,26 +25,43 @@ const Radio = ({
   onBlur = () => {},
   disabled = false,
   name = '',
+  tag = '',
   ...rest
 }: RadioProps) => (
-  <StyledLabel disabled={disabled}>
-    <Root disabled={disabled} checked={checked}>
-      <Input
-        id={id}
-        type="radio"
-        onChange={onChange}
-        name={name}
-        checked={checked}
-        value={label}
-        onBlur={onBlur}
-        disabled={disabled}
-        aria-checked={checked}
-        {...rest}
-      />
-      <Fill />
-    </Root>
-    <span>{label}</span>
-  </StyledLabel>
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <StyledLabel disabled={disabled}>
+        <Root disabled={disabled} checked={checked}>
+          <Input
+            id={id}
+            type="radio"
+            onChange={(e) => {
+              onChange(e);
+              if (tag) {
+                tracker.track({
+                  event: AnalyticsEvents.RADIOBUTTON_SELECT,
+                  type: AnalyticsComponentType.CHECKBOX,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }
+            }}
+            name={name}
+            checked={checked}
+            value={label}
+            onBlur={onBlur}
+            disabled={disabled}
+            aria-checked={checked}
+            {...rest}
+          />
+          <Fill />
+        </Root>
+        <span>{label}</span>
+      </StyledLabel>
+    )}
+  </AnalyticsComponent>
 );
 
 export default Radio;
diff --git a/src/components/Radio/RadioWrapper.tsx b/src/components/Radio/RadioWrapper.tsx
index f7aa72b01..3c898aba2 100644
--- a/src/components/Radio/RadioWrapper.tsx
+++ b/src/components/Radio/RadioWrapper.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import Label from '../Label';
 import colors from '../../theme/colors';
 
-export const StyledLabel = styled(Label)`
+export const StyledLabel = styled(Label)<{ disabled: boolean }>`
   white-space: break-spaces;
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 7632f7c49..439c6a542 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -53,12 +53,12 @@ type TableOptions<T> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
-type TableButtonProps = {
+interface TableButtonProps extends AnalyticsProps {
   label: string;
   icon?: string | ReactNode;
   onClick: (e: SyntheticEvent) => any;
   type: string;
-};
+}
 
 type Props<T = Data> = {
   columns: Array<Column> | any;
@@ -271,6 +271,7 @@ class Table<T> extends Component<Props<T>, State> {
             <ButtonTableRow key={button.label}>
               <TableCell colSpan={columnContent.length}>
                 <TableButton
+                  tag={button.tag || ''}
                   modifiers={['buttonLink']}
                   fullWidth
                   fullHeight

From b7dfd87c915d381b5837abf9faaa36f2a089dca8 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 29 Dec 2021 00:35:09 +0100
Subject: [PATCH 094/157] add initial datepicker tagging/handlers

---
 index.d.ts                               |  1 +
 src/analytics/index.tsx                  |  1 +
 src/components/DatePicker/DatePicker.tsx | 83 +++++++++++++++++-------
 3 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 815229cdc..d71ec9da2 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -88,6 +88,7 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  DATEPICKER_PRESET = 'datepicker_preset',
 }
 
 export interface Event {
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index cb1d928f0..c1eb94a58 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -48,6 +48,7 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  DATEPICKER_PRESET = 'datepicker_preset',
 }
 
 export interface Event {
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 757a01199..c09f59dfc 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -3,6 +3,7 @@ import moment, { Moment } from 'moment';
 import styled, { css } from 'styled-components';
 import { FocusedInputShape, DateRangePicker } from 'react-dates';
 import { FaCalendarAlt } from 'react-icons/fa';
+import { snakeCase } from 'lodash';
 import colors from '../../theme/colors';
 import { getMonthOptions, getYearOptions } from '../../utils/helpers';
 import Dropdown from '../Dropdown';
@@ -10,7 +11,12 @@ import { Option } from '../Dropdown/Dropdown';
 import DatePickerWrapper from './DatePickerWrapper';
 import { PERIODS, INNERPERIODS } from './periods';
 import { Styled } from './styles';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+  AnalyticsProps,
+} from '../../analytics';
 import 'react-dates/initialize';
 
 const ContentHolder = styled.div<{ isDropdown?: boolean }>`
@@ -191,7 +197,7 @@ const DatePicker = ({
   const renderDatePresets = () => {
     if (!showInnerPresets) return '';
 
-    let presets = [];
+    let presets: string[] = [];
 
     if (displayPresets[0] === 'default') {
       presets = [
@@ -205,23 +211,38 @@ const DatePicker = ({
       presets = [...displayPresets];
     }
     return (
-      <Styled.DatePresetWrapper>
-        {presets.map((text: string) => (
-          <Styled.StyledLabel
-            active={activePeriod === text}
-            key={text}
-            onClick={() => handleRangeClick(text as Period)}
-          >
-            {text}
-          </Styled.StyledLabel>
-        ))}
-      </Styled.DatePresetWrapper>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <Styled.DatePresetWrapper>
+            {presets.map((text: string) => (
+              <Styled.StyledLabel
+                active={activePeriod === text}
+                key={text}
+                onClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER_PRESET,
+                    tag: `datepicker_${snakeCase(text)}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                  handleRangeClick(text as Period);
+                }}
+              >
+                {text}
+              </Styled.StyledLabel>
+            ))}
+          </Styled.DatePresetWrapper>
+        )}
+      </AnalyticsComponent>
     );
   };
   const renderMonthElement = ({ month, onMonthSelect, onYearSelect }: RenderMonthElementProps) => (
     <Styled.CustomMonthContainer>
       <Styled.DropdownContainer>
         <Dropdown
+          tag="dropdown_month"
           options={getMonthOptions()}
           value={month.month().toString()}
           onChange={(val: any) => onMonthSelect(month, val)}
@@ -229,6 +250,7 @@ const DatePicker = ({
       </Styled.DropdownContainer>
       <Styled.DropdownContainer>
         <Dropdown
+          tag="dropdown_year"
           options={getYearOptions()}
           value={month.year().toString()}
           onChange={(val: any) => onYearSelect(month, val)}
@@ -259,22 +281,37 @@ const DatePicker = ({
   };
 
   const renderPeriodElement = (periodConst: string, periodText: string, key: number) => (
-    <SpanContainer>
-      <StyledSpan
-        active={activePeriod === periodConst}
-        key={key}
-        onClick={() => handleRangeClick(periodConst)}
-      >
-        {periodText}
-      </StyledSpan>
-      {periodText.toLowerCase() !== 'all' && ' |'}
-    </SpanContainer>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <SpanContainer>
+          <StyledSpan
+            active={activePeriod === periodConst}
+            key={key}
+            onClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DATEPICKER_PRESET,
+                tag: `datepicker_${snakeCase(periodConst)}`,
+                pages,
+                merchantId,
+                ip,
+              });
+              handleRangeClick(periodConst);
+            }}
+          >
+            {periodText}
+          </StyledSpan>
+          {periodText.toLowerCase() !== 'all' && ' |'}
+        </SpanContainer>
+      )}
+    </AnalyticsComponent>
   );
 
   if (showPresetsWithDropdown) {
     return (
       <ContentHolder isDropdown>
         <StyledDropdown
+          tag="dropdown_presets"
           defaultOption={defaultOption}
           options={options}
           value={activePeriod}

From 0b7144d3821e793464f2a64dc78b3fd56da09129 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Sun, 2 Jan 2022 17:53:48 +0100
Subject: [PATCH 095/157] add handler for Tab & tabNavigation and

---
 index.d.ts                                    |  1 +
 src/analytics/index.tsx                       |  1 +
 .../TabNavigation/TabNavigation.tsx           | 38 +++++++++++-----
 src/components/Tabs/Tabs.tsx                  | 43 +++++++++++++------
 4 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index d71ec9da2..0c5a9ccf3 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -89,6 +89,7 @@ export enum AnalyticsComponentType {
   ICON = 'icon',
   LINK = 'link',
   DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
 }
 
 export interface Event {
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index c1eb94a58..7a95bc513 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -49,6 +49,7 @@ export enum AnalyticsComponentType {
   ICON = 'icon',
   LINK = 'link',
   DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
 }
 
 export interface Event {
diff --git a/src/components/TabNavigation/TabNavigation.tsx b/src/components/TabNavigation/TabNavigation.tsx
index 92557a4d9..892008221 100644
--- a/src/components/TabNavigation/TabNavigation.tsx
+++ b/src/components/TabNavigation/TabNavigation.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
 type TabProps = {
   active: boolean;
@@ -56,15 +61,28 @@ export type Props = {
 const TabNavigation = ({ tabs, onTabClick, selectedTabIndex }: Props) => (
   <TabContainer>
     {tabs.map((tab, index) => (
-      <Tab
-        key={tab.title}
-        id={tab.title.toLowerCase()}
-        onClick={() => onTabClick(index)}
-        active={selectedTabIndex === index}
-        tag={tab.subTag || tab.tag}
-      >
-        {tab.title}
-      </Tab>
+      <AnalyticsComponent key={tab.title}>
+        {({ pages, tracker, merchantId, ip }) => (
+          <Tab
+            key={tab.title}
+            id={tab.title.toLowerCase()}
+            onClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.TAB,
+                tag: tab.subTag || tab.tag || '',
+                pages,
+                merchantId,
+                ip,
+              });
+              onTabClick(index);
+            }}
+            active={selectedTabIndex === index}
+          >
+            {tab.title}
+          </Tab>
+        )}
+      </AnalyticsComponent>
     ))}
   </TabContainer>
 );
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index c29bc2b74..3fd75c39e 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,7 +1,12 @@
 import React, { HTMLAttributes, ReactElement } from 'react';
 import Tab from './Tab';
 import TabsWrapper from './TabsWrapper';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
 interface TabInfo extends AnalyticsProps {
   name: string;
@@ -37,18 +42,30 @@ const renderTabs = (
   selectedTabIndex: number,
   onTabClick: (index: number) => void
 ) =>
-  tabs.map(({ name, ...rest }, index) => (
-    <Tab
-      selected={selectedTabIndex === index}
-      key={name}
-      onClick={() => {
-        if (onTabClick) {
-          onTabClick(index);
-        }
-      }}
-    >
-      <Content name={name} {...rest} />
-    </Tab>
+  tabs.map(({ name, tag = '', ...rest }, index) => (
+    <AnalyticsComponent key={name}>
+      {({ pages, tracker, merchantId, ip }) => (
+        <Tab
+          selected={selectedTabIndex === index}
+          key={name}
+          onClick={() => {
+            if (onTabClick) {
+              onTabClick(index);
+            }
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.TAB,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }}
+        >
+          <Content name={name} {...rest} />
+        </Tab>
+      )}
+    </AnalyticsComponent>
   ));
 
 const Tabs = ({ tabs, selectedTabIndex, onTabClick }: TabsProps) =>

From 35d9d250d273804d44ec6170c30ab4ee6a43bf9a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Sun, 2 Jan 2022 19:02:01 +0100
Subject: [PATCH 096/157] add handlers on datepicker component

---
 index.d.ts                               |   2 +
 src/analytics/index.tsx                  |   2 +
 src/components/DatePicker/DatePicker.tsx | 236 +++++++++++++++++------
 3 files changed, 176 insertions(+), 64 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index d71ec9da2..867521565 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -81,6 +81,7 @@ export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
 }
 
 export enum AnalyticsComponentType {
@@ -88,6 +89,7 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  DATEPICKER = 'datepicker',
   DATEPICKER_PRESET = 'datepicker_preset',
 }
 
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index c1eb94a58..8bb813a78 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -41,6 +41,7 @@ export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
 }
 
 export enum AnalyticsComponentType {
@@ -48,6 +49,7 @@ export enum AnalyticsComponentType {
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  DATEPICKER = 'datepicker',
   DATEPICKER_PRESET = 'datepicker_preset',
 }
 
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index c09f59dfc..f724cf1c1 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -309,54 +309,164 @@ const DatePicker = ({
 
   if (showPresetsWithDropdown) {
     return (
-      <ContentHolder isDropdown>
-        <StyledDropdown
-          tag="dropdown_presets"
-          defaultOption={defaultOption}
-          options={options}
-          value={activePeriod}
-          onChange={handleDropdownChange}
-        />
-        <DatePickerWrapper showPresetsWithDropdown className={className}>
-          <DateRangePicker
-            isOutsideRange={isOutsideRange}
-            onDatesChange={handleDateChange}
-            onFocusChange={onFocusChange}
-            renderMonthElement={renderMonthElement}
-            focusedInput={focusedInput}
-            startDate={startDateProp}
-            startDateId={startDateId}
-            endDate={endDateProp}
-            endDateId={endDateId}
-            customArrowIcon="-"
-            calendarInfoPosition="before"
-            minimumNights={minimumNights}
-            enableOutsideDays
-            readOnly
-            renderCalendarInfo={renderDatePresets}
-            customInputIcon={<FaCalendarAlt />}
-          />
-        </DatePickerWrapper>
-      </ContentHolder>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <ContentHolder isDropdown>
+            <StyledDropdown
+              tag="dropdown_presets"
+              defaultOption={defaultOption}
+              options={options}
+              value={activePeriod}
+              onChange={handleDropdownChange}
+            />
+            <DatePickerWrapper showPresetsWithDropdown className={className}>
+              <DateRangePicker
+                isOutsideRange={isOutsideRange}
+                onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
+                  handleDateChange({ startDate, endDate });
+                  tracker.track({
+                    event: AnalyticsEvents.DATEPICKER_CHANGE,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `startDate: ${moment(startDate).format('DD-MM-YYYY')}_endDate: ${moment(
+                      endDate
+                    ).format('DD-MM-YYYY')}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onFocusChange={onFocusChange}
+                renderMonthElement={renderMonthElement}
+                focusedInput={focusedInput}
+                startDate={startDateProp}
+                startDateId={startDateId}
+                endDate={endDateProp}
+                endDateId={endDateId}
+                customArrowIcon="-"
+                calendarInfoPosition="before"
+                minimumNights={minimumNights}
+                enableOutsideDays
+                readOnly
+                renderCalendarInfo={renderDatePresets}
+                customInputIcon={<FaCalendarAlt />}
+                onNextMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: 'datepicker_next_month',
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onPrevMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `datepicker_prev_month`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+              />
+            </DatePickerWrapper>
+          </ContentHolder>
+        )}
+      </AnalyticsComponent>
     );
   }
 
   if (showPresets) {
     return (
-      <ContentHolder>
-        <AnalyticsPeriods>
-          {renderPeriodElement(PERIODS.TODAY, 'last 24 hours', 6)}
-          {renderPeriodElement(PERIODS.ONE_WEEK, '1 week', 0)}
-          {renderPeriodElement(PERIODS.TWO_WEEKS, '2 weeks', 1)}
-          {renderPeriodElement(PERIODS.ONE_MONTH, '1 month', 2)}
-          {renderPeriodElement(PERIODS.SIX_MONTHS, '6 months', 3)}
-          {renderPeriodElement(PERIODS.ONE_YEAR, '1 year', 4)}
-          {renderPeriodElement(PERIODS.ALL, 'all', 5)}
-        </AnalyticsPeriods>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <ContentHolder>
+            <AnalyticsPeriods>
+              {renderPeriodElement(PERIODS.TODAY, 'last 24 hours', 6)}
+              {renderPeriodElement(PERIODS.ONE_WEEK, '1 week', 0)}
+              {renderPeriodElement(PERIODS.TWO_WEEKS, '2 weeks', 1)}
+              {renderPeriodElement(PERIODS.ONE_MONTH, '1 month', 2)}
+              {renderPeriodElement(PERIODS.SIX_MONTHS, '6 months', 3)}
+              {renderPeriodElement(PERIODS.ONE_YEAR, '1 year', 4)}
+              {renderPeriodElement(PERIODS.ALL, 'all', 5)}
+            </AnalyticsPeriods>
+            <DatePickerWrapper className={className}>
+              <DateRangePicker
+                isOutsideRange={isOutsideRange}
+                onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
+                  handleDateChange({ startDate, endDate });
+                  tracker.track({
+                    event: AnalyticsEvents.DATEPICKER_CHANGE,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `startDate: ${moment(startDate).format('DD-MM-YYYY')}_endDate: ${moment(
+                      endDate
+                    ).format('DD-MM-YYYY')}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onFocusChange={onFocusChange}
+                renderMonthElement={renderMonthElement}
+                focusedInput={focusedInput}
+                startDate={startDateProp}
+                startDateId={startDateId}
+                endDate={endDateProp}
+                endDateId={endDateId}
+                customArrowIcon="to"
+                calendarInfoPosition="before"
+                minimumNights={minimumNights}
+                enableOutsideDays
+                readOnly
+                renderCalendarInfo={renderDatePresets}
+                onNextMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: 'datepicker_next_month',
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onPrevMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `datepicker_prev_month`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+              />
+            </DatePickerWrapper>
+          </ContentHolder>
+        )}
+      </AnalyticsComponent>
+    );
+  }
+
+  return (
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
         <DatePickerWrapper className={className}>
           <DateRangePicker
             isOutsideRange={isOutsideRange}
-            onDatesChange={handleDateChange}
+            onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
+              handleDateChange({ startDate, endDate });
+              tracker.track({
+                event: AnalyticsEvents.DATEPICKER_CHANGE,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: `startDate: ${moment(startDate).format('DD-MM-YYYY')}_endDate: ${moment(
+                  endDate
+                ).format('DD-MM-YYYY')}`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
             onFocusChange={onFocusChange}
             renderMonthElement={renderMonthElement}
             focusedInput={focusedInput}
@@ -370,32 +480,30 @@ const DatePicker = ({
             enableOutsideDays
             readOnly
             renderCalendarInfo={renderDatePresets}
+            onNextMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: 'datepicker_next_month',
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
+            onPrevMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: `datepicker_prev_month`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
           />
         </DatePickerWrapper>
-      </ContentHolder>
-    );
-  }
-
-  return (
-    <DatePickerWrapper className={className}>
-      <DateRangePicker
-        isOutsideRange={isOutsideRange}
-        onDatesChange={handleDateChange}
-        onFocusChange={onFocusChange}
-        renderMonthElement={renderMonthElement}
-        focusedInput={focusedInput}
-        startDate={startDateProp}
-        startDateId={startDateId}
-        endDate={endDateProp}
-        endDateId={endDateId}
-        customArrowIcon="to"
-        calendarInfoPosition="before"
-        minimumNights={minimumNights}
-        enableOutsideDays
-        readOnly
-        renderCalendarInfo={renderDatePresets}
-      />
-    </DatePickerWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 

From d16900bc69964b20dab8060e7034c0e58efdfa0b Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 4 Jan 2022 23:52:45 +0100
Subject: [PATCH 097/157] add handler for datepicker and daypicker

---
 index.d.ts                               |  2 +
 src/analytics/index.tsx                  |  2 +
 src/components/DatePicker/DatePicker.tsx |  2 +-
 src/components/DayPicker/DayPicker.tsx   | 73 ++++++++++++++++++------
 4 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 867521565..ed9f9277e 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -82,6 +82,7 @@ export enum AnalyticsEvents {
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
   DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
 }
 
 export enum AnalyticsComponentType {
@@ -90,6 +91,7 @@ export enum AnalyticsComponentType {
   ICON = 'icon',
   LINK = 'link',
   DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
 }
 
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index 8bb813a78..6bb6ba336 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -42,6 +42,7 @@ export enum AnalyticsEvents {
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
   DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
 }
 
 export enum AnalyticsComponentType {
@@ -50,6 +51,7 @@ export enum AnalyticsComponentType {
   ICON = 'icon',
   LINK = 'link',
   DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
 }
 
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index f724cf1c1..c36e8dc7d 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -67,7 +67,7 @@ const StyledSpan = styled.span<SpanProps>`
   }
 `;
 
-interface DateChangeArgs {
+export interface DateChangeArgs {
   startDate: Moment | null;
   endDate: Moment | null;
 }
diff --git a/src/components/DayPicker/DayPicker.tsx b/src/components/DayPicker/DayPicker.tsx
index 40a23d3b2..b316795a2 100644
--- a/src/components/DayPicker/DayPicker.tsx
+++ b/src/components/DayPicker/DayPicker.tsx
@@ -7,7 +7,12 @@ import styled from 'styled-components';
 import DayPickerWrapper from './DayPickerWrapper';
 import Dropdown from '../Dropdown';
 import { getMonthOptions, getYearOptions } from '../../utils/helpers';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
 const CustomMonthContainer = styled.div`
   display: flex;
@@ -58,6 +63,7 @@ const DayPicker = ({
     <CustomMonthContainer>
       <DropdownContainer>
         <Dropdown
+          tag="dropdown_month"
           options={getMonthOptions()}
           value={month.month().toString()}
           onChange={(val: any) => onMonthSelect(month, val)}
@@ -65,6 +71,7 @@ const DayPicker = ({
       </DropdownContainer>
       <DropdownContainer>
         <Dropdown
+          tag="dropdown_year"
           options={getYearOptions()}
           value={month.year().toString()}
           onChange={(val: any) => onYearSelect(month, val)}
@@ -73,21 +80,55 @@ const DayPicker = ({
     </CustomMonthContainer>
   );
   return (
-    <DayPickerWrapper>
-      <SingleDatePicker
-        id={id}
-        isOutsideRange={disablePastDays ? handleDisablePastDays : isOutsideRange}
-        onDateChange={onDateChange}
-        onFocusChange={onFocusChange}
-        renderMonthElement={renderMonthElement}
-        focused={focused}
-        date={date ? moment(date) : null}
-        numberOfMonths={numberOfMonths}
-        disabled={disabled}
-        placeholder={placeholder}
-        onClose={onClose}
-      />
-    </DayPickerWrapper>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <DayPickerWrapper>
+          <SingleDatePicker
+            id={id}
+            isOutsideRange={disablePastDays ? handleDisablePastDays : isOutsideRange}
+            onDateChange={(dateChanged: Moment | null) => {
+              tracker.track({
+                event: AnalyticsEvents.DATEPICKER_CHANGE,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: `date: ${moment(dateChanged).format('DD-MM-YYYY')}`,
+                pages,
+                merchantId,
+                ip,
+              });
+              onDateChange(dateChanged);
+            }}
+            onFocusChange={onFocusChange}
+            renderMonthElement={renderMonthElement}
+            focused={focused}
+            date={date ? moment(date) : null}
+            numberOfMonths={numberOfMonths}
+            disabled={disabled}
+            placeholder={placeholder}
+            onClose={onClose}
+            onNextMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DAYPICKER,
+                tag: 'daypicker_next_month',
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
+            onPrevMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DAYPICKER,
+                tag: `daypicker_prev_month`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
+          />
+        </DayPickerWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 

From 3d384320dc909718702845b3b4372d6000b91551 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 10 Jan 2022 03:27:48 +0100
Subject: [PATCH 098/157] make merchantId and ip optional in analytics event
 type

---
 index.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 6eff95bc3..a70cdb387 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -106,8 +106,8 @@ export interface Event {
   type: AnalyticsComponentType | string;
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
-  merchantId: number;
-  ip: string;
+  merchantId?: number;
+  ip?: string;
 }
 
 export type AnalyticsHandlerFn = (event: Record<string, any>) => void;

From 20078b5ac49516600cc52f5ee45d39c407284ed2 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 10 Jan 2022 12:50:03 +0100
Subject: [PATCH 099/157] add tags for datepicker and daypicker

---
 src/components/DatePicker/DatePicker.tsx | 44 ++++++++++++++++++++++--
 src/components/DayPicker/DayPicker.tsx   | 14 +++++++-
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index c36e8dc7d..52b5aedfc 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -124,6 +124,7 @@ const DatePicker = ({
   className = '',
   minimumNights = 0,
   showPresetsWithDropdown = false,
+  tag = '',
 }: Props) => {
   const [activePeriod, setActivePeriod] = useState('');
 
@@ -319,7 +320,20 @@ const DatePicker = ({
               value={activePeriod}
               onChange={handleDropdownChange}
             />
-            <DatePickerWrapper showPresetsWithDropdown className={className}>
+            <DatePickerWrapper
+              onClick={() => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.DATEPICKER,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }}
+              showPresetsWithDropdown
+              className={className}
+            >
               <DateRangePicker
                 isOutsideRange={isOutsideRange}
                 onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
@@ -391,7 +405,19 @@ const DatePicker = ({
               {renderPeriodElement(PERIODS.ONE_YEAR, '1 year', 4)}
               {renderPeriodElement(PERIODS.ALL, 'all', 5)}
             </AnalyticsPeriods>
-            <DatePickerWrapper className={className}>
+            <DatePickerWrapper
+              onClick={() => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.DATEPICKER,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }}
+              className={className}
+            >
               <DateRangePicker
                 isOutsideRange={isOutsideRange}
                 onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
@@ -451,7 +477,19 @@ const DatePicker = ({
   return (
     <AnalyticsComponent>
       {({ pages, tracker, merchantId, ip }) => (
-        <DatePickerWrapper className={className}>
+        <DatePickerWrapper
+          onClick={() => {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.DATEPICKER,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }}
+          className={className}
+        >
           <DateRangePicker
             isOutsideRange={isOutsideRange}
             onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
diff --git a/src/components/DayPicker/DayPicker.tsx b/src/components/DayPicker/DayPicker.tsx
index b316795a2..26ad1d7b8 100644
--- a/src/components/DayPicker/DayPicker.tsx
+++ b/src/components/DayPicker/DayPicker.tsx
@@ -56,6 +56,7 @@ const DayPicker = ({
   placeholder,
   onClose,
   disablePastDays = false,
+  tag = '',
 }: Props) => {
   const handleDisablePastDays = (days: any) => !isInclusivelyAfterDay(days, moment());
 
@@ -82,7 +83,18 @@ const DayPicker = ({
   return (
     <AnalyticsComponent>
       {({ pages, tracker, merchantId, ip }) => (
-        <DayPickerWrapper>
+        <DayPickerWrapper
+          onClick={() => {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.DAYPICKER,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }}
+        >
           <SingleDatePicker
             id={id}
             isOutsideRange={disablePastDays ? handleDisablePastDays : isOutsideRange}

From 2ee98a75b33320dd4955d1aa8265330cd9ec3ae5 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 10 Jan 2022 13:32:11 +0100
Subject: [PATCH 100/157] update changelog

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07e835488..b5549d833 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.18] - 10.01.2022
+
+## Added
+
+- Handlers for Checkbox, Radiobutton, Daypicker and Datepicker.
+- Handler for selected Tab change.
+
 # [2.5.17] - 12.11.2021
 
 ## Added

From 1103bdf7537b912a040ce443304fc9338fc7c68f Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 18 Jan 2022 22:50:02 +0100
Subject: [PATCH 101/157] add analytics handlers for input, textarea,
 pagination and switch components

---
 index.d.ts                                    |   8 ++
 src/analytics/index.tsx                       |   8 ++
 src/components/Input/Input.tsx                | 121 ++++++++++++++----
 src/components/Modal/ModalHeader.tsx          |  23 +++-
 .../Pagination/PageBoxContainer.tsx           |  34 +++++
 src/components/Pagination/Pagination.tsx      |  31 ++---
 src/components/Pagination/styled.ts           |   2 +-
 src/components/Switch/Switch.tsx              |  70 +++++++---
 src/components/TextArea/TextArea.ts           |  28 ----
 src/components/TextArea/TextArea.tsx          |  72 +++++++++++
 10 files changed, 308 insertions(+), 89 deletions(-)
 create mode 100644 src/components/Pagination/PageBoxContainer.tsx
 delete mode 100644 src/components/TextArea/TextArea.ts
 create mode 100644 src/components/TextArea/TextArea.tsx

diff --git a/index.d.ts b/index.d.ts
index a70cdb387..b3bd80bde 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -80,17 +80,22 @@ export declare const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue;
 export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
+  SWITCH_ON = 'switch_on',
+  SWITCH_OFF = 'switch_off',
   DROPDOWN_SELECT = 'dropdown_select',
   CHECKBOX_ON = 'checkbox_on',
   CHECKBOX_OFF = 'checkbox_off',
   RADIOBUTTON_SELECT = 'radiobutton_select',
   DATEPICKER_CHANGE = 'datepicker_date_change',
   DAYPICKER_CHANGE = 'daypicker_date_change',
+  KEYBOARD_EVENT = 'keyboard_event',
 }
 
 export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
+  SWITCH = 'switch',
+  PAGINATION = 'pagination',
   ICON = 'icon',
   LINK = 'link',
   CHECKBOX = 'checkbox',
@@ -98,6 +103,9 @@ export enum AnalyticsComponentType {
   DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
   TAB = 'tab',
+  MODAL = 'modal',
+  INPUT = 'input',
+  TEXTAREA = 'textarea',
 }
 
 export interface Event {
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index b5e915025..610291b8e 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -40,17 +40,22 @@ export interface AnalyticsProps {
 export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
+  SWITCH_ON = 'switch_on',
+  SWITCH_OFF = 'switch_off',
   DROPDOWN_SELECT = 'dropdown_select',
   CHECKBOX_ON = 'checkbox_on',
   CHECKBOX_OFF = 'checkbox_off',
   RADIOBUTTON_SELECT = 'radiobutton_select',
   DATEPICKER_CHANGE = 'datepicker_date_change',
   DAYPICKER_CHANGE = 'daypicker_date_change',
+  KEYBOARD_EVENT = 'keyboard_event',
 }
 
 export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
+  SWITCH = 'switch',
+  PAGINATION = 'pagination',
   ICON = 'icon',
   LINK = 'link',
   CHECKBOX = 'checkbox',
@@ -58,6 +63,9 @@ export enum AnalyticsComponentType {
   DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
   TAB = 'tab',
+  MODAL = 'modal',
+  INPUT = 'input',
+  TEXTAREA = 'textarea',
 }
 
 export interface Event {
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 5c206df13..81fe3ef34 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,9 +1,14 @@
-import React, { ChangeEvent, ReactNode, forwardRef, RefObject } from 'react';
+import React, { ChangeEvent, ReactNode, forwardRef, RefObject, KeyboardEvent } from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp, switchProp } from 'styled-tools';
 import { MdSearch } from 'react-icons/md';
 import colors from '../../theme/colors';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 type Size = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -95,7 +100,7 @@ type RefType =
 
 const Input = forwardRef(
   (
-    { type, placeholder, onChange, sizeProp, className = '', icon, ...rest }: Props,
+    { type, placeholder, onChange, sizeProp, className = '', icon, tag = '', ...rest }: Props,
     ref: RefType
   ) => {
     const onInputChange = (e: ChangeEvent<HTMLInputElement>): any => {
@@ -107,35 +112,95 @@ const Input = forwardRef(
 
     if (type === 'search') {
       return (
-        <InputWrapper>
-          <IconContainer>
-            <MdSearch />
-          </IconContainer>
-          <StyledInput
-            sizeProp={sizeProp}
-            ref={ref}
-            type={type}
-            placeholder={placeholder}
-            {...rest}
-            onChange={onInputChange}
-          />
-        </InputWrapper>
+        <AnalyticsComponent>
+          {({ pages, tracker, merchantId, ip }) => (
+            <InputWrapper>
+              <IconContainer>
+                <MdSearch />
+              </IconContainer>
+              <StyledInput
+                sizeProp={sizeProp}
+                ref={ref}
+                type={type}
+                placeholder={placeholder}
+                onChange={onInputChange}
+                onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+                  if (e.key === 'Enter') {
+                    if (tag) {
+                      tracker.track({
+                        event: AnalyticsEvents.KEYBOARD_EVENT,
+                        type: AnalyticsComponentType.INPUT,
+                        tag: `${tag}_enter`,
+                        pages,
+                        merchantId,
+                        ip,
+                      });
+                    }
+                  }
+                }}
+                onClick={() => {
+                  if (tag) {
+                    tracker.track({
+                      event: AnalyticsEvents.CLICK,
+                      type: AnalyticsComponentType.INPUT,
+                      tag,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }
+                }}
+                {...rest}
+              />
+            </InputWrapper>
+          )}
+        </AnalyticsComponent>
       );
     }
 
     return (
-      <InputWrapper className={className}>
-        <IconContainer>{icon}</IconContainer>
-        <StyledInput
-          sizeProp={sizeProp}
-          ref={ref}
-          type={type || 'text'}
-          placeholder={placeholder}
-          onChange={onInputChange}
-          icon={icon}
-          {...rest}
-        />
-      </InputWrapper>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <InputWrapper className={className}>
+            <IconContainer>{icon}</IconContainer>
+            <StyledInput
+              sizeProp={sizeProp}
+              ref={ref}
+              type={type || 'text'}
+              placeholder={placeholder}
+              onChange={onInputChange}
+              icon={icon}
+              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+                if (tag) {
+                  if (e.key === 'Enter') {
+                    tracker.track({
+                      event: AnalyticsEvents.KEYBOARD_EVENT,
+                      type: AnalyticsComponentType.INPUT,
+                      tag: `${tag}_enter`,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }
+                }
+              }}
+              onClick={() => {
+                if (tag) {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.INPUT,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+              }}
+              {...rest}
+            />
+          </InputWrapper>
+        )}
+      </AnalyticsComponent>
     );
   }
 );
diff --git a/src/components/Modal/ModalHeader.tsx b/src/components/Modal/ModalHeader.tsx
index ba4829480..a309dd488 100644
--- a/src/components/Modal/ModalHeader.tsx
+++ b/src/components/Modal/ModalHeader.tsx
@@ -1,5 +1,6 @@
 import React, { ReactChild } from 'react';
 import styled from 'styled-components';
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 import colors from '../../theme/colors';
 import Typography from '../Typography';
@@ -36,8 +37,26 @@ const IconClose = styled.span`
 
 const ModalHeader = ({ children, closeModal }: Props) => (
   <HeaderWrapper>
-    <Title variant="h4">{children}</Title>
-    <IconClose onClick={closeModal} />
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <>
+          <Title variant="h4">{children}</Title>
+          <IconClose
+            onClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.MODAL,
+                tag: 'icon_close',
+                pages,
+                merchantId,
+                ip,
+              });
+              closeModal();
+            }}
+          />
+        </>
+      )}
+    </AnalyticsComponent>
   </HeaderWrapper>
 );
 
diff --git a/src/components/Pagination/PageBoxContainer.tsx b/src/components/Pagination/PageBoxContainer.tsx
new file mode 100644
index 000000000..8c3dd7b43
--- /dev/null
+++ b/src/components/Pagination/PageBoxContainer.tsx
@@ -0,0 +1,34 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import {
+  AnalyticsComponent,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+  AnalyticsProps,
+} from '../../analytics';
+import { PageBox, BoxStyles } from './styled';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement>, AnalyticsProps, BoxStyles {}
+const PageBoxContainer = ({ onClick, tag = '', ...rest }: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <PageBox
+        onClick={(e) => {
+          onClick?.(e);
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.PAGINATION,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
+        {...rest}
+      />
+    )}
+  </AnalyticsComponent>
+);
+
+export default PageBoxContainer;
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 07c9c62a2..fd0afd43e 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { FaAngleDoubleLeft, FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import { PageBox, PaginationContainer } from './styled';
+import { PaginationContainer } from './styled';
 import { AnalyticsProps } from '../../analytics';
+import PageBoxContainer from './PageBoxContainer';
 
 type PaginationProps = {
   onPageChange: (pageNumber: number) => void;
@@ -122,29 +123,29 @@ const Pagination = ({
 
   return (
     <PaginationContainer>
-      <PageBox
+      <PageBoxContainer
         tag="button_page_first"
         type="button"
         disabled={activePage === 1}
         onClick={goToStart}
       >
         <FaAngleDoubleLeft />
-      </PageBox>
-      <PageBox
+      </PageBoxContainer>
+      <PageBoxContainer
         tag="button_page_previous"
         type="button"
         disabled={activePage === 1}
         onClick={onPageClick(activePage - 1)}
       >
         <FaAngleLeft />
-      </PageBox>
+      </PageBoxContainer>
       {!visiblePages.some((index) => index === 1) && (
-        <PageBox type="button" hideBorder onClick={onDotsClick(false)}>
+        <PageBoxContainer type="button" hideBorder onClick={onDotsClick(false)}>
           •••
-        </PageBox>
+        </PageBoxContainer>
       )}
       {visiblePages.map((index) => (
-        <PageBox
+        <PageBoxContainer
           tag={`button_page_${index}`}
           type="button"
           selected={activePage === index}
@@ -152,29 +153,29 @@ const Pagination = ({
           onClick={onPageClick(index)}
         >
           {index}
-        </PageBox>
+        </PageBoxContainer>
       ))}
       {!visiblePages.some((index) => index === totalPages) && (
-        <PageBox type="button" hideBorder onClick={onDotsClick(true)}>
+        <PageBoxContainer type="button" hideBorder onClick={onDotsClick(true)}>
           •••
-        </PageBox>
+        </PageBoxContainer>
       )}
-      <PageBox
+      <PageBoxContainer
         tag="button_page_next"
         type="button"
         disabled={activePage === totalPages}
         onClick={onPageClick(activePage + 1)}
       >
         <FaAngleRight />
-      </PageBox>
-      <PageBox
+      </PageBoxContainer>
+      <PageBoxContainer
         tag="button_page_last"
         type="button"
         disabled={activePage === totalPages}
         onClick={goToEnd}
       >
         <FaAngleDoubleRight />
-      </PageBox>
+      </PageBoxContainer>
     </PaginationContainer>
   );
 };
diff --git a/src/components/Pagination/styled.ts b/src/components/Pagination/styled.ts
index b1e3d3ac4..2f59baa21 100644
--- a/src/components/Pagination/styled.ts
+++ b/src/components/Pagination/styled.ts
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import colors from '../../theme/colors';
 
-type BoxStyles = {
+export type BoxStyles = {
   disabled?: boolean;
   selected?: boolean;
   hideBorder?: boolean;
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index cfac531c6..3ee3c084f 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -3,7 +3,12 @@ import styled from 'styled-components';
 import colors from '../../theme/colors';
 import SwitchWrapper from './SwitchWrapper';
 import Label from '../Label';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 type SwitchProps = {
   checked: boolean;
@@ -68,7 +73,15 @@ const Slider = styled.span`
   }
 `;
 
-const Switch = ({ id, checked, label, disabled = false, onChange, className }: SwitchProps) => {
+const Switch = ({
+  id,
+  checked,
+  label,
+  disabled = false,
+  onChange,
+  className,
+  tag = '',
+}: SwitchProps) => {
   const onToggleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target) {
       onChange(e.target.checked);
@@ -76,19 +89,46 @@ const Switch = ({ id, checked, label, disabled = false, onChange, className }: S
   };
 
   return (
-    <SwitchWrapper className={className}>
-      <MarginLeftLabel disabled={disabled} htmlFor={id}>
-        <Span>{label}</Span>
-        <Input
-          type="checkbox"
-          id={id}
-          disabled={disabled}
-          checked={checked}
-          onChange={onToggleChange}
-        />
-        <Slider />
-      </MarginLeftLabel>
-    </SwitchWrapper>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <SwitchWrapper className={className}>
+          <MarginLeftLabel disabled={disabled} htmlFor={id}>
+            <Span>{label}</Span>
+            <Input
+              type="checkbox"
+              id={id}
+              disabled={disabled}
+              checked={checked}
+              onChange={(e) => {
+                if (tag) {
+                  if (e.target.checked) {
+                    tracker.track({
+                      event: AnalyticsEvents.SWITCH_ON,
+                      type: AnalyticsComponentType.SWITCH,
+                      tag,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  } else {
+                    tracker.track({
+                      event: AnalyticsEvents.SWITCH_OFF,
+                      type: AnalyticsComponentType.SWITCH,
+                      tag,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }
+                }
+                onToggleChange(e);
+              }}
+            />
+            <Slider />
+          </MarginLeftLabel>
+        </SwitchWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 
diff --git a/src/components/TextArea/TextArea.ts b/src/components/TextArea/TextArea.ts
deleted file mode 100644
index 2946afe71..000000000
--- a/src/components/TextArea/TextArea.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-import { AnalyticsProps } from '../../analytics';
-import colors from '../../theme/colors';
-
-const TextArea = styled.textarea<AnalyticsProps>`
-  vertical-align: middle;
-  box-sizing: border-box;
-  overflow: hidden;
-  outline: none;
-  color: ${({ theme }) => theme.palette.text.main};
-  transition: all ease 300ms;
-  background: ${({ theme }) => theme.palette.background.main};
-  font-weight: ${({ theme }) => theme.font.weights.light};
-  border: 1px solid ${colors.gray};
-  border-radius: 3px;
-  font-size: ${({ theme }) => theme.font.sizes.medium};
-  line-height: 1.4em;
-  min-height: 7em;
-  width: 100%;
-  margin: 0.5rem 0;
-  padding: 0.75rem 1.125rem;
-
-  &:focus {
-    border-bottom: 1px solid ${colors.skyBlue};
-  }
-`;
-export default TextArea;
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
new file mode 100644
index 000000000..f021f789a
--- /dev/null
+++ b/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,72 @@
+import React, { KeyboardEvent } from 'react';
+import styled from 'styled-components';
+
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
+import colors from '../../theme/colors';
+
+const TextAreaWrapper = styled.textarea<AnalyticsProps>`
+  vertical-align: middle;
+  box-sizing: border-box;
+  overflow: hidden;
+  outline: none;
+  color: ${({ theme }) => theme.palette.text.main};
+  transition: all ease 300ms;
+  background: ${({ theme }) => theme.palette.background.main};
+  font-weight: ${({ theme }) => theme.font.weights.light};
+  border: 1px solid ${colors.gray};
+  border-radius: 3px;
+  font-size: ${({ theme }) => theme.font.sizes.medium};
+  line-height: 1.4em;
+  min-height: 7em;
+  width: 100%;
+  margin: 0.5rem 0;
+  padding: 0.75rem 1.125rem;
+
+  &:focus {
+    border-bottom: 1px solid ${colors.skyBlue};
+  }
+`;
+
+type Props = AnalyticsProps;
+
+const TextArea = ({ tag = '' }: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <TextAreaWrapper
+        onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {
+          if (tag) {
+            if (e.key === 'Enter') {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.TEXTAREA,
+                tag: `${tag}_enter`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }
+          }
+        }}
+        onClick={() => {
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.TEXTAREA,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
+      />
+    )}
+  </AnalyticsComponent>
+);
+
+export default TextArea;

From ae1b6e8c73894f8ad51689d5b0fbc934656c4cf2 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 19 Jan 2022 19:06:25 +0100
Subject: [PATCH 102/157] tag paywall previews

---
 src/paywall-previews/Preview1/Preview1.tsx | 128 +++++++++++++--------
 src/paywall-previews/Preview2/Preview2.tsx |  90 ++++++++-------
 src/paywall-previews/Preview3/Preview3.tsx |  96 ++++++++++------
 src/paywall-previews/Preview4/Preview4.tsx |   1 +
 src/paywall-previews/Preview5/Preview5.tsx |   1 +
 src/paywall-previews/Preview5/styled.ts    |   2 +-
 src/paywall-previews/Preview6/Preview6.tsx |   1 +
 src/paywall-previews/Preview7/Preview7.tsx |   1 +
 src/paywall-previews/shared/FooterText.tsx |  52 +++++++--
 9 files changed, 235 insertions(+), 137 deletions(-)

diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index 53af29c0f..2198fe137 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 // Colors
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import colors from '../../theme/colors';
 
 // Types
@@ -61,55 +62,86 @@ const Preview1 = ({
   isRestrictedAsset = false,
   isAuthenticated = false,
 }: Props) => (
-  <InPlayerPreviewBox className="inplayer-preview-box">
-    {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
-    <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
-      <PreviewImage
-        alt="coverPhoto"
-        src={imageUrl}
-        role="presentation"
-        className="inplayer-paywall"
-        isRestrictedAsset={isRestrictedAsset}
-      />
-      {isRestrictedAsset && (
-        <RestrictedAssetContainer>
-          <RestrictedAssetIcon />
-          {premiumContentLabel}
-        </RestrictedAssetContainer>
-      )}
-      <PaywallExplain hasProtectedByLabel={hasProtectedByLabel} className="inplayer-paywallexplain">
-        <InplayerWhiteLogo id="inplayer-whitelogo">
-          <strong>{protectedByLabel} inplayer</strong>
-          <a href="https://inplayer.com">InPlayer Paywall</a>
-        </InplayerWhiteLogo>
-        <LockIcon className="inplayer-lock" />
-        <span>{!isRestrictedAsset && premiumContentLabel}</span>
-      </PaywallExplain>
-    </ImageHolder>
-    <ItemDetails className="inplayer-itemdetails">
-      <PreviewText value={previewTitle} className="inplayer-title" />
-      <PreviewText value={previewDescription} />
-    </ItemDetails>
-    {displayBuyButton && (
-      <BuyButtonWrapper className="inplayer-buybutton">
-        <BuyButton
-          className="inplayer-button inplayer-submit-button"
-          buttonBgColor={buttonBgColor}
-          buttonTextColor={buttonTextColor}
-          onClick={handleOpenModal}
-        >
-          {previewButtonLabel}
-        </BuyButton>
-      </BuyButtonWrapper>
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <InPlayerPreviewBox className="inplayer-preview-box">
+        {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
+        <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
+          <PreviewImage
+            alt="coverPhoto"
+            src={imageUrl}
+            role="presentation"
+            className="inplayer-paywall"
+            isRestrictedAsset={isRestrictedAsset}
+          />
+          {isRestrictedAsset && (
+            <RestrictedAssetContainer>
+              <RestrictedAssetIcon />
+              {premiumContentLabel}
+            </RestrictedAssetContainer>
+          )}
+          <PaywallExplain
+            hasProtectedByLabel={hasProtectedByLabel}
+            className="inplayer-paywallexplain"
+          >
+            <InplayerWhiteLogo id="inplayer-whitelogo">
+              <strong>{protectedByLabel} inplayer</strong>
+              <a
+                onClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.ICON,
+                    tag: 'icon_inplayer',
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                href="https://inplayer.com"
+              >
+                InPlayer Paywall
+              </a>
+            </InplayerWhiteLogo>
+            <LockIcon className="inplayer-lock" />
+            <span>{!isRestrictedAsset && premiumContentLabel}</span>
+          </PaywallExplain>
+        </ImageHolder>
+        <ItemDetails className="inplayer-itemdetails">
+          <PreviewText value={previewTitle} className="inplayer-title" />
+          <PreviewText value={previewDescription} />
+        </ItemDetails>
+        {displayBuyButton && (
+          <BuyButtonWrapper className="inplayer-buybutton">
+            <BuyButton
+              className="inplayer-button inplayer-submit-button"
+              buttonBgColor={buttonBgColor}
+              buttonTextColor={buttonTextColor}
+              onClick={(e) => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.BUTTON,
+                  tag: 'button_buy',
+                  pages,
+                  merchantId,
+                  ip,
+                });
+                handleOpenModal?.(e);
+              }}
+            >
+              {previewButtonLabel}
+            </BuyButton>
+          </BuyButtonWrapper>
+        )}
+        <InplayerFooter className="inplayer-preview-footer">
+          <div className="inplayer-guest-footer">
+            <a href="#login" onClick={handleOpenModal}>
+              <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+            </a>
+          </div>
+        </InplayerFooter>
+      </InPlayerPreviewBox>
     )}
-    <InplayerFooter className="inplayer-preview-footer">
-      <div className="inplayer-guest-footer">
-        <a href="#login" onClick={handleOpenModal}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </a>
-      </div>
-    </InplayerFooter>
-  </InPlayerPreviewBox>
+  </AnalyticsComponent>
 );
 
 export default Preview1;
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index 4b860cf11..a0d28ba93 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 // Colors
 import {
@@ -62,49 +63,54 @@ const Preview2 = ({
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
 }: Props) => (
-  <StyledPreviewBox
-    id="preview-container"
-    minHeight={minHeight}
-    minWidth={minWidth}
-    height={height}
-    width={width}
-  >
-    <StyledImageHolder
-      isRestrictedAsset={isRestrictedAsset}
-      backgroundImage={imageUrl}
-      onClick={handleOpenModal}
-    />
-    {isRestrictedAsset && (
-      <StyledRestrictedAssetContainer>
-        <RestrictedAssetIcon />
-        This content is not available in your country
-      </StyledRestrictedAssetContainer>
-    )}
-    <AssetDetails>
-      <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-        <PaywallDescriptionSpan>
-          <StyledIcon name="star" />
-          {!isRestrictedAsset && premiumContentLabel}
-        </PaywallDescriptionSpan>
-      </StyledPaywallDescription>
-      <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />
-      <PreviewText value={previewDescription} />
-      <BuyButtonWrapper>
-        <BuyButton
-          buttonBgColor={buttonBgColor}
-          buttonTextColor={buttonTextColor}
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <StyledPreviewBox
+        id="preview-container"
+        minHeight={minHeight}
+        minWidth={minWidth}
+        height={height}
+        width={width}
+      >
+        <StyledImageHolder
+          isRestrictedAsset={isRestrictedAsset}
+          backgroundImage={imageUrl}
           onClick={handleOpenModal}
-        >
-          {previewButtonLabel}
-        </BuyButton>
-      </BuyButtonWrapper>
-      <Footer color={colors.fontGray}>
-        <FooterLink href="#login" onClick={handleOpenModal}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </FooterLink>
-      </Footer>
-    </AssetDetails>
-  </StyledPreviewBox>
+        />
+        {isRestrictedAsset && (
+          <StyledRestrictedAssetContainer>
+            <RestrictedAssetIcon />
+            This content is not available in your country
+          </StyledRestrictedAssetContainer>
+        )}
+        <AssetDetails>
+          <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
+            <PaywallDescriptionSpan>
+              <StyledIcon name="star" />
+              {!isRestrictedAsset && premiumContentLabel}
+            </PaywallDescriptionSpan>
+          </StyledPaywallDescription>
+          <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />
+          <PreviewText value={previewDescription} />
+          <BuyButtonWrapper>
+            <BuyButton
+              tag="button_buy"
+              buttonBgColor={buttonBgColor}
+              buttonTextColor={buttonTextColor}
+              onClick={handleOpenModal}
+            >
+              {previewButtonLabel}
+            </BuyButton>
+          </BuyButtonWrapper>
+          <Footer color={colors.fontGray}>
+            <FooterLink href="#login" onClick={handleOpenModal}>
+              <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+            </FooterLink>
+          </Footer>
+        </AssetDetails>
+      </StyledPreviewBox>
+    )}
+  </AnalyticsComponent>
 );
 
 export default Preview2;
diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index c922eeb1b..e05047f34 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-
-// Images
 import { GiCutDiamond } from 'react-icons/gi';
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 // Colors
 import colors from '../../theme/colors';
@@ -63,42 +62,63 @@ const Preview3 = ({
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
 }: Props) => (
-  <StyledPreviewBox
-    id="preview-container"
-    minHeight={minHeight}
-    minWidth={minWidth}
-    width={width}
-    height={height}
-  >
-    <StyledImageHolder backgroundImage={imageUrl} onClick={handleOpenModal}>
-      <Header onClick={handleOpenModal} color={colors.fontLightGray}>
-        <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-      </Header>
-      <StyledTextWrapper onClick={handleOpenModal}>
-        <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-          {isRestrictedAsset ? (
-            <RestrictedAssetContainer height="40%">
-              <RestrictedAssetIcon />
-              {premiumContentLabel}
-            </RestrictedAssetContainer>
-          ) : (
-            <PaywallDescriptionSpan>
-              <GiCutDiamond /> {premiumContentLabel}
-            </PaywallDescriptionSpan>
-          )}
-        </StyledPaywallDescription>
-        <TitleWrapper>
-          <TitleBorder color={buttonBgColor}>
-            <PreviewText value={previewTitle} textColor={colors.white} />
-          </TitleBorder>
-          {!isRestrictedAsset && <StyledIcon color={buttonBgColor} />}
-        </TitleWrapper>
-        <DescriptionWrapper>
-          <PreviewText value={previewDescription} textColor={colors.white} />
-        </DescriptionWrapper>
-      </StyledTextWrapper>
-    </StyledImageHolder>
-  </StyledPreviewBox>
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <StyledPreviewBox
+        id="preview-container"
+        minHeight={minHeight}
+        minWidth={minWidth}
+        width={width}
+        height={height}
+      >
+        <StyledImageHolder backgroundImage={imageUrl} onClick={handleOpenModal}>
+          <Header onClick={handleOpenModal} color={colors.fontLightGray}>
+            <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+          </Header>
+          <StyledTextWrapper onClick={handleOpenModal}>
+            <StyledPaywallDescription
+              color={buttonBgColor}
+              hasProtectedByLabel={hasProtectedByLabel}
+            >
+              {isRestrictedAsset ? (
+                <RestrictedAssetContainer height="40%">
+                  <RestrictedAssetIcon />
+                  {premiumContentLabel}
+                </RestrictedAssetContainer>
+              ) : (
+                <PaywallDescriptionSpan>
+                  <GiCutDiamond /> {premiumContentLabel}
+                </PaywallDescriptionSpan>
+              )}
+            </StyledPaywallDescription>
+            <TitleWrapper>
+              <TitleBorder color={buttonBgColor}>
+                <PreviewText value={previewTitle} textColor={colors.white} />
+              </TitleBorder>
+              {!isRestrictedAsset && (
+                <StyledIcon
+                  onClick={() => {
+                    tracker.track({
+                      event: AnalyticsEvents.CLICK,
+                      type: AnalyticsComponentType.ICON,
+                      tag: 'icon_play',
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }}
+                  color={buttonBgColor}
+                />
+              )}
+            </TitleWrapper>
+            <DescriptionWrapper>
+              <PreviewText value={previewDescription} textColor={colors.white} />
+            </DescriptionWrapper>
+          </StyledTextWrapper>
+        </StyledImageHolder>
+      </StyledPreviewBox>
+    )}
+  </AnalyticsComponent>
 );
 
 export default Preview3;
diff --git a/src/paywall-previews/Preview4/Preview4.tsx b/src/paywall-previews/Preview4/Preview4.tsx
index acfff23a8..9dea35731 100644
--- a/src/paywall-previews/Preview4/Preview4.tsx
+++ b/src/paywall-previews/Preview4/Preview4.tsx
@@ -80,6 +80,7 @@ const Preview4 = ({
       <StyledContainer columns="1fr">
         {displayBuyButton && (
           <StyledButton
+            tag="button_buy"
             buttonBgColor={buttonBgColor}
             buttonTextColor={buttonTextColor}
             onClick={handleOpenModal}
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index eafa5274d..2741b5ad4 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -80,6 +80,7 @@ const Preview5 = ({
         <BuyButtonHolder>
           <BuyButtonBorder>
             <StyledBuyButton
+              tag="button_buy"
               buttonBgColor={buttonBgColor}
               buttonTextColor={buttonTextColor}
               onClick={handleOpenModal}
diff --git a/src/paywall-previews/Preview5/styled.ts b/src/paywall-previews/Preview5/styled.ts
index 27e8488da..34595c7e8 100644
--- a/src/paywall-previews/Preview5/styled.ts
+++ b/src/paywall-previews/Preview5/styled.ts
@@ -62,7 +62,7 @@ export const BuyButtonBorder = styled.div`
   overflow: hidden;
 `;
 
-export const StyledBuyButton = styled(BuyButton)<any>`
+export const StyledBuyButton = styled(BuyButton)`
   background-color: ${({ buttonBgColor }) => transparentize(0.2, buttonBgColor)};
   font-size: ${({ theme }) => theme.font.sizes.large};
   margin: 0;
diff --git a/src/paywall-previews/Preview6/Preview6.tsx b/src/paywall-previews/Preview6/Preview6.tsx
index cbdccd09a..8ba397e1b 100644
--- a/src/paywall-previews/Preview6/Preview6.tsx
+++ b/src/paywall-previews/Preview6/Preview6.tsx
@@ -90,6 +90,7 @@ const Preview6 = ({
     </ItemDetails>
     <ButtonWrapper>
       <StyledBuyButton
+        tag="button_buy"
         buttonBgColor={buttonBgColor}
         buttonTextColor={buttonTextColor}
         onClick={handleOpenModal}
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index c17fcb159..4ef98320b 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -105,6 +105,7 @@ const Preview7 = ({
     {displayBuyButton && (
       <ButtonWrapper>
         <StyledBuyButton
+          tag="button_buy"
           buttonBgColor={buttonBgColor}
           buttonTextColor={buttonTextColor}
           onClick={handleOpenModal}
diff --git a/src/paywall-previews/shared/FooterText.tsx b/src/paywall-previews/shared/FooterText.tsx
index 857c6e685..9f5eeb4d3 100644
--- a/src/paywall-previews/shared/FooterText.tsx
+++ b/src/paywall-previews/shared/FooterText.tsx
@@ -1,16 +1,52 @@
 import React from 'react';
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 type Props = {
   isAuthenticated: boolean;
   loginFooterLabel: string;
 };
-const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) =>
-  isAuthenticated ? (
-    <span>
-      Welcome back <strong>{loginFooterLabel}</strong> Access this content!
-    </span>
-  ) : (
-    <span>{loginFooterLabel}</span>
-  );
+const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) =>
+      isAuthenticated ? (
+        <span>
+          Welcome back{' '}
+          <strong
+            aria-hidden="true"
+            onClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.BUTTON,
+                tag: 'link_user_email',
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
+          >
+            {loginFooterLabel}
+          </strong>{' '}
+          Access this content!
+        </span>
+      ) : (
+        <span
+          aria-hidden="true"
+          onClick={() => {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.BUTTON,
+              tag: 'link_already_have_access_login_with_your_account',
+              pages,
+              merchantId,
+              ip,
+            });
+          }}
+        >
+          {loginFooterLabel}
+        </span>
+      )
+    }
+  </AnalyticsComponent>
+);
 
 export default FooterText;

From 23ff01920c607864fd98fd032f849dc108de4a4e Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 19 Jan 2022 19:10:11 +0100
Subject: [PATCH 103/157] fix tracking type

---
 src/paywall-previews/shared/FooterText.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/paywall-previews/shared/FooterText.tsx b/src/paywall-previews/shared/FooterText.tsx
index 9f5eeb4d3..ab9ad7242 100644
--- a/src/paywall-previews/shared/FooterText.tsx
+++ b/src/paywall-previews/shared/FooterText.tsx
@@ -16,7 +16,7 @@ const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
             onClick={() => {
               tracker.track({
                 event: AnalyticsEvents.CLICK,
-                type: AnalyticsComponentType.BUTTON,
+                type: AnalyticsComponentType.LINK,
                 tag: 'link_user_email',
                 pages,
                 merchantId,
@@ -34,7 +34,7 @@ const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
           onClick={() => {
             tracker.track({
               event: AnalyticsEvents.CLICK,
-              type: AnalyticsComponentType.BUTTON,
+              type: AnalyticsComponentType.LINK,
               tag: 'link_already_have_access_login_with_your_account',
               pages,
               merchantId,

From cfe983b1079358f20919fcc0e540f5bdf08a1e1f Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 20 Jan 2022 13:57:46 +0100
Subject: [PATCH 104/157] fix tab navigation type on tagging

---
 index.d.ts                                     | 1 +
 src/analytics/index.tsx                        | 1 +
 src/components/TabNavigation/TabNavigation.tsx | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index a70cdb387..1c22b398a 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -98,6 +98,7 @@ export enum AnalyticsComponentType {
   DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
   TAB = 'tab',
+  TAB_NAVIGATION = 'tab_navigation',
 }
 
 export interface Event {
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index b5e915025..1ca1c9ee8 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -58,6 +58,7 @@ export enum AnalyticsComponentType {
   DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
   TAB = 'tab',
+  TAB_NAVIGATION = 'tab_navigation',
 }
 
 export interface Event {
diff --git a/src/components/TabNavigation/TabNavigation.tsx b/src/components/TabNavigation/TabNavigation.tsx
index 892008221..bb664d9af 100644
--- a/src/components/TabNavigation/TabNavigation.tsx
+++ b/src/components/TabNavigation/TabNavigation.tsx
@@ -69,7 +69,7 @@ const TabNavigation = ({ tabs, onTabClick, selectedTabIndex }: Props) => (
             onClick={() => {
               tracker.track({
                 event: AnalyticsEvents.CLICK,
-                type: AnalyticsComponentType.TAB,
+                type: AnalyticsComponentType.TAB_NAVIGATION,
                 tag: tab.subTag || tab.tag || '',
                 pages,
                 merchantId,

From 87c09fa716923270cba1a510de97bfc62dfcf2b2 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 20 Jan 2022 15:22:03 +0100
Subject: [PATCH 105/157] update changelog and version

---
 CHANGELOG.md | 11 +++++++++++
 package.json |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5549d833..44b898acf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.19] - 21.01.2022
+
+## Added
+
+- Handlers for Input, TextArea, Pagination and Switch.
+- Tagging Paywall previews
+
+## Fixes
+
+- TabNavigation handler type
+
 # [2.5.18] - 10.01.2022
 
 ## Added
diff --git a/package.json b/package.json
index 00c9051ec..aa63b0527 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.17",
+  "version": "2.5.19",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From fb4988c3f8280a53ee2a9f2f748f90b9e9124efc Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Fri, 21 Jan 2022 00:53:17 +0100
Subject: [PATCH 106/157] Changes in previews in order to keep their
 consistency. (New prop restrictedMessage is added)

---
 src/paywall-previews/Preview1/Preview1.tsx    | 36 ++++++------
 src/paywall-previews/Preview1/styled.ts       | 57 ++++++++++---------
 src/paywall-previews/Preview2/Preview2.tsx    | 27 ++++-----
 src/paywall-previews/Preview2/styled.ts       |  5 +-
 src/paywall-previews/Preview3/Preview3.tsx    | 30 +++++-----
 src/paywall-previews/Preview3/styled.tsx      |  8 ++-
 src/paywall-previews/Preview4/Preview4.tsx    | 22 ++++---
 src/paywall-previews/Preview4/styled.ts       | 15 +++--
 src/paywall-previews/Preview5/Preview5.tsx    | 31 +++++-----
 src/paywall-previews/Preview6/Preview6.tsx    |  6 +-
 src/paywall-previews/Preview6/styled.ts       | 23 ++++----
 src/paywall-previews/Preview7/Preview7.tsx    | 25 ++++----
 src/paywall-previews/Preview7/styled.ts       | 22 ++++---
 .../shared/PreviewComponents.tsx              |  8 +--
 14 files changed, 162 insertions(+), 153 deletions(-)

diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index 53af29c0f..31595c354 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -8,23 +8,21 @@ import Branding from '../types/branding';
 
 // Components
 import FooterText from '../shared/FooterText';
-import {
-  OverlayLabel,
-  RestrictedAssetContainer,
-  RestrictedAssetIcon,
-} from '../shared/PreviewComponents';
 import PreviewText from '../shared/PreviewText';
+import { OverlayLabel, RestrictedAssetIcon } from '../shared/PreviewComponents';
 import {
   InPlayerPreviewBox,
   LockIcon,
   ImageHolder,
   PaywallExplain,
   InplayerWhiteLogo,
+  InplayerPremiumLabel,
   ItemDetails,
   BuyButtonWrapper,
   BuyButton,
   InplayerFooter,
   PreviewImage,
+  StyledRestrictedAssetContainer,
 } from './styled';
 
 type Props = {
@@ -37,10 +35,10 @@ type Props = {
   premiumContentLabel?: string;
   isRestrictedAsset?: boolean;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview1 = ({
   branding: {
@@ -60,32 +58,38 @@ const Preview1 = ({
   premiumContentLabel = 'Premium content',
   isRestrictedAsset = false,
   isAuthenticated = false,
+  restrictedMessage = 'This content is not available.',
 }: Props) => (
   <InPlayerPreviewBox className="inplayer-preview-box">
     {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
-    <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
+    <ImageHolder
+      className="inplayer-imageholder"
+      onClick={handleOpenModal}
+      isRestrictedAsset={isRestrictedAsset}
+    >
       <PreviewImage
         alt="coverPhoto"
         src={imageUrl}
         role="presentation"
         className="inplayer-paywall"
-        isRestrictedAsset={isRestrictedAsset}
       />
-      {isRestrictedAsset && (
-        <RestrictedAssetContainer>
-          <RestrictedAssetIcon />
-          {premiumContentLabel}
-        </RestrictedAssetContainer>
-      )}
       <PaywallExplain hasProtectedByLabel={hasProtectedByLabel} className="inplayer-paywallexplain">
         <InplayerWhiteLogo id="inplayer-whitelogo">
           <strong>{protectedByLabel} inplayer</strong>
           <a href="https://inplayer.com">InPlayer Paywall</a>
         </InplayerWhiteLogo>
-        <LockIcon className="inplayer-lock" />
-        <span>{!isRestrictedAsset && premiumContentLabel}</span>
+        <InplayerPremiumLabel>
+          <LockIcon className="inplayer-lock" />
+          <div>{premiumContentLabel}</div>
+        </InplayerPremiumLabel>
       </PaywallExplain>
     </ImageHolder>
+    {isRestrictedAsset && (
+      <StyledRestrictedAssetContainer>
+        <RestrictedAssetIcon />
+        {restrictedMessage}
+      </StyledRestrictedAssetContainer>
+    )}
     <ItemDetails className="inplayer-itemdetails">
       <PreviewText value={previewTitle} className="inplayer-title" />
       <PreviewText value={previewDescription} />
diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index d876861f1..769db030a 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -3,6 +3,7 @@ import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
 import { FaLock } from 'react-icons/fa';
 import colors from '../../theme/colors';
+import { RestrictedAssetContainer } from '../shared/PreviewComponents';
 
 export const InPlayerPreviewBox = styled.div`
   background: ${({ theme }) => theme.palette.background.main};
@@ -27,7 +28,7 @@ export const InPlayerPreviewBox = styled.div`
   }
 `;
 
-export const ImageHolder = styled.div`
+export const ImageHolder = styled.div<{ isRestrictedAsset?: boolean }>`
   width: 100%;
   background: #def;
   height: 0;
@@ -35,6 +36,11 @@ export const ImageHolder = styled.div`
   overflow: hidden;
   display: block;
   position: relative;
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.3);
+    `}
 `;
 
 interface PaywallExplainProps {
@@ -46,32 +52,25 @@ export const PaywallExplain = styled.div<PaywallExplainProps>`
   box-sizing: border-box;
   padding: 2vh 3%;
   color: ${colors.white};
-  display: ${ifProp('hasProtectedByLabel', 'block', 'none')};
+  display: ${ifProp('hasProtectedByLabel', 'flex', 'none')};
   position: absolute;
   bottom: 0;
   width: 100%;
   font-size: 13px;
   line-height: 15px;
   text-align: left;
-
-  span {
-    vertical-align: middle;
-    max-width: calc(100% - 150px);
-    display: inline-block;
-    text-align: left;
-    margin: 0;
-    position: relative;
-    font-size: 13px;
-    padding: 0;
-    line-height: 15px;
-  }
+  ${ifProp(
+    'hasProtectedByLabel',
+    css`
+      align-items: center;
+    `
+  )}
 `;
 
 export const InplayerWhiteLogo = styled.div`
   position: absolute;
   right: 3%;
   display: block;
-  margin: -4px 0 0;
   padding: 0;
   line-height: 15px;
 
@@ -87,7 +86,7 @@ export const InplayerWhiteLogo = styled.div`
     line-height: 15px;
 
     @media screen and (max-width: 600px) {
-      max-width: 73px;
+      max-width: 80px;
     }
   }
 
@@ -104,10 +103,11 @@ export const InplayerWhiteLogo = styled.div`
     margin-bottom: 2px;
     line-height: 15px;
   }
+`;
 
-  @media screen and (max-width: 476px) {
-    margin: 0px 0 0 0;
-  }
+export const InplayerPremiumLabel = styled.div`
+  display: flex;
+  align-items: center;
 `;
 
 export const ItemDetails = styled.div`
@@ -206,18 +206,11 @@ export const InplayerFooter = styled.div`
   }
 `;
 
-export const PreviewImage = styled.img<{ isRestrictedAsset?: boolean }>`
+export const PreviewImage = styled.img`
   width: 100%;
   object-fit: cover;
   object-position: 50% 50%;
   cursor: pointer;
-
-  ${({ isRestrictedAsset }) =>
-    isRestrictedAsset &&
-    css`
-      filter: brightness(0.3);
-      position: absolute;
-    `}
 `;
 
 export const LockIcon = styled(FaLock)`
@@ -225,3 +218,13 @@ export const LockIcon = styled(FaLock)`
   position: relative;
   vertical-align: middle;
 `;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  height: 50%;
+  @media screen and (max-width: 768px) {
+    height: 75%;
+  }
+  @media screen and (max-width: 480px) {
+    height: 100%;
+  }
+`;
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index 4b860cf11..1c9d5b1f9 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -1,16 +1,6 @@
 import React from 'react';
 
 // Colors
-import {
-  StyledPreviewBox,
-  StyledImageHolder,
-  AssetDetails,
-  PaywallDescriptionSpan,
-  BuyButtonWrapper,
-  StyledIcon,
-  Footer,
-  StyledRestrictedAssetContainer,
-} from './styled';
 import colors from '../../theme/colors';
 
 // Types
@@ -25,6 +15,16 @@ import {
   FooterLink,
   RestrictedAssetIcon,
 } from '../shared/PreviewComponents';
+import {
+  StyledPreviewBox,
+  StyledImageHolder,
+  AssetDetails,
+  PaywallDescriptionSpan,
+  BuyButtonWrapper,
+  StyledIcon,
+  Footer,
+  StyledRestrictedAssetContainer,
+} from './styled';
 
 type Props = {
   branding?: Branding;
@@ -37,10 +37,10 @@ type Props = {
   handleOpenModal?: (e: any) => any;
   premiumContentLabel?: string;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview2 = ({
   branding: {
@@ -61,6 +61,7 @@ const Preview2 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
+  restrictedMessage = 'This content is not available.',
 }: Props) => (
   <StyledPreviewBox
     id="preview-container"
@@ -77,14 +78,14 @@ const Preview2 = ({
     {isRestrictedAsset && (
       <StyledRestrictedAssetContainer>
         <RestrictedAssetIcon />
-        This content is not available in your country
+        {restrictedMessage}
       </StyledRestrictedAssetContainer>
     )}
     <AssetDetails>
       <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
         <PaywallDescriptionSpan>
           <StyledIcon name="star" />
-          {!isRestrictedAsset && premiumContentLabel}
+          {premiumContentLabel}
         </PaywallDescriptionSpan>
       </StyledPaywallDescription>
       <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />
diff --git a/src/paywall-previews/Preview2/styled.ts b/src/paywall-previews/Preview2/styled.ts
index 3f71bb229..f63aa0b75 100644
--- a/src/paywall-previews/Preview2/styled.ts
+++ b/src/paywall-previews/Preview2/styled.ts
@@ -65,7 +65,7 @@ export const AssetDetails = styled.div`
 `;
 
 export const PaywallDescriptionSpan = styled(DescriptionSpan)`
-  padding-bottom: 20px;
+  padding: 20px 0;
 `;
 
 export const BuyButtonWrapper = styled.div`
@@ -93,6 +93,9 @@ export const Footer = styled(PreviewFooter)`
   margin-top: 1.6em;
   text-align: left;
   padding-top: 0.5em;
+  @media screen and (max-width: 768px) {
+    text-align: center;
+  }
 `;
 
 export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index c922eeb1b..5e5b2569f 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -40,10 +40,10 @@ type Props = {
   handleOpenModal?: (e: any) => any;
   premiumContentLabel?: string;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview3 = ({
   branding: {
@@ -62,6 +62,7 @@ const Preview3 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
+  restrictedMessage = 'This content is not available.',
 }: Props) => (
   <StyledPreviewBox
     id="preview-container"
@@ -70,34 +71,37 @@ const Preview3 = ({
     width={width}
     height={height}
   >
-    <StyledImageHolder backgroundImage={imageUrl} onClick={handleOpenModal}>
+    <StyledImageHolder
+      backgroundImage={imageUrl}
+      onClick={handleOpenModal}
+      isRestrictedAsset={isRestrictedAsset}
+    >
       <Header onClick={handleOpenModal} color={colors.fontLightGray}>
         <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
       </Header>
       <StyledTextWrapper onClick={handleOpenModal}>
         <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-          {isRestrictedAsset ? (
-            <RestrictedAssetContainer height="40%">
-              <RestrictedAssetIcon />
-              {premiumContentLabel}
-            </RestrictedAssetContainer>
-          ) : (
-            <PaywallDescriptionSpan>
-              <GiCutDiamond /> {premiumContentLabel}
-            </PaywallDescriptionSpan>
-          )}
+          <PaywallDescriptionSpan>
+            <GiCutDiamond /> {premiumContentLabel}
+          </PaywallDescriptionSpan>
         </StyledPaywallDescription>
         <TitleWrapper>
           <TitleBorder color={buttonBgColor}>
             <PreviewText value={previewTitle} textColor={colors.white} />
           </TitleBorder>
-          {!isRestrictedAsset && <StyledIcon color={buttonBgColor} />}
+          <StyledIcon color={buttonBgColor} />
         </TitleWrapper>
         <DescriptionWrapper>
           <PreviewText value={previewDescription} textColor={colors.white} />
         </DescriptionWrapper>
       </StyledTextWrapper>
     </StyledImageHolder>
+    {isRestrictedAsset && (
+      <RestrictedAssetContainer height="50%">
+        <RestrictedAssetIcon />
+        {restrictedMessage}
+      </RestrictedAssetContainer>
+    )}
   </StyledPreviewBox>
 );
 
diff --git a/src/paywall-previews/Preview3/styled.tsx b/src/paywall-previews/Preview3/styled.tsx
index 570623137..ccbc8bc00 100644
--- a/src/paywall-previews/Preview3/styled.tsx
+++ b/src/paywall-previews/Preview3/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { FaRegPlayCircle } from 'react-icons/fa';
 import { transparentize } from 'polished';
 
@@ -23,6 +23,7 @@ export const StyledPreviewBox = styled(PreviewBox)`
 
 type StyledImageHolderProps = {
   backgroundImage: string;
+  isRestrictedAsset?: boolean;
 };
 
 export const StyledImageHolder = styled(ImageHolder)<StyledImageHolderProps>`
@@ -36,6 +37,11 @@ export const StyledImageHolder = styled(ImageHolder)<StyledImageHolderProps>`
       ${transparentize(0.5, colors.black)} 100%
     ),
     url(${({ backgroundImage }) => backgroundImage});
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.3);
+    `}
 `;
 
 export const Header = styled(PreviewFooter)`
diff --git a/src/paywall-previews/Preview4/Preview4.tsx b/src/paywall-previews/Preview4/Preview4.tsx
index acfff23a8..c3d65ea17 100644
--- a/src/paywall-previews/Preview4/Preview4.tsx
+++ b/src/paywall-previews/Preview4/Preview4.tsx
@@ -39,12 +39,11 @@ type Props = {
   width?: string;
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
-  premiumContentLabel?: string;
+  restrictedMessage?: string;
 };
 
 const removeTags = (str: string) => str.replace(/<.*?>/g, ' ').replace(/ +/g, ' ').trim();
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview4 = ({
   branding: {
@@ -64,7 +63,7 @@ const Preview4 = ({
   width = '',
   isRestrictedAsset = false,
   handleOpenModal,
-  premiumContentLabel = 'Premium content',
+  restrictedMessage = 'This content is not available.',
 }: Props) => {
   const previewTitleText = removeTags(previewTitle);
   const previewDescriptionText = removeTags(previewDescription);
@@ -88,7 +87,7 @@ const Preview4 = ({
           </StyledButton>
         )}
       </StyledContainer>
-      <ImageWrapper onClick={handleOpenModal}>
+      <ImageWrapper onClick={handleOpenModal} isRestrictedAsset={isRestrictedAsset}>
         <StyledIconWrapper
           backgroundColor={buttonBgColor}
           hasProtectedByLabel={hasProtectedByLabel}
@@ -97,14 +96,7 @@ const Preview4 = ({
             <FaLock />
           </Icon>
         </StyledIconWrapper>
-        <StyledPreviewImage isRestrictedAsset={isRestrictedAsset} src={imageUrl} />
-        {isRestrictedAsset && (
-          <RestrictedAssetContainer>
-            <RestrictedAssetIcon />
-            {premiumContentLabel}
-          </RestrictedAssetContainer>
-        )}
-
+        <StyledPreviewImage src={imageUrl} />
         <StyledTextWrapper>
           <TextElement width={width}>
             <PreviewText
@@ -125,6 +117,12 @@ const Preview4 = ({
           </TextElement>
         </StyledTextWrapper>
       </ImageWrapper>
+      {isRestrictedAsset && (
+        <RestrictedAssetContainer>
+          <RestrictedAssetIcon />
+          {restrictedMessage}
+        </RestrictedAssetContainer>
+      )}
     </StyledPreviewBox>
   );
 };
diff --git a/src/paywall-previews/Preview4/styled.ts b/src/paywall-previews/Preview4/styled.ts
index a42e00a30..74a1020ea 100644
--- a/src/paywall-previews/Preview4/styled.ts
+++ b/src/paywall-previews/Preview4/styled.ts
@@ -30,11 +30,16 @@ export const StyledButton = styled(BuyButton)`
   height: 3rem;
 `;
 
-export const ImageWrapper = styled(ImageHolder)`
+export const ImageWrapper = styled(ImageHolder)<{ isRestrictedAsset: boolean }>`
   height: 100%;
   min-height: 310px;
   margin: 0;
   cursor: pointer;
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.3);
+    `}
 `;
 
 export const StyledIconWrapper = styled(IconWrapper)`
@@ -55,14 +60,8 @@ export const Icon = styled.div`
   transform: rotate(-45deg);
 `;
 
-export const StyledPreviewImage = styled(PreviewImage)<{ isRestrictedAsset?: boolean }>`
+export const StyledPreviewImage = styled(PreviewImage)`
   position: absolute;
-
-  ${({ isRestrictedAsset }) =>
-    isRestrictedAsset &&
-    css`
-      filter: brightness(0.3);
-    `}
 `;
 
 export const StyledTextWrapper = styled(TextWrapper)`
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index eafa5274d..1679dcfdd 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -26,7 +26,6 @@ import {
   PaywallDescriptionSpan,
   TitleHolder,
   DescriptionHolder,
-  RestrictedAssetText,
 } from './styled';
 
 type Props = {
@@ -38,10 +37,10 @@ type Props = {
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
   premiumContentLabel?: string;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview5 = ({
   branding: {
@@ -60,6 +59,7 @@ const Preview5 = ({
   handleOpenModal,
   isRestrictedAsset = false,
   premiumContentLabel = 'Premium content',
+  restrictedMessage = 'This content is not available.',
 }: Props) => (
   <StyledPreviewBox
     id="preview-container"
@@ -75,25 +75,22 @@ const Preview5 = ({
       onClick={handleOpenModal}
     >
       <Overlay />
-
-      {!isRestrictedAsset && (
-        <BuyButtonHolder>
-          <BuyButtonBorder>
-            <StyledBuyButton
-              buttonBgColor={buttonBgColor}
-              buttonTextColor={buttonTextColor}
-              onClick={handleOpenModal}
-            >
-              {previewButtonLabel}
-            </StyledBuyButton>
-          </BuyButtonBorder>
-        </BuyButtonHolder>
-      )}
+      <BuyButtonHolder>
+        <BuyButtonBorder>
+          <StyledBuyButton
+            buttonBgColor={buttonBgColor}
+            buttonTextColor={buttonTextColor}
+            onClick={handleOpenModal}
+          >
+            {previewButtonLabel}
+          </StyledBuyButton>
+        </BuyButtonBorder>
+      </BuyButtonHolder>
     </ImageWrapper>
     {isRestrictedAsset && (
       <RestrictedAssetContainer height="38%">
         <RestrictedAssetIcon />
-        {premiumContentLabel}
+        {restrictedMessage}
       </RestrictedAssetContainer>
     )}
     <ItemDetails height={height}>
diff --git a/src/paywall-previews/Preview6/Preview6.tsx b/src/paywall-previews/Preview6/Preview6.tsx
index cbdccd09a..e92c21080 100644
--- a/src/paywall-previews/Preview6/Preview6.tsx
+++ b/src/paywall-previews/Preview6/Preview6.tsx
@@ -40,10 +40,10 @@ type Props = {
   handleOpenModal?: (e: any) => any;
   isAuthenticated?: boolean;
   premiumContentLabel?: string;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview6 = ({
   branding: {
@@ -63,7 +63,7 @@ const Preview6 = ({
   isRestrictedAsset = false,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
-  premiumContentLabel = 'Premium content',
+  restrictedMessage = 'This content is not available in your current location.',
 }: Props) => (
   <StyledPreviewBox
     id="preview-container"
@@ -80,7 +80,7 @@ const Preview6 = ({
     {isRestrictedAsset && (
       <StyledRestrictedAssetContainer fontSize="14px">
         <RestrictedAssetIcon size="5rem" />
-        {premiumContentLabel}
+        {restrictedMessage}
       </StyledRestrictedAssetContainer>
     )}
 
diff --git a/src/paywall-previews/Preview6/styled.ts b/src/paywall-previews/Preview6/styled.ts
index 7bc386c18..b9a9dc265 100644
--- a/src/paywall-previews/Preview6/styled.ts
+++ b/src/paywall-previews/Preview6/styled.ts
@@ -24,12 +24,6 @@ export const StyledPreviewBox = styled(PreviewBox)`
   }
 `;
 
-export const Container = styled.div`
-  /* @media screen and (max-width: 1100px) {
-    position: relative;
-  } */
-`;
-
 interface ImageWrapperProps {
   backgroundImage: string;
   isRestrictedAsset?: boolean;
@@ -84,8 +78,6 @@ export const StyledBuyButton = styled(BuyButton)`
 `;
 
 export const PreviewFooter = styled.div`
-  float: right;
-  text-align: right;
   display: flex;
   align-items: flex-end;
   @media screen and (max-width: 1100px) {
@@ -109,11 +101,20 @@ export const IconHolder = styled.div<IconHolderProps>`
 `;
 
 export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
-  width: 50%;
-  top: 45%;
+  width: 35%;
+  top: 50%;
   left: 20%;
+  @media screen and (max-width: 768px) {
+    font-size: 10px;
+    svg {
+      width: 3rem;
+      height: 3rem;
+      margin-bottom: 0rem;
+    }
+  }
   @media screen and (max-width: 1100px) {
+    height: 50%;
     left: 25%;
-    top: 32%;
+    top: 35%;
   }
 `;
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index c17fcb159..613ebc566 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -9,17 +9,16 @@ import Branding from '../types/branding';
 
 // Components
 import FooterText from '../shared/FooterText';
+import PreviewText from '../shared/PreviewText';
 import {
   OverlayLabel,
-  PreviewFooterLink,
-  RestrictedAssetContainer,
   RestrictedAssetIcon,
+  PreviewFooterLink,
+  PreviewImage,
 } from '../shared/PreviewComponents';
-import PreviewText from '../shared/PreviewText';
 import {
   StyledPreviewBox,
   StyledImageWrapper,
-  StyledPreviewImage,
   StyledIconWrapper,
   ItemDetails,
   PreviewHeader,
@@ -27,6 +26,7 @@ import {
   ButtonWrapper,
   StyledBuyButton,
   StyledPreviewFooter,
+  StyledRestrictedAssetContainer,
 } from './styled';
 
 type Props = {
@@ -42,10 +42,10 @@ type Props = {
   handleOpenModal?: (e: any) => any;
   isAuthenticated?: boolean;
   premiumContentLabel?: string;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview7 = ({
   branding: {
@@ -67,7 +67,7 @@ const Preview7 = ({
   isRestrictedAsset = false,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
-  premiumContentLabel = 'Premium content',
+  restrictedMessage = 'This content is not available.',
 }: Props) => (
   <StyledPreviewBox
     id="preview-container"
@@ -78,17 +78,12 @@ const Preview7 = ({
   >
     {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
     <StyledImageWrapper onClick={handleOpenModal}>
-      <StyledPreviewImage
-        isRestrictedAsset={isRestrictedAsset}
-        src={imageUrl}
-        imageWidth="250px"
-        imageBorderRadius
-      />
+      <PreviewImage src={imageUrl} imageWidth="250px" imageBorderRadius />
       {isRestrictedAsset && (
-        <RestrictedAssetContainer fontSize="14px">
+        <StyledRestrictedAssetContainer fontSize="14px" imageWidth="250px" imageBorderRadius>
           <RestrictedAssetIcon size="4rem" />
-          {premiumContentLabel}
-        </RestrictedAssetContainer>
+          {restrictedMessage}
+        </StyledRestrictedAssetContainer>
       )}
       <StyledIconWrapper backgroundColor={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
         <FaLock />
diff --git a/src/paywall-previews/Preview7/styled.ts b/src/paywall-previews/Preview7/styled.ts
index 4f08ef573..d44965edb 100644
--- a/src/paywall-previews/Preview7/styled.ts
+++ b/src/paywall-previews/Preview7/styled.ts
@@ -1,5 +1,4 @@
-import styled, { css } from 'styled-components';
-import { MdDoNotDisturbAlt } from 'react-icons/md';
+import styled from 'styled-components';
 
 // utils
 import colors from '../../theme/colors';
@@ -12,7 +11,8 @@ import {
   ImageHolder,
   BuyButton,
   IconWrapper,
-  PreviewImage,
+  PreviewImageProps,
+  RestrictedAssetContainer,
 } from '../shared/PreviewComponents';
 
 export const StyledPreviewBox = styled(PreviewBox)`
@@ -31,15 +31,6 @@ export const StyledImageWrapper = styled(ImageHolder)`
   background: ${({ theme }) => theme.palette.background.main};
 `;
 
-export const StyledPreviewImage = styled(PreviewImage)<any>`
-  height: 250px;
-  ${({ isRestrictedAsset }) =>
-    isRestrictedAsset &&
-    css`
-      filter: brightness(0.3);
-    `}
-`;
-
 export const StyledIconWrapper = styled(IconWrapper)`
   padding: 12px;
   color: ${colors.white};
@@ -99,3 +90,10 @@ export const RestrictedAssetText = styled.p`
   left: 50%;
   transform: translate(-50%, -50%);
 `;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)<PreviewImageProps>`
+  height: 100%;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+`;
diff --git a/src/paywall-previews/shared/PreviewComponents.tsx b/src/paywall-previews/shared/PreviewComponents.tsx
index 8d94e611b..09c9c1e7f 100644
--- a/src/paywall-previews/shared/PreviewComponents.tsx
+++ b/src/paywall-previews/shared/PreviewComponents.tsx
@@ -32,10 +32,10 @@ export const PreviewBox = styled.div<PreviewBoxProps>`
   margin: 24px auto;
 `;
 
-type PreviewImageProps = {
-  imageBorderRadius?: string;
-  isRestrictedAsset?: boolean;
-};
+export interface PreviewImageProps {
+  imageBorderRadius?: boolean;
+  imageWidth?: string;
+}
 
 export const PreviewImage = styled.img<PreviewImageProps>`
   width: ${prop('imageWidth', '100%')};

From 13e4bf9ee94613bc74ddb8359a9a19aaaf395b1d Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Fri, 21 Jan 2022 09:19:43 +0100
Subject: [PATCH 107/157] Changelog updated

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5549d833..b33c0e848 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.19] - 21.01.2022
+
+## Change
+
+- Styling changes in preview templates for restricted asset
+
 # [2.5.18] - 10.01.2022
 
 ## Added

From 25d515842e4d67beb04ffd2e2686bba619c4f3e3 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Fri, 21 Jan 2022 09:43:42 +0100
Subject: [PATCH 108/157] Make isRestrictedAsset non optional prop

---
 src/paywall-previews/Preview1/styled.ts    | 2 +-
 src/paywall-previews/Preview3/styled.tsx   | 2 +-
 src/paywall-previews/Preview7/Preview7.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index 769db030a..f380d1c70 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -28,7 +28,7 @@ export const InPlayerPreviewBox = styled.div`
   }
 `;
 
-export const ImageHolder = styled.div<{ isRestrictedAsset?: boolean }>`
+export const ImageHolder = styled.div<{ isRestrictedAsset: boolean }>`
   width: 100%;
   background: #def;
   height: 0;
diff --git a/src/paywall-previews/Preview3/styled.tsx b/src/paywall-previews/Preview3/styled.tsx
index ccbc8bc00..57faffd08 100644
--- a/src/paywall-previews/Preview3/styled.tsx
+++ b/src/paywall-previews/Preview3/styled.tsx
@@ -23,7 +23,7 @@ export const StyledPreviewBox = styled(PreviewBox)`
 
 type StyledImageHolderProps = {
   backgroundImage: string;
-  isRestrictedAsset?: boolean;
+  isRestrictedAsset: boolean;
 };
 
 export const StyledImageHolder = styled(ImageHolder)<StyledImageHolderProps>`
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index 613ebc566..4980c8411 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -64,7 +64,7 @@ const Preview7 = ({
   minHeight = '460px',
   height = '',
   width = '',
-  isRestrictedAsset = false,
+  isRestrictedAsset = true,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
   restrictedMessage = 'This content is not available.',

From c39b25dd584bf91bd15caff7d418f385b6c03d60 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Fri, 21 Jan 2022 09:46:28 +0100
Subject: [PATCH 109/157] Remove forgotten true value for isRestrictedAsset

---
 src/paywall-previews/Preview7/Preview7.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index 4980c8411..613ebc566 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -64,7 +64,7 @@ const Preview7 = ({
   minHeight = '460px',
   height = '',
   width = '',
-  isRestrictedAsset = true,
+  isRestrictedAsset = false,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
   restrictedMessage = 'This content is not available.',

From e61be7349592a8275cf2e7140ba3d41434f02f35 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 21 Jan 2022 11:38:31 +0100
Subject: [PATCH 110/157] add handler for accordion

---
 index.d.ts                                  |  1 +
 src/analytics/index.tsx                     |  1 +
 src/components/Accordion/AccordionPanel.tsx | 58 +++++++++++++++------
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index a70cdb387..5a64e3d56 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -98,6 +98,7 @@ export enum AnalyticsComponentType {
   DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
   TAB = 'tab',
+  ACCORDION = 'accordion',
 }
 
 export interface Event {
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index b5e915025..024c0b8e1 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -58,6 +58,7 @@ export enum AnalyticsComponentType {
   DAYPICKER = 'daypicker',
   DATEPICKER_PRESET = 'datepicker_preset',
   TAB = 'tab',
+  ACCORDION = 'accordion',
 }
 
 export interface Event {
diff --git a/src/components/Accordion/AccordionPanel.tsx b/src/components/Accordion/AccordionPanel.tsx
index 175f27408..69fcafcd8 100644
--- a/src/components/Accordion/AccordionPanel.tsx
+++ b/src/components/Accordion/AccordionPanel.tsx
@@ -1,13 +1,18 @@
 import React, { SyntheticEvent, ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp, ifNotProp, prop } from 'styled-tools';
+import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 // Components
-import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
 import colors from '../../theme/colors';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 import Typography from '../Typography';
-import { AnalyticsProps } from '../../analytics';
 
 // Types
 type AccordionPanelContainerProps = {
@@ -138,23 +143,42 @@ const AccordionPanel = ({
   disabled,
   togglePanel,
   closePanel,
-  tag,
+  tag = '',
 }: Props) => (
   <>
-    <AccordionPanelHeader
-      disabled={disabled}
-      onClick={!disabled ? togglePanel : null}
-      isActive={isActive}
-      tag={tag}
-    >
-      <AccordionTitle variant="h6" isActive={isActive} disabled={disabled}>
-        {label}
-      </AccordionTitle>
-      <AccordionIconHolder isAccordionDisabled={disabled}>
-        {!isOtherPanelActive && (iconTooltip ? <Tooltip {...iconTooltip}>{icon}</Tooltip> : icon)}
-        {!disabled && (isActive ? <StyledAngleUp /> : <StyledAngleDown />)}
-      </AccordionIconHolder>
-    </AccordionPanelHeader>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <AccordionPanelHeader
+          disabled={disabled}
+          onClick={(e: SyntheticEvent<Element, Event>) => {
+            if (!disabled) {
+              togglePanel(e);
+              if (tag && !isActive) {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.ACCORDION,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }
+            }
+          }}
+          isActive={isActive}
+          tag={tag}
+        >
+          <AccordionTitle variant="h6" isActive={isActive} disabled={disabled}>
+            {label}
+          </AccordionTitle>
+          <AccordionIconHolder isAccordionDisabled={disabled}>
+            {!isOtherPanelActive &&
+              (iconTooltip ? <Tooltip {...iconTooltip}>{icon}</Tooltip> : icon)}
+            {!disabled && (isActive ? <StyledAngleUp /> : <StyledAngleDown />)}
+          </AccordionIconHolder>
+        </AccordionPanelHeader>
+      )}
+    </AnalyticsComponent>
     <AccordionPanelContainer isActive={isActive} contentHeight={contentHeight}>
       <AccordionPanelDetails>{isActive && renderContent({ closePanel })}</AccordionPanelDetails>
     </AccordionPanelContainer>

From 54b49a2b010aa5ce722f6d0f3249b949aaf3c5d3 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 21 Jan 2022 11:48:54 +0100
Subject: [PATCH 111/157] update chl

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44b898acf..3061e2143 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ All notable changes to this project will be documented in this file.
 
 ## Added
 
-- Handlers for Input, TextArea, Pagination and Switch.
+- Handlers for Input, TextArea, Pagination, Accordion and Switch.
 - Tagging Paywall previews
 
 ## Fixes

From a13f937a5191fe70581ccbfcfa63396a2bf076c9 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 21 Jan 2022 12:30:56 +0100
Subject: [PATCH 112/157] refactor switch handler

---
 src/components/Switch/Switch.tsx | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 3ee3c084f..4687a3197 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -101,25 +101,16 @@ const Switch = ({
               checked={checked}
               onChange={(e) => {
                 if (tag) {
-                  if (e.target.checked) {
-                    tracker.track({
-                      event: AnalyticsEvents.SWITCH_ON,
-                      type: AnalyticsComponentType.SWITCH,
-                      tag,
-                      pages,
-                      merchantId,
-                      ip,
-                    });
-                  } else {
-                    tracker.track({
-                      event: AnalyticsEvents.SWITCH_OFF,
-                      type: AnalyticsComponentType.SWITCH,
-                      tag,
-                      pages,
-                      merchantId,
-                      ip,
-                    });
-                  }
+                  tracker.track({
+                    event: e.target.checked
+                      ? AnalyticsEvents.SWITCH_ON
+                      : AnalyticsEvents.SWITCH_OFF,
+                    type: AnalyticsComponentType.SWITCH,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
                 }
                 onToggleChange(e);
               }}

From 1653fe8c8e2a24c58ea4c93017636e2fb54c7b01 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 21 Jan 2022 14:52:36 +0100
Subject: [PATCH 113/157] fix textarea component and remove unnecessary event

---
 src/components/TextArea/TextArea.tsx | 25 ++++++-------------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index f021f789a..8fe5e68ce 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -1,4 +1,4 @@
-import React, { KeyboardEvent } from 'react';
+import React, { KeyboardEvent, TextareaHTMLAttributes } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -9,7 +9,9 @@ import {
 } from '../../analytics';
 import colors from '../../theme/colors';
 
-const TextAreaWrapper = styled.textarea<AnalyticsProps>`
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & AnalyticsProps;
+
+const TextAreaWrapper = styled.textarea<Props>`
   vertical-align: middle;
   box-sizing: border-box;
   overflow: hidden;
@@ -32,26 +34,10 @@ const TextAreaWrapper = styled.textarea<AnalyticsProps>`
   }
 `;
 
-type Props = AnalyticsProps;
-
-const TextArea = ({ tag = '' }: Props) => (
+const TextArea = ({ tag = '', ...rest }: Props) => (
   <AnalyticsComponent>
     {({ pages, tracker, merchantId, ip }) => (
       <TextAreaWrapper
-        onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {
-          if (tag) {
-            if (e.key === 'Enter') {
-              tracker.track({
-                event: AnalyticsEvents.CLICK,
-                type: AnalyticsComponentType.TEXTAREA,
-                tag: `${tag}_enter`,
-                pages,
-                merchantId,
-                ip,
-              });
-            }
-          }
-        }}
         onClick={() => {
           if (tag) {
             tracker.track({
@@ -64,6 +50,7 @@ const TextArea = ({ tag = '' }: Props) => (
             });
           }
         }}
+        {...rest}
       />
     )}
   </AnalyticsComponent>

From b21a802d5f0daf2cefd7ab9b26b0f94a50e46f73 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 21 Jan 2022 15:37:20 +0100
Subject: [PATCH 114/157] update changelog and ui version

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3061e2143..2d811ab9f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.20] - 21.01.2022
+
 # [2.5.19] - 21.01.2022
 
+## Fixes
+
+- TextArea by providing the required props
+
 ## Added
 
 - Handlers for Input, TextArea, Pagination, Accordion and Switch.
diff --git a/package.json b/package.json
index aa63b0527..283322eed 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.19",
+  "version": "2.5.20",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 392d18426c82c7d4301abf896071b424f73530bc Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 21 Jan 2022 15:38:13 +0100
Subject: [PATCH 115/157] update chl

---
 CHANGELOG.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d811ab9f..28b675457 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,11 +4,10 @@ All notable changes to this project will be documented in this file.
 
 # [2.5.20] - 21.01.2022
 
-# [2.5.19] - 21.01.2022
-
 ## Fixes
 
 - TextArea by providing the required props
+# [2.5.19] - 21.01.2022
 
 ## Added
 

From 939bac96088c2e8f1696e4e176c3a13a0de9d961 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 21 Jan 2022 15:38:50 +0100
Subject: [PATCH 116/157] format chl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28b675457..138733cd7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 ## Fixes
 
 - TextArea by providing the required props
+
 # [2.5.19] - 21.01.2022
 
 ## Added

From 7f65a359460721bb95d1caa153c5523193d0ca5a Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Sat, 22 Jan 2022 01:02:25 +0100
Subject: [PATCH 117/157] Call handleOpenModal on click on restricted container
 & made some style changes related to restricted container

---
 src/paywall-previews/Preview1/Preview1.tsx    | 27 ++++++++++---------
 src/paywall-previews/Preview1/styled.ts       | 17 +-----------
 src/paywall-previews/Preview2/Preview2.tsx    |  4 ++-
 src/paywall-previews/Preview2/styled.ts       |  7 ++++-
 src/paywall-previews/Preview3/Preview3.tsx    | 22 +++++++--------
 src/paywall-previews/Preview3/styled.tsx      |  6 -----
 src/paywall-previews/Preview4/Preview4.tsx    | 12 ++++-----
 src/paywall-previews/Preview5/Preview5.tsx    | 23 +++++++---------
 src/paywall-previews/Preview5/styled.ts       |  6 -----
 src/paywall-previews/Preview6/Preview6.tsx    |  2 +-
 src/paywall-previews/Preview7/Preview7.tsx    | 11 ++++++--
 src/paywall-previews/Preview7/styled.ts       |  4 +--
 .../shared/PreviewComponents.tsx              |  6 +++++
 13 files changed, 68 insertions(+), 79 deletions(-)

diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index 31595c354..88cce3e61 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -9,7 +9,11 @@ import Branding from '../types/branding';
 // Components
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
-import { OverlayLabel, RestrictedAssetIcon } from '../shared/PreviewComponents';
+import {
+  OverlayLabel,
+  RestrictedAssetIcon,
+  StyledRestrictedAssetContainer,
+} from '../shared/PreviewComponents';
 import {
   InPlayerPreviewBox,
   LockIcon,
@@ -22,7 +26,6 @@ import {
   BuyButton,
   InplayerFooter,
   PreviewImage,
-  StyledRestrictedAssetContainer,
 } from './styled';
 
 type Props = {
@@ -62,11 +65,15 @@ const Preview1 = ({
 }: Props) => (
   <InPlayerPreviewBox className="inplayer-preview-box">
     {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
-    <ImageHolder
-      className="inplayer-imageholder"
-      onClick={handleOpenModal}
-      isRestrictedAsset={isRestrictedAsset}
-    >
+    <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
+      {isRestrictedAsset && (
+        // Call handleOpenModal here because this div element will be
+        // on the top of all image elements in case of restricted asset
+        <StyledRestrictedAssetContainer onClick={handleOpenModal}>
+          <RestrictedAssetIcon />
+          {restrictedMessage}
+        </StyledRestrictedAssetContainer>
+      )}
       <PreviewImage
         alt="coverPhoto"
         src={imageUrl}
@@ -84,12 +91,6 @@ const Preview1 = ({
         </InplayerPremiumLabel>
       </PaywallExplain>
     </ImageHolder>
-    {isRestrictedAsset && (
-      <StyledRestrictedAssetContainer>
-        <RestrictedAssetIcon />
-        {restrictedMessage}
-      </StyledRestrictedAssetContainer>
-    )}
     <ItemDetails className="inplayer-itemdetails">
       <PreviewText value={previewTitle} className="inplayer-title" />
       <PreviewText value={previewDescription} />
diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index f380d1c70..ba16a8c02 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -28,7 +28,7 @@ export const InPlayerPreviewBox = styled.div`
   }
 `;
 
-export const ImageHolder = styled.div<{ isRestrictedAsset: boolean }>`
+export const ImageHolder = styled.div`
   width: 100%;
   background: #def;
   height: 0;
@@ -36,11 +36,6 @@ export const ImageHolder = styled.div<{ isRestrictedAsset: boolean }>`
   overflow: hidden;
   display: block;
   position: relative;
-  ${({ isRestrictedAsset }) =>
-    isRestrictedAsset &&
-    css`
-      filter: brightness(0.3);
-    `}
 `;
 
 interface PaywallExplainProps {
@@ -218,13 +213,3 @@ export const LockIcon = styled(FaLock)`
   position: relative;
   vertical-align: middle;
 `;
-
-export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
-  height: 50%;
-  @media screen and (max-width: 768px) {
-    height: 75%;
-  }
-  @media screen and (max-width: 480px) {
-    height: 100%;
-  }
-`;
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index 1c9d5b1f9..c15bead7c 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -76,7 +76,9 @@ const Preview2 = ({
       onClick={handleOpenModal}
     />
     {isRestrictedAsset && (
-      <StyledRestrictedAssetContainer>
+      // Call handleOpenModal here because this div element will be
+      // on the top of image container in case of restricted asset
+      <StyledRestrictedAssetContainer onClick={handleOpenModal}>
         <RestrictedAssetIcon />
         {restrictedMessage}
       </StyledRestrictedAssetContainer>
diff --git a/src/paywall-previews/Preview2/styled.ts b/src/paywall-previews/Preview2/styled.ts
index f63aa0b75..119dad2eb 100644
--- a/src/paywall-previews/Preview2/styled.ts
+++ b/src/paywall-previews/Preview2/styled.ts
@@ -99,9 +99,14 @@ export const Footer = styled(PreviewFooter)`
 `;
 
 export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  width: 50%;
   left: 25%;
   @media screen and (max-width: 768px) {
+    width: 100%;
     left: 50%;
-    top: 30%;
+    top: 25%;
+  }
+  @media screen and (max-width: 480px) {
+    top: 20%;
   }
 `;
diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index 5e5b2569f..10dec6945 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -10,7 +10,7 @@ import colors from '../../theme/colors';
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
 import {
-  RestrictedAssetContainer,
+  StyledRestrictedAssetContainer,
   RestrictedAssetIcon,
   StyledPaywallDescription,
 } from '../shared/PreviewComponents';
@@ -71,11 +71,15 @@ const Preview3 = ({
     width={width}
     height={height}
   >
-    <StyledImageHolder
-      backgroundImage={imageUrl}
-      onClick={handleOpenModal}
-      isRestrictedAsset={isRestrictedAsset}
-    >
+    <StyledImageHolder backgroundImage={imageUrl} onClick={handleOpenModal}>
+      {isRestrictedAsset && (
+        // Call handleOpenModal here because this div element will be
+        // on the top of all image elements in case of restricted asset
+        <StyledRestrictedAssetContainer height="50%" onClick={handleOpenModal}>
+          <RestrictedAssetIcon />
+          {restrictedMessage}
+        </StyledRestrictedAssetContainer>
+      )}
       <Header onClick={handleOpenModal} color={colors.fontLightGray}>
         <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
       </Header>
@@ -96,12 +100,6 @@ const Preview3 = ({
         </DescriptionWrapper>
       </StyledTextWrapper>
     </StyledImageHolder>
-    {isRestrictedAsset && (
-      <RestrictedAssetContainer height="50%">
-        <RestrictedAssetIcon />
-        {restrictedMessage}
-      </RestrictedAssetContainer>
-    )}
   </StyledPreviewBox>
 );
 
diff --git a/src/paywall-previews/Preview3/styled.tsx b/src/paywall-previews/Preview3/styled.tsx
index 57faffd08..9d0e59dff 100644
--- a/src/paywall-previews/Preview3/styled.tsx
+++ b/src/paywall-previews/Preview3/styled.tsx
@@ -23,7 +23,6 @@ export const StyledPreviewBox = styled(PreviewBox)`
 
 type StyledImageHolderProps = {
   backgroundImage: string;
-  isRestrictedAsset: boolean;
 };
 
 export const StyledImageHolder = styled(ImageHolder)<StyledImageHolderProps>`
@@ -37,11 +36,6 @@ export const StyledImageHolder = styled(ImageHolder)<StyledImageHolderProps>`
       ${transparentize(0.5, colors.black)} 100%
     ),
     url(${({ backgroundImage }) => backgroundImage});
-  ${({ isRestrictedAsset }) =>
-    isRestrictedAsset &&
-    css`
-      filter: brightness(0.3);
-    `}
 `;
 
 export const Header = styled(PreviewFooter)`
diff --git a/src/paywall-previews/Preview4/Preview4.tsx b/src/paywall-previews/Preview4/Preview4.tsx
index c3d65ea17..e321ba86a 100644
--- a/src/paywall-previews/Preview4/Preview4.tsx
+++ b/src/paywall-previews/Preview4/Preview4.tsx
@@ -87,6 +87,12 @@ const Preview4 = ({
           </StyledButton>
         )}
       </StyledContainer>
+      {isRestrictedAsset && (
+        <RestrictedAssetContainer onClick={handleOpenModal}>
+          <RestrictedAssetIcon />
+          {restrictedMessage}
+        </RestrictedAssetContainer>
+      )}
       <ImageWrapper onClick={handleOpenModal} isRestrictedAsset={isRestrictedAsset}>
         <StyledIconWrapper
           backgroundColor={buttonBgColor}
@@ -117,12 +123,6 @@ const Preview4 = ({
           </TextElement>
         </StyledTextWrapper>
       </ImageWrapper>
-      {isRestrictedAsset && (
-        <RestrictedAssetContainer>
-          <RestrictedAssetIcon />
-          {restrictedMessage}
-        </RestrictedAssetContainer>
-      )}
     </StyledPreviewBox>
   );
 };
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index 1679dcfdd..f226f8fdf 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -10,7 +10,7 @@ import Branding from '../types/branding';
 
 // Components
 import {
-  RestrictedAssetContainer,
+  StyledRestrictedAssetContainer,
   RestrictedAssetIcon,
   StyledPaywallDescription,
 } from '../shared/PreviewComponents';
@@ -68,12 +68,15 @@ const Preview5 = ({
     width={width}
     height={height}
   >
-    <ImageWrapper
-      isRestrictedAsset={isRestrictedAsset}
-      height={height}
-      backgroundImage={imageUrl}
-      onClick={handleOpenModal}
-    >
+    <ImageWrapper height={height} backgroundImage={imageUrl} onClick={handleOpenModal}>
+      {isRestrictedAsset && (
+        // Call handleOpenModal here because this div element will be
+        // on the top of all image elements in case of restricted asset
+        <StyledRestrictedAssetContainer onClick={handleOpenModal}>
+          <RestrictedAssetIcon />
+          {restrictedMessage}
+        </StyledRestrictedAssetContainer>
+      )}
       <Overlay />
       <BuyButtonHolder>
         <BuyButtonBorder>
@@ -87,12 +90,6 @@ const Preview5 = ({
         </BuyButtonBorder>
       </BuyButtonHolder>
     </ImageWrapper>
-    {isRestrictedAsset && (
-      <RestrictedAssetContainer height="38%">
-        <RestrictedAssetIcon />
-        {restrictedMessage}
-      </RestrictedAssetContainer>
-    )}
     <ItemDetails height={height}>
       <StyledPaywallDescription
         color={lighten(0.01, buttonBgColor)}
diff --git a/src/paywall-previews/Preview5/styled.ts b/src/paywall-previews/Preview5/styled.ts
index 27e8488da..626bae2b3 100644
--- a/src/paywall-previews/Preview5/styled.ts
+++ b/src/paywall-previews/Preview5/styled.ts
@@ -21,18 +21,12 @@ export const StyledPreviewBox = styled(PreviewBox)<any>`
 type ImageWrapperProps = {
   height: any;
   backgroundImage: any;
-  isRestrictedAsset?: boolean;
 };
 
 export const ImageWrapper = styled(ImageHolder)<ImageWrapperProps>`
   height: ${({ height }) => (height < 75 ? '45%' : '65%')};
   background-image: url(${({ backgroundImage }) => backgroundImage});
   margin: 0;
-  ${({ isRestrictedAsset }) =>
-    isRestrictedAsset &&
-    css`
-      filter: brightness(0.3);
-    `}
 `;
 
 export const Overlay = styled.div`
diff --git a/src/paywall-previews/Preview6/Preview6.tsx b/src/paywall-previews/Preview6/Preview6.tsx
index e92c21080..9b2010df2 100644
--- a/src/paywall-previews/Preview6/Preview6.tsx
+++ b/src/paywall-previews/Preview6/Preview6.tsx
@@ -78,7 +78,7 @@ const Preview6 = ({
       onClick={handleOpenModal}
     />
     {isRestrictedAsset && (
-      <StyledRestrictedAssetContainer fontSize="14px">
+      <StyledRestrictedAssetContainer fontSize="14px" onClick={handleOpenModal}>
         <RestrictedAssetIcon size="5rem" />
         {restrictedMessage}
       </StyledRestrictedAssetContainer>
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index 613ebc566..ae285be7a 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -78,13 +78,20 @@ const Preview7 = ({
   >
     {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
     <StyledImageWrapper onClick={handleOpenModal}>
-      <PreviewImage src={imageUrl} imageWidth="250px" imageBorderRadius />
       {isRestrictedAsset && (
-        <StyledRestrictedAssetContainer fontSize="14px" imageWidth="250px" imageBorderRadius>
+        // Call handleOpenModal here because this div element will be
+        // on the top of image container in case of restricted asset
+        <StyledRestrictedAssetContainer
+          fontSize="14px"
+          imageWidth="250px"
+          imageBorderRadius
+          onClick={handleOpenModal}
+        >
           <RestrictedAssetIcon size="4rem" />
           {restrictedMessage}
         </StyledRestrictedAssetContainer>
       )}
+      <PreviewImage src={imageUrl} imageWidth="250px" imageBorderRadius />
       <StyledIconWrapper backgroundColor={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
         <FaLock />
       </StyledIconWrapper>
diff --git a/src/paywall-previews/Preview7/styled.ts b/src/paywall-previews/Preview7/styled.ts
index d44965edb..28f8b2a53 100644
--- a/src/paywall-previews/Preview7/styled.ts
+++ b/src/paywall-previews/Preview7/styled.ts
@@ -93,7 +93,7 @@ export const RestrictedAssetText = styled.p`
 
 export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)<PreviewImageProps>`
   height: 100%;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.7);
   border-radius: 50%;
+  backdrop-filter: brightness(0.3);
+  justify-content: center;
 `;
diff --git a/src/paywall-previews/shared/PreviewComponents.tsx b/src/paywall-previews/shared/PreviewComponents.tsx
index 09c9c1e7f..6c99da6c2 100644
--- a/src/paywall-previews/shared/PreviewComponents.tsx
+++ b/src/paywall-previews/shared/PreviewComponents.tsx
@@ -197,3 +197,9 @@ export const RestrictedAssetContainer = styled.div<RestrictedAssetContainerProps
   flex-direction: column;
   align-items: center;
 `;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  height: 100%;
+  backdrop-filter: brightness(0.3);
+  justify-content: center;
+`;

From 4e4e01039a4f484d69857ff0aa1c8b49f56229ce Mon Sep 17 00:00:00 2001
From: Jasmina Dumanovski <jasmina@inplayer.com>
Date: Sun, 23 Jan 2022 19:24:32 +0100
Subject: [PATCH 118/157] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7db5c6ba3..3aa292696 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 All notable changes to this project will be documented in this file.
 
-# [2.5.21] - 21.01.2022
+# [2.5.21] - 24.01.2022
 
 ## Change
 

From df0bd18f019ee0bc26b7ace9e0b863ee713d51f1 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Sun, 23 Jan 2022 20:05:59 +0100
Subject: [PATCH 119/157] Refactor FooterText component & remove unused code

---
 src/paywall-previews/Preview1/Preview1.tsx |  2 +-
 src/paywall-previews/Preview2/Preview2.tsx |  2 +-
 src/paywall-previews/Preview3/Preview3.tsx |  2 +-
 src/paywall-previews/Preview5/styled.ts    |  2 +-
 src/paywall-previews/shared/FooterText.tsx | 65 +++++++++-------------
 5 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index 1080f60ad..e6e9cf238 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 // Colors
-import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import colors from '../../theme/colors';
 
 // Types
 import Branding from '../types/branding';
 
 // Components
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
 import {
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index acf7b43af..e3ba36edc 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { AnalyticsComponent } from '../../analytics';
 
 // Colors
 import colors from '../../theme/colors';
@@ -8,6 +7,7 @@ import colors from '../../theme/colors';
 import Branding from '../types/branding';
 
 // Components
+import { AnalyticsComponent } from '../../analytics';
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
 import {
diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index 4bcc5ba95..852ff2e0c 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { GiCutDiamond } from 'react-icons/gi';
-import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 // Colors
 import colors from '../../theme/colors';
 
 // Components
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
 import {
diff --git a/src/paywall-previews/Preview5/styled.ts b/src/paywall-previews/Preview5/styled.ts
index e65b02e80..0b7b911ef 100644
--- a/src/paywall-previews/Preview5/styled.ts
+++ b/src/paywall-previews/Preview5/styled.ts
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { GiCutDiamond } from 'react-icons/gi';
 import { transparentize } from 'polished';
 
diff --git a/src/paywall-previews/shared/FooterText.tsx b/src/paywall-previews/shared/FooterText.tsx
index ab9ad7242..146b9901c 100644
--- a/src/paywall-previews/shared/FooterText.tsx
+++ b/src/paywall-previews/shared/FooterText.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+
+// components
 import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 type Props = {
@@ -7,45 +9,32 @@ type Props = {
 };
 const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
   <AnalyticsComponent>
-    {({ pages, tracker, merchantId, ip }) =>
-      isAuthenticated ? (
-        <span>
-          Welcome back{' '}
-          <strong
-            aria-hidden="true"
-            onClick={() => {
-              tracker.track({
-                event: AnalyticsEvents.CLICK,
-                type: AnalyticsComponentType.LINK,
-                tag: 'link_user_email',
-                pages,
-                merchantId,
-                ip,
-              });
-            }}
-          >
-            {loginFooterLabel}
-          </strong>{' '}
-          Access this content!
-        </span>
-      ) : (
-        <span
-          aria-hidden="true"
-          onClick={() => {
-            tracker.track({
-              event: AnalyticsEvents.CLICK,
-              type: AnalyticsComponentType.LINK,
-              tag: 'link_already_have_access_login_with_your_account',
-              pages,
-              merchantId,
-              ip,
-            });
-          }}
-        >
-          {loginFooterLabel}
+    {({ pages, tracker, merchantId, ip }) => {
+      const onClick = () => {
+        tracker.track({
+          event: AnalyticsEvents.CLICK,
+          type: AnalyticsComponentType.LINK,
+          tag: 'link_user_email',
+          pages,
+          merchantId,
+          ip,
+        });
+      };
+
+      const elementProps = {
+        'aria-hidden': true,
+        onClick,
+      };
+
+      const authText = `Welcome back <strong {...${elementProps}}>${loginFooterLabel}</strong> Access this content!`;
+      const noAuthText = loginFooterLabel;
+
+      return (
+        <span {...(isAuthenticated && { ...elementProps })}>
+          {isAuthenticated ? authText : noAuthText}
         </span>
-      )
-    }
+      );
+    }}
   </AnalyticsComponent>
 );
 

From af6de6472cca5b45c757b6116e0b67fd24a58773 Mon Sep 17 00:00:00 2001
From: Jasmina Dumanovski <jasmina@inplayer.com>
Date: Sun, 23 Jan 2022 20:09:52 +0100
Subject: [PATCH 120/157] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3aa292696..ffb13c102 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 ## Change
 
 - Styling changes in preview templates for restricted asset
+- FooterText component refactored
 
 # [2.5.20] - 21.01.2022
 

From c494827bd35bcffa69b4dd070e73a55368e655e7 Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Mon, 24 Jan 2022 08:47:33 +0100
Subject: [PATCH 121/157] Fix wrong condition & element shown

---
 src/paywall-previews/shared/FooterText.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/paywall-previews/shared/FooterText.tsx b/src/paywall-previews/shared/FooterText.tsx
index 146b9901c..1294181ac 100644
--- a/src/paywall-previews/shared/FooterText.tsx
+++ b/src/paywall-previews/shared/FooterText.tsx
@@ -14,7 +14,9 @@ const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
         tracker.track({
           event: AnalyticsEvents.CLICK,
           type: AnalyticsComponentType.LINK,
-          tag: 'link_user_email',
+          tag: isAuthenticated
+            ? 'link_user_email'
+            : 'link_already_have_access_login_with_your_account',
           pages,
           merchantId,
           ip,
@@ -26,11 +28,13 @@ const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
         onClick,
       };
 
-      const authText = `Welcome back <strong {...${elementProps}}>${loginFooterLabel}</strong> Access this content!`;
+      const authText = `Welcome back ${(
+        <strong {...elementProps}>loginFooterLabel</strong>
+      )} Access this content!`;
       const noAuthText = loginFooterLabel;
 
       return (
-        <span {...(isAuthenticated && { ...elementProps })}>
+        <span {...(!isAuthenticated && { ...elementProps })}>
           {isAuthenticated ? authText : noAuthText}
         </span>
       );

From ec5aaa430e884eedede648451d5fe258c1a055be Mon Sep 17 00:00:00 2001
From: Jasmina Jaulevska <jasmina5j@gmail.com>
Date: Mon, 24 Jan 2022 09:24:45 +0100
Subject: [PATCH 122/157] Fix [object, object] error with authenticated footer
 text

---
 src/paywall-previews/shared/FooterText.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/paywall-previews/shared/FooterText.tsx b/src/paywall-previews/shared/FooterText.tsx
index 1294181ac..4d5a973af 100644
--- a/src/paywall-previews/shared/FooterText.tsx
+++ b/src/paywall-previews/shared/FooterText.tsx
@@ -28,9 +28,11 @@ const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
         onClick,
       };
 
-      const authText = `Welcome back ${(
-        <strong {...elementProps}>loginFooterLabel</strong>
-      )} Access this content!`;
+      const authText = (
+        <>
+          Welcome back <strong {...elementProps}>{loginFooterLabel}</strong> Access this content!
+        </>
+      );
       const noAuthText = loginFooterLabel;
 
       return (

From fad85b90ced16222299e0514220314e554e31a9e Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 26 Jan 2022 00:25:04 +0100
Subject: [PATCH 123/157] i just don't wanna lose all those changes

---
 index.d.ts                             |   2 +
 src/components/Table/Table.tsx         | 141 ++++++++++++++++++++++---
 src/components/Table/data.tsx          |   6 +-
 src/components/Table/table.stories.mdx |   8 +-
 4 files changed, 137 insertions(+), 20 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index e226defbe..aac647d79 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -221,6 +221,8 @@ export interface TableColumn<T extends TableRowData> {
   key: string;
   render?: (props: TableColumn$RenderProps<T>) => ReactNode;
   style?: CSSProperties;
+  editable?: boolean;
+  fn?: () => void;
 }
 
 export interface TableRowData extends Object {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 439c6a542..5ceb84a41 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,6 +1,10 @@
 import 'react-dates/initialize';
-import React, { ReactNode, SyntheticEvent, Component } from 'react';
-import { CSSProperties } from 'styled-components';
+import React, { ReactNode, SyntheticEvent, Component, ChangeEvent } from 'react';
+import styled, { CSSProperties } from 'styled-components';
+import { IoIosCheckmark, IoIosClose } from 'react-icons/io';
+import { FaRegEdit } from 'react-icons/fa';
+import colors from '../../theme/colors';
+import Input from '../Input';
 import Grid from '../Grid';
 import Loader from '../Loader';
 import { AnalyticsProps } from '../../analytics';
@@ -17,6 +21,23 @@ import {
   TableWrapper,
 } from './styled';
 
+interface StyledReactIconProps {
+  color: string;
+}
+
+export const StyledReactIcon = styled(IoIosCheckmark)<StyledReactIconProps>`
+  width: 2.2rem;
+  height: 2.2rem;
+  color: ${({ color }) => color};
+  cursor: pointer;
+`;
+
+const StyledIcon = styled(FaRegEdit)`
+  font-size: 1.3rem;
+  cursor: pointer;
+  align-self: flex-end;
+`;
+
 interface Data {
   id: string;
   [row: string]: any;
@@ -33,6 +54,8 @@ type Column = {
   render: ({ value, rowValues }: Render) => ReactNode;
   style?: CSSProperties;
   alignRight?: any;
+  editable?: boolean;
+  fn?: () => void;
 };
 
 type RowActions<T> =
@@ -62,7 +85,7 @@ interface TableButtonProps extends AnalyticsProps {
 
 type Props<T = Data> = {
   columns: Array<Column> | any;
-  data: Array<any>;
+  data: Array<Data>;
   className?: string;
   style?: CSSProperties;
   options: TableOptions<T>;
@@ -70,6 +93,8 @@ type Props<T = Data> = {
   renderEmptyTable?: boolean;
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
+  editableId?: string | number;
+  editableBy?: string;
 } & AnalyticsProps;
 
 type State = {
@@ -77,6 +102,7 @@ type State = {
     [key in number | string]: any;
   };
   selectedAll: boolean;
+  inputStates: any;
 };
 
 const rowActionsExist = (actions: RowActions<any>) =>
@@ -104,8 +130,23 @@ class Table<T> extends Component<Props<T>, State> {
   state: State = {
     selected: {},
     selectedAll: false,
+    inputStates: {},
   };
 
+  componentDidMount() {
+    const { data, editableBy = '', editableId = '' } = this.props;
+    const { inputStates } = this.state;
+    console.log(data);
+    console.log(editableBy, editableId);
+    if (editableBy) {
+      const inputs = data.reduce(
+        (obj, item) => ({ ...obj, [item[editableId]]: item[editableBy] }),
+        {}
+      );
+      this.setState({ inputStates: inputs }, () => console.log(inputStates));
+    }
+  }
+
   toggleRow = (id: number | string) => () => {
     const { selected } = this.state;
     const isSelected = !selected[id];
@@ -209,25 +250,95 @@ class Table<T> extends Component<Props<T>, State> {
       </TableHeaderCell>
     ));
 
+  renderEditIcons = (field: string, id: string, fn: any) => {
+    const { inputStates } = this.state;
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      this.setState({
+        inputStates: {
+          ...inputStates,
+          [id]: e.target.value,
+        },
+      });
+    };
+    console.log(inputStates);
+    if (inputStates.currentlyModifiyng === id) {
+      return (
+        <>
+          <Input
+            id={id}
+            onChange={handleChange}
+            placeholder=""
+            type="input"
+            value={inputStates[id]}
+          />
+          <StyledReactIcon
+            data-testid="save"
+            color={colors.green}
+            onClick={() => {
+              fn?.();
+              this.setState({
+                inputStates: {
+                  ...inputStates,
+                  currentlyModifiyng: null,
+                },
+              });
+            }}
+          />
+          <StyledReactIcon
+            data-testid="cancel"
+            as={IoIosClose}
+            color={colors.red}
+            onClick={() =>
+              this.setState({
+                inputStates: {
+                  ...inputStates,
+                  currentlyModifiyng: null,
+                },
+              })
+            }
+          />
+        </>
+      );
+    }
+    return (
+      <>
+        {field}
+        <StyledIcon
+          onClick={() =>
+            this.setState({
+              inputStates: {
+                ...inputStates,
+                currentlyModifiyng: id,
+              },
+            })
+          }
+        />
+      </>
+    );
+  };
+
   renderData = (columns: Array<Column>, data: Array<Data>) => {
     const newColumns = this.generateColumns(columns);
     const newData = this.generateRows(data);
 
-    const { tableButton } = this.props;
+    const { tableButton, editableId = 0 } = this.props;
 
     return newData.map((row) => (
       <TableRow key={row.id} noBottomBorder={!tableButton}>
-        {newColumns.map((column: Column, index: number) => (
-          <TableCell
-            key={index}
-            isActionsCell={column.key === 'actions'}
-            style={column.style || {}}
-          >
-            {column.render
-              ? column.render({ value: row[column.key], rowValues: row })
-              : row[column.key]}
-          </TableCell>
-        ))}
+        {newColumns.map((column: Column, index: number) => {
+          const cond = column.editable
+            ? this.renderEditIcons(row[column.key], row[editableId], column.fn)
+            : row[column.key];
+          return (
+            <TableCell
+              key={index}
+              isActionsCell={column.key === 'actions'}
+              style={column.style || {}}
+            >
+              {column.render ? column.render({ value: row[column.key], rowValues: row }) : cond}
+            </TableCell>
+          );
+        })}
       </TableRow>
     ));
   };
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index a370db1fa..153e63ff8 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -14,10 +14,12 @@ export const columns = [
   {
     title: 'Name',
     key: 'name',
+    editable: true,
   },
   {
     title: 'Date Created',
     key: 'dateCreated',
+    render: ({ value }: any) => value.dt,
   },
   {
     title: 'Director',
@@ -32,14 +34,14 @@ export const data = [
     icon: <FaMusic />,
     name: "Won't You Be My Neighbour?",
     director: 'Morgan Neville',
-    dateCreated: '2018/07/24',
+    dateCreated: { dt: '2018/07/24' },
   },
   {
     id: 8,
     icon: <FaCode />,
     name: 'Soundtrack: No Country',
     director: 'Coen Brothers',
-    dateCreated: '2018/07/21',
+    dateCreated: { dt: '2018/07/24' },
   },
 ];
 
diff --git a/src/components/Table/table.stories.mdx b/src/components/Table/table.stories.mdx
index fb51375a4..8912d2c73 100644
--- a/src/components/Table/table.stories.mdx
+++ b/src/components/Table/table.stories.mdx
@@ -20,6 +20,8 @@ const Page = () => (
   <Story name="default">
     <>
     <Table
+            editableBy="name"
+            editableId="id"
             columns={columns}
             data={data}
             options={{
@@ -28,9 +30,9 @@ const Page = () => (
                     action: (data) => console.log(data),
                 },
                 rowActions: [
-                    { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => (<p>render</p>)},
-                      { icon: "cog", onClick: (id) => console.log(id), render: () => <p>render</p>},
-                      { icon: "trash", onClick: (id) => console.log(id) },
+                    { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => <MdDelete />},
+                      { icon: "cog", onClick: (id) => console.log(id), render: () => <MdDelete />},
+                      { icon: "trash", onClick: (id) => console.log(id), render: () => <MdDelete /> },
                 ],
             }}
             tableButton={[

From 7575279329f6994c7d1017f7a9df688ecd483b80 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 26 Jan 2022 21:08:17 +0100
Subject: [PATCH 124/157] notable changes

---
 index.d.ts                     |  2 +-
 src/components/Table/Table.tsx | 24 ++++++++++++++++--------
 src/components/Table/data.tsx  |  1 +
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index aac647d79..6e9e2355d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -222,7 +222,7 @@ export interface TableColumn<T extends TableRowData> {
   render?: (props: TableColumn$RenderProps<T>) => ReactNode;
   style?: CSSProperties;
   editable?: boolean;
-  fn?: () => void;
+  fn?: (value: string, currentValue: string) => void;
 }
 
 export interface TableRowData extends Object {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 5ceb84a41..f22223249 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -55,7 +55,7 @@ type Column = {
   style?: CSSProperties;
   alignRight?: any;
   editable?: boolean;
-  fn?: () => void;
+  fn: (inputValue: string) => void;
 };
 
 type RowActions<T> =
@@ -134,10 +134,8 @@ class Table<T> extends Component<Props<T>, State> {
   };
 
   componentDidMount() {
-    const { data, editableBy = '', editableId = '' } = this.props;
     const { inputStates } = this.state;
-    console.log(data);
-    console.log(editableBy, editableId);
+    const { data, editableBy = '', editableId = '' } = this.props;
     if (editableBy) {
       const inputs = data.reduce(
         (obj, item) => ({ ...obj, [item[editableId]]: item[editableBy] }),
@@ -260,7 +258,6 @@ class Table<T> extends Component<Props<T>, State> {
         },
       });
     };
-    console.log(inputStates);
     if (inputStates.currentlyModifiyng === id) {
       return (
         <>
@@ -275,7 +272,7 @@ class Table<T> extends Component<Props<T>, State> {
             data-testid="save"
             color={colors.green}
             onClick={() => {
-              fn?.();
+              fn?.(field, inputStates[id]);
               this.setState({
                 inputStates: {
                   ...inputStates,
@@ -326,16 +323,27 @@ class Table<T> extends Component<Props<T>, State> {
     return newData.map((row) => (
       <TableRow key={row.id} noBottomBorder={!tableButton}>
         {newColumns.map((column: Column, index: number) => {
-          const cond = column.editable
+          const isEditble = column.editable
             ? this.renderEditIcons(row[column.key], row[editableId], column.fn)
             : row[column.key];
+
+          const hasRenderFn = column.render
+            ? column.render({ value: row[column.key], rowValues: row })
+            : isEditble;
+
+          const hasRenderAndEnable =
+            column.render && column.editable
+              ? column.render({ value: row[column.key], rowValues: row }) &&
+                this.renderEditIcons(row[column.key], row[editableId], column.fn)
+              : hasRenderFn;
+
           return (
             <TableCell
               key={index}
               isActionsCell={column.key === 'actions'}
               style={column.style || {}}
             >
-              {column.render ? column.render({ value: row[column.key], rowValues: row }) : cond}
+              {hasRenderAndEnable}
             </TableCell>
           );
         })}
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index 153e63ff8..8ce9e881b 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -15,6 +15,7 @@ export const columns = [
     title: 'Name',
     key: 'name',
     editable: true,
+    fn: (value: string, currentValue: string) => console.log('CLG', value, currentValue),
   },
   {
     title: 'Date Created',

From 597e4dde9a6c45ff9df4860f1113597abca6b6da Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 26 Jan 2022 23:51:23 +0100
Subject: [PATCH 125/157] pass row id to column function

---
 src/components/Table/Table.tsx | 4 ++--
 src/components/Table/data.tsx  | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index f22223249..db1472cb2 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -93,7 +93,7 @@ type Props<T = Data> = {
   renderEmptyTable?: boolean;
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
-  editableId?: string | number;
+  editableId?: string;
   editableBy?: string;
 } & AnalyticsProps;
 
@@ -272,7 +272,7 @@ class Table<T> extends Component<Props<T>, State> {
             data-testid="save"
             color={colors.green}
             onClick={() => {
-              fn?.(field, inputStates[id]);
+              fn?.(field, inputStates[id], id);
               this.setState({
                 inputStates: {
                   ...inputStates,
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index 8ce9e881b..f8822485b 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -14,8 +14,6 @@ export const columns = [
   {
     title: 'Name',
     key: 'name',
-    editable: true,
-    fn: (value: string, currentValue: string) => console.log('CLG', value, currentValue),
   },
   {
     title: 'Date Created',

From 9733717644f5319f9b5b10c7c0ab3e2ce859dc80 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 27 Jan 2022 17:18:16 +0100
Subject: [PATCH 126/157] refactor table component (editable field)

---
 index.d.ts                     |  6 ++++++
 src/components/Table/Table.tsx | 28 +++++++++++++++++++---------
 src/components/Table/data.tsx  |  8 ++++++--
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 6e9e2355d..e0f42ef28 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -234,6 +234,12 @@ export interface TableColumn$RenderProps<T extends TableRowData, V = any> {
   rowValues: T;
 }
 
+export interface ColumnFunctionProps {
+  value: string;
+  currentValue: string;
+  id: number;
+}
+
 export interface RowAction<T extends TableRowData> {
   icon?: string;
   onClick?: (id: number | string) => any;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index db1472cb2..244362ca5 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -48,14 +48,20 @@ type Render = {
   rowValues: Data;
 };
 
+export interface ColumnFunctionProps {
+  value: string;
+  currentValue: string;
+  id: string;
+}
+
 type Column = {
   title: string;
   key: string;
-  render: ({ value, rowValues }: Render) => ReactNode;
+  render?: ({ value, rowValues }: Render) => ReactNode;
   style?: CSSProperties;
   alignRight?: any;
   editable?: boolean;
-  fn: (inputValue: string) => void;
+  fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
 };
 
 type RowActions<T> =
@@ -248,31 +254,35 @@ class Table<T> extends Component<Props<T>, State> {
       </TableHeaderCell>
     ));
 
-  renderEditIcons = (field: string, id: string, fn: any) => {
+  renderEditIcons = (
+    field: string,
+    rowId: string,
+    fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any
+  ) => {
     const { inputStates } = this.state;
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       this.setState({
         inputStates: {
           ...inputStates,
-          [id]: e.target.value,
+          [rowId]: e.target.value,
         },
       });
     };
-    if (inputStates.currentlyModifiyng === id) {
+    if (inputStates.currentlyModifiyng === rowId) {
       return (
         <>
           <Input
-            id={id}
+            id={rowId}
             onChange={handleChange}
             placeholder=""
             type="input"
-            value={inputStates[id]}
+            value={inputStates[rowId]}
           />
           <StyledReactIcon
             data-testid="save"
             color={colors.green}
             onClick={() => {
-              fn?.(field, inputStates[id], id);
+              fn?.({ value: field, currentValue: inputStates[rowId], id: rowId });
               this.setState({
                 inputStates: {
                   ...inputStates,
@@ -305,7 +315,7 @@ class Table<T> extends Component<Props<T>, State> {
             this.setState({
               inputStates: {
                 ...inputStates,
-                currentlyModifiyng: id,
+                currentlyModifiyng: rowId,
               },
             })
           }
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index f8822485b..86bfd18c8 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { FaMusic, FaCode } from 'react-icons/fa';
+import { ColumnFunctionProps } from '../Table/Table';
+import { TableColumn } from '../../..';
 
-export const columns = [
+export const columns: Array<TableColumn<any>> = [
   {
     title: 'ID',
     key: 'id',
@@ -14,6 +16,8 @@ export const columns = [
   {
     title: 'Name',
     key: 'name',
+    // editable: true,
+    // fn: ({ value, currentValue, id }: ColumnFunctionProps) => console.log(value, currentValue, id),
   },
   {
     title: 'Date Created',
@@ -21,7 +25,7 @@ export const columns = [
     render: ({ value }: any) => value.dt,
   },
   {
-    title: 'Director',
+    title: 'Directsor',
     key: 'director',
     render: ({ value, rowValues }: any) => `${value} - ${rowValues.dateCreated}`,
   },

From cd37eed8b51f4190a9a5677d7229a656d3984fe1 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 27 Jan 2022 20:42:12 +0100
Subject: [PATCH 127/157] add required function column props

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index e0f42ef28..c5e51d99e 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -222,7 +222,7 @@ export interface TableColumn<T extends TableRowData> {
   render?: (props: TableColumn$RenderProps<T>) => ReactNode;
   style?: CSSProperties;
   editable?: boolean;
-  fn?: (value: string, currentValue: string) => void;
+  fn?: (props: ColumnFunctionProps) => void;
 }
 
 export interface TableRowData extends Object {

From d38367e1e8be269fb3d9d6b0678eb18fcf35c251 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Sat, 29 Jan 2022 20:59:13 +0100
Subject: [PATCH 128/157] initial implementation of validation on renamable
 columns

---
 package.json                         |  4 ++
 src/components/Input/FormikInput.tsx | 53 +++++++++++++++++++
 src/components/Table/Table.tsx       | 40 +++++++++++---
 src/components/Table/data.tsx        | 11 ++--
 yarn.lock                            | 78 ++++++++++++++++++++++++++++
 5 files changed, 173 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Input/FormikInput.tsx

diff --git a/package.json b/package.json
index 283322eed..828bf9a49 100644
--- a/package.json
+++ b/package.json
@@ -102,5 +102,9 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "typescript": "^4.1.3"
+  },
+  "dependencies": {
+    "formik": "^2.1.5",
+    "yup": "^0.32.11"
   }
 }
diff --git a/src/components/Input/FormikInput.tsx b/src/components/Input/FormikInput.tsx
new file mode 100644
index 000000000..22ac59409
--- /dev/null
+++ b/src/components/Input/FormikInput.tsx
@@ -0,0 +1,53 @@
+import React, { FunctionComponent, InputHTMLAttributes } from 'react';
+import { FieldProps } from 'formik';
+import styled from 'styled-components';
+import { Input, AnalyticsProps } from '../../index';
+
+interface OwnProps extends AnalyticsProps {
+  label?: string;
+  size?: any;
+  inlineLabel?: boolean;
+  tooltip?: string;
+  showPasswordIcon?: boolean;
+}
+
+const InputContainer = styled.div`
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-column-end: span 12;
+  grid-row-end: span 1;
+`;
+
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> & FieldProps & OwnProps;
+
+const FormikInput: FunctionComponent<Props> = ({
+  id,
+  field,
+  disabled = false,
+  value,
+  form: _,
+  tag = '',
+  placeholder = '',
+  ...rest
+}) => {
+  const { name: fieldName, ...fieldRest } = field;
+
+  return (
+    <InputContainer>
+      <Input
+        placeholder={placeholder}
+        tag={tag}
+        type="text"
+        id={id || fieldName}
+        name={fieldName}
+        // disabled={disabled}
+        {...fieldRest}
+        {...rest}
+        value={value ?? fieldRest.value}
+      />
+    </InputContainer>
+  );
+};
+
+export default FormikInput;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 244362ca5..578839d0b 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -3,6 +3,9 @@ import React, { ReactNode, SyntheticEvent, Component, ChangeEvent } from 'react'
 import styled, { CSSProperties } from 'styled-components';
 import { IoIosCheckmark, IoIosClose } from 'react-icons/io';
 import { FaRegEdit } from 'react-icons/fa';
+import { Field, FieldProps, Form, Formik, FormikProps } from 'formik';
+import { object, string } from 'yup';
+import FormikInput from '../Input/FormikInput';
 import colors from '../../theme/colors';
 import Input from '../Input';
 import Grid from '../Grid';
@@ -64,6 +67,14 @@ type Column = {
   fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
 };
 
+interface FormValues {
+  field: string;
+}
+
+const validationSchema = object().shape({
+  field: string().required('*Required'),
+});
+
 type RowActions<T> =
   | Array<{
       icon: string | Node;
@@ -271,13 +282,28 @@ class Table<T> extends Component<Props<T>, State> {
     if (inputStates.currentlyModifiyng === rowId) {
       return (
         <>
-          <Input
-            id={rowId}
-            onChange={handleChange}
-            placeholder=""
-            type="input"
-            value={inputStates[rowId]}
-          />
+          <Formik
+            initialValues={{ field }}
+            onSubmit={(values) => {
+              this.setState({
+                inputStates: {
+                  ...inputStates,
+                  currentlyModifiyng: null,
+                },
+              });
+              fn?.({ value: field, currentValue: values.field, id: rowId });
+            }}
+            validationSchema={validationSchema}
+          >
+            <Form>
+              <Field type="text" name="field">
+                {(params: FieldProps) => {
+                  console.log(params);
+                  return <FormikInput {...params} />;
+                }}
+              </Field>
+            </Form>
+          </Formik>
           <StyledReactIcon
             data-testid="save"
             color={colors.green}
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index 86bfd18c8..fc2a78a48 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { FaMusic, FaCode } from 'react-icons/fa';
-import { ColumnFunctionProps } from '../Table/Table';
 import { TableColumn } from '../../..';
 
 export const columns: Array<TableColumn<any>> = [
@@ -16,8 +15,8 @@ export const columns: Array<TableColumn<any>> = [
   {
     title: 'Name',
     key: 'name',
-    // editable: true,
-    // fn: ({ value, currentValue, id }: ColumnFunctionProps) => console.log(value, currentValue, id),
+    editable: true,
+    fn: ({ value, currentValue, id }) => console.log(value, currentValue, id),
   },
   {
     title: 'Date Created',
@@ -25,7 +24,7 @@ export const columns: Array<TableColumn<any>> = [
     render: ({ value }: any) => value.dt,
   },
   {
-    title: 'Directsor',
+    title: 'Director',
     key: 'director',
     render: ({ value, rowValues }: any) => `${value} - ${rowValues.dateCreated}`,
   },
@@ -37,14 +36,14 @@ export const data = [
     icon: <FaMusic />,
     name: "Won't You Be My Neighbour?",
     director: 'Morgan Neville',
-    dateCreated: { dt: '2018/07/24' },
+    dateCreated: '2018/07/24',
   },
   {
     id: 8,
     icon: <FaCode />,
     name: 'Soundtrack: No Country',
     director: 'Coen Brothers',
-    dateCreated: { dt: '2018/07/24' },
+    dateCreated: '2018/07/24',
   },
 ];
 
diff --git a/yarn.lock b/yarn.lock
index 5606f7bcd..56cba63a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1093,6 +1093,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.15.4":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/standalone@^7.4.5":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.9.6.tgz#7a5f82c6fa29959b12f708213be6de8ec0b79338"
@@ -2702,6 +2709,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f"
   integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg==
 
+"@types/lodash@^4.14.175":
+  version "4.14.178"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
+  integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
+
 "@types/markdown-to-jsx@^6.11.0":
   version "6.11.1"
   resolved "https://registry.yarnpkg.com/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.1.tgz#4d9464aa76337d798b874dd3f2d6b4c86ddd98ad"
@@ -5327,6 +5339,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -6672,6 +6689,19 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
+formik@^2.1.5:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"
+  integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -8426,6 +8456,11 @@ lodash-es@^4.17.15:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -8471,6 +8506,11 @@ lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15,
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -9114,6 +9154,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -10229,6 +10274,11 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 property-information@^5.0.0, property-information@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.5.0.tgz#4dc075d493061a82e2b7d096f406e076ed859943"
@@ -10566,6 +10616,11 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.0.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900"
@@ -12418,6 +12473,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -12487,6 +12547,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -13255,6 +13320,19 @@ yargs-parser@^20.2.3:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
   integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
 
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"

From 52ceaa1bac187e313cf079cb59f90d4558a48e02 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Sun, 30 Jan 2022 04:44:05 +0100
Subject: [PATCH 129/157] refactor and add option to pass validationSchema in
 row column

---
 index.d.ts                                    |   1 +
 .../{Input => FormikInput}/FormikInput.tsx    |   5 +-
 src/components/Table/Table.tsx                | 192 ++++++++----------
 src/components/Table/data.tsx                 |   6 +
 4 files changed, 91 insertions(+), 113 deletions(-)
 rename src/components/{Input => FormikInput}/FormikInput.tsx (91%)

diff --git a/index.d.ts b/index.d.ts
index c5e51d99e..e7e0798ca 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -223,6 +223,7 @@ export interface TableColumn<T extends TableRowData> {
   style?: CSSProperties;
   editable?: boolean;
   fn?: (props: ColumnFunctionProps) => void;
+  validationSchema?: ObjectSchema<any>;
 }
 
 export interface TableRowData extends Object {
diff --git a/src/components/Input/FormikInput.tsx b/src/components/FormikInput/FormikInput.tsx
similarity index 91%
rename from src/components/Input/FormikInput.tsx
rename to src/components/FormikInput/FormikInput.tsx
index 22ac59409..d6d160652 100644
--- a/src/components/Input/FormikInput.tsx
+++ b/src/components/FormikInput/FormikInput.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, InputHTMLAttributes } from 'react';
 import { FieldProps } from 'formik';
 import styled from 'styled-components';
-import { Input, AnalyticsProps } from '../../index';
+import { AnalyticsProps } from '../../analytics/index';
+import Input from '../Input/Input';
 
 interface OwnProps extends AnalyticsProps {
   label?: string;
@@ -24,7 +25,6 @@ type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> & FieldProps &
 const FormikInput: FunctionComponent<Props> = ({
   id,
   field,
-  disabled = false,
   value,
   form: _,
   tag = '',
@@ -41,7 +41,6 @@ const FormikInput: FunctionComponent<Props> = ({
         type="text"
         id={id || fieldName}
         name={fieldName}
-        // disabled={disabled}
         {...fieldRest}
         {...rest}
         value={value ?? fieldRest.value}
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 578839d0b..eb6d05252 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,13 +1,12 @@
 import 'react-dates/initialize';
-import React, { ReactNode, SyntheticEvent, Component, ChangeEvent } from 'react';
+import React, { ReactNode, SyntheticEvent, Component } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { IoIosCheckmark, IoIosClose } from 'react-icons/io';
 import { FaRegEdit } from 'react-icons/fa';
-import { Field, FieldProps, Form, Formik, FormikProps } from 'formik';
-import { object, string } from 'yup';
-import FormikInput from '../Input/FormikInput';
+import { Field, Form, Formik, FormikProps } from 'formik';
+import { ObjectSchema } from 'yup';
+import FormikInput from '../FormikInput/FormikInput';
 import colors from '../../theme/colors';
-import Input from '../Input';
 import Grid from '../Grid';
 import Loader from '../Loader';
 import { AnalyticsProps } from '../../analytics';
@@ -57,7 +56,7 @@ export interface ColumnFunctionProps {
   id: string;
 }
 
-type Column = {
+export type Column = {
   title: string;
   key: string;
   render?: ({ value, rowValues }: Render) => ReactNode;
@@ -65,16 +64,19 @@ type Column = {
   alignRight?: any;
   editable?: boolean;
   fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
+  validationSchema?: ObjectSchema<any>;
 };
 
-interface FormValues {
+interface FormValeus {
+  rowField: string;
+}
+interface EditIconsProps {
   field: string;
+  rowId: string;
+  fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
+  validationSchema?: ObjectSchema<any>;
 }
 
-const validationSchema = object().shape({
-  field: string().required('*Required'),
-});
-
 type RowActions<T> =
   | Array<{
       icon: string | Node;
@@ -119,7 +121,7 @@ type State = {
     [key in number | string]: any;
   };
   selectedAll: boolean;
-  inputStates: any;
+  currentlyModifyingRowId?: string | null;
 };
 
 const rowActionsExist = (actions: RowActions<any>) =>
@@ -147,21 +149,9 @@ class Table<T> extends Component<Props<T>, State> {
   state: State = {
     selected: {},
     selectedAll: false,
-    inputStates: {},
+    currentlyModifyingRowId: null,
   };
 
-  componentDidMount() {
-    const { inputStates } = this.state;
-    const { data, editableBy = '', editableId = '' } = this.props;
-    if (editableBy) {
-      const inputs = data.reduce(
-        (obj, item) => ({ ...obj, [item[editableId]]: item[editableBy] }),
-        {}
-      );
-      this.setState({ inputStates: inputs }, () => console.log(inputStates));
-    }
-  }
-
   toggleRow = (id: number | string) => () => {
     const { selected } = this.state;
     const isSelected = !selected[id];
@@ -265,71 +255,50 @@ class Table<T> extends Component<Props<T>, State> {
       </TableHeaderCell>
     ));
 
-  renderEditIcons = (
-    field: string,
-    rowId: string,
-    fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any
-  ) => {
-    const { inputStates } = this.state;
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      this.setState({
-        inputStates: {
-          ...inputStates,
-          [rowId]: e.target.value,
-        },
-      });
-    };
-    if (inputStates.currentlyModifiyng === rowId) {
+  renderEditIcons = ({ field, rowId, fn, validationSchema }: EditIconsProps) => {
+    const { currentlyModifyingRowId } = this.state;
+    if (currentlyModifyingRowId === rowId) {
       return (
         <>
           <Formik
-            initialValues={{ field }}
-            onSubmit={(values) => {
+            initialValues={{ rowField: field }}
+            onSubmit={({ rowField }) => {
               this.setState({
-                inputStates: {
-                  ...inputStates,
-                  currentlyModifiyng: null,
-                },
+                currentlyModifyingRowId: null,
               });
-              fn?.({ value: field, currentValue: values.field, id: rowId });
+              fn?.({ value: field, currentValue: rowField, id: rowId });
             }}
             validationSchema={validationSchema}
+            validateOnMount
           >
-            <Form>
-              <Field type="text" name="field">
-                {(params: FieldProps) => {
-                  console.log(params);
-                  return <FormikInput {...params} />;
-                }}
-              </Field>
-            </Form>
+            {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
+              <Form>
+                <Field type="text" name="rowField" component={FormikInput} />
+                <StyledReactIcon
+                  data-testid="save"
+                  color={colors.green}
+                  onClick={() => {
+                    if (isValid) {
+                      fn?.({ value: field, currentValue: rowField, id: rowId });
+                      this.setState({
+                        currentlyModifyingRowId: null,
+                      });
+                    }
+                  }}
+                />
+                <StyledReactIcon
+                  data-testid="cancel"
+                  as={IoIosClose}
+                  color={colors.red}
+                  onClick={() =>
+                    this.setState({
+                      currentlyModifyingRowId: null,
+                    })
+                  }
+                />
+              </Form>
+            )}
           </Formik>
-          <StyledReactIcon
-            data-testid="save"
-            color={colors.green}
-            onClick={() => {
-              fn?.({ value: field, currentValue: inputStates[rowId], id: rowId });
-              this.setState({
-                inputStates: {
-                  ...inputStates,
-                  currentlyModifiyng: null,
-                },
-              });
-            }}
-          />
-          <StyledReactIcon
-            data-testid="cancel"
-            as={IoIosClose}
-            color={colors.red}
-            onClick={() =>
-              this.setState({
-                inputStates: {
-                  ...inputStates,
-                  currentlyModifiyng: null,
-                },
-              })
-            }
-          />
         </>
       );
     }
@@ -339,10 +308,7 @@ class Table<T> extends Component<Props<T>, State> {
         <StyledIcon
           onClick={() =>
             this.setState({
-              inputStates: {
-                ...inputStates,
-                currentlyModifiyng: rowId,
-              },
+              currentlyModifyingRowId: rowId,
             })
           }
         />
@@ -358,31 +324,37 @@ class Table<T> extends Component<Props<T>, State> {
 
     return newData.map((row) => (
       <TableRow key={row.id} noBottomBorder={!tableButton}>
-        {newColumns.map((column: Column, index: number) => {
-          const isEditble = column.editable
-            ? this.renderEditIcons(row[column.key], row[editableId], column.fn)
-            : row[column.key];
-
-          const hasRenderFn = column.render
-            ? column.render({ value: row[column.key], rowValues: row })
-            : isEditble;
-
-          const hasRenderAndEnable =
-            column.render && column.editable
-              ? column.render({ value: row[column.key], rowValues: row }) &&
-                this.renderEditIcons(row[column.key], row[editableId], column.fn)
-              : hasRenderFn;
-
-          return (
-            <TableCell
-              key={index}
-              isActionsCell={column.key === 'actions'}
-              style={column.style || {}}
-            >
-              {hasRenderAndEnable}
-            </TableCell>
-          );
-        })}
+        {newColumns.map(
+          ({ render, validationSchema, key, fn, editable, style }: Column, index: number) => {
+            const isEditble = editable
+              ? this.renderEditIcons({
+                  field: row[key],
+                  rowId: row[editableId],
+                  fn,
+                  validationSchema,
+                })
+              : row[key];
+
+            const hasRenderFn = render ? render({ value: row[key], rowValues: row }) : isEditble;
+
+            const hasRenderAndEnable =
+              render && editable
+                ? render({ value: row[key], rowValues: row }) &&
+                  this.renderEditIcons({
+                    field: row[key],
+                    rowId: row[editableId],
+                    fn,
+                    validationSchema,
+                  })
+                : hasRenderFn;
+
+            return (
+              <TableCell key={index} isActionsCell={key === 'actions'} style={style || {}}>
+                {hasRenderAndEnable}
+              </TableCell>
+            );
+          }
+        )}
       </TableRow>
     ));
   };
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index fc2a78a48..7f89a7444 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { FaMusic, FaCode } from 'react-icons/fa';
+import { object, string } from 'yup';
 import { TableColumn } from '../../..';
 
 export const columns: Array<TableColumn<any>> = [
@@ -17,6 +18,11 @@ export const columns: Array<TableColumn<any>> = [
     key: 'name',
     editable: true,
     fn: ({ value, currentValue, id }) => console.log(value, currentValue, id),
+    validationSchema: object().shape({
+      rowField: string()
+        .required('*Required')
+        .matches(/[a-zA-Z0-9_]+\.csv/, 'Filename must end with .csv'),
+    }),
   },
   {
     title: 'Date Created',

From 7048b8774f1eead73cb5534a845038f0a625d4be Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Sun, 30 Jan 2022 23:10:29 +0100
Subject: [PATCH 130/157] add option to pass formik field in column and
 refactor table component

---
 index.d.ts                                 | 10 ++-
 src/components/FormikInput/FormikInput.tsx | 52 --------------
 src/components/Table/Table.tsx             | 83 ++++++++++++----------
 src/components/Table/data.tsx              |  9 +--
 4 files changed, 54 insertions(+), 100 deletions(-)
 delete mode 100644 src/components/FormikInput/FormikInput.tsx

diff --git a/index.d.ts b/index.d.ts
index e7e0798ca..85c28128e 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -216,14 +216,18 @@ export interface RadioProps extends AnalyticsProps{
 
 export declare const Radio: FunctionComponent<RadioProps>;
 
+export interface EditableFields {
+  fn: (props: ColumnFunctionProps) => void;
+  validationSchema: ObjectSchema<any>;
+  formikComponentField: () => ReactNode;
+}
+
 export interface TableColumn<T extends TableRowData> {
   title: string;
   key: string;
   render?: (props: TableColumn$RenderProps<T>) => ReactNode;
   style?: CSSProperties;
-  editable?: boolean;
-  fn?: (props: ColumnFunctionProps) => void;
-  validationSchema?: ObjectSchema<any>;
+  editable?: EditableFields;
 }
 
 export interface TableRowData extends Object {
diff --git a/src/components/FormikInput/FormikInput.tsx b/src/components/FormikInput/FormikInput.tsx
deleted file mode 100644
index d6d160652..000000000
--- a/src/components/FormikInput/FormikInput.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { FunctionComponent, InputHTMLAttributes } from 'react';
-import { FieldProps } from 'formik';
-import styled from 'styled-components';
-import { AnalyticsProps } from '../../analytics/index';
-import Input from '../Input/Input';
-
-interface OwnProps extends AnalyticsProps {
-  label?: string;
-  size?: any;
-  inlineLabel?: boolean;
-  tooltip?: string;
-  showPasswordIcon?: boolean;
-}
-
-const InputContainer = styled.div`
-  position: relative;
-  display: grid;
-  align-items: center;
-  grid-column-end: span 12;
-  grid-row-end: span 1;
-`;
-
-type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> & FieldProps & OwnProps;
-
-const FormikInput: FunctionComponent<Props> = ({
-  id,
-  field,
-  value,
-  form: _,
-  tag = '',
-  placeholder = '',
-  ...rest
-}) => {
-  const { name: fieldName, ...fieldRest } = field;
-
-  return (
-    <InputContainer>
-      <Input
-        placeholder={placeholder}
-        tag={tag}
-        type="text"
-        id={id || fieldName}
-        name={fieldName}
-        {...fieldRest}
-        {...rest}
-        value={value ?? fieldRest.value}
-      />
-    </InputContainer>
-  );
-};
-
-export default FormikInput;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index eb6d05252..2a2d33f4d 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -3,9 +3,8 @@ import React, { ReactNode, SyntheticEvent, Component } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { IoIosCheckmark, IoIosClose } from 'react-icons/io';
 import { FaRegEdit } from 'react-icons/fa';
-import { Field, Form, Formik, FormikProps } from 'formik';
+import { Form, Formik, FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
-import FormikInput from '../FormikInput/FormikInput';
 import colors from '../../theme/colors';
 import Grid from '../Grid';
 import Loader from '../Loader';
@@ -56,15 +55,19 @@ export interface ColumnFunctionProps {
   id: string;
 }
 
+export interface EditableFields {
+  fn: (props: ColumnFunctionProps) => void;
+  validationSchema: ObjectSchema<any>;
+  formikComponentField: () => ReactNode;
+}
+
 export type Column = {
   title: string;
   key: string;
   render?: ({ value, rowValues }: Render) => ReactNode;
   style?: CSSProperties;
   alignRight?: any;
-  editable?: boolean;
-  fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
-  validationSchema?: ObjectSchema<any>;
+  editable?: EditableFields;
 };
 
 interface FormValeus {
@@ -75,6 +78,7 @@ interface EditIconsProps {
   rowId: string;
   fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
   validationSchema?: ObjectSchema<any>;
+  componentToRender?: () => ReactNode;
 }
 
 type RowActions<T> =
@@ -255,7 +259,13 @@ class Table<T> extends Component<Props<T>, State> {
       </TableHeaderCell>
     ));
 
-  renderEditIcons = ({ field, rowId, fn, validationSchema }: EditIconsProps) => {
+  renderEditIcons = ({
+    field,
+    rowId,
+    fn,
+    validationSchema,
+    componentToRender = () => null,
+  }: EditIconsProps) => {
     const { currentlyModifyingRowId } = this.state;
     if (currentlyModifyingRowId === rowId) {
       return (
@@ -269,11 +279,10 @@ class Table<T> extends Component<Props<T>, State> {
               fn?.({ value: field, currentValue: rowField, id: rowId });
             }}
             validationSchema={validationSchema}
-            validateOnMount
           >
             {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
               <Form>
-                <Field type="text" name="rowField" component={FormikInput} />
+                {componentToRender()}
                 <StyledReactIcon
                   data-testid="save"
                   color={colors.green}
@@ -320,41 +329,41 @@ class Table<T> extends Component<Props<T>, State> {
     const newColumns = this.generateColumns(columns);
     const newData = this.generateRows(data);
 
-    const { tableButton, editableId = 0 } = this.props;
+    const { tableButton, editableId = '0' } = this.props;
 
     return newData.map((row) => (
       <TableRow key={row.id} noBottomBorder={!tableButton}>
-        {newColumns.map(
-          ({ render, validationSchema, key, fn, editable, style }: Column, index: number) => {
-            const isEditble = editable
-              ? this.renderEditIcons({
+        {newColumns.map(({ render, key, editable, style }: Column, index: number) => {
+          const isEditble = editable
+            ? this.renderEditIcons({
+                field: row[key],
+                rowId: row[editableId],
+                fn: editable.fn,
+                validationSchema: editable.validationSchema,
+                componentToRender: editable.formikComponentField,
+              })
+            : row[key];
+
+          const hasRenderFn = render ? render({ value: row[key], rowValues: row }) : isEditble;
+
+          const hasRenderAndEnable =
+            render && editable
+              ? render({ value: row[key], rowValues: row }) &&
+                this.renderEditIcons({
                   field: row[key],
                   rowId: row[editableId],
-                  fn,
-                  validationSchema,
+                  fn: editable.fn,
+                  validationSchema: editable.validationSchema,
+                  componentToRender: editable.formikComponentField,
                 })
-              : row[key];
-
-            const hasRenderFn = render ? render({ value: row[key], rowValues: row }) : isEditble;
-
-            const hasRenderAndEnable =
-              render && editable
-                ? render({ value: row[key], rowValues: row }) &&
-                  this.renderEditIcons({
-                    field: row[key],
-                    rowId: row[editableId],
-                    fn,
-                    validationSchema,
-                  })
-                : hasRenderFn;
-
-            return (
-              <TableCell key={index} isActionsCell={key === 'actions'} style={style || {}}>
-                {hasRenderAndEnable}
-              </TableCell>
-            );
-          }
-        )}
+              : hasRenderFn;
+
+          return (
+            <TableCell key={index} isActionsCell={key === 'actions'} style={style || {}}>
+              {hasRenderAndEnable}
+            </TableCell>
+          );
+        })}
       </TableRow>
     ));
   };
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index 7f89a7444..f36dfeb9e 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -1,6 +1,6 @@
+/* eslint-disable react/display-name */
 import React from 'react';
 import { FaMusic, FaCode } from 'react-icons/fa';
-import { object, string } from 'yup';
 import { TableColumn } from '../../..';
 
 export const columns: Array<TableColumn<any>> = [
@@ -16,13 +16,6 @@ export const columns: Array<TableColumn<any>> = [
   {
     title: 'Name',
     key: 'name',
-    editable: true,
-    fn: ({ value, currentValue, id }) => console.log(value, currentValue, id),
-    validationSchema: object().shape({
-      rowField: string()
-        .required('*Required')
-        .matches(/[a-zA-Z0-9_]+\.csv/, 'Filename must end with .csv'),
-    }),
   },
   {
     title: 'Date Created',

From 3bac5646f8b0dff44ae17be5d65162a695547435 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 31 Jan 2022 01:44:37 +0100
Subject: [PATCH 131/157] add formik input and error field

---
 index.d.ts                           |  1 -
 src/components/Input/FIeldError.tsx  | 16 ++++++++++
 src/components/Input/FormikInput.tsx | 44 ++++++++++++++++++++++++++++
 src/components/Table/Table.tsx       | 19 ++++--------
 src/components/Table/data.tsx        |  9 ++++++
 5 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Input/FIeldError.tsx
 create mode 100644 src/components/Input/FormikInput.tsx

diff --git a/index.d.ts b/index.d.ts
index 85c28128e..2b1c592af 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -219,7 +219,6 @@ export declare const Radio: FunctionComponent<RadioProps>;
 export interface EditableFields {
   fn: (props: ColumnFunctionProps) => void;
   validationSchema: ObjectSchema<any>;
-  formikComponentField: () => ReactNode;
 }
 
 export interface TableColumn<T extends TableRowData> {
diff --git a/src/components/Input/FIeldError.tsx b/src/components/Input/FIeldError.tsx
new file mode 100644
index 000000000..0016d9cf2
--- /dev/null
+++ b/src/components/Input/FIeldError.tsx
@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import { ErrorMessage, ErrorMessageProps } from 'formik';
+import styled from 'styled-components';
+import colors from '../../theme/colors';
+
+const ErrorMessageWrapper = styled(ErrorMessage)<ErrorMessageProps>`
+  margin-top: 0.5rem;
+  display: block;
+  color: ${colors.red};
+`;
+
+const FieldError: FunctionComponent<ErrorMessageProps> = ({ className, ...rest }) => (
+  <ErrorMessageWrapper component="span" className={className} {...rest} />
+);
+
+export default FieldError;
diff --git a/src/components/Input/FormikInput.tsx b/src/components/Input/FormikInput.tsx
new file mode 100644
index 000000000..a5e49968d
--- /dev/null
+++ b/src/components/Input/FormikInput.tsx
@@ -0,0 +1,44 @@
+import React, { FunctionComponent, InputHTMLAttributes } from 'react';
+import { FieldProps } from 'formik';
+import styled from 'styled-components';
+import { AnalyticsProps } from 'index';
+import Input from './Input';
+
+const InputContainer = styled.div`
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-column-end: span 12;
+  grid-row-end: span 1;
+`;
+
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> & FieldProps & AnalyticsProps;
+
+const FormikInput: FunctionComponent<Props> = ({
+  id,
+  field,
+  value,
+  form: _,
+  placeholder = '',
+  tag = '',
+  ...rest
+}) => {
+  const { name: fieldName, ...fieldRest } = field;
+
+  return (
+    <InputContainer>
+      <Input
+        tag={tag}
+        type="text"
+        id={id || fieldName}
+        placeholder={placeholder}
+        name={fieldName}
+        {...fieldRest}
+        {...rest}
+        value={value ?? fieldRest.value}
+      />
+    </InputContainer>
+  );
+};
+
+export default FormikInput;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 2a2d33f4d..ef663f27c 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -3,8 +3,10 @@ import React, { ReactNode, SyntheticEvent, Component } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { IoIosCheckmark, IoIosClose } from 'react-icons/io';
 import { FaRegEdit } from 'react-icons/fa';
-import { Form, Formik, FormikProps } from 'formik';
+import { Field, Form, Formik, FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
+import FieldError from '../Input/FIeldError';
+import FormikInput from '../Input/FormikInput';
 import colors from '../../theme/colors';
 import Grid from '../Grid';
 import Loader from '../Loader';
@@ -58,7 +60,6 @@ export interface ColumnFunctionProps {
 export interface EditableFields {
   fn: (props: ColumnFunctionProps) => void;
   validationSchema: ObjectSchema<any>;
-  formikComponentField: () => ReactNode;
 }
 
 export type Column = {
@@ -78,7 +79,6 @@ interface EditIconsProps {
   rowId: string;
   fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
   validationSchema?: ObjectSchema<any>;
-  componentToRender?: () => ReactNode;
 }
 
 type RowActions<T> =
@@ -259,13 +259,7 @@ class Table<T> extends Component<Props<T>, State> {
       </TableHeaderCell>
     ));
 
-  renderEditIcons = ({
-    field,
-    rowId,
-    fn,
-    validationSchema,
-    componentToRender = () => null,
-  }: EditIconsProps) => {
+  renderEditIcons = ({ field, rowId, fn, validationSchema }: EditIconsProps) => {
     const { currentlyModifyingRowId } = this.state;
     if (currentlyModifyingRowId === rowId) {
       return (
@@ -282,7 +276,8 @@ class Table<T> extends Component<Props<T>, State> {
           >
             {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
               <Form>
-                {componentToRender()}
+                <Field type="text" name="rowField" component={FormikInput} />
+                <FieldError name="rowField" />
                 <StyledReactIcon
                   data-testid="save"
                   color={colors.green}
@@ -340,7 +335,6 @@ class Table<T> extends Component<Props<T>, State> {
                 rowId: row[editableId],
                 fn: editable.fn,
                 validationSchema: editable.validationSchema,
-                componentToRender: editable.formikComponentField,
               })
             : row[key];
 
@@ -354,7 +348,6 @@ class Table<T> extends Component<Props<T>, State> {
                   rowId: row[editableId],
                   fn: editable.fn,
                   validationSchema: editable.validationSchema,
-                  componentToRender: editable.formikComponentField,
                 })
               : hasRenderFn;
 
diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index f36dfeb9e..9445f09bb 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import React from 'react';
 import { FaMusic, FaCode } from 'react-icons/fa';
+import { object, string } from 'yup';
 import { TableColumn } from '../../..';
 
 export const columns: Array<TableColumn<any>> = [
@@ -16,6 +17,14 @@ export const columns: Array<TableColumn<any>> = [
   {
     title: 'Name',
     key: 'name',
+    editable: {
+      fn: ({ value, currentValue, id }) => console.log(value, currentValue, id),
+      validationSchema: object().shape({
+        rowField: string()
+          .required('*Required')
+          .matches(/[a-zA-Z0-9_]+\.csv/, 'Filename must end with .csv'),
+      }),
+    },
   },
   {
     title: 'Date Created',

From 8eafa85360671bc57c690c45c879eb098841375a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 31 Jan 2022 23:06:47 +0100
Subject: [PATCH 132/157] revert table data (file for storybook docs)

---
 src/components/Table/data.tsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/data.tsx b/src/components/Table/data.tsx
index 9445f09bb..a370db1fa 100644
--- a/src/components/Table/data.tsx
+++ b/src/components/Table/data.tsx
@@ -1,10 +1,7 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 import { FaMusic, FaCode } from 'react-icons/fa';
-import { object, string } from 'yup';
-import { TableColumn } from '../../..';
 
-export const columns: Array<TableColumn<any>> = [
+export const columns = [
   {
     title: 'ID',
     key: 'id',
@@ -17,19 +14,10 @@ export const columns: Array<TableColumn<any>> = [
   {
     title: 'Name',
     key: 'name',
-    editable: {
-      fn: ({ value, currentValue, id }) => console.log(value, currentValue, id),
-      validationSchema: object().shape({
-        rowField: string()
-          .required('*Required')
-          .matches(/[a-zA-Z0-9_]+\.csv/, 'Filename must end with .csv'),
-      }),
-    },
   },
   {
     title: 'Date Created',
     key: 'dateCreated',
-    render: ({ value }: any) => value.dt,
   },
   {
     title: 'Director',
@@ -51,7 +39,7 @@ export const data = [
     icon: <FaCode />,
     name: 'Soundtrack: No Country',
     director: 'Coen Brothers',
-    dateCreated: '2018/07/24',
+    dateCreated: '2018/07/21',
   },
 ];
 

From f35ef706f17d60ea84f3294a9909da4c8ff60fa0 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 31 Jan 2022 23:08:29 +0100
Subject: [PATCH 133/157] revert usage file

---
 src/components/Table/table.stories.mdx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Table/table.stories.mdx b/src/components/Table/table.stories.mdx
index 8912d2c73..fb51375a4 100644
--- a/src/components/Table/table.stories.mdx
+++ b/src/components/Table/table.stories.mdx
@@ -20,8 +20,6 @@ const Page = () => (
   <Story name="default">
     <>
     <Table
-            editableBy="name"
-            editableId="id"
             columns={columns}
             data={data}
             options={{
@@ -30,9 +28,9 @@ const Page = () => (
                     action: (data) => console.log(data),
                 },
                 rowActions: [
-                    { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => <MdDelete />},
-                      { icon: "cog", onClick: (id) => console.log(id), render: () => <MdDelete />},
-                      { icon: "trash", onClick: (id) => console.log(id), render: () => <MdDelete /> },
+                    { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => (<p>render</p>)},
+                      { icon: "cog", onClick: (id) => console.log(id), render: () => <p>render</p>},
+                      { icon: "trash", onClick: (id) => console.log(id) },
                 ],
             }}
             tableButton={[

From 9594a7903b9456b0ecbc7ebf5dc90f0b3eb4fcb9 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 31 Jan 2022 23:10:32 +0100
Subject: [PATCH 134/157] fix typo

---
 src/components/Table/Table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index ef663f27c..20172aa0d 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -5,7 +5,7 @@ import { IoIosCheckmark, IoIosClose } from 'react-icons/io';
 import { FaRegEdit } from 'react-icons/fa';
 import { Field, Form, Formik, FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
-import FieldError from '../Input/FIeldError';
+import FieldError from '../Input/FieldError';
 import FormikInput from '../Input/FormikInput';
 import colors from '../../theme/colors';
 import Grid from '../Grid';

From 77a153d961d3f9d7de3a66d2828b5ab5da20bad0 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 31 Jan 2022 23:48:55 +0100
Subject: [PATCH 135/157] export styles into a separate file

---
 src/components/Table/Table.tsx | 24 ++++--------------------
 src/components/Table/styled.ts | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 20172aa0d..abf76b937 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,8 +1,7 @@
 import 'react-dates/initialize';
 import React, { ReactNode, SyntheticEvent, Component } from 'react';
-import styled, { CSSProperties } from 'styled-components';
-import { IoIosCheckmark, IoIosClose } from 'react-icons/io';
-import { FaRegEdit } from 'react-icons/fa';
+import { CSSProperties } from 'styled-components';
+import { IoIosClose } from 'react-icons/io';
 import { Field, Form, Formik, FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
 import FieldError from '../Input/FieldError';
@@ -22,25 +21,10 @@ import {
   TableHeaderCell,
   TableWithHeaderSectionContainer,
   TableWrapper,
+  StyledReactIcon,
+  StyledIcon,
 } from './styled';
 
-interface StyledReactIconProps {
-  color: string;
-}
-
-export const StyledReactIcon = styled(IoIosCheckmark)<StyledReactIconProps>`
-  width: 2.2rem;
-  height: 2.2rem;
-  color: ${({ color }) => color};
-  cursor: pointer;
-`;
-
-const StyledIcon = styled(FaRegEdit)`
-  font-size: 1.3rem;
-  cursor: pointer;
-  align-self: flex-end;
-`;
-
 interface Data {
   id: string;
   [row: string]: any;
diff --git a/src/components/Table/styled.ts b/src/components/Table/styled.ts
index f702f7f18..e81b4a8be 100644
--- a/src/components/Table/styled.ts
+++ b/src/components/Table/styled.ts
@@ -2,6 +2,8 @@ import { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
+import { IoIosCheckmark } from 'react-icons/io';
+import { FaRegEdit } from 'react-icons/fa';
 import colors from '../../theme/colors';
 import Checkbox from '../Checkbox';
 
@@ -113,6 +115,23 @@ const TableButton = styled(Button)<ButtonProps>`
   }
 `;
 
+interface StyledReactIconProps {
+  color: string;
+}
+
+export const StyledReactIcon = styled(IoIosCheckmark)<StyledReactIconProps>`
+  width: 2.2rem;
+  height: 2.2rem;
+  color: ${({ color }) => color};
+  cursor: pointer;
+`;
+
+export const StyledIcon = styled(FaRegEdit)`
+  font-size: 1.3rem;
+  cursor: pointer;
+  align-self: flex-end;
+`;
+
 export {
   TableWithHeaderSectionContainer,
   TableWrapper,

From e709e881576cb3354aa999cb46259fbcd32f32e9 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 1 Feb 2022 11:16:48 +0100
Subject: [PATCH 136/157] add comment

---
 src/components/Table/Table.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index abf76b937..12bda2924 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -10,6 +10,8 @@ import colors from '../../theme/colors';
 import Grid from '../Grid';
 import Loader from '../Loader';
 import { AnalyticsProps } from '../../analytics';
+
+// styled components
 import {
   ButtonTableRow,
   LoaderContainer,

From 2ca9c92b372814c3555960ed42b464baae0ea0f5 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 1 Feb 2022 11:21:09 +0100
Subject: [PATCH 137/157] rename component

---
 src/components/Input/{FIeldError.tsx => ErrorField.tsx} | 4 ++--
 src/components/Table/Table.tsx                          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/Input/{FIeldError.tsx => ErrorField.tsx} (82%)

diff --git a/src/components/Input/FIeldError.tsx b/src/components/Input/ErrorField.tsx
similarity index 82%
rename from src/components/Input/FIeldError.tsx
rename to src/components/Input/ErrorField.tsx
index 0016d9cf2..e69e15420 100644
--- a/src/components/Input/FIeldError.tsx
+++ b/src/components/Input/ErrorField.tsx
@@ -9,8 +9,8 @@ const ErrorMessageWrapper = styled(ErrorMessage)<ErrorMessageProps>`
   color: ${colors.red};
 `;
 
-const FieldError: FunctionComponent<ErrorMessageProps> = ({ className, ...rest }) => (
+const ErrorField: FunctionComponent<ErrorMessageProps> = ({ className, ...rest }) => (
   <ErrorMessageWrapper component="span" className={className} {...rest} />
 );
 
-export default FieldError;
+export default ErrorField;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 12bda2924..3fec233cd 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -4,7 +4,7 @@ import { CSSProperties } from 'styled-components';
 import { IoIosClose } from 'react-icons/io';
 import { Field, Form, Formik, FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
-import FieldError from '../Input/FieldError';
+import ErrorField from '../Input/ErrorField';
 import FormikInput from '../Input/FormikInput';
 import colors from '../../theme/colors';
 import Grid from '../Grid';
@@ -263,7 +263,7 @@ class Table<T> extends Component<Props<T>, State> {
             {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
               <Form>
                 <Field type="text" name="rowField" component={FormikInput} />
-                <FieldError name="rowField" />
+                <ErrorField name="rowField" />
                 <StyledReactIcon
                   data-testid="save"
                   color={colors.green}

From acd172452402b8630730aee525187fae6bd24f2a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Tue, 1 Feb 2022 13:50:04 +0100
Subject: [PATCH 138/157] update changelog and version

---
 CHANGELOG.md | 8 +++++++-
 package.json | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffb13c102..1b0729661 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
-# [2.5.21] - 24.01.2022
+# [2.5.22] - 04.02.2022
+
+## Added
+
+- Option in column table to make fields(columns) editable
+
+# [2.5.21] - 25.01.2022
 
 ## Change
 
diff --git a/package.json b/package.json
index 828bf9a49..ad7404d33 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.20",
+  "version": "2.5.22",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From e6c2480dfcbbad376c35aa60e47cf848f2c2f80a Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Wed, 2 Feb 2022 23:21:35 +0100
Subject: [PATCH 139/157] fix styling and typos. Also provide render to field
 if column is both editable and has render function.

---
 index.d.ts                           |  1 +
 src/components/Input/FormikInput.tsx |  1 +
 src/components/Table/Table.tsx       | 59 +++++++++++++++-------------
 src/components/Table/styled.ts       | 37 +++++++++++++----
 4 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 2b1c592af..b5d26b626 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -282,6 +282,7 @@ export interface TableProps<TableData extends TableRowData = TableRowData> exten
   options?: Partial<TableOptions<TableData>>;
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
+  editableById?: string;
 }
 
 interface TableState {
diff --git a/src/components/Input/FormikInput.tsx b/src/components/Input/FormikInput.tsx
index a5e49968d..3037d51e1 100644
--- a/src/components/Input/FormikInput.tsx
+++ b/src/components/Input/FormikInput.tsx
@@ -10,6 +10,7 @@ const InputContainer = styled.div`
   align-items: center;
   grid-column-end: span 12;
   grid-row-end: span 1;
+  flex: 1;
 `;
 
 type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> & FieldProps & AnalyticsProps;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 3fec233cd..94863b78c 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -25,6 +25,8 @@ import {
   TableWrapper,
   StyledReactIcon,
   StyledIcon,
+  StyledForm,
+  FormWrapper,
 } from './styled';
 
 interface Data {
@@ -103,7 +105,6 @@ type Props<T = Data> = {
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
   editableId?: string;
-  editableBy?: string;
 } & AnalyticsProps;
 
 type State = {
@@ -249,21 +250,20 @@ class Table<T> extends Component<Props<T>, State> {
     const { currentlyModifyingRowId } = this.state;
     if (currentlyModifyingRowId === rowId) {
       return (
-        <>
-          <Formik
-            initialValues={{ rowField: field }}
-            onSubmit={({ rowField }) => {
-              this.setState({
-                currentlyModifyingRowId: null,
-              });
-              fn?.({ value: field, currentValue: rowField, id: rowId });
-            }}
-            validationSchema={validationSchema}
-          >
-            {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
-              <Form>
+        <Formik
+          initialValues={{ rowField: field }}
+          onSubmit={({ rowField }) => {
+            this.setState({
+              currentlyModifyingRowId: null,
+            });
+            fn?.({ value: field, currentValue: rowField, id: rowId });
+          }}
+          validationSchema={validationSchema}
+        >
+          {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
+            <StyledForm>
+              <FormWrapper>
                 <Field type="text" name="rowField" component={FormikInput} />
-                <ErrorField name="rowField" />
                 <StyledReactIcon
                   data-testid="save"
                   color={colors.green}
@@ -286,10 +286,11 @@ class Table<T> extends Component<Props<T>, State> {
                     })
                   }
                 />
-              </Form>
-            )}
-          </Formik>
-        </>
+              </FormWrapper>
+              <ErrorField name="rowField" />
+            </StyledForm>
+          )}
+        </Formik>
       );
     }
     return (
@@ -315,7 +316,7 @@ class Table<T> extends Component<Props<T>, State> {
     return newData.map((row) => (
       <TableRow key={row.id} noBottomBorder={!tableButton}>
         {newColumns.map(({ render, key, editable, style }: Column, index: number) => {
-          const isEditble = editable
+          const isEditable = editable
             ? this.renderEditIcons({
                 field: row[key],
                 rowId: row[editableId],
@@ -324,13 +325,12 @@ class Table<T> extends Component<Props<T>, State> {
               })
             : row[key];
 
-          const hasRenderFn = render ? render({ value: row[key], rowValues: row }) : isEditble;
+          const hasRenderFn = render ? render({ value: row[key], rowValues: row }) : isEditable;
 
-          const hasRenderAndEnable =
+          const hasRenderAndEditable =
             render && editable
-              ? render({ value: row[key], rowValues: row }) &&
-                this.renderEditIcons({
-                  field: row[key],
+              ? this.renderEditIcons({
+                  field: render({ value: row[key], rowValues: row }) as string,
                   rowId: row[editableId],
                   fn: editable.fn,
                   validationSchema: editable.validationSchema,
@@ -338,8 +338,13 @@ class Table<T> extends Component<Props<T>, State> {
               : hasRenderFn;
 
           return (
-            <TableCell key={index} isActionsCell={key === 'actions'} style={style || {}}>
-              {hasRenderAndEnable}
+            <TableCell
+              isEditableCell={!!editable}
+              key={index}
+              isActionsCell={key === 'actions'}
+              style={style || {}}
+            >
+              {hasRenderAndEditable}
             </TableCell>
           );
         })}
diff --git a/src/components/Table/styled.ts b/src/components/Table/styled.ts
index e81b4a8be..ac0bc2455 100644
--- a/src/components/Table/styled.ts
+++ b/src/components/Table/styled.ts
@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
+import { Form } from 'formik';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
@@ -42,6 +43,13 @@ const TableHeadRow = styled.tr`
   width: 100%;
 `;
 
+export const StyledIcon = styled(FaRegEdit)`
+  display: none;
+  position: absolute;
+  margin-left: 0.5rem;
+  cursor: pointer;
+`;
+
 const TableRow = styled.tr<{ noBottomBorder?: boolean }>`
   border-bottom: 1px solid ${colors.lightGray};
   width: 100%;
@@ -61,7 +69,13 @@ const ButtonTableRow = styled(TableRow)`
   border-top: 1px solid ${colors.gray};
 `;
 
-const TableCell = styled.td<{ isActionsCell?: boolean }>`
+interface TableCellProps {
+  isActionsCell?: boolean;
+  isEditableCell?: boolean;
+}
+
+const TableCell = styled.td<TableCellProps>`
+  ${({ isEditableCell }) => isEditableCell && 'width: 330px'};
   font-size: ${({ theme }) => theme.font.sizes.medium};
   padding: 0.4375rem 1%;
   vertical-align: middle;
@@ -78,6 +92,19 @@ const TableCell = styled.td<{ isActionsCell?: boolean }>`
       color: ${({ theme }) => theme.palette.text.main};
     }
   }
+
+  &:hover ${StyledIcon} {
+    display: inline-block;
+  }
+`;
+
+const StyledForm = styled(Form)`
+  width: 100% !important;
+  width: fit-content;
+`;
+
+const FormWrapper = styled.div`
+  display: flex;
 `;
 
 const TableHeaderCell = styled.th<any>`
@@ -126,12 +153,6 @@ export const StyledReactIcon = styled(IoIosCheckmark)<StyledReactIconProps>`
   cursor: pointer;
 `;
 
-export const StyledIcon = styled(FaRegEdit)`
-  font-size: 1.3rem;
-  cursor: pointer;
-  align-self: flex-end;
-`;
-
 export {
   TableWithHeaderSectionContainer,
   TableWrapper,
@@ -143,4 +164,6 @@ export {
   LoaderContainer,
   TableCheckbox,
   TableButton,
+  StyledForm,
+  FormWrapper,
 };

From 283e2cd97431745586b9bf1d302558df330316b0 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 3 Feb 2022 13:28:18 +0100
Subject: [PATCH 140/157] add tagging for editable fields in table

---
 src/components/Table/Table.tsx | 114 ++++++++++++++++++++++-----------
 1 file changed, 78 insertions(+), 36 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 94863b78c..92c0c040b 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -9,7 +9,12 @@ import FormikInput from '../Input/FormikInput';
 import colors from '../../theme/colors';
 import Grid from '../Grid';
 import Loader from '../Loader';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 // styled components
 import {
@@ -262,31 +267,56 @@ class Table<T> extends Component<Props<T>, State> {
         >
           {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
             <StyledForm>
-              <FormWrapper>
-                <Field type="text" name="rowField" component={FormikInput} />
-                <StyledReactIcon
-                  data-testid="save"
-                  color={colors.green}
-                  onClick={() => {
-                    if (isValid) {
-                      fn?.({ value: field, currentValue: rowField, id: rowId });
-                      this.setState({
-                        currentlyModifyingRowId: null,
-                      });
-                    }
-                  }}
-                />
-                <StyledReactIcon
-                  data-testid="cancel"
-                  as={IoIosClose}
-                  color={colors.red}
-                  onClick={() =>
-                    this.setState({
-                      currentlyModifyingRowId: null,
-                    })
-                  }
-                />
-              </FormWrapper>
+              <AnalyticsComponent>
+                {({ pages, tracker, merchantId, ip }) => (
+                  <FormWrapper>
+                    <Field
+                      tag="editable_text_input"
+                      type="text"
+                      name="rowField"
+                      component={FormikInput}
+                    />
+                    <StyledReactIcon
+                      data-testid="save"
+                      color={colors.green}
+                      onClick={() => {
+                        tracker.track({
+                          event: AnalyticsEvents.CLICK,
+                          type: AnalyticsComponentType.ICON,
+                          tag: 'icon_save',
+                          pages,
+                          merchantId,
+                          ip,
+                        });
+                        if (isValid) {
+                          fn?.({ value: field, currentValue: rowField, id: rowId });
+                          this.setState({
+                            currentlyModifyingRowId: null,
+                          });
+                        }
+                      }}
+                    />
+                    <StyledReactIcon
+                      data-testid="cancel"
+                      as={IoIosClose}
+                      color={colors.red}
+                      onClick={() => {
+                        tracker.track({
+                          event: AnalyticsEvents.CLICK,
+                          type: AnalyticsComponentType.ICON,
+                          tag: 'icon_cancel',
+                          pages,
+                          merchantId,
+                          ip,
+                        });
+                        this.setState({
+                          currentlyModifyingRowId: null,
+                        });
+                      }}
+                    />
+                  </FormWrapper>
+                )}
+              </AnalyticsComponent>
               <ErrorField name="rowField" />
             </StyledForm>
           )}
@@ -294,16 +324,28 @@ class Table<T> extends Component<Props<T>, State> {
       );
     }
     return (
-      <>
-        {field}
-        <StyledIcon
-          onClick={() =>
-            this.setState({
-              currentlyModifyingRowId: rowId,
-            })
-          }
-        />
-      </>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <>
+            {field}
+            <StyledIcon
+              onClick={() => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.ICON,
+                  tag: 'icon_edit',
+                  pages,
+                  merchantId,
+                  ip,
+                });
+                this.setState({
+                  currentlyModifyingRowId: rowId,
+                });
+              }}
+            />
+          </>
+        )}
+      </AnalyticsComponent>
     );
   };
 

From 0d18d5294a06b837acd592b2a2a2fb6665a48c5b Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 3 Feb 2022 19:25:03 +0100
Subject: [PATCH 141/157] fix radio type and add focus out event on input and
 textarea

---
 src/analytics/index.tsx              |  2 ++
 src/components/Input/Input.tsx       | 12 ++++++++++++
 src/components/Radio/Radio.tsx       |  2 +-
 src/components/TextArea/TextArea.tsx | 12 ++++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
index f821a602a..712dc9702 100644
--- a/src/analytics/index.tsx
+++ b/src/analytics/index.tsx
@@ -49,6 +49,7 @@ export enum AnalyticsEvents {
   DATEPICKER_CHANGE = 'datepicker_date_change',
   DAYPICKER_CHANGE = 'daypicker_date_change',
   KEYBOARD_EVENT = 'keyboard_event',
+  FOCUS_OUT = 'focus_out',
 }
 
 export enum AnalyticsComponentType {
@@ -68,6 +69,7 @@ export enum AnalyticsComponentType {
   INPUT = 'input',
   TEXTAREA = 'textarea',
   TAB_NAVIGATION = 'tab_navigation',
+  RADIO = 'radio',
 }
 
 export interface Event {
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 81fe3ef34..445d46b81 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -124,6 +124,18 @@ const Input = forwardRef(
                 type={type}
                 placeholder={placeholder}
                 onChange={onInputChange}
+                onBlur={() => {
+                  if (tag) {
+                    tracker.track({
+                      event: AnalyticsEvents.FOCUS_OUT,
+                      type: AnalyticsComponentType.INPUT,
+                      tag,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }
+                }}
                 onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
                   if (e.key === 'Enter') {
                     if (tag) {
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index d1b175937..8e6e1f722 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -40,7 +40,7 @@ const Radio = ({
               if (tag) {
                 tracker.track({
                   event: AnalyticsEvents.RADIOBUTTON_SELECT,
-                  type: AnalyticsComponentType.CHECKBOX,
+                  type: AnalyticsComponentType.RADIO,
                   tag,
                   pages,
                   merchantId,
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index 8fe5e68ce..915d119b6 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -50,6 +50,18 @@ const TextArea = ({ tag = '', ...rest }: Props) => (
             });
           }
         }}
+        onBlur={() => {
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.FOCUS_OUT,
+              type: AnalyticsComponentType.TEXTAREA,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
         {...rest}
       />
     )}

From 3c1315a6776e1e6b6fd13816fdd9efc8f76435ef Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 3 Feb 2022 20:35:57 +0100
Subject: [PATCH 142/157] add focus out persa call for input component

---
 src/components/Input/Input.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 445d46b81..665080860 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -182,6 +182,18 @@ const Input = forwardRef(
               placeholder={placeholder}
               onChange={onInputChange}
               icon={icon}
+              onBlur={() => {
+                if (tag) {
+                  tracker.track({
+                    event: AnalyticsEvents.FOCUS_OUT,
+                    type: AnalyticsComponentType.INPUT,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+              }}
               onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
                 if (tag) {
                   if (e.key === 'Enter') {

From d37df2e63f892838b22e668721460c11f011dd7d Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 4 Feb 2022 11:35:34 +0100
Subject: [PATCH 143/157] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b0729661..e669b9c33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 ## Added
 
 - Option in column table to make fields(columns) editable
+- onBlur function to trigger persa when input and textarea are focused-out
 
 # [2.5.21] - 25.01.2022
 

From 6e5ad784f928f2989fc477ebc1e456c41e38e480 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Fri, 4 Feb 2022 11:37:40 +0100
Subject: [PATCH 144/157] remove unused import

---
 src/components/Table/Table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 92c0c040b..ce2b48328 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -2,7 +2,7 @@ import 'react-dates/initialize';
 import React, { ReactNode, SyntheticEvent, Component } from 'react';
 import { CSSProperties } from 'styled-components';
 import { IoIosClose } from 'react-icons/io';
-import { Field, Form, Formik, FormikProps } from 'formik';
+import { Field, Formik, FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
 import ErrorField from '../Input/ErrorField';
 import FormikInput from '../Input/FormikInput';

From 46fd5bdb8b2642f7ca9d76795f10e25fd01d5eca Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 21 Feb 2022 10:35:35 +0100
Subject: [PATCH 145/157] change preview button buy tag name

---
 src/paywall-previews/Preview1/Preview1.tsx | 2 +-
 src/paywall-previews/Preview2/Preview2.tsx | 2 +-
 src/paywall-previews/Preview4/Preview4.tsx | 2 +-
 src/paywall-previews/Preview5/Preview5.tsx | 2 +-
 src/paywall-previews/Preview6/Preview6.tsx | 2 +-
 src/paywall-previews/Preview7/Preview7.tsx | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index e6e9cf238..f9d98c1a0 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -125,7 +125,7 @@ const Preview1 = ({
                 tracker.track({
                   event: AnalyticsEvents.CLICK,
                   type: AnalyticsComponentType.BUTTON,
-                  tag: 'button_buy',
+                  tag: 'button_buy_preview',
                   pages,
                   merchantId,
                   ip,
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index e3ba36edc..b147cc388 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -97,7 +97,7 @@ const Preview2 = ({
           <PreviewText value={previewDescription} />
           <BuyButtonWrapper>
             <BuyButton
-              tag="button_buy"
+              tag="button_buy_preview"
               buttonBgColor={buttonBgColor}
               buttonTextColor={buttonTextColor}
               onClick={handleOpenModal}
diff --git a/src/paywall-previews/Preview4/Preview4.tsx b/src/paywall-previews/Preview4/Preview4.tsx
index a42c1bc24..4d74b98a7 100644
--- a/src/paywall-previews/Preview4/Preview4.tsx
+++ b/src/paywall-previews/Preview4/Preview4.tsx
@@ -79,7 +79,7 @@ const Preview4 = ({
       <StyledContainer columns="1fr">
         {displayBuyButton && (
           <StyledButton
-            tag="button_buy"
+            tag="button_buy_preview"
             buttonBgColor={buttonBgColor}
             buttonTextColor={buttonTextColor}
             onClick={handleOpenModal}
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index 1a7eca825..519bf0b91 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -81,7 +81,7 @@ const Preview5 = ({
       <BuyButtonHolder>
         <BuyButtonBorder>
           <StyledBuyButton
-            tag="button_buy"
+            tag="button_buy_preview"
             buttonBgColor={buttonBgColor}
             buttonTextColor={buttonTextColor}
             onClick={handleOpenModal}
diff --git a/src/paywall-previews/Preview6/Preview6.tsx b/src/paywall-previews/Preview6/Preview6.tsx
index b9f917d84..d9504b4f3 100644
--- a/src/paywall-previews/Preview6/Preview6.tsx
+++ b/src/paywall-previews/Preview6/Preview6.tsx
@@ -90,7 +90,7 @@ const Preview6 = ({
     </ItemDetails>
     <ButtonWrapper>
       <StyledBuyButton
-        tag="button_buy"
+        tag="button_buy_preview"
         buttonBgColor={buttonBgColor}
         buttonTextColor={buttonTextColor}
         onClick={handleOpenModal}
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index 1af5acbcb..fbdc22ff7 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -107,7 +107,7 @@ const Preview7 = ({
     {displayBuyButton && (
       <ButtonWrapper>
         <StyledBuyButton
-          tag="button_buy"
+          tag="button_buy_preview"
           buttonBgColor={buttonBgColor}
           buttonTextColor={buttonTextColor}
           onClick={handleOpenModal}

From ff07d8f23b1e2135ee3b593c4602efc86e811de0 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 21 Feb 2022 11:54:20 +0100
Subject: [PATCH 146/157] update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e669b9c33..a6e993c42 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.23] - 21.02.2022
+
+## Change
+
+- Buy button tag name on paywall previews
+
 # [2.5.22] - 04.02.2022
 
 ## Added

From 149ccce26bf596adc736a9e43a63925bd3e5f008 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 21 Feb 2022 11:54:46 +0100
Subject: [PATCH 147/157] prepare version for next release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ad7404d33..658f37be8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.22",
+  "version": "2.5.23",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From f8681136fee4a5947913f61e11faf502204cf5d1 Mon Sep 17 00:00:00 2001
From: Vladimir <v.tremula@gmail.com>
Date: Wed, 9 Mar 2022 15:12:17 +0100
Subject: [PATCH 148/157] - implemented a new hook `useAnalytics` as an
 alternative to the `AnalyticsComponent` - extracted components and classes
 from the analytics/ folder into separate files

---
 .eslintrc                            |  26 ++---
 CHANGELOG.md                         |   6 +
 index.d.ts                           |   7 ++
 package.json                         |   4 +-
 src/analytics/AnalyticsComponent.tsx |  13 +++
 src/analytics/AnalyticsPage.tsx      |  74 ++++++++++++
 src/analytics/AnalyticsTracker.ts    |  67 +++++++++++
 src/analytics/externalTypes.ts       |  18 +++
 src/analytics/index.ts               |  26 +++++
 src/analytics/index.tsx              | 165 ---------------------------
 src/analytics/useAnalytics.ts        |  32 ++++++
 src/index.ts                         |   1 +
 12 files changed, 255 insertions(+), 184 deletions(-)
 create mode 100644 src/analytics/AnalyticsComponent.tsx
 create mode 100644 src/analytics/AnalyticsPage.tsx
 create mode 100644 src/analytics/AnalyticsTracker.ts
 create mode 100644 src/analytics/externalTypes.ts
 create mode 100644 src/analytics/index.ts
 delete mode 100644 src/analytics/index.tsx
 create mode 100644 src/analytics/useAnalytics.ts

diff --git a/.eslintrc b/.eslintrc
index 19f5c0b80..0138c2e29 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -69,11 +69,15 @@
     "linebreak-style": "off",
     "no-debugger": "off",
     "no-alert": "off",
-    "no-use-before-define": "warn",
-    "no-unused-vars": [
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
       "warn",
       {
-        "argsIgnorePattern": "res|next|^err"
+        "argsIgnorePattern": "res|next|^err|^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
       }
     ],
     "prefer-const": [
@@ -110,20 +114,8 @@
     "consistent-return": "off",
     "jsx-a11y/accessible-emoji": "off",
     "radix": "off",
-    "no-shadow": [
-      2,
-      {
-        "hoist": "all",
-        "allow": [
-          "resolve",
-          "reject",
-          "done",
-          "next",
-          "err",
-          "error"
-        ]
-      }
-    ],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["warn"],
     "quotes": [
       2,
       "single",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a6e993c42..e3334b2e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.24] - 09.03.2022
+
+## Added
+
+- New `useAnalytics` hook as an alternative to `AnalyticsComponent`
+
 # [2.5.23] - 21.02.2022
 
 ## Change
diff --git a/index.d.ts b/index.d.ts
index b5d26b626..5a20c74e3 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -140,6 +140,13 @@ export interface ContainerProps extends AnalyticsProps{
   alignContent?: string;
 }
 
+declare type TrackParams = Pick<Event, 'event' | 'type' | 'tag'> & Partial<Pick<Event, 'pages' | 'merchantId' | 'ip'>>;
+
+export declare const useAnalytics: () => {
+  track: (trackParams: TrackParams) => void;
+  trackCallback: (trackParams: TrackParams) => () => void;
+};
+
 export interface CellProps extends AnalyticsProps{
   className?: string;
   width?: number;
diff --git a/package.json b/package.json
index 658f37be8..91457386f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.23",
+  "version": "2.5.24",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",
@@ -107,4 +107,4 @@
     "formik": "^2.1.5",
     "yup": "^0.32.11"
   }
-}
+}
\ No newline at end of file
diff --git a/src/analytics/AnalyticsComponent.tsx b/src/analytics/AnalyticsComponent.tsx
new file mode 100644
index 000000000..c436aa832
--- /dev/null
+++ b/src/analytics/AnalyticsComponent.tsx
@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { AnalyticsContext, AnalyticsContextValue } from './AnalyticsPage';
+
+export type AnalyticsComponentProps = {
+  children: (context: AnalyticsContextValue) => ReactNode;
+};
+
+/** A component to wrap other components with to gain access to the AnalyticsContextValue. */
+const AnalyticsComponent = ({ children }: AnalyticsComponentProps) => (
+  <AnalyticsContext.Consumer>{children}</AnalyticsContext.Consumer>
+);
+
+export default AnalyticsComponent;
diff --git a/src/analytics/AnalyticsPage.tsx b/src/analytics/AnalyticsPage.tsx
new file mode 100644
index 000000000..25ebfdf0a
--- /dev/null
+++ b/src/analytics/AnalyticsPage.tsx
@@ -0,0 +1,74 @@
+import React, { createContext } from 'react';
+import AnalyticsTracker from './AnalyticsTracker';
+
+export type AnalyticsTag = string;
+
+export enum AnalyticsPageType {
+  PAGE = 'page',
+  MODAL = 'modal',
+  TAB = 'tab',
+}
+
+export interface AnalyticsPageObject {
+  tag: AnalyticsTag;
+  type: AnalyticsPageType;
+}
+
+export interface AnalyticsContextValue {
+  pages: AnalyticsPageObject[];
+  tracker: AnalyticsTracker;
+  merchantId: number;
+  ip: string;
+}
+
+export const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue = {
+  pages: [],
+  tracker: new AnalyticsTracker(),
+  merchantId: 0,
+  ip: '',
+};
+
+export const AnalyticsContext = createContext(ROOT_ANALYTICS_CONTEXT);
+
+export interface AnalyticsPageProps {
+  /** Tag of this page. */
+  tag: AnalyticsTag;
+
+  /** Type of this page. */
+  type: AnalyticsPageType;
+
+  /** Children in the page. */
+  children?: React.ReactNode;
+
+  /** merchant id */
+  merchantId?: number;
+
+  /** user ip address */
+  ip?: string;
+}
+
+/** Registers a subpage in the analytics component hierarchy. */
+const AnalyticsPageComponent = ({
+  tag,
+  type,
+  children,
+  merchantId: mid,
+  ip: ipAddress,
+}: AnalyticsPageProps) => (
+  <AnalyticsContext.Consumer>
+    {({ pages, tracker, merchantId, ip }) => (
+      <AnalyticsContext.Provider
+        value={{
+          pages: [...pages, { tag, type }],
+          tracker,
+          merchantId: mid || merchantId,
+          ip: ipAddress || ip,
+        }}
+      >
+        {children}
+      </AnalyticsContext.Provider>
+    )}
+  </AnalyticsContext.Consumer>
+);
+
+export default AnalyticsPageComponent;
diff --git a/src/analytics/AnalyticsTracker.ts b/src/analytics/AnalyticsTracker.ts
new file mode 100644
index 000000000..edf9fb6b2
--- /dev/null
+++ b/src/analytics/AnalyticsTracker.ts
@@ -0,0 +1,67 @@
+import { AnalyticsPageObject, AnalyticsTag } from './AnalyticsPage';
+
+export enum AnalyticsEvents {
+  CLICK = 'click',
+  DROPDOWN_CHANGE = 'dropdown_change',
+  SWITCH_ON = 'switch_on',
+  SWITCH_OFF = 'switch_off',
+  DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
+  KEYBOARD_EVENT = 'keyboard_event',
+  FOCUS_OUT = 'focus_out',
+}
+
+export enum AnalyticsComponentType {
+  BUTTON = 'button',
+  DROPDOWN = 'dropdown',
+  SWITCH = 'switch',
+  PAGINATION = 'pagination',
+  ICON = 'icon',
+  LINK = 'link',
+  CHECKBOX = 'checkbox',
+  DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
+  DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
+  ACCORDION = 'accordion',
+  MODAL = 'modal',
+  INPUT = 'input',
+  TEXTAREA = 'textarea',
+  TAB_NAVIGATION = 'tab_navigation',
+  RADIO = 'radio',
+}
+
+export interface TrackEvent {
+  event: AnalyticsEvents;
+  type: AnalyticsComponentType;
+  tag: AnalyticsTag;
+  pages: AnalyticsPageObject[];
+  merchantId: number;
+  ip: string;
+}
+
+export type AnalyticsHandlerFn = (event: TrackEvent) => void;
+
+export default class AnalyticsTracker {
+  handlers: AnalyticsHandlerFn[] = [];
+
+  registerHandler = (fn: AnalyticsHandlerFn) => {
+    this.handlers.push(fn);
+
+    return () => {
+      this.unregisterHandler(fn);
+    };
+  };
+
+  unregisterHandler = (fn: AnalyticsHandlerFn) => {
+    this.handlers = this.handlers.filter((handler) => handler !== fn);
+  };
+
+  track = (event: TrackEvent) => {
+    this.handlers.forEach((handler) => handler(event));
+  };
+}
diff --git a/src/analytics/externalTypes.ts b/src/analytics/externalTypes.ts
new file mode 100644
index 000000000..862c98a0d
--- /dev/null
+++ b/src/analytics/externalTypes.ts
@@ -0,0 +1,18 @@
+import { AnalyticsTag } from './AnalyticsPage';
+
+export interface AnalyticsProps {
+  /** Unique identifier of the component within the logical page hierarchy. */
+  tag?: AnalyticsTag;
+
+  /** Posiition of the component within a table-like component. */
+  position?: {
+    /** Unique ID of the row (usually what you would use as a key in react). */
+    id: string;
+
+    /** Row index. */
+    row?: number;
+
+    /** Column index or name. */
+    column?: number | string;
+  };
+}
diff --git a/src/analytics/index.ts b/src/analytics/index.ts
new file mode 100644
index 000000000..29171144c
--- /dev/null
+++ b/src/analytics/index.ts
@@ -0,0 +1,26 @@
+export {
+  default as AnalyticsPage,
+  ROOT_ANALYTICS_CONTEXT,
+  AnalyticsContext,
+} from './AnalyticsPage';
+
+export {
+  default as AnalyticsTracker,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from './AnalyticsTracker';
+
+export { default as AnalyticsComponent, AnalyticsComponentProps } from './AnalyticsComponent';
+
+export { default as useAnalytics } from './useAnalytics';
+
+export type {
+  AnalyticsTag,
+  AnalyticsContextValue,
+  AnalyticsPageProps,
+  AnalyticsPageType,
+} from './AnalyticsPage';
+
+export type { TrackEvent as Event, AnalyticsHandlerFn } from './AnalyticsTracker';
+
+export type { AnalyticsProps } from './externalTypes';
diff --git a/src/analytics/index.tsx b/src/analytics/index.tsx
deleted file mode 100644
index 712dc9702..000000000
--- a/src/analytics/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-/* eslint-disable no-shadow */
-import React from 'react';
-
-export type AnalyticsTag = string;
-
-export type AnalyticsPageType = 'page' | 'modal' | 'tab';
-
-export interface AnalyticsPage {
-  tag: AnalyticsTag;
-  type: AnalyticsPageType;
-}
-
-export interface AnalyticsContextValue {
-  pages: AnalyticsPage[];
-  tracker: AnalyticsTracker;
-  merchantId: number;
-  ip: string;
-}
-
-/**
- * Props present on various components which aid in the tracking of analytics events.
- */
-export interface AnalyticsProps {
-  /** Unique identifier of the component within the logical page hierarchy. */
-  tag?: AnalyticsTag;
-
-  /** Posiition of the component within a table-like component. */
-  position?: {
-    /** Unique ID of the row (usually what you would use as a key in react). */
-    id: string;
-
-    /** Row index. */
-    row?: number;
-
-    /** Column index or name. */
-    column?: number | string;
-  };
-}
-
-export enum AnalyticsEvents {
-  CLICK = 'click',
-  DROPDOWN_CHANGE = 'dropdown_change',
-  SWITCH_ON = 'switch_on',
-  SWITCH_OFF = 'switch_off',
-  DROPDOWN_SELECT = 'dropdown_select',
-  CHECKBOX_ON = 'checkbox_on',
-  CHECKBOX_OFF = 'checkbox_off',
-  RADIOBUTTON_SELECT = 'radiobutton_select',
-  DATEPICKER_CHANGE = 'datepicker_date_change',
-  DAYPICKER_CHANGE = 'daypicker_date_change',
-  KEYBOARD_EVENT = 'keyboard_event',
-  FOCUS_OUT = 'focus_out',
-}
-
-export enum AnalyticsComponentType {
-  BUTTON = 'button',
-  DROPDOWN = 'dropdown',
-  SWITCH = 'switch',
-  PAGINATION = 'pagination',
-  ICON = 'icon',
-  LINK = 'link',
-  CHECKBOX = 'checkbox',
-  DATEPICKER = 'datepicker',
-  DAYPICKER = 'daypicker',
-  DATEPICKER_PRESET = 'datepicker_preset',
-  TAB = 'tab',
-  ACCORDION = 'accordion',
-  MODAL = 'modal',
-  INPUT = 'input',
-  TEXTAREA = 'textarea',
-  TAB_NAVIGATION = 'tab_navigation',
-  RADIO = 'radio',
-}
-
-export interface Event {
-  event: AnalyticsEvents;
-  type: AnalyticsComponentType;
-  tag: AnalyticsTag;
-  pages: AnalyticsPage[];
-}
-
-export type AnalyticsHandlerFn = (event: Event) => void;
-
-/** Receives tracking events and dispatches them to handlers. */
-export class AnalyticsTracker {
-  handlers: AnalyticsHandlerFn[] = [];
-
-  registerHandler = (fn: AnalyticsHandlerFn) => {
-    this.handlers.push(fn);
-  };
-
-  deregisterHandler = (fn: AnalyticsHandlerFn) => {
-    // TODO
-  };
-
-  track = (event: {
-    event: AnalyticsEvents;
-    type: AnalyticsComponentType;
-    tag: AnalyticsTag;
-    pages: AnalyticsPage[];
-    merchantId: number;
-    ip: string;
-  }) => {
-    this.handlers.forEach((handler) => handler(event));
-  };
-}
-
-export const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue = {
-  pages: [],
-  tracker: new AnalyticsTracker(),
-  merchantId: 0,
-  ip: '',
-};
-/** React context you can use to access the current tracker and page hierarchy. */
-export const AnalyticsContext = React.createContext(ROOT_ANALYTICS_CONTEXT);
-
-export type AnalyticsPageProps = {
-  /** Tag of this page. */
-  tag: AnalyticsTag;
-
-  /** Type of this page. */
-  type: AnalyticsPageType;
-
-  /** Children in the page. */
-  children?: React.ReactNode;
-
-  /** merchant id */
-  merchantId?: number;
-
-  /** user ip address */
-  ip?: string;
-};
-
-export type AnalyticsComponentProps = {
-  children: (context: AnalyticsContextValue) => React.ReactNode;
-};
-
-/** A component to wrap other components with to gain access to the AnalyticsContextValue. */
-export const AnalyticsComponent = ({ children }: AnalyticsComponentProps) => (
-  <AnalyticsContext.Consumer>{children}</AnalyticsContext.Consumer>
-);
-
-/** Registers a subpage in the analytics component hierarchy. */
-export const AnalyticsPage = ({
-  tag,
-  type,
-  children,
-  merchantId: mid,
-  ip: ipAddress,
-}: AnalyticsPageProps) => (
-  <AnalyticsContext.Consumer>
-    {({ pages, tracker, merchantId, ip }) => (
-      <AnalyticsContext.Provider
-        value={{
-          pages: [...pages, { tag, type }],
-          tracker,
-          merchantId: mid || merchantId,
-          ip: ipAddress || ip,
-        }}
-      >
-        {children}
-      </AnalyticsContext.Provider>
-    )}
-  </AnalyticsContext.Consumer>
-);
diff --git a/src/analytics/useAnalytics.ts b/src/analytics/useAnalytics.ts
new file mode 100644
index 000000000..a65f6a3c8
--- /dev/null
+++ b/src/analytics/useAnalytics.ts
@@ -0,0 +1,32 @@
+import { useContext, useCallback, useMemo } from 'react';
+import { TrackEvent } from './AnalyticsTracker';
+import { AnalyticsContext } from './AnalyticsPage';
+
+type TrackParams = Pick<TrackEvent, 'event' | 'type' | 'tag'> &
+  Partial<Pick<TrackEvent, 'pages' | 'merchantId' | 'ip'>>;
+
+const useAnalytics = () => {
+  const { pages, tracker, merchantId, ip } = useContext(AnalyticsContext);
+
+  const track = useCallback(
+    ({ event, type, tag, ...optional }: TrackParams) => {
+      if (!tag) {
+        return;
+      }
+
+      tracker.track({ event, type, tag, pages, merchantId, ip, ...optional });
+    },
+    [pages, tracker, merchantId, ip]
+  );
+
+  const trackCallback = useCallback(
+    (trackParams: TrackParams) => () => {
+      track(trackParams);
+    },
+    []
+  );
+
+  return useMemo(() => ({ track, trackCallback }), [track, trackCallback]);
+};
+
+export default useAnalytics;
diff --git a/src/index.ts b/src/index.ts
index e92ad1ba9..38e6fd877 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -61,4 +61,5 @@ export {
   AnalyticsTracker,
   AnalyticsComponent,
   ROOT_ANALYTICS_CONTEXT,
+  useAnalytics,
 } from './analytics';

From 97e100180c7c6a72739d15deb5dfdec7d162d734 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 24 Mar 2022 20:36:39 +0100
Subject: [PATCH 149/157] add displayFormat for single day picker

---
 index.d.ts                             | 1 +
 src/components/DayPicker/DayPicker.tsx | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index 5a20c74e3..664a38a80 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -440,6 +440,7 @@ export interface DayPickerProps extends AnalyticsProps{
   placeholder?: string;
   onClose?: () => any;
   disablePastDays?: boolean;
+  displayFormat?: string;
 }
 
 export declare const DayPicker: FunctionComponent<DayPickerProps>;
diff --git a/src/components/DayPicker/DayPicker.tsx b/src/components/DayPicker/DayPicker.tsx
index 26ad1d7b8..e52b17c91 100644
--- a/src/components/DayPicker/DayPicker.tsx
+++ b/src/components/DayPicker/DayPicker.tsx
@@ -42,6 +42,7 @@ type Props = {
   placeholder?: string;
   onClose?: () => any;
   disablePastDays?: boolean;
+  displayFormat?: string;
 } & AnalyticsProps;
 
 const DayPicker = ({
@@ -56,6 +57,7 @@ const DayPicker = ({
   placeholder,
   onClose,
   disablePastDays = false,
+  displayFormat = 'DD/MM/YYYY',
   tag = '',
 }: Props) => {
   const handleDisablePastDays = (days: any) => !isInclusivelyAfterDay(days, moment());
@@ -96,6 +98,7 @@ const DayPicker = ({
           }}
         >
           <SingleDatePicker
+            displayFormat={displayFormat}
             id={id}
             isOutsideRange={disablePastDays ? handleDisablePastDays : isOutsideRange}
             onDateChange={(dateChanged: Moment | null) => {

From c77da08664ca09dbee32eb296cd71c4aba7f2b67 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Mon, 4 Apr 2022 02:54:26 +0200
Subject: [PATCH 150/157] update changelog and version

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3334b2e0..d7c789864 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.25] - 04.04.2022
+
+## Added
+
+- Add `displayFormat` prop for DayPicker component
+
 # [2.5.24] - 09.03.2022
 
 ## Added
diff --git a/package.json b/package.json
index 91457386f..1d9841f12 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.24",
+  "version": "2.5.25",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 43d9d10b1daf3766244d3069ccbcf79925d87d15 Mon Sep 17 00:00:00 2001
From: Viktor Kochovski <viktor.kochovski@inplayer.com>
Date: Wed, 20 Jul 2022 15:42:13 +0200
Subject: [PATCH 151/157] Added table part for showing x-y of total items

---
 index.d.ts                             | 72 +++++++++++---------
 src/components/Table/Table.tsx         | 11 +++
 src/components/Table/styled.ts         |  6 ++
 src/components/Table/table.stories.mdx | 93 +++++++++++++-------------
 4 files changed, 102 insertions(+), 80 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 664a38a80..ea0f684cb 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -122,10 +122,10 @@ export interface Event {
 
 export type AnalyticsHandlerFn = (event: Record<string, any>) => void;
 
-export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>
+export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>;
 
-export declare const AnalyticsComponent: FunctionComponent<AnalyticsComponentProps>
-export interface ContainerProps extends AnalyticsProps{
+export declare const AnalyticsComponent: FunctionComponent<AnalyticsComponentProps>;
+export interface ContainerProps extends AnalyticsProps {
   className?: string;
   columns?: number | string;
   gap?: string;
@@ -140,14 +140,15 @@ export interface ContainerProps extends AnalyticsProps{
   alignContent?: string;
 }
 
-declare type TrackParams = Pick<Event, 'event' | 'type' | 'tag'> & Partial<Pick<Event, 'pages' | 'merchantId' | 'ip'>>;
+declare type TrackParams = Pick<Event, 'event' | 'type' | 'tag'> &
+  Partial<Pick<Event, 'pages' | 'merchantId' | 'ip'>>;
 
 export declare const useAnalytics: () => {
   track: (trackParams: TrackParams) => void;
   trackCallback: (trackParams: TrackParams) => () => void;
 };
 
-export interface CellProps extends AnalyticsProps{
+export interface CellProps extends AnalyticsProps {
   className?: string;
   width?: number;
   height?: number;
@@ -165,7 +166,7 @@ interface IGrid {
 
 export declare const Grid: IGrid;
 
-export interface CheckboxProps extends AnalyticsProps{
+export interface CheckboxProps extends AnalyticsProps {
   label: string;
   id: string;
   name?: string;
@@ -187,7 +188,7 @@ export interface MenuItem {
   smallSize?: boolean;
 }
 
-export interface ModalProps extends AnalyticsProps{
+export interface ModalProps extends AnalyticsProps {
   isModalOpen: boolean;
   closeModal: () => any;
   children: ReactNode;
@@ -200,7 +201,7 @@ export declare const Modal: FunctionComponent<ModalProps>;
 
 export type NoteType = 'informative' | 'success' | 'warning' | 'danger';
 
-export interface NoteProps extends AnalyticsProps{
+export interface NoteProps extends AnalyticsProps {
   title: string;
   text: string;
   type: NoteType;
@@ -208,7 +209,7 @@ export interface NoteProps extends AnalyticsProps{
 
 export declare const Note: FunctionComponent<NoteProps>;
 
-export interface RadioProps extends AnalyticsProps{
+export interface RadioProps extends AnalyticsProps {
   label: string;
   id: string;
   name?: string;
@@ -279,7 +280,7 @@ interface TableButtonProps extends AnalyticsProps {
   type: string;
 }
 
-export interface TableProps<TableData extends TableRowData = TableRowData> extends AnalyticsProps{
+export interface TableProps<TableData extends TableRowData = TableRowData> extends AnalyticsProps {
   columns: Array<TableColumn<TableData>>;
   data: Array<TableData>;
   showLoader?: boolean;
@@ -290,6 +291,8 @@ export interface TableProps<TableData extends TableRowData = TableRowData> exten
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
   editableById?: string;
+  hasItemEntries?: boolean;
+  totalItems?: number;
 }
 
 interface TableState {
@@ -310,7 +313,7 @@ export declare class Table<TableData extends TableRowData> extends Component<
   renderColumns: (data: Array<TableColumn<TableData>>) => ReactNodeArray;
   renderRows: (data: Array<TableData>) => ReactNodeArray;
 }
-interface NavigationTab extends AnalyticsProps{
+interface NavigationTab extends AnalyticsProps {
   title: string;
 }
 
@@ -320,7 +323,10 @@ export interface TabContentProps {
   iconModifiers?: Array<string>;
 }
 
-export interface TabNavigationProps<T> extends DivHTMLAttributes<HTMLDivElement>, TabContentProps, AnalyticsProps {
+export interface TabNavigationProps<T>
+  extends DivHTMLAttributes<HTMLDivElement>,
+    TabContentProps,
+    AnalyticsProps {
   tabs: Array<NavigationTab>;
   onTabClick: (index: number) => any;
   selectedTabIndex: number;
@@ -334,7 +340,7 @@ interface TabInfo {
   name: string;
 }
 
-interface TabsProps extends AnalyticsProps{
+interface TabsProps extends AnalyticsProps {
   tabs: Array<TabInfo>;
   selectedTabIndex: number;
   onTabClick: (index: number) => void;
@@ -348,7 +354,7 @@ export interface ActionButtonRenderProps {
   closeAccordion: (e?: SyntheticEvent<*>) => void;
 }
 
-export interface AccordionPanel extends AnalyticsProps{
+export interface AccordionPanel extends AnalyticsProps {
   label: string;
   icon?: ReactNode;
   iconTooltip?: TooltipProps;
@@ -397,7 +403,8 @@ export type ButtonModifier =
 
 export interface ButtonProps<T>
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-  ButtonContentProps, AnalyticsProps {
+    ButtonContentProps,
+    AnalyticsProps {
   buttonModifiers?: Array<ButtonModifier>;
   size?: ButtonSize;
   style?: CSSProperties;
@@ -409,7 +416,7 @@ export interface ButtonProps<T>
 
 export declare class Button<T = {}> extends Component<T & ButtonProps<T>> {}
 
-export interface CardProps extends AnalyticsProps{
+export interface CardProps extends AnalyticsProps {
   title?: string;
   titleVariant?: string;
   className?: string;
@@ -427,7 +434,7 @@ export type DayPicker$OnDateChange = (values: DayPicker$OnDateChange$Arguments)
 
 export type DayPicker$OnFocusChange = (focusedInput: boolean) => any;
 
-export interface DayPickerProps extends AnalyticsProps{
+export interface DayPickerProps extends AnalyticsProps {
   isOutsideRange?: (day: number) => any;
   onDateChange: (date: Moment) => any;
   onFocusChange: (focused: any) => any;
@@ -504,12 +511,12 @@ export declare class DatePicker extends Component<DatePickerProps, DatePickerSta
   renderDatePresets: () => ReactNode;
 }
 
-export interface Option extends AnalyticsProps{
+export interface Option extends AnalyticsProps {
   value: string;
   displayName: string;
 }
 
-export interface DefaultOption extends AnalyticsProps{
+export interface DefaultOption extends AnalyticsProps {
   displayName: string;
   disabled?: boolean;
 }
@@ -534,7 +541,7 @@ export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement>, Ana
 
 export declare const Dropdown: FunctionComponent<DropdownProps>;
 
-export interface DrawerProps extends AnalyticsProps{
+export interface DrawerProps extends AnalyticsProps {
   handleClose: () => void;
   isOpen: boolean;
   width?: string;
@@ -542,21 +549,20 @@ export interface DrawerProps extends AnalyticsProps{
 
 export declare const Drawer: FunctionComponent<DrawerProps>;
 
-
 export type LabelModifier =
   | 'fontSizeExtraSmall'
   | 'fontSizeSmall'
   | 'fontSizeMedium'
   | 'fontSizeLarge';
 
-export interface LabelProps extends AnalyticsProps{
+export interface LabelProps extends AnalyticsProps {
   disabled?: boolean;
   modifiers?: Array<LabelModifier>;
 }
 
 export declare const Label: StyledComponent<'label', Theme, LabelProps>;
 
-export interface LoaderProps extends AnalyticsProps{
+export interface LoaderProps extends AnalyticsProps {
   height?: number;
   width?: number;
   color?: string;
@@ -568,7 +574,7 @@ export declare const Loader: StyledComponent<'div', Theme, LoaderProps>;
 
 export type NotificationVariant = 'success' | 'danger' | 'warning';
 
-interface NotificationProps extends AnalyticsProps{
+interface NotificationProps extends AnalyticsProps {
   title: string;
   content: string;
   variant?: NotificationVariant;
@@ -586,7 +592,7 @@ interface INotification extends FunctionComponent<NotificationProps> {
 
 export declare const Notification: INotification;
 
-export interface PaginationProps extends AnalyticsProps{
+export interface PaginationProps extends AnalyticsProps {
   onPageChange: (pageNumber: number) => any;
   totalItems: number;
   startPage?: number;
@@ -600,7 +606,7 @@ export type PillLabelModifier = 'primary' | 'info' | 'success' | 'danger' | 'war
 
 export type PillLabelSize = 'xs' | 'sm' | 'md' | 'lg';
 
-interface PillLabelProps extends AnalyticsProps{
+interface PillLabelProps extends AnalyticsProps {
   modifiers?: Array<PillLabelModifier>;
   size?: PillLabelSize;
 }
@@ -609,7 +615,7 @@ export declare const PillLabel: StyledComponent<'span', Theme, PillLabelProps>;
 
 export type ProgressType = 'circle' | 'line';
 
-export interface ProgressProps extends AnalyticsProps{
+export interface ProgressProps extends AnalyticsProps {
   type?: ProgressType;
   strokeWidth?: number;
   strokeColor?: string;
@@ -626,7 +632,7 @@ export interface ProgressProps extends AnalyticsProps{
 
 export declare const Progress: FunctionComponent<ProgressProps>;
 
-export interface SwitchProps extends AnalyticsProps{
+export interface SwitchProps extends AnalyticsProps {
   checked: boolean;
   disabled?: boolean;
   id: string;
@@ -666,7 +672,7 @@ export interface TypographyProps {
 
 export declare const Typography: FunctionComponent<TypographyProps>;
 
-export interface Theme extends AnalyticsProps{
+export interface Theme extends AnalyticsProps {
   palette: {
     primary: {
       main: string;
@@ -768,7 +774,7 @@ interface IColors {
   emerald: '#2ecc71';
   peterRiver: '#3498db';
   amethyst: '#9b59b6';
-  asphalt: '#282c35',
+  asphalt: '#282c35';
   wetAsphalt: '#34495e';
   greenSea: '#16a085';
   nephritis: '#27ae60';
@@ -795,7 +801,7 @@ export type FadeEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-o
 
 export type TooltipBehavior = 'hover' | 'click' | 'ref';
 
-export interface TooltipProps extends AnalyticsProps{
+export interface TooltipProps extends AnalyticsProps {
   behavior?: TooltipBehavior;
   durationOnClick?: number;
   arrowWidth?: number;
@@ -830,13 +836,13 @@ export declare class Tooltip extends Component<TooltipProps, TooltipState> {
 
 type TransitionVariant = 'fadeInLeft' | 'fadeInRight' | 'fadeOutLeft' | 'fadeOutRight';
 
-export interface Step extends AnalyticsProps{
+export interface Step extends AnalyticsProps {
   isDisabled: boolean;
   isCompleted: boolean;
   component: ReactNode;
 }
 
-interface StepWizardProps extends AnalyticsProps{
+interface StepWizardProps extends AnalyticsProps {
   steps: Array<Step>;
   activeStep: number;
   className?: string;
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index ce2b48328..38e7a73d4 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -32,6 +32,7 @@ import {
   StyledIcon,
   StyledForm,
   FormWrapper,
+  ItemEntriesTypography,
 } from './styled';
 
 interface Data {
@@ -110,6 +111,8 @@ type Props<T = Data> = {
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
   editableId?: string;
+  hasItemEntries?: boolean;
+  totalItems?: number;
 } & AnalyticsProps;
 
 type State = {
@@ -140,6 +143,7 @@ class Table<T> extends Component<Props<T>, State> {
     renderEmptyTable: false,
     tableButton: [],
     actionsRowTitle: 'Actions',
+    hasItemEntries: false,
   };
 
   state: State = {
@@ -403,6 +407,8 @@ class Table<T> extends Component<Props<T>, State> {
       showLoader,
       renderEmptyTable,
       tableButton,
+      hasItemEntries,
+      totalItems,
       options: { headerSection },
     } = this.props;
 
@@ -448,6 +454,11 @@ class Table<T> extends Component<Props<T>, State> {
             </ButtonTableRow>
           ))}
         </tfoot>
+        {hasItemEntries && (
+          <ItemEntriesTypography>
+            Showing 1 - {totalItems} of {totalItems} items
+          </ItemEntriesTypography>
+        )}
       </TableWrapper>
     );
   };
diff --git a/src/components/Table/styled.ts b/src/components/Table/styled.ts
index ac0bc2455..f50ebc7cc 100644
--- a/src/components/Table/styled.ts
+++ b/src/components/Table/styled.ts
@@ -153,6 +153,11 @@ export const StyledReactIcon = styled(IoIosCheckmark)<StyledReactIconProps>`
   cursor: pointer;
 `;
 
+const ItemEntriesTypography = styled.p`
+  color: #475467;
+  padding: 12px 32px;
+`;
+
 export {
   TableWithHeaderSectionContainer,
   TableWrapper,
@@ -166,4 +171,5 @@ export {
   TableButton,
   StyledForm,
   FormWrapper,
+  ItemEntriesTypography,
 };
diff --git a/src/components/Table/table.stories.mdx b/src/components/Table/table.stories.mdx
index fb51375a4..602c87673 100644
--- a/src/components/Table/table.stories.mdx
+++ b/src/components/Table/table.stories.mdx
@@ -1,60 +1,59 @@
 import { useState } from 'react';
-import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
-import Table from './'
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import Table from './';
 import { MdDelete, MdErrorOutline } from 'react-icons/md';
-import Pagination from '../Pagination'
-import { columns, data } from './data.tsx'
+import Pagination from '../Pagination';
+import { columns, data } from './data.tsx';
 import { IoIosAddCircleOutline } from 'react-icons/io';
 
-<Meta title="Table" component={<Table/>} />
-
+<Meta title="Table" component={<Table />} />
 
 ```jsx
 import { Table } from '@inplayer-org/inplayer-ui';
-const Page = () => (
-  <Table />
-)
+const Page = () => <Table />;
 ```
 
 <Preview withSource="open">
   <Story name="default">
     <>
-    <Table
-            columns={columns}
-            data={data}
-            options={{
-                rowSelection: {
-                    active: true,
-                    action: (data) => console.log(data),
-                },
-                rowActions: [
-                    { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => (<p>render</p>)},
-                      { icon: "cog", onClick: (id) => console.log(id), render: () => <p>render</p>},
-                      { icon: "trash", onClick: (id) => console.log(id) },
-                ],
-            }}
-            tableButton={[
-              {
-                label: 'Table button 1',
-                icon: <IoIosAddCircleOutline />,
-                onClick: () => null,
-                type: 'button',
-              },
-              {
-                label: 'Table button 2',
-                icon: <IoIosAddCircleOutline />,
-                onClick: () => null,
-                type: 'button',
-              }
-            ]}
-        />
-        <Pagination
-            onPageChange={console.log}
-            totalItems={50}
-            startPage={4}
-            numberOfPagesDisplayed={10}
-            itemsPerPage={12}
-        />
-      </>
+      <Table
+        columns={columns}
+        data={data}
+        options={{
+          rowSelection: {
+            active: true,
+            action: (data) => console.log(data),
+          },
+          rowActions: [
+            { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => <p>render</p> },
+            { icon: 'cog', onClick: (id) => console.log(id), render: () => <p>render</p> },
+            { icon: 'trash', onClick: (id) => console.log(id) },
+          ],
+        }}
+        tableButton={[
+          {
+            label: 'Table button 1',
+            icon: <IoIosAddCircleOutline />,
+            onClick: () => null,
+            type: 'button',
+          },
+          {
+            label: 'Table button 2',
+            icon: <IoIosAddCircleOutline />,
+            onClick: () => null,
+            type: 'button',
+          },
+        ]}
+        hasItemEntries
+        totalItems={10}
+      />
+      <Pagination
+        onPageChange={console.log}
+        totalItems={50}
+        startPage={4}
+        numberOfPagesDisplayed={10}
+        itemsPerPage={12}
+      />
+    </>
   </Story>
-</Preview>
\ No newline at end of file
+</Preview>

From ff1a7b07e1c2541f3aac0813249fb2fc1e29a7c7 Mon Sep 17 00:00:00 2001
From: Viktor Kochovski <viktor.kochovski@inplayer.com>
Date: Thu, 21 Jul 2022 15:24:54 +0200
Subject: [PATCH 152/157] Updated version in package json and changelog

---
 CHANGELOG.md | 8 +++++++-
 package.json | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7c789864..0654df5d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.26] - 21.07.2022
+
+## Added
+
+- Add `hasItemEntries` prop for Table component
+
 # [2.5.25] - 04.04.2022
 
 ## Added
@@ -132,7 +138,7 @@ All notable changes to this project will be documented in this file.
 
 ### Change
 
-- Changes connected with logo re-branding 
+- Changes connected with logo re-branding
 
 # [2.5.6] - 09-04-2021
 
diff --git a/package.json b/package.json
index 1d9841f12..f89fbadba 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.25",
+  "version": "2.5.26",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 9fc6b102682c3c3b3e4b3bdb5b090dee99c28b58 Mon Sep 17 00:00:00 2001
From: Viktor Kochovski <viktor.kochovski@inplayer.com>
Date: Wed, 3 Aug 2022 08:31:32 +0200
Subject: [PATCH 153/157] Changed font color from fixed value to a value from
 the theme

---
 src/paywall-previews/Preview1/styled.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index ba16a8c02..03fc134ae 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -3,7 +3,6 @@ import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
 import { FaLock } from 'react-icons/fa';
 import colors from '../../theme/colors';
-import { RestrictedAssetContainer } from '../shared/PreviewComponents';
 
 export const InPlayerPreviewBox = styled.div`
   background: ${({ theme }) => theme.palette.background.main};
@@ -195,7 +194,7 @@ export const InplayerFooter = styled.div`
 
   a {
     text-decoration: none;
-    color: #aaa;
+    color: ${({ theme }) => theme.palette.text.light};
     font-size: 14px;
     line-height: 18px;
   }

From f49e3fd7f15fd5749909881bba8f7e1434ae2f87 Mon Sep 17 00:00:00 2001
From: Viktor Kochovski <viktor.kochovski@inplayer.com>
Date: Thu, 4 Aug 2022 15:27:28 +0200
Subject: [PATCH 154/157] Updating version and changelog

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0654df5d7..960ef1c4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.27] - 04.08.2022
+
+## Added
+
+- Changed the color of the text in the footer for Previews from fixed value to a value from the theme colors
+
 # [2.5.26] - 21.07.2022
 
 ## Added
diff --git a/package.json b/package.json
index f89fbadba..3336a4ed7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.26",
+  "version": "2.5.27",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 3af4bb81052370c92b98091d1c66c71ffe117a3e Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 29 Sep 2022 13:13:26 +0200
Subject: [PATCH 155/157] Add disabled for dropdown options

---
 index.d.ts                           | 1 +
 src/components/Dropdown/Dropdown.tsx | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index ea0f684cb..d9ddbd48b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -514,6 +514,7 @@ export declare class DatePicker extends Component<DatePickerProps, DatePickerSta
 export interface Option extends AnalyticsProps {
   value: string;
   displayName: string;
+  disabled?: boolean;
 }
 
 export interface DefaultOption extends AnalyticsProps {
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index cd4cbfd86..0f73ce9b2 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -11,6 +11,7 @@ import {
 export type Option = {
   value: string;
   displayName: string;
+  disabled?: boolean;
 } & AnalyticsProps;
 
 type DefaultOption = {
@@ -87,8 +88,8 @@ const Dropdown: React.FC<Props> = ({
               {defaultOption.displayName}
             </option>
           )}
-          {options.map(({ value, displayName }) => (
-            <option value={value} key={value}>
+          {options.map(({ value, displayName, disabled = false }) => (
+            <option disabled={disabled} value={value} key={value}>
               {displayName}
             </option>
           ))}

From a487ded094b5efb5d12187c83a68420657603ba4 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 29 Sep 2022 13:15:02 +0200
Subject: [PATCH 156/157] update changelog and version

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0654df5d7..e32985b71 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.27] - 29.09.2022
+
+## Added
+
+- Add `disabled` for Dropdown options
+
 # [2.5.26] - 21.07.2022
 
 ## Added
diff --git a/package.json b/package.json
index f89fbadba..3336a4ed7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.26",
+  "version": "2.5.27",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",

From 434f465d90ff3e6e99fbf4817a044152ff934fa1 Mon Sep 17 00:00:00 2001
From: mustran <musli.ademi@inplayer.com>
Date: Thu, 29 Sep 2022 16:10:53 +0200
Subject: [PATCH 157/157] change ui version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3336a4ed7..f58632c83 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.27",
+  "version": "2.5.28",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",