Merge pull request #3120 from beckn/feat/fund-issue-3054

feat(open-spark): add screens for My Fund related pages
beckn · Feb 4, 2025 · e1dfd12 · e1dfd12
2 parents 8effbf9 + 8e1bb6d
commit e1dfd12
Show file tree

Hide file tree

Showing 27 changed files with 934 additions and 42 deletions.
diff --git a/apps/open-spark/components/currentTrade/EmptyCurrentTrade.tsx b/apps/open-spark/components/currentTrade/EmptyCurrentTrade.tsx
@@ -5,15 +5,15 @@ import { RootState } from '@store/index'
 import React from 'react'
 import { useSelector } from 'react-redux'
 
-const EmptyCurrentTrade = ({ text }: { text: string }) => {
+const EmptyCurrentTrade = ({ text, src }: { text: string; src: string }) => {
   return (
     <Flex
       flexDir={'column'}
       rowGap={'15px'}
       p={'0 2rem'}
     >
       <Image
-        src="/images/empty_trade.svg"
+        src={src}
         data-test="empty-trade-img"
         width="100px"
         height="100px"
@@ -23,7 +23,7 @@ const EmptyCurrentTrade = ({ text }: { text: string }) => {
         fontSize="12px"
         fontWeight="400"
         sx={{ textAlign: 'center' }}
-        text={`your data will appear here once you start ${text} energy `}
+        text={text}
         dataTest="emptyCurrentText"
       />
     </Flex>

diff --git a/apps/open-spark/components/header/constants/index.ts b/apps/open-spark/components/header/constants/index.ts
@@ -2,8 +2,16 @@ type PathnameObjectType = Record<string, string>
 
 // -------------------------------- Top Header constants --------------------------------
 const appLogoBlackList = ['/signIn', '/signUp']
-const homeIconBlackList = ['/', '/signIn', '/', '/myRides', '/profile', '/signUp', '/OTPVerification']
-const menuIconWhiteList = ['/', '/profile', '/myRides', '/buyingPreference', '/sellingPreference', '/myDers']
+const homeIconBlackList = ['/', '/signIn', '/', '/profile', '/signUp', '/OTPVerification']
+const menuIconWhiteList = [
+  '/',
+  '/profile',
+  '/myRides',
+  '/buyingPreference',
+  '/sellingPreference',
+  '/myDers',
+  '/myFunds'
+]
 const topHeaderBlackList: string[] = []
 const languageIconWhiteList: string[] = []
 
@@ -21,7 +29,8 @@ const headerNames: PathnameObjectType = {
   '/sellingPreference': 'Selling Preferences',
   '/myDers': 'My DERs',
   '/tradeDetails': 'No. of Units Sold',
-  '/OTPVerification': 'Verify Yourself'
+  '/OTPVerification': 'Verify Yourself',
+  '/myFunds': 'My Funds'
 }
 
 const headerFrenchNames: PathnameObjectType = {
@@ -41,7 +50,8 @@ const headerBlackList = [
   '/sellingPreference',
   '/myDers',
   '/tradeDetails',
-  '/OTPVerification'
+  '/OTPVerification',
+  '/myFunds'
 ]
 
 const bottomHeaderBlackList = ['/orderConfirmation', '/', '/feedback']

diff --git a/apps/open-spark/components/pagination/pagination.tsx b/apps/open-spark/components/pagination/pagination.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import { Flex, Button, Box, IconButton, Text } from '@chakra-ui/react'
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  handlePageChange: (page: number) => void
+}
+
+const Pagination = ({ currentPage, totalPages, handlePageChange }: PaginationProps) => {
+  const pageNumbers = []
+  const maxPageNumbersToShow = 3
+
+  const halfWay = Math.floor(maxPageNumbersToShow / 2)
+  let startPage = Math.max(1, currentPage - halfWay)
+  let endPage = Math.min(totalPages, currentPage + halfWay)
+
+  if (currentPage <= halfWay) {
+    endPage = Math.min(totalPages, maxPageNumbersToShow)
+  } else if (currentPage + halfWay >= totalPages) {
+    startPage = Math.max(1, totalPages - maxPageNumbersToShow + 1)
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    if (pageNumbers.length < 3) {
+      pageNumbers.push(i)
+    }
+  }
+
+  return (
+    <Flex
+      justifyContent="end"
+      alignItems="center"
+      width={'fit-content'}
+      float="right"
+    >
+      <IconButton
+        icon={
+          <ChevronLeftIcon
+            color={currentPage === 1 ? '#9C9C9C' : '#4498E8'}
+            width={'20px'}
+            height={'20px'}
+          />
+        }
+        background={'#ffffff'}
+        aria-label="Previous page"
+        onClick={() => handlePageChange(currentPage - 1)}
+        isDisabled={currentPage === 1}
+        size="sm"
+        mb="0px"
+      />
+
+      {pageNumbers.map((pageNumber, index) =>
+        typeof pageNumber === 'number' ? (
+          <Button
+            key={index}
+            onClick={() => handlePageChange(pageNumber)}
+            isActive={pageNumber === currentPage}
+            size="sm"
+            mb="0px"
+            background={'#ffffff !important'}
+            color={pageNumber === currentPage ? '#4498E8' : '#9C9C9C'}
+            data-test={'pagination-number'}
+          >
+            {pageNumber}
+          </Button>
+        ) : (
+          <Text
+            key={index}
+            px={2}
+            size="sm"
+            mb="0px"
+          >
+            {pageNumber}
+          </Text>
+        )
+      )}
+
+      <IconButton
+        icon={
+          <ChevronRightIcon
+            color={currentPage === totalPages ? '#9C9C9C' : '#4498E8'}
+            width={'20px'}
+            height={'20px'}
+          />
+        }
+        background={'#ffffff'}
+        aria-label="Next page"
+        onClick={() => handlePageChange(currentPage + 1)}
+        isDisabled={currentPage === totalPages}
+        size="sm"
+        mb="0px"
+      />
+    </Flex>
+  )
+}
+
+export default Pagination
diff --git a/apps/open-spark/locales/en.ts b/apps/open-spark/locales/en.ts
@@ -70,6 +70,12 @@ const en: { [key: string]: string } = {
   errorNumber2: 'Invalid Mobile Number',
   errorAddress: 'Complete Address is required',
   errorName2: 'Name can only contain letters and spaces',
-  errorName3: 'Name must contain at least 3 characters'
+  errorName3: 'Name must contain at least 3 characters',
+  cardNumber: '**** **** **** 1234',
+  cashOnDelivery: 'Cash on Delivery',
+  netBanking: ' Net Banking',
+  procced: 'Proceed',
+  confirmOrder: 'Proceed',
+  errorAmount: 'Enter valid amount'
 }
 export default en
diff --git a/apps/open-spark/pages/index.tsx b/apps/open-spark/pages/index.tsx
@@ -401,7 +401,14 @@ const Dashboard = () => {
                 ) : (
                   <>
                     {currentTradeData.length === 0 ? (
-                      <EmptyCurrentTrade text={role === ROLE.BUY ? 'buying' : 'selling'} />
+                      <EmptyCurrentTrade
+                        text={
+                          role === ROLE.BUY
+                            ? 'your data will appear here once you start buying energy'
+                            : 'your data will appear here once you start selling energy'
+                        }
+                        src={'/images/empty_trade.svg'}
+                      />
                     ) : (
                       <>
                         <CurrentTrade