Add Grant to profile dashboard

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

@@ -22,7 +22,6 @@ import { FormattedMessage } from "react-intl";
 import { useFormState } from "react-use-form-state";
 
 import { Alert } from "~/components/alert";
-import { MyGrant } from "~/components/profile/my-grant";
 import { useCountries } from "~/helpers/use-countries";
 import { useCurrentUser } from "~/helpers/use-current-user";
 import { useTranslatedMessage } from "~/helpers/use-translated-message";
@@ -37,7 +36,7 @@ import {
   type SendGrantMutation,
   type UpdateGrantInput,
   type UpdateGrantMutation,
-  useMyGrantQuery,
+  useGrantDeadlineQuery,
   useSendGrantMutation,
 } from "~/types";
 
@@ -76,18 +75,9 @@ export type GrantFormFields = {
   acceptedPrivacyPolicy: boolean;
 };
 
-export const MyGrantOrForm = () => {
+export const GrantSendForm = () => {
   const code = process.env.conferenceCode;
 
-  const { error, data } = useMyGrantQuery({
-    errorPolicy: "all",
-    variables: {
-      conference: code,
-    },
-    skip: typeof window === "undefined",
-  });
-  const grant = data?.me?.grant;
-
   const [submitGrant, { loading, error: grantError, data: grantData }] =
     useSendGrantMutation({
       onError(err) {
@@ -103,14 +93,6 @@ export const MyGrantOrForm = () => {
     });
   };
 
-  if (error) {
-    return <Alert variant="alert">{error.message}</Alert>;
-  }
-
-  if (grant) {
-    return <MyGrant />;
-  }
-
   return (
     <>
       <Section>
@@ -155,6 +137,16 @@ export const GrantForm = ({
   const language = useCurrentLanguage();
   const countries = useCountries();
 
+  const {
+    data: {
+      conference: { deadline },
+    },
+  } = useGrantDeadlineQuery({
+    variables: {
+      conference: conference,
+    },
+  });
+
   const inputPlaceholderText = useTranslatedMessage("input.placeholder");
   const { user, loading: loadingUser } = useCurrentUser({});
   const [formState, { text, textarea, select, checkbox }] =
@@ -167,6 +159,12 @@ export const GrantForm = ({
       },
     );
 
+  const dateFormatter = new Intl.DateTimeFormat(language, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+
   useEffect(() => {
     // to not override if we are editing the grant
     if (user && !grant) {
@@ -274,20 +272,24 @@ export const GrantForm = ({
         <FormattedMessage
           id="grants.form.sent"
           values={{
-            linkGrant: (
+            linkMyGrant: (
               <Link
-                href={createHref({ path: "/grants/edit", locale: language })}
+                href={createHref({
+                  path: "/profile/my-grant",
+                  locale: language,
+                })}
               >
                 <Text
                   color="none"
                   decoration="underline"
                   size="inherit"
                   weight="strong"
                 >
-                  <FormattedMessage id="grants.form.sent.linkGrant.text" />
+                  <FormattedMessage id="grants.form.sent.linkMyGrant.text" />
                 </Text>
               </Link>
             ),
+            grantsDeadline: dateFormatter.format(new Date(deadline.end)),
           }}
         />
       </Text>

frontend/src/components/my-grant-profile-page-handler/grant-table-info.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  Grid,
+  GridColumn,
+  Link,
+  Spacer,
+  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 { getCountryLabel } from "~/helpers/country-utils";
+import { useCountries } from "~/helpers/use-countries";
+import { createHref } from "../link";
+import { Sidebar } from "./sidebar";
+
+type Props = {
+  grant: MyProfileWithGrantQuery["me"]["grant"];
+};
+const GrantTableInfo = ({ grant }: Props) => {
+  const countries = useCountries();
+  return (
+    <Grid cols={3} gap="small" fullWidth>
+      <div>
+        <Title>
+          <FormattedMessage id="grants.form.fields.name" />
+        </Title>
+        <Spacer size="xs" />
+        <Text>{grant.name}</Text>
+      </div>
+
+      <div>
+        <Title>
+          <FormattedMessage id="grants.form.fields.fullName" />
+        </Title>
+        <Spacer size="xs" />
+        <Text>{grant.fullName}</Text>
+      </div>
+
+      <div>
+        <Title>
+          <FormattedMessage id="grants.form.fields.ageGroup" />
+        </Title>
+        <Spacer size="xs" />
+
+        <Text>
+          <FormattedMessage
+            id={`grants.form.fields.ageGroup.values.${grant.ageGroup}`}
+          />
+        </Text>
+      </div>
+
+      <div>
+        <Title>
+          <FormattedMessage id="grants.form.fields.travellingFrom" />
+        </Title>
+        <Spacer size="xs" />
+        <Text>{getCountryLabel(countries, grant.travellingFrom)}</Text>
+      </div>
+
+      <div>
+        <Title>
+          <FormattedMessage id="grants.form.fields.gender" />
+        </Title>
+        <Spacer size="xs" />
+        <Text>
+          <FormattedMessage id={`profile.gender.${grant.gender}`} />
+        </Text>
+      </div>
+
+      <div>
+        <Title>
+          <FormattedMessage id="grants.form.fields.occupation" />
+        </Title>
+        <Spacer size="xs" />
+        <Text>
+          <FormattedMessage
+            id={`grants.form.fields.occupation.values.${grant.occupation}`}
+          />
+        </Text>
+      </div>
+    </Grid>
+  );
+};
+
+export default GrantTableInfo;
+
+const Title = ({ children }: { children: React.ReactNode }) => (
+  <Text size="label3" uppercase weight="strong">
+    {children}
+  </Text>
+);

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 { MyGrant } from "~/components/my-grant-profile-page-handler/my-grant";
+import { NoGrant } from "~/components/my-grant-profile-page-handler/no-grant";
+import { MetaTags } from "../meta-tags";
+
+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>
+  );
+};