@bikdotai/bik-component-library 0.0.817-beta.10 → 0.0.817-beta.12
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/components/avatar/Avatar.js +1 -1
- package/dist/cjs/components/avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.styled.js +2 -10
- package/dist/cjs/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/cjs/components/template-preview/RCS/RCSChatPreview.js +1 -1
- package/dist/cjs/components/template-preview/RCS/RCSChatPreview.js.map +1 -1
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js.map +1 -1
- package/dist/cjs/components/template-preview/models/RCSTemplate.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewPanel.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.d.ts +1 -2
- package/dist/esm/components/avatar/Avatar.js +82 -92
- package/dist/esm/components/avatar/Avatar.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.styled.d.ts +0 -1
- package/dist/esm/components/avatar/Avatar.styled.js +9 -18
- package/dist/esm/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/esm/components/template-preview/RCS/RCSChatPreview.js +68 -72
- package/dist/esm/components/template-preview/RCS/RCSChatPreview.js.map +1 -1
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts +8 -0
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js +79 -61
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js.map +1 -1
- package/dist/esm/components/template-preview/models/RCSTemplate.d.ts +7 -0
- package/dist/esm/components/template-preview/models/RCSTemplate.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNewPanel.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,119 +1,109 @@
|
|
|
1
|
-
import { jsxs as g, jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { AvatarStyle as
|
|
4
|
-
import { SIZE as
|
|
5
|
-
import { BodyTiny as
|
|
1
|
+
import { jsxs as g, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useState as k } from "react";
|
|
3
|
+
import { AvatarStyle as v } from "./Avatar.styled.js";
|
|
4
|
+
import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as h, AVATAR_SIZE_MAP as o } from "./AvatarHelper.js";
|
|
5
|
+
import { BodyTiny as R, TitleSmall as w, TitleMedium as O } from "../TypographyStyle.js";
|
|
6
6
|
import { COLORS as i } from "../../constants/Theme.js";
|
|
7
|
-
import
|
|
7
|
+
import A from "../../assets/icons/bik_livechat.svg.js";
|
|
8
8
|
import u from "../../assets/icons/email-channel.svg.js";
|
|
9
9
|
import d from "../../assets/icons/facebook_channel.svg.js";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
10
|
+
import z from "../../assets/icons/gmail.svg.js";
|
|
11
|
+
import x from "../../assets/icons/instagram-channel.svg.js";
|
|
12
|
+
import C from "../../assets/icons/task.svg.js";
|
|
13
13
|
import B from "../../assets/icons/whatsapp_color.svg.js";
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
[
|
|
17
|
-
[
|
|
18
|
-
[
|
|
19
|
-
[n.LARGE]: 32
|
|
14
|
+
const n = {
|
|
15
|
+
[a.SMALL]: 16,
|
|
16
|
+
[a.MEDIUM]: 20,
|
|
17
|
+
[a.INBOX]: 24,
|
|
18
|
+
[a.LARGE]: 32
|
|
20
19
|
}, c = {
|
|
21
|
-
[
|
|
22
|
-
[
|
|
23
|
-
[
|
|
20
|
+
[h.LIGHT]: i.content.secondary,
|
|
21
|
+
[h.WHITE]: i.content.secondary,
|
|
22
|
+
[h.DARK]: i.surface.standard
|
|
24
23
|
};
|
|
25
|
-
var
|
|
26
|
-
const
|
|
27
|
-
const [l,
|
|
28
|
-
const
|
|
29
|
-
if (
|
|
30
|
-
return /* @__PURE__ */
|
|
31
|
-
|
|
24
|
+
var U = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(U || {});
|
|
25
|
+
const Y = (t) => {
|
|
26
|
+
const [l, b] = k(!1), m = () => {
|
|
27
|
+
const s = (t.name || "").split(".").join(" ").split(" ").map((T) => T.charAt(0).toUpperCase()).slice(0, 2).join("");
|
|
28
|
+
if (t.size === a.SMALL)
|
|
29
|
+
return /* @__PURE__ */ e(
|
|
30
|
+
R,
|
|
32
31
|
{
|
|
33
|
-
style: { color: c[
|
|
34
|
-
children:
|
|
32
|
+
style: { color: c[t.background] },
|
|
33
|
+
children: s
|
|
35
34
|
}
|
|
36
35
|
);
|
|
37
|
-
if (
|
|
38
|
-
return /* @__PURE__ */
|
|
39
|
-
|
|
36
|
+
if (t.size === a.MEDIUM || t.size === a.INBOX)
|
|
37
|
+
return /* @__PURE__ */ e(
|
|
38
|
+
w,
|
|
40
39
|
{
|
|
41
|
-
style: { color: c[
|
|
42
|
-
children:
|
|
40
|
+
style: { color: c[t.background] },
|
|
41
|
+
children: s
|
|
43
42
|
}
|
|
44
43
|
);
|
|
45
|
-
if (
|
|
46
|
-
return /* @__PURE__ */
|
|
47
|
-
|
|
44
|
+
if (t.size === a.LARGE)
|
|
45
|
+
return /* @__PURE__ */ e(
|
|
46
|
+
O,
|
|
48
47
|
{
|
|
49
|
-
style: { color: c[
|
|
50
|
-
children:
|
|
48
|
+
style: { color: c[t.background] },
|
|
49
|
+
children: s
|
|
51
50
|
}
|
|
52
51
|
);
|
|
53
|
-
},
|
|
52
|
+
}, I = () => t.useNameFallback && (!t.photoUrl || l) && t.name ? /* @__PURE__ */ e("div", { children: m() }) : t.useNameFallback && t.photoUrl && !l ? /* @__PURE__ */ e(
|
|
54
53
|
"img",
|
|
55
54
|
{
|
|
56
55
|
alt: "",
|
|
57
|
-
width: o[
|
|
58
|
-
height: o[
|
|
56
|
+
width: o[t.size],
|
|
57
|
+
height: o[t.size],
|
|
59
58
|
style: {
|
|
60
|
-
borderRadius:
|
|
59
|
+
borderRadius: t?.borderRadius || "50%",
|
|
61
60
|
objectFit: "contain"
|
|
62
61
|
},
|
|
63
|
-
src:
|
|
62
|
+
src: t.photoUrl,
|
|
64
63
|
onError: () => {
|
|
65
|
-
|
|
64
|
+
b(!0);
|
|
66
65
|
}
|
|
67
66
|
}
|
|
68
|
-
) : /* @__PURE__ */
|
|
67
|
+
) : /* @__PURE__ */ e(
|
|
69
68
|
"img",
|
|
70
69
|
{
|
|
71
70
|
alt: "",
|
|
72
|
-
width: o[
|
|
73
|
-
height: o[
|
|
71
|
+
width: o[t.size],
|
|
72
|
+
height: o[t.size],
|
|
74
73
|
style: {
|
|
75
|
-
borderRadius:
|
|
74
|
+
borderRadius: t?.borderRadius || "50%",
|
|
76
75
|
objectFit: "contain"
|
|
77
76
|
},
|
|
78
|
-
src:
|
|
77
|
+
src: t.photoUrl
|
|
79
78
|
}
|
|
80
79
|
), f = () => {
|
|
81
|
-
switch (
|
|
80
|
+
switch (t.channelName) {
|
|
82
81
|
case "email":
|
|
83
|
-
return /* @__PURE__ */
|
|
82
|
+
return /* @__PURE__ */ e(u, { width: 11, height: 11 });
|
|
84
83
|
case "smtp":
|
|
85
|
-
return /* @__PURE__ */
|
|
84
|
+
return /* @__PURE__ */ e(u, { width: 11, height: 11 });
|
|
86
85
|
case "facebook":
|
|
87
|
-
return /* @__PURE__ */
|
|
86
|
+
return /* @__PURE__ */ e(d, { width: 11, height: 11 });
|
|
88
87
|
case "facebook-catalog":
|
|
89
|
-
return /* @__PURE__ */
|
|
88
|
+
return /* @__PURE__ */ e(d, { width: 11, height: 11 });
|
|
90
89
|
case "messenger":
|
|
91
|
-
return /* @__PURE__ */
|
|
90
|
+
return /* @__PURE__ */ e(d, { width: 11, height: 11 });
|
|
92
91
|
case "instagram":
|
|
93
|
-
return /* @__PURE__ */
|
|
92
|
+
return /* @__PURE__ */ e(x, { width: 11, height: 11 });
|
|
94
93
|
case "whatsapp":
|
|
95
|
-
return /* @__PURE__ */
|
|
94
|
+
return /* @__PURE__ */ e(B, { width: 11, height: 11 });
|
|
96
95
|
case "gmail":
|
|
97
|
-
return /* @__PURE__ */
|
|
96
|
+
return /* @__PURE__ */ e(z, { width: 11, height: 11 });
|
|
98
97
|
case "tasks":
|
|
99
|
-
return /* @__PURE__ */
|
|
98
|
+
return /* @__PURE__ */ e(C, { width: 11, height: 11 });
|
|
100
99
|
case "livechat":
|
|
101
|
-
return /* @__PURE__ */
|
|
102
|
-
case "voice":
|
|
103
|
-
return /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
|
|
104
|
-
U,
|
|
105
|
-
{
|
|
106
|
-
width: 8,
|
|
107
|
-
height: 8,
|
|
108
|
-
color: i.content.secondaryInverse
|
|
109
|
-
}
|
|
110
|
-
) });
|
|
100
|
+
return /* @__PURE__ */ e(A, { width: 11, height: 11 });
|
|
111
101
|
}
|
|
112
|
-
}, y = () =>
|
|
102
|
+
}, y = () => t.status ? /* @__PURE__ */ e(
|
|
113
103
|
"div",
|
|
114
104
|
{
|
|
115
105
|
style: {
|
|
116
|
-
backgroundColor:
|
|
106
|
+
backgroundColor: t.status === "ONLINE" ? i.special.whatsapp.brand : i.content.inactive,
|
|
117
107
|
width: "8px",
|
|
118
108
|
height: "8px",
|
|
119
109
|
borderRadius: "50%"
|
|
@@ -128,50 +118,50 @@ const Q = (e) => {
|
|
|
128
118
|
},
|
|
129
119
|
children: [
|
|
130
120
|
/* @__PURE__ */ g(
|
|
131
|
-
|
|
121
|
+
v,
|
|
132
122
|
{
|
|
133
|
-
type:
|
|
134
|
-
size:
|
|
135
|
-
background:
|
|
123
|
+
type: t.type === r.IMAGE && (l || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
|
|
124
|
+
size: t.size,
|
|
125
|
+
background: t.background,
|
|
136
126
|
children: [
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
127
|
+
t.type === r.IMAGE && I(),
|
|
128
|
+
t.type === r.INITIALS && /* @__PURE__ */ e("div", { children: m() }),
|
|
129
|
+
t.type === r.ICON && t.icon && /* @__PURE__ */ e(
|
|
130
|
+
t.icon,
|
|
141
131
|
{
|
|
142
|
-
width:
|
|
143
|
-
height:
|
|
144
|
-
color: c[
|
|
132
|
+
width: n[t.size],
|
|
133
|
+
height: n[t.size],
|
|
134
|
+
color: c[t.background]
|
|
145
135
|
}
|
|
146
136
|
)
|
|
147
137
|
]
|
|
148
138
|
}
|
|
149
139
|
),
|
|
150
|
-
|
|
140
|
+
t.inboxSettings && /* @__PURE__ */ e(
|
|
151
141
|
"div",
|
|
152
142
|
{
|
|
153
143
|
style: {
|
|
154
144
|
position: "absolute",
|
|
155
|
-
left:
|
|
156
|
-
top:
|
|
145
|
+
left: n[t.size] + "px",
|
|
146
|
+
top: n[t.size] + "px",
|
|
157
147
|
width: 14,
|
|
158
148
|
height: 14,
|
|
159
|
-
borderRadius:
|
|
149
|
+
borderRadius: t?.borderRadius || "50%",
|
|
160
150
|
display: "flex",
|
|
161
151
|
justifyContent: "center",
|
|
162
|
-
backgroundColor:
|
|
152
|
+
backgroundColor: t.inboxSettings.isSelected ? t.inboxSettings.isComments ? i.content.primary : i.background.brandLight : t.inboxSettings.isComments ? i.content.primary : i.surface.standard,
|
|
163
153
|
alignItems: "center"
|
|
164
154
|
},
|
|
165
155
|
children: f()
|
|
166
156
|
}
|
|
167
157
|
),
|
|
168
|
-
|
|
158
|
+
t.status && /* @__PURE__ */ e(
|
|
169
159
|
"div",
|
|
170
160
|
{
|
|
171
161
|
style: {
|
|
172
162
|
position: "absolute",
|
|
173
|
-
left:
|
|
174
|
-
top:
|
|
163
|
+
left: n[t.size] + "px",
|
|
164
|
+
top: n[t.size] + "px",
|
|
175
165
|
width: 11,
|
|
176
166
|
height: 11,
|
|
177
167
|
borderRadius: "50%",
|
|
@@ -188,9 +178,9 @@ const Q = (e) => {
|
|
|
188
178
|
);
|
|
189
179
|
};
|
|
190
180
|
export {
|
|
191
|
-
|
|
192
|
-
|
|
181
|
+
n as AVATAR_SIZE_VS_ICON_SIZE_MAP,
|
|
182
|
+
Y as Avatar,
|
|
193
183
|
c as BACKGROUND_VS_TEXT_COLOR_MAP,
|
|
194
|
-
|
|
184
|
+
U as MESSAGE_CHANNELS
|
|
195
185
|
};
|
|
196
186
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { Phone as PhoneIcon } from '@src/icons';\nimport React, { useState } from 'react';\nimport {\n\tAvatarStyle,\n\tPhoneIconWrapper,\n} from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n\tVOICE = 'voice',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM || props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.VOICE:\n\t\t\t\treturn (\n\t\t\t\t\t<PhoneIconWrapper>\n\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\t\theight={8}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondaryInverse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PhoneIconWrapper>\n\t\t\t\t);\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","jsx","BodyTiny","TitleSmall","TitleMedium","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","PhoneIconWrapper","PhoneIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AvatarStyle } from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM || props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","jsx","BodyTiny","TitleSmall","TitleMedium","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
|
|
@@ -1,26 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { AVATAR_SIZE_MAP as
|
|
3
|
-
import { COLORS as
|
|
4
|
-
const
|
|
5
|
-
width: ${(r) =>
|
|
6
|
-
height: ${(r) =>
|
|
1
|
+
import a from "styled-components";
|
|
2
|
+
import { AVATAR_SIZE_MAP as t, AVATAR_TYPES as d, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
|
|
3
|
+
import { COLORS as o } from "../../constants/Theme.js";
|
|
4
|
+
const A = a.div`
|
|
5
|
+
width: ${(r) => t[r.size] + "px"};
|
|
6
|
+
height: ${(r) => t[r.size] + "px"};
|
|
7
7
|
display: flex;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
align-items: center;
|
|
10
|
-
background-color: ${(r) => r.type === d.IMAGE ? "null" : r.background ===
|
|
11
|
-
border: ${(r) => r.background ===
|
|
10
|
+
background-color: ${(r) => r.type === d.IMAGE ? "null" : r.background === e.LIGHT ? o.background.base : r.background === e.WHITE ? o.surface.standard : o.background.inverse};
|
|
11
|
+
border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + o.stroke.primary : 0};
|
|
12
12
|
border-radius: 50%;
|
|
13
|
-
`, u = n.div`
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
width: 11px;
|
|
18
|
-
height: 11px;
|
|
19
|
-
border-radius: 4px;
|
|
20
|
-
background-color: ${e.content.secondary};
|
|
21
13
|
`;
|
|
22
14
|
export {
|
|
23
|
-
|
|
24
|
-
u as PhoneIconWrapper
|
|
15
|
+
A as AvatarStyle
|
|
25
16
|
};
|
|
26
17
|
//# sourceMappingURL=Avatar.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT ||\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n
|
|
1
|
+
{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT ||\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,WACfA,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}
|
|
@@ -1,107 +1,103 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useMemo as
|
|
3
|
-
import { useTemplateModalContext as
|
|
4
|
-
import { isRichAndCarouselCards as
|
|
5
|
-
import { VariableEditorHelper as
|
|
6
|
-
import { HEADER_TYPES as
|
|
7
|
-
import { ChatBtn as
|
|
8
|
-
import { RCSButtons as
|
|
9
|
-
import { RCSMediaCard as
|
|
10
|
-
import {
|
|
11
|
-
const
|
|
1
|
+
import { jsx as e, jsxs as h, Fragment as d } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as T } from "react";
|
|
3
|
+
import { useTemplateModalContext as V } from "../../template-context-mapper/context/templateModalContext.js";
|
|
4
|
+
import { isRichAndCarouselCards as E } from "../helpers/templateMiscHelper.js";
|
|
5
|
+
import { VariableEditorHelper as z } from "../helpers/VariableEditorHelper.js";
|
|
6
|
+
import { HEADER_TYPES as i } from "../models/TemplateMeta.js";
|
|
7
|
+
import { ChatBtn as U } from "../WhatsApp/ChatBtn.js";
|
|
8
|
+
import { RCSButtons as j } from "./RCSButtons.js";
|
|
9
|
+
import { RCSMediaCard as S, PdfMediaCard as G } from "./RCSMediaCard.js";
|
|
10
|
+
import { HeaderTextContainer as k, RCSPreviewContainer as F, TitleTextContainer as W, RcsHtmlContainer as X, RCSChatBtnContainer as Y } from "./RCSPreview.styled.js";
|
|
11
|
+
const u = new z(), ie = (w) => {
|
|
12
12
|
const {
|
|
13
|
-
bodyText:
|
|
13
|
+
bodyText: y,
|
|
14
14
|
titleText: m,
|
|
15
15
|
headerMediaType: t,
|
|
16
|
-
headerText:
|
|
17
|
-
headerAssetLink:
|
|
16
|
+
headerText: N,
|
|
17
|
+
headerAssetLink: l,
|
|
18
18
|
headerAssetName: p,
|
|
19
19
|
imagePreviewStyles: g,
|
|
20
|
-
size:
|
|
21
|
-
bodyVariableList:
|
|
22
|
-
headerVariableList:
|
|
23
|
-
buttons:
|
|
20
|
+
size: f,
|
|
21
|
+
bodyVariableList: R,
|
|
22
|
+
headerVariableList: b,
|
|
23
|
+
buttons: n,
|
|
24
24
|
carouselCardIndex: r,
|
|
25
|
-
isWhatsappCarousel:
|
|
26
|
-
isPreview:
|
|
27
|
-
titleVariableList:
|
|
25
|
+
isWhatsappCarousel: A,
|
|
26
|
+
isPreview: I,
|
|
27
|
+
titleVariableList: L,
|
|
28
28
|
templateConfiguration: o
|
|
29
|
-
} =
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
), O =
|
|
29
|
+
} = w, P = u.format(
|
|
30
|
+
y?.replace(/</g, "<").replace(/>/g, ">"),
|
|
31
|
+
R
|
|
32
|
+
), B = u.format(
|
|
33
|
+
N?.replace(/</g, "<").replace(/>/g, ">"),
|
|
34
|
+
b
|
|
35
|
+
), O = u.format(
|
|
36
36
|
m?.replace(/</g, "<").replace(/>/g, ">"),
|
|
37
|
-
|
|
37
|
+
L
|
|
38
38
|
), {
|
|
39
|
-
selectedCarouselIndex:
|
|
39
|
+
selectedCarouselIndex: s,
|
|
40
40
|
isProductCarouselType: x,
|
|
41
|
-
errorIndexes:
|
|
42
|
-
isCarouselHovered:
|
|
43
|
-
} =
|
|
41
|
+
errorIndexes: _,
|
|
42
|
+
isCarouselHovered: D
|
|
43
|
+
} = V(), M = T(() => E(
|
|
44
44
|
o?.templateType
|
|
45
|
-
), [o?.templateType]),
|
|
45
|
+
), [o?.templateType]), a = T(() => o?.orientation == "HORIZONTAL", [o]), H = T(() => !a && !!o?.isMediaAfterBody, [a, o]), v = t === i.TEXT ? /* @__PURE__ */ e(k, { dangerouslySetInnerHTML: { __html: B } }) : t !== i.NONE && l && t !== i.DOCUMENT ? /* @__PURE__ */ e(
|
|
46
|
+
S,
|
|
47
|
+
{
|
|
48
|
+
headerAssetLink: l,
|
|
49
|
+
headerAssetName: p,
|
|
50
|
+
mediaType: t,
|
|
51
|
+
imagePreviewStyles: t === i.IMAGE ? g : {}
|
|
52
|
+
}
|
|
53
|
+
) : null;
|
|
46
54
|
return /* @__PURE__ */ h(
|
|
47
|
-
|
|
55
|
+
F,
|
|
48
56
|
{
|
|
49
57
|
isCarouselCard: r != null && r > -1,
|
|
50
|
-
showBorder: r != null && r ===
|
|
51
|
-
hasError:
|
|
52
|
-
isWhatsappCarousel:
|
|
53
|
-
isPreview:
|
|
54
|
-
showDashedBorder: x &&
|
|
55
|
-
needBorder:
|
|
56
|
-
isHorizontalOrientation:
|
|
58
|
+
showBorder: r != null && r === s || x && r != null && r > -1 && s != null && s > -1,
|
|
59
|
+
hasError: _?.includes(r ?? -2),
|
|
60
|
+
isWhatsappCarousel: A,
|
|
61
|
+
isPreview: I,
|
|
62
|
+
showDashedBorder: x && D && (s ?? -1) < 0 && (r ?? -1) > -1,
|
|
63
|
+
needBorder: M,
|
|
64
|
+
isHorizontalOrientation: a,
|
|
57
65
|
children: [
|
|
58
|
-
!
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
) : t !== a.NONE && i && t !== a.DOCUMENT ? /* @__PURE__ */ e(
|
|
64
|
-
E,
|
|
65
|
-
{
|
|
66
|
-
headerAssetLink: i,
|
|
67
|
-
headerAssetName: p,
|
|
68
|
-
mediaType: t,
|
|
69
|
-
imagePreviewStyles: t === a.IMAGE ? g : {}
|
|
70
|
-
}
|
|
71
|
-
) : null }),
|
|
72
|
-
/* @__PURE__ */ h("div", { style: { width: l ? "50%" : "" }, children: [
|
|
73
|
-
/* @__PURE__ */ h("div", { className: f ? "" : "text--template", children: [
|
|
74
|
-
!!m && /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
|
|
75
|
-
k,
|
|
66
|
+
!a && !H && v,
|
|
67
|
+
/* @__PURE__ */ h("div", { style: { width: a ? "50%" : "" }, children: [
|
|
68
|
+
/* @__PURE__ */ h("div", { className: M ? "" : "text--template", children: [
|
|
69
|
+
!!m && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
|
|
70
|
+
W,
|
|
76
71
|
{
|
|
77
72
|
dangerouslySetInnerHTML: {
|
|
78
73
|
__html: O
|
|
79
74
|
}
|
|
80
75
|
}
|
|
81
76
|
) }),
|
|
82
|
-
!!
|
|
83
|
-
|
|
77
|
+
!!y && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
|
|
78
|
+
X,
|
|
84
79
|
{
|
|
85
80
|
dangerouslySetInnerHTML: {
|
|
86
|
-
__html:
|
|
81
|
+
__html: P
|
|
87
82
|
},
|
|
88
83
|
style: { paddingTop: m ? 0 : 12 }
|
|
89
84
|
}
|
|
90
85
|
) }),
|
|
91
|
-
t ===
|
|
86
|
+
t === i.DOCUMENT ? /* @__PURE__ */ e(G, { headerAssetLink: l, headerAssetName: p }) : /* @__PURE__ */ e(d, {})
|
|
92
87
|
] }),
|
|
93
|
-
|
|
88
|
+
!a && H && v,
|
|
89
|
+
n && n.length > 0 ? E(
|
|
94
90
|
o?.templateType
|
|
95
|
-
) ? /* @__PURE__ */ e(
|
|
91
|
+
) ? /* @__PURE__ */ e(d, { children: n.map((c, C) => /* @__PURE__ */ e(U, { text: c.text, size: f }, C)) }) : /* @__PURE__ */ e(Y, { children: n.map((c, C) => /* @__PURE__ */ e(j, { text: c.text, size: f }, C)) }) : null
|
|
96
92
|
] }),
|
|
97
|
-
|
|
98
|
-
|
|
93
|
+
a && t !== i.NONE && l && t !== i.DOCUMENT && /* @__PURE__ */ e(
|
|
94
|
+
S,
|
|
99
95
|
{
|
|
100
|
-
headerAssetLink:
|
|
96
|
+
headerAssetLink: l,
|
|
101
97
|
headerAssetName: p,
|
|
102
98
|
mediaType: t,
|
|
103
|
-
imagePreviewStyles: t ===
|
|
104
|
-
isHorizontal:
|
|
99
|
+
imagePreviewStyles: t === i.IMAGE ? g : {},
|
|
100
|
+
isHorizontal: a
|
|
105
101
|
}
|
|
106
102
|
)
|
|
107
103
|
]
|
|
@@ -109,6 +105,6 @@ const T = new D(), re = (M) => {
|
|
|
109
105
|
);
|
|
110
106
|
};
|
|
111
107
|
export {
|
|
112
|
-
|
|
108
|
+
ie as RCSChatPreview
|
|
113
109
|
};
|
|
114
110
|
//# sourceMappingURL=RCSChatPreview.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RCSChatPreview.js","sources":["../../../../../src/components/template-preview/RCS/RCSChatPreview.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { isRichAndCarouselCards } from '../helpers/templateMiscHelper';\nimport { VariableEditorHelper } from '../helpers/VariableEditorHelper';\nimport { RCS_TEMPLATE_TYPE, RCSPreviewPropsV2 } from '../models/RCSTemplate';\nimport { HEADER_TYPES } from '../models/TemplateMeta';\nimport { ChatBtn } from '../WhatsApp/ChatBtn';\nimport { RCSButtons } from './RCSButtons';\nimport { PdfMediaCard, RCSMediaCard } from './RCSMediaCard';\nimport {\n\tHeaderTextContainer,\n\tRCSChatBtnContainer,\n\tRcsHtmlContainer,\n\tRCSPreviewContainer,\n\tTitleTextContainer,\n} from './RCSPreview.styled';\n\nconst variableEditorHelper = new VariableEditorHelper();\n\nexport const RCSChatPreview = (props: RCSPreviewPropsV2) => {\n\tconst {\n\t\tbodyText,\n\t\ttitleText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tbodyVariableList,\n\t\theaderVariableList,\n\t\tbuttons,\n\t\tcarouselCardIndex,\n\t\tisWhatsappCarousel,\n\t\tisPreview,\n\t\ttitleVariableList,\n\t\ttemplateConfiguration,\n\t} = props;\n\n\tconst bodyHTML = variableEditorHelper.format(\n\t\tbodyText?.replace(/</g, '<').replace(/>/g, '>'),\n\t\tbodyVariableList,\n\t);\n\tconst headerHtml = variableEditorHelper.format(\n\t\theaderText?.replace(/</g, '<').replace(/>/g, '>'),\n\t\theaderVariableList,\n\t);\n\tconst titleHtml = variableEditorHelper.format(\n\t\ttitleText?.replace(/</g, '<').replace(/>/g, '>'),\n\t\ttitleVariableList,\n\t);\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\terrorIndexes,\n\t\tisCarouselHovered,\n\t} = useTemplateModalContext();\n\n\tconst isRichCardTypeTemplate = useMemo(() => {\n\t\treturn isRichAndCarouselCards(\n\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t);\n\t}, [templateConfiguration?.templateType]);\n\n\tconst isHorizontalOrientation = useMemo(() => {\n\t\treturn templateConfiguration?.orientation == 'HORIZONTAL';\n\t}, [templateConfiguration]);\n\n\treturn (\n\t\t<RCSPreviewContainer\n\t\t\tisCarouselCard={carouselCardIndex != undefined && carouselCardIndex > -1}\n\t\t\tshowBorder={\n\t\t\t\t(carouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex === selectedCarouselIndex) ||\n\t\t\t\t(isProductCarouselType &&\n\t\t\t\t\tcarouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex > -1 &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex > -1)\n\t\t\t}\n\t\t\thasError={errorIndexes?.includes(carouselCardIndex ?? -2)}\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tisPreview={isPreview}\n\t\t\tshowDashedBorder={\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tisCarouselHovered &&\n\t\t\t\t(selectedCarouselIndex ?? -1) < 0 &&\n\t\t\t\t(carouselCardIndex ?? -1) > -1\n\t\t\t}\n\t\t\tneedBorder={isRichCardTypeTemplate}\n\t\t\tisHorizontalOrientation={isHorizontalOrientation}\n\t\t>\n\t\t\t{!isHorizontalOrientation && (\n\t\t\t\t<>\n\t\t\t\t\t{headerMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t\t\t\t<HeaderTextContainer\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: headerHtml }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : headerMediaType !== HEADER_TYPES.NONE &&\n\t\t\t\t\t headerAssetLink &&\n\t\t\t\t\t headerMediaType !== HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t<RCSMediaCard\n\t\t\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div style={{ width: isHorizontalOrientation ? '50%' : '' }}>\n\t\t\t\t<div className={isRichCardTypeTemplate ? '' : 'text--template'}>\n\t\t\t\t\t{!!titleText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TitleTextContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: titleHtml,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!!bodyText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<RcsHtmlContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: bodyHTML,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstyle={{ paddingTop: titleText ? 0 : 12 }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{headerMediaType === HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t<PdfMediaCard {...{ headerAssetLink, headerAssetName }} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{buttons && buttons.length > 0 ? (\n\t\t\t\t\tisRichAndCarouselCards(\n\t\t\t\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t\t\t\t) ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<ChatBtn key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<RCSChatBtnContainer>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<RCSButtons key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</RCSChatBtnContainer>\n\t\t\t\t\t)\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{isHorizontalOrientation &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.NONE &&\n\t\t\t\theaderAssetLink &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.DOCUMENT && (\n\t\t\t\t\t<RCSMediaCard\n\t\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHorizontal={isHorizontalOrientation}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t</RCSPreviewContainer>\n\t);\n};\n"],"names":["variableEditorHelper","VariableEditorHelper","RCSChatPreview","props","bodyText","titleText","headerMediaType","headerText","headerAssetLink","headerAssetName","imagePreviewStyles","size","bodyVariableList","headerVariableList","buttons","carouselCardIndex","isWhatsappCarousel","isPreview","titleVariableList","templateConfiguration","bodyHTML","headerHtml","titleHtml","selectedCarouselIndex","isProductCarouselType","errorIndexes","isCarouselHovered","useTemplateModalContext","isRichCardTypeTemplate","useMemo","isRichAndCarouselCards","isHorizontalOrientation","jsxs","RCSPreviewContainer","jsx","Fragment","HEADER_TYPES","HeaderTextContainer","RCSMediaCard","TitleTextContainer","RcsHtmlContainer","PdfMediaCard","button","i","ChatBtn","RCSChatBtnContainer","RCSButtons"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RCSChatPreview.js","sources":["../../../../../src/components/template-preview/RCS/RCSChatPreview.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { isRichAndCarouselCards } from '../helpers/templateMiscHelper';\nimport { VariableEditorHelper } from '../helpers/VariableEditorHelper';\nimport { RCS_TEMPLATE_TYPE, RCSPreviewPropsV2 } from '../models/RCSTemplate';\nimport { HEADER_TYPES } from '../models/TemplateMeta';\nimport { ChatBtn } from '../WhatsApp/ChatBtn';\nimport { RCSButtons } from './RCSButtons';\nimport { PdfMediaCard, RCSMediaCard } from './RCSMediaCard';\nimport {\n\tHeaderTextContainer,\n\tRCSChatBtnContainer,\n\tRcsHtmlContainer,\n\tRCSPreviewContainer,\n\tTitleTextContainer,\n} from './RCSPreview.styled';\n\nconst variableEditorHelper = new VariableEditorHelper();\n\nexport const RCSChatPreview = (props: RCSPreviewPropsV2) => {\n\tconst {\n\t\tbodyText,\n\t\ttitleText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tbodyVariableList,\n\t\theaderVariableList,\n\t\tbuttons,\n\t\tcarouselCardIndex,\n\t\tisWhatsappCarousel,\n\t\tisPreview,\n\t\ttitleVariableList,\n\t\ttemplateConfiguration,\n\t} = props;\n\n\tconst bodyHTML = variableEditorHelper.format(\n\t\tbodyText?.replace(/</g, '<').replace(/>/g, '>'),\n\t\tbodyVariableList,\n\t);\n\tconst headerHtml = variableEditorHelper.format(\n\t\theaderText?.replace(/</g, '<').replace(/>/g, '>'),\n\t\theaderVariableList,\n\t);\n\tconst titleHtml = variableEditorHelper.format(\n\t\ttitleText?.replace(/</g, '<').replace(/>/g, '>'),\n\t\ttitleVariableList,\n\t);\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\terrorIndexes,\n\t\tisCarouselHovered,\n\t} = useTemplateModalContext();\n\n\tconst isRichCardTypeTemplate = useMemo(() => {\n\t\treturn isRichAndCarouselCards(\n\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t);\n\t}, [templateConfiguration?.templateType]);\n\n\tconst isHorizontalOrientation = useMemo(() => {\n\t\treturn templateConfiguration?.orientation == 'HORIZONTAL';\n\t}, [templateConfiguration]);\n\n\t// For VERTICAL templates whose original `components[]` order is\n\t// body-then-media, render the media after the body instead of the default\n\t// media-first layout. Defaults to false → unchanged behaviour.\n\tconst isMediaAfterBody = useMemo(() => {\n\t\treturn (\n\t\t\t!isHorizontalOrientation && !!templateConfiguration?.isMediaAfterBody\n\t\t);\n\t}, [isHorizontalOrientation, templateConfiguration]);\n\n\tconst verticalMediaHeader =\n\t\theaderMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t<HeaderTextContainer dangerouslySetInnerHTML={{ __html: headerHtml }} />\n\t\t) : headerMediaType !== HEADER_TYPES.NONE &&\n\t\t headerAssetLink &&\n\t\t headerMediaType !== HEADER_TYPES.DOCUMENT ? (\n\t\t\t<RCSMediaCard\n\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\tmediaType={headerMediaType}\n\t\t\t\timagePreviewStyles={\n\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t}\n\t\t\t/>\n\t\t) : null;\n\n\treturn (\n\t\t<RCSPreviewContainer\n\t\t\tisCarouselCard={carouselCardIndex != undefined && carouselCardIndex > -1}\n\t\t\tshowBorder={\n\t\t\t\t(carouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex === selectedCarouselIndex) ||\n\t\t\t\t(isProductCarouselType &&\n\t\t\t\t\tcarouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex > -1 &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex > -1)\n\t\t\t}\n\t\t\thasError={errorIndexes?.includes(carouselCardIndex ?? -2)}\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tisPreview={isPreview}\n\t\t\tshowDashedBorder={\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tisCarouselHovered &&\n\t\t\t\t(selectedCarouselIndex ?? -1) < 0 &&\n\t\t\t\t(carouselCardIndex ?? -1) > -1\n\t\t\t}\n\t\t\tneedBorder={isRichCardTypeTemplate}\n\t\t\tisHorizontalOrientation={isHorizontalOrientation}\n\t\t>\n\t\t\t{!isHorizontalOrientation && !isMediaAfterBody && verticalMediaHeader}\n\t\t\t<div style={{ width: isHorizontalOrientation ? '50%' : '' }}>\n\t\t\t\t<div className={isRichCardTypeTemplate ? '' : 'text--template'}>\n\t\t\t\t\t{!!titleText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TitleTextContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: titleHtml,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!!bodyText && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<RcsHtmlContainer\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: bodyHTML,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstyle={{ paddingTop: titleText ? 0 : 12 }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{headerMediaType === HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t<PdfMediaCard {...{ headerAssetLink, headerAssetName }} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{!isHorizontalOrientation && isMediaAfterBody && verticalMediaHeader}\n\n\t\t\t\t{buttons && buttons.length > 0 ? (\n\t\t\t\t\tisRichAndCarouselCards(\n\t\t\t\t\t\ttemplateConfiguration?.templateType as RCS_TEMPLATE_TYPE,\n\t\t\t\t\t) ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<ChatBtn key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<RCSChatBtnContainer>\n\t\t\t\t\t\t\t{buttons.map((button, i) => (\n\t\t\t\t\t\t\t\t<RCSButtons key={i} text={button.text} size={size} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</RCSChatBtnContainer>\n\t\t\t\t\t)\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{isHorizontalOrientation &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.NONE &&\n\t\t\t\theaderAssetLink &&\n\t\t\t\theaderMediaType !== HEADER_TYPES.DOCUMENT && (\n\t\t\t\t\t<RCSMediaCard\n\t\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHorizontal={isHorizontalOrientation}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t</RCSPreviewContainer>\n\t);\n};\n"],"names":["variableEditorHelper","VariableEditorHelper","RCSChatPreview","props","bodyText","titleText","headerMediaType","headerText","headerAssetLink","headerAssetName","imagePreviewStyles","size","bodyVariableList","headerVariableList","buttons","carouselCardIndex","isWhatsappCarousel","isPreview","titleVariableList","templateConfiguration","bodyHTML","headerHtml","titleHtml","selectedCarouselIndex","isProductCarouselType","errorIndexes","isCarouselHovered","useTemplateModalContext","isRichCardTypeTemplate","useMemo","isRichAndCarouselCards","isHorizontalOrientation","isMediaAfterBody","verticalMediaHeader","HEADER_TYPES","jsx","HeaderTextContainer","RCSMediaCard","jsxs","RCSPreviewContainer","Fragment","TitleTextContainer","RcsHtmlContainer","PdfMediaCard","button","i","ChatBtn","RCSChatBtnContainer","RCSButtons"],"mappings":"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"}
|