+
@@ -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;
+ },
},
};
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 7114e3bf6..1b4ab08a6 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,24 +1,42 @@
-
+
+
+
+
-
-