feat: get payments methods to check if there's any payment info saved

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.tsx

@@ -7,6 +7,9 @@ import {
  ListItemText,
  ListSubheader,
 } from '@mui/material';
+import { useQuery } from '@tanstack/react-query';
+
+import { getPaymentMethodsQuery } from 'lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery';
 
 import { AdminNavigationSection } from './AdminNavigation.types';
 import { isSelected } from './AdminNavigation.utils';
@@ -26,8 +29,13 @@ export const AdminNavigation = ({
 }: AdminNavigationProps) => {
  const { _ } = useLingui();
 
- // TODO: implement savedPaymentInfo to check if there's any payment info saved
- const savedPaymentInfo = true;
+ const { data: paymentMethodData } = useQuery(
+ getPaymentMethodsQuery({
+ enabled: true,
+ }),
+ );
+
+ const savedPaymentInfo = (paymentMethodData?.paymentMethods?.length ?? 0) > 0;
 
  if (!savedPaymentInfo) {
  // If there is no saved payment info remove the item from the nav

web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx

@@ -3,13 +3,15 @@ import { useLocation } from 'react-router-dom';
 import { useLingui } from '@lingui/react';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/styles';
+import { useQuery } from '@tanstack/react-query';
 import { getClientConfig } from 'clients/Clients.config';
 
 import Header from 'web-components/src/components/header';
 import { UserMenuItems } from 'web-components/src/components/header/components/UserMenuItems';
 import { Theme } from 'web-components/src/theme/muiTheme';
 
 import { useAuth } from 'lib/auth/auth';
+import { getPaymentMethodsQuery } from 'lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery';
 import { useWallet } from 'lib/wallet/wallet';
 
 import { getWalletAddress } from 'pages/Dashboard/Dashboard.utils';
@@ -54,8 +56,13 @@ const RegistryLayoutHeader: React.FC = () => {
  const menuItems = useMemo(() => getMenuItems(pathname, _), [pathname, _]);
  const onProfileClick = useOnProfileClick();
 
- // TODO: implement savedPaymentInfo
- const savedPaymentInfo = true;
+ const { data: paymentMethodData } = useQuery(
+ getPaymentMethodsQuery({
+ enabled: !!isConnected,
+ }),
+ );
+
+ const savedPaymentInfo = (paymentMethodData?.paymentMethods?.length ?? 0) > 0;
 
  const userMenuItems = useMemo(
  () =>

web-marketplace/src/lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery.constants.ts

@@ -0,0 +1 @@
+export const GET_PAYMENT_METHODS_QUERY_KEY = 'getPost';

web-marketplace/src/lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery.tsx

@@ -0,0 +1,31 @@
+import { apiUri } from 'lib/apiUri';
+
+import { GET_PAYMENT_METHODS_QUERY_KEY } from './getPaymentMethodsQuery.constants';
+import {
+ ReactQueryGetPostQueryParams,
+ ReactQueryGetPostQueryResponse,
+} from './getPaymentMethodsQuery.types';
+
+export const getPaymentMethodsQuery = ({
+ limit,
+ ...params
+}: ReactQueryGetPostQueryParams): ReactQueryGetPostQueryResponse => ({
+ queryKey: [GET_PAYMENT_METHODS_QUERY_KEY, limit],
+ queryFn: async () => {
+ try {
+ const resp = await fetch(
+ `${apiUri}/marketplace/v1/stripe/payment-methods${
+ limit ? `?limit=${limit}` : ''
+ }`,
+ {
+ method: 'GET',
+ credentials: 'include',
+ },
+ );
+ return await resp.json();
+ } catch (e) {
+ return null;
+ }
+ },
+ ...params,
+});

web-marketplace/src/lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery.types.ts

@@ -0,0 +1,12 @@
+import { PaymentMethod } from '@stripe/stripe-js';
+import { QueryObserverOptions } from '@tanstack/react-query';
+
+import { ReactQueryBuilderResponse } from '../../types/react-query.types';
+
+export type ReactQueryGetPostQueryResponse = QueryObserverOptions<{
+ paymentMethods?: PaymentMethod[] | null;
+}>;
+
+export type ReactQueryGetPostQueryParams = {
+ limit?: number;
+} & ReactQueryBuilderResponse<ReactQueryGetPostQueryResponse>;