feat: ability to disable purchases (#273)

* feat: ability to disable purchases

* chore: add flags secret line

.env.local.example

@@ -8,6 +8,7 @@ STRIPE_WEBHOOK_SECRET=YOUR_STRIPE_WEBHOOK_SECRET
 NEXT_PUBLIC_STRIPE_TERMINAL_LOCATION=YOUR_STRIPE_TERMINAL_LOCATION_ID
 
 NEXT_PUBLIC_HAPPYKIT_ANALYTICS_PUBLIC_KEY=
+NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY=
 
 SENTRY_AUTH_TOKEN=
 

.github/workflows/lint.yml

@@ -37,6 +37,7 @@ jobs:
           NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
           NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY: ${{ secrets.NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY }}
 
       - name: Run ESLint
         run: pnpm run lint

package.json

@@ -25,6 +25,7 @@
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
     "@happykit/analytics": "1.0.1",
+    "@happykit/flags": "^2.0.5-perf.0",
     "@sendgrid/mail": "7.6.2",
     "@sentry/cli": "1.74.4",
     "@sentry/nextjs": "6.19.7",

src/components/Checkout/CheckoutWrapper.tsx

@@ -1,12 +1,19 @@
-import { Spinner } from '@chakra-ui/react';
+import { Spinner, Text } from '@chakra-ui/react';
 import { usePaymentIntent } from 'util/stripeHelpers';
 import { Elements } from '@stripe/react-stripe-js';
 import { getStripe } from 'util/getStripe';
 import CheckoutForm from './CheckoutForm';
 
-const CheckoutWrapper: React.FC = () => {
+interface Props {
+  purchasesEnabled: boolean;
+}
+
+const CheckoutWrapper: React.FC<Props> = ({ purchasesEnabled }) => {
   const stripe = getStripe();
   const clientSecret = usePaymentIntent();
+  if (purchasesEnabled === false) {
+    return <Text>Sorry - purchases are disabled.</Text>;
+  }
 
   const appearance = {
     theme: 'stripe',

src/components/UserPanel/NoTicket.tsx

@@ -2,19 +2,33 @@ import {
   Flex, Heading, Text,
 } from '@chakra-ui/react';
 import CheckoutWrapper from 'components/Checkout/CheckoutWrapper';
+import type { Flags } from 'types/flags';
+import { useFlags } from '@happykit/flags/client';
+import { useUser } from '@supabase/supabase-auth-helpers/react';
 import MoreInfo from './MoreInfo';
 
-const NoTicket: React.FC = () => (
-  <Flex w="100%" justify="center" align="center" direction="column" p={5}>
-    <Heading as="h2" mb={3}><Text textAlign="center">Buy your ticket for £{(parseInt(process.env.NEXT_PUBLIC_TICKET_PRICE, 10) / 100).toFixed(2)}</Text></Heading>
-    <Flex flexFlow="column nowrap" justify="center" align="center" alignSelf="center" minW="300px" maxW="500px" w="70%">
-      <CheckoutWrapper />
-    </Flex>
-    <Flex height="50px" />
-    <Heading as="h2" textAlign="center">More information</Heading>
-    <MoreInfo />
+const NoTicket: React.FC = () => {
+  const { user } = useUser();
+  const { flags } = useFlags<Flags>({
+    user: {
+      key: user.id,
+      email: user.email,
+      name: user.user_metadata.proper_name,
+    },
+  });
+  const purchasesEnabled = flags?.purchases_enabled;
+  return (
+    <Flex w="100%" justify="center" align="center" direction="column" p={5}>
+      <Heading as="h2" mb={3}><Text textAlign="center">Buy your ticket for £{(parseInt(process.env.NEXT_PUBLIC_TICKET_PRICE, 10) / 100).toFixed(2)}</Text></Heading>
+      <Flex flexFlow="column nowrap" justify="center" align="center" alignSelf="center" minW="300px" maxW="500px" w="70%">
+        <CheckoutWrapper purchasesEnabled={purchasesEnabled} />
+      </Flex>
+      <Flex height="50px" />
+      <Heading as="h2" textAlign="center">More information</Heading>
+      <MoreInfo />
 
-  </Flex>
-);
+    </Flex>
+  );
+};
 
 export default NoTicket;

src/pages/_app.tsx

@@ -5,11 +5,15 @@ import { DefaultSeo } from 'next-seo';
 import { supabaseClient } from '@supabase/supabase-auth-helpers/nextjs';
 import { UserProvider } from '@supabase/supabase-auth-helpers/react';
 import { useAnalytics } from '@happykit/analytics';
+import { configure } from '@happykit/flags/config';
 import { TicketContextProvider } from 'util/ticketContext';
 import theme from '../util/theme';
 
 const App: NextPage<AppProps> = ({ Component, pageProps }) => {
   useAnalytics({ publicKey: process.env.NEXT_PUBLIC_HAPPYKIT_ANALYTICS_PUBLIC_KEY });
+  configure({
+    envKey: process.env.NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY,
+  });
 
   return (
     <UserProvider supabaseClient={supabaseClient}>

src/types/flags.ts

@@ -0,0 +1,3 @@
+export type Flags = {
+  purchases_enabled: boolean;
+};