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"; import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap"; import { Upload } from "react-bootstrap-icons"; 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 [middlename, setMiddlename] = useState(''); const [nameOnId, setNameOnId] = 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('/customers/list'); } 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 ( <>
General Customer Information Create New Customer

Create New Customer

Personal Details
First Name *
setFirstname(e.target.value)}/>
{/*
Middle Name
setMiddlename(e.target.value)}/>
*/}
Last Name *
setLastname(e.target.value)}/>
Preferred Name/Chinese Name
setNameCN(e.target.value)}/>
Nick Name
setNickname(e.target.value)}/>
Admission Date
setAdmissionDate(e.target.value)}/>
Discharge Date
setDischargeDate(e.target.value)}/>
Birth Date
setBirthDate(e.target.value)}/>
Customer Type
Gender
Language Spoken
setLanguage(e.target.value)}/>
Height
setHeightFeet(e.target.value)}/> Ft setHeightInch(e.target.value)}/> In
Weight
setWeight(e.target.value)}/> lb
Contact Information
Primary Phone Number * Text Message Available
setPhone(e.target.value)}/>
Secondary Phone Number
setHomePhone(e.target.value)}/>
{/*
Other Phone Number
setMobilePhone(e.target.value)}/>
*/}
Personal Email
setEmail(e.target.value)}/>
{/* We will do Address and Emergency later */}
Service Information
Text Message Enabled
Table Id
setTableId(e.target.value)}/>
Seating
setSeating(e.target.value)}/>
Pickup Status
General Health Information
Eyes-on
Special Needs
setSpecialNeeds(e.target.value)}/>
Additional Information
Profile Picture
{ selectedFile && selectedFile?.name }
Note
setNote(e.target.value)}/>
{/*
Private Note
setPrivateNote(e.target.value)}/>
*/}
Personal Details
Primary Care Provider
setCareProvider(e.target.value)}/>
Medicare Number
setMedicareNumber(e.target.value)}/>
Medicaid Number
setMedicaidNumber(e.target.value)}/>
{/*
Pharmacy:
setPharmacy(e.target.value)}/> */}
Pharmacy
Pharmacy ID
setPharmacyId(e.target.value)}/>
{/* setKeyword(e.currentTarget.value)} /> */}
{/*
Emergency Contact:
setEmergencyContact(e.target.value)}/>
Address 1:
setAddress1(e.target.value)}/>
Address 2:
setAddress2(e.target.value)}/>
Address 3:
setAddress3(e.target.value)}/>
Address 4:
setAddress4(e.target.value)}/>
Address 5:
setAddress5(e.target.value)}/>
Apartment:
setApartment(e.target.value)}/>
Username (not required):
setUsername(e.target.value)}/>
Password (not required):
setPassword(e.target.value)}/>
Pin:
setPin(e.target.value)}/>
Vehicle No:
setVehicleNo(e.target.value)}/>
Caller:
setCaller(e.target.value)}/>
Placement:
setPlacement(e.target.value)}/>
Groups(Please use ',' between each group):
setGroups(e.target.value)}/>
Tags(Please use ',' between each tags):
setTags(e.target.value)}/>
Roles(Please use ',' between each roles):
setRoles(e.target.value)}/>
*/} ); }; export default CreateCustomer;