@griddo/ax 1.61.4 → 1.61.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.61.4",
+  "version": "1.61.7",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -244,5 +244,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "aa12a8c88585c5a1d5be471c31175722833abfe8"
+  "gitHead": "9b014749b0e843961331bd3c95724e2449f67a8d"
 }

package/src/helpers/index.tsx

@@ -55,6 +55,7 @@ import {
   getFilteredStructuredData,
   getStructuredDataTitle,
   isStructuredDataFromPage,
+  isGlobalStructuredData,
   getGlobalPageTypes,
 } from "./structuredData";
 
@@ -149,6 +150,7 @@ export {
   decodeEntities,
   getStructuredDataTitle,
   isStructuredDataFromPage,
+  isGlobalStructuredData,
   getGlobalPageTypes,
   isNumber,
   getFileExtension,

package/src/helpers/structuredData.tsx

@@ -28,6 +28,8 @@ const getStructuredDataTitle = (name: string): string => schemas.structuredData[
 
 const isStructuredDataFromPage = (name: string): boolean => schemas.structuredData[name].fromPage;
 
+const isGlobalStructuredData = (name: string): boolean => !schemas.structuredData[name].local;
+
 const getGlobalPageTypes = (): Record<string, string>[] => {
   const { structuredData } = schemas;
   const keys = Object.keys(structuredData);
@@ -44,6 +46,7 @@ export {
   getCurrentPageStructuredData,
   getFilteredStructuredData,
   getStructuredDataTitle,
+  isGlobalStructuredData,
   isStructuredDataFromPage,
   getGlobalPageTypes,
 };

package/src/hooks/forms.tsx

@@ -89,6 +89,7 @@ const useIsDirty = (
   const [isResetting, setIsResetting] = useState(false);
 
   const prevContent = usePrevious(updatedValues, isSaved);
+  const isTranslatedVersion: boolean = prevContent?.language !== updatedValues?.language;
 
   const hasChanged = () => {
     if (prevContent && updatedValues) {
@@ -97,7 +98,7 @@ const useIsDirty = (
 
       const { cleanUpdatedValues, cleanOriginalValues } = cleanPageValues(updatedValuesCloned, originalValuesCloned);
 
-      const hasChanged = !isEqual(cleanUpdatedValues, cleanOriginalValues);
+      const hasChanged = !isTranslatedVersion && !isEqual(cleanUpdatedValues, cleanOriginalValues);
 
       return hasChanged;
     }

package/src/modules/Content/OptionTable/index.tsx

@@ -2,7 +2,7 @@ import React, { useReducer, useEffect, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { getStructuredDataTitle, getThumbnailProps, isStructuredDataFromPage } from "@ax/helpers";
+import { getStructuredDataTitle, getThumbnailProps, isGlobalStructuredData } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
 
 import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
@@ -31,9 +31,10 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 
     const optionObj = availableOptions.find((item: any) => item.value === option);
     setSelectedOption(option);
-    const { isData } = optionObj;
-
-    setValue(option, !!isData);
+    if (optionObj) {
+      const { isData } = optionObj;
+      setValue(option, !!isData);
+    }
   };
 
   let filteredByTypeOptions = filterOptions(state.selectedType, "type");
@@ -44,7 +45,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    const firstOption = filteredByTypeOptions[0].value;
+    const firstOption = filteredByTypeOptions[0] && filteredByTypeOptions[0].value;
     selectOption(firstOption, filteredByTypeOptions);
     // eslint-disable-next-line
   }, []);
@@ -72,20 +73,20 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     setType(value);
     filteredByTypeOptions = filterOptions(value, "type");
 
-    const isGlobal = value !== "static" && isStructuredDataFromPage(value.toUpperCase());
+    const isGlobal = value !== "static" && isGlobalStructuredData(value.toUpperCase());
     if (isGlobal) {
       filteredByTypeOptions = filteredByTypeOptions.map((option: any) => {
-        if (!option.value.includes("Detail")) return option;
+        if (option.mode !== "detail") return option;
         const title = `Get ${getStructuredDataTitle(value.toUpperCase())} from Global`;
         return { ...option, title };
       });
-      const globalOptionIdx = filteredByTypeOptions.findIndex((option: any) => option.value.includes("Detail"));
+      const globalOptionIdx = filteredByTypeOptions.findIndex((option: any) => option.mode === "detail");
       const globalOption = filteredByTypeOptions.splice(globalOptionIdx, 1);
       filteredByTypeOptions.push(...globalOption);
     }
 
     setValues(filteredByTypeOptions);
-    const firstOption = filteredByTypeOptions[0].value;
+    const firstOption = filteredByTypeOptions[0] && filteredByTypeOptions[0].value;
     selectOption(firstOption, filteredByTypeOptions);
 
     const optionList = filterOptions(state.selectedOption, "value");
@@ -106,9 +107,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
           return (
             <MenuItem key={`${item.type}${i}`}>
               <S.NavLink onClick={displayFilteredOptions} className={selectedClass}>
-                <S.Link active={isSelected}>
-                  {item.label}
-                </S.Link>
+                <S.Link active={isSelected}>{item.label}</S.Link>
               </S.NavLink>
             </MenuItem>
           );

package/src/modules/Content/PageItem/index.tsx

@@ -47,7 +47,16 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     removePageFromSite,
   } = functions;
   const { locale } = lang;
-  const { pageLanguages, isHome, fullPath, canBeUnpublished, origin, manuallyImported, templateId, structuredDataContent } = page;
+  const {
+    pageLanguages,
+    isHome,
+    fullPath,
+    canBeUnpublished,
+    origin,
+    manuallyImported,
+    templateId,
+    structuredDataContent,
+  } = page;
   const displayName = getTemplateDisplayName(templateId);
 
   const initValue = { title: "", slug: "" };
@@ -261,8 +270,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     isGlobal && !manuallyImported
       ? "This page has been provided by subscription. You cannot remove it."
       : canBeUnpublished === false
-        ? "This is the canonical site of the page. You cannot remove it."
-        : null;
+      ? "This is the canonical site of the page. You cannot remove it."
+      : null;
 
   let menuOptions: IPageOption[] = [
     {
@@ -394,7 +403,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
             {page.title}
             {isHome && <Icon name="home" />}
           </S.Title>
-          <S.Slug>{fullPath.page}</S.Slug>
+          <S.Slug>{fullPath && fullPath.page}</S.Slug>
         </S.NameCell>
         {CategoryColumns}
         {activeColumns.includes("type") && (

package/src/modules/Content/index.tsx

@@ -15,7 +15,7 @@ import {
   IColumn,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState } from "@ax/components";
-import { getFilteredStructuredData, isStructuredDataFromPage } from "@ax/helpers";
+import { getFilteredStructuredData, isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
@@ -535,9 +535,11 @@ const Content = (props: IProps): JSX.Element => {
 
   const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
-  const selectedOptionType = options.values.find((option) => option.value === selectedOption).type.toUpperCase();
-  const isOptionGlobal = selectedOptionType !== "STATIC" && isStructuredDataFromPage(selectedOptionType);
-  const isOptionImportable = isOptionGlobal && selectedOption.includes("Detail");
+  const selectedOptionObject = options.values.find((option) => option.value === selectedOption);
+  const selectedOptionType = selectedOptionObject.type.toUpperCase();
+  const isOptionGlobal = selectedOptionType !== "STATIC" && isGlobalStructuredData(selectedOptionType);
+  const isOptionImportable =
+    isOptionGlobal && isStructuredDataFromPage(selectedOptionType) && selectedOptionObject.mode === "detail";
 
   const handleImport = () => {
     toggleNewModal();

package/src/modules/Content/utils.tsx

@@ -3,11 +3,10 @@ import { filterDuplicatedValues, getActivatedDataPacksIds } from "@ax/helpers";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { IPage } from "@ax/types";
 
-const { templates } = schemas;
-
 const getTemplatesFilters = (activatedDataPacks: any) => {
   const types: any[] = [];
   const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
+  const { templates } = schemas;
 
   Object.keys(templates).forEach((schema: any) => {
     const { type, dataPacks } = templates[schema];
@@ -39,12 +38,13 @@ const mapStructuredOptions = (options: any[]) => {
 
 const getOptionValues = (options: any) => {
   const templatesOptionsValues: any = [];
+  const { templates } = schemas;
 
   Object.keys(templates).forEach((schema: any) => {
     const currSchema = templates[schema];
     const { component, displayName } = currSchema;
-    const type =
-      !!currSchema.type && currSchema.type.value && currSchema.type.value && currSchema.type.value.toLowerCase();
+    const type = currSchema.type && currSchema.type.value && currSchema.type.value.toLowerCase();
+    const mode = currSchema.type && currSchema.type.mode;
 
     !!currSchema.type &&
       templatesOptionsValues.push({
@@ -52,6 +52,7 @@ const getOptionValues = (options: any) => {
         title: displayName,
         type,
         value: component,
+        mode,
       });
   });
 
@@ -64,7 +65,7 @@ const getOptionFilters = (options: any, activatedDataPacks: any) => {
 
   const mappedOptions = pureOptions.map((option: any) => ({
     label: option.title,
-    value: option.title.toLowerCase(),
+    value: option.id.toLowerCase(),
   }));
 
   const filters = [...templateFilters, ...mappedOptions];

package/src/modules/GlobalEditor/index.tsx

@@ -273,15 +273,15 @@ const GlobalEditor = (props: IProps) => {
     switch (props.pageStatus) {
       case pageStatus.PUBLISHED:
       case pageStatus.UPLOAD_PENDING:
-        return !isDirty ? "Saved" : isPublished && hasDraft ? "Save & publish" : "Save draft";
+        return !isDirty && !isNewTranslation ? "Saved" : isPublished && hasDraft ? "Save & publish" : "Save draft";
       default:
-        return !isDirty ? "Saved" : "Save";
+        return !isDirty && !isNewTranslation ? "Saved" : "Save";
     }
   };
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: isSaving || isPreviewMode || !isDirty,
+    disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isPreviewMode,
     action: handleSavePage,
   };
 

package/src/modules/PageEditor/index.tsx

@@ -301,15 +301,23 @@ const PageEditor = (props: IProps) => {
     switch (props.pageStatus) {
       case pageStatus.PUBLISHED:
       case pageStatus.UPLOAD_PENDING:
-        return !isDirty ? "Saved" : isGlobal || (isPublished && hasDraft) ? "Save & publish" : "Save draft";
+        return !isDirty && !isNewTranslation
+          ? "Saved"
+          : isGlobal || (isPublished && hasDraft)
+          ? "Save & publish"
+          : "Save draft";
       default:
-        return !isDirty ? "Saved" : "Save";
+        return !pageID || isNewTranslation ? "Save" : isDirty ? "Save" : "Saved";
     }
   };
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: isSaving || (!isTemplateActivated && !isGlobal) || isPreviewMode || !isDirty,
+    disabled:
+      (!isDirty && pageID !== null && !isNewTranslation) ||
+      isSaving ||
+      isPreviewMode ||
+      (!isTemplateActivated && !isGlobal),
     action: handleSavePage,
   };
 

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

@@ -56,11 +56,11 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     setType(value);
     filteredByTypeOptions = filterOptions(value, "type");
     setValues(filteredByTypeOptions);
-    const firstOption = filteredByTypeOptions[0].value;
+    const firstOption = filteredByTypeOptions[0] && filteredByTypeOptions[0].value;
     selectOption(firstOption);
 
     const optionList = filterOptions(state.selectedOption, "value");
-    const displayThumbnail = optionList[0].type !== value;
+    const displayThumbnail = optionList[0] && optionList[0].type !== value;
 
     showThumbnail(displayThumbnail);
   };
@@ -77,9 +77,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
           return (
             <MenuItem key={`${item.value}${i}`}>
               <S.NavLink onClick={displayFilteredOptions} className={selectedClass}>
-                <S.Link active={isSelected}>
-                  {item.label}
-                </S.Link>
+                <S.Link active={isSelected}>{item.label}</S.Link>
               </S.NavLink>
             </MenuItem>
           );

package/src/modules/StructuredData/StructuredDataList/utils.tsx

@@ -9,7 +9,7 @@ const getOptionFilters = (options: { global: IStructuredData[]; site: IStructure
 
   const filters = pageOptions.map((option: IStructuredData) => ({
     label: option.title,
-    value: option.title.toLowerCase(),
+    value: option.id.toLowerCase(),
   }));
 
   const uniqueFilters = [...new Map(filters.map((item: IStructuredDataFilter) => [item.value, item])).values()];