fix: update user data when checkout

fix: navbar
kamaladenalhomsi · Sep 20, 2019 · 5ce53f2 · 5ce53f2
1 parent f5f97bf
commit 5ce53f2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git a/public/static/responsive-425.css b/public/static/responsive-425.css
@@ -41,3 +41,7 @@
   margin: 0px auto 50px auto;
   width: 80% !important;
 }
+
+.navbar-header {
+  transform: translate(0px, -32px);
+}
diff --git a/src/components/Cart/Cart.vue b/src/components/Cart/Cart.vue
@@ -43,7 +43,7 @@
         <div class="cart-modal__footer mt-8">
           <div
             v-if="!checkout.active"
-            class="w-10/12 h-full mx-auto flex-col-reverse flex-wrap md:flex-no-wrap flex items-center"
+            class="w-10/12 h-full mx-auto md:flex-row flex-col-reverse flex-wrap md:flex-no-wrap flex items-center"
           >
             <div class="w-full py-4 md:w-1/2 flex justify-center md:justify-start">
               <custom-button
@@ -215,9 +215,9 @@ export default {
     },
     async nextButton() {
       const { checkout } = this
-      let vaild = await this.$refs.checkout.validateAll()
+      let { vaild, address } = await this.$refs.checkout.validateAll()
       if (vaild) {
-        this.$refs.checkout.update()
+        if (address) this.$refs.checkout.update()
         checkout.tab++
       }
     },

diff --git a/src/components/Cart/Checkout.vue b/src/components/Cart/Checkout.vue
@@ -69,6 +69,32 @@
               >{{ option.shipping_region }}</option>
             </b-select>
           </b-field>
+          <b-field
+            class="custom-input w-full md:w-1/2 pr-4"
+            :message="server_errors['city'] || errors.first(`${addressScope}.city`)"
+            :type="server_errors['city'] || errors.has(`${addressScope}.city`) ? 'is-danger' : ''"
+          >
+            <b-input
+              :data-vv-scope="addressScope"
+              v-model="customer.city"
+              data-vv-name="city"
+              placeholder="City"
+              v-validate="'required'"
+            ></b-input>
+          </b-field>
+          <b-field
+            class="custom-input w-full md:w-1/2 pr-4"
+            :message="server_errors['postal_code'] || errors.first(`${addressScope}.postal_code`)"
+            :type="server_errors['postal_code'] || errors.has(`${addressScope}.postal_code`) ? 'is-danger' : ''"
+          >
+            <b-input
+              :data-vv-scope="addressScope"
+              v-model="customer.postal_code"
+              data-vv-name="postal_code"
+              placeholder="Postal Code"
+              v-validate="'required'"
+            ></b-input>
+          </b-field>
           <custom-button
             nm="updateAddressCheckout"
             class="mt-4"
@@ -327,7 +353,10 @@ export default {
     async validateAll() {
       // Check for validation
       let vaild = await this.$validator.validateAll('order')
-      return vaild
+      return {
+        vaild,
+        address: this.addressScope === 'order' ? true : false
+      }
     },
     async createOrder() {
       this.checkout.loading = true

diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue
@@ -55,12 +55,10 @@
 </template>
 
 <style lang="scss">
-
 // Wrapper
 .wrapper {
   padding-top: 80px
 }
-
 .navbar-header {
   position: fixed;
   left: 0;
@@ -79,12 +77,10 @@
     }
   }
 }
-
 .navbar-menu {
   position: relative;
   background-color: transparent;
 }
-
 // Navbar Item
 .navbar-item {
   height: 100%;
@@ -104,15 +100,12 @@
     background-color: $docColorWhite !important;
   }
 }
-
 .navbar-start {
   display: flex;
   height: 100%;
   align-items: center;
 }
-
 // Main Footer
-
 .main-footer {
   background-color: $docColorBlack;
   width: 100%;
@@ -137,13 +130,11 @@
     }
   }
 }
-
 .search-input {
   input {
     background-color: rgba(255, 255, 255, 0.9)
   }
 }
-
 </style>
 
 <script>
@@ -155,7 +146,6 @@ import EventBus from '@/eventBus.js'
 import { mapGetters } from 'vuex'
 const Cart = () => import(/* webpackPrefetch: true */'@/components/Cart/Cart.vue')
 const AuthTemp = () => import(/* webpackPrefetch: true */'@/components/Authentication/AuthTemp.vue')
-
 export default {
   name: 'main-layout',
   components: {
@@ -211,9 +201,9 @@ export default {
       } else {
         if (mq.matches)
           // Media query matched
-          document.querySelector('.navbar-header').style.transform = 'translate(0px, 0px)'
-        else
           document.querySelector('.navbar-header').style.transform = 'translate(0px, -32px)'
+        else
+          document.querySelector('.navbar-header').style.transform = 'translate(0px, -0px)'
       }
     }
   },