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

package/app/pages/checkout/partials/contact-info.test.js

@@ -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 {screen, within} from '@testing-library/react'
+import ContactInfo from '@salesforce/retail-react-app/app/pages/checkout/partials/contact-info'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+jest.mock('../util/checkout-context', () => {
+    return {
+        useCheckout: jest.fn().mockReturnValue({
+            customer: null,
+            basket: {},
+            isGuestCheckout: true,
+            setIsGuestCheckout: jest.fn(),
+            step: 0,
+            login: null,
+            STEPS: {CONTACT_INFO: 0},
+            goToStep: null,
+            goToNextStep: null
+        })
+    }
+})
+
+test('renders component', async () => {
+    const {user} = renderWithProviders(<ContactInfo />)
+
+    // switch to login
+    const trigger = screen.getByText(/Already have an account\? Log in/i)
+    await user.click(trigger)
+
+    // open forgot password modal
+    const withinCard = within(screen.getByTestId('sf-toggle-card-step-0'))
+    const openModal = withinCard.getByText(/Forgot password\?/i)
+    await user.click(openModal)
+
+    // check that forgot password modal is open
+    const withinForm = within(screen.getByTestId('sf-auth-modal-form'))
+    expect(withinForm.getByText(/Reset Password/i)).toBeInTheDocument()
+})

package/app/pages/checkout/partials/payment-form.jsx

@@ -0,0 +1,97 @@
+/*
+ * 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, FormattedNumber, useIntl} from 'react-intl'
+import PropTypes from 'prop-types'
+import {Box, Flex, Radio, RadioGroup, Stack, Text, Tooltip} from '@chakra-ui/react'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import {LockIcon, PaypalIcon} from '@salesforce/retail-react-app/app/components/icons'
+import CreditCardFields from '@salesforce/retail-react-app/app/components/forms/credit-card-fields'
+import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+
+const PaymentForm = ({form, onSubmit}) => {
+    const {formatMessage} = useIntl()
+    const {data: basket} = useCurrentBasket()
+    const {currency} = useCurrency()
+
+    return (
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+            <Stack spacing={8}>
+                <Stack spacing={5}>
+                    <Box border="1px solid" borderColor="gray.100" rounded="base" overflow="hidden">
+                        <RadioGroup value="cc">
+                            <Box
+                                py={3}
+                                px={[4, 4, 6]}
+                                bg="gray.50"
+                                borderBottom="1px solid"
+                                borderColor="gray.100"
+                            >
+                                <Radio value="cc">
+                                    <Flex justify="space-between">
+                                        <Stack direction="row" align="center">
+                                            <Text fontWeight="bold">
+                                                <FormattedMessage
+                                                    defaultMessage="Credit Card"
+                                                    id="payment_selection.heading.credit_card"
+                                                />
+                                            </Text>
+                                            <Tooltip
+                                                hasArrow
+                                                placement="top"
+                                                label={formatMessage({
+                                                    defaultMessage:
+                                                        'This is a secure SSL encrypted payment.',
+                                                    id: 'payment_selection.tooltip.secure_payment'
+                                                })}
+                                            >
+                                                <LockIcon color="gray.700" boxSize={5} />
+                                            </Tooltip>
+                                        </Stack>
+                                        <Text fontWeight="bold">
+                                            <FormattedNumber
+                                                value={basket?.orderTotal}
+                                                style="currency"
+                                                currency={currency}
+                                            />
+                                        </Text>
+                                    </Flex>
+                                </Radio>
+                            </Box>
+
+                            <Box p={[4, 4, 6]} borderBottom="1px solid" borderColor="gray.100">
+                                <Stack spacing={6}>
+                                    <Stack spacing={6}>
+                                        <CreditCardFields form={form} />
+                                    </Stack>
+                                </Stack>
+                            </Box>
+
+                            <Box py={3} px={[4, 4, 6]} bg="gray.50" borderColor="gray.100">
+                                <Radio value="paypal">
+                                    <Box py="2px">
+                                        <PaypalIcon width="auto" height="20px" />
+                                    </Box>
+                                </Radio>
+                            </Box>
+                        </RadioGroup>
+                    </Box>
+                </Stack>
+            </Stack>
+        </form>
+    )
+}
+
+PaymentForm.propTypes = {
+    /** The form object returned from `useForm` */
+    form: PropTypes.object,
+
+    /** Callback for form submit */
+    onSubmit: PropTypes.func
+}
+
+export default PaymentForm

package/app/pages/checkout/partials/payment.jsx

@@ -0,0 +1,276 @@
+/*
+ * 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 {FormattedMessage, useIntl} from 'react-intl'
+import {Box, Button, Checkbox, Container, Heading, Stack, Text, Divider} from '@chakra-ui/react'
+import {useForm} from 'react-hook-form'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
+import {
+    getPaymentInstrumentCardType,
+    getCreditCardIcon
+} from '@salesforce/retail-react-app/app/utils/cc-utils'
+import {
+    ToggleCard,
+    ToggleCardEdit,
+    ToggleCardSummary
+} from '@salesforce/retail-react-app/app/components/toggle-card'
+import PaymentForm from '@salesforce/retail-react-app/app/pages/checkout/partials/payment-form'
+import ShippingAddressSelection from '@salesforce/retail-react-app/app/pages/checkout/partials/shipping-address-selection'
+import AddressDisplay from '@salesforce/retail-react-app/app/components/address-display'
+import {PromoCode, usePromoCode} from '@salesforce/retail-react-app/app/components/promo-code'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+
+const Payment = () => {
+    const {formatMessage} = useIntl()
+    const {data: basket} = useCurrentBasket()
+    const selectedShippingAddress = basket?.shipments && basket?.shipments[0]?.shippingAddress
+    const selectedBillingAddress = basket?.billingAddress
+    const appliedPayment = basket?.paymentInstruments && basket?.paymentInstruments[0]
+    const [billingSameAsShipping, setBillingSameAsShipping] = useState(true) // By default, have billing addr to be the same as shipping
+    const {mutateAsync: addPaymentInstrumentToBasket} = useShopperBasketsMutation(
+        'addPaymentInstrumentToBasket'
+    )
+    const {mutateAsync: updateBillingAddressForBasket} = useShopperBasketsMutation(
+        'updateBillingAddressForBasket'
+    )
+    const {mutateAsync: removePaymentInstrumentFromBasket} = useShopperBasketsMutation(
+        'removePaymentInstrumentFromBasket'
+    )
+    const showToast = useToast()
+    const showError = () => {
+        showToast({
+            title: formatMessage(API_ERROR_MESSAGE),
+            status: 'error'
+        })
+    }
+
+    const {step, STEPS, goToStep, goToNextStep} = useCheckout()
+
+    const billingAddressForm = useForm({
+        mode: 'onChange',
+        shouldUnregister: false,
+        defaultValues: {...selectedBillingAddress}
+    })
+
+    // Using destructuring to remove properties from the object...
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {removePromoCode, ...promoCodeProps} = usePromoCode()
+
+    const paymentMethodForm = useForm()
+
+    const onPaymentSubmit = async (formValue) => {
+        // 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] = formValue.expiry.split('/')
+
+        const paymentInstrument = {
+            paymentMethodId: 'CREDIT_CARD',
+            paymentCard: {
+                holder: formValue.holder,
+                issueNumber: formValue.number.replace(/ /g, ''),
+                cardType: getPaymentInstrumentCardType(formValue.cardType),
+                expirationMonth: parseInt(expirationMonth),
+                expirationYear: parseInt(`20${expirationYear}`)
+            }
+        }
+
+        return addPaymentInstrumentToBasket({
+            parameters: {basketId: basket?.basketId},
+            body: paymentInstrument
+        })
+    }
+    const onBillingSubmit = async () => {
+        const isFormValid = await billingAddressForm.trigger()
+
+        if (!isFormValid) {
+            return
+        }
+        const billingAddress = billingSameAsShipping
+            ? selectedShippingAddress
+            : billingAddressForm.getValues()
+        // Using destructuring to remove properties from the object...
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {addressId, creationDate, lastModified, preferred, ...address} = billingAddress
+        return updateBillingAddressForBasket({
+            body: address,
+            parameters: {basketId: basket.basketId, shipmentId: 'me'}
+        })
+    }
+    const onPaymentRemoval = async () => {
+        try {
+            await removePaymentInstrumentFromBasket({
+                parameters: {
+                    basketId: basket.basketId,
+                    paymentInstrumentId: appliedPayment.paymentInstrumentId
+                }
+            })
+        } catch (e) {
+            showError()
+        }
+    }
+
+    const onSubmit = paymentMethodForm.handleSubmit(async (paymentFormValues) => {
+        if (!appliedPayment) {
+            await onPaymentSubmit(paymentFormValues)
+        }
+        await onBillingSubmit()
+        goToNextStep()
+    })
+
+    return (
+        <ToggleCard
+            id="step-3"
+            title={formatMessage({defaultMessage: 'Payment', id: 'checkout_payment.title.payment'})}
+            editing={step === STEPS.PAYMENT}
+            isLoading={
+                paymentMethodForm.formState.isSubmitting ||
+                billingAddressForm.formState.isSubmitting
+            }
+            disabled={appliedPayment == null}
+            onEdit={() => goToStep(STEPS.PAYMENT)}
+        >
+            <ToggleCardEdit>
+                <Box mt={-2} mb={4}>
+                    <PromoCode {...promoCodeProps} itemProps={{border: 'none'}} />
+                </Box>
+
+                <Stack spacing={6}>
+                    {!appliedPayment?.paymentCard ? (
+                        <PaymentForm form={paymentMethodForm} onSubmit={onPaymentSubmit} />
+                    ) : (
+                        <Stack spacing={3}>
+                            <Heading as="h3" fontSize="md">
+                                <FormattedMessage
+                                    defaultMessage="Credit Card"
+                                    id="checkout_payment.heading.credit_card"
+                                />
+                            </Heading>
+                            <Stack direction="row" spacing={4}>
+                                <PaymentCardSummary payment={appliedPayment} />
+                                <Button
+                                    variant="link"
+                                    size="sm"
+                                    colorScheme="red"
+                                    onClick={onPaymentRemoval}
+                                >
+                                    <FormattedMessage
+                                        defaultMessage="Remove"
+                                        id="checkout_payment.action.remove"
+                                    />
+                                </Button>
+                            </Stack>
+                        </Stack>
+                    )}
+
+                    <Divider borderColor="gray.100" />
+
+                    <Stack spacing={2}>
+                        <Heading as="h3" fontSize="md">
+                            <FormattedMessage
+                                defaultMessage="Billing Address"
+                                id="checkout_payment.heading.billing_address"
+                            />
+                        </Heading>
+
+                        <Checkbox
+                            name="billingSameAsShipping"
+                            isChecked={billingSameAsShipping}
+                            onChange={(e) => setBillingSameAsShipping(e.target.checked)}
+                        >
+                            <Text fontSize="sm" color="gray.700">
+                                <FormattedMessage
+                                    defaultMessage="Same as shipping address"
+                                    id="checkout_payment.label.same_as_shipping"
+                                />
+                            </Text>
+                        </Checkbox>
+
+                        {billingSameAsShipping && selectedShippingAddress && (
+                            <Box pl={7}>
+                                <AddressDisplay address={selectedShippingAddress} />
+                            </Box>
+                        )}
+                    </Stack>
+
+                    {!billingSameAsShipping && (
+                        <ShippingAddressSelection
+                            form={billingAddressForm}
+                            selectedAddress={selectedBillingAddress}
+                            hideSubmitButton
+                        />
+                    )}
+
+                    <Box pt={3}>
+                        <Container variant="form">
+                            <Button w="full" onClick={onSubmit}>
+                                <FormattedMessage
+                                    defaultMessage="Review Order"
+                                    id="checkout_payment.button.review_order"
+                                />
+                            </Button>
+                        </Container>
+                    </Box>
+                </Stack>
+            </ToggleCardEdit>
+
+            <ToggleCardSummary>
+                <Stack spacing={6}>
+                    {appliedPayment && (
+                        <Stack spacing={3}>
+                            <Heading as="h3" fontSize="md">
+                                <FormattedMessage
+                                    defaultMessage="Credit Card"
+                                    id="checkout_payment.heading.credit_card"
+                                />
+                            </Heading>
+                            <PaymentCardSummary payment={appliedPayment} />
+                        </Stack>
+                    )}
+
+                    <Divider borderColor="gray.100" />
+
+                    {selectedBillingAddress && (
+                        <Stack spacing={2}>
+                            <Heading as="h3" fontSize="md">
+                                <FormattedMessage
+                                    defaultMessage="Billing Address"
+                                    id="checkout_payment.heading.billing_address"
+                                />
+                            </Heading>
+                            <AddressDisplay address={selectedBillingAddress} />
+                        </Stack>
+                    )}
+                </Stack>
+            </ToggleCardSummary>
+        </ToggleCard>
+    )
+}
+
+const PaymentCardSummary = ({payment}) => {
+    const CardIcon = getCreditCardIcon(payment?.paymentCard?.cardType)
+    return (
+        <Stack direction="row" alignItems="center" spacing={3}>
+            {CardIcon && <CardIcon layerStyle="ccIcon" />}
+
+            <Stack direction="row">
+                <Text>{payment.paymentCard.cardType}</Text>
+                <Text>&bull;&bull;&bull;&bull; {payment.paymentCard.numberLastDigits}</Text>
+                <Text>
+                    {payment.paymentCard.expirationMonth}/{payment.paymentCard.expirationYear}
+                </Text>
+            </Stack>
+        </Stack>
+    )
+}
+
+PaymentCardSummary.propTypes = {payment: PropTypes.object}
+
+export default Payment