Implemented: new Re-route fulfillment app v2 (#92)

package.json

@@ -22,9 +22,8 @@
     "@ionic/vue-router": "^7.6.0",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
+    "luxon": "^3.2.0",
     "mitt": "^2.1.0",
-    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.33",
     "vue": "^3.2.26",
     "vue-i18n": "~9.1.6",
     "vue-router": "^4.0.12",
@@ -33,6 +32,7 @@
   },
   "devDependencies": {
     "@capacitor/cli": "^2.4.7",
+    "@types/luxon": "^3.2.0",
     "@intlify/vue-i18n-loader": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
     "@typescript-eslint/parser": "~5.26.0",

src/App.vue

@@ -7,12 +7,26 @@
 <script lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { Settings } from 'luxon';
+import { mapGetters } from 'vuex';
 
 export default defineComponent({
   name: 'App',
   components: {
     IonApp,
     IonRouterOutlet
   },
+  computed: {
+    ...mapGetters({
+      userProfile: 'user/getUserProfile',
+    })
+  },
+  mounted() {
+    // Handles case when user resumes or reloads the app
+    // Luxon timezzone should be set with the user's selected timezone
+    if (this.userProfile && this.userProfile.userTimeZone) {
+      Settings.defaultZone = this.userProfile.userTimeZone;
+    }
+  }
 });
 </script>

src/i18n/index.ts

@@ -19,11 +19,11 @@ const i18n = createI18n({
   messages: loadLocaleMessages()
 })
 
-const translate = (key: string) => {
+const translate = (key: string, named?: any) => {
   if (!key) {
     return '';
   }
-  return i18n.global.t(key);
+  return i18n.global.t(key, named);
 };
 
 export { i18n as default, translate }

src/i18n/locales/en.json

@@ -4,7 +4,9 @@
   "Are you sure you want to save the changes?": "Are you sure you want to save the changes?",
   "Are you sure you want to cancel the order items?": "Are you sure you want to cancel the order items?",
   "Cancel": "Cancel",
+  "Cancel item": "Cancel item",
   "Cancel items": "Cancel items",
+  "Change pickup location": "Change pickup location",
   "Change Store": "Change Store",
   "Changes saved": "Changes saved",
   "City": "City",
@@ -18,7 +20,7 @@
   "Fetching order details.": "Fetching order details.",
   "Fetching stores.": "Fetching stores.",
   "First name": "First name",
-  "Failed to cancel the order": "Failed to cancel the order",
+  "Failed to cancel the order.": "Failed to cancel the order.",
   "Failed to update the pickup store": "Failed to update the pickup store",
   "Failed to update the shipping addess": "Failed to update the shipping addess",
   "Fetching address": "Fetching address",
@@ -30,24 +32,32 @@
   "Nearby stores": "Nearby stores",
   "OMS": "OMS",
   "Order ID": "Order ID",
-  "Order cancelled successfully": "Order cancelled successfully",
+  "Order cancelled successfully.": "Order cancelled successfully.",
   "Order item not eligible for reroute fulfilment": "Order item not eligible for reroute fulfilment",
   "Order not found": "Order not found",
+  "Out of stock": "Out of stock",
   "Shipment has been cancelled": "Shipment has been cancelled",
   "Password": "Password",
   "Please fill all the fields": "Please fill all the fields",
+  "Request cancel": "Request cancel",
+  "Request cancelation": "Request cancelation",
   "Save changes": "Save changes",
   "Save shipping address": "Save shipping address",
   "Select pickup location": "Select pickup location",
+  "Separate": "Separate",
   "Shipping address": "Shipping address",
   "Showing pickup locations near": "Showing pickup locations near",
+  "Showing pickup locations near your saved address": "Showing pickup locations near your saved address",
   "Something went wrong while fetching stores": "Something went wrong while fetching stores",
   "Something went wrong while fetching the order details": "Something went wrong while fetching the order details",
   "Settings": "Settings",
   "State": "State",
   "Street": "Street",
+  "These products are not available at a single store for pickup. Please select alternate options for items individually.": "These products are not available at a single store for pickup. Please select alternate options for items individually.",
+  "Together": "Together",
   "Tracking code": "Tracking code",
   "Username": "Username",
+  "was unable to prepare your order. Please select alternate options.": "{facilityName} was unable to prepare your order. Please select alternate options.",
   "Your Order": "Your Order",
   "Zipcode": "Zipcode"
 }

src/main.ts

@@ -1,8 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router';
-import moment from 'moment'
-import "moment-timezone";
+import { DateTime } from 'luxon';  
 
 
 import { IonicVue } from '@ionic/vue';
@@ -47,17 +46,19 @@ const app = createApp(App)
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
 app.config.globalProperties.$filters = {
-  formatDate(value: any, inFormat?: string, outFormat?: string) {
-    // TODO Use Loxon instead
+  formatDate(value: any, inFormat?: string, outFormat = "MM-dd-yyyy") {
     // TODO Make default format configurable and from environment variables
-    return moment(value, inFormat).format(outFormat ? outFormat : 'MM-DD-YYYY');
+    if(inFormat){
+      return DateTime.fromFormat(value, inFormat).toFormat(outFormat);
+    }
+    return DateTime.fromISO(value).toFormat(outFormat);
   },
-  formatUtcDate(value: any, inFormat?: string, outFormat?: string) {
+  formatUtcDate(value: any, inFormat?: any, outFormat = "MM-dd-yyyy") {
     // TODO Use Loxon instead
     // TODO Make default format configurable and from environment variables
     const userProfile = store.getters['user/getUserProfile'];
     // TODO Fix this setDefault should set the default timezone instead of getting it everytiem and setting the tz
-    return moment.utc(value, inFormat).tz(userProfile.userTimeZone).format(outFormat ? outFormat : 'MM-DD-YYYY');
+    return DateTime.utc(value, inFormat).setZone(userProfile.userTimeZone).toFormat(outFormat)
   },
   getFeature(featureHierarchy: any, featureKey: string) {
     let  featureValue = ''

src/services/OrderService.ts

@@ -1,9 +1,6 @@
 import { api } from '@/adapter';
-import store from '@/store';
 
 const getOrder = async (payload: any): Promise <any>  => {
-  let baseURL = store.getters['user/getInstanceUrl'];
-  baseURL = baseURL && baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
   return api({
     url: "getRerouteOrder",
     method: "post",
@@ -43,10 +40,37 @@ const getProductStoreSetting = async (payload: any): Promise<any> => {
   });
 }
 
+const getRerouteOrderFacilityChangeHistory = async (payload: any): Promise<any> => {
+  return api({
+    url: "getRerouteOrderFacilityChangeHistory",
+    method: "post",
+    data: payload
+  });
+}
+
+const releaseRerouteOrderItem = async (payload: any): Promise<any> => {
+  return api({
+    url: "releaseRerouteOrderItem",
+    method: "post",
+    data: payload
+  });
+}
+
+const requestCancelRerouteOrderItem = async (payload: any): Promise<any> => {
+  return api({
+    url: "requestCancelRerouteOrderItem",
+    method: "post",
+    data: payload
+  });
+}
+
 export const OrderService = {
   getOrder,
+  getRerouteOrderFacilityChangeHistory,
   updateShippingAddress,
   updatePickupFacility,
   cancelOrderItem,
-  getProductStoreSetting
+  getProductStoreSetting,
+  releaseRerouteOrderItem,
+  requestCancelRerouteOrderItem
 }

src/store/modules/user/UserState.ts

@@ -4,4 +4,6 @@ export default interface UserState {
     instanceUrl: string;
     deliveryMethod: string;
     permissions: any;
+    isSplitEnabled: boolean;
+    isCancellationAllowed: boolean;
 }

src/store/modules/user/actions.ts

@@ -5,9 +5,8 @@ import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
-import moment from 'moment';
+import { DateTime } from 'luxon'
 import emitter from '@/event-bus'
-import "moment-timezone";
 import { updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import { prepareAppPermissions, setPermissions } from '@/authorization'
 import { OrderService } from '@/services/OrderService'
@@ -88,7 +87,7 @@ const actions: ActionTree<UserState, RootState> = {
   async getProfile ( { commit }) {
     const resp = await UserService.getProfile()
     if (resp.status === 200) {
-      const localTimeZone = moment.tz.guess();
+      const localTimeZone = DateTime.now().zoneName;
       if (resp.data.userTimeZone !== localTimeZone) {
         emitter.emit('timeZoneDifferent', { profileTimeZone: resp.data.userTimeZone, localTimeZone});
       }
@@ -120,18 +119,22 @@ const actions: ActionTree<UserState, RootState> = {
         token,
         inputFields: {
           productStoreId,
-          "settingTypeEnumId": ["CUST_DLVRMTHD_UPDATE", "CUST_DLVRADR_UPDATE", "CUST_PCKUP_UPDATE", "CUST_ALLOW_CNCL", "RF_SHIPPING_METHOD"],
+          "settingTypeEnumId": ["CUST_DLVRMTHD_UPDATE", "CUST_DLVRADR_UPDATE", "CUST_PCKUP_UPDATE", "CUST_ALLOW_CNCL", "RF_SHIPPING_METHOD", "CUST_ORD_ITEM_SPLIT"],
           "settingTypeEnumId_op": "in"
         },
         viewSize: 100
       })
       if (!hasError(resp)) {
         const permissions = resp.data.docs.filter((permission: any) => permission.settingValue == 'true').map((permission: any) => permission.settingTypeEnumId)
         const deliveryMethod = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'RF_SHIPPING_METHOD')?.settingValue
+        const isSplitEnabled = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'CUST_ORD_ITEM_SPLIT')?.settingValue
+        const isCancellationAllowed = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'CUST_ALLOW_CNCL')?.settingValue
         const appPermissions = prepareAppPermissions(permissions);
         setPermissions(appPermissions);
         commit(types.USER_DELIVERY_METHOD_UPDATED, deliveryMethod ? deliveryMethod : "STANDARD");
         commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
+        commit(types.USER_ORDER_SPLIT_CONFIG_UPDATED, isSplitEnabled === "true");
+        commit(types.USER_ITEM_CANCELLATION_CONFIG_UPDATED, isCancellationAllowed === "true");
       }
     } catch (error) {
       console.error(error)

src/store/modules/user/getters.ts

@@ -24,6 +24,12 @@ const getters: GetterTree <UserState, RootState> = {
     },
     getUserPermissions (state) {
         return state.permissions;
+    },
+    isSplitEnabled (state) {
+        return state.isSplitEnabled;
+    },
+    isCancellationAllowed (state) {
+        return state.isCancellationAllowed
     }
 }
 export default getters;

src/store/modules/user/index.ts

@@ -13,6 +13,8 @@ const userModule: Module<UserState, RootState> = {
       instanceUrl: '',
       deliveryMethod: '',
       permissions: [],
+      isSplitEnabled: false,
+      isCancellationAllowed: false
     },
     getters,
     actions,

src/store/modules/user/mutation-types.ts

@@ -5,3 +5,5 @@ export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
 export const USER_DELIVERY_METHOD_UPDATED = SN_USER + '/DELIVERY_METHOD_UPDATED'
+export const USER_ORDER_SPLIT_CONFIG_UPDATED = SN_USER + '/ORDER_SPLIT_CONFIG_UPDATED'
+export const USER_ITEM_CANCELLATION_CONFIG_UPDATED = SN_USER + '/ITEM_CANCELLATION_CONFIG_UPDATED'

src/store/modules/user/mutations.ts

@@ -22,6 +22,12 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_DELIVERY_METHOD_UPDATED] (state, payload) {
         state.deliveryMethod = payload
+    },
+    [types.USER_ORDER_SPLIT_CONFIG_UPDATED] (state, payload) {
+        state.isSplitEnabled = payload
+    },
+    [types.USER_ITEM_CANCELLATION_CONFIG_UPDATED] (state, payload) {
+        state.isCancellationAllowed = payload
     }
 }
 export default mutations;

src/theme/variables.css

@@ -233,4 +233,13 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-card-background: #1e1e1e;
   }
+}
+
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
 }