one-click-user-registration.jsx

/*
 * Copyright (c) 2025, 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, {useRef, useState} from 'react'
import {FormattedMessage} from 'react-intl'
import PropTypes from 'prop-types'
import {
    Box,
    Checkbox,
    Stack,
    Text,
    Heading,
    Badge,
    HStack,
    useDisclosure
} from '@salesforce/retail-react-app/app/components/shared/ui'
import OtpAuth from '@salesforce/retail-react-app/app/components/otp-auth'
import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
import {useCustomerType, useAuthHelper, AuthHelpers} from '@salesforce/commerce-sdk-react'
import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
import {useAppOrigin} from '@salesforce/retail-react-app/app/hooks/use-app-origin'
import {isAbsoluteURL} from '@salesforce/retail-react-app/app/page-designer/utils'

export default function UserRegistration({
    enableUserRegistration,
    setEnableUserRegistration,
    isGuestCheckout = false,
    isDisabled = false,
    onSavePreferenceChange,
    onRegistered,
    showNotice = false
}) {
    const {data: basket} = useCurrentBasket()
    const {isGuest} = useCustomerType()
    const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
    const loginPasswordless = useAuthHelper(AuthHelpers.LoginPasswordlessUser)
    const appOrigin = useAppOrigin()
    const passwordlessConfigCallback = getConfig().app.login?.passwordless?.callbackURI
    const callbackURL = isAbsoluteURL(passwordlessConfigCallback)
        ? passwordlessConfigCallback
        : `${appOrigin}${passwordlessConfigCallback}`
    const {isOpen: isOtpOpen, onOpen: onOtpOpen, onClose: onOtpClose} = useDisclosure()
    const otpSentRef = useRef(false)
    const [registrationSucceeded, setRegistrationSucceeded] = useState(false)

    const handleOtpClose = () => {
        otpSentRef.current = false
        onOtpClose()
    }

    const handleUserRegistrationChange = async (e) => {
        const checked = e.target.checked
        setEnableUserRegistration(checked)
        // Treat opting into registration as opting to save for future
        if (onSavePreferenceChange) onSavePreferenceChange(checked)
        // If user unchecks, allow OTP to be re-triggered upon re-check
        if (!checked) {
            otpSentRef.current = false
        }
        // Kick off OTP for guests when they opt in
        if (checked && isGuest && basket?.customerInfo?.email && !otpSentRef.current) {
            try {
                await authorizePasswordlessLogin.mutateAsync({
                    userid: basket.customerInfo.email,
                    callbackURI: `${callbackURL}?mode=otp_email`,
                    register_customer: true,
                    last_name: basket.customerInfo.email,
                    email: basket.customerInfo.email
                })
                otpSentRef.current = true
                onOtpOpen()
            } catch (_e) {
                // Silent failure; user can continue as guest
            }
        }
    }

    const handleOtpVerification = async (otpCode) => {
        try {
            await loginPasswordless.mutateAsync({
                pwdlessLoginToken: otpCode,
                register_customer: true
            })

            if (onRegistered) {
                await onRegistered(basket?.basketId)
            }
            handleOtpClose()
            setRegistrationSucceeded(true)
        } catch (_e) {
            // Let OtpAuth surface errors via its own UI/toast
        }
        return {success: true}
    }

    // Hide the form if the "Checkout as Guest" button was clicked
    if (isGuestCheckout) {
        return null
    }

    // After successful registration (local) or when parent instructs to show, render notice
    if (registrationSucceeded || showNotice) {
        return (
            <Box
                border="1px solid"
                borderColor="gray.200"
                rounded="md"
                p={4}
                data-testid="sf-account-creation-notification"
            >
                <HStack justify="space-between" align="start" mb={2}>
                    <Heading fontSize="lg" lineHeight="30px">
                        <FormattedMessage
                            defaultMessage="Account Created"
                            id="account_creation_notification.title"
                        />
                    </Heading>
                    <Badge
                        colorScheme="green"
                        fontSize="0.9em"
                        px={3}
                        py={1}
                        rounded="md"
                        aria-label="Verified"
                    >
                        <FormattedMessage
                            defaultMessage="Verified"
                            id="account_creation_notification.verified"
                        />
                    </Badge>
                </HStack>
                <Stack spacing={2}>
                    <Text color="gray.700">
                        <FormattedMessage
                            defaultMessage="We’ve created and verified your account using the information from your order. Next time you check out, just enter the code we send to log in — no password needed."
                            id="account_creation_notification.body"
                        />
                    </Text>
                </Stack>
            </Box>
        )
    }

    return (
        <>
            <Box
                border="1px solid"
                borderColor="gray.200"
                rounded="md"
                p={4}
                data-testid="sf-user-registration-content"
            >
                <Stack spacing={2}>
                    <Heading fontSize="lg" lineHeight="30px" tabIndex="0">
                        <FormattedMessage
                            defaultMessage="Save Checkout Info for Future Use"
                            id="checkout.title.user_registration"
                        />
                    </Heading>
                    <Checkbox
                        name="userRegistration"
                        isChecked={enableUserRegistration}
                        onChange={handleUserRegistrationChange}
                        isDisabled={isDisabled}
                        alignItems="flex-start"
                    >
                        <Stack spacing={1}>
                            <Text>
                                <FormattedMessage
                                    defaultMessage="Create an account to check out faster"
                                    id="checkout.label.user_registration"
                                />
                            </Text>
                            {enableUserRegistration && (
                                <Text fontSize="sm" color="gray.500">
                                    <FormattedMessage
                                        defaultMessage="Your payment, address, and contact information will be saved in a new account. Use the emailed one-time password (OTP) to create your account. After creating your account, use the Forgot Password function to set a new password."
                                        id="checkout.message.user_registration"
                                    />
                                </Text>
                            )}
                        </Stack>
                    </Checkbox>
                </Stack>
            </Box>

            {/* OTP modal lives with registration now */}
            <OtpAuth
                isOpen={isOtpOpen}
                onClose={handleOtpClose}
                isGuestRegistration
                form={{
                    getValues: (name) =>
                        name === 'email' ? basket?.customerInfo?.email : undefined,
                    setValue: () => {}
                }}
                handleSendEmailOtp={async (email) => {
                    return authorizePasswordlessLogin.mutateAsync({
                        userid: email,
                        callbackURI: `${callbackURL}?mode=otp_email`,
                        register_customer: true,
                        last_name: email,
                        email
                    })
                }}
                handleOtpVerification={handleOtpVerification}
            />
        </>
    )
}

UserRegistration.propTypes = {
    /** Whether user registration is enabled */
    enableUserRegistration: PropTypes.bool,
    /** Callback to set user registration state */
    setEnableUserRegistration: PropTypes.func,
    /** Whether the "Checkout as Guest" button was clicked */
    isGuestCheckout: PropTypes.bool,
    /** Disable the registration checkbox (e.g., until payment info is filled) */
    isDisabled: PropTypes.bool,
    /** Callback to set save-for-future preference */
    onSavePreferenceChange: PropTypes.func,
    onRegistered: PropTypes.func,
    /** When true, forces the success notice to show (e.g., after component would normally unmount) */
    showNotice: PropTypes.bool
}