@faststore/core 3.64.1 → 3.65.1

package/@generated/schema.graphql

@@ -234,6 +234,8 @@ type Mutation {
   subscribeToNewsletter(data: IPersonNewsletter!): PersonNewsletter
   """Cancels user order"""
   cancelOrder(data: IUserOrderCancel!): UserOrderCancel
+  """Process Order Authorization"""
+  processOrderAuthorization(data: IProcessOrderAuthorization!): ProcessOrderAuthorizationResponse
 }
 
 """Newsletter information."""
@@ -314,6 +316,226 @@ input IStoreOrder {
   shouldSplitItem: Boolean
 }
 
+"""Commercial Authorization response."""
+type CommercialAuthorizationResponse {
+  """Commercial Authorization ID."""
+  id: String!
+  """Order ID associated with the commercial authorization."""
+  orderId: String!
+  """Workflow instance ID."""
+  workflowInstanceId: String!
+  """Current status of the commercial authorization."""
+  status: CommercialAuthorizationStatus!
+  """List of units."""
+  units: [String!]!
+  """Callback endpoint URL."""
+  callbackEndpoint: String!
+  """Total order value desired by the seller."""
+  totalOrderValueDesiredBySeller: Float!
+  """Marketplace payment value."""
+  marketPlacePaymentValue: Float!
+  """Collection of items in the commercial authorization."""
+  itemCollection: [CommercialAuthorizationItem!]!
+  """Additional information as key-value pairs."""
+  additionalInfo: JSONObject!
+  """Dimension status information."""
+  dimensionStatus: [CommercialAuthorizationDimensionStatus!]!
+  """Creation version."""
+  creationVersion: String!
+  """Creation environment."""
+  creationEnvironment: String!
+  """User profile ID."""
+  userProfileId: String!
+}
+
+"""Commercial Authorization status."""
+enum CommercialAuthorizationStatus {
+  """Authorization is pending."""
+  pending
+  """Authorization has been accepted."""
+  accepted
+  """Authorization has been denied."""
+  denied
+}
+
+"""Commercial Authorization item."""
+type CommercialAuthorizationItem {
+  """Item ID."""
+  id: String!
+  """Item SKU."""
+  sku: String!
+  """Item price."""
+  price: Float!
+  """Total system discount applied."""
+  totalSystemDiscount: Float!
+  """Total manual discount applied."""
+  totalManualDiscount: Float!
+  """Item quantity."""
+  quantity: Int!
+  """Additional information as key-value pairs."""
+  additionalInfo: JSONObject!
+}
+
+"""Commercial Authorization dimension status."""
+type CommercialAuthorizationDimensionStatus {
+  """Dimension status ID."""
+  id: String!
+  """Dimension status name."""
+  name: String!
+  """Unit ID, if applicable."""
+  unitId: String
+  """Current status of the dimension."""
+  status: CommercialAuthorizationStatus!
+  """Dimension score."""
+  score: Float!
+  """Priority level."""
+  priority: Int!
+  """Indicates if simulation should be performed."""
+  shouldSimulate: Boolean!
+  """Collection of rules for this dimension."""
+  ruleCollection: [CommercialAuthorizationRule!]!
+  """Creation date."""
+  creationDate: String!
+  """Creation version."""
+  creationVersion: String!
+  """Creation environment."""
+  creationEnvironment: String!
+  """Indicates if all rules acceptance is required."""
+  requireAllRulesAcceptance: Boolean!
+}
+
+"""Commercial Authorization rule."""
+type CommercialAuthorizationRule {
+  """Rule ID."""
+  id: String!
+  """Rule name."""
+  name: String!
+  """Current status of the rule."""
+  status: CommercialAuthorizationStatus!
+  """DO ID, if applicable."""
+  doId: String
+  """List of authorized email addresses."""
+  authorizedEmails: [String!]!
+  """Rule priority."""
+  priority: Int!
+  """Rule trigger configuration."""
+  trigger: CommercialAuthorizationRuleTrigger!
+  """Timeout value."""
+  timeout: Int!
+  """Indicates if notification is enabled."""
+  notification: Boolean!
+  """Score interval configuration."""
+  scoreInterval: CommercialAuthorizationRuleScoreInterval!
+  """Authorization data, if available."""
+  authorizationData: CommercialAuthorizationRuleAuthorizationData
+  """
+  Indicates that the user is listed as one of the possible approvers,
+  but does not necessarily mean that he or she is the next in the chain to approve.
+  """
+  isUserAuthorized: Boolean!
+  """
+  Indicates that the user is next in the approval chain.
+  This means that they must take an approval or rejection action.
+  """
+  isUserNextAuthorizer: Boolean!
+}
+
+"""Commercial Authorization rule trigger."""
+type CommercialAuthorizationRuleTrigger {
+  """Trigger condition."""
+  condition: CommercialAuthorizationRuleTriggerCondition!
+  """Trigger effect."""
+  effect: CommercialAuthorizationRuleTriggerEffect!
+}
+
+"""Commercial Authorization rule trigger condition."""
+type CommercialAuthorizationRuleTriggerCondition {
+  """Condition type."""
+  conditionType: Int!
+  """Condition description."""
+  description: String
+  """Less than value."""
+  lessThan: Float
+  """Greater than value."""
+  greatherThan: Float
+  """Condition expression."""
+  expression: String
+}
+
+"""Commercial Authorization rule trigger effect."""
+type CommercialAuthorizationRuleTriggerEffect {
+  """Effect description."""
+  description: String
+  """Effect type."""
+  effectType: Int!
+  """Function path."""
+  funcPath: String
+}
+
+"""Commercial Authorization rule score interval."""
+type CommercialAuthorizationRuleScoreInterval {
+  """Accept score threshold."""
+  accept: Float!
+  """Deny score threshold."""
+  deny: Float!
+}
+
+"""Commercial Authorization rule authorization data."""
+type CommercialAuthorizationRuleAuthorizationData {
+  """Indicates if all approvals are required."""
+  requireAllApprovals: Boolean!
+  """List of authorizers."""
+  authorizers: [CommercialAuthorizationRuleAuthorizer!]!
+}
+
+"""Commercial Authorization rule authorizer."""
+type CommercialAuthorizationRuleAuthorizer {
+  """Authorizer ID."""
+  id: String!
+  """Authorizer email."""
+  email: String
+  """Authorizer type."""
+  type: String!
+  """Authorization date."""
+  authorizationDate: String
+}
+
+"""Input to get commercial authorizations by order ID."""
+input ICommercialAuthorizationByOrderId {
+  """Order ID to get commercial authorizations for."""
+  orderId: String!
+}
+
+"""Input to process order authorization (approve or reject)."""
+input IProcessOrderAuthorization {
+  """Order authorization ID."""
+  orderAuthorizationId: String!
+  """Rule ID associated with the authorization."""
+  ruleId: String!
+  """Dimension ID associated with the authorization."""
+  dimensionId: String!
+  """Whether the authorization is approved (true) or rejected (false)."""
+  approved: Boolean!
+}
+
+"""Process Order Authorization response."""
+type ProcessOrderAuthorizationResponse {
+  """Indicates if authorization is pending for other authorizers."""
+  isPendingForOtherAuthorizer: Boolean!
+  """The updated rule for authorization, if any."""
+  ruleForAuthorization: ProcessOrderAuthorizationRule
+}
+
+"""Extended Commercial Authorization rule with additional process context."""
+type ProcessOrderAuthorizationRule {
+  """Order authorization ID."""
+  orderAuthorizationId: String!
+  """Dimension ID."""
+  dimensionId: String!
+  """Base rule information."""
+  rule: CommercialAuthorizationRule!
+}
+
 """Organization."""
 type StoreOrganization {
   """Organization ID."""
@@ -708,6 +930,10 @@ type Query {
     """Client email used to filter of the list of orders."""
     clientEmail: String
   ): UserOrderListMinimalResult @cacheControl(scope: "public", sMaxAge: 120, staleWhileRevalidate: 3600)
+  """Returns information about the current user details."""
+  userDetails: StoreUserDetails! @cacheControl(scope: "public", sMaxAge: 120, staleWhileRevalidate: 3600)
+  """Returns the account profile information for the current authenticated user (b2b or b2c user)."""
+  accountProfile: StoreAccountProfile! @cacheControl(scope: "public", sMaxAge: 120, staleWhileRevalidate: 3600)
   """Returns the account name of the current user or the B2B contract name if applicable."""
   accountName: String @cacheControl(scope: "public", sMaxAge: 120, staleWhileRevalidate: 3600)
   """Returns information about the user validation."""
@@ -746,6 +972,25 @@ type SellerInfo {
   logo: String
 }
 
+"""User details information."""
+type StoreUserDetails {
+  """User's name."""
+  name: String
+  """User's email."""
+  email: String
+  """User's role."""
+  role: [String]
+  """User's organizational unit."""
+  orgUnit: String
+}
+
+"""Account profile information."""
+type StoreAccountProfile {
+  name: String
+  email: String
+  id: String
+}
+
 """Information of a given review rating."""
 type StoreReviewRating {
   """Rating value."""
@@ -1280,11 +1525,14 @@ type UserOrder {
   totals: [UserOrderTotals]
   deliveryOptionsData: UserOrderDeliveryOptionsData
   customFields: [UserOrderCustomFieldsGrouped]
+  canProcessOrderAuthorization: Boolean
+  ruleForAuthorization: ProcessOrderAuthorizationRule
 }
 
 type UserOrderResult {
   orderId: String
   status: String
+  canProcessOrderAuthorization: Boolean
   statusDescription: String
   allowCancellation: Boolean
   storePreferencesData: UserOrderStorePreferencesData
@@ -1296,6 +1544,7 @@ type UserOrderResult {
   totals: [UserOrderTotals]
   shippingData: UserOrderShippingData
   items: [UserOrderItems]
+  ruleForAuthorization: ProcessOrderAuthorizationRule
 }
 
 type UserOrderListResult {

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.65.1](https://github.com/vtex/faststore/compare/v3.65.0...v3.65.1) (2025-07-17)
+
+**Note:** Version bump only for package @faststore/core
+
+# [3.65.0](https://github.com/vtex/faststore/compare/v3.64.1...v3.65.0) (2025-07-16)
+
+### Features
+
+- my account release 3 ([#2883](https://github.com/vtex/faststore/issues/2883)) ([be2c32a](https://github.com/vtex/faststore/commit/be2c32ae5cb0d892e34a96c2d73b06d31f8af137))
+
 ## [3.64.1](https://github.com/vtex/faststore/compare/v3.64.0...v3.64.1) (2025-07-16)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.64.1",
+  "version": "3.65.1",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -44,11 +44,11 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.64.0",
+    "@faststore/api": "^3.65.1",
     "@faststore/graphql-utils": "^3.56.1",
     "@faststore/lighthouse": "^3.56.1",
     "@faststore/sdk": "^3.63.0",
-    "@faststore/ui": "^3.60.4",
+    "@faststore/ui": "^3.65.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -64,6 +64,7 @@
     "@vtex/client-cp": "0.3.0",
     "@vtex/prettier-config": "1.0.0",
     "autoprefixer": "^10.4.0",
+    "cookie": "^0.7.0",
     "css-loader": "^6.7.1",
     "deepmerge": "^4.3.1",
     "draftjs-to-html": "^0.9.1",
@@ -91,6 +92,7 @@
     "@jest/globals": "29.7.0",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
+    "@types/cookie": "^0.6.0",
     "@types/cypress": "^1.1.3",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "29.1.0",
@@ -105,5 +107,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "484404259919422f09db56778e88757f6b8fc0b9"
+  "gitHead": "20034f929a5207dcf808fb24a8455c809e8cc00f"
 }

package/public/icons.svg

@@ -231,4 +231,30 @@
       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="EyeSlash"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="#000000"
+    viewBox="0 0 256 256"
+  >
+    <path d="M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z"></path>
+  </symbol>
+
+  <symbol
+    id="Eye"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="#000000"
+    viewBox="0 0 256 256"
+  >
+    <path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path>
+  </symbol>
+
+  <symbol id="CheckCircle" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.83464 13.8333L14.7096 7.95829L13.543 6.79163L8.83464 11.5L6.45964 9.12496L5.29297 10.2916L8.83464 13.8333ZM10.0013 18.3333C8.84852 18.3333 7.76519 18.1145 6.7513 17.677C5.73741 17.2395 4.85547 16.6458 4.10547 15.8958C3.35547 15.1458 2.76172 14.2638 2.32422 13.25C1.88672 12.2361 1.66797 11.1527 1.66797 9.99996C1.66797 8.84718 1.88672 7.76385 2.32422 6.74996C2.76172 5.73607 3.35547 4.85413 4.10547 4.10413C4.85547 3.35413 5.73741 2.76038 6.7513 2.32288C7.76519 1.88538 8.84852 1.66663 10.0013 1.66663C11.1541 1.66663 12.2374 1.88538 13.2513 2.32288C14.2652 2.76038 15.1471 3.35413 15.8971 4.10413C16.6471 4.85413 17.2409 5.73607 17.6784 6.74996C18.1159 7.76385 18.3346 8.84718 18.3346 9.99996C18.3346 11.1527 18.1159 12.2361 17.6784 13.25C17.2409 14.2638 16.6471 15.1458 15.8971 15.8958C15.1471 16.6458 14.2652 17.2395 13.2513 17.677C12.2374 18.1145 11.1541 18.3333 10.0013 18.3333ZM10.0013 16.6666C11.8624 16.6666 13.4388 16.0208 14.7305 14.7291C16.0221 13.4375 16.668 11.8611 16.668 9.99996C16.668 8.13885 16.0221 6.56246 14.7305 5.27079C13.4388 3.97913 11.8624 3.33329 10.0013 3.33329C8.14019 3.33329 6.5638 3.97913 5.27214 5.27079C3.98047 6.56246 3.33464 8.13885 3.33464 9.99996C3.33464 11.8611 3.98047 13.4375 5.27214 14.7291C6.5638 16.0208 8.14019 16.6666 10.0013 16.6666Z" fill="#015132"/>
+  </symbol>
 </svg>

package/src/components/account/MyAccountDrawer/OrganizationDrawer/OrganizationDrawer.tsx

@@ -10,6 +10,7 @@ import storeConfig from '../../../../../discovery.config'
 type OrganizationDrawerProps = {
   isOpen: boolean
   closeDrawer: () => void
+  isRepresentative: boolean
 }
 
 export const doLogout = () => {
@@ -22,6 +23,7 @@ export const doLogout = () => {
 export const OrganizationDrawer = ({
   isOpen,
   closeDrawer,
+  isRepresentative,
 }: OrganizationDrawerProps) => {
   const { fade, fadeOut } = useFadeEffect()
   const { b2b } = useSession()
@@ -46,7 +48,7 @@ export const OrganizationDrawer = ({
         contractName={contractName}
         contractUrl="/buyer-portal"
       />
-      <OrganizationDrawerBody />
+      <OrganizationDrawerBody isRepresentative={isRepresentative} />
       <footer data-fs-organization-drawer-footer-wrapper>
         <ProfileSummary
           showManageLink

package/src/components/account/MyAccountDrawer/OrganizationDrawer/OrganizationDrawerBody.tsx

@@ -1,12 +1,22 @@
 import { Link } from '@faststore/ui'
 
 import menuRoutes from 'src/customizations/src/myAccount/navigation'
+import { USER_DETAILS_ROUTE } from 'src/sdk/account/getMyAccountRoutes'
 
-export const OrganizationDrawerBody = () => {
+const ROUTES_ONLY_FOR_REPRESENTATIVE = [USER_DETAILS_ROUTE]
+
+export const OrganizationDrawerBody = ({
+  isRepresentative,
+}: { isRepresentative: boolean }) => {
+  const routes = isRepresentative
+    ? menuRoutes
+    : menuRoutes.filter(
+        ({ route }) => !ROUTES_ONLY_FOR_REPRESENTATIVE.includes(route)
+      )
   return (
     <div data-fs-organization-drawer-body>
       <div data-fs-organization-drawer-body-contents>
-        {menuRoutes.map((route) => (
+        {routes.map((route) => (
           <Link
             key={route.route}
             data-fs-organization-drawer-body-link

package/src/components/account/MyAccountDrawer/OrganizationSignInButton/OrganizationSignInButton.tsx

@@ -5,8 +5,10 @@ import { OrganizationDrawer } from '../OrganizationDrawer/OrganizationDrawer'
 
 export const OrganizationSignInButton = ({
   icon: { alt, icon },
+  isRepresentative,
 }: {
   icon: { alt: string; icon: string }
+  isRepresentative?: boolean
 }) => {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -43,7 +45,11 @@ export const OrganizationSignInButton = ({
       </Button>
 
       {isOpen && (
-        <OrganizationDrawer isOpen={isOpen} closeDrawer={closeDrawer} />
+        <OrganizationDrawer
+          isOpen={isOpen}
+          closeDrawer={closeDrawer}
+          isRepresentative={isRepresentative}
+        />
       )}
     </>
   )

package/src/components/account/MyAccountLayout/MyAccountLayout.tsx

@@ -1,22 +1,32 @@
 import type { PropsWithChildren } from 'react'
 import menuRoutes from 'src/customizations/src/myAccount/navigation'
+import { USER_DETAILS_ROUTE } from 'src/sdk/account/getMyAccountRoutes'
 import MyAccountMenu from '../MyAccountMenu'
 import styles from '../section.module.scss'
 
 export type MyAccountLayoutProps = {
   accountName: string
+  isRepresentative?: boolean
 }
 
+const ROUTES_ONLY_FOR_REPRESENTATIVE = [USER_DETAILS_ROUTE]
+
 const MyAccountLayout = ({
   children,
   accountName,
+  isRepresentative = true,
 }: PropsWithChildren<MyAccountLayoutProps>) => {
+  const routes = isRepresentative
+    ? menuRoutes
+    : menuRoutes.filter(
+        ({ route }) => !ROUTES_ONLY_FOR_REPRESENTATIVE.includes(route)
+      )
+
   return (
     <div className={styles.layout}>
-      <MyAccountMenu accountName={accountName} items={menuRoutes} />
+      <MyAccountMenu accountName={accountName} items={routes} />
       <section>{children}</section>
     </div>
   )
 }
-
 export default MyAccountLayout

package/src/components/account/MyAccountMenu/styles.scss

@@ -66,7 +66,7 @@
     background-color: var(--fs-color-tertiary-bkg-disabled);
   }
 
-  >a,
+  > a,
   a:link,
   a:visited {
     display: inline-block;

package/src/components/account/MyAccountUserDetails/MyAccountUserDetails.tsx

@@ -0,0 +1,61 @@
+import Tag from '../components/MyAccountTag'
+import styles from './styles.module.scss'
+
+type MyAccountUserDetailsProps = {
+  userDetails: {
+    name: string
+    email: string
+    role: string[]
+    orgUnit: string
+  }
+}
+
+export default function MyAccountUserDetails({
+  userDetails: { name, email, role, orgUnit },
+}: MyAccountUserDetailsProps) {
+  return (
+    <section className={styles.section}>
+      <h1 data-fs-user-details-title>User details</h1>
+      <div data-fs-user-details-container>
+        <table data-fs-user-details-table>
+          <tbody>
+            <tr data-fs-user-details-row>
+              <th data-fs-user-details-row-label>Name</th>
+              <td data-fs-user-details-row-value>{name}</td>
+            </tr>
+            <tr data-fs-user-details-divider-row>
+              <td data-fs-user-details-divider></td>
+              <td data-fs-user-details-divider></td>
+            </tr>
+            <tr data-fs-user-details-row>
+              <th data-fs-user-details-row-label>Email</th>
+              <td data-fs-user-details-row-value>{email}</td>
+            </tr>
+            <tr data-fs-user-details-divider-row>
+              <td data-fs-user-details-divider></td>
+              <td data-fs-user-details-divider></td>
+            </tr>
+            <tr data-fs-user-details-row>
+              <th data-fs-user-details-row-label>Role</th>
+              <td data-fs-user-details-row-tags>
+                {role.map((r) => (
+                  <span key={r} data-fs-user-details-row-value>
+                    <Tag>{r}</Tag>
+                  </span>
+                ))}
+              </td>
+            </tr>
+            <tr data-fs-user-details-divider-row>
+              <td data-fs-user-details-divider></td>
+              <td data-fs-user-details-divider></td>
+            </tr>
+            <tr data-fs-user-details-row>
+              <th data-fs-user-details-row-label>Organizational unit</th>
+              <td data-fs-user-details-row-value>{orgUnit}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}

package/src/components/account/MyAccountUserDetails/index.ts

@@ -0,0 +1 @@
+export { default } from './MyAccountUserDetails'