@griddo/ax 11.1.15 → 11.1.16

package/package.json

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

package/src/api/forms.tsx

@@ -85,6 +85,16 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/translations/form/",
     method: "POST",
   },
+  DUPLICATE_FORM: {
+    ...template,
+    endpoint: ["/form/", "/duplicate"],
+    method: "POST",
+  },
+  COPY_FORM: {
+    ...template,
+    endpoint: ["/form/", "/duplicate/site/"],
+    method: "POST",
+  },
 };
 
 const getForms = async (siteID: number | "global", params: GetFormsParams) => {
@@ -188,6 +198,26 @@ const deleteFormCategoryBulk = async (categoryIds: number[]) => {
 
 const orderFormCategory = (data: FormCategoriesOrderParams) => sendRequest(SERVICES.ORDER_FORM_CATEGORY, { ...data });
 
+const duplicateForm = async (formID: number, title: string) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.DUPLICATE_FORM;
+
+  SERVICES.DUPLICATE_FORM.dynamicUrl = `${host}${prefix}${formID}${suffix}`;
+  return sendRequest(SERVICES.DUPLICATE_FORM, { title });
+};
+
+const copyForm = async (formID: number, siteID: number) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.COPY_FORM;
+
+  SERVICES.COPY_FORM.dynamicUrl = `${host}${prefix}${formID}${suffix}${siteID}`;
+  return sendRequest(SERVICES.COPY_FORM);
+};
+
 export default {
   getForms,
   getForm,
@@ -204,4 +234,6 @@ export default {
   orderFormCategory,
   updateFormState,
   getFormTranslation,
+  duplicateForm,
+  copyForm,
 };

package/src/components/TableList/index.tsx

@@ -17,12 +17,23 @@ const TableList = (props: ITableListProps): JSX.Element => {
           <S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header">
             {tableHeader}
           </S.TableHeader>
-          {isLoading ? <Loading /> : <S.TableBody data-testid="table-body" className={className}>{children}</S.TableBody>}
+          {isLoading ? (
+            <Loading />
+          ) : (
+            <S.TableBody data-testid="table-body" className={className}>
+              {children}
+            </S.TableBody>
+          )}
         </>
       </S.Table>
       <S.PaginationWrapper>
-        {showPagination && (
-          <Pagination totalItems={pagination.totalItems} setPage={pagination.setPage} itemsPerPage={pagination.itemsPerPage} currPage={pagination.currPage} />
+        {showPagination && !isLoading && (
+          <Pagination
+            totalItems={pagination.totalItems}
+            setPage={pagination.setPage}
+            itemsPerPage={pagination.itemsPerPage}
+            currPage={pagination.currPage}
+          />
         )}
       </S.PaginationWrapper>
     </S.TableList>

package/src/components/TableList/style.tsx

@@ -2,15 +2,17 @@ import styled from "styled-components";
 
 const TableList = styled.div<{ overflow?: string }>`
   width: 100%;
-  height: 100%;
   overflow: ${(p) => p.overflow};
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 `;
 
 const Table = styled.div`
   width: 100%;
   display: flex;
-  flex-flow: column;
-  height: 100%;
+  flex-direction: column;
+  flex-grow: 1;
 `;
 
 const TableHeader = styled.div<{ hasFixedHeader?: boolean }>`
@@ -84,6 +86,7 @@ const PaginationWrapper = styled.div`
   justify-content: flex-end;
   margin-right: ${(p) => p.theme.spacing.m};
   margin-bottom: ${(p) => p.theme.spacing.m};
+  flex-shrink: 0;
 `;
 
 export {

package/src/containers/Forms/actions.tsx

@@ -816,7 +816,7 @@ function getFormTranslation(langID: number): (dispatch: Dispatch, getState: any)
           generateFormContent(data)(dispatch, getState);
           dispatch(setIsIATranslated(true));
         },
-        handleError: () => console.log("Error en GetFormTranslation"),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
       const callback = async () => formContent && forms.getFormTranslation(formContent, langID);
@@ -829,6 +829,44 @@ function getFormTranslation(langID: number): (dispatch: Dispatch, getState: any)
   };
 }
 
+function duplicateForm(formID: number, title: string): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: (data: FormContent) => {
+          dispatch(setCurrentFormID(data.id));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => forms.duplicateForm(formID, title);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function copyForm(formID: number, siteID: number): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: () => {},
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => forms.copyForm(formID, siteID);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
 export {
   setSelectedTab,
   setFormContent,
@@ -856,4 +894,6 @@ export {
   createNewTranslation,
   getFormTranslation,
   setIsIATranslated,
+  duplicateForm,
+  copyForm,
 };

package/src/modules/Forms/FormList/FormItem/index.tsx

@@ -2,12 +2,12 @@ import React, { useState } from "react";
 import { connect } from "react-redux";
 
 import { CategoryCell, CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip } from "@ax/components";
-import { FormContent, FormLanguage, FormState, ICheck, ILanguage } from "@ax/types";
+import { FormContent, FormLanguage, FormState, ICheck, ILanguage, IRootState, ISite } from "@ax/types";
 import { formsActions } from "@ax/containers/Forms";
 import { appActions } from "@ax/containers/App";
 import { useModal } from "@ax/hooks";
 import { findObjectValue, getHumanLastModifiedDate } from "@ax/helpers";
-import { DeleteModal, UnPublishModal } from "../../atoms";
+import { CopyModal, DeleteModal, DuplicateModal, UnPublishModal } from "../../atoms";
 
 import * as S from "./style";
 
@@ -19,6 +19,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
     lang,
     featuredCategory,
     categoryColors,
+    currentSiteInfo,
     addCategoryColors,
     onChange,
     onClick,
@@ -27,6 +28,9 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
     updateFormState,
     createNewTranslation,
     setLanguage,
+    duplicateForm,
+    copyForm,
+    goToEditor,
   } = props;
 
   const { id, title, modified, state, dataLanguages, template } = form;
@@ -38,10 +42,15 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
   const categories = categoryObject?.map((cat) => cat.title) || [];
 
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+  const [duplicateTitle, setDuplicateTitle] = useState("");
+  const [site, setSite] = useState<number | null>(null);
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
+  const { isOpen: isDuplicateOpen, toggleModal: toggleDuplicateModal } = useModal();
+  const { isOpen: isCopyOpen, toggleModal: toggleCopyModal } = useModal();
 
   const isTranslated = dataLanguages.length > 1;
+  const isSiteView = !!currentSiteInfo;
 
   const handleClick = () => onClick(form.id);
 
@@ -111,6 +120,27 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
     </S.FlagsWrapper>
   );
 
+  const handleDuplicateForm = async () => {
+    const duplicated = await duplicateForm(form.id, duplicateTitle);
+    if (duplicated) {
+      goToEditor();
+    }
+    isDuplicateOpen && toggleDuplicateModal();
+  };
+
+  const handleCopyForm = async () => {
+    const copied = site ? await copyForm(form.id, site) : false;
+    if (copied) {
+      toggleToast("1 form copied to another site");
+      handleCloseCopyModal();
+    }
+  };
+
+  const handleCloseCopyModal = () => {
+    setSite(null);
+    isCopyOpen && toggleCopyModal();
+  };
+
   const unpublishForm = async () => {
     const isUpdated = await updateFormState(id, "inactive");
     if (isUpdated) {
@@ -140,6 +170,18 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
         };
 
   const menuOptions = [
+    {
+      label: "duplicate",
+      icon: "duplicate",
+      action: () => toggleDuplicateModal(),
+    },
+    isSiteView
+      ? {
+          label: "Copy form in another site",
+          icon: "copy",
+          action: toggleCopyModal,
+        }
+      : undefined,
     publishButton,
     {
       label: "delete",
@@ -162,6 +204,21 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 
   const secondaryUnpublishModalAction = { title: "Cancel", onClick: toggleUnpublishModal };
 
+  const mainDuplicateModalAction = {
+    title: "Duplicate form",
+    onClick: handleDuplicateForm,
+  };
+
+  const secondaryDuplicateModalAction = { title: "Cancel", onClick: toggleDuplicateModal };
+
+  const mainCopyModalAction = {
+    title: "Copy form",
+    onClick: handleCopyForm,
+    disabled: !site,
+  };
+
+  const secondaryCopyModalAction = { title: "Cancel", onClick: handleCloseCopyModal };
+
   const checkStatus = () => (state === "active" ? "active" : "offline");
   const getTooltip = () => (state === "active" ? "Live" : "Offline");
 
@@ -202,6 +259,22 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
         secondaryModalAction={secondaryUnpublishModalAction}
         title={title}
       />
+      <DuplicateModal
+        isOpen={isDuplicateOpen}
+        toggleModal={toggleDuplicateModal}
+        mainModalAction={mainDuplicateModalAction}
+        secondaryModalAction={secondaryDuplicateModalAction}
+        title={duplicateTitle}
+        handleChange={setDuplicateTitle}
+      />
+      <CopyModal
+        isOpen={isCopyOpen}
+        toggleModal={handleCloseCopyModal}
+        mainModalAction={mainCopyModalAction}
+        secondaryModalAction={secondaryCopyModalAction}
+        site={site}
+        setSite={setSite}
+      />
     </>
   );
 };
@@ -213,6 +286,7 @@ interface IFormItemProps {
   lang: { locale: string; id: number };
   featuredCategory?: { label: string; value: string };
   categoryColors: Record<string, string>;
+  currentSiteInfo: ISite | null;
   addCategoryColors(cats: string[]): void;
   onChange: (value: ICheck) => void;
   onClick: (id: number) => void;
@@ -221,13 +295,22 @@ interface IFormItemProps {
   updateFormState(formID: number | number[], state: FormState): Promise<boolean>;
   createNewTranslation(isNewTranslation: boolean): void;
   setLanguage(lang: { locale: string; id: number | null }): void;
+  duplicateForm(formID: number, title: string): Promise<boolean>;
+  copyForm(formID: number, siteID: number): Promise<boolean>;
+  goToEditor(): void;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  currentSiteInfo: state.sites.currentSiteInfo,
+});
+
 const mapDispatchToProps = {
   deleteForm: formsActions.deleteForm,
   updateFormState: formsActions.updateFormState,
   createNewTranslation: formsActions.createNewTranslation,
   setLanguage: appActions.setLanguage,
+  duplicateForm: formsActions.duplicateForm,
+  copyForm: formsActions.copyForm,
 };
 
-export default connect(null, mapDispatchToProps)(FormItem);
+export default connect(mapStateToProps, mapDispatchToProps)(FormItem);

package/src/modules/Forms/FormList/index.tsx

@@ -118,6 +118,8 @@ const FormList = (props: IUserListProps): JSX.Element => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
+  const goToEditor = () => setHistoryPush(`${BASE_URL}/editor`, true);
+
   const createNewForm = () => {
     const templateSchema = selectedTemplate ? selectedTemplate : Object.values(formTemplates)[0];
     addTemplate(templateSchema.component);
@@ -127,7 +129,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 
   const handleClick = (formID: number) => {
     setCurrentFormID(formID);
-    setHistoryPush(`${BASE_URL}/editor`, true);
+    goToEditor();
   };
 
   const addNewAction = () => (Object.keys(formTemplates).length > 1 ? toggleNewModal() : createNewForm());
@@ -308,6 +310,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
                         featuredCategory={featuredCategory}
                         categoryColors={categoryColors}
                         addCategoryColors={addCategoryColors}
+                        goToEditor={goToEditor}
                       />
                     );
                   })

package/src/modules/Forms/atoms.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 
 import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { Modal, FieldsBehavior, AsyncSelect } from "@ax/components";
 
 import * as S from "./style";
 
@@ -97,10 +97,71 @@ const UnPublishModal = (props: IUnpublishModal): JSX.Element => {
   );
 };
 
+const DuplicateModal = (props: IDuplicateModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, title, handleChange } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Duplicate form"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+      height={284}
+    >
+      <S.ModalContent>
+        <p>Please enter a new name for the duplicated form.</p>
+        <FieldsBehavior
+          fieldType="TextField"
+          name="title"
+          title="Form name"
+          mandatory={true}
+          value={title}
+          onChange={handleChange}
+          placeholder="Type a name for this form"
+        />
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+const CopyModal = (props: ICopyModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, setSite, site } = props;
+
+  const handleSelectChange = (value: string | number | null) => {
+    if (typeof value === "number") setSite(value);
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      size="S"
+      title="Copy form in another site"
+      mainAction={mainModalAction}
+      secondaryAction={secondaryModalAction}
+      overflow="visible"
+      height={278}
+    >
+      <S.ModalContent>
+        <p>
+          <strong>Select a site to copy this form. </strong>
+          <br />
+          You can only select sites with the same language as this form.
+        </p>
+        <S.SelectWrapper>
+          <AsyncSelect name="select" entity="sites" onChange={handleSelectChange} value={site} mandatory={true} />
+        </S.SelectWrapper>
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
 interface IDeleteModal extends IModal {
   isTranslated: boolean;
   deleteAllVersions: boolean;
-  setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
+  setDeleteAllVersions: Dispatch<SetStateAction<boolean>>;
   title?: string;
 }
 
@@ -108,4 +169,14 @@ interface IUnpublishModal extends IModal {
   title?: string;
 }
 
-export { DeleteModal, UnPublishModal };
+interface IDuplicateModal extends IModal {
+  title: string;
+  handleChange(title: string): void;
+}
+
+interface ICopyModal extends IModal {
+  setSite: Dispatch<SetStateAction<number | null>>;
+  site: number | null;
+}
+
+export { DeleteModal, UnPublishModal, DuplicateModal, CopyModal };

package/src/modules/Forms/style.tsx

@@ -8,4 +8,11 @@ const ModalContent = styled.div`
   }
 `;
 
-export { ModalContent };
+const SelectWrapper = styled.div`
+  & .react-select__control,
+  .react-select__menu {
+    min-width: 100%;
+  }
+`;
+
+export { ModalContent, SelectWrapper };

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

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 const StructuredDataWrapper = styled.div`
   display: flex;
+  flex-grow: 1;
 `;
 
 const TableListWrapper = styled.div`
@@ -9,6 +10,8 @@ const TableListWrapper = styled.div`
   width: 100%;
   height: calc(100vh - ${(p) => p.theme.spacing.xl});
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 `;
 
 const NotificationWrapper = styled.div`