Develop

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,

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]);

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 },

src/components/participant/Action.vue

@@ -7,9 +7,11 @@
     ></loading>
     <Profile :user="userProfile"/>
     <prize-card v-if="isPrizedata" :prizeData="prizeData"/>
+
     <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>
@@ -37,10 +39,11 @@ 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";
-
+import PushNotification from "./ActionInputs/PushNotification.vue"
 import PrizeCard from "./ActionInputs/PrizeCard.vue";
 import eventBus from "../../eventBus.js"
 
@@ -92,6 +95,7 @@ export default {
     MoonErc20,
     MoonbeamErc20,
     MoonriverErc20,
+    PushNotification,
     RecaptchaToken: ""
   },
   mounted(){

src/components/participant/ActionInputs/PushNotification.vue

@@ -0,0 +1,217 @@
+<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> -->
+              <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>
+        </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";
+import config from "../../../config";
+export default {
+  name: "PushNotification",
+  props: {
+    idValue: {
+      required: true,
+    },
+    data: {
+      required: true,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      done: this.data.isDone,
+    };
+  },
+  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: {
+    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;
+      }
+      if (isValidURL(this.data.value)) {
+        return false;
+      }
+      return true;
+    },
+    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],
+};
+</script>

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",

src/main.js

@@ -64,3 +64,5 @@ new Vue({
   router,
   render: (h) => h(App),
 }).$mount("#app");
+
+