@bikdotai/bik-component-library 0.0.359-beta.2 → 0.0.359-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/cjs/components/add-variableV2/AddVariableV2.d.ts +1 -0
  2. package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
  3. package/dist/cjs/components/input-with-vars/InputWithVariables.d.ts +5 -1
  4. package/dist/cjs/components/input-with-vars/InputWithVariables.js +2 -2
  5. package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
  6. package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.d.ts +2 -0
  7. package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js +2 -2
  8. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts +2 -0
  9. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
  10. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
  11. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts +1 -0
  12. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
  13. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -2
  14. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
  15. package/dist/cjs/components/template-preview/constants/regexPatterns.js +1 -1
  16. package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
  17. package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts +1 -0
  18. package/dist/esm/components/add-variableV2/AddVariableV2.d.ts +1 -0
  19. package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
  20. package/dist/esm/components/input-with-vars/InputWithVariables.d.ts +5 -1
  21. package/dist/esm/components/input-with-vars/InputWithVariables.js +3 -3
  22. package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
  23. package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.d.ts +2 -0
  24. package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.js +2 -2
  25. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts +2 -0
  26. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
  27. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
  28. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts +1 -0
  29. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +2 -2
  30. package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -2
  31. package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
  32. package/dist/esm/components/template-preview/constants/regexPatterns.js +1 -1
  33. package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
  34. package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts +1 -0
  35. package/package.json +1 -1
@@ -7,6 +7,7 @@ export interface VariableListInterfaceV2 {
7
7
  }
8
8
  export interface Variable {
9
9
  description?: string;
10
+ defaultValue?: string;
10
11
  displayName: string;
11
12
  actualValue: string;
12
13
  variableType: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const Menus: ({
3
2
  displayName: string;
4
3
  key: number;
@@ -1,10 +1,14 @@
1
+ import { Variable } from '../add-variableV2/AddVariableV2';
1
2
  import { SelectedVariable } from '../add-variableV2/types';
2
3
  export declare const InputWithVariables: (props: {
3
4
  variablesList: any;
4
- onChange: (val: SelectedVariable) => void;
5
+ onChange: (val: SelectedVariable | Variable) => void;
6
+ onBlur?: ((e: Event, val?: SelectedVariable | Variable) => void) | undefined;
5
7
  addVarBoxRight: string;
6
8
  allowMix: boolean;
7
9
  prevVariable: SelectedVariable;
8
10
  showHelp?: boolean | undefined;
9
11
  onlyVariables?: boolean | undefined;
12
+ showSideVariablePanel?: boolean | undefined;
13
+ placeHolder?: string | undefined;
10
14
  }) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),t=require("../../constants/Theme.js"),s=require("../add-variableV2/AddVariableBox.styled.js"),d=require("../add-variableV2/AddVariableV2.js"),u=require("../input/Input.js"),o=require("../TypographyStyle.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=n(r).default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),t=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),o=require("../input/Input.js"),n=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
2
2
  margin-bottom: 32px;
3
3
  input {
4
4
  color: ${e=>e.isVar?t.COLORS.stroke.brand:"black"};
5
5
  }
6
- `;exports.InputWithVariables=r=>{const t=l.useRef(null),[n,v]=l.useState(!1),[b]=l.useState(i.v4()),[p,V]=l.useState(),[g,h]=l.useState(r.prevVariable),[j,x]=l.useState(!1),[y,T]=l.useState(!1);return l.useEffect((()=>{p&&p.actualValue&&(r.allowMix?h((e=>({actualValue:e.actualValue+p.actualValue,variableType:"string"}))):h((e=>({actualValue:p.actualValue,variableType:p.variableType,needsFetching:p.needsFetching}))))}),[p]),l.useEffect((()=>{r.onChange(g)}),[g]),e.jsxs(c,Object.assign({isVar:/^{{.*}}$/.test(g.actualValue)},{children:[e.jsx(u.Input,{id:b,ref:t,skipFocus:!0,textControl:!0,isActive:n,value:g.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:"Add a value",onChangeText:function(e,a){if(r.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||h({actualValue:"",variableType:"string"})}else r.allowMix?h({actualValue:e,variableType:"string"}):h({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;v(!0),T(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||j||x(!0)},onBlur:e=>{var a,l,r,i,s,d,u;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(s=e.relatedTarget)||void 0===s?void 0:s.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(t.current&&t.current.focus(),v(!0)):"Search..."===(null===(u=e.relatedTarget)||void 0===u?void 0:u.placeholder)?v(!0):(v(!1),x(!1),T(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[g.actualValue&&r.showHelp?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${g.variableType}`})})):e.jsx("div",{}),y&&e.jsx(s.AddVariableStyled,Object.assign({right:r.addVarBoxRight,id:"addVar",onClick:()=>{x(!j)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),j&&e.jsx(d.AddVariableV2,{data:r.variablesList,showVariable:!0,setShowVariable:()=>{x(!1)},variableValue:p,setVariableValue:V,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,s,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(s=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===s?void 0:s.includes("sc-dZoequ "))?t.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==b&&(x(!1),T(!1),v(!1)):(x(!1),T(!1),v(!1))}})]}))};
6
+ `;exports.InputWithVariables=r=>{const t=l.useRef(null),[c,b]=l.useState(!1),[V]=l.useState(i.v4()),[h,p]=l.useState(),[g,j]=l.useState(r.prevVariable),[x,T]=l.useState(!1),[y,f]=l.useState(!1);return l.useEffect((()=>{h&&h.actualValue&&(r.allowMix?j((e=>({actualValue:e.actualValue+h.actualValue,variableType:"string"}))):j((e=>({actualValue:h.actualValue,variableType:h.variableType,needsFetching:h.needsFetching}))))}),[h]),l.useEffect((()=>{r.onChange(g)}),[g]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(g.actualValue)},{children:[e.jsx(o.Input,{id:V,ref:t,skipFocus:!0,textControl:!0,isActive:c,value:g.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:r.placeHolder||"Add a value",onChangeText:function(e,a){if(r.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||j({actualValue:"",variableType:"string"})}else r.allowMix?j({actualValue:e,variableType:"string"}):j({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;b(!0),f(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||x||T(!0)},onBlur:e=>{var a,l,i,d,s,u,o,n;null===(a=r.onBlur)||void 0===a||a.call(r,e,g),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"varList"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)||(null===(s=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===s?void 0:s.includes("exlualr0"))||(null===(o=null===(u=e.relatedTarget)||void 0===u?void 0:u.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(t.current&&t.current.focus(),b(!0)):"Search..."===(null===(n=e.relatedTarget)||void 0===n?void 0:n.placeholder)?b(!0):(b(!1),T(!1),f(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[g.actualValue&&r.showHelp?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${g.variableType}`})})):e.jsx("div",{}),y&&e.jsx(u.AddVariableStyled,Object.assign({right:r.addVarBoxRight,id:"addVar",onClick:()=>{T(!x)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!r.showSideVariablePanel&&x&&e.jsx(s.AddVariableV2,{data:r.variablesList,showVariable:!0,setShowVariable:()=>{T(!1)},variableValue:h,setVariableValue:p,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,s;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?t.current.focus():"Enter here"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?e.relatedTarget.id!==V&&(T(!1),f(!1),b(!1)):(T(!1),f(!1),b(!1))}})]})),r.showSideVariablePanel&&x&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:r.variablesList,showVariable:x,setShowVariable:T,placeholder:"Add a variable",customTrigger:e=>{j(e)}})]})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),o=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),r=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:C,onTemplateSelect:g,globalPlaceholders:b,showOnlyContent:S,whatsappSpecificPickerMeta:T,zIndex:v,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E,onBackPress:P,enabledCustomText:L}=d;var f,w;t.useEffect((()=>{N(h)}),[h]);const[q,y]=t.useState(m===s.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[A,N]=t.useState(h),[k,D]=t.useState(!1),[V,_]=t.useState(c),[H,I]=t.useState(null!=C?C:[]),[O,B]=t.useState(!1);const Y=t.useMemo((()=>r.convertPlaceholdersToBikDropdown(b)),[b]);return e.jsx(o.TemplateModalContext.Provider,Object.assign({value:{template:V,setTemplate:_,device:q,setDevice:y,display_content:A,setDisplayContent:N,originalVariableList:H,setOriginalVariableList:I,isError:k,setIsError:D,channel:m,globalNormalizedPlaceholders:Y,templateSelectionTriggered:O,setTemplateSelectionTriggered:B,enabledCustomText:L}},{children:S?e.jsx(n.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:v,centralContainerStyles:{width:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==V?void 0:V.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(f=null==V?void 0:V.category)&&void 0!==f?f:"")} • ${null!==(w=null==V?void 0:V.templateCategory)&&void 0!==w?w:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(n.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:T,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E}),g?e.jsx(i.default,{onSelect:function(){const e=null==g?void 0:g(V,H,null!=A?A:"");e?D(!!e):B(!0)}}):e.jsx(e.Fragment,{})]}))}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),o=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),r=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:g,onTemplateSelect:C,globalPlaceholders:b,showOnlyContent:S,whatsappSpecificPickerMeta:T,zIndex:v,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E,onBackPress:P,enabledCustomText:L}=d;var f,w;t.useEffect((()=>{N(h)}),[h]);const[q,y]=t.useState(m===o.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[A,N]=t.useState(h),[k,D]=t.useState(!1),[V,_]=t.useState(c),[H,I]=t.useState(null!=g?g:[]),[O,B]=t.useState(!1);const Y=t.useMemo((()=>r.convertPlaceholdersToBikDropdown(b)),[b]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:V,setTemplate:_,device:q,setDevice:y,display_content:A,setDisplayContent:N,originalVariableList:H,setOriginalVariableList:I,isError:k,setIsError:D,channel:m,globalNormalizedPlaceholders:Y,templateSelectionTriggered:O,setTemplateSelectionTriggered:B,enabledCustomText:L}},{children:S?e.jsx(n.default,{channel:o.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:v,centralContainerStyles:{width:m===o.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==V?void 0:V.label,headingSubtitle:m===o.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(f=null==V?void 0:V.category)&&void 0!==f?f:"")} • ${null!==(w=null==V?void 0:V.templateCategory)&&void 0!==w?w:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(n.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:T,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E}),C?e.jsx(i.default,{onSelect:function(){const e=null==C?void 0:C(V,H,null!=A?A:"");console.log("template",V),e?D(!!e):B(!0)}}):e.jsx(e.Fragment,{})]}))}))};
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
2
3
  export interface EditMediaV2Props {
3
4
  imageName: string[];
@@ -6,6 +7,7 @@ export interface EditMediaV2Props {
6
7
  isLoading?: boolean;
7
8
  mediaType?: HEADER_TYPES;
8
9
  handleImageChange?: () => void;
10
+ setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
9
11
  }
10
12
  declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
11
13
  export default EditMediaV2;
@@ -1,8 +1,8 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),i=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("../../../assets/icons/video_camcorder.svg.js"),n=require("styled-components"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),a=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),h=require("./EditMediaV2.style.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=g(n).default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),i=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("../../../assets/icons/video_camcorder.svg.js"),n=require("styled-components"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),a=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),u=require("./EditMediaV2.style.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const g=h(n).default.div`
2
2
  padding-left: 14px;
3
3
  padding-right: 6px;
4
4
  width: 44px;
5
5
  height: 24px;
6
6
  border-left: 1px solid ${c.COLORS.stroke.primary};
7
7
  cursor: pointer;
8
- `;exports.default=n=>{const{imageName:g,error:u,isLoading:p,mediaType:x,handleImageChange:y}=n,O=null==g?void 0:g[0].split("/"),m=null==O?void 0:O[O.length-1];return e.jsxs(h.Container,{children:[e.jsx(h.ImageContainer,Object.assign({error:!!u,onClick:u?y:void 0},{children:u?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):x===l.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"",src:null==g?void 0:g[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):x===l.HEADER_TYPES.VIDEO?e.jsx(r.default,{width:18,height:22,color:c.COLORS.content.placeholder}):e.jsx(t.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(h.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:g&&u?e.jsx(e.Fragment,{}):p?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:a.default.toCapitilize(null==x?void 0:x.toLowerCase())||m}))})),!!u&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==x?void 0:x.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:u}))]})),!u&&!p&&e.jsx(j,Object.assign({onClick:y,onKeyDown:y,role:"presentation"},{children:e.jsx(i.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};
8
+ `;exports.default=n=>{const{imageName:h,error:j,isLoading:p,mediaType:x,handleImageChange:O,setOpenEditMedia:y}=n,m=null==h?void 0:h[0].split("/"),f=null==m?void 0:m[m.length-1];return e.jsxs(u.Container,{children:[e.jsx(u.ImageContainer,Object.assign({error:!!j,onClick:j?O:void 0},{children:j?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):x===l.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"",src:null==h?void 0:h[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):x===l.HEADER_TYPES.VIDEO?e.jsx(r.default,{width:18,height:22,color:c.COLORS.content.placeholder}):e.jsx(t.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(u.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:h&&j?e.jsx(e.Fragment,{}):p?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:a.default.toCapitilize(null==x?void 0:x.toLowerCase())||f}))})),!!j&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==x?void 0:x.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:j}))]})),!j&&!p&&e.jsx(g,Object.assign({onClick:()=>null==y?void 0:y(!0),onKeyDown:()=>null==y?void 0:y(!0),role:"presentation"},{children:e.jsx(i.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
+ import { VariableListInterfaceV2 } from "../../add-variableV2";
2
3
  import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
3
4
  declare const EditMediaTemplateMediaV2: React.FC<{
4
5
  mediaComponent: WhatsAppTemplate['components'][0];
5
6
  template: WhatsAppTemplate;
6
7
  whatsappSpecificPickerMeta: WhatsAppPickerMeta;
7
8
  updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
9
+ variableList?: VariableListInterfaceV2[];
8
10
  }>;
9
11
  export default EditMediaTemplateMediaV2;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("../../helpers/FileUploaderHelper.js"),a=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var n=require("../../template-preview/models/TemplateMeta.js"),o=require("./EditMediaV2.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(r);exports.default=l=>{let{mediaComponent:u,template:d,updateTemplateImageUrl:c,whatsappSpecificPickerMeta:p}=l;var m,f;const[v,E]=r.useState(void 0),[g,j]=r.useState(),_=s.default.createRef(),[h,S]=r.useState(!1),[q,A]=r.useState("");function C(t){var r;return e.__awaiter(this,void 0,void 0,(function*(){const e=new i.FileUploaderHelper;if(t instanceof Blob){const i=e.validate(t);if(i)A(i),S(!1);else{const e=u.format===n.HEADER_TYPES.IMAGE,i=yield p.uploadMediaFiles({file:t,fileName:v,isImage:e});if(i.success){const[e]=t.type.split("/");c(null!==(r=i.url)&&void 0!==r?r:"","application"===e?n.HEADER_TYPES.DOCUMENT:n.HEADER_TYPES[e.toUpperCase()])}else A("An unknown technical error occured");S(!1)}}else A("An unknown technical error occured"),S(!1)}))}let y;return y=u.format===n.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===n.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[!!g&&t.jsx(a.BikImageCropper,{aspectRatio:15/8,src:g,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){S(!1),A("");const e=yield fetch(t);C(yield e.blob()).then((()=>{j(void 0)}))}))},onCancel:()=>{S(!1),j("")}}),t.jsx("input",{ref:_,style:{display:"none"},type:"file",onChange:function(e){var t;A(""),S(!0);const r=null===(t=e.target.files)||void 0===t?void 0:t[0];if(u.format===n.HEADER_TYPES.IMAGE){const e=new FileReader;j(""),E(""),e.onload=()=>{j(e.result),E(null==r?void 0:r.name)},r&&e.readAsDataURL(r)}else C(r)},accept:y}),t.jsx(o.default,{imageName:null!==(f=null===(m=null==u?void 0:u.example)||void 0===m?void 0:m.header_handle)&&void 0!==f?f:[],handleImageChange:function(){var e;(null===(e=null==_?void 0:_.current)||void 0===e?void 0:e.click)&&_.current.click()},mediaType:null==u?void 0:u.format,error:q,isLoading:h})]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("react"),a=require("../../helpers/FileUploaderHelper.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js");var l=require("../../modals/styledModal.js");require("../../spinner/Spinner.js");var n=require("../../input-with-vars/InputWithVariables.js"),o=require("../../template-preview/models/TemplateMeta.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(t);exports.default=d=>{let{mediaComponent:c,template:p,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableList:m}=d;var h,g;const[j,E]=t.useState(void 0),[b,x]=t.useState(),[y,_]=t.useState(!1),S=u.default.createRef(),[C,q]=t.useState(!1),[w,I]=t.useState("");let M;function A(i){return e.__awaiter(this,void 0,void 0,(function*(){if(i){if(i.startsWith("https")){q(!0),I("");const e=yield fetch(i),t=yield e.blob();yield T(t)}}else R()}))}function R(){var e;(null===(e=null==S?void 0:S.current)||void 0===e?void 0:e.click)&&S.current.click()}function T(i){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(i instanceof Blob){const a=e.validate(i);if(a)I(a),_(!1),q(!1);else{const e=c.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:i,fileName:j,isImage:e});if(a.success){const[e]=i.type.split("/");v(null!==(t=a.url)&&void 0!==t?t:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else I("An unknown technical error occured");q(!1),_(!1)}}else I("An unknown technical error occured"),_(!1),q(!1)}))}return M=c.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":c.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",i.jsxs(i.Fragment,{children:[i.jsx(l.StyledModal,Object.assign({open:y,zIndex:2e3,onClose:()=>_(!1),width:"480px"},{children:i.jsxs("div",Object.assign({style:{padding:16}},{children:[i.jsx(n.InputWithVariables,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:m,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,i)=>{i&&A(i.actualValue)}}),i.jsx("button",Object.assign({onClick:()=>A()},{children:"upload media"}))]}))})),!!b&&i.jsx(r.BikImageCropper,{aspectRatio:15/8,src:b,onCropComplete:function(i){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),I("");const e=yield fetch(i);T(yield e.blob()).then((()=>{x(void 0)}))}))},onCancel:()=>{q(!1),x("")}}),i.jsx("input",{ref:S,style:{display:"none"},type:"file",onChange:function(e){var i;I(""),q(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(c.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;x(""),E(""),e.onload=()=>{x(e.result),E(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else T(t)},accept:M}),i.jsx(s.default,{imageName:null!==(g=null===(h=null==c?void 0:c.example)||void 0===h?void 0:h.header_handle)&&void 0!==g?g:[],handleImageChange:R,mediaType:null==c?void 0:c.format,error:w,isLoading:C,setOpenEditMedia:_})]})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),o=require("../utils/getDataFromTemplateComponent.js"),n=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),l=require("./VariableConnectorsPanel.js"),a=require("./VariableConnectorWhatsApp.js"),s=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c,showVariableModal:m,variableList:b}=r;var v,g,h,f,j,x,T,O,y,C,E,V;const{originalVariableList:w}=t.useTemplateModalContext(),{descriptionComponents:B,urlBtns:I,qrbBtns:L,imageComponent:M,bodyVariables:q,headerVariables:R}=o.getAllDataFromTemplateComponent(p);function A(e,t){var o,n,i,l;const a=Object.assign({},p),s=null==a?void 0:a.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==s&&s>-1){const d=null===(o=null==a?void 0:a.components[s].buttons)||void 0===o?void 0:o.findIndex((e=>"URL"===e.type));if(void 0!==d&&d>-1){const o="custom"===t&&"string"==typeof e,r=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[d]=Object.assign(Object.assign({},r[d]),{url:"https://d.bik.ai/{{1}}",example:[o?e:"string"!=typeof e?e.defaultValue:""]});const p=Object.assign(Object.assign({},a.components[s]),{buttons:r}),u=Object.assign(Object.assign({},a.mapping),{buttons:o?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});a.mapping=u;const c=[...a.components];c[s]=p,a.components=c}}null==u||u(a)}function U(e,t,o){var n;const i=Object.assign({},p),l=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==l&&l>-1){const t=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));t&&(t[o]=Object.assign(Object.assign({},t[o]),{flowId:e.flowId,flowName:e.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:t}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return e.jsxs(l.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!M&&e.jsx(n.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:M,updateTemplateImageUrl:function(e,t){var o;let n=Object.assign({},p);const i=null===(o=null==n?void 0:n.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const o=Object.assign(Object.assign({},n.components[i]),{format:t,example:{header_handle:[e]}}),l=[...n.components];l[i]=o,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:p})}),(q.length>0||R.length>0)&&e.jsx(s.default,{containerStyle:{paddingTop:M?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==B?void 0:B.map(((t,o)=>e.jsx(a.default,{originalVariableList:w,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body,showVariableModal:m,variableList:b},o))),(null===(g=null===(v=I[0])||void 0===v?void 0:v.component)||void 0===g?void 0:g.buttons)&&(null===(j=null===(f=null===(h=I[0])||void 0===h?void 0:h.component)||void 0===f?void 0:f.buttons)||void 0===j?void 0:j.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(x=null==w?void 0:w.buttons)||void 0===x?void 0:x.map(((t,o)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:w,updateSelectedURLTemplateBtn:A},`${o}`)})),(null===(O=null===(T=L[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)&&(null===(E=null===(C=null===(y=L[0])||void 0===y?void 0:y.component)||void 0===C?void 0:C.buttons)||void 0===E?void 0:E.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(V=null==w?void 0:w.buttons)||void 0===V?void 0:V.map(((t,o)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:w,updateSelectedQRBTemplateBtn:U},`${o}`)}))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),o=require("../utils/getDataFromTemplateComponent.js"),n=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),l=require("./VariableConnectorsPanel.js"),a=require("./VariableConnectorWhatsApp.js"),s=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c,showVariableModal:b,variableList:m}=r;var v,g,h,f,j,x,T,O,y,C,E,V;const{originalVariableList:w}=t.useTemplateModalContext(),{descriptionComponents:L,urlBtns:B,qrbBtns:I,imageComponent:M,bodyVariables:q,headerVariables:R}=o.getAllDataFromTemplateComponent(p);function A(e,t){var o,n,i,l;const a=Object.assign({},p),s=null==a?void 0:a.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==s&&s>-1){const d=null===(o=null==a?void 0:a.components[s].buttons)||void 0===o?void 0:o.findIndex((e=>"URL"===e.type));if(void 0!==d&&d>-1){const o="custom"===t&&"string"==typeof e,r=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[d]=Object.assign(Object.assign({},r[d]),{url:"https://d.bik.ai/{{1}}",example:[o?e:"string"!=typeof e?e.defaultValue:""]});const p=Object.assign(Object.assign({},a.components[s]),{buttons:r}),u=Object.assign(Object.assign({},a.mapping),{buttons:o?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});a.mapping=u;const c=[...a.components];c[s]=p,a.components=c}}null==u||u(a)}function U(e,t,o){var n;const i=Object.assign({},p),l=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==l&&l>-1){const t=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));t&&(t[o]=Object.assign(Object.assign({},t[o]),{flowId:e.flowId,flowName:e.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:t}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return e.jsxs(l.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!M&&e.jsx(n.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:M,updateTemplateImageUrl:function(e,t){var o;let n=Object.assign({},p);const i=null===(o=null==n?void 0:n.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const o=Object.assign(Object.assign({},n.components[i]),{format:t,example:{header_handle:[e]}}),l=[...n.components];l[i]=o,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:p,variableList:m})}),(q.length>0||R.length>0)&&e.jsx(s.default,{containerStyle:{paddingTop:M?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==L?void 0:L.map(((t,o)=>e.jsx(a.default,{originalVariableList:w,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body,showVariableModal:b,variableList:m},o))),(null===(g=null===(v=B[0])||void 0===v?void 0:v.component)||void 0===g?void 0:g.buttons)&&(null===(j=null===(f=null===(h=B[0])||void 0===h?void 0:h.component)||void 0===f?void 0:f.buttons)||void 0===j?void 0:j.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(x=null==w?void 0:w.buttons)||void 0===x?void 0:x.map(((t,o)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:w,updateSelectedURLTemplateBtn:A},`${o}`)})),(null===(O=null===(T=I[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)&&(null===(E=null===(C=null===(y=I[0])||void 0===y?void 0:y.component)||void 0===C?void 0:C.buttons)||void 0===E?void 0:E.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(V=null==w?void 0:w.buttons)||void 0===V?void 0:V.map(((t,o)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:w,updateSelectedQRBTemplateBtn:U},`${o}`)}))]}))};
@@ -14,6 +14,7 @@ export interface VariableConnectorProps {
14
14
  showVariableModal?: boolean;
15
15
  variableList?: VariableListInterfaceV2[];
16
16
  setShowDiscountCheckBox?: any;
17
+ componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
17
18
  }
18
19
  declare const VariableConnector: React.FC<VariableConnectorProps>;
19
20
  export default VariableConnector;
@@ -1,7 +1,7 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),i=require("../../dropdown/Dropdown.js"),o=require("../../input/Input.js"),u=require("../../product-picker-v2/collectionScreen.js"),s=require("../../template-preview/constants/regexPatterns.js"),d=require("../../template-preview/models/Channels.js"),r=require("../../TypographyStyle.js"),c=require("../../../utils/StringUtils.js"),v=require("../../../constants/Theme.js"),p=require("../context/templateModalContext.js"),m=require("../utils/getVariableNameEmail.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const g=b(a).default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),i=require("../../dropdown/Dropdown.js"),o=require("../../input/Input.js"),u=require("../../product-picker-v2/collectionScreen.js"),s=require("../../template-preview/constants/regexPatterns.js"),d=require("../../template-preview/models/Channels.js"),r=require("../../TypographyStyle.js"),c=require("../../../utils/StringUtils.js"),p=require("../../../constants/Theme.js"),v=require("../context/templateModalContext.js"),m=require("../utils/getVariableNameEmail.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const g=b(a).default.div`
2
2
  /* surface/$color-background-warning-light */
3
3
 
4
- background: ${e=>e.focused&&e.channel===d.CHANNEL_TYPE.EMAIL?v.COLORS.background.warning.light:"transparent"};
4
+ background: ${e=>e.focused&&e.channel===d.CHANNEL_TYPE.EMAIL?p.COLORS.background.warning.light:"transparent"};
5
5
  border-radius: 4px;
6
6
  padding: 8px 10px;
7
- `,x={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:E,index:_,showVariableModal:j,variableList:A,setShowDiscountCheckBox:y}=a;var f,T;const[P,N]=t.useState(!1),[C,L]=t.useState(""),[k,O]=t.useState([]),[S,V]=t.useState(),[H,w]=t.useState(!1),[M,q]=t.useState(!1),{device:Y,channel:W,isError:I,originalVariableList:B,template:$,templateSelectionTriggered:R,setTemplate:z,setDisplayContent:D,setOriginalVariableList:U,globalNormalizedPlaceholders:Z,enabledCustomText:F}=p.useTemplateModalContext();function G(e,l){var t,a,n;const i=e;L(""),V(i),W===d.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(J(null!==(t=i.value)&&void 0!==t?t:"","string"),null==K||K(null!==(a=E.index)&&void 0!==a?a:0,`[[${i.value}]]`)):(null==K||K(null!==(n=E.index)&&void 0!==n?n:0,E.variableName),J("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?J(i.value,"url"===i.bikPlaceholderType?"link":"string"):(L(""),J("",i.value))}function J(e,l){var t,a;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(W!==d.CHANNEL_TYPE.WHATSAPP){const a=m.getVariableNameForEmailByIndex(_+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===Y?"template_html_mobile":"template_html_desktop"),o=W===d.CHANNEL_TYPE.EMAIL?null===(t=null==i?void 0:i.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:E.variableName);const u=B.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==U||U(u)}if(W===d.CHANNEL_TYPE.WHATSAPP){const l=null===(a=B.body)||void 0===a?void 0:a.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==U||U((e=>Object.assign(Object.assign({},e),{body:l,buttons:B.buttons})))}}function K(e,l){var t;const a=Object.assign({},$),n=null===(t=null==a?void 0:a.components)||void 0===t?void 0:t.map((t=>{var a,n,i,o,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(n=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const t=[...null!==(u=null===(o=null===(i=s.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==u?u:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[t]});return Object.assign(Object.assign({},s),{example:a})}return t}));a.components=n,null==z||z(a)}return t.useEffect((()=>{P&&(null==b||b())}),[P]),t.useEffect((()=>{!function(){var e,l,t,a,n;const i="mobile"===Y?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),u=(null!==(a=null===(t=null===(l=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);W===d.CHANNEL_TYPE.EMAIL&&(null==D||D(u))}()}),[R]),t.useEffect((()=>{var e;const l=[];let t=[];if(W!==d.CHANNEL_TYPE.MESSAGE||F){"link"===(null==E?void 0:E.type)?(l.push({label:"",options:[x,h]}),V(x)):(l.push({label:"",options:[x,h]}),V(h));const e=null!=Z?Z:[];O([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:c.default.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}else{const e=null!=Z?Z:[];O([{label:"",options:[h,x]},...e]),t=[{label:"",options:[h,x]},...e]}if((W===d.CHANNEL_TYPE.WHATSAPP||W===d.CHANNEL_TYPE.EMAIL||W===d.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(s.placeHolderNamePattern.test(E.updatedValue)&&W===d.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&W!==d.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){var a;let n={label:"",value:""};const i=t===d.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");j?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(E,t,W);e.value&&V(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(V(x),L(E.updatedValue.split("https://")[1])):(V(h),L(E.updatedValue))}),[]),t.useEffect((()=>{Y&&S&&C&&setTimeout((()=>{J("custom_link"===(null==S?void 0:S.value)?`https://${C}`:C,S.value)}),100)}),[Y]),t.useEffect((()=>{!M&&S&&E.updatedValue&&setTimeout((()=>{J("custom_link"===(null==S?void 0:S.value)?`https://${E.updatedValue}`:E.updatedValue,S.value),q(!0)}),100)}),[S]),e.jsxs(g,Object.assign({channel:W,focused:P,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:I&&!S?v.COLORS.content.negative:v.COLORS.content.primary}},{children:[null===(f=E.variableName)||void 0===f?void 0:f.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==S?void 0:S.label)?"space-between":"flex-end"}},{children:[e.jsx(r.BodyPrimary,{children:u.truncate(null!==(T=null==S?void 0:S.label)&&void 0!==T?T:"",20,!0)}),e.jsx(l.default,{onClick:()=>{w(!H)},width:24,height:24,color:v.COLORS.content.primary})]})):e.jsx(i.Dropdown,{options:k,isSearchable:!1,onSelect:G,defaultOptions:S?[Object.assign(Object.assign({},S),{selected:!0})]:[]})})),("custom_text"===(null==S?void 0:S.value)||"custom_link"===(null==S?void 0:S.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==S?void 0:S.value)?"Custom text value":"custom_link"===(null==S?void 0:S.value)?"Custom URL value":"",id:`variable-value-${null==S?void 0:S.value}-${_}`,value:C,errorMessage:I?C&&0!==C.trim().length?"custom_link"!==S.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${C.trim()}`)&&0!==C.trim().length?"custom_link"!==S.value&&C.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==S?void 0:S.value)?void 0:30,prefixText:"custom_link"===(null==S?void 0:S.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===S.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;L(l);const a="custom_link"===(null==S?void 0:S.value)?`https://${l}`:l;J(a,e),W===d.CHANNEL_TYPE.WHATSAPP&&(null==K||K(null!==(t=E.index)&&void 0!==t?t:0,a))}(S.value,e)}}),H&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:H,setShowVariable:w,placeholder:"Add a variable",customTrigger:e=>{console.log("variable",e),null==y||y(!1),"{{custom.url}}"===e.actualValue?G({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?G({label:e.displayName,selected:!0,value:"custom_text"}):G({label:e.actualValue,selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
7
+ `,x={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:E,index:_,showVariableModal:j,variableList:y,setShowDiscountCheckBox:A,componentType:O}=a;var f,T;const[N,P]=l.useState(!1),[C,L]=l.useState(""),[k,V]=l.useState([]),[S,H]=l.useState(),[w,Y]=l.useState(!1),[M,q]=l.useState(!1),{device:B,channel:R,isError:W,originalVariableList:D,template:I,templateSelectionTriggered:$,setTemplate:z,setDisplayContent:U,setOriginalVariableList:Z,globalNormalizedPlaceholders:F,enabledCustomText:G}=v.useTemplateModalContext();function J(e,t){var l,a,n;const i=e;L(""),H(i),R===d.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(K(null!==(l=i.value)&&void 0!==l?l:"","string"),null==Q||Q(null!==(a=E.index)&&void 0!==a?a:0,i.value,!0)):(null==Q||Q(null!==(n=E.index)&&void 0!==n?n:0,E.variableName,!0,"custom_text"),K("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?K(i.value,"url"===i.bikPlaceholderType?"link":"string"):(L(""),K("",i.value))}function K(e,t){var l,a,n;const i="custom_link"===t?"link":"custom_text"===t?"string":t;if(R!==d.CHANNEL_TYPE.WHATSAPP){const a=m.getVariableNameForEmailByIndex(_+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===B?"template_html_mobile":"template_html_desktop"),o=R===d.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const u=D.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t));null==Z||Z(u)}if(R===d.CHANNEL_TYPE.WHATSAPP){const t=D;let l=t.body,o=t.header;"BODY"===O?l=null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t)):"HEADER"===O&&(o=null===(n=t.header)||void 0===n?void 0:n.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t))),null==Z||Z((e=>Object.assign(Object.assign({},e),{header:o,body:l,buttons:t.buttons})))}}function Q(e,t,l,a){var n,i,o;const u=Object.assign({},I),s=null===(n=null==u?void 0:u.components)||void 0===n?void 0:n.map((l=>{var a,n,i,o,u,s,d,r;const c=Object.assign({},l);if("BODY"===l.type&&"BODY"===O){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(u=null===(o=null===(i=c.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{body_text:[l]});return Object.assign(Object.assign({},c),{example:a})}}else if("HEADER"===l.type&&"HEADER"===O&&(null===(s=l.example)||void 0===s?void 0:s.header_text)){const l=[...null!==(r=null===(d=c.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{header_text:l});return Object.assign(Object.assign({},c),{example:a})}return l}));u.components=s,l&&("BODY"===O&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))}):"HEADER"===O&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:t:l))}))),null==z||z(Object.assign({},u))}return l.useEffect((()=>{N&&(null==b||b())}),[N]),l.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===B?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),u=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);R===d.CHANNEL_TYPE.EMAIL&&(null==U||U(u))}()}),[$]),l.useEffect((()=>{var e;const t=[];let l=[];if(R!==d.CHANNEL_TYPE.MESSAGE||G){"link"===(null==E?void 0:E.type)?(t.push({label:"",options:[x,h]}),H(x)):(t.push({label:"",options:[x,h]}),H(h));const e=null!=F?F:[];V([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:c.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}else{const e=null!=F?F:[];V([{label:"",options:[h,x]},...e]),l=[{label:"",options:[h,x]},...e]}if((R===d.CHANNEL_TYPE.WHATSAPP||R===d.CHANNEL_TYPE.EMAIL||R===d.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(s.placeHolderNamePattern.test(E.updatedValue)&&R===d.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&R!==d.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===d.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");j?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(E,l,R);e.value&&H(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(H(x),L(E.updatedValue.split("https://")[1])):(H(h),L(E.updatedValue))}),[]),l.useEffect((()=>{B&&S&&C&&setTimeout((()=>{K("custom_link"===(null==S?void 0:S.value)?`https://${C}`:C,S.value)}),100)}),[B]),l.useEffect((()=>{!M&&S&&E.updatedValue&&setTimeout((()=>{K("custom_link"===(null==S?void 0:S.value)?`https://${E.updatedValue}`:E.updatedValue,S.value),q(!0)}),100)}),[S]),e.jsxs(g,Object.assign({channel:R,focused:N,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:W&&!S?p.COLORS.content.negative:p.COLORS.content.primary}},{children:[null===(f=E.variableName)||void 0===f?void 0:f.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==S?void 0:S.label)?"space-between":"flex-end"}},{children:[e.jsx(r.BodyPrimary,{children:u.truncate(null!==(T=null==S?void 0:S.label)&&void 0!==T?T:"",20,!0)}),e.jsx(t.default,{onClick:()=>{Y(!w)},width:24,height:24,color:p.COLORS.content.primary})]})):e.jsx(i.Dropdown,{options:k,isSearchable:!1,onSelect:J,defaultOptions:S?[Object.assign(Object.assign({},S),{selected:!0})]:[]})})),("custom_text"===(null==S?void 0:S.value)||"custom_link"===(null==S?void 0:S.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==S?void 0:S.value)?"Custom text value":"custom_link"===(null==S?void 0:S.value)?"Custom URL value":"",id:`variable-value-${null==S?void 0:S.value}-${_}`,value:C,errorMessage:W?C&&0!==C.trim().length?"custom_link"!==S.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${C.trim()}`)&&0!==C.trim().length?"custom_link"!==S.value&&C.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==S?void 0:S.value)?void 0:30,prefixText:"custom_link"===(null==S?void 0:S.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===S.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,t){var l;L(t);const a="custom_link"===(null==S?void 0:S.value)?`https://${t}`:t;K(a,e),R===d.CHANNEL_TYPE.WHATSAPP&&(null==Q||Q(null!==(l=E.index)&&void 0!==l?l:0,a))}(S.value,e)}}),w&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=y?y:[],showVariable:w,setShowVariable:Y,placeholder:"Add a variable",customTrigger:e=>{null==A||A(!1),"{{custom.url}}"===e.actualValue?J({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?J({label:e.displayName,selected:!0,value:"custom_text"}):J({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
3
2
  import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
4
3
  export type ComponentType = WhatsAppTemplate['components'][0];
@@ -10,5 +9,5 @@ export interface VariableConnectorWhatsAppProps {
10
9
  showVariableModal?: boolean;
11
10
  variableList?: VariableListInterfaceV2[];
12
11
  }
13
- declare const VariableConnectorWhatsApp: React.FC<VariableConnectorWhatsAppProps>;
12
+ declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
14
13
  export default VariableConnectorWhatsApp;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),r=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),s=require("./VariableConnector.js");exports.default=l=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=l;var u;const{originalVariableList:c}=i.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(u=null==c?void 0:c.body)||void 0===u?void 0:u.map(((i,l)=>i.isEditableVariable?e.jsx(s.default,{index:l,variable:i,showVariableModal:d,variableList:p},`${l}-${i.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(r.BodySecondary,Object.assign({style:{color:t.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",l+1]})),e.jsx(a.Input,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):e.jsx(e.Fragment,{})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=s;var c,b;const{originalVariableList:x}=t.useTemplateModalContext();return console.log("originalVariableList",x),"BODY"===n.type?e.jsx("div",{children:null===(c=null==x?void 0:x.body)||void 0===c?void 0:c.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):"HEADER"===n.type?e.jsx("div",{children:null===(b=null==x?void 0:x.header)||void 0===b?void 0:b.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):e.jsx(e.Fragment,{})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 .]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 .]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\{\{||\(\()(.*)(\)\)|\}\}|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 ._]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 .]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 .]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\{\{|\(\()(.*?)(\)\)|\}\}|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 ._]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js"),i=require("../constants/TemplateConstants.js"),l=require("../models/TemplateMeta.js"),o=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e){var t,n,i,o,a,d,r,v,s,E;const u={headerType:l.HEADER_TYPES.NONE,headerVariables:[]},T=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(T){u.headerType=T.format,u.headerText=T.text,u.headerAssetLink=null===(i=null===(n=T.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(a=null===(o=T.example)||void 0===o?void 0:o.header_text)||void 0===a?void 0:a[0],l=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0];if(t&&l){const e=null==l?void 0:l.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(l),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(s=null===(v=T.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(E=u.headerText)||void 0===E?void 0:E.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,a,d,r,v,s,E,u,T,p,c,_,m,R,h,b,I,L,N,y,B;const A=/\p{Extended_Pictographic}/u;let C="valid";const D={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},O=new o.TemplateHelperUtils;let x=!1;const P=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>i.NAME_LEN_LIMIT?(D.meta.name=i.NAME_LEN_ERROR,C="invalid"):n.specialCharPattern.test(e.meta.name.trim())&&(D.meta.name=i.NO_SPECIAL_CHAR,C="invalid"):(D.meta.name=i.REQUIRED_FIELD,C="invalid"),D.meta.name&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.name),x=!0),e.headerType===l.HEADER_TYPES.TEXT){const t=null!==(d=null===(a=e.headerText)||void 0===a?void 0:a.trim())&&void 0!==d?d:"";if(t)if(t.length>i.HEADER_TEXT_LEN_LIMIT)D.header=i.HEADER_LEN_ERROR,C="invalid";else{const e=O.getTemplateVariablesFromState(t);e&&e.length>1&&(D.header=i.ONE_VAR_ALLOWED,C="invalid")}else D.header=i.REQUIRED_FIELD,C="invalid"}else e.headerType===l.HEADER_TYPES.DOCUMENT||e.headerType===l.HEADER_TYPES.IMAGE||(e.headerType,l.HEADER_TYPES.VIDEO);if(e.headerType!==l.HEADER_TYPES.DOCUMENT&&e.headerType!==l.HEADER_TYPES.IMAGE&&e.headerType!==l.HEADER_TYPES.VIDEO||e.headerAssetLink||(D.header=i.HEADER_ASSET_LINK_ERROR,C="invalid"),D.header&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.header),x=!0),e.bodyText?e.bodyTextRaw&&(null===(r=e.bodyTextRaw)||void 0===r?void 0:r.trim().length)>i.BODY_TEXT_LEN_LIMIT&&(D.body=i.BODY_LEN_ERROR,C="invalid"):(D.body=i.REQUIRED_FIELD,C="invalid"),D.body&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.body),x=!0),e.footerText&&e.footerText.length>i.HEADER_TEXT_LEN_LIMIT&&(D.footer=i.HEADER_LEN_ERROR,C="invalid"),(null==D?void 0:D.footer)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.footer),x=!0),e.actionsType===l.ACTIONS_TYPES.CTA_BTN){if(null===(s=null===(v=e.ctaBtn)||void 0===v?void 0:v.phoneNumber)||void 0===s?void 0:s.isChecked){const t=null===(E=e.ctaBtn.phoneNumber.btnText)||void 0===E?void 0:E.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;D.ctaBtn&&!t?(D.ctaBtn.phoneNumber.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.phoneNumber.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.phoneNumber.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),D.ctaBtn&&!n?(D.ctaBtn.phoneNumber.link=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&n&&n.length<10&&(D.ctaBtn.phoneNumber.link=i.VALID_PHONE_NUMBER,C="invalid")}if(null===(T=null===(u=e.ctaBtn)||void 0===u?void 0:u.websiteLinkBtn)||void 0===T?void 0:T.isChecked){const t=null===(p=e.ctaBtn.websiteLinkBtn.btnText)||void 0===p?void 0:p.trim(),n=null===(c=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===c?void 0:c.trim(),l=null===(_=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===_?void 0:_.trim();D.ctaBtn&&!t?(D.ctaBtn.websiteLink.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.websiteLink.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.websiteLink.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),!D.ctaBtn||n||l||(D.ctaBtn.websiteLink.link=i.REQUIRED_FIELD,C="invalid")}}else if(e.actionsType===l.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,l)=>{const o=n.text.trim();if(o)if(o.length>i.QUICK_REPLY_NAME_LEN_LIMIT)t[l]=i.QUICK_REPLY_LEN_ERROR,C="invalid";else if(A.test(o))t[l]=i.BUTTON_EMOJI_ERROR,C="invalid";else{const n=[...e.quickReply];n.splice(l,1);n.find((e=>e.text===o))&&(t[l]=i.QUICK_REPLY_NAME_ERROR,C="invalid")}else t[l]=i.REQUIRED_FIELD,C="invalid"})),D.quickReply=t}if(e.actionsType===l.ACTIONS_TYPES.CTA_BTN||e.actionsType===l.ACTIONS_TYPES.QUICK_REPLY){const e=null===(m=D.quickReply)||void 0===m?void 0:m.reduce(((e,t)=>e||!!t),!1);((null===(h=null===(R=null==D?void 0:D.ctaBtn)||void 0===R?void 0:R.websiteLink)||void 0===h?void 0:h.link)||(null===(I=null===(b=D.ctaBtn)||void 0===b?void 0:b.websiteLink)||void 0===I?void 0:I.btnText)||(null===(N=null===(L=D.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===N?void 0:N.link)||(null===(B=null===(y=D.ctaBtn)||void 0===y?void 0:y.phoneNumber)||void 0===B?void 0:B.btnText)||e)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.actionButtons),x=!0)}return{status:C,errors:D}}parseBodyComponent(e){let i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var l,o,a,d,r;const v=[];let s="";const E=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return E&&(null===(a=null===(o=E.example)||void 0===o?void 0:o.body_text)||void 0===a||a[0].forEach(((t,i)=>{var l,o;let a=null===(o=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o[i];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(n.placeHolderNamePattern);console.log({matchedPlaceholderName:r}),(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:i,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=E.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=E.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==v?void 0:v[n]){const l=v[n].variableName;return i?`${e}{{${l}}}`:`${e} <span> </span><span style="color: ${t.COLORS.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,i,o,a,d,r;const v={actionsType:l.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o[0].type)?l.ACTIONS_TYPES.QUICK_REPLY:l.ACTIONS_TYPES.CTA_BTN;if(v.actionsType=t,t===l.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==s?void 0:s.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];return v.quickReply=e,v}t===l.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==s?void 0:s.buttons)||void 0===r||r.forEach((t=>{var i,l,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(l=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===l?void 0:l[0])&&void 0!==o?o:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})))}return v}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var l;return e.__awaiter(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:o,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:E,quickReply:u,ctaBtn:T}=yield this.parseButtonComponent(t),p={quickReply:u,ctaBtn:T,meta:{name:n?`${t.label} Copy`:t.label,category:null===(l=t.category)||void 0===l?void 0:l.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:E,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:o,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:c}=this.validateState(p);return p.error=c,p}))}};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js"),i=require("../constants/TemplateConstants.js"),l=require("../models/TemplateMeta.js"),o=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e){var t,n,i,o,a,d,r,v,s,E;const u={headerType:l.HEADER_TYPES.NONE,headerVariables:[]},T=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(T){u.headerType=T.format,u.headerText=T.text,u.headerAssetLink=null===(i=null===(n=T.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(a=null===(o=T.example)||void 0===o?void 0:o.header_text)||void 0===a?void 0:a[0],l=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0];if(t&&l){const e=null==l?void 0:l.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(l),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(s=null===(v=T.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(E=u.headerText)||void 0===E?void 0:E.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,a,d,r,v,s,E,u,T,p,c,_,R,m,h,b,I,L,N,y,B;const A=/\p{Extended_Pictographic}/u;let C="valid";const D={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},O=new o.TemplateHelperUtils;let x=!1;const P=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>i.NAME_LEN_LIMIT?(D.meta.name=i.NAME_LEN_ERROR,C="invalid"):n.specialCharPattern.test(e.meta.name.trim())&&(D.meta.name=i.NO_SPECIAL_CHAR,C="invalid"):(D.meta.name=i.REQUIRED_FIELD,C="invalid"),D.meta.name&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.name),x=!0),e.headerType===l.HEADER_TYPES.TEXT){const t=null!==(d=null===(a=e.headerText)||void 0===a?void 0:a.trim())&&void 0!==d?d:"";if(t)if(t.length>i.HEADER_TEXT_LEN_LIMIT)D.header=i.HEADER_LEN_ERROR,C="invalid";else{const e=O.getTemplateVariablesFromState(t);e&&e.length>1&&(D.header=i.ONE_VAR_ALLOWED,C="invalid")}else D.header=i.REQUIRED_FIELD,C="invalid"}else e.headerType===l.HEADER_TYPES.DOCUMENT||e.headerType===l.HEADER_TYPES.IMAGE||(e.headerType,l.HEADER_TYPES.VIDEO);if(e.headerType!==l.HEADER_TYPES.DOCUMENT&&e.headerType!==l.HEADER_TYPES.IMAGE&&e.headerType!==l.HEADER_TYPES.VIDEO||e.headerAssetLink||(D.header=i.HEADER_ASSET_LINK_ERROR,C="invalid"),D.header&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.header),x=!0),e.bodyText?e.bodyTextRaw&&(null===(r=e.bodyTextRaw)||void 0===r?void 0:r.trim().length)>i.BODY_TEXT_LEN_LIMIT&&(D.body=i.BODY_LEN_ERROR,C="invalid"):(D.body=i.REQUIRED_FIELD,C="invalid"),D.body&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.body),x=!0),e.footerText&&e.footerText.length>i.HEADER_TEXT_LEN_LIMIT&&(D.footer=i.HEADER_LEN_ERROR,C="invalid"),(null==D?void 0:D.footer)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.footer),x=!0),e.actionsType===l.ACTIONS_TYPES.CTA_BTN){if(null===(s=null===(v=e.ctaBtn)||void 0===v?void 0:v.phoneNumber)||void 0===s?void 0:s.isChecked){const t=null===(E=e.ctaBtn.phoneNumber.btnText)||void 0===E?void 0:E.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;D.ctaBtn&&!t?(D.ctaBtn.phoneNumber.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.phoneNumber.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.phoneNumber.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),D.ctaBtn&&!n?(D.ctaBtn.phoneNumber.link=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&n&&n.length<10&&(D.ctaBtn.phoneNumber.link=i.VALID_PHONE_NUMBER,C="invalid")}if(null===(T=null===(u=e.ctaBtn)||void 0===u?void 0:u.websiteLinkBtn)||void 0===T?void 0:T.isChecked){const t=null===(p=e.ctaBtn.websiteLinkBtn.btnText)||void 0===p?void 0:p.trim(),n=null===(c=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===c?void 0:c.trim(),l=null===(_=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===_?void 0:_.trim();D.ctaBtn&&!t?(D.ctaBtn.websiteLink.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.websiteLink.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.websiteLink.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),!D.ctaBtn||n||l||(D.ctaBtn.websiteLink.link=i.REQUIRED_FIELD,C="invalid")}}else if(e.actionsType===l.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,l)=>{const o=n.text.trim();if(o)if(o.length>i.QUICK_REPLY_NAME_LEN_LIMIT)t[l]=i.QUICK_REPLY_LEN_ERROR,C="invalid";else if(A.test(o))t[l]=i.BUTTON_EMOJI_ERROR,C="invalid";else{const n=[...e.quickReply];n.splice(l,1);n.find((e=>e.text===o))&&(t[l]=i.QUICK_REPLY_NAME_ERROR,C="invalid")}else t[l]=i.REQUIRED_FIELD,C="invalid"})),D.quickReply=t}if(e.actionsType===l.ACTIONS_TYPES.CTA_BTN||e.actionsType===l.ACTIONS_TYPES.QUICK_REPLY){const e=null===(R=D.quickReply)||void 0===R?void 0:R.reduce(((e,t)=>e||!!t),!1);((null===(h=null===(m=null==D?void 0:D.ctaBtn)||void 0===m?void 0:m.websiteLink)||void 0===h?void 0:h.link)||(null===(I=null===(b=D.ctaBtn)||void 0===b?void 0:b.websiteLink)||void 0===I?void 0:I.btnText)||(null===(N=null===(L=D.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===N?void 0:N.link)||(null===(B=null===(y=D.ctaBtn)||void 0===y?void 0:y.phoneNumber)||void 0===B?void 0:B.btnText)||e)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.actionButtons),x=!0)}return{status:C,errors:D}}parseBodyComponent(e){let i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var l,o,a,d,r;const v=[];let s="";const E=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return E&&(null===(a=null===(o=E.example)||void 0===o?void 0:o.body_text)||void 0===a||a[0].forEach(((t,i)=>{var l,o;let a=null===(o=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o[i];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(n.placeHolderNamePattern);(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:i,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=E.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=E.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==v?void 0:v[n]){const l=v[n].variableName;return i?`${e}{{${l}}}`:`${e} <span> </span><span style="color: ${t.COLORS.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,i,o,a,d,r;const v={actionsType:l.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o[0].type)?l.ACTIONS_TYPES.QUICK_REPLY:l.ACTIONS_TYPES.CTA_BTN;if(v.actionsType=t,t===l.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==s?void 0:s.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];return v.quickReply=e,v}t===l.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==s?void 0:s.buttons)||void 0===r||r.forEach((t=>{var i,l,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(l=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===l?void 0:l[0])&&void 0!==o?o:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})))}return v}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var l;return e.__awaiter(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:o,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:E,quickReply:u,ctaBtn:T}=yield this.parseButtonComponent(t),p={quickReply:u,ctaBtn:T,meta:{name:n?`${t.label} Copy`:t.label,category:null===(l=t.category)||void 0===l?void 0:l.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:E,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:o,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:c}=this.validateState(p);return p.error=c,p}))}};
@@ -198,6 +198,7 @@ export type WhatsAppMediaUploadRequest = {
198
198
  };
199
199
  export interface WhatsAppTemplateVariables {
200
200
  body: CUSTOM_VARIABLE[];
201
+ header: CUSTOM_VARIABLE[];
201
202
  buttons: TEMPLATE_BUTTON[];
202
203
  }
203
204
  export type CTABtnValType = {
@@ -7,6 +7,7 @@ export interface VariableListInterfaceV2 {
7
7
  }
8
8
  export interface Variable {
9
9
  description?: string;
10
+ defaultValue?: string;
10
11
  displayName: string;
11
12
  actualValue: string;
12
13
  variableType: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const Menus: ({
3
2
  displayName: string;
4
3
  key: number;
@@ -1,10 +1,14 @@
1
+ import { Variable } from '../add-variableV2/AddVariableV2';
1
2
  import { SelectedVariable } from '../add-variableV2/types';
2
3
  export declare const InputWithVariables: (props: {
3
4
  variablesList: any;
4
- onChange: (val: SelectedVariable) => void;
5
+ onChange: (val: SelectedVariable | Variable) => void;
6
+ onBlur?: ((e: Event, val?: SelectedVariable | Variable) => void) | undefined;
5
7
  addVarBoxRight: string;
6
8
  allowMix: boolean;
7
9
  prevVariable: SelectedVariable;
8
10
  showHelp?: boolean | undefined;
9
11
  onlyVariables?: boolean | undefined;
12
+ showSideVariablePanel?: boolean | undefined;
13
+ placeHolder?: string | undefined;
10
14
  }) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
- import{jsxs as e,jsx as a}from"react/jsx-runtime";import l from"../../assets/icons/PlusIcon.js";import{useRef as r,useState as i,useEffect as t}from"react";import o from"styled-components";import{v4 as d}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableStyled as n}from"../add-variableV2/AddVariableBox.styled.js";import{AddVariableV2 as c}from"../add-variableV2/AddVariableV2.js";import{Input as u}from"../input/Input.js";import{BodyCaption as v}from"../TypographyStyle.js";const p=o=>{const s=r(null),[p,g]=i(!1),[m]=i(d()),[h,V]=i(),[T,f]=i(o.prevVariable),[y,j]=i(!1),[x,w]=i(!1);return t((()=>{h&&h.actualValue&&(o.allowMix?f((e=>({actualValue:e.actualValue+h.actualValue,variableType:"string"}))):f((e=>({actualValue:h.actualValue,variableType:h.variableType,needsFetching:h.needsFetching}))))}),[h]),t((()=>{o.onChange(T)}),[T]),e(b,Object.assign({isVar:/^{{.*}}$/.test(T.actualValue)},{children:[a(u,{id:m,ref:s,skipFocus:!0,textControl:!0,isActive:p,value:T.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:"Add a value",onChangeText:function(e,a){if(o.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||f({actualValue:"",variableType:"string"})}else o.allowMix?f({actualValue:e,variableType:"string"}):f({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;g(!0),w(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||y||j(!0)},onBlur:e=>{var a,l,r,i,t,o,d;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(o=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(s.current&&s.current.focus(),g(!0)):"Search..."===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?g(!0):(g(!1),j(!1),w(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[T.actualValue&&o.showHelp?a("div",Object.assign({style:{marginTop:4}},{children:a(v,{children:`This value is of type ${T.variableType}`})})):a("div",{}),x&&a(n,Object.assign({right:o.addVarBoxRight,id:"addVar",onClick:()=>{j(!y)}},{children:e("div",Object.assign({className:"add"},{children:[a(l,{color:"white"}),a("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),y&&a(c,{data:o.variablesList,showVariable:!0,setShowVariable:()=>{j(!1)},variableValue:h,setVariableValue:V,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?s.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==m&&(j(!1),w(!1),g(!1)):(j(!1),w(!1),g(!1))}})]}))},b=o.div`
1
+ import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as o}from"react";import t from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as b}from"../TypographyStyle.js";const h=t=>{const n=i(null),[h,m]=d(!1),[g]=d(s()),[T,f]=d(),[y,j]=d(t.prevVariable),[x,w]=d(!1),[S,A]=d(!1);return o((()=>{T&&T.actualValue&&(t.allowMix?j((e=>({actualValue:e.actualValue+T.actualValue,variableType:"string"}))):j((e=>({actualValue:T.actualValue,variableType:T.variableType,needsFetching:T.needsFetching}))))}),[T]),o((()=>{t.onChange(y)}),[y]),e(a,{children:[e(V,Object.assign({isVar:/^{{.*}}$/.test(y.actualValue)},{children:[l(p,{id:g,ref:n,skipFocus:!0,textControl:!0,isActive:h,value:y.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:t.placeHolder||"Add a value",onChangeText:function(e,a){if(t.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||j({actualValue:"",variableType:"string"})}else t.allowMix?j({actualValue:e,variableType:"string"}):j({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;m(!0),A(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||x||w(!0)},onBlur:e=>{var a,l,r,i,d,o,s,c;null===(a=t.onBlur)||void 0===a||a.call(t,e,y),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"varList"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("exlualr0"))||(null===(s=null===(o=e.relatedTarget)||void 0===o?void 0:o.className)||void 0===s?void 0:s.includes("sc-dZoequ "))?(n.current&&n.current.focus(),m(!0)):"Search..."===(null===(c=e.relatedTarget)||void 0===c?void 0:c.placeholder)?m(!0):(m(!1),w(!1),A(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[y.actualValue&&t.showHelp?l("div",Object.assign({style:{marginTop:4}},{children:l(b,{children:`This value is of type ${y.variableType}`})})):l("div",{}),S&&l(v,Object.assign({right:t.addVarBoxRight,id:"addVar",onClick:()=>{w(!x)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!t.showSideVariablePanel&&x&&l(u,{data:t.variablesList,showVariable:!0,setShowVariable:()=>{w(!1)},variableValue:T,setVariableValue:f,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?n.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==g&&(w(!1),A(!1),m(!1)):(w(!1),A(!1),m(!1))}})]})),t.showSideVariablePanel&&x&&l(c,{zIndex:2e3,data:t.variablesList,showVariable:x,setShowVariable:w,placeholder:"Add a variable",customTrigger:e=>{j(e)}})]})},V=t.div`
2
2
  margin-bottom: 32px;
3
3
  input {
4
- color: ${e=>e.isVar?s.stroke.brand:"black"};
4
+ color: ${e=>e.isVar?n.stroke.brand:"black"};
5
5
  }
6
- `;export{p as InputWithVariables};
6
+ `;export{h as InputWithVariables};
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import d from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:g,showVariableMapping:b,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y,onBackPress:E,enabledCustomText:V}=u;var k,D;o((()=>{z(C)}),[C]);const[I,A]=a(v===s.EMAIL?"desktop":"mobile"),[O,z]=a(C),[B,F]=a(!1),[H,$]=a(h),[N,U]=a(null!=f?f:[]),[W,_]=a(!1);const q=i((()=>p(S)),[S]);return e(c.Provider,Object.assign({value:{template:H,setTemplate:$,device:I,setDevice:A,display_content:O,setDisplayContent:z,originalVariableList:N,setOriginalVariableList:U,isError:B,setIsError:F,channel:v,globalNormalizedPlaceholders:q,templateSelectionTriggered:W,setTemplateSelectionTriggered:_,enabledCustomText:V}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&b?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==H?void 0:H.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(k=null==H?void 0:H.category)&&void 0!==k?k:"")} • ${null!==(D=null==H?void 0:H.templateCategory)&&void 0!==D?D:""}`:"",onBackPress:()=>{null==E||E()}},{children:[e(m,{showVariableMapping:b,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y}),M?e(d,{onSelect:function(){const e=null==M?void 0:M(H,N,null!=O?O:"");e?F(!!e):_(!0)}}):e(l,{})]}))}))};export{u as TemplateContextMapper};
1
+ import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import d from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:g,showVariableMapping:b,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y,onBackPress:E,enabledCustomText:V}=u;var k,D;o((()=>{z(C)}),[C]);const[I,A]=a(v===s.EMAIL?"desktop":"mobile"),[O,z]=a(C),[B,F]=a(!1),[H,$]=a(h),[N,U]=a(null!=f?f:[]),[W,_]=a(!1);const q=i((()=>p(S)),[S]);return e(c.Provider,Object.assign({value:{template:H,setTemplate:$,device:I,setDevice:A,display_content:O,setDisplayContent:z,originalVariableList:N,setOriginalVariableList:U,isError:B,setIsError:F,channel:v,globalNormalizedPlaceholders:q,templateSelectionTriggered:W,setTemplateSelectionTriggered:_,enabledCustomText:V}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&b?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==H?void 0:H.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(k=null==H?void 0:H.category)&&void 0!==k?k:"")} • ${null!==(D=null==H?void 0:H.templateCategory)&&void 0!==D?D:""}`:"",onBackPress:()=>{null==E||E()}},{children:[e(m,{showVariableMapping:b,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y}),M?e(d,{onSelect:function(){const e=null==M?void 0:M(H,N,null!=O?O:"");console.log("template",H),e?F(!!e):_(!0)}}):e(l,{})]}))}))};export{u as TemplateContextMapper};
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
2
3
  export interface EditMediaV2Props {
3
4
  imageName: string[];
@@ -6,6 +7,7 @@ export interface EditMediaV2Props {
6
7
  isLoading?: boolean;
7
8
  mediaType?: HEADER_TYPES;
8
9
  handleImageChange?: () => void;
10
+ setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
9
11
  }
10
12
  declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
11
13
  export default EditMediaV2;
@@ -1,8 +1,8 @@
1
- import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as c}from"../../spinner/Spinner.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as a,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const v=l.div`
1
+ import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as c}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as a,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as v}from"./EditMediaV2.style.js";const y=l.div`
2
2
  padding-left: 14px;
3
3
  padding-right: 6px;
4
4
  width: 44px;
5
5
  height: 24px;
6
6
  border-left: 1px solid ${g.stroke.primary};
7
7
  cursor: pointer;
8
- `,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O}=l,C=null==u?void 0:u[0].split("/"),L=null==C?void 0:C[C.length-1];return e(f,{children:[t(j,Object.assign({error:!!b,onClick:b?O:void 0},{children:b?t(s,{color:g.content.brand,width:32,height:32}):x?t(c,{size:"small"}):w===d.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===d.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[t("div",Object.assign({style:{flex:1}},{children:u&&b?t(i,{}):x?t(a,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||L}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!b&&!x&&t(v,Object.assign({onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{u as default};
8
+ `,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O,setOpenEditMedia:C}=l,L=null==u?void 0:u[0].split("/"),E=null==L?void 0:L[L.length-1];return e(f,{children:[t(j,Object.assign({error:!!b,onClick:b?O:void 0},{children:b?t(s,{color:g.content.brand,width:32,height:32}):x?t(d,{size:"small"}):w===c.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===c.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(v,{children:[t("div",Object.assign({style:{flex:1}},{children:u&&b?t(i,{}):x?t(a,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||E}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!b&&!x&&t(y,Object.assign({onClick:()=>null==C?void 0:C(!0),onKeyDown:()=>null==C?void 0:C(!0),role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{u as default};
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
+ import { VariableListInterfaceV2 } from "../../add-variableV2";
2
3
  import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
3
4
  declare const EditMediaTemplateMediaV2: React.FC<{
4
5
  mediaComponent: WhatsAppTemplate['components'][0];
5
6
  template: WhatsAppTemplate;
6
7
  whatsappSpecificPickerMeta: WhatsAppPickerMeta;
7
8
  updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
9
+ variableList?: VariableListInterfaceV2[];
8
10
  }>;
9
11
  export default EditMediaTemplateMediaV2;
@@ -1 +1 @@
1
- import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import n,{useState as r}from"react";import{FileUploaderHelper as a}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import p from"./EditMediaV2.js";const m=m=>{let{mediaComponent:c,template:d,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:u}=m;var v,g;const[h,j]=r(void 0),[C,y]=r(),I=n.createRef(),[M,k]=r(!1),[w,A]=r("");function E(o){var i;return e(this,void 0,void 0,(function*(){const e=new a;if(o instanceof Blob){const t=e.validate(o);if(t)A(t),k(!1);else{const e=c.format===s.IMAGE,t=yield u.uploadMediaFiles({file:o,fileName:h,isImage:e});if(t.success){const[e]=o.type.split("/");f(null!==(i=t.url)&&void 0!==i?i:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else A("An unknown technical error occured");k(!1)}}else A("An unknown technical error occured"),k(!1)}))}let U;return U=c.format===s.IMAGE?"image/png, image/jpeg":c.format===s.VIDEO?"video/mp4":"application/pdf",o(i,{children:[!!C&&t(l,{aspectRatio:15/8,src:C,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),A("");const e=yield fetch(o);E(yield e.blob()).then((()=>{y(void 0)}))}))},onCancel:()=>{k(!1),y("")}}),t("input",{ref:I,style:{display:"none"},type:"file",onChange:function(e){var o;A(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(c.format===s.IMAGE){const e=new FileReader;y(""),j(""),e.onload=()=>{y(e.result),j(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else E(i)},accept:U}),t(p,{imageName:null!==(g=null===(v=null==c?void 0:c.example)||void 0===v?void 0:v.header_handle)&&void 0!==g?g:[],handleImageChange:function(){var e;(null===(e=null==I?void 0:I.current)||void 0===e?void 0:e.click)&&I.current.click()},mediaType:null==c?void 0:c.format,error:w,isLoading:M})]})};export{m as default};
1
+ import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as i,Fragment as t,jsx as o}from"react/jsx-runtime";import a,{useState as n}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import{StyledModal as s}from"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{InputWithVariables as d}from"../../input-with-vars/InputWithVariables.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import c from"./EditMediaV2.js";const m=m=>{let{mediaComponent:u,template:f,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:h,variableList:g}=m;var b,j;const[y,C]=n(void 0),[I,M]=n(),[w,x]=n(!1),E=a.createRef(),[V,k]=n(!1),[A,O]=n("");let R;function T(i){return e(this,void 0,void 0,(function*(){if(i){if(i.startsWith("https")){k(!0),O("");const e=yield fetch(i),t=yield e.blob();yield B(t)}}else U()}))}function U(){var e;(null===(e=null==E?void 0:E.current)||void 0===e?void 0:e.click)&&E.current.click()}function B(i){var t;return e(this,void 0,void 0,(function*(){const e=new r;if(i instanceof Blob){const o=e.validate(i);if(o)O(o),x(!1),k(!1);else{const e=u.format===p.IMAGE,o=yield h.uploadMediaFiles({file:i,fileName:y,isImage:e});if(o.success){const[e]=i.type.split("/");v(null!==(t=o.url)&&void 0!==t?t:"","application"===e?p.DOCUMENT:p[e.toUpperCase()])}else O("An unknown technical error occured");k(!1),x(!1)}}else O("An unknown technical error occured"),x(!1),k(!1)}))}return R=u.format===p.IMAGE?"image/png, image/jpeg":u.format===p.VIDEO?"video/mp4":"application/pdf",i(t,{children:[o(s,Object.assign({open:w,zIndex:2e3,onClose:()=>x(!1),width:"480px"},{children:i("div",Object.assign({style:{padding:16}},{children:[o(d,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:g,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,i)=>{i&&T(i.actualValue)}}),o("button",Object.assign({onClick:()=>T()},{children:"upload media"}))]}))})),!!I&&o(l,{aspectRatio:15/8,src:I,onCropComplete:function(i){return e(this,void 0,void 0,(function*(){k(!1),O("");const e=yield fetch(i);B(yield e.blob()).then((()=>{M(void 0)}))}))},onCancel:()=>{k(!1),M("")}}),o("input",{ref:E,style:{display:"none"},type:"file",onChange:function(e){var i;O(""),k(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(u.format===p.IMAGE){const e=new FileReader;M(""),C(""),e.onload=()=>{M(e.result),C(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else B(t)},accept:R}),o(c,{imageName:null!==(j=null===(b=null==u?void 0:u.example)||void 0===b?void 0:b.header_handle)&&void 0!==j?j:[],handleImageChange:U,mediaType:null==u?void 0:u.format,error:A,isLoading:V,setOpenEditMedia:x})]})};export{m as default};
@@ -1 +1 @@
1
- import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as a}from"./VariableConnectorsPanel.js";import s from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m,showVariableModal:b,variableList:v}=r;var g,h,f,j,T,O,x,y,E,V,C,w;const{originalVariableList:B}=e(),{descriptionComponents:I,urlBtns:L,qrbBtns:R,imageComponent:A,bodyVariables:M,headerVariables:U}=n(c);function S(t,o){var e,n,i,l;const a=Object.assign({},c),s=null==a?void 0:a.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==s&&s>-1){const d=null===(e=null==a?void 0:a.components[s].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},a.components[s]),{buttons:p}),c=Object.assign(Object.assign({},a.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});a.mapping=c;const u=[...a.components];u[s]=r,a.components=u}}null==u||u(a)}function k(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return t(a,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!A&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:A,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c})}),(M.length>0||U.length>0)&&o(d,{containerStyle:{paddingTop:A?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==I?void 0:I.map(((t,e)=>o(s,{originalVariableList:B,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body,showVariableModal:b,variableList:v},e))),(null===(h=null===(g=L[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)&&(null===(T=null===(j=null===(f=L[0])||void 0===f?void 0:f.component)||void 0===j?void 0:j.buttons)||void 0===T?void 0:T.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(O=null==B?void 0:B.buttons)||void 0===O?void 0:O.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:B,updateSelectedURLTemplateBtn:S},`${e}`)})),(null===(y=null===(x=R[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)&&(null===(C=null===(V=null===(E=R[0])||void 0===E?void 0:E.component)||void 0===V?void 0:V.buttons)||void 0===C?void 0:C.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(w=null==B?void 0:B.buttons)||void 0===w?void 0:w.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:B,updateSelectedQRBTemplateBtn:k},`${e}`)}))]}))};export{r as default};
1
+ import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as a}from"./VariableConnectorsPanel.js";import s from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m,showVariableModal:b,variableList:v}=r;var g,h,f,j,T,O,x,y,E,V,C,w;const{originalVariableList:L}=e(),{descriptionComponents:B,urlBtns:I,qrbBtns:R,imageComponent:A,bodyVariables:M,headerVariables:U}=n(c);function S(t,o){var e,n,i,l;const a=Object.assign({},c),s=null==a?void 0:a.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==s&&s>-1){const d=null===(e=null==a?void 0:a.components[s].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},a.components[s]),{buttons:p}),c=Object.assign(Object.assign({},a.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});a.mapping=c;const u=[...a.components];u[s]=r,a.components=u}}null==u||u(a)}function k(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return t(a,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!A&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:A,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c,variableList:v})}),(M.length>0||U.length>0)&&o(d,{containerStyle:{paddingTop:A?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==B?void 0:B.map(((t,e)=>o(s,{originalVariableList:L,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body,showVariableModal:b,variableList:v},e))),(null===(h=null===(g=I[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)&&(null===(T=null===(j=null===(f=I[0])||void 0===f?void 0:f.component)||void 0===j?void 0:j.buttons)||void 0===T?void 0:T.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(O=null==L?void 0:L.buttons)||void 0===O?void 0:O.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:L,updateSelectedURLTemplateBtn:S},`${e}`)})),(null===(y=null===(x=R[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)&&(null===(C=null===(V=null===(E=R[0])||void 0===E?void 0:E.component)||void 0===V?void 0:V.buttons)||void 0===C?void 0:C.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(w=null==L?void 0:L.buttons)||void 0===w?void 0:w.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:L,updateSelectedQRBTemplateBtn:k},`${e}`)}))]}))};export{r as default};
@@ -14,6 +14,7 @@ export interface VariableConnectorProps {
14
14
  showVariableModal?: boolean;
15
15
  variableList?: VariableListInterfaceV2[];
16
16
  setShowDiscountCheckBox?: any;
17
+ componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
17
18
  }
18
19
  declare const VariableConnector: React.FC<VariableConnectorProps>;
19
20
  export default VariableConnector;
@@ -1,7 +1,7 @@
1
- import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as a,useEffect as o}from"react";import n from"styled-components";import{AddVariableV2SideModal as i}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as u}from"../../dropdown/Dropdown.js";import{Input as s}from"../../input/Input.js";import{truncate as d}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as r}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as c}from"../../template-preview/models/Channels.js";import{BodySecondary as m,BodyPrimary as v}from"../../TypographyStyle.js";import p from"../../../utils/StringUtils.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as h}from"../utils/getVariableNameEmail.js";const x=n.div`
1
+ import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as a,useEffect as i}from"react";import n from"styled-components";import{AddVariableV2SideModal as o}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as u}from"../../input/Input.js";import{truncate as d}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as r}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as c}from"../../template-preview/models/Channels.js";import{BodySecondary as p,BodyPrimary as m}from"../../TypographyStyle.js";import v from"../../../utils/StringUtils.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as h}from"../utils/getVariableNameEmail.js";const x=n.div`
2
2
  /* surface/$color-background-warning-light */
3
3
 
4
4
  background: ${e=>e.focused&&e.channel===c.EMAIL?b.background.warning.light:"transparent"};
5
5
  border-radius: 4px;
6
6
  padding: 8px 10px;
7
- `,f={value:"custom_link",label:"Custom URL"},_={value:"custom_text",label:"Custom text"},j=n=>{let{onFocus:j,variable:k,index:y,showVariableModal:V,variableList:A,setShowDiscountCheckBox:O}=n;var T,E;const[P,S]=a(!1),[w,L]=a(""),[C,M]=a([]),[W,$]=a(),[H,I]=a(!1),[B,N]=a(!1),{device:z,channel:R,isError:U,originalVariableList:D,template:Z,templateSelectionTriggered:G,setTemplate:q,setDisplayContent:F,setOriginalVariableList:Y,globalNormalizedPlaceholders:J,enabledCustomText:K}=g();function Q(e,l){var t,a,o;const n=e;L(""),$(n),R===c.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(X(null!==(t=n.value)&&void 0!==t?t:"","string"),null==ee||ee(null!==(a=k.index)&&void 0!==a?a:0,`[[${n.value}]]`)):(null==ee||ee(null!==(o=k.index)&&void 0!==o?o:0,k.variableName),X("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?X(n.value,"url"===n.bikPlaceholderType?"link":"string"):(L(""),X("",n.value))}function X(e,l){var t,a;const o="custom_link"===l?"link":"custom_text"===l?"string":l;if(R!==c.WHATSAPP){const a=h(y+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),i=R===c.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:k.variableName);const u=D.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==Y||Y(u)}if(R===c.WHATSAPP){const l=null===(a=D.body)||void 0===a?void 0:a.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==Y||Y((e=>Object.assign(Object.assign({},e),{body:l,buttons:D.buttons})))}}function ee(e,l){var t;const a=Object.assign({},Z),o=null===(t=null==a?void 0:a.components)||void 0===t?void 0:t.map((t=>{var a,o,n,i,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(o=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===o?void 0:o[0])){const t=[...null!==(u=null===(i=null===(n=s.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[t]});return Object.assign(Object.assign({},s),{example:a})}return t}));a.components=o,null==q||q(a)}return o((()=>{P&&(null==j||j())}),[P]),o((()=>{!function(){var e,l,t,a,o;const n="mobile"===z?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),u=(null!==(a=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(o=null==i?void 0:i.contentWindow)||void 0===o?void 0:o.document.head.innerHTML);R===c.EMAIL&&(null==F||F(u))}()}),[G]),o((()=>{var e;const l=[];let t=[];if(R!==c.MESSAGE||K){"link"===(null==k?void 0:k.type)?(l.push({label:"",options:[f,_]}),$(f)):(l.push({label:"",options:[f,_]}),$(_));const e=null!=J?J:[];M([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:p.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}else{const e=null!=J?J:[];M([{label:"",options:[_,f]},...e]),t=[{label:"",options:[_,f]},...e]}if((R===c.WHATSAPP||R===c.EMAIL||R===c.MESSAGE)&&k.updatedValue)if(r.test(k.updatedValue)&&R===c.WHATSAPP||k.updatedValue.startsWith("{{")&&R!==c.WHATSAPP){const e=function(e,l,t){var a;let o={label:"",value:""};const n=t===c.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");V?o={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(o=e)}))}));return o}(k,t,R);e.value&&$(e)}else(null===(e=k.updatedValue)||void 0===e?void 0:e.startsWith("https"))?($(f),L(k.updatedValue.split("https://")[1])):($(_),L(k.updatedValue))}),[]),o((()=>{z&&W&&w&&setTimeout((()=>{X("custom_link"===(null==W?void 0:W.value)?`https://${w}`:w,W.value)}),100)}),[z]),o((()=>{!B&&W&&k.updatedValue&&setTimeout((()=>{X("custom_link"===(null==W?void 0:W.value)?`https://${k.updatedValue}`:k.updatedValue,W.value),N(!0)}),100)}),[W]),e(x,Object.assign({channel:R,focused:P,onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(m,Object.assign({style:{color:U&&!W?b.content.negative:b.content.primary}},{children:[null===(T=k.variableName)||void 0===T?void 0:T.replace("{{","").replace("}}","")," ","link"===(null==k?void 0:k.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:V?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==W?void 0:W.label)?"space-between":"flex-end"}},{children:[l(v,{children:d(null!==(E=null==W?void 0:W.label)&&void 0!==E?E:"",20,!0)}),l(t,{onClick:()=>{I(!H)},width:24,height:24,color:b.content.primary})]})):l(u,{options:C,isSearchable:!1,onSelect:Q,defaultOptions:W?[Object.assign(Object.assign({},W),{selected:!0})]:[]})})),("custom_text"===(null==W?void 0:W.value)||"custom_link"===(null==W?void 0:W.value))&&l(s,{labelText:"custom_text"===(null==W?void 0:W.value)?"Custom text value":"custom_link"===(null==W?void 0:W.value)?"Custom URL value":"",id:`variable-value-${null==W?void 0:W.value}-${y}`,value:w,errorMessage:U?w&&0!==w.trim().length?"custom_link"!==W.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${w.trim()}`)&&0!==w.trim().length?"custom_link"!==W.value&&w.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==W?void 0:W.value)?void 0:30,prefixText:"custom_link"===(null==W?void 0:W.value)?"https://":"",placeholder:"link"===k.type||"custom_link"===W.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;L(l);const a="custom_link"===(null==W?void 0:W.value)?`https://${l}`:l;X(a,e),R===c.WHATSAPP&&(null==ee||ee(null!==(t=k.index)&&void 0!==t?t:0,a))}(W.value,e)}}),H&&l(i,{zIndex:2e3,data:null!=A?A:[],showVariable:H,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{console.log("variable",e),null==O||O(!1),"{{custom.url}}"===e.actualValue?Q({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Q({label:e.displayName,selected:!0,value:"custom_text"}):Q({label:e.actualValue,selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{x as Container,j as default};
7
+ `,j={value:"custom_link",label:"Custom URL"},_={value:"custom_text",label:"Custom text"},y=n=>{let{onFocus:y,variable:f,index:O,showVariableModal:k,variableList:A,setShowDiscountCheckBox:V,componentType:E}=n;var T,P;const[S,w]=a(!1),[L,C]=a(""),[H,M]=a([]),[W,$]=a(),[B,D]=a(!1),[I,R]=a(!1),{device:N,channel:z,isError:U,originalVariableList:Y,template:Z,templateSelectionTriggered:G,setTemplate:q,setDisplayContent:F,setOriginalVariableList:J,globalNormalizedPlaceholders:K,enabledCustomText:Q}=g();function X(e,l){var t,a,i;const n=e;C(""),$(n),z===c.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(ee(null!==(t=n.value)&&void 0!==t?t:"","string"),null==le||le(null!==(a=f.index)&&void 0!==a?a:0,n.value,!0)):(null==le||le(null!==(i=f.index)&&void 0!==i?i:0,f.variableName,!0,"custom_text"),ee("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ee(n.value,"url"===n.bikPlaceholderType?"link":"string"):(C(""),ee("",n.value))}function ee(e,l){var t,a,i;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(z!==c.WHATSAPP){const a=h(O+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===N?"template_html_mobile":"template_html_desktop"),o=z===c.EMAIL?null===(t=null==i?void 0:i.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:f.variableName);const s=Y.map(((l,t)=>t===O?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==J||J(s)}if(z===c.WHATSAPP){const l=Y;let t=l.body,o=l.header;"BODY"===E?t=null===(a=l.body)||void 0===a?void 0:a.map(((l,t)=>t===O?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l)):"HEADER"===E&&(o=null===(i=l.header)||void 0===i?void 0:i.map(((l,t)=>t===O?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l))),null==J||J((e=>Object.assign(Object.assign({},e),{header:o,body:t,buttons:l.buttons})))}}function le(e,l,t,a){var i,n,o;const s=Object.assign({},Z),u=null===(i=null==s?void 0:s.components)||void 0===i?void 0:i.map((t=>{var a,i,n,o,s,u,d,r;const c=Object.assign({},t);if("BODY"===t.type&&"BODY"===E){if(null===(i=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const t=[...null!==(s=null===(o=null===(n=c.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{body_text:[t]});return Object.assign(Object.assign({},c),{example:a})}}else if("HEADER"===t.type&&"HEADER"===E&&(null===(u=t.example)||void 0===u?void 0:u.header_text)){const t=[...null!==(r=null===(d=c.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{header_text:t});return Object.assign(Object.assign({},c),{example:a})}return t}));s.components=u,t&&("BODY"===E&&(null===(n=null==s?void 0:s.mapping)||void 0===n?void 0:n.body)?s.mapping=Object.assign(Object.assign({},s.mapping),{body:s.mapping.body.map(((t,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:l:t))}):"HEADER"===E&&(null===(o=null==s?void 0:s.mapping)||void 0===o?void 0:o.header)&&(s.mapping=Object.assign(Object.assign({},s.mapping),{header:s.mapping.header.map(((t,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:l:t))}))),null==q||q(Object.assign({},s))}return i((()=>{S&&(null==y||y())}),[S]),i((()=>{!function(){var e,l,t,a,i;const n="mobile"===N?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(t=null===(l=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);z===c.EMAIL&&(null==F||F(s))}()}),[G]),i((()=>{var e;const l=[];let t=[];if(z!==c.MESSAGE||Q){"link"===(null==f?void 0:f.type)?(l.push({label:"",options:[j,_]}),$(j)):(l.push({label:"",options:[j,_]}),$(_));const e=null!=K?K:[];M([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:v.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}else{const e=null!=K?K:[];M([{label:"",options:[_,j]},...e]),t=[{label:"",options:[_,j]},...e]}if((z===c.WHATSAPP||z===c.EMAIL||z===c.MESSAGE)&&f.updatedValue)if(r.test(f.updatedValue)&&z===c.WHATSAPP||f.updatedValue.startsWith("{{")&&z!==c.WHATSAPP){const e=function(e,l,t){var a;let i={label:"",value:""};const n=t===c.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");k?i={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(f,t,z);e.value&&$(e)}else(null===(e=f.updatedValue)||void 0===e?void 0:e.startsWith("https"))?($(j),C(f.updatedValue.split("https://")[1])):($(_),C(f.updatedValue))}),[]),i((()=>{N&&W&&L&&setTimeout((()=>{ee("custom_link"===(null==W?void 0:W.value)?`https://${L}`:L,W.value)}),100)}),[N]),i((()=>{!I&&W&&f.updatedValue&&setTimeout((()=>{ee("custom_link"===(null==W?void 0:W.value)?`https://${f.updatedValue}`:f.updatedValue,W.value),R(!0)}),100)}),[W]),e(x,Object.assign({channel:z,focused:S,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(p,Object.assign({style:{color:U&&!W?b.content.negative:b.content.primary}},{children:[null===(T=f.variableName)||void 0===T?void 0:T.replace("{{","").replace("}}","")," ","link"===(null==f?void 0:f.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==W?void 0:W.label)?"space-between":"flex-end"}},{children:[l(m,{children:d(null!==(P=null==W?void 0:W.label)&&void 0!==P?P:"",20,!0)}),l(t,{onClick:()=>{D(!B)},width:24,height:24,color:b.content.primary})]})):l(s,{options:H,isSearchable:!1,onSelect:X,defaultOptions:W?[Object.assign(Object.assign({},W),{selected:!0})]:[]})})),("custom_text"===(null==W?void 0:W.value)||"custom_link"===(null==W?void 0:W.value))&&l(u,{labelText:"custom_text"===(null==W?void 0:W.value)?"Custom text value":"custom_link"===(null==W?void 0:W.value)?"Custom URL value":"",id:`variable-value-${null==W?void 0:W.value}-${O}`,value:L,errorMessage:U?L&&0!==L.trim().length?"custom_link"!==W.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${L.trim()}`)&&0!==L.trim().length?"custom_link"!==W.value&&L.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==W?void 0:W.value)?void 0:30,prefixText:"custom_link"===(null==W?void 0:W.value)?"https://":"",placeholder:"link"===f.type||"custom_link"===W.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;C(l);const a="custom_link"===(null==W?void 0:W.value)?`https://${l}`:l;ee(a,e),z===c.WHATSAPP&&(null==le||le(null!==(t=f.index)&&void 0!==t?t:0,a))}(W.value,e)}}),B&&l(o,{zIndex:2e3,data:null!=A?A:[],showVariable:B,setShowVariable:D,placeholder:"Add a variable",customTrigger:e=>{null==V||V(!1),"{{custom.url}}"===e.actualValue?X({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?X({label:e.displayName,selected:!0,value:"custom_text"}):X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{x as Container,y as default};
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
3
2
  import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
4
3
  export type ComponentType = WhatsAppTemplate['components'][0];
@@ -10,5 +9,5 @@ export interface VariableConnectorWhatsAppProps {
10
9
  showVariableModal?: boolean;
11
10
  variableList?: VariableListInterfaceV2[];
12
11
  }
13
- declare const VariableConnectorWhatsApp: React.FC<VariableConnectorWhatsAppProps>;
12
+ declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
14
13
  export default VariableConnectorWhatsApp;
@@ -1 +1 @@
1
- import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import{Input as i}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:d,type:p,showVariableModal:m,variableList:c}=s;var b;const{originalVariableList:v}=l();return"BODY"===d.type?e("div",{children:null===(b=null==v?void 0:v.body)||void 0===b?void 0:b.map(((t,l)=>t.isEditableVariable?e(n,{index:l,variable:t,showVariableModal:m,variableList:c},`${l}-${t.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(i,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),l)))}):e(t,{})};export{s as default};
1
+ import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{let{descriptionComponent:s,type:p,showVariableModal:c,variableList:b}=d;var m,v;const{originalVariableList:y}=l();return console.log("originalVariableList",y),"BODY"===s.type?e("div",{children:null===(m=null==y?void 0:y.body)||void 0===m?void 0:m.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:b,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(o,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):"HEADER"===s.type?e("div",{children:null===(v=null==y?void 0:y.header)||void 0===v?void 0:v.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:b,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(o,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):e(i,{})};export{d as default};
@@ -1 +1 @@
1
- const a=/\[\[[A-Za-z0-9 .]+\]\]/,z=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,A=/(\[\[|\{\{||\(\()(.*)(\)\)|\}\}|\]\])/,Z=/\{\{[A-Za-z0-9 .]+\}\}/g,g=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,_=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,o=/\{\{[A-Za-z0-9 ._]+\}\}/,t=/\{\{[A-Za-z0-9 _]+\}\}/g,c=Z,e=/\[([^[]+)\](\(.*\))/,n=/[((|))]/;export{n as editableBracketPattern,z as editableVarPattern,g as globalHalfVariablePattern,Z as globalVariablePattern,a as lockedVarPattern,A as placeHolderNamePattern,e as previewLinkMDFormatPattern,_ as specialCharPattern,c as templateVariablePattern,o as variablePattern,t as variablePatternGlobal};
1
+ const a=/\[\[[A-Za-z0-9 .]+\]\]/,z=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,A=/(\[\[|\{\{|\(\()(.*?)(\)\)|\}\}|\]\])/,Z=/\{\{[A-Za-z0-9 .]+\}\}/g,g=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,_=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,o=/\{\{[A-Za-z0-9 ._]+\}\}/,t=/\{\{[A-Za-z0-9 _]+\}\}/g,c=Z,e=/\[([^[]+)\](\(.*\))/,n=/[((|))]/;export{n as editableBracketPattern,z as editableVarPattern,g as globalHalfVariablePattern,Z as globalVariablePattern,a as lockedVarPattern,A as placeHolderNamePattern,e as previewLinkMDFormatPattern,_ as specialCharPattern,c as templateVariablePattern,o as variablePattern,t as variablePatternGlobal};
@@ -1 +1 @@
1
- import{__awaiter as e}from"../../../_virtual/_tslib.js";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as i,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as l,NAME_LEN_LIMIT as a,NAME_LEN_ERROR as d,NO_SPECIAL_CHAR as r,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as s,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as p,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as m,QUICK_REPLY_BTN_TEXT_LIMIT as h,QUICK_REPLY_LEN_ERROR as b,BUTTON_EMOJI_ERROR as T,VALID_PHONE_NUMBER as y,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as f}from"../constants/TemplateConstants.js";import{HEADER_TYPES as k,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class C{parseDataFromHeaderComponent(e){var t,n,i,o,l,a,d,r,v,s;const u={headerType:k.NONE,headerVariables:[]},p=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(p){u.headerType=p.format,u.headerText=p.text,u.headerAssetLink=null===(i=null===(n=p.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(l=null===(o=p.example)||void 0===o?void 0:o.header_text)||void 0===l?void 0:l[0],c=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.header)||void 0===d?void 0:d[0];if(t&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(v=null===(r=p.example)||void 0===r?void 0:r.header_text)||void 0===v?void 0:v.length)&&(u.headerText=null===(s=u.headerText)||void 0===s?void 0:s.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,C,L,E,R,_,w,A,V,I,D,U,O,q,F,P,j,$,Y;const K=/\p{Extended_Pictographic}/u;let M="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},H=new g;let S=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>a?(Q.meta.name=d,M="invalid"):n.test(e.meta.name.trim())&&(Q.meta.name=r,M="invalid"):(Q.meta.name=l,M="invalid"),Q.meta.name&&!S&&(G(x.name),S=!0),e.headerType===k.TEXT){const t=null!==(o=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==o?o:"";if(t)if(t.length>v)Q.header=s,M="invalid";else{const e=H.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,M="invalid")}else Q.header=l,M="invalid"}else e.headerType===k.DOCUMENT||e.headerType===k.IMAGE||(e.headerType,k.VIDEO);if(e.headerType!==k.DOCUMENT&&e.headerType!==k.IMAGE&&e.headerType!==k.VIDEO||e.headerAssetLink||(Q.header=p,M="invalid"),Q.header&&!S&&(G(x.header),S=!0),e.bodyText?e.bodyTextRaw&&(null===(C=e.bodyTextRaw)||void 0===C?void 0:C.trim().length)>c&&(Q.body=m,M="invalid"):(Q.body=l,M="invalid"),Q.body&&!S&&(G(x.body),S=!0),e.footerText&&e.footerText.length>v&&(Q.footer=s,M="invalid"),(null==Q?void 0:Q.footer)&&!S&&(G(x.footer),S=!0),e.actionsType===N.CTA_BTN){if(null===(E=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===E?void 0:E.isChecked){const t=null===(R=e.ctaBtn.phoneNumber.btnText)||void 0===R?void 0:R.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.phoneNumber.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.phoneNumber.btnText=T,M="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=l,M="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=y,M="invalid")}if(null===(w=null===(_=e.ctaBtn)||void 0===_?void 0:_.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),n=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),i=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.websiteLink.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.websiteLink.btnText=T,M="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=l,M="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=b,M="invalid";else if(K.test(o))t[i]=T,M="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=f,M="invalid")}else t[i]=l,M="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(D=Q.quickReply)||void 0===D?void 0:D.reduce(((e,t)=>e||!!t),!1);((null===(O=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===O?void 0:O.link)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(j=null===(P=Q.ctaBtn)||void 0===P?void 0:P.phoneNumber)||void 0===j?void 0:j.link)||(null===(Y=null===($=Q.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!S&&(G(x.actionButtons),S=!0)}return{status:M,errors:Q}}parseBodyComponent(e){let n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var o,l,a,d,r;const v=[];let s="";const u=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return u&&(null===(a=null===(l=u.example)||void 0===l?void 0:l.body_text)||void 0===a||a[0].forEach(((t,n)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[n];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(i);console.log({matchedPlaceholderName:r}),(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:n,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=u.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==v?void 0:v[i]){const o=v[i].variableName;return n?`${e}{{${o}}}`:`${e} <span> </span><span style="color: ${t.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,l,a,d;const r={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(r.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];return r.quickReply=e,r}t===N.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var n,i,l,a;if(t.phone_number&&(r.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==l?l:void 0;let v=!1;d&&o.test(d)&&(v=!0),r.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:v?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:v?void 0:d}}})))}return r}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var o;return e(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:u,quickReply:p,ctaBtn:c}=yield this.parseButtonComponent(t),m={quickReply:p,ctaBtn:c,meta:{name:n?`${t.label} Copy`:t.label,category:null===(o=t.category)||void 0===o?void 0:o.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:u,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:h}=this.validateState(m);return m.error=h,m}))}}export{C as TemplateCreatorHelper};
1
+ import{__awaiter as e}from"../../../_virtual/_tslib.js";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as i,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as l,NAME_LEN_LIMIT as a,NAME_LEN_ERROR as d,NO_SPECIAL_CHAR as r,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as s,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as p,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as m,QUICK_REPLY_BTN_TEXT_LIMIT as h,QUICK_REPLY_LEN_ERROR as b,BUTTON_EMOJI_ERROR as T,VALID_PHONE_NUMBER as y,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as f}from"../constants/TemplateConstants.js";import{HEADER_TYPES as k,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class C{parseDataFromHeaderComponent(e){var t,n,i,o,l,a,d,r,v,s;const u={headerType:k.NONE,headerVariables:[]},p=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(p){u.headerType=p.format,u.headerText=p.text,u.headerAssetLink=null===(i=null===(n=p.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(l=null===(o=p.example)||void 0===o?void 0:o.header_text)||void 0===l?void 0:l[0],c=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.header)||void 0===d?void 0:d[0];if(t&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(v=null===(r=p.example)||void 0===r?void 0:r.header_text)||void 0===v?void 0:v.length)&&(u.headerText=null===(s=u.headerText)||void 0===s?void 0:s.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,C,L,E,R,_,w,A,V,I,D,U,O,q,F,j,P,$,Y;const K=/\p{Extended_Pictographic}/u;let M="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},H=new g;let S=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>a?(Q.meta.name=d,M="invalid"):n.test(e.meta.name.trim())&&(Q.meta.name=r,M="invalid"):(Q.meta.name=l,M="invalid"),Q.meta.name&&!S&&(G(x.name),S=!0),e.headerType===k.TEXT){const t=null!==(o=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==o?o:"";if(t)if(t.length>v)Q.header=s,M="invalid";else{const e=H.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,M="invalid")}else Q.header=l,M="invalid"}else e.headerType===k.DOCUMENT||e.headerType===k.IMAGE||(e.headerType,k.VIDEO);if(e.headerType!==k.DOCUMENT&&e.headerType!==k.IMAGE&&e.headerType!==k.VIDEO||e.headerAssetLink||(Q.header=p,M="invalid"),Q.header&&!S&&(G(x.header),S=!0),e.bodyText?e.bodyTextRaw&&(null===(C=e.bodyTextRaw)||void 0===C?void 0:C.trim().length)>c&&(Q.body=m,M="invalid"):(Q.body=l,M="invalid"),Q.body&&!S&&(G(x.body),S=!0),e.footerText&&e.footerText.length>v&&(Q.footer=s,M="invalid"),(null==Q?void 0:Q.footer)&&!S&&(G(x.footer),S=!0),e.actionsType===N.CTA_BTN){if(null===(E=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===E?void 0:E.isChecked){const t=null===(R=e.ctaBtn.phoneNumber.btnText)||void 0===R?void 0:R.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.phoneNumber.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.phoneNumber.btnText=T,M="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=l,M="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=y,M="invalid")}if(null===(w=null===(_=e.ctaBtn)||void 0===_?void 0:_.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),n=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),i=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.websiteLink.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.websiteLink.btnText=T,M="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=l,M="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=b,M="invalid";else if(K.test(o))t[i]=T,M="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=f,M="invalid")}else t[i]=l,M="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(D=Q.quickReply)||void 0===D?void 0:D.reduce(((e,t)=>e||!!t),!1);((null===(O=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===O?void 0:O.link)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(P=null===(j=Q.ctaBtn)||void 0===j?void 0:j.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===($=Q.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!S&&(G(x.actionButtons),S=!0)}return{status:M,errors:Q}}parseBodyComponent(e){let n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var o,l,a,d,r;const v=[];let s="";const u=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return u&&(null===(a=null===(l=u.example)||void 0===l?void 0:l.body_text)||void 0===a||a[0].forEach(((t,n)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[n];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(i);(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:n,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=u.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==v?void 0:v[i]){const o=v[i].variableName;return n?`${e}{{${o}}}`:`${e} <span> </span><span style="color: ${t.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,l,a,d;const r={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(r.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];return r.quickReply=e,r}t===N.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var n,i,l,a;if(t.phone_number&&(r.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==l?l:void 0;let v=!1;d&&o.test(d)&&(v=!0),r.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:v?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:v?void 0:d}}})))}return r}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var o;return e(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:u,quickReply:p,ctaBtn:c}=yield this.parseButtonComponent(t),m={quickReply:p,ctaBtn:c,meta:{name:n?`${t.label} Copy`:t.label,category:null===(o=t.category)||void 0===o?void 0:o.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:u,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:h}=this.validateState(m);return m.error=h,m}))}}export{C as TemplateCreatorHelper};
@@ -198,6 +198,7 @@ export type WhatsAppMediaUploadRequest = {
198
198
  };
199
199
  export interface WhatsAppTemplateVariables {
200
200
  body: CUSTOM_VARIABLE[];
201
+ header: CUSTOM_VARIABLE[];
201
202
  buttons: TEMPLATE_BUTTON[];
202
203
  }
203
204
  export type CTABtnValType = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.359-beta.2",
3
+ "version": "0.0.359-beta.21",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",