feat: added "Project Listed" modal

src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ProjectListedModal from './ProjectListedModal';
+
+export default {
+    title: 'Projects/List Project Page/Modals/Project Listed Modal',
+    component: ProjectListedModal,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ProjectListedModal>;
+
+
+const Template: ComponentStory<typeof ProjectListedModal> = (args) => <ProjectListedModal {...args as any} ></ProjectListedModal>
+
+
+export const Default = Template.bind({});
+Default.args = {
+    project: {
+        id: 12,
+        name: "BOLT FUN",
+        img: "https://picsum.photos/id/870/150/150.jpg",
+        tagline: "An awesome directory for lightning projects and makers"
+    }
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx

@@ -0,0 +1,96 @@
+import { motion } from 'framer-motion'
+import { useAppSelector, useMediaQuery, useWindowSize } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
+import Button from 'src/Components/Button/Button'
+import { IoClose } from 'react-icons/io5';
+import NutImg from './nut.png'
+import AlbyImg from './alby.png'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
+import { createRoute } from 'src/utils/routing';
+import Confetti from 'react-confetti'
+import { Portal } from 'src/Components/Portal/Portal';
+
+
+interface Props extends ModalCard {
+    project: {
+        id: number,
+        img: string,
+        name: string,
+        tagline: string,
+    }
+}
+
+export default function ProjectListedModal({ onClose, direction, project, ...props }: Props) {
+
+    const size = useWindowSize();
+
+    const isSmallScreen = useMediaQuery('screen and (max-width: 680px)')
+
+    return (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[442px] p-24 rounded-xl relative"
+        >
+            <Portal id='confetti'>
+                <Confetti recycle={false} width={size.width} height={size.height} numberOfPieces={isSmallScreen ? 200 : 400} />
+            </Portal>
+            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <h2 className='text-h5 font-bold text-center'>Product listed!</h2>
+            <div className="flex flex-col gap-16 justify-center items-center my-24">
+                <Avatar src={project.img} width={80} />
+                <p className="text-body3 font-medium">{project.name}</p>
+            </div>
+            <p className="text-body4 font-light text-gray-600 mt-24 text-center">
+                Nice work, you successfully listed your product! Here are a few ideas to get your started.
+            </p>
+
+            <div className="flex flex-col gap-16 my-32">
+                <div className='!flex items-center gap-16'>
+                    <div className={`rounded-8 w-48 h-48 text-center py-12 shrink-0 bg-gray-100`}>
+                        ✍️
+                    </div>
+                    <div>
+                        <p className="font-medium self-center">
+                            Stories
+                        </p>
+                        <p className="text-body5 text-gray-500">
+                            Tell the maker community about your product.
+                        </p>
+                    </div>
+                </div>
+                <div className='!flex items-center gap-16'>
+                    <div className={`rounded-8 w-48 h-48 text-center py-12 shrink-0 bg-gray-100`}>
+                        ⚔️
+                    </div>
+                    <div>
+                        <p className="font-medium self-center">
+                            Start hacking
+                        </p>
+                        <p className="text-body5 text-gray-500">
+                            Kickstart your hacking journey with a tournament.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex flex-col gap-16" >
+                <Button
+                    color='primary'
+                    fullWidth
+                    newTab
+                    href={createRoute({ type: "edit-story" })}
+                >✍️ Write a story</Button>
+                <Button
+                    color='white'
+                    fullWidth
+                    newTab
+                    href='/tournaments'
+                >⚔️ Explore tournaments</Button>
+            </div>
+        </motion.div>
+    )
+}

src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts

@@ -0,0 +1,4 @@
+
+import { lazyModal } from 'src/utils/helperFunctions';
+
+export const { LazyComponent: ProjectListedModal } = lazyModal(() => import('./ProjectListedModal'))

src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx

@@ -7,6 +7,8 @@ import { IListProjectForm } from "../FormContainer/FormContainer";
 import { useMemo, useState } from 'react'
 import { tabs } from '../../ListProjectPage'
 import { NotificationsService } from 'src/services'
+import { useAppDispatch } from 'src/utils/hooks';
+import { openModal } from 'src/redux/features/modals.slice';
 
 interface Props {
     currentTab: keyof typeof tabs
@@ -16,6 +18,7 @@ export default function SaveChangesCard(props: Props) {
 
     const { handleSubmit, formState: { errors, isDirty, }, reset, getValues, watch } = useFormContext<IListProjectForm>();
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
 
     const [isLoading, setIsLoading] = useState(false);
     const isUpdating = useMemo(() => !!getValues('id'), [getValues]);
@@ -29,7 +32,21 @@ export default function SaveChangesCard(props: Props) {
     }
 
     const clickSubmit = handleSubmit<IListProjectForm>(data => {
-        NotificationsService.success("Product listed successfully")
+
+        if (isUpdating)
+            NotificationsService.success("Saved changes successfully")
+        else {
+            dispatch(openModal({
+                Modal: "ProjectListedModal", props: {
+                    project: {
+                        id: data.id!,
+                        name: data.name,
+                        img: data.thumbnail_image || "https://picsum.photos/id/870/150/150.jpg",
+                        tagline: data.tagline,
+                    }
+                }
+            }))
+        }
         console.log(data);
     }, () => {
         NotificationsService.error("Please fill all the required fields");