Skip to content

Commit

Permalink
Merge 9e24b9e into 29d6875
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fifciu
Fifciu committed Feb 25, 2021
2 parents 29d6875 + 9e24b9e commit ae4abba
Show file tree
Hide file tree
Showing 3 changed files with 301 additions and 76 deletions.
100 changes: 37 additions & 63 deletions packages/commercetools/theme/components/Checkout/ShippingForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<template>
<ValidationObserver v-slot="{ handleSubmit, dirty, reset }">
<SfHeading
:level="3"
:title="$t('Shipping')"
class="sf-heading--left sf-heading--no-underline title"
/>
<form
@submit.prevent="
handleSubmit(
isShippingDetailsCompleted && isShippingMethodCompleted && !dirty
? handleStepSubmit
: handleAddressSubmit(reset)
)
handleSubmit(handleAddressSubmit(reset))
"
>
<UserShippingAddresses
Expand All @@ -24,7 +25,7 @@
>
<SfInput
:value="shippingDetails.firstName"
@input="firstName => changeDetails('firstName', firstName)"
@input="firstName => changeShippingDetails('firstName', firstName)"
label="First name"
name="firstName"
class="form__element form__element--half"
Expand All @@ -41,7 +42,7 @@
>
<SfInput
:value="shippingDetails.lastName"
@input="lastName => changeDetails('lastName', lastName)"
@input="lastName => changeShippingDetails('lastName', lastName)"
label="Last name"
name="lastName"
class="form__element form__element--half form__element--half-even"
Expand All @@ -58,7 +59,7 @@
>
<SfInput
:value="shippingDetails.streetName"
@input="streetName => changeDetails('streetName', streetName)"
@input="streetName => changeShippingDetails('streetName', streetName)"
label="Street name"
name="streetName"
class="form__element form__element--half"
Expand All @@ -75,7 +76,7 @@
>
<SfInput
:value="shippingDetails.apartment"
@input="apartment => changeDetails('apartment', apartment)"
@input="apartment => changeShippingDetails('apartment', apartment)"
label="House/Apartment number"
name="apartment"
class="form__element form__element--half form__element--half-even"
Expand All @@ -92,7 +93,7 @@
>
<SfInput
:value="shippingDetails.city"
@input="city => changeDetails('city', city)"
@input="city => changeShippingDetails('city', city)"
label="City"
name="city"
class="form__element form__element--half"
Expand All @@ -107,7 +108,7 @@
>
<SfInput
:value="shippingDetails.state"
@input="state => changeDetails('state', state)"
@input="state => changeShippingDetails('state', state)"
label="State/Province"
name="state"
class="form__element form__element--half form__element--half-even"
Expand All @@ -121,7 +122,7 @@
>
<SfSelect
:value="shippingDetails.country"
@input="country => changeDetails('country', country)"
@input="country => changeShippingDetails('country', country)"
label="Country"
name="country"
class="form__element form__element--half form__select sf-select--underlined"
Expand All @@ -146,7 +147,7 @@
>
<SfInput
:value="shippingDetails.postalCode"
@input="postalCode => changeDetails('postalCode', postalCode)"
@input="postalCode => changeShippingDetails('postalCode', postalCode)"
label="Zip-code"
name="zipCode"
class="form__element form__element--half form__element--half-even"
Expand All @@ -163,7 +164,7 @@
>
<SfInput
:value="shippingDetails.phone"
@input="phone => changeDetails('phone', phone)"
@input="phone => changeShippingDetails('phone', phone)"
label="Phone number"
name="phone"
class="form__element form__element--half"
Expand All @@ -181,36 +182,27 @@
>
{{ $t('Add new address') }}
</SfButton>
<SfHeading
v-if="isShippingDetailsCompleted && !dirty"
:level="3"
title="Shipping method"
class="sf-heading--left sf-heading--no-underline title"
/>
<div class="form">
<div class="form__action">
<nuxt-link
to="/checkout/personal-details"
class="sf-button color-secondary form__back-button"
>Go back</nuxt-link>
<SfButton
class="form__action-button"
type="submit"
v-if="isShippingDetailsCompleted && !dirty"
:disabled="!isShippingMethodCompleted"
>
{{ $t('Continue to payment') }}
</SfButton>
v-if="!isShippingDetailsStepCompleted"
>{{ $t('Go back') }}</nuxt-link>
<SfButton
class="form__action-button"
type="submit"
:disabled="loading"
v-else
v-if="!(isShippingDetailsStepCompleted && !dirty)"
>
{{ $t('Select shipping method') }}
</SfButton>
</div>
</div>
<VsfShippingProvider
v-if="isShippingDetailsStepCompleted && !dirty"
@submit="$router.push('/checkout/payment')"
/>
</form>
</ValidationObserver>
</template>
Expand All @@ -220,9 +212,7 @@ import {
SfHeading,
SfInput,
SfButton,
SfSelect,
SfRadio,
SfCheckbox
SfSelect
} from '@storefront-ui/vue';
import { useUserShipping, userShippingGetters, useUser, useShipping } from '@vue-storefront/commercetools';
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
Expand Down Expand Up @@ -253,29 +243,28 @@ export default {
SfInput,
SfButton,
SfSelect,
SfRadio,
SfCheckbox,
UserShippingAddresses: () => import('~/components/Checkout/UserShippingAddresses'),
ValidationProvider,
ValidationObserver
ValidationObserver,
UserShippingAddresses: () => import('@/components/Checkout/UserShippingAddresses'),
VsfShippingProvider: () => import('@/components/Checkout/VsfShippingProvider')
},
props: {
handleShippingAddressSubmit: Function
},
setup(props, context) {
setup (props) {
const { $ct: { config } } = useVSFContext();
const { shipping: address, loading } = useShipping();
const { isAuthenticated } = useUser();
const { shipping: userShipping, load: loadUserShipping, setDefaultAddress } = useUserShipping();
const shippingDetails = ref(address.value || {});
const isShippingMethodCompleted = ref(false);
const isShippingDetailsCompleted = ref(false);
const currentAddressId = ref(NOT_SELECTED_ADDRESS);
const setAsDefault = ref(false);
const canAddNewAddress = ref(true);
const isShippingDetailsStepCompleted = ref(false);
const hasSavedShippingAddress = computed(() => {
if (!isAuthenticated.value || !userShipping.value) {
return false;
Expand All @@ -284,7 +273,6 @@ export default {
return Boolean(addresses?.length);
});
const handleStepSubmit = () => context.emit('stepSubmit');
const handleAddressSubmit = (reset) => async () => {
const addressId = currentAddressId.value;
await props.handleShippingAddressSubmit(shippingDetails.value);
Expand All @@ -295,7 +283,7 @@ export default {
}
}
reset();
isShippingDetailsCompleted.value = true;
isShippingDetailsStepCompleted.value = true;
};
const handleAddNewAddressBtnClick = () => {
Expand All @@ -307,13 +295,12 @@ export default {
shippingDetails.value = {...address};
currentAddressId.value = address.id;
canAddNewAddress.value = false;
isShippingDetailsCompleted.value = false;
isShippingMethodCompleted.value = false;
isShippingDetailsStepCompleted.value = false;
};
const changeDetails = (field, value) => {
const changeShippingDetails = (field, value) => {
shippingDetails.value[field] = value;
isShippingMethodCompleted.value = false;
isShippingDetailsStepCompleted.value = false;
currentAddressId.value = NOT_SELECTED_ADDRESS;
};
Expand Down Expand Up @@ -362,16 +349,15 @@ export default {
currentAddressId,
hasSavedShippingAddress,
isShippingMethodCompleted,
isShippingDetailsCompleted,
handleAddressSubmit,
handleStepSubmit,
handleAddNewAddressBtnClick,
handleSetCurrentAddress,
changeDetails,
loading
changeShippingDetails,
loading,
isShippingDetailsStepCompleted
};
}
};
Expand Down Expand Up @@ -414,10 +400,6 @@ export default {
}
}
}
&__group {
display: flex;
align-items: center;
}
&__action {
@include for-desktop {
flex: 0 0 100%;
Expand Down Expand Up @@ -449,14 +431,6 @@ export default {
margin: 0 var(--spacer-xl) 0 0;
}
}
&__radio-group {
flex: 0 0 100%;
margin: 0 0 var(--spacer-xl) 0;
@include for-desktop {
margin: 0 0 var(--spacer-2xl) 0;
}
}
}
.shipping {
Expand Down
Loading

0 comments on commit ae4abba

Please sign in to comment.