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

package/app/utils/phone-utils.test.js

@@ -0,0 +1,15 @@
+/*
+ * 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 * as utils from '@salesforce/retail-react-app/app/utils/phone-utils'
+
+test('formats a phone number', () => {
+    expect(utils.formatPhoneNumber()).toBeUndefined()
+    expect(utils.formatPhoneNumber('')).toBe('')
+    expect(utils.formatPhoneNumber('727')).toBe('727')
+    expect(utils.formatPhoneNumber('727555')).toBe('(727) 555')
+    expect(utils.formatPhoneNumber('7275551234')).toBe('(727) 555-1234')
+})

package/app/utils/product-utils.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023, Salesforce, 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
+ */
+
+/**
+ * Get the human-friendly version of the variation values that users have selected.
+ * Useful for displaying these values in the UI.
+ *
+ * @param {Object} variationAttributes - The products variation attributes.
+ * @param {Object} values - The variations selected attribute values.
+ * @returns {Object} - A key value map of the display name and display value.
+ *
+ * @example
+ * const displayValues = getDisplayVariationValues(
+ *     [ { "id": "color", "name": "Colour", "values": [ { "name": "royal", "orderable": true, "value": "JJ5FUXX" } ] } ],
+ *     { "color": "JJ5FUXX" }
+ * )
+ * // returns { "Colour": "royal" }
+ */
+export const getDisplayVariationValues = (variationAttributes, values = {}) => {
+    const returnVal = Object.entries(values).reduce((acc, [id, value]) => {
+        const attribute = variationAttributes.find(({id: attributeId}) => attributeId === id)
+        const attributeValue = attribute.values.find(
+            ({value: attributeValue}) => attributeValue === value
+        )
+        return {
+            ...acc,
+            [attribute.name]: attributeValue.name
+        }
+    }, {})
+    return returnVal
+}

package/app/utils/product-utils.test.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023, Salesforce, 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 {getDisplayVariationValues} from '@salesforce/retail-react-app/app/utils/product-utils'
+
+const variationAttributes = [
+    {
+        id: 'color',
+        name: 'Colour',
+        values: [
+            {name: 'Black', orderable: true, value: 'BLACKLE'},
+            {name: 'Taupe', orderable: true, value: 'TAUPETX'}
+        ]
+    },
+    {
+        id: 'size',
+        name: 'Size',
+        values: [
+            {name: '6', orderable: true, value: '060'},
+            {name: '6.5', orderable: true, value: '065'},
+            {name: '7', orderable: true, value: '070'},
+            {name: '7.5', orderable: true, value: '075'},
+            {name: '8', orderable: true, value: '080'},
+            {name: '8.5', orderable: true, value: '085'},
+            {name: '9', orderable: true, value: '090'},
+            {name: '9.5', orderable: true, value: '095'},
+            {name: '10', orderable: true, value: '100'},
+            {name: '11', orderable: true, value: '110'}
+        ]
+    },
+    {id: 'width', name: 'Width', values: [{name: 'M', orderable: true, value: 'M'}]}
+]
+
+test('getDisplayVariationValues', () => {
+    const selectedValues = {
+        color: 'TAUPETX',
+        size: '065',
+        width: 'M'
+    }
+    const result = getDisplayVariationValues(variationAttributes, selectedValues)
+
+    expect(result).toEqual({
+        Colour: 'Taupe',
+        Size: '6.5',
+        Width: 'M'
+    })
+})

package/app/utils/responsive-image.js

@@ -0,0 +1,198 @@
+/*
+ * 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 theme from '@chakra-ui/theme'
+
+/**
+ * @param {Object} breakpoints
+ * @return {string[]} Breakpoint labels ordered from smallest. For example: ['base', 'sm', 'md', 'lg', 'xl', '2xl']
+ */
+const getBreakpointLabels = (breakpoints) =>
+    Object.entries(breakpoints)
+        .sort((a, b) => parseFloat(a[1]) - parseFloat(b[1]))
+        .map(([key]) => key)
+
+const {breakpoints: defaultBreakpoints} = theme
+let themeBreakpoints = defaultBreakpoints
+let breakpointLabels = getBreakpointLabels(themeBreakpoints)
+
+/**
+ * @param {Object} props
+ * @param {string} props.src - Dynamic src having an optional param that can vary with widths. For example: `image[_{width}].jpg` or `image.jpg[?sw={width}&q=60]`
+ * @param {(number[]|string[]|Object)} [props.widths] - Image widths relative to the breakpoints, whose units can either be px or vw or unit-less. They will be mapped to the corresponding `sizes` and `srcSet`.
+ * @param {Object} [props.breakpoints] - The current theme's breakpoints. If not given, Chakra's default breakpoints will be used.
+ * @return {Object} src, sizes, and srcSet props for your image component
+ */
+export const getResponsiveImageAttributes = ({src, widths, breakpoints = defaultBreakpoints}) => {
+    if (!widths) {
+        return {
+            src: getSrcWithoutOptionalParams(src)
+        }
+    }
+
+    themeBreakpoints = breakpoints
+    breakpointLabels = getBreakpointLabels(themeBreakpoints)
+
+    return {
+        src: getSrcWithoutOptionalParams(src),
+        sizes: mapWidthsToSizes(widths),
+        srcSet: mapWidthsToSrcSet(widths, src)
+    }
+}
+
+/**
+ * @param {(number[]|string[]|Object)} widths
+ * @return {string}
+ */
+const mapWidthsToSizes = (widths) => {
+    const _widths = withUnit(Array.isArray(widths) ? widths : widthsAsArray(widths))
+
+    return breakpointLabels
+        .slice(0, _widths.length)
+        .map((bp, i) => {
+            return i === 0 ? _widths[i] : `(min-width: ${themeBreakpoints[bp]}) ${_widths[i]}`
+        })
+        .reverse()
+        .join(', ')
+}
+
+/**
+ * @param {(number[]|string[]|Object)} widths
+ * @return {string}
+ */
+const mapWidthsToSrcSet = (widths, dynamicSrc) => {
+    let _widths = isObject(widths) ? widthsAsArray(widths) : widths.slice(0)
+
+    if (_widths.length < breakpointLabels.length) {
+        const lastWidth = _widths[_widths.length - 1]
+        const amountToPad = breakpointLabels.length - _widths.length
+
+        _widths = [..._widths, ...Array(amountToPad).fill(lastWidth)]
+    }
+
+    _widths = uniqueArray(convertToPxNumbers(_widths)).sort()
+
+    const srcSet = []
+    _widths.forEach((width) => {
+        srcSet.push(width)
+        srcSet.push(width * 2) // for devices with higher pixel density
+    })
+
+    return srcSet.map((imageWidth) => `${getSrc(dynamicSrc, imageWidth)} ${imageWidth}w`).join(', ')
+}
+
+const vwValue = /^\d+vw$/
+const pxValue = /^\d+px$/
+
+/**
+ * @param {string[]|number[]} widths
+ * @return {number[]}
+ */
+const convertToPxNumbers = (widths) => {
+    return widths
+        .map((width, i) => {
+            if (typeof width === 'number') {
+                return width
+            }
+
+            if (vwValue.test(width)) {
+                const vw = parseFloat(width)
+                const currentBp = breakpointLabels[i]
+                // We imagine the biggest image for the current breakpoint
+                // to be when the viewport is closely approaching the _next breakpoint_.
+                const nextBp = breakpointLabels[i + 1]
+
+                if (nextBp) {
+                    return vwToPx(vw, nextBp)
+                } else {
+                    // We're already at the last breakpoint
+                    return widths[i] !== widths[i - 1] ? vwToPx(vw, currentBp) : undefined
+                }
+            } else if (pxValue.test(width)) {
+                return parseInt(width)
+            } else {
+                console.error('Expecting to see values with vw or px unit only')
+                return 0
+            }
+        })
+        .filter((width) => width !== undefined)
+}
+
+const uniqueArray = (array) => [...new Set(array)]
+
+/**
+ * @param {(number[]|string[])} widths
+ */
+const withUnit = (widths) =>
+    // By default, unitless value is interpreted as px
+    widths.map((width) => (typeof width === 'number' ? `${width}px` : width))
+
+const isObject = (o) => o?.constructor === Object
+
+/**
+ * @param {Object} widths
+ * @example
+ * // returns the array [10, 10, 10, 50]
+ * widthsAsArray({base: 10, lg: 50})
+ */
+const widthsAsArray = (widths) => {
+    const biggestBreakpoint = breakpointLabels.filter((bp) => Boolean(widths[bp])).pop()
+
+    let mostRecent
+    return breakpointLabels.slice(0, breakpointLabels.indexOf(biggestBreakpoint) + 1).map((bp) => {
+        if (widths[bp]) {
+            mostRecent = widths[bp]
+            return widths[bp]
+        } else {
+            return mostRecent
+        }
+    })
+}
+
+/**
+ * @param {number} vw
+ * @param {string} breakpoint
+ */
+const vwToPx = (vw, breakpoint) => {
+    let result = (vw / 100) * parseFloat(themeBreakpoints[breakpoint])
+    const breakpointsDefinedInPx = Object.values(themeBreakpoints).some((val) => pxValue.test(val))
+
+    // Assumes theme's breakpoints are defined in either em or px
+    // See https://chakra-ui.com/docs/features/responsive-styles#customizing-breakpoints
+    return breakpointsDefinedInPx ? result : emToPx(result)
+}
+
+/**
+ * @param {number} em
+ * @param {number} [browserDefaultFontSize]
+ */
+const emToPx = (em, browserDefaultFontSize = 16) => Math.round(em * browserDefaultFontSize)
+
+/**
+ * @param {string} dynamicSrc
+ * @param {number} imageWidth
+ * @return {string} Image url having the given width
+ * @example
+ * // returns https://example.com/image_720.jpg
+ * getSrc('https://example.com/image[_{width}].jpg', 720)
+ */
+export const getSrc = (dynamicSrc, imageWidth) => {
+    // 1. remove the surrounding []
+    // 2. replace {...} with imageWidth
+    return dynamicSrc.replace(/\[([^\]]+)\]/g, '$1').replace(/\{[^}]+\}/g, imageWidth)
+}
+
+/**
+ * @param {string} dynamicSrc
+ * @example
+ * // Returns 'https://example.com/image.jpg'
+ * getSrcWithoutOptionalParams('https://example.com/image.jpg[?sw={width}]')
+ */
+const getSrcWithoutOptionalParams = (dynamicSrc) => {
+    const optionalParams = /\[[^\]]+\]/g
+    return dynamicSrc.replace(optionalParams, '')
+}

package/app/utils/responsive-image.test.js

@@ -0,0 +1,170 @@
+/*
+ * 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 {
+    getResponsiveImageAttributes,
+    getSrc
+} from '@salesforce/retail-react-app/app/utils/responsive-image'
+
+const disImageURL = {
+    withOptionalParams:
+        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1e4fcb17/images/large/PG.10212867.JJ3XYXX.PZ.jpg[?sw={width}&q=60]',
+    withoutOptionalParams:
+        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1e4fcb17/images/large/PG.10212867.JJ3XYXX.PZ.jpg'
+}
+
+const buildSrcSet = (pxWidths) => {
+    const uniqueArray = [...new Set(pxWidths)]
+    const widths = uniqueArray.sort()
+
+    return widths
+        .map((width) => {
+            return `${urlWithWidth(width)} ${width}w, ${urlWithWidth(width * 2)} ${width * 2}w`
+        })
+        .join(', ')
+}
+const urlWithWidth = (width) => getSrc(disImageURL.withOptionalParams, width)
+
+test('vw widths', () => {
+    let props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams,
+        widths: ['100vw', '100vw', '50vw']
+    })
+
+    // Breakpoints
+    // sm: "30em",
+    // md: "48em",
+    // lg: "62em",
+    // xl: "80em",
+    // "2xl": "96em",
+
+    // 100vw of sm => 30em => 30 * 16 = 480px
+    // 100vw of md => 48em => 768px
+    // 50vw of lg => 31em => 496px
+    // 50vw of xl => 40em => 640
+    // 50vw of 2xl => 48em => 768px
+
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams,
+        sizes: '(min-width: 48em) 50vw, (min-width: 30em) 100vw, 100vw',
+        srcSet: buildSrcSet([480, 768, 496, 640, 768])
+    })
+
+    // This time as _object_
+    props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams,
+        widths: {
+            base: '100vw',
+            sm: '100vw',
+            md: '50vw'
+        }
+    })
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams,
+        sizes: '(min-width: 48em) 50vw, (min-width: 30em) 100vw, 100vw',
+        srcSet: buildSrcSet([480, 768, 496, 640, 768])
+    })
+
+    // Edge case: testing changing width at the very last breakpoint (2xl)
+    props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams,
+        widths: {
+            base: '100vw',
+            '2xl': '50vw'
+        }
+    })
+    // 100vw of sm => 30em => 30 * 16 = 480px
+    // 100vw of md => 48em => 768px
+    // 100vw of lg => 62em => 992px
+    // 100vw of xl => 80em => 1280px
+    // 100vw of 2xl => 96em => 1536px
+    // 50vw of 2xl => 48em => 768px
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams,
+        sizes: '(min-width: 96em) 50vw, (min-width: 80em) 100vw, (min-width: 62em) 100vw, (min-width: 48em) 100vw, (min-width: 30em) 100vw, 100vw',
+        srcSet: buildSrcSet([480, 768, 992, 1280, 1536, 768])
+    })
+})
+
+test('px values', () => {
+    // widths in array format
+    let props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams,
+        widths: [100, 500, 1000]
+    })
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams,
+        sizes: '(min-width: 48em) 1000px, (min-width: 30em) 500px, 100px',
+        srcSet: buildSrcSet([100, 500, 1000])
+    })
+
+    // widths in object format
+    props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams,
+        widths: {
+            base: 100,
+            sm: 500,
+            md: 1000
+        }
+    })
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams,
+        sizes: '(min-width: 48em) 1000px, (min-width: 30em) 500px, 100px',
+        srcSet: buildSrcSet([100, 500, 1000])
+    })
+})
+
+test('mixture of px and vw values', () => {
+    let props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams,
+        widths: ['100vw', '720px', 500]
+    })
+    // 100vw of sm => 30em => 30 * 16 = 480px
+
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams,
+        sizes: '(min-width: 48em) 500px, (min-width: 30em) 720px, 100vw',
+        srcSet: buildSrcSet([480, 500, 720])
+    })
+})
+
+test('only src', () => {
+    let props = getResponsiveImageAttributes({
+        src: disImageURL.withoutOptionalParams
+    })
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams
+    })
+
+    // This time _with_ the optional params
+    props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams
+    })
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams
+    })
+})
+
+test('passing in theme breakpoints', () => {
+    const props = getResponsiveImageAttributes({
+        src: disImageURL.withOptionalParams,
+        widths: ['100vw', 360],
+        breakpoints: {
+            base: '0px',
+            sm: '320px',
+            md: '768px',
+            lg: '960px',
+            xl: '1200px',
+            '2xl': '1536px'
+        }
+    })
+    expect(props).toStrictEqual({
+        src: disImageURL.withoutOptionalParams,
+        sizes: '(min-width: 320px) 360px, 100vw',
+        srcSet: buildSrcSet([320, 360])
+    })
+})

package/app/utils/routes-utils.js

@@ -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
+ */
+
+import {getSites} from '@salesforce/retail-react-app/app/utils/site-utils'
+import {urlPartPositions} from '@salesforce/retail-react-app/app/constants'
+
+/**
+ * Construct literal routes based on url config
+ *      with site and locale references (ids and aliases) from each in your application config
+ *
+ * @param {array} routes - array of routes to be reconstructed
+ * @param {object} urlConfig
+ * @param {object} options - options if there are any
+ * @param {array} options.ignoredRoutes - routes that does not need be reconstructed
+ * @return {array} - list of routes objects that has site and locale refs
+ */
+export const configureRoutes = (routes = [], config, {ignoredRoutes = []}) => {
+    if (!routes.length) return []
+    if (!config) return routes
+
+    const {url: urlConfig} = config.app
+
+    const allSites = getSites()
+    if (!allSites) return routes
+
+    let outputRoutes = []
+    for (let i = 0; i < routes.length; i++) {
+        const {path, ...rest} = routes[i]
+
+        if (ignoredRoutes.includes(path)) {
+            outputRoutes.push(routes[i])
+        } else {
+            allSites.forEach((site) => {
+                // append site ids and aliases to an array
+                const siteRefs = [site.alias, site.id].filter(Boolean)
+                let localeRefs = []
+                // append locale ids and aliases to an array
+                site.l10n.supportedLocales.forEach((locale) => {
+                    localeRefs.push(locale.alias)
+                    localeRefs.push(locale.id)
+                })
+                localeRefs = localeRefs.filter(Boolean)
+                const {locale: localePosition, site: sitePosition} = urlConfig
+
+                if (
+                    localePosition === urlPartPositions.PATH &&
+                    sitePosition === urlPartPositions.PATH
+                ) {
+                    siteRefs.forEach((site) => {
+                        // append the route that only has site
+                        outputRoutes.push({
+                            path: `/${site}${path}`,
+                            ...rest
+                        })
+                        localeRefs.forEach((locale) => {
+                            // app the route that has both site and locale
+                            outputRoutes.push({
+                                path: `/${site}/${locale}${path}`,
+                                ...rest
+                            })
+                            // append the route that only has locale
+                            outputRoutes.push({
+                                path: `/${locale}${path}`,
+                                ...rest
+                            })
+                        })
+                    })
+                }
+
+                if (
+                    localePosition !== urlPartPositions.PATH &&
+                    sitePosition === urlPartPositions.PATH
+                ) {
+                    // construct the routes that only has site id or alias
+                    siteRefs.forEach((site) => {
+                        outputRoutes.push({
+                            path: `/${site}${path}`,
+                            ...rest
+                        })
+                    })
+                }
+                if (
+                    localePosition === urlPartPositions.PATH &&
+                    sitePosition !== urlPartPositions.PATH
+                ) {
+                    // construct the routes that only has locale id or alias
+                    localeRefs.forEach((locale) => {
+                        outputRoutes.push({
+                            path: `/${locale}${path}`,
+                            ...rest
+                        })
+                    })
+                }
+            })
+            // origin route will be at the bottom
+            outputRoutes.push(routes[i])
+        }
+    }
+    // Remove any duplicate routes
+    outputRoutes = outputRoutes.reduce((res, route) => {
+        if (!res.some(({path}) => path === route.path)) {
+            res.push(route)
+        }
+        return res
+    }, [])
+    return outputRoutes
+}