diff --git a/CHANGELOG.md b/CHANGELOG.md index 1df4647f8..93ac77de6 100644 --- 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 index edcd56c70..194494e3e 100644 --- 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 } @@ -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} /> ) diff --git a/react/components/UserAddress/AddressInfo.tsx b/react/components/UserAddress/AddressInfo.tsx index b88b282da..06211ba8f 100644 --- 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