ISSUE-713 Inform user of COUNTER success (#714)

src/features/Events/AttendanceValidation/EventCounterModal.tsx

@@ -4,6 +4,7 @@ import { DateTimeFields } from "@/components/Event/components/DateTimeFields";
 import { FieldWithLabel } from "@/components/Event/components/FieldWithLabel";
 import { splitDateTime } from "@/components/Event/utils/dateTimeHelpers";
 import { Box, Button, TextField, Typography } from "@linagora/twake-mui";
+import { SnackbarAlert } from "@/components/Loading/SnackBarAlert";
 import moment from "moment-timezone";
 import { useEffect, useState } from "react";
 import { useI18n } from "twake-i18n";
@@ -22,6 +23,7 @@ export function EventCounterModal({
 }) {
   const { t } = useI18n();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
 
   const allday = contextualizedEvent.event.allday ?? false;
 
@@ -128,6 +130,7 @@ export function EventCounterModal({
           : `${endDate}T${endTime}`,
         message,
       });
+      setShowSuccessToast(true);
       setOpen(false);
     } catch (error) {
       console.error(error);
@@ -150,94 +153,104 @@ export function EventCounterModal({
   }, [open, startSplit.date, startSplit.time, endSplit.date, endSplit.time]);
 
   return (
-    <ResponsiveDialog
+    <>
-      open={open}
+      <SnackbarAlert
-      onClose={() => setOpen(false)}
+        open={showSuccessToast}
-      title={t("eventPreview.proposeNewTime")}
+        setOpen={setShowSuccessToast}
-    >
+        message={t("eventPreview.proposalSubmitted")}
-      {/* Event title */}
-      <Box display="flex" alignItems="center" gap={1} mb={2}>
-        <Typography
-          variant="h3"
-          sx={{
-            wordBreak: "break-word",
-          }}
-        >
-          {formatEventChipTitle(contextualizedEvent.event, t)}
-        </Typography>
-      </Box>
-
-      {/* Current event time */}
-
-      <EventTimeSubtitle
-        event={contextualizedEvent.event}
-        t={t}
-        timezone={contextualizedEvent.event.timezone}
       />
+      <ResponsiveDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title={t("eventPreview.proposeNewTime")}
+      >
+        {/* Event title */}
+        <Box display="flex" alignItems="center" gap={1} mb={2}>
+          <Typography
+            variant="h3"
+            sx={{
+              wordBreak: "break-word",
+            }}
+          >
+            {formatEventChipTitle(contextualizedEvent.event, t)}
+          </Typography>
+        </Box>
 
-      {/* Your proposal label */}
+        {/* Current event time */}
-      <FieldWithLabel label={t("eventPreview.yourProposal")} isExpanded={false}>
-        <DateTimeFields
-          startDate={startDate}
-          startTime={startTime}
-          endDate={endDate}
-          endTime={endTime}
-          allday={allday}
-          showMore={showMore}
-          hasEndDateChanged={hasEndDateChanged}
-          validation={validation}
-          onStartDateChange={handleStartDateChange}
-          onStartTimeChange={handleStartTimeChange}
-          onEndDateChange={handleEndDateChange}
-          onEndTimeChange={handleEndTimeChange}
-          showEndDate={
-            showMore ||
-            allday ||
-            (hasEndDateChanged && startDate !== endDate) ||
-            (!showMore && !allday && startDate !== endDate)
-          }
-          onToggleEndDate={() => setShowMore((prev) => !prev)}
-        />
-      </FieldWithLabel>
-      {/* Optional message */}
-      <Box mt={2}>
-        <TextField
-          margin="dense"
-          multiline
-          size="small"
-          minRows={2}
-          maxRows={10}
-          fullWidth
-          placeholder={t("eventPreview.optionalMessage")}
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          sx={{
-            mt: 2,
-            "& .MuiInputBase-root": {
-              overflowY: "auto",
-              padding: 0,
-            },
-            "& textarea": {
-              resize: "vertical",
-            },
-          }}
-        />
-      </Box>
 
-      {/* Actions */}
+        <EventTimeSubtitle
-      <Box display="flex" justifyContent="flex-end" gap={2} mt={3}>
+          event={contextualizedEvent.event}
-        <Button variant="text" onClick={() => setOpen(false)}>
+          t={t}
-          {t("common.cancel")}
+          timezone={contextualizedEvent.event.timezone}
-        </Button>
+        />
-        <Button
+
-          variant="contained"
+        {/* Your proposal label */}
-          color="primary"
+        <FieldWithLabel
-          onClick={handleSubmit}
+          label={t("eventPreview.yourProposal")}
-          disabled={isSubmitting}
+          isExpanded={false}
         >
-          {t("eventPreview.sendProposal")}
+          <DateTimeFields
-        </Button>
+            startDate={startDate}
-      </Box>
+            startTime={startTime}
-    </ResponsiveDialog>
+            endDate={endDate}
+            endTime={endTime}
+            allday={allday}
+            showMore={showMore}
+            hasEndDateChanged={hasEndDateChanged}
+            validation={validation}
+            onStartDateChange={handleStartDateChange}
+            onStartTimeChange={handleStartTimeChange}
+            onEndDateChange={handleEndDateChange}
+            onEndTimeChange={handleEndTimeChange}
+            showEndDate={
+              showMore ||
+              allday ||
+              (hasEndDateChanged && startDate !== endDate) ||
+              (!showMore && !allday && startDate !== endDate)
+            }
+            onToggleEndDate={() => setShowMore((prev) => !prev)}
+          />
+        </FieldWithLabel>
+        {/* Optional message */}
+        <Box mt={2}>
+          <TextField
+            margin="dense"
+            multiline
+            size="small"
+            minRows={2}
+            maxRows={10}
+            fullWidth
+            placeholder={t("eventPreview.optionalMessage")}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            sx={{
+              mt: 2,
+              "& .MuiInputBase-root": {
+                overflowY: "auto",
+                padding: 0,
+              },
+              "& textarea": {
+                resize: "vertical",
+              },
+            }}
+          />
+        </Box>
+
+        {/* Actions */}
+        <Box display="flex" justifyContent="flex-end" gap={2} mt={3}>
+          <Button variant="text" onClick={() => setOpen(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+          >
+            {t("eventPreview.sendProposal")}
+          </Button>
+        </Box>
+      </ResponsiveDialog>
+    </>
   );
 }

src/locales/en.json

@@ -286,6 +286,7 @@
     "yourProposal": "Your proposal",
     "optionalMessage": "Add optional message to the organizer",
     "sendProposal": "Send proposal",
+    "proposalSubmitted": "New time proposal submitted",
     "ACCEPTED": "Yes",
     "TENTATIVE": "Maybe",
     "DECLINED": "No",

src/locales/fr.json

@@ -287,6 +287,7 @@
     "yourProposal": "Votre proposition",
     "optionalMessage": "Ajouter un message optionnel à l'organisateur",
     "sendProposal": "Envoyer la proposition",
+    "proposalSubmitted": "Proposition de nouvel horaire envoyée",
     "ACCEPTED": "Oui",
     "TENTATIVE": "Peut-être",
     "DECLINED": "Non",

src/locales/ru.json

@@ -287,6 +287,7 @@
     "yourProposal": "Ваше предложение",
     "optionalMessage": "Добавить необязательное сообщение организатору",
     "sendProposal": "Отправить предложение",
+    "proposalSubmitted": "Новое предложение по времени отправлено",
     "ACCEPTED": "Да",
     "TENTATIVE": "Возможно",
     "DECLINED": "Нет",

src/locales/vi.json

@@ -285,6 +285,7 @@
     "yourProposal": "Đề xuất của bạn",
     "optionalMessage": "Thêm tin nhắn tùy chọn cho người tổ chức",
     "sendProposal": "Gửi đề xuất",
+    "proposalSubmitted": "Đề xuất thời gian mới đã được gửi",
     "ACCEPTED": "Có",
     "TENTATIVE": "Có thể",
     "DECLINED": "Không",