@vtex/faststore-plugin-buyer-portal 1.3.27 → 1.3.29

package/src/features/shared/services/logger/analytics/types.ts

@@ -0,0 +1,108 @@
+/**
+ * Analytics event categories
+ */
+export type EventCategory =
+  | "click"
+  | "view"
+  | "apiAnswer"
+  | "webVitals"
+  | "creation"
+  | "edition"
+  | "error"
+  | "timing"
+  | "interaction";
+
+/**
+ * Analytics event fields
+ */
+export interface DataIngestionApiFields {
+  /** The type of the event */
+  event_category?: EventCategory;
+  /** The name of the event. Has to be unique through the app. */
+  event_name: string;
+  /** Additional informations */
+  /** Time spent on page */
+  time_on_page?: number;
+  /** Additional metadata about the event */
+  metadata?: Record<string, unknown>;
+  /** Entity type (e.g., 'budget', 'buying_policy') */
+  entity_type?: string;
+  /** Entity ID */
+  entity_id?: string;
+  /** Is this a new entity? */
+  is_new?: boolean;
+  /** Duration in milliseconds */
+  duration_ms?: number;
+  /** Step name for multi-step flows */
+  step_name?: string;
+  /** Flow name for multi-step flows */
+  flow_name?: string;
+  /** Component type for interactions */
+  component_type?: string;
+  /** Action performed */
+  action?: string;
+}
+
+/**
+ * Internal params for data ingestion API
+ */
+export interface DataIngestionApiParams {
+  [key: string]: string | number | boolean | object | undefined;
+  workspace?: string;
+}
+
+/**
+ * Step timing properties
+ */
+export interface StepTimingProperties {
+  flow_name: string;
+  step_name: string;
+  from_step?: string;
+  to_step?: string;
+  duration_ms: number;
+  step_index?: number;
+  total_steps?: number;
+}
+
+/**
+ * Error tracking properties
+ */
+export interface ErrorEventProperties {
+  error_message: string;
+  error_type?: string;
+  error_stack?: string;
+  entity_type?: string;
+  entity_id?: string;
+  is_new_entity: boolean;
+  operation?: string; // create, update, delete
+}
+
+/**
+ * Interaction properties
+ */
+export interface InteractionEventProperties {
+  component_type: string;
+  component_id?: string;
+  action: string;
+  selected_option?: string;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * Generic entity creation properties
+ */
+export interface EntityCreatedProperties {
+  entity_type: string;
+  entity_id?: string;
+  properties: Record<string, unknown>;
+}
+
+/**
+ * Generic entity edition properties
+ */
+export interface EntityEditedProperties {
+  entity_type: string;
+  entity_id: string;
+  changed_fields?: string[];
+  properties: Record<string, unknown>;
+}

package/src/features/shared/services/logger/index.ts

@@ -2,3 +2,4 @@ export * from "./types";
 export * from "./constants";
 export * from "./context";
 export * from "./otlp-logger.service";
+export * from "./analytics/analytics";

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

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.27";
+export const CURRENT_VERSION = "1.3.29";

package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx

@@ -12,6 +12,8 @@ import {
   Icon,
   InputText,
 } from "../../../shared/components";
+import { useAnalytics } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { useAddUserToOrgUnit } from "../../hooks";
@@ -31,6 +33,11 @@ export const CreateUserDrawer = ({
 }: CreateUserDrawerProps) => {
   const { pushToast } = useUI();
   const router = useRouter();
+  const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
+    entityType: "user",
+    defaultTimerName: "user_creation",
+    shouldTrackDefaultTimer: true,
+  });
   const [drawerState, setDrawerState] = useState<
     "CREATE_USER" | "USER_ALREADY_EXISTS"
   >("CREATE_USER");
@@ -74,6 +81,15 @@ export const CreateUserDrawer = ({
   };
 
   const handleAddUserSuccess = ({ user }: { user: { id: string } }) => {
+    trackEntityCreated(ANALYTICS_EVENTS.USER_CREATED, "user", {
+      user_name: name,
+      user_email: email,
+      user_phone: phone,
+      roles_count: roles.length,
+      role_ids: roles,
+      org_unit_id: orgUnitId,
+    });
+
     pushToast({
       message: "User successfully added",
       status: "INFO",
@@ -112,6 +128,14 @@ export const CreateUserDrawer = ({
         };
       };
 
+      trackEntityCreateError(ANALYTICS_EVENTS.USER_CREATE_ERROR, err, {
+        org_unit_id: orgUnitId,
+        error_type:
+          error.code === "USER_ALREADY_EXISTS"
+            ? "user_already_exists"
+            : "unknown",
+      });
+
       setUserAlreadyInUse({
         ...error.user,
         orgUnit: error.orgUnit,

package/src/features/users/components/DeleteUserDrawer/DeleteUserDrawer.tsx

@@ -8,6 +8,8 @@ import {
   InputText,
   type BasicDrawerProps,
 } from "../../../shared/components";
+import { useAnalytics } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useRemoveUserFromOrgUnit } from "../../hooks";
 
@@ -26,10 +28,22 @@ export const DeleteUserDrawer = ({
   const [userNameConfirmation, setUserNameConfirmation] = useState("");
 
   const { pushToast } = useUI();
-
   const { orgUnit } = useOrgUnitByUser(user.id);
+  const { trackEvent } = useAnalytics({
+    entityType: "user",
+    entityId: user.id,
+    defaultTimerName: "user_delete",
+    shouldTrackDefaultTimer: true,
+  });
 
   const handleRemoveSuccess = () => {
+    trackEvent(ANALYTICS_EVENTS.USER_DELETED, {
+      user_id: user.id,
+      user_name: user.name,
+      org_unit_id: orgUnit?.id,
+      entity_type: "user",
+    });
+
     pushToast({
       message: "User successfully deleted",
       status: "INFO",
@@ -52,7 +66,14 @@ export const DeleteUserDrawer = ({
   const { removeUserFromOrgUnit, isRemoveUserFromOrgUnitLoading } =
     useRemoveUserFromOrgUnit({
       onSuccess: handleRemoveSuccess,
-      onError: () => {
+      onError: (error) => {
+        trackEvent(ANALYTICS_EVENTS.USER_DELETE_ERROR, {
+          entity_id: user.id,
+          user_name: user.name,
+          error_message: error instanceof Error ? error.message : String(error),
+          org_unit_id: orgUnit?.id,
+        });
+
         pushToast({
           message: "An error occurred while deleting the user",
           status: "ERROR",

package/src/features/users/components/UpdateUserDrawer/UpdateUserDrawer.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { Skeleton, useUI } from "@faststore/ui";
 
@@ -10,6 +10,8 @@ import {
   ErrorMessage,
   InputText,
 } from "../../../shared/components";
+import { useAnalytics } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { useGetUserById, useUpdateUser } from "../../hooks";
 
@@ -29,16 +31,25 @@ export const UpdateUserDrawer = ({
   ...props
 }: UpdateUserDrawerProps) => {
   const { pushToast } = useUI();
+  const { trackEntityEdited, trackEntityEditError } = useAnalytics({
+    entityType: "user",
+    entityId: userId,
+    defaultTimerName: "user_edit",
+    shouldTrackDefaultTimer: true,
+  });
+  const initialRolesRef = useRef<string[]>([]);
 
   const { isUserLoading } = useGetUserById(
     { orgUnitId, userId },
     {
       onSuccess: (data) => {
+        const userRoles = data?.roles ? data.roles : [];
+        initialRolesRef.current = userRoles;
         setForm({
           name: data?.name ?? "",
           email: data?.email ?? "",
           phone: data?.phone ?? "",
-          roles: data?.roles ? data.roles : [],
+          roles: userRoles,
         });
       },
       onError: () => {
@@ -74,6 +85,16 @@ export const UpdateUserDrawer = ({
   };
 
   const handleUpdateUserSuccess = () => {
+    trackEntityEdited(ANALYTICS_EVENTS.USER_EDITED, {
+      user_id: userId,
+      user_name: name,
+      user_phone: phone,
+      old_roles: initialRolesRef.current,
+      new_roles: roles,
+      roles_count: roles.length,
+      org_unit_id: orgUnitId,
+    });
+
     pushToast({
       message: "User successfully updated",
       status: "INFO",
@@ -84,7 +105,17 @@ export const UpdateUserDrawer = ({
 
   const { updateUser, isUpdateUserLoading } = useUpdateUser({
     onSuccess: handleUpdateUserSuccess,
-    onError: () => {
+    onError: (error) => {
+      trackEntityEditError(
+        ANALYTICS_EVENTS.USER_EDIT_ERROR,
+        "user",
+        userId,
+        error,
+        {
+          org_unit_id: orgUnitId,
+        }
+      );
+
       pushToast({
         message: "Failed to update user",
         status: "ERROR",
@@ -94,7 +125,17 @@ export const UpdateUserDrawer = ({
 
   const { updateRoles, isUpdateRolesLoading } = useUpdateRoles({
     onSuccess: handleUpdateUserSuccess,
-    onError: () => {
+    onError: (error) => {
+      trackEntityEditError(
+        ANALYTICS_EVENTS.USER_EDIT_ERROR,
+        "user",
+        userId,
+        error,
+        {
+          org_unit_id: orgUnitId,
+        }
+      );
+
       pushToast({
         message: "Failed to update user",
         status: "ERROR",

package/src/themes/colors.scss

@@ -0,0 +1,10 @@
+// Mixin para aplicar cor de texto
+@mixin bp-text-color($color-name: 'neutral-8') {
+  color: var(--fs-bp-color-#{$color-name});
+}
+
+// Mixin para aplicar cor de fundo
+@mixin bp-bg-color($color-name: 'neutral-0') {
+  background-color: var(--fs-bp-color-#{$color-name});
+}
+

package/src/themes/layouts.scss

@@ -1,3 +1,7 @@
+// Tokens
+@import "./tokens.scss";
+@import "./typography.scss";
+
 // Global
 @import "../features/shared/layouts/GlobalLayout/global-layout.scss";
 

package/src/themes/tokens.scss

@@ -0,0 +1,169 @@
+:root {
+  // Font size
+  --fs-bp-text-size-0: .75rem;
+  --fs-bp-text-size-1: .875rem;
+  --fs-bp-text-size-2: 1rem;
+  --fs-bp-text-size-3: 1.25rem;
+  --fs-bp-text-size-4: 1.5rem;
+  --fs-bp-text-size-5: 1.75rem;
+  --fs-bp-text-size-6: 1.875rem;
+  --fs-bp-text-size-7: 2rem;
+  --fs-bp-text-size-8: 2.125rem;
+  --fs-bp-text-size-9: 2.25rem;
+  --fs-bp-text-size-10: 2.5rem;
+
+  // Font size - semantic
+  --fs-bp-text-size-base: var(--fs-bp-text-size-2);
+  --fs-bp-text-caption: var(--fs-bp-text-size-0);
+  --fs-bp-text-body: var(--fs-bp-text-size-1);
+  --fs-bp-text-body-big: var(--fs-bp-text-size-2);
+  --fs-bp-text-display-1: var(--fs-bp-text-size-8);
+  --fs-bp-text-display-2: var(--fs-bp-text-size-7);
+  --fs-bp-text-display-3: var(--fs-bp-text-size-6);
+  --fs-bp-text-display-4: var(--fs-bp-text-size-5);
+  --fs-bp-text-display-5: var(--fs-bp-text-size-4);
+  --fs-bp-text-display-6: var(--fs-bp-text-size-3);
+
+  @media (min-width: 768px) {
+    --fs-bp-text-size-6: 2rem;
+    --fs-bp-text-size-7: 2.5rem;
+    --fs-bp-text-size-8: 3rem;
+    --fs-bp-text-size-9: 3.5rem;
+    --fs-bp-text-size-10: 5.25rem;
+  }
+
+  // Weight
+  --fs-bp-weight-regular: 400;
+  --fs-bp-weight-medium: 500;
+  --fs-bp-weight-semibold: 600;
+  --fs-bp-weight-bold: 700;
+
+  // Letter spacing
+  --fs-bp-letter-spacing-0: 0;
+  --fs-bp-letter-spacing-1: -0.01em;
+  --fs-bp-letter-spacing-2: -0.02em;
+  --fs-bp-letter-spacing-3: -0.04em;
+
+  // Line height
+  --fs-bp-line-height-base: 1.2;
+
+  // Colors - neutral
+  --fs-bp-color-neutral-0: #FFFFFF;
+  --fs-bp-color-neutral-1: #F5F5F5;
+  --fs-bp-color-neutral-2: #EBEBEB;
+  --fs-bp-color-neutral-3: #E0E0E0;
+  --fs-bp-color-neutral-4: #D6D6D6;
+  --fs-bp-color-neutral-5: #ADADAD;
+  --fs-bp-color-neutral-6: #858585;
+  --fs-bp-color-neutral-7: #5C5C5C;
+  --fs-bp-color-neutral-8: #1F1F1F;
+  --fs-bp-color-neutral-9: #000000;
+
+  // Colors - accent
+  --fs-bp-color-accent-0: #F1F8FD;
+  --fs-bp-color-accent-1: #CBE9FF;
+  --fs-bp-color-accent-2: #0366DD;
+
+  // Colors - success
+  --fs-bp-color-success-0: #E9FCE3;
+  --fs-bp-color-success-1: #AFF79E;
+  --fs-bp-color-success-2: #08A822;
+
+  // Colors - critical
+  --fs-bp-color-critical-0: #FDF6F5;
+  --fs-bp-color-critical-1: #FFDFD9;
+  --fs-bp-color-critical-2: #D31A15;
+
+  // Colors - warning
+  --fs-bp-color-warning-0: #FDF5E9;
+  --fs-bp-color-warning-1: #FFE0AE;
+  --fs-bp-color-warning-2: #F78612;
+
+  --fs-bp-color-brand: var(--fs-bp-color-accent-2);
+  --fs-bp-color-white: var(--fs-bp-color-neutral-0);
+  --fs-bp-color-black: var(--fs-bp-color-neutral-9);
+
+  // Border radius
+  --fs-bp-border-radius-0: 0;
+  --fs-bp-border-radius-1: .25rem;
+  --fs-bp-border-radius-2: .5rem;
+  --fs-bp-border-radius-3: .75rem;
+  --fs-bp-border-radius-4: 1.25rem;
+  --fs-bp-border-radius-full: 100000rem;
+
+  // Spacing
+  --fs-bp-spacing-0: 0; 
+  --fs-bp-spacing-1: .25rem;
+  --fs-bp-spacing-2: .5rem;
+  --fs-bp-spacing-3: .75rem;
+  --fs-bp-spacing-4: 1rem;
+  --fs-bp-spacing-5: 1.25rem;
+  --fs-bp-spacing-6: 1.5rem;
+  --fs-bp-spacing-7: 1.75rem;
+  --fs-bp-spacing-8: 2rem;
+  --fs-bp-spacing-9: 2.5rem;
+  --fs-bp-spacing-10: 3rem;
+  --fs-bp-spacing-11: 3.5rem;
+  --fs-bp-spacing-12: 3.75rem;
+  --fs-bp-spacing-13: 4.5rem;
+  --fs-bp-spacing-14: 5rem;
+  --fs-bp-spacing-15: 5.5rem;
+  --fs-bp-spacing-16: 6rem;
+
+  // Margins
+  --fs-bp-margin-0: var(--fs-bp-spacing-0);
+  --fs-bp-margin-1: var(--fs-bp-spacing-1);
+  --fs-bp-margin-2: var(--fs-bp-spacing-2);
+  --fs-bp-margin-3: var(--fs-bp-spacing-3);
+  --fs-bp-margin-4: var(--fs-bp-spacing-4);
+  --fs-bp-margin-5: var(--fs-bp-spacing-5);
+  --fs-bp-margin-6: var(--fs-bp-spacing-6);
+  --fs-bp-margin-7: var(--fs-bp-spacing-7);
+  --fs-bp-margin-8: var(--fs-bp-spacing-8);
+  --fs-bp-margin-9: var(--fs-bp-spacing-9);
+  --fs-bp-margin-10: var(--fs-bp-spacing-10);
+  --fs-bp-margin-11: var(--fs-bp-spacing-11);
+  --fs-bp-margin-12: var(--fs-bp-spacing-12);
+  --fs-bp-margin-13: var(--fs-bp-spacing-13);
+  --fs-bp-margin-14: var(--fs-bp-spacing-14);
+  --fs-bp-margin-15: var(--fs-bp-spacing-15);
+  --fs-bp-margin-16: var(--fs-bp-spacing-16);
+
+  // Paddings
+  --fs-bp-padding-0: var(--fs-bp-spacing-0);
+  --fs-bp-padding-1: var(--fs-bp-spacing-1);
+  --fs-bp-padding-2: var(--fs-bp-spacing-2);
+  --fs-bp-padding-3: var(--fs-bp-spacing-3);
+  --fs-bp-padding-4: var(--fs-bp-spacing-4);
+  --fs-bp-padding-5: var(--fs-bp-spacing-5);
+  --fs-bp-padding-6: var(--fs-bp-spacing-6);
+  --fs-bp-padding-7: var(--fs-bp-spacing-7);
+  --fs-bp-padding-8: var(--fs-bp-spacing-8);
+  --fs-bp-padding-9: var(--fs-bp-spacing-9);
+  --fs-bp-padding-10: var(--fs-bp-spacing-10);
+  --fs-bp-padding-11: var(--fs-bp-spacing-11);
+  --fs-bp-padding-12: var(--fs-bp-spacing-12);
+  --fs-bp-padding-13: var(--fs-bp-spacing-13);
+  --fs-bp-padding-14: var(--fs-bp-spacing-14);
+  --fs-bp-padding-15: var(--fs-bp-spacing-15);
+  --fs-bp-padding-16: var(--fs-bp-spacing-16);
+
+  // Gap
+  --fs-bp-gap-0: var(--fs-bp-spacing-0);
+  --fs-bp-gap-1: var(--fs-bp-spacing-1);
+  --fs-bp-gap-2: var(--fs-bp-spacing-2);
+  --fs-bp-gap-3: var(--fs-bp-spacing-3);
+  --fs-bp-gap-4: var(--fs-bp-spacing-4);
+  --fs-bp-gap-5: var(--fs-bp-spacing-5);
+  --fs-bp-gap-6: var(--fs-bp-spacing-6);
+  --fs-bp-gap-7: var(--fs-bp-spacing-7);
+  --fs-bp-gap-8: var(--fs-bp-spacing-8);
+  --fs-bp-gap-9: var(--fs-bp-spacing-9);
+  --fs-bp-gap-10: var(--fs-bp-spacing-10);
+  --fs-bp-gap-11: var(--fs-bp-spacing-11);
+  --fs-bp-gap-12: var(--fs-bp-spacing-12);
+  --fs-bp-gap-13: var(--fs-bp-spacing-13);
+  --fs-bp-gap-14: var(--fs-bp-spacing-14);
+  --fs-bp-gap-15: var(--fs-bp-spacing-15);
+  --fs-bp-gap-16: var(--fs-bp-spacing-16);
+}

package/src/themes/typography.scss

@@ -0,0 +1,76 @@
+$typography: (
+  'caption': (
+    size: var(--fs-bp-text-caption),
+    weight: var(--fs-bp-weight-regular),
+    spacing: var(--fs-bp-letter-spacing-0),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'body': (
+    size: var(--fs-bp-text-body),
+    weight: var(--fs-bp-weight-regular),
+    spacing: var(--fs-bp-letter-spacing-1),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'emphasis': (
+    size: var(--fs-bp-text-body),
+    weight: var(--fs-bp-weight-medium),
+    spacing: var(--fs-bp-letter-spacing-1),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'action': (
+    size: var(--fs-bp-text-body),
+    weight: var(--fs-bp-weight-semibold),
+    spacing: var(--fs-bp-letter-spacing-1),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'body-big': (
+    size: var(--fs-bp-text-body-big),
+    weight: var(--fs-bp-weight-regular),
+    spacing: var(--fs-bp-letter-spacing-2),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'display-1': (
+    size: var(--fs-bp-text-display-1),
+    weight: var(--fs-bp-weight-semibold),
+    spacing: var(--fs-bp-letter-spacing-2),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'display-2': (
+    size: var(--fs-bp-text-display-2),
+    weight: var(--fs-bp-weight-semibold),
+    spacing: var(--fs-bp-letter-spacing-2),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'display-3': (
+    size: var(--fs-bp-text-display-3),
+    weight: var(--fs-bp-weight-semibold),
+    spacing: var(--fs-bp-letter-spacing-2),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'display-4': (
+    size: var(--fs-bp-text-display-4),
+    weight: var(--fs-bp-weight-semibold),
+    spacing: var(--fs-bp-letter-spacing-2),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'display-5': (
+    size: var(--fs-bp-text-display-5),
+    weight: var(--fs-bp-weight-semibold),
+    spacing: var(--fs-bp-letter-spacing-2),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+  'display-6': (
+    size: var(--fs-bp-text-display-6),
+    weight: var(--fs-bp-weight-semibold),
+    spacing: var(--fs-bp-letter-spacing-2),
+    line-height: var(--fs-bp-line-height-base),
+  ),
+);
+
+@mixin text-style($type) {
+  $style: map-get($typography, $type);
+  font-size: map-get($style, size);
+  font-weight: map-get($style, weight);
+  line-height: map-get($style, line-height);
+  letter-spacing: map-get($style, spacing);
+}