@griddo/ax 11.1.16 → 11.1.17-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.1.16",
+  "version": "11.1.17-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "46a62886326c447820b5198ecc2da2c3d6246bb8"
+  "gitHead": "298fc1428705d2d43c148e6f05298001ced495c1"
 }

package/src/api/sites.tsx

@@ -109,6 +109,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/site/", "/pages/global/imports/bulk"],
     method: "DELETE",
   },
+  GET_SELECT_SITES: {
+    ...template,
+    endpoint: "/select/sites",
+    method: "GET",
+  },
 };
 
 const getAllSites = async (params: IGetSitesParams = { recentSitesNumber: 7 }) => {
@@ -361,8 +366,11 @@ const unpublishSite = (siteID: number) => {
   SERVICES.UNPUBLISH_SITE.dynamicUrl = `${host}${prefix}${siteID}${suffix}`;
   return sendRequest(SERVICES.UNPUBLISH_SITE);
 };
+
 const unpublishSiteBulk = (ids: number[]) => sendRequest(SERVICES.UNPUBLISH_SITE_BULK, { sites: ids });
 
+const getSelectSites = () => sendRequest(SERVICES.GET_SELECT_SITES);
+
 export default {
   getAllSites,
   getSiteInfo,
@@ -384,4 +392,5 @@ export default {
   removePage,
   removePageBulk,
   removeUsersBulk,
+  getSelectSites,
 };

package/src/api/structuredData.tsx

@@ -120,6 +120,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     method: "POST",
     responseType: "blob",
   },
+  GET_AI_SEARCH_DATA: {
+    ...template,
+    endpoint: "/ai/search/content-types",
+    method: "GET",
+  },
 };
 
 const getData = (token: string | null, siteID?: number | null): Promise<AxiosResponse> => {
@@ -347,6 +352,8 @@ const exportDataContent = (
   return sendRequest(SERVICES.EXPORT_DATA_CONTENT, { ...data });
 };
 
+const getAISearchData = (): Promise<AxiosResponse> => sendRequest(SERVICES.GET_AI_SEARCH_DATA);
+
 export default {
   getData,
   getDataContent,
@@ -371,4 +378,5 @@ export default {
   orderCategory,
   getGroup,
   exportDataContent,
+  getAISearchData,
 };

package/src/components/Fields/AIReferenceField/AIConfigPanel/index.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from "react";
+import { Button, FieldsBehavior, Icon } from "@ax/components";
+import { sites, structuredData } from "@ax/api";
+import { isReqOk } from "@ax/helpers";
+import { IState } from "..";
+
+import * as S from "./style";
+
+const AIConfigPanel = (props: IAIConfigPanelProps): JSX.Element => {
+  const { value, onChange, lang, site, whiteList } = props;
+
+  const initialState: IState = {
+    prompt: "",
+    templates: [],
+    sites: site ? [site] : [],
+    language: lang,
+    limit: 0,
+  };
+
+  const formValues = value ? value : initialState;
+
+  const [form, setForm] = useState(formValues);
+  const [data, setData] = useState({ sites: [], templates: [] });
+
+  useEffect(() => {
+    const getItems = async () => {
+      try {
+        const items = { sites: [], templates: [] };
+        const resultSites = await sites.getSelectSites();
+        if (resultSites && isReqOk(resultSites.status)) {
+          const sites = resultSites.data.map((opt: { value: number; label: string }) => {
+            return { value: opt.value, name: opt.value, title: opt.label };
+          });
+          items.sites = sites;
+        }
+        const resultData = await structuredData.getAISearchData();
+        if (resultData && isReqOk(resultData.status)) {
+          const templates = resultData.data
+            .filter((opt: { id: string; name: string }) => (whiteList ? whiteList.includes(opt.id) : true))
+            .map((opt: { id: string; name: string }) => {
+              return { value: opt.id, name: opt.id, title: opt.name };
+            });
+          items.templates = templates;
+        }
+        setData(items);
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    let isMounted = true;
+    if (isMounted) {
+      getItems();
+    }
+    return () => {
+      isMounted = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleApply = () => onChange(form);
+  const handleClear = () => setForm({ ...initialState, sites: [] });
+
+  const handleSourceSelect = (templates: string[]) => setForm((state) => ({ ...state, templates }));
+
+  const handleSiteSelect = (sites: number[]) => setForm((state) => ({ ...state, sites }));
+
+  const handleLimit = (limit: number) => setForm((state) => ({ ...state, limit }));
+
+  const handlePrompt = (prompt: string) => setForm((state) => ({ ...state, prompt }));
+
+  const sitesPlaceholder = form.sites.length
+    ? `Selected ${form.sites.length} Site${form.sites.length > 1 ? "s" : ""}`
+    : "Select Sites";
+
+  const templatesPlaceholder = form.templates.length
+    ? `Selected ${form.templates.length} Content Type${form.templates.length > 1 ? "s" : ""}`
+    : "Select Content Type";
+
+  return (
+    <S.Wrapper>
+      <S.FormWrapper>
+        <S.Note>
+          <S.Title>
+            <S.IconWrapper>
+              <Icon name="Ia" size="16" />
+            </S.IconWrapper>
+            <div>AI distributor</div>
+          </S.Title>
+          <S.Text>
+            Configure the <strong>AI distributor</strong> to tailor content suggestions based on user data. Use these
+            settings to refine the type of content displayed and ensure a relevant user experience.
+          </S.Text>
+        </S.Note>
+        <FieldsBehavior
+          title="Data Source"
+          fieldType="MultiCheckSelect"
+          options={data.templates}
+          value={form.templates}
+          onChange={handleSourceSelect}
+          placeholder={templatesPlaceholder}
+          helptext="Select one or multiple content types to include in the search."
+          mandatory={true}
+          floating
+        />
+        <FieldsBehavior
+          title="Site Scope"
+          fieldType="MultiCheckSelect"
+          options={data.sites}
+          value={form.sites}
+          onChange={handleSiteSelect}
+          placeholder={sitesPlaceholder}
+          helptext="Specify the site for the search. By default, the search is limited to the current site."
+          mandatory={true}
+          floating
+        />
+        <FieldsBehavior
+          fieldType="TextArea"
+          title="Custom AI Prompt"
+          value={form.prompt}
+          onChange={handlePrompt}
+          placeholder="Example: Prioritising online programmes"
+          helptext="Specify the type of content you want to display. The AI will use this as guidance, but results may vary."
+        />
+        <FieldsBehavior
+          fieldType="NumberField"
+          title="Number of results"
+          value={form.limit}
+          onChange={handleLimit}
+          helptext="Set the number of results to display. Keep it concise to improve user experience."
+          mandatory={true}
+        />
+      </S.FormWrapper>
+      <S.ActionsWrapper>
+        <Button type="button" buttonStyle="line" onClick={handleClear}>
+          Clear Data
+        </Button>
+        <Button type="button" onClick={handleApply}>
+          Save Data
+        </Button>
+      </S.ActionsWrapper>
+    </S.Wrapper>
+  );
+};
+
+interface IAIConfigPanelProps {
+  value?: IState | null;
+  lang: number;
+  site?: number;
+  whiteList?: string[];
+  onChange: (value: IState) => void;
+}
+
+export default AIConfigPanel;

package/src/components/Fields/AIReferenceField/AIConfigPanel/style.tsx

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  height: 100%;
+  padding-bottom: ${(p) => `calc(${p.theme.spacing.l} + ${p.theme.spacing.s})`};
+`;
+
+const FormWrapper = styled.div`
+  position: relative;
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+  overflow: auto;
+`;
+
+const Note = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-top: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  align-items: center;
+`;
+
+const IconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.xxs};
+`;
+
+const ActionsWrapper = styled.div`
+  display: flex;
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${(p) => p.theme.spacing.s};
+  button {
+    flex-shrink: 0;
+  }
+`;
+
+export { Wrapper, FormWrapper, Note, Title, Text, IconWrapper, ActionsWrapper };

package/src/components/Fields/AIReferenceField/index.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { FloatingPanel, Icon } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import { ISchemaField, ISite } from "@ax/types";
+import AIConfigPanel from "./AIConfigPanel";
+
+import * as S from "./style";
+
+const AIReferenceField = (props: IProps): JSX.Element => {
+  const { value, onChange, disabled, lang, site, field } = props;
+
+  const { isOpen, toggleModal } = useModal();
+
+  const handleChange = (newValue: IState) => {
+    onChange(newValue);
+    toggleModal();
+  };
+
+  const IconStatus = (props: { type: "success" | "warning" | "close" }) => {
+    return (
+      <S.IconWrapper color={props.type}>
+        <Icon name={props.type} size="16" />
+      </S.IconWrapper>
+    );
+  };
+
+  return (
+    <S.Wrapper>
+      <S.Label>AI Distributor</S.Label>
+      <S.Content>
+        <S.Text>
+          Configure the <strong>AI distributor</strong> to tailor content suggestions based on user data. Refine and
+          ensure a relevant user experience. Only <strong>published</strong> &#40; <Icon name="active" size="16" />{" "}
+          &#41; data is displayed. &lsquo;Pending to publish&rsquo; &#40; <Icon name="uploadPending" size="16" /> &#41;
+          data won&apos;t appear until the publishing process is complete.
+        </S.Text>
+        {value && (
+          <S.StatusWrapper>
+            <S.Check>
+              <IconStatus type={value.templates.length > 0 ? "success" : "close"} />
+              <div>Selected Content Type</div>
+            </S.Check>
+            <S.Check>
+              <IconStatus type={value.sites.length > 0 ? "success" : "close"} />
+              <div>Selected Sites</div>
+            </S.Check>
+            <S.Check>
+              <IconStatus type={value.prompt.trim().length > 0 ? "success" : "warning"} />
+              <div>Custom AI Prompt</div>
+            </S.Check>
+            <S.Check>
+              <IconStatus type={value.limit > 0 ? "success" : "close"} />
+              <div>Number of Results</div>
+            </S.Check>
+          </S.StatusWrapper>
+        )}
+        <S.ButtonWrapper>
+          <S.StyledButton type="button" onClick={toggleModal} icon="Ia" disabled={disabled}>
+            {value ? "Edit settings AI distributor" : "Configure AI distributor"}
+          </S.StyledButton>
+        </S.ButtonWrapper>
+      </S.Content>
+      <FloatingPanel title="Configure AI Distributor" toggleModal={toggleModal} isOpen={isOpen}>
+        {isOpen && (
+          <AIConfigPanel
+            value={value}
+            onChange={handleChange}
+            lang={lang}
+            site={site?.id}
+            whiteList={field.whiteList}
+          />
+        )}
+      </FloatingPanel>
+    </S.Wrapper>
+  );
+};
+
+export interface IState {
+  prompt: string;
+  templates: string[];
+  sites: number[];
+  language: number;
+  limit: number;
+}
+
+interface IProps {
+  value?: IState | null;
+  onChange: (value: IState) => void;
+  disabled?: boolean;
+  lang: number;
+  site: ISite | null;
+  field: ISchemaField;
+}
+
+export default AIReferenceField;

package/src/components/Fields/AIReferenceField/style.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import styled from "styled-components";
+import { Button } from "@ax/components";
+
+const Wrapper = styled.div``;
+
+const Label = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+const Content = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-top: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  svg {
+    vertical-align: middle;
+    display: inline-block;
+  }
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: ${(p) => p.theme.spacing.s};
+`;
+
+const StyledButton = styled((props) => <Button {...props} />)`
+  width: 100%;
+  max-width: 264px;
+`;
+
+const StatusWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+const Check = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: ${(p) => p.theme.spacing.xxs};
+`;
+
+const IconWrapper = styled.div<{ color: "success" | "warning" | "close" }>`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.xs};
+  svg path {
+    fill: ${(p) =>
+      p.color === "close" ? p.theme.color.error : p.color === "warning" ? p.theme.color.warning : p.theme.color.online};
+  }
+`;
+
+export { Wrapper, Label, Content, Text, ButtonWrapper, StyledButton, StatusWrapper, Check, IconWrapper };

package/src/components/Fields/MultiCheckSelect/style.tsx

@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   position: relative;
   min-width: calc(${(p) => p.theme.spacing.xl} * 2);
   max-width: calc(${(p) => p.theme.spacing.xl} * 6);
-  z-index: 2;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
 const Field = styled.div<{ isOpen: boolean; disabled?: boolean }>`
@@ -17,11 +17,7 @@ const Field = styled.div<{ isOpen: boolean; disabled?: boolean }>`
   background-color: ${(p) => p.theme.color.interactiveBackground};
   border: 1px solid
     ${(p) =>
-      p.isOpen
-        ? p.theme.color.interactive01
-        : p.disabled
-        ? p.theme.color.interactiveDisabled
-        : p.theme.color.uiLine};
+      p.isOpen ? p.theme.color.interactive01 : p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.uiLine};
   border-radius: ${(p) => p.theme.radii.s};
   align-items: center;
   cursor: pointer;
@@ -50,7 +46,8 @@ const DropDown = styled.div<{ floating?: boolean; isOpen: boolean }>`
   background-color: ${(p) => p.theme.color.uiBarBackground};
   border: ${(p) => (p.isOpen ? `1px solid ${p.theme.color.uiLine}` : "none")};
   border-radius: ${(p) => p.theme.radii.s};
-  padding: ${(p) => p.isOpen ? `${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.s}` : 0};
+  padding: ${(p) =>
+    p.isOpen ? `${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.s}` : 0};
   width: 100%;
   z-index: 2;
   height: ${(p) => (p.isOpen ? "100%" : 0)};

package/src/components/Fields/index.tsx

@@ -1,3 +1,4 @@
+import AIReferenceField from "./AIReferenceField";
 import AnalyticsField from "./AnalyticsField";
 import ArrayFieldGroup from "./ArrayFieldGroup";
 import AsyncCheckGroup from "./AsyncCheckGroup";
@@ -43,6 +44,7 @@ import Wysiwyg from "./Wysiwyg";
 import IntegrationsField from "./IntegrationsField";
 
 export {
+  AIReferenceField,
   AnalyticsField,
   ArrayFieldGroup,
   AsyncCheckGroup,

package/src/components/index.tsx

@@ -1,4 +1,5 @@
 import {
+  AIReferenceField,
   ArrayFieldGroup,
   AsyncCheckGroup,
   AsyncSelect,
@@ -115,6 +116,7 @@ import Toast from "./Toast";
 
 export {
   //Fields
+  AIReferenceField,
   ArrayFieldGroup,
   AsyncCheckGroup,
   AsyncSelect,

package/src/modules/Analytics/DimensionPanel/index.tsx

@@ -74,9 +74,11 @@ const DimensionPanel = (props: IProps): JSX.Element => {
     },
   ];
 
-  const noteTitle = "Dimensions & Values";
+  const noteTitle = type === "dimensionsAndValues" ? "Dimensions & Values" : "Only Dimensions";
   const noteText =
-    "Create a dimension and its values. You define the values now and select them on any page later. Your analytics data will be homogeneous avoiding duplicates that might cause inaccurate data results.";
+    type === "dimensionsAndValues"
+      ? "Create a dimension and its values. You define the values now and select them on any page later. Your analytics data will be homogeneous avoiding duplicates that might cause inaccurate data results."
+      : "Create only a dimension. You will define its values on a page later, and will only affect that page. Only use it when you need custom data.";
 
   return (
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>