@bikdotai/bik-component-library 0.0.817 → 0.0.819

package/dist/esm/components/template-preview/RCS/RCSChatPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"RCSChatPreview.js","sources":["../../../../../src/components/template-preview/RCS/RCSChatPreview.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { isRichAndCarouselCards } from '../helpers/templateMiscHelper';\nimport { VariableEditorHelper } from '../helpers/VariableEditorHelper';\nimport { RCS_TEMPLATE_TYPE, RCSPreviewPropsV2 } from '../models/RCSTemplate';\nimport { HEADER_TYPES } from '../models/TemplateMeta';\nimport { ChatBtn } from '../WhatsApp/ChatBtn';\nimport { RCSButtons } from './RCSButtons';\nimport { PdfMediaCard, RCSMediaCard } from './RCSMediaCard';\nimport {\n\tHeaderTextContainer,\n\tRCSChatBtnContainer,\n\tRcsHtmlContainer,\n\tRCSPreviewContainer,\n\tTitleTextContainer,\n} from './RCSPreview.styled';\n\nconst variableEditorHelper = new VariableEditorHelper();\n\nexport const RCSChatPreview = (props: RCSPreviewPropsV2) => {\n\tconst {\n\t\tbodyText,\n\t\ttitleText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tbodyVariableList,\n\t\theaderVariableList,\n\t\tbuttons,\n\t\tcarouselCardIndex,\n\t\tisWhatsappCarousel,\n\t\tisPreview,\n\t\ttitleVariableList,\n\t\ttemplateConfiguration,\n\t} = props;\n\n\tconst bodyHTML = variableEditorHelper.format(\n\t\tbodyText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\tbodyVariableList,\n\t);\n\tconst headerHtml = variableEditorHelper.format(\n\t\theaderText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\theaderVariableList,\n\t);\n\tconst titleHtml = variableEditorHelper.format(\n\t\ttitleText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\ttitleVariableList,\n\t);\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\terrorIndexes,\n\t\tisCarouselHovered,\n\t} = useTemplateModalContext();\n\n\tconst isRichCardTypeTemplate = useMemo(() => {\n\t\treturn isRichAndCarouselCards(\n\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t);\n\t}, [templateConfiguration?.templateType]);\n\n\tconst isHorizontalOrientation = useMemo(() => {\n\t\treturn templateConfiguration?.orientation == 'HORIZONTAL';\n\t}, [templateConfiguration]);\n\n\treturn (\n\t\t<RCSPreviewContainer\n\t\t\tisCarouselCard={carouselCardIndex != undefined && carouselCardIndex > -1}\n\t\t\tshowBorder={\n\t\t\t\t(carouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex === selectedCarouselIndex) ||\n\t\t\t\t(isProductCarouselType &&\n\t\t\t\t\tcarouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex > -1 &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex > -1)\n\t\t\t}\n\t\t\thasError={errorIndexes?.includes(carouselCardIndex ?? -2)}\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tisPreview={isPreview}\n\t\t\tshowDashedBorder={\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tisCarouselHovered &&\n\t\t\t\t(selectedCarouselIndex ?? -1) < 0 &&\n\t\t\t\t(carouselCardIndex ?? -1) > -1\n\t\t\t}\n\t\t\tneedBorder={isRichCardTypeTemplate}\n\t\t\tisHorizontalOrientation={isHorizontalOrientation}\n\t\t>\n\t\t\t{!isHorizontalOrientation && (\n\t\t\t\t<>\n\t\t\t\t\t{headerMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t\t\t\t<HeaderTextContainer\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: headerHtml }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : headerMediaType !== HEADER_TYPES.NONE &&\n\t\t\t\t\t  headerAssetLink &&\n\t\t\t\t\t  headerMediaType !== HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t<RCSMediaCard\n\t\t\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div style={{ width: isHorizontalOrientation ? '50%' : '' }}>\n\t\t\t\t<div className={isRichCardTypeTemplate ? '' : 'text--template'}>\n\t\t\t\t\t{!!titleText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TitleTextContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: titleHtml,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!!bodyText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<RcsHtmlContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: bodyHTML,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstyle={{ paddingTop: titleText ? 0 : 12 }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{headerMediaType === HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t<PdfMediaCard {...{ headerAssetLink, headerAssetName }} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{buttons && buttons.length > 0 ? (\n\t\t\t\t\tisRichAndCarouselCards(\n\t\t\t\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t\t\t\t) ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<ChatBtn key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<RCSChatBtnContainer>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<RCSButtons key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</RCSChatBtnContainer>\n\t\t\t\t\t)\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{isHorizontalOrientation &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.NONE &&\n\t\t\t\theaderAssetLink &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.DOCUMENT && (\n\t\t\t\t\t<RCSMediaCard\n\t\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHorizontal={isHorizontalOrientation}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t</RCSPreviewContainer>\n\t);\n};\n"],"names":["variableEditorHelper","VariableEditorHelper","RCSChatPreview","props","bodyText","titleText","headerMediaType","headerText","headerAssetLink","headerAssetName","imagePreviewStyles","size","bodyVariableList","headerVariableList","buttons","carouselCardIndex","isWhatsappCarousel","isPreview","titleVariableList","templateConfiguration","bodyHTML","headerHtml","titleHtml","selectedCarouselIndex","isProductCarouselType","errorIndexes","isCarouselHovered","useTemplateModalContext","isRichCardTypeTemplate","useMemo","isRichAndCarouselCards","isHorizontalOrientation","jsxs","RCSPreviewContainer","jsx","Fragment","HEADER_TYPES","HeaderTextContainer","RCSMediaCard","TitleTextContainer","RcsHtmlContainer","PdfMediaCard","button","i","ChatBtn","RCSChatBtnContainer","RCSButtons"],"mappings":"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"}
+{"version":3,"file":"RCSChatPreview.js","sources":["../../../../../src/components/template-preview/RCS/RCSChatPreview.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { isRichAndCarouselCards } from '../helpers/templateMiscHelper';\nimport { VariableEditorHelper } from '../helpers/VariableEditorHelper';\nimport { RCS_TEMPLATE_TYPE, RCSPreviewPropsV2 } from '../models/RCSTemplate';\nimport { HEADER_TYPES } from '../models/TemplateMeta';\nimport { ChatBtn } from '../WhatsApp/ChatBtn';\nimport { RCSButtons } from './RCSButtons';\nimport { PdfMediaCard, RCSMediaCard } from './RCSMediaCard';\nimport {\n\tHeaderTextContainer,\n\tRCSChatBtnContainer,\n\tRcsHtmlContainer,\n\tRCSPreviewContainer,\n\tTitleTextContainer,\n} from './RCSPreview.styled';\n\nconst variableEditorHelper = new VariableEditorHelper();\n\nexport const RCSChatPreview = (props: RCSPreviewPropsV2) => {\n\tconst {\n\t\tbodyText,\n\t\ttitleText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tbodyVariableList,\n\t\theaderVariableList,\n\t\tbuttons,\n\t\tcarouselCardIndex,\n\t\tisWhatsappCarousel,\n\t\tisPreview,\n\t\ttitleVariableList,\n\t\ttemplateConfiguration,\n\t} = props;\n\n\tconst bodyHTML = variableEditorHelper.format(\n\t\tbodyText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\tbodyVariableList,\n\t);\n\tconst headerHtml = variableEditorHelper.format(\n\t\theaderText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\theaderVariableList,\n\t);\n\tconst titleHtml = variableEditorHelper.format(\n\t\ttitleText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\ttitleVariableList,\n\t);\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\terrorIndexes,\n\t\tisCarouselHovered,\n\t} = useTemplateModalContext();\n\n\tconst isRichCardTypeTemplate = useMemo(() => {\n\t\treturn isRichAndCarouselCards(\n\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t);\n\t}, [templateConfiguration?.templateType]);\n\n\tconst isHorizontalOrientation = useMemo(() => {\n\t\treturn templateConfiguration?.orientation == 'HORIZONTAL';\n\t}, [templateConfiguration]);\n\n\t// For VERTICAL templates whose original `components[]` order is\n\t// body-then-media, render the media after the body instead of the default\n\t// media-first layout. Defaults to false → unchanged behaviour.\n\tconst isMediaAfterBody = useMemo(() => {\n\t\treturn (\n\t\t\t!isHorizontalOrientation && !!templateConfiguration?.isMediaAfterBody\n\t\t);\n\t}, [isHorizontalOrientation, templateConfiguration]);\n\n\tconst verticalMediaHeader =\n\t\theaderMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t<HeaderTextContainer dangerouslySetInnerHTML={{ __html: headerHtml }} />\n\t\t) : headerMediaType !== HEADER_TYPES.NONE &&\n\t\t  headerAssetLink &&\n\t\t  headerMediaType !== HEADER_TYPES.DOCUMENT ? (\n\t\t\t<RCSMediaCard\n\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\tmediaType={headerMediaType}\n\t\t\t\timagePreviewStyles={\n\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t}\n\t\t\t/>\n\t\t) : null;\n\n\treturn (\n\t\t<RCSPreviewContainer\n\t\t\tisCarouselCard={carouselCardIndex != undefined && carouselCardIndex > -1}\n\t\t\tshowBorder={\n\t\t\t\t(carouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex === selectedCarouselIndex) ||\n\t\t\t\t(isProductCarouselType &&\n\t\t\t\t\tcarouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex > -1 &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex > -1)\n\t\t\t}\n\t\t\thasError={errorIndexes?.includes(carouselCardIndex ?? -2)}\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tisPreview={isPreview}\n\t\t\tshowDashedBorder={\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tisCarouselHovered &&\n\t\t\t\t(selectedCarouselIndex ?? -1) < 0 &&\n\t\t\t\t(carouselCardIndex ?? -1) > -1\n\t\t\t}\n\t\t\tneedBorder={isRichCardTypeTemplate}\n\t\t\tisHorizontalOrientation={isHorizontalOrientation}\n\t\t>\n\t\t\t{!isHorizontalOrientation && !isMediaAfterBody && verticalMediaHeader}\n\t\t\t<div style={{ width: isHorizontalOrientation ? '50%' : '' }}>\n\t\t\t\t<div className={isRichCardTypeTemplate ? '' : 'text--template'}>\n\t\t\t\t\t{!!titleText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TitleTextContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: titleHtml,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!!bodyText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<RcsHtmlContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: bodyHTML,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstyle={{ paddingTop: titleText ? 0 : 12 }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{headerMediaType === HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t<PdfMediaCard {...{ headerAssetLink, headerAssetName }} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{!isHorizontalOrientation && isMediaAfterBody && verticalMediaHeader}\n\n\t\t\t\t{buttons && buttons.length > 0 ? (\n\t\t\t\t\tisRichAndCarouselCards(\n\t\t\t\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t\t\t\t) ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<ChatBtn key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<RCSChatBtnContainer>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<RCSButtons key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</RCSChatBtnContainer>\n\t\t\t\t\t)\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{isHorizontalOrientation &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.NONE &&\n\t\t\t\theaderAssetLink &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.DOCUMENT && (\n\t\t\t\t\t<RCSMediaCard\n\t\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHorizontal={isHorizontalOrientation}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t</RCSPreviewContainer>\n\t);\n};\n"],"names":["variableEditorHelper","VariableEditorHelper","RCSChatPreview","props","bodyText","titleText","headerMediaType","headerText","headerAssetLink","headerAssetName","imagePreviewStyles","size","bodyVariableList","headerVariableList","buttons","carouselCardIndex","isWhatsappCarousel","isPreview","titleVariableList","templateConfiguration","bodyHTML","headerHtml","titleHtml","selectedCarouselIndex","isProductCarouselType","errorIndexes","isCarouselHovered","useTemplateModalContext","isRichCardTypeTemplate","useMemo","isRichAndCarouselCards","isHorizontalOrientation","isMediaAfterBody","verticalMediaHeader","HEADER_TYPES","jsx","HeaderTextContainer","RCSMediaCard","jsxs","RCSPreviewContainer","Fragment","TitleTextContainer","RcsHtmlContainer","PdfMediaCard","button","i","ChatBtn","RCSChatBtnContainer","RCSButtons"],"mappings":"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"}

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts

@@ -30,4 +30,12 @@ export declare class TemplateCreatorHelper {
         pod?: string;
     }): Promise<CreateTemplateType>;
     parseTemplateConfiguration(template: RCSTemplateType): RCSTemplateConfig;
+    /**
+     * Determines, from the original `components[]` order, whether a non-TEXT
+     * media header appears AFTER the body component. The library preview
+     * otherwise always renders the media first; honouring this keeps
+     * body-then-media templates (the third-party ordering for some
+     * `text_message_with_media` templates) correct in the preview.
+     */
+    isRcsMediaAfterBody(template: RCSTemplateType): boolean;
 }

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js

@@ -1,14 +1,14 @@
 import { format as w } from "date-fns";
 import { COLORS as _ } from "../../../constants/Theme.js";
 import { specialCharPattern as U, placeHolderNamePattern as B, editableVarPattern as M } from "../constants/regexPatterns.js";
-import { REQUIRED_FIELD as h, NAME_LEN_LIMIT as S, NAME_LEN_ERROR as H, NO_SPECIAL_CHAR as Y, HEADER_TEXT_LEN_LIMIT as N, HEADER_LEN_ERROR as R, ONE_VAR_ALLOWED as $, HEADER_ASSET_LINK_ERROR as q, BODY_TEXT_LEN_LIMIT as Q, BODY_LEN_ERROR as K, QUICK_REPLY_BTN_TEXT_LIMIT as L, QUICK_REPLY_LEN_ERROR as y, BUTTON_EMOJI_ERROR as x, VALID_PHONE_NUMBER as W, QUICK_REPLY_NAME_LEN_LIMIT as X, CREATE_TEMPLATE_DOM_IDS as u, QUICK_REPLY_NAME_ERROR as j } from "../constants/TemplateConstants.js";
-import { HEADER_TYPES as f, ACTIONS_TYPES as d } from "../models/TemplateMeta.js";
+import { REQUIRED_FIELD as h, NAME_LEN_LIMIT as S, NAME_LEN_ERROR as H, NO_SPECIAL_CHAR as Y, HEADER_TEXT_LEN_LIMIT as R, HEADER_LEN_ERROR as N, ONE_VAR_ALLOWED as $, HEADER_ASSET_LINK_ERROR as q, BODY_TEXT_LEN_LIMIT as Q, BODY_LEN_ERROR as K, QUICK_REPLY_BTN_TEXT_LIMIT as L, QUICK_REPLY_LEN_ERROR as y, BUTTON_EMOJI_ERROR as x, VALID_PHONE_NUMBER as W, QUICK_REPLY_NAME_LEN_LIMIT as X, CREATE_TEMPLATE_DOM_IDS as u, QUICK_REPLY_NAME_ERROR as j } from "../constants/TemplateConstants.js";
+import { HEADER_TYPES as m, ACTIONS_TYPES as f } from "../models/TemplateMeta.js";
 import { POD as v } from "../models/WhatsAppTemplate.js";
 import { TemplateHelperUtils as z } from "../utils/TemplateHelperUtils.js";
 class ae {
   parseDataFromHeaderComponent(t, o, n) {
     const e = {
-      headerType: f.NONE,
+      headerType: m.NONE,
       headerVariables: []
     }, i = t?.components?.find(
       (r) => r.type === "HEADER"
@@ -17,14 +17,14 @@ class ae {
       e.headerType = i.format, e.headerText = i.text, e.headerAssetLink = i.example?.header_handle?.[0];
       const r = i.example?.header_text?.[0], s = t.mapping?.header?.[0], a = s;
       if (s) {
-        const l = s?.replace("[[", "").replace("]]", "").replace("{{", "").replace("}}", "").replace("((", "").replace("))", ""), p = /\(\(/.test(s), c = n === v.CHATBOT && a && a?.startsWith("((") && a?.endsWith("))"), m = {
+        const l = s?.replace("[[", "").replace("]]", "").replace("{{", "").replace("}}", "").replace("((", "").replace("))", ""), c = /\(\(/.test(s), p = n === v.CHATBOT && a && a?.startsWith("((") && a?.endsWith("))"), d = {
           idx: 0,
-          variableVal: o || c ? r : a,
-          editable: p,
-          editableDefaultValues: p ? void 0 : r,
+          variableVal: o || p ? r : a,
+          editable: c,
+          editableDefaultValues: c ? void 0 : r,
           variableName: l
         };
-        e.headerVariables = [m], i.example?.header_text?.length && (e.headerText = e.headerText?.replace(
+        e.headerVariables = [d], i.example?.header_text?.length && (e.headerText = e.headerText?.replace(
           /** since there will be only one variable in template so hard replace */
           "{{1}}",
           `{{${l}}}`
@@ -55,47 +55,47 @@ class ae {
         block: "nearest"
       });
     };
-    if (t.meta?.name ? t.meta.name?.trim().length > S ? (e.meta.name = H, n = "invalid") : U.test(t.meta.name?.trim()) && (e.meta.name = Y, n = "invalid") : (e.meta.name = h, n = "invalid"), e.meta.name && !r && (s(u.name), r = !0), t.headerType === f.TEXT) {
+    if (t.meta?.name ? t.meta.name?.trim().length > S ? (e.meta.name = H, n = "invalid") : U.test(t.meta.name?.trim()) && (e.meta.name = Y, n = "invalid") : (e.meta.name = h, n = "invalid"), e.meta.name && !r && (s(u.name), r = !0), t.headerType === m.TEXT) {
       const a = t.headerText?.trim() ?? "";
       if (!a)
         e.header = h, n = "invalid";
-      else if (a.length > N)
-        e.header = R, n = "invalid";
+      else if (a.length > R)
+        e.header = N, n = "invalid";
       else {
         const l = i.getTemplateVariablesFromState(a);
         l && l.length > 1 && (e.header = $, n = "invalid");
       }
-    } else t.headerType === f.DOCUMENT || t.headerType === f.IMAGE || (t.headerType, f.VIDEO);
-    if ((t.headerType === f.DOCUMENT || t.headerType === f.IMAGE || t.headerType === f.VIDEO) && (t.headerAssetLink || (e.header = q, n = "invalid")), e.header && !r && (s(u.header), r = !0), t.bodyText ? t.bodyTextRaw && t.bodyTextRaw?.trim().length > Q && (e.body = K, n = "invalid") : (e.body = h, n = "invalid"), e.body && !r && (s(u.body), r = !0), t.footerText && t.footerText.length > N && (e.footer = R, n = "invalid"), e?.footer && !r && (s(u.footer), r = !0), t.actionsType === d.CTA_BTN) {
+    } else t.headerType === m.DOCUMENT || t.headerType === m.IMAGE || (t.headerType, m.VIDEO);
+    if ((t.headerType === m.DOCUMENT || t.headerType === m.IMAGE || t.headerType === m.VIDEO) && (t.headerAssetLink || (e.header = q, n = "invalid")), e.header && !r && (s(u.header), r = !0), t.bodyText ? t.bodyTextRaw && t.bodyTextRaw?.trim().length > Q && (e.body = K, n = "invalid") : (e.body = h, n = "invalid"), e.body && !r && (s(u.body), r = !0), t.footerText && t.footerText.length > R && (e.footer = N, n = "invalid"), e?.footer && !r && (s(u.footer), r = !0), t.actionsType === f.CTA_BTN) {
       if (t.ctaBtn?.phoneNumber?.isChecked) {
         const a = t.ctaBtn.phoneNumber.btnText?.trim(), l = t.ctaBtn.phoneNumber.phoneNumber;
         e.ctaBtn && !a ? (e.ctaBtn.phoneNumber.btnText = h, n = "invalid") : e.ctaBtn && a && a.length > L ? (e.ctaBtn.phoneNumber.btnText = y, n = "invalid") : e.ctaBtn && a && o.test(a) && (e.ctaBtn.phoneNumber.btnText = x, n = "invalid"), e.ctaBtn && !l ? (e.ctaBtn.phoneNumber.link = h, n = "invalid") : e.ctaBtn && l && l.length < 10 && (e.ctaBtn.phoneNumber.link = W, n = "invalid");
       }
       if (t.ctaBtn?.websiteLinkBtn?.isChecked) {
-        const a = t.ctaBtn.websiteLinkBtn.btnText?.trim(), l = t.ctaBtn.websiteLinkBtn.linkOpens?.trim(), p = t.ctaBtn.websiteLinkBtn.placeholder?.trim();
-        e.ctaBtn && !a ? (e.ctaBtn.websiteLink.btnText = h, n = "invalid") : e.ctaBtn && a && a.length > L ? (e.ctaBtn.websiteLink.btnText = y, n = "invalid") : e.ctaBtn && a && o.test(a) && (e.ctaBtn.websiteLink.btnText = x, n = "invalid"), e.ctaBtn && !l && !p && (e.ctaBtn.websiteLink.link = h, n = "invalid");
+        const a = t.ctaBtn.websiteLinkBtn.btnText?.trim(), l = t.ctaBtn.websiteLinkBtn.linkOpens?.trim(), c = t.ctaBtn.websiteLinkBtn.placeholder?.trim();
+        e.ctaBtn && !a ? (e.ctaBtn.websiteLink.btnText = h, n = "invalid") : e.ctaBtn && a && a.length > L ? (e.ctaBtn.websiteLink.btnText = y, n = "invalid") : e.ctaBtn && a && o.test(a) && (e.ctaBtn.websiteLink.btnText = x, n = "invalid"), e.ctaBtn && !l && !c && (e.ctaBtn.websiteLink.link = h, n = "invalid");
       }
-    } else if (t.actionsType === d.QUICK_REPLY) {
+    } else if (t.actionsType === f.QUICK_REPLY) {
       const a = ["", "", ""];
-      t.quickReply.forEach((l, p) => {
-        const c = l.text?.trim();
-        if (!c)
-          a[p] = h, n = "invalid";
-        else if (c.length > X)
-          a[p] = y, n = "invalid";
-        else if (o.test(c))
-          a[p] = x, n = "invalid";
+      t.quickReply.forEach((l, c) => {
+        const p = l.text?.trim();
+        if (!p)
+          a[c] = h, n = "invalid";
+        else if (p.length > X)
+          a[c] = y, n = "invalid";
+        else if (o.test(p))
+          a[c] = x, n = "invalid";
         else {
-          const m = [...t.quickReply];
-          m.splice(p, 1), m.find(
-            (b) => b.text === c
-          ) && (a[p] = j, n = "invalid");
+          const d = [...t.quickReply];
+          d.splice(c, 1), d.find(
+            (b) => b.text === p
+          ) && (a[c] = j, n = "invalid");
         }
       }), e.quickReply = a;
     }
-    if (t.actionsType === d.CTA_BTN || t.actionsType === d.QUICK_REPLY) {
+    if (t.actionsType === f.CTA_BTN || t.actionsType === f.QUICK_REPLY) {
       const a = e.quickReply?.reduce(
-        (l, p) => l || !!p,
+        (l, c) => l || !!c,
         !1
       );
       (e?.ctaBtn?.websiteLink?.link || e.ctaBtn?.websiteLink?.btnText || e.ctaBtn?.phoneNumber?.link || e.ctaBtn?.phoneNumber?.btnText || a) && !r && (s(u.actionButtons), r = !0);
@@ -109,23 +109,23 @@ class ae {
       (a) => a.type === "BODY"
     );
     return s && (s.example?.body_text?.[0]?.forEach((a, l) => {
-      let p = t.mapping?.body?.[l];
-      const c = p, m = p && /\(\(/.test(p), T = p?.match(
+      let c = t.mapping?.body?.[l];
+      const p = c, d = c && /\(\(/.test(c), T = c?.match(
         B
       );
-      T?.[2] && (p = T?.[2]);
-      const b = e === v.CHATBOT && c && c?.startsWith("((") && c?.endsWith("))");
+      T?.[2] && (c = T?.[2]);
+      const b = e === v.CHATBOT && p && p?.startsWith("((") && p?.endsWith("))");
       i.push({
         idx: l,
-        variableVal: n || b ? a : c,
-        editable: !!m,
-        editableDefaultValues: m ? void 0 : a,
-        variableName: p ?? ""
+        variableVal: n || b ? a : p,
+        editable: !!d,
+        editableDefaultValues: d ? void 0 : a,
+        variableName: c ?? ""
       });
     }), t.htmlContentUrl ? r = t.htmlContentUrl : r = s.text?.split(/\{\{[0-9]+\}\}/).length ? s.text?.split(/\{\{[0-9]+\}\}/).map((a, l) => {
       if (i?.[l]) {
-        const p = i[l].variableName;
-        return o ? `${a}{{${p}}}` : `${a} <span> </span><span  style="color: ${_.content.brand}; text-decoration: underline;">{{${p}}}</span><span> </span>`;
+        const c = i[l].variableName;
+        return o ? `${a}{{${c}}}` : `${a} <span> </span><span  style="color: ${_.content.brand}; text-decoration: underline;">{{${c}}}</span><span> </span>`;
       }
       return a;
     }).join("") : ""), { bodyVariable: i, bodyText: r };
@@ -138,14 +138,14 @@ class ae {
     );
     return r && (r.example?.title_text?.[0]?.forEach((s, a) => {
       let l = t.mapping?.body?.[a];
-      const p = l, c = l && /\(\(/.test(l), m = l?.match(
+      const c = l, p = l && /\(\(/.test(l), d = l?.match(
         B
       );
-      m?.[2] && (l = m?.[2]), e.push({
+      d?.[2] && (l = d?.[2]), e.push({
         idx: a,
-        variableVal: n ? s : p,
-        editable: !!c,
-        editableDefaultValues: c ? void 0 : s,
+        variableVal: n ? s : c,
+        editable: !!p,
+        editableDefaultValues: p ? void 0 : s,
         variableName: l ?? ""
       });
     }), t.htmlContentUrl ? i = t.htmlContentUrl : i = r.text?.split(/\{\{[0-9]+\}\}/).length ? r.text?.split(/\{\{[0-9]+\}\}/).map((s, a) => {
@@ -163,7 +163,7 @@ class ae {
   }
   parseButtonComponent(t) {
     const o = {
-      actionsType: d.NONE,
+      actionsType: f.NONE,
       quickReply: [],
       ctaBtn: {
         phoneNumber: void 0,
@@ -174,11 +174,11 @@ class ae {
       (e) => e.type === "BUTTONS"
     );
     if (n && n?.buttons?.length) {
-      const e = n?.buttons?.[0].type === "QUICK_REPLY" ? d.QUICK_REPLY : d.CTA_BTN;
-      if (o.actionsType = e, e === d.QUICK_REPLY) {
+      const e = n?.buttons?.[0].type === "QUICK_REPLY" ? f.QUICK_REPLY : f.CTA_BTN;
+      if (o.actionsType = e, e === f.QUICK_REPLY) {
         const i = n?.buttons?.map((r) => r) ?? [];
         o.quickReply = i;
-      } else e === d.CTA_BTN && n?.buttons?.forEach((i) => {
+      } else e === f.CTA_BTN && n?.buttons?.forEach((i) => {
         if (i.phone_number && (o.ctaBtn.phoneNumber = {
           isChecked: !0,
           btnText: i.text,
@@ -247,13 +247,13 @@ class ae {
       headerType: s,
       headerAssetLink: a,
       headerAssetName: l,
-      headerText: p,
-      headerVariables: c
+      headerText: c,
+      headerVariables: p
     } = await this.parseDataFromHeaderComponent(
       o,
       void 0,
       r
-    ), { bodyText: m, bodyVariable: T } = await this.parseBodyComponent(
+    ), { bodyText: d, bodyVariable: T } = await this.parseBodyComponent(
       o,
       e,
       i,
@@ -262,12 +262,12 @@ class ae {
       o,
       e,
       i
-    ), { actionsType: k, quickReply: I, ctaBtn: g, allButtons: C } = await this.parseButtonComponent(o), A = this.parseLimitedTimeOfferComponent(
+    ), { actionsType: I, quickReply: k, ctaBtn: A, allButtons: C } = await this.parseButtonComponent(o), g = this.parseLimitedTimeOfferComponent(
       o,
       C
     ), { showCallPermissionCard: P, callPermissionText: D } = this.parseCallPermissionComponent(o), E = {
-      quickReply: I,
-      ctaBtn: g,
+      quickReply: k,
+      ctaBtn: A,
       allButtons: C,
       meta: {
         name: n ? `${o.label} Copy` : o.label,
@@ -284,22 +284,22 @@ class ae {
         meta: void 0,
         ctaBtn: void 0
       },
-      actionsType: k,
+      actionsType: I,
       footerText: this.parseFooterComponent(o),
       /** BODY TEXT */
       bodyVariables: T,
-      bodyText: m,
+      bodyText: d,
       /** HEADER */
       headerType: s,
       headerAssetLink: a,
       headerAssetName: l,
-      headerText: p,
-      headerVariables: c,
+      headerText: c,
+      headerVariables: p,
       alreadyAsADraft: o.isDraft,
       mode: "edit",
       initialLoading: !1,
       /* LIMITED TIME OFFER */
-      limitedTimeOfferComponent: A,
+      limitedTimeOfferComponent: g,
       /* Title for RCS */
       titleText: b,
       titleVariables: O,
@@ -322,9 +322,27 @@ class ae {
       o = n;
     return {
       ...o,
-      templateType: t?.templateType
+      templateType: t?.templateType,
+      isMediaAfterBody: this.isRcsMediaAfterBody(t)
     };
   }
+  /**
+   * Determines, from the original `components[]` order, whether a non-TEXT
+   * media header appears AFTER the body component. The library preview
+   * otherwise always renders the media first; honouring this keeps
+   * body-then-media templates (the third-party ordering for some
+   * `text_message_with_media` templates) correct in the preview.
+   */
+  isRcsMediaAfterBody(t) {
+    const o = t?.components;
+    if (!Array.isArray(o)) return !1;
+    const n = o.findIndex(
+      (i) => i.type === "HEADER" && !!i.format && i.format !== m.TEXT
+    ), e = o.findIndex(
+      (i) => i.type === "BODY"
+    );
+    return n > -1 && e > -1 && n > e;
+  }
 }
 export {
   ae as TemplateCreatorHelper

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateCreatorHelper.js","sources":["../../../../../src/components/template-preview/helpers/TemplateCreatorHelper.ts"],"sourcesContent":["import { format } from 'date-fns';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\teditableVarPattern,\n\tplaceHolderNamePattern,\n\tspecialCharPattern,\n} from '../constants/regexPatterns';\nimport {\n\tBODY_LEN_ERROR,\n\tBODY_TEXT_LEN_LIMIT,\n\tBUTTON_EMOJI_ERROR,\n\tCREATE_TEMPLATE_DOM_IDS,\n\tHEADER_ASSET_LINK_ERROR,\n\tHEADER_LEN_ERROR,\n\tHEADER_TEXT_LEN_LIMIT,\n\tNAME_LEN_ERROR,\n\tNAME_LEN_LIMIT,\n\tNO_SPECIAL_CHAR,\n\tONE_VAR_ALLOWED,\n\tQUICK_REPLY_BTN_TEXT_LIMIT,\n\tQUICK_REPLY_LEN_ERROR,\n\tQUICK_REPLY_NAME_ERROR,\n\tQUICK_REPLY_NAME_LEN_LIMIT,\n\tREQUIRED_FIELD,\n\tVALID_PHONE_NUMBER,\n} from '../constants/TemplateConstants';\nimport {\n\tRCS_TEMPLATE_TYPE,\n\tRCSTemplateConfig,\n\tRCSTemplateType,\n} from '../models/RCSTemplate';\nimport {\n\tACTIONS_TYPES,\n\tHEADER_TYPES,\n\tQUICK_REPLY_BUTTON,\n} from '../models/TemplateMeta';\nimport {\n\tCreateTemplateType,\n\tPOD,\n\ttemplateVariable,\n\tWhatsappPreviewButtonType,\n\tWhatsAppTemplate,\n} from '../models/WhatsAppTemplate';\nimport { TemplateHelperUtils } from '../utils/TemplateHelperUtils';\n\nexport class TemplateCreatorHelper {\n\tprivate parseDataFromHeaderComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tshowSampleValues?: boolean,\n\t\tpod?: string,\n\t) {\n\t\tconst res: {\n\t\t\theaderType: HEADER_TYPES;\n\t\t\theaderAssetLink?: string;\n\t\t\theaderAssetName?: string;\n\t\t\theaderText?: string;\n\t\t\theaderVariables: templateVariable[];\n\t\t} = {\n\t\t\theaderType: HEADER_TYPES.NONE,\n\t\t\theaderVariables: [],\n\t\t};\n\n\t\tconst headerComponent = dbFormattedTemplate?.components?.find(\n\t\t\t(component) => component.type === 'HEADER',\n\t\t);\n\n\t\tif (headerComponent) {\n\t\t\tres.headerType = headerComponent.format as HEADER_TYPES;\n\t\t\tres.headerText = headerComponent.text;\n\n\t\t\tres.headerAssetLink = headerComponent.example?.header_handle?.[0];\n\n\t\t\tconst sampleValue = headerComponent.example?.header_text?.[0];\n\t\t\tconst headerVarPlaceholder = dbFormattedTemplate.mapping?.header?.[0];\n\t\t\tconst originalVariable = headerVarPlaceholder;\n\t\t\tif (headerVarPlaceholder) {\n\t\t\t\tconst normalizedName = headerVarPlaceholder\n\t\t\t\t\t?.replace('[[', '')\n\t\t\t\t\t.replace(']]', '')\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t.replace('))', '');\n\t\t\t\tconst editable = /\\(\\(/.test(headerVarPlaceholder);\n\t\t\t\tconst isChatbotCustomText =\n\t\t\t\t\tpod === POD.CHATBOT &&\n\t\t\t\t\toriginalVariable &&\n\t\t\t\t\toriginalVariable?.startsWith('((') &&\n\t\t\t\t\toriginalVariable?.endsWith('))');\n\n\t\t\t\tconst reduxHeaderVar: templateVariable = {\n\t\t\t\t\tidx: 0,\n\t\t\t\t\tvariableVal:\n\t\t\t\t\t\tshowSampleValues || isChatbotCustomText\n\t\t\t\t\t\t\t? sampleValue\n\t\t\t\t\t\t\t: originalVariable,\n\t\t\t\t\teditable,\n\t\t\t\t\teditableDefaultValues: editable ? undefined : sampleValue,\n\t\t\t\t\tvariableName: normalizedName,\n\t\t\t\t};\n\t\t\t\tres.headerVariables = [reduxHeaderVar];\n\t\t\t\tif (headerComponent.example?.header_text?.length) {\n\t\t\t\t\tres.headerText = res.headerText?.replace(\n\t\t\t\t\t\t/** since there will be only one variable in template so hard replace */\n\t\t\t\t\t\t'{{1}}',\n\t\t\t\t\t\t`{{${normalizedName}}}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn res;\n\t}\n\n\t/**\n\t * Check if current template state is ready for saving as a draft/submit-template or not\n\t * @param state\n\t */\n\tvalidateState(state: CreateTemplateType): {\n\t\tstatus: 'invalid' | 'valid';\n\t\terrors: CreateTemplateType['error'];\n\t} {\n\t\tconst emojiRegex = /\\p{Extended_Pictographic}/u;\n\t\tlet status: 'invalid' | 'valid' = 'valid';\n\t\tconst errors: CreateTemplateType['error'] = {\n\t\t\tmeta: {},\n\t\t\tctaBtn: {\n\t\t\t\tphoneNumber: { btnText: '', link: '' },\n\t\t\t\twebsiteLink: { btnText: '', link: '' },\n\t\t\t},\n\t\t\tquickReply: [null, null, null],\n\t\t};\n\t\tconst templateHelperUtils = new TemplateHelperUtils();\n\t\tlet isScrolled = false;\n\n\t\tconst scrollByElementId = (elementId: string) => {\n\t\t\tdocument.getElementById(elementId)?.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t});\n\t\t};\n\n\t\tif (!state.meta?.name) {\n\t\t\terrors.meta!.name = REQUIRED_FIELD;\n\t\t\tstatus = 'invalid';\n\t\t} else if (state.meta.name?.trim().length > NAME_LEN_LIMIT) {\n\t\t\terrors.meta!.name = NAME_LEN_ERROR;\n\t\t\tstatus = 'invalid';\n\t\t} else if (specialCharPattern.test(state.meta.name?.trim())) {\n\t\t\terrors.meta!.name = NO_SPECIAL_CHAR;\n\t\t\tstatus = 'invalid';\n\t\t}\n\n\t\tif (!!errors.meta!.name && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.name);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (state.headerType === HEADER_TYPES.TEXT) {\n\t\t\tconst text = state.headerText?.trim() ?? '';\n\t\t\tif (!text) {\n\t\t\t\terrors.header = REQUIRED_FIELD;\n\t\t\t\tstatus = 'invalid';\n\t\t\t} else if (text.length > HEADER_TEXT_LEN_LIMIT) {\n\t\t\t\terrors.header = HEADER_LEN_ERROR;\n\t\t\t\tstatus = 'invalid';\n\t\t\t} else {\n\t\t\t\tconst variableList =\n\t\t\t\t\ttemplateHelperUtils.getTemplateVariablesFromState(text);\n\t\t\t\tif (variableList && variableList.length > 1) {\n\t\t\t\t\terrors.header = ONE_VAR_ALLOWED;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (state.headerType === HEADER_TYPES.DOCUMENT) {\n\t\t\t/** @todo add media header validations */\n\t\t} else if (state.headerType === HEADER_TYPES.IMAGE) {\n\t\t\t/** @todo add media header validations */\n\t\t} else if (state.headerType === HEADER_TYPES.VIDEO) {\n\t\t\t/** @todo add media header validations */\n\t\t}\n\n\t\tif (\n\t\t\tstate.headerType === HEADER_TYPES.DOCUMENT ||\n\t\t\tstate.headerType === HEADER_TYPES.IMAGE ||\n\t\t\tstate.headerType === HEADER_TYPES.VIDEO\n\t\t) {\n\t\t\tif (!state.headerAssetLink) {\n\t\t\t\terrors.header = HEADER_ASSET_LINK_ERROR;\n\t\t\t\tstatus = 'invalid';\n\t\t\t}\n\t\t}\n\n\t\tif (!!errors.header && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.header);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (!state.bodyText) {\n\t\t\terrors.body = REQUIRED_FIELD;\n\t\t\tstatus = 'invalid';\n\t\t} else {\n\t\t\tif (\n\t\t\t\tstate.bodyTextRaw &&\n\t\t\t\tstate.bodyTextRaw?.trim().length > BODY_TEXT_LEN_LIMIT\n\t\t\t) {\n\t\t\t\terrors.body = BODY_LEN_ERROR;\n\t\t\t\tstatus = 'invalid';\n\t\t\t}\n\t\t}\n\n\t\tif (!!errors.body && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.body);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (state.footerText && state.footerText.length > HEADER_TEXT_LEN_LIMIT) {\n\t\t\terrors.footer = HEADER_LEN_ERROR;\n\t\t\tstatus = 'invalid';\n\t\t}\n\n\t\tif (!!errors?.footer && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.footer);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (state.actionsType === ACTIONS_TYPES.CTA_BTN) {\n\t\t\tif (state.ctaBtn?.phoneNumber?.isChecked) {\n\t\t\t\tconst btnText = state.ctaBtn.phoneNumber.btnText?.trim();\n\t\t\t\tconst phoneNumber = state.ctaBtn.phoneNumber.phoneNumber;\n\n\t\t\t\tif (errors.ctaBtn && !btnText) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.btnText = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (\n\t\t\t\t\terrors.ctaBtn &&\n\t\t\t\t\tbtnText &&\n\t\t\t\t\tbtnText.length > QUICK_REPLY_BTN_TEXT_LIMIT\n\t\t\t\t) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.btnText = QUICK_REPLY_LEN_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (errors.ctaBtn && btnText && emojiRegex.test(btnText)) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.btnText = BUTTON_EMOJI_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\n\t\t\t\tif (errors.ctaBtn && !phoneNumber) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.link = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (errors.ctaBtn && phoneNumber && phoneNumber.length < 10) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.link = VALID_PHONE_NUMBER;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (state.ctaBtn?.websiteLinkBtn?.isChecked) {\n\t\t\t\tconst btnText = state.ctaBtn.websiteLinkBtn.btnText?.trim();\n\t\t\t\tconst customLink = state.ctaBtn.websiteLinkBtn.linkOpens?.trim();\n\t\t\t\tconst placeholder = state.ctaBtn.websiteLinkBtn.placeholder?.trim();\n\n\t\t\t\tif (errors.ctaBtn && !btnText) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.btnText = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (\n\t\t\t\t\terrors.ctaBtn &&\n\t\t\t\t\tbtnText &&\n\t\t\t\t\tbtnText.length > QUICK_REPLY_BTN_TEXT_LIMIT\n\t\t\t\t) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.btnText = QUICK_REPLY_LEN_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (errors.ctaBtn && btnText && emojiRegex.test(btnText)) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.btnText = BUTTON_EMOJI_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\n\t\t\t\tif (errors.ctaBtn && !customLink && !placeholder) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.link = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (state.actionsType === ACTIONS_TYPES.QUICK_REPLY) {\n\t\t\tconst quickReplyErrors = ['', '', ''];\n\t\t\tstate.quickReply.forEach((button, i) => {\n\t\t\t\tconst text = button.text?.trim();\n\t\t\t\tif (!text) {\n\t\t\t\t\tquickReplyErrors[i] = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (text.length > QUICK_REPLY_NAME_LEN_LIMIT) {\n\t\t\t\t\tquickReplyErrors[i] = QUICK_REPLY_LEN_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (emojiRegex.test(text)) {\n\t\t\t\t\tquickReplyErrors[i] = BUTTON_EMOJI_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else {\n\t\t\t\t\tconst buttons = [...state.quickReply];\n\t\t\t\t\tbuttons.splice(i, 1);\n\t\t\t\t\tconst exists = buttons.find(\n\t\t\t\t\t\t(el: QUICK_REPLY_BUTTON) => el.text === text,\n\t\t\t\t\t);\n\t\t\t\t\tif (exists) {\n\t\t\t\t\t\tquickReplyErrors[i] = QUICK_REPLY_NAME_ERROR;\n\t\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\terrors.quickReply = quickReplyErrors;\n\t\t}\n\n\t\tif (\n\t\t\tstate.actionsType === ACTIONS_TYPES.CTA_BTN ||\n\t\t\tstate.actionsType === ACTIONS_TYPES.QUICK_REPLY\n\t\t) {\n\t\t\tconst quickReplyErrors = errors.quickReply?.reduce(\n\t\t\t\t(qrbErrorAcc, currentError) => qrbErrorAcc || !!currentError,\n\t\t\t\tfalse,\n\t\t\t);\n\t\t\tif (\n\t\t\t\t(!!errors?.ctaBtn?.websiteLink?.link ||\n\t\t\t\t\t!!errors.ctaBtn?.websiteLink?.btnText ||\n\t\t\t\t\t!!errors.ctaBtn?.phoneNumber?.link ||\n\t\t\t\t\t!!errors.ctaBtn?.phoneNumber?.btnText ||\n\t\t\t\t\t!!quickReplyErrors) &&\n\t\t\t\t!isScrolled\n\t\t\t) {\n\t\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.actionButtons);\n\t\t\t\tisScrolled = true;\n\t\t\t}\n\t\t}\n\n\t\treturn { status, errors };\n\t}\n\n\tprivate parseBodyComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tisV2 = false,\n\t\tshowSampleValues?: boolean,\n\t\tpod?: string,\n\t) {\n\t\tconst bodyVariable: templateVariable[] = [];\n\t\tlet bodyText = '';\n\n\t\tconst bodyComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'BODY',\n\t\t);\n\n\t\tif (bodyComponent) {\n\t\t\tbodyComponent.example?.body_text?.[0]?.forEach((sampleValue, i) => {\n\t\t\t\tlet bodyVarPlaceholder = dbFormattedTemplate.mapping?.body?.[i];\n\t\t\t\tconst originalVariable = bodyVarPlaceholder;\n\t\t\t\tconst editable = bodyVarPlaceholder && /\\(\\(/.test(bodyVarPlaceholder);\n\t\t\t\tconst matchedPlaceholderName = bodyVarPlaceholder?.match(\n\t\t\t\t\tplaceHolderNamePattern,\n\t\t\t\t);\n\n\t\t\t\tif (matchedPlaceholderName?.[2]) {\n\t\t\t\t\tbodyVarPlaceholder = matchedPlaceholderName?.[2];\n\t\t\t\t}\n\n\t\t\t\tconst isChatbotCustomText =\n\t\t\t\t\tpod === POD.CHATBOT &&\n\t\t\t\t\toriginalVariable &&\n\t\t\t\t\toriginalVariable?.startsWith('((') &&\n\t\t\t\t\toriginalVariable?.endsWith('))');\n\n\t\t\t\tbodyVariable.push({\n\t\t\t\t\tidx: i,\n\t\t\t\t\tvariableVal:\n\t\t\t\t\t\tshowSampleValues || isChatbotCustomText\n\t\t\t\t\t\t\t? sampleValue\n\t\t\t\t\t\t\t: originalVariable,\n\t\t\t\t\teditable: !!editable,\n\t\t\t\t\teditableDefaultValues: editable ? undefined : sampleValue,\n\t\t\t\t\tvariableName: bodyVarPlaceholder ?? '',\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tif (dbFormattedTemplate.htmlContentUrl) {\n\t\t\t\tbodyText = dbFormattedTemplate.htmlContentUrl;\n\t\t\t} else {\n\t\t\t\tbodyText = bodyComponent.text?.split(/\\{\\{[0-9]+\\}\\}/).length\n\t\t\t\t\t? bodyComponent.text\n\t\t\t\t\t\t\t?.split(/\\{\\{[0-9]+\\}\\}/)\n\t\t\t\t\t\t\t.map((t, i) => {\n\t\t\t\t\t\t\t\tif (bodyVariable?.[i]) {\n\t\t\t\t\t\t\t\t\tconst normalizeName = bodyVariable[i].variableName;\n\t\t\t\t\t\t\t\t\tconst tmp = isV2\n\t\t\t\t\t\t\t\t\t\t? `${t}{{${normalizeName}}}`\n\t\t\t\t\t\t\t\t\t\t: `${t} <span> </span><span  style=\"color: ${COLORS.content.brand}; text-decoration: underline;\">{{${normalizeName}}}</span><span> </span>`;\n\n\t\t\t\t\t\t\t\t\treturn tmp;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn t;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t.join('')\n\t\t\t\t\t: '';\n\t\t\t}\n\t\t}\n\n\t\treturn { bodyVariable, bodyText };\n\t}\n\n\tprivate parseTitleComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tisV2 = false,\n\t\tshowSampleValues?: boolean,\n\t) {\n\t\tconst titleVariable: templateVariable[] = [];\n\t\tlet titleText = '';\n\n\t\tconst bodyComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'TITLE',\n\t\t);\n\n\t\tif (bodyComponent) {\n\t\t\tbodyComponent.example?.title_text?.[0]?.forEach((sampleValue, i) => {\n\t\t\t\tlet bodyVarPlaceholder = dbFormattedTemplate.mapping?.body?.[i];\n\t\t\t\tconst originalVariable = bodyVarPlaceholder;\n\t\t\t\tconst editable = bodyVarPlaceholder && /\\(\\(/.test(bodyVarPlaceholder);\n\t\t\t\tconst matchedPlaceholderName = bodyVarPlaceholder?.match(\n\t\t\t\t\tplaceHolderNamePattern,\n\t\t\t\t);\n\n\t\t\t\tif (matchedPlaceholderName?.[2]) {\n\t\t\t\t\tbodyVarPlaceholder = matchedPlaceholderName?.[2];\n\t\t\t\t}\n\n\t\t\t\ttitleVariable.push({\n\t\t\t\t\tidx: i,\n\t\t\t\t\tvariableVal: showSampleValues ? sampleValue : originalVariable,\n\t\t\t\t\teditable: !!editable,\n\t\t\t\t\teditableDefaultValues: editable ? undefined : sampleValue,\n\t\t\t\t\tvariableName: bodyVarPlaceholder ?? '',\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tif (dbFormattedTemplate.htmlContentUrl) {\n\t\t\t\ttitleText = dbFormattedTemplate.htmlContentUrl;\n\t\t\t} else {\n\t\t\t\ttitleText = bodyComponent.text?.split(/\\{\\{[0-9]+\\}\\}/).length\n\t\t\t\t\t? bodyComponent.text\n\t\t\t\t\t\t\t?.split(/\\{\\{[0-9]+\\}\\}/)\n\t\t\t\t\t\t\t.map((t, i) => {\n\t\t\t\t\t\t\t\tif (titleVariable?.[i]) {\n\t\t\t\t\t\t\t\t\tconst normalizeName = titleVariable[i].variableName;\n\t\t\t\t\t\t\t\t\tconst tmp = isV2\n\t\t\t\t\t\t\t\t\t\t? `${t}{{${normalizeName}}}`\n\t\t\t\t\t\t\t\t\t\t: `${t} <span> </span><span  style=\"color: ${COLORS.content.brand}; text-decoration: underline;\">{{${normalizeName}}}</span><span> </span>`;\n\n\t\t\t\t\t\t\t\t\treturn tmp;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn t;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t.join('')\n\t\t\t\t\t: '';\n\t\t\t}\n\t\t}\n\n\t\treturn { titleText, titleVariables: titleVariable };\n\t}\n\n\tprivate parseFooterComponent(dbFormattedTemplate: WhatsAppTemplate) {\n\t\tconst footerComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'FOOTER',\n\t\t);\n\n\t\treturn footerComponent?.text;\n\t}\n\n\tprivate parseButtonComponent(dbFormattedTemplate: WhatsAppTemplate) {\n\t\tconst res: {\n\t\t\tactionsType: ACTIONS_TYPES;\n\t\t\tquickReply: Array<QUICK_REPLY_BUTTON>;\n\t\t\tctaBtn: {\n\t\t\t\tphoneNumber?: {\n\t\t\t\t\tisChecked?: boolean;\n\t\t\t\t\tbtnText?: string;\n\t\t\t\t\tphoneNumber?: string;\n\t\t\t\t};\n\t\t\t\twebsiteLinkBtn?: {\n\t\t\t\t\tisChecked?: boolean;\n\t\t\t\t\tbtnText?: string;\n\t\t\t\t\tlinkOpens?: string;\n\t\t\t\t\tplaceholder?: string;\n\t\t\t\t};\n\t\t\t};\n\t\t\tallButtons: WhatsappPreviewButtonType[];\n\t\t} = {\n\t\t\tactionsType: ACTIONS_TYPES.NONE,\n\t\t\tquickReply: [],\n\t\t\tctaBtn: {\n\t\t\t\tphoneNumber: undefined,\n\t\t\t\twebsiteLinkBtn: undefined,\n\t\t\t},\n\t\t\tallButtons: [],\n\t\t};\n\n\t\tconst buttonComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'BUTTONS',\n\t\t);\n\n\t\tif (buttonComponent && buttonComponent?.buttons?.length) {\n\t\t\tconst actionsType =\n\t\t\t\tbuttonComponent?.buttons?.[0].type === 'QUICK_REPLY'\n\t\t\t\t\t? ACTIONS_TYPES.QUICK_REPLY\n\t\t\t\t\t: ACTIONS_TYPES.CTA_BTN;\n\n\t\t\tres.actionsType = actionsType;\n\n\t\t\tif (actionsType === ACTIONS_TYPES.QUICK_REPLY) {\n\t\t\t\tconst btnTexts = (buttonComponent?.buttons?.map((btn) => btn) ??\n\t\t\t\t\t[]) as QUICK_REPLY_BUTTON[];\n\t\t\t\tres.quickReply = btnTexts;\n\t\t\t} else if (actionsType === ACTIONS_TYPES.CTA_BTN) {\n\t\t\t\tbuttonComponent?.buttons?.forEach((btn) => {\n\t\t\t\t\tif (btn.phone_number) {\n\t\t\t\t\t\tres.ctaBtn.phoneNumber = {\n\t\t\t\t\t\t\tisChecked: true,\n\t\t\t\t\t\t\tbtnText: btn.text,\n\t\t\t\t\t\t\tphoneNumber: btn.phone_number,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tif (btn.url) {\n\t\t\t\t\t\tconst btnPlaceholder =\n\t\t\t\t\t\t\tdbFormattedTemplate?.mapping?.buttons?.[0] ?? undefined;\n\t\t\t\t\t\tlet customUrl = false;\n\n\t\t\t\t\t\tif (btnPlaceholder && editableVarPattern.test(btnPlaceholder)) {\n\t\t\t\t\t\t\tcustomUrl = true;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tres.ctaBtn.websiteLinkBtn = {\n\t\t\t\t\t\t\tisChecked: true,\n\t\t\t\t\t\t\tbtnText: btn.text,\n\t\t\t\t\t\t\tlinkOpens: customUrl ? btn.example?.[0] : btn.url,\n\t\t\t\t\t\t\tplaceholder: customUrl ? undefined : btnPlaceholder,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Parses buttons from template to a format preview can understand.\n\t\t\t// Since copy code does not come with a variable by default, we are adding placeholder from example.\n\t\t\tres.allButtons = buttonComponent.buttons?.map((button) => {\n\t\t\t\tif (button.type === 'COPY_CODE') {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...button,\n\t\t\t\t\t\tplaceholder: Array.isArray(button.example)\n\t\t\t\t\t\t\t? button.example[0]\n\t\t\t\t\t\t\t: button?.example || '',\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn button;\n\t\t\t}) as WhatsappPreviewButtonType[];\n\t\t}\n\n\t\treturn res;\n\t}\n\n\t/**\n\t * Parses LTO component to a format preview can understand.\n\t * Points to Note -\n\t * 1. Takes the Copy Code from previously parsed buttons.\n\t * 2. LTO component does not have a dateTime expiry by default. Hence, while sending template to ContextMapper, send with a date or current Date and Time is picked here.\n\t */\n\tprivate parseLimitedTimeOfferComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tallButtons: WhatsappPreviewButtonType[],\n\t) {\n\t\tconst limitedTimeOfferComponent: CreateTemplateType['limitedTimeOfferComponent'] =\n\t\t\t{\n\t\t\t\ttext: '',\n\t\t\t\tdateTime: '',\n\t\t\t\tcode: '',\n\t\t\t};\n\n\t\tdbFormattedTemplate.components.forEach((component) => {\n\t\t\tif (component.type === 'limited_time_offer') {\n\t\t\t\tlimitedTimeOfferComponent.text =\n\t\t\t\t\tcomponent.limited_time_offer?.text ?? '';\n\t\t\t\tconst dateTime = component.example?.limited_time_offer;\n\t\t\t\tif (dateTime && dateTime.startsWith('{{') && dateTime.endsWith('}}')) {\n\t\t\t\t\tlimitedTimeOfferComponent.dateTime = dateTime;\n\t\t\t\t} else {\n\t\t\t\t\tlimitedTimeOfferComponent.dateTime = format(\n\t\t\t\t\t\tdateTime ? new Date(dateTime) : new Date(),\n\t\t\t\t\t\t'MMM dd',\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tallButtons.forEach((button) => {\n\t\t\t\tif (button.type === 'COPY_CODE') {\n\t\t\t\t\tlimitedTimeOfferComponent.code = button.placeholder ?? '';\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn limitedTimeOfferComponent;\n\t}\n\n\tprivate parseCallPermissionComponent(dbFormattedTemplate: WhatsAppTemplate): {\n\t\tshowCallPermissionCard: boolean;\n\t\tcallPermissionText?: string;\n\t} {\n\t\tconst callPermissionComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => (component as any).type === 'CALL_PERMISSION_REQUEST',\n\t\t);\n\n\t\treturn {\n\t\t\tshowCallPermissionCard: Boolean(callPermissionComponent),\n\t\t\tcallPermissionText: (callPermissionComponent as any)?.text,\n\t\t};\n\t}\n\n\tasync parseUITemplateFromDBFormat(data: {\n\t\tdbFormattedTemplate: WhatsAppTemplate;\n\t\tisDuplicate?: boolean;\n\t\tshowSampleValues?: boolean;\n\t\tisV2?: boolean;\n\t\tpod?: string;\n\t}) {\n\t\tconst {\n\t\t\tdbFormattedTemplate,\n\t\t\tisDuplicate,\n\t\t\tisV2 = false,\n\t\t\tshowSampleValues,\n\t\t\tpod,\n\t\t} = data;\n\t\tconst {\n\t\t\theaderType,\n\t\t\theaderAssetLink,\n\t\t\theaderAssetName,\n\t\t\theaderText,\n\t\t\theaderVariables,\n\t\t} = await this.parseDataFromHeaderComponent(\n\t\t\tdbFormattedTemplate,\n\t\t\tundefined,\n\t\t\tpod,\n\t\t);\n\n\t\tconst { bodyText, bodyVariable: bodyVariables } =\n\t\t\tawait this.parseBodyComponent(\n\t\t\t\tdbFormattedTemplate,\n\t\t\t\tisV2,\n\t\t\t\tshowSampleValues,\n\t\t\t\tpod,\n\t\t\t);\n\t\tconst { titleText, titleVariables: titleVariables } =\n\t\t\tawait this.parseTitleComponent(\n\t\t\t\tdbFormattedTemplate,\n\t\t\t\tisV2,\n\t\t\t\tshowSampleValues,\n\t\t\t);\n\n\t\tconst { actionsType, quickReply, ctaBtn, allButtons } =\n\t\t\tawait this.parseButtonComponent(dbFormattedTemplate);\n\n\t\tconst limitedTimeOfferComponent = this.parseLimitedTimeOfferComponent(\n\t\t\tdbFormattedTemplate,\n\t\t\tallButtons,\n\t\t);\n\n\t\tconst { showCallPermissionCard, callPermissionText } =\n\t\t\tthis.parseCallPermissionComponent(dbFormattedTemplate);\n\n\t\tconst state: CreateTemplateType = {\n\t\t\tquickReply,\n\t\t\tctaBtn,\n\t\t\tallButtons,\n\t\t\tmeta: {\n\t\t\t\tname: isDuplicate\n\t\t\t\t\t? `${dbFormattedTemplate.label} Copy`\n\t\t\t\t\t: dbFormattedTemplate.label,\n\t\t\t\tcategory: dbFormattedTemplate.category?.toUpperCase(),\n\t\t\t\tsubCategory: dbFormattedTemplate.templateCategory,\n\t\t\t\tlanguage: dbFormattedTemplate.language,\n\t\t\t\ttemplateId: dbFormattedTemplate.templateId,\n\t\t\t},\n\t\t\terror: {\n\t\t\t\theader: undefined,\n\t\t\t\tbody: undefined,\n\t\t\t\tfooter: undefined,\n\t\t\t\tquickReply: undefined,\n\t\t\t\tmeta: undefined,\n\t\t\t\tctaBtn: undefined,\n\t\t\t},\n\n\t\t\tactionsType,\n\t\t\tfooterText: this.parseFooterComponent(dbFormattedTemplate),\n\t\t\t/** BODY TEXT */\n\t\t\tbodyVariables,\n\t\t\tbodyText,\n\n\t\t\t/** HEADER */\n\t\t\theaderType,\n\t\t\theaderAssetLink,\n\t\t\theaderAssetName,\n\t\t\theaderText,\n\t\t\theaderVariables,\n\t\t\talreadyAsADraft: dbFormattedTemplate.isDraft,\n\t\t\tmode: 'edit',\n\t\t\tinitialLoading: false,\n\t\t\t/* LIMITED TIME OFFER */\n\t\t\tlimitedTimeOfferComponent,\n\t\t\t/* Title for RCS */\n\t\t\ttitleText,\n\t\t\ttitleVariables,\n\t\t\t/* Call Permission */\n\t\t\tshowCallPermissionCard,\n\t\t\tcallPermissionText,\n\t\t};\n\n\t\tconst { errors } = this.validateState(state);\n\n\t\tstate.error = errors;\n\n\t\treturn state;\n\t}\n\n\tparseTemplateConfiguration(template: RCSTemplateType): RCSTemplateConfig {\n\t\tlet config: RCSTemplateConfig;\n\t\tconst templateConfig = template?.content || ({} as RCSTemplateConfig);\n\t\tif (typeof templateConfig === 'string') {\n\t\t\ttry {\n\t\t\t\tconfig = JSON.parse(templateConfig) as RCSTemplateConfig;\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error parsing rcsTemplate component JSON:', error);\n\t\t\t\tconfig = { orientation: 'VERTICAL' } as RCSTemplateConfig;\n\t\t\t}\n\t\t} else {\n\t\t\tconfig = templateConfig;\n\t\t}\n\t\treturn {\n\t\t\t...config,\n\t\t\ttemplateType: template?.templateType as RCS_TEMPLATE_TYPE,\n\t\t};\n\t}\n}\n"],"names":["TemplateCreatorHelper","dbFormattedTemplate","showSampleValues","pod","res","HEADER_TYPES","headerComponent","component","sampleValue","headerVarPlaceholder","originalVariable","normalizedName","editable","isChatbotCustomText","POD","reduxHeaderVar","state","emojiRegex","status","errors","templateHelperUtils","TemplateHelperUtils","isScrolled","scrollByElementId","elementId","NAME_LEN_LIMIT","NAME_LEN_ERROR","specialCharPattern","NO_SPECIAL_CHAR","REQUIRED_FIELD","CREATE_TEMPLATE_DOM_IDS","text","HEADER_TEXT_LEN_LIMIT","HEADER_LEN_ERROR","variableList","ONE_VAR_ALLOWED","HEADER_ASSET_LINK_ERROR","BODY_TEXT_LEN_LIMIT","BODY_LEN_ERROR","ACTIONS_TYPES","btnText","phoneNumber","QUICK_REPLY_BTN_TEXT_LIMIT","QUICK_REPLY_LEN_ERROR","BUTTON_EMOJI_ERROR","VALID_PHONE_NUMBER","customLink","placeholder","quickReplyErrors","button","i","QUICK_REPLY_NAME_LEN_LIMIT","buttons","el","QUICK_REPLY_NAME_ERROR","qrbErrorAcc","currentError","isV2","bodyVariable","bodyText","bodyComponent","bodyVarPlaceholder","matchedPlaceholderName","placeHolderNamePattern","t","normalizeName","COLORS","titleVariable","titleText","buttonComponent","actionsType","btnTexts","btn","btnPlaceholder","customUrl","editableVarPattern","allButtons","limitedTimeOfferComponent","dateTime","format","callPermissionComponent","data","isDuplicate","headerType","headerAssetLink","headerAssetName","headerText","headerVariables","bodyVariables","titleVariables","quickReply","ctaBtn","showCallPermissionCard","callPermissionText","template","config","templateConfig","error"],"mappings":"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"}
+{"version":3,"file":"TemplateCreatorHelper.js","sources":["../../../../../src/components/template-preview/helpers/TemplateCreatorHelper.ts"],"sourcesContent":["import { format } from 'date-fns';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\teditableVarPattern,\n\tplaceHolderNamePattern,\n\tspecialCharPattern,\n} from '../constants/regexPatterns';\nimport {\n\tBODY_LEN_ERROR,\n\tBODY_TEXT_LEN_LIMIT,\n\tBUTTON_EMOJI_ERROR,\n\tCREATE_TEMPLATE_DOM_IDS,\n\tHEADER_ASSET_LINK_ERROR,\n\tHEADER_LEN_ERROR,\n\tHEADER_TEXT_LEN_LIMIT,\n\tNAME_LEN_ERROR,\n\tNAME_LEN_LIMIT,\n\tNO_SPECIAL_CHAR,\n\tONE_VAR_ALLOWED,\n\tQUICK_REPLY_BTN_TEXT_LIMIT,\n\tQUICK_REPLY_LEN_ERROR,\n\tQUICK_REPLY_NAME_ERROR,\n\tQUICK_REPLY_NAME_LEN_LIMIT,\n\tREQUIRED_FIELD,\n\tVALID_PHONE_NUMBER,\n} from '../constants/TemplateConstants';\nimport {\n\tRCS_TEMPLATE_TYPE,\n\tRCSTemplateConfig,\n\tRCSTemplateType,\n} from '../models/RCSTemplate';\nimport {\n\tACTIONS_TYPES,\n\tHEADER_TYPES,\n\tQUICK_REPLY_BUTTON,\n} from '../models/TemplateMeta';\nimport {\n\tCreateTemplateType,\n\tPOD,\n\ttemplateVariable,\n\tWhatsappPreviewButtonType,\n\tWhatsAppTemplate,\n} from '../models/WhatsAppTemplate';\nimport { TemplateHelperUtils } from '../utils/TemplateHelperUtils';\n\nexport class TemplateCreatorHelper {\n\tprivate parseDataFromHeaderComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tshowSampleValues?: boolean,\n\t\tpod?: string,\n\t) {\n\t\tconst res: {\n\t\t\theaderType: HEADER_TYPES;\n\t\t\theaderAssetLink?: string;\n\t\t\theaderAssetName?: string;\n\t\t\theaderText?: string;\n\t\t\theaderVariables: templateVariable[];\n\t\t} = {\n\t\t\theaderType: HEADER_TYPES.NONE,\n\t\t\theaderVariables: [],\n\t\t};\n\n\t\tconst headerComponent = dbFormattedTemplate?.components?.find(\n\t\t\t(component) => component.type === 'HEADER',\n\t\t);\n\n\t\tif (headerComponent) {\n\t\t\tres.headerType = headerComponent.format as HEADER_TYPES;\n\t\t\tres.headerText = headerComponent.text;\n\n\t\t\tres.headerAssetLink = headerComponent.example?.header_handle?.[0];\n\n\t\t\tconst sampleValue = headerComponent.example?.header_text?.[0];\n\t\t\tconst headerVarPlaceholder = dbFormattedTemplate.mapping?.header?.[0];\n\t\t\tconst originalVariable = headerVarPlaceholder;\n\t\t\tif (headerVarPlaceholder) {\n\t\t\t\tconst normalizedName = headerVarPlaceholder\n\t\t\t\t\t?.replace('[[', '')\n\t\t\t\t\t.replace(']]', '')\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t.replace('))', '');\n\t\t\t\tconst editable = /\\(\\(/.test(headerVarPlaceholder);\n\t\t\t\tconst isChatbotCustomText =\n\t\t\t\t\tpod === POD.CHATBOT &&\n\t\t\t\t\toriginalVariable &&\n\t\t\t\t\toriginalVariable?.startsWith('((') &&\n\t\t\t\t\toriginalVariable?.endsWith('))');\n\n\t\t\t\tconst reduxHeaderVar: templateVariable = {\n\t\t\t\t\tidx: 0,\n\t\t\t\t\tvariableVal:\n\t\t\t\t\t\tshowSampleValues || isChatbotCustomText\n\t\t\t\t\t\t\t? sampleValue\n\t\t\t\t\t\t\t: originalVariable,\n\t\t\t\t\teditable,\n\t\t\t\t\teditableDefaultValues: editable ? undefined : sampleValue,\n\t\t\t\t\tvariableName: normalizedName,\n\t\t\t\t};\n\t\t\t\tres.headerVariables = [reduxHeaderVar];\n\t\t\t\tif (headerComponent.example?.header_text?.length) {\n\t\t\t\t\tres.headerText = res.headerText?.replace(\n\t\t\t\t\t\t/** since there will be only one variable in template so hard replace */\n\t\t\t\t\t\t'{{1}}',\n\t\t\t\t\t\t`{{${normalizedName}}}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn res;\n\t}\n\n\t/**\n\t * Check if current template state is ready for saving as a draft/submit-template or not\n\t * @param state\n\t */\n\tvalidateState(state: CreateTemplateType): {\n\t\tstatus: 'invalid' | 'valid';\n\t\terrors: CreateTemplateType['error'];\n\t} {\n\t\tconst emojiRegex = /\\p{Extended_Pictographic}/u;\n\t\tlet status: 'invalid' | 'valid' = 'valid';\n\t\tconst errors: CreateTemplateType['error'] = {\n\t\t\tmeta: {},\n\t\t\tctaBtn: {\n\t\t\t\tphoneNumber: { btnText: '', link: '' },\n\t\t\t\twebsiteLink: { btnText: '', link: '' },\n\t\t\t},\n\t\t\tquickReply: [null, null, null],\n\t\t};\n\t\tconst templateHelperUtils = new TemplateHelperUtils();\n\t\tlet isScrolled = false;\n\n\t\tconst scrollByElementId = (elementId: string) => {\n\t\t\tdocument.getElementById(elementId)?.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t});\n\t\t};\n\n\t\tif (!state.meta?.name) {\n\t\t\terrors.meta!.name = REQUIRED_FIELD;\n\t\t\tstatus = 'invalid';\n\t\t} else if (state.meta.name?.trim().length > NAME_LEN_LIMIT) {\n\t\t\terrors.meta!.name = NAME_LEN_ERROR;\n\t\t\tstatus = 'invalid';\n\t\t} else if (specialCharPattern.test(state.meta.name?.trim())) {\n\t\t\terrors.meta!.name = NO_SPECIAL_CHAR;\n\t\t\tstatus = 'invalid';\n\t\t}\n\n\t\tif (!!errors.meta!.name && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.name);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (state.headerType === HEADER_TYPES.TEXT) {\n\t\t\tconst text = state.headerText?.trim() ?? '';\n\t\t\tif (!text) {\n\t\t\t\terrors.header = REQUIRED_FIELD;\n\t\t\t\tstatus = 'invalid';\n\t\t\t} else if (text.length > HEADER_TEXT_LEN_LIMIT) {\n\t\t\t\terrors.header = HEADER_LEN_ERROR;\n\t\t\t\tstatus = 'invalid';\n\t\t\t} else {\n\t\t\t\tconst variableList =\n\t\t\t\t\ttemplateHelperUtils.getTemplateVariablesFromState(text);\n\t\t\t\tif (variableList && variableList.length > 1) {\n\t\t\t\t\terrors.header = ONE_VAR_ALLOWED;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (state.headerType === HEADER_TYPES.DOCUMENT) {\n\t\t\t/** @todo add media header validations */\n\t\t} else if (state.headerType === HEADER_TYPES.IMAGE) {\n\t\t\t/** @todo add media header validations */\n\t\t} else if (state.headerType === HEADER_TYPES.VIDEO) {\n\t\t\t/** @todo add media header validations */\n\t\t}\n\n\t\tif (\n\t\t\tstate.headerType === HEADER_TYPES.DOCUMENT ||\n\t\t\tstate.headerType === HEADER_TYPES.IMAGE ||\n\t\t\tstate.headerType === HEADER_TYPES.VIDEO\n\t\t) {\n\t\t\tif (!state.headerAssetLink) {\n\t\t\t\terrors.header = HEADER_ASSET_LINK_ERROR;\n\t\t\t\tstatus = 'invalid';\n\t\t\t}\n\t\t}\n\n\t\tif (!!errors.header && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.header);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (!state.bodyText) {\n\t\t\terrors.body = REQUIRED_FIELD;\n\t\t\tstatus = 'invalid';\n\t\t} else {\n\t\t\tif (\n\t\t\t\tstate.bodyTextRaw &&\n\t\t\t\tstate.bodyTextRaw?.trim().length > BODY_TEXT_LEN_LIMIT\n\t\t\t) {\n\t\t\t\terrors.body = BODY_LEN_ERROR;\n\t\t\t\tstatus = 'invalid';\n\t\t\t}\n\t\t}\n\n\t\tif (!!errors.body && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.body);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (state.footerText && state.footerText.length > HEADER_TEXT_LEN_LIMIT) {\n\t\t\terrors.footer = HEADER_LEN_ERROR;\n\t\t\tstatus = 'invalid';\n\t\t}\n\n\t\tif (!!errors?.footer && !isScrolled) {\n\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.footer);\n\t\t\tisScrolled = true;\n\t\t}\n\n\t\tif (state.actionsType === ACTIONS_TYPES.CTA_BTN) {\n\t\t\tif (state.ctaBtn?.phoneNumber?.isChecked) {\n\t\t\t\tconst btnText = state.ctaBtn.phoneNumber.btnText?.trim();\n\t\t\t\tconst phoneNumber = state.ctaBtn.phoneNumber.phoneNumber;\n\n\t\t\t\tif (errors.ctaBtn && !btnText) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.btnText = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (\n\t\t\t\t\terrors.ctaBtn &&\n\t\t\t\t\tbtnText &&\n\t\t\t\t\tbtnText.length > QUICK_REPLY_BTN_TEXT_LIMIT\n\t\t\t\t) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.btnText = QUICK_REPLY_LEN_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (errors.ctaBtn && btnText && emojiRegex.test(btnText)) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.btnText = BUTTON_EMOJI_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\n\t\t\t\tif (errors.ctaBtn && !phoneNumber) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.link = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (errors.ctaBtn && phoneNumber && phoneNumber.length < 10) {\n\t\t\t\t\terrors.ctaBtn.phoneNumber.link = VALID_PHONE_NUMBER;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (state.ctaBtn?.websiteLinkBtn?.isChecked) {\n\t\t\t\tconst btnText = state.ctaBtn.websiteLinkBtn.btnText?.trim();\n\t\t\t\tconst customLink = state.ctaBtn.websiteLinkBtn.linkOpens?.trim();\n\t\t\t\tconst placeholder = state.ctaBtn.websiteLinkBtn.placeholder?.trim();\n\n\t\t\t\tif (errors.ctaBtn && !btnText) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.btnText = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (\n\t\t\t\t\terrors.ctaBtn &&\n\t\t\t\t\tbtnText &&\n\t\t\t\t\tbtnText.length > QUICK_REPLY_BTN_TEXT_LIMIT\n\t\t\t\t) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.btnText = QUICK_REPLY_LEN_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (errors.ctaBtn && btnText && emojiRegex.test(btnText)) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.btnText = BUTTON_EMOJI_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\n\t\t\t\tif (errors.ctaBtn && !customLink && !placeholder) {\n\t\t\t\t\terrors.ctaBtn.websiteLink.link = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (state.actionsType === ACTIONS_TYPES.QUICK_REPLY) {\n\t\t\tconst quickReplyErrors = ['', '', ''];\n\t\t\tstate.quickReply.forEach((button, i) => {\n\t\t\t\tconst text = button.text?.trim();\n\t\t\t\tif (!text) {\n\t\t\t\t\tquickReplyErrors[i] = REQUIRED_FIELD;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (text.length > QUICK_REPLY_NAME_LEN_LIMIT) {\n\t\t\t\t\tquickReplyErrors[i] = QUICK_REPLY_LEN_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else if (emojiRegex.test(text)) {\n\t\t\t\t\tquickReplyErrors[i] = BUTTON_EMOJI_ERROR;\n\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t} else {\n\t\t\t\t\tconst buttons = [...state.quickReply];\n\t\t\t\t\tbuttons.splice(i, 1);\n\t\t\t\t\tconst exists = buttons.find(\n\t\t\t\t\t\t(el: QUICK_REPLY_BUTTON) => el.text === text,\n\t\t\t\t\t);\n\t\t\t\t\tif (exists) {\n\t\t\t\t\t\tquickReplyErrors[i] = QUICK_REPLY_NAME_ERROR;\n\t\t\t\t\t\tstatus = 'invalid';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\terrors.quickReply = quickReplyErrors;\n\t\t}\n\n\t\tif (\n\t\t\tstate.actionsType === ACTIONS_TYPES.CTA_BTN ||\n\t\t\tstate.actionsType === ACTIONS_TYPES.QUICK_REPLY\n\t\t) {\n\t\t\tconst quickReplyErrors = errors.quickReply?.reduce(\n\t\t\t\t(qrbErrorAcc, currentError) => qrbErrorAcc || !!currentError,\n\t\t\t\tfalse,\n\t\t\t);\n\t\t\tif (\n\t\t\t\t(!!errors?.ctaBtn?.websiteLink?.link ||\n\t\t\t\t\t!!errors.ctaBtn?.websiteLink?.btnText ||\n\t\t\t\t\t!!errors.ctaBtn?.phoneNumber?.link ||\n\t\t\t\t\t!!errors.ctaBtn?.phoneNumber?.btnText ||\n\t\t\t\t\t!!quickReplyErrors) &&\n\t\t\t\t!isScrolled\n\t\t\t) {\n\t\t\t\tscrollByElementId(CREATE_TEMPLATE_DOM_IDS.actionButtons);\n\t\t\t\tisScrolled = true;\n\t\t\t}\n\t\t}\n\n\t\treturn { status, errors };\n\t}\n\n\tprivate parseBodyComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tisV2 = false,\n\t\tshowSampleValues?: boolean,\n\t\tpod?: string,\n\t) {\n\t\tconst bodyVariable: templateVariable[] = [];\n\t\tlet bodyText = '';\n\n\t\tconst bodyComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'BODY',\n\t\t);\n\n\t\tif (bodyComponent) {\n\t\t\tbodyComponent.example?.body_text?.[0]?.forEach((sampleValue, i) => {\n\t\t\t\tlet bodyVarPlaceholder = dbFormattedTemplate.mapping?.body?.[i];\n\t\t\t\tconst originalVariable = bodyVarPlaceholder;\n\t\t\t\tconst editable = bodyVarPlaceholder && /\\(\\(/.test(bodyVarPlaceholder);\n\t\t\t\tconst matchedPlaceholderName = bodyVarPlaceholder?.match(\n\t\t\t\t\tplaceHolderNamePattern,\n\t\t\t\t);\n\n\t\t\t\tif (matchedPlaceholderName?.[2]) {\n\t\t\t\t\tbodyVarPlaceholder = matchedPlaceholderName?.[2];\n\t\t\t\t}\n\n\t\t\t\tconst isChatbotCustomText =\n\t\t\t\t\tpod === POD.CHATBOT &&\n\t\t\t\t\toriginalVariable &&\n\t\t\t\t\toriginalVariable?.startsWith('((') &&\n\t\t\t\t\toriginalVariable?.endsWith('))');\n\n\t\t\t\tbodyVariable.push({\n\t\t\t\t\tidx: i,\n\t\t\t\t\tvariableVal:\n\t\t\t\t\t\tshowSampleValues || isChatbotCustomText\n\t\t\t\t\t\t\t? sampleValue\n\t\t\t\t\t\t\t: originalVariable,\n\t\t\t\t\teditable: !!editable,\n\t\t\t\t\teditableDefaultValues: editable ? undefined : sampleValue,\n\t\t\t\t\tvariableName: bodyVarPlaceholder ?? '',\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tif (dbFormattedTemplate.htmlContentUrl) {\n\t\t\t\tbodyText = dbFormattedTemplate.htmlContentUrl;\n\t\t\t} else {\n\t\t\t\tbodyText = bodyComponent.text?.split(/\\{\\{[0-9]+\\}\\}/).length\n\t\t\t\t\t? bodyComponent.text\n\t\t\t\t\t\t\t?.split(/\\{\\{[0-9]+\\}\\}/)\n\t\t\t\t\t\t\t.map((t, i) => {\n\t\t\t\t\t\t\t\tif (bodyVariable?.[i]) {\n\t\t\t\t\t\t\t\t\tconst normalizeName = bodyVariable[i].variableName;\n\t\t\t\t\t\t\t\t\tconst tmp = isV2\n\t\t\t\t\t\t\t\t\t\t? `${t}{{${normalizeName}}}`\n\t\t\t\t\t\t\t\t\t\t: `${t} <span> </span><span  style=\"color: ${COLORS.content.brand}; text-decoration: underline;\">{{${normalizeName}}}</span><span> </span>`;\n\n\t\t\t\t\t\t\t\t\treturn tmp;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn t;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t.join('')\n\t\t\t\t\t: '';\n\t\t\t}\n\t\t}\n\n\t\treturn { bodyVariable, bodyText };\n\t}\n\n\tprivate parseTitleComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tisV2 = false,\n\t\tshowSampleValues?: boolean,\n\t) {\n\t\tconst titleVariable: templateVariable[] = [];\n\t\tlet titleText = '';\n\n\t\tconst bodyComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'TITLE',\n\t\t);\n\n\t\tif (bodyComponent) {\n\t\t\tbodyComponent.example?.title_text?.[0]?.forEach((sampleValue, i) => {\n\t\t\t\tlet bodyVarPlaceholder = dbFormattedTemplate.mapping?.body?.[i];\n\t\t\t\tconst originalVariable = bodyVarPlaceholder;\n\t\t\t\tconst editable = bodyVarPlaceholder && /\\(\\(/.test(bodyVarPlaceholder);\n\t\t\t\tconst matchedPlaceholderName = bodyVarPlaceholder?.match(\n\t\t\t\t\tplaceHolderNamePattern,\n\t\t\t\t);\n\n\t\t\t\tif (matchedPlaceholderName?.[2]) {\n\t\t\t\t\tbodyVarPlaceholder = matchedPlaceholderName?.[2];\n\t\t\t\t}\n\n\t\t\t\ttitleVariable.push({\n\t\t\t\t\tidx: i,\n\t\t\t\t\tvariableVal: showSampleValues ? sampleValue : originalVariable,\n\t\t\t\t\teditable: !!editable,\n\t\t\t\t\teditableDefaultValues: editable ? undefined : sampleValue,\n\t\t\t\t\tvariableName: bodyVarPlaceholder ?? '',\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tif (dbFormattedTemplate.htmlContentUrl) {\n\t\t\t\ttitleText = dbFormattedTemplate.htmlContentUrl;\n\t\t\t} else {\n\t\t\t\ttitleText = bodyComponent.text?.split(/\\{\\{[0-9]+\\}\\}/).length\n\t\t\t\t\t? bodyComponent.text\n\t\t\t\t\t\t\t?.split(/\\{\\{[0-9]+\\}\\}/)\n\t\t\t\t\t\t\t.map((t, i) => {\n\t\t\t\t\t\t\t\tif (titleVariable?.[i]) {\n\t\t\t\t\t\t\t\t\tconst normalizeName = titleVariable[i].variableName;\n\t\t\t\t\t\t\t\t\tconst tmp = isV2\n\t\t\t\t\t\t\t\t\t\t? `${t}{{${normalizeName}}}`\n\t\t\t\t\t\t\t\t\t\t: `${t} <span> </span><span  style=\"color: ${COLORS.content.brand}; text-decoration: underline;\">{{${normalizeName}}}</span><span> </span>`;\n\n\t\t\t\t\t\t\t\t\treturn tmp;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn t;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t.join('')\n\t\t\t\t\t: '';\n\t\t\t}\n\t\t}\n\n\t\treturn { titleText, titleVariables: titleVariable };\n\t}\n\n\tprivate parseFooterComponent(dbFormattedTemplate: WhatsAppTemplate) {\n\t\tconst footerComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'FOOTER',\n\t\t);\n\n\t\treturn footerComponent?.text;\n\t}\n\n\tprivate parseButtonComponent(dbFormattedTemplate: WhatsAppTemplate) {\n\t\tconst res: {\n\t\t\tactionsType: ACTIONS_TYPES;\n\t\t\tquickReply: Array<QUICK_REPLY_BUTTON>;\n\t\t\tctaBtn: {\n\t\t\t\tphoneNumber?: {\n\t\t\t\t\tisChecked?: boolean;\n\t\t\t\t\tbtnText?: string;\n\t\t\t\t\tphoneNumber?: string;\n\t\t\t\t};\n\t\t\t\twebsiteLinkBtn?: {\n\t\t\t\t\tisChecked?: boolean;\n\t\t\t\t\tbtnText?: string;\n\t\t\t\t\tlinkOpens?: string;\n\t\t\t\t\tplaceholder?: string;\n\t\t\t\t};\n\t\t\t};\n\t\t\tallButtons: WhatsappPreviewButtonType[];\n\t\t} = {\n\t\t\tactionsType: ACTIONS_TYPES.NONE,\n\t\t\tquickReply: [],\n\t\t\tctaBtn: {\n\t\t\t\tphoneNumber: undefined,\n\t\t\t\twebsiteLinkBtn: undefined,\n\t\t\t},\n\t\t\tallButtons: [],\n\t\t};\n\n\t\tconst buttonComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => component.type === 'BUTTONS',\n\t\t);\n\n\t\tif (buttonComponent && buttonComponent?.buttons?.length) {\n\t\t\tconst actionsType =\n\t\t\t\tbuttonComponent?.buttons?.[0].type === 'QUICK_REPLY'\n\t\t\t\t\t? ACTIONS_TYPES.QUICK_REPLY\n\t\t\t\t\t: ACTIONS_TYPES.CTA_BTN;\n\n\t\t\tres.actionsType = actionsType;\n\n\t\t\tif (actionsType === ACTIONS_TYPES.QUICK_REPLY) {\n\t\t\t\tconst btnTexts = (buttonComponent?.buttons?.map((btn) => btn) ??\n\t\t\t\t\t[]) as QUICK_REPLY_BUTTON[];\n\t\t\t\tres.quickReply = btnTexts;\n\t\t\t} else if (actionsType === ACTIONS_TYPES.CTA_BTN) {\n\t\t\t\tbuttonComponent?.buttons?.forEach((btn) => {\n\t\t\t\t\tif (btn.phone_number) {\n\t\t\t\t\t\tres.ctaBtn.phoneNumber = {\n\t\t\t\t\t\t\tisChecked: true,\n\t\t\t\t\t\t\tbtnText: btn.text,\n\t\t\t\t\t\t\tphoneNumber: btn.phone_number,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tif (btn.url) {\n\t\t\t\t\t\tconst btnPlaceholder =\n\t\t\t\t\t\t\tdbFormattedTemplate?.mapping?.buttons?.[0] ?? undefined;\n\t\t\t\t\t\tlet customUrl = false;\n\n\t\t\t\t\t\tif (btnPlaceholder && editableVarPattern.test(btnPlaceholder)) {\n\t\t\t\t\t\t\tcustomUrl = true;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tres.ctaBtn.websiteLinkBtn = {\n\t\t\t\t\t\t\tisChecked: true,\n\t\t\t\t\t\t\tbtnText: btn.text,\n\t\t\t\t\t\t\tlinkOpens: customUrl ? btn.example?.[0] : btn.url,\n\t\t\t\t\t\t\tplaceholder: customUrl ? undefined : btnPlaceholder,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Parses buttons from template to a format preview can understand.\n\t\t\t// Since copy code does not come with a variable by default, we are adding placeholder from example.\n\t\t\tres.allButtons = buttonComponent.buttons?.map((button) => {\n\t\t\t\tif (button.type === 'COPY_CODE') {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...button,\n\t\t\t\t\t\tplaceholder: Array.isArray(button.example)\n\t\t\t\t\t\t\t? button.example[0]\n\t\t\t\t\t\t\t: button?.example || '',\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn button;\n\t\t\t}) as WhatsappPreviewButtonType[];\n\t\t}\n\n\t\treturn res;\n\t}\n\n\t/**\n\t * Parses LTO component to a format preview can understand.\n\t * Points to Note -\n\t * 1. Takes the Copy Code from previously parsed buttons.\n\t * 2. LTO component does not have a dateTime expiry by default. Hence, while sending template to ContextMapper, send with a date or current Date and Time is picked here.\n\t */\n\tprivate parseLimitedTimeOfferComponent(\n\t\tdbFormattedTemplate: WhatsAppTemplate,\n\t\tallButtons: WhatsappPreviewButtonType[],\n\t) {\n\t\tconst limitedTimeOfferComponent: CreateTemplateType['limitedTimeOfferComponent'] =\n\t\t\t{\n\t\t\t\ttext: '',\n\t\t\t\tdateTime: '',\n\t\t\t\tcode: '',\n\t\t\t};\n\n\t\tdbFormattedTemplate.components.forEach((component) => {\n\t\t\tif (component.type === 'limited_time_offer') {\n\t\t\t\tlimitedTimeOfferComponent.text =\n\t\t\t\t\tcomponent.limited_time_offer?.text ?? '';\n\t\t\t\tconst dateTime = component.example?.limited_time_offer;\n\t\t\t\tif (dateTime && dateTime.startsWith('{{') && dateTime.endsWith('}}')) {\n\t\t\t\t\tlimitedTimeOfferComponent.dateTime = dateTime;\n\t\t\t\t} else {\n\t\t\t\t\tlimitedTimeOfferComponent.dateTime = format(\n\t\t\t\t\t\tdateTime ? new Date(dateTime) : new Date(),\n\t\t\t\t\t\t'MMM dd',\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tallButtons.forEach((button) => {\n\t\t\t\tif (button.type === 'COPY_CODE') {\n\t\t\t\t\tlimitedTimeOfferComponent.code = button.placeholder ?? '';\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn limitedTimeOfferComponent;\n\t}\n\n\tprivate parseCallPermissionComponent(dbFormattedTemplate: WhatsAppTemplate): {\n\t\tshowCallPermissionCard: boolean;\n\t\tcallPermissionText?: string;\n\t} {\n\t\tconst callPermissionComponent = dbFormattedTemplate.components?.find(\n\t\t\t(component) => (component as any).type === 'CALL_PERMISSION_REQUEST',\n\t\t);\n\n\t\treturn {\n\t\t\tshowCallPermissionCard: Boolean(callPermissionComponent),\n\t\t\tcallPermissionText: (callPermissionComponent as any)?.text,\n\t\t};\n\t}\n\n\tasync parseUITemplateFromDBFormat(data: {\n\t\tdbFormattedTemplate: WhatsAppTemplate;\n\t\tisDuplicate?: boolean;\n\t\tshowSampleValues?: boolean;\n\t\tisV2?: boolean;\n\t\tpod?: string;\n\t}) {\n\t\tconst {\n\t\t\tdbFormattedTemplate,\n\t\t\tisDuplicate,\n\t\t\tisV2 = false,\n\t\t\tshowSampleValues,\n\t\t\tpod,\n\t\t} = data;\n\t\tconst {\n\t\t\theaderType,\n\t\t\theaderAssetLink,\n\t\t\theaderAssetName,\n\t\t\theaderText,\n\t\t\theaderVariables,\n\t\t} = await this.parseDataFromHeaderComponent(\n\t\t\tdbFormattedTemplate,\n\t\t\tundefined,\n\t\t\tpod,\n\t\t);\n\n\t\tconst { bodyText, bodyVariable: bodyVariables } =\n\t\t\tawait this.parseBodyComponent(\n\t\t\t\tdbFormattedTemplate,\n\t\t\t\tisV2,\n\t\t\t\tshowSampleValues,\n\t\t\t\tpod,\n\t\t\t);\n\t\tconst { titleText, titleVariables: titleVariables } =\n\t\t\tawait this.parseTitleComponent(\n\t\t\t\tdbFormattedTemplate,\n\t\t\t\tisV2,\n\t\t\t\tshowSampleValues,\n\t\t\t);\n\n\t\tconst { actionsType, quickReply, ctaBtn, allButtons } =\n\t\t\tawait this.parseButtonComponent(dbFormattedTemplate);\n\n\t\tconst limitedTimeOfferComponent = this.parseLimitedTimeOfferComponent(\n\t\t\tdbFormattedTemplate,\n\t\t\tallButtons,\n\t\t);\n\n\t\tconst { showCallPermissionCard, callPermissionText } =\n\t\t\tthis.parseCallPermissionComponent(dbFormattedTemplate);\n\n\t\tconst state: CreateTemplateType = {\n\t\t\tquickReply,\n\t\t\tctaBtn,\n\t\t\tallButtons,\n\t\t\tmeta: {\n\t\t\t\tname: isDuplicate\n\t\t\t\t\t? `${dbFormattedTemplate.label} Copy`\n\t\t\t\t\t: dbFormattedTemplate.label,\n\t\t\t\tcategory: dbFormattedTemplate.category?.toUpperCase(),\n\t\t\t\tsubCategory: dbFormattedTemplate.templateCategory,\n\t\t\t\tlanguage: dbFormattedTemplate.language,\n\t\t\t\ttemplateId: dbFormattedTemplate.templateId,\n\t\t\t},\n\t\t\terror: {\n\t\t\t\theader: undefined,\n\t\t\t\tbody: undefined,\n\t\t\t\tfooter: undefined,\n\t\t\t\tquickReply: undefined,\n\t\t\t\tmeta: undefined,\n\t\t\t\tctaBtn: undefined,\n\t\t\t},\n\n\t\t\tactionsType,\n\t\t\tfooterText: this.parseFooterComponent(dbFormattedTemplate),\n\t\t\t/** BODY TEXT */\n\t\t\tbodyVariables,\n\t\t\tbodyText,\n\n\t\t\t/** HEADER */\n\t\t\theaderType,\n\t\t\theaderAssetLink,\n\t\t\theaderAssetName,\n\t\t\theaderText,\n\t\t\theaderVariables,\n\t\t\talreadyAsADraft: dbFormattedTemplate.isDraft,\n\t\t\tmode: 'edit',\n\t\t\tinitialLoading: false,\n\t\t\t/* LIMITED TIME OFFER */\n\t\t\tlimitedTimeOfferComponent,\n\t\t\t/* Title for RCS */\n\t\t\ttitleText,\n\t\t\ttitleVariables,\n\t\t\t/* Call Permission */\n\t\t\tshowCallPermissionCard,\n\t\t\tcallPermissionText,\n\t\t};\n\n\t\tconst { errors } = this.validateState(state);\n\n\t\tstate.error = errors;\n\n\t\treturn state;\n\t}\n\n\tparseTemplateConfiguration(template: RCSTemplateType): RCSTemplateConfig {\n\t\tlet config: RCSTemplateConfig;\n\t\tconst templateConfig = template?.content || ({} as RCSTemplateConfig);\n\t\tif (typeof templateConfig === 'string') {\n\t\t\ttry {\n\t\t\t\tconfig = JSON.parse(templateConfig) as RCSTemplateConfig;\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error parsing rcsTemplate component JSON:', error);\n\t\t\t\tconfig = { orientation: 'VERTICAL' } as RCSTemplateConfig;\n\t\t\t}\n\t\t} else {\n\t\t\tconfig = templateConfig;\n\t\t}\n\t\treturn {\n\t\t\t...config,\n\t\t\ttemplateType: template?.templateType as RCS_TEMPLATE_TYPE,\n\t\t\tisMediaAfterBody: this.isRcsMediaAfterBody(template),\n\t\t};\n\t}\n\n\t/**\n\t * Determines, from the original `components[]` order, whether a non-TEXT\n\t * media header appears AFTER the body component. The library preview\n\t * otherwise always renders the media first; honouring this keeps\n\t * body-then-media templates (the third-party ordering for some\n\t * `text_message_with_media` templates) correct in the preview.\n\t */\n\tisRcsMediaAfterBody(template: RCSTemplateType): boolean {\n\t\tconst components = template?.components;\n\t\tif (!Array.isArray(components)) return false;\n\n\t\tconst mediaHeaderIndex = components.findIndex(\n\t\t\t(component) =>\n\t\t\t\tcomponent.type === 'HEADER' &&\n\t\t\t\t!!component.format &&\n\t\t\t\tcomponent.format !== HEADER_TYPES.TEXT,\n\t\t);\n\t\tconst bodyIndex = components.findIndex(\n\t\t\t(component) => component.type === 'BODY',\n\t\t);\n\n\t\treturn (\n\t\t\tmediaHeaderIndex > -1 && bodyIndex > -1 && mediaHeaderIndex > bodyIndex\n\t\t);\n\t}\n}\n"],"names":["TemplateCreatorHelper","dbFormattedTemplate","showSampleValues","pod","res","HEADER_TYPES","headerComponent","component","sampleValue","headerVarPlaceholder","originalVariable","normalizedName","editable","isChatbotCustomText","POD","reduxHeaderVar","state","emojiRegex","status","errors","templateHelperUtils","TemplateHelperUtils","isScrolled","scrollByElementId","elementId","NAME_LEN_LIMIT","NAME_LEN_ERROR","specialCharPattern","NO_SPECIAL_CHAR","REQUIRED_FIELD","CREATE_TEMPLATE_DOM_IDS","text","HEADER_TEXT_LEN_LIMIT","HEADER_LEN_ERROR","variableList","ONE_VAR_ALLOWED","HEADER_ASSET_LINK_ERROR","BODY_TEXT_LEN_LIMIT","BODY_LEN_ERROR","ACTIONS_TYPES","btnText","phoneNumber","QUICK_REPLY_BTN_TEXT_LIMIT","QUICK_REPLY_LEN_ERROR","BUTTON_EMOJI_ERROR","VALID_PHONE_NUMBER","customLink","placeholder","quickReplyErrors","button","i","QUICK_REPLY_NAME_LEN_LIMIT","buttons","el","QUICK_REPLY_NAME_ERROR","qrbErrorAcc","currentError","isV2","bodyVariable","bodyText","bodyComponent","bodyVarPlaceholder","matchedPlaceholderName","placeHolderNamePattern","t","normalizeName","COLORS","titleVariable","titleText","buttonComponent","actionsType","btnTexts","btn","btnPlaceholder","customUrl","editableVarPattern","allButtons","limitedTimeOfferComponent","dateTime","format","callPermissionComponent","data","isDuplicate","headerType","headerAssetLink","headerAssetName","headerText","headerVariables","bodyVariables","titleVariables","quickReply","ctaBtn","showCallPermissionCard","callPermissionText","template","config","templateConfig","error","components","mediaHeaderIndex","bodyIndex"],"mappings":"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"}

package/dist/esm/components/template-preview/models/RCSTemplate.d.ts

@@ -136,4 +136,11 @@ export interface RCSTemplateConfig {
     templateType: RCS_TEMPLATE_TYPE | string;
     height: string;
     orientation: string;
+    /**
+     * For VERTICAL orientation only: whether the media/header should render
+     * AFTER the body text instead of the default media-first layout. Derived
+     * from the original `components[]` ordering so the preview matches
+     * third-party body-then-media templates (e.g. `text_message_with_media`).
+     */
+    isMediaAfterBody?: boolean;
 }

package/dist/esm/components/template-preview/models/RCSTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"RCSTemplate.js","sources":["../../../../../src/components/template-preview/models/RCSTemplate.ts"],"sourcesContent":["import { Timestamp } from 'firebase-admin/firestore';\nimport { CHANNEL_TYPE } from './Channels';\nimport { TEMPLATE_STATUS } from './TemplateMeta';\nimport { WhatsappLikePreviewTypes, WhatsAppTemplate } from './WhatsAppTemplate';\n\nexport interface RCSPreviewProps extends WhatsappLikePreviewTypes {\n\tisCarousal?: boolean;\n}\nexport interface RCSTemplateType extends WhatsAppTemplate {\n\tid: string;\n\tstatus: TEMPLATE_STATUS;\n\tname: string;\n\tcontent?: string;\n\tmapping: { [key: string]: string[] | object[] };\n\tmediaTemplateActionButtonTypes: { [key: string]: string[] | object[] };\n\tcustomParams?: Record<string, string>;\n\tdestinationUrl?: Record<string, string>;\n\tcreatedAt: number;\n\tupdatedAt: number;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n\trcsBroadcastConfig?: {\n\t\tmapping: { [key: string]: string | object };\n\t};\n\thtmlContentUrl?: string;\n\ttemplateId?: string;\n\tchannel: CHANNEL_TYPE;\n\theaders?: string[];\n}\n\nexport interface RCSPreviewPropsV2 extends WhatsappLikePreviewTypes {\n\ttemplateConfiguration: RCSTemplateConfig;\n}\n\nexport interface RcsTemplate {\n\tcontent?: string;\n\tcomponents: string;\n\tmapping: { [key: string]: string | object };\n\tmediaTemplateActionButtonTypes: { [key: string]: string | object };\n\tcustomParams?: Record<string, string>;\n\tdestinationUrl?: Record<string, string>;\n\tstatus: TEMPLATE_STATUS;\n\texternalStatus: RCS_TEMPLATE_STATUS;\n\ttemplateType: string;\n\tcreatedAt: Timestamp;\n\tupdatedAt: Timestamp;\n}\n\nexport interface CreateRcsTemplatePayload {\n\tname: string;\n\tlabel: string;\n\tstoreId: string;\n\tcategory: string;\n\tchannelTemplateId: string;\n\tchannel: string;\n\tcontent: string;\n\tcomponents: string;\n\tmapping: { [key: string]: string | object };\n\tmediaTemplateActionButtonTypes: { [key: string]: string | object };\n\tcustomParams?: Record<string, string>;\n\tdestinationUrl?: Record<string, string>;\n\tbotId: string;\n\texternalStatus: RCS_TEMPLATE_STATUS;\n\ttemplateType: string;\n\tstatus: TEMPLATE_STATUS;\n\tcreatedAt: Timestamp;\n\tcreatedBy: string;\n\ttemplateCategory?: string;\n\tupdatedAt: Timestamp;\n\ttemplateId?: string;\n}\n\nexport enum RCS_TEMPLATE_STATUS {\n\tACTIVE = 'active',\n\tAPPROVED = 'approved',\n\tPENDING = 'pending',\n\tREJECTED = 'rejected',\n\tFAILED = 'Failed',\n}\n\nexport enum RCS_TEMPLATE_TYPE {\n\tTEXT_MESSAGE = 'text_message', //body and button(name and url)-->  custom variable\n\tTEXT_MESSAGE_WITH_PDF = 'text_message_with_pdf', //body, and button(name and url)custom\n\tCAROUSEL = 'carousel', //body, and button(name and url)custom ,title\n\tRICH_CARD = 'rich_card', //body, and button(name and url)custom ,title\n\tUNKNOWN = 'unknown',\n}\n\nexport enum RCS_BUTTON_TYPE {\n\tREPLY = 'reply',\n\tURL_ACTION = 'url_action', // url --->\n\tDIALER_ACTION = 'dialer_action',\n\tVIEW_LOCATION_LATLONG = 'view_location_latlong',\n\tVIEW_LOCATION_QUERY = 'view_location_query',\n\tSHARE_LOCATION = 'share_location',\n\tCALENDAR_EVENT = 'calendar_event',\n}\n\nexport enum MEDIA_FORMAT {\n\tIMAGE = 'image',\n\tVIDEO = 'video',\n\tDOCUMENT = 'document',\n\tOTHER = 'other',\n}\n\nexport enum IMAGE_EXTENSIONS {\n\tJPG = 'jpg',\n\tJPEG = 'jpeg',\n\tPNG = 'png',\n\tGIF = 'gif',\n\tBMP = 'bmp',\n\tWEBP = 'webp',\n}\n\nexport enum VIDEO_EXTENSIONS {\n\tMP4 = 'mp4',\n\tMOV = 'mov',\n\tAVI = 'avi',\n\tMKV = 'mkv',\n\tWEBM = 'webm',\n}\n\nexport enum DOCUMENT_EXTENSIONS {\n\tPDF = 'pdf',\n\tDOC = 'doc',\n\tDOCX = 'docx',\n\tXLS = 'xls',\n\tXLSX = 'xlsx',\n\tPPT = 'ppt',\n\tPPTX = 'pptx',\n\tTXT = 'txt',\n}\n\nexport interface RCSTemplateConfig {\n\ttemplateType: RCS_TEMPLATE_TYPE | string;\n\theight: string;\n\torientation: string;\n}\n"],"names":["RCS_TEMPLATE_TYPE"],"mappings":"AA+EO,IAAKA,sBAAAA,OACXA,EAAA,eAAe,gBACfA,EAAA,wBAAwB,yBACxBA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,UAAU,WALCA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"RCSTemplate.js","sources":["../../../../../src/components/template-preview/models/RCSTemplate.ts"],"sourcesContent":["import { Timestamp } from 'firebase-admin/firestore';\nimport { CHANNEL_TYPE } from './Channels';\nimport { TEMPLATE_STATUS } from './TemplateMeta';\nimport { WhatsappLikePreviewTypes, WhatsAppTemplate } from './WhatsAppTemplate';\n\nexport interface RCSPreviewProps extends WhatsappLikePreviewTypes {\n\tisCarousal?: boolean;\n}\nexport interface RCSTemplateType extends WhatsAppTemplate {\n\tid: string;\n\tstatus: TEMPLATE_STATUS;\n\tname: string;\n\tcontent?: string;\n\tmapping: { [key: string]: string[] | object[] };\n\tmediaTemplateActionButtonTypes: { [key: string]: string[] | object[] };\n\tcustomParams?: Record<string, string>;\n\tdestinationUrl?: Record<string, string>;\n\tcreatedAt: number;\n\tupdatedAt: number;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n\trcsBroadcastConfig?: {\n\t\tmapping: { [key: string]: string | object };\n\t};\n\thtmlContentUrl?: string;\n\ttemplateId?: string;\n\tchannel: CHANNEL_TYPE;\n\theaders?: string[];\n}\n\nexport interface RCSPreviewPropsV2 extends WhatsappLikePreviewTypes {\n\ttemplateConfiguration: RCSTemplateConfig;\n}\n\nexport interface RcsTemplate {\n\tcontent?: string;\n\tcomponents: string;\n\tmapping: { [key: string]: string | object };\n\tmediaTemplateActionButtonTypes: { [key: string]: string | object };\n\tcustomParams?: Record<string, string>;\n\tdestinationUrl?: Record<string, string>;\n\tstatus: TEMPLATE_STATUS;\n\texternalStatus: RCS_TEMPLATE_STATUS;\n\ttemplateType: string;\n\tcreatedAt: Timestamp;\n\tupdatedAt: Timestamp;\n}\n\nexport interface CreateRcsTemplatePayload {\n\tname: string;\n\tlabel: string;\n\tstoreId: string;\n\tcategory: string;\n\tchannelTemplateId: string;\n\tchannel: string;\n\tcontent: string;\n\tcomponents: string;\n\tmapping: { [key: string]: string | object };\n\tmediaTemplateActionButtonTypes: { [key: string]: string | object };\n\tcustomParams?: Record<string, string>;\n\tdestinationUrl?: Record<string, string>;\n\tbotId: string;\n\texternalStatus: RCS_TEMPLATE_STATUS;\n\ttemplateType: string;\n\tstatus: TEMPLATE_STATUS;\n\tcreatedAt: Timestamp;\n\tcreatedBy: string;\n\ttemplateCategory?: string;\n\tupdatedAt: Timestamp;\n\ttemplateId?: string;\n}\n\nexport enum RCS_TEMPLATE_STATUS {\n\tACTIVE = 'active',\n\tAPPROVED = 'approved',\n\tPENDING = 'pending',\n\tREJECTED = 'rejected',\n\tFAILED = 'Failed',\n}\n\nexport enum RCS_TEMPLATE_TYPE {\n\tTEXT_MESSAGE = 'text_message', //body and button(name and url)-->  custom variable\n\tTEXT_MESSAGE_WITH_PDF = 'text_message_with_pdf', //body, and button(name and url)custom\n\tCAROUSEL = 'carousel', //body, and button(name and url)custom ,title\n\tRICH_CARD = 'rich_card', //body, and button(name and url)custom ,title\n\tUNKNOWN = 'unknown',\n}\n\nexport enum RCS_BUTTON_TYPE {\n\tREPLY = 'reply',\n\tURL_ACTION = 'url_action', // url --->\n\tDIALER_ACTION = 'dialer_action',\n\tVIEW_LOCATION_LATLONG = 'view_location_latlong',\n\tVIEW_LOCATION_QUERY = 'view_location_query',\n\tSHARE_LOCATION = 'share_location',\n\tCALENDAR_EVENT = 'calendar_event',\n}\n\nexport enum MEDIA_FORMAT {\n\tIMAGE = 'image',\n\tVIDEO = 'video',\n\tDOCUMENT = 'document',\n\tOTHER = 'other',\n}\n\nexport enum IMAGE_EXTENSIONS {\n\tJPG = 'jpg',\n\tJPEG = 'jpeg',\n\tPNG = 'png',\n\tGIF = 'gif',\n\tBMP = 'bmp',\n\tWEBP = 'webp',\n}\n\nexport enum VIDEO_EXTENSIONS {\n\tMP4 = 'mp4',\n\tMOV = 'mov',\n\tAVI = 'avi',\n\tMKV = 'mkv',\n\tWEBM = 'webm',\n}\n\nexport enum DOCUMENT_EXTENSIONS {\n\tPDF = 'pdf',\n\tDOC = 'doc',\n\tDOCX = 'docx',\n\tXLS = 'xls',\n\tXLSX = 'xlsx',\n\tPPT = 'ppt',\n\tPPTX = 'pptx',\n\tTXT = 'txt',\n}\n\nexport interface RCSTemplateConfig {\n\ttemplateType: RCS_TEMPLATE_TYPE | string;\n\theight: string;\n\torientation: string;\n\t/**\n\t * For VERTICAL orientation only: whether the media/header should render\n\t * AFTER the body text instead of the default media-first layout. Derived\n\t * from the original `components[]` ordering so the preview matches\n\t * third-party body-then-media templates (e.g. `text_message_with_media`).\n\t */\n\tisMediaAfterBody?: boolean;\n}\n"],"names":["RCS_TEMPLATE_TYPE"],"mappings":"AA+EO,IAAKA,sBAAAA,OACXA,EAAA,eAAe,gBACfA,EAAA,wBAAwB,yBACxBA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,UAAU,WALCA,IAAAA,KAAA,CAAA,CAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.817",
+	"version": "0.0.819",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",