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

package/src/features/budgets/components/BudgetRemainingBalance/budget-remaining-balance.scss

@@ -8,11 +8,28 @@
   }
 
   [data-fs-bp-budget-remaining-balance-header-content] {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     justify-content: space-between;
     align-items: baseline;
+    gap: var(--fs-spacing-3);
+
     margin-bottom: var(--fs-spacing-3);
 
+    @include media("<tablet") {
+      grid-template-columns: 1fr;
+      gap: var(--fs-spacing-2);
+    }
+
+    [data-fs-bp-budgets-progress-bar] {
+      grid-column: span 2;
+
+      @include media("<tablet") {
+        grid-column: 1;
+        grid-row: 2;
+      }
+    }
+
     [data-fs-bp-budget-remaining-balance-label-remaining] {
       font-weight: var(--fs-text-weight-semibold);
       font-size: var(--fs-text-size-6);

package/src/features/budgets/components/BudgetSettingsInfo/budget-settings-info.scss

@@ -12,6 +12,12 @@
 
   [data-fs-bp-budget-settings-divider] {
     border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+
+    &:first-of-type {
+      @include media("<tablet") {
+        border: none;
+      }
+    }
   }
 
   [data-fs-bp-budget-settings-details-row] {
@@ -21,17 +27,30 @@
     font-size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
+    @include media("<tablet") {
+      flex-direction: column;
+      padding: var(--fs-spacing-2) 0;
+    }
+
     [data-fs-bp-budget-settings-details-row-label] {
       width: 12.5rem;
       color: #707070;
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-regular);
+
+      @include media("<tablet") {
+        font-size: var(--fs-text-size-0);
+      }
     }
 
     [data-fs-bp-budget-settings-details-row-value] {
       color: #000;
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-medium);
+
+      @include media("<tablet") {
+        font-weight: var(--fs-text-weight-regular);
+      }
     }
   }
 

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

@@ -48,6 +48,7 @@ export function BudgetsTable({
             </TableCell>
             <TableCell
               data-fs-table-cell-width
+              data-fs-bp-cell-remaining
               scope="col"
               variant="data"
               align="left"
@@ -57,7 +58,12 @@ export function BudgetsTable({
             <TableCell scope="col" variant="data" align="center">
               Expiration date
             </TableCell>
-            <TableCell scope="col" variant="data" align="center">
+            <TableCell
+              scope="col"
+              variant="data"
+              align="center"
+              data-fs-bp-cell-currency
+            >
               Total (USD)
             </TableCell>
             <TableCell scope="col" variant="data" align="right" />
@@ -95,7 +101,11 @@ export function BudgetsTable({
                     new Date(item.expirationDate)
                   )}
                 </TableCell>
-                <TableCell align="center" data-fs-bp-text-medium>
+                <TableCell
+                  align="center"
+                  data-fs-bp-text-medium
+                  data-fs-bp-cell-currency
+                >
                   {formatCurrency(item.total)}
                 </TableCell>
                 <TableCell

package/src/features/budgets/components/BudgetsTable/budgets-table.scss

@@ -6,7 +6,7 @@
   [data-fs-table] {
     overflow-x: visible;
   }
-  [data-fs-bp-table-row]{
+  [data-fs-bp-table-row] {
     cursor: pointer;
   }
 
@@ -64,6 +64,35 @@
       cursor: pointer;
       align-items: center;
     }
+
+    @include media("<tablet") {
+      [data-fs-table-cell] {
+        display: none;
+
+        &:first-child {
+          display: flex;
+        }
+
+        &:last-child {
+          display: table-cell;
+          padding-right: 0;
+        }
+      }
+    }
+
+    @include media("<notebook") {
+      [data-fs-table-cell="data"]:not(:first-of-type) {
+        text-align: right;
+      }
+
+      [data-fs-bp-cell-remaining] {
+        opacity: 0;
+      }
+
+      [data-fs-bp-cell-currency] {
+        display: none;
+      }
+    }
   }
   [data-fs-table-cell-width] {
     width: 13.75rem;

package/src/features/budgets/components/CreateBudgetAllocationDrawer/create-budget-allocation-drawer.scss

@@ -16,24 +16,36 @@
   }
 
   &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
     width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 32rem !important;
+    }
+
+    @include media(">=notebook") {
+      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-create-budget-drawer-step-success="true"] {
-    border-bottom: none !important;
-  }
-  &[data-fs-bp-basic-drawer] {
     [data-fs-bp-create-budget-drawer-header-arrow] {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--fs-spacing-3);
       cursor: pointer;
+
+      @include media("<tablet") {
+        [data-fs-icon] {
+          width: var(--fs-spacing-3);
+          height: var(--fs-spacing-3);
+        }
+      }
     }
 
     [data-fs-bp-basic-drawer-button-variant="confirm"][disabled] {
@@ -45,6 +57,10 @@
     }
   }
 
+  [data-fs-bp-create-budget-drawer-step-success="true"] {
+    border-bottom: none !important;
+  }
+
   [data-fs-bp-basic-drawer-button-variant="confirm"][disabled] {
     background-color: #0068d7;
     cursor: not-allowed;

package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss

@@ -17,18 +17,23 @@
   }
 
   &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
     width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 30rem !important;
+      min-width: 30rem !important;
+    }
+    
+    @include media(">=notebook") {
+      max-width: 40rem !important;
+    }
+
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end !important;
       gap: var(--fs-spacing-1);
     }
-  }
 
-  [data-fs-bp-create-budget-drawer-step-success="true"] {
-    border-bottom: none !important;
-  }
-  &[data-fs-bp-basic-drawer] {
     [data-fs-bp-create-budget-drawer-header-arrow] {
       display: flex;
       flex-direction: row;
@@ -46,6 +51,10 @@
     }
   }
 
+  [data-fs-bp-create-budget-drawer-step-success="true"] {
+    border-bottom: none !important;
+  }
+
   [data-fs-bp-basic-drawer-button-variant="confirm"][disabled] {
     background-color: #0068d7;
     cursor: not-allowed;

package/src/features/budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss

@@ -1,5 +1,19 @@
 @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
 
-[data-fs-bp-delete-user-drawer] {
+[data-fs-bp-delete-allocation-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
+
+  &[data-fs-bp-basic-drawer] {
+    width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 30rem !important;
+      min-width: 30rem !important;
+    }
+    
+    @include media(">=notebook") {
+      max-width: 40rem !important;
+    }
+  }
 }

package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss

@@ -7,8 +7,18 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
 
   &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
     width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 30rem !important;
+      min-width: 30rem !important;
+    }
+    
+    @include media(">=notebook") {
+      max-width: 40rem !important;
+    }
+    
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end !important;
       gap: var(--fs-spacing-1);

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;
+    }
+  }
 }