Production pr

apps/proxy-auth/src/app/otp/organization-details/organization-details.component.html

@@ -5,7 +5,15 @@
             <h2 class="page-title">Organization Details</h2>
 
             <div class="header-actions" *ngIf="!isEditing">
-                <button type="button" class="edit-btn" (click)="startEdit()">
+                <button
+                    type="button"
+                    [ngClass]="{ 'disabled': !allowedUpdatePermissions }"
+                    [disabled]="!allowedUpdatePermissions"
+                    class="edit-btn"
+                    (click)="startEdit()"
+                    [matTooltip]="!allowedUpdatePermissions ? 'No permission' : ''"
+                    matTooltipPosition="right"
+                >
                     <svg
                         class="btn-icon"
                         viewBox="0 0 24 24"
@@ -129,7 +137,7 @@ <h2 class="page-title">Organization Details</h2>
                 <mat-label>Email </mat-label>
                 <input matInput type="email" formControlName="email" placeholder="Enter email" />
                 <mat-error *ngIf="organizationForm.get('email')?.hasError('required')"> Email is required. </mat-error>
-                <mat-error *ngIf="organizationForm.get('email')?.hasError('email')">
+                <mat-error *ngIf="organizationForm.get('email')?.hasError('pattern')">
                     Please enter a valid email.
                 </mat-error>
             </mat-form-field>

apps/proxy-auth/src/app/otp/organization-details/organization-details.component.scss

@@ -228,31 +228,6 @@
         background: #1976d2;
         color: #ffffff;
     }
-
-    // Disabled mat-form-field (e.g. Timezone when not editing)
-    .mat-form-field-disabled.timezone-field,
-    .mat-form-field .mdc-text-field--disabled {
-        opacity: 0.7;
-
-        .mat-select-value,
-        .mat-select-value-text,
-        .mat-input-element,
-        mat-label,
-        .mat-form-field-label {
-            color: rgba(0, 0, 0, 0.38) !important;
-        }
-        .mat-select-arrow,
-        .mat-select-arrow svg {
-            color: rgba(0, 0, 0, 0.38) !important;
-            fill: rgba(0, 0, 0, 0.38) !important;
-        }
-        .mdc-notched-outline__leading,
-        .mdc-notched-outline__notch,
-        .mdc-notched-outline__trailing,
-        .mat-form-field-outline {
-            border-color: rgba(0, 0, 0, 0.12) !important;
-        }
-    }
 }
 
 // ── Dark theme ────────────────────────────────────────────────────────
@@ -382,31 +357,6 @@
     .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
         border-color: rgba(255, 255, 255, 0.3) !important;
     }
-
-    // Disabled mat-form-field (e.g. Timezone when not editing)
-    .mat-form-field-disabled.timezone-field,
-    .mat-form-field .mdc-text-field--disabled {
-        opacity: 0.7;
-
-        .mat-select-value,
-        .mat-select-value-text,
-        .mat-select-value-text span,
-        .mat-input-element,
-        mat-label,
-        .mat-form-field-label {
-            color: rgba(255, 255, 255, 0.38) !important;
-        }
-        .mat-select-arrow,
-        .mat-select-arrow svg {
-            color: rgba(255, 255, 255, 0.38) !important;
-            fill: rgba(255, 255, 255, 0.38) !important;
-        }
-        .mdc-notched-outline__leading,
-        .mdc-notched-outline__notch,
-        .mdc-notched-outline__trailing {
-            border-color: rgba(255, 255, 255, 0.12) !important;
-        }
-    }
 }
 
 // ── Snackbars ─────────────────────────────────────────────────────────
@@ -433,3 +383,11 @@
         color: #ffffff !important;
     }
 }
+.disabled {
+    opacity: 0.5;
+}
+.timezone-field {
+    .mat-select-arrow-wrapper {
+        height: unset;
+    }
+}

apps/proxy-auth/src/app/otp/organization-details/organization-details.component.ts

@@ -6,6 +6,7 @@ import { BaseComponent } from 'libs/ui/base-component/src/lib/base-component/bas
 import { OtpService } from '../service/otp.service';
 import { finalize, takeUntil } from 'rxjs';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { EMAIL_REGEX } from '@proxy/regex';
 
 @Component({
     selector: 'organization-details',
@@ -19,7 +20,7 @@ export class OrganizationDetailsComponent extends BaseComponent implements OnIni
 
     public organizationForm = new FormGroup({
         companyName: new FormControl<string>('', [Validators.required, Validators.minLength(3)]),
-        email: new FormControl<string>('', [Validators.required, Validators.email]),
+        email: new FormControl<string>('', [Validators.required, Validators.pattern(EMAIL_REGEX)]),
         phoneNumber: new FormControl<string>('', [Validators.pattern(/^$|^[0-9]{10,15}$/)]),
         timezone: new FormControl<string>('', [Validators.required]),
         timeZoneName: new FormControl<string>('', [Validators.required]),
@@ -49,15 +50,18 @@ export class OrganizationDetailsComponent extends BaseComponent implements OnIni
         super();
     }
 
+    public allowedUpdatePermissions: boolean = false;
+
     ngOnInit(): void {
-        this.organizationForm.get('timeZoneName')?.disable();
         if (this.authToken) {
             this.otpService
                 .getOrganizationDetails(this.authToken)
                 .pipe(takeUntil(this.destroy$))
                 .subscribe({
                     next: (res) => {
                         const company = res?.data?.[0]?.currentCompany;
+                        this.allowedUpdatePermissions =
+                            res?.data?.[0]?.currentCompany?.permissions?.includes('update_c_company');
                         if (company && typeof company === 'object') {
                             const timeZoneName =
                                 company.timeZoneName ??
@@ -180,15 +184,29 @@ export class OrganizationDetailsComponent extends BaseComponent implements OnIni
                     //     verticalPosition: 'top',
                     //     panelClass: ['success-snackbar'],
                     // });
+                    window.dispatchEvent(
+                        new CustomEvent('organizationDetailsUpdateResponse', {
+                            bubbles: true,
+                            composed: true,
+                            detail: { data: res?.data, error: false },
+                        })
+                    );
                 },
-                error: () => {
+                error: (error) => {
                     // Stay in edit mode so user can retry
                     // this.snackBar.open('Something went wrong', '✕', {
                     //     duration: 3000,
                     //     horizontalPosition: 'center',
                     //     verticalPosition: 'top',
                     //     panelClass: ['error-snackbar'],
                     // });
+                    window.dispatchEvent(
+                        new CustomEvent('organizationDetailsUpdateResponse', {
+                            bubbles: true,
+                            composed: true,
+                            detail: { data: error?.error?.errors ?? error?.error ?? error, error: true },
+                        })
+                    );
                 },
             });
     }

apps/proxy-auth/src/app/otp/otp.module.ts

@@ -46,6 +46,8 @@ import { MatDividerModule } from '@angular/material/divider';
 import { UiConfirmDialogModule } from '@proxy/ui/confirm-dialog';
 import { OrganizationDetailsComponent } from './organization-details/organization-details.component';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { ShadowDomOverlayContainer } from '../shadow-dom-overlay-container';
 
 export const CHAT_COMPONENTS: any[] = [
     SendOtpComponent,
@@ -105,6 +107,7 @@ export const CHAT_COMPONENTS: any[] = [
         OtpService,
         OtpUtilityService,
         OtpWidgetService,
+        { provide: OverlayContainer, useClass: ShadowDomOverlayContainer },
         { provide: ProxyBaseUrls.Env, useValue: environment.env },
         {
             provide: ProxyBaseUrls.BaseURL,

apps/proxy-auth/src/app/shadow-dom-overlay-container.ts

@@ -0,0 +1,56 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { Platform } from '@angular/cdk/platform';
+
+const CONTAINER_CLASS = 'cdk-overlay-container';
+/** Full-viewport overlay container style so positioning is viewport-based when in shadow root */
+const OVERLAY_CONTAINER_STYLE =
+    'position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;pointer-events:none!important;z-index:1000!important;';
+/**
+ * OverlayContainer that:
+ * - When proxy-auth with shadow root exists (script load): attaches the overlay as the
+ *   **first** child of the shadow root with full-viewport fixed style, so it is NOT
+ *   inside the fixed .container and positioning is correct (dropdown below the right field).
+ * - Otherwise: attaches to document.body (default behaviour).
+ */
+@Injectable()
+export class ShadowDomOverlayContainer extends OverlayContainer {
+    constructor(@Inject(DOCUMENT) document: Document, _platform: Platform) {
+        super(document, _platform);
+    }
+
+    protected override _createContainer(): void {
+        if (!this._platform.isBrowser) {
+            return;
+        }
+
+        const container = this._document.createElement('div');
+        container.classList.add(CONTAINER_CLASS);
+
+        const parent = this._getOverlayParent();
+        if (parent !== this._document.body) {
+            container.setAttribute('style', OVERLAY_CONTAINER_STYLE);
+            const first = parent.firstChild;
+            if (first) {
+                parent.insertBefore(container, first);
+            } else {
+                parent.appendChild(container);
+            }
+        } else {
+            parent.appendChild(container);
+        }
+        this._containerElement = container;
+    }
+
+    private _getOverlayParent(): HTMLElement {
+        const host =
+            (this._document.querySelector('proxy-auth:not([data-master])') as HTMLElement | null) ??
+            (this._document.querySelector('proxy-auth') as HTMLElement | null);
+
+        if (host?.shadowRoot) {
+            return host.shadowRoot as unknown as HTMLElement;
+        }
+        return this._document.body;
+    }
+}