From dbad7d74007c85d6bb9db60bd80419bced4ce873 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Fri, 15 Mar 2024 18:16:55 +0530 Subject: [PATCH] get checkout ready --- package-lock.json | 15 +++++++++++++++ package.json | 1 + src/components/Pro.jsx | 37 +++++++++++++++++++++++++++++++++---- src/components/Switch.jsx | 2 -- src/style.css | 32 +++++++++++++++++++++++++------- src/utils.js | 34 +++++++++++++++++++++++++++++++++- 6 files changed, 107 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 37b8f38..8021944 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@emmetio/codemirror-plugin": "^0.5.4", "@lingui/react": "^2.8.3", + "canvas-confetti": "^1.9.2", "code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker", "codemirror": "^5.37.0", "copy-webpack-plugin": "^4.5.1", @@ -7095,6 +7096,15 @@ } ] }, + "node_modules/canvas-confetti": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.2.tgz", + "integrity": "sha512-6Xi7aHHzKwxZsem4mCKoqP6YwUG3HamaHHAlz1hTNQPCqXhARFpSXnkC9TWlahHY5CG6hSL5XexNjxK8irVErg==", + "funding": { + "type": "donate", + "url": "https://www.paypal.me/kirilvatev" + } + }, "node_modules/capture-exit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz", @@ -34038,6 +34048,11 @@ "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==", "dev": true }, + "canvas-confetti": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.2.tgz", + "integrity": "sha512-6Xi7aHHzKwxZsem4mCKoqP6YwUG3HamaHHAlz1hTNQPCqXhARFpSXnkC9TWlahHY5CG6hSL5XexNjxK8irVErg==" + }, "capture-exit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz", diff --git a/package.json b/package.json index 4b3b08e..6178dae 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "dependencies": { "@emmetio/codemirror-plugin": "^0.5.4", "@lingui/react": "^2.8.3", + "canvas-confetti": "^1.9.2", "code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker", "codemirror": "^5.37.0", "copy-webpack-plugin": "^4.5.1", diff --git a/src/components/Pro.jsx b/src/components/Pro.jsx index 70ef98b..f851525 100644 --- a/src/components/Pro.jsx +++ b/src/components/Pro.jsx @@ -7,9 +7,15 @@ import { A, Button } from './common'; import { useCheckout } from '../hooks/useCheckout'; import { Text } from './Text'; import { Icon } from './Icons'; +import { showConfetti } from '../utils'; +const checkoutIds = { + monthly: '1601bc00-9623-435b-b1de-2a70a2445c13', + annual: 'aae95d78-05c8-46f5-b11e-2d40ddd211d3' +}; export function Pro({ user }) { const hasCheckoutLoaded = useCheckout(); + const [isAnnual, setIsAnnual] = useState(true); useEffect(() => { if (hasCheckoutLoaded) { @@ -17,7 +23,13 @@ export function Pro({ user }) { eventHandler: e => { console.log('eventHandler', e); if (e.event === 'Checkout.Success') { - window.location.reload(); + showConfetti(2); + alertsService.add( + 'You are now PRO! 🎉. Reloading your superpowers...' + ); + setTimeout(() => { + window.location.reload(); + }, 2000); } } }); @@ -25,7 +37,17 @@ export function Pro({ user }) { } }, [hasCheckoutLoaded]); return ( - + + + { + setIsAnnual(e.target.checked); + }} + /> + Go @@ -59,6 +83,11 @@ export function Pro({ user }) { ]} /> + + + Prices are excluding taxes. 30 days refund policy if not satisfied. + + ); } diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx index 475d097..95f2fce 100644 --- a/src/components/Switch.jsx +++ b/src/components/Switch.jsx @@ -1,5 +1,3 @@ -import { h } from 'preact'; - export default function Switch({ checked, onChange, diff --git a/src/style.css b/src/style.css index f74bcd1..92896a5 100644 --- a/src/style.css +++ b/src/style.css @@ -6,7 +6,7 @@ --color-overlay: rgba(3, 8, 27, 0.7); --color-close-btn: #d12b4a; --code-font-size: 16px; - --color-button: #d3a447; + --color-button: #e3ba26; --color-focus-outline: #d3a447; --color-form-control-bg: #2c214b; @@ -412,6 +412,7 @@ a > svg { } .btn--primary { + --black-mix: 70%; background: linear-gradient( 180deg, var(--color-button), @@ -419,7 +420,8 @@ a > svg { ); color: black; font-weight: 600; - border: 1px solid color-mix(in lch, var(--color-button), black 70%); + border: 1px solid + color-mix(in lch, var(--color-button), black var(--black-mix)); box-shadow: inset 0 1px 0px 0 rgba(255, 255, 255, 0.15); } @@ -434,8 +436,11 @@ a > svg { } .btn:hover { + --black-mix: 90%; text-decoration: none; - box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); + box-shadow: + rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, + rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; } *:focus { @@ -795,6 +800,8 @@ body > #demo-frame { .btn--dark, .main-header__btn-wrap > button { + --clr-1: hsl(0, 0%, 25%); + --clr-2: hsl(0, 0%, 13%); box-sizing: content-box; /* text-transform: uppercase; */ /* font-size: 0.875rem; */ @@ -809,7 +816,7 @@ body > #demo-frame { padding: 3px 8px; border: 1px solid rgba(0, 0, 0, 0.9); border-radius: 5px; - background: linear-gradient(180deg, hsl(0, 0%, 25%) 0, hsl(0, 0%, 13%) 100%); + background: linear-gradient(180deg, var(--clr-1) 0, var(--clr-2) 100%); box-shadow: inset 0 1px 0px 0 rgba(255, 255, 255, 0.15); } @@ -827,12 +834,12 @@ body > #demo-frame { } .btn--dark:hover { - background: #9297b3; - color: #111; + --clr-1: #6844ad; + /* color: #111; */ /* border-color: rgba(146, 151, 179, 0.5); */ } .btn--dark:hover > svg { - fill: #111; + /* fill: #111; */ } .btn--dark.btn--active { background: linear-gradient(0deg, hsl(0, 0%, 25%) 0, hsl(0, 0%, 13%) 100%); @@ -2202,8 +2209,19 @@ while the theme CSS file is loading */ background-position: bottom right; } .plan-card { + background: rgb(255 255 255 / 10%); border-radius: 0.4rem; padding: 1rem; + --shadow-color: 253deg 47% 15%; + --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), + 0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), + 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34); + --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), + 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), + 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36), + 5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36); + + box-shadow: var(--shadow-elevation-low); } @media screen and (max-width: 600px) { body { diff --git a/src/utils.js b/src/utils.js index e346d22..7b18399 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,9 +1,9 @@ import { trackEvent } from './analytics'; - import { computeHtml, computeCss, computeJs } from './computes'; import { modes, HtmlModes, CssModes, JsModes } from './codeModes'; import { deferred } from './deferred'; import { getExtensionFromFileName } from './fileUtils'; +import confetti from 'canvas-confetti'; const esprima = require('esprima'); window.DEBUG = document.cookie.indexOf('wmdebug') > -1; @@ -594,3 +594,35 @@ export async function copyToClipboard(text) { console.error('Failed to copy text: ', err); } } + +export function showConfetti(time = 4) { + var end = Date.now() + time * 1000; + + (function frame() { + confetti({ + particleCount: 1, + startVelocity: 0, + ticks: 100, + origin: { + x: Math.random(), + // since they fall down, start a bit higher than random + y: Math.random() - 0.2 + }, + colors: [ + [ + '#26ccff', + '#a25afd', + '#ff5e7e', + '#88ff5a', + '#fcff42', + '#ffa62d', + '#ff36ff' + ][~~(Math.random() * 7)] + ] + }); + + if (Date.now() < end) { + requestAnimationFrame(frame); + } + })(); +}