From da38e88827eabdcc01d3e7a1739e0ee9d1105c3c Mon Sep 17 00:00:00 2001 From: kingsmil <23634290+kingsmil@users.noreply.github.com> Date: Mon, 13 Feb 2023 08:36:04 +0800 Subject: [PATCH 01/16] fixed sized rendering --- src/pages/MerchDetail/SizeOption.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/MerchDetail/SizeOption.tsx b/src/pages/MerchDetail/SizeOption.tsx index 8c0da12..0f0f3bc 100644 --- a/src/pages/MerchDetail/SizeOption.tsx +++ b/src/pages/MerchDetail/SizeOption.tsx @@ -13,8 +13,11 @@ export const SizeOption: React.FC = (props) => { Date: Mon, 13 Feb 2023 21:01:27 +0800 Subject: [PATCH 02/16] changed header color to dark blue --- src/components/Header.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index c2bcd81..bdcc19e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -32,12 +32,12 @@ const Header = () => { }, []); return ( - + SCSE Logo - SCSE MERCH + SCSE MERCH @@ -46,15 +46,15 @@ const Header = () => { - - {cartLength > 0 && {cartLength > 99 ? "99+" : cartLength}} + + {cartLength > 0 && {cartLength > 99 ? "99+" : cartLength}} + _hover={{ bg: "#465945", transition: "0.5s", color: "white" }}> Home From 450587240e1f5fb5e74d84ec8c34b5d86b05b2b1 Mon Sep 17 00:00:00 2001 From: nicolelst Date: Mon, 13 Feb 2023 23:32:56 +0800 Subject: [PATCH 03/16] fix color for home and cart buttons on larger screens --- src/components/Header.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index bdcc19e..f9d4b98 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -10,6 +10,7 @@ import { Show, Hide, Icon, + Text, } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import { Link as RouterLink } from "react-router-dom"; @@ -54,15 +55,19 @@ const Header = () => { - Home + _hover={{ bg: "#426899", transition: "0.5s", color: "white" }}> + + Home + - - - {cartLength > 0 && {cartLength > 99 ? "99+" : cartLength}} - + + + + {cartLength > 0 && {cartLength > 99 ? "99+" : cartLength}} + + From 1e5826e6ee75925e0695aa14e3071fd7286c0d99 Mon Sep 17 00:00:00 2001 From: nicolelst <92979031+nicolelst@users.noreply.github.com> Date: Tue, 14 Feb 2023 00:04:39 +0800 Subject: [PATCH 04/16] fix: standardise image heights in merchandise list [SCSE-169] (#62) --- src/pages/Cart/CartItem.tsx | 8 +++++++- src/pages/Checkout/Checkout.tsx | 8 +++++++- src/pages/MerchandiseList/Card.tsx | 11 +++++++++-- 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/pages/Cart/CartItem.tsx b/src/pages/Cart/CartItem.tsx index 4611966..979b99d 100644 --- a/src/pages/Cart/CartItem.tsx +++ b/src/pages/Cart/CartItem.tsx @@ -89,7 +89,13 @@ const CartItem: React.FC = ({ isMobile, data, onRemove, onQuantit - + diff --git a/src/pages/Checkout/Checkout.tsx b/src/pages/Checkout/Checkout.tsx index 87369da..26c0e27 100644 --- a/src/pages/Checkout/Checkout.tsx +++ b/src/pages/Checkout/Checkout.tsx @@ -72,7 +72,13 @@ export const Checkout: FC = () => { const subtotal = (product?.price ?? -1) * item.quantity; return ( - + diff --git a/src/pages/MerchandiseList/Card.tsx b/src/pages/MerchandiseList/Card.tsx index db5a600..fb960c8 100644 --- a/src/pages/MerchandiseList/Card.tsx +++ b/src/pages/MerchandiseList/Card.tsx @@ -1,5 +1,5 @@ import { ArrowForwardIcon } from "@chakra-ui/icons"; -import { Box, Image, Text, GridItem, Flex, Badge } from "@chakra-ui/react"; +import { Box, Image, Text, GridItem, Flex, Badge, AspectRatio, Center } from "@chakra-ui/react"; import { Link } from "react-router-dom"; import routes from "../../utils/constants/routes"; import { displayPrice } from "../../utils/functions/currency"; @@ -25,7 +25,14 @@ const Card = ({ productId, imgSrc, text, price, sizeRange, isOutOfStock }: CardP overflow="hidden" _groupHover={{ boxShadow: "xl" }} > - +
+ +
Date: Sun, 19 Feb 2023 02:07:12 +0800 Subject: [PATCH 05/16] [SCSE-211] Remove mock data (#64) --- src/data/mock/orderList/index.tsx | 106 ------------------------------ src/data/mock/product/index.ts | 87 ------------------------ src/services/api.tsx | 38 ----------- 3 files changed, 231 deletions(-) delete mode 100644 src/data/mock/orderList/index.tsx delete mode 100644 src/data/mock/product/index.ts diff --git a/src/data/mock/orderList/index.tsx b/src/data/mock/orderList/index.tsx deleted file mode 100644 index c0f237f..0000000 --- a/src/data/mock/orderList/index.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { OrderStatusType, OrderType } from "../../../typings/order"; - -export const orderList: OrderType[] = [ - { - userId: "jacob", - orderID: "1234567891023456", - orderItems: [ - { - id: "1", - image: - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/448391/item/sggoods_36_448391.jpg?width=1600&impolicy=quality_75", - name: "SCSE Sweater", - size: "m", - color: "Brown", - price: 25.0, - quantity: 3, - }, - { - id: "2", - image: - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/444545/item/sggoods_00_444545.jpg?width=1008&impolicy=quality_75", - - name: "SCSE Shirt", - size: "l", - color: "Black", - price: 30.0, - quantity: 2, - }, - ], - status: OrderStatusType.DELAY, - billing: { - subtotal: 125.0, - total: 110.0, - }, - orderDateTime: new Date(1280981217 * 1000).toLocaleDateString("en-SG"), - lastUpdate: new Date(1610981217 * 1000).toLocaleDateString("en-SG"), - }, - { - userId: "jacob", - - orderID: "1234567891023455", - orderItems: [ - { - id: "1", - image: - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/457111/item/sggoods_00_457111.jpg?width=1008&impolicy=quality_75", - name: "SCSE Hoodie", - size: "m", - color: "White", - price: 25.0, - quantity: 3, - }, - { - id: "2", - image: - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/425974/item/sggoods_56_425974.jpg?width=1600&impolicy=quality_75", - name: "SCSE Shirt", - size: "l", - color: "Blue", - price: 30.0, - quantity: 2, - }, - ], - status: OrderStatusType.RECEIVED, - billing: { - subtotal: 125.0, - total: 151210.0, - }, - orderDateTime: new Date(73636123123 * 1000).toLocaleDateString("en-SG"), - lastUpdate: new Date(83636123123 * 1000).toLocaleDateString("en-SG"), - }, - - { - userId: "jacob", - orderID: "1234567891023456", - orderItems: [ - { - id: "1", - image: - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/448391/item/sggoods_36_448391.jpg?width=1600&impolicy=quality_75", - name: "SCSE Sweater", - size: "m", - color: "Brown", - price: 25.0, - quantity: 3, - }, - { - id: "2", - image: - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/452344/item/sggoods_09_452344.jpg?width=1008&impolicy=quality_75", - name: "SCSE Shirt", - size: "l", - color: "Black", - price: 30.0, - quantity: 2, - }, - ], - status: OrderStatusType.PROCESSING, - billing: { - subtotal: 1525.0, - total: 320.0, - }, - orderDateTime: new Date(1210981217 * 1000).toLocaleDateString("en-SG"), - lastUpdate: new Date(1210981217 * 1000).toLocaleDateString("en-SG"), - }, -]; diff --git a/src/data/mock/product/index.ts b/src/data/mock/product/index.ts deleted file mode 100644 index 8043bcc..0000000 --- a/src/data/mock/product/index.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { ProductType, ProductCategoryType } from "../../../typings/product"; - -export const productCategoryList: ProductCategoryType[] = ["sweater", "t-shirt", "hoodie"]; - -export const productList: ProductType[] = [ - { - id: "1", - images: [ - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/453401/item/sggoods_69_453401.jpg?width=1008&impolicy=quality_75", - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/444593/item/sggoods_32_444593.jpg?width=1008&impolicy=quality_75" - ], - name: "SCSE Sweater", - sizes: ["s", "m", "l", "xl"], - price: 2500, - colorways: ["Brown", "Beige"], - stock: [[5, 0, 3, 1], [1, 0, 5, 7]], - isAvailable: true, - productCategory: productCategoryList[0], - }, - { - id: "2", - name: "Sweater for Winter", - price: 4990, - sizes: ["xs", "s", "m", "l", "xl"], - images: [ - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/433037/item/sggoods_67_433037.jpg?width=1600&impolicy=quality_75", - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/433037/sub/sggoods_433037_sub1.jpg?width=1600&impolicy=quality_75", - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/433037/sub/sggoods_433037_sub2.jpg?width=1600&impolicy=quality_75", - ], - colorways: ["White", "Black", "Navy"], - stock: [[0, 10, 0, 0, 2], [5, 0, 0, 1, 0], [0, 0, 0, 0, 0]], - isAvailable: true, - productCategory: productCategoryList[0], - }, - { - id: "3", - images: [ - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/448969/item/sggoods_65_448969.jpg?width=1008&impolicy=quality_75", - ], - name: "SCSE Graphic Tee - G", - sizes: ["s", "m", "l", "xl"], - colorways: ["Grey"], - stock: [[0, 0, 3, 12]], - price: 2500, - isAvailable: true, - productCategory: productCategoryList[0], - }, - { - id: "4", - images: [ - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/435805/item/sggoods_03_435805.jpg?width=1008&impolicy=quality_75", - ], - name: "There's Jam on his shirt", - sizes: ["s", "m", "l", "xl"], - colorways: ["Red"], - stock: [[5, 0, 3, 1]], - price: 8500, - isAvailable: false, - productCategory: productCategoryList[1], - }, - { - id: "5", - images: [ - "https://image.uniqlo.com/UQ/ST3/sg/imagesgoods/446382/item/sggoods_15_446382.jpg?width=1008&impolicy=quality_75", - ], - name: "Blue note Records UT", - sizes: ["s", "m", "l", "xl"], - colorways: ["Blue", "Green"], - stock: [[0, 0, 0, 0], [0, 0, 0, 0]], - price: 1200, - isAvailable: true, - productCategory: productCategoryList[1], - }, - { - id: "6", - images: [ - "https://image.uniqlo.com/UQ/ST3/AsianCommon/imagesgoods/447167/item/goods_09_447167.jpg?width=1008&impolicy=quality_75", - ], - name: "Mango Looking T-Shirt from Daiso", - sizes: ["s", "m", "l", "xl"], - colorways: ["Yellow"], - stock: [[0, 0, 0, 0]], - price: 8500, - isAvailable: false, - productCategory: productCategoryList[1], - }, -]; diff --git a/src/services/api.tsx b/src/services/api.tsx index 4c76304..ab61c72 100644 --- a/src/services/api.tsx +++ b/src/services/api.tsx @@ -1,12 +1,8 @@ -import { orderList } from "../data/mock/orderList"; -import { productList } from "../data/mock/product"; import { CartItemType } from "../typings/cart"; import { fakeDelay } from "../utils/functions/random"; import { ProductType } from "../typings/product"; const QUERY_DELAY_TIME = 1000; -const CUSTOM_MOCK_DATA = false; -const CUSTOM_STRIPE_DATA = false; export class Api { private API_ORIGIN: string; @@ -45,10 +41,6 @@ export class Api { // eslint-disable-next-line class-methods-use-this async getProducts(): Promise { try { - if (CUSTOM_MOCK_DATA) { - await fakeDelay(QUERY_DELAY_TIME); - return productList; - } const res = await this.get("/products"); console.log("product-list", res); return res?.products ?? []; @@ -60,10 +52,6 @@ export class Api { // eslint-disable-next-line class-methods-use-this async getProduct(productId: string) { try { - if (CUSTOM_MOCK_DATA) { - await fakeDelay(QUERY_DELAY_TIME); - return productList.find((product) => product.id === productId); - } const res = await this.get(`/products/${productId}`); console.log("product res", res); return res; @@ -74,18 +62,6 @@ export class Api { async getOrder(userId: string, orderId: string) { try { - if (CUSTOM_MOCK_DATA) { - await fakeDelay(QUERY_DELAY_TIME); - return orderList.find( - (order) => order.userId === userId && order.orderID === orderId - ); - } - if (CUSTOM_STRIPE_DATA) { - await fakeDelay(QUERY_DELAY_TIME); - return ( - JSON.parse(localStorage.getItem("order-history") as string)[0] ?? {} - ); - } const res = await this.get(`/orders/${orderId}`); console.log("Order Summary response:", res); return res; @@ -96,10 +72,6 @@ export class Api { async getOrderHistory(userId: string) { try { - if (CUSTOM_MOCK_DATA) { - await fakeDelay(QUERY_DELAY_TIME); - return orderList.filter((order) => order.userId === userId) ?? []; - } const res = await this.get(`/orders/${userId}`); console.log("Order Summary response:", res); return res.json(); @@ -114,11 +86,6 @@ export class Api { promoCode: string | null ) { try { - if (CUSTOM_MOCK_DATA) { - await fakeDelay(QUERY_DELAY_TIME); - // return orderList.filter((order) => order.userId === userId) ?? []; - } - const res = await this.post(`/cart/checkout`, { items, promoCode: promoCode ?? "", @@ -132,11 +99,6 @@ export class Api { async postQuotation(items: CartItemType[], promoCode: string | null) { try { - if (CUSTOM_MOCK_DATA) { - await fakeDelay(QUERY_DELAY_TIME); - // return orderList.filter((order) => order.userId === userId) ?? []; - } - const res = await this.post(`/cart/quotation`, { items, promoCode: promoCode ?? "", From b8d7b853f3039f3916e8cf2e82da2d9123228d98 Mon Sep 17 00:00:00 2001 From: Guo Yong <97776029+YoNG-Zaii@users.noreply.github.com> Date: Sun, 19 Feb 2023 15:59:49 +0800 Subject: [PATCH 06/16] fix: shorter order number and colorway attribute (#69) --- src/components/OrderItem.tsx | 2 +- src/pages/Checkout/Checkout.tsx | 3 +++ src/pages/OrderSummary/OrderSummary.tsx | 5 ++++- src/typings/order.tsx | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/OrderItem.tsx b/src/components/OrderItem.tsx index 1f875d5..7ab9436 100644 --- a/src/components/OrderItem.tsx +++ b/src/components/OrderItem.tsx @@ -36,7 +36,7 @@ const OrderItem: React.FC = (props: OrderItemProps) => { Color: - {data.color} + {data.colorway} diff --git a/src/pages/Checkout/Checkout.tsx b/src/pages/Checkout/Checkout.tsx index 26c0e27..a4bdac3 100644 --- a/src/pages/Checkout/Checkout.tsx +++ b/src/pages/Checkout/Checkout.tsx @@ -86,6 +86,9 @@ export const Checkout: FC = () => { {displayPrice(subtotal)} + + {`Color: ${item.colorway}`} + {`Qty x${item.quantity}`} diff --git a/src/pages/OrderSummary/OrderSummary.tsx b/src/pages/OrderSummary/OrderSummary.tsx index 79d04d8..6393755 100644 --- a/src/pages/OrderSummary/OrderSummary.tsx +++ b/src/pages/OrderSummary/OrderSummary.tsx @@ -86,8 +86,11 @@ export const OrderSummary: FC = () => { - {orderState?.orderID} + {orderState?.orderID.split("-")[0]} + + {orderState?.orderID} + diff --git a/src/typings/order.tsx b/src/typings/order.tsx index 4541163..7d5278e 100644 --- a/src/typings/order.tsx +++ b/src/typings/order.tsx @@ -11,7 +11,7 @@ export type OrderItemType = { id: string; image: string; size: string; - color: string; + colorway: string; price: number; quantity: number; name: string; From bea0410356dfb4ea09fdd7627246501fc85714fc Mon Sep 17 00:00:00 2001 From: nicolelst <92979031+nicolelst@users.noreply.github.com> Date: Tue, 21 Feb 2023 10:45:35 +0800 Subject: [PATCH 07/16] fix: order summary display on mobile [SCSE-204] (#72) * fix: render order summary details as single column for small to medium screens * fix: adjust order status badge spacing --- src/pages/OrderSummary/OrderSummary.tsx | 86 ++++++++++++++++++------- 1 file changed, 63 insertions(+), 23 deletions(-) diff --git a/src/pages/OrderSummary/OrderSummary.tsx b/src/pages/OrderSummary/OrderSummary.tsx index 6393755..59bb928 100644 --- a/src/pages/OrderSummary/OrderSummary.tsx +++ b/src/pages/OrderSummary/OrderSummary.tsx @@ -8,11 +8,13 @@ import { Divider, Image, Badge, + Show, + Hide, } from "@chakra-ui/react"; import { Link, useParams } from "react-router-dom"; import { useQuery } from "@tanstack/react-query"; import OrderItem from "../../components/OrderItem"; -import { renderOrderStatus } from "../../utils/constants/order-status"; +import { renderOrderStatus, getOrderStatusColor } from "../../utils/constants/order-status"; import { QueryKeys } from "../../utils/constants/queryKeys"; import { api } from "../../services/api"; import { OrderStatusType, OrderType } from "../../typings/order"; @@ -77,33 +79,71 @@ export const OrderSummary: FC = () => { overflow="hidden" flexDir="column" > - - - - Order Number - + + + + {renderOrderStatus(orderState?.status ?? OrderStatusType.DELAY)} - - - {orderState?.orderID.split("-")[0]} - - - {orderState?.orderID} + Order Number + + {orderState?.orderID.split("-")[0]} + + + {orderState?.orderID} + + + Order date:{" "} + {orderState + ? new Date(`${orderState.orderDateTime}Z`).toLocaleString( + "en-sg" + ) + : ""} + + + Last update: {orderState?.lastUpdate} + - - - Order date:{" "} - {orderState - ? new Date(`${orderState.orderDateTime}Z`).toLocaleString( - "en-sg" - ) - : ""} - - Last update: {orderState?.lastUpdate} + + + + + + Order Number + + {renderOrderStatus(orderState?.status ?? OrderStatusType.DELAY)} + + + + {orderState?.orderID.split("-")[0]} + + + {orderState?.orderID} + + + + + Order date:{" "} + {orderState + ? new Date(`${orderState.orderDateTime}Z`).toLocaleString( + "en-sg" + ) + : ""} + + Last update: {orderState?.lastUpdate} + - + {orderState?.orderItems.map((item) => ( From 7bcce4913ff7089cc39152ce776df172fbf51a09 Mon Sep 17 00:00:00 2001 From: kingsmil <23634290+kingsmil@users.noreply.github.com> Date: Wed, 22 Feb 2023 02:41:06 +0800 Subject: [PATCH 08/16] Migrate stock implementation from number[][] to object, need further testing --- src/typings/product.tsx | 2 +- src/utils/functions/stock.ts | 34 ++++++++++++++++++++++------------ 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/src/typings/product.tsx b/src/typings/product.tsx index 50c4484..61b975d 100644 --- a/src/typings/product.tsx +++ b/src/typings/product.tsx @@ -8,7 +8,7 @@ export type ProductType = { id: string; name: string; price: number; - stock: number[][]; // stock[colorway][size] = qty + stock: { [colorway: string]: { [sizeIndex: string]: number } }; // stock[colorway][size] = qty sizes: string[]; colorways: string[]; images?: string[]; diff --git a/src/utils/functions/stock.ts b/src/utils/functions/stock.ts index 6148f14..52ea31a 100644 --- a/src/utils/functions/stock.ts +++ b/src/utils/functions/stock.ts @@ -15,7 +15,7 @@ export const displayStock = (product: ProductType, colorway: string, size: strin const colorwayIndex = product.colorways.indexOf(colorway); const sizeIndex = product.sizes.indexOf(size); if (colorwayIndex !== -1 && sizeIndex !== -1) { - const qty = product.stock[colorwayIndex][sizeIndex]; + const qty = product.stock.colorway.sizeIndex; if (qty > 0) { return `${qty} available`; } @@ -27,9 +27,17 @@ export const displayStock = (product: ProductType, colorway: string, size: strin export const isOutOfStock = (product: ProductType): boolean => { // returns true if product is out of stock in all colorways and sizes - const totalQty = product.stock.reduce((a,b) => { return a.concat(b) }) // flatten array - .reduce((a,b) => { return a + b }); // sum elements - return (totalQty <= 0); + // const totalQty = product.stock.reduce((a,b) => { return a.concat(b) }) // flatten array + // .reduce((a,b) => { return a + b }); // sum elements + // const totalQty = product.stock.reduce((sum,element) => { return sum + element },0); // sum elements + // return (totalQty <= 0); + const flatStock = Object.values(product.stock).reduce((acc, stockByColorway)=>{ + Object.values(stockByColorway).forEach((qty)=>acc.push(qty)); + return acc + }, [] as number[]); + const totalQty = flatStock.reduce((acc,qty)=>acc+qty,0); + return (totalQty <= 0) + } export const isColorwayAvailable = (product: ProductType, colorway: string): boolean => { @@ -39,12 +47,14 @@ export const isColorwayAvailable = (product: ProductType, colorway: string): boo if (index === -1) { // no such colorway return false; } - const colorwayStock = product.stock[index]; - const totalQty = colorwayStock.reduce((a, b) => { - return a + b; - }, 0); - return (totalQty > 0); -} + // const colorwayStock = product.stock[index]; + // const totalQty = colorwayStock.reduce((a, b) => { + // return a + b; + // }, 0); + + const colorwayStock = Object.values(product.stock[colorway]).reduce((acc: any, size: any)=>acc+size,0) + return (colorwayStock > 0); +} export const isSizeAvailable = (product: ProductType, size: string): boolean => { // returns true if size is available in any colorway @@ -53,7 +63,7 @@ export const isSizeAvailable = (product: ProductType, size: string): boolean => if (index === -1) { // no such size return false; } - const sizeStock = product.stock.map(d => d[index]); + const sizeStock = Object.values(product.stock).map(d => d[index]); const totalQty = sizeStock.reduce((a, b) => { return a + b; }, 0); @@ -73,7 +83,7 @@ export const getDefaultColorway = (product: ProductType, size: string): string = if (sizeIndex === -1) { // no such size return ""; } - const colorwayStock = product.stock.map(d => d[sizeIndex]); + const colorwayStock = Object.values(product.stock).map(d => d[sizeIndex]); const availColorwayIndex = colorwayStock.map((qty, idx) => qty > 0 ? idx : -1).filter(idx => idx !== -1); if (availColorwayIndex.length > 0) { return product.colorways[availColorwayIndex[0]]; From a6394ea32c0502d0b90443a786764b604e218879 Mon Sep 17 00:00:00 2001 From: kingsmil <23634290+kingsmil@users.noreply.github.com> Date: Wed, 22 Feb 2023 10:49:47 +0800 Subject: [PATCH 09/16] fixed displaystock/getqty --- src/utils/functions/stock.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/functions/stock.ts b/src/utils/functions/stock.ts index 52ea31a..5a10b73 100644 --- a/src/utils/functions/stock.ts +++ b/src/utils/functions/stock.ts @@ -5,7 +5,7 @@ export const getQtyInStock = (product: ProductType, colorway: string, size: stri const colorwayIndex = product.colorways.indexOf(colorway); const sizeIndex = product.sizes.indexOf(size); if (colorwayIndex !== -1 && sizeIndex !== -1) { - return product.stock[colorwayIndex][sizeIndex]; + return product.stock[colorway][size]; } return 0; } @@ -15,7 +15,7 @@ export const displayStock = (product: ProductType, colorway: string, size: strin const colorwayIndex = product.colorways.indexOf(colorway); const sizeIndex = product.sizes.indexOf(size); if (colorwayIndex !== -1 && sizeIndex !== -1) { - const qty = product.stock.colorway.sizeIndex; + const qty = product.stock[colorway][size]; if (qty > 0) { return `${qty} available`; } @@ -63,7 +63,7 @@ export const isSizeAvailable = (product: ProductType, size: string): boolean => if (index === -1) { // no such size return false; } - const sizeStock = Object.values(product.stock).map(d => d[index]); + const sizeStock = Object.values(product.stock).map(d => d[size]||0); const totalQty = sizeStock.reduce((a, b) => { return a + b; }, 0); From c059bc8512cdd92c2c242cdfa16b872875fe248e Mon Sep 17 00:00:00 2001 From: kingsmil <23634290+kingsmil@users.noreply.github.com> Date: Wed, 22 Feb 2023 10:51:57 +0800 Subject: [PATCH 10/16] fixed displaystock/getqty --- src/utils/functions/stock.ts | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/utils/functions/stock.ts b/src/utils/functions/stock.ts index 5a10b73..41678cc 100644 --- a/src/utils/functions/stock.ts +++ b/src/utils/functions/stock.ts @@ -2,10 +2,14 @@ import { ProductType } from "../../typings/product" export const getQtyInStock = (product: ProductType, colorway: string, size: string): number => { // returns remaining stock for specified colorway and size - const colorwayIndex = product.colorways.indexOf(colorway); - const sizeIndex = product.sizes.indexOf(size); - if (colorwayIndex !== -1 && sizeIndex !== -1) { - return product.stock[colorway][size]; + // const colorwayIndex = product.colorways.indexOf(colorway); + // const sizeIndex = product.sizes.indexOf(size); + // if (colorwayIndex !== -1 && sizeIndex !== -1) { + // + // return product.stock[colorway][size]; + // } + if (product.stock[colorway][size] !== 0) { + return product.stock[colorway][size] } return 0; } @@ -43,10 +47,10 @@ export const isOutOfStock = (product: ProductType): boolean => { export const isColorwayAvailable = (product: ProductType, colorway: string): boolean => { // returns true if colorway is available in any size // returns false if colorway is out of stock in all sizes - const index = product.colorways.indexOf(colorway); - if (index === -1) { // no such colorway - return false; - } + // const index = product.colorways.indexOf(colorway); + // if (index === -1) { // no such colorway + // return false; + // } // const colorwayStock = product.stock[index]; // const totalQty = colorwayStock.reduce((a, b) => { // return a + b; @@ -59,10 +63,10 @@ export const isColorwayAvailable = (product: ProductType, colorway: string): boo export const isSizeAvailable = (product: ProductType, size: string): boolean => { // returns true if size is available in any colorway // returns false if size is out of stock in all colorways - const index = product.sizes.indexOf(size); - if (index === -1) { // no such size - return false; - } + // const index = product.sizes.indexOf(size); + // if (index === -1) { // no such size + // return false; + // } const sizeStock = Object.values(product.stock).map(d => d[size]||0); const totalQty = sizeStock.reduce((a, b) => { return a + b; From 272a60de3820b3a575274fe7e26b9f08483f5897 Mon Sep 17 00:00:00 2001 From: Chan Wen Xu Date: Wed, 22 Feb 2023 15:20:34 +0800 Subject: [PATCH 11/16] cleanup: Clean stock-related code --- src/utils/functions/stock.ts | 46 +++++++++--------------------------- 1 file changed, 11 insertions(+), 35 deletions(-) diff --git a/src/utils/functions/stock.ts b/src/utils/functions/stock.ts index 41678cc..90edb8a 100644 --- a/src/utils/functions/stock.ts +++ b/src/utils/functions/stock.ts @@ -2,13 +2,7 @@ import { ProductType } from "../../typings/product" export const getQtyInStock = (product: ProductType, colorway: string, size: string): number => { // returns remaining stock for specified colorway and size - // const colorwayIndex = product.colorways.indexOf(colorway); - // const sizeIndex = product.sizes.indexOf(size); - // if (colorwayIndex !== -1 && sizeIndex !== -1) { - // - // return product.stock[colorway][size]; - // } - if (product.stock[colorway][size] !== 0) { + if (product.stock[colorway] && product.stock[colorway][size]) { return product.stock[colorway][size] } return 0; @@ -16,9 +10,7 @@ export const getQtyInStock = (product: ProductType, colorway: string, size: stri export const displayStock = (product: ProductType, colorway: string, size: string): string => { // returns string describing remaining stock - const colorwayIndex = product.colorways.indexOf(colorway); - const sizeIndex = product.sizes.indexOf(size); - if (colorwayIndex !== -1 && sizeIndex !== -1) { + if (product.stock[colorway] && product.stock[colorway][size]) { const qty = product.stock[colorway][size]; if (qty > 0) { return `${qty} available`; @@ -31,42 +23,26 @@ export const displayStock = (product: ProductType, colorway: string, size: strin export const isOutOfStock = (product: ProductType): boolean => { // returns true if product is out of stock in all colorways and sizes - // const totalQty = product.stock.reduce((a,b) => { return a.concat(b) }) // flatten array - // .reduce((a,b) => { return a + b }); // sum elements - // const totalQty = product.stock.reduce((sum,element) => { return sum + element },0); // sum elements - // return (totalQty <= 0); - const flatStock = Object.values(product.stock).reduce((acc, stockByColorway)=>{ - Object.values(stockByColorway).forEach((qty)=>acc.push(qty)); - return acc - }, [] as number[]); - const totalQty = flatStock.reduce((acc,qty)=>acc+qty,0); - return (totalQty <= 0) + const totalQty = Object.values(product.stock).reduce((acc, stockByColorway)=>{ + const colorQty = Object.values(stockByColorway).reduce((acc2, qty)=>acc2+qty, 0); + return acc+colorQty + }, 0); + return totalQty <= 0; } export const isColorwayAvailable = (product: ProductType, colorway: string): boolean => { // returns true if colorway is available in any size // returns false if colorway is out of stock in all sizes - // const index = product.colorways.indexOf(colorway); - // if (index === -1) { // no such colorway - // return false; - // } - // const colorwayStock = product.stock[index]; - // const totalQty = colorwayStock.reduce((a, b) => { - // return a + b; - // }, 0); - - const colorwayStock = Object.values(product.stock[colorway]).reduce((acc: any, size: any)=>acc+size,0) + const colorwayStock = Object.values(product.stock[colorway]).reduce( + (acc: any, size: any)=>acc+size, 0 + ); return (colorwayStock > 0); } export const isSizeAvailable = (product: ProductType, size: string): boolean => { // returns true if size is available in any colorway // returns false if size is out of stock in all colorways - // const index = product.sizes.indexOf(size); - // if (index === -1) { // no such size - // return false; - // } const sizeStock = Object.values(product.stock).map(d => d[size]||0); const totalQty = sizeStock.reduce((a, b) => { return a + b; @@ -99,4 +75,4 @@ export const getDefaults = (product: ProductType): [string, string] => { const size = getDefaultSize(product); const colorway = getDefaultColorway(product, size); return [colorway, size]; -} \ No newline at end of file +} From fa89efb28a5915c2c1c5df4cf3c916f3388a1453 Mon Sep 17 00:00:00 2001 From: YoNG-Zaii Date: Wed, 22 Feb 2023 21:10:42 +0800 Subject: [PATCH 12/16] feat: Add size chart per product on Product Preview page (frontend changes) --- src/pages/MerchDetail/MerchDetail.tsx | 6 +++--- src/pages/MerchDetail/SizeDialog.tsx | 5 +++-- src/typings/product.tsx | 1 + 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/pages/MerchDetail/MerchDetail.tsx b/src/pages/MerchDetail/MerchDetail.tsx index 34d2511..a330841 100644 --- a/src/pages/MerchDetail/MerchDetail.tsx +++ b/src/pages/MerchDetail/MerchDetail.tsx @@ -141,9 +141,9 @@ export const MerchDetail: React.FC = () => { Sizes - + } {product?.sizes?.map((size, idx) => { @@ -317,7 +317,7 @@ export const MerchDetail: React.FC = () => { {/* */} {/* {renderDescription} */} - + ); }; diff --git a/src/pages/MerchDetail/SizeDialog.tsx b/src/pages/MerchDetail/SizeDialog.tsx index 020cd59..c5c7bef 100644 --- a/src/pages/MerchDetail/SizeDialog.tsx +++ b/src/pages/MerchDetail/SizeDialog.tsx @@ -11,11 +11,12 @@ import { } from "@chakra-ui/react"; type SizeDialogType = { + sizeChart?: string; isOpen: boolean; onClose: () => void; }; -const SizeDialog: React.FC = ({ isOpen, onClose }) => { +const SizeDialog: React.FC = ({ sizeChart, isOpen, onClose }) => { return ( @@ -24,7 +25,7 @@ const SizeDialog: React.FC = ({ isOpen, onClose }) => { - + diff --git a/src/typings/product.tsx b/src/typings/product.tsx index 61b975d..c043ea1 100644 --- a/src/typings/product.tsx +++ b/src/typings/product.tsx @@ -10,6 +10,7 @@ export type ProductType = { price: number; stock: { [colorway: string]: { [sizeIndex: string]: number } }; // stock[colorway][size] = qty sizes: string[]; + sizeChart: string; colorways: string[]; images?: string[]; productCategory?: ProductCategoryType; From bf93c70037405462e0d95097f939fa4575955ead Mon Sep 17 00:00:00 2001 From: Chan Wen Xu Date: Sun, 19 Feb 2023 17:37:01 +0800 Subject: [PATCH 13/16] fix: Update logo in header and footer [SCSE-217] --- src/components/Footer.tsx | 24 +++--------------------- src/components/Header.tsx | 6 +++--- 2 files changed, 6 insertions(+), 24 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 0a9bb6d..81c636e 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -8,27 +8,9 @@ type FooterLinkProps = { function Footer() { return ( - - - - - SCSE Logo - - - - + + SCSE Logo + ); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f9d4b98..3d6443f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -36,10 +36,10 @@ const Header = () => { - - SCSE Logo + + SCSE Logo SCSE MERCH - + From e23b6105a821b29eda3b25dfcc08676c537efa7a Mon Sep 17 00:00:00 2001 From: Chan Wen Xu Date: Sun, 19 Feb 2023 17:37:24 +0800 Subject: [PATCH 14/16] refactor: Remove unused pages --- src/pages/ConfirmSignUp/ConfirmSignUp.tsx | 16 -- src/pages/ConfirmSignUp/ConfirmSignUpForm.tsx | 86 ------- src/pages/ConfirmSignUp/index.tsx | 5 - src/pages/OrderHistory/EmptyView.tsx | 18 -- src/pages/OrderHistory/OrderHistory.tsx | 87 -------- src/pages/OrderHistory/index.tsx | 5 - src/pages/SignIn/SignIn.tsx | 12 - src/pages/SignIn/SignInForm.tsx | 98 -------- src/pages/SignIn/index.tsx | 5 - src/pages/Signup/SignUp.tsx | 12 - src/pages/Signup/SignUpForm.tsx | 211 ------------------ src/pages/Signup/index.tsx | 5 - src/routes.tsx | 2 - src/utils/constants/routes.ts | 10 - 14 files changed, 572 deletions(-) delete mode 100644 src/pages/ConfirmSignUp/ConfirmSignUp.tsx delete mode 100644 src/pages/ConfirmSignUp/ConfirmSignUpForm.tsx delete mode 100644 src/pages/ConfirmSignUp/index.tsx delete mode 100644 src/pages/OrderHistory/EmptyView.tsx delete mode 100644 src/pages/OrderHistory/OrderHistory.tsx delete mode 100644 src/pages/OrderHistory/index.tsx delete mode 100644 src/pages/SignIn/SignIn.tsx delete mode 100644 src/pages/SignIn/SignInForm.tsx delete mode 100644 src/pages/SignIn/index.tsx delete mode 100644 src/pages/Signup/SignUp.tsx delete mode 100644 src/pages/Signup/SignUpForm.tsx delete mode 100644 src/pages/Signup/index.tsx diff --git a/src/pages/ConfirmSignUp/ConfirmSignUp.tsx b/src/pages/ConfirmSignUp/ConfirmSignUp.tsx deleted file mode 100644 index c897b9d..0000000 --- a/src/pages/ConfirmSignUp/ConfirmSignUp.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Flex } from "@chakra-ui/react"; -import Header from "../../components/Header"; -import Footer from "../../components/Footer"; -import ConfirmSignUpForm from "./ConfirmSignUpForm"; - -const ConfirmSignUp = () => { - return ( - -
- -