@vtex/faststore-plugin-buyer-portal 1.0.14 → 1.0.16

package/package.json

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

package/plugin.config.js

@@ -2,7 +2,7 @@ module.exports = {
   name: "poc-plugin",
   pages: {
     home: {
-      path: "/buyer-portal",
+      path: "/buyer-portal/[[...contractMode]]",
       appLayout: false,
     },
     "org-units": {

package/src/global.d.ts

@@ -1 +1,2 @@
 declare module "*.module.scss";
+declare module "*discovery.config";

package/src/layouts/HomeLayout/HomeLayout.tsx

@@ -23,9 +23,9 @@ export const HomeLayout = ({ data }: HomeLayoutProps) => (
         <UsersCard users={data.users} />
 
         {/* Remove this comments when mocks be removed */}
-        {/* {data.contracts.length === 1 && ( */}
-        <AddressesCard addresses={data.addresses} />
-        {/* )} */}
+        {data.contracts.length === 1 && (
+          <AddressesCard addresses={data.addresses} />
+        )}
         <OrganizationalUnitsCard
           organizationalUnits={data.orgUnitsHierarchy.nodes}
         />

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,15 +1,15 @@
+import React from 'react'
+
 import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
-import { getTreeDepth } from "../../utils/getTreeDepth";
-import { OrgUnitsHierarchyTree } from "../../components/OrgUnitsHierarchyTree/OrgUnitsHierarchyTree";
-import { Structure } from "../../components/HierarchyTree/HierarchyTree";
 import { ContractData } from "../../types/ContractData";
 import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
-import { Icon } from "../../components/Icon";
+
 
 export type ProfileLayoutProps = {
-  data: ContractData;
+  data: ContractData | null
 };
 
+
 export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
   return (
     <GlobalLayout>
@@ -24,40 +24,42 @@ export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
           showActions={false}
         />
 
-        <div data-fs-bp-profile-details>
-          <span data-fs-bp-profile-details-title>
-            Details
-          </span>
-          <hr data-fs-bp-profile-divider />
+        {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>
+            <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 />
+            <hr data-fs-bp-profile-divider />
 
-          <div data-fs-bp-profile-details-row>
-            <span data-fs-bp-profile-details-row-label>Email</span>
-            <span data-fs-bp-profile-details-row-value>{data.email}</span>
-          </div>
+            <div data-fs-bp-profile-details-row>
+              <span data-fs-bp-profile-details-row-label>Email</span>
+              <span data-fs-bp-profile-details-row-value>{data.email}</span>
+            </div>
 
-          <hr data-fs-bp-profile-divider />
+            <hr data-fs-bp-profile-divider />
 
-          <div data-fs-bp-profile-details-row>
-            <span data-fs-bp-profile-details-row-label>ID</span>
-            <span data-fs-bp-profile-details-row-value>{data.id}</span>
-          </div>
+            <div data-fs-bp-profile-details-row>
+              <span data-fs-bp-profile-details-row-label>ID</span>
+              <span data-fs-bp-profile-details-row-value>{data.id}</span>
+            </div>
 
-          <hr data-fs-bp-profile-divider />
+            <hr data-fs-bp-profile-divider />
 
-          <div data-fs-bp-profile-details-row>
-            <span data-fs-bp-profile-details-row-label>Creation Date</span>
-            <span data-fs-bp-profile-details-row-value>{data.creationDate}</span>
-          </div>
+            <div data-fs-bp-profile-details-row>
+              <span data-fs-bp-profile-details-row-label>Creation Date</span>
+              <span data-fs-bp-profile-details-row-value>{data.creationDate}</span>
+            </div>
 
-          <hr data-fs-bp-profile-divider />
-        </div>
+            <hr data-fs-bp-profile-divider />
+          </div>
+        )}
       </section>
     </GlobalLayout>
   );

package/src/mock/contracts-data.ts

@@ -2,34 +2,34 @@ import { ContractData } from "../types/ContractData";
 
 export const contractsData: ContractData[] = [
   // Uncomment to test with a single contract
-  {
-    name: "ByTech",
-    email: "bytech@demo.com",
-    id: "12-32-DDDD",
-    status: false,
-    creationDate: "October 10, 2024"
-  }
-
-  // Comment to test with single contract
   // {
   //   name: "ByTech",
   //   email: "bytech@demo.com",
   //   id: "12-32-DDDD",
   //   status: false,
   //   creationDate: "October 10, 2024"
-  // },
-  // {
-  //   name: "ByTech South",
-  //   email: "bytech@demo.com",
-  //   id: "12-32-AAAA",
-  //   status: true,
-  //   creationDate: "May 5, 2024"
-  // },
-  // {
-  //   name: "Stellar Inc",
-  //   email: "Stellar@stellar.com",
-  //   id: "32-32-32",
-  //   status: true,
-  //   creationDate: "January 1, 2025"
-  // },
+  // }
+
+  // Comment to test with single contract
+  {
+    name: "ByTech",
+    email: "bytech@demo.com",
+    id: "12-32-DDDD",
+    status: false,
+    creationDate: "October 10, 2024"
+  },
+  {
+    name: "ByTech South",
+    email: "bytech@demo.com",
+    id: "12-32-AAAA",
+    status: true,
+    creationDate: "May 5, 2024"
+  },
+  {
+    name: "Stellar Inc",
+    email: "Stellar@stellar.com",
+    id: "32-32-32",
+    status: true,
+    creationDate: "January 1, 2025"
+  },
 ];

package/src/pages/contracts.tsx

@@ -4,17 +4,19 @@ import {
   GetContractsServiceProps,
 } from "../services/get-contracts.service";
 import { ContractData } from "../types/ContractData";
+import { getCustomerIdFromCookieServerSide } from "../utils/cookie";
+
 
 export type ContractsPageData = { data: ContractData[] };
 
 export type ContractsPageContext = {
-  query: GetContractsServiceProps;
+  req: {
+    cookies: Record<string, string>
+  };
 };
 
-export async function loader({
-  query,
-}: ContractsPageContext): Promise<ContractsPageData> {
-  return { data: await getContractsService(query) };
+export async function loader(data: ContractsPageContext): Promise<ContractsPageData> {
+  return { data: await getContractsService({ customerId: getCustomerIdFromCookieServerSide(data), cookie: JSON.stringify(data?.req?.cookies).replace(/[{}]/g, '') }) };
 }
 
 const ContractsPage = ({ data }: ContractsPageData) => (

package/src/pages/home.tsx

@@ -4,8 +4,14 @@ import { OrganizationData } from "../types/OrganizationData";
 
 export type HomePageData = { data: OrganizationData };
 
-export async function loader(): Promise<HomePageData> {
-  return { data: await getOrganizationService() };
+type HomePageLoaderContext = {
+  query: {
+    contractMode?: string[]
+  }
+}
+
+export async function loader(data: HomePageLoaderContext): Promise<HomePageData> {
+  return { data: await getOrganizationService(data.query.contractMode ? data.query.contractMode[0] : '') };
 }
 
 const HomePage = ({ data }: HomePageData) => {

package/src/pages/profile.tsx

@@ -4,19 +4,16 @@ import {
   GetContractsServiceProps,
 } from "../services/get-contracts.service";
 import { ContractData } from "../types/ContractData";
+import { getCustomerIdFromCookieServerSide } from "../utils/cookie";
+import type { ContractsPageContext } from "./contracts";
 
-export type ContractsPageData = { data: ContractData };
+export type ContractsPageData = { data: ContractData | null };
 
-export type ContractsPageContext = {
-  query: GetContractsServiceProps;
-};
+export async function loader(data: ContractsPageContext): Promise<ContractsPageData> {
+  const contracts = await getContractsService({ customerId: getCustomerIdFromCookieServerSide(data), cookie: JSON.stringify(data?.req?.cookies).replace(/[{}]/g, '') })
 
-export async function loader({
-  query,
-}: ContractsPageContext): Promise<ContractsPageData> {
-  const contracts = await getContractsService(query)
-
-  return { data: contracts[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 && contracts.length ? contracts[0] : null };
 }
 
 const ContractsPage = ({ data }: ContractsPageData) => (

package/src/services/get-contracts.service.ts

@@ -1,19 +1,47 @@
-import { contractsData } from "../mock/contracts-data";
 import { ContractData } from "../types/ContractData";
 import { statusFilters } from "../utils/search";
+import { API_URL } from '../utils/constants';
+import storeConfig from '../../../../discovery.config'
+
 
 export type GetContractsServiceProps = {
   search: string;
+  customerId: string;
   status: string;
   sort: string;
+  cookie: string;
 };
 
 export const getContractsService = async ({
   search = "",
+  customerId,
   status,
   sort,
+  cookie,
 }: Partial<GetContractsServiceProps> = {}): Promise<ContractData[]> => {
-  return contractsData
+  const getContracts = async () => {
+    try {
+      if (!customerId) {
+        return []
+      }
+      const headers = {
+        "Content-type": "application/json",
+        'Cookie': cookie ?? '',
+      }
+
+      const url = `${API_URL(storeConfig?.secureSubdomain ?? '', 'getContracts')}/${customerId}`
+
+      const response = await (await fetch(url, { method: 'GET', credentials: 'include', headers })).json()
+
+      return response?.data?.contracts ?? []
+    } catch (err) {
+      console.log('>> err', err)
+      return []
+    }
+  }
+  const contractsData = await getContracts() as ContractData[]
+
+  return contractsData && contractsData
     .filter((contract) => {
       const matchesName = contract.name
         .toLowerCase()

package/src/services/get-organization.service.ts

@@ -1,6 +1,13 @@
 import { organizationData } from "../mock/organization-data";
 import { OrganizationData } from "../types/OrganizationData";
 
-export const getOrganizationService = async (): Promise<OrganizationData> => {
-  return organizationData;
+export const getOrganizationService = async (contractMode: string): Promise<OrganizationData> => {
+  let mockOrganizationData = organizationData
+  console.log('>>>', contractMode)
+
+  if (contractMode === 'single') {
+    mockOrganizationData = { ...organizationData, contracts: [organizationData.contracts[0]] }
+  }
+
+  return mockOrganizationData;
 };

package/src/utils/constants.ts

@@ -0,0 +1,2 @@
+export const AUT_COOKIE_KEY = 'VtexIdclientAutCookie'
+export const API_URL = (checkoutUrl: string, operation: string) => `${checkoutUrl}/_v/buyer-portal/${operation}`

package/src/utils/cookie.ts

@@ -0,0 +1,27 @@
+import { AUT_COOKIE_KEY } from "./constants"
+import storeConfig from '../../../../discovery.config'
+
+
+type LoaderData = {
+  req: {
+    cookies: Record<string, string>
+  }
+}
+
+export function getAuthCookie(data: LoaderData) {
+  const authCookie = data?.req?.cookies[`${AUT_COOKIE_KEY}_${storeConfig?.api.storeId}`] ?? ''
+
+  return authCookie
+}
+
+export function getCustomerIdFromCookieServerSide(data: LoaderData) {
+  const authCookie = getAuthCookie(data)
+
+  const parsedCookie = parseJwt(authCookie)
+
+  return parsedCookie.customerId
+}
+
+function parseJwt(token: string) {
+  return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
+}