MED-151: add profile view and working smoking dashboard card (#71)

* MED-151: add profile view and working smoking dashboard card

* update zod

* move some components to shared

* move some components to shared

* remove console.logs

* remove unused password form components

* only check null for variant

* use pathsconfig

packages/shared/src/components/select-analysis-package.tsx

@@ -21,6 +21,7 @@ import {
 import { Trans } from '@kit/ui/trans';
 import { ButtonTooltip } from './ui/button-tooltip';
 import { PackageHeader } from './package-header';
+import { pathsConfig } from '../config';
 
 export type AnalysisPackageWithVariant = Pick<StoreProduct, 'title' | 'description' | 'subtitle' | 'metadata'> & {
   variantId: string;
@@ -57,7 +58,7 @@ export default function SelectAnalysisPackage({
       });
       setIsAddingToCart(false);
       toast.success(<Trans i18nKey={'order-analysis-package:analysisPackageAddedToCart'} />);
-      router.push('/home/cart');
+      router.push(pathsConfig.app.cart);
     } catch (e) {
       toast.error(<Trans i18nKey={'order-analysis-package:analysisPackageAddToCartError'} />);
       setIsAddingToCart(false);

packages/shared/src/components/sign-out-dropdown-item.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { DropdownMenuItem } from "@kit/ui/dropdown-menu";
+import { Trans } from "@kit/ui/trans";
+import { LogOut } from "lucide-react";
+
+export default function SignOutDropdownItem(
+  props: React.PropsWithChildren<{
+    onSignOut: () => unknown;
+  }>,
+) {
+  return (
+    <DropdownMenuItem
+      className={'flex h-12 w-full items-center space-x-4'}
+      onClick={props.onSignOut}
+    >
+      <LogOut className={'h-6'} />
+
+      <span>
+        <Trans i18nKey={'common:signOut'} defaults={'Sign out'} />
+      </span>
+    </DropdownMenuItem>
+  );
+}

packages/shared/src/components/ui/dropdown-link.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { DropdownMenuItem } from "@kit/ui/dropdown-menu";
+import { Trans } from "@kit/ui/trans";
+import Link from "next/link";
+
+export default function DropdownLink(
+  props: React.PropsWithChildren<{
+    path: string;
+    label: string;
+    labelOptions?: Record<string, any>;
+    Icon?: React.ReactNode;
+  }>,
+) {
+  return (
+    <DropdownMenuItem asChild key={props.path}>
+      <Link
+        href={props.path}
+        className={'flex h-12 w-full items-center space-x-4'}
+      >
+        {props.Icon}
+
+        <span>
+          <Trans
+            i18nKey={props.label}
+            defaults={props.label}
+            values={props.labelOptions}
+          />
+        </span>
+      </Link>
+    </DropdownMenuItem>
+  );
+}

packages/shared/src/config/app.config.ts

@@ -6,32 +6,30 @@ const AppConfigSchema = z
   .object({
     name: z
       .string({
-        description: `This is the name of your SaaS. Ex. "Makerkit"`,
-        required_error: `Please provide the variable NEXT_PUBLIC_PRODUCT_NAME`,
+        error: `Please provide the variable NEXT_PUBLIC_PRODUCT_NAME`,
       })
+      .describe(`This is the name of your SaaS. Ex. "Makerkit"`)
       .min(1),
     title: z
       .string({
-        description: `This is the default title tag of your SaaS.`,
-        required_error: `Please provide the variable NEXT_PUBLIC_SITE_TITLE`,
+        error: `Please provide the variable NEXT_PUBLIC_SITE_TITLE`,
       })
+      .describe(`This is the default title tag of your SaaS.`)
       .min(1),
     description: z.string({
-      description: `This is the default description of your SaaS.`,
-      required_error: `Please provide the variable NEXT_PUBLIC_SITE_DESCRIPTION`,
+      error: `Please provide the variable NEXT_PUBLIC_SITE_DESCRIPTION`,
+    })
+      .describe(`This is the default description of your SaaS.`),
+    url: z.url({
+      error: (issue) => issue.input === undefined
+        ? "Please provide the variable NEXT_PUBLIC_SITE_URL"
+        : `You are deploying a production build but have entered a NEXT_PUBLIC_SITE_URL variable using http instead of https. It is very likely that you have set the incorrect URL. The build will now fail to prevent you from from deploying a faulty configuration. Please provide the variable NEXT_PUBLIC_SITE_URL with a valid URL, such as: 'https://example.com'`
     }),
-    url: z
-      .string({
-        required_error: `Please provide the variable NEXT_PUBLIC_SITE_URL`,
-      })
-      .url({
-        message: `You are deploying a production build but have entered a NEXT_PUBLIC_SITE_URL variable using http instead of https. It is very likely that you have set the incorrect URL. The build will now fail to prevent you from from deploying a faulty configuration. Please provide the variable NEXT_PUBLIC_SITE_URL with a valid URL, such as: 'https://example.com'`,
-      }),
     locale: z
       .string({
-        description: `This is the default locale of your SaaS.`,
-        required_error: `Please provide the variable NEXT_PUBLIC_DEFAULT_LOCALE`,
+        error: `Please provide the variable NEXT_PUBLIC_DEFAULT_LOCALE`,
       })
+      .describe(`This is the default locale of your SaaS.`)
       .default('en'),
     theme: z.enum(['light', 'dark', 'system']),
     production: z.boolean(),

packages/shared/src/config/auth.config.ts

@@ -6,22 +6,14 @@ const providers: z.ZodType<Provider> = getProviders();
 
 const AuthConfigSchema = z.object({
   captchaTokenSiteKey: z
-    .string({
-      description: 'The reCAPTCHA site key.',
-    })
+    .string().describe('The reCAPTCHA site key.')
     .optional(),
   displayTermsCheckbox: z
-    .boolean({
-      description: 'Whether to display the terms checkbox during sign-up.',
-    })
+    .boolean().describe('Whether to display the terms checkbox during sign-up.')
     .optional(),
   providers: z.object({
-    password: z.boolean({
-      description: 'Enable password authentication.',
-    }),
-    magicLink: z.boolean({
-      description: 'Enable magic link authentication.',
-    }),
+    password: z.boolean().describe('Enable password authentication.'),
+    magicLink: z.boolean().describe('Enable magic link authentication.'),
     oAuth: providers.array(),
   }),
 });

packages/shared/src/config/feature-flags.config.ts

@@ -4,56 +4,56 @@ type LanguagePriority = 'user' | 'application';
 
 const FeatureFlagsSchema = z.object({
   enableThemeToggle: z.boolean({
-    description: 'Enable theme toggle in the user interface.',
-    required_error: 'Provide the variable NEXT_PUBLIC_ENABLE_THEME_TOGGLE',
-  }),
+    error: 'Provide the variable NEXT_PUBLIC_ENABLE_THEME_TOGGLE',
+  })
+  .describe( 'Enable theme toggle in the user interface.'),
   enableAccountDeletion: z.boolean({
-    description: 'Enable personal account deletion.',
-    required_error:
+    error:
       'Provide the variable NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION',
-  }),
+  })
+  .describe('Enable personal account deletion.'),
   enableTeamDeletion: z.boolean({
-    description: 'Enable team deletion.',
-    required_error:
+    error:
       'Provide the variable NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION',
-  }),
+  })
+  .describe('Enable team deletion.'),
   enableTeamAccounts: z.boolean({
-    description: 'Enable team accounts.',
-    required_error: 'Provide the variable NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS',
-  }),
+    error: 'Provide the variable NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS',
+  })
+  .describe('Enable team accounts.'),
   enableTeamCreation: z.boolean({
-    description: 'Enable team creation.',
-    required_error:
+    error:
       'Provide the variable NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION',
-  }),
+  })
+  .describe('Enable team creation.'),
   enablePersonalAccountBilling: z.boolean({
-    description: 'Enable personal account billing.',
-    required_error:
+    error:
       'Provide the variable NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING',
-  }),
+  })
+  .describe('Enable personal account billing.'),
   enableTeamAccountBilling: z.boolean({
-    description: 'Enable team account billing.',
-    required_error:
+    error:
       'Provide the variable NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING',
-  }),
+  })
+  .describe('Enable team account billing.'),
   languagePriority: z
     .enum(['user', 'application'], {
-      required_error: 'Provide the variable NEXT_PUBLIC_LANGUAGE_PRIORITY',
-      description: `If set to user, use the user's preferred language. If set to application, use the application's default language.`,
+      error: 'Provide the variable NEXT_PUBLIC_LANGUAGE_PRIORITY',
     })
+    .describe(`If set to user, use the user's preferred language. If set to application, use the application's default language.`)
     .default('application'),
   enableNotifications: z.boolean({
-    description: 'Enable notifications functionality',
-    required_error: 'Provide the variable NEXT_PUBLIC_ENABLE_NOTIFICATIONS',
-  }),
+    error: 'Provide the variable NEXT_PUBLIC_ENABLE_NOTIFICATIONS',
+  })
+  .describe('Enable notifications functionality'),
   realtimeNotifications: z.boolean({
-    description: 'Enable realtime for the notifications functionality',
-    required_error: 'Provide the variable NEXT_PUBLIC_REALTIME_NOTIFICATIONS',
-  }),
+    error: 'Provide the variable NEXT_PUBLIC_REALTIME_NOTIFICATIONS',
+  })
+  .describe('Enable realtime for the notifications functionality'),
   enableVersionUpdater: z.boolean({
-    description: 'Enable version updater',
-    required_error: 'Provide the variable NEXT_PUBLIC_ENABLE_VERSION_UPDATER',
-  }),
+    error: 'Provide the variable NEXT_PUBLIC_ENABLE_VERSION_UPDATER',
+  })
+  .describe('Enable version updater'),
 });
 
 const featureFlagsConfig = FeatureFlagsSchema.parse({

packages/shared/src/config/paths.config.ts

@@ -14,6 +14,7 @@ const PathsSchema = z.object({
   }),
   app: z.object({
     home: z.string().min(1),
+    cart: z.string().min(1),
     selectPackage: z.string().min(1),
     booking: z.string().min(1),
     bookingHandle: z.string().min(1),
@@ -23,6 +24,8 @@ const PathsSchema = z.object({
     orderAnalysis: z.string().min(1),
     orderHealthAnalysis: z.string().min(1),
     personalAccountSettings: z.string().min(1),
+    personalAccountPreferences: z.string().min(1),
+    personalAccountSecurity: z.string().min(1),
     personalAccountBilling: z.string().min(1),
     personalAccountBillingReturn: z.string().min(1),
     accountHome: z.string().min(1),
@@ -54,7 +57,10 @@ const pathsConfig = PathsSchema.parse({
   },
   app: {
     home: '/home',
+    cart: '/home/cart',
     personalAccountSettings: '/home/settings',
+    personalAccountPreferences: '/home/settings/preferences',
+    personalAccountSecurity: '/home/settings/security',
     personalAccountBilling: '/home/billing',
     personalAccountBillingReturn: '/home/billing/return',
     accountHome: '/home/[account]',

packages/shared/src/config/personal-account-navigation.config.tsx

@@ -5,7 +5,6 @@ import {
   MousePointerClick,
   ShoppingCart,
   Stethoscope,
-  TestTube2,
 } from 'lucide-react';
 import { z } from 'zod';