@griddo/ax 1.75.254 → 1.75.256

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.254",
+  "version": "1.75.256",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "95a6b9960eb7a11b8536e2c9a81575f2d22aaeea"
+  "gitHead": "5a8f1a970ca0b3eab2407b462004a3476c9f8abb"
 }

package/src/__tests__/components/Fields/SummaryButton/SummaryButton.test.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import SummaryButton, { ISummaryButtonProps } from "@ax/components/Fields/SummaryButton";
+
+afterEach(cleanup);
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const defaultProps = mock<ISummaryButtonProps>();
+
+describe("Summary Button component rendering", () => {
+  it("should render the component", () => {
+    const initialStore = {
+      app: { globalSettings: { autoSummary: true } },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SummaryButton {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const summaryButtonWrapper = screen.getByTestId("summary-button-wrapper");
+
+    expect(summaryButtonWrapper).toBeTruthy();
+  });
+
+  it("should not render the component", () => {
+    const initialStore = {
+      app: { globalSettings: { autoSummary: false } },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SummaryButton {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const summaryButtonWrapper = screen.queryByTestId("summary-button-wrapper");
+
+    expect(summaryButtonWrapper).toBeFalsy();
+  });
+});

package/src/__tests__/components/Fields/TagField/TagField.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TagField from "@ax/components/Fields/TagField";
+import TagsField from "@ax/components/Fields/TagsField";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
@@ -12,21 +12,21 @@ const props = {
   onChange: jest.fn(),
 };
 
-describe("TagField component", () => {
+describe("TagsField component", () => {
   test("should render the component", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...props} />
+        <TagsField {...props} />
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getAllByTestId("tag-field-wrapper");
-    expect(tagFieldWrapper).toBeTruthy();
-    expect(tagFieldWrapper).toHaveLength(1);
+    const tagsFieldWrapper = screen.getAllByTestId("tag-field-wrapper");
+    expect(tagsFieldWrapper).toBeTruthy();
+    expect(tagsFieldWrapper).toHaveLength(1);
 
-    const tagFieldInput = screen.getAllByTestId("tag-field-input");
-    expect(tagFieldInput).toBeTruthy();
-    expect(tagFieldInput).toHaveLength(1);
+    const tagsFieldInput = screen.getAllByTestId("tag-field-input");
+    expect(tagsFieldInput).toBeTruthy();
+    expect(tagsFieldInput).toHaveLength(1);
   });
 
   test("should render the tags if have values", () => {
@@ -37,17 +37,17 @@ describe("TagField component", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
-    expect(tagFieldWrapper).toBeTruthy();
+    const tagsFieldWrapper = screen.getByTestId("tag-field-wrapper");
+    expect(tagsFieldWrapper).toBeTruthy();
 
-    const tagFieldInput = screen.getByTestId("tag-field-input");
-    expect(tagFieldInput).toBeTruthy();
+    const tagsFieldInput = screen.getByTestId("tag-field-input");
+    expect(tagsFieldInput).toBeTruthy();
 
-    const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
+    const tagRendered = within(tagsFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
 
     const tagComponent = screen.getByTestId("tag-field-wrapper");
@@ -55,17 +55,17 @@ describe("TagField component", () => {
   });
 });
 
-describe("TagField events", () => {
+describe("TagsField events", () => {
   test("should call the value when call onchange", () => {
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...props} />
+        <TagsField {...props} />
       </ThemeProvider>
     );
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
+    const TagsFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
 
-    fireEvent.change(tagFieldInput, { target: { value: "test" } });
-    expect(tagFieldInput.value).toBe("test");
+    fireEvent.change(TagsFieldInput, { target: { value: "test" } });
+    expect(TagsFieldInput.value).toBe("test");
   });
 
   test("should add new value on keyDown if it's not in array", () => {
@@ -76,13 +76,13 @@ describe("TagField events", () => {
     };
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
-    fireEvent.input(tagFieldInput, { target: { value: "test" } });
-    fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
+    const tagsFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
+    fireEvent.input(tagsFieldInput, { target: { value: "test" } });
+    fireEvent.keyDown(tagsFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
     expect(onChange).toHaveBeenCalledWith(["test"]);
   });
   test("shouldn't add new value on keyDown if it's in array", () => {
@@ -93,13 +93,13 @@ describe("TagField events", () => {
     };
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
-    fireEvent.input(tagFieldInput, { target: { value: "test" } });
-    fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
+    const tagsFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
+    fireEvent.input(tagsFieldInput, { target: { value: "test" } });
+    fireEvent.keyDown(tagsFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
     expect(onChange).toBeCalledTimes(0);
   });
   test("should delete value from array", () => {
@@ -111,12 +111,12 @@ describe("TagField events", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...defaultProps} />
+        <TagsField {...defaultProps} />
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
-    const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
+    const tagsFieldWrapper = screen.getByTestId("tag-field-wrapper");
+    const tagRendered = within(tagsFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
     fireEvent.click(tagRendered[0], 0);
     expect(onChange).toBeCalledTimes(1);
@@ -126,11 +126,11 @@ describe("TagField events", () => {
     const useRefSpy = jest.spyOn(React, "useRef").mockReturnValueOnce({ current: { focus: jest.fn() } });
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <TagField {...props} />
+        <TagsField {...props} />
       </ThemeProvider>
     );
-    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
-    fireEvent.click(tagFieldWrapper);
+    const tagsFieldWrapper = screen.getByTestId("tag-field-wrapper");
+    fireEvent.click(tagsFieldWrapper);
     expect(useRefSpy).toBeCalledTimes(1);
   });
 });

package/src/__tests__/components/Fields/TranslateButton/TranslateButton.test.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import TranslateButton, { ITranslateButtonProps } from "@ax/components/Fields/TranslateButton";
+
+afterEach(cleanup);
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const defaultProps = mock<ITranslateButtonProps>();
+
+describe("Translate Button component rendering", () => {
+  it("should render the component", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslateButton {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
+    expect(translateButtonWrapper).toBeTruthy();
+    const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+    expect(translatedNotificationWrapper).toBeFalsy();
+  });
+
+  it("should not render the component if setting is off", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: false } },
+      pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslateButton {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
+    const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+    expect(translatedNotificationWrapper).toBeFalsy();
+    expect(translateButtonWrapper).toBeFalsy();
+  });
+
+  it("should not render the component if can't be translated", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: false },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslateButton {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
+    const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+    expect(translatedNotificationWrapper).toBeFalsy();
+    expect(translateButtonWrapper).toBeFalsy();
+  });
+
+  it("should render the notification if it's already translated", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: true },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslateButton {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
+    const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+    expect(translatedNotificationWrapper).toBeTruthy();
+    expect(translateButtonWrapper).toBeFalsy();
+  });
+
+  it("should render the component if it's already translated but can be translated", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: true },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslateButton {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
+    expect(translateButtonWrapper).toBeTruthy();
+    const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
+    expect(translatedNotificationWrapper).toBeFalsy();
+  });
+});

package/src/__tests__/components/Gallery/GalleryPanel/DetailPanel/DetailPanel.test.tsx

@@ -843,11 +843,11 @@ describe("Gallery component rendering", () => {
 
     expect(screen.getByDisplayValue("a description")).toBeInTheDocument();
 
-    const tagFieldInput = screen.getByTestId("tag-field-input");
-    expect(tagFieldInput).toBeTruthy();
-    fireEvent.change(tagFieldInput, { target: { value: "a tag" } });
+    const tagsFieldInput = screen.getByTestId("tag-field-input");
+    expect(tagsFieldInput).toBeTruthy();
+    fireEvent.change(tagsFieldInput, { target: { value: "a tag" } });
     expect(screen.getByDisplayValue("a tag")).toBeInTheDocument();
-    fireEvent.keyDown(tagFieldInput, { key: "Enter" });
+    fireEvent.keyDown(tagsFieldInput, { key: "Enter" });
     expect(screen.queryByDisplayValue("a tag")).not.toBeInTheDocument();
   });
 });

package/src/api/pages.tsx

@@ -80,6 +80,16 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/page/check",
     method: "POST",
   },
+  PAGE_AI_SUMMARY: {
+    ...template,
+    endpoint: "/ai/summary/page",
+    method: "POST",
+  },
+  PAGE_AI_TRANSLATION: {
+    ...template,
+    endpoint: "/translations/page/",
+    method: "POST",
+  },
 };
 
 const getPageInfo = async (pageID: number) => {
@@ -210,6 +220,17 @@ const pageCheck = async (data: any) => {
   return sendRequest(SERVICES.PAGE_CHECK, { ...data });
 };
 
+const getPageSummary = async (data: any) => {
+  return sendRequest(SERVICES.PAGE_AI_SUMMARY, { ...data });
+};
+
+const getPageTranslation = async (data: any, langID: number) => {
+  const { host, endpoint } = SERVICES.PAGE_AI_TRANSLATION;
+  SERVICES.PAGE_AI_TRANSLATION.dynamicUrl = `${host}${endpoint}${langID}`;
+
+  return sendRequest(SERVICES.PAGE_AI_TRANSLATION, { ...data });
+};
+
 export default {
   getPageInfo,
   updatePage,
@@ -226,4 +247,6 @@ export default {
   sendPagePing,
   getPublicPage,
   pageCheck,
+  getPageSummary,
+  getPageTranslation
 };

package/src/components/Button/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "@ax/components";
+import { Icon, Loader } from "@ax/components";
 
 import * as S from "./style";
 
@@ -10,7 +10,7 @@ enum buttonStyles {
   INVERSE = "lineInverse",
 }
 
-const Button = ({ children, type, disabled, icon, buttonStyle, onClick, className }: IButtonProps): JSX.Element => {
+const Button = ({ children, type, disabled, icon, buttonStyle, onClick, className, loader }: IButtonProps): JSX.Element => {
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick !== undefined) {
       e.preventDefault();
@@ -18,13 +18,10 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     }
   };
 
-  let iconWrapper;
-  if (icon) {
-    iconWrapper = <Icon name={icon} />;
-  }
+  let iconWrapper = icon ? <Icon name={icon} /> : loader ? <Loader name={loader} /> : undefined;
 
   const buttonContent = (
-    <S.Label icon={icon}>
+    <S.Label icon={icon || loader}>
       {iconWrapper}
       <span>{children}</span>
     </S.Label>
@@ -79,6 +76,7 @@ export interface IButtonProps {
   type: "button" | "submit" | "reset" | undefined;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   icon?: string;
+  loader?: string;
   disabled?: boolean;
   buttonStyle?: "solid" | "text" | "line" | "lineInverse" | undefined; // TODO: investigar si podemos hacer esto más elegante y aprovechar el enum buttonStyles
   className?: string;

package/src/components/Button/style.tsx

@@ -57,6 +57,9 @@ export const Button = styled.button`
     path {
       fill: #ffffff;
     }
+    circle {
+      stroke: #ffffff;
+    }
   }
 `;
 

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -167,7 +167,7 @@ const ManualPanel = (props: IProps) => {
                 const source = state.sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
                 const disabled = (hasMaxItems && !isChecked) || !!hasVersionInPageLanguage;
                 return (
-                  <Item
+                  <>{source && <Item
                     key={`${item.content.title}-${item.id}`}
                     isChecked={isChecked || !!isSelectedOtherLanguage}
                     handleOnClick={handleOnClick}
@@ -175,7 +175,7 @@ const ManualPanel = (props: IProps) => {
                     source={source}
                     disabled={disabled}
                     tooltip={hasVersionInPageLanguage ? "Content has version in page language" : ""}
-                  />
+                  />}</>
                 );
               })}
           </S.ItemList>

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

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { IRootState } from "@ax/types";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+
+import * as S from "./style";
+
+const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
+  const { autoSummary, getPageSummary } = props;
+
+  const initialState = {
+    isLoading: false,
+    isClicked: false,
+    error: false,
+  };
+
+  const [state, setState] = useState(initialState);
+
+  const handleClick = async () => {
+    setState((state) => ({ ...state, isLoading: true, error: false }));
+    const generated = await getPageSummary();
+    setState((state) => ({ ...state, isLoading: false }));
+    if (generated) {
+      setState((state) => ({ ...state, isClicked: true }));
+    } else {
+      setState((state) => ({ ...state, error: true }));
+    }
+  };
+
+  const buttonText = state.isLoading
+    ? "Processing..."
+    : state.isClicked
+    ? "Regenerate SEO data with AI"
+    : "Generate SEO data with AI";
+
+  return (
+    <>
+      {autoSummary ? (
+        <S.Wrapper data-testid="summary-button-wrapper">
+          <S.Text>
+            You can automatically generate <strong>SEO meta descriptions</strong> and <strong>keywords</strong> quickly
+            with <strong>AI</strong>.
+          </S.Text>
+          <S.ButtonWrapper>
+            <S.StyledButton
+              type="button"
+              onClick={handleClick}
+              icon={!state.isLoading ? "Ia" : undefined}
+              loader={state.isLoading ? "circle" : undefined}
+            >
+              {buttonText}
+            </S.StyledButton>
+          </S.ButtonWrapper>
+          {state.error && <S.ErrorText>We're having problems. Please try again in a few minutes.</S.ErrorText>}
+        </S.Wrapper>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export interface ISummaryButtonProps {
+  autoSummary: boolean;
+  getPageSummary: () => Promise<boolean>;
+}
+
+const mapDispatchToProps = {
+  getPageSummary: pageEditorActions.getPageSummary,
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  autoSummary: state.app.globalSettings.autoSummary,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SummaryButton);

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

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+import { Button } from "@ax/components";
+
+const Wrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledButton = styled((props) => <Button {...props} />)`
+  width: 100%;
+  max-width: 264px;
+`;
+
+const ErrorText = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.error};
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Wrapper, Text, ButtonWrapper, StyledButton, ErrorText };

package/src/components/Fields/{TagField → TagsField}/index.tsx

@@ -3,7 +3,7 @@ import { Tag } from "@ax/components";
 
 import * as S from "./style";
 
-const TagField = (props: IProps): JSX.Element => {
+const TagsField = (props: IProps): JSX.Element => {
   const { value, onChange } = props;
   const valueArray = value && Array.isArray(value) ? value : [];
   const [inputValue, setInputValue] = useState("");
@@ -61,4 +61,4 @@ interface IProps {
   onChange: (value: string[]) => void;
 }
 
-export default TagField;
+export default TagsField;

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

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { Icon, Modal } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import { IRootState } from "@ax/types";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+
+import * as S from "./style";
+
+const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
+  const { lang, autoTranslation, getPageTranslation, content, isIATranslated, setIsTranslated } = props;
+
+  const { canBeTranslated } = content;
+
+  const initialState = {
+    isLoading: false,
+    error: false,
+  };
+
+  const [state, setState] = useState(initialState);
+  const { isOpen, toggleModal } = useModal();
+
+  const handleClick = async () => {
+    toggleModal();
+    setState((state) => ({ ...state, isLoading: true, error: false }));
+    const generated = await getPageTranslation(lang);
+    setState((state) => ({ ...state, isLoading: false }));
+    if (!generated) {
+      setState((state) => ({ ...state, error: true }));
+    }
+  };
+
+  const handleClose = () => setIsTranslated(false);
+
+  const buttonText = state.isLoading ? "Processing..." : "Translate page with AI";
+
+  return (
+    <>
+      {isIATranslated && !canBeTranslated && (
+        <S.Wrapper data-testid="translated-notification-wrapper">
+          <S.NotificationContent>
+            <S.Text>This page is translated with Artificial Intelligence.</S.Text>
+            <S.IconWrapper onClick={handleClose}>
+              <Icon name="close" size="16" />
+            </S.IconWrapper>
+          </S.NotificationContent>
+        </S.Wrapper>
+      )}
+      {autoTranslation && canBeTranslated ? (
+        <>
+          <S.Wrapper data-testid="translate-button-wrapper">
+            <S.Text>
+              Using <strong>Artificial Intelligence</strong>, you can translate the page automatically.
+            </S.Text>
+            <S.ButtonWrapper>
+              <S.StyledButton
+                type="button"
+                onClick={toggleModal}
+                icon={!state.isLoading ? "Ia" : undefined}
+                loader={state.isLoading ? "circle" : undefined}
+              >
+                {buttonText}
+              </S.StyledButton>
+            </S.ButtonWrapper>
+            {state.error && <S.ErrorText>We're having problems. Please try again in a few minutes.</S.ErrorText>}
+          </S.Wrapper>
+          <Modal
+            isOpen={isOpen}
+            hide={toggleModal}
+            size="S"
+            title="Translate page with AI"
+            mainAction={{ title: "Translate with AI", icon: "Ia", onClick: handleClick }}
+            secondaryAction={{ title: "Cancel", onClick: toggleModal }}
+          >
+            <S.ModalContent>
+              The automatic translation <strong>will replace all the text on the page</strong>. Before proceeding, make
+              sure that the existing text is not critical.
+            </S.ModalContent>
+          </Modal>
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export interface ITranslateButtonProps {
+  lang: number;
+  autoTranslation: boolean;
+  content: any;
+  isIATranslated: boolean;
+  getPageTranslation: (langID: number) => Promise<boolean>;
+  setIsTranslated: (isTranslated: boolean) => Promise<void>;
+}
+
+const mapDispatchToProps = {
+  getPageTranslation: pageEditorActions.getPageTranslation,
+  setIsTranslated: pageEditorActions.setIsTranslated,
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  autoTranslation: state.app.globalSettings.autoTranslation,
+  content: state.pageEditor.editorContent,
+  isIATranslated: state.pageEditor.isIATranslated
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TranslateButton);

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

@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+import { Button } from "@ax/components";
+
+const Wrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+`;
+
+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.xs};
+`;
+
+const StyledButton = styled((props) => <Button {...props} />)`
+  width: 100%;
+  max-width: 264px;
+`;
+
+const ErrorText = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.error};
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const IconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  cursor: pointer;
+  margin-left: auto;
+`;
+
+const NotificationContent = styled.div`
+  display: flex;
+`;
+
+export { Wrapper, Text, ButtonWrapper, StyledButton, ErrorText, ModalContent, NotificationContent, IconWrapper };

package/src/components/Fields/index.tsx

@@ -26,11 +26,13 @@ import ReferenceField from "./ReferenceField";
 import RichText from "./RichText";
 import Select from "./Select";
 import SliderField from "./SliderField";
-import TagField from "./TagField";
+import SummaryButton from "./SummaryButton";
+import TagsField from "./TagsField";
 import TextArea from "./TextArea";
 import TextField from "./TextField";
 import TimeField from "./TimeField";
 import ToggleField from "./ToggleField";
+import TranslateButton from "./TranslateButton";
 import UniqueCheck from "./UniqueCheck";
 import UrlField from "./UrlField";
 import VisualOption from "./VisualOption";
@@ -66,11 +68,13 @@ export {
   RichText,
   Select,
   SliderField,
-  TagField,
+  SummaryButton,
+  TagsField,
   TextArea,
   TextField,
   TimeField,
   ToggleField,
+  TranslateButton,
   UniqueCheck,
   UrlField,
   VisualOption,

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -181,7 +181,7 @@ const GalleryDetailPanel = (props: IProps) => {
           fieldType="TextArea"
           onChange={handleDescription}
         />
-        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagField" onChange={handleTags} />
+        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagsField" onChange={handleTags} />
       </S.FormWrapper>
     </S.PanelForm>
   );

package/src/components/Icon/components/Ia.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const SvgIa = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      fillRule="evenodd"
+      d="M11.063 3.063 12 1l.938 2.063L15 4l-2.063.938L12 7l-.938-2.063L9 4l2.063-.938Zm-.22 10.093L8.5 8l-2.344 5.156L1 15.5l5.156 2.344L8.5 23l2.344-5.156L16 15.5l-5.156-2.344ZM18.5 5l-1.406 3.094L14 9.5l3.094 1.406L18.5 14l1.406-3.094L23 9.5l-3.094-1.406L18.5 5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIa;

package/src/components/Icon/svgs/IA.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="M11.0625 3.0625L12 1L12.9375 3.0625L15 4L12.9375 4.9375L12 7L11.0625 4.9375L9 4L11.0625 3.0625ZM10.8438 13.1562L8.5 8L6.15625 13.1562L1 15.5L6.15625 17.8438L8.5 23L10.8438 17.8438L16 15.5L10.8438 13.1562ZM18.5 5L17.0938 8.09375L14 9.5L17.0938 10.9062L18.5 14L19.9062 10.9062L23 9.5L19.9062 8.09375L18.5 5Z" fill="#5057FF"/>
+</svg>

package/src/components/MainWrapper/AppBar/atoms.tsx

@@ -19,9 +19,10 @@ const ActionMenuBtn = (props: any) => {
     menu &&
     menu.button && (
       <S.ButtonWrapper>
-        <Button type="button" buttonStyle="line" onClick={menu.button.action}>
+        <Button type="button" buttonStyle="line" onClick={menu.button.action} disabled={menu.button.disabled}>
           {menu.button.label}
         </Button>
+        {menu.button.helpText && <S.HelpText>{menu.button.helpText}</S.HelpText>}
       </S.ButtonWrapper>
     )
   );

package/src/components/MainWrapper/AppBar/style.tsx

@@ -89,6 +89,14 @@ const ButtonWrapper = styled.div`
   }
 `;
 
+const HelpText = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  white-space: normal;
+  width: 160px;
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
 const LanguageWrapper = styled.div`
   position: relative;
   display: flex;
@@ -206,4 +214,5 @@ export {
   WrapperTitle,
   TabsContent,
   StatusBtn,
+  HelpText,
 };

package/src/components/Modal/index.tsx

@@ -11,7 +11,7 @@ const Modal = (props: IModalProps): JSX.Element | null => {
   const titleContent = title ? <S.Title>{title}</S.Title> : "";
 
   const mainActionButton = mainAction ? (
-    <Button type="button" onClick={mainAction.onClick} disabled={mainAction.disabled}>
+    <Button type="button" onClick={mainAction.onClick} disabled={mainAction.disabled} icon={mainAction.icon}>
       {mainAction.title}
     </Button>
   ) : (
@@ -73,6 +73,7 @@ interface IAction {
   title: string;
   onClick: () => void;
   disabled?: boolean;
+  icon?: string;
 }
 
 export default memo(Modal);

package/src/components/index.tsx

@@ -21,10 +21,12 @@ import {
   ReferenceField,
   RichText,
   Select,
+  SummaryButton,
   TextArea,
   TextField,
   TimeField,
   ToggleField,
+  TranslateButton,
   UniqueCheck,
   UrlField,
   VisualOption,
@@ -117,10 +119,12 @@ export {
   ReferenceField,
   RichText,
   Select,
+  SummaryButton,
   TextArea,
   TextField,
   TimeField,
   ToggleField,
+  TranslateButton,
   UniqueCheck,
   UrlField,
   VisualOption,

package/src/containers/App/reducer.tsx

@@ -48,6 +48,8 @@ export interface IGlobalSettings {
   welcomeText1: string;
   welcomeText2: string;
   skipReviewOnPublish?: boolean;
+  autoSummary: boolean;
+  autoTranslation: boolean;
 }
 
 export const initialState = {
@@ -76,6 +78,8 @@ export const initialState = {
     siteLogoMini: "",
     welcomeText1: "",
     welcomeText2: "",
+    autoSummary: false,
+    autoTranslation: false,
   },
   sessionStartedAt: null,
 };

package/src/containers/PageEditor/actions.tsx

@@ -58,6 +58,7 @@ import {
   SET_USER_EDITING,
   SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
+  SET_IS_IA_TRANSLATED,
 } from "./constants";
 
 import {
@@ -93,6 +94,7 @@ import {
   pageStatus,
   ISetLastElementAddedId,
   ISetCopyModule,
+  ISetIsIATranslated,
 } from "./interfaces";
 
 const { setIsLoading, setIsSaving, handleError } = appActions;
@@ -190,6 +192,10 @@ function setCopyModule(moduleCopy: Record<string, unknown> | null): ISetCopyModu
   return { type: SET_COPY_MODULE, payload: { moduleCopy } };
 }
 
+function setIsIATranslated(isIATranslated: boolean): ISetIsIATranslated {
+  return { type: SET_IS_IA_TRANSLATED, payload: { isIATranslated } };
+}
+
 function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
@@ -325,7 +331,11 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
 
         const { liveStatus, component } = getDefaultSchema(baseSchema);
 
-        if (isNewTranslation) page["liveStatus"] = liveStatus;
+        if (isNewTranslation) {
+           page["liveStatus"] = liveStatus;
+           page["canBeTranslated"] = true;
+           page["originalLanguage"] = page.language;
+        }
 
         if (global) page["component"] = component;
 
@@ -1108,6 +1118,7 @@ function resetPageEditor(): (dispatch: Dispatch) => Promise<void> {
       dispatch(setSitePageID(null));
       dispatch(setUserEditing(null));
       dispatch(setLastElementAddedId(null));
+      dispatch(setIsIATranslated(false));
       localStorage.removeItem("selectedID");
     } catch (e) {
       console.log("Error", e); //TODO
@@ -1343,6 +1354,70 @@ function restorePageNavigation(key: string): (dispatch: Dispatch, getState: any)
   };
 }
 
+function getPageSummary(): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        pageEditor: { editorContent },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: (data: { summary: string; keywords: string[] }) => {
+          const content = deepClone(editorContent);
+          content["metaDescription"] = data.summary;
+          content["metaKeywords"] = data.keywords;
+          generatePageContent(content, dispatch, getState);
+        },
+        handleError: () => console.log("Error en GetPageSummary"),
+      };
+
+      const callback = async () => pages.getPageSummary(editorContent);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function getPageTranslation(langID: number): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        pageEditor: { editorContent },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: (data: IPage) => {
+          data["canBeTranslated"] = false;
+          generatePageContent(data, dispatch, getState);
+          dispatch(setCurrentPageName(data.title));
+          dispatch(setIsIATranslated(true));
+        },
+        handleError: () => console.log("Error en GetPageTranslation"),
+      };
+
+      const callback = async () => pages.getPageTranslation(editorContent, langID);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function setIsTranslated(isTranslated: boolean): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(setIsIATranslated(isTranslated));
+    } catch (e) {
+      console.log("Error", e);
+    }
+  };
+}
+
 export {
   setEditorContent,
   setTemplate,
@@ -1391,4 +1466,7 @@ export {
   pasteModule,
   removeNavigationFromPage,
   restorePageNavigation,
+  getPageSummary,
+  getPageTranslation,
+  setIsTranslated
 };

package/src/containers/PageEditor/constants.tsx

@@ -20,6 +20,7 @@ export const SET_SITE_PAGE_ID = `${NAME}/SET_SITE_PAGE_ID`;
 export const SET_USER_EDITING = `${NAME}/SET_USER_EDITING`;
 export const SET_LAST_ELEMENT_ADDED_ID = `${NAME}/SET_LAST_ELEMENT_ADDED_ID`;
 export const SET_COPY_MODULE = `${NAME}/SET_COPY_MODULE`;
+export const SET_IS_IA_TRANSLATED = `${NAME}/SET_IS_IA_TRANSLATED`;
 
 export const INITIAL_TEMPLATE = "BasicTemplate";
 export const MULTIMEDIA_COMPONENTS = ["LinkableImage", "Video"];

package/src/containers/PageEditor/interfaces.tsx

@@ -19,6 +19,7 @@ import {
   SET_USER_EDITING,
   SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
+  SET_IS_IA_TRANSLATED,
 } from "./constants";
 import { IBreadcrumbItem, ISchema, IPage, IErrorItem, IUserEditing } from "@ax/types";
 
@@ -122,6 +123,11 @@ export interface ISetCopyModule {
   payload: { moduleCopy: Record<string, unknown> | null };
 }
 
+export interface ISetIsIATranslated {
+  type: typeof SET_IS_IA_TRANSLATED;
+  payload: { isIATranslated: boolean };
+}
+
 export interface IFieldProps {
   id: number;
   key: string;

package/src/containers/PageEditor/reducer.tsx

@@ -22,6 +22,7 @@ import {
   SET_USER_EDITING,
   SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
+  SET_IS_IA_TRANSLATED,
 } from "./constants";
 
 import { PageEditorActionsCreators } from "./interfaces";
@@ -47,6 +48,7 @@ export interface IPageEditorState {
   userEditing: IUserEditing | null;
   lastElementAddedId: null | number;
   moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  isIATranslated: boolean;
 }
 
 export const initialState = {
@@ -70,6 +72,7 @@ export const initialState = {
   userEditing: null,
   lastElementAddedId: null,
   moduleCopy: null,
+  isIATranslated: false,
 };
 
 export function reducer(state = initialState, action: PageEditorActionsCreators): IPageEditorState {
@@ -95,6 +98,7 @@ export function reducer(state = initialState, action: PageEditorActionsCreators)
     case SET_USER_EDITING:
     case SET_LAST_ELEMENT_ADDED_ID:
     case SET_COPY_MODULE:
+    case SET_IS_IA_TRANSLATED:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/modules/PageEditor/index.tsx

@@ -67,6 +67,8 @@ const PageEditor = (props: IProps) => {
   const isTranslated = pageLanguages.length > 1;
   const structuredData = editorContent ? editorContent.structuredData : "";
   const isEditLive = isPublished && hasDraft;
+  const canBeUnpublished = editorContent && editorContent.canBeUnpublished;
+  const deleteHelpText = !canBeUnpublished ? "This is the canonical site of the page. You cannot unpublish it." : null;
 
   const errorNotificationText =
     "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -76,6 +78,7 @@ const PageEditor = (props: IProps) => {
     const { pageID, getPage, setTab, sendPagePing } = props;
     const defaultTab = "content";
     const handleGetPage = async () => await getPage(pageID);
+
     setTab(defaultTab);
     handleGetPage();
 
@@ -245,6 +248,8 @@ const PageEditor = (props: IProps) => {
           : {
               label: "Unpublish",
               action: hasDraft ? toggleUnpublishModal : unpublishPage,
+              disabled: !canBeUnpublished,
+              helpText: deleteHelpText,
             };
       case pageStatus.MODIFIED:
         return {

package/src/schemas/pages/GlobalPage.tsx

@@ -7,6 +7,11 @@ export default {
     {
       title: "content",
       fields: [
+        {
+          title: "",
+          type: "TranslateButton",
+          key: "translate",
+        },
         {
           title: "Title",
           type: "TextField",
@@ -52,6 +57,11 @@ export default {
           key: "seoData",
           collapsed: true,
           fields: [
+            {
+              title: "",
+              type: "SummaryButton",
+              key: "summary",
+            },
             {
               title: "Meta title",
               type: "TextField",
@@ -62,6 +72,11 @@ export default {
               type: "TextArea",
               key: "metaDescription",
             },
+            {
+              title: "Keywords",
+              type: "TagsField",
+              key: "metaKeywords",
+            },
             {
               title: "Meta robots index",
               type: "RadioGroup",

package/src/schemas/pages/Page.tsx

@@ -9,6 +9,11 @@ export default {
     {
       title: "content",
       fields: [
+        {
+          title: "",
+          type: "TranslateButton",
+          key: "translate",
+        },
         {
           title: "Title",
           type: "TextField",
@@ -111,6 +116,11 @@ export default {
           key: "seoData",
           collapsed: true,
           fields: [
+            {
+              title: "",
+              type: "SummaryButton",
+              key: "summary",
+            },
             {
               title: "Meta title",
               type: "TextField",
@@ -121,6 +131,11 @@ export default {
               type: "TextArea",
               key: "metaDescription",
             },
+            {
+              title: "Keywords",
+              type: "TagsField",
+              key: "metaKeywords",
+            },
             {
               title: "Canonical URL",
               type: "TextField",

package/src/types/index.tsx

@@ -90,6 +90,9 @@ export interface IAPIPage {
   liveChanged: boolean;
   templateId: string;
   structuredDataContent: Record<string, []>;
+  canBeTranslated: boolean;
+  originalLanguage: number;
+  language: number;
 }
 
 export interface IPage extends IAPIPage {