Feat: Add congrats modal when making event live

frontend/src/components/layouts/Event/index.tsx

@@ -38,6 +38,7 @@ import {confirmationDialog} from "../../../utilites/confirmationDialog.tsx";
 import {useUpdateEventStatus} from "../../../mutations/useUpdateEventStatus.ts";
 import {showError, showSuccess} from "../../../utilites/notifications.tsx";
 import {ShareModal} from "../../modals/ShareModal";
+import {EventLiveCelebrationModal} from "../../modals/EventLiveCelebrationModal";
 import {useDisclosure} from "@mantine/hooks";
 import {TopBarButton} from "../../common/TopBarButton";
 import {useWindowWidth} from "../../../hooks/useWindowWidth.ts";
@@ -52,6 +53,7 @@ const EventLayout = () => {
     const {eventId} = useParams();
 
     const [opened, {open, close}] = useDisclosure(false);
+    const [celebrationOpened, {open: openCelebration, close: closeCelebration}] = useDisclosure(false);
 
     const statusToggleMutation = useUpdateEventStatus();
 
@@ -145,6 +147,7 @@ const EventLayout = () => {
     ];
 
     const handleStatusToggle = () => {
+        const isGoingLive = event?.status !== 'LIVE';
         const message = event?.status === 'LIVE'
             ? t`Are you sure you want to make this event draft? This will make the event invisible to the public`
             : t`Are you sure you want to make this event public? This will make the event visible to the public`;
@@ -155,7 +158,11 @@ const EventLayout = () => {
                 status: event?.status === 'LIVE' ? 'DRAFT' : 'LIVE'
             }, {
                 onSuccess: () => {
-                    showSuccess(t`Event status updated`);
+                    if (isGoingLive) {
+                        openCelebration();
+                    } else {
+                        showSuccess(t`Event status updated`);
+                    }
                 },
                 onError: (error: any) => {
                     showError(error?.response?.data?.message || t`Event status update failed. Please try again later`);
@@ -200,13 +207,21 @@ const EventLayout = () => {
                                 {t`Share Event`}
                             </Button>
 
-                            {event && <ShareModal
+                            <ShareModal
                                 url={eventHomepageUrl(event)}
                                 title={event.title}
                                 modalTitle={t`Share Event`}
                                 opened={opened}
                                 onClose={close}
-                            />}
+                            />
+
+                            <EventLiveCelebrationModal
+                                opened={celebrationOpened}
+                                onClose={closeCelebration}
+                                url={eventHomepageUrl(event)}
+                                eventTitle={event.title}
+                                eventId={String(event.id)}
+                            />
                         </>
                     )}
                 </div>

frontend/src/components/modals/EventLiveCelebrationModal/EventLiveCelebrationModal.module.scss

@@ -0,0 +1,77 @@
+.modal {
+    :global(.mantine-Modal-body) {
+        padding: 0;
+    }
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.celebrationEmoji {
+    font-size: 4rem;
+    line-height: 1;
+    margin-bottom: 1rem;
+    animation: celebrate 0.6s ease-out;
+}
+
+@keyframes celebrate {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.2);
+    }
+    70% {
+        transform: scale(0.9);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--mantine-color-dark-7);
+    margin-bottom: 0.5rem;
+}
+
+.subtitle {
+    color: var(--mantine-color-dimmed);
+    font-size: 0.95rem;
+    margin-bottom: 1.5rem;
+}
+
+.urlSection {
+    width: 100%;
+    margin-bottom: 1.5rem;
+}
+
+.urlInput {
+    padding-right: 110px;
+    font-size: 0.875rem;
+    background: var(--mantine-color-gray-0);
+}
+
+.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.actionButton {
+    width: 100%;
+}
+
+.doneButton {
+    width: 100%;
+}

frontend/src/components/modals/EventLiveCelebrationModal/index.tsx

@@ -0,0 +1,137 @@
+import {Button, CopyButton, Modal, Text, TextInput, Tooltip} from '@mantine/core';
+import {useDisclosure} from '@mantine/hooks';
+import {
+    IconCheck,
+    IconCode,
+    IconCopy,
+    IconExternalLink,
+    IconShare
+} from '@tabler/icons-react';
+import {t} from "@lingui/macro";
+import {NavLink} from "react-router";
+import {ShareModal} from "../ShareModal";
+import classes from './EventLiveCelebrationModal.module.scss';
+
+interface EventLiveCelebrationModalProps {
+    opened: boolean;
+    onClose: () => void;
+    url: string;
+    eventTitle: string;
+    eventId: string;
+}
+
+export const EventLiveCelebrationModal = ({
+    opened,
+    onClose,
+    url,
+    eventTitle,
+    eventId
+}: EventLiveCelebrationModalProps) => {
+    const [shareModalOpened, {open: openShareModal, close: closeShareModal}] = useDisclosure(false);
+
+    return (
+        <>
+            <Modal
+                opened={opened}
+                onClose={onClose}
+                centered
+                size="md"
+                withCloseButton={false}
+                className={classes.modal}
+            >
+                <div className={classes.content}>
+                    <div className={classes.celebrationEmoji}>
+                        🎉
+                    </div>
+
+                    <Text className={classes.title}>
+                        {t`Your event is live!`}
+                    </Text>
+
+                    <Text className={classes.subtitle}>
+                        {t`Congratulations! Your event is now visible to the public.`}
+                    </Text>
+
+                    <div className={classes.urlSection}>
+                        <TextInput
+                            value={url}
+                            readOnly
+                            size="md"
+                            classNames={{
+                                input: classes.urlInput
+                            }}
+                            rightSectionWidth={100}
+                            rightSection={
+                                <CopyButton value={url} timeout={2000}>
+                                    {({copied, copy}) => (
+                                        <Tooltip label={copied ? t`Copied!` : t`Copy link`}>
+                                            <Button
+                                                variant="light"
+                                                color={copied ? 'teal' : 'gray'}
+                                                onClick={copy}
+                                                size="sm"
+                                                leftSection={copied ? <IconCheck size={14}/> : <IconCopy size={14}/>}
+                                            >
+                                                {copied ? t`Copied` : t`Copy`}
+                                            </Button>
+                                        </Tooltip>
+                                    )}
+                                </CopyButton>
+                            }
+                        />
+                    </div>
+
+                    <div className={classes.actions}>
+                        <Button
+                            component="a"
+                            href={url}
+                            target="_blank"
+                            variant="light"
+                            leftSection={<IconExternalLink size={16}/>}
+                            className={classes.actionButton}
+                        >
+                            {t`View Event Page`}
+                        </Button>
+
+                        <Button
+                            variant="light"
+                            leftSection={<IconShare size={16}/>}
+                            onClick={openShareModal}
+                            className={classes.actionButton}
+                        >
+                            {t`Share Event`}
+                        </Button>
+
+                        <Button
+                            component={NavLink}
+                            to={`/manage/event/${eventId}/widget`}
+                            variant="light"
+                            leftSection={<IconCode size={16}/>}
+                            onClick={onClose}
+                            className={classes.actionButton}
+                        >
+                            {t`Embed Widget`}
+                        </Button>
+                    </div>
+
+                    <Button
+                        onClick={onClose}
+                        variant="filled"
+                        size="md"
+                        className={classes.doneButton}
+                    >
+                        {t`Done`}
+                    </Button>
+                </div>
+            </Modal>
+
+            <ShareModal
+                url={url}
+                title={eventTitle}
+                modalTitle={t`Share Event`}
+                opened={shareModalOpened}
+                onClose={closeShareModal}
+            />
+        </>
+    );
+};