feat: implement PDF page rotation feature

apps/OpenSign/public/locales/en/translation.json

@@ -369,7 +369,8 @@
   "copy-type": {
     "All pages": "All pages",
     "All pages but last": "All pages but last",
-    "All pages but first": "All pages but first"
+    "All pages but first": "All pages but first",
+    "Beside to widget":"Beside to widget"
   },
   "options": "Options",
   "minimun-check": "Minimun check",
@@ -604,5 +605,8 @@
   "Add-seats": "Add Seats",
   "user-name-exist": "user name already exist",
   "format": "format",
-  "select-date-format": "Select a date format"
+  "select-date-format": "Select a date format",
+  "rotate-right":"Rotate right",
+  "rotate-left":"Rotate left",
+  "rotate-alert-mssg":"All widgets on this page will be lost. Are you sure you want to proceed?"
 }

apps/OpenSign/public/locales/fr/translation.json

@@ -368,7 +368,8 @@
   "copy-type": {
     "All pages": "Toutes les pages",
     "All pages but last": "Toutes les pages sauf la dernière",
-    "All pages but first": "Toutes les pages sauf la première"
+    "All pages but first": "Toutes les pages sauf la première",
+    "Beside to widget": "À côté du widget"
   },
   "options": "Possibilités",
   "minimun-check": "Vérification minimale",
@@ -603,5 +604,8 @@
   "Select": "sélectionner",
   "Add-seats": "Ajouter des sièges",
   "format": "format",
-  "select-date-format": "Sélectionnez un format de date"
+  "select-date-format": "Sélectionnez un format de date",
+  "rotate-right"  :"Faire pivoter à droite",
+  "rotate-left" :"Faire pivoter à gauche",
+  "rotate-alert-mssg" :"Tous les widgets de cette page seront perdus. Êtes-vous sûr de vouloir continuer ?"
 }

apps/OpenSign/src/components/Header.js

@@ -227,11 +227,7 @@ const Header = ({ showSidebar }) => {
                   <i className="fa-light fa-lock"></i> {t("change-password")}
                 </span>
               </li>
-              <li
-                onClick={() => {
-                  handleConsoleRedirect();
-                }}
-              >
+              <li onClick={() => handleConsoleRedirect()}>
                 <span>
                   <i className="fa-light fa-id-card"></i> Console
                 </span>

apps/OpenSign/src/components/RotateAlert.js

@@ -0,0 +1,38 @@
+import React from "react";
+import ModalUi from "../primitives/ModalUi";
+import { useTranslation } from "react-i18next";
+
+function RotateAlert(props) {
+  const { t } = useTranslation();
+  return (
+    <ModalUi
+      isOpen={props.isRotate}
+      title={t("Rotation-alert")}
+      handleClose={() => props.setIsRotate({ status: false, degree: 0 })}
+    >
+      {" "}
+      <div className="p-[20px] h-full">
+        <p>{t("rotate-alert-mssg")}</p>
+        <div className="h-[1px]  w-full my-[15px] bg-[#9f9f9f]"></div>
+        <div className="flex gap-1">
+          <button
+            onClick={() => props.setIsRotate({ status: false, degree: 0 })}
+            type="button"
+            className="op-btn op-btn-ghost shadow-md"
+          >
+            {t("no")}
+          </button>
+          <button
+            onClick={() => props.handleRemoveWidgets()}
+            type="button"
+            className="op-btn op-btn-primary"
+          >
+            {t("yes")}
+          </button>
+        </div>
+      </div>
+    </ModalUi>
+  );
+}
+
+export default RotateAlert;

apps/OpenSign/src/components/pdf/PdfHeader.js

@@ -34,7 +34,11 @@ function Header({
   setIsEmail,
   completeBtnTitle,
   setIsEditTemplate,
-  isPublicTemplate
+  isPublicTemplate,
+  clickOnZoomIn,
+  clickOnZoomOut,
+  handleRotationFun,
+  isDisableRotate
 }) {
   const { t } = useTranslation();
   const filterPrefill =
@@ -73,7 +77,7 @@ function Header({
               allPages={allPages}
               changePage={changePage}
             />
-            {pdfUrl && alreadySign ? (
+            {isCompleted && alreadySign ? (
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
                   <div className="op-link op-link-primary no-underline text-[16px] font-semibold pr-[3px] pl-[5px]">
@@ -184,13 +188,7 @@ function Header({
                     ) : (
                       <div
                         data-tut="reactourThird"
-                        onClick={() => {
-                          if (!pdfUrl) {
-                            embedWidgetsData();
-                          } else if (isPdfRequestFiles) {
-                            embedWidgetsData();
-                          }
-                        }}
+                        onClick={() => embedWidgetsData()}
                         className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
                       >
                         {t("finish")}
@@ -207,15 +205,15 @@ function Header({
                       </DropdownMenu.Trigger>
                       <DropdownMenu.Portal>
                         <DropdownMenu.Content
-                          className="bg-white shadow-md rounded-full px-3 py-2"
+                          className="bg-white shadow-md rounded-md px-3 py-2"
                           sideOffset={5}
                         >
                           <DropdownMenu.Item
                             className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
                             onClick={() =>
                               handleDownloadPdf(
                                 pdfDetails,
-                                pdfUrl,
+                                pdfDetails[0]?.URL,
                                 setIsDownloading
                               )
                             }
@@ -226,6 +224,43 @@ function Header({
                             ></i>
                             <span className="font-[500]">{t("download")}</span>
                           </DropdownMenu.Item>
+                          {!isDisableRotate && (
+                            <>
+                              <DropdownMenu.Item
+                                className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
+                                onClick={() => handleRotationFun(90)}
+                              >
+                                <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                                <span className="font-[500]">
+                                  {t("rotate-right")}
+                                </span>
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Item
+                                className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
+                                onClick={() => handleRotationFun(-90)}
+                              >
+                                <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                                <span className="font-[500]">
+                                  {t("rotate-left")}
+                                </span>
+                              </DropdownMenu.Item>
+                            </>
+                          )}
+
+                          <DropdownMenu.Item
+                            className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
+                            onClick={() => clickOnZoomIn()}
+                          >
+                            <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
+                            <span className="font-[500]">{t("zoom-in")}</span>
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
+                            onClick={() => clickOnZoomOut()}
+                          >
+                            <i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px]"></i>
+                            <span className="font-[500]">{t("zoom-out")}</span>
+                          </DropdownMenu.Item>
                         </DropdownMenu.Content>
                       </DropdownMenu.Portal>
                     </DropdownMenu.Root>
@@ -423,9 +458,7 @@ function Header({
               <button
                 type="button"
                 className="op-btn op-btn-primary op-btn-sm  shadow"
-                onClick={() => {
-                  embedWidgetsData();
-                }}
+                onClick={() => embedWidgetsData()}
               >
                 {t("sign-now")}
               </button>
@@ -442,11 +475,7 @@ function Header({
               <button
                 type="button"
                 className="op-btn op-btn-primary op-btn-sm mr-[3px]"
-                onClick={() => {
-                  if (!pdfUrl) {
-                    embedWidgetsData();
-                  }
-                }}
+                onClick={() => embedWidgetsData()}
               >
                 {t("finish")}
               </button>

apps/OpenSign/src/components/pdf/PdfZoom.js

@@ -3,44 +3,37 @@ import { useTranslation } from "react-i18next";
 
 function PdfZoom(props) {
   const { t } = useTranslation();
-  const onClickZoomIn = () => {
-    props.setScale(props.scale + 0.1 * props.scale);
-    props.setZoomPercent(props.zoomPercent + 10);
-  };
-  const onClickZoomOut = () => {
-    if (props.zoomPercent > 0) {
-      if (props.zoomPercent === 10) {
-        props.setScale(1);
-      } else {
-        props.setScale(props.scale - 0.1 * props.scale);
-      }
-      props.setZoomPercent(props.zoomPercent - 10);
-    }
-  };
-  const handleReset = () => {
-    props.setScale(1);
-    props.setZoomPercent(0);
-  };
+
   return (
-    // md:mt-[41px] xl:mt-[63px]mt=[]
-    <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[50px] 2xl:mt-[63px]">
+    <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[43px] 2xl:mt-[63px]">
       <span
         className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        onClick={onClickZoomIn}
+        onClick={() => props.clickOnZoomIn()}
         title={t("zoom-in")}
       >
         <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
       </span>
-      <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        onClick={handleReset}
-        title={t("reset")}
-      >
-        <i className="fa-light fa-magnifying-glass-arrows-rotate text-gray-500 2xl:text-[30px]"></i>
-      </span>
+      {!props?.isDisableRotate && (
+        <>
+          <span
+            className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
+            onClick={() => props.handleRotationFun(90)}
+            title={t("rotate-right")}
+          >
+            <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i>
+          </span>
+          <span
+            className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
+            title={t("rotate-left")}
+            onClick={() => props.handleRotationFun(-90)}
+          >
+            <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px]"></i>
+          </span>
+        </>
+      )}
       <span
         className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
-        onClick={onClickZoomOut}
+        onClick={() => props.clickOnZoomOut()}
         style={{
           cursor: props.zoomPercent > 0 ? "pointer" : "default"
         }}