DEV Community: Alex Enes Zorlu

How to Add Product Tours to Next.js Applications

Alex Enes Zorlu — Fri, 27 Sep 2024 14:43:44 +0000

How to Add Product Tours to Next.js Applications

In this tutorial, I will guide you through adding product tours to your Next.js application using a tool called NextStep. We'll cover setting up a basic product tour and triggering custom tours based on user interactions.

Checkout NextStep here.

🗂️ Table of Contents

Introduction
Step-by-Step Setup
Conclusion

Introduction

In today’s fast-paced web environment, product tours are an essential tool to enhance user onboarding. They guide new users through your app, explain core features, and ensure users make the most of your product.

Why Add Product Tours?

Product tours help users quickly grasp your app's key functionalities. They:

Simplify the onboarding process for new users.
Convert static documentation into interactive tours.
Help troubleshoot issues by visually guiding users through fixes.
Boost engagement and feature adoption, ensuring that users understand new updates and tools.

Step by Step Setup

Step 1: Install the NextStepJS Library

Run the following command to install NextStep, the library we’ll be using for creating tours:

# npm
npm i nextstepjs framer-motion @radix-ui/react-portal

# pnpm
pnpm add nextstepjs framer-motion @radix-ui/react-portal

# yarn
yarn add nextstepjs framer-motion @radix-ui/react-portal

# bun
bun add nextstepjs framer-motion @radix-ui/react-portal

Step 2: Add NextStep to Tailwindcss Config

Tailwind CSS needs to scan the node module to include the used classes. See configuring source paths for more information.

const config = {
  content: [
    './node_modules/nextstepjs/dist/**/*.{js,ts,jsx,tsx}'
  ]
}

Step 3: Initialise NextStep in Your App

Wrap your app with the NextStepProvider and NextStep components. Provide steps to the NextStep. We will define steps in the next section.

App Router: Global layout.tsx
Pages Router: _app.tsx (see NextStepJS Docs for details.)

import { NextStepProvider, NextStep } from 'nextstepjs';

export default function Layout({ children }) {
  return (
    <NextStepProvider>
      <NextStep steps={steps}>
        {children}
      </NextStep>
    </NextStepProvider>
  );
}

Step 4: Define Your Product Tour Steps

Create a set of steps for your tour. Each step can have a selector which uses ID of elements in the document. You can also locate the tour Card anywhere to the selected element.

NextStep allows you to navigate between different routes during a tour using the nextRoute and prevRoute properties in the step object. These properties enable seamless transitions between different pages of your application.

nextRoute: Specifies the route to navigate to when the "Next" button is clicked.

prevRoute: Specifies the route to navigate to when the "Previous" button is clicked.

const steps = const steps = [
  {
    tour: "mainTour",
    steps: [
      {
        icon: "👋",
        title: "Welcome",
        content: "Let's get started with NextStep!",
        selector: "#step1",
        side: "right",
        showControls: true,
        showSkip: true
      },
      // More steps...
    ]
  }
];

Step 5: Start your tour using useNextStep hook

Control your tour programmatically from anywhere in your app. You can also trigger tour changes with events or other buttons within the UI.

import { useNextStep } from 'nextstepjs';

const MyComponent = () => {
  const { startNextStep, closeNextStep, currentTour, currentStep, setCurrentStep, isNextStepVisible } = useNextStep();

  const handleStartTour = () => {
    startNextStep("mainTour");
  };

  return (
    <button onClick={handleStartTour}>Start Tour</button>
  );
};

Conclusion

And voila! That's it. Now you can guide your users around your app with interactive product tours.

Remember, the key to effective product tours is to keep them concise, informative, and tailored to your users' needs. As you continue to develop your app, don't forget to update your tours to reflect new features and improvements.

Happy touring!

NextStep: Lightweight Onboarding Wizard for Next.js 🚀

Alex Enes Zorlu — Tue, 17 Sep 2024 15:05:20 +0000

If you're using Next.js and TailwindCSS, I’ve got something that will take your user onboarding to the next level! 🌟

Meet NextStep — a powerful yet lightweight onboarding wizard that makes guiding your users through your app easy and interactive.

🎯 Key Use Cases:

Onboard new users after signup with step-by-step guidance
Convert help docs into interactive tours instead of plain text 📘
Handle errors by showing exactly what to fix, with custom tours instead of boring toasters
Trigger custom tours after specific events to keep users on track 💡

And guess what? You can even span a tour across multiple routes and decide whether to allow users to interact with the UI or block it completely! 🛑

💼 Some use cases:

Interactive onboarding: Let users learn your app at their pace with tooltips and guided steps
Custom error handling: Show users how to resolve errors right within your app
Tutorials & demos: Walk new users through key features without overwhelming them

The possibilities are limitless, and setting it up is a breeze! 🛠️

Check out the demo or dive right into the documentation to see how easy it is to get started:
🔗 NextStep Demo & Docs
🔗 NextStep Repo
🔗 NextStep NPM Page

✨ If you find it useful, don’t forget to give it a star ⭐️⭐️⭐️⭐️⭐️ on GitHub!

How to Implement Google Tag Manager and Analytics in Next.js

Alex Enes Zorlu — Thu, 22 Aug 2024 11:15:23 +0000

Hey there developers 👋 I have recently added Google Tag Manager (GTM) and Analytics to my Next.js app and could not believe how sleek this solution is. I want to share it with you so you can cook delicious cookies as well. 🍪

In this tutorial, we'll walk through the process of adding Google Tag Manager (GTM) and Google Analytics to your Next.js application. We'll use the @next/third-parties package, which provides optimized components for third-party libraries, and implement a cookie consent mechanism to ensure compliance with privacy regulations - GDPR.

Installation
Creating a Cookie Consent Component
Adding the Component to Your Layout
Sending Custom Events
Configuring Google Tag Manager
Setting Environment Variables
Conclusion

Installation

First, let's install the required packages. Open your terminal and run the following command:



npm install @next/third-parties js-cookie

This will install the @next/third-parties package, which provides the Google Tag Manager component, and js-cookie, which we'll use to manage cookie consent.

Creating a Cookie Consent Component

Next, we'll bake our CookieConsent component that will handle the cookie consent logic and render the appropriate UI based on the user's choice. It's a lot easier than baking cookies!

Create a new file called CookieConsent.js in your components folder and add the following code:



'use client';

import { useState, useEffect } from 'react';
import { GoogleTagManager } from '@next/third-parties/google';
import Cookies from 'js-cookie';

const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;

export default function CookieConsent() {
  const [cookieState, setCookieState] = useState('not-answered');

  useEffect(() => {
    const state = Cookies.get('cookie-consent-state');
    if (state) setCookieState(state);
  }, []);

  const handleConsent = (state) => {
    Cookies.set('cookie-consent-state', state);
    setCookieState(state);
  };

  if (cookieState === 'not-answered') {
    return (
      <div className="fixed bottom-0 right-0 p-4 bg-gray-100 rounded-tl-lg">
        <p>We use cookies to improve your experience. Do you accept?</p>
        <button onClick={() => handleConsent('accepted')}>Accept</button>
        <button onClick={() => handleConsent('rejected')}>Reject</button>
      </div>
    );
  }

  if (cookieState === 'accepted') {
    return <GoogleTagManager gtmId={GTM_ID} />;
  }

  return (
    <button
      className="fixed bottom-4 right-4 p-2 bg-gray-200 rounded-full"
      onClick={() => setCookieState('not-answered')}
    >
      🍪
    </button>
  );
}

This component does the following:

It uses the useState hook to manage the cookie consent state.
On mount, it checks for an existing cookie consent state using js-cookie.
It provides a UI for users to accept or reject cookies.
If cookies are accepted, it renders the GoogleTagManager component.
If cookies are rejected, it shows a small cookie icon that allows users to change their preference.

Adding the Component to Your Layout

Now that we have our CookieConsent component, it is time to add that to the mix, our application's layout. This ensures that the cookie consent banner and Google Tag Manager are available on all pages.

In your app/layout.js file, import and add the CookieConsent component:



import CookieConsent from '../components/CookieConsent';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <CookieConsent />
      </body>
    </html>
  );
}

Sending Custom Events

Here's where the fun begins - sending custom events!

One of the benefits of using Google Tag Manager is the ability to send custom events. These events can be used to track user interactions or important application states.

To send custom events to Google Tag Manager, you can use the sendGTMEvent function from @next/third-parties/google. Here's an example of how to use it:



import { sendGTMEvent } from '@next/third-parties/google';

function handleSubmit() {
  // Your form submission logic here

  // Send a custom event to GTM
  sendGTMEvent({ event: 'form_submitted', formName: 'newsletter' });
}

You can call this function whenever you want to send an event to Google Tag Manager. For example, you might call it when a user submits a form, makes a purchase, or interacts with a specific feature of your application.

Configuring Google Tag Manager

To make use of the events you're sending, you'll need to configure your Google Tag Manager container. Here are the steps:

Create a Google Tag Manager account and container if you haven't already.
Set up tags for Google Analytics and any other services you want to use.
Create triggers based on the custom events you're sending (e.g., 'form_submitted').
Use these triggers to fire your tags at the appropriate times.
Publish your GTM container.

Don't forget to test everything using GTM's preview mode. It's like having X-ray vision for your website!

Setting Environment Variables

To keep your Google Tag Manager ID secure and make it easy to use different IDs for different environments, you should use an environment variable.

Add your Google Tag Manager ID to your .env.local file:



NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX

Replace GTM-XXXXXXX with your actual GTM container ID.

Conclusion

Congratulations! You've successfully implemented Google Tag Manager and Analytics in your Next.js app. Let's recap what you've accomplished:

We've installed the necessary packages.
We've created a CookieConsent component that manages user consent for cookies and tracking.
We've added this component to our application layout.
We've set up a method for sending custom events to Google Tag Manager.
We've outlined the steps for configuring Google Tag Manager.
We've set up our GTM ID as an environment variable.

You're now tracking your app like a pro, all while respecting user privacy. Nice work!

Remember to test thoroughly, keep your privacy policy up to date, and have fun exploring your new analytics superpowers!

Happy coding, and may your bounce rates be ever in your favor! 😉

Next.js-Supabase Stripe Subscriptions Integration

Alex Enes Zorlu — Sun, 18 Aug 2024 17:41:51 +0000

Next.js-Supabase Stripe Subscriptions Integration

I've been working on a Next.js project with my team, a powerful trading journal designed to help monitor emotions during trading. If you're interested in learning more, visit www.mindtrajour.com. As we approach the full release, integrating Stripe into our app became essential.

I've used Stripe numerous times in dummy apps like Netflix clones and Airbnb clones but never in a production app. Most online instructions focus on using starter kits, like the one created by Vercel and while the Stripe Docs guide you through integrating subscriptions, there’s no specific documentation for Next.js, particularly for the App Router. Although we can mimic the instructions for React + Node.js, the documentation lacks essential features, especially regarding Stripe triggers. This is why I've decided to document the process for you.

This guide assumes you already have a Next.js App Router setup with Supabase DB and Auth running. If you're starting from scratch, I recommend using the Vercel starter kit.

Prerequisites
Create Required Tables in Supabase
Get Supabase Service Role Key
Add Required Packages
Setup Stripe Code Locally
Add Webhooks to Sync Your Database with Stripe
Create Your Stripe Account and Connect the Webhook
Create Product and Price
Add Front-end to Test

Prerequisites

Next.js App Router setup
TypeScript (optional)
Supabase setup with Auth

1. Create Required Tables in Supabase

There are a few ways to accomplish this:

Create & Run Supabase Migration: Use below script to create the migration file
Run the SQL script in the SQL editor: You can run the script provided below directly.
Use the Quick Start template: Navigate to the SQL Editor, select "Quick Start," and run the Stripe Subscriptions template.

/** 
* USERS
* Note: This table contains user data. Users should only be able to view and update their own data.
*/
create table users (
  -- UUID from auth.users
  id uuid references auth.users not null primary key,
  full_name text,
  avatar_url text,
  -- The customer's billing address, stored in JSON format.
  billing_address jsonb,
  -- Stores your customer's payment instruments.
  payment_method jsonb
);
alter table users enable row level security;
create policy "Can view own user data." on users for select using (auth.uid() = id);
create policy "Can update own user data." on users for update using (auth.uid() = id);

/**
* This trigger automatically creates a user entry when a new user signs up via Supabase Auth.
*/ 
create function public.handle_new_user() 
returns trigger as $$
begin
  insert into public.users (id, full_name, avatar_url)
  values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
  return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

/**
* CUSTOMERS
* Note: this is a private table that contains a mapping of user IDs to Stripe customer IDs.
*/
create table customers (
  -- UUID from auth.users
  id uuid references auth.users not null primary key,
  -- The user's customer ID in Stripe. User must not be able to update this.
  stripe_customer_id text
);
alter table customers enable row level security;
-- No policies as this is a private table that the user must not have access to.

/** 
* PRODUCTS
* Note: products are created and managed in Stripe and synced to our DB via Stripe webhooks.
*/
create table products (
  -- Product ID from Stripe, e.g. prod_1234.
  id text primary key,
  -- Whether the product is currently available for purchase.
  active boolean,
  -- The product's name, meant to be displayable to the customer. Whenever this product is sold via a subscription, name will show up on associated invoice line item descriptions.
  name text,
  -- The product's description, meant to be displayable to the customer. Use this field to optionally store a long form explanation of the product being sold for your own rendering purposes.
  description text,
  -- A URL of the product image in Stripe, meant to be displayable to the customer.
  image text,
  -- Set of key-value pairs, used to store additional information about the object in a structured format.
  metadata jsonb
);
alter table products enable row level security;
create policy "Allow public read-only access." on products for select using (true);

/**
* PRICES
* Note: prices are created and managed in Stripe and synced to our DB via Stripe webhooks.
*/
create type pricing_type as enum ('one_time', 'recurring');
create type pricing_plan_interval as enum ('day', 'week', 'month', 'year');
create table prices (
  -- Price ID from Stripe, e.g. price_1234.
  id text primary key,
  -- The ID of the prduct that this price belongs to.
  product_id text references products, 
  -- Whether the price can be used for new purchases.
  active boolean,
  -- A brief description of the price.
  description text,
  -- The unit amount as a positive integer in the smallest currency unit (e.g., 100 cents for US$1.00 or 100 for ¥100, a zero-decimal currency).
  unit_amount bigint,
  -- Three-letter ISO currency code, in lowercase.
  currency text check (char_length(currency) = 3),
  -- One of `one_time` or `recurring` depending on whether the price is for a one-time purchase or a recurring (subscription) purchase.
  type pricing_type,
  -- The frequency at which a subscription is billed. One of `day`, `week`, `month` or `year`.
  interval pricing_plan_interval,
  -- The number of intervals (specified in the `interval` attribute) between subscription billings. For example, `interval=month` and `interval_count=3` bills every 3 months.
  interval_count integer,
  -- Default number of trial days when subscribing a customer to this price using [`trial_from_plan=true`](https://stripe.com/docs/api#create_subscription-trial_from_plan).
  trial_period_days integer,
  -- Set of key-value pairs, used to store additional information about the object in a structured format.
  metadata jsonb
);
alter table prices enable row level security;
create policy "Allow public read-only access." on prices for select using (true);

/**
* SUBSCRIPTIONS
* Note: subscriptions are created and managed in Stripe and synced to our DB via Stripe webhooks.
*/
create type subscription_status as enum ('trialing', 'active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'unpaid', 'paused');
create table subscriptions (
  -- Subscription ID from Stripe, e.g. sub_1234.
  id text primary key,
  user_id uuid references auth.users not null,
  -- The status of the subscription object, one of subscription_status type above.
  status subscription_status,
  -- Set of key-value pairs, used to store additional information about the object in a structured format.
  metadata jsonb,
  -- ID of the price that created this subscription.
  price_id text references prices,
  -- Quantity multiplied by the unit amount of the price creates the amount of the subscription. Can be used to charge multiple seats.
  quantity integer,
  -- If true the subscription has been canceled by the user and will be deleted at the end of the billing period.
  cancel_at_period_end boolean,
  -- Time at which the subscription was created.
  created timestamp with time zone default timezone('utc'::text, now()) not null,
  -- Start of the current period that the subscription has been invoiced for.
  current_period_start timestamp with time zone default timezone('utc'::text, now()) not null,
  -- End of the current period that the subscription has been invoiced for. At the end of this period, a new invoice will be created.
  current_period_end timestamp with time zone default timezone('utc'::text, now()) not null,
  -- If the subscription has ended, the timestamp of the date the subscription ended.
  ended_at timestamp with time zone default timezone('utc'::text, now()),
  -- A date in the future at which the subscription will automatically get canceled.
  cancel_at timestamp with time zone default timezone('utc'::text, now()),
  -- If the subscription has been canceled, the date of that cancellation. If the subscription was canceled with `cancel_at_period_end`, `canceled_at` will still reflect the date of the initial cancellation request, not the end of the subscription period when the subscription is automatically moved to a canceled state.
  canceled_at timestamp with time zone default timezone('utc'::text, now()),
  -- If the subscription has a trial, the beginning of that trial.
  trial_start timestamp with time zone default timezone('utc'::text, now()),
  -- If the subscription has a trial, the end of that trial.
  trial_end timestamp with time zone default timezone('utc'::text, now())
);
alter table subscriptions enable row level security;
create policy "Can only view own subs data." on subscriptions for select using (auth.uid() = user_id);

/**
 * REALTIME SUBSCRIPTIONS
 * Only allow realtime listening on public tables.
 */
drop publication if exists supabase_realtime;
create publication supabase_realtime for table products, prices;

2. Get Supabase Service Role Key

If you're running a local Supabase instance:

Start your Supabase container and copy the service_role key.

If you're using Supabase cloud:

Go to your Supabase project dashboard.
Navigate to "Project Settings."
Click on "API."
Copy the service_role key under "Project API keys."

Add this key to your .env file as SUPABASE_SERVICE_ROLE_KEY. Ensure this key is not exposed, as it could allow anyone to manipulate your data.

3. Add Required Packages

Install the Stripe and micro packages:

yarn add micro
yarn add stripe @stripe/react-stripe-js @stripe/stripe-js

4. Setup Stripe Code Locally

This step will create the backbone of our app. We will use these configurations in the next stages. Essentially, this step configures our Stripe setup and provides functions for the front-end. The server.ts file is particularly important, containing two significant functions. The Supabase code will provide admin scripts for the webhook to sync the database and queries to fetch data for the front-end.

Create a stripe folder in your project and add the following files:

//config.ts
import Stripe from 'stripe';

export const stripe = new Stripe(
  process.env.STRIPE_SECRET_KEY_LIVE ?? process.env.STRIPE_SECRET_KEY ?? '',
  {
    apiVersion: '2024-06-20',
    // Register this as an official Stripe plugin.
    // https://stripe.com/docs/building-plugins#setappinfo
    appInfo: {
      name: 'Your App Name',
      version: '0.0.0',
      url: 'https://github.com/vercel/nextjs-subscription-payments',
    },
  }
);

//client.ts
import Stripe from 'stripe';

export const stripe = new Stripe(
  process.env.STRIPE_SECRET_KEY_LIVE ?? process.env.STRIPE_SECRET_KEY ?? '',
  {
    // https://github.com/stripe/stripe-node#configuration
    // https://stripe.com/docs/api/versioning
    // @ts-ignore
    apiVersion: null,
    // Register this as an official Stripe plugin.
    // https://stripe.com/docs/building-plugins#setappinfo
    appInfo: {
      name: 'Next.js Subscription Starter',
      version: '0.0.0',
      url: 'https://github.com/vercel/nextjs-subscription-payments'
    }
  }
);

//server.ts
'use server';

import Stripe from 'stripe';
import { stripe } from '@/utils/stripe/config';
import { createClient } from '@/utils/supabase/server';
import { createOrRetrieveCustomer } from '@/utils/supabase/admin';
import {
  getURL,
  getErrorRedirect,
  calculateTrialEndUnixTimestamp
} from '@/utils/helpers';
import { Tables } from '@/types_db';

type Price = Tables<'prices'>;

type CheckoutResponse = {
  errorRedirect?: string;
  sessionId?: string;
};

export async function checkoutWithStripe(
  price: Price,
  redirectPath: string = '/account'
): Promise<CheckoutResponse> {
  try {
    // Get the user from Supabase auth
    const supabase = createClient();
    const {
      error,
      data: { user }
    } = await supabase.auth.getUser();

    if (error || !user) {
      console.error(error);
      throw new Error('Could not get user session.');
    }

    // Retrieve or create the customer in Stripe
    let customer: string;
    try {
      customer = await createOrRetrieveCustomer({
        uuid: user?.id || '',
        email: user?.email || ''
      });
    } catch (err) {
      console.error(err);
      throw new Error('Unable to access customer record.');
    }

    let params: Stripe.Checkout.SessionCreateParams = {
      allow_promotion_codes: true,
      billing_address_collection: 'required',
      customer,
      customer_update: {
        address: 'auto'
      },
      line_items: [
        {
          price: price.id,
          quantity: 1
        }
      ],
      cancel_url: getURL(),
      success_url: getURL(redirectPath)
    };

    console.log(
      'Trial end:',
      calculateTrialEndUnixTimestamp(price.trial_period_days)
    );
    if (price.type === 'recurring') {
      params = {
        ...params,
        mode: 'subscription',
        subscription_data: {
          trial_end: calculateTrialEndUnixTimestamp(price.trial_period_days)
        }
      };
    } else if (price.type === 'one_time') {
      params = {
        ...params,
        mode: 'payment'
      };
    }

    // Create a checkout session in Stripe
    let session;
    try {
      session = await stripe.checkout.sessions.create(params);
    } catch (err) {
      console.error(err);
      throw new Error('Unable to create checkout session.');
    }

    // Instead of returning a Response, just return the data or error.
    if (session) {
      return { sessionId: session.id };
    } else {
      throw new Error('Unable to create checkout session.');
    }
  } catch (error) {
    if (error instanceof Error) {
      return {
        errorRedirect: getErrorRedirect(
          redirectPath,
          error.message,
          'Please try again later or contact a system administrator.'
        )
      };
    } else {
      return {
        errorRedirect: getErrorRedirect(
          redirectPath,
          'An unknown error occurred.',
          'Please try again later or contact a system administrator.'
        )
      };
    }
  }
}

export async function createStripePortal(currentPath: string) {
  try {
    const supabase = createClient();
    const {
      error,
      data: { user }
    } = await supabase.auth.getUser();

    if (!user) {
      if (error) {
        console.error(error);
      }
      throw new Error('Could not get user session.');
    }

    let customer;
    try {
      customer = await createOrRetrieveCustomer({
        uuid: user.id || '',
        email: user.email || ''
      });
    } catch (err) {
      console.error(err);
      throw new Error('Unable to access customer record.');
    }

    if (!customer) {
      throw new Error('Could not get customer.');
    }

    try {
      const { url } = await stripe.billingPortal.sessions.create({
        customer,
        return_url: getURL('/account')
      });
      if (!url) {
        throw new Error('Could not create billing portal');
      }
      return url;
    } catch (err) {
      console.error(err);
      throw new Error('Could not create billing portal');
    }
  } catch (error) {
    if (error instanceof Error) {
      console.error(error);
      return getErrorRedirect(
        currentPath,
        error.message,
        'Please try again later or contact a system administrator.'
      );
    } else {
      return getErrorRedirect(
        currentPath,
        'An unknown error occurred.',
        'Please try again later or contact a system administrator.'
      );
    }
  }
}

//helpers.ts
import type { Tables } from '@/types_db';

type Price = Tables<'prices'>;

export const getURL = (path: string = '') => {
  // Check if NEXT_PUBLIC_SITE_URL is set and non-empty. Set this to your site URL in production env.
  let url =
    process?.env?.NEXT_PUBLIC_SITE_URL &&
    process.env.NEXT_PUBLIC_SITE_URL.trim() !== ''
      ? process.env.NEXT_PUBLIC_SITE_URL
      : // If not set, check for NEXT_PUBLIC_VERCEL_URL, which is automatically set by Vercel.
        process?.env?.NEXT_PUBLIC_VERCEL_URL &&
          process.env.NEXT_PUBLIC_VERCEL_URL.trim() !== ''
        ? process.env.NEXT_PUBLIC_VERCEL_URL
        : // If neither is set, default to localhost for local development.
          'http://localhost:3000/';

  // Trim the URL and remove trailing slash if exists.
  url = url.replace(/\/+$/, '');
  // Make sure to include `https://` when not localhost.
  url = url.includes('http') ? url : `https://${url}`;
  // Ensure path starts without a slash to avoid double slashes in the final URL.
  path = path.replace(/^\/+/, '');

  // Concatenate the URL and the path.
  return path ? `${url}/${path}` : url;
};

export const postData = async ({
  url,
  data
}: {
  url: string;
  data?: { price: Price };
}) => {
  const res = await fetch(url, {
    method: 'POST',
    headers: new Headers({ 'Content-Type': 'application/json' }),
    credentials: 'same-origin',
    body: JSON.stringify(data)
  });

  return res.json();
};

export const toDateTime = (secs: number) => {
  var t = new Date(+0); // Unix epoch start.
  t.setSeconds(secs);
  return t;
};

export const calculateTrialEndUnixTimestamp = (
  trialPeriodDays: number | null | undefined
) => {
  // Check if trialPeriodDays is null, undefined, or less than 2 days
  if (
    trialPeriodDays === null ||
    trialPeriodDays === undefined ||
    trialPeriodDays < 2
  ) {
    return undefined;
  }

  const currentDate = new Date(); // Current date and time
  const trialEnd = new Date(
    currentDate.getTime() + (trialPeriodDays + 1) * 24 * 60 * 60 * 1000
  ); // Add trial days
  return Math.floor(trialEnd.getTime() / 1000); // Convert to Unix timestamp in seconds
};

const toastKeyMap: { [key: string]: string[] } = {
  status: ['status', 'status_description'],
  error: ['error', 'error_description']
};

const getToastRedirect = (
  path: string,
  toastType: string,
  toastName: string,
  toastDescription: string = '',
  disableButton: boolean = false,
  arbitraryParams: string = ''
): string => {
  const [nameKey, descriptionKey] = toastKeyMap[toastType];

  let redirectPath = `${path}?${nameKey}=${encodeURIComponent(toastName)}`;

  if (toastDescription) {
    redirectPath += `&${descriptionKey}=${encodeURIComponent(toastDescription)}`;
  }

  if (disableButton) {
    redirectPath += `&disable_button=true`;
  }

  if (arbitraryParams) {
    redirectPath += `&${arbitraryParams}`;
  }

  return redirectPath;
};

export const getStatusRedirect = (
  path: string,
  statusName: string,
  statusDescription: string = '',
  disableButton: boolean = false,
  arbitraryParams: string = ''
) =>
  getToastRedirect(
    path,
    'status',
    statusName,
    statusDescription,
    disableButton,
    arbitraryParams
  );

export const getErrorRedirect = (
  path: string,
  errorName: string,
  errorDescription: string = '',
  disableButton: boolean = false,
  arbitraryParams: string = ''
) =>
  getToastRedirect(
    path,
    'error',
    errorName,
    errorDescription,
    disableButton,
    arbitraryParams
  );

Create a supabase folder and add the following files:

//admin.ts
import { toDateTime } from '@/utils/helpers';
import { stripe } from '@/utils/stripe/config';
import { createClient } from '@supabase/supabase-js';
import Stripe from 'stripe';
import type { Database, Tables, TablesInsert } from 'types_db';

type Product = Tables<'products'>;
type Price = Tables<'prices'>;

// Change to control trial period length
const TRIAL_PERIOD_DAYS = 0;

// Note: supabaseAdmin uses the SERVICE_ROLE_KEY which you must only use in a secure server-side context
// as it has admin privileges and overwrites RLS policies!
const supabaseAdmin = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL || '',
  process.env.SUPABASE_SERVICE_ROLE_KEY || ''
);

const upsertProductRecord = async (product: Stripe.Product) => {
  const productData: Product = {
    id: product.id,
    active: product.active,
    name: product.name,
    description: product.description ?? null,
    image: product.images?.[0] ?? null,
    metadata: product.metadata
  };

  const { error: upsertError } = await supabaseAdmin
    .from('products')
    .upsert([productData]);
  if (upsertError)
    throw new Error(`Product insert/update failed: ${upsertError.message}`);
  console.log(`Product inserted/updated: ${product.id}`);
};

const upsertPriceRecord = async (
  price: Stripe.Price,
  retryCount = 0,
  maxRetries = 3
) => {
  const priceData: Price = {
    id: price.id,
    product_id: typeof price.product === 'string' ? price.product : '',
    active: price.active,
    currency: price.currency,
    type: price.type,
    unit_amount: price.unit_amount ?? null,
    interval: price.recurring?.interval ?? null,
    interval_count: price.recurring?.interval_count ?? null,
    trial_period_days: price.recurring?.trial_period_days ?? TRIAL_PERIOD_DAYS
  };

  const { error: upsertError } = await supabaseAdmin
    .from('prices')
    .upsert([priceData]);

  if (upsertError?.message.includes('foreign key constraint')) {
    if (retryCount < maxRetries) {
      console.log(`Retry attempt ${retryCount + 1} for price ID: ${price.id}`);
      await new Promise((resolve) => setTimeout(resolve, 2000));
      await upsertPriceRecord(price, retryCount + 1, maxRetries);
    } else {
      throw new Error(
        `Price insert/update failed after ${maxRetries} retries: ${upsertError.message}`
      );
    }
  } else if (upsertError) {
    throw new Error(`Price insert/update failed: ${upsertError.message}`);
  } else {
    console.log(`Price inserted/updated: ${price.id}`);
  }
};

const deleteProductRecord = async (product: Stripe.Product) => {
  const { error: deletionError } = await supabaseAdmin
    .from('products')
    .delete()
    .eq('id', product.id);
  if (deletionError)
    throw new Error(`Product deletion failed: ${deletionError.message}`);
  console.log(`Product deleted: ${product.id}`);
};

const deletePriceRecord = async (price: Stripe.Price) => {
  const { error: deletionError } = await supabaseAdmin
    .from('prices')
    .delete()
    .eq('id', price.id);
  if (deletionError) throw new Error(`Price deletion failed: ${deletionError.message}`);
  console.log(`Price deleted: ${price.id}`);
};

const upsertCustomerToSupabase = async (uuid: string, customerId: string) => {
  const { error: upsertError } = await supabaseAdmin
    .from('customers')
    .upsert([{ id: uuid, stripe_customer_id: customerId }]);

  if (upsertError)
    throw new Error(`Supabase customer record creation failed: ${upsertError.message}`);

  return customerId;
};

const createCustomerInStripe = async (uuid: string, email: string) => {
  const customerData = { metadata: { supabaseUUID: uuid }, email: email };
  const newCustomer = await stripe.customers.create(customerData);
  if (!newCustomer) throw new Error('Stripe customer creation failed.');

  return newCustomer.id;
};

const createOrRetrieveCustomer = async ({
  email,
  uuid
}: {
  email: string;
  uuid: string;
}) => {
  // Check if the customer already exists in Supabase
  const { data: existingSupabaseCustomer, error: queryError } =
    await supabaseAdmin
      .from('customers')
      .select('*')
      .eq('id', uuid)
      .maybeSingle();

  if (queryError) {
    throw new Error(`Supabase customer lookup failed: ${queryError.message}`);
  }

  // Retrieve the Stripe customer ID using the Supabase customer ID, with email fallback
  let stripeCustomerId: string | undefined;
  if (existingSupabaseCustomer?.stripe_customer_id) {
    const existingStripeCustomer = await stripe.customers.retrieve(
      existingSupabaseCustomer.stripe_customer_id
    );
    stripeCustomerId = existingStripeCustomer.id;
  } else {
    // If Stripe ID is missing from Supabase, try to retrieve Stripe customer ID by email
    const stripeCustomers = await stripe.customers.list({ email: email });
    stripeCustomerId =
      stripeCustomers.data.length > 0 ? stripeCustomers.data[0].id : undefined;
  }

  // If still no stripeCustomerId, create a new customer in Stripe
  const stripeIdToInsert = stripeCustomerId
    ? stripeCustomerId
    : await createCustomerInStripe(uuid, email);
  if (!stripeIdToInsert) throw new Error('Stripe customer creation failed.');

  if (existingSupabaseCustomer && stripeCustomerId) {
    // If Supabase has a record but doesn't match Stripe, update Supabase record
    if (existingSupabaseCustomer.stripe_customer_id !== stripeCustomerId) {
      const { error: updateError } = await supabaseAdmin
        .from('customers')
        .update({ stripe_customer_id: stripeCustomerId })
        .eq('id', uuid);

      if (updateError)
        throw new Error(
          `Supabase customer record update failed: ${updateError.message}`
        );
      console.warn(
        `Supabase customer record mismatched Stripe ID. Supabase record updated.`
      );
    }
    // If Supabase has a record and matches Stripe, return Stripe customer ID
    return stripeCustomerId;
  } else {
    console.warn(
      `Supabase customer record was missing. A new record was created.`
    );

    // If Supabase has no record, create a new record and return Stripe customer ID
    const upsertedStripeCustomer = await upsertCustomerToSupabase(
      uuid,
      stripeIdToInsert
    );
    if (!upsertedStripeCustomer)
      throw new Error('Supabase customer record creation failed.');

    return upsertedStripeCustomer;
  }
};

/**
 * Copies the billing details from the payment method to the customer object.
 */
const copyBillingDetailsToCustomer = async (
  uuid: string,
  payment_method: Stripe.PaymentMethod
) => {
  //Todo: check this assertion
  const customer = payment_method.customer as string;
  const { name, phone, address } = payment_method.billing_details;
  if (!name || !phone || !address) return;
  //@ts-ignore
  await stripe.customers.update(customer, { name, phone, address });
  const { error: updateError } = await supabaseAdmin
    .from('users')
    .update({
      billing_address: { ...address },
      payment_method: { ...payment_method[payment_method.type] }
    })
    .eq('id', uuid);
  if (updateError) throw new Error(`Customer update failed: ${updateError.message}`);
};

const manageSubscriptionStatusChange = async (
  subscriptionId: string,
  customerId: string,
  createAction = false
) => {
  // Get customer's UUID from mapping table.
  const { data: customerData, error: noCustomerError } = await supabaseAdmin
    .from('customers')
    .select('id')
    .eq('stripe_customer_id', customerId)
    .single();

  if (noCustomerError)
    throw new Error(`Customer lookup failed: ${noCustomerError.message}`);

  const { id: uuid } = customerData!;

  const subscription = await stripe.subscriptions.retrieve(subscriptionId, {
    expand: ['default_payment_method']
  });
  // Upsert the latest status of the subscription object.
  const subscriptionData: TablesInsert<'subscriptions'> = {
    id: subscription.id,
    user_id: uuid,
    metadata: subscription.metadata,
    status: subscription.status,
    price_id: subscription.items.data[0].price.id,
    //TODO check quantity on subscription
    // @ts-ignore
    quantity: subscription.quantity,
    cancel_at_period_end: subscription.cancel_at_period_end,
    cancel_at: subscription.cancel_at
      ? toDateTime(subscription.cancel_at).toISOString()
      : null,
    canceled_at: subscription.canceled_at
      ? toDateTime(subscription.canceled_at).toISOString()
      : null,
    current_period_start: toDateTime(
      subscription.current_period_start
    ).toISOString(),
    current_period_end: toDateTime(
      subscription.current_period_end
    ).toISOString(),
    created: toDateTime(subscription.created).toISOString(),
    ended_at: subscription.ended_at
      ? toDateTime(subscription.ended_at).toISOString()
      : null,
    trial_start: subscription.trial_start
      ? toDateTime(subscription.trial_start).toISOString()
      : null,
    trial_end: subscription.trial_end
      ? toDateTime(subscription.trial_end).toISOString()
      : null
  };

  const { error: upsertError } = await supabaseAdmin
    .from('subscriptions')
    .upsert([subscriptionData]);
  if (upsertError)
    throw new Error(`Subscription insert/update failed: ${upsertError.message}`);
  console.log(
    `Inserted/updated subscription [${subscription.id}] for user [${uuid}]`
  );

  // For a new subscription copy the billing details to the customer object.
  // NOTE: This is a costly operation and should happen at the very end.
  if (createAction && subscription.default_payment_method && uuid)
    //@ts-ignore
    await copyBillingDetailsToCustomer(
      uuid,
      subscription.default_payment_method as Stripe.PaymentMethod
    );
};

export {
  upsertProductRecord,
  upsertPriceRecord,
  deleteProductRecord,
  deletePriceRecord,
  createOrRetrieveCustomer,
  manageSubscriptionStatusChange
};

//queries.ts
import { SupabaseClient } from '@supabase/supabase-js';
import { cache } from 'react';

export const getUser = cache(async (supabase: SupabaseClient) => {
  const {
    data: { user }
  } = await supabase.auth.getUser();
  return user;
});

export const getSubscription = cache(async (supabase: SupabaseClient) => {
  const { data: subscription, error } = await supabase
    .from('subscriptions')
    .select('*, prices(*, products(*))')
    .in('status', ['trialing', 'active'])
    .maybeSingle();

  return subscription;
});

export const getProducts = cache(async (supabase: SupabaseClient) => {
  const { data: products, error } = await supabase
    .from('products')
    .select('*, prices(*)')
    .eq('active', true)
    .eq('prices.active', true)
    .order('metadata->index')
    .order('unit_amount', { referencedTable: 'prices' });

  return products;
});

export const getUserDetails = cache(async (supabase: SupabaseClient) => {
  const { data: userDetails } = await supabase
    .from('users')
    .select('*')
    .single();
  return userDetails;
});

5. Add Webhooks to Sync Your Database with Stripe

We haven't created our Stripe account yet, but be patient. Once we add our webhook and start listening to our app, our database will be synced with Stripe. All the products and prices added to our Stripe project will be reflected in our database.

This webhook ensures that Stripe can ping our app, and our app handles the necessary database synchronization. The code might seem intimidating at first, but all it does is listen for events and take action accordingly. For instance, when a product is created, we update our product table with the new product details.

Create a route.ts file under api/webhook or your preferred path. We will obtain the STRIPE_WEBHOOK_SECRET from Stripe in the next step.

// route.ts
import Stripe from 'stripe';
import { stripe } from '@/utils/stripe/config';
import {
  upsertProductRecord,
  upsertPriceRecord,
  manageSubscriptionStatusChange,
  deleteProductRecord,
  deletePriceRecord
} from '@/utils/supabase/admin';

const relevantEvents = new Set([
  'product.created',
  'product.updated',
  'product.deleted',
  'price.created',
  'price.updated',
  'price.deleted',
  'checkout.session.completed',
  'customer.subscription.created',
  'customer.subscription.updated',
  'customer.subscription.deleted'
]);

export async function POST(req: Request) {
  const body = await req.text();
  const sig = req.headers.get('stripe-signature') as string;
  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;
  let event: Stripe.Event;

  try {
    if (!sig || !webhookSecret)
      return new Response('Webhook secret not found.', { status: 400 });
    event = stripe.webhooks.constructEvent(body, sig, webhookSecret);
    console.log(`🔔  Webhook received: ${event.type}`);
  } catch (err: any) {
    console.log(`❌ Error message: ${err.message}`);
    return new Response(`Webhook Error: ${err.message}`, { status: 400 });
  }

  if (relevantEvents.has(event.type)) {
    try {
      switch (event.type) {
        case 'product.created':
        case 'product.updated':
          await upsertProductRecord(event.data.object as Stripe.Product);
          break;
        case 'price.created':
        case 'price.updated':
          await upsertPriceRecord(event.data.object as Stripe.Price);
          break;
        case 'price.deleted':
          await deletePriceRecord(event.data.object as Stripe.Price);
          break;
        case 'product.deleted':
          await deleteProductRecord(event.data.object as Stripe.Product);
          break;
        case 'customer.subscription.created':
        case 'customer.subscription.updated':
        case 'customer.subscription.deleted':
          const subscription = event.data.object as Stripe.Subscription;
          await manageSubscriptionStatusChange(
            subscription.id,
            subscription.customer as string,
            event.type === 'customer.subscription.created'
          );
          break;
        case 'checkout.session.completed':
          const checkoutSession = event.data.object as Stripe.Checkout.Session;
          if (checkoutSession.mode === 'subscription') {
            const subscriptionId = checkoutSession.subscription;
            await manageSubscriptionStatusChange(
              subscriptionId as string,
              checkoutSession.customer as string,
              true
            );
          }
          break;
        default:
          throw new Error('Unhandled relevant event!');
      }
    } catch (error) {
      console.log(error);
      return new Response(
        'Webhook handler failed. View your Next.js function logs.',
        {
          status: 400
        }
      );
    }
  } else {
    return new Response(`Unsupported event type: ${event.type}`, {
      status: 400
    });
  }
  return new Response(JSON.stringify({ received: true }));
}

6. Create Your Stripe Account and Connect the Webhook

Next, we'll configure Stripe to handle test payments. If you don’t have a Stripe account, create one now.

Once you're in the dashboard, ensure the "Test Mode" toggle is activated.

Go to the developers section and copy the Publishable Key and Secret Key into your .env variables. We will also obtain the Webhook Secret soon.

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<>
STRIPE_SECRET_KEY=<>
STRIPE_WEBHOOK_SECRET=<>

Download the Stripe CLI here: https://docs.stripe.com/stripe-cli
Navigate to the Stripe Developers tab and Webhooks. Open the "Test in local environment" tab.
1. Run stripe login in your terminal.
2. Copy the endpointSecret from the sample endpoint code and paste it into your .env variables as STRIPE_WEBHOOK_SECRET.
Run your app locally.
Start listening for events (adjust the link if necessary):
```
stripe listen --forward-to localhost:3000/api/webhook
```

Test the webhook by running a sample trigger:

stripe trigger payment_intent.succeeded

You should see output similar to the following in your console, indicating the webhook listener is working. Don’t worry about the 400 status code.

Stripe Console:
--> charge.succeeded []
--> payment_intent.succeeded []
--> payment_intent.created []
<-- [400] POST http://localhost:3000/api/webhooks []

7. Create Product and Price

Now that we have set up our webhook, we're ready to create our Stripe product and price. Ensure the webhook and development server are still running!

Go to the Stripe Dashboard.
Navigate to "Product Catalogue."
Click "Add Product."
Create a sample product for testing. In this example, I created a Recurring Monthly product.

Once the product is created, you should see webhook events being received by our server in the console. Check the Supabase tables to confirm that the new product and price have been added.

Good news! The backend is complete, and now we will move on to the front-end setup! 🚀🎉

8. Add Front-end to Test

I understand each app has its specific design style, so I’ll share example front-end code for testing. You can customize it to suit your needs.

First, we need a pricing page to view product options:

// page.tsx under the desired route, example: /pricing
import Pricing from '@/components/ui/Pricing/Pricing';
import { createClient } from '@/utils/supabase/server';
import {
  getProducts,
  getSubscription,
  getUser
} from '@/utils/supabase/queries';

export default async function PricingPage() {
  const supabase = createClient();
  const [user, products, subscription] = await Promise.all([
    getUser(supabase),
    getProducts(supabase),
    getSubscription(supabase)
  ]);

  return (
    <Pricing
      user={user}
      products={products ?? []}
      subscription={subscription}
    />
  );
}

You can use the example Pricing component here, but all we need is to map products and display them with a clickable button that triggers the checkout session: Example Pricing Component

// Sample Pricing.tsx
'use client';

import Button from '@/components/ui/Button';
import type { Tables } from '@/types_db';
import { getStripe } from '@/utils/stripe/client';
import { checkoutWithStripe } from '@/utils/stripe/server';
import { getErrorRedirect } from '@/utils/helpers';
import { User } from '@supabase/supabase-js';
import cn from 'classnames';
import { useRouter, usePathname } from 'next/navigation';
import { useState } from 'react';

type Subscription = Tables<'subscriptions'>;
type Product = Tables<'products'>;
type Price = Tables<'prices'>;
interface ProductWithPrices extends Product {
  prices: Price[];
}
interface PriceWithProduct extends Price {
  products: Product | null;
}
interface SubscriptionWithProduct extends Subscription {
  prices: PriceWithProduct | null;
}

interface Props {
  user: User | null | undefined;
  products: ProductWithPrices[];
  subscription: SubscriptionWithProduct | null;
}

export default function Pricing({ user, products, subscription }: Props) {
  const router = useRouter();
  const currentPath = usePathname();

  const handleStripeCheckout = async (price: Price) => {
    if (subscription) {
      return router.push('/account');
    }

    if (!user) {
      return router.push('/signin/signup');
    }

    const { errorRedirect, sessionId } = await checkoutWithStripe(
      price,
      currentPath
    );

    if (errorRedirect) {
      return router.push(errorRedirect);
    }

    if (!sessionId) {
      return router.push(
        getErrorRedirect(
          currentPath,
          'An unknown error occurred.',
          'Please try again later or contact a system administrator.'
        )
      );
    }

    const stripe = await getStripe();
    stripe?.redirectToCheckout({ sessionId });
  };

  if (!products.length) {
    return (
      <section className="bg-black">
        <div className="max-w-6xl px-4 py-8 mx-auto sm:py-24 sm:px-6 lg:px-8">
          <div className="sm:flex sm:flex-col sm:align-center"></div>
          <p className="text-4xl font-extrabold text-white sm:text-center sm:text-6xl">
            No subscription pricing plans found. Create them in your{' '}
            <a
              className="text-pink-500 underline"
              href="https://dashboard.stripe.com/products"
              rel="noopener noreferrer"
              target="_blank"
            >
              Stripe Dashboard
            </a>
            .
          </p>
        </div>
      </section>
    );
  } else {
    return (
      <section className="bg-black">
        <div className="mt-12 space-y-0 sm:mt-16 flex flex-wrap justify-center gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0">
          {products.map((product) => {
            const price = product?.prices[0]
            );
            if (!price) return null;
            const priceString = new Intl.NumberFormat('en-US', {
              style: 'currency',
              currency: price.currency!,
              minimumFractionDigits: 0
            }).format((price?.unit_amount || 0) / 100);
            return (
              <div
                key={product.id}
                className={cn(
                  'flex flex-col rounded-lg shadow-sm divide-y divide-zinc-600 bg-zinc-900',
                  {
                    'border border-pink-500': subscription
                      ? product.name === subscription?.prices?.products?.name
                      : product.name === 'Freelancer'
                  },
                  'flex-1', // This makes the flex item grow to fill the space
                  'basis-1/3', // Assuming you want each card to take up roughly a third of the container's width
                  'max-w-xs' // Sets a maximum width to the cards to prevent them from getting too large
                )}
              >
                <div className="p-6">
                  <h2 className="text-2xl font-semibold leading-6 text-white">
                    {product.name}
                  </h2>
                  <p className="mt-4 text-zinc-300">{product.description}</p>
                  <p className="mt-8">
                    <span className="text-5xl font-extrabold white">
                      {priceString}
                    </span>
                    <span className="text-base font-medium text-zinc-100">
                      /{billingInterval}
                    </span>
                  </p>
                  <button
                    onClick={() => handleStripeCheckout(price)}
                    className="block w-full py-2 mt-8 text-sm font-semibold text-center text-white rounded-md hover:bg-zinc-900"
                  >
                    {subscription ? 'Manage' : 'Subscribe'}
                  </Button>
                </div>
              </div>
            );
          })}
        </div>
      </section>
    );
  }
}

Finally, we will add the /account page:

// page.tsx
import CustomerPortalForm from '@/components/ui/AccountForms/CustomerPortalForm';
import { redirect } from 'next/navigation';
import { createClient } from '@/utils/supabase/server';
import {
  getSubscription,
  getUser
} from '@/utils/supabase/queries';

export default async function Account() {
  const supabase = createClient();
  const [user, subscription] = await Promise.all([
    getUser(supabase),
    getSubscription(supabase)
  ]);

  if (!user) {
    return redirect('/signin');
  }

  return (
    <section className="mb-32 bg-black">
      <div className="max-w-6xl px-4 py-8 mx-auto sm:px-6 sm:pt-24 lg:px-8">
        <div className="sm:align-center sm:flex sm:flex-col">
          <h1 className="text-4xl font-extrabold text-white sm:text-center sm:text-6xl">
            Account
          </h1>
          <p className="max-w-2xl m-auto mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl">
            We partnered with Stripe for a simplified billing.
          </p>
        </div>
      </div>
      <div className="p-4">
        <CustomerPortalForm subscription={subscription} />
      </div>
    </section>
  );
}

// CustomerPortalForm.tsx
'use client';

import { useRouter, usePathname } from 'next/navigation';
import { useState } from 'react';
import { createStripePortal } from '@/utils/stripe/server';
import Link from 'next/link';
import { Tables } from '@/types_db';

type Subscription = Tables<'subscriptions'>;
type Price = Tables<'prices'>;
type Product = Tables<'products'>;

type SubscriptionWithPriceAndProduct = Subscription & {
  prices:
    | (Price & {
        products: Product | null;
      })
    | null;
};

interface Props {
  subscription: SubscriptionWithPriceAndProduct | null;
}

export default function CustomerPortalForm({ subscription }: Props) {
  const router = useRouter();
  const currentPath = usePathname();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const subscriptionPrice =
    subscription &&
    new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: subscription?.prices?.currency!,
      minimumFractionDigits: 0
    }).format((subscription?.prices?.unit_amount || 0) / 100);

  const handleStripePortalRequest = async () => {
    setIsSubmitting(true);
    const redirectUrl = await createStripePortal(currentPath);
    setIsSubmitting(false);
    return router.push(redirectUrl);
  };

  return (
    <div className="p m-auto my-8 w-full max-w-3xl rounded-md border border-zinc-700">
      <div className="px-5 py-4">
        <h3 className="mb-1 text-2xl font-medium">Your Plan</h3>
        <p className="text-zinc-300">
          {subscription
            ? `You are currently on the ${subscription?.prices?.products?.name} plan.`
            : 'You are not currently subscribed to any plan.'}
        </p>
        <div className="mb-4 mt-8 text-xl font-semibold">
          {subscription ? (
            `${subscriptionPrice}/${subscription?.prices?.interval}`
          ) : (
            <Link href="/dev/stripe-example-page">Choose your plan</Link>
          )}
        </div>
      </div>

      <div className="rounded-b-md border-t border-zinc-700 bg-zinc-900 p-4 text-zinc-500">
        <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
          <p className="pb-4 sm:pb-0">Manage your subscription on Stripe.</p>
          <button onClick={handleStripePortalRequest} disabled={isSubmitting}>
            Open customer portal
          </Button>
        </div>
      </div>
    </div>
  );
}

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
Congratulations, you've made it! 🚀🚀🚀🚀🚀

You can now go to the /pricing page and purchase your plan using the dummy card below.

Your tables will be updated automatically, make sure the webhook event listener is still running!

Dummy Card Information:
Card Number: 4242 4242 4242 4242
Expiry Date: Any future date
CVC: Any 3-digit number

Let me know what you think and comment if there you have any suggestions to improve this as I am still working on improving this for our app, www.mindtrajour.com.

🌐 How to Change Time Zone in Google Chrome to Test Different Timezones

Alex Enes Zorlu — Wed, 26 Jun 2024 20:09:12 +0000

Have you ever wondered how your website or app behaves in different time zones? Maybe you’ve got users all around the globe, and you need to ensure everything works perfectly no matter where they are. Or you deployed your application and the time does not show as it is supposed to, even though it works locally. Then you update your code and don't know how you can simulate the server behavior? Well, good news! You don’t need to jet-set across time zones to test it out. With Google Chrome's Developer Tools, you can change the browser's time zone and test your site or app like a globe-trotting genius.

This is a short and brief tutorial that I wrote after having the exact same issue with my teammate. Let's dive into the world of time-travel testing! 🕰️✨

Why Testing Different Time Zones is Important

Imagine this: Your app is a big hit in your home country. Great! But what happens when it gains international users? Users in different time zones might face issues that you’ve never encountered before. Date and time bugs can cause significant problems, like missed appointments, incorrect timestamps, and erroneous calculations. Also, running your app on a server that’s in a different time zone than your users can lead to similar unexpected results. Testing in different time zones helps you catch these bugs before your users do!

Using Google Chrome Developer Tools to Change Timezone

Here's a simple step-by-step guide to change the time zone in Google Chrome for testing purposes:

Step 1: Open Developer Tools in Chrome

First things first, open Chrome and hit F12 or right-click anywhere on the page and select "Inspect". This will open the Developer Tools panel.

Step 2: Open the Console Drawer and Sensors

Now that you have the Developer Tools open, look for the three vertical dots in the top right corner of the panel. Click on them and select “More tools” -> “Sensors”.

Step 3: Set Your Location and Timezone

In the Sensors tab, you will see a section labeled "Location". Here you can set your location by choosing a predefined city or entering custom coordinates. More importantly, you can change the time zone to whatever you need for testing.

And voilà! You’ve just time-traveled in Chrome. Now you can test how your app behaves in any time zone. Cool, right? 😎 Plus, it’s super easy!

So next time you need to test your app’s behavior in different time zones, remember this little trick. Happy testing, time traveler!

Do you have any other cool testing tricks up your sleeve? Share them in the comments!

Is Turkiye Ready for Digital Nomads and Indie Makers?

Alex Enes Zorlu — Tue, 18 Jun 2024 18:40:36 +0000

I recently saw a tweet by John Rush comparing Turkey and Portugal as potential destinations for indie makers. His insights inspired me to write this article.

Turkiye is often overlooked as a prime destination for digital nomads and indie makers due to outdated perceptions. Despite its strategic location, cultural richness, and affordability, various issues hinder its potential to become a top choice for remote workers and creative entrepreneurs. In this article, we will explore the current branding challenges, economic struggles, poor infrastructure, and inadequate English education. Additionally, we will highlight the advantages of Turkey, such as its locational benefits, excellent weather, cosmopolitan structure, vibrant culture, and young population. Finally, we will discuss possible solutions to these challenges and the outcomes they could bring.

Current Challenges

Poor Branding

Turkey suffers from a negative global image, often perceived as a third-world country plagued by political instability and safety concerns. This outdated perception deters potential digital nomads and indie makers, overshadowing the nation's true potential as a creative and entrepreneurial hub, especially due to political instability and how Turkish government advertise Turkey in global arena.

Economic Struggles

The Turkish economy has faced significant challenges in recent years, including high inflation and currency devaluation. These economic issues make it difficult for remote workers and indie makers to plan long-term stays and maintain a stable standard of living. It is just challenging to set long term plans due to volatile market.

Poor Infrastructure

Despite some improvements, Turkey's infrastructure still lags behind many other countries. Issues with transportation, utilities, and telecommunications can pose significant hurdles for digital nomads and indie makers looking to establish operations or work remotely. Especially in rural areas, fast internet connection is still a challenge.

Inadequate English Education

English proficiency is relatively low in Turkey, which can be a significant barrier for digital nomads and indie makers. Effective communication is crucial for networking, business operations, and daily interactions, and the lack of English speakers can hinder both personal and professional integration.

Advantages of Turkey

After talking about all of above cons, we should also remember all of the positives about this country.

Strategic Location

Turkey's location at the crossroads of Europe and Asia offers significant logistical advantages for digital nomads and indie makers looking to access multiple markets. Its proximity to both the European Union and the Middle East makes it an attractive hub for international collaboration and travel.

Excellent Weather

Turkey boasts a diverse climate, with coastal regions enjoying Mediterranean weather and inland areas experiencing a more temperate climate. This favorable weather is a significant draw for digital nomads and indie makers seeking a comfortable living environment.

Cosmopolitan Structure

Major cities like Istanbul, Ankara, and Izmir offer a cosmopolitan lifestyle with a mix of modern amenities and rich cultural heritage. These cities provide a blend of Eastern and Western influences, making them attractive to digital nomads and indie makers.

Rich Culture and Food

Turkey's cultural richness and diverse culinary offerings are significant draws for digital nomads and indie makers. The country's history, traditions, and cuisine offer a unique and enriching experience for those living or traveling there.

Young Population

Turkey has a young and dynamic population, providing a large talent pool and potential for innovation. This demographic advantage can be a significant asset for indie makers looking to recruit energetic and skilled collaborators.

Vibrant Nightlife and Hobbies

The young population contributes to a vibrant nightlife and various recreational activities. From bustling nightclubs to serene coastal towns, Turkey offers a wide range of options for entertainment and hobbies, making it an appealing destination for digital nomads.

What can be done?

Rebranding Efforts

To change outdated perceptions, Turkey needs a comprehensive rebranding strategy. This could involve international marketing campaigns highlighting the country's strengths, such as its cultural heritage, modern amenities, and strategic location. Emphasizing Turkey's potential as a hub for digital nomads and indie makers can attract more interest from the global remote work community.

Economic Reforms

Addressing economic challenges requires significant reforms to stabilize the currency, control inflation, and create a more business-friendly environment. Improving economic stability will make Turkey more attractive to digital nomads and indie makers seeking a stable and affordable place to live and work.

Infrastructure Development

Investing in infrastructure improvements, particularly in infrastructure and telecommunications, will enhance Turkey's appeal to remote workers and indie makers. Modern and reliable infrastructure is crucial for efficient operations and connectivity, essential for digital nomads.

Enhancing English Education

Improving English education across the country can help bridge the communication gap for digital nomads and indie makers. This could involve policy changes in education but I think this will develop naturally once more internationals move to Turkey.

Conclusion

Turkey has immense potential as a destination for digital nomads and indie makers. However, to unlock this potential, the country must address its current branding issues, economic struggles, infrastructure deficits, and inadequate English education. By implementing targeted solutions, Turkey can rebrand itself and attract more international interest, transforming itself into a prime option for remote workers and creative entrepreneurs. Maybe in 4 years...

📚 How to Handle Multiple MSW Handlers in Storybook Stories

Alex Enes Zorlu — Thu, 13 Jun 2024 22:27:37 +0000

Handling multiple states in Storybook stories can often be problematic, especially when different handlers are required to simulate various states. This tutorial will guide you through the process of managing these handlers effectively to ensure each story showcases the correct state without persistent issues.

1. Problem Overview

When using multiple handlers to showcase different states in a Storybook story, the first handler persists, leading to incorrect states being displayed. This often requires manually reloading the page to reset the handlers, which is not an ideal solution. We will solve this issue by implementing a custom decorator to force reload the story.

2. What is Storybook and MSW?

Storybook is an open-source tool for developing UI components in isolation for frameworks like React, Vue, and Angular. It streamlines UI development, testing, and documentation by allowing developers to create and visualize components in a dedicated environment, independent of the main application. This enables more efficient debugging, testing, and showcasing of individual components, leading to a more robust and maintainable codebase. Aka a fancy component library tailored to your project or organisation.

MSW (Mock Service Worker) is a powerful tool for mocking API requests in both client-side and server-side applications. It intercepts network requests at the network layer, allowing developers to simulate different responses and states such as loading, error, and success. By integrating MSW with Storybook, developers can create realistic scenarios for their components, ensuring comprehensive testing and consistent behavior across different states.

3. Creating a basic React Component

Let's start by creating a simple CardList component that fetches data and handles loading, error, and empty data states.



import React, { useEffect, useState } from 'react';

const CardList = () => {
  const [cards, setCards] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/cards')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setCards(data.cards);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (cards.length === 0) {
    return <div>No cards available</div>;
  }

  return (
    <div className="card-list">
      {cards.map((card) => (
        <div key={card.id} className="card">
          <h2>{card.title}</h2>
          <p>{card.description}</p>
        </div>
      ))}
    </div>
  );
};

export default CardList;

4. Creating a Basic Story

Next, we will create a basic Storybook configuration for our CardList component.



import { StoryObj } from '@storybook/react';
import CardList from './CardList';

const meta = {
  title: 'Components/CardList',
  component: CardList,
};

export default meta;

type Story = StoryObj<typeof CardList>;

export const Default: Story = {};

5. Implementing MSW Mock

To simulate data fetching, we will implement msw mocks for our Default story. This will enable us to setup a mock server which will respond to fetch requests in our component, therefore we will see mock data in our story.

**Note: **MSW Addon needs to be setup correctly for this to work, please refer to Storybook MSW Addon



import { rest } from 'msw';

const handlers = {
  success: [
    rest.get('/api/cards', (req, res, ctx) => {
      return res(
        ctx.json({
          cards: [
            { id: '1', title: 'Card 1', description: 'Description 1' },
            { id: '2', title: 'Card 2', description: 'Description 2' },
          ],
        })
      );
    }),
  ],
};

export const Default: Story = {
  parameters: {
    msw: handlers.success,
  },
};

6. Adding Other Handlers and Stories

Of course only adding default state is not enough, we want to see all of the possible states in Storybook. You might be wondering, how? Exactly same as we did before, more handlers more fun!

We will now add additional handlers and corresponding stories to simulate various states.



const handlers = {
  success: [
    rest.get('/api/cards', (req, res, ctx) => {
      return res(
        ctx.json({
          cards: [
            { id: '1', title: 'Card 1', description: 'Description 1' },
            { id: '2', title: 'Card 2', description: 'Description 2' },
          ],
        })
      );
    }),
  ],
  empty: [
    rest.get('/api/cards', (req, res, ctx) => {
      return res(ctx.json({ cards: [] }));
    }),
  ],
  loading: [
    rest.get('/api/cards', (req, res, ctx) => {
      return res(ctx.delay('infinite'));
    }),
  ],
  serverError: [
    rest.get('/api/cards', (req, res, ctx) => {
      return res(ctx.status(500));
    }),
  ],
};

export const Empty: Story = {
  parameters: {
    msw: handlers.empty,
  },
};

export const Loading: Story = {
  parameters: {
    msw: handlers.loading,
  },
};

export const ServerError: Story = {
  parameters: {
    msw: handlers.serverError,
  },
};

7. Problem Explanation

But wait, does this work? Partially... When using multiple handlers to showcase different states in a Storybook story, the first handler persists, leading to incorrect states being displayed. This often requires manually reloading the page to reset the handlers, which is not an ideal solution!

8. Fixing the Problem with forceReloadDecorator

Of course, I did not write this article to talk about problems. We are here to solve problems baby! To solve the problem of handlers persisting across different stories, we will create a custom decorator that forces a reload. Feels bit rogue, bit hacky.. but you know what, it works better than any other over-engineered solution out there.

Now when switching between the stories, story container will be reloaded very quickly. This will trigger re-initialisation of handlers and solve our problem.



const forceReloadDecorator = (storyFn, context) => {
  if (context.globals.shouldReload) {
    context.globals.shouldReload = false;
    window.location.reload();
  }
  context.globals.shouldReload = true;
  return storyFn();
};

const meta = {
  title: 'Components/CardList',
  component: CardList,
  decorators: [forceReloadDecorator],
};

export default meta;

To ensure the implementation works, run your Storybook and navigate through the different stories. Each story should now reflect the correct state without persisting the handlers from previous stories.

In this tutorial, we addressed the issue of persistent handlers in Storybook stories and implemented a solution using a force reload decorator. This approach ensures that each story displays the correct state, improving the development and testing experience.

DEV Community: Alex Enes Zorlu

How to Add Product Tours to Next.js Applications

How to Add Product Tours to Next.js Applications

🗂️ Table of Contents

Introduction

Why Add Product Tours?

Step by Step Setup

Step 1: Install the NextStepJS Library

Step 2: Add NextStep to Tailwindcss Config

Step 3: Initialise NextStep in Your App

Step 4: Define Your Product Tour Steps

Step 5: Start your tour using useNextStep hook

Conclusion

NextStep: Lightweight Onboarding Wizard for Next.js 🚀

How to Implement Google Tag Manager and Analytics in Next.js

Table of Contents

Installation

Creating a Cookie Consent Component

Adding the Component to Your Layout

Sending Custom Events

Configuring Google Tag Manager

Setting Environment Variables

Conclusion

Next.js-Supabase Stripe Subscriptions Integration

Next.js-Supabase Stripe Subscriptions Integration

Table of Contents

Prerequisites

1. Create Required Tables in Supabase

2. Get Supabase Service Role Key

3. Add Required Packages

4. Setup Stripe Code Locally

5. Add Webhooks to Sync Your Database with Stripe

6. Create Your Stripe Account and Connect the Webhook

7. Create Product and Price

8. Add Front-end to Test

🌐 How to Change Time Zone in Google Chrome to Test Different Timezones

Why Testing Different Time Zones is Important

Using Google Chrome Developer Tools to Change Timezone

Step 1: Open Developer Tools in Chrome

Step 2: Open the Console Drawer and Sensors

Step 3: Set Your Location and Timezone

Is Turkiye Ready for Digital Nomads and Indie Makers?

Current Challenges

Poor Branding

Economic Struggles

Poor Infrastructure

Inadequate English Education

Advantages of Turkey

Strategic Location

Excellent Weather

Cosmopolitan Structure

Rich Culture and Food

Young Population

Vibrant Nightlife and Hobbies

What can be done?

Rebranding Efforts

Economic Reforms

Infrastructure Development

Enhancing English Education

Conclusion

📚 How to Handle Multiple MSW Handlers in Storybook Stories

1. Problem Overview

2. What is Storybook and MSW?

3. Creating a basic React Component

4. Creating a Basic Story

5. Implementing MSW Mock

6. Adding Other Handlers and Stories

7. Problem Explanation

8. Fixing the Problem with forceReloadDecorator

Further Reading