Feat/same device

package.json

@@ -22,7 +22,6 @@
     "@mui/material-nextjs": "^6.1.0",
     "@mui/x-date-pickers": "^6.20.2",
     "@prisma/client": "^5.19.1",
-    "@tailwindcss/forms": "^0.5.9",
     "cbor-x": "^1.6.0",
     "dayjs": "^1.11.13",
     "jks-js": "^1.1.3",
@@ -51,7 +50,6 @@
     "eslint-config-next": "14.2.5",
     "postcss": "^8.4.45",
     "prisma": "^5.19.1",
-    "tailwindcss": "^3.4.11",
     "typescript": "^5"
   }
 }

postcss.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
+  plugins: { 
     autoprefixer: {},
   },
 };

src/client/components/atoms/CopyIcon.tsx

@@ -12,7 +12,7 @@ const CopyIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size equivalent to "size-6" in Tailwind
+        fontSize: 24,  
         ...(props.sx || {}), // Allow custom sx prop to override styles
       }}
     >

src/client/components/atoms/HeartIcon.tsx

@@ -12,7 +12,7 @@ const HeartIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size (equivalent to Tailwind size-6)
+        fontSize: 24,  
         ...(props.sx || {}), // Allow custom `sx` prop to override styles
       }}
     >

src/client/components/atoms/PinIcon.tsx

@@ -12,7 +12,7 @@ const PinIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size equivalent to "w-6 h-6" in Tailwind
+        fontSize: 24, 
         ...(props.sx || {}), // Allow additional sx styles from props
       }}
     >

src/client/components/atoms/PlusIcon.tsx

@@ -12,7 +12,7 @@ const PlusIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size equivalent to Tailwind's "size-6"
+        fontSize: 24, 
         ...(props.sx || {}), // Allow custom sx prop to override styles
       }}
     >

src/client/components/atoms/ShareIcon.tsx

@@ -12,7 +12,7 @@ const ShareIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size equivalent to "size-6" in Tailwind
+        fontSize: 24,  
         ...(props.sx || {}), // Allow custom sx prop to override styles
       }}
     >

src/client/components/atoms/StarIcon.tsx

@@ -12,7 +12,7 @@ const StarIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size equivalent to "size-6" in Tailwind
+        fontSize: 24, 
         ...(props.sx || {}), // Allow custom sx prop to override styles
       }}
     >

src/client/components/atoms/TagIcon.tsx

@@ -12,7 +12,7 @@ const TagIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size equivalent to "size-6" in Tailwind
+        fontSize: 24,  
         ...(props.sx || {}), // Allow custom sx prop to override styles
       }}
     >

src/client/components/atoms/ThumbUpIcon.tsx

@@ -12,7 +12,7 @@ const ThumbUpIcon: React.FC<IconProps> = ({ className, ...props }) => {
       className={className}
       viewBox="0 0 24 24"
       sx={{
-        fontSize: 24, // Default size equivalent to Tailwind's "size-6"
+        fontSize: 24, 
         ...(props.sx || {}), // Allow custom sx prop to override styles
       }}
     >

src/client/components/organisms/BookingForm.tsx

@@ -3,13 +3,15 @@ import { useForm, FormProvider } from "react-hook-form";
 import { BookingGuestInfo } from "../molecules/BookingGuestInfo";
 import HotelDescription from "../molecules/HotelDescription";
 import { useBookingStore } from "@/client/store/bookingStore";
-import { useAppStore } from "@/client/store";
+import { ModalStatus, useAppStore } from "@/client/store";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { bookingDtoSchema } from "@/server/schemas/booking";
 import { BookingDto, Hotel } from "@/shared";
 import Image from "next/image";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import router from "next/router";
+import { useEffect } from "react";
 
 export const BookingForm: React.FC = () => {
   const methods = useForm<BookingDto>({
@@ -19,14 +21,26 @@ export const BookingForm: React.FC = () => {
       location: Hotel.location,
     },
   });
-  const { isLoading, createBookingAsync } = useBookingStore();
+  const { changeModalStatus, modal } = useAppStore(); // Get modal state
+  const { isLoading, createBookingAsync, bookingCreateRes } = useBookingStore();
   const deviceType = useAppStore((state) => state.deviceType);
 
   const onSubmit = async (data: BookingDto) => {
     console.log(data);
     await createBookingAsync(data);
   };
 
+  // Watch for changes in bookingCreateRes
+  useEffect(() => {
+    if (bookingCreateRes?.url) {
+      if (deviceType === 'desktop') {
+        changeModalStatus(ModalStatus.OPEN);
+      } else {
+        window.location.href = bookingCreateRes?.url;  // Navigate to the confirmation page
+      }
+    }
+  }, [bookingCreateRes?.url, deviceType, changeModalStatus]);
+
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
 
@@ -70,8 +84,8 @@ export const BookingForm: React.FC = () => {
               }}
             >
               {deviceType === "mobile" ? (
-                <Button variant="contained" color="primary" sx={{ display: "flex", flexDirection: "column", alignItems: "center", p: 2 }}>
-                  <Typography>Book using EUDI Wallet</Typography>
+                <Button variant="contained" color="primary" type="submit" sx={{ display: "flex", flexDirection: "column", alignItems: "center", p: 2 }}>
+                  <Typography sx={{ color: "white" }} >Book using EUDI Wallet</Typography>
                   <Image loading="lazy" src="/images/eudiwallet.svg" alt="EUDI Wallet" width={48} height={48} />
                 </Button>
               ) : (

src/client/components/organisms/ConfirmationDetails.tsx

@@ -24,7 +24,7 @@ const ConfirmationDetails = ({
     reservationDate,
   } = details;
   const { isLoading, issueConfirmationAsync  } = useBookingStore();
-
+console.log(id);
   return (
     <Box sx={{
       width:'100%',

src/client/components/organisms/Header.tsx

@@ -31,7 +31,7 @@ const Header: React.FC = () => {
         alt="Travel destination"
         sx={{
           width: '100%',
-          aspectRatio: '12.5', // Aspect ratio like the one in Tailwind
+          aspectRatio: '12.5', 
           maxWidth: '100%',
         }}
       />

src/client/hooks/useBookingVerify.ts

@@ -36,14 +36,15 @@ export const useBookingVerify = () => {
   const { data, error } = useSWR(
     bookingId,
     fetcher,
-    { refreshInterval: polling ? 1000 : 0 } // Poll every second if polling is true
+    { refreshInterval: polling ? 3000 : 0 } // Poll every second if polling is true
   );
 
   // Function to stop polling manually
   const stopPolling = useCallback(() => {
+    changeModalStatus(ModalStatus.CLOSE);
     setPolling(false);  // Stop polling
     resetBooking();     // Reset booking data
-    changeModalStatus(ModalStatus.CLOSE);  // Close modal
+     // Close modal
   }, [changeModalStatus, resetBooking]);
 
   // Handle polling logic and state changes
@@ -55,14 +56,14 @@ export const useBookingVerify = () => {
 
     if (data?.status && bookingId) {
       setStatus(true);     // Mark the status as verified
-      stopPolling();       // Stop polling after success
+      stopPolling(); 
       router.push(PATHS.confirmation(bookingId));  // Navigate to confirmation page
     }
 
     // Timeout logic to stop polling after 30 seconds
     const timeout = setTimeout(() => {
       stopPolling(); // Stop polling after 30 seconds
-    }, 30000);
+    }, 60000);
 
     return () => {
       clearTimeout(timeout); // Clear timeout on unmount

src/client/store/bookingStore.ts

@@ -34,7 +34,6 @@ export const useBookingStore = create<IBookingStore>()((set) => ({
       );
       set({ isLoading: false, bookingCreateRes: res });
 
-      useAppStore.getState().changeModalStatus(ModalStatus.OPEN);
     } catch (err) {
       let errorMessage = "Unknown error occurred";
       if (err instanceof Error) {

src/env.mjs

@@ -13,13 +13,14 @@ const server = z.object({
  * built with invalid env vars. To expose them to the client, prefix them with `NEXT_PUBLIC_`.
  */
 const client = z.object({
-  NEXT_PUBLIC_APP_NAME: z.string().optional(),
-  NEXT_PUBLIC_APP_URL: z.string().optional(),
-  VERIFIER_API_URL: z.string().optional(),
-  ISSUER_API_URL: z.string().optional(),
-  KEYSTORE_FILE: z.string().optional(),
-  KEYSTORE_PASS: z.string().optional(),
-  KEYSTORE_ALIAS: z.string().optional(),
+  POSTGRES_CONNECTION_STRING: z.string(),
+  NEXT_PUBLIC_APP_NAME: z.string(),
+  NEXT_PUBLIC_APP_URI: z.string(),
+  VERIFIER_API_URL: z.string(),
+  ISSUER_API_URL: z.string(),
+  KEYSTORE_FILE: z.string(),
+  KEYSTORE_PASS: z.string(),
+  KEYSTORE_ALIAS: z.string(),
 });
 
 /**
@@ -29,8 +30,9 @@ const client = z.object({
  * @type {Record<keyof z.infer<typeof server> | keyof z.infer<typeof client>, string | undefined>}
  */
 const processEnv = {
-  POSTGRES_CONNECTION_STRING: process.env.GRAPHQL_SERVER_URI,
+  POSTGRES_CONNECTION_STRING: process.env.POSTGRES_CONNECTION_STRING,
   NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME,
+  NEXT_PUBLIC_APP_URI: process.env.NEXT_PUBLIC_APP_URI,
   VERIFIER_API_URL: process.env.VERIFIER_API_URL,
   ISSUER_API_URL: process.env.ISSUER_API_URL,
   KEYSTORE_FILE: process.env.KEYSTORE_FILE,

src/helpers/deviceDetect.ts

@@ -1,3 +1,4 @@
+import { GetServerSidePropsContext } from "next/types";
 import DeviceDetector from "node-device-detector";
 const deviceDetector = new DeviceDetector();
 
@@ -7,3 +8,9 @@ export function deviceDetect(userAgent: string = "") {
 
   return deviceType;
 }
+
+
+export const getDeviceTypeProps = (context: GetServerSidePropsContext) => {
+  const deviceType = deviceDetect(context.req.headers['user-agent'] ?? '');
+  return { props: { deviceType } };
+};

src/pages/404.tsx

@@ -0,0 +1,40 @@
+import { Box, Typography, Button } from '@mui/material';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+const Custom404 = () => {
+  const router = useRouter();
+
+  const handleBackToHome = () => {
+    router.push('/'); // Redirect to the homepage
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+        textAlign: 'center',
+        p: 3,
+      }}
+    >
+      <Typography variant="h1" sx={{ fontWeight: 'bold', mb: 2 }}>
+        404
+      </Typography>
+      <Typography variant="h4" sx={{ mb: 4 }}>
+        Page Not Found
+      </Typography>
+      <Typography variant="body1" sx={{ mb: 4 }}>
+        The page you are looking for does not exist.
+      </Typography>
+      <Button variant="contained" color="primary" onClick={handleBackToHome}>
+        Back to Home
+      </Button>
+    </Box>
+  );
+};
+
+export default Custom404;

src/pages/api/booking/verification/[id].ts

@@ -26,7 +26,7 @@ export default async function handler(
 
     // Fetch the booking verification status from the service
     const bookingVerificationStatus =
-      await bookingService.bookingVerificationStatus(id);
+      await bookingService.bookingVerificationStatus({bookingID:id});
 
     // Handle cases where no status is returned (assuming this might happen)
     if (