Feat/attention card

src/App.tsx

@@ -5,6 +5,8 @@ import { routes } from "./routes/routes"
 import { NotificationProvider } from "./contexts/notificationContext/NotificationContext"
 import { NotificationContainer } from "./contexts/notificationContext/NotificationContainer"
 
+
+
 function App() {
   const router = createBrowserRouter(routes)
   const [queryClient] = useState(

src/assets/Icons/AttentionBlue.tsx

@@ -0,0 +1,33 @@
+
+import { TIconProps } from "./types"
+import { memo } from "react"
+
+const Component: React.FC<TIconProps> = props => {
+    const { width = 20, height = 20, ...rest } = props
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...rest}
+        >
+            <rect width="24" height="24" rx="12" fill="#EBFAFD" />
+            <g clip-path="url(#clip0_3465_30528)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.83334 12.0001C4.83334 15.9534 8.04668 19.1668 12 19.1668C15.9533 19.1668 19.1667 15.9534 19.1667 12.0001C19.1667 8.04677 15.9533 4.83344 12 4.83344C8.04668 4.83344 4.83334 8.04677 4.83334 12.0001ZM5.83334 12.0001C5.83334 8.6001 8.60001 5.83344 12 5.83344C15.4 5.83344 18.1667 8.6001 18.1667 12.0001C18.1667 15.4001 15.4 18.1668 12 18.1668C8.60001 18.1668 5.83334 15.4001 5.83334 12.0001Z" fill="#292D32" />
+                <path d="M11.7467 15.28C11.8267 15.3134 11.9133 15.3334 12 15.3334C12.0867 15.3334 12.1733 15.3134 12.2533 15.28C12.3333 15.2467 12.4067 15.2 12.4733 15.14C12.5333 15.0734 12.58 15.0067 12.6133 14.92C12.6467 14.84 12.6667 14.7534 12.6667 14.6667C12.6667 14.58 12.6467 14.4934 12.6133 14.4134C12.58 14.3334 12.5333 14.26 12.4733 14.1934C12.4067 14.1334 12.3333 14.0867 12.2533 14.0534C12.0933 13.9867 11.9067 13.9867 11.7467 14.0534C11.6667 14.0867 11.5933 14.1334 11.5267 14.1934C11.4667 14.26 11.42 14.3334 11.3867 14.4134C11.3533 14.4934 11.3333 14.58 11.3333 14.6667C11.3333 14.7534 11.3533 14.84 11.3867 14.92C11.42 15.0067 11.4667 15.0734 11.5267 15.14C11.5933 15.2 11.6667 15.2467 11.7467 15.28Z" fill="#292D32" />
+                <path d="M11.5 12.6668C11.5 12.9401 11.7267 13.1668 12 13.1668C12.2733 13.1668 12.5 12.9401 12.5 12.6668V9.33344C12.5 9.0601 12.2733 8.83344 12 8.83344C11.7267 8.83344 11.5 9.0601 11.5 9.33344V12.6668Z" fill="#292D32" />
+            </g>
+            <defs>
+                <clipPath id="clip0_3465_30528">
+                    <rect width="16" height="16" fill="white" transform="translate(4 4.00006)" />
+                </clipPath>
+            </defs>
+        </svg>
+
+
+    )
+}
+
+export const AttentionBlue = memo(Component)

src/assets/Icons/AttentionRed.tsx

@@ -0,0 +1,33 @@
+import { TIconProps } from "./types"
+import { memo } from "react"
+
+const Component: React.FC<TIconProps> = props => {
+    const { width = 20, height = 20, ...rest } = props
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...rest}
+        >
+            <rect width="24" height="24" rx="12" fill="#FFEFEF" />
+            <g clip-path="url(#clip0_2759_34589)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.83325 11.9997C4.83325 15.953 8.04659 19.1663 11.9999 19.1663C15.9533 19.1663 19.1666 15.953 19.1666 11.9997C19.1666 8.04634 15.9533 4.83301 11.9999 4.83301C8.04659 4.83301 4.83325 8.04634 4.83325 11.9997ZM5.83325 11.9997C5.83325 8.59967 8.59992 5.83301 11.9999 5.83301C15.3999 5.83301 18.1666 8.59967 18.1666 11.9997C18.1666 15.3997 15.3999 18.1663 11.9999 18.1663C8.59992 18.1663 5.83325 15.3997 5.83325 11.9997Z" fill="#181A1A" />
+                <path d="M11.7466 15.2796C11.8266 15.3129 11.9133 15.3329 11.9999 15.3329C12.0866 15.3329 12.1733 15.3129 12.2533 15.2796C12.3333 15.2463 12.4066 15.1996 12.4733 15.1396C12.5333 15.0729 12.5799 15.0063 12.6133 14.9196C12.6466 14.8396 12.6666 14.7529 12.6666 14.6663C12.6666 14.5796 12.6466 14.4929 12.6133 14.4129C12.5799 14.3329 12.5333 14.2596 12.4733 14.1929C12.4066 14.1329 12.3333 14.0863 12.2533 14.0529C12.0933 13.9863 11.9066 13.9863 11.7466 14.0529C11.6666 14.0863 11.5933 14.1329 11.5266 14.1929C11.4666 14.2596 11.4199 14.3329 11.3866 14.4129C11.3533 14.4929 11.3333 14.5796 11.3333 14.6663C11.3333 14.7529 11.3533 14.8396 11.3866 14.9196C11.4199 15.0063 11.4666 15.0729 11.5266 15.1396C11.5933 15.1996 11.6666 15.2463 11.7466 15.2796Z" fill="#181A1A" />
+                <path d="M11.5 12.6663C11.5 12.9397 11.7267 13.1663 12 13.1663C12.2733 13.1663 12.5 12.9397 12.5 12.6663V9.33301C12.5 9.05967 12.2733 8.83301 12 8.83301C11.7267 8.83301 11.5 9.05967 11.5 9.33301V12.6663Z" fill="#181A1A" />
+            </g>
+            <defs>
+                <clipPath id="clip0_2759_34589">
+                    <rect width="16" height="16" fill="white" transform="translate(4 4)" />
+                </clipPath>
+            </defs>
+        </svg>
+
+
+
+    )
+}
+
+export const AttentionRed = memo(Component)

src/assets/Icons/AttentionYellow.tsx

@@ -0,0 +1,24 @@
+import { TIconProps } from "./types"
+import { memo } from "react"
+
+const Component: React.FC<TIconProps> = props => {
+    const { width = 20, height = 20, ...rest } = props
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...rest}
+        >
+            <rect width="24" height="24" rx="12" fill="#FFC107" />
+            <path d="M12 13.0504C11.754 13.0504 11.55 12.8464 11.55 12.6004V9.60039C11.55 9.35439 11.754 9.15039 12 9.15039C12.246 9.15039 12.45 9.35439 12.45 9.60039V12.6004C12.45 12.8464 12.246 13.0504 12 13.0504Z" fill="#181A1A" stroke="#181A1A" stroke-width="0.3" />
+            <path d="M12.0001 15.0003C11.9641 15.0003 11.9221 14.9943 11.8801 14.9883C11.8441 14.9823 11.8081 14.9703 11.7721 14.9523C11.7361 14.9403 11.7001 14.9223 11.6641 14.8983C11.6341 14.8743 11.6041 14.8503 11.5741 14.8263C11.4661 14.7123 11.4001 14.5563 11.4001 14.4003C11.4001 14.2443 11.4661 14.0883 11.5741 13.9743C11.6041 13.9503 11.6341 13.9263 11.6641 13.9023C11.7001 13.8783 11.7361 13.8603 11.7721 13.8483C11.8081 13.8303 11.8441 13.8183 11.8801 13.8123C11.9581 13.7943 12.0421 13.7943 12.1141 13.8123C12.1561 13.8183 12.1921 13.8303 12.2281 13.8483C12.2641 13.8603 12.3001 13.8783 12.3361 13.9023C12.3661 13.9263 12.3961 13.9503 12.4261 13.9743C12.5341 14.0883 12.6001 14.2443 12.6001 14.4003C12.6001 14.5563 12.5341 14.7123 12.4261 14.8263C12.3961 14.8503 12.3661 14.8743 12.3361 14.8983C12.3001 14.9223 12.2641 14.9403 12.2281 14.9523C12.1921 14.9703 12.1561 14.9823 12.1141 14.9883C12.0781 14.9943 12.0361 15.0003 12.0001 15.0003Z" fill="#181A1A" stroke="#181A1A" stroke-width="0.3" />
+            <path d="M15.6359 17.4957H8.36394C7.19394 17.4957 6.29994 17.0697 5.84394 16.3017C5.39394 15.5337 5.45394 14.5437 6.02394 13.5177L9.65994 6.97771C10.2599 5.89771 11.0879 5.30371 11.9999 5.30371C12.9119 5.30371 13.7399 5.89771 14.3399 6.97771L17.9759 13.5237C18.5459 14.5497 18.6119 15.5337 18.1559 16.3077C17.6999 17.0697 16.8059 17.4957 15.6359 17.4957ZM11.9999 6.20371C11.4359 6.20371 10.8839 6.63571 10.4459 7.41571L6.81594 13.9617C6.40794 14.6937 6.34194 15.3657 6.62394 15.8517C6.90594 16.3377 7.52994 16.6017 8.36994 16.6017H15.6419C16.4819 16.6017 17.0999 16.3377 17.3879 15.8517C17.6759 15.3657 17.6039 14.6997 17.1959 13.9617L13.5539 7.41571C13.1159 6.63571 12.5639 6.20371 11.9999 6.20371Z" fill="#181A1A" stroke="#181A1A" stroke-width="0.3" />
+        </svg>
+
+    )
+}
+
+export const AttentionYellow = memo(Component)

src/assets/Icons/types.tsx

@@ -14,6 +14,10 @@ import { CategoryIcon } from "@/assets/Icons/CategoryIcon.tsx"
 import { ClientIcon } from "@/assets/Icons/ClientIcon.tsx"
 import { CalendarIcon } from "@/assets/Icons/CalendarIcon.tsx"
 import { DownArrowIcon } from "./DownArrowIcon"
+import { AttentionYellow } from "./AttentionYellow"
+import { AttentionBlue } from "./AttentionBlue"
+import { AttentionRed } from "./AttentionRed"
+
 
 export type TIcon =
   | "PlusIcon"
@@ -32,6 +36,9 @@ export type TIcon =
   | "AnimalIcon"
   | "CalendarIcon"
   | "DownArrowIcon"
+  | "AttentionYellow"
+  | "AttentionBlue"
+  | "AttentionRed"
 
 export type TIconProps = SVGProps<SVGSVGElement>
 
@@ -50,5 +57,8 @@ export const iconTypes = new Map<TIcon, React.JSX.Element>([
   ["CategoryIcon", <CategoryIcon key={"CategoryIcon"} />],
   ["ClientIcon", <ClientIcon key={"ClientIcon"} />],
   ["CalendarIcon", <CalendarIcon key={"CalendarIcon"} />],
-  ["DownArrowIcon", <DownArrowIcon key={"DownArrowIcon"}/>],
+  ["DownArrowIcon", <DownArrowIcon key={"DownArrowIcon"} />],
+  ["AttentionYellow", <AttentionYellow key={"AttentionYellow"} />],
+  ["AttentionBlue", <AttentionBlue key={"AttentionBlue"} />],
+  ["AttentionRed", <AttentionRed key={"AttentionRed"} />],
 ])

src/modules/Booking/components/form/blocks/CategoryForm/CategoryRoomsForm.tsx

@@ -6,6 +6,8 @@ import {
   ICategoryAndRoom,
 } from "@/modules/Booking/model/types/BookingValidationSchema"
 
+
+
 interface CategoryRoomsProps {
   form: UseFormReturn<ICategoryAndRoom>
   bookingData: DeepPartial<IBookingForm>
@@ -34,6 +36,7 @@ export const CategoryRoomsForm = (props: CategoryRoomsProps) => {
           )
         }}
       />
+
       <Controller
         control={control}
         name="rooms"

src/modules/Booking/components/modal/BookingModal/BookingModal.tsx

@@ -7,6 +7,7 @@ import { IBookingForm } from "../../../model/types/BookingValidationSchema"
 import { addConfirmationNotification } from "@/shared/utils/utils"
 import { useNavigate } from "react-router-dom"
 
+
 type TProps = {
   children: React.ReactNode
   onSubmit: UseFormHandleSubmit<DeepPartial<IBookingForm>>
@@ -127,6 +128,7 @@ export const BookingModal: React.FC<TProps> = memo(props => {
           </Button>
         </Box>
       </form>
+
     </Dialog>
   )
 })

src/shared/ui/ErrorBar/ErrorBar.tsx

@@ -0,0 +1,50 @@
+
+import { Box } from "@mui/material"
+import { Typography, styled } from "@mui/material"
+import { Icon } from '../Icon/Icon';
+import { BarStyle } from "./utils";
+
+
+const BarTitle = styled(Typography)(() => ({
+    color: "#181A1A",
+    fontSize: "16px",
+    fontWeight: 700,
+    lineHeight: "16px",
+    paddingLeft: "8px"
+}))
+const BarBody = styled(Typography)(() => ({
+    color: "#181A1A",
+    fontSize: "14px",
+    fontWeight: 400,
+    lineHeight: "20px",
+    paddingLeft: "8px"
+}))
+
+
+interface ErrorProps { title: string, body: string, style: StyleTheme }
+export type StyleTheme = "Blue" | "Red" | "Yellow"
+
+
+const ErrorBar = (props: ErrorProps) => {
+
+    const { title, body, style } = props
+    const Bar = BarStyle(style)
+
+    return (
+        <Box className='pt-5 px-4 items-start' display={'flex'} sx={{ border: Bar.Border, borderRadius: '12px', width: '488px', }}>
+            <Icon width='24px' height='24px' type={Bar.Logo} />
+            <div >
+                <BarTitle >
+                    {title}
+                </BarTitle>
+                <BarBody className='pt-1 pb-4 '>
+                    {body}
+                </BarBody>
+            </div>
+        </Box>
+
+    );
+}
+
+export default ErrorBar;
+

src/shared/ui/ErrorBar/utils.ts

@@ -0,0 +1,33 @@
+import { TIcon } from "@/assets/Icons/types";
+import { StyleTheme } from "./ErrorBar";
+
+interface Theme { Logo: TIcon, Border: string }
+const YellowTheme: Theme = {
+    Logo: 'AttentionYellow',
+    Border: '2px solid #FFC107'
+}
+const BlueTheme: Theme = {
+    Logo: 'AttentionBlue',
+    Border: '2px solid #196D88'
+
+}
+const RedTheme: Theme = {
+    Logo: 'AttentionRed',
+    Border: '2px solid #FF7878'
+
+}
+
+export const BarStyle = (type: StyleTheme) => {
+    switch (type) {
+        case 'Yellow':
+            return YellowTheme
+            break;
+        case 'Blue':
+            return BlueTheme
+            break;
+        case 'Red':
+            return RedTheme
+            break;
+
+    }
+}

src/shared/ui/Icon/Icon.tsx

@@ -1,6 +1,6 @@
 import { TIcon, iconTypes } from "@/assets/Icons/types"
-import { cn, formatToStringWithPx } from "@/lib/utils"
-import { DOMAttributes, memo, useEffect, useRef } from "react"
+import { cn } from "@/lib/utils"
+import { DOMAttributes, memo, useRef } from "react"
 import styles from "./Icon.module.scss"
 
 const getIcon = (type: TIcon) => iconTypes.get(type)
@@ -28,29 +28,29 @@ const Component: React.FC<TProps> = props => {
 
   const iconRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    if (iconRef.current) {
-      if (size && !height && !width) {
-        iconRef.current.style.setProperty(
-          "--icon-height",
-          formatToStringWithPx(size)
-        )
-        iconRef.current.style.setProperty(
-          "--icon-width",
-          formatToStringWithPx(size)
-        )
-      } else if (!size && height && width) {
-        iconRef.current.style.setProperty(
-          "--icon-height",
-          formatToStringWithPx(height)
-        )
-        iconRef.current.style.setProperty(
-          "--icon-width",
-          formatToStringWithPx(width)
-        )
-      }
-    }
-  }, [height, size, width])
+  // useEffect(() => {
+  //   if (iconRef.current) {
+  //     if (size && !height && !width) {
+  //       iconRef.current.style.setProperty(
+  //         "--icon-height",
+  //         formatToStringWithPx(size)
+  //       )
+  //       iconRef.current.style.setProperty(
+  //         "--icon-width",
+  //         formatToStringWithPx(size)
+  //       )
+  //     } else if (!size && height && width) {
+  //       iconRef.current.style.setProperty(
+  //         "--icon-height",
+  //         formatToStringWithPx(height)
+  //       )
+  //       iconRef.current.style.setProperty(
+  //         "--icon-width",
+  //         formatToStringWithPx(width)
+  //       )
+  //     }
+  //   }
+  // }, [height, size, width])
   if (!type) {
     return
   }
@@ -59,6 +59,10 @@ const Component: React.FC<TProps> = props => {
     <div
       className={cn(styles.Icon, className)}
       ref={iconRef}
+      style={{
+        width,
+        height
+      }}
       data-testid={dataTestId}
       {...rest}
     >