From 9286a283c0f2e45d53583fd26934161214dccb24 Mon Sep 17 00:00:00 2001
From: soheil khaledabadi <soheilkhaledabdi@gmail.com>
Date: Tue, 22 Sep 2026 01:38:00 +0330
Subject: [PATCH] feat: full profile editing (email/password/mobile/card) +
 lighter background particles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ModalEditProfile now lets users optionally change email, password,
  and card number, plus a two-step OTP flow to change their mobile
  number. All fields remain optional except when actively submitted.
- Particle background: dropped canvas shadowBlur and the warp effect
  on links (the most expensive per-frame draw calls), disabled
  detectRetina (was rendering at 2-3x resolution on high-DPI
  screens), capped fps at 30, and paused rendering when the tab is
  hidden or the canvas is out of viewport (pauseOnBlur /
  pauseOnOutsideViewport) — this was the main site-wide slowdown
  since it renders on every page via the root layout.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/particle/index.tsx             |  31 +-
 src/pages/profile/section/ProfileDetails.tsx  |  22 +-
 .../section/components/ModalEditProfile.tsx   | 276 ++++++++++++++++--
 src/types/props.d.ts                          |   1 +
 4 files changed, 277 insertions(+), 53 deletions(-)

diff --git a/src/components/particle/index.tsx b/src/components/particle/index.tsx
index b413bbb..64da63e 100644
--- a/src/components/particle/index.tsx
+++ b/src/components/particle/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import {
-  type Container,
   type ISourceOptions,
   MoveDirection,
   OutMode,
@@ -26,10 +25,6 @@ export default function Particle() {
     });
   }, []);
 
-  const particlesLoaded = async (container?: Container): Promise<void> => {
-    console.log(container);
-  };
-
   const options: ISourceOptions = useMemo(
     () => ({
       background: {
@@ -37,7 +32,9 @@ export default function Particle() {
           value: "",
         },
       },
-      fpsLimit: 60,
+      fpsLimit: 30,
+      pauseOnBlur: true,
+      pauseOnOutsideViewport: true,
       interactivity: {
         events: {
           onClick: {
@@ -69,20 +66,6 @@ export default function Particle() {
           enable: true,
           opacity: 0.8,
           width: 1,
-          shadow: {
-            enable: true,
-            blur: 5,
-            color: "#71fbb2",
-          },
-          warp: {
-            enable: true,
-            speed: 2,
-          },
-          animation: {
-            enable: true,
-            speed: 0.5,
-            sync: true,
-          },
         },
         move: {
           direction: MoveDirection.none,
@@ -110,7 +93,7 @@ export default function Particle() {
           value: { min: 1, max: 5 },
         },
       },
-      detectRetina: true,
+      detectRetina: false,
     }),
     []
   );
@@ -121,11 +104,7 @@ export default function Particle() {
 
   if (init) {
     return (
-      <Particles
-        id="tsparticles"
-        particlesLoaded={particlesLoaded}
-        options={options}
-      />
+      <Particles id="tsparticles" options={options} />
     );
   }
 
diff --git a/src/pages/profile/section/ProfileDetails.tsx b/src/pages/profile/section/ProfileDetails.tsx
index d325aa0..a5cec46 100644
--- a/src/pages/profile/section/ProfileDetails.tsx
+++ b/src/pages/profile/section/ProfileDetails.tsx
@@ -16,7 +16,12 @@ const ProfileDetails = ({
 }: ProfileDetailsProps) => {
   return (
     <div className="relative z-[10] w-full min-h-32 max-md:min-h-20 flex flex-row-reverse max-[400px]:gap-3 justify-between flex-wrap-reverse glass items-center py-2 px-4">
-      <EditProfile nationalId={data?.result?.user_profile?.national_id} />
+      <EditProfile
+        nationalId={data?.result?.user_profile?.national_id}
+        email={data?.result?.user_profile?.email}
+        mobile={data?.result?.user_profile?.mobile}
+        cardNumber={data?.result?.user_profile?.card_number}
+      />
       <ProductDetails
         enable_config={data?.result?.enable_config}
         disable_config={data?.result?.disable_config}
@@ -30,7 +35,17 @@ const ProfileDetails = ({
 
 export default ProfileDetails;
 
-const EditProfile = ({ nationalId }: { nationalId?: string | null }) => {
+const EditProfile = ({
+  nationalId,
+  email,
+  mobile,
+  cardNumber,
+}: {
+  nationalId?: string | null;
+  email?: string | null;
+  mobile?: string | null;
+  cardNumber?: string | null;
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const dispatch = useDispatch();
   return (
@@ -39,6 +54,9 @@ const EditProfile = ({ nationalId }: { nationalId?: string | null }) => {
         isOpen={isOpen}
         setIsOpen={setIsOpen}
         nationalId={nationalId}
+        email={email}
+        mobile={mobile}
+        cardNumber={cardNumber}
       />
       <Button
         extra="!py-4 max-md:!py-2 max-md:px-2"
diff --git a/src/pages/profile/section/components/ModalEditProfile.tsx b/src/pages/profile/section/components/ModalEditProfile.tsx
index 4887b4b..91b3ce9 100644
--- a/src/pages/profile/section/components/ModalEditProfile.tsx
+++ b/src/pages/profile/section/components/ModalEditProfile.tsx
@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import MuiModal from "../../../../common/modal";
 import Input from "../../../../components/input";
+import Button from "../../../../components/button";
 import Alert from "../../../../components/alert/Alert";
 import useAxios from "../../../../hooks/useAxios";
 import { useMutation } from "@tanstack/react-query";
@@ -8,26 +9,92 @@ import { AxiosError, AxiosResponse } from "axios";
 import toast from "react-hot-toast";
 import { queryClient } from "../../../../main";
 
+const extractErrorMessage = (err: AxiosError): string => {
+  const data = err.response?.data;
+  if (data && typeof data === "object") {
+    if ("alert" in data && (data as { alert?: string }).alert) {
+      return (data as { alert: string }).alert;
+    }
+    if ("message" in data && (data as { message?: string }).message) {
+      return (data as { message: string }).message;
+    }
+  }
+  return "یک خطای غیرمنتظره رخ داد";
+};
+
 const ModalEditProfile = ({
   isOpen,
   setIsOpen,
   nationalId,
+  email,
+  mobile,
+  cardNumber,
 }: {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   nationalId?: string | null;
+  email?: string | null;
+  mobile?: string | null;
+  cardNumber?: string | null;
 }) => {
   const axios = useAxios();
+
   const [nationalCode, setNationalCode] = useState(nationalId ?? "");
+  const [emailValue, setEmailValue] = useState(email ?? "");
+  const [password, setPassword] = useState("");
+  const [passwordConfirmation, setPasswordConfirmation] = useState("");
+  const [cardNumberValue, setCardNumberValue] = useState(cardNumber ?? "");
+
+  const [newMobile, setNewMobile] = useState("");
+  const [mobileStep, setMobileStep] = useState<"idle" | "code-sent">("idle");
+  const [mobileCode, setMobileCode] = useState("");
 
   useEffect(() => {
+    if (!isOpen) return;
     setNationalCode(nationalId ?? "");
-  }, [nationalId, isOpen]);
+    setEmailValue(email ?? "");
+    setPassword("");
+    setPasswordConfirmation("");
+    setCardNumberValue(cardNumber ?? "");
+    setNewMobile("");
+    setMobileStep("idle");
+    setMobileCode("");
+  }, [isOpen, nationalId, email, cardNumber]);
 
-  const mutation = useMutation({
-    mutationKey: ["updateNationalId"],
-    mutationFn: (national_id: string) => {
-      return axios.post("/profile/national-id", { national_id });
+  const saveMutation = useMutation({
+    mutationKey: ["saveProfile"],
+    mutationFn: async () => {
+      const requests = [];
+
+      if (nationalCode.trim() && nationalCode.trim() !== (nationalId ?? "")) {
+        requests.push(
+          axios.post("/profile/national-id", {
+            national_id: nationalCode.trim(),
+          })
+        );
+      }
+
+      const updatePayload: Record<string, string> = {};
+      if (emailValue.trim() !== (email ?? "")) {
+        updatePayload.email = emailValue.trim();
+      }
+      if (password) {
+        updatePayload.password = password;
+        updatePayload.password_confirmation = passwordConfirmation;
+      }
+      if (cardNumberValue.trim() !== (cardNumber ?? "")) {
+        updatePayload.card_number = cardNumberValue.trim();
+      }
+
+      if (Object.keys(updatePayload).length > 0) {
+        requests.push(axios.post("/profile/update", updatePayload));
+      }
+
+      if (requests.length === 0) {
+        throw new Error("هیچ تغییری برای ذخیره وجود ندارد");
+      }
+
+      return Promise.all(requests);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["profile"] });
@@ -35,34 +102,86 @@ const ModalEditProfile = ({
   });
 
   const submitHandler = () => {
-    if (nationalCode.trim().length !== 10) {
+    if (nationalCode.trim() && nationalCode.trim().length !== 10) {
       toast.error("کد ملی باید ۱۰ رقم باشد");
       return;
     }
 
-    toast.promise(mutation.mutateAsync(nationalCode.trim()), {
+    if (password && password.length < 6) {
+      toast.error("رمز عبور باید حداقل ۶ کاراکتر باشد");
+      return;
+    }
+
+    if (password && password !== passwordConfirmation) {
+      toast.error("تکرار رمز عبور مطابقت ندارد");
+      return;
+    }
+
+    toast.promise(saveMutation.mutateAsync(), {
       loading: "درحال ذخیره...",
-      success: (res: AxiosResponse) => {
+      success: () => {
         setIsOpen(false);
+        return "اطلاعات با موفقیت ذخیره شد";
+      },
+      error: (err: AxiosError | Error) => {
+        if (err instanceof Error && !("response" in err)) {
+          return err.message;
+        }
+        return extractErrorMessage(err as AxiosError);
+      },
+    });
+  };
+
+  const requestMobileCodeMutation = useMutation({
+    mutationKey: ["requestMobileChange"],
+    mutationFn: (mobileNumber: string) => {
+      return axios.post("/profile/mobile/request-change", {
+        mobile: mobileNumber,
+      });
+    },
+  });
+
+  const confirmMobileCodeMutation = useMutation({
+    mutationKey: ["confirmMobileChange"],
+    mutationFn: (code: string) => {
+      return axios.post("/profile/mobile/confirm-change", { code });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["profile"] });
+    },
+  });
+
+  const requestMobileCodeHandler = () => {
+    if (newMobile.trim().length !== 11) {
+      toast.error("شماره موبایل باید ۱۱ رقم باشد");
+      return;
+    }
+
+    toast.promise(requestMobileCodeMutation.mutateAsync(newMobile.trim()), {
+      loading: "درحال ارسال کد...",
+      success: (res: AxiosResponse) => {
+        setMobileStep("code-sent");
         return `${res.data.alert}`;
       },
-      error: (err: AxiosError) => {
-        let errorMessage = "یک خطای غیرمنتظره رخ داد";
-        if (
-          err.response?.data &&
-          typeof err.response.data === "object" &&
-          "alert" in err.response.data
-        ) {
-          errorMessage = (err.response.data as { alert: string }).alert;
-        } else if (
-          err.response?.data &&
-          typeof err.response.data === "object" &&
-          "message" in err.response.data
-        ) {
-          errorMessage = (err.response.data as { message: string }).message;
-        }
-        return errorMessage;
+      error: (err: AxiosError) => extractErrorMessage(err),
+    });
+  };
+
+  const confirmMobileCodeHandler = () => {
+    if (mobileCode.trim().length !== 4) {
+      toast.error("کد تایید باید ۴ رقم باشد");
+      return;
+    }
+
+    toast.promise(confirmMobileCodeMutation.mutateAsync(mobileCode.trim()), {
+      loading: "درحال تایید...",
+      success: (res: AxiosResponse) => {
+        setMobileStep("idle");
+        setNewMobile("");
+        setMobileCode("");
+        return `${res.data.alert}`;
       },
+      error: (err: AxiosError) => extractErrorMessage(err),
     });
   };
 
@@ -74,7 +193,114 @@ const ModalEditProfile = ({
       submitOnClick={submitHandler}
       title="ویرایش پروفایل"
     >
-      <div className="relative w-full h-full px-2 md:px-4 flex flex-col gap-3">
+      <div className="relative w-full h-full px-2 md:px-4 flex flex-col gap-4">
+        <div className="w-full flex flex-col gap-2">
+          <Input
+            type="text"
+            label="شماره موبایل فعلی :"
+            labelStyle="!text-start"
+            extra="!w-full opacity-60"
+            value={mobile ?? ""}
+            disabled
+          />
+          {mobileStep === "idle" ? (
+            <div className="w-full flex flex-col gap-2">
+              <Input
+                type="text"
+                label="تغییر شماره موبایل :"
+                labelStyle="!text-start"
+                extra="!w-full"
+                placeholder="شماره موبایل جدید"
+                value={newMobile}
+                onChange={(e) =>
+                  setNewMobile(e.target.value.replace(/[^0-9]/g, ""))
+                }
+              />
+              {newMobile.trim().length === 11 && (
+                <Button extra="!py-2" onClick={requestMobileCodeHandler}>
+                  ارسال کد تایید
+                </Button>
+              )}
+            </div>
+          ) : (
+            <div className="w-full flex flex-col gap-2">
+              <Alert type="warning" extra="!mb-0 text-start">
+                کد تایید به شماره {newMobile} پیامک شد.
+              </Alert>
+              <Input
+                type="text"
+                label="کد تایید :"
+                labelStyle="!text-start"
+                extra="!w-full"
+                placeholder="کد ۴ رقمی"
+                value={mobileCode}
+                onChange={(e) =>
+                  setMobileCode(e.target.value.replace(/[^0-9]/g, ""))
+                }
+              />
+              <div className="w-full flex gap-2">
+                <Button extra="!py-2" onClick={confirmMobileCodeHandler}>
+                  تایید و تغییر شماره
+                </Button>
+                <Button
+                  extra="!py-2 !bg-gray-600 !text-white"
+                  onClick={() => {
+                    setMobileStep("idle");
+                    setMobileCode("");
+                  }}
+                >
+                  انصراف
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <Input
+          type="email"
+          label="ایمیل :"
+          labelStyle="!text-start"
+          extra="!w-full"
+          placeholder="ایمیل (اختیاری)"
+          value={emailValue}
+          onChange={(e) => setEmailValue(e.target.value)}
+        />
+
+        <div className="w-full flex flex-col gap-2">
+          <Input
+            type="password"
+            label="رمز عبور جدید :"
+            labelStyle="!text-start"
+            extra="!w-full"
+            placeholder="در صورت تمایل به تغییر رمز پر کنید"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          {password && (
+            <Input
+              type="password"
+              label="تکرار رمز عبور جدید :"
+              labelStyle="!text-start"
+              extra="!w-full"
+              placeholder="تکرار رمز عبور جدید"
+              value={passwordConfirmation}
+              onChange={(e) => setPasswordConfirmation(e.target.value)}
+            />
+          )}
+        </div>
+
+        <Input
+          type="text"
+          label="شماره کارت :"
+          labelStyle="!text-start"
+          extra="!w-full"
+          placeholder="شماره کارت (اختیاری)"
+          value={cardNumberValue}
+          onChange={(e) =>
+            setCardNumberValue(e.target.value.replace(/[^0-9]/g, ""))
+          }
+        />
+
         <Alert type="warning" extra="!mb-0 text-start">
           کد ملی برای احراز هویت شاهکار در خریدهای با مبلغ بالا لازم است.
         </Alert>
diff --git a/src/types/props.d.ts b/src/types/props.d.ts
index 262532a..c54e781 100644
--- a/src/types/props.d.ts
+++ b/src/types/props.d.ts
@@ -218,6 +218,7 @@ type UserProfile = {
   email: string;
   mobile: string;
   national_id?: string | null;
+  card_number?: string | null;
 };
 
 // تعریف تایپ پیکربندی‌ها