Merge pull request #66 from KasselLabs/add-donation-options-and-gtm

Add donation options buttons
KasselLabs · Dec 16, 2021 · 8ef5931 · 8ef5931 · vercel · Dec 16, 2021
2 parents 8a3988f + 423e5db
commit 8ef5931
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,14 +42,15 @@
     "babel-preset-react": "^6.24.1",
     "bowser": "^2.5.3",
     "clappr": "^0.3.6",
+    "classnames": "^2.3.1",
     "fscreen": "^1.0.2",
     "fullscreen-polyfill": "^1.0.2",
     "humanize-duration": "^3.18.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "react": "^16.6.3",
+    "react": "^16.14.0",
     "react-context-connector": "^0.1.2",
-    "react-dom": "^16.6.3",
+    "react-dom": "^16.14.0",
     "react-fullscreen-crossbrowser": "^1.0.9",
     "react-router-dom": "^4.3.1",
     "react-youtube": "^7.5.0",

diff --git a/src/index.html b/src/index.html
@@ -3,6 +3,13 @@
 <head>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116931857-4"></script>
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-NSM93M2');</script>
+  <!-- End Google Tag Manager -->
 
   <title>Westworld Intro Creator</title>
   <meta charset="utf-8"/>
@@ -33,6 +40,10 @@
   <link rel="stylesheet" href="https://necolas.github.io/normalize.css/latest/normalize.css">
 </head>
 <body class="default-background">
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NSM93M2"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
   <!-- Keep preview for OG meta tags -->
   <a style="display: none;" href="./assets/img/preview2.jpg"></a>
 

diff --git a/src/js/DonationOptions.js b/src/js/DonationOptions.js
@@ -0,0 +1,61 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const DONATION_AMOUNTS = {
+  watermark: 10,
+  'no-watermark': 20,
+};
+
+export default function DonationOptions({ updatePaymentAmount }) {
+  const [selectedOption, setSelectedOption] = useState('no-watermark');
+
+  const selectOption = useCallback((option) => {
+    setSelectedOption(option);
+    updatePaymentAmount(DONATION_AMOUNTS[option]);
+  });
+
+  return (
+    <div className="donation-options">
+      <button
+        type="button"
+        className={classnames('option', {
+          '-selected': 'watermark' === selectedOption,
+        })}
+        onClick={() => selectOption('watermark')}
+      >
+        <span className="title">STANDARD</span>
+        <span className="description">Full HD Quality</span>
+        <span className="description">MP4 Video</span>
+        <span className="description">Video will be like in the preview</span>
+        <span className="description">
+          Donate at least
+          {' '}
+          <b>$10</b>
+        </span>
+      </button>
+      <button
+        type="button"
+        className={classnames('option', {
+          '-selected': 'no-watermark' === selectedOption,
+        })}
+        onClick={() => selectOption('no-watermark')}
+      >
+        <span className="title">NO WATERMARK</span>
+        <span className="description">Full HD Quality</span>
+        <span className="description">MP4 Video</span>
+        <span className="description">Video will be like in the preview</span>
+        <span className="description">but without the watermark</span>
+        <span className="description">
+          Donate at least
+          {' '}
+          <b>$20</b>
+        </span>
+      </button>
+    </div>
+  );
+}
+
+DonationOptions.propTypes = {
+  updatePaymentAmount: PropTypes.func.isRequired,
+};