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

package/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.6] - 2025-10-17
+
+### Changed
+
+- Collections to Product assortment
+  - Rename CSS files and data attributes
+  - Rename labels, titles and messages
+  - Rename files and folders
+  - Rename code
+  - Rename routes
+
+## [1.3.5] - 2025-10-17
+
+### Fixed
+
+- Budget Screen showing `remaining` ammount when it should have been showing `total`
+
 ## [1.3.4] - 2025-10-16
 
 - Error boundary:
@@ -120,12 +137,14 @@ 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.4...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.6...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
 [1.3.2]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.2
-
 [1.3.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.3
-
 [1.3.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.4
+
+[1.3.5]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.5
+
+[1.3.6]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.6

package/cypress/constants.ts

@@ -50,11 +50,13 @@ export const TEST_DATA = {
     NEW_USER: {
       NAME: "New User",
       EMAIL: "new_user+e2e_test@vtex.com",
+      PHONE: "(555) 555-5555",
       ROLE: "Buyer",
     },
     USER_FROM_OTHER_ORG_UNIT: {
       NAME: "User from other unit",
       EMAIL: "rodrigo.tavares+devb2b@vtex.com",
+      PHONE: "(000) 000-0000",
       ROLE: "Order Approver",
     },
   },

package/cypress/integration/organizational-units.test.ts

@@ -155,7 +155,7 @@ describe("Organizational Units", { retries: 2 }, () => {
       cy.contains("Addresses").should("be.visible");
       cy.contains("Payment methods").should("be.visible");
       cy.contains("Credit cards").should("be.visible");
-      cy.contains("Collections").should("be.visible");
+      cy.contains("Product assortment").should("be.visible");
       cy.contains("PO numbers").should("be.visible");
       cy.contains("Cost centers").should("be.visible");
       cy.contains("Releases").should("be.visible");

package/cypress/integration/{collections.test.ts → product-assortment.test.ts}

@@ -1,12 +1,12 @@
 import { TEST_CONFIG } from "../constants";
 
-function visitCollectionsPage() {
+function visitProductAssortmentPage() {
   // Visit the homepage
   cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
 
-  // Navigate to collections page
+  // Navigate to product assortment page
   cy.get("[data-fs-vertical-nav-menu-item]")
-    .contains("Collections")
+    .contains("Product assortment")
     .click({ timeout: TEST_CONFIG.TIMEOUTS.PAGE_LOAD });
 
   cy.wait(1000);
@@ -15,25 +15,27 @@ function visitCollectionsPage() {
     timeout: TEST_CONFIG.TIMEOUTS.LONG_DELAY,
   }).should("not.exist");
 
-  cy.get("[data-fs-bp-collections-layout]").as("collectionLayout");
+  cy.get("[data-fs-bp-product-assortment-layout]").as(
+    "productAssortmentLayout"
+  );
 }
 
 describe(
-  "Collections",
+  "Product assortment",
   {
     retries: 2,
   },
   () => {
-    const COLLECTION_UNDER_TEST = "Collection Demo";
+    const PRODUCT_ASSORTMENT_UNDER_TEST = "Product Assortment Demo";
 
     beforeEach(() => {
       cy.login();
     });
 
-    it("Should show empty state when unit has no collection", () => {
+    it("Should show empty state when unit has no assortment", () => {
       cy.intercept(
         "GET",
-        "/_next/data/**/pvt/organization-account/collections/**",
+        "/_next/data/**/pvt/organization-account/product-assortment/**",
         (req) => {
           req.reply((res) => {
             res.body.pageProps.data.isContractEmpty = true;
@@ -41,34 +43,34 @@ describe(
         }
       );
 
-      visitCollectionsPage();
+      visitProductAssortmentPage();
 
-      cy.get("@collectionLayout")
-        .find("[data-fs-bp-collection-content]")
+      cy.get("@productAssortmentLayout")
+        .find("[data-fs-bp-product-assortment-content]")
         .should("not.exist");
-      cy.get("@collectionLayout")
+      cy.get("@productAssortmentLayout")
         .find("[data-fs-empty-state-section]")
         .should("be.visible");
     });
 
-    it("Should list and filter Collections correctly", () => {
-      visitCollectionsPage();
+    it("Should list and filter Product Assortment correctly", () => {
+      visitProductAssortmentPage();
 
-      // Wait for collections section to be visible
+      // Wait for product assortment section to be visible
       cy.get("[data-fs-bp-header-inside-title]")
-        .contains("Collections")
+        .contains("Product assortment")
         .should("be.visible");
 
-      // Wait for collections table to be loaded
-      cy.get("[data-fs-bp-collection-table]", {
+      // Wait for product assortment table to be loaded
+      cy.get("[data-fs-bp-product-assortment-table]", {
         timeout: TEST_CONFIG.TIMEOUTS.PAGE_LOAD,
       }).should("exist");
 
       cy.get("[data-fs-bp-table-row-title]")
         .eq(0)
         .then(($firstTitle) => {
-          cy.get("@collectionLayout")
-            .find("[data-fs-collection-filter] input")
+          cy.get("@productAssortmentLayout")
+            .find("[data-fs-product-assortment-filter] input")
             .as("searchInput")
             .should("be.visible")
             .lazyType($firstTitle.text());
@@ -77,8 +79,8 @@ describe(
       // Wait for list to update
       cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
 
-      // Check if the resulted collection is visible
-      cy.get("[data-fs-bp-collection-table]", {
+      // Check if the resulted product assortment is visible
+      cy.get("[data-fs-bp-product-assortment-table]", {
         timeout: TEST_CONFIG.TIMEOUTS.PAGE_LOAD,
       }).should("exist");
 
@@ -91,34 +93,34 @@ describe(
       cy.get("[data-fs-bp-table] [data-fs-bp-table-row]").should("not.exist");
     });
 
-    it("Should add a new Collection correctly", () => {
-      visitCollectionsPage();
+    it("Should add a new Product Assortment correctly", () => {
+      visitProductAssortmentPage();
 
       // Check if drawer is present on screen
-      cy.get("[data-fs-bp-add-collections-drawer]").should("not.exist");
+      cy.get("[data-fs-bp-add-product-assortment-drawer]").should("not.exist");
 
       // Click on add button to open drawer
-      cy.get("@collectionLayout")
-        .find("[aria-label='Add collection']")
+      cy.get("@productAssortmentLayout")
+        .find("[aria-label='Add product assortment']")
         .should("be.visible")
         .click();
 
       // Check if drawer was opened
-      cy.get("[data-fs-bp-add-collections-drawer]")
+      cy.get("[data-fs-bp-add-product-assortment-drawer]")
         .as("addDrawer")
         .should("be.visible");
       cy.get("@addDrawer")
         .find("[data-fs-bp-basic-drawer-heading]")
-        .contains("Add collections")
+        .contains("Add product assortment")
         .should("be.visible");
 
-      // Check if collections was listed correclty and submit button is disable
+      // Check if product assortment was listed correclty and submit button is disable
       cy.get("@addDrawer")
         .find("[data-fs-bp-basic-drawer-button-variant='confirm']")
         .as("submitButton")
         .should("be.disabled");
       cy.get("@addDrawer")
-        .find("[data-fs-bp-add-collections-drawer-table] tbody tr")
+        .find("[data-fs-bp-add-product-assortment-drawer-table] tbody tr")
         .as("results");
 
       // Check if empty state is visibile when a search returns no results
@@ -127,20 +129,20 @@ describe(
         .as("input")
         .type("foo bar");
       cy.get("@addDrawer")
-        .find("[data-fs-bp-add-collections-drawer-empty-state]")
+        .find("[data-fs-bp-add-product-assortment-drawer-empty-state]")
         .as("emptyState")
         .should("be.visible");
       cy.get("@results").should("not.exist");
 
       // Check if results is updated when search results is not empty
-      cy.get("@input").clear().type(COLLECTION_UNDER_TEST);
+      cy.get("@input").clear().type(PRODUCT_ASSORTMENT_UNDER_TEST);
       cy.get("@emptyState").should("not.exist");
       cy.get("@results").should("have.length", 1);
 
-      // Select first Collection
+      // Select first Product Assortment
       cy.get("@addDrawer")
         .find(
-          "[data-fs-bp-add-collections-drawer-table] tbody td [data-fs-checkbox]"
+          "[data-fs-bp-add-product-assortment-drawer-table] tbody td [data-fs-checkbox]"
         )
         .first()
         .check();
@@ -151,38 +153,40 @@ describe(
       // Wait for page refresh
       cy.wait(TEST_CONFIG.TIMEOUTS.RETRY_DELAY);
 
-      cy.get("[data-fs-bp-collection-table]", {
+      cy.get("[data-fs-bp-product-assortment-table]", {
         timeout: TEST_CONFIG.TIMEOUTS.PAGE_LOAD,
       }).within(() => {
-        cy.contains(COLLECTION_UNDER_TEST);
+        cy.contains(PRODUCT_ASSORTMENT_UNDER_TEST);
       });
     });
 
-    it("Should remove Collection correctly", () => {
-      visitCollectionsPage();
+    it("Should remove Product Assortment correctly", () => {
+      visitProductAssortmentPage();
 
       // Check if delete drawer is not visible
-      cy.get("[data-fs-bp-remove-collections-drawer]").should("not.exist");
+      cy.get("[data-fs-bp-remove-product-assortment-drawer]").should(
+        "not.exist"
+      );
 
-      // Count current collection list before remove one
-      cy.get("[data-fs-bp-collection-table]", {
+      // Count current product assortment list before remove one
+      cy.get("[data-fs-bp-product-assortment-table]", {
         timeout: TEST_CONFIG.TIMEOUTS.PAGE_LOAD,
       }).should("exist");
 
-      // Find remove collection icon button and click it
+      // Find remove product assortment icon button and click it
       cy.get("[data-fs-bp-table] [data-fs-bp-table-row]")
-        .contains(COLLECTION_UNDER_TEST)
+        .contains(PRODUCT_ASSORTMENT_UNDER_TEST)
         .closest("[data-fs-bp-table-row]")
-        .find("[aria-label='Remove collections']")
+        .find("[aria-label='Remove product assortment']")
         .click();
 
       // Check if delete drawer was opened
-      cy.get("[data-fs-bp-remove-collections-drawer]")
+      cy.get("[data-fs-bp-remove-product-assortment-drawer]")
         .as("deleteDrawer")
         .should("be.visible");
       cy.get("@deleteDrawer")
         .find("[data-fs-bp-basic-drawer-heading]")
-        .contains("Remove collection from unit")
+        .contains("Remove product assortment from unit")
         .should("be.visible");
 
       // Find remove confirmation button and click it
@@ -194,13 +198,13 @@ describe(
       // Wait for page refresh
       cy.wait(TEST_CONFIG.TIMEOUTS.RETRY_DELAY);
 
-      // Check if the list was updated without removed collection
+      // Check if the list was updated without removed product assortment
       cy.get("@deleteDrawer").should("not.exist");
-      cy.get("[data-fs-bp-collection-table]", {
+      cy.get("[data-fs-bp-product-assortment-table]", {
         timeout: TEST_CONFIG.TIMEOUTS.PAGE_LOAD,
       })
         .should("exist")
-        .contains(COLLECTION_UNDER_TEST)
+        .contains(PRODUCT_ASSORTMENT_UNDER_TEST)
         .should("not.exist");
     });
   }

package/cypress/integration/profile.test.ts

@@ -29,7 +29,7 @@ describe("Profile", () => {
     cy.contains("Addresses").should("be.visible");
     cy.contains("Payment methods").should("be.visible");
     cy.contains("Credit cards").should("be.visible");
-    cy.contains("Collections").should("be.visible");
+    cy.contains("Product assortment").should("be.visible");
     cy.contains("PO numbers").should("be.visible");
     cy.contains("Cost centers").should("be.visible");
     cy.contains("Releases").should("be.visible");

package/cypress/integration/users.test.ts

@@ -62,6 +62,13 @@ const fillUserForm = (
       .clear()
       .type(userData.EMAIL);
 
+    cy.get("label")
+      .contains("Phone number")
+      .parent()
+      .find("[data-fs-bp-input-text-input]")
+      .clear()
+      .type(userData.PHONE);
+
     cy.wait(500);
     // Fill the user role
     cy.get('[data-fs-bp-create-user-roles="true"]')
@@ -189,6 +196,7 @@ describe("Users", { retries: 2 }, () => {
     // Verify labels and buttons are present
     cy.contains("Name").should("be.visible");
     cy.contains("Email").should("be.visible");
+    cy.contains("Phone number").should("be.visible");
     cy.contains("Role").should("be.visible");
     cy.contains("Organizational Unit").should("be.visible");
     cy.contains("Edit").should("be.visible");
@@ -261,6 +269,7 @@ describe("Users", { retries: 2 }, () => {
     const updatedUserData = {
       NAME: `${USER_NAME} Updated`,
       EMAIL: USER_EMAIL,
+      PHONE: "(888) 888-8888",
       ROLE: TEST_DATA.USERS.NEW_USER.ROLE,
     };
 

package/package.json

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

package/plugin.config.js

@@ -36,8 +36,8 @@ module.exports = {
       path: "/pvt/organization-account/credit-cards/[orgUnitId]/[contractId]",
       appLayout: false,
     },
-    collections: {
-      path: "/pvt/organization-account/collections/[orgUnitId]/[contractId]",
+    productAssortment: {
+      path: "/pvt/organization-account/product-assortment/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     "po-numbers": {

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

@@ -22,7 +22,7 @@ export const BudgetRemainingBalance = ({
         <span data-fs-bp-budget-remaining-balance-label-used>
           {formatCurrency(Math.abs(used))}{" "}
           <span data-fs-bp-budget-remaining-balance-label-used-total>
-            of {formatCurrency(remaining)} used
+            of {formatCurrency(total)} used
           </span>
         </span>
         <BudgetProgressBar

package/src/features/{collections/clients/CollectionsClient.ts → product-assortment/clients/ProductAssortmentClient.ts}

@@ -2,9 +2,10 @@ import { Client } from "../../shared/clients/Client";
 import { getApiUrl } from "../../shared/utils";
 
 import type {
-  AddCollectionResponse,
-  GetCollectionsFromContractResponse,
-  GetCollectionsFromScopeResponse,
+  AddProductAssortmentPayload,
+  AddProductAssortmentResponse,
+  GetProductAssortmentFromContractResponse,
+  GetProductAssortmentFromScopeResponse,
 } from "../types";
 
 type DefaultArgs = {
@@ -13,18 +14,15 @@ type DefaultArgs = {
   unitId: string;
 };
 
-export type UpdateCollectionsPayload = Array<{ name: string }>;
-export type AddCollectionsPayload = Array<{ name: string }>;
-
-export class CollectionsClient extends Client {
+export class ProductAssortmentClient extends Client {
   constructor() {
     super(getApiUrl());
   }
 
-  getCollectionFromContract(args: DefaultArgs & { name?: string }) {
+  getProductAssortmentFromContract(args: DefaultArgs & { name?: string }) {
     const { contractId, cookie, name, unitId } = args;
 
-    return this.get<GetCollectionsFromContractResponse["collections"]>(
+    return this.get<GetProductAssortmentFromContractResponse["collections"]>(
       `customers/${contractId}/units/${unitId}/collections`,
       {
         headers: { Cookie: cookie },
@@ -33,7 +31,7 @@ export class CollectionsClient extends Client {
     );
   }
 
-  getCollectionsListInScope(
+  getProductAssortmentListInScope(
     args: DefaultArgs & {
       unitId: string;
       name?: string;
@@ -43,7 +41,7 @@ export class CollectionsClient extends Client {
   ) {
     const { contractId, cookie, name, unitId, filterByScope } = args;
 
-    return this.get<GetCollectionsFromScopeResponse["collections"]>(
+    return this.get<GetProductAssortmentFromScopeResponse["collections"]>(
       `customers/${contractId}/units/${unitId}/collections`,
       {
         headers: { Cookie: cookie },
@@ -56,12 +54,12 @@ export class CollectionsClient extends Client {
     );
   }
 
-  addCollectionsToScope(
-    args: DefaultArgs & { unitId: string; data: AddCollectionsPayload }
+  addProductAssortmentToScope(
+    args: DefaultArgs & { unitId: string; data: AddProductAssortmentPayload }
   ) {
     const { contractId, cookie, unitId, data } = args;
 
-    return this.post<AddCollectionResponse, AddCollectionsPayload>(
+    return this.post<AddProductAssortmentResponse, AddProductAssortmentPayload>(
       `/customers/${contractId}/units/${unitId}/collections`,
       data,
       {
@@ -70,13 +68,13 @@ export class CollectionsClient extends Client {
     );
   }
 
-  removeCollectionFromScope(
-    args: DefaultArgs & { unitId: string; collectionId: string }
+  removeProductAssortmentFromScope(
+    args: DefaultArgs & { unitId: string; productAssortmentId: string }
   ) {
-    const { contractId, unitId, cookie, collectionId } = args;
+    const { contractId, unitId, cookie, productAssortmentId } = args;
 
     return this.delete(
-      `/customers/${contractId}/units/${unitId}/collections/${collectionId}`,
+      `/customers/${contractId}/units/${unitId}/collections/${productAssortmentId}`,
       undefined,
       {
         headers: { Cookie: cookie },
@@ -85,5 +83,5 @@ export class CollectionsClient extends Client {
   }
 }
 
-const collectionsClient = new CollectionsClient();
-export { collectionsClient };
+const productAssortmentClient = new ProductAssortmentClient();
+export { productAssortmentClient };

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

@@ -0,0 +1,144 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { Link, useUI } from "@faststore/ui";
+
+import {
+  BasicDrawer,
+  Icon,
+  InternalSearch,
+  Paginator,
+} from "../../../shared/components";
+import { useBuyerPortal } from "../../../shared/hooks";
+import { useAddProductAssortmentToScope } from "../../hooks/useAddProductAssortmentToScope";
+import { AddProductAssortmentDrawerTable } from "../table/AddProductAssortmentDrawerTable";
+
+import type {
+  AddProductAssortmentDrawerProps,
+  ProductAssortmentSummary,
+} from "../../types";
+
+export const PAGE_SIZE = 10;
+
+export const AddProductAssortmentDrawer = ({
+  close,
+  productAssortment,
+  ...props
+}: AddProductAssortmentDrawerProps) => {
+  const { pushToast } = useUI();
+  const [drawerSearch, setDrawerSearch] = useState("");
+  const { currentOrgUnit, currentContract } = useBuyerPortal();
+  const { reload } = useRouter();
+
+  const unitId = currentOrgUnit?.id;
+  const contractId = currentContract?.id;
+  const isLoading = false;
+
+  useEffect(() => {
+    setDrawerSearch("");
+  }, [props.isOpen]);
+
+  const drawerProductAssortment = useMemo(() => {
+    return productAssortment.filter((p) =>
+      p.name.toLowerCase().includes(drawerSearch.toLowerCase())
+    );
+  }, [productAssortment, drawerSearch]);
+
+  const addProductAssortmentMutation = useAddProductAssortmentToScope();
+
+  const [selectedAssortment, setSelectedAssortment] = useState<
+    ProductAssortmentSummary[]
+  >([]);
+
+  const handleSuccess = async () => {
+    await addProductAssortmentMutation.mutate({
+      unitId: unitId ?? "",
+      contractId: contractId ?? "",
+      data: selectedAssortment.map((s) => ({ name: s.name })),
+    });
+
+    pushToast({
+      message: "Product assortment added successfully",
+      status: "INFO",
+    });
+
+    close();
+    reload();
+  };
+
+  return (
+    <BasicDrawer
+      data-fs-bp-add-product-assortment-drawer
+      id="basicDrawer"
+      close={close}
+      {...props}
+    >
+      <BasicDrawer.Heading title="Add product assortment" onClose={close} />
+
+      <BasicDrawer.Body>
+        <span data-fs-bp-add-product-assortment-text-drawer>
+          Add product assortment to <Link href="#">{currentOrgUnit?.name}</Link>
+        </span>
+
+        <div data-fs-bp-add-product-assortment-wrapper>
+          <InternalSearch
+            textSearch={(searchTerm) => {
+              setDrawerSearch(searchTerm);
+            }}
+          />
+
+          <Paginator.Counter
+            total={drawerProductAssortment.length}
+            itemsLength={drawerProductAssortment.length}
+          />
+        </div>
+        <section>
+          {drawerProductAssortment.length ? (
+            <div>
+              <AddProductAssortmentDrawerTable
+                data={drawerProductAssortment}
+                onChange={setSelectedAssortment}
+              />
+              {drawerProductAssortment.length > 0 && (
+                <div data-fs-bp-drawer-product-assortment-paginator>
+                  {drawerProductAssortment.length > 0 ? (
+                    <Paginator.NextPageButton>
+                      {isLoading ? "Loading" : "Load More"}
+                    </Paginator.NextPageButton>
+                  ) : (
+                    <span />
+                  )}
+
+                  <Paginator.Counter
+                    total={drawerProductAssortment.length}
+                    itemsLength={drawerProductAssortment.length}
+                  />
+                </div>
+              )}
+            </div>
+          ) : (
+            <div data-fs-bp-add-product-assortment-drawer-empty-state>
+              <Icon name="Shapes" />
+              <p>No product assortment found</p>
+            </div>
+          )}
+        </section>
+      </BasicDrawer.Body>
+      <BasicDrawer.Footer data-fs-bp-add-product-assortment-drawer-footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          disabled={selectedAssortment.length === 0}
+          onClick={handleSuccess}
+          isLoading={addProductAssortmentMutation.isLoading}
+        >
+          Add
+          {selectedAssortment.length > 0 && `(${selectedAssortment.length})`}
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};