CM-189: add beenfit plans picker

src/constants.js

@@ -77,3 +77,5 @@ export const BENEFIT_PLAN_TYPE = {
 };
 
 export const BENEFIT_PLAN_TYPE_LIST = [BENEFIT_PLAN_TYPE.INDIVIDUAL, BENEFIT_PLAN_TYPE.GROUP];
+
+export const BENEFIT_PLANS_QUANTITY_LIMIT = 15;

src/index.js

@@ -40,6 +40,7 @@ import BenefitPlanSearcher from './components/BenefitPlanSearcher';
 import { BenefitPackageMembersTabLabel, BenefitPackageMembersTabPanel } from './components/BenefitPackageMembersTab';
 import BenefitPlanTasksPage from './pages/BenefitPlanTasksPage';
 import BenefitPlanTaskPreviewTable from './components/BenefitPlanTaskPreviewTable';
+import BenefitPlanPicker from './pickers/BenefitPlanPicker';
 
 const ROUTE_BENEFIT_PLANS = 'benefitPlans';
 const ROUTE_BENEFIT_PLAN = 'benefitPlans/benefitPlan';
@@ -68,6 +69,7 @@ const DEFAULT_CONFIG = {
     { key: 'socialProtection.BenefitPlanSearcher', ref: BenefitPlanSearcher },
     { key: 'socialProtection.BenefitPlanTasksPage', ref: BenefitPlanTasksPage },
     { key: 'socialProtection.BenefitPlanTaskPreviewTable', ref: BenefitPlanTaskPreviewTable },
+    { key: 'socialProtection.BenefitPlanPicker', ref: BenefitPlanPicker },
   ],
   'benefitPlan.TabPanel.label': [
     BenefitPlanBeneficiariesListTabLabel,

src/pickers/BenefitPlanPicker.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { TextField, Tooltip } from '@material-ui/core';
+
+import {
+  Autocomplete, useModulesManager, useTranslations, useGraphqlQuery,
+} from '@openimis/fe-core';
+import { BENEFIT_PLANS_QUANTITY_LIMIT } from '../constants';
+
+function BenefitPlanPicker(props) {
+  const {
+    multiple,
+    required,
+    label,
+    nullLabel,
+    withLabel = false,
+    placeholder,
+    withPlaceholder = false,
+    readOnly,
+    value,
+    onChange,
+    filter,
+    filterSelectedOptions,
+  } = props;
+
+  const modulesManager = useModulesManager();
+  const [filters, setFilters] = useState({ isDeleted: false });
+  const [currentString, setCurrentString] = useState('');
+  const { formatMessage, formatMessageWithValues } = useTranslations('socialProtection', modulesManager);
+
+  const { isLoading, data, error } = useGraphqlQuery(
+    `
+    query BenefitPlanPicker(
+    $search: String, $first: Int, $isDeleted: Boolean
+    ) {
+      benefitPlan(name_Icontains: $search, code_Icontains: $search, first: $first, isDeleted: $isDeleted) {
+        edges {
+          node {
+            id
+            code
+            name
+          }
+        }
+      }
+    }
+  `,
+    filters,
+    { skip: true },
+  );
+
+  const benefitPlans = data?.benefitPlan?.edges.map((edge) => edge.node) ?? [];
+  const shouldShowTooltip = benefitPlans?.length >= BENEFIT_PLANS_QUANTITY_LIMIT && !value && !currentString;
+
+  return (
+    <Autocomplete
+      multiple={multiple}
+      error={error}
+      readOnly={readOnly}
+      options={benefitPlans ?? []}
+      isLoading={isLoading}
+      value={value}
+      getOptionLabel={(option) => `${option.code} ${option.name}`}
+      onChange={(value) => onChange(value, value ? `${value.code} ${value.name}` : null)}
+      setCurrentString={setCurrentString}
+      filterOptions={filter}
+      filterSelectedOptions={filterSelectedOptions}
+      onInputChange={(search) => setFilters({ first: BENEFIT_PLANS_QUANTITY_LIMIT, search, isDeleted: false })}
+      renderInput={(inputProps) => (
+        <Tooltip
+          title={
+            shouldShowTooltip
+              ? formatMessageWithValues('BenefitPlansPicker.aboveLimit', { limit: BENEFIT_PLANS_QUANTITY_LIMIT })
+              : ''
+          }
+        >
+          <TextField
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...inputProps}
+            required={required}
+            label={(withLabel && (label || nullLabel)) || formatMessage('BenefitPlan')}
+            placeholder={(withPlaceholder && placeholder) || formatMessage('BenefitPlanPicker.placeholder')}
+          />
+        </Tooltip>
+      )}
+    />
+  );
+}
+
+export default BenefitPlanPicker;