From bc0c010de1fa7d3d6b89e9dfb3e1d4bc08a6c28e Mon Sep 17 00:00:00 2001
From: Alex Zhang <acz001@ucsd.edu>
Date: Mon, 1 Jan 2024 12:55:27 -0800
Subject: [PATCH] add cart backwards compatibility + default images (#628)

---
 src/store/components/OrderDisplay/index.tsx | 3 ++-
 src/types.ts                                | 5 ++++-
 src/utils.tsx                               | 8 ++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/store/components/OrderDisplay/index.tsx b/src/store/components/OrderDisplay/index.tsx
index b1028089..a588c849 100644
--- a/src/store/components/OrderDisplay/index.tsx
+++ b/src/store/components/OrderDisplay/index.tsx
@@ -87,10 +87,11 @@ const OrderDisplay: React.FC<OrderDisplayProps> = (props) => {
   const updatedItems = Array.from(itemMap, ([, value]) => value);
 
   const orderData = updatedItems.map((orderItem) => {
+    const picture = orderItem.option.item.uploadedPhoto;
     const {
       uuid,
       option: {
-        item: { itemName, picture },
+        item: { itemName },
         metadata,
       },
       quantity,
diff --git a/src/types.ts b/src/types.ts
index c79aaa03..8a4e77d9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -78,6 +78,9 @@ export interface PublicMerchItem {
   uuid: Uuid;
   itemName: string;
   collection?: PublicMerchCollection;
+  // Old remnant of when merch photos were only restricted to one.
+  // This is kept here so older carts are still backwards compatible.
+  picture?: string;
   merchPhotos: {
     uuid: string;
     uploadedPhoto: string;
@@ -106,7 +109,7 @@ export interface CartItem {
 export interface PublicCartMerchItem {
   uuid: Uuid;
   itemName: string;
-  picture: string;
+  uploadedPhoto: string;
   description: string;
 }
 
diff --git a/src/utils.tsx b/src/utils.tsx
index 21f07c7d..cf0fafc7 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { notification } from 'antd';
+import NoImage from './assets/graphics/cat404.png';
 
 import Storage from './storage';
 import { HttpRequestMethod, MimeType, FetchServiceOptions, PublicMerchItemOption, OrderStatus, PublicMerchItem } from './types';
@@ -314,10 +315,13 @@ export const parseOrderStatus = (status: OrderStatus) => {
  * Given a merch item, return the first picture associated with it.
  */
 export const getDefaultMerchItemPicture = (item: PublicMerchItem | undefined): string | undefined => {
-  if (item && item.merchPhotos.length !== 0) {
+  if (item?.picture) {
+    return item.picture;
+  }
+  if (item?.merchPhotos?.length) {
     // Get the item here with the smallest position (since it doesn't always arrive sorted)
     item.merchPhotos.sort((a, b) => a.position - b.position);
     return item.merchPhotos[0].uploadedPhoto;
   }
-  return undefined;
+  return NoImage;
 };