feat: Widget Builder (#5104)

* feat: Add widget builder
2022-08-02 13:04:20 +05:30
parent 945288ce15
commit d9b102cff0
10 changed files with 1079 additions and 149 deletions
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -1,8 +1,42 @@
 <template>
-  <div class="widget-wrapper">
-    <WidgetHead :config="getWidgetHeadConfig" />
-    <WidgetBody />
-    <WidgetFooter />
+  <div class="widget-preview-container">
+    <div v-if="isWidgetVisible" class="screen-selector">
+      <input-radio-group
+        name="widget-screen"
+        :items="widgetScreens"
+        :action="handleScreenChange"
+      />
+    </div>
+    <div v-if="isWidgetVisible" class="widget-wrapper">
+      <WidgetHead :config="getWidgetHeadConfig" />
+      <div>
+        <WidgetBody :config="getWidgetBodyConfig" />
+        <WidgetFooter :config="getWidgetFooterConfig" />
+        <div class="branding">
+          <a class="branding-link">
+            <img class="branding-image" :src="globalConfig.logoThumbnail" />
+            <span>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT') }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="widget-bubble" :style="getBubblePositionStyle">
+      <button
+        class="bubble"
+        :class="getBubbleTypeClass"
+        :style="{ background: color }"
+        @click="toggleWidget"
+      >
+        <img
+          v-if="!isWidgetVisible"
+          src="~dashboard/assets/images/bubble-logo.svg"
+          alt=""
+        />
+        <div>
+          {{ getWidgetBubbleLauncherTitle }}
+        </div>
+      </button>
+    </div>
  </div>
 </template>

@@ -10,6 +44,9 @@
 import WidgetHead from './WidgetHead';
 import WidgetBody from './WidgetBody';
 import WidgetFooter from './WidgetFooter';
+import InputRadioGroup from 'dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup';
+
+const { LOGO_THUMBNAIL: logoThumbnail } = window.globalConfig || {};

 export default {
  name: 'Widget',
@@ -17,13 +54,14 @@ export default {
    WidgetHead,
    WidgetBody,
    WidgetFooter,
+    InputRadioGroup,
  },
  props: {
    welcomeHeading: {
      type: String,
-      default: 'Hi There,',
+      default: '',
    },
-    welcomeTagLine: {
+    welcomeTagline: {
      type: String,
      default: '',
    },
@@ -32,52 +70,228 @@ export default {
      default: '',
      required: true,
    },
-    websiteDomain: {
-      type: String,
-      default: '',
-    },
    logo: {
      type: String,
      default: '',
    },
-    isExpanded: {
-      type: Boolean,
-      default: true,
-    },
    isOnline: {
      type: Boolean,
      default: true,
    },
    replyTime: {
      type: String,
-      default: 'few minutes',
+      default: '',
    },
+    color: {
+      type: String,
+      default: '',
+    },
+    widgetBubblePosition: {
+      type: String,
+      default: '',
+    },
+    widgetBubbleLauncherTitle: {
+      type: String,
+      default: '',
+    },
+    widgetBubbleType: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      widgetScreens: [
+        {
+          id: 'default',
+          title: this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_SCREEN.DEFAULT'),
+          checked: true,
+        },
+        {
+          id: 'chat',
+          title: this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_SCREEN.CHAT'),
+          checked: false,
+        },
+      ],
+      isDefaultScreen: true,
+      isWidgetVisible: true,
+      globalConfig: {
+        logoThumbnail,
+      },
+    };
  },
  computed: {
    getWidgetHeadConfig() {
      return {
        welcomeHeading: this.welcomeHeading,
-        welcomeTagLine: this.welcomeTagLine,
+        welcomeTagline: this.welcomeTagline,
        websiteName: this.websiteName,
-        websiteDomain: this.websiteDomain,
        logo: this.logo,
-        isExpanded: this.isExpanded,
+        isDefaultScreen: this.isDefaultScreen,
        isOnline: this.isOnline,
-        replyTime: this.replyTime,
+        replyTime: this.replyTimeText,
+        color: this.color,
      };
    },
+    getWidgetBodyConfig() {
+      return {
+        welcomeHeading: this.welcomeHeading,
+        welcomeTagline: this.welcomeTagline,
+        isDefaultScreen: this.isDefaultScreen,
+        isOnline: this.isOnline,
+        replyTime: this.replyTimeText,
+        color: this.color,
+        logo: this.logo,
+      };
+    },
+    getWidgetFooterConfig() {
+      return {
+        isDefaultScreen: this.isDefaultScreen,
+        color: this.color,
+      };
+    },
+    replyTimeText() {
+      switch (this.replyTime) {
+        case 'in_a_few_minutes':
+          return this.$t(
+            'INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_MINUTES'
+          );
+        case 'in_a_day':
+          return this.$t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_DAY');
+        default:
+          return this.$t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_HOURS');
+      }
+    },
+    getBubblePositionStyle() {
+      return {
+        justifyContent: this.widgetBubblePosition === 'left' ? 'start' : 'end',
+      };
+    },
+    getBubbleTypeClass() {
+      return {
+        'bubble-close': this.isWidgetVisible,
+        'bubble-expanded':
+          !this.isWidgetVisible && this.widgetBubbleType === 'expanded_bubble',
+      };
+    },
+    getWidgetBubbleLauncherTitle() {
+      return this.isWidgetVisible || this.widgetBubbleType === 'standard'
+        ? ' '
+        : this.widgetBubbleLauncherTitle;
+    },
+  },
+  methods: {
+    handleScreenChange(item) {
+      this.isDefaultScreen = item.id === 'default';
+    },
+    toggleWidget() {
+      this.isWidgetVisible = !this.isWidgetVisible;
+      this.isDefaultScreen = true;
+    },
  },
 };
 </script>

 <style lang="scss" scoped>
-.text-lg {
-  font-size: var(--font-size-default);
+.screen-selector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .widget-wrapper {
-  box-shadow: var(--shadow-larger);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: var(--shadow-widget-builder);
  border-radius: var(--border-radius-large);
-  background-color: var(--color-background);
-  z-index: 99;
+  background-color: #f4f6fb;
+  width: calc(var(--space-large) * 10);
+  height: calc(var(--space-mega) * 5);
+
+  .branding {
+    padding-top: var(--space-one);
+    padding-bottom: var(--space-one);
+    display: flex;
+    justify-content: center;
+
+    .branding-link {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      color: var(--b-500);
+      cursor: pointer;
+      filter: grayscale(1);
+      font-size: var(--font-size-micro);
+      opacity: 0.9;
+      text-decoration: none;
+
+      &:hover {
+        filter: grayscale(0);
+        opacity: 1;
+        color: var(--b-600);
+      }
+
+      .branding-image {
+        max-width: var(--space-one);
+        max-height: var(--space-one);
+        margin-right: var(--space-micro);
+      }
+    }
+  }
+}
+.widget-bubble {
+  display: flex;
+  flex-direction: row;
+  margin-top: var(--space-normal);
+  width: calc(var(--space-large) * 10);
+
+  .bubble {
+    display: flex;
+    align-items: center;
+    border-radius: calc(var(--border-radius-small) * 10);
+    height: calc(var(--space-three) * 2);
+    width: calc(var(--space-three) * 2);
+    position: relative;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+
+    img {
+      height: var(--space-two);
+      width: var(--space-two);
+      margin: var(--space-one) var(--space-one) var(--space-one)
+        var(--space-two);
+    }
+
+    div {
+      padding-right: var(--space-two);
+    }
+  }
+
+  .bubble-close::before,
+  .bubble-close::after {
+    background-color: var(--white);
+    content: ' ';
+    display: inline;
+    height: var(--space-medium);
+    width: var(--space-micro);
+    left: var(--space-three);
+    position: absolute;
+  }
+
+  .bubble-close::before {
+    transform: rotate(45deg);
+  }
+
+  .bubble-close::after {
+    transform: rotate(-45deg);
+  }
+
+  .bubble-expanded {
+    font-size: var(--font-size-default);
+    font-weight: var(--font-weight-medium);
+    color: var(--white);
+    width: auto !important;
+    height: var(--space-larger) !important;
+  }
 }
 </style>
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,24 +1,42 @@
 <template>
-  <div class="conversation--container">
-    <div class="conversation-wrap">
-      <div class="message-wrap">
-        <div class="user-message-wrap">
-          <div class="user-message">
-            <div class="message-wrap">
-              <div class="chat-bubble user">
-                <p>Hello</p>
+  <div class="widget-body-container">
+    <div v-if="config.isDefaultScreen" class="availability-content">
+      <div class="availability-info">
+        <div class="team-status">
+          {{ getStatusText }}
+        </div>
+        <div class="reply-wait-message">
+          {{ config.replyTime }}
+        </div>
+      </div>
+      <thumbnail username="J" size="40" />
+    </div>
+    <div v-else class="conversation-content">
+      <div class="conversation-wrap">
+        <div class="message-wrap">
+          <div class="user-message-wrap">
+            <div class="user-message">
+              <div class="message-wrap">
+                <div
+                  class="chat-bubble user"
+                  :style="{ background: config.color }"
+                >
+                  <p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
+                </div>
              </div>
            </div>
          </div>
        </div>
-      </div>
-      <div class="agent-message-wrap">
-        <div class="agent-message">
-          <div class="avatar-wrap" />
-          <div class="message-wrap">
-            <div class="chat-bubble agent">
-              <div class="message-content">
-                <p>Hello</p>
+        <div class="agent-message-wrap">
+          <div class="agent-message">
+            <div class="avatar-wrap" />
+            <div class="message-wrap">
+              <div class="chat-bubble agent">
+                <div class="message-content">
+                  <p>
+                    {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
+                  </p>
+                </div>
              </div>
            </div>
          </div>
@@ -29,51 +47,105 @@
 </template>

 <script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 export default {
  name: 'WidgetBody',
+  components: {
+    Thumbnail,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    getStatusText() {
+      return this.config.isOnline
+        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
+        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
+    },
+    getWidgetBodyClass() {
+      return {
+        'with-chat-view': !this.config.isDefaultScreen,
+        'with-heading-or-title':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline),
+        'with-heading-or-title-without-logo':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline) &&
+          !this.config.logo,
+        'without-heading-and-title':
+          this.config.isDefaultScreen &&
+          !this.config.welcomeHeading &&
+          !this.config.welcomeTagline,
+      };
+    },
+  },
 };
 </script>

 <style scoped lang="scss">
-$tailwind-black-700: #3c4858;
-.conversation--container {
-  width: 100%;
-  padding: var(--space-two);
-  .conversation-wrap {
-    min-height: 200px;
-    .user-message {
-      align-items: flex-end;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      margin-top: 0;
-      margin-bottom: var(--space-smaller);
-      margin-left: auto;
-      max-width: 85%;
-      text-align: right;
+.widget-body-container {
+  .availability-content {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    padding: var(--space-one) var(--space-two) var(--space-one) var(--space-two);
+    min-height: inherit;
+
+    .availability-info {
+      width: 100%;
+      .team-status {
+        font-size: var(--font-size-default);
+        font-weight: var(--font-weight-medium);
+      }
+      .reply-wait-message {
+        font-size: var(--font-size-mini);
+      }
    }
-    .message-wrap {
-      margin-right: var(--space-smaller);
-      max-width: 100%;
-      .chat-bubble {
-        box-shadow: var(--shadow-medium);
-        background: var(--color-woot);
-        border-radius: var(--border-radius-large);
-        color: var(--white);
-        display: inline-block;
-        font-size: var(--font-size-nano);
-        line-height: 1.5;
-        padding: var(--space-small) var(--space-one);
-        text-align: left;
-        word-break: break-word;
+  }
+  .conversation-content {
+    height: calc(var(--space-large) * 10);
+    padding: 0 var(--space-two);
+    .conversation-wrap {
+      .user-message {
+        align-items: flex-end;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        margin-top: var(--space-zero);
+        margin-bottom: var(--space-smaller);
+        margin-left: auto;
+        max-width: 85%;
+        text-align: right;
+      }
+      .message-wrap {
+        margin-right: var(--space-smaller);
        max-width: 100%;
-        &.user {
-          border-bottom-right-radius: var(--border-radius-small);
-        }
-        &.agent {
-          background: var(--white);
-          border-bottom-left-radius: var(--border-radius-small);
-          color: $tailwind-black-700;
+        .chat-bubble {
+          box-shadow: var(--shadow-medium);
+          border-radius: 2rem;
+          color: var(--white);
+          display: inline-block;
+          font-size: var(--font-size-nano);
+          line-height: 1.5;
+          padding: 1.3rem 1.75rem;
+          text-align: left;
+
+          p {
+            margin: var(--space-zero);
+          }
+
+          &.user {
+            border-bottom-right-radius: var(--border-radius-small);
+            background: var(--color-woot);
+          }
+          &.agent {
+            background: var(--white);
+            border-bottom-left-radius: var(--border-radius-small);
+            color: var(--b-900);
+          }
        }
      }
    }
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -1,38 +1,102 @@
 <template>
  <div class="footer-wrap">
-    <div class="input-area" />
+    <custom-button
+      v-if="config.isDefaultScreen"
+      class="start-conversation"
+      :style="{ background: config.color }"
+    >
+      {{
+        $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
+      }}
+    </custom-button>
+    <div v-else class="chat-message-input is-focused">
+      <resizable-text-area
+        id="chat-input"
+        :placeholder="
+          $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
+        "
+        class="user-message-input is-focused"
+      />
+      <div class="button-wrap">
+        <fluent-icon icon="emoji" />
+        <fluent-icon class="icon-send" icon="send" />
+      </div>
+    </div>
  </div>
 </template>

 <script>
+import CustomButton from 'dashboard/components/buttons/Button';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
 export default {
  name: 'WidgetFooter',
+  components: {
+    CustomButton,
+    ResizableTextArea,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
 };
 </script>

 <style scoped lang="scss">
+@import '~dashboard/assets/scss/variables.scss';
 .footer-wrap {
-  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    top: var(--space-one);
-    left: 0;
-    width: 100%;
-    height: var(--space-one);
-    opacity: 0.1;
-    background: var(--color-background);
+  padding-left: var(--space-two);
+  padding-right: var(--space-two);
+
+  .start-conversation {
+    justify-content: center;
+    font-size: var(--font-size-small);
+    border-radius: var(--border-radius-normal);
+    padding-left: var(--space-two);
+    padding-right: var(--space-two);
  }

-  .input-area {
-    background-color: var(--white);
+  .chat-message-input {
+    align-items: center;
+    display: flex;
+    padding: var(--space-zero) var(--space-small) var(--space-zero)
+      var(--space-slab);
    border-radius: var(--border-radius-normal);
-    height: var(--space-larger);
-    margin: var(--space-two);
+    background: white;
+
+    &.is-focused {
+      box-shadow: 0 0 0 0.1rem var(--color-woot), 0 0 0.2rem 0.2rem var(--w-100);
+    }
+  }
+
+  .button-wrap {
+    display: flex;
+    align-items: center;
+    padding-left: var(--space-small);
+  }
+
+  .user-message-input {
+    border: 0;
+    height: var(--space-medium);
+    min-height: var(--space-medium);
+    max-height: var(--space-giga);
+    line-height: 1;
+    font-size: var(--font-size-small);
+    resize: none;
+    padding: var(--space-zero);
+    padding-top: var(--space-smaller);
+    padding-bottom: var(--space-smaller);
+    margin-top: var(--space-small);
+    margin-bottom: var(--space-small);
+  }
+
+  .icon-send {
+    margin-left: var(--space-one);
  }
 }
 </style>
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -6,25 +6,19 @@
          v-if="config.logo"
          :src="config.logo"
          class="logo"
-          :class="{ small: !config.isExpanded }"
+          :class="{ small: !isDefaultScreen }"
        />
-        <div v-if="!config.isExpanded">
-          <div class="title-block text-base font-medium">
-            <span class="mr-1">{{ config.websiteName }}</span>
+        <div v-if="!isDefaultScreen">
+          <div class="title-block">
+            <span>{{ config.websiteName }}</span>
            <div v-if="config.isOnline" class="online-dot" />
          </div>
-          <div class="text-xs mt-1 text-black-700">
-            {{ responseTime }}
-          </div>
+          <div>{{ config.replyTime }}</div>
        </div>
      </div>
-      <div v-if="config.isExpanded" class="header-expanded">
-        <h2 class="text-slate-900 mt-6 text-4xl mb-3 font-normal">
-          {{ config.welcomeHeading }}
-        </h2>
-        <p class="text-lg text-black-700 leading-normal">
-          {{ config.welcomeTagLine }}
-        </p>
+      <div v-if="isDefaultScreen" class="header-expanded">
+        <h2>{{ config.welcomeHeading }}</h2>
+        <p>{{ config.welcomeTagline }}</p>
      </div>
    </div>
  </div>
@@ -35,44 +29,31 @@ export default {
  props: {
    config: {
      type: Object,
-      default() {
-        return {};
-      },
+      default: () => {},
    },
  },
  computed: {
-    responseTime() {
-      switch (this.config.replyTime) {
-        case 'in_a_few_minutes':
-          return this.$t(
-            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES'
-          );
-        case 'in_a_few_hours':
-          return this.$t(
-            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS'
-          );
-        case 'in_a_day':
-          return this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY');
-        default:
-          return this.$t(
-            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS'
-          );
-      }
+    isDefaultScreen() {
+      return (
+        this.config.isDefaultScreen &&
+        (this.config.welcomeHeading.length !== 0 ||
+          this.config.welcomeTagline.length !== 0)
+      );
    },
  },
 };
 </script>

 <style lang="scss" scoped>
-$sucess-green: #10b981;
 .header-wrapper {
  flex-shrink: 0;
  transition: max-height 300ms;
  background-color: var(--white);
  padding: var(--space-two);
+  border-top-left-radius: var(--border-radius-large);
+  border-top-right-radius: var(--border-radius-large);

  .header-branding {
-    max-height: 16rem;
    .header {
      display: flex;
      flex-direction: row;
@@ -90,22 +71,34 @@ $sucess-green: #10b981;
        }
      }
    }
+
+    .header-expanded {
+      max-height: var(--space-giga);
+      overflow: scroll;
+      h2 {
+        font-size: var(--font-size-big);
+        margin-bottom: var(--space-small);
+        margin-top: var(--space-two);
+        overflow-wrap: break-word;
+      }
+
+      p {
+        font-size: var(--font-size-small);
+        overflow-wrap: break-word;
+      }
+    }
  }
-  .text-base {
-    font-size: var(--font-size-default);
-  }
-  .mt-6 {
-    margin-top: var(--space-medium);
-  }
+
  .title-block {
    display: flex;
    align-items: center;
+    font-size: var(--font-size-default);
    .online-dot {
-      background-color: $sucess-green;
+      background-color: var(--g-500);
      height: var(--space-small);
      width: var(--space-small);
      border-radius: 100%;
-      margin: var(--space-zero) var(--space-one);
+      margin: var(--space-zero) var(--space-smaller);
    }
  }
 }