@vtex/faststore-plugin-buyer-portal 1.3.4 → 1.3.6

package/src/features/product-assortment/services/get-product-assortment-from-contract.service.ts

@@ -0,0 +1,13 @@
+import { productAssortmentClient } from "../clients/ProductAssortmentClient";
+
+export const getProductAssortmentFromContractService = async (
+  params: Parameters<
+    typeof productAssortmentClient.getProductAssortmentFromContract
+  >[0]
+) => {
+  const data = await productAssortmentClient.getProductAssortmentFromContract(
+    params
+  );
+
+  return data;
+};

package/src/features/product-assortment/services/get-product-assortment-from-scope.service.ts

@@ -0,0 +1,28 @@
+import { isRightFormat } from "../../shared/utils/isRightFormat";
+import { productAssortmentClient } from "../clients/ProductAssortmentClient";
+
+export const getProductAssortmentFromScopeService = async (
+  args: Parameters<
+    typeof productAssortmentClient.getProductAssortmentListInScope
+  >[0]
+) => {
+  try {
+    const data = await productAssortmentClient.getProductAssortmentListInScope(
+      args
+    );
+
+    return data;
+  } catch (error) {
+    if (error instanceof Error) {
+      const err = JSON.parse(error.message) as unknown;
+      if (
+        isRightFormat(err) &&
+        err.message.startsWith("No Product assortment found for the name")
+      ) {
+        return [];
+      }
+    }
+
+    throw error;
+  }
+};

package/src/features/product-assortment/services/remove-product-assortment-from-scope.ts

@@ -0,0 +1,9 @@
+import { productAssortmentClient } from "../clients/ProductAssortmentClient";
+
+export const removeProductAssortmentFromScopeService = async (
+  params: Parameters<
+    typeof productAssortmentClient.removeProductAssortmentFromScope
+  >[0]
+) => {
+  await productAssortmentClient.removeProductAssortmentFromScope(params);
+};

package/src/features/product-assortment/types/index.ts

@@ -0,0 +1,80 @@
+import type { ContractData } from "../../contracts/types";
+import type { OrgUnitBasicData } from "../../org-units/types";
+import type { BasicDrawerProps } from "../../shared/components";
+import type { ErrorBoundaryProps } from "../../shared/components/ErrorBoundary/types";
+import type { ClientContext } from "../../shared/utils";
+
+export type ProductAssortmentSummary = {
+  id: string;
+  name: string;
+};
+
+export type ContractProductAssortment = ProductAssortmentSummary & {
+  isEnabled: boolean;
+};
+export type ScopeProductAssortment = ProductAssortmentSummary & {
+  isEnabled: boolean;
+};
+
+export type GetProductAssortmentFromContractResponse = {
+  collections: Array<ContractProductAssortment>;
+};
+
+export type GetProductAssortmentFromScopeResponse = {
+  collections: Array<ScopeProductAssortment>;
+};
+
+export type AddProductAssortmentResponse = {
+  message: string;
+  addedCollections: string[];
+};
+
+export type AddProductAssortmentPayload = Array<{ name: string }>;
+
+export type AddProductAssortmentDrawerProps = Omit<
+  BasicDrawerProps,
+  "children"
+> & {
+  productAssortment: ScopeProductAssortment[];
+};
+
+export type RemoveProductAssortmentDrawerProps = Omit<
+  BasicDrawerProps,
+  "children"
+> & {
+  productAssortment: ProductAssortmentSelectedProps;
+};
+export interface ProductAssortmentSelectedProps {
+  id: string;
+  name: string;
+}
+
+export type ProductAssortmentLayoutProps = {
+  initialProductAssortment: ScopeProductAssortment[];
+  drawerProductAssortment: ScopeProductAssortment[];
+  page: number;
+  search: string;
+  isContractEmpty: boolean;
+};
+
+export type ProductAssortmentData = {
+  productAssortment: ScopeProductAssortment[];
+  drawerProductAssortment: ScopeProductAssortment[];
+  isContractEmpty: boolean;
+  search: string;
+  page: number;
+  context: {
+    clientContext: ClientContext;
+    currentOrgUnit: OrgUnitBasicData;
+    currentContract: ContractData | null;
+  };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
+};
+
+export type ProductAssortmentQuery = {
+  orgUnitId: string;
+  contractId: string;
+  search: string;
+  page: string;
+};

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

@@ -45,8 +45,11 @@ export const buyerPortalRoutes = {
   creditCards: (params: { orgUnitId: string; contractId: string }) =>
     replaceParams(`${base}/credit-cards/[orgUnitId]/[contractId]`, params),
 
-  collections: (params: { orgUnitId: string; contractId: string }) =>
-    replaceParams(`${base}/collections/[orgUnitId]/[contractId]`, params),
+  productAssortment: (params: { orgUnitId: string; contractId: string }) =>
+    replaceParams(
+      `${base}/product-assortment/[orgUnitId]/[contractId]`,
+      params
+    ),
 
   poNumbers: (params: { orgUnitId: string; contractId: string }) =>
     replaceParams(`${base}/po-numbers/[orgUnitId]/[contractId]`, params),

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.4";
+export const CURRENT_VERSION = "1.3.6";

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

@@ -24,8 +24,8 @@ export const getContractSettingsLinks = ({
     link: buyerPortalRoutes.creditCards({ orgUnitId, contractId }),
   },
   {
-    name: "Collections",
-    link: buyerPortalRoutes.collections({ orgUnitId, contractId }),
+    name: "Product assortment",
+    link: buyerPortalRoutes.productAssortment({ orgUnitId, contractId }),
   },
   {
     name: "PO numbers",

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

@@ -37,10 +37,10 @@ export const ROUTE_TABS_LAYOUT_MAPPING: Record<string, RouteTabsLayoutConfig> =
       pageName: "Contract",
       pageTitle: "Credit Cards",
     },
-    "/pvt/organization-account/collections/[orgUnitId]/[contractId]": {
+    "/pvt/organization-account/product-assortment/[orgUnitId]/[contractId]": {
       layout: "ContractTabsLayout",
       pageName: "Contract",
-      pageTitle: "Collections",
+      pageTitle: "Product assortment",
     },
     "/pvt/organization-account/po-numbers/[orgUnitId]/[contractId]": {
       layout: "ContractTabsLayout",

package/src/features/users/clients/UsersClient.ts

@@ -142,6 +142,7 @@ class UsersClient extends Client {
     props: {
       orgUnitId: string;
       userId: string;
+      phone?: string;
       name?: string;
       role?: string;
     },
@@ -153,6 +154,7 @@ class UsersClient extends Client {
       unknown,
       {
         name?: string;
+        phone?: string;
         role?: string;
       }
     >(

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

@@ -13,6 +13,7 @@ import {
   InputText,
 } from "../../../shared/components";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { useAddUserToOrgUnit } from "../../hooks";
 
 export type CreateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -49,16 +50,18 @@ export const CreateUserDrawer = ({
   const [form, setForm] = useState<{
     name: string;
     email: string;
+    phone: string;
     roles: number[];
   }>({
     name: "",
     email: "",
+    phone: "",
     roles: [],
   });
 
   const [isTouched, setIsTouched] = useState(false);
 
-  const { name, email, roles } = form;
+  const { name, email, roles, phone } = form;
 
   const updateField = (
     field: keyof typeof form,
@@ -122,7 +125,7 @@ export const CreateUserDrawer = ({
   });
 
   const isAllFieldsFilled = Object.keys(form).every((key) => {
-    if (key === "roles") {
+    if (key === "roles" || key === "phone") {
       return true; // allow empty roles
     }
 
@@ -140,6 +143,7 @@ export const CreateUserDrawer = ({
     addUserToOrgUnit({
       name,
       email,
+      phone: phone ?? "",
       roles,
       orgUnitId,
     });
@@ -154,6 +158,7 @@ export const CreateUserDrawer = ({
     setForm({
       name: "",
       email: "",
+      phone: "",
       roles: [],
     });
   };
@@ -225,6 +230,18 @@ export const CreateUserDrawer = ({
                   message="Email is required"
                 />
 
+                <InputText
+                  label="Phone number (optional)"
+                  value={phone}
+                  onChange={(event) =>
+                    // TODO: Update this when implementing i18n
+                    updateField(
+                      "phone",
+                      maskPhoneNumber(event.target.value, "USA")
+                    )
+                  }
+                />
+
                 <div data-fs-bp-create-user-roles>
                   <span data-fs-bp-create-user-roles-label>Roles</span>
 

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

@@ -10,10 +10,11 @@ import {
   ErrorMessage,
   InputText,
 } from "../../../shared/components";
+import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { useGetUserById, useUpdateUser } from "../../hooks";
 
 export type UpdateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
-  onCreate?: () => void;
+  onUpdate?: () => void;
   orgUnitId: string;
   userId: string;
   rolesOptions: RoleData[] | null;
@@ -21,7 +22,7 @@ export type UpdateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
 
 export const UpdateUserDrawer = ({
   close,
-  onCreate,
+  onUpdate,
   userId,
   orgUnitId,
   rolesOptions,
@@ -36,6 +37,7 @@ export const UpdateUserDrawer = ({
         setForm({
           name: data?.name ?? "",
           email: data?.email ?? "",
+          phone: data?.phone ?? "",
           roles: data?.roles ? data.roles : [],
         });
       },
@@ -51,16 +53,18 @@ export const UpdateUserDrawer = ({
   const [form, setForm] = useState<{
     name: string;
     email: string;
+    phone: string;
     roles: string[];
   }>({
     name: "",
     email: "",
+    phone: "",
     roles: [],
   });
 
   const [isTouched, setIsTouched] = useState(false);
 
-  const { name, email, roles } = form;
+  const { name, email, roles, phone } = form;
 
   const updateField = (field: keyof typeof form, value: string | string[]) => {
     setForm((prev) => ({
@@ -74,7 +78,7 @@ export const UpdateUserDrawer = ({
       message: "User successfully updated",
       status: "INFO",
     });
-    onCreate?.();
+    onUpdate?.();
     close();
   };
 
@@ -99,7 +103,7 @@ export const UpdateUserDrawer = ({
   });
 
   const isAllFieldsFilled = Object.keys(form).every((key) => {
-    if (key === "roles") {
+    if (key === "roles" || key === "phone") {
       return true; // allow empty roles
     }
 
@@ -129,6 +133,7 @@ export const UpdateUserDrawer = ({
     updateUser({
       userId,
       name,
+      phone,
       roles,
       orgUnitId,
     });
@@ -186,6 +191,27 @@ export const UpdateUserDrawer = ({
           message="Email is required"
         />
 
+        {isUserLoading ? (
+          <Skeleton
+            size={{ width: "100%", height: "3.5rem" }}
+            style={{
+              marginTop: "1rem",
+              marginBottom: "1rem",
+              width: "100%",
+              height: "3.5rem",
+            }}
+          />
+        ) : (
+          <InputText
+            label="Phone number (optional)"
+            value={phone}
+            onChange={(event) =>
+              // TODO: Update this when implementing i18n
+              updateField("phone", maskPhoneNumber(event.target.value, "USA"))
+            }
+          />
+        )}
+
         <div data-fs-bp-update-user-roles>
           <span data-fs-bp-update-user-roles-label>Roles</span>
           {rolesOptions &&

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

@@ -104,7 +104,7 @@ export const UserDropdownMenu = ({
           userId={user.id}
           orgUnitId={currentOrgUnit?.id ?? ""}
           isOpen={isUpdateUserDrawerOpen}
-          onCreate={handleUpdate}
+          onUpdate={handleUpdate}
           {...updateUserDrawerProps}
         />
       )}

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

@@ -80,6 +80,13 @@ export const UserDetailsLayout = ({
 
             <hr data-fs-user-details-divider />
 
+            <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>
+            </div>
+
+            <hr data-fs-user-details-divider />
+
             <div data-fs-user-details-row>
               <span data-fs-user-details-row-label>Email</span>
               <a href={`mailto:${user?.email}`} data-fs-user-details-row-value>
@@ -133,6 +140,7 @@ export const UserDetailsLayout = ({
             userId={user?.id ?? ""}
             orgUnitId={currentOrgUnit?.id ?? ""}
             isOpen={isUpdateUserDrawerOpen}
+            onUpdate={() => location.reload()}
             {...updateUserDrawerProps}
           />
         )}

package/src/features/users/services/add-user-to-org-unit.service.ts

@@ -5,6 +5,7 @@ export type AddUserToOrgUnitServiceProps = {
   roles: number[];
   email: string;
   name: string;
+  phone?: string;
   cookie: string;
 };
 

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

@@ -12,7 +12,7 @@ export const getUserByIdService = async ({
   cookie: string;
 }): Promise<UserData | null> => {
   try {
-    const { email, name, orgUnit, role } = await usersClient.getUserById(
+    const { email, name, phone, orgUnit, role } = await usersClient.getUserById(
       orgUnitId,
       userId,
       cookie
@@ -23,6 +23,7 @@ export const getUserByIdService = async ({
       roles: role ? role : [],
       id: userId,
       email: email ?? "",
+      phone: phone ?? "",
       orgUnit: {
         name: orgUnit,
       },

package/src/features/users/services/update-user.service.ts

@@ -4,6 +4,7 @@ export type UpdateUserServiceProps = {
   orgUnitId: string;
   userId: string;
   name?: string;
+  phone?: string;
   roles?: string[];
   cookie: string;
 };
@@ -13,6 +14,7 @@ export const updateUserService = async ({
   userId,
   cookie,
   name,
+  phone = "",
   roles,
 }: UpdateUserServiceProps) => {
   return usersClient.updateUser(
@@ -20,6 +22,7 @@ export const updateUserService = async ({
       orgUnitId,
       userId,
       name,
+      phone,
       role: roles?.join(",") || undefined,
     },
     cookie

package/src/features/users/types/UserData.ts

@@ -1,5 +1,6 @@
 export type UserData = {
   name: string;
+  phone?: string;
   isActive?: boolean;
   id: string;
   email?: string;

package/src/features/users/types/UserDataService.ts

@@ -2,6 +2,7 @@ export type UserDataService = {
   userId: string;
   name: string;
   email: string;
+  phone?: string;
   role: string[];
   orgUnit: string;
 };

package/src/pages/{collections.tsx → productAssortment.tsx}

@@ -1,49 +1,26 @@
-import { CollectionsLayout } from "../features/collections/layouts";
-import { getCollectionsFromContractService } from "../features/collections/services/get-collections-from-contract.service";
-import { getCollectionsFromScopeService } from "../features/collections/services/get-collections-from-scope.service";
-import { ScopeCollection } from "../features/collections/types";
 import { getContractDetailsService } from "../features/contracts/services";
-import { ContractData } from "../features/contracts/types";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
+import { ProductAssortmentLayout } from "../features/product-assortment/layouts";
+import { getProductAssortmentFromContractService } from "../features/product-assortment/services/get-product-assortment-from-contract.service";
+import { getProductAssortmentFromScopeService } from "../features/product-assortment/services/get-product-assortment-from-scope.service";
 import { withErrorBoundary } from "../features/shared/components";
-import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
-  type ClientContext,
   getValidPage,
   withLoaderErrorBoundary,
   withAuthLoader,
   withProviders,
 } from "../features/shared/utils";
 
-import type { OrgUnitBasicData } from "../features/org-units/types";
+import type {
+  ProductAssortmentData,
+  ProductAssortmentQuery,
+} from "../features/product-assortment/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 
-export type CollectionsData = {
-  collections: ScopeCollection[];
-  drawerCollections: ScopeCollection[];
-  isContractEmpty: boolean;
-  search: string;
-  page: number;
-  context: {
-    clientContext: ClientContext;
-    currentOrgUnit: OrgUnitBasicData;
-    currentContract: ContractData | null;
-  };
-  hasError?: boolean;
-  error?: ErrorBoundaryProps;
-};
-
-export type CollectionsQuery = {
-  orgUnitId: string;
-  contractId: string;
-  search: string;
-  page: string;
-};
-
 const loaderFunction = async (
-  data: LoaderData<CollectionsQuery>
-): Promise<AuthRouteProps<CollectionsData>> => {
+  data: LoaderData<ProductAssortmentQuery>
+): Promise<AuthRouteProps<ProductAssortmentData>> => {
   const { contractId, orgUnitId, search = "", page: pageString } = data.query;
 
   const page = getValidPage(pageString);
@@ -54,9 +31,9 @@ const loaderFunction = async (
       getContractDetailsService({ contractId, cookie, unitId: orgUnitId }),
     ]);
 
-    const [enabledCollections, allCollections, contractCollections] =
+    const [enabledAssortment, allAssortment, contractAssortment] =
       await Promise.all([
-        getCollectionsFromScopeService({
+        getProductAssortmentFromScopeService({
           cookie,
           contractId,
           unitId: orgUnitId,
@@ -64,14 +41,14 @@ const loaderFunction = async (
           name: search,
           page,
         }),
-        getCollectionsFromScopeService({
+        getProductAssortmentFromScopeService({
           cookie,
           contractId,
           unitId: orgUnitId,
           filterByScope: false,
           page: 1,
         }),
-        getCollectionsFromContractService({
+        getProductAssortmentFromContractService({
           contractId,
           cookie,
           unitId: orgUnitId,
@@ -79,12 +56,14 @@ const loaderFunction = async (
       ]);
 
     const isContractEmpty =
-      !Array.isArray(contractCollections) || contractCollections?.length === 0;
-    const drawerCollections = allCollections.filter((col) => !col.isEnabled);
+      !Array.isArray(contractAssortment) || contractAssortment?.length === 0;
+    const drawerProductAssortment = allAssortment.filter(
+      (col) => !col.isEnabled
+    );
 
     return {
-      collections: enabledCollections,
-      drawerCollections,
+      productAssortment: enabledAssortment,
+      drawerProductAssortment,
       isContractEmpty,
       search,
       page,
@@ -98,28 +77,28 @@ const loaderFunction = async (
 };
 
 export const loader = withLoaderErrorBoundary(loaderFunction, {
-  componentName: "CollectionsPage",
+  componentName: "ProductAssortmentPage",
   redirectToError: true,
 });
 
-const CollectionsPage = ({
-  collections,
-  drawerCollections,
+const ProductAssortmentPage = ({
+  productAssortment,
+  drawerProductAssortment,
   isContractEmpty,
   page,
   search,
   hasError,
   error,
-}: CollectionsData) => (
+}: ProductAssortmentData) => (
   <>
     {hasError ? (
       <ErrorTabsLayout error={error} />
     ) : (
-      <CollectionsLayout
+      <ProductAssortmentLayout
         page={page}
         search={search}
-        initialCollections={collections}
-        drawerCollections={drawerCollections}
+        initialProductAssortment={productAssortment}
+        drawerProductAssortment={drawerProductAssortment}
         isContractEmpty={isContractEmpty}
       />
     )}
@@ -127,10 +106,10 @@ const CollectionsPage = ({
 );
 
 export default withProviders(
-  withErrorBoundary(CollectionsPage, {
+  withErrorBoundary(ProductAssortmentPage, {
     tags: {
-      component: "CollectionsPage",
-      errorType: "collections_error",
+      component: "ProductAssortmentPage",
+      errorType: "product_assortment_error",
     },
   })
 );

package/src/themes/layouts.scss

@@ -22,8 +22,8 @@
 @import "../features/org-units/layouts/OrgUnitsLayout/org-units-layout.scss";
 @import "../features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss";
 
-// Collections
-@import "../features/collections/layouts/CollectionsLayout/collections-layout.scss";
+// Product Assortment
+@import "../features/product-assortment/layouts/ProductAssortmentLayout/product-assortment-layout.scss";
 
 // Credit Cards
 @import "../features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss";