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

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

@@ -0,0 +1,232 @@
+/*
+ * 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, {useEffect} from 'react'
+import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
+import {Box, Button, Container, Flex, Radio, RadioGroup, Stack, Text} from '@chakra-ui/react'
+import {useForm, Controller} from 'react-hook-form'
+import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
+import {ChevronDownIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {
+    ToggleCard,
+    ToggleCardEdit,
+    ToggleCardSummary
+} from '@salesforce/retail-react-app/app/components/toggle-card'
+import {
+    useShippingMethodsForShipment,
+    useShopperBasketsMutation
+} from '@salesforce/commerce-sdk-react'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+
+export default function ShippingOptions() {
+    const {formatMessage} = useIntl()
+    const {step, STEPS, goToStep, goToNextStep} = useCheckout()
+    const {data: basket} = useCurrentBasket()
+    const {currency} = useCurrency()
+    const updateShippingMethod = useShopperBasketsMutation('updateShippingMethodForShipment')
+    const {data: shippingMethods} = useShippingMethodsForShipment(
+        {
+            parameters: {
+                basketId: basket?.basketId,
+                shipmentId: 'me'
+            }
+        },
+        {
+            enabled: Boolean(basket?.basketId) && step === STEPS.ShippingOptions
+        }
+    )
+
+    const selectedShippingMethod = basket?.shipments?.[0]?.shippingMethod
+    const selectedShippingAddress = basket?.shipments?.[0]?.shippingAddress
+
+    const form = useForm({
+        shouldUnregister: false,
+        defaultValues: {
+            shippingMethodId: selectedShippingMethod?.id || shippingMethods?.defaultShippingMethodId
+        }
+    })
+
+    useEffect(() => {
+        const defaultMethodId = shippingMethods?.defaultShippingMethodId
+        const methodId = form.getValues().shippingMethodId
+        if (!selectedShippingMethod && !methodId && defaultMethodId) {
+            form.reset({shippingMethodId: defaultMethodId})
+        }
+        if (selectedShippingMethod && methodId !== selectedShippingMethod.id) {
+            form.reset({shippingMethodId: selectedShippingMethod.id})
+        }
+    }, [selectedShippingMethod, shippingMethods])
+
+    const submitForm = async ({shippingMethodId}) => {
+        await updateShippingMethod.mutateAsync({
+            parameters: {
+                basketId: basket.basketId,
+                shipmentId: 'me'
+            },
+            body: {
+                id: shippingMethodId
+            }
+        })
+        goToNextStep()
+    }
+
+    const shippingItem = basket?.shippingItems?.[0]
+
+    const selectedMethodDisplayPrice = Math.min(
+        shippingItem?.price || 0,
+        shippingItem?.priceAfterItemDiscount || 0
+    )
+
+    // Note that this card is disabled when there is no shipping address as well as no shipping method.
+    // We do this because we apply the default shipping method to the basket before checkout - so when
+    // landing on checkout the first time will put you at the first step (contact info), but the shipping
+    // method step would appear filled out already. This fix attempts to avoid any confusion in the UI.
+    return (
+        <ToggleCard
+            id="step-2"
+            title={formatMessage({
+                defaultMessage: 'Shipping & Gift Options',
+                id: 'shipping_options.title.shipping_gift_options'
+            })}
+            editing={step === STEPS.SHIPPING_OPTIONS}
+            isLoading={form.formState.isSubmitting}
+            disabled={selectedShippingMethod == null || !selectedShippingAddress}
+            onEdit={() => goToStep(STEPS.SHIPPING_OPTIONS)}
+        >
+            <ToggleCardEdit>
+                <form
+                    onSubmit={form.handleSubmit(submitForm)}
+                    data-testid="sf-checkout-shipping-options-form"
+                >
+                    <Stack spacing={6}>
+                        {shippingMethods?.applicableShippingMethods && (
+                            <Controller
+                                name="shippingMethodId"
+                                control={form.control}
+                                defaultValue=""
+                                render={({field: {value, onChange}}) => (
+                                    <RadioGroup
+                                        name="shipping-options-radiogroup"
+                                        value={value}
+                                        onChange={onChange}
+                                    >
+                                        <Stack spacing={5}>
+                                            {shippingMethods.applicableShippingMethods.map(
+                                                (opt) => (
+                                                    <Radio value={opt.id} key={opt.id}>
+                                                        <Flex justify="space-between" w="full">
+                                                            <Box>
+                                                                <Text>{opt.name}</Text>
+                                                                <Text
+                                                                    fontSize="sm"
+                                                                    color="gray.600"
+                                                                >
+                                                                    {opt.description}
+                                                                </Text>
+                                                            </Box>
+                                                            <Text fontWeight="bold">
+                                                                <FormattedNumber
+                                                                    value={opt.price}
+                                                                    style="currency"
+                                                                    currency={currency}
+                                                                />
+                                                            </Text>
+                                                        </Flex>
+
+                                                        {opt.shippingPromotions?.map((promo) => {
+                                                            return (
+                                                                <Text
+                                                                    key={promo.promotionId}
+                                                                    fontSize="sm"
+                                                                    color="green.500"
+                                                                >
+                                                                    {promo.calloutMsg}
+                                                                </Text>
+                                                            )
+                                                        })}
+                                                    </Radio>
+                                                )
+                                            )}
+                                        </Stack>
+                                    </RadioGroup>
+                                )}
+                            />
+                        )}
+
+                        <Box>
+                            <Button variant="link" size="sm" rightIcon={<ChevronDownIcon />}>
+                                <FormattedMessage
+                                    defaultMessage="Do you want to send this as a gift?"
+                                    id="shipping_options.action.send_as_a_gift"
+                                />
+                            </Button>
+                        </Box>
+                        <Box>
+                            <Container variant="form">
+                                <Button w="full" type="submit">
+                                    <FormattedMessage
+                                        defaultMessage="Continue to Payment"
+                                        id="shipping_options.button.continue_to_payment"
+                                    />
+                                </Button>
+                            </Container>
+                        </Box>
+                    </Stack>
+                </form>
+            </ToggleCardEdit>
+
+            {selectedShippingMethod && selectedShippingAddress && (
+                <ToggleCardSummary>
+                    <Flex justify="space-between" w="full">
+                        <Text>{selectedShippingMethod.name}</Text>
+                        <Flex alignItems="center">
+                            <Text fontWeight="bold">
+                                {selectedMethodDisplayPrice === 0 ? (
+                                    'Free'
+                                ) : (
+                                    <FormattedNumber
+                                        value={selectedMethodDisplayPrice}
+                                        style="currency"
+                                        currency={currency}
+                                    />
+                                )}
+                            </Text>
+                            {selectedMethodDisplayPrice !== shippingItem.price && (
+                                <Text
+                                    fontWeight="normal"
+                                    textDecoration="line-through"
+                                    color="gray.500"
+                                    marginLeft={1}
+                                >
+                                    <FormattedNumber
+                                        style="currency"
+                                        currency={currency}
+                                        value={shippingItem.price}
+                                    />
+                                </Text>
+                            )}
+                        </Flex>
+                    </Flex>
+                    <Text fontSize="sm" color="gray.700">
+                        {selectedShippingMethod.description}
+                    </Text>
+                    {shippingItem?.priceAdjustments?.map((adjustment) => {
+                        return (
+                            <Text
+                                key={adjustment.priceAdjustmentId}
+                                fontSize="sm"
+                                color="green.500"
+                            >
+                                {adjustment.itemText}
+                            </Text>
+                        )
+                    })}
+                </ToggleCardSummary>
+            )}
+        </ToggleCard>
+    )
+}

package/app/pages/checkout/util/checkout-context.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2023, 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, {useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+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 CheckoutContext = React.createContext()
+
+export const CheckoutProvider = ({children}) => {
+    const {data: customer} = useCurrentCustomer()
+    const {data: basket} = useCurrentBasket()
+    const einstein = useEinstein()
+    const [step, setStep] = useState()
+
+    const CHECKOUT_STEPS_LIST = [
+        'CONTACT_INFO',
+        'SHIPPING_ADDRESS',
+        'SHIPPING_OPTIONS',
+        'PAYMENT',
+        'REVIEW_ORDER'
+    ]
+    const STEPS = CHECKOUT_STEPS_LIST.reduce((acc, step, idx) => ({...acc, [step]: idx}), {})
+
+    const getCheckoutStepName = (step) => CHECKOUT_STEPS_LIST[step]
+
+    useEffect(() => {
+        if (!customer || !basket) {
+            return
+        }
+
+        let step = STEPS.REVIEW_ORDER
+
+        if (customer.isGuest && !basket.customerInfo?.email) {
+            step = STEPS.CONTACT_INFO
+        } else if (!basket.shipments[0]?.shippingAddress) {
+            step = STEPS.SHIPPING_ADDRESS
+        } else if (!basket.shipments[0]?.shippingMethod) {
+            step = STEPS.SHIPPING_OPTIONS
+        } else if (!basket.paymentInstruments || !basket.billingAddress) {
+            step = STEPS.PAYMENT
+        }
+
+        setStep(step)
+    }, [
+        customer?.isGuest,
+        basket?.customerInfo?.email,
+        basket?.shipments[0]?.shippingAddress,
+        basket?.shipments[0]?.shippingMethod,
+        basket?.paymentInstruments,
+        basket?.billingAddress
+    ])
+
+    /**************** Einstein ****************/
+    // Run this once when checkout begins
+    useEffect(() => {
+        if (basket?.productItems) {
+            einstein.sendBeginCheckout(basket)
+        }
+    }, [])
+
+    // Run this every time checkout steps change
+    useEffect(() => {
+        if (step != undefined) {
+            einstein.sendCheckoutStep(getCheckoutStepName(step), step, basket)
+        }
+    }, [step])
+
+    const value = {
+        step,
+        STEPS,
+        goToNextStep: () => setStep(step + 1),
+        goToStep: (step) => setStep(step)
+    }
+
+    return <CheckoutContext.Provider value={value}>{children}</CheckoutContext.Provider>
+}
+
+CheckoutProvider.propTypes = {
+    children: PropTypes.any
+}
+
+/**
+ * A hook for managing checkout state and actions
+ * @returns {Object} Checkout data and actions
+ */
+export const useCheckout = () => {
+    return React.useContext(CheckoutContext)
+}

package/app/pages/home/data.js

@@ -0,0 +1,134 @@
+/*
+ * 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
+ */
+
+/**
+ * This is the data used in by the Retail React App home page.
+ * The example static data is created for demonstration purposes.
+ * Typically you'd get this information from the API or possibly
+ * from content slots.
+ */
+import React from 'react'
+import {defineMessages} from 'react-intl'
+import {
+    AccountIcon,
+    BasketIcon,
+    BrandLogo,
+    FigmaLogo,
+    GithubLogo,
+    DashboardIcon,
+    HeartIcon,
+    LikeIcon,
+    PlugIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+
+export const heroFeatures = [
+    {
+        message: defineMessages({
+            title: {defaultMessage: 'Download on Github', id: 'home.hero_features.link.on_github'}
+        }),
+        icon: <GithubLogo width={12} height={12} />,
+        href: 'https://github.com/SalesforceCommerceCloud/pwa-kit'
+    },
+    {
+        message: defineMessages({
+            title: {
+                defaultMessage: 'Deploy on Managed Runtime',
+                id: 'home.hero_features.link.on_managed_runtime'
+            }
+        }),
+        icon: <BrandLogo width={12} height={8} />,
+        href: 'https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pushing-and-deploying-bundles.html'
+    },
+    {
+        message: defineMessages({
+            title: {
+                defaultMessage: 'Create with the Figma PWA Design Kit',
+                id: 'home.hero_features.link.design_kit'
+            }
+        }),
+        icon: <FigmaLogo width={12} height={8} />,
+        href: 'https://sfdc.co/figma-pwa-design-kit'
+    }
+]
+
+export const features = [
+    {
+        message: defineMessages({
+            title: {defaultMessage: 'Cart & Checkout', id: 'home.features.heading.cart_checkout'},
+            text: {
+                defaultMessage:
+                    "Ecommerce best practice for a shopper's cart and checkout experience.",
+                id: 'home.features.description.cart_checkout'
+            }
+        }),
+        icon: <BasketIcon />
+    },
+    {
+        message: defineMessages({
+            title: {
+                defaultMessage: 'Einstein Recommendations',
+                id: 'home.features.heading.einstein_recommendations'
+            },
+            text: {
+                defaultMessage:
+                    'Deliver the next best product or offer to every shopper through product recommendations.',
+                id: 'home.features.description.einstein_recommendations'
+            }
+        }),
+        icon: <LikeIcon />
+    },
+    {
+        message: defineMessages({
+            title: {defaultMessage: 'My Account', id: 'home.features.heading.my_account'},
+            text: {
+                defaultMessage:
+                    'Shoppers can manage account information such as their profile, addresses, payments and orders.',
+                id: 'home.features.description.my_account'
+            }
+        }),
+        icon: <AccountIcon />
+    },
+    {
+        message: defineMessages({
+            title: {
+                defaultMessage: 'Shopper Login and API Access Service',
+                id: 'home.features.heading.shopper_login'
+            },
+            text: {
+                defaultMessage:
+                    'Enable shoppers to easily log in with a more personalized shopping experience.',
+                id: 'home.features.description.shopper_login'
+            }
+        }),
+        icon: <PlugIcon />
+    },
+    {
+        message: defineMessages({
+            title: {
+                defaultMessage: 'Components & Design Kit',
+                id: 'home.features.heading.components'
+            },
+            text: {
+                defaultMessage:
+                    'Built using Chakra UI, a simple, modular and accessible React component library.',
+                id: 'home.features.description.components'
+            }
+        }),
+        icon: <DashboardIcon />
+    },
+    {
+        message: defineMessages({
+            title: {defaultMessage: 'Wishlist', id: 'home.features.heading.wishlist'},
+            text: {
+                defaultMessage:
+                    'Registered shoppers can add product items to their wishlist from purchasing later. ',
+                id: 'home.features.description.wishlist'
+            }
+        }),
+        icon: <HeartIcon />
+    }
+]