All files / src/features/Minibuilders/FundraisersMinibuilder FundraiserSuccessModal.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import * as React from "react";
import { palette } from "@palette";
import { useNavigate } from "react-router-dom";
// nice-modal
import NiceModal, { muiDialogV5, useModal } from "@ebay/nice-modal-react";
// mui
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
// components
import { showMessage } from "@common/Toast/ShowToast";
// localization
import { Markup } from "interweave";
import { useTranslation } from "react-i18next";
import { namespaces } from "localization/resources/i18n.constants";
import Popup from "@common/Popup";
import { TEventModalInputs } from "../EventsMinibuilder/types";
import { TFundraiserModalInputs } from "./types";
 
type FundraiserSuccessModalProps = {
  data: TFundraiserModalInputs | TEventModalInputs;
};
 
const FundraiserSuccessModal = NiceModal.create(
  ({ data }: FundraiserSuccessModalProps) => {
    const modal = useModal();
    const theme = useTheme();
    const navigate = useNavigate();
    const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
    const { t } = useTranslation(namespaces.pages.fundraiserMinibuilder);
 
    const handleClose = () => {
      modal.hide();
    };
 
    const openFundraisersHandler = () => {
      handleClose();
      navigate("merchant/fundraisers/advanced-builder");
    };
 
    const handleDone = () => {
      handleClose();
      showMessage(
        "Success",
        <>
          Your new Fundraiser{" "}
          <span style={{ fontWeight: "600" }}>“{data.about.title}”</span> has
          been successfully created and it’s ready to accept payments
        </>,
        isDesktop,
        "Fundraiser Created",
      );
    };
 
    return (
      <Popup
        {...muiDialogV5(modal)}
        title={t("fundraiser_successfully_created")}
        onSubmit={handleDone}
        actionLabel={t("done")}
        data-testid="fundraiser_success_modal"
      >
        <Markup content={t("fundraiser_create_success_description")} />
      </Popup>
    );
  },
);
 
export default FundraiserSuccessModal;