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

package/app/components/field/index.jsx

@@ -0,0 +1,161 @@
+/*
+ * 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, {useState} from 'react'
+import PropTypes from 'prop-types'
+import {Controller} from 'react-hook-form'
+import {
+    FormControl,
+    FormLabel,
+    FormErrorMessage,
+    IconButton,
+    Input,
+    InputGroup,
+    InputRightElement,
+    Select,
+    Checkbox
+} from '@chakra-ui/react'
+import {VisibilityIcon, VisibilityOffIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+const Field = ({
+    name,
+    label,
+    formLabel,
+    type = 'text',
+    options = [],
+    rules = {},
+    error,
+    placeholder,
+    inputProps,
+    control,
+    defaultValue,
+    helpText,
+    children
+}) => {
+    const [hidePassword, setHidePassword] = useState(true)
+    const PasswordIcon = hidePassword ? VisibilityIcon : VisibilityOffIcon
+    const inputType =
+        type === 'password' && hidePassword ? 'password' : type === 'password' ? 'text' : type
+    return (
+        <Controller
+            name={name}
+            control={control}
+            rules={rules}
+            defaultValue={defaultValue}
+            render={({field: {onChange, value, ref}}) => {
+                const _inputProps =
+                    typeof inputProps === 'function' ? inputProps({value, onChange}) : inputProps
+
+                return (
+                    <FormControl id={name} isInvalid={error}>
+                        {!['checkbox', 'radio'].includes(type) &&
+                            type !== 'hidden' &&
+                            (formLabel || <FormLabel>{label}</FormLabel>)}
+
+                        <InputGroup>
+                            {['text', 'password', 'email', 'phone', 'tel', 'number'].includes(
+                                type
+                            ) && (
+                                <Input
+                                    ref={ref}
+                                    onChange={onChange}
+                                    value={value}
+                                    type={inputType}
+                                    placeholder={placeholder}
+                                    {..._inputProps}
+                                />
+                            )}
+
+                            {type === 'hidden' && (
+                                <input
+                                    ref={ref}
+                                    onChange={onChange}
+                                    value={value}
+                                    type="hidden"
+                                    {..._inputProps}
+                                />
+                            )}
+
+                            {type === 'password' && (
+                                <InputRightElement>
+                                    <IconButton
+                                        variant="ghosted"
+                                        aria-label="Show password"
+                                        icon={<PasswordIcon color="gray.500" boxSize={6} />}
+                                        onClick={() => setHidePassword(!hidePassword)}
+                                    />
+                                </InputRightElement>
+                            )}
+
+                            {type === 'select' && (
+                                <Select
+                                    ref={ref}
+                                    onChange={onChange}
+                                    value={value}
+                                    placeholder={placeholder}
+                                    {..._inputProps}
+                                >
+                                    {options.map((opt) => (
+                                        <option key={`${opt.label}-${opt.value}`} value={opt.value}>
+                                            {opt.label}
+                                        </option>
+                                    ))}
+                                </Select>
+                            )}
+
+                            {type === 'checkbox' && (
+                                <Checkbox
+                                    ref={ref}
+                                    onChange={(e) => onChange(e.target.checked)}
+                                    isChecked={value}
+                                    {..._inputProps}
+                                >
+                                    {formLabel || label}
+                                </Checkbox>
+                            )}
+
+                            {children}
+                        </InputGroup>
+
+                        {error && !type !== 'hidden' && (
+                            <FormErrorMessage>{error.message}</FormErrorMessage>
+                        )}
+
+                        {helpText}
+                    </FormControl>
+                )
+            }}
+        />
+    )
+}
+
+Field.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    formLabel: PropTypes.any,
+    type: PropTypes.oneOf([
+        'text',
+        'number',
+        'password',
+        'email',
+        'phone',
+        'tel',
+        'select',
+        'checkbox',
+        'hidden'
+    ]),
+    options: PropTypes.arrayOf(PropTypes.shape({label: PropTypes.string, value: PropTypes.any})),
+    rules: PropTypes.object,
+    error: PropTypes.shape({message: PropTypes.string}),
+    placeholder: PropTypes.string,
+    inputProps: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    control: PropTypes.object,
+    defaultValue: PropTypes.any,
+    helpText: PropTypes.any,
+    children: PropTypes.any
+}
+
+export default Field

package/app/components/footer/index.jsx

@@ -0,0 +1,269 @@
+/*
+ * 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, {useState} from 'react'
+import PropTypes from 'prop-types'
+import {
+    Box,
+    Text,
+    Divider,
+    SimpleGrid,
+    useMultiStyleConfig,
+    Select as ChakraSelect,
+    Heading,
+    Input,
+    InputGroup,
+    InputRightElement,
+    createStylesContext,
+    Button,
+    FormControl
+} from '@chakra-ui/react'
+import {useIntl} from 'react-intl'
+
+import LinksList from '@salesforce/retail-react-app/app/components/links-list'
+import SocialIcons from '@salesforce/retail-react-app/app/components/social-icons'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
+import {getPathWithLocale} from '@salesforce/retail-react-app/app/utils/url'
+import LocaleText from '@salesforce/retail-react-app/app/components/locale-text'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import styled from '@emotion/styled'
+
+const [StylesProvider, useStyles] = createStylesContext('Footer')
+const Footer = ({...otherProps}) => {
+    const styles = useMultiStyleConfig('Footer')
+    const intl = useIntl()
+    const [locale, setLocale] = useState(intl.locale)
+    const {site, buildUrl} = useMultiSite()
+    const {l10n} = site
+    const supportedLocaleIds = l10n?.supportedLocales.map((locale) => locale.id)
+    const showLocaleSelector = supportedLocaleIds?.length > 1
+
+    // NOTE: this is a workaround to fix hydration error, by making sure that the `option.selected` property is set.
+    // For some reason, adding some styles prop (to the option element) prevented `selected` from being set.
+    // So now we add the styling to the parent element instead.
+    const Select = styled(ChakraSelect)({
+        // Targeting the child element
+        option: styles.localeDropdownOption
+    })
+
+    return (
+        <Box as="footer" {...styles.container} {...otherProps}>
+            <Box {...styles.content}>
+                <StylesProvider value={styles}>
+                    <HideOnMobile>
+                        <SimpleGrid columns={4} spacing={3}>
+                            <LinksList
+                                heading={intl.formatMessage({
+                                    id: 'footer.column.customer_support',
+                                    defaultMessage: 'Customer Support'
+                                })}
+                                links={[
+                                    {
+                                        href: '/',
+                                        text: intl.formatMessage({
+                                            id: 'footer.link.contact_us',
+                                            defaultMessage: 'Contact Us'
+                                        })
+                                    },
+                                    {
+                                        href: '/',
+                                        text: intl.formatMessage({
+                                            id: 'footer.link.shipping',
+                                            defaultMessage: 'Shipping'
+                                        })
+                                    }
+                                ]}
+                            />
+                            <LinksList
+                                heading={intl.formatMessage({
+                                    id: 'footer.column.account',
+                                    defaultMessage: 'Account'
+                                })}
+                                links={[
+                                    {
+                                        href: '/',
+                                        text: intl.formatMessage({
+                                            id: 'footer.link.order_status',
+                                            defaultMessage: 'Order Status'
+                                        })
+                                    },
+                                    {
+                                        href: '/',
+                                        text: intl.formatMessage({
+                                            id: 'footer.link.signin_create_account',
+                                            defaultMessage: 'Sign in or create account'
+                                        })
+                                    }
+                                ]}
+                            />
+                            <LinksList
+                                heading={intl.formatMessage({
+                                    id: 'footer.column.our_company',
+                                    defaultMessage: 'Our Company'
+                                })}
+                                links={[
+                                    {
+                                        href: '/',
+                                        text: intl.formatMessage({
+                                            id: 'footer.link.store_locator',
+                                            defaultMessage: 'Store Locator'
+                                        })
+                                    },
+                                    {
+                                        href: '/',
+                                        text: intl.formatMessage({
+                                            id: 'footer.link.about_us',
+                                            defaultMessage: 'About Us'
+                                        })
+                                    }
+                                ]}
+                            />
+                            <Box>
+                                <Subscribe />
+                            </Box>
+                        </SimpleGrid>
+                    </HideOnMobile>
+
+                    <HideOnDesktop>
+                        <Subscribe />
+                    </HideOnDesktop>
+
+                    {showLocaleSelector && (
+                        <Box {...styles.localeSelector}>
+                            <FormControl
+                                data-testid="sf-footer-locale-selector"
+                                id="locale_selector"
+                                width="auto"
+                                {...otherProps}
+                            >
+                                <Select
+                                    defaultValue={locale}
+                                    onChange={({target}) => {
+                                        setLocale(target.value)
+
+                                        // Update the `locale` in the URL.
+                                        const newUrl = getPathWithLocale(target.value, buildUrl, {
+                                            disallowParams: ['refine']
+                                        })
+
+                                        window.location = newUrl
+                                    }}
+                                    variant="filled"
+                                    {...styles.localeDropdown}
+                                >
+                                    {supportedLocaleIds.map((locale) => (
+                                        <option key={locale} value={locale}>
+                                            <LocaleText shortCode={locale} />
+                                        </option>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        </Box>
+                    )}
+
+                    <Divider {...styles.horizontalRule} />
+
+                    <Box {...styles.bottomHalf}>
+                        <Text {...styles.copyright}>
+                            &copy; {new Date().getFullYear()}{' '}
+                            {intl.formatMessage({
+                                id: 'footer.message.copyright',
+                                defaultMessage:
+                                    'Salesforce or its affiliates. All rights reserved. This is a demo store only. Orders made WILL NOT be processed.'
+                            })}
+                        </Text>
+
+                        <HideOnDesktop>
+                            <LegalLinks variant="vertical" />
+                        </HideOnDesktop>
+                        <HideOnMobile>
+                            <LegalLinks variant="horizontal" />
+                        </HideOnMobile>
+                    </Box>
+                </StylesProvider>
+            </Box>
+        </Box>
+    )
+}
+
+export default Footer
+
+const Subscribe = ({...otherProps}) => {
+    const styles = useStyles()
+    const intl = useIntl()
+    return (
+        <Box {...styles.subscribe} {...otherProps}>
+            <Heading {...styles.subscribeHeading}>
+                {intl.formatMessage({
+                    id: 'footer.subscribe.heading.first_to_know',
+                    defaultMessage: 'Be the first to know'
+                })}
+            </Heading>
+            <Text {...styles.subscribeMessage}>
+                {intl.formatMessage({
+                    id: 'footer.subscribe.description.sign_up',
+                    defaultMessage: 'Sign up to stay in the loop about the hottest deals'
+                })}
+            </Text>
+
+            <Box>
+                <InputGroup>
+                    {/* Had to swap the following InputRightElement and Input 
+                        to avoid the hydration error due to mismatched html between server and client side.
+                        This is a workaround for Lastpass plugin that automatically injects its icon for input fields.
+                    */}
+                    <InputRightElement {...styles.subscribeButtonContainer}>
+                        <Button variant="footer">
+                            {intl.formatMessage({
+                                id: 'footer.subscribe.button.sign_up',
+                                defaultMessage: 'Sign Up'
+                            })}
+                        </Button>
+                    </InputRightElement>
+                    <Input type="email" placeholder="you@email.com" {...styles.subscribeField} />
+                </InputGroup>
+            </Box>
+
+            <SocialIcons variant="flex-start" pinterestInnerColor="black" {...styles.socialIcons} />
+        </Box>
+    )
+}
+
+const LegalLinks = ({variant}) => {
+    const intl = useIntl()
+    return (
+        <LinksList
+            links={[
+                {
+                    href: '/',
+                    text: intl.formatMessage({
+                        id: 'footer.link.terms_conditions',
+                        defaultMessage: 'Terms & Conditions'
+                    })
+                },
+                {
+                    href: '/',
+                    text: intl.formatMessage({
+                        id: 'footer.link.privacy_policy',
+                        defaultMessage: 'Privacy Policy'
+                    })
+                },
+                {
+                    href: '/',
+                    text: intl.formatMessage({
+                        id: 'footer.link.site_map',
+                        defaultMessage: 'Site Map'
+                    })
+                }
+            ]}
+            color="gray.200"
+            variant={variant}
+        />
+    )
+}
+LegalLinks.propTypes = {
+    variant: PropTypes.oneOf(['vertical', 'horizontal'])
+}

package/app/components/footer/index.test.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
+ */
+import React from 'react'
+import {screen} from '@testing-library/react'
+
+import Footer from '@salesforce/retail-react-app/app/components/footer/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+test('renders component', () => {
+    renderWithProviders(<Footer />)
+    expect(screen.getByRole('link', {name: 'Privacy Policy'})).toBeInTheDocument()
+})
+
+test('renders mobile version by default', () => {
+    renderWithProviders(<Footer />)
+    // This link is hidden initially, but would be shown for desktop
+    expect(screen.getByRole('link', {name: 'About Us', hidden: true})).toBeInTheDocument()
+})

package/app/components/forms/address-fields.jsx

@@ -0,0 +1,49 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import {Grid, GridItem, SimpleGrid, Stack} from '@chakra-ui/react'
+import useAddressFields from '@salesforce/retail-react-app/app/components/forms/useAddressFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+const AddressFields = ({form, prefix = ''}) => {
+    const {data: customer} = useCurrentCustomer()
+    const fields = useAddressFields({form, prefix})
+
+    return (
+        <Stack spacing={5}>
+            <SimpleGrid columns={[1, 1, 2]} gap={5}>
+                <Field {...fields.firstName} />
+                <Field {...fields.lastName} />
+            </SimpleGrid>
+            <Field {...fields.phone} />
+            <Field {...fields.countryCode} />
+            <Field {...fields.address1} />
+            <Field {...fields.city} />
+            <Grid templateColumns="repeat(8, 1fr)" gap={5}>
+                <GridItem colSpan={[4, 4, 4]}>
+                    <Field {...fields.stateCode} />
+                </GridItem>
+                <GridItem colSpan={[4, 4, 4]}>
+                    <Field {...fields.postalCode} />
+                </GridItem>
+            </Grid>
+            {customer.isRegistered && <Field {...fields.preferred} />}
+        </Stack>
+    )
+}
+
+AddressFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default AddressFields

package/app/components/forms/credit-card-fields.jsx

@@ -0,0 +1,149 @@
+/*
+ * Copyright (c) 2022, 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 React from 'react'
+import PropTypes from 'prop-types'
+import ccValidator from 'card-validator'
+import {useIntl} from 'react-intl'
+import {Box, Flex, FormLabel, InputRightElement, SimpleGrid, Stack, Tooltip} from '@chakra-ui/react'
+import {
+    formatCreditCardNumber,
+    getCreditCardIcon
+} from '@salesforce/retail-react-app/app/utils/cc-utils'
+import useCreditCardFields from '@salesforce/retail-react-app/app/components/forms/useCreditCardFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+import {
+    AmexIcon,
+    DiscoverIcon,
+    MastercardIcon,
+    VisaIcon,
+    InfoIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+
+const CreditCardFields = ({form, prefix = ''}) => {
+    const {formatMessage} = useIntl()
+    const fields = useCreditCardFields({form, prefix})
+
+    // Rerender the fields when we `cardType` changes so the detected
+    // card icon appears while typing the card number.
+    // https://react-hook-form.com/api#watch
+    const cardType = form.watch('cardType')
+
+    const CardIcon = getCreditCardIcon(form.getValues().cardType)
+
+    // Note: The ternary should NOT be placed inside a call to `formatMessage`. The message
+    // extraction script (`npm run extract-default-translations`) only works when `formatMessage` is
+    // used with object literals.
+    const securityCodeTooltipLabel =
+        cardType === 'american-express'
+            ? formatMessage({
+                  id: 'credit_card_fields.tool_tip.security_code.american_express',
+                  defaultMessage: 'This 4-digit code can be found on the front of your card.',
+                  description: 'American Express security code help text'
+              })
+            : formatMessage({
+                  id: 'credit_card_fields.tool_tip.security_code',
+                  defaultMessage: 'This 3-digit code can be found on the back of your card.',
+                  description: 'Generic credit card security code help text'
+              })
+
+    return (
+        <Box>
+            <Stack spacing={5}>
+                <Field
+                    {...fields.number}
+                    formLabel={
+                        <Flex justify="space-between">
+                            <FormLabel>{fields.number.label}</FormLabel>
+                            <Stack direction="row" spacing={1}>
+                                <VisaIcon layerStyle="ccIcon" />
+                                <MastercardIcon layerStyle="ccIcon" />
+                                <AmexIcon layerStyle="ccIcon" />
+                                <DiscoverIcon layerStyle="ccIcon" />
+                            </Stack>
+                        </Flex>
+                    }
+                    inputProps={({onChange}) => ({
+                        ...fields.number.inputProps,
+                        onChange(evt) {
+                            const number = evt.target.value.replace(/[^0-9 ]+/, '')
+                            const {card} = ccValidator.number(number)
+                            const formattedNumber = card
+                                ? formatCreditCardNumber(number, card)
+                                : number
+                            form.setValue('cardType', card?.type || '')
+                            return onChange(formattedNumber)
+                        }
+                    })}
+                >
+                    {CardIcon && form.getValues().number?.length > 2 && (
+                        <InputRightElement width="60px">
+                            <CardIcon layerStyle="ccIcon" />
+                        </InputRightElement>
+                    )}
+                </Field>
+
+                <Field {...fields.holder} />
+
+                <SimpleGrid columns={[2, 2, 3]} spacing={5}>
+                    <Field
+                        {...fields.expiry}
+                        inputProps={({onChange}) => ({
+                            ...fields.expiry.inputProps,
+                            onChange(evt) {
+                                let value = evt.target.value.replace('/', '')
+
+                                // We ignore input values other than digits and `/`.
+                                if (value.match(/[^\d|/]/g)) {
+                                    return
+                                }
+
+                                // Ignore input when we already have MM/YY
+                                if (value.length > 4) {
+                                    return
+                                }
+                                if (value.length >= 2) {
+                                    value = `${value.substr(0, 2)}/${value.substr(2)}`
+                                }
+
+                                return onChange(value)
+                            },
+                            onKeyDown(evt) {
+                                if (evt.keyCode === 8 || evt.keyCode === 46) {
+                                    evt.preventDefault()
+                                    return onChange(evt.target.value.slice(0, -1))
+                                }
+                            }
+                        })}
+                    />
+
+                    <Field
+                        {...fields.securityCode}
+                        formLabel={
+                            <FormLabel>
+                                {fields.securityCode.label}{' '}
+                                <Tooltip hasArrow placement="top" label={securityCodeTooltipLabel}>
+                                    <InfoIcon boxSize={5} color="gray.700" ml={1} />
+                                </Tooltip>
+                            </FormLabel>
+                        }
+                    />
+                </SimpleGrid>
+            </Stack>
+            <Field {...fields.cardType} />
+        </Box>
+    )
+}
+
+CreditCardFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default CreditCardFields