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

package/app/pages/checkout/partials/shipping-address-selection.jsx

@@ -0,0 +1,377 @@
+/*
+ * 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, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import {defineMessage, FormattedMessage, useIntl} from 'react-intl'
+import {Box, Button, Container, Heading, SimpleGrid, Stack} from '@chakra-ui/react'
+import {useForm, Controller} from 'react-hook-form'
+import {shallowEquals} from '@salesforce/retail-react-app/app/utils/utils'
+import {RadioCard, RadioCardGroup} from '@salesforce/retail-react-app/app/components/radio-card'
+import ActionCard from '@salesforce/retail-react-app/app/components/action-card'
+import {PlusIcon} from '@salesforce/retail-react-app/app/components/icons'
+import AddressDisplay from '@salesforce/retail-react-app/app/components/address-display'
+import AddressFields from '@salesforce/retail-react-app/app/components/forms/address-fields'
+import FormActionButtons from '@salesforce/retail-react-app/app/components/forms/form-action-buttons'
+import {MESSAGE_PROPTYPE} from '@salesforce/retail-react-app/app/utils/locale'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
+
+const saveButtonMessage = defineMessage({
+    defaultMessage: 'Save & Continue to Shipping Method',
+    id: 'shipping_address_edit_form.button.save_and_continue'
+})
+
+const ShippingAddressEditForm = ({
+    title,
+    hasSavedAddresses,
+    toggleAddressEdit,
+    hideSubmitButton,
+    form,
+    submitButtonLabel
+}) => {
+    const {formatMessage} = useIntl()
+
+    return (
+        <Box
+            {...(hasSavedAddresses && {
+                gridColumn: [1, 1, 'span 2'],
+                paddingX: [4, 4, 6],
+                paddingY: 6,
+                rounded: 'base',
+                border: '1px solid',
+                borderColor: 'blue.600'
+            })}
+            data-testid="sf-shipping-address-edit-form"
+        >
+            <Stack spacing={6}>
+                {hasSavedAddresses && (
+                    <Heading as="h3" size="sm">
+                        {title}
+                    </Heading>
+                )}
+
+                <Stack spacing={6}>
+                    <AddressFields form={form} />
+
+                    {hasSavedAddresses && !hideSubmitButton ? (
+                        <FormActionButtons
+                            saveButtonLabel={saveButtonMessage}
+                            onCancel={toggleAddressEdit}
+                        />
+                    ) : (
+                        !hideSubmitButton && (
+                            <Box>
+                                <Container variant="form">
+                                    <Button
+                                        type="submit"
+                                        width="full"
+                                        disabled={form.formState.isSubmitting}
+                                    >
+                                        {formatMessage(submitButtonLabel)}
+                                    </Button>
+                                </Container>
+                            </Box>
+                        )
+                    )}
+                </Stack>
+            </Stack>
+        </Box>
+    )
+}
+
+ShippingAddressEditForm.propTypes = {
+    title: PropTypes.string,
+    hasSavedAddresses: PropTypes.bool,
+    toggleAddressEdit: PropTypes.func,
+    hideSubmitButton: PropTypes.bool,
+    form: PropTypes.object,
+    submitButtonLabel: MESSAGE_PROPTYPE
+}
+
+const submitButtonMessage = defineMessage({
+    defaultMessage: 'Submit',
+    id: 'shipping_address_selection.button.submit'
+})
+
+const ShippingAddressSelection = ({
+    form,
+    selectedAddress,
+    submitButtonLabel = submitButtonMessage,
+    hideSubmitButton = false,
+    onSubmit = async () => null
+}) => {
+    const {formatMessage} = useIntl()
+    const {data: customer, isLoading, isFetching} = useCurrentCustomer()
+    const isLoadingRegisteredCustomer = isLoading && isFetching
+
+    const hasSavedAddresses = customer.addresses?.length > 0
+    const [isEditingAddress, setIsEditingAddress] = useState(false)
+    const [selectedAddressId, setSelectedAddressId] = useState(undefined)
+
+    const defaultForm = useForm({
+        mode: 'onChange',
+        shouldUnregister: false,
+        defaultValues: {...selectedAddress}
+    })
+    if (!form) form = defaultForm
+
+    const matchedAddress =
+        hasSavedAddresses &&
+        selectedAddress &&
+        customer.addresses.find((savedAddress) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const {addressId, creationDate, lastModified, preferred, ...address} = savedAddress
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const {id, _type, ...selectedAddr} = selectedAddress
+            return shallowEquals(address, selectedAddr)
+        })
+
+    const removeCustomerAddress = useShopperCustomersMutation('removeCustomerAddress')
+
+    useEffect(() => {
+        // Automatically select the customer's default/preferred shipping address
+        if (customer.addresses) {
+            const address = customer.addresses.find((addr) => addr.preferred === true)
+            if (address) {
+                form.reset({...address})
+            }
+        }
+    }, [])
+
+    useEffect(() => {
+        // If the customer deletes all their saved addresses during checkout,
+        // we need to make sure to display the address form.
+        if (!isLoading && !customer?.addresses && !isEditingAddress) {
+            setIsEditingAddress(true)
+        }
+    }, [customer])
+
+    useEffect(() => {
+        if (matchedAddress) {
+            form.reset({
+                addressId: matchedAddress.addressId,
+                ...matchedAddress
+            })
+        }
+
+        if (!matchedAddress && selectedAddressId) {
+            setIsEditingAddress(true)
+        }
+    }, [matchedAddress])
+
+    // Updates the selected customer address if we've an address selected
+    // else saves a new customer address
+    const submitForm = async (address) => {
+        if (selectedAddressId) {
+            address = {...address, addressId: selectedAddressId}
+        }
+
+        setIsEditingAddress(false)
+        form.reset({addressId: ''})
+
+        await onSubmit(address)
+    }
+
+    // Acts as our `onChange` handler for addressId radio group. We do this
+    // manually here so we can toggle off the 'add address' form as needed.
+    const handleAddressIdSelection = (addressId) => {
+        if (addressId && isEditingAddress) {
+            setIsEditingAddress(false)
+        }
+
+        const address = customer.addresses.find((addr) => addr.addressId === addressId)
+
+        form.reset({...address})
+    }
+
+    const removeSavedAddress = async (addressId) => {
+        if (addressId === selectedAddressId) {
+            setSelectedAddressId(undefined)
+            setIsEditingAddress(false)
+            form.reset({addressId: ''})
+        }
+
+        await removeCustomerAddress.mutateAsync({
+            parameters: {
+                customerId: customer.customerId,
+                addressName: addressId
+            }
+        })
+    }
+
+    // Opens/closes the 'add address' form. Notice that when toggling either state,
+    // we reset the form so as to remove any address selection.
+    const toggleAddressEdit = (address = undefined) => {
+        if (address?.addressId) {
+            setSelectedAddressId(address.addressId)
+            form.reset({...address})
+            setIsEditingAddress(true)
+        } else {
+            setSelectedAddressId(undefined)
+            form.reset({addressId: ''})
+            setIsEditingAddress(!isEditingAddress)
+        }
+
+        form.trigger()
+    }
+
+    if (isLoadingRegisteredCustomer) {
+        // Don't render anything yet, to make sure values like hasSavedAddresses are correct
+        return null
+    }
+
+    return (
+        <form onSubmit={form.handleSubmit(submitForm)}>
+            <Stack spacing={4}>
+                {hasSavedAddresses && (
+                    <Controller
+                        name="addressId"
+                        defaultValue=""
+                        control={form.control}
+                        rules={{required: !isEditingAddress}}
+                        render={({field: {value}}) => (
+                            <RadioCardGroup value={value} onChange={handleAddressIdSelection}>
+                                <SimpleGrid
+                                    columns={[1, 1, 2]}
+                                    spacing={4}
+                                    gridAutoFlow="row dense"
+                                >
+                                    {customer.addresses?.map((address, index) => (
+                                        <React.Fragment key={address.addressId}>
+                                            <RadioCard value={address.addressId}>
+                                                <ActionCard
+                                                    padding={0}
+                                                    border="none"
+                                                    onRemove={() =>
+                                                        removeSavedAddress(address.addressId)
+                                                    }
+                                                    onEdit={() => toggleAddressEdit(address)}
+                                                    data-testid={`sf-checkout-shipping-address-${index}`}
+                                                >
+                                                    <AddressDisplay address={address} />
+                                                </ActionCard>
+                                                {/*Arrow up icon pointing to the address that is being edited*/}
+                                                {isEditingAddress &&
+                                                    address.addressId === selectedAddressId && (
+                                                        <Box
+                                                            width={3}
+                                                            height={3}
+                                                            borderLeft="1px solid"
+                                                            borderTop="1px solid"
+                                                            borderColor="blue.600"
+                                                            position="absolute"
+                                                            left="50%"
+                                                            bottom="-23px"
+                                                            background="white"
+                                                            transform="rotate(45deg)"
+                                                        />
+                                                    )}
+                                            </RadioCard>
+                                            {isEditingAddress &&
+                                                address.addressId === selectedAddressId && (
+                                                    <ShippingAddressEditForm
+                                                        title={formatMessage({
+                                                            defaultMessage: 'Edit Shipping Address',
+                                                            id: 'shipping_address_selection.title.edit_shipping'
+                                                        })}
+                                                        hasSavedAddresses={hasSavedAddresses}
+                                                        toggleAddressEdit={toggleAddressEdit}
+                                                        hideSubmitButton={hideSubmitButton}
+                                                        form={form}
+                                                        submitButtonLabel={submitButtonLabel}
+                                                    />
+                                                )}
+                                        </React.Fragment>
+                                    ))}
+
+                                    <Button
+                                        variant="outline"
+                                        border="1px dashed"
+                                        borderColor="gray.200"
+                                        color="blue.600"
+                                        height={['44px', '44px', '167px']}
+                                        rounded="base"
+                                        fontWeight="medium"
+                                        leftIcon={<PlusIcon boxSize={'15px'} />}
+                                        onClick={toggleAddressEdit}
+                                    >
+                                        <FormattedMessage
+                                            defaultMessage="Add New Address"
+                                            id="shipping_address_selection.button.add_address"
+                                        />
+                                        {/*Arrow up icon pointing to the new address that is being added*/}
+                                        {isEditingAddress && !selectedAddressId && (
+                                            <Box
+                                                width={3}
+                                                height={3}
+                                                borderLeft="1px solid"
+                                                borderTop="1px solid"
+                                                borderColor="blue.600"
+                                                position="absolute"
+                                                left="50%"
+                                                bottom="-23px"
+                                                background="white"
+                                                transform="rotate(45deg)"
+                                            />
+                                        )}
+                                    </Button>
+                                </SimpleGrid>
+                            </RadioCardGroup>
+                        )}
+                    />
+                )}
+
+                {(customer.isGuest || (isEditingAddress && !selectedAddressId)) && (
+                    <ShippingAddressEditForm
+                        title={formatMessage({
+                            defaultMessage: 'Add New Address',
+                            id: 'shipping_address_selection.title.add_address'
+                        })}
+                        hasSavedAddresses={hasSavedAddresses}
+                        toggleAddressEdit={toggleAddressEdit}
+                        hideSubmitButton={hideSubmitButton}
+                        form={form}
+                        submitButtonLabel={submitButtonLabel}
+                    />
+                )}
+
+                {customer.isRegistered && !isEditingAddress && !hideSubmitButton && (
+                    <Box pt={2}>
+                        <Container variant="form">
+                            <Button
+                                type="submit"
+                                width="full"
+                                disabled={!form.formState.isValid || form.formState.isSubmitting}
+                            >
+                                {formatMessage(submitButtonLabel)}
+                            </Button>
+                        </Container>
+                    </Box>
+                )}
+            </Stack>
+        </form>
+    )
+}
+
+ShippingAddressSelection.propTypes = {
+    /** The form object returnd from `useForm` */
+    form: PropTypes.object,
+
+    /** Optional address to use as default selection */
+    selectedAddress: PropTypes.object,
+
+    /** Override the submit button label */
+    submitButtonLabel: MESSAGE_PROPTYPE,
+
+    /** Show or hide the submit button (for controlling the form from outside component) */
+    hideSubmitButton: PropTypes.bool,
+
+    /** Callback for form submit */
+    onSubmit: PropTypes.func
+}
+
+export default ShippingAddressSelection

package/app/pages/checkout/partials/shipping-address.jsx

@@ -0,0 +1,132 @@
+/*
+ * 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 {nanoid} from 'nanoid'
+import {defineMessage, useIntl} from 'react-intl'
+import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
+import {
+    ToggleCard,
+    ToggleCardEdit,
+    ToggleCardSummary
+} from '@salesforce/retail-react-app/app/components/toggle-card'
+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 {
+    useShopperCustomersMutation,
+    useShopperBasketsMutation
+} from '@salesforce/commerce-sdk-react'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+
+const submitButtonMessage = defineMessage({
+    defaultMessage: 'Continue to Shipping Method',
+    id: 'shipping_address.button.continue_to_shipping'
+})
+
+export default function ShippingAddress() {
+    const {formatMessage} = useIntl()
+    const [isLoading, setIsLoading] = useState()
+    const {data: customer} = useCurrentCustomer()
+    const {data: basket} = useCurrentBasket()
+    const selectedShippingAddress = basket?.shipments && basket?.shipments[0]?.shippingAddress
+    const {step, STEPS, goToStep, goToNextStep} = useCheckout()
+    const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
+    const updateCustomerAddress = useShopperCustomersMutation('updateCustomerAddress')
+    const updateShippingAddressForShipment = useShopperBasketsMutation(
+        'updateShippingAddressForShipment'
+    )
+
+    const submitAndContinue = async (address) => {
+        setIsLoading(true)
+        const {
+            addressId,
+            address1,
+            city,
+            countryCode,
+            firstName,
+            lastName,
+            phone,
+            postalCode,
+            stateCode
+        } = address
+        await updateShippingAddressForShipment.mutateAsync({
+            parameters: {
+                basketId: basket.basketId,
+                shipmentId: 'me',
+                useAsBilling: false
+            },
+            body: {
+                address1,
+                city,
+                countryCode,
+                firstName,
+                lastName,
+                phone,
+                postalCode,
+                stateCode
+            }
+        })
+
+        if (customer.isRegistered && !addressId) {
+            const body = {
+                address1,
+                city,
+                countryCode,
+                firstName,
+                lastName,
+                phone,
+                postalCode,
+                stateCode,
+                addressId: nanoid()
+            }
+            await createCustomerAddress.mutateAsync({
+                body,
+                parameters: {customerId: customer.customerId}
+            })
+        }
+
+        if (customer.isRegistered && addressId) {
+            await updateCustomerAddress.mutateAsync({
+                body: address,
+                parameters: {
+                    customerId: customer.customerId,
+                    addressName: addressId
+                }
+            })
+        }
+
+        goToNextStep()
+        setIsLoading(false)
+    }
+
+    return (
+        <ToggleCard
+            id="step-1"
+            title={formatMessage({
+                defaultMessage: 'Shipping Address',
+                id: 'shipping_address.title.shipping_address'
+            })}
+            editing={step === STEPS.SHIPPING_ADDRESS}
+            isLoading={isLoading}
+            disabled={step === STEPS.CONTACT_INFO && !selectedShippingAddress}
+            onEdit={() => goToStep(STEPS.SHIPPING_ADDRESS)}
+        >
+            <ToggleCardEdit>
+                <ShippingAddressSelection
+                    selectedAddress={selectedShippingAddress}
+                    submitButtonLabel={submitButtonMessage}
+                    onSubmit={submitAndContinue}
+                />
+            </ToggleCardEdit>
+            {selectedShippingAddress && (
+                <ToggleCardSummary>
+                    <AddressDisplay address={selectedShippingAddress} />
+                </ToggleCardSummary>
+            )}
+        </ToggleCard>
+    )
+}