feat(RefundCreditNote): optimize style.

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFloatingActions.js

@@ -15,7 +15,7 @@ function RefundCreditNoteFloatingActions({
   closeDialog,
 }) {
   // Formik context.
-  const { isSubmitting, values, errors } = useFormikContext();
+  const { isSubmitting } = useFormikContext();
 
   // refund credit note dialog context.
   const { dialogName } = useRefundCreditNoteContext();
@@ -34,7 +34,7 @@ function RefundCreditNoteFloatingActions({
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
-          style={{ minWidth: '85px' }}
+          style={{ minWidth: '120px' }}
           type="submit"
           text={<T id={'refund'} />}
         />

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js

@@ -3,16 +3,15 @@ import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import moment from 'moment';
-import { omit, defaultTo } from 'lodash';
+import { omit } from 'lodash';
 
 import { AppToaster } from 'components';
 import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
 import { CreateRefundCreditNoteFormSchema } from './RefundCreditNoteForm.schema';
 import RefundCreditNoteFormContent from './RefundCreditNoteFormContent';
 
-import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose, transactionNumber } from 'utils';
+import { compose } from 'utils';
 
 const defaultInitialValues = {
   from_account_id: '',
@@ -39,7 +38,7 @@ function RefundCreditNoteForm({
   };
 
   // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
+  const handleFormSubmit = (values, { setSubmitting }) => {
     const form = {
       ...omit(values, ['currency_code', 'credits_remaining']),
     };

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js

@@ -25,12 +25,10 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from 'utils';
 import { useAutofocus } from 'hooks';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
 import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
-import withSettings from 'containers/Settings/withSettings';
 
 /**
  * Refund credit note form fields.
@@ -49,7 +47,7 @@ function RefundCreditNoteFormFields() {
             className={classNames('form-group--select-list', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="date" />}
-            inline={true}
+            // inline={true}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
@@ -78,7 +76,7 @@ function RefundCreditNoteFormFields() {
             className={classNames('form-group--amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="amount" />}
-            inline={true}
+            // inline={true}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -103,7 +101,7 @@ function RefundCreditNoteFormFields() {
             className={classNames('form-group--reference', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="reference" />}
-            inline={true}
+            // inline={true}
           >
             <InputGroup
               intent={inputIntent({ error, touched })}
@@ -127,7 +125,7 @@ function RefundCreditNoteFormFields() {
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'from_account_id'} />}
-            inline={true}
+            // inline={true}
           >
             <AccountsSuggestField
               selectedAccountId={value}
@@ -153,7 +151,7 @@ function RefundCreditNoteFormFields() {
           <FormGroup
             label={<T id={'refund_credit_note.dialog.description'} />}
             className={'form-group--description'}
-            inline={true}
+            // inline={true}
           >
             <TextArea growVertically={true} {...field} />
           </FormGroup>

src/containers/Sales/CreditNotes/CreditNotesLanding/components.js

@@ -30,13 +30,6 @@ export function ActionsMenu({
         text={intl.get('credit_note.action.edit_credit_note')}
         onClick={safeCallback(onEdit, original)}
       />
-      <If condition={!original.is_closed && original.is_published}>
-        <MenuItem
-          icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('credit_note.action.refund_credit_note')}
-          onClick={safeCallback(onRefund, original)}
-        />
-      </If>
       <If condition={original.is_draft}>
         <MenuItem
           icon={<Icon icon={'check'} iconSize={18} />}
@@ -44,14 +37,15 @@ export function ActionsMenu({
           onClick={safeCallback(onOpen, original)}
         />
       </If>
-      <If
+      <If condition={!original.is_closed && original.is_published}>
-        condition={
+        <MenuItem
-          !original.is_draft && !original.is_closed && original.is_published
+          icon={<Icon icon="quick-payment-16" />}
-        }
+          text={intl.get('credit_note.action.refund_credit_note')}
-      >
+          onClick={safeCallback(onRefund, original)}
+        />
         <MenuItem
           text={intl.get('credit_note.action.reconcile_with_invoices')}
-          // icon={<Icon icon="quick-payment-16" />}
+          icon={<Icon icon="receipt-24" iconSize={16} />}
           onClick={safeCallback(onReconcile, original)}
         />
       </If>
@@ -73,19 +67,19 @@ export function StatusAccessor(creditNote) {
     <div>
       <Choose>
         <Choose.When condition={creditNote.is_open}>
-          <Tag minimal={true} intent={Intent.WARNING}>
+          <Tag intent={Intent.WARNING} minimal={true} round={true}>
             <T id={'open'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_closed}>
-          <Tag minimal={true} intent={Intent.SUCCESS}>
+          <Tag intent={Intent.SUCCESS} minimal={true} round={true}>
             <T id={'closed'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_draft}>
-          <Tag minimal={true}>
+          <Tag intent={Intent.NONE} minimal={true} round={true}>
             <T id={'draft'} />
           </Tag>
         </Choose.When>

src/style/pages/RefundCreditNote/RefundCreditNote.scss

@@ -1,13 +1,7 @@
 .dialog--refund-credit-note {
   .bp3-dialog-body {
     .bp3-form-group {
-      label.bp3-label {
+      margin-bottom: 16px;
-        min-width: 140px;
-        font-size: 13px;
-      }
-      .bp3-form-content {
-        width: 250px;
-      }
     }
 
     .form-group {
@@ -22,6 +16,7 @@
       }
     }
   }
+
   .bp3-dialog-footer {
     padding-top: 10px;
   }