Merge pull request #132 from errhythm/submitModal

Add modal with guidelines to Submit দাবি

apps/jonogon-web-next/src/app/petition/draft/_page.tsx

@@ -11,16 +11,17 @@ import {Input} from '@/components/ui/input';
 import {Button} from '@/components/ui/button';
 import {AutoCompleteInput} from '@/components/ui/input-autocomplete';
 import {petitionLocations, petitionTargets} from '@/lib/constants';
-import { useAuthState } from '@/auth/token-manager';
+import {useAuthState} from '@/auth/token-manager';
 
 import SimilarPetitionsSuggestions from '@/components/custom/SimilarPetitionsSuggestions';
+import RegulationsModal from '@/components/custom/RegulationsModal';
 
 function storeDraftPetition<T>(data: T) {
     localStorage.setItem('draft-petition', JSON.stringify(data));
 }
 
 export default function EditLoggedOutDraftPetition() {
-    const isAuthenticated = useAuthState()
+    const isAuthenticated = useAuthState();
     const [isLoading, setIsLoading] = useState(false);
 
     const [showSimilarPetitions, setShowSimilarPetitions] = useState(true);
@@ -57,14 +58,14 @@ export default function EditLoggedOutDraftPetition() {
 
     const redirectToLogin = () => {
         setIsLoading(true);
-
-        const hasPetitionDraftData = Object.values(petitionData).some((v) => v && v.length > 0);
+        const hasPetitionDraftData = Object.values(petitionData).some(
+            (v) => v && v.length > 0,
+        );
         if (hasPetitionDraftData) {
             storeDraftPetition(petitionData);
         }
-
         router.push(`/login?next=${encodeURIComponent('/petition/draft')}`);
-    }
+    };
 
     useEffect(() => {
         if (isAuthenticated) {
@@ -102,8 +103,8 @@ export default function EditLoggedOutDraftPetition() {
                 </div>
                 {showSimilarPetitions && (
                     <SimilarPetitionsSuggestions
-                    title={petitionData.title ?? ''}
-                    onClose={() => setShowSimilarPetitions(false)}
+                        title={petitionData.title ?? ''}
+                        onClose={() => setShowSimilarPetitions(false)}
                     />
                 )}
                 <div className="flex flex-col gap-2">
@@ -217,6 +218,7 @@ export default function EditLoggedOutDraftPetition() {
                     </Button>
                 </div>
             </div>
+            <RegulationsModal onClose={() => router.push('/')} />
         </div>
     );
 }

apps/jonogon-web-next/src/app/petitions/[id]/edit/page.tsx

@@ -30,6 +30,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import PetitionFileUploader from '@/components/custom/PetitionFileUploader';
 import SimilarPetitionsSuggestions from '@/components/custom/SimilarPetitionsSuggestions';
+import RegulationsModal from '@/components/custom/RegulationsModal';
 // import {AutoCompleteInput} from '@/components/ui/input-autocomplete';
 // import {petitionLocations, petitionTargets} from '@/lib/constants';
 
@@ -45,9 +46,10 @@ export default function EditPetition() {
 
     const [showSimilarPetitions, setShowSimilarPetitions] = useState(true);
 
-    const {data: selfResponse, isLoading: isLoadingSelf} = trpc.users.getSelf.useQuery(undefined, {
-        enabled: !!isAuthenticated,
-    });
+    const {data: selfResponse, isLoading: isLoadingSelf} =
+        trpc.users.getSelf.useQuery(undefined, {
+            enabled: !!isAuthenticated,
+        });
 
     const freshValue = params.get('fresh');
 
@@ -171,7 +173,10 @@ export default function EditPetition() {
         },
     });
 
-    const handleAttachmentUpload = (attachment: { type: 'image' | 'file', file: File }) => {
+    const handleAttachmentUpload = (attachment: {
+        type: 'image' | 'file';
+        file: File;
+    }) => {
         uploadAttachment({
             type: attachment.type,
             file: attachment.file,
@@ -289,8 +294,8 @@ export default function EditPetition() {
                 </div>
                 {freshValue && showSimilarPetitions && (
                     <SimilarPetitionsSuggestions
-                    title={petitionData.title ?? ''}
-                    onClose={() => setShowSimilarPetitions(false)}
+                        title={petitionData.title ?? ''}
+                        onClose={() => setShowSimilarPetitions(false)}
                     />
                 )}
                 <div className="flex flex-col gap-2">
@@ -338,17 +343,25 @@ export default function EditPetition() {
                     banglaLabel="ছবি"
                     fileType="image"
                     files={petitionRemoteData?.data?.attachments || []}
-                    onAttachmentsChange={(attachment) => handleAttachmentUpload(attachment)}
-                    removeAttachment={(attachment) => removeAttachment(attachment)}
+                    onAttachmentsChange={(attachment) =>
+                        handleAttachmentUpload(attachment)
+                    }
+                    removeAttachment={(attachment) =>
+                        removeAttachment(attachment)
+                    }
                     petitionId={Number(petition_id)}
                 />
                 <PetitionFileUploader
                     label="Files"
                     banglaLabel="ফাইল"
                     fileType="file"
                     files={petitionRemoteData?.data?.attachments || []}
-                    onAttachmentsChange={(attachment) => handleAttachmentUpload(attachment)}
-                    removeAttachment={(attachment) => removeAttachment(attachment)}
+                    onAttachmentsChange={(attachment) =>
+                        handleAttachmentUpload(attachment)
+                    }
+                    removeAttachment={(attachment) =>
+                        removeAttachment(attachment)
+                    }
                     petitionId={Number(petition_id)}
                 />
                 <div className="flex flex-col gap-2">
@@ -384,6 +397,14 @@ export default function EditPetition() {
                     </Button>
                 </div>
             </div>
+            <RegulationsModal
+                shouldShow={!!freshValue}
+                onClose={() => {
+                    if (freshValue) {
+                        router.push('/');
+                    }
+                }}
+            />
         </div>
     );
 }

apps/jonogon-web-next/src/components/custom/RegulationsModal.tsx

@@ -0,0 +1,120 @@
+import React, {useState, useEffect} from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {Button} from '@/components/ui/button';
+
+interface RegulationsModalProps {
+    onClose?: () => void;
+    onAccept?: () => void;
+    shouldShow?: boolean;
+}
+
+const RegulationsModal: React.FC<RegulationsModalProps> = ({
+    onClose,
+    onAccept,
+    shouldShow = true,
+}: RegulationsModalProps) => {
+    const [isOpen, setIsOpen] = useState(shouldShow);
+
+    useEffect(() => {
+        setIsOpen(shouldShow);
+    }, [shouldShow]);
+
+    const handleClose = () => {
+        setIsOpen(false);
+        onClose?.();
+    };
+
+    const handleAccept = () => {
+        setIsOpen(false);
+        onAccept?.();
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={handleClose}>
+            <DialogContent
+                className="w-full max-w-[600px] max-h-full px-2 py-10 border-4 border-[#EF4335] bg-[#F7F2ED] !rounded-2xl overflow-y-auto"
+                closeButton={false}>
+                <div className="md:max-h-[calc(90vh-50px)] sm:max-h-[100vh] px-4 overflow-y-auto">
+                    <DialogHeader className="mb-8 mt-2">
+                        <DialogTitle className="text-black text-xl sm:text-2xl font-['Inter'] font-bold text-center leading-normal">
+                            Rules & regulations for filing দাবিs
+                        </DialogTitle>
+                    </DialogHeader>
+                    <div>
+                        {[
+                            {
+                                title: 'No bullying',
+                                description:
+                                    'Keep interactions constructive. Intimidation or harassment of any kind is not tolerated.',
+                            },
+                            {
+                                title: 'No Hate Speech',
+                                description:
+                                    'Express your views respectfully. Language that promotes hatred against individuals or groups is prohibited.',
+                            },
+                            {
+                                title: 'No Discrimination',
+                                description:
+                                    'Treat everyone equally. Discrimination based on race, gender, religion, or any other characteristic is unacceptable.',
+                            },
+                            {
+                                title: 'No Profanity',
+                                description:
+                                    'Maintain a civil tone. Use of offensive language or explicit content is not allowed.',
+                            },
+                            {
+                                title: 'No Racism',
+                                description:
+                                    'Embrace diversity. Racist comments or content promoting racial superiority are strictly forbidden.',
+                            },
+                        ].map((rule, index) => (
+                            <div
+                                key={index}
+                                className="flex items-center gap-3 sm:gap-5 mb-6">
+                                <div className="flex w-4 h-4 p-3 justify-center items-center rounded-full bg-[#EF4335] text-white text-xs sm:text-sm font-semibold font-['Inter']">
+                                    {index + 1}
+                                </div>
+                                <div>
+                                    <h3 className="text-black text-base sm:text-lg font-semibold font-['Inter'] mb-1">
+                                        {rule.title}
+                                    </h3>
+                                    <DialogDescription className="text-[#696969] text-xs sm:text-sm font-light font-['Inter']">
+                                        {rule.description}
+                                    </DialogDescription>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                    <div className="sticky bottom-0 bg-[#F7F2ED] pt-2">
+                        <Button
+                            onClick={handleAccept}
+                            className="w-full p-6 mb-4 rounded-lg bg-[#EF4335] hover:bg-[#D93A2D] transition-colors">
+                            <span className="text-white text-lg sm:text-xl font-bold font-['Inter']">
+                                Accept
+                            </span>
+                        </Button>
+                        <p className="text-[#5B5B5B] font-['Inter'] text-xs sm:text-sm font-normal leading-normal">
+                            By accepting our rules and regulations you&apos;re
+                            accepting our{' '}
+                            <a
+                                href="https://elvista.notion.site/Jonogon-962f56d9d6ea42d3839790c2146b7f6a"
+                                target="_blank"
+                                className="text-[#312C2C] font-['Inter'] text-xs sm:text-sm font-normal leading-normal underline">
+                                Terms & Conditions
+                            </a>{' '}
+                            for behaving and acting accordingly in our platform.
+                        </p>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default RegulationsModal;

apps/jonogon-web-next/src/components/ui/dialog.tsx

@@ -29,8 +29,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({className, children, ...props}, ref) => (
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { closeButton?: boolean }
+>(({ className, children, closeButton = true, ...props }, ref) => (
     <DialogPortal>
         <DialogOverlay />
         <DialogPrimitive.Content
@@ -41,10 +41,12 @@ const DialogContent = React.forwardRef<
             )}
             {...props}>
             {children}
-            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-                <Cross2Icon className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-            </DialogPrimitive.Close>
+            {closeButton && (
+                <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                    <Cross2Icon className="h-4 w-4" />
+                    <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+            )}
         </DialogPrimitive.Content>
     </DialogPortal>
 ));