Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented: Updated UI of Settings page(#32j3r6t) #156

Merged
merged 4 commits into from
Dec 16, 2022
Merged

Implemented: Updated UI of Settings page(#32j3r6t) #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
98c6f97
Implemented: Updated UI of Settings page(#32j3r6t)
shashwatbangar Dec 7, 2022
bbcd7d4
Fixed: Removed unwanted horizontal rule styling(#32j3r6t)
shashwatbangar Dec 7, 2022
934f797
Fixed: Removed unused method setEcomStore(#32j3r6t)
shashwatbangar Dec 7, 2022
2632d92
Improved: Code to open external links in new tab(#32j3r6t)
shashwatbangar Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@
"Copy": "Copy",
"Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels. For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.": "Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels.{ space } For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.",
"Dismiss": "Dismiss",
"eCommerce": "eCommerce",
"eCommerce stores are directly connected to one Shop Configs. If your OMS is connected to multiple eCommerce stores selling the same catalog operating as one Company, you may have multiple Shop Configs for the selected Product Store.": "eCommerce stores are directly connected to one Shop Configs. If your OMS is connected to multiple eCommerce stores selling the same catalog operating as one Company, you may have multiple Shop Configs for the selected Product Store.",
"Failed to load packing slip": "Failed to load packing slip",
"First name": "First name",
"Go to OMS": "Go to OMS",
"Handover": "Handover",
"Inactive store": "Inactive store",
"in stock": "in stock",
Expand All @@ -30,6 +33,7 @@
"No reason": "No reason",
"Open": "Open",
"OMS": "OMS",
"OMS instance": "OMS instance",
"Order": "Order",
"Order delivered to": "Order delivered to { customerName }",
"Order details": "Order details",
Expand All @@ -48,18 +52,21 @@
"Reason": "Reason",
"Search": "Search",
"Search Orders": "Search Orders",
"Select eCommerce": "Select eCommerce",
"Settings": "Settings",
"Ship": "Ship",
"Shipping method": "Shipping method",
"Shipping orders": "Shipping orders",
"Ship to customer": "Ship to customer",
"Ship to this address": "Ship to this address",
"Shop": "Shop",
"Shopify Config": "Shopify Config",
"Size": "Size",
"Something went wrong": "Something went wrong",
"State": "State",
"Street": "Street",
"Store": "Store",
"This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
"This order cannot be split. If you cannot fulfill any item, will be sent an email with alternate fulfillment options and this order will be removed from your dashboard.": "This order cannot be split. If you cannot fulfill any item, { customerName } will be sent an email with alternate fulfillment options and this order will be removed from your dashboard.",
"This order will be rejected from this store with the selected reason and shipped to the address that has been inputed.Please make sure the address you have entered is correct.": "This order will be rejected from this store with the selected reason and shipped to the address that has been inputed. { space } Please make sure the address you have entered is correct.",
"Unfillable Items": "Unfillable Items",
Expand Down
157 changes: 118 additions & 39 deletions src/views/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,67 +7,124 @@
</ion-header>

<ion-content>
<ion-list>
<!-- Select store -->
<ion-item>
<ion-icon :icon="storefrontOutline" slot="start" />
<ion-label>{{$t("Store")}}</ion-label>
<ion-select interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
<ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.name }}</ion-select-option>
</ion-select>
</ion-item>
<!-- Shipping order preference -->
<ion-item>
<ion-icon :icon="sendOutline" slot="start" />
<ion-label>{{$t("Shipping orders")}}</ion-label>
<ion-toggle :checked="showShippingOrders" @ionChange="setShowShippingOrdersPreference($event)" slot="end" />
</ion-item>
<!-- Packing document preference -->
<ion-item>
<ion-icon :icon="sendOutline" slot="start" />
<ion-label>{{ $t("Packing slip") }}</ion-label>
<ion-toggle :checked="showPackingSlip" @ionChange="setShowPackingSlipPreference($event)" slot="end" />
</ion-item>
<!-- OMS information -->
<ion-item>
<ion-icon :icon="codeWorkingOutline" slot="start"/>
<ion-label>{{ $t("OMS") }}</ion-label>
<p slot="end">{{ baseURL ? baseURL : instanceUrl }}</p>
</ion-item>
<!-- Profile of user logged in -->
<ion-item>
<ion-icon :icon="personCircleOutline" slot="start" />
<ion-label>{{ userProfile !== null ? userProfile.partyName : '' }}</ion-label>
<ion-button slot="end" fill="outline" color="dark" @click="logout()">{{ $t("Logout") }}</ion-button>
</ion-item>
</ion-list>
<div class="user-profile">
<ion-card>
<ion-item lines="full">
<ion-avatar slot="start" v-if="userProfile?.partyImageUrl">
<Image :src="userProfile.partyImageUrl"/>
</ion-avatar>
<ion-label>
{{ userProfile?.partyName }}
<p>{{ userProfile?.userLoginId }}</p>
</ion-label>
</ion-item>
<ion-button fill="outline" color="danger" @click="logout()">{{ $t("Logout") }}</ion-button>
<!-- Commenting this code as we currently do not have reset password functionality -->
<!-- <ion-button fill="outline" color="medium">{{ $t("Reset password") }}</ion-button> -->
</ion-card>
</div>
<h1>{{ $t('OMS') }}</h1>
<section>
<ion-card>
<ion-card-header>
<ion-card-subtitle>
{{ $t("OMS instance") }}
</ion-card-subtitle>
<ion-card-title>
{{ instanceUrl }}
</ion-card-title>
</ion-card-header>
<ion-card-content>
{{ $t('This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.') }}
</ion-card-content>
<ion-button @click="goToOms" fill="clear">
{{ $t('Go to OMS') }}
<ion-icon slot="end" :icon="openOutline" />
</ion-button>
</ion-card>

<ion-card>
<ion-card-header>
<ion-card-subtitle>
{{ $t("Shopify Config") }}
</ion-card-subtitle>
<ion-card-title>
{{ $t("eCommerce") }}
</ion-card-title>
</ion-card-header>
<ion-card-content>
{{ $t('eCommerce stores are directly connected to one Shop Configs. If your OMS is connected to multiple eCommerce stores selling the same catalog operating as one Company, you may have multiple Shop Configs for the selected Product Store.') }}
</ion-card-content>
<ion-item lines="none">
<ion-label>{{ $t("Select eCommerce") }}</ion-label>
<ion-select interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
<ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.name }}</ion-select-option>
</ion-select>
</ion-item>
</ion-card>

<ion-card>
<ion-card-header>
<ion-card-subtitle>
{{ $t("Shipping orders") }}
</ion-card-subtitle>
<ion-card-title>
{{ $t("Shipping orders") }}
</ion-card-title>
</ion-card-header>
<ion-item lines="none">
<ion-toggle :checked="showShippingOrders" @ionChange="setShowShippingOrdersPreference($event)" slot="end" />
</ion-item>
</ion-card>

<ion-card>
<ion-card-header>
<ion-card-subtitle>
{{ $t("Packing slip") }}
</ion-card-subtitle>
<ion-card-title>
{{ $t("Packing slip") }}
</ion-card-title>
</ion-card-header>
<ion-item lines="none">
<ion-toggle :checked="showPackingSlip" @ionChange="setShowPackingSlipPreference($event)" slot="end" />
</ion-item>
</ion-card>
</section>
</ion-content>
</ion-page>
</template>

<script lang="ts">
import { IonButton, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle , IonToolbar } from '@ionic/vue';
import { IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle , IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
import { ellipsisVertical, personCircleOutline, sendOutline , storefrontOutline, codeWorkingOutline } from 'ionicons/icons'
import { ellipsisVertical, personCircleOutline, sendOutline , storefrontOutline, codeWorkingOutline, openOutline } from 'ionicons/icons'
import { mapGetters, useStore } from 'vuex';
import { useRouter } from 'vue-router';
import Image from '@/components/Image.vue';

export default defineComponent({
name: 'Settings',
components: {
IonAvatar,
IonButton,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonPage,
IonSelect,
IonSelectOption,
IonTitle,
IonToggle,
IonToolbar
IonToolbar,
Image
},
data(){
return {
Expand Down Expand Up @@ -100,6 +157,9 @@ export default defineComponent({
},
setShowPackingSlipPreference (ev: any){
this.store.dispatch('user/setUserPreference', { showPackingSlip: ev.detail.checked })
},
goToOms(){
window.open(this.instanceUrl.startsWith('http') ? this.instanceUrl.replace('api/', "") : `https://${this.instanceUrl}.hotwax.io/`, '_blank', 'noopener, noreferrer');
}
},
setup () {
Expand All @@ -113,8 +173,27 @@ export default defineComponent({
sendOutline,
store,
storefrontOutline,
codeWorkingOutline
codeWorkingOutline,
openOutline
}
}
});
</script>

<style scoped>
ion-card > ion-button {
margin: var(--spacer-xs);
}
h1 {
padding: var(--spacer-xs) 10px 0;
}
section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
align-items: start;
}
.user-profile {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
</style>