Skip to content

Commit

Permalink
Implement service history
Browse files Browse the repository at this point in the history
  • Loading branch information
piyushroshan committed Aug 28, 2024
1 parent 8e77c00 commit 28ba6a7
Show file tree
Hide file tree
Showing 12 changed files with 375 additions and 117 deletions.
2 changes: 1 addition & 1 deletion services/web/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "crapi-web",
"version": "0.1.0",
"proxy": "http://crapi.allvapps.com:30080",
"proxy": "http://localhost:8888",
"private": true,
"dependencies": {
"@ant-design/cssinjs": "^1.21.1",
Expand Down
13 changes: 10 additions & 3 deletions services/web/src/actions/userActions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
import actionTypes from "../constants/actionTypes";

interface ActionPayload {
callback: () => void;
callback: (...args: any[]) => void;
[key: string]: any;
}

Expand Down Expand Up @@ -142,13 +142,20 @@ export const resetPasswordAction = ({
};
};

export const getServicesAction = ({ accessToken, callback, ...data }: ActionPayload & AccessTokenPayload) => {
export const getMechanicServicesAction = ({ accessToken, callback, ...data }: ActionPayload & AccessTokenPayload) => {
return {
type: actionTypes.GET_SERVICES,
type: actionTypes.GET_MECHANIC_SERVICES,
payload: { accessToken, callback, ...data },
};
};

export const getVehicleServicesAction = ({ accessToken, VIN, callback, ...data }: ActionPayload & AccessTokenPayload) => {
return {
type: actionTypes.GET_VEHICLE_SERVICES,
payload: { accessToken, VIN, callback, ...data },
};
};

export const changeEmailAction = ({ accessToken, callback, ...data }: ActionPayload & AccessTokenPayload) => {
return {
type: actionTypes.CHANGE_EMAIL,
Expand Down
18 changes: 16 additions & 2 deletions services/web/src/components/dashboard/dashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,22 @@ interface RootState {
};
}

const vehicleCardHeader = (vehicle: Vehicle, handleContactMechanic: (vin: string) => void) => {
const vehicleCardHeader = (vehicle: Vehicle, handleVehicleServiceClick: (vin: string) => void, handleContactMechanic: (vin: string) => void) => {
return (
<PageHeader
className="dashboard-header"
title={`VIN: ${vehicle.vin}`}
extra={[
<Button
type="primary"
shape="round"
icon={<ToolOutlined />}
size="large"
onClick={() => handleVehicleServiceClick(vehicle.vin)}
key="vehicle-service-history"
>
Vehicle Service History
</Button>,
<Button
type="primary"
shape="round"
Expand Down Expand Up @@ -174,6 +184,10 @@ const Dashboard: React.FC<DashboardProps> = ({ vehicles, refreshLocation, resend
navigate("/verify-vehicle");
};

const handleVehicleServiceClick = (vin: string) => {
navigate(`/vehicle-service-dashboard?VIN=${vin}`);
};

const handleContactMechanic = (vin: string) => {
navigate(`/contact-mechanic?VIN=${vin}`);
};
Expand Down Expand Up @@ -203,7 +217,7 @@ const Dashboard: React.FC<DashboardProps> = ({ vehicles, refreshLocation, resend
<Col span={24} key={vehicle.vin}>
<Card className="vehicle-card">
<Meta
title={vehicleCardHeader(vehicle, handleContactMechanic)}
title={vehicleCardHeader(vehicle, handleVehicleServiceClick, handleContactMechanic)}
description={vehicleCardContent(vehicle)}
/>
</Card>
Expand Down
15 changes: 14 additions & 1 deletion services/web/src/components/layout/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import ForumContainer from "../../containers/forum/forum";
import UnlockContainer from "../../containers/unlock/unlock";
import NewPostContainer from "../../containers/newPost/newPost";
import PostContainer from "../../containers/post/post";

import VehicleServiceDashboardContainer from "../../containers/vehicleServiceDashboard/vehicleServiceDashboard";
import {
logOutUserAction,
validateAccessTokenAction,
Expand Down Expand Up @@ -334,6 +334,19 @@ const StyledComp: React.FC<PropsFromRedux> = (props) => {
/>
}
/>
<Route
path="/vehicle-service-dashboard"
element={
<AfterLogin
component={VehicleServiceDashboardContainer}
isLoggedIn={props.isLoggedIn}
componentRole={roleTypes.ROLE_USER}
userRole={props.role}
accessToken={props.accessToken}
logOutUser={props.logOutUser}
/>
}
/>
<Route
path="/forum"
element={
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React from "react";
import { Card, Row, Col } from "antd";
import { PageHeader } from "@ant-design/pro-components";

const { Meta } = Card;

interface Owner {
email: string;
number: string;
}

interface Vehicle {
owner: Owner;
id: string;
vin: string;
}

interface Service {
id: string;
problem_details: string;
created_on: string;
vehicle: Vehicle;
status: string;
}

interface VehicleServiceDashboardProps {
services: Service[];
}

const VehicleServiceDashboard: React.FC<VehicleServiceDashboardProps> = ({ services }) => {
const urlParams = new URLSearchParams(window.location.search);
const VIN = urlParams.get("VIN");
return (
<>
<PageHeader title={`Service History for VIN: ${VIN}`} />
<Row gutter={[16, 24]}>
{services.map((service: Service) => (
<Col span={8} key={service.id}>
<Card hoverable className="dashboard-card" title={service.problem_details}>
<Meta
title={service.status}
description={service.created_on}
/>
<p>
Vehicle VIN: {service.vehicle.vin}
</p>
<p>
Owner email-id:
{service.vehicle.owner.email}
</p>
<p>
Owner Phone No.:
{service.vehicle.owner.number}
</p>

{/* If status is completed, show report link */}
<a href={`/service-report?reportId=${service.id}`}>View Report</a>
</Card>
</Col>
))}
</Row>
</>
);
};

export default VehicleServiceDashboard;
3 changes: 2 additions & 1 deletion services/web/src/constants/APIConstant.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ export const requestURLS: RequestURLSType = {
RECEIVE_REPORT: "api/mechanic/receive_report",
GET_MECHANICS: "api/mechanic",
GET_PRODUCTS: "api/shop/products",
GET_SERVICES: "api/mechanic/service_requests",
GET_MECHANIC_SERVICES: "api/mechanic/service_requests",
GET_VEHICLE_SERVICES: "api/merchant/service_requests/<vehicleVIN>",
BUY_PRODUCT: "api/shop/orders",
GET_ORDERS: "api/shop/orders/all",
GET_ORDER_BY_ID: "api/shop/orders/<orderId>",
Expand Down
4 changes: 2 additions & 2 deletions services/web/src/constants/actionTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ const actionTypes = {
VALIDATED_ACCESS_TOKEN: "VALIDATED_ACCESS_TOKEN",
LOG_OUT: "LOG_OUT",
INVALID_SESSION: "INVALID_SESSION",
GET_SERVICES: "GET_SERVICES",

GET_MECHANIC_SERVICES: "GET_MECHANIC_SERVICES",
GET_VEHICLE_SERVICES: "GET_VEHICLE_SERVICES",
RESEND_MAIL: "RESEND_MAIL",
VERIFY_VEHICLE: "VERIFY_VEHICLE",
GET_VEHICLES: "GET_VEHICLES",
Expand Down
64 changes: 0 additions & 64 deletions services/web/src/containers/mechanicDashboard/mechanicDashboard.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React, { useState, useEffect } from "react";

import { connect, ConnectedProps } from "react-redux";
import { Modal } from "antd";
import { getMechanicServicesAction } from "../../actions/userActions";
import MechanicDashboard from "../../components/mechanicDashboard/mechanicDashboard";
import responseTypes from "../../constants/responseTypes";
import { FAILURE_MESSAGE } from "../../constants/messages";

interface RootState {
userReducer: {
accessToken: string;
};
}

interface Service {
id: string;
problem_details: string;
created_on: string;
vehicle: {
owner: {
email: string;
number: string;
};
};
}

const mapStateToProps = (state: RootState) => ({
accessToken: state.userReducer.accessToken,
});

const mapDispatchToProps = {
getServices: getMechanicServicesAction,
};

const connector = connect(mapStateToProps, mapDispatchToProps);

type PropsFromRedux = ConnectedProps<typeof connector>;

const MechanicDashboardContainer: React.FC<PropsFromRedux> = ({ accessToken, getServices }) => {
const [services, setServices] = useState<Service[]>([]);

useEffect(() => {
const callback = (res: string, data: Service[] | string) => {
if (res === responseTypes.SUCCESS) {
setServices(data as Service[]);
} else {
Modal.error({
title: FAILURE_MESSAGE,
content: data as string,
});
}
};
getServices({ accessToken, callback });
}, [accessToken, getServices]);
const typedServices: Service[] = services;

return <MechanicDashboard services={services} />;
};

export default connector(MechanicDashboardContainer);
Loading

0 comments on commit 28ba6a7

Please sign in to comment.