Merge branch 'main' of https://github.com/hotwax/preorder into release

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,7 @@
 ### Related Issues
 <!--  Put related issue number which this PR is closing. For example #123 -->
 
-Closes #
+#
 
 ### Short Description and Why It's Useful
 <!-- Describe in a few words what is this Pull Request changing and why it's useful -->
@@ -11,10 +11,7 @@ Closes #
 <!-- If you made any changes in the UI layer, please provide before/after screenshots -->
 
 
-**IMPORTANT NOTICE** - Remember to update `CHANGELOG.md` with description of your change
-
-
 ### Contribution and Currently Important Rules Acceptance
 <!-- Please get familiar with following info -->
 
-- [ ] I read and followed [contribution rules](https://github.com/DivanteLtd/vsf-capybara/blob/master/CONTRIBUTING.md)
+- [ ] I read and followed [contribution rules](https://github.com/hotwax/preorder#contribution-guideline)

package.json

@@ -19,11 +19,11 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "1.12.1",
-    "@hotwax/oms-api": "^1.13.0",
-    "@ionic/core": "6.7.5",
-    "@ionic/vue": "6.7.5",
-    "@ionic/vue-router": "6.7.5",
+    "@hotwax/dxp-components": "1.13.0",
+    "@hotwax/oms-api": "1.14.0",
+    "@ionic/core": "^7.6.0",
+    "@ionic/vue": "^7.6.0",
+    "@ionic/vue-router": "^7.6.0",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
     "luxon": "^3.2.0",

src/adapter/index.ts

@@ -1,4 +1,4 @@
-import { api, client, getConfig, initialise, logout, resetConfig, updateInstanceUrl, updateToken, setUserLocale } from '@hotwax/oms-api'
+import { api, client, getConfig, initialise, logout, resetConfig, updateInstanceUrl, updateToken,  setUserTimeZone, getAvailableTimeZones, setUserLocale } from '@hotwax/oms-api'
 
 export {
   api,
@@ -9,5 +9,7 @@ export {
   resetConfig,
   updateInstanceUrl,
   updateToken,
-  setUserLocale
+  setUserLocale,
+  setUserTimeZone,
+  getAvailableTimeZones
 }

src/i18n/locales/en.json

@@ -21,6 +21,8 @@
     "back-order": "back-order",
     "Back-order": "Back-order",
     "Broker orders": "Broker orders",
+    "Browser TimeZone": "Browser TimeZone",
+    "Browser time zone": "Browser time zone",
     "Built: ": "Built: {builtDateTime}",
     "eCom Store": "eCom Store",
     "Cancel": "Cancel",
@@ -192,7 +194,9 @@
     "Selected variant not available": "Selected variant not available",
     "Selected variant not available. Reseting to first variant.": "Selected variant not available. Reseting to first variant.",
     "Select a new promise date for these orders. This new date will be used for allocating inventory and fulfilling these orders.": "Select a new promise date for these orders. This new date will be used for allocating inventory and fulfilling these orders.",
+    "Selected TimeZone": "Selected TimeZone",
     "Select time zone": "Select time zone",
+    "Select a different time zone": "Select a different time zone",
     "Service has been scheduled": "Service has been scheduled",
     "Settings": "Settings",
     "Ships from date": "Ships from date",

src/main.ts

@@ -32,12 +32,13 @@ import { login, logout, loader } from './user-utils';
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
-import { getConfig, initialise, setUserLocale} from '@/adapter'
+import { getConfig, initialise,  setUserTimeZone, getAvailableTimeZones, setUserLocale} from '@/adapter'
 import localeMessages from './i18n/locales';
 
 const app = createApp(App)
   .use(IonicVue, {
-    mode: 'md'
+    mode: 'md',
+    innerHTMLTemplatesEnabled: true
   })
   .use(router)
   .use(i18n)
@@ -55,7 +56,9 @@ const app = createApp(App)
     getConfig: getConfig,
     initialise: initialise,
     localeMessages,
-    setUserLocale
+    setUserLocale,
+    setUserTimeZone,
+    getAvailableTimeZones
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/services/UserService.ts

@@ -12,20 +12,6 @@ const login = async (username: string, password: string): Promise <any> => {
     }
   });
 }
-const getAvailableTimeZones = async (): Promise <any>  => {
-  return api({
-    url: "getAvailableTimeZones",
-    method: "get",
-    cache: true
-  });
-}
-const setUserTimeZone = async (payload: any): Promise <any>  => {
-  return api({
-    url: "setUserTimeZone",
-    method: "post",
-    data: payload
-  });
-}
 
 const setUserPreference = async (payload: any): Promise<any> => {
   return api({
@@ -204,12 +190,10 @@ const getUserProfile = async (token: any): Promise<any> => {
 }
 
 export const UserService = {
-  getAvailableTimeZones,
   getEComStores,
   getPreferredStore,
   getUserProfile,
   getUserPermissions,
   login,
   setUserPreference,
-  setUserTimeZone,
 }

src/store/modules/order/actions.ts

@@ -290,6 +290,13 @@ const actions: ActionTree<OrderState, RootState> = {
     commit(types.ORDER_SELECTED_ITEMS_UPDATED, { selectedItems: state.selectedItems } );
   },
 
+  /**
+   * Clear selected items list
+   */
+   clearSelectedItems  ( { commit }) {
+    commit(types.ORDER_SELECTED_ITEMS_UPDATED, { selectedItems: [] } );
+  },
+
     /**
    * Remove items from selected items
    */

src/store/modules/user/actions.ts

@@ -136,16 +136,12 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * Update user timeZone
    */
-     async setUserTimeZone ( { state, commit }, payload) {
-      const resp = await UserService.setUserTimeZone(payload)
-      if (resp.status === 200 && !hasError(resp)) {
-        const current: any = state.current;
-        current.userTimeZone = payload.timeZoneId;
-        commit(types.USER_INFO_UPDATED, current);
-        Settings.defaultZone = current.userTimeZone;
-        showToast(translate("Time zone updated successfully"));
-      }
-    },
+  async setUserTimeZone ( { state, commit }, timeZoneId) {
+    const current: any = state.current;
+    current.userTimeZone = timeZoneId;
+    commit(types.USER_INFO_UPDATED, current);
+    Settings.defaultZone = current.userTimeZone;
+  },
 
   /**
    * Set user's selected Ecom store

src/views/catalog-product-details.vue

@@ -255,12 +255,10 @@
               <ion-label slot="end">{{ (atpCalcDetails.excludedAtp || atpCalcDetails.excludedAtp === 0) ? atpCalcDetails.excludedAtp : '-' }}</ion-label>
             </ion-item>
             <ion-item>
-              <ion-label>{{ $t("Reserve inventory") }}</ion-label>
-              <ion-toggle slot="end" :disabled="!inventoryConfig.reserveInvStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.reserveInvStatus === 'Y'" @click="updateReserveInvConfig($event)"/>
+              <ion-toggle :disabled="!inventoryConfig.reserveInvStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.reserveInvStatus === 'Y'" @click="updateReserveInvConfig($event)">{{ $t("Reserve inventory") }}</ion-toggle>
             </ion-item>
             <ion-item>
-              <ion-label>{{ $t("Hold pre-order physical inventory") }}</ion-label>
-              <ion-toggle slot="end" :disabled="!inventoryConfig.preOrdPhyInvHoldStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @click="updatePreOrdPhyInvHoldConfig($event)"/>
+              <ion-toggle :disabled="!inventoryConfig.preOrdPhyInvHoldStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @click="updatePreOrdPhyInvHoldConfig($event)">{{ $t("Hold pre-order physical inventory") }}</ion-toggle>
             </ion-item>
           </div>
         </ion-card>

src/views/catalog.vue

@@ -9,7 +9,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <div class="header">
         <div class="filters ion-padding-top">
           <ion-toolbar>
@@ -77,7 +77,7 @@
           </ion-item> -->
         </div>
 
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="!isCatalogScrollable">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isCatalogScrollable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')" />
         </ion-infinite-scroll>
       </div>
@@ -157,7 +157,8 @@ export default defineComponent({
         value: 'REMOVED'
       }*/],
       queryString: '',
-      preordBckordComputationJob: {} as any
+      preordBckordComputationJob: {} as any,
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -169,6 +170,7 @@ export default defineComponent({
     })
   },
   async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
     await this.getCatalogProducts()
     await this.preparePreordBckordComputationJob()
   },
@@ -200,13 +202,28 @@ export default defineComponent({
 
       await this.store.dispatch("product/findCatalogProducts", payload);
     },
+    enableScrolling() {
+      const parentElement = (this as any).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
+      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
+      if(distanceFromInfinite < 0) {
+        this.isScrollingEnabled = false;
+      } else {
+        this.isScrollingEnabled = true;
+      }
+    },
     async loadMoreProducts(event: any){
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isCatalogScrollable)) {
+        await event.target.complete();
+      }
       this.getCatalogProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()
-      ).then(() => {
-        event.target.complete();
-      })
+      ).then(async () => {
+        await event.target.complete();
+      });
     },
     async applyFilter(value: string) {
       if(value !== this.prodCatalogCategoryTypeId) {
@@ -301,6 +318,14 @@ export default defineComponent({
   border-bottom: 1px solid var(--ion-color-medium);
   cursor: pointer;
 }
+
+
+/* Added width property as after updating to ionic7 min-width is getting applied on ion-label inside ion-item
+  which results in distorted label text and thus reduced ion-item width */
+.list-item > ion-item {
+  width: 100%;
+}
+
 @media (max-width: 991px) {
   /* ==============
    3. Mobile Header

src/views/edit-shipping-modal.vue

@@ -13,20 +13,17 @@
   <ion-content>
     <ion-radio-group>
       <ion-item lines="none">
-        <ion-radio slot="start"></ion-radio>
-        <ion-label>{{ $t("Custom") }}</ion-label>
+        <ion-radio justify="start" label-placement="end">{{ $t("Custom") }}</ion-radio>
       </ion-item>
     </ion-radio-group>
 
     <ion-item>
-      <ion-label position="stacked">{{ $t("Ships from date") }}</ion-label>
-      <ion-input type="date"></ion-input>
+      <ion-input :label="$t('Ships from date')" label-placement="stacked" type="date"></ion-input>
     </ion-item>
 
     <ion-radio-group>
       <ion-item lines="none">
-        <ion-radio slot="start"></ion-radio>
-        <ion-label>{{ $t("Auto") }}</ion-label>
+        <ion-radio label-placement="end" justify="start">{{ $t("Auto") }}</ion-radio>
       </ion-item>
     </ion-radio-group>