feat: #4413 adds subs filters

packages/admin-portal/src/components/pages/subscriptions/__tests__/index.test.tsx

@@ -71,7 +71,10 @@ describe('onPageChangeHandler', () => {
   it('should return a function when executing', () => {
     const onPageChangeHandlerFn = onPageChangeHandler(mockRouterProps.history, {
       type: 'developerEdition',
-      developerId: '36bd47c8-b41c-4724-8848-12056856f344',
+      developerName: 'developerName',
+      userEmail: '[email protected]',
+      appName: 'appName',
+      status: 'active',
     } as SubscriptionsFilterFormValues)
     expect(onPageChangeHandlerFn).toBeDefined()
 
@@ -88,7 +91,10 @@ describe('onSearchHandler', () => {
     onSearchHandlerFn(
       {
         type: 'developerEdition',
-        developerId: '36bd47c8-b41c-4724-8848-12056856f344',
+        developerName: 'developerName',
+        userEmail: '[email protected]',
+        appName: 'appName',
+        status: 'active',
       } as SubscriptionsFilterFormValues,
       {
         setStatus: jest.fn(),

packages/admin-portal/src/components/pages/subscriptions/index.tsx

@@ -14,7 +14,6 @@ import {
   Section,
   Alert,
   Button,
-  notification,
 } from '@reapit/elements-legacy'
 import Routes from '@/constants/routes'
 import SubscriptionsFilterForm, {
@@ -23,7 +22,7 @@ import SubscriptionsFilterForm, {
 import CancelConfirmModal from '@/components/ui/subscriptions/subscription-cancel-confirm'
 import MemberNameCell from '@/components/ui/subscriptions/subscription-member-name-cell'
 import { selectSubscriptionListState } from '@/selector/admin'
-import { cleanObject, errorMessages } from '@reapit/utils'
+import { cleanObject } from '@reapit/utils'
 import {
   fetchSubscriptionList,
   FetchSubscriptionListQuery,
@@ -34,8 +33,11 @@ import store from '../../../core/store'
 
 export const buildFilterValues = (queryParams: URLSearchParams): SubscriptionsFilterFormValues => {
   const type = queryParams.get('type') || ''
-  const developerId = queryParams.get('developerId') || ''
-  return { type, developerId } as SubscriptionsFilterFormValues
+  const developerName = queryParams.get('developerName') || ''
+  const userEmail = queryParams.get('userEmail') || ''
+  const appName = queryParams.get('appName') || ''
+  const status = queryParams.get('status') || ''
+  return { type, developerName, userEmail, appName, status } as SubscriptionsFilterFormValues
 }
 
 export const onPageChangeHandler = (history: History<any>, queryParams: SubscriptionsFilterFormValues) => (
@@ -54,12 +56,6 @@ export const onSearchHandler = (history: History<any>) => (
   { setStatus },
 ) => {
   const cleanedValues = cleanObject(queryParams)
-  const { developerId } = cleanedValues
-  if (developerId?.length > 1) {
-    return notification.error({
-      message: errorMessages.SUBSCRIPTION_MULTIPLE_DEVELOPER,
-    })
-  }
 
   if (isEmptyObject(cleanedValues)) {
     setStatus('Please enter at least one search criteria')

packages/admin-portal/src/components/ui/__tests__/subscriptions/subscriptions-filter-form.test.tsx

@@ -7,10 +7,7 @@ import appState from '@/reducers/__stubs__/app-state'
 import configureStore from 'redux-mock-store'
 import Routes from '@/constants/routes'
 
-import SubscriptionsFilterForm, {
-  SubscriptionsFormProps,
-  prepareDevelopersOptions,
-} from '../../subscriptions/subscriptions-filter-form'
+import SubscriptionsFilterForm, { SubscriptionsFormProps } from '../../subscriptions/subscriptions-filter-form'
 
 const createStore = (loading: boolean, data?: DeveloperModelPagedResult) => {
   return {
@@ -25,7 +22,10 @@ const createStore = (loading: boolean, data?: DeveloperModelPagedResult) => {
 const initProps = (): SubscriptionsFormProps => ({
   filterValues: {
     type: 'type',
-    developerId: 'developerId',
+    developerName: 'developerName',
+    userEmail: '[email protected]',
+    appName: 'appName',
+    status: 'active',
   },
   onSearch: jest.fn(),
 })
@@ -56,17 +56,3 @@ describe('SubscriptionsFilterForm', () => {
     ).toMatchSnapshot()
   })
 })
-
-describe('prepareDevelopersOptions', () => {
-  it('prepareDevelopersOptions should return true result', () => {
-    const data = [
-      { id: '123', name: 'Alice' },
-      { id: '456', name: 'Bob' },
-    ]
-    const expected = [
-      { label: 'Alice', value: '123' },
-      { label: 'Bob', value: '456' },
-    ]
-    expect(prepareDevelopersOptions(data)).toEqual(expected)
-  })
-})

packages/admin-portal/src/components/ui/subscriptions/subscriptions-filter-form.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { useSelector } from 'react-redux'
 import {
   Button,
   Grid,
@@ -9,45 +8,36 @@ import {
   FormSubHeading,
   Formik,
   Form,
-  DropdownSelect,
-  SelectOption,
   SelectBox,
+  Input,
 } from '@reapit/elements-legacy'
-import store from '../../../core/store'
-import { fetchDeveloperList, fetchDeveloperListValues } from '@/actions/devs-management'
-import { selectDeveloperListState } from '@/selector/admin'
-import { DeveloperData } from '@/reducers/developers/list'
 import { subscriptionTypes } from '../../../constants/subscriptionTypes'
 
 export interface SubscriptionsFilterFormValues {
   type: string
-  developerId: string
+  developerName: string
+  userEmail: string
+  appName: string
+  status: string
 }
 
 export interface SubscriptionsFormProps {
   filterValues: SubscriptionsFilterFormValues
   onSearch: any
 }
 
-export const prepareDevelopersOptions: (data: DeveloperData[]) => SelectOption[] = (data) =>
-  data.map((developer) => {
-    const { id, name } = developer
-
-    return {
-      label: name,
-      value: id,
-    } as SelectOption
-  })
+const statusFilterOptions = [
+  {
+    label: 'Active',
+    value: 'active',
+  },
+  {
+    label: 'Cancelled',
+    value: 'cancelled',
+  },
+]
 
 const SubscriptionsFilterForm: React.FC<SubscriptionsFormProps> = ({ filterValues, onSearch }) => {
-  React.useEffect(() => {
-    store.dispatch(fetchDeveloperList({ queryString: '?page=1' } as fetchDeveloperListValues))
-  }, [])
-
-  const DeveloperListState = useSelector(selectDeveloperListState)
-  const { data } = DeveloperListState
-  const developers = prepareDevelopersOptions(data)
-
   return (
     <Formik initialValues={filterValues} onSubmit={onSearch}>
       {({ status }) => {
@@ -61,15 +51,23 @@ const SubscriptionsFilterForm: React.FC<SubscriptionsFormProps> = ({ filterValue
                   <SelectBox name="type" options={subscriptionTypes} labelText="Type" id="type" />
                 </GridItem>
                 <GridItem>
-                  <DropdownSelect
-                    mode="multiple"
-                    id="developerId"
-                    placeholder="Please select"
-                    name="developerId"
+                  <Input
+                    type="text"
                     labelText="Developer Name"
-                    options={developers}
+                    id="developerName"
+                    name="developerName"
+                    maxLength={256}
                   />
                 </GridItem>
+                <GridItem>
+                  <Input type="text" labelText="User Email" id="userEmail" name="userEmail" maxLength={256} />
+                </GridItem>
+                <GridItem>
+                  <Input type="text" labelText="App Name" id="appName" name="appName" maxLength={256} />
+                </GridItem>
+                <GridItem>
+                  <SelectBox id="status" name="status" labelText="Status" options={statusFilterOptions} />
+                </GridItem>
                 <GridItem className="mt-4">
                   <Button type="submit" variant="primary">
                     Search

packages/admin-portal/src/sagas/subscriptions/__tests__/index.ts

@@ -36,7 +36,8 @@ const fakeResponse = {} as SubscriptionModelPagedResult
 const params = {
   data: {
     page: 1,
-    queryString: '?type=developerEdition&developerId=17e6c3d3-b66d-4eb4-a0fc-f3d76e5809a1',
+    queryString:
+      '?type=developerEdition&developerName=developerName&[email protected]&appName=appName&status=active',
   },
 }
 
@@ -48,7 +49,10 @@ describe('fetchSubscriptionListHandler ', () => {
       pageSize: REVISIONS_PER_PAGE,
       pageNumber: 1,
       subscriptionType: 'developerEdition',
-      developerId: '17e6c3d3-b66d-4eb4-a0fc-f3d76e5809a1',
+      developerName: 'developerName',
+      userEmail: '[email protected]',
+      appName: 'appName',
+      status: 'active',
     }),
   )
 

packages/admin-portal/src/sagas/subscriptions/index.ts

@@ -25,13 +25,19 @@ export const fetchSubscriptionListHandler = function* ({ data: { page, queryStri
   try {
     const queryParams = new URLSearchParams(queryString)
     const subscriptionType = queryParams.get('type') || ''
-    const developerId = queryParams.get('developerId') || ''
+    const developerName = queryParams.get('developerName') || ''
+    const userEmail = queryParams.get('userEmail') || ''
+    const appName = queryParams.get('appName') || ''
+    const status = queryParams.get('status') || ''
 
     const response = yield call(fetchSubscriptionListApi, {
       pageSize: REVISIONS_PER_PAGE,
       pageNumber: page,
       subscriptionType,
-      developerId,
+      developerName,
+      userEmail,
+      appName,
+      status,
     })
 
     yield put(fetchSubscriptionListSuccess(response))

packages/admin-portal/src/services/subscriptions.ts

@@ -10,6 +10,10 @@ export type FetchSubscriptionsListParams = FetchListCommonParams & {
   developerId?: string
   subscriptionType?: string
   applicationId?: string
+  appName?: string
+  developerName?: string
+  status?: string
+  userEmail?: string
 }
 
 export interface CancelSubscriptionParams {