III-6977 notification publication delay

src/i18n/de.json

@@ -1418,6 +1418,8 @@
     },
     "online_label": "Online",
     "main_image": "Hauptbild",
+    "publication_alert": "Ihre Änderungen wurden gespeichert und sind <b>innerhalb von 1 Stunde</b> auf {{siteName}} sichtbar.",
+    "uit_agendas": "der UiTagendas",
     "labels": {
       "title": "Titel",
       "type": "Typ",

src/i18n/fr.json

@@ -1417,6 +1417,8 @@
     },
     "online_label": "En ligne",
     "main_image": "Image principale",
+    "publication_alert": "Vos modifications ont été enregistrées et seront visibles sur {{siteName}} <b>dans un délai d'une heure</b>.",
+    "uit_agendas": "les UiTagendas",
     "labels": {
       "title": "Titre",
       "type": "Type",

src/i18n/nl.json

@@ -1474,6 +1474,8 @@
     },
     "online_label": "Online",
     "main_image": "Hoofdafbeelding",
+    "publication_alert": "Je aanpassingen zijn opgeslagen en zijn <b>binnen 1 uur</b> zichtbaar op {{siteName}}.",
+    "uit_agendas": "de UiTagenda's",
     "labels": {
       "title": "Titel",
       "type": "Type",

src/pages/events/[eventId]/preview/Preview.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { AgeRanges } from '@/constants/AgeRange';
 import { OfferTypes, ScopeTypes } from '@/constants/OfferType';
@@ -11,6 +11,7 @@ import { LabelsForm } from '@/pages/LabelsForm';
 import { BookingAvailability, isCultuurkuur, isEvent } from '@/types/Event';
 import { hasOnlineLocation } from '@/types/Offer';
 import { isPlace } from '@/types/Place';
+import { Alert } from '@/ui/Alert';
 import { Image } from '@/ui/Image';
 import { Inline } from '@/ui/Inline';
 import { Link } from '@/ui/Link';
@@ -57,6 +58,8 @@ const Preview = () => {
   });
 
   const offer = getOfferByIdQuery.data;
+  const isEdited = router.query.edited === 'true';
+  const isCultuurkuurEvent = isEvent(offer) && isCultuurkuur(offer);
 
   const calendarSummary = getCalendarSummaryQuery.data;
 
@@ -115,7 +118,6 @@ const Preview = () => {
     if (!offer.priceInfo || offer.priceInfo.length === 0) {
       return <EmptyValue>{t('preview.empty_value.price')}</EmptyValue>;
     }
-    const isCultuurkuurEvent = isEvent(offer) && isCultuurkuur(offer);
 
     return (
       <table
@@ -397,6 +399,27 @@ const Preview = () => {
       <Page.Content>
         <Inline>
           <Stack flex={3}>
+            {isEdited && (
+              <Alert width="100%" marginBottom={4}>
+                <Text
+                  css={`
+                    b {
+                      font-weight: 600;
+                    }
+                  `}
+                >
+                  <Trans
+                    i18nKey="preview.publication_alert"
+                    values={{
+                      siteName: isCultuurkuurEvent
+                        ? 'Cultuurkuur'
+                        : t('preview.uit_agendas'),
+                    }}
+                    components={{ b: <b></b> }}
+                  />
+                </Text>
+              </Alert>
+            )}
             <Tabs
               activeKey={activeTab}
               onSelect={(key) => onTabChange(key as string)}

src/pages/steps/StepsForm.tsx

@@ -15,6 +15,7 @@ import { OfferType, OfferTypes } from '@/constants/OfferType';
 import { useGetEventByIdQuery } from '@/hooks/api/events';
 import { useGetPlaceByIdQuery } from '@/hooks/api/places';
 import { useGetTypesByScopeQuery } from '@/hooks/api/types';
+import { FeatureFlags, useFeatureFlag } from '@/hooks/useFeatureFlag';
 import {
   locationStepConfiguration,
   useEditLocation,
@@ -186,6 +187,13 @@ const StepsForm = ({
     await editLocation(data);
     reload();
   };
+  const [isReactEventPreviewFeatureFlagEnabled] = useFeatureFlag(
+    FeatureFlags.REACT_EVENT_PREVIEW,
+  );
+
+  const doneEditingLink = isReactEventPreviewFeatureFlagEnabled
+    ? `/events/${offerId}?edited=true`
+    : `/event/${offerId}/preview?edited=true`;
 
   const footerStatus = useFooterStatus({ offer, form });
 
@@ -455,7 +463,7 @@ const StepsForm = ({
             {footerStatus === FooterStatus.AUTO_SAVE && (
               <Inline spacing={3} alignItems="center">
                 <Link
-                  href={`/event/${offerId}/preview?edited=true`}
+                  href={doneEditingLink}
                   variant={LinkVariants.BUTTON_SUCCESS}
                 >
                   <Text>{t('create.footer.done_editing')}</Text>