@botonic/react 0.24.4-alpha.0 → 0.24.5-alpha.0

package/lib/cjs/components/multichannel/multichannel-button.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const contexts_1 = require("../../contexts");
+const strings_1 = require("../../util/strings");
 const button_1 = require("../button");
 const multichannel_context_1 = require("./multichannel-context");
 const multichannel_utils_1 = require("./multichannel-utils");
@@ -48,12 +49,6 @@ const MultichannelButton = props => {
         }
         return text;
     };
-    const truncateText = (text, maxLength, ellipsis = '...') => {
-        if (text.length > maxLength) {
-            return text.substring(0, maxLength - ellipsis.length) + ellipsis;
-        }
-        return text;
-    };
     if ((0, multichannel_utils_1.isWhatsapp)(requestContext)) {
         const asText = (_a = props.asText) !== null && _a !== void 0 ? _a : true;
         if (asText) {
@@ -68,7 +63,7 @@ const MultichannelButton = props => {
             else if (hasWebview())
                 return (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, props, { children: getText() }));
         }
-        return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, props, { children: truncateText(props.children, multichannel_utils_1.WHATSAPP_MAX_BUTTON_CHARS) })));
+        return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, props, { children: (0, strings_1.truncateText)(props.children, multichannel_utils_1.WHATSAPP_MAX_BUTTON_CHARS) })));
     }
     return (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, props, { children: props.children }));
 };

package/lib/cjs/components/multichannel/multichannel-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"multichannel-button.js","sourceRoot":"src/","sources":["components/multichannel/multichannel-button.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"multichannel-button.js","sourceRoot":"src/","sources":["components/multichannel/multichannel-button.jsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/whatsapp-button-list.d.ts

@@ -1,3 +1,6 @@
+export declare const WHATSAPP_MAX_BUTTON_LIST_CHARS = 24;
+export declare const WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS = 72;
+export declare const WHATSAPP_MAX_BUTTON_LIST_ID_CHARS = 200;
 export interface WhatsappButtonListSectionProps {
     title?: string;
     rows: WhatsappButtonListRowProps[];

package/lib/cjs/components/whatsapp-button-list.js

@@ -1,15 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WhatsappButtonList = void 0;
+exports.WhatsappButtonList = exports.WHATSAPP_MAX_BUTTON_LIST_ID_CHARS = exports.WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS = exports.WHATSAPP_MAX_BUTTON_LIST_CHARS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@botonic/core");
+const util_1 = require("../util");
 const react_1 = require("../util/react");
 const message_1 = require("./message");
+const multichannel_utils_1 = require("./multichannel/multichannel-utils");
+// TODO: Add validation in component
+exports.WHATSAPP_MAX_BUTTON_LIST_CHARS = 24;
+exports.WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS = 72;
+exports.WHATSAPP_MAX_BUTTON_LIST_ID_CHARS = 200;
 const serialize = _whatsappButtonListProps => {
     // TODO: Implement to have data persistance in localStorage, not needed for this WhatsApp development
     return {};
 };
 const WhatsappButtonList = (props) => {
+    const trucateSectionsContents = (sections) => {
+        const trucateRowContents = (row) => {
+            const title = (0, util_1.truncateText)(row.title, exports.WHATSAPP_MAX_BUTTON_LIST_CHARS);
+            const description = row.description
+                ? (0, util_1.truncateText)(row.description, exports.WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS)
+                : undefined;
+            if (row.id.length > exports.WHATSAPP_MAX_BUTTON_LIST_ID_CHARS) {
+                console.error(`Button id "${row.id}" exceeds the maximum length of ${exports.WHATSAPP_MAX_BUTTON_LIST_ID_CHARS} characters`);
+            }
+            return Object.assign(Object.assign({}, row), { title, description });
+        };
+        return sections.map(section => ({
+            title: section.title
+                ? (0, util_1.truncateText)(section.title, exports.WHATSAPP_MAX_BUTTON_LIST_CHARS)
+                : undefined,
+            rows: section.rows.map(trucateRowContents),
+        }));
+    };
     const renderBrowser = () => {
         // Return a dummy message for browser
         const message = `${JSON.stringify(props)}`;
@@ -18,7 +42,7 @@ const WhatsappButtonList = (props) => {
     const renderNode = () => {
         return (
         // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
-        (0, jsx_runtime_1.jsx)("message", Object.assign({}, props, { sections: JSON.stringify(props.sections), type: core_1.INPUT.WHATSAPP_BUTTON_LIST })));
+        (0, jsx_runtime_1.jsx)("message", Object.assign({}, props, { button: (0, util_1.truncateText)(props.button, multichannel_utils_1.WHATSAPP_MAX_BUTTON_CHARS), sections: JSON.stringify(trucateSectionsContents(props.sections)), type: core_1.INPUT.WHATSAPP_BUTTON_LIST })));
     };
     return (0, react_1.renderComponent)({ renderBrowser, renderNode });
 };

package/lib/cjs/components/whatsapp-button-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"whatsapp-button-list.js","sourceRoot":"src/","sources":["components/whatsapp-button-list.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAGrC,yCAA+C;AAC/C,uCAAmC;AAuBnC,MAAM,SAAS,GAAG,wBAAwB,CAAC,EAAE;IAC3C,qGAAqG;IACrG,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAEM,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAA;QAC1C,OAAO,CACL,uBAAC,iBAAO,kBACN,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IACpB,KAAK,IACT,IAAI,EAAE,YAAK,CAAC,oBAAoB,gBAE/B,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,oDACM,KAAK,IACT,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,EACxC,IAAI,EAAE,YAAK,CAAC,oBAAoB,IAChC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,IAAA,uBAAe,EAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AA3BY,QAAA,kBAAkB,sBA2B9B"}
+{"version":3,"file":"whatsapp-button-list.js","sourceRoot":"src/","sources":["components/whatsapp-button-list.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAGrC,kCAAsC;AACtC,yCAA+C;AAC/C,uCAAmC;AACnC,0EAA6E;AAE7E,oCAAoC;AAEvB,QAAA,8BAA8B,GAAG,EAAE,CAAA;AACnC,QAAA,0CAA0C,GAAG,EAAE,CAAA;AAC/C,QAAA,iCAAiC,GAAG,GAAG,CAAA;AAoBpD,MAAM,SAAS,GAAG,wBAAwB,CAAC,EAAE;IAC3C,qGAAqG;IACrG,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAEM,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,uBAAuB,GAAG,CAC9B,QAA0C,EACR,EAAE;QACpC,MAAM,kBAAkB,GAAG,CACzB,GAA+B,EACH,EAAE;YAC9B,MAAM,KAAK,GAAG,IAAA,mBAAY,EAAC,GAAG,CAAC,KAAK,EAAE,sCAA8B,CAAC,CAAA;YACrE,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW;gBACjC,CAAC,CAAC,IAAA,mBAAY,EACV,GAAG,CAAC,WAAW,EACf,kDAA0C,CAC3C;gBACH,CAAC,CAAC,SAAS,CAAA;YACb,IAAI,GAAG,CAAC,EAAE,CAAC,MAAM,GAAG,yCAAiC,EAAE;gBACrD,OAAO,CAAC,KAAK,CACX,cAAc,GAAG,CAAC,EAAE,mCAAmC,yCAAiC,aAAa,CACtG,CAAA;aACF;YACD,uCAAY,GAAG,KAAE,KAAK,EAAE,WAAW,IAAE;QACvC,CAAC,CAAA;QAED,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAC9B,KAAK,EAAE,OAAO,CAAC,KAAK;gBAClB,CAAC,CAAC,IAAA,mBAAY,EAAC,OAAO,CAAC,KAAK,EAAE,sCAA8B,CAAC;gBAC7D,CAAC,CAAC,SAAS;YACb,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC;SAC3C,CAAC,CAAC,CAAA;IACL,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAA;QAC1C,OAAO,CACL,uBAAC,iBAAO,kBACN,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IACpB,KAAK,IACT,IAAI,EAAE,YAAK,CAAC,oBAAoB,gBAE/B,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,oDACM,KAAK,IACT,MAAM,EAAE,IAAA,mBAAY,EAAC,KAAK,CAAC,MAAM,EAAE,8CAAyB,CAAC,EAC7D,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EACjE,IAAI,EAAE,YAAK,CAAC,oBAAoB,IAChC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,IAAA,uBAAe,EAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AAzDY,QAAA,kBAAkB,sBAyD9B"}

package/lib/cjs/util/index.d.ts

@@ -5,4 +5,5 @@ export * from './logs';
 export * from './objects';
 export * from './react';
 export * from './regexs';
+export * from './strings';
 export * from './webchat';

package/lib/cjs/util/index.js

@@ -8,5 +8,6 @@ tslib_1.__exportStar(require("./logs"), exports);
 tslib_1.__exportStar(require("./objects"), exports);
 tslib_1.__exportStar(require("./react"), exports);
 tslib_1.__exportStar(require("./regexs"), exports);
+tslib_1.__exportStar(require("./strings"), exports);
 tslib_1.__exportStar(require("./webchat"), exports);
 //# sourceMappingURL=index.js.map

package/lib/cjs/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"src/","sources":["util/index.ts"],"names":[],"mappings":";;;AAAA,gDAAqB;AACrB,wDAA6B;AAC7B,2DAAgC;AAChC,iDAAsB;AACtB,oDAAyB;AACzB,kDAAuB;AACvB,mDAAwB;AACxB,oDAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["util/index.ts"],"names":[],"mappings":";;;AAAA,gDAAqB;AACrB,wDAA6B;AAC7B,2DAAgC;AAChC,iDAAsB;AACtB,oDAAyB;AACzB,kDAAuB;AACvB,mDAAwB;AACxB,oDAAyB;AACzB,oDAAyB"}

package/lib/cjs/util/strings.d.ts

@@ -0,0 +1 @@
+export declare const truncateText: (text: any, maxLength: any, ellipsis?: string) => any;

package/lib/cjs/util/strings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.truncateText = void 0;
+const truncateText = (text, maxLength, ellipsis = '...') => {
+    if (text.length > maxLength) {
+        return text.substring(0, maxLength - ellipsis.length) + ellipsis;
+    }
+    return text;
+};
+exports.truncateText = truncateText;
+//# sourceMappingURL=strings.js.map

package/lib/cjs/util/strings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.js","sourceRoot":"src/","sources":["util/strings.ts"],"names":[],"mappings":";;;AAAO,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;IAChE,IAAI,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE;QAC3B,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAA;KACjE;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AALY,QAAA,YAAY,gBAKxB"}

package/lib/esm/components/multichannel/multichannel-button.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext } from 'react';
 import { RequestContext } from '../../contexts';
+import { truncateText } from '../../util/strings';
 import { Button } from '../button';
 import { MultichannelContext } from './multichannel-context';
 import { isWhatsapp, WHATSAPP_MAX_BUTTON_CHARS } from './multichannel-utils';
@@ -44,12 +45,6 @@ export const MultichannelButton = props => {
         }
         return text;
     };
-    const truncateText = (text, maxLength, ellipsis = '...') => {
-        if (text.length > maxLength) {
-            return text.substring(0, maxLength - ellipsis.length) + ellipsis;
-        }
-        return text;
-    };
     if (isWhatsapp(requestContext)) {
         const asText = (_a = props.asText) !== null && _a !== void 0 ? _a : true;
         if (asText) {

package/lib/esm/components/multichannel/multichannel-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"multichannel-button.js","sourceRoot":"src/","sources":["components/multichannel/multichannel-button.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"multichannel-button.js","sourceRoot":"src/","sources":["components/multichannel/multichannel-button.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAE5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE;;IACxC,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IACjD,MAAM,mBAAmB,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IAE3D,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEvC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAEzC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAE/C,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,OAAO,EAAE,IAAI,UAAU,EAAE,CAAA;IAEnD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAE/C,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAA;IAC9B,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAA;IAEtC,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,OAAO,mBAAmB,CAAC,YAAY,KAAK,QAAQ,EAAE;YACxD,mBAAmB,CAAC,YAAY,IAAI,CAAC,CAAA;SACtC;aAAM,IAAI,OAAO,mBAAmB,CAAC,YAAY,KAAK,QAAQ,EAAE;YAC/D,MAAM,QAAQ,GAAG,mBAAmB,CAAC,YAAY,CAAC,UAAU,CAC1D,mBAAmB,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAC5C,CAAA;YACD,mBAAmB,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;SACrE;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE;;QAC1B,MAAM,SAAS,GAAG,MAAA,mBAAmB,CAAC,SAAS,mCAAI,KAAK,CAAA;QACxD,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAA;IACzC,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAA;QACzB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAA;QACnC,MAAM,SAAS,GAAG,mBAAmB,CAAC,cAAc,IAAI,GAAG,CAAA;QAC3D,MAAM,KAAK,GAAG,mBAAmB,CAAC,YAAY;YAC5C,CAAC,CAAC,GAAG,WAAW,CAAC,mBAAmB,CAAC,YAAY,GAAG,SAAS,CAAC,GAAG;YACjE,CAAC,CAAC,EAAE,CAAA;QACN,IAAI,WAAW,EAAE,EAAE;YACjB,IAAI,GAAG,OAAO,GAAG,GAAG,KAAK,GAAG,IAAI,EAAE,CAAA;SACnC;aAAM,IAAI,MAAM,EAAE,EAAE;YACnB,IAAI,GAAG,OAAO,GAAG,KAAK,IAAI,EAAE,CAAA;SAC7B;QACD,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IAED,IAAI,UAAU,CAAC,cAAc,CAAC,EAAE;QAC9B,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,IAAI,CAAA;QACnC,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,EAAE,EAAE;gBACZ,OAAO,GAAG,OAAO,EAAE,KAAK,MAAM,EAAE,EAAE,CAAA;aACnC;iBAAM,IAAI,OAAO,EAAE,IAAI,UAAU,EAAE,EAAE;gBACpC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;gBACtB,oBAAoB,EAAE,CAAA;gBACtB,OAAO,GAAG,IAAI,EAAE,CAAA;aACjB;iBAAM,IAAI,UAAU,EAAE;gBAAE,OAAO,KAAC,MAAM,oBAAK,KAAK,cAAG,OAAO,EAAE,IAAU,CAAA;SACxE;QACD,OAAO,CACL,KAAC,MAAM,oBAAK,KAAK,cACd,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,yBAAyB,CAAC,IACjD,CACV,CAAA;KACF;IACD,OAAO,KAAC,MAAM,oBAAK,KAAK,cAAG,KAAK,CAAC,QAAQ,IAAU,CAAA;AACrD,CAAC,CAAA"}

package/lib/esm/components/whatsapp-button-list.d.ts

@@ -1,3 +1,6 @@
+export declare const WHATSAPP_MAX_BUTTON_LIST_CHARS = 24;
+export declare const WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS = 72;
+export declare const WHATSAPP_MAX_BUTTON_LIST_ID_CHARS = 200;
 export interface WhatsappButtonListSectionProps {
     title?: string;
     rows: WhatsappButtonListRowProps[];

package/lib/esm/components/whatsapp-button-list.js

@@ -1,12 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { INPUT } from '@botonic/core';
+import { truncateText } from '../util';
 import { renderComponent } from '../util/react';
 import { Message } from './message';
+import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel/multichannel-utils';
+// TODO: Add validation in component
+export const WHATSAPP_MAX_BUTTON_LIST_CHARS = 24;
+export const WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS = 72;
+export const WHATSAPP_MAX_BUTTON_LIST_ID_CHARS = 200;
 const serialize = _whatsappButtonListProps => {
     // TODO: Implement to have data persistance in localStorage, not needed for this WhatsApp development
     return {};
 };
 export const WhatsappButtonList = (props) => {
+    const trucateSectionsContents = (sections) => {
+        const trucateRowContents = (row) => {
+            const title = truncateText(row.title, WHATSAPP_MAX_BUTTON_LIST_CHARS);
+            const description = row.description
+                ? truncateText(row.description, WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS)
+                : undefined;
+            if (row.id.length > WHATSAPP_MAX_BUTTON_LIST_ID_CHARS) {
+                console.error(`Button id "${row.id}" exceeds the maximum length of ${WHATSAPP_MAX_BUTTON_LIST_ID_CHARS} characters`);
+            }
+            return Object.assign(Object.assign({}, row), { title, description });
+        };
+        return sections.map(section => ({
+            title: section.title
+                ? truncateText(section.title, WHATSAPP_MAX_BUTTON_LIST_CHARS)
+                : undefined,
+            rows: section.rows.map(trucateRowContents),
+        }));
+    };
     const renderBrowser = () => {
         // Return a dummy message for browser
         const message = `${JSON.stringify(props)}`;
@@ -15,7 +39,7 @@ export const WhatsappButtonList = (props) => {
     const renderNode = () => {
         return (
         // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
-        _jsx("message", Object.assign({}, props, { sections: JSON.stringify(props.sections), type: INPUT.WHATSAPP_BUTTON_LIST })));
+        _jsx("message", Object.assign({}, props, { button: truncateText(props.button, WHATSAPP_MAX_BUTTON_CHARS), sections: JSON.stringify(trucateSectionsContents(props.sections)), type: INPUT.WHATSAPP_BUTTON_LIST })));
     };
     return renderComponent({ renderBrowser, renderNode });
 };

package/lib/esm/components/whatsapp-button-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"whatsapp-button-list.js","sourceRoot":"src/","sources":["components/whatsapp-button-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAuBnC,MAAM,SAAS,GAAG,wBAAwB,CAAC,EAAE;IAC3C,qGAAqG;IACrG,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAA;QAC1C,OAAO,CACL,KAAC,OAAO,kBACN,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IACpB,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,oBAAoB,gBAE/B,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,kCACM,KAAK,IACT,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,EACxC,IAAI,EAAE,KAAK,CAAC,oBAAoB,IAChC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}
+{"version":3,"file":"whatsapp-button-list.js","sourceRoot":"src/","sources":["components/whatsapp-button-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAE7E,oCAAoC;AAEpC,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,CAAA;AAChD,MAAM,CAAC,MAAM,0CAA0C,GAAG,EAAE,CAAA;AAC5D,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;AAoBpD,MAAM,SAAS,GAAG,wBAAwB,CAAC,EAAE;IAC3C,qGAAqG;IACrG,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,uBAAuB,GAAG,CAC9B,QAA0C,EACR,EAAE;QACpC,MAAM,kBAAkB,GAAG,CACzB,GAA+B,EACH,EAAE;YAC9B,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,8BAA8B,CAAC,CAAA;YACrE,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW;gBACjC,CAAC,CAAC,YAAY,CACV,GAAG,CAAC,WAAW,EACf,0CAA0C,CAC3C;gBACH,CAAC,CAAC,SAAS,CAAA;YACb,IAAI,GAAG,CAAC,EAAE,CAAC,MAAM,GAAG,iCAAiC,EAAE;gBACrD,OAAO,CAAC,KAAK,CACX,cAAc,GAAG,CAAC,EAAE,mCAAmC,iCAAiC,aAAa,CACtG,CAAA;aACF;YACD,uCAAY,GAAG,KAAE,KAAK,EAAE,WAAW,IAAE;QACvC,CAAC,CAAA;QAED,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAC9B,KAAK,EAAE,OAAO,CAAC,KAAK;gBAClB,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,8BAA8B,CAAC;gBAC7D,CAAC,CAAC,SAAS;YACb,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC;SAC3C,CAAC,CAAC,CAAA;IACL,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAA;QAC1C,OAAO,CACL,KAAC,OAAO,kBACN,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,IACpB,KAAK,IACT,IAAI,EAAE,KAAK,CAAC,oBAAoB,gBAE/B,OAAO,IACA,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO;QACL,gFAAgF;QAChF,kCACM,KAAK,IACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,yBAAyB,CAAC,EAC7D,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EACjE,IAAI,EAAE,KAAK,CAAC,oBAAoB,IAChC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/util/index.d.ts

@@ -5,4 +5,5 @@ export * from './logs';
 export * from './objects';
 export * from './react';
 export * from './regexs';
+export * from './strings';
 export * from './webchat';

package/lib/esm/util/index.js

@@ -5,5 +5,6 @@ export * from './logs';
 export * from './objects';
 export * from './react';
 export * from './regexs';
+export * from './strings';
 export * from './webchat';
 //# sourceMappingURL=index.js.map

package/lib/esm/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"src/","sources":["util/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["util/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA"}

package/lib/esm/util/strings.d.ts

@@ -0,0 +1 @@
+export declare const truncateText: (text: any, maxLength: any, ellipsis?: string) => any;

package/lib/esm/util/strings.js

@@ -0,0 +1,7 @@
+export const truncateText = (text, maxLength, ellipsis = '...') => {
+    if (text.length > maxLength) {
+        return text.substring(0, maxLength - ellipsis.length) + ellipsis;
+    }
+    return text;
+};
+//# sourceMappingURL=strings.js.map

package/lib/esm/util/strings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.js","sourceRoot":"src/","sources":["util/strings.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;IAChE,IAAI,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE;QAC3B,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAA;KACjE;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.24.4-alpha.0",
+  "version": "0.24.5-alpha.0",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",

package/src/components/multichannel/multichannel-button.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
+import { truncateText } from '../../util/strings'
 import { Button } from '../button'
 import { MultichannelContext } from './multichannel-context'
 import { isWhatsapp, WHATSAPP_MAX_BUTTON_CHARS } from './multichannel-utils'
@@ -53,13 +54,6 @@ export const MultichannelButton = props => {
     return text
   }
 
-  const truncateText = (text, maxLength, ellipsis = '...') => {
-    if (text.length > maxLength) {
-      return text.substring(0, maxLength - ellipsis.length) + ellipsis
-    }
-    return text
-  }
-
   if (isWhatsapp(requestContext)) {
     const asText = props.asText ?? true
     if (asText) {

package/src/components/whatsapp-button-list.tsx

@@ -1,11 +1,16 @@
 import { INPUT } from '@botonic/core'
 import React from 'react'
 
+import { truncateText } from '../util'
 import { renderComponent } from '../util/react'
 import { Message } from './message'
+import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel/multichannel-utils'
 
 // TODO: Add validation in component
 
+export const WHATSAPP_MAX_BUTTON_LIST_CHARS = 24
+export const WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS = 72
+export const WHATSAPP_MAX_BUTTON_LIST_ID_CHARS = 200
 export interface WhatsappButtonListSectionProps {
   title?: string
   rows: WhatsappButtonListRowProps[]
@@ -31,6 +36,35 @@ const serialize = _whatsappButtonListProps => {
 }
 
 export const WhatsappButtonList = (props: WhatsappButtonListProps) => {
+  const trucateSectionsContents = (
+    sections: WhatsappButtonListSectionProps[]
+  ): WhatsappButtonListSectionProps[] => {
+    const trucateRowContents = (
+      row: WhatsappButtonListRowProps
+    ): WhatsappButtonListRowProps => {
+      const title = truncateText(row.title, WHATSAPP_MAX_BUTTON_LIST_CHARS)
+      const description = row.description
+        ? truncateText(
+            row.description,
+            WHATSAPP_MAX_BUTTON_LIST_DESCRIPTION_CHARS
+          )
+        : undefined
+      if (row.id.length > WHATSAPP_MAX_BUTTON_LIST_ID_CHARS) {
+        console.error(
+          `Button id "${row.id}" exceeds the maximum length of ${WHATSAPP_MAX_BUTTON_LIST_ID_CHARS} characters`
+        )
+      }
+      return { ...row, title, description }
+    }
+
+    return sections.map(section => ({
+      title: section.title
+        ? truncateText(section.title, WHATSAPP_MAX_BUTTON_LIST_CHARS)
+        : undefined,
+      rows: section.rows.map(trucateRowContents),
+    }))
+  }
+
   const renderBrowser = () => {
     // Return a dummy message for browser
     const message = `${JSON.stringify(props)}`
@@ -50,7 +84,8 @@ export const WhatsappButtonList = (props: WhatsappButtonListProps) => {
       // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
-        sections={JSON.stringify(props.sections)}
+        button={truncateText(props.button, WHATSAPP_MAX_BUTTON_CHARS)}
+        sections={JSON.stringify(trucateSectionsContents(props.sections))}
         type={INPUT.WHATSAPP_BUTTON_LIST}
       />
     )

package/src/util/index.ts

@@ -5,4 +5,5 @@ export * from './logs'
 export * from './objects'
 export * from './react'
 export * from './regexs'
+export * from './strings'
 export * from './webchat'

package/src/util/strings.ts

@@ -0,0 +1,6 @@
+export const truncateText = (text, maxLength, ellipsis = '...') => {
+  if (text.length > maxLength) {
+    return text.substring(0, maxLength - ellipsis.length) + ellipsis
+  }
+  return text
+}