fix(RV-428): Fix change upload flow to reflect UI

[knguyenrise8]

Description

fix change upload button

Screenshots (if applicable)

Related Issues

[Link any related issues or tasks from your project management system.]

Checklist

• The title of this PR is descriptive and concise.
• My changes follow the style guidelines of this project.
• I have added or updated test cases to cover my changes.
• I've let the team know about this PR by linking it in the review channel

[marycrawford]

LG, just have a question regarding the error handling logic in case the file that is uploaded is not a pdf. Are we considering that?

[marycrawford]

The setHasError is set to false here. Is there a try/catch logic that will handle errors in case the file that is uploaded is not a pdf?

[knguyenrise8]

handled outside in the extractProcess page

    try {
      setIsLoading(true);
      const newQueries = pdfs
        .map((pdf) => {
          return pdf.images.map((page, index) => {
            const selectedTemplateName = selectedTemplates.find(
              (temp) => temp.fileName === pdf.file,
            )?.templateName;
            return {
              pdfName: pdf.file,
              fieldNames: templates.find(
                (template) => template.name === selectedTemplateName,
              )?.pages[index].fieldNames as Field[],
              sourceImage: page,
              templateImage: templates.find(
                (template) => template.name === selectedTemplateName,
              )?.pages[index].templateImage as string,
            };
          });
        })
        .map((perBatch) =>
          perBatch.map(async (args) => ({
            name: args.pdfName,
            resp: await ImageToText({
              sourceImage: args.sourceImage,
              templateImage: args.templateImage,
              fieldNames: args.fieldNames,
            }),
          })),
        )
        .flat();
      const new_responses = await Promise.all(
        newQueries.map(async (query) => ({
          name: (await query).name,
          resp: (await query).resp,
        })),
      );
      const arrResults: { [key: string]: IResults } = {};

      new_responses.forEach((response) => {
        if (response.name in arrResults) {
          Object.keys(response.resp as ImageToTextResponse).forEach((key) => {
            arrResults[response.name][key] = {
              text: response.resp ? response.resp[key][0] : "",
              confidence: response.resp ? response.resp[key][1] : 0,
            };
          });
        } else {
          arrResults[response.name] = {};
          Object.keys(response.resp as ImageToTextResponse).forEach((key) => {
            arrResults[response.name][key] = {
              text: response.resp ? response.resp[key][0] : "",
              confidence: response.resp ? response.resp[key][1] : 0,
            };
          });
        }
      });

      const arrTransformedResponses: Submission[] = Object.keys(arrResults).map(
        (key) => {
          const transformedResponses: Submission = {
            template_name: templates[0].name,
            template_image: templates[0].pages[0].templateImage,
            file_name: key,
            file_image: pdfs.find((pdf) => pdf.file === key)
              ?.images[0] as string,
            results: arrResults[key],
          };
          return transformedResponses;
        },
      );

      localStorage.setItem(
        "arr_submissions",
        JSON.stringify(arrTransformedResponses),
      );

      // Update loading state and navigate
      setIsLoading(false);
      navigate("/extract/review");
    } catch (error) {
      console.error("Error processing templates:", error);
      setIsLoading(false);
      navigate("/extract/upload");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [navigate]);

[knguyenrise8]

we navigate back to the start of the flow

[knguyenrise8]

we def need to get design/product for the app when the user uploads not a pdf

[knguyenrise8]

for now i just gated the input to only take in pdfs

[marycrawford]

Awesome!

[marycrawford]

LGTM

[marycrawford]

Awesome!