th-81: Create order card component (BinaryStudioAcademy#95)

* th-81: + order card

* th-81: * Migrated to camelCase class names, optimized import in styles.module.css

* th-81: * moved svg to ~/assets/img/order-card; fixed imports; added types for parts of order-card props

* th-191: * fixed locations displacement

* th-81: * Merged development

frontend/package.json

@@ -25,6 +25,8 @@
     "@hookform/resolvers": "2.9.11",
     "@reduxjs/toolkit": "1.9.3",
     "@tanstack/react-table": "8.9.3",
+    "@rollup/pluginutils": "5.0.4",
+    "@svgr/core": "8.1.0",
     "clsx": "2.0.0",
     "modern-normalize": "2.0.0",
     "react": "18.2.0",
@@ -34,6 +36,9 @@
     "react-redux": "8.1.2",
     "react-router-dom": "6.8.2",
     "react-select": "5.7.4",
+    "react-select": "5.7.4",
+    "react-toastify": "9.1.3",
+    "vite-plugin-svgr": "3.2.0",
     "react-toastify": "9.1.3",
     "socket.io-client": "4.7.2"
   },

frontend/react-component.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  import React = require('react');
+
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+
+  export { ReactComponent };
+}

frontend/src/libs/components/components.ts

@@ -16,12 +16,14 @@ export { Link } from './link/link.js';
 export { LocationInput } from './location-input/location-input.js';
 export { Modal } from './modal/modal.js';
 export { Notification } from './notification/notification.js';
+export { OrderCard } from './order-card/order-card.js';
 export { PageLayout } from './page-layout/page-layout.js';
 export { Pagination } from './pagination/pagination.js';
+export { PlainSvgIcon } from './plain-svg-icon/plain-svg-icon.js';
 export { ProtectedRoute } from './protected-route/protected-route.js';
 export { Radio } from './radio/radio.js';
 export { Router } from './router/router.jsx';
-export { RouterProvider } from './router-provider/router-provider.jsx';
+export { RouterProvider } from './router-provider/router-provider.js';
 export { Spinner } from './spinner/spinner.js';
 export { StarRating } from './star-rating/star-rating.jsx';
 export { Table } from './table/table.js';

frontend/src/libs/components/order-card/libs/types/driver-profile-info.type.ts

@@ -0,0 +1,7 @@
+type DriverProfileInfo = {
+  firstName: string;
+  lastName: string;
+  profileURL: string;
+};
+
+export { type DriverProfileInfo };

frontend/src/libs/components/order-card/libs/types/order-current-status.type.ts

@@ -0,0 +1,8 @@
+type OrderCurrentStatus = {
+  timespanLastUpdated: string;
+  location: string;
+  distanceLeft: number;
+  timespanLeft: string;
+};
+
+export { type OrderCurrentStatus };

frontend/src/libs/components/order-card/libs/types/order-initial-status.type.ts

@@ -0,0 +1,6 @@
+type OrderInitialStatus = {
+  startLocation: string;
+  endLocation: string;
+};
+
+export { type OrderInitialStatus };

frontend/src/libs/components/order-card/libs/types/ordered-truck-info.type.ts

@@ -0,0 +1,5 @@
+type OrderedTruckInfo = {
+  licensePlate: string;
+};
+
+export { type OrderedTruckInfo };

frontend/src/libs/components/order-card/libs/types/types.ts

@@ -0,0 +1,4 @@
+export { type DriverProfileInfo } from './driver-profile-info.type.js';
+export { type OrderCurrentStatus } from './order-current-status.type.js';
+export { type OrderInitialStatus } from './order-initial-status.type.js';
+export { type OrderedTruckInfo } from './ordered-truck-info.type.js';

frontend/src/libs/components/order-card/order-card.tsx

@@ -0,0 +1,123 @@
+import { PlainSvgIconName } from '~/libs/enums/enums.js';
+import { getValidClassNames } from '~/libs/helpers/helpers.js';
+
+import { PlainSvgIcon } from '../plain-svg-icon/plain-svg-icon.js';
+import {
+  type DriverProfileInfo,
+  type OrderCurrentStatus,
+  type OrderedTruckInfo,
+  type OrderInitialStatus,
+} from './libs/types/types.js';
+import styles from './styles.module.scss';
+
+type Properties = {
+  driver: DriverProfileInfo;
+  truck: OrderedTruckInfo;
+  initialStatus: OrderInitialStatus;
+  currentStatus: OrderCurrentStatus;
+};
+
+const OrderCard: React.FC<Properties> = ({
+  driver: { firstName, lastName, profileURL },
+  truck: { licensePlate },
+  initialStatus: { startLocation, endLocation },
+  currentStatus: { timespanLastUpdated, location, distanceLeft, timespanLeft },
+}: Properties) => {
+  const areManyKilometers = distanceLeft > 1;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.cardLayout}>
+        <div className={styles.horizontalBar}>
+          <div>
+            <PlainSvgIcon name={PlainSvgIconName.HORIZONTAL_BAR} />
+          </div>
+        </div>
+        <div className={styles.header}>
+          <div className={styles.headerImageContainer}>
+            <img
+              className={styles.profileImage}
+              src={profileURL}
+              alt="header"
+            />
+          </div>
+          <div className={styles.headerInfoContainer}>
+            <div className={styles.headerTitleContainer}>
+              <span className="text-md">
+                {firstName} {lastName}
+              </span>
+            </div>
+            <div className={styles.headerSubtitleContainer}>
+              <span className={getValidClassNames(styles.subtitle, 'text-sm')}>
+                {licensePlate}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className={styles.body}>
+          <div className={styles.bodyContent}>
+            <div className={styles.locationDot}>
+              <PlainSvgIcon name={PlainSvgIconName.LOCATION_DOT} />
+            </div>
+            <span className={getValidClassNames(styles.location, 'text-sm')}>
+              {location}
+            </span>
+            <span className={getValidClassNames(styles.lastUpdate, 'text-sm')}>
+              last updated {timespanLastUpdated} ago
+            </span>
+            <div
+              className={getValidClassNames(
+                styles.routeDot,
+                styles.routeDotStart,
+              )}
+            >
+              <PlainSvgIcon name={PlainSvgIconName.BLUE_CIRCLE} />
+            </div>
+            <span
+              className={getValidClassNames(
+                styles.routeInfo,
+                styles.routeInfoStart,
+                'text-sm',
+              )}
+            >
+              {startLocation}
+            </span>
+            <div className={styles.routeArrow}>
+              <PlainSvgIcon name={PlainSvgIconName.ARROW_DOWN} />
+            </div>
+            <div
+              className={getValidClassNames(
+                styles.routeDot,
+                styles.routeDotEnd,
+              )}
+            >
+              <PlainSvgIcon name={PlainSvgIconName.RED_CIRCLE} />
+            </div>
+            <span
+              className={getValidClassNames(
+                styles.routeInfo,
+                styles.routeInfoEnd,
+              )}
+            >
+              {endLocation}
+            </span>
+            <div className={styles.distanceIcon}>
+              <PlainSvgIcon name={PlainSvgIconName.MAP} />
+            </div>
+            <span
+              className={getValidClassNames(
+                styles.distanceInfo,
+                styles.distanceInfoEnd,
+                'text-md',
+              )}
+            >
+              {distanceLeft} km{areManyKilometers && 's'}, {timespanLeft}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { OrderCard };