Update component UserAddress and change prop name

vtex-apps · Mar 24, 2022 · c3f9d9d · c3f9d9d
1 parent af84e4f
commit c3f9d9d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- New prop to `UserAddress` showIfMasked to remove entire string if asterics are present
+
 ## [3.158.0] - 2022-03-23
 
 ### Added

diff --git a/react/UserAddress.tsx b/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>
     )

diff --git a/react/components/UserAddress/AddressInfo.tsx b/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