https://smh.re/EmailDetails-91d349.bundle.js

1"use strict";(self.webpackChunksmarpshare_frontend=self.webpackChunksmarpshare_frontend||[]).push([[6813],{9176:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{EmailDetails:()=>EmailDetails});var react=__webpack_require__(96540),react_router=__webpack_require__(56347),components=__webpack_require__(66931),tabs=__webpack_require__(34126),use_get_text=__webpack_require__(87914),email_details_content=__webpack_require__(74707),emotion_styled_browser_esm=__webpack_require__(59295),with_loader=__webpack_require__(55520),email_overview=__webpack_require__(96187),get_text=__webpack_require__(59247),free_solid_svg_icons=__webpack_require__(66188),index_es=__webpack_require__(46784),isNil=__webpack_require__(97859);const Card=emotion_styled_browser_esm.A.article`
2	display: flex;
3	flex-direction: column;
4	border: 1px solid #d9d9de;
5	height: 134px;
6	flex-grow: 1;
7	align-items: center;
8	background-color: white;
9
10	span:first-of-type {
11		color: #333333;
12	}
13`,Description=emotion_styled_browser_esm.A.header`
14	display: flex;
15	width: 100%;
16	justify-content: space-between;
17	padding: ${props=>props.theme.spacing.XS} 10px;
18`,ValueContainer=emotion_styled_browser_esm.A.div`
19	display: flex;
20	flex-direction: column;
21	max-width: 107px;
22`,Value=emotion_styled_browser_esm.A.div`
23	color: ${props=>props.color};
24	font-size: 30px;
25	font-weight: 600;
26	height: 36px;
27	min-width: 80px;
28	display: flex;
29	justify-content: center;
30`,Rate=emotion_styled_browser_esm.A.div`
31	display: flex;
32	justify-content: space-between;
33	padding-top: 6px;
34	border-top: 1px solid #d9d9de;
35	margin-top: ${props=>props.theme.spacing.XS};
36	color: #6c6c6c;
37`,AnalyticsCard=({name,value,tooltip,rate,color="#127899"})=>{const isShowRate=!(0,isNil.A)(rate);return react.createElement(Card,null,react.createElement(Description,null,react.createElement("span",null,name),react.createElement(components.m_,{place:"bottom",size:"small"},react.createElement(components.m_.Trigger,null,react.createElement(index_es.g,{icon:free_solid_svg_icons.iW_})),react.createElement(components.m_.Content,null,tooltip))),react.createElement(ValueContainer,null,react.createElement(Value,{color},value.toLocaleString("en-US")),isShowRate?react.createElement(Rate,null,react.createElement("div",null,react.createElement(get_text.q,null,"Rate")),react.createElement("div",null,rate,"%")):null))};var warning_box=__webpack_require__(37711);const Content=emotion_styled_browser_esm.A.div`
38	display: flex;
39	flex-grow: 1;
40	align-items: flex-start;
41	justify-content: space-between;
42
43	> button {
44		flex-shrink: 0;
45		color: #ce2121;
46
47		&:hover {
48			color: #ce2121;
49		}
50	}
51`,BouncedBox=({message})=>{const{gettext}=(0,use_get_text.z)(),[collapsed,setCollapsed]=react.useState(!0),isCollapsible=message.length>120,buttonText=collapsed?"Show all list":"Show less";return react.createElement(warning_box.y,null,react.createElement(Content,null,react.createElement(get_text.q,null,((message,collapsed,isCollapsible)=>collapsed&&isCollapsible?`${message.slice(0,120)}...`:message)(message,collapsed,isCollapsible)),isCollapsible&&react.createElement(components.$n,{style:"link",text:gettext(buttonText),onClick:()=>setCollapsed((collapsed=>!collapsed)),size:"small"})))},AnalyticsSection=emotion_styled_browser_esm.A.section`
52	display: flex;
53	justify-content: space-between;
54
55	& > *:not(:last-child) {
56		margin-right: ${props=>props.theme.spacing.S};
57	}
58`,DetailsTableWrapper=emotion_styled_browser_esm.A.div`
59	border: 1px solid #d9d9de;
60	background-color: ${props=>props.theme.color.SpaceDefault};
61	padding: 22px;
62`,EmailDetailsSummary=({isLoading=!1,emailCampaign,bouncedEmails})=>{const{gettext}=(0,use_get_text.z)(),{fromEmail="",emailSubject="",fromName="",recipientCount=0,analytics}=emailCampaign||{},getBouncedText=(()=>{const{ngettext,gettext}=(0,use_get_text.z)();return(0,react.useCallback)((emails=>{if(!emails.length)return"";const emailsString=emails.join(", ");return ngettext(`${gettext("%s email wasn't delivered")} ${emailsString}`,`${gettext("%s emails weren't delivered")} ${emailsString}`,emails.length)}),[gettext,ngettext])})(),bouncedString=getBouncedText(bouncedEmails),{opened=0,openedPct=0,clicked=0,clickedPct=0}=analytics||{};return react.createElement("section",null,react.createElement(with_loader.O,{isLoading},bouncedString?react.createElement(BouncedBox,{message:bouncedString}):null,react.createElement(components.hK,{dir:"y",size:"l"}),react.createElement("section",null,react.createElement(components.H3,null,react.createElement(get_text.q,null,"Analytics")),react.createElement(components.hK,{dir:"y",size:"l"}),react.createElement(AnalyticsSection,null,react.createElement(AnalyticsCard,{name:gettext("Recipients"),value:recipientCount,tooltip:gettext("Amount of recipients in the email"),color:"#50af9e"}),react.createElement(AnalyticsCard,{name:gettext("Opened"),value:opened,tooltip:gettext("Amount of unique users who opened the email"),color:"#127899",rate:openedPct}),react.createElement(AnalyticsCard,{name:gettext("Clicked"),value:clicked,tooltip:gettext("Amount of unique users who clicked any link"),color:"#dc8460",rate:clickedPct}))),react.createElement(components.hK,{dir:"y",size:"xxl"}),react.createElement("section",null,react.createElement(components.H3,null,react.createElement(get_text.q,null,"Email details")),react.createElement(components.hK,{dir:"y",size:"l"}),react.createElement(DetailsTableWrapper,null,react.createElement(email_overview._,{emailSubject,recipientsCount:recipientCount,fromName,from

62Email})))))};var use_fetch_email_campaign_query=__webpack_require__(87147),react_router_dom=__webpack_require__(54625);const StyledLink=(0,emotion_styled_browser_esm.A)(react_router_dom.N_)`
63	display: inline-flex;
64	align-items: center;
65	flex-grow: 0;
66	border: 1px solid #d9d9de;
67	background-color: #f8f8f8;
68	padding: ${props=>props.theme.spacing.S} 14px;
69
70	&,
71	&:link,
72	&:visited,
73	&:hover {
74		color: #6c6c6c;
75		text-decoration: none;
76	}
77`,LinkButton=({children,to,icon=free_solid_svg_icons.CeG})=>react.createElement(StyledLink,{to},react.createElement(index_es.g,{icon}),react.createElement(components.hK,{dir:"x",size:"xs"}),children);var use_email_html_template_query=__webpack_require__(97109);const columnStyles=[{},{},{}],getRowProps=()=>({style:{backgroundColor:"white"}}),EmailDetailsAudience=({recipients=[]})=>{const{gettext}=(0,use_get_text.z)(),headings=[gettext("Email"),gettext("First name"),gettext("Last name")],rows=recipients.map((recipient=>[recipient.email,recipient.firstName,recipient.lastName]));return react.createElement("section",null,react.createElement(components.hK,{dir:"y",size:"l"}),react.createElement(components.bQ,{headings,rows,columnStyles,getRowProps}))};var use_target_audience_query=__webpack_require__(20163),es=__webpack_require__(75942),api=__webpack_require__(56433);const useBouncedEmails=campaignId=>(0,es.useQuery)(["bounced-emails",campaignId],(()=>(campaignId=>api.Y4.mailingRetrieveBouncedEmails(campaignId).then((response=>response.data)))(campaignId)),{enabled:!!campaignId}),SAME_ARRAY=[],EmailDetailsContainer=()=>{const{gettext}=(0,use_get_text.z)(),{campaignId}=(0,react_router.g)(),{data:emailCampaign,isLoading:isCampaignLoading}=(0,use_fetch_email_campaign_query.a)(campaignId),{data:markup}=(0,use_email_html_template_query.R)(null==emailCampaign?void 0:emailCampaign.id),{data:bouncedEmailsData=SAME_ARRAY,isLoading:isBouncedEmailsLoading}=useBouncedEmails(campaignId),{data:recipients}=(0,use_target_audience_query.Tf)(null==emailCampaign?void 0:emailCampaign.mailingListId),[currentTab,setCurrentTab]=react.useState("summary"),onTabClick=tabKey=>{tabKey&&setCurrentTab(tabKey)},bouncedEmails=react.useMemo((()=>bouncedEmailsData.map((item=>item.email))),[bouncedEmailsData]);return react.createElement("section",null,react.createElement(LinkButton,{to:"/email-list"},react.createElement(get_text.q,null,"Back to list")),react.createElement(components.hK,{size:"l",dir:"y"}),react.createElement(components.H2,null,react.createElement(get_text.q,null,"Email details")),react.createElement(tabs.t,null,react.createElement(tabs.t.Tab,{key:"summary",id:"summary",label:gettext("Summary"),active:"summary"===currentTab,onClick:onTabClick},react.createElement(EmailDetailsSummary,{emailCampaign,isLoading:isCampaignLoading||isBouncedEmailsLoading,bouncedEmails})),react.createElement(tabs.t.Tab,{key:"content",id:"content",label:gettext("Content"),active:"content"===currentTab,onClick:onTabClick},react.createElement(email_details_content.g,{markup,isLoading:isCampaignLoading})),react.createElement(tabs.t.Tab,{key:"audience",id:"audience",label:gettext("Audience"),active:"audience"===currentTab,onClick:onTabClick},react.createElement(EmailDetailsAudience,{recipients}))))},EmailDetails=()=>react.createElement(EmailDetailsContainer,null)},20163:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Tf:()=>useTargetAudienceQuery});var react_query__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(75942),src_api__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(56433);const useTargetAudienceQuery=id=>(0,react_query__WEBPACK_IMPORTED_MODULE_0__.useQuery)(["email-target-audience",id],(()=>(id=>src_api__WEBPACK_IMPORTED_MODULE_1__.Y4.mailingRetrieveRecipients(id).then((response=>response.data)))(id||"")),{enabled:!!id})},37711:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{y:()=>WarningBox});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(96540),_emotion_styled__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(59295),_fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(66188),_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(46784),classnames__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(32485),src_design_system_components__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(66931);const Box=_emotion_styled__WEBPACK_IMPORTED_MODULE_1__.A.section`
78	display: flex;
79	flex-grow: 1;
80	align-items: baseline;
81	background: rgba(255, 169, 65, 0.07);
82	border-radius: 0px;
83	border: 1px solid #ffa941;
84	border-left-width: 4px;
85	padding: ${props=>props.theme.spacing.S} ${props=>props.theme.spacing.M};
86	color: #2b2b2b;
87`,WarningBox=({children,className})=>react__WEBPACK_IMPORTED_MODULE_0__.createElement(Box,{className:classnames__WEBPACK_IMPORTED_MODULE_3__(className)},react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__.g,{icon:_fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.zpE,color:"#ffa941"}),react__WEBPACK_IMPORTED_MODULE_0__.createElement(src_design_system_components__WEBPACK_IMPORTED_MODULE_4__.hK,{dir:"x",size:"s"}),react__WEBPACK_IMPORTED_MODULE_0__.createElement("section",null,children))},74707:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{g:()=>EmailDetailsContent});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(96540),_emotion_styled__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(59295),src_app_modules_app_shared_layout_components_with_loader__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(55520);const EmailWrapper=_emotion_styled__WEBPACK_IMPORTED_MODULE_1__.A.div`
88	background-color: rgb(247, 247, 247);
89	border: 1px solid rgb(217, 217, 222);
90	height: 100%;
91`,StyledIframe=_emotion_styled__WEBPACK_IMPORTED_MODULE_1__.A.iframe`
92	border: 1px solid rgb(217, 217, 222);
93	border-radius: 4px;
94	min-width: 640px;
95	margin: ${s=>s.theme.spacing.XXL} auto;
96	display: block;
97	height: 1264px; // according to the designs as average newsletter height
98`,EmailDetailsContent=({markup,isLoading=!1})=>{const srcDataString=react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>markup?`data:text/html;charset=utf-8,${encodeURIComponent(markup)}`:""),[markup]);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("section",null,react__WEBPACK_IMPORTED_MODULE_0__.createElement(src_app_modules_app_shared_layout_components_with_loader__WEBPACK_IMPORTED_MODULE_2__.O,{isLoading},react__WEBPACK_IMPORTED_MODULE_0__.createElement(EmailWrapper,null,markup&&react__WEBPACK_IMPORTED_MODULE_0__.createElement(StyledIframe,{title:"Email newsletter markup","data-testid":"markup-frame",id:"markup-frame",sandbox:"",src:srcDataString}))))}},87147:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>EMAIL_NEWSLETTER_KEYS,a:()=>useFetchEmailCampaign});var react_query__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(75942),src_api__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(56433);const EMAIL_NEWSLETTER_KEYS=["email-newsletter","campaign"],useFetchEmailCampaign=(campaignId="")=>(0,react_query__WEBPACK_IMPORTED_MODULE_0__.useQuery)([...EMAIL_NEWSLETTER_KEYS,campaignId],(()=>(campaignId=>src_api__WEBPACK_IMPORTED_MODULE_1__.Y4.retrieveMailingCampaign(campaignId).then((response=>response.data)))(campaignId)),{staleTime:0})},96187:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{_:()=>EmailOverviewTable});var react=__webpack_require__(96540),components=__webpack_require__(66931),get_text=__webpack_require__(59247),use_get_text=__webpack_require__(87914);

98const EmailOverviewTable=({emailSubject,fromName,fromEmail,showContentRow=!1,recipientsCount,goToChangeRecipients,goToChangeInfo,goToChangeContent})=>{const{gettext}=(0,use_get_text.z)(),showActions=Boolean(goToChangeRecipients&&goToChangeInfo);return react.createElement("table",{className:"email-overview-table"},react.createElement("tbody",null,react.createElement("tr",null,react.createElement("td",null,react.createElement(get_text.q,null,"Subject")),react.createElement("td",null,react.createElement(components.H5,null,gettext(emailSubject))),react.createElement("td",{className:"email-overview-table--align-right"},showActions&&react.createElement(components.$n,{text:gettext("Change email info"),type:"button",style:"link",onClick:goToChangeInfo}))),react.createElement("tr",null,react.createElement("td",null,react.createElement(get_text.q,null,"From")),react.createElement("td",null,react.createElement(components.H5,null,react.createElement(get_text.q,null,function(fromName,fromEmail){return`${fromName} ${fromEmail?`(${fromEmail})`:""}`.trim()}(fromName,fromEmail)))),react.createElement("td",null))),react.createElement("tbody",null,react.createElement("tr",null,react.createElement("td",{colSpan:3},react.createElement(components.cG,{type:"default"}))),react.createElement("tr",null,react.createElement("td",null,react.createElement(get_text.q,null,"Recipients")),react.createElement("td",null,react.createElement(components.H5,null,recipientsCount," ",gettext("entries"))),react.createElement("td",{className:"email-overview-table--align-right"},showActions&&react.createElement(components.$n,{text:gettext("Change audience"),type:"button",style:"link",onClick:goToChangeRecipients})))),showContentRow&&react.createElement(react.Fragment,null,react.createElement("tbody",null,react.createElement("tr",null,react.createElement("td",{colSpan:3},react.createElement(components.cG,{type:"default"}))),react.createElement("tr",null,react.createElement("td",null,react.createElement(get_text.q,null,"Email content")),react.createElement("td",null),react.createElement("td",{className:"email-overview-table--align-right"},showActions&&react.createElement(components.$n,{text:gettext("Change content"),type:"button",style:"link",onClick:goToChangeContent}))))))}},97109:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{R:()=>useEmailHtmlTemplateQuery});var react_query__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(75942);const useEmailHtmlTemplateQuery=mailingCampaignId=>(0,react_query__WEBPACK_IMPORTED_MODULE_0__.useQuery)(["email-html-template",mailingCampaignId],(()=>(async mailingCampaignId=>{if(!mailingCampaignId)return"";const headers=new Headers,{protocol,host}=window.location;headers.append("X-Requested-With","XMLHttpRequest");const response=await fetch(`${protocol}//${host}/api/mailing/campaign/${mailingCampaignId}/html`,{headers});return await response.text()})(mailingCampaignId)))}}]);