@vtex/faststore-plugin-buyer-portal 1.3.42 → 1.3.43

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.43] - 2025-12-16
+
+### Fixed
+- Update maskPhoneNumber to include country DDI
+- Send only phone digits to API in Users and Recipients pages
+- Show masked phone in layout and forms in Users and Recipients pages
+
 ## [1.3.42] - 2025-12-11
 
 ### Fixed
@@ -377,7 +384,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.42...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.43...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -427,4 +434,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.36]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.35...v1.3.36
 [1.3.35]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.35
 
+[1.3.43]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.42...v1.3.43
 [1.3.42]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.42",
+  "version": "1.3.43",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/addresses/components/AddressRecipientsList/AddressRecipientsList.tsx

@@ -19,6 +19,7 @@ import {
   usePageItems,
 } from "../../../shared/hooks/usePageItems";
 import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import { type CountryCodes } from "../../data/countries";
 import { useSearchAddressRecipients } from "../../hooks/useSearchAddressRecipients";
 import { RecipientData } from "../../types";
 import { DeleteRecipientAddressDrawer } from "../DeleteRecipientAddressDrawer/DeleteRecipientAddressDrawer";
@@ -33,7 +34,7 @@ export type AddressRecipientsListProps = {
   total: number;
   search: string;
   page: number;
-  countryCode?: string;
+  countryCode?: CountryCodes;
 };
 
 export const AddressRecipientsList = forwardRef<
@@ -46,7 +47,7 @@ export const AddressRecipientsList = forwardRef<
       search,
       total,
       page = 1,
-      countryCode = "",
+      countryCode,
     }: AddressRecipientsListProps,
     ref
   ) => {

package/src/features/addresses/components/RecipientsForm/RecipientItem/RecipientItem.tsx

@@ -1,5 +1,8 @@
 import { Icon, InputText } from "../../../../shared/components";
-import { maskPhoneNumber } from "../../../../shared/utils/phoneNumber";
+import {
+  maskPhoneNumber,
+  normalizePhoneNumber,
+} from "../../../../shared/utils/phoneNumber";
 
 import type { RecipientInput } from "../../../types";
 
@@ -48,7 +51,7 @@ export const RecipientItem = ({
     <InputText
       label="Phone Number"
       className="recipients-phone"
-      value={recipient.recipientPhone}
+      value={maskPhoneNumber(recipient.recipientPhone, "USA")}
       wrapperProps={{
         style: {
           borderTopLeftRadius: 0,
@@ -59,7 +62,7 @@ export const RecipientItem = ({
         onChange(
           index,
           "recipientPhone",
-          maskPhoneNumber(event.target.value, "USA")
+          normalizePhoneNumber(event.target.value)
         )
       }
     />

package/src/features/addresses/data/countries.ts

@@ -1,5 +1,5 @@
 export type CountryOption = {
-  id: string;
+  id: CountryCodes;
   name: string;
 };
 
@@ -9,3 +9,5 @@ export const CountryOptions: CountryOption[] = [
   { id: "CAN", name: "Canada" },
   { id: "MEX", name: "Mexico" },
 ];
+
+export type CountryCodes = "USA" | "MEX" | "BRA" | "CAN";

package/src/features/addresses/services/recipients/get-address-recipients.service.ts

@@ -1,3 +1,4 @@
+import { normalizePhoneNumber } from "../../../shared/utils/phoneNumber";
 import { recipientsClient } from "../../clients/RecipientsClient";
 
 import type { RecipientsResponse } from "../../types/AddressData";
@@ -34,7 +35,13 @@ export const getAddressRecipientsService = async ({
         page
       );
 
-    return recipients;
+    return {
+      ...recipients,
+      data: recipients.data.map((recipient) => ({
+        ...recipient,
+        phone: normalizePhoneNumber(recipient.phone),
+      })),
+    };
   } catch (err) {
     console.error("Failed to get address recipients", err);
     return { data: [], total: 0 };

package/src/features/shared/utils/constants.ts

@@ -22,4 +22,4 @@ export const SCOPE_KEYS = {
   CREDIT_CARDS: "creditCards",
 } as const;
 
-export const CURRENT_VERSION = "1.3.42";
+export const CURRENT_VERSION = "1.3.43";

package/src/features/shared/utils/phoneNumber.ts

@@ -1,18 +1,34 @@
+import { type CountryCodes } from "../../addresses/data/countries";
+
 import mask from "./mask";
 
-export function maskPhoneNumber(phoneNumber: string, country?: string) {
-  if (!phoneNumber) return phoneNumber;
+type MaskType = {
+  mask: string;
+  length: number;
+  ddi: string;
+};
+
+const MASK_MAP: Record<CountryCodes, MaskType> = {
+  USA: { mask: "(999) 999-9999", length: 14, ddi: "1" },
+  MEX: { mask: "(999) 999-9999", length: 14, ddi: "52" },
+  BRA: { mask: "(99) 99999-9999", length: 15, ddi: "55" },
+  CAN: { mask: "(999) 999-9999", length: 14, ddi: "1" },
+};
+
+export function maskPhoneNumber(phoneNumber: string, country?: CountryCodes) {
+  if (!phoneNumber || !country || !MASK_MAP[country]) return phoneNumber;
+
+  const { mask: phoneMask, length, ddi } = MASK_MAP[country];
 
-  switch (country) {
-    case "USA":
-      return mask(phoneNumber, "(999) 999-9999").substring(0, 14);
-    case "MEX":
-      return mask(phoneNumber, "(999) 999-9999").substring(0, 14);
-    case "BRA":
-      return mask(phoneNumber, "(99) 99999-9999").substring(0, 15);
-    case "CAN":
-      return mask(phoneNumber, "(999) 999-9999").substring(0, 14);
-    default:
-      return phoneNumber;
-  }
+  const normalizedPhone = normalizePhoneNumber(phoneNumber);
+  const phoneWithoutDdi = normalizedPhone.startsWith(ddi)
+    ? normalizedPhone.slice(ddi.length)
+    : normalizedPhone;
+
+  return `+${ddi} ${mask(phoneWithoutDdi, phoneMask).substring(0, length)}`;
+}
+
+export function normalizePhoneNumber(phoneNumber: string) {
+  if (!phoneNumber) return phoneNumber;
+  return phoneNumber.replace(/\D/g, "");
 }

package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx

@@ -15,7 +15,10 @@ import {
 import { useAnalytics } from "../../../shared/hooks";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import {
+  maskPhoneNumber,
+  normalizePhoneNumber,
+} from "../../../shared/utils/phoneNumber";
 import { useAddUserToOrgUnit } from "../../hooks";
 
 export type CreateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -256,12 +259,12 @@ export const CreateUserDrawer = ({
 
                 <InputText
                   label="Phone number (optional)"
-                  value={phone}
+                  value={maskPhoneNumber(phone, "USA")}
                   onChange={(event) =>
                     // TODO: Update this when implementing i18n
                     updateField(
                       "phone",
-                      maskPhoneNumber(event.target.value, "USA")
+                      normalizePhoneNumber(event.target.value)
                     )
                   }
                 />

package/src/features/users/components/UpdateUserDrawer/UpdateUserDrawer.tsx

@@ -12,7 +12,10 @@ import {
 } from "../../../shared/components";
 import { useAnalytics } from "../../../shared/hooks";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
-import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import {
+  maskPhoneNumber,
+  normalizePhoneNumber,
+} from "../../../shared/utils/phoneNumber";
 import { useGetUserById, useUpdateUser } from "../../hooks";
 
 export type UpdateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -174,7 +177,7 @@ export const UpdateUserDrawer = ({
     updateUser({
       userId,
       name,
-      phone,
+      phone: phone ?? "",
       roles,
       orgUnitId,
     });
@@ -245,10 +248,10 @@ export const UpdateUserDrawer = ({
         ) : (
           <InputText
             label="Phone number (optional)"
-            value={phone}
+            value={maskPhoneNumber(phone, "USA")}
             onChange={(event) =>
               // TODO: Update this when implementing i18n
-              updateField("phone", maskPhoneNumber(event.target.value, "USA"))
+              updateField("phone", normalizePhoneNumber(event.target.value))
             }
           />
         )}

package/src/features/users/layouts/UserDetailsLayout/UserDetailsLayout.tsx

@@ -9,6 +9,7 @@ import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { ReassignOrgUnitDrawer, UpdateUserDrawer } from "../../components";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
 
@@ -82,7 +83,9 @@ export const UserDetailsLayout = ({
 
             <div data-fs-user-details-row>
               <span data-fs-user-details-row-label>Phone number</span>
-              <span data-fs-user-details-row-value>{user?.phone}</span>
+              <span data-fs-user-details-row-value>
+                {maskPhoneNumber(user?.phone ?? "", "USA")}
+              </span>
             </div>
 
             <hr data-fs-user-details-divider />

package/src/features/users/services/get-user-by-id.service.ts

@@ -1,3 +1,4 @@
+import { normalizePhoneNumber } from "../../shared/utils/phoneNumber";
 import { usersClient } from "../clients/UsersClient";
 
 import type { UserData } from "../types";
@@ -23,7 +24,7 @@ export const getUserByIdService = async ({
       roles: role ? role : [],
       id: userId,
       email: email ?? "",
-      phone: phone ?? "",
+      phone: normalizePhoneNumber(phone ?? ""),
       orgUnit: {
         name: orgUnit,
       },