@vtex/faststore-plugin-buyer-portal 1.3.5 → 1.3.7

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/profile/layouts/ProfileLayout/profile-layout.scss

@@ -14,7 +14,7 @@
     font-weight: var(--fs-text-weight-semibold);
     size: var(--fs-spacing-3);
     line-height: var(--fs-spacing-4);
-
+    color: #000;
     display: flex;
     justify-content: space-between;
     padding: var(--fs-spacing-4) 0;
@@ -22,7 +22,7 @@
   }
 
   [data-fs-bp-profile-divider] {
-    border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+    border: calc(var(--fs-border-width) / 1) solid #e0e0e0;
   }
 
   [data-fs-button][data-fs-button-variant="primary"] [data-fs-button-wrapper] {
@@ -31,22 +31,25 @@
 
   [data-fs-bp-profile-details-row] {
     display: flex;
+    flex-direction: row;
     padding: 1.375rem 0;
-    font-weight: var(--fs-text-weight-medium);
     size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    font-weight: var(--fs-text-weight-regular);
 
     [data-fs-bp-profile-details-row-label] {
       width: 12.5rem;
       color: #707070;
       font-size: var(--fs-text-size-1);
-      font-weight: 500;
     }
 
     [data-fs-bp-profile-details-row-value] {
       color: #000;
       font-size: var(--fs-text-size-1);
-      font-weight: 500;
+    }
+
+    @include media("<=tablet") {
+      flex-direction: column;
     }
   }
 

package/src/features/roles/layout/RoleDetailsLayout/RoleDetailsLayout.tsx

@@ -21,7 +21,7 @@ export const RoleDetailsLayout = ({
   const { currentOrgUnit } = useBuyerPortal();
 
   const columns = getTableColumns({
-    nameColumnLabel: "Permissions",
+    nameColumnLabel: "",
     nameColumnSize: "18rem",
     actionsLength: 1,
     extraColumns: [
@@ -34,10 +34,12 @@ export const RoleDetailsLayout = ({
     ],
   });
 
+  const count = roles.reduce((acc, item) => acc + (item.inRole ? 1 : 0), 0);
+
   return (
     <GlobalLayout>
       <OrgUnitTabsLayout pageName="Organization">
-        <section data-fs-bp-roles-section>
+        <section data-fs-bp-roles-details-section>
           <HeaderInside
             title={roleName}
             backLink={buyerPortalRoutes.roles({
@@ -46,12 +48,20 @@ export const RoleDetailsLayout = ({
           />
 
           <div data-fs-role-details-page>
+            <div data-fs-role-header>
+              <span>Permissions</span>
+              <div data-fs-role-status>
+                <span data-fs-role-active>{count}</span>/
+                <span data-fs-role-not-active>{roles.length}</span>
+              </div>
+            </div>
             <Table layoutFixed>
               <Table.Head columns={columns} />
               <Table.Body>
                 {roles.map((role) => (
                   <Table.Row
                     data-fs-bp-role-details-row
+                    data-fs-bp-role-details-row-disabled={role.inRole}
                     key={role.label}
                     title={
                       <>
@@ -80,46 +90,17 @@ export const RoleDetailsLayout = ({
                       )
                     }
                   >
-                    <Table.Cell align="left" hideOnScreenSize="tablet">
+                    <Table.Cell
+                      align="left"
+                      data-fs-bp-role-details-description
+                      hideOnScreenSize="tablet"
+                    >
                       {role.description}
                     </Table.Cell>
                   </Table.Row>
                 ))}
               </Table.Body>
             </Table>
-            {/* <Table>
-              <Table.Head columns={configTable} />
-              <Table.Body>
-                {roles.map((role) => (
-                  <Table.Row
-                    key={role.label}
-                    title={role.label}
-                    enabled={role.inRole}
-                  >
-                    <Table.Cell data-fs-bp-role-description>
-                      {role.description}
-                    </Table.Cell>
-                    <Table.Cell>
-                      {role.inRole ? (
-                        <Icon
-                          name="CheckCircle"
-                          width={20}
-                          height={20}
-                          data-fs-bp-check-icon
-                        />
-                      ) : (
-                        <Icon
-                          name="Block"
-                          width={20}
-                          height={20}
-                          data-fs-bp-block-icon
-                        />
-                      )}
-                    </Table.Cell>
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table> */}
           </div>
         </section>
       </OrgUnitTabsLayout>

package/src/features/roles/layout/RoleDetailsLayout/role-details-layout.scss

@@ -1,6 +1,46 @@
 [data-fs-role-details-page] {
 	@import "../../../shared/components/Table/table.scss";
 
+	[data-fs-bp-table-head] {
+		@include media("<=tablet") {
+			border: none;
+		}
+
+		[data-fs-bp-table-head-column] {
+			padding: 0;
+		}
+	}
+
+	[data-fs-role-header] {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: var(--fs-spacing-3);
+
+		@include media(">=tablet") {
+			margin-bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+		}
+
+		[data-fs-role-status] {
+			margin-right: var(--fs-spacing-1);
+		}
+		span:first-child {
+			color: #000000;
+			font-weight: var(--fs-text-weight-semibold);
+		}
+		[data-fs-role-not-active],
+		[data-fs-role-active] {
+			font-size: var(--fs-text-size-1);
+			font-weight: var(--fs-text-weight-semibold);
+		}
+		[data-fs-role-active] {
+			color: #000000;
+		}
+		[data-fs-role-not-active] {
+			color: #5c5c5c;
+		}
+	}
+
 	[data-fs-bp-role-details-row] {
 		[data-fs-bp-table-row-title-cell] {
 			padding-left: var(--fs-spacing-0);

package/src/features/roles/layout/RolesLayout/roles-layout.scss

@@ -1,13 +1,13 @@
 [data-fs-bp-roles-section] {
-	@import "../../../shared/components/Table/table.scss";
+  @import "../../../shared/components/Table/table.scss";
 
-	@import "../../../shared/components/HeaderInside/header-inside.scss";
+  @import "../../../shared/components/HeaderInside/header-inside.scss";
 
-	@import "../../../shared/components/InternalSearch/internal-search.scss";
-	@import "../../../shared/components/Tag/tag.scss";
-	@import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
+  @import "../../../shared/components/Tag/tag.scss";
+  @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 
-	[data-fs-bp-table-row-icon] {
-		color: #0366dd;
-	}
+  [data-fs-bp-table-row-icon] {
+    color: #0366dd;
+  }
 }

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

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;
 };