WIP

pythonitalia · Aug 16, 2024 · 867df62 · 867df62
1 parent f55a94b
commit 867df62
Show file tree

Hide file tree

Showing 8 changed files with 620 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,43 @@
+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,
+    },
+  });
+
+  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} deadline={deadline} />}
+        {!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,232 @@
+import {
+  Button,
+  CardPart,
+  Grid,
+  GridColumn,
+  HorizontalStack,
+  MultiplePartsCard,
+  Spacer,
+  Tag,
+  Text,
+  VerticalStack,
+} from "@python-italia/pycon-styleguide";
+import { FormattedMessage } from "react-intl";
+
+import { useCurrentLanguage } from "~/locale/context";
+import { DeadlineStatus, Status as GrantStatus } from "~/types";
+import type { MyProfileWithGrantQuery } from "~/types";
+
+import { Link } from "@python-italia/pycon-styleguide";
+import { useCountries } from "~/helpers/use-countries";
+import { createHref } from "../link";
+import { Sidebar } from "./sidebar";
+
+type Props = {
+  grant: MyProfileWithGrantQuery["me"]["grant"];
+  deadline: MyProfileWithGrantQuery["conference"]["deadline"];
+};
+
+export const MyGrant = ({ grant, deadline }: Props) => {
+  const language = useCurrentLanguage();
+  const countries = useCountries();
+
+  const canManageGrant = [
+    GrantStatus.WaitingForConfirmation,
+    GrantStatus.Confirmed,
+    GrantStatus.WaitingList,
+    GrantStatus.WaitingListMaybe,
+  ].includes(grant.status);
+
+  const getCountryLabel = (value: string): string | undefined => {
+    const country = countries.find((country) => country.value === value);
+    return country ? country.label : undefined;
+  };
+
+  const dateFormatter = new Intl.DateTimeFormat(language, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+
+  return (
+    <>
+      <Grid cols={12}>
+        <GridColumn colSpan={4}>
+          <Sidebar
+            status={grant.status}
+            grantType={grant.grantType}
+            needsFundsForTravel={grant.needsFundsForTravel}
+            needAccommodation={grant.needAccommodation}
+          />
+        </GridColumn>
+
+        <GridColumn colSpan={8}>
+          <VerticalStack gap="medium" justifyContent="spaceBetween" fullHeight>
+            <div>
+              <Title>
+                <FormattedMessage id="profile.myGrant.nextSteps" />
+              </Title>
+              <Spacer size="xs" />
+              <Text>
+                <FormattedMessage
+                  id={`profile.myGrant.status.${grant.status}.nextSteps`}
+                  values={{
+                    replyDeadline: (
+                      <Text as="span" weight="strong">
+                        {dateFormatter.format(
+                          new Date(grant.applicantReplyDeadline),
+                        )}
+                      </Text>
+                    ),
+                  }}
+                />
+              </Text>
+            </div>
+
+            <Grid cols={3} gap="small" fullWidth>
+              <GridColumn>
+                <Title>
+                  <FormattedMessage id="grants.form.fields.name" />
+                </Title>
+                <Spacer size="xs" />
+                <Text>{grant.name}</Text>
+              </GridColumn>
+
+              <GridColumn>
+                <Title>
+                  <FormattedMessage id="grants.form.fields.fullName" />
+                </Title>
+                <Spacer size="xs" />
+                <Text>{grant.fullName}</Text>
+              </GridColumn>
+
+              <GridColumn>
+                <Title>
+                  <FormattedMessage id="grants.form.fields.ageGroup" />
+                </Title>
+                <Spacer size="xs" />
+
+                <Text>
+                  <FormattedMessage
+                    id={`grants.form.fields.ageGroup.values.${grant.ageGroup}`}
+                  />
+                </Text>
+              </GridColumn>
+
+              <GridColumn>
+                <Title>
+                  <FormattedMessage id="grants.form.fields.travellingFrom" />
+                </Title>
+                <Spacer size="xs" />
+                <Text>{getCountryLabel(grant.travellingFrom)}</Text>
+              </GridColumn>
+
+              <GridColumn>
+                <Title>
+                  <FormattedMessage id="grants.form.fields.gender" />
+                </Title>
+                <Spacer size="xs" />
+                <Text>
+                  <FormattedMessage id={`profile.gender.${grant.gender}`} />
+                </Text>
+              </GridColumn>
+
+              <GridColumn>
+                <Title>
+                  <FormattedMessage id="grants.form.fields.occupation" />
+                </Title>
+                <Spacer size="xs" />
+                <Text>
+                  <FormattedMessage
+                    id={`grants.form.fields.occupation.values.${grant.occupation}`}
+                  />
+                </Text>
+              </GridColumn>
+            </Grid>
+          </VerticalStack>
+        </GridColumn>
+      </Grid>
+
+      <Spacer size="large" />
+
+      <Grid cols={12} gap="medium">
+        <GridColumn colSpan={4}>
+          {deadline.status === DeadlineStatus.HappeningNow && (
+            <Button
+              href={createHref({
+                path: "/grants/edit",
+                locale: language,
+              })}
+              size="small"
+              variant="secondary"
+            >
+              <FormattedMessage id="profile.myGrant.edit" />
+            </Button>
+          )}
+
+          {canManageGrant && (
+            <>
+              <Spacer size="small" orientation="horizontal" />
+              <Button
+                href={createHref({
+                  path: "/grants/reply",
+                  locale: language,
+                })}
+                size="small"
+                variant="secondary"
+              >
+                <FormattedMessage id="profile.myGrant.manage" />
+              </Button>
+            </>
+          )}
+        </GridColumn>
+        <GridColumn colSpan={8}>
+          {deadline.status === DeadlineStatus.HappeningNow && (
+            <Text>
+              <FormattedMessage
+                id="profile.myGrant.editInfo"
+                values={{
+                  editDeadline: (
+                    <Text as="span" weight="strong">
+                      {dateFormatter.format(new Date(deadline.end))}
+                    </Text>
+                  ),
+                }}
+              />
+            </Text>
+          )}
+          {canManageGrant && (
+            <>
+              <Spacer size="small" />
+              <Text>
+                <FormattedMessage
+                  id="profile.myGrant.manage.warning"
+                  values={{
+                    grantsEmail: (
+                      <Link target="_blank" href="mailto:grants@pycon.it">
+                        <Text
+                          decoration="underline"
+                          size={2}
+                          weight="strong"
+                          color="none"
+                        >
+                          grants@pycon.it
+                        </Text>
+                      </Link>
+                    ),
+                  }}
+                />
+              </Text>
+            </>
+          )}
+        </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,33 @@
+query MyProfileWithGrant($conference: String!) {
+  me {
+    id
+    name
+    fullName
+    email
+
+    grant(conference: $conference) {
+      id
+      status
+      name
+      fullName
+      ageGroup
+      travellingFrom
+      gender
+      occupation
+      applicantReplyDeadline
+
+      needVisa
+      needsFundsForTravel
+      needAccommodation
+      grantType
+    }
+  }
+  conference(code: $conference) {
+    id
+    deadline(type: "grants") {
+      id
+      status
+      end
+    }
+  }
+}