All files / src/features/Minibuilders/EventsMinibuilder EventSuccessModal.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import * as React from "react";
import { useNavigate } from "react-router-dom";
// nice-modal
import NiceModal, { muiDialogV5, useModal } from "@ebay/nice-modal-react";
// mui
import { useMediaQuery, useTheme } from "@mui/material";
// components
import { showMessage } from "@common/Toast/ShowToast";
// assets
// localization
import { Markup } from "interweave";
import { useTranslation } from "react-i18next";
import { namespaces } from "localization/resources/i18n.constants";
import Popup from "@common/Popup";
import { TFundraiserModalInputs } from "../FundraisersMinibuilder/types";
import { TEventModalInputs } from "./types";
 
type EventSuccessModalProps = {
  data: TFundraiserModalInputs | TEventModalInputs;
};
 
const EventSuccessModal = NiceModal.create(
  ({ data }: EventSuccessModalProps) => {
    const modal = useModal();
    const theme = useTheme();
    const navigate = useNavigate();
    const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
 
    const handleClose = () => {
      modal.hide();
    };
 
    const openFundraisersHandler = () => {
      handleClose();
      navigate("/merchant/fundraisers/advanced-builder");
    };
 
    const handleDone = () => {
      modal.hide();
      showMessage(
        "Success",
        <>
          Your new Event{" "}
          <span style={{ fontWeight: "600" }}>“{data.about.title}”</span> has
          been successfully created and it’s ready to sell tickets.
        </>,
        isDesktop,
        "Event Created",
      );
    };
 
    const { t } = useTranslation(namespaces.pages.eventsMinibuilder);
 
    return (
      <Popup
        {...muiDialogV5(modal)}
        title={t("event_successfully_created")}
        onSubmit={handleDone}
        actionLabel={t("done")}
        data-testid="event-success-modal"
      >
        <Markup content={t("event_create_success_description")} />
      </Popup>
    );
  },
);
 
export default EventSuccessModal;