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 128 129 130 131 132 133 134 135 136 137 138 139 | import { useNavigate } from "react-router-dom";
// nice-modal
import NiceModal from "@ebay/nice-modal-react";
// mui
// components
import { showMessage } from "@common/Toast/ShowToast";
// localization
import GivePopup from "@shared/Popup/GivePopup";
import { MonitorIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { Stack } from "@mui/material";
import { useAppTheme } from "@theme/v2/Provider";
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
type GiveIntroduceADBModalProps = {
data: any;
productId: number;
};
const GiveIntroduceADBModal = NiceModal.create(
({ data, productId }: GiveIntroduceADBModalProps) => {
const { open, modal } = useNiceModal();
const navigate = useNavigate();
const { isDesktopView, isMobileView } = useCustomThemeV2();
const { palette } = useAppTheme();
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
</>,
isDesktopView,
"Payment Form Created",
);
};
const handleTryNow = () => {
handleClose();
navigate("/merchant/new-advanced-builder", {
state: {
...data,
productId: productId,
productTitle: data?.about?.title,
headerImageUrl:
data?.style?.useAsBackground && data?.style?.image?.URL,
description: data?.about?.description,
campaign: data?.campaign,
},
});
};
return (
<GivePopup
open={open}
description={
<GiveText variant="bodyS" color="secondary">
{formText.intoduce_advanced_form_builder_description}
</GiveText>
}
paperSx={{ height: "fit-content !important" }}
sx={{
"& .MuiDialogActions-root": {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: "8px",
},
}}
onClose={handleNotNow}
iconType={"advanced-builder"}
title={formText.intoduce_advanced_form_builder}
type="success"
isMobile={isMobileView}
data-testid="advanced-form-builder-modal"
buttons={[
{
label: "Cancel",
onClick: handleNotNow,
variant: "ghost",
sxButton: { flex: 1 },
},
{
label: formText.open_advanced_builder,
onClick: handleTryNow,
variant: "filled",
sxButton: { flex: 3 },
disabled: !isDesktopView,
},
]}
{...(isMobileView && {
inputNodes: [
{
element: (
<Stack
direction="row"
gap="12px"
padding="12px"
borderRadius="8px"
alignItems="center"
sx={{
background: palette.primitive?.transparent["darken-5"],
}}
>
<MonitorIcon size={20} />
<GiveText variant="bodyS">
{formText.switch_to_desktop}
</GiveText>
</Stack>
),
},
],
})}
/>
);
},
);
export default GiveIntroduceADBModal;
// text to be added to localization later
const formText = {
intoduce_advanced_form_builder: "Introducing Advanced Form Builder",
intoduce_advanced_form_builder_description:
"Your payment form has been created! Resume building your form with whole new additional features and interactive options to increase audience engagement.",
skip: "Cancel",
open_advanced_builder: "Yes, Open Advanced Builder",
switch_to_desktop: "Please switch to desktop to access this feature.",
};
|