Client:Components:CreatedPDFFormDialog Added checkbox and changed functionality

packages/client/public/locales/en/PDFFormDialog.json

@@ -2,7 +2,7 @@
   "PDFFormDialogTitle": "Ready-to-fill-out PDF form",
   "PDFFormEditDialogDescription": "Do you want to switch to the form editing mode? Please note that the form will no longer be available for filling out and you will need to click the Start filling button again after editing to fill it out.",
   "PDFFormEditDialogTitle": "Form editing",
-  "PDFFormInviteDescription": "Your PDF form is ready to be filled out. Copy public link to start the form filling process or Invite other users to this room.",
+  "PDFFormInviteDescription": "Your PDF form is ready to be filled out. Start collecting completed form copies from other users.",
   "PDFFormIsReadyToast": "PDF form <1>{{filename}}</1> is ready to be filled out.",
-  "PDFFormSuccessfullyCreatedDescription": "Your PDF form is ready to be filled out. Start collecting completed form copies from other users."
+  "PDFFormSuccessfullyCreatedDescription": "Your PDF form is ready to be filled out. Copy public link to start the form filling process or Invite other users to this room."
 }

packages/client/src/components/FilesPanels/index.js

@@ -139,7 +139,7 @@ const Panels = (props) => {
 
   const [createPDFFormFile, setCreatePDFFormFile] = useState({
     visible: false,
-    data: null,
+    file: null,
     onClose: null,
   });
 
@@ -174,9 +174,9 @@ const Panels = (props) => {
      * @param {CustomEvent} event
      */
     (event) => {
-      const { file, isFill, isFirst } = event.detail;
+      const { file, show } = event.detail;
 
-      if (!isFirst) {
+      if (!show) {
         return toastr.success(
           <Trans
             ns="PDFFormDialog"
@@ -189,12 +189,9 @@ const Panels = (props) => {
 
       setCreatePDFFormFile({
         visible: true,
-        data: {
-          file,
-          isFill,
-        },
+        file,
         onClose: () => {
-          setCreatePDFFormFile({ visible: false, onClose: null, data: null });
+          setCreatePDFFormFile({ visible: false, onClose: null, file: null });
         },
       });
     },

packages/client/src/components/dialogs/CreatedPDFFormDialog/CreatedPDFFormDialog.styled.ts

@@ -34,4 +34,8 @@ export const Wrapper = styled.div`
     align-self: center;
     width: 100%;
   }
+
+  .created-pdf__checkbox {
+    margin-top: 16px;
+  }
 `;

packages/client/src/components/dialogs/CreatedPDFFormDialog/CreatedPDFFormDialog.tsx

@@ -36,58 +36,47 @@ import {
   ModalDialog,
   ModalDialogType,
 } from "@docspace/shared/components/modal-dialog";
+import { Checkbox } from "@docspace/shared/components/checkbox";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
+import { PDF_FORM_DIALOG_KEY } from "@docspace/shared/constants";
 
 import { Wrapper } from "./CreatedPDFFormDialog.styled";
-import type { CreatedPDFFormDialogProps } from "./CreatedPDFFormDialog.types";
+import type {
+  CreatedPDFFormDialogProps,
+  InjectedCreatedPDFFormDialogProps,
+} from "./CreatedPDFFormDialog.types";
 
 export const CreatedPDFFormDialog = inject<TStore>(
-  ({ contextOptionsStore, selectedFolderStore }) => {
-    const { onClickLinkFillForm, onCreateAndCopySharedLink } =
-      contextOptionsStore;
+  ({ contextOptionsStore }) => {
+    const { onCopyLink } = contextOptionsStore;
 
-    const { id, roomType, security } = selectedFolderStore;
-
-    return {
-      id,
-      roomType,
-      security,
-      onCreateAndCopySharedLink,
-      onClickLinkFillForm,
-    };
+    return { onCopyLink };
   },
 )(
   observer(
     ({
-      data,
-      roomType,
-      security,
-      id,
-      onCreateAndCopySharedLink,
-      onClickLinkFillForm,
+      file,
       onClose,
+      onCopyLink,
       visible,
-    }: CreatedPDFFormDialogProps) => {
+    }: CreatedPDFFormDialogProps & InjectedCreatedPDFFormDialogProps) => {
       const { t } = useTranslation(["PDFFormDialog", "Common"]);
       const theme = useTheme();
 
       const onSubmit = () => {
-        if (data.isFill) {
-          onClickLinkFillForm?.(data.file);
-        } else if (Boolean(roomType) && security?.EditAccess) {
-          onCreateAndCopySharedLink?.({ id }, t);
-        }
-
+        onCopyLink(file);
         onClose();
       };
 
-      const description = data.isFill
-        ? t("PDFFormSuccessfullyCreatedDescription")
-        : t("PDFFormInviteDescription");
+      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        localStorage.setItem(
+          PDF_FORM_DIALOG_KEY,
+          event.target.checked.toString(),
+        );
+      };
 
-      const primaryButtonLabel = data.isFill
-        ? t("Common:Fill")
-        : t("Common:CopyPublicLink");
+      const description = t("PDFFormSuccessfullyCreatedDescription");
+      const primaryButtonLabel = t("Common:CopyPublicLink");
 
       return (
         <ModalDialog
@@ -101,6 +90,11 @@ export const CreatedPDFFormDialog = inject<TStore>(
             <Wrapper>
               {theme.isBase ? <HeaderIcon /> : <HeaderDarkIcon />}
               <span>{description}</span>
+              <Checkbox
+                className="created-pdf__checkbox"
+                onChange={handleOnChange}
+                label={t("Common:DontShowAgain")}
+              />
             </Wrapper>
           </ModalDialog.Body>
           <ModalDialog.Footer>
@@ -126,4 +120,4 @@ export const CreatedPDFFormDialog = inject<TStore>(
       );
     },
   ),
-);
+) as unknown as React.FC<CreatedPDFFormDialogProps>;

packages/client/src/components/dialogs/CreatedPDFFormDialog/CreatedPDFFormDialog.types.ts

@@ -26,20 +26,12 @@
 
 import type { TFile } from "@docspace/shared/api/files/types";
 
-export interface CreatedPDFFormDialogProps
-  extends Partial<
-      Pick<TStore["selectedFolderStore"], "id" | "roomType" | "security">
-    >,
-    Partial<
-      Pick<
-        TStore["contextOptionsStore"],
-        "onCreateAndCopySharedLink" | "onClickLinkFillForm"
-      >
-    > {
-  data: {
-    file: TFile;
-    isFill: boolean;
-  };
+export interface CreatedPDFFormDialogProps {
+  file: TFile;
+
   onClose: VoidFunction;
   visible: boolean;
 }
+
+export interface InjectedCreatedPDFFormDialogProps
+  extends Pick<TStore["contextOptionsStore"], "onCopyLink"> {}

packages/client/src/store/FilesStore.js

@@ -693,18 +693,15 @@ class FilesStore {
 
     const localKey = `${PDF_FORM_DIALOG_KEY}-${this.userStore.user.id}`;
 
-    const isFirst = JSON.parse(localStorage.getItem(localKey) ?? "true");
+    const show = !JSON.parse(localStorage.getItem(localKey) ?? "true");
 
     const event = new CustomEvent(Events.CREATE_PDF_FORM_FILE, {
       detail: {
         file,
-        isFill: !option.isOneMember,
-        isFirst,
+        show,
       },
     });
 
-    if (isFirst) localStorage.setItem(localKey, "false");
-
     window?.dispatchEvent(event);
   };
 

public/locales/en/Common.json

@@ -135,6 +135,7 @@
   "DomainIpAddress": "Domains as IP addresses are not supported",
   "Done": "Done",
   "DontAskAgain": "Don't ask file name again on creation",
+  "DontShowAgain": "Don't show again",
   "Download": "Download",
   "DownloadApps": "Download applications",
   "DropzoneTitleExsts": "(JPG or PNG)",
@@ -295,8 +296,8 @@
   "NotFoundUsersDescription": "No users match your search. Please adjust your search parameters or clear the search field to view the full list of users.",
   "NotSupportedFormat": "Sorry, this file format isn't supported",
   "OFORMsGallery": "Form Gallery",
-  "OKButton": "OK",
   "OkButton": "Ok",
+  "OKButton": "OK",
   "Or": "or",
   "orContinueWith": "or continue with",
   "OtherLabel": "Other",