@vtex/faststore-plugin-buyer-portal 1.0.28 → 1.0.30

package/package.json

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

package/plugin.config.js

@@ -17,16 +17,16 @@ module.exports = {
       path: "/user/[userId]",
       appLayout: false,
     },
+    profile: {
+      path: "/profile/[[...contractId]]",
+      appLayout: false,
+    },
 
     // Shared pages
     "org-units": {
       path: "/org-units/[[...orgUnitId]]",
       appLayout: false,
     },
-    profile: {
-      path: "/profile/[[...orgUnitId]]",
-      appLayout: false,
-    },
     contracts: {
       path: "/contracts/[[...orgUnitId]]",
       appLayout: false,

package/public/buyer-portal-icons.svg

@@ -211,17 +211,11 @@
       d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" />
   </symbol>
 
-
-  <symbol
-    id="Profile"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 14 14"
-    fill="none"
-  >
+  <symbol id="Profile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"
+    fill="none">
     <path
-      d="M7.00065 7.00114C6.08398 7.00114 5.29926 6.67475 4.64648 6.02197C3.99371 5.3692 3.66732 4.58447 3.66732 3.66781C3.66732 2.75114 3.99371 1.96642 4.64648 1.31364C5.29926 0.660862 6.08398 0.334473 7.00065 0.334473C7.91732 0.334473 8.70204 0.660862 9.35482 1.31364C10.0076 1.96642 10.334 2.75114 10.334 3.66781C10.334 4.58447 10.0076 5.3692 9.35482 6.02197C8.70204 6.67475 7.91732 7.00114 7.00065 7.00114ZM0.333984 13.6678V11.3345C0.333984 10.8623 0.455512 10.4282 0.698568 10.0324C0.941623 9.63656 1.26454 9.33447 1.66732 9.12614C2.52843 8.69559 3.40343 8.37267 4.29232 8.15739C5.18121 7.94211 6.08398 7.83447 7.00065 7.83447C7.91732 7.83447 8.8201 7.94211 9.70899 8.15739C10.5979 8.37267 11.4729 8.69559 12.334 9.12614C12.7368 9.33447 13.0597 9.63656 13.3027 10.0324C13.5458 10.4282 13.6673 10.8623 13.6673 11.3345V13.6678H0.333984Z"
-      fill="currentColor"
-    />
+      d="M6 6C5.16667 6 4.45833 5.70833 3.875 5.125C3.29167 4.54167 3 3.83333 3 3C3 2.16667 3.29167 1.45833 3.875 0.875C4.45833 0.291667 5.16667 0 6 0C6.83333 0 7.54167 0.291667 8.125 0.875C8.70833 1.45833 9 2.16667 9 3C9 3.83333 8.70833 4.54167 8.125 5.125C7.54167 5.70833 6.83333 6 6 6ZM0 12V10C0 9.68056 0.0868056 9.37847 0.260417 9.09375C0.434028 8.80903 0.673611 8.56944 0.979167 8.375C1.74306 7.93056 2.55063 7.59028 3.40188 7.35417C4.25313 7.11806 5.11771 7 5.99563 7C6.87354 7 7.73958 7.11806 8.59375 7.35417C9.44792 7.59028 10.2569 7.93056 11.0208 8.375C11.3264 8.55556 11.566 8.79167 11.7396 9.08333C11.9132 9.375 12 9.68056 12 10V12H0ZM1.5 10.5H10.5V10C10.5 9.92806 10.479 9.86271 10.4369 9.80396C10.3949 9.74507 10.3396 9.69931 10.2708 9.66667C9.63194 9.27778 8.95139 8.98611 8.22917 8.79167C7.50694 8.59722 6.76389 8.5 6 8.5C5.23611 8.5 4.49306 8.59722 3.77083 8.79167C3.04861 8.98611 2.36806 9.27778 1.72917 9.66667C1.65972 9.72222 1.60417 9.77583 1.5625 9.8275C1.52083 9.87931 1.5 9.93681 1.5 10V10.5ZM6.00437 4.5C6.41813 4.5 6.77083 4.35271 7.0625 4.05812C7.35417 3.76354 7.5 3.40937 7.5 2.99562C7.5 2.58187 7.35271 2.22917 7.05812 1.9375C6.76354 1.64583 6.40938 1.5 5.99563 1.5C5.58188 1.5 5.22917 1.64729 4.9375 1.94188C4.64583 2.23646 4.5 2.59063 4.5 3.00438C4.5 3.41813 4.64729 3.77083 4.94187 4.0625C5.23646 4.35417 5.59062 4.5 6.00437 4.5Z"
+      fill="currentColor" />
   </symbol>
 
   <symbol

package/src/clients/BuyerPortalClient.ts

@@ -16,7 +16,7 @@ class BuyerPortalClient extends Client {
   // Contracts
   getContractsByCustomerId(customerId: string, cookie: string) {
     return this.get<{ data: { contracts: ContractData[]; total: number } }>(
-      `contracts/${customerId}`,
+      `contracts/${customerId}/list`,
       {
         headers: {
           Cookie: cookie,
@@ -25,6 +25,25 @@ class BuyerPortalClient extends Client {
     );
   }
 
+  getContractsByOrgUnitId(orgUnitId: string, cookie: string) {
+    return this.get<{ contracts: ContractData[]; total: number }>(
+      `contracts/${orgUnitId}`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  getContractDetails(contractId: string, cookie: string) {
+    return this.get<{ contract: ContractData }>(`contract/${contractId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
   getContracts(
     cookie: string,
     params?: {
@@ -42,6 +61,24 @@ class BuyerPortalClient extends Client {
     });
   }
 
+  updateContractStatus(
+    data: { contractId: string; isActive: boolean },
+    cookie: string
+  ) {
+    const { contractId, isActive } = data;
+
+    return this.post<null, { isActive: boolean }>(
+      `contracts/status/${contractId}`,
+      { isActive },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+        data: { isActive },
+      }
+    );
+  }
+
   //Addresses
   getAddressesByCustomerId(customerId: string, cookie: string) {
     return this.get<{ addresses: AddressData[] }>(`addresses/${customerId}`, {
@@ -89,15 +126,22 @@ class BuyerPortalClient extends Client {
   }
 
   createOrgUnit(
-    {
-      parentId,
-      ...data
-    }: { name: string; parentId: string | null; customerId: string[] },
+    data: { name: string; parentId?: string | null; customerId: string[] },
     cookie: string
   ) {
-    return this.post(
+    const { parentId, ...input } = data;
+    return this.post<
+      {
+        customerIds: string[];
+        id: string;
+        isActive: boolean;
+        name: string;
+        parentId: string;
+      },
+      typeof data
+    >(
       "units",
-      { ...data, ...(parentId && { parentId }) },
+      { ...input, ...(parentId && { parentId }) },
       {
         headers: {
           Cookie: cookie,
@@ -106,11 +150,9 @@ class BuyerPortalClient extends Client {
     );
   }
 
-  updateOrgUnit(
-    { id, ...data }: { name?: string; id: string },
-    cookie: string
-  ) {
-    return this.patch(`units/${id}`, data, {
+  updateOrgUnit(data: { name?: string; id: string }, cookie: string) {
+    const { id, ...input } = data;
+    return this.patch<null, typeof input>(`units/${id}`, input, {
       headers: {
         Cookie: cookie,
       },

package/src/clients/Client.ts

@@ -1,9 +1,9 @@
 import { toQueryParams } from "../features/shared/utils";
 
-interface RequestConfig<T> {
+interface RequestConfig<Input = never> {
   url: string;
   method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
-  data?: T;
+  data?: Input;
   headers?: Record<string, string>;
   params?: Record<string, string | number | boolean>;
 }
@@ -15,13 +15,13 @@ class Client {
     this.baseURL = baseURL;
   }
 
-  async request<T>({
+  async request<Return, Input = never>({
     url,
     method,
     data,
     headers = {},
     params = {},
-  }: RequestConfig<T>): Promise<T> {
+  }: RequestConfig<Input>): Promise<Return> {
     const config: RequestInit = {
       method,
       headers: {
@@ -38,7 +38,7 @@ class Client {
 
     try {
       const response = await fetch(this.baseURL + url + paramsString, config);
-      let responseData: T | null = null;
+      let responseData: Return | null = null;
 
       const contentType = response.headers.get("Content-Type");
       if (contentType?.includes("application/json")) {
@@ -52,42 +52,58 @@ class Client {
         );
       }
 
-      return responseData as T;
+      return responseData as Return;
     } catch (error) {
       return Promise.reject(error);
     }
   }
 
-  get<T>(url: string, config: Partial<RequestConfig<T>> = {}): Promise<T> {
-    return this.request<T>({ url, method: "GET", ...config });
+  get<Return>(
+    url: string,
+    config: Partial<RequestConfig> = {}
+  ): Promise<Return> {
+    return this.request<Return>({ url, method: "GET", ...config });
   }
 
-  post<T>(
+  post<Return, Input>(
     url: string,
-    data: T,
-    config: Partial<RequestConfig<T>> = {}
-  ): Promise<T> {
-    return this.request<T>({ url, method: "POST", data, ...config });
+    data: Input,
+    config: Partial<RequestConfig<Input>> = {}
+  ): Promise<Return> {
+    return this.request<Return, Input>({
+      url,
+      method: "POST",
+      data,
+      ...config,
+    });
   }
 
-  put<T>(
+  put<Return, Input>(
     url: string,
-    data: T,
-    config: Partial<RequestConfig<T>> = {}
-  ): Promise<T> {
-    return this.request<T>({ url, method: "PUT", data, ...config });
+    data: Input,
+    config: Partial<RequestConfig<Input>> = {}
+  ): Promise<Return> {
+    return this.request<Return, Input>({ url, method: "PUT", data, ...config });
   }
 
-  patch<T>(
+  patch<Return, Input>(
     url: string,
-    data: T,
-    config: Partial<RequestConfig<T>> = {}
-  ): Promise<T> {
-    return this.request<T>({ url, method: "PATCH", data, ...config });
+    data: Input,
+    config: Partial<RequestConfig<Input>> = {}
+  ): Promise<Return> {
+    return this.request<Return, Input>({
+      url,
+      method: "PATCH",
+      data,
+      ...config,
+    });
   }
 
-  delete<T>(url: string, config: Partial<RequestConfig<T>> = {}): Promise<T> {
-    return this.request<T>({ url, method: "DELETE", ...config });
+  delete<Return>(
+    url: string,
+    config: Partial<RequestConfig<never>> = {}
+  ): Promise<Return> {
+    return this.request<Return>({ url, method: "DELETE", ...config });
   }
 }
 

package/src/features/contracts/components/ContractsCard/ContractsCard.tsx

@@ -8,6 +8,8 @@ import {
 } from "@faststore/ui";
 import type { ContractData } from "../../types";
 import { BasicCard, Icon } from "../../../shared/components";
+import { useRouter } from "next/router";
+import { useUpdateContractStatus } from "../../hooks";
 
 type ContractsCardProps = {
   orgUnitData?: {
@@ -21,12 +23,17 @@ export default function ContractsCard({
   contracts,
   orgUnitData,
 }: ContractsCardProps) {
+  const route = useRouter();
+
+  const { updateContractStatus } = useUpdateContractStatus();
+
   return (
     <BasicCard
       footerLink={`/contracts${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
       footerMessage="View contracts"
       title="Contracts"
       subTitle={contracts.length ?? 0}
+      icon={<Icon name="Info" width={20} height={20} />}
       onPlusIconClick={() => {}}
     >
       {contracts.length &&
@@ -48,6 +55,12 @@ export default function ContractsCard({
                   <Toggle
                     id="contractActive"
                     defaultChecked={contract.isActive}
+                    onChange={(event) => {
+                      updateContractStatus({
+                        contractId: contract.id,
+                        isActive: event.target.checked,
+                      });
+                    }}
                   />
 
                   <Dropdown>
@@ -55,7 +68,11 @@ export default function ContractsCard({
                       <Icon name="MoreVert" data-fs-menu-action-button />
                     </DropdownButton>
                     <DropdownMenu align="right" data-fs-dropdown-menu>
-                      <DropdownItem>
+                      <DropdownItem
+                        onClick={() => {
+                          route.push(`/contract/${contract.id}`);
+                        }}
+                      >
                         <UIIcon name="ArrowSquareOut" data-fs-dropdown-icon />
                         Open
                       </DropdownItem>
@@ -77,24 +94,6 @@ export default function ContractsCard({
                         />{" "}
                         Delete
                       </DropdownItem>
-                      <DropdownItem dismissOnClick={false}>
-                        <div data-fs-dropdown-active-item>
-                          <div data-fs-dropdown-active-item-label>
-                            <Icon
-                              name="Active"
-                              width={24}
-                              height={24}
-                              data-fs-dropdown-icon
-                            />{" "}
-                            Active
-                          </div>
-                          <Toggle
-                            id="contractActiveMenu"
-                            defaultChecked={contract.isActive}
-                            data-fs-internal-toggle
-                          />
-                        </div>
-                      </DropdownItem>
                     </DropdownMenu>
                   </Dropdown>
                 </div>

package/src/features/contracts/hooks/index.ts

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

package/src/features/contracts/hooks/useUpdateContractStatus.ts

@@ -0,0 +1,27 @@
+import { type MutationOptions, useMutation } from "../../shared/hooks";
+import {
+  updateContractStatusService,
+  type UpdateContractStatusServiceProps,
+} from "../services";
+
+export const useUpdateContractStatus = (
+  options?: MutationOptions<AwaitedType<typeof updateContractStatusService>>
+) => {
+  const { mutate, isLoading, error } = useMutation<
+    AwaitedType<typeof updateContractStatusService>,
+    Omit<UpdateContractStatusServiceProps, "cookie">
+  >(
+    (variables, clientContext) =>
+      updateContractStatusService({
+        ...variables,
+        cookie: clientContext.cookie,
+      }),
+    options
+  );
+
+  return {
+    updateContractStatus: mutate,
+    isUpdateContractStatusLoading: isLoading,
+    hasUpdateContractStatusError: error,
+  };
+};

package/src/features/contracts/layouts/ContractsLayout/ContractsLayout.tsx

@@ -12,14 +12,20 @@ import {
 import { useQueryParams } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { statusFilters } from "../../../shared/utils";
+import { useUpdateContractStatus } from "../../hooks";
+import { useRouter } from "next/router";
 
 export type ContractsLayoutProps = {
   data: ContractData[];
 };
 
 export const ContractsLayout = ({ data }: ContractsLayoutProps) => {
+  const route = useRouter();
+
   const { setQueryString, removeQueryString } = useQueryParams();
 
+  const { updateContractStatus } = useUpdateContractStatus();
+
   return (
     <GlobalLayout>
       <section data-fs-contracts-section>
@@ -58,15 +64,27 @@ export const ContractsLayout = ({ data }: ContractsLayoutProps) => {
           {data.map((contract) => (
             <div key={contract.id}>
               <div data-fs-contract-row>
-                <div data-fs-contract-row-information>
+                <div
+                  data-fs-contract-row-information
+                  onClick={() => {
+                    route.push(`/profile/${contract.id}`);
+                  }}
+                >
                   <Icon name="Address" width={32} height={32} />
-                  {contract.name}
+                  {contract.name ?? contract.email}
                 </div>
                 <div data-fs-contract-row-action>
                   <Toggle
                     id="isContractActive"
                     aria-label="is contract active"
                     defaultChecked={contract.isActive}
+                    onChange={(event) => {
+                      event.stopPropagation();
+                      updateContractStatus({
+                        contractId: contract.id,
+                        isActive: event.target.checked,
+                      });
+                    }}
                   />
                 </div>
               </div>

package/src/features/contracts/layouts/ContractsLayout/contracts-layout.scss

@@ -36,6 +36,7 @@
       gap: var(--fs-spacing-3);
       margin-left: var(--fs-spacing-3);
       padding: var(--fs-spacing-2);
+      width: 100%;
 
       svg {
         color: #0366dd;

package/src/features/contracts/services/get-contract-details.service.ts

@@ -0,0 +1,16 @@
+import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+
+export const getContractDetailsService = async ({
+  contractId,
+  cookie,
+}: {
+  contractId: string;
+  cookie: string;
+}) => {
+  const { contract } = await buyerPortalClient.getContractDetails(
+    contractId,
+    cookie
+  );
+
+  return contract;
+};

package/src/features/contracts/services/{get-contracts.service.ts → get-contracts-by-customer-id.service.ts}

@@ -1,8 +1,7 @@
 import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
-import { compareItems, statusFilters } from "../../shared/utils";
 import type { ContractData } from "../types";
 
-export type GetContractsServiceProps = {
+export type GetContractsByCustomerIdServiceProps = {
   search?: string;
   customerId?: string;
   status?: string;
@@ -10,13 +9,13 @@ export type GetContractsServiceProps = {
   cookie: string;
 };
 
-export const getContractsService = async ({
+export const getContractsByCustomerIdService = async ({
   search = "",
   customerId,
   status,
   sort,
   cookie,
-}: GetContractsServiceProps): Promise<ContractData[]> => {
+}: GetContractsByCustomerIdServiceProps): Promise<ContractData[]> => {
   const contractsData: ContractData[] = [];
 
   if (!customerId) {
@@ -27,21 +26,12 @@ export const getContractsService = async ({
     const {
       data: { contracts },
     } = await buyerPortalClient.getContractsByCustomerId(customerId, cookie);
+
     contractsData.push(...contracts);
   } catch (err) {
     console.error("Failed to fetch contracts", err);
     return contractsData;
   }
 
-  return contractsData
-    .filter((contract) => {
-      const matchesName = contract.name
-        .toLowerCase()
-        .includes(search.toLowerCase());
-      const matchesStatus =
-        !status || contract.isActive === statusFilters[status];
-
-      return matchesName && matchesStatus;
-    })
-    .sort((a, b) => compareItems(a, b, sort));
+  return contractsData;
 };

package/src/features/contracts/services/get-contracts-org-by-unit-id.service.ts

@@ -0,0 +1,40 @@
+import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+import { compareItems, statusFilters } from "../../shared/utils";
+import type { ContractData } from "../types";
+
+export type GetContractsByOrgUnitIdServiceProps = {
+  search?: string;
+  orgUnitId?: string;
+  status?: string;
+  sort?: string;
+  cookie: string;
+};
+
+export const getContractsByOrgUnitIdService = async ({
+  search = "",
+  orgUnitId,
+  status,
+  sort,
+  cookie,
+}: GetContractsByOrgUnitIdServiceProps): Promise<ContractData[]> => {
+  const contractsData: ContractData[] = [];
+
+  if (!orgUnitId) {
+    return contractsData;
+  }
+
+  try {
+    const { contracts } = await buyerPortalClient.getContractsByOrgUnitId(
+      orgUnitId,
+      cookie
+    );
+    contractsData.push(...contracts);
+  } catch (err) {
+    console.error("Failed to fetch contracts", err);
+    return contractsData;
+  }
+
+  console.log("Contracts Data: ", contractsData);
+
+  return contractsData;
+};

package/src/features/contracts/services/index.ts

@@ -1,4 +1,16 @@
 export {
-  getContractsService,
-  type GetContractsServiceProps,
-} from "./get-contracts.service";
+  getContractsByCustomerIdService,
+  type GetContractsByCustomerIdServiceProps,
+} from "./get-contracts-by-customer-id.service";
+
+export {
+  getContractsByOrgUnitIdService,
+  type GetContractsByOrgUnitIdServiceProps,
+} from "./get-contracts-org-by-unit-id.service";
+
+export {
+  updateContractStatusService,
+  UpdateContractStatusServiceProps,
+} from "./update-contract-status.service";
+
+export { getContractDetailsService } from "./get-contract-details.service";

package/src/features/contracts/services/update-contract-status.service.ts

@@ -0,0 +1,25 @@
+import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+
+export type UpdateContractStatusServiceProps = {
+  contractId: string;
+  isActive: boolean;
+  cookie: string;
+};
+
+export const updateContractStatusService = async ({
+  contractId,
+  isActive,
+  cookie,
+}: UpdateContractStatusServiceProps): Promise<null> => {
+  try {
+    const data = await buyerPortalClient.updateContractStatus(
+      { contractId, isActive },
+      cookie
+    );
+  } catch (err) {
+    console.error("Failed to fetch contracts", err);
+    return null;
+  }
+
+  return null;
+};

package/src/features/contracts/types/ContractData.ts

@@ -1,5 +1,5 @@
 export type ContractData = {
-  name: string;
+  name: string | null;
   id: string;
   email: string;
   isActive: boolean;

package/src/features/org-units/components/CreateOrgUnitDrawer/CreateOrgUnitDrawer.tsx

@@ -11,6 +11,7 @@ import {
   Icon,
 } from "../../../shared/components";
 import { useCreateNewOrgUnit } from "../../hooks";
+import type { createNewOrgUnitService } from "../../services";
 
 export type CreateOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
   options?: { id: string; name: string }[];
@@ -35,10 +36,21 @@ export const CreateOrgUnitDrawer = ({
 
   const [isTouched, setIsTouched] = useState(false);
 
-  const handleCreateNewOrgUnitSuccess = () => {
+  const handleCreateNewOrgUnitSuccess = (
+    data: AwaitedType<typeof createNewOrgUnitService>
+  ) => {
     pushToast({
       message: "Organizational unit added successfully",
       status: "INFO",
+      icon: (
+        <button
+          data-fs-bp-toast-view-button
+          type="button"
+          onClick={() => router.push(`/org-unit/${data.id}`)}
+        >
+          View
+        </button>
+      ),
     });
     close();
     router.replace(router.asPath);