Divyanshu | Widget Preview issue fix

apps/36-blocks-widget/src/app/app.component.ts

@@ -22,7 +22,7 @@ const AUTH_TOKEN =
 export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
     private readonly themeService = inject(WidgetThemeService);
 
-    protected readonly showAuthentication: boolean = true;
+    protected readonly showAuthentication: boolean = false;
     protected readonly referenceId: string = REFERENCE_ID;
     protected readonly theme: WidgetTheme = THEME;
     protected readonly authToken: string = AUTH_TOKEN;
@@ -82,7 +82,6 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
             if (THEME) {
                 widgetConfig['theme'] = THEME;
             }
-            console.log('widgetConfig', widgetConfig);
             window.initVerification(widgetConfig);
         }
     }

apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.html

@@ -2,7 +2,7 @@
      MODE A — Preview-button mode (isUserProxyContainer = true)
      Shows a single "Preview" button; auth happens inside a portal dialog.
      ══════════════════════════════════════════════════════════════ -->
-@if (isUserProxyContainer()) {
+@if (isUserProxyContainer() && !isPreview()) {
 <section class="flex flex-col items-center gap-4 p-5">
     <h1>Click Here to preview this Reference ID: {{ referenceId() }}</h1>
     <button
@@ -128,7 +128,7 @@ <h2 class="text-base font-semibold text-gray-900 dark:text-white mb-2" [style.co
         aria-labelledby="auth-dialog-title"
         [class]="
             'fixed inset-x-4 top-1/2 z-50 -translate-y-1/2 sm:inset-x-auto sm:left-1/2 sm:w-full sm:-translate-x-1/2 rounded-xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-gray-900/5 dark:ring-white/10 flex flex-col max-h-[90vh] ' +
-            (showRegistrationInDialog() ? 'sm:max-w-md' : 'sm:max-w-sm')
+            (showRegistrationInDialog() ? 'max-w-[600px]' : 'max-w-[400px]')
         "
     >
         <!-- Dialog header -->

apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.ts

@@ -76,6 +76,7 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
     public referenceId = input<string>();
     public serviceData = input<any>();
     public tokenAuth = input<string>();
+    public isPreview = input<boolean>(false);
     public target = input<string>();
     public version = input<WidgetVersion>(WidgetVersion.V1);
     public input_fields = input<string>(InputFields.TOP);
@@ -380,6 +381,9 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
 
     ngAfterViewInit(): void {
         this.initIntl();
+        if (this.isPreview()) {
+            this.openPreviewDialog();
+        }
     }
 
     public initIntl() {

apps/36-blocks-widget/src/app/otp/widget/widget.component.html

@@ -14,15 +14,13 @@
         [include_role_ids]="include_role_ids"
     ></user-management>
     } @case (PublicScriptType.Subscription) {
-    <div [class.subscription-dialog]="isPreview">
-        <proxy-subscription-center
-            [referenceId]="referenceId"
-            [isPreview]="isPreview"
-            [isLogin]="isLogin"
-            [loginRedirectUrl]="loginRedirectUrl"
-            (togglePopUp)="handleSubscriptionToggle($event)"
-        ></proxy-subscription-center>
-    </div>
+    <proxy-subscription-center
+        [referenceId]="referenceId"
+        [isPreview]="isPreview"
+        [isLogin]="isLogin"
+        [loginRedirectUrl]="loginRedirectUrl"
+        (togglePopUp)="handleSubscriptionToggle($event)"
+    ></proxy-subscription-center>
     } @case (PublicScriptType.OrganizationDetails) {
     <organization-details [authToken]="authToken" [theme]="theme"></organization-details>
     } @case (PublicScriptType.UserProfile) {
@@ -38,6 +36,7 @@
         }
         <authorization
             [referenceId]="referenceId"
+            [isPreview]="isPreview"
             [serviceData]="otpWidgetData"
             [target]="target"
             [version]="version"

apps/36-blocks/src/app/features/create-feature/create-feature.component.html

@@ -1091,6 +1091,8 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
     <div class="flex items-center justify-start mt-6">
         <button type="button" matButton="filled" (click)="previewFeature()">Preview</button>
     </div>
+    <!-- Use id to render Authorization widget -->
+    <div [id]="proxyDomId"></div>
     }
 </ng-template>
 

apps/36-blocks/src/app/features/create-feature/create-feature.component.ts

@@ -52,7 +52,7 @@ import {
     ProxyAuthScript,
     ProxyAuthScriptUrl,
 } from '@proxy/models/features-model';
-import { PublicScriptType, WidgetTheme } from '@proxy/constant';
+import { PROXY_DOM_ID, PublicScriptType, WidgetTheme } from '@proxy/constant';
 import { AbstractControl, FormArray, FormControl, FormGroup, Validators, ValidatorFn } from '@angular/forms';
 import { CAMPAIGN_NAME_REGEX, ONLY_INTEGER_REGEX, URL_REGEX } from '@proxy/regex';
 import { CustomValidators } from '@proxy/custom-validator';
@@ -332,6 +332,7 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy,
     });
     public demoDiv = signal<string>(null);
     public keepOrder = () => 0;
+    protected readonly proxyDomId = PROXY_DOM_ID;
 
     ngOnInit(): void {
         this.componentStore.getWebhookEvents();

apps/36-blocks/src/environments/environment.ts

@@ -7,7 +7,7 @@ import { envVariables } from './env-variables';
 export const environment = {
     production: false,
     env: 'local',
-    proxyServer: 'https://test.proxy.msg91.com',
+    proxyServer: 'http://localhost:4200',
     baseUrl: 'https://apitest.msg91.com/api',
     ...envVariables,
 };