From 3c1df40448fb33b62b063bdf2e7e80058a3e6be0 Mon Sep 17 00:00:00 2001
From: alij <ali.josheghani2005@gmail.com>
Date: Mon, 24 Jun 2024 00:53:08 +0430
Subject: [PATCH] feat : progress bar config for space is dynamic from api

---
 src/components/progressSpace/index.tsx            | 15 +++++++++++----
 src/pages/profile/section/ProductConfigList.tsx   |  2 ++
 .../profile/section/components/ConfigItem.tsx     |  6 +++++-
 .../section/components/ModalConfigDetails.tsx     | 10 +++++++---
 src/types/props.d.ts                              |  4 +++-
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/progressSpace/index.tsx b/src/components/progressSpace/index.tsx
index e71bb60..b79865e 100644
--- a/src/components/progressSpace/index.tsx
+++ b/src/components/progressSpace/index.tsx
@@ -19,21 +19,28 @@ const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
         <div className="w-full rounded-full h-2 md:h-2.5 bg-gray-700">
           <motion.div
             className="bg-secondTheme h-2 md:h-2.5 rounded-full"
-            animate={{ width: `${startSpacePercentage}%` }}
             initial={{ width: 0 }}
+            animate={{
+              width: `${
+                endSpace === "unlimited" ? 100 : startSpacePercentage
+              }%`,
+            }}
             transition={{ type: "tween", duration: 1 }}
             style={{ transformOrigin: "right" }}
           ></motion.div>
         </div>
         <div className="flex flex-row-reverse gap-1">
-          <span> {endSpace}</span>
-          <span>GB</span>
+          <span> {endSpace === "unlimited" ? "نامحدود" : endSpace}</span>
+          {endSpace !== "unlimited" && <span>GB</span>}
         </div>
       </div>
       <div className="w-full h-full mt-1 p-2 text-center text-xs md:text-base">
         <p>
           {" "}
-          حجم باقیمانده کانفیگ شما از {endSpace} گیگ <span className="mx-1 border-b border-secondTheme">{remaining}</span>گیگ میباشد{" "}
+          حجم باقیمانده کانفیگ شما از{" "}
+          {endSpace === "unlimited" ? "نامحدود" : endSpace} گیگ{" "}
+          <span className="mx-1 border-b border-secondTheme">{remaining}</span>
+          گیگ میباشد{" "}
         </p>
       </div>
     </>
diff --git a/src/pages/profile/section/ProductConfigList.tsx b/src/pages/profile/section/ProductConfigList.tsx
index d7191d4..25d9ab3 100644
--- a/src/pages/profile/section/ProductConfigList.tsx
+++ b/src/pages/profile/section/ProductConfigList.tsx
@@ -64,6 +64,8 @@ const ProductConfigList = ({
                   isDisabled={false}
                   isShowTraffic={item.show_traffic}
                   textCopy={item.url}
+                  maxTraffic={item.max_traffic}
+                  traffic={item.traffic}
                 />
               </Fragment>
             );
diff --git a/src/pages/profile/section/components/ConfigItem.tsx b/src/pages/profile/section/components/ConfigItem.tsx
index 863c638..07a9f53 100644
--- a/src/pages/profile/section/components/ConfigItem.tsx
+++ b/src/pages/profile/section/components/ConfigItem.tsx
@@ -14,6 +14,8 @@ const ConfigItem = ({
   isDisabled,
   isShowTraffic,
   textCopy,
+  maxTraffic,
+  traffic,
 }: ConfigItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isOpenDropDown, setIsOpenDropDown] = useState(false);
@@ -40,6 +42,8 @@ const ConfigItem = ({
         nameConfig={configName}
         isShowTraffic={isShowTraffic}
         textCopy={textCopy}
+        maxTraffic={maxTraffic}
+        traffic={traffic}
       />
       <div className="relative w-full h-full rounded-md">
         {isDisabled && (
@@ -91,7 +95,7 @@ const ConfigItem = ({
                   حجم
                 </Button>
                 <DropdownItem widthTailwind="w-[20rem] left-0">
-                  <ProgressSpace startSpace={100} endSpace={200} />
+                  <ProgressSpace startSpace={traffic} endSpace={maxTraffic} />
                 </DropdownItem>
               </Dropdown>
             )}
diff --git a/src/pages/profile/section/components/ModalConfigDetails.tsx b/src/pages/profile/section/components/ModalConfigDetails.tsx
index 2bd7c72..77c1521 100644
--- a/src/pages/profile/section/components/ModalConfigDetails.tsx
+++ b/src/pages/profile/section/components/ModalConfigDetails.tsx
@@ -14,7 +14,9 @@ const ModalConfigDetails = ({
   dateBuy,
   nameConfig,
   isShowTraffic,
-  textCopy
+  textCopy,
+  maxTraffic,
+  traffic
 }: {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
@@ -23,6 +25,8 @@ const ModalConfigDetails = ({
   nameConfig: string;
   isShowTraffic: boolean;
   textCopy: string;
+  maxTraffic: number | "unlimited";
+  traffic: number;
 }) => {
   const navigate = useNavigate()
   const copyToClipboard = async (textToCopy: string) => {
@@ -64,9 +68,9 @@ const ModalConfigDetails = ({
             </>
           )}
         </div>
-        {!isDisabled || isShowTraffic && (
+        {!isDisabled && isShowTraffic && (
           <div className="w-full h-full">
-            <ProgressSpace startSpace={100} endSpace={200} />
+            <ProgressSpace startSpace={traffic} endSpace={maxTraffic} />
           </div>
         )}
       </div>
diff --git a/src/types/props.d.ts b/src/types/props.d.ts
index abbff3a..d91e0f6 100644
--- a/src/types/props.d.ts
+++ b/src/types/props.d.ts
@@ -128,6 +128,8 @@ export interface ConfigItemProps {
   isDisabled: boolean;
   isShowTraffic: boolean;
   textCopy: string;
+  maxTraffic: number | "unlimited";
+  traffic: number;
 }
 
 // نوع Item برای آیتم‌های داخل Dropdown
@@ -145,7 +147,7 @@ export interface DropdownProps {
 
 export interface ProgressSpaceProps {
   startSpace: number;
-  endSpace: number | "ultimate";
+  endSpace: number | "unlimited";
 }
 
 export interface LoginFormValues {