Adding Arabic to localization

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-AR         | Odai Hatem AbuGaith                                        |
 | bg-bg         | @kalin.krustev                                             |
 | cs-cz         | @msimecek                                                  |
 | da-dk         | @Simon_lfr, Thomas Skødt Andersen                          |

packages/component/src/Localization/Localize.js

@@ -4,6 +4,7 @@
 import connectToWebChat from '../connectToWebChat';
 import getLocaleString from './getLocaleString';
 
+import bgBG from './ar-AR';
 import bgBG from './bg-BG';
 import csCZ from './cs-CZ';
 import daDK from './da-DK';
@@ -32,8 +33,9 @@ import zhYUE from './zh-YUE';
 
 function normalizeLanguage(language) {
   language = language.toLowerCase();
-
-  if (language.startsWith('bg')) {
+  if (language.startsWith('ar')) {
+    return 'ar-AR';
+  } else if (language.startsWith('bg')) {
     return 'bg-BG';
   } else if (language.startsWith('cs')) {
     return 'cs-CZ';
@@ -88,6 +90,8 @@ function normalizeLanguage(language) {
 
 function getStrings(language) {
   switch (normalizeLanguage(language || '')) {
+    case 'ar-AR':
+      return arAR;
     case 'bg-BG':
       return bgBG;
     case 'cs-CZ':

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

@@ -0,0 +1,95 @@
+/* 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);
+
+    if (deltaInMinutes < 1) {
+        return 'حالياً';
+    } else if (deltaInMinutes === 1) {
+        return 'منذ دقيقة';
+    } else if (deltaInHours < 1) {
+        return `${deltaInMinutes} minutes ago`;
+    } else if (deltaInHours === 1) {
+        return `منذ ساعة`;
+    } else if (deltaInHours < 5) {
+        return `${deltaInHours} hours ago`;
+    } else if (deltaInHours <= 24) {
+        return `اليوم`;
+    } else if (deltaInHours <= 48) {
+        return `الامس`;
+    }
+    return getLocaleString(date, 'ar-AR');
+}
+
+function botSaidSomething(avatarInitials, text) {
+    return `${avatarInitials} اجاب, ${text}`;
+}
+
+function downloadFileWithFileSize(downloadFileText, fileName, size) {
+    // Full text should read: "Download file <filename> of size <filesize>"
+    return `${downloadFileText} ${fileName}  من حجم ${size}`;
+}
+
+function uploadFileWithFileSize(fileName, size) {
+    return `${fileName} من حجم ${size}`;
+}
+
+function userSaidSomething(avatarInitials, 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 خطأ',
+    'Adaptive Card render error': 'Adaptive Card خطأ في عرض',
+    BotSent: 'تم الارسال: ',
+    Chat: 'محادثة',
+    'Download file': 'تحميل الملف',
+    DownloadFileWithFileSize: downloadFileWithFileSize,
+    ErrorMessage: 'خطأ',
+    'Microphone off': 'الميكروفون مغلق',
+    'Microphone on': 'الميكروفون يعمل',
+    Left: 'يسار',
+    'Listening…': 'الاستماع…',
+    'New messages': 'رسائل جديدة',
+    Retry: 'حاول مرة اخرى',
+    Right: 'يمين',
+    Send: 'ارسل',
+    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-AR',
   bg: 'bg-BG',
   cs: 'cs-CZ',
   de: 'de-DE',
@@ -68,6 +69,9 @@ function toAzureLocale(language) {
     case 'pt-BR':
       return 'pt-br.pt-br';
 
+      case 'ar':
+      return 'ar.ar-ar';
+
     case 'pt-PT':
       return 'pt-pt.pt-pt';
 
@@ -95,3 +99,4 @@ function toAzureLocale(language) {
 }
 
 export { normalize, toAzureLocale };
+

packages/embed/src/locale.spec.js

@@ -4,6 +4,10 @@ test('Normalizing "en.en-us"', () => {
   expect(normalize('en.en-us')).toBe('en-US');
 });
 
+test('Normalizing "ar.ar-ar"', () => {
+  expect(normalize('ar.ar-ar')).toBe('ar-AR');
+}); 
+
 test('Normalizing "bg.bg-bg"', () => {
   expect(normalize('bg.bg-bg')).toBe('bg-BG');
 });

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-AR">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>