Merge pull request #260 from Secreto31126/interactive-flow

Interactive flow

Author: Secreto31126

EXAMPLES/README.md

@@ -31,6 +31,9 @@ the most basic methods or features.
     -   [Single Product](interactive.md#single-product)
     -   [Multi Product](interactive.md#multi-product)
     -   [Catalog](interactive.md#catalog)
+    -   [Click To Action](interactive.md#click-to-action)
+    -   [Navigate Flow](interactive.md#navigate-flow)
+    -   [Data Exchange Flow](interactive.md#data-exchange-flow)
     -   [Payments and Location request](interactive.md#payments-and-location-request)
 -   [Contacts](contacts.md)
     -   [Simple contact](contacts.md#simple-contact)
@@ -42,6 +45,11 @@ the most basic methods or features.
     -   [Simple template with header media](template.md#simple-template-with-header-media)
     -   [Complex template with reply buttons](template.md#complex-template-with-reply-buttons)
     -   [Complex template with call to action url](template.md#complex-template-with-call-to-action-url)
+    -   [Complex template with copy coupon button](template.md#complex-template-with-copy-coupon-button)
+    -   [Complex template with flow component](template.md#complex-template-with-flow-component)
+    -   [Complex template with combination of buttons](template.md#complex-template-with-combination-of-buttons)
+    -   [Complex template with catalog](template.md#complex-template-with-catalog)
+    -   [Complex template with Multi-Product Message](template.md#complex-template-with-multi-product-message)
     -   [Complex template with Carousel](template.md#complex-template-with-carousel)
     -   [Complex template with Limited-Time Offer](template.md#complex-template-with-limited-time-offer)
     -   [OTP prefab template](template.md#otp-prefab-template)

EXAMPLES/interactive.md

@@ -98,6 +98,49 @@ const interactive_catalog_message = new Interactive(
 );
 ```
 
+## Navigate Flow
+
+```ts
+import {
+    Interactive,
+    ActionNavigateFlow,
+    Body
+} from "whatsapp-api-js/messages";
+
+const interactive_navigate_flow_message = new Interactive(
+    new ActionNavigateFlow(
+        "5f9b3b4f-2b7a-4f4f-8f4f-4f4f4f4f4f4f",
+        "5f9b3b4f-2b7a-4f4f-8f4f-4f4f4f4f4f4f",
+        "Hello World",
+        "form_screen",
+        {
+            name: "John Doe",
+            age: 42
+        }
+    ),
+    new Body("How was your experience today?")
+);
+```
+
+## Data Exchange Flow
+
+```ts
+import {
+    Interactive,
+    ActionDataExchangeFlow,
+    Body
+} from "whatsapp-api-js/messages";
+
+const interactive_data_exchange_flow_message = new Interactive(
+    new ActionDataExchangeFlow(
+        "5f9b3b4f-2b7a-4f4f-8f4f-4f4f4f4f4f4f",
+        "5f9b3b4f-2b7a-4f4f-8f4f-4f4f4f4f4f4f",
+        "Hello World"
+    ),
+    new Body("Hello World")
+);
+```
+
 ## Payments and Location request
 
 Check out [#154](https://github.com/Secreto31126/whatsapp-api-js/issues/154) for more information.
@@ -110,3 +153,5 @@ https://whatsappapijs.web.app/classes/messages.ActionList.html
 https://whatsappapijs.web.app/classes/messages.ActionProduct.html
 https://whatsappapijs.web.app/classes/messages.ActionCatalog.html
 https://whatsappapijs.web.app/classes/messages.ActionCTA.html
+https://whatsappapijs.web.app/classes/messages.ActionNavigateFlow.html
+https://whatsappapijs.web.app/classes/messages.ActionDataExchangeFlow.html

src/messages/interactive.ts

@@ -561,3 +561,180 @@ export class ActionCTA implements InteractiveAction {
         };
     }
 }
+
+/**
+ * Action API object
+ *
+ * @group Interactive
+ */
+export abstract class ActionFlow implements InteractiveAction {
+    /**
+     * The name of the component
+     */
+    readonly name = "flow";
+    /**
+     * The Flow parameters
+     *
+     * @remarks TSDoc is unable to document this type properly, so most of
+     * the documentation is in the subclasses constructors instead.
+     */
+    readonly parameters: {
+        /**
+         * The Flow can be in either draft or published mode
+         */
+        mode: "published" | "draft";
+        /**
+         * The Flow version, must be 3
+         */
+        flow_message_version: "3";
+        /**
+         * Flow token that is generated by the business to serve as an identifier
+         */
+        flow_token: string;
+        /**
+         * Unique ID of the Flow provided by WhatsApp
+         */
+        flow_id: string;
+        /**
+         * Text on the CTA button, character limit - 20 characters (no emoji)
+         */
+        flow_cta: string;
+        /**
+         * The Flow type, if set to "navigate", flow_action_payload must be provided
+         */
+        flow_action: "navigate" | "data_exchange";
+        /**
+         * Required if flow_action is "navigate", should be omitted otherwise
+         */
+        flow_action_payload?: {
+            /**
+             * The ID of the first Screen
+             */
+            screen: string;
+            /**
+             * Optional input data for the first Screen of the Flow. If provided, this must be a non-empty object.
+             */
+            data?: unknown;
+        };
+    } & (
+        | {
+              flow_action: "navigate";
+              flow_action_payload: {
+                  screen: string;
+                  data?: unknown;
+              };
+          }
+        | {
+              flow_action: "data_exchange";
+              flow_action_payload?: never;
+          }
+    );
+
+    /**
+     * @override
+     * @internal
+     */
+    get _type(): "flow" {
+        return "flow";
+    }
+
+    /**
+     * Builds a flow component for an Interactive message
+     *
+     * @param parameters - The Flow parameters
+     * @throws If parameters.flow_cta is empty or over 20 characters
+     * @throws If parameters.flow_cta contains emojis
+     */
+    constructor(parameters: ActionFlow["parameters"]) {
+        if (!parameters.flow_cta.length || parameters.flow_cta.length > 20) {
+            throw new Error("Flow CTA must be between 1 and 20 characters");
+        }
+
+        if (/\p{Extended_Pictographic}/u.test(parameters.flow_cta)) {
+            throw new Error("Flow CTA must not contain emoji");
+        }
+
+        this.parameters = parameters;
+    }
+}
+
+/**
+ * Action API object
+ *
+ * @group Interactive
+ */
+export class ActionNavigateFlow extends ActionFlow {
+    /**
+     * Builds a navigate flow component for an Interactive message
+     *
+     * @param flow_token - Flow token that is generated by the business to serve as an identifier
+     * @param flow_id - ID of the Flow provided by WhatsApp
+     * @param flow_cta - Text on the CTA button, character limit - 20 characters (no emoji)
+     * @param screen - The ID of the first Screen
+     * @param data - Optional input data for the first Screen of the Flow. If provided, this must be a non-empty object.
+     * @param mode - The Flow can be in either "draft" or "published" mode
+     * @param flow_message_version - The Flow version, must be "3"
+     * @throws If flow_cta is empty or over 20 characters
+     * @throws If flow_cta contains emojis
+     * @throws If data is provided and is an empty object
+     */
+    constructor(
+        flow_token: string,
+        flow_id: string,
+        flow_cta: string,
+        screen: string,
+        data?: unknown,
+        mode: "published" | "draft" = "published",
+        flow_message_version: "3" = "3"
+    ) {
+        super({
+            mode,
+            flow_message_version,
+            flow_token,
+            flow_id,
+            flow_cta,
+            flow_action: "navigate",
+            flow_action_payload: {
+                screen,
+                data
+            }
+        });
+
+        if (data && !Object.keys(data)) {
+            throw new Error("Flow data must be a non-empty object if provided");
+        }
+    }
+}
+
+/**
+ * Action API object
+ *
+ * @group Interactive
+ */
+export class ActionDataExchangeFlow extends ActionFlow {
+    /**
+     * Builds a data exchange flow component for an Interactive message
+     *
+     * @param flow_token - Flow token that is generated by the business to serve as an identifier
+     * @param flow_id - ID of the Flow provided by WhatsApp
+     * @param flow_cta - Text on the CTA button, character limit - 20 characters (no emoji)
+     * @param mode - Must be "published" or "draft"
+     * @param flow_message_version - Must be "3"
+     */
+    constructor(
+        flow_token: string,
+        flow_id: string,
+        flow_cta: string,
+        mode: "published" | "draft" = "published",
+        flow_message_version: "3" = "3"
+    ) {
+        super({
+            mode,
+            flow_message_version,
+            flow_token,
+            flow_id,
+            flow_cta,
+            flow_action: "data_exchange"
+        });
+    }
+}

src/types.ts

@@ -297,7 +297,8 @@ export interface InteractiveAction extends ClientTypedMessageComponent {
         | "catalog_message"
         | "product"
         | "product_list"
-        | "cta_url";
+        | "cta_url"
+        | "flow";
 }
 
 export type ClientMessageNames =