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

package/app/pages/checkout/partials/cc-radio-group.jsx

@@ -0,0 +1,122 @@
+/*
+ * 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, Text, SimpleGrid, FormControl, FormErrorMessage} from '@chakra-ui/react'
+import {PlusIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {RadioCard, RadioCardGroup} from '@salesforce/retail-react-app/app/components/radio-card'
+import {getCreditCardIcon} from '@salesforce/retail-react-app/app/utils/cc-utils'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+const CCRadioGroup = ({
+    form,
+    value = '',
+    isEditingPayment = false,
+    togglePaymentEdit = () => null,
+    onPaymentIdChange = () => null
+}) => {
+    const {data: customer} = useCurrentCustomer()
+
+    return (
+        <FormControl
+            id="paymentInstrumentId"
+            isInvalid={form.formState.errors.paymentInstrumentId}
+            isRequired={!isEditingPayment}
+        >
+            {form.formState.errors.paymentInstrumentId && (
+                <FormErrorMessage marginTop={0} marginBottom={4}>
+                    {form.formState.errors.paymentInstrumentId.message}
+                </FormErrorMessage>
+            )}
+
+            <RadioCardGroup value={value} onChange={onPaymentIdChange}>
+                <Stack spacing={4}>
+                    <SimpleGrid columns={[1, 1, 2]} spacing={4}>
+                        {customer.paymentInstruments?.map((payment) => {
+                            const CardIcon = getCreditCardIcon(payment.paymentCard?.cardType)
+                            return (
+                                <RadioCard
+                                    key={payment.paymentInstrumentId}
+                                    value={payment.paymentInstrumentId}
+                                >
+                                    <Stack direction="row">
+                                        {CardIcon && <CardIcon layerStyle="ccIcon" />}
+                                        <Stack spacing={4}>
+                                            <Stack spacing={1}>
+                                                <Text>{payment.paymentCard?.cardType}</Text>
+                                                <Stack direction="row">
+                                                    <Text>
+                                                        &bull;&bull;&bull;&bull;{' '}
+                                                        {payment.paymentCard?.numberLastDigits}
+                                                    </Text>
+                                                    <Text>
+                                                        {payment.paymentCard?.expirationMonth}/
+                                                        {payment.paymentCard?.expirationYear}
+                                                    </Text>
+                                                </Stack>
+                                                <Text>{payment.paymentCard.holder}</Text>
+                                            </Stack>
+
+                                            <Box>
+                                                <Button variant="link" size="sm" colorScheme="red">
+                                                    <FormattedMessage
+                                                        defaultMessage="Remove"
+                                                        id="cc_radio_group.action.remove"
+                                                    />
+                                                </Button>
+                                            </Box>
+                                        </Stack>
+                                    </Stack>
+                                </RadioCard>
+                            )
+                        })}
+
+                        {!isEditingPayment && (
+                            <Button
+                                variant="outline"
+                                border="1px dashed"
+                                borderColor="gray.200"
+                                color="blue.600"
+                                height={{lg: 'full'}}
+                                minHeight={['44px', '44px', '154px']}
+                                rounded="base"
+                                fontWeight="medium"
+                                leftIcon={<PlusIcon boxSize={'15px'} />}
+                                onClick={togglePaymentEdit}
+                            >
+                                <FormattedMessage
+                                    defaultMessage="Add New Card"
+                                    id="cc_radio_group.button.add_new_card"
+                                />
+                            </Button>
+                        )}
+                    </SimpleGrid>
+                </Stack>
+            </RadioCardGroup>
+        </FormControl>
+    )
+}
+
+CCRadioGroup.propTypes = {
+    /** The form object returned from `useForm` */
+    form: PropTypes.object.isRequired,
+
+    /** The current payment ID value */
+    value: PropTypes.string,
+
+    /** Flag for payment add/edit form, used for setting validation rules */
+    isEditingPayment: PropTypes.bool,
+
+    /** Method for toggling the payment add/edit form */
+    togglePaymentEdit: PropTypes.func,
+
+    /** Callback for notifying on value change */
+    onPaymentIdChange: PropTypes.func
+}
+
+export default CCRadioGroup

package/app/pages/checkout/partials/checkout-footer.jsx

@@ -0,0 +1,140 @@
+/*
+ * 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 {useIntl} from 'react-intl'
+import {
+    Box,
+    StylesProvider,
+    useMultiStyleConfig,
+    Divider,
+    Text,
+    HStack,
+    Flex,
+    Spacer,
+    useStyles
+} from '@chakra-ui/react'
+import LinksList from '@salesforce/retail-react-app/app/components/links-list'
+import {
+    VisaIcon,
+    MastercardIcon,
+    AmexIcon,
+    DiscoverIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
+
+const CheckoutFooter = ({...otherProps}) => {
+    const styles = useMultiStyleConfig('CheckoutFooter')
+    const intl = useIntl()
+
+    return (
+        <Box as="footer" {...styles.container} {...otherProps}>
+            <Box {...styles.content}>
+                <StylesProvider value={styles}>
+                    <LinksList
+                        links={[
+                            {
+                                href: '/',
+                                text: intl.formatMessage({
+                                    id: 'checkout_footer.link.shipping',
+                                    defaultMessage: 'Shipping'
+                                })
+                            },
+                            {
+                                href: '/',
+                                text: intl.formatMessage({
+                                    id: 'checkout_footer.link.returns_exchanges',
+                                    defaultMessage: 'Returns & Exchanges'
+                                })
+                            }
+                        ]}
+                        {...styles.customerService}
+                    />
+
+                    <HideOnDesktop>
+                        <CreditCardIcons marginTop={4} marginBottom={4} />
+                    </HideOnDesktop>
+
+                    <Divider {...styles.horizontalRule} />
+
+                    <Box {...styles.bottomHalf}>
+                        <Text {...styles.copyright}>
+                            &copy; {new Date().getFullYear()}{' '}
+                            {intl.formatMessage({
+                                id: 'checkout_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>
+                            <Flex>
+                                <LegalLinks variant="horizontal" />
+                                <Spacer />
+                                <CreditCardIcons />
+                            </Flex>
+                        </HideOnMobile>
+                    </Box>
+                </StylesProvider>
+            </Box>
+        </Box>
+    )
+}
+
+export default CheckoutFooter
+
+const LegalLinks = ({variant}) => {
+    const intl = useIntl()
+
+    return (
+        <LinksList
+            links={[
+                {
+                    href: '/',
+                    text: intl.formatMessage({
+                        id: 'checkout_footer.link.terms_conditions',
+                        defaultMessage: 'Terms & Conditions'
+                    })
+                },
+                {
+                    href: '/',
+                    text: intl.formatMessage({
+                        id: 'checkout_footer.link.privacy_policy',
+                        defaultMessage: 'Privacy Policy'
+                    })
+                },
+                {
+                    href: '/',
+                    text: intl.formatMessage({
+                        id: 'checkout_footer.link.site_map',
+                        defaultMessage: 'Site Map'
+                    })
+                }
+            ]}
+            color="gray.200"
+            variant={variant}
+        />
+    )
+}
+LegalLinks.propTypes = {
+    variant: PropTypes.oneOf(['vertical', 'horizontal'])
+}
+
+const CreditCardIcons = (props) => {
+    const styles = useStyles()
+    return (
+        <HStack sizing={2} {...props}>
+            <VisaIcon {...styles.creditCardIcon} />
+            <MastercardIcon {...styles.creditCardIcon} />
+            <AmexIcon {...styles.creditCardIcon} />
+            <DiscoverIcon {...styles.creditCardIcon} />
+        </HStack>
+    )
+}

package/app/pages/checkout/partials/checkout-footer.test.js

@@ -0,0 +1,16 @@
+/*
+ * 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 CheckoutFooter from '@salesforce/retail-react-app/app/pages/checkout/partials/checkout-footer'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+test('renders component', () => {
+    renderWithProviders(<CheckoutFooter />)
+    expect(screen.getByRole('link', {name: 'Shipping'})).toBeInTheDocument()
+})

package/app/pages/checkout/partials/checkout-header.jsx

@@ -0,0 +1,54 @@
+/*
+ * 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 {FormattedMessage} from 'react-intl'
+import {Badge, Box, Button, Flex, Center} from '@chakra-ui/react'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import {BasketIcon, BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
+import {HOME_HREF} from '@salesforce/retail-react-app/app/constants'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+
+const CheckoutHeader = () => {
+    const {
+        derivedData: {totalItems}
+    } = useCurrentBasket()
+    return (
+        <Box px={[4, 4, 8]} bg="white" borderBottom="1px" borderColor="gray.100">
+            <Box maxWidth="container.xxxl" marginLeft="auto" marginRight="auto">
+                <Flex h={{base: '52px', md: '80px'}} align="center" justify="space-between">
+                    <Link href={HOME_HREF} title="Back to homepage">
+                        <BrandLogo
+                            width={{base: '35px', md: '45px'}}
+                            height={{base: '24px', md: '32px'}}
+                        />
+                    </Link>
+
+                    <Button
+                        as={Link}
+                        href="/cart"
+                        display="inline-flex"
+                        variant="unstyled"
+                        color="gray.900"
+                        rightIcon={
+                            <Center position="relative" width={11} height={11}>
+                                <BasketIcon position="absolute" left="0px" />
+                                <Badge variant="notification">{totalItems}</Badge>
+                            </Center>
+                        }
+                    >
+                        <FormattedMessage
+                            defaultMessage="Back to cart"
+                            id="checkout_header.link.cart"
+                        />
+                    </Button>
+                </Flex>
+            </Box>
+        </Box>
+    )
+}
+
+export default CheckoutHeader

package/app/pages/checkout/partials/checkout-header.test.js

@@ -0,0 +1,16 @@
+/*
+ * 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 CheckoutHeader from '@salesforce/retail-react-app/app/pages/checkout/partials/checkout-header'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+test('renders component', () => {
+    renderWithProviders(<CheckoutHeader />)
+    expect(screen.getByTitle(/back to homepage/i)).toBeInTheDocument()
+})

package/app/pages/checkout/partials/checkout-skeleton.jsx

@@ -0,0 +1,52 @@
+/*
+ * 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 {Box, Container, Grid, GridItem, Skeleton, Stack} from '@chakra-ui/react'
+
+const CheckoutSkeleton = () => {
+    return (
+        <Box background="gray.50" flex="1">
+            <Container
+                data-testid="sf-checkout-skeleton"
+                maxWidth="container.xl"
+                py={{base: 7, lg: 16}}
+                px={{base: 0, lg: 4}}
+            >
+                <Grid templateColumns={{base: '1fr', lg: '66% 1fr'}} gap={{base: 10, lg: 20}}>
+                    <GridItem>
+                        <Stack spacing={4}>
+                            <Skeleton height="78px" />
+                            <Skeleton height="78px" />
+                            <Skeleton height="78px" />
+                            <Skeleton height="78px" />
+                        </Stack>
+                    </GridItem>
+
+                    <GridItem py={6} px={[4, 4, 0]}>
+                        <Stack spacing={5}>
+                            <Skeleton height="30px" width="50%" />
+
+                            <Stack spacing={5}>
+                                <Skeleton height="30px" width="65%" />
+
+                                <Stack w="full" py={4} borderY="1px" borderColor="gray.200">
+                                    <Skeleton height={6} />
+                                    <Skeleton height={6} />
+                                    <Skeleton height={6} />
+                                </Stack>
+
+                                <Skeleton height={6} />
+                            </Stack>
+                        </Stack>
+                    </GridItem>
+                </Grid>
+            </Container>
+        </Box>
+    )
+}
+
+export default CheckoutSkeleton

package/app/pages/checkout/partials/contact-info.jsx

@@ -0,0 +1,251 @@
+/*
+ * 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, {useRef, useState} from 'react'
+import PropTypes from 'prop-types'
+import {
+    Alert,
+    AlertDialog,
+    AlertDialogBody,
+    AlertDialogContent,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogOverlay,
+    AlertIcon,
+    Box,
+    Button,
+    Container,
+    Stack,
+    Text
+} from '@chakra-ui/react'
+import {useForm} from 'react-hook-form'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
+import useLoginFields from '@salesforce/retail-react-app/app/components/forms/useLoginFields'
+import {
+    ToggleCard,
+    ToggleCardEdit,
+    ToggleCardSummary
+} from '@salesforce/retail-react-app/app/components/toggle-card'
+import Field from '@salesforce/retail-react-app/app/components/field'
+import {AuthModal, useAuthModal} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import {AuthHelpers, useAuthHelper, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
+
+const ContactInfo = () => {
+    const {formatMessage} = useIntl()
+    const authModal = useAuthModal('password')
+    const navigate = useNavigation()
+    const {data: customer} = useCurrentCustomer()
+    const {data: basket} = useCurrentBasket()
+    const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
+    const logout = useAuthHelper(AuthHelpers.Logout)
+    const updateCustomerForBasket = useShopperBasketsMutation('updateCustomerForBasket')
+
+    const {step, STEPS, goToStep, goToNextStep} = useCheckout()
+
+    const form = useForm({
+        defaultValues: {email: customer?.email || basket?.customerInfo?.email || '', password: ''}
+    })
+
+    const fields = useLoginFields({form})
+
+    const [error, setError] = useState(null)
+    const [showPasswordField, setShowPasswordField] = useState(false)
+    const [signOutConfirmDialogIsOpen, setSignOutConfirmDialogIsOpen] = useState(false)
+
+    const submitForm = async (data) => {
+        setError(null)
+        try {
+            if (!data.password) {
+                await updateCustomerForBasket.mutateAsync({
+                    parameters: {basketId: basket.basketId},
+                    body: {email: data.email}
+                })
+            } else {
+                await login.mutateAsync({username: data.email, password: data.password})
+            }
+            goToNextStep()
+        } catch (error) {
+            if (/Unauthorized/i.test(error.message)) {
+                setError(
+                    formatMessage({
+                        defaultMessage: 'Incorrect username or password, please try again.',
+                        id: 'contact_info.error.incorrect_username_or_password'
+                    })
+                )
+            } else {
+                setError(error.message)
+            }
+        }
+    }
+
+    const togglePasswordField = () => {
+        if (error) {
+            setError(null)
+        }
+        setShowPasswordField(!showPasswordField)
+    }
+
+    const onForgotPasswordClick = () => {
+        authModal.onOpen()
+    }
+
+    return (
+        <ToggleCard
+            id="step-0"
+            title={formatMessage({
+                defaultMessage: 'Contact Info',
+                id: 'contact_info.title.contact_info'
+            })}
+            editing={step === STEPS.CONTACT_INFO}
+            isLoading={form.formState.isSubmitting}
+            onEdit={() => {
+                if (customer.isRegistered) {
+                    setSignOutConfirmDialogIsOpen(true)
+                } else {
+                    goToStep(STEPS.CONTACT_INFO)
+                }
+            }}
+            editLabel={
+                customer.isRegistered ? (
+                    <FormattedMessage defaultMessage="Sign Out" id="contact_info.action.sign_out" />
+                ) : undefined
+            }
+        >
+            <ToggleCardEdit>
+                <Container variant="form">
+                    <form onSubmit={form.handleSubmit(submitForm)}>
+                        <Stack spacing={6}>
+                            {error && (
+                                <Alert status="error">
+                                    <AlertIcon />
+                                    {error}
+                                </Alert>
+                            )}
+
+                            <Stack spacing={5} position="relative">
+                                <Field {...fields.email} />
+                                {showPasswordField && (
+                                    <Stack>
+                                        <Field {...fields.password} />
+                                        <Box>
+                                            <Button
+                                                variant="link"
+                                                size="sm"
+                                                onClick={onForgotPasswordClick}
+                                            >
+                                                <FormattedMessage
+                                                    defaultMessage="Forgot password?"
+                                                    id="contact_info.link.forgot_password"
+                                                />
+                                            </Button>
+                                        </Box>
+                                    </Stack>
+                                )}
+                            </Stack>
+
+                            <Stack spacing={3}>
+                                <Button type="submit">
+                                    {!showPasswordField ? (
+                                        <FormattedMessage
+                                            defaultMessage="Checkout as Guest"
+                                            id="contact_info.button.checkout_as_guest"
+                                        />
+                                    ) : (
+                                        <FormattedMessage
+                                            defaultMessage="Log In"
+                                            id="contact_info.button.login"
+                                        />
+                                    )}
+                                </Button>
+                                <Button variant="outline" onClick={togglePasswordField}>
+                                    {!showPasswordField ? (
+                                        <FormattedMessage
+                                            defaultMessage="Already have an account? Log in"
+                                            id="contact_info.button.already_have_account"
+                                        />
+                                    ) : (
+                                        <FormattedMessage
+                                            defaultMessage="Checkout as Guest"
+                                            id="contact_info.button.checkout_as_guest"
+                                        />
+                                    )}
+                                </Button>
+                            </Stack>
+                        </Stack>
+                    </form>
+                </Container>
+                <AuthModal {...authModal} />
+            </ToggleCardEdit>
+            <ToggleCardSummary>
+                <Text>{basket?.customerInfo?.email || customer?.email}</Text>
+
+                <SignOutConfirmationDialog
+                    isOpen={signOutConfirmDialogIsOpen}
+                    onClose={() => setSignOutConfirmDialogIsOpen(false)}
+                    onConfirm={async () => {
+                        await logout.mutateAsync()
+                        navigate('/login')
+                        setSignOutConfirmDialogIsOpen(false)
+                    }}
+                />
+            </ToggleCardSummary>
+        </ToggleCard>
+    )
+}
+
+const SignOutConfirmationDialog = ({isOpen, onConfirm, onClose}) => {
+    const cancelRef = useRef()
+
+    return (
+        <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+            <AlertDialogOverlay>
+                <AlertDialogContent>
+                    <AlertDialogHeader fontSize="lg" fontWeight="bold">
+                        <FormattedMessage
+                            defaultMessage="Sign Out"
+                            id="signout_confirmation_dialog.heading.sign_out"
+                        />
+                    </AlertDialogHeader>
+
+                    <AlertDialogBody>
+                        <FormattedMessage
+                            defaultMessage="Are you sure you want to sign out? You will need to sign back in to proceed
+                        with your current order."
+                            id="signout_confirmation_dialog.message.sure_to_sign_out"
+                        />
+                    </AlertDialogBody>
+
+                    <AlertDialogFooter>
+                        <Button ref={cancelRef} variant="outline" onClick={onClose}>
+                            <FormattedMessage
+                                defaultMessage="Cancel"
+                                id="signout_confirmation_dialog.button.cancel"
+                            />
+                        </Button>
+                        <Button colorScheme="red" onClick={onConfirm} ml={3}>
+                            <FormattedMessage
+                                defaultMessage="Sign Out"
+                                id="signout_confirmation_dialog.button.sign_out"
+                            />
+                        </Button>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialogOverlay>
+        </AlertDialog>
+    )
+}
+
+SignOutConfirmationDialog.propTypes = {
+    isOpen: PropTypes.bool,
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func
+}
+
+export default ContactInfo