feat: work

package.json

@@ -46,6 +46,7 @@
 		"bytebuffer": "^5.0.1",
 		"caniuse-lite": "^1.0.30001579",
 		"case-sensitive-paths-webpack-plugin": "^2.4.0",
+		"classnames": "^2.5.1",
 		"clsx": "^1.1.1",
 		"copy-webpack-plugin": "^12.0.2",
 		"core-js": "^3.35.1",

src/api/apiGetUserDataBySessionId.ts

@@ -1,5 +1,5 @@
 import { endpoints } from '../resources/scripts/endpoints';
-import { fetchData, FETCH_METHODS } from './fetchData';
+import { fetchData, FETCH_METHODS, FETCH_ERRORS } from './fetchData';
 import { ConsultingSessionDataInterface } from '../globalState';
 
 export const apiGetUserDataBySessionId = async (
@@ -8,6 +8,7 @@ export const apiGetUserDataBySessionId = async (
 	return fetchData({
 		url: endpoints.userDataBySessionId(sessionId),
 		rcValidation: true,
-		method: FETCH_METHODS.GET
+		method: FETCH_METHODS.GET,
+		responseHandling: [FETCH_ERRORS.FORBIDDEN]
 	});
 };

src/components/box/Box.tsx

@@ -1,17 +1,27 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import './box.styles';
+import styles from './box.module.scss';
+import classNames from 'classnames';
+
+export enum BoxTypes {
+	ERROR = 'error',
+	INFO = 'info',
+	SUCCESS = 'success'
+}
 
 type BoxProps = {
 	title?: string;
+	type?: BoxTypes;
 	children: ReactNode;
 };
 
-export const Box = ({ children, title }: BoxProps) => {
-	return (
-		<div className="box">
-			{title && <div className="box__title">{title}</div>}
-			<div className="box__content">{children}</div>
-		</div>
-	);
-};
+export const Box = ({ children, title, type }: BoxProps) => (
+	<div
+		className={classNames(styles.box, {
+			[styles[`box--${type}`]]: !!type
+		})}
+	>
+		{title && <div className={styles.box__title}>{title}</div>}
+		<div className={styles.box__content}>{children}</div>
+	</div>
+);

src/components/box/box.styles.scss

@@ -1,5 +1,6 @@
 .box {
 	background: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(255, 255, 255, 0.7);
 	padding: $grid-base-two;
 	margin-bottom: $grid-base;
 	border-radius: $box-border-radius;
@@ -9,6 +10,21 @@
 		margin-bottom: $grid-base-two;
 	}
 
+	&--info {
+		border-color: $form-medium;
+		color: $form-medium;
+	}
+
+	&--error {
+		background-color: $form-error;
+		color: $form-error;
+	}
+
+	&--success {
+		background-color: $form-success;
+		color: $form-success;
+	}
+
 	&__title {
 		font-style: normal;
 		font-weight: 700;