setModalOpen(true)}
+ className={`h-20 w-20 shadow-md rounded-xl border-2 flex flex-col items-center justify-center cursor-pointer ${
+ value
+ ? "border-[#AA00FF66] text-[#AA00FF]"
+ : "border-[#F7EEFF] text-[#2D0A48]"
+ }`}
+ >
+ {value ? (
+ <>
+
- const updateModalPosition = () => {
- if (window.visualViewport) {
- const visualViewport = window.visualViewport;
+ + {Number(value).toLocaleString()} +
+ + ) : ( + <> ++
+دلخواه
+ + )} +
+ {/* عنوان */}
+ 
{
- const { mutate: createGiftCard, isPending } = useCreateGiftCard();
- const navigate = useNavigate();
+ const { mutate: createGiftCard, isPending } = useCreateGiftCard();
+ const navigate = useNavigate();
- // state
- const [selectedDay, setSelectedDay] = useState(null);
- const [customDay, setCustomDay] = useState(null);
- const [defaultGiftCard, setDefaultGiftCard] = useState(banners[0].banner);
- const [selected, setSelected] = useState(100);
- const [customAmount, setCustomAmount] = useState(null);
- const [selectedValue, setSelectedValue] = useState("");
- const [cardType, setCardType] = useState("type5");
- const [options, setOptions] = useState(STATIC_GIFT_CARD_TEXTS);
- const [selectedCardId, setSelectedCardId] = useState(banners[0].id);
- const [selectedService, setSelectedService] = useState(() => localStorage.getItem("serviceTitle") || "");
+ // state
+ const [selectedDay, setSelectedDay] = useState(
+ null
+ );
+ const [customDay, setCustomDay] = useState(null);
+ const [defaultGiftCard, setDefaultGiftCard] = useState(
+ banners[0].banner
+ );
+ const [selected, setSelected] = useState(
+ 100
+ );
+ const [customAmount, setCustomAmount] = useState(null);
+ const [selectedValue, setSelectedValue] = useState("");
+ const [cardType, setCardType] = useState("type5");
+ const [options, setOptions] = useState(STATIC_GIFT_CARD_TEXTS);
+ const [selectedCardId, setSelectedCardId] = useState(banners[0].id);
+ const [selectedService, setSelectedService] = useState(
+ () => localStorage.getItem("serviceTitle") || ""
+ );
- // sync other tabs
- useEffect(() => {
- const handleStorage = () => setSelectedService(localStorage.getItem("serviceTitle") || "");
- window.addEventListener("storage", handleStorage);
- return () => window.removeEventListener("storage", handleStorage);
- }, []);
+ // sync other tabs
+ useEffect(() => {
+ const handleStorage = () =>
+ setSelectedService(localStorage.getItem("serviceTitle") || "");
+ window.addEventListener("storage", handleStorage);
+ return () => window.removeEventListener("storage", handleStorage);
+ }, []);
- // cleanup if left page
- useEffect(() => {
- return () => {
- if (!window.location.pathname.includes("/gift-card")) localStorage.removeItem("serviceTitle");
- };
- }, []);
+ // cleanup if left page
+ useEffect(() => {
+ return () => {
+ if (!window.location.pathname.includes("/gift-card"))
+ localStorage.removeItem("serviceTitle");
+ };
+ }, []);
- // derived
- const displayedAmount = useMemo(() => computeDisplayedAmount(selected, customAmount), [selected, customAmount]);
- const expiryText = useMemo(() => computeExpireText(selectedDay, customDay), [selectedDay, customDay]);
+ // derived
+ const displayedAmount = useMemo(
+ () => computeDisplayedAmount(selected, customAmount),
+ [selected, customAmount]
+ );
+ const expiryText = useMemo(
+ () => computeExpireText(selectedDay, customDay),
+ [selectedDay, customDay]
+ );
- const btnTrigger = useMemo(() => {
- return (
- selectedValue.length > 0 &&
- selectedService.length > 0 &&
- !!selectedDay &&
- !!selectedCardId &&
- customDay === null &&
- !!selected &&
- selected.toString().length > 0 &&
- selected.toString().length <= 6
- );
- }, [selectedValue, selectedService, selectedDay, selectedCardId, customDay, selected]);
+ const btnTrigger = useMemo(() => {
+ const hasValidDay =
+ (selectedDay === "custom" && customDay !== null) ||
+ (typeof selectedDay === "number" && selectedDay > 0);
- // handlers (passed to child components)
- const handleSelectCard = useCallback((bannerId: number, bannerUrl: string, bannerCardType: any) => {
- setDefaultGiftCard(bannerUrl);
- setSelectedCardId(bannerId);
- setCardType(bannerCardType);
- }, []);
-
- const handleAddOption = useCallback((opt: string) => {
- setOptions((prev) => [opt, ...prev]);
- }, []);
-
- // Amount handlers
- const onAmountPickerChange = useCallback((newValue: string | null) => {
- if (!newValue) return;
- const value = parseInt(newValue, 10);
- if (value === 0) {
- toast.error("مبلغ کارت هدیه نمیتواند ۰ باشد.");
- return;
- }
- if (value.toString().length > 6) {
- toast.error("مبلغ کارت هدیه نمیتواند بیش از 9 رقم باشد.");
- return;
- }
- setCustomAmount(value);
- setSelected("custom");
- }, []);
-
- const chooseAmount = useCallback((amount: number) => setSelected(amount), []);
- // Day handlers
- const onDayPickerChange = useCallback((newValue: string) => {
- const dayValue = parseInt(newValue, 10);
- setCustomDay(dayValue);
- setSelectedDay("custom");
- }, []);
- const chooseDay = useCallback((day: number) => setSelectedDay(day), []);
-
- const submit = useCallback(() => {
- const amountString =
- selected === "custom" && customAmount !== null
- ? (customAmount * 1000).toString()
- : typeof selected === "number"
- ? (selected * 1000).toString()
- : "0";
-
- const expire_date =
- selectedDay === "custom" && customDay !== null
- ? getExpiryDate(customDay)
- : typeof selectedDay === "number"
- ? getExpiryDate(selectedDay)
- : "";
-
- createGiftCard({
- amount: amountString,
- text: selectedValue || "",
- service: selectedService || "",
- expire_date,
- card_type: cardType,
- });
- }, [selected, customAmount, selectedDay, customDay, selectedValue, selectedService, cardType, createGiftCard]);
+ const hasValidAmount =
+ (selected === "custom" && customAmount !== null && customAmount > 0) ||
+ (typeof selected === "number" && selected > 0);
return (
- 
{
>
;
+}
+
+const AddReservedCustomer: React.FC = ({
+ prefillName,
+ prefillPhone,
+}) => {
+ const [searchParams] = useSearchParams();
+ const queryName = searchParams.get("name") || "";
+ const queryPhone = searchParams.get("phone") || "";
+ const [name, setName] = useState(prefillName || queryName);
+ const [phoneNumber, setPhoneNumber] = useState(prefillPhone || queryPhone);
+ const [statusTitle, setStatusTitle] = useState("");
+ const [birthDate, setBirthDate] = useState("");
+ const [sendAskPhotoSMS, setSendAskPhotoSMS] = useState(false);
+ const [isSelectPhotoOpen, setIsSelectPhotoOpen] = useState(false);
+ const [profilePicture, setProfilePicture] = useState(addPhoto);
+ const fileInputRef = useRef(null);
+ const [isAddStatusOpen, setIsAddStatusOpen] = useState(false);
+ const [photoFile, setPhotoFile] = useState(null);
+
+ const navigate = useNavigate();
+
+ const btnEnable = name !== "" && phoneNumber !== "";
+
+ const addCustomerMutation = useAddSingleCustomer();
+
+ const statusList = [
+ { id: 1, title: "VIP", icon: general },
+ { id: 2, title: "عمومی", icon: family },
+ { id: 3, title: "آشنایان", icon: VIP },
+ ];
+
+ const handleChangePhoto = () => {
+ fileInputRef.current?.click();
+ };
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ const base64 = reader.result as string;
+ setProfilePicture(base64);
+ setPhotoFile(file);
+ };
+ reader.readAsDataURL(file); // تبدیل به base64
+ }
+ };
+
+ const handleDeletePhoto = () => {
+ setProfilePicture(addPhoto);
+ };
+
+ const handleSaveCustomer = async () => {
+ if (!btnEnable) return;
+
+ const formData = new FormData();
+ formData.append("name", name);
+ formData.append("phone_number", phoneNumber);
+ formData.append("customer_type", statusTitle || "عمومی");
+ formData.append("description", sendAskPhotoSMS ? "true" : "false");
+ formData.append("date_of_birth", birthDate || "");
+
+ if (photoFile) {
+ formData.append("profile_picture", photoFile);
+ }
+
+ try {
+ await addCustomerMutation.mutateAsync(formData);
+
+ navigate(
+ `${appointmentRoutes.advanceAppointment}?header=${encodeURIComponent(
+ "تعیین ساعت رزرو نوبت"
+ )}`
+ );
+ } catch (err) {
+ console.error("خطا در ذخیره مشتری:", err);
+ }
+ };
+
+ useEffect(() => {
+ return () => {
+ localStorage.removeItem("birthDate");
+ };
+ }, []);
+
+ const handlePickContact = async () => {
+ try {
+ const navigatorWithContacts = navigator as typeof navigator & {
+ contacts?: ContactsManager;
+ };
+
+ if (navigatorWithContacts.contacts) {
+ const props = ["name", "tel"];
+ const opts = { multiple: false };
+ const contacts = await navigatorWithContacts.contacts.select(
+ props,
+ opts
+ );
+
+ if (contacts.length > 0) {
+ const contact = contacts[0];
+ setName(contact.name?.[0] || "");
+
+ const rawNumber = contact.tel?.[0] || "";
+ const cleanedNumber = rawNumber.replace(/\D/g, "");
+ setPhoneNumber(cleanedNumber);
+ }
+ } else {
+ showErrorAlert("این مرورگر از انتخاب مخاطب پشتیبانی نمیکند.");
+ }
+ } catch (err) {
+ console.error(err);
+ }
+ };
+ return (
+ = ({
const foundCustomer = data?.customers.find(
(customer) => customer.phone_number === apt.phone_number
);
+
return (
{isOpen && (
@@ -151,20 +153,37 @@ const AppointmentDetail: React.FC = ({
) : (
<>
-
@@ -137,13 +105,30 @@ const AppointmentRequest = ({
+
- if (visualViewport.height < window.screen.height * 0.7) {
- setModalPosition("topKeyboard");
- } else {
- setModalPosition("center");
- }
- }
- };
-
- if (window.visualViewport) {
- window.visualViewport.addEventListener("resize", updateModalPosition);
- window.visualViewport.addEventListener("scroll", updateModalPosition);
- }
-
- updateModalPosition();
-
- return () => {
- if (window.visualViewport) {
- window.visualViewport.removeEventListener("resize", updateModalPosition);
- window.visualViewport.removeEventListener("scroll", updateModalPosition);
- }
- };
- }, [modalOpen]);
-
- useEffect(() => {
- if (modalOpen && value) {
- // مقدار ورودی رو بدون صفرهای ابتدایی و با فرمت نمایش میدیم
- const cleaned = value.replace(/\D/g, "").replace(/^0+/, "");
- const formattedValue = cleaned ? cleaned.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "";
- setInputValue(formattedValue);
- setNumericOnly(cleaned);
- setPersianText(cleaned ? convertToPersianWords(cleaned) : "");
- } else if (modalOpen) {
- setInputValue("");
- setNumericOnly("");
- setPersianText("");
- }
- }, [modalOpen, value]);
-
- return (
- <>
- مقدار تومان
++ مبلغ مورد نظر را وارد کنید +
+ setModalOpen(true)}
- className={`h-20 w-20 shadow-md rounded-xl border-2 flex flex-col items-center justify-center cursor-pointer ${
- value ? "border-[#AA00FF66] text-[#AA00FF]" : "border-[#F7EEFF] text-[#2D0A48]"
- }`}
- >
- {value ? (
- <>
-
+
+
+ );
};
export default CostPicker;
diff --git a/src/apps/new-ui/components/MobilePicker/MobileDayPicker.tsx b/src/apps/new-ui/components/MobilePicker/MobileDayPicker.tsx
index ea236f8e..f2c08f18 100644
--- a/src/apps/new-ui/components/MobilePicker/MobileDayPicker.tsx
+++ b/src/apps/new-ui/components/MobilePicker/MobileDayPicker.tsx
@@ -30,8 +30,13 @@ const MobileDayPicker = ({ value, onChange }: Props) => {
days: value?.replace(" روز", "") || "7",
});
+ // const onSubmit = () => {
+ // onChange(`${pickerValue.days}`);
+ // setModalOpen(false);
+ // };
+
const onSubmit = () => {
- onChange(`${pickerValue.days}`);
+ onChange(pickerValue.days);
setModalOpen(false);
};
@@ -41,7 +46,7 @@ const MobileDayPicker = ({ value, onChange }: Props) => {
days: value.replace(" روز", ""),
});
}
- }, [modalOpen]);
+ }, [modalOpen, value]);
// تولید اعداد از 1 تا 365
const dayOptions = Array.from({ length: 365 }, (_, i) => (i + 1).toString());
diff --git a/src/apps/new-ui/pages/CustomerClub/index.tsx b/src/apps/new-ui/pages/CustomerClub/index.tsx
index 3b9504d9..29e26664 100644
--- a/src/apps/new-ui/pages/CustomerClub/index.tsx
+++ b/src/apps/new-ui/pages/CustomerClub/index.tsx
@@ -30,7 +30,7 @@ const CustomerClub = () => {
>
{Number(value).toLocaleString()}
- - ) : ( - <> -+
-دلخواه
- - )} + {/* اینپوت برای وارد کردن مقدار */} +
+ setModalOpen(false)}
- className="p-6 rounded-lg w-full max-w-sm"
- position={modalPosition}
+ {/* پیام خطا / راهنما */}
+ {!isValid() && numericOnly.length > 0 && (
+
+
+ {/* دکمههای تایید و لغو */}
+
+
+
+ تومان
+
- + مبلغ باید حداقل ۴ رقم باشد. +
+ )} + + {/* نمایش مبلغ به حروف */} + {persianText && isValid() && ( +
+
+ )}
+ + {persianText} +
+
+
+
+
+
- navigate("/")}
- onSubmit={submit}
- disabled={!btnTrigger}
- isPending={isPending}
- />
-
+ selectedValue.length > 0 &&
+ selectedService.length > 0 &&
+ hasValidDay &&
+ !!selectedCardId &&
+ hasValidAmount
);
+ }, [
+ selectedValue,
+ selectedService,
+ selectedDay,
+ selectedCardId,
+ customDay,
+ selected,
+ customAmount,
+ ]);
+
+ // handlers (passed to child components)
+ const handleSelectCard = useCallback(
+ (bannerId: number, bannerUrl: string, bannerCardType: any) => {
+ setDefaultGiftCard(bannerUrl);
+ setSelectedCardId(bannerId);
+ setCardType(bannerCardType);
+ },
+ []
+ );
+
+ const handleAddOption = useCallback((opt: string) => {
+ setOptions((prev) => [opt, ...prev]);
+ }, []);
+
+ // Amount handlers
+ const onAmountPickerChange = useCallback((newValue: string | null) => {
+ if (!newValue) return;
+
+ // تبدیل اعداد فارسی و عربی به انگلیسی
+ const normalized = newValue
+ .replace(/[۰-۹]/g, (d) => String.fromCharCode(d.charCodeAt(0) - 1728))
+ .replace(/[٠-٩]/g, (d) => String.fromCharCode(d.charCodeAt(0) - 1632));
+
+ const digits = normalized.replace(/\D/g, "");
+ const value = parseInt(digits, 10);
+
+ if (!value || value <= 0) {
+ toast.error("مبلغ کارت هدیه نمیتواند ۰ باشد.");
+ return;
+ }
+
+ if (!value || value.toString().length > 6) {
+ toast.error("مبلغ کارت هدیه نمیتواند بیش از 9 رقم باشد.");
+ return;
+ }
+
+ setCustomAmount(value);
+ setSelected("custom");
+ }, []);
+
+ const chooseAmount = useCallback((amount: number) => setSelected(amount), []);
+ // Day handlers
+ const onDayPickerChange = useCallback((newValue: string) => {
+ const dayValue = parseInt(newValue, 10);
+ setCustomDay(dayValue);
+ setSelectedDay("custom");
+ }, []);
+ const chooseDay = useCallback((day: number) => {
+ setSelectedDay(day);
+ setCustomDay(null);
+ }, []);
+
+ const submit = useCallback(() => {
+ const amountString =
+ selected === "custom" && customAmount !== null
+ ? (customAmount ).toString()
+ : typeof selected === "number"
+ ? (selected * 1000).toString()
+ : "0";
+
+ const expire_date =
+ selectedDay === "custom" && customDay !== null
+ ? getExpiryDate(customDay)
+ : typeof selectedDay === "number"
+ ? getExpiryDate(selectedDay)
+ : "";
+
+ createGiftCard({
+ amount: amountString,
+ text: selectedValue || "",
+ service: selectedService || "",
+ expire_date,
+ card_type: cardType,
+ });
+ }, [
+ selected,
+ customAmount,
+ selectedDay,
+ customDay,
+ selectedValue,
+ selectedService,
+ cardType,
+ createGiftCard,
+ ]);
+
+ return (
+
-
-
-
- کارت هدیه
-
-
-
-
-
-
-
-
-
- خدمات
-
-
+ navigate("/")}
+ onSubmit={submit}
+ disabled={!btnTrigger}
+ isPending={isPending}
+ />
+
+ );
};
export default React.memo(CreateGiftCard);
diff --git a/src/apps/new-ui/pages/invite-friends/index.tsx b/src/apps/new-ui/pages/invite-friends/index.tsx
index ae977199..a58dc9de 100644
--- a/src/apps/new-ui/pages/invite-friends/index.tsx
+++ b/src/apps/new-ui/pages/invite-friends/index.tsx
@@ -88,7 +88,7 @@ const InviteFriends = () => {
>
+
+
+
+ کارت هدیه
+
+
+
+
+
+
+
+
+
+ خدمات
+
+
+
+ );
+};
+
+export default AddReservedCustomer;
diff --git a/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentDetail.tsx b/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentDetail.tsx
index 4deeace5..4700563a 100644
--- a/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentDetail.tsx
+++ b/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentDetail.tsx
@@ -7,6 +7,7 @@ import { appointmentRoutes } from "@appointment/routes";
import { formatPersianDate } from "@/utils/date-time";
import { IReservedAppointment } from "@/apps/appointment/utils/types";
import { useGetAllCustomers } from "@/apps/new-ui/services/Customer";
+import { showWarningAlert } from "@/apps/new-ui/components/CustomAlert";
interface AppointmentDetailProps {
apt: IReservedAppointment;
@@ -27,6 +28,7 @@ const AppointmentDetail: React.FC
+
+
+ {/* =============status============== */}
+ + افزودن مشتری جدید +
+ + {/* =======profile pic========= */} + setIsSelectPhotoOpen(true)}
+ className="mt-4 w-24 h-24 rounded-full cursor-pointer"
+ >
+ 
+
+
+ {/* =================== */}
+
+ 
+
+
+ {/* ==========name=========== */}
+ + افزودن مشتری از مخاطبین +
+
+ setName(e.target.value)}
+ type="text"
+ required
+ maxLength={24}
+ className="w-full rounded-full border-2 h-10 border-gray-300 p-4 text-sm"
+ placeholder="نام و نام خانوادگی"
+ />
+
+
+ {/* =================phone number=========== */}
+
+ setPhoneNumber(e.target.value)}
+ digitsOnly={true}
+ maxLength={14}
+ dir="ltr"
+ required
+ className="w-full rounded-full border-2 border-gray-300 h-10 p-4 text-sm text-right"
+ placeholder="شماره موبایل"
+ />
+
+
+
+
+ دستهبندی
+ setIsAddStatusOpen(true)}
+ className="flex items-center justify-center gap-2 border-2 w-[90px] border-[#A780C3] rounded-full py-2 cursor-pointer"
+ >
+
+
+ افزودن
+
+ {statusList.map((status) => (
+
+
+ {/* ===========birth date=========== */}
+ setStatusTitle(status.title)}
+ >
+ 
+
+ ))}
+ {status.title}
+
+ setBirthDate(newDate)}
+ />
+
+
+ {/* ==========send sms============ */}
+
+ setSendAskPhotoSMS(!sendAskPhotoSMS)}
+ label="ارسال پیامک درخواست تصویر کاربری از مشتری"
+ />
+
+
+ {/* ============buttons=========== */}
+
+
+
+
+
+ {/* ==========select pic============= */}
+ {isSelectPhotoOpen && (
+
+
+ )}
+
+ {isAddStatusOpen && (
+
+
+ setIsSelectPhotoOpen(false)}
+ className="absolute cursor-pointer bg-[#dedee3] text-[#999999] text-2xl rounded-full p-2 top-2 right-2"
+ >
+
+
+
+
+
+
+ مدیریت تصویر مشتری
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ setIsAddStatusOpen(false)} />
+
+ setIsAddStatusOpen(false)}
+ className="absolute cursor-pointer bg-[#dedee3] text-[#999999] text-2xl rounded-full p-2 top-2 right-2 "
+ >
+
+
+
diff --git a/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentRequest.tsx b/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentRequest.tsx
index de65f0d3..d72f5d08 100644
--- a/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentRequest.tsx
+++ b/src/apps/new-ui/pages/reserved-appointments/+components/AppointmentRequest.tsx
@@ -3,13 +3,12 @@ import AppointmentDetail from "./AppointmentDetail";
import { useState } from "react";
import avatar from "../../../assets/profilePhoto.svg";
import status from "../../../assets/appointment/status.svg";
-import { Check, Copy, XIcon } from "lucide-react";
+import { Check, XIcon } from "lucide-react";
import { IReservedAppointment } from "@/apps/appointment/utils/types";
import { appointmentRoutes } from "@/apps/appointment/routes";
import { showWarningAlert } from "@/apps/new-ui/components/CustomAlert";
import { useGetAllCustomers } from "@/apps/new-ui/services/Customer";
import { useNavigate } from "react-router-dom";
-import { useClipboard } from "@/apps/new-ui/Utils/copyToClipboard";
const AppointmentRequest = ({
selectedDateAppointment,
@@ -17,7 +16,6 @@ const AppointmentRequest = ({
selectedDateAppointment: IReservedAppointment[];
}) => {
const { data } = useGetAllCustomers();
- const { copied, copy } = useClipboard(2000);
const navigate = useNavigate();
const [isOpen, setIsOpen] = useState(false);
const [selectedApt, setSelectedApt] = useState(
@@ -33,18 +31,6 @@ const AppointmentRequest = ({
});
};
- const onCopyPhone = async (text?: string) => {
- if (!text) return;
- try {
- const ok = await copy(text);
- if (!ok) {
- console.warn("Copy failed via utility for text:", text);
- }
- } catch (err) {
- console.warn("Copy threw:", err);
- }
- };
-
return (
{selectedDateAppointment.map((apt, index) => {
@@ -91,24 +77,6 @@ const AppointmentRequest = ({
{apt.phone_number}
- - {!foundCustomer?.phone_number && ( - - )}