review and billing account update

src/apps/admin/src/lib/components/ReviewSummaryList/MobileListView/MobileListView.tsx

@@ -67,22 +67,22 @@ const MobileListView: FC<MobileListViewProps<ReviewSummary>> = props => {
             <div className={styles.mobileListViewItemContainer} key={d.legacyChallengeId}>
                 <div className={styles.rows}>
                     <div className={styles.row1}>
-                        {/* Title */ propertyElements[1]}
-                        {/* Status  */ propertyElements[4]}
+                        {/* Title */ propertyElements[0]}
+                        {/* Status */ propertyElements[2]}
                     </div>
                     <div className={styles.row2}>
-                        {/* Legacy ID */ propertyElements[2]}
+                        {/* Legacy ID */ propertyElements[1]}
                     </div>
                     <div className={styles.row3}>
-                        {propertyElementLabels[5]}
-                        {/* Open Review Opp' */ propertyElements[5]}
+                        {/* propertyElementLabels[5] */}
+                        {/* Open Review Opp' */ propertyElements[3]}
                     </div>
                     <div className={styles.row4}>
-                        {propertyElementLabels[6]}
-                        {/* Review Applications */ propertyElements[6]}
+                        {propertyElementLabels[4]}
+                        {/* Review Applications */ propertyElements[4]}
                     </div>
                     <div className={styles.row5}>
-                        {/* Action */ propertyElements[7]}
+                        {/* Action */ propertyElements[5]}
                     </div>
                 </div>
             </div>

src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.tsx

@@ -58,11 +58,12 @@ const ChallengeTitle: FC<{
 const ReviewSummaryList: FC<ReviewListProps> = props => {
     const columns = useMemo<TableColumn<ReviewSummary>[]>(
         () => [
-            {
-                label: 'Challenge type',
-                propertyName: '',
-                type: 'text',
-            },
+            // Hide the columns temporary, we do not have these data now
+            // {
+            //     label: 'Challenge type',
+            //     propertyName: '',
+            //     type: 'text',
+            // },
             {
                 label: 'Challenge Title',
                 propertyName: 'challengeName',
@@ -76,11 +77,11 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
                 propertyName: 'legacyChallengeId',
                 type: 'text',
             },
-            {
-                label: 'Current phase',
-                propertyName: '',
-                type: 'text',
-            },
+            // {
+            //     label: 'Current phase',
+            //     propertyName: '',
+            //     type: 'text',
+            // },
             { label: 'Status', propertyName: 'challengeStatus', type: 'text' },
             // I think this column is important, and it exits in `admin-app`
             // but resp does not have it, so I just comment it here

src/apps/admin/src/lib/components/ReviewerList/ReviewerList.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { format } from 'date-fns'
 
-import { CheckIcon } from '@heroicons/react/solid'
+import { CheckIcon, XIcon } from '@heroicons/react/solid'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 import {
     Button,
@@ -27,6 +27,7 @@ export interface ReviewerListProps {
     approvingReviewerId: number
     onPageChange: (page: number) => void
     onApproveApplication: (reviewer: Reviewer) => void
+    onUnapproveApplication: (reviewer: Reviewer) => void
     onToggleSort: (sort: Sort) => void
 }
 
@@ -35,15 +36,22 @@ const ApproveButton: FC<{
     openReviews: number
     approvingReviewerId: number
     onApproveApplication: ReviewerListProps['onApproveApplication']
+    onUnapproveApplication: ReviewerListProps['onUnapproveApplication']
 }> = props => {
     const handleApprove = useEventCallback((): void => {
         props.onApproveApplication(props.reviewer)
     })
 
+    const handleRemove = useEventCallback((): void => {
+        props.onUnapproveApplication(props.reviewer)
+    })
+
     const isApproving = props.approvingReviewerId === props.reviewer.userId
     const isOtherApproving = props.approvingReviewerId > 0
     const hideApproveButton
         = props.openReviews < 1 || props.reviewer.applicationStatus !== 'Pending'
+    const showRemoveButton
+        = props.reviewer.applicationStatus === 'Approved'
 
     return (
         <>
@@ -53,7 +61,19 @@ const ApproveButton: FC<{
                     className={styles.approvingLoadingSpinner}
                 />
             ) : (
-                !hideApproveButton && (
+                hideApproveButton ? (
+                    showRemoveButton && (
+                        <Button
+                            primary
+                            variant='danger'
+                            onClick={handleRemove}
+                        >
+                            <XIcon className='icon icon-fill' />
+                            {' '}
+                            Remove Reviewer
+                        </Button>
+                    )
+                ) : (
                     <Button
                         primary
                         onClick={handleApprove}
@@ -105,13 +125,15 @@ const Actions: FC<{
     openReviews: number
     approvingReviewerId: number
     onApproveApplication: ReviewerListProps['onApproveApplication']
+    onUnapproveApplication: ReviewerListProps['onUnapproveApplication']
 }> = props => (
     <div className={styles.rowActions}>
         <ApproveButton
             reviewer={props.reviewer}
             openReviews={props.openReviews}
             approvingReviewerId={props.approvingReviewerId}
             onApproveApplication={props.onApproveApplication}
+            onUnapproveApplication={props.onUnapproveApplication}
         />
     </div>
 )
@@ -155,7 +177,7 @@ const ReviewerList: FC<ReviewerListProps> = props => {
                 type: 'element',
             },
             {
-                label: 'Open Review Opp',
+                label: 'Open Review',
                 propertyName: '',
                 renderer: (reviewer: Reviewer) => (
                     // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -170,7 +192,8 @@ const ReviewerList: FC<ReviewerListProps> = props => {
                 propertyName: 'reviewsInPast60Days',
                 type: 'number',
             },
-            { label: 'Matching Skills', propertyName: '', type: 'text' },
+            // Hide the columns temporary, we do not have these data now
+            // { label: 'Matching Skills', propertyName: '', type: 'text' },
             {
                 label: '',
                 renderer: (reviewer: Reviewer) => (
@@ -179,6 +202,7 @@ const ReviewerList: FC<ReviewerListProps> = props => {
                         openReviews={props.openReviews}
                         approvingReviewerId={props.approvingReviewerId}
                         onApproveApplication={props.onApproveApplication}
+                        onUnapproveApplication={props.onUnapproveApplication}
                     />
                 ),
                 type: 'action',

src/apps/admin/src/lib/hooks/useTableFilterBackend.ts

@@ -62,6 +62,7 @@ export function useTableFilterBackend<T>(
             fetchDataRef.current.filterCriteria,
             () => {
                 fetchDataRef.current.isLoading = false
+                window.scrollTo({ left: 0, top: 200 })
             },
             () => {
                 fetchDataRef.current.isLoading = false

src/apps/admin/src/lib/models/BillingAccountResource.model.ts

@@ -5,4 +5,5 @@ export interface BillingAccountResource {
   id: number
   name: string
   status: string
+  mobileType?: 'label' | 'last-value'
 }

src/apps/admin/src/review-management/ManageReviewerPage/ManageReviewerPage.tsx

@@ -7,7 +7,7 @@ import {
     useRef,
     useState,
 } from 'react'
-import { useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
 import { sortBy } from 'lodash'
 
 import { XIcon } from '@heroicons/react/solid'
@@ -61,6 +61,7 @@ export const ManageReviewerPage: FC = () => {
     const { challengeId = '' }: { challengeId?: string } = useParams<{
         challengeId: string
     }>()
+    const navigate: NavigateFunction = useNavigate()
     const [filterCriteria, setFilterCriteria]: [
         ReviewFilterCriteria,
         Dispatch<SetStateAction<ReviewFilterCriteria>>
@@ -134,6 +135,13 @@ export const ManageReviewerPage: FC = () => {
             })
     })
 
+    const unapprove = useEventCallback((): void => {
+        // how to get challenge Id?
+        // Now we use one specific challenge id for testing
+        const realChallengeId = 'c713e250-ecb4-4192-8717-d607ddda8db4'
+        navigate(`${rootRoute}/challenge-management/${realChallengeId}/manage-user`)
+    })
+
     // Init
     useEffect(() => {
         search()
@@ -214,6 +222,7 @@ export const ManageReviewerPage: FC = () => {
                         reviewers={reviewers}
                         openReviews={openReviews}
                         onApproveApplication={approve}
+                        onUnapproveApplication={unapprove}
                         approvingReviewerId={userId}
                         paging={{
                             page: filterCriteria.page,
@@ -519,8 +528,8 @@ const ApproveActionType = {
 type ApproveActionType =
     | {
           type: // | typeof ApproveActionType.APPROVE_INIT
-          | typeof ApproveActionType.APPROVE_FAILED
-              | typeof ApproveActionType.APPROVE_DONE
+            | typeof ApproveActionType.APPROVE_FAILED
+            | typeof ApproveActionType.APPROVE_DONE
       }
     | {
           type: typeof ApproveActionType.APPROVE_INIT