feat(default-theme): register a customer on first checkout's step (#519)

packages/default-theme/components/checkout/PersonalDetails.vue

@@ -1,30 +1,58 @@
 <template>
- <div>
+ <div class="sw-checkout__personal_info">
  <SfHeading
  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"
+ />
  <div class="form">
+ <SfSelect
+ v-if="getMappedSalutations && getMappedSalutations.length > 0"
+ v-model="customer.salutationId"
+ label="Salutation"
+ :valid="!$v.customer.salutationId.$error"
+ @change="$v.customer.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>
  <SfInput
- v-model="firstName"
+ v-model="customer.firstName"
  label="First name"
+ :valid="!$v.customer.firstName.$error"
+ error-message="First name is required"
  name="firstName"
- class="form__element form__element--half"
+ class="form__element form__element--names"
  required
  />
  <SfInput
- v-model="lastName"
+ v-model="customer.lastName"
  label="Last name"
+ :valid="!$v.customer.lastName.$error"
+ error-message="last name is required"
  name="lastName"
- class="form__element form__element--half form__element--half-even"
- required
+ class="form__element form__element--names form__element--names-even"
  />
  <SfInput
- v-model="email"
+ v-model="customer.email"
  label="Your email"
+ :valid="!$v.customer.email.$error"
+ error-message="Proper email is required"
  name="email"
  class="form__element"
- required
  />
  <div class="form__element form__group">
  <SfCheckbox
@@ -40,11 +68,18 @@
  <transition name="fade">
  <SfInput
  v-if="createAccount"
- v-model="password"
+ v-model="customer.password"
  type="password"
  label="Create Password"
+ :valid="!$v.customer.password.$error"
+ :error-message="
+ //handle two different situations - aligned with validation rules
+ (!$v.customer.password.required && 'Password is required') ||
+ (!$v.customer.password.minLength &&
+ 'Password should have at least 8 characters') ||
+ ''
+ "
  class="form__element"
- required
  />
  </transition>
  <div class="form__action">
@@ -96,23 +131,47 @@ import {
  SfButton,
  SfHeading,
  SfModal,
- SfCharacteristic
+ SfCharacteristic,
+ SfSelect,
+ SfProductOption,
+ SfAlert
 } from '@storefront-ui/vue'
 
-import { useUserLoginModal } from '@shopware-pwa/composables'
+import { validationMixin } from 'vuelidate'
+import {
+ required,
+ requiredIf,
+ email,
+ minLength
+} from 'vuelidate/lib/validators'
+import { computed } from '@vue/composition-api'
+import {
+ mapSalutations,
+ getMessagesFromErrorsArray
+} from '@shopware-pwa/helpers'
+import {
+ useUser,
+ useSalutations,
+ useCountries,
+ useUserLoginModal
+} from '@shopware-pwa/composables'
 
 import SwLoginModal from '@shopware-pwa/default-theme/components/modals/SwLoginModal'
 
 export default {
  name: 'PersonalDetails',
+ mixins: [validationMixin],
  components: {
  SfInput,
  SfCheckbox,
  SfButton,
  SfHeading,
  SfModal,
  SfCharacteristic,
- SwLoginModal
+ SfSelect,
+ SfProductOption,
+ SfAlert,
+ SwLoginModal,
  },
  props: {
  order: {
@@ -122,10 +181,20 @@ export default {
  },
  data() {
  return {
- firstName: '',
- lastName: '',
- email: '',
- password: '',
+ customer: {
+ salutationId: null,
+ firstName: '',
+ lastName: '',
+ email: '',
+ password: '',
+ billingAddress: {
+ salutationId: null,
+ street: '-',
+ zipcode: '-',
+ city: '-',
+ countryId: null
+ }
+ },
  createAccount: false,
  accountBenefits: false,
  isLoginModalOpen: false,
@@ -139,39 +208,137 @@ export default {
  },
  setup() {
  const { toggleModal: toggleLoginModal } = useUserLoginModal()
+
+ const {
+ register: registerUser,
+ login,
+ error: userError,
+ isLoggedIn
+ } = useUser()
+
+ const {
+ getSalutations,
+ fetchSalutations,
+ error: salutationsError
+ } = useSalutations()
+
+ const { fetchCountries, getCountries } = useCountries()
+
+ const getMappedSalutations = computed(() =>
+ mapSalutations(getSalutations.value)
+ )
  return {
+ registerUser,
+ login,
+ isLoggedIn,
+ fetchSalutations,
+ getMappedSalutations,
+ userError,
+ getCountries,
+ fetchCountries,
+ getMessagesFromErrorsArray,
  toggleLoginModal
  }
  },
  watch: {
- order: {
- handler(value) {
- this.firstName = value.firstName
- this.lastName = value.lastName
- this.email = value.email
- },
- immediate: true
- },
  createAccount(value) {
- if (!value) this.password = ''
+ if (!value) this.customer.password = ''
+ },
+ // hack to register user without picking up the salutation in billing address (minimal registration)
+ // copy the customer's salutation into billing address
+ 'customer.salutationId': function(value) {
+ if (value && this.customer && this.customer.billingAddress) {
+ this.customer.billingAddress.salutationId = value
+ }
  }
+
  },
  methods: {
- toShipping() {
- const order = { ...this.order }
- order.firstName = this.firstName
- order.lastName = this.lastName
- order.email = this.email
- order.password = this.password
- order.createAccount = this.createAccount
- this.$emit('update:order', order)
+ async toShipping() {
+ // run the validators against the provided data
+ // consider using $touch event on $blur event in each input
+ this.$v.$touch()
+ if (this.$v.$invalid) {
+ return
+ }
+
+ if (this.createAccount) {
+ const isRegistered = await this.registerUser(this.customer)
+ if (!isRegistered) {
+ return
+ }
+ // extra login step won't be necessary once the register has a autologin option
+ await this.login({
+ username: this.customer.email,
+ password: this.customer.password
+ })
+ if (!this.isLoggedIn) {
+ return
+ }
+ }
+
+ return this.$emit('proceed:shipping')
+ }
+ },
+ 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.customer.billingAddress.countryId = pickedCountry && pickedCountry.id
+
+ // select "not specified" salutation (works for EN) as default salutation
+ await this.fetchSalutations();
+ const defaultSalutation = this.getMappedSalutations.find(({id, name}) => name == 'Not specified')
+ this.customer.salutationId = defaultSalutation && defaultSalutation.id
+ },
+ // TODO: move all the rules globally
+ validations: {
+ customer: {
+ salutationId: {
+ required
+ },
+ firstName: {
+ required
+ },
+ lastName: {
+ required
+ },
+ password: {
+ required: requiredIf(function(password) {
+ return this.createAccount
+ }),
+ minLength: minLength(8)
+ },
+ email: {
+ required,
+ email
+ }
  }
  }
 }
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
 
+.sw-checkout {
+ &__personal_info {
+ &__alert {
+ margin-bottom: 20px;
+ }
+ }
+}
+
 .title {
  margin-bottom: var(--spacer-extra-big);
 }
@@ -186,9 +353,15 @@ export default {
  @include for-desktop {
  flex: 0 0 100%;
  }
- &--half {
+ &--salutation {
+ @include for-desktop {
+ flex: 1 1 25%;
+ padding-right: var(--spacer-extra-big);
+ }
+ }
+ &--names {
  @include for-desktop {
- flex: 1 1 50%;
+ flex: 1 1 30%;
  }
  &-even {
  @include for-desktop {

packages/default-theme/pages/checkout.vue

@@ -4,10 +4,7 @@
  <div class="checkout__main">
  <SfSteps :active="currentStep" @change="updateStep($event)">
  <SfStep name="Personal Details">
- <PersonalDetails
- :order="order"
- @update:order="updateOrder($event)"
- />
+ <PersonalDetails :order="order" @proceed:shipping="proceed()" />
  </SfStep>
  <SfStep name="Shipping">
  <Shipping
@@ -239,6 +236,9 @@ export default {
  this.currentStep = next
  }
  },
+ proceed() {
+ this.currentStep++
+ },
  updateOrder(order, next = true) {
  this.order = { ...this.order, ...order }
  if (next) {