Merge pull request #7 from FoxComm/feature/new-image-payload

Adapt the list and PDP to use the new image response

src/components/products-item/list-item.jsx

@@ -4,28 +4,41 @@ import React from 'react';
 import type { HTMLElement } from 'types';
 import styles from './list-item.css';
 import { browserHistory } from 'react-router';
+import _ from 'lodash';
 
 import Currency from 'ui/currency';
 
+type Image = {
+  alt?: string,
+  src: string,
+  title?: string,
+};
+
+type Album = {
+  name: string,
+  images: Array<Image>,
+};
+
 type Product = {
   id: number,
   productId: number,
   context: string,
   title: string,
   description: string,
-  images: ?Array<string>,
   salePrice: string,
   currency: string,
+  albums: ?Array<Album>,
 };
 
 class ListItem extends React.Component {
   props: Product;
 
   render(): HTMLElement {
-    const {productId, title, images, salePrice, currency} = this.props;
+    const {productId, title, albums, salePrice, currency} = this.props;
+    const previewImage = _.get(albums, [0, 'images', 0, 'src']);
 
-    const image = images && images.length > 0
-      ? <img src={images[0]} styleName="preview-image" />
+    const image = previewImage
+      ? <img src={previewImage} styleName="preview-image" />
       : null;
 
     const click = () => browserHistory.push(`/products/${productId}`);

src/core/modules/product-details.js

@@ -13,18 +13,21 @@ type Attribute = {
 
 type Attributes = { [key:string]: Attribute };
 
-type BakedProduct = {
-  id: number,
-  attributes: Attributes,
-  activeFrom?: string,
-  activeTo?: string,
+type Image = {
+  alt?: string,
+  src: string,
+  title?: string,
+};
+
+type Album = {
+  name: string,
+  images: Array<Image>,
 };
 
-type BakedSku = {
-  code: string,
+type Sku = {
+  id?: number,
   attributes: Attributes,
-  activeFrom?: string,
-  activeTo?: string,
+  albums: Array<Album>,
 };
 
 type Context = {
@@ -35,8 +38,9 @@ type Context = {
 export type ProductResponse = {
   id: number,
   context: Context,
-  product: BakedProduct,
-  skus: Array<BakedSku>,
+  attributes: Attributes,
+  skus: Array<Sku>,
+  albums: Array<Album>,
 };
 
 export function getNextId(current: number): Function {

src/pages/catalog/pdp.jsx

@@ -133,13 +133,15 @@ class Pdp extends Component {
   }
 
   get product(): Product {
-    const product = _.get(this.props.product, 'product.attributes', {});
+    const attributes = _.get(this.props.product, 'attributes', {});
     const price = _.get(this.firstSku, 'attributes.salePrice.v', {});
+    const images = _.get(this.props.product, ['albums', 0, 'images'], []);
+    const imageUrls = images.map(image => image.src);
 
     return {
-      title: _.get(product, 'title.v', ''),
-      description: _.get(product, 'description.v', ''),
-      images: _.get(product, 'images.v', []),
+      title: _.get(attributes, 'title.v', ''),
+      description: _.get(attributes, 'description.v', ''),
+      images: imageUrls,
       currency: _.get(price, 'currency', 'USD'),
       price: _.get(price, 'value', 0),
     };