The PricingTable component in goobs-frontend is a comprehensive and customizable component for displaying pricing information. It's designed to showcase different pricing tiers, features, and call-to-action buttons in a clear and organized manner.

To use the PricingTable component in your project, import it from the goobs-frontend package:

import { PricingTable } from 'goobs-frontend';

Here's a basic example of how to use the PricingTable component:

import React from 'react';
import { PricingTable } from 'goobs-frontend';

const PricingTableExample: React.FC = () => {
  const pricingData = {
    headerGridConfig: {
      gridname: 'pricingtableheader',
      alignment: 'center',
      gridwidth: '100%',
    },
    tabletitle: {
      text: 'Choose Your Plan',
      columnconfig: {
        row: 1,
        column: 1,
        alignment: 'center',
      },
    },
    packagecolumns: {
      packagenames: ['Basic', 'Pro', 'Enterprise'],
      columnconfig: {
        row: 2,
        column: 1,
        alignment: 'center',
      },
    },
    monthlyprice: {
      prices: ['$9.99/mo', '$19.99/mo', '$29.99/mo'],
      columnconfig: {
        row: 3,
        column: 1,
        alignment: 'center',
      },
    },
    features: [
      {
        title: 'Users',
        subfeatures: [
          { title: '1 User', tiedtopackage: { tiedtopackages: ['true', 'true', 'true'] } },
          { title: '5 Users', tiedtopackage: { tiedtopackages: ['false', 'true', 'true'] } },
          { title: 'Unlimited Users', tiedtopackage: { tiedtopackages: ['false', 'false', 'true'] } },
        ],
      },
      // Add more features as needed
    ],
    buttoncolumns: {
      buttontexts: ['Choose Basic', 'Choose Pro', 'Choose Enterprise'],
      buttonlinks: ['/basic', '/pro', '/enterprise'],
      columnconfig: {
        row: 4,
        column: 1,
        alignment: 'center',
      },
    },
  };

  return <PricingTable {...pricingData} />;
};

export default PricingTableExample;

The PricingTable component accepts the following main props:

• headerGridConfig: gridconfig - Configuration for the header grid layout.
• tabletitle: object - Configuration for the table title.
• packagecolumns: object - Configuration for package columns.
• monthlyprice: object - Configuration for monthly pricing display.
• annualprice: object - Configuration for annual pricing display.
• featureGridConfig: gridconfig - Configuration for the feature grid layout.
• features: Feature[] - Array of features and their configurations.
• buttoncolumns: object - Configuration for action buttons.

Each of these props can have its own set of sub-properties for fine-grained control over the pricing table's appearance and behavior.

1. Flexible Layout: Supports both header and feature grids for organized display.
2. Multiple Pricing Tiers: Can display multiple pricing packages side by side.
3. Feature Comparison: Allows for detailed feature comparisons across different tiers.
4. Customizable Styling: Supports custom colors, alignments, and layouts.
5. Call-to-Action Buttons: Includes configurable buttons for each pricing tier.
6. Responsive Design: Adapts to different screen sizes for optimal viewing.

You can use the PricingTable component with dynamic data and state management:

import React, { useState, useEffect } from 'react';
import { PricingTable } from 'goobs-frontend';

const DynamicPricingTableExample: React.FC = () => {
  const [pricingData, setPricingData] = useState(null);
  const [selectedPackage, setSelectedPackage] = useState(null);

  useEffect(() => {
    // Simulating API call to fetch pricing data
    const fetchPricingData = async () => {
      const response = await fetch('https://api.example.com/pricing');
      const data = await response.json();
      setPricingData(data);
    };

    fetchPricingData();
  }, []);

  const handlePackageSelection = (packageName) => {
    setSelectedPackage(packageName);
    // Additional logic for package selection
  };

  if (!pricingData) {
    return <div>Loading pricing information...</div>;
  }

  return (
    <div>
      <PricingTable
        {...pricingData}
        buttoncolumns={{
          ...pricingData.buttoncolumns,
          onClick: handlePackageSelection,
        }}
      />
      {selectedPackage && (
        <div>You have selected the {selectedPackage} package.</div>
      )}
    </div>
  );
};

export default DynamicPricingTableExample;

You can customize the appearance of the PricingTable component using Material-UI's theming capabilities:

import React from 'react';
import { PricingTable } from 'goobs-frontend';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const CustomThemedPricingTableExample: React.FC = () => {
  const theme = createTheme({
    palette: {
      primary: {
        main: '#1976d2',
      },
      secondary: {
        main: '#dc004e',
      },
    },
    typography: {
      fontFamily: 'Roboto, Arial, sans-serif',
    },
  });

  const pricingData = {
    // ... your pricing data configuration
  };

  return (
    <ThemeProvider theme={theme}>
      <PricingTable {...pricingData} />
    </ThemeProvider>
  );
};

export default CustomThemedPricingTableExample;

The PricingTable component is designed with accessibility in mind:

• It uses semantic HTML elements for proper structure.
• Includes proper ARIA attributes for screen readers.
• Supports keyboard navigation for interactive elements.

To further enhance accessibility:

1. Ensure that color contrasts meet WCAG standards.
2. Provide clear and descriptive text for features and pricing information.
3. Use aria-labels for any icons or non-text elements.

1. Clear Pricing: Ensure that pricing information is clear and easy to understand.
2. Feature Highlights: Clearly highlight the key features that differentiate each pricing tier.
3. Responsive Design: Test the pricing table on various screen sizes to ensure readability.
4. Call-to-Action: Make sure the call-to-action buttons are prominent and clearly labeled.
5. Consistency: Maintain consistent styling and information structure across all pricing tiers.

The PricingTable component can become complex with many features and tiers. Keep in mind:

• For large pricing tables, consider implementing virtualization for better performance.
• Optimize any images or icons used in the pricing table.
• If the pricing data is dynamic, implement efficient state management and memoization techniques.

1. Layout Issues: Ensure that your grid configurations are correct and consistent across all elements.
2. Styling Problems: Check for any conflicting styles or theme overrides.
3. Feature Display: Verify that the tiedtopackages arrays correctly correspond to your pricing tiers.
4. Button Functionality: Ensure that button links or onClick handlers are correctly configured.

By leveraging these features and following the best practices, you can create informative and visually appealing pricing tables in your goobs-frontend projects using the PricingTable component.