guest flow changes

Author: syadupathi-sf

packages/commerce-sdk-react/src/auth/index.ts

@@ -1268,38 +1268,54 @@ class Auth {
      * A wrapper method for commerce-sdk-isomorphic helper: authorizePasswordless.
      */
     async authorizePasswordless(parameters: AuthorizePasswordlessParams) {
+        
+        const slasClient = this.client
         const usid = this.get('usid')
         const callbackURI = parameters.callbackURI || this.passwordlessLoginCallbackURI
         const finalMode = parameters.mode || (callbackURI ? 'callback' : 'sms')
 
-        const res = await (helpers as unknown as Helpers).authorizePasswordless({
-            slasClient: this.client,
-            credentials: {
-                clientSecret: this.clientSecret
+        const options = {
+            headers: {
+                Authorization: ''
             },
             parameters: {
-                ...(callbackURI && {callbackURI}),
-                ...(usid && {usid}),
-                userid: parameters.userid,
-                mode: finalMode,
                 ...(parameters.register_customer !== undefined && {
-                    // Helper expects camelCase 'registerCustomer'
-                    registerCustomer:
+                    register_customer:
                         typeof parameters.register_customer === 'boolean'
-                            ? Boolean(parameters.register_customer)
+                            ? String(parameters.register_customer)
                             : parameters.register_customer
-                }),
-                // Helper expects camelCase registration fields in parameters; it maps to body internally
-                ...(parameters.last_name && {lastName: parameters.last_name}),
+                })
+            },
+            body: {
+                user_id: parameters.userid,
+                mode: finalMode,
+                // Include usid and site as required by SLAS
+                ...(usid && {usid}),
+                channel_id: slasClient.clientConfig.parameters.siteId,
+                ...(callbackURI && {callback_uri: callbackURI}),
+                ...(parameters.last_name && {last_name: parameters.last_name}),
                 ...(parameters.email && {email: parameters.email}),
-                ...(parameters.first_name && {firstName: parameters.first_name}),
-                ...(parameters.phone_number && {phoneNumber: parameters.phone_number})
+                ...(parameters.first_name && {first_name: parameters.first_name}),
+                ...(parameters.phone_number && {phone_number: parameters.phone_number})
             }
-        } as any)
-        if (res && res.status && res.status !== 200) {
-            const errorData = await res.json()
-            throw new Error(`${res.status} ${String(errorData.message)}`)
+        } as {
+            headers?: {[key: string]: string}
+            parameters?: Record<string, string>
+            body: ShopperLoginTypes.authorizePasswordlessCustomerBodyType & helpers.CustomRequestBody
         }
+
+        // Use Basic auth header when using private client
+        if (this.clientSecret) {
+            options.headers = options.headers || {}
+            options.headers.Authorization = `Basic ${stringToBase64(
+                `${slasClient.clientConfig.parameters.clientId}:${this.clientSecret}`
+            )}`
+        } else {
+            // If not using private client, avoid sending Authorization header
+            delete options.headers
+        }
+
+        const res = await slasClient.authorizePasswordlessCustomer(options)
         return res
     }
 

packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx

@@ -91,6 +91,7 @@ const Payment = ({
     const loginPasswordless = useAuthHelper(AuthHelpers.LoginPasswordlessUser)
     const {isOpen: isOtpOpen, onOpen: onOtpOpen, onClose: onOtpClose} = useDisclosure()
     const otpDismissedRef = useRef(false)
+    const activeBasketIdRef = useRef(null)
     const passwordlessConfigCallback = getConfig().app.login?.passwordless?.callbackURI
     const callbackURL = isAbsoluteURL(passwordlessConfigCallback)
         ? passwordlessConfigCallback
@@ -185,15 +186,35 @@ const Payment = ({
             // Allow auth storage to settle before SCAPI calls
             await auth.refreshAccessToken()
 
-            await recoverBasketAfterAuth({
+            // Immediately mark OTP completed and close modal to prevent a brief re-open on remounts
+            otpDismissedRef.current = true
+            setEnableUserRegistration?.(false)
+            onOtpClose()
+
+            const newBasketId = await recoverBasketAfterAuth({
                 preLoginItems: basket?.productItems || [],
-                shipmentSnapshot: basket?.shipments?.[0] || null,
+                shipment: basket?.shipments?.[0] || null,
                 doMerge: true
             })
-            otpDismissedRef.current = true
+            if (newBasketId) {
+                activeBasketIdRef.current = newBasketId
+            }
             // Ensure save-for-future is selected after successful registration
             setShouldSavePaymentMethod(true)
 
+            // If user typed a new card and nothing is applied yet, apply it to the new basket id
+            try {
+                const values = paymentMethodForm?.getValues?.()
+                const hasEnteredCard = values?.number && values?.holder && values?.expiry
+                const hasApplied = (currentBasketQuery?.data?.paymentInstruments?.length || 0) > 0
+                if (hasEnteredCard && !hasApplied && newBasketId) {
+                    await onPaymentSubmit(values, newBasketId)
+                    await currentBasketQuery.refetch()
+                }
+            } catch (_e) {
+                // best-effort; user can still place order manually
+            }
+
             showToast({
                 variant: 'subtle',
                 title: `${formatMessage(
@@ -214,7 +235,7 @@ const Payment = ({
                 isClosable: true
             })
 
-            onOtpClose()
+            // modal already closed right after auth
         } catch (error) {
             let message = formatMessage(API_ERROR_MESSAGE)
             if (error.response) {
@@ -235,8 +256,9 @@ const Payment = ({
     const handleSendEmailOtp = async (email) => {
         try {
             await authorizePasswordlessLogin.mutateAsync({
+                // Pass fields at top-level. The helper maps to query/body correctly.
                 userid: email,
-                callbackURI: `${callbackURL}?mode=otp_email`,
+                callbackURI: callbackURL,
                 register_customer: true,
                 last_name: email,
                 email: email
@@ -300,7 +322,7 @@ const Payment = ({
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {removePromoCode, ...promoCodeProps} = usePromoCode()
 
-    const onPaymentSubmit = async (formValue) => {
+    const onPaymentSubmit = async (formValue, forcedBasketId) => {
         // 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('/')
@@ -322,7 +344,7 @@ const Payment = ({
         }
 
         return addPaymentInstrumentToBasket({
-            parameters: {basketId: basket?.basketId},
+            parameters: {basketId: forcedBasketId || activeBasketIdRef.current || basket?.basketId},
             body: paymentInstrument
         })
     }
@@ -338,15 +360,18 @@ const Payment = ({
             const isRegistered = customer?.isRegistered
             const hasSaved = customer?.paymentInstruments?.length > 0
             const alreadyApplied = (basket?.paymentInstruments?.length || 0) > 0
-            if (!isRegistered || !hasSaved || alreadyApplied) return
+            // If the shopper is currently typing a new card, skip auto-apply of saved
+            const entered = paymentMethodForm?.getValues?.()
+            const hasEnteredCard = entered?.number && entered?.holder && entered?.expiry
+            if (!isRegistered || !hasSaved || alreadyApplied || hasEnteredCard) return
             autoAppliedRef.current = true
             const preferred =
                 customer.paymentInstruments.find((pi) => pi.default === true) ||
                 customer.paymentInstruments[0]
             try {
                 setIsApplyingSavedPayment(true)
                 await addPaymentInstrumentToBasket({
-                    parameters: {basketId: basket?.basketId},
+                    parameters: {basketId: activeBasketIdRef.current || basket?.basketId},
                     body: {
                         paymentMethodId: 'CREDIT_CARD',
                         customerPaymentInstrumentId: preferred.paymentInstrumentId
@@ -394,7 +419,7 @@ const Payment = ({
         } else {
             setIsApplyingSavedPayment(true)
             await addPaymentInstrumentToBasket({
-                parameters: {basketId: basket?.basketId},
+                parameters: {basketId: activeBasketIdRef.current || basket?.basketId},
                 body: {
                     paymentMethodId: 'CREDIT_CARD',
                     customerPaymentInstrumentId: paymentInstrumentId
@@ -423,15 +448,15 @@ const Payment = ({
         const {addressId, creationDate, lastModified, preferred, ...address} = billingAddress
         return await updateBillingAddressForBasket({
             body: address,
-            parameters: {basketId: basket.basketId}
+            parameters: {basketId: activeBasketIdRef.current || basket.basketId}
         })
     }
 
     const onPaymentRemoval = async () => {
         try {
             await removePaymentInstrumentFromBasket({
                 parameters: {
-                    basketId: basket.basketId,
+                    basketId: activeBasketIdRef.current || basket.basketId,
                     paymentInstrumentId: appliedPayment.paymentInstrumentId
                 }
             })
@@ -445,7 +470,7 @@ const Payment = ({
     const onSubmit = paymentMethodForm.handleSubmit(async (paymentFormValues) => {
         try {
             if (!appliedPayment) {
-                await onPaymentSubmit(paymentFormValues)
+                await onPaymentSubmit(paymentFormValues, activeBasketIdRef.current)
             }
 
             // Update billing address