Adding Arabic localization support

LOCALIZATION.md

@@ -6,6 +6,7 @@ If you want to help to translate Web Chat to different language, please submit a
 
 | Language code | Translator                                                 |
 | ------------- | ---------------------------------------------------------- |
+| ar-EG         | @midineo                                                   |
 | bg-bg         | @kalin.krustev                                             |
 | cs-cz         | @msimecek                                                  |
 | da-dk         | @Simon_lfr, Thomas Skødt Andersen                          |

packages/component/src/Localization/Localize.js

@@ -1,9 +1,10 @@
 // Localize is designed to be elaboratively return multiple results and possibly exceeding complexity requirement
 /* eslint complexity: "off" */
 
+import connectToWebChat from '../connectToWebChat';
 import getLocaleString from './getLocaleString';
-import useLocalize from '../hooks/useLocalize';
 
+import arEG from './ar-EG';
 import bgBG from './bg-BG';
 import csCZ from './cs-CZ';
 import daDK from './da-DK';
@@ -33,7 +34,9 @@ import zhYUE from './zh-YUE';
 function normalizeLanguage(language) {
   language = language.toLowerCase();
 
-  if (language.startsWith('bg')) {
+  if (language.startsWith('ar')) {
+    return 'ar-EG';
+  } else if (language.startsWith('bg')) {
     return 'bg-BG';
   } else if (language.startsWith('cs')) {
     return 'cs-CZ';
@@ -88,6 +91,8 @@ function normalizeLanguage(language) {
 
 function getStrings(language) {
   switch (normalizeLanguage(language || '')) {
+    case 'ar-EG':
+      return arEG;
     case 'bg-BG':
       return bgBG;
     case 'cs-CZ':
@@ -152,6 +157,8 @@ function localize(text, language, ...args) {
   return string || text;
 }
 
-export default ({ args, text }) => useLocalize(text, ...(args || []));
+export default connectToWebChat(({ language }) => ({ language }))(({ args, language, text }) =>
+  localize(text, language, ...(args || []))
+);
 
 export { getLocaleString, localize };

packages/component/src/Localization/ar-EG.js

@@ -0,0 +1,103 @@
+/* eslint no-magic-numbers: ["error", { "ignore": [1, 5, 24, 48, 60000, 3600000] }] */
+
+import getLocaleString from './getLocaleString';
+
+function xMinutesAgo(dateStr) {
+  const date = new Date(dateStr);
+  const dateTime = date.getTime();
+
+  if (isNaN(dateTime)) {
+    return dateStr;
+  }
+
+  const now = Date.now();
+  const deltaInMs = now - dateTime;
+  const deltaInMinutes = Math.floor(deltaInMs / 60000);
+  const deltaInHours = Math.floor(deltaInMs / 3600000);
+  const countofMinutesIsTen = 10; /* used for arabic translation only */
+
+  if (deltaInMinutes < 1) {
+    return 'حالا';
+  } else if (deltaInMinutes === 1) {
+    return 'منذ دقيقة';
+  } else if ((deltaInHours < 1) & (deltaInMinutes <= countofMinutesIsTen)) {
+    return `منذ ${deltaInMinutes} دقائق`;
+  } else if (deltaInHours < 1) {
+    return `منذ ${deltaInMinutes} دقيقة`;
+  } else if (deltaInHours === 1) {
+    return `منذ ساعة`;
+  } else if (deltaInHours < 5) {
+    return `منذ ${deltaInHours} ساعات`;
+  } else if (deltaInHours <= 24) {
+    return `اليوم`;
+  } else if (deltaInHours <= 48) {
+    return `أمس`;
+  }
+  return getLocaleString(date, 'ar-EG');
+}
+
+function botSaidSomething(avatarInitials, text) {
+  // return `Bot ${avatarInitials} said, ${text}`;
+  return `البوت ${avatarInitials} قال, ${text}`;
+}
+
+function downloadFileWithFileSize(downloadFileText, fileName, size) {
+  // Full text should read: "Download file <filename> of size <filesize>"
+  // return `${downloadFileText} ${fileName} of size ${size}`;
+  return `تحميل ملف ${fileName} بحجم ${size}`;
+}
+
+function uploadFileWithFileSize(fileName, size) {
+  // return `${fileName} of size ${size}`;
+  return `${fileName} بحجم ${size}`;
+}
+
+function userSaidSomething(avatarInitials, text) {
+  // return `User ${avatarInitials} said, ${text}`;
+  return `المستخدم ${avatarInitials} قال, ${text}`;
+}
+
+export default {
+  CONNECTED_NOTIFICATION: 'متصل',
+  FAILED_CONNECTION_NOTIFICATION: 'غير قادر على الاتصال.',
+  INITIAL_CONNECTION_NOTIFICATION: 'يتم التوصيل...',
+  INTERRUPTED_CONNECTION_NOTIFICATION: 'حدث انقطاع في الشبكة. إعادة التوصيل ...',
+  RENDER_ERROR_NOTIFICATION: 'خطأ في التقديم. يرجى التحقق من وحدة التحكم أو الاتصال بمطور البوت.',
+  // Do not localize {Retry}; it is a placeholder for "Retry". English translation should be, "Send failed. Retry."
+  SEND_FAILED_KEY: `{Retry}. فشل في الإرسال.`,
+  SLOW_CONNECTION_NOTIFICATION: 'يستغرق وقتا أطول من المعتاد للاتصال.',
+  'Bot said something': botSaidSomething,
+  'User said something': userSaidSomething,
+  'X minutes ago': xMinutesAgo,
+  // '[File of type '%1']': '[File of type '%1']",
+  // '[Unknown Card '%1']': '[Unknown Card '%1']',
+  'Adaptive Card parse error': 'Adaptive Card parse error',
+  'Adaptive Card render error': 'Adaptive Card render error',
+  BotSent: 'البوت ارسل:',
+  Chat: 'دردشة',
+  'Download file': 'تحميل الملف',
+  DownloadFileWithFileSize: downloadFileWithFileSize,
+  ErrorMessage: 'رسالة خطأ',
+  'Microphone off': 'الميكروفون مغلق',
+  'Microphone on': 'الميكروفون قيد التشغيل',
+  Left: 'يسار',
+  'Listening…': 'يستمع ...',
+  'New messages': 'رسائل جديدة',
+  Retry: 'إعادة المحاولة',
+  Right: 'يمين',
+  Send: 'أرسل',
+  SendBox: 'Sendbox',
+  Sending: 'أرسال',
+  SendStatus: 'ارسل الحالة: ',
+  SentAt: 'أرسل: ',
+  Speak: 'تكلم',
+  'Starting…': 'يبدأ...',
+  Tax: 'ضريبة',
+  Total: 'المجموع',
+  'Type your message': 'اكتب رسالتك',
+  TypingIndicator: 'عرض مؤشر الكتابة',
+  'Upload file': 'رفع الملف',
+  UploadFileWithFileSize: uploadFileWithFileSize,
+  UserSent: 'المستخدم أرسل: ',
+  VAT: 'ضريبة القيمة المضافة'
+};

packages/embed/src/locale.js

@@ -24,6 +24,7 @@ const AZURE_LOCALE_PATTERN = /^(([a-z]{2})(-[a-z]{2,})?)\.([a-z]{2})/;
 const JAVASCRIPT_LOCALE_PATTERN = /^([a-z]{2})-([A-Z]{2,})?$/;
 
 const AZURE_LOCALE_MAPPING = {
+  ar: 'ar-EG',
   bg: 'bg-BG',
   cs: 'cs-CZ',
   de: 'de-DE',

packages/embed/src/locale.spec.js

@@ -1,5 +1,9 @@
 import { normalize, toAzureLocale } from './locale';
 
+test('Normalizing "ar.ar-eg"', () => {
+  expect(normalize('ar.ar-eg')).toBe('ar-EG');
+});
+
 test('Normalizing "en.en-us"', () => {
   expect(normalize('en.en-us')).toBe('en-US');
 });

packages/playground/src/App.js

@@ -444,6 +444,7 @@ const App = ({ store }) => {
             Language
             <select onChange={handleLanguageChange} value={language}>
               <option value="">Default ({window.navigator.language})</option>
+              <option value="ar-EG">Arabic</option>
               <option value="bg-BG">Bulgarian</option>
               <option value="zh-HK">Chinese (Hong Kong)</option>
               <option value="zh-YUE">Chinese (Hong Kong, Yue)</option>