@vtex/faststore-plugin-buyer-portal 1.1.95 → 1.1.96

package/package.json

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

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

@@ -11,6 +11,7 @@ import {
   Table,
 } from "../../../shared/components";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import {
   useBuyerPortal,
   useDrawerProps,
@@ -109,6 +110,10 @@ export const AddressLocationsList = forwardRef<
       refreshLocations: handleRefreshLocations,
     }));
 
+    const columns = getTableColumns({
+      actionsLength: 2,
+    });
+
     return (
       <div data-fs-bp-address-tabs-list data-fs-bp-address-location-list>
         <div data-fs-bp-address-tabs-filter>
@@ -137,53 +142,37 @@ export const AddressLocationsList = forwardRef<
           </EmptyState>
         ) : (
           <div data-fs-bp-address-tabs-table>
-            <Table>
-              <Table.Head
-                columns={[
-                  {
-                    key: "name",
-                    label: "Name",
-                    align: "left",
-                  },
-                  {
-                    key: "actions",
-                    label: "",
-                    align: "right",
-                    size: "large",
-                  },
-                ]}
-              />
+            <Table layoutFixed>
+              <Table.Head columns={columns} />
               <Table.Body>
                 {isLoading ? (
-                  <Table.Loading />
+                  <Table.Loading columns={columns.length} />
                 ) : (
                   locations.map((item) => (
                     <Table.Row
                       key={item.id}
                       title={item.value}
                       searchTerm={search}
-                      actionIcons={
-                        <div data-fs-bp-address-tabs-actions>
-                          <IconButton
-                            data-fs-bp-address-tabs-actions-icon
-                            icon={<Icon name="Trash" width={20} height={20} />}
-                            aria-label={"remove location action"}
-                            onClick={() => {
-                              selectLocation(item);
-                              openDeleteLocation();
-                            }}
-                          />
-                          <IconButton
-                            data-fs-bp-address-tabs-actions-icon
-                            icon={<Icon name="Edit" width={20} height={20} />}
-                            aria-label={"edit location action"}
-                            onClick={() => {
-                              selectLocation(item);
-                              openEditLocation();
-                            }}
-                          />
-                        </div>
-                      }
+                      actionIcons={[
+                        <IconButton
+                          data-fs-bp-address-tabs-actions-icon
+                          icon={<Icon name="Trash" width={20} height={20} />}
+                          aria-label={"remove location action"}
+                          onClick={() => {
+                            selectLocation(item);
+                            openDeleteLocation();
+                          }}
+                        />,
+                        <IconButton
+                          data-fs-bp-address-tabs-actions-icon
+                          icon={<Icon name="Edit" width={20} height={20} />}
+                          aria-label={"edit location action"}
+                          onClick={() => {
+                            selectLocation(item);
+                            openEditLocation();
+                          }}
+                        />,
+                      ]}
                     />
                   ))
                 )}

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

@@ -11,6 +11,7 @@ import {
   Table,
 } from "../../../shared/components";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import {
   PAGE_PARAMS,
@@ -111,30 +112,42 @@ export const AddressRecipientsList = forwardRef<
     } = useDrawerProps();
 
     const renderActions = (recipient: RecipientData) => {
-      return (
-        <div data-fs-bp-address-tabs-actions>
-          <IconButton
-            data-fs-bp-address-tabs-actions-icon
-            icon={<Icon name="Trash" width={20} height={20} />}
-            aria-label={"remove recipient action"}
-            onClick={() => {
-              setCurrentRecipient(recipient);
-              openDeleteRecipientsAddressDrawer();
-            }}
-          />
-          <IconButton
-            data-fs-bp-address-tabs-actions-icon
-            icon={<Icon name="Edit" width={20} height={20} />}
-            aria-label={"Edit recipient action"}
-            onClick={() => {
-              setCurrentRecipient(recipient);
-              openEditRecipientsAddressDrawer();
-            }}
-          />
-        </div>
-      );
+      return [
+        <IconButton
+          data-fs-bp-address-tabs-actions-icon
+          icon={<Icon name="Trash" width={20} height={20} />}
+          aria-label={"remove recipient action"}
+          onClick={() => {
+            setCurrentRecipient(recipient);
+            openDeleteRecipientsAddressDrawer();
+          }}
+        />,
+        <IconButton
+          data-fs-bp-address-tabs-actions-icon
+          icon={<Icon name="Edit" width={20} height={20} />}
+          aria-label={"Edit recipient action"}
+          onClick={() => {
+            setCurrentRecipient(recipient);
+            openEditRecipientsAddressDrawer();
+          }}
+        />,
+      ];
     };
 
+    const columns = getTableColumns({
+      actionsLength: 2,
+      nameColumnSize: "11.125rem",
+      extraColumns: [
+        {
+          key: "phone",
+          label: "Phone",
+          align: "left",
+          size: "100%",
+          hideOnScreenSize: "phonemid",
+        },
+      ],
+    });
+
     return (
       <div data-fs-bp-address-tabs-list>
         <div data-fs-bp-address-tabs-filter>
@@ -155,25 +168,12 @@ export const AddressRecipientsList = forwardRef<
           />
         ) : (
           <div data-fs-bp-address-tabs-table>
-            <Table>
-              <Table.Head
-                columns={[
-                  {
-                    key: "name",
-                    label: "Name",
-                    align: "left",
-                  },
-                  {
-                    key: "phone",
-                    label: "Phone",
-                    align: "left",
-                  },
-                ]}
-              />
+            <Table layoutFixed>
+              <Table.Head columns={columns} />
 
               <Table.Body>
                 {isLoading ? (
-                  <Table.Loading />
+                  <Table.Loading columns={columns.length} />
                 ) : (
                   recipients.map((recipient) => (
                     <Table.Row
@@ -181,13 +181,13 @@ export const AddressRecipientsList = forwardRef<
                       title={recipient.firstName + " " + recipient.lastName}
                       searchTerm={search}
                       children={
-                        recipient.phone ? (
-                          <td>
+                        <Table.Cell hideOnScreenSize="phonemid">
+                          {recipient.phone ? (
                             <span>
                               {maskPhoneNumber(recipient.phone, countryCode)}
                             </span>
-                          </td>
-                        ) : null
+                          ) : null}
+                        </Table.Cell>
                       }
                       actionIcons={renderActions(recipient as RecipientData)}
                     />