Skip to content

Commit

Permalink
Add copy address feature to edit order fixes #1412
Browse files Browse the repository at this point in the history
  • Loading branch information
@nfourtythree
nfourtythree committed May 14, 2020
1 parent b9ab71a commit 888237b
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 84 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
### Added
- It’s now possible to query for a single product or variant via GraphQL.
- It’s now possible to access the Edit Customer page from the Edit Order page. ([#1397](https://github.com/craftcms/commerce/issues/1397))
- It’s now possible to copy an address between address types on the Edit Order page. ([#1412](https://github.com/craftcms/commerce/issues/1412))
- Address models now include `countryIso`. ([#1419](https://github.com/craftcms/commerce/issues/1419))
- Added `craft\commerce\fields\Products::getContentGqlType()`.
- Added `craft\commerce\fields\Variants::getContentGqlType()`.
Expand Down
5 changes: 5 additions & 0 deletions src/templates/orders/_edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,13 @@
"Adjustments",
"Amount",
"Are you sure you want to complete this order?",
"Are you sure you want to overwrite the billing address?",
"Are you sure you want to overwrite the shipping address?",
"Are you sure you want to remove this customer?",
"Are you sure you want to send email: {name}?",
"Attention",
"Available?",
"billing address",
"Billing Address",
"Business ID",
"Business Name",
Expand All @@ -36,6 +39,7 @@
"Completed",
"Copied!",
"Copy",
"Copy to {location}",
"Couldn’t get order.",
"Couldn’t recalculate order.",
"Country",
Expand Down Expand Up @@ -114,6 +118,7 @@
"Search…",
"Select address",
"Send Email",
"shipping address",
"Shipping Address",
"Shipping Method",
"Shipping",
Expand Down
22 changes: 22 additions & 0 deletions src/web/assets/commerceui/src/js/order/apps/OrderCustomer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,12 @@
<address-edit
:title="titles.billingAddress"
:address="draft.order.billingAddress"
:copy-to-address="$options.filters.t('shipping address', 'commerce')"
:customer-id="draft.order.customerId"
:empty-message="$options.filters.t('No billing address', 'commerce')"
:customer-updated="customerUpdatedTime"
@update="updateBillingAddress"
@copy="copyAddress('shipping')"
@remove="removeBillingAddress"
></address-edit>
</div>
Expand All @@ -67,10 +69,12 @@
<address-edit
:title="titles.shippingAddress"
:address="draft.order.shippingAddress"
:copy-to-address="$options.filters.t('billing address', 'commerce')"
:customer-id="draft.order.customerId"
:empty-message="$options.filters.t('No shipping address', 'commerce')"
:customer-updated="customerUpdatedTime"
@update="updateShippingAddress"
@copy="copyAddress('billing')"
@remove="removeShippingAddress"
></address-edit>
</div>
Expand Down Expand Up @@ -168,6 +172,24 @@
this.edit();
},
copyAddress(destinationAddress) {
if (destinationAddress == 'shipping'
&& this.hasShippingAddress
&& !confirm(this.$options.filters.t('Are you sure you want to overwrite the shipping address?', 'commerce'))
) {
return;
} else if (destinationAddress == 'billing'
&& this.hasBillingAddress
&& !confirm(this.$options.filters.t('Are you sure you want to overwrite the billing address?', 'commerce'))
) {
return;
}
let addressToCopy = (destinationAddress == 'shipping') ? this.draft.order.billingAddress : this.draft.order.shippingAddress;
this.updateAddress(destinationAddress, addressToCopy);
},
updateBillingAddress(address) {
this.updateAddress('billing', address);
},
Expand Down
194 changes: 110 additions & 84 deletions src/web/assets/commerceui/src/js/order/components/customer/AddressEdit.vue
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,114 @@
<template>
<div ref="container">
<div class="order-address-display">
<template v-if="address">
<address-display :title="title" :address="address"></address-display>
</template>
<template v-else>
<div class="zilch">{{emptyMsg}}</div>
</template>

<div class="order-address-display-buttons order-flex" v-show="hasCustomer">
<div class="btn menubtn" data-icon="settings" :title="$options.filters.t('Actions', 'commerce')" ref="addressmenubtn"></div>
<div class="menu">
<ul>
<li>
<a
:class="{ disabled: !draftAddress }"
:disabled="!draftAddress"
@click.prevent="open('edit')">{{$options.filters.t('Edit address', 'commerce')}}</a>
</li>
<li>
<address-select
:customer-id="customerId"
@update="handleSelect"
></address-select>
</li>
<li>
<a @click.prevent="open('new')">{{$options.filters.t('New address', 'commerce')}}</a>
</li>
</ul>
<hr>
<ul>
<li>
<a
:class="{ disabled: !draftAddress }"
:disabled="!draftAddress"
class="error" @click.prevent="$emit('remove')">{{$options.filters.t('Remove address', 'commerce')}}</a>
</li>
</ul>
<div ref="container">
<div class="order-address-display">
<template v-if="address">
<address-display :title="title" :address="address"></address-display>
</template>
<template v-else>
<div class="zilch">{{emptyMsg}}</div>
</template>

<div class="order-address-display-buttons order-flex" v-show="hasCustomer">
<div class="btn menubtn"
data-icon="settings"
:title="$options.filters.t('Actions', 'commerce')"
ref="addressmenubtn"></div>
<div class="menu">
<ul>
<li>
<a
:class="{ disabled: !draftAddress }"
:disabled="!draftAddress"
@click.prevent="open('edit')">{{$options.filters.t('Edit address', 'commerce')}}</a>
</li>
<li>
<address-select
:customer-id="customerId"
@update="handleSelect"
></address-select>
</li>
<li>
<a @click.prevent="open('new')">{{$options.filters.t('New address', 'commerce')}}</a>
</li>
<li v-if="copyToAddress">
<a
:class="{ disabled: !draftAddress }"
:diabled="!draftAddress"
@click.prevent="$emit('copy')">{{$options.filters.t('Copy to {location}', 'commerce', { location: copyToAddress })}}</a>
</li>
</ul>
<hr>
<ul>
<li>
<a
:class="{ disabled: !draftAddress }"
:disabled="!draftAddress"
class="error" @click.prevent="$emit('remove')">{{$options.filters.t('Remove address',
'commerce')}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div class="hidden">
<div ref="newaddressmodal" class="order-edit-modal modal fitted">
<div class="body">
<address-form
:title="title"
:address="newAddress"
:states="statesByCountryId"
:countries="countries"
:reset="!modals.new.isVisible"
:new-address="true"
@countryUpdate="handleCountrySelect($event, 'new')"
@stateUpdate="handleStateSelect($event, 'new')"
@errors="handleFormErrors($event, 'new')"
></address-form>
</div>
<div class="footer">
<div class="buttons right">
<btn-link button-class="btn" @click="close('new')">{{$options.filters.t('Cancel', 'commerce')}}</btn-link>
<btn-link button-class="btn submit" @click="done('new')" :class="{ 'disabled': modals.new.hasErrors }" :disabled="modals.new.hasErrors">{{$options.filters.t('Done', 'commerce')}}</btn-link>
</div>
</div>
</div>

<div ref="addressmodal" class="order-edit-modal modal fitted">
<div class="body">
<address-form
v-if="draftAddress"
:title="title"
:address="draftAddress"
:states="statesByCountryId"
:countries="countries"
:reset="!modals.edit.isVisible"
@countryUpdate="handleCountrySelect($event, 'edit')"
@stateUpdate="handleStateSelect($event, 'edit')"
@errors="handleFormErrors($event, 'edit')"
></address-form>
</div>
<div class="footer">
<div class="buttons right">
<btn-link button-class="btn" @click="close('edit')">{{$options.filters.t('Cancel', 'commerce')}}</btn-link>
<btn-link button-class="btn submit" @click="done('edit')" :class="{ 'disabled': modals.edit.hasErrors }" :disabled="modals.edit.hasErrors">{{$options.filters.t('Done', 'commerce')}}</btn-link>
</div>
<div class="hidden">
<div ref="newaddressmodal" class="order-edit-modal modal fitted">
<div class="body">
<address-form
:title="title"
:address="newAddress"
:states="statesByCountryId"
:countries="countries"
:reset="!modals.new.isVisible"
:new-address="true"
@countryUpdate="handleCountrySelect($event, 'new')"
@stateUpdate="handleStateSelect($event, 'new')"
@errors="handleFormErrors($event, 'new')"
></address-form>
</div>
<div class="footer">
<div class="buttons right">
<btn-link button-class="btn" @click="close('new')">{{$options.filters.t('Cancel',
'commerce')}}
</btn-link>
<btn-link button-class="btn submit"
@click="done('new')"
:class="{ 'disabled': modals.new.hasErrors }"
:disabled="modals.new.hasErrors">{{$options.filters.t('Done', 'commerce')}}
</btn-link>
</div>
</div>
</div>

<div ref="addressmodal" class="order-edit-modal modal fitted">
<div class="body">
<address-form
v-if="draftAddress"
:title="title"
:address="draftAddress"
:states="statesByCountryId"
:countries="countries"
:reset="!modals.edit.isVisible"
@countryUpdate="handleCountrySelect($event, 'edit')"
@stateUpdate="handleStateSelect($event, 'edit')"
@errors="handleFormErrors($event, 'edit')"
></address-form>
</div>
<div class="footer">
<div class="buttons right">
<btn-link button-class="btn" @click="close('edit')">{{$options.filters.t('Cancel',
'commerce')}}
</btn-link>
<btn-link button-class="btn submit"
@click="done('edit')"
:class="{ 'disabled': modals.edit.hasErrors }"
:disabled="modals.edit.hasErrors">{{$options.filters.t('Done', 'commerce')}}
</btn-link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<style scoped lang="scss">
Expand Down Expand Up @@ -124,6 +146,10 @@
type: [Object, null],
default: null,
},
copyToAddress: {
type: [String, null],
default: null,
},
customerId: {
type: [Number, null],
default: null,
Expand Down

0 comments on commit 888237b

Please sign in to comment.