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>

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>