zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: bump version to 3.0.2 in package.json and standardize string quotes in pricing-table.tsx (#465)

Browse Source
This commit is contained in:
Giancarlo Buomprisco
2026-03-24 17:18:25 +08:00
committed by GitHub
parent f9dfdf3ac8
commit 5dc5ee8f08
2 changed files with 78 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "next-supabase-saas-kit-turbo", "name": "next-supabase-saas-kit-turbo",
"version": "3.0.1", "version": "3.0.2",
"private": true, "private": true,
"author": { "author": {
"name": "MakerKit", "name": "MakerKit",

154
packages/billing/gateway/src/components/pricing-table.tsx
View File

@@ -1,34 +1,34 @@
'use client'; "use client";
import { useState } from 'react'; import { useState } from "react";
import Link from 'next/link'; import Link from "next/link";
import { ArrowRight, CheckCircle } from 'lucide-react'; import { ArrowRight, CheckCircle } from "lucide-react";
import { useTranslations } from 'next-intl'; import { useTranslations } from "next-intl";
import * as z from 'zod'; import * as z from "zod";
import { import {
BillingConfig, BillingConfig,
type LineItemSchema, type LineItemSchema,
getPlanIntervals, getPlanIntervals,
getPrimaryLineItem, getPrimaryLineItem,
} from '@kit/billing'; } from "@kit/billing";
import { Badge } from '@kit/ui/badge'; import { Badge } from "@kit/ui/badge";
import { Button } from '@kit/ui/button'; import { Button } from "@kit/ui/button";
import { If } from '@kit/ui/if'; import { If } from "@kit/ui/if";
import { Trans } from '@kit/ui/trans'; import { Trans } from "@kit/ui/trans";
import { cn } from '@kit/ui/utils'; import { cn } from "@kit/ui/utils";
import { LineItemDetails } from './line-item-details'; import { LineItemDetails } from "./line-item-details";
import { PlanCostDisplay } from './plan-cost-display'; import { PlanCostDisplay } from "./plan-cost-display";
interface Paths { interface Paths {
signUp: string; signUp: string;
return: string; return: string;
} }
type Interval = 'month' | 'year'; type Interval = "month" | "year";
export function PricingTable({ export function PricingTable({
config, config,
@@ -57,8 +57,8 @@ export function PricingTable({
const visibleProducts = config.products.filter((product) => !product.hidden); const visibleProducts = config.products.filter((product) => !product.hidden);
return ( return (
<div className={'flex flex-col space-y-8 xl:space-y-12'}> <div className={"flex flex-col space-y-8 xl:space-y-12"}>
<div className={'flex justify-center'}> <div className={"flex justify-center"}>
{intervals.length > 1 ? ( {intervals.length > 1 ? (
<PlanIntervalSwitcher <PlanIntervalSwitcher
intervals={intervals} intervals={intervals}
@@ -70,13 +70,13 @@ export function PricingTable({
<div <div
className={ className={
'flex flex-col items-start space-y-6 lg:space-y-0' + "flex flex-col items-start space-y-6 lg:space-y-0" +
' justify-center lg:flex-row lg:gap-x-2.5' " justify-center lg:flex-row lg:gap-x-2.5"
} }
> >
{visibleProducts.map((product) => { {visibleProducts.map((product) => {
const plan = product.plans.find((plan) => { const plan = product.plans.find((plan) => {
if (plan.paymentType === 'recurring') { if (plan.paymentType === "recurring") {
return plan.interval === interval; return plan.interval === interval;
} }
@@ -159,7 +159,7 @@ function PricingItem(
const lineItem = props.primaryLineItem!; const lineItem = props.primaryLineItem!;
const isCustom = props.plan.custom ?? false; const isCustom = props.plan.custom ?? false;
const i18nKey = lineItem?.unit ? `billing.units.${lineItem.unit}` : ''; const i18nKey = lineItem?.unit ? `billing.units.${lineItem.unit}` : "";
const unitLabel = lineItem?.unit const unitLabel = lineItem?.unit
? t.has(i18nKey) ? t.has(i18nKey)
@@ -168,31 +168,31 @@ function PricingItem(
defaultValue: lineItem.unit, defaultValue: lineItem.unit,
} as never) } as never)
: lineItem.unit : lineItem.unit
: ''; : "";
const isDefaultSeatUnit = lineItem?.unit === 'member'; const isDefaultSeatUnit = lineItem?.unit === "member";
// we exclude flat line items from the details since // we exclude flat line items from the details since
// it doesn't need further explanation // it doesn't need further explanation
const lineItemsToDisplay = props.plan.lineItems.filter((item) => { const lineItemsToDisplay = props.plan.lineItems.filter((item) => {
return item.type !== 'flat'; return item.type !== "flat";
}); });
const interval = props.plan.interval as Interval; const interval = props.plan.interval as Interval;
return ( return (
<div <div
data-cy={'subscription-plan'} data-cy={"subscription-plan"}
className={cn( className={cn(
props.className, props.className,
`s-full bg-muted/50 relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded px-6 py-5 lg:w-4/12 xl:max-w-[20rem]`, `s-full bg-muted/50 relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded px-6 py-5 lg:w-4/12 xl:max-w-[20rem]`,
)} )}
> >
<If condition={props.product.badge}> <If condition={props.product.badge}>
<div className={'absolute -top-2.5 left-0 flex w-full justify-center'}> <div className={"absolute -top-2.5 left-0 flex w-full justify-center"}>
<Badge <Badge
className={highlighted ? '' : 'bg-muted'} className={highlighted ? "" : "bg-muted"}
variant={highlighted ? 'default' : 'outline'} variant={highlighted ? "default" : "outline"}
> >
<span> <span>
<Trans <Trans
@@ -204,12 +204,12 @@ function PricingItem(
</div> </div>
</If> </If>
<div className={'flex flex-col gap-y-4'}> <div className={"flex flex-col gap-y-4"}>
<div className={'flex flex-col'}> <div className={"flex flex-col"}>
<div className={'flex items-center space-x-6'}> <div className={"flex items-center space-x-6"}>
<b <b
className={ className={
'text-secondary-foreground font-heading text-xl font-medium tracking-tight text-orange-800' "text-secondary-foreground font-heading text-xl font-medium tracking-tight text-orange-800"
} }
> >
<Trans <Trans
@@ -229,9 +229,9 @@ function PricingItem(
</span> </span>
</div> </div>
<div className={'h-px w-full border border-dashed'} /> <div className={"h-px w-full border border-dashed"} />
<div className={'flex flex-col gap-y-1'}> <div className={"flex flex-col gap-y-1"}>
<Price <Price
isMonthlyPrice={props.alwaysDisplayMonthlyPrice} isMonthlyPrice={props.alwaysDisplayMonthlyPrice}
displayBillingPeriod={!props.plan.label} displayBillingPeriod={!props.plan.label}
@@ -260,7 +260,7 @@ function PricingItem(
<span> <span>
<If <If
condition={props.plan.interval} condition={props.plan.interval}
fallback={<Trans i18nKey={'billing.lifetime'} />} fallback={<Trans i18nKey={"billing.lifetime"} />}
> >
{(interval) => ( {(interval) => (
<Trans i18nKey={`billing.billingInterval.${interval}`} /> <Trans i18nKey={`billing.billingInterval.${interval}`} />
@@ -268,7 +268,7 @@ function PricingItem(
</If> </If>
</span> </span>
<If condition={lineItem && lineItem?.type !== 'flat'}> <If condition={lineItem && lineItem?.type !== "flat"}>
<span>/</span> <span>/</span>
<span <span
@@ -276,13 +276,13 @@ function PricingItem(
`animate-in slide-in-from-left-4 fade-in text-xs capitalize`, `animate-in slide-in-from-left-4 fade-in text-xs capitalize`,
)} )}
> >
<If condition={lineItem?.type === 'per_seat'}> <If condition={lineItem?.type === "per_seat"}>
<If <If
condition={Boolean(lineItem?.unit) && !isDefaultSeatUnit} condition={Boolean(lineItem?.unit) && !isDefaultSeatUnit}
fallback={<Trans i18nKey={'billing.perTeamMember'} />} fallback={<Trans i18nKey={"billing.perTeamMember"} />}
> >
<Trans <Trans
i18nKey={'billing.perUnitShort'} i18nKey={"billing.perUnitShort"}
values={{ values={{
unit: unitLabel, unit: unitLabel,
}} }}
@@ -291,10 +291,10 @@ function PricingItem(
</If> </If>
<If <If
condition={lineItem?.type !== 'per_seat' && lineItem?.unit} condition={lineItem?.type !== "per_seat" && lineItem?.unit}
> >
<Trans <Trans
i18nKey={'billing.perUnit'} i18nKey={"billing.perUnit"}
values={{ values={{
unit: lineItem?.unit, unit: lineItem?.unit,
}} }}
@@ -329,9 +329,9 @@ function PricingItem(
</If> </If>
</If> </If>
<div className={'h-px w-full border border-dashed'} /> <div className={"h-px w-full border border-dashed"} />
<div className={'flex flex-col'}> <div className={"flex flex-col"}>
<FeaturesList <FeaturesList
highlighted={highlighted} highlighted={highlighted}
features={props.product.features} features={props.product.features}
@@ -339,11 +339,11 @@ function PricingItem(
</div> </div>
<If condition={props.displayPlanDetails && lineItemsToDisplay.length}> <If condition={props.displayPlanDetails && lineItemsToDisplay.length}>
<div className={'h-px w-full border border-dashed'} /> <div className={"h-px w-full border border-dashed"} />
<div className={'flex flex-col space-y-2'}> <div className={"flex flex-col space-y-2"}>
<h6 className={'text-sm font-semibold'}> <h6 className={"text-sm font-semibold"}>
<Trans i18nKey={'billing.detailsLabel'} /> <Trans i18nKey={"billing.detailsLabel"} />
</h6> </h6>
<LineItemDetails <LineItemDetails
@@ -366,7 +366,7 @@ function FeaturesList(
}>, }>,
) { ) {
return ( return (
<ul className={'flex flex-col gap-1'}> <ul className={"flex flex-col gap-1"}>
{props.features.map((feature) => { {props.features.map((feature) => {
return ( return (
<ListItem highlighted={props.highlighted} key={feature}> <ListItem highlighted={props.highlighted} key={feature}>
@@ -392,17 +392,17 @@ function Price({
> >
<span <span
className={ className={
'font-heading flex items-center text-4xl font-medium tracking-tighter' "font-heading flex items-center text-4xl font-medium tracking-tighter"
} }
> >
{children} {children}
</span> </span>
<If condition={isMonthlyPrice && displayBillingPeriod}> <If condition={isMonthlyPrice && displayBillingPeriod}>
<span className={'text-muted-foreground text-sm leading-loose'}> <span className={"text-muted-foreground text-sm leading-loose"}>
<span>/</span> <span>/</span>
<Trans i18nKey={'billing.perMonth'} /> <Trans i18nKey={"billing.perMonth"} />
</span> </span>
</If> </If>
</div> </div>
@@ -416,18 +416,18 @@ function ListItem({
highlighted: boolean; highlighted: boolean;
}>) { }>) {
return ( return (
<li className={'flex items-center gap-x-2'}> <li className={"flex items-center gap-x-2"}>
<CheckCircle <CheckCircle
className={cn('h-3.5 min-h-3.5 w-3.5 min-w-3.5', { className={cn("h-3.5 min-h-3.5 w-3.5 min-w-3.5", {
'text-secondary-foreground': highlighted, "text-secondary-foreground": highlighted,
'text-muted-foreground': !highlighted, "text-muted-foreground": !highlighted,
})} })}
/> />
<span <span
className={cn('text-sm', { className={cn("text-sm", {
'text-muted-foreground': !highlighted, "text-muted-foreground": !highlighted,
'text-secondary-foreground': highlighted, "text-secondary-foreground": highlighted,
})} })}
> >
{children} {children}
@@ -446,40 +446,40 @@ function PlanIntervalSwitcher(
return ( return (
<div <div
className={ className={
'hover:border-border border-border/50 flex gap-x-0 rounded-full border' "hover:border-border border-border/50 flex gap-x-0 rounded-full border"
} }
> >
{props.intervals.map((plan, index) => { {props.intervals.map((plan, index) => {
const selected = plan === props.interval; const selected = plan === props.interval;
const className = cn( const className = cn(
'animate-in fade-in rounded-full transition-all focus:!ring-0', "animate-in fade-in rounded-full transition-all focus:!ring-0",
{ {
'border-r-transparent': index === 0, "border-r-transparent": index === 0,
['hover:text-primary text-muted-foreground']: !selected, ["hover:text-primary text-muted-foreground"]: !selected,
['cursor-default']: selected, ["cursor-default"]: selected,
}, },
); );
return ( return (
<Button <Button
size={'sm'} size={"sm"}
key={plan} key={plan}
variant={selected ? 'secondary' : 'custom'} variant={selected ? "secondary" : "custom"}
className={className} className={className}
onClick={() => props.setInterval(plan)} onClick={() => props.setInterval(plan)}
> >
<span className={'flex items-center'}> <span className={"flex items-center"}>
<CheckCircle <CheckCircle
className={cn( className={cn(
'animate-in fade-in zoom-in-50 mr-1 size-3 duration-200', "animate-in fade-in zoom-in-50 mr-1 size-3 duration-200",
{ {
hidden: !selected, hidden: !selected,
}, },
)} )}
/> />
<span className={'text-xs capitalize'}> <span className={"text-xs capitalize"}>
<Trans i18nKey={`billing.billingInterval.${plan}`} /> <Trans i18nKey={`billing.billingInterval.${plan}`} />
</span> </span>
</span> </span>
@@ -509,29 +509,29 @@ function DefaultCheckoutButton(
highlighted?: boolean; highlighted?: boolean;
}>, }>,
) { ) {
const t = useTranslations('billing'); const t = useTranslations();
const signUpPath = props.paths.signUp; const signUpPath = props.paths.signUp;
const searchParams = new URLSearchParams({ const searchParams = new URLSearchParams({
next: props.paths.return, next: props.paths.return,
plan: props.plan.id, plan: props.plan.id,
redirectToCheckout: props.redirectToCheckout ? 'true' : 'false', redirectToCheckout: props.redirectToCheckout ? "true" : "false",
}); });
const linkHref = const linkHref =
props.plan.href ?? `${signUpPath}?${searchParams.toString()}`; props.plan.href ?? `${signUpPath}?${searchParams.toString()}`;
const label = props.plan.buttonLabel ?? 'common.getStartedWithPlan'; const label = props.plan.buttonLabel ?? "common.getStartedWithPlan";
return ( return (
<Link className={'w-full'} href={linkHref}> <Link className={"w-full"} href={linkHref}>
<Button <Button
size={'lg'} size={"lg"}
className={'h-12 w-full rounded-lg'} className={"h-12 w-full rounded-lg"}
variant={props.highlighted ? 'default' : 'secondary'} variant={props.highlighted ? "default" : "secondary"}
> >
<span className={'text-base font-medium tracking-tight'}> <span className={"text-base font-medium tracking-tight"}>
<Trans <Trans
i18nKey={label} i18nKey={label}
defaults={label} defaults={label}
@@ -543,7 +543,7 @@ function DefaultCheckoutButton(
/> />
</span> </span>
<ArrowRight className={'ml-2 h-4'} /> <ArrowRight className={"ml-2 h-4"} />
</Button> </Button>
</Link> </Link>
); );