@salesforce/retail-react-app 1.0.0-preview.0

package/app/mocks/searchResults.js

@@ -0,0 +1,144 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+export default {
+    brandSuggestions: {
+        suggestedTerms: [
+            {
+                originalTerm: 'dresss'
+            }
+        ]
+    },
+    categorySuggestions: {
+        categories: [
+            {
+                id: 'womens-clothing-dresses',
+                name: 'Dresses',
+                parentCategoryName: 'Clothing'
+            }
+        ],
+        suggestedPhrases: [
+            {
+                exactMatch: false,
+                phrase: 'Dresses'
+            }
+        ],
+        suggestedTerms: [
+            {
+                originalTerm: 'dresss',
+                terms: [
+                    {
+                        completed: false,
+                        corrected: true,
+                        exactMatch: false,
+                        value: 'dresses'
+                    },
+                    {
+                        completed: false,
+                        corrected: true,
+                        exactMatch: false,
+                        value: 'dress'
+                    }
+                ]
+            }
+        ]
+    },
+    contentSuggestions: {
+        suggestedTerms: [
+            {
+                originalTerm: 'dresss'
+            }
+        ]
+    },
+    customSuggestions: {
+        customSuggestions: ['Dresses'],
+        suggestedPhrases: [
+            {
+                exactMatch: false,
+                phrase: 'Dresses'
+            }
+        ],
+        suggestedTerms: [
+            {
+                originalTerm: 'dresss',
+                terms: [
+                    {
+                        completed: false,
+                        corrected: true,
+                        exactMatch: false,
+                        value: 'dresses'
+                    },
+                    {
+                        completed: false,
+                        corrected: true,
+                        exactMatch: false,
+                        value: 'dress'
+                    }
+                ]
+            }
+        ]
+    },
+    productSuggestions: {
+        products: [
+            {
+                currency: 'USD',
+                price: 195.0,
+                productId: '42416786M',
+                productName: 'Casual To Dressy Trousers'
+            },
+            {
+                currency: 'USD',
+                price: 195.0,
+                productId: '42416786-3M',
+                productName: 'Casual To Dressy Trousers'
+            },
+            {
+                currency: 'USD',
+                price: 195.0,
+                productId: '42416786-1M',
+                productName: 'Casual To Dressy Trousers'
+            },
+            {
+                currency: 'USD',
+                price: 195.0,
+                productId: '42416786-2M',
+                productName: 'Casual To Dressy Trousers'
+            },
+            {
+                currency: 'USD',
+                price: 129.0,
+                productId: '25592581M',
+                productName: 'Floral Dress'
+            }
+        ],
+        suggestedPhrases: [
+            {
+                exactMatch: false,
+                phrase: 'dresses'
+            }
+        ],
+        suggestedTerms: [
+            {
+                originalTerm: 'dresss',
+                terms: [
+                    {
+                        completed: false,
+                        corrected: true,
+                        exactMatch: false,
+                        value: 'dresses'
+                    },
+                    {
+                        completed: false,
+                        corrected: true,
+                        exactMatch: false,
+                        value: 'dressy'
+                    }
+                ]
+            }
+        ]
+    },
+    searchPhrase: 'dresss'
+}

package/app/mocks/variant-750518699578M.js

@@ -0,0 +1,434 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+export default {
+    currency: 'USD',
+    id: '750518699578M',
+    imageGroups: [
+        {
+            images: [
+                {
+                    alt: 'Black Single Pleat Athletic Fit Wool Suit, Black, large',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw68c99706/images/large/PG.52001RUBN4Q.BLACKFB.PZ.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw68c99706/images/large/PG.52001RUBN4Q.BLACKFB.PZ.jpg',
+                    title: 'Black Single Pleat Athletic Fit Wool Suit, Black'
+                },
+                {
+                    alt: 'Black Single Pleat Athletic Fit Wool Suit, Black, large',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw45d30402/images/large/PG.52001RUBN4Q.BLACKFB.BZ.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw45d30402/images/large/PG.52001RUBN4Q.BLACKFB.BZ.jpg',
+                    title: 'Black Single Pleat Athletic Fit Wool Suit, Black'
+                }
+            ],
+            variationAttributes: [
+                {
+                    id: 'color',
+                    values: [
+                        {
+                            value: 'BLACKFB'
+                        }
+                    ]
+                }
+            ],
+            viewType: 'large'
+        },
+        {
+            images: [
+                {
+                    alt: 'Black Single Pleat Athletic Fit Wool Suit, Black, medium',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw35242324/images/medium/PG.52001RUBN4Q.BLACKFB.PZ.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw35242324/images/medium/PG.52001RUBN4Q.BLACKFB.PZ.jpg',
+                    title: 'Black Single Pleat Athletic Fit Wool Suit, Black'
+                },
+                {
+                    alt: 'Black Single Pleat Athletic Fit Wool Suit, Black, medium',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw116e8397/images/medium/PG.52001RUBN4Q.BLACKFB.BZ.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw116e8397/images/medium/PG.52001RUBN4Q.BLACKFB.BZ.jpg',
+                    title: 'Black Single Pleat Athletic Fit Wool Suit, Black'
+                }
+            ],
+            variationAttributes: [
+                {
+                    id: 'color',
+                    values: [
+                        {
+                            value: 'BLACKFB'
+                        }
+                    ]
+                }
+            ],
+            viewType: 'medium'
+        },
+        {
+            images: [
+                {
+                    alt: 'Black Single Pleat Athletic Fit Wool Suit, Black, small',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw43b167a3/images/small/PG.52001RUBN4Q.BLACKFB.PZ.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw43b167a3/images/small/PG.52001RUBN4Q.BLACKFB.PZ.jpg',
+                    title: 'Black Single Pleat Athletic Fit Wool Suit, Black'
+                },
+                {
+                    alt: 'Black Single Pleat Athletic Fit Wool Suit, Black, small',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwdcb6bc41/images/small/PG.52001RUBN4Q.BLACKFB.BZ.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwdcb6bc41/images/small/PG.52001RUBN4Q.BLACKFB.BZ.jpg',
+                    title: 'Black Single Pleat Athletic Fit Wool Suit, Black'
+                }
+            ],
+            variationAttributes: [
+                {
+                    id: 'color',
+                    values: [
+                        {
+                            value: 'BLACKFB'
+                        }
+                    ]
+                }
+            ],
+            viewType: 'small'
+        },
+        {
+            images: [
+                {
+                    alt: 'Black Single Pleat Athletic Fit Wool Suit, Black, swatch',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw5c9bc6f6/images/swatch/PG.52001RUBN4Q.BLACKFB.CP.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw5c9bc6f6/images/swatch/PG.52001RUBN4Q.BLACKFB.CP.jpg',
+                    title: 'Black Single Pleat Athletic Fit Wool Suit, Black'
+                }
+            ],
+            variationAttributes: [
+                {
+                    id: 'color',
+                    values: [
+                        {
+                            value: 'BLACKFB'
+                        }
+                    ]
+                }
+            ],
+            viewType: 'swatch'
+        }
+    ],
+    inventory: {
+        ats: 5,
+        backorderable: false,
+        id: 'inventory_m',
+        orderable: true,
+        preorderable: false,
+        stockLevel: 5
+    },
+    longDescription:
+        'This suit is great for any occasion. Add a shirt and a tie and you are ready for any event. ',
+    master: {
+        masterId: '25604524M',
+        orderable: true,
+        price: 299.99
+    },
+    minOrderQuantity: 1,
+    name: 'Black Single Pleat Athletic Fit Wool Suit',
+    pageDescription:
+        'This suit is great for any occasion. Add a shirt and a tie and you are ready for any event. ',
+    pageTitle: 'Black Single Pleat Athletic Fit Wool Suit',
+    price: 299.99,
+    shortDescription:
+        'This suit is great for any occasion. Add a shirt and a tie and you are ready for any event. ',
+    stepQuantity: 1,
+    type: {
+        variant: true
+    },
+    upc: '750518699578',
+    validFrom: {
+        default: '2011-02-07T05:00:00.000Z'
+    },
+    variants: [
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699660M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '050',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699585M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '039',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699653M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '048',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699615M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '042',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699608M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '041',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699646M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '046',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699592M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '040',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699622M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '043',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699578M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '038',
+                width: 'V'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699875M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '046',
+                width: 'L'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699868M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '044',
+                width: 'L'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699820M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '040',
+                width: 'L'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699882M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '048',
+                width: 'L'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699851M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '043',
+                width: 'L'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699844M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '042',
+                width: 'L'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699769M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '044',
+                width: 'S'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699721M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '040',
+                width: 'S'
+            }
+        },
+        {
+            orderable: true,
+            price: 299.99,
+            productId: '750518699745M',
+            variationValues: {
+                color: 'BLACKFB',
+                size: '042',
+                width: 'S'
+            }
+        }
+    ],
+    variationAttributes: [
+        {
+            id: 'color',
+            name: 'Color',
+            values: [
+                {
+                    name: 'Black',
+                    orderable: true,
+                    value: 'BLACKFB'
+                }
+            ]
+        },
+        {
+            id: 'size',
+            name: 'Size',
+            values: [
+                {
+                    name: '38',
+                    orderable: true,
+                    value: '038'
+                },
+                {
+                    name: '39',
+                    orderable: true,
+                    value: '039'
+                },
+                {
+                    name: '40',
+                    orderable: true,
+                    value: '040'
+                },
+                {
+                    name: '41',
+                    orderable: true,
+                    value: '041'
+                },
+                {
+                    name: '42',
+                    orderable: true,
+                    value: '042'
+                },
+                {
+                    name: '43',
+                    orderable: true,
+                    value: '043'
+                },
+                {
+                    name: '44',
+                    orderable: false,
+                    value: '044'
+                },
+                {
+                    name: '46',
+                    orderable: true,
+                    value: '046'
+                },
+                {
+                    name: '48',
+                    orderable: true,
+                    value: '048'
+                },
+                {
+                    name: '50',
+                    orderable: true,
+                    value: '050'
+                }
+            ]
+        },
+        {
+            id: 'width',
+            name: 'Width',
+            values: [
+                {
+                    name: 'Short',
+                    orderable: false,
+                    value: 'S'
+                },
+                {
+                    name: 'Regular',
+                    orderable: true,
+                    value: 'V'
+                },
+                {
+                    name: 'Long',
+                    orderable: false,
+                    value: 'L'
+                }
+            ]
+        }
+    ],
+    variationValues: {
+        color: 'BLACKFB',
+        size: '038',
+        width: 'V'
+    },
+    c_color: 'BLACKFB',
+    c_isNew: true,
+    c_refinementColor: 'black',
+    c_size: '038',
+    c_width: 'V'
+}

package/app/page-designer/README.md

@@ -0,0 +1,102 @@
+        ____                      ____            _
+       / __ \____ _____ ____     / __ \___  _____(_)___ _____  ___  _____
+      / /_/ / __ `/ __ `/ _ \   / / / / _ \/ ___/ / __ `/ __ \/ _ \/ ___/
+     / ____/ /_/ / /_/ /  __/  / /_/ /  __(__  ) / /_/ / / / /  __/ /
+    /_/    \__,_/\__, /\___/  /_____/\___/____/_/\__, /_/ /_/\___/_/
+                /____/                          /____/
+
+---
+
+This folder contains the React components used when rendering the pages from [Page Designer](https://documentation.b2c.commercecloud.salesforce.com/DOC2/topic/com.demandware.dochelp/content/b2c_commerce/topics/page_designer/b2c_creating_pd_pages.html).
+
+Use this folder to add React components that can render Page Designer components that have been serialized to JSON.
+
+> NOTE: If you are creating components that do not already exist in Page Designer, follow [this](https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp) guide to first create your Page Designer components before creating their matching PWA-Kit React components.
+
+This folder includes components for layout and visualization of images, grids, and carousels.
+
+**By default, Page Designer integration is not enabled in the Retail React App.** Additionally, to utilize the `shopperExperience`
+API used in the example below your commerce API client (SLAS client) needs to include the `sfcc.shopper-experience` scope.
+See [Authorization for Shopper APIs](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html)
+for more information on configuring your SLAS client.
+
+## Folder Structure
+
+-   **`/assets`** - Visual components used in Page Designer. Includes `<Image>` and `<ImageWithText>` as well as any other Page Designer assets that you want to use in your PWA-Kit app. If you need to visualize a component, add it here.
+-   **`/layouts`** - Components responsible for layout. Includes various grids and a `<Carousel>` component.
+
+## Sample Usage
+
+Create a new file called `app/pages/page-viewer/index.jsx`, and add the following:
+
+```jsx
+// app/pages/page-viewer/index.jsx
+
+import React from 'react'
+import {useParams} from 'react-router-dom'
+import {Box} from '@chakra-ui/react'
+import {usePage} from '@salesforce/commerce-sdk-react'
+import {Page} from '@salesforce/commerce-sdk-react/components'
+import {ImageTile, ImageWithText} from '../../page-designer/assets'
+import {
+    Carousel,
+    MobileGrid1r1c,
+    MobileGrid2r1c,
+    MobileGrid2r2c,
+    MobileGrid2r3c,
+    MobileGrid3r1c,
+    MobileGrid3r2c
+} from '../../page-designer/layouts'
+
+import {HTTPError, HTTPNotFound} from '@salesforce/pwa-kit-react-sdk/ssr/universal/errors'
+
+const PAGEDESIGNER_TO_COMPONENT = {
+    'commerce_assets.photoTile': ImageTile,
+    'commerce_assets.imageAndText': ImageWithText,
+    'commerce_layouts.carousel': Carousel,
+    'commerce_layouts.mobileGrid1r1c': MobileGrid1r1c,
+    'commerce_layouts.mobileGrid2r1c': MobileGrid2r1c,
+    'commerce_layouts.mobileGrid2r2c': MobileGrid2r2c,
+    'commerce_layouts.mobileGrid2r3c': MobileGrid2r3c,
+    'commerce_layouts.mobileGrid3r1c': MobileGrid3r1c,
+    'commerce_layouts.mobileGrid3r2c': MobileGrid3r2c
+}
+
+const PageViewer = () => {
+    const {pageId} = useParams()
+    const {data: page, error}= usePage({parameters: {pageId}})
+
+    if (error) {
+        let ErrorClass = error.response?.status === 404 ? HTTPNotFound : HTTPError
+        throw new ErrorClass(error.response?.statusText)
+    }
+
+    return (
+        <Box layerStyle={'page'}>
+            <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
+        </Box>
+    )
+}
+
+PageViewer.displayName = 'PageViewer'
+
+export default PageViewer
+```
+
+Open `app/routes.jsx` and add a route for `<PageViewer>`:
+
+```diff
+// app/routes.jsx
+
+// Create a loadable page for `page-viewer`.
++ const PageViewer = loadable(() => import('./pages/page-viewer'), {fallback})
+
+
+// Add a route.
++    {
++        path: '/page-viewer/:pageId',
++        component: PageViewer
++    },
+```
+
+Using the local development server, you can now see Page Designer pages rendered in React.js at `http://localhost:3000/page-viewer/:pageid` by providing their `pageid` defined in Business Manager.