@griddo/ax 10.4.27 → 10.4.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.4.27",
+  "version": "10.4.29",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -232,5 +232,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6185dbf170ba4bbe1a1d63873b06e6fd9624fd75"
+  "gitHead": "8aed7094dba5aa9e183f5babadbc5590267cfb0b"
 }

package/src/components/Icon/components/CodeBody.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const SvgCodeBody = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      fillRule="evenodd"
+      d="M7.5 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5.5 19v-1a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-12a1 1 0 0 0-1 1v3a1 1 0 0 1-2 0V5c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7.5 3h14c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 21.5 21h-14Zm-4.6-7.825L4.375 11.7c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.712-.3-.275 0-.513.1-.713.3L.775 12.475c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325L2.95 16.05c.2.2.438.3.712.3.276 0 .513-.1.713-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L2.9 13.175Zm7.35 0L8.775 14.65c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3l2.175-2.175c.1-.1.17-.208.213-.325.041-.117.062-.242.062-.375s-.02-.258-.063-.375a.877.877 0 0 0-.212-.325L10.2 10.3a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7l1.475 1.475Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgCodeBody;

package/src/components/Icon/components/CodeHead.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const SvgCodeHead = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      fillRule="evenodd"
+      d="M2.9 5.175 4.375 3.7c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.712-.3-.275 0-.513.1-.713.3L.775 4.475c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325L2.95 8.05c.2.2.438.3.712.3.276 0 .513-.1.713-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L2.9 5.175Zm7.35 0L8.775 6.65c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3l2.175-2.175c.1-.1.17-.208.213-.325.041-.117.062-.242.062-.375s-.02-.258-.063-.375a.878.878 0 0 0-.212-.325L10.2 2.3a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7l1.475 1.475ZM5.5 11a1 1 0 1 1 2 0v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-6a1 1 0 1 1 0-2h7c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 21.5 22h-14c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5.5 20v-9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgCodeHead;

package/src/components/Icon/components/CodeHeadBody.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const SvgCodeHeadBody = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      fillRule="evenodd"
+      d="M2.9 4.175 4.375 2.7c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.712-.3-.275 0-.513.1-.713.3L.775 3.475c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325L2.95 7.05c.2.2.438.3.712.3.276 0 .513-.1.713-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L2.9 4.175Zm7.35 0L8.775 5.65c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3l2.175-2.175c.1-.1.17-.208.213-.325.041-.117.062-.242.062-.375s-.02-.258-.063-.375a.878.878 0 0 0-.212-.325L10.2 1.3a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7l1.475 1.475ZM6.5 8a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1Zm7-4a1 1 0 0 0 1 1h6a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-12a1 1 0 0 1-1-1 1 1 0 1 0-2 0v1c0 .55.196 1.02.588 1.413.391.391.862.587 1.412.587h14c.55 0 1.02-.196 1.413-.587.391-.392.587-.863.587-1.413V5c0-.55-.196-1.02-.587-1.413A1.926 1.926 0 0 0 21.5 3h-7a1 1 0 0 0-1 1Zm-9.125 8.7L2.9 14.175l1.475 1.475c.2.2.3.433.3.7 0 .267-.1.5-.3.7-.2.2-.438.3-.712.3a.973.973 0 0 1-.713-.3L.775 14.875a.877.877 0 0 1-.213-.325 1.107 1.107 0 0 1-.062-.375c0-.133.02-.258.063-.375a.877.877 0 0 1 .212-.325L2.95 11.3c.2-.2.438-.3.712-.3.276 0 .513.1.713.3.2.2.3.433.3.7 0 .267-.1.5-.3.7Zm4.4 2.95 1.475-1.475L8.775 12.7a.96.96 0 0 1-.3-.7c0-.267.1-.5.3-.7a.999.999 0 0 1 1.425 0l2.175 2.175c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325L10.2 17.05c-.2.2-.438.3-.712.3a.973.973 0 0 1-.713-.3.96.96 0 0 1-.3-.7c0-.267.1-.5.3-.7Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgCodeHeadBody;

package/src/components/Icon/svgs/code-body.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 21C6.95 21 6.47917 20.8042 6.0875 20.4125C5.69583 20.0208 5.5 19.55 5.5 19V18C5.5 17.4477 5.94772 17 6.5 17C7.05228 17 7.5 17.4477 7.5 18C7.5 18.5523 7.94772 19 8.5 19H20.5C21.0523 19 21.5 18.5523 21.5 18V6C21.5 5.44772 21.0523 5 20.5 5H8.5C7.94772 5 7.5 5.44772 7.5 6V9C7.5 9.55228 7.05228 10 6.5 10C5.94772 10 5.5 9.55228 5.5 9V5C5.5 4.45 5.69583 3.97917 6.0875 3.5875C6.47917 3.19583 6.95 3 7.5 3H21.5C22.05 3 22.5208 3.19583 22.9125 3.5875C23.3042 3.97917 23.5 4.45 23.5 5V19C23.5 19.55 23.3042 20.0208 22.9125 20.4125C22.5208 20.8042 22.05 21 21.5 21H7.5ZM2.9 13.175L4.375 11.7C4.575 11.5 4.675 11.2667 4.675 11C4.675 10.7333 4.575 10.5 4.375 10.3C4.175 10.1 3.9375 10 3.6625 10C3.3875 10 3.15 10.1 2.95 10.3L0.775 12.475C0.675 12.575 0.604167 12.6833 0.5625 12.8C0.520833 12.9167 0.5 13.0417 0.5 13.175C0.5 13.3083 0.520833 13.4333 0.5625 13.55C0.604167 13.6667 0.675 13.775 0.775 13.875L2.95 16.05C3.15 16.25 3.3875 16.35 3.6625 16.35C3.9375 16.35 4.175 16.25 4.375 16.05C4.575 15.85 4.675 15.6167 4.675 15.35C4.675 15.0833 4.575 14.85 4.375 14.65L2.9 13.175ZM10.25 13.175L8.775 14.65C8.575 14.85 8.475 15.0833 8.475 15.35C8.475 15.6167 8.575 15.85 8.775 16.05C8.975 16.25 9.2125 16.35 9.4875 16.35C9.7625 16.35 10 16.25 10.2 16.05L12.375 13.875C12.475 13.775 12.5458 13.6667 12.5875 13.55C12.6292 13.4333 12.65 13.3083 12.65 13.175C12.65 13.0417 12.6292 12.9167 12.5875 12.8C12.5458 12.6833 12.475 12.575 12.375 12.475L10.2 10.3C10.1 10.2 9.9875 10.125 9.8625 10.075C9.7375 10.025 9.6125 10 9.4875 10C9.3625 10 9.2375 10.025 9.1125 10.075C8.9875 10.125 8.875 10.2 8.775 10.3C8.575 10.5 8.475 10.7333 8.475 11C8.475 11.2667 8.575 11.5 8.775 11.7L10.25 13.175Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/code-head-body.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9 4.175L4.375 2.7C4.575 2.5 4.675 2.26667 4.675 2C4.675 1.73333 4.575 1.5 4.375 1.3C4.175 1.1 3.9375 1 3.6625 1C3.3875 1 3.15 1.1 2.95 1.3L0.775 3.475C0.675 3.575 0.604167 3.68333 0.5625 3.8C0.520833 3.91667 0.5 4.04167 0.5 4.175C0.5 4.30833 0.520833 4.43333 0.5625 4.55C0.604167 4.66667 0.675 4.775 0.775 4.875L2.95 7.05C3.15 7.25 3.3875 7.35 3.6625 7.35C3.9375 7.35 4.175 7.25 4.375 7.05C4.575 6.85 4.675 6.61667 4.675 6.35C4.675 6.08333 4.575 5.85 4.375 5.65L2.9 4.175ZM10.25 4.175L8.775 5.65C8.575 5.85 8.475 6.08333 8.475 6.35C8.475 6.61667 8.575 6.85 8.775 7.05C8.975 7.25 9.2125 7.35 9.4875 7.35C9.7625 7.35 10 7.25 10.2 7.05L12.375 4.875C12.475 4.775 12.5458 4.66667 12.5875 4.55C12.6292 4.43333 12.65 4.30833 12.65 4.175C12.65 4.04167 12.6292 3.91667 12.5875 3.8C12.5458 3.68333 12.475 3.575 12.375 3.475L10.2 1.3C10.1 1.2 9.9875 1.125 9.8625 1.075C9.7375 1.025 9.6125 1 9.4875 1C9.3625 1 9.2375 1.025 9.1125 1.075C8.9875 1.125 8.875 1.2 8.775 1.3C8.575 1.5 8.475 1.73333 8.475 2C8.475 2.26667 8.575 2.5 8.775 2.7L10.25 4.175ZM6.5 8C5.94772 8 5.5 8.44772 5.5 9V10C5.5 10.5523 5.94772 11 6.5 11C7.05228 11 7.5 10.5523 7.5 10V9C7.5 8.44772 7.05228 8 6.5 8ZM13.5 4C13.5 4.55228 13.9477 5 14.5 5H20.5C21.0523 5 21.5 5.44772 21.5 6V18C21.5 18.5523 21.0523 19 20.5 19H8.5C7.94772 19 7.5 18.5523 7.5 18C7.5 17.4477 7.05228 17 6.5 17C5.94772 17 5.5 17.4477 5.5 18V19C5.5 19.55 5.69583 20.0208 6.0875 20.4125C6.47917 20.8042 6.95 21 7.5 21H21.5C22.05 21 22.5208 20.8042 22.9125 20.4125C23.3042 20.0208 23.5 19.55 23.5 19V5C23.5 4.45 23.3042 3.97917 22.9125 3.5875C22.5208 3.19583 22.05 3 21.5 3H14.5C13.9477 3 13.5 3.44772 13.5 4ZM4.375 12.7L2.9 14.175L4.375 15.65C4.575 15.85 4.675 16.0833 4.675 16.35C4.675 16.6167 4.575 16.85 4.375 17.05C4.175 17.25 3.9375 17.35 3.6625 17.35C3.3875 17.35 3.15 17.25 2.95 17.05L0.775 14.875C0.675 14.775 0.604167 14.6667 0.5625 14.55C0.520833 14.4333 0.5 14.3083 0.5 14.175C0.5 14.0417 0.520833 13.9167 0.5625 13.8C0.604167 13.6833 0.675 13.575 0.775 13.475L2.95 11.3C3.15 11.1 3.3875 11 3.6625 11C3.9375 11 4.175 11.1 4.375 11.3C4.575 11.5 4.675 11.7333 4.675 12C4.675 12.2667 4.575 12.5 4.375 12.7ZM8.775 15.65L10.25 14.175L8.775 12.7C8.575 12.5 8.475 12.2667 8.475 12C8.475 11.7333 8.575 11.5 8.775 11.3C8.875 11.2 8.9875 11.125 9.1125 11.075C9.2375 11.025 9.3625 11 9.4875 11C9.6125 11 9.7375 11.025 9.8625 11.075C9.9875 11.125 10.1 11.2 10.2 11.3L12.375 13.475C12.475 13.575 12.5458 13.6833 12.5875 13.8C12.6292 13.9167 12.65 14.0417 12.65 14.175C12.65 14.3083 12.6292 14.4333 12.5875 14.55C12.5458 14.6667 12.475 14.775 12.375 14.875L10.2 17.05C10 17.25 9.7625 17.35 9.4875 17.35C9.2125 17.35 8.975 17.25 8.775 17.05C8.575 16.85 8.475 16.6167 8.475 16.35C8.475 16.0833 8.575 15.85 8.775 15.65Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/code-head.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9 5.175L4.375 3.7C4.575 3.5 4.675 3.26667 4.675 3C4.675 2.73333 4.575 2.5 4.375 2.3C4.175 2.1 3.9375 2 3.6625 2C3.3875 2 3.15 2.1 2.95 2.3L0.775 4.475C0.675 4.575 0.604167 4.68333 0.5625 4.8C0.520833 4.91667 0.5 5.04167 0.5 5.175C0.5 5.30833 0.520833 5.43333 0.5625 5.55C0.604167 5.66667 0.675 5.775 0.775 5.875L2.95 8.05C3.15 8.25 3.3875 8.35 3.6625 8.35C3.9375 8.35 4.175 8.25 4.375 8.05C4.575 7.85 4.675 7.61667 4.675 7.35C4.675 7.08333 4.575 6.85 4.375 6.65L2.9 5.175ZM10.25 5.175L8.775 6.65C8.575 6.85 8.475 7.08333 8.475 7.35C8.475 7.61667 8.575 7.85 8.775 8.05C8.975 8.25 9.2125 8.35 9.4875 8.35C9.7625 8.35 10 8.25 10.2 8.05L12.375 5.875C12.475 5.775 12.5458 5.66667 12.5875 5.55C12.6292 5.43333 12.65 5.30833 12.65 5.175C12.65 5.04167 12.6292 4.91667 12.5875 4.8C12.5458 4.68333 12.475 4.575 12.375 4.475L10.2 2.3C10.1 2.2 9.9875 2.125 9.8625 2.075C9.7375 2.025 9.6125 2 9.4875 2C9.3625 2 9.2375 2.025 9.1125 2.075C8.9875 2.125 8.875 2.2 8.775 2.3C8.575 2.5 8.475 2.73333 8.475 3C8.475 3.26667 8.575 3.5 8.775 3.7L10.25 5.175ZM5.5 11C5.5 10.4477 5.94772 10 6.5 10C7.05228 10 7.5 10.4477 7.5 11V19C7.5 19.5523 7.94772 20 8.5 20H20.5C21.0523 20 21.5 19.5523 21.5 19V7C21.5 6.44772 21.0523 6 20.5 6H14.5C13.9477 6 13.5 5.55228 13.5 5C13.5 4.44772 13.9477 4 14.5 4H21.5C22.05 4 22.5208 4.19583 22.9125 4.5875C23.3042 4.97917 23.5 5.45 23.5 6V20C23.5 20.55 23.3042 21.0208 22.9125 21.4125C22.5208 21.8042 22.05 22 21.5 22H7.5C6.95 22 6.47917 21.8042 6.0875 21.4125C5.69583 21.0208 5.5 20.55 5.5 20V11Z" fill="#5057FF"/>
+</svg>

package/src/components/TableFilters/StateFilter/style.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
 const State = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
-  width: 170px;
+  width: 85px;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};
   }

package/src/modules/Settings/Integrations/BulkHeader/TableHeader/index.tsx

@@ -31,6 +31,29 @@ const TableHeader = (props: IProps): JSX.Element => {
     },
   ];
 
+  const filtersCode = [
+    {
+      name: "all",
+      value: "all",
+      title: "ALL",
+    },
+    {
+      name: "head",
+      value: "head",
+      title: "Head",
+    },
+    {
+      name: "body",
+      value: "body",
+      title: "Body",
+    },
+    {
+      name: "headBody",
+      value: "headBody",
+      title: "Head&Body",
+    },
+  ];
+
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -58,7 +81,21 @@ const TableHeader = (props: IProps): JSX.Element => {
           filters={filters}
         />
       </S.AppliedOnHeader>
-      <StateFilter filterItems={filterItems} value={filterValues.filterState} />
+      <S.CodeHeader>
+        <CheckGroupFilter
+          filterItems={filterItems}
+          value={filterValues.filterCode}
+          pointer="filterCode"
+          label="Code"
+          description="Filter by code"
+          initialState={["all"]}
+          selectAllOption="all"
+          filters={filtersCode}
+        />
+      </S.CodeHeader>
+      <S.StateHeader>
+        <StateFilter filterItems={filterItems} value={filterValues.filterState} />
+      </S.StateHeader>
       <S.ActionsHeader>
         <TableCounter totalItems={totalItems} />
       </S.ActionsHeader>

package/src/modules/Settings/Integrations/BulkHeader/TableHeader/style.tsx

@@ -15,7 +15,7 @@ const CheckHeader = styled(Header)`
 `;
 
 const NameHeader = styled(Header)`
-  width: 350px;
+  flex: 0 0 350px;
 `;
 
 const DescriptionHeader = styled(Header)`
@@ -23,13 +23,33 @@ const DescriptionHeader = styled(Header)`
 `;
 
 const AppliedOnHeader = styled(Header)`
-  flex: 1;
+  flex: 0 0 200px;
+`;
+
+const StateHeader = styled(Header)`
+  flex: 0 0 100px;
+  padding: 0;
+  justify-content: center;
+`;
+
+const CodeHeader = styled(Header)`
+  flex: 0 0 130px;
+  justify-content: center;
 `;
 
 const ActionsHeader = styled(Header)`
-  width: 125px;
+  flex: 0 0 85px;
   padding-right: 0;
   justify-content: flex-end;
 `;
 
-export { TableHeader, CheckHeader, NameHeader, DescriptionHeader, AppliedOnHeader, ActionsHeader };
+export {
+  TableHeader,
+  CheckHeader,
+  NameHeader,
+  DescriptionHeader,
+  AppliedOnHeader,
+  ActionsHeader,
+  CodeHeader,
+  StateHeader,
+};

package/src/modules/Settings/Integrations/IntegrationForm/index.tsx

@@ -35,6 +35,8 @@ const IntegrationForm = (props: IProps) => {
         active: true,
         variables: [],
         scriptOrder: 0,
+        type: "addon",
+        editable: true,
       };
 
   const [form, setForm] = useState<IIntegration>(initState);

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { connect } from "react-redux";
 import { DraggableProvided } from "react-beautiful-dnd";
+import { Link } from "react-router-dom";
 
 import { useModal, usePermission, useToast } from "@ax/hooks";
 import { ICheck, IIntegration } from "@ax/types";
-import { CheckField, Icon, Modal, Toast, ToggleField } from "@ax/components";
+import { CheckField, Icon, Modal, Toast, ToggleField, Tooltip } from "@ax/components";
 import { integrations } from "@ax/api";
 import { integrationsActions } from "@ax/containers/Integrations";
 import { appActions } from "@ax/containers/App";
@@ -119,11 +120,71 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 
   const handleClick = () => {
     const { setCurrentIntegration, setHistoryPush } = props;
-    setCurrentIntegration(integration);
-    setHistoryPush("addons/edit");
+    if (integration.editable) {
+      setCurrentIntegration(integration);
+      setHistoryPush("addons/edit");
+    }
+  };
+
+  const isToggleDisabled =
+    (integration.active && !isAllowedToDeactivateIntegrations) ||
+    (!integration.active && !isAllowedToActivateIntegrations);
+
+  const getIntegrationDescription = () => {
+    switch (integration.type) {
+      case "analytics":
+        return (
+          <div>
+            This row is dedicated to reordering GTM with other add-ons. For any changes, please visit the{" "}
+            <Link to="/sites/settings/analytics">Analytics section</Link>
+          </div>
+        );
+      case "datalayer":
+        return (
+          <div>
+            This row is dedicated to reordering Datalayer with other add-ons. For any changes, please visit the{" "}
+            <Link to="/sites/settings/analytics">Analytics section</Link>
+          </div>
+        );
+      default:
+        return integration.description;
+    }
+  };
+
+  const getIntegrationTag = () => {
+    const { contentBody, contentHead } = integration;
+
+    let tagProps = null;
+
+    if (contentHead && contentBody && contentBody.trim() !== "" && contentHead.trim() !== "") {
+      tagProps = { text: "Head&Body", color: "#DFCAFA", icon: "CodeHeadBody" };
+    } else if (contentBody && contentBody.trim() !== "") {
+      tagProps = { text: "Body", color: "#DAFE9F", icon: "CodeBody" };
+    } else if (contentHead && contentHead.trim() !== "") {
+      tagProps = { text: "Head", color: "#BEEEFD", icon: "CodeHead" };
+    }
+
+    if (tagProps) {
+      return (
+        <S.Tag color={tagProps.color}>
+          <S.IconTag>
+            <Icon name={tagProps.icon} size="16" />
+          </S.IconTag>
+          <div>{tagProps.text}</div>
+        </S.Tag>
+      );
+    }
   };
 
-  const isToggleDisabled = (integration.active && !isAllowedToDeactivateIntegrations) || (!integration.active && !isAllowedToActivateIntegrations);
+  const checkBox = (
+    <CheckField
+      name="check"
+      value={integration.id ?? ""}
+      checked={isSelected}
+      onChange={handleOnChange}
+      disabled={!integration.editable}
+    />
+  );
 
   return (
     <>
@@ -132,6 +193,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
         selected={isSelected}
         ref={innerRef}
         data-testid="integration-item-row"
+        disabled={!integration.editable}
         {...provided?.draggableProps}
       >
         <S.HandleWrapper {...provided?.dragHandleProps} hidden={listLength < 2} data-testid="handle-wrapper">
@@ -140,24 +202,45 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
           </S.IconHandleWrapper>
         </S.HandleWrapper>
         <S.CheckCell role="cell" hasHandle={listLength >= 2}>
-          <CheckField name="check" value={integration.id ?? ""} checked={isSelected} onChange={handleOnChange} />
+          {!integration.editable ? (
+            <Tooltip content="This cannot be selected. You can only reorder it" left={60}>
+              {checkBox}
+            </Tooltip>
+          ) : (
+            <>{checkBox}</>
+          )}
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={handleClick}  clickable={isAllowedToManageIntegrations} >
+        <S.NameCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
           <S.Order>#{integration.correlativeScriptOrder}</S.Order>
           <div>{integration.name}</div>
         </S.NameCell>
-        <S.DescriptionCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations} >
-          {integration.description}
+        <S.DescriptionCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
+          {getIntegrationDescription()}
         </S.DescriptionCell>
-        <S.AppliedOnCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations} >
-          Applied on: <S.ContentPresence>{getContentPresence(integration.contentPresence)}</S.ContentPresence>
-        </S.AppliedOnCell>
-        <S.StateCell role="cell">
-          <ToggleField name="state" value={integration.active} onChange={toggleModalChangeState} disabled={isToggleDisabled} />
-        </S.StateCell>
-        <S.ActionsCell role="cell">
-          <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
-        </S.ActionsCell>
+        {integration.type === "addon" && (
+          <>
+            <S.AppliedOnCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
+              <div>
+                Applied on: <S.ContentPresence>{getContentPresence(integration.contentPresence)}</S.ContentPresence>
+              </div>
+            </S.AppliedOnCell>
+            <S.CodeCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
+              {getIntegrationTag()}
+            </S.CodeCell>
+            <S.StateCell role="cell">
+              <ToggleField
+                name="state"
+                value={integration.active}
+                onChange={toggleModalChangeState}
+                disabled={isToggleDisabled}
+                size="s"
+              />
+            </S.StateCell>
+            <S.ActionsCell role="cell">
+              <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
+            </S.ActionsCell>
+          </>
+        )}
       </S.ItemRow>
       <Modal
         isOpen={isOpenDelete}

package/src/modules/Settings/Integrations/IntegrationItem/style.tsx

@@ -5,7 +5,8 @@ import { ActionMenu } from "@ax/components";
 
 const CheckCell = styled(Cell)<{ hasHandle: boolean }>`
   width: 24px;
-  padding: ${(p) => p.hasHandle ? `${p.theme.spacing.s} ${p.theme.spacing.xs}`: `0 ${p.theme.spacing.s} 0 ${p.theme.spacing.m}`};
+  padding: ${(p) =>
+    p.hasHandle ? `${p.theme.spacing.s} ${p.theme.spacing.xs}` : `0 ${p.theme.spacing.s} 0 ${p.theme.spacing.m}`};
   label {
     margin-bottom: 18px;
   }
@@ -15,7 +16,7 @@ const NameCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiM};
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  width: 350px;
+  flex: 0 0 350px;
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: center;
@@ -31,15 +32,23 @@ const DescriptionCell = styled(Cell)<{ clickable: boolean }>`
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   flex: 1;
+  a {
+    color: ${(p) => p.theme.color.interactive01};
+    font-weight: 600;
+  }
 `;
 
 const AppliedOnCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textMediumEmphasis};
-  flex: 1;
-  display: inline;
-  align-self: center;
+  flex: 0 0 200px;
+`;
+
+const CodeCell = styled(Cell)<{ clickable: boolean }>`
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
+  flex: 0 0 130px;
+  align-items: center;
 `;
 
 const ContentPresence = styled.span`
@@ -48,11 +57,12 @@ const ContentPresence = styled.span`
 `;
 
 const StateCell = styled(Cell)`
-  width: 170px;
+  flex: 0 0 100px;
+  align-items: center;
 `;
 
 const ActionsCell = styled(Cell)`
-  width: 125px;
+  flex: 0 0 85px;
 `;
 
 const ModalContent = styled.div`
@@ -70,7 +80,8 @@ const StyledActionMenu = styled(ActionMenu)`
   margin-left: auto;
 `;
 
-const ItemRow = styled(Row)`
+const ItemRow = styled(Row)<{ disabled: boolean }>`
+  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:hover {
     ${StyledActionMenu} {
       opacity: 1;
@@ -94,6 +105,29 @@ const IconHandleWrapper = styled.div`
   }
 `;
 
+const Tag = styled.div<{ color: string }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: flex;
+  background-color: ${(p) => p.color};
+  box-sizing: border-box;
+  border-radius: ${(p) => p.theme.radii.s};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  white-space: nowrap;
+  padding: 3px 8px;
+  text-transform: capitalize;
+`;
+
+const IconTag = styled.div`
+  height: ${(p) => p.theme.spacing.s};
+  width: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.xxs};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.textHighEmphasis};
+    }
+  }
+`;
+
 export {
   CheckCell,
   NameCell,
@@ -108,4 +142,7 @@ export {
   HandleWrapper,
   IconHandleWrapper,
   Order,
+  CodeCell,
+  Tag,
+  IconTag,
 };

package/src/modules/Settings/Integrations/hooks.tsx

@@ -19,13 +19,14 @@ const useFilterQuery = () => {
   const initialQueryValues: Record<string, IQueryValue[]> = {
     filterApplication: [{ value: "all", label: "All" }],
     filterState: [{ value: "all", label: "All" }],
+    filterCode: [{ value: "all", label: "All" }],
   };
 
   const [query, setQuery] = useState(initialQueryValues);
   const [currentFilterQuery, setCurrentFilterQuery] = useState("");
 
   const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
-    const { filterApplication, filterState } = filterValues;
+    const { filterApplication, filterState, filterCode } = filterValues;
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: IQueryValue[]): string => {
@@ -36,21 +37,23 @@ const useFilterQuery = () => {
       return !stringValues.length ? filterQuery : filterQuery.concat(`&${pointer}=${stringValues}`);
     };
 
-    const isNotInitialValue = (pointer: "filterApplication" | "filterState") => {
+    const isNotInitialValue = (pointer: "filterApplication" | "filterState" | "filterCode") => {
       return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
     };
 
     if (isNotInitialValue("filterApplication")) filterQuery = currentQuery("filterApplication", filterApplication);
     if (isNotInitialValue("filterState")) filterQuery = currentQuery("filterState", filterState);
+    if (isNotInitialValue("filterCode")) filterQuery = currentQuery("filterCode", filterCode);
 
     setCurrentFilterQuery(filterQuery);
   };
 
   const setFiltersSelection = (pointer: string, filter: IQueryValue[]) => {
-    const { filterApplication, filterState } = query;
+    const { filterApplication, filterState, filterCode } = query;
     const filterValues = {
       filterApplication: pointer === "filterApplication" ? filter : filterApplication,
       filterState: pointer === "filterState" ? filter : filterState,
+      filterCode: pointer === "filterCode" ? filter : filterCode,
     };
 
     setQuery(filterValues);
@@ -60,7 +63,7 @@ const useFilterQuery = () => {
   const resetFilterQuery = () => {
     setQuery(initialQueryValues);
     setCurrentFilterQuery("");
-  }
+  };
 
   const isFiltered = Object.keys(query).some((key: any) => query[key as never] !== initialQueryValues[key as never]);
 

package/src/modules/Settings/Integrations/index.tsx

@@ -65,7 +65,11 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
   const fetchState = { isLoading, isFiltered };
   const { isEmpty, emptyStateProps } = useEmptyState(integrations, fetchState, { noElementsProps });
 
-  const integrationsIds = integrations && integrations.map((integration: IIntegration) => integration.id);
+  const integrationsIds =
+    integrations &&
+    integrations
+      .filter((integration: IIntegration) => integration.editable)
+      .map((integration: IIntegration) => integration.id);
 
   const getParams = useCallback(() => {
     const params = {
@@ -239,6 +243,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
   const filterLabels: Record<string, string> = {
     filterApplication: "Applied on",
     filterState: "State",
+    filterCode: "Code",
   };
 
   return (

package/src/modules/Settings/SeoAnalyticsSettings/Analytics/atoms.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 import { Button } from "@ax/components";
 import { FieldsBehavior } from "@ax/components";
@@ -7,15 +8,20 @@ import { splitAndTrim, splitAndJoin } from "@ax/helpers";
 
 import * as S from "./style";
 
-
 const Warning = (props: IWarning): JSX.Element => {
   const { setShowWarning } = props;
 
-  const warningText = "Analytics has Global settings. If you need, you can change the Analytics ID for this site. If you have already defined a project for this site in GTM, you don't need to define it here. You cannot edit the Dimensions and Values here, only view them.";
+  const warningText = (
+    <div>
+      Analytics has <Link to="/settings/analytics">Global settings</Link>. If you need, you can change the Analytics ID
+      for this site. If you have already defined a project for this site in GTM, you don&apos;t need to define it here.
+      You cannot edit the Dimensions and Values here, only view them.
+    </div>
+  );
 
   const handleButtonClick = () => {
     setShowWarning(false);
-  }
+  };
 
   return (
     <>
@@ -42,8 +48,8 @@ const ScriptCode = (props: IScriptCode): JSX.Element => {
         placeholder="Type the Google Analytics or Google Tag Manager code."
       />
     </S.ScriptCodeWrapper>
-  )
-}
+  );
+};
 
 const Dimensions = (props: IDimensions): JSX.Element => {
   const { dimensions } = props;
@@ -51,7 +57,8 @@ const Dimensions = (props: IDimensions): JSX.Element => {
   const heading = "Data Layer configuration";
   const description = (
     <>
-      You cannot edit the Dimensions and Values here, only view them. To edit them, you have to go to <strong>Global Settings</strong>.
+      You cannot edit the Dimensions and Values here, only view them. To edit them, you have to go to{" "}
+      <Link to="/settings/analytics">Global Settings</Link>.
     </>
   );
 
@@ -64,25 +71,28 @@ const Dimensions = (props: IDimensions): JSX.Element => {
         <S.ComponentName>{name}</S.ComponentName>
         <S.ComponentValues>{hasValues ? getValues() : "The value is defined on page"}</S.ComponentValues>
       </S.Component>
-    )
-  }
-
-  return <>
-    <S.Heading>{heading}</S.Heading>
-    <S.Description>{description}</S.Description>
-    <S.ComponentsWrapper itemsSize={1 / 2}>
-      {dimensions.map((dimension, idx) => (
-        <Dimension key={idx} {...dimension} />
-      ))}
-    </S.ComponentsWrapper>
-  </>
-}
+    );
+  };
+
+  return (
+    <>
+      <S.Heading>{heading}</S.Heading>
+      <S.Description>{description}</S.Description>
+      <S.ComponentsWrapper itemsSize={1 / 2}>
+        {dimensions.map((dimension, idx) => (
+          <Dimension key={idx} {...dimension} />
+        ))}
+      </S.ComponentsWrapper>
+    </>
+  );
+};
 
 const Groups = (props: IGroups): JSX.Element => {
   const { groups } = props;
 
   const heading = "Dimensions group by content";
-  const description = "In global, you can create groups with the dimensions to measure on a page based on its content. You can not edit them here. Only view them.";
+  const description =
+    "In global, you can create groups with the dimensions to measure on a page based on its content. You can not edit them here. Only view them.";
 
   const Group = (props: IDimensionsGroup) => {
     const { name, dimensions, templates } = props;
@@ -98,19 +108,21 @@ const Groups = (props: IGroups): JSX.Element => {
         </div>
         <S.ContentType>Content type: {contentTypeText}</S.ContentType>
       </S.Component>
-    )
-  }
-
-  return <>
-    <S.Heading>{heading}</S.Heading>
-    <S.Description>{description}</S.Description>
-    <S.ComponentsWrapper itemsSize={1 / 3}>
-      {groups.map((group, idx) => (
-        <Group key={idx} {...group} />
-      ))}
-    </S.ComponentsWrapper>
-  </>
-}
+    );
+  };
+
+  return (
+    <>
+      <S.Heading>{heading}</S.Heading>
+      <S.Description>{description}</S.Description>
+      <S.ComponentsWrapper itemsSize={1 / 3}>
+        {groups.map((group, idx) => (
+          <Group key={idx} {...group} />
+        ))}
+      </S.ComponentsWrapper>
+    </>
+  );
+};
 
 interface IWarning {
   setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;

package/src/modules/Settings/SeoAnalyticsSettings/Analytics/style.tsx

@@ -7,7 +7,7 @@ const Wrapper = styled.div`
 
 const Heading = styled.div`
   ${(p) => p.theme.textStyle.headingXS};
-  color: ${p => p.theme.color.textHighEmphasis};
+  color: ${(p) => p.theme.color.textHighEmphasis};
   padding-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
@@ -16,14 +16,15 @@ const Description = styled.div`
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.s};
 
-  strong {
+  a {
     color: ${(p) => p.theme.color.interactive01};
+    font-weight: 600;
   }
 `;
 
 const WarningHeading = styled.div`
   ${(p) => p.theme.textStyle.headingXXS};
-  color: ${p => p.theme.color.textMediumEmphasis};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
   padding-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
@@ -32,6 +33,10 @@ const WarningText = styled.div`
   color: ${(p) => p.theme.color.textHighEmphasis};
   width: calc(${(p) => p.theme.spacing.l} * 12);
   margin-bottom: ${(p) => p.theme.spacing.m};
+  a {
+    color: ${(p) => p.theme.color.interactive01};
+    font-weight: 600;
+  }
 `;
 
 const ContentWrapper = styled.div`
@@ -53,7 +58,7 @@ const ScriptCodeWrapper = styled.div`
 const ComponentsWrapper = styled.div<{ itemsSize: number }>`
   display: grid;
   grid-template-columns: repeat(2, calc(100% * ${(p) => p.itemsSize}));
-  grid-gap: ${p => p.theme.spacing.xs} ${p => p.theme.spacing.xs};
+  grid-gap: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.xs};
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   margin-bottom: ${(p) => p.theme.spacing.m};
   padding-bottom: ${(p) => p.theme.spacing.m};
@@ -73,26 +78,26 @@ const Component = styled.div`
 
 const ComponentName = styled.div`
   ${(p) => p.theme.textStyle.headingXXS};
-  color: ${p => p.theme.color.textLowEmphasis};
+  color: ${(p) => p.theme.color.textLowEmphasis};
   text-transform: uppercase;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   word-break: break-all;
-`
+`;
 
 const ComponentValues = styled.div`
   ${(p) => p.theme.textStyle.fieldContent};
-  color: ${p => p.theme.color.textHighEmphasis};
+  color: ${(p) => p.theme.color.textHighEmphasis};
   padding-top: ${(p) => p.theme.spacing.xxs};
   padding-bottom: ${(p) => p.theme.spacing.xxs};
-`
+`;
 
 const ContentType = styled.div`
   ${(p) => p.theme.textStyle.uiS};
-  color: ${p => p.theme.color.textMediumEmphasis};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-top: ${(p) => p.theme.spacing.xxs};
 
   span {
-    color: ${p => p.theme.color.interactive01};
+    color: ${(p) => p.theme.color.interactive01};
   }
 `;
 
@@ -110,4 +115,4 @@ export {
   ComponentValues,
   AnalyticsWrapper,
   ContentType,
-}
+};

package/src/types/index.tsx

@@ -867,6 +867,8 @@ export interface IIntegration {
   variables: undefined | IIntegrationVariable[];
   scriptOrder: number;
   correlativeScriptOrder?: number;
+  type: "analytics" | "datalayer" | "addon";
+  editable: boolean;
 }
 
 export interface IIntegrationVariable {