feat: add zip file to download pdf and certificate

2026-08-17 21:25:54 +02:00 · 2024-09-20 12:04:10 +05:30
parent 0c04cc6ce6
commit 1831bbcd70
14 changed files with 648 additions and 481 deletions
@@ -19,6 +19,7 @@
        "i18next": "^23.14.0",
        "i18next-browser-languagedetector": "^8.0.0",
        "i18next-http-backend": "^2.6.1",
+        "jszip": "^3.10.1",
        "jwt-decode": "^4.0.0",
        "moment": "^2.30.1",
        "nth-check": "^2.1.1",
@@ -12748,6 +12749,12 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
    "node_modules/immer": {
      "version": "10.1.1",
      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
@@ -16181,6 +16188,54 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
    "node_modules/jwt-decode": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
@@ -16286,6 +16341,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lilconfig": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
@@ -22606,6 +22670,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -14,6 +14,7 @@
    "i18next": "^23.14.0",
    "i18next-browser-languagedetector": "^8.0.0",
    "i18next-http-backend": "^2.6.1",
+    "jszip": "^3.10.1",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
    "nth-check": "^2.1.1",
@@ -648,5 +648,8 @@
    "p4": "Please choose the option that best suits your document signing requirements."
  },
  "advanced-options":"Advanced options",
-  "hide-advanced-options":"Hide Advanced options"
+  "hide-advanced-options":"Hide Advanced options",
+  "download-files":"Download files",
+  "download-pdf":"Download Pdf",
+  "pdf-certificate":"Download Pdf + Certificate"
 }
@@ -647,6 +647,9 @@
    "p4": "Veuillez choisir l'option qui correspond le mieux à vos exigences en matière de signature de documents."
  },
  "advanced-options":"Options avancées",
-  "hide-advanced-options": "Masquer les options avancées"
+  "hide-advanced-options": "Masquer les options avancées",
+   "download-files" :"Télécharger des fichiers",
+   "download-pdf" :"Télécharger le PDF",
+  "pdf-certificate"  :"Télécharger Pdf + Certificat"

 }
@@ -165,9 +165,7 @@ function EmailComponent({
              )}
              <button
                className="op-btn op-btn-primary op-btn-sm text-[15px] ml-2"
-                onClick={() =>
-                  handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                }
+                onClick={() => handleDownloadPdf(pdfDetails, setIsDownloading)}
              >
                <i className="fa-light fa-download" aria-hidden="true"></i>
                {t("download")}
@@ -39,7 +39,8 @@ function Header({
  clickOnZoomOut,
  handleRotationFun,
  isDisableRotate,
-  templateId
+  templateId,
+  setIsDownloadModal
 }) {
  const { t } = useTranslation();
  const filterPrefill =
@@ -94,9 +95,13 @@ function Header({
                  >
                    <DropdownMenu.Item
                      className="DropdownMenuItem"
-                      onClick={() =>
-                        handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                      }
+                      onClick={() => {
+                        if (isCompleted) {
+                          setIsDownloadModal(true);
+                        } else {
+                          handleDownloadPdf(pdfDetails, setIsDownloading);
+                        }
+                      }}
                    >
                      <div className="flex flex-row">
                        <i
@@ -211,11 +216,7 @@ function Header({
                          <DropdownMenu.Item
                            className="DropdownMenuItem"
                            onClick={() =>
-                              handleDownloadPdf(
-                                pdfDetails,
-                                pdfDetails[0]?.URL,
-                                setIsDownloading
-                              )
+                              handleDownloadPdf(pdfDetails, setIsDownloading)
                            }
                          >
                            <div className="flex flex-row">
@@ -386,9 +387,13 @@ function Header({
                <button
                  type="button"
                  className="op-btn op-btn-primary op-btn-sm mr-[3px] shadow"
-                  onClick={() =>
-                    handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                  }
+                  onClick={() => {
+                    if (isCompleted) {
+                      setIsDownloadModal(true);
+                    } else {
+                      handleDownloadPdf(pdfDetails, setIsDownloading);
+                    }
+                  }}
                >
                  <i
                    className="fa-light fa-download py-[3px]"
@@ -443,11 +448,7 @@ function Header({
                        type="button"
                        className="op-btn op-btn-neutral op-btn-sm mr-[3px] shadow"
                        onClick={() =>
-                          handleDownloadPdf(
-                            pdfDetails,
-                            pdfUrl,
-                            setIsDownloading
-                          )
+                          handleDownloadPdf(pdfDetails, setIsDownloading)
                        }
                      >
                        <i className="fa-light fa-arrow-down font-semibold lg:hidden"></i>
@@ -487,9 +488,9 @@ function Header({
              <button
                type="button"
                className="op-btn op-btn-primary op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
-                onClick={() =>
-                  handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                }
+                onClick={() => {
+                  setIsDownloadModal(true);
+                }}
              >
                <i className="fa-light fa-download" aria-hidden="true"></i>
                <span className="hidden lg:block ml-1">{t("download")}</span>
@@ -2039,12 +2039,9 @@ export const fetchUrl = async (url, pdfName) => {
  }
 };
 //handle download signed pdf
-export const handleDownloadPdf = async (
-  pdfDetails,
-  pdfUrl,
-  setIsDownloading
-) => {
-  const pdfName = pdfDetails[0] && pdfDetails[0].Name;
+export const handleDownloadPdf = async (pdfDetails, setIsDownloading) => {
+  const pdfName = pdfDetails[0] && pdfDetails[0]?.Name;
+  const pdfUrl = pdfDetails?.[0]?.SignedUrl || pdfDetails?.[0]?.URL;
  setIsDownloading("pdf");
  const docId = !pdfDetails?.[0]?.IsEnableOTP ? pdfDetails?.[0]?.objectId : "";
  try {
@@ -2130,13 +2127,18 @@ export const handleToPrint = async (
 //handle download signed pdf
 export const handleDownloadCertificate = async (
  pdfDetails,
-  setIsDownloading
+  setIsDownloading,
+  isZip
 ) => {
  if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
    try {
      await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
      const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
-      saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+      if (isZip) {
+        return certificateUrl;
+      } else {
+        saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+      }
    } catch (err) {
      console.log("err in download in certificate", err);
    }
@@ -2162,7 +2164,12 @@ export const handleDownloadCertificate = async (
        if (doc?.CertificateUrl) {
          await fetch(doc?.CertificateUrl);
          const certificateUrl = doc?.CertificateUrl;
-          saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+          if (isZip) {
+            return certificateUrl;
+          } else {
+            saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+          }
+
          setIsDownloading("");
        } else {
          setIsDownloading("certificate");
@@ -36,21 +36,24 @@ import {
  onClickZoomOut,
  fetchUrl
 } from "../constant/Utils";
-import LoaderWithMsg from "../primitives/LoaderWithMsg";
-import HandleError from "../primitives/HandleError";
 import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
-import PdfDeclineModal from "../primitives/PdfDeclineModal";
 import Title from "../components/Title";
 import DefaultSignature from "../components/pdf/DefaultSignature";
-import ModalUi from "../primitives/ModalUi";
-import TourContentWithBtn from "../primitives/TourContentWithBtn";
-import Loader from "../primitives/Loader";
 import { useSelector } from "react-redux";
 import SignerListComponent from "../components/pdf/SignerListComponent";
 import VerifyEmail from "../components/pdf/VerifyEmail";
 import PdfZoom from "../components/pdf/PdfZoom";
 import { useTranslation } from "react-i18next";
+import {
+  DownloadPdfZip,
+  Loader,
+  TourContentWithBtn,
+  ModalUi,
+  PdfDeclineModal,
+  HandleError,
+  LoaderWithMsg
+} from "../primitives";

 function PdfRequestFiles(props) {
  const { t } = useTranslation();
@@ -136,6 +139,7 @@ function PdfRequestFiles(props) {
  const [plancode, setPlanCode] = useState("");
  const isHeader = useSelector((state) => state.showHeader);
  const divRef = useRef(null);
+  const [isDownloadModal, setIsDownloadModal] = useState(false);

  const isMobile = window.innerWidth < 767;

@@ -1995,11 +1999,7 @@ function PdfRequestFiles(props) {
                              type="button"
                              className="font-[500] text-[13px] mr-[5px] op-btn op-btn-primary"
                              onClick={() =>
-                                handleDownloadPdf(
-                                  pdfDetails,
-                                  pdfUrl,
-                                  setIsDownloading
-                                )
+                                handleDownloadPdf(pdfDetails, setIsDownloading)
                              }
                            >
                              <i
@@ -2080,6 +2080,7 @@ function PdfRequestFiles(props) {
                      clickOnZoomOut={clickOnZoomOut}
                      isDisableRotate={true}
                      templateId={props.templateId}
+                      setIsDownloadModal={setIsDownloadModal}
                    />

                    <div ref={divRef} data-tut="pdfArea" className="h-[95%]">
@@ -2206,6 +2207,11 @@ function PdfRequestFiles(props) {
              </button>
            </div>
          </ModalUi>
+          <DownloadPdfZip
+            setIsDownloadModal={setIsDownloadModal}
+            isDownloadModal={isDownloadModal}
+            pdfDetails={pdfDetails}
+          />
        </>
      )}
    </DndProvider>
@@ -11,8 +11,6 @@ import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
 import { useLocation, useParams } from "react-router-dom";
-import LoaderWithMsg from "../primitives/LoaderWithMsg";
-import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
 import { RWebShare } from "react-web-share";
@@ -45,23 +43,27 @@ import {
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
-import LinkUserModal from "../primitives/LinkUserModal";
 import Title from "../components/Title";
-import TourContentWithBtn from "../primitives/TourContentWithBtn";
-import ModalUi from "../primitives/ModalUi";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
 import WidgetNameModal from "../components/pdf/WidgetNameModal";
 import { SaveFileSize } from "../constant/saveFileSize";
 import { EmailBody } from "../components/pdf/EmailBody";
-import Upgrade from "../primitives/Upgrade";
-import Alert from "../primitives/Alert";
-import Loader from "../primitives/Loader";
 import { useSelector } from "react-redux";
 import PdfZoom from "../components/pdf/PdfZoom";
-import LottieWithLoader from "../primitives/DotLottieReact";
 import { useTranslation } from "react-i18next";
 import RotateAlert from "../components/RotateAlert";
-import QuotaCard from "../primitives/QuotaCard";
+import {
+  TourContentWithBtn,
+  ModalUi,
+  HandleError,
+  LoaderWithMsg,
+  LinkUserModal,
+  QuotaCard,
+  LottieWithLoader,
+  Alert,
+  Upgrade,
+  ModalUi
+} from "../primitives";

 function PlaceHolderSign() {
  const { t } = useTranslation();
@@ -4,7 +4,6 @@ import "../styles/signature.css";
 import Parse from "parse";
 import Confetti from "react-confetti";
 import axios from "axios";
-import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -42,21 +41,25 @@ import {
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
 import Signedby from "../components/pdf/Signedby";
-import HandleError from "../primitives/HandleError";
 import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
-import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import Title from "../components/Title";
-import ModalUi from "../primitives/ModalUi";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
 import { useSelector } from "react-redux";
 import TextFontSetting from "../components/pdf/TextFontSetting";
 import VerifyEmail from "../components/pdf/VerifyEmail";
 import PdfZoom from "../components/pdf/PdfZoom";
-import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
 import RotateAlert from "../components/RotateAlert";
+import {
+  DownloadPdfZip,
+  Loader,
+  ModalUi,
+  TourContentWithBtn,
+  HandleError,
+  LoaderWithMsg
+} from "../primitives";
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
  const { t } = useTranslation();
@@ -130,6 +133,7 @@ function SignYourSelf() {
  const [pdfRotateBase64, setPdfRotatese64] = useState("");
  const [isRotate, setIsRotate] = useState({ status: false, degree: 0 });
  const [isSubscribe, setIsSubscribe] = useState({ plan: "", isValid: true });
+  const [isDownloadModal, setIsDownloadModal] = useState(false);
  const divRef = useRef(null);
  const nodeRef = useRef(null);
  const [, drop] = useDrop({
@@ -1346,6 +1350,7 @@ function SignYourSelf() {
                  clickOnZoomIn={clickOnZoomIn}
                  clickOnZoomOut={clickOnZoomOut}
                  widgetsDetails={xyPostion}
+                  setIsDownloadModal={setIsDownloadModal}
                />
                <div ref={divRef} data-tut="reactourSecond" className="h-full">
                  {containerWH?.width && containerWH?.height && (
@@ -1450,6 +1455,11 @@ function SignYourSelf() {
        setIsRotate={setIsRotate}
        handleRemoveWidgets={handleRemoveWidgets}
      />
+      <DownloadPdfZip
+        setIsDownloadModal={setIsDownloadModal}
+        isDownloadModal={isDownloadModal}
+        pdfDetails={pdfDetails}
+      />
      <TextFontSetting
        isTextSetting={isTextSetting}
        setIsTextSetting={setIsTextSetting}
@@ -9,8 +9,6 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
-import LoaderWithMsg from "../primitives/LoaderWithMsg";
-import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
 import WidgetNameModal from "../components/pdf/WidgetNameModal";
@@ -36,18 +34,22 @@ import {
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
 import Title from "../components/Title";
-import LinkUserModal from "../primitives/LinkUserModal";
 import EditTemplate from "../components/pdf/EditTemplate";
-import ModalUi from "../primitives/ModalUi";
 import AddRoleModal from "../components/pdf/AddRoleModal";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
-import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
 import Parse from "parse";
 import { useSelector } from "react-redux";
 import PdfZoom from "../components/pdf/PdfZoom";
 import { useTranslation } from "react-i18next";
 import RotateAlert from "../components/RotateAlert";
+import {
+  TourContentWithBtn,
+  ModalUi,
+  HandleError,
+  LoaderWithMsg,
+  LinkUserModal
+} from "../primitives";
 const TemplatePlaceholder = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ModalUi from "./ModalUi";
+import {
+  handleDownloadCertificate,
+  handleDownloadPdf,
+  sanitizeFileName
+} from "../constant/Utils";
+import Loader from "./Loader";
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
+
+function DownloadPdfZip(props) {
+  const { t } = useTranslation();
+  const [selectType, setSelectType] = useState(1);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const downloadType = [
+    { id: 1, label: t("download-pdf") },
+    { id: 2, label: t("pdf-certificate") }
+  ];
+
+  const handleDownload = async () => {
+    if (selectType === 1) {
+      handleDownloadPdf(props.pdfDetails, setIsDownloading);
+    } else if (selectType === 2) {
+      const zip = new JSZip();
+      const pdfDetails = props.pdfDetails;
+      const pdfName = pdfDetails?.[0]?.Name || "Document";
+      const pdfUrl = pdfDetails?.[0]?.SignedUrl || "";
+
+      try {
+        // Fetch the first PDF (Signed Document)
+        const pdf1Response = await fetch(pdfUrl);
+        if (!pdf1Response.ok) {
+          throw new Error(`Failed to fetch PDF: ${pdfUrl}`);
+        }
+        const pdf1Blob = await pdf1Response.blob();
+
+        // Fetch the Certificate (or generate its URL dynamically)
+        const certificateUrl = await handleDownloadCertificate(
+          pdfDetails,
+          setIsDownloading,
+          true
+        );
+        const pdf2Response = await fetch(certificateUrl);
+        if (!pdf2Response.ok) {
+          throw new Error(`Failed to fetch certificate PDF: ${certificateUrl}`);
+        }
+        const pdf2Blob = await pdf2Response.blob();
+        // Add files to ZIP
+        zip.file(
+          `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`,
+          pdf1Blob
+        );
+        zip.file("Certificate_signed_by_OpenSign™.pdf", pdf2Blob);
+
+        // Generate the ZIP and trigger download
+        const zipBlob = await zip.generateAsync({ type: "blob" });
+        saveAs(zipBlob, "pdf-files.zip");
+        setSelectType(1);
+        props.setIsDownloadModal(false);
+      } catch (error) {
+        console.error("Error creating ZIP file:", error);
+      }
+    }
+  };
+  return (
+    <ModalUi
+      isOpen={props.isDownloadModal}
+      title={t("download-files")}
+      handleClose={() => props.setIsDownloadModal(false)}
+    >
+      <div className="p-[20px] h-full">
+        {downloadType.map((data, ind) => {
+          return (
+            <div key={ind} className="flex items-center gap-1 mb-2">
+              <input
+                className="mr-[8px] op-radio op-radio-xs"
+                type="radio"
+                value={data.id}
+                onChange={() => setSelectType(data.id)}
+                checked={selectType === data.id}
+              />
+              <span>{data.label}</span>
+            </div>
+          );
+        })}
+        <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+        <button
+          onClick={() => handleDownload()}
+          type="submit"
+          className="op-btn op-btn-primary"
+        >
+          {t("download")}
+        </button>
+      </div>
+      {isDownloading === "pdf" && (
+        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )}
+      <ModalUi
+        isOpen={isDownloading === "certificate"}
+        title={
+          isDownloading === "certificate"
+            ? t("generating-certificate")
+            : t("pdf-download")
+        }
+        handleClose={() => setIsDownloading("")}
+      >
+        <div className="p-3 md:p-5 text-[13px] md:text-base text-center text-base-content">
+          {isDownloading === "certificate"}{" "}
+          <p>{t("generate-certificate-alert")}</p>
+        </div>
+      </ModalUi>
+    </ModalUi>
+  );
+}
+
+export default DownloadPdfZip;
@@ -0,0 +1,13 @@
+export { default as DownloadPdfZip } from "./DownloadPdfZip";
+export { default as ModalUi } from "./ModalUi";
+export { default as Loader } from "./Loader";
+export { default as TourContentWithBtn } from "./TourContentWithBtn";
+export { default as HandleError } from "./HandleError";
+export { default as LoaderWithMsg } from "./LoaderWithMsg";
+export { default as PdfDeclineModal } from "./PdfDeclineModal";
+export { default as LoaderWithMsg } from "./LoaderWithMsg";
+export { default as LinkUserModal } from "./LinkUserModal";
+export { default as QuotaCard } from "./QuotaCard";
+export { default as LottieWithLoader } from "./DotLottieReact";
+export { default as Alert } from "./Alert";
+export { default as Upgrade } from "./Upgrade";