@griddo/ax 11.7.13 → 11.8.0-rc.1

package/src/containers/StructuredData/actions.tsx

@@ -49,12 +49,12 @@ import {
   IStructuredDataContent,
   IGetStructuredDataParams,
   IErrorItem,
-  IStructuredDataQueryValues,
   IStructuredDataCategory,
   ICategoryGroupParams,
   IRootState,
   IOrderCategoryParams,
   IExportDataParams,
+  IQueryValue,
 } from "@ax/types";
 import { structuredData } from "@ax/api";
 import { setTotalItems } from "@ax/containers/Sites/actions";
@@ -125,7 +125,7 @@ function setValidated(validated: boolean): ISetValidated {
   return { type: SET_VALIDATED, payload: { validated } };
 }
 
-function setContentFilters(contentFilters: Record<string, IStructuredDataQueryValues> | null): ISetContentFilters {
+function setContentFilters(contentFilters: Record<string, Record<string, IQueryValue[]>> | null): ISetContentFilters {
   return { type: SET_CONTENT_FILTERS, payload: { contentFilters } };
 }
 
@@ -435,7 +435,9 @@ function deleteStructuredDataContent(
   };
 }
 
-function restoreStructuredDataContent(dataID: number | number[]): (dispatch: Dispatch, getState: any) => Promise<void> {
+function restoreStructuredDataContent(
+  dataID: number | number[]
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       dispatch(setIsLoading(true));
@@ -466,9 +468,10 @@ function restoreStructuredDataContent(dataID: number | number[]): (dispatch: Dis
           ? structuredData.restoreDataContentBulk(dataID)
           : structuredData.restoreDataContent(dataID);
 
-      await handleRequest(callback, responseActions, [])(dispatch);
+      return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
       console.log(e);
+      return false;
     }
   };
 }

package/src/containers/StructuredData/interfaces.tsx

@@ -17,13 +17,7 @@ import {
   SET_CURRENT_SEARCH,
 } from "./constants";
 
-import {
-  IStructuredData,
-  IStructuredDataContent,
-  IErrorItem,
-  IStructuredDataQueryValues,
-  IStructuredDataCategory,
-} from "@ax/types";
+import { IStructuredData, IStructuredDataContent, IErrorItem, IStructuredDataCategory, IQueryValue } from "@ax/types";
 
 export interface ISetCategories {
   type: typeof SET_CATEGORIES;
@@ -91,7 +85,7 @@ export interface ISetValidated {
 
 export interface ISetContentFilters {
   type: typeof SET_CONTENT_FILTERS;
-  payload: { contentFilters: Record<string, IStructuredDataQueryValues> | null };
+  payload: { contentFilters: Record<string, Record<string, IQueryValue[]>> | null };
 }
 
 export interface ISetIsIATranslated {

package/src/containers/StructuredData/reducer.tsx

@@ -1,10 +1,4 @@
-import {
-  IStructuredData,
-  IStructuredDataContent,
-  IErrorItem,
-  IStructuredDataQueryValues,
-  IStructuredDataCategory,
-} from "@ax/types";
+import { IStructuredData, IStructuredDataContent, IErrorItem, IStructuredDataCategory, IQueryValue } from "@ax/types";
 import {
   SET_CATEGORIES,
   SET_STRUCTURED_DATA,
@@ -41,7 +35,7 @@ export interface IStructuredDataState {
   schemaVersion: string;
   errors: IErrorItem[];
   validated: boolean;
-  contentFilters: Record<string, IStructuredDataQueryValues> | null;
+  contentFilters: Record<string, Record<string, IQueryValue[]>> | null;
   isIATranslated: boolean;
   currentSearch: string;
 }

package/src/containers/Users/actions.tsx

@@ -68,7 +68,7 @@ function getUser(
   id: string | number,
   token?: string,
   hasLoading = true
-): (dispatch: Dispatch, getState: any) => Promise<void> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const callback = async () => users.getUser(id, token);
@@ -102,7 +102,7 @@ function updateUser(
   data: IUser,
   isProfile: boolean,
   isList?: boolean
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const {
@@ -174,7 +174,7 @@ function createUser(data: { name: string; email: string }): (dispatch: Dispatch)
 function createPassword(
   id: string,
   params: ICreatePasswordParams
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const callback = async () => global.createPassword(id, params);
@@ -195,7 +195,7 @@ function createPassword(
   };
 }
 
-function deleteUser(id: number | number[]): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function deleteUser(id: number | number[]): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const {
@@ -223,28 +223,31 @@ function deleteUser(id: number | number[]): (dispatch: Dispatch, getState: any)
 
       return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
       return false;
     }
   };
 }
 
-function resetUserData(): (dispatch: Dispatch, getState: any) => void {
-  return (dispatch, getState) => {
-    const {
-      users: { userData },
-    } = getState();
+function resendInvitation(id: number): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: () => null,
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
 
-    userData &&
-      Object.keys(userData).forEach((key: string) => {
-        userData[key] = "";
-      });
+      const callback = async () => users.resendInvitation(id);
 
-    dispatch(setUserForm(userData));
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
   };
 }
 
-function resendInvitation(id: number): (dispatch: Dispatch) => Promise<boolean> {
+function removeUserFromSite(userID: number, siteID: number): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
       const responseActions = {
@@ -252,11 +255,11 @@ function resendInvitation(id: number): (dispatch: Dispatch) => Promise<boolean>
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      const callback = async () => users.resendInvitation(id);
+      const callback = async () => users.removeUserFromSite(userID, siteID);
 
       return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
       return false;
     }
   };
@@ -358,7 +361,6 @@ export {
   getUser,
   setUserForm,
   createUser,
-  resetUserData,
   setCurrentUser,
   deleteUser,
   resendInvitation,
@@ -366,4 +368,5 @@ export {
   activateRoles,
   createPassword,
   getUserCurrentPermissions,
+  removeUserFromSite,
 };

package/src/modules/ActivityLog/DetailModal/index.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { format } from "date-fns";
+
+import { LogActivityDTO } from "@griddo/api-types";
+
+import { IModal } from "@ax/types";
+import { Button, Modal } from "@ax/components";
+import { eventKey } from "../constants";
+
+import * as S from "./style";
+
+const DetailModal = (props: IDetailModalProps) => {
+  const { isOpen, toggleModal, restorePage, onClick, onKeyDown, itemLog } = props;
+
+  const { id, created, eventType, user, contentType, content } = itemLog;
+
+  const isDeleteEventWithRestore =
+    eventType && eventType.internal_key ? Object.values(eventKey).includes(eventType.internal_key) : false;
+
+  const isDeleteEvent = eventType?.internal_key ? eventType.internal_key.includes("DELETED") : false;
+
+  const getButtonText = (type: string | undefined | null) => {
+    if (!type) return "";
+
+    switch (type) {
+      case eventKey.DELETED_PAGE:
+      case eventKey.DELETED_CONTENT_TYPE_PAGE:
+        return "Restore page";
+      case eventKey.DELETED_FOOTER:
+        return "Restore footer";
+      case eventKey.DELETED_HEADER:
+        return "Restore header";
+      case eventKey.DELETED_CATEGORY:
+        return "Restore category";
+      case eventKey.DELETED_CONTENT_TYPE:
+        return "Restore content type";
+      default:
+        return "Restore";
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} hide={toggleModal} title="Log detail" size="S" height={465}>
+      <S.ModalContent>
+        <S.ItemRow>
+          <S.ItemTitle>Action ID</S.ItemTitle>
+          <S.ItemContent>{id}</S.ItemContent>
+        </S.ItemRow>
+        <S.ItemRow>
+          <S.ItemTitle>Event</S.ItemTitle>
+          <S.ItemContent>
+            <S.Event>
+              <span>{eventType?.name || ""}</span>
+              <S.EventContent
+                onClick={!isDeleteEvent ? onClick : undefined}
+                role="button"
+                tabIndex={0}
+                onKeyDown={!isDeleteEvent ? onKeyDown : undefined}
+              >
+                {content?.title || contentType?.title || ""}
+              </S.EventContent>
+            </S.Event>
+          </S.ItemContent>
+        </S.ItemRow>
+        <S.ItemRow>
+          <S.ItemTitle>Date</S.ItemTitle>
+          <S.ItemContent>{`${format(new Date(created.date), "MMMM d, yyyy")} ${created.hour}`}</S.ItemContent>
+        </S.ItemRow>
+        <S.ItemRow>
+          <S.ItemTitle>User</S.ItemTitle>
+          <S.ItemContent>{user.name}</S.ItemContent>
+        </S.ItemRow>
+        <S.ItemRow>
+          <S.ItemTitle>Email</S.ItemTitle>
+          <S.ItemContent>{user.email}</S.ItemContent>
+        </S.ItemRow>
+        <S.ItemRow>
+          <S.ItemTitle>Role</S.ItemTitle>
+          <S.ItemContent>{user.role}</S.ItemContent>
+        </S.ItemRow>
+        <S.ItemRow>
+          <S.ItemTitle>IP Address</S.ItemTitle>
+          <S.ItemContent>{user.ip}</S.ItemContent>
+        </S.ItemRow>
+        {/*<S.ItemRow removeBorder={true}>
+          <S.ItemTitle>Country</S.ItemTitle>
+          <S.ItemContent>{user.country}</S.ItemContent>
+        </S.ItemRow>*/}
+        {eventType && isDeleteEventWithRestore && (
+          <S.ActionWrapper>
+            <Button type="button" buttonStyle="line" icon="back" onClick={restorePage}>
+              {getButtonText(eventType.internal_key)}
+            </Button>
+          </S.ActionWrapper>
+        )}
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+interface IDetailModalProps extends IModal {
+  itemLog: LogActivityDTO;
+  restorePage(): void;
+  onClick(e: React.MouseEvent<HTMLDivElement>): void;
+  onKeyDown(): void;
+}
+
+export default DetailModal;

package/src/modules/ActivityLog/DetailModal/style.tsx

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+`;
+
+const ItemRow = styled.div<{ removeBorder?: boolean }>`
+  display: flex;
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  height: ${(p) => p.theme.spacing.l};
+  border-bottom: ${(p) => (p.removeBorder ? "none" : `1px solid ${p.theme.color.uiLine}`)};
+`;
+
+const ItemTitle = styled.div`
+  display: flex;
+  font-weight: 600;
+  align-items: center;
+  width: 110px;
+  flex-shrink: 0;
+`;
+
+const ItemContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Event = styled.div`
+  align-items: center;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+`;
+
+const EventContent = styled.span`
+  margin-left: ${(p) => p.theme.spacing.xxs};
+  color: ${(p) => p.theme.colors.interactive01};
+  flex-basis: 100%;
+`;
+
+const ActionWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  button {
+    background-color: transparent;
+    width: 100%;
+    svg {
+      left: 0;
+    }
+  }
+`;
+
+export { ModalContent, ItemRow, ItemTitle, ItemContent, ActionWrapper, Event, EventContent };

package/src/modules/ActivityLog/DownloadModal/index.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+
+import { IModal } from "@ax/types";
+import { FieldsBehavior, Modal } from "@ax/components";
+import { IDownloadFormState } from "..";
+
+import * as S from "./style";
+
+const DownloadModal = (props: IDownloadModalProps) => {
+  const { isOpen, toggleModal, mainModalAction, form, setForm } = props;
+
+  const setDateRange = (dateRange: string) => setForm((state) => ({ ...state, dateRange }));
+  const setStartDate = (startDate: string) => setForm((state) => ({ ...state, startDate }));
+  const setEndDate = (endDate: string) => setForm((state) => ({ ...state, endDate }));
+  const setStartTime = (startTime: string) => setForm((state) => ({ ...state, startTime }));
+  const setMaxEvents = (maxEvents: number) => setForm((state) => ({ ...state, maxEvents }));
+  const setFormat = (format: string) => setForm((state) => ({ ...state, format }));
+
+  const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
+  const rangeOptions = [
+    { name: "7days", value: "7", title: "Last 7 days" },
+    { name: "30days", value: "30", title: "Last 30 days" },
+    { name: "custom", value: "custom", title: "Custom date" },
+  ];
+
+  const formatOptions = [
+    { name: "csv", value: "csv", title: ".csv" },
+    { name: "xlsx", value: "xlsx", title: ".xlsx" },
+  ];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Download User activity log"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+      height={573}
+    >
+      <S.ModalContent>
+        <FieldsBehavior
+          title="Range"
+          name="dateRange"
+          fieldType="RadioGroup"
+          options={rangeOptions}
+          value={form.dateRange}
+          onChange={setDateRange}
+        />
+        {form.dateRange === "custom" && (
+          <S.CustomDateWrapper>
+            <FieldsBehavior
+              title="Start date"
+              name="startDate"
+              fieldType="DateField"
+              value={form.startDate}
+              onChange={setStartDate}
+              pastDate={true}
+            />
+            <FieldsBehavior
+              title="End date"
+              name="endDate"
+              fieldType="DateField"
+              value={form.endDate}
+              onChange={setEndDate}
+              pastDate={true}
+            />
+          </S.CustomDateWrapper>
+        )}
+        <FieldsBehavior
+          title="Start time"
+          name="startTime"
+          fieldType="TimeField"
+          value={form.startTime}
+          onChange={setStartTime}
+          helptext="12 hour time format"
+        />
+        <FieldsBehavior
+          title="Max Events number"
+          name="maxEvents"
+          fieldType="NumberField"
+          value={form.maxEvents}
+          onChange={setMaxEvents}
+        />
+        <FieldsBehavior
+          title="Format"
+          name="format"
+          fieldType="RadioGroup"
+          options={formatOptions}
+          value={form.format}
+          onChange={setFormat}
+        />
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+interface IDownloadModalProps extends IModal {
+  form: IDownloadFormState;
+  setForm: React.Dispatch<React.SetStateAction<IDownloadFormState>>;
+}
+
+export default DownloadModal;

package/src/modules/ActivityLog/DownloadModal/style.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.l} ${p.theme.spacing.m}`};
+`;
+
+const CustomDateWrapper = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.m};
+`;
+
+export { ModalContent, CustomDateWrapper };

package/src/modules/ActivityLog/ItemGroup/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { dateToString } from "@ax/helpers";
+
+import * as S from "./style";
+
+const ItemGroup = (props: IItemGroupProps) => {
+  const { date, children, count } = props;
+  const dateTitle = dateToString(new Date(date), "MMM d yyyy");
+
+  return (
+    <S.Wrapper>
+      <S.Header>
+        <S.DateWrapper>{dateTitle}</S.DateWrapper>
+        <S.CounterWrapper>{count} events</S.CounterWrapper>
+      </S.Header>
+      <S.ItemList>{children}</S.ItemList>
+    </S.Wrapper>
+  );
+};
+
+interface IItemGroupProps {
+  children: JSX.Element[];
+  date: string;
+  count: number;
+}
+
+export default ItemGroup;

package/src/modules/ActivityLog/ItemGroup/style.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  border-radius: ${(p) => p.theme.radii.m};
+  padding: ${(p) => `0 ${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.xs}`};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const Header = styled.div`
+  position: sticky;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  top: 34px;
+  display: flex;
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  align-items: center;
+  padding: ${(p) => `${p.theme.spacing.xs} 0`};
+  z-index: 1;
+`;
+
+const DateWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+`;
+
+const CounterWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  margin-left: auto;
+`;
+
+const ItemList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.spacing.xxs};
+`;
+
+export { Wrapper, Header, DateWrapper, CounterWrapper, ItemList };