bug/8839-Chika-PaymentsQueryNotDependentOnAuthorizedServicesAPICall (#…

…9043)

Co-authored-by: Tim Wright <[email protected]>

VAMobile/src/api/payments/getPayments.tsx

@@ -1,8 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
+import { has } from 'underscore'
 
+import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { PaymentsGetData } from 'api/types'
 import { DEFAULT_PAGE_SIZE } from 'constants/common'
 import { Params, get } from 'store/api'
+import { DowntimeFeatureTypeConstants } from 'store/api/types'
+import { useDowntime } from 'utils/hooks'
 import { getFirstAndLastDayOfYear, groupPaymentsByDate } from 'utils/payments'
 
 import { paymentsKeys } from './queryKeys'
@@ -35,8 +39,12 @@ const getPayments = async (year: string | undefined, page: number): Promise<Paym
  * Returns a query for user payments history
  */
 export const usePayments = (year: string | undefined, page: number, options?: { enabled?: boolean }) => {
+  const { data: authorizedServices } = useAuthorizedServices()
+  const paymentsInDowntime = useDowntime(DowntimeFeatureTypeConstants.payments)
+  const queryEnabled = options && has(options, 'enabled') ? options.enabled : true
   return useQuery({
     ...options,
+    enabled: !!(authorizedServices?.paymentHistory && !paymentsInDowntime && queryEnabled),
     queryKey: [paymentsKeys.payments, year, page],
     queryFn: () => getPayments(year, page),
     meta: {

VAMobile/src/screens/PaymentsScreen/PaymentHistory/PaymentHistoryScreen.tsx

@@ -5,6 +5,7 @@ import { StackScreenProps } from '@react-navigation/stack'
 
 import { map } from 'underscore'
 
+import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { usePayments } from 'api/payments'
 import { PaymentsData } from 'api/types'
 import {
@@ -29,6 +30,7 @@ import NoPaymentsScreen from './NoPayments/NoPaymentsScreen'
 type PaymentHistoryScreenProps = StackScreenProps<PaymentsStackParamList, 'PaymentHistory'>
 
 function PaymentHistoryScreen({ navigation }: PaymentHistoryScreenProps) {
+  const { data: userAuthorizedServices } = useAuthorizedServices()
   const { t } = useTranslation(NAMESPACE.COMMON)
   const theme = useTheme()
   const navigateTo = useRouteNavigation()
@@ -37,12 +39,13 @@ function PaymentHistoryScreen({ navigation }: PaymentHistoryScreenProps) {
   const [yearPickerOption, setYearPickerOption] = useState<yearsDatePickerOption>()
   const [pickerOptions, setpickerOptions] = useState<Array<yearsDatePickerOption>>([])
   const paymentsInDowntime = useDowntime(DowntimeFeatureTypeConstants.payments)
+  const accessToPaymentHistory = userAuthorizedServices?.paymentHistory
   const {
     data: payments,
     isFetching: loading,
     error: hasError,
     refetch: refetchPayments,
-  } = usePayments(yearPickerOption?.label, page, { enabled: !paymentsInDowntime })
+  } = usePayments(yearPickerOption?.label, page)
   const noPayments = payments?.meta.availableYears?.length === 0
 
   type yearsDatePickerOption = {
@@ -147,7 +150,7 @@ function PaymentHistoryScreen({ navigation }: PaymentHistoryScreenProps) {
           error={hasError}
           onTryAgain={refetchPayments}
         />
-      ) : noPayments ? (
+      ) : noPayments || !accessToPaymentHistory ? (
         <NoPaymentsScreen />
       ) : (
         <>