Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 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 Popup from "@common/Popup";
import { Text } from "@common/Text";
import { Stack } from "@mui/material";
import { palette } from "@palette";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { Markup } from "interweave";
import { namespaces } from "localization/resources/i18n.constants";
import { useTranslation } from "react-i18next";
type IntroduceAdvancedFormBuilderModalProps = {
data: any;
productId: number;
};
const IntroduceAdvancedFormBuilderModal = NiceModal.create(
({ data, productId }: IntroduceAdvancedFormBuilderModalProps) => {
const modal = useModal();
const theme = useTheme();
const navigate = useNavigate();
const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
const { t } = useTranslation(namespaces.pages.paymentFormMinibuilder);
const { isMobileView } = useCustomTheme();
const handleClose = () => {
modal.hide();
};
const handleNotNow = () => {
handleClose();
showMessage(
"Success",
<>
Your new Payment Form{" "}
<span style={{ fontWeight: "600" }}>“{data.about.title}”</span> has
been successfully created and it’s ready to accept payments
</>,
isDesktop,
"Payment Form Created",
);
};
const handleTryNow = () => {
handleClose();
navigate("/merchant/new-advanced-builder", {
state: {
productId: productId,
productTitle: data?.about?.title,
headerImageUrl:
data?.style?.useAsBackground && data?.style?.image?.URL,
description: data?.about?.description,
campaign: data?.campaign,
},
});
};
return (
<Popup
{...muiDialogV5(modal)}
title={
(
<Text fontSize={isDesktop ? 20 : 18} fontWeight="book">
{t("intoduce_advanced_form_builder")}
</Text>
) as any
}
onSubmit={handleTryNow}
onCancel={handleNotNow}
actionLabel={isDesktop ? t("open_advanced_builder") : undefined}
submitButtonSx={{
fontSize: "18px",
fontWeight: "400",
padding: "12px 24px",
height: "46px",
}}
cancelLabel={isDesktop ? t("skip") : t("close")}
cancelButtonSx={
isDesktop ? desktopCancelButtonProps : mobileCancelButtonProps
}
isClose={true}
isSubmitDisabled={isMobileView}
data-testid="advanced-form-builder-modal"
cancelType={isDesktop ? "tertiary" : "primary"}
modalHeaderCustomStyles={{
padding: "24px 24px 0px 24px",
}}
modalActionsCustomStyles={{
padding: "20px 24px 16px 24px",
}}
>
<Stack spacing={1}>
<Text color={palette.gray[300]}>
<Markup content={t("intoduce_advanced_form_builder_description")} />
</Text>
{!isDesktop && (
<Text color={palette.gray[300]}>
<Markup content={t("switch_to_desktop")} />
</Text>
)}
</Stack>
</Popup>
);
},
);
const mobileCancelButtonProps = {
fontSize: "14px",
fontWeight: "400",
padding: "8px 24px",
};
const desktopCancelButtonProps = {
fontSize: "18px",
fontWeight: "400",
height: "auto",
};
export default IntroduceAdvancedFormBuilderModal;
|