-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Add response api link to docs navbar #1918
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎ |
Thank you for following the naming conventions for pull request titles! 🙏 |
packages/ui/PricingCard/index.tsxThe current implementation of the PricingCard component has a complex conditional rendering logic which makes it hard to understand. It would be better to break down the logic into smaller, more manageable functions. This will make the code easier to read and maintain. const renderSubscriptionStatus = () => {
const feature = team.billing.features[featureNameKey];
if (feature.status === "active") {
if (feature.unlimited) {
return <Badge text="Unlimited" size="normal" type="success" />;
} else {
return (
<>
<Badge text="Subscribed" size="normal" type="success" />
<Button
variant="secondary"
onClick={(e) => onUbsubscribe(e)}
className="absolute right-12 top-10">
Unsubscribe
</Button>
</>
);
}
} else if (feature.status === "cancelled") {
return <Badge text="Cancelling at End of this Month" size="normal" type="warning" />;
}
return null;
};
// Then use this function in the JSX
{renderSubscriptionStatus()}
The current implementation of the PricingCard component has a complex conditional rendering logic for the pricing information. It would be better to extract this logic into a separate function. This will make the code easier to read and maintain. const renderPricingInfo = () => {
const feature = team.billing.features[featureNameKey];
if (feature.status !== "inactive") {
if (perMetricCharge) {
return (
<>
<span className="text-sm font-medium text-slate-400">Approximately</span>
<br />
<span className="text-3xl font-bold text-slate-800">$</span>
<span className="text-3xl font-bold text-slate-800">
{(sliderValue! > freeTierLimit!
? (sliderValue! - freeTierLimit!) * perMetricCharge
: 0
).toFixed(2)}
</span>
<br />
<span className="text-sm font-medium text-slate-400">Month-to-Date</span>
</>
);
} else {
return (
<>
<span className="text-3xl font-bold text-slate-800">${monthlyPrice}</span>
<span className="text-base font-medium text-slate-400">/ month</span>
</>
);
}
} else {
return (
<div>
<span className="text-sm font-medium text-slate-400">{actionText}</span>
<br />
<span className="text-3xl font-bold text-slate-800">${monthlyPrice}</span>
<span className="text-base font-medium text-slate-400">/ month</span>
</div>
);
}
};
// Then use this function in the JSX
{renderPricingInfo()}
The current implementation of the PricingCard component has a complex conditional rendering logic for the upgrade button. It would be better to extract this logic into a separate function. This will make the code easier to read and maintain. const renderUpgradeButton = () => {
const feature = team.billing.features[featureNameKey];
if (feature.status === "inactive") {
return (
<Button
variant="darkCTA"
className="w-full justify-center py-2 text-white shadow-sm"
loading={loading}
onClick={() => onUpgrade()}>
Upgrade
</Button>
);
}
return null;
};
// Then use this function in the JSX
{renderUpgradeButton()}
|
fixes #1917