diff options
| -rw-r--r-- | src/components/Form/Form.scss | 35 | ||||
| -rw-r--r-- | src/components/Form/People/RegisterPersonForm.tsx | 121 |
2 files changed, 128 insertions, 28 deletions
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 31a15b1..381f45c 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -24,12 +24,23 @@ input[type=number] { padding: 1.5rem; box-sizing: border-box; border: 1px solid $border1; + background-color: $background4; display: flex; flex-direction: column; - justify-content: space-around; + justify-content: space-between; - background-color: $background4; + .inputs { + display: flex; + flex-direction: column; + justify-content: space-around; + height: 100%; + } + + h3 { + padding: 0; + margin: 0; + } } @mixin formWideLabel { @@ -121,13 +132,27 @@ input { .floatingForm .menu { position: absolute; - right: 0.5rem; bottom: 0.5rem; + + * { + margin: 1rem; + } } -.floatingForm .menu * { - margin: 1rem; +.floatingForm .options { + position: absolute; + bottom: 1.5rem; + left: 1.5rem; + + label { + display: flex; + align-items: center; + justify-content: left; + font-size: $fontSize1; + border: none; + padding: 0; + } } .DocumentInfoForm { diff --git a/src/components/Form/People/RegisterPersonForm.tsx b/src/components/Form/People/RegisterPersonForm.tsx index dedc45a..3fc8b32 100644 --- a/src/components/Form/People/RegisterPersonForm.tsx +++ b/src/components/Form/People/RegisterPersonForm.tsx @@ -21,12 +21,15 @@ const RegisterPersonForm: React.FC<props> = (props) => { const [newPersonPhone, setNewPersonPhone] = useState<string>(""); const [newPersonEmail, setNewPersonEmail] = useState<string>(""); + 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 hideSelf = () => props.setVisibility(false); const closeOnBGClicked = (event: any) => @@ -80,29 +83,32 @@ const RegisterPersonForm: React.FC<props> = (props) => { <form className={"floatingForm"} onSubmit={postForm}> <div className={"twoPaneForm"}> <div className={"widePane formPane"}> - <label> - Name: <input className={"wideInputBox"} - type="text" value={newPersonName} onChange={ - (event) => setNewPersonName(event.target.value) - } - required /> - </label> - - <label> - Phone: <input className={"wideInputBox"} - type="text" value={newPersonPhone} onChange={ - (event) => setNewPersonPhone(event.target.value) - } - required /> - </label> - - <label> - Email: <input className={"wideInputBox"} - type="text" value={newPersonEmail} onChange={ - (event) => setNewPersonEmail(event.target.value) - } - required /> - </label> + <h3>Client Details</h3> + <div className={"inputs"}> + <label> + Name: <input className={"wideInputBox"} + type="text" value={newPersonName} onChange={ + (event) => setNewPersonName(event.target.value) + } + required /> + </label> + + <label> + Phone: <input className={"wideInputBox"} + type="text" value={newPersonPhone} onChange={ + (event) => setNewPersonPhone(event.target.value) + } + required /> + </label> + + <label> + Email: <input className={"wideInputBox"} + type="text" value={newPersonEmail} onChange={ + (event) => setNewPersonEmail(event.target.value) + } + required /> + </label> + </div> </div> <div className={"widePane formPane"}> @@ -149,6 +155,75 @@ const RegisterPersonForm: React.FC<props> = (props) => { </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> + } + + <div className={"options"}> + <label className={"menuLabel"}> + <input + type="radio" + name={"shipToBillAddressRadio"} + checked={shipToBillAddress === true} + onChange={() => setShipToBillAddress(true)} + /> + Same shipping address as billing address + </label> + + <label className={"menuLabel"}> + <input + type="radio" + name={"shipToBillAddressRadio"} + checked={shipToBillAddress === false} + onChange={() => setShipToBillAddress(false)} + /> + Use different shipping address + </label> + </div> + <div className={"menu"}> <input type="button" value="cancel" onClick={() => hideSelf()} /> |