feat(default-theme): created and styled error list component

* feat(default-theme): created and styled error list component

packages/default-theme/cms/elements/CmsElementContactForm.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <form
+      v-if="!formSent"
       action=""
       class="cms-element-contact-form"
       @submit.prevent="submit"
-      v-if="!formSent"
     >
       <SfSelect
         v-if="getMappedSalutations && getMappedSalutations.length > 0"
@@ -110,7 +110,7 @@
         />
       </div>
 
-      <SfAlert v-if="errorMessage" :message="errorMessage" type="danger" />
+      <SwErrorsList :list="errorMessage" />
 
       <SwButton class="send button">
         {{ $t("send") }}
@@ -132,7 +132,6 @@ import {
   SfSelect,
   SfInput,
   SfCheckbox,
-  SfAlert,
   SfIcon,
   SfHeading,
 } from "@storefront-ui/vue"
@@ -149,6 +148,7 @@ import {
 import { computed, ref } from "@vue/composition-api"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
 import { sendContactForm } from "@shopware-pwa/shopware-6-client"
+import SwErrorsList from "@shopware-pwa/default-theme/components/SwErrorsList"
 
 export default {
   name: "CmsElementContactForm",
@@ -157,7 +157,7 @@ export default {
     SfInput,
     SfCheckbox,
     SwButton,
-    SfAlert,
+    SwErrorsList,
     SfIcon,
     SfHeading,
   },

packages/default-theme/cms/elements/CmsElementNesletterForm.vue

@@ -48,15 +48,7 @@
           />
         </transition>
 
-        <div v-if="errorMessage">
-          <SfAlert
-            v-for="(message, key) in errorMessage"
-            :key="key"
-            :message="message"
-            type="danger"
-            class="error-alert"
-          />
-        </div>
+        <SwErrorsList :list="errorMessage" />
 
         <span>
           <SwButton
@@ -72,22 +64,23 @@
 </template>
 
 <script>
-import { SfInput, SfHeading, SfAlert } from "@storefront-ui/vue"
+import { SfInput, SfHeading } from "@storefront-ui/vue"
 import { validationMixin } from "vuelidate"
 import { required, email } from "vuelidate/lib/validators"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
 import { newsletterSubscribe } from "@shopware-pwa/shopware-6-client"
 import { ref } from "@vue/composition-api"
 import { getApplicationContext } from "@shopware-pwa/composables"
 import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers"
+import SwErrorsList from "@shopware-pwa/default-theme/components/SwErrorsList"
 
 export default {
   name: "CmsElementNewsletterForm",
   components: {
     SfInput,
     SwButton,
     SfHeading,
-    SfAlert,
+    SwErrorsList,
   },
   mixins: [validationMixin],
   props: {

packages/default-theme/components/SwErrorsList.vue

@@ -0,0 +1,43 @@
+<template>
+  <div v-if="list" class="errors-list-component">
+    <SwAlert :message="$t('Encountered problems:')" type="danger" />
+
+    <ul class="list">
+      <li v-for="message in list" :key="message" class="item">{{ message }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import SwAlert from "@shopware-pwa/default-theme/components/atoms/SwAlert"
+
+export default {
+  name: "SwErrorsList",
+  components: { SwAlert },
+  props: {
+    list: {
+      type: Array,
+      default: [],
+    },
+  },
+  setup(props, { root }) {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.errors-list-component {
+  color: var(--_c-red-primary);
+  font-size: var(--font-sm);
+
+  .list {
+    margin-top: var(--spacer-xs);
+    padding-left: var(--spacer-xs);
+
+    .item {
+      list-style: inside;
+    }
+  }
+}
+</style>

packages/default-theme/components/atoms/SwAlert.vue

@@ -0,0 +1,27 @@
+<template>
+  <SfAlert :message="message" :type="type" />
+</template>
+
+<script>
+import { SfAlert } from "@storefront-ui/vue"
+
+export default {
+  name: "SwAlert",
+
+  components: {
+    SfAlert,
+  },
+
+  props: {
+    message: {
+      type: String,
+      default: "",
+    },
+
+    type: {
+      type: String,
+      default: "secondary",
+    },
+  },
+}
+</script>

packages/default-theme/components/checkout/steps/guest/PersonalDetailsGuestForm.vue

@@ -3,8 +3,8 @@
     <div class="log-in">
       <div class="log-in__buttons-container">
         <SwButton
-          @click="switchLoginModalState(true)"
           class="log-in__button color-secondary"
+          @click="switchLoginModalState(true)"
           >Log in to your account</SwButton
         >
         <SwPluginSlot name="checkout-login-after" />
@@ -15,31 +15,10 @@
       title="1. Personal details"
       class="sf-heading--left sf-heading--no-underline title"
     />
-    <SfAlert
-      v-for="(message, index) in useUserErrorMessages"
-      :key="index"
-      class="sw-checkout__personal_info__alert"
-      type="danger"
-      :message="message"
-    />
+
+    <SwErrorsList :list="useUserErrorMessages" />
+
     <div class="form">
-      <!-- <SfSelect
-        v-if="getMappedSalutations && getMappedSalutations.length > 0"
-        v-model="salutationId"
-        label="Salutation"
-        :valid="!validations.salutationId.$error"
-        @change="validations.salutationId.$touch()"
-        error-message="Salutation must be selected"
-        class="sf-select--underlined form__element form__element--salutation form__select"
-      >
-        <SfSelectOption
-          v-for="salutationOption in getMappedSalutations"
-          :key="salutationOption.id"
-          :value="salutationOption.id || ''"
-        >
-          {{ salutationOption.name }}
-        </SfSelectOption>
-      </SfSelect> -->
       <SwInput
         v-model="firstName"
         label="First name"
@@ -132,7 +111,6 @@ import {
   SfCharacteristic,
   SfSelect,
   SfProductOption,
-  SfAlert,
 } from "@storefront-ui/vue"
 import SwPluginSlot from "sw-plugins/SwPluginSlot"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
@@ -160,22 +138,20 @@ import {
   usePersonalDetailsStep,
   usePersonalDetailsStepValidationRules,
 } from "@shopware-pwa/default-theme/logic/checkout/usePersonalDetailsStep"
+import SwErrorsList from "@shopware-pwa/default-theme/components/SwErrorsList"
 
 export default {
   name: "PersonalDetailsGuestForm",
-  mixins: [validationMixin],
   components: {
     SwInput,
     SfCheckbox,
     SwButton,
     SfHeading,
-    SfModal,
     SfCharacteristic,
-    SfSelect,
-    SfProductOption,
-    SfAlert,
+    SwErrorsList,
     SwPluginSlot,
   },
+  mixins: [validationMixin],
   props: {
     order: {
       type: Object,
@@ -257,6 +233,12 @@ export default {
       email,
     }
   },
+  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)
+    },
+  },
   watch: {
     createAccount(value) {
       if (!value) this.password = ""
@@ -270,11 +252,28 @@ export default {
     // },
     $v: {
       immediate: true,
-      handler: function () {
+      handler() {
         this.setValidations(this.$v)
       },
     },
   },
+  async mounted() {
+    // hack to register user without picking up the country (minimal registration)
+    await this.fetchCountries()
+    if (!this.getCountries) {
+      return
+    }
+    const pickedCountry = this.getCountries.find(
+      ({ name }) => name === "Poland"
+    )
+    this.billingAddress.countryId = pickedCountry && pickedCountry.id
+
+    await this.fetchSalutations()
+    const defaultSalutation = this.getMappedSalutations[
+      this.getMappedSalutations.length - 1
+    ]
+    this.salutationId = defaultSalutation && defaultSalutation.id
+  },
   methods: {
     async toShipping() {
       // run the validators against the provided data
@@ -303,29 +302,6 @@ 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)
-    },
-  },
-  async mounted() {
-    // hack to register user without picking up the country (minimal registration)
-    await this.fetchCountries()
-    if (!this.getCountries) {
-      return
-    }
-    const pickedCountry = this.getCountries.find(
-      ({ name }) => name === "Poland"
-    )
-    this.billingAddress.countryId = pickedCountry && pickedCountry.id
-
-    await this.fetchSalutations()
-    const defaultSalutation = this.getMappedSalutations[
-      this.getMappedSalutations.length - 1
-    ]
-    this.salutationId = defaultSalutation && defaultSalutation.id
-  },
   // TODO: move all the rules globally
   validations: {
     ...usePersonalDetailsStepValidationRules,

packages/default-theme/components/forms/SwPassword.vue

@@ -8,13 +8,7 @@
         </p>
       </slot>
 
-      <SfAlert
-        v-for="(message, index) in userErrorMessages"
-        :key="index"
-        class="sw-password__alert"
-        type="danger"
-        :message="message"
-      />
+      <SwErrorsList :list="userErrorMessages" />
 
       <div class="sw-password__form form">
         <slot name="form">
@@ -70,15 +64,15 @@
 import { validationMixin } from "vuelidate"
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import { computed } from "@vue/composition-api"
-import { SfAlert } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
 import SwInput from "@shopware-pwa/default-theme/components/atoms/SwInput"
+import SwErrorsList from "@shopware-pwa/default-theme/components/SwErrorsList"
 
 export default {
   name: "SwPassword",
-  components: { SwInput, SwButton, SfAlert },
+  components: { SwInput, SwButton, SwErrorsList },
   mixins: [validationMixin],
   props: {},
   setup(props, { root }) {