@vtex/faststore-plugin-buyer-portal 1.0.37 → 1.0.38

package/package.json

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

package/plugin.config.js

@@ -5,42 +5,70 @@ module.exports = {
       path: "/buyer-portal/[[...contractMode]]",
       appLayout: false,
     },
-    "org-unit-details": {
-      path: "/org-unit/[orgUnitId]",
-      appLayout: false,
-    },
+
     "address-details": {
-      path: "/address/[addressId]",
-      appLayout: false,
-    },
-    "user-details": {
-      path: "/user/[userId]",
+      path: "/buyer-portal/address/[orgUnitId]/[contractId]/[addressId]",
       appLayout: false,
     },
-
-    // ----
     profile: {
-      path: "/profile/[contractId]",
-      appLayout: false,
-    },
-    contracts: {
-      path: "/contracts/[orgUnitId]",
+      path: "/buyer-portal/profile/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     addresses: {
-      path: "/addresses/[orgUnitId]",
+      path: "/buyer-portal/addresses/[orgUnitId]/[contractId]",
       appLayout: false,
     },
+
+    // Theses Routes will be added in the future
+    // "payment-methods": {
+    //   path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // "credit-cards": {
+    //   path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // collections: {
+    //   path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // "po-numbers": {
+    //   path: "/buyer-portal/po-numbers/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // "cost-centers": {
+    //   path: "/buyer-portal/cost-centers/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // releases: {
+    //   path: "/buyer-portal/releases/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // roles: {
+    //   path: "/buyer-portal/roles/[orgUnitId]",
+    //   appLayout: false,
+    // },
+
     users: {
-      path: "/users/[orgUnitId]",
+      path: "/buyer-portal/users/[orgUnitId]",
       appLayout: false,
     },
 
     "org-units": {
-      path: "/org-units/[orgUnitId]",
+      path: "/buyer-portal/org-units/[orgUnitId]",
+      appLayout: false,
+    },
+
+    "user-details": {
+      path: "/buyer-portal/user/[orgUnitId]/[userId]",
+      appLayout: false,
+    },
+    "org-unit-details": {
+      path: "/buyer-portal/org-unit/[orgUnitId]",
       appLayout: false,
     },
   },
+
   apis: {
     "new-route": {
       path: "/new-route",

package/public/buyer-portal-icons.svg

@@ -50,9 +50,10 @@
       stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
   </symbol>
 
-  <symbol id="Back"
-    xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-    <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+  <symbol id="Back" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M7.8298 13L13.4333 18.6L12.0074 20L4.00244 12L12.0074 4L13.4333 5.4L7.8298 11H20.0123V13H7.8298Z"
+      fill="currentColor" />
   </symbol>
 
   <symbol id="CaretRight" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
@@ -211,10 +212,17 @@
       d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" />
   </symbol>
 
-  <symbol id="Profile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"
-    fill="none">
+  <symbol id="Profile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+
     <path
-      d="M6 6C5.16667 6 4.45833 5.70833 3.875 5.125C3.29167 4.54167 3 3.83333 3 3C3 2.16667 3.29167 1.45833 3.875 0.875C4.45833 0.291667 5.16667 0 6 0C6.83333 0 7.54167 0.291667 8.125 0.875C8.70833 1.45833 9 2.16667 9 3C9 3.83333 8.70833 4.54167 8.125 5.125C7.54167 5.70833 6.83333 6 6 6ZM0 12V10C0 9.68056 0.0868056 9.37847 0.260417 9.09375C0.434028 8.80903 0.673611 8.56944 0.979167 8.375C1.74306 7.93056 2.55063 7.59028 3.40188 7.35417C4.25313 7.11806 5.11771 7 5.99563 7C6.87354 7 7.73958 7.11806 8.59375 7.35417C9.44792 7.59028 10.2569 7.93056 11.0208 8.375C11.3264 8.55556 11.566 8.79167 11.7396 9.08333C11.9132 9.375 12 9.68056 12 10V12H0ZM1.5 10.5H10.5V10C10.5 9.92806 10.479 9.86271 10.4369 9.80396C10.3949 9.74507 10.3396 9.69931 10.2708 9.66667C9.63194 9.27778 8.95139 8.98611 8.22917 8.79167C7.50694 8.59722 6.76389 8.5 6 8.5C5.23611 8.5 4.49306 8.59722 3.77083 8.79167C3.04861 8.98611 2.36806 9.27778 1.72917 9.66667C1.65972 9.72222 1.60417 9.77583 1.5625 9.8275C1.52083 9.87931 1.5 9.93681 1.5 10V10.5ZM6.00437 4.5C6.41813 4.5 6.77083 4.35271 7.0625 4.05812C7.35417 3.76354 7.5 3.40937 7.5 2.99562C7.5 2.58187 7.35271 2.22917 7.05812 1.9375C6.76354 1.64583 6.40938 1.5 5.99563 1.5C5.58188 1.5 5.22917 1.64729 4.9375 1.94188C4.64583 2.23646 4.5 2.59063 4.5 3.00438C4.5 3.41813 4.64729 3.77083 4.94187 4.0625C5.23646 4.35417 5.59062 4.5 6.00437 4.5Z"
+      d="M9.99992 9.99992C9.08325 9.99992 8.29853 9.67353 7.64575 9.02075C6.99297 8.36797 6.66659 7.58325 6.66659 6.66659C6.66659 5.74992 6.99297 4.9652 7.64575 4.31242C8.29853 3.65964 9.08325 3.33325 9.99992 3.33325C10.9166 3.33325 11.7013 3.65964 12.3541 4.31242C13.0069 4.9652 13.3333 5.74992 13.3333 6.66659C13.3333 7.58325 13.0069 8.36797 12.3541 9.02075C11.7013 9.67353 10.9166 9.99992 9.99992 9.99992ZM3.33325 16.6666V14.3333C3.33325 13.861 3.45478 13.427 3.69784 13.0312C3.94089 12.6353 4.26381 12.3333 4.66659 12.1249C5.5277 11.6944 6.4027 11.3714 7.29159 11.1562C8.18047 10.9409 9.08325 10.8333 9.99992 10.8333C10.9166 10.8333 11.8194 10.9409 12.7083 11.1562C13.5971 11.3714 14.4721 11.6944 15.3333 12.1249C15.736 12.3333 16.0589 12.6353 16.302 13.0312C16.5451 13.427 16.6666 13.861 16.6666 14.3333V16.6666H3.33325ZM4.99992 14.9999H14.9999V14.3333C14.9999 14.1805 14.9617 14.0416 14.8853 13.9166C14.8089 13.7916 14.7083 13.6944 14.5833 13.6249C13.8333 13.2499 13.0763 12.9687 12.3124 12.7812C11.5485 12.5937 10.7777 12.4999 9.99992 12.4999C9.22214 12.4999 8.45131 12.5937 7.68742 12.7812C6.92353 12.9687 6.16659 13.2499 5.41659 13.6249C5.29159 13.6944 5.19089 13.7916 5.1145 13.9166C5.03811 14.0416 4.99992 14.1805 4.99992 14.3333V14.9999ZM9.99992 8.33325C10.4583 8.33325 10.8506 8.17006 11.177 7.84367C11.5034 7.51728 11.6666 7.12492 11.6666 6.66659C11.6666 6.20825 11.5034 5.81589 11.177 5.4895C10.8506 5.16311 10.4583 4.99992 9.99992 4.99992C9.54159 4.99992 9.14922 5.16311 8.82284 5.4895C8.49645 5.81589 8.33325 6.20825 8.33325 6.66659C8.33325 7.12492 8.49645 7.51728 8.82284 7.84367C9.14922 8.17006 9.54159 8.33325 9.99992 8.33325Z"
+      fill="black" />
+
+  </symbol>
+
+  <symbol id="AccountCircle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M3.85 15.1C4.7 14.45 5.65 13.9375 6.7 13.5625C7.75 13.1875 8.85 13 10 13C11.15 13 12.25 13.1875 13.3 13.5625C14.35 13.9375 15.3 14.45 16.15 15.1C16.7333 14.4167 17.1875 13.6417 17.5125 12.775C17.8375 11.9083 18 10.9833 18 10C18 7.78333 17.2208 5.89583 15.6625 4.3375C14.1042 2.77917 12.2167 2 10 2C7.78333 2 5.89583 2.77917 4.3375 4.3375C2.77917 5.89583 2 7.78333 2 10C2 10.9833 2.1625 11.9083 2.4875 12.775C2.8125 13.6417 3.26667 14.4167 3.85 15.1ZM10 11C9.01666 11 8.1875 10.6625 7.5125 9.9875C6.8375 9.3125 6.5 8.48333 6.5 7.5C6.5 6.51667 6.8375 5.6875 7.5125 5.0125C8.1875 4.3375 9.01666 4 10 4C10.9833 4 11.8125 4.3375 12.4875 5.0125C13.1625 5.6875 13.5 6.51667 13.5 7.5C13.5 8.48333 13.1625 9.3125 12.4875 9.9875C11.8125 10.6625 10.9833 11 10 11ZM10 20C8.61666 20 7.31666 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31666 0.2625 8.61666 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C10.8833 18 11.7167 17.8708 12.5 17.6125C13.2833 17.3542 14 16.9833 14.65 16.5C14 16.0167 13.2833 15.6458 12.5 15.3875C11.7167 15.1292 10.8833 15 10 15C9.11666 15 8.28333 15.1292 7.5 15.3875C6.71666 15.6458 6 16.0167 5.35 16.5C6 16.9833 6.71666 17.3542 7.5 17.6125C8.28333 17.8708 9.11666 18 10 18ZM10 9C10.4333 9 10.7917 8.85833 11.075 8.575C11.3583 8.29167 11.5 7.93333 11.5 7.5C11.5 7.06667 11.3583 6.70833 11.075 6.425C10.7917 6.14167 10.4333 6 10 6C9.56666 6 9.20833 6.14167 8.925 6.425C8.64166 6.70833 8.5 7.06667 8.5 7.5C8.5 7.93333 8.64166 8.29167 8.925 8.575C9.20833 8.85833 9.56666 9 10 9Z"
       fill="currentColor" />
   </symbol>
 
@@ -254,7 +262,7 @@
     viewBox="0 -960 960 960"
     fill="currentColor">
     <path
-      d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>
+      d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" />
   </symbol>
 
 
@@ -263,9 +271,70 @@
     viewBox="0 0 13 15"
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 15V2.5C0 2.08181 0.145833 1.72375 0.4375 1.42583C0.729167 1.12806 1.08333 0.986111 1.5 1H6V2.5H1.5V12.7708L5 11.375L8.5 12.7708V7H10V15L5 13L0 15ZM9.25 5.25V3.75H7.75V2.25H9.25V0.75H10.75V2.25H12.25V3.75H10.75V5.25H9.25Z"/>
+    <path
+      d="M0 15V2.5C0 2.08181 0.145833 1.72375 0.4375 1.42583C0.729167 1.12806 1.08333 0.986111 1.5 1H6V2.5H1.5V12.7708L5 11.375L8.5 12.7708V7H10V15L5 13L0 15ZM9.25 5.25V3.75H7.75V2.25H9.25V0.75H10.75V2.25H12.25V3.75H10.75V5.25H9.25Z" />
+  </symbol>
+
+  <symbol id="Description" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+    viewBox="0 0 20 20" fill="none">
+    <mask id="mask0_894_797" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
+      width="20" height="20">
+      <rect width="20" height="20" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_894_797)">
+      <path
+        d="M6.66659 15.0001H13.3333V13.3334H6.66659V15.0001ZM6.66659 11.6667H13.3333V10.0001H6.66659V11.6667ZM4.99992 18.3334C4.54159 18.3334 4.14922 18.1702 3.82284 17.8438C3.49645 17.5174 3.33325 17.1251 3.33325 16.6667V3.33341C3.33325 2.87508 3.49645 2.48272 3.82284 2.15633C4.14922 1.82994 4.54159 1.66675 4.99992 1.66675H11.6666L16.6666 6.66675V16.6667C16.6666 17.1251 16.5034 17.5174 16.177 17.8438C15.8506 18.1702 15.4583 18.3334 14.9999 18.3334H4.99992ZM10.8333 7.50008V3.33341H4.99992V16.6667H14.9999V7.50008H10.8333Z"
+        fill="currentColor" />
+    </g>
+  </symbol>
+
+
+  <symbol id="CreditCard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+    <g clip-path="url(#clip0_894_1406)">
+      <mask id="mask0_894_1406" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
+        width="20" height="20">
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_894_1406)">
+        <path
+          d="M18.3334 4.99992V14.9999C18.3334 15.4583 18.1702 15.8506 17.8438 16.177C17.5174 16.5034 17.1251 16.6666 16.6667 16.6666H3.33341C2.87508 16.6666 2.48272 16.5034 2.15633 16.177C1.82994 15.8506 1.66675 15.4583 1.66675 14.9999V4.99992C1.66675 4.54159 1.82994 4.14922 2.15633 3.82284C2.48272 3.49645 2.87508 3.33325 3.33341 3.33325H16.6667C17.1251 3.33325 17.5174 3.49645 17.8438 3.82284C18.1702 4.14922 18.3334 4.54159 18.3334 4.99992ZM3.33341 6.66659H16.6667V4.99992H3.33341V6.66659ZM3.33341 9.99992V14.9999H16.6667V9.99992H3.33341Z"
+          fill="currentColor" />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol id="TableEdit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M4.16667 10.8333H9.16667V7.5H4.16667V10.8333ZM4.16667 5.83333H15.8333V4.16667H4.16667V5.83333ZM4.16667 17.5C3.70833 17.5 3.31597 17.3368 2.98958 17.0104C2.66319 16.684 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66319 3.31597 2.98958 2.98958C3.31597 2.66319 3.70833 2.5 4.16667 2.5H15.8333C16.2917 2.5 16.684 2.66319 17.0104 2.98958C17.3368 3.31597 17.5 3.70833 17.5 4.16667V9.41667C17.2361 9.30556 16.9618 9.23264 16.6771 9.19792C16.3924 9.1632 16.1111 9.16667 15.8333 9.20833C15.5417 9.26389 15.2604 9.35764 14.9896 9.48958C14.7188 9.62153 14.4722 9.79861 14.25 10.0208L13.4375 10.8333L9.16667 15.0833V17.5H4.16667ZM4.16667 15.8333H9.16667V12.5H4.16667V15.8333ZM10.8333 10.8333H13.4375L14.25 10.0208C14.4722 9.79861 14.7188 9.62153 14.9896 9.48958C15.2604 9.35764 15.5417 9.26389 15.8333 9.20833V7.5H10.8333V10.8333ZM10.8333 18.3333V15.7708L15.4375 11.1875C15.5625 11.0625 15.7014 10.9722 15.8542 10.9167C16.0069 10.8611 16.1597 10.8333 16.3125 10.8333C16.4792 10.8333 16.6389 10.8646 16.7917 10.9271C16.9444 10.9896 17.0833 11.0833 17.2083 11.2083L17.9792 11.9792C18.0903 12.1042 18.1771 12.2431 18.2396 12.3958C18.3021 12.5486 18.3333 12.7014 18.3333 12.8542C18.3333 13.0069 18.3056 13.1632 18.25 13.3229C18.1944 13.4826 18.1042 13.625 17.9792 13.75L13.3958 18.3333H10.8333ZM12.0833 17.0833H12.875L15.3958 14.5417L14.625 13.7708L12.0833 16.2917V17.0833ZM15.0208 14.1458L14.625 13.7708L15.3958 14.5417L15.0208 14.1458Z"
+      fill="currentColor" />
+  </symbol>
+
+  <symbol id="Paid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M9.25008 15.8334H10.7084V14.7917C11.4029 14.6667 12.0001 14.3959 12.5001 13.9792C13.0001 13.5626 13.2501 12.9445 13.2501 12.1251C13.2501 11.5417 13.0834 11.007 12.7501 10.5209C12.4167 10.0348 11.7501 9.61119 10.7501 9.25008C9.91675 8.9723 9.34036 8.72925 9.02092 8.52092C8.70147 8.31258 8.54175 8.02786 8.54175 7.66675C8.54175 7.30564 8.67022 7.02092 8.92717 6.81258C9.18411 6.60425 9.55564 6.50008 10.0417 6.50008C10.4862 6.50008 10.8334 6.60772 11.0834 6.823C11.3334 7.03828 11.514 7.30564 11.6251 7.62508L12.9584 7.08342C12.8056 6.5973 12.5244 6.17369 12.1147 5.81258C11.7049 5.45147 11.2501 5.25008 10.7501 5.20841V4.16675H9.29175V5.20841C8.5973 5.36119 8.05564 5.66675 7.66675 6.12508C7.27786 6.58342 7.08342 7.0973 7.08342 7.66675C7.08342 8.31953 7.27439 8.8473 7.65633 9.25008C8.03828 9.65286 8.63897 10.0001 9.45842 10.2917C10.3334 10.6112 10.9411 10.8959 11.2813 11.1459C11.6216 11.3959 11.7917 11.7223 11.7917 12.1251C11.7917 12.5834 11.6286 12.9202 11.3022 13.1355C10.9758 13.3508 10.5834 13.4584 10.1251 13.4584C9.66675 13.4584 9.2605 13.3161 8.90633 13.0313C8.55217 12.7466 8.29175 12.3195 8.12508 11.7501L6.75008 12.2917C6.94453 12.9584 7.24661 13.4966 7.65633 13.9063C8.06605 14.3161 8.5973 14.5973 9.25008 14.7501V15.8334ZM10.0001 18.3334C8.8473 18.3334 7.76397 18.1147 6.75008 17.6772C5.73619 17.2397 4.85425 16.6459 4.10425 15.8959C3.35425 15.1459 2.7605 14.264 2.323 13.2501C1.8855 12.2362 1.66675 11.1529 1.66675 10.0001C1.66675 8.8473 1.8855 7.76397 2.323 6.75008C2.7605 5.73619 3.35425 4.85425 4.10425 4.10425C4.85425 3.35425 5.73619 2.7605 6.75008 2.323C7.76397 1.8855 8.8473 1.66675 10.0001 1.66675C11.1529 1.66675 12.2362 1.8855 13.2501 2.323C14.264 2.7605 15.1459 3.35425 15.8959 4.10425C16.6459 4.85425 17.2397 5.73619 17.6772 6.75008C18.1147 7.76397 18.3334 8.8473 18.3334 10.0001C18.3334 11.1529 18.1147 12.2362 17.6772 13.2501C17.2397 14.264 16.6459 15.1459 15.8959 15.8959C15.1459 16.6459 14.264 17.2397 13.2501 17.6772C12.2362 18.1147 11.1529 18.3334 10.0001 18.3334ZM10.0001 16.6667C11.8612 16.6667 13.4376 16.0209 14.7292 14.7292C16.0209 13.4376 16.6667 11.8612 16.6667 10.0001C16.6667 8.13897 16.0209 6.56258 14.7292 5.27092C13.4376 3.97925 11.8612 3.33341 10.0001 3.33341C8.13897 3.33341 6.56258 3.97925 5.27092 5.27092C3.97925 6.56258 3.33341 8.13897 3.33341 10.0001C3.33341 11.8612 3.97925 13.4376 5.27092 14.7292C6.56258 16.0209 8.13897 16.6667 10.0001 16.6667Z"
+      fill="currentColor" />
   </symbol>
 
+  <symbol id="Rebase" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+    fill="none">
+    <path
+      d="M8.95842 19.375L7.79175 18.1875L9.31258 16.6667H6.52092C6.34036 17.1528 6.03828 17.5521 5.61467 17.8646C5.19105 18.1771 4.70841 18.3333 4.16675 18.3333C3.4723 18.3333 2.88203 18.0903 2.39591 17.6042C1.9098 17.1181 1.66675 16.5278 1.66675 15.8333C1.66675 15.2917 1.823 14.809 2.1355 14.3854C2.448 13.9618 2.8473 13.6597 3.33341 13.4792V6.52083C2.8473 6.34028 2.448 6.03819 2.1355 5.61458C1.823 5.19097 1.66675 4.70833 1.66675 4.16667C1.66675 3.47222 1.9098 2.88194 2.39591 2.39583C2.88203 1.90972 3.4723 1.66667 4.16675 1.66667C4.70841 1.66667 5.19105 1.82292 5.61467 2.13542C6.03828 2.44792 6.34036 2.84722 6.52092 3.33333H9.31258L7.79175 1.8125L8.95842 0.625L12.5001 4.16667L8.95842 7.70833L7.79175 6.52083L9.31258 5H6.52092C6.39592 5.36111 6.20147 5.67361 5.93758 5.9375C5.67369 6.20139 5.36119 6.39583 5.00008 6.52083V13.4792C5.36119 13.6042 5.67369 13.7986 5.93758 14.0625C6.20147 14.3264 6.39592 14.6389 6.52092 15H9.31258L7.79175 13.4792L8.95842 12.2917L12.5001 15.8333L8.95842 19.375ZM15.8334 18.3333C15.139 18.3333 14.5487 18.0903 14.0626 17.6042C13.5765 17.1181 13.3334 16.5278 13.3334 15.8333C13.3334 15.2778 13.4897 14.7882 13.8022 14.3646C14.1147 13.941 14.514 13.6458 15.0001 13.4792V6.52083C14.514 6.35417 14.1147 6.05903 13.8022 5.63542C13.4897 5.21181 13.3334 4.72222 13.3334 4.16667C13.3334 3.47222 13.5765 2.88194 14.0626 2.39583C14.5487 1.90972 15.139 1.66667 15.8334 1.66667C16.5279 1.66667 17.1181 1.90972 17.6042 2.39583C18.0904 2.88194 18.3334 3.47222 18.3334 4.16667C18.3334 4.72222 18.1772 5.21181 17.8647 5.63542C17.5522 6.05903 17.1529 6.35417 16.6667 6.52083V13.4792C17.1529 13.6597 17.5522 13.9618 17.8647 14.3854C18.1772 14.809 18.3334 15.2917 18.3334 15.8333C18.3334 16.5278 18.0904 17.1181 17.6042 17.6042C17.1181 18.0903 16.5279 18.3333 15.8334 18.3333ZM4.16675 16.6667C4.40286 16.6667 4.60078 16.5868 4.7605 16.4271C4.92022 16.2674 5.00008 16.0694 5.00008 15.8333C5.00008 15.5972 4.92022 15.3993 4.7605 15.2396C4.60078 15.0799 4.40286 15 4.16675 15C3.93064 15 3.73272 15.0799 3.573 15.2396C3.41328 15.3993 3.33341 15.5972 3.33341 15.8333C3.33341 16.0694 3.41328 16.2674 3.573 16.4271C3.73272 16.5868 3.93064 16.6667 4.16675 16.6667ZM15.8334 16.6667C16.0695 16.6667 16.2674 16.5868 16.4272 16.4271C16.5869 16.2674 16.6667 16.0694 16.6667 15.8333C16.6667 15.5972 16.5869 15.3993 16.4272 15.2396C16.2674 15.0799 16.0695 15 15.8334 15C15.5973 15 15.3994 15.0799 15.2397 15.2396C15.0799 15.3993 15.0001 15.5972 15.0001 15.8333C15.0001 16.0694 15.0799 16.2674 15.2397 16.4271C15.3994 16.5868 15.5973 16.6667 15.8334 16.6667ZM4.16675 5C4.40286 5 4.60078 4.92014 4.7605 4.76042C4.92022 4.60069 5.00008 4.40278 5.00008 4.16667C5.00008 3.93056 4.92022 3.73264 4.7605 3.57292C4.60078 3.41319 4.40286 3.33333 4.16675 3.33333C3.93064 3.33333 3.73272 3.41319 3.573 3.57292C3.41328 3.73264 3.33341 3.93056 3.33341 4.16667C3.33341 4.40278 3.41328 4.60069 3.573 4.76042C3.73272 4.92014 3.93064 5 4.16675 5ZM15.8334 5C16.0695 5 16.2674 4.92014 16.4272 4.76042C16.5869 4.60069 16.6667 4.40278 16.6667 4.16667C16.6667 3.93056 16.5869 3.73264 16.4272 3.57292C16.2674 3.41319 16.0695 3.33333 15.8334 3.33333C15.5973 3.33333 15.3994 3.41319 15.2397 3.57292C15.0799 3.73264 15.0001 3.93056 15.0001 4.16667C15.0001 4.40278 15.0799 4.60069 15.2397 4.76042C15.3994 4.92014 15.5973 5 15.8334 5Z"
+      fill="currentColor" />
+  </symbol>
 
-</svg>
 
+  <symbol id="FormatSize" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+
+    <path d="M12 16V6H8V4H18V6H14V16H12ZM4.5 16V10H2V8H9V10H6.5V16H4.5Z" fill="currentColor" />
+
+  </symbol>
+
+  <symbol id="DoNotDisturbOn" xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20" fill="none">
+
+    <path
+      d="M5.83317 10.8334H14.1665V9.16675H5.83317V10.8334ZM9.99984 18.3334C8.84706 18.3334 7.76373 18.1147 6.74984 17.6772C5.73595 17.2397 4.854 16.6459 4.104 15.8959C3.354 15.1459 2.76025 14.264 2.32275 13.2501C1.88525 12.2362 1.6665 11.1529 1.6665 10.0001C1.6665 8.8473 1.88525 7.76397 2.32275 6.75008C2.76025 5.73619 3.354 4.85425 4.104 4.10425C4.854 3.35425 5.73595 2.7605 6.74984 2.323C7.76373 1.8855 8.84706 1.66675 9.99984 1.66675C11.1526 1.66675 12.2359 1.8855 13.2498 2.323C14.2637 2.7605 15.1457 3.35425 15.8957 4.10425C16.6457 4.85425 17.2394 5.73619 17.6769 6.75008C18.1144 7.76397 18.3332 8.8473 18.3332 10.0001C18.3332 11.1529 18.1144 12.2362 17.6769 13.2501C17.2394 14.264 16.6457 15.1459 15.8957 15.8959C15.1457 16.6459 14.2637 17.2397 13.2498 17.6772C12.2359 18.1147 11.1526 18.3334 9.99984 18.3334ZM9.99984 16.6667C11.8609 16.6667 13.4373 16.0209 14.729 14.7292C16.0207 13.4376 16.6665 11.8612 16.6665 10.0001C16.6665 8.13897 16.0207 6.56258 14.729 5.27092C13.4373 3.97925 11.8609 3.33341 9.99984 3.33341C8.13873 3.33341 6.56234 3.97925 5.27067 5.27092C3.979 6.56258 3.33317 8.13897 3.33317 10.0001C3.33317 11.8612 3.979 13.4376 5.27067 14.7292C6.56234 16.0209 8.13873 16.6667 9.99984 16.6667Z"
+      fill="currentColor" />
+
+  </symbol>
+</svg>

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

@@ -85,8 +85,11 @@ export const AddressDropdownMenu = ({
           Remove from Unit
         </DropdownItem>
         {isRootLevelOrgUnit && (
-          <DropdownItem onClick={openDeleteAddressDrawer}>
-            <Icon name="Trash" {...sizeProps} data-fs-bp-delete-address />
+          <DropdownItem
+            onClick={openDeleteAddressDrawer}
+            data-fs-bp-dropdown-menu-item-mode="danger"
+          >
+            <Icon name="Delete" {...sizeProps} data-fs-bp-delete-address />
             <span data-fs-bp-delete-address>Delete</span>
           </DropdownItem>
         )}

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

@@ -1,6 +1,6 @@
 import { Toggle, Dropdown, DropdownButton } from "@faststore/ui";
 import Link from "next/link";
-import { Icon, Tag } from "../../../shared/components";
+import { BasicDropdownMenu, Icon, Tag } from "../../../shared/components";
 import type { AddressData } from "../../types";
 import { AddressDropdownMenu } from "..";
 
@@ -16,9 +16,7 @@ export type AddressLineProps = {
 export const AddressLine = ({
   name,
   types,
-  id,
   href,
-  isActive,
   currentAddress,
 }: AddressLineProps) => (
   <li data-fs-addresses-line>
@@ -33,16 +31,13 @@ export const AddressLine = ({
         {name}
       </span>
 
-      {types.map((type, index) => (
+      {types.map((type) => (
         <Tag key={type}>{type}</Tag>
       ))}
     </Link>
 
-    <Toggle id={id} defaultChecked={isActive} />
     <Dropdown>
-      <DropdownButton data-fs-addresses-dropdown-trigger>
-        <Icon name="MoreVert" data-fs-addresses-dropdown-trigger-icon />
-      </DropdownButton>
+      <BasicDropdownMenu.Trigger />
       <AddressDropdownMenu currentAddress={currentAddress} />
     </Dropdown>
   </li>

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

@@ -73,7 +73,7 @@ export default function AddressesCard({
                         />
                         Edit
                       </DropdownItem>
-                      <DropdownItem>
+                      <DropdownItem data-fs-bp-dropdown-menu-item-mode="danger">
                         <Icon
                           name="Delete"
                           width={24}

package/src/features/addresses/components/LocationForm/location-form.scss

@@ -16,7 +16,7 @@
 
   [data-fs-bp-add-location] {
     width: 100%;
-    margin-top: 0.5rem;
+    margin-top: var(--fs-text-size-8);
 
     [data-fs-button-wrapper] {
       border-radius: var(--fs-border-radius-pill);

package/src/features/addresses/components/RecipientsForm/recipients-form.scss

@@ -16,8 +16,7 @@
 
   [data-fs-bp-add-recipients] {
     width: 100%;
-    margin-top: 0.5rem;
-
+    margin-top: var(--fs-text-size-8);
     [data-fs-button-wrapper] {
       border-radius: var(--fs-border-radius-pill);
       border-style: solid;

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

@@ -1,14 +1,21 @@
-import { DropdownItem, DropdownMenu, Toggle } from "@faststore/ui";
+import { Dropdown, DropdownItem, DropdownMenu, Toggle } from "@faststore/ui";
 import { useId, useState } from "react";
-import { Icon, InternalTopBar, Tab } from "../../../shared/components";
-import { GlobalLayout } from "../../../shared/layouts";
+import {
+  BasicDropdownMenu,
+  HeaderInside,
+  Icon,
+  InternalTopBar,
+  Tab,
+} from "../../../shared/components";
+import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { addressLabelToPropMapping } from "../../../shared/utils";
 import type { AddressData } from "../../types";
 import { TabBar } from "../../../shared/components/Tab/TabBar";
 import { TabContent } from "../../../shared/components/Tab/TabContent";
 import { TabOption } from "../../../shared/components/Tab/TabOption";
-import { useDrawerProps } from "../../../shared/hooks";
-import { EditAddressDrawer } from "../../components";
+import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
+import { AddressDropdownMenu, EditAddressDrawer } from "../../components";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
 export type AddressDetailsLayoutProps = { data: AddressData | null };
 
@@ -20,105 +27,93 @@ export const AddressDetailsLayout = ({ data }: AddressDetailsLayoutProps) => {
 
   const { id, isActive, ...addressData } = data;
   const [checked, setChecked] = useState(isActive);
-  const [isEditOpen, setIsEditOpen] = useState(false);
   const { open: openEditDrawer, ...createDrawerProps } = useDrawerProps();
 
   const props = Object.keys(addressLabelToPropMapping) as Array<
     keyof typeof addressLabelToPropMapping
   >;
 
+  const {
+    currentOrgUnit: orgUnit,
+    currentUser: user,
+    currentContract: contract,
+  } = useBuyerPortal();
+
   return (
     <GlobalLayout>
-      <section data-fs-address-details-section>
-        <InternalTopBar
-          href="/buyer-portal"
-          showActions
-          titleIcon={
-            <Icon
-              name="LocalPostOffice"
-              height={24}
-              width={24}
-              data-fs-addresses-title-local-post-icon
-            />
-          }
-          title={addressData.name}
-          titleDropDownItems={
-            <DropdownMenu>
-              {["Location 1", "Location 2", "Location 3"].map((item) => (
-                <DropdownItem key={item}>{item}</DropdownItem>
-              ))}
-            </DropdownMenu>
-          }
-        >
-          <div data-fs-address-details-actions-wrapper>
-            <span data-fs-address-details-status-label>
-              {checked ? "Active" : "Inactive"}
-            </span>
-            <Toggle
-              id={`${id}`}
-              checked={checked}
-              onClick={() => setChecked((old) => !old)}
-            />
-          </div>
-        </InternalTopBar>
+      <ContractTabsLayout
+        orgUnitName={orgUnit?.name ?? ""}
+        orgUnitId={orgUnit?.id ?? ""}
+        contractName={contract?.name ?? ""}
+        contractId={contract?.id ?? ""}
+        pageName="Contract"
+        person={{
+          image: undefined,
+          name: user?.name ?? "",
+          role: user?.role ?? "",
+        }}
+      >
+        <section data-fs-address-details-section>
+          <HeaderInside
+            backLink={buyerPortalRoutes.addresses({
+              orgUnitId: orgUnit?.id ?? "",
+              contractId: contract?.id ?? "",
+            })}
+            title={addressData.name}
+          >
+            <Dropdown>
+              <BasicDropdownMenu.Trigger />
+              <AddressDropdownMenu currentAddress={data} />
+            </Dropdown>
+          </HeaderInside>
+          <div data-fs-address-details-info-wrapper>
+            <Tab defaultTabId="address-tab">
+              <div data-fs-address-details-actions>
+                <TabBar>
+                  <TabOption id="address-tab">Details</TabOption>
+                  <TabOption id="location-tab">Locations</TabOption>
+                  <TabOption id="recipient-tab">Recipients</TabOption>
+                </TabBar>
 
-        <div data-fs-address-details-info-wrapper>
-          <div data-fs-address-details-section-header>
-            <h1 data-fs-address-details-title>Address Details</h1>
-          </div>
+                <button
+                  type="button"
+                  data-fs-address-details-button
+                  onClick={openEditDrawer}
+                >
+                  Edit
+                </button>
+              </div>
 
-          <Tab defaultTabId="address-tab">
-            <div data-fs-address-details-actions>
-              <TabBar>
-                <TabOption id="address-tab">Details</TabOption>
-                <TabOption id="location-tab">Locations</TabOption>
-                <TabOption id="recipient-tab">Recipients</TabOption>
-              </TabBar>
+              <TabContent id="address-tab">
+                {props
+                  .filter((prop) => addressData[prop])
+                  .map((prop, index) => {
+                    return (
+                      <div
+                        key={prop}
+                        data-fs-address-details-info-line
+                        data-fs-address-details-info-line-first={index === 0}
+                      >
+                        <span data-fs-address-details-info-line-label>
+                          {addressLabelToPropMapping[prop]}
+                        </span>
+                        <span data-fs-address-details-info-line-value>
+                          {addressData[prop]}
+                        </span>
+                      </div>
+                    );
+                  })}
 
-              <button
-                type="button"
-                data-fs-address-details-button
-                onClick={openEditDrawer}
-              >
-                <Icon
-                  name="Edit"
-                  width={20}
-                  height={20}
-                  data-fs-address-details-icon
+                <EditAddressDrawer
+                  readonly
+                  {...createDrawerProps}
+                  currentAddress={data}
                 />
-                Edit
-              </button>
-            </div>
-
-            <TabContent id="address-tab">
-              {props
-                .filter((prop) => addressData[prop])
-                .map((prop, index) => {
-                  return (
-                    <div
-                      key={prop}
-                      data-fs-address-details-info-line
-                      data-fs-address-details-info-line-first={index === 0}
-                    >
-                      <span data-fs-address-details-info-line-label>
-                        {addressLabelToPropMapping[prop]}
-                      </span>
-                      <span data-fs-address-details-info-line-value>
-                        {addressData[prop]}
-                      </span>
-                    </div>
-                  );
-                })}
-
-              <EditAddressDrawer
-                readonly
-                {...createDrawerProps}
-                currentAddress={data}
-              />
-            </TabContent>
-          </Tab>
-        </div>
-      </section>
+              </TabContent>
+            </Tab>
+          </div>
+        </section>
+      </ContractTabsLayout>
     </GlobalLayout>
   );
 };

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

@@ -2,8 +2,9 @@
   @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";
 
-  width: 100%;
+  padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
 
   [data-fs-address-details-actions-wrapper] {
     display: flex;
@@ -43,13 +44,11 @@
   }
 
   [data-fs-address-details-info-wrapper] {
-    padding: 0 var(--fs-spacing-8);
-
     [data-fs-address-details-actions] {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 1.5rem;
+      margin-bottom: var(--fs-text-size-7);
 
       [data-fs-bp-tab-bar] {
         width: fit-content;
@@ -61,10 +60,7 @@
         border-color: #e0e0e0;
 
         [data-fs-bp-tab-option] {
-          padding-top: var(--fs-spacing-2);
-          padding-right: var(--fs-spacing-3);
-          padding-bottom: var(--fs-spacing-2);
-          padding-left: var(--fs-spacing-3);
+          padding: 0.375rem var(--fs-text-size-3);
         }
 
         [data-fs-bp-tab-option-is-active="true"] {
@@ -76,21 +72,17 @@
 
       [data-fs-address-details-button] {
         padding: var(--fs-spacing-1) var(--fs-spacing-3);
-        color: white;
+        color: #0366dd;
         display: flex;
         align-items: center;
-        // gap: var(--fs-spacing-0);
-        background-color: #0366dd;
+        background-color: white;
 
         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);
-
-        [data-fs-address-details-icon] {
-          color: white;
-        }
+        border: 1px solid #e0e0e0;
       }
     }