PWA-3318::Prex Compatility (#4458)

* PWA-3318::Prex Compatility

* PWA-3318

* PWA-3318-v1

* PWA-3318-v1

Author: glo82145

packages/extensions/venia-product-recommendations/lib/components/Gallery/Gallery.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { string, shape, array } from 'prop-types';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
+import GalleryItem from '@magento/venia-ui/lib/components/Gallery/item';
+// inline loading of the css is janky, but the webpack loader gets blown out in local environment.
+import defaultGalleryClasses from '!!style-loader!css-loader?modules!./gallery.css';
+import defaultItemClasses from '!!style-loader!css-loader?modules!./item.css';
+
+/**
+ * Renders a Gallery of items. If items is an array of nulls Gallery will render
+ * a placeholder item for each.
+ *
+ * @params {Array} props.items an array of items to render
+ */
+export const Gallery = props => {
+    const galleryClasses = mergeClasses(
+        defaultGalleryClasses,
+        props.galleryClasses
+    );
+    const itemClasses = mergeClasses(defaultItemClasses, props.itemClasses);
+
+    const { items } = props;
+
+    const galleryItems = items.map((item, index) => {
+        if (item === null) {
+            return <GalleryItem key={index} />;
+        }
+        return <GalleryItem key={item.id} item={item} classes={itemClasses} />;
+    });
+
+    return (
+        <div className={galleryClasses.root}>
+            <div className={galleryClasses.items}>{galleryItems}</div>
+        </div>
+    );
+};
+
+Gallery.propTypes = {
+    galleryClasses: shape({
+        filters: string,
+        items: string,
+        root: string
+    }),
+    itemClasses: shape({
+        image: string,
+        imageContainer: string,
+        imagePlaceholder: string,
+        image_pending: string,
+        images: string,
+        images_pending: string,
+        name: string,
+        name_pending: string,
+        price: string,
+        price_pending: string,
+        root: string,
+        root_pending: string
+    }),
+    items: array.isRequired
+};

packages/extensions/venia-product-recommendations/lib/components/Gallery/gallery.css

@@ -0,0 +1,24 @@
+.root {
+    display: grid;
+    grid-template-areas:
+        'actions'
+        'items';
+    grid-template-columns: 1fr;
+    line-height: 1;
+}
+
+.items {
+    grid-template-columns: repeat(5, 1fr);
+    margin-left: 2em;
+    margin-right: 2em;
+    margin-bottom: 60px;
+    display: grid;
+    grid-area: items;
+    grid-gap: 1rem;
+}
+
+@media (max-width: 640px) {
+    .items {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}

packages/extensions/venia-product-recommendations/lib/components/Gallery/index.js

@@ -0,0 +1 @@
+export * from './Gallery';

packages/extensions/venia-product-recommendations/lib/components/Gallery/item.css

@@ -0,0 +1,3 @@
+.name {
+    font-weight: bold;
+}

packages/extensions/venia-product-recommendations/lib/components/VeniaProductRecommendations/ProductRecommendations.css

@@ -0,0 +1,11 @@
+.unitTitle {
+    text-align: center;
+    margin: 1.5em;
+    font-weight: 700;
+    font-size: 2.25rem;
+    font-family: 'Source Serif Pro';
+}
+
+.root a {
+    text-decoration: none;
+}

packages/extensions/venia-product-recommendations/lib/components/VeniaProductRecommendations/VeniaProductRecommendations.js

@@ -0,0 +1,126 @@
+import React, { useRef } from 'react';
+import { string, shape } from 'prop-types';
+
+import useRecsTrackingProps from '../../hooks/useRecsTrackingProps';
+import { Gallery } from '../Gallery/Gallery';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
+// inline loading of the css is janky, but the webpack loader gets blown  out in local environment.
+import defaultClasses from '!!style-loader!css-loader?modules!./ProductRecommendations.css';
+import useObserver from '../../hooks/useObserver';
+import { mse } from '@magento/venia-data-collector';
+
+export const VeniaProductRecommendations = props => {
+    const rendered = useRef([]);
+    const { units } = useRecsTrackingProps(props);
+    const { observeUnit } = useObserver();
+
+    const classes = mergeClasses(defaultClasses, props.classes);
+    const galleryClasses = mergeClasses(defaultClasses, props.galleryClasses);
+    const itemClasses = mergeClasses(defaultClasses, props.itemClasses);
+
+    const galleryUnits = units.map(recommendationUnit => {
+        if (recommendationUnit.totalProducts < 1) {
+            return null;
+        }
+
+        const items = recommendationUnit.products.map(shapeItem);
+        return (
+            <div
+                key={recommendationUnit.unitId}
+                data-unit-id={recommendationUnit.unitId}
+                className={classes.root}
+                ref={element => observeUnit(recommendationUnit, element)}
+            >
+                <div className={classes.unitTitle}>
+                    {recommendationUnit.storefrontLabel}
+                </div>
+                <Gallery
+                    galleryClasses={galleryClasses}
+                    itemClasses={itemClasses}
+                    items={items}
+                />
+            </div>
+        );
+    });
+
+    if (units && units.length > 0) {
+        units.forEach(recUnit => {
+            if (
+                recUnit.totalProducts > 0 &&
+                !rendered.current.includes(recUnit.unitId)
+            ) {
+                mse.publish.recsUnitRender(recUnit.unitId);
+                rendered.current.push(recUnit.unitId);
+            }
+        });
+
+        return <div>{galleryUnits}</div>;
+    } else {
+        return null;
+    }
+};
+
+VeniaProductRecommendations.propTypes = {
+    galleryClasses: shape({
+        filters: string,
+        items: string,
+        root: string
+    }),
+    itemClasses: shape({
+        image: string,
+        imageContainer: string,
+        imagePlaceholder: string,
+        image_pending: string,
+        images: string,
+        images_pending: string,
+        name: string,
+        name_pending: string,
+        price: string,
+        price_pending: string,
+        root: string,
+        root_pending: string
+    }),
+    classes: shape({
+        unitTitle: string,
+        root: string
+    }),
+    pageType: string.isRequired
+};
+
+// format data for GalleryItem, exported for testing
+export const shapeItem = item => {
+    if (item) {
+        const { url, image, prices, productId, currency, type } = item;
+
+        // derive the url_key and url_suffix from the url
+        // example url --> https://magento.com/blah/blah/url_key.url_suffix
+        const urlArray = String(url)
+            .split('/')
+            .splice(-1)[0]
+            .split('.');
+        const url_key = urlArray[0] + `.${urlArray[1]}`;
+        const url_suffix = `.${urlArray[1]}`;
+
+        const price = {
+            regularPrice: {
+                amount: {
+                    value: prices.minimum.regular,
+                    currency
+                }
+            }
+        };
+
+        return {
+            ...item,
+            id: productId,
+            small_image: image,
+            url_key,
+            url_suffix,
+            price,
+            // use inStock when the recs service provides it, use the commented out line below:
+            // stock_status: inStock ? "IN_STOCK" : "OUT_OF_STOCK";
+            stock_status: 'IN_STOCK',
+            type_id: type
+        };
+    } else return null;
+};

packages/extensions/venia-product-recommendations/lib/components/VeniaProductRecommendations/index.js

@@ -0,0 +1 @@
+export * from './ProductRecommendations';

packages/extensions/venia-product-recommendations/lib/constants/index.js

@@ -0,0 +1,2 @@
+export * from './localStorageConstants';
+export * from './pageTypes';

packages/extensions/venia-product-recommendations/lib/constants/localStorageConstants.js

@@ -0,0 +1,4 @@
+export const USER_VIEW_HISTORY_TIME_DECAY_KEY = 'ds-view-history-time-decay';
+export const USER_VIEW_HISTORY_KEY = 'ds-view-history';
+export const PURCHASE_HISTORY_KEY = 'ds-purchase-history';
+export const CART_CONTENTS_KEY = 'ds-cart';

packages/extensions/venia-product-recommendations/lib/constants/pageTypes.js

@@ -0,0 +1,8 @@
+export const CMS = 'CMS';
+export const CART = 'Cart';
+export const CATEGORY = 'Category';
+export const PRODUCT = 'Product';
+export const CHECKOUT = 'Checkout';
+export const PAGEBUILDER = 'PageBuilder';
+
+export const PageTypes = [CMS, CART, CATEGORY, CHECKOUT, PRODUCT, PAGEBUILDER];