@griddo/ax 1.72.11 → 1.73.2

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

@@ -1,9 +1,10 @@
 import React, { useReducer, useEffect, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import { getStructuredDataTitle, getThumbnailProps, isGlobalStructuredData } from "@ax/helpers";
+import { IRootState, IStructuredData } from "@ax/types";
+import { getThumbnailProps } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
+import { structuredDataActions } from "@ax/containers/StructuredData";
 import { SecondaryActionButton, MainActionButton } from "./../atoms";
 
 import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
@@ -21,7 +22,9 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     theme,
     mainAction,
     secondaryAction,
+    structuredData,
   } = props;
+
   const filterOptions = (value: string, objKey: string) => values.filter((item: any) => item[objKey] === value);
   const filterOptionsByDataPack = (value: string) => {
     return values.filter((item: any) => {
@@ -89,13 +92,18 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     const { value } = item;
     setType(value);
     filteredOptionsByDataPack = filterOptionsByDataPack(value);
+
     filteredOptionsByDataPack.forEach((option: any) => {
-      const { type } = option;
-      const isGlobal = value !== "static" && type && isGlobalStructuredData(type.toUpperCase());
-      if (isGlobal) {
+      const { name } = option;
+
+      const currentGlobalStructuredData = structuredData.global.find((data: any) =>
+        data.schema.templates?.includes(name)
+      );
+
+      if (currentGlobalStructuredData) {
         filteredOptionsByDataPack = filteredOptionsByDataPack.map((option: any) => {
           if (option.mode !== "detail") return option;
-          const title = `Get ${getStructuredDataTitle(type?.toUpperCase())} from Global`;
+          const title = `Get ${currentGlobalStructuredData.title} from Global`;
           return { ...option, title };
         });
         const globalOptionIdx = filteredOptionsByDataPack.findIndex((option: any) => option.mode === "detail");
@@ -165,10 +173,15 @@ interface IOptionTableProps {
   theme: string;
   mainAction: IAction;
   secondaryAction: IAction;
+  structuredData: { global: IStructuredData[]; site: IStructuredData[] };
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  structuredData: state.structuredData.structuredData,
+});
+
 const mapDispatchToProps = {
   setIsStructuredData: structuredDataActions.setIsActive,
 };
 
-export default connect(null, mapDispatchToProps)(OptionTable);
+export default connect(mapStateToProps, mapDispatchToProps)(OptionTable);

package/src/modules/Content/index.tsx

@@ -99,6 +99,7 @@ const Content = (props: IProps): JSX.Element => {
     skipReviewOnPublish,
     setContentFilters,
     contentFilters,
+    deleteAndRemoveFromSiteBulk,
   } = props;
 
   const itemsPerPage = 50;
@@ -349,13 +350,7 @@ const Content = (props: IProps): JSX.Element => {
       .filter((page: IPage) => pageIds.includes(page.id) && page.origin !== "GLOBAL")
       .map((page: IPage) => page.id);
 
-    let deleted = false;
-    if (filteredPageIds.length > 0) {
-      deleted = await deleteBulk(filteredPageIds);
-    }
-    if (globalPageIds.length > 0) {
-      deleted = await removePageFromSite(globalPageIds, false);
-    }
+    const deleted = await deleteAndRemoveFromSiteBulk(filteredPageIds, globalPageIds);
 
     if (deleted) {
       setDeletedItem(pageIds);
@@ -826,6 +821,7 @@ interface IDispatchProps {
   resetCurrentSiteErrorPages: () => Promise<void>;
   getSitesByLang(language: number): Promise<void>;
   setContentFilters(contentFilters: Record<string, string> | null): void;
+  deleteAndRemoveFromSiteBulk(pageIds: number[], globalPageIds: number[]): Promise<boolean>;
 }
 
 const mapDispatchToProps = {
@@ -859,6 +855,7 @@ const mapDispatchToProps = {
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
   getSitesByLang: sitesActions.getSitesByLang,
   setContentFilters: sitesActions.setContentFilters,
+  deleteAndRemoveFromSiteBulk: sitesActions.deleteAndRemoveFromSiteBulk,
 };
 
 interface IPagesProps {

package/src/modules/Content/utils.tsx

@@ -15,14 +15,17 @@ const getTemplatesFilters = (activatedDataPacks: any) => {
     if (isActivated) {
       !dataPacks
         ? filters.push({ ...type })
-        : dataPacks.map((datapack: string) =>
-            filters.push({
-              label: datapack.toLowerCase(),
-              value: datapack.toLowerCase(),
-              type: type.value,
+        : dataPacks.map((dataPack: string) => {
+            const currentDataPack = activatedDataPacks.find(
+              (activatedDataPack: any) => dataPack === activatedDataPack.id
+            );
+
+            return filters.push({
+              label: currentDataPack.title,
+              value: currentDataPack.id,
               mode: type.mode,
-            })
-          );
+            });
+          });
     }
   });
 
@@ -75,13 +78,15 @@ const getOptionFilters = (options: any, activatedDataPacks: any) => {
   const templateFilters = getTemplatesFilters(activatedDataPacks);
 
   const mappedOptions = pureOptions.flatMap((option: any) =>
-    option.dataPacks.map((dataPack: string) => ({
-      label: dataPack.toLowerCase(),
-      value: dataPack.toLowerCase(),
-      isData: true,
-    }))
+    option.dataPacks.map((dataPack: string) => {
+      const currentDataPack = activatedDataPacks.find((activatedDataPack: any) => dataPack === activatedDataPack.id);
+      return {
+        label: currentDataPack.title,
+        value: currentDataPack.id,
+        isData: true,
+      };
+    })
   );
-
   const filters = [...templateFilters, ...mappedOptions];
   const uniqueFilters = [...new Map(filters.map((item: any) => [item.value, item])).values()];
   const sortedUniqueFilters = uniqueFilters.sort((a, b) => a.label.localeCompare(b.label));

package/src/modules/FramePreview/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import { connect } from "react-redux";
 
 import { getDefaultTheme } from "@ax/helpers";
@@ -11,31 +11,56 @@ import { useURLSearchParam } from "@ax/hooks";
 import * as S from "./style";
 
 const FramePreview = (props: IProps) => {
-  const { content, socials, cloudinaryName, isLoading, currentSiteInfo, siteLangs, globalLangs, setSelectedContent } =
-    props;
+  const {
+    content,
+    socials,
+    cloudinaryName,
+    isLoading,
+    currentSiteInfo,
+    siteLangs,
+    globalLangs,
+    setSelectedContent,
+    setEditorContent,
+  } = props;
 
-  const [state, setState] = useState(content);
   const isPreview = useURLSearchParam("preview");
   const isDisabled = useURLSearchParam("disabled");
 
-  const onMessageReceivedFromOutside = useCallback((ev: MessageEvent<{ type: string; message: string }>) => {
+  const onMessageReceivedFromOutside = useCallback(
+    (ev: MessageEvent<{ type: string; message: Record<string, unknown> }>) => {
+      if (typeof ev.data !== "object") return;
+      if (!ev.data.type) return;
+      if (ev.data.type !== "content-update") return;
+      if (!ev.data.message) return;
+      setEditorContent(ev.data.message);
+    },
+    []
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", onMessageReceivedFromOutside);
+    return () => window.removeEventListener("message", onMessageReceivedFromOutside);
+  }, [onMessageReceivedFromOutside]);
+
+  const onMessageReceivedFromPanel = useCallback((ev: MessageEvent<{ type: string; message: string }>) => {
     if (typeof ev.data !== "object") return;
     if (!ev.data.type) return;
-    if (ev.data.type !== "content-update") return;
+    if (ev.data.type !== "selected-content") return;
     if (!ev.data.message) return;
-    setState(ev.data.message);
+    setSelectedContent(parseInt(ev.data.message));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
-    window.addEventListener("message", onMessageReceivedFromOutside);
-    return () => window.removeEventListener("message", onMessageReceivedFromOutside);
-  }, [onMessageReceivedFromOutside]);
+    window.addEventListener("message", onMessageReceivedFromPanel);
+    return () => window.removeEventListener("message", onMessageReceivedFromPanel);
+  }, [onMessageReceivedFromPanel]);
 
   const {
     editorContent: { canonicalSite, language, pageLanguages },
     header,
     footer,
-  } = state;
+  } = content;
 
   document.body.classList.add("preview");
 
@@ -81,7 +106,7 @@ const FramePreview = (props: IProps) => {
         selectEditorID={selectEditorID}
         siteID={siteID}
         isPage={true}
-        content={state.editorContent}
+        content={content.editorContent}
         header={currentSiteInfo && header}
         footer={currentSiteInfo && footer}
         languageID={language}
@@ -100,6 +125,7 @@ interface IProps {
   globalLangs: ILanguage[];
   isLoading: boolean;
   setSelectedContent(editorID: number): void;
+  setEditorContent(editorContent: Record<string, unknown>): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -114,6 +140,7 @@ const mapStateToProps = (state: IRootState) => ({
 
 const mapDispatchToProps = {
   setSelectedContent: pageEditorActions.setSelectedContent,
+  setEditorContent: pageEditorActions.setEditorContent,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(FramePreview);

package/src/modules/GlobalEditor/index.tsx

@@ -33,7 +33,6 @@ const GlobalEditor = (props: IProps) => {
     errors,
     setSelectedContent,
     setTab,
-    validated,
     pageEditor: { editorContent },
     sitePageID,
     setHistoryPush,
@@ -60,6 +59,10 @@ const GlobalEditor = (props: IProps) => {
   const isLivePageChanged = editorContent.editorContent && editorContent.editorContent.liveChanged;
   const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
 
+  const errorNotificationText =
+    "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
+  const validatedNotificationText = "Everything seems ok, you can publish the page.";
+
   const theme = getDefaultTheme();
 
   useEffect(() => {
@@ -141,6 +144,8 @@ const GlobalEditor = (props: IProps) => {
               resetDirty();
             }
           });
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
@@ -159,6 +164,8 @@ const GlobalEditor = (props: IProps) => {
           resetDirty();
         }
       });
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
@@ -174,9 +181,14 @@ const GlobalEditor = (props: IProps) => {
     updatePageStatus([pageID], pageStatus.OFFLINE);
   };
 
-  const reviewPage = () => {
+  const reviewPage = async () => {
     const { validatePage } = props;
-    validatePage(false);
+    const validated = await validatePage(false);
+    if (validated) {
+      setNotification({ text: validatedNotificationText, type: "success" });
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
+    }
   };
 
   const handlePublishDraft = async () => {
@@ -187,6 +199,8 @@ const GlobalEditor = (props: IProps) => {
     if (validated) {
       const isSaved = await savePage(false, null, true);
       if (isSaved) resetDirty();
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
@@ -377,11 +391,6 @@ const GlobalEditor = (props: IProps) => {
     }
   };
 
-  const errorNotificationText =
-    "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
-
-  const validatedNotificationText = "Everything seems ok, you can publish the page.";
-
   const globalNotificationText = "You’ re working on the Global Page. Make sure you want to make changes to this page.";
 
   const modifiedNotificationText =
@@ -433,16 +442,6 @@ const GlobalEditor = (props: IProps) => {
         pageStatusActions={pageStatusActions}
         tabs={tabsPreview}
       >
-        {errors.length > 0 && (
-          <S.NotificationWrapper>
-            <Notification type="error" text={errorNotificationText} />
-          </S.NotificationWrapper>
-        )}
-        {validated && (
-          <S.NotificationWrapper>
-            <Notification type="success" text={validatedNotificationText} />
-          </S.NotificationWrapper>
-        )}
         {isLivePageChanged && (
           <S.NotificationWrapper>
             <Notification type="warning" text={modifiedNotificationText} />
@@ -534,7 +533,6 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   pageLanguages: state.pageEditor.currentPageLanguages,
   pageEditor: state.pageEditor,
   errors: state.pageEditor.errors,
-  validated: state.pageEditor.validated,
   sitePageID: state.pageEditor.sitePageID,
   savedSiteInfo: state.sites.savedSiteInfo,
   userEditing: state.pageEditor.userEditing,
@@ -555,7 +553,6 @@ interface IPageEditorStateProps {
   pageLanguages: any[];
   pageEditor: any;
   errors: IErrorItem[];
-  validated: boolean;
   sitePageID: number | null;
   savedSiteInfo: any;
   userEditing: IUserEditing | null;

package/src/modules/Navigation/Menus/List/Table/index.tsx

@@ -33,12 +33,12 @@ const ItemList = (props: IItemList): JSX.Element => {
   }, [menu]);
 
   const getIcon = (item: TreeItem, onExpand: (itemId: ItemId) => void, onCollapse: (itemId: ItemId) => void) => {
-    const handleCollapse = (e: MouseEvent) => {
+    const handleCollapse = (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       onCollapse(item.id);
     };
 
-    const handleExpand = (e: MouseEvent) => {
+    const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       onExpand(item.id);
     };

package/src/modules/PageEditor/Editor/index.tsx

@@ -40,8 +40,14 @@ const Editor = (props: IProps) => {
     copyModule,
     pasteModule,
     setNotification,
+    restorePageNavigation,
+    content,
   } = props;
 
+  const {
+    editorContent: { header, footer },
+  } = content;
+
   const actions = {
     deleteModuleAction: deleteModule,
     addComponentAction: addComponent,
@@ -55,6 +61,7 @@ const Editor = (props: IProps) => {
     copyModuleAction: copyModule,
     pasteModuleAction: pasteModule,
     setNotificationAction: setNotification,
+    restorePageNavigationAction: restorePageNavigation,
   };
 
   return (
@@ -82,6 +89,8 @@ const Editor = (props: IProps) => {
           userEditing={userEditing}
           theme={site.theme}
           lastElementAddedId={lastElementAddedId}
+          header={header}
+          footer={footer}
         />
       }
     />
@@ -99,6 +108,7 @@ interface IEditorStateProps {
   userEditing: IUserEditing | null;
   site: ISite;
   lastElementAddedId: null | number;
+  content: any;
 }
 
 interface IPageBrowserDispatchProps {
@@ -117,6 +127,7 @@ interface IPageBrowserDispatchProps {
   copyModule(editorID: number): boolean;
   pasteModule(editorID: number, key: string): Promise<{ error?: INotification }>;
   setNotification: (notification: INotification) => void;
+  restorePageNavigation: (key: string) => void;
   isTemplateActivated: boolean;
   isGlobal: boolean;
   isEditable: boolean;
@@ -137,6 +148,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   userEditing: state.pageEditor.userEditing,
   site: state.sites.currentSiteInfo,
   lastElementAddedId: state.pageEditor.lastElementAddedId,
+  content: state.pageEditor.editorContent,
 });
 
 const mapDispatchToProps = {
@@ -154,6 +166,7 @@ const mapDispatchToProps = {
   saveCurrentSiteInfo: sitesActions.saveCurrentSiteInfo,
   copyModule: pageEditorActions.copyModule,
   pasteModule: pageEditorActions.pasteModule,
+  restorePageNavigation: pageEditorActions.restorePageNavigation,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Editor);

package/src/modules/PageEditor/index.tsx

@@ -40,7 +40,6 @@ const PageEditor = (props: IProps) => {
     errors,
     setSelectedContent,
     setTab,
-    validated,
     pageEditor: { editorContent, schema },
     userEditing,
     isNewTranslation,
@@ -67,6 +66,10 @@ const PageEditor = (props: IProps) => {
   const isTranslated = pageLanguages.length > 1;
   const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
 
+  const errorNotificationText =
+    "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
+  const validatedNotificationText = "Everything seems ok, you can publish the page.";
+
   useEffect(() => {
     const { pageID, getPage, setTab, sendPagePing } = props;
     const defaultTab = "content";
@@ -145,6 +148,8 @@ const PageEditor = (props: IProps) => {
               resetDirty();
             }
           });
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
@@ -163,6 +168,8 @@ const PageEditor = (props: IProps) => {
           resetDirty();
         }
       });
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
@@ -178,9 +185,14 @@ const PageEditor = (props: IProps) => {
     updatePageStatus([pageID], pageStatus.OFFLINE);
   };
 
-  const reviewPage = () => {
+  const reviewPage = async () => {
     const { validatePage } = props;
-    validatePage(false);
+    const validated = await validatePage(false);
+    if (validated) {
+      setNotification({ text: validatedNotificationText, type: "success" });
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
+    }
   };
 
   const handlePublishDraft = async () => {
@@ -191,6 +203,8 @@ const PageEditor = (props: IProps) => {
     if (validated) {
       const isSaved = await savePage(false, null, true);
       if (isSaved) resetDirty();
+    } else {
+      setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
@@ -426,11 +440,6 @@ const PageEditor = (props: IProps) => {
     }
   };
 
-  const errorNotificationText =
-    "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
-
-  const validatedNotificationText = "Everything seems ok, you can publish the page.";
-
   const modifiedNotificationText =
     "You made some changes to the Live version that aren't implemented on this Draft. Check it out before you continue working.";
 
@@ -496,16 +505,6 @@ const PageEditor = (props: IProps) => {
             />
           </S.NotificationWrapper>
         )}
-        {errors.length > 0 && (
-          <S.NotificationWrapper>
-            <Notification type="error" text={errorNotificationText} />
-          </S.NotificationWrapper>
-        )}
-        {validated && (
-          <S.NotificationWrapper>
-            <Notification type="success" text={validatedNotificationText} />
-          </S.NotificationWrapper>
-        )}
         {isLivePageChanged && (
           <S.NotificationWrapper>
             <Notification type="warning" text={modifiedNotificationText} />
@@ -598,7 +597,6 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   activatedTemplates: state.dataPacks.templates,
   activatedModules: state.dataPacks.modules,
   errors: state.pageEditor.errors,
-  validated: state.pageEditor.validated,
   userEditing: state.pageEditor.userEditing,
   currentUserID: state.users.currentUser.id,
   isNewTranslation: state.pageEditor.isNewTranslation,
@@ -620,7 +618,6 @@ interface IPageEditorStateProps {
   activatedTemplates: any[];
   activatedModules: string[];
   errors: IErrorItem[];
-  validated: boolean;
   userEditing: IUserEditing | null;
   currentUserID: number | null;
   isNewTranslation: boolean;

package/src/modules/Redirects/RedirectItem/index.tsx

@@ -62,10 +62,24 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
   };
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
-
-  const target = `(${redirect.domain || ""}|${redirect.site?.siteUrl || ""})`;
+  const target =
+    redirect.site?.siteUrl === "/"
+      ? `(${redirect.domain || ""})`
+      : `(${redirect.domain || ""}|${redirect.site?.siteUrl || ""})`;
   const regex = new RegExp(target, "g");
 
+  const isUrlAndDomainEqual = () => {
+    const urlWithSlash = `${redirect.to?.url}/`;
+    const domainWithSlash = `${redirect.domain}/`;
+
+    return (
+      urlWithSlash === redirect.domain ||
+      urlWithSlash === domainWithSlash ||
+      domainWithSlash === redirect.to?.url ||
+      redirect.domain === redirect.to?.url
+    );
+  };
+
   return (
     <>
       <S.ItemRow role="rowgroup" selected={isSelected}>
@@ -83,7 +97,7 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
           {redirect.from.replace(regex, "")}
         </S.UrlCell>
         <S.UrlCell role="cell" onClick={handleClick}>
-          {redirect.to?.url?.replace(regex, "") || "Deleted page"}
+          {isUrlAndDomainEqual() ? "/" : redirect.to?.url?.replace(regex, "") || "Deleted page"}
         </S.UrlCell>
         <S.DateCell role="cell" onClick={handleClick}>
           {redirect.date && format(new Date(redirect.date), "dd MMM yyyy")}

package/src/modules/Settings/ContentTypes/DataPacks/Item/index.tsx

@@ -68,7 +68,7 @@ const Item = (props: IProps): JSX.Element => {
     </Modal>
   );
 
-  const deleteAction = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  const deleteAction = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     event.stopPropagation();
     const force = false;

package/src/modules/StructuredData/Form/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IErrorItem, IRootState, ISite } from "@ax/types";
+import { IDataPack, IErrorItem, INotification, IRootState, ISite } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
 import { getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
@@ -44,6 +44,7 @@ const Form = (props: IProps) => {
   } = props;
 
   const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
+  const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);
 
   const { fields } = schema;
@@ -257,11 +258,6 @@ const Form = (props: IProps) => {
     languageActions: isDataTranslatable ? languageActions : null,
   };
 
-  const errorNotificationText =
-    "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
-
-  const validatedNotificationText = "Everything seems ok, you can publish the page.";
-
   return isLoading ? (
     <Loading />
   ) : (
@@ -293,14 +289,15 @@ const Form = (props: IProps) => {
             />
           </S.NotificationWrapper>
         )}
-        {errors.length > 0 && (
+        {notification && (
           <S.NotificationWrapper>
-            <Notification type="error" text={errorNotificationText} />
-          </S.NotificationWrapper>
-        )}
-        {validated && (
-          <S.NotificationWrapper>
-            <Notification type="success" text={validatedNotificationText} />
+            <Notification
+              type={notification.type}
+              text={notification.text}
+              btnText={notification.btnText}
+              onClick={notification.onClick}
+              resetError={() => setNotification(null)}
+            />
           </S.NotificationWrapper>
         )}
         <ErrorToast size="l" />