re-structure to monorepo.

packages/webapp/src/components/ExchangeRate/DetailExchangeRate.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import { DetailItem } from '@/components';
+import { isEqual } from 'lodash';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Detail exchange rate item.
+ * @param {*} param0
+ * @param {*} param1
+ * @returns
+ */
+function DetailExchangeRate({
+  exchangeRate,
+  toCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  if (isEqual(base_currency, toCurrency)) {
+    return null;
+  }
+
+  return (
+    <DetailItem label={intl.get('exchange_rate')}>
+      1 {base_currency} = {exchangeRate} {toCurrency}
+    </DetailItem>
+  );
+}
+
+export const ExchangeRateDetailItem = R.compose(withCurrentOrganization())(
+  DetailExchangeRate,
+);

packages/webapp/src/components/ExchangeRate/ExchangeRateInput.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { ControlGroup } from '@blueprintjs/core';
+
+import { FlagIcon } from '../Tags';
+import { FMoneyInputGroup, FFormGroup } from '../Forms';
+
+export function ExchangeRateInputGroup({
+  fromCurrency,
+  toCurrency,
+  inputGroupProps,
+  formGroupProps,
+  name,
+}) {
+  return (
+    <FFormGroup inline={true} {...formGroupProps} name={name}>
+      <ControlGroup>
+        <ExchangeRatePrepend>
+          <ExchangeFlagIcon currencyCode={fromCurrency} /> 1 {fromCurrency} =
+        </ExchangeRatePrepend>
+        <ExchangeRateField
+          allowDecimals={true}
+          allowNegativeValue={true}
+          {...inputGroupProps}
+          name={name}
+        />
+        <ExchangeRateAppend>
+          <ExchangeFlagIcon currencyCode={toCurrency} /> {toCurrency}
+        </ExchangeRateAppend>
+      </ControlGroup>
+    </FFormGroup>
+  );
+}
+
+const ExchangeRateField = styled(FMoneyInputGroup)`
+  max-width: 75px;
+`;
+
+const ExchangeRateSideIcon = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 1;
+`;
+
+const ExchangeRatePrepend = styled(ExchangeRateSideIcon)`
+  padding-right: 8px;
+`;
+
+const ExchangeRateAppend = styled(ExchangeRateSideIcon)`
+  padding-left: 8px;
+`;
+
+const ExchangeFlagIcon = styled(FlagIcon)`
+  margin-right: 5px;
+  margin-left: 5px;
+  display: inline-block;
+`;

packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx

@@ -0,0 +1,95 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  FormGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
+import { ExchangeRateInputGroup, Icon } from '@/components';
+
+export function ExchangeRateMutedField({
+  name,
+  toCurrency,
+  fromCurrency,
+  date,
+  exchangeRate,
+  exchangeRateFieldProps,
+  popoverProps,
+}) {
+  const content = (
+    <ExchangeRateFormGroupContent>
+      <ExchangeRateInputGroup
+        name={name}
+        fromCurrency={fromCurrency}
+        toCurrency={toCurrency}
+        {...exchangeRateFieldProps}
+      />
+    </ExchangeRateFormGroupContent>
+  );
+
+  return (
+    <ExchangeRateFormGroup label={`As on ${date},`}>
+      <Popover
+        content={content}
+        interactionKind={PopoverInteractionKind.CLICK}
+        position={Position.RIGHT_TOP}
+        modifiers={{
+          offset: { offset: '0, 4' },
+        }}
+        {...popoverProps}
+        minimal={true}
+        usePortal={false}
+        target={<div />}
+      >
+        <ExchangeRateButton>
+          1 {fromCurrency} = {exchangeRate} {toCurrency}
+          <Button
+            className={Classes.MINIMAL}
+            rightIcon={<Icon icon="pen-18" iconSize={14} />}
+            small={true}
+          />
+        </ExchangeRateButton>
+      </Popover>
+    </ExchangeRateFormGroup>
+  );
+}
+
+const ExchangeRateFormGroup = styled(FormGroup)`
+  &.bp3-form-group {
+    label.bp3-label {
+      font-size: 12px;
+      opacity: 0.7;
+      line-height: 1;
+      margin-bottom: 5px;
+    }
+  }
+`;
+
+const ExchangeRateButton = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 400;
+  color: #0d244a;
+  position: relative;
+  padding-right: 28px;
+
+  .bp3-button {
+    position: absolute;
+    right: 0;
+  }
+`;
+
+const ExchangeRateFormGroupContent = styled.div`
+  padding: 5px 0;
+
+  .bp3-form-group {
+    padding: 2px;
+    margin: 2px 4px !important;
+  }
+`;

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

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './ExchangeRateInput';
+export * from './ExchangeRateMutedField'
+export * from './DetailExchangeRate'