Fluent Commerce Logo
Docs

Profile Modal Component

UI Component

Changed on:

1 Oct 2025

Overview

The Profile Modal is a custom UI component that confirms profile actions to make sure changes are applied intentionally.

No alt text provided
Plugin NameCore

The standard library of mystique components. 

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.sourcing.profile.modal.button

Detailed technical description

The Profile Modal is a confirmation component designed to ensure that profile-related actions are carried out deliberately and transparently. It is used to confirm the activation of a profile version, where the selected version becomes active and the previously active version is inactivated.

The component is implemented as an action button on the profile details page.

Properties

Name

Type

Required

Default

Description

action

`activate`

Yes

 None

Determines the operation to confirm. 

label

`string`

Yes

 None

Text that is displayed on the button that opens the modal.

title

`string`

Yes

 None

The modal's header text. It should clearly state the purpose of the confirmation.

description

`string`

No

 None

Optional text shown in the modal under the title. The action or its consequences can be explained here. If omitted, no body text is displayed.

style

`Primary | Secondary`

No

`Primary`

Defines the visual type of the drawer button.


Configuration example

1{
2  "actions": {
3    "primary": [
4      {
5        "type": "component",
6        "component": "fc.page.section",
7        "descendants": [
8          {
9            "component": "fc.conditional",
10            "props": {
11              "value": "{{sourcingProfile.status}}",
12              "matches": [
13                "DRAFT",
14                "INACTIVE"
15              ]
16            },
17            "descendants": [
18              {
19                "component": "fc.sourcing.profile.modal.button",
20                "props": {
21                  "action": "activate",
22                  "label": "i18n:fc.sourcingProfileModalButton.activate.label",
23                  "title": "i18n:fc.sourcingProfileModalButton.activate.title",
24                  "description": "i18n:fc.sourcingProfileModalButton.activate.description"
25                }
26              }
27            ]
28          }
29        ]
30      }
31    ]
32  }
33}

Version History

2025-10-06

v25.10.6

Initial release

Recommended Placement

This component is implemented specifically to be used during Sourcing Profile activation.