fix(open-spark): trade api route changes and other cosmetic changes

1. change trade api, now we are sending id to current trade status
2. on my trade page added pending icon logic
3. on dashboard , added pending icon logic to current trade

apps/open-spark/components/energyPurchaseForm/index.tsx

@@ -102,7 +102,16 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
 
       if (response.status === 200 || response.status === 204) {
         console.log('Trade created successfully:', response.data)
-        router.push('/')
+        if (role !== ROLE.PRODUCER) {
+          router.push({
+            pathname: '/',
+            query: { id: response.data?.id }
+          })
+        } else {
+          router.push({
+            pathname: '/'
+          })
+        }
       }
     } catch (error) {
       console.error('Error creating trade:', error)

apps/open-spark/lib/types/dashboard.ts

@@ -12,6 +12,7 @@ export interface CurrentTradeData {
   symbol: string
 }
 export type StatusItem = {
+  isPending?: boolean
   label: string | React.ReactNode
   status?: string
   statusTime?: string

apps/open-spark/pages/dashboard.tsx

@@ -25,6 +25,7 @@ import Cookies from 'js-cookie'
 import axios from 'axios'
 import { DashboardData, StatusItem, TradeData } from '@lib/types/dashboard'
 import { parseAndFormatDate } from '@utils/parsedFormatDate-utils'
+import PendingIcon from '@public/images/pending.svg'
 
 const Dashboard = () => {
   const { t } = useLanguage()
@@ -103,32 +104,30 @@ const Dashboard = () => {
   }, [role, bapDashboardData, bppDashboardData, startDate, endDate])
 
   const fetchLastTradeData = async () => {
-    try {
-      const response = await axios.get(`${strapiUrl}${ROUTE_TYPE[role!]}/trade`, {
-        headers: { Authorization: `Bearer ${bearerToken}` },
-        withCredentials: true
-      })
+    const routerQueryId = router.query?.id
+    if (routerQueryId) {
+      try {
+        const response = await axios.get(`${strapiUrl}${ROUTE_TYPE[role!]}/trade?id=${routerQueryId}`, {
+          headers: { Authorization: `Bearer ${bearerToken}` },
+          withCredentials: true
+        })
 
-      const result = response.data
+        const result = response.data
+        const mappedTrade: TradeData = {
+          id: result.id,
+          quantity: result.quantity,
+          price: result.price || 0
+        }
 
-      const lastTrade = result[result.length - 1]
+        setCurrentTradeData([mappedTrade])
+        const statusData = createStatusData(result)
+        setCurrentStatusData(statusData)
 
-      const mappedTrade: TradeData = {
-        id: lastTrade.id,
-        quantity: lastTrade.quantity,
-        price: lastTrade.price || 0
+        const tags = [result.trusted_source && 'Trusted Source', result.cred_required && 'Solar Energy'].filter(Boolean)
+        setPreferencesTags(tags)
+      } catch (error) {
+        console.error('Error fetching last trade data:', error)
       }
-
-      setCurrentTradeData([mappedTrade])
-      const statusData = createStatusData(lastTrade)
-      setCurrentStatusData(statusData)
-
-      const tags = [lastTrade.trusted_source && 'Trusted Source', lastTrade.cred_required && 'Solar Energy'].filter(
-        Boolean
-      )
-      setPreferencesTags(tags)
-    } catch (error) {
-      console.error('Error fetching last trade data:', error)
     }
   }
 
@@ -183,19 +182,21 @@ const Dashboard = () => {
   const createStatusData = (tradeData: { status: string; createdAt: string }) => {
     const { status, createdAt } = tradeData
     const statusTime = formatDate(createdAt, 'hh:mm a')
-    const label = status === 'RECEIVED' ? 'Requirement Received' : 'Requirement Completed'
+    const isPending = status === 'RECEIVED'
 
     return [
       {
-        label,
+        label: isPending ? 'Requirement Received' : 'Requirement Completed',
         status,
         statusTime,
         noLine: false,
+        isPending,
         lastElement: false
       },
       {
         label: <StatusLabel />,
         statusTime: '',
+        isPending,
         noLine: true,
         lastElement: true
       }
@@ -378,6 +379,7 @@ const Dashboard = () => {
                               statusTime={data.statusTime!}
                               noLine={data.noLine}
                               lastElement={data.lastElement}
+                              statusIcon={data.isPending ? PendingIcon : null}
                             />
                           ))
                         ) : (

apps/open-spark/pages/tradeDetails.tsx

@@ -10,6 +10,7 @@ import { formatDate } from '@beckn-ui/common'
 import CurrentTrade from '@components/currentTrade/CurrentTrade'
 import { Box, Divider, Flex, Stack, Tag, TagLabel } from '@chakra-ui/react'
 import { OrderStatusProgress } from '@beckn-ui/becknified-components'
+import PendingIcon from '@public/images/pending.svg'
 
 interface TradeMetaData {
   orderId: string
@@ -23,6 +24,17 @@ interface TradeMetaData {
   preferencesTags: string[]
 }
 
+const TRADDE_EVE_NUM = Object.freeze({
+  BUY_REQUEST: 'buy_request',
+  BECKN_SEARCH: 'beckn_search',
+  BECKN_ON_SEARCH: 'beckn_on_search',
+  BECKN_INIT: 'beckn_init',
+  BECKN_ON_INIT: 'beckn_on_init',
+  BECKN_CONFIRM: 'beckn_confirm',
+  BECKN_ON_CONFIRM: 'beckn_on_confirm',
+  PENDING: 'pending'
+})
+
 const TradeDetails = () => {
   const bearerToken = Cookies.get('authToken')
   const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL
@@ -52,6 +64,18 @@ const TradeDetails = () => {
         if (result.cred_required) {
           tags.push('Solar Energy')
         }
+        const tradeEvents = result.trade_events || []
+        const lastEvent = tradeEvents[tradeEvents.length - 1]
+
+        if (!lastEvent || lastEvent.event_name !== TRADDE_EVE_NUM.BECKN_ON_CONFIRM) {
+          tradeEvents.push({
+            id: tradeEvents.length + 1,
+            event_name: TRADDE_EVE_NUM.PENDING,
+            description: 'Pending',
+            createdAt: new Date().toISOString()
+          })
+        }
+
         setTradeDetails({
           orderId: result.orderId,
           name: result.item_name,
@@ -197,7 +221,8 @@ const TradeDetails = () => {
                       label={data.description}
                       statusTime={formatDate(data.createdAt, "do MMM yyyy',' hh:mm a")}
                       noLine={true}
-                      lastElement={false}
+                      lastElement={index === tradeDetails.tradeEvents.length - 1}
+                      statusIcon={data.event_name === TRADDE_EVE_NUM.PENDING ? PendingIcon : null}
                     />
                   ))}
               </Stack>

packages/becknified-components/src/components/order-status-progress/order-status-progress.tsx

@@ -3,13 +3,15 @@ import { Box, Flex, Image } from '@chakra-ui/react'
 import { Typography } from '@beckn-ui/molecules'
 import LineBlack from '../../../public/images/lineBlack.svg'
 import TrackIcon from '../../../public/images/TrackIcon.svg'
+import PendingIcon from '../../../public/images/pendingStatus.svg'
 import { OrderStatusProgressProps } from './order-status-progress.types'
 
 const OrderStatusProgress: React.FC<OrderStatusProgressProps> = ({
   label,
   statusTime,
   className = '',
   noLine = false,
+  statusIcon,
   lastElement,
   statusDescription,
   dataTestStateName = 'statusName',
@@ -30,7 +32,7 @@ const OrderStatusProgress: React.FC<OrderStatusProgressProps> = ({
             maxW={'unset'}
             width="18px"
             height="18px"
-            src={TrackIcon}
+            src={statusIcon || TrackIcon}
           />
           {!showNoLine && (
             <Image

packages/becknified-components/src/components/order-status-progress/order-status-progress.types.ts

@@ -8,4 +8,5 @@ export interface OrderStatusProgressProps {
   dataTestStateTime?: string
   statusDescription?: string
   dataTestStateDescription?: string
+  statusIcon?: string
 }