Feature: Support options message type on widget and dashboard (#614)

app/javascript/shared/components/CardButton.vue

@@ -50,11 +50,5 @@ export default {
   margin-top: $space-smaller;
   border-radius: $space-micro;
   font-weight: $font-weight-medium;
-
-  + .action-button {
-    background: white;
-    @include thin-border($color-woot);
-    color: $color-woot;
-  }
 }
 </style>

app/javascript/shared/components/ChatCard.vue

@@ -79,5 +79,11 @@ export default {
     object-fit: contain;
     max-height: 150px;
   }
+
+  .action-button + .action-button {
+    background: white;
+    @include thin-border($color-woot);
+    color: $color-woot;
+  }
 }
 </style>

app/javascript/shared/components/ChatOption.vue

@@ -0,0 +1,68 @@
+<template>
+  <li class="option" :class="{ 'is-selected': isSelected }">
+    <button class="option-button button" @click="onClick">
+      <span v-if="isSelected" class="icon ion-checkmark-circled" />
+      <span v-else class="icon ion-android-radio-button-off" />
+      <span>{{ action.text }}</span>
+    </button>
+  </li>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    action: {
+      type: Object,
+      default: () => {},
+    },
+    isSelected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick() {
+      // Do postback here
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/variables.scss';
+@import '~dashboard/assets/scss/mixins.scss';
+.option {
+  .option-button {
+    width: 100%;
+    padding: 0;
+    max-height: $space-larger;
+    border-radius: 0;
+    background: transparent;
+    color: $color-woot;
+    border: 0;
+    text-align: left;
+    cursor: pointer;
+
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    > .icon {
+      margin-right: $space-smaller;
+      font-size: $font-size-medium;
+    }
+  }
+
+  + .option .option-button {
+    @include border-normal-top;
+  }
+
+  &.is-selected {
+    .option-button {
+      color: $success-color;
+    }
+  }
+}
+</style>

app/javascript/shared/components/ChatOptions.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="options-message chat-bubble agent">
+    <div class="card-body">
+      <h4 class="title">
+        {{ title }}
+      </h4>
+      <ul class="options" :class="{ 'has-selected': !!selected }">
+        <chat-option
+          v-for="option in options"
+          :key="option.id"
+          :action="option"
+          :is-selected="isSelected(option)"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChatOption from 'shared/components/ChatOption';
+
+export default {
+  components: {
+    ChatOption,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    selected: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    isSelected(option) {
+      return this.selected === option.id;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~dashboard/assets/scss/variables.scss';
+.has-selected {
+  .option-button:not(.is-selected) {
+    color: $color-light-gray;
+    cursor: initial;
+  }
+}
+</style>
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/variables.scss';
+@import '~dashboard/assets/scss/mixins.scss';
+
+.options-message {
+  @include border-normal;
+  background: white;
+  width: 60%;
+  max-width: 17rem;
+  padding: $space-small $space-normal;
+  border-radius: $space-small;
+  overflow: hidden;
+
+  .title {
+    font-size: $font-size-small;
+    font-weight: $font-weight-normal;
+    margin-top: $space-smaller;
+    margin-bottom: $space-smaller;
+    color: $color-heading;
+    line-height: 1.5;
+  }
+
+  .options {
+    width: 100%;
+
+    > li {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+</style>

app/javascript/widget/components/ConversationWrap.vue

@@ -90,7 +90,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/woot.scss';
+@import '~widget/assets/scss/variables.scss';
+@import '~widget/assets/scss/mixins.scss';
 
 .conversation--container {
   display: flex;