https://haddonfieldhorror.com/wp-content/mu-plugins/wpcomsh/fronte…/js/gifting-banner.js?ver=10.0.0-alpha

1// NOTICE! This file exists in WPCOM & WPCOMSH. Updates need to be synced to both repos.
2
3/* eslint-disable no-multi-str */
4/* global gifting_banner */
5( function () {
6	document.addEventListener( 'DOMContentLoaded', function () {
7		const hostnames = [ 'wordpress.com', 'w.link', 'automattic.com' ];
8		// Make sure we never show the banner on these hostnames.
9		if ( hostnames.includes( window.location.hostname ) ) {
10			return;
11		}
12
13		const bumpStat = function ( statName ) {
14			new Image().src =
15				document.location.protocol +
16				'//pixel.wp.com/b.gif' +
17				'?v=wpcom-no-pv' +
18				'&x_simple_gifting_banner=' +
19				statName +
20				'&rand=' +
21				Math.random();
22		};
23
24		if ( ! document.cookie.includes( 'wpcom_gifting_banner_gifter=true' ) ) {
25			giftingBanner();
26			bumpStat( 'viewed_total' );
27
28			document.getElementById( 'wpcom-gifting-banner-button' ).onclick = function () {
29				bumpStat( 'clicked' );
30				window.location.href = gifting_banner.checkout_link;
31			};
32			document.getElementById( 'wpcom-gifting-banner-more-info-button' ).onclick = function () {
33				bumpStat( 'moreinfo' );
34				window.open( gifting_banner.more_info_link, '_blank' );
35			};
36		}
37	} );
38
39	/**
40	 * Prepend the gifting banner to the document body.
41	 */
42	function giftingBanner() {
43		// Check for hash in URL to see if we should dismiss the banner
44		const hash = location.hash;
45		if ( '#gift-thank-you' === hash ) {
46			const expiration = new Date();
47			expiration.setTime(
48				expiration.getTime() + 1000 * 60 * 60 * 24 * gifting_banner.dismiss_days_count
49			);
50			const expires = 'expires=' + expiration.toUTCString();
51			document.cookie = 'wpcom_gifting_banner_gifter=true;' + expires + ';path=/';
52			location.hash = '';
53			return;
54		}
55		const notice = document.createElement( 'div' );
56		notice.setAttribute( 'id', 'wpcom-gifting-banner' );
57		notice.classList.add( 'wpcom-gifting-banner' );
58		document.documentElement.classList.add( 'has-wpcom-gifting-banner' );
59		notice.innerHTML =
60			'<div class="wpcom-gifting-banner__inner">' +
61			'<svg class="wpcom-gifting-banner__logo" xmlns="http://www.w3.org/2000/svg">\
62				<path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 \
63					c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341\
64					C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109\
65					c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009\
66					c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114\
67					C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838\
68					C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114\
69					c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996\
70					C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22\
71					l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12\
72					C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z" transform="scale(1.2)"/>\
73			</svg>' +
74			'<div class="wpcom-gifting-banner__wrapper">' +
75			'<span class="wpcom-gifting-banner__title"></span>' +
76			'<img class="wpcom-gifting-banner__img" alt="🎁" src="https://s.w.org/images/core/emoji/14.0.0/svg/1f381.svg"/>' +
77			'<span class="wpcom-gifting-banner__subtitle"></span>' +
78			'</div>' +
79			'<button id="wpcom-gifting-banner-button" class="wpcom-gifting-banner__button"></button>' +
80			'</div>';
81
82		const title = document.createTextNode( gifting_banner.i18n.title );
83		const subtitle = document.createTextNode( gifting_banner.i18n.subtitle );
84		const more_info_button = document.createElement( 'BUTTON' );
85		more_info_button.setAttribute( 'id', 'wpcom-gifting-banner-more-info-button' );
86		more_info_button.setAttribute( 'class', 'wpcom-gifting-banner__more-info-button' );
87		const button_text = document.createTextNode( gifting_banner.i18n.button_text );
88
89		notice.getElementsByClassName( 'wpcom-gifting-banner__title' )[ 0 ].appendChild( title );
90		notice.getElementsByClassName( 'wpcom-gifting-banner__subtitle' )[ 0 ].appendChild( subtitle );
91		notice
92			.getElementsByClassName( 'wpcom-gifting-banner__subtitle' )[ 0 ]
93			.appendChild( more_info_button );
94		notice.getElementsByClassName( 'wpcom-gifting-banner__button' )[ 0 ].appendChild( button_text );
95
96		document.body.prepend( notice );
97	}
98} )();