Flows v6.3

docs/source/content/flows/flow_json.rst

@@ -43,6 +43,8 @@ Here you will find all the components that make up a Flow JSON object.
 
 .. autoclass:: CheckboxGroup()
 
+.. autoclass:: ChipsSelector()
+
 .. autoclass:: RadioButtonsGroup()
 
 .. autoclass:: MediaSize()

docs/source/content/flows/overview.rst

@@ -76,6 +76,7 @@ Every component on the FlowJSON has a corresponding class in :mod:`pywa.types.fl
        :class:`TextArea`,
        :class:`RadioButtonsGroup`,
        :class:`CheckboxGroup`,
+       :class:`ChipsSelector`,
        :class:`Dropdown`,
        :class:`OptIn`,
        :class:`DatePicker`,

pywa/types/flows.py

@@ -76,6 +76,7 @@
     "InputType",
     "TextArea",
     "CheckboxGroup",
+    "ChipsSelector",
     "RadioButtonsGroup",
     "Footer",
     "OptIn",
@@ -1447,6 +1448,7 @@ class ComponentType(utils.StrEnum):
     IF = "If"
     SWITCH = "Switch"
     NAVIGATION_LIST = "NavigationList"
+    CHIPS_SELECTOR = "ChipsSelector"
 
 
 class _Expr(abc.ABC):
@@ -2494,6 +2496,61 @@ class Dropdown(FormComponent):
     on_unselect_action: UpdateDataAction | None = None
 
 
+@dataclasses.dataclass(slots=True, kw_only=True)
+class ChipsSelector(FormComponent):
+    """
+    Chips Selector component allows users to pick multiple selections from a list of options.
+
+    - Added in v6.3
+    - Read more at `developers.facebook.com <https://developers.facebook.com/docs/whatsapp/flows/reference/components#chips_selector>`_.
+
+    Example:
+
+        >>> ChipsSelector(
+        ...     name='options',
+        ...     data_source=[
+        ...         DataSource(id='1', title='Option 1'),
+        ...         DataSource(id='2', title='Option 2'),
+        ...         DataSource(id='3', title='Option 3'),
+        ...     ],
+        ...     label='Options',
+        ...     min_selected_items=1,
+        ...     max_selected_items=2,
+        ...     required=True,
+        ...     init_value=['1', '2']
+        ... )
+
+    Attributes:
+        name: The unique name (id) for this component.
+        data_source: The data source of the chips selector.
+        label: The label of the chips selector. Limited to 80 characters.
+        description: The description of the chips selector. Limited to 300 characters
+        min_selected_items: The minimum number of items that can be selected. Minimum value is 1.
+        max_selected_items: The maximum number of items that can be selected. Maximum value is 20.
+        required: Whether the chips selector is required or not.
+        visible: Whether the chips selector is visible or not. Default to ``True``.
+        enabled: Whether the chips selector is enabled or not. Default to ``True``.
+        init_value: The default values (IDs of the data sources).
+        on_select_action: The action to perform when an item is selected.
+    """
+
+    type: ComponentType = dataclasses.field(
+        default=ComponentType.CHIPS_SELECTOR, init=False, repr=False
+    )
+    name: str
+    data_source: Iterable[DataSource] | str | ScreenDataRef | ComponentRef
+    label: str | FlowStr | ScreenDataRef | ComponentRef
+    description: str | FlowStr | ScreenDataRef | ComponentRef | None = None
+    min_selected_items: int | str | ScreenDataRef | ComponentRef | None = None
+    max_selected_items: int | str | ScreenDataRef | ComponentRef | None = None
+    required: bool | str | ScreenDataRef | ComponentRef | None = None
+    visible: bool | str | Condition | ScreenDataRef | ComponentRef | None = None
+    enabled: bool | str | ScreenDataRef | ComponentRef | None = None
+    init_value: list[str] | str | ScreenDataRef | ComponentRef | None = None
+    on_select_action: DataExchangeAction | UpdateDataAction | None = None
+    on_unselect_action: UpdateDataAction | None = None
+
+
 @dataclasses.dataclass(slots=True, kw_only=True)
 class Footer(Component):
     """

pywa/utils.py

@@ -108,7 +108,7 @@ class Version(enum.Enum):
 
     # KEY = (MIN_VERSION: str, LATEST_VERSION: str)
     GRAPH_API = ("17.0", "21.0")
-    FLOW_JSON = ("2.1", "6.0")
+    FLOW_JSON = ("2.1", "6.3")
     FLOW_DATA_API = ("3.0", "3.0")
     FLOW_MSG = ("3", "3")
 

pywa_async/types/flows.py

@@ -38,6 +38,7 @@
     "InputType",
     "TextArea",
     "CheckboxGroup",
+    "ChipsSelector",
     "RadioButtonsGroup",
     "Footer",
     "OptIn",

tests/data/flows/6_3/examples.json

@@ -0,0 +1,50 @@
+{
+  "chips_selector": {
+    "version": "6.3",
+    "screens": [
+      {
+        "id": "DEMO_SCREEN",
+        "terminal": true,
+        "title": "Demo screen",
+        "layout": {
+          "type": "SingleColumnLayout",
+          "children": [
+            {
+              "type": "ChipsSelector",
+              "name": "chips",
+              "label": "Personalize your experience",
+              "description": "Choose your interests to get personalized design ideas and solution",
+              "max-selected-items": 2,
+              "data-source": [
+                {
+                  "id": "room_layout",
+                  "title": "🏡 Room layouts"
+                },
+                {
+                  "id": "lighting",
+                  "title": "💡 Lighting"
+                },
+                {
+                  "id": "renovation",
+                  "title": "🛠️ Renovation"
+                },
+                {
+                  "id": "furnitures",
+                  "title": "📐 Room layouts"
+                }
+              ]
+            },
+            {
+              "type": "Footer",
+              "label": "Continue",
+              "on-click-action": {
+                "name": "complete",
+                "payload": {}
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

tests/data/flows/6_3/examples.py

@@ -0,0 +1,33 @@
+from pywa.types.flows import *  # noqa
+
+chips_selector = FlowJSON(
+    version="6.3",
+    screens=[
+        Screen(
+            id="DEMO_SCREEN",
+            terminal=True,
+            title="Demo screen",
+            layout=Layout(
+                type=LayoutType.SINGLE_COLUMN,
+                children=[
+                    ChipsSelector(
+                        name="chips",
+                        label="Personalize your experience",
+                        description="Choose your interests to get personalized design ideas and solution",
+                        max_selected_items=2,
+                        data_source=[
+                            DataSource(id="room_layout", title="🏡 Room layouts"),
+                            DataSource(id="lighting", title="💡 Lighting"),
+                            DataSource(id="renovation", title="🛠️ Renovation"),
+                            DataSource(id="furnitures", title="📐 Room layouts"),
+                        ],
+                    ),
+                    Footer(
+                        label="Continue",
+                        on_click_action=CompleteAction(),
+                    ),
+                ],
+            ),
+        ),
+    ],
+)