Created page for blocking non-members from bookings

client/.storybook/main.ts

@@ -23,7 +23,7 @@ const config: StorybookConfig = {
   core: {
     builder: "@storybook/builder-webpack5"
   },
-  webpackFinal: async (config) => {
+  webpackFinal: async (config, options) => {
     const imageRule = config.module?.rules?.find((rule) => {
       const test = (rule as { test: RegExp }).test
 
@@ -41,6 +41,9 @@ const config: StorybookConfig = {
       use: ["@svgr/webpack"]
     })
 
+    //@ts-expect-error
+    options!.cache!.set = () => Promise.resolve()
+
     return config
   }
 }

client/package.json

@@ -19,6 +19,7 @@
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^4.1.0",
     "@tanstack/react-query": "^5.50.1",
+    "client": "file:",
     "firebase": "^10.12.3",
     "next": "14.2.4",
     "next-sanity": "^9.4.2",

client/src/components/generic/SignUpNotif/SignUpNotif.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from "next/navigation"
 import Button from "../FigmaButtons/FigmaButton"
+import LockIcon from "@/assets/icons/lock.svg"
 
 interface ISignUpNotif {
   /**
@@ -21,21 +22,30 @@ export const SignUpNotif = ({ signedIn }: ISignUpNotif) => {
   }
 
   return (
-    <div
-      className="text-dark-blue-100 border-gray-3 flex flex-col items-center justify-center 
-    gap-4 rounded-md border bg-white py-8"
-    >
-      <h2 className="text-center italic">Currently unavailable</h2>
-      <h4 className="max-h-[87px] max-w-[386px] text-center">
-        Only paid members can access bookings. Please sign up or wait until your
-        membership payment has been proccessed.
-      </h4>
-      <span className="flex w-full max-w-80 gap-2">
-        {!signedIn && <Button onClick={() => goToLogin()}>Log in</Button>}
-        <Button onClick={() => goToRegister()}>
-          {signedIn ? "Join Now" : "Sign up"}
-        </Button>
-      </span>
+    <div className="bg-gray-1 absolute inset-0 flex h-screen w-full justify-center overflow-hidden bg-opacity-70 px-4 py-2">
+      <div className="border-gray-3 mt-12 h-fit rounded-md border-2 bg-white p-5">
+        <div className="flex items-center justify-center">
+          <LockIcon />
+        </div>
+        <h2 className="xxs:mb-5 mb-10 mt-5 text-center font-bold text-black">
+          Sorry!
+        </h2>
+        <h4 className="text-center text-black">
+          Bookings are only available for UASC members.
+        </h4>
+        <h4 className="xxs:mb-5 mb-10 mt-1 text-center text-black">
+          Please sign up or wait until your membership payment has been
+          processed.
+        </h4>
+        <div className="mb-2 flex justify-center">
+          <span className="flex w-full max-w-80 gap-2">
+            {!signedIn && <Button onClick={() => goToLogin()}>Log in</Button>}
+            <Button onClick={() => goToRegister()}>
+              {signedIn ? "Join Now" : "Sign up"}
+            </Button>
+          </span>
+        </div>
+      </div>
     </div>
   )
 }

server/package.json

@@ -12,6 +12,7 @@
     "helmet": "^7.1.0",
     "nodemailer": "^6.9.14",
     "pug": "^3.0.3",
+    "server": "file:",
     "stripe": "^14.22.0",
     "supertest": "^6.3.4",
     "swagger-jsdoc": "^6.2.8",

yarn.lock

@@ -10904,7 +10904,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"client@workspace:client":
+"client@file:, client@workspace:client":
   version: 0.0.0-use.local
   resolution: "client@workspace:client"
   dependencies:
@@ -10934,6 +10934,7 @@ __metadata:
     "@types/react-csv": "npm:^1.1.10"
     "@types/react-dom": "npm:^18"
     "@types/scheduler": "npm:^0"
+    client: "file:"
     eslint: "npm:~8.57.0"
     firebase: "npm:^10.12.3"
     jest: "npm:^29.7.0"
@@ -21585,7 +21586,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"server@workspace:server":
+"server@file:, server@workspace:server":
   version: 0.0.0-use.local
   resolution: "server@workspace:server"
   dependencies:
@@ -21610,6 +21611,7 @@ __metadata:
     nodemailer: "npm:^6.9.14"
     nodemon: "npm:^3.1.0"
     pug: "npm:^3.0.3"
+    server: "file:"
     stripe: "npm:^14.22.0"
     supertest: "npm:^6.3.4"
     swagger-jsdoc: "npm:^6.2.8"