fix: add icon to hidden address in edit mode (#1334)

<!--- Please provide a general summary of your changes in the title
above -->

# Pull Request type

<!-- Please try to limit your pull request to one type; submit multiple
pull requests if needed. -->

Please check the type of change your PR introduces:

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build-related changes
- [ ] Documentation content changes
- [ ] Other (please describe):

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

<!-- Please describe the behavior or changes that are being added by
this PR. -->

-
-
-

## Does this introduce a breaking change?

- [ ] Yes
- [ ] No

<!-- If this does introduce a breaking change, please describe the
impact and migration path for existing applications below. -->

## Other information

<!-- Any other information that is important to this PR, such as
screenshots of how the component looks before and after the change. -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Address visibility now adapts based on edit mode, enhancing user
privacy controls.

- **Bug Fixes**
- Simplified address invalidation logic in AddressDrawer component,
improving performance and reliability.

- **UI Enhancements**
- Updated VisitCard component with improved address rendering and
additional tooltip and group elements.
- Enhanced Icon component with better ref handling for improved
integration and performance.



<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/api/router/location/lib.formatAddressVisibility.ts

@@ -1,6 +1,6 @@
 import { PrismaEnums } from '@weareinreach/db'
 
-export const formatAddressVisiblity = (location: ProvidedAddress) => {
+export const formatAddressVisiblity = (location: ProvidedAddress, isEditMode = false) => {
 	const address: ReformattedAddress = {
 		street1: location.street1,
 		street2: location.street2,
@@ -23,11 +23,13 @@ export const formatAddressVisiblity = (location: ProvidedAddress) => {
 		default: {
 			address.street1 = null
 			address.street2 = null
-			address.city = null
 			address.postCode = null
-			address.govDist = null
 			address.latitude = null
 			address.longitude = null
+			if (!isEditMode) {
+				address.city = null
+				address.govDist = null
+			}
 			return address
 		}
 	}

packages/api/router/location/query.forVisitCardEdits.handler.ts

@@ -32,7 +32,7 @@ const forVisitCardEdits = async ({ input }: TRPCHandlerParams<TForVisitCardEdits
 		if (!result) {
 			return null
 		}
-		const formattedAddress = formatAddressVisiblity(result)
+		const formattedAddress = formatAddressVisiblity(result, true)
 
 		const { attributes, ...rest } = result
 		const transformed = {

packages/ui/components/data-portal/AddressDrawer/index.tsx

@@ -147,8 +147,7 @@ const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ loca
 	// #region Mutation handling
 	const updateLocation = api.location.update.useMutation({
 		onSuccess: () => {
-			apiUtils.location.getAddress.invalidate(locationId ?? '')
-			apiUtils.location.forVisitCard.invalidate()
+			apiUtils.location.invalidate()
 			setIsSaved(true)
 			notifySave()
 			setTimeout(() => handler.close(), 500)

packages/ui/components/sections/VisitCard.tsx

@@ -1,9 +1,10 @@
-import { Card, createStyles, rem, Stack, Text, Title, useMantineTheme } from '@mantine/core'
+import { Card, createStyles, Group, rem, Stack, Text, Title, Tooltip, useMantineTheme } from '@mantine/core'
 import { useElementSize, useMediaQuery } from '@mantine/hooks'
 import { useTranslation } from 'next-i18next'
 import { useEffect } from 'react'
 import invariant from 'tiny-invariant'
 
+import { AddressVisibility } from '@weareinreach/db/enums'
 import { Badge } from '~ui/components/core/Badge'
 import { GoogleMap } from '~ui/components/core/GoogleMap'
 import { Link } from '~ui/components/core/Link'
@@ -12,7 +13,7 @@ import { AddressDrawer } from '~ui/components/data-portal/AddressDrawer'
 import { useCustomVariant, useFormattedAddress, useScreenSize } from '~ui/hooks'
 import { useGoogleMapMarker } from '~ui/hooks/useGoogleMapMarker'
 import { useGoogleMaps } from '~ui/hooks/useGoogleMaps'
-import { validateIcon } from '~ui/icon'
+import { Icon, validateIcon } from '~ui/icon'
 import { trpc as api } from '~ui/lib/trpcClient'
 
 export const VisitCard = ({ edit = false, ...props }: VisitCardProps & { edit?: boolean }) =>
@@ -171,18 +172,27 @@ const VisitCardEdit = ({ locationId }: VisitCardProps) => {
 		return null
 	}
 
+	const addressHiddenIcon = (
+		<Tooltip label='Address is hidden' withinPortal>
+			<Icon icon='carbon:view-off' />
+		</Tooltip>
+	)
+
 	const address = formattedAddress && (
 		<Stack spacing={12} ref={ref}>
 			<Title order={3}>{t('address', { context: data.remote ? 'physical' : undefined })}</Title>
-			<AddressDrawer
-				locationId={locationId}
-				external
-				component={Link}
-				variant={variants.Link.inlineInverted}
-				className={classes.overlay}
-			>
-				<Text className={classes.overlayInner}>{formattedAddress}</Text>
-			</AddressDrawer>
+			<Group>
+				{data.addressVisibility === AddressVisibility.HIDDEN && addressHiddenIcon}
+				<AddressDrawer
+					locationId={locationId}
+					external
+					component={Link}
+					variant={variants.Link.inlineInverted}
+					className={classes.overlay}
+				>
+					<Text className={classes.overlayInner}>{formattedAddress}</Text>
+				</AddressDrawer>
+			</Group>
 			<GoogleMap locationIds={data.id} height={Math.floor(width * 0.625)} width={width} />
 		</Stack>
 	)

packages/ui/icon/index.tsx

@@ -1,6 +1,6 @@
 import { Icon as Iconify, type IconifyIconHTMLElement, type IconifyIconProps } from '@iconify-icon/react'
 import { createStyles } from '@mantine/core'
-import { memo, type Ref, type SVGProps } from 'react'
+import { forwardRef, memo, type Ref, type SVGProps } from 'react'
 import { type LiteralUnion } from 'type-fest'
 
 import { iconList } from './iconList'
@@ -22,18 +22,20 @@ const useStyles = createStyles((_theme, { block, color }: IconStylesParams) => (
 	},
 }))
 
-export const Icon = memo(({ icon, block, className, ref, color, ...props }: CustomIconProps) => {
-	const { classes, cx } = useStyles({ block, color })
-	Iconify.displayName = 'Iconify'
-	return (
-		<Iconify
-			ref={ref}
-			icon={validateIcon(icon)}
-			className={`${cx(classes.root, className)} iconify-icon-root`}
-			{...props}
-		/>
-	)
-})
+export const Icon = memo(
+	forwardRef<IconifyIconHTMLElement, CustomIconProps>(({ icon, block, className, color, ...props }, ref) => {
+		const { classes, cx } = useStyles({ block, color })
+		Iconify.displayName = 'Iconify'
+		return (
+			<Iconify
+				ref={ref}
+				icon={validateIcon(icon)}
+				className={`${cx(classes.root, className)} iconify-icon-root`}
+				{...props}
+			/>
+		)
+	})
+)
 
 Icon.displayName = '@weareinreach/ui/icon'
 export type IconList = (typeof iconList)[number]