history page

vtb-open-api-2024 · Nov 21, 2024 · 4fbd0d2 · 4fbd0d2
1 parent 125be16
commit 4fbd0d2
Show file tree

Hide file tree

Showing 9 changed files with 233 additions and 19 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -305,6 +305,10 @@ function App() {
     }
   }
 
+  function handleReturnToMainPage() {
+    moveTo('/home');
+  }
+
   return (
     <Provider store={store}>
       <div className="layout">
@@ -347,7 +351,7 @@ function App() {
           />
           <Route path="/transaction" element={<TransActionPage transactionHandle={transactionHandle} />} />
           <Route path="/share-app" element={<ShareAppPG waypoint="/home" />} />
-          <Route path="/history" element={<History />} />
+          <Route path="/history" element={<History handleReturnToMainPage={handleReturnToMainPage} />} />
           <Route path="/receive" element={<ReceivePg waypoint="/home" />} />
         </Routes>
       </div>

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
@@ -39,12 +39,7 @@ export const Menu = ({ menuHandler, closeMenu }: iMenu) => {
         >
           Обмен
         </li>
-        <li
-          className={`${styles.menu__item}`}
-          onClick={() => {
-
-          }}
-        >
+        <li className={`${styles.menu__item}`} onClick={() => {}}>
           Отправить
         </li>
         <li

diff --git a/src/func-pages/history-page/History.tsx b/src/func-pages/history-page/History.tsx
@@ -1,21 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useEffect, useState } from 'react';
 import styles from './styles.module.css';
 import { HistoryElement } from './history-element/HistoryElement';
+import { BackArrowIcon } from '../../components/icons/backArrowIcon';
+import { Transaction } from '../../types';
+import { mockTransactionSecond, mockTransactionFirst, mockTransactionThird } from '../../mockData';
 
-export const History = () => {
-  const [history, setHistory] = useState([]);
+interface iHistory {
+  handleReturnToMainPage: () => void;
+}
+
+export const History = ({ handleReturnToMainPage }: iHistory) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [history, setHistory] = useState<Transaction[]>([]);
 
   useEffect(() => {
-    setHistory([]);
+    setHistory([mockTransactionFirst, mockTransactionFirst, mockTransactionSecond, mockTransactionThird]);
   }, []);
 
+  useEffect(() => {
+    if (history.length)
+      console.log(new Date(history[1].transactionDate).getTime() > new Date(history[2].transactionDate).getTime());
+  }, [history]);
+
+  const formatDate = (date: Date): string => {
+    return new Intl.DateTimeFormat('ru-RU', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(date);
+  };
+
   return (
     <div className={styles.container}>
-      <h1 className={styles.header}>История транзакций</h1>
+      <div className={styles.header}>
+        <button onClick={handleReturnToMainPage}>
+          <BackArrowIcon />
+        </button>
+        История транзакций
+      </div>
       <ul className={styles.history_dates}>
-        {history.map((_date, _index) => (
-          <HistoryElement />
-        ))}
+        {history.map((operation, index) =>
+          index >= 1 ? (
+            new Date(history[index].transactionDate).getTime() <
+            new Date(history[index - 1].transactionDate).getTime() ? (
+              <div>
+                <div className={styles.operation__date}>{formatDate(new Date(history[index].transactionDate))}</div>
+                <HistoryElement operation={operation} />
+              </div>
+            ) : (
+              <div>
+                <HistoryElement operation={operation} />
+              </div>
+            )
+          ) : (
+            <div>
+              <div className={styles.operation__date}>{formatDate(new Date(history[index].transactionDate))}</div>
+              <HistoryElement operation={operation} />
+            </div>
+          ),
+        )}
       </ul>
     </div>
   );

diff --git a/src/func-pages/history-page/history-element/HistoryElement.tsx b/src/func-pages/history-page/history-element/HistoryElement.tsx
@@ -1,3 +1,24 @@
-export const HistoryElement = () => {
-  return <li>sdds</li>;
+import { Transaction } from '../../../types';
+import styles from './styles.module.css';
+
+interface iHistoryElement {
+  operation: Transaction;
+}
+
+export const HistoryElement = ({ operation }: iHistoryElement) => {
+  const transactionType = operation.transactionType === 'INCOME';
+  return (
+    <li className={styles.history_element_container}>
+      <div className={styles.history_element_wrapper}>
+        <div className={styles.transaction__image}></div>
+        <div className={styles.transaction__info}>
+          <span className={styles.transaction__type}>{transactionType ? 'Пополнение' : 'Списание'}</span>
+          <span className={styles.transaction__resource}>{operation.type === 'CARD' ? 'Карта' : 'Кошелек'}</span>
+        </div>
+      </div>
+      <div className={`${styles.amount} ${transactionType ? styles.amount_income : styles.amount_outcome}`}>
+        {operation.amount}
+      </div>
+    </li>
+  );
 };
diff --git a/src/func-pages/history-page/history-element/styles.module.css b/src/func-pages/history-page/history-element/styles.module.css
@@ -0,0 +1,56 @@
+.history_element_container {
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.history_element_wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.transaction__image {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: blueviolet;
+}
+
+.transaction__info {
+  display: flex;
+  flex-direction: column;
+}
+
+.transaction__type {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.transaction__resource {
+  font-size: 16px;
+  opacity: 0.8;
+}
+
+.amount {
+  font-size: 22px;
+  font-weight: 500;
+}
+
+.amount_income {
+  color: #58e018;
+}
+
+.amount_income::before {
+  content: '+ ';
+}
+
+.amount_outcome {
+  color: #e01818;
+}
+
+.amount_outcome::before {
+  content: '- ';
+}
diff --git a/src/func-pages/history-page/styles.module.css b/src/func-pages/history-page/styles.module.css
@@ -1,4 +1,34 @@
+.container {
+  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(1, 59, 155, 1) 100%);
+  color: white;
+  height: 100vh;
+}
+
 .header {
-  font-size: 24px;
-  font-weight: 400;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 20px;
+}
+
+.header button {
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 18px;
+}
+
+.history_dates {
+  list-style: none;
+  padding: 0;
+  margin: 20px 10px;
+}
+
+.operation__date {
+  margin-top: 20px;
+  width: calc(100% - 40px);
+  margin-left: 10px;
+  font-size: 22px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.356);
 }
diff --git a/src/index.css b/src/index.css
@@ -25,3 +25,7 @@ input {
 input::placeholder {
   color: rgba(255, 255, 255, 0.356);
 }
+
+body {
+  background-color: black;
+}
diff --git a/src/mockData.ts b/src/mockData.ts
@@ -1,4 +1,4 @@
-import { Card, CurrencyEnum, Wallet } from './types';
+import { Card, CurrencyEnum, Transaction, Wallet } from './types';
 
 export type PopupType = 'bind' | 'invite' | null;
 
@@ -71,3 +71,48 @@ export const cards: Card[] = [
     balance: 10500,
   },
 ];
+
+export const mockTransactionFirst: Transaction = {
+  type: 'CARD',
+  productId: '1234567890123456',
+  transactionDate: '2024-01-01',
+  transactionTime: '14:30:00',
+  transactionId: 'tx_00123456789',
+  transactionType: 'INCOME',
+  amount: 150.75,
+  currency: 'USD',
+  merchantId: 'merchant_12345',
+  merchantName: 'Acme Corporation',
+  merchantCategory: 'Супермаркеты',
+  paymentMeta: '+1234567890',
+};
+
+export const mockTransactionSecond: Transaction = {
+  type: 'CARD',
+  productId: '1234567890123456',
+  transactionDate: '2023-02-01',
+  transactionTime: '14:30:00',
+  transactionId: 'tx_00123456789',
+  transactionType: 'INCOME',
+  amount: 199.75,
+  currency: 'USD',
+  merchantId: 'merchant_12345',
+  merchantName: 'Acme Corporation',
+  merchantCategory: 'Супермаркеты',
+  paymentMeta: '+1234567890',
+};
+
+export const mockTransactionThird: Transaction = {
+  type: 'CARD',
+  productId: '1234567890123456',
+  transactionDate: '2023-01-01',
+  transactionTime: '14:30:00',
+  transactionId: 'tx_00123456789',
+  transactionType: 'OUTCOME',
+  amount: 345.75,
+  currency: 'USD',
+  merchantId: 'merchant_12345',
+  merchantName: 'Acme Corporation',
+  merchantCategory: 'Супермаркеты',
+  paymentMeta: '+1234567890',
+};
diff --git a/src/types.ts b/src/types.ts
@@ -32,3 +32,18 @@ export type Card = {
   cardExpiryDate?: string;
   balance: number;
 };
+
+export type Transaction = {
+  type: string;
+  productId: string;
+  transactionDate: string;
+  transactionTime: string;
+  transactionId: string;
+  transactionType: 'INCOME' | 'OUTCOME';
+  amount: number;
+  currency: 'USD';
+  merchantId: string;
+  merchantName: string;
+  merchantCategory: string;
+  paymentMeta: string;
+};