add card dummy component added

2024-10-15 21:45:03 +01:00
parent 3267414454
commit 95a918e01d
8 changed files with 446 additions and 22 deletions
@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import localImgLoad from "../../../lib/localImgLoad";
+import { tableReload } from "../../../store/TableReloads";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import WalletActionVirtual from "./WalletActionVirtual";
+import VirtualAddCardPopout from "./VirtualAddCardPopout";
+import WrenchTokenPopout from './WrenchTokenPopout'
+import WrenchPointPopout from './WrenchPointPopout'
+
+/**
+ * Renders a card displaying information about a wallet item.
+ */
+export default function WalletItemCardVirtual({ walletItem, payment, countries }) {
+  
+  const dispatch = useDispatch();
+  const [virtualPopup, setVirtualPopup] = useState({ name: '', data: {} });
+
+  /**
+   * Opens the credit popup.
+   * @param {Object} value - The value object.
+   */
+  const openPopUp = (name, value) => {
+    setVirtualPopup({
+      name: name.toLowerCase(),
+      data: { ...value },
+    });
+  };
+
+  /**
+   * Closes the credit popup and dispatches a table reload action.
+   */
+  const closePopUp = () => {
+    setVirtualPopup({ name: false, data: {} });
+    // dispatch(tableReload({ type: "WALLETTABLE" }));
+  };
+
+  const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
+
+  const image = walletItem.code
+    ? `${walletItem.code.toLowerCase()}.svg`
+    : "default.png";
+
+
+  return (
+    <>
+      <div
+        className="current-balance-widget w-full h-full min-h-[250px] rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
+        style={{
+          background: `url(${walletItem?.banner}) 0% 0% / cover no-repeat`,
+        }}
+      >
+        <div className="wallet w-full flex justify-center gap-3">
+          {/* <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+            <img
+              src={localImgLoad(`images/currency/${image}`)}
+              className="w-full h-full"
+              alt="currency-icon"
+            />
+          </div> */}
+          <div className="balance w-full mt-2 flex justify-center">
+            <div className="">
+              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
+                {walletItem?.description}
+              </p>
+              {/* <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
+                {PriceFormatter(
+                  walletItem.amount * 0.01,
+                  walletItem.code,
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </p> */}
+            </div>
+          </div>
+        </div>
+        
+        {/* {walletItem.escrow > 0 ? 
+          <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
+            HOLDINGS :{" "}
+            <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
+              {PriceFormatter(
+                walletItem.escrow * 0.01,
+                walletItem.code,
+                undefined,
+                "text-[1.5rem]"
+              )}
+            </span>
+          </p>
+          :
+          null
+        } */}
+        <div className='w-full'>
+            <div className="w-full h-[1px] mb-2 bg-white"></div>
+            <WalletActionVirtual
+                walletItem={walletItem}
+                openPopUp={openPopUp}
+                btnText={walletItem?.rt_action_text}
+            />
+        </div>
+      </div>
+
+      {virtualPopup.name == 'add virtual visa' && (
+        <VirtualAddCardPopout
+          details={virtualPopup.data}
+          walletItem={walletItem}
+          onClose={closePopUp}
+          situation={virtualPopup.name}
+        />
+      )}
+      
+      {virtualPopup.name == 'wrench token' && (
+        <WrenchTokenPopout
+          details={virtualPopup.data}
+          walletItem={walletItem}
+          onClose={closePopUp}
+          situation={virtualPopup.name}
+        />
+      )}
+
+    {virtualPopup.name == 'wrench points' && (
+        <WrenchPointPopout
+          details={virtualPopup.data}
+          walletItem={walletItem}
+          onClose={closePopUp}
+          situation={virtualPopup.name}
+        />
+      )}
+    </>
+  );
+}