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

package/package.json

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

package/src/features/addresses/clients/AddressesClient.ts

@@ -102,7 +102,7 @@ export default class AddressesClient extends Client {
       name: data.name,
       zip: data.zip,
       streetAddress: data.streetAddress,
-      neighborhood: data.neighborhood,
+      neighborhood: data?.neighborhood ?? "",
       streetAddress2: data.streetAddress2,
       city: data.city,
       state: data.state,
@@ -135,7 +135,7 @@ export default class AddressesClient extends Client {
       name: data.name,
       zip: data.zip,
       streetAddress: data.streetAddress,
-      neighborhood: data.neighborhood,
+      neighborhood: data?.neighborhood ?? "",
       streetAddress2: data.streetAddress2,
       city: data.city,
       state: data.state,

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

@@ -202,21 +202,6 @@ export const AddressForm = ({
             }
           />
 
-          <InputText
-            label="Neighborhood"
-            value={address.neighborhood}
-            className="address-postal-code"
-            hasError={isTouched && !address.neighborhood?.trim()}
-            onChange={(event) =>
-              setAddress({ ...address, neighborhood: event.target.value })
-            }
-          />
-
-          <ErrorMessage
-            show={isTouched && !address.neighborhood?.trim()}
-            message="Neighborhood is required"
-          />
-
           <InputText
             label="City"
             className="address-city"

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

@@ -16,7 +16,6 @@ const AddressDisplay: React.FC<AddressDisplayProps> = ({
     {option?.streetAddress2 && `, ${option?.streetAddress2}`}
     {option?.streetNumber && ` ${option?.streetNumber}`}
     {option?.unit && ` ${option?.unit}`}
-    {option?.neighborhood && `, ${option?.neighborhood}`}
     {option?.city && `, ${option?.city}`}
     {option?.state && `, ${option?.state}`}
     {option?.zip && `, ${option?.zip}`}

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)}
                     />

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

@@ -47,7 +47,6 @@ export const CreateAddressDrawer = ({
     geoCoordinates: "",
     city: "",
     types: [],
-    neighborhood: "",
   });
 
   const [locations, setLocations] = useState<LocationInput[]>([{ name: "" }]);
@@ -104,7 +103,6 @@ export const CreateAddressDrawer = ({
         address.country &&
         address.zip &&
         address.state &&
-        address.neighborhood &&
         address.city &&
         address.types.length > 0) ||
       useExistingAddress