From a1f1fe84f033f34d367bf01bd7ebc2fd4ec201a1 Mon Sep 17 00:00:00 2001
From: rajpatil6939 <raj.v.patil108@gmail.com>
Date: Thu, 10 Feb 2022 11:27:49 +0530
Subject: [PATCH 1/2] push notification component added at participant

---
 src/components/participant/Action.vue         |   4 +-
 .../ActionInputs/PushNotification.vue         | 111 ++++++++++++++++++
 2 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 src/components/participant/ActionInputs/PushNotification.vue

diff --git a/src/components/participant/Action.vue b/src/components/participant/Action.vue
index 0e38288d..e9793609 100644
--- a/src/components/participant/Action.vue
+++ b/src/components/participant/Action.vue
@@ -7,6 +7,7 @@
     ></loading>
     <Profile :user="userProfile"/>
     <prize-card v-if="isPrizedata" :prizeData="prizeData"/>
+    <push-notification />
     <template v-for="(actionItem,index) in ActionSchema">
       <component :is="CapitaliseString(actionItem.type)" :key="index" :idValue="index" :data="actionItem" @input="updateUserInfo(actionItem, $event)"></component>
     </template>
@@ -40,7 +41,7 @@ import ReefErc20 from "./ActionInputs/ReefErc20.vue";
 import InputDate from "./ActionInputs/InputDate.vue";
 import InputNumber from "./ActionInputs/InputNumber.vue";
 import InputHyperlink from "./ActionInputs/InputHyperlink.vue";
-
+import PushNotification from "./ActionInputs/PushNotification.vue"
 import PrizeCard from "./ActionInputs/PrizeCard.vue";
 import eventBus from "../../eventBus.js"
 
@@ -92,6 +93,7 @@ export default {
     MoonErc20,
     MoonbeamErc20,
     MoonriverErc20,
+    PushNotification,
     RecaptchaToken: ""
   },
   mounted(){
diff --git a/src/components/participant/ActionInputs/PushNotification.vue b/src/components/participant/ActionInputs/PushNotification.vue
new file mode 100644
index 00000000..37a07b06
--- /dev/null
+++ b/src/components/participant/ActionInputs/PushNotification.vue
@@ -0,0 +1,111 @@
+<template>
+  <b-card no-body class="action-wrap">
+    <b-card-header
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      :aria-controls="`collapse-${idValue}`"
+      @click="visible = !visible"
+    >
+      <b-row>
+        <b-col cols="1" sm="1" md="1">
+          <img src="../../../assets/file.svg" height="25px" />
+        </b-col>
+        <b-col cols="9" sm="9" class="text-left" md="9">
+          <div class="text text-capitalize">{{ data.title }}</div>
+        </b-col>
+        <b-col cols="2" sm="2" md="2">
+          <b-badge class="btn-score" @click="update()" v-if="!done">
+            <img src="../../../assets/plus.svg" />
+            {{ data.score }}
+          </b-badge>
+          <img
+            class="check-mark"
+            src="../../../assets/check-circle-fill.svg"
+            height="25px"
+            v-if="done"
+          />
+        </b-col>
+      </b-row>
+    </b-card-header>
+    <b-collapse :id="`collapse-${idValue}`" v-model="visible">
+      <b-card-body class="user-details">
+        <b-row>
+          <b-col cols="12" sm="12" md="12">
+            <div class="follow">
+              <b-form-input
+                type="text"
+                :placeholder="data.placeHolder"
+                v-model="data.value"
+                :disabled="done"
+                :required="data.isManadatory"
+              ></b-form-input>
+            </div>
+          </b-col>
+        </b-row>
+        <b-row v-if="!done">
+          <b-col cols="12" sm="12" md="12" >
+            <button class="btn btn-link center"  @click="update()">Continue</button>
+          </b-col>
+        </b-row>
+      </b-card-body>
+    </b-collapse>
+  </b-card>
+</template>
+<style scoped>
+.center{
+  display: block; margin-left: auto;margin-right: auto
+}
+</style>
+
+<script>
+import eventBus from "../../../eventBus.js";
+import {
+  isValidURL,
+  isEmpty,
+} from "../../../mixins/fieldValidationMixin";
+import notificationMixins from "../../../mixins/notificationMixins";
+import Messages from "../../../utils/messages/participants/en";
+export default {
+  name: "PushNotification",
+  props: {
+    idValue: {
+      required: true,
+    },
+    data: {
+      required: true,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      done: this.data.isDone,
+    };
+  },
+  mounted() {
+    eventBus.$on(`disableInput${this.data._id}`, this.disableInput);
+  },
+  methods: {
+    update() {
+      if (!this.isFieldValid()) {
+        this.data.value = "";
+        return this.notifyErr(Messages.EVENT_ACTIONS.INVALID_INPUT);
+      } else {
+        this.$emit("input", this.data.value);
+      }
+    },
+    isFieldValid() {
+      if (isEmpty(this.data.value)) {
+        return false;
+      }
+      if (isValidURL(this.data.value)) {
+        return false;
+      }
+      return true;
+    },
+    disableInput(data) {
+      this.done = data;
+    },
+  },
+  mixins: [notificationMixins],
+};
+</script>

From 92652035c8380e1fb1006de2673027d18784b18e Mon Sep 17 00:00:00 2001
From: Pratap Mridha <pratapmridha@gmail.com>
Date: Fri, 11 Feb 2022 20:55:17 +0530
Subject: [PATCH 2/2] first commit serviceworker

---
 package.json                                  |  23 +++-
 public/service-worker.js                      |  46 +++++++
 .../CreateProjectSlide.vue                    |   1 +
 src/components/participant/Action.vue         |   4 +-
 .../ActionInputs/PushNotification.vue         | 128 ++++++++++++++++--
 src/config.js                                 |   1 +
 src/main.js                                   |   2 +
 src/serviceWorker.js                          |  53 ++++++++
 src/views/admin/Events.vue                    |   2 +-
 9 files changed, 245 insertions(+), 15 deletions(-)
 create mode 100644 public/service-worker.js
 create mode 100644 src/serviceWorker.js

diff --git a/package.json b/package.json
index 21264d08..f54b867e 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,12 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode production",
-    "dev": "vue-cli-service serve --mode staging",
+    "watch":"watchify src/serviceWorker.js  -o public/service-worker.js  -v [ babelify --presets [es2015] ]",
+    "start:dev": " vue-cli-service serve --mode staging ",
+    "dev":"npm run watch & npm run start:dev",
     "setEnv": "cp env.staging .env",
-    "build": "vue-cli-service build",
+    "serviceworker":"browserify src/serviceWorker.js  -o public/service-worker.js  -v [ babelify --presets [es2015] ]",
+    "build": " npm run serviceworker & vue-cli-service build ",
     "build-stage": "vue-cli-service build --mode staging",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
@@ -18,7 +21,9 @@
     "auth0-js": "^9.16.2",
     "axios": "^0.21.1",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "browserify": "^17.0.0",
     "dayjs": "^1.10.6",
+    "dotenv": "^16.0.0",
     "js-file-download": "^0.4.12",
     "marked": "^3.0.8",
     "node-fetch": "^2.6.0",
@@ -40,20 +45,34 @@
     "vuejs-datepicker": "^1.6.2",
     "vuejs-datetimepicker": "^1.1.13",
     "vuejs-paginate": "^2.1.0",
+    "watchify": "^4.0.0",
     "web3": "^1.6.0"
   },
   "devDependencies": {
+    "babelify": "^7.2.0",
     "@vue/cli-plugin-babel": "^3.0.0-rc.10",
     "@vue/cli-plugin-eslint": "^3.0.0-rc.10",
     "@vue/cli-plugin-unit-mocha": "^3.0.0-rc.10",
     "@vue/cli-service": "^3.0.0-rc.10",
     "@vue/test-utils": "^1.0.0-beta.20",
+    "babel-preset-es2015": "^6.24.1",
     "chai": "^4.1.2",
     "eslint": "^5.16.0",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-vue": "^5.2.3",
     "prettier": "^2.4.1",
     "vue-template-compiler": "^2.5.16"
+  }, "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015"
+          ]
+        }
+      ]
+    ]
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/service-worker.js b/public/service-worker.js
new file mode 100644
index 00000000..effa4030
--- /dev/null
+++ b/public/service-worker.js
@@ -0,0 +1,46 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+"use strict";
+
+self.addEventListener("install", function () {
+
+  console.log("Service worker installing...");
+  // Add a call to skipWaiting here
+});
+
+self.addEventListener("activate", function () {
+  console.log("Service Worker actives");
+});
+
+self.addEventListener('notificationclick', function (e) {
+  clients.openWindow(e.action);
+});
+
+self.addEventListener("push", function (e) {
+
+  // var options = {
+  //   body: body,
+  //   icon: "/mstile-150x150.png",
+  //   image: "",
+  //   vibrate: [100, 50, 100],
+  //   sound: "clip",
+  //   data: {
+  //     dateOfArrival: Date.now(),
+  //     primaryKey: 1,
+  //   },
+  //   actions: [
+  //     {
+  //       action: "explore",
+  //       title: "Explore this new world",
+
+  //     },
+  //     {
+  //       action: "close",
+  //       title: "I don't want any of this",
+
+  //     },
+  //   ],
+  // };
+  e.waitUntil(self.registration.showNotification("Push Notification", e.data.json()));
+});
+
+},{}]},{},[1]);
diff --git a/src/components/admin/createProjectSlider/CreateProjectSlide.vue b/src/components/admin/createProjectSlider/CreateProjectSlide.vue
index 64def6ae..aa88eb47 100644
--- a/src/components/admin/createProjectSlider/CreateProjectSlide.vue
+++ b/src/components/admin/createProjectSlider/CreateProjectSlide.vue
@@ -392,6 +392,7 @@ export default {
           { text: "LINK", value: "INPUT_HYPERLINK" },
           { text: "HYPERLINK", value: "HYPERLINK_URL" },
           { text: "INFO", value: "INFO_TEXT" },
+          
         ],
         socialAction: [
           { text: "Select Social Action type", value: null },
diff --git a/src/components/participant/Action.vue b/src/components/participant/Action.vue
index e9793609..819d4997 100644
--- a/src/components/participant/Action.vue
+++ b/src/components/participant/Action.vue
@@ -7,10 +7,11 @@
     ></loading>
     <Profile :user="userProfile"/>
     <prize-card v-if="isPrizedata" :prizeData="prizeData"/>
-    <push-notification />
+   
     <template v-for="(actionItem,index) in ActionSchema">
       <component :is="CapitaliseString(actionItem.type)" :key="index" :idValue="index" :data="actionItem" @input="updateUserInfo(actionItem, $event)"></component>
     </template>
+     <push-notification />
   </div>
 </template>
 <script>
@@ -38,6 +39,7 @@ import MoonbeamErc20 from "./ActionInputs/MoonbeamErc20.vue"
 import MoonriverErc20 from "./ActionInputs/MoonriverErc20.vue"
 import BinanceErc20 from "./ActionInputs/BinanceErc20.vue";
 import ReefErc20 from "./ActionInputs/ReefErc20.vue";
+
 import InputDate from "./ActionInputs/InputDate.vue";
 import InputNumber from "./ActionInputs/InputNumber.vue";
 import InputHyperlink from "./ActionInputs/InputHyperlink.vue";
diff --git a/src/components/participant/ActionInputs/PushNotification.vue b/src/components/participant/ActionInputs/PushNotification.vue
index 37a07b06..7e7561e9 100644
--- a/src/components/participant/ActionInputs/PushNotification.vue
+++ b/src/components/participant/ActionInputs/PushNotification.vue
@@ -32,19 +32,28 @@
         <b-row>
           <b-col cols="12" sm="12" md="12">
             <div class="follow">
-              <b-form-input
+              <!-- <b-form-input
                 type="text"
                 :placeholder="data.placeHolder"
                 v-model="data.value"
                 :disabled="done"
                 :required="data.isManadatory"
-              ></b-form-input>
+              ></b-form-input> -->
+              <button
+                :disabled="done"
+                class="btn btn-outline-twitter text-black"
+                @click="getBrowserSubscription()"
+              >
+                Subscribe
+              </button>
             </div>
           </b-col>
         </b-row>
         <b-row v-if="!done">
-          <b-col cols="12" sm="12" md="12" >
-            <button class="btn btn-link center"  @click="update()">Continue</button>
+          <b-col cols="12" sm="12" md="12">
+            <button class="btn btn-link center" @click="update()">
+              Continue
+            </button>
           </b-col>
         </b-row>
       </b-card-body>
@@ -52,19 +61,19 @@
   </b-card>
 </template>
 <style scoped>
-.center{
-  display: block; margin-left: auto;margin-right: auto
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 </style>
 
 <script>
 import eventBus from "../../../eventBus.js";
-import {
-  isValidURL,
-  isEmpty,
-} from "../../../mixins/fieldValidationMixin";
+import { isValidURL, isEmpty } from "../../../mixins/fieldValidationMixin";
 import notificationMixins from "../../../mixins/notificationMixins";
 import Messages from "../../../utils/messages/participants/en";
+import config from "../../../config";
 export default {
   name: "PushNotification",
   props: {
@@ -82,17 +91,44 @@ export default {
     };
   },
   mounted() {
+    if (this.$route.query) {
+      
+      if (this.$route.query.subsId === localStorage.getItem("subsId")) {
+        this.data.value = "Subscribed";
+        this.giveScore();
+      }
+    }
+
     eventBus.$on(`disableInput${this.data._id}`, this.disableInput);
   },
   methods: {
-    update() {
+    async giveScore() {
       if (!this.isFieldValid()) {
+        
         this.data.value = "";
         return this.notifyErr(Messages.EVENT_ACTIONS.INVALID_INPUT);
       } else {
         this.$emit("input", this.data.value);
       }
     },
+    async update() {
+      const response = await fetch(
+        config.studioServer.BASE_URL + "api/v1/push/verifyNotification",
+        {
+          method: "post",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${localStorage.getItem("authToken")}`,
+          },
+          body: JSON.stringify({
+            subObj: this.data.subObj,
+            id: this.data.subscription._id,
+            url: location.href,
+          }),
+        }
+      );
+      return response.json()
+    },
     isFieldValid() {
       if (isEmpty(this.data.value)) {
         return false;
@@ -105,6 +141,76 @@ export default {
     disableInput(data) {
       this.done = data;
     },
+
+    async saveSubscription(subscription) {
+      const response = await fetch(
+        config.studioServer.BASE_URL + "api/v1/push/subscribe",
+        {
+          method: "post",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${localStorage.getItem("authToken")}`,
+          },
+          body: JSON.stringify({ subObj: subscription }),
+        }
+      );
+      return response.json();
+    },
+    urlB64ToUint8Array(base64String) {
+      const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+      const base64 = (base64String + padding)
+        // eslint-disable-next-line no-useless-escape
+        .replace(/\-/g, "+")
+        .replace(/_/g, "/");
+      const rawData = atob(base64);
+      const outputArray = new Uint8Array(rawData.length);
+      for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+      }
+      return outputArray;
+    },
+
+    async getBrowserSubscription() {
+      if ("Notification" in window && navigator.serviceWorker) {
+        const permission = await Notification.requestPermission();
+        if (permission === "granted") {
+          this.notifySuccess("Notification Granted");
+          try {
+            await navigator.serviceWorker
+              .register(`/service-worker.js`, { scope: "/" })
+              .then(async () => {
+                return await navigator.serviceWorker.ready;
+              })
+              .then(async (reg) => {
+                const applicationServerKey = await this.urlB64ToUint8Array(
+                  config.webpush_public_key
+                );
+                reg.addEventListener("updatefound", () => {
+                 reg.update()
+                });
+                reg.pushManager
+                  .subscribe({ applicationServerKey, userVisibleOnly: true })
+                  .then(async (e) => {
+                   // console.log(JSON.stringify(e));
+
+                    this.data.subObj = e;
+                    this.data.subscription = await this.saveSubscription(e);
+                    localStorage.setItem("subsId", this.data.subscription._id);
+                  });
+              });
+
+            await this.notifySuccess("Registerd");
+          } catch (error) {
+            console.log(error);
+            return this.notifyErr("Service Worker Registration Faild");
+          }
+        } else if (permission === "blocked" || permission === "denied") {
+          return this.notifyErr("Notification Blocked");
+        }
+      } else {
+        return this.notifyErr("Notification Not Supported");
+      }
+    },
   },
   mixins: [notificationMixins],
 };
diff --git a/src/config.js b/src/config.js
index 26cec117..e27b61a0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -16,6 +16,7 @@ const config = {
     auth0ClinetId: process.env.VUE_APP_AUTH0_CLIENT_ID,
     telegramBotId: process.env.VUE_APP_TELEGRAM_BOT_ID,
     kommunicateAppId:process.env.VUE_APP_KOMMINICATE_APP_ID,
+    webpush_public_key:process.env.VUE_APP_WEBPUSH_VAPID_PUBLIC_KEY,
     eventActionType: {
         INPUT_TEXT: "INPUT_TEXT",
         INPUT_NUMBER :"INPUT_NUMBER",
diff --git a/src/main.js b/src/main.js
index 94853494..726e3417 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,3 +64,5 @@ new Vue({
   router,
   render: (h) => h(App),
 }).$mount("#app");
+
+
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
new file mode 100644
index 00000000..46a87023
--- /dev/null
+++ b/src/serviceWorker.js
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+self.addEventListener("install", () => {
+  
+  console.log("Service worker installing...");
+  // Add a call to skipWaiting here
+});
+
+
+self.addEventListener("activate",()=>{
+  console.log("Service Worker actives");
+})
+
+self.addEventListener('notificationclick',(e)=>{
+  clients.openWindow(e.action)
+  
+})
+
+self.addEventListener("push", function (e) {
+
+  
+  
+
+  // var options = {
+  //   body: body,
+  //   icon: "/mstile-150x150.png",
+  //   image: "",
+  //   vibrate: [100, 50, 100],
+  //   sound: "clip",
+  //   data: {
+  //     dateOfArrival: Date.now(),
+  //     primaryKey: 1,
+  //   },
+  //   actions: [
+  //     {
+  //       action: "explore",
+  //       title: "Explore this new world",
+        
+  //     },
+  //     {
+  //       action: "close",
+  //       title: "I don't want any of this",
+        
+  //     },
+  //   ],
+  // };
+  e.waitUntil(self.registration.showNotification("Push Notification", e.data.json()));
+});
diff --git a/src/views/admin/Events.vue b/src/views/admin/Events.vue
index ea9baa7e..2afeff19 100644
--- a/src/views/admin/Events.vue
+++ b/src/views/admin/Events.vue
@@ -736,7 +736,7 @@ export default {
         let eventActionValue= this.eventActionList;
         eventActionValue= eventActionValue.filter((x) => (x.type!=="INPUT_TEXT") && (x.type!=="INPUT_NUMBER") && (x.type!=="INPUT_DATE") && (x.type!=="INPUT_HYPERLINK") 
         && (x.type!=="BLOCKCHAIN_ETH") &&(x.type!=="BLOCKCHAIN_MATIC")&&(x.type!=="BLOCKCHAIN_BSC") &&(x.type!=="BLOCKCHAIN_ONE") &&(x.type!=="BLOCKCHAIN_AVAX") 
-        &&(x.type!=="BLOCKCHAIN_REEF") &&(x.type!=="BLOCKCHAIN_TEZ") &&(x.type!=="PRIZE_CARD"))
+        &&(x.type!=="BLOCKCHAIN_REEF") &&(x.type!=="BLOCKCHAIN_TEZ") &&(x.type!=="PRIZE_CARD")&&(x.type!=="PUSH_NOTIFICATION"))
         const filteredValueList=checkValue(eventActionValue, 'value');
         if(filteredValueList.includes(false)){
           return (Messages.EVENTS.CHECK_ALL_VALUE_EMPTY);