@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.
- package/dist/cjs/assets/icons/RCS_PDF.svg.js +1 -0
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js +1 -1
- package/dist/cjs/components/carousel-preview/CustomCarouselArrows.js +1 -1
- package/dist/cjs/components/dropdown/ChipInput.d.ts +1 -1
- package/dist/cjs/components/dropdown/ChipInput.js +1 -1
- package/dist/cjs/components/dropdown/Dropdown.d.ts +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/DropdownPopover/index.d.ts +6 -0
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/type.d.ts +0 -3
- package/dist/cjs/components/input/Input.d.ts +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.styled.js +1 -1
- package/dist/cjs/components/modals/styledModal.d.ts +0 -1
- package/dist/cjs/components/modals/styledModal.js +1 -1
- package/dist/cjs/components/product-picker-v2/modal.d.ts +1 -5
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/product-picker-v2/utility.d.ts +1 -13
- package/dist/cjs/components/product-picker-v2/utility.js +1 -1
- package/dist/cjs/components/shimmer-image/ShimmerImage.d.ts +1 -0
- package/dist/cjs/components/shimmer-image/ShimmerImage.js +1 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +2 -0
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Body.js +5 -5
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/Footer.js +4 -4
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +5 -5
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts +2 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts +1 -0
- package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.js +1 -1
- package/dist/cjs/components/template-context-mapper/utils/getPreviewDimension.js +1 -1
- package/dist/cjs/components/template-preview/RCS/RCSButtons.d.ts +9 -0
- package/dist/cjs/components/template-preview/RCS/RCSButtons.js +1 -0
- package/dist/cjs/components/template-preview/RCS/RCSChatHeader.d.ts +2 -0
- package/dist/cjs/components/template-preview/RCS/RCSChatHeader.js +1 -0
- package/dist/cjs/components/template-preview/RCS/RCSChatPreview.d.ts +2 -0
- package/dist/cjs/components/template-preview/RCS/RCSChatPreview.js +1 -0
- package/dist/cjs/components/template-preview/RCS/RCSMediaCard.d.ts +14 -0
- package/dist/cjs/components/template-preview/RCS/RCSMediaCard.js +1 -0
- package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.d.ts +29 -0
- package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js +123 -0
- package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.d.ts +3 -0
- package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.js +8 -0
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.d.ts +2 -0
- package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.d.ts +1 -0
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/cjs/components/template-preview/helpers/templateMiscHelper.d.ts +6 -0
- package/dist/cjs/components/template-preview/helpers/templateMiscHelper.js +1 -0
- package/dist/cjs/components/template-preview/models/Channels.d.ts +2 -1
- package/dist/cjs/components/template-preview/models/Channels.js +1 -1
- package/dist/cjs/components/template-preview/models/EmailTemplate.d.ts +2 -1
- package/dist/cjs/components/template-preview/models/RCSTemplate.d.ts +131 -0
- package/dist/cjs/components/template-preview/models/SmsTemplate.d.ts +2 -1
- package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts +9 -1
- package/dist/cjs/components/template-preview/models/WhatsappCarouselTemplate.d.ts +28 -1
- package/dist/cjs/components/template-preview/models/types.d.ts +2 -1
- package/dist/cjs/components/zeroState/ZeroState.d.ts +0 -2
- package/dist/cjs/components/zeroState/ZeroState.js +3 -3
- package/dist/esm/assets/icons/RCS_PDF.svg.js +1 -0
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreviewCard.js +1 -1
- package/dist/esm/components/carousel-preview/CustomCarouselArrows.js +1 -1
- package/dist/esm/components/dropdown/ChipInput.d.ts +1 -1
- package/dist/esm/components/dropdown/ChipInput.js +1 -1
- package/dist/esm/components/dropdown/Dropdown.d.ts +1 -1
- package/dist/esm/components/dropdown/Dropdown.js +1 -1
- package/dist/esm/components/dropdown/DropdownPopover/index.d.ts +6 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/esm/components/dropdown/type.d.ts +0 -3
- package/dist/esm/components/input/Input.d.ts +1 -1
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/input/Input.styled.js +1 -1
- package/dist/esm/components/modals/styledModal.d.ts +0 -1
- package/dist/esm/components/modals/styledModal.js +1 -1
- package/dist/esm/components/product-picker-v2/modal.d.ts +1 -5
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker-v2/utility.d.ts +1 -13
- package/dist/esm/components/product-picker-v2/utility.js +1 -1
- package/dist/esm/components/shimmer-image/ShimmerImage.d.ts +1 -0
- package/dist/esm/components/shimmer-image/ShimmerImage.js +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +2 -0
- package/dist/esm/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/Footer.js +4 -4
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +5 -5
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts +2 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +5 -5
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts +1 -0
- package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.js +1 -1
- package/dist/esm/components/template-context-mapper/utils/getPreviewDimension.js +1 -1
- package/dist/esm/components/template-preview/RCS/RCSButtons.d.ts +9 -0
- package/dist/esm/components/template-preview/RCS/RCSButtons.js +1 -0
- package/dist/esm/components/template-preview/RCS/RCSChatHeader.d.ts +2 -0
- package/dist/esm/components/template-preview/RCS/RCSChatHeader.js +1 -0
- package/dist/esm/components/template-preview/RCS/RCSChatPreview.d.ts +2 -0
- package/dist/esm/components/template-preview/RCS/RCSChatPreview.js +1 -0
- package/dist/esm/components/template-preview/RCS/RCSMediaCard.d.ts +14 -0
- package/dist/esm/components/template-preview/RCS/RCSMediaCard.js +1 -0
- package/dist/esm/components/template-preview/RCS/RCSPreview.styled.d.ts +29 -0
- package/dist/esm/components/template-preview/RCS/RCSPreview.styled.js +123 -0
- package/dist/esm/components/template-preview/RCS/RCSTemplateLikePreview.d.ts +3 -0
- package/dist/esm/components/template-preview/RCS/RCSTemplateLikePreview.js +8 -0
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/WhatsAppTemplatePreview.d.ts +2 -0
- package/dist/esm/components/template-preview/WhatsAppTemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts +1 -0
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/esm/components/template-preview/helpers/templateMiscHelper.d.ts +6 -0
- package/dist/esm/components/template-preview/helpers/templateMiscHelper.js +1 -0
- package/dist/esm/components/template-preview/models/Channels.d.ts +2 -1
- package/dist/esm/components/template-preview/models/Channels.js +1 -1
- package/dist/esm/components/template-preview/models/EmailTemplate.d.ts +2 -1
- package/dist/esm/components/template-preview/models/RCSTemplate.d.ts +131 -0
- package/dist/esm/components/template-preview/models/SmsTemplate.d.ts +2 -1
- package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts +9 -1
- package/dist/esm/components/template-preview/models/WhatsappCarouselTemplate.d.ts +28 -1
- package/dist/esm/components/template-preview/models/types.d.ts +2 -1
- package/dist/esm/components/zeroState/ZeroState.d.ts +0 -2
- package/dist/esm/components/zeroState/ZeroState.js +5 -5
- 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,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:
|
|
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
|
|
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};
|
|
@@ -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};
|
|
@@ -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:
|
|
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:
|
|
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;
|
|
@@ -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
|
|
2
|
-
background: ${
|
|
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
|
-
`,
|
|
9
|
-
background: ${
|
|
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
|
-
`,
|
|
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};
|