From bbbfa4de016316418205fd0b17ce15a59916d084 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 1 Jul 2026 17:16:15 +0200
Subject: [PATCH] Add phone number support for receivers in UI

Added functionality to display a receiver's phone number in the
sender-receiver chip if provided. Introduced a new input field
in the receiver popup for entering an optional phone number.

Updated the `ReceiverDraft` model and `_receivers` list to
include and store phone numbers. Modified methods to handle
phone number input and saving. Added CSS styles for displaying
the phone number in the sender-receiver chip.
---
 .../Pages/EnvelopeSenderEditorPage.razor      | 27 +++++++++++++++++--
 .../wwwroot/css/envelope-viewer.css           |  9 +++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor
index 41dbd89a..8e8d4fc4 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderEditorPage.razor
@@ -74,6 +74,10 @@
                                     <div class="sender-receiver-chip__body">
                                         <div class="sender-receiver-chip__name">@receiver.FullName</div>
                                         <div class="sender-receiver-chip__email">@receiver.Email</div>
+                                        @if (!string.IsNullOrWhiteSpace(receiver.PhoneNumber))
+                                        {
+                                            <div class="sender-receiver-chip__phone">@receiver.PhoneNumber</div>
+                                        }
                                     </div>
 
                                     <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change sender-toolbar-action-btn sender-toolbar-action-btn--compact"
@@ -279,6 +283,16 @@
                                CssClass="w-100" />
                 </div>
 
+                <div class="sender-receiver-popup__field">
+                    <div class="sender-receiver-popup__label">Telefonnummer (optional)</div>
+                    <DxTextBox Text="@_receiverDraftPhoneNumber"
+                               TextChanged="OnReceiverPhoneNumberChanged"
+                               NullText="+49 170 1234567"
+                               ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
+                               BindValueMode="BindValueMode.OnInput"
+                               CssClass="w-100" />
+                </div>
+
                 <div class="sender-receiver-popup__field">
                     <div class="sender-receiver-popup__label">E-Mail-Adresse</div>
                     <div @onkeydown="OnReceiverEmailKeyDownAsync">
@@ -357,6 +371,7 @@
     bool _receiverPopupVisible;
     string _receiverDraftName = string.Empty;
     string _receiverDraftEmail = string.Empty;
+    string _receiverDraftPhoneNumber = string.Empty;
     string? _selectedReceiverEmailSuggestion;
     string? _receiverPopupValidationMessage;
     bool _isReceiverEmailSearchRunning;
@@ -476,6 +491,7 @@
     {
         _receiverDraftName = string.Empty;
         _receiverDraftEmail = string.Empty;
+        _receiverDraftPhoneNumber = string.Empty;
         _selectedReceiverEmailSuggestion = null;
         _receiverPopupValidationMessage = null;
         _receiverEmailSuggestions.Clear();
@@ -496,6 +512,12 @@
         _receiverPopupValidationMessage = null;
     }
 
+    void OnReceiverPhoneNumberChanged(string? value)
+    {
+        _receiverDraftPhoneNumber = value ?? string.Empty;
+        _receiverPopupValidationMessage = null;
+    }
+
     async Task OnReceiverEmailKeyDownAsync(KeyboardEventArgs e)
     {
         if (_receiverEmailSuggestions.Count == 0)
@@ -605,6 +627,7 @@
     {
         var fullName = _receiverDraftName.Trim();
         var email = _receiverDraftEmail.Trim();
+        var phoneNumber = _receiverDraftPhoneNumber.Trim();
 
         if (string.IsNullOrWhiteSpace(fullName))
         {
@@ -630,7 +653,7 @@
             return Task.CompletedTask;
         }
 
-        _receivers.Add(new ReceiverDraft(Guid.NewGuid(), fullName, email));
+        _receivers.Add(new ReceiverDraft(Guid.NewGuid(), fullName, email, phoneNumber));
         CloseAddReceiverPopup();
         return Task.CompletedTask;
     }
@@ -656,5 +679,5 @@
 
     record OverlayCoords(double RelX, double RelY, double ContainerW, double ContainerH);
 
-    record ReceiverDraft(Guid Id, string FullName, string Email);
+    record ReceiverDraft(Guid Id, string FullName, string Email, string PhoneNumber);
 }
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
index 795f8901..3d2c698c 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
@@ -735,6 +735,15 @@ body.resizing {
     text-overflow: ellipsis;
 }
 
+.sender-receiver-chip__phone {
+    margin-top: 0.15rem;
+    font-size: 0.72rem;
+    color: #64748b;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .sender-receiver-popup .dxbl-modal {
     border-radius: 18px;
 }