@vtex/faststore-plugin-buyer-portal 1.3.24 → 1.3.26

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.26] - 2025-11-25
+
+### Added
+
+- Pre-populate default addresses in Address Settings drawer
+
+## [1.3.25] - 2025-11-25
+
+### Added
+
+- Add default `size` prop to `BasicDrawer` component
+  - Set default size to `"partial"` - min-width with 30rem (480px)
+  - Added CSS rules to apply max-width of 960px for large-sized drawers
+  - Updated existing drawer components to explicitly specify `size="large"`
+  - Improved drawer sizing consistency across the application
+  
 ## [1.3.24] - 2025-11-25
 
 ### Added
@@ -102,7 +118,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.3.9] - 2025-10-21
 
 ### Added
-
 - Add Changelog entry check on actions
 
 ## [1.3.8] - 2025-10-17
@@ -247,7 +262,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/v1.3.24...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.26...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
@@ -262,6 +277,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.26]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.25...v1.3.26
+[1.3.25]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.24...v1.3.25
 [1.3.24]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.23...v1.3.24
 [1.3.23]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.22...v1.3.23
 [1.3.22]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.21...v1.3.22

package/package.json

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

package/src/features/addresses/clients/DefaultValuesClient.ts

@@ -1,7 +1,10 @@
 import { Client } from "../../shared/clients/Client";
 import { getApiUrl } from "../../shared/utils";
 
-import type { DefaultAddressParams } from "../types/AddressData";
+import type {
+  DefaultAddressParams,
+  DefaultAddressResponse,
+} from "../types/AddressData";
 
 export default class DefaultValuesClient extends Client {
   constructor() {
@@ -42,6 +45,33 @@ export default class DefaultValuesClient extends Client {
       }
     );
   }
+
+  getDefaultAddress({
+    customerId,
+    orgUnitId,
+    addressType,
+    cookie,
+  }: {
+    customerId: string;
+    orgUnitId: string;
+    addressType: "shipping" | "billing";
+    cookie: string;
+  }) {
+    const entity =
+      addressType === "shipping" ? "address/shipping" : "address/billing";
+
+    return this.get<DefaultAddressResponse>(
+      `/customers/${customerId}/units/${orgUnitId}/default-values`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+        params: {
+          entity,
+        },
+      }
+    );
+  }
 }
 
 const defaultValuesClient = new DefaultValuesClient();

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

@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import { useUI } from "@faststore/ui";
+import { useUI, Skeleton } from "@faststore/ui";
 
 import {
   type BasicDrawerProps,
@@ -14,6 +14,7 @@ import { OptionSelected } from "../../../shared/components/OptionSelected/Option
 import { SearchHighlight } from "../../../shared/components/SearchHighlight/SearchHighlight";
 import { ADDRESS_MESSAGES } from "../../constants/messages";
 import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
+import { useGetDefaultAddress } from "../../hooks/useGetDefaultAddresses";
 import { useSetDefaultAddress } from "../../hooks/useSetDefaultAddress";
 import AddressDisplay from "../AddressInfoDisplay/AddressInfoDisplay";
 
@@ -33,7 +34,6 @@ export const CreateAddressSettingsDrawer = ({
   ...props
 }: CreateAddressSettingsDrawerProps) => {
   const { pushToast } = useUI();
-
   const router = useRouter();
 
   const [searchValue, setSearchValue] = useState("");
@@ -47,6 +47,36 @@ export const CreateAddressSettingsDrawer = ({
     {} as AddressData
   );
 
+  const {
+    defaultAddress: defaultShippingAddress,
+    isDefaultAddressLoading: isLoadingShipping,
+  } = useGetDefaultAddress({
+    customerId: router.query.contractId as string,
+    orgUnitId: router.query.orgUnitId as string,
+    addressType: "shipping",
+  });
+
+  const {
+    defaultAddress: defaultBillingAddress,
+    isDefaultAddressLoading: isLoadingBilling,
+  } = useGetDefaultAddress({
+    customerId: router.query.contractId as string,
+    orgUnitId: router.query.orgUnitId as string,
+    addressType: "billing",
+  });
+
+  useEffect(() => {
+    if (defaultShippingAddress && !shippingAddress?.id) {
+      setShippingAddress(defaultShippingAddress);
+    }
+  }, [defaultShippingAddress]);
+
+  useEffect(() => {
+    if (defaultBillingAddress && !billingAddress?.id) {
+      setBillingAddress(defaultBillingAddress);
+    }
+  }, [defaultBillingAddress]);
+
   const { searchedAddresses } = useDebouncedSearchAddressByUnitId({
     orgUnitId: router.query.orgUnitId as string,
     search: searchValue,
@@ -118,7 +148,9 @@ export const CreateAddressSettingsDrawer = ({
           Default shipping address (optional)
         </p>
 
-        {shippingAddress?.id ? (
+        {isLoadingShipping ? (
+          <Skeleton size={{ height: "3.5rem", width: "100%" }} />
+        ) : shippingAddress?.id ? (
           <OptionSelected
             label={shippingAddress.name}
             triggerIcon={<Icon name="MinusCircle" />}
@@ -169,7 +201,9 @@ export const CreateAddressSettingsDrawer = ({
           Default billing address (optional)
         </p>
 
-        {billingAddress?.id ? (
+        {isLoadingBilling ? (
+          <Skeleton size={{ height: "3.5rem", width: "100%" }} />
+        ) : billingAddress?.id ? (
           <OptionSelected
             label={billingAddress.name}
             triggerIcon={<Icon name="MinusCircle" />}

package/src/features/addresses/hooks/index.ts

@@ -5,3 +5,6 @@ export * from "./useAddLocationsToAddress";
 export * from "./useAddressLocationList";
 export * from "./useAddressLocationEdit";
 export * from "./useAddressLocationDelete";
+export * from "./useSetDefaultAddress";
+export * from "./useUnsetDefaultAddress";
+export * from "./useGetDefaultAddresses";

package/src/features/addresses/hooks/useGetDefaultAddresses.ts

@@ -0,0 +1,34 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getDefaultAddressService } from "../services";
+
+import type { AddressData } from "../types";
+
+interface GetDefaultAddressParams {
+  customerId: string;
+  orgUnitId: string;
+  addressType: "shipping" | "billing";
+}
+
+export const useGetDefaultAddress = (
+  { customerId, orgUnitId, addressType }: GetDefaultAddressParams,
+  options?: QueryOptions<AddressData | null>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `defaultAddress/${customerId}/${orgUnitId}/${addressType}`,
+    ({ cookie }) =>
+      getDefaultAddressService({
+        customerId,
+        orgUnitId,
+        addressType,
+        cookie,
+      }),
+    options
+  );
+
+  return {
+    defaultAddress: data,
+    hasDefaultAddressError: error,
+    isDefaultAddressLoading: isLoading,
+    refetchDefaultAddress: refetch,
+  };
+};

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

@@ -0,0 +1,58 @@
+import { defaultValuesClient } from "../../clients/DefaultValuesClient";
+
+import type { AddressData, DefaultAddressResponse } from "../../types";
+
+export interface GetDefaultAddressServiceProps {
+  customerId: string;
+  orgUnitId: string;
+  addressType: "shipping" | "billing";
+  cookie: string;
+}
+
+const mapDefaultAddressToAddressData = (
+  response: DefaultAddressResponse
+): AddressData => {
+  return {
+    id: response.userId || "",
+    name: response.addressLabel,
+    types: [response.addressType],
+    isActive: response.isActive,
+    isDefault: true,
+    streetAddress: response.street,
+    streetAddress2: response.complement,
+    streetNumber: response.number,
+    number: response.number,
+    unit: "",
+    neighborhood: response.neighborhood,
+    city: response.city,
+    state: response.state,
+    zip: response.postalCode,
+    country: response.country,
+    geoCoordinates: response.geoCoordinate || "",
+    locations: [],
+  };
+};
+
+export async function getDefaultAddressService({
+  customerId,
+  orgUnitId,
+  addressType,
+  cookie,
+}: GetDefaultAddressServiceProps): Promise<AddressData | null> {
+  try {
+    const data = await defaultValuesClient.getDefaultAddress({
+      customerId,
+      orgUnitId,
+      addressType,
+      cookie,
+    });
+
+    if (!data) {
+      return null;
+    }
+
+    return mapDefaultAddressToAddressData(data);
+  } catch {
+    return null;
+  }
+}

package/src/features/addresses/services/index.ts

@@ -31,3 +31,7 @@ export {
   getAddressRecipientsService,
   type GetAddressRecipientsServiceProps,
 } from "./recipients/get-address-recipients.service";
+export {
+  getDefaultAddressService,
+  type GetDefaultAddressServiceProps,
+} from "./default-values/get-default-address.service";

package/src/features/addresses/types/AddressData.ts

@@ -171,3 +171,17 @@ export type EditDeleteLocationParams = {
   location: LocationData;
   unitId: string;
 };
+
+export type DefaultAddressResponse = Pick<
+  CheckoutAddress,
+  "postalCode" | "city" | "state" | "street" | "number" | "complement"
+> &
+  Pick<PaymentAddress, "addressType" | "receiverName"> & {
+    addressName: string;
+    addressLabel: string;
+    neighborhood: string;
+    country: string;
+    geoCoordinate: string | null;
+    isActive: boolean;
+    userId?: string;
+  };

package/src/features/addresses/types/index.ts

@@ -5,4 +5,5 @@ export type {
   RecipientInput,
   RecipientData,
   AddressInput,
+  DefaultAddressResponse,
 } from "./AddressData";

package/src/features/budgets/components/BudgetDeleteDrawer/budget-delete-drawer.scss

@@ -4,19 +4,6 @@
   @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
 
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    width: 100%;
-    max-width: none;
-
-    @include media(">=tablet") {
-      max-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-  }
-
   [data-fs-bp-basic-drawer-body] {
     overflow-y: auto;
   }

package/src/features/budgets/components/BudgetEditNotificationDrawer/budget-edit-notification-drawer.scss

@@ -11,19 +11,6 @@
     gap: var(--fs-spacing-1);
   }
 
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    width: 100%;
-    max-width: none;
-
-    @include media(">=tablet") {
-      max-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-  }
-
   [data-fs-bp-basic-drawer-body] {
     overflow-y: auto;
   }

package/src/features/budgets/components/CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer.tsx

@@ -95,7 +95,12 @@ export const CreateBudgetAllocationDrawer = ({
   }
 
   return (
-    <BasicDrawer data-fs-bp-create-budget-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-create-budget-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading
         title={
           <div data-fs-bp-create-budget-drawer-header-arrow>

package/src/features/budgets/components/CreateBudgetAllocationDrawer/create-budget-allocation-drawer.scss

@@ -16,18 +16,6 @@
   }
 
   &[data-fs-bp-basic-drawer] {
-    width: 100% !important;
-    max-width: none !important;
-
-    @include media(">=tablet") {
-      max-width: 32rem !important;
-    }
-
-    @include media(">=notebook") {
-      max-width: 60rem !important;
-      width: 100% !important;
-    }
-
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end !important;
       gap: var(--fs-spacing-1);

package/src/features/budgets/components/CreateBudgetDrawer/CreateBudgetDrawer.tsx

@@ -278,7 +278,12 @@ export const CreateBudgetDrawer = ({
   }
 
   return (
-    <BasicDrawer data-fs-bp-create-budget-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-create-budget-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading
         data-fs-bp-create-budget-drawer-step-success={step === "confirmation"}
         title={

package/src/features/budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss

@@ -2,18 +2,4 @@
 
 [data-fs-bp-delete-allocation-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
-
-  &[data-fs-bp-basic-drawer] {
-    width: 100%;
-    max-width: none;
-
-    @include media(">=tablet") {
-      max-width: 30rem;
-      min-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-  }
 }

package/src/features/budgets/components/EditBudgetDrawer/EditBudgetDrawer.tsx

@@ -171,7 +171,12 @@ export const EditBudgetDrawer = ({
   };
 
   return (
-    <BasicDrawer data-fs-bp-edit-budget-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-edit-budget-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading title="Edit Budget Settings" onClose={close} />
 
       <BasicDrawer.Body>

package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss

@@ -13,9 +13,6 @@
 
     @include media(">=tablet", "<notebook") {
       &[data-fs-modal-content] {
-        max-width: 30rem;
-        min-width: 30rem;
-        width: 100%;
         [data-fs-bp-basic-drawer-body] {
           [data-fs-bp-basic-drawer-body-wrapper] {
             padding: var(--fs-spacing-8)

package/src/features/budgets/layouts/BudgetsDetailsLayout/budget-details-layout.scss

@@ -62,8 +62,6 @@
     }
 
     &[data-fs-bp-basic-drawer] {
-      max-width: 60rem !important;
-      width: 100% !important;
       & > [data-fs-bp-basic-drawer-footer] {
         justify-content: flex-end !important;
         gap: var(--fs-spacing-1);

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/BasicBuyingPolicyDrawer.tsx

@@ -192,7 +192,12 @@ export const BasicBuyingPolicyDrawer = ({
   const isConfirmButtonEnabled = isAllFieldsFilled && !isLoading;
 
   return (
-    <BasicDrawer data-fs-bp-basic-buying-policy-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-basic-buying-policy-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading title={drawerTitle} onClose={close} />
 
       <BasicDrawer.Body>

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss

@@ -10,11 +10,6 @@
   @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
   @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
 
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    --fs-slide-over-partial-max-width-notebook: 60rem;
-    min-width: var(--fs-slide-over-partial-max-width-notebook);
-  }
-
   [data-fs-bp-autocomplete-dropdown] {
     [data-fs-bp-input-text-input] {
       top: 0;

package/src/features/org-units/components/DeleteOrgUnitDrawer/DeleteOrgUnitDrawer.tsx

@@ -73,6 +73,7 @@ export const DeleteOrgUnitDrawer = ({
       data-fs-bp-delete-org-unit-drawer
       data-fs-bp-delete-org-unit-drawer-has-content={hasChildren}
       close={close}
+      size={hasChildren ? "large" : "partial"}
       {...props}
     >
       <BasicDrawer.Heading title="Delete organizational unit" onClose={close} />
@@ -112,7 +113,7 @@ export const DeleteOrgUnitDrawer = ({
             <p data-fs-bp-delete-org-unit-drawer-message>
               Before deleting
               <span data-fs-bp-delete-org-unit-drawer-message-name>
-                {` ${name} `}
+                {` ${name}`}
               </span>
               , you must first remove all child organizational units{" "}
               {users?.length ? "and users" : ""}.

package/src/features/org-units/components/DeleteOrgUnitDrawer/delete-org-unit-drawer.scss

@@ -6,14 +6,6 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../OrgUnitsHierarchyTree/org-units-hierarchy-tree.scss";
 
-  &[data-fs-bp-delete-org-unit-drawer-has-content="true"] {
-    @include media(">=tablet") {
-      width: 75vw !important;
-      min-width: 31.25rem !important;
-      max-width: 75vw !important;
-    }
-  }
-
   [data-fs-bp-delete-org-unit-drawer-message] {
     font-weight: var(--fs-text-weight-regular);
     font-size: var(--fs-text-size-1);

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/AddPaymentMethodsDrawer.tsx

@@ -205,7 +205,12 @@ export const AddPaymentMethodsDrawer = ({
   };
 
   return (
-    <BasicDrawer data-fs-bp-add-payment-methods-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-add-payment-methods-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading title="Add payment methods" onClose={close} />
 
       <BasicDrawer.Body>

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/add-payment-methods-drawer.scss

@@ -1,17 +1,6 @@
 @import "../SearchPaymentMethods/search-payment-methods.scss";
 
 [data-fs-bp-add-payment-methods-drawer] {
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    width: 66%;
-    min-width: 66%;
-
-    @include media(">=notebook") {
-      width: 60rem;
-      min-width: 60rem;
-      max-width: 60rem;
-    }
-  }
-
   [data-fs-payment-methods-drawer] {
     @import "../../../shared/components/EmptyState/empty-state.scss";
     @import "../../../shared/components/Table/table.scss";

package/src/features/product-assortment/components/AddProductAssortmentDrawer/AddProductAssortmentDrawer.tsx

@@ -70,8 +70,9 @@ export const AddProductAssortmentDrawer = ({
   return (
     <BasicDrawer
       data-fs-bp-add-product-assortment-drawer
-      id="basicDrawer"
+      id="add-product-assortment-drawer"
       close={close}
+      size="large"
       {...props}
     >
       <BasicDrawer.Heading title="Add product assortment" onClose={close} />

package/src/features/product-assortment/components/AddProductAssortmentDrawer/add-product-assortment-drawer.scss

@@ -7,11 +7,6 @@
   @import "../../../shared/components/Paginator/paginator.scss";
   @import "../../components/table/add-product-assortment-drawer-table.scss";
 
-  &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
-    width: 100%;
-  }
-
   [data-fs-bp-add-product-assortment-text-drawer] {
     display: block;
     color: var(--fs-color-neutral-5);

package/src/features/shared/components/BasicDrawer/BasicDrawer.tsx

@@ -14,6 +14,7 @@ export type BasicDrawerProps = Omit<DrawerProps, "open"> & {
   id?: string;
   isOpen: boolean;
   onDismiss?: () => void;
+  size?: "full" | "partial" | "large";
 };
 
 export const BasicDrawer = ({
@@ -21,16 +22,19 @@ export const BasicDrawer = ({
   onDismiss,
   id,
   children,
+  size = "partial",
   ...props
 }: BasicDrawerProps) => {
   const { fadeOut } = useFadeEffect();
+  const isSizeLarge = size === "large";
   return (
     <SlideOver
       isOpen={isOpen}
       direction="rightSide"
-      size="partial"
+      size={isSizeLarge ? "full" : size}
       data-fs-bp-basic-drawer
       data-fs-mobile-bottom-sheet
+      data-fs-bp-basic-drawer-large={isSizeLarge}
       id={id}
       onDismiss={onDismiss ?? fadeOut}
       {...props}

package/src/features/shared/components/BasicDrawer/basic-drawer.scss

@@ -64,12 +64,20 @@
     width: 100%;
 
     @include media(">=tablet") {
-      width: 33vw;
-      min-width: 31.25rem;
+      width: 30rem; // 480px 
+      min-width: 3rem;
       max-width: 100vw;
     }
   }
 
+   &[data-fs-slide-over-size="full"] {
+    &[data-fs-bp-basic-drawer-large="true"] {
+      --fs-slide-over-partial-max-width-notebook: 60rem; // 960px
+      max-width: var(--fs-slide-over-partial-max-width-notebook);
+    }
+  }
+
+
   [data-fs-bp-basic-drawer-heading] {
     width: 100%;
     display: flex;

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss

@@ -53,16 +53,7 @@
     }
   }
 
-  @include media(">=tablet") {
-    width: 30rem !important;
-    min-width: 30rem !important;
-    max-width: 30rem !important;
-  }
-
   @include media("<=tablet") {
-    width: 19rem !important;
-    min-width: 19rem !important;
-    max-width: 19rem !important;
     height: 100% !important;
     border-radius: 0 !important;
     & > [data-fs-bp-basic-drawer-heading] {

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

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.24";
+export const CURRENT_VERSION = "1.3.26";

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

@@ -298,9 +298,9 @@ export const CreateUserDrawer = ({
             <br />
             <p>
               Users can only belong to one organizational unit at a time. To add
-              <a href={`/user/${userAlreadyInUse?.id}`}>
-                {` ${userAlreadyInUse?.name}`}
-              </a>{" "}
+              <a
+                href={`/user/${userAlreadyInUse?.id}`}
+              >{` ${userAlreadyInUse?.name}`}</a>{" "}
               to {orgUnitName}, go to their profile and move them from
               {` ${userAlreadyInUse?.orgUnit}`}.
             </p>