@vtex/faststore-plugin-buyer-portal 1.1.6 → 1.1.7

package/CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Address Recipients Add & Delete Feature
 - Address Recipients Edit Feature
+- Add Buying Policy integration with BFF
 
 ### Fixed
 

package/package.json

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

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

@@ -57,7 +57,8 @@ export const AddBuyingPolicyDrawer = ({
     onSuccess: handleAddBuyingPolicySuccess,
     onError: () => {
       pushToast({
-        message: "Error adding buying policy",
+        message: "An error occurred. Please try again.",
+        title: "Error",
         status: "ERROR",
       });
     },

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

@@ -16,7 +16,7 @@ import {
   InputText,
   LevelDivider,
 } from "../../../shared/components";
-import { buyingPolicyOptions, type BuyingPolicy } from "../../types";
+import { type BuyingPolicy } from "../../types";
 import { OrgUnitInputSearch } from "../../../shared/components/OrgUnitInputSearch/OrgUnitInputSearch";
 import {
   BUYING_POLICIES_WORKFLOW_TYPES,
@@ -24,7 +24,15 @@ import {
   orderFieldsCriteriaOptions,
   spendingLimitsCriteriaOptions,
 } from "../../utils";
-import { Dropdown, DropdownButton, DropdownItem } from "@faststore/ui";
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownItem,
+  Skeleton,
+  Tooltip,
+} from "@faststore/ui";
+import { getHighlightedText } from "../../utils/criteriaHighlightSyntax";
+import { BUYING_POLICIES_WORKFLOW_LABELS } from "../../utils/buyingPoliciesWorkflowTypes";
 
 const LIMIT_OF_LEVELS = 5;
 
@@ -46,6 +54,7 @@ export type BasicBuyingPolicyDrawerProps = Omit<
   initialValues?: BuyingPolicyForm;
   drawerTitle?: string;
   saveButtonLabel?: string;
+  isDrawerLoading?: boolean;
 };
 
 export const BasicBuyingPolicyDrawer = ({
@@ -54,6 +63,7 @@ export const BasicBuyingPolicyDrawer = ({
   close,
   onCreate,
   isLoading,
+  isDrawerLoading,
   onConfirm,
   orgUnitId,
   contractId,
@@ -61,9 +71,10 @@ export const BasicBuyingPolicyDrawer = ({
   ...props
 }: BasicBuyingPolicyDrawerProps) => {
   const [form, setForm] = useState<BuyingPolicyForm>(initialValues);
+  const [isTouched, setIsTouched] = useState(false);
 
   useEffect(() => {
-    if (initialValues) {
+    if (initialValues && !isTouched) {
       setForm((prev) => ({
         ...prev,
         ...initialValues,
@@ -71,7 +82,7 @@ export const BasicBuyingPolicyDrawer = ({
     }
   }, [initialValues]);
 
-  const [isTouched, setIsTouched] = useState(false);
+  const [criteriaFocused, setCriteriaFocused] = useState(false);
 
   const { name, description, criteria, action } = form;
 
@@ -92,7 +103,9 @@ export const BasicBuyingPolicyDrawer = ({
         return false;
       }
 
-      if (valueAction.type === BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL) {
+      if (
+        valueAction.type === BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL_WORKFLOW
+      ) {
         return (
           valueAction.levels?.length &&
           valueAction.levels.every((level) => {
@@ -172,28 +185,46 @@ export const BasicBuyingPolicyDrawer = ({
           Define policy name and description to inform buyers during checkout
         </h4>
 
-        <InputText
-          label="Name"
-          value={name}
-          hasError={isTouched && !name?.trim()}
-          onChange={(event) => updateField("name", event.target.value)}
-        />
+        {isDrawerLoading ? (
+          <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+        ) : (
+          <InputText
+            label="Name"
+            value={name}
+            hasError={isTouched && !name?.trim()}
+            onChange={(event) => updateField("name", event.target.value)}
+          />
+        )}
 
         <ErrorMessage
           show={isTouched && !name?.trim()}
           message="Name is required"
         />
 
-        <InputText
-          label="Description"
-          value={description}
-          wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
-          hasError={isTouched && !description?.trim()}
-          onChange={(event) => updateField("description", event.target.value)}
-        />
+        {isDrawerLoading ? (
+          <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+        ) : (
+          <InputText
+            label="Description"
+            value={description}
+            wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
+            hasError={isTouched && !description?.trim()}
+            onChange={(event) => updateField("description", event.target.value)}
+            icon={
+              <Tooltip
+                data-fs-bp-basic-buying-policy-drawer-tooltip
+                placement="left-center"
+                maxWidth={225}
+                content="Describe how this policy works so buyers know why an order may be denied or require approval."
+              >
+                <Icon name="Info" />
+              </Tooltip>
+            }
+          />
+        )}
 
         <ErrorMessage
-          show={isTouched && !name?.trim()}
+          show={isTouched && !description?.trim()}
           message="Description is required"
         />
 
@@ -203,120 +234,151 @@ export const BasicBuyingPolicyDrawer = ({
           <a href="https://jsonata.org/">JSONata</a>
         </h4>
 
-        <InputText
-          label=""
-          value={criteria}
-          wrapperProps={
-            {
-              style: { marginTop: 16, marginBottom: 16 },
-              "data-fs-bp-input-text-criteria": true,
-              "data-fs-bp-input-text-code": true,
-            } as DetailedHTMLProps<
-              HTMLAttributes<HTMLDivElement>,
-              HTMLDivElement
-            >
-          }
-          hasError={isTouched && !description?.trim()}
-          onChange={(event) => updateField("criteria", event.target.value)}
-        />
-
-        <ErrorMessage
-          show={isTouched && !name?.trim()}
-          message="Criteria is required"
-        />
-
-        <div data-fs-bp-criteria-selectors-wrapper>
-          <Dropdown>
-            <DropdownButton asChild>
-              <button data-fs-bp-criteria-selector-trigger type="button">
-                Set spending limit criteria
-              </button>
-            </DropdownButton>
-            <BasicDropdownMenu>
-              {spendingLimitsCriteriaOptions.map((option) => (
-                <DropdownItem
-                  key={option.label}
-                  onClick={() => {
-                    updateField("criteria", option.criteria);
-                  }}
-                >
-                  {option.label}
-                </DropdownItem>
-              ))}
-            </BasicDropdownMenu>
-          </Dropdown>
-
-          <Dropdown>
-            <DropdownButton asChild>
-              <button type="button" data-fs-bp-criteria-selector-trigger>
-                Set order field criteria
-              </button>
-            </DropdownButton>
-            <BasicDropdownMenu>
-              {orderFieldsCriteriaOptions.map((option) => (
-                <DropdownItem
-                  key={option.label}
-                  onClick={() => {
-                    updateField("criteria", option.criteria);
-                  }}
-                  dismissOnClick
+        {isDrawerLoading ? (
+          <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+        ) : (
+          <>
+            <div data-fs-bp-basic-buying-policy-criteria-input>
+              <InputText
+                label={""}
+                value={criteria}
+                wrapperProps={
+                  {
+                    style: { marginTop: 16, marginBottom: 16 },
+                    "data-fs-bp-input-text-criteria": true,
+                    "data-fs-bp-input-text-code": true,
+                  } as DetailedHTMLProps<
+                    HTMLAttributes<HTMLDivElement>,
+                    HTMLDivElement
+                  >
+                }
+                hasError={isTouched && !criteria?.trim()}
+                onChange={(event) =>
+                  updateField("criteria", event.target.value)
+                }
+                onBlur={() => setCriteriaFocused(false)}
+                isCustomFocused={criteriaFocused}
+              />
+
+              {!criteriaFocused && (
+                <div
+                  data-fs-bp-basic-buying-policy-criteria-input-highlighted
+                  onClick={() => setCriteriaFocused(true)}
                 >
-                  {option.label}
-                </DropdownItem>
-              ))}
-            </BasicDropdownMenu>
-          </Dropdown>
-        </div>
+                  {criteria ? (
+                    getHighlightedText(criteria)
+                  ) : (
+                    <span data-fs-bp-label>Example: value {">"} 10000</span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <ErrorMessage
+              show={isTouched && !criteria?.trim()}
+              message="Criteria is required"
+            />
+
+            <div data-fs-bp-criteria-selectors-wrapper>
+              <Dropdown>
+                <DropdownButton asChild>
+                  <button data-fs-bp-criteria-selector-trigger type="button">
+                    Set spending limit criteria
+                  </button>
+                </DropdownButton>
+                <BasicDropdownMenu align="left">
+                  {spendingLimitsCriteriaOptions.map((option) => (
+                    <DropdownItem
+                      key={option.label}
+                      onClick={() => {
+                        updateField("criteria", option.criteria);
+                      }}
+                    >
+                      <span>{getHighlightedText(option.label)}</span>
+                    </DropdownItem>
+                  ))}
+                </BasicDropdownMenu>
+              </Dropdown>
+
+              <Dropdown>
+                <DropdownButton asChild>
+                  <button type="button" data-fs-bp-criteria-selector-trigger>
+                    Set order field criteria
+                  </button>
+                </DropdownButton>
+                <BasicDropdownMenu align="left">
+                  {orderFieldsCriteriaOptions.map((option) => (
+                    <DropdownItem
+                      key={option.label}
+                      onClick={() => {
+                        updateField("criteria", option.criteria);
+                      }}
+                      dismissOnClick
+                    >
+                      <span>{getHighlightedText(option.label)}</span>
+                    </DropdownItem>
+                  ))}
+                </BasicDropdownMenu>
+              </Dropdown>
+            </div>
+          </>
+        )}
 
         <h3>Action</h3>
         <h4>Define how orders that meet the criteria will be handled</h4>
+        {isDrawerLoading ? (
+          <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+        ) : (
+          <AutocompleteDropdown
+            label=""
+            wrapperProps={
+              {
+                "data-fs-bp-input-text-criteria": true,
+              } as DetailedHTMLProps<
+                HTMLAttributes<HTMLDivElement>,
+                HTMLDivElement
+              >
+            }
+            value={BUYING_POLICIES_WORKFLOW_LABELS[action.type]}
+            options={
+              Object.keys(BUYING_POLICIES_WORKFLOW_LABELS) as Array<
+                keyof typeof BUYING_POLICIES_WORKFLOW_LABELS
+              >
+            }
+            onConfirmKeyPress={(option) => {
+              updateField("action", {
+                type: option,
+                levels: [],
+              });
+            }}
+            hasError={isTouched && !action.type?.trim()}
+            renderOption={(optionActionType, index) => (
+              <AutocompleteDropdown.Item
+                key={optionActionType}
+                closeOnClick
+                index={index}
+                isSelected={action.type === optionActionType}
+                onClick={() => {
+                  updateField("action", {
+                    type: optionActionType,
+                    levels: [
+                      {
+                        id: "",
+                        name: "",
+                      },
+                    ],
+                  });
+                }}
+              >
+                {BUYING_POLICIES_WORKFLOW_LABELS[optionActionType]}
+              </AutocompleteDropdown.Item>
+            )}
+          />
+        )}
 
-        <AutocompleteDropdown
-          label=""
-          wrapperProps={
-            {
-              "data-fs-bp-input-text-criteria": true,
-            } as DetailedHTMLProps<
-              HTMLAttributes<HTMLDivElement>,
-              HTMLDivElement
-            >
-          }
-          value={action.type}
-          options={[...buyingPolicyOptions]}
-          onConfirmKeyPress={(option) => {
-            updateField("action", {
-              type: option,
-              levels: [],
-            });
-          }}
-          hasError={isTouched && !action.type?.trim()}
-          renderOption={(optionActionType, index) => (
-            <AutocompleteDropdown.Item
-              key={optionActionType}
-              closeOnClick
-              index={index}
-              isSelected={action.type === optionActionType}
-              onClick={() => {
-                updateField("action", {
-                  type: optionActionType,
-                  levels: [
-                    {
-                      id: "",
-                      name: "",
-                    },
-                  ],
-                });
-              }}
-            >
-              {optionActionType}
-            </AutocompleteDropdown.Item>
-          )}
-        />
-
-        {action.type === BUYING_POLICIES_WORKFLOW_TYPES.BYPASS && (
+        {action.type === BUYING_POLICIES_WORKFLOW_TYPES.BYPASS_ALL && (
           <InputText.Legend>
-            When this policy is applied, all opther buying policy will be
-            ignored
+            When this policy is applied, all other buying policy will be ignored
           </InputText.Legend>
         )}
 
@@ -325,7 +387,8 @@ export const BasicBuyingPolicyDrawer = ({
           message="Action is required"
         />
 
-        {form.action.type === BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL && (
+        {form.action.type ===
+          BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL_WORKFLOW && (
           <>
             {form.action.levels?.map((level, index) => (
               <Fragment key={`${level.id}-${index}`}>
@@ -347,8 +410,8 @@ export const BasicBuyingPolicyDrawer = ({
                 </div>
 
                 <ErrorMessage
-                  show={isTouched && !name?.trim()}
-                  message="Criteria is required"
+                  show={isTouched && !level.name?.trim()}
+                  message="Sequential workflow is required"
                 />
               </Fragment>
             ))}

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

@@ -1,13 +1,27 @@
 @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
 @import "../../../shared/components/OrgUnitInputSearch/org-unit-input-search.scss";
 
+[data-fs-dropdown-menu] {
+  [data-fs-dropdown-item] {
+    [data-fs-bp-highlight] {
+      color: #b521b6;
+    }
+  }
+}
+
 [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";
+
+  &[data-fs-slide-over-size="partial"] {
+    max-width: calc(var(--fs-grid-breakpoint-phone) * 3);
+  }
 
   [data-fs-bp-basic-drawer-body] {
     padding-bottom: 90px;
+
     h3 {
       font-weight: var(--fs-text-weight-semibold);
       font-size: var(--fs-text-size-2);
@@ -52,17 +66,74 @@
       gap: var(--fs-spacing-2);
     }
 
+    [data-fs-bp-basic-buying-policy-drawer-tooltip] {
+      background-color: #1f1f1f;
+      font-weight: var(--fs-text-weight-regular);
+      font-size: var(--fs-text-size-0);
+      line-height: var(--fs-spacing-3);
+      color: #ffffff;
+      border-radius: calc(var(--fs-border-radius) * 2);
+      padding: var(--fs-spacing-1) var(--fs-spacing-2);
+
+      [data-fs-tooltip-indicator] {
+        border-left-color: #1f1f1f;
+      }
+    }
+
+    [data-fs-bp-basic-buying-policy-criteria-input] {
+      position: relative;
+      [data-fs-bp-basic-buying-policy-criteria-input-highlighted] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background-color: #f5f5f5;
+        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);
+        border-radius: calc(var(--fs-border-radius) * 2);
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+
+        [data-fs-bp-label] {
+          color: #5c5c5c;
+        }
+
+        [data-fs-bp-highlight] {
+          color: #b521b6;
+        }
+
+        [data-fs-bp-highlight-string] {
+          color: #027b4e;
+        }
+      }
+    }
+
     [data-fs-bp-input-text-criteria] {
       color: #5c5c5c;
 
+      label {
+        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-size: var(--fs-text-size-1);
       }
 
       [data-fs-bp-input-text-input] {
         bottom: 50%;
         transform: translateY(50%);
-        font-size: var(--fs-text-size-2);
+        font-size: var(--fs-text-size-1);
       }
     }
 

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

@@ -38,7 +38,7 @@ export const BuyingPolicyDropdownMenu = ({
 
   return (
     <>
-      <BasicDropdownMenu>
+      <BasicDropdownMenu align="right">
         <DropdownItem
           onClick={() =>
             push(

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

@@ -33,7 +33,7 @@ export const DeleteBuyingPolicyDrawer = ({
 
   const handleRemoveSuccess = () => {
     pushToast({
-      message: "User successfully edited",
+      message: "Buying policy deleted successfully",
       status: "INFO",
     });
     onDelete?.();
@@ -52,23 +52,25 @@ export const DeleteBuyingPolicyDrawer = ({
     });
   };
 
-  const { removeBuyingPolicy } = useRemoveBuyingPolicy({
-    onSuccess: handleRemoveSuccess,
-    onError: () => {
-      pushToast({
-        message: "An error occurred while deleting the user",
-        status: "ERROR",
-      });
-    },
-  });
+  const { removeBuyingPolicy, isRemoveBuyingPolicyLoading } =
+    useRemoveBuyingPolicy({
+      onSuccess: handleRemoveSuccess,
+      onError: () => {
+        pushToast({
+          message: "An error occurred. Please try again.",
+          title: "Error",
+          status: "ERROR",
+        });
+      },
+    });
 
   const isDeleteButtonEnabled =
     buyingPolicyNameConfirmation === buyingPolicy.name;
 
   return (
-    <BasicDrawer {...otherProps} data-fs-bp-delete-user-drawer close={close}>
-      <BasicDrawer.Heading title="Delete user" onClose={close} />
-      <BasicDrawer.Body data-fs-bp-delete-user-drawer-body>
+    <BasicDrawer {...otherProps} data-fs-bp-delete-buying-policy-drawer close={close}>
+      <BasicDrawer.Heading title="Delete buying policy" onClose={close} />
+      <BasicDrawer.Body data-fs-bp-delete-buying-policy-drawer-body>
         <p>
           Permanently delete{" "}
           <a
@@ -105,9 +107,10 @@ export const DeleteBuyingPolicyDrawer = ({
           Cancel
         </BasicDrawer.Button>
         <BasicDrawer.Button
-          variant="confirm"
+          variant="danger"
           onClick={handleDeleteClick}
           disabled={!isDeleteButtonEnabled}
+          isLoading={isRemoveBuyingPolicyLoading}
         >
           Delete
         </BasicDrawer.Button>

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

@@ -24,7 +24,7 @@ export const UpdateBuyingPolicyDrawer = ({
   buyingPolicyId,
   ...props
 }: UpdateBuyingPolicyDrawerProps) => {
-  const { buyingPolicy } = useGetBuyingPolicy(
+  const { buyingPolicy, isBuyingPolicyLoading } = useGetBuyingPolicy(
     buyingPolicyId,
     orgUnitId,
     contractId
@@ -64,9 +64,9 @@ export const UpdateBuyingPolicyDrawer = ({
     useUpdateBuyingPolicy({
       onSuccess: handleUpdateBuyingPolicySuccess,
       onError: (err) => {
-        // TODO: Handle error
         pushToast({
-          message: "Error adding buying policy",
+          message: "An error occurred. Please try again.",
+          title: "Error",
           status: "ERROR",
         });
       },
@@ -78,10 +78,10 @@ export const UpdateBuyingPolicyDrawer = ({
       saveButtonLabel="Save"
       close={close}
       isLoading={isUpdateBuyingPolicyLoading}
+      isDrawerLoading={isBuyingPolicyLoading}
       onConfirm={(form) =>
         updateBuyingPolicy({
           buyingPolicyId,
-
           buyingPolicy: {
             ...form,
           },

package/src/features/buying-policies/hooks/useGetBuyingPolicy.ts

@@ -8,7 +8,7 @@ export const useGetBuyingPolicy = (
   options?: QueryOptions<AwaitedType<typeof getBuyingPolicyService>>
 ) => {
   const { data, error, isLoading, refetch } = useQuery(
-    `api/buying-policy/${id}`,
+    `api/buying-policies/${id}`,
     ({ cookie }) =>
       getBuyingPolicyService({
         orgUnitId,