@times-components/save-and-share-bar/rnw.js

Save and Share bar

module.exports=function(e){var t={};function n(a){if(t[a])return t[a].exports;var r=t[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(a,r,function(t){return e[t]}.bind(null,r));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=11)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/user-state/rnw")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/ts-components/rnw")},function(e,t){e.exports=require("@times-components/context/rnw")},function(e,t){e.exports=require("@times-components/provider-queries/rnw")},function(e,t){e.exports=require("@times-components/tracking/rnw")},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(3),i=n.n(o),l=n(4),c=n(2),s=n(5),d=n.n(s),h=n(8),p=n(7),u=n(9);const m=Object(l.makeClient)();var f=e=>m.query({query:u.getTokenisedArticleUrl,variables:{id:e}}),g=n(10),v="https://www.facebook.com/sharer/sharer.php",b="https://twitter.com/intent/tweet",y="https://wa.me";const w="Shared with you by a Times subscriber.%0A%0AEnjoy this article for free.%0A%0A";var x=n(6);var E={svgIcon:{fb:{height:18},star:{height:18},fillColour:x.colours.functional.secondary,height:16,hoverFillColour:x.colours.functional.brandColour,save:{fillColour:x.colours.functional.white,strokeColour:x.colours.functional.secondary}}},k=n(1),S=n.n(k);const C=S.a.div.withConfig({displayName:"styled__SaveAndShareBarContainer",componentId:"qkwc0r-0"})(["display:flex;align-items:center;justify-content:start;gap:10px;height:100%;padding-block:10px;"]),I=S.a.div.withConfig({displayName:"styled__ShareButtonContainer",componentId:"qkwc0r-1"})(["display:flex;position:relative;"]),A=Object(k.keyframes)(["0%{box-shadow:0;}50%{box-shadow:0 0 3px 4px #4B9FC950;}100%{box-shadow:0;}"]),O=S.a.div.withConfig({displayName:"styled__ShareButtonHighlightContainer",componentId:"qkwc0r-2"})(["display:flex;background-color:#ffffff;width:15px;height:15px;border-radius:50%;z-index:1;position:absolute;top:-5px;right:-5px;"]),_=S.a.div.withConfig({displayName:"styled__ShareButtonHighlight",componentId:"qkwc0r-3"})(["background-color:#4b9fc9;width:12px;height:12px;border-radius:50%;position:absolute;right:-1px;top:-1px;z-index:2;animation:"," 2400ms infinite;"],A),N=S.a.button.withConfig({displayName:"styled__OutlineButton",componentId:"qkwc0r-4"})(["position:relative;height:32px;min-width:84px;padding:8px 12px 8px 12px;background-color:",";color:#333333;font-size:14px;font-family:Roboto,sans-serif;font-weight:500;cursor:pointer;outline:none;border:0.5px solid #000;display:flex;justify-content:center;align-items:center;gap:8px;transition:background-color 0.2s;",";&:hover{background-color:#eeeeee;}&:focus-visible{outline:2px solid #00527a;outline-offset:2px;background-color:#eeeeee;}&:active{background-color:#eeeeee;}"],e=>e.isPopoverOpen?"#EEEEEE":"#fff",e=>e.isLoading&&"\n      border: none;\n      background-color: #eeeeee;\n      cursor: default;\n    "),T=S.a.div.withConfig({displayName:"styled__Popover",componentId:"qkwc0r-5"})(["position:absolute;",";left:0;right:12px;transform:",";display:",';flex-direction:column;background-color:#fff;box-shadow:0px -20px 32px 0px #11111114,0px 4px 4px 0px #00000040;z-index:99;width:calc(100vw - 24px);max-width:min-content;&::after{content:"";position:absolute;',";left:36px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;}"],e=>"top"===e.position?"top: 0":"bottom: 0",e=>"top"===e.position?"translateY(calc((100% + 10px) * -1))":"translateY(calc((100% + 10px)))",e=>e.isOpen?"flex":"none",e=>"top"===e.position?"\n      bottom: -16px;\n      transform: rotate(180deg);\n    ":"\n    top: -16px;\n    "),L=S.a.div.withConfig({displayName:"styled__PopoverHeader",componentId:"qkwc0r-6"})(["display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e4e4e4;h3{font-family:Roboto;font-size:18px;font-weight:500;margin:0;padding:24px;}button{margin:8px;}"]),j=S.a.div.withConfig({displayName:"styled__PopoverContent",componentId:"qkwc0r-7"})(["display:flex;justify-content:flex-start;align-items:center;gap:24px;padding:24px;@media (max-width:449px){flex-direction:column;align-items:flex-start;}"]),M=S.a.button.withConfig({displayName:"styled__CloseButton",componentId:"qkwc0r-8"})(["height:48px;width:48px;border-radius:50%;padding:16px;background-color:transparent;border:none;outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s;&:focus-visible{background-color:#eeeeee;border:1px solid #000;}&:hover{background-color:#eeeeee;}"]),B=S.a.div.withConfig({displayName:"styled__IconActivityIndicatorContainer",componentId:"qkwc0r-9"})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);div{height:16px;width:16px;border-right-color:#333333;border-width:0.125em;}"]),P=S.a.div.withConfig({displayName:"styled__EmailSpinnerContainer",componentId:"qkwc0r-10"})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);var q=()=>r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:12,height:12,viewBox:"0 0 14 14",fill:"none"},r.a.createElement("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#333333"}));function H(){return(H=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function F(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}const z=S.a.div.withConfig({displayName:"share-item__ShareItemLabelContainer",componentId:"sc-1idd4zx-0"})(["display:flex;align-items:center;gap:8px;"]),R=S.a.span.withConfig({displayName:"share-item__ShareItemLabelText",componentId:"sc-1idd4zx-1"})(["font-family:Roboto;font-size:16px;font-weight:500;"]),U=S.a.a.withConfig({displayName:"share-item__StyledLink",componentId:"sc-1idd4zx-2"})(["color:#005c8a;text-decoration:none;cursor:pointer;&:hover{color:#00527a;}"]),W=S.a.div.withConfig({displayName:"share-item__IconContainer",componentId:"sc-1idd4zx-3"})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;"]),D=e=>{let t=e.children,n=e.testId,a=e.tooltipContent,o=e.href,i=e.onClick,l=void 0===i?()=>{}:i,c=F(e,["children","testId","tooltipContent","href","onClick"]);return r.a.createElement(U,H({"data-testid":n,onClick:l,href:o,target:"_blank",title:a},c),t)},V=e=>{let t=e.children,n=e.icon;return r.a.createElement(z,null,r.a.createElement(W,null,n),r.a.createElement(R,null,t))};D.defaultProps={testId:"share-item",href:"",onClick:()=>{},tooltipContent:""};class Y extends a.Component{constructor(e){super(e),this.state={isLoading:!1},this.onShare=this.onShare.bind(this)}onShare(e){const t=this.props,n=t.articleId,a=t.getTokenisedShareUrl,r=t.shouldTokenise,o=t.articleUrl,i=t.onShareEmail,c=t.articleHeadline,s=t.hostName;if(e.preventDefault(),i({articleId:n,articleUrl:o,articleHeadline:c}),r)this.setState({isLoading:!0}),a(n).then(e=>{const t=e.data;t&&t.article&&(this.setState({isLoading:!1}),this.openMailClient(Object(l.getDomainSpecificUrl)(s,t.article.tokenisedUrl)))}).catch(()=>{this.setState({isLoading:!1})});else{const e=window.location.search.match(/[?&]shareToken=([^&]+)/);this.openMailClient(e?"".concat(o,"?shareToken=").concat(e[1]):o)}}openMailClient(e){const t=this.props,n=t.articleHeadline,a="TIMES"===t.publicationName,r=a?"The Times":"The Sunday Times",o=a?"".concat(w).concat(n,"%0A%0A").concat(e):"I thought you would be interested in this story from ".concat(r,"%0A%0A").concat(n,"%0A%0A").concat(e),i="mailto:?subject=".concat(n," from ").concat(r,"&body=").concat(o);window.location.assign(i)}render(){const e=this.state.isLoading;return r.a.createElement(D,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},r.a.createElement(V,{icon:e?r.a.createElement(P,null,r.a.createElement(c.IconActivityIndicator,{size:"small"})):r.a.createElement(c.IconEmail,{ariaLabel:"",fillColour:"currentColor",height:E.svgIcon.height,title:"Share by email"})},"Email"))}}Y.defaultProps={publicationName:"TIMES"};var Z=Y;const $=e=>{let t=e.height,n=e.width,a=e.visibility;return r.a.createElement("svg",{"data-id":"bookmark-icon-svg_outline",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",style:{visibility:a},fill:"currentColor",width:n,height:t},r.a.createElement("path",{d:"M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"}))};$.defaultProps={height:16,width:16,visibility:"visible"};var G=$;const J=e=>{let t=e.height,n=e.width,a=e.visibility;return r.a.createElement("svg",{"data-id":"bookmark-icon-svg_outline",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",style:{visibility:a},fill:"currentColor",width:n,height:t},r.a.createElement("path",{d:"M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"}))};J.defaultProps={height:16,width:16,visibility:"visible"};var K=J;var Q=r.a.memo(e=>{if(e.error||!e.loading&&!e.data)return null;const t=(e.data||{isBookmarked:!1}).isBookmarked,n={height:14,width:14,visibility:e.loading?"hidden":"visible"},a=t?"Saved":"Save";return r.a.createElement(r.a.Fragment,null,r.a.createElement(N,{isLoading:e.loading,onClick:()=>{t?e.onRemoveFromMyArticles():e.onSaveToMyArticles(),e.onToggleSave(e.articleId,e.data.isBookmarked)}},e.loading&&r.a.createElement(B,null,r.a.createElement(c.IconActivityIndicator,null)),t?r.a.createElement(K,{height:n.height,width:n.width,visibility:n.visibility}):r.a.createElement(G,{height:n.height,width:n.width,visibility:n.visibility}),e.loading?"":a))});const X=e=>{let t=e.height,n=e.width;return r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",fill:"currentColor",width:n,height:t},r.a.createElement("path",{d:"M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"}))};X.defaultProps={height:16,width:16};var ee=X;function te(){return(te=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function ne(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var a,r,o=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(a=n.next()).done)&&(o.push(a.value),!t||o.length!==t);i=!0);}catch(e){l=!0,r=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return ae(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return ae(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ae(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function re(e){const t=e.articleId,n=e.articleUrl,o=e.savingEnabled,i=e.sharingEnabled,s=e.onShareBarExpend,u=e.onShareBarClose,m=e.onShareOnFB,f=e.onShareOnTwitter,g=e.onSaveToMyArticles,x=e.onRemoveFromMyArticles,k=e.isPreviewMode,S=ne(r.a.useState(!1),2),A=S[0],B=S[1],P=ne(r.a.useState(null),2),H=P[0],F=P[1],z=ne(r.a.useState(null),2),R=z[0],U=z[1],W=ne(r.a.useState(!1),2),Y=W[0],$=W[1],G=ne(r.a.useState(!1),2),J=G[0],K=G[1],X=r.a.useRef(),ae=r.a.useRef(),re=r.a.useRef();Object(a.useEffect)(()=>{"undefined"!=typeof window&&(F(window.innerHeight),U(window.innerWidth))},[]),Object(a.useEffect)(()=>{if(re.current)return document.body.addEventListener("click",e),()=>{document.body.removeEventListener("click",e)};function e(e){re.current.contains(e.target)||e.target===ae.current||B(!1)}},[]),Object(a.useEffect)(()=>{if("undefined"!=typeof window){const e=Object(l.checkForSymphonyExperiment)(),t="true"===window.localStorage.getItem("hasShareButtonBeenClicked");K(e&&!t)}},[]),Object(a.useEffect)(()=>{if("undefined"!=typeof window&&window.navigator){$(/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|windows phone|Opera Mini/i.test(window.navigator.userAgent))}},[]);const oe=X.current?X.current.getBoundingClientRect().bottom:H;const ie=()=>{A?u():s(),B(e=>!e)};return r.a.createElement(C,{"data-testid":"save-and-share-bar",ref:X},i&&r.a.createElement(I,null,r.a.createElement(N,{ref:ae,isPopoverOpen:A,onClick:e=>{e.preventDefault(),window.localStorage.setItem("hasShareButtonBeenClicked","true"),K(!1),ie()}},r.a.createElement(ee,{height:14,width:14}),"Share"),J&&r.a.createElement(O,{"data-testId":"share-button-highlight"},r.a.createElement(_,null)),r.a.createElement(T,{ref:re,position:H?H-oe>(R&&R>449?250:400)?"bottom":"top":"bottom",isOpen:A,"aria-expanded":A},r.a.createElement(L,null,r.a.createElement("h3",null,"Share this article"),r.a.createElement(M,{onClick:ie},r.a.createElement(q,null))),r.a.createElement(j,null,r.a.createElement(h.SectionContext.Consumer,null,t=>{let a=t.publicationName;return r.a.createElement(r.a.Fragment,null,r.a.createElement(d.a,{state:d.a.showTokenisedEmailShare,fallback:r.a.createElement(Z,te({},e,{shouldTokenise:!1,publicationName:a}))},r.a.createElement(Z,te({},e,{shouldTokenise:!0,publicationName:a}))),r.a.createElement(D,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(b,"?text=").concat("TIMES"!==a?n:"".concat(w).concat(n)),onClick:f},r.a.createElement(V,{icon:r.a.createElement(c.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:E.svgIcon.height,title:"Share on Twitter"})},"Twitter")),r.a.createElement(D,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(v,"?u=").concat(n),onClick:m},r.a.createElement(V,{icon:r.a.createElement(c.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:E.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),"TIMES"===a&&Y&&r.a.createElement(D,{testId:"share-whatsApp",tooltipContent:"Share on WhatsApp",href:"".concat(y,"?text=").concat(w).concat(n),onClick:m},r.a.createElement(V,{icon:r.a.createElement(c.IconWhatsApp,{ariaLabel:"",fillColour:"currentColor",title:"Share on WhatsApp"})},"WhatsApp")))}),r.a.createElement(D,{testId:"copy-to-clickboard",tooltipContent:"Copy link to clipboard",href:"".concat(v,"?u=").concat(n),onClick:function(t){const a=e.onCopyLink;t.preventDefault(),navigator.clipboard.writeText(n),a()}},r.a.createElement(V,{icon:r.a.createElement(c.IconCopyLink,{ariaLabel:"",fillColour:"currentColor",height:E.svgIcon.height,title:"Copy link to clipboard"})},"Link"))))),o?r.a.createElement(r.a.Fragment,null,r.a.createElement(d.a,{state:d.a.showArticleSaveButton,serverRender:!1},r.a.createElement("div",{"data-testid":"save-star"},r.a.createElement(p.SaveStar,{articleId:t},r.a.createElement(Q,{onSaveToMyArticles:g,onRemoveFromMyArticles:x})))),k&&r.a.createElement("div",{"data-testid":"save-star-preview"},r.a.createElement(p.SaveStar,{isPreviewMode:!0},r.a.createElement(Q,null)))):null)}re.defaultProps={onShareBarExpend:()=>{},onShareBarClose:()=>{},onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},onSaveToMyArticles:()=>{},onRemoveFromMyArticles:()=>{},getTokenisedShareUrl:f,isPreviewMode:i.a.bool=!1};var oe;t.default=(oe=re,Object(g.withTrackEvents)(oe,{analyticsEvents:[{actionName:"navigation",eventName:"onSaveToMyArticles",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_navigation_name:"add to my articles"}),trackingName:"ArticleSaveToMyArticles"},{actionName:"navigation",eventName:"onRemoveFromMyArticles",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_navigation_name:"remove from my articles"}),trackingName:"ArticleRemoveFromMyArticles"},{actionName:"Pressed",eventName:"onShareEmail",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareUrlByEmail"},{actionName:"Pressed",eventName:"onCopyLink",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleCopyLink"},{actionName:"Pressed",eventName:"onShareOnFB",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareOnFacebook"},{actionName:"Pressed",eventName:"onShareOnTwitter",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareOnTwitter"},{actionName:"Pressed",eventName:"onShareBarExpend",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_social_action:"share start"}),trackingName:"ArticleShareOnExpend"},{actionName:"Pressed",eventName:"onShareBarClose",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_social_action:"share start"}),trackingName:"ArticleShareOnClose"}]}))}]);