@vtex/faststore-plugin-buyer-portal 1.3.26 → 1.3.28

package/src/features/budgets/components/CreateBudgetDrawer/CreateBudgetDrawer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -9,7 +9,8 @@ import {
   Icon,
   type BasicDrawerProps,
 } from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
+import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { sortingOptionsAllocations } from "../../../shared/utils";
 import { parseAmount } from "../../../shared/utils/budgetAmountParse";
 import { getKeyByValue } from "../../../shared/utils/getKeyByValue";
@@ -65,6 +66,12 @@ export const CreateBudgetDrawer = ({
   } = useBuyerPortal();
   const router = useRouter();
   const { pushToast } = useUI();
+  const { trackEvent, trackEntityCreated, trackEntityCreateError } =
+    useAnalytics({
+      entityType: "budget",
+      defaultTimerName: "budget_creation",
+      shouldTrackDefaultTimer: true,
+    });
 
   const {
     filter,
@@ -86,6 +93,21 @@ export const CreateBudgetDrawer = ({
 
   type DrawerStep = "form" | "allocations" | "confirmation";
   const [step, setStep] = useState<DrawerStep>("form");
+  const [previousStep, setPreviousStep] = useState<DrawerStep | null>(null);
+
+  useEffect(() => {
+    if (previousStep !== null && previousStep !== step) {
+      trackEvent(ANALYTICS_EVENTS.BUDGET_STEP_TIMING, {
+        flow_name: "budget_creation",
+        from_step: previousStep,
+        to_step: step,
+        step_name: step,
+        org_unit_id: unitId,
+        contract_id: contractId,
+      });
+    }
+    setPreviousStep(step);
+  }, [step, previousStep, trackEvent, unitId, contractId]);
 
   const [budget, setBudget] = useState<BudgetInput>({
     name: "",
@@ -132,6 +154,16 @@ export const CreateBudgetDrawer = ({
             return;
           }
 
+          // Track successful budget creation
+          trackEntityCreated(ANALYTICS_EVENTS.BUDGET_CREATED, "budget", {
+            budget_name: budget.name,
+            amount: budget.amount,
+            has_notifications: Boolean(budget.notifications?.hasNotification),
+            allocations_count: selectedAllocations.length,
+            org_unit_id: unitId,
+            contract_id: contractId,
+          });
+
           pushToast({
             message: "Budget added successfully.",
             status: "INFO",
@@ -139,8 +171,14 @@ export const CreateBudgetDrawer = ({
           close();
           router.reload();
         },
-        onError: (error: Error) =>
-          pushToast({ message: error.message, status: "ERROR" }),
+        onError: (error: Error) => {
+          trackEntityCreateError(ANALYTICS_EVENTS.BUDGET_CREATE_ERROR, error, {
+            org_unit_id: unitId,
+            contract_id: contractId,
+          });
+
+          pushToast({ message: error.message, status: "ERROR" });
+        },
       },
     }
   );
@@ -149,6 +187,18 @@ export const CreateBudgetDrawer = ({
     useUpdateBudget({
       options: {
         onSuccess: () => {
+          // Track successful budget creation (with policy)
+          if (firstBudget) {
+            trackEntityCreated(ANALYTICS_EVENTS.BUDGET_CREATED, "budget", {
+              budget_name: budget.name,
+              amount: budget.amount,
+              has_notifications: Boolean(budget.notifications?.hasNotification),
+              has_policy: true,
+              org_unit_id: unitId,
+              contract_id: contractId,
+            });
+          }
+
           pushToast({
             message: "Budget added successfully.",
             status: "INFO",
@@ -167,6 +217,11 @@ export const CreateBudgetDrawer = ({
           router.reload();
         },
         onError: (error: Error) => {
+          trackEntityCreateError(ANALYTICS_EVENTS.BUDGET_CREATE_ERROR, error, {
+            org_unit_id: unitId,
+            contract_id: contractId,
+          });
+
           pushToast({
             message: error?.message || "An error occurred. Please try again.",
             status: "ERROR",

package/src/features/budgets/components/EditBudgetDrawer/EditBudgetDrawer.tsx

@@ -5,7 +5,8 @@ import { useRouter } from "next/router";
 import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
+import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { parseAmount } from "../../../shared/utils/budgetAmountParse";
 import { useUpdateBudget } from "../../hooks";
 import { BudgetAddForm } from "../BudgetAddForm/BudgetAddForm";
@@ -75,6 +76,12 @@ export const EditBudgetDrawer = ({
   const { clientContext } = useBuyerPortal();
   const { pushToast } = useUI();
   const router = useRouter();
+  const { trackEntityEdited, trackEntityEditError } = useAnalytics({
+    entityType: "budget",
+    entityId: budgetId,
+    defaultTimerName: "budget_edit",
+    shouldTrackDefaultTimer: true,
+  });
 
   const [budget, setBudget] = useState<BudgetInput>(() =>
     getInitialBudget(initialBudget)
@@ -86,12 +93,32 @@ export const EditBudgetDrawer = ({
   const { mutate: updateBudget, isLoading } = useUpdateBudget({
     options: {
       onSuccess: () => {
+        trackEntityEdited(ANALYTICS_EVENTS.BUDGET_EDITED, {
+          budget_id: budgetId,
+          budget_name: budget.name,
+          amount: budget.amount,
+          has_notifications: Boolean(budget.notifications?.hasNotification),
+          org_unit_id: orgUnitId,
+          contract_id: contractId,
+        });
+
         pushToast({ message: "Budget updated successfully.", status: "INFO" });
         onSubmit?.(budget);
         close();
         router.reload();
       },
       onError: (error: Error) => {
+        trackEntityEditError(
+          ANALYTICS_EVENTS.BUDGET_EDIT_ERROR,
+          "budget",
+          budgetId,
+          error,
+          {
+            org_unit_id: orgUnitId,
+            contract_id: contractId,
+          }
+        );
+
         pushToast({
           message: error?.message || "An error occurred. Please try again.",
           status: "ERROR",

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

@@ -1,13 +1,21 @@
+import { useRef } from "react";
+
 import { useRouter } from "next/router";
 
 import { useUI } from "@faststore/ui";
 
 import { BasicBuyingPolicyDrawer, type BasicBuyingPolicyDrawerProps } from "..";
+import { useAnalytics } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useAddBuyingPolicy } from "../../hooks";
-import { buyingPolicyDefault } from "../../utils";
+import {
+  buyingPolicyDefault,
+  BUYING_POLICIES_WORKFLOW_TYPES,
+} from "../../utils";
 
 import type { BuyingPolicy } from "../../types";
+import type { BuyingPolicyForm } from "../BasicBuyingPolicyDrawer/BasicBuyingPolicyDrawer";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { id, ...defaultBuyingPolicyValues } = buyingPolicyDefault;
@@ -30,8 +38,33 @@ export const AddBuyingPolicyDrawer = ({
 }: AddBuyingPolicyDrawerProps) => {
   const { pushToast } = useUI();
   const router = useRouter();
+  const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
+    entityType: "buying_policy",
+    defaultTimerName: "buying_policy_creation",
+    shouldTrackDefaultTimer: true,
+  });
+  const formDataRef = useRef<BuyingPolicyForm | null>(null);
 
   const handleAddBuyingPolicySuccess = (data: BuyingPolicy) => {
+    const formData = formDataRef.current;
+
+    trackEntityCreated(
+      ANALYTICS_EVENTS.BUYING_POLICY_CREATED,
+      "buying_policy",
+      {
+        policy_name: formData?.name,
+        policy_description: formData?.description,
+        policy_criteria: formData?.criteria,
+        policy_type: formData?.action.type,
+        ...(formData?.action.type ===
+          BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL_WORKFLOW && {
+          approval_levels_count: formData?.action.levels?.length,
+        }),
+        org_unit_id: orgUnitId,
+        contract_id: contractId,
+      }
+    );
+
     pushToast({
       message: "Buying policy added successfully",
       status: "INFO",
@@ -60,7 +93,16 @@ export const AddBuyingPolicyDrawer = ({
 
   const { addBuyingPolicy, isAddBuyingPolicyLoading } = useAddBuyingPolicy({
     onSuccess: handleAddBuyingPolicySuccess,
-    onError: () => {
+    onError: (error) => {
+      trackEntityCreateError(
+        ANALYTICS_EVENTS.BUYING_POLICY_CREATE_ERROR,
+        error,
+        {
+          org_unit_id: orgUnitId,
+          contract_id: contractId,
+        }
+      );
+
       pushToast({
         message: "An error occurred. Please try again.",
         title: "Error",
@@ -73,15 +115,16 @@ export const AddBuyingPolicyDrawer = ({
     <BasicBuyingPolicyDrawer
       close={close}
       isLoading={isAddBuyingPolicyLoading}
-      onConfirm={(form) =>
+      onConfirm={(form) => {
+        formDataRef.current = form;
         addBuyingPolicy({
           buyingPolicy: {
             ...form,
           },
           orgUnitId,
           contractId,
-        })
-      }
+        });
+      }}
       orgUnitId={orgUnitId}
       contractId={contractId}
       initialValues={defaultBuyingPolicyValues}

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss

@@ -1,14 +1,14 @@
-@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
-@import "../../../shared/components/OrgUnitInputSearch/org-unit-input-search.scss";
-@import "../../../shared/components/CustomDropdown/custom-dropdown.scss";
-@import "../BudgetCriteriaSelector/budget-criteria-selector.scss";
+@import '../../../shared/components/BasicDrawer/basic-drawer.scss';
+@import '../../../shared/components/OrgUnitInputSearch/org-unit-input-search.scss';
+@import '../../../shared/components/CustomDropdown/custom-dropdown.scss';
+@import '../BudgetCriteriaSelector/budget-criteria-selector.scss';
 
 [data-fs-bp-basic-buying-policy-drawer] {
-  @import "../../../shared/components/InputText/input-text.scss";
-  @import "../../../shared/components/ErrorMessage/error-message.scss";
-  @import "../../../shared/components/LevelDivider/level-divider.scss";
-  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+  @import '../../../shared/components/InputText/input-text.scss';
+  @import '../../../shared/components/ErrorMessage/error-message.scss';
+  @import '../../../shared/components/LevelDivider/level-divider.scss';
+  @import '@faststore/ui/src/components/molecules/Tooltip/styles.scss';
+  @import '@faststore/ui/src/components/molecules/Dropdown/styles.scss';
 
   [data-fs-bp-autocomplete-dropdown] {
     [data-fs-bp-input-text-input] {
@@ -65,7 +65,7 @@
       gap: var(--fs-spacing-2);
       margin-top: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
 
-      @include media("<=tablet") {
+      @include media('<=tablet') {
         justify-content: center;
       }
     }
@@ -94,15 +94,16 @@
         height: 100%;
         margin: 0;
         background-color: #f5f5f5;
-        font-family: "Roboto", monospace;
+        font-family: 'Roboto', monospace;
         font-size: var(--fs-text-size-1);
         border: var(--fs-border-width) solid #d6d6d6;
-        padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-          var(--fs-spacing-3);
+        padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0)) var(--fs-spacing-3);
         border-radius: calc(var(--fs-border-radius) * 2);
         text-wrap: nowrap;
         text-overflow: ellipsis;
         white-space: nowrap;
+        overflow: hidden;
+        max-width: 840px;
         cursor: pointer;
 
         [data-fs-bp-label] {
@@ -119,18 +120,17 @@
       }
     }
 
-
     [data-fs-bp-input-text-criteria] {
       color: #5c5c5c;
 
       label {
-        font-family: "Roboto", monospace;
+        font-family: 'Roboto', monospace;
         font-size: var(--fs-text-size-1);
       }
 
       &[data-fs-bp-input-text-code] {
         background-color: #f5f5f5;
-        font-family: "Roboto", monospace;
+        font-family: 'Roboto', monospace;
         font-size: var(--fs-text-size-1);
       }
 
@@ -142,8 +142,7 @@
     }
 
     [data-fs-bp-buying-policy-add-level-button] {
-      padding: var(--fs-spacing-2)
-        calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+      padding: var(--fs-spacing-2) calc(var(--fs-spacing-0) + var(--fs-spacing-3));
       margin: calc(var(--fs-spacing-0) + var(--fs-spacing-3)) 0;
       border-radius: var(--fs-border-radius-pill);
       border: var(--fs-border-width) solid #d6d6d6;
@@ -160,4 +159,12 @@
   [data-fs-bp-basic-buying-policy-drawer-skeleton] {
     margin-bottom: var(--fs-spacing-3);
   }
+
+  @include media('<=tablet') {
+    [data-fs-bp-basic-drawer-body],
+    [data-fs-bp-basic-drawer-heading],
+    [data-fs-bp-basic-drawer-footer] {
+      max-width: 430px;
+    }
+  }
 }

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

@@ -7,7 +7,8 @@ import {
   InputText,
   type BasicDrawerProps,
 } from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
+import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useRemoveBuyingPolicy } from "../../hooks";
 
@@ -32,8 +33,22 @@ export const DeleteBuyingPolicyDrawer = ({
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
   const { pushToast } = useUI();
+  const { trackEvent } = useAnalytics({
+    entityType: "buying_policy",
+    entityId: buyingPolicy.id,
+    defaultTimerName: "buying_policy_delete",
+    shouldTrackDefaultTimer: true,
+  });
 
   const handleRemoveSuccess = () => {
+    trackEvent(ANALYTICS_EVENTS.BUYING_POLICY_DELETED, {
+      policy_id: buyingPolicy.id,
+      policy_name: buyingPolicy.name,
+      org_unit_id: currentOrgUnit?.id,
+      contract_id: currentContract?.id,
+      entity_type: "buying_policy",
+    });
+
     pushToast({
       message: "Buying policy deleted successfully",
       status: "INFO",
@@ -57,7 +72,18 @@ export const DeleteBuyingPolicyDrawer = ({
   const { removeBuyingPolicy, isRemoveBuyingPolicyLoading } =
     useRemoveBuyingPolicy({
       onSuccess: handleRemoveSuccess,
-      onError: () => {
+      onError: (error) => {
+        const errorMessage = typeof error === "string" ? error : error.message;
+
+        trackEvent(ANALYTICS_EVENTS.BUYING_POLICY_DELETE_ERROR, {
+          entity_type: "buying_policy",
+          entity_id: buyingPolicy.id,
+          policy_name: buyingPolicy.name,
+          org_unit_id: currentOrgUnit?.id,
+          contract_id: currentContract?.id,
+          error_message: errorMessage,
+        });
+
         pushToast({
           message: "An error occurred. Please try again.",
           title: "Error",

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

@@ -1,11 +1,20 @@
+import { useRef } from "react";
+
 import { useRouter } from "next/router";
 
 import { useUI } from "@faststore/ui";
 
 import { BasicBuyingPolicyDrawer, type BasicBuyingPolicyDrawerProps } from "..";
+import { useAnalytics } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useGetBuyingPolicy, useUpdateBuyingPolicy } from "../../hooks";
-import { buyingPolicyDefault } from "../../utils";
+import {
+  buyingPolicyDefault,
+  BUYING_POLICIES_WORKFLOW_TYPES,
+} from "../../utils";
+
+import type { BuyingPolicyForm } from "../BasicBuyingPolicyDrawer/BasicBuyingPolicyDrawer";
 
 export type UpdateBuyingPolicyDrawerProps = Omit<
   BasicBuyingPolicyDrawerProps,
@@ -33,8 +42,31 @@ export const UpdateBuyingPolicyDrawer = ({
 
   const { pushToast } = useUI();
   const router = useRouter();
+  const { trackEntityEdited, trackEntityEditError } = useAnalytics({
+    entityType: "buying_policy",
+    entityId: buyingPolicyId,
+    defaultTimerName: "buying_policy_edit",
+    shouldTrackDefaultTimer: true,
+  });
+  const formDataRef = useRef<BuyingPolicyForm | null>(null);
 
   const handleUpdateBuyingPolicySuccess = () => {
+    const formData = formDataRef.current;
+
+    trackEntityEdited(ANALYTICS_EVENTS.BUYING_POLICY_EDITED, {
+      policy_id: buyingPolicyId,
+      policy_name: formData?.name,
+      policy_type: formData?.action.type,
+      policy_description: formData?.description,
+      policy_criteria: formData?.criteria,
+      ...(formData?.action.type ===
+        BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL_WORKFLOW && {
+        approval_levels_count: formData?.action.levels?.length,
+      }),
+      org_unit_id: orgUnitId,
+      contract_id: contractId,
+    });
+
     pushToast({
       message: "Buying policy updated successfully",
       status: "INFO",
@@ -64,7 +96,18 @@ export const UpdateBuyingPolicyDrawer = ({
   const { updateBuyingPolicy, isUpdateBuyingPolicyLoading } =
     useUpdateBuyingPolicy({
       onSuccess: handleUpdateBuyingPolicySuccess,
-      onError: () => {
+      onError: (error) => {
+        trackEntityEditError(
+          ANALYTICS_EVENTS.BUYING_POLICY_EDIT_ERROR,
+          "buying_policy",
+          buyingPolicyId,
+          error,
+          {
+            org_unit_id: orgUnitId,
+            contract_id: contractId,
+          }
+        );
+
         pushToast({
           message: "An error occurred. Please try again.",
           title: "Error",
@@ -80,7 +123,8 @@ export const UpdateBuyingPolicyDrawer = ({
       close={close}
       isLoading={isUpdateBuyingPolicyLoading}
       isDrawerLoading={isBuyingPolicyLoading}
-      onConfirm={(form) =>
+      onConfirm={(form) => {
+        formDataRef.current = form;
         updateBuyingPolicy({
           buyingPolicyId,
           buyingPolicy: {
@@ -88,8 +132,8 @@ export const UpdateBuyingPolicyDrawer = ({
           },
           orgUnitId,
           contractId,
-        })
-      }
+        });
+      }}
       initialValues={{ ...buyingPolicyDefault, ...(buyingPolicy ?? {}) }}
       orgUnitId={orgUnitId}
       contractId={contractId}

package/src/features/custom-fields/components/CreateCustomFieldValueDrawer/CreateCustomFieldValueDrawer.tsx

@@ -4,12 +4,13 @@ import { useUI } from "@faststore/ui";
 
 import { BasicDrawerProps } from "../../../shared/components";
 import { CreateEntityDrawer } from "../../../shared/components/CustomField/create-custom-field/CreateCustomFieldDrawer";
-import { useBuyerPortal } from "../../../shared/hooks";
+import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
 import {
   useCreateCustomFieldValue,
   useCustomFieldValues,
   useAddCustomFieldValueToUnitScope,
 } from "../../../shared/hooks/custom-field";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 
 export type CustomFieldType = "Cost Center" | "PO Number" | "Release";
 
@@ -35,8 +36,14 @@ export function CreateCustomFieldValueDrawer({
   const {
     clientContext: { cookie },
   } = useBuyerPortal();
+  const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
+    entityType: "custom_field",
+    defaultTimerName: "custom_field_creation",
+    shouldTrackDefaultTimer: isOpen,
+  });
 
   const [search, setSearch] = useState<string | null>(null);
+  const [createdFieldName, setCreatedFieldName] = useState<string>("");
 
   const {
     mutate: createCustomFieldValueToUnitScope,
@@ -44,6 +51,18 @@ export function CreateCustomFieldValueDrawer({
   } = useAddCustomFieldValueToUnitScope({
     options: {
       onSuccess: () => {
+        trackEntityCreated(
+          ANALYTICS_EVENTS.CUSTOM_FIELD_CREATED,
+          "custom_field",
+          {
+            custom_field_type: customField,
+            custom_field_name: createdFieldName,
+            is_shared: true,
+            org_unit_id: unitId,
+            contract_id: contractId,
+          }
+        );
+
         pushToast({
           message: `${customField} added successfully`,
           status: "INFO",
@@ -52,11 +71,22 @@ export function CreateCustomFieldValueDrawer({
         refetch();
         close();
       },
-      onError: (error) =>
+      onError: (error) => {
+        trackEntityCreateError(
+          ANALYTICS_EVENTS.CUSTOM_FIELD_CREATE_ERROR,
+          error,
+          {
+            custom_field_type: customField,
+            org_unit_id: unitId,
+            contract_id: contractId,
+          }
+        );
+
         pushToast({
           message: error.message,
           status: "ERROR",
-        }),
+        });
+      },
     },
   });
 
@@ -66,6 +96,18 @@ export function CreateCustomFieldValueDrawer({
   } = useCreateCustomFieldValue({
     options: {
       onSuccess: () => {
+        trackEntityCreated(
+          ANALYTICS_EVENTS.CUSTOM_FIELD_CREATED,
+          "custom_field",
+          {
+            custom_field_type: customField,
+            custom_field_name: createdFieldName,
+            is_shared: false,
+            org_unit_id: unitId,
+            contract_id: contractId,
+          }
+        );
+
         pushToast({
           message: `${customField} added successfully`,
           status: "INFO",
@@ -74,11 +116,22 @@ export function CreateCustomFieldValueDrawer({
         refetch();
         close();
       },
-      onError: (error) =>
+      onError: (error) => {
+        trackEntityCreateError(
+          ANALYTICS_EVENTS.CUSTOM_FIELD_CREATE_ERROR,
+          error,
+          {
+            custom_field_type: customField,
+            org_unit_id: unitId,
+            contract_id: contractId,
+          }
+        );
+
         pushToast({
           message: error.message,
           status: "ERROR",
-        }),
+        });
+      },
     },
   });
 
@@ -104,6 +157,8 @@ export function CreateCustomFieldValueDrawer({
   });
 
   function create(name: string, customFieldValueId?: string) {
+    setCreatedFieldName(name);
+
     if (customFieldValueId) {
       return createCustomFieldValueToUnitScope({
         data: {