chore: Create a resuable component for selecting a channel (#6241)

app/javascript/dashboard/assets/scss/_woot.scss

@@ -37,7 +37,6 @@
 @include foundation-prototype-sizing;
 @include foundation-prototype-spacing;
 
-
 @import 'typography';
 @import 'layout';
 @import 'animations';
@@ -61,7 +60,6 @@
 @import 'widgets/woot-tables';
 
 @import 'views/settings/inbox';
-@import 'views/settings/channel';
 @import 'views/settings/integrations';
 
 @import 'plugins/multiselect';

app/javascript/dashboard/assets/scss/views/settings/channel.scss

@@ -1,52 +0,0 @@
-$channel-hover-color: rgba(0, 0, 0, 0.1);
-
-.channels {
-  margin-top: $space-medium;
-
-  .inactive {
-    filter: grayscale(100%);
-  }
-
-  .channel {
-    @include flex;
-    @include background-white;
-    @include border-light;
-
-    cursor: pointer;
-    flex-direction: column;
-    margin: -1px;
-    padding: $space-normal $zero;
-    transition: all 0.2s ease-in;
-
-    &:last-child {
-      @include border-light;
-    }
-
-    &:hover {
-      border: 1px solid $primary-color;
-      box-shadow: 0 2px 8px $channel-hover-color;
-      z-index: 999;
-    }
-
-    &.disabled {
-      opacity: 0.6;
-    }
-
-    img {
-      margin: $space-normal auto;
-      width: 50%;
-    }
-
-    .channel__title {
-      color: $color-body;
-      font-size: var(--font-size-default);
-      text-align: center;
-      text-transform: capitalize;
-    }
-
-    p {
-      color: $medium-gray;
-      width: 100%;
-    }
-  }
-}

app/javascript/dashboard/components/ChannelSelector.vue

@@ -0,0 +1,67 @@
+<template>
+  <button class="small-6 medium-4 large-3 channel" @click="$emit('click')">
+    <img :src="src" :alt="title" />
+    <h3 class="channel__title">
+      {{ title }}
+    </h3>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.inactive {
+  filter: grayscale(100%);
+}
+
+.channel {
+  background: var(--white);
+  border: 1px solid var(--color-border-light);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  margin: -1px;
+  padding: var(--space-normal) 0;
+  transition: all 0.2s ease-in;
+
+  &:hover {
+    border: 1px solid var(--w-500);
+    box-shadow: var(--shadow-medium);
+    z-index: var(--z-index-high);
+  }
+
+  &.disabled {
+    opacity: 0.6;
+  }
+
+  img {
+    margin: var(--space-normal) auto;
+    width: 50%;
+  }
+
+  .channel__title {
+    color: var(--color-body);
+    font-size: var(--font-size-default);
+    text-align: center;
+    text-transform: capitalize;
+  }
+
+  p {
+    color: var(--b-500);
+    width: 100%;
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -1,56 +1,15 @@
 <template>
-  <div
-    class="small-6 medium-4 large-3 columns channel"
+  <channel-selector
     :class="{ inactive: !isActive }"
+    :title="channel.name"
+    :src="getChannelThumbnail()"
     @click="onItemClick"
-  >
-    <img
-      v-if="channel.key === 'facebook'"
-      src="~dashboard/assets/images/channels/messenger.png"
-    />
-    <img
-      v-if="channel.key === 'twitter'"
-      src="~dashboard/assets/images/channels/twitter.png"
-    />
-    <img
-      v-if="channel.key === 'telegram'"
-      src="~dashboard/assets/images/channels/telegram.png"
-    />
-    <img
-      v-if="channel.key === 'api' && !channel.thumbnail"
-      src="~dashboard/assets/images/channels/api.png"
-    />
-    <img
-      v-if="channel.key === 'api' && channel.thumbnail"
-      :src="channel.thumbnail"
-    />
-    <img
-      v-if="channel.key === 'email'"
-      src="~dashboard/assets/images/channels/email.png"
-    />
-    <img
-      v-if="channel.key === 'line'"
-      src="~dashboard/assets/images/channels/line.png"
-    />
-    <img
-      v-if="channel.key === 'website'"
-      src="~dashboard/assets/images/channels/website.png"
-    />
-    <img
-      v-if="channel.key === 'sms'"
-      src="~dashboard/assets/images/channels/sms.png"
-    />
-    <img
-      v-if="channel.key === 'whatsapp'"
-      src="~dashboard/assets/images/channels/whatsapp.png"
-    />
-    <h3 class="channel__title">
-      {{ channel.name }}
-    </h3>
-  </div>
+  />
 </template>
 <script>
+import ChannelSelector from '../ChannelSelector';
 export default {
+  components: { ChannelSelector },
   props: {
     channel: {
       type: Object,
@@ -92,6 +51,12 @@ export default {
     },
   },
   methods: {
+    getChannelThumbnail() {
+      if (this.channel.key === 'api' && this.channel.thumbnail) {
+        return this.channel.thumbnail;
+      }
+      return `/assets/images/dashboard/channels/${this.channel.key}.png`;
+    },
     onItemClick() {
       if (this.isActive) {
         this.$emit('channel-item-click', this.channel.key);

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -9,7 +9,7 @@
         )
       "
     />
-    <div class="row channels">
+    <div class="row channel-list">
       <channel-item
         v-for="channel in channelList"
         :key="channel.key"
@@ -88,4 +88,8 @@ export default {
 .height-auto {
   height: auto;
 }
+
+.channel-list {
+  margin-top: var(--space-medium);
+}
 </style>