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

package/src/features/{collections/components/AddCollectionsDrawer/add-collections-drawer.scss → product-assortment/components/AddProductAssortmentDrawer/add-product-assortment-drawer.scss}

@@ -1,25 +1,24 @@
-@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
-@import "../../components/table/add-collections-drawer-table.scss";
-
-[data-fs-bp-add-collections-drawer] {
-  @import "../../../shared/components/InputText/input-text.scss";
+[data-fs-bp-add-product-assortment-drawer] {
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+  @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @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-collections-text-drawer] {
+  [data-fs-bp-add-product-assortment-text-drawer] {
     display: block;
     color: var(--fs-color-neutral-5);
     margin-bottom: 1.25rem;
   }
 
-  [data-fs-bp-add-collections-wrapper] {
+  [data-fs-bp-add-product-assortment-wrapper] {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -36,7 +35,7 @@
     }
   }
 
-  [data-fs-bp-add-collections-drawer-empty-state] {
+  [data-fs-bp-add-product-assortment-drawer-empty-state] {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -53,7 +52,7 @@
     }
   }
 
-  [data-fs-bp-drawer-collections-paginator] {
+  [data-fs-bp-drawer-product-assortment-paginator] {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -61,7 +60,7 @@
     padding: var(--fs-spacing-2) 0;
   }
 
-  [data-fs-bp-add-collections-drawer-footer] {
+  [data-fs-bp-add-product-assortment-drawer-footer] {
     justify-content: end;
     gap: 1.25rem;
   }

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

@@ -0,0 +1,99 @@
+import { useState } from "react";
+
+import { useSearchParams } from "next/navigation";
+
+import { IconButton, Tooltip } from "@faststore/ui";
+
+import { Icon, Table } from "../../../shared/components";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
+import { useDrawerProps } from "../../../shared/hooks";
+import { RemoveProductAssortmentDrawer } from "../RemoveProductAssortmentDrawer/RemoveProductAssortmentDrawer";
+
+import type {
+  ProductAssortmentSelectedProps,
+  ScopeProductAssortment,
+} from "../../types";
+
+export function ProductAssortmentTable({
+  productAssortment,
+}: {
+  productAssortment: ScopeProductAssortment[];
+}) {
+  const [assortmentSelected, setAssortmentSelected] =
+    useState<ProductAssortmentSelectedProps | null>();
+
+  const {
+    open: openRemoveProductAssortmentDrawer,
+    isOpen: isRemoveProductAssortmentDrawerOpen,
+    ...removeProductAssortmentDrawerProps
+  } = useDrawerProps();
+
+  const searchParams = useSearchParams();
+
+  const searchTerm = searchParams.get("search");
+
+  const enabledAssortment = productAssortment.filter(
+    (a) =>
+      a.isEnabled &&
+      (!searchTerm ||
+        (searchTerm && a.name.toLowerCase().includes(searchTerm.toString())))
+  );
+  const removeDisabled = enabledAssortment.length === 1;
+  const removeTooltipContent = removeDisabled
+    ? "This product assortment can’t be removed. Each unit must have at least one active product assortment. Add another one to proceed with the removal."
+    : "Remove from unit";
+
+  function handleRemoveSelectedAssortment(
+    productAssortment: ProductAssortmentSelectedProps
+  ) {
+    setAssortmentSelected(productAssortment);
+    openRemoveProductAssortmentDrawer();
+  }
+
+  const columns = getTableColumns({ actionsLength: 1 });
+
+  return (
+    <div data-fs-bp-product-assortment-table>
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+        <Table.Body>
+          {productAssortment.map((item) => (
+            <Table.Row
+              iconName="Shapes"
+              title={item.name}
+              key={item.id}
+              iconSize={24}
+              searchTerm={searchTerm ?? undefined}
+              actionIcons={
+                <Tooltip
+                  content={removeTooltipContent}
+                  placement={"left-center"}
+                >
+                  <IconButton
+                    data-fs-product-assortment-row-action-button
+                    icon={<Icon name={"MinusCircle"} width={20} height={20} />}
+                    aria-label="Remove product assortment"
+                    disabled={removeDisabled}
+                    onClick={() =>
+                      handleRemoveSelectedAssortment({
+                        id: item.id,
+                        name: item.name,
+                      })
+                    }
+                  />
+                </Tooltip>
+              }
+            />
+          ))}
+        </Table.Body>
+      </Table>
+      {assortmentSelected && (
+        <RemoveProductAssortmentDrawer
+          isOpen={isRemoveProductAssortmentDrawerOpen}
+          productAssortment={assortmentSelected}
+          {...removeProductAssortmentDrawerProps}
+        />
+      )}
+    </div>
+  );
+}

package/src/features/product-assortment/components/ProductAssortmentTable/product-assortment-table.scss

@@ -0,0 +1,45 @@
+[data-fs-bp-product-assortment-table] {
+	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+	@import "../AddProductAssortmentDrawer/add-product-assortment-drawer.scss";
+	@import "../../../shared/components/Table/table.scss";
+
+	width: 100%;
+
+	[data-fs-tooltip] {
+		--fs-tooltip-background: #1f1f1f;
+		border-bottom: none;
+		text-wrap: balance;
+		text-align: justify;
+
+		[data-fs-tooltip-placement="left-center"] {
+			[data-fs-tooltip-indicator="true"] {
+				margin-left: -0.1%;
+			}
+		}
+		[data-fs-tooltip-placement="top-center"] {
+			[data-fs-tooltip-indicator="true"] {
+				margin-top: -1%;
+			}
+		}
+	}
+
+	[data-fs-product-assortment-row-action-button] {
+		width: var(--fs-spacing-6);
+		height: var(--fs-spacing-6);
+		display: inline-flex;
+		border-radius: var(--fs-border-radius-pill);
+		justify-content: center;
+		align-items: center;
+
+		&:hover:not(:disabled) {
+			background-color: #ebebeb;
+			cursor: pointer;
+		}
+
+		[data-fs-button-icon] {
+			display: block;
+			width: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+			height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+		}
+	}
+}

package/src/features/{collections/components/RemoveCollectionDrawer/RemoveCollectionDrawer.tsx → product-assortment/components/RemoveProductAssortmentDrawer/RemoveProductAssortmentDrawer.tsx}

@@ -2,35 +2,32 @@ import { useRouter } from "next/router";
 
 import { Link, useUI } from "@faststore/ui";
 
-import { BasicDrawer, BasicDrawerProps } from "../../../shared/components";
+import { BasicDrawer } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
-import { useRemoveCollectionsFromScope } from "../../hooks/useRemoveCollectionsFromScope";
-import { CollectionSelectedProps } from "../../layouts/CollectionsLayout/CollectionsLayout";
+import { useRemoveProductAssortmentFromScope } from "../../hooks/useRemoveProductAssortmentFromScope";
 
-export type RemoveCollectionDrawerProps = Omit<BasicDrawerProps, "children"> & {
-  collection: CollectionSelectedProps;
-};
+import type { RemoveProductAssortmentDrawerProps } from "../../types";
 
-export function RemoveCollectionDrawer({
+export function RemoveProductAssortmentDrawer({
   close,
-  collection,
+  productAssortment,
   ...props
-}: RemoveCollectionDrawerProps) {
+}: RemoveProductAssortmentDrawerProps) {
   const { pushToast } = useUI();
 
   const { reload } = useRouter();
-  const removeCollectionMutation = useRemoveCollectionsFromScope();
+  const removeAssortmentMutation = useRemoveProductAssortmentFromScope();
   const { currentOrgUnit, currentContract } = useBuyerPortal();
 
   async function handleSuccess() {
-    await removeCollectionMutation.mutate({
-      collectionId: collection.id,
+    await removeAssortmentMutation.mutate({
+      productAssortmentId: productAssortment.id,
       unitId: currentOrgUnit?.id ?? "",
       contractId: currentContract?.id ?? "",
     });
 
     pushToast({
-      message: "Collection access removed successfully",
+      message: "Product assortment access removed successfully",
       status: "INFO",
     });
     close();
@@ -39,34 +36,38 @@ export function RemoveCollectionDrawer({
   }
 
   return (
-    <BasicDrawer data-fs-bp-remove-collections-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-remove-product-assortment-drawer
+      close={close}
+      {...props}
+    >
       <BasicDrawer.Heading
-        title="Remove collection from unit"
+        title="Remove product assortment from unit"
         onClose={close}
       />
 
       <BasicDrawer.Body>
         <span>
-          Remove <Link href="#">{collection.name}</Link> contract from
+          Remove <Link href="#">{productAssortment.name}</Link> contract from
           <Link href="#"> {currentOrgUnit?.name}</Link> organizational unit?
         </span>
         <span>
           This action will prevent users in this unit from accessing this
-          collection during store navigation and checkout.
+          product assortment during store navigation and checkout.
         </span>
       </BasicDrawer.Body>
 
-      <BasicDrawer.Footer data-fs-bp-add-collections-drawer-footer>
+      <BasicDrawer.Footer data-fs-bp-add-product-assortment-drawer-footer>
         <BasicDrawer.Button
           variant="ghost"
-          disabled={removeCollectionMutation.isLoading}
+          disabled={removeAssortmentMutation.isLoading}
           onClick={close}
         >
           Cancel
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
-          isLoading={removeCollectionMutation.isLoading}
+          isLoading={removeAssortmentMutation.isLoading}
           onClick={handleSuccess}
         >
           Confirm

package/src/features/product-assortment/components/RemoveProductAssortmentDrawer/remove-product-assortment-drawer.scss

@@ -0,0 +1,9 @@
+[data-fs-bp-remove-product-assortment-drawer] {
+  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+
+  span {
+    display: block;
+    color: var(--fs-color-neutral-7);
+    margin-bottom: 1.25rem;
+  }
+}

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

@@ -0,0 +1,2 @@
+export { AddProductAssortmentDrawer } from "./AddProductAssortmentDrawer/AddProductAssortmentDrawer";
+export { AddProductAssortmentDrawerTable } from "./table/AddProductAssortmentDrawerTable";

package/src/features/{collections/components/table/AddCollectionsDrawerTable.tsx → product-assortment/components/table/AddProductAssortmentDrawerTable.tsx}

@@ -9,21 +9,21 @@ import {
 import { Checkbox } from "@faststore/ui";
 
 import { Table } from "../../../shared/components";
-import { CollectionsSummary } from "../../types";
 
 import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
+import type { ProductAssortmentSummary } from "../../types";
 
-interface AddCollectionsDrawerTableProps {
+interface AddProductAssortmentDrawerTableProps {
   loading?: boolean;
-  data: CollectionsSummary[];
-  onChange: Dispatch<SetStateAction<CollectionsSummary[]>>;
+  data: ProductAssortmentSummary[];
+  onChange: Dispatch<SetStateAction<ProductAssortmentSummary[]>>;
 }
 
-export const AddCollectionsDrawerTable = ({
+export const AddProductAssortmentDrawerTable = ({
   data,
   loading,
   onChange,
-}: AddCollectionsDrawerTableProps) => {
+}: AddProductAssortmentDrawerTableProps) => {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
   const allIds = useMemo(() => data.map((item) => item.id), [data]);
@@ -57,7 +57,7 @@ export const AddCollectionsDrawerTable = ({
       size: "2.5rem",
       label: (
         <Checkbox
-          data-fs-bp-collections-checkbox
+          data-fs-bp-product-assortment-checkbox
           checked={allSelected}
           partial={partiallySelected}
           onChange={handleSelectAll}
@@ -73,7 +73,7 @@ export const AddCollectionsDrawerTable = ({
   ];
 
   return (
-    <div data-fs-bp-add-collections-drawer-table>
+    <div data-fs-bp-add-product-assortment-drawer-table>
       <Table layoutFixed>
         <Table.Head columns={columns} />
         <Table.Body>
@@ -90,7 +90,7 @@ export const AddCollectionsDrawerTable = ({
                 prependColumns={
                   <Table.Cell align="center">
                     <Checkbox
-                      data-fs-bp-collections-checkbox
+                      data-fs-bp-product-assortment-checkbox
                       checked={selectedIds.includes(option.id)}
                       onChange={() => handleSelect(option.id)}
                     />

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

@@ -0,0 +1,14 @@
+[data-fs-bp-add-product-assortment-drawer-table] {
+	@import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+	@import "../../../shared/components/Table/table.scss";
+
+	margin-top: 1.25rem;
+
+	[data-fs-tooltip] {
+		--fs-tooltip-background: #1f1f1f;
+	}
+
+	[data-fs-bp-product-assortment-checkbox] {
+		margin: 0 auto;
+	}
+}

package/src/features/product-assortment/hooks/useAddProductAssortmentToScope.ts

@@ -0,0 +1,25 @@
+import { MutationOptions, useMutation } from "../../shared/hooks";
+import { addProductAssortmentToScopeService } from "../services/add-product-assortment-to-scope.service";
+
+export const useAddProductAssortmentToScope = (
+  options?: MutationOptions<
+    AwaitedType<typeof addProductAssortmentToScopeService>
+  >
+) => {
+  const mutation = useMutation<
+    AwaitedType<typeof addProductAssortmentToScopeService>,
+    Omit<
+      Parameters<typeof addProductAssortmentToScopeService>[0],
+      "cookie" | "customerId"
+    >
+  >(
+    (variables, clientContext) =>
+      addProductAssortmentToScopeService({
+        ...variables,
+        cookie: clientContext.cookie,
+      }),
+    options
+  );
+
+  return mutation;
+};

package/src/features/product-assortment/hooks/useRemoveProductAssortmentFromScope.ts

@@ -0,0 +1,26 @@
+import { MutationOptions, useMutation } from "../../shared/hooks";
+import { removeProductAssortmentFromScopeService } from "../services/remove-product-assortment-from-scope";
+
+export const useRemoveProductAssortmentFromScope = (
+  options?: MutationOptions<
+    AwaitedType<typeof removeProductAssortmentFromScopeService>
+  >
+) => {
+  const mutation = useMutation<
+    AwaitedType<typeof removeProductAssortmentFromScopeService>,
+    Omit<
+      Parameters<typeof removeProductAssortmentFromScopeService>[0],
+      "cookie" | "customerId"
+    >
+  >(
+    (variables, clientContext) =>
+      removeProductAssortmentFromScopeService({
+        ...variables,
+
+        cookie: clientContext.cookie,
+      }),
+    options
+  );
+
+  return mutation;
+};

package/src/features/{collections/layouts/CollectionsLayout/CollectionsLayout.tsx → product-assortment/layouts/ProductAssortmentLayout/ProductAssortmentLayout.tsx}

@@ -9,30 +9,21 @@ import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { useBuyerPortal, usePageItems } from "../../../shared/hooks";
 import { useDrawerProps } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
-import { AddCollectionsDrawer } from "../../components";
-import { CollectionsTable } from "../../components/CollectionsTable/CollectionsTable";
-import { ScopeCollection } from "../../types";
+import { AddProductAssortmentDrawer } from "../../components";
+import { ProductAssortmentTable } from "../../components/ProductAssortmentTable/ProductAssortmentTable";
 
-export interface CollectionSelectedProps {
-  id: string;
-  name: string;
-}
+import type {
+  ProductAssortmentLayoutProps,
+  ScopeProductAssortment,
+} from "../../types";
 
-export type CollectionsLayoutProps = {
-  initialCollections: ScopeCollection[];
-  drawerCollections: ScopeCollection[];
-  page: number;
-  search: string;
-  isContractEmpty: boolean;
-};
-
-export const CollectionsLayout = ({
-  initialCollections,
-  drawerCollections,
+export const ProductAssortmentLayout = ({
+  initialProductAssortment,
+  drawerProductAssortment,
   isContractEmpty,
   page,
   search,
-}: CollectionsLayoutProps) => {
+}: ProductAssortmentLayoutProps) => {
   const {
     currentOrgUnit: orgUnit,
     currentUser: user,
@@ -41,24 +32,24 @@ export const CollectionsLayout = ({
 
   const {
     isLoading,
-    items: collections,
+    items: productAssortment,
     searchTerm,
     setSearchTerm,
     increasePage,
-  } = usePageItems<ScopeCollection>({
-    initialItems: initialCollections,
+  } = usePageItems<ScopeProductAssortment>({
+    initialItems: initialProductAssortment,
     search,
     page,
   });
 
   const {
-    open: openAddCollectionDrawer,
-    isOpen: isOpenAddCollectionDrawer,
-    ...AddCollectionDrawerProps
+    open: openAddProductAssortmentDrawer,
+    isOpen: isOpenAddProductAssortmentDrawer,
+    ...addProductAssortmentDrawerProps
   } = useDrawerProps();
 
-  const enabledCollections = collections.filter((c) => c.isEnabled);
-  const hasAllCollections = drawerCollections.length === 0;
+  const enabledAssortment = productAssortment.filter((p) => p.isEnabled);
+  const hasAllAssortment = drawerProductAssortment.length === 0;
 
   return (
     <GlobalLayout>
@@ -74,22 +65,25 @@ export const CollectionsLayout = ({
           role: user?.role ?? "",
         }}
       >
-        <section data-fs-bp-collections-container>
-          <HeaderInside title="Collections">
+        <section data-fs-bp-product-assortment-container>
+          <HeaderInside title="Product assortment">
             {!isContractEmpty &&
-              (hasAllCollections ? (
+              (hasAllAssortment ? (
                 <Tooltip
                   content={
-                    "All available collections have already been added to this organizational unit"
+                    "All available product assortment have already been added to this organizational unit"
                   }
                   placement={"left-center"}
                 >
-                  <HeaderInside.Button aria-label="Add collection" disabled />
+                  <HeaderInside.Button
+                    aria-label="Add product assortment"
+                    disabled
+                  />
                 </Tooltip>
               ) : (
                 <HeaderInside.Button
-                  aria-label="Add collection"
-                  onClick={openAddCollectionDrawer}
+                  aria-label="Add product assortment"
+                  onClick={openAddProductAssortmentDrawer}
                 />
               ))}
           </HeaderInside>
@@ -97,27 +91,27 @@ export const CollectionsLayout = ({
           {isContractEmpty ? (
             <EmptyState
               iconName="Shapes"
-              title="This contract has no assigned collections."
+              title="This contract has no assigned product assortment."
               description="This means it has access to the entire product catalog of the store."
             />
           ) : (
-            <div data-fs-bp-collection-layout>
-              <div data-fs-collection-filter>
+            <div data-fs-bp-product-assortment-layout>
+              <div data-fs-product-assortment-filter>
                 <InternalSearch
                   defaultValue={searchTerm}
                   textSearch={setSearchTerm}
                 />
                 <Paginator.Counter
-                  total={enabledCollections.length}
-                  itemsLength={enabledCollections.length}
+                  total={enabledAssortment.length}
+                  itemsLength={enabledAssortment.length}
                 />
               </div>
 
               <section>
-                <CollectionsTable collections={collections} />
+                <ProductAssortmentTable productAssortment={productAssortment} />
 
-                <div data-fs-bp-collections-paginator>
-                  {enabledCollections.length > collections.length ? (
+                <div data-fs-bp-product-assortment-paginator>
+                  {enabledAssortment.length > productAssortment.length ? (
                     <Paginator.NextPageButton
                       onClick={increasePage}
                       disabled={isLoading}
@@ -129,8 +123,8 @@ export const CollectionsLayout = ({
                   )}
 
                   <Paginator.Counter
-                    total={enabledCollections.length}
-                    itemsLength={enabledCollections.length}
+                    total={enabledAssortment.length}
+                    itemsLength={enabledAssortment.length}
                   />
                 </div>
               </section>
@@ -138,11 +132,11 @@ export const CollectionsLayout = ({
           )}
         </section>
 
-        {isOpenAddCollectionDrawer && (
-          <AddCollectionsDrawer
-            collections={drawerCollections}
-            isOpen={isOpenAddCollectionDrawer}
-            {...AddCollectionDrawerProps}
+        {isOpenAddProductAssortmentDrawer && (
+          <AddProductAssortmentDrawer
+            productAssortment={drawerProductAssortment}
+            isOpen={isOpenAddProductAssortmentDrawer}
+            {...addProductAssortmentDrawerProps}
           />
         )}
       </ContractTabsLayout>

package/src/features/{collections/layouts/CollectionsLayout/collections-layout.scss → product-assortment/layouts/ProductAssortmentLayout/product-assortment-layout.scss}

@@ -1,11 +1,11 @@
-@import "../../components/RemoveCollectionDrawer/remove-collection-drawer.scss";
-@import "../../components/AddCollectionsDrawer/add-collections-drawer.scss";
+@import "../../components/RemoveProductAssortmentDrawer/remove-product-assortment-drawer.scss";
+@import "../../components/AddProductAssortmentDrawer/add-product-assortment-drawer.scss";
 
-[data-fs-bp-collections-container] {
+[data-fs-bp-product-assortment-container] {
   @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
   @import "@faststore/ui/src/components/molecules/Table/styles.scss";
 
-  @import "../../components/CollectionsTable/collections-table.scss";
+  @import "../../components/ProductAssortmentTable/product-assortment-table.scss";
 
   @import "../../../shared/components/InternalSearch/internal-search.scss";
   @import "../../../shared/components/HeaderInside/header-inside.scss";
@@ -41,7 +41,7 @@
     }
   }
 
-  [data-fs-bp-collection-layout] {
+  [data-fs-bp-product-assortment-layout] {
     display: flex;
     flex-direction: column;
     gap: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
@@ -56,7 +56,7 @@
     }
   }
 
-  [data-fs-collection-filter] {
+  [data-fs-product-assortment-filter] {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -73,7 +73,7 @@
     }
   }
 
-  [data-fs-bp-collections-paginator] {
+  [data-fs-bp-product-assortment-paginator] {
     display: flex;
     align-items: center;
     justify-content: space-between;

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

@@ -0,0 +1 @@
+export { ProductAssortmentLayout } from "./ProductAssortmentLayout/ProductAssortmentLayout";

package/src/features/product-assortment/services/add-product-assortment-to-scope.service.ts

@@ -0,0 +1,16 @@
+import { productAssortmentClient } from "../clients/ProductAssortmentClient";
+
+import type { AddProductAssortmentPayload } from "../types";
+
+export const addProductAssortmentToScopeService = async (params: {
+  contractId: string;
+  cookie: string;
+  unitId: string;
+  data: AddProductAssortmentPayload;
+}) => {
+  const response = await productAssortmentClient.addProductAssortmentToScope(
+    params
+  );
+
+  return response;
+};