From 4daa2bd3b38618a9cec9259acbdcfc2c20d9bd31 Mon Sep 17 00:00:00 2001
From: VijayalakshmiSF4471
 <164475295+VijayalakshmirSF4471@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:26:54 +0530
Subject: [PATCH] feature(402683): customer block node customization

---
 .../workflow-diagram.component.html           | 609 +++++++++++-------
 .../workflow-diagram.component.ts             | 468 +++++++++-----
 src/app/data/list-data.ts                     |   2 +
 3 files changed, 665 insertions(+), 414 deletions(-)

diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
index 2b39273..1da0bed 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -7,9 +7,9 @@
         <e-items>
           <e-item text='Save' tooltipText='Save' prefixIcon='e-ddb-icons e-save'></e-item>
           <e-item type='Separator'></e-item>
-          <e-item text='Load' tooltipText='Load' prefixIcon='e-ddb-icons e-open'>
+          <!-- <e-item text='Load' tooltipText='Load' prefixIcon='e-ddb-icons e-open'>
                 <div> <input id="fileupload" type="file" /></div>
-              </e-item>
+              </e-item> -->
         </e-items>
       </ejs-toolbar>
       <div> <input id="fileupload" type="file" /></div>
@@ -32,102 +32,128 @@
     </ng-template>
 
     <ng-template #nodeTemplate let-data>
-      @switch (data.addInfo.chatWorkflowBlockId){
+      @switch (data.addInfo[0].chatWorkflowBlockId){
         @case(chatWorkflowBlockTypeEnum.GetPickerInput){
-          @switch (data.addInfo.chatWorkflowEditorTypeId){
+          @switch (data.addInfo[0].chatWorkflowEditorTypeId){
             @case (chatWorkflowEditorTypeEnum.Boolean){
               <ng-container>
-                <div><label style="padding: 5px;">{{ data.addInfo.fieldDetails.label }}</label></div>
+                <div><label style="padding: 5px;">{{ data.addInfo[0].fieldDetails.label }}</label></div>
                 <div><button type="button" ejs-button style="width: 85%;" class="e-btn e-success">Yes</button></div>
                 <div><button type="button" ejs-button style="width: 85%;" class="e-btn e-danger">No</button></div>
               </ng-container>
             }
             @case (chatWorkflowEditorTypeEnum.Buttons){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <div *ngFor="let option of data.addInfo.fieldOptionDetails; let i = index" class="button-item">
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <div *ngFor="let option of data.addInfo[0].fieldOptionDetails; let i = index" class="button-item">
                   <button ejs-button cssClass="e-primary" style="width: 85%;">{{option.label}}</button>
                 </div>
               </ng-container>
             }
             @case (chatWorkflowEditorTypeEnum.DropDown){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-dropdownlist [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields"
-                  [placeholder]="data.addInfo.fieldDetails.placeholder" cssClass="e-primary" width="85%">
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-dropdownlist [dataSource]="data.addInfo[0].fieldOptionDetails" [fields]="ddlFields"
+                  [placeholder]="data.addInfo[0].fieldDetails.placeholder" cssClass="e-primary" width="85%">
                 </ejs-dropdownlist>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.MultiSelect){
               <ng-container >
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-multiselect [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields"
-                  [placeholder]="data.addInfo.fieldDetails.placeholder"
-                  [maximumSelectionLength]="data.addInfo.fieldDetails.fieldValidation.max" cssClass="e-primary" width="85%">
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-multiselect [dataSource]="data.addInfo[0].fieldOptionDetails" [fields]="ddlFields"
+                  [placeholder]="data.addInfo[0].fieldDetails.placeholder"
+                  [maximumSelectionLength]="data.addInfo[0].fieldDetails.fieldValidation.max" cssClass="e-primary" width="85%">
                 </ejs-multiselect>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.List){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-listview id='sample-list' [dataSource]='data.addInfo.fieldOptionDetails'
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-listview id='sample-list' [dataSource]='data.addInfo[0].fieldOptionDetails'
                   [fields]='ddlFields'></ejs-listview>
               </ng-container>
             }
           }
         }
         @case(chatWorkflowBlockTypeEnum.GetTextInput){
-          @switch (data.addInfo.chatWorkflowEditorTypeId){
+          @switch (data.addInfo[0].chatWorkflowEditorTypeId){
             @case(chatWorkflowEditorTypeEnum.Text){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"></ejs-textbox>
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-textbox [placeholder]="data.addInfo[0].fieldDetails.placeholder" readonly="true"></ejs-textbox>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.TextArea){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-textarea [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"
-                  [maxLength]="data.addInfo.fieldDetails.fieldValidation.max"></ejs-textarea>
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-textarea [placeholder]="data.addInfo[0].fieldDetails.placeholder" readonly="true"
+                  [maxLength]="data.addInfo[0].fieldDetails.fieldValidation.max"></ejs-textarea>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.Date){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-datepicker [placeholder]="data.addInfo.fieldDetails.placeholder" [readonly]="true"></ejs-datepicker>
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-datepicker [placeholder]="data.addInfo[0].fieldDetails.placeholder" [readonly]="true"></ejs-datepicker>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.DateTime){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-datetimepicker [placeholder]="data.addInfo.fieldDetails.placeholder"
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-datetimepicker [placeholder]="data.addInfo[0].fieldDetails.placeholder"
                   [readonly]="true"></ejs-datetimepicker>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.Number){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-numerictextbox format='n0' [min]="'data.addInfo.fieldDetails.fieldValidation.min'"
-                  [max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder"
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-numerictextbox format='n0' [min]="'data.addInfo[0].fieldDetails.fieldValidation.min'"
+                  [max]="'data.addInfo[0].fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo[0].fieldDetails.placeholder"
                   readonly="true" floatLabelType='Auto'></ejs-numerictextbox>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.Decimal){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-numerictextbox [min]="'data.addInfo.fieldDetails.fieldValidation.min'"
-                  [max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder"
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-numerictextbox [min]="'data.addInfo[0].fieldDetails.fieldValidation.min'"
+                  [max]="'data.addInfo[0].fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo[0].fieldDetails.placeholder"
                   readonly="true" floatLabelType='Auto'></ejs-numerictextbox>
               </ng-container>
             }
             @case(chatWorkflowEditorTypeEnum.Regex){
               <ng-container>
-                <div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
-                <ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"></ejs-textbox>
+                <div><label style="padding: 5px;">{{data.addInfo[0].fieldDetails.label}}</label></div>
+                <ejs-textbox [placeholder]="data.addInfo[0].fieldDetails.placeholder" readonly="true"></ejs-textbox>
               </ng-container>
             }
           }
         }
+        @case(chatWorkflowBlockTypeEnum.SendTextMessage){
+          <ng-container>
+            <div><label style="padding: 5px;">{{data.addInfo[0].messageDetails.text}}</label></div>
+          </ng-container>
+        }
+        @case(chatWorkflowBlockTypeEnum.GetCustomerDetails){
+          <ng-container>
+            <!-- Always show the email details -->
+            <div *ngFor="let info of data.addInfo">
+              @switch (info.chatWorkflowEditorTypeId){
+                @case(chatWorkflowEditorTypeEnum.Email){
+                  <label style="padding: 5px;">{{info.fieldDetails.label}}</label>
+                  <ejs-textbox [placeholder]="info.fieldDetails.placeholder" readonly="true"></ejs-textbox>
+                }
+                @case(chatWorkflowEditorTypeEnum.PhoneNumber){
+                  <label style="padding: 5px;">{{info.fieldDetails.label}}</label>
+                  <ejs-textbox [placeholder]="info.fieldDetails.placeholder" readonly="true"></ejs-textbox>
+                }
+                @case(chatWorkflowEditorTypeEnum.Name){
+                  <label style="padding: 5px;">{{info.fieldDetails.label}}</label>
+                  <ejs-textbox [placeholder]="info.fieldDetails.placeholder" readonly="true"></ejs-textbox>
+                }
+              }
+            </div>
+          </ng-container>
+        }
       }
     </ng-template>
   </ejs-diagram>
@@ -145,380 +171,485 @@
             <div class="form-header">
                 {{sidebarHeader}}
             </div>
-            @switch(nodeEditType){
-                @case(chatWorkflowEditorTypeEnum.Boolean){
-                <div>
-                    <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter question..."
-                        class="description-box" required />
-
+            @switch(nodeBlockType){
+              @case(chatWorkflowBlockTypeEnum.GetPickerInput){
+                @switch(nodeEditType){
+                  @case(chatWorkflowEditorTypeEnum.Boolean){
                     <div>
+                      <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter question..."
+                        class="description-box" required />
+      
+                      <div>
                         <div><button type="button" ejs-button class="e-btn e-success">Yes</button></div>
                         <div><button type="button" ejs-button class="e-btn e-danger">No</button></div>
+                      </div>
                     </div>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.Buttons){
-                <div>
-                    <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter your question..."
-                        class="description-box" required />
-
-                    <div class="button-list">
+                  }
+                  @case(chatWorkflowEditorTypeEnum.Buttons){
+                    <div>
+                      <input type="text" [(ngModel)]="sideBarLabel" name="question" placeholder="Enter your question..."
+                          class="description-box" required />
+    
+                      <div class="button-list">
                         <div *ngFor="let button of buttons; let i = index" class="button-item">
-                            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                            <button ejs-button type="button" cssClass="e-danger remove-icon"
-                                (click)="removeButton(i)">✖</button>
+                          <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+                          <button ejs-button type="button" cssClass="e-danger remove-icon"
+                              (click)="removeButton(i)">✖</button>
                         </div>
-                    </div>
-
-                    <div class="add-button-form">
+                      </div>
+    
+                      <div class="add-button-form">
                         <div>
-                            <input #buttonLabel type="text" placeholder="Button Label" class="button-input" />
+                          <input #buttonLabel type="text" placeholder="Button Label" class="button-input" />
                         </div>
                         <div>
-                            <input #buttonValue type="text" placeholder="Button Value" class="button-input" />
+                          <input #buttonValue type="text" placeholder="Button Value" class="button-input" />
                         </div>
                         <div>
-                            <button type="button" style="width: 100%;"
-                                (click)="addButton(buttonLabel.value, buttonValue.value, null, buttonLabel, buttonValue, null)"
-                                class="e-btn">Add Option</button>
+                          <button type="button" style="width: 100%;"
+                              (click)="addButton(buttonLabel.value, buttonValue.value, null, buttonLabel, buttonValue, null)"
+                              class="e-btn">Add Option</button>
                         </div>
+                      </div>
                     </div>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.DropDown){
-                <div>
-                    <label>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.DropDown){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="singleLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="singleDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="singlePlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <div class="button-list">
+                      </label>
+    
+                      <div class="button-list">
                         <div *ngFor="let button of buttons; let i = index" class="button-item">
-                            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                            <button ejs-button type="button" cssClass="e-danger remove-icon"
-                                (click)="removeButton(i)">✖</button>
+                          <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+                          <button ejs-button type="button" cssClass="e-danger remove-icon"
+                              (click)="removeButton(i)">✖</button>
                         </div>
-                    </div>
-                    <div class="add-button-form">
+                      </div>
+                      <div class="add-button-form">
                         <div>
-                            <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
+                          <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
                         </div>
                         <div>
-                            <input #optionValue type="text" placeholder="Option Value" class="button-input" />
+                          <input #optionValue type="text" placeholder="Option Value" class="button-input" />
                         </div>
                         <div>
-                            <button type="button" style="width: 100%;"
-                                (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)"
-                                class="e-btn">Add Option</button>
+                          <button type="button" style="width: 100%;"
+                              (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)"
+                              class="e-btn">Add Option</button>
                         </div>
+                      </div>
                     </div>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.MultiSelect){
-                <div>
-                    <label>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.MultiSelect){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="multiLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="multiDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="multiPlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <div class="button-list">
+                      </label>
+    
+                      <div class="button-list">
                         <div *ngFor="let button of buttons; let i = index" class="button-item">
-                            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                            <button ejs-button type="button" cssClass="e-danger remove-icon"
-                                (click)="removeButton(i)">✖</button>
+                          <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+                          <button ejs-button type="button" cssClass="e-danger remove-icon"
+                              (click)="removeButton(i)">✖</button>
                         </div>
-                    </div>
-                    <div class="add-button-form">
+                      </div>
+                      <div class="add-button-form">
                         <div>
-                            <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
+                          <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
                         </div>
                         <div>
-                            <input #optionValue type="text" placeholder="Option Value" class="button-input" />
+                          <input #optionValue type="text" placeholder="Option Value" class="button-input" />
                         </div>
                         <div>
-                            <button type="button" style="width: 100%;"
-                                (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)"
-                                class="e-btn">Add Option</button>
+                          <button type="button" style="width: 100%;"
+                              (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)"
+                              class="e-btn">Add Option</button>
                         </div>
-                    </div>
-                    <label>
+                      </div>
+                      <label>
                         Minimum Value:
                         <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue"
                             placeholder="Enter Minimum value here" class="description-box" />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Maximum Value:
                         <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
                             placeholder="Enter Maximum value here" class="description-box" />
-                    </label>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.List){
-                <div>
-                    <label>
+                      </label>
+                    </div>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.List){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="listLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="listDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="listPlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <div class="button-list">
+                      </label>
+    
+                      <div class="button-list">
                         <div *ngFor="let button of buttons; let i = index" class="button-item">
-                            <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
-                            <button ejs-button type="button" cssClass="e-danger remove-icon"
-                                (click)="removeButton(i)">✖</button>
+                          <button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
+                          <button ejs-button type="button" cssClass="e-danger remove-icon"
+                              (click)="removeButton(i)">✖</button>
                         </div>
-                    </div>
-                    <div class="add-button-form">
+                      </div>
+                      <div class="add-button-form">
                         <div>
-                            <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
+                          <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
                         </div>
                         <div>
-                            <input #optionValue type="text" placeholder="Option Value" class="button-input" />
+                          <input #optionValue type="text" placeholder="Option Value" class="button-input" />
                         </div>
                         <div>
-                            <input #optionDescription type="text" placeholder="Option Description" class="button-input" />
+                          <input #optionDescription type="text" placeholder="Option Description" class="button-input" />
                         </div>
                         <div>
-                            <button type="button" style="width: 100%;"
-                                (click)="addButton(optionLabel.value, optionValue.value, optionDescription.value, optionLabel, optionValue, optionDescription)"
-                                class="e-btn">Add Option</button>
+                          <button type="button" style="width: 100%;"
+                              (click)="addButton(optionLabel.value, optionValue.value, optionDescription.value, optionLabel, optionValue, optionDescription)"
+                              class="e-btn">Add Option</button>
                         </div>
+                      </div>
                     </div>
-                </div>
+                  }
                 }
-                @case(chatWorkflowEditorTypeEnum.Date){
-                <div>
-                    <label>
+              }
+              @case(chatWorkflowBlockTypeEnum.GetTextInput){
+                @switch(nodeEditType){
+                  @case(chatWorkflowEditorTypeEnum.Date){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="inputDateLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="inputDateDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDatePlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         From:
                         <ejs-datepicker [(ngModel)]="fromDate"></ejs-datepicker>
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         To:
                         <ejs-datepicker [(ngModel)]="toDate"></ejs-datepicker>
-                    </label>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.DateTime){
-                <div>
-                    <label>
+                      </label>
+                    </div>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.DateTime){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="inputDateLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="inputDateDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDatePlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         From:
                         <ejs-datetimepicker [(ngModel)]="fromDate"></ejs-datetimepicker>
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         To:
                         <ejs-datetimepicker [(ngModel)]="toDate"></ejs-datetimepicker>
-                    </label>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.Number){
-                <div>
-                    <label>
+                      </label>
+                    </div>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.Number){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="inputNumberLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="inputNumberDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputNumberPlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         Minimum Value:
                         <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue"
                             placeholder="Enter Minimum value here" class="description-box" />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Maximum Value:
                         <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
                             placeholder="Enter Maximum value here" class="description-box" />
-                    </label>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.Decimal){
-                <div>
-                    <label>
+                      </label>
+                    </div>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.Decimal){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="inputDecimalLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="inputDecimalDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputDecimalPlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         Minimum Value:
                         <input type="number" [(ngModel)]="fieldOptionMinValue" name="fieldOptionMinValue"
                             placeholder="Enter Minimum value here" class="description-box" step="0.01" />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Maximum Value:
                         <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
                             placeholder="Enter Maximum value here" class="description-box" step="0.01" />
-                    </label>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.Text){
-                <div>
-                    <label>
+                      </label>
+                    </div>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.Text){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="inputTextLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="inputTextDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputTextPlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+    
+                      <label>
                         Maximum Characters:
                         <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
                             placeholder="Enter Maximum value here" class="description-box" />
-                    </label>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.TextArea){
-                <div>
-                    <label>
+                      </label>
+                    </div>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.TextArea){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="inputTextAreaLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="inputTextAreaDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputTextAreaPlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Maximum Characters:
                         <input type="number" [(ngModel)]="fieldOptionMaxValue" name="fieldOptionMaxValue"
                             placeholder="Enter Maximum value here" class="description-box" />
-                    </label>
-                </div>
-                }
-                @case(chatWorkflowEditorTypeEnum.Regex){
-                <div>
-                    <label>
+                      </label>
+                    </div>
+                  }
+                  @case(chatWorkflowEditorTypeEnum.Regex){
+                    <div>
+                      <label>
                         Label:
                         <input type="text" [(ngModel)]="sideBarLabel" name="inputRegexLabel" placeholder="Enter label..."
                             class="description-box" required />
-                    </label>
-                    <label>
+                      </label>
+                      <label>
                         Description:
                         <input type="text" [(ngModel)]="sideBarDescription" name="inputRegexDescription"
                             placeholder="Enter description..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Placeholder:
                         <input type="text" [(ngModel)]="sideBarPlaceholder" name="inputRegexPlaceholder"
                             placeholder="Enter placeholder..." class="description-box" />
-                    </label>
-
-                    <label>
+                      </label>
+  
+                      <label>
                         Regex:
                         <input type="text" [(ngModel)]="fieldOptionRegexValue" name="fieldOptionRegexValue"
                             placeholder="Enter regex here" class="description-box" />
+                      </label>
+                    </div>
+                  }
+                }
+              }
+              @case(chatWorkflowBlockTypeEnum.SendTextMessage){
+                <label>
+                  Message:
+                  <input type="text" [(ngModel)]="customMessage" name="customMessageText" placeholder="Enter Message..."
+                    class="description-box" required />
+                </label>
+        
+                <label>
+                  Text Format:
+                </label>
+                <ejs-dropdownlist #ddlTextFormat style="padding-bottom: 20px;" [dataSource]="textFormatDDLOptions"
+                  [fields]="ddlTextFormatFields" placeholder="Select" cssClass="e-primary" width="85%">
+                </ejs-dropdownlist>
+        
+                <div>
+                  <label style="text-align: center;"> Is Private: </label>
+                  <ejs-switch [(ngModel)]="checkedIsPrivate" name="customMessageIsPrivate" id="isPrivateCustomMessage"
+                    cssClass="custom-iOS" [checked]="false"></ejs-switch>
+                </div>
+              }
+              @case(chatWorkflowBlockTypeEnum.GetCustomerDetails){
+                <label>
+                  Email Label:
+                  <input type="text" [(ngModel)]="emailDetails.label" name="emailLabel" placeholder="Enter Email Label..."
+                    class="description-box" required #emailLabel="ngModel" />
+                  <div *ngIf="emailLabel.invalid && emailLabel.touched" class="error">Email Label is required.</div>
+                </label>
+        
+                <label>
+                  Email Description:
+                  <input type="text" [(ngModel)]="emailDetails.description" name="emailDescription"
+                    placeholder="Enter Email Description..." class="description-box" required #emailDescription="ngModel" />
+                  <div *ngIf="emailDescription.invalid && emailDescription.touched" class="error">Email Description is required.
+                  </div>
+                </label>
+                <label>
+                  Email Placeholder:
+                  <input type="text" [(ngModel)]="emailDetails.placeholder" name="emailPlaceholder"
+                    placeholder="Enter Email Placeholder..." class="description-box" required #emailPlaceholder="ngModel" />
+                  <div *ngIf="emailPlaceholder.invalid && emailPlaceholder.touched" class="error">Email Placeholder is required.
+                  </div>
+                </label>
+
+                <!-- Checkboxes for Name and Phone Number -->
+                <div>
+                  <label>
+                    <input type="checkbox" [(ngModel)]="showName" name="showName" [disabled]="!isEmailValid()" /> Include Name
+                    Details
+                  </label>
+                  <!-- Name Details Section (visible when 'Include Name Details' is checked) -->
+                  <div *ngIf="showName">
+                    <label>
+                      Name Label:
+                      <input type="text" [(ngModel)]="nameDetails.label" name="nameLabel" placeholder="Enter Name Label..."
+                        class="description-box" />
+                    </label>
+
+                    <label>
+                      Name Description:
+                      <input type="text" [(ngModel)]="nameDetails.description" name="nameDescription"
+                        placeholder="Enter Name Description..." class="description-box" />
+                    </label>
+
+                    <label>
+                      Name Placeholder:
+                      <input type="text" [(ngModel)]="nameDetails.placeholder" name="namePlaceholder"
+                        placeholder="Enter Name Placeholder..." class="description-box" />
+                    </label>
+                  </div>
+
+                  <label>
+                    <input type="checkbox" [(ngModel)]="showPhoneNumber" name="showPhoneNumber" [disabled]="!isEmailValid()" />
+                    Include Phone Number Details
+                  </label>
+
+                  <!-- Phone Number Details Section (visible when 'Include Phone Number Details' is checked) -->
+                  <div *ngIf="showPhoneNumber">
+                    <label>
+                      Phone Label:
+                      <input type="text" [(ngModel)]="phoneDetails.label" name="phoneLabel" placeholder="Enter Phone Label..."
+                        class="description-box" />
+                    </label>
+
+                    <label>
+                      Phone Description:
+                      <input type="text" [(ngModel)]="phoneDetails.description" name="phoneDescription"
+                        placeholder="Enter Phone Description..." class="description-box" />
+                    </label>
+
+                    <label>
+                      Phone Placeholder:
+                      <input type="text" [(ngModel)]="phoneDetails.placeholder" name="phonePlaceholder"
+                        placeholder="Enter Phone Placeholder..." class="description-box" />
                     </label>
+                  </div>
                 </div>
-                }
+              }
             }
         </form>
     </div>
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
index 608b3ad..6102935 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.ts
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -90,6 +90,11 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   public checkedIsPrivate: boolean = false;
   public customMessage: string = '';
   public uploadObject: Uploader;
+  emailDetails = { label: '', description: '', placeholder: '' };
+  nameDetails = { label: '', description: '', placeholder: '' };
+  phoneDetails = { label: '', description: '', placeholder: '' };
+  showName: boolean = false;
+  showPhoneNumber: boolean = false;
 
   // // Async settings for file upload
   // public asyncSettings: AsyncSettingsModel = {
@@ -133,7 +138,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
       this.nodes.push({
         id: `node${item.id}`,
         // annotations: [{ content: `Node ${item['id']}` }],
-        addInfo: item
+        addInfo: [item]
       });
 
       // Create connectors from success_rule_id
@@ -238,19 +243,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
           isPrivate: this.checkedIsPrivate,
           textFormat: this.ddlTextFormat.value as TextFormatEnum
         }
-        let newNodeInfo: RuleData2 = {
-          id : this.diagram.nodes.length + 1,
-          chatWorkflowId : 1,
-          successWorkflowId : null,
-          successRuleId : null,
-          isActive : true,
-          chatWorkflowBlockId : 6,
-          chatWorkflowEditorTypeId : null,
-          fieldDetails : null,
-          branchDetails: null,
-          messageDetails: messageInfo,
-          fieldOptionDetails: null
-        };
+        let newNodeInfo: RuleData2[] = [
+          {
+            id : this.diagram.nodes.length + 1,
+            chatWorkflowId : 1,
+            successWorkflowId : null,
+            successRuleId : null,
+            isActive : true,
+            chatWorkflowBlockId : 6,
+            chatWorkflowEditorTypeId : null,
+            fieldDetails : null,
+            branchDetails: null,
+            messageDetails: messageInfo,
+            fieldOptionDetails: null
+          }
+        ]
 
         this.newNodeHeight= 100; // Set a default height for the new node
         this.newNodeWidth = 200;
@@ -265,19 +272,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
               label : this.sideBarLabel,
               placeholder : this.sideBarPlaceholder
             };
-            let newNodeInfo: RuleData2 = {
-              id : this.diagram.nodes.length + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 4,
-              chatWorkflowEditorTypeId : 1,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
+            let newNodeInfo: RuleData2[] = [
+              {
+                id : this.diagram.nodes.length + 1,
+                chatWorkflowId : 1,
+                successWorkflowId : 1,
+                successRuleId : null,
+                isActive : true,
+                chatWorkflowBlockId : 4,
+                chatWorkflowEditorTypeId : 1,
+                fieldDetails : fieldInfo,
+                branchDetails: null,
+                messageDetails: null,
+                fieldOptionDetails: null
+              }
+            ];
     
             this.newNodeHeight= 100; // Set a default height for the new node
             this.newNodeWidth = 150;
@@ -299,19 +308,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
               };
             });
     
-            let newNodeInfo: RuleData2 = {
-              id : this.diagram.nodes.length + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 4,
-              chatWorkflowEditorTypeId : 2,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: fieldOptionInfo
-            };
+            let newNodeInfo: RuleData2[] = [
+              {
+                id : this.diagram.nodes.length + 1,
+                chatWorkflowId : 1,
+                successWorkflowId : 1,
+                successRuleId : null,
+                isActive : true,
+                chatWorkflowBlockId : 4,
+                chatWorkflowEditorTypeId : 2,
+                fieldDetails : fieldInfo,
+                branchDetails: null,
+                messageDetails: null,
+                fieldOptionDetails: fieldOptionInfo
+              }
+            ];
     
             this.newNodeHeight= 100 + (this.buttons.length * 20); // Set a default height for the new node
             this.newNodeWidth = 200;
@@ -333,19 +344,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
                 };
               });
         
-              let newNodeInfo: RuleData2 = {
-                id : this.diagram.nodes.length + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 4,
-                chatWorkflowEditorTypeId : 3,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: fieldOptionInfo
-              };
+              let newNodeInfo: RuleData2[] = [
+                {
+                  id : this.diagram.nodes.length + 1,
+                  chatWorkflowId : 1,
+                  successWorkflowId : 1,
+                  successRuleId : null,
+                  isActive : true,
+                  chatWorkflowBlockId : 4,
+                  chatWorkflowEditorTypeId : 3,
+                  fieldDetails : fieldInfo,
+                  branchDetails: null,
+                  messageDetails: null,
+                  fieldOptionDetails: fieldOptionInfo
+                }
+              ];
         
               this.newNodeHeight= 100; // Set a default height for the new node
               this.newNodeWidth = 200;
@@ -372,19 +385,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
                 };
               });
     
-              let newNodeInfo: RuleData2 = {
-                id : this.diagram.nodes.length + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 4,
-                chatWorkflowEditorTypeId : 4,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: fieldOptionInfo
-              };
+              let newNodeInfo: RuleData2[] = [
+                {
+                  id : this.diagram.nodes.length + 1,
+                  chatWorkflowId : 1,
+                  successWorkflowId : 1,
+                  successRuleId : null,
+                  isActive : true,
+                  chatWorkflowBlockId : 4,
+                  chatWorkflowEditorTypeId : 4,
+                  fieldDetails : fieldInfo,
+                  branchDetails: null,
+                  messageDetails: null,
+                  fieldOptionDetails: fieldOptionInfo
+                }
+              ];
     
               this.newNodeHeight= 100; // Set a default height for the new node
               this.newNodeWidth = 200;
@@ -407,19 +422,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
                 };
               });
     
-              let newNodeInfo: RuleData2 = {
-                id : this.diagram.nodes.length + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 4,
-                chatWorkflowEditorTypeId : 5,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: fieldOptionInfo
-              };
+              let newNodeInfo: RuleData2[] = [
+                {
+                  id : this.diagram.nodes.length + 1,
+                  chatWorkflowId : 1,
+                  successWorkflowId : 1,
+                  successRuleId : null,
+                  isActive : true,
+                  chatWorkflowBlockId : 4,
+                  chatWorkflowEditorTypeId : 5,
+                  fieldDetails : fieldInfo,
+                  branchDetails: null,
+                  messageDetails: null,
+                  fieldOptionDetails: fieldOptionInfo
+                }
+              ];
     
               this.newNodeHeight= 100 + (this.buttons.length * 25); // Set a default height for the new node
               this.newNodeWidth = 200;
@@ -442,19 +459,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
               fieldValidation: fieldValidationInfo
             };
   
-            let newNodeInfo: RuleData2 = {
-              id : this.diagram.nodes.length + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 5,
-              chatWorkflowEditorTypeId : 7,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
+            let newNodeInfo: RuleData2[] = [
+              {
+                id : this.diagram.nodes.length + 1,
+                chatWorkflowId : 1,
+                successWorkflowId : 1,
+                successRuleId : null,
+                isActive : true,
+                chatWorkflowBlockId : 5,
+                chatWorkflowEditorTypeId : 7,
+                fieldDetails : fieldInfo,
+                branchDetails: null,
+                messageDetails: null,
+                fieldOptionDetails: null
+              }
+            ];
   
             this.newNodeHeight= 100; // Set a default height for the new node
             this.newNodeWidth = 200;
@@ -472,19 +491,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
                 fieldValidation: fieldValidationInfo
               };
     
-              let newNodeInfo: RuleData2 = {
-                id : this.diagram.nodes.length + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 8,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
+              let newNodeInfo: RuleData2[] = [
+                {
+                  id : this.diagram.nodes.length + 1,
+                  chatWorkflowId : 1,
+                  successWorkflowId : 1,
+                  successRuleId : null,
+                  isActive : true,
+                  chatWorkflowBlockId : 5,
+                  chatWorkflowEditorTypeId : 8,
+                  fieldDetails : fieldInfo,
+                  branchDetails: null,
+                  messageDetails: null,
+                  fieldOptionDetails: null
+                }
+              ];
     
               this.newNodeHeight= 100; // Set a default height for the new node
               this.newNodeWidth = 200;
@@ -515,19 +536,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
               fieldValidation: fieldValidationInfo
             };
   
-            let newNodeInfo: RuleData2 = {
-              id : this.diagram.nodes.length + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 5,
-              chatWorkflowEditorTypeId : 9,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
+            let newNodeInfo: RuleData2[] = [
+              {
+                id : this.diagram.nodes.length + 1,
+                chatWorkflowId : 1,
+                successWorkflowId : 1,
+                successRuleId : null,
+                isActive : true,
+                chatWorkflowBlockId : 5,
+                chatWorkflowEditorTypeId : 9,
+                fieldDetails : fieldInfo,
+                branchDetails: null,
+                messageDetails: null,
+                fieldOptionDetails: null
+              }
+            ];
   
             this.newNodeHeight= 100; // Set a default height for the new node
             this.newNodeWidth = 200;
@@ -555,19 +578,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
                 fieldValidation: fieldValidationInfo
               };
     
-              let newNodeInfo: RuleData2 = {
-                id : this.diagram.nodes.length + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 10,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
+              let newNodeInfo: RuleData2[] = [
+                {
+                  id : this.diagram.nodes.length + 1,
+                  chatWorkflowId : 1,
+                  successWorkflowId : 1,
+                  successRuleId : null,
+                  isActive : true,
+                  chatWorkflowBlockId : 5,
+                  chatWorkflowEditorTypeId : 10,
+                  fieldDetails : fieldInfo,
+                  branchDetails: null,
+                  messageDetails: null,
+                  fieldOptionDetails: null
+                }
+              ];
     
               this.newNodeHeight= 100; // Set a default height for the new node
               this.newNodeWidth = 200;
@@ -586,19 +611,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
               fieldValidation: fieldValidationInfo
             };
   
-            let newNodeInfo: RuleData2 = {
-              id : this.diagram.nodes.length + 1,
-              chatWorkflowId : 1,
-              successWorkflowId : 1,
-              successRuleId : null,
-              isActive : true,
-              chatWorkflowBlockId : 5,
-              chatWorkflowEditorTypeId : 11,
-              fieldDetails : fieldInfo,
-              branchDetails: null,
-              messageDetails: null,
-              fieldOptionDetails: null
-            };
+            let newNodeInfo: RuleData2[] = [
+              {
+                id : this.diagram.nodes.length + 1,
+                chatWorkflowId : 1,
+                successWorkflowId : 1,
+                successRuleId : null,
+                isActive : true,
+                chatWorkflowBlockId : 5,
+                chatWorkflowEditorTypeId : 11,
+                fieldDetails : fieldInfo,
+                branchDetails: null,
+                messageDetails: null,
+                fieldOptionDetails: null
+              }
+            ];
   
             this.newNodeHeight= 100; // Set a default height for the new node
             this.newNodeWidth = 200;
@@ -617,19 +644,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
                 fieldValidation: fieldValidationInfo
               };
     
-              let newNodeInfo: RuleData2 = {
-                id : this.diagram.nodes.length + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 12,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
+              let newNodeInfo: RuleData2[] = [
+                {
+                  id : this.diagram.nodes.length + 1,
+                  chatWorkflowId : 1,
+                  successWorkflowId : 1,
+                  successRuleId : null,
+                  isActive : true,
+                  chatWorkflowBlockId : 5,
+                  chatWorkflowEditorTypeId : 12,
+                  fieldDetails : fieldInfo,
+                  branchDetails: null,
+                  messageDetails: null,
+                  fieldOptionDetails: null
+                }
+              ];
     
               this.newNodeHeight= 100; // Set a default height for the new node
               this.newNodeWidth = 200;
@@ -647,19 +676,21 @@ export class WorkflowDiagramComponent implements AfterViewInit{
                 fieldValidation: fieldValidationInfo
               };
     
-              let newNodeInfo: RuleData2 = {
-                id : this.diagram.nodes.length + 1,
-                chatWorkflowId : 1,
-                successWorkflowId : 1,
-                successRuleId : null,
-                isActive : true,
-                chatWorkflowBlockId : 5,
-                chatWorkflowEditorTypeId : 13,
-                fieldDetails : fieldInfo,
-                branchDetails: null,
-                messageDetails: null,
-                fieldOptionDetails: null
-              };
+              let newNodeInfo: RuleData2[] = [
+                {
+                  id : this.diagram.nodes.length + 1,
+                  chatWorkflowId : 1,
+                  successWorkflowId : 1,
+                  successRuleId : null,
+                  isActive : true,
+                  chatWorkflowBlockId : 5,
+                  chatWorkflowEditorTypeId : 13,
+                  fieldDetails : fieldInfo,
+                  branchDetails: null,
+                  messageDetails: null,
+                  fieldOptionDetails: null
+                }
+              ];
     
               this.newNodeHeight= 100; // Set a default height for the new node
               this.newNodeWidth = 200;
@@ -669,12 +700,94 @@ export class WorkflowDiagramComponent implements AfterViewInit{
         }
         break;
       }
+      case (this.chatWorkflowBlockTypeEnum.GetCustomerDetails): {
+        let emailFieldInfo: FieldDetails = {
+          description : this.emailDetails.description ,
+          label : this.emailDetails.label,
+          placeholder : this.emailDetails.placeholder,
+          fieldValidation: null
+        };
+        let newNodeInfo: RuleData2[] = [
+          {
+            id : this.diagram.nodes.length + 1,
+            chatWorkflowId : 1,
+            successWorkflowId : null,
+            successRuleId : null,
+            isActive : true,
+            chatWorkflowBlockId : 3,
+            chatWorkflowEditorTypeId : 19,
+            fieldDetails : emailFieldInfo,
+            branchDetails: null,
+            messageDetails: null,
+            fieldOptionDetails: null
+          },
+          {
+            id : this.diagram.nodes.length + 2,
+            chatWorkflowId : 1,
+            successWorkflowId : null,
+            successRuleId : null,
+            isActive : true,
+            chatWorkflowBlockId : 3,
+            chatWorkflowEditorTypeId : 21,
+            fieldDetails : null,
+            branchDetails: null,
+            messageDetails: null,
+            fieldOptionDetails: null
+          }
+        ];
+  
+        if (this.showPhoneNumber) {
+          let phoneNumberFieldInfo: FieldDetails = {
+            description: this.phoneDetails.description,
+            label: this.phoneDetails.label,
+            placeholder: this.phoneDetails.placeholder,
+            fieldValidation: null
+          };
+          newNodeInfo.push({
+            id: this.diagram.nodes.length + 3,
+            chatWorkflowId: 1,
+            successWorkflowId: null,
+            successRuleId: null,
+            isActive: true,
+            chatWorkflowBlockId: 3,
+            chatWorkflowEditorTypeId: 20,
+            fieldDetails: phoneNumberFieldInfo,
+            branchDetails: null,
+            messageDetails: null,
+            fieldOptionDetails: null
+          });
+        }
+  
+        if (this.showName) {
+          let nameFieldInfo: FieldDetails = {
+            description: this.nameDetails.description,
+            label: this.nameDetails.label,
+            placeholder: this.nameDetails.placeholder,
+            fieldValidation: null
+          };
+          newNodeInfo.push({
+            id: this.diagram.nodes.length + 4,
+            chatWorkflowId: 1,
+            successWorkflowId: null,
+            successRuleId: null,
+            isActive: true,
+            chatWorkflowBlockId: 3,
+            chatWorkflowEditorTypeId: 18,
+            fieldDetails: nameFieldInfo,
+            branchDetails: null,
+            messageDetails: null,
+            fieldOptionDetails: null
+          });
+        }
+        this.newNodeHeight= 100;
+        this.newNodeWidth = 200;
+        this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, newNodeInfo);
+        break;
+      }
     }
 
     console.log('newNode: '+ this.newNode.addInfo);
 
-    // const newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, htmlContent, newNodeInfo); // Width and height as parameters
-
     // Add the new node to the diagram
     this.diagram.addNode(this.newNode);
 
@@ -692,9 +805,14 @@ export class WorkflowDiagramComponent implements AfterViewInit{
     this.diagram.addConnector(newConnector);
   }
 
-  createNode(width: number, height: number, nodeInfo: RuleData2): NodeModel {
+  // Method to check if all required email details are valid
+  isEmailValid(): boolean {
+    return this.emailDetails.label != '' && this.emailDetails.placeholder != '';
+  }
+
+  createNode(width: number, height: number, nodesInfo: RuleData2[]): NodeModel {
     return {
-      id: `node${nodeInfo.id}`,
+      id: `node${nodesInfo[0].id}`,
       annotations: [],
       offsetX: 100,
       offsetY: 70,
@@ -706,7 +824,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
       shape: { 
         type: 'HTML',
       },
-      addInfo: nodeInfo
+      addInfo: nodesInfo
     };
   }
 
diff --git a/src/app/data/list-data.ts b/src/app/data/list-data.ts
index 4c189e0..24a3a77 100644
--- a/src/app/data/list-data.ts
+++ b/src/app/data/list-data.ts
@@ -39,6 +39,8 @@ export const LIST_DATA: { [key: string]: any }[] = [
         {
             'text': 'Custom Message',
             'id': '2',
+            'blockid': 6,
+            'editerTypeId': null,
             'category': 'Action',
         },
         {