-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixed: Duplicate methods in drop-down in reroute-fulfillment card. Ad…
…ded a modal to choose both carrier and shipment method instead of just shipping method (#422).
- Loading branch information
Showing
4 changed files
with
211 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <template> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-buttons slot="start"> | ||
| <ion-button @click="closeModal"> | ||
| <ion-icon slot="icon-only" :icon="closeOutline" /> | ||
| </ion-button> | ||
| </ion-buttons> | ||
| <ion-title>{{ translate("Select shipping method") }}</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content> | ||
| <ion-list> | ||
| <ion-item lines="none"> | ||
| <ion-label>{{ translate('Select which shipping method orders will receive when customer choose to have delivered instead of picked up.') }}</ion-label> | ||
| </ion-item> | ||
| <ion-item> | ||
| <ion-select :label="translate('Carrier')" v-model="carrierPartyId" interface="popover" @ionChange="getProductStoreShipmentMethods(carrierPartyId)"> | ||
| <ion-select-option v-for="carrier in carriers" :key="carrier.partyId" :value="carrier.partyId">{{ carrier.groupName }}</ion-select-option> | ||
| </ion-select> | ||
| </ion-item> | ||
| <ion-item> | ||
| <template v-if="productStoreShipmentMethods && productStoreShipmentMethods.length > 0"> | ||
| <ion-select :label="translate('Method')" v-model="shipmentMethodTypeId" interface="popover"> | ||
| <ion-select-option v-for="method in productStoreShipmentMethods" :key="method.productStoreShipMethId" :value="method.shipmentMethodTypeId">{{ method.description }}</ion-select-option> | ||
| </ion-select> | ||
| </template> | ||
| <template v-else> | ||
| <ion-label> | ||
| {{ translate('No shipment methods linked to', {carrierName: getCarrierName(carrierPartyId)}) }} | ||
| </ion-label> | ||
| <ion-button @click="openShippingMethodDocumentReference()" fill="clear" color="medium" slot="end"> | ||
| <ion-icon slot="icon-only" :icon="informationCircleOutline" /> | ||
| </ion-button> | ||
| </template> | ||
| </ion-item> | ||
| </ion-list> | ||
| </ion-content> | ||
| <ion-fab vertical="bottom" horizontal="end" slot="fixed"> | ||
| <ion-fab-button :disabled="!shipmentMethodTypeId" @click="save()"> | ||
| <ion-icon :icon="saveOutline" /> | ||
| </ion-fab-button> | ||
| </ion-fab> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { | ||
| IonButton, | ||
| IonButtons, | ||
| IonContent, | ||
| IonFab, | ||
| IonFabButton, | ||
| IonHeader, | ||
| IonIcon, | ||
| IonItem, | ||
| IonLabel, | ||
| IonList, | ||
| IonSelect, | ||
| IonSelectOption, | ||
| IonTitle, | ||
| IonToolbar, | ||
| modalController | ||
| } from '@ionic/vue'; | ||
| import { defineComponent } from 'vue'; | ||
| import { closeOutline, informationCircleOutline, saveOutline } from 'ionicons/icons'; | ||
| import { translate } from '@hotwax/dxp-components'; | ||
| export default defineComponent({ | ||
| name: "OrderItemRejHistoryModal", | ||
| components: { | ||
| IonButton, | ||
| IonButtons, | ||
| IonContent, | ||
| IonFab, | ||
| IonFabButton, | ||
| IonHeader, | ||
| IonIcon, | ||
| IonItem, | ||
| IonLabel, | ||
| IonList, | ||
| IonSelect, | ||
| IonSelectOption, | ||
| IonTitle, | ||
| IonToolbar, | ||
| }, | ||
| data(){ | ||
| return { | ||
| carrierPartyId: "", | ||
| shipmentMethodTypeId: "", | ||
| productStoreShipmentMethods: [] as any | ||
| } | ||
| }, | ||
| props: ['currentcConfig', 'carriers', 'availableShipmentMethods'], | ||
| mounted() { | ||
| this.carrierPartyId = this.currentcConfig.carrierPartyId | ||
| this.getProductStoreShipmentMethods(this.carrierPartyId) | ||
| this.shipmentMethodTypeId = this.currentcConfig.shipmentMethodTypeId | ||
| }, | ||
| methods: { | ||
| closeModal() { | ||
| modalController.dismiss({ dismissed: true }); | ||
| }, | ||
| async getProductStoreShipmentMethods(carrierPartyId: string) { | ||
| this.productStoreShipmentMethods = this.availableShipmentMethods?.filter((method: any) => method.partyId === carrierPartyId) || []; | ||
| this.shipmentMethodTypeId = this.productStoreShipmentMethods[0]?.shipmentMethodTypeId; | ||
| }, | ||
| getCarrierName(carrierPartyId: string) { | ||
| const selectedCarrier = this.carriers.find((carrier: any) => carrier.partyId === carrierPartyId) | ||
| return selectedCarrier && selectedCarrier.groupName ? selectedCarrier.groupName : carrierPartyId | ||
| }, | ||
| openShippingMethodDocumentReference() { | ||
| window.open('https://docs.hotwax.co/documents/v/system-admins/fulfillment/shipping-methods/carrier-and-shipment-methods', '_blank'); | ||
| }, | ||
| save() { | ||
| modalController.dismiss({ dismissed: true, shippingMethod: JSON.stringify({"carrierPartyId": this.carrierPartyId, "shipmentMethodTypeId": this.shipmentMethodTypeId})}); | ||
| } | ||
| }, | ||
| setup() { | ||
| return { | ||
| closeOutline, | ||
| informationCircleOutline, | ||
| saveOutline, | ||
| translate | ||
| }; | ||
| }, | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters