@griddo/ax 11.0.29-rc.0 → 11.0.30-rc.0

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -84,7 +84,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   };
 
   const isComponentModule = contentType === "components";
-  const isModuleArr = contentType === "modules";
+  const isModuleArr = contentType === "modules" || contentType === "fields";
 
   const handleAddModule = (moduleType: string) =>
     addModuleAction && addModuleAction(moduleType, objKey, editorID, isComponentModule);
@@ -97,7 +97,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     const { modules } = selectedContent;
     if (isModuleArr && deleteModuleAction && modules?.length > 0) {
       const currentModule: IModule = modules[0];
-      deleteModuleAction([currentModule.editorID], contentType);
+      deleteModuleAction([currentModule.editorID], objKey);
       handleAddModule(moduleType);
     } else {
       replaceElementsInCollectionAction && replaceElementsInCollectionAction(moduleType);
@@ -278,8 +278,8 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               whiteList={whiteList}
               categories={categories}
               handleClick={handleAdd}
-              isModuleArr={isModuleArr}
               theme={theme}
+              contentType={contentType}
             />
           )}
         </S.ActionsWrapper>
@@ -333,7 +333,7 @@ export interface IMixableComponentArrayProps {
     setNotificationAction: (notification: INotification) => void;
     replaceModuleAction: (module: any, parent: any, objKey: string) => void;
   };
-  categories?: any;
+  categories?: any[];
   disabled?: boolean;
   activatedModules: string[];
   objKey: string;

package/src/components/Fields/ComponentArray/helpers.tsx

@@ -19,7 +19,7 @@ const getComponentProps = (element: IModule, activatedModules: string[], isModul
   const schemaType = getSchemaType(component);
   const displayName = getDisplayName(component);
   const title = getComponentTitle(component, element.title);
-  const isModule = schemaType === "module";
+  const isModule = schemaType === "module" || schemaType === "formComponent";
   const moduleTitle = isModule && displayName !== title && title;
   const componentTitle = !isModule && displayName !== title && title;
   const isModuleDeactivated = isModuleArr && activatedModules && !activatedModules.includes(component);

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

@@ -0,0 +1,13 @@
+import React from "react";
+
+import MixableComponentArray, { IMixableComponentArrayProps } from "../ComponentArray/MixableComponentArray";
+
+const FormFieldArray = (props: IMixableComponentArrayProps): JSX.Element => {
+  const formFieldArrayProps: IMixableComponentArrayProps = {
+    ...props,
+    field: { ...props.field, contentType: "fields" },
+  };
+  return <MixableComponentArray {...formFieldArrayProps} />;
+};
+
+export default FormFieldArray;

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

@@ -158,7 +158,6 @@ const AutoPanel = (props: IProps): JSX.Element => {
         preferenceLanguage: state.preferenceLanguage,
         lang: state.lang,
         site: state.site,
-        fields: state.fields,
       };
 
       onChange(newValue);
@@ -354,7 +353,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
                     <S.ConfigWrapper>
                       <S.SubConfigContent hasMargin={true}>
                         <S.OptionDescription isOpen={configState.isCustomLangOpen}>
-                          By default, content is shown in the page&apos;s language. Activate this option to{" "}
+                          By default, content is shown in the page's language. Activate this option to{" "}
                           <strong>specifically set a different language</strong> for the content shown in this
                           distributor.
                         </S.OptionDescription>

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

@@ -96,7 +96,6 @@ export interface IReferenceState {
   preferenceLanguage: boolean;
   lang?: number;
   site?: number;
-  fields?: string[];
 }
 
 export interface IRefField {
@@ -110,7 +109,6 @@ export interface IRefField {
   preferenceLanguage?: boolean;
   lang?: number;
   site?: number;
-  fields?: string[];
 }
 
 export interface IFilter {

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

@@ -14,7 +14,7 @@ const ItemList = (props: IProps) => {
   const { items, currentSite, handleListDelete, handleListMove, site } = props;
 
   const { state, setState, setReorderElements } = useReference();
-  const { fixed, selectedItems, sourceTitles, fullRelations, fields } = state;
+  const { fixed, selectedItems, sourceTitles, fullRelations } = state;
 
   const getParams = useCallback(() => {
     const params = {
@@ -22,7 +22,6 @@ const ItemList = (props: IProps) => {
       fixed: items,
       fullRelations,
       site,
-      fields,
     };
 
     return params;

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

@@ -94,8 +94,8 @@ const ManualPanel = (props: IProps) => {
     setState((state: IReferenceState) => ({ ...state, showSelected: !state.showSelected }));
 
   const handleAdd = () => {
-    const { mode, fixed, fullRelations, site, lang, fields } = state;
-    const newValue = { mode, fixed, fullRelations, site, lang, fields };
+    const { mode, fixed, fullRelations, site, lang } = state;
+    const newValue = { mode, fixed, fullRelations, site, lang };
     onChange(newValue);
     handleValidation && handleValidation(state.fixed, validators);
   };

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

@@ -45,7 +45,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const isAuto = mode === "auto";
   const hasMaxItems = !!(value && value.fixed && maxItems && !isAuto && value.fixed.length >= maxItems);
   const sourcesIDs = sources.map((source: ISource) => source.structuredData);
-  const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false, fields } = state;
+  const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false } = state;
 
   const handleMode = (mode: string) => {
     const manualSources: string[] = state.selectedItems.reduce(
@@ -69,14 +69,12 @@ const ReferenceField = (props: IReferenceFieldProps) => {
             fullRelations,
             allLanguages,
             preferenceLanguage,
-            fields,
           }
         : {
             mode,
             sources,
             fixed,
             fullRelations,
-            fields,
           };
     onChange(newValue);
     setModeAndSource(mode, mappedSources);
@@ -136,7 +134,6 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       mode,
       fixed,
       fullRelations,
-      fields,
     };
     onChange(newValue);
     resetValidation && resetValidation();
@@ -147,7 +144,6 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       mode,
       fixed,
       fullRelations,
-      fields,
     };
     onChange(newValue);
   };

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

@@ -2,9 +2,10 @@ 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 { FormContent, IRootState } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
+import { formsActions } from "@ax/containers/Forms";
 
 import * as S from "./style";
 
@@ -12,17 +13,45 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
   const {
     lang,
     autoTranslation,
+    contentType,
     getPageTranslation,
-    content,
+    editorContent,
     isPageIATranslated,
     isDataContentIATranslated,
     setIsPageTranslated,
     structuredDataForm,
     getDataContentTranslation,
     setIsContentTranslated,
+    formContent,
+    isFormIATranslated,
+    getFormTranslation,
+    setIsFormTranslated,
   } = props;
 
-  const canBeTranslated = !!structuredDataForm ? structuredDataForm.canBeTranslated : content.canBeTranslated;
+  const getContent = (type: "page" | "data" | "form") => {
+    return {
+      page: {
+        content: editorContent,
+        isIATranslated: isPageIATranslated,
+        getTranslationAction: getPageTranslation,
+        setIsTranslated: setIsPageTranslated,
+      },
+      data: {
+        content: structuredDataForm,
+        isIATranslated: isDataContentIATranslated,
+        getTranslationAction: getDataContentTranslation,
+        setIsTranslated: setIsContentTranslated,
+      },
+      form: {
+        content: formContent,
+        isIATranslated: isFormIATranslated,
+        getTranslationAction: getFormTranslation,
+        setIsTranslated: setIsFormTranslated,
+      },
+    }[type];
+  };
+
+  const { content, isIATranslated, getTranslationAction, setIsTranslated } = getContent(contentType);
 
   const initialState = {
     isLoading: false,
@@ -35,20 +64,20 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
   const handleClick = async () => {
     toggleModal();
     setState((state) => ({ ...state, isLoading: true, error: false }));
-    const generated = !!structuredDataForm ? await getDataContentTranslation(lang) : await getPageTranslation(lang);
+    const generated = await getTranslationAction(lang);
     setState((state) => ({ ...state, isLoading: false }));
     if (!generated) {
       setState((state) => ({ ...state, error: true }));
     }
   };
 
-  const handleClose = () => !!structuredDataForm ? setIsContentTranslated(false) : setIsPageTranslated(false);
+  const handleClose = () => setIsTranslated(false);
 
   const buttonText = state.isLoading ? "Processing..." : "Translate page with AI";
 
   return (
     <>
-      {(isPageIATranslated || isDataContentIATranslated) && !canBeTranslated && (
+      {isIATranslated && !content?.canBeTranslated && (
         <S.Wrapper data-testid="translated-notification-wrapper" isSmall={false}>
           <S.NotificationContent>
             <S.Text>This page is translated with Artificial Intelligence.</S.Text>
@@ -58,7 +87,7 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
           </S.NotificationContent>
         </S.Wrapper>
       )}
-      {autoTranslation && canBeTranslated ? (
+      {autoTranslation && content?.canBeTranslated ? (
         <>
           <S.Wrapper data-testid="translate-button-wrapper" isSmall={!!structuredDataForm}>
             <S.Text>
@@ -74,7 +103,7 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
                 {buttonText}
               </S.StyledButton>
             </S.ButtonWrapper>
-            {state.error && <S.ErrorText>We're having problems. Please try again in a few minutes.</S.ErrorText>}
+            {state.error && <S.ErrorText>We&apos;re having problems. Please try again in a few minutes.</S.ErrorText>}
           </S.Wrapper>
           <Modal
             isOpen={isOpen}
@@ -100,14 +129,19 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
 export interface ITranslateButtonProps {
   lang: number;
   autoTranslation: boolean;
-  content: any;
+  editorContent: any;
   structuredDataForm: any | null;
   isPageIATranslated: boolean;
   isDataContentIATranslated: boolean;
+  isFormIATranslated: boolean;
+  contentType: "page" | "data" | "form";
+  formContent: FormContent | null;
   getPageTranslation: (langID: number) => Promise<boolean>;
   getDataContentTranslation: (langID: number) => Promise<boolean>;
+  getFormTranslation: (langID: number) => Promise<boolean>;
   setIsPageTranslated: (isTranslated: boolean) => Promise<void>;
   setIsContentTranslated: (isTranslated: boolean) => Promise<void>;
+  setIsFormTranslated: (isTranslated: boolean) => void;
 }
 
 const mapDispatchToProps = {
@@ -115,14 +149,18 @@ const mapDispatchToProps = {
   setIsPageTranslated: pageEditorActions.setIsTranslated,
   getDataContentTranslation: structuredDataActions.getDataContentTranslation,
   setIsContentTranslated: structuredDataActions.setIsTranslated,
+  getFormTranslation: formsActions.getFormTranslation,
+  setIsFormTranslated: formsActions.setIsIATranslated,
 };
 
 const mapStateToProps = (state: IRootState) => ({
   autoTranslation: state.app.globalSettings.autoTranslation,
-  content: state.pageEditor.editorContent,
+  editorContent: state.pageEditor.editorContent,
   isPageIATranslated: state.pageEditor.isIATranslated,
   isDataContentIATranslated: state.structuredData.isIATranslated,
   structuredDataForm: state.structuredData.form,
+  formContent: state.forms.formContent,
+  isFormIATranslated: state.forms.isIATranslated,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(TranslateButton);

package/src/components/Fields/Wysiwyg/helpers.tsx

@@ -1,7 +1,7 @@
-import { schemas } from "components";
+import { config } from "components";
 
 const getRichTextConfig = (): IRichTextConfig | null => {
-  return schemas?.richTextConfig ? schemas.richTextConfig : null;
+  return config.schemas.config.richTextConfig || null;
 };
 
 const parseClassNames = (styles: { label: string; className: string }[]) =>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import FroalaEditorComponent from "react-froala-wysiwyg";
+import FroalaEditor from "react-froala-wysiwyg";
 import { decodeEntities } from "@ax/helpers";
 import { IImage, ISite, IRootState } from "@ax/types";
 import { galleryActions } from "@ax/containers/Gallery";
@@ -40,7 +40,6 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
     },
     events: {
       initialized() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
         if (disabled) {
           setTimeout(() => {
@@ -49,18 +48,12 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
         }
       },
       "image.beforeUpload": async function (images: FileList) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
-        const response = await uploadImage(images[0], imageSite);
-        if (response) {
-          editor.image.insert(response.url, null, null, editor.image.get());
-        } else {
-          editor.image.remove(editor.image.get());
-        }
+        const { url } = await uploadImage(images[0], imageSite);
+        editor.image.insert(url, true, null, editor.image.get(), null);
         return false;
       },
       blur: function () {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
         const html = editor.html.get();
         const stripedHtml = decodeEntities(html);
@@ -73,7 +66,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 
   return (
     <S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">
-      <FroalaEditorComponent tag="textarea" model={value} config={config} onModelChange={handleChange} />
+      <FroalaEditor tag="textarea" model={value} config={config} onModelChange={handleChange} />
     </S.EditorWrapper>
   );
 };

package/src/components/Fields/index.tsx

@@ -12,6 +12,7 @@ import DateField from "./DateField";
 import FieldGroup from "./FieldGroup";
 import FieldsDivider from "./FieldsDivider";
 import FileField from "./FileField";
+import FormFieldArray from "./FormFieldArray";
 import HeadingField from "./HeadingField";
 import HiddenField from "./HiddenField";
 import ImageField from "./ImageField";
@@ -55,6 +56,7 @@ export {
   FieldGroup,
   FieldsDivider,
   FileField,
+  FormFieldArray,
   HeadingField,
   HiddenField,
   ImageField,

package/src/components/FieldsBehavior/index.tsx

@@ -41,8 +41,14 @@ const FieldsBehavior = (props: any): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorID, error]);
 
-  const helpTextWrapper = message ? <S.HelpText error={errorField}  inversed={inversed}>{message}</S.HelpText> : "";
-  const isComponentArray = fieldType === "ComponentArray";
+  const helpTextWrapper = message ? (
+    <S.HelpText error={errorField} inversed={inversed}>
+      {message}
+    </S.HelpText>
+  ) : (
+    ""
+  );
+  const isComponentArray = fieldType === "ComponentArray" || fieldType === "FormFieldArray";
   const isComponentContainer = fieldType === "ComponentContainer";
   const hasMultipleOptions: boolean = whiteList && whiteList.length > 1;
 

package/src/components/Icon/components/Form.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const SvgForm = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      fillRule="evenodd"
+      d="M19 19V5H5v14h14ZM5 3h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2Zm12 4H7v2h10V7ZM7 11h10v2H7v-2Zm4 4H7v2h4v-2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgForm;

package/src/components/Icon/svgs/Form.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="M19 19V5H5V19H19ZM5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM17 7H7V9H17V7ZM7 11H17V13H7V11ZM11 15H7V17H11V15Z" fill="#5057FF"/>
+</svg>

package/src/components/LanguageMenu/index.tsx

@@ -9,7 +9,7 @@ const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
   const { availableLanguages, language, setLanguage, isInAppBar, currentLanguages } = props;
 
   const getCurrentLanguage = (lang: string) =>
-    currentLanguages && currentLanguages.find((currLanguage: any) => currLanguage.locale === lang);
+    currentLanguages && currentLanguages.find((currLanguage) => currLanguage.locale === lang);
 
   const isNewVersion = (lang: string) => currentLanguages && !getCurrentLanguage(lang);
   const isEditableVersion = (lang: string) => currentLanguages && getCurrentLanguage(lang);
@@ -36,41 +36,44 @@ const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
     );
   };
 
-  const languageMenuItem = (item: ILanguage) => (
-    <S.LanguageItem
-      key={item.locale}
-      selected={item.locale === language}
-      onClick={setLanguage(item)}
-      data-testid="language-menu-item"
-    >
-      <S.LanguageItemWrapper>
-        <S.LanguageLabel>
-          <Flag name={item.locale} />
-          <S.LanguageText data-testid="language-text">
-            <S.Locale>{item.label}</S.Locale> - {item.language}
-          </S.LanguageText>
-        </S.LanguageLabel>
-        {isNewVersion(item.locale) && language !== item.locale && (
-          <S.LanguageSubtext> Add new version </S.LanguageSubtext>
-        )}
-      </S.LanguageItemWrapper>
-      {getLanguageIcon(item.locale)}
-    </S.LanguageItem>
-  );
+  const languageMenuItem = (item: ILanguage) => {
+    const handleClick = () => setLanguage(item);
+    return (
+      <S.LanguageItem
+        key={item.locale}
+        selected={item.locale === language}
+        onClick={handleClick}
+        data-testid="language-menu-item"
+      >
+        <S.LanguageItemWrapper>
+          <S.LanguageLabel>
+            <Flag name={item.locale} />
+            <S.LanguageText data-testid="language-text">
+              <S.Locale>{item.label}</S.Locale> - {item.language}
+            </S.LanguageText>
+          </S.LanguageLabel>
+          {isNewVersion(item.locale) && language !== item.locale && (
+            <S.LanguageSubtext> Add new version </S.LanguageSubtext>
+          )}
+        </S.LanguageItemWrapper>
+        {getLanguageIcon(item.locale)}
+      </S.LanguageItem>
+    );
+  };
 
   return (
     <S.ActionMenu data-testid="language-menu">
-      {availableLanguages && availableLanguages.map((item: any) => languageMenuItem(item))}
+      {availableLanguages && availableLanguages.map((item) => languageMenuItem(item))}
     </S.ActionMenu>
   );
 };
 
 export interface ILanguageMenuProps {
-  language?: string | null;
-  availableLanguages?: any[] | null;
-  currentLanguages?: any[];
+  language: string | null;
+  availableLanguages: ILanguage[];
+  currentLanguages: ILanguage[];
   isInAppBar?: boolean;
-  setLanguage(lang: ILanguage): any;
+  setLanguage(lang: ILanguage): void;
 }
 
 export default LanguageMenu;

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
-import { IErrorItem } from "@ax/types";
+import { IErrorItem, ILanguage } from "@ax/types";
 import { getScheduleFormatDate, trimText } from "@ax/helpers";
 import { useModal } from "@ax/hooks";
 import {
@@ -35,8 +35,8 @@ const AppBar = (props: IProps): JSX.Element => {
     pageStatus,
     language,
     availableLanguages,
-    pageLanguages,
-    languageActions,
+    currentLanguages,
+    languageAction,
     additionalClass,
     subtitle,
     inversed,
@@ -55,7 +55,7 @@ const AppBar = (props: IProps): JSX.Element => {
     scheduledPublication,
   } = props;
 
-  const publishedTooltip: any = {
+  const publishedTooltip: Record<string, string> = {
     active: "Live",
     "upload-pending": "Publication pending",
     offline: "Offline",
@@ -66,71 +66,26 @@ const AppBar = (props: IProps): JSX.Element => {
 
   const fixedClass = fixedAppBar ? "fixed" : "";
   const isScheduledPub = !!scheduledPublication && pageStatus === "scheduled";
+  const currentLang = availableLanguages?.find((lang) => lang.id === language?.id);
 
   const { isOpen, toggleModal } = useModal();
-  const [langSelected, setLangSelected] = useState(language);
+  const [langSelected, setLangSelected] = useState<ILanguage | undefined>(currentLang);
 
-  const goToPages = () => {
+  const goToPages = () =>
     typeof backLink === "string" ? props.history.push(backLink, { isFromEditor }) : props.history.goBack();
-  };
 
-  const getCurrentLanguage = (lang: string) =>
-    pageLanguages && pageLanguages.find((pageLang: any) => pageLang.locale === lang);
+  const handleLanguage = (item?: ILanguage) => {
+    if (!item || !languageAction) return;
 
-  const handleLanguage = (item: any) => async () => {
     if (langSelected && langSelected.locale !== item.locale && isDirty) {
       setLangSelected(item);
       toggleModal();
       return;
-    } else {
-      isOpen && toggleModal();
     }
-    if (!languageActions || !languageActions.setLanguage) return;
-
-    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 && (await languageActions.getContent(id));
-    }
-
-    if (languageActions.getDataContent && currentLanguage) {
-      currentLanguage && (await languageActions.getDataContent(currentLanguage.dataID));
-      setNewTranslation(false);
-    }
-
-    if (languageActions.getSiteContent) {
-      languageActions.getSiteContent();
-    }
-
-    if (pageLanguages && !getCurrentLanguage(item.locale)) {
-      languageActions.getDataContent && currentPageID && (await languageActions.getDataContent(currentPageID));
-      setNewTranslation(true);
-      languageActions.getContent && currentPageID && languageActions.getContent(currentPageID);
-    }
+    languageAction(item);
   };
 
-  const languageMenu = (
-    <LanguageMenu
-      language={language && language.locale}
-      availableLanguages={availableLanguages}
-      currentLanguages={pageLanguages}
-      setLanguage={handleLanguage}
-      isInAppBar={true}
-    />
-  );
-
   const LanguageBtn = () =>
     language && (
       <>
@@ -176,13 +131,13 @@ const AppBar = (props: IProps): JSX.Element => {
 
   const mainAction = {
     title: "Change language",
-    onClick: handleLanguage(langSelected),
+    onClick: () => handleLanguage(langSelected),
   };
 
   const secondaryAction = {
     title: "Cancel",
     onClick: () => {
-      setLangSelected(language);
+      setLangSelected(currentLang);
       toggleModal();
     },
   };
@@ -249,7 +204,7 @@ const AppBar = (props: IProps): JSX.Element => {
             {(language || pageStatus || rightButton || rightLineButton) && <S.Separator />}
           </>
         )}
-        {language && (
+        {language && availableLanguages && (
           <>
             <ChangeLanguageModal />
             <S.LanguageWrapper data-testid="language-wrapper">
@@ -260,7 +215,13 @@ const AppBar = (props: IProps): JSX.Element => {
                   position="left"
                   offset={rightButton || rightLineButton ? 0 : -85}
                 >
-                  {languageMenu}
+                  <LanguageMenu
+                    language={language.locale}
+                    availableLanguages={availableLanguages}
+                    currentLanguages={currentLanguages || availableLanguages}
+                    setLanguage={handleLanguage}
+                    isInAppBar={true}
+                  />
                 </FloatingMenu>
               </Tooltip>
             </S.LanguageWrapper>
@@ -330,15 +291,9 @@ export interface IAppBarProps {
   fixedAppBar?: boolean;
   pageStatus?: string;
   language?: { locale: string; id: number | null } | null;
-  availableLanguages?: any[] | null;
-  pageLanguages?: any[];
-  languageActions?: {
-    setLanguage?(lang: { locale: string; id: number | null }): 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;
+  availableLanguages?: ILanguage[];
+  currentLanguages?: ILanguage[];
+  languageAction?: (lang: ILanguage) => void;
   additionalClass?: string;
   inversed?: boolean;
   currentPageID?: number;