Skip to content

Commit

Permalink
Merge pull request #114 from SnowdogApps/feature/68
Browse files Browse the repository at this point in the history
Feature/68
  • Loading branch information
szafran89 authored Dec 21, 2018
2 parents d10466c + 07c1b80 commit 41b2445
Show file tree
Hide file tree
Showing 8 changed files with 175 additions and 69 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- succes step page
- moved billing address form to separate component (#104)
- moved axios headers to separate file
- moved customer email field to separate component

### Fixed
- shipping methods checked item
Expand Down
27 changes: 25 additions & 2 deletions test/App.test.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,33 @@
import { shallowMount } from '@vue/test-utils'
import Vuex from 'vuex'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import App from '../view/frontend/web/js/App.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('App.test.js', () => {
let store
let actions
let wrapper

beforeEach(() => {
actions = {
getCustomerData: jest.fn()
}
store = new Vuex.Store({
actions
})

wrapper = shallowMount(App, {
computed: {
isCustomerLoggedIn: () => true
},
store,
localVue
})
})

it('has the expected html structure', () => {
const wrapper = shallowMount(App)
expect(wrapper.element).toMatchSnapshot()
})
})
10 changes: 10 additions & 0 deletions view/frontend/web/js/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,16 @@ export default {
TotalsData,
ProductsList,
ProgressBar
},
computed: {
isCustomerLoggedIn () {
return this.$store.getters.isCustomerLoggedIn
}
},
mounted () {
if (this.isCustomerLoggedIn) {
this.$store.dispatch('getCustomerData')
}
}
}
</script>
Expand Down
104 changes: 104 additions & 0 deletions view/frontend/web/js/components/CustomerEmailField.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<div>
<BaseInput
v-model.trim="$v.email.$model"
:validation="$v.email"
label="Email"
name="email"
type="email"
@input="checkIsEmailAvailable"
/>
<span
v-if="emailAvailabilityMessage"
v-html="emailAvailabilityMessage"
/>
<hr>
</div>
</template>

<script>
import BaseInput from './BaseInput.vue'
import axios from './../utils/checkout-axios.js'
import { required, email } from 'vuelidate/lib/validators'
export default {
components: {
BaseInput
},
data () {
return {
email: '',
emailAvailable: false
}
},
validations: {
email: {
required,
email
}
},
computed: {
customerData () {
return this.$store.state.customer
},
ready () {
return !this.$v.email.$invalid
},
emailAvailabilityMessage () {
if (this.email !== '' && !this.$v.email.$error) {
if (this.emailAvailable) {
return `You can create an account after checkout.`
} else {
return `
You already have an account with us.
Sign in <a href="/customer/account/login/">here</a> or continue as guest.
`
}
} else {
return false
}
}
},
watch: {
ready (val) {
this.$emit('ready', val)
}
},
created () {
if (
this.customerData !== null &&
this.customerData.hasOwnProperty('email')
) {
this.email = this.customerData.email
}
},
methods: {
touch () {
this.$v.email.$touch()
},
checkIsEmailAvailable () {
const options = {
method: 'POST',
data: JSON.stringify({
'customerEmail': this.email
}),
url: 'customers/isEmailAvailable'
}
axios(options)
.then(({data}) => {
this.emailAvailable = data
})
.catch(error => {
console.error('Looks like there was a problem: \n', error)
})
this.$store.commit('setItem', {
item: 'customer',
value: {
email: this.email
}
})
}
}
}
</script>
84 changes: 23 additions & 61 deletions view/frontend/web/js/components/steps/TheShippingStep.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,11 @@
>
<h2>Shipping address</h2>
<form class="shipping-address__form">
<BaseInput
v-model.trim="$v.customer.email.$model"
:validation="$v.customer.email"
label="Email"
name="email"
type="email"
@input="checkIsEmailAvailable"
<CustomerEmailField
v-if="!isCustomerLoggedIn"
ref="customerEmail"
@ready="isReady => customerEmailReadyToSubmit = isReady"
/>
<span
v-if="emailAvailabilityMessage"
v-html="emailAvailabilityMessage"
/>
<hr>
<div>
<BaseInput
v-model="$v.address.firstname.$model"
Expand Down Expand Up @@ -138,16 +130,17 @@
<script>
import BaseButton from '../BaseButton.vue'
import BaseInput from '../BaseInput.vue'
import CustomerEmailField from '../CustomerEmailField.vue'
import ShippingMethods from '../ShippingMethods.vue'
import Multiselect from 'vue-multiselect'
import axios from './../../utils/checkout-axios.js'
import countries from '../../data/countries.json'
import { required, email, requiredIf } from 'vuelidate/lib/validators'
import { required, requiredIf } from 'vuelidate/lib/validators'
export default {
components: {
BaseButton,
BaseInput,
CustomerEmailField,
Multiselect,
ShippingMethods
},
Expand All @@ -166,22 +159,13 @@ export default {
region_id: '',
company: ''
},
customer: {
email: '',
emailAvailable: false
},
countries,
customerEmailReadyToSubmit: false,
shippingMethodsReadyToSubmit: false,
loader: false
}
},
validations: {
customer: {
email: {
required,
email
}
},
address: {
firstname: {
required
Expand Down Expand Up @@ -217,69 +201,47 @@ export default {
}
},
computed: {
baseUrl () {
return this.$store.state.baseUrl
},
step () {
return this.$store.state.step
},
emailAvailabilityMessage () {
if (this.customer.email !== '' && !this.$v.customer.email.$error) {
if (this.customer.emailAvailable) {
return `You can create an account after checkout.`
} else {
return `
You already have an account with us.
Sign in <a href="${this.loginUrl}">here</a> or continue as guest.
`
}
} else {
return false
}
isCustomerLoggedIn () {
return this.$store.getters.isCustomerLoggedIn
},
regions () {
return this.$store.getters.regionsByCountryId(this.address.country_id.value)
},
loginUrl () {
return this.baseUrl + 'customer/account/login/'
}
},
methods: {
checkIsEmailAvailable () {
const options = {
method: 'POST',
data: JSON.stringify({
'customerEmail': this.customer.email
}),
url: 'customers/isEmailAvailable'
}
axios(options)
.then(({data}) => {
this.customer.emailAvailable = data
})
.catch(error => {
console.error('Looks like there was a problem: \n', error)
})
},
onCountryChange () {
this.$store.dispatch('updateShippingMethods', this.address.country_id.value)
},
goToNextStep () {
if (!this.isCustomerLoggedIn) {
this.$refs.customerEmail.touch()
}
this.$refs.shippingsMethods.touch()
this.$v.$touch()
if (this.$v.$invalid || !this.shippingMethodsReadyToSubmit) {
if (
this.$v.$invalid ||
!this.shippingMethodsReadyToSubmit ||
(!this.isCustomerLoggedIn && !this.customerEmailReadyToSubmit)
) {
return
}
this.loader = true
this.$store.commit('setCustomerEmail', this.customer.email)
this.$store.commit(
'setAddress',
{ type: 'shippingAddress', address: this.address }
)
this.$store.dispatch('setShippinInformation').then(() => {
this.loader = false
})
this.$store.dispatch('getTotals')
}
}
Expand Down
11 changes: 11 additions & 0 deletions view/frontend/web/js/store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,17 @@ export default {
})
})
},
getCustomerData ({ commit }) {
axios.get('customers/me')
.then(response => {
if (response.data) {
commit('setItem', {item: 'customer', value: response.data})
}
})
.catch(error => {
console.log('Looks like there was a problem: \n', error)
})
},
placeOrder ({commit, state, getters}, billingAddress) {
return new Promise((resolve, reject) => {
let url = `guest-carts/${getters.cartId}/payment-information`
Expand Down
4 changes: 1 addition & 3 deletions view/frontend/web/js/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@ const store = new Vuex.Store({
state: {
config: window.config,
baseUrl: window.baseUrl,
customer: null,
regions,
customer: {
email: null
},
step: 'shipping',
orderId: null,
shippingMethods: [],
Expand Down
3 changes: 0 additions & 3 deletions view/frontend/web/js/store/mutations.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ export default {
setItem (state, {item, value}) {
state[item] = value
},
setCustomerEmail (state, payload) {
state.customer.email = payload
},
setAddress (state, payload) {
const address = payload.address
const type = payload.type
Expand Down

0 comments on commit 41b2445

Please sign in to comment.