Merge pull request #16 from niscy-eudiw/feat/same-device

Feat/same device
eu-digital-identity-wallet · Sep 24, 2024 · 796148f · 796148f
2 parents 69068d1 + f6a3b9e
commit 796148f
Show file tree

Hide file tree

Showing 18 changed files with 549 additions and 310 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,9 +18,9 @@
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^2.1.7",
     "@hookform/resolvers": "^3.9.0",
-    "@mui/material": "^5.16.7",
+    "@mui/material": "^6.1",
     "@mui/material-nextjs": "^6.1.0",
-    "@mui/x-date-pickers": "^6.20.2",
+    "@mui/x-date-pickers": "^7.10",
     "@prisma/client": "^5.19.1",
     "cbor-x": "^1.6.0",
     "dayjs": "^1.11.13",

diff --git a/src/client/components/atoms/AccommodationIcon.tsx b/src/client/components/atoms/AccommodationIcon.tsx
@@ -0,0 +1,35 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+interface IconProps extends SvgIconProps {
+  className?: string;
+}
+
+const AccommodationIcon: React.FC<IconProps> = ({ className, ...props }) => {
+  return (
+    <SvgIcon
+      {...props}
+      className={className}
+      viewBox="0 0 24 24"
+      sx={{
+        fontSize: 24,
+        ...(props.sx || {}), // Allow custom sx prop to override styles
+      }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 10.78V8C21 6.35 19.65 5 18 5H14C13.23 5 12.53 5.3 12 5.78C11.47 5.3 10.77 5 10 5H6C4.35 5 3 6.35 3 8V10.78C2.39 11.33 2 12.12 2 13V19H4V17H20V19H22V13C22 12.12 21.61 11.33 21 10.78ZM14 7H18C18.55 7 19 7.45 19 8V10H13V8C13 7.45 13.45 7 14 7ZM5 8C5 7.45 5.45 7 6 7H10C10.55 7 11 7.45 11 8V10H5V8ZM4 15V13C4 12.45 4.45 12 5 12H19C19.55 12 20 12.45 20 13V15H4Z"
+          fill={"black"}
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default AccommodationIcon;
diff --git a/src/client/components/atoms/CarRentalIcon.tsx b/src/client/components/atoms/CarRentalIcon.tsx
@@ -0,0 +1,47 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+interface IconProps extends SvgIconProps {
+  className?: string;
+}
+
+const CarRentalIcon: React.FC<IconProps> = ({ className, ...props }) => {
+  return (
+    <SvgIcon
+      {...props}
+      className={className}
+      viewBox="0 0 24 24"
+      sx={{
+        fontSize: 24,
+        ...(props.sx || {}), // Allow custom sx prop to override styles
+      }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9 18C9.55228 18 10 17.5523 10 17C10 16.4477 9.55228 16 9 16C8.44772 16 8 16.4477 8 17C8 17.5523 8.44772 18 9 18Z"
+          fill="black"
+        />
+        <path
+          d="M15 18C15.5523 18 16 17.5523 16 17C16 16.4477 15.5523 16 15 16C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18Z"
+          fill="black"
+        />
+        <path
+          d="M17.25 10.1C17.23 10.08 17.22 10.06 17.2 10.03C16.82 9.51 16.28 9.5 16.28 9.5H7.72C7.72 9.5 7.18 9.51 6.8 10.04C6.78 10.06 6.77 10.08 6.75 10.1C6.68 10.21 6.61 10.34 6.56 10.5C6.34 11.16 5.82 12.72 5 15.19V21.69C5 22.14 5.35 22.5 5.78 22.5H6.22C6.65 22.5 7 22.14 7 21.69V20.5H17V21.69C17 22.14 17.34 22.5 17.78 22.5H18.22C18.65 22.5 19 22.14 19 21.69V15.19C18.18 12.73 17.66 11.16 17.44 10.5C17.39 10.34 17.32 10.21 17.25 10.1ZM8.33 11.5H15.67L15.9 12.19L16.33 13.5H7.67L8.33 11.5ZM17 18.5H7V15.5H17V18.5Z"
+          fill="black"
+        />
+        <path
+          d="M10.83 3.5C10.41 2.33 9.3 1.5 8 1.5C6.34 1.5 5 2.84 5 4.5C5 6.15 6.34 7.5 8 7.5C9.3 7.5 10.41 6.66 10.83 5.5H16V7.5H18V5.5H19V3.5H10.83ZM8 5.5C7.45 5.5 7 5.05 7 4.5C7 3.95 7.45 3.5 8 3.5C8.55 3.5 9 3.95 9 4.5C9 5.05 8.55 5.5 8 5.5Z"
+          fill="black"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default CarRentalIcon;
diff --git a/src/client/components/atoms/DatePickerField.tsx b/src/client/components/atoms/DatePickerField.tsx
@@ -1,6 +1,7 @@
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { TextField } from '@mui/material';
 import React from 'react';
+import dayjs from 'dayjs';
 
 interface DatePickerFieldProps {
   label: string;
@@ -13,8 +14,14 @@ export const DatePickerField: React.FC<DatePickerFieldProps> = ({ label, value,
   return (
     <DatePicker
       label={label}
-      value={value}
-      onChange={onChange}
+      value={value ? dayjs(value) : null} 
+      onChange={(newValue) => {
+        if (newValue) {
+          onChange(newValue.toDate()); // Convert Dayjs back to Date
+        } else {
+          onChange(null);
+        }
+      }}
       sx={{minWidth:'240px',width:'100%'}}
       slotProps={{
         textField: {

diff --git a/src/client/components/atoms/Logo.tsx b/src/client/components/atoms/Logo.tsx
@@ -1,29 +1,36 @@
-import React from 'react';
-import { Box, Typography } from '@mui/material';
-import Image from 'next/image';
+import { Box, Typography } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
 
 const Logo: React.FC = () => {
   return (
     <Box
+      component={Link}
+      href="/"
       display="flex"
-
       justifyContent="center"
       alignItems="center"
       pl={1}
       pr={2}
       gap={1}
       bgcolor="secondary.main"
       borderRadius={1}
-      className="my-auto"
-    > 
+      sx={{ cursor: "pointer", textDecoration: "none" }}
+    >
       <Image
         src="/images/logo.svg"
         alt="TravelBook logo"
-        width={24}  // Replace 12px with 24px to scale the image size
-        height={24} // Proportional height for square image
+        width={24}
+        height={24}
         className="shrink-0"
       />
-      <Box display="flex" flexDirection="column" alignItems="left" className="my-auto">
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="left"
+        className="my-auto"
+      >
         <Typography variant="h6" component="span" color="textPrimary">
           TravelBook
         </Typography>
@@ -32,4 +39,4 @@ const Logo: React.FC = () => {
   );
 };
 
-export default Logo;
+export default Logo;
diff --git a/src/client/components/atoms/Sidebar.tsx b/src/client/components/atoms/Sidebar.tsx
@@ -7,12 +7,10 @@ const Sidebar: React.FC = () => {
     <Box
       sx={{
         w: "100%",
-        p: 2,
         display: "flex",
         flexDirection: "column",
-        flexWrap: "wrap",
-        alignItems: { sm: "center", md: "end" },
-        justifyContent: { sm: "center", md: "end" },
+        flexWrap: { xs: "nowrap" , s: "nowrap"  },
+        alignItems: { md: "flex-end", s: "center" , xs: "center" },
       }}
     >
       <Image src="/images/sidebar.png" alt="reviews" width={259} height={454} />

diff --git a/src/client/components/molecules/CarInformation.tsx b/src/client/components/molecules/CarInformation.tsx
@@ -1,5 +1,6 @@
 import { Box, Button, Typography } from "@mui/material";
 import Image from "next/image";
+import CarRentalIcon from "../atoms/CarRentalIcon";
 import RightBoxArrowIcon from "../atoms/RightBoxArrowIcon";
 
 export default function CarInformation() {
@@ -18,7 +19,18 @@ export default function CarInformation() {
         flexDirection: "column",
       }}
     >
-      <Typography fontWeight={"bold"}>Car rental information</Typography>
+      <Box
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: "4px",
+        }}
+      >
+        <CarRentalIcon />
+        <Typography fontWeight={"bold"}>Car rental information</Typography>
+      </Box>
+
       {/* Car Image and Information */}
 
       <Image src="/images/car.png" alt="car" width={217} height={145} />

diff --git a/src/client/components/molecules/Navigation.tsx b/src/client/components/molecules/Navigation.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import { Box, Typography, IconButton } from "@mui/material";
+import { Box, IconButton, Typography } from "@mui/material";
 import Image from "next/image";
+import React from "react";
 
 interface NavItem {
   icon: string;
@@ -63,7 +63,12 @@ const Navigation: React.FC = () => {
           />
         </IconButton>
         <IconButton>
-          <Image src="/images/bell.svg" width={24} height={24} alt="Notifications" />
+          <Image
+            src="/images/bell.svg"
+            width={24}
+            height={24}
+            alt="Notifications"
+          />
         </IconButton>
 
         <Box display="flex" gap={1} alignItems="center">
@@ -89,7 +94,13 @@ const Navigation: React.FC = () => {
         }}
       >
         {navItems.map((item, index) => (
-          <Box key={index} display="flex" gap={1} alignItems="center">
+          <Box
+            sx={{ cursor: "pointer" }}
+            key={index}
+            display="flex"
+            gap={1}
+            alignItems="center"
+          >
             <Image
               src={item.icon}
               width={24}

diff --git a/src/client/components/molecules/ReservationConfirmation.tsx b/src/client/components/molecules/ReservationConfirmation.tsx
@@ -1,4 +1,4 @@
-import { useBookingStore } from "@/client/store";
+import { ModalStatus, useAppStore, useBookingStore } from "@/client/store";
 import { BookingDetailsDto } from "@/shared";
 import {
   Box,
@@ -9,7 +9,9 @@ import {
 } from "@mui/material";
 import Image from "next/image";
 import { toast } from "react-toastify";
+import AccommodationIcon from "../atoms/AccommodationIcon";
 import CopyIcon from "../atoms/CopyIcon";
+import { useEffect } from "react";
 
 type Props = { details: BookingDetailsDto; id: string; deviceType: string };
 
@@ -26,24 +28,36 @@ export default function ReservationConfirmation({
     reservationDate,
     hotel,
   } = details;
-  const { isLoading, issueConfirmationAsync } = useBookingStore();
+
+  const { changeModalStatus, modal } = useAppStore(); // Get modal state
+  const { isLoading, issueConfirmationAsync, issueConfirmationRes } = useBookingStore();
 
   const copyToClipboard = () => {
     navigator.clipboard.writeText(id);
     toast.info("successfully copied to clipboard");
   };
+
   const issueConfirmation = async () => {
-    if (deviceType === "mobile") {
-      // window.location.href = bookingCreateRes?.url; // Navigate to the confirmation page
-    } else {
-      await issueConfirmationAsync(id);
-    }
+    await issueConfirmationAsync(id);
   };
+
+
   return (
     <Box sx={{ display: "flex", flexDirection: "column" }}>
-      <Typography fontWeight={"bold"}>
-        Here is your resenvation confirmation
-      </Typography>
+      <Box
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: "4px",
+        }}
+      >
+        <AccommodationIcon />
+        <Typography fontWeight={"bold"}>
+          Here is your resenvation confirmation
+        </Typography>
+      </Box>
+
       {/* Hotel Details */}
       <Box sx={{ mt: 2 }}>
         <Typography fontWeight="bold" color="green">

diff --git a/src/client/components/organisms/BookingForm.tsx b/src/client/components/organisms/BookingForm.tsx
@@ -25,7 +25,6 @@ export const BookingForm: React.FC = () => {
   const deviceType = useAppStore((state) => state.deviceType);
 
   const onSubmit = async (data: BookingDto) => {
-    console.log(data);
     await createBookingAsync(data);
   };
 
@@ -97,6 +96,7 @@ export const BookingForm: React.FC = () => {
                 <Button
                   variant="contained"
                   color="primary"
+                  type="submit"
                   sx={{
                     display: "flex",
                     flexDirection: "column",

diff --git a/src/env.mjs b/src/env.mjs
@@ -51,14 +51,12 @@ const merged = server.merge(client);
 
 let env = /** @type {MergedOutput} */ (process.env);
 
-if (!!process.env.SKIP_ENV_VALIDATION === false) {
+export function validateEnv() {
   const isServer = typeof window === 'undefined';
 
-  const parsed = /** @type {MergedSafeParseReturn} */ (
-    isServer
-      ? merged.safeParse(processEnv) // on server we can validate all env vars
-      : client.safeParse(processEnv) // on client we can only validate the ones that are exposed
-  );
+  const parsed = isServer
+    ? merged.safeParse(processEnv) // On the server, validate all env vars
+    : client.safeParse(processEnv); // On the client, validate only client-exposed env vars
 
   if (parsed.success === false) {
     console.error('❌ Invalid environment variables:', parsed.error.flatten().fieldErrors);
@@ -68,17 +66,17 @@ if (!!process.env.SKIP_ENV_VALIDATION === false) {
   env = new Proxy(parsed.data, {
     get(target, prop) {
       if (typeof prop !== 'string') return undefined;
-      // Throw a descriptive error if a server-side env var is accessed on the client
-      // Otherwise it would just be returning `undefined` and be annoying to debug
+      // Throw an error if a server-side env var is accessed on the client
       if (!isServer && !prop.startsWith('NEXT_PUBLIC_'))
         throw new Error(
           process.env.NODE_ENV === 'production'
             ? '❌ Attempted to access a server-side environment variable on the client'
             : `❌ Attempted to access server-side environment variable '${prop}' on the client`,
         );
-      return target[/** @type {keyof typeof target} */ (prop)];
+      return target[prop];
     },
   });
 }
 
+
 export { env };