fix: add missing tutorial access to DNS service modal in profile

The "آموزش" button only appeared in the desktop-only action row, and
the modal that opens for DNS on mobile (ModalDnsConfig) never had a
tutorial link at all, unlike ModalConfigDetails for other config
types. DNS users therefore had no way to reach /tutorial on mobile.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-15 23:37:07 +03:30
parent 0434819af0
commit fb70f32048
3 changed files with 25 additions and 1 deletions

View File

@@ -146,6 +146,7 @@ const ConfigItem = ({
dnsRegistrationExpired={dnsRegistrationExpired}
dnsExpiresAt={dnsExpiresAt}
canRenew={canRenew}
categoryId={categoryId}
/>
)}
<div className="relative w-full h-full rounded-md">

View File

@@ -1,11 +1,13 @@
import { useState } from "react";
import toast from "react-hot-toast";
import { IoCopyOutline, IoWifiOutline } from "react-icons/io5";
import { IoCopyOutline, IoSchoolOutline, IoWifiOutline } from "react-icons/io5";
import { MdOutlineDns } from "react-icons/md";
import { FaBolt } from "react-icons/fa6";
import { BsShieldExclamation } from "react-icons/bs";
import { useMutation } from "@tanstack/react-query";
import { AxiosError } from "axios";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import MuiModal from "../../../../common/modal";
import Button from "../../../../components/button";
import Input from "../../../../components/input";
@@ -13,6 +15,7 @@ import Alert from "../../../../components/alert/Alert";
import { ModalDnsConfigProps } from "../../../../types/props";
import useAxios from "../../../../hooks/useAxios";
import { queryClient } from "../../../../main";
import { setCategoryId } from "../../../../redux/slices/categoryId";
const IPV4_ADDRESS_REGEX = /^(\d{1,3}\.){3}\d{1,3}$/;
@@ -50,11 +53,21 @@ const ModalDnsConfig = ({
dnsRegistrationExpired,
dnsExpiresAt,
canRenew,
categoryId,
}: ModalDnsConfigProps) => {
const axios = useAxios();
const dispatch = useDispatch();
const navigate = useNavigate();
const [ip, setIp] = useState("");
const [isDetecting, setIsDetecting] = useState(false);
const goToTutorial = () => {
if (!categoryId) return;
dispatch(setCategoryId(categoryId));
setIsOpen(false);
navigate("/tutorial");
};
const renewMutation = useMutation({
mutationKey: ["renewDnsOrder", orderId],
mutationFn: () => {
@@ -158,6 +171,15 @@ const ModalDnsConfig = ({
return (
<MuiModal isOpenModal={isOpen} setIsOpenModal={setIsOpen} nameService={nameConfig}>
<div className="w-full h-full flex flex-col gap-4 max-sm:text-xs max-md:text-sm text-base">
{categoryId && (
<Button
onClick={goToTutorial}
extra="!m-0 !px-3 shadow-md self-start flex flex-row-reverse justify-center items-center gap-1.5"
>
<IoSchoolOutline className="w-4 h-4" />
آموزش
</Button>
)}
{dnsRegistrationExpired && (
<Alert type="danger" extra="!mb-0 !rounded-lg">
مهلت این سرویس به پایان رسیده است. برای ادامه استفاده، سرویس را تمدید کنید

View File

@@ -154,6 +154,7 @@ export interface ModalDnsConfigProps {
dnsRegistrationExpired?: boolean;
dnsExpiresAt?: string | null;
canRenew?: boolean;
categoryId?: number;
}
// نوع Item برای آیتم‌های داخل Dropdown