From bdb0caf40ce6018c0d6127630fb2cd4fb952c7c4 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sun, 22 Sep 2024 19:51:03 -0700
Subject: [PATCH] Add "Check In (A.S.)" button next to the Add Feedback button

---
 src/components/events/CheckInModal/index.tsx  |  8 ++++++
 src/components/events/EventDetail/index.tsx   | 26 +++++++++++++-----
 .../events/EventDetail/style.module.scss      | 27 +++++++++++--------
 .../events/EventDetail/style.module.scss.d.ts |  3 ++-
 src/lib/utils.ts                              | 24 +++++++++++++++++
 5 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/src/components/events/CheckInModal/index.tsx b/src/components/events/CheckInModal/index.tsx
index 74bfe91c..0402052c 100644
--- a/src/components/events/CheckInModal/index.tsx
+++ b/src/components/events/CheckInModal/index.tsx
@@ -1,6 +1,7 @@
 import { Modal, Typography } from '@/components/common';
 import { config } from '@/lib';
 import { PublicEvent } from '@/lib/types/apiResponses';
+import { prefillAsCheckinUrl } from '@/lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
@@ -114,6 +115,13 @@ const CheckInModal = ({ open, event, onClose }: CheckInModalProps) => {
           >
             <Typography variant="h4/bold">Add Feedback</Typography>
           </Link>
+          <Link
+            href={prefillAsCheckinUrl(event.title)}
+            className={`${style.button} ${style.addFeedback}`}
+            target="_blank"
+          >
+            <Typography variant="h4/bold">Check In (A.S.)</Typography>
+          </Link>
           <button type="submit" className={style.button}>
             <Typography variant="h4/bold">Close</Typography>
           </button>
diff --git a/src/components/events/EventDetail/index.tsx b/src/components/events/EventDetail/index.tsx
index d13ca026..19b033a7 100644
--- a/src/components/events/EventDetail/index.tsx
+++ b/src/components/events/EventDetail/index.tsx
@@ -3,10 +3,16 @@ import CalendarButtons from '@/components/events/CalendarButtons';
 import EventBadges from '@/components/events/EventBadges';
 import { config } from '@/lib';
 import { PublicEvent, PublicOrderPickupEvent } from '@/lib/types/apiResponses';
-import { formatEventDate, getDefaultEventCover, isOrderPickupEvent } from '@/lib/utils';
+import {
+  formatEventDate,
+  getDefaultEventCover,
+  isOrderPickupEvent,
+  prefillAsCheckinUrl,
+} from '@/lib/utils';
 import CloseIcon from '@/public/assets/icons/close-icon.svg';
 import Image from 'next/image';
 import Link from 'next/link';
+import { IoFastFoodOutline } from 'react-icons/io5';
 import { VscFeedback } from 'react-icons/vsc';
 import styles from './style.module.scss';
 
@@ -31,12 +37,20 @@ const EventDetail = ({ event, attended, inModal = false }: EventDetailProps) =>
   if (!isOrderPickupEvent(event)) {
     if (isUpcomingEvent) {
       buttons = <CalendarButtons event={event} />;
-    } else if (inModal) {
+    } else {
       buttons = (
-        <Link href={`${config.eventsRoute}/${event.uuid}`} className={styles.feedbackBtn}>
-          <VscFeedback aria-hidden />
-          Add Feedback
-        </Link>
+        <div className={styles.buttons}>
+          {inModal ? (
+            <Link href={`${config.eventsRoute}/${event.uuid}`} className={styles.button}>
+              <VscFeedback aria-hidden />
+              Add Feedback
+            </Link>
+          ) : null}
+          <Link href={prefillAsCheckinUrl(event.title)} className={styles.button} target="_blank">
+            <IoFastFoodOutline aria-hidden />
+            Check In (A.S.)
+          </Link>
+        </div>
       );
     }
   }
diff --git a/src/components/events/EventDetail/style.module.scss b/src/components/events/EventDetail/style.module.scss
index 9d8ae791..12596dc7 100644
--- a/src/components/events/EventDetail/style.module.scss
+++ b/src/components/events/EventDetail/style.module.scss
@@ -153,20 +153,25 @@
       }
     }
 
-    .feedbackBtn {
-      align-items: center;
-      align-self: flex-start;
-      background-color: var(--theme-elevated-background);
-      border: 1px solid var(--theme-elevated-stroke);
-      border-radius: 10px;
+    .buttons {
       display: flex;
       gap: 0.5rem;
-      justify-content: flex-start;
-      padding: 0.75rem;
-      transition: all 0.2s;
 
-      &:hover {
-        background: var(--theme-surface-2);
+      .button {
+        align-items: center;
+        align-self: flex-start;
+        background-color: var(--theme-elevated-background);
+        border: 1px solid var(--theme-elevated-stroke);
+        border-radius: 10px;
+        display: flex;
+        gap: 0.5rem;
+        justify-content: flex-start;
+        padding: 0.75rem;
+        transition: all 0.2s;
+
+        &:hover {
+          background: var(--theme-surface-2);
+        }
       }
     }
   }
diff --git a/src/components/events/EventDetail/style.module.scss.d.ts b/src/components/events/EventDetail/style.module.scss.d.ts
index a7953af3..ca9d0b5e 100644
--- a/src/components/events/EventDetail/style.module.scss.d.ts
+++ b/src/components/events/EventDetail/style.module.scss.d.ts
@@ -1,5 +1,7 @@
 export type Styles = {
   badges: string;
+  button: string;
+  buttons: string;
   close: string;
   closeIcon: string;
   container: string;
@@ -7,7 +9,6 @@ export type Styles = {
   eventDetails: string;
   eventInfo: string;
   eventTitle: string;
-  feedbackBtn: string;
   header: string;
   image: string;
   standalone: string;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f2a4f3bc..c8d05c3a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -485,3 +485,27 @@ export function seededRandom(a: number, b: number, c: number, d: number): () =>
 export function getFileName(url: string, defaultName: string): string {
   return decodeURIComponent(url.split('/').at(-1) ?? defaultName);
 }
+
+/**
+ * The name of the org as known to AS. Assuming no data entry errors, the form
+ * will probably contain a corresponding entry for the event following the
+ * format `<org_name> - <event_name>`.
+ */
+const AS_ORG_NAME = 'Sample Org 1';
+const GFORM_URL =
+  'https://docs.google.com/forms/d/e/1FAIpQLSc-akfqTNzrWUmOub_rMDj5wExBUDfakMXDbeGicOrpxBr6jg/viewform';
+/**
+ * ID of the "Select the event you are signing in to:" dropdown in the check-in
+ * form.
+ */
+const GFORM_EVENT_FIELD = 'entry.219446721';
+
+/**
+ * Generates the URL to AS's funded event attendance check-in form with the
+ * event prefilled.
+ */
+export function prefillAsCheckinUrl(eventName: string): string {
+  return `${GFORM_URL}?${new URLSearchParams({
+    [GFORM_EVENT_FIELD]: `${AS_ORG_NAME} - ${eventName}`,
+  })}`;
+}