Merge pull request #1022 from vtex-apps/bugfix/LOCATION-8_shopper-loc…

…ation-asterics

Update component to hide hide asterics

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 - Always trigger the `SET_LOADING_ITEM` action from Product Context when users change the current selected SKU.
 
+### Added
+- New prop to `UserAddress` showIfMasked to remove entire string if asterics are present
+
 ## [3.158.0] - 2022-03-23
 
 ### Added

react/UserAddress.tsx

@@ -28,6 +28,8 @@ type Props = {
   showPrefix?: boolean
   /** Define if component should render if address is empty */
   showIfEmpty?: boolean
+  /** Define if component should render if ZipCode contains asterics */
+  showIfMasked?: boolean
   /** Used to override default CSS handles */
   classes?: CssHandlesTypes.CustomClasses<typeof USER_ADDRESS_CSS_HANDLES>
 }
@@ -39,6 +41,7 @@ function UserAddress({
   showPostalCode = false,
   showPrefix = true,
   showIfEmpty = false,
+  showIfMasked = false,
   classes,
 }: Props) {
   const { handles, withModifiers } = useCssHandles(USER_ADDRESS_CSS_HANDLES, {
@@ -84,6 +87,7 @@ function UserAddress({
           showPostalCode={showPostalCode}
           showPrefix={showPrefix}
           showIfEmpty={showIfEmpty}
+          showIfMasked={showIfMasked}
         />
       </UserAddressCssHandlesProvider>
     )

react/components/UserAddress/AddressInfo.tsx

@@ -13,6 +13,7 @@ type Props = {
   showStreet: boolean
   showCityAndState: boolean
   showPostalCode: boolean
+  showIfMasked: boolean
   showPrefix: boolean
   showIfEmpty: boolean
 }
@@ -33,6 +34,7 @@ const AddressInfo = ({
   showStreet,
   showCityAndState,
   showPostalCode,
+  showIfMasked,
   showPrefix,
   showIfEmpty,
 }: Props) => {
@@ -41,7 +43,11 @@ const AddressInfo = ({
   const { handles } = useUserAddressCssHandles()
   const intl = useIntl()
 
-  if (!shippingData || !shippingData.address) {
+  if (
+    !shippingData ||
+    !shippingData.address ||
+    (!showIfMasked && shippingData.address.postalCode.includes('*'))
+  ) {
     if (!showIfEmpty) {
       return null
     }
@@ -84,15 +90,8 @@ const AddressInfo = ({
     )
   }
 
-  const {
-    street,
-    number,
-    complement,
-    addressType,
-    city,
-    state,
-    postalCode,
-  } = shippingData.address
+  const { street, number, complement, addressType, city, state, postalCode } =
+    shippingData.address
 
   let displayStreet = number ? `${street}, ${number}` : street
 
@@ -103,10 +102,10 @@ const AddressInfo = ({
   const displayAddress = `${showStreet ? displayStreet || '' : ''}${
     showStreet && (showCityAndState || showPostalCode) ? ', ' : ''
   }${showCityAndState ? displayCityAndState : ''}${
-    showCityAndState && showPostalCode
+    showCityAndState && showPostalCode && !postalCode.includes('*')
       ? `${displayCityAndState ? ', ' : ''}`
       : ''
-  }${showPostalCode ? postalCode : ''}`
+  }${showPostalCode && !postalCode.includes('*') ? postalCode : ''}`
 
   const isPickup = addressType === 'pickup'
   const friendlyName = orderForm?.pickupPointCheckedIn?.friendlyName ?? ''