Added half support to add different shipping address

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()} />