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

package/app/theme/foundations/sizes.js

@@ -0,0 +1,18 @@
+/*
+ * 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 {
+    11: '2.75rem',
+
+    container: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1200px',
+        xxl: '1440px',
+        xxxl: '1560px'
+    }
+}

package/app/theme/foundations/space.js

@@ -0,0 +1,9 @@
+/*
+ * 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 {
+    11: '2.75rem'
+}

package/app/theme/foundations/styles.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 {
+    global: {
+        'html, body': {
+            backgroundColor: 'white',
+            color: 'gray.900'
+        },
+        body: {
+            minHeight: '100vh'
+        },
+        '.react-target': {
+            display: 'flex',
+            minHeight: '100vh'
+        }
+    }
+}

package/app/theme/index.js

@@ -0,0 +1,104 @@
+/*
+ * 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 {extendTheme} from '@chakra-ui/react'
+
+// Foundational style overrides
+import styles from '@salesforce/retail-react-app/app/theme/foundations/styles'
+import colors from '@salesforce/retail-react-app/app/theme/foundations/colors'
+import gradients from '@salesforce/retail-react-app/app/theme/foundations/gradients'
+import sizes from '@salesforce/retail-react-app/app/theme/foundations/sizes'
+import space from '@salesforce/retail-react-app/app/theme/foundations/space'
+import layerStyles from '@salesforce/retail-react-app/app/theme/foundations/layerStyles'
+import shadows from '@salesforce/retail-react-app/app/theme/foundations/shadows'
+
+// Base component style overrides
+import Alert from '@salesforce/retail-react-app/app/theme/components/base/alert'
+import Accordion from '@salesforce/retail-react-app/app/theme/components/base/accordion'
+import Badge from '@salesforce/retail-react-app/app/theme/components/base/badge'
+import Button from '@salesforce/retail-react-app/app/theme/components/base/button'
+import Checkbox from '@salesforce/retail-react-app/app/theme/components/base/checkbox'
+import Container from '@salesforce/retail-react-app/app/theme/components/base/container'
+import Drawer from '@salesforce/retail-react-app/app/theme/components/base/drawer'
+import FormLabel from '@salesforce/retail-react-app/app/theme/components/base/formLabel'
+import Icon from '@salesforce/retail-react-app/app/theme/components/base/icon'
+import Input from '@salesforce/retail-react-app/app/theme/components/base/input'
+import Modal from '@salesforce/retail-react-app/app/theme/components/base/modal'
+import Radio from '@salesforce/retail-react-app/app/theme/components/base/radio'
+import Select from '@salesforce/retail-react-app/app/theme/components/base/select'
+import Skeleton from '@salesforce/retail-react-app/app/theme/components/base/skeleton'
+import Tooltip from '@salesforce/retail-react-app/app/theme/components/base/tooltip'
+import Popover from '@salesforce/retail-react-app/app/theme/components/base/popover'
+
+// Project Component style overrides
+import App from '@salesforce/retail-react-app/app/theme/components/project/_app'
+import Breadcrumb from '@salesforce/retail-react-app/app/theme/components/project/breadcrumb'
+import Header from '@salesforce/retail-react-app/app/theme/components/project/header'
+import ListMenu from '@salesforce/retail-react-app/app/theme/components/project/list-menu'
+import Footer from '@salesforce/retail-react-app/app/theme/components/project/footer'
+import CheckoutFooter from '@salesforce/retail-react-app/app/theme/components/project/checkout-footer'
+import LinksList from '@salesforce/retail-react-app/app/theme/components/project/links-list'
+import DrawerMenu from '@salesforce/retail-react-app/app/theme/components/project/drawer-menu'
+import NestedAccordion from '@salesforce/retail-react-app/app/theme/components/project/nested-accordion'
+import LocaleSelector from '@salesforce/retail-react-app/app/theme/components/project/locale-selector'
+import OfflineBanner from '@salesforce/retail-react-app/app/theme/components/project/offline-banner'
+import Pagination from '@salesforce/retail-react-app/app/theme/components/project/pagination'
+import ProductTile from '@salesforce/retail-react-app/app/theme/components/project/product-tile'
+import SocialIcons from '@salesforce/retail-react-app/app/theme/components/project/social-icons'
+import SwatchGroup from '@salesforce/retail-react-app/app/theme/components/project/swatch-group'
+import ImageGallery from '@salesforce/retail-react-app/app/theme/components/project/image-gallery'
+
+// Please refer to the Chakra-Ui theme customization docs found
+// here https://chakra-ui.com/docs/theming/customize-theme to learn
+// more about extending and overriding themes for your project.
+export const overrides = {
+    styles,
+    layerStyles,
+    colors,
+    sizes,
+    space,
+    gradients,
+    shadows,
+    components: {
+        // base components
+        Accordion,
+        Alert,
+        Badge,
+        Button,
+        Checkbox,
+        Container,
+        Drawer,
+        FormLabel,
+        Icon,
+        Input,
+        Modal,
+        Popover,
+        Radio,
+        Select,
+        Skeleton,
+        Tooltip,
+
+        // project components
+        App,
+        Breadcrumb,
+        Header,
+        Footer,
+        CheckoutFooter,
+        LinksList,
+        ListMenu,
+        DrawerMenu,
+        NestedAccordion,
+        LocaleSelector,
+        OfflineBanner,
+        SocialIcons,
+        Pagination,
+        ProductTile,
+        SwatchGroup,
+        ImageGallery
+    }
+}
+
+export default extendTheme(overrides)

package/app/utils/cc-utils.js

@@ -0,0 +1,112 @@
+/*
+ * 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 {
+    AmexIcon,
+    DiscoverIcon,
+    MastercardIcon,
+    VisaIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+
+/**
+ * Formats a credit card number against given criteria
+ * @param {string} cardNumber - The number to be formatted
+ * @param {Object} opts
+ * @param {number[]} opts.gaps - Indices for space insertion
+ * @param {number[]} opts.length - Max number lengths for output
+ * @returns {string} Formatted card number for display
+ */
+export const formatCreditCardNumber = (cardNumber = '', opts = {gaps: [], lengths: []}) => {
+    let trimmedNumber = cardNumber.replace(/[^0-9]/g, '')
+    let numberLength = trimmedNumber.length
+
+    if (numberLength === opts.lengths[0] + 1) {
+        trimmedNumber = trimmedNumber.substr(0, opts.lengths[0])
+        numberLength = trimmedNumber.length
+    }
+
+    let numbers = trimmedNumber.split('')
+
+    opts.gaps.forEach((gapIndex, idx) => {
+        if (numberLength > gapIndex) {
+            numbers.splice(gapIndex + idx, 0, ' ')
+        }
+    })
+
+    return numbers.join('')
+}
+
+/**
+ * Returns the icon component for a given card type
+ * @param {string} type - The card type
+ * @returns {Function|undefined} React component
+ */
+export const getCreditCardIcon = (type) => {
+    if (!type) {
+        return undefined
+    }
+    return {
+        // Visa
+        visa: VisaIcon,
+
+        // MasterCard
+        mastercard: MastercardIcon,
+        'master card': MastercardIcon,
+
+        // American Express
+        'american express': AmexIcon,
+        'american-express': AmexIcon,
+        amex: AmexIcon,
+
+        // Discover
+        discover: DiscoverIcon
+    }[type.toLowerCase()]
+}
+
+/**
+ * Returns the card type string in the format the SDK expects.
+ * @param {string} - The card type as given by our cc validator
+ * @returns {string|undefined} - The card type in a format expected by the SDK
+ */
+export const getPaymentInstrumentCardType = (type) => {
+    if (!type) {
+        return undefined
+    }
+    return {
+        visa: 'Visa',
+        mastercard: 'Master Card',
+        'american-express': 'Amex',
+        discover: 'Discover'
+    }[type]
+}
+
+export const createCreditCardPaymentBodyFromForm = (paymentFormData) => {
+    // Using destructuring to omit properties
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {expiry, paymentInstrumentId, ...selectedPayment} = paymentFormData
+
+    // The form gives us the expiration date as `MM/YY` - so we need to split it into
+    // month and year to submit them as individual fields.
+    const [expirationMonth, expirationYear] = expiry.split('/')
+
+    return {
+        paymentMethodId: 'CREDIT_CARD',
+        paymentCard: {
+            ...selectedPayment,
+            number: selectedPayment.number.replace(/ /g, ''),
+            cardType: getPaymentInstrumentCardType(selectedPayment.cardType),
+            expirationMonth: parseInt(expirationMonth),
+            expirationYear: parseInt(`20${expirationYear}`),
+
+            // TODO: These fields are required for saving the card to the customer's
+            // account. Im not sure what they are for or how to get them, so for now
+            // we're just passing some values to make it work. Need to investigate.
+            issueNumber: '',
+            validFromMonth: 1,
+            validFromYear: 2020
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+/*
+ * 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/cc-utils'
+
+test('formatCreditCardNumber returns number with proper spaces', () => {
+    const opts = {
+        gaps: [4, 8, 12],
+        lengths: [16]
+    }
+
+    expect(utils.formatCreditCardNumber('41111111111111111', opts)).toBe('4111 1111 1111 1111')
+    expect(utils.formatCreditCardNumber('4111111111111111', opts)).toBe('4111 1111 1111 1111')
+    expect(utils.formatCreditCardNumber('411111111111', opts)).toBe('4111 1111 1111')
+    expect(utils.formatCreditCardNumber('4', opts)).toBe('4')
+    expect(utils.formatCreditCardNumber('', opts)).toBe('')
+    expect(utils.formatCreditCardNumber('')).toBe('')
+    expect(utils.formatCreditCardNumber()).toBe('')
+})
+
+test('getCreditCardIcon returns icon component for given card type', () => {
+    expect(utils.getCreditCardIcon()).toBeUndefined()
+    expect(utils.getCreditCardIcon('visa').displayName).toBe('CcVisaIcon')
+    expect(utils.getCreditCardIcon('mastercard').displayName).toBe('CcMastercardIcon')
+    expect(utils.getCreditCardIcon('master card').displayName).toBe('CcMastercardIcon')
+    expect(utils.getCreditCardIcon('amex').displayName).toBe('CcAmexIcon')
+    expect(utils.getCreditCardIcon('american express').displayName).toBe('CcAmexIcon')
+    expect(utils.getCreditCardIcon('american-express').displayName).toBe('CcAmexIcon')
+    expect(utils.getCreditCardIcon('discover').displayName).toBe('CcDiscoverIcon')
+})
+
+test('getPaymentInstrumentCardType maps card type names to API requirements', () => {
+    expect(utils.getPaymentInstrumentCardType()).toBeUndefined()
+    expect(utils.getPaymentInstrumentCardType('visa')).toBe('Visa')
+    expect(utils.getPaymentInstrumentCardType('mastercard')).toBe('Master Card')
+    expect(utils.getPaymentInstrumentCardType('american-express')).toBe('Amex')
+    expect(utils.getPaymentInstrumentCardType('discover')).toBe('Discover')
+})

package/app/utils/image-groups-utils.js

@@ -0,0 +1,62 @@
+/*
+ * 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
+ */
+
+/**
+ * Find the ImageGroup that matches the criteria supplied
+ *
+ * @param {Object} imageGroups - The product/variations image groups you want to search.
+ * @param {Object} options - Search criteria to match on the ImageGroup object.
+ * @param {string} options.viewType - Typically this refers to image sizes like small, medium, large. But can vary based on your back-end configuration.
+ * @param {Object} options.selectedVariationAttributes - A key/value object consisting of attibute id's and their values.
+ * @returns {Object} - The ImageGroup matching the search criteria
+ */
+export const findImageGroupBy = (imageGroups = [], options) => {
+    let {viewType, selectedVariationAttributes = {}} = options
+
+    // Start by filtering out any imageGroup that isn't the correct viewType.
+    imageGroups = imageGroups.filter(
+        ({viewType: imageGroupViewType}) => imageGroupViewType === viewType
+    )
+
+    // Not all variation attributes are reflected in images. For example, you probably
+    // won't have a separate image group for various sizes, but you might for colors. For that
+    // reason we need to know what are valid attribute values to filter on.
+    const refinableAttributeIds = [
+        ...new Set(
+            imageGroups
+                .reduce((acc, {variationAttributes = []}) => [...acc, ...variationAttributes], [])
+                .map(({id}) => id)
+        )
+    ]
+
+    // Update the `selectedVariationAttributes` by filtering out the attributes that have no
+    // representation in this imageGroup.
+    selectedVariationAttributes = Object.keys(selectedVariationAttributes).reduce((acc, curr) => {
+        return refinableAttributeIds.includes(curr)
+            ? {
+                  ...acc,
+                  [`${curr}`]: selectedVariationAttributes[curr]
+              }
+            : acc
+    }, {})
+
+    // Find the image group that has all the all the selected variation value attributes.
+    imageGroups = imageGroups.find(({variationAttributes = []}) => {
+        const selectedIds = Object.keys(selectedVariationAttributes)
+
+        return selectedIds.every((selectedId) => {
+            const selectedValue = selectedVariationAttributes[selectedId]
+
+            return variationAttributes.find(
+                ({id, values}) =>
+                    id === selectedId && values.every(({value}) => value === selectedValue)
+            )
+        })
+    })
+
+    return imageGroups
+}

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

@@ -0,0 +1,65 @@
+/*
+ * 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 {findImageGroupBy} from '@salesforce/retail-react-app/app/utils/image-groups-utils'
+
+it.each([undefined, []])('returns undefined', (groups) => {
+    expect(findImageGroupBy(groups, {})).toBeUndefined()
+})
+
+test('returns undefined for image groups with no size match', () => {
+    expect(findImageGroupBy([{viewType: 'small'}], {viewType: 'large'})).toBeUndefined()
+})
+
+test('returns first match for image groups with no variationAttributes', () => {
+    const groups = [{viewType: 'small'}]
+    expect(findImageGroupBy(groups, {viewType: 'small'})).toBe(groups[0])
+})
+
+test('returns first match for image groups with empty variationAttributes', () => {
+    const groups = [{viewType: 'small', variationAttributes: []}]
+    expect(findImageGroupBy(groups, {viewType: 'small'})).toBe(groups[0])
+})
+
+test('returns first match for image groups with no selectedVariationAttributes', () => {
+    const groups = [
+        {
+            viewType: 'small',
+            variationAttributes: [
+                {
+                    id: 'color',
+                    values: [
+                        {
+                            value: 'JJ825XX'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+    expect(findImageGroupBy(groups, {viewType: 'small'})).toBe(groups[0])
+})
+
+test('returns first match for image groups with matching selectedVariationAttributes', () => {
+    const variation = {
+        id: 'color',
+        values: [
+            {
+                value: 'JJ825XX'
+            }
+        ]
+    }
+    const groups = [
+        {
+            viewType: 'small',
+            variationAttributes: [variation]
+        }
+    ]
+    expect(findImageGroupBy(groups, {viewType: 'small', selectedVariationValues: variation})).toBe(
+        groups[0]
+    )
+})

package/app/utils/locale.js

@@ -0,0 +1,78 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+/**
+ * Dynamically import the translations/messages for a given locale
+ * @param {string} locale
+ * @returns {Promise<Object>} The messages (compiled in AST format) in the given locale.
+ *      If the translation file is not found, return an empty object (so react-intl would fall back to the inline messages)
+ */
+export const fetchTranslations = async (locale) => {
+    const targetLocale =
+        typeof window === 'undefined'
+            ? process.env.USE_PSEUDOLOCALE === 'true'
+                ? 'en-XA'
+                : locale
+            : locale
+
+    let module
+    try {
+        module = await import(
+            `@salesforce/retail-react-app/translations/compiled/${targetLocale}.json`
+        )
+    } catch (err) {
+        console.error(err)
+        console.log(
+            'Loading empty messages, so that react-intl would fall back to the inline default messages'
+        )
+        return {}
+    }
+
+    return module.default
+}
+
+/**
+ * Determine the target locale by comparing the users' preferred locales with the app's supported locales
+ * @param {Object} options
+ * @param {function} [options.getUserPreferredLocales] - Identify what set of locales the user prefers
+ * @param {object} [options.l10nConfig] - The current site's l10n configuration object
+ * @returns {string} The target locale's short code
+ */
+export const getTargetLocale = ({getUserPreferredLocales, l10nConfig = {}} = {}) => {
+    const userPreferredLocales = getUserPreferredLocales ? getUserPreferredLocales() : []
+    const supportedLocales = l10nConfig.supportedLocales.map((locale) => locale.id)
+    const defaultLocale = l10nConfig.defaultLocale
+
+    const targetLocale = determineTargetLocale(
+        userPreferredLocales,
+        supportedLocales,
+        defaultLocale
+    )
+    return targetLocale
+}
+
+/**
+ * Decide which locale to load
+ * @private
+ * @param {string[]} preferredLocales - All locales that the user prefers
+ * @param {string[]} supportedLocales - All locales that your app supports
+ * @param {string} fallbackLocale - App's default locale
+ * @returns {string} The target locale if there's a match. Otherwise, returns `fallbackLocale`.
+ */
+export const determineTargetLocale = (preferredLocales, supportedLocales, fallbackLocale) => {
+    const targetLocale = preferredLocales.filter((locale) => supportedLocales.includes(locale))[0]
+    return targetLocale || fallbackLocale
+}
+
+export const MESSAGE_PROPTYPE = PropTypes.shape({
+    // NOTE: defaultMessage is typically written as a string
+    // but its value can be an array when it comes from the compiled AST version
+    defaultMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
+    id: PropTypes.string
+})

package/app/utils/locale.test.js

@@ -0,0 +1,112 @@
+/*
+ * 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
+ */
+
+// CAUTION: This test file relies on config values that may get changed in generated projects
+
+import {
+    determineTargetLocale,
+    fetchTranslations,
+    getTargetLocale
+} from '@salesforce/retail-react-app/app/utils/locale'
+
+import {DEFAULT_LOCALE, SUPPORTED_LOCALES} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const supportedLocales = SUPPORTED_LOCALES.map((locale) => locale.id)
+const isMultiLocales = supportedLocales.length > 1
+const nonSupportedLocale = 'nl-NL'
+// Make sure this supported locale is not the default locale.
+// Otherwise, our code would fall back to default and incorrectly pass the tests
+const supportedLocale = isMultiLocales
+    ? supportedLocales.find((locale) => locale !== DEFAULT_LOCALE)
+    : supportedLocales[0]
+
+const testId1 = 'footer.link.privacy_policy'
+const testId2 = 'account.accordion.button.my_account'
+
+test('our assumptions before further testing', () => {
+    expect(supportedLocales).not.toContain(nonSupportedLocale)
+    if (isMultiLocales) {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(DEFAULT_LOCALE).toBe('en-GB')
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(supportedLocale).not.toBe(DEFAULT_LOCALE)
+    }
+})
+
+describe('determineTargetLocale', () => {
+    test('default to fallback locale', () => {
+        const locale = determineTargetLocale([nonSupportedLocale], supportedLocales, DEFAULT_LOCALE)
+        expect(locale).toBe(DEFAULT_LOCALE)
+    })
+    test('matches one of the supported locales', () => {
+        const locale = determineTargetLocale([supportedLocale], supportedLocales, DEFAULT_LOCALE)
+        expect(locale).toBe(supportedLocale)
+    })
+})
+
+describe('fetchTranslations', () => {
+    test('loading the target locale', async () => {
+        const messages = await fetchTranslations(supportedLocale)
+        expect(messages[testId2]).toBeDefined()
+    })
+    test('loading the pseudo locale', async () => {
+        const messages = await fetchTranslations('en-XA')
+        expect(messages[testId1][1].value).toMatch(/Ƥřīṽȧȧƈẏ Ƥǿǿŀīƈẏ/)
+    })
+    test('handling a not-found translation file', async () => {
+        const messages = await fetchTranslations('xx-XX')
+        const emptyMessages = {}
+        expect(messages).toEqual(emptyMessages)
+    })
+})
+
+describe('getTargetLocale', () => {
+    const originalEnv = {...process.env}
+    let windowSpy
+
+    const l10nConfig = {
+        defaultLocale: DEFAULT_LOCALE,
+        supportedLocales: SUPPORTED_LOCALES
+    }
+    beforeEach(() => {
+        windowSpy = jest.spyOn(window, 'window', 'get')
+    })
+    afterEach(() => {
+        // Reset
+        process.env = {...originalEnv}
+        windowSpy.mockRestore()
+    })
+
+    test('without getUserPreferredLocales parameter', () => {
+        const targetLocale = getTargetLocale({l10nConfig})
+        expect(targetLocale).toBe(DEFAULT_LOCALE)
+    })
+    test('with getUserPreferredLocales parameter', () => {
+        const locale = supportedLocale
+        if (isMultiLocales) {
+            // eslint-disable-next-line jest/no-conditional-expect
+            expect(locale).not.toBe(DEFAULT_LOCALE)
+        }
+        const targetLocale = getTargetLocale({
+            getUserPreferredLocales: () => [locale],
+            l10nConfig
+        })
+        expect(targetLocale).toBe(locale)
+    })
+    test('with pseudo locale', async () => {
+        process.env.USE_PSEUDOLOCALE = 'true'
+        // Simulate server side
+        windowSpy.mockImplementation(() => undefined)
+
+        const targetLocale = getTargetLocale({l10nConfig})
+        const messages = await fetchTranslations(targetLocale)
+        // The app should still think its target locale is the default one
+        expect(targetLocale).toBe(DEFAULT_LOCALE)
+        // But the actual translation should be using the pseudo locale
+        expect(messages[testId1][1].value).toMatch(/Ƥřīṽȧȧƈẏ Ƥǿǿŀīƈẏ/)
+    })
+})

package/app/utils/password-utils.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
+ */
+
+/**
+ * Provides mapping of password requirements that have/haven't been met
+ * @param {string} value - The password to validate
+ * @returns {Object} - True/false for each password validation rule
+ */
+export const validatePassword = (value) => {
+    return {
+        hasMinChars: value && value.length >= 8 ? true : false,
+        hasUppercase: value && /[A-Z]/.test(value) ? true : false,
+        hasLowercase: value && /[a-z]/.test(value) ? true : false,
+        hasNumber: value && /\d/.test(value) ? true : false,
+        hasSpecialChar: value && /[!@#$%^&*(),.?":{}|<>]/.test(value) ? true : false
+    }
+}

package/app/utils/phone-utils.js

@@ -0,0 +1,22 @@
+/*
+ * 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
+ */
+
+/**
+ * Formats the given phone number to add spaces and symbols
+ * @param {string} - Phone number to be formatted
+ * @returns {string}  - Formatted phone number
+ */
+export const formatPhoneNumber = (value) => {
+    if (!value) return value
+    const phoneNumber = value.replace(/[^\d]/g, '')
+    const phoneNumberLength = phoneNumber.length
+    if (phoneNumberLength < 4) return phoneNumber
+    if (phoneNumberLength < 7) {
+        return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`
+    }
+    return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 10)}`
+}