Merge pull request #99 from kleros/feat/file-uploader-message

Feat/file uploader message

Author: jaybuidl

web/package.json

@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.16.3",
-    "@kleros/kleros-app": "^2.0.1",
+    "@kleros/kleros-app": "^2.0.2",
     "@kleros/ui-components-library": "^2.19.0",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",

web/src/pages/NewTransaction/Terms/Deliverable/index.tsx

@@ -8,6 +8,9 @@ import { responsiveSize } from "styles/responsiveSize";
 import NavigationButtons from "../../NavigationButtons";
 import TokenTransaction from "../Payment/TokenTransaction";
 import Header from "pages/NewTransaction/Header";
+import { Roles, useAtlasProvider } from "@kleros/kleros-app";
+import { getFileUploaderMsg } from "src/utils";
+import useIsDesktop from "hooks/useIsDesktop";
 
 const Container = styled.div`
   display: flex;
@@ -32,7 +35,12 @@ const StyledTextArea = styled(Textarea)`
 
 const StyledFileUploader = styled(FileUploader)`
   width: 84vw;
-  margin-bottom: ${responsiveSize(72, 52)};
+  margin-bottom: ${responsiveSize(130, 72)};
+
+  small {
+    white-space: pre-line;
+    text-align: start;
+  }
 
   ${landscapeStyle(
     () => css`
@@ -54,7 +62,9 @@ const Deliverable: React.FC = () => {
     buyerAddress,
     setBuyerAddress,
   } = useNewTransactionContext();
+  const { roleRestrictions } = useAtlasProvider();
 
+  const isDesktop = useIsDesktop();
   const handleWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
     setDeliverableText(event.target.value);
   };
@@ -67,8 +77,9 @@ const Deliverable: React.FC = () => {
   };
 
   const fileFootMessage =
-    "You can attach additional information as a PDF file. Important: the above description must reference " +
-    "the relevant parts of the file content.";
+    "You can attach additional information here. Important: the above description must reference " +
+    "the relevant parts of the file content.\n" +
+    (getFileUploaderMsg(Roles.Policy, roleRestrictions) ?? "");
 
   return (
     <Container>
@@ -80,7 +91,11 @@ const Deliverable: React.FC = () => {
             onChange={handleWrite}
             placeholder="eg. I should receive a website created in React with the following specification: x,y,z."
           />
-          <StyledFileUploader callback={handleAttachFile} variant="info" msg={fileFootMessage} />
+          <StyledFileUploader
+            callback={handleAttachFile}
+            variant={isDesktop ? "info" : undefined}
+            msg={fileFootMessage}
+          />
           <NavigationButtons prevRoute="/new-transaction/title" nextRoute="/new-transaction/payment" />
         </>
       ) : (

web/src/utils/index.ts

@@ -1,6 +1,37 @@
+import { Roles } from "@kleros/kleros-app";
+
 export const isUndefined = (maybeObject: any): maybeObject is undefined => typeof maybeObject === "undefined";
 
 /**
  * Checks if a string is empty or contains only whitespace.
  */
 export const isEmpty = (str: string): boolean => str.trim() === "";
+
+type Role = {
+  name: string;
+  restriction: {
+    maxSize: number;
+    allowedMimeTypes: string[];
+  };
+};
+
+export const getFileUploaderMsg = (role: Roles, roleRestrictions?: Role[]) => {
+  if (!roleRestrictions) return;
+  const restrictions = roleRestrictions.find((supportedRoles) => Roles[supportedRoles.name] === role);
+
+  if (!restrictions) return;
+
+  const typesString = restrictions.restriction.allowedMimeTypes
+    .map((type) => {
+      const [prefix, suffix] = type.split("/");
+      if (!suffix) return prefix ?? null;
+
+      return suffix === "*" ? prefix : suffix;
+    })
+    .join(", ");
+
+  return `Allowed file types: [${typesString}], Max allowed size: ${(
+    restrictions.restriction.maxSize /
+    (1024 * 1024)
+  ).toFixed(2)} MB.`;
+};

yarn.lock

@@ -4474,7 +4474,7 @@ __metadata:
     "@cyntler/react-doc-viewer": "npm:^1.16.3"
     "@graphql-codegen/cli": "npm:^4.0.1"
     "@graphql-codegen/client-preset": "npm:^4.1.0"
-    "@kleros/kleros-app": "npm:^2.0.1"
+    "@kleros/kleros-app": "npm:^2.0.2"
     "@kleros/ui-components-library": "npm:^2.19.0"
     "@sentry/react": "npm:^7.93.0"
     "@sentry/tracing": "npm:^7.93.0"
@@ -4529,9 +4529,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/kleros-app@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@kleros/kleros-app@npm:2.0.1"
+"@kleros/kleros-app@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@kleros/kleros-app@npm:2.0.2"
   dependencies:
     jose: "npm:^5.9.6"
   peerDependencies:
@@ -4542,7 +4542,7 @@ __metadata:
     react-dom: ^18.3.1
     viem: ^2.21.42
     wagmi: ^2.13.0
-  checksum: 10/a193e49fe82738eaa7df3b82857fd74a5407e6ed166edeacd2352bbd149a49ea3cfde98f130fe0473f006761260cbf2475bc4fa138ad05650540eec43b9755d1
+  checksum: 10/89cf0536fed4bbb887772daa529d7cad209cea0e5105bcd366fe5e4bc7c5c14fca21aa201ba4d848c7e8addd3fc4921ac54e237afe2a5b7224c9cd219f72e08b
   languageName: node
   linkType: hard