re-structure to monorepo.

packages/webapp/src/components/Currencies/BaseCurrency.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import React from 'react';
+import { CurrencyTag } from '@/components';
+
+/**
+ * base currecncy.
+ * @returns
+ */
+export function BaseCurrency({ currency }) {
+  return <CurrencyTag>{currency}</CurrencyTag>;
+}

packages/webapp/src/components/Currencies/CurrenciesSelectList.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+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>
+  );
+}

packages/webapp/src/components/Currencies/CurrencySelect.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '../Forms';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} currency
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const currencyItemPredicate = (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
+    );
+  }
+};
+
+/**
+ * @param {*} currency
+ * @returns
+ */
+const currencyItemRenderer = (currency, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      text={currency.currency_name}
+      label={currency.currency_code.toString()}
+      key={currency.id}
+      onClick={handleClick}
+    />
+  );
+};
+
+const currencySelectProps = {
+  itemPredicate: currencyItemPredicate,
+  itemRenderer: currencyItemRenderer,
+  valueAccessor: 'currency_code',
+  labelAccessor: 'currency_code',
+};
+
+/**
+ *
+ * @param {*} currencies
+ * @returns
+ */
+export function CurrencySelect({ currencies, ...rest }) {
+  return (
+    <FSelect
+      {...currencySelectProps}
+      {...rest}
+      items={currencies}
+      input={CurrnecySelectButton}
+    />
+  );
+}
+
+/**
+ * @param {*} label
+ * @returns
+ */
+function CurrnecySelectButton({ label }) {
+  return <Button text={label ? label : intl.get('select_currency_code')} />;
+}

packages/webapp/src/components/Currencies/CurrencySelectList.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+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>
+  );
+}

packages/webapp/src/components/Currencies/index.tsx

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