refactor: optimze modal

src/common/modal/index.tsx

@@ -14,6 +14,7 @@ export default function MuiModal({
   submitOnClick,
   disabled,
   handleCloseCustom,
+  aboveSubmit,
   children,
 }: MuiModalProps) {
   const [open, setOpen] = useState(false);
@@ -57,22 +58,27 @@ export default function MuiModal({
           <motion.div className="w-full flex-1 flex flex-col justify-between text-center items-center overflow-y-auto">
             {children}
           </motion.div>
-          <motion.div
+          <motion.div className="w-full h-full flex flex-col gap-2">
-            className={`w-full h-full flex ${
+            {aboveSubmit && (
-              submitText ? "justify-end" : "justify-center"
+              <div className="w-full flex justify-center">{aboveSubmit}</div>
-            } items-center gap-2 md:gap-3 text-lg md:text-xl`}
-          >
-            <Button onClick={handleCloseCustom || handleClose}> بستن </Button>
-            {submitText && (
-              <Button
-                extra={`${disabled && "!bg-slate-300"}`}
-                onClick={submitOnClick}
-                disabled={disabled}
-              >
-                {" "}
-                {submitText}{" "}
-              </Button>
             )}
+            <motion.div
+              className={`w-full h-full flex ${
+                submitText ? "justify-end" : "justify-center"
+              } items-center gap-2 md:gap-3 text-lg md:text-xl`}
+            >
+              <Button onClick={handleCloseCustom || handleClose}> بستن </Button>
+              {submitText && (
+                <Button
+                  extra={`${disabled && "!bg-slate-300"}`}
+                  onClick={submitOnClick}
+                  disabled={disabled}
+                >
+                  {" "}
+                  {submitText}{" "}
+                </Button>
+              )}
+            </motion.div>
           </motion.div>
         </motion.div>
       </Modal>

src/pages/shop/section/productList/components/ModalBuy.tsx

@@ -195,13 +195,13 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
   };
 
   const submitHandler = () => {
-   if (requiresAdvancedVerification) {
+   if (hasExtraDescription && !hasReadDescription) {
-     goToAdvancedVerification();
+     toast.error("لطفا ابتدا توضیحات سرویس را مطالعه و تایید کنید");
      return;
    }
 
-   if (hasExtraDescription && !hasReadDescription) {
+   if (requiresAdvancedVerification) {
-     toast.error("لطفا ابتدا توضیحات سرویس را مطالعه و تایید کنید");
+     goToAdvancedVerification();
      return;
    }
 
@@ -213,6 +213,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
    const payload = {
      ...formik.values,
      status: "buy",
+     ...(hasExtraDescription ? { hasReadDescription: true } : {}),
      ...(needsShahkarVerification ? { nationalCode: nationalCode.trim() } : {}),
    };
 
@@ -291,11 +292,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
       setIsOpenModal={setIsOpen}
      submitText={data?.data?.result?.max_config === 0 ? undefined : "خرید"}
      submitOnClick={submitHandler}
-     disabled={
+     disabled={isLoading || isFetching}
-       isLoading ||
-       isFetching ||
-       (hasExtraDescription && !hasReadDescription)
-     }
      nameService={
         isLoading || isFetching
           ? "درحال بارگذاری..."
@@ -303,6 +300,19 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
           ? data?.data.result.title
           : "خطا رخ داد"
       }
+      aboveSubmit={
+        hasExtraDescription ? (
+          <label className="w-full flex flex-row-reverse items-center justify-center gap-2 text-xs md:text-sm text-gray-300 cursor-pointer select-none">
+            <input
+              type="checkbox"
+              checked={hasReadDescription}
+              onChange={(e) => setHasReadDescription(e.target.checked)}
+              className="w-4 h-4 accent-secondTheme"
+            />
+            توضیحات سرویس را مطالعه کردم
+          </label>
+        ) : undefined
+      }
     >
       <div className="relative w-full h-full px-2 md:px-4">
         {error && (
@@ -349,17 +359,6 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
                 توضیحات سرویس
               </Button>
             )}
-            {hasExtraDescription && (
-              <label className="w-full flex flex-row-reverse items-center gap-2 text-xs md:text-sm text-gray-300 cursor-pointer select-none">
-                <input
-                  type="checkbox"
-                  checked={hasReadDescription}
-                  onChange={(e) => setHasReadDescription(e.target.checked)}
-                  className="w-4 h-4 accent-secondTheme"
-                />
-                توضیحات سرویس را مطالعه کردم
-              </label>
-            )}
             <Alert type="danger">
               {" "}
               کاربر گرامی لطفا از خاموش بودن vpn خود اطمینان حاصل فرمایید تا در

src/pages/shop/section/productList/components/ModalDnsServiceInfo.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import MuiModal from "../../../../../common/modal";
 
-interface DescriptionSection {
+export interface DescriptionSection {
   emoji?: string;
   title?: string;
   items?: string[];
@@ -41,7 +41,6 @@ const ModalDnsServiceInfo = ({
       isOpenModal={isOpen}
       setIsOpenModal={setIsOpen}
       title="توضیحات سرویس"
-      nameService="توضیحات سرویس"
     >
       <div className="w-full h-full flex flex-col gap-3 max-sm:text-xs max-md:text-sm text-base">
         {(sections ?? []).map((section, sectionIndex) => (

src/types/props.d.ts

@@ -116,6 +116,7 @@ export interface MuiModalProps {
   submitOnClick?: () => void;
   disabled?: boolean;
   handleCloseCustom ?: () => void;
+  aboveSubmit?: React.ReactNode;
   children: React.ReactNode;
 }