PricingTable Module

Overview

The PricingTable module is a flexible component for displaying pricing plans. This module allows you to present different pricing tiers, highlight popular plans, and showcase features for each plan. It's fully customizable, allowing you to modify the colors, text, and plan details to match your specific requirements.

Location

The source code for the PricingTable module can be found in the /modules/native/PricingTable.js file.

Usage

The PricingTable module is highly customizable through props. While most props have default values, they can be easily overridden to tailor the module to your specific requirements.

Props

1. `sectionColors`

Default Value:

const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground",
    tableBackground: "bg-background",
    tableForeground: "text-foreground",
    popularTableBackground: "bg-accent",
    popularTableForeground: "text-accent-foreground",
    hasFeatureFalse: "text-gray-400"
}

Description: The sectionColors prop allows you to customize the colors of various elements in the pricing table.
Property Descriptions:
- background: Sets the background color of the entire pricing section.
- foreground: Sets the text color for the main content in the pricing section.
- tableBackground: Sets the background color for individual pricing plan tables.
- tableForeground: Sets the text color for content within pricing plan tables.
- popularTableBackground: Sets the background color for the table marked as "popular".
- popularTableForeground: Sets the text color for the content in the "popular" table.
- hasFeatureFalse: Sets the color for features that are not included in a plan.
Additional Notes:
- bg-accent, text-accent-foreground, etc., are theme colors. For more information, refer to the documentation: Theming.
- You can easily swap main and accent colors. Just apply accent colors by setting background: "bg-accent" and foreground: "text-accent-foreground".
- If you want to use your own colors and maintain dark mode support, you can specify classes like bg-white dark:bg-black to ensure the color changes appropriately based on the theme.
- The sectionColors object can be partially updated with props. For example, if you only want to change the background color while keeping other defaults, you can do it like this:
```
<PricingTable 
    sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700" 
    }}
/>
```

2. `text`

Default Value:

const defaultText = {
  heading: "Save Weeks of Development Work",
  description: "Get $100 Off (17 Left)",
  isPopularText: "Popular"
}

Description: The text prop allows you to customize the main heading and description text for the pricing section.
Property Descriptions:
- heading: Sets the main heading text for the pricing section.
- description: Sets the description text, typically used for promotional messages.
- isPopularText: Sets the tag text displayed above the popular table.
Additional Notes:
- You can customize the text content to match your brand's tone and messaging.
- If you do not pass any text prop, the default heading and description will be used.
- The text object can be partially updated with props. If you want, you can change the heading text while keeping the default description.

3. `planDetails`

Default Value:
```
settings.PLAN_DETAILS
```
Description: The planDetails prop allows you to define the specific details for each pricing plan.
Property Descriptions:
- PLAN_DETAILS is to be configured in settings.js file.
- The settings.js file, located at /settings.js, serves as the central configuration file for your StartupBolt application. This file contains various settings that control different aspects of your app, enabling easy customization and management of your project's core parameters.
- To learn more about configuring PLAN_DETAILS, refer to the relevant guide for your payment provider:
  - Stripe Guide
  - LemonSqueezy Guide
Additional Notes:
- If not provided, the component will default to using the PLAN_DETAILS from the settings.js file.
- If the planDetails prop is provided, it must reference only the objects defined in settings.PLAN_DETAILS. Specific payment plans should be retrieved from settings.js using their respective indexes, such as settings.PLAN_DETAILS[0] or settings.PLAN_DETAILS[2]. Building the planDetails prop using an object that is not present in the settings.PLAN_DETAILS array is not allowed, as the Stripe webhook requires that the payment object is validated within the settings file.
- This prop allows for flexibility, enabling you to have different pricing plans for various landing pages or scenarios.

Usage Example without Props

To use the PricingTable module with all default settings, you can include it in your page as follows:

import PricingTable from "@/modules/native/PricingTable";
 
const MyPage = () => {
  return (
    <PricingTable />
  );
}
 
export default MyPage;

This example will render the pricing table with default colors, text, and plan details as defined in the settings.PLAN_DETAILS.

Usage Example with Props

Here's an example demonstrating how to customize the PricingTable module with props:

import PricingTable from "@/modules/native/PricingTable";
import settings from '@/settings';
 
const MyCustomPricingPage = () => {
  const customColors = {
    background: "bg-blue-100 dark:bg-blue-900",
    foreground: "text-blue-900 dark:text-blue-100",
    popularTableBackground: "bg-blue-500",
    popularTableForeground: "text-white",
  };
 
  const customText = {
    heading: "Choose the Perfect Plan for Your Business",
    description: "Limited Time Offer: 30% Off All Plans",
  };
 
  const customPlanDetails = [
    settings.PLAN_DETAILS[0],
    settings.PLAN_DETAILS[2],
    // Add more as needed using settings.PLAN_DETAILS[x]
  ];
 
  return (
    <PricingTable 
      sectionColors={customColors}
      text={customText}
      planDetails={customPlanDetails}
    />
  );
}
 
export default MyCustomPricingPage;

In this example:

We're customizing the background and text colors, including a special style for the popular plan.
We've updated the main heading and description text.
We've defined custom plan details, including features and payment information.

Conclusion

The PricingTable module offers a high degree of customization, allowing you to create a pricing section that perfectly matches your brand and pricing strategy. By leveraging the various props, you can easily adjust colors, text, and plan details to create a compelling pricing page for your product or service.

PayButton TypingCTA