WIP: customer form styling.

fix: journal increment number settings.

client/src/components/CurrenciesSelectList.js

@@ -2,18 +2,14 @@
 
 import React, {useCallback} from 'react';
 import {
-  FormGroup,
   MenuItem,
   Button,
 } from '@blueprintjs/core';
 import {
   Select
 } from '@blueprintjs/select';
-import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
 
 export default function CurrenciesSelectList({
-  formGroupProps,
   selectProps,
   onItemSelect,
   className,
@@ -43,30 +39,18 @@ export default function CurrenciesSelectList({
   };
 
   return (
-    <FormGroup
-      label={<T id={'currency'}/>}
-      className={
-        classNames(
-          'form-group--select-list',
-          'form-group--currency',
-          className,
-        )
-      }
-      {...formGroupProps}
+    <Select
+      items={currencies}
+      noResults={<MenuItem disabled={true} text='No results.' />}
+      itemRenderer={currencyItem}
+      itemPredicate={filterCurrenciesPredicator}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onCurrencySelect}
+      {...selectProps}
     >
-      <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>
-    </FormGroup>
+      <Button
+        text={'USD US dollars'}
+      />
+    </Select>
   );
 }

client/src/components/DisplayNameList.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ListSelect from "./ListSelect";
+
+export default function DisplayNameList({
+  salutation,
+  firstName,
+  lastName,
+  company,
+  ...restProps
+}) {
+  const formats = [
+    { format: '{1} {2} {3}', values: [salutation, firstName, lastName], required: [1] },
+    { format: '{1} {2}', values: [firstName, lastName], required: [] },
+    { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
+    { format: '{1}', values: [company], required: [1] }
+  ];
+
+  const formatOptions = formats
+    .filter((format) => !format.values.some((value, index) => {
+      return !value && format.required.indexOf(index + 1) !== -1;
+    }))
+    .map((formatOption) => {
+      const { format, values } = formatOption;
+      let label = format;
+
+      values.forEach((value, index) => {
+        const replaceWith = (value || '');
+        label = label.replace(`{${index + 1}}`, replaceWith).trim();
+      });
+      return { label: label.replace(/\s+/g, " ") };
+    });
+
+  return (
+    <ListSelect
+      items={formatOptions}
+      selectedItemProp={'label'}
+      labelProp={'label'}
+      defaultText={'Select display name as'}
+      filterable={false}
+      { ...restProps }
+    />
+  );
+}

client/src/components/RequiredHint.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function RequiredHint() {
+  return (<span class="required">*</span>);
+}

client/src/components/SalutationList.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  ListSelect,
+} from 'components';
+
+export default function SalutationList({
+  ...restProps
+}) {
+  const saluations = ['Mr.', 'Mrs.', 'Ms.', 'Miss', 'Dr.'];
+  const items = saluations.map((saluation) => ({ key: saluation, label: saluation }));
+
+  return (
+    <ListSelect
+      items={items}
+      selectedItemProp={'key'}
+      labelProp={'label'}
+      defaultText={'Salutation'}
+      filterable={false}
+      {...restProps}
+    />
+  );
+}

client/src/components/index.js

@@ -32,7 +32,9 @@ import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
 import ContactSelecetList from './ContactSelecetList';
 import CurrencySelectList from './CurrencySelectList'
-
+import SalutationList from './SalutationList';
+import DisplayNameList from './DisplayNameList';
+import MoneyInputGroup from './MoneyInputGroup';
 
 const Hint = FieldHint;
 
@@ -70,6 +72,9 @@ export {
   Row,
   CloudLoadingIndicator,
   MoneyExchangeRate,
-  ContactSelecetList ,
-  CurrencySelectList
+  ContactSelecetList,
+  CurrencySelectList,
+  DisplayNameList,
+  SalutationList,
+  MoneyInputGroup,
 };