feat: add terms&conditions popup (#413)

* add terms&conditions popup

* fix ci

* fix max-width and button

* fix build

---------

Co-authored-by: Marc Espin <mespinsanz@gmail.com>

Author: evavirseda

dapp/src/components/dialogs/TermsAndConditionsDialog.tsx

@@ -0,0 +1,78 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+    Button,
+    ButtonType,
+    Checkbox,
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogPosition,
+    Header,
+} from '@iota/apps-ui-kit';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+interface TermsAndConditionsDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export function TermsAndConditionsDialog({ open, onOpenChange }: TermsAndConditionsDialogProps) {
+    const [termsAccepted, setTermsAccepted] = useState(false);
+    const router = useRouter();
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent
+                containerId="overlay-portal-container"
+                position={DialogPosition.Center}
+                isFixedPosition
+                customWidth="w-full max-w-md md:max-w-2xl xl:max-w-[744px]"
+            >
+                <Header title="Terms & Conditions" onClose={() => onOpenChange(false)} />
+                <DialogBody>
+                    <div className="flex flex-col gap-xl">
+                        <div className="flex flex-col gap-md">
+                            <span className="text-label-md text-names-neutral-70">
+                                Effective Date: Lorem ipsum
+                            </span>
+                            <p className="text-body-md text-names-neutral-92">
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac
+                                aliquam neque, quis ullamcorper ipsum. Name ac purus a magna
+                                ullamcorper venenatis ac eu nulla. Integer odio nunc, pretium sed
+                                nibh non, dignissim mattis metus. Donec quis bibendum mi. Donec sed
+                                tortor ullamcorper, tempus urna porta, sollicitudin nulla. Donec
+                                mattis lectus non consectetur sollicitudin. Nunc vel erat sit amet
+                                lectus condimentum fermentum. Vestibulum dapibus eros ut congue
+                                consectetur. Integer laoreet, leo id hendrerit accumsan, nulla
+                                mauris bibendum nisi, id hendrerit erat nunc porttitor erat.
+                                Pellentesque vitae purus ac urna lacinia commodo. In quis nulla
+                                dapibus, mattis metus ac, vulputate arcu. Vestibulum quis velit
+                                risus. Name lacus nisi, lobortis ac tristique eget, viverra ut
+                                libero. Nulla interdum, nibh at egestas fermentum, lorem lectus
+                                consectetur felis, nec rutrum nibh arcu vel lorem. Proin id urna sit
+                                amet odio luctus vulputate vestibulum ut diam.
+                            </p>
+                        </div>
+                        <div className="flex flex-row items-center justify-between">
+                            <Checkbox
+                                name="terms_conditions"
+                                label="I have read, understand, and agree to the Terms of Service"
+                                onCheckedChange={() => setTermsAccepted(true)}
+                                isChecked={termsAccepted}
+                            />
+                            <Button
+                                onClick={() => router.push('/')}
+                                type={ButtonType.Primary}
+                                disabled={!termsAccepted}
+                                text="Accept"
+                            />
+                        </div>
+                    </div>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+}

dapp/src/components/layout/Footer.tsx

@@ -1,12 +1,38 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
+'use client';
+
 import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
 
+import { TermsAndConditionsDialog } from '@/components/dialogs/TermsAndConditionsDialog';
 import { FOOTER_LEGAL_LINKS, FOOTER_SOCIAL_LINKS } from '@/lib/constants';
 import { NamesLogoBranded } from '@/public/icons';
 
 export function Footer() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const modalParam = searchParams.get('modal');
+
+    const isTermsOpen = modalParam === 'terms_conditions';
+
+    const handleCloseModal = () => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete('modal');
+        router.replace(`/?${params.toString()}`, { scroll: false });
+    };
+
+    const handleLegalClick = (e: React.MouseEvent, path: string) => {
+        const url = new URL(path, window.location.href);
+        const modal = url.searchParams.get('modal');
+        if (modal === 'terms_conditions') {
+            e.preventDefault();
+            router.replace(path, { scroll: false });
+        }
+    };
+
     const COPYRIGHT_YEAR = new Date().getFullYear();
+
     return (
         <footer className="w-full bg-names-neutral-6 py-lg">
             <div className="container flex flex-col sm:flex-row justify-between items-center gap-y-lg">
@@ -21,6 +47,7 @@ export function Footer() {
                         <Link
                             key={title}
                             href={path}
+                            onClick={(e) => handleLegalClick(e, path)}
                             className="hover:text-names-primary-80 transition-colors duration-200"
                         >
                             {title}
@@ -35,6 +62,11 @@ export function Footer() {
                     ))}
                 </div>
             </div>
+
+            <TermsAndConditionsDialog
+                open={isTermsOpen}
+                onOpenChange={(open) => !open && handleCloseModal()}
+            />
         </footer>
     );
 }

dapp/src/lib/constants/routes.constants.tsx

@@ -35,7 +35,7 @@ export const FOOTER_SOCIAL_LINKS: Route[] = [
 export const FOOTER_LEGAL_LINKS: Route[] = [
     {
         title: 'Terms & Conditions',
-        path: '',
+        path: '/?modal=terms_conditions',
     },
     {
         title: 'Privacy Policy',