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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.29",
+  "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/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}`, {

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/profile/components/ProfileCard/ProfileCard.tsx

@@ -1,16 +1,11 @@
 import { BasicCard } from "../../../shared/components";
 
 type ProfileCardProps = {
-  name: string;
+  name: string | null;
   email: string;
   id: string;
 
   imageUrl?: string;
-
-  orgUnitData?: {
-    id: string | null;
-    name: string;
-  };
 };
 
 export default function ProfileCard({
@@ -18,11 +13,10 @@ export default function ProfileCard({
   email,
   id,
   imageUrl,
-  orgUnitData,
 }: ProfileCardProps) {
   return (
     <BasicCard
-      footerLink={`/profile${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
+      footerLink={`/profile/${id}`}
       footerMessage="View profile"
       title="Profile"
     >

package/src/features/profile/layouts/ProfileLayout/ProfileLayout.tsx

@@ -22,12 +22,16 @@ export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
         {data && (
           <div data-fs-bp-profile-details>
             <span data-fs-bp-profile-details-title>Details</span>
-            <hr data-fs-bp-profile-divider />
 
-            <div data-fs-bp-profile-details-row>
-              <span data-fs-bp-profile-details-row-label>Name</span>
-              <span data-fs-bp-profile-details-row-value>{data.name}</span>
-            </div>
+            {!!data.name && (
+              <>
+                <hr data-fs-bp-profile-divider />
+                <div data-fs-bp-profile-details-row>
+                  <span data-fs-bp-profile-details-row-label>Name</span>
+                  <span data-fs-bp-profile-details-row-value>{data.name}</span>
+                </div>
+              </>
+            )}
 
             <hr data-fs-bp-profile-divider />
 

package/src/features/profile/layouts/ProfileLayout/profile-layout.scss

@@ -13,7 +13,7 @@
 
     display: flex;
     justify-content: space-between;
-    padding: var(--fs-spacing-4);
+    padding: var(--fs-spacing-4) 0;
     align-items: center;
   }
 

package/src/features/shared/components/BasicCard/BasicCard.tsx

@@ -13,6 +13,7 @@ export type BasicCardProps = {
   footerMessage: string;
   footerLink: string;
   onPlusIconClick?: () => void;
+  icon?: ReactNode;
 };
 
 export const BasicCard = ({
@@ -22,6 +23,7 @@ export const BasicCard = ({
   onPlusIconClick,
   footerMessage,
   footerLink,
+  icon,
 }: BasicCardProps) => {
   const { push } = useRouter();
 
@@ -36,7 +38,7 @@ export const BasicCard = ({
         </div>
         {onPlusIconClick && (
           <IconButton
-            icon={<UIIcon name="PlusCircle" width={20} height={20} />}
+            icon={icon ?? <UIIcon name="PlusCircle" width={20} height={20} />}
             aria-label={"addresses action"}
             onClick={onPlusIconClick}
           />

package/src/features/shared/utils/cookie.ts

@@ -1,6 +1,21 @@
 import { AUT_COOKIE_KEY } from "./constants";
 import storeConfig from "discovery.config";
-import { LoaderData } from "../types/LoaderData";
+import type { LoaderData } from "../types/LoaderData";
+
+export interface ParsedCookie {
+  sub: string;
+  account: string;
+  audience: string;
+  sess: string;
+  exp: number;
+  type: string;
+  userId: string;
+  iat: number;
+  customerId: string;
+  isRepresentative: boolean;
+  iss: string;
+  jti: string;
+}
 
 export function getAuthCookie(data: LoaderData) {
   const authCookie =
@@ -9,22 +24,32 @@ export function getAuthCookie(data: LoaderData) {
   return authCookie;
 }
 
-export function getCustomerIdFromCookieServerSide(data: LoaderData) {
+export function getParsedJWT(data: LoaderData): ParsedCookie | "" {
   const authCookie = getAuthCookie(data);
 
   if (!authCookie || authCookie === "") {
     return "";
   }
 
-  const parsedCookie = parseJwt(authCookie);
+  return parseJwt(authCookie);
+}
+
+export function getCustomerIdFromCookieServerSide(data: LoaderData): string {
+  const parsedCookie = getParsedJWT(data);
+
+  return parsedCookie ? String(parsedCookie.customerId) : "";
+}
+
+export function getUserIdFromCookieServerSide(data: LoaderData): string {
+  const parsedCookie = getParsedJWT(data);
 
-  return String(parsedCookie.customerId)
+  return parsedCookie ? String(parsedCookie.userId) : "";
 }
 
-export function getCookieAsString(cookie: Record<string, string>) {
+export function getCookieAsString(cookie: Record<string, string>): string {
   return JSON.stringify(cookie).replace(/[{}]/g, "") ?? "";
 }
 
-function parseJwt(token: string) {
+function parseJwt(token: string): ParsedCookie {
   return JSON.parse(Buffer.from(token.split(".")[1], "base64").toString());
 }

package/src/features/shared/utils/getClientContext.ts

@@ -5,12 +5,14 @@ import {
   getAuthCookie,
   getCookieAsString,
   getCustomerIdFromCookieServerSide,
+  getUserIdFromCookieServerSide,
 } from "./cookie";
 
 export type ClientContext = {
   vtexIdclientAutCookie: string;
   cookie: string;
   customerId: string;
+  userId: string;
   orgUnit?: OrgUnitBasicData | null;
 };
 
@@ -32,6 +34,7 @@ export const getClientContext = async ({
     }),
     cookie,
     customerId: getCustomerIdFromCookieServerSide({ req }),
+    userId: getUserIdFromCookieServerSide({ req }),
     orgUnit: orgUnitId
       ? await getOrgUnitBasicData({ id: orgUnitId, cookie })
       : null,

package/src/pages/contracts.tsx

@@ -1,6 +1,9 @@
 import { type ClientContext, getClientContext } from "../features/shared/utils";
 import { ContractsLayout } from "../features/contracts/layouts";
-import { getContractsService } from "../features/contracts/services";
+import {
+  getContractsByCustomerIdService,
+  getContractsByOrgUnitIdService,
+} from "../features/contracts/services";
 import type { ContractData } from "../features/contracts/types";
 import { BuyerPortalProvider } from "../features/shared/components";
 import type { LoaderData } from "../features/shared/types";
@@ -21,7 +24,9 @@ export async function loader(
     await getClientContext(data);
 
   return {
-    data: orgUnit ? [] : await getContractsService({ customerId, cookie }),
+    data: orgUnit
+      ? await getContractsByOrgUnitIdService({ orgUnitId: orgUnit.id, cookie })
+      : await getContractsByCustomerIdService({ customerId, cookie }),
     clientContext: { customerId, cookie, orgUnit, ...clientContext },
   };
 }

package/src/pages/org-units.tsx

@@ -23,7 +23,8 @@ export async function loader(
   return {
     data: orgUnit
       ? { organizationalUnits: [], total: 0 }
-      : await getRootOrgUnitByCustomerIdService({ customerId }, cookie),
+      : // TODO: Implement Pegar org unit baseado no usuario
+        await getRootOrgUnitByCustomerIdService({ customerId }, cookie),
     clientContext: { cookie, customerId, orgUnit, ...clientContext },
   };
 }

package/src/pages/profile.tsx

@@ -1,4 +1,5 @@
-import { getContractsService } from "../features/contracts/services/get-contracts.service";
+import { getContractDetailsService } from "../features/contracts/services";
+import { getContractsByCustomerIdService } from "../features/contracts/services/get-contracts-by-customer-id.service";
 import type { ContractData } from "../features/contracts/types";
 import { ProfileLayout } from "../features/profile/layouts";
 import { BuyerPortalProvider } from "../features/shared/components";
@@ -15,21 +16,32 @@ export type ProfilePageData = {
 };
 
 export type ProfilePageQuery = {
-  orgUnitId?: string[];
+  contractId?: string[];
 };
 
 export async function loader(
   data: LoaderData<ProfilePageQuery>
 ): Promise<ProfilePageData> {
-  const contracts = await getContractsService({
-    customerId: getCustomerIdFromCookieServerSide(data),
-    cookie: JSON.stringify(data?.req?.cookies).replace(/[{}]/g, ""),
-  });
+  const { customerId, cookie, ...clientContext } = await getClientContext(data);
+
+  const contractId = data.query.contractId?.[0];
+
+  const contract = contractId
+    ? await getContractDetailsService({
+        contractId,
+        cookie,
+      })
+    : (
+        await getContractsByCustomerIdService({
+          customerId,
+          cookie,
+        })
+      )[0];
 
   // We should deal with a better error boundary here later, this is just so an empty array doesn't break the render
   return {
-    data: contracts?.length ? contracts[0] : null,
-    clientContext: await getClientContext(data),
+    data: contract,
+    clientContext: { customerId, cookie, ...clientContext },
   };
 }