@griddo/ax 10.4.22 → 10.4.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.4.22",
+  "version": "10.4.24",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -126,6 +126,7 @@
     "react-dev-utils": "^11.0.4",
     "react-dom": "*",
     "react-draft-wysiwyg": "^1.14.5",
+    "react-error-boundary": "^4.0.13",
     "react-frame-component": "^5.2.1",
     "react-froala-wysiwyg": "^3.2.7",
     "react-redux": "^7.2.8",
@@ -231,5 +232,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dcf2ff097694c07588c2fc14c0e5934d2d675220"
+  "gitHead": "63b4ccb1fb279a272dcc4b6d6050372e366a171e"
 }

package/public/img/icons/iconFile.svg

@@ -0,0 +1,6 @@
+<svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C8.79086 0 7 1.79086 7 4V77C7 79.2091 8.79086 81 11 81H62C64.2091 81 66 79.2091 66 77V21.5663C66 20.5593 65.6202 19.5894 64.9364 18.8502L48.6875 1.28383C47.9304 0.465349 46.8661 0 45.7511 0H11Z" fill="#8C57E3"/>
+<path d="M46.5 20.5V3L62.5 20.5H46.5Z" fill="white"/>
+<rect y="28" width="72" height="33" rx="5" fill="#8C57E3"/>
+<path d="M9.14098 54.5V34.1364H22.6239V37.6861H13.4464V42.5384H21.729V46.0881H13.4464V54.5H9.14098ZM29.8253 34.1364V54.5H25.5199V34.1364H29.8253ZM33.3675 54.5V34.1364H37.6729V50.9503H46.4031V54.5H33.3675ZM49.2543 54.5V34.1364H62.9759V37.6861H53.5597V42.5384H62.2699V46.0881H53.5597V50.9503H63.0156V54.5H49.2543Z" fill="white"/>
+</svg>

package/public/img/icons/iconVideo.svg

@@ -0,0 +1,5 @@
+<svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C8.79086 0 7 1.79086 7 4V77C7 79.2091 8.79086 81 11 81H62C64.2091 81 66 79.2091 66 77V21.5663C66 20.5593 65.6202 19.5894 64.9364 18.8502L48.6875 1.28383C47.9304 0.465349 46.8661 0 45.7511 0H11Z" fill="#10D5D5"/>
+<path d="M46.5 20.5V3L62.5 20.5H46.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36 30C24.96 30 16 38.96 16 50C16 61.04 24.96 70 36 70C47.04 70 56 61.04 56 50C56 38.96 47.04 30 36 30ZM32 59L44 50L32 41V59ZM20 50C20 58.82 27.18 66 36 66C44.82 66 52 58.82 52 50C52 41.18 44.82 34 36 34C27.18 34 20 41.18 20 50Z" fill="white"/>
+</svg>

package/public/img/icons/txt.svg

@@ -0,0 +1,5 @@
+<svg width="262" height="294" viewBox="0 0 262 294" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9257 283.111H225.037C227.041 283.111 228.666 281.486 228.666 279.481V76.2222H166.963V10.8889H39.9257C37.9211 10.8889 36.2961 12.5139 36.2961 14.5185V279.481C36.2961 281.486 37.9212 283.111 39.9257 283.111ZM39.9257 0C31.9074 0 25.4072 6.50015 25.4072 14.5185V279.481C25.4072 287.5 31.9074 294 39.9257 294H225.037C233.055 294 239.555 287.5 239.555 279.481V78.2778C239.555 74.6228 238.177 71.1022 235.695 68.4191L176.718 4.65983C173.97 1.68904 170.106 0 166.06 0H39.9257Z" fill="#066BC9"/>
+<rect y="101.63" width="261.333" height="119.778" rx="18.1481" fill="#066BC9"/>
+<path d="M30.0656 137.49V124.606H90.7691V137.49H68.1406V198.519H52.6941V137.49H30.0656ZM115.419 124.606L130.324 149.797H130.901L145.879 124.606H163.527L140.97 161.562L164.032 198.519H146.059L130.901 173.292H130.324L115.166 198.519H97.2653L120.399 161.562L97.6984 124.606H115.419ZM170.6 137.49V124.606H231.304V137.49H208.675V198.519H193.229V137.49H170.6Z" fill="white"/>
+</svg>

package/src/components/{Login/Circle → Circle}/style.tsx

@@ -13,7 +13,6 @@ const animation2 = keyframes`
 const animations = [animation1, animation2];
 const colors = ["#A950CF", "#FBE15C"];
 
-
 const Circle = styled.div<{ size: number; animation: number }>`
   position: absolute;
   width: ${(p) => `${p.size}px`};

package/src/components/ErrorPage/index.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import { Button, Circle, Icon } from "@ax/components";
+
+import * as S from "./style";
+
+const ErrorPage = (props: IProps): JSX.Element => {
+  const { type, history } = props;
+
+  const griddoLogo = "/img/logos/logoGriddoExtended@3x.svg";
+
+  const errorTexts: Record<string, IErrorText> = {
+    "404": {
+      title: "Page not found",
+      description: (
+        <>
+          Sorry, the page you are trying to access does not exist.
+          <br />
+          Do you want to try another one?
+        </>
+      ),
+      buttonText: "Go to sites",
+      buttonAction: () => history.push("/sites"),
+    },
+    "500": {
+      title: "Unexpected error",
+      description: (
+        <>
+          Sorry, we are working to fixing the problem.
+          <br />
+          Be back soon
+        </>
+      ),
+      buttonText: "Go back",
+      buttonAction: () => history.goBack(),
+    },
+    wrong: {
+      icon: "working",
+      title: "Something went wrong",
+      description: <>Try refreshing the page, or try again later</>,
+      buttonText: "Refresh page",
+      buttonAction: () => history.push("/logout"),
+    },
+    wrongEditor: {
+      icon: "working",
+      title: "Something went wrong",
+      description: <>Go back or try again later</>,
+      buttonText: "Go back",
+      buttonAction: () => history.goBack(),
+    },
+    forbidden: {
+      icon: "alert",
+      title: "Access Denied",
+      description: (
+        <>
+          You don&apos;t have the necessary permissions to access this section. Please contact your administrator if you{" "}
+          require access.
+        </>
+      ),
+      buttonText: "Go to sites",
+      buttonAction: () => history.push("/sites"),
+    },
+  };
+
+  return (
+    <S.Wrapper>
+      <S.BackgroundAnimation>
+        <Circle animation={1} />
+        <Circle animation={2} />
+        <S.Content>
+          <S.Logo src={griddoLogo} alt="Griddo Logo" />
+          {!errorTexts[type].icon && (
+            <S.ContentNumber>
+              <S.ErrorNumber>{type}</S.ErrorNumber>
+              <S.ErrorTitle>{errorTexts[type].title}</S.ErrorTitle>
+              <S.ErrorDescription>{errorTexts[type].description}</S.ErrorDescription>
+              <S.ErrorAction>
+                <Button className="button" type="button" onClick={errorTexts[type].buttonAction}>
+                  {errorTexts[type].buttonText}
+                </Button>
+              </S.ErrorAction>
+            </S.ContentNumber>
+          )}
+          {errorTexts[type].icon && (
+            <S.ContentWrong>
+              <S.IconWrapper>
+                <Icon name={errorTexts[type].icon || "working"} size="32" />
+              </S.IconWrapper>
+              <S.ErrorTitleWrong>{errorTexts[type].title}</S.ErrorTitleWrong>
+              <S.ErrorDescriptionWrong>{errorTexts[type].description}</S.ErrorDescriptionWrong>
+              <S.ErrorAction>
+                <Button className="button" type="button" onClick={errorTexts[type].buttonAction}>
+                  {errorTexts[type].buttonText}
+                </Button>
+              </S.ErrorAction>
+            </S.ContentWrong>
+          )}
+        </S.Content>
+      </S.BackgroundAnimation>
+    </S.Wrapper>
+  );
+};
+
+interface IErrorPateProps {
+  type: string;
+}
+
+interface IErrorText {
+  title: string;
+  icon?: string;
+  description: JSX.Element;
+  buttonText: string;
+  buttonAction: () => void;
+}
+
+type IProps = IErrorPateProps & RouteComponentProps;
+
+export default withRouter(ErrorPage);

package/src/components/ErrorPage/style.tsx

@@ -0,0 +1,116 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: ${(p) => p.theme.color.uiBackground04};
+`;
+
+const BackgroundAnimation = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 900px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  z-index: 1;
+`;
+
+const Logo = styled.img`
+  display: block;
+  max-height: 46px;
+  height: 100%;
+  width: auto;
+`;
+
+const ErrorNumber = styled.div`
+  font-size: 228px;
+  line-height: 228px;
+  letter-spacing: 32px;
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  text-align: center;
+`;
+
+const ErrorTitle = styled.div`
+  font-size: 24px;
+  line-height: 24px;
+  font-weight: 700;
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  text-align: center;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  text-transform: uppercase;
+  letter-spacing: 0.75px;
+`;
+
+const ErrorTitleWrong = styled.div`
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  text-align: center;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const ErrorDescription = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textMediumEmphasisInverse};
+  text-align: center;
+`;
+
+const ErrorDescriptionWrong = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  text-align: center;
+`;
+
+const ErrorAction = styled.div`
+  display: flex;
+  margin-top: ${(p) => p.theme.spacing.m};
+  justify-content: center;
+`;
+
+const ContentNumber = styled.div``;
+
+const ContentWrong = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(32, 34, 76, 0.6);
+  width: 390px;
+  align-items: center;
+  padding-top: ${(p) => `calc(${p.theme.spacing.m} + ${p.theme.spacing.xs})`};
+  padding-bottom: ${(p) => `calc(${p.theme.spacing.m} + ${p.theme.spacing.xs})`};
+  padding-left: ${(p) => p.theme.spacing.m};
+  padding-right: ${(p) => p.theme.spacing.m};
+  margin-top: ${(p) => `calc(${p.theme.spacing.m} + ${p.theme.spacing.s})`};
+`;
+
+const IconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.xl};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: 50%;
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+export {
+  Wrapper,
+  Content,
+  ErrorNumber,
+  ErrorTitle,
+  ErrorTitleWrong,
+  ErrorDescription,
+  ErrorDescriptionWrong,
+  Logo,
+  ErrorAction,
+  ContentNumber,
+  ContentWrong,
+  BackgroundAnimation,
+  IconWrapper,
+};

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

@@ -8,11 +8,14 @@ import { Icon, Modal, TextField, FileGallery } from "@ax/components";
 import * as S from "./style";
 
 const FileField = (props: IFileFieldProps): JSX.Element => {
-  const { disabled, value, site, onChange } = props;
+  const { disabled, value, site, onChange, allowedFormats } = props;
 
   const { isOpen, toggleModal } = useModal(false);
 
-  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv"];
+  const validFormats =
+    allowedFormats && allowedFormats.length
+      ? allowedFormats
+      : ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt"];
 
   const handleClick = () => {
     if (!disabled) {
@@ -113,6 +116,7 @@ export interface IFileFieldProps {
   onChange: (value: any) => void;
   disabled?: boolean;
   site: ISite | null;
+  allowedFormats?: string[];
 }
 
 export default FileField;

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

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useRef, useState } from "react";
-import { Icon, IconAction, Gallery, Modal, Image } from "@ax/components";
+import { Icon, IconAction, Gallery, Modal, Image, FieldsBehavior } from "@ax/components";
 
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
 import { IImage, ISite } from "@ax/types";
@@ -97,6 +97,14 @@ const ImageField = (props: IImageFieldProps) => {
     }
   };
 
+  const isImage = (object: IImage | null | string): object is IImage => {
+    return object !== null && typeof object === "object" && "url" in object;
+  };
+
+  const handleAltChange = (altValue: string) => {
+    isImage(value) && onChange({ ...value, alt: altValue });
+  };
+
   return (
     <>
       <S.FieldWrapper
@@ -150,6 +158,17 @@ const ImageField = (props: IImageFieldProps) => {
           <IconAction icon="delete" onClick={handleDelete} />
         </S.PreviewActions>
       </S.Preview>
+      {value && isImage(value) && (
+        <S.FieldsWrapper>
+          <FieldsBehavior
+            title="Alternative text"
+            name="alt"
+            fieldType="TextField"
+            value={value.alt || ""}
+            onChange={handleAltChange}
+          />
+        </S.FieldsWrapper>
+      )}
       <Modal isOpen={isOpen} hide={toggleModal} size="XL" title="Select image">
         <Gallery getImageSelected={getImageSelected} toggleModal={toggleModal} site={site} />
       </Modal>

package/src/components/Fields/ImageField/style.tsx

@@ -158,6 +158,10 @@ const ImageData = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
 `;
 
+const FieldsWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.s};
+`;
+
 export {
   FieldWrapper,
   Input,
@@ -173,4 +177,5 @@ export {
   PositionTitle,
   PositionGrid,
   Position,
+  FieldsWrapper,
 };

package/src/components/FileGallery/GalleryPanel/DetailPanel/index.tsx

@@ -2,9 +2,8 @@ import React, { memo, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { IRootState, IFile } from "@ax/types";
 import { Button, FieldsBehavior, IconAction } from "@ax/components";
-import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
+import { formatBytes, getFileIcon, getFormattedDateWithTimezone } from "@ax/helpers";
 import { fileDriveActions } from "@ax/containers/FileDrive";
-import { getFileIcon } from "../../utils";
 
 import * as S from "./style";
 

package/src/components/FileGallery/GalleryPanel/DetailPanel/style.tsx

@@ -83,6 +83,10 @@ const IconWrapper = styled.div`
   width: 42px;
   height: 40px;
   margin-bottom: ${(p) => p.theme.spacing.xs};
+  img {
+    height: 40px;
+    width: auto;
+  }
 `;
 
 const Label = styled.div`

package/src/components/FileGallery/GridItem/index.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { IFile } from "@ax/types";
-import { getFormattedDateWithTimezone, trimText } from "@ax/helpers";
+import { getFileIcon, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
 import { Tooltip } from "@ax/components";
-import { getFileIcon } from "../utils";
 
 import * as S from "./style";
 

package/src/components/FileGallery/GridItem/style.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components";
 const Wrapper = styled.div<{ isSelected: boolean }>`
   position: relative;
   background-color: ${(p) => p.theme.color.uiBackground02};
-  border: ${(p) => p.isSelected ? `2px solid ${p.theme.color.interactive01}` : `1px solid ${p.theme.color.uiLine}`};
-  border-radius: ${p => p.theme.radii.s};
+  border: ${(p) => (p.isSelected ? `2px solid ${p.theme.color.interactive01}` : `1px solid ${p.theme.color.uiLine}`)};
+  border-radius: ${(p) => p.theme.radii.s};
   display: flex;
   flex-direction: column;
   padding: ${(p) => p.theme.spacing.s};
@@ -23,8 +23,10 @@ const Header = styled.div`
 `;
 
 const IconWrapper = styled.div`
-  width: 42px;
   height: 40px;
+  img {
+    height: 40px;
+  }
 `;
 
 const Name = styled.div`

package/src/components/Icon/components/Working.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const SvgWorking = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      d="m19.166 21-5.229-5.42 1.512-1.559 5.254 5.42L19.166 21ZM6.032 21l-1.536-1.56 6.591-6.8-2.081-2.147-.595.614-1.09-1.125v1.943l-.595.639L4 9.752l.595-.64h1.908L5.388 8.015l2.75-2.812c.265-.273.554-.478.868-.614.314-.136.644-.205.991-.205s.677.069.991.205c.314.136.603.34.868.614L9.972 7.144l1.165 1.176-.62.614L12.6 11.08l2.454-2.53a2.048 2.048 0 0 1-.236-.64 3.734 3.734 0 0 1-.062-.69c0-.903.301-1.666.904-2.288C16.262 4.31 17.002 4 17.878 4a2.717 2.717 0 0 1 1.14.23l-2.23 2.3 1.734 1.816 2.23-2.3c.083.187.145.378.187.574.04.196.061.397.061.601 0 .903-.306 1.666-.917 2.288-.611.622-1.346.933-2.205.933a3.59 3.59 0 0 1-.694-.063 1.457 1.457 0 0 1-.595-.27L6.032 21Z"
+    />
+  </svg>
+);
+export default SvgWorking;

package/src/components/Icon/svgs/Working.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 d="M19.1662 21L13.9373 15.5805L15.449 14.0211L20.7026 19.4406L19.1662 21ZM6.03207 21L4.49563 19.4406L11.0875 12.6406L9.00583 10.4932L8.41108 11.1068L7.3207 9.98196V11.9248L6.72595 12.5639L4 9.75188L4.59475 9.11278H6.50292L5.38775 8.01353L8.13848 5.2015C8.40282 4.92882 8.69193 4.72431 9.00583 4.58797C9.31973 4.45163 9.65015 4.38346 9.99708 4.38346C10.344 4.38346 10.6744 4.45163 10.9883 4.58797C11.3022 4.72431 11.5914 4.92882 11.8557 5.2015L9.9723 7.14436L11.137 8.3203L10.5175 8.93383L12.5991 11.0812L15.0525 8.55038C14.9368 8.34586 14.8585 8.13283 14.8175 7.91128C14.7759 7.68972 14.7551 7.45965 14.7551 7.22105C14.7551 6.31779 15.0564 5.55497 15.6591 4.93257C16.2625 4.31086 17.0019 4 17.8775 4C18.0758 4 18.2658 4.01704 18.4475 4.05113C18.6293 4.08521 18.8192 4.14486 19.0175 4.23008L16.7872 6.53083L18.5219 8.34586L20.7522 6.04511C20.8348 6.23258 20.8969 6.42414 20.9385 6.61979C20.9795 6.81612 21 7.01654 21 7.22105C21 8.12431 20.6944 8.8868 20.0831 9.50851C19.4718 10.1309 18.7366 10.4421 17.8775 10.4421C17.6297 10.4421 17.3984 10.421 17.1837 10.3787C16.9689 10.3358 16.7706 10.2461 16.5889 10.1098L6.03207 21Z" fill="#5057FF"/>
+</svg>

package/src/components/Login/index.tsx

@@ -2,9 +2,8 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { IGlobalSettings } from "@ax/containers/App/reducer";
 import { useModal } from "@ax/hooks";
-import { Button, FieldsBehavior, ErrorToast } from "@ax/components";
+import { Button, FieldsBehavior, ErrorToast, Circle } from "@ax/components";
 import RecoveryModal from "./RecoveryModal";
-import Circle from "./Circle";
 
 import * as S from "./style";
 
@@ -113,6 +112,7 @@ const Login = (props: ILoginProps): JSX.Element => {
                 <S.Password>
                   <span
                     onClick={toggleModal}
+                    onKeyDown={toggleModal}
                     role="checkbox"
                     aria-checked="false"
                     tabIndex={0}

package/src/components/Login/style.tsx

@@ -39,7 +39,7 @@ const LeftWrapper = styled.div`
 `;
 
 const LoginWrapper = styled.div<{ width: number }>`
-  width: ${(p) => p.width > 0 ? `${p.width}px` : "100%"};
+  width: ${(p) => (p.width > 0 ? `${p.width}px` : "100%")};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -53,7 +53,7 @@ const LoginWrapper = styled.div<{ width: number }>`
 `;
 
 const RightWrapper = styled.div`
-  background-color: #001B3C;
+  background-color: #001b3c;
   position: relative;
   width: 55%;
   height: 100%;
@@ -126,7 +126,7 @@ const Secuoyas = styled.div<{ width: number }>`
   position: absolute;
   display: flex;
   color: ${(p) => p.theme.color.textMediumEmphasisInverse};
-  width: ${(p) => p.width > 0 ? `${p.width}px` : "100%"};
+  width: ${(p) => (p.width > 0 ? `${p.width}px` : "100%")};
   justify-content: center;
   align-items: center;
   left: 0;

package/src/components/index.tsx

@@ -62,11 +62,13 @@ import BrowserContent from "./BrowserContent";
 import BulkSelectionOptions from "./BulkSelectionOptions";
 import Button from "./Button";
 import CategoryCell from "./CategoryCell";
+import Circle from "./Circle";
 import ConfigPanel from "./ConfigPanel";
 import DragAndDrop from "./DragAndDrop";
 import ElementsTooltip from "./ElementsTooltip";
 import EmptyState from "./EmptyState";
 import ErrorCenter from "./ErrorCenter";
+import ErrorPage from "./ErrorPage";
 import ErrorToast from "./ErrorToast";
 import FieldContainer from "./FieldContainer";
 import FieldsBehavior from "./FieldsBehavior";
@@ -171,11 +173,13 @@ export {
   BulkSelectionOptions,
   Button,
   CategoryCell,
+  Circle,
   ConfigPanel,
   DragAndDrop,
   ElementsTooltip,
   EmptyState,
   ErrorCenter,
+  ErrorPage,
   ErrorToast,
   FieldContainer,
   FieldsBehavior,

package/src/containers/App/actions.tsx

@@ -9,7 +9,6 @@ import history from "../../routes/history";
 
 import {
   SET_ERROR,
-  RESET_ERROR,
   SET_IS_LOADING,
   SET_IS_SAVING,
   IS_LOGGING_IN,
@@ -107,7 +106,7 @@ function setError(error: IError): ISetErrorAction {
 
 function resetError(): ISetErrorAction {
   (window as any).handleErrorClick = undefined;
-  return { type: RESET_ERROR, payload: { code: undefined, text: "" } };
+  return { type: SET_ERROR, payload: { code: undefined, text: "" } };
 }
 
 function setSessionStartedAt(sessionStartedAt: Date): ISetSessionStartedAtAction {
@@ -129,18 +128,22 @@ function handleError(response: any, isMultiple = false, msg?: string): (dispatch
       btnAction,
     } = response;
 
-    const firstMsg = Array.isArray(message) && message[0] ? message[0].error : message || text;
-
-    const error = {
-      code,
-      text: msg ? msg : firstMsg,
-      btnText,
-      actionsBelow,
-      btnAction,
-      subErrors: isMultiple ? message : [],
-    };
-
-    dispatch(setError(error));
+    if (code === 500) {
+      setHistoryPush("/500")(dispatch);
+    } else {
+      const firstMsg = Array.isArray(message) && message[0] ? message[0].error : message || text;
+
+      const error = {
+        code,
+        text: msg ? msg : firstMsg,
+        btnText,
+        actionsBelow,
+        btnAction,
+        subErrors: isMultiple ? message : [],
+      };
+
+      dispatch(setError(error));
+    }
   };
 }
 
@@ -177,9 +180,9 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
       case undefined: {
         const error = {
           data: {
-            code: 500,
+            code: 503,
             message: "An error has occurred. Please contact your system administrator.",
-          }
+          },
         };
         handleError(error)(dispatch);
         return false;

package/src/containers/App/constants.tsx

@@ -1,7 +1,6 @@
 const NAME = "app";
 
 const SET_ERROR = `${NAME}/SET_ERROR`;
-const RESET_ERROR = `${NAME}/RESET_ERROR`;
 const SET_IS_LOADING = `${NAME}/SET_IS_LOADING`;
 const SET_IS_SAVING = `${NAME}/SET_IS_SAVING`;
 const SET_TOKEN = `${NAME}/SET_TOKEN`;
@@ -16,7 +15,6 @@ const SET_HAS_ANIMATION = `${NAME}/SET_HAS_ANIMATION`;
 
 export {
   SET_ERROR,
-  RESET_ERROR,
   SET_IS_LOADING,
   SET_IS_SAVING,
   SET_TOKEN,

package/src/containers/App/reducer.tsx

@@ -1,7 +1,6 @@
 import { REHYDRATE } from "redux-persist/lib/constants";
 import {
   SET_ERROR,
-  RESET_ERROR,
   SET_IS_LOADING,
   SET_IS_SAVING,
   SET_TOKEN,
@@ -105,7 +104,6 @@ export function reducer(state = initialState, action: any): IAppState {
     case SET_HAS_ANIMATION:
       return { ...state, ...action.payload };
     case SET_ERROR:
-    case RESET_ERROR:
       return { ...state, error: { ...action.payload } };
     default:
       return state;

package/src/containers/Navigation/Defaults/actions.tsx

@@ -52,6 +52,7 @@ import {
   SET_SELECTED_PARENT,
   SET_COPY_MODULE,
   SET_NAV_PAGES,
+  RESET_DEFAULTS_STORE,
 } from "./constants";
 
 import {
@@ -67,6 +68,7 @@ import {
   ISetSelectedParent,
   ISetCopyModule,
   ISetNavPages,
+  IResetDefaultsStore,
 } from "./interfaces";
 
 const { setIsLoading } = appActions;
@@ -135,6 +137,10 @@ function setNavPages(navigationPages: INavPages): ISetNavPages {
   return { type: SET_NAV_PAGES, payload: { navigationPages } };
 }
 
+function resetDefaultsStore(): IResetDefaultsStore {
+  return { type: RESET_DEFAULTS_STORE };
+}
+
 // API RELATED FUNCTIONS
 
 function getHeaders(params: any): (dispatch: Dispatch, getState: any) => Promise<void> {
@@ -827,19 +833,9 @@ function setSelectedTab(tab: string): (dispatch: Dispatch) => Promise<void> {
 function resetDefaultsValues(): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
-      dispatch(setEditorContent(null));
-      dispatch(setBreadcrumb([]));
-      dispatch(setSchema({}));
-      dispatch(setSelectedDefaultContent({}));
-      dispatch(setSelectedEditorID(0));
-      dispatch(setTab("content"));
-      dispatch(setHeader(null));
-      dispatch(setFooter(null));
-      dispatch(setCurrentNavigationLanguages([]));
-      dispatch(setIsNewTranslation(false));
-      dispatch(setCurrentDefaultsContent([]));
+      dispatch(resetDefaultsStore());
     } catch (e) {
-      console.log("Error", e); //TODO
+      console.log("Error", e);
     }
   };
 }