fix: Typo payments made

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsMadeUniversalSearch.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+import { Icon } from '@/components';
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { highlightText } from '@/utils';
+import { AbilitySubject, PaymentMadeAction } from '@/constants/abilityOption';
+import { DRAWERS } from '@/constants/drawers';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+/**
+ * Universal search bill item select action.
+ */
+function PaymentsMadeUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.PAYMENT_MADE) {
+    openDrawer(DRAWERS.PAYMENT_MADE_DETAILS, { paymentMadeId: resourceId });
+  }
+  return null;
+}
+
+export const PaymentsMadeUniversalSearchSelect = withDrawerActions(
+  PaymentsMadeUniversalSearchSelectComponent,
+);
+
+/**
+ * Payment made universal search item.
+ */
+export function PaymentsMadeUniversalSearchItem(
+  { text, label, reference },
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{highlightText(text, query)}</div>
+
+          <span class="bp4-text-muted">
+            {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">{label}</div>}
+      onClick={handleClick}
+      className={'universal-search__item--payment-made'}
+    />
+  );
+}
+
+/**
+ * Payment made resource item to search item.
+ */
+const paymentMadeToSearch = (payment) => ({
+  id: payment.id,
+  text: payment.vendor.display_name,
+  label: payment.formatted_amount,
+  reference: payment,
+});
+
+/**
+ * Binds universal search payment made configure.
+ */
+export const universalSearchPaymentMadeBind = () => ({
+  resourceType: RESOURCES_TYPES.PAYMENT_MADE,
+  optionItemLabel: intl.get('payments_made'),
+  selectItemAction: PaymentsMadeUniversalSearchSelect,
+  itemRenderer: PaymentsMadeUniversalSearchItem,
+  itemSelect: paymentMadeToSearch,
+  permission: {
+    ability: PaymentMadeAction.View,
+    subject: AbilitySubject.PaymentMade,
+  },
+});