make shirt page

ausspeedruns · Jun 7, 2023 · d72f1e9 · d72f1e9
1 parent 96a4158
commit d72f1e9
Show file tree

Hide file tree

Showing 14 changed files with 780 additions and 41 deletions.
diff --git a/apps/keystone/keystone.ts b/apps/keystone/keystone.ts
@@ -166,9 +166,11 @@ export default withAuth(
             async resolve(source, { apiKey, stripeID, numberOfShirts }, context: Context) {
               if (apiKey !== process.env.API_KEY) throw new Error("Incorrect API Key");
 
+              const notes = numberOfShirts > 0 ? `#${numberOfShirts}` : '';
+
               return context.sudo().db.ShirtOrder.updateOne({
                 where: { stripeID },
-                data: { paid: true, notes: `#${numberOfShirts}` }
+                data: { paid: true, notes }
               });
             },
           }),
@@ -177,11 +179,12 @@ export default withAuth(
             args: {
               userID: graphql.arg({ type: graphql.nonNull(graphql.ID) }),
               method: graphql.arg({ type: graphql.nonNull(base.enum('ShirtOrderMethodType')) }),
+              size: graphql.arg({ type: graphql.nonNull(base.enum('ShirtOrderSizeType')) }),
               stripeID: graphql.arg({ type: graphql.String }),
               apiKey: graphql.arg({ type: graphql.nonNull(graphql.String) }),
               notes: graphql.arg({ type: graphql.String }),
             },
-            async resolve(source, { apiKey, notes, method, stripeID, userID }, context: Context) {
+            async resolve(source, { apiKey, notes, method, stripeID, size, userID }, context: Context) {
               if (apiKey !== process.env.API_KEY) throw new Error("Incorrect API Key");
 
               // Check user is verified
@@ -192,10 +195,15 @@ export default withAuth(
                 throw new Error('Unverified user.');
               }
 
+              if (typeof size !== 'string')
+              {
+                throw new Error('Unknown size.');
+              }
+
               return context.sudo().db.ShirtOrder.createOne({
                 data: {
                   user: { connect: { id: userID } },
-                  size: 'm',
+                  size: size as any,
                   colour: 'blue',
                   // @ts-ignore: I do not know how to correctly type the graphql arg
                   method,

diff --git a/apps/keystone/migrations/20230607124718_added_shirt_size/migration.sql b/apps/keystone/migrations/20230607124718_added_shirt_size/migration.sql
@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "ShirtOrderSizeType" ADD VALUE 'xl4';
diff --git a/apps/keystone/schema.graphql b/apps/keystone/schema.graphql
@@ -1403,6 +1403,7 @@ enum ShirtOrderSizeType {
   xl
   xl2
   xl3
+  xl4
 }
 
 enum ShirtOrderColourType {
@@ -1650,7 +1651,7 @@ type Mutation {
   confirmStripe(stripeID: String!, numberOfTickets: Int!, apiKey: String!): Ticket
   generateTicket(userID: ID!, numberOfTickets: Int!, method: TicketMethodType!, event: String!, stripeID: String, apiKey: String!): Ticket
   confirmShirtStripe(stripeID: String!, numberOfShirts: Int!, apiKey: String!): ShirtOrder
-  generateShirt(userID: ID!, method: ShirtOrderMethodType!, stripeID: String, apiKey: String!, notes: String): ShirtOrder
+  generateShirt(userID: ID!, method: ShirtOrderMethodType!, size: ShirtOrderSizeType!, stripeID: String, apiKey: String!, notes: String): ShirtOrder
 }
 
 union UserAuthenticationWithPasswordResult = UserAuthenticationWithPasswordSuccess | UserAuthenticationWithPasswordFailure

diff --git a/apps/keystone/schema.prisma b/apps/keystone/schema.prisma
@@ -336,6 +336,7 @@ enum ShirtOrderSizeType {
   xl
   xl2
   xl3
+  xl4
 }
 
 enum ShirtOrderColourType {

diff --git a/apps/keystone/src/schema/orders.ts b/apps/keystone/src/schema/orders.ts
@@ -64,6 +64,7 @@ export const ShirtOrder: Lists.ShirtOrder = list({
 				{ label: "Xtra Large", value: "xl" },
 				{ label: "2 Xtra Large", value: "xl2" },
 				{ label: "3 Xtra Large", value: "xl3" },
+				{ label: "4 Xtra Large", value: "xl4" },
 			],
 			validation: {
 				isRequired: true

diff --git a/apps/nextjs/components/ShirtOrder/ShirtOrder.tsx b/apps/nextjs/components/ShirtOrder/ShirtOrder.tsx
@@ -1,10 +1,11 @@
 import { Box } from "@mui/material";
 import Image from "next/image";
-import styles from "./ShirtOrder.module.scss";
+import JSBarcode from "jsbarcode";
 
-import ShirtBlue from "../../styles/img/ShirtBlue.png";
-import ShirtPurple from "../../styles/img/ShirtPurple.png";
+import styles from "./ShirtOrder.module.scss";
+import ShirtImage from "../../styles/img/ASM2023ShirtMockup.png";
 import ASM2023Shirt from "../../styles/img/asm2023-tickets-bundle-card.png";
+import { useEffect, useRef } from "react";
 
 interface ASMShirtProps {
 	shirtData: {
@@ -17,15 +18,30 @@ interface ASMShirtProps {
 }
 
 const ASMShirt: React.FC<ASMShirtProps> = (props: ASMShirtProps) => {
-	const { shirtID, paid, notes } = props.shirtData;
+	const { shirtID, paid, notes, size } = props.shirtData;
+	const barcodeRef = useRef<SVGSVGElement>(null);
+
+	let shirtPrice = 30;
 
-	const noOfShirts = parseInt(notes?.match(/#(\d+)/)?.[1] ?? "") ?? 1;
+	useEffect(() => {
+		if (barcodeRef.current && paid) {
+			JSBarcode(barcodeRef.current, shirtID, { displayValue: false });
+		}
+	}, [shirtID, paid, barcodeRef]);
+
+	let noOfShirts = parseInt(notes?.match(/#(\d+)/)?.[1] ?? "") ?? 1;
+	const hasSelectedSize = notes?.[0] !== "#";
+	if (!hasSelectedSize) {
+		shirtPrice = 25;
+	} else {
+		noOfShirts = 1;
+	}
 
 	return (
 		<Box className={styles.generatedShirts} sx={{ boxShadow: 8 }}>
 			<div className={styles.image}>
 				<Image
-					src={ASM2023Shirt}
+					src={ShirtImage}
 					alt="Shirt"
 					sizes="100vw"
 					style={{
@@ -37,7 +53,14 @@ const ASMShirt: React.FC<ASMShirtProps> = (props: ASMShirtProps) => {
 			</div>
 			<div className={styles.basicInfo}>
 				<span className={styles.label}>{shirtID}</span>
+				{paid && <svg ref={barcodeRef} className={styles.barcode}></svg>}
 				<div className={styles.informationGrid}>
+					{notes?.[0] != "#" && (
+						<>
+							<span>Size</span>
+							<span>{sizeToName(size)}</span>
+						</>
+					)}
 					{/* <span>Size</span>
 					<span>{sizeToName(size)}</span>
 					<span>Colour</span>
@@ -49,24 +72,23 @@ const ASMShirt: React.FC<ASMShirtProps> = (props: ASMShirtProps) => {
 			{!paid && (
 				<div className={styles.unpaid}>
 					<p>
-						You <b>MUST</b> send the Shirt ID as the
-						&quot;reference&quot;. Failure to do so will result in
-						your shirt marked as not being paid and will not be
-						ordered. The shirt will take up to 7 days to update.
+						You <b>MUST</b> send the Shirt ID as the &quot;reference&quot;. Failure to do so will result in
+						your shirt marked as not being paid and will not be ordered. The shirt will take up to 7 days to
+						update.
 					</p>
 					<div className={styles.informationGrid}>
 						<span>BSB</span>
 						<span>085-005</span>
 						<span>Account #</span>
 						<span>30-192-8208</span>
-						{noOfShirts > 1 && (
+						{~~noOfShirts > 1 && (
 							<>
 								<span>Num of Shirts</span>
 								<span>{noOfShirts}</span>
 							</>
 						)}
 						<span>Amount</span>
-						<span>${noOfShirts * 25} AUD</span>
+						<span>${noOfShirts * shirtPrice} AUD</span>
 					</div>
 				</div>
 			)}
@@ -90,6 +112,8 @@ function sizeToName(size: string) {
 			return "2 Extra Large";
 		case "xl3":
 			return "3 Extra Large";
+		case "xl4":
+			return "4 Extra Large";
 		default:
 			return size;
 	}