@vtex/faststore-plugin-buyer-portal 1.1.87 → 1.1.89

package/src/features/budgets/layouts/BudgetsDetailsLayout/BudgetsDetailsLayout.tsx

@@ -153,8 +153,8 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
           role: user?.role ?? "",
         }}
       >
-        <section data-fs-bp-budgets-details-layout>
-          <div data-fs-bp-budgets-details-header-wrapper>
+        <div data-fs-bp-budgets-details-layout>
+          <header data-fs-bp-budgets-details-header-wrapper>
             <div data-fs-bp-budgets-details-header-arrow>
               <Icon
                 name="ArrowPointLeft"
@@ -189,87 +189,88 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
                 </DropdownItem>
               </BasicDropdownMenu>
             </Dropdown>
-          </div>
-
-          <BudgetRemainingBalance
-            remaining={budget.remaining}
-            total={Number(budget.amount)}
-          />
-
-          <BudgetSettingsInfoBalance
-            initialBudget={budget}
-            budgetId={budget.id}
-            orgUnitId={orgUnit?.id ?? ""}
-            contractId={contract?.id ?? ""}
-          />
-
-          {hasMounted && (
-            <BudgetAllocationsTable
-              loading={isAllocationsLoading && !loadingLoadMore}
-              data={budgets.allocation.data}
-              budgetId={budgets.budget.id}
-              orgUnitId={orgUnit?.id ?? ""}
-              contractId={contract?.id ?? ""}
-              onSearch={setAllocationSearch}
-              pagination={{
-                current: budgets.allocation.data?.length ?? 0,
-                loading: isAllocationsLoading,
-                total: budgets.allocation.total,
-                loadMore,
-              }}
+          </header>
+          <section data-fs-bp-budgets-details-section>
+            <BudgetRemainingBalance
+              remaining={budget.remaining}
+              total={Number(budget.amount)}
             />
-          )}
 
-          {isDeleteDrawerOpen && (
-            <BudgetDeleteDrawer
+            <BudgetSettingsInfoBalance
+              initialBudget={budget}
+              budgetId={budget.id}
               orgUnitId={orgUnit?.id ?? ""}
               contractId={contract?.id ?? ""}
-              budgetName={budget.name}
-              budgetId={budget.id}
-              redirect={handleBudgetPage}
-              isOpen={isDeleteDrawerOpen}
-              {...deleteDrawerProps}
             />
-          )}
 
-          {isAddAllocationDrawerOpen && (
-            <CreateBudgetAllocationDrawer
-              {...addAllocationDrawerProps}
-              allocationList={budgets.allocation.data}
-              contractId={contract?.id ?? ""}
-              budgetId={budgets.budget.id}
-              orgUnitId={orgUnit?.id ?? ""}
-              isOpen={isAddAllocationDrawerOpen}
-            />
-          )}
+            {hasMounted && (
+              <BudgetAllocationsTable
+                loading={isAllocationsLoading && !loadingLoadMore}
+                data={budgets.allocation.data}
+                budgetId={budgets.budget.id}
+                orgUnitId={orgUnit?.id ?? ""}
+                contractId={contract?.id ?? ""}
+                onSearch={setAllocationSearch}
+                pagination={{
+                  current: budgets.allocation.data?.length ?? 0,
+                  loading: isAllocationsLoading,
+                  total: budgets.allocation.total,
+                  loadMore,
+                }}
+              />
+            )}
 
-          {isDeleteDrawerOpen && (
-            <BudgetDeleteDrawer
-              {...deleteDrawerProps}
-              isOpen={isDeleteDrawerOpen}
-              budgetId={budgets.budget.id}
-              budgetName={budgets.budget.name}
-              orgUnitId={orgUnit?.id ?? ""}
-              contractId={contract?.id ?? ""}
-              {...deleteDrawerProps}
-              redirect={handleBudgetPage}
-            />
-          )}
+            {isDeleteDrawerOpen && (
+              <BudgetDeleteDrawer
+                orgUnitId={orgUnit?.id ?? ""}
+                contractId={contract?.id ?? ""}
+                budgetName={budget.name}
+                budgetId={budget.id}
+                redirect={handleBudgetPage}
+                isOpen={isDeleteDrawerOpen}
+                {...deleteDrawerProps}
+              />
+            )}
 
-          {isEditDrawerOpen && (
-            <EditBudgetDrawer
-              {...editDrawerProps}
-              isOpen={isEditDrawerOpen}
-              budgetId={budgets.budget.id}
-              contractId={contract?.id ?? ""}
-              orgUnitId={orgUnit?.id ?? ""}
-              initialBudget={{
-                ...budgets.budget,
-                amount: budgets.budget.amount,
-              }}
-            />
-          )}
-        </section>
+            {isAddAllocationDrawerOpen && (
+              <CreateBudgetAllocationDrawer
+                {...addAllocationDrawerProps}
+                allocationList={budgets.allocation.data}
+                contractId={contract?.id ?? ""}
+                budgetId={budgets.budget.id}
+                orgUnitId={orgUnit?.id ?? ""}
+                isOpen={isAddAllocationDrawerOpen}
+              />
+            )}
+
+            {isDeleteDrawerOpen && (
+              <BudgetDeleteDrawer
+                {...deleteDrawerProps}
+                isOpen={isDeleteDrawerOpen}
+                budgetId={budgets.budget.id}
+                budgetName={budgets.budget.name}
+                orgUnitId={orgUnit?.id ?? ""}
+                contractId={contract?.id ?? ""}
+                {...deleteDrawerProps}
+                redirect={handleBudgetPage}
+              />
+            )}
+
+            {isEditDrawerOpen && (
+              <EditBudgetDrawer
+                {...editDrawerProps}
+                isOpen={isEditDrawerOpen}
+                budgetId={budgets.budget.id}
+                contractId={contract?.id ?? ""}
+                orgUnitId={orgUnit?.id ?? ""}
+                initialBudget={{
+                  ...budgets.budget,
+                  amount: budgets.budget.amount,
+                }}
+              />
+            )}
+          </section>
+        </div>
       </ContractTabsLayout>
     </GlobalLayout>
   );

package/src/features/budgets/layouts/BudgetsDetailsLayout/budget-details-layout.scss

@@ -1,5 +1,5 @@
 @import "../../components/EditBudgetDrawer/edit-budget-drawer.scss";
-  @import "../../components/CreateBudgetDrawer/create-budget-drawer.scss";
+@import "../../components/CreateBudgetDrawer/create-budget-drawer.scss";
 @import "../../components/BudgetAllocationsTable/budget-allocations-table.scss";
 @import "../../components/BudgetAllocationsSelection/budget-allocations-selection.scss";
 @import "../../../budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss";
@@ -18,28 +18,11 @@
   @import "../../../shared/components/EmptyState/empty-state.scss";
   @import "../../components/EmptyState.tsx/empty-state.scss";
 
-  padding: calc(var(--fs-spacing-13) - var(--fs-spacing-0))
-    calc(var(--fs-spacing-8) + var(--fs-spacing-0))
-    calc(var(--fs-spacing-13) - var(--fs-spacing-0))
-    calc(var(--fs-spacing-8) + var(--fs-spacing-0));
-  min-height: calc(100vh - calc(var(--fs-spacing-9) + var(--fs-spacing-0)));
-  display: flex;
-  flex-direction: column;
-  gap: var(--fs-spacing-6);
-
-  &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
-    width: 100% !important;
-    & > [data-fs-bp-basic-drawer-footer] {
-      justify-content: flex-end !important;
-      gap: var(--fs-spacing-1);
-    }
-  }
-
   [data-fs-bp-budgets-details-header-wrapper] {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: var(--fs-spacing-6) 0;
   }
 
   [data-fs-bp-budgets-details-header-arrow] {
@@ -54,4 +37,24 @@
       cursor: pointer;
     }
   }
+
+  [data-fs-bp-budgets-details-section] {
+    min-height: calc(100vh - calc(var(--fs-spacing-9) + var(--fs-spacing-0)));
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-6);
+
+    @include media("<tablet") {
+      gap: var(--fs-spacing-4);
+    }
+
+    &[data-fs-bp-basic-drawer] {
+      max-width: 60rem !important;
+      width: 100% !important;
+      & > [data-fs-bp-basic-drawer-footer] {
+        justify-content: flex-end !important;
+        gap: var(--fs-spacing-1);
+      }
+    }
+  }
 }

package/src/features/budgets/layouts/BudgetsLayout/budgets-layout.scss

@@ -100,6 +100,12 @@
       align-items: center;
       margin-bottom: var(--fs-spacing-4);
 
+      @include media("<tablet") {
+        [data-fs-buyer-portal-internal-search] {
+          width: 100%;
+        }
+      }
+
       [data-fs-bp-pagination] {
         color: #5c5c5c;
         text-align: right;

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

@@ -68,6 +68,10 @@
       justify-content: flex-start;
       gap: var(--fs-spacing-2);
       margin-top: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+
+      @include media("<=tablet") {
+        justify-content: center;
+      }
     }
 
     [data-fs-bp-basic-buying-policy-drawer-tooltip] {

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -11,10 +11,25 @@
   @import "../../../shared/components/Paginator/paginator.scss";
   @import "../../../shared/components/EmptyState/empty-state.scss";
 
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
 
+  @include media("<=tablet") {
+    padding-bottom: 3rem;
+
+    [data-fs-bp-header-inside] {
+      [data-fs-header-inside-button] {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        padding: 12px;
+        cursor: pointer;
+        z-index: 10;
+      }
+    }
+  }
+
   [data-fs-empty-state-section] {
     flex: 1;
     color: #858585;
@@ -24,6 +39,21 @@
     display: flex;
     justify-content: space-between;
     padding: 0 0 var(--fs-spacing-4);
+    [data-fs-bp-paginator-counter] {
+      font-size: var(--fs-text-size-1);
+      color: #5c5c5c;
+      display: block;
+    }
+
+    @include media("<=tablet") {
+      [data-fs-buyer-portal-internal-search] {
+        width: 100%;
+      }
+
+      [data-fs-bp-paginator-counter] {
+        display: none;
+      }
+    }
   }
 
   [data-fs-buying-policies-heading] {
@@ -36,11 +66,16 @@
   }
 
   [data-fs-bp-buying-policies-paginator] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: var(--fs-spacing-0);
-    padding: var(--fs-spacing-2) 0;
+    display: none;
+    @include media("<=tablet") {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: var(--fs-spacing-0);
+      padding: var(--fs-spacing-2) 0;
+      font-size: var(--fs-text-size-1);
+      color: #5c5c5c;
+    }
   }
 
   [data-fs-bp-table] {

package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/BuyingPolicyDetailsLayout.tsx

@@ -51,7 +51,7 @@ export const BuyingPolicyDetailsLayout = ({
             </Dropdown>
           </HeaderInside>
 
-          <div data-fs-buying-policy-details-line>
+          <div data-fs-buying-policy-details-line-initial>
             <span data-fs-buying-policy-details-title>Settings</span>
             <button
               type="button"

package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/buying-policy-details-layout.scss

@@ -7,8 +7,14 @@
 [data-fs-buying-policy-details-section] {
   @import "../../../shared/components/HeaderInside/header-inside.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";
+  [data-fs-bp-header-inside-title] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-  [data-fs-buying-policy-details-line] {
+  [data-fs-buying-policy-details-line],
+  [data-fs-buying-policy-details-line-initial] {
     padding: calc(var(--fs-spacing-4) - var(--fs-spacing-0)) 0;
     border-top: var(--fs-border-width) solid #e0e0e0;
     display: flex;
@@ -17,6 +23,10 @@
       border-top: none;
     }
 
+    @include media("<=tablet") {
+      flex-direction: column;
+    }
+
     [data-fs-buying-policy-details-title] {
       font-weight: 600;
       font-size: var(--fs-text-size-2);
@@ -80,4 +90,10 @@
       }
     }
   }
+
+  [data-fs-buying-policy-details-line-initial] {
+    @include media("<=tablet") {
+      flex-direction: row;
+    }
+  }
 }

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/AddPaymentMethodsDrawer.tsx

@@ -1,12 +1,13 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import { useUI, Checkbox, Skeleton } from "@faststore/ui";
+import { Checkbox, Skeleton, useUI } from "@faststore/ui";
 
 import {
   type BasicDrawerProps,
   BasicDrawer,
+  EmptyState,
   Icon,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
@@ -49,8 +50,9 @@ export const AddPaymentMethodsDrawer = ({
       search: querySearch,
     });
 
-  const availableMethods = paymentMethods?.filter(
-    (method) => !method?.isEnabled
+  const availableMethods = useMemo(
+    () => (paymentMethods ?? []).filter((method) => !method?.isEnabled),
+    [paymentMethods]
   );
 
   const handleSuccess = () => {
@@ -95,13 +97,10 @@ export const AddPaymentMethodsDrawer = ({
 
   const toggleItem = useCallback((id: number) => {
     setSelectedMethods((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
     });
   }, []);
 
@@ -116,6 +115,86 @@ export const AddPaymentMethodsDrawer = ({
     addPaymentMethods({ customerId, unitId, paymentMethodsIds });
   };
 
+  const renderListHeader = () => (
+    <li
+      data-fs-bp-payment-methods-list-title
+      data-fs-bp-payment-methods-list-title-drawer
+      aria-label="Payment methods header"
+    >
+      <Checkbox
+        data-fs-bp-payment-methods-checkbox
+        ref={selectAllRef}
+        checked={allSelected}
+        onChange={toggleAll}
+        disabled={readonly || availableMethods.length === 0}
+        aria-label="Select all payment methods"
+      />
+      Name
+    </li>
+  );
+
+  const renderList = () => (
+    <ul data-fs-payment-methods-list>
+      {renderListHeader()}
+      {availableMethods.map(({ id, name }) => (
+        <li key={id} data-fs-payment-methods-line>
+          <div
+            data-fs-payment-methods-row
+            data-fs-payment-methods-row-selected={selectedMethods.has(id)}
+          >
+            <div data-fs-payment-methods-row-information>
+              <Checkbox
+                data-fs-bp-payment-methods-checkbox
+                checked={selectedMethods.has(id)}
+                onChange={() => toggleItem(id)}
+                disabled={readonly}
+                aria-label={`Select ${name}`}
+              />
+              <span data-fs-payment-methods-row-icon-wrapper>
+                <Icon name="AccountBalanceWallet" width={20} height={20} />
+              </span>
+              <div data-fs-payment-methods-name>{name}</div>
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+
+  const renderLoading = () => (
+    <div data-fs-payment-methods-loading>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Skeleton key={index} size={{ width: "100%", height: "1.5rem" }} />
+      ))}
+    </div>
+  );
+
+  const renderEmpty = () => (
+    <EmptyState
+      title="No results found"
+      description={
+        querySearch.length > 0
+          ? "Try using different terms"
+          : "No payment methods found"
+      }
+    />
+  );
+
+  const renderBodyContent = () => {
+    if (isLoadingPaymentMethods) return renderLoading();
+
+    if ((paymentMethods?.length ?? 0) === 0) return renderEmpty();
+
+    if (availableMethods.length > 0) return renderList();
+
+    return (
+      <EmptyState
+        title="All methods already added"
+        description="There are no additional payment methods to add for this unit."
+      />
+    );
+  };
+
   return (
     <BasicDrawer data-fs-bp-add-payment-methods-drawer close={close} {...props}>
       <BasicDrawer.Heading title="Add payment methods" onClose={close} />
@@ -134,62 +213,7 @@ export const AddPaymentMethodsDrawer = ({
             textSearch={setQuerySearch}
           />
 
-          {isLoadingPaymentMethods ? (
-            <div data-fs-payment-methods-loading>
-              {Array.from({ length: 5 }).map((_, index) => (
-                <Skeleton
-                  key={index}
-                  size={{ width: "100%", height: "1.5rem" }}
-                />
-              ))}
-            </div>
-          ) : (
-            <ul data-fs-payment-methods-list>
-              <div
-                data-fs-bp-payment-methods-list-title
-                data-fs-bp-payment-methods-list-title-drawer
-              >
-                <Checkbox
-                  data-fs-bp-payment-methods-checkbox
-                  ref={selectAllRef}
-                  checked={allSelected}
-                  onChange={toggleAll}
-                  disabled={readonly}
-                  aria-label="Select all payment methods"
-                />
-                Name
-              </div>
-
-              {availableMethods.map(({ id, name }) => (
-                <li key={id} data-fs-payment-methods-line>
-                  <div
-                    data-fs-payment-methods-row
-                    data-fs-payment-methods-row-selected={selectedMethods.has(
-                      id
-                    )}
-                  >
-                    <div data-fs-payment-methods-row-information>
-                      <Checkbox
-                        data-fs-bp-payment-methods-checkbox
-                        checked={selectedMethods.has(id)}
-                        onChange={() => toggleItem(id)}
-                        disabled={readonly}
-                        aria-label={`Select ${name}`}
-                      />
-                      <span data-fs-payment-methods-row-icon-wrapper>
-                        <Icon
-                          name="AccountBalanceWallet"
-                          width={20}
-                          height={20}
-                        />
-                      </span>
-                      <div data-fs-payment-methods-name>{name}</div>
-                    </div>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
+          {renderBodyContent()}
         </section>
       </BasicDrawer.Body>
 
@@ -197,11 +221,12 @@ export const AddPaymentMethodsDrawer = ({
         <BasicDrawer.Button variant="ghost" onClick={close}>
           Cancel
         </BasicDrawer.Button>
+
         <BasicDrawer.Button
           variant="confirm"
           isLoading={isAddPaymentMethodsLoading}
           onClick={handleSubmit}
-          disabled={!selectedMethods.size}
+          disabled={isAddPaymentMethodsLoading || selectedMethods.size === 0}
         >
           Add
         </BasicDrawer.Button>