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

2026-03-26 22:06:21 +01:00
parent d8119e9807
commit 79aab93444
5 changed files with 102 additions and 85 deletions
@@ -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}
-      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>
-
-      {/* Current event time */}
-
-      <EventTimeSubtitle
-        event={contextualizedEvent.event}
-        t={t}
-        timezone={contextualizedEvent.event.timezone}
+    <>
+      <SnackbarAlert
+        open={showSuccessToast}
+        setOpen={setShowSuccessToast}
+        message={t("eventPreview.proposalSubmitted")}
      />
+      <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 */}
-      <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>
+        {/* Current event time */}

-      {/* 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}
+        <EventTimeSubtitle
+          event={contextualizedEvent.event}
+          t={t}
+          timezone={contextualizedEvent.event.timezone}
+        />
+
+        {/* Your proposal label */}
+        <FieldWithLabel
+          label={t("eventPreview.yourProposal")}
+          isExpanded={false}
        >
-          {t("eventPreview.sendProposal")}
-        </Button>
-      </Box>
-    </ResponsiveDialog>
+          <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 */}
+        <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>
+    </>
  );
 }
@@ -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",
@@ -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",
@@ -287,6 +287,7 @@
    "yourProposal": "Ваше предложение",
    "optionalMessage": "Добавить необязательное сообщение организатору",
    "sendProposal": "Отправить предложение",
+    "proposalSubmitted": "Новое предложение по времени отправлено",
    "ACCEPTED": "Да",
    "TENTATIVE": "Возможно",
    "DECLINED": "Нет",
@@ -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",