From ecdf977de70f1a1972dbb0f7dd48b31fe1427761 Mon Sep 17 00:00:00 2001
From: Sanju <sanjusdhr@gmail.com>
Date: Thu, 22 Jul 2021 18:36:33 +0530
Subject: [PATCH] Live chat widget preview #2441 (#2523)

* update widget preview on storybook

* removed default value for logo

* add online dot

* resolve PR comments

- split widget to head, body & footer
- updated reply time to a select box

* update spacing with variables

* update reply-time with i18

* update with spacing variables

* update padding with space variable

* resolved PR comments

* update background color

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
---
 .../widget-preview/components/Widget.vue      |  83 +++++++++++++
 .../widget-preview/components/WidgetBody.vue  |  82 +++++++++++++
 .../components/WidgetFooter.vue               |  38 ++++++
 .../widget-preview/components/WidgetHead.vue  | 112 ++++++++++++++++++
 .../widget-preview/stories/Widget.stories.js  |  29 +++++
 5 files changed, 344 insertions(+)
 create mode 100644 app/javascript/dashboard/modules/widget-preview/components/Widget.vue
 create mode 100644 app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
 create mode 100644 app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
 create mode 100644 app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
 create mode 100644 app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js

diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
new file mode 100644
index 000000000..0f630cbf7
--- /dev/null
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="widget-wrapper">
+    <WidgetHead :config="getWidgetHeadConfig" />
+    <WidgetBody />
+    <WidgetFooter />
+  </div>
+</template>
+
+<script>
+import WidgetHead from './WidgetHead';
+import WidgetBody from './WidgetBody';
+import WidgetFooter from './WidgetFooter';
+
+export default {
+  name: 'Widget',
+  components: {
+    WidgetHead,
+    WidgetBody,
+    WidgetFooter,
+  },
+  props: {
+    welcomeHeading: {
+      type: String,
+      default: 'Hi There,',
+    },
+    welcomeTagLine: {
+      type: String,
+      default: '',
+    },
+    websiteName: {
+      type: String,
+      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',
+    },
+  },
+  computed: {
+    getWidgetHeadConfig() {
+      return {
+        welcomeHeading: this.welcomeHeading,
+        welcomeTagLine: this.welcomeTagLine,
+        websiteName: this.websiteName,
+        websiteDomain: this.websiteDomain,
+        logo: this.logo,
+        isExpanded: this.isExpanded,
+        isOnline: this.isOnline,
+        replyTime: this.replyTime,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.text-lg {
+  font-size: var(--font-size-default);
+}
+.widget-wrapper {
+  box-shadow: var(--shadow-larger);
+  border-radius: var(--border-radius-large);
+  background-color: var(--color-background);
+  z-index: 99;
+}
+</style>
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
new file mode 100644
index 000000000..3bba815db
--- /dev/null
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -0,0 +1,82 @@
+<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>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="agent-message-wrap">
+        <div class="agent-message">
+          <div class="avatar-wrap"></div>
+          <div class="message-wrap">
+            <div class="chat-bubble agent">
+              <div class="message-content">
+                <p>Hello</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WidgetBody',
+};
+</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;
+    }
+    .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;
+        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;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
new file mode 100644
index 000000000..1150b884e
--- /dev/null
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="footer-wrap">
+    <div class="input-area"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WidgetFooter',
+};
+</script>
+
+<style scoped lang="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);
+  }
+
+  .input-area {
+    background-color: var(--white);
+    border-radius: var(--border-radius-normal);
+    height: var(--space-larger);
+    margin: var(--space-two);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
new file mode 100644
index 000000000..7857df8a4
--- /dev/null
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="header-wrapper">
+    <div class="header-branding">
+      <div class="header">
+        <img
+          v-if="config.logo"
+          :src="config.logo"
+          class="logo"
+          :class="{ small: !config.isExpanded }"
+        />
+        <div v-if="!config.isExpanded">
+          <div class="title-block text-base font-medium">
+            <span class="mr-1">{{ config.websiteName }}</span>
+            <div v-if="config.isOnline" class="online-dot"></div>
+          </div>
+          <div class="text-xs mt-1 text-black-700">
+            {{ responseTime }}
+          </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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  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'
+          );
+      }
+    },
+  },
+};
+</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);
+
+  .header-branding {
+    max-height: 16rem;
+    .header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: start;
+      .logo {
+        width: var(--space-jumbo);
+        height: var(--space-jumbo);
+        border-radius: 100%;
+        transition: all 0.5s ease;
+        margin-right: var(--space-small);
+        &.small {
+          width: var(--space-large);
+          height: var(--space-large);
+        }
+      }
+    }
+  }
+  .text-base {
+    font-size: var(--font-size-default);
+  }
+  .mt-6 {
+    margin-top: var(--space-medium);
+  }
+  .title-block {
+    display: flex;
+    align-items: center;
+    .online-dot {
+      background-color: $sucess-green;
+      height: var(--space-small);
+      width: var(--space-small);
+      border-radius: 100%;
+      margin: var(--space-zero) var(--space-one);
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js b/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js
new file mode 100644
index 000000000..91383eeb6
--- /dev/null
+++ b/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js
@@ -0,0 +1,29 @@
+import Widget from '../components/Widget';
+
+const ReplyTime = {
+  'In a few minutes': 'in_a_few_minutes',
+  'In a few hours': 'in_a_few_hours',
+  'In a few day': 'in_a_day',
+};
+
+export default {
+  title: 'components/Widget',
+  component: Widget,
+  argTypes: {
+    replyTime: {
+      control: {
+        type: 'select',
+        options: ReplyTime,
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Widget },
+  template: '<Widget v-bind="$props" />',
+});
+
+export const DefaultWidget = Template.bind({});
+DefaultWidget.args = {};