add cart backwards compatibility + default images (#628)

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,

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;
 }
 

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;
 };