@transferwise/components 46.165.0 → 46.165.2

package/src/Upload/_stories/Upload.rtl.test.story.tsx

@@ -1,7 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
+import { expect, userEvent, waitFor } from 'storybook/test';
 
-import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  forEachColumn,
+  useRtlDiffI18n,
+  withRTLDiff,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import Upload from '..';
 
 export default {
@@ -13,30 +17,42 @@ export default {
 type Story = StoryObj<typeof Upload>;
 
 export const Sizes: Story = {
-  render: () => (
-    <>
-      <Upload usLabel="Small upload" size="sm" />
-      <Upload usLabel="Medium upload" size="md" />
-      <Upload usLabel="Large upload" size="lg" />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Upload usLabel={i18n.smallUpload} size="sm" />
+        <Upload usLabel={i18n.mediumUpload} size="md" />
+        <Upload usLabel={i18n.largeUpload} size="lg" />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      smallUpload: { en: 'Small upload', ar: 'منطقة رفع صغيرة' },
+      mediumUpload: { en: 'Medium upload', ar: 'منطقة رفع متوسطة' },
+      largeUpload: { en: 'Large upload', ar: 'منطقة رفع كبيرة' },
+    },
+  }),
 };
 
 export const WithError: Story = {
-  render: () => (
-    <Upload
-      usAccept="*"
-      usLabel="Upload a file"
-      usPlaceholder="Maximum filesize is 1B"
-      maxSize={1}
-      size="md"
-      httpOptions={{
-        url: 'https://httpbin.org/post',
-        method: 'POST',
-      }}
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Upload
+        usAccept="*"
+        usLabel={i18n.label}
+        usPlaceholder={i18n.placeholder}
+        maxSize={1}
+        size="md"
+        httpOptions={{
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+        }}
+      />
+    );
+  },
   play: async ({ canvasElement }) => {
     await forEachColumn(canvasElement, async (column) => {
       const fileInput = column.querySelector<HTMLInputElement>('input[type="file"]');
@@ -45,9 +61,16 @@ export const WithError: Story = {
         type: 'text/plain',
       });
       await userEvent.upload(fileInput, file);
-      const scope = within(column);
-      await scope.findByText(/Maximum filesize is/i, {}, { timeout: 3000 });
+      await waitFor(
+        async () => expect(column.querySelector('.upload-error-message')).not.toBeNull(),
+        { timeout: 3000 },
+      );
     });
   },
-  ...withRTLDiff(),
+  ...withRTLDiff({
+    i18n: {
+      label: { en: 'Upload a file', ar: 'رفع ملف' },
+      placeholder: { en: 'Maximum filesize is 1B', ar: 'الحد الأقصى لحجم الملف هو ١ بايت' },
+    },
+  }),
 };

package/src/UploadInput/_stories/UploadInput.test.story.tsx

@@ -5,7 +5,7 @@ import { Status } from '../../common';
 import UploadInput, { UploadInputProps } from '../UploadInput';
 import { UploadedFile, UploadResponse } from '../types';
 import { userEvent } from 'storybook/test';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -305,45 +305,67 @@ export const DeletingBottom: Story = {
 const noOpUpload = async () => ({ id: 'upload-1' });
 const noOpDelete = async () => {};
 
-const mixedFiles = [
-  { id: 'file-1', filename: 'document-front.pdf', url: '#' },
-  { id: 'file-2', filename: 'succeeded-file.pdf', url: '#' },
-  { id: 'file-3', filename: 'failed-file.png', status: Status.FAILED },
-  { id: 'file-4', filename: 'valid-document.pdf', url: '#' },
-  {
-    id: 'file-5',
-    filename: 'too-large-image.png',
-    status: Status.FAILED,
-    errors: [
-      'File size exceeds the 5MB limit',
-      'Please compress the image or choose a smaller file',
-      'Supported formats: JPG, PNG under 5MB',
-    ],
-  },
-  {
-    id: 'file-6',
-    filename: 'corrupted-file.pdf',
-    status: Status.FAILED,
-    error: 'File could not be processed',
-  },
-];
-
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <UploadInput onUploadFile={noOpUpload} />
-      <UploadInput
-        files={[{ id: 'file-s', filename: 'single-upload.pdf', url: '#' }]}
-        onUploadFile={noOpUpload}
-        onDeleteFile={noOpDelete}
-      />
-      <UploadInput
-        multiple
-        files={mixedFiles}
-        onUploadFile={noOpUpload}
-        onDeleteFile={noOpDelete}
-      />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const mixedFiles = [
+      { id: 'file-1', filename: i18n.documentFront, url: '#' },
+      { id: 'file-2', filename: i18n.succeededFile, url: '#' },
+      { id: 'file-3', filename: i18n.failedFile, status: Status.FAILED },
+      { id: 'file-4', filename: i18n.validDocument, url: '#' },
+      {
+        id: 'file-5',
+        filename: i18n.tooLargeImage,
+        status: Status.FAILED,
+        errors: [i18n.sizeLimitError, i18n.compressHint, i18n.supportedFormats],
+      },
+      {
+        id: 'file-6',
+        filename: i18n.corruptedFile,
+        status: Status.FAILED,
+        error: i18n.processingError,
+      },
+    ];
+    return (
+      <>
+        <UploadInput onUploadFile={noOpUpload} />
+        <UploadInput
+          files={[{ id: 'file-s', filename: i18n.singleUpload, url: '#' }]}
+          onUploadFile={noOpUpload}
+          onDeleteFile={noOpDelete}
+        />
+        <UploadInput
+          multiple
+          files={mixedFiles}
+          onUploadFile={noOpUpload}
+          onDeleteFile={noOpDelete}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      singleUpload: { en: 'single-upload.pdf', ar: 'تحميل-واحد.pdf' },
+      documentFront: { en: 'document-front.pdf', ar: 'مستند-الوجه-الأمامي.pdf' },
+      succeededFile: { en: 'succeeded-file.pdf', ar: 'ملف-ناجح.pdf' },
+      failedFile: { en: 'failed-file.png', ar: 'ملف-فاشل.png' },
+      validDocument: { en: 'valid-document.pdf', ar: 'مستند-صالح.pdf' },
+      tooLargeImage: { en: 'too-large-image.png', ar: 'صورة-كبيرة-جدًا.png' },
+      corruptedFile: { en: 'corrupted-file.pdf', ar: 'ملف-تالف.pdf' },
+      sizeLimitError: {
+        en: 'File size exceeds the 5MB limit',
+        ar: 'حجم الملف يتجاوز الحد الأقصى 5 ميغابايت',
+      },
+      compressHint: {
+        en: 'Please compress the image or choose a smaller file',
+        ar: 'يُرجى ضغط الصورة أو اختيار ملف أصغر',
+      },
+      supportedFormats: {
+        en: 'Supported formats: JPG, PNG under 5MB',
+        ar: 'الصيغ المدعومة: JPG وPNG بحجم أقل من 5 ميغابايت',
+      },
+      processingError: { en: 'File could not be processed', ar: 'تعذّر معالجة الملف' },
+    },
+  }),
 };

package/src/_deprecated/Alert/_stories/Alert.test.story.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { Button, Field, SelectInput, Sentiment } from '../../..';
 import Alert, { type AlertProps, AlertArrowPosition } from '../Alert';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta = {
   title: 'Prompts/Alert/Tests',
@@ -134,27 +134,48 @@ export const MultipleDynamicAlerts: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Alert message="Basic alert without dismiss button." />
-      <Alert message="Alert with dismiss button." onDismiss={() => {}} />
-      <Alert
-        title="With title and link action"
-        message="Alert with a link action and dismiss."
-        action={{ href: '#', text: 'Read more' }}
-        onDismiss={() => {}}
-      />
-      <Alert
-        title="With title and button action"
-        message="Alert with a button action."
-        action={{ onClick: () => {}, text: 'Open', as: 'button' }}
-        onDismiss={() => {}}
-      />
-      <Alert message="Arrow top left." arrow={AlertArrowPosition.TOP_LEFT} />
-      <Alert message="Arrow top right." arrow={AlertArrowPosition.TOP_RIGHT} />
-      <Alert message="Arrow bottom left." arrow={AlertArrowPosition.BOTTOM_LEFT} />
-      <Alert message="Arrow bottom right." arrow={AlertArrowPosition.BOTTOM_RIGHT} />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Alert message={i18n.basic} />
+        <Alert message={i18n.dismissible} onDismiss={() => {}} />
+        <Alert
+          title={i18n.linkActionTitle}
+          message={i18n.linkActionMessage}
+          action={{ href: '#', text: i18n.readMore }}
+          onDismiss={() => {}}
+        />
+        <Alert
+          title={i18n.buttonActionTitle}
+          message={i18n.buttonActionMessage}
+          action={{ onClick: () => {}, text: i18n.open, as: 'button' }}
+          onDismiss={() => {}}
+        />
+        <Alert message={i18n.arrowTopLeft} arrow={AlertArrowPosition.TOP_LEFT} />
+        <Alert message={i18n.arrowTopRight} arrow={AlertArrowPosition.TOP_RIGHT} />
+        <Alert message={i18n.arrowBottomLeft} arrow={AlertArrowPosition.BOTTOM_LEFT} />
+        <Alert message={i18n.arrowBottomRight} arrow={AlertArrowPosition.BOTTOM_RIGHT} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      basic: { en: 'Basic alert without dismiss button.', ar: 'تنبيه أساسي بدون زر إغلاق.' },
+      dismissible: { en: 'Alert with dismiss button.', ar: 'تنبيه مع زر إغلاق.' },
+      linkActionTitle: { en: 'With title and link action', ar: 'مع عنوان وإجراء رابط' },
+      linkActionMessage: {
+        en: 'Alert with a link action and dismiss.',
+        ar: 'تنبيه مع إجراء رابط وزر إغلاق.',
+      },
+      readMore: { en: 'Read more', ar: 'اقرأ المزيد' },
+      buttonActionTitle: { en: 'With title and button action', ar: 'مع عنوان وإجراء زر' },
+      buttonActionMessage: { en: 'Alert with a button action.', ar: 'تنبيه مع إجراء زر.' },
+      open: { en: 'Open', ar: 'فتح' },
+      arrowTopLeft: { en: 'Arrow top left.', ar: 'سهم أعلى اليسار.' },
+      arrowTopRight: { en: 'Arrow top right.', ar: 'سهم أعلى اليمين.' },
+      arrowBottomLeft: { en: 'Arrow bottom left.', ar: 'سهم أسفل اليسار.' },
+      arrowBottomRight: { en: 'Arrow bottom right.', ar: 'سهم أسفل اليمين.' },
+    },
+  }),
 };

package/src/_deprecated/Card/_stories/Card.test.story.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import Card from '..';
 
 export default {
@@ -13,26 +13,50 @@ export default {
 type Story = StoryObj<typeof Card>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Card title="Basic card" details="Some details about this card" />
-      <Card
-        title="Card with icon"
-        details="Details with an icon on the side"
-        icon={<FastFlagIcon />}
-      />
-      <Card
-        title="Expanded card with icon"
-        details="Expanded card showing content area"
-        icon={<FastFlagIcon />}
-        isExpanded
-      >
-        Expanded content with padding affected by icon presence.
-      </Card>
-      <Card title="Expanded card without icon" details="No icon variant" isExpanded>
-        Expanded content without icon padding.
-      </Card>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Card title={i18n.basicTitle} details={i18n.basicDetails} />
+        <Card title={i18n.withIconTitle} details={i18n.withIconDetails} icon={<FastFlagIcon />} />
+        <Card
+          title={i18n.expandedWithIconTitle}
+          details={i18n.expandedWithIconDetails}
+          icon={<FastFlagIcon />}
+          isExpanded
+        >
+          {i18n.expandedWithIconContent}
+        </Card>
+        <Card title={i18n.expandedNoIconTitle} details={i18n.expandedNoIconDetails} isExpanded>
+          {i18n.expandedNoIconContent}
+        </Card>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      basicTitle: { en: 'Basic card', ar: 'بطاقة أساسية' },
+      basicDetails: { en: 'Some details about this card', ar: 'بعض التفاصيل عن هذه البطاقة' },
+      withIconTitle: { en: 'Card with icon', ar: 'بطاقة مع أيقونة' },
+      withIconDetails: {
+        en: 'Details with an icon on the side',
+        ar: 'تفاصيل مع أيقونة على الجانب',
+      },
+      expandedWithIconTitle: { en: 'Expanded card with icon', ar: 'بطاقة موسّعة مع أيقونة' },
+      expandedWithIconDetails: {
+        en: 'Expanded card showing content area',
+        ar: 'بطاقة موسّعة تُظهر منطقة المحتوى',
+      },
+      expandedWithIconContent: {
+        en: 'Expanded content with padding affected by icon presence.',
+        ar: 'محتوى موسّع بمساحة داخلية تتأثر بوجود الأيقونة.',
+      },
+      expandedNoIconTitle: { en: 'Expanded card without icon', ar: 'بطاقة موسّعة بدون أيقونة' },
+      expandedNoIconDetails: { en: 'No icon variant', ar: 'نسخة بدون أيقونة' },
+      expandedNoIconContent: {
+        en: 'Expanded content without icon padding.',
+        ar: 'محتوى موسّع بدون مساحة داخلية للأيقونة.',
+      },
+    },
+  }),
 };

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '..';
 import { withVariantConfig } from '../../../../.storybook/helpers';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   component: CriticalCommsBanner,
@@ -70,18 +70,24 @@ export const WithoutAction: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <CriticalCommsBanner
-        title="Your account is overdrawn"
-        subtitle="Add money within the next 30 days"
-        action={{ label: 'Take action', href: 'https://wise.com' }}
-      />
-      <CriticalCommsBanner
-        title="Your account is overdrawn"
-        subtitle="Add money within the next 30 days"
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <CriticalCommsBanner
+          title={i18n.title}
+          subtitle={i18n.subtitle}
+          action={{ label: i18n.actionLabel, href: 'https://wise.com' }}
+        />
+        <CriticalCommsBanner title={i18n.title} subtitle={i18n.subtitle} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      title: { en: 'Your account is overdrawn', ar: 'حسابك مكشوف' },
+      subtitle: { en: 'Add money within the next 30 days', ar: 'أضف أموالًا خلال 30 يومًا' },
+      actionLabel: { en: 'Take action', ar: 'اتخذ إجراءً' },
+    },
+  }),
 };

package/src/_deprecated/InlineAlert/_stories/InlineAlert.test.story.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import InlineAlert from '..';
 
 export default {
@@ -12,15 +12,26 @@ export default {
 type Story = StoryObj<typeof InlineAlert>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <InlineAlert type="neutral">Neutral alert without icon</InlineAlert>
-      <InlineAlert type="warning">Warning alert with icon</InlineAlert>
-      <InlineAlert type="negative">Negative alert with icon</InlineAlert>
-      <InlineAlert type="positive">
-        Positive alert with icon and longer content that may wrap to multiple lines
-      </InlineAlert>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <InlineAlert type="neutral">{i18n.neutral}</InlineAlert>
+        <InlineAlert type="warning">{i18n.warning}</InlineAlert>
+        <InlineAlert type="negative">{i18n.negative}</InlineAlert>
+        <InlineAlert type="positive">{i18n.positive}</InlineAlert>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      neutral: { en: 'Neutral alert without icon', ar: 'تنبيه عادي بدون أيقونة' },
+      warning: { en: 'Warning alert with icon', ar: 'تنبيه تحذيري مع أيقونة' },
+      negative: { en: 'Negative alert with icon', ar: 'تنبيه سلبي مع أيقونة' },
+      positive: {
+        en: 'Positive alert with icon and longer content that may wrap to multiple lines',
+        ar: 'تنبيه إيجابي مع أيقونة ومحتوى أطول قد يمتد على عدة أسطر',
+      },
+    },
+  }),
 };

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { Person } from '@transferwise/icons';
 
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import Select from '..';
 
 export default {
@@ -13,54 +13,82 @@ export default {
 
 type Story = StoryObj<typeof Select>;
 
-const options = [
-  { header: 'Popular' },
-  { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> },
-  { value: 'eur', label: 'Euro', currency: 'eur', icon: <Person /> },
-  { value: 'usd', label: 'US Dollar', currency: 'usd', note: 'United States dollar' },
+const getOptions = (i18n: Record<string, string>) => [
+  { header: i18n.popularHeader },
+  { value: 'gbp', label: i18n.britishPound, currency: 'gbp', icon: <Person /> },
+  { value: 'eur', label: i18n.euro, currency: 'eur', icon: <Person /> },
+  { value: 'usd', label: i18n.usDollar, currency: 'usd', note: i18n.usDollarNote },
   { separator: true },
-  { header: 'Other' },
-  { value: 'cad', label: 'Canadian dollar', currency: 'cad' },
-  { value: 'aud', label: 'Australian dollar', currency: 'aud' },
+  { header: i18n.otherHeader },
+  { value: 'cad', label: i18n.canadianDollar, currency: 'cad' },
+  { value: 'aud', label: i18n.australianDollar, currency: 'aud' },
 ];
 
-const selected = { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> };
+const getSelected = (i18n: Record<string, string>) => ({
+  value: 'gbp',
+  label: i18n.britishPound,
+  currency: 'gbp',
+  icon: <Person />,
+});
 
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Select
+          size="lg"
+          placeholder={i18n.placeholder}
+          selected={getSelected(i18n)}
+          options={getOptions(i18n)}
+          onChange={() => {}}
+        />
+        <Select
+          size="md"
+          placeholder={i18n.placeholder}
+          selected={getSelected(i18n)}
+          options={getOptions(i18n)}
+          onChange={() => {}}
+        />
+        <Select
+          size="sm"
+          placeholder={i18n.placeholder}
+          options={getOptions(i18n)}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      placeholder: { en: 'Select currency', ar: 'اختر العملة' },
+      popularHeader: { en: 'Popular', ar: 'الأكثر شيوعًا' },
+      britishPound: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      usDollar: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
+      usDollarNote: { en: 'United States dollar', ar: 'دولار الولايات المتحدة' },
+      otherHeader: { en: 'Other', ar: 'أخرى' },
+      canadianDollar: { en: 'Canadian dollar', ar: 'الدولار الكندي' },
+      australianDollar: { en: 'Australian dollar', ar: 'الدولار الأسترالي' },
+    },
+  }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
       <Select
         size="lg"
-        placeholder="Select currency"
-        selected={selected}
-        options={options}
+        search
+        searchPlaceholder={i18n.searchPlaceholder}
+        placeholder={i18n.placeholder}
+        selected={getSelected(i18n)}
+        options={getOptions(i18n)}
         onChange={() => {}}
       />
-      <Select
-        size="md"
-        placeholder="Select currency"
-        selected={selected}
-        options={options}
-        onChange={() => {}}
-      />
-      <Select size="sm" placeholder="Select currency" options={options} onChange={() => {}} />
-    </>
-  ),
-  ...withRTLDiff(),
-};
-
-export const OpenDropdown: Story = {
-  render: () => (
-    <Select
-      size="lg"
-      search
-      searchPlaceholder="Type a currency"
-      placeholder="Select currency"
-      selected={selected}
-      options={options}
-      onChange={() => {}}
-    />
-  ),
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('button');
@@ -71,8 +99,16 @@ export const OpenDropdown: Story = {
     renderAs: 'iframe',
     width: '80%',
     i18n: {
-      searchPlaceholder: { ltr: 'Type a currency', rtl: 'اكتب عملة' },
-      placeholder: { ltr: 'Select currency', rtl: 'اختر العملة' },
+      searchPlaceholder: { en: 'Type a currency', ar: 'اكتب عملة' },
+      placeholder: { en: 'Select currency', ar: 'اختر العملة' },
+      popularHeader: { en: 'Popular', ar: 'الأكثر شيوعًا' },
+      britishPound: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      usDollar: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
+      usDollarNote: { en: 'United States dollar', ar: 'دولار الولايات المتحدة' },
+      otherHeader: { en: 'Other', ar: 'أخرى' },
+      canadianDollar: { en: 'Canadian dollar', ar: 'الدولار الكندي' },
+      australianDollar: { en: 'Australian dollar', ar: 'الدولار الأسترالي' },
     },
   }),
 };