fix: make pricing pages consistent

[ShubhamPalriwala]

What does this PR do?

Fixes #1565

Type of change

• Bug fix (non-breaking change which fixes an issue)

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)		Nov 3, 2023 9:03am
formbricks-com	⬜️ Ignored (Inspect)		Nov 3, 2023 9:03am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/web/app/(app)/environments/[environmentId]/settings/billing/components/PricingTable.tsx

There is a repetition of the same code block for setting the state of loadingCustomerPortal to true. This can be refactored to improve the readability of the code.
Create Issue

    const openCustomerPortal = async () => {
      setLoadingCustomerPortal(true);
      const sessionUrl = await manageSubscriptionAction(team.id, environmentId);
      router.push(sessionUrl);
    };

The error handling in the handleDeleteSubscription function can be improved by logging the error message. This will help in debugging and identifying the root cause of the error.
Create Issue

    const handleDeleteSubscription = async () => {
      try {
        if (!activeLookupKey) throw new Error("No active lookup key");
        await removeSubscriptionAction(team.id, environmentId, [activeLookupKey]);
        router.refresh();
        toast.success("Subscription deleted successfully");
      } catch (err) {
        console.error(err.message);
        toast.error("Unable to delete subscription");
      } finally {
        setOpenDeleteModal(false);
      }
    };

The paidFeatures prop in the PricingCard component can be refactored to improve readability. Instead of using a filter method inside the prop, you can create a variable before the return statement and use that variable as the prop value.
Create Issue

    const paidFeaturesInAppSurvey = coreAndWebAppSurveyFeatures.filter((feature) => {
      if (team.billing.features.inAppSurvey.unlimited) {
        return feature.unlimited !== false;
      } else {
        return feature.unlimited !== true;
      }
    });

    // In the return statement
    <PricingCard
      ...
      paidFeatures={paidFeaturesInAppSurvey}
      ...
    />