Refactor billing system and enhance logging

Updated the billing system's schema to change 'storeId' to a string type, and improved the cleanliness and readability of the code. Enhanced the logging system within the billing service for better tracking and debugging. In line with these changes, added corresponding error pages in the client side to handle any errors.

apps/web/config/app.config.ts

@@ -2,33 +2,52 @@ import { z } from 'zod';
 
 const production = process.env.NODE_ENV === 'production';
 
-const AppConfigSchema = z.object({
-  name: z
-    .string({
-      description: `This is the name of your SaaS. Ex. "Makerkit"`,
-    })
-    .min(1),
-  title: z
-    .string({
-      description: `This is the default title tag of your SaaS.`,
-    })
-    .min(1),
-  description: z.string({
-    description: `This is the default description of your SaaS.`,
-  }),
-  url: z.string().url({
-    message: `Please provide a valid URL. Example: 'https://example.com'`,
-  }),
-  locale: z
-    .string({
-      description: `This is the default locale of your SaaS.`,
-    })
-    .default('en'),
-  theme: z.enum(['light', 'dark', 'system']),
-  production: z.boolean(),
-  themeColor: z.string(),
-  themeColorDark: z.string(),
-});
+const AppConfigSchema = z
+  .object({
+    name: z
+      .string({
+        description: `This is the name of your SaaS. Ex. "Makerkit"`,
+      })
+      .min(1),
+    title: z
+      .string({
+        description: `This is the default title tag of your SaaS.`,
+      })
+      .min(1),
+    description: z.string({
+      description: `This is the default description of your SaaS.`,
+    }),
+    url: z.string().url({
+      message: `Please provide a valid URL. Example: 'https://example.com'`,
+    }),
+    locale: z
+      .string({
+        description: `This is the default locale of your SaaS.`,
+      })
+      .default('en'),
+    theme: z.enum(['light', 'dark', 'system']),
+    production: z.boolean(),
+    themeColor: z.string(),
+    themeColorDark: z.string(),
+  })
+  .refine(
+    (schema) => {
+      return !(schema.production && schema.url.startsWith('http:'));
+    },
+    {
+      message: `Please use a valid HTTPS URL in production.`,
+      path: ['url'],
+    },
+  )
+  .refine(
+    (schema) => {
+      return schema.themeColor !== schema.themeColorDark;
+    },
+    {
+      message: `Please provide different theme colors for light and dark themes.`,
+      path: ['themeColor'],
+    },
+  );
 
 const appConfig = AppConfigSchema.parse({
   name: process.env.NEXT_PUBLIC_PRODUCT_NAME,

apps/web/config/billing.config.ts

@@ -1,11 +1,16 @@
 import { BillingProviderSchema, createBillingSchema } from '@kit/billing';
 
+// The billing provider to use. This should be set in the environment variables
+// and should match the provider in the database. We also add it here so we can validate
+// your configuration against the selected provider at build time.
 const provider = BillingProviderSchema.parse(
   process.env.NEXT_PUBLIC_BILLING_PROVIDER,
 );
 
 export default createBillingSchema({
+  // also update config.billing_provider in the DB to match the selected
   provider,
+  // products configuration
   products: [
     {
       id: 'lifetime',
@@ -45,7 +50,7 @@ export default createBillingSchema({
           interval: 'month',
           lineItems: [
             {
-              id: 'price_1NNwYHI1i3VnbZTqI2UzaHIe',
+              id: '55476',
               name: 'Base',
               description: 'Base plan',
               cost: 9.99,