@W-21451244 Mobile launch location support and header icon fixes (#3724)

* feat: add support for mobile and fix the header icons

Author: sf-tejas-nadkarni

packages/template-retail-react-app/app/components/header/index.jsx

@@ -174,7 +174,11 @@ const Header = ({
         <Box as="header" role="banner" {...styles.container} {...props}>
             <Box {...styles.content}>
                 {showLoading && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
-                <Flex wrap="wrap" alignItems={['baseline', 'baseline', 'baseline', 'center']}>
+                <Flex
+                    wrap="wrap"
+                    alignItems={['baseline', 'baseline', 'baseline', 'center']}
+                    gap={3}
+                >
                     <IconButton
                         aria-label={intl.formatMessage({
                             id: 'header.button.assistive_msg.menu',
@@ -213,6 +217,7 @@ const Header = ({
                             })}
                             variant="unstyled"
                             {...styles.icons}
+                            {...styles.agentIcon}
                             onClick={onAgentClick}
                         />
                     )}

packages/template-retail-react-app/app/components/search/index.jsx

@@ -42,6 +42,7 @@ import {
 } from '@salesforce/retail-react-app/app/utils/url'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import {getCommerceAgentConfig} from '@salesforce/retail-react-app/app/utils/config-utils'
+import {launchChat as launchChatFromUtils} from '@salesforce/retail-react-app/app/utils/shopper-agent-utils'
 import {useUsid} from '@salesforce/commerce-sdk-react'
 import {useLocation} from 'react-router-dom'
 import useRefreshToken from '@salesforce/retail-react-app/app/hooks/use-refresh-token'
@@ -351,9 +352,11 @@ const Search = (props) => {
     }
 
     const onAskAssistantClick = useCallback(() => {
-        launchChat()
+        // When floating button is hidden (enableAgentFromFloatingButton false), show it first then launch
+        setPrechatFieldsForNewSession()
+        launchChatFromUtils()
         clearInput()
-    }, [launchChat, clearInput])
+    }, [setPrechatFieldsForNewSession, clearInput])
 
     const shouldOpenPopover = () => {
         // As per design we only want to show the popover if the input is focused and we have recent searches saved

packages/template-retail-react-app/app/components/search/partials/ask-assistant-banner.jsx

@@ -4,14 +4,15 @@
  * 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 React, {useRef} from 'react'
 import PropTypes from 'prop-types'
 import {Box, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useIntl} from 'react-intl'
 import {SparkleIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
 
 const AskAssistantBanner = ({onClick, styles}) => {
     const intl = useIntl()
+    const handledByTouchRef = useRef(false)
     const title = intl.formatMessage({
         id: 'search.suggestions.askAssistant.title',
         defaultMessage: 'Ask Shopping Agent'
@@ -27,13 +28,36 @@ const AskAssistantBanner = ({onClick, styles}) => {
         onClick?.()
     }
 
+    const handleTouchStart = (e) => {
+        // Prevent the search input from blurring when the user touches the banner.
+        // Otherwise onBlur closes the overlay before touchEnd/click fires, so the tap never runs.
+        e.preventDefault()
+    }
+
+    const handleTouchEnd = () => {
+        handledByTouchRef.current = true
+        onClick?.()
+        setTimeout(() => {
+            handledByTouchRef.current = false
+        }, 400)
+    }
+
+    const handleClick = (e) => {
+        if (handledByTouchRef.current) {
+            return
+        }
+        handleInteraction(e)
+    }
+
     return (
         <Box
             {...styles.askAssistantBanner}
             as="button"
             type="button"
             textAlign="left"
-            onClick={handleInteraction}
+            onClick={handleClick}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
             aria-label={ariaLabel}
         >
             <Box {...styles.askAssistantBannerIcon}>

packages/template-retail-react-app/app/theme/components/project/header.js

@@ -24,7 +24,6 @@ export default {
         searchContainer: {
             order: [2, 2, 2, 'inherit'],
             width: ['full', 'full', 'full', 60],
-            marginRight: [0, 0, 0, 4],
             marginBottom: [1, 1, 2, 0]
         },
         bodyContainer: {
@@ -35,37 +34,31 @@ export default {
             height: [6, 6, 6, 8]
         },
         icons: {
-            marginBottom: [1, 1, 2, 0]
-        },
-        accountIcon: {
             height: 11,
             minWidth: 'auto',
-            cursor: 'pointer',
-            alignSelf: ['self-start', 'self-start', 'self-start', 'auto'],
+            marginBottom: [1, 1, 2, 0],
             _focus: {
                 boxShadow: 'outline'
             },
             _focusVisible: {
                 outline: 0
             }
         },
+        agentIcon: {
+            alignSelf: ['self-start', 'self-start', 'self-start', 'auto']
+        },
+        accountIcon: {
+            cursor: 'pointer',
+            alignSelf: ['self-start', 'self-start', 'self-start', 'auto']
+        },
         arrowDown: {
-            height: 11,
-            minWidth: 'auto',
             marginRight: 0,
             alignSelf: ['self-start', 'self-start', 'self-start', 'auto'],
             cursor: 'pointer',
-            _focus: {
-                boxShadow: 'outline'
-            },
-            _focusVisible: {
-                outline: 0
-            },
             display: ['none', 'none', 'none', 'block']
         },
         wishlistIcon: {
-            // More breathing room between the account and wishlist icons
-            marginLeft: 2
+            alignSelf: ['self-start', 'self-start', 'self-start', 'auto']
         },
         signout: {
             width: '100%',
@@ -86,5 +79,15 @@ export default {
             marginRight: 2
         }
     },
-    parts: ['container', 'content', 'searchContainer', 'bodyContainer', 'logo', 'icons', 'signout']
+    parts: [
+        'container',
+        'content',
+        'searchContainer',
+        'bodyContainer',
+        'logo',
+        'icons',
+        'agentIcon',
+        'wishlistIcon',
+        'signout'
+    ]
 }