Slides upload WIP

Author: marcoacierno

frontend/src/components/cfp-form/index.tsx

@@ -29,6 +29,7 @@ import {
 } from "../public-profile-card";
 import { AboutYouSection } from "./about-you-section";
 import { AvailabilitySection } from "./availability-section";
+import { MaterialsSection } from "./materials-section";
 import { ProposalSection } from "./proposal-section";
 
 export type CfpFormFields = ParticipantFormFields & {
@@ -46,6 +47,7 @@ export type CfpFormFields = ParticipantFormFields & {
   shortSocialSummary: string;
   acceptedPrivacyPolicy: boolean;
   speakerAvailabilities: { [time: number]: null | string };
+  materials: any[];
 };
 
 export type SubmissionStructure = {
@@ -331,6 +333,15 @@ export const CfpForm = ({
 
       <Spacer size="medium" />
 
+      <MaterialsSection
+        formState={formState}
+        getErrors={getErrors}
+        formOptions={formOptions}
+        conferenceData={conferenceData}
+      />
+
+      <Spacer size="medium" />
+
       <PublicProfileCard
         me={participantData.me}
         formOptions={formOptions}

frontend/src/components/cfp-form/materials-section.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  CardPart,
+  Grid,
+  Heading,
+  MultiplePartsCard,
+  Spacer,
+  Text,
+} from "@python-italia/pycon-styleguide";
+import { useCallback } from "react";
+import { FormattedMessage } from "react-intl";
+import type { FormState, Inputs, StateErrors } from "react-use-form-state";
+import type { CfpFormQuery } from "~/types";
+import type { CfpFormFields } from ".";
+import { FileInput } from "../file-input";
+
+type Props = {
+  conferenceData: CfpFormQuery;
+  formState: FormState<CfpFormFields, StateErrors<CfpFormFields>>;
+  formOptions: Inputs<CfpFormFields>;
+  getErrors: (field: keyof CfpFormFields) => string[] | null;
+};
+
+export const MaterialsSection = ({
+  conferenceData,
+  formState,
+  getErrors,
+  formOptions,
+}: Props) => {
+  const { raw } = formOptions;
+  const materials = formState.values.materials ?? [];
+
+  const onAdd = useCallback(() => {
+    const newMaterials = [...materials, {}];
+    formState.setField("materials", newMaterials);
+  }, [formState]);
+
+  return (
+    <MultiplePartsCard>
+      <CardPart contentAlign="left">
+        <Heading size={3}>
+          <FormattedMessage id="cfp.materials.title" />
+        </Heading>
+      </CardPart>
+
+      <CardPart background="milk" contentAlign="left">
+        <Text size={3}>
+          <FormattedMessage id="cfp.materials.description" />
+        </Text>
+        <Grid cols={1} gap="medium">
+          {materials.map((material, index) => (
+            <FileInput
+              key={index}
+              {...raw("materials")}
+              type="proposal_material"
+              errors={getErrors("materials")}
+            />
+          ))}
+          <div>
+            <Button size="small" onClick={onAdd}>
+              <FormattedMessage id="cfp.materials.add" />
+            </Button>
+          </div>
+        </Grid>
+      </CardPart>
+    </MultiplePartsCard>
+  );
+};

frontend/src/locale/index.ts

@@ -663,7 +663,8 @@ Click the box to change. If left empty, we will assume you are available.`,
     "orderInformation.invalidFiscalCode": "Fiscal code not valid",
     "orderInformation.pec": "PEC",
     "orderInformation.sdi": "SDI",
-    "orderInformation.invalidSDI": "SDI must be 7 characters long (6 for Italian PA)",
+    "orderInformation.invalidSDI":
+      "SDI must be 7 characters long (6 for Italian PA)",
 
     "orderQuestions.heading": "Order questions",
     "orderQuestions.attendeeGivenName": "Attendee Given name",
@@ -1002,6 +1003,10 @@ If this new timing doesn't work for you, please don't hesitate to let us know be
 
     "streaming.qa": "Ask Questions",
 
+    "cfp.materials.title": "Materials",
+    "cfp.materials.description":
+      "Upload here the slides or other materials you want to share.",
+
     "talk.bookToAttend":
       "This event has limited capacity, you need to book a seat to attend.",
     "talk.bookCta": "Book now",
@@ -1447,7 +1452,8 @@ The sooner you buy your ticket, the more you save!`,
     "orderInformation.invalidFiscalCode": "Codice fiscale non valido",
     "orderInformation.pec": "PEC",
     "orderInformation.sdi": "SDI",
-    "orderInformation.invalidSDI": "Il codice SDI deve essere di 7 caratteri (6 per una PA)",
+    "orderInformation.invalidSDI":
+      "Il codice SDI deve essere di 7 caratteri (6 per una PA)",
 
     "orderQuestions.heading": "Domande aggiuntive",
     "orderQuestions.attendeeName": "Nome partecipante",