@griddo/ax 10.1.4 → 10.1.5

package/package.json

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

package/src/__tests__/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`Avatar component rendering should render the component only with name 1`] = `
 <div
-  className="sc-gUrTyy hCAPBe"
+  className="sc-ejdXBC fORGYU"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-kZGvTt fqifXh"
+    className="sc-ldFCYb iNdtRr"
     data-testid="avatar"
   />
 </div>
@@ -14,11 +14,11 @@ exports[`Avatar component rendering should render the component only with name 1
 
 exports[`Avatar component rendering should render the component with a wrong image url 1`] = `
 <div
-  className="sc-gUrTyy hCAPBe"
+  className="sc-ejdXBC fORGYU"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-kZGvTt ewoFoI"
+    className="sc-ldFCYb cpyHnO"
     data-testid="avatar"
   />
 </div>
@@ -26,11 +26,11 @@ exports[`Avatar component rendering should render the component with a wrong ima
 
 exports[`Avatar component rendering should render the component with an empty string as name 1`] = `
 <div
-  className="sc-gUrTyy hCAPBe"
+  className="sc-ejdXBC fORGYU"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-kZGvTt gaoFtK"
+    className="sc-ldFCYb iXxXyw"
     data-testid="avatar"
   />
 </div>
@@ -38,11 +38,11 @@ exports[`Avatar component rendering should render the component with an empty st
 
 exports[`Avatar component rendering should render the component with image null 1`] = `
 <div
-  className="sc-gUrTyy hCAPBe"
+  className="sc-ejdXBC fORGYU"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-kZGvTt iGBqvM"
+    className="sc-ldFCYb Tmium"
     data-testid="avatar"
   />
 </div>
@@ -50,11 +50,11 @@ exports[`Avatar component rendering should render the component with image null
 
 exports[`Avatar component rendering should render the component without name or image 1`] = `
 <div
-  className="sc-gUrTyy hCAPBe"
+  className="sc-ejdXBC fORGYU"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-kZGvTt gaoFtK"
+    className="sc-ldFCYb iXxXyw"
     data-testid="avatar"
   />
 </div>

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

@@ -127,6 +127,21 @@ const initialStore = {
         ],
         relatedPages: [],
       },
+      {
+        id: 6,
+        name: "Page custom",
+        description: "This is the integration page custom",
+        site: 86,
+        contentHead: "<script>console.log('Hello')</script>",
+        contentBody: "",
+        contentBodyPosition: "start",
+        contentPresence: {
+          presenceType: "page-custom",
+          relatedPages: null,
+        },
+        active: true,
+        relatedPages: [],
+      },
     ],
     totalItems: 3,
     integrationCopy: null,
@@ -157,7 +172,7 @@ describe("IntegrationsField component rendering", () => {
       );
     });
 
-    expect(screen.getByText("Third-Party Integration")).toBeTruthy();
+    expect(screen.getByText("Add-ons")).toBeTruthy();
   });
 
   test("should render the component IntegrationsField with integrations", async () => {
@@ -183,7 +198,7 @@ describe("IntegrationsField component rendering", () => {
       );
     });
 
-    expect(screen.getAllByTestId("integration-item").length).toBe(3);
+    expect(screen.getAllByTestId("integration-item").length).toBe(4);
   });
 
   test("should render the component IntegrationsField with custom code integration", async () => {
@@ -218,7 +233,7 @@ describe("IntegrationsField component rendering", () => {
       );
     });
 
-    expect(screen.getAllByTestId("integration-item").length).toBe(4);
+    expect(screen.getAllByTestId("integration-item").length).toBe(5);
   });
 });
 
@@ -247,17 +262,17 @@ describe("Events", () => {
       );
     });
 
-    expect(screen.getAllByTestId("integration-item").length).toBe(3);
+    expect(screen.getAllByTestId("integration-item").length).toBe(4);
 
     const floatingMenuButtons = screen.getAllByTestId("floating-menu-button");
     fireEvent.click(floatingMenuButtons[1]);
-    const actionMenu = screen.getByTestId("action-menu-item");
-    fireEvent.click(actionMenu);
+    const actionMenu = screen.getAllByTestId("action-menu-item");
+    fireEvent.click(actionMenu[1]);
 
     const buttonsDefault = screen.getAllByTestId("button-default");
-    fireEvent.click(buttonsDefault[3]);
+    fireEvent.click(buttonsDefault[4]);
 
-    const integrationsWithDeletion = initialStore.integrations.integrations.slice(0, 2);
+    const integrationsWithDeletion = initialStore.integrations.integrations.slice(0,3);
 
     expect(onChange).toHaveBeenLastCalledWith(integrationsWithDeletion);
   });

package/src/components/Fields/IntegrationsField/IntegrationItem/VariablesPanel/index.tsx

@@ -35,7 +35,7 @@ const VariablesPanel = (props: IProps): JSX.Element => {
   };
 
   const noteText =
-    "This integration has some variables assigned. You can define its values to customize some properties.";
+    "This add-on has some variables assigned. You can define its values to customize some properties.";
 
   const Variable = ({ variable }: { variable: IIntegrationVariable }) => {
     const handleChange = (value: string) => setVariableValueRef.current(variable.id, value);

package/src/components/Fields/IntegrationsField/IntegrationItem/atoms.tsx

@@ -12,7 +12,7 @@ const DeleteModal = (props: IModal & { integrationName: string | undefined }): J
     <Modal
       isOpen={isOpen}
       hide={toggleModal}
-      title={`Remove ${integrationName} integration`}
+      title={`Remove ${integrationName} add-on`}
       secondaryAction={secondaryModalAction}
       mainAction={mainModalAction}
       size="S"

package/src/components/Fields/IntegrationsField/IntegrationItem/index.tsx

@@ -60,7 +60,7 @@ const IntegrationItem = (props: IProps): JSX.Element => {
   const integrationName = isCustom ? "Custom Code" : integration.name;
 
   const mainDeleteModalAction = {
-    title: "Remove integration",
+    title: "Remove add-on",
     onClick: removeItem,
   };
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };

package/src/components/Fields/IntegrationsField/SideModal/index.tsx

@@ -25,7 +25,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     ? createPortal(
         <S.Wrapper ref={node}>
           <S.Header>
-            <S.Title>Integrations</S.Title>
+            <S.Title>Add-ons</S.Title>
             <S.ButtonWrapper>
               <IconAction icon="close" onClick={toggleModal} />
             </S.ButtonWrapper>

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

@@ -65,7 +65,8 @@ const IntegrationsField = (props: IIntegrationsFieldProps): JSX.Element => {
 
   const timeSinceIntegrationCopy = !!integrationCopy && differenceInSeconds(new Date(), new Date(integrationCopy.date));
   const eightHoursInSeconds = 8 * 60 * 60;
-  const showPasteIntegrationButton = !disabled && !!integrationCopy && timeSinceIntegrationCopy < eightHoursInSeconds;
+  const showPasteIntegrationButton =
+    !disabled && !!integrationCopy && timeSinceIntegrationCopy < eightHoursInSeconds;
 
   const pasteIntegration = () => {
     integrationCopy && handleAdd(integrationCopy.integration);
@@ -73,14 +74,14 @@ const IntegrationsField = (props: IIntegrationsFieldProps): JSX.Element => {
 
   return (
     <S.Wrapper>
-      <S.Title>Third-Party Integration</S.Title>
+      <S.Title>Add-ons</S.Title>
       <S.ItemRow>
         <S.Subtitle>{state?.length || 0} items</S.Subtitle>
         <S.ActionsWrapper>
           {showPasteIntegrationButton && <PasteIntegrationButton pasteIntegration={pasteIntegration} />}
           {!disabled && (
             <>
-              <Tooltip content="Add integration" hideOnClick>
+              <Tooltip content="Add Add-on" hideOnClick>
                 <IconAction icon="add" onClick={toggleModal} />
               </Tooltip>
               <SideModal

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

@@ -8,7 +8,7 @@ import AutoItem from "./AutoItem";
 import * as S from "./style";
 
 const AutoPanel = (props: IProps): JSX.Element => {
-  const { onChange, site, structuredData, validators } = props;
+  const { onChange, site, structuredData, validators, categories } = props;
 
   const { state, setState } = useReference();
 
@@ -199,7 +199,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
                   filter={sourceFilters}
                   addFilter={handleAddFilter}
                   site={site}
-                  structuredDataSite={structuredData.site}
+                  structuredDataSite={[...structuredData.site, ...categories.site]}
                 />
               );
             })}
@@ -241,6 +241,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 
 interface IProps {
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
+  categories: { global: IStructuredData[]; site: IStructuredData[] };
   onChange: (value: any) => void;
   site: ISite;
   validators?: Record<string, unknown>;

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

@@ -28,6 +28,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     site,
     selectionType,
     structuredDataValues,
+    categories,
     validators,
     maxItems,
     resetValidation,
@@ -170,7 +171,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
   const getPanel = () =>
     isAuto ? (
-      <AutoPanel structuredData={structuredDataValues} onChange={handleOnChange} site={site} validators={validators} />
+      <AutoPanel structuredData={structuredDataValues} categories={categories} onChange={handleOnChange} site={site} validators={validators} />
     ) : (
       <ManualPanel
         onChange={handleOnChange}
@@ -229,6 +230,7 @@ export interface IReferenceFieldProps {
   site: ISite;
   selectionType?: string[];
   structuredDataValues: { global: IStructuredData[]; site: IStructuredData[] };
+  categories: { global: IStructuredData[]; site: IStructuredData[] };
   validators?: Record<string, unknown>;
   maxItems?: number;
   resetValidation?: () => void;
@@ -239,6 +241,7 @@ export interface IReferenceFieldProps {
 
 const mapStateToProps = (state: IRootState) => ({
   structuredDataValues: state.structuredData.structuredData,
+  categories: state.structuredData.categories,
 });
 
 export default connect(mapStateToProps, null)(ReferenceFieldWithProvider);

package/src/modules/Categories/CategoriesList/index.tsx

@@ -81,7 +81,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
   useEffect(() => {
     currentStructuredData && getContents(currentStructuredData.id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lang, currentStructuredData]);
+  }, [lang, currentStructuredData, page]);
 
   const handleClick = (dataID: string) => {
     setSelectedCategory(dataID, scope);

package/src/modules/Settings/Integrations/IntegrationForm/index.tsx

@@ -80,7 +80,7 @@ const IntegrationForm = (props: IProps) => {
     action: handleSave,
   };
 
-  const pageTitle = form.name.trim().length > 0 ? form.name : "New Integration";
+  const pageTitle = form.name.trim().length > 0 ? form.name : "New Add-on";
 
   const bodyOptions = [
     {

package/src/modules/Settings/Integrations/IntegrationItem/CopyModal/index.tsx

@@ -10,7 +10,7 @@ const CopyModal = (props: ICopyModalProps): JSX.Element => {
   const [site, setSite] = useState();
 
   const mainCopyModalAction = {
-    title: "Copy integration",
+    title: "Copy add-on",
     onClick: () => site && action(site),
     disabled: !site,
   };
@@ -21,14 +21,14 @@ const CopyModal = (props: ICopyModalProps): JSX.Element => {
     <Modal
       isOpen={isOpen}
       hide={hide}
-      title="Copy integration in another site"
+      title="Copy add-on in another site"
       secondaryAction={secondaryCopyModalAction}
       mainAction={mainCopyModalAction}
       size="S"
       overflow="visible"
     >
       <S.ModalContent>
-        <S.Title>Select a site to copy this integration.</S.Title>
+        <S.Title>Select a site to copy this add-on.</S.Title>
         <FieldsBehavior name="language" fieldType="AsyncSelect" value={site} entity="sites" onChange={setSite} />
       </S.ModalContent>
     </Modal>

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -79,14 +79,14 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
   ];
 
   const mainDeleteModalAction = {
-    title: "Delete integration",
+    title: "Delete add-on",
     onClick: removeItem,
   };
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
 
   const mainChangeStateModalAction = {
-    title: `${integration.active ? "Disable" : "Enable"} integration`,
+    title: `${integration.active ? "Disable" : "Enable"} add-on`,
     onClick: handleChangeState,
   };
 
@@ -94,7 +94,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 
   const copyToastProps = {
     setIsVisible: setIsVisibleCopy,
-    message: "1 Integration copied to another Site",
+    message: "1 Add-on copied to another Site",
   };
 
   const copyIntegration = async (site: number) => {
@@ -108,7 +108,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
   const handleClick = () => {
     const { setCurrentIntegration, setHistoryPush } = props;
     setCurrentIntegration(integration);
-    setHistoryPush("integrations/edit");
+    setHistoryPush("addons/edit");
   };
 
   return (
@@ -136,27 +136,27 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
       <Modal
         isOpen={isOpenDelete}
         hide={toggleModalDelete}
-        title="Delete integration"
+        title="Delete add-on"
         secondaryAction={secondaryDeleteModalAction}
         mainAction={mainDeleteModalAction}
         size="S"
       >
         <S.ModalContent>
-          Are you sure you want to delete <strong>{integration.name} integration</strong>? This action{" "}
+          Are you sure you want to delete <strong>{integration.name} add-on</strong>? This action{" "}
           <strong>cannot be undone</strong>.
         </S.ModalContent>
       </Modal>
       <Modal
         isOpen={isOpenChangeState}
         hide={toggleModalChangeState}
-        title={`${integration.active ? "Disable" : "Enable"} Third-Party Integration`}
+        title={`${integration.active ? "Disable" : "Enable"} Add-on`}
         secondaryAction={secondaryChangeStateModalAction}
         mainAction={mainChangeStateModalAction}
         size="S"
       >
         <S.ModalContent>
           Are you sure you want to {integration.active ? "disable" : "enable"}{" "}
-          <strong>{integration.name} integration</strong>? This integration will {integration.active ? "stop" : "start"}{" "}
+          <strong>{integration.name} add-on</strong>? This add-on will {integration.active ? "stop" : "start"}{" "}
           working in the pages previously added.
         </S.ModalContent>
       </Modal>

package/src/modules/Settings/Integrations/atoms.tsx

@@ -13,7 +13,7 @@ const DeleteModal = (props: IModal & { integrations: IIntegration[]; selectedIds
     <Modal
       isOpen={isOpen}
       hide={toggleModal}
-      title="Delete Integrations"
+      title="Delete Add-ons"
       secondaryAction={secondaryModalAction}
       mainAction={mainModalAction}
       size="S"
@@ -33,13 +33,13 @@ const DeactivateModal = (props: IModal & { integrations: IIntegration[]; selecte
     <Modal
       isOpen={isOpen}
       hide={toggleModal}
-      title="Deactivate Integrations"
+      title="Deactivate Add-ons"
       secondaryAction={secondaryModalAction}
       mainAction={mainModalAction}
       size="S"
     >
       <S.ModalContent>
-        Are you sure you want to disable {getIntegrationsNames(integrations, selectedIds)}? These integrations will stop
+        Are you sure you want to disable {getIntegrationsNames(integrations, selectedIds)}? These add-ons will stop
         working in the pages previously added.
       </S.ModalContent>
     </Modal>

package/src/modules/Settings/Integrations/index.tsx

@@ -53,9 +53,9 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
   } = useToast();
 
   const noElementsProps: IEmptyStateProps = {
-    message: "To start using third-party integrations in your site, create as many Custom Code as you need.",
+    message: "To start using add-ons in your site, create as many Custom Code as you need.",
     button: "Create custom code",
-    action: () => setHistoryPush(`/sites/settings/integrations/new`),
+    action: () => setHistoryPush(`/sites/settings/addons/new`),
   };
   const fetchState = { isLoading, isFiltered };
   const { isEmpty, emptyStateProps } = useEmptyState(integrations, fetchState, { noElementsProps });
@@ -164,37 +164,37 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
   };
 
   const mainDeleteModalAction = {
-    title: "Delete integrations",
+    title: "Delete add-ons",
     onClick: bulkDelete,
   };
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
 
   const mainDeactivateModalAction = {
-    title: "Deactivate integrations",
+    title: "Deactivate add-ons",
     onClick: bulkDeactivate,
   };
   const secondaryDeactivateModalAction = { title: "Cancel", onClick: toggleModalDeactivate };
 
   const deletedToastProps = {
     setIsVisible: setIsVisibleDelete,
-    message: stateToastDelete?.total > 1 ? `${stateToastDelete?.total} integrations deleted` : "Integration deleted",
+    message: stateToastDelete?.total > 1 ? `${stateToastDelete?.total} add-ons deleted` : "Add-on deleted",
   };
 
   const changedToastProps = {
     setIsVisible: setIsVisibleChange,
-    message: `${stateToastChange?.total} integration${stateToastChange?.total > 1 ? "s" : ""} ${
+    message: `${stateToastChange?.total} add-on${stateToastChange?.total > 1 ? "s" : ""} ${
       stateToastChange?.active ? "enabled" : "disabled"
     }`,
   };
 
   const rightButtonProps = {
     label: "New Custom Code",
-    action: () => setHistoryPush(`/sites/settings/integrations/new`),
+    action: () => setHistoryPush(`/sites/settings/addons/new`),
   };
 
   return (
     <>
-      <MainWrapper backLink={false} title="Third-Party Integration" rightButton={rightButtonProps}>
+      <MainWrapper backLink={false} title="Add-ons" rightButton={rightButtonProps}>
         <S.Wrapper data-testid="integrations-main-wrapper">
           <S.ContentWrapper>
             <ErrorToast />

package/src/modules/Settings/Integrations/utils.tsx

@@ -24,13 +24,13 @@ const getIntegrationsNames = (integrations: IIntegration[], ids: number[]) => {
     return (
       <>
         <strong>{namesString.substring(0, lastCommaIndex - 1)}</strong> and
-        <strong>{namesString.substring(lastCommaIndex + 1)}</strong> integrations
+        <strong>{namesString.substring(lastCommaIndex + 1)}</strong> add-ons
       </>
     );
   } else {
     return (
       <>
-        <strong>{namesString}</strong> integration
+        <strong>{namesString}</strong> add-on
       </>
     );
   }

package/src/routes/site.tsx

@@ -104,24 +104,24 @@ export default [
             name: "SEO & Analytics",
           },
           {
-            path: `${BASE_PATH}/settings/integrations`,
+            path: `${BASE_PATH}/settings/addons`,
             component: Integrations,
-            name: "Third-Party Integration",
+            name: "Add-ons",
           },
         ],
       },
     ],
   },
   {
-    path: `${BASE_PATH}/settings/integrations/new`,
+    path: `${BASE_PATH}/settings/addons/new`,
     component: IntegrationForm,
-    name: "New Integration",
+    name: "New Add-on",
     showInNav: false,
   },
   {
-    path: `${BASE_PATH}/settings/integrations/edit`,
+    path: `${BASE_PATH}/settings/addons/edit`,
     component: IntegrationForm,
-    name: "Edit Integration",
+    name: "Edit Add-on",
     showInNav: false,
   },
   { path: `${BASE_PATH}/settings/languages`, component: Settings, name: "Languages", showInNav: false },