BIG-63: fix universal search of payment mades.

client/src/components/Details/index.js

@@ -41,7 +41,7 @@ export function DetailsMenu({
 /**
  * Detail item.
  */
-export function DetailItem({ label, children, name, className }) {
+export function DetailItem({ label, children, name, align, className }) {
   const { minLabelSize } = useDetailsMenuContext();
 
   return (
@@ -50,6 +50,7 @@ export function DetailItem({ label, children, name, className }) {
         'detail-item',
         {
           [`detail-item--${name}`]: name,
+          [`align-${align}`]: align,
         },
         className,
       )}

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js

@@ -23,10 +23,12 @@ export default function ItemDetailHeader() {
         <DetailItem
           label={intl.get('sell_price')}
           children={item.sell_price_formatted}
+          align={'right'}
         />
         <DetailItem
           label={intl.get('cost_price')}
           children={item.cost_price_formatted}
+          align={'right'}
         />
       </DetailsMenu>
 

client/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import { isEmpty } from 'lodash';
 
-import { Icon } from 'components';
+import { Icon, If } from 'components';
 
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../../Drawer/withDrawerActions';
@@ -33,8 +34,8 @@ export const PaymentMadeUniversalSearchSelect = withDrawerActions(
 /**
  * Payment made universal search item.
  */
- export function PaymentMadeUniversalSearchItem(
-  item,
+export function PaymentMadeUniversalSearchItem(
+  { text, label, reference },
   { handleClick, modifiers, query },
 ) {
   return (
@@ -42,16 +43,20 @@ export const PaymentMadeUniversalSearchSelect = withDrawerActions(
       active={modifiers.active}
       text={
         <div>
-          <div>{highlightText(item.text, query)}</div>
+          <div>{highlightText(text, query)}</div>
 
           <span class="bp3-text-muted">
-            {highlightText(item.reference.payment_number, query)}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
-            {highlightText(item.reference.formatted_payment_date, query)}
+            {reference.payment_number && (
+              <>
+                {highlightText(reference.payment_number, query)}
+                <Icon icon={'caret-right-16'} iconSize={16} />
+              </>
+            )}
+            {highlightText(reference.formatted_payment_date, query)}
           </span>
         </div>
       }
-      label={<div class="amount">{item.reference.formatted_amount}</div>}
+      label={<div class="amount">{label}</div>}
       onClick={handleClick}
       className={'universal-search__item--payment-made'}
     />
@@ -64,7 +69,6 @@ export const PaymentMadeUniversalSearchSelect = withDrawerActions(
 const paymentMadeToSearch = (payment) => ({
   id: payment.id,
   text: payment.vendor.display_name,
-  subText: payment.formatted_payment_date,
   label: payment.formatted_amount,
   reference: payment,
 });
@@ -72,7 +76,7 @@ const paymentMadeToSearch = (payment) => ({
 /**
  * Binds universal search payment made configure.
  */
- export const universalSearchPaymentMadeBind = () => ({
+export const universalSearchPaymentMadeBind = () => ({
   resourceType: RESOURCES_TYPES.PAYMENT_MADE,
   optionItemLabel: intl.get('payment_mades'),
   selectItemAction: PaymentMadeUniversalSearchSelect,

client/src/containers/Sales/Invoices/InvoiceUniversalSearch.js

@@ -81,7 +81,7 @@ export function InvoiceUniversalSearchItem(
           <span class="bp3-text-muted">
             {highlightText(item.reference.invoice_no, query)}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
-            {highlightText(item.reference.formatted_invoice_date, query)}
+            {item.reference.formatted_invoice_date}
           </span>
         </div>
       }
@@ -102,7 +102,7 @@ export function InvoiceUniversalSearchItem(
  * @param {*} invoice
  * @returns
  */
- const transformInvoicesToSearch = (invoice) => ({
+const transformInvoicesToSearch = (invoice) => ({
   id: invoice.id,
   text: invoice.customer.display_name,
   label: invoice.formatted_balance,

client/src/style/components/UniversalSearch.scss

@@ -110,14 +110,12 @@
               color: #5c7080;
             }
           }
-
         }
 
         &-label {
           flex-direction: row;
+          text-align: right;
         }
-
-
       }
     }