diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Form/Address/NewAddressPane.tsx | 69 | ||||
| -rw-r--r-- | src/components/Form/People/RegisterPersonForm.tsx | 132 |
2 files changed, 86 insertions, 115 deletions
diff --git a/src/components/Form/Address/NewAddressPane.tsx b/src/components/Form/Address/NewAddressPane.tsx new file mode 100644 index 0000000..4dd3788 --- /dev/null +++ b/src/components/Form/Address/NewAddressPane.tsx @@ -0,0 +1,69 @@ +/* + * OpenBills - Self hosted browser app to generate and keep track of simple invoices + * Version - 0 + * Licensed under the MIT license - https://opensource.org/licenses/MIT + * + * Copyright (c) 2021 Vidhu Kant Sharma +*/ + +import React, { Dispatch, SetStateAction, useState } from "react"; +import "./../Form.scss"; +import { Address } from "./../../../Interfaces/interfaces" + +interface Props { + heading: string + address: Address + setAddress: Dispatch<SetStateAction<Address>> +} + +const NewAddressPane: React.FC<Props> = (props) => { + const address = props.address; + +return ( + <div className={"widePane formPane"}> + <h3>{props.heading}</h3> + + <label> + Address: <input className={"wideInputBox"} + type="text" value={address.AddressLine} onChange={ + ({target: {value}}) => props.setAddress({...address, AddressLine: value}) + } + required /> + </label> + + <label> + City: <input className={"wideInputBox"} + type="text" value={address.City} onChange={ + ({target: {value}}) => props.setAddress({...address, City: value}) + } + required /> + </label> + + <label> + State: <input className={"wideInputBox"} + type="text" value={address.State} onChange={ + ({target: {value}}) => props.setAddress({...address, State: value}) + } + required /> + </label> + + <label> + PIN Code: <input className={"wideInputBox"} + type="text" value={address.PINCode} onChange={ + ({target: {value}}) => props.setAddress({...address, PINCode: value}) + } + required /> + </label> + + <label> + Country: <input className={"wideInputBox"} + type="text" value={address.Country} onChange={ + ({target: {value}}) => props.setAddress({...address, Country: value}) + } + required /> + </label> + </div> + ); +} + +export default NewAddressPane; diff --git a/src/components/Form/People/RegisterPersonForm.tsx b/src/components/Form/People/RegisterPersonForm.tsx index 3fc8b32..9c8752d 100644 --- a/src/components/Form/People/RegisterPersonForm.tsx +++ b/src/components/Form/People/RegisterPersonForm.tsx @@ -7,9 +7,10 @@ */ import React, { useState } from "react"; -import "./../Form.scss"; -import { Person } from "./../../../interfaces" +import NewAddressPane from "./../Address/NewAddressPane" +import { Person, Address } from "./../../../Interfaces/interfaces" import axios from "axios"; +import "./../Form.scss"; interface props { setVisibility: any // this component's visibility @@ -23,12 +24,13 @@ const RegisterPersonForm: React.FC<props> = (props) => { const [shipToBillAddress, setShipToBillAddress] = useState<boolean>(true); - const [newPersonBillAddressLine, setNewPersonBillAddressLine] = useState<string>(""); - const [newPersonBillCity, setNewPersonBillCity] = useState<string>(""); - const [newPersonBillState, setNewPersonBillState] = useState<string>(""); - const [newPersonBillPINCode, setNewPersonBillPINCode] = useState<string>(""); - const [newPersonBillCountry, setNewPersonBillCountry] = useState<string>(""); - + const [newPersonBillAddress, setNewPersonBillAddress] = useState<Address>({ + AddressLine: "", + City: "", + State: "", + PINCode: "", + Country: "" + }) const hideSelf = () => props.setVisibility(false); @@ -43,26 +45,15 @@ const RegisterPersonForm: React.FC<props> = (props) => { Phone: newPersonPhone, Email: newPersonEmail, - BillAddress: { - AddressLine: newPersonBillAddressLine, - City: newPersonBillCity, - State: newPersonBillState, - PINCode: newPersonBillPINCode, - Country: newPersonBillCountry - }, - - // currently same as BillAddress - ShipAddress: { - AddressLine: newPersonBillAddressLine, - City: newPersonBillCity, - State: newPersonBillState, - PINCode: newPersonBillPINCode, - Country: newPersonBillCountry - }, + BillAddress: newPersonBillAddress, + ShipAddress: shipToBillAddress + ? newPersonBillAddress + // TODO: use shipping address(es) instead + : newPersonBillAddress, } // TODO: show confirmation before being invisible - // TODO: Implement override protection + // TODO: Implement overwrite protection axios.post("/api/people/register", newClient) .then((res) => { console.log(res); @@ -111,96 +102,7 @@ const RegisterPersonForm: React.FC<props> = (props) => { </div> </div> - <div className={"widePane formPane"}> - <h3>Billing Address</h3> - - <label> - Address: <input className={"wideInputBox"} - type="text" value={newPersonBillAddressLine} onChange={ - (event) => setNewPersonBillAddressLine(event.target.value) - } - required /> - </label> - - <label> - City: <input className={"wideInputBox"} - type="text" value={newPersonBillCity} onChange={ - (event) => setNewPersonBillCity(event.target.value) - } - required /> - </label> - - <label> - State: <input className={"wideInputBox"} - type="text" value={newPersonBillState} onChange={ - (event) => setNewPersonBillState(event.target.value) - } - required /> - </label> - - <label> - PIN Code: <input className={"wideInputBox"} - type="text" value={newPersonBillPINCode} onChange={ - (event) => setNewPersonBillPINCode(event.target.value) - } - required /> - </label> - - <label> - Country: <input className={"wideInputBox"} - type="text" value={newPersonBillCountry} onChange={ - (event) => setNewPersonBillCountry(event.target.value) - } - required /> - </label> - </div> - - {shipToBillAddress || // TODO: Make it store different data - // TODO: maybe move it to its own prop - <div className={"widePane formPane"}> - <h3>Shipping Address</h3> - - <label> - Address: <input className={"wideInputBox"} - type="text" value={newPersonBillAddressLine} onChange={ - (event) => setNewPersonBillAddressLine(event.target.value) - } - required /> - </label> - - <label> - City: <input className={"wideInputBox"} - type="text" value={newPersonBillCity} onChange={ - (event) => setNewPersonBillCity(event.target.value) - } - required /> - </label> - - <label> - State: <input className={"wideInputBox"} - type="text" value={newPersonBillState} onChange={ - (event) => setNewPersonBillState(event.target.value) - } - required /> - </label> - - <label> - PIN Code: <input className={"wideInputBox"} - type="text" value={newPersonBillPINCode} onChange={ - (event) => setNewPersonBillPINCode(event.target.value) - } - required /> - </label> - - <label> - Country: <input className={"wideInputBox"} - type="text" value={newPersonBillCountry} onChange={ - (event) => setNewPersonBillCountry(event.target.value) - } - required /> - </label> - </div> - } + <NewAddressPane heading={"Billing Address"} address={newPersonBillAddress} setAddress={setNewPersonBillAddress}/> <div className={"options"}> <label className={"menuLabel"}> |