376 lines
17 KiB
JavaScript
376 lines
17 KiB
JavaScript
import React, {useState, useEffect} from "react";
|
|
import { useDispatch } from "react-redux";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { customerSlice } from "../../store";
|
|
import { AuthService, CustomerService, ResourceService } from "../../services";
|
|
import Select from 'react-select';
|
|
import { CUSTOMER_TYPE, PICKUP_STATUS, PICKUP_STATUS_TEXT , CUSTOMER_TYPE_TEXT} from "../../shared";
|
|
|
|
const CreateCustomer = () => {
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { createCustomer } = customerSlice.actions;
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [firstname, setFirstname] = useState('');
|
|
const [lastname, setLastname] = useState('');
|
|
const [nameCN, setNameCN] = useState('');
|
|
const [birthDate, setBirthDate] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [mobilePhone, setMobilePhone] = useState('');
|
|
const [phone, setPhone] = useState('');
|
|
const [homePhone, setHomePhone] = useState('');
|
|
const [tableId, setTableId] = useState('');
|
|
const [language, setLanguage] = useState('');
|
|
const [address1, setAddress1] = useState('');
|
|
const [address2, setAddress2] = useState('');
|
|
const [address3, setAddress3] = useState('');
|
|
const [address4, setAddress4] = useState('');
|
|
const [address5, setAddress5] = useState('');
|
|
const [customerType, setCustomerType] = useState('');
|
|
const [selectedFile, setSelectedFile] = useState();
|
|
const [careProvider, setCareProvider] = useState('');
|
|
const [medicareNumber, setMedicareNumber] = useState('');
|
|
const [medicaidNumber, setMedicaidNumber] = useState('');
|
|
const [pharmacy, setPharmacy] = useState('');
|
|
const [pharmacyId, setPharmacyId] = useState('');
|
|
const [pickupStatus, setPickupStatus] = useState('');
|
|
const [specialNeeds, setSpecialNeeds] = useState('');
|
|
const [emergencyContact, setEmergencyContact] = useState('');
|
|
const [admissionDate, setAdmissionDate] = useState('');
|
|
const [vehicleNo, setVehicleNo] = useState('');
|
|
const [note, setNote] = useState('');
|
|
const [pin, setPin] = useState('');
|
|
const [seating, setSeating] = useState('');
|
|
const [caller, setCaller] = useState('');
|
|
const [dischargeDate, setDischargeDate] = useState('');
|
|
const [placement, setPlacement] = useState('');
|
|
const [nickname, setNickname] = useState('');
|
|
const [groups, setGroups] = useState('');
|
|
const [tags, setTags] = useState('');
|
|
const [roles, setRoles] = useState('');
|
|
const [apartment, setApartment] = useState('');
|
|
const [resources, setResources] = useState([]);
|
|
const [privateNote, setPrivateNote] = useState('');
|
|
const [disability, setDisability ] = useState(false);
|
|
const [gender, setGender] = useState('');
|
|
const [weight, setWeight] = useState('');
|
|
const [heightFeet, setHeightFeet] = useState('');
|
|
const [heightInch, setHeightInch] = useState('');
|
|
const [textMsgEnabled, setTextMsgEnabled] = useState(false);
|
|
const params = new URLSearchParams(window.location.search);
|
|
const redirectTo = () => {
|
|
navigate('/admin');
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!AuthService.canAddOrEditCustomers()) {
|
|
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`);
|
|
}
|
|
ResourceService.getAll('pharmacy').then(data => {
|
|
setResources(data.data);
|
|
})
|
|
}, [])
|
|
|
|
const saveCustomer = () => {
|
|
const data = {
|
|
username,
|
|
name: customerType === 'discharged' ? `${lastname},${firstname} (discharged)` : `${lastname},${firstname}`,
|
|
name_cn: nameCN,
|
|
email,
|
|
password,
|
|
mobile_phone: mobilePhone,
|
|
phone,
|
|
table_id: tableId,
|
|
home_phone: homePhone,
|
|
type: customerType,
|
|
language,
|
|
status: 'active',
|
|
address1,
|
|
address2,
|
|
address3,
|
|
address4,
|
|
address5,
|
|
firstname,
|
|
lastname,
|
|
birth_date: birthDate,
|
|
care_provider: careProvider,
|
|
medicare_number: medicareNumber,
|
|
medicaid_number: medicaidNumber,
|
|
pharmacy: pharmacy?.label || '',
|
|
pharmacy_id: pharmacyId,
|
|
pickup_status: pickupStatus,
|
|
special_needs: specialNeeds,
|
|
emergency_contact: emergencyContact,
|
|
admission_date: admissionDate,
|
|
vehicle_no: vehicleNo,
|
|
discharge_date: dischargeDate,
|
|
create_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name || '',
|
|
edit_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name || '',
|
|
note,
|
|
pin,
|
|
seating,
|
|
caller,
|
|
placement,
|
|
nickname,
|
|
groups: groups.replace(' ', '').split(','),
|
|
tags: tags.replace(' ', '').split(','),
|
|
roles: roles.replace(' ', '').split(','),
|
|
apartment,
|
|
private_note: privateNote,
|
|
disability: disability === 'true',
|
|
weight,
|
|
gender,
|
|
height: `${heightFeet} ft ${heightInch} in`,
|
|
text_msg_enabled: textMsgEnabled === 'true' || false
|
|
};
|
|
const dataForLegacy = {
|
|
username,
|
|
parentId: '5eee3552b02fac3d4acfd5ea',
|
|
name: customerType === 'discharged' ? `${lastname},${firstname} (discharged)` : `${lastname},${firstname}`,
|
|
name_cn: `${lastname},${firstname} ${nameCN}`,
|
|
email,
|
|
password,
|
|
mobile_phone: mobilePhone,
|
|
phone,
|
|
table_id: tableId,
|
|
home_phone: homePhone,
|
|
type: customerType,
|
|
language,
|
|
status: 'active',
|
|
address: address1,
|
|
address2,
|
|
firstname,
|
|
lastname,
|
|
birth_date: birthDate,
|
|
care_provider: careProvider,
|
|
medicare_number: medicareNumber,
|
|
medicaid_number: medicaidNumber,
|
|
pharmacy: pharmacy?.label || '',
|
|
pharmacy_id: pharmacyId,
|
|
emergency_contact: emergencyContact,
|
|
admission_date: admissionDate,
|
|
vehicle_no: vehicleNo,
|
|
discharge_date: dischargeDate,
|
|
create_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name || '',
|
|
edit_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name || '',
|
|
note,
|
|
pin,
|
|
seating,
|
|
caller,
|
|
placement,
|
|
nickname,
|
|
groups: groups.replace(' ', '').split(','),
|
|
tags: tags.replace(' ', '').split(','),
|
|
roles: roles.replace(' ', '').split(','),
|
|
private_note: privateNote
|
|
};
|
|
const formData = new FormData();
|
|
formData.append("file", selectedFile);
|
|
let payload = { data, dataForLegacy };
|
|
if (selectedFile) {
|
|
payload = Object.assign({}, payload, {avatar: formData})
|
|
}
|
|
dispatch(createCustomer(payload));
|
|
redirectTo();
|
|
};
|
|
|
|
const onPharmacyChange = (selectedPharmacy) => {
|
|
setPharmacy(selectedPharmacy);
|
|
setPharmacyId(selectedPharmacy?.value);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="list row mb-4">
|
|
<div className="col-md-12 text-primary">
|
|
<h5>Create New Customer <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h5>
|
|
</div>
|
|
</div>
|
|
<div className="list row mb-4">
|
|
<div className="col-md-4 mb-4">
|
|
<div>First Name:(*)</div> <input type="text" value={firstname || ''} onChange={e => setFirstname(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Last Name:(*)</div> <input type="text" value={lastname || ''} onChange={e => setLastname(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Preferred Name (中文姓名):</div> <input type="text" value={nameCN || ''} onChange={e => setNameCN(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Nick Name:</div> <input type="text" value={nickname || ''} onChange={e => setNickname(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Email:(*)</div> <input type="email" value={email || ''} onChange={e => setEmail(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Care Provider:</div> <input type="text" value={careProvider || ''} onChange={e => setCareProvider(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Emergency Contact:</div> <input type="text" value={emergencyContact || ''} onChange={e => setEmergencyContact(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Medicare Number:</div> <input type="text" value={medicareNumber || ''} onChange={e => setMedicareNumber(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Medicaid Number:</div> <input type="text" value={medicaidNumber || ''} onChange={e => setMedicaidNumber(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
{/* <div>Pharmacy:</div> <input type="text" value={pharmacy || ''} onChange={e => setPharmacy(e.target.value)}/> */}
|
|
<div>Pharmacy</div>
|
|
<Select value={pharmacy || ''} onChange={selectedData => onPharmacyChange(selectedData)} options={[{value: '', label: ''}, ...resources.map(resource => ({
|
|
value: resource?.id || '',
|
|
label: resource?.name || '',
|
|
}))]}></Select>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Pharmacy ID:</div> <input type="text" value={pharmacyId || ''} onChange={e => setPharmacyId(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 1:</div> <input type="text" value={address1 || ''} onChange={e => setAddress1(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 2:</div> <input type="text" value={address2 || ''} onChange={e => setAddress2(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 3:</div> <input type="text" value={address3 || ''} onChange={e => setAddress3(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 4:</div> <input type="text" value={address4 || ''} onChange={e => setAddress4(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Address 5:</div> <input type="text" value={address5 || ''} onChange={e => setAddress5(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Apartment:</div> <input type="text" value={apartment || ''} onChange={e => setApartment(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Table Id:</div> <input type="text" value={tableId || ''} onChange={e => setTableId(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Customer Type:</div> <select value={customerType} onChange={e => setCustomerType(e.target.value)}>
|
|
<option value=""></option>
|
|
{
|
|
Object.keys(CUSTOMER_TYPE).map(key => <option key={key} value={CUSTOMER_TYPE[key]}> {CUSTOMER_TYPE_TEXT[CUSTOMER_TYPE[key]]}</option>)
|
|
}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Pickup Status:</div> <select value={pickupStatus} onChange={e => setPickupStatus(e.target.value)}>
|
|
<option value=""></option>
|
|
{
|
|
Object.keys(PICKUP_STATUS).map(key => <option key={key} value={PICKUP_STATUS[key]}> {PICKUP_STATUS_TEXT[PICKUP_STATUS[key]]}</option>)
|
|
}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Upload Avatar (Image size should be less than 500 KB):</div>
|
|
<input
|
|
type="file"
|
|
onChange={(e) => setSelectedFile(e.target.files[0])}
|
|
className="form-control-file border"
|
|
/>
|
|
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Birth Date (Type in as: MM/DD/YYYY):</div> <input type="text" value={birthDate || ''} onChange={e => setBirthDate(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Phone :</div> <input type="text" value={phone || ''} onChange={e => setPhone(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Mobile Phone:</div> <input type="text" value={mobilePhone || ''} onChange={e => setMobilePhone(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Home Phone:</div> <input type="text" value={homePhone || ''} onChange={e => setHomePhone(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Special Needs:</div> <input type="text" value={specialNeeds || ''} onChange={e => setSpecialNeeds(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Language(Please use ',' between each language):</div> <input type="text" value={language || ''} onChange={e => setLanguage(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Username (not required):</div> <input type="text" value={username || ''} onChange={e => setUsername(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Password (not required):</div> <input type="text" value={password || ''} onChange={e => setPassword(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Note:</div> <input type="text" value={note || ''} onChange={e => setNote(e.target.value)}/>
|
|
</div>
|
|
|
|
<div className="col-md-4 mb-4">
|
|
<div>Admission Date(Type in as 'MM/DD/YYYY'):</div> <input type="text" value={admissionDate || ''} onChange={e => setAdmissionDate(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Discharge Date(Type in as 'MM/DD/YYYY'):</div> <input type="text" value={dischargeDate || ''} onChange={e => setDischargeDate(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Pin:</div> <input type="text" value={pin || ''} onChange={e => setPin(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Seating:</div> <input type="text" value={seating || ''} onChange={e => setSeating(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Vehicle No:</div> <input type="text" value={vehicleNo || ''} onChange={e => setVehicleNo(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Caller:</div> <input type="text" value={caller || ''} onChange={e => setCaller(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Placement:</div> <input type="text" value={placement || ''} onChange={e => setPlacement(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Groups(Please use ',' between each group):</div> <input type="text" value={groups || ''} onChange={e => setGroups(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Tags(Please use ',' between each tags):</div> <input type="text" value={tags || ''} onChange={e => setTags(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Roles(Please use ',' between each roles):</div> <input type="text" value={roles || ''} onChange={e => setRoles(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Private Note:</div> <input type="text" value={privateNote || ''} onChange={e => setPrivateNote(e.target.value)}/>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Disability:</div> <select value={disability} onChange={e => setDisability(e.target.value)}>
|
|
<option value="true">Yes</option>
|
|
<option value="false">No</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Height:</div>
|
|
<input type="text" value={heightFeet || ''} onChange={e => setHeightFeet(e.target.value)}/> Ft
|
|
<input type="text" value={heightInch || ''} onChange={e => setHeightInch(e.target.value)}/> In
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Weight:</div> <input type="text" value={weight || ''} onChange={e => setWeight(e.target.value)}/> lb
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Gender:</div> <select value={gender} onChange={e => setGender(e.target.value)}>
|
|
<option value=""></option>
|
|
<option value="male">Male</option>
|
|
<option value="female">Female</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-4 mb-4">
|
|
<div>Enable Text Message:</div> <select value={textMsgEnabled} onChange={e => setTextMsgEnabled(e.target.value)}>
|
|
<option value="true">Yes</option>
|
|
<option value="false">No</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="list row mb-5">
|
|
<div className="col-md-6 col-sm-6 col-xs-12">
|
|
<button className="btn btn-primary btn-sm" onClick={() => saveCustomer()}> Save </button>
|
|
<button className="btn btn-default btn-sm" onClick={() => redirectTo()}> Cancel </button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CreateCustomer; |