Typescript error in generated Stripe code

[sangrepura]

Summary

name: Typescript Error about: Mismatch between the shape of objects labels: bug

Bug Description

When selecting Stripe the generated code has the following Typescript errors:

src/app/account/page.tsx:16:11 - error TS2322: Type '{ id: undefined; name: undefined; description: undefined; stripePriceId: undefined; price: undefined; stripeSubscriptionId: undefined; stripeCurrentPeriodEnd: undefined; stripeCustomerId: undefined; isSubscribed: boolean; isCanceled: boolean; } | { ...; }' is not assignable to type 'PlanSettingsProps'.
  Type '{ id: undefined; name: undefined; description: undefined; stripePriceId: undefined; price: undefined; stripeSubscriptionId: undefined; stripeCurrentPeriodEnd: undefined; stripeCustomerId: undefined; isSubscribed: boolean; isCanceled: boolean; }' is not assignable to type 'PlanSettingsProps'.
    Types of property 'stripeSubscriptionId' are incompatible.
      Type 'undefined' is not assignable to type 'string | null'.

16           subscriptionPlan={subscriptionPlan}
             ~~~~~~~~~~~~~~~~

  src/app/account/PlanSettings.tsx:26:3
    26   subscriptionPlan: PlanSettingsProps;
         ~~~~~~~~~~~~~~~~
    The expected type comes from property 'subscriptionPlan' which is declared here on type 'IntrinsicAttributes & { subscriptionPlan: PlanSettingsProps; user: { name?: string | undefined; id: string; email?: string | undefined; }; }'

Steps To Reproduce

Steps to reproduce the behavior:

1. Create a new NextJS project npx create-next-app@latest myProject
2. Run kirimase CLI and select Stripe
3. View the file in VSCode or run: tsc --project ./tsconfig.json

Expected behavior No Typescript Errors

Proposed Solution

The error is due to a mismatch between the shape of the object returned by getUserSubscriptionPlan and the expected properties of the PlanSettingsProps interface.

Use null Instead of undefined:

Since the PlanSettingsProps interface expects properties to be string | null, not undefined, return null instead of undefined from getUserSubscriptionPlan() for properties that don't have values:

• stripeSubscriptionId: [-undefined,-]{+null,+}
• stripeCurrentPeriodEnd: [-undefined,-]{+null,+}
• stripeCustomerId: [-undefined,-]{+null,+}

Handle Types in the getUserSubscriptionPlan function:

When returning an object from getUserSubscriptionPlan, ensure that we are returning an object that fits the PlanSettingsProps type. This can be done using type assertion.

--- a/src/lib/stripe/subscription.ts
+++ b/src/lib/stripe/subscription.ts
@@ -6,0 +7 @@ import { getUserAuth } from "../auth/utils";
+import { PlanSettingsProps } from "@/app/account/PlanSettings";
@@ -8 +9 @@ import { getUserAuth } from "../auth/utils";
-export async function getUserSubscriptionPlan() {
+export async function getUserSubscriptionPlan(): Promise<PlanSettingsProps> {

Here's the full diff that fixes it:

diff --git a/src/lib/stripe/subscription.ts b/src/lib/stripe/subscription.ts
index 2bc6e53..4ef72a1 100644
--- a/src/lib/stripe/subscription.ts
+++ b/src/lib/stripe/subscription.ts
@@ -6,0 +7 @@ import { getUserAuth } from "../auth/utils";
+import { PlanSettingsProps } from "@/app/account/PlanSettings";
@@ -8 +9 @@ import { getUserAuth } from "../auth/utils";
-export async function getUserSubscriptionPlan() {
+export async function getUserSubscriptionPlan(): Promise<PlanSettingsProps> {
@@ -21,12 +22,12 @@ export async function getUserSubscriptionPlan() {
-    return {
-      id: undefined,
-      name: undefined,
-      description: undefined,
-      stripePriceId: undefined,
-      price: undefined,
-      stripeSubscriptionId: undefined,
-      stripeCurrentPeriodEnd: undefined,
-      stripeCustomerId: undefined,
-      isSubscribed: false,
-      isCanceled: false,
-    };
+  return {
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    stripePriceId: undefined,
+    price: undefined,
+    stripeSubscriptionId: null,
+    stripeCurrentPeriodEnd: null,
+    stripeCustomerId: null,
+    isSubscribed: false,
+    isCanceled: false,
+  }

[sangrepura]

Also there is another minor mismatch for the apiVersion:

src/lib/stripe/index.ts:4:3 - error TS2322: Type '"2023-08-16"' is not assignable to type '"2023-10-16"'.

4   apiVersion: "2023-08-16",

fix:

--- a/src/lib/stripe/index.ts
+++ b/src/lib/stripe/index.ts

-  apiVersion: "2023-08-16",
+  apiVersion: "2023-10-16",

[nicoalbanese]

Hey @sangrepura - thanks for flagging! This has been resolved with 3508b58 and will be pushed as part of the next update (later today). Cheers!