make compatible with multiple store gallery images

src/store/components/AdminItemPage/index.tsx

@@ -5,7 +5,7 @@ import * as Yup from 'yup';
 import Config from '../../../config';
 import { history } from '../../../redux_store';
 import { PublicMerchCollection, PublicMerchItem } from '../../../types';
-import { fetchService, notify } from '../../../utils';
+import { fetchService, getDefaultMerchItemPicture, notify } from '../../../utils';
 
 import OptionDisplay from '../OptionDisplay';
 import StoreButton from '../StoreButton';
@@ -104,7 +104,7 @@ const AdminItemPage: React.FC<AdminItemPageProps> = (props) => {
     collection: item?.collection?.uuid ?? '',
     itemName: item?.itemName ?? '',
     description: item?.description ?? '',
-    existingPicture: item?.merchPhotos[0]?.uploadedPhoto,
+    existingPicture: getDefaultMerchItemPicture(item),
     newPicture: undefined,
     hidden: item?.hidden ?? false,
     monthlyLimit: item?.monthlyLimit.toString() ?? '',

src/store/components/CartDisplay/index.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { Button, Select, Table, Typography } from 'antd';
 
 import { CartItem, PublicMerchItem, PublicMerchItemOption } from '../../../types';
-import { toProperCase } from '../../../utils';
+import { getDefaultMerchItemPicture, toProperCase } from '../../../utils';
 import { addToCart, editInCart, removeFromCart } from '../../storeActions';
 
 import './style.less';
@@ -132,7 +132,7 @@ const CartDisplay: React.FC<CartDisplayProps> = (props) => {
 
   const renderItemImage = (item: PublicMerchItem) => (
     <div className="image-container">
-      <img className="image" src={item.merchPhotos[0]?.uploadedPhoto} alt={item.itemName} />
+      <img className="image" src={getDefaultMerchItemPicture(item)} alt={item.itemName} />
     </div>
   );
 

src/store/components/ItemCard/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { PublicMerchItem } from '../../../types';
-import { processItem, processItemPrice } from '../../../utils';
+import { getDefaultMerchItemPicture, processItem, processItemPrice } from '../../../utils';
 
 import StorePlus from '../../../assets/icons/store-plus-icon.svg';
 import EditableIcon from '../../../assets/icons/editable-icon.svg';
@@ -36,7 +36,9 @@ const ItemCard: React.FC<ItemCardProps> = (props) => {
     return null;
   }
 
-  const { uuid, itemName, description, merchPhotos, hidden } = item;
+  const { uuid, itemName, description, hidden } = item;
+
+  const picture = getDefaultMerchItemPicture(item);
 
   const { outOfStock } = processItem(item.options);
 
@@ -50,7 +52,7 @@ const ItemCard: React.FC<ItemCardProps> = (props) => {
       <Link to={`/store/item/${uuid}`}>
         <div className={`item-card-contents${outOfStock ? ' out-of-stock' : ''}`}>
           <div className="item-card-image-container">
-            <img className="item-card-image" src={merchPhotos[0]?.uploadedPhoto} alt={description} />
+            <img className="item-card-image" src={picture} alt={description} />
           </div>
           <div className="item-card-name">
             {itemName}

src/store/components/ItemPage/index.tsx

@@ -5,7 +5,7 @@ import { replace } from 'connected-react-router';
 import { Modal } from 'antd';
 
 import { PublicMerchItemWithPurchaseLimits, PublicMerchItemOption, UserAccessType } from '../../../types';
-import { processItem, processItemPrice } from '../../../utils';
+import { getDefaultMerchItemPicture, processItem, processItemPrice } from '../../../utils';
 import { addToCart } from '../../storeActions';
 
 import StoreHeader from '../StoreHeader';
@@ -42,7 +42,8 @@ const ItemPage: React.FC<ItemPageProps> = (props) => {
   const { outOfStock: optionOutOfStock } = currentOption ? processItem([currentOption]) : { outOfStock: false };
   const itemOptionPrice = currentOption ? processItemPrice([currentOption]) : null;
 
-  const { itemName, description, hasVariantsEnabled, options, merchPhotos, hidden } = item;
+  const { itemName, description, hasVariantsEnabled, options, hidden } = item;
+  const picture = getDefaultMerchItemPicture(item);
 
   const limitHit = item.monthlyRemaining === 0 || item.lifetimeRemaining === 0;
   let limitMessage;
@@ -60,7 +61,7 @@ const ItemPage: React.FC<ItemPageProps> = (props) => {
       <StoreHeader breadcrumb breadcrumbTitle="Shopping" breadcrumbLocation="/store" showBalance showCart />
       <div className="item-page">
         <div className="item-image-container">
-          <img className="item-image" src={merchPhotos[0]?.uploadedPhoto} alt={description} />
+          <img className="item-image" src={picture} alt={description} />
         </div>
         <div className="item-contents">
           <h2 className="item-name">{itemName}</h2>
@@ -141,7 +142,7 @@ const ItemPage: React.FC<ItemPageProps> = (props) => {
       >
         <p className="item-page-modal-title">Added to cart</p>
         <div className="item-page-modal-content">
-          <img className="item-page-modal-item-image" src={merchPhotos[0]?.uploadedPhoto} alt={description} />
+          <img className="item-page-modal-item-image" src={picture} alt={description} />
           <div className="item-page-modal-item-details">
             <p className="item-page-modal-item-title">{itemName}</p>
             {hasVariantsEnabled && currentOption && currentOption.metadata && (

src/types.ts

@@ -83,7 +83,7 @@ export interface PublicMerchItem {
     uploadedPhoto: string;
     uploadedAt: string;
     position: number;
-  };
+  }[];
   description: string;
   monthlyLimit: number;
   lifetimeLimit: number;

src/utils.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { notification } from 'antd';
 
 import Storage from './storage';
-import { HttpRequestMethod, MimeType, FetchServiceOptions, PublicMerchItemOption, OrderStatus } from './types';
+import { HttpRequestMethod, MimeType, FetchServiceOptions, PublicMerchItemOption, OrderStatus, PublicMerchItem } from './types';
 
 import DiamondDisplay from './store/components/DiamondDisplay';
 
@@ -309,3 +309,15 @@ export const parseOrderStatus = (status: OrderStatus) => {
       return '';
   }
 };
+
+/**
+ * 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) {
+    // 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;
+};