Removing Stripe and PWYW references in favour of DownloadModal (#457)

* Attempted removing stripe and PayWhatYouWant mentions renaming to DownloadModal

* Ran pnpm install to clean up pnpm-lock.yaml

* Removed unused const

components/PayWhatYouWant.js → components/DownloadModal.js

@@ -2,10 +2,10 @@ import { track } from "@vercel/analytics";
 import { Download, ExternalLink } from "lucide-react";
 import { useEffect, useState } from "react";
 
-import styles from "./PayWhatYouWant.module.css";
+import styles from "./DownloadModal.module.css";
 import SubscribeInline from "./SubscribeInline";
 
-const PayWhatYouWant = ({ sketchplanationUid, sketchplanationTitle }) => {
+const DownloadModal = ({ sketchplanationUid, sketchplanationTitle }) => {
 	const [subscribeInlineDoc, setSubscribeInlineDoc] = useState(null);
 
 	useEffect(() => {
@@ -86,4 +86,4 @@ const PayWhatYouWant = ({ sketchplanationUid, sketchplanationTitle }) => {
 	);
 };
 
-export default PayWhatYouWant;
+export default DownloadModal;

components/DownloadModal.module.css

@@ -0,0 +1,23 @@
+.header {
+  @apply m-0 mb-3 text-lg;
+}
+
+.main p + p {
+  @apply mt-2;
+}
+
+.main a {
+  @apply text-blue;
+}
+
+.main button a {
+  @apply text-white;
+}
+
+.form {
+  @apply -m-2 mt-3;
+}
+
+.form :global(> *) {
+  @apply p-2;
+}

package.json

@@ -17,8 +17,6 @@
 		"@prismicio/react": "^2.8.0",
 		"@sentry/react": "^7.119.0",
 		"@sentry/tracing": "^7.114.0",
-		"@stripe/react-stripe-js": "^2.8.0",
-		"@stripe/stripe-js": "^1.52.0",
 		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
 		"@vercel/analytics": "^1.3.1",
 		"@vercel/kv": "^1.0.1",

pages/[uid].js

@@ -3,6 +3,7 @@ import * as prismicH from "@prismicio/helpers";
 import { PrismicNextImage } from "@prismicio/next";
 import classNames from "classnames";
 import Cards from "components/Cards";
+import DownloadModal from "components/DownloadModal";
 import FancyLink from "components/FancyLink";
 import KeyboardShortcut from "components/KeyboardShortcut";
 import RichText from "components/RichText";
@@ -23,7 +24,6 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { client } from "services/prismic";
 
 const TextHeader = dynamic(() => import("components/TextHeader"));
-const PayWhatYouWant = dynamic(() => import("components/PayWhatYouWant"));
 const Modal = dynamic(() => import("components/Modal"));
 
 import InlinePage from "components/InlinePage";
@@ -94,7 +94,7 @@ const SketchplanationPage = ({
 		uid,
 	} = sketchplanation;
 
-	const [pwywModalOpen, setPwywModalOpen] = useState(false);
+	const [downloadModalOpen, setDownloadModalOpen] = useState(false);
 	const [licenceModalOpen, setLicenceModalOpen] = useState(false);
 	// const [randomTitle, setRandomTitle] = useState("");
 	const randomHandle = useRandomHandle([uid]);
@@ -104,7 +104,7 @@ const SketchplanationPage = ({
 	const commonProps = {
 		title,
 		podcastLinkUrl,
-		onDownload: () => setPwywModalOpen(true),
+		onDownload: () => setDownloadModalOpen(true),
 		redbubbleLinkUrl,
 		onViewLicence: () => setLicenceModalOpen(true),
 	};
@@ -196,8 +196,8 @@ const SketchplanationPage = ({
 				]}
 			/>
 
-			<Modal isOpen={pwywModalOpen} onClose={() => setPwywModalOpen(false)}>
-				<PayWhatYouWant
+			<Modal isOpen={downloadModalOpen} onClose={() => setDownloadModalOpen(false)}>
+				<DownloadModal
 					sketchplanationUid={sketchplanation.uid}
 					sketchplanationTitle={title}
 				/>
@@ -237,7 +237,7 @@ const SketchplanationPage = ({
 								image={image}
 								title={title}
 								priority={true}
-								onDownload={() => setPwywModalOpen(true)}
+								onDownload={() => setDownloadModalOpen(true)}
 							>
 								<SketchplanationCtas {...commonProps} variant="lightbox" />
 							</SketchplanationImage>

pages/_app.js

@@ -1,8 +1,6 @@
 import { PrismicPreview } from "@prismicio/next";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
-import { Elements } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
 import { Analytics } from "@vercel/analytics/react";
 import BuyMeACoffee from "components/BuyMeACoffee";
 import Footer from "components/Footer";
@@ -76,19 +74,6 @@ if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
 	});
 }
 
-const stripePromise = loadStripe(
-	process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
-);
-
-const ELEMENTS_OPTIONS = {
-	fonts: [
-		{
-			cssSrc:
-				"https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap",
-		},
-	],
-};
-
 const Sketchplanations = ({ Component, pageProps }) => {
 	const [decorationHidden, setDecorationHidden] = useState(false);
 
@@ -109,32 +94,23 @@ const Sketchplanations = ({ Component, pageProps }) => {
 				}}
 			>
 				<GoogleTagManager gtmId="GTM-WNS3LG4" />
-				<Elements stripe={stripePromise} options={ELEMENTS_OPTIONS}>
-					<Head>
-						<title>{pageTitle()}</title>
-						<meta
-							name="viewport"
-							content="width=device-width, initial-scale=1, minimum-scale=1"
-						/>
-					</Head>
-					<div className={inter.className}>
-						<Header />
-						<Component {...pageProps} />
-						<BuyMeACoffee />
-						<Footer />
-					</div>
-				</Elements>
+				<Head>
+					<title>{pageTitle()}</title>
+					<meta
+						name="viewport"
+						content="width=device-width, initial-scale=1, minimum-scale=1"
+					/>
+				</Head>
+				<div className={inter.className}>
+					<Header />
+					<Component {...pageProps} />
+					<BuyMeACoffee />
+					<Footer />
+				</div>
 				<Analytics />
 			</Context.Provider>
 		</PrismicPreview>
 	);
 };
 
-// TODO: Do this in setup.js
-// Sketchplanations.getInitialProps = async () => {
-// 	const subscribeInlineDoc = await client.getSingle("subscribe_inline");
-
-// 	return { subscribeInlineDoc };
-// };
-
 export default Sketchplanations;