diff --git a/package-lock.json b/package-lock.json index 14405d8..6c18e21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2383,6 +2383,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", @@ -4018,7 +4023,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4039,12 +4045,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4059,17 +4067,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4186,7 +4197,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4198,6 +4210,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4212,6 +4225,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4219,12 +4233,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -4243,6 +4259,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4323,7 +4340,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4335,6 +4353,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4420,7 +4439,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4456,6 +4476,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4475,6 +4496,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4518,12 +4540,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -9663,14 +9687,13 @@ "dev": true }, "react": { - "version": "16.6.3", - "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz", - "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==", + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.11.2" + "prop-types": "^15.6.2" }, "dependencies": { "prop-types": { @@ -9691,14 +9714,14 @@ "integrity": "sha1-ZiDOMbwWsDb5KZXj+g+uP/MaBPs=" }, "react-dom": { - "version": "16.6.3", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz", - "integrity": "sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==", + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.11.2" + "scheduler": "^0.19.1" }, "dependencies": { "prop-types": { @@ -9719,9 +9742,9 @@ "integrity": "sha512-O8OqVca/i3pZWlBT5bnNJ55SYhTOsdwlXu0ZUi514ZrzbQKhUpz0ux1sh++1caEd2rtGP2OXCTwjj/0DfNi1+w==" }, "react-is": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", - "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-router": { "version": "4.3.1", @@ -10787,9 +10810,9 @@ "dev": true }, "scheduler": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.3.tgz", - "integrity": "sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==", + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/package.json b/package.json index 25736ed..a8cb10a 100644 --- 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 index 30e6140..8116312 100644 --- a/src/index.html +++ b/src/index.html @@ -3,6 +3,13 @@ + + + Westworld Intro Creator @@ -33,6 +40,10 @@ + + + diff --git a/src/js/DonationOptions.js b/src/js/DonationOptions.js new file mode 100644 index 0000000..eecb731 --- /dev/null +++ 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 ( +
+ + +
+ ); +} + +DonationOptions.propTypes = { + updatePaymentAmount: PropTypes.func.isRequired, +}; diff --git a/src/js/pages/DonateDownloadPage.js b/src/js/pages/DonateDownloadPage.js index 96f93da..a2ce2f5 100644 --- a/src/js/pages/DonateDownloadPage.js +++ b/src/js/pages/DonateDownloadPage.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef, useCallback, useEffect } from 'react'; import PropTypes from 'prop-types'; import Loader from '../download/Loader'; @@ -7,29 +7,62 @@ import DownloadPageContainer from '../download/DownloadPageContainer'; import ContactButton from '../common/ContactButton'; import TermsOfServiceAcceptance from '../common/TermsOfServiceAcceptance'; import EmailRequestField from '../download/EmailRequestField'; +import DonationOptions from '../DonationOptions'; const DonateDownloadPage = ({ match }) => { const { params } = match; const { openingKey } = params; + const iframeRef = useRef(null); + + const updatePaymentAmount = useCallback((amount) => { + if (!iframeRef.current) { + return; + } + + iframeRef.current.contentWindow.postMessage({ action: 'setAmount', payload: amount }, '*'); + }, []); + + useEffect(() => { + const handleTrackPaymentsEventCallback = (event) => { + if (!event.origin.match(/https:\/\/payment\.kassellabs\.io$/)) { + return; + } + + const { data } = event; + const isPaymentSuccess = data && 'success' === data.action && 'payment' === data.type; + if (isPaymentSuccess && window.dataLayer) { + window.dataLayer.push({ + event: 'purchase', + value: data.payload.finalAmount, + currency: data.payload.currency, + }); + } + }; + + window.addEventListener('message', handleTrackPaymentsEventCallback); + return () => { + window.removeEventListener('message', handleTrackPaymentsEventCallback); + }; + }, []); return (

Great choice! You can donate the amount for the following options: -

+