Merge e117e3a into 9477ead

packages/commercetools/theme/components/Checkout/CartPreview.vue

@@ -3,20 +3,20 @@
     <div class="highlighted">
       <SfHeading
         :level="3"
-        title="Order summary"
+        :title="$t('Order summary')"
         class="sf-heading--left sf-heading--no-underline title"
       />
     </div>
     <div class="highlighted">
       <SfProperty
-        name="Products"
+        :name="$t('Products')"
         :value="totalItems"
         class="sf-property--full-width sf-property--large property"
       />
       <SfProperty
-        name="Subtotal"
+        :name="$t('Subtotal')"
         :value="$n(totals.subtotal, 'currency')"
-        :class="['sf-property--full-width', 'sf-property--large', { discounted: hasSpecialPrice }]"
+        :class="['sf-property--full-width', 'sf-property--large property', { discounted: hasSpecialPrice }]"
       />
       <SfProperty
         v-for="discount in discounts"
@@ -31,13 +31,13 @@
         class="sf-property--full-width sf-property--small property special-price"
       />
       <SfProperty
-        name="Shipping"
+        :name="$t('Shipping')"
         v-if="selectedShippingMethod && selectedShippingMethod.zoneRates"
         :value="$n(getShippingMethodPrice(selectedShippingMethod, totals.total), 'currency')"
         class="sf-property--full-width sf-property--large property"
       />
       <SfProperty
-        name="Total"
+        :name="$t('Total')"
         :value="$n(totals.total, 'currency')"
         class="sf-property--full-width sf-property--large property-total"
       />
@@ -172,7 +172,7 @@ export default {
 
 .characteristic {
   &:not(:last-child) {
-    margin-bottom: var(--spacer-lg);
+    margin-bottom: var(--spacer-base);
   }
 }
 .promo-code {

packages/commercetools/theme/components/Checkout/UserBillingAddresses.vue

@@ -9,6 +9,7 @@
         v-for="billingAddress in billingAddresses"
         :key="userBillingGetters.getId(billingAddress)"
         :name="String(userBillingGetters.getId(billingAddress))"
+        class="billing__address"
       >
         <span
           >{{ userBillingGetters.getFirstName(billingAddress) }} {{ userBillingGetters.getLastName(billingAddress) }}</span
@@ -32,7 +33,7 @@
       @change="$emit('input', $event)"
       name="setAsDefault"
       label="Use this address as my default one."
-      class="billing-address-setAsDefault"
+      class="billing__setAsDefault"
     />
   </div>
 </template>
@@ -77,13 +78,22 @@ export default {
 };
 </script>
 
-<style>
-  .billing__addresses {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    margin-bottom: var(--spacer-xl);
-  }
-  .billing-address-setAsDefault, .form__action-button--margin-bottom {
-    margin-bottom: var(--spacer-xl);
+<style lang="scss" scoped>
+  .billing {
+    &__address {
+      margin-bottom: var(--spacer-base);
+      @include for-desktop {
+        margin-right: var(--spacer-sm);
+      }
+    }
+    &__addresses {
+      margin-bottom: var(--spacer-xl);
+      @include for-desktop {
+        display: flex;
+      }
+    }
+    &__setAsDefault {
+      margin-bottom: var(--spacer-xl);
+    }
   }
 </style>

packages/commercetools/theme/components/Checkout/VsfPaymentProviderMock.vue

@@ -6,7 +6,7 @@
       class="sf-heading--left sf-heading--no-underline title"
     />
     <div class="form">
-      <div class="form__radio-group">
+      <div class="form__radio-group payment__methods">
           <SfRadio
             v-for="method in paymentMethods"
             :key="method.id"
@@ -16,7 +16,7 @@
             @input="selectPaymentMethod(method)"
             name="paymentMethod"
             :description="method.description"
-            class="form__radio payment"
+            class="form__radio payment__method"
           >
             <template #label="{ label }">
               <div class="sf-radio__label payment__label">
@@ -78,21 +78,8 @@ export default {
 <style lang="scss" scoped>
 .title {
   margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  --heading-title-font-weight: var(--font-weight--bold);
 }
-
-.payment-provider {
-  .sf-radio {
-    &__label {
-      display: flex;
-      justify-content: space-between;
-    }
-    &__description {
-      --radio-description-margin: 0;
-      --radio-description-font-size: var(--font-xs);
-    }
-  }
-}
-
 .form {
   --button-width: 100%;
   @include for-desktop {
@@ -107,38 +94,36 @@ export default {
       display: flex;
     }
   }
-  &__action-button {
-    &--secondary {
-      @include for-desktop {
-        order: -1;
-        text-align: left;
-      }
-    }
-    &--add-address {
-      width: 100%;
-      margin: 0;
-      @include for-desktop {
-        margin: 0 0 var(--spacer-lg) 0;
-        width: auto;
-      }
+  &__radio-group {
+    flex: 0 0 100%;
+    margin: 0 0 var(--spacer-xl) 0;
+    @include for-desktop {
+      margin: 0 0 var(--spacer-xl) 0;
     }
+
   }
-  &__back-button {
-    margin: var(--spacer-xl) 0 var(--spacer-sm);
-    &:hover {
-      color:  var(--c-white);
-    }
+}
+.payment {
+  &__methods {
+    border: 1px solid var(--c-light);
+    border-width: 1px 0;
     @include for-desktop {
-      margin: 0 var(--spacer-xl) 0 0;
+      display: flex;
+      padding: var(--spacer-lg) 0;
     }
   }
-  &__radio-group {
-    flex: 0 0 100%;
-    margin: 0 0 var(--spacer-xl) 0;
+  &__method {
+    --radio-description-margin: 0;
+    --radio-container-align-items: center;
+    --ratio-content-margin: 0 0 0 var(--spacer-base);
+    --radio-label-font-size: var(--font-base);
+    --radio-background: transparent;
+    white-space: nowrap;
+    --radio-background: transparent;
     @include for-desktop {
-      margin: 0 0 var(--spacer-2xl) 0;
+      border: 0;
+      --radio-border-radius: 4px;
     }
-
   }
 }
 </style>

packages/commercetools/theme/components/Checkout/VsfShippingProvider.vue

@@ -40,11 +40,6 @@
           </SfRadio>
         </div>
       <div class="form__action">
-        <nuxt-link
-          to="/checkout/shipping"
-          class="sf-button color-secondary form__back-button"
-          >{{ $t('Go back') }}</nuxt-link
-        >
         <SfButton
           class="form__action-button"
           type="button"
@@ -194,6 +189,7 @@ export default {
 <style lang="scss" scoped>
 .title {
   margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+  --heading-title-font-weight: var(--font-weight--bold);
 }
 
 .shipping-provider {
@@ -210,12 +206,10 @@ export default {
 }
 
 .form {
-  --button-width: 100%;
   @include for-desktop {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    --button-width: auto;
   }
   &__action {
     @include for-desktop {
@@ -224,28 +218,9 @@ export default {
     }
   }
   &__action-button {
-    &--secondary {
-      @include for-desktop {
-        order: -1;
-        text-align: left;
-      }
-    }
-    &--add-address {
-      width: 100%;
-      margin: 0;
-      @include for-desktop {
-        margin: 0 0 var(--spacer-lg) 0;
-        width: auto;
-      }
-    }
-  }
-  &__back-button {
-    margin: var(--spacer-xl) 0 var(--spacer-sm);
-    &:hover {
-      color:  var(--c-white);
-    }
+    --button-width: 100%;
     @include for-desktop {
-      margin: 0 var(--spacer-xl) 0 0;
+      --button-width: 25rem;
     }
   }
   &__radio-group {

packages/commercetools/theme/lang/de.js

@@ -118,5 +118,17 @@ export default {
   'Let’s start now – we’ll help you': 'Fangen wir jetzt an - wir helfen Ihnen.',
   'Search results': 'Suchergebnisse',
   'Product suggestions': 'Produktvorschläge',
-  'Search for items': 'Nach Artikeln suchen'
+  'Search for items': 'Nach Artikeln suchen',
+  'Enter promo code': 'Geben Sie den Promo-Code ein',
+  'Shipping method': 'Versandart',
+  'Continue to billing': 'Weiter zur Abrechnung',
+  'Payment methods': 'Zahlungsmethoden',
+  'Shipping address': 'Lieferanschrift',
+  'Subtotal': 'Zwischensumme',
+  'Shipping': 'Versand',
+  'Total price': 'Gesamtpreis',
+  'Payment': 'Zahlung',
+  'Order summary': 'Bestellübersicht',
+  'Products': 'Produkte',
+  'Total': 'Gesamt'
 };

packages/commercetools/theme/lang/en.js

@@ -119,4 +119,16 @@ export default {
   'Search results': 'Search results',
   'Product suggestions': 'Product suggestions',
   'Search for items': 'Search for items',
+  'Enter promo code': 'Enter promo code',
+  'Shipping method': 'Shipping method',
+  'Continue to billing': 'Continue to billing',
+  'Payment methods': 'Payment methods',
+  'Shipping address': 'Shipping address',
+  'Subtotal': 'Subtotal',
+  'Shipping': 'Shipping',
+  'Total price': 'Total price',
+  'Payment': 'Payment',
+  'Order summary': 'Order summary',
+  'Products': 'Products',
+  'Total': 'Total'
 };

packages/commercetools/theme/pages/Checkout.vue

@@ -5,7 +5,7 @@
         <SfSteps
           v-if="!isThankYou"
           :active="currentStepIndex"
-          :class="{ 'checkout__steps': true, 'checkout__steps-auth': isAuthenticated }"
+          class="checkout__steps"
           @change="handleStepClick"
         >
           <SfStep
@@ -34,7 +34,6 @@
 import { SfSteps, SfButton } from '@storefront-ui/vue';
 import CartPreview from '~/components/Checkout/CartPreview';
 import { computed } from '@vue/composition-api';
-import { useUser } from '@vue-storefront/commercetools';
 
 const STEPS = {
   shipping: 'Shipping',
@@ -51,7 +50,6 @@ export default {
   },
   setup(props, context) {
     const currentStep = computed(() => context.root.$route.path.split('/').pop());
-    const { isAuthenticated } = useUser();
     const currentStepIndex = computed(() => Object.keys(STEPS).findIndex(s => s === currentStep.value));
     const isThankYou = computed(() => currentStep.value === 'thank-you');
 
@@ -65,8 +63,7 @@ export default {
       STEPS,
       currentStepIndex,
       isThankYou,
-      currentStep,
-      isAuthenticated
+      currentStep
     };
   }
 };
@@ -98,13 +95,12 @@ export default {
   }
   &__steps {
     --steps-content-padding: 0 var(--spacer-base);
+    ::v-deep .sf-steps__step.is-done  {
+      color: var(--c-primary);
+    }
     @include for-desktop {
       --steps-content-padding: 0;
     }
-
-    &-auth::v-deep .sf-steps__step:first-child {
-      --steps-step-color: #e8e4e4;
-    }
   }
 }