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

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

@@ -1,291 +1,290 @@
 [data-fs-address-details-section] {
-  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
-  @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
-  @import "../../components/EditAddressDrawer/edit-address-drawer.scss";
-  @import "../../../shared/components/HeaderInside/header-inside.scss";
-  @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/Table/table.scss";
-  @import "../../../shared/components/EmptyState/empty-state.scss";
-  @import "../../../shared/components/Paginator/paginator.scss";
-  @import "../../components//AddressForm/address-form.scss";
-
-  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);
-      line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-    }
-
-    [data-fs-address-details-dropdown-trigger] {
-      margin-left: var(--fs-spacing-1);
-      [data-fs-address-details-dropdown-trigger-icon] {
-        color: #858585;
-      }
-    }
-  }
-
-  [data-fs-address-details-section-header] {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--fs-spacing-4) 0;
-
-    [data-fs-address-details-title] {
-      font-weight: var(--fs-text-weight-semibold);
-      font-size: var(--fs-text-size-2);
-      line-height: var(--fs-spacing-4);
-
-      [data-fs-address-details-complement] {
-        color: #707070;
-        margin-left: var(--fs-spacing-1);
-      }
-    }
-  }
-
-  [data-fs-address-details-info-wrapper] {
-    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;
-        border-radius: var(--fs-border-radius-pill);
-        border: var(--fs-border-width);
-        padding: var(--fs-spacing-0);
-        gap: var(--fs-spacing-0);
-        border-style: solid;
-        border-color: #e0e0e0;
-
-        [data-fs-bp-tab-option] {
-          padding: 0.375rem var(--fs-text-size-3);
-        }
-
-        [data-fs-bp-tab-option-is-active="true"] {
-          background-color: #ebebeb;
-          color: black !important;
-          border-radius: var(--fs-border-radius-pill);
-        }
-      }
-
-      [data-fs-address-details-button] {
-        padding: var(--fs-spacing-1) var(--fs-spacing-3);
-        color: #0366dd;
-        display: flex;
-        align-items: center;
-        background-color: white;
-        cursor: pointer;
-
-        font-weight: var(--fs-text-weight-semibold);
-        font-size: var(--fs-text-size-2);
-        line-height: var(--fs-spacing-4);
-
-        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;
-        }
-      }
-    }
-
-    [data-fs-address-details-info-line] {
-      padding: 1.375rem 0;
-      border-bottom: var(--fs-border-width) solid #e5e5e5;
-      display: flex;
-      align-items: center;
-
-      font-weight: var(--fs-text-weight-medium);
-      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;
-      }
-
-      [data-fs-address-details-info-line-label] {
-        color: #707070;
-        width: calc(var(--fs-spacing-13) * 2);
-      }
-
-      [data-fs-address-details-info-line-value] {
-        color: #000000;
-      }
-    }
-
-    [data-fs-address-details-locations] {
-      border: var(--fs-border-width) solid #e5e5e5;
-      border-radius: var(--fs-border-radius-medium);
-      margin-bottom: var(--fs-spacing-8);
-
-      [data-fs-address-details-location] {
-        padding: var(--fs-spacing-2) var(--fs-spacing-3);
-        border-bottom: var(--fs-border-width) solid #e5e5e5;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        font-weight: var(--fs-text-weight-medium);
-        font-size: var(--fs-text-size-1);
-        line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-        color: #000000;
-
-        [data-fs-address-details-location-actions] {
-          display: flex;
-          align-items: center;
-          gap: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
-
-          button {
-            height: var(--fs-spacing-6);
-            width: var(--fs-spacing-6);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            &:hover {
-              background-color: #f5f5f5;
-              cursor: pointer;
-              border-radius: var(--fs-border-radius-pill);
-            }
-
-            svg {
-              color: #707070;
-              min-height: var(--fs-spacing-4);
-              min-width: var(--fs-spacing-4);
-            }
-          }
-        }
-      }
-    }
-  }
+	@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+	@import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
+	@import "../../components/EditAddressDrawer/edit-address-drawer.scss";
+	@import "../../../shared/components/HeaderInside/header-inside.scss";
+	@import "../../../shared/components/InternalSearch/internal-search.scss";
+	@import "../../../shared/components/Table/table.scss";
+	@import "../../../shared/components/EmptyState/empty-state.scss";
+	@import "../../../shared/components/Paginator/paginator.scss";
+	@import "../../components//AddressForm/address-form.scss";
+
+	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);
+			line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+		}
+
+		[data-fs-address-details-dropdown-trigger] {
+			margin-left: var(--fs-spacing-1);
+			[data-fs-address-details-dropdown-trigger-icon] {
+				color: #858585;
+			}
+		}
+	}
+
+	[data-fs-address-details-section-header] {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--fs-spacing-4) 0;
+
+		[data-fs-address-details-title] {
+			font-weight: var(--fs-text-weight-semibold);
+			font-size: var(--fs-text-size-2);
+			line-height: var(--fs-spacing-4);
+
+			[data-fs-address-details-complement] {
+				color: #707070;
+				margin-left: var(--fs-spacing-1);
+			}
+		}
+	}
+
+	[data-fs-address-details-info-wrapper] {
+		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;
+				border-radius: var(--fs-border-radius-pill);
+				border: var(--fs-border-width);
+				padding: var(--fs-spacing-0);
+				gap: var(--fs-spacing-0);
+				border-style: solid;
+				border-color: #e0e0e0;
+
+				[data-fs-bp-tab-option] {
+					padding: 0.375rem var(--fs-text-size-3);
+				}
+
+				[data-fs-bp-tab-option-is-active="true"] {
+					background-color: #ebebeb;
+					color: black !important;
+					border-radius: var(--fs-border-radius-pill);
+				}
+			}
+
+			[data-fs-address-details-button] {
+				padding: var(--fs-spacing-1) var(--fs-spacing-3);
+				color: #0366dd;
+				display: flex;
+				align-items: center;
+				background-color: white;
+				cursor: pointer;
+
+				font-weight: var(--fs-text-weight-semibold);
+				font-size: var(--fs-text-size-2);
+				line-height: var(--fs-spacing-4);
+
+				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;
+				}
+			}
+		}
+
+		[data-fs-address-details-info-line] {
+			padding: 1.375rem 0;
+			border-bottom: var(--fs-border-width) solid #e5e5e5;
+			display: flex;
+			align-items: center;
+
+			font-weight: var(--fs-text-weight-medium);
+			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;
+			}
+
+			[data-fs-address-details-info-line-label] {
+				color: #707070;
+				width: calc(var(--fs-spacing-13) * 2);
+			}
+
+			[data-fs-address-details-info-line-value] {
+				color: #000000;
+			}
+		}
+
+		[data-fs-address-details-locations] {
+			border: var(--fs-border-width) solid #e5e5e5;
+			border-radius: var(--fs-border-radius-medium);
+			margin-bottom: var(--fs-spacing-8);
+
+			[data-fs-address-details-location] {
+				padding: var(--fs-spacing-2) var(--fs-spacing-3);
+				border-bottom: var(--fs-border-width) solid #e5e5e5;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				font-weight: var(--fs-text-weight-medium);
+				font-size: var(--fs-text-size-1);
+				line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				color: #000000;
+
+				[data-fs-address-details-location-actions] {
+					display: flex;
+					align-items: center;
+					gap: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
+
+					button {
+						height: var(--fs-spacing-6);
+						width: var(--fs-spacing-6);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+
+						&:hover {
+							background-color: #f5f5f5;
+							cursor: pointer;
+							border-radius: var(--fs-border-radius-pill);
+						}
+
+						svg {
+							color: #707070;
+							min-height: var(--fs-spacing-4);
+							min-width: var(--fs-spacing-4);
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 [data-fs-bp-address-tabs-list] {
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "../../components/EditRecipientAddressDrawer/edit-recipient-address-drawer.scss";
-
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  [data-fs-bp-address-tabs-filter] {
-    display: flex;
-    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] {
-    padding-bottom: var(--fs-spacing-9);
-
-    td {
-      padding: var(--fs-spacing-1) 0;
-    }
-
-    [data-fs-bp-address-tabs-actions] {
-      display: flex;
-      align-items: flex-end;
-      justify-self: flex-end;
-
-      [data-fs-button][data-fs-button-variant="tertiary"]:hover {
-        [data-fs-button-wrapper] {
-          background-color: #f5f5f5;
-        }
-      }
-
-      [data-fs-button][data-fs-button-variant="tertiary"]:focus {
-        [data-fs-button-wrapper] {
-          background-color: unset;
-        }
-      }
-
-      [data-fs-bp-address-tabs-actions-icon] {
-        [data-fs-button-icon] {
-          cursor: pointer;
-          color: #1f1f1f;
-        }
-      }
-    }
-  }
-
-  [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;
-
-    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);
-  }
-
-  &[data-fs-bp-address-location-list] {
-    [data-fs-empty-state-section] {
-      gap: var(--fs-spacing-4);
-    }
-  }
+	@import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+	@import "@faststore/ui/src/components/atoms/Button/styles.scss";
+	@import "../../components/EditRecipientAddressDrawer/edit-recipient-address-drawer.scss";
+
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+
+	[data-fs-bp-address-tabs-filter] {
+		display: flex;
+		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] {
+		padding-bottom: var(--fs-spacing-9);
+
+		[data-fs-bp-address-tabs-actions] {
+			display: flex;
+			align-items: flex-end;
+			justify-self: flex-end;
+
+			[data-fs-button][data-fs-button-variant="tertiary"]:hover {
+				[data-fs-button-wrapper] {
+					background-color: #f5f5f5;
+				}
+			}
+
+			[data-fs-button][data-fs-button-variant="tertiary"]:focus {
+				[data-fs-button-wrapper] {
+					background-color: unset;
+				}
+			}
+		}
+
+		[data-fs-bp-address-tabs-actions-icon] {
+			flex: none;
+			--fs-button-height: var(--fs-spacing-6);
+			--fs-button-border-radius: 50%;
+
+			[data-fs-button-icon] {
+				cursor: pointer;
+				color: #1f1f1f;
+			}
+		}
+	}
+
+	[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;
+
+		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);
+	}
+
+	&[data-fs-bp-address-location-list] {
+		[data-fs-empty-state-section] {
+			gap: var(--fs-spacing-4);
+		}
+	}
 }

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

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 
 import {
   HeaderInside,
-  Icon,
+  IconBookmarked,
   InternalSearch,
   Paginator,
 } from "../../../shared/components";
@@ -88,6 +88,20 @@ export const AddressLayout = ({
     currentContract: contract,
   } = useBuyerPortal();
 
+  const columns = getTableColumns({
+    nameColumnSize: "18.125rem",
+    actionsLength: 2,
+    extraColumns: [
+      {
+        key: "type",
+        label: "Type",
+        align: "left",
+        hideOnScreenSize: "phonemid",
+        size: "100%",
+      },
+    ],
+  });
+
   return (
     <GlobalLayout>
       <ContractTabsLayout
@@ -135,17 +149,12 @@ export const AddressLayout = ({
                 />
               ) : (
                 <div data-fs-addresses-table>
-                  <Table>
-                    <Table.Head
-                      columns={getTableColumns({
-                        withType: true,
-                        withActions: true,
-                      })}
-                    />
+                  <Table layoutFixed>
+                    <Table.Head columns={columns} />
 
                     <Table.Body>
                       {isLoading ? (
-                        <Table.Loading />
+                        <Table.Loading columns={columns.length} />
                       ) : (
                         addresses.map(({ id, ...address }) => (
                           <Table.Row
@@ -155,32 +164,20 @@ export const AddressLayout = ({
                             iconName="LocalPostOffice"
                             iconSize={20}
                             children={
-                              Array.isArray(address.types) &&
-                              address.types.length > 0
-                                ? address.types.map((type) => (
-                                    <td key={type}>
-                                      <span>{type}</span>
-                                    </td>
-                                  ))
-                                : null
+                              <Table.Cell hideOnScreenSize="phonemid">
+                                {Array.isArray(address.types) &&
+                                address.types.length > 0 ? (
+                                  <span>{address.types.join(", ")}</span>
+                                ) : null}
+                              </Table.Cell>
                             }
                             href={buyerPortalRoutes.addressDetails({
                               orgUnitId: orgUnit?.id ?? "",
                               contractId: contract?.id ?? "",
                               addressId: id,
                             })}
-                            defaultItemIcon={
-                              address.isDefault ? (
-                                <div data-fs-bp-table-row-default-icon>
-                                  <Icon
-                                    name="Bookmark"
-                                    width={20}
-                                    height={20}
-                                  />
-                                </div>
-                              ) : (
-                                <br />
-                              )
+                            actionIcons={
+                              address.isDefault ? <IconBookmarked /> : null
                             }
                             dropdownMenu={
                               <AddressDropdownMenu