Organization Onboarding Workflow

2026-07-26 14:11:19 +05:30
parent f88f8739b8
commit 95fc5bf17f
61 changed files with 2645 additions and 1051 deletions
@@ -1,66 +1,63 @@
-<div class="main-content">
-  <div class="container-fluid">
-    <div class="mb-6">
-      <h1 class="text-xl font-semibold text-defaulttextcolor">
-        Create Organization
-      </h1>
+<div class="mb-4 sm:mb-6">
+  <h1 class="text-xl font-semibold text-defaulttextcolor">
+    Create Organization
+  </h1>
+</div>

+<section
+  class="rounded-xl border border-defaultborder bg-white
+         p-3.5 sm:p-5 shadow-sm dark:border-white/10 dark:bg-bodybg"
+>
+  <onboarding-stepper
+    [steps]="steps"
+    [currentStepIndex]="currentStepIndex()"
+    [completedStepIndexes]="completedStepIndexes()"
+    [savingDraft]="savingDraft()"
+    [finishing]="finishing()"
+    [navigationDisabled]="navigationDisabled()"
+    (stepSelected)="onStepSelected($event)"
+    (backClicked)="onBack()"
+    (nextClicked)="onNext()"
+    (saveDraftClicked)="onSaveDraft()"
+    (finishClicked)="onFinish()"
+    (cancelClicked)="onCancel()"
+  >
+    <div [class.hidden]="currentStep().key !== 'basics'" [attr.aria-hidden]="currentStep().key !== 'basics'">
+      <app-organization-basics-step />
    </div>

-    <section
-      class="rounded-xl border border-defaultborder bg-white
-             p-5 shadow-sm dark:border-white/10 dark:bg-bodybg"
-    >
-      <onboarding-stepper
-        [steps]="steps"
-        [currentStepIndex]="currentStepIndex()"
-        [completedStepIndexes]="completedStepIndexes()"
-        [savingDraft]="savingDraft()"
-        [finishing]="finishing()"
-        [navigationDisabled]="navigationDisabled()"
-        (stepSelected)="onStepSelected($event)"
-        (backClicked)="onBack()"
-        (nextClicked)="onNext()"
-        (saveDraftClicked)="onSaveDraft()"
-        (finishClicked)="onFinish()"
-        (cancelClicked)="onCancel()"
-      >
-        @switch (currentStep().key) {
-          @case ('basics') {
-            <app-organization-basics-step #basicsStep />
-          }
+    <div [class.hidden]="currentStep().key !== 'localization'" [attr.aria-hidden]="currentStep().key !== 'localization'">
+      <app-organization-localization-step />
+    </div>

-          @case ('localization') {
-            <div
-              class="min-h-72 rounded-xl border border-dashed
-                     border-defaultborder bg-gray-50 p-6
-                     dark:border-white/10 dark:bg-bodybg"
-            >
-              Localization content
-            </div>
-          }
+    <div [class.hidden]="currentStep().key !== 'plan-limits'" [attr.aria-hidden]="currentStep().key !== 'plan-limits'">
+      <app-organization-plan-limits-step />
+    </div>

-          @case ('plan-limits') {
-            <div
-              class="min-h-72 rounded-xl border border-dashed
-                     border-defaultborder bg-gray-50 p-6
-                     dark:border-white/10 dark:bg-bodybg"
-            >
-              Plan and Limits content
-            </div>
-          }
+    <div [class.hidden]="currentStep().key !== 'admin-user'" [attr.aria-hidden]="currentStep().key !== 'admin-user'">
+      <app-organization-admin-step [reviewData]="stateService.onboardingData()" />
+    </div>
+  </onboarding-stepper>
+</section>

-          @case ('admin-user') {
-            <div
-              class="min-h-72 rounded-xl border border-dashed
-                     border-defaultborder bg-gray-50 p-6
-                     dark:border-white/10 dark:bg-bodybg"
-            >
-              Admin and User content
-            </div>
-          }
-        }
-      </onboarding-stepper>
-    </section>
-  </div>
-</div>
+<app-confirm-dialog
+  #cancelConfirmDialog
+  title="Discard onboarding changes?"
+  text="Your unsaved changes will be lost."
+  confirmButtonText="Discard and Leave"
+  cancelButtonText="Stay"
+  (confirmed)="onDiscardAndLeave()"
+>
+  <span class="hidden"></span>
+</app-confirm-dialog>
+
+<app-confirm-dialog
+  #finishConfirmDialog
+  title="Finish organization onboarding?"
+  text="All details are valid. Provisioning will begin after the backend integration is connected."
+  confirmButtonText="Confirm"
+  cancelButtonText="Review"
+  (confirmed)="onProvisioningConfirmed()"
+>
+  <span class="hidden"></span>
+</app-confirm-dialog>