Fixed issue with one-time payments; Updated packages

This commit is contained in:
giancarlo
2024-05-18 22:56:57 +07:00
parent 5c1e1d5cd0
commit 3cf3c263bc
25 changed files with 541 additions and 604 deletions

View File

@@ -13,7 +13,7 @@
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.44.0", "@playwright/test": "^1.44.0",
"@types/node": "^20.12.10", "@types/node": "^20.12.12",
"node-html-parser": "^6.1.13" "node-html-parser": "^6.1.13"
} }
} }

View File

@@ -55,7 +55,7 @@
"@marsidev/react-turnstile": "^0.6.1", "@marsidev/react-turnstile": "^0.6.1",
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"@tanstack/react-query-next-experimental": "^5.36.2", "@tanstack/react-query-next-experimental": "^5.36.2",
"@tanstack/react-table": "^8.17.3", "@tanstack/react-table": "^8.17.3",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
@@ -79,8 +79,8 @@
"@kit/tsconfig": "workspace:^", "@kit/tsconfig": "workspace:^",
"@next/bundle-analyzer": "14.2.3", "@next/bundle-analyzer": "14.2.3",
"@types/mdx": "^2.0.13", "@types/mdx": "^2.0.13",
"@types/node": "^20.12.10", "@types/node": "^20.12.12",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"dotenv-cli": "^7.4.2", "dotenv-cli": "^7.4.2",

View File

@@ -49,6 +49,8 @@
"planPickerAlertErrorDescription": "There was an error requesting checkout. Please try again later.", "planPickerAlertErrorDescription": "There was an error requesting checkout. Please try again later.",
"subscriptionCancelled": "Subscription Cancelled", "subscriptionCancelled": "Subscription Cancelled",
"cancelSubscriptionDate": "Your subscription will be cancelled at the end of the period", "cancelSubscriptionDate": "Your subscription will be cancelled at the end of the period",
"noPlanChosen": "Please choose a plan",
"noIntervalPlanChosen": "Please choose a billing interval",
"status": { "status": {
"free": { "free": {
"badge": "Free Plan", "badge": "Free Plan",

View File

@@ -28,7 +28,7 @@
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^", "@kit/ui": "workspace:^",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"lucide-react": "^0.378.0", "lucide-react": "^0.378.0",
"next": "14.2.3", "next": "14.2.3",

View File

@@ -48,6 +48,8 @@ export function PlanPicker(
pending?: boolean; pending?: boolean;
}>, }>,
) { ) {
const { t } = useTranslation(`billing`);
const intervals = useMemo( const intervals = useMemo(
() => getPlanIntervals(props.config), () => getPlanIntervals(props.config),
[props.config], [props.config],
@@ -61,7 +63,7 @@ export function PlanPicker(
.object({ .object({
planId: z.string(), planId: z.string(),
productId: z.string(), productId: z.string(),
interval: z.string(), interval: z.string().optional(),
}) })
.refine( .refine(
(data) => { (data) => {
@@ -76,7 +78,22 @@ export function PlanPicker(
return false; return false;
} }
}, },
{ message: `Please pick a plan to continue`, path: ['planId'] }, { message: t('noPlanChosen'), path: ['planId'] },
)
.refine(
(data) => {
try {
const { plan } = getProductPlanPair(props.config, data.planId);
return !(plan.paymentType === 'recurring' && !data.interval);
} catch {
return false;
}
},
{
message: t('noIntervalPlanChosen'),
path: ['interval'],
},
), ),
), ),
defaultValues: { defaultValues: {
@@ -100,8 +117,6 @@ export function PlanPicker(
} }
}, [props.config, planId]); }, [props.config, planId]);
const { t } = useTranslation(`billing`);
// display the period picker if the selected plan is recurring or if no plan is selected // display the period picker if the selected plan is recurring or if no plan is selected
const isRecurringPlan = const isRecurringPlan =
selectedPlan?.paymentType === 'recurring' || !selectedPlan; selectedPlan?.paymentType === 'recurring' || !selectedPlan;
@@ -117,82 +132,88 @@ export function PlanPicker(
className={'flex w-full max-w-xl flex-col space-y-4'} className={'flex w-full max-w-xl flex-col space-y-4'}
onSubmit={form.handleSubmit(props.onSubmit)} onSubmit={form.handleSubmit(props.onSubmit)}
> >
<div <If condition={intervals.length}>
className={cn('transition-all', { <div
['pointer-events-none opacity-50']: !isRecurringPlan, className={cn('transition-all', {
})} ['pointer-events-none opacity-50']: !isRecurringPlan,
> })}
<FormField >
name={'interval'} <FormField
render={({ field }) => { name={'interval'}
return ( render={({ field }) => {
<FormItem className={'rounded-md border p-4'}> return (
<FormLabel htmlFor={'plan-picker-id'}> <FormItem className={'rounded-md border p-4'}>
<Trans i18nKey={'common:billingInterval.label'} /> <FormLabel htmlFor={'plan-picker-id'}>
</FormLabel> <Trans i18nKey={'common:billingInterval.label'} />
</FormLabel>
<FormControl id={'plan-picker-id'}> <FormControl id={'plan-picker-id'}>
<RadioGroup name={field.name} value={field.value}> <RadioGroup name={field.name} value={field.value}>
<div className={'flex space-x-2.5'}> <div className={'flex space-x-2.5'}>
{intervals.map((interval) => { {intervals.map((interval) => {
const selected = field.value === interval; const selected = field.value === interval;
return ( return (
<label <label
htmlFor={interval} htmlFor={interval}
key={interval} key={interval}
className={cn( className={cn(
'flex items-center space-x-2 rounded-md border border-transparent px-4 py-2 transition-colors', 'flex items-center space-x-2 rounded-md border border-transparent px-4 py-2 transition-colors',
{ {
['border-primary']: selected, ['border-primary']: selected,
['hover:border-primary']: !selected, ['hover:border-primary']: !selected,
}, },
)} )}
>
<RadioGroupItem
id={interval}
value={interval}
onClick={() => {
form.setValue('interval', interval, {
shouldValidate: true,
});
if (selectedProduct) {
const plan = selectedProduct.plans.find(
(item) => item.interval === interval,
);
form.setValue('planId', plan?.id ?? '', {
shouldValidate: true,
shouldDirty: true,
shouldTouch: true,
});
}
}}
/>
<span
className={cn('text-sm', {
['cursor-pointer']: !selected,
})}
> >
<Trans <RadioGroupItem
i18nKey={`billing:billingInterval.${interval}`} id={interval}
/> value={interval}
</span> onClick={() => {
</label> form.setValue('interval', interval, {
); shouldValidate: true,
})} });
</div>
</RadioGroup>
</FormControl>
<FormMessage /> if (selectedProduct) {
</FormItem> const plan = selectedProduct.plans.find(
); (item) => item.interval === interval,
}} );
/>
</div> form.setValue(
'planId',
plan?.id ?? '',
{
shouldValidate: true,
shouldDirty: true,
shouldTouch: true,
},
);
}
}}
/>
<span
className={cn('text-sm', {
['cursor-pointer']: !selected,
})}
>
<Trans
i18nKey={`billing:billingInterval.${interval}`}
/>
</span>
</label>
);
})}
</div>
</RadioGroup>
</FormControl>
<FormMessage />
</FormItem>
);
}}
/>
</div>
</If>
<FormField <FormField
name={'planId'} name={'planId'}

View File

@@ -14,7 +14,7 @@
"./components": "./src/components/index.ts" "./components": "./src/components/index.ts"
}, },
"dependencies": { "dependencies": {
"@lemonsqueezy/lemonsqueezy.js": "2.2.0" "@lemonsqueezy/lemonsqueezy.js": "3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@kit/billing": "workspace:^", "@kit/billing": "workspace:^",
@@ -25,7 +25,7 @@
"@kit/tailwind-config": "workspace:*", "@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^", "@kit/ui": "workspace:^",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"next": "14.2.3", "next": "14.2.3",
"react": "18.3.1", "react": "18.3.1",
"zod": "^3.23.8" "zod": "^3.23.8"

View File

@@ -28,7 +28,7 @@
"@kit/tailwind-config": "workspace:*", "@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^", "@kit/ui": "workspace:^",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"next": "14.2.3", "next": "14.2.3",
"react": "18.3.1", "react": "18.3.1",

View File

@@ -55,9 +55,10 @@ export async function createStripeCheckout(
customer_email: params.customerEmail, customer_email: params.customerEmail,
}; };
const customerCreation = isSubscription const customerCreation =
? ({} as Record<string, string>) isSubscription || customer
: { customer_creation: 'always' }; ? ({} as Record<string, string>)
: { customer_creation: 'always' };
const lineItems = params.plan.lineItems.map((item) => { const lineItems = params.plan.lineItems.map((item) => {
if (item.type === 'metered') { if (item.type === 'metered') {

View File

@@ -16,7 +16,7 @@
"@kit/eslint-config": "workspace:*", "@kit/eslint-config": "workspace:*",
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@types/node": "^20.12.10" "@types/node": "^20.12.12"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,

View File

@@ -25,8 +25,8 @@
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^", "@kit/ui": "workspace:^",
"@types/node": "^20.12.10", "@types/node": "^20.12.12",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"react": "18.3.1", "react": "18.3.1",
"zod": "^3.23.8" "zod": "^3.23.8"
}, },

View File

@@ -19,7 +19,7 @@
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^", "@kit/ui": "workspace:^",
"@types/node": "^20.12.10", "@types/node": "^20.12.12",
"wp-types": "^3.65.0" "wp-types": "^3.65.0"
}, },
"eslintConfig": { "eslintConfig": {

View File

@@ -34,8 +34,8 @@
"@kit/ui": "workspace:^", "@kit/ui": "workspace:^",
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"lucide-react": "^0.378.0", "lucide-react": "^0.378.0",
"next": "14.2.3", "next": "14.2.3",

View File

@@ -21,9 +21,9 @@
"@makerkit/data-loader-supabase-core": "^0.0.8", "@makerkit/data-loader-supabase-core": "^0.0.8",
"@makerkit/data-loader-supabase-nextjs": "^1.2.3", "@makerkit/data-loader-supabase-nextjs": "^1.2.3",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"@tanstack/react-table": "^8.17.3", "@tanstack/react-table": "^8.17.3",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"lucide-react": "^0.378.0", "lucide-react": "^0.378.0",
"next": "14.2.3", "next": "14.2.3",
"react": "18.3.1", "react": "18.3.1",

View File

@@ -29,8 +29,8 @@
"@marsidev/react-turnstile": "^0.6.1", "@marsidev/react-turnstile": "^0.6.1",
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"lucide-react": "^0.378.0", "lucide-react": "^0.378.0",
"next": "14.2.3", "next": "14.2.3",
"react-hook-form": "^7.51.4", "react-hook-form": "^7.51.4",

View File

@@ -21,8 +21,8 @@
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*", "@kit/ui": "workspace:*",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"lucide-react": "^0.378.0", "lucide-react": "^0.378.0",
"react": "18.3.1", "react": "18.3.1",
"react-dom": "18.3.1", "react-dom": "18.3.1",

View File

@@ -32,9 +32,9 @@
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^", "@kit/ui": "workspace:^",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"@tanstack/react-table": "^8.17.3", "@tanstack/react-table": "^8.17.3",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",

View File

@@ -21,7 +21,7 @@
"@kit/shared": "workspace:^", "@kit/shared": "workspace:^",
"@kit/tailwind-config": "workspace:*", "@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"react-i18next": "^14.1.1" "react-i18next": "^14.1.1"
}, },
"dependencies": { "dependencies": {

View File

@@ -24,7 +24,7 @@
"@kit/sentry": "workspace:*", "@kit/sentry": "workspace:*",
"@kit/tailwind-config": "workspace:*", "@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"react": "18.3.1" "react": "18.3.1"
}, },
"eslintConfig": { "eslintConfig": {

View File

@@ -25,7 +25,7 @@
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",
"@kit/tailwind-config": "workspace:*", "@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"react": "18.3.1", "react": "18.3.1",
"zod": "^3.23.8" "zod": "^3.23.8"
}, },

View File

@@ -18,7 +18,7 @@
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",
"@kit/tailwind-config": "workspace:*", "@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"react": "18.3.1" "react": "18.3.1"
}, },
"eslintConfig": { "eslintConfig": {

View File

@@ -31,7 +31,7 @@
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",
"@kit/tailwind-config": "workspace:*", "@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"react": "18.3.1" "react": "18.3.1"
}, },
"eslintConfig": { "eslintConfig": {

View File

@@ -28,8 +28,8 @@
"@supabase/gotrue-js": "2.62.2", "@supabase/gotrue-js": "2.62.2",
"@supabase/ssr": "^0.3.0", "@supabase/ssr": "^0.3.0",
"@supabase/supabase-js": "^2.43.2", "@supabase/supabase-js": "^2.43.2",
"@tanstack/react-query": "5.36.2", "@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"next": "14.2.3", "next": "14.2.3",
"react": "18.3.1", "react": "18.3.1",
"zod": "^3.23.8" "zod": "^3.23.8"

View File

@@ -42,7 +42,7 @@
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"@tanstack/react-table": "^8.17.3", "@tanstack/react-table": "^8.17.3",
"@types/react": "^18.3.1", "@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",

View File

@@ -193,9 +193,7 @@ export function SidebarItem({
function getClassNameBuilder() { function getClassNameBuilder() {
return cva( return cva(
[ ['flex box-content h-screen flex-col relative shadow-sm border-r'],
'flex box-content h-screen flex-col relative bg-muted/20 shadow-sm dark:shadow-primary/20',
],
{ {
variants: { variants: {
collapsed: { collapsed: {

899
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff