Merge pull request #391 from sparcs-kaist/feature/channeltalk

Feature/channeltalk
sparcs-kaist · Jul 26, 2023 · 0b78a87 · 0b78a87
2 parents 9f45bf8 + 85d923c
commit 0b78a87
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 1 deletion.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,4 @@
+VUE_APP_FIREBASE_CONFIG=
+VUE_APP_FIREBASE_VAPID_KEY=
+VUE_APP_CHANNEL_PLUGIN_KEY=
+VUE_APP_API_HOST= # api 주소 (명시하지 않으면 dev/prod 서버 api로 연결)
diff --git a/.github/workflows/aws.yml b/.github/workflows/aws.yml
@@ -81,6 +81,6 @@ jobs:
         # be deployed to ECS.
         chmod +x ./.github/workflows/github-actions.sh
         . ./.github/workflows/github-actions.sh
-        docker build --cache-from $ECR/$PROJECT_NAME:$CACHE_DOCKER_TAG --build-arg VUE_APP_API_MODE --build-arg VUE_APP_FIREBASE_CONFIG --build-arg VUE_APP_FIREBASE_VAPID_KEY -t $ECR_REGISTRY/$ECR_REPOSITORY:$DOCKER_TAG .
+        docker build --cache-from $ECR/$PROJECT_NAME:$CACHE_DOCKER_TAG --build-arg VUE_APP_API_MODE --build-arg VUE_APP_FIREBASE_CONFIG --build-arg VUE_APP_FIREBASE_VAPID_KEY --build-arg VUE_APP_CHANNEL_PLUGIN_KEY -t $ECR_REGISTRY/$ECR_REPOSITORY:$DOCKER_TAG .
         docker push $ECR_REGISTRY/$ECR_REPOSITORY:$DOCKER_TAG
         echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$DOCKER_TAG"
diff --git a/.github/workflows/github-actions.sh b/.github/workflows/github-actions.sh
@@ -13,20 +13,23 @@ if [ ! -z $GITHUB_REF ]; then
             export VUE_APP_API_MODE=production
             export VUE_APP_FIREBASE_CONFIG=$FIREBASE_CONFIG_PROD
             export VUE_APP_FIREBASE_VAPID_KEY=$FIREBASE_VAPID_KEY_PROD
+            export VUE_APP_CHANNEL_PLUGIN_KEY=$CHANNEL_PLUGIN_KEY
         else
             # Docker tag에 /가 들어갈 수 없어서 -로 변경
             export DOCKER_TAG=$(echo $NAME | sed -e "s/\//-/g")
             export CACHE_DOCKER_TAG=dev
             export VUE_APP_API_MODE=development
             export VUE_APP_FIREBASE_CONFIG=$FIREBASE_CONFIG_DEV
             export VUE_APP_FIREBASE_VAPID_KEY=$FIREBASE_VAPID_KEY_DEV
+            export VUE_APP_CHANNEL_PLUGIN_KEY=$CHANNEL_PLUGIN_KEY
         fi
     elif [ $TRIGGER_TYPE = "tags" ]; then
         export DOCKER_TAG=$NAME
         export CACHE_DOCKER_TAG=prod
         export VUE_APP_API_MODE=production
         export VUE_APP_FIREBASE_CONFIG=$FIREBASE_CONFIG_PROD
         export VUE_APP_FIREBASE_VAPID_KEY=$FIREBASE_VAPID_KEY_PROD
+        export VUE_APP_CHANNEL_PLUGIN_KEY=$CHANNEL_PLUGIN_KEY
     fi
 fi
 

diff --git a/Dockerfile b/Dockerfile
@@ -27,6 +27,7 @@ ARG VUE_APP_FIREBASE_VAPID_KEY
 RUN echo "VUE_APP_API_MODE=$VUE_APP_API_MODE" >> .env
 RUN echo "VUE_APP_FIREBASE_CONFIG=$VUE_APP_FIREBASE_CONFIG" >> .env
 RUN echo "VUE_APP_FIREBASE_VAPID_KEY=$VUE_APP_FIREBASE_VAPID_KEY" >> .env
+RUN echo "VUE_APP_CHANNEL_PLUGIN_KEY=$VUE_APP_CHANNEL_PLUGIN_KEY" >> .env
 RUN npm run build
 
 FROM nginx:1.19-alpine as newara-web

diff --git a/src/App.vue b/src/App.vue
@@ -10,6 +10,7 @@
 
 <script>
 import TheFooter from '@/components/TheFooter.vue'
+import ChannelService from '@/channel.js'
 
 export default {
   name: 'App',
@@ -29,6 +30,11 @@ export default {
     this.$router.afterEach((to, from) => {
       this.$Progress.finish()
     })
+
+    ChannelService.boot({
+      pluginKey: process.env.VUE_APP_CHANNEL_PLUGIN_KEY,
+      hideChannelButtonOnBoot: true
+    })
   },
 
   mounted () {

diff --git a/src/channel.js b/src/channel.js
@@ -0,0 +1,95 @@
+class ChannelService {
+  constructor () {
+    this.loadScript()
+  }
+
+  loadScript () {
+    (function () { var w = window; if (w.ChannelIO) { return w.console.error('ChannelIO script included twice.') } var ch = function () { ch.c(arguments) }; ch.q = []; ch.c = function (args) { ch.q.push(args) }; w.ChannelIO = ch; function l () { if (w.ChannelIOInitialized) { return }w.ChannelIOInitialized = true; var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js'; var x = document.getElementsByTagName('script')[0]; if (x.parentNode) { x.parentNode.insertBefore(s, x) } } if (document.readyState === 'complete') { l() } else { w.addEventListener('DOMContentLoaded', l); w.addEventListener('load', l) } })()
+  }
+
+  boot (option, callback) {
+    window.ChannelIO('boot', option, callback)
+  }
+
+  shutdown () {
+    window.ChannelIO('shutdown')
+  }
+
+  showMessenger () {
+    window.ChannelIO('showMessenger')
+  }
+
+  hideMessenger () {
+    window.ChannelIO('hideMessenger')
+  }
+
+  openChat (chatId, message) {
+    window.ChannelIO('openChat', chatId, message)
+  }
+
+  track (eventName, eventProperty) {
+    window.ChannelIO('track', eventName, eventProperty)
+  }
+
+  onShowMessenger (callback) {
+    window.ChannelIO('onShowMessenger', callback)
+  }
+
+  onHideMessenger (callback) {
+    window.ChannelIO('onHideMessenger', callback)
+  }
+
+  onBadgeChanged (callback) {
+    window.ChannelIO('onBadgeChanged', callback)
+  }
+
+  onChatCreated (callback) {
+    window.ChannelIO('onChatCreated', callback)
+  }
+
+  onFollowUpChanged (callback) {
+    window.ChannelIO('onFollowUpChanged', callback)
+  }
+
+  onUrlClicked (callback) {
+    window.ChannelIO('onUrlClicked', callback)
+  }
+
+  clearCallbacks () {
+    window.ChannelIO('clearCallbacks')
+  }
+
+  updateUser (userInfo, callback) {
+    window.ChannelIO('updateUser', userInfo, callback)
+  }
+
+  addTags (tags, callback) {
+    window.ChannelIO('addTags', tags, callback)
+  }
+
+  removeTags (tags, callback) {
+    window.ChannelIO('removeTags', tags, callback)
+  }
+
+  setPage (page) {
+    window.ChannelIO('setPage', page)
+  }
+
+  resetPage () {
+    window.ChannelIO('resetPage')
+  }
+
+  showChannelButton () {
+    window.ChannelIO('showChannelButton')
+  }
+
+  hideChannelButton () {
+    window.ChannelIO('hideChannelButton')
+  }
+
+  setAppearance (appearance) {
+    window.ChannelIO('setAppearance', appearance)
+  }
+}
+
+export default new ChannelService()
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
@@ -31,6 +31,12 @@
             {{ $t('rules') }}
           </a>
         </div>
+
+        <div class="footer-item">
+          <a @click="openChannelService()">
+            {{ $t('ask') }}
+          </a>
+        </div>
       </div>
 
       <div class="footer-contact is-hidden-mobile">
@@ -50,17 +56,42 @@
 
 <script>
 import TermsPopup from '@/components/TermsPopup.vue'
+import ChannelService from '@/channel.js'
+
 export default {
   name: 'TheFooter',
 
   components: {
     TermsPopup
   },
 
+  data () {
+    return {
+      isChannelOpen: false
+    }
+  },
+
   computed: {
     agreeTosAt () {
       return this.$store.state.auth.userProfile?.agree_terms_of_service_at
     }
+  },
+
+  methods: {
+    openChannelService () {
+      this.isChannelOpen = !this.isChannelOpen
+      if (this.isChannelOpen) {
+        ChannelService.updateUser({
+          profile: {
+            name: this.$store.state.auth.userProfile?.nickname,
+            email: this.$store.state.auth.userProfile?.email
+          }
+        })
+        ChannelService.showChannelButton()
+      } else {
+        ChannelService.hideChannelButton()
+      }
+    }
   }
 }
 </script>
@@ -71,11 +102,13 @@ ko:
   license: '라이센스'
   rules: '이용 약관'
   contact: '문의'
+  ask: '채널톡 문의하기'
 en:
   credit: 'Credit'
   license: 'License'
   rules: 'Terms of Service'
   contact: 'Contact'
+  ask: 'Ask ChannelTalk'
 </i18n>
 
 <style lang="scss" scoped>

diff --git a/src/views/Facade.vue b/src/views/Facade.vue
@@ -45,6 +45,7 @@
 <script>
 import { apiUrl } from '@/http'
 import { changeLocale } from '@/i18n'
+import ChannelService from '@/channel.js'
 
 export default {
   name: 'Facade',
@@ -56,6 +57,10 @@ export default {
     }
   },
 
+  created () {
+    ChannelService.showChannelButton()
+  },
+
   methods: {
     changeLocale
   }