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

package/app/pages/reset-password/index.test.jsx

@@ -0,0 +1,141 @@
+/*
+ * 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
+ */
+import React from 'react'
+import {screen, waitFor, within} from '@testing-library/react'
+import {rest} from 'msw'
+import {
+    createPathWithDefaults,
+    renderWithProviders
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import ResetPassword from '.'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+
+const mockRegisteredCustomer = {
+    authType: 'registered',
+    customerId: 'registeredCustomerId',
+    customerNo: 'testno',
+    email: 'darek@test.com',
+    firstName: 'Tester',
+    lastName: 'Testing',
+    login: 'darek@test.com'
+}
+
+const MockedComponent = () => {
+    return (
+        <div>
+            <ResetPassword />
+        </div>
+    )
+}
+
+// Set up and clean up
+beforeEach(() => {
+    jest.resetModules()
+    window.history.pushState({}, 'Reset Password', createPathWithDefaults('/reset-password'))
+    global.server.use(
+        rest.post('*/customers', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockRegisteredCustomer))
+        }),
+        rest.get('*/customers/:customerId', (req, res, ctx) => {
+            const {customerId} = req.params
+            if (customerId === 'customerId') {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(200),
+                    ctx.json({
+                        authType: 'guest',
+                        customerId: 'customerid'
+                    })
+                )
+            }
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockRegisteredCustomer))
+        })
+    )
+})
+afterEach(() => {
+    jest.resetModules()
+    localStorage.clear()
+    jest.clearAllMocks()
+    window.history.pushState({}, 'Reset Password', createPathWithDefaults('/reset-password'))
+})
+
+test('Allows customer to go to sign in page', async () => {
+    // render our test component
+    const {user} = renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+
+    await user.click(await screen.findByText('Sign in'))
+
+    await waitFor(() => {
+        expect(window.location.pathname).toBe('/uk/en-GB/login')
+    })
+})
+
+test('Allows customer to generate password token', async () => {
+    global.server.use(
+        rest.post('*/create-reset-token', (req, res, ctx) =>
+            res(
+                ctx.delay(0),
+                ctx.json({
+                    email: 'foo@test.com',
+                    expiresInMinutes: 10,
+                    login: 'foo@test.com',
+                    resetToken: 'testresettoken'
+                })
+            )
+        )
+    )
+    // render our test component
+    const {user} = renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+
+    // enter credentials and submit
+    await user.type(await screen.findByLabelText('Email'), 'foo@test.com')
+    await user.click(
+        within(await screen.findByTestId('sf-auth-modal-form')).getByText(/reset password/i)
+    )
+
+    expect(await screen.findByText(/password reset/i, {}, {timeout: 12000})).toBeInTheDocument()
+
+    await waitFor(() => {
+        expect(screen.getByText(/foo@test.com/i)).toBeInTheDocument()
+    })
+
+    await user.click(screen.getByText('Back to Sign In'))
+
+    await waitFor(() => {
+        expect(window.location.pathname).toBe('/uk/en-GB/login')
+    })
+})
+
+test('Renders error message from server', async () => {
+    global.server.use(
+        rest.post('*/create-reset-token', (req, res, ctx) =>
+            res(
+                ctx.delay(0),
+                ctx.status(500),
+                ctx.json({
+                    detail: 'Something went wrong',
+                    title: 'Error',
+                    type: '/error'
+                })
+            )
+        )
+    )
+    const {user} = renderWithProviders(<MockedComponent />)
+
+    await user.type(await screen.findByLabelText('Email'), 'foo@test.com')
+    await user.click(
+        within(await screen.findByTestId('sf-auth-modal-form')).getByText(/reset password/i)
+    )
+
+    await waitFor(() => {
+        expect(screen.getByText('500 Internal Server Error')).toBeInTheDocument()
+    })
+})

package/app/request-processor.js

@@ -0,0 +1,118 @@
+/*
+ * 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
+ */
+
+// This is an EXAMPLE file. To enable request processing, rename it to
+// 'request-processor.js' and update the processRequest function so that
+// it processes requests in whatever way your project requires.
+
+// Uncomment the following line for the example code to work.
+import {QueryParameters} from '@salesforce/pwa-kit-runtime/utils/ssr-request-processing'
+
+/**
+ * The processRequest function is called for *every* non-proxy, non-bundle
+ * request received. That is, all requests that will result in pages being
+ * rendered, or the Express app requestHook function being invoked. Because
+ * this function runs for every request, it is important that processing
+ * take as little time as possible. Do not make external requests from
+ * this code. Make your code error tolerant; throwing an error from
+ * this function will cause a 500 error response to be sent to the
+ * requesting client.
+ *
+ * The processRequest function is passed details of the incoming request,
+ * function to support request-class setting plus parameters that refer to
+ * the target for which this code is being run.
+ *
+ * The function must return an object with 'path' and 'querystring'. These
+ * may be the same values passed in, or modified values.
+ *
+ * Processing query strings can be challenging, because there are multiple
+ * formats in use, URL-quoting may be required, and the order of parameters
+ * in the URL may be important. To avoid issues, use the QueryParameters
+ * class from the SDK's 'utils/ssr-request-processing' module. This
+ * class will correctly preserve the order, case, values and encoding of
+ * the parameters. The QueryParameters class is documented in the SDK.
+ *
+ * @param path {String} the path part of the URL, beginning with a '/'
+ * @param querystring {String} the query string part of the URL, without
+ * any initial '?'
+ * @param headers {Headers} the headers of the incoming request. This should
+ * be considered read-only (although header values can be changed, most headers
+ * are not passed to the origin, so changes have no effect).
+ * @param setRequestClass {function} call this with a string to set the
+ * "class" of the incoming request. By default, requests have no class.
+ * @param parameters {Object}
+ * @param parameters.appHostname {String} the "application host name" is the
+ * hostname to which requests are sent for this target: the website's hostname.
+ * @param parameters.deployTarget {String} the target's id. Use this to have
+ * different processing for different targets.
+ * @param parameters.proxyConfigs {Object[]} an array of proxy configuration
+ * object, each one containing protocol, host and path for a proxy. Use this
+ * to have different processing for different backends.
+ * @returns {{path: String, querystring: String}}
+ */
+export const processRequest = ({
+    // Uncomment the following lines for the example code to work.
+    // headers,
+    // setRequestClass,
+    // parameters,
+    path,
+    querystring
+}) => {
+    // This is an EXAMPLE processRequest implementation. You should
+    // replace it with code that processes your requests as needed.
+
+    // This example code will remove any of the parameters whose keys appear
+    // in the 'exclusions' array.
+    const exclusions = [
+        // 'gclid',
+        // 'utm_campaign',
+        // 'utm_content',
+        // 'utm_medium',
+        // 'utm_source'
+    ]
+
+    // This is a performance optimization for SLAS.
+    // On client side, browser always follow the redirect
+    // to /callback but the response is always the same.
+    // We strip out the unique query parameters so this
+    // endpoint is cached at the CDN level
+    if (path === '/callback') {
+        exclusions.push('usid')
+        exclusions.push('code')
+    }
+
+    // Build a first QueryParameters object from the given querystring
+    const incomingParameters = new QueryParameters(querystring)
+
+    // Build a second QueryParameters from the first, with all
+    // excluded parameters removed
+    const filteredParameters = QueryParameters.from(
+        incomingParameters.parameters.filter(
+            // parameter.key is always lower-case
+            (parameter) => !exclusions.includes(parameter.key)
+        )
+    )
+
+    // Re-generate the querystring
+    querystring = filteredParameters.toString()
+
+    /***************************************************************************
+    // This example code will detect bots by examining the user-agent,
+    // and will set the request class to 'bot' for all such requests.
+    const ua = headers.getHeader('user-agent')
+    // This check
+    const botcheck = /bot|crawler|spider|crawling/i
+    if (botcheck.test(ua)) {
+        setRequestClass('bot')
+    }
+    ***************************************************************************/
+    // Return the path unchanged, and the updated query string
+    return {
+        path,
+        querystring
+    }
+}

package/app/request-processor.test.js

@@ -0,0 +1,23 @@
+/*
+ * 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
+ */
+import {processRequest} from '@salesforce/retail-react-app/app/request-processor'
+
+describe('processRequest', () => {
+    test('returns valid values', () => {
+        const result = processRequest({path: 'path', querystring: 'querystring'})
+
+        expect(result.path).toEqual(expect.any(String))
+        expect(result.querystring).toEqual(expect.any(String))
+    })
+
+    test('SLAS callback parameters are removed', () => {
+        const result = processRequest({path: '/callback', querystring: 'usid=1&code=2&test=3'})
+
+        expect(result.path).toBe('/callback')
+        expect(result.querystring).toBe('test=3')
+    })
+})

package/app/routes.jsx

@@ -0,0 +1,111 @@
+/*
+ * 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
+ */
+
+/* istanbul ignore file */
+// NOTE!
+// This file is being ignored in the test coverage report for now. It reports `0%` functions
+// tested, which brings down the overall coverage and blocks CI. There are tests still, but
+// we don't want it to count toward coverage until we figure out how to cover the `functions`
+// metric for this file in its test.
+
+import React from 'react'
+import loadable from '@loadable/component'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+// Components
+import {Skeleton} from '@chakra-ui/react'
+import {configureRoutes} from '@salesforce/retail-react-app/app/utils/routes-utils'
+
+const fallback = <Skeleton height="75vh" width="100%" />
+
+// Pages
+const Home = loadable(() => import('./pages/home'), {fallback})
+const Login = loadable(() => import('./pages/login'), {fallback})
+const Registration = loadable(() => import('./pages/registration'), {fallback})
+const ResetPassword = loadable(() => import('./pages/reset-password'), {fallback})
+const Account = loadable(() => import('./pages/account'), {fallback})
+const Cart = loadable(() => import('./pages/cart'), {fallback})
+const Checkout = loadable(() => import('./pages/checkout'), {fallback})
+const CheckoutConfirmation = loadable(() => import('./pages/checkout/confirmation'), {fallback})
+const LoginRedirect = loadable(() => import('./pages/login-redirect'), {fallback})
+const ProductDetail = loadable(() => import('./pages/product-detail'), {fallback})
+const ProductList = loadable(() => import('./pages/product-list'), {fallback})
+const Wishlist = loadable(() => import('./pages/account/wishlist'), {fallback})
+const PageNotFound = loadable(() => import('./pages/page-not-found'))
+
+export const routes = [
+    {
+        path: '/',
+        component: Home,
+        exact: true
+    },
+    {
+        path: '/login',
+        component: Login,
+        exact: true
+    },
+    {
+        path: '/registration',
+        component: Registration,
+        exact: true
+    },
+    {
+        path: '/reset-password',
+        component: ResetPassword,
+        exact: true
+    },
+    {
+        path: '/account',
+        component: Account
+    },
+    {
+        path: '/checkout',
+        component: Checkout,
+        exact: true
+    },
+    {
+        path: '/checkout/confirmation/:orderNo',
+        component: CheckoutConfirmation
+    },
+    {
+        path: '/callback',
+        component: LoginRedirect,
+        exact: true
+    },
+    {
+        path: '/cart',
+        component: Cart,
+        exact: true
+    },
+    {
+        path: '/product/:productId',
+        component: ProductDetail
+    },
+    {
+        path: '/search',
+        component: ProductList
+    },
+    {
+        path: '/category/:categoryId',
+        component: ProductList
+    },
+    {
+        path: '/account/wishlist',
+        component: Wishlist
+    },
+    {
+        path: '*',
+        component: PageNotFound
+    }
+]
+
+export default () => {
+    const config = getConfig()
+    return configureRoutes(routes, config, {
+        ignoredRoutes: ['/callback', '*']
+    })
+}

package/app/routes.test.js

@@ -0,0 +1,13 @@
+/*
+ * 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
+ */
+import routes from '@salesforce/retail-react-app/app/routes'
+
+describe('Routes', () => {
+    test('exports a valid react-router configuration', () => {
+        expect(Array.isArray(routes) || typeof routes === 'function').toBe(true)
+    })
+})

package/app/ssr.js

@@ -0,0 +1,70 @@
+/*
+ * 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
+ */
+/* eslint-disable @typescript-eslint/no-var-requires */
+'use strict'
+
+const path = require('path')
+const {getRuntime} = require('@salesforce/pwa-kit-runtime/ssr/server/express')
+const {isRemote} = require('@salesforce/pwa-kit-runtime/utils/ssr-server')
+const {getConfig} = require('@salesforce/pwa-kit-runtime/utils/ssr-config')
+const helmet = require('helmet')
+
+const options = {
+    // The build directory (an absolute path)
+    buildDir: path.resolve(process.cwd(), 'build'),
+
+    // The cache time for SSR'd pages (defaults to 600 seconds)
+    defaultCacheTimeSeconds: 600,
+
+    // This is the value of the 'mobify' object from package.json
+    mobify: getConfig(),
+
+    // The port that the local dev server listens on
+    port: 3000,
+
+    // The protocol on which the development Express app listens.
+    // Note that http://localhost is treated as a secure context for development.
+    protocol: 'http'
+}
+
+const runtime = getRuntime()
+
+const {handler} = runtime.createHandler(options, (app) => {
+    // Set HTTP security headers
+    app.use(
+        helmet({
+            contentSecurityPolicy: {
+                useDefaults: true,
+                directives: {
+                    'img-src': ["'self'", '*.commercecloud.salesforce.com', 'data:'],
+                    'script-src': ["'self'", "'unsafe-eval'", 'storage.googleapis.com'],
+                    'connect-src': ["'self'", 'api.cquotient.com'],
+
+                    // Do not upgrade insecure requests for local development
+                    'upgrade-insecure-requests': isRemote() ? [] : null
+                }
+            },
+            hsts: isRemote()
+        })
+    )
+
+    // Handle the redirect from SLAS as to avoid error
+    app.get('/callback?*', (req, res) => {
+        // This endpoint does nothing and is not expected to change
+        // Thus we cache it for a year to maximize performance
+        res.set('Cache-Control', `max-age=31536000`)
+        res.send()
+    })
+    app.get('/robots.txt', runtime.serveStaticFile('static/robots.txt'))
+    app.get('/favicon.ico', runtime.serveStaticFile('static/ico/favicon.ico'))
+
+    app.get('/worker.js(.map)?', runtime.serveServiceWorker)
+    app.get('*', runtime.render)
+})
+// SSR requires that we export a single handler function called 'get', that
+// supports AWS use of the server that we created above.
+exports.get = handler

package/app/static/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "example.com",
+  "short_name": "example.com",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#4e439b",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "./img/global/app-icon-192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "./img/global/app-icon-512.png",
+      "sizes": "512x512"
+    }
+  ]
+}
+

package/app/static/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/app/theme/components/base/accordion.js

@@ -0,0 +1,21 @@
+/*
+ * 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 {
+    baseStyle: {
+        button: {
+            paddingLeft: 0,
+
+            _hover: {
+                background: 'none'
+            }
+        },
+        panel: {
+            paddingTop: 0,
+            paddingBottom: 0
+        }
+    }
+}

package/app/theme/components/base/alert.js

@@ -0,0 +1,17 @@
+/*
+ * 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 {
+    variants: {
+        subtle: (props) => ({
+            container: {
+                borderColor: `${props.colorScheme || 'green'}.600`,
+                borderWidth: 1,
+                borderStyle: 'solid'
+            }
+        })
+    }
+}

package/app/theme/components/base/badge.js

@@ -0,0 +1,25 @@
+/*
+ * 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 {
+    variants: {
+        notification: {
+            display: 'inline-flex',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            minWidth: 5,
+            height: 5,
+            color: 'white',
+            fontSize: 'xs',
+            backgroundColor: 'blue.500',
+            border: '1px solid',
+            borderColor: 'white',
+            borderRadius: 'full'
+        }
+    }
+}

package/app/theme/components/base/button.js

@@ -0,0 +1,77 @@
+/*
+ * 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 {
+    baseStyle: {
+        borderRadius: 'base'
+    },
+    variants: {
+        solid: (props) =>
+            props.colorScheme === 'blue'
+                ? {
+                      backgroundColor: 'blue.600',
+                      color: 'white',
+                      _hover: {bg: 'blue.700', _disabled: {bg: 'blue.300'}},
+                      _active: {bg: 'blue.800'},
+                      _disabled: {bg: 'blue.300'}
+                  }
+                : {},
+        outline: (props) =>
+            props.colorScheme === 'black'
+                ? {color: 'gray.900', _hover: {bg: 'gray.50'}, borderColor: 'gray.200'}
+                : {color: 'blue.600', _hover: {bg: 'gray.50'}},
+        footer: {
+            fontSize: 'sm',
+            backgroundColor: 'gray.100',
+            color: 'black',
+            _hover: {bg: 'gray.200'},
+            _active: {bg: 'gray.300'},
+            paddingLeft: 3,
+            paddingRight: 3
+        },
+        link: (props) => ({
+            color: props.colorScheme === 'red' ? 'red.500' : 'blue.600',
+            fontWeight: 'normal',
+            minWidth: '1em',
+            lineHeight: 4
+        }),
+        'menu-link': {
+            color: 'black',
+            justifyContent: 'flex-start',
+            fontSize: 'sm',
+            _hover: {bg: 'gray.50', textDecoration: 'none'},
+            _activeLink: {
+                bg: 'gray.50',
+                textDecoration: 'none'
+            }
+        },
+        'menu-link-mobile': {
+            color: 'black',
+            justifyContent: 'flex-start',
+            fontSize: 'sm',
+            _hover: {bg: 'gray.50', textDecoration: 'none'},
+            _activeLink: {
+                bg: 'gray.100',
+                textDecoration: 'none'
+            }
+        },
+        'search-link': {
+            color: 'black',
+            justifyContent: 'flex-start',
+            fontSize: 'sm',
+            _hover: {textDecoration: 'none'}
+        }
+    },
+    sizes: {
+        md: {
+            height: 11,
+            minWidth: 11
+        }
+    },
+    defaultProps: {
+        colorScheme: 'blue'
+    }
+}