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} dnsRegistrationExpired={dnsRegistrationExpired}
dnsExpiresAt={dnsExpiresAt} dnsExpiresAt={dnsExpiresAt}
canRenew={canRenew} canRenew={canRenew}
categoryId={categoryId}
/> />
)} )}
<div className="relative w-full h-full rounded-md"> <div className="relative w-full h-full rounded-md">

View File

@@ -1,11 +1,13 @@
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; 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 { MdOutlineDns } from "react-icons/md";
import { FaBolt } from "react-icons/fa6"; import { FaBolt } from "react-icons/fa6";
import { BsShieldExclamation } from "react-icons/bs"; import { BsShieldExclamation } from "react-icons/bs";
import { useMutation } from "@tanstack/react-query"; import { useMutation } from "@tanstack/react-query";
import { AxiosError } from "axios"; import { AxiosError } from "axios";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import MuiModal from "../../../../common/modal"; import MuiModal from "../../../../common/modal";
import Button from "../../../../components/button"; import Button from "../../../../components/button";
import Input from "../../../../components/input"; import Input from "../../../../components/input";
@@ -13,6 +15,7 @@ import Alert from "../../../../components/alert/Alert";
import { ModalDnsConfigProps } from "../../../../types/props"; import { ModalDnsConfigProps } from "../../../../types/props";
import useAxios from "../../../../hooks/useAxios"; import useAxios from "../../../../hooks/useAxios";
import { queryClient } from "../../../../main"; import { queryClient } from "../../../../main";
import { setCategoryId } from "../../../../redux/slices/categoryId";
const IPV4_ADDRESS_REGEX = /^(\d{1,3}\.){3}\d{1,3}$/; const IPV4_ADDRESS_REGEX = /^(\d{1,3}\.){3}\d{1,3}$/;
@@ -50,11 +53,21 @@ const ModalDnsConfig = ({
dnsRegistrationExpired, dnsRegistrationExpired,
dnsExpiresAt, dnsExpiresAt,
canRenew, canRenew,
categoryId,
}: ModalDnsConfigProps) => { }: ModalDnsConfigProps) => {
const axios = useAxios(); const axios = useAxios();
const dispatch = useDispatch();
const navigate = useNavigate();
const [ip, setIp] = useState(""); const [ip, setIp] = useState("");
const [isDetecting, setIsDetecting] = useState(false); const [isDetecting, setIsDetecting] = useState(false);
const goToTutorial = () => {
if (!categoryId) return;
dispatch(setCategoryId(categoryId));
setIsOpen(false);
navigate("/tutorial");
};
const renewMutation = useMutation({ const renewMutation = useMutation({
mutationKey: ["renewDnsOrder", orderId], mutationKey: ["renewDnsOrder", orderId],
mutationFn: () => { mutationFn: () => {
@@ -158,6 +171,15 @@ const ModalDnsConfig = ({
return ( return (
<MuiModal isOpenModal={isOpen} setIsOpenModal={setIsOpen} nameService={nameConfig}> <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"> <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 && ( {dnsRegistrationExpired && (
<Alert type="danger" extra="!mb-0 !rounded-lg"> <Alert type="danger" extra="!mb-0 !rounded-lg">
مهلت این سرویس به پایان رسیده است. برای ادامه استفاده، سرویس را تمدید کنید مهلت این سرویس به پایان رسیده است. برای ادامه استفاده، سرویس را تمدید کنید

View File

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