@vtex/faststore-plugin-buyer-portal 1.0.44 → 1.0.45

package/CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add Buying Policies Page
 - Add Buying Policy Details Page
+- Add Buying Policy Drawers
 
 ### Added
 

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -339,12 +339,19 @@
   </symbol>
 
   <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"/>
+    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>
 
+  <symbol id="MinusCircle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M7 13H17V11H7V13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
+      fill="currentColor" />
+  </symbol>
 
-</svg>
+</svg>

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

@@ -0,0 +1,83 @@
+import { useUI } from "@faststore/ui";
+import { useRouter } from "next/router";
+import type { BasicDrawerProps } from "../../../shared/components";
+import { useAddBuyingPolicy } from "../../hooks";
+import type { BuyingPolicy } from "../../types";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { BasicBuyingPolicyDrawer, type BasicBuyingPolicyDrawerProps } from "..";
+
+export type AddBuyingPolicyDrawerProps = Omit<
+  BasicBuyingPolicyDrawerProps,
+  "children"
+> & {
+  onCreate?: () => void;
+  orgUnitId: string;
+  contractId: string;
+};
+
+export const AddBuyingPolicyDrawer = ({
+  close,
+  onCreate,
+  orgUnitId,
+  contractId,
+  ...props
+}: AddBuyingPolicyDrawerProps) => {
+  const { pushToast } = useUI();
+  const router = useRouter();
+
+  const handleAddBuyingPolicySuccess = (data: BuyingPolicy) => {
+    pushToast({
+      message: "Buying policy added successfully",
+      status: "INFO",
+      icon: (
+        <button
+          data-fs-bp-toast-view-button
+          type="button"
+          onClick={() => {
+            //TODO: Redirect to the user page
+            router.push(
+              buyerPortalRoutes.buyingPolicyDetails({
+                orgUnitId,
+                contractId,
+                buyingPolicyId: data.id,
+              })
+            );
+          }}
+        >
+          View
+        </button>
+      ),
+    });
+    onCreate?.();
+    close();
+  };
+
+  const { addBuyingPolicy, isAddBuyingPolicyLoading } = useAddBuyingPolicy({
+    onSuccess: handleAddBuyingPolicySuccess,
+    onError: () => {
+      pushToast({
+        message: "Error adding buying policy",
+        status: "ERROR",
+      });
+    },
+  });
+
+  return (
+    <BasicBuyingPolicyDrawer
+      close={close}
+      isLoading={isAddBuyingPolicyLoading}
+      onConfirm={(form) =>
+        addBuyingPolicy({
+          buyingPolicy: {
+            ...form,
+          },
+          orgUnitId,
+          contractId,
+        })
+      }
+      orgUnitId={orgUnitId}
+      contractId={contractId}
+      {...props}
+    />
+  );
+};

package/src/features/buying-policies/components/AddBuyingPolicyDrawer/add-buying-policy-drawer.scss

@@ -0,0 +1 @@
+@import "../BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss";

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

@@ -0,0 +1,383 @@
+import {
+  type DetailedHTMLProps,
+  Fragment,
+  type HTMLAttributes,
+  useEffect,
+  useState,
+} from "react";
+
+import {
+  type BasicDrawerProps,
+  AutocompleteDropdown,
+  BasicDrawer,
+  BasicDropdownMenu,
+  ErrorMessage,
+  Icon,
+  InputText,
+  LevelDivider,
+} from "../../../shared/components";
+import { buyingPolicyOptions, type BuyingPolicy } from "../../types";
+import { OrgUnitInputSearch } from "../../../shared/components/OrgUnitInputSearch/OrgUnitInputSearch";
+import {
+  buyingPolicyDefault,
+  orderFieldsCriteriaOptions,
+  spendingLimitsCriteriaOptions,
+} from "../../utils";
+import { Dropdown, DropdownButton, DropdownItem } from "@faststore/ui";
+
+const LIMIT_OF_LEVELS = 5;
+
+export type BuyingPolicyForm = Omit<BuyingPolicy, "id"> & {
+  id?: string;
+};
+
+const defaultBuyingPolicyValues: BuyingPolicyForm = buyingPolicyDefault;
+
+export type BasicBuyingPolicyDrawerProps = Omit<
+  BasicDrawerProps,
+  "children"
+> & {
+  onCreate?: () => void;
+  onConfirm?: (buyingPolicyForm: BuyingPolicyForm) => void;
+  isLoading?: boolean;
+  orgUnitId: string;
+  contractId: string;
+  initialValues?: BuyingPolicyForm;
+  drawerTitle?: string;
+  saveButtonLabel?: string;
+};
+
+export const BasicBuyingPolicyDrawer = ({
+  drawerTitle = "Add new buying policy",
+  saveButtonLabel = "Add",
+  close,
+  onCreate,
+  isLoading,
+  onConfirm,
+  orgUnitId,
+  contractId,
+  initialValues = defaultBuyingPolicyValues,
+  ...props
+}: BasicBuyingPolicyDrawerProps) => {
+  const [form, setForm] = useState<BuyingPolicyForm>(initialValues);
+
+  useEffect(() => {
+    if (initialValues) {
+      setForm((prev) => ({
+        ...prev,
+        ...initialValues,
+      }));
+    }
+  }, [initialValues]);
+
+  const [isTouched, setIsTouched] = useState(false);
+
+  const { name, description, criteria, action } = form;
+
+  const updateField = (field: keyof typeof form, value: string | object) => {
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const isAllFeldsFilled = Object.keys(form).every((key) => {
+    const value = form[key as keyof typeof form];
+
+    if (key === "action") {
+      const valueAction = value as BuyingPolicy["action"];
+
+      if (!valueAction.type) {
+        return false;
+      }
+
+      if (valueAction.type === "Sequential approval workflow") {
+        return (
+          valueAction.levels?.length &&
+          valueAction.levels.every((level) => {
+            return level.id;
+          })
+        );
+      }
+
+      return true;
+    }
+
+    return (form[key as keyof typeof form] as string)?.trim();
+  });
+
+  const handleConfirmClick = () => {
+    setIsTouched(true);
+
+    if (!isAllFeldsFilled) {
+      return;
+    }
+
+    onConfirm?.({
+      ...form,
+      orgUnitId,
+      contractId,
+    } as BuyingPolicyForm);
+  };
+
+  const addEmptyLevel = () => {
+    updateField("action", {
+      type: action.type,
+      levels: [
+        ...(action.levels ?? []),
+        {
+          id: "",
+          name: "",
+        },
+      ],
+    });
+  };
+
+  const selectLevel = (
+    orgUnit: { name: string; id: string },
+    index: number
+  ) => {
+    const updatedLevels = [...(action.levels ?? [])];
+    updatedLevels[index] = {
+      id: orgUnit.id,
+      name: orgUnit.name,
+    };
+    updateField("action", {
+      type: action.type,
+      levels: updatedLevels,
+    });
+  };
+
+  const removeLevel = (levelIndex: number) => {
+    const updatedLevels = (action.levels ?? []).filter(
+      (_, idx) => idx !== levelIndex
+    );
+
+    updateField("action", {
+      type: action.type,
+      levels: updatedLevels,
+    });
+  };
+
+  const isConfirmButtonEnabled = isAllFeldsFilled && !isLoading;
+
+  return (
+    <BasicDrawer data-fs-bp-basic-buying-policy-drawer close={close} {...props}>
+      <BasicDrawer.Heading title={drawerTitle} onClose={close} />
+
+      <BasicDrawer.Body>
+        <h3>Basic information</h3>
+        <h4>
+          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)}
+        />
+
+        <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)}
+        />
+
+        <ErrorMessage
+          show={isTouched && !name?.trim()}
+          message="Description is required"
+        />
+
+        <h3>Criteria</h3>
+        <h4>
+          Define the conditions that will trigger this buying policy using{" "}
+          <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
+                >
+                  {option.label}
+                </DropdownItem>
+              ))}
+            </BasicDropdownMenu>
+          </Dropdown>
+        </div>
+
+        <h3>Action</h3>
+        <h4>Define how orders that meet the criteria will be handled</h4>
+
+        <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 === "Bypass all buying policies" && (
+          <InputText.Legend>
+            When this policy is applied, all opther buying policy will be
+            ignored
+          </InputText.Legend>
+        )}
+
+        <ErrorMessage
+          show={isTouched && !action.type?.trim()}
+          message="Action is required"
+        />
+
+        {form.action.type === "Sequential approval workflow" && (
+          <>
+            {form.action.levels?.map((level, index) => (
+              <Fragment key={`${level.id}-${index}`}>
+                <LevelDivider label={`Level ${index + 1}`} />
+                <div data-fs-bp-buying-policy-level-wrapper>
+                  <OrgUnitInputSearch
+                    orgUnit={{
+                      name: level.name ?? "",
+                      id: level.id,
+                    }}
+                    onSelect={(orgUnit) => selectLevel(orgUnit, index)}
+                    selectedTriggerIcon={<Icon name="MinusCircle" />}
+                    onSelectedTriggerClick={() => removeLevel(index)}
+                    hasError={isTouched && !level.name?.trim()}
+                  />
+                  <button type="button" onClick={() => removeLevel(index)}>
+                    <Icon name="MinusCircle" />
+                  </button>
+                </div>
+
+                <ErrorMessage
+                  show={isTouched && !name?.trim()}
+                  message="Criteria is required"
+                />
+              </Fragment>
+            ))}
+
+            {(action.levels?.length ?? 0) < LIMIT_OF_LEVELS && (
+              <button
+                type="button"
+                onClick={addEmptyLevel}
+                data-fs-bp-buying-policy-add-level-button
+              >
+                Add approval level
+              </button>
+            )}
+          </>
+        )}
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          disabled={!isConfirmButtonEnabled}
+          onClick={handleConfirmClick}
+          isLoading={isLoading}
+        >
+          {saveButtonLabel}
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

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

@@ -0,0 +1,103 @@
+@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+@import "../../../shared/components/OrgUnitInputSearch/org-unit-input-search.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";
+
+  [data-fs-bp-basic-drawer-body] {
+    padding-bottom: 90px;
+    h3 {
+      font-weight: var(--fs-text-weight-semibold);
+      font-size: var(--fs-text-size-2);
+      line-height: var(--fs-spacing-4);
+      margin-top: var(--fs-spacing-6);
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
+
+    h4 {
+      font-weight: var(--fs-text-weight-regular);
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+      margin-bottom: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+    }
+
+    a {
+      color: #0366dd;
+    }
+
+    [data-fs-bp-buying-policy-level-wrapper] {
+      width: 100%;
+      position: relative;
+
+      button {
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        right: var(--fs-spacing-1);
+        transform: translateY(-50%);
+        background-color: white;
+      }
+    }
+
+    [data-fs-bp-criteria-selectors-wrapper] {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--fs-spacing-2);
+    }
+
+    [data-fs-bp-input-text-criteria] {
+      color: #5c5c5c;
+
+      &[data-fs-bp-input-text-code] {
+        background-color: #f5f5f5;
+      }
+
+      [data-fs-bp-input-text-input] {
+        bottom: 50%;
+        transform: translateY(50%);
+        font-size: var(--fs-text-size-2);
+      }
+    }
+
+    [data-fs-bp-criteria-selector-trigger] {
+      border: var(--fs-border-width) solid #e0e0e0;
+      background-color: #ffffff;
+      color: #0068d7;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      cursor: pointer;
+      padding: var(--fs-spacing-2)
+        calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+      min-width: 10.625rem;
+      border-radius: var(--fs-border-radius-pill);
+      font-size: var(--fs-text-size-1);
+      font-weight: 600;
+      line-height: var(--fs-spacing-3);
+      text-align: center;
+    }
+
+    [data-fs-bp-buying-policy-add-level-button] {
+      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;
+      cursor: pointer;
+
+      font-weight: var(--fs-text-weight-semibold);
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+      text-align: center;
+      color: #0366dd;
+    }
+  }
+}