make changes based on review

commercetools · May 13, 2019 · 6aa50b0 · 6aa50b0
1 parent 3564316
commit 6aa50b0
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 81 deletions.
diff --git a/src/components/common/AddDiscountCodeForm.vue b/src/components/common/AddDiscountCodeForm.vue
@@ -16,11 +16,13 @@
                class="info-icon"
                alt="information icon">
         </span>
-        <input id="promo-code"
-               type="text"
-               v-model="code"
-               required
-               data-test="discount-code-input">
+        <ValidationError :vuelidate="$v.code"
+                         class="vuelidate">
+          <input v-model.trim.lazy="$v.code.$model"
+                 id="promo-code"
+                 type="text"
+                 data-test="discount-code-input"/>
+        </ValidationError>
         <LoadingButton :buttonState="buttonState"
                        class="apply-button"
                        data-test="apply-discount-code-button">
@@ -33,12 +35,14 @@
 
 <script>
 import gql from 'graphql-tag';
+import { required } from 'vuelidate/lib/validators';
 import LoadingButton from './LoadingButton.vue';
 import ServerError from './ServerError.vue';
 import cartMixin from '@/mixins/cartMixin';
+import ValidationError from './ValidationError.vue';
 
 export default {
-  components: { LoadingButton, ServerError },
+  components: { LoadingButton, ServerError, ValidationError },
 
   data: () => ({
     me: null,
@@ -58,16 +62,17 @@ export default {
 
     submitDiscountCode() {
       this.serverError = null;
-      this.buttonState = 'loading';
-      this.addDiscountCode()
-        .then(() => {
-          this.buttonState = 'success';
-          this.code = null;
-        })
-        .catch((error) => {
-          this.serverError = error;
-          this.buttonState = null;
-        });
+      if (!this.$v.$invalid) {
+        this.buttonState = 'loading';
+        this.addDiscountCode()
+          .then(() => {
+            this.buttonState = 'success';
+          })
+          .catch((error) => {
+            this.serverError = error;
+            this.buttonState = null;
+          });
+      }
     },
 
     getErrorMessage({ code }) {
@@ -105,11 +110,17 @@ export default {
       },
     },
   },
+
+  validations: {
+    code: {
+      required,
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-  .apply-button {
+.apply-button {
   background: none;
   font-weight: 400;
   font-size: 14px;
@@ -119,13 +130,16 @@ export default {
   margin-right: 0.5em;
   padding: 0.5em 1em;
   position: relative;
-  &:hover {
-    background: none;
-    color: #858585;
-    border: 2px solid #858585;
+    &:hover {
+      background: none;
+      color: #858585;
+      border: 2px solid #858585;
+    }
   }
-}
 
+.vuelidate {
+  display: inline-block
+}
 </style>
 
 <i18n>

diff --git a/src/components/common/DiscountCodes.vue b/src/components/common/DiscountCodes.vue
@@ -15,25 +15,26 @@
             {{ discountInfo.discountCode.code }}
           </div>
           <div class="col-sm-3">{{ discountInfo.discountCode.name }}</div>
-          <RemoveDiscountCode :editable='true'
-                              :codeId='discountInfo.discountCode.id'/>
+          <RemoveDiscountCodeForm v-if="cartLike.__typename == 'Cart'"
+                                  :codeId='discountInfo.discountCode.id'/>
         </div>
       </div>
     </div>
 </template>
 
 <script>
-import RemoveDiscountCode from './RemoveDiscountCode.vue';
+import RemoveDiscountCodeForm from './RemoveDiscountCodeForm.vue';
 
 export default {
-  components: { RemoveDiscountCode },
+  components: { RemoveDiscountCodeForm },
 
   props: {
     cartLike: {
       type: Object,
       required: true,
     },
   },
+
 };
 </script>
 

diff --git a/src/components/common/PriceCalculation.vue b/src/components/common/PriceCalculation.vue
@@ -3,9 +3,10 @@
     <div class="row">
       <div class="col-sm-12">
           <div class="row">
-            <DiscountCodes v-if="discountCodesExist"
-                           :cartLike="cartLike"/>
-            <hr v-if="discountCodesExist">
+            <div v-if="discountCodesExist">
+              <DiscountCodes :cartLike="cartLike"/>
+              <hr>
+            </div>
             <div class="col-sm-10 col-xs-7">
               <div class="text-right subtotal">
                 <span class="subtotal-title">{{ $t('subtotal') }}</span>

diff --git a/src/components/common/RemoveDiscountCode.vue → ...ponents/common/RemoveDiscountCodeForm.vue b/src/components/common/RemoveDiscountCode.vue → ...ponents/common/RemoveDiscountCodeForm.vue
@@ -1,6 +1,5 @@
 <template>
-  <div v-if="editable"
-       id="deleteButton"
+  <div id="deleteButton"
        class="col-sm-1"
        @click="removeDiscountCode"
        data-test="remove-discount-button">
@@ -20,10 +19,6 @@ export default {
   }),
 
   props: {
-    editable: {
-      type: Boolean,
-      default: () => false,
-    },
     codeId: {
       type: String,
     },
@@ -52,13 +47,6 @@ export default {
             activeCart {
               id
               version
-              discountCodes {
-                discountCode {
-                  id
-                  code
-                  name(locale: $locale)
-                }
-              }
             }
           }
         }`,

diff --git a/src/components/login/LoginForm.vue b/src/components/login/LoginForm.vue
@@ -134,23 +134,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-button {
-  margin-right: 15px;
-  font-weight: 900;
-  background: #FFBA27;
-  padding: 10px 20px;
-  text-transform: uppercase;
-  font-size: 16px;
-  letter-spacing: 1px;
-  position: relative;
-
-  &:hover {
-    background: lighten(#FFBA27, 5%);
-  }
-}
-</style>
-
 <i18n>
 en:
   title: "Returning Customer Sign In"

diff --git a/src/components/useraccount/myorders/OrderDetail.vue b/src/components/useraccount/myorders/OrderDetail.vue
@@ -123,6 +123,13 @@ export default {
               totalPrice {
                 ...DisplayableMoney
               }
+              discountCodes {
+                discountCode {
+                  id
+                  code
+                  name(locale: $locale)
+                }
+              }
               lineItems {
                 id
                 quantity

diff --git a/src/mixins/cartMixin.js b/src/mixins/cartMixin.js
@@ -71,20 +71,7 @@ export default {
                 discountCode {
                   id
                   code
-                  name(locale: $locale)
-                  description(locale: $locale)
-                  cartDiscounts{
-                    value{
-                      ... on RelativeDiscountValue{
-                        permyriad
-                      }
-                      ... on AbsoluteDiscountValue{
-                        money{
-                          ...DisplayableMoney
-                        }
-                      }
-                    }
-                  }
+                  name(locale: $locale)                  
                 }
               }
             }

diff --git a/tests/e2e/specs/orderDetail_spec.js b/tests/e2e/specs/orderDetail_spec.js
@@ -53,6 +53,7 @@ describe('OrderDetailPage', () => {
       quantity: 2,
     },
     ],
+    discountCodes: ['CODE2019'],
   };
 
   before(() => {
@@ -70,9 +71,9 @@ describe('OrderDetailPage', () => {
     cy.get('[data-test=details-order-date]')
       .contains(/^\s*\d{1,2}\.*\s*[A-Za-zäÄöÖüÜß].+\s*\d{4}\s*$/);
     cy.get('[data-test=cart-subtotal-price]')
-      .contains(/^\s*367,60\s€\s*$/);
+      .contains(/^\s*349,21\s€\s*$/);
     cy.get('[data-test=cart-total-price]')
-      .contains(/^\s*367,60\s€\s*$/);
+      .contains(/^\s*349,21\s€\s*$/);
     cy.get('[data-test=order-line-items]')
       .should('have.length', 2)
       .eq(1)
@@ -84,5 +85,9 @@ describe('OrderDetailPage', () => {
           .find('[data-test=price-new-value]')
           .contains(/^\s*139,30\s€\s*$/);
       });
+    cy.get('[data-test=discount-code-name]')
+      .contains('CODE2019');
+    cy.get('[data-test=remove-discount-button]')
+      .should('not.exist');
   });
 });
diff --git a/tests/unit/specs/components/cartdetail/PriceCalculation.spec.js b/tests/unit/specs/components/cartdetail/PriceCalculation.spec.js
@@ -12,12 +12,6 @@ describe('PriceCalculation.vue', () => {
     discountCodes: [{
       discountCode: {
         code: 'CODE2019',
-        cartDiscounts: [{
-          value: {
-            __typename: 'RelativeDiscountValue',
-            permyriad: 500,
-          },
-        }],
       },
     }],
   };