@griddo/ax 10.1.17 → 10.1.19

package/package.json

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

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

@@ -16,10 +16,32 @@ const mockStore = configureStore(middlewares);
 const defaultProps = mock<ITranslateButtonProps>();
 
 describe("Translate Button component rendering", () => {
-  it("should render the component", () => {
+  it("should render the component in page editor", () => {
     const initialStore = {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
+      structuredData: { form: null, 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 render the component in structured data editor", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: null, isIATranslated: false },
+      structuredData: { form: { canBeTranslated: true }, isIATranslated: false },
     };
     const store = mockStore(initialStore);
 
@@ -40,6 +62,7 @@ describe("Translate Button component rendering", () => {
     const initialStore = {
       app: { globalSettings: { autoTranslation: false } },
       pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
+      structuredData: { form: null, isIATranslated: false },
     };
     const store = mockStore(initialStore);
 
@@ -56,10 +79,32 @@ describe("Translate Button component rendering", () => {
     expect(translateButtonWrapper).toBeFalsy();
   });
 
-  it("should not render the component if can't be translated", () => {
+  it("should not render the component if page can't be translated", () => {
     const initialStore = {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: false },
+      structuredData: { form: null, 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 structured data can't be translated", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: null, isIATranslated: false },
+      structuredData: { form: { canBeTranslated: false }, isIATranslated: false },
     };
     const store = mockStore(initialStore);
 
@@ -76,10 +121,11 @@ describe("Translate Button component rendering", () => {
     expect(translateButtonWrapper).toBeFalsy();
   });
 
-  it("should render the notification if it's already translated", () => {
+  it("should render the notification if page is already translated", () => {
     const initialStore = {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: true },
+      structuredData: { form: null, isIATranslated: false },
     };
     const store = mockStore(initialStore);
 
@@ -96,10 +142,53 @@ describe("Translate Button component rendering", () => {
     expect(translateButtonWrapper).toBeFalsy();
   });
 
-  it("should render the component if it's already translated but can be translated", () => {
+  it("should render the notification if structured data is already translated", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: null, isIATranslated: false },
+      structuredData: { form: { 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 page is already translated but can be translated", () => {
     const initialStore = {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: true },
+      structuredData: { form: null, 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 render the component if structured data is already translated but can be translated", () => {
+    const initialStore = {
+      app: { globalSettings: { autoTranslation: true } },
+      pageEditor: { editorContent: null, isIATranslated: false },
+      structuredData: { form: { canBeTranslated: true }, isIATranslated: true },
     };
     const store = mockStore(initialStore);
 

package/src/api/structuredData.tsx

@@ -79,6 +79,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/site/", "/structured_data"],
     method: "GET",
   },
+  CONTENT_AI_TRANSLATION: {
+    ...template,
+    endpoint: "/translations/structured_data_content/",
+    method: "POST",
+  },
 };
 
 const getData = (token: string | null, siteID?: number | null) => {
@@ -231,6 +236,13 @@ const getContentTypes = (siteID: number | null, lang?: number): Promise<AxiosRes
   return sendRequest(SERVICES.GET_CONTENT_TYPES, null, dataHeader);
 };
 
+const getDataContentTranslation = async (data: any, langID: number) => {
+  const { host, endpoint } = SERVICES.CONTENT_AI_TRANSLATION;
+  SERVICES.CONTENT_AI_TRANSLATION.dynamicUrl = `${host}${endpoint}${langID}`;
+
+  return sendRequest(SERVICES.CONTENT_AI_TRANSLATION, { ...data });
+};
+
 export default {
   getData,
   getDataContent,
@@ -247,4 +259,5 @@ export default {
   setDataStatusBulk,
   getContentTypes,
   getDataContentBulk,
+  getDataContentTranslation,
 };

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

@@ -4,13 +4,25 @@ import { Icon, Modal } from "@ax/components";
 import { useModal } from "@ax/hooks";
 import { IRootState } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
+import { structuredDataActions } from "@ax/containers/StructuredData";
 
 import * as S from "./style";
 
 const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
-  const { lang, autoTranslation, getPageTranslation, content, isIATranslated, setIsTranslated } = props;
+  const {
+    lang,
+    autoTranslation,
+    getPageTranslation,
+    content,
+    isPageIATranslated,
+    isDataContentIATranslated,
+    setIsPageTranslated,
+    structuredDataForm,
+    getDataContentTranslation,
+    setIsContentTranslated,
+  } = props;
 
-  const { canBeTranslated } = content;
+  const canBeTranslated = !!structuredDataForm ? structuredDataForm.canBeTranslated : content.canBeTranslated;
 
   const initialState = {
     isLoading: false,
@@ -23,21 +35,21 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
   const handleClick = async () => {
     toggleModal();
     setState((state) => ({ ...state, isLoading: true, error: false }));
-    const generated = await getPageTranslation(lang);
+    const generated = !!structuredDataForm ? await getDataContentTranslation(lang) : await getPageTranslation(lang);
     setState((state) => ({ ...state, isLoading: false }));
     if (!generated) {
       setState((state) => ({ ...state, error: true }));
     }
   };
 
-  const handleClose = () => setIsTranslated(false);
+  const handleClose = () => !!structuredDataForm ? setIsContentTranslated(false) : setIsPageTranslated(false);
 
   const buttonText = state.isLoading ? "Processing..." : "Translate page with AI";
 
   return (
     <>
-      {isIATranslated && !canBeTranslated && (
-        <S.Wrapper data-testid="translated-notification-wrapper">
+      {(isPageIATranslated || isDataContentIATranslated) && !canBeTranslated && (
+        <S.Wrapper data-testid="translated-notification-wrapper" isSmall={false}>
           <S.NotificationContent>
             <S.Text>This page is translated with Artificial Intelligence.</S.Text>
             <S.IconWrapper onClick={handleClose}>
@@ -48,7 +60,7 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
       )}
       {autoTranslation && canBeTranslated ? (
         <>
-          <S.Wrapper data-testid="translate-button-wrapper">
+          <S.Wrapper data-testid="translate-button-wrapper" isSmall={!!structuredDataForm}>
             <S.Text>
               Using <strong>Artificial Intelligence</strong>, you can translate the page automatically.
             </S.Text>
@@ -89,20 +101,28 @@ export interface ITranslateButtonProps {
   lang: number;
   autoTranslation: boolean;
   content: any;
-  isIATranslated: boolean;
+  structuredDataForm: any | null;
+  isPageIATranslated: boolean;
+  isDataContentIATranslated: boolean;
   getPageTranslation: (langID: number) => Promise<boolean>;
-  setIsTranslated: (isTranslated: boolean) => Promise<void>;
+  getDataContentTranslation: (langID: number) => Promise<boolean>;
+  setIsPageTranslated: (isTranslated: boolean) => Promise<void>;
+  setIsContentTranslated: (isTranslated: boolean) => Promise<void>;
 }
 
 const mapDispatchToProps = {
   getPageTranslation: pageEditorActions.getPageTranslation,
-  setIsTranslated: pageEditorActions.setIsTranslated,
+  setIsPageTranslated: pageEditorActions.setIsTranslated,
+  getDataContentTranslation: structuredDataActions.getDataContentTranslation,
+  setIsContentTranslated: structuredDataActions.setIsTranslated,
 };
 
 const mapStateToProps = (state: IRootState) => ({
   autoTranslation: state.app.globalSettings.autoTranslation,
   content: state.pageEditor.editorContent,
-  isIATranslated: state.pageEditor.isIATranslated
+  isPageIATranslated: state.pageEditor.isIATranslated,
+  isDataContentIATranslated: state.structuredData.isIATranslated,
+  structuredDataForm: state.structuredData.form,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(TranslateButton);

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

@@ -2,10 +2,11 @@ import React from "react";
 import styled from "styled-components";
 import { Button } from "@ax/components";
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ isSmall: boolean }>`
   background-color: ${(p) => p.theme.color.uiBackground03};
   padding: ${(p) => p.theme.spacing.s};
   border-radius: ${(p) => p.theme.radii.s};
+  max-width: ${(p) => (p.isSmall ? "320px" : "auto")};
 `;
 
 const Text = styled.div`

package/src/components/Gallery/index.tsx

@@ -29,7 +29,7 @@ const Gallery = (props: IProps): JSX.Element => {
   const isGlobalTab = selectedTab === "Global";
   const galleryScope = isLocalTab ? site.id : "global";
 
-  const validFormats = ["jpeg", "jpg", "png", "svg"];
+  const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
 
   const galleryRef = useRef<HTMLDivElement>(null);
 

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

@@ -64,29 +64,29 @@ const AppBar = (props: IProps): JSX.Element => {
   const getCurrentLanguage = (lang: string) =>
     pageLanguages && pageLanguages.find((pageLang: any) => pageLang.locale === lang);
 
-  const handleLanguage = (item: any) => () => {
+  const handleLanguage = (item: any) => async () => {
     if (!languageActions || !languageActions.setLanguage) return;
 
-    const setNewTranslation = (isNewTranslation: boolean) => {
-      languageActions.createNewTranslation && languageActions.createNewTranslation(isNewTranslation);
-    };
-
     const lang = {
       locale: item.locale,
       id: item.id,
     };
 
+    const setNewTranslation = (isNewTranslation: boolean) => {
+      languageActions.createNewTranslation && languageActions.createNewTranslation(isNewTranslation, lang);
+    };
+
     languageActions.setLanguage(lang);
     const currentLanguage = getCurrentLanguage(item.locale);
 
     if (languageActions.getContent && currentLanguage) {
       setNewTranslation(false);
       const id = currentLanguage && currentLanguage.pageId ? currentLanguage.pageId : currentLanguage.navigationId;
-      currentLanguage && languageActions.getContent(id);
+      currentLanguage && (await languageActions.getContent(id));
     }
 
     if (languageActions.getDataContent && currentLanguage) {
-      currentLanguage && languageActions.getDataContent(currentLanguage.dataID);
+      currentLanguage && (await languageActions.getDataContent(currentLanguage.dataID));
       setNewTranslation(false);
     }
 
@@ -95,9 +95,9 @@ const AppBar = (props: IProps): JSX.Element => {
     }
 
     if (pageLanguages && !getCurrentLanguage(item.locale)) {
+      languageActions.getDataContent && currentPageID && (await languageActions.getDataContent(currentPageID));
       setNewTranslation(true);
       languageActions.getContent && currentPageID && languageActions.getContent(currentPageID);
-      languageActions.getDataContent && currentPageID && languageActions.getDataContent(currentPageID);
     }
   };
 
@@ -270,10 +270,10 @@ export interface IAppBarProps {
   pageLanguages?: any[];
   languageActions?: {
     setLanguage?(lang: { locale: string; id: number | null }): void;
-    createNewTranslation?(isNewTranslation: boolean): void;
-    getContent?(id?: number): void;
-    getSiteContent?(page?: number, itemsPerPage?: number): void;
-    getDataContent?(dataID: number): void;
+    createNewTranslation?(isNewTranslation: boolean, lang: { locale: string; id: number }): void;
+    getContent?(id?: number): Promise<void>;
+    getSiteContent?(page?: number, itemsPerPage?: number): Promise<void>;
+    getDataContent?(dataID: number): Promise<void>;
   } | null;
   additionalClass?: string;
   inversed?: boolean;

package/src/components/MainWrapper/index.tsx

@@ -40,8 +40,8 @@ export interface IWrapperProps {
   languageActions?: {
     setLanguage?(lang: { locale: string; id: number | null }): void;
     setIsNewTranslation?(isNewTranslation: boolean): void;
-    getContent?(id?: number): void;
-    getDataContent?(dataID?: number): void;
+    getContent?(id?: number): Promise<void>;
+    getDataContent?(dataID?: number): Promise<void>;
   } | null;
   searchAction?(query: string): void;
   filterSearchAction?(filter: string): void;

package/src/containers/StructuredData/actions.tsx

@@ -17,6 +17,7 @@ import {
   SET_ERRORS,
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
+  SET_IS_IA_TRANSLATED,
 } from "./constants";
 
 import {
@@ -32,6 +33,7 @@ import {
   ISetErrors,
   ISetValidated,
   ISetContentFilters,
+  ISetIsIATranslated,
 } from "./interfaces";
 import { prepareStructuredDataContent, getTaxonomies, filterStructuredDataByID, getTypes } from "./utils";
 import {
@@ -115,6 +117,10 @@ function setContentFilters(contentFilters: Record<string, IStructuredDataQueryVa
   return { type: SET_CONTENT_FILTERS, payload: { contentFilters } };
 }
 
+function setIsIATranslated(isIATranslated: boolean): ISetIsIATranslated {
+  return { type: SET_IS_IA_TRANSLATED, payload: { isIATranslated } };
+}
+
 function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
@@ -138,6 +144,7 @@ function resetForm(setDefault?: boolean): (dispatch: Dispatch, getState: any) =>
     dispatch(setErrors([]));
     dispatch(setValidated(false));
     dispatch(setCurrentDataID(null));
+    dispatch(setIsIATranslated(false));
   };
 }
 
@@ -561,6 +568,52 @@ function deleteError(error: IErrorItem): (dispatch: Dispatch, getState: any) =>
   };
 }
 
+function getDataContentTranslation(langID: number): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        structuredData: { form },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: (data: IStructuredDataContent) => {
+          const newForm = {...data, canBeTranslated: false };
+          dispatch(setForm(newForm));
+          dispatch(setIsIATranslated(true));
+        },
+        handleError: () => console.log("Error en GetDataContentTranslation"),
+      };
+
+      const callback = async () => structuredData.getDataContentTranslation(form, langID);
+
+      return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function setFormValues(values: any): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(updateForm(values));
+    } catch (e) {
+      console.log("Error", e);
+    }
+  };
+}
+
+function setIsTranslated(isTranslated: boolean): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(setIsIATranslated(isTranslated));
+    } catch (e) {
+      console.log("Error", e);
+    }
+  };
+}
+
 export {
   setIsActive,
   setCategories,
@@ -593,4 +646,7 @@ export {
   validateForm,
   deleteError,
   setContentFilters,
+  getDataContentTranslation,
+  setFormValues,
+  setIsTranslated,
 };

package/src/containers/StructuredData/constants.tsx

@@ -16,6 +16,7 @@ const SET_SCHEMA_VERSION: string | null = `${NAME}/SET_SCHEMA_VERSION`;
 const SET_ERRORS = `${NAME}/SET_ERRORS`;
 const SET_VALIDATED = `${NAME}/SET_VALIDATED`;
 const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
+const SET_IS_IA_TRANSLATED = `${NAME}/SET_IS_IA_TRANSLATED`;
 
 const ITEMS_PER_PAGE = 50;
 
@@ -47,4 +48,5 @@ export {
   SET_ERRORS,
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
+  SET_IS_IA_TRANSLATED
 };

package/src/containers/StructuredData/interfaces.tsx

@@ -13,6 +13,7 @@ import {
   SET_ERRORS,
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
+  SET_IS_IA_TRANSLATED,
 } from "./constants";
 
 import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem, IStructuredDataQueryValues } from "@ax/types";
@@ -86,6 +87,11 @@ export interface ISetContentFilters {
   payload: { contentFilters: Record<string, IStructuredDataQueryValues> | null };
 }
 
+export interface ISetIsIATranslated {
+  type: typeof SET_IS_IA_TRANSLATED;
+  payload: { isIATranslated: boolean };
+}
+
 export type CategoryActionsCreators = ISetCategories & ISetCurrentData;
 
 export type StructuredDataActionsCreators = CategoryActionsCreators &

package/src/containers/StructuredData/reducer.tsx

@@ -16,6 +16,7 @@ import {
   SET_ERRORS,
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
+  SET_IS_IA_TRANSLATED,
 } from "./constants";
 
 import { StructuredDataActionsCreators } from "./interfaces";
@@ -36,6 +37,7 @@ export interface IStructuredDataState {
   errors: IErrorItem[];
   validated: boolean;
   contentFilters: Record<string, IStructuredDataQueryValues> | null;
+  isIATranslated: boolean;
 }
 
 export const initialState = {
@@ -54,6 +56,7 @@ export const initialState = {
   errors: [],
   validated: false,
   contentFilters: null,
+  isIATranslated: false,
 };
 
 export function reducer(state = initialState, action: StructuredDataActionsCreators): IStructuredDataState {
@@ -74,6 +77,7 @@ export function reducer(state = initialState, action: StructuredDataActionsCreat
     case SET_ERRORS:
     case SET_VALIDATED:
     case SET_CONTENT_FILTERS:
+    case SET_IS_IA_TRANSLATED:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -91,10 +91,12 @@ const DefaultsEditor = (props: IProps) => {
     action: () => saveButtonAction(),
   };
 
-  const getNavigation = (id: number) => {
-    const isHeader = selectedDefault === "Headers";
-    isHeader ? setHeader(id) : setFooter(id);
-    getValues();
+  const getNavigation = (id: number): Promise<void> => {
+    return new Promise(async () => {
+      const isHeader = selectedDefault === "Headers";
+      isHeader ? setHeader(id) : setFooter(id);
+      await getValues();
+    });
   };
 
   const createNewTranslation = (isNewTranslation: boolean) => {
@@ -212,7 +214,7 @@ const mapDispatchToProps = {
 interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;
-  getValues(): void;
+  getValues(): Promise<void>;
   createNavigation(navHtml?: HTMLDivElement | null): Promise<boolean>;
   updateNavigation(navID: number, data: any, fromEditor?: boolean, navHtml?: HTMLDivElement | null): Promise<boolean>;
   createTranslation(isNewTranslation: boolean): void;

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -9,7 +9,7 @@ import { getStructuredDataInnerFields } from "@ax/forms";
 import * as S from "./style";
 
 const ConnectedField = (props: IProps) => {
-  const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError, theme } = props;
+  const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError, theme, lang } = props;
 
   const value = form?.content && form.content[fieldKey];
   const error = errors.find((err: any) => err.key === field.key);
@@ -38,6 +38,7 @@ const ConnectedField = (props: IProps) => {
     deleteError,
     theme,
     delayed: false,
+    lang: lang.id,
   };
 
   return (
@@ -57,11 +58,13 @@ interface IProps {
   updateFormValue: (value: any) => void;
   deleteError: (error: IErrorItem) => void;
   theme: string;
+  lang: { locale: string; id: number };
 }
 
 const mapStateToProps = (state: IRootState) => ({
   form: state.structuredData.form,
   errors: state.structuredData.errors,
+  lang: state.app.lang,
 });
 
 const mapDispatchToProps = {

package/src/modules/StructuredData/Form/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IErrorItem, INotification, IRootState, ISite } from "@ax/types";
+import { IDataPack, IErrorItem, ILanguage, INotification, IRootState, ISite } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
 import { getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
@@ -37,10 +37,10 @@ const Form = (props: IProps) => {
     setDataStatus,
     deleteStructuredDataContent,
     errors,
-    validated,
     validateForm,
     currentStructuredDataId,
     skipReviewOnPublish,
+    setFormValues,
   } = props;
 
   const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
@@ -49,6 +49,15 @@ const Form = (props: IProps) => {
 
   const { fields } = schema;
 
+  const fieldsTranslate = [
+    {
+      title: "",
+      type: "TranslateButton",
+      key: "translate",
+    },
+    ...fields,
+  ];
+
   const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
   const isDisabled =
     currentStructuredData.local &&
@@ -74,8 +83,8 @@ const Form = (props: IProps) => {
   }, []);
 
   const Fields =
-    fields &&
-    fields.map((field: any, i: number) => {
+    fieldsTranslate &&
+    fieldsTranslate.map((field: any, i: number) => {
       const { type, key } = field;
       if (key === "title") {
         title = form?.content && form.content[key] ? form.content[key] : "";
@@ -100,17 +109,12 @@ const Form = (props: IProps) => {
       const status = isNewStructuredData ? true : form.draft;
 
       let payload: any = {
+        ...form,
         structuredData: currentStructuredData ? currentStructuredData.id : null,
-        content: form.content,
         draft: publish === true ? false : status,
         relatedSite: currentSite ? currentSite.id : null,
-        entity: form.entity ? form.entity : null,
       };
 
-      if (!isNewStructuredData) {
-        payload = { ...payload, ...form };
-      }
-
       let saved = false;
       if (isNewStructuredData) {
         saved = await createStructuredDataContent(payload);
@@ -137,7 +141,13 @@ const Form = (props: IProps) => {
 
   const inversed = !currentSite;
 
-  const createNewTranslation = (value: boolean) => setIsNewStructuredData(value);
+  const createNewTranslation = async (value: boolean, lang: { locale: string; id: number }) => {
+    const isUsedLang = currentLanguages.find((currentLang: ILanguage) => currentLang.id === lang.id);
+    if (!isUsedLang) {
+      setFormValues({ ...form, canBeTranslated: true });
+      setIsNewStructuredData(value);
+    }
+  };
 
   const languageActions = {
     setLanguage,
@@ -320,7 +330,6 @@ interface IProps {
   lang: { locale: string; id: number | null };
   activatedDataPacks: IDataPack[];
   errors: IErrorItem[];
-  validated: boolean;
   currentStructuredDataId: number | null;
   skipReviewOnPublish?: boolean;
   createStructuredDataContent: (payload: any) => Promise<boolean>;
@@ -332,6 +341,7 @@ interface IProps {
   setDataStatus(id: number, status: string): Promise<boolean>;
   deleteStructuredDataContent(id: number): Promise<boolean>;
   validateForm(publish?: boolean): Promise<boolean>;
+  setFormValues(form: any): Promise<void>;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -348,7 +358,6 @@ const mapStateToProps = (state: IRootState) => ({
   currentSite: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   activatedDataPacks: state.dataPacks.activated,
   errors: state.structuredData.errors,
-  validated: state.structuredData.validated,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
 });
 
@@ -362,6 +371,7 @@ const mapDispatchToProps = {
   setDataStatus: structuredDataActions.setStatusStructuredDataContent,
   deleteStructuredDataContent: structuredDataActions.deleteStructuredDataContent,
   validateForm: structuredDataActions.validateForm,
+  setFormValues: structuredDataActions.setFormValues,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Form);

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -121,7 +121,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     const isNew = currentLanguages.find((l) => l.id === language.id) ? false : true;
 
     if (isNew) {
-      updateForm({ ...structuredData, id: null, language: id });
+      updateForm({ ...structuredData, id: null, language: id, canBeTranslated: true });
     } else {
       getDataContent(dataId, lang);
     }