feat: add getAccount query on OrganizationDetailsSellers component (#172

)

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Added `getAccount` query on OrganizationDetailsSellers component to get the account data
+
 ## [1.34.3] - 2024-09-05
 
 ### Fixed

react/admin/OrganizationDetails.tsx

@@ -42,6 +42,12 @@ export interface CellRendererProps<RowType> {
   updateCellMeasurements: () => void
 }
 
+export type AvailabilityTypes =
+  | 'availablePriceTables'
+  | 'availableCollections'
+  | 'availablePayments'
+  | 'availableSellers'
+
 const SESSION_STORAGE_KEY = 'organization-details-tab'
 
 // combines defaultCustomFields and customFields input from the organization data to fill input fields
@@ -166,13 +172,7 @@ const OrganizationDetails: FunctionComponent = () => {
       })
   }
 
-  const getSchema = (
-    type?:
-      | 'availablePriceTables'
-      | 'availableCollections'
-      | 'availablePayments'
-      | 'availableSellers'
-  ) => {
+  const getSchema = (type?: AvailabilityTypes) => {
     let cellRenderer
 
     switch (type) {

react/admin/OrganizationDetails/OrganizationDetailsSellers.tsx

@@ -1,9 +1,11 @@
-import React, { Fragment, useState } from 'react'
-import { FormattedMessage, useIntl } from 'react-intl'
-import { PageBlock, Table } from 'vtex.styleguide'
+import React, { Fragment, useEffect, useState } from 'react'
 import { useQuery } from 'react-apollo'
 import { useToast } from '@vtex/admin-ui'
+import { PageBlock, Table } from 'vtex.styleguide'
+import { FormattedMessage, useIntl } from 'react-intl'
 
+import type { AvailabilityTypes } from '../OrganizationDetails'
+import GET_ACCOUNT from '../../graphql/getAccount.graphql'
 import { organizationMessages as messages } from '../utils/messages'
 import { organizationBulkAction } from '../utils/organizationBulkAction'
 import GET_SELLERS_PAGINATED from '../../graphql/getSellersPaginated.graphql'
@@ -18,6 +20,17 @@ export interface SellerItem {
   name: string
 }
 
+interface RowParams {
+  selectedRows: Seller[]
+}
+
+interface GetAccountResponse {
+  getAccount: {
+    id: string
+    name: string
+  }
+}
+
 interface GetSellersPaginatedQueryResponse {
   getSellersPaginated: {
     items: SellerItem[]
@@ -34,9 +47,9 @@ const OrganizationDetailsSellers = ({
   sellersState,
   setSellersState,
 }: {
-  getSchema: (argument?: any) => any
+  getSchema: (type?: AvailabilityTypes) => unknown
   sellersState: Seller[]
-  setSellersState: (value: any) => void
+  setSellersState: React.Dispatch<React.SetStateAction<Seller[]>>
 }) => {
   /**
    * Hooks
@@ -53,21 +66,42 @@ const OrganizationDetailsSellers = ({
   /**
    * Queries
    */
-  const { data: sellersData, loading, refetch } = useQuery<
-    GetSellersPaginatedQueryResponse
-  >(GET_SELLERS_PAGINATED, {
+  const { data: accountData, loading: loadingAccountData } = useQuery<
+    GetAccountResponse
+  >(GET_ACCOUNT, {
+    onError: error => {
+      toast({ variant: 'critical', message: error.message })
+    },
+  })
+
+  const {
+    data: sellersData,
+    loading: loadingSellersData,
+    refetch: refetchSellersData,
+  } = useQuery<GetSellersPaginatedQueryResponse>(GET_SELLERS_PAGINATED, {
     variables,
+    skip: !accountData,
     onCompleted: data => {
       if (!data?.getSellersPaginated?.items) {
         return
       }
 
-      const options = data.getSellersPaginated.items.map(
-        ({ name, id }: SellerItem) => ({
+      const options = data.getSellersPaginated.items.map(({ name, id }) => {
+        // This is a workaround to show the account name in the seller list only for the first seller.
+        // This is because the first seller is created with the account name,
+        // and in turn the trade name is indexed to the product catalogs.
+        if (id === '1' && accountData) {
+          return {
+            name: accountData.getAccount.name,
+            sellerId: id,
+          }
+        }
+
+        return {
           name,
           sellerId: id,
-        })
-      )
+        }
+      })
 
       setSellerOptions(options)
     },
@@ -76,14 +110,17 @@ const OrganizationDetailsSellers = ({
     },
   })
 
+  /**
+   * Constants
+   */
   const totalItems = sellersData?.getSellersPaginated?.pagination?.total ?? 0
 
   /**
    * Functions
    */
-  const handleRemoveSellers = (rowParams: any) => {
+  const handleRemoveSellers = (rowParams: RowParams) => {
     const { selectedRows = [] } = rowParams
-    const sellersToRemove = [] as Seller[]
+    const sellersToRemove: Seller[] = []
 
     selectedRows.forEach((row: Seller) => {
       sellersToRemove.push(row)
@@ -99,33 +136,39 @@ const OrganizationDetailsSellers = ({
     setSellersState(newSellersList)
   }
 
-  const handleAddSellers = (rowParams: any) => {
+  const handleAddSellers = (rowParams: RowParams) => {
     const { selectedRows = [] } = rowParams
-    const newSellers = [] as Seller[]
+    const newSellers: Seller[] = []
 
     selectedRows.forEach((row: Seller) => {
       if (!sellersState.some(seller => seller.sellerId === row.sellerId)) {
         newSellers.push(row)
       }
     })
 
-    setSellersState((prevState: any) => [...prevState, ...newSellers])
+    setSellersState(prevState => [...prevState, ...newSellers])
   }
 
   const handleNext = () => {
     if (variables.page * variables.pageSize >= totalItems) return
 
     setVariables(prev => ({ ...prev, page: prev.page + 1 }))
 
-    refetch({ page: variables.page + 1, pageSize: variables.pageSize })
+    refetchSellersData({
+      page: variables.page + 1,
+      pageSize: variables.pageSize,
+    })
   }
 
   const handlePrev = () => {
     if (variables.page === 1) return
 
     setVariables(prev => ({ ...prev, page: prev.page - 1 }))
 
-    refetch({ page: variables.page - 1, pageSize: variables.pageSize })
+    refetchSellersData({
+      page: variables.page - 1,
+      pageSize: variables.pageSize,
+    })
   }
 
   const handleRowsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -135,12 +178,18 @@ const OrganizationDetailsSellers = ({
 
     setVariables({ page: 1, pageSize: +value })
 
-    refetch({
+    refetchSellersData({
       page: 1,
       pageSize: +value,
     })
   }
 
+  useEffect(() => {
+    if (accountData) {
+      refetchSellersData()
+    }
+  }, [accountData, refetchSellersData])
+
   return (
     <Fragment>
       <PageBlock variation="half" title={formatMessage(messages.sellers)}>
@@ -166,7 +215,7 @@ const OrganizationDetailsSellers = ({
           </h4>
           <Table
             fullWidth
-            loading={loading}
+            loading={loadingAccountData || loadingSellersData}
             schema={getSchema('availableSellers')}
             bulkActions={organizationBulkAction(
               handleAddSellers,

react/graphql/getAccount.graphql

@@ -0,0 +1,6 @@
+query GetAccount {
+  getAccount {
+    id
+    name
+  }
+}

react/modules/session.ts

@@ -49,7 +49,10 @@ export function getSession() {
 }
 
 export const useSessionResponse = () => {
-  const [session, setSession] = useState<unknown>()
+  const [session, setSession] = useState<
+    Session | SessionUnauthorized | SessionForbidden
+  >()
+
   const sessionPromise = getSession()
 
   useEffect(() => {