From 69ab9b89e17a53d6566218ac1b89e5e415f1ce9b Mon Sep 17 00:00:00 2001
From: Rortan <samaritanojr006@gmail.com>
Date: Tue, 26 Jul 2022 03:29:46 +0200
Subject: [PATCH 1/2] fix: controlled input value warning

---
 components/checkout/common/AddressForm.js    | 19 ++++++++++++++--
 components/checkout/common/PaymentDetails.js |  4 ++++
 components/common/atoms/Dropdown.js          |  1 +
 pages/checkout/index.js                      | 24 +++++++++++++++++---
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/components/checkout/common/AddressForm.js b/components/checkout/common/AddressForm.js
index bff4a48..064a11b 100644
--- a/components/checkout/common/AddressForm.js
+++ b/components/checkout/common/AddressForm.js
@@ -62,7 +62,13 @@ export default class AddressForm extends Component {
               <p className="mb-1 font-size-caption font-color-light">
                 Full name*
               </p>
-              <input required name={`${type}[name]`} autoComplete="name" value={name} className="rounded-0 w-100" />
+              <input 
+              required 
+              name={`${type}[name]`} 
+              autoComplete="name" 
+              value={name} 
+              onChange={(e) => this.setState({ name: e.target.value })} 
+              className="rounded-0 w-100" />
             </label>
           </div>
         </div>
@@ -91,7 +97,13 @@ export default class AddressForm extends Component {
           <div className="col-12 col-sm-6 mb-3">
             <label className="w-100">
               <p className="mb-1 font-size-caption font-color-light">City*</p>
-              <input required name={`${type}[town_city]`} autoComplete="address-level2" value={townCity} className="rounded-0 w-100" />
+              <input 
+              required 
+              name={`${type}[town_city]`} 
+              autoComplete="address-level2" 
+              value={townCity} 
+              onChange={(e) => this.setState({ townCity: e.target.value })} 
+              className="rounded-0 w-100" />
             </label>
           </div>
         </div>
@@ -106,6 +118,7 @@ export default class AddressForm extends Component {
                 autoComplete="street-address"
                 name={`${type}[street]`}
                 value={street}
+                onChange={(e) => this.setState({ street: e.target.value })}
                 className="rounded-0 w-100"
                 placeholder="House number, steet address, etc."
               />
@@ -119,6 +132,7 @@ export default class AddressForm extends Component {
               <input
                 name={`${type}[street_2]`}
                 value={street2}
+                onChange={(e) => this.setState({ street2: e.target.value })}
                 className="rounded-0 w-100"
                 placeholder="Apartment, suite number, etc."
               />
@@ -157,6 +171,7 @@ export default class AddressForm extends Component {
                 autoComplete="postal-code"
                 name={`${type}[postal_zip_code]`}
                 value={postalZipCode}
+                onChange={(e) => this.setState({ postalZipCode: e.target.value })}
                 className="rounded-0 w-100"
               />
             </label>
diff --git a/components/checkout/common/PaymentDetails.js b/components/checkout/common/PaymentDetails.js
index ca9ef7b..0da3dd2 100644
--- a/components/checkout/common/PaymentDetails.js
+++ b/components/checkout/common/PaymentDetails.js
@@ -49,6 +49,7 @@ export default class PaymentDetails extends Component {
                     name="cardNumber"
                     pattern="[0-9. ]+"
                     value={cardNumber}
+                    onChange={(e) => this.setState({ cardNumber: e.target.value})}
                     maxLength="16"
                     className="rounded-0 w-100"
                   />
@@ -62,6 +63,7 @@ export default class PaymentDetails extends Component {
                   <input
                     name="cvc"
                     value={cvc}
+                    onChange={(e) => this.setState({ cvc: e.target.value})}
                     maxLength="3"
                     type="number"
                     className="rounded-0 w-100"
@@ -77,6 +79,7 @@ export default class PaymentDetails extends Component {
                     name="expMonth"
                     type="number"
                     value={expMonth}
+                    onChange={(e) => this.setState({ expMonth: e.target.value})}
                     className="rounded-0 w-100"
                     placeholder="MM"
                   />
@@ -91,6 +94,7 @@ export default class PaymentDetails extends Component {
                     type="number"
                     name="expYear"
                     value={expYear}
+                    onChange={(e) => this.setState({ expYear: e.target.value})}
                     className="rounded-0 w-100"
                     placeholder="YY"
                   />
diff --git a/components/common/atoms/Dropdown.js b/components/common/atoms/Dropdown.js
index 8dbde1e..f917294 100644
--- a/components/common/atoms/Dropdown.js
+++ b/components/common/atoms/Dropdown.js
@@ -32,6 +32,7 @@ class Dropdown extends Component {
             required={this.props.required || undefined}
             disabled={this.props.disabled || undefined}
             value={this.props.value}
+            onChange={(e) => this.setState({value: e.target.value})}
             className="position-absolute top-0 right-0 bottom-0 left-0 opacity-0 pointer w-100">
             <option value="" disabled>
               { this.props.disabledOptionText || 'Select an option' }
diff --git a/pages/checkout/index.js b/pages/checkout/index.js
index 6f47b8c..0185f85 100644
--- a/pages/checkout/index.js
+++ b/pages/checkout/index.js
@@ -573,7 +573,13 @@ class CheckoutPage extends Component {
                           <p className="mb-1 font-size-caption font-color-light">
                             First name*
                           </p>
-                          <input required name="customer[first_name]" autoComplete="given-name" value={this.state['customer[first_name]']} className="rounded-0 w-100" />
+                          <input 
+                          required 
+                          name="customer[first_name]" 
+                          autoComplete="given-name" 
+                          value={this.state['customer[first_name]']} 
+                          onChange={(e) => this.setState({['customer[first_name]']: e.target.value})} 
+                          className="rounded-0 w-100" />
                         </label>
                       </div>
                       <div className="col-12 col-sm-6 mb-3">
@@ -581,7 +587,13 @@ class CheckoutPage extends Component {
                           <p className="mb-1 font-size-caption font-color-light">
                             Last name*
                           </p>
-                          <input required name="customer[last_name]" autoComplete="family-name" value={this.state['customer[last_name]']} className="rounded-0 w-100" />
+                          <input 
+                          required 
+                          name="customer[last_name]" 
+                          autoComplete="family-name" 
+                          value={this.state['customer[last_name]']} 
+                          onChange={(e) => this.setState({['customer[last_name]']: e.target.value})} 
+                          className="rounded-0 w-100" />
                         </label>
                       </div>
                     </div>
@@ -595,6 +607,7 @@ class CheckoutPage extends Component {
                             name="customer[phone]"
                             autoComplete="tel"
                             value={this.state['customer[phone]']}
+                            onChange={(e) => this.setState({['customer[phone]']: e.target.value})}
                             className="rounded-0 w-100"
                           />
                         </label>
@@ -609,6 +622,7 @@ class CheckoutPage extends Component {
                             name="customer[email]"
                             autoComplete="email"
                             value={this.state['customer[email]']}
+                            onChange={(e) => this.setState({['customer[email]']: e.target.value})}
                             className="rounded-0 w-100"
                           />
                         </label>
@@ -674,7 +688,11 @@ class CheckoutPage extends Component {
                         <p className="mb-1 font-size-caption font-color-light">
                           Order notes (optional)
                         </p>
-                        <textarea name="orderNotes" value={this.state.orderNotes} className="rounded-0 w-100" />
+                        <textarea 
+                        name="orderNotes" 
+                        value={this.state.orderNotes} 
+                        onChange={(e) => this.setState({ orderNotes: e.target.value})} 
+                        className="rounded-0 w-100" />
                       </label>
                     </div>
 

From b082cd20afa38e0483babf89b68da71ebfcc14cf Mon Sep 17 00:00:00 2001
From: Rortan <samaritanojr006@gmail.com>
Date: Tue, 26 Jul 2022 03:38:01 +0200
Subject: [PATCH 2/2] fix: ignore hydratation warning

---
 components/common/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/common/Header.js b/components/common/Header.js
index b7015fd..0245bbf 100644
--- a/components/common/Header.js
+++ b/components/common/Header.js
@@ -208,7 +208,7 @@ class Header extends Component {
               </a>
             </Link>
           </div>
-          <div className="d-flex">
+          <div className="d-flex" suppressHydrationWarning={true}>
             { process.browser && this.renderLoginLogout() }
             <div
               className="position-relative cursor-pointer"