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

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

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

@@ -1,27 +0,0 @@
-import { QueryOptions, useQuery } from "../../shared/hooks";
-import { getCollectionsFromScopeService } from "../services/get-collections-from-scope.service";
-
-export const useGetCollectionsFromScope = (
-  params: { unitId: string; contractId: string; page: number; name?: string },
-  options?: QueryOptions<AwaitedType<typeof getCollectionsFromScopeService>>
-) => {
-  const { data, error, isLoading, refetch } = useQuery(
-    `collections/${params.unitId}/${params.contractId}/${params.name}`,
-    ({ cookie }) => {
-      return getCollectionsFromScopeService({
-        ...params,
-        cookie,
-        filterByScope: false,
-      });
-    },
-    options
-  );
-
-  return {
-    collections: data ?? [],
-    total: data?.length ?? 0,
-    hasCollectionsError: error,
-    isCollectionsLoading: isLoading,
-    refetchCollections: refetch,
-  };
-};

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

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

package/src/features/collections/layouts/index.ts

@@ -1,4 +0,0 @@
-export {
-  CollectionsLayout,
-  type CollectionsLayoutProps,
-} from "./CollectionsLayout/CollectionsLayout";

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

@@ -1,15 +0,0 @@
-import {
-  AddCollectionsPayload,
-  collectionsClient,
-} from "../clients/CollectionsClient";
-
-export const addCollectionsToScopeService = async (params: {
-  contractId: string;
-  cookie: string;
-  unitId: string;
-  data: AddCollectionsPayload;
-}) => {
-  const response = await collectionsClient.addCollectionsToScope(params);
-
-  return response;
-};

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

@@ -1,9 +0,0 @@
-import { collectionsClient } from "../clients/CollectionsClient";
-
-export const getCollectionsFromContractService = async (
-  params: Parameters<typeof collectionsClient.getCollectionFromContract>[0]
-) => {
-  const data = await collectionsClient.getCollectionFromContract(params);
-
-  return data;
-};

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

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

package/src/features/collections/services/remove-collections-from-scope.ts

@@ -1,7 +0,0 @@
-import { collectionsClient } from "../clients/CollectionsClient";
-
-export const removeCollectionFromScopeService = async (
-  params: Parameters<typeof collectionsClient.removeCollectionFromScope>[0]
-) => {
-  await collectionsClient.removeCollectionFromScope(params);
-};

package/src/features/collections/types/index.ts

@@ -1,20 +0,0 @@
-export type CollectionsSummary = {
-  id: string;
-  name: string;
-};
-
-export type ContractCollection = CollectionsSummary & { isEnabled: boolean };
-export type ScopeCollection = CollectionsSummary & { isEnabled: boolean };
-
-export type GetCollectionsFromContractResponse = {
-  collections: Array<ContractCollection>;
-};
-
-export type GetCollectionsFromScopeResponse = {
-  collections: Array<ScopeCollection>;
-};
-
-export type AddCollectionResponse = {
-  message: string;
-  addedCollections: string[];
-};