Doceditor: Added filling Session

packages/doceditor/public/locales/en/CompletedForm.json

@@ -1,7 +1,11 @@
 {
   "BackToRoom": "Back to room",
+  "CheckReadyForm": "Check ready form",
   "Description": "Your form completed and saved",
+  "DescriptionForAnonymous": "The filled PDF form is saved and available to you in the Complete folder. To check the status, contact the form owner providing the assigned number.",
+  "DescriptionForRegisteredUser": "The filled PDF form is saved and available to you in the Complete folder. To check the status, contact the form owner providing the assigned number.",
   "FillItOutAgain": "Fill it out again",
+  "FormCompletedSuccessfully": "Form completed successfully",
   "FormNumber": "Form number:",
   "Manager": "Manager:",
   "Title": "The form is completed"

packages/doceditor/src/app/(root)/completed-form/page.tsx

@@ -31,15 +31,15 @@ interface PageProps {
 }
 
 async function Page({ searchParams }: PageProps) {
-  const { share, fileId, fillingSessionId } = searchParams;
-
-  console.log({ fillingSessionId, fileId, share });
+  const { share, fillingSessionId, is_file } = searchParams;
 
   const session = await getFillingSession(fillingSessionId!, share);
 
-  console.log({ session });
+  const isShreFile = is_file === "true";
 
-  return <CompletedForm />;
+  return (
+    <CompletedForm session={session} share={share} isShreFile={isShreFile} />
+  );
 }
 
 export default Page;

packages/doceditor/src/components/completed-form/CompletedForm.styled.ts

@@ -62,6 +62,11 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
     color: ${(props) => props.theme.completedForm.linkColor};
   }
 
+  .completed-form__empty {
+    gap: 20px;
+    margin-top: 24px;
+  }
+
   @media ${mobile} {
     background-image: none;
 
@@ -92,7 +97,7 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
   }
 `;
 
-export const ButtonWrapper = styled.footer`
+export const ButtonWrapper = styled.footer<{ isShreFile: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -101,7 +106,7 @@ export const ButtonWrapper = styled.footer`
 
   margin-bottom: 24px;
   max-width: 600px;
-  width: 100%;
+  width: ${(props) => (props.isShreFile ? "298px" : "100%;")};
 
   @media ${mobile} {
     flex-wrap: wrap;
@@ -117,7 +122,7 @@ export const TextWrapper = styled.section`
   flex-direction: column;
   gap: 32px;
 
-  margin-top: 32px;
+  /* margin-top: 32px; */
 
   h1 {
     line-height: 28px;
@@ -163,7 +168,7 @@ export const MainContent = styled.main`
 
   gap: 16px;
 
-  margin-bottom: 32px;
+  margin: 32px 0;
 
   .completed-form__file {
     grid-area: form-file;

packages/doceditor/src/components/completed-form/CompletedForm.tsx

@@ -26,24 +26,39 @@
 "use client";
 
 import React from "react";
+import { decode } from "he";
 import Link from "next/link";
-// import Image from "next/image";
+import Image from "next/image";
 import { useTheme } from "styled-components";
 import { useTranslation } from "react-i18next";
 
-// import CompletedFormDarkIcon from "PUBLIC_DIR/images/completedForm/completed.form.icon.dark.svg?url";
-// import CompletedFormLightIcon from "PUBLIC_DIR/images/completedForm/completed.form.icon.light.svg?url";
+import CompletedFormDarkIcon from "PUBLIC_DIR/images/completedForm/completed.form.icon.dark.svg?url";
+import CompletedFormLightIcon from "PUBLIC_DIR/images/completedForm/completed.form.icon.light.svg?url";
 import PDFIcon from "PUBLIC_DIR/images/icons/32/pdf.svg";
 import DownloadIconUrl from "PUBLIC_DIR/images/download.react.svg?url";
+import LinkIconUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url";
 import MailIcon from "PUBLIC_DIR/images/icons/12/mail.svg";
 
 import { Text } from "@docspace/shared/components/text";
 import { getBgPattern, getLogoUrl } from "@docspace/shared/utils/common";
+import { isNullOrUndefined } from "@docspace/shared/utils/typeGuards";
 
 import { Button, ButtonSize } from "@docspace/shared/components/button";
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
 import { mobile, mobileMore } from "@docspace/shared/utils";
 import { Heading, HeadingLevel } from "@docspace/shared/components/heading";
+import { IconButton } from "@docspace/shared/components/icon-button";
+import { copyShareLink } from "@docspace/shared/utils/copy";
+
+import {
+  Avatar,
+  AvatarRole,
+  AvatarSize,
+} from "@docspace/shared/components/avatar";
+
+import FilesFilter from "@docspace/shared/api/files/filter";
+
+import useUpdateSearchParamId from "@/hooks/useUpdateSearchParamId";
 
 import {
   CompletedFormLayout,
@@ -56,32 +71,100 @@ import {
 } from "./CompletedForm.styled";
 
 import type { CompletedFormProps } from "./CompletedForm.types";
-import { IconButton } from "@docspace/shared/components/icon-button";
-import {
-  Avatar,
-  AvatarRole,
-  AvatarSize,
-} from "@docspace/shared/components/avatar";
 
-export const CompletedForm = ({}: CompletedFormProps) => {
+export const CompletedForm = ({
+  session,
+  share,
+  isShreFile,
+}: CompletedFormProps) => {
   const theme = useTheme();
   const { t } = useTranslation(["CompletedForm", "Common"]);
 
+  useUpdateSearchParamId(session?.response.originalForm.id.toString());
+
   const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme.isBase);
   const smallLogoUrl = getLogoUrl(WhiteLabelLogoType.LightSmall, !theme.isBase);
 
   const bgPattern = getBgPattern(theme.currentColorScheme?.id);
 
-  // const iconUrl = theme.isBase ? CompletedFormLightIcon : CompletedFormDarkIcon;
+  const iconUrl = theme.isBase ? CompletedFormLightIcon : CompletedFormDarkIcon;
 
-  // const onClose = () => {
-  //   window.close();
-  // };
+  if (!session)
+    return (
+      <CompletedFormLayout bgPattern={bgPattern}>
+        <picture className="completed-form__logo">
+          <source media={mobile} srcSet={smallLogoUrl} />
+          <source media={mobileMore} srcSet={logoUrl} />
+          <img src={logoUrl} alt="logo" />
+        </picture>
+        <Image
+          priority
+          src={iconUrl}
+          className="completed-form__icon"
+          alt="icon"
+          width={416}
+          height={200}
+        />
+        <TextWrapper className="completed-form__empty">
+          <Heading level={HeadingLevel.h1}>{t("CompletedForm:Title")}</Heading>
+          <Text noSelect>{t("CompletedForm:Description")}</Text>
+        </TextWrapper>
+      </CompletedFormLayout>
+    );
 
-  const formNumber = 312;
+  const {
+    response: { completedForm, formNumber, manager, originalForm, roomId },
+  } = session;
 
-  const email = "example@gmail.com";
-  const user = "User User";
+  const isAnonim = Boolean(share);
+
+  const getFolderUrl = (folderId: number, isAnonim: boolean): string => {
+    if (isNullOrUndefined(folderId)) return "";
+
+    const origin = window.location.origin;
+
+    const filter = FilesFilter.getDefault();
+
+    filter.folder = folderId.toString();
+
+    const path = isAnonim
+      ? `/rooms/share?key=${share}&`
+      : `/rooms/shared/${roomId}?`;
+
+    return `${origin}${path}${filter.toUrlParams()}`;
+  };
+
+  const setHistory = (url: string) => {
+    history.pushState({}, "", url);
+  };
+
+  const copyLinkFile = () => {
+    const url = getFolderUrl(completedForm.folderId, false);
+
+    copyShareLink(url);
+  };
+
+  const handleDownload = () => {
+    window.open(completedForm.viewUrl, "_self");
+  };
+
+  const gotoCompleteFolder = () => {
+    const url = getFolderUrl(completedForm.folderId, false);
+    setHistory(url);
+    window.location.replace(url);
+  };
+
+  const handleBackToRoom = () => {
+    const url = getFolderUrl(roomId, isAnonim);
+    setHistory(url);
+    window.location.replace(url);
+  };
+
+  const fillAgainSearchParams = new URLSearchParams({
+    fileId: originalForm.id.toString(),
+    ...(share ? { share } : {}),
+    ...(isShreFile ? { is_file: "true" } : {}),
+  });
 
   return (
     <CompletedFormLayout bgPattern={bgPattern}>
@@ -90,28 +173,27 @@ export const CompletedForm = ({}: CompletedFormProps) => {
         <source media={mobileMore} srcSet={logoUrl} />
         <img src={logoUrl} alt="logo" />
       </picture>
-      {/* <Image
-        priority
-        src={iconUrl}
-        className="completed-form__icon"
-        alt="icon"
-        width={416}
-        height={200}
-      /> */}
       <TextWrapper>
-        <Heading level={HeadingLevel.h1}>{t("CompletedForm:Title")}</Heading>
-        <Text noSelect>{t("CompletedForm:Description")}</Text>
+        <Heading level={HeadingLevel.h1}>
+          {t("CompletedForm:FormCompletedSuccessfully")}
+        </Heading>
+        <Text noSelect>
+          {isAnonim
+            ? t("CompletedForm:DescriptionForAnonymous")
+            : t("CompletedForm:DescriptionForRegisteredUser")}
+        </Text>
       </TextWrapper>
       <MainContent>
         <Box className="completed-form__file">
           <PDFIcon />
           <Heading className="completed-form__filename" level={HeadingLevel.h5}>
-            312 – leave application (7/8/2024 11:04 PM)
+            {completedForm.title}
           </Heading>
           <IconButton
             size={16}
             className="completed-form__download"
-            iconName={DownloadIconUrl}
+            iconName={isAnonim ? DownloadIconUrl : LinkIconUrl}
+            onClick={isAnonim ? handleDownload : copyLinkFile}
           />
         </Box>
         <FormNumberWrapper>
@@ -127,32 +209,41 @@ export const CompletedForm = ({}: CompletedFormProps) => {
               className="manager__avatar"
               size={AvatarSize.medium}
               role={AvatarRole.manager}
-              source={""}
+              source={manager.avatar}
             />
             <Heading level={HeadingLevel.h3} className="manager__user-name">
-              {user}
+              {decode(manager.displayName)}
             </Heading>
-            <Link className="manager__mail link" href={`mailto:${email}`}>
+            <Link
+              className="manager__mail link"
+              href={`mailto:${manager.email}`}
+            >
               <MailIcon />
-              {email}
+              {manager.email}
             </Link>
           </Box>
         </ManagerWrapper>
       </MainContent>
-      <ButtonWrapper>
+      <ButtonWrapper isShreFile={isShreFile}>
         <Button
           scale
           primary
           size={ButtonSize.medium}
-          label={t("Common:Download")}
-        />
-        <Button
-          scale
-          size={ButtonSize.medium}
-          label={t("CompletedForm:BackToRoom")}
+          label={
+            isAnonim ? t("Common:Download") : t("CompletedForm:CheckReadyForm")
+          }
+          onClick={isAnonim ? handleDownload : gotoCompleteFolder}
         />
+        {!isShreFile && (
+          <Button
+            scale
+            size={ButtonSize.medium}
+            label={t("CompletedForm:BackToRoom")}
+            onClick={handleBackToRoom}
+          />
+        )}
       </ButtonWrapper>
-      <Link className="link" href="#">
+      <Link className="link" href={`/?${fillAgainSearchParams.toString()}`}>
         {t("CompletedForm:FillItOutAgain")}
       </Link>
     </CompletedFormLayout>

packages/doceditor/src/components/completed-form/CompletedForm.types.ts

@@ -24,8 +24,23 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { TFile } from "@docspace/shared/api/files/types";
+import { TUser } from "@docspace/shared/api/people/types";
+
 export type CompletedFormLayoutProps = {
   bgPattern: string;
 };
 
-export type CompletedFormProps = {};
+export type CompletedFormProps = {
+  session?: {
+    response: {
+      completedForm: TFile;
+      manager: TUser;
+      originalForm: TFile;
+      formNumber: number;
+      roomId: number;
+    };
+  };
+  isShreFile: boolean;
+  share?: string;
+};

packages/doceditor/src/hooks/useUpdateSearchParamId.ts

@@ -2,7 +2,7 @@ import React from "react";
 
 const useUpdateSearchParamId = (
   fileId: string | undefined,
-  hash: string | undefined,
+  hash?: string | undefined,
 ) => {
   React.useLayoutEffect(() => {
     if (!fileId) return;
@@ -24,4 +24,3 @@ const useUpdateSearchParamId = (
 };
 
 export default useUpdateSearchParamId;
-