minor changes

pythonitalia · Dec 29, 2024 · b093a3c · b093a3c
1 parent a392c29
commit b093a3c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 26 deletions.
diff --git a/frontend/src/components/request-invitation-letter-page-handler/index.tsx b/frontend/src/components/request-invitation-letter-page-handler/index.tsx
@@ -9,9 +9,14 @@ import {
 import { FormattedMessage } from "react-intl";
 import { MetaTags } from "~/components/meta-tags";
 import { useCurrentLanguage } from "~/locale/context";
-import { DeadlineStatus, useRequestInvitationLetterPageQuery } from "~/types";
+import {
+  DeadlineStatus,
+  type InvitationLetterRequest,
+  useRequestInvitationLetterPageQuery,
+} from "~/types";
 import { createHref } from "../link";
 import { InvitationLetterForm } from "./invitation-letter-form";
+import { InvitationLetterRequestStatusCallout } from "./invitation-letter-request-status-callout";
 
 export const RequestInvitationLetterPageHandler = () => {
   const language = useCurrentLanguage();
@@ -55,10 +60,10 @@ export const RequestInvitationLetterPageHandler = () => {
         <Spacer size="xl" />
 
         {(!deadlineStatus || deadlineStatus === DeadlineStatus.InThePast) && (
-          <FormClosed />
+          <FormClosed invitationLetterRequest={invitationLetterRequest} />
         )}
         {deadlineStatus === DeadlineStatus.InTheFuture && (
-          <FormOpeningSoon date={invitationLetterRequestDeadline?.start} />
+          <FormOpeningSoon date={invitationLetterRequestDeadline.start} />
         )}
         {deadlineStatus === DeadlineStatus.HappeningNow && (
           <InvitationLetterForm
@@ -71,10 +76,19 @@ export const RequestInvitationLetterPageHandler = () => {
   );
 };
 
-const FormClosed = () => (
-  <Text size={2}>
-    <FormattedMessage id="requestInvitationLetter.formClosed" />
-  </Text>
+const FormClosed = ({
+  invitationLetterRequest,
+}: {
+  invitationLetterRequest: InvitationLetterRequest;
+}) => (
+  <>
+    <Text size={2}>
+      <FormattedMessage id="requestInvitationLetter.formClosed" />
+    </Text>
+    <InvitationLetterRequestStatusCallout
+      invitationLetterRequest={invitationLetterRequest}
+    />
+  </>
 );
 
 const FormOpeningSoon = ({ date }) => {

diff --git a/frontend/src/components/request-invitation-letter-page-handler/invitation-letter-form.tsx b/frontend/src/components/request-invitation-letter-page-handler/invitation-letter-form.tsx
@@ -27,6 +27,7 @@ import {
 } from "~/types";
 import { Alert } from "../alert";
 import { createHref } from "../link";
+import { InvitationLetterRequestStatusCallout } from "./invitation-letter-request-status-callout";
 
 const ON_BEHALF_OF_OPTIONS = [
   {
@@ -188,25 +189,9 @@ export const InvitationLetterForm = ({
                 <Text size={2}>
                   <FormattedMessage id="invitationLetterForm.requestAlreadySent" />
                 </Text>
-                <Spacer size="thin" />
-                {invitationLetterRequest.status ===
-                  InvitationLetterRequestStatus.Pending && (
-                  <Text size={2}>
-                    <FormattedMessage id="invitationLetterForm.requestStatus.pending" />
-                  </Text>
-                )}
-                {invitationLetterRequest.status ===
-                  InvitationLetterRequestStatus.Sent && (
-                  <Text size={2}>
-                    <FormattedMessage id="invitationLetterForm.requestStatus.sent" />
-                  </Text>
-                )}
-                {invitationLetterRequest.status ===
-                  InvitationLetterRequestStatus.Rejected && (
-                  <Text size={2}>
-                    <FormattedMessage id="invitationLetterForm.requestStatus.rejected" />
-                  </Text>
-                )}
+                <InvitationLetterRequestStatusCallout
+                  invitationLetterRequest={invitationLetterRequest}
+                />
               </div>
             )}
 

diff --git a/...nents/request-invitation-letter-page-handler/invitation-letter-request-status-callout.tsx b/...nents/request-invitation-letter-page-handler/invitation-letter-request-status-callout.tsx
@@ -0,0 +1,34 @@
+import { Spacer, Text } from "@python-italia/pycon-styleguide";
+import { FormattedMessage } from "react-intl";
+
+import {
+  type InvitationLetterRequest,
+  InvitationLetterRequestStatus,
+} from "~/types";
+
+export const InvitationLetterRequestStatusCallout = ({
+  invitationLetterRequest,
+}: {
+  invitationLetterRequest: InvitationLetterRequest;
+}) => (
+  <>
+    <Spacer size="thin" />
+    {invitationLetterRequest.status ===
+      InvitationLetterRequestStatus.Pending && (
+      <Text size={2}>
+        <FormattedMessage id="invitationLetterForm.requestStatus.pending" />
+      </Text>
+    )}
+    {invitationLetterRequest.status === InvitationLetterRequestStatus.Sent && (
+      <Text size={2}>
+        <FormattedMessage id="invitationLetterForm.requestStatus.sent" />
+      </Text>
+    )}
+    {invitationLetterRequest.status ===
+      InvitationLetterRequestStatus.Rejected && (
+      <Text size={2}>
+        <FormattedMessage id="invitationLetterForm.requestStatus.rejected" />
+      </Text>
+    )}
+  </>
+);