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

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

package/src/features/collections/components/AddCollectionsDrawer/AddCollectionsDrawer.tsx

@@ -1,146 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { Link, useUI } from "@faststore/ui";
-
-import {
-  type BasicDrawerProps,
-  BasicDrawer,
-  Icon,
-  InternalSearch,
-  Paginator,
-} from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
-import { useAddCollectionsToScope } from "../../hooks/useAddCollectionsToScope";
-import { AddCollectionsDrawerTable } from "../table/AddCollectionsDrawerTable";
-
-import type { CollectionsSummary, ScopeCollection } from "../../types";
-
-export type AddCollectionsDrawerProps = Omit<BasicDrawerProps, "children"> & {
-  collections: ScopeCollection[];
-};
-
-export const PAGE_SIZE = 10;
-
-export const AddCollectionsDrawer = ({
-  close,
-  collections,
-  ...props
-}: AddCollectionsDrawerProps) => {
-  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 drawerCollections = useMemo(() => {
-    return collections.filter((c) =>
-      c.name.toLowerCase().includes(drawerSearch.toLowerCase())
-    );
-  }, [collections, drawerSearch]);
-
-  const addColectionMutation = useAddCollectionsToScope();
-
-  const [selectedCollections, setSelectedCollections] = useState<
-    CollectionsSummary[]
-  >([]);
-
-  const handleSuccess = async () => {
-    await addColectionMutation.mutate({
-      unitId: unitId ?? "",
-      contractId: contractId ?? "",
-      data: selectedCollections.map((s) => ({ name: s.name })),
-    });
-
-    pushToast({
-      message: "Collections added successfully",
-      status: "INFO",
-    });
-
-    close();
-    reload();
-  };
-
-  return (
-    <BasicDrawer
-      data-fs-bp-add-collections-drawer
-      id="basicDrawer"
-      close={close}
-      {...props}
-    >
-      <BasicDrawer.Heading title="Add collections" onClose={close} />
-
-      <BasicDrawer.Body>
-        <span data-fs-bp-add-collections-text-drawer>
-          Add colections to <Link href="#">{currentOrgUnit?.name}</Link>
-        </span>
-
-        <div data-fs-bp-add-collections-wrapper>
-          <InternalSearch
-            textSearch={(searchTerm) => {
-              setDrawerSearch(searchTerm);
-            }}
-          />
-
-          <Paginator.Counter
-            total={drawerCollections.length}
-            itemsLength={drawerCollections.length}
-          />
-        </div>
-        <section>
-          {drawerCollections.length ? (
-            <div>
-              <AddCollectionsDrawerTable
-                data={drawerCollections}
-                onChange={setSelectedCollections}
-              />
-              {drawerCollections.length > 0 && (
-                <div data-fs-bp-drawer-collections-paginator>
-                  {drawerCollections.length > 0 ? (
-                    <Paginator.NextPageButton>
-                      {isLoading ? "Loading" : "Load More"}
-                    </Paginator.NextPageButton>
-                  ) : (
-                    <span />
-                  )}
-
-                  <Paginator.Counter
-                    total={drawerCollections.length}
-                    itemsLength={drawerCollections.length}
-                  />
-                </div>
-              )}
-            </div>
-          ) : (
-            <div data-fs-bp-add-collections-drawer-empty-state>
-              <Icon name="Shapes" />
-              <p>No collections found</p>
-            </div>
-          )}
-        </section>
-      </BasicDrawer.Body>
-      <BasicDrawer.Footer data-fs-bp-add-collections-drawer-footer>
-        <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
-        </BasicDrawer.Button>
-        <BasicDrawer.Button
-          variant="confirm"
-          disabled={selectedCollections.length === 0}
-          onClick={handleSuccess}
-          isLoading={addColectionMutation.isLoading}
-        >
-          Add
-          {selectedCollections.length > 0 && `(${selectedCollections.length})`}
-        </BasicDrawer.Button>
-      </BasicDrawer.Footer>
-    </BasicDrawer>
-  );
-};

package/src/features/collections/components/CollectionsTable/CollectionsTable.tsx

@@ -1,94 +0,0 @@
-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 { CollectionSelectedProps } from "../../layouts/CollectionsLayout/CollectionsLayout";
-import { ScopeCollection } from "../../types";
-import { RemoveCollectionDrawer } from "../RemoveCollectionDrawer/RemoveCollectionDrawer";
-
-export function CollectionsTable({
-  collections,
-}: {
-  collections: ScopeCollection[];
-}) {
-  const [collectionSelected, setCollectionSelected] =
-    useState<CollectionSelectedProps | null>();
-
-  const {
-    open: openRemoveCollectionDrawer,
-    isOpen: isRemoveCollectionDrawerOpen,
-    ...removeCollectionDrawerProps
-  } = useDrawerProps();
-
-  const searchParams = useSearchParams();
-
-  const searchTerm = searchParams.get("search");
-
-  const enabledCollections = collections.filter(
-    (c) =>
-      c.isEnabled &&
-      (!searchTerm ||
-        (searchTerm && c.name.toLowerCase().includes(searchTerm.toString())))
-  );
-  const removeDisabled = enabledCollections.length === 1;
-  const removeTooltipContent = removeDisabled
-    ? "This collection can’t be removed. Each unit must have at least one active collection. Add another one to proceed with the removal."
-    : "Remove from unit";
-
-  function handleRemoveSelectedCollection(collection: CollectionSelectedProps) {
-    setCollectionSelected(collection);
-    openRemoveCollectionDrawer();
-  }
-
-  const columns = getTableColumns({ actionsLength: 1 });
-
-  return (
-    <div data-fs-bp-collection-table>
-      <Table layoutFixed>
-        <Table.Head columns={columns} />
-        <Table.Body>
-          {collections.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-collections-row-action-button
-                    icon={<Icon name={"MinusCircle"} width={20} height={20} />}
-                    aria-label="Remove collections"
-                    disabled={removeDisabled}
-                    onClick={() =>
-                      handleRemoveSelectedCollection({
-                        id: item.id,
-                        name: item.name,
-                      })
-                    }
-                  />
-                </Tooltip>
-              }
-            />
-          ))}
-        </Table.Body>
-      </Table>
-      {collectionSelected && (
-        <RemoveCollectionDrawer
-          isOpen={isRemoveCollectionDrawerOpen}
-          collection={collectionSelected}
-          {...removeCollectionDrawerProps}
-        />
-      )}
-    </div>
-  );
-}

package/src/features/collections/components/CollectionsTable/collections-table.scss

@@ -1,140 +0,0 @@
-[data-fs-bp-collection-table] {
-	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-	@import "../AddCollectionsDrawer/add-collections-drawer.scss";
-	@import "../../../shared/components/Table/table.scss";
-
-	width: 100%;
-
-	[data-fs-table] {
-		overflow-x: visible;
-	}
-
-	[data-fs-bp-head-row] {
-		border-bottom: var(--fs-table-bordered-border-width) solid
-			var(--fs-table-bordered-border-color);
-
-		color: #5c5c5c;
-		height: var(--fs-spacing-8);
-	}
-
-	[data-fs-table-head="true"] {
-		[data-fs-bp-head-row="true"] {
-			&:hover {
-				background-color: initial;
-			}
-		}
-	}
-
-	[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-collections-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));
-		}
-	}
-
-	[data-fs-bp-table-row-options] {
-		[data-fs-collections-row-action-button] {
-			margin: 0 var(--fs-spacing-1);
-			border-radius: var(--fs-border-radius-pill);
-			width: var(--fs-spacing-5);
-			aspect-ratio: 1;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			cursor: pointer;
-
-			&:disabled {
-				cursor: not-allowed;
-
-				[data-fs-icon] {
-					color: #adadad;
-
-					&[data-fs-icon-loading="true"] {
-						@keyframes rotate {
-							from {
-								transform: rotate(0deg);
-							}
-							to {
-								transform: rotate(360deg);
-							}
-						}
-						animation: rotate 2s linear infinite;
-					}
-				}
-			}
-
-			&:hover {
-				background-color: #e0e0e0;
-			}
-
-			&:active {
-				opacity: 0.8;
-			}
-
-			[data-fs-icon] {
-				color: #000;
-			}
-		}
-	}
-
-	[data-fs-table-row] {
-		height: var(--fs-spacing-8);
-
-		&:hover {
-			background-color: var(--fs-color-neutral-bkg);
-		}
-
-		[data-fs-table-cell="header"] {
-			display: flex;
-			height: var(--fs-spacing-8);
-			cursor: pointer;
-		}
-
-		[data-fs-bp-table-row-options] {
-			width: 3rem;
-		}
-
-		[data-fs-table-cell="data"] {
-			padding: var(--fs-spacing-0);
-		}
-	}
-
-	[data-fs-bp-text-medium] {
-		font-family: Inter;
-		font-weight: var(--fs-text-weight-medium);
-		font-size: var(--fs-text-size-1);
-		line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-		letter-spacing: -1%;
-	}
-}

package/src/features/collections/components/RemoveCollectionDrawer/remove-collection-drawer.scss

@@ -1,15 +0,0 @@
-[data-fs-bp-remove-collections-drawer] {
-  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
-
-  span {
-    display: block;
-    color: var(--fs-color-neutral-7);
-    margin-bottom: 1.25rem;
-  }
-
-  [data-fs-bp-remove-collections-checkbox-wrapper] {
-    display: flex;
-    align-items: center;
-    gap: var(--fs-spacing-1);
-  }
-}

package/src/features/collections/components/index.tsx

@@ -1,5 +0,0 @@
-export {
-  AddCollectionsDrawer,
-  type AddCollectionsDrawerProps,
-} from "./AddCollectionsDrawer/AddCollectionsDrawer";
-export { AddCollectionsDrawerTable } from "./table/AddCollectionsDrawerTable";

package/src/features/collections/components/table/add-collections-drawer-table.scss

@@ -1,71 +0,0 @@
-[data-fs-bp-add-collections-drawer-table] {
-	@import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
-	@import "../../../shared/components/Table/table.scss";
-
-	margin-top: 1.25rem;
-	[data-fs-table-content] {
-		table-layout: initial;
-	}
-
-	[data-fs-table-head="true"] {
-		[data-fs-table-row="true"] {
-			border-bottom: 1px solid #d6d6d6;
-
-			[data-fs-table-cell="header"] {
-				height: 2.5rem;
-				padding: 0 0.875rem;
-
-				font-weight: var(--fs-text-weight-regular);
-				color: #5c5c5c;
-				font-size: var(--fs-text-size-1);
-			}
-		}
-	}
-
-	[data-fs-table-body="true"] {
-		[data-fs-table-row="true"] {
-			&[data-selected="true"] {
-				background-color: #f1f8fe;
-			}
-
-			&:last-child {
-				border-bottom: 1px solid #d6d6d6;
-			}
-
-			[data-fs-table-cell] {
-				height: 3.5rem;
-				font-weight: var(--fs-text-weight-medium);
-				color: #1f1f1f;
-				font-size: var(--fs-text-size-1);
-				padding: 0 0.875rem;
-				text-align: left;
-
-				[data-fs-bp-add-collections-drawer-cell-span] {
-					display: flex;
-					align-items: center;
-				}
-
-				&:first-child {
-					width: 2.5rem;
-					text-align: center;
-
-					> svg {
-						margin: 0;
-					}
-				}
-			}
-		}
-	}
-
-	[data-fs-skeleton] {
-		display: inline-block;
-	}
-
-	[data-fs-tooltip] {
-		--fs-tooltip-background: #1f1f1f;
-	}
-
-	[data-fs-bp-collections-checkbox] {
-		margin: 0 auto;
-	}
-}

package/src/features/collections/hooks/useAddCollectionsToScope.ts

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

package/src/features/collections/hooks/useGetCollectionsFromContract.ts

@@ -1,26 +0,0 @@
-import { QueryOptions, useQuery } from "../../shared/hooks";
-import { getCollectionsFromContractService } from "../services/get-collections-from-contract.service";
-
-export const useGetCollectionsFromContract = (
-  unitId: string,
-  contractId: string,
-  options?: QueryOptions<AwaitedType<typeof getCollectionsFromContractService>>
-) => {
-  const { data, error, isLoading, refetch } = useQuery(
-    `collections/get-collections-from-contract`,
-    ({ cookie }) =>
-      getCollectionsFromContractService({
-        unitId,
-        contractId,
-        cookie,
-      }),
-    options
-  );
-
-  return {
-    collections: data ?? [],
-    hasCollectionsError: error,
-    isCollectionsLoading: isLoading,
-    refetchCollections: refetch,
-  };
-};