From 29bc11b4f67246da9c876828bbba9b2dc59e17fd Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:30:03 +0200
Subject: [PATCH] Fix the tutorial component

---
 .../components/UI/the-node/NodeTutorial.vue   | 187 ++----------------
 .../UI/the-node/TutorialButtons.vue           | 176 -----------------
 launcher/src/languages/en.json                |   4 +-
 3 files changed, 24 insertions(+), 343 deletions(-)
 delete mode 100644 launcher/src/components/UI/the-node/TutorialButtons.vue

diff --git a/launcher/src/components/UI/the-node/NodeTutorial.vue b/launcher/src/components/UI/the-node/NodeTutorial.vue
index 1b6549702..53ed64a6b 100644
--- a/launcher/src/components/UI/the-node/NodeTutorial.vue
+++ b/launcher/src/components/UI/the-node/NodeTutorial.vue
@@ -1,45 +1,28 @@
 <template>
   <div class="tutorial-box">
-    <!-- <TutorialButtons
-      tutorial-btn-ttl="written cuides"
-      tutorial-icons="/img/icon/tutorial-icons/manual-icon.png"
-      current-data="button"
-      @guided-option-clicked="handleGuidedOptionClick(button)"
-      @written-option-clicked="handleWrittenOptionClick(button)"
-      @video-option-clicked="handleVideoOptionClick(button)"
-    /> -->
-    <!-- <TutorialButtons
-      v-for="(button, key) in tutorialBtns"
-      :key="key"
-      :tutorial-btn-ttl="button.title"
-      :tutorial-icons="button.icon"
-      :current-data="button"
-      @guided-option-clicked="handleGuidedOptionClick(button)"
-      @written-option-clicked="handleWrittenOptionClick(button)"
-      @video-option-clicked="handleVideoOptionClick(button)"
-    /> -->
-
-    <!-- <TutorialButtons
-      v-for="item in tutorialTitles"
-      :key="item"
-      :tutorial-btn-ttl="item.name"
-      :tutorial-icons="item.icon"
-      :class="{ disabled: item.disable }"
-      @guided-option-clicked="handleGuidedOptionClick(item)"
-      @written-option-clicked="handleWrittenOptionClick(item)"
-      @video-option-clicked="handleVideoOptionClick(item)"
-    /> -->
     <div class="tutorial-btn" @click="handleWrittenOptionClick">
       <div class="icon-box"><img src="/img/icon/tutorial-icons/manual-icon.png" alt="" /></div>
-      <div class="name-span"><span>written guides</span></div>
+      <div class="name-span">
+        <span>{{ $t("nodeSidebarVideo.written") }}</span>
+      </div>
     </div>
     <div class="tutorial-btn" @click="handleCameraOptionClick">
       <div class="icon-box camera"><img src="/img/icon/tutorial-icons/big-camera.png" alt="" /></div>
-      <div class="name-span"><span>written guides</span></div>
+      <div class="name-span">
+        <span>{{ $t("nodeSidebarVideo.video") }}</span>
+      </div>
     </div>
-    <div class="tutorial-btn" @click="handleCameraOptionClick">
-      <div class="icon-box camera"><img src="/img/icon/tutorial-icons/big-camera.png" alt="" /></div>
-      <div class="name-span"><span>written guides</span></div>
+    <div class="tutorial-btn" @click="tutorial = true">
+      <div class="icon-box camera"><img src="/img/icon/tutorial-icons/Guide-icon.png" alt="" /></div>
+      <div class="name-span">
+        <span>{{ $t("nodeSidebarVideo.rpc") }}</span>
+      </div>
+    </div>
+    <div v-if="currentNetwork.id !== 4" class="tutorial-btn" @click="stakeGuide = true">
+      <div class="icon-box camera"><img src="/img/icon/tutorial-icons/Guide-icon.png" alt="" /></div>
+      <div class="name-span">
+        <span>{{ $t("nodeSidebarVideo.stake") }}</span>
+      </div>
     </div>
 
     <div
@@ -53,109 +36,20 @@
   </div>
 </template>
 <script>
-import { mapWritableState } from "pinia";
+import { mapWritableState, mapState } from "pinia";
 import { useFooter } from "@/store/theFooter";
 import { useNodeStore } from "@/store/theNode";
 import { useNodeHeader } from "@/store/nodeHeader";
-import { useTutorialStore } from "@/store/tutorialSteps";
-import { mapState } from "pinia";
 import { useNodeManage } from "@/store/nodeManage";
-// import TutorialButtons from "./TutorialButtons.vue";
 
 export default {
-  // components: { TutorialButtons },
   data() {
     return {
       returnStatus: this.$t("theNode.returnStatus"),
-      selectedGuide: "",
-      tutorialTitles: [
-        {
-          name: this.$t("nodeSidebarVideo.alert"),
-          icon: "/img/icon/manage-node-icons/QuestionMark.png",
-          disable: true,
-          video: "",
-          guide: "",
-          written: "",
-        },
-        {
-          name: this.$t("nodeSidebarVideo.switchC"),
-          icon: "/img/icon/manage-node-icons/QuestionMark.png",
-          disable: true,
-          video: "",
-          guide: "",
-          written: "",
-        },
-        {
-          name: this.$t("nodeSidebarVideo.migrate"),
-          icon: "/img/icon/manage-node-icons/QuestionMark.png",
-          disable: true,
-          video: "",
-          guide: "",
-          written: "",
-        },
-        {
-          name: this.$t("nodeSidebarVideo.rpc"),
-          icon: "/img/icon/manage-node-icons/QuestionMark.png",
-          disable: false,
-          video: " https://www.youtube.com/embed/iFzSdjg9r6U",
-          guide: "rpc",
-          written: "https://stereum.net/ethereum-node-setup/rpc_endpoint_metamask/",
-        },
-      ],
-      confData: {
-        mainnet: [
-          {
-            title: this.$t("nodeSidebarVideo.stake"),
-            guide: "stake",
-            video: "https://www.youtube.com/embed/Cbu58ee_Wj4",
-            written: "https://stereum.net/ethereum-node-setup/eth-solo-staking-step-by-step-guide/",
-            icon: "/img/icon/click-installation/mainnet-icon.png",
-          },
-        ],
-        goerli: [
-          {
-            title: this.$t("nodeSidebarVideo.stake"),
-            guide: "stake",
-            video: "https://www.youtube.com/embed/Cbu58ee_Wj4",
-            written: "https://stereum.net/ethereum-node-setup/eth-solo-staking-step-by-step-guide/",
-            icon: "/img/icon/click-installation/testnet-icon.png",
-          },
-          {
-            title: this.$t("nodeSidebarVideo.ssv"),
-            guide: "",
-            video: "https://www.youtube.com/embed/ccKoalZtjlA",
-            written: "https://stereum.net/ssv-network-node-operator-guide/",
-            icon: "/img/icon/click-installation/testnet-icon.png",
-          },
-        ],
-        sepolia: [
-          {
-            title: this.$t("nodeSidebarVideo.stake"),
-            guide: "",
-            video: "https://www.youtube.com/embed/Cbu58ee_Wj4",
-            written: "https://stereum.net/ethereum-node-setup/eth-solo-staking-step-by-step-guide/",
-            icon: "/img/icon/click-installation/testnet-icon.png",
-          },
-        ],
-        gnosis: [
-          {
-            title: this.$t("nodeSidebarVideo.gnoStake"),
-            guide: "",
-            video: "https://www.youtube.com/embed/qORXGzhZPns",
-            written: "https://stereum.net/ethereum-node-setup/gno-solo-staking/",
-            icon: "/img/icon/control/gno_currency_symbol.png",
-          },
-        ],
-      },
-      tutorialBtns: [],
     };
   },
 
   computed: {
-    ...mapWritableState(useTutorialStore, {
-      playYoutubeVideo: "playYoutubeVideo",
-      chosenVideo: "chosenVideo",
-    }),
     ...mapState(useNodeManage, {
       currentNetwork: "currentNetwork",
     }),
@@ -171,19 +65,7 @@ export default {
     }),
   },
 
-  mounted() {
-    this.mainButtonController();
-  },
   methods: {
-    handleGuidedOptionClick(item) {
-      this.selectedGuide = item.guide;
-
-      if (this.selectedGuide == "rpc") {
-        this.tutorial = true;
-      } else if (this.selectedGuide == "stake") {
-        this.stakeGuide = true;
-      }
-    },
     handleWrittenOptionClick() {
       let url = "https://stereum.net/content/guides";
       window.open(url, "_blank");
@@ -192,29 +74,6 @@ export default {
       let url = "https://www.youtube.com/@Stereum";
       window.open(url, "_blank");
     },
-    handleVideoOptionClick(item) {
-      this.chosenVideo = item.video;
-      this.playYoutubeVideo = true;
-    },
-    mainButtonController() {
-      const currentService = this.currentNetwork.network;
-
-      for (const service in this.confData) {
-        if (service === currentService) {
-          const buttons = this.confData[service].map((item) => {
-            return {
-              title: item.title,
-              icon: item.icon,
-              video: item.video,
-              guide: item.guide,
-              written: item.written,
-            };
-          });
-          this.tutorialBtns = buttons;
-          break;
-        }
-      }
-    },
   },
 };
 </script>
@@ -261,18 +120,14 @@ export default {
 .name-span {
   width: 75%;
   height: 100%;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   display: flex;
   text-transform: capitalize;
-  font-size: 115%;
+  font-size: 108%;
   font-weight: 700;
 }
-.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  user-select: none;
-}
+
 .tutorial-box {
   width: 90%;
   height: 89%;
diff --git a/launcher/src/components/UI/the-node/TutorialButtons.vue b/launcher/src/components/UI/the-node/TutorialButtons.vue
deleted file mode 100644
index defddddda..000000000
--- a/launcher/src/components/UI/the-node/TutorialButtons.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="button-container" :style="{ height: arrow ? '26%' : '10%' }">
-    <div class="button-parent" @click="arrow = !arrow">
-      <div class="icon">
-        <img :src="tutorialIcons" alt="" />
-      </div>
-      <div class="title">
-        <span>{{ tutorialBtnTtl }}</span>
-      </div>
-      <div v-if="!arrow" class="up-arrow"></div>
-      <div v-else class="down-arrow"></div>
-    </div>
-    <div v-if="arrow" class="button-info_sub">
-      <div v-for="option in options" :key="option.title" class="sub" @click="handleOptionClick(option)">
-        <div class="sub-icon">
-          <img :src="option.icon" :alt="option.title" />
-        </div>
-        <div class="button-info_sub_title">
-          <span>{{ option.title }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    tutorialIcons: {
-      type: String,
-      required: true,
-    },
-    tutorialBtnTtl: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      arrow: false,
-      options: [
-        {
-          title: "Video",
-          icon: "/img/icon/tutorial-icons/big-camera.png",
-        },
-        {
-          title: "Written",
-          icon: "/img/icon/tutorial-icons/manual-icon.png",
-        },
-        {
-          title: "Guided",
-          icon: "/img/icon/tutorial-icons/Guide-icon.png",
-        },
-      ],
-    };
-  },
-  methods: {
-    handleOptionClick(option) {
-      if (option.title === "Guided") {
-        this.$emit("guided-option-clicked");
-      } else if (option.title === "Written") {
-        this.$emit("written-option-clicked");
-      } else if (option.title === "Video") {
-        this.$emit("video-option-clicked");
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.button-container {
-  width: 95%;
-  display: flex;
-  flex-direction: column;
-  height: 9%;
-  justify-content: center;
-  align-items: center;
-}
-
-.button-parent {
-  height: 88%;
-  display: flex;
-  color: #eee;
-  border: 2px solid #eee;
-  border-radius: 5px;
-  margin-bottom: 1%;
-  justify-content: space-around;
-  align-items: center;
-  font-size: 55%;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.icon {
-  width: 20%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.icon img {
-  width: 90%;
-}
-
-.title {
-  display: flex;
-  width: 60%;
-  height: 100%;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.up-arrow {
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 7px solid #eee;
-  margin-right: 1%;
-}
-
-.down-arrow {
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 7px solid #eee;
-  margin-right: 1%;
-}
-
-.button-info_sub {
-  width: 90%;
-  min-height: 60%;
-  margin: 2% 0;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-}
-.sub {
-  width: 100%;
-  height: 28%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #264744;
-  margin-bottom: 3%;
-  border-radius: 5px;
-  cursor: pointer;
-}
-.sub:active {
-  background: rgba(43, 84, 81, 0.5);
-}
-.sub:hover {
-  background: rgb(51, 101, 97);
-}
-.sub-icon {
-  width: 25%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.sub-icon img {
-  width: 50%;
-}
-.button-info_sub_title {
-  width: 75%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #eee;
-  font-size: 80%;
-  text-transform: uppercase;
-  font-weight: 500;
-}
-</style>
diff --git a/launcher/src/languages/en.json b/launcher/src/languages/en.json
index 85e440929..2844a9fb6 100644
--- a/launcher/src/languages/en.json
+++ b/launcher/src/languages/en.json
@@ -79,7 +79,9 @@
     "switchC": "Switch Clients",
     "migrate": "Nodes Migration",
     "rpc": "RPC Connection",
-    "gnoStake": "STAKE WITH 1 GNO"
+    "gnoStake": "STAKE WITH 1 GNO",
+    "written": "Written Guides",
+    "video": "Video Guides"
   },
   "pluginZone": {
     "client": "client"