refactor(wizard-implementation): streamline onboarding update logic and enhance UI components

- Replaced separate onboarding creation and update calls with a single upsert operation for efficiency.
- Updated the CompanyDetailsWizardForm to improve layout with Card components and adjusted input fields for better user experience.
- Enhanced WizardQuestion and WizardStepper components for improved styling and responsiveness.
- Refined TrustPortalSwitch component by adding descriptions for compliance frameworks and optimizing layout.
- Updated input and select components for better prefix handling and visual consistency.

Author: carhartlewis

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/wizard/[wizardId]/actions/updateWizard.ts

@@ -53,31 +53,26 @@ export const updateWizard = async ({
 		where: { organizationId: orgId },
 	});
 
-	if (!onboarding) {
-		await db.onboarding.create({
-			data: {
-				organizationId: orgId,
-				[dbColumn]: {
-					version: parsed.version || companyDetailsLatestVersion,
-					isCompleted: parsed.isCompleted,
-					data: parsed.data,
-				},
+	await db.onboarding.upsert({
+		where: {
+			organizationId: orgId,
+		},
+		create: {
+			organizationId: orgId,
+			[dbColumn]: {
+				version: parsed.version || companyDetailsLatestVersion,
+				isCompleted: parsed.isCompleted,
+				data: parsed.data,
 			},
-		});
-	} else {
-		await db.onboarding.update({
-			where: {
-				organizationId: orgId,
+		},
+		update: {
+			[dbColumn]: {
+				version: parsed.version || companyDetailsLatestVersion,
+				isCompleted: parsed.isCompleted,
+				data: parsed.data,
 			},
-			data: {
-				[dbColumn]: {
-					version: parsed.version || companyDetailsLatestVersion,
-					isCompleted: parsed.isCompleted,
-					data: parsed.data,
-				},
-			},
-		});
-	}
+		},
+	});
 
 	revalidatePath(`/${orgId}/implementation/wizard/${wizardId}`);
 

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/wizard/[wizardId]/components/CompanyDetailsWizardForm.tsx

@@ -29,14 +29,7 @@ import {
 	SelectValue,
 } from "@comp/ui/select";
 import { useParams, useRouter } from "next/navigation";
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-} from "@comp/ui/breadcrumb";
-import PageWithBreadcrumb from "@/components/pages/PageWithBreadcrumb";
+import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
 
 const steps = [
 	"Company identity",
@@ -220,14 +213,14 @@ export const CompanyDetailsWizardForm = ({
 					return (
 						<div className="flex flex-col gap-2">
 							<Label htmlFor="companyWebsite">
-								Public website URL
+								Website
 							</Label>
 							<Input
 								id="companyWebsite"
-								type="url"
 								value={displayValue}
 								onChange={handleChange}
 								placeholder="acme.com"
+								prefix="https://"
 							/>
 							{errors.companyWebsite && (
 								<span className="text-destructive text-sm">
@@ -274,9 +267,9 @@ export const CompanyDetailsWizardForm = ({
 								);
 								return found
 									? {
-											value: found.value,
-											label: found.label,
-										}
+										value: found.value,
+										label: found.label,
+									}
 									: { value: v, label: v };
 							})}
 							placeholder="Select or add one..."
@@ -592,16 +585,24 @@ export const CompanyDetailsWizardForm = ({
 					}
 				}}
 			>
-				<WizardStepper steps={steps} currentStep={step} />
-				<WizardQuestion
-					step={step}
-					totalSteps={steps.length}
-					question={questionNodes[step]}
-					onNext={handleNext}
-					onBack={handleBack}
-					nextDisabled={false}
-					showBack={step > 0}
-				/>
+				<Card>
+					<CardHeader>
+						<CardTitle>
+							<WizardStepper steps={steps} currentStep={step} />
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<WizardQuestion
+							step={step}
+							totalSteps={steps.length}
+							question={questionNodes[step]}
+							onNext={handleNext}
+							onBack={handleBack}
+							nextDisabled={false}
+							showBack={step > 0}
+						/>
+					</CardContent>
+				</Card>
 			</form>
 		</FormProvider>
 	);

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/wizard/[wizardId]/components/WizardQuestion.tsx

@@ -35,8 +35,8 @@ export function WizardQuestion({
 						</Button>
 					)}
 				</div>
-				<div className="flex-1 flex justify-center">
-					<span className="text-muted-foreground text-sm select-none">
+				<div className="flex items-center justify-center">
+					<span className="text-muted-foreground text-xs select-none">
 						Step {step + 1} / {totalSteps}
 					</span>
 				</div>

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/wizard/[wizardId]/components/WizardStepper.tsx

@@ -7,8 +7,8 @@ interface WizardStepperProps {
 
 export function WizardStepper({ steps, currentStep }: WizardStepperProps) {
 	return (
-		<div className="mb-8">
-			<div className="text-3xl font-semibold">{steps[currentStep]}</div>
-		</div>
+		<div>
+			<div>{steps[currentStep]}</div>
+		</div >
 	);
 }