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

package/app/components/forms/form-action-buttons.jsx

@@ -0,0 +1,55 @@
+/*
+ * 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 {FormattedMessage} from 'react-intl'
+import {Button, Stack} from '@chakra-ui/react'
+import {MESSAGE_PROPTYPE} from '@salesforce/retail-react-app/app/utils/locale.js'
+
+/**
+ * Renders a form submit button and a cancel button with configurable labels and callbacks
+ * in a responsive layout. Used primarily in forms that can be toggled opened/closed.
+ */
+const FormActionButtons = ({
+    saveButtonProps = {},
+    cancelButtonProps = {},
+    saveButtonLabel,
+    cancelButtonLabel,
+    onCancel = () => {}
+}) => {
+    return (
+        <Stack direction={{base: 'column', lg: 'row-reverse'}} spacing={4}>
+            <Button type="submit" minWidth={28} {...saveButtonProps}>
+                {saveButtonLabel ? (
+                    <FormattedMessage {...saveButtonLabel} />
+                ) : (
+                    <FormattedMessage defaultMessage="Save" id="form_action_buttons.button.save" />
+                )}
+            </Button>
+            <Button variant="outline" minWidth={28} onClick={onCancel} {...cancelButtonProps}>
+                {cancelButtonLabel ? (
+                    <FormattedMessage {...cancelButtonLabel} />
+                ) : (
+                    <FormattedMessage
+                        id="form_action_buttons.button.cancel"
+                        defaultMessage="Cancel"
+                    />
+                )}
+            </Button>
+        </Stack>
+    )
+}
+
+FormActionButtons.propTypes = {
+    saveButtonProps: PropTypes.object,
+    cancelButtonProps: PropTypes.object,
+    saveButtonLabel: MESSAGE_PROPTYPE,
+    cancelButtonLabel: MESSAGE_PROPTYPE,
+    onCancel: PropTypes.func
+}
+
+export default FormActionButtons

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

@@ -0,0 +1,31 @@
+/*
+ * 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 {Stack} from '@chakra-ui/react'
+import useLoginFields from '@salesforce/retail-react-app/app/components/forms/useLoginFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+
+const LoginFields = ({form, prefix = ''}) => {
+    const fields = useLoginFields({form, prefix})
+    return (
+        <Stack spacing={5}>
+            <Field {...fields.email} />
+            <Field {...fields.password} />
+        </Stack>
+    )
+}
+
+LoginFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default LoginFields

package/app/components/forms/password-requirements.jsx

@@ -0,0 +1,99 @@
+/*
+ * 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 {FormattedMessage} from 'react-intl'
+import {Flex, Text, Stack} from '@chakra-ui/react'
+import {CheckCircleIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {validatePassword} from '@salesforce/retail-react-app/app/utils/password-utils'
+
+/**
+ * UI component for styling password requirement line
+ */
+const PasswordRequirement = ({isValid, children}) => {
+    const iconStyles = {
+        display: 'block',
+        ml: isValid ? '-2px' : '-1px',
+        mr: isValid ? '9px' : '10px',
+        boxSize: isValid ? 4 : '14px',
+        color: isValid ? 'green.500' : 'white',
+        border: !isValid ? '1px solid' : 'none',
+        borderColor: 'gray.200',
+        borderRadius: 'full'
+    }
+    return (
+        <Flex align="center">
+            <CheckCircleIcon {...iconStyles} />
+            <Text fontSize="sm" lineHeight={4}>
+                {children}
+            </Text>
+        </Flex>
+    )
+}
+
+PasswordRequirement.propTypes = {
+    /** Should it render in valid state */
+    isValid: PropTypes.bool,
+
+    /** The requirement text */
+    children: PropTypes.any
+}
+
+/**
+ * Renders a list of password requirments. Each requirement line toggles to its `isValid`
+ * state when the given password value meets the associated critieria.
+ */
+const PasswordRequirements = ({value}) => {
+    const pwValidations = validatePassword(value)
+
+    return (
+        <Stack spacing={2}>
+            <PasswordRequirement isValid={pwValidations.hasMinChars}>
+                <FormattedMessage
+                    id="password_requirements.error.eight_letter_minimum"
+                    defaultMessage="8 characters minimum"
+                    description="Password requirement"
+                />
+            </PasswordRequirement>
+            <PasswordRequirement isValid={pwValidations.hasUppercase}>
+                <FormattedMessage
+                    id="password_requirements.error.one_uppercase_letter"
+                    defaultMessage="1 uppercase letter"
+                    description="Password requirement"
+                />
+            </PasswordRequirement>
+            <PasswordRequirement isValid={pwValidations.hasLowercase}>
+                <FormattedMessage
+                    id="password_requirements.error.one_lowercase_letter"
+                    defaultMessage="1 lowercase letter"
+                    description="Password requirement"
+                />
+            </PasswordRequirement>
+            <PasswordRequirement isValid={pwValidations.hasNumber}>
+                <FormattedMessage
+                    defaultMessage="1 number"
+                    description="Password requirement"
+                    id="password_requirements.error.one_number"
+                />
+            </PasswordRequirement>
+            <PasswordRequirement isValid={pwValidations.hasSpecialChar}>
+                <FormattedMessage
+                    id="password_requirements.error.one_special_character"
+                    defaultMessage="1 special character (example: , S ! % #)"
+                    description="Password requirement"
+                />
+            </PasswordRequirement>
+        </Stack>
+    )
+}
+
+PasswordRequirements.propTypes = {
+    /** The password to check against */
+    value: PropTypes.string
+}
+
+export default PasswordRequirements

package/app/components/forms/post-checkout-registration-fields.jsx

@@ -0,0 +1,43 @@
+/*
+ * 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 {Stack, Box} from '@chakra-ui/react'
+import useRegistrationFields from '@salesforce/retail-react-app/app/components/forms/useRegistrationFields'
+import PasswordRequirements from '@salesforce/retail-react-app/app/components/forms/password-requirements'
+import Field from '@salesforce/retail-react-app/app/components/field'
+
+const PostCheckoutRegistrationFields = ({form, prefix = ''}) => {
+    const fields = useRegistrationFields({form, prefix})
+    const password = form.watch(`${prefix}password`)
+
+    return (
+        <Box>
+            <Stack spacing={5}>
+                <Field {...fields.email} />
+
+                <Stack spacing={3} paddingBottom={2}>
+                    <Field {...fields.password} />
+                    <PasswordRequirements value={password} />
+                </Stack>
+            </Stack>
+
+            <Field {...fields.firstName} type="hidden" />
+            <Field {...fields.lastName} type="hidden" />
+        </Box>
+    )
+}
+
+PostCheckoutRegistrationFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default PostCheckoutRegistrationFields

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

@@ -0,0 +1,36 @@
+/*
+ * 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 {SimpleGrid, Stack} from '@chakra-ui/react'
+import useProfileFields from '@salesforce/retail-react-app/app/components/forms/useProfileFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+
+const ProfileFields = ({form, prefix = ''}) => {
+    const fields = useProfileFields({form, prefix})
+
+    return (
+        <Stack spacing={5}>
+            <SimpleGrid columns={[1, 1, 1, 2]} spacing={5}>
+                <Field {...fields.firstName} />
+                <Field {...fields.lastName} />
+            </SimpleGrid>
+            <Field {...fields.email} />
+            <Field {...fields.phone} />
+        </Stack>
+    )
+}
+
+ProfileFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default ProfileFields

package/app/components/forms/promo-code-fields.jsx

@@ -0,0 +1,43 @@
+/*
+ * 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 {FormattedMessage} from 'react-intl'
+import {Box, Button} from '@chakra-ui/react'
+import usePromoCodeFields from '@salesforce/retail-react-app/app/components/forms/usePromoCodeFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+
+const PromoCodeFields = ({form, prefix = '', ...props}) => {
+    const fields = usePromoCodeFields({form, prefix})
+
+    const code = form.watch('code')
+
+    return (
+        <Box {...props}>
+            <Field inputProps={{flex: 1, mr: 2}} {...fields.code}>
+                <Button
+                    type="submit"
+                    fontSize="sm"
+                    isLoading={form.formState.isSubmitting}
+                    disabled={code?.length < 3}
+                >
+                    <FormattedMessage defaultMessage="Apply" id="promo_code_fields.button.apply" />
+                </Button>
+            </Field>
+        </Box>
+    )
+}
+
+PromoCodeFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default PromoCodeFields

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

@@ -0,0 +1,42 @@
+/*
+ * 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 {Stack} from '@chakra-ui/react'
+import useRegistrationFields from '@salesforce/retail-react-app/app/components/forms/useRegistrationFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+import PasswordRequirements from '@salesforce/retail-react-app/app/components/forms/password-requirements'
+
+const RegistrationFields = ({form, prefix = ''}) => {
+    const fields = useRegistrationFields({form, prefix})
+    const password = form.watch('password')
+
+    return (
+        <Stack spacing={5}>
+            <Field {...fields.firstName} />
+            <Field {...fields.lastName} />
+            <Field {...fields.email} />
+
+            <Stack spacing={3} pb={2}>
+                <Field {...fields.password} />
+                <PasswordRequirements value={password} />
+            </Stack>
+
+            <Field {...fields.acceptsMarketing} inputProps={{alignItems: 'flex-start'}} />
+        </Stack>
+    )
+}
+
+RegistrationFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default RegistrationFields

package/app/components/forms/reset-password-fields.jsx

@@ -0,0 +1,31 @@
+/*
+ * 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 {Box} from '@chakra-ui/react'
+import useResetPasswordFields from '@salesforce/retail-react-app/app/components/forms/useResetPasswordFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+
+const ResetPasswordFields = ({form, prefix = ''}) => {
+    const fields = useResetPasswordFields({form, prefix})
+
+    return (
+        <Box>
+            <Field {...fields.email} />
+        </Box>
+    )
+}
+
+ResetPasswordFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default ResetPasswordFields

package/app/components/forms/state-province-options.jsx

@@ -0,0 +1,75 @@
+/*
+ * 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 const stateOptions = [
+    {value: 'AL', label: 'Alabama'},
+    {value: 'AK', label: 'Alaska'},
+    {value: 'AZ', label: 'Arizona'},
+    {value: 'AR', label: 'Arkansas'},
+    {value: 'CA', label: 'California'},
+    {value: 'CO', label: 'Colorado'},
+    {value: 'CT', label: 'Connecticut'},
+    {value: 'DE', label: 'Delaware'},
+    {value: 'DC', label: 'District Of Columbia'},
+    {value: 'FL', label: 'Florida'},
+    {value: 'GA', label: 'Georgia'},
+    {value: 'HI', label: 'Hawaii'},
+    {value: 'ID', label: 'Idaho'},
+    {value: 'IL', label: 'Illinois'},
+    {value: 'IN', label: 'Indiana'},
+    {value: 'IA', label: 'Iowa'},
+    {value: 'KS', label: 'Kansas'},
+    {value: 'KY', label: 'Kentucky'},
+    {value: 'LA', label: 'Louisiana'},
+    {value: 'ME', label: 'Maine'},
+    {value: 'MD', label: 'Maryland'},
+    {value: 'MA', label: 'Massachusetts'},
+    {value: 'MI', label: 'Michigan'},
+    {value: 'MN', label: 'Minnesota'},
+    {value: 'MS', label: 'Mississippi'},
+    {value: 'MO', label: 'Missouri'},
+    {value: 'MT', label: 'Montana'},
+    {value: 'NE', label: 'Nebraska'},
+    {value: 'NV', label: 'Nevada'},
+    {value: 'NH', label: 'New Hampshire'},
+    {value: 'NJ', label: 'New Jersey'},
+    {value: 'NM', label: 'New Mexico'},
+    {value: 'NY', label: 'New York'},
+    {value: 'NC', label: 'North Carolina'},
+    {value: 'ND', label: 'North Dakota'},
+    {value: 'OH', label: 'Ohio'},
+    {value: 'OK', label: 'Oklahoma'},
+    {value: 'OR', label: 'Oregon'},
+    {value: 'PA', label: 'Pennsylvania'},
+    {value: 'RI', label: 'Rhode Island'},
+    {value: 'SC', label: 'South Carolina'},
+    {value: 'SD', label: 'South Dakota'},
+    {value: 'TN', label: 'Tennessee'},
+    {value: 'TX', label: 'Texas'},
+    {value: 'UT', label: 'Utah'},
+    {value: 'VT', label: 'Vermont'},
+    {value: 'VA', label: 'Virginia'},
+    {value: 'WA', label: 'Washington'},
+    {value: 'WV', label: 'West Virginia'},
+    {value: 'WI', label: 'Wisconsin'},
+    {value: 'WY', label: 'Wyoming'}
+]
+
+export const provinceOptions = [
+    {value: 'AB', label: 'Alberta'},
+    {value: 'BC', label: 'British Columbia'},
+    {value: 'MB', label: 'Manitoba'},
+    {value: 'NB', label: 'New Brunswick'},
+    {value: 'NL', label: 'Newfoundland and Labrador'},
+    {value: 'NS', label: 'Nova Scotia'},
+    {value: 'ON', label: 'Ontario'},
+    {value: 'PE', label: 'Prince Edward Island'},
+    {value: 'QC', label: 'Quebec'},
+    {value: 'SK', label: 'Saskatchewan'},
+    {value: 'NT', label: 'Northwest Territories'},
+    {value: 'NU', label: 'Nunavut'},
+    {value: 'YT', label: 'Yukon'}
+]

package/app/components/forms/update-password-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 {FormattedMessage} from 'react-intl'
+import {Box, Button, Stack, StackDivider} from '@chakra-ui/react'
+import useUpdatePasswordFields from '@salesforce/retail-react-app/app/components/forms/useUpdatePasswordFields'
+import Field from '@salesforce/retail-react-app/app/components/field'
+import PasswordRequirements from '@salesforce/retail-react-app/app/components/forms/password-requirements'
+
+const UpdatePasswordFields = ({form, prefix = ''}) => {
+    const fields = useUpdatePasswordFields({form, prefix})
+    const password = form.watch('password')
+
+    return (
+        <Stack spacing={5} divider={<StackDivider borderColor="gray.100" />}>
+            <Stack>
+                <Field {...fields.currentPassword} />
+                <Box>
+                    <Button variant="link" size="sm" onClick={() => null}>
+                        <FormattedMessage
+                            defaultMessage="Forgot Password?"
+                            id="update_password_fields.button.forgot_password"
+                        />
+                    </Button>
+                </Box>
+            </Stack>
+
+            <Stack spacing={3} pb={2}>
+                <Field {...fields.password} />
+                <PasswordRequirements value={password} />
+            </Stack>
+        </Stack>
+    )
+}
+
+UpdatePasswordFields.propTypes = {
+    /** Object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** Optional prefix for field names */
+    prefix: PropTypes.string
+}
+
+export default UpdatePasswordFields