@W-18958060: Fit and Finish (#2981)

harshini-magesh · dannyphan2000 · commit 167c03fb6250 · 2025-08-12T16:16:43.000-04:00
Modified dropdown to follow Figma design

Signed-off-by: harshini-magesh &lt;harshini.magesh@salesforce.com&gt;
diff --git a/packages/template-retail-react-app/app/components/address-suggestion-dropdown/index.jsx b/packages/template-retail-react-app/app/components/address-suggestion-dropdown/index.jsx
@@ -6,14 +6,18 @@
  */
 import React, {useEffect, useRef} from 'react'
 import PropTypes from 'prop-types'
+import {FormattedMessage} from 'react-intl'
+import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 import {
     Box,
     Flex,
     Text,
     IconButton,
-    Spinner
+    Spinner,
+    Stack,
+    Spacer
 } from '@salesforce/retail-react-app/app/components/shared/ui'
-import {CloseIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {CloseIcon, LocationIcon} from '@salesforce/retail-react-app/app/components/icons'
 
 /**
  * Address Suggestion Dropdown Component
@@ -88,82 +92,68 @@ const AddressSuggestionDropdown = ({
             borderRadius="md"
             boxShadow="md"
             mt={1}
-            maxH="300px"
-            overflowY="auto"
         >
-            <Flex
-                px={4}
-                py={2}
-                borderBottom="1px solid"
-                borderColor="gray.200"
-                justifyContent="space-between"
-                alignItems="center"
-            >
+            <Flex px={4} pr={0} py={2} alignItems="center">
                 <Text fontSize="sm" fontWeight="medium" color="gray.600">
-                    Suggested
+                    <FormattedMessage 
+                        defaultMessage="SUGGESTED"
+                        id="addressSuggestionDropdown.suggested" 
+                    />
                 </Text>
+                <Spacer />
                 <IconButton
-                    aria-label="Close suggestions"
-                    icon={<CloseIcon />}
-                    variant="ghost"
                     size="sm"
+                    variant="ghost"
+                    icon={<CloseIcon boxSize={4} color="gray.600" />}
                     onClick={onClose}
+                    aria-label="Close suggestions"
                 />
             </Flex>
-            {suggestions.map((suggestion, index) => (
-                <Box
-                    key={index}
-                    px={4}
-                    py={2}
-                    cursor="pointer"
-                    _hover={{bg: 'gray.50'}}
-                    onClick={() => onSelectSuggestion(suggestion)}
-                    role="button"
-                    tabIndex={0}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                            onSelectSuggestion(suggestion)
-                        }
-                    }}
-                >
-                    <Flex alignItems="center" gap={2}>
-                        {/* Location Marker */}
-                        <Box position="relative" w={4} h={4}>
-                            <Box
-                                position="absolute"
-                                top={0}
-                                left={0}
-                                w={4}
-                                h={4}
-                                bg="blue.500"
-                                borderRadius="full"
-                                opacity={0.2}
-                            />
-                            <Box
-                                position="absolute"
-                                top={1}
-                                left={1}
-                                w={2}
-                                h={2}
-                                bg="blue.500"
-                                borderRadius="full"
-                            />
-                        </Box>
+            <Stack spacing={0}>
+                {suggestions.map((suggestion, index) => (
+                    <Box
+                        key={index}
+                        px={4}
+                        py={3}
+                        cursor="pointer"
+                        _hover={{bg: 'gray.50'}}
+                        onClick={() => onSelectSuggestion(suggestion)}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                onSelectSuggestion(suggestion)
+                            }
+                        }}
+                    >
+                        <Flex alignItems="center" gap={2}>
+                            {/* Location Icon */}
+                            <LocationIcon boxSize={4} color="black" />
 
-                        {/* Address Text */}
-                        <Box flex={1}>
-                            <Text fontSize="sm" noOfLines={1}>
-                                {suggestion.structured_formatting?.main_text}
-                            </Text>
-                            {suggestion.structured_formatting?.secondary_text && (
-                                <Text fontSize="xs" color="gray.500" noOfLines={1}>
-                                    {suggestion.structured_formatting.secondary_text}
+                            {/* Address Text */}
+                            <Box flex={1}>
+                                <Text fontSize="sm" noOfLines={1}>
+                                    {suggestion.description || `${suggestion.structured_formatting?.main_text}, ${suggestion.structured_formatting?.secondary_text}`}
                                 </Text>
-                            )}
-                        </Box>
-                    </Flex>
-                </Box>
-            ))}
+                            </Box>
+                        </Flex>
+                    </Box>
+                ))}
+            </Stack>
+            
+            {/* Google Maps Attribution */}
+            <Box
+                px={4}
+                py={3}
+                display="flex"
+                alignItems="center"
+            >
+                <img 
+                    src={getAssetUrl('static/img/GoogleMaps_Logo_Gray_4x.png')}
+                    alt="Google Maps"
+                    style={{ width: '98px', height: '18px' }}
+                />
+            </Box>
         </Box>
     )
 }
diff --git a/packages/template-retail-react-app/app/static/img/GoogleMaps_Logo_Gray_4x.png b/packages/template-retail-react-app/app/static/img/GoogleMaps_Logo_Gray_4x.png
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
@@ -355,6 +355,12 @@
       "value": "You Might Also Like"
     }
   ],
+  "addressSuggestionDropdown.suggested": [
+    {
+      "type": 0,
+      "value": "SUGGESTED"
+    }
+  ],
   "auth_modal.button.close.assistive_msg": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
@@ -355,6 +355,12 @@
       "value": "You Might Also Like"
     }
   ],
+  "addressSuggestionDropdown.suggested": [
+    {
+      "type": 0,
+      "value": "SUGGESTED"
+    }
+  ],
   "auth_modal.button.close.assistive_msg": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
@@ -739,6 +739,20 @@
       "value": "]"
     }
   ],
+  "addressSuggestionDropdown.suggested": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "ŞŬƓƓḖŞŦḖḒ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "auth_modal.button.close.assistive_msg": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/translations/en-GB.json b/packages/template-retail-react-app/translations/en-GB.json
@@ -144,6 +144,9 @@
   "add_to_cart_modal.recommended_products.title.might_also_like": {
     "defaultMessage": "You Might Also Like"
   },
+  "addressSuggestionDropdown.suggested": {
+    "defaultMessage": "SUGGESTED"
+  },
   "auth_modal.button.close.assistive_msg": {
     "defaultMessage": "Close login form"
   },
diff --git a/packages/template-retail-react-app/translations/en-US.json b/packages/template-retail-react-app/translations/en-US.json
@@ -144,6 +144,9 @@
   "add_to_cart_modal.recommended_products.title.might_also_like": {
     "defaultMessage": "You Might Also Like"
   },
+  "addressSuggestionDropdown.suggested": {
+    "defaultMessage": "SUGGESTED"
+  },
   "auth_modal.button.close.assistive_msg": {
     "defaultMessage": "Close login form"
   },

Original file line number	Diff line number	Diff line change
`@@ -355,6 +355,12 @@`
`355`	`355`	`"value": "You Might Also Like"`
`356`	`356`	`}`
`357`	`357`	`],`
	`358`	`+ "addressSuggestionDropdown.suggested": [`
	`359`	`+ {`
	`360`	`+ "type": 0,`
	`361`	`+ "value": "SUGGESTED"`
	`362`	`+ }`
	`363`	`+ ],`
`358`	`364`	`"auth_modal.button.close.assistive_msg": [`
`359`	`365`	`{`
`360`	`366`	`"type": 0,`