Webchat - Mobile & Locale aware

__tests__/models/business_test.js

@@ -113,7 +113,7 @@ describe('Business', () => {
       it('returns the English locale object for "en"', () => {
         const result = business.locale
         expect(result).toBeDefined()
-        expect(result.white_label.powered_by).toBe('Powered by')
+        expect(result.white_label.powered_by).toBe('By')
         expect(result.errors.blank).toBe('This field is required.')
       })
 

lib/controllers/webchat_controller.cjs

@@ -53,6 +53,7 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "connect",
     value: function connect() {
       (0, _usePopover.usePopover)(this);
+      _hellotext.default.business.setLocale(this.localeValue);
       this.popoverTarget.classList.add(..._webchat.Webchat.classes);
       this.triggerTarget.classList.add(..._webchat.Webchat.triggerClasses);
       this.setupFloatingUI({
@@ -164,6 +165,14 @@ let _default = /*#__PURE__*/function (_Controller) {
         this.openValue = false;
       }
     }
+  }, {
+    key: "closePopover",
+    value: function closePopover() {
+      this.popoverTarget.classList.add(...this.fadeOutClasses);
+      setTimeout(() => {
+        this.openValue = false;
+      }, 250);
+    }
   }, {
     key: "onPopoverOpened",
     value: function onPopoverOpened() {
@@ -191,6 +200,9 @@ let _default = /*#__PURE__*/function (_Controller) {
       setTimeout(() => {
         this.inputTarget.value = '';
       });
+      setTimeout(() => {
+        this.popoverTarget.classList.remove(...this.fadeOutClasses);
+      }, 300);
       localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed');
     }
   }, {
@@ -491,6 +503,11 @@ _default.values = {
   nextPage: {
     type: Number,
     default: undefined
+  },
+  locale: {
+    type: String,
+    default: 'en'
   }
 };
+_default.classes = ['fadeOut'];
 _default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'onlineStatus', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter'];

lib/controllers/webchat_controller.js

@@ -51,6 +51,7 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "connect",
     value: function connect() {
       usePopover(this);
+      Hellotext.business.setLocale(this.localeValue);
       this.popoverTarget.classList.add(...WebchatConfiguration.classes);
       this.triggerTarget.classList.add(...WebchatConfiguration.triggerClasses);
       this.setupFloatingUI({
@@ -168,6 +169,14 @@ var _default = /*#__PURE__*/function (_Controller) {
         this.openValue = false;
       }
     }
+  }, {
+    key: "closePopover",
+    value: function closePopover() {
+      this.popoverTarget.classList.add(...this.fadeOutClasses);
+      setTimeout(() => {
+        this.openValue = false;
+      }, 250);
+    }
   }, {
     key: "onPopoverOpened",
     value: function onPopoverOpened() {
@@ -195,6 +204,9 @@ var _default = /*#__PURE__*/function (_Controller) {
       setTimeout(() => {
         this.inputTarget.value = '';
       });
+      setTimeout(() => {
+        this.popoverTarget.classList.remove(...this.fadeOutClasses);
+      }, 300);
       localStorage.setItem("hellotext--webchat--".concat(this.idValue), 'closed');
     }
   }, {
@@ -501,7 +513,12 @@ _default.values = {
   nextPage: {
     type: Number,
     default: undefined
+  },
+  locale: {
+    type: String,
+    default: 'en'
   }
 };
+_default.classes = ['fadeOut'];
 _default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'onlineStatus', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter'];
 export { _default as default };

lib/locales/en.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   white_label: {
-    powered_by: 'Powered by'
+    powered_by: 'By'
   },
   errors: {
     parameter_not_unique: 'This value is taken.',

lib/locales/en.js

@@ -1,6 +1,6 @@
 export default {
   white_label: {
-    powered_by: 'Powered by'
+    powered_by: 'By'
   },
   errors: {
     parameter_not_unique: 'This value is taken.',

lib/locales/es.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   white_label: {
-    powered_by: 'Desarrollado por'
+    powered_by: 'Por'
   },
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',

lib/locales/es.js

@@ -1,6 +1,6 @@
 export default {
   white_label: {
-    powered_by: 'Desarrollado por'
+    powered_by: 'Por'
   },
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',

lib/models/business.cjs

@@ -28,6 +28,11 @@ let Business = /*#__PURE__*/function () {
         document.head.append(linkTag);
       }
     }
+  }, {
+    key: "setLocale",
+    value: function setLocale(locale) {
+      this.data.locale = locale;
+    }
   }, {
     key: "subscription",
     get: function () {

lib/models/business.js

@@ -21,6 +21,11 @@ var Business = /*#__PURE__*/function () {
         document.head.append(linkTag);
       }
     }
+  }, {
+    key: "setLocale",
+    value: function setLocale(locale) {
+      this.data.locale = locale;
+    }
   }, {
     key: "subscription",
     get: function get() {

src/controllers/webchat_controller.js

@@ -21,8 +21,11 @@ export default class extends Controller {
     autoPlacement: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     nextPage: { type: Number, default: undefined },
+    locale: { type: String, default: 'en' },
   }
 
+  static classes = ['fadeOut']
+
   static targets = [
     'trigger',
     'popover',
@@ -71,6 +74,8 @@ export default class extends Controller {
   connect() {
     usePopover(this)
 
+    Hellotext.business.setLocale(this.localeValue)
+
     this.popoverTarget.classList.add(...WebchatConfiguration.classes)
     this.triggerTarget.classList.add(...WebchatConfiguration.triggerClasses)
 
@@ -205,6 +210,14 @@ export default class extends Controller {
     }
   }
 
+  closePopover() {
+    this.popoverTarget.classList.add(...this.fadeOutClasses)
+
+    setTimeout(() => {
+      this.openValue = false
+    }, 250)
+  }
+
   onPopoverOpened() {
     this.inputTarget.focus()
 
@@ -238,6 +251,10 @@ export default class extends Controller {
       this.inputTarget.value = ''
     })
 
+    setTimeout(() => {
+      this.popoverTarget.classList.remove(...this.fadeOutClasses)
+    }, 300)
+
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed')
   }
 

src/locales/en.js

@@ -1,15 +1,15 @@
 export default {
   white_label: {
-    powered_by: 'Powered by',
+    powered_by: 'By',
   },
   errors: {
     parameter_not_unique: 'This value is taken.',
-    blank: 'This field is required.'
+    blank: 'This field is required.',
   },
   forms: {
     phone: 'Click the link sent via SMS to verify your submission.',
     email: 'Click the link sent via email to verify your submission.',
     phone_and_email: 'Click the links sent via SMS and email to verify your submission.',
-    none: 'Your submission has been received.'
-  }
+    none: 'Your submission has been received.',
+  },
 }

src/locales/es.js

@@ -1,15 +1,15 @@
 export default {
   white_label: {
-    powered_by: 'Desarrollado por',
+    powered_by: 'Por',
   },
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',
-    blank: 'Este campo es obligatorio.'
+    blank: 'Este campo es obligatorio.',
   },
   forms: {
     phone: 'Haga clic en el enlace enviado por SMS para verificar su envío.',
     email: 'Haga clic en el enlace enviado por e-mail para verificar su envío.',
     phone_and_email: 'Haga clic en los enlaces enviados por SMS y e-mail para verificar su envío.',
-    none: 'Su envío ha sido recibido.'
-  }
+    none: 'Su envío ha sido recibido.',
+  },
 }

src/models/business.js

@@ -18,6 +18,10 @@ class Business {
     }
   }
 
+  setLocale(locale) {
+    this.data.locale = locale
+  }
+
   get subscription() {
     return this.data.subscription
   }