Feature/RAB-4 stripe

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "deno.unstable": true,
+  "deno.enablePaths": ["./packages/supabase/functions"],
+  "deno.importMap": "./packages/supabase/functions/import_map.json"
+}

apps/next-app/.env.example

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_SUPABASE_URL=<YOUR_SUPABASE_URL>
 NEXT_PUBLIC_SUPABASE_GRAPHQL_URL=<YOUR_SUPABASE_GRAPHQL_URL>
-NEXT_PUBLIC_SUPABASE_ANON_KEY=<YOUR_SUPABASE_ANON_KEY>
+NEXT_PUBLIC_SUPABASE_ANON_KEY=<YOUR_SUPABASE_ANON_KEY>
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<YOUR_STRIPE_PUBLISHABLE_KEY>

apps/next-app/next.config.js

@@ -1,6 +1,33 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.('.svg')
+    );
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: /url/ }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      }
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
   images: {
     remotePatterns: [
       {

apps/next-app/package.json

@@ -18,13 +18,15 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@headlessui/react": "^1.7.14",
     "@next/env": "^13.3.0",
+    "@stripe/stripe-js": "^1.52.1",
     "@supabase/auth-helpers-nextjs": "^0.6.1",
     "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/supabase-js": "^2.21.0",
     "@types/node": "18.15.11",
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
     "autoprefixer": "10.4.14",
+    "axios": "^1.3.6",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "graphql": "^16.6.0",
@@ -33,13 +35,15 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
+    "stripe": "^12.2.0",
     "tailwind-merge": "^1.12.0",
     "tailwindcss": "3.3.1",
     "typescript": "5.0.4"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^3.3.0",
     "@graphql-codegen/client-preset": "^3.0.0",
+    "@svgr/webpack": "^7.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
@@ -48,6 +52,7 @@
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "lint-staged": "^13.2.1"
+    "lint-staged": "^13.2.1",
+    "supabase": "^1.50.12"
   }
 }

apps/next-app/src/constants/EDGE_FUNCTION_NAMES.ts

@@ -0,0 +1,7 @@
+export enum EDGE_FUNCTION_NAMES {
+  GET_SUBSCRIPTION_PLANS = '/get-subscription-plans',
+  CHECKOUT_SESSION = '/checkout-session',
+  CREATE_CUSTOMER = '/create-customer',
+  GET_STRIPE_CHARGES = '/get-stripe-charges',
+  RETRIEVE_CHECKOUT_SESSION = '/get-checkout-session',
+}

apps/next-app/src/constants/ROUTES.ts

@@ -1,6 +1,10 @@
 export enum ROUTES {
   LOGIN = '/auth/login',
   PROVIDER = '/auth/provider',
+  HOME = '/',
   DASHBOARD = '/dashboard',
   PROFILE = '/profile',
+  SUBSCRIPTION = '/subscription',
+  SUBSCRIPTION_SUCCESS = '/subscription/success',
+  SUBSCRIPTION_CANCEL = '/subscription/cancel',
 }

apps/next-app/src/constants/SUBSCRIPTION_PLAN.ts

@@ -0,0 +1,4 @@
+export enum SUBSCRIPTION_PLAN {
+  BASIC = 'basic',
+  PRO = 'pro',
+}

apps/next-app/src/graphql/__generated/gql/gql.ts

@@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  '\n  query getProfile {\n    profilesCollection {\n      edges {\n        node {\n          id\n          full_name\n          avatar_url\n        }\n      }\n    }\n  }\n':
+  '\n  query getProfile($profileId: UUID!) {\n    profilesCollection(filter: { id: { eq: $profileId } }) {\n      edges {\n        node {\n          id\n          full_name\n          avatar_url\n          stripe_customer_id\n          subscription\n        }\n      }\n    }\n  }\n':
     types.GetProfileDocument,
   '\n  mutation updateAvatar($input: profilesUpdateInput!) {\n    updateprofilesCollection(set: $input) {\n      records {\n        avatar_url\n      }\n    }\n  }\n':
     types.UpdateAvatarDocument,
@@ -39,20 +39,20 @@ export function graphql(source: string): unknown;
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n  query getProfile {\n    profilesCollection {\n      edges {\n        node {\n          id\n          full_name\n          avatar_url\n        }\n      }\n    }\n  }\n'
-): (typeof documents)['\n  query getProfile {\n    profilesCollection {\n      edges {\n        node {\n          id\n          full_name\n          avatar_url\n        }\n      }\n    }\n  }\n'];
+  source: '\n  query getProfile($profileId: UUID!) {\n    profilesCollection(filter: { id: { eq: $profileId } }) {\n      edges {\n        node {\n          id\n          full_name\n          avatar_url\n          stripe_customer_id\n          subscription\n        }\n      }\n    }\n  }\n'
+): typeof documents['\n  query getProfile($profileId: UUID!) {\n    profilesCollection(filter: { id: { eq: $profileId } }) {\n      edges {\n        node {\n          id\n          full_name\n          avatar_url\n          stripe_customer_id\n          subscription\n        }\n      }\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
   source: '\n  mutation updateAvatar($input: profilesUpdateInput!) {\n    updateprofilesCollection(set: $input) {\n      records {\n        avatar_url\n      }\n    }\n  }\n'
-): (typeof documents)['\n  mutation updateAvatar($input: profilesUpdateInput!) {\n    updateprofilesCollection(set: $input) {\n      records {\n        avatar_url\n      }\n    }\n  }\n'];
+): typeof documents['\n  mutation updateAvatar($input: profilesUpdateInput!) {\n    updateprofilesCollection(set: $input) {\n      records {\n        avatar_url\n      }\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
   source: '\n  mutation updateProfile($input: profilesUpdateInput!) {\n    updateprofilesCollection(set: $input) {\n      records {\n        full_name\n      }\n    }\n  }\n'
-): (typeof documents)['\n  mutation updateProfile($input: profilesUpdateInput!) {\n    updateprofilesCollection(set: $input) {\n      records {\n        full_name\n      }\n    }\n  }\n'];
+): typeof documents['\n  mutation updateProfile($input: profilesUpdateInput!) {\n    updateprofilesCollection(set: $input) {\n      records {\n        full_name\n      }\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

apps/next-app/src/graphql/__generated/gql/graphql.ts

@@ -362,10 +362,13 @@ export type CountriesUpdateResponse = {
 export type Profiles = Node & {
   __typename?: 'profiles';
   avatar_url?: Maybe<Scalars['String']>;
+  email: Scalars['String'];
   full_name?: Maybe<Scalars['String']>;
   id: Scalars['UUID'];
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID'];
+  stripe_customer_id?: Maybe<Scalars['String']>;
+  subscription?: Maybe<Scalars['String']>;
   updated_at?: Maybe<Scalars['Datetime']>;
   username?: Maybe<Scalars['String']>;
 };
@@ -392,17 +395,23 @@ export type ProfilesEdge = {
 
 export type ProfilesFilter = {
   avatar_url?: InputMaybe<StringFilter>;
+  email?: InputMaybe<StringFilter>;
   full_name?: InputMaybe<StringFilter>;
   id?: InputMaybe<UuidFilter>;
   nodeId?: InputMaybe<IdFilter>;
+  stripe_customer_id?: InputMaybe<StringFilter>;
+  subscription?: InputMaybe<StringFilter>;
   updated_at?: InputMaybe<DatetimeFilter>;
   username?: InputMaybe<StringFilter>;
 };
 
 export type ProfilesInsertInput = {
   avatar_url?: InputMaybe<Scalars['String']>;
+  email?: InputMaybe<Scalars['String']>;
   full_name?: InputMaybe<Scalars['String']>;
   id?: InputMaybe<Scalars['UUID']>;
+  stripe_customer_id?: InputMaybe<Scalars['String']>;
+  subscription?: InputMaybe<Scalars['String']>;
   updated_at?: InputMaybe<Scalars['Datetime']>;
   username?: InputMaybe<Scalars['String']>;
 };
@@ -417,16 +426,22 @@ export type ProfilesInsertResponse = {
 
 export type ProfilesOrderBy = {
   avatar_url?: InputMaybe<OrderByDirection>;
+  email?: InputMaybe<OrderByDirection>;
   full_name?: InputMaybe<OrderByDirection>;
   id?: InputMaybe<OrderByDirection>;
+  stripe_customer_id?: InputMaybe<OrderByDirection>;
+  subscription?: InputMaybe<OrderByDirection>;
   updated_at?: InputMaybe<OrderByDirection>;
   username?: InputMaybe<OrderByDirection>;
 };
 
 export type ProfilesUpdateInput = {
   avatar_url?: InputMaybe<Scalars['String']>;
+  email?: InputMaybe<Scalars['String']>;
   full_name?: InputMaybe<Scalars['String']>;
   id?: InputMaybe<Scalars['UUID']>;
+  stripe_customer_id?: InputMaybe<Scalars['String']>;
+  subscription?: InputMaybe<Scalars['String']>;
   updated_at?: InputMaybe<Scalars['Datetime']>;
   username?: InputMaybe<Scalars['String']>;
 };
@@ -439,7 +454,9 @@ export type ProfilesUpdateResponse = {
   records: Array<Profiles>;
 };
 
-export type GetProfileQueryVariables = Exact<{ [key: string]: never }>;
+export type GetProfileQueryVariables = Exact<{
+  profileId: Scalars['UUID'];
+}>;
 
 export type GetProfileQuery = {
   __typename?: 'Query';
@@ -452,6 +469,8 @@ export type GetProfileQuery = {
         id: any;
         full_name?: string | null;
         avatar_url?: string | null;
+        stripe_customer_id?: string | null;
+        subscription?: string | null;
       };
     }>;
   } | null;
@@ -488,12 +507,53 @@ export const GetProfileDocument = {
       kind: 'OperationDefinition',
       operation: 'query',
       name: { kind: 'Name', value: 'getProfile' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'profileId' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } },
+          },
+        },
+      ],
       selectionSet: {
         kind: 'SelectionSet',
         selections: [
           {
             kind: 'Field',
             name: { kind: 'Name', value: 'profilesCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'profileId' },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
             selectionSet: {
               kind: 'SelectionSet',
               selections: [
@@ -521,6 +581,17 @@ export const GetProfileDocument = {
                               kind: 'Field',
                               name: { kind: 'Name', value: 'avatar_url' },
                             },
+                            {
+                              kind: 'Field',
+                              name: {
+                                kind: 'Name',
+                                value: 'stripe_customer_id',
+                              },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'subscription' },
+                            },
                           ],
                         },
                       },

apps/next-app/src/middleware.ts

@@ -21,5 +21,5 @@ export async function middleware(req: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/dashboard', '/profile'],
+  matcher: ['/dashboard', '/profile', '/subscription'],
 };

apps/next-app/src/pages/dashboard/index.tsx

@@ -56,6 +56,9 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const session = await supabase.auth.getSession();
   const client = getApolloServerClient(session.data.session?.access_token);
 
-  const { data } = await client.query({ query: GET_PROFILE });
+  const { data } = await client.query({
+    query: GET_PROFILE,
+    variables: { profileId: session.data.session?.user.id },
+  });
   return { props: { profile: data.profilesCollection } };
 };

apps/next-app/src/pages/profile/index.tsx

@@ -30,6 +30,9 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const session = await supabase.auth.getSession();
   const client = getApolloServerClient(session.data.session?.access_token);
 
-  const { data } = await client.query({ query: GET_PROFILE });
+  const { data } = await client.query({
+    query: GET_PROFILE,
+    variables: { profileId: session.data.session?.user.id },
+  });
   return { props: { profile: data.profilesCollection } };
 };