@bikdotai/bik-component-library 0.0.646 → 0.0.647--beta--analytics0.2

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 (145) hide show
  1. package/dist/cjs/assets/icons/RCS_PDF.svg.js +1 -0
  2. package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
  3. package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
  4. package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
  5. package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
  6. package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
  7. package/dist/cjs/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
  8. package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
  9. package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -1
  10. package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js +1 -1
  11. package/dist/cjs/components/carousel-preview/CustomCarouselArrows.js +1 -1
  12. package/dist/cjs/components/dropdown/ChipInput.d.ts +1 -1
  13. package/dist/cjs/components/dropdown/ChipInput.js +1 -1
  14. package/dist/cjs/components/dropdown/Dropdown.d.ts +1 -1
  15. package/dist/cjs/components/dropdown/Dropdown.js +1 -1
  16. package/dist/cjs/components/dropdown/DropdownPopover/index.d.ts +6 -0
  17. package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
  18. package/dist/cjs/components/dropdown/type.d.ts +0 -3
  19. package/dist/cjs/components/input/Input.d.ts +1 -1
  20. package/dist/cjs/components/input/Input.js +1 -1
  21. package/dist/cjs/components/input/Input.styled.js +1 -1
  22. package/dist/cjs/components/modals/styledModal.d.ts +0 -1
  23. package/dist/cjs/components/modals/styledModal.js +1 -1
  24. package/dist/cjs/components/product-picker-v2/modal.d.ts +1 -5
  25. package/dist/cjs/components/product-picker-v2/modal.js +1 -1
  26. package/dist/cjs/components/product-picker-v2/utility.d.ts +1 -13
  27. package/dist/cjs/components/product-picker-v2/utility.js +1 -1
  28. package/dist/cjs/components/shimmer-image/ShimmerImage.d.ts +1 -0
  29. package/dist/cjs/components/shimmer-image/ShimmerImage.js +1 -1
  30. package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
  31. package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +2 -0
  32. package/dist/cjs/components/template-context-mapper/context/templateModalContext.js +1 -1
  33. package/dist/cjs/components/template-context-mapper/modalElements/Body.js +5 -5
  34. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
  35. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +2 -2
  36. package/dist/cjs/components/template-context-mapper/modalElements/Footer.js +4 -4
  37. package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +5 -5
  38. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts +2 -1
  39. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
  40. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
  41. package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts +1 -0
  42. package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.js +1 -1
  43. package/dist/cjs/components/template-context-mapper/utils/getPreviewDimension.js +1 -1
  44. package/dist/cjs/components/template-preview/RCS/RCSButtons.d.ts +9 -0
  45. package/dist/cjs/components/template-preview/RCS/RCSButtons.js +1 -0
  46. package/dist/cjs/components/template-preview/RCS/RCSChatHeader.d.ts +2 -0
  47. package/dist/cjs/components/template-preview/RCS/RCSChatHeader.js +1 -0
  48. package/dist/cjs/components/template-preview/RCS/RCSChatPreview.d.ts +2 -0
  49. package/dist/cjs/components/template-preview/RCS/RCSChatPreview.js +1 -0
  50. package/dist/cjs/components/template-preview/RCS/RCSMediaCard.d.ts +14 -0
  51. package/dist/cjs/components/template-preview/RCS/RCSMediaCard.js +1 -0
  52. package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.d.ts +29 -0
  53. package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js +123 -0
  54. package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.d.ts +3 -0
  55. package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.js +8 -0
  56. package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
  57. package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.d.ts +2 -0
  58. package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.js +1 -1
  59. package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.d.ts +1 -0
  60. package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
  61. package/dist/cjs/components/template-preview/helpers/templateMiscHelper.d.ts +6 -0
  62. package/dist/cjs/components/template-preview/helpers/templateMiscHelper.js +1 -0
  63. package/dist/cjs/components/template-preview/models/Channels.d.ts +2 -1
  64. package/dist/cjs/components/template-preview/models/Channels.js +1 -1
  65. package/dist/cjs/components/template-preview/models/EmailTemplate.d.ts +2 -1
  66. package/dist/cjs/components/template-preview/models/RCSTemplate.d.ts +131 -0
  67. package/dist/cjs/components/template-preview/models/SmsTemplate.d.ts +2 -1
  68. package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts +9 -1
  69. package/dist/cjs/components/template-preview/models/WhatsappCarouselTemplate.d.ts +28 -1
  70. package/dist/cjs/components/template-preview/models/types.d.ts +2 -1
  71. package/dist/cjs/components/zeroState/ZeroState.d.ts +0 -2
  72. package/dist/cjs/components/zeroState/ZeroState.js +3 -3
  73. package/dist/esm/assets/icons/RCS_PDF.svg.js +1 -0
  74. package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
  75. package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
  76. package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
  77. package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
  78. package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
  79. package/dist/esm/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
  80. package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
  81. package/dist/esm/components/carousel-preview/CarouselPreview.js +1 -1
  82. package/dist/esm/components/carousel-preview/CarouselPreviewCard.js +1 -1
  83. package/dist/esm/components/carousel-preview/CustomCarouselArrows.js +1 -1
  84. package/dist/esm/components/dropdown/ChipInput.d.ts +1 -1
  85. package/dist/esm/components/dropdown/ChipInput.js +1 -1
  86. package/dist/esm/components/dropdown/Dropdown.d.ts +1 -1
  87. package/dist/esm/components/dropdown/Dropdown.js +1 -1
  88. package/dist/esm/components/dropdown/DropdownPopover/index.d.ts +6 -0
  89. package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
  90. package/dist/esm/components/dropdown/type.d.ts +0 -3
  91. package/dist/esm/components/input/Input.d.ts +1 -1
  92. package/dist/esm/components/input/Input.js +1 -1
  93. package/dist/esm/components/input/Input.styled.js +1 -1
  94. package/dist/esm/components/modals/styledModal.d.ts +0 -1
  95. package/dist/esm/components/modals/styledModal.js +1 -1
  96. package/dist/esm/components/product-picker-v2/modal.d.ts +1 -5
  97. package/dist/esm/components/product-picker-v2/modal.js +1 -1
  98. package/dist/esm/components/product-picker-v2/utility.d.ts +1 -13
  99. package/dist/esm/components/product-picker-v2/utility.js +1 -1
  100. package/dist/esm/components/shimmer-image/ShimmerImage.d.ts +1 -0
  101. package/dist/esm/components/shimmer-image/ShimmerImage.js +1 -1
  102. package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
  103. package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +2 -0
  104. package/dist/esm/components/template-context-mapper/context/templateModalContext.js +1 -1
  105. package/dist/esm/components/template-context-mapper/modalElements/Body.js +3 -3
  106. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
  107. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +2 -2
  108. package/dist/esm/components/template-context-mapper/modalElements/Footer.js +4 -4
  109. package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +5 -5
  110. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts +2 -1
  111. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +5 -5
  112. package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
  113. package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts +1 -0
  114. package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.js +1 -1
  115. package/dist/esm/components/template-context-mapper/utils/getPreviewDimension.js +1 -1
  116. package/dist/esm/components/template-preview/RCS/RCSButtons.d.ts +9 -0
  117. package/dist/esm/components/template-preview/RCS/RCSButtons.js +1 -0
  118. package/dist/esm/components/template-preview/RCS/RCSChatHeader.d.ts +2 -0
  119. package/dist/esm/components/template-preview/RCS/RCSChatHeader.js +1 -0
  120. package/dist/esm/components/template-preview/RCS/RCSChatPreview.d.ts +2 -0
  121. package/dist/esm/components/template-preview/RCS/RCSChatPreview.js +1 -0
  122. package/dist/esm/components/template-preview/RCS/RCSMediaCard.d.ts +14 -0
  123. package/dist/esm/components/template-preview/RCS/RCSMediaCard.js +1 -0
  124. package/dist/esm/components/template-preview/RCS/RCSPreview.styled.d.ts +29 -0
  125. package/dist/esm/components/template-preview/RCS/RCSPreview.styled.js +123 -0
  126. package/dist/esm/components/template-preview/RCS/RCSTemplateLikePreview.d.ts +3 -0
  127. package/dist/esm/components/template-preview/RCS/RCSTemplateLikePreview.js +8 -0
  128. package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
  129. package/dist/esm/components/template-preview/WhatsAppTemplatePreview.d.ts +2 -0
  130. package/dist/esm/components/template-preview/WhatsAppTemplatePreview.js +1 -1
  131. package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts +1 -0
  132. package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
  133. package/dist/esm/components/template-preview/helpers/templateMiscHelper.d.ts +6 -0
  134. package/dist/esm/components/template-preview/helpers/templateMiscHelper.js +1 -0
  135. package/dist/esm/components/template-preview/models/Channels.d.ts +2 -1
  136. package/dist/esm/components/template-preview/models/Channels.js +1 -1
  137. package/dist/esm/components/template-preview/models/EmailTemplate.d.ts +2 -1
  138. package/dist/esm/components/template-preview/models/RCSTemplate.d.ts +131 -0
  139. package/dist/esm/components/template-preview/models/SmsTemplate.d.ts +2 -1
  140. package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts +9 -1
  141. package/dist/esm/components/template-preview/models/WhatsappCarouselTemplate.d.ts +28 -1
  142. package/dist/esm/components/template-preview/models/types.d.ts +2 -1
  143. package/dist/esm/components/zeroState/ZeroState.d.ts +0 -2
  144. package/dist/esm/components/zeroState/ZeroState.js +5 -5
  145. package/package.json +1 -1
@@ -0,0 +1,123 @@
1
+ import e from"styled-components";import{COLORS as i}from"../../../constants/Theme.js";e.div`
2
+ background-color: ${e=>e.isCarousal?"#E0E0E0":"white"};
3
+ border-radius: 4px;
4
+ position: relative;
5
+ height: ${e=>e.isCarousal?"100%":"auto"};
6
+ `;const t=e.div`
7
+ font-family: 'Inter';
8
+ font-style: normal;
9
+ font-weight: 400;
10
+ font-size: 14px;
11
+ line-height: 20px;
12
+ padding: 12px;
13
+ color: ${i.content.primary};
14
+ word-wrap: break-word;
15
+ `,o=e(t)`
16
+ font-weight: 600;
17
+ margin-bottom: 8px;
18
+ `,r=e(t)`
19
+ font-weight: 600;
20
+ `,n=e.div`
21
+ background: ${i.surface.standard};
22
+ border-radius: 12px;
23
+ position: relative;
24
+ //padding: 8px 0px;
25
+ border: 2px solid
26
+ ${e=>e.hasError?`${i.content.negative}`:e.showBorder?`${i.stroke.brand}`:`${i.stroke.primary}`};
27
+ border: ${e=>e.showDashedBorder&&`2px dashed ${i.content.brand}`};
28
+ height: 100%;
29
+ display: flex;
30
+ flex-direction: column;
31
+ :hover {
32
+ border: 2px
33
+ ${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
34
+ ${i.stroke.brand};
35
+ box-shadow: ${e=>!e.isPreview&&"4px 4px 12px rgba(0, 0, 0, 0.25)"};
36
+ }
37
+ `,d=e.div`
38
+ padding: 8px;
39
+ display: flex;
40
+ flex-direction: row;
41
+ justify-content: center;
42
+ align-items: center;
43
+ `,a=e.div`
44
+ border-radius: 8px;
45
+ display: flex;
46
+ flex-direction: column;
47
+ align-items: center;
48
+ justify-content: center;
49
+ min-height: 152px;
50
+ margin-bottom: 4px;
51
+ `,p=e.div`
52
+ border-radius: 12px;
53
+ display: flex;
54
+ flex-direction: row;
55
+ align-items: center;
56
+ justify-content: flex-start;
57
+ padding: 4px;
58
+ background-color: #ede7e8;
59
+ margin : 4px;
60
+ max-width: 200px;
61
+ `,s=e.div`
62
+ display: flex;
63
+ flex-direction: row;
64
+ align-items: center;
65
+ justify-content: flex-start;
66
+ margin-left : 4px;
67
+ max-width: 180px;
68
+ `,x=e.p`
69
+ white-space: nowrap;
70
+ color: #4C5567;
71
+ max-width: 100px;
72
+ overflow: hidden;
73
+ text-overflow: ellipsis;
74
+ padding : 0px;
75
+ margin : 0px;
76
+ font-size: 12px;
77
+ font-weight: 500;
78
+ line-width: 20px;
79
+ `,l=e.div`
80
+ border: 1px solid ${i.stroke.primary};
81
+ position: relative;
82
+ height: 500px;
83
+ overflow-y: auto;
84
+ border-radius: ${e=>{var i;return null!==(i=e.borderRadius)&&void 0!==i?i:"8px"}};
85
+ box-shadow: 0px 2px 8px 0px #0000001f;
86
+ background-color: white;
87
+ `,c=e.div`
88
+ height: 50px;
89
+ background-color: ${i.background.inactive};
90
+ position: sticky;
91
+ top: 0px;
92
+ z-index: 200;
93
+ padding: 6px 4px;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: space-between;
97
+ gap: 5px;
98
+ `,f=e.div`
99
+ display: flex;
100
+ align-items: center;
101
+ gap: 5px;
102
+ `,g=e.div`
103
+ height: 27px;
104
+ width: 27px;
105
+ border-radius: 15px;
106
+ background-color: #d1d8db;
107
+ display: flex;
108
+ justify-content: center;
109
+ align-items: center;
110
+ gap: 6px;
111
+ `,h=e.div`
112
+ display: flex;
113
+ flex-direction: column;
114
+ justify-content: space-between;
115
+ `,m=e.p`
116
+ font-family: 'Inter';
117
+ font-style: normal;
118
+ font-weight: 400;
119
+ font-size: 8px;
120
+ line-height: 11px;
121
+ color: ${i.content.secondary};
122
+ margin-bottom: 0px;
123
+ `;export{c as HeaderContainer,o as HeaderTextContainer,g as IconContainer,f as LeftContainer,s as PdfComineText,x as PdfText,l as RCSCarousalContainer,d as RCSChatBtnContainer,a as RCSMediaContainer,p as RCSPdfContainer,n as RCSPreviewContainer,t as RcsHtmlContainer,m as SubTitle,h as TitleContainer,r as TitleTextContainer};
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
3
+ export declare const RCSTemplateLikePreview: React.FC<WhatsappLikePreviewTypes>;
@@ -0,0 +1,8 @@
1
+ import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{getPreviewPropLen as p}from"../utils/getPreviewPropLen.js";import{RCSChatPreview as n}from"./RCSChatPreview.js";import h from"./RCSChatHeader.js";const l=o.div`
2
+ background-color: white;
3
+ border-radius: 4px;
4
+ position: relative;
5
+ height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
6
+ `,m=o(a)`
7
+ color: ${i.content.primary};
8
+ `,d=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===p(o)?e(t,{children:o.zeroStateComponent}):a?e(n,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(l,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(h,{}),r("div",Object.assign({style:{padding:"small"===o.size?"10px 32px 10px 10px":`10px ${o.isWhatsappCarousel?"0px":"12px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`,height:o.isWhatsappCarousel?"100%":"auto"}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(n,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{d as RCSTemplateLikePreview};
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import a from"../../utils/StringUtils.js";import{COLORS as n}from"../../constants/Theme.js";import{TitleRegular as o}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import d from"./SmsTemplatePreview.js";import p from"./webpush/WebpushPreview.js";import m from"./WhatsAppTemplatePreview.js";const u=u=>{let{template:v,channel:h,whatsAppSpecificMeta:b,templateCreationsInfo:C,hideHeader:y,size:S,onlyTemplateContent:g,emailSpecificMeta:j,smsSpecificMeta:f,showSampleValues:w,carouselCardIndex:T,isWhatsappCarousel:x,isPreview:P,applyBorderBottom:W,webPushSpecificMeta:O,hidePointerEvents:H}=u;var A,I;const{setSelectedCarouselIndex:B}=i();return h===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:C?16:0,border:C?`1px solid ${n.stroke.primary}`:"none",borderRadius:4},null==f?void 0:f.templateContainerStyles)},{children:e(d,{template:v,hideHeader:y,onlyTemplateContent:g,size:null!=S?S:"large",variableStore:null==f?void 0:f.smsVariableStore,display_content:null==f?void 0:f.smsDisplayContent,uniqueId:null==f?void 0:f.uniqueId})})):h===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:C?16:0},null==j?void 0:j.templateContainerStyles)},{children:e(r,{template:v,handleViewTemplate:()=>{var e;null===(e=null==j?void 0:j.handleViewTemplate)||void 0===e||e.call(j)},hideHeader:y,hideViewButton:null==j?void 0:j.hideViewButtonForEmail,containerStyle:null==j?void 0:j.containerStyle,emailDisplayContent:null==j?void 0:j.emailDisplayContent,emailHtmlContainerId:null==j?void 0:j.emailHtmlContainerId,applyBorderBottom:W,hidePointerEvents:H})})):h===s.WHATSAPP?t("div",Object.assign({style:Object.assign(Object.assign({},null==b?void 0:b.templateContainerStyles),C?c.WhatsAppWrapper:{}),onClick:()=>{var e,t;if(B&&x){if(-1===T&&!(null===(t=null===(e=null==v?void 0:v.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;B(null!=T?T:-1)}}},{children:[C?e("div",Object.assign({style:{padding:16}},{children:e(o,{children:a.convertToTitleCase(null!==(A=null==v?void 0:v.label)&&void 0!==A?A:"")})})):e(l,{}),e(m,{showSampleValues:w,showHeader:null==b?void 0:b.showWhatsAppHeader,extras:null==b?void 0:b.whatsAppExtras,template:v,size:C?"small":null!=S?S:"large",containerStyle:Object.assign(Object.assign({borderWidth:C?0:1,borderTopWidth:1},null!==(I=null==b?void 0:b.containerStyle)&&void 0!==I?I:{}),{height:"100%"}),zeroStateComponent:null==b?void 0:b.zeroStateComponent,usePlaceHolderName:null==b?void 0:b.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:x,isPreview:P})]})):h==s.WEBPUSH?e("div",Object.assign({style:Object.assign({},null==O?void 0:O.containerStyle)},{children:e(p,{template:v,extraContainerCss:null==O?void 0:O.extraContainerCss})})):e(l,{})},c={WhatsAppWrapper:{backgroundColor:n.surface.standard,borderRadius:4,border:`1px solid ${n.background.inactive}`,marginTop:16}};export{u as TemplatePreview};
1
+ import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import a from"../../utils/StringUtils.js";import{COLORS as n}from"../../constants/Theme.js";import{TitleRegular as o}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import d from"./SmsTemplatePreview.js";import p from"./webpush/WebpushPreview.js";import m from"./WhatsAppTemplatePreview.js";const u=u=>{let{template:v,channel:h,whatsAppSpecificMeta:b,templateCreationsInfo:C,hideHeader:S,size:y,onlyTemplateContent:g,emailSpecificMeta:j,smsSpecificMeta:f,showSampleValues:w,carouselCardIndex:T,isWhatsappCarousel:x,isPreview:P,applyBorderBottom:W,webPushSpecificMeta:O,hidePointerEvents:H}=u;var A,I;const{setSelectedCarouselIndex:B}=i();return h===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:C?16:0,border:C?`1px solid ${n.stroke.primary}`:"none",borderRadius:4},null==f?void 0:f.templateContainerStyles)},{children:e(d,{template:v,hideHeader:S,onlyTemplateContent:g,size:null!=y?y:"large",variableStore:null==f?void 0:f.smsVariableStore,display_content:null==f?void 0:f.smsDisplayContent,uniqueId:null==f?void 0:f.uniqueId})})):h===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:C?16:0},null==j?void 0:j.templateContainerStyles)},{children:e(r,{template:v,handleViewTemplate:()=>{var e;null===(e=null==j?void 0:j.handleViewTemplate)||void 0===e||e.call(j)},hideHeader:S,hideViewButton:null==j?void 0:j.hideViewButtonForEmail,containerStyle:null==j?void 0:j.containerStyle,emailDisplayContent:null==j?void 0:j.emailDisplayContent,emailHtmlContainerId:null==j?void 0:j.emailHtmlContainerId,applyBorderBottom:W,hidePointerEvents:H})})):h===s.WHATSAPP||h===s.RCS?t("div",Object.assign({style:Object.assign(Object.assign({},null==b?void 0:b.templateContainerStyles),C?c.WhatsAppWrapper:{}),onClick:()=>{var e,t;if(B&&x){if(-1===T&&!(null===(t=null===(e=null==v?void 0:v.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;B(null!=T?T:-1)}}},{children:[C?e("div",Object.assign({style:{padding:16}},{children:e(o,{children:a.convertToTitleCase(null!==(A=null==v?void 0:v.label)&&void 0!==A?A:"")})})):e(l,{}),e(m,{showSampleValues:w,showHeader:null==b?void 0:b.showWhatsAppHeader,extras:null==b?void 0:b.whatsAppExtras,template:v,size:C?"small":null!=y?y:"large",containerStyle:Object.assign(Object.assign({borderWidth:C?0:1,borderTopWidth:1},null!==(I=null==b?void 0:b.containerStyle)&&void 0!==I?I:{}),{height:"100%"}),zeroStateComponent:null==b?void 0:b.zeroStateComponent,usePlaceHolderName:null==b?void 0:b.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:x,isPreview:P,channel:h})]})):h==s.WEBPUSH?e("div",Object.assign({style:Object.assign({},null==O?void 0:O.containerStyle)},{children:e(p,{template:v,extraContainerCss:null==O?void 0:O.extraContainerCss})})):e(l,{})},c={WhatsAppWrapper:{backgroundColor:n.surface.standard,borderRadius:4,border:`1px solid ${n.background.inactive}`,marginTop:16}};export{u as TemplatePreview};
@@ -1,5 +1,6 @@
1
1
  import React, { ReactElement } from 'react';
2
2
  import { CSSProperties } from 'styled-components';
3
+ import { CHANNEL_TYPE } from './models/Channels';
3
4
  import { WhatsAppTemplate } from './models/WhatsAppTemplate';
4
5
  declare const WhatsappTemplatePreview: React.FC<{
5
6
  template?: WhatsAppTemplate;
@@ -13,5 +14,6 @@ declare const WhatsappTemplatePreview: React.FC<{
13
14
  carouselCardIndex?: number;
14
15
  isWhatsappCarousel?: boolean;
15
16
  isPreview?: boolean;
17
+ channel?: CHANNEL_TYPE;
16
18
  }>;
17
19
  export default WhatsappTemplatePreview;
@@ -1 +1 @@
1
- import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import{TemplateCreatorHelper as o}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as n}from"./models/TemplateMeta.js";import{TemplateHelperUtils as r}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as d}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as s}from"./WhatsApp/WhatsAppLikePreviewV2.js";const p=p=>{let{template:u,extras:v,containerStyle:m,usePlaceHolderName:h,showHeader:x,zeroStateComponent:c,size:b,showSampleValues:T,carouselCardIndex:y,isWhatsappCarousel:w,isPreview:f}=p;var B,N,V,k,C,A,L,P,j,S,F,g,O,I,H,U,W,q,z,D,M,R;const{selectedCarouselIndex:E}=i(),[G,J]=t(),K=new o,Q=new r,X=[];return(null===(N=null===(B=null==G?void 0:G.ctaBtn)||void 0===B?void 0:B.phoneNumber)||void 0===N?void 0:N.isChecked)&&X.push({type:"phoneNumber",text:null!==(V=G.ctaBtn.phoneNumber.btnText)&&void 0!==V?V:"",extra:null!==(k=G.ctaBtn.phoneNumber.phoneNumber)&&void 0!==k?k:""}),(null===(A=null===(C=null==G?void 0:G.ctaBtn)||void 0===C?void 0:C.websiteLinkBtn)||void 0===A?void 0:A.isChecked)&&X.push({type:"website",text:null!==(L=G.ctaBtn.websiteLinkBtn.btnText)&&void 0!==L?L:"",extra:null!==(j=null===(P=G.ctaBtn.websiteLinkBtn)||void 0===P?void 0:P.linkOpens)&&void 0!==j?j:"",placeholder:null!==(S=G.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==S?S:""}),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[u,T]),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[E]),u?u.htmlContentUrl?e(d,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:Q.whatsappOnlyFillVariablesValueInBodyText(null!==(W=null==G?void 0:G.bodyText)&&void 0!==W?W:"",null!==(q=null==G?void 0:G.bodyVariables)&&void 0!==q?q:[],h),footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:Q.fillVariablesValInBodyText(null!==(z=null==G?void 0:G.headerText)&&void 0!==z?z:"",null!==(D=null==G?void 0:G.headerVariables)&&void 0!==D?D:[],h),headerAssetLink:null!==(M=null==G?void 0:G.headerAssetLink)&&void 0!==M?M:"",headerAssetName:null!==(R=null==G?void 0:G.headerAssetName)&&void 0!==R?R:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=c?c:e(l,{children:" "}),isPreview:f}):e(s,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:null==G?void 0:G.bodyText,footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:null==G?void 0:G.headerText,headerAssetLink:null!==(F=null==G?void 0:G.headerAssetLink)&&void 0!==F?F:"",headerAssetName:null!==(g=null==G?void 0:G.headerAssetName)&&void 0!==g?g:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:y,zeroStateComponent:null!=c?c:e(l,{children:" "}),bodyVariableList:null!==(I=null===(O=null==G?void 0:G.bodyVariables)||void 0===O?void 0:O.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==I?I:[],headerVariableList:null!==(U=null===(H=null==G?void 0:G.headerVariables)||void 0===H?void 0:H.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==U?U:[],buttons:null==G?void 0:G.allButtons,limitedTimeOfferComponent:null==G?void 0:G.limitedTimeOfferComponent,isWhatsappCarousel:w,isPreview:f}):e(l,{children:c})};export{p as default};
1
+ import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as a,useEffect as t}from"react";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import{TemplateCreatorHelper as o}from"./helpers/TemplateCreatorHelper.js";import{isRCSChannel as r}from"./helpers/templateMiscHelper.js";import{HEADER_TYPES as n}from"./models/TemplateMeta.js";import{RCSTemplateLikePreview as d}from"./RCS/RCSTemplateLikePreview.js";import{TemplateHelperUtils as s}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as p}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as v}from"./WhatsApp/WhatsAppLikePreviewV2.js";const u=u=>{let{template:m,extras:h,containerStyle:x,usePlaceHolderName:c,showHeader:b,zeroStateComponent:T,size:y,showSampleValues:w,carouselCardIndex:N,isWhatsappCarousel:V,isPreview:f,channel:k}=u;var C,B,L,P,A,S,j,g,F,O,H,I,R,W,q,M,U,z,D,E,G,J,K,Q,X,Y,Z,$,_,ee;const{selectedCarouselIndex:le}=i(),[ae,te]=a(),ie=new o,oe=new s,re=[];return(null===(B=null===(C=null==ae?void 0:ae.ctaBtn)||void 0===C?void 0:C.phoneNumber)||void 0===B?void 0:B.isChecked)&&re.push({type:"phoneNumber",text:null!==(L=ae.ctaBtn.phoneNumber.btnText)&&void 0!==L?L:"",extra:null!==(P=ae.ctaBtn.phoneNumber.phoneNumber)&&void 0!==P?P:""}),(null===(S=null===(A=null==ae?void 0:ae.ctaBtn)||void 0===A?void 0:A.websiteLinkBtn)||void 0===S?void 0:S.isChecked)&&re.push({type:"website",text:null!==(j=ae.ctaBtn.websiteLinkBtn.btnText)&&void 0!==j?j:"",extra:null!==(F=null===(g=ae.ctaBtn.websiteLinkBtn)||void 0===g?void 0:g.linkOpens)&&void 0!==F?F:"",placeholder:null!==(O=ae.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==O?O:""}),t((()=>{m&&ie.parseUITemplateFromDBFormat({dbFormattedTemplate:m,isDuplicate:!1,showSampleValues:w,isV2:!m.htmlContentUrl}).then((e=>{te(Object.assign({},e))}))}),[m,w]),t((()=>{m&&ie.parseUITemplateFromDBFormat({dbFormattedTemplate:m,isDuplicate:!1,showSampleValues:w,isV2:!m.htmlContentUrl}).then((e=>{te(Object.assign({},e))}))}),[le]),m?r(k||(null==m?void 0:m.channel))?e(d,{showHeader:b,containerPadding:"large"===y?"16px 36px 12px 16px":"12px 36px 12px 12px",containerStyle:x,textType:"html",bodyText:null==ae?void 0:ae.bodyText,titleText:null==ae?void 0:ae.titleText,footerText:null==ae?void 0:ae.footerText,headerMediaType:(null==ae?void 0:ae.headerType)||n.NONE,headerText:null==ae?void 0:ae.headerText,headerAssetLink:null!==(H=null==ae?void 0:ae.headerAssetLink)&&void 0!==H?H:"",headerAssetName:null!==(I=null==ae?void 0:ae.headerAssetName)&&void 0!==I?I:"",quickReplybtn:null==ae?void 0:ae.quickReply,ctaBtn:re,actionTypes:null==ae?void 0:ae.actionsType,extras:h,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:N,zeroStateComponent:null!=T?T:e(l,{children:" "}),bodyVariableList:null!==(W=null===(R=null==ae?void 0:ae.bodyVariables)||void 0===R?void 0:R.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==W?W:[],headerVariableList:null!==(M=null===(q=null==ae?void 0:ae.headerVariables)||void 0===q?void 0:q.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==M?M:[],titleVariableList:null!==(z=null===(U=null==ae?void 0:ae.titleVariables)||void 0===U?void 0:U.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==z?z:[],buttons:null==ae?void 0:ae.allButtons,isWhatsappCarousel:V,isPreview:f}):m.htmlContentUrl?e(p,{showHeader:b,containerPadding:"large"===y?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:x,textType:"html",bodyText:oe.whatsappOnlyFillVariablesValueInBodyText(null!==(X=null==ae?void 0:ae.bodyText)&&void 0!==X?X:"",null!==(Y=null==ae?void 0:ae.bodyVariables)&&void 0!==Y?Y:[],c),footerText:null==ae?void 0:ae.footerText,headerMediaType:(null==ae?void 0:ae.headerType)||n.NONE,headerText:oe.fillVariablesValInBodyText(null!==(Z=null==ae?void 0:ae.headerText)&&void 0!==Z?Z:"",null!==($=null==ae?void 0:ae.headerVariables)&&void 0!==$?$:[],c),headerAssetLink:null!==(_=null==ae?void 0:ae.headerAssetLink)&&void 0!==_?_:"",headerAssetName:null!==(ee=null==ae?void 0:ae.headerAssetName)&&void 0!==ee?ee:"",quickReplybtn:null==ae?void 0:ae.quickReply,ctaBtn:re,actionTypes:null==ae?void 0:ae.actionsType,extras:h,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=T?T:e(l,{children:" "}),isPreview:f}):e(v,{showHeader:b,containerPadding:"large"===y?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:x,textType:"html",bodyText:null==ae?void 0:ae.bodyText,footerText:null==ae?void 0:ae.footerText,headerMediaType:(null==ae?void 0:ae.headerType)||n.NONE,headerText:null==ae?void 0:ae.headerText,headerAssetLink:null!==(D=null==ae?void 0:ae.headerAssetLink)&&void 0!==D?D:"",headerAssetName:null!==(E=null==ae?void 0:ae.headerAssetName)&&void 0!==E?E:"",quickReplybtn:null==ae?void 0:ae.quickReply,ctaBtn:re,actionTypes:null==ae?void 0:ae.actionsType,extras:h,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:N,zeroStateComponent:null!=T?T:e(l,{children:" "}),bodyVariableList:null!==(J=null===(G=null==ae?void 0:ae.bodyVariables)||void 0===G?void 0:G.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==J?J:[],headerVariableList:null!==(Q=null===(K=null==ae?void 0:ae.headerVariables)||void 0===K?void 0:K.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==Q?Q:[],buttons:null==ae?void 0:ae.allButtons,limitedTimeOfferComponent:null==ae?void 0:ae.limitedTimeOfferComponent,isWhatsappCarousel:V,isPreview:f}):e(l,{children:T})};export{u as default};
@@ -10,6 +10,7 @@ export declare class TemplateCreatorHelper {
10
10
  errors: CreateTemplateType['error'];
11
11
  };
12
12
  private parseBodyComponent;
13
+ private parseTitleComponent;
13
14
  private parseFooterComponent;
14
15
  private parseButtonComponent;
15
16
  /**
@@ -1 +1 @@
1
- import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as i}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as o,editableVarPattern as l}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as v,HEADER_TEXT_LEN_LIMIT as s,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as f,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as k}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var i,n,o,l,a,d,r,v,s,p;const u={headerType:C.NONE,headerVariables:[]},m=null===(i=e.components)||void 0===i?void 0:i.find((e=>"HEADER"===e.type));if(m){u.headerType=m.format,u.headerText=m.text,u.headerAssetLink=null===(o=null===(n=m.example)||void 0===n?void 0:n.header_handle)||void 0===o?void 0:o[0];const i=null===(a=null===(l=m.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(i&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),o={idx:0,variableVal:t?i:h,editable:n,editableDefaultValues:n?void 0:i,variableName:e};u.headerVariables=[o],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(p=u.headerText)||void 0===p?void 0:p.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,l,E,_,L,O,w,R,D,A,V,I,U,q,j,F,P,M,Y,$,K;const Q=/\p{Extended_Pictographic}/u;let S="valid";const H={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},G=new N;let W=!1;const X=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)?(null===(i=e.meta.name)||void 0===i?void 0:i.trim().length)>d?(H.meta.name=r,S="invalid"):n.test(null===(o=e.meta.name)||void 0===o?void 0:o.trim())&&(H.meta.name=v,S="invalid"):(H.meta.name=a,S="invalid"),H.meta.name&&!W&&(X(x.name),W=!0),e.headerType===C.TEXT){const t=null!==(E=null===(l=e.headerText)||void 0===l?void 0:l.trim())&&void 0!==E?E:"";if(t)if(t.length>s)H.header=p,S="invalid";else{const e=G.getTemplateVariablesFromState(t);e&&e.length>1&&(H.header=u,S="invalid")}else H.header=a,S="invalid"}else e.headerType===C.DOCUMENT||e.headerType===C.IMAGE||(e.headerType,C.VIDEO);if(e.headerType!==C.DOCUMENT&&e.headerType!==C.IMAGE&&e.headerType!==C.VIDEO||e.headerAssetLink||(H.header=m,S="invalid"),H.header&&!W&&(X(x.header),W=!0),e.bodyText?e.bodyTextRaw&&(null===(_=e.bodyTextRaw)||void 0===_?void 0:_.trim().length)>c&&(H.body=h,S="invalid"):(H.body=a,S="invalid"),H.body&&!W&&(X(x.body),W=!0),e.footerText&&e.footerText.length>s&&(H.footer=p,S="invalid"),(null==H?void 0:H.footer)&&!W&&(X(x.footer),W=!0),e.actionsType===g.CTA_BTN){if(null===(O=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===O?void 0:O.isChecked){const t=null===(w=e.ctaBtn.phoneNumber.btnText)||void 0===w?void 0:w.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;H.ctaBtn&&!t?(H.ctaBtn.phoneNumber.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.phoneNumber.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.phoneNumber.btnText=y,S="invalid"),H.ctaBtn&&!i?(H.ctaBtn.phoneNumber.link=a,S="invalid"):H.ctaBtn&&i&&i.length<10&&(H.ctaBtn.phoneNumber.link=f,S="invalid")}if(null===(D=null===(R=e.ctaBtn)||void 0===R?void 0:R.websiteLinkBtn)||void 0===D?void 0:D.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),i=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();H.ctaBtn&&!t?(H.ctaBtn.websiteLink.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.websiteLink.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.websiteLink.btnText=y,S="invalid"),!H.ctaBtn||i||n||(H.ctaBtn.websiteLink.link=a,S="invalid")}}else if(e.actionsType===g.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var o;const l=null===(o=i.text)||void 0===o?void 0:o.trim();if(l)if(l.length>B)t[n]=T,S="invalid";else if(Q.test(l))t[n]=y,S="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===l))&&(t[n]=k,S="invalid")}else t[n]=a,S="invalid"})),H.quickReply=t}if(e.actionsType===g.CTA_BTN||e.actionsType===g.QUICK_REPLY){const e=null===(U=H.quickReply)||void 0===U?void 0:U.reduce(((e,t)=>e||!!t),!1);((null===(j=null===(q=null==H?void 0:H.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===j?void 0:j.link)||(null===(P=null===(F=H.ctaBtn)||void 0===F?void 0:F.websiteLink)||void 0===P?void 0:P.btnText)||(null===(Y=null===(M=H.ctaBtn)||void 0===M?void 0:M.phoneNumber)||void 0===Y?void 0:Y.link)||(null===(K=null===($=H.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===K?void 0:K.btnText)||e)&&!W&&(X(x.actionButtons),W=!0)}return{status:S,errors:H}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let p="";const u=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return u&&(null===(d=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,i)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),p=null==d?void 0:d.match(o);(null==p?void 0:p[2])&&(d=null==p?void 0:p[2]),s.push({idx:i,variableVal:n?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),p=e.htmlContentUrl?e.htmlContentUrl:(null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=u.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==s?void 0:s[n]){const o=s[n].variableName;return t?`${e}{{${o}}}`:`${e} <span> </span><span style="color: ${i.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:p}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,n,o,a,d,r;const v={actionsType:g.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},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===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n[0].type)?g.QUICK_REPLY:g.CTA_BTN;if(v.actionsType=t,t===g.QUICK_REPLY){const e=null!==(a=null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o.map((e=>e)))&&void 0!==a?a:[];v.quickReply=e}else t===g.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var i,n,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===(n=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===n?void 0:n[0])&&void 0!==o?o:void 0;let r=!1;d&&l.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}}})));v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:Array.isArray(e.example)?e.example[0]:(null==e?void 0:e.example)||""}):e))}return v}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var o,l,a;if("limited_time_offer"===e.type){n.text=null!==(l=null===(o=e.limited_time_offer)||void 0===o?void 0:o.text)&&void 0!==l?l:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseUITemplateFromDBFormat(t){var i;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:p,bodyVariable:u}=yield this.parseBodyComponent(e,o,l),{actionsType:m,quickReply:c,ctaBtn:h,allButtons:b}=yield this.parseButtonComponent(e),T=this.parseLimitedTimeOfferComponent(e,b),y={quickReply:c,ctaBtn:h,allButtons:b,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:m,footerText:this.parseFooterComponent(e),bodyVariables:u,bodyText:p,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:T},{errors:f}=this.validateState(y);return y.error=f,y}))}}export{E as TemplateCreatorHelper};
1
+ import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as i}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as l,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as v,HEADER_TEXT_LEN_LIMIT as s,HEADER_LEN_ERROR as u,ONE_VAR_ALLOWED as p,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as x,QUICK_REPLY_NAME_LEN_LIMIT as f,CREATE_TEMPLATE_DOM_IDS as B,QUICK_REPLY_NAME_ERROR as k}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var i,n,l,o,a,d,r,v,s,u;const p={headerType:C.NONE,headerVariables:[]},m=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.find((e=>"HEADER"===e.type));if(m){p.headerType=m.format,p.headerText=m.text,p.headerAssetLink=null===(l=null===(n=m.example)||void 0===n?void 0:n.header_handle)||void 0===l?void 0:l[0];const i=null===(a=null===(o=m.example)||void 0===o?void 0:o.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(i&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),l={idx:0,variableVal:t?i:h,editable:n,editableDefaultValues:n?void 0:i,variableName:e};p.headerVariables=[l],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(p.headerText=null===(u=p.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return p}validateState(e){var t,i,l,o,E,_,L,V,O,w,D,R,A,I,U,$,j,q,F,P,M,Y,K;const Q=/\p{Extended_Pictographic}/u;let S="valid";const H={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},G=new N;let W=!1;const X=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)?(null===(i=e.meta.name)||void 0===i?void 0:i.trim().length)>d?(H.meta.name=r,S="invalid"):n.test(null===(l=e.meta.name)||void 0===l?void 0:l.trim())&&(H.meta.name=v,S="invalid"):(H.meta.name=a,S="invalid"),H.meta.name&&!W&&(X(B.name),W=!0),e.headerType===C.TEXT){const t=null!==(E=null===(o=e.headerText)||void 0===o?void 0:o.trim())&&void 0!==E?E:"";if(t)if(t.length>s)H.header=u,S="invalid";else{const e=G.getTemplateVariablesFromState(t);e&&e.length>1&&(H.header=p,S="invalid")}else H.header=a,S="invalid"}else e.headerType===C.DOCUMENT||e.headerType===C.IMAGE||(e.headerType,C.VIDEO);if(e.headerType!==C.DOCUMENT&&e.headerType!==C.IMAGE&&e.headerType!==C.VIDEO||e.headerAssetLink||(H.header=m,S="invalid"),H.header&&!W&&(X(B.header),W=!0),e.bodyText?e.bodyTextRaw&&(null===(_=e.bodyTextRaw)||void 0===_?void 0:_.trim().length)>c&&(H.body=h,S="invalid"):(H.body=a,S="invalid"),H.body&&!W&&(X(B.body),W=!0),e.footerText&&e.footerText.length>s&&(H.footer=u,S="invalid"),(null==H?void 0:H.footer)&&!W&&(X(B.footer),W=!0),e.actionsType===g.CTA_BTN){if(null===(V=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===V?void 0:V.isChecked){const t=null===(O=e.ctaBtn.phoneNumber.btnText)||void 0===O?void 0:O.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;H.ctaBtn&&!t?(H.ctaBtn.phoneNumber.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.phoneNumber.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.phoneNumber.btnText=y,S="invalid"),H.ctaBtn&&!i?(H.ctaBtn.phoneNumber.link=a,S="invalid"):H.ctaBtn&&i&&i.length<10&&(H.ctaBtn.phoneNumber.link=x,S="invalid")}if(null===(D=null===(w=e.ctaBtn)||void 0===w?void 0:w.websiteLinkBtn)||void 0===D?void 0:D.isChecked){const t=null===(R=e.ctaBtn.websiteLinkBtn.btnText)||void 0===R?void 0:R.trim(),i=null===(A=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===A?void 0:A.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();H.ctaBtn&&!t?(H.ctaBtn.websiteLink.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.websiteLink.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.websiteLink.btnText=y,S="invalid"),!H.ctaBtn||i||n||(H.ctaBtn.websiteLink.link=a,S="invalid")}}else if(e.actionsType===g.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var l;const o=null===(l=i.text)||void 0===l?void 0:l.trim();if(o)if(o.length>f)t[n]=T,S="invalid";else if(Q.test(o))t[n]=y,S="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===o))&&(t[n]=k,S="invalid")}else t[n]=a,S="invalid"})),H.quickReply=t}if(e.actionsType===g.CTA_BTN||e.actionsType===g.QUICK_REPLY){const e=null===(U=H.quickReply)||void 0===U?void 0:U.reduce(((e,t)=>e||!!t),!1);((null===(j=null===($=null==H?void 0:H.ctaBtn)||void 0===$?void 0:$.websiteLink)||void 0===j?void 0:j.link)||(null===(F=null===(q=H.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(M=null===(P=H.ctaBtn)||void 0===P?void 0:P.phoneNumber)||void 0===M?void 0:M.link)||(null===(K=null===(Y=H.ctaBtn)||void 0===Y?void 0:Y.phoneNumber)||void 0===K?void 0:K.btnText)||e)&&!W&&(X(B.actionButtons),W=!0)}return{status:S,errors:H}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var o,a,d,r,v,s;const u=[];let p="";const m=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return m&&(null===(r=null===(d=null===(a=m.example)||void 0===a?void 0:a.body_text)||void 0===d?void 0:d[0])||void 0===r||r.forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),s=null==d?void 0:d.match(l);(null==s?void 0:s[2])&&(d=null==s?void 0:s[2]),u.push({idx:i,variableVal:n?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),p=e.htmlContentUrl?e.htmlContentUrl:(null===(v=m.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).length)?null===(s=m.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==u?void 0:u[n]){const l=u[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:u,bodyText:p}}parseTitleComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var o,a,d,r,v,s;const u=[];let p="";const m=null===(o=e.components)||void 0===o?void 0:o.find((e=>"TITLE"===e.type));return m&&(null===(r=null===(d=null===(a=m.example)||void 0===a?void 0:a.title_text)||void 0===d?void 0:d[0])||void 0===r||r.forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),s=null==d?void 0:d.match(l);(null==s?void 0:s[2])&&(d=null==s?void 0:s[2]),u.push({idx:i,variableVal:n?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),p=e.htmlContentUrl?e.htmlContentUrl:(null===(v=m.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).length)?null===(s=m.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==u?void 0:u[n]){const l=u[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{titleText:p,titleVariables:u}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,n,l,a,d,r;const v={actionsType:g.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},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===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n[0].type)?g.QUICK_REPLY:g.CTA_BTN;if(v.actionsType=t,t===g.QUICK_REPLY){const e=null!==(a=null===(l=null==s?void 0:s.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];v.quickReply=e}else t===g.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var i,n,l,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(n=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===n?void 0:n[0])&&void 0!==l?l:void 0;let r=!1;d&&o.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}}})));v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:Array.isArray(e.example)?e.example[0]:(null==e?void 0:e.example)||""}):e))}return v}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var l,o,a;if("limited_time_offer"===e.type){n.text=null!==(o=null===(l=e.limited_time_offer)||void 0===l?void 0:l.text)&&void 0!==o?o:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseUITemplateFromDBFormat(t){var i;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:l=!1,showSampleValues:o}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:u,bodyVariable:p}=yield this.parseBodyComponent(e,l,o),{titleText:m,titleVariables:c}=yield this.parseTitleComponent(e,l,o),{actionsType:h,quickReply:b,ctaBtn:T,allButtons:y}=yield this.parseButtonComponent(e),x=this.parseLimitedTimeOfferComponent(e,y),f={quickReply:b,ctaBtn:T,allButtons:y,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:h,footerText:this.parseFooterComponent(e),bodyVariables:p,bodyText:u,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:x,titleText:m,titleVariables:c},{errors:B}=this.validateState(f);return f.error=B,f}))}}export{E as TemplateCreatorHelper};
@@ -0,0 +1,6 @@
1
+ import { CHANNEL_TYPE } from '../models/Channels';
2
+ import { WhatsAppCarouselTemplate } from '../models/WhatsappCarouselTemplate';
3
+ export declare const isItCarousal: (channel: CHANNEL_TYPE, selectedTemplate: WhatsAppCarouselTemplate) => boolean;
4
+ export declare const determineCardIndex: (channel: CHANNEL_TYPE) => 0 | 1;
5
+ export declare const isCarouselComponent: (componentType?: string) => boolean;
6
+ export declare const isRCSChannel: (channel: CHANNEL_TYPE) => boolean;
@@ -0,0 +1 @@
1
+ import{CHANNEL_TYPE as o}from"../models/Channels.js";const l=(o,l)=>{var r,s;const t=n(o);return e(null===(s=null===(r=null==l?void 0:l.components)||void 0===r?void 0:r[t])||void 0===s?void 0:s.type)},n=l=>l===o.RCS?0:1,e=o=>"carousel"===(null==o?void 0:o.toLowerCase()),r=l=>l==o.RCS;export{n as determineCardIndex,e as isCarouselComponent,l as isItCarousal,r as isRCSChannel};
@@ -5,5 +5,6 @@ export declare enum CHANNEL_TYPE {
5
5
  EMAIL = "email",
6
6
  SMS = "message",
7
7
  WEBPUSH = "webpush",
8
- MESSAGE = "message"
8
+ MESSAGE = "message",
9
+ RCS = "rcs"
9
10
  }
@@ -1 +1 @@
1
- var a;!function(a){a.WHATSAPP="whatsapp",a.INSTAGRAM="instagram",a.TIKTOK="tiktok",a.EMAIL="email",a.SMS="message",a.WEBPUSH="webpush",a.MESSAGE="message"}(a||(a={}));export{a as CHANNEL_TYPE};
1
+ var a;!function(a){a.WHATSAPP="whatsapp",a.INSTAGRAM="instagram",a.TIKTOK="tiktok",a.EMAIL="email",a.SMS="message",a.WEBPUSH="webpush",a.MESSAGE="message",a.RCS="rcs"}(a||(a={}));export{a as CHANNEL_TYPE};
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
+ import { CHANNEL_TYPE } from './Channels';
2
3
  import { CUSTOM_VARIABLE, TEMPLATE_EDITOR, TEMPLATE_STATUS } from './TemplateMeta';
3
4
  export type EmailTemplateType = {
4
5
  category: string;
5
- channel: 'email';
6
+ channel: CHANNEL_TYPE;
6
7
  channelTemplateId: string;
7
8
  createdAt: {
8
9
  _seconds: number;
@@ -0,0 +1,131 @@
1
+ import { Timestamp } from 'firebase-admin/firestore';
2
+ import { TEMPLATE_STATUS } from './TemplateMeta';
3
+ import { WhatsappLikePreviewTypes, WhatsAppTemplate } from './WhatsAppTemplate';
4
+ import { CHANNEL_TYPE } from './Channels';
5
+ export interface RCSPreviewProps extends WhatsappLikePreviewTypes {
6
+ isCarousal?: boolean;
7
+ }
8
+ export interface RCSTemplateType extends WhatsAppTemplate {
9
+ id: string;
10
+ status: TEMPLATE_STATUS;
11
+ name: string;
12
+ content?: string;
13
+ mapping: {
14
+ [key: string]: string[] | object[];
15
+ };
16
+ mediaTemplateActionButtonTypes: {
17
+ [key: string]: string[] | object[];
18
+ };
19
+ customParams?: Record<string, string>;
20
+ destinationUrl?: Record<string, string>;
21
+ createdAt: number;
22
+ updatedAt: number;
23
+ templateType?: RCS_TEMPLATE_TYPE;
24
+ rcsBroadcastConfig?: {
25
+ mapping: {
26
+ [key: string]: string | object;
27
+ };
28
+ };
29
+ htmlContentUrl?: string;
30
+ templateId?: string;
31
+ channel: CHANNEL_TYPE;
32
+ headers?: string[];
33
+ }
34
+ export interface RcsTemplate {
35
+ content?: string;
36
+ components: string;
37
+ mapping: {
38
+ [key: string]: string | object;
39
+ };
40
+ mediaTemplateActionButtonTypes: {
41
+ [key: string]: string | object;
42
+ };
43
+ customParams?: Record<string, string>;
44
+ destinationUrl?: Record<string, string>;
45
+ status: TEMPLATE_STATUS;
46
+ externalStatus: RCS_TEMPLATE_STATUS;
47
+ templateType: string;
48
+ createdAt: Timestamp;
49
+ updatedAt: Timestamp;
50
+ }
51
+ export interface CreateRcsTemplatePayload {
52
+ name: string;
53
+ label: string;
54
+ storeId: string;
55
+ category: string;
56
+ channelTemplateId: string;
57
+ channel: string;
58
+ content: string;
59
+ components: string;
60
+ mapping: {
61
+ [key: string]: string | object;
62
+ };
63
+ mediaTemplateActionButtonTypes: {
64
+ [key: string]: string | object;
65
+ };
66
+ customParams?: Record<string, string>;
67
+ destinationUrl?: Record<string, string>;
68
+ botId: string;
69
+ externalStatus: RCS_TEMPLATE_STATUS;
70
+ templateType: string;
71
+ status: TEMPLATE_STATUS;
72
+ createdAt: Timestamp;
73
+ createdBy: string;
74
+ templateCategory?: string;
75
+ updatedAt: Timestamp;
76
+ templateId?: string;
77
+ }
78
+ export declare enum RCS_TEMPLATE_STATUS {
79
+ ACTIVE = "active",
80
+ APPROVED = "approved",
81
+ PENDING = "pending",
82
+ REJECTED = "rejected",
83
+ FAILED = "Failed"
84
+ }
85
+ export declare enum RCS_TEMPLATE_TYPE {
86
+ TEXT_MESSAGE = "text_message",
87
+ TEXT_MESSAGE_WITH_PDF = "text_message_with_pdf",
88
+ CAROUSEL = "carousel",
89
+ RICH_CARD = "rich_card",
90
+ UNKNOWN = "unknown"
91
+ }
92
+ export declare enum RCS_BUTTON_TYPE {
93
+ REPLY = "reply",
94
+ URL_ACTION = "url_action",
95
+ DIALER_ACTION = "dialer_action",
96
+ VIEW_LOCATION_LATLONG = "view_location_latlong",
97
+ VIEW_LOCATION_QUERY = "view_location_query",
98
+ SHARE_LOCATION = "share_location",
99
+ CALENDAR_EVENT = "calendar_event"
100
+ }
101
+ export declare enum MEDIA_FORMAT {
102
+ IMAGE = "image",
103
+ VIDEO = "video",
104
+ DOCUMENT = "document",
105
+ OTHER = "other"
106
+ }
107
+ export declare enum IMAGE_EXTENSIONS {
108
+ JPG = "jpg",
109
+ JPEG = "jpeg",
110
+ PNG = "png",
111
+ GIF = "gif",
112
+ BMP = "bmp",
113
+ WEBP = "webp"
114
+ }
115
+ export declare enum VIDEO_EXTENSIONS {
116
+ MP4 = "mp4",
117
+ MOV = "mov",
118
+ AVI = "avi",
119
+ MKV = "mkv",
120
+ WEBM = "webm"
121
+ }
122
+ export declare enum DOCUMENT_EXTENSIONS {
123
+ PDF = "pdf",
124
+ DOC = "doc",
125
+ DOCX = "docx",
126
+ XLS = "xls",
127
+ XLSX = "xlsx",
128
+ PPT = "ppt",
129
+ PPTX = "pptx",
130
+ TXT = "txt"
131
+ }
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
+ import { CHANNEL_TYPE } from './Channels';
2
3
  import { CUSTOM_VARIABLE } from './TemplateMeta';
3
4
  export type SMSTemplateType = {
4
5
  category: 'other';
5
- channel: 'message';
6
+ channel: CHANNEL_TYPE.SMS;
6
7
  channelTemplateId: string;
7
8
  content: string;
8
9
  createdAt: {
@@ -11,7 +11,7 @@ export type WhatsAppTemplate = {
11
11
  templateCategory: string;
12
12
  type?: 'email' | 'whatsapp';
13
13
  components: {
14
- type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
14
+ type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer' | 'TITLE';
15
15
  format?: HEADER_TYPES;
16
16
  text?: string;
17
17
  limited_time_offer?: {
@@ -33,12 +33,14 @@ export type WhatsAppTemplate = {
33
33
  body_text?: Array<string[]>;
34
34
  header_text?: Array<string>;
35
35
  limited_time_offer?: string;
36
+ title_text?: Array<string[]>;
36
37
  };
37
38
  }[];
38
39
  mapping: {
39
40
  header?: string[];
40
41
  body?: string[];
41
42
  buttons?: string[];
43
+ title?: string[];
42
44
  };
43
45
  htmlContentUrl?: string;
44
46
  language: 'en_US';
@@ -62,7 +64,9 @@ export type CreateTemplateType = {
62
64
  headerText?: string;
63
65
  headerVariables: templateVariable[];
64
66
  bodyVariables: templateVariable[];
67
+ titleVariables?: templateVariable[];
65
68
  bodyText?: string;
69
+ titleText?: string;
66
70
  bodyTextRaw?: string;
67
71
  footerText?: string;
68
72
  actionsType: ACTIONS_TYPES;
@@ -158,6 +162,7 @@ export type TemplateVariableMapping = {
158
162
  buttons: string[];
159
163
  header: string[];
160
164
  footer: string[];
165
+ title?: string[];
161
166
  };
162
167
  export type WhatsappLikePreviewTypes = {
163
168
  bodyText?: string;
@@ -191,6 +196,8 @@ export type WhatsappLikePreviewTypes = {
191
196
  limitedTimeOfferComponent?: CreateTemplateType['limitedTimeOfferComponent'];
192
197
  isWhatsappCarousel?: boolean;
193
198
  isPreview?: boolean;
199
+ titleText?: string;
200
+ titleVariableList?: variableType[];
194
201
  };
195
202
  export type WhatsappPreviewButtonType = {
196
203
  type: WhatsappTemplateButtonTypes;
@@ -241,6 +248,7 @@ export interface WhatsAppTemplateVariables {
241
248
  body: CUSTOM_VARIABLE[];
242
249
  header: CUSTOM_VARIABLE[];
243
250
  buttons: TEMPLATE_BUTTON[];
251
+ title?: CUSTOM_VARIABLE[];
244
252
  }
245
253
  export type CTABtnValType = {
246
254
  defaultValue: string;
@@ -20,7 +20,7 @@ export type WhatsAppCarouselTemplate = {
20
20
  };
21
21
  cards?: {
22
22
  components: {
23
- type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
23
+ type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'TITLE';
24
24
  format?: HEADER_TYPES;
25
25
  text?: string;
26
26
  buttons?: {
@@ -49,17 +49,21 @@ export type WhatsAppCarouselTemplate = {
49
49
  header?: string[];
50
50
  body?: string[];
51
51
  buttons?: string[];
52
+ title?: string[];
52
53
  }[];
54
+ title?: string[];
53
55
  };
54
56
  templateComponentValues: {
55
57
  components: {
56
58
  header?: string[];
57
59
  body?: string[];
58
60
  buttons?: string[];
61
+ title?: string[];
59
62
  cards?: {
60
63
  header?: string[];
61
64
  body?: string[];
62
65
  buttons?: string[];
66
+ title?: string[];
63
67
  }[];
64
68
  };
65
69
  };
@@ -80,3 +84,26 @@ export interface WhatsAppCarouselTemplateVariables {
80
84
  body: CUSTOM_VARIABLE[];
81
85
  cards: WhatsAppTemplateVariables[];
82
86
  }
87
+ export interface WhatsAppCarouselTemplateCards {
88
+ components: {
89
+ type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'TITLE';
90
+ format?: HEADER_TYPES;
91
+ text?: string;
92
+ buttons?: {
93
+ type: 'QUICK_REPLY' | 'URL' | 'PHONE_NUMBER';
94
+ text?: string;
95
+ url?: string;
96
+ example?: string[];
97
+ linkMode?: 'custom' | 'home';
98
+ phone_number?: string;
99
+ flowName?: string;
100
+ flowId?: string;
101
+ }[];
102
+ example?: {
103
+ header_handle?: Array<string>;
104
+ body_text?: Array<string[]>;
105
+ header_text?: Array<string>;
106
+ title_text?: Array<string>;
107
+ };
108
+ }[];
109
+ }
@@ -1,9 +1,10 @@
1
1
  import { EmailTemplateType } from './EmailTemplate';
2
+ import { RCSTemplateType } from './RCSTemplate';
2
3
  import { SMSTemplateType } from './SmsTemplate';
3
4
  import { CUSTOM_VARIABLE } from './TemplateMeta';
4
5
  import { WebpushTemplateType, WebpushTemplateVariables } from './WebpushTemplate';
5
6
  import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from './WhatsappCarouselTemplate';
6
7
  import { WhatsAppTemplate, WhatsAppTemplateVariables } from './WhatsAppTemplate';
7
- export type AllTemplateTypes = WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | WebpushTemplateType | null;
8
+ export type AllTemplateTypes = WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | WebpushTemplateType | RCSTemplateType | null;
8
9
  export type NonNullTemplateTypes = NonNullable<AllTemplateTypes>;
9
10
  export type AllTemplateVariables = CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | WebpushTemplateVariables;
@@ -7,6 +7,4 @@ export declare const ZeroState: React.FC<{
7
7
  IconHolderStyle?: React.CSSProperties;
8
8
  style?: React.CSSProperties /** now this component is extendable through styled-component */;
9
9
  actionButton?: ButtonProps;
10
- buttonWidth?: number;
11
- Icon?: React.ReactNode;
12
10
  }>;
@@ -1,12 +1,12 @@
1
- import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"styled-components";import{Spinner as i}from"../spinner/Spinner.js";import{TitleRegular as r,BodyCaption as l}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";import c from"../../assets/icons/alert.svg.js";import{Button as d}from"../button/Button.js";const a=o.div`
2
- background: ${s.surface.standard};
1
+ import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"styled-components";import{Spinner as i}from"../spinner/Spinner.js";import{TitleRegular as r,BodyCaption as s}from"../TypographyStyle.js";import{COLORS as l}from"../../constants/Theme.js";import c from"../../assets/icons/alert.svg.js";import{Button as a}from"../button/Button.js";const d=o.div`
2
+ background: ${l.surface.standard};
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  align-items: center;
6
6
  justify-content: center;
7
7
  flex: 1;
8
- `,u=o.div`
9
- background: ${s.background.base};
8
+ `,m=o.div`
9
+ background: ${l.background.base};
10
10
  width: 48px;
11
11
  height: 48px;
12
12
  display: flex;
@@ -14,4 +14,4 @@ import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from
14
14
  align-items: center;
15
15
  justify-content: center;
16
16
  border-radius: 24px;
17
- `,m=o=>{var{subTitle:m,title:p,IconHolderStyle:g,style:y,isLoading:b}=o,f=t(o,["subTitle","title","IconHolderStyle","style","isLoading"]);return e(a,Object.assign({style:null!=y?y:{}},{children:[b?n(i,{size:"large",color:s.stroke.brand}):n(u,Object.assign({style:null!=g?g:{}},{children:(null==f?void 0:f.Icon)||n(c,{color:s.content.placeholder,height:24,width:24})})),n(r,Object.assign({style:{marginTop:8,color:s.content.primary}},{children:b?"Loading...":p||"No results found"})),!!m&&!b&&n(l,Object.assign({style:{marginTop:4,color:s.content.secondary,textAlign:"center",maxWidth:184}},{children:m})),!!(null==f?void 0:f.actionButton)&&n("div",Object.assign({style:(null==f?void 0:f.buttonWidth)?{width:null==f?void 0:f.buttonWidth,display:"flex"}:{}},{children:n(d,Object.assign({},null==f?void 0:f.actionButton))}))]}))};export{m as ZeroState};
17
+ `,u=o=>{var{subTitle:u,title:p,IconHolderStyle:g,style:y,isLoading:f}=o,b=t(o,["subTitle","title","IconHolderStyle","style","isLoading"]);return e(d,Object.assign({style:null!=y?y:{}},{children:[f?n(i,{size:"large",color:l.stroke.brand}):n(m,Object.assign({style:null!=g?g:{}},{children:n(c,{color:l.content.placeholder,height:24,width:24})})),n(r,Object.assign({style:{marginTop:8,color:l.content.primary}},{children:f?"Loading...":p||"No results found"})),!!u&&!f&&n(s,Object.assign({style:{marginTop:4,color:l.content.secondary,textAlign:"center",maxWidth:184}},{children:u})),!!(null==b?void 0:b.actionButton)&&n("div",{children:n(a,Object.assign({},null==b?void 0:b.actionButton))})]}))};export{u as ZeroState};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.646",
3
+ "version": "0.0.647--beta--analytics0.2",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",