UXOpen Companion Page

src/pages/admin/DynamicForm/FormRegister.js

@@ -941,7 +941,7 @@ const FormRegister = (props) => {
         studentId: user?.id,
         eventID: currEvent.id,
         year: currEvent.year,
-        registrationStatus: currEvent.id === "hello-hacks" ? "waitlist" : "registered",
+        registrationStatus: currEvent.id === "ux-open" ? "waitlist" : "registered",
         isPartner: false,
         points: 0,
         basicInformation: {

src/pages/public/Companion/events/UXOpen2024.js

@@ -0,0 +1,226 @@
+import React, {
+  useState
+} from "react";
+import {
+  Button
+} from "@material-ui/core";
+import Reviewing from "../../../../assets/2024/produhacks/reviewing.png";
+import Waitlist from "../../../../assets/2024/produhacks/waitlisted.png";
+import Accepted from "../../../../assets/2024/produhacks/accepted.png";
+import Rejected from "../../../../assets/2024/produhacks/rejected.png";
+import {
+  constantStyles
+} from "../../../../constants/_constants/companion";
+import {
+  COLORS
+} from "../../../../constants/_constants/theme";
+import CardMembershipIcon from "@material-ui/icons/CardMembership";
+import {
+  fetchBackend
+} from "utils";
+import {
+  CLIENT_URL,
+} from "constants/index";
+
+const customStyles = {
+  container: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    gap: "5px"
+  },
+  options: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    width: "100%",
+    marginBottom: "15px"
+  },
+  footer: {
+    left: "-10px",
+    width: "120%",
+    right: "-10px",
+    bottom: "0"
+  },
+  background: {
+    width: "120%",
+    height: "100%"
+  },
+  backgroundMobile: {
+    width: "150%",
+    height: "100%"
+  },
+  registerButton: {
+    textTransform: "none",
+    backgroundColor: COLORS.BIZTECH_GREEN,
+    color: COLORS.BACKGROUND_COLOR,
+    "&:disabled": {
+      backgroundColor: COLORS.FONT_GRAY,
+      color: COLORS.WHITE
+    }
+  },
+  mailToLink: {
+    color: COLORS.WHITE,
+    textDecoration: "none",
+    "&:hover": {
+      color: COLORS.WHITE,
+    }
+  }
+
+};
+
+const UXOpen2024 = (params) => {
+  const {
+    event, registrations, styles, renderMobileOnly, userRegistration
+  } = params;
+  const [isWithdrawing, setIsWithdrawing] = useState(false);
+
+  const withdrawApplication = async () => {
+    try {
+      const body = {
+        eventID: event.id,
+        year: Number(event.year),
+        registrationStatus: "cancelled",
+        applicationStatus: "rejected"
+      };
+      setIsWithdrawing(true);
+      const isConfirmed = confirm("Are you sure? Once you've withdrawn you cannot resubmit your application");
+      if (isConfirmed) {
+        const result = await fetchBackend(`/registrations/${userRegistration.id}/${userRegistration.fname}`, "PUT", body, false);
+        if (result) {
+          console.log(result);
+          setIsWithdrawing(false);
+          location.reload();
+        }
+      } else {
+        setIsWithdrawing(false);
+      }
+    } catch (e) {
+      alert("an error has occured");
+      console.log(e);
+      setIsWithdrawing(false);
+    }
+  };
+
+
+  const renderStatus = () => {
+    const status = userRegistration.applicationStatus;
+    if (status === "reviewing") {
+      return <img src={Reviewing} alt={"We are currently reviewing your application"} style={renderMobileOnly ? customStyles.backgroundMobile : customStyles.background} />;
+    } else if (status === "waitlist") {
+      return <img src={Waitlist} alt={"You are currently waitlisted for UXOpen"} style={renderMobileOnly ? customStyles.backgroundMobile : customStyles.background} />;
+    } else if (status === "accepted") {
+      return <>{userRegistration.registrationStatus === "registered" ? <span style={{
+        ...styles.text,
+        ...(renderMobileOnly && {
+          fontSize: constantStyles.mobileFontSize
+        })
+      }}>You're all set! Be on the lookout in your email for more details. </span> :
+        <div style={customStyles.options}><span style={{
+          ...styles.text,
+          ...(renderMobileOnly && {
+            fontSize: constantStyles.mobileFontSize
+          })
+        }}>To confirm your acceptance, pay for UXOpen here</span> <Button
+          style={customStyles.registerButton}
+          variant="contained"
+          color="primary"
+          type="submit"
+          onClick={async () => {
+            let isMember;
+            try {
+              isMember = await fetchBackend(`/users/checkMembership/${userRegistration.id}`, "GET", undefined, false);
+            } catch (err) {
+              console.log(isMember);
+              alert(err);
+            }
+
+            const paymentBody = {
+              paymentName: `${event.ename} ${isMember || event.pricing?.members === event.pricing?.nonMembers ? "" : "(Non-member)"
+              }`,
+              paymentImages: [event.imageUrl],
+              paymentPrice:
+              (isMember
+                ? event.pricing?.members
+                : event.pricing.nonMembers) * 100,
+              paymentType: "Event",
+              success_url: `${process.env.REACT_APP_STAGE === "local"
+                ? "http://localhost:3000/"
+                : CLIENT_URL
+              }companion`,
+              cancel_url: `${process.env.REACT_APP_STAGE === "local"
+                ? "http://localhost:3000/"
+                : CLIENT_URL
+              }companion`,
+              email: userRegistration.id,
+              fname: userRegistration.fname,
+              eventID: event.id,
+              year: event.year
+            };
+            fetchBackend("/payments", "POST", paymentBody, false)
+              .then(async (response) => {
+                window.open(response, "_self");
+              })
+              .catch((err) => {
+                alert(
+                  `An error has occured: ${err} Please contact an exec for support.`
+                );
+              });
+          }}
+        >
+          <CardMembershipIcon
+            style={{
+              color: COLORS.BACKGROUND_COLOR,
+              marginRight: "5px"
+            }}
+          />
+                        Proceed to Payment!
+        </Button></div>
+      }
+      <img src={Accepted} alt={"You have been accepted into UXOpen!"} style={renderMobileOnly ? customStyles.backgroundMobile : customStyles.background} /></>;
+    } else if (status === "rejected") {
+      return <img src={Rejected} alt={"You've withdrawn your application"} style={renderMobileOnly ? customStyles.backgroundMobile : customStyles.background} />;
+    }
+  };
+
+  return (<div style={customStyles.container}>
+    {event && registrations &&
+            <>
+              {renderStatus()}
+              {userRegistration.applicationStatus !== "rejected" && <span style={{
+                ...styles.text,
+                ...(renderMobileOnly && {
+                  fontSize: constantStyles.mobileFontSize
+                })
+              }}>Want to withdraw your application?<Button
+                  style={{
+                    ...customStyles.registerButton,
+                    marginLeft: "5px"
+                  }}
+                  variant="contained"
+                  color="primary"
+                  type="submit"
+                  onClick={() => withdrawApplication()}
+                  disabled={isWithdrawing}
+                >
+                        Click here
+                </Button></span>}
+              <div style={{
+                ...styles.text,
+                width: "100%",
+                marginBottom: "0px",
+                ...(renderMobileOnly && {
+                  fontSize: constantStyles.mobileFontSize
+                })
+              }}>
+                    Contact <a href="mailto:[email protected]" style={customStyles.mailToLink}>[email protected]</a> for any questions or concerns.
+              </div>
+            </>
+    }
+  </div>
+  );
+};
+
+export default UXOpen2024;

src/pages/public/Companion/events/index.js

@@ -16,6 +16,8 @@ import TechStyleLogo from "../../../../assets/2024/techstyle/techstyle_logo.png"
 import TechStyleTexture from "../../../../assets/2024/techstyle/techstyle_grid.png";
 import TSLogo from "../../../../assets/2024/techstyle/techstyle_biztech_logo.png";
 import HelloHacks2024 from "./HelloHacks2024";
+import UXOpen2024 from "./UXOpen2024";
+import UXOpenLogo from "../../../../assets/2024/ux-open/UXOpenLogo.png";
 
 export default [
   {
@@ -428,5 +430,42 @@ export default [
       headers: [
       ]
     }
-  }
+  },
+  {
+    /* Date indicating when event ends, this also indicates which app the companion app will render, to be safe, but a couple days after event ends */
+    activeUntil: new Date(new Date("2024-11-03").getTime() + (7 * 24 * 60 * 60 * 1000)),
+    /* id of event in dynamodb, used for queries */
+    eventID: "ux-open",
+    /* year of event in dynamodb, used for queries */
+    year: 2024,
+    /* component for event body */ // keep the same
+    ChildComponent: UXOpen2024,
+    /* options defining params for the companionLayout */
+    options: {
+      disableWelcomeHeader: true,
+      /* Biztech logo for event */
+      BiztechLogo: UXOpenLogo,
+      /* Logo for event */
+      Logo: UXOpenLogo,
+      /* Displayed title of event */
+      title: "UXOpen 2024",
+      /* Displayed date of event */
+      date: "Nov 2-3, 2024",
+      /* Displayed location of event */
+      location: "Henry Angus Building (Sauder)",
+      /* color theme of event */
+      colors: {
+        primary: "linear-gradient(180deg, white, white)",
+        background: "linear-gradient(0.5turn, #2A0538,  #744188, #CB679B, #FFAF40, #FFA26E )",
+      },
+      /* function to return schedule of event, schedule is an array of date and title, regData is the responses of a registration */
+      getScheduleData: () => [],
+      /* Array of welcome paragraphs for event, each new index is a new paragraph */
+      welcomeData: [
+      ],
+      /* Array of header tabs to navigate for event, id is the id of the div in app, and text is the heaidng text */
+      headers: [
+      ]
+    }
+  },
 ];