chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/components/Currencies/BaseCurrency.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CurrencyTag } from 'components';
+import { CurrencyTag } from '@/components';
 
 /**
  * base currecncy.

src/components/Currencies/CurrenciesSelectList.tsx

@@ -0,0 +1,58 @@
+import React, { useCallback } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+
+export function CurrenciesSelectList({ selectProps, onItemSelect, className }) {
+  const currencies = [
+    {
+      name: 'USD US dollars',
+      key: 'USD',
+      name: 'CAD Canadian dollars',
+      key: 'CAD',
+    },
+  ];
+
+  // Handle currency item select.
+  const onCurrencySelect = useCallback(
+    (currency) => {
+      onItemSelect && onItemSelect(currency);
+    },
+    [onItemSelect],
+  );
+
+  // Filters currencies list.
+  const filterCurrenciesPredicator = useCallback(
+    (query, currency, _index, exactMatch) => {
+      const normalizedTitle = currency.name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
+      return `${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+    },
+    [],
+  );
+
+  // Currency item of select currencies field.
+  const currencyItem = (item, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem
+        text={item.name}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
+    );
+  };
+
+  return (
+    <Select
+      items={currencies}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={currencyItem}
+      itemPredicate={filterCurrenciesPredicator}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onCurrencySelect}
+      {...selectProps}
+    >
+      <Button text={'USD US dollars'} />
+    </Select>
+  );
+}

src/components/Currencies/CurrencySelectList.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import classNames from 'classnames';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+
+export function CurrencySelectList({
+  currenciesList,
+  selectedCurrencyCode,
+  defaultSelectText = <T id={'select_currency_code'} />,
+  onCurrencySelected,
+  popoverFill = false,
+  disabled = false,
+}) {
+  const [selectedCurrency, setSelectedCurrency] = useState(null);
+
+  // Filters currencies list.
+  const filterCurrencies = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.currency_code.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${currency.currency_code} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
+        ) >= 0
+      );
+    }
+  };
+
+  const onCurrencySelect = useCallback((currency) => {
+    setSelectedCurrency({ ...currency });
+    onCurrencySelected && onCurrencySelected(currency);
+  });
+
+  const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
+    return (
+      <MenuItem
+        key={CurrencyCode.id}
+        text={CurrencyCode.currency_code}
+        onClick={handleClick}
+      />
+    );
+  }, []);
+
+  useEffect(() => {
+    if (typeof selectedCurrencyCode !== 'undefined') {
+      const currency = selectedCurrencyCode
+        ? currenciesList.find((a) => a.currency_code === selectedCurrencyCode)
+        : null;
+      setSelectedCurrency(currency);
+    }
+  }, [selectedCurrencyCode, currenciesList, setSelectedCurrency]);
+
+  return (
+    <Select
+      items={currenciesList}
+      itemRenderer={currencyCodeRenderer}
+      itemPredicate={filterCurrencies}
+      onItemSelect={onCurrencySelect}
+      filterable={true}
+      popoverProps={{
+        minimal: true,
+        usePortal: !popoverFill,
+        inline: popoverFill,
+      }}
+      className={classNames('form-group--select-list', {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selectedCurrency ? selectedCurrency.currency_code : defaultSelectText
+        }
+      />
+    </Select>
+  );
+}

src/components/Currencies/index.js

@@ -1,2 +0,0 @@
-export * from './CurrencySelect';
-export * from './BaseCurrency';

src/components/Currencies/index.tsx

@@ -0,0 +1,4 @@
+export * from './CurrencySelect';
+export * from './BaseCurrency';
+export * from './CurrenciesSelectList';
+export * from './CurrencySelectList';