423 lines
20 KiB
JavaScript
423 lines
20 KiB
JavaScript
import React, {useState, useEffect} from "react";
|
|
import { PencilSquare } from "react-bootstrap-icons";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { AuthService, CustomerService } from "../../services";
|
|
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
|
|
import { CUSTOMER_JOIN_REASON_TEXT, CUSTOMER_DISCHARGE_REASON_TEXT } from "../../shared";
|
|
|
|
const ViewCustomer = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const urlParams = useParams();
|
|
const [currentCustomer, setCurrentCustomer] = useState(undefined);
|
|
const [currentAvatar, setCurrentAvatar] = useState(undefined);
|
|
|
|
const redirectTo = () => {
|
|
navigate(`/customers/list`)
|
|
}
|
|
|
|
const goToEdit = (id) => {
|
|
navigate(`/customers/edit/${id}`)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!AuthService.canViewCustomers()) {
|
|
window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
|
|
AuthService.logout();
|
|
navigate(`/login`);
|
|
}
|
|
if (!currentCustomer) {
|
|
CustomerService.getCustomer(urlParams.id).then((data) => {
|
|
setCurrentCustomer(data.data);
|
|
})
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (currentCustomer?.id ) {
|
|
CustomerService.getAvatar(currentCustomer?.id).then((data) => {
|
|
setCurrentAvatar(data.data);
|
|
})
|
|
}
|
|
}, [currentCustomer]);
|
|
|
|
return (
|
|
<>
|
|
<div className="list row mb-4">
|
|
<Breadcrumb>
|
|
<Breadcrumb.Item>General</Breadcrumb.Item>
|
|
<Breadcrumb.Item active>
|
|
Customer Information
|
|
</Breadcrumb.Item>
|
|
<Breadcrumb.Item active>
|
|
View Customer Details
|
|
</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div className="col-md-12 text-primary">
|
|
<h4>View Customer Information <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h4>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-list-container">
|
|
<div className="app-main-content-list-func-container">
|
|
<Tabs defaultActiveKey="basicInfo" id="customers-tab">
|
|
<Tab eventKey="basicInfo" title="Basic Information">
|
|
<h6 className="text-primary">Personal Details</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Name</div>
|
|
<div className="field-value">{currentCustomer?.name}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">First Name</div>
|
|
<div className="field-value">{currentCustomer?.firstname}</div>
|
|
</div>
|
|
{/* <div><div className="field-label">Middle Name</div> <input type="text" value={middlename || ''} onChange={e => setMiddlename(e.target.value)}/></div> */}
|
|
<div className="field-body">
|
|
<div className="field-label">Last Name</div>
|
|
<div className="field-value">{currentCustomer?.lastname}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Preferred Name/Chinese Name</div>
|
|
<div className="field-value">{currentCustomer?.name_cn}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Admission Date</div>
|
|
<div className="field-value">{currentCustomer?.admission_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Discharge Date</div>
|
|
<div className="field-value">{currentCustomer?.discharge_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Birth Date</div>
|
|
<div className="field-value">{currentCustomer?.birth_date}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Customer Type</div>
|
|
<div className="field-value">{currentCustomer?.type}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Gender</div>
|
|
<div className="field-value">{currentCustomer?.gender}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Language Spoken</div>
|
|
<div className="field-value">{currentCustomer?.language}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Height</div>
|
|
<div className="field-value">{currentCustomer?.height}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Weight</div>
|
|
<div className="field-value">{currentCustomer?.weight}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h6 className="text-primary">Contact Information</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Primary Phone Number</div>
|
|
<div className="field-value">{currentCustomer?.phone}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Secondary Phone Number</div>
|
|
<div className="field-value">{currentCustomer?.home_phone}</div>
|
|
</div>
|
|
{/* <div className="field-body">
|
|
<div className="field-label">Other Phone Number</div>
|
|
<input type="text" value={mobilePhone || ''} onChange={e => setMobilePhone(e.target.value)}/>
|
|
</div> */}
|
|
<div className="field-body">
|
|
<div className="field-label">Personal Email</div>
|
|
<div className="field-value">{currentCustomer?.email}</div>
|
|
</div>
|
|
</div>
|
|
{/* We will do Address and Emergency later */}
|
|
<h6 className="text-primary">Home Addresses</h6>
|
|
{[1, 2, 3, 4, 5].map((index) => {
|
|
const streetAddress = index === 1 ? currentCustomer?.street_address_1 :
|
|
index === 2 ? currentCustomer?.street_address_2 :
|
|
index === 3 ? currentCustomer?.street_address_3 :
|
|
index === 4 ? currentCustomer?.street_address_4 :
|
|
currentCustomer?.street_address_5;
|
|
const city = index === 1 ? currentCustomer?.city1 :
|
|
index === 2 ? currentCustomer?.city2 :
|
|
index === 3 ? currentCustomer?.city3 :
|
|
index === 4 ? currentCustomer?.city4 :
|
|
currentCustomer?.city5;
|
|
const state = index === 1 ? currentCustomer?.state1 :
|
|
index === 2 ? currentCustomer?.state2 :
|
|
index === 3 ? currentCustomer?.state3 :
|
|
index === 4 ? currentCustomer?.state4 :
|
|
currentCustomer?.state5;
|
|
const zipCode = index === 1 ? currentCustomer?.zip_code1 :
|
|
index === 2 ? currentCustomer?.zip_code2 :
|
|
index === 3 ? currentCustomer?.zip_code3 :
|
|
index === 4 ? currentCustomer?.zip_code4 :
|
|
currentCustomer?.zip_code5;
|
|
const address = index === 1 ? currentCustomer?.address1 :
|
|
index === 2 ? currentCustomer?.address2 :
|
|
index === 3 ? currentCustomer?.address3 :
|
|
index === 4 ? currentCustomer?.address4 :
|
|
currentCustomer?.address5;
|
|
|
|
// Show address if any of the new fields or old address field has data
|
|
if (streetAddress || city || state || zipCode || address) {
|
|
return (
|
|
<>
|
|
<h6 className="text-secondary mb-3">Address {index}</h6>
|
|
<div key={index} className="app-main-content-fields-section">
|
|
|
|
{streetAddress && (
|
|
<div className="field-body">
|
|
<div className="field-label">Street Address</div>
|
|
<div className="field-value">{streetAddress}</div>
|
|
</div>
|
|
)}
|
|
{city && (
|
|
<div className="field-body">
|
|
<div className="field-label">City</div>
|
|
<div className="field-value">{city}</div>
|
|
</div>
|
|
)}
|
|
{state && (
|
|
<div className="field-body">
|
|
<div className="field-label">State</div>
|
|
<div className="field-value">{state}</div>
|
|
</div>
|
|
)}
|
|
{zipCode && (
|
|
<div className="field-body">
|
|
<div className="field-label">Zip Code</div>
|
|
<div className="field-value">{zipCode}</div>
|
|
</div>
|
|
)}
|
|
{address && !streetAddress && !city && !state && !zipCode && (
|
|
<div className="field-body">
|
|
<div className="field-label">Address</div>
|
|
<div className="field-value">{address}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
|
|
<h6 className="text-primary">Emergency Contact Information</h6>
|
|
{[1, 2].map((index) => {
|
|
const name = index === 1 ? currentCustomer?.emergency_contact_name : currentCustomer?.emergency_contact2_name;
|
|
const phone = index === 1 ? currentCustomer?.emergency_contact_phone : currentCustomer?.emergency_contact2_phone;
|
|
const relationship = index === 1 ? currentCustomer?.emergency_contact_relationship : currentCustomer?.emergency_contact2_relationship;
|
|
const emergencyContact = index === 1 ? currentCustomer?.emergency_contact : currentCustomer?.emergency_contact2;
|
|
|
|
// Show emergency contact if any of the new fields or old emergency contact field has data
|
|
if (name || phone || relationship || emergencyContact) {
|
|
return (
|
|
<>
|
|
<h6 className="text-secondary mb-3">
|
|
{index === 1 ? 'Primary Emergency Contact' : 'Emergency Contact 2'}
|
|
</h6>
|
|
<div key={index} className="app-main-content-fields-section">
|
|
|
|
{name && (
|
|
<div className="field-body">
|
|
<div className="field-label">Name</div>
|
|
<div className="field-value">{name}</div>
|
|
</div>
|
|
)}
|
|
{phone && (
|
|
<div className="field-body">
|
|
<div className="field-label">Phone</div>
|
|
<div className="field-value">{phone}</div>
|
|
</div>
|
|
)}
|
|
{relationship && (
|
|
<div className="field-body">
|
|
<div className="field-label">Relationship</div>
|
|
<div className="field-value">{relationship}</div>
|
|
</div>
|
|
)}
|
|
{emergencyContact && !name && !phone && !relationship && (
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact</div>
|
|
<div className="field-value">{emergencyContact}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
<h6 className="text-primary">Service Information</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Text Message Enabled</div>
|
|
<div className="field-value">{currentCustomer?.text_msg_enabled ? 'Yes': 'No'}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Table Id</div>
|
|
<div className="field-value">{currentCustomer?.table_id}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Seating</div>
|
|
<div className="field-value">{currentCustomer?.seating}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Pickup Status</div>
|
|
<div className="field-value">{currentCustomer?.pickup_status}</div>
|
|
</div>
|
|
</div>
|
|
<h6 className="text-primary">General Health Information</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Eyes-on</div>
|
|
<div className="field-value">{currentCustomer?.disability ? 'Yes' : 'No'}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Special Needs</div>
|
|
<div className="field-value">{currentCustomer?.special_needs}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Health Condition</div>
|
|
<div className="field-value">{currentCustomer?.health_condition}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Allergy Information</div>
|
|
<div className="field-value">{currentCustomer?.allergy_info}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Service Requirements</div>
|
|
<div className="field-value">{currentCustomer?.service_requirement}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Payment Due Date</div>
|
|
<div className="field-value">{currentCustomer?.payment_due_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Payment Status</div>
|
|
<div className="field-value">{currentCustomer?.payment_status}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Join Reason</div>
|
|
<div className="field-value">{currentCustomer?.join_reason ? CUSTOMER_JOIN_REASON_TEXT[currentCustomer.join_reason] : ''}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Discharge Reason</div>
|
|
<div className="field-value">{currentCustomer?.discharge_reason ? CUSTOMER_DISCHARGE_REASON_TEXT[currentCustomer.discharge_reason] : ''}</div>
|
|
</div>
|
|
</div>
|
|
<h6 className="text-primary">Additional Information</h6>
|
|
<div className="app-main-content-fields-section base-line">
|
|
<div className="field-body">
|
|
<div className="field-label">Profile Picture</div>
|
|
{currentAvatar && <img height="100px" width="100px" src={`data:image/png;base64, ${currentAvatar}`}/>}
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Note</div>
|
|
<div className="field-value">{currentCustomer?.note || currentCustomer?.private_note}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
<Tab eventKey="healthCareInfo" title="Health Care Information">
|
|
<h6 className="text-primary">Personal Details</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Primary Care Provider</div>
|
|
<div className="field-value">{currentCustomer?.care_provider}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Medicare Number</div>
|
|
<div className="field-value">{currentCustomer?.medicare_number}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Medicaid Number</div>
|
|
<div className="field-value">{currentCustomer?.medicaid_number}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Pharmacy</div>
|
|
<div className="field-value">{currentCustomer?.pharmacy}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Pharmacy ID</div>
|
|
<div className="field-value">{currentCustomer?.pharmacy_id}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
</Tabs>
|
|
<div className="list-func-panel">
|
|
<button className="btn btn-primary" onClick={() => goToEdit(currentCustomer?.id)}><PencilSquare className="me-2" size={16}></PencilSquare>Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*<div className="list row mb-4">
|
|
<div className="col-md-12 mb-4">
|
|
{currentAvatar && <img height="100px" width="100px" src={`data:image/png;base64, ${currentAvatar}`}/>}
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Emergency Contact:{currentCustomer?.emergency_contact}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Mobile Phone: {currentCustomer?.mobile_phone}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Username: {currentCustomer?.username}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 1: {currentCustomer?.address1}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 2: {currentCustomer?.address2}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 3: {currentCustomer?.address3}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 4: {currentCustomer?.address4}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 5: {currentCustomer?.address5}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Apartment: {currentCustomer?.apartment}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Pin:{currentCustomer?.pin}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Vehicle No: {currentCustomer?.vehicle_no}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Caller:{currentCustomer?.caller}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Placement:{currentCustomer?.placement}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Groups:{currentCustomer?.groups?.join(', ')}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Tags:{currentCustomer?.tags?.join(', ')}</div>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Roles:{currentCustomer?.roles?.join(', ')}</div>
|
|
</div>
|
|
</div> */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ViewCustomer; |