WIP

pythonitalia · Aug 15, 2024 · d375b89 · d375b89
1 parent f55a94b
commit d375b89
Show file tree

Hide file tree

Showing 8 changed files with 502 additions and 0 deletions.
diff --git a/frontend/src/components/my-grant-profile-page-handler/index.tsx b/frontend/src/components/my-grant-profile-page-handler/index.tsx
@@ -0,0 +1,42 @@
+import { Heading, Page, Section } from "@python-italia/pycon-styleguide";
+import { FormattedMessage } from "react-intl";
+
+import { useMyProfileWithGrantQuery } from "~/types";
+
+import { MetaTags } from "../meta-tags";
+import { NoGrant } from "../my-grant-profile-page-handler/no-grant";
+import { MyGrant } from "./my-grant";
+
+export const MyGrantProfilePageHandler = () => {
+  const {
+    data: {
+      me,
+      conference: { deadline },
+    },
+    error,
+  } = useMyProfileWithGrantQuery({
+    variables: {
+      conference: process.env.conferenceCode,
+    },
+  });
+  console.log(error);
+  console.log("HOLA");
+  const grant = me?.grant;
+  return (
+    <Page endSeparator={false}>
+      <FormattedMessage id="profile.myGrant">
+        {(text) => <MetaTags title={text} />}
+      </FormattedMessage>
+
+      <Section background="green">
+        <Heading size="display2">
+          <FormattedMessage id="profile.myGrant" />
+        </Heading>
+      </Section>
+      <Section>
+        {grant && <MyGrant grant={grant} />}
+        {!grant && <NoGrant deadline={deadline} />}
+      </Section>
+    </Page>
+  );
+};
diff --git a/frontend/src/components/my-grant-profile-page-handler/my-grant.tsx b/frontend/src/components/my-grant-profile-page-handler/my-grant.tsx
@@ -0,0 +1,217 @@
+import {
+  Button,
+  CardPart,
+  Grid,
+  GridColumn,
+  Heading,
+  HorizontalStack,
+  Link,
+  MultiplePartsCard,
+  Spacer,
+  Tag,
+  Text,
+  VerticalStack,
+} from "@python-italia/pycon-styleguide";
+import { FormattedMessage } from "react-intl";
+
+import { useCurrentLanguage } from "~/locale/context";
+import { Status } from "~/types";
+import type { MyProfileWithGrantQuery } from "~/types";
+
+import { useCountries } from "~/helpers/use-countries";
+import { createHref } from "../link";
+
+type Props = {
+  grant: MyProfileWithGrantQuery["me"]["grant"];
+};
+
+export const MyGrant = ({ grant }: Props) => {
+  const language = useCurrentLanguage();
+  const countries = useCountries();
+
+  const isToConfirm = grant.status === Status.WaitingForConfirmation;
+
+  const getCountryLabel = (value: string): string | undefined => {
+    const country = countries.find((country) => country.value === value);
+    return country ? country.label : undefined;
+  };
+
+  const grantStatusColors = {
+    approved: "green",
+    confirmed: "green",
+    did_not_attend: "red",
+    pending: "gray",
+    refused: "red",
+    rejected: "red",
+    waiting_for_confirmation: "yellow",
+    waiting_list: "coral",
+    waiting_list_maybe: "coral",
+  };
+
+  return (
+    <>
+      <Grid cols={12}>
+        <GridColumn colSpan={4}>
+          <MultiplePartsCard>
+            <CardPart contentAlign="left" background="milk">
+              <Title>status</Title>
+              <Spacer size="small" />
+              <Tag color={grantStatusColors[grant.status]}>
+                <FormattedMessage
+                  id={`profile.myGrant.status.${grant.status}`}
+                />
+              </Tag>
+            </CardPart>
+
+            <CardPart contentAlign="left" background="milk">
+              <Title>
+                <FormattedMessage id="profile.myGrant.grantType" />
+              </Title>
+              <Spacer size="small" />
+              <Text color="none">
+                <FormattedMessage
+                  id={`grants.form.fields.grantType.values.${grant.grantType}`}
+                />
+              </Text>
+            </CardPart>
+
+            <CardPart contentAlign="left" background="milk">
+              <Title>
+                <FormattedMessage id="profile.myGrant.appliedFor" />
+              </Title>
+
+              <Spacer size="small" />
+              <Text color="none">
+                <FormattedMessage id="profile.myGrant.appliedFor.ticket" />
+              </Text>
+              {grant.needsFundsForTravel && (
+                <>
+                  <Spacer size="small" />
+                  <Text color="none">
+                    <FormattedMessage id="profile.myGrant.appliedFor.travel" />
+                  </Text>
+                </>
+              )}
+              {grant.needAccommodation && (
+                <>
+                  <Spacer size="small" />
+                  <Text color="none">
+                    <FormattedMessage id="profile.myGrant.appliedFor.accommodation" />
+                  </Text>
+                </>
+              )}
+            </CardPart>
+          </MultiplePartsCard>
+
+          <Spacer size="medium" />
+
+          <VerticalStack alignItems="start">
+            {isToConfirm && (
+              <Button
+                href={createHref({
+                  path: "/grants/reply",
+                  locale: language,
+                })}
+                size="small"
+                variant="secondary"
+              >
+                <FormattedMessage id="profile.myGrant.confirm" />
+              </Button>
+            )}
+
+            <Button
+              href={createHref({
+                path: "/grants/edit",
+                locale: language,
+              })}
+              size="small"
+              variant="secondary"
+            >
+              <FormattedMessage id="profile.myGrant.edit" />
+            </Button>
+          </VerticalStack>
+        </GridColumn>
+
+        <GridColumn colSpan={8}>
+          <Title>
+            <FormattedMessage id="profile.myGrant.nextSteps" />
+          </Title>
+          <Spacer size="small" />
+          <Text color="none">
+            <FormattedMessage
+              id={`profile.myGrant.status.${grant.status}.nextSteps`}
+            />
+          </Text>
+          <Spacer size="2xl" />
+
+          <Grid cols={3}>
+            <GridColumn>
+              <Title>
+                <FormattedMessage id="grants.form.fields.name" />
+              </Title>
+              <Spacer size="small" />
+              <Text>{grant.name}</Text>
+            </GridColumn>
+
+            <GridColumn>
+              <Title>
+                <FormattedMessage id="grants.form.fields.fullName" />
+              </Title>
+              <Spacer size="small" />
+              <Text>{grant.fullName}</Text>
+            </GridColumn>
+
+            <GridColumn>
+              <Title>
+                <FormattedMessage id="grants.form.fields.ageGroup" />
+              </Title>
+              <Spacer size="small" />
+
+              <Text>
+                <FormattedMessage
+                  id={`grants.form.fields.ageGroup.values.${grant.ageGroup}`}
+                />
+              </Text>
+            </GridColumn>
+
+            <GridColumn>
+              <Title>
+                <FormattedMessage id="grants.form.fields.travellingFrom" />
+              </Title>
+              <Spacer size="small" />
+              <Text>{getCountryLabel(grant.travellingFrom)}</Text>
+            </GridColumn>
+
+            <GridColumn>
+              <Title>
+                <FormattedMessage id="grants.form.fields.gender" />
+              </Title>
+              <Spacer size="small" />
+              <Text>
+                <FormattedMessage id={`profile.gender.${grant.gender}`} />
+              </Text>
+            </GridColumn>
+
+            <GridColumn>
+              <Title>
+                <FormattedMessage id="grants.form.fields.occupation" />
+              </Title>
+              <Spacer size="small" />
+              <Text>
+                <FormattedMessage
+                  id={`grants.form.fields.occupation.values.${grant.occupation}`}
+                />
+              </Text>
+            </GridColumn>
+          </Grid>
+        </GridColumn>
+      </Grid>
+    </>
+  );
+};
+
+const Title = ({ children }: { children: React.ReactNode }) => (
+  <Text size="label3" uppercase weight="strong">
+    {children}
+  </Text>
+);
diff --git a/frontend/src/components/my-grant-profile-page-handler/no-grant.tsx b/frontend/src/components/my-grant-profile-page-handler/no-grant.tsx
@@ -0,0 +1,55 @@
+import {
+  Button,
+  Container,
+  Heading,
+  Spacer,
+  Text,
+} from "@python-italia/pycon-styleguide";
+import { FormattedMessage } from "react-intl";
+
+import { useCurrentLanguage } from "~/locale/context";
+import { DeadlineStatus, type MyProfileWithSubmissionsQuery } from "~/types";
+
+import { createHref } from "../link";
+
+type Props = {
+  deadline: MyProfileWithSubmissionsQuery["conference"]["deadline"];
+};
+
+export const NoGrant = ({ deadline }: Props) => {
+  const deadlineStatus = deadline.status;
+  const language = useCurrentLanguage();
+
+  return (
+    <Container size="medium" center={false} noPadding>
+      <Heading size={2}>
+        <FormattedMessage id="profile.myGrant.noGrant.heading" />
+      </Heading>
+      <Spacer size="small" />
+      <Text size={2}>
+        {deadlineStatus === DeadlineStatus.HappeningNow && (
+          <FormattedMessage id="profile.myGrant.noGrant.body.canSubmit" />
+        )}
+        {deadlineStatus === DeadlineStatus.InThePast && (
+          <FormattedMessage id="profile.myGrant.noGrant.body.closed" />
+        )}
+        {deadlineStatus === DeadlineStatus.InTheFuture && (
+          <FormattedMessage id="profile.myGrant.noGrant.body.openingSoon" />
+        )}
+      </Text>
+      <Spacer size="large" />
+      {(deadlineStatus === DeadlineStatus.HappeningNow ||
+        deadlineStatus === DeadlineStatus.InTheFuture) && (
+        <Button
+          href={createHref({
+            path: "/grants",
+            locale: language,
+          })}
+          variant="secondary"
+        >
+          <FormattedMessage id="profile.myGrant.noGrant.submitGrant" />
+        </Button>
+      )}
+    </Container>
+  );
+};
diff --git a/frontend/src/components/my-grant-profile-page-handler/profile-with-my-grant.graphql b/frontend/src/components/my-grant-profile-page-handler/profile-with-my-grant.graphql
@@ -0,0 +1,31 @@
+query MyProfileWithGrant($conference: String!) {
+  me {
+    id
+    name
+    fullName
+    email
+
+    grant(conference: $conference) {
+      id
+      status
+      name
+      fullName
+      ageGroup
+      travellingFrom
+      gender
+      occupation
+
+      needVisa
+      needsFundsForTravel
+      needAccommodation
+      grantType
+    }
+  }
+  conference(code: $conference) {
+    id
+    deadline(type: "grants") {
+      id
+      status
+    }
+  }
+}
diff --git a/frontend/src/components/profile-page-handler/index.tsx b/frontend/src/components/profile-page-handler/index.tsx
@@ -119,6 +119,16 @@ export const ProfilePageHandler = () => {
       icon: "circle",
       iconBackground: "purple",
     },
+    {
+      id: "grants",
+      link: createHref({
+        path: "/profile/my-grant",
+        locale: language,
+      }),
+      label: <FormattedMessage id="profile.myGrant" />,
+      icon: "star",
+      iconBackground: "yellow",
+    },
     isStaffOrSponsor
       ? {
           id: "sponsors",

diff --git a/frontend/src/components/schedule-event-detail/index.tsx b/frontend/src/components/schedule-event-detail/index.tsx
@@ -131,6 +131,7 @@ export const ScheduleEventDetail = ({
           </>
         )}
       </Section>
+
       <Section>
         <Grid cols={12}>
           <GridColumn colSpan={4}>