@vtex/faststore-plugin-buyer-portal 1.0.40 → 1.0.41

package/CHANGELOG.md

@@ -9,5 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add Buying Policies Page
+- Add Buying Policy Details Page
+
+### Added
+
 - Add CHANGELOG file
 - Add README file

package/package.json

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

package/plugin.config.js

@@ -49,6 +49,16 @@ module.exports = {
     //   appLayout: false,
     // },
 
+    "buying-policies": {
+      path: "/buyer-portal/buying-policies/[orgUnitId]/[contractId]",
+      appLayout: false,
+    },
+
+    "buying-policy-details": {
+      path: "/buyer-portal/buying-policy/[orgUnitId]/[contractId]/[buyingPolicyId]",
+      appLayout: false,
+    },
+
     users: {
       path: "/buyer-portal/users/[orgUnitId]",
       appLayout: false,

package/src/features/addresses/components/CreateAddressDrawer/create-address-drawer.scss

@@ -29,7 +29,7 @@
     margin-top: 1rem;
     width: fit-content;
     border-radius: var(--fs-border-radius-pill);
-    border: 1px;
+    border: var(--fs-border-width);
     padding: var(--fs-spacing-0);
     gap: var(--fs-spacing-0);
     border-style: solid;

package/src/features/addresses/layouts/AddressDetailsLayout/address-details-layout.scss

@@ -53,7 +53,7 @@
       [data-fs-bp-tab-bar] {
         width: fit-content;
         border-radius: var(--fs-border-radius-pill);
-        border: 1px;
+        border: var(--fs-border-width);
         padding: var(--fs-spacing-0);
         gap: var(--fs-spacing-0);
         border-style: solid;
@@ -82,7 +82,7 @@
         line-height: var(--fs-spacing-4);
 
         border-radius: var(--fs-border-radius-pill);
-        border: 1px solid #e0e0e0;
+        border: var(--fs-border-width) solid #e0e0e0;
       }
     }
 

package/src/features/buying-policies/components/BuyingPolicyDropdownMenu/BuyingPolicyDropdownMenu.tsx

@@ -0,0 +1,23 @@
+import { BasicDropdownMenu, Icon } from "../../../shared/components";
+
+import { DropdownItem } from "@faststore/ui";
+
+export const BuyingPolicyDropdownMenu = () => {
+  return (
+    <BasicDropdownMenu>
+      <DropdownItem>
+        <Icon name="OpenInNew" />
+        Open
+      </DropdownItem>
+      <DropdownItem>
+        <Icon name="Edit" />
+        Edit settings
+      </DropdownItem>
+      <BasicDropdownMenu.Separator />
+      <DropdownItem data-fs-bp-dropdown-menu-item-mode="danger">
+        <Icon name="Delete" />
+        <span>Delete</span>
+      </DropdownItem>
+    </BasicDropdownMenu>
+  );
+};

package/src/features/buying-policies/components/BuyingPolicyDropdownMenu/buying-policy-dropdown-menu.scss

@@ -0,0 +1 @@
+@import "../../../shared/components/BasicDropdownMenu/basic-dropdown-menu.scss";

package/src/features/buying-policies/components/index.ts

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

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/BuyingPoliciesLayout.tsx

@@ -0,0 +1,62 @@
+import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import {
+  HeaderInside,
+  InternalSearch,
+  ListLine,
+} from "../../../shared/components";
+import { useBuyerPortal, useQueryParams } from "../../../shared/hooks";
+import type { BuyingPolicy } from "../../types";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { BuyingPolicyDropdownMenu } from "../../components";
+
+export type BuyingPoliciesLayoutProps = {
+  data: { buyingPolicies: BuyingPolicy[] } | null;
+  search: string;
+};
+
+export const BuyingPoliciesLayout = ({
+  data,
+  search,
+}: BuyingPoliciesLayoutProps) => {
+  const { setQueryString, removeQueryString } = useQueryParams();
+
+  const { currentContract, currentOrgUnit } = useBuyerPortal();
+
+  return (
+    <GlobalLayout>
+      <FinanceTabsLayout pageName="Finance and Compliance">
+        <section data-fs-buying-policies-section>
+          <HeaderInside title="Buying Policies">
+            <HeaderInside.Button />
+          </HeaderInside>
+
+          <div data-fs-buying-policies-filter>
+            <InternalSearch
+              defaultValue={search}
+              textSearch={(searchTerm) => {
+                searchTerm
+                  ? setQueryString("search", searchTerm)
+                  : removeQueryString("search");
+              }}
+            />
+          </div>
+
+          <span data-fs-buying-policies-heading>Name</span>
+          {data?.buyingPolicies.map((buyingPolicy) => (
+            <ListLine
+              key={buyingPolicy.id}
+              title={buyingPolicy.name}
+              iconName="Rebase"
+              href={buyerPortalRoutes.buyingPolicyDetails({
+                contractId: currentContract?.id ?? "",
+                orgUnitId: currentOrgUnit?.id ?? "",
+                buyingPolicyId: buyingPolicy.id,
+              })}
+              dropdownMenu={<BuyingPolicyDropdownMenu />}
+            />
+          ))}
+        </section>
+      </FinanceTabsLayout>
+    </GlobalLayout>
+  );
+};

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -0,0 +1,24 @@
+@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+@import "../../components/BuyingPolicyDropdownMenu/buying-policy-dropdown-menu.scss";
+@import "../../../shared/layouts/FinanceTabsLayout/finance-tabs-layout.scss";
+
+[data-fs-buying-policies-section] {
+  @import "../../../shared/components/HeaderInside/header-inside.scss";
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
+  @import "../../../shared/components/ListLine/list-line.scss";
+
+  [data-fs-buying-policies-filter] {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 var(--fs-spacing-4);
+  }
+
+  [data-fs-buying-policies-heading] {
+    display: flex;
+    font-weight: 400;
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+    color: #5c5c5c;
+    margin-bottom: var(--fs-spacing-1);
+  }
+}

package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/BuyingPolicyDetailsLayout.tsx

@@ -0,0 +1,83 @@
+import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import {
+  BasicDropdownMenu,
+  HeaderInside,
+  Icon,
+} from "../../../shared/components";
+import { useBuyerPortal } from "../../../shared/hooks";
+import type { BuyingPolicy } from "../../types";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { Dropdown, DropdownItem } from "@faststore/ui";
+import { BuyingPolicyDropdownMenu } from "../../components";
+
+export type BuyingPolicyDetailsLayoutProps = {
+  data: { buyingPolicy: BuyingPolicy | null };
+};
+
+export const BuyingPolicyDetailsLayout = ({
+  data: { buyingPolicy },
+}: BuyingPolicyDetailsLayoutProps) => {
+  const { currentContract, currentOrgUnit } = useBuyerPortal();
+
+  return (
+    <GlobalLayout>
+      <FinanceTabsLayout pageName="Finance and Compliance">
+        <section data-fs-buying-policy-details-section>
+          <HeaderInside
+            title={buyingPolicy?.name ?? ""}
+            backLink={buyerPortalRoutes.buyingPolicies({
+              contractId: currentContract?.id || "",
+              orgUnitId: currentOrgUnit?.id || "",
+            })}
+          >
+            <Dropdown>
+              <BasicDropdownMenu.Trigger />
+              <BuyingPolicyDropdownMenu />
+            </Dropdown>
+          </HeaderInside>
+
+          <div data-fs-buying-policy-details-line>
+            <span data-fs-buying-policy-details-title>Settings</span>
+            <button type="button" data-fs-buying-policy-details-edit-button>
+              Edit
+            </button>
+          </div>
+          <div data-fs-buying-policy-details-line>
+            <span data-fs-buying-policy-details-field-label>Name</span>
+            <span data-fs-buying-policy-details-field-content>
+              {buyingPolicy?.name}
+            </span>
+          </div>
+          <div data-fs-buying-policy-details-line>
+            <span data-fs-buying-policy-details-field-label>Description</span>
+            <span data-fs-buying-policy-details-field-content>
+              {buyingPolicy?.description}
+            </span>
+          </div>
+          <div data-fs-buying-policy-details-line>
+            <span data-fs-buying-policy-details-field-label>Criteria</span>
+            <span data-fs-buying-policy-details-field-content>
+              {buyingPolicy?.criteria}
+            </span>
+          </div>
+          <div data-fs-buying-policy-details-line>
+            <span data-fs-buying-policy-details-field-label>Action</span>
+            <span data-fs-buying-policy-details-field-content>
+              {buyingPolicy?.action.type}
+              {buyingPolicy?.action.levels?.map((level, index) => (
+                <>
+                  <span key={level} data-fs-buying-policy-details-level-title>
+                    Level {index + 1}
+                  </span>
+                  <span key={level} data-fs-buying-policy-details-level-value>
+                    {level}
+                  </span>
+                </>
+              ))}
+            </span>
+          </div>
+        </section>
+      </FinanceTabsLayout>
+    </GlobalLayout>
+  );
+};

package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/buying-policy-details-layout.scss

@@ -0,0 +1,74 @@
+@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+
+@import "../../../shared/layouts/FinanceTabsLayout/finance-tabs-layout.scss";
+@import "../../components/BuyingPolicyDropdownMenu/buying-policy-dropdown-menu.scss";
+
+[data-fs-buying-policy-details-section] {
+  @import "../../../shared/components/HeaderInside/header-inside.scss";
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
+
+  [data-fs-buying-policy-details-line] {
+    padding: calc(var(--fs-spacing-4) - var(--fs-spacing-0)) 0;
+    border-top: var(--fs-border-width) solid #e0e0e0;
+    display: flex;
+
+    &:first-of-type {
+      border-top: none;
+    }
+
+    [data-fs-buying-policy-details-title] {
+      font-weight: 600;
+      font-size: var(--fs-text-size-2);
+      line-height: var(--fs-spacing-4);
+      margin-right: auto;
+    }
+
+    [data-fs-buying-policy-details-edit-button] {
+      border: var(--fs-border-width) solid #e0e0e0;
+      border-radius: var(--fs-border-radius-pill);
+      padding: var(--fs-spacing-1)
+        calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+      font-weight: 600;
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+      text-align: center;
+      color: #0366dd;
+      cursor: pointer;
+    }
+
+    [data-fs-buying-policy-details-field-label] {
+      width: 14rem;
+      display: inline-block;
+
+      font-weight: 400;
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+
+      color: #5c5c5c;
+    }
+
+    [data-fs-buying-policy-details-field-content] {
+      font-weight: 400;
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+      color: #000000;
+
+      [data-fs-buying-policy-details-level-title] {
+        display: block;
+        margin-top: var(--fs-spacing-3);
+        font-weight: 400;
+        font-size: var(--fs-text-size-1);
+        line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+        color: #5c5c5c;
+      }
+
+      [data-fs-buying-policy-details-level-value] {
+        display: block;
+        font-weight: 500;
+        font-size: var(--fs-text-size-1);
+        line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+        color: #1f1f1f;
+      }
+    }
+  }
+}

package/src/features/buying-policies/layouts/index.ts

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

package/src/features/buying-policies/mocks/buying-policy-data.ts

@@ -0,0 +1,145 @@
+import type { BuyingPolicy } from "../types";
+
+export const buyingPoliciesData: BuyingPolicy[] = [
+  {
+    id: "1",
+    name: "Standard Purchase Policy",
+    description: "Defines the standard rules for purchasing items.",
+    criteria: "budget >= 100",
+    action: {
+      type: "Bypass all policies",
+    },
+  },
+  {
+    id: "2",
+    name: "Bulk Order Policy",
+    description: "Policy for handling bulk orders with discounts.",
+    criteria: "quantity > 100",
+    action: {
+      type: "Sequential approval workflow",
+      levels: ["Manager", "Director", "CEO"],
+    },
+  },
+  {
+    id: "3",
+    name: "Restricted Items Policy",
+    description: "Restricts the purchase of certain items.",
+    criteria: "category == 'restricted'",
+    action: {
+      type: "Deny all",
+    },
+  },
+  {
+    id: "4",
+    name: "Employee Discount Policy",
+    description: "Provides discounts for employees.",
+    criteria: "userRole == 'employee'",
+    action: {
+      type: "Bypass all policies",
+    },
+  },
+  {
+    id: "5",
+    name: "Seasonal Promotion Policy",
+    description: "Handles seasonal promotions and discounts.",
+    criteria: "season == 'holiday'",
+    action: {
+      type: "Sequential approval workflow",
+      levels: ["Marketing Manager", "Finance Director"],
+    },
+  },
+  {
+    id: "6",
+    name: "High-Value Purchase Policy",
+    description: "Requires approval for high-value purchases.",
+    criteria: "purchaseAmount > 10000",
+    action: {
+      type: "Sequential approval workflow",
+      levels: ["Manager", "Finance Director", "CEO"],
+    },
+  },
+  {
+    id: "7",
+    name: "Loyalty Program Policy",
+    description: "Rewards loyal customers with points.",
+    criteria: "loyaltyPoints >= 500",
+    action: {
+      type: "Bypass all policies",
+    },
+  },
+  {
+    id: "8",
+    name: "New Customer Policy",
+    description: "Special offers for new customers.",
+    criteria: "isFirstPurchase == true",
+    action: {
+      type: "Bypass all policies",
+    },
+  },
+  {
+    id: "9",
+    name: "Corporate Account Policy",
+    description: "Custom rules for corporate accounts.",
+    criteria: "accountType == 'corporate'",
+    action: {
+      type: "Sequential approval workflow",
+      levels: ["Account Manager", "Finance Director"],
+    },
+  },
+  {
+    id: "10",
+    name: "Subscription Renewal Policy",
+    description: "Handles subscription renewals.",
+    criteria: "subscriptionStatus == 'active'",
+    action: {
+      type: "Bypass all policies",
+    },
+  },
+  {
+    id: "11",
+    name: "International Shipping Policy",
+    description: "Rules for international orders.",
+    criteria: "shippingCountry != 'domestic'",
+    action: {
+      type: "Sequential approval workflow",
+      levels: ["Logistics Manager", "Finance Director"],
+    },
+  },
+  {
+    id: "12",
+    name: "Return and Refund Policy",
+    description: "Defines rules for returns and refunds.",
+    criteria: "daysSincePurchase <= 30",
+    action: {
+      type: "Deny all",
+    },
+  },
+  {
+    id: "13",
+    name: "Age-Restricted Items Policy",
+    description: "Restricts purchase of age-sensitive items.",
+    criteria: "userAge < 18",
+    action: {
+      type: "Deny all",
+    },
+  },
+  {
+    id: "14",
+    name: "VIP Customer Policy",
+    description: "Exclusive benefits for VIP customers.",
+    criteria: "userStatus == 'VIP'",
+    action: {
+      type: "Bypass all policies",
+    },
+  },
+  {
+    id: "15",
+    name: "Environmental Sustainability Policy",
+    description: "Encourages eco-friendly purchases.",
+    criteria: "productType == 'eco-friendly'",
+    action: {
+      type: "Sequential approval workflow",
+      levels: ["Sustainability Manager", "CEO"],
+    },
+  },
+];

package/src/features/buying-policies/mocks/index.ts

@@ -0,0 +1 @@
+export { buyingPoliciesData } from "./buying-policy-data";

package/src/features/buying-policies/types/BuyingPolicies.ts

@@ -0,0 +1,10 @@
+export type BuyingPolicy = {
+  id: string;
+  name: string;
+  description: string;
+  criteria: string;
+  action: {
+    type: string;
+    levels?: string[];
+  };
+};

package/src/features/buying-policies/types/index.ts

@@ -0,0 +1 @@
+export type { BuyingPolicy } from "./BuyingPolicies";

package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx

@@ -16,6 +16,7 @@ import {
 } from "../../../shared/components";
 import {
   getContractSettingsLinks,
+  getFinanceSettingsLinks,
   getOrganizationSettingsLinks,
 } from "../../../shared/utils";
 import type { UserData } from "../../../users/types";
@@ -30,11 +31,6 @@ export type OrgUnitsDetailsLayoutProps = {
   };
 };
 
-const financeSettings = [
-  { name: "Budgets", link: "/budgets" },
-  { name: "Buying Policies", link: "/buying-policies" },
-];
-
 export const OrgUnitsDetailsLayout = ({
   data: { orgUnit, contracts, user },
 }: OrgUnitsDetailsLayoutProps) => {
@@ -141,11 +137,17 @@ export const OrgUnitsDetailsLayout = ({
             <BasicCard
               data-fs-bp-compliance-settings-card
               footerMessage="Manage finance and compliance settings"
-              footerLink="/"
+              footerLink={buyerPortalRoutes.buyingPolicies({
+                orgUnitId: orgUnit.id,
+                contractId: contracts[0].id,
+              })}
               enableFooter
             >
               <VerticalNav.Menu title="Finance and Compliance">
-                {financeSettings.map((option) => (
+                {getFinanceSettingsLinks({
+                  orgUnitId: orgUnit.id,
+                  contractId: contracts[0].id,
+                }).map((option) => (
                   <VerticalNav.Link key={option.name} link={option.link}>
                     {option.name}
                   </VerticalNav.Link>

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

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { Icon } from "../Icon";
+import { BasicDropdownMenu } from "../BasicDropdownMenu/BasicDropdownMenu";
+import { Dropdown } from "@faststore/components";
+import Link from "next/link";
+
+export type ListLineProps = {
+  children?: ReactNode;
+  title: string;
+  iconName?: string;
+  iconSize?: number;
+  dropdownMenu?: ReactNode;
+  href?: string;
+  onClick?: () => void;
+};
+
+export const ListLine = ({
+  iconName,
+  iconSize = 24,
+  title,
+  dropdownMenu,
+  children,
+  href,
+  onClick,
+  ...otherProps
+}: ListLineProps) => {
+  const ClickComponent = href ? Link : "button";
+
+  return (
+    <li data-fs-bp-line {...otherProps}>
+      {href && (
+        <ClickComponent data-fs-bp-line-link href={href} onClick={onClick} />
+      )}
+      {iconName && (
+        <Icon
+          data-fs-bp-line-icon
+          name={iconName}
+          width={iconSize}
+          height={iconSize}
+        />
+      )}
+      <h3 data-fs-bp-line-title>{title}</h3>
+      {children}
+      {dropdownMenu && (
+        <Dropdown>
+          <BasicDropdownMenu.Trigger />
+          {dropdownMenu}
+        </Dropdown>
+      )}
+    </li>
+  );
+};

package/src/features/shared/components/ListLine/list-line.scss

@@ -0,0 +1,49 @@
+@import "../BasicDropdownMenu/basic-dropdown-menu.scss";
+
+[data-fs-bp-line] {
+  position: relative;
+  list-style: none;
+  border-top: var(--fs-border-width) solid #e0e0e0;
+  padding: var(--fs-spacing-1) var(--fs-spacing-1);
+  align-items: center;
+
+  display: flex;
+  width: 100%;
+
+  &:last-of-type {
+    border-bottom: var(--fs-border-width) solid #e0e0e0;
+  }
+
+  [data-fs-bp-line-link] {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+
+  [data-fs-bp-line-icon] {
+    color: #0366dd;
+    margin-right: var(--fs-spacing-2);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  [data-fs-bp-line-title] {
+    font-weight: 500;
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+    color: #1f1f1f;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  [data-fs-bp-basic-dropdown-menu-trigger] {
+    z-index: 1;
+    margin-left: auto;
+  }
+}

package/src/features/shared/components/index.ts

@@ -66,3 +66,4 @@ export {
   HeaderInside,
   type HeaderInsideProps,
 } from "./HeaderInside/HeaderInside";
+export { ListLine, type ListLineProps } from "./ListLine/ListLine";

package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss

@@ -76,5 +76,6 @@
 
     max-height: calc(100vh - var(--fs-bp-nav-height));
     overflow-y: auto;
+    padding: 0 var(--fs-text-size-7);
   }
 }

package/src/features/shared/layouts/FinanceTabsLayout/FinanceTabsLayout.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { BaseTabsLayout } from "../BaseTabsLayout/BaseTabsLayout";
+import { getFinanceSettingsLinks } from "../../utils";
+import { useBuyerPortal } from "../../hooks";
+
+export type FinanceTabsLayoutProps = {
+  pageName: string;
+  children?: ReactNode;
+};
+
+export const FinanceTabsLayout = ({
+  pageName,
+  children,
+}: FinanceTabsLayoutProps) => {
+  const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
+
+  const verticalLinks = getFinanceSettingsLinks({
+    contractId: currentContract?.id ?? "",
+    orgUnitId: currentOrgUnit?.id ?? "",
+  });
+
+  return (
+    <BaseTabsLayout data-fs-bp-finance-tabs-layout>
+      <BaseTabsLayout.Navbar
+        orgUnitName={currentOrgUnit?.name ?? ""}
+        orgUnitId={currentOrgUnit?.id ?? ""}
+        pageName={pageName}
+        person={{
+          name: currentUser?.name ?? "",
+          role: currentUser?.role ?? "",
+        }}
+      />
+      <BaseTabsLayout.SidebarMenu
+        verticalLinks={verticalLinks}
+        showLetterHighlight={false}
+      />
+      <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
+    </BaseTabsLayout>
+  );
+};

package/src/features/shared/layouts/FinanceTabsLayout/finance-tabs-layout.scss

@@ -0,0 +1,4 @@
+@import "../BaseTabsLayout/base-tabs-layout.scss";
+
+[data-fs-bp-finance-tabs-layout] {
+}

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

@@ -10,3 +10,7 @@ export {
   ContractTabsLayout,
   type ContractTabsLayoutProps,
 } from "./ContractTabsLayout/ContractTabsLayout";
+export {
+  FinanceTabsLayout,
+  type FinanceTabsLayoutProps,
+} from "./FinanceTabsLayout/FinanceTabsLayout";

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

@@ -42,6 +42,18 @@ export const buyerPortalRoutes = {
   releases: (params: { orgUnitId: string; contractId: string }) =>
     replaceParams(`${base}/releases/[orgUnitId]/[contractId]`, params),
 
+  buyingPolicies: (params: { orgUnitId: string; contractId: string }) =>
+    replaceParams(`${base}/buying-policies/[orgUnitId]/[contractId]`, params),
+
+  buyingPolicyDetails: (params: {
+    orgUnitId: string;
+    contractId: string;
+    buyingPolicyId: string;
+  }) =>
+    replaceParams(
+      `${base}/buying-policy/[orgUnitId]/[contractId]/[buyingPolicyId]`,
+      params
+    ),
   // orgUnitId only
   users: (params: { orgUnitId: string }) =>
     replaceParams(`${base}/users/[orgUnitId]`, params),

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

@@ -0,0 +1,15 @@
+import { buyerPortalRoutes } from "./buyerPortalRoutes";
+
+export const getFinanceSettingsLinks = ({
+  orgUnitId,
+  contractId,
+}: {
+  orgUnitId: string;
+  contractId: string;
+}) => [
+  { name: "Budgets", link: "/" },
+  {
+    name: "Buying Policies",
+    link: buyerPortalRoutes.buyingPolicies({ orgUnitId, contractId }),
+  },
+];

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

@@ -25,3 +25,4 @@ export { roles, type Role } from "./roles";
 export { getContractSettingsLinks } from "./getContractSettingsLinks";
 export { getOrganizationSettingsLinks } from "./getOrganizationSettingsLinks";
 export { maskCardNumber, maskCVV, maskExpirationDate } from "./creditCard";
+export { getFinanceSettingsLinks } from "./getFinanceSettingsLinks";

package/src/pages/buying-policies.tsx

@@ -0,0 +1,81 @@
+import {
+  getAddressesService,
+  type GetAddressesServiceProps,
+} from "../features/addresses/services";
+
+import {
+  type ClientContext,
+  getClientContext,
+  getCustomerIdFromCookieServerSide,
+} from "../features/shared/utils";
+import type { AddressData } from "../features/addresses/types";
+import { AddressLayout } from "../features/addresses/layouts";
+import { BuyerPortalProvider } from "../features/shared/components";
+import type { LoaderData } from "../features/shared/types";
+import type { OrgUnitBasicData } from "../features/org-units/types";
+import { getOrgUnitBasicDataService } from "../features/org-units/services";
+import { getUserByIdService } from "../features/users/services";
+import type { UserData } from "../features/users/types";
+import type { ContractData } from "../features/contracts/types";
+import { getContractDetailsService } from "../features/contracts/services";
+import type { BuyingPolicy } from "../features/buying-policies/types";
+import { buyingPoliciesData } from "../features/buying-policies/mocks";
+import { BuyingPoliciesLayout } from "../features/buying-policies/layouts";
+
+export type BuyingPoliciesPageData = {
+  data: { buyingPolicies: BuyingPolicy[] };
+  search: string;
+  context: {
+    currentContract: ContractData | null;
+    clientContext: ClientContext;
+    currentOrgUnit: OrgUnitBasicData | null;
+    currentUser: UserData | null;
+  };
+};
+
+export type BuyingPoliciesPageQuery = GetAddressesServiceProps & {
+  orgUnitId: string;
+  contractId: string;
+  search?: string;
+};
+
+export async function loader(
+  data: LoaderData<BuyingPoliciesPageQuery>
+): Promise<BuyingPoliciesPageData> {
+  const { contractId, orgUnitId, search = "" } = data.query;
+
+  const { cookie, userId, ...clientContext } = await getClientContext(data);
+
+  const currentOrgUnit = await getOrgUnitBasicDataService({
+    id: orgUnitId,
+    cookie,
+  });
+
+  const user = await getUserByIdService({ userId, cookie });
+
+  const contract = await getContractDetailsService({
+    contractId,
+    cookie,
+  });
+
+  return {
+    data: {
+      buyingPolicies: buyingPoliciesData,
+    },
+    search,
+    context: {
+      clientContext: { cookie, userId, ...clientContext },
+      currentOrgUnit,
+      currentUser: user,
+      currentContract: contract,
+    },
+  };
+}
+
+const AddressPage = ({ data, search, context }: BuyingPoliciesPageData) => (
+  <BuyerPortalProvider {...context}>
+    <BuyingPoliciesLayout data={data} search={search} />
+  </BuyerPortalProvider>
+);
+
+export default AddressPage;

package/src/pages/buying-policy-details.tsx

@@ -0,0 +1,72 @@
+import type { GetAddressesServiceProps } from "../features/addresses/services";
+
+import { type ClientContext, getClientContext } from "../features/shared/utils";
+import { BuyerPortalProvider } from "../features/shared/components";
+import type { LoaderData } from "../features/shared/types";
+import type { OrgUnitBasicData } from "../features/org-units/types";
+import { getOrgUnitBasicDataService } from "../features/org-units/services";
+import { getUserByIdService } from "../features/users/services";
+import type { UserData } from "../features/users/types";
+import type { ContractData } from "../features/contracts/types";
+import { getContractDetailsService } from "../features/contracts/services";
+import type { BuyingPolicy } from "../features/buying-policies/types";
+import { buyingPoliciesData } from "../features/buying-policies/mocks";
+import { BuyingPolicyDetailsLayout } from "../features/buying-policies/layouts/BuyingPolicyDetailsLayout/BuyingPolicyDetailsLayout";
+
+export type BuyingPolicyDetailsPageData = {
+  data: { buyingPolicy: BuyingPolicy | null };
+  context: {
+    currentContract: ContractData | null;
+    clientContext: ClientContext;
+    currentOrgUnit: OrgUnitBasicData | null;
+    currentUser: UserData | null;
+  };
+};
+
+export type BuyingPolicyDetailsPageQuery = GetAddressesServiceProps & {
+  orgUnitId: string;
+  contractId: string;
+  buyingPolicyId: string;
+};
+
+export async function loader(
+  data: LoaderData<BuyingPolicyDetailsPageQuery>
+): Promise<BuyingPolicyDetailsPageData> {
+  const { contractId, orgUnitId, buyingPolicyId } = data.query;
+
+  const { cookie, userId, ...clientContext } = await getClientContext(data);
+
+  const currentOrgUnit = await getOrgUnitBasicDataService({
+    id: orgUnitId,
+    cookie,
+  });
+
+  const user = await getUserByIdService({ userId, cookie });
+
+  const contract = await getContractDetailsService({
+    contractId,
+    cookie,
+  });
+
+  return {
+    data: {
+      buyingPolicy:
+        buyingPoliciesData.find((policy) => policy.id === buyingPolicyId) ??
+        null,
+    },
+    context: {
+      clientContext: { cookie, userId, ...clientContext },
+      currentOrgUnit,
+      currentUser: user,
+      currentContract: contract,
+    },
+  };
+}
+
+const AddressPage = ({ data, context }: BuyingPolicyDetailsPageData) => (
+  <BuyerPortalProvider {...context}>
+    <BuyingPolicyDetailsLayout data={data} />
+  </BuyerPortalProvider>
+);
+
+export default AddressPage;

package/src/themes/layouts.scss

@@ -21,3 +21,7 @@
 
 // Credit Cards
 @import "../features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss";
+
+// Buying Policies
+@import "../features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss";
+@import "../features/buying-policies/layouts/BuyingPolicyDetailsLayout/buying-policy-details-layout.scss";