@vtex/faststore-plugin-buyer-portal 1.0.39 → 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.39",
+  "version": "1.0.41",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {

package/plugin.config.js

@@ -24,10 +24,10 @@ module.exports = {
     //   path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
     //   appLayout: false,
     // },
-    // "credit-cards": {
-    //   path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
-    //   appLayout: false,
-    // },
+    "credit-cards": {
+      path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
+      appLayout: false,
+    },
     // collections: {
     //   path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
     //   appLayout: false,
@@ -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/public/buyer-portal-icons.svg

@@ -337,4 +337,14 @@
       fill="currentColor" />
 
   </symbol>
-</svg>
+
+  <symbol
+  id="Rename"
+  viewBox="0 0 17 13"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.0712 12.6473V2.64734H6.0712V0.647339H16.0712V2.64734H12.0712V12.6473H10.0712ZM2.5712 12.6473V6.64734H0.0711975V4.64734H7.0712V6.64734H4.5712V12.6473H2.5712Z" fill="currentColor"/>
+  </symbol>
+
+
+</svg>

package/src/features/addresses/components/AddressForm/AddressForm.tsx

@@ -25,6 +25,7 @@ export type AddressFormProps = {
   completedAddress?: AddressData;
   setCompletedAddress?: (completedAddress: AddressData) => void;
   isEdit?: boolean;
+  fixedType?: boolean;
 };
 
 export const AddressForm = ({
@@ -37,6 +38,7 @@ export const AddressForm = ({
   setUseExistingAddress,
   completedAddress,
   setCompletedAddress,
+  fixedType = false,
 }: AddressFormProps) => {
   const addressTypeOptions = ["Shipping", "Billing", "Sold To"];
 
@@ -60,11 +62,13 @@ export const AddressForm = ({
     });
   };
 
+  const hideLabel = isEdit || fixedType;
+
   return (
     <>
       {!useExistingAddress ? (
         <div>
-          {!isEdit && <span>Fill in the address details</span>}
+          {!hideLabel && <span>Fill in the address details</span>}
 
           <AutocompleteDropdown
             data-fs-bp-create-address-country-selector
@@ -242,32 +246,34 @@ export const AddressForm = ({
             />
           )}
 
-          <AutocompleteDropdown
-            label="Address Type"
-            value={address.types}
-            options={addressTypeOptions}
-            onConfirmKeyPress={(option) =>
-              setAddress({ ...address, types: [option] })
-            }
-            renderOption={(option, index) => (
-              <AutocompleteDropdown.Item
-                key={`${option}-${index}`}
-                closeOnClick={true}
-                index={index}
-                isSelected={
-                  address?.types[0]?.toLocaleLowerCase() ===
-                  option.toLocaleLowerCase()
-                }
-                onClick={() => setAddress({ ...address, types: [option] })}
-              >
-                {option}
-                {address?.types[0]?.toLowerCase() ===
-                  option.toLocaleLowerCase() && (
-                  <Icon name="Check" width={12} height={12} />
-                )}
-              </AutocompleteDropdown.Item>
-            )}
-          />
+          {!fixedType && (
+            <AutocompleteDropdown
+              label="Address Type"
+              value={address.types}
+              options={addressTypeOptions}
+              onConfirmKeyPress={(option) =>
+                setAddress({ ...address, types: [option] })
+              }
+              renderOption={(option, index) => (
+                <AutocompleteDropdown.Item
+                  key={`${option}-${index}`}
+                  closeOnClick={true}
+                  index={index}
+                  isSelected={
+                    address?.types[0]?.toLocaleLowerCase() ===
+                    option.toLocaleLowerCase()
+                  }
+                  onClick={() => setAddress({ ...address, types: [option] })}
+                >
+                  {option}
+                  {address?.types[0]?.toLowerCase() ===
+                    option.toLocaleLowerCase() && (
+                    <Icon name="Check" width={12} height={12} />
+                  )}
+                </AutocompleteDropdown.Item>
+              )}
+            />
+          )}
         </div>
       ) : (
         <ExistingAddress

package/src/features/addresses/components/AddressLine/AddressLine.tsx

@@ -1,4 +1,4 @@
-import { Toggle, Dropdown, DropdownButton } from "@faststore/ui";
+import { Dropdown } from "@faststore/ui";
 import Link from "next/link";
 import { BasicDropdownMenu, Icon, Tag } from "../../../shared/components";
 import type { AddressData } from "../../types";

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";