Pricing Page

The Pricing component is the core of the Rifbid platform’s subscription management system, allowing users to explore subscription plans, toggle between payment frequencies, and view features tailored to their needs. It integrates seamlessly with Firebase for authentication and uses dynamic rendering to display relevant plans and pricing options.

---

Features

• Dynamic Plan Management:
  • Fetches subscription plans from an API and merges them with enterprise tiers.
  • Allows users to filter plans by subscription frequency (monthly/annually).
• Plan Details:
  • Displays features, pricing, and descriptions for each subscription tier.
  • Highlights the current user’s subscription plan.
• Interactive UI:
  • Includes a responsive plan slider to showcase available plans.
  • Allows toggling between monthly and annual billing options.
• Enterprise Plans:
  • Displays custom enterprise plans with premium features for high-end users.
• Loading State:
  • Displays a loader while fetching plans, ensuring a smooth user experience.

---

Usage

The Pricing component is rendered on the Pricing page, where users can view and select from various subscription plans. It provides dynamic updates based on user authentication and integrates features such as payment frequencies and enterprise-level plans.

---

Component Breakdown

Pricing Tier Frequency

Defines the options for subscription frequencies (e.g., monthly or annually).

export const frequencies: PricingTierFrequency[] = [
  { id: "1", value: "1", label: "Monthly", priceSuffix: "/month" },
  { id: "2", value: "2", label: "Annually", priceSuffix: "/year" },
];

Dynamic Plan Fetching

Fetches subscription plans from an external API and combines them with enterprise tiers. This ensures that both standard and enterprise plans are displayed dynamically.

useEffect(() => {
  const getPlans = async () => {
    try {
      setLoading(true);
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_URL}/plans`
      );
      //@ts-ignore
      setPlans([...response.data, ...enterpriseTiers]);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  getPlans();
}, []);

Payment Frequency Toggle Allows users to toggle between monthly and annual billing frequencies using an interactive UI.

<div role="radiogroup" className="grid gap-x-1 rounded-full bg-white p-1">
  {frequencies.map((option) => (
    <label
      className={cn(
        frequency.value === option.value
          ? "bg-green text-white"
          : "text-gray-500 bg-transparent hover:bg-slate-500/10",
        "cursor-pointer rounded-full px-2.5 py-2 transition-all"
      )}
      key={option.value}
      htmlFor={option.value}
    >
      {option.label}

      <button
        value={option.value}
        id={option.value}
        className="hidden"
        role="radio"
        aria-checked={frequency.value === option.value}
        onClick={(e) => {
          e.preventDefault();
          setFrequency(
            frequencies.find((f) => f.value === option.value) as PricingTierFrequency
          );
        }}
      >
        {option.label}
      </button>
    </label>
  ))}
</div>

Additional Notes

• Scalability: The dynamic fetching and filtering of plans make it easy to add new subscription tiers without modifying the core code structure.
• Customization: Enterprise tiers and payment frequencies can be easily updated or extended.
• Performance: The loading state (BigLoader) ensures smooth transitions while fetching data from the API.