@vtex/faststore-plugin-buyer-portal 1.1.90 → 1.1.91

package/CHANGELOG.md

@@ -9,6 +9,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Responsiviness to Buying policies page
+
+### Added
+- Credit card page responsiveness
+- Change for the store title based on the SEO
+
+### Added
+
+- Responsive design implementation for Addresses section
+
+### Added
+  
+- Standardization the sidebar menu throughout the navigation of the Organizational Account, regardless of the context.
+
+### Added
 -   Added responsiveness to the Payment Methods list.
 -   Implemented responsiveness across all drawers in the Payment Methods flow.
 -   Ensured responsive behavior for toasts and empty states.

package/package.json

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

package/src/features/addresses/components/AddressLocationsList/AddressLocationsList.tsx

@@ -207,7 +207,7 @@ export const AddressLocationsList = forwardRef<
                 {...deleteLocationProps}
               />
             )}
-            <div data-fs-bp-address-tabs-paginator>
+            <div data-fs-bp-address-tabs-paginator-last>
               {totalLocations > locations.length && (
                 <Paginator.NextPageButton
                   onClick={increasePage}

package/src/features/addresses/components/AddressRecipientsList/AddressRecipientsList.tsx

@@ -168,12 +168,6 @@ export const AddressRecipientsList = forwardRef<
                     label: "Phone",
                     align: "left",
                   },
-                  {
-                    key: "actions",
-                    label: "",
-                    align: "right",
-                    size: "large",
-                  },
                 ]}
               />
 
@@ -225,7 +219,7 @@ export const AddressRecipientsList = forwardRef<
               />
             )}
 
-            <div data-fs-bp-address-tabs-paginator>
+            <div data-fs-bp-address-tabs-paginator-last>
               {totalRecipients > recipients.length && (
                 <Paginator.NextPageButton
                   onClick={increasePage}

package/src/features/addresses/layouts/AddressDetailsLayout/address-details-layout.scss

@@ -11,10 +11,22 @@
 
   height: 100%;
 
+  @include media("<=tablet") {
+    padding: 0;
+  }
+
+  [data-fs-bp-tab-bar] {
+    @include media("<=tablet") {
+      width: -webkit-fill-available !important;
+      justify-content: space-around;
+    }
+  }
+
   [data-fs-address-details-actions-wrapper] {
     display: flex;
     align-items: center;
     gap: var(--fs-spacing-1);
+
     [data-fs-address-details-status-label] {
       font-weight: var(--fs-text-weight-medium);
       font-size: var(--fs-text-size-1);
@@ -52,11 +64,17 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+
     [data-fs-address-details-actions] {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      flex-direction: row;
       margin-bottom: var(--fs-text-size-7);
+      @include media("<=tablet") {
+        flex-direction: column-reverse;
+        gap: 0.625rem;
+      }
 
       [data-fs-bp-tab-bar] {
         width: fit-content;
@@ -92,6 +110,12 @@
 
         border-radius: var(--fs-border-radius-pill);
         border: var(--fs-border-width) solid #e0e0e0;
+
+        @include media("<=tablet") {
+          width: 100%;
+          text-align: center;
+          justify-content: center;
+        }
       }
     }
 
@@ -105,6 +129,11 @@
       font-size: var(--fs-text-size-1);
       line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
+      @include media("<=tablet") {
+        flex-direction: column;
+        align-items: normal;
+      }
+
       &[data-fs-address-details-info-line-first="true"] {
         border-top: var(--fs-border-width) solid #e5e5e5;
       }
@@ -181,6 +210,16 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 0 var(--fs-spacing-4);
+
+    @include media("<=tablet") {
+      [data-fs-buyer-portal-internal-search] {
+        width: 100%;
+      }
+
+      [data-fs-bp-paginator-counter] {
+        display: none;
+      }
+    }
   }
 
   [data-fs-bp-address-tabs-table] {
@@ -216,17 +255,32 @@
     }
   }
 
-  [data-fs-bp-address-tabs-paginator] {
+  [data-fs-address-details-info-line-value] {
+    @include media("<=tablet") {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 12.5rem;
+    }
+  }
+
+  [data-fs-bp-address-tabs-paginator-last] {
     display: flex;
+    justify-content: flex-end;
     align-items: center;
-    justify-content: space-between;
+
     margin-top: var(--fs-spacing-0);
     padding: var(--fs-spacing-2) 0;
+
+    @include media(">=tablet") {
+      display: none;
+    }
   }
 
   [data-fs-bp-address-tabs-empty-state] {
     --fs-button-border-radius: 24px;
-    --fs-button-padding: calc(var(--fs-spacing-1) * 1.25) calc(var(--fs-spacing-3) * 1.25);
+    --fs-button-padding: calc(var(--fs-spacing-1) * 1.25)
+      calc(var(--fs-spacing-3) * 1.25);
   }
 
   &[data-fs-bp-address-location-list] {

package/src/features/addresses/layouts/AddressesLayout/AddressesLayout.tsx

@@ -3,15 +3,15 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 
 import {
-  InternalSearch,
   HeaderInside,
-  Paginator,
   Icon,
+  InternalSearch,
+  Paginator,
 } from "../../../shared/components";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { Table } from "../../../shared/components/Table/Table";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
-import { useDrawerProps, useBuyerPortal } from "../../../shared/hooks";
+import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { usePageItems } from "../../../shared/hooks/usePageItems";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
@@ -95,7 +95,7 @@ export const AddressLayout = ({
         orgUnitId={orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
-        pageName="Contract"
+        pageName=""
         person={{
           image: undefined,
           name: user?.name ?? "",
@@ -121,11 +121,12 @@ export const AddressLayout = ({
                   defaultValue={searchTerm}
                   textSearch={setSearchTerm}
                 />
-
-                <Paginator.Counter
-                  total={total}
-                  itemsLength={addresses.length}
-                />
+                <div data-fs-bp-top-counter>
+                  <Paginator.Counter
+                    total={total}
+                    itemsLength={addresses.length}
+                  />
+                </div>
               </div>
               {!isLoading && addresses.length === 0 && searchTerm.length > 0 ? (
                 <EmptyState
@@ -196,6 +197,12 @@ export const AddressLayout = ({
                     </Table.Body>
                   </Table>
 
+                  {!isLoading && (
+                    <p data-fs-bp-addresses-paginator-last>
+                      {`${addresses.length} of ${total}`}
+                    </p>
+                  )}
+
                   <div data-fs-bp-addresses-paginator>
                     {total > addresses.length && (
                       <Paginator.NextPageButton
@@ -205,11 +212,6 @@ export const AddressLayout = ({
                         {isLoading ? "Loading" : "Load More"}
                       </Paginator.NextPageButton>
                     )}
-
-                    <Paginator.Counter
-                      total={total}
-                      itemsLength={addresses.length}
-                    />
                   </div>
                 </div>
               )}

package/src/features/addresses/layouts/AddressesLayout/addresses-layout.scss

@@ -25,6 +25,25 @@
   flex-direction: column;
   height: 100%;
 
+  @include media("<=tablet") {
+    padding: 0;
+  }
+
+  [data-fs-bp-header-inside] {
+    [data-fs-bp-header-buttons] > button {
+      display: flex;
+    }
+    @include media("<=tablet") {
+      [data-fs-header-inside-button]:nth-child(3) {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        cursor: pointer;
+        z-index: 1000;
+      }
+    }
+  }
+
   [data-fs-bp-table-row-default-icon] {
     display: flex;
     justify-content: flex-end;
@@ -32,6 +51,19 @@
     color: #0366dd;
   }
 
+  [data-fs-bp-address-tabs-paginator-last] {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    margin-top: var(--fs-spacing-0);
+    padding: var(--fs-spacing-2) 0;
+
+    @include media(">=tablet") {
+      display: none;
+    }
+  }
+
   [data-fs-topbar-actions-wrapper] {
     display: flex;
     flex-direction: row;
@@ -73,19 +105,38 @@
       }
     }
   }
+
   [data-fs-buyer-portal-address-filter] {
     display: flex;
     justify-content: space-between;
     padding: 0 0 var(--fs-spacing-4);
-  }
 
-  [data-fs-buyer-portal-address-filter-search-container] {
-    display: flex;
-    gap: var(--fs-spacing-1);
+    @include media("<=tablet") {
+      [data-fs-buyer-portal-internal-search] {
+        width: 100%;
+      }
+
+      [data-fs-bp-paginator-counter] {
+        display: none;
+      }
+    }
   }
 
   [data-fs-addresses-table] {
     padding-bottom: var(--fs-spacing-9);
+
+    [data-fs-bp-addresses-paginator-last] {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      margin-top: var(--fs-spacing-0);
+      padding: var(--fs-spacing-2) 0;
+
+      @include media(">=tablet") {
+        display: none;
+      }
+    }
   }
 
   [data-fs-bp-table-head] {
@@ -99,8 +150,13 @@
   [data-fs-bp-addresses-paginator] {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    margin-top: var(--fs-spacing-0);
+    justify-content: flex-start;
+    margin-top: var(--fs-spacing-2);
     padding: var(--fs-spacing-2) 0;
+
+    @include media("<=phonemid") {
+      padding: var(--fs-spacing-3) 0;
+      margin-bottom: 5rem;
+    }
   }
 }

package/src/features/shared/components/Pagination/Pagination.tsx

@@ -23,23 +23,13 @@ export const Pagination = ({
         </Button>
       )}
 
-      {variant === "counter" ? (
-        <span data-fs-bp-counter-bottom>
-          {loading ? (
-            <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
-          ) : (
-            `${currentCount} of ${total}`
-          )}
-        </span>
-      ) : (
-        <span data-fs-bp-pagination-span>
-          {loading ? (
-            <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
-          ) : (
-            `${currentCount} of ${total}`
-          )}
-        </span>
-      )}
+      <span data-fs-bp-counter-bottom={variant === "counter"}>
+        {loading ? (
+          <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
+        ) : (
+          `${currentCount} of ${total}`
+        )}
+      </span>
     </div>
   );
 };

package/src/features/shared/components/Pagination/pagination.scss

@@ -17,7 +17,7 @@
     }
   }
 
-  [data-fs-bp-pagination-span] {
+  [data-fs-bp-counter-bottom="false"] {
     display: inline-block;
     font-size: var(--fs-text-size-1);
     font-weight: var(--fs-text-weight-medium);
@@ -29,12 +29,12 @@
     [data-fs-buyer-portal-internal-search] {
       width: 100% !important;
     }
-    & > [data-fs-bp-counter-bottom] {
+    & > [data-fs-bp-counter-bottom="true"] {
       display: none !important;
     }
   }
 
-  & > [data-fs-bp-counter-bottom] {
+  & > [data-fs-bp-counter-bottom="true"] {
     display: block;
     text-align: end;
   }