Merge branch 'master' into release/v0.5

vuestorefront · Nov 7, 2020 · 9311f71 · 9311f71
2 parents fecdf93 + 6981801
commit 9311f71
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 4 deletions.
diff --git a/packages/composables/src/logic/useSessionContext.ts b/packages/composables/src/logic/useSessionContext.ts
@@ -9,7 +9,10 @@ import {
   setCurrentPaymentMethod,
 } from "@shopware-pwa/shopware-6-client";
 import { SessionContext } from "@shopware-pwa/commons/interfaces/response/SessionContext";
-import { getApplicationContext } from "@shopware-pwa/composables";
+import {
+  getApplicationContext,
+  useNotifications,
+} from "@shopware-pwa/composables";
 import { ApplicationVueContext } from "../appContext";
 /**
  * interface for {@link useSessionContext} composable
@@ -43,6 +46,7 @@ export const useSessionContext = (
     "useSessionContext"
   );
 
+  const { pushWarning } = useNotifications(rootContext);
   const sessionContext: Readonly<Ref<SessionContext>> = computed(() => {
     return (vuexStore.getters.getSessionContext as SessionContext) || null;
   });
@@ -51,6 +55,9 @@ export const useSessionContext = (
       const context = await getSessionContext(apiInstance);
       vuexStore.commit("SET_SESSION_CONTEXT", context);
     } catch (e) {
+      pushWarning(
+        "Unable to update the session. Some parts may not be working properly. Please try again later."
+      );
       console.error("[UseSessionContext][refreshSessionContext]", e);
     }
   };

diff --git a/packages/default-theme/src/components/SwCartProduct.vue b/packages/default-theme/src/components/SwCartProduct.vue
@@ -8,17 +8,28 @@
     class="collected-product"
     @click:remove="removeProduct(product)"
   >
+    <template #actions>
+      <div class="collected-product__configuration" v-if="options">
+        <SfProperty
+          v-for="option in options"
+          :key="`${option.group}-${option.option}`"
+          :name="option.group"
+          :value="option.option"
+        />
+      </div>
+    </template>
   </SfCollectedProduct>
 </template>
 <script>
-import { SfCollectedProduct } from "@storefront-ui/vue"
+import { SfCollectedProduct, SfProperty } from "@storefront-ui/vue"
 import { getProductMainImageUrl } from "@shopware-pwa/helpers"
 import { useCart } from "@shopware-pwa/composables"
 import { ref, watch, computed } from "@vue/composition-api"
 
 export default {
   components: {
     SfCollectedProduct,
+    SfProperty,
   },
   props: {
     product: {
@@ -31,6 +42,9 @@ export default {
 
     const quantity = ref(props.product.quantity)
     const productImage = computed(() => getProductMainImageUrl(props.product))
+    const options = computed(
+      () => (props.product.payload && props.product.payload.options) || []
+    )
 
     watch(quantity, async (qty) => {
       // in future we may want to have debounce here
@@ -47,6 +61,7 @@ export default {
       productImage,
       removeProduct,
       quantity,
+      options,
     }
   },
 }
@@ -71,6 +86,15 @@ export default {
     transition: opacity 150ms ease-in-out;
   }
 
+  &__configuration {
+    margin-top: var(--spacer-sm);
+    align-items: end;
+    align-self: baseline;
+    @include for-desktop {
+      flex-direction: row-reverse;
+    }
+  }
+
   &__actions-element {
     margin-top: var(--spacer-xs);
   }

diff --git a/packages/default-theme/src/components/SwMegaMenu.vue b/packages/default-theme/src/components/SwMegaMenu.vue
@@ -7,9 +7,9 @@
   >
     <div class="sw-mega-menu__content">
       <div
-        class="sw-mega-menu__content-section"
         v-for="subcategory in category.children"
         :key="subcategory.name"
+        class="sw-mega-menu__content-section"
         data-cy="mega-menu-category"
       >
         <nuxt-link
@@ -101,6 +101,14 @@ export default {
           }
         }
       }
+
+      ::v-deep .sf-heading {
+        text-align: left;
+      }
+
+      .sf-header__link {
+        text-align: left;
+      }
     }
 
     .sf-heading {

diff --git a/packages/default-theme/src/components/SwTopNavigation.vue b/packages/default-theme/src/components/SwTopNavigation.vue
@@ -182,6 +182,11 @@ export default {
   --c-link-hover: var(--_c-green-primary);
   --heading-title-font-line-height: 24px;
 
+  ::v-deep .sf-menu-item__label {
+    text-align: left;
+    width: 100%;
+  }
+
   .sw-overlay {
     --overlay-z-index: 1;
   }
@@ -190,9 +195,11 @@ export default {
     ::v-deep .sf-header {
       display: flex;
       justify-content: space-between;
+
       &__sticky-container {
         width: 100%;
       }
+
       &__navigation {
         flex: 0 0 calc(100% - 20rem);
       }

diff --git a/packages/default-theme/src/components/checkout/steps/guest/PersonalDetailsGuestForm.vue b/packages/default-theme/src/components/checkout/steps/guest/PersonalDetailsGuestForm.vue
@@ -241,7 +241,27 @@ export default {
   computed: {
     useUserErrorMessages() {
       // all the 400 errors are in a raw format stright from the API - to be extracted easily depeding on needs.
-      return this.userError && this.getMessagesFromErrorsArray(this.userError)
+      return (
+        this.userError &&
+        this.getMessagesFromErrorsArray(this.userError.message)
+      )
+    },
+    customer() {
+      return {
+        email: this.email,
+        password: this.password,
+        firstName: this.firstName,
+        lastName: this.lastName,
+        salutationId: this.salutationId,
+        storefrontUrl:
+          window &&
+          window.location &&
+          `${window.location.protocol}//${window.location.hostname}`,
+        billingAddress: Object.assign({}, this.billingAddress, {
+          firstName: this.firstName,
+          lastName: this.lastName,
+        }),
+      }
     },
   },
   watch: {