From 43543b83977789ca2810828f3f3442ded89e4edc Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit@Ravindras-MacBook-Pro.local>
Date: Thu, 26 May 2022 12:54:13 +0530
Subject: [PATCH 01/28] Implemented | Web hooks card on Product View Page

---
 src/views/Product.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/views/Product.vue b/src/views/Product.vue
index d180c554..91a449a1 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -26,6 +26,20 @@
               <ion-label class="ion-text-wrap"><p>{{ $t("Sync products and category structures from Shopify into HotWax Commerce and keep them up to date.") }}</p></ion-label>
             </ion-item>
           </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>Web Hooks</ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              <ion-label class="ion-text-wrap">New Products</ion-label>
+              <ion-toggle slot="end" color="secondary"></ion-toggle>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-label>Delete Products</ion-label>
+              <ion-toggle slot="end" color="secondary"></ion-toggle>
+            </ion-item>
+          </ion-card>
         </section>
 
         <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">

From 939cf6abfe612758e2b6b9cef430cab1d585da0c Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit@Ravindras-MacBook-Pro.local>
Date: Thu, 26 May 2022 15:00:15 +0530
Subject: [PATCH 02/28] Improved: Internationalized webhooks card labels on
 Product View Page

---
 src/locales/en.json   | 3 +++
 src/views/Product.vue | 8 +++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 99157fab..74d83f39 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -41,6 +41,7 @@
   "Daily": "Daily",
   "Dashoard": "Dashoard",
   "Days": "Days",
+  "Delete products": "Delete products",
   "Disable": "Disable",
   "Dismiss": "Dismiss",
   "Disabled": "Disabled",
@@ -77,6 +78,7 @@
   "More options": "More options",
   "New broker run": "New broker run",
   "New orders": "New orders",
+  "New products": "New products",
   "No jobs have run yet": "No jobs have run yet",
   "No previous occurrence": "No previous occurrence",
   "Notes": "Notes",
@@ -175,6 +177,7 @@
   "Unfillable": "Unfillable",
   "Unfillable orders": "Unfillable orders",
   "Unfulfilled orders that pass their auto cancelation date will be canceled automatically in HotWax Commerce. They will also be canceled in Shopify if upload for canceled orders is enabled.": "Unfulfilled orders that pass their auto cancelation date will be canceled automatically in HotWax Commerce. They will also be canceled in Shopify if upload for canceled orders is enabled.",
+  "Webhooks": "Webhooks",
   "When importing historical completed orders, this should be turned off.": "When importing historical completed orders, this should be turned off.",
   "When using HotWax BOPIS, Shopify isn't aware of the actual inventory consumed. HotWax will automatically restore inventory automatically reduced by Shopify and deduct inventory from the correct store to maintain inventory accuracy.": "When using HotWax BOPIS, Shopify isn't aware of the actual inventory consumed. HotWax will automatically restore inventory automatically reduced by Shopify and deduct inventory from the correct store to maintain inventory accuracy."
 }
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 91a449a1..b0f1d2f9 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -29,14 +29,14 @@
 
           <ion-card>
             <ion-card-header>
-              <ion-card-title>Web Hooks</ion-card-title>
+              <ion-card-title>{{ $t("Webhooks") }}</ion-card-title>
             </ion-card-header>
             <ion-item>
-              <ion-label class="ion-text-wrap">New Products</ion-label>
+              <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
               <ion-toggle slot="end" color="secondary"></ion-toggle>
             </ion-item>
             <ion-item lines="none">
-              <ion-label>Delete Products</ion-label>
+              <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
               <ion-toggle slot="end" color="secondary"></ion-toggle>
             </ion-item>
           </ion-card>
@@ -63,6 +63,7 @@ import {
   IonPage,
   IonTitle,
   IonToolbar,
+  IonToggle,
   isPlatform
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
@@ -86,6 +87,7 @@ export default defineComponent({
     IonPage,
     IonTitle,
     IonToolbar,
+    IonToggle,
     JobConfiguration
   },
   computed: {

From 4e8d0fede7a93476046ec0148de0e97db386e6c5 Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Fri, 27 May 2022 19:36:03 +0530
Subject: [PATCH 03/28] Implemented: Webhooks services and store, Implemented:
 Webhooks toggle logic on products view job manager app

---
 .env.example                                  |  3 ++-
 src/services/WebhooksService.ts               | 13 ++++++++++
 src/store/index.ts                            |  4 ++-
 src/store/modules/webhooks/WebhooksState.ts   |  7 +++++
 src/store/modules/webhooks/actions.ts         | 26 +++++++++++++++++++
 src/store/modules/webhooks/getters.ts         |  9 +++++++
 src/store/modules/webhooks/index.ts           | 22 ++++++++++++++++
 src/store/modules/webhooks/mutations-types.ts |  0
 src/store/modules/webhooks/mutations.ts       | 10 +++++++
 src/views/Orders.vue                          | 22 ++++++++++++++++
 src/views/Product.vue                         | 24 ++++++++++++++---
 11 files changed, 134 insertions(+), 6 deletions(-)
 create mode 100644 src/services/WebhooksService.ts
 create mode 100644 src/store/modules/webhooks/WebhooksState.ts
 create mode 100644 src/store/modules/webhooks/actions.ts
 create mode 100644 src/store/modules/webhooks/getters.ts
 create mode 100644 src/store/modules/webhooks/index.ts
 create mode 100644 src/store/modules/webhooks/mutations-types.ts
 create mode 100644 src/store/modules/webhooks/mutations.ts

diff --git a/.env.example b/.env.example
index a65ce505..de87f1ec 100644
--- a/.env.example
+++ b/.env.example
@@ -11,4 +11,5 @@ VUE_APP_INITIAL_JOB_ENUMS={"IMP_PRDTS_BLK":"JOB_IMP_PROD_NEW_BLK","IMP_ORDERS_BL
 VUE_APP_JOB_TITLES={"JOB_IMP_PROD_NEW":"Import products","JOB_IMP_PROD_UPD":"Sync products","JOB_IMP_ORD_CNCL":"Cancelled orders","JOB_IMP_ORD":"New orders","JOB_IMP_ITM_CNCL":"Cancelled items","JOB_UL_CNCLD_ORD":"Cancelled orders","JOB_UL_CMPLT_ORD":"Completed orders","JOB_IMP_PYMNT_STTS":"Payment status","JOB_IMP_RTN":"Returns","JOB_UL_REFUNDS":"Refunds","JOB_BKR_REJ_ORD":"Rejected orders","JOB_BKR_ORD_UNF":"Unfillable orders","JOB_UL_INV":"Hard sync"}
 VUE_APP_INITIAL_JOB_TYPES={"JOB_IMP_PROD_NEW_BLK":"products","JOB_IMP_ORD_BLK":"orders"}
 VUE_APP_BASE_URL=
-VUE_APP_BATCH_JOB_ENUMS={"JOB_BKR_ORD_UNF":{"id":"JOB_BKR_ORD_UNF","facilityId":"_NA_","unfillable": true},"JOB_BKR_ORD":{"id": "JOB_BKR_ORD","facilityId":"_NA_","unfillable": false},"JOB_BKR_PREORD_UNF":{"id":"JOB_BKR_PREORD_UNF","facilityId":"PRE_ORDER_PARKING","unfillable":true},"JOB_BKR_PREORD":{"id":"JOB_BKR_PREORD","facilityId":"PRE_ORDER_PARKING","unfillable":false},"JOB_BKR_BACKORD_UNF":{"id":"JOB_BKR_BACKORD_UNF","facilityId":"BACKORDER_PARKING","unfillable":true},"JOB_BKR_BACKORD":{"id":"JOB_BKR_BACKORD","facilityId":"BACKORDER_PARKING","unfillable":false}}
\ No newline at end of file
+VUE_APP_BATCH_JOB_ENUMS={"JOB_BKR_ORD_UNF":{"id":"JOB_BKR_ORD_UNF","facilityId":"_NA_","unfillable": true},"JOB_BKR_ORD":{"id": "JOB_BKR_ORD","facilityId":"_NA_","unfillable": false},"JOB_BKR_PREORD_UNF":{"id":"JOB_BKR_PREORD_UNF","facilityId":"PRE_ORDER_PARKING","unfillable":true},"JOB_BKR_PREORD":{"id":"JOB_BKR_PREORD","facilityId":"PRE_ORDER_PARKING","unfillable":false},"JOB_BKR_BACKORD_UNF":{"id":"JOB_BKR_BACKORD_UNF","facilityId":"BACKORDER_PARKING","unfillable":true},"JOB_BKR_BACKORD":{"id":"JOB_BKR_BACKORD","facilityId":"BACKORDER_PARKING","unfillable":false}}
+VUE_APP_WEBHOOKS_ENUMS={"NEW_PRODUCTS":"products/create","DELETE_PRODUCTS":"products/update","NEW_ORDERS":"orders/create","CANCELLED_ORDERS":"orders/cancelled","PAYMENT_STATUS":"orders/paid","RETURNS":""}
\ No newline at end of file
diff --git a/src/services/WebhooksService.ts b/src/services/WebhooksService.ts
new file mode 100644
index 00000000..56cd3621
--- /dev/null
+++ b/src/services/WebhooksService.ts
@@ -0,0 +1,13 @@
+import api from '@/api'
+
+const fetchShopifyWebhooks = async (payload?: any): Promise <any>  => {
+  return api({
+    url: "/service/getShopifyWebhooks",
+    method: "post",
+    data: payload
+  });
+}
+
+export const WebhooksService = {
+  fetchShopifyWebhooks
+}
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 3fb81574..fef797b1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -8,6 +8,7 @@ import userModule from './modules/user';
 import productModule from "./modules/product"
 import jobModule from "./modules/job"
 import utilModule from "./modules/util"
+import webhooksModule from "./modules/webhooks"
 
 
 // TODO check how to register it from the components only
@@ -35,7 +36,8 @@ const store = createStore<RootState>({
         'user': userModule,
         'product': productModule,
         'job': jobModule,
-        'util': utilModule
+        'util': utilModule,
+        'webhooks': webhooksModule
     },
 })
 
diff --git a/src/store/modules/webhooks/WebhooksState.ts b/src/store/modules/webhooks/WebhooksState.ts
new file mode 100644
index 00000000..cc8df15d
--- /dev/null
+++ b/src/store/modules/webhooks/WebhooksState.ts
@@ -0,0 +1,7 @@
+export default interface WebhooksState {
+  cached: Object
+  key: {
+    topic: string,
+    list: Array<any>
+  }
+}
\ No newline at end of file
diff --git a/src/store/modules/webhooks/actions.ts b/src/store/modules/webhooks/actions.ts
new file mode 100644
index 00000000..f2214a39
--- /dev/null
+++ b/src/store/modules/webhooks/actions.ts
@@ -0,0 +1,26 @@
+import { ActionTree } from "vuex";
+import RootState from "@/store/RootState";
+import WebhooksState from "./WebhooksState";
+import { WebhooksService } from "@/services/WebhooksService";
+import { hasError } from "@/utils";
+
+const actions: ActionTree<WebhooksState, RootState> = {
+  async fetchWebhooks({ commit }, payload){
+    await WebhooksService.fetchShopifyWebhooks(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        const { webhooks } = JSON.parse(resp.data.webhooks);
+        console.log(webhooks);
+        
+        const topics: any = {}
+        webhooks.forEach((topic: any) => {
+          topics[topic.topic] = topic
+        })
+        commit('setWebhooks', topics)
+      } else {
+        console.log('something went wrong');
+      }
+    }).catch(err => console.error(err))
+  }
+}
+
+export default actions
\ No newline at end of file
diff --git a/src/store/modules/webhooks/getters.ts b/src/store/modules/webhooks/getters.ts
new file mode 100644
index 00000000..7afca3ca
--- /dev/null
+++ b/src/store/modules/webhooks/getters.ts
@@ -0,0 +1,9 @@
+import { GetterTree } from "vuex";
+import RootState from "@/store/RootState";
+import WebhooksState from "./WebhooksState";
+
+const getters: GetterTree<WebhooksState, RootState> = {
+  fetchCachedWebhooks: (state) => state.cached
+}
+
+export default getters
\ No newline at end of file
diff --git a/src/store/modules/webhooks/index.ts b/src/store/modules/webhooks/index.ts
new file mode 100644
index 00000000..383e03d7
--- /dev/null
+++ b/src/store/modules/webhooks/index.ts
@@ -0,0 +1,22 @@
+import { Module } from 'vuex'
+import WebhooksState from './WebhooksState'
+import RootState from '@/store/RootState'
+import getters from './getters'
+import mutations from './mutations'
+import actions from './actions'
+
+const webhooksModule: Module<WebhooksState, RootState> = {
+  namespaced: true,
+  state: {
+    cached: {},
+    key: {
+      topic: "",
+      list: []
+    },
+  },
+  getters,
+  actions,
+  mutations,
+}
+
+export default webhooksModule
\ No newline at end of file
diff --git a/src/store/modules/webhooks/mutations-types.ts b/src/store/modules/webhooks/mutations-types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/store/modules/webhooks/mutations.ts b/src/store/modules/webhooks/mutations.ts
new file mode 100644
index 00000000..6fa9ab0b
--- /dev/null
+++ b/src/store/modules/webhooks/mutations.ts
@@ -0,0 +1,10 @@
+import { MutationTree } from "vuex";
+import WebhooksState from "./WebhooksState";
+
+const mutations: MutationTree<WebhooksState> = {
+  setWebhooks (state, payload: any) {
+    state.cached = payload
+  }
+}
+
+export default mutations
\ No newline at end of file
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 38ae2c11..ced1f86e 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -36,6 +36,28 @@
             </ion-item>
           </ion-card>
 
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ $t("Webhooks") }}</ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("New orders") }}</ion-label>
+              <ion-toggle slot="end" color="secondary"></ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Cancelled orders") }}</ion-label>
+              <ion-toggle slot="end" color="secondary"></ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Payment status") }}</ion-label>
+              <ion-toggle slot="end" color="secondary"></ion-toggle>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-label class="ion-text-wrap">{{ $t("Returns") }}</ion-label>
+              <ion-toggle slot="end" color="secondary"></ion-toggle>
+            </ion-item>
+          </ion-card>
+
           <ion-card>
             <ion-card-header>
               <ion-card-title>{{ $t("Upload") }}</ion-card-title>
diff --git a/src/views/Product.vue b/src/views/Product.vue
index b0f1d2f9..9fb54a73 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -33,11 +33,11 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
-              <ion-toggle slot="end" color="secondary"></ion-toggle>
+              <ion-toggle slot="end" :checked="isNewProducts()" color="secondary"></ion-toggle>
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" color="secondary"></ion-toggle>
+              <ion-toggle slot="end" :checked="isDeleteProducts" color="secondary"></ion-toggle>
             </ion-item>
           </ion-card>
         </section>
@@ -94,7 +94,9 @@ export default defineComponent({
     ...mapGetters({
       getJobStatus: 'job/getJobStatus',
       getTemporalExpr: 'job/getTemporalExpr',
-      getJob: 'job/getJob'
+      getJob: 'job/getJob',
+      shopifyConfigId: 'user/getShopifyConfigId',
+      fetchCachedWebhooks: 'webhooks/fetchCachedWebhooks'
     }),
   },
   data() {
@@ -106,7 +108,8 @@ export default defineComponent({
       currentJobStatus: '',
       freqType: '',
       isJobDetailAnimationCompleted: false,
-      isDesktop: isPlatform('desktop')
+      isDesktop: isPlatform('desktop'),
+      webhooksEnums: JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any
     }
   },
   mounted () {
@@ -116,8 +119,21 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
+    this.getWebhooks()
   },
   methods: {
+    async getWebhooks(){
+      await this.store.dispatch('webhooks/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
+      console.log(this.webhooksEnums.DELETE_PRODUCTS, this.fetchCachedWebhooks['products/delete'].topic);
+    },
+    isNewProducts(): boolean {
+      const status = this.fetchCachedWebhooks['products/create']
+      return status && status !== this.webhooksEnums['products/create']
+    },
+    isDeleteProducts(): boolean {
+      const status = this.fetchCachedWebhooks['products/delete']
+      return status && status !== this.webhooksEnums['products/delete']
+    },
     async viewJobConfiguration(id: string, title: string, status: string) {
       this.currentJob = this.getJob(this.jobEnums[id])
       this.title = title

From 97f97311b52ba5dbfe1157063439de4781a38ec0 Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Sun, 29 May 2022 21:46:59 +0530
Subject: [PATCH 04/28] Impproved: Login and naming convections in webhooks
 store and Products, Orders Pages

---
 src/store/modules/webhooks/actions.ts | 12 ++++++++----
 src/store/modules/webhooks/getters.ts |  2 +-
 src/store/modules/webhooks/index.ts   |  9 ++++++++-
 src/views/Orders.vue                  | 25 ++++++++++++++++++++-----
 src/views/Product.vue                 | 16 +++++-----------
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/store/modules/webhooks/actions.ts b/src/store/modules/webhooks/actions.ts
index f2214a39..84e05920 100644
--- a/src/store/modules/webhooks/actions.ts
+++ b/src/store/modules/webhooks/actions.ts
@@ -9,11 +9,15 @@ const actions: ActionTree<WebhooksState, RootState> = {
     await WebhooksService.fetchShopifyWebhooks(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         const { webhooks } = JSON.parse(resp.data.webhooks);
-        console.log(webhooks);
-        
+        const webhooksEnums = JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any
         const topics: any = {}
-        webhooks.forEach((topic: any) => {
-          topics[topic.topic] = topic
+        webhooks.forEach((webhook: any) => {
+          if (webhooksEnums['NEW_PRODUCTS'] === webhook.topic) topics['NEW_PRODUCTS'] = webhook
+          if (webhooksEnums['DELETE_PRODUCTS'] === webhook.topic) topics['DELETE_PRODUCTS'] = webhook
+          if (webhooksEnums['NEW_ORDERS'] === webhook.topic) topics['NEW_ORDERS'] = webhook
+          if (webhooksEnums['CANCELLED_ORDERS'] === webhook.topic) topics['CANCELLED_ORDERS'] = webhook
+          if (webhooksEnums['PAYMENT_STATUS'] === webhook.topic) topics['PAYMENT_STATUS'] = webhook
+          if (webhooksEnums['RETURNS'] === webhook.topic) topics['RETURNS'] = webhook
         })
         commit('setWebhooks', topics)
       } else {
diff --git a/src/store/modules/webhooks/getters.ts b/src/store/modules/webhooks/getters.ts
index 7afca3ca..c1a21ff1 100644
--- a/src/store/modules/webhooks/getters.ts
+++ b/src/store/modules/webhooks/getters.ts
@@ -3,7 +3,7 @@ import RootState from "@/store/RootState";
 import WebhooksState from "./WebhooksState";
 
 const getters: GetterTree<WebhooksState, RootState> = {
-  fetchCachedWebhooks: (state) => state.cached
+  getCachedWebhooks: (state) => state.cached
 }
 
 export default getters
\ No newline at end of file
diff --git a/src/store/modules/webhooks/index.ts b/src/store/modules/webhooks/index.ts
index 383e03d7..4042fcee 100644
--- a/src/store/modules/webhooks/index.ts
+++ b/src/store/modules/webhooks/index.ts
@@ -8,7 +8,14 @@ import actions from './actions'
 const webhooksModule: Module<WebhooksState, RootState> = {
   namespaced: true,
   state: {
-    cached: {},
+    cached: {
+      NEW_PRODUCTS: {},
+      DELETE_PRODUCTS: {},
+      NEW_ORDERS: {},
+      CANCELLED_ORDERS: {},
+      PAYMENT_STATUS: {},
+      RETURNS: {}
+    },
     key: {
       topic: "",
       list: []
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index ced1f86e..32a98170 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -42,19 +42,19 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New orders") }}</ion-label>
-              <ion-toggle slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isNewOrders()" slot="end" color="secondary"></ion-toggle>
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Cancelled orders") }}</ion-label>
-              <ion-toggle slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isCancelledOrders()" slot="end" color="secondary"></ion-toggle>
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Payment status") }}</ion-label>
-              <ion-toggle slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isPaymentStatus()" slot="end" color="secondary"></ion-toggle>
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Returns") }}</ion-label>
-              <ion-toggle slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isReturns()" slot="end" color="secondary"></ion-toggle>
             </ion-item>
           </ion-card>
 
@@ -214,6 +214,7 @@ export default defineComponent({
       jobEnums: JSON.parse(process.env?.VUE_APP_ODR_JOB_ENUMS as string) as any,
       batchJobEnums: JSON.parse(process.env?.VUE_APP_BATCH_JOB_ENUMS as string) as any,
       jobFrequencyType: JSON.parse(process.env?.VUE_APP_JOB_FREQUENCY_TYPE as string) as any,
+      webhooksEnums: JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any,
       currentJob: '' as any,
       title: 'New orders',
       currentJobStatus: '',
@@ -229,7 +230,8 @@ export default defineComponent({
       orderBatchJobs: "job/getOrderBatchJobs",
       shopifyConfigId: 'user/getShopifyConfigId',
       currentEComStore: 'user/getCurrentEComStore',
-      getTemporalExpr: 'job/getTemporalExpr'
+      getTemporalExpr: 'job/getTemporalExpr',
+      getCachedWebhooks: 'webhooks/getCachedWebhooks'
     }),
     promiseDateChanges(): boolean {
       const status = this.getJobStatus(this.jobEnums['NTS_PRMS_DT_CHNG']);
@@ -241,6 +243,18 @@ export default defineComponent({
     },
   },
   methods: {  
+    isNewOrders(): boolean {
+      return this.getCachedWebhooks['NEW_ORDERS']?.topic === this.webhooksEnums['NEW_ORDERS']
+    },
+    isCancelledOrders(): boolean {
+      return this.getCachedWebhooks['CANCELLED_ORDERS']?.topic === this.webhooksEnums['CANCELLED_ORDERS']
+    },
+    isPaymentStatus(): boolean {
+      return this.getCachedWebhooks['PAYMENT_STATUS']?.topic === this.webhooksEnums['PAYMENT_STATUS']
+    },
+    isReturns(): boolean {
+      return this.getCachedWebhooks['RETURNS']?.topic === this.webhooksEnums['RETURNS']
+    },
     async addBatch() {
       const batchmodal = await modalController.create({
         component: BatchModal
@@ -390,6 +404,7 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
+    this.store.dispatch('webhooks/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
   },
   setup() {
     const store = useStore();
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 9fb54a73..732af7bd 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -37,7 +37,7 @@
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isDeleteProducts" color="secondary"></ion-toggle>
+              <ion-toggle slot="end" :checked="isDeleteProducts()" color="secondary"></ion-toggle>
             </ion-item>
           </ion-card>
         </section>
@@ -96,7 +96,7 @@ export default defineComponent({
       getTemporalExpr: 'job/getTemporalExpr',
       getJob: 'job/getJob',
       shopifyConfigId: 'user/getShopifyConfigId',
-      fetchCachedWebhooks: 'webhooks/fetchCachedWebhooks'
+      getCachedWebhooks: 'webhooks/getCachedWebhooks'
     }),
   },
   data() {
@@ -119,20 +119,14 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
-    this.getWebhooks()
+    this.store.dispatch('webhooks/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})    
   },
   methods: {
-    async getWebhooks(){
-      await this.store.dispatch('webhooks/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
-      console.log(this.webhooksEnums.DELETE_PRODUCTS, this.fetchCachedWebhooks['products/delete'].topic);
-    },
     isNewProducts(): boolean {
-      const status = this.fetchCachedWebhooks['products/create']
-      return status && status !== this.webhooksEnums['products/create']
+      return this.getCachedWebhooks['NEW_PRODUCTS']?.topic === this.webhooksEnums['NEW_PRODUCTS']
     },
     isDeleteProducts(): boolean {
-      const status = this.fetchCachedWebhooks['products/delete']
-      return status && status !== this.webhooksEnums['products/delete']
+      return this.getCachedWebhooks['DELETE_PRODUCTS']?.topic === this.webhooksEnums['DELETE_PRODUCTS']
     },
     async viewJobConfiguration(id: string, title: string, status: string) {
       this.currentJob = this.getJob(this.jobEnums[id])

From e92f7bf17734ecab695ea90b951d8a9855be3e2c Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Mon, 30 May 2022 11:20:42 +0530
Subject: [PATCH 05/28] Improved: naming convenction, removed unnecessary code
 and other updations

---
 .../{WebhooksService.ts => WebhookService.ts}  |  2 +-
 src/store/modules/webhooks/actions.ts          | 11 +++++------
 src/store/modules/webhooks/mutations-types.ts  |  2 ++
 src/store/modules/webhooks/mutations.ts        |  3 ++-
 src/views/Orders.vue                           | 18 +++++++++---------
 src/views/Product.vue                          |  4 ++--
 6 files changed, 21 insertions(+), 19 deletions(-)
 rename src/services/{WebhooksService.ts => WebhookService.ts} (87%)

diff --git a/src/services/WebhooksService.ts b/src/services/WebhookService.ts
similarity index 87%
rename from src/services/WebhooksService.ts
rename to src/services/WebhookService.ts
index 56cd3621..c0b7a17d 100644
--- a/src/services/WebhooksService.ts
+++ b/src/services/WebhookService.ts
@@ -8,6 +8,6 @@ const fetchShopifyWebhooks = async (payload?: any): Promise <any>  => {
   });
 }
 
-export const WebhooksService = {
+export const WebhookService = {
   fetchShopifyWebhooks
 }
\ No newline at end of file
diff --git a/src/store/modules/webhooks/actions.ts b/src/store/modules/webhooks/actions.ts
index 84e05920..a1c5b649 100644
--- a/src/store/modules/webhooks/actions.ts
+++ b/src/store/modules/webhooks/actions.ts
@@ -1,17 +1,18 @@
 import { ActionTree } from "vuex";
 import RootState from "@/store/RootState";
 import WebhooksState from "./WebhooksState";
-import { WebhooksService } from "@/services/WebhooksService";
+import { WebhookService } from "@/services/WebhookService";
 import { hasError } from "@/utils";
+import * as types from './mutations-types'
 
 const actions: ActionTree<WebhooksState, RootState> = {
   async fetchWebhooks({ commit }, payload){
-    await WebhooksService.fetchShopifyWebhooks(payload).then(resp => {
+    await WebhookService.fetchShopifyWebhooks(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         const { webhooks } = JSON.parse(resp.data.webhooks);
         const webhooksEnums = JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any
         const topics: any = {}
-        webhooks.forEach((webhook: any) => {
+        webhooks.map((webhook: any) => {
           if (webhooksEnums['NEW_PRODUCTS'] === webhook.topic) topics['NEW_PRODUCTS'] = webhook
           if (webhooksEnums['DELETE_PRODUCTS'] === webhook.topic) topics['DELETE_PRODUCTS'] = webhook
           if (webhooksEnums['NEW_ORDERS'] === webhook.topic) topics['NEW_ORDERS'] = webhook
@@ -19,9 +20,7 @@ const actions: ActionTree<WebhooksState, RootState> = {
           if (webhooksEnums['PAYMENT_STATUS'] === webhook.topic) topics['PAYMENT_STATUS'] = webhook
           if (webhooksEnums['RETURNS'] === webhook.topic) topics['RETURNS'] = webhook
         })
-        commit('setWebhooks', topics)
-      } else {
-        console.log('something went wrong');
+        commit(types.WEBHOOK_UPDATED, topics)
       }
     }).catch(err => console.error(err))
   }
diff --git a/src/store/modules/webhooks/mutations-types.ts b/src/store/modules/webhooks/mutations-types.ts
index e69de29b..7d025b58 100644
--- a/src/store/modules/webhooks/mutations-types.ts
+++ b/src/store/modules/webhooks/mutations-types.ts
@@ -0,0 +1,2 @@
+export const SN_WEBHOOK = 'webhook'
+export const WEBHOOK_UPDATED = SN_WEBHOOK + 'SET_WEBHOOK'
\ No newline at end of file
diff --git a/src/store/modules/webhooks/mutations.ts b/src/store/modules/webhooks/mutations.ts
index 6fa9ab0b..93c3d9f2 100644
--- a/src/store/modules/webhooks/mutations.ts
+++ b/src/store/modules/webhooks/mutations.ts
@@ -1,8 +1,9 @@
 import { MutationTree } from "vuex";
 import WebhooksState from "./WebhooksState";
+import * as types from './mutations-types'
 
 const mutations: MutationTree<WebhooksState> = {
-  setWebhooks (state, payload: any) {
+  [types.WEBHOOK_UPDATED] (state, payload: any) {
     state.cached = payload
   }
 }
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 32a98170..14afb736 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -42,19 +42,19 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New orders") }}</ion-label>
-              <ion-toggle :checked="isNewOrders()" slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isNewOrders()" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Cancelled orders") }}</ion-label>
-              <ion-toggle :checked="isCancelledOrders()" slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isCancelledOrders()" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Payment status") }}</ion-label>
-              <ion-toggle :checked="isPaymentStatus()" slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isPaymentStatus()" slot="end" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Returns") }}</ion-label>
-              <ion-toggle :checked="isReturns()" slot="end" color="secondary"></ion-toggle>
+              <ion-toggle :checked="isReturns()" slot="end" color="secondary" />
             </ion-item>
           </ion-card>
 
@@ -214,7 +214,7 @@ export default defineComponent({
       jobEnums: JSON.parse(process.env?.VUE_APP_ODR_JOB_ENUMS as string) as any,
       batchJobEnums: JSON.parse(process.env?.VUE_APP_BATCH_JOB_ENUMS as string) as any,
       jobFrequencyType: JSON.parse(process.env?.VUE_APP_JOB_FREQUENCY_TYPE as string) as any,
-      webhooksEnums: JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any,
+      webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any,
       currentJob: '' as any,
       title: 'New orders',
       currentJobStatus: '',
@@ -244,16 +244,16 @@ export default defineComponent({
   },
   methods: {  
     isNewOrders(): boolean {
-      return this.getCachedWebhooks['NEW_ORDERS']?.topic === this.webhooksEnums['NEW_ORDERS']
+      return this.getCachedWebhooks['NEW_ORDERS']?.topic === this.webhookEnums['NEW_ORDERS']
     },
     isCancelledOrders(): boolean {
-      return this.getCachedWebhooks['CANCELLED_ORDERS']?.topic === this.webhooksEnums['CANCELLED_ORDERS']
+      return this.getCachedWebhooks['CANCELLED_ORDERS']?.topic === this.webhookEnums['CANCELLED_ORDERS']
     },
     isPaymentStatus(): boolean {
-      return this.getCachedWebhooks['PAYMENT_STATUS']?.topic === this.webhooksEnums['PAYMENT_STATUS']
+      return this.getCachedWebhooks['PAYMENT_STATUS']?.topic === this.webhookEnums['PAYMENT_STATUS']
     },
     isReturns(): boolean {
-      return this.getCachedWebhooks['RETURNS']?.topic === this.webhooksEnums['RETURNS']
+      return this.getCachedWebhooks['RETURNS']?.topic === this.webhookEnums['RETURNS']
     },
     async addBatch() {
       const batchmodal = await modalController.create({
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 732af7bd..ddc5c999 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -33,11 +33,11 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isNewProducts()" color="secondary"></ion-toggle>
+              <ion-toggle slot="end" :checked="isNewProducts()" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isDeleteProducts()" color="secondary"></ion-toggle>
+              <ion-toggle slot="end" :checked="isDeleteProducts()" color="secondary" />
             </ion-item>
           </ion-card>
         </section>

From 1f0c9305a4a5005f3eac8d64856946160b176d45 Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Mon, 30 May 2022 11:54:47 +0530
Subject: [PATCH 06/28] Improved: naming convenctions

---
 .env.example                                         |  2 +-
 src/store/index.ts                                   |  4 ++--
 .../modules/{webhooks => webhook}/WebhooksState.ts   |  0
 src/store/modules/{webhooks => webhook}/actions.ts   |  2 +-
 src/store/modules/{webhooks => webhook}/getters.ts   |  2 +-
 src/store/modules/{webhooks => webhook}/index.ts     |  0
 .../modules/{webhooks => webhook}/mutations-types.ts |  0
 src/store/modules/{webhooks => webhook}/mutations.ts |  0
 src/views/Orders.vue                                 | 12 ++++++------
 src/views/Product.vue                                |  8 ++++----
 10 files changed, 15 insertions(+), 15 deletions(-)
 rename src/store/modules/{webhooks => webhook}/WebhooksState.ts (100%)
 rename src/store/modules/{webhooks => webhook}/actions.ts (97%)
 rename src/store/modules/{webhooks => webhook}/getters.ts (82%)
 rename src/store/modules/{webhooks => webhook}/index.ts (100%)
 rename src/store/modules/{webhooks => webhook}/mutations-types.ts (100%)
 rename src/store/modules/{webhooks => webhook}/mutations.ts (100%)

diff --git a/.env.example b/.env.example
index de87f1ec..680c4c28 100644
--- a/.env.example
+++ b/.env.example
@@ -12,4 +12,4 @@ VUE_APP_JOB_TITLES={"JOB_IMP_PROD_NEW":"Import products","JOB_IMP_PROD_UPD":"Syn
 VUE_APP_INITIAL_JOB_TYPES={"JOB_IMP_PROD_NEW_BLK":"products","JOB_IMP_ORD_BLK":"orders"}
 VUE_APP_BASE_URL=
 VUE_APP_BATCH_JOB_ENUMS={"JOB_BKR_ORD_UNF":{"id":"JOB_BKR_ORD_UNF","facilityId":"_NA_","unfillable": true},"JOB_BKR_ORD":{"id": "JOB_BKR_ORD","facilityId":"_NA_","unfillable": false},"JOB_BKR_PREORD_UNF":{"id":"JOB_BKR_PREORD_UNF","facilityId":"PRE_ORDER_PARKING","unfillable":true},"JOB_BKR_PREORD":{"id":"JOB_BKR_PREORD","facilityId":"PRE_ORDER_PARKING","unfillable":false},"JOB_BKR_BACKORD_UNF":{"id":"JOB_BKR_BACKORD_UNF","facilityId":"BACKORDER_PARKING","unfillable":true},"JOB_BKR_BACKORD":{"id":"JOB_BKR_BACKORD","facilityId":"BACKORDER_PARKING","unfillable":false}}
-VUE_APP_WEBHOOKS_ENUMS={"NEW_PRODUCTS":"products/create","DELETE_PRODUCTS":"products/update","NEW_ORDERS":"orders/create","CANCELLED_ORDERS":"orders/cancelled","PAYMENT_STATUS":"orders/paid","RETURNS":""}
\ No newline at end of file
+VUE_APP_WEBHOOK_ENUMS={"NEW_PRODUCTS":"products/create","DELETE_PRODUCTS":"products/update","NEW_ORDERS":"orders/create","CANCELLED_ORDERS":"orders/cancelled","PAYMENT_STATUS":"orders/paid","RETURNS":""}
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index fef797b1..af2e8cdc 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -8,7 +8,7 @@ import userModule from './modules/user';
 import productModule from "./modules/product"
 import jobModule from "./modules/job"
 import utilModule from "./modules/util"
-import webhooksModule from "./modules/webhooks"
+import webhookModule from "./modules/webhook"
 
 
 // TODO check how to register it from the components only
@@ -37,7 +37,7 @@ const store = createStore<RootState>({
         'product': productModule,
         'job': jobModule,
         'util': utilModule,
-        'webhooks': webhooksModule
+        'webhooks': webhookModule
     },
 })
 
diff --git a/src/store/modules/webhooks/WebhooksState.ts b/src/store/modules/webhook/WebhooksState.ts
similarity index 100%
rename from src/store/modules/webhooks/WebhooksState.ts
rename to src/store/modules/webhook/WebhooksState.ts
diff --git a/src/store/modules/webhooks/actions.ts b/src/store/modules/webhook/actions.ts
similarity index 97%
rename from src/store/modules/webhooks/actions.ts
rename to src/store/modules/webhook/actions.ts
index a1c5b649..cb15bdca 100644
--- a/src/store/modules/webhooks/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -10,7 +10,7 @@ const actions: ActionTree<WebhooksState, RootState> = {
     await WebhookService.fetchShopifyWebhooks(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         const { webhooks } = JSON.parse(resp.data.webhooks);
-        const webhooksEnums = JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any
+        const webhooksEnums = JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
         const topics: any = {}
         webhooks.map((webhook: any) => {
           if (webhooksEnums['NEW_PRODUCTS'] === webhook.topic) topics['NEW_PRODUCTS'] = webhook
diff --git a/src/store/modules/webhooks/getters.ts b/src/store/modules/webhook/getters.ts
similarity index 82%
rename from src/store/modules/webhooks/getters.ts
rename to src/store/modules/webhook/getters.ts
index c1a21ff1..a539d98d 100644
--- a/src/store/modules/webhooks/getters.ts
+++ b/src/store/modules/webhook/getters.ts
@@ -3,7 +3,7 @@ import RootState from "@/store/RootState";
 import WebhooksState from "./WebhooksState";
 
 const getters: GetterTree<WebhooksState, RootState> = {
-  getCachedWebhooks: (state) => state.cached
+  getCachedWebhook: (state) => state.cached
 }
 
 export default getters
\ No newline at end of file
diff --git a/src/store/modules/webhooks/index.ts b/src/store/modules/webhook/index.ts
similarity index 100%
rename from src/store/modules/webhooks/index.ts
rename to src/store/modules/webhook/index.ts
diff --git a/src/store/modules/webhooks/mutations-types.ts b/src/store/modules/webhook/mutations-types.ts
similarity index 100%
rename from src/store/modules/webhooks/mutations-types.ts
rename to src/store/modules/webhook/mutations-types.ts
diff --git a/src/store/modules/webhooks/mutations.ts b/src/store/modules/webhook/mutations.ts
similarity index 100%
rename from src/store/modules/webhooks/mutations.ts
rename to src/store/modules/webhook/mutations.ts
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 14afb736..e1f2a366 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -214,7 +214,7 @@ export default defineComponent({
       jobEnums: JSON.parse(process.env?.VUE_APP_ODR_JOB_ENUMS as string) as any,
       batchJobEnums: JSON.parse(process.env?.VUE_APP_BATCH_JOB_ENUMS as string) as any,
       jobFrequencyType: JSON.parse(process.env?.VUE_APP_JOB_FREQUENCY_TYPE as string) as any,
-      webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any,
+      webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
       currentJob: '' as any,
       title: 'New orders',
       currentJobStatus: '',
@@ -231,7 +231,7 @@ export default defineComponent({
       shopifyConfigId: 'user/getShopifyConfigId',
       currentEComStore: 'user/getCurrentEComStore',
       getTemporalExpr: 'job/getTemporalExpr',
-      getCachedWebhooks: 'webhooks/getCachedWebhooks'
+      getCachedWebhook: 'webhooks/getCachedWebhook'
     }),
     promiseDateChanges(): boolean {
       const status = this.getJobStatus(this.jobEnums['NTS_PRMS_DT_CHNG']);
@@ -244,16 +244,16 @@ export default defineComponent({
   },
   methods: {  
     isNewOrders(): boolean {
-      return this.getCachedWebhooks['NEW_ORDERS']?.topic === this.webhookEnums['NEW_ORDERS']
+      return this.getCachedWebhook['NEW_ORDERS']?.topic === this.webhookEnums['NEW_ORDERS']
     },
     isCancelledOrders(): boolean {
-      return this.getCachedWebhooks['CANCELLED_ORDERS']?.topic === this.webhookEnums['CANCELLED_ORDERS']
+      return this.getCachedWebhook['CANCELLED_ORDERS']?.topic === this.webhookEnums['CANCELLED_ORDERS']
     },
     isPaymentStatus(): boolean {
-      return this.getCachedWebhooks['PAYMENT_STATUS']?.topic === this.webhookEnums['PAYMENT_STATUS']
+      return this.getCachedWebhook['PAYMENT_STATUS']?.topic === this.webhookEnums['PAYMENT_STATUS']
     },
     isReturns(): boolean {
-      return this.getCachedWebhooks['RETURNS']?.topic === this.webhookEnums['RETURNS']
+      return this.getCachedWebhook['RETURNS']?.topic === this.webhookEnums['RETURNS']
     },
     async addBatch() {
       const batchmodal = await modalController.create({
diff --git a/src/views/Product.vue b/src/views/Product.vue
index ddc5c999..bba7e58e 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -96,7 +96,7 @@ export default defineComponent({
       getTemporalExpr: 'job/getTemporalExpr',
       getJob: 'job/getJob',
       shopifyConfigId: 'user/getShopifyConfigId',
-      getCachedWebhooks: 'webhooks/getCachedWebhooks'
+      getCachedWebhook: 'webhooks/getCachedWebhook'
     }),
   },
   data() {
@@ -109,7 +109,7 @@ export default defineComponent({
       freqType: '',
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
-      webhooksEnums: JSON.parse(process.env?.VUE_APP_WEBHOOKS_ENUMS as string) as any
+      webhooksEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
     }
   },
   mounted () {
@@ -123,10 +123,10 @@ export default defineComponent({
   },
   methods: {
     isNewProducts(): boolean {
-      return this.getCachedWebhooks['NEW_PRODUCTS']?.topic === this.webhooksEnums['NEW_PRODUCTS']
+      return this.getCachedWebhook['NEW_PRODUCTS']?.topic === this.webhooksEnums['NEW_PRODUCTS']
     },
     isDeleteProducts(): boolean {
-      return this.getCachedWebhooks['DELETE_PRODUCTS']?.topic === this.webhooksEnums['DELETE_PRODUCTS']
+      return this.getCachedWebhook['DELETE_PRODUCTS']?.topic === this.webhooksEnums['DELETE_PRODUCTS']
     },
     async viewJobConfiguration(id: string, title: string, status: string) {
       this.currentJob = this.getJob(this.jobEnums[id])

From 446957cdbaa6e97d544bd8a1341bd50ecd6f18d3 Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Mon, 30 May 2022 12:14:38 +0530
Subject: [PATCH 07/28] Imporve: Removed s from webhooks

---
 src/store/index.ts                                     |  2 +-
 .../webhook/{WebhooksState.ts => WebhookState.ts}      |  2 +-
 src/store/modules/webhook/actions.ts                   |  4 ++--
 src/store/modules/webhook/getters.ts                   |  4 ++--
 src/store/modules/webhook/index.ts                     |  6 +++---
 src/store/modules/webhook/mutations.ts                 |  4 ++--
 src/views/Orders.vue                                   |  4 ++--
 src/views/Product.vue                                  | 10 +++++-----
 8 files changed, 18 insertions(+), 18 deletions(-)
 rename src/store/modules/webhook/{WebhooksState.ts => WebhookState.ts} (63%)

diff --git a/src/store/index.ts b/src/store/index.ts
index af2e8cdc..f100639e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -37,7 +37,7 @@ const store = createStore<RootState>({
         'product': productModule,
         'job': jobModule,
         'util': utilModule,
-        'webhooks': webhookModule
+        'webhook': webhookModule
     },
 })
 
diff --git a/src/store/modules/webhook/WebhooksState.ts b/src/store/modules/webhook/WebhookState.ts
similarity index 63%
rename from src/store/modules/webhook/WebhooksState.ts
rename to src/store/modules/webhook/WebhookState.ts
index cc8df15d..4eccdf18 100644
--- a/src/store/modules/webhook/WebhooksState.ts
+++ b/src/store/modules/webhook/WebhookState.ts
@@ -1,4 +1,4 @@
-export default interface WebhooksState {
+export default interface WebhookState {
   cached: Object
   key: {
     topic: string,
diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index cb15bdca..67393aea 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -1,11 +1,11 @@
 import { ActionTree } from "vuex";
 import RootState from "@/store/RootState";
-import WebhooksState from "./WebhooksState";
+import WebhookState from "./WebhookState";
 import { WebhookService } from "@/services/WebhookService";
 import { hasError } from "@/utils";
 import * as types from './mutations-types'
 
-const actions: ActionTree<WebhooksState, RootState> = {
+const actions: ActionTree<WebhookState, RootState> = {
   async fetchWebhooks({ commit }, payload){
     await WebhookService.fetchShopifyWebhooks(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
diff --git a/src/store/modules/webhook/getters.ts b/src/store/modules/webhook/getters.ts
index a539d98d..c259e03a 100644
--- a/src/store/modules/webhook/getters.ts
+++ b/src/store/modules/webhook/getters.ts
@@ -1,8 +1,8 @@
 import { GetterTree } from "vuex";
 import RootState from "@/store/RootState";
-import WebhooksState from "./WebhooksState";
+import WebhookState from "./WebhookState";
 
-const getters: GetterTree<WebhooksState, RootState> = {
+const getters: GetterTree<WebhookState, RootState> = {
   getCachedWebhook: (state) => state.cached
 }
 
diff --git a/src/store/modules/webhook/index.ts b/src/store/modules/webhook/index.ts
index 4042fcee..4d2249e6 100644
--- a/src/store/modules/webhook/index.ts
+++ b/src/store/modules/webhook/index.ts
@@ -1,11 +1,11 @@
 import { Module } from 'vuex'
-import WebhooksState from './WebhooksState'
+import WebhookState from './WebhookState'
 import RootState from '@/store/RootState'
 import getters from './getters'
 import mutations from './mutations'
 import actions from './actions'
 
-const webhooksModule: Module<WebhooksState, RootState> = {
+const webhookModule: Module<WebhookState, RootState> = {
   namespaced: true,
   state: {
     cached: {
@@ -26,4 +26,4 @@ const webhooksModule: Module<WebhooksState, RootState> = {
   mutations,
 }
 
-export default webhooksModule
\ No newline at end of file
+export default webhookModule
\ No newline at end of file
diff --git a/src/store/modules/webhook/mutations.ts b/src/store/modules/webhook/mutations.ts
index 93c3d9f2..e8dca8f1 100644
--- a/src/store/modules/webhook/mutations.ts
+++ b/src/store/modules/webhook/mutations.ts
@@ -1,8 +1,8 @@
 import { MutationTree } from "vuex";
-import WebhooksState from "./WebhooksState";
+import WebhookState from "./WebhookState";
 import * as types from './mutations-types'
 
-const mutations: MutationTree<WebhooksState> = {
+const mutations: MutationTree<WebhookState> = {
   [types.WEBHOOK_UPDATED] (state, payload: any) {
     state.cached = payload
   }
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index e1f2a366..7399c971 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -231,7 +231,7 @@ export default defineComponent({
       shopifyConfigId: 'user/getShopifyConfigId',
       currentEComStore: 'user/getCurrentEComStore',
       getTemporalExpr: 'job/getTemporalExpr',
-      getCachedWebhook: 'webhooks/getCachedWebhook'
+      getCachedWebhook: 'webhook/getCachedWebhook'
     }),
     promiseDateChanges(): boolean {
       const status = this.getJobStatus(this.jobEnums['NTS_PRMS_DT_CHNG']);
@@ -404,7 +404,7 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
-    this.store.dispatch('webhooks/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
+    this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
   },
   setup() {
     const store = useStore();
diff --git a/src/views/Product.vue b/src/views/Product.vue
index bba7e58e..cae9775a 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -96,7 +96,7 @@ export default defineComponent({
       getTemporalExpr: 'job/getTemporalExpr',
       getJob: 'job/getJob',
       shopifyConfigId: 'user/getShopifyConfigId',
-      getCachedWebhook: 'webhooks/getCachedWebhook'
+      getCachedWebhook: 'webhook/getCachedWebhook'
     }),
   },
   data() {
@@ -109,7 +109,7 @@ export default defineComponent({
       freqType: '',
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
-      webhooksEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
+      webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
     }
   },
   mounted () {
@@ -119,14 +119,14 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
-    this.store.dispatch('webhooks/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})    
+    this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})    
   },
   methods: {
     isNewProducts(): boolean {
-      return this.getCachedWebhook['NEW_PRODUCTS']?.topic === this.webhooksEnums['NEW_PRODUCTS']
+      return this.getCachedWebhook['NEW_PRODUCTS']?.topic === this.webhookEnums['NEW_PRODUCTS']
     },
     isDeleteProducts(): boolean {
-      return this.getCachedWebhook['DELETE_PRODUCTS']?.topic === this.webhooksEnums['DELETE_PRODUCTS']
+      return this.getCachedWebhook['DELETE_PRODUCTS']?.topic === this.webhookEnums['DELETE_PRODUCTS']
     },
     async viewJobConfiguration(id: string, title: string, status: string) {
       this.currentJob = this.getJob(this.jobEnums[id])

From 96733de9620553ff4ff8743574adb3ca5ca162e8 Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Mon, 30 May 2022 18:21:34 +0530
Subject: [PATCH 08/28] Improved: naming convenctions

---
 src/store/modules/webhook/actions.ts         | 14 +++++++-------
 src/store/modules/webhook/mutations-types.ts |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 67393aea..72d762c0 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -10,15 +10,15 @@ const actions: ActionTree<WebhookState, RootState> = {
     await WebhookService.fetchShopifyWebhooks(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         const { webhooks } = JSON.parse(resp.data.webhooks);
-        const webhooksEnums = JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
+        const webhookEnums = JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
         const topics: any = {}
         webhooks.map((webhook: any) => {
-          if (webhooksEnums['NEW_PRODUCTS'] === webhook.topic) topics['NEW_PRODUCTS'] = webhook
-          if (webhooksEnums['DELETE_PRODUCTS'] === webhook.topic) topics['DELETE_PRODUCTS'] = webhook
-          if (webhooksEnums['NEW_ORDERS'] === webhook.topic) topics['NEW_ORDERS'] = webhook
-          if (webhooksEnums['CANCELLED_ORDERS'] === webhook.topic) topics['CANCELLED_ORDERS'] = webhook
-          if (webhooksEnums['PAYMENT_STATUS'] === webhook.topic) topics['PAYMENT_STATUS'] = webhook
-          if (webhooksEnums['RETURNS'] === webhook.topic) topics['RETURNS'] = webhook
+          if (webhookEnums['NEW_PRODUCTS'] === webhook.topic) topics['NEW_PRODUCTS'] = webhook
+          if (webhookEnums['DELETE_PRODUCTS'] === webhook.topic) topics['DELETE_PRODUCTS'] = webhook
+          if (webhookEnums['NEW_ORDERS'] === webhook.topic) topics['NEW_ORDERS'] = webhook
+          if (webhookEnums['CANCELLED_ORDERS'] === webhook.topic) topics['CANCELLED_ORDERS'] = webhook
+          if (webhookEnums['PAYMENT_STATUS'] === webhook.topic) topics['PAYMENT_STATUS'] = webhook
+          if (webhookEnums['RETURNS'] === webhook.topic) topics['RETURNS'] = webhook
         })
         commit(types.WEBHOOK_UPDATED, topics)
       }
diff --git a/src/store/modules/webhook/mutations-types.ts b/src/store/modules/webhook/mutations-types.ts
index 7d025b58..7acbf857 100644
--- a/src/store/modules/webhook/mutations-types.ts
+++ b/src/store/modules/webhook/mutations-types.ts
@@ -1,2 +1,2 @@
 export const SN_WEBHOOK = 'webhook'
-export const WEBHOOK_UPDATED = SN_WEBHOOK + 'SET_WEBHOOK'
\ No newline at end of file
+export const WEBHOOK_UPDATED = SN_WEBHOOK + '/WEBHOOK_UPDATED'
\ No newline at end of file

From d377c3ca4bbb453b45a53769b34a97385e0de9e8 Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Tue, 31 May 2022 12:33:02 +0530
Subject: [PATCH 09/28] Implemented: Webhook update functionality flow

---
 src/services/WebhookService.ts               | 20 +++++++++++++++++++-
 src/store/modules/webhook/actions.ts         | 12 ++++++++++++
 src/store/modules/webhook/mutations-types.ts |  3 ++-
 src/store/modules/webhook/mutations.ts       |  3 +++
 src/views/Orders.vue                         | 12 ++++++++----
 src/views/Product.vue                        |  3 +++
 6 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/services/WebhookService.ts b/src/services/WebhookService.ts
index c0b7a17d..6f7df477 100644
--- a/src/services/WebhookService.ts
+++ b/src/services/WebhookService.ts
@@ -8,6 +8,24 @@ const fetchShopifyWebhooks = async (payload?: any): Promise <any>  => {
   });
 }
 
+const updateWebhook =async (payload?: any): Promise <any> => {
+  // return api({
+  //   url: 'updation url',
+  //   methood: 'post',
+  //   data: payload
+  // })
+}
+
+const deleteWebhook = async (payload?: any): Promise <any> => {
+  return api({
+    url: '',
+    method: '',
+    data: payload
+  })
+}
+
 export const WebhookService = {
-  fetchShopifyWebhooks
+  fetchShopifyWebhooks,
+  updateWebhook,
+  deleteWebhook
 }
\ No newline at end of file
diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 72d762c0..08278994 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -23,6 +23,18 @@ const actions: ActionTree<WebhookState, RootState> = {
         commit(types.WEBHOOK_UPDATED, topics)
       }
     }).catch(err => console.error(err))
+  },
+  async updateWebhook({ commit }, payload: any) {
+    await WebhookService.updateWebhook(payload).then(resp => {
+      console.log(resp);
+      commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+    })  
+  },
+  async deleteWebhook({ commit }, payload: any) {
+    await WebhookService.deleteWebhook(payload).then(resp => {
+      console.log(resp);
+      commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+    })  
   }
 }
 
diff --git a/src/store/modules/webhook/mutations-types.ts b/src/store/modules/webhook/mutations-types.ts
index 7acbf857..43ba2242 100644
--- a/src/store/modules/webhook/mutations-types.ts
+++ b/src/store/modules/webhook/mutations-types.ts
@@ -1,2 +1,3 @@
 export const SN_WEBHOOK = 'webhook'
-export const WEBHOOK_UPDATED = SN_WEBHOOK + '/WEBHOOK_UPDATED'
\ No newline at end of file
+export const WEBHOOK_UPDATED = SN_WEBHOOK + '/WEBHOOK_UPDATED'
+export const WEBHOOK_CURRENT_UPDATED = SN_WEBHOOK + '/WEBHOOK_CURRENT_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/webhook/mutations.ts b/src/store/modules/webhook/mutations.ts
index e8dca8f1..95dc15a2 100644
--- a/src/store/modules/webhook/mutations.ts
+++ b/src/store/modules/webhook/mutations.ts
@@ -5,6 +5,9 @@ import * as types from './mutations-types'
 const mutations: MutationTree<WebhookState> = {
   [types.WEBHOOK_UPDATED] (state, payload: any) {
     state.cached = payload
+  },
+  [types.WEBHOOK_CURRENT_UPDATED] (state, payload: any) {
+    // state.cached[payload[webhookEnum]] = payload.webhook
   }
 }
 
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 7399c971..efb15409 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -42,19 +42,19 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New orders") }}</ion-label>
-              <ion-toggle :checked="isNewOrders()" slot="end" color="secondary" />
+              <ion-toggle :checked="isNewOrders()" @ionChange="updateWebhook(this.webhookEnums['NEW_ORDERS'], $event.target.checked)" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Cancelled orders") }}</ion-label>
-              <ion-toggle :checked="isCancelledOrders()" slot="end" color="secondary" />
+              <ion-toggle :checked="isCancelledOrders()" @ionChange="updateWebhook(this.webhookEnums['CANCELLED_ORDERS'], $event.target.checked)" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Payment status") }}</ion-label>
-              <ion-toggle :checked="isPaymentStatus()" slot="end" color="secondary" />
+              <ion-toggle :checked="isPaymentStatus()" @ionChange="updateWebhook(this.webhookEnums['PAYMENT_STATUS'], $event.target.checked)" slot="end" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Returns") }}</ion-label>
-              <ion-toggle :checked="isReturns()" slot="end" color="secondary" />
+              <ion-toggle :checked="isReturns()" @ionChange="updateWebhook(this.webhookEnums['RETURNS'], $event.target.checked)" slot="end" color="secondary" />
             </ion-item>
           </ion-card>
 
@@ -243,6 +243,10 @@ export default defineComponent({
     },
   },
   methods: {  
+    updateWebhook(paload: any ,status: any){
+      console.log(paload, status);
+      status ? this.store.dispatch('webhook/updateWebhook', paload) : this.store.dispatch('webhook/deleteWebhook', paload)
+    },
     isNewOrders(): boolean {
       return this.getCachedWebhook['NEW_ORDERS']?.topic === this.webhookEnums['NEW_ORDERS']
     },
diff --git a/src/views/Product.vue b/src/views/Product.vue
index cae9775a..8ac7efbb 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -122,6 +122,9 @@ export default defineComponent({
     this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})    
   },
   methods: {
+    updateWebhook(status: string){
+      this.store.dispatch('webhook/fetchWebhooks', status)
+    },
     isNewProducts(): boolean {
       return this.getCachedWebhook['NEW_PRODUCTS']?.topic === this.webhookEnums['NEW_PRODUCTS']
     },

From 136e5939b930a99c21bad0c87dc410497c9b87ea Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Tue, 31 May 2022 19:09:09 +0530
Subject: [PATCH 10/28] Improved: Logic for storing webhooks in store ann
 Implemented: webservices for subscription and unsubscription

---
 src/services/WebhookService.ts         | 69 +++++++++++++++----
 src/store/modules/webhook/actions.ts   | 95 +++++++++++++++++++++-----
 src/store/modules/webhook/index.ts     |  9 +--
 src/store/modules/webhook/mutations.ts |  5 +-
 src/views/Orders.vue                   | 40 +++++++----
 src/views/Product.vue                  | 19 ++++--
 6 files changed, 179 insertions(+), 58 deletions(-)

diff --git a/src/services/WebhookService.ts b/src/services/WebhookService.ts
index 6f7df477..5ae93480 100644
--- a/src/services/WebhookService.ts
+++ b/src/services/WebhookService.ts
@@ -1,6 +1,6 @@
 import api from '@/api'
 
-const fetchShopifyWebhooks = async (payload?: any): Promise <any>  => {
+const fetchShopifyWebhooks = async (payload?:  any): Promise <any>  => {
   return api({
     url: "/service/getShopifyWebhooks",
     method: "post",
@@ -8,24 +8,69 @@ const fetchShopifyWebhooks = async (payload?: any): Promise <any>  => {
   });
 }
 
-const updateWebhook =async (payload?: any): Promise <any> => {
-  // return api({
-  //   url: 'updation url',
-  //   methood: 'post',
-  //   data: payload
-  // })
+const subscribeNewOrderWebhook = async (payload?: any): Promise <any> => {
+  return api ({
+    url: '',
+    method: 'post',
+    data: payload
+  })
 }
 
-const deleteWebhook = async (payload?: any): Promise <any> => {
-  return api({
+const subscribeCancelledOrderWebhook = async (payload?: any): Promise <any> => {
+  return api ({
+    url: '',
+    method: 'post',
+    data: payload
+  })
+}
+
+const subscribePaymentStatusWebhook = async (payload?: any): Promise <any> => {
+  return api ({
+    url: '',
+    method: 'post',
+    data: payload
+  })
+}
+
+const subscribeReturnWebhook = async (payload?: any): Promise <any> => {
+  return api ({
     url: '',
-    method: '',
+    method: 'post',
+    data: payload
+  })
+}
+
+const subscribeNewProductsWebhook = async (payload?: any): Promise <any> => {
+  return api ({
+    url: '',
+    method: 'post',
+    data: payload
+  })
+}
+
+const subscribeDeleteProductsWebhook = async (payload?: any): Promise <any> => {
+  return api ({
+    url: 'service/subscribeProductDeleteWebhook',
+    method: 'post',
+    data: payload
+  })
+}
+
+const unsubscribe = async (payload?: any): Promise <any> => {
+  return api ({
+    url: 'service/removeShopifyWebhook',
+    method: 'post',
     data: payload
   })
 }
 
 export const WebhookService = {
   fetchShopifyWebhooks,
-  updateWebhook,
-  deleteWebhook
+  subscribeNewOrderWebhook,
+  subscribeCancelledOrderWebhook,
+  subscribePaymentStatusWebhook,
+  subscribeReturnWebhook,
+  subscribeNewProductsWebhook,
+  subscribeDeleteProductsWebhook,
+  unsubscribe
 }
\ No newline at end of file
diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 08278994..30018352 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -2,39 +2,98 @@ import { ActionTree } from "vuex";
 import RootState from "@/store/RootState";
 import WebhookState from "./WebhookState";
 import { WebhookService } from "@/services/WebhookService";
-import { hasError } from "@/utils";
+import { hasError, showToast } from "@/utils";
 import * as types from './mutations-types'
+import { translate } from '@/i18n'
 
 const actions: ActionTree<WebhookState, RootState> = {
   async fetchWebhooks({ commit }, payload){
     await WebhookService.fetchShopifyWebhooks(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         const { webhooks } = JSON.parse(resp.data.webhooks);
-        const webhookEnums = JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
         const topics: any = {}
-        webhooks.map((webhook: any) => {
-          if (webhookEnums['NEW_PRODUCTS'] === webhook.topic) topics['NEW_PRODUCTS'] = webhook
-          if (webhookEnums['DELETE_PRODUCTS'] === webhook.topic) topics['DELETE_PRODUCTS'] = webhook
-          if (webhookEnums['NEW_ORDERS'] === webhook.topic) topics['NEW_ORDERS'] = webhook
-          if (webhookEnums['CANCELLED_ORDERS'] === webhook.topic) topics['CANCELLED_ORDERS'] = webhook
-          if (webhookEnums['PAYMENT_STATUS'] === webhook.topic) topics['PAYMENT_STATUS'] = webhook
-          if (webhookEnums['RETURNS'] === webhook.topic) topics['RETURNS'] = webhook
+        webhooks.forEach((topic: any) => {
+          topics[topic.topic] = topic
         })
         commit(types.WEBHOOK_UPDATED, topics)
+        console.log(topics);
       }
     }).catch(err => console.error(err))
   },
-  async updateWebhook({ commit }, payload: any) {
-    await WebhookService.updateWebhook(payload).then(resp => {
-      console.log(resp);
-      commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+  async unsubscribeWebhook({ commit, state }, payload: any) {
+    console.log(payload);
+    
+    await WebhookService.unsubscribe(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        console.log(resp);
+        return true
+      }
+    }).catch(() => {
+      showToast(translate("Something went wrong"));
+      console.log(state.cached);
+      return false
     })  
   },
-  async deleteWebhook({ commit }, payload: any) {
-    await WebhookService.deleteWebhook(payload).then(resp => {
-      console.log(resp);
-      commit(types.WEBHOOK_CURRENT_UPDATED, resp)
-    })  
+  // Webhook Subscription Actions
+  async updateNewOrder({ commit }, payload: any) {
+    console.log('New Order');
+
+    await WebhookService.subscribeNewOrderWebhook(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        console.log(resp);
+        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+      }
+    })
+  },
+  async updateCancelledOrder({ commit }, payload: any) {
+    console.log('Cancel Order');
+
+    await WebhookService.subscribeCancelledOrderWebhook(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        console.log(resp);
+        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+      }
+    })
+  },
+  async updatePaymentStatus({ commit }, payload: any) {
+    console.log('Payment Status');
+
+    await WebhookService.subscribeNewOrderWebhook(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        console.log(resp);
+        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+      }
+    })
+  },
+  async updateReturns({ commit }, payload: any) {
+    console.log('Returns');
+
+    await WebhookService.subscribeCancelledOrderWebhook(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        console.log(resp);
+        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+      }
+    })
+  },
+  async updateDeleteProducts({ commit }, payload: any) {
+    console.log('New Products');
+
+    await WebhookService.subscribeDeleteProductsWebhook(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        console.log(resp);
+        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+      }
+    })
+  },
+  async updateNewProducts({ commit }, payload: any) {
+    console.log('Delete Products');
+
+    await WebhookService.subscribeNewProductsWebhook(payload).then(resp => {
+      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        console.log(resp);
+        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
+      }
+    })
   }
 }
 
diff --git a/src/store/modules/webhook/index.ts b/src/store/modules/webhook/index.ts
index 4d2249e6..f444f8bd 100644
--- a/src/store/modules/webhook/index.ts
+++ b/src/store/modules/webhook/index.ts
@@ -8,14 +8,7 @@ import actions from './actions'
 const webhookModule: Module<WebhookState, RootState> = {
   namespaced: true,
   state: {
-    cached: {
-      NEW_PRODUCTS: {},
-      DELETE_PRODUCTS: {},
-      NEW_ORDERS: {},
-      CANCELLED_ORDERS: {},
-      PAYMENT_STATUS: {},
-      RETURNS: {}
-    },
+    cached: {},
     key: {
       topic: "",
       list: []
diff --git a/src/store/modules/webhook/mutations.ts b/src/store/modules/webhook/mutations.ts
index 95dc15a2..1e1e0cac 100644
--- a/src/store/modules/webhook/mutations.ts
+++ b/src/store/modules/webhook/mutations.ts
@@ -6,8 +6,9 @@ const mutations: MutationTree<WebhookState> = {
   [types.WEBHOOK_UPDATED] (state, payload: any) {
     state.cached = payload
   },
-  [types.WEBHOOK_CURRENT_UPDATED] (state, payload: any) {
-    // state.cached[payload[webhookEnum]] = payload.webhook
+  [types.WEBHOOK_CURRENT_UPDATED] (state, payload: object) {
+    state.cached = payload
+    
   }
 }
 
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index efb15409..7ead1fd8 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -42,19 +42,19 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New orders") }}</ion-label>
-              <ion-toggle :checked="isNewOrders()" @ionChange="updateWebhook(this.webhookEnums['NEW_ORDERS'], $event.target.checked)" slot="end" color="secondary" />
+              <ion-toggle :checked="isNewOrders()" @ionChange="$event.target.checked ? subscribeNewOrdersWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_ORDERS'])" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Cancelled orders") }}</ion-label>
-              <ion-toggle :checked="isCancelledOrders()" @ionChange="updateWebhook(this.webhookEnums['CANCELLED_ORDERS'], $event.target.checked)" slot="end" color="secondary" />
+              <ion-toggle :checked="isCancelledOrders()" @ionChange="$event.target.checked ? subscribeCancelledOrdersWebhook() : unsubscribeWebhook(this.webhookEnums['CANCELLED_ORDERS'])" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Payment status") }}</ion-label>
-              <ion-toggle :checked="isPaymentStatus()" @ionChange="updateWebhook(this.webhookEnums['PAYMENT_STATUS'], $event.target.checked)" slot="end" color="secondary" />
+              <ion-toggle :checked="isPaymentStatus()" @ionChange="$event.target.checked ? subscribePaymentStatusWebhook() : unsubscribeWebhook(this.webhookEnums['PAYMENT_STATUS'])" slot="end" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Returns") }}</ion-label>
-              <ion-toggle :checked="isReturns()" @ionChange="updateWebhook(this.webhookEnums['RETURNS'], $event.target.checked)" slot="end" color="secondary" />
+              <ion-toggle :checked="isReturns()" @ionChange="$event.target.checked ? subscribeReturnsWebhook() : unsubscribeWebhook(this.webhookEnums['RETURNS'])" slot="end" color="secondary" />
             </ion-item>
           </ion-card>
 
@@ -242,22 +242,38 @@ export default defineComponent({
       return status && status !== "SERVICE_DRAFT";
     },
   },
-  methods: {  
-    updateWebhook(paload: any ,status: any){
-      console.log(paload, status);
-      status ? this.store.dispatch('webhook/updateWebhook', paload) : this.store.dispatch('webhook/deleteWebhook', paload)
+  methods: {
+    updateWebhook(paload: any, isStatus: any){
+      const webhookId = this.getCachedWebhook["PAYMENT_STATUS"]?.id
+      isStatus ? this.store.dispatch('webhook/updateNewOrder', { shopifyConfigId: this.shopifyConfigId }) : this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId , shopifyConfigId: this.shopifyConfigId })
+    },
+    subscribeNewOrdersWebhook(){
+      this.store.dispatch('webhook/updateNewOrder', {shopifyConfigId: this.shopifyConfigId })
+    },
+    subscribeCancelledOrdersWebhook(){
+      this.store.dispatch('webhook/updateCancelledOrder', {shopifyConfigId: this.shopifyConfigId })
+    },
+    subscribePaymentStatusWebhook(){
+      this.store.dispatch('webhook/updatePaymentStatus', {shopifyConfigId: this.shopifyConfigId })
+    },
+    subscribeReturnsWebhook(){
+      this.store.dispatch('webhook/updateReturns', {shopifyConfigId: this.shopifyConfigId })
+    },
+    unsubscribeWebhook(webhookEnum: string){
+      const webhookId = this.getCachedWebhook[webhookEnum]?.id
+      this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId, shopifyConfigId: this.shopifyConfigId })
     },
     isNewOrders(): boolean {
-      return this.getCachedWebhook['NEW_ORDERS']?.topic === this.webhookEnums['NEW_ORDERS']
+      return this.getCachedWebhook[this.webhookEnums['NEW_ORDERS']]?.topic === this.webhookEnums['NEW_ORDERS']
     },
     isCancelledOrders(): boolean {
-      return this.getCachedWebhook['CANCELLED_ORDERS']?.topic === this.webhookEnums['CANCELLED_ORDERS']
+      return this.getCachedWebhook[this.webhookEnums['CANCELLED_ORDERS']]?.topic === this.webhookEnums['CANCELLED_ORDERS']
     },
     isPaymentStatus(): boolean {
-      return this.getCachedWebhook['PAYMENT_STATUS']?.topic === this.webhookEnums['PAYMENT_STATUS']
+      return this.getCachedWebhook[this.webhookEnums['PAYMENT_STATUS']]?.topic === this.webhookEnums['PAYMENT_STATUS']
     },
     isReturns(): boolean {
-      return this.getCachedWebhook['RETURNS']?.topic === this.webhookEnums['RETURNS']
+      return this.getCachedWebhook[this.webhookEnums['RETURNS']]?.topic === this.webhookEnums['RETURNS']
     },
     async addBatch() {
       const batchmodal = await modalController.create({
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 8ac7efbb..bb6716fc 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -33,11 +33,11 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isNewProducts()" color="secondary" />
+              <ion-toggle slot="end" :checked="isNewProducts()" @ionChange="$event.target.checked ? subscribeNewProductsWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_PRODUCTS'])" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isDeleteProducts()" color="secondary" />
+              <ion-toggle slot="end" :checked="isDeleteProducts()" @ionChange="$event.target.checked ? subscribeDeleteProductsWebhook() : unsubscribeWebhook(this.webhookEnums['DELETE_PRODUCTS'])" color="secondary" />
             </ion-item>
           </ion-card>
         </section>
@@ -122,14 +122,21 @@ export default defineComponent({
     this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})    
   },
   methods: {
-    updateWebhook(status: string){
-      this.store.dispatch('webhook/fetchWebhooks', status)
+    subscribeNewProductsWebhook(){
+      this.store.dispatch('webhook/updateNewProducts', {shopifyConfigId: this.shopifyConfigId })
+    },
+    subscribeDeleteProductsWebhook(){
+      this.store.dispatch('webhook/updateDeleteProducts', {shopifyConfigId: this.shopifyConfigId })
+    },
+    unsubscribeWebhook(webhookEnum: string){
+      const webhookId = this.getCachedWebhook[webhookEnum]?.id
+      this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId, shopifyConfigId: this.shopifyConfigId })
     },
     isNewProducts(): boolean {
-      return this.getCachedWebhook['NEW_PRODUCTS']?.topic === this.webhookEnums['NEW_PRODUCTS']
+      return this.getCachedWebhook[this.webhookEnums['NEW_PRODUCTS']]?.topic === this.webhookEnums['NEW_PRODUCTS']
     },
     isDeleteProducts(): boolean {
-      return this.getCachedWebhook['DELETE_PRODUCTS']?.topic === this.webhookEnums['DELETE_PRODUCTS']
+      return this.getCachedWebhook[this.webhookEnums['DELETE_PRODUCTS']]?.topic === this.webhookEnums['DELETE_PRODUCTS']
     },
     async viewJobConfiguration(id: string, title: string, status: string) {
       this.currentJob = this.getJob(this.jobEnums[id])

From 53e4cc2aa1c033cf525141dc251c9bcd864b35c0 Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Wed, 1 Jun 2022 13:28:40 +0530
Subject: [PATCH 11/28] Issue: currently working on it

---
 src/store/modules/webhook/actions.ts |  7 ++++---
 src/views/Product.vue                | 28 +++++++++++++++++-----------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 30018352..19ba67b2 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -22,8 +22,7 @@ const actions: ActionTree<WebhookState, RootState> = {
   },
   async unsubscribeWebhook({ commit, state }, payload: any) {
     console.log(payload);
-    
-    await WebhookService.unsubscribe(payload).then(resp => {
+    const status = await WebhookService.unsubscribe(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         console.log(resp);
         return true
@@ -31,8 +30,10 @@ const actions: ActionTree<WebhookState, RootState> = {
     }).catch(() => {
       showToast(translate("Something went wrong"));
       console.log(state.cached);
+      WebhookService.unsubscribe(payload)
       return false
-    })  
+    })
+    return status
   },
   // Webhook Subscription Actions
   async updateNewOrder({ commit }, payload: any) {
diff --git a/src/views/Product.vue b/src/views/Product.vue
index bb6716fc..4048febb 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -33,11 +33,11 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isNewProducts()" @ionChange="$event.target.checked ? subscribeNewProductsWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_PRODUCTS'])" color="secondary" />
+              <ion-toggle slot="end" :checked="isNewProducts" @ionChange.prevent="$event.target.checked ? subscribeNewProductsWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_PRODUCTS'], $event['detail'].checked)" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isDeleteProducts()" @ionChange="$event.target.checked ? subscribeDeleteProductsWebhook() : unsubscribeWebhook(this.webhookEnums['DELETE_PRODUCTS'])" color="secondary" />
+              <ion-toggle slot="end" :checked="isDeleteProducts" @ionChange.stop="$event.target.checked ? subscribeDeleteProductsWebhook() : unsubscribeWebhook(this.webhookEnums['DELETE_PRODUCTS'], $event)" color="secondary" />
             </ion-item>
           </ion-card>
         </section>
@@ -98,6 +98,12 @@ export default defineComponent({
       shopifyConfigId: 'user/getShopifyConfigId',
       getCachedWebhook: 'webhook/getCachedWebhook'
     }),
+    isNewProducts() {
+      return (this as any).getCachedWebhook[(this as any).webhookEnums['NEW_PRODUCTS']]?.topic === (this as any).webhookEnums['NEW_PRODUCTS']
+    },
+    isDeleteProducts() {
+      return (this as any).getCachedWebhook[(this as any).webhookEnums['DELETE_PRODUCTS']]?.topic === (this as any).webhookEnums['DELETE_PRODUCTS']
+    },
   },
   data() {
     return {
@@ -109,7 +115,7 @@ export default defineComponent({
       freqType: '',
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
-      webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any
+      webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
     }
   },
   mounted () {
@@ -128,15 +134,15 @@ export default defineComponent({
     subscribeDeleteProductsWebhook(){
       this.store.dispatch('webhook/updateDeleteProducts', {shopifyConfigId: this.shopifyConfigId })
     },
-    unsubscribeWebhook(webhookEnum: string){
+    async unsubscribeWebhook(webhookEnum: string, e: CustomEvent){
+      e.preventDefault();
+      
+
       const webhookId = this.getCachedWebhook[webhookEnum]?.id
-      this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId, shopifyConfigId: this.shopifyConfigId })
-    },
-    isNewProducts(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['NEW_PRODUCTS']]?.topic === this.webhookEnums['NEW_PRODUCTS']
-    },
-    isDeleteProducts(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['DELETE_PRODUCTS']]?.topic === this.webhookEnums['DELETE_PRODUCTS']
+      const status = await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId, shopifyConfigId: this.shopifyConfigId })
+      console.log();
+      
+      
     },
     async viewJobConfiguration(id: string, title: string, status: string) {
       this.currentJob = this.getJob(this.jobEnums[id])

From 0fb39214dea64a486a451b5b76820fe6bd78f49f Mon Sep 17 00:00:00 2001
From: Ravindra Purohit <ravindrapurohit2011@gmail.com>
Date: Wed, 1 Jun 2022 16:09:14 +0530
Subject: [PATCH 12/28] Un-resolved Issue: When user click on toggle and if
 service fails toggle does'nt switch back to previous state

---
 src/views/Product.vue | 51 ++++++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/views/Product.vue b/src/views/Product.vue
index 4048febb..6858e4c3 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -33,11 +33,11 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isNewProducts" @ionChange.prevent="$event.target.checked ? subscribeNewProductsWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_PRODUCTS'], $event['detail'].checked)" color="secondary" />
+              <ion-toggle slot="end" :checked="isNewProductsSubscribed" @ionChange.prevent="$event.target.checked ? subscribeNewProductsWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_PRODUCTS'], $event, $event['detail'].checked)" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isDeleteProducts" @ionChange.stop="$event.target.checked ? subscribeDeleteProductsWebhook() : unsubscribeWebhook(this.webhookEnums['DELETE_PRODUCTS'], $event)" color="secondary" />
+              <ion-toggle slot="end" :checked="isDeleteProductsSubscribed" v-model="isDeleteProductsSubscribed" @ionChange="$event.target.checked ? subscribeDeleteProductsWebhook() : unsubscribeWebhook(this.webhookEnums['DELETE_PRODUCTS'], $event, $event['detail'].checked)" color="secondary" />
             </ion-item>
           </ion-card>
         </section>
@@ -98,12 +98,6 @@ export default defineComponent({
       shopifyConfigId: 'user/getShopifyConfigId',
       getCachedWebhook: 'webhook/getCachedWebhook'
     }),
-    isNewProducts() {
-      return (this as any).getCachedWebhook[(this as any).webhookEnums['NEW_PRODUCTS']]?.topic === (this as any).webhookEnums['NEW_PRODUCTS']
-    },
-    isDeleteProducts() {
-      return (this as any).getCachedWebhook[(this as any).webhookEnums['DELETE_PRODUCTS']]?.topic === (this as any).webhookEnums['DELETE_PRODUCTS']
-    },
   },
   data() {
     return {
@@ -116,6 +110,8 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
+      isNewProductsSubscribed: false,
+      isDeleteProductsSubscribed: false
     }
   },
   mounted () {
@@ -125,24 +121,45 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
-    this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})    
+    this.fetchWebhooks()
   },
   methods: {
+    async fetchWebhooks() {
+      await this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
+      this.isNewProducts()
+      this.isDeleteProducts() 
+    },
+    isNewProducts() {
+      this.isNewProductsSubscribed = (this as any).getCachedWebhook[(this as any).webhookEnums['NEW_PRODUCTS']]?.topic === (this as any).webhookEnums['NEW_PRODUCTS']
+    },
+    isDeleteProducts() {
+      this.isDeleteProductsSubscribed = (this as any).getCachedWebhook[(this as any).webhookEnums['DELETE_PRODUCTS']]?.topic === (this as any).webhookEnums['DELETE_PRODUCTS']
+    },
     subscribeNewProductsWebhook(){
       this.store.dispatch('webhook/updateNewProducts', {shopifyConfigId: this.shopifyConfigId })
     },
     subscribeDeleteProductsWebhook(){
       this.store.dispatch('webhook/updateDeleteProducts', {shopifyConfigId: this.shopifyConfigId })
     },
-    async unsubscribeWebhook(webhookEnum: string, e: CustomEvent){
-      e.preventDefault();
-      
+    async unsubscribeWebhook(webhookEnum: string, e: CustomEvent, previousStatus: boolean){
+      if (this.isDeleteProductsSubscribed) {
+        
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+        e.preventDefault();
+        const webhookId = this.getCachedWebhook[webhookEnum]
 
-      const webhookId = this.getCachedWebhook[webhookEnum]?.id
-      const status = await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId, shopifyConfigId: this.shopifyConfigId })
-      console.log();
-      
-      
+        const status = await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId?.topic, shopifyConfigId: this.shopifyConfigId })
+          console.log(status);
+        
+        if (status){           
+          this.isDeleteProductsSubscribed = false
+        } else {
+          this.isDeleteProductsSubscribed = true;
+        }
+      } else {
+          setTimeout(() => { this.isDeleteProductsSubscribed = true; }, 0);
+      }
     },
     async viewJobConfiguration(id: string, title: string, status: string) {
       this.currentJob = this.getJob(this.jobEnums[id])

From 7b17a741afff59cbb16b3d2c06fa1c01370ea94d Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 16 Jun 2022 16:22:05 +0530
Subject: [PATCH 13/28] Implemented: service to subscribe the file state update
 webhook(#2ftb11u)

---
 src/services/WebhookService.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/services/WebhookService.ts b/src/services/WebhookService.ts
index 5ae93480..bce6be2f 100644
--- a/src/services/WebhookService.ts
+++ b/src/services/WebhookService.ts
@@ -56,6 +56,14 @@ const subscribeDeleteProductsWebhook = async (payload?: any): Promise <any> => {
   })
 }
 
+const subscribeFileStatusUpdateWebhook = async (payload?: any): Promise <any> => {
+  return api ({
+    url: 'service/subscribeFileStatusUpdateWebhook',
+    method: 'post',
+    data: payload
+  })
+}
+
 const unsubscribe = async (payload?: any): Promise <any> => {
   return api ({
     url: 'service/removeShopifyWebhook',
@@ -68,6 +76,7 @@ export const WebhookService = {
   fetchShopifyWebhooks,
   subscribeNewOrderWebhook,
   subscribeCancelledOrderWebhook,
+  subscribeFileStatusUpdateWebhook,
   subscribePaymentStatusWebhook,
   subscribeReturnWebhook,
   subscribeNewProductsWebhook,

From bb29f7c156d5598400eb9d3b969be9f21324773c Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 16 Jun 2022 16:23:08 +0530
Subject: [PATCH 14/28] Implemented: action to subscribe the webhook and
 updated the cached state type to any(#2ftb11u)

---
 src/store/modules/webhook/WebhookState.ts |  2 +-
 src/store/modules/webhook/actions.ts      | 37 ++++++++++++++++++-----
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/store/modules/webhook/WebhookState.ts b/src/store/modules/webhook/WebhookState.ts
index 4eccdf18..084b742a 100644
--- a/src/store/modules/webhook/WebhookState.ts
+++ b/src/store/modules/webhook/WebhookState.ts
@@ -1,5 +1,5 @@
 export default interface WebhookState {
-  cached: Object
+  cached: any
   key: {
     topic: string,
     list: Array<any>
diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 19ba67b2..ddc4d1bb 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -7,12 +7,12 @@ import * as types from './mutations-types'
 import { translate } from '@/i18n'
 
 const actions: ActionTree<WebhookState, RootState> = {
-  async fetchWebhooks({ commit }, payload){
-    await WebhookService.fetchShopifyWebhooks(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        const { webhooks } = JSON.parse(resp.data.webhooks);
+  async fetchWebhooks({ commit }) {
+    await WebhookService.fetchShopifyWebhooks({ shopifyConfigId: this.state.user.shopifyConfig }).then(resp => {
+      if (resp.status == 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+        const webhooks = resp.data.webhooks;
         const topics: any = {}
-        webhooks.forEach((topic: any) => {
+        webhooks.map((topic: any) => {
           topics[topic.topic] = topic
         })
         commit(types.WEBHOOK_UPDATED, topics)
@@ -20,7 +20,8 @@ const actions: ActionTree<WebhookState, RootState> = {
       }
     }).catch(err => console.error(err))
   },
-  async unsubscribeWebhook({ commit, state }, payload: any) {
+  async unsubscribeWebhook({ dispatch, state }, payload: any) {
+    delete state.cached['bulk_operations/finish']
     console.log(payload);
     const status = await WebhookService.unsubscribe(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
@@ -29,9 +30,9 @@ const actions: ActionTree<WebhookState, RootState> = {
       }
     }).catch(() => {
       showToast(translate("Something went wrong"));
-      console.log(state.cached);
-      WebhookService.unsubscribe(payload)
       return false
+    }).finally(() => {
+      dispatch('fetchWebhooks')
     })
     return status
   },
@@ -95,6 +96,26 @@ const actions: ActionTree<WebhookState, RootState> = {
         commit(types.WEBHOOK_CURRENT_UPDATED, resp)
       }
     })
+  },
+  async subscribeFileStatusUpdateWebhook({ dispatch }) {
+
+    let resp;
+
+    try {
+      resp = await WebhookService.subscribeNewProductsWebhook({ shopifyConfigId: this.state.user.shopifyConfig })
+
+      if (resp.status == 200 && !hasError(resp) && resp.data.webhooks?.length > 0) {  
+        showToast(translate('Webhook subscribed succesfully'))
+      } else {
+        showToast(translate('Something went wrong'))
+        console.error(resp)
+      }
+    } catch (err) {
+      showToast(translate('Something went wrong'))
+      console.error(err);
+    } finally {
+      await dispatch('fetchWebhooks')
+    }
   }
 }
 

From fa1dc3181f7cf1efff96745c5082374fc85849c7 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 16 Jun 2022 16:31:26 +0530
Subject: [PATCH 15/28] Implemented: UI for the fileStatusUpdate
 webhook(#2ftb11u)

---
 src/views/InitialLoad.vue | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index 0b0372d0..e7100b14 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -35,6 +35,16 @@
               </ion-label>
             </ion-item>
           </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ $t("Process Uploads") }}</ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("File Status Webhook") }}</ion-label>
+              <ion-toggle :checked="fileStatusUpdateWebhook" color="secondary" slot="end" @ionChange="fileStatusUpdateWebhook ? unsubscribeWebhook() : subscribeWebhook()" />
+            </ion-item>
+          </ion-card>
         </section>
 
         <aside class="desktop-only" v-if="isDesktop" v-show="currentSelectedJobModal">
@@ -58,6 +68,7 @@ import {
   IonMenuButton,
   IonPage,
   IonTitle,
+  IonToggle,
   IonToolbar,
   isPlatform
 } from '@ionic/vue';
@@ -83,11 +94,13 @@ export default defineComponent({
     IonMenuButton,
     IonPage,
     IonTitle,
+    IonToggle,
     IonToolbar
   },
   data() {
     return {
       jobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
+      webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
       currentSelectedJobModal: '',
       job: {} as any,
       lastShopifyOrderId: '',
@@ -102,14 +115,19 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     })
+    this.store.dispatch('webhook/fetchWebhooks', { shopifyConfigId: this.shopifyConfigId })
   },
   computed: {
     ...mapGetters({
       getJobStatus: 'job/getJobStatus',
       getJob: 'job/getJob',
       shopifyConfigId: 'user/getShopifyConfigId',
-      currentEComStore: 'user/getCurrentEComStore'
-    })
+      currentEComStore: 'user/getCurrentEComStore',
+      getCachedWebhook: 'webhook/getCachedWebhook'
+    }),
+    fileStatusUpdateWebhook(): boolean {
+      return this.getCachedWebhook[this.webhookEnums['BULK_OPERATIONS_FINISH']]?.topic === this.webhookEnums['BULK_OPERATIONS_FINISH']
+    }
   },
   methods: {
     async viewJobConfiguration(label: string, id: string) {
@@ -134,6 +152,13 @@ export default defineComponent({
         emitter.emit('playAnimation');
         this.isJobDetailAnimationCompleted = true;
       }
+    },
+    async subscribeWebhook() {
+      await this.store.dispatch('webhook/subscribeFileStatusUpdateWebhook')
+    },
+    async unsubscribeWebhook() {
+      const webhook = this.getCachedWebhook[this.webhookEnums['BULK_OPERATIONS_FINISH']]
+      await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
     }
   },
   setup() {

From 898640c4f1f0d211a078b13d4b5e0606e4c124b8 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 16 Jun 2022 16:46:21 +0530
Subject: [PATCH 16/28] Removed: unwanted console statements(#2ftb11u)

---
 src/store/modules/webhook/actions.ts | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index ddc4d1bb..01f098b9 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -16,80 +16,57 @@ const actions: ActionTree<WebhookState, RootState> = {
           topics[topic.topic] = topic
         })
         commit(types.WEBHOOK_UPDATED, topics)
-        console.log(topics);
       }
     }).catch(err => console.error(err))
   },
   async unsubscribeWebhook({ dispatch, state }, payload: any) {
-    delete state.cached['bulk_operations/finish']
-    console.log(payload);
     const status = await WebhookService.unsubscribe(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        console.log(resp);
-        return true
+        showToast(translate("Webhook unsubscribed successfully"));
       }
     }).catch(() => {
       showToast(translate("Something went wrong"));
-      return false
     }).finally(() => {
       dispatch('fetchWebhooks')
     })
-    return status
   },
   // Webhook Subscription Actions
   async updateNewOrder({ commit }, payload: any) {
-    console.log('New Order');
-
     await WebhookService.subscribeNewOrderWebhook(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        console.log(resp);
         commit(types.WEBHOOK_CURRENT_UPDATED, resp)
       }
     })
   },
   async updateCancelledOrder({ commit }, payload: any) {
-    console.log('Cancel Order');
-
     await WebhookService.subscribeCancelledOrderWebhook(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        console.log(resp);
         commit(types.WEBHOOK_CURRENT_UPDATED, resp)
       }
     })
   },
   async updatePaymentStatus({ commit }, payload: any) {
-    console.log('Payment Status');
-
     await WebhookService.subscribeNewOrderWebhook(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        console.log(resp);
         commit(types.WEBHOOK_CURRENT_UPDATED, resp)
       }
     })
   },
   async updateReturns({ commit }, payload: any) {
-    console.log('Returns');
-
     await WebhookService.subscribeCancelledOrderWebhook(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        console.log(resp);
         commit(types.WEBHOOK_CURRENT_UPDATED, resp)
       }
     })
   },
   async updateDeleteProducts({ commit }, payload: any) {
-    console.log('New Products');
-
     await WebhookService.subscribeDeleteProductsWebhook(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        console.log(resp);
         commit(types.WEBHOOK_CURRENT_UPDATED, resp)
       }
     })
   },
   async updateNewProducts({ commit }, payload: any) {
-    console.log('Delete Products');
-
     await WebhookService.subscribeNewProductsWebhook(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         console.log(resp);
@@ -105,7 +82,7 @@ const actions: ActionTree<WebhookState, RootState> = {
       resp = await WebhookService.subscribeNewProductsWebhook({ shopifyConfigId: this.state.user.shopifyConfig })
 
       if (resp.status == 200 && !hasError(resp) && resp.data.webhooks?.length > 0) {  
-        showToast(translate('Webhook subscribed succesfully'))
+        showToast(translate('Webhook subscribed successfully'))
       } else {
         showToast(translate('Something went wrong'))
         console.error(resp)

From 5540e7ab760c53638871ea2d908b0b7c18ee7268 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 16 Jun 2022 16:54:38 +0530
Subject: [PATCH 17/28] Removed: the shopify config id passed to the fetch
 webhooks action(#2ftb11u)

---
 src/views/InitialLoad.vue | 2 +-
 src/views/Orders.vue      | 2 +-
 src/views/Product.vue     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index e7100b14..3e395af7 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -115,7 +115,7 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     })
-    this.store.dispatch('webhook/fetchWebhooks', { shopifyConfigId: this.shopifyConfigId })
+    this.store.dispatch('webhook/fetchWebhooks')
   },
   computed: {
     ...mapGetters({
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 40882948..c3401f4f 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -424,7 +424,7 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
-    this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
+    this.store.dispatch('webhook/fetchWebhooks')
   },
   setup() {
     const store = useStore();
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 6858e4c3..13a0dd1c 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -125,7 +125,7 @@ export default defineComponent({
   },
   methods: {
     async fetchWebhooks() {
-      await this.store.dispatch('webhook/fetchWebhooks', {shopifyConfigId: this.shopifyConfigId})
+      await this.store.dispatch('webhook/fetchWebhooks')
       this.isNewProducts()
       this.isDeleteProducts() 
     },

From 02d5488239e7b94608a231b68905544c8f118ba3 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 16 Jun 2022 17:19:33 +0530
Subject: [PATCH 18/28] Improved: code to define a single method to subscribe
 and unsubscribe of webhook(#2ftb11u)

---
 src/locales/en.json                  |  4 ++++
 src/store/modules/webhook/actions.ts |  6 ++----
 src/views/InitialLoad.vue            | 24 ++++++++++++++++--------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 74d83f39..11465f4e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -53,6 +53,7 @@
   "Every 5 minutes": "Every 5 minutes",
   "Every 15 minutes": "Every 15 minutes",
   "Every 30 minutes": "Every 30 minutes",
+  "File upload status": "File upload status",
   "Fulfilled": "Fulfilled",
   "Fulfillment status": "Fulfillment status",
   "Hard sync": "Hard sync",
@@ -98,6 +99,7 @@
   "Pre-order": "Pre-order",
   "Pre-order parking": "Pre-order parking",
   "Pre-orders": "Pre-orders",
+  "Process Uploads": "Process Uploads",
   "Pin job": "Pin job",
   "Pinned jobs": "Pinned jobs",
   "Pipeline": "Pipeline",
@@ -173,6 +175,8 @@
   "Update time zone": "Update time zone",
   "Use POs to manage catalog": "Use POs to manage catalog",
   "Username": "Username",
+  "Webhook subscribed successfully": "Webhook subscribed successfully",
+  "Webhook unsubscribed successfully": "Webhook unsubscribed successfully",
   "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu.",
   "Unfillable": "Unfillable",
   "Unfillable orders": "Unfillable orders",
diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 01f098b9..1b22df21 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -20,15 +20,13 @@ const actions: ActionTree<WebhookState, RootState> = {
     }).catch(err => console.error(err))
   },
   async unsubscribeWebhook({ dispatch, state }, payload: any) {
-    const status = await WebhookService.unsubscribe(payload).then(resp => {
+    await WebhookService.unsubscribe(payload).then(resp => {
       if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         showToast(translate("Webhook unsubscribed successfully"));
       }
     }).catch(() => {
       showToast(translate("Something went wrong"));
-    }).finally(() => {
-      dispatch('fetchWebhooks')
-    })
+    }).finally(() => dispatch('fetchWebhooks'))
   },
   // Webhook Subscription Actions
   async updateNewOrder({ commit }, payload: any) {
diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index 3e395af7..163f4797 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -41,8 +41,8 @@
               <ion-card-title>{{ $t("Process Uploads") }}</ion-card-title>
             </ion-card-header>
             <ion-item>
-              <ion-label class="ion-text-wrap">{{ $t("File Status Webhook") }}</ion-label>
-              <ion-toggle :checked="fileStatusUpdateWebhook" color="secondary" slot="end" @ionChange="fileStatusUpdateWebhook ? unsubscribeWebhook() : subscribeWebhook()" />
+              <ion-label class="ion-text-wrap">{{ $t("File upload status") }}</ion-label>
+              <ion-toggle :checked="fileStatusUpdateWebhook" color="secondary" slot="end" @ionChange="updateWebhook($event['detail'].checked, 'BULK_OPERATIONS_FINISH')" />
             </ion-item>
           </ion-card>
         </section>
@@ -153,12 +153,20 @@ export default defineComponent({
         this.isJobDetailAnimationCompleted = true;
       }
     },
-    async subscribeWebhook() {
-      await this.store.dispatch('webhook/subscribeFileStatusUpdateWebhook')
-    },
-    async unsubscribeWebhook() {
-      const webhook = this.getCachedWebhook[this.webhookEnums['BULK_OPERATIONS_FINISH']]
-      await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
+    async updateWebhook(checked: boolean, id: string) {
+      const webhook = this.getCachedWebhook[this.webhookEnums[id]]
+
+      // TODO: added this condition to not call the api when the value of the select automatically changes
+      // need to handle this properly
+      if ((checked && webhook) || (!checked && !webhook)) {
+        return;
+      }
+
+      if (checked) {
+        await this.store.dispatch('webhook/subscribeFileStatusUpdateWebhook')
+      } else {
+        await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
+      }
     }
   },
   setup() {

From 9112e6cdc63abbac4a6267aa5eb49d092081e079 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 09:58:34 +0530
Subject: [PATCH 19/28] Improved: code to define an object consisting of job id
 and corresponding action mapping and then using the same when calling the
 action(#2ftb11u)

---
 src/views/InitialLoad.vue |  8 ++++++-
 src/views/Orders.vue      | 50 +++++++++++++++++++++------------------
 src/views/Product.vue     | 44 ++++++++++++++++------------------
 3 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index 163f4797..7a0f4986 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -162,8 +162,14 @@ export default defineComponent({
         return;
       }
 
+      // stores the action that needs to be called on the basis of current webhook selected, doing
+      // so as we have defined separate methods for different webhook subscription
+      const webhookAction = {
+        'BULK_OPERATIONS_FINISH': 'subscribeFileStatusUpdateWebhook'
+      } as any
+
       if (checked) {
-        await this.store.dispatch('webhook/subscribeFileStatusUpdateWebhook')
+        await this.store.dispatch(`webhook/${webhookAction}`)
       } else {
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
       }
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index c3401f4f..29ca8b31 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -42,19 +42,19 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New orders") }}</ion-label>
-              <ion-toggle :checked="isNewOrders()" @ionChange="$event.target.checked ? subscribeNewOrdersWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_ORDERS'])" slot="end" color="secondary" />
+              <ion-toggle :checked="isNewOrders()" @ionChange="updateWebhook($event['detail'].checked, 'NEW_ORDERS')" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Cancelled orders") }}</ion-label>
-              <ion-toggle :checked="isCancelledOrders()" @ionChange="$event.target.checked ? subscribeCancelledOrdersWebhook() : unsubscribeWebhook(this.webhookEnums['CANCELLED_ORDERS'])" slot="end" color="secondary" />
+              <ion-toggle :checked="isCancelledOrders()" @ionChange="updateWebhook($event['detail'].checked, 'CANCELLED_ORDERS')" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Payment status") }}</ion-label>
-              <ion-toggle :checked="isPaymentStatus()" @ionChange="$event.target.checked ? subscribePaymentStatusWebhook() : unsubscribeWebhook(this.webhookEnums['PAYMENT_STATUS'])" slot="end" color="secondary" />
+              <ion-toggle :checked="isPaymentStatus()" @ionChange="updateWebhook($event['detail'].checked, 'PAYMENT_STATUS')" slot="end" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Returns") }}</ion-label>
-              <ion-toggle :checked="isReturns()" @ionChange="$event.target.checked ? subscribeReturnsWebhook() : unsubscribeWebhook(this.webhookEnums['RETURNS'])" slot="end" color="secondary" />
+              <ion-toggle :checked="isReturns()" @ionChange="updateWebhook($event['detail'].checked, 'RETURNS')" slot="end" color="secondary" />
             </ion-item>
           </ion-card>
 
@@ -243,25 +243,29 @@ export default defineComponent({
     },
   },
   methods: {
-    updateWebhook(paload: any, isStatus: any){
-      const webhookId = this.getCachedWebhook["PAYMENT_STATUS"]?.id
-      isStatus ? this.store.dispatch('webhook/updateNewOrder', { shopifyConfigId: this.shopifyConfigId }) : this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId , shopifyConfigId: this.shopifyConfigId })
-    },
-    subscribeNewOrdersWebhook(){
-      this.store.dispatch('webhook/updateNewOrder', {shopifyConfigId: this.shopifyConfigId })
-    },
-    subscribeCancelledOrdersWebhook(){
-      this.store.dispatch('webhook/updateCancelledOrder', {shopifyConfigId: this.shopifyConfigId })
-    },
-    subscribePaymentStatusWebhook(){
-      this.store.dispatch('webhook/updatePaymentStatus', {shopifyConfigId: this.shopifyConfigId })
-    },
-    subscribeReturnsWebhook(){
-      this.store.dispatch('webhook/updateReturns', {shopifyConfigId: this.shopifyConfigId })
-    },
-    unsubscribeWebhook(webhookEnum: string){
-      const webhookId = this.getCachedWebhook[webhookEnum]?.id
-      this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId, shopifyConfigId: this.shopifyConfigId })
+    async updateWebhook(checked: boolean, id: string) {
+      const webhook = this.getCachedWebhook[this.webhookEnums[id]]
+
+      // TODO: added this condition to not call the api when the value of the select automatically changes
+      // need to handle this properly
+      if ((checked && webhook) || (!checked && !webhook)) {
+        return;
+      }
+
+      // stores the action that needs to be called on the basis of current webhook selected, doing
+      // so as we have defined separate methods for different webhook subscription
+      const webhookAction = {
+        'NEW_ORDERS': 'updateNewOrder',
+        'CANCELLED_ORDERS': 'updateCancelledOrder',
+        'PAYMENT_STATUS': "updatePaymentStatus",
+        'RETURNS': "updateReturns"
+      } as any
+
+      if (checked) {
+        await this.store.dispatch(`webhook/${webhookAction[id]}`)
+      } else {
+        await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id?.toString(), shopifyConfigId: this.shopifyConfigId })
+      }
     },
     isNewOrders(): boolean {
       return this.getCachedWebhook[this.webhookEnums['NEW_ORDERS']]?.topic === this.webhookEnums['NEW_ORDERS']
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 13a0dd1c..17e39d62 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -33,11 +33,11 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isNewProductsSubscribed" @ionChange.prevent="$event.target.checked ? subscribeNewProductsWebhook() : unsubscribeWebhook(this.webhookEnums['NEW_PRODUCTS'], $event, $event['detail'].checked)" color="secondary" />
+              <ion-toggle slot="end" :checked="isNewProductsSubscribed" @ionChange="updateWebhook($event['detail'].checked, 'NEW_PRODUCTS')" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isDeleteProductsSubscribed" v-model="isDeleteProductsSubscribed" @ionChange="$event.target.checked ? subscribeDeleteProductsWebhook() : unsubscribeWebhook(this.webhookEnums['DELETE_PRODUCTS'], $event, $event['detail'].checked)" color="secondary" />
+              <ion-toggle slot="end" :checked="isDeleteProductsSubscribed" @ionChange="updateWebhook($event['detail'].checked, 'DELETE_PRODUCTS')" color="secondary" />
             </ion-item>
           </ion-card>
         </section>
@@ -135,30 +135,26 @@ export default defineComponent({
     isDeleteProducts() {
       this.isDeleteProductsSubscribed = (this as any).getCachedWebhook[(this as any).webhookEnums['DELETE_PRODUCTS']]?.topic === (this as any).webhookEnums['DELETE_PRODUCTS']
     },
-    subscribeNewProductsWebhook(){
-      this.store.dispatch('webhook/updateNewProducts', {shopifyConfigId: this.shopifyConfigId })
-    },
-    subscribeDeleteProductsWebhook(){
-      this.store.dispatch('webhook/updateDeleteProducts', {shopifyConfigId: this.shopifyConfigId })
-    },
-    async unsubscribeWebhook(webhookEnum: string, e: CustomEvent, previousStatus: boolean){
-      if (this.isDeleteProductsSubscribed) {
-        
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-        const webhookId = this.getCachedWebhook[webhookEnum]
+    async updateWebhook(checked: boolean, id: string) {
+      const webhook = this.getCachedWebhook[this.webhookEnums[id]]
+
+      // TODO: added this condition to not call the api when the value of the select automatically changes
+      // need to handle this properly
+      if ((checked && webhook) || (!checked && !webhook)) {
+        return;
+      }
+
+      // stores the action that needs to be called on the basis of current webhook selected, doing
+      // so as we have defined separate methods for different webhook subscription
+      const webhookAction = {
+        'NEW_PRODUCTS': 'updateNewProducts',
+        'DELETE_PRODUCTS': 'updateDeleteProducts'
+      } as any
 
-        const status = await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhookId?.topic, shopifyConfigId: this.shopifyConfigId })
-          console.log(status);
-        
-        if (status){           
-          this.isDeleteProductsSubscribed = false
-        } else {
-          this.isDeleteProductsSubscribed = true;
-        }
+      if (checked) {
+        await this.store.dispatch(`webhook/${webhookAction[id]}`)
       } else {
-          setTimeout(() => { this.isDeleteProductsSubscribed = true; }, 0);
+        await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id?.toString(), shopifyConfigId: this.shopifyConfigId })
       }
     },
     async viewJobConfiguration(id: string, title: string, status: string) {

From 4b3f178e0813243f275e68063071e859a0759d88 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 10:57:11 +0530
Subject: [PATCH 20/28] Improved: code to defined a single action to subscribe
 webhooks and defined a mapping having id and correspoding service(#2ftb11u)

---
 src/store/modules/webhook/actions.ts | 72 +++++++++-------------------
 src/views/InitialLoad.vue            |  8 +---
 src/views/Orders.vue                 | 11 +----
 src/views/Product.vue                |  9 +---
 4 files changed, 26 insertions(+), 74 deletions(-)

diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 1b22df21..5851e504 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -19,67 +19,41 @@ const actions: ActionTree<WebhookState, RootState> = {
       }
     }).catch(err => console.error(err))
   },
-  async unsubscribeWebhook({ dispatch, state }, payload: any) {
+  async unsubscribeWebhook({ dispatch }, payload: any) {
     await WebhookService.unsubscribe(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
+      if (resp.status === 200 && !hasError(resp)) {
         showToast(translate("Webhook unsubscribed successfully"));
       }
     }).catch(() => {
       showToast(translate("Something went wrong"));
     }).finally(() => dispatch('fetchWebhooks'))
   },
-  // Webhook Subscription Actions
-  async updateNewOrder({ commit }, payload: any) {
-    await WebhookService.subscribeNewOrderWebhook(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
-      }
-    })
-  },
-  async updateCancelledOrder({ commit }, payload: any) {
-    await WebhookService.subscribeCancelledOrderWebhook(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
-      }
-    })
-  },
-  async updatePaymentStatus({ commit }, payload: any) {
-    await WebhookService.subscribeNewOrderWebhook(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
-      }
-    })
-  },
-  async updateReturns({ commit }, payload: any) {
-    await WebhookService.subscribeCancelledOrderWebhook(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
-      }
-    })
-  },
-  async updateDeleteProducts({ commit }, payload: any) {
-    await WebhookService.subscribeDeleteProductsWebhook(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
-      }
-    })
-  },
-  async updateNewProducts({ commit }, payload: any) {
-    await WebhookService.subscribeNewProductsWebhook(payload).then(resp => {
-      if (resp.status === 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
-        console.log(resp);
-        commit(types.WEBHOOK_CURRENT_UPDATED, resp)
-      }
-    })
-  },
-  async subscribeFileStatusUpdateWebhook({ dispatch }) {
+  async subscribeWebhook({ dispatch }, id: string) {
+
+    // stores the webhook service that needs to be called on the basis of current webhook selected, doing
+    // so as we have defined separate service for different webhook subscription
+    const webhookMethods = {
+      'NEW_ORDERS': WebhookService.subscribeNewOrderWebhook,
+      'CANCELLED_ORDERS': WebhookService.subscribeCancelledOrderWebhook,
+      'PAYMENT_STATUS':WebhookService.subscribePaymentStatusWebhook,
+      'RETURNS': WebhookService.subscribeReturnWebhook,
+      'NEW_PRODUCTS': WebhookService.subscribeNewProductsWebhook,
+      'DELETE_PRODUCTS': WebhookService.subscribeDeleteProductsWebhook,
+      'BULK_OPERATIONS_FINISH': WebhookService.subscribeFileStatusUpdateWebhook
+    } as any
+    const webhookMethod: any = webhookMethods[id];
+
+    if (!webhookMethod) {
+      showToast(translate("Configuration missing"));
+      return;
+    }
 
     let resp;
 
     try {
-      resp = await WebhookService.subscribeNewProductsWebhook({ shopifyConfigId: this.state.user.shopifyConfig })
+      resp = await webhookMethod({ shopifyConfigId: this.state.user.shopifyConfig })
 
-      if (resp.status == 200 && !hasError(resp) && resp.data.webhooks?.length > 0) {  
+      if (resp.status == 200 && !hasError(resp)) {
         showToast(translate('Webhook subscribed successfully'))
       } else {
         showToast(translate('Something went wrong'))
diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index 7a0f4986..c1fce24c 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -162,14 +162,8 @@ export default defineComponent({
         return;
       }
 
-      // stores the action that needs to be called on the basis of current webhook selected, doing
-      // so as we have defined separate methods for different webhook subscription
-      const webhookAction = {
-        'BULK_OPERATIONS_FINISH': 'subscribeFileStatusUpdateWebhook'
-      } as any
-
       if (checked) {
-        await this.store.dispatch(`webhook/${webhookAction}`)
+        await this.store.dispatch('webhook/subscribeWebhook', id)
       } else {
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
       }
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 29ca8b31..33bd5ea9 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -252,17 +252,8 @@ export default defineComponent({
         return;
       }
 
-      // stores the action that needs to be called on the basis of current webhook selected, doing
-      // so as we have defined separate methods for different webhook subscription
-      const webhookAction = {
-        'NEW_ORDERS': 'updateNewOrder',
-        'CANCELLED_ORDERS': 'updateCancelledOrder',
-        'PAYMENT_STATUS': "updatePaymentStatus",
-        'RETURNS': "updateReturns"
-      } as any
-
       if (checked) {
-        await this.store.dispatch(`webhook/${webhookAction[id]}`)
+        await this.store.dispatch('webhook/subscribeWebhook', id)
       } else {
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id?.toString(), shopifyConfigId: this.shopifyConfigId })
       }
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 17e39d62..ae86a21d 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -144,15 +144,8 @@ export default defineComponent({
         return;
       }
 
-      // stores the action that needs to be called on the basis of current webhook selected, doing
-      // so as we have defined separate methods for different webhook subscription
-      const webhookAction = {
-        'NEW_PRODUCTS': 'updateNewProducts',
-        'DELETE_PRODUCTS': 'updateDeleteProducts'
-      } as any
-
       if (checked) {
-        await this.store.dispatch(`webhook/${webhookAction[id]}`)
+        await this.store.dispatch('webhook/subscribeWebhook', id)
       } else {
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id?.toString(), shopifyConfigId: this.shopifyConfigId })
       }

From 45af47592b1362ea667cdc80a18557632a76d5c7 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 11:22:37 +0530
Subject: [PATCH 21/28] Improved: code to define the checked prop to use a
 computed property instead of data property or methods(#2ftb11u)

---
 src/views/Orders.vue  | 32 ++++++++++++++++----------------
 src/views/Product.vue | 25 +++++++++----------------
 2 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 33bd5ea9..64a3d5f6 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -42,19 +42,19 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New orders") }}</ion-label>
-              <ion-toggle :checked="isNewOrders()" @ionChange="updateWebhook($event['detail'].checked, 'NEW_ORDERS')" slot="end" color="secondary" />
+              <ion-toggle :checked="isNewOrders" @ionChange="updateWebhook($event['detail'].checked, 'NEW_ORDERS')" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Cancelled orders") }}</ion-label>
-              <ion-toggle :checked="isCancelledOrders()" @ionChange="updateWebhook($event['detail'].checked, 'CANCELLED_ORDERS')" slot="end" color="secondary" />
+              <ion-toggle :checked="isCancelledOrders" @ionChange="updateWebhook($event['detail'].checked, 'CANCELLED_ORDERS')" slot="end" color="secondary" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Payment status") }}</ion-label>
-              <ion-toggle :checked="isPaymentStatus()" @ionChange="updateWebhook($event['detail'].checked, 'PAYMENT_STATUS')" slot="end" color="secondary" />
+              <ion-toggle :checked="isPaymentStatus" @ionChange="updateWebhook($event['detail'].checked, 'PAYMENT_STATUS')" slot="end" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Returns") }}</ion-label>
-              <ion-toggle :checked="isReturns()" @ionChange="updateWebhook($event['detail'].checked, 'RETURNS')" slot="end" color="secondary" />
+              <ion-toggle :checked="isReturns" @ionChange="updateWebhook($event['detail'].checked, 'RETURNS')" slot="end" color="secondary" />
             </ion-item>
           </ion-card>
 
@@ -241,6 +241,18 @@ export default defineComponent({
       const status = this.getJobStatus(this.jobEnums["AUTO_CNCL_DAL"]);
       return status && status !== "SERVICE_DRAFT";
     },
+    isNewOrders(): boolean {
+      return this.getCachedWebhook[this.webhookEnums['NEW_ORDERS']]?.topic === this.webhookEnums['NEW_ORDERS']
+    },
+    isCancelledOrders(): boolean {
+      return this.getCachedWebhook[this.webhookEnums['CANCELLED_ORDERS']]?.topic === this.webhookEnums['CANCELLED_ORDERS']
+    },
+    isPaymentStatus(): boolean {
+      return this.getCachedWebhook[this.webhookEnums['PAYMENT_STATUS']]?.topic === this.webhookEnums['PAYMENT_STATUS']
+    },
+    isReturns(): boolean {
+      return this.getCachedWebhook[this.webhookEnums['RETURNS']]?.topic === this.webhookEnums['RETURNS']
+    },
   },
   methods: {
     async updateWebhook(checked: boolean, id: string) {
@@ -258,18 +270,6 @@ export default defineComponent({
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id?.toString(), shopifyConfigId: this.shopifyConfigId })
       }
     },
-    isNewOrders(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['NEW_ORDERS']]?.topic === this.webhookEnums['NEW_ORDERS']
-    },
-    isCancelledOrders(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['CANCELLED_ORDERS']]?.topic === this.webhookEnums['CANCELLED_ORDERS']
-    },
-    isPaymentStatus(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['PAYMENT_STATUS']]?.topic === this.webhookEnums['PAYMENT_STATUS']
-    },
-    isReturns(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['RETURNS']]?.topic === this.webhookEnums['RETURNS']
-    },
     async addBatch() {
       const batchmodal = await modalController.create({
         component: BatchModal
diff --git a/src/views/Product.vue b/src/views/Product.vue
index ae86a21d..7406b237 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -33,11 +33,11 @@
             </ion-card-header>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("New products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isNewProductsSubscribed" @ionChange="updateWebhook($event['detail'].checked, 'NEW_PRODUCTS')" color="secondary" />
+              <ion-toggle slot="end" :checked="newProductsWebhook" @ionChange="updateWebhook($event['detail'].checked, 'NEW_PRODUCTS')" color="secondary" />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">{{ $t("Delete products") }}</ion-label>
-              <ion-toggle slot="end" :checked="isDeleteProductsSubscribed" @ionChange="updateWebhook($event['detail'].checked, 'DELETE_PRODUCTS')" color="secondary" />
+              <ion-toggle slot="end" :checked="deleteProductsWebhook" @ionChange="updateWebhook($event['detail'].checked, 'DELETE_PRODUCTS')" color="secondary" />
             </ion-item>
           </ion-card>
         </section>
@@ -98,6 +98,12 @@ export default defineComponent({
       shopifyConfigId: 'user/getShopifyConfigId',
       getCachedWebhook: 'webhook/getCachedWebhook'
     }),
+    newProductsWebhook(): boolean {
+      return this.getCachedWebhook[this.webhookEnums['NEW_PRODUCTS']]?.topic === this.webhookEnums['NEW_PRODUCTS']
+    },
+    deleteProductsWebhook(): boolean {
+      return this.getCachedWebhook[this.webhookEnums['DELETE_PRODUCTS']]?.topic === this.webhookEnums['DELETE_PRODUCTS']
+    }
   },
   data() {
     return {
@@ -110,8 +116,6 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
-      isNewProductsSubscribed: false,
-      isDeleteProductsSubscribed: false
     }
   },
   mounted () {
@@ -121,20 +125,9 @@ export default defineComponent({
         "systemJobEnumId_op": "in"
       }
     });
-    this.fetchWebhooks()
+    this.store.dispatch('webhook/fetchWebhooks')
   },
   methods: {
-    async fetchWebhooks() {
-      await this.store.dispatch('webhook/fetchWebhooks')
-      this.isNewProducts()
-      this.isDeleteProducts() 
-    },
-    isNewProducts() {
-      this.isNewProductsSubscribed = (this as any).getCachedWebhook[(this as any).webhookEnums['NEW_PRODUCTS']]?.topic === (this as any).webhookEnums['NEW_PRODUCTS']
-    },
-    isDeleteProducts() {
-      this.isDeleteProductsSubscribed = (this as any).getCachedWebhook[(this as any).webhookEnums['DELETE_PRODUCTS']]?.topic === (this as any).webhookEnums['DELETE_PRODUCTS']
-    },
     async updateWebhook(checked: boolean, id: string) {
       const webhook = this.getCachedWebhook[this.webhookEnums[id]]
 

From 99507bfc6aa9e41e5071af9a95592ea62f569eb8 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 11:24:44 +0530
Subject: [PATCH 22/28] Removed: unwanted mutation and its type, also updated
 the service name to unsubscribeWebhook and added error handling in the
 unsubscribe action logic(#2ftb11u)

---
 src/services/WebhookService.ts               |  4 ++--
 src/store/modules/webhook/actions.ts         | 13 ++++++++++---
 src/store/modules/webhook/mutations-types.ts |  3 +--
 src/store/modules/webhook/mutations.ts       |  4 ----
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/services/WebhookService.ts b/src/services/WebhookService.ts
index bce6be2f..b8824665 100644
--- a/src/services/WebhookService.ts
+++ b/src/services/WebhookService.ts
@@ -64,7 +64,7 @@ const subscribeFileStatusUpdateWebhook = async (payload?: any): Promise <any> =>
   })
 }
 
-const unsubscribe = async (payload?: any): Promise <any> => {
+const unsubscribeWebhook = async (payload?: any): Promise <any> => {
   return api ({
     url: 'service/removeShopifyWebhook',
     method: 'post',
@@ -81,5 +81,5 @@ export const WebhookService = {
   subscribeReturnWebhook,
   subscribeNewProductsWebhook,
   subscribeDeleteProductsWebhook,
-  unsubscribe
+  unsubscribeWebhook
 }
\ No newline at end of file
diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 5851e504..5e253210 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -20,13 +20,20 @@ const actions: ActionTree<WebhookState, RootState> = {
     }).catch(err => console.error(err))
   },
   async unsubscribeWebhook({ dispatch }, payload: any) {
-    await WebhookService.unsubscribe(payload).then(resp => {
+
+    let resp;
+
+    try {
+      resp = await WebhookService.unsubscribeWebhook(payload)
       if (resp.status === 200 && !hasError(resp)) {
         showToast(translate("Webhook unsubscribed successfully"));
       }
-    }).catch(() => {
+    } catch(err) {
+      console.log(err)
       showToast(translate("Something went wrong"));
-    }).finally(() => dispatch('fetchWebhooks'))
+    } finally {
+      dispatch('fetchWebhooks')
+    }
   },
   async subscribeWebhook({ dispatch }, id: string) {
 
diff --git a/src/store/modules/webhook/mutations-types.ts b/src/store/modules/webhook/mutations-types.ts
index 43ba2242..7acbf857 100644
--- a/src/store/modules/webhook/mutations-types.ts
+++ b/src/store/modules/webhook/mutations-types.ts
@@ -1,3 +1,2 @@
 export const SN_WEBHOOK = 'webhook'
-export const WEBHOOK_UPDATED = SN_WEBHOOK + '/WEBHOOK_UPDATED'
-export const WEBHOOK_CURRENT_UPDATED = SN_WEBHOOK + '/WEBHOOK_CURRENT_UPDATED'
\ No newline at end of file
+export const WEBHOOK_UPDATED = SN_WEBHOOK + '/WEBHOOK_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/webhook/mutations.ts b/src/store/modules/webhook/mutations.ts
index 1e1e0cac..e8dca8f1 100644
--- a/src/store/modules/webhook/mutations.ts
+++ b/src/store/modules/webhook/mutations.ts
@@ -5,10 +5,6 @@ import * as types from './mutations-types'
 const mutations: MutationTree<WebhookState> = {
   [types.WEBHOOK_UPDATED] (state, payload: any) {
     state.cached = payload
-  },
-  [types.WEBHOOK_CURRENT_UPDATED] (state, payload: object) {
-    state.cached = payload
-    
   }
 }
 

From 93a7e8907026d4c0216a4954dfbc5a943bfe99f4 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 11:35:35 +0530
Subject: [PATCH 23/28] Improved: code to defined a variable and stored the
 webhook topic in it(#2ftb11u)

---
 src/views/InitialLoad.vue |  3 ++-
 src/views/Orders.vue      | 14 +++++++++-----
 src/views/Product.vue     |  8 +++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index c1fce24c..1956626d 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -126,7 +126,8 @@ export default defineComponent({
       getCachedWebhook: 'webhook/getCachedWebhook'
     }),
     fileStatusUpdateWebhook(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['BULK_OPERATIONS_FINISH']]?.topic === this.webhookEnums['BULK_OPERATIONS_FINISH']
+      const webhookTopic = this.webhookEnums['BULK_OPERATIONS_FINISH']
+      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
     }
   },
   methods: {
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 64a3d5f6..8b8495d0 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -242,16 +242,20 @@ export default defineComponent({
       return status && status !== "SERVICE_DRAFT";
     },
     isNewOrders(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['NEW_ORDERS']]?.topic === this.webhookEnums['NEW_ORDERS']
+      const webhookTopic = this.webhookEnums['NEW_ORDERS']
+      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
     },
     isCancelledOrders(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['CANCELLED_ORDERS']]?.topic === this.webhookEnums['CANCELLED_ORDERS']
+      const webhookTopic = this.webhookEnums['CANCELLED_ORDERS']
+      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
     },
     isPaymentStatus(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['PAYMENT_STATUS']]?.topic === this.webhookEnums['PAYMENT_STATUS']
+      const webhookTopic = this.webhookEnums['PAYMENT_STATUS']
+      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
     },
     isReturns(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['RETURNS']]?.topic === this.webhookEnums['RETURNS']
+      const webhookTopic = this.webhookEnums['RETURNS']
+      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
     },
   },
   methods: {
@@ -267,7 +271,7 @@ export default defineComponent({
       if (checked) {
         await this.store.dispatch('webhook/subscribeWebhook', id)
       } else {
-        await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id?.toString(), shopifyConfigId: this.shopifyConfigId })
+        await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
       }
     },
     async addBatch() {
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 7406b237..c9ec207f 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -99,10 +99,12 @@ export default defineComponent({
       getCachedWebhook: 'webhook/getCachedWebhook'
     }),
     newProductsWebhook(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['NEW_PRODUCTS']]?.topic === this.webhookEnums['NEW_PRODUCTS']
+      const webhookTopic = this.webhookEnums['NEW_PRODUCTS']
+      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
     },
     deleteProductsWebhook(): boolean {
-      return this.getCachedWebhook[this.webhookEnums['DELETE_PRODUCTS']]?.topic === this.webhookEnums['DELETE_PRODUCTS']
+      const webhookTopic = this.webhookEnums['DELETE_PRODUCTS']
+      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
     }
   },
   data() {
@@ -140,7 +142,7 @@ export default defineComponent({
       if (checked) {
         await this.store.dispatch('webhook/subscribeWebhook', id)
       } else {
-        await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id?.toString(), shopifyConfigId: this.shopifyConfigId })
+        await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
       }
     },
     async viewJobConfiguration(id: string, title: string, status: string) {

From 4a8b412180e276a53bdf4d5c5e23b10fcac6819a Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 11:44:21 +0530
Subject: [PATCH 24/28] Added: static text in en.json file(#2ftb11u)

---
 src/locales/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/locales/en.json b/src/locales/en.json
index 11465f4e..c46f5255 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -30,6 +30,7 @@
   "Canceling this job will cancel this occurrence and all following occurrences. This job will have to be re-enabled manually to run it again.": "Canceling this job will cancel this occurrence and all following occurrences. This job will have to be re-enabled manually to run it again.",
   "Change": "Change",
   "Change time zone": "Change time zone",
+  "Configuration missing": "Configuration missing",
   "Confirm": "Confirm",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Cancelled orders": "Cancelled orders",

From 6c0f514a887bd0e88b3de8840775b3d8297b79e5 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 15:22:26 +0530
Subject: [PATCH 25/28] Removed: an extra check when calculating whether a
 webhook is subscribed or not(#2ftb11u)

---
 src/views/InitialLoad.vue | 2 +-
 src/views/Orders.vue      | 8 ++++----
 src/views/Product.vue     | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index 5fd7c6bf..ca7498a1 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -134,7 +134,7 @@ export default defineComponent({
     }),
     fileStatusUpdateWebhook(): boolean {
       const webhookTopic = this.webhookEnums['BULK_OPERATIONS_FINISH']
-      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
+      return this.getCachedWebhook[webhookTopic]
     },
     processPendingUploadsOnShopify(): boolean {
       const status = this.getJobStatus(this.jobEnums["UL_PRCS"]);
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 8b8495d0..3dafb8f5 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -243,19 +243,19 @@ export default defineComponent({
     },
     isNewOrders(): boolean {
       const webhookTopic = this.webhookEnums['NEW_ORDERS']
-      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
+      return this.getCachedWebhook[webhookTopic]
     },
     isCancelledOrders(): boolean {
       const webhookTopic = this.webhookEnums['CANCELLED_ORDERS']
-      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
+      return this.getCachedWebhook[webhookTopic]
     },
     isPaymentStatus(): boolean {
       const webhookTopic = this.webhookEnums['PAYMENT_STATUS']
-      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
+      return this.getCachedWebhook[webhookTopic]
     },
     isReturns(): boolean {
       const webhookTopic = this.webhookEnums['RETURNS']
-      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
+      return this.getCachedWebhook[webhookTopic]
     },
   },
   methods: {
diff --git a/src/views/Product.vue b/src/views/Product.vue
index c9ec207f..b89c4680 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -100,11 +100,11 @@ export default defineComponent({
     }),
     newProductsWebhook(): boolean {
       const webhookTopic = this.webhookEnums['NEW_PRODUCTS']
-      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
+      return this.getCachedWebhook[webhookTopic]
     },
     deleteProductsWebhook(): boolean {
       const webhookTopic = this.webhookEnums['DELETE_PRODUCTS']
-      return this.getCachedWebhook[webhookTopic]?.topic === webhookTopic
+      return this.getCachedWebhook[webhookTopic]
     }
   },
   data() {

From dabd8ec869f93b18361681a432f3642a2b34b0e9 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 15:23:21 +0530
Subject: [PATCH 26/28] Removed: unwanted state key from the webhook store
 module(#2ftb11u)

---
 src/store/modules/webhook/WebhookState.ts | 4 ----
 src/store/modules/webhook/index.ts        | 6 +-----
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/store/modules/webhook/WebhookState.ts b/src/store/modules/webhook/WebhookState.ts
index 084b742a..dc12e384 100644
--- a/src/store/modules/webhook/WebhookState.ts
+++ b/src/store/modules/webhook/WebhookState.ts
@@ -1,7 +1,3 @@
 export default interface WebhookState {
   cached: any
-  key: {
-    topic: string,
-    list: Array<any>
-  }
 }
\ No newline at end of file
diff --git a/src/store/modules/webhook/index.ts b/src/store/modules/webhook/index.ts
index f444f8bd..2b93db9c 100644
--- a/src/store/modules/webhook/index.ts
+++ b/src/store/modules/webhook/index.ts
@@ -8,11 +8,7 @@ import actions from './actions'
 const webhookModule: Module<WebhookState, RootState> = {
   namespaced: true,
   state: {
-    cached: {},
-    key: {
-      topic: "",
-      list: []
-    },
+    cached: {}
   },
   getters,
   actions,

From f645c0d51bd4da399d14426dc4137c7c0fc9eaff Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 16:29:47 +0530
Subject: [PATCH 27/28] Improved: paramter name from id to enum and added todos
 on the missing service methods(#2ftb11u)

---
 src/services/WebhookService.ts |  5 +++++
 src/views/InitialLoad.vue      | 18 +++++++++---------
 src/views/Orders.vue           |  6 +++---
 src/views/Product.vue          |  6 +++---
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/services/WebhookService.ts b/src/services/WebhookService.ts
index b8824665..d50b1c8c 100644
--- a/src/services/WebhookService.ts
+++ b/src/services/WebhookService.ts
@@ -8,6 +8,7 @@ const fetchShopifyWebhooks = async (payload?:  any): Promise <any>  => {
   });
 }
 
+// TODO: add the service endpoint for the new order webhook
 const subscribeNewOrderWebhook = async (payload?: any): Promise <any> => {
   return api ({
     url: '',
@@ -16,6 +17,7 @@ const subscribeNewOrderWebhook = async (payload?: any): Promise <any> => {
   })
 }
 
+// TODO: add the service endpoint for the cancelled order webhook
 const subscribeCancelledOrderWebhook = async (payload?: any): Promise <any> => {
   return api ({
     url: '',
@@ -24,6 +26,7 @@ const subscribeCancelledOrderWebhook = async (payload?: any): Promise <any> => {
   })
 }
 
+// TODO: add the service endpoint for the payment status webhook
 const subscribePaymentStatusWebhook = async (payload?: any): Promise <any> => {
   return api ({
     url: '',
@@ -32,6 +35,7 @@ const subscribePaymentStatusWebhook = async (payload?: any): Promise <any> => {
   })
 }
 
+// TODO: add the service endpoint for the order return webhook
 const subscribeReturnWebhook = async (payload?: any): Promise <any> => {
   return api ({
     url: '',
@@ -40,6 +44,7 @@ const subscribeReturnWebhook = async (payload?: any): Promise <any> => {
   })
 }
 
+// TODO: add the service endpoint for the new product webhook
 const subscribeNewProductsWebhook = async (payload?: any): Promise <any> => {
   return api ({
     url: '',
diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index ca7498a1..8a0ef95c 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -145,18 +145,18 @@ export default defineComponent({
     async updateJob(checked: boolean, id: string, status = 'EVERY_15_MIN') {
       const job = this.getJob(id);
 
-      // added check that if the job is not present, then display a toast and then return
-      if (!job) {
-        showToast(translate('Configuration missing'))
-        return;
-      }
-
       // TODO: added this condition to not call the api when the value of the select automatically changes
       // need to handle this properly
       if ((checked && job?.status === 'SERVICE_PENDING') || (!checked && job?.status === 'SERVICE_DRAFT')) {
         return;
       }
 
+      // added check that if the job is not present, then display a toast and then return
+      if (!job) {
+        showToast(translate('Configuration missing'))
+        return;
+      }
+
       job['jobStatus'] = status
 
       // if job runTime is not a valid date then making runTime as empty
@@ -195,8 +195,8 @@ export default defineComponent({
         this.isJobDetailAnimationCompleted = true;
       }
     },
-    async updateWebhook(checked: boolean, id: string) {
-      const webhook = this.getCachedWebhook[this.webhookEnums[id]]
+    async updateWebhook(checked: boolean, enumId: string) {
+      const webhook = this.getCachedWebhook[this.webhookEnums[enumId]]
 
       // TODO: added this condition to not call the api when the value of the select automatically changes
       // need to handle this properly
@@ -205,7 +205,7 @@ export default defineComponent({
       }
 
       if (checked) {
-        await this.store.dispatch('webhook/subscribeWebhook', id)
+        await this.store.dispatch('webhook/subscribeWebhook', enumId)
       } else {
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
       }
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 3dafb8f5..ff9ea06a 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -259,8 +259,8 @@ export default defineComponent({
     },
   },
   methods: {
-    async updateWebhook(checked: boolean, id: string) {
-      const webhook = this.getCachedWebhook[this.webhookEnums[id]]
+    async updateWebhook(checked: boolean, enumId: string) {
+      const webhook = this.getCachedWebhook[this.webhookEnums[enumId]]
 
       // TODO: added this condition to not call the api when the value of the select automatically changes
       // need to handle this properly
@@ -269,7 +269,7 @@ export default defineComponent({
       }
 
       if (checked) {
-        await this.store.dispatch('webhook/subscribeWebhook', id)
+        await this.store.dispatch('webhook/subscribeWebhook', enumId)
       } else {
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
       }
diff --git a/src/views/Product.vue b/src/views/Product.vue
index b89c4680..01c9b781 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -130,8 +130,8 @@ export default defineComponent({
     this.store.dispatch('webhook/fetchWebhooks')
   },
   methods: {
-    async updateWebhook(checked: boolean, id: string) {
-      const webhook = this.getCachedWebhook[this.webhookEnums[id]]
+    async updateWebhook(checked: boolean, enumId: string) {
+      const webhook = this.getCachedWebhook[this.webhookEnums[enumId]]
 
       // TODO: added this condition to not call the api when the value of the select automatically changes
       // need to handle this properly
@@ -140,7 +140,7 @@ export default defineComponent({
       }
 
       if (checked) {
-        await this.store.dispatch('webhook/subscribeWebhook', id)
+        await this.store.dispatch('webhook/subscribeWebhook', enumId)
       } else {
         await this.store.dispatch('webhook/unsubscribeWebhook', { webhookId: webhook?.id, shopifyConfigId: this.shopifyConfigId })
       }

From eb7eda4658684fd05b1da681ab115d7b265d81a6 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 17 Jun 2022 17:15:59 +0530
Subject: [PATCH 28/28] Improved: the variable name from topic to
 webhook(#2ftb11u)

---
 src/store/modules/webhook/actions.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/webhook/actions.ts b/src/store/modules/webhook/actions.ts
index 5e253210..656789c7 100644
--- a/src/store/modules/webhook/actions.ts
+++ b/src/store/modules/webhook/actions.ts
@@ -12,8 +12,8 @@ const actions: ActionTree<WebhookState, RootState> = {
       if (resp.status == 200 && resp.data.webhooks?.length > 0 && !hasError(resp)) {
         const webhooks = resp.data.webhooks;
         const topics: any = {}
-        webhooks.map((topic: any) => {
-          topics[topic.topic] = topic
+        webhooks.map((webhook: any) => {
+          topics[webhook.topic] = webhook
         })
         commit(types.WEBHOOK_UPDATED, topics)
       }