Improve disabling full-button

README.md

@@ -49,7 +49,7 @@ See the ideas behind Vue Storefront [here](https://www.slideshare.net/FilipRakow
 
 ## Is it production ready?
 
-Yes! There are more than 10 implementations happening right now and one live shop.
+Yes! There are more than 10 implementations happening right now and many live shops (check [awesome Vue Storefront list](https://github.com/frqnck/awesome-vue-storefront)).
 
 ## Join the community on Slack
 If you have any questions or ideas feel free to join our slack: https://vuestorefront.slack.com via [invitation link](https://join.slack.com/t/vuestorefront/shared_invite/enQtMzA4MTM2NTE5NjM2LTI1M2RmOWIyOTk0MzFlMDU3YzJlYzcyYzNiNjUyZWJiMTZjZjc3MjRlYmE5ZWQ1YWRhNTQyM2ZjN2ZkMzZlNTg)

src/themes/default/components/core/blocks/Checkout/OrderReview.vue

@@ -68,7 +68,7 @@
                 @click.native="placeOrder"
                 data-testid="orderReviewSubmit"
                 class="place-order-btn"
-                :class="{ 'button-disabled' : $v.orderReview.$invalid }"
+                :disabled="$v.orderReview.$invalid"
               >
                 {{ $t('Place the order') }}
               </button-full>

src/themes/default/components/core/blocks/Checkout/Payment.vue

@@ -264,7 +264,7 @@
             <button-full
               @click.native="sendDataToCheckout"
               data-testid="paymentSubmit"
-              :class="{ 'button-disabled' : $v.payment.$invalid }"
+              :disabled="$v.payment.$invalid"
             >
               {{ $t('Go review the order') }}
             </button-full>

src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue

@@ -165,7 +165,7 @@
             <button-full
               data-testid="personalDetailsSubmit"
               @click.native="sendDataToCheckout"
-              :class="{ 'button-disabled' : (createAccount ? $v.$invalid : $v.personalDetails.$invalid) }"
+              :disabled="createAccount ? $v.$invalid : $v.personalDetails.$invalid"
             >
               {{ $t('Continue to shipping') }}
             </button-full>

src/themes/default/components/core/blocks/Checkout/Shipping.vue

@@ -204,7 +204,7 @@
             <button-full
               data-testid="shippingSubmit"
               @click.native="sendDataToCheckout"
-              :class="{ 'ripple': true, 'button-disabled' : $v.shipping.$invalid}"
+              :disabled="$v.shipping.$invalid"
             >
               {{ $t('Continue to payment') }}
             </button-full>

src/themes/default/components/core/blocks/MyAccount/MyProfile.vue

@@ -284,7 +284,7 @@
       <div class="col-xs-12 col-sm-6">
         <button-full
           @click.native="updateProfile"
-          :class="{ 'button-disabled': checkValidation() }"
+          :disabled="checkValidation()"
         >
           {{ $t('Update my profile') }}
         </button-full>

src/themes/default/components/core/blocks/MyAccount/MyShippingDetails.vue

@@ -169,7 +169,7 @@
         <div class="col-xs-12 col-sm-6">
           <button-full
             @click.native="updateDetails"
-            :class="{ 'button-disabled': $v.$invalid }"
+            :disabled="$v.$invalid"
           >
             {{ $t('Update my shipping details') }}
           </button-full>

src/themes/default/components/theme/ButtonFull.vue

@@ -4,8 +4,9 @@
     :type="!link ? type : false"
     :to="localizedRoute(link)"
     class="no-outline button-full block brdr-none w-100 px10 py20 bg-cl-mine-shaft :bg-cl-th-secondary ripple weight-400 h4 cl-white sans-serif fs-medium"
-    :class="{ 'no-underline pointer align-center border-box': link, 'disabled': disabled }"
+    :class="{ 'no-underline pointer align-center border-box': link, 'disabled': disabled, 'button-disabled': disabled }"
     data-testid="subscribeSubmit"
+    :disabled="disabled"
   >
     <slot>
       Button