feat(sender): add create-envelope wizard with bootstrap handoff
Introduce a 4-step modal wizard on SenderPage for creating envelopes. Validate required fields, support optional skip, receiver management, PDF upload, and keyboard shortcuts. Persist wizard payload in sessionStorage via token-based bootstrap service and navigate to editor with bootstrapToken. Register bootstrap storage service in both client and server DI containers and add dedicated sender wizard styling.
This commit is contained in:
@@ -346,6 +346,7 @@ try
|
||||
builder.Services.AddScoped<EnvelopeGenerator.Server.Client.Services.ReceiverService>();
|
||||
builder.Services.AddScoped<EnvelopeGenerator.Server.Client.Services.PdfRenderService>();
|
||||
builder.Services.AddScoped<EnvelopeGenerator.Server.Client.Services.EnvelopeTypeService>();
|
||||
builder.Services.AddScoped<EnvelopeGenerator.Server.Client.Services.CreateEnvelopeBootstrapStorageService>();
|
||||
|
||||
// Business Services (Server specific)
|
||||
builder.Services.AddScoped<DocumentService>();
|
||||
|
||||
@@ -1094,3 +1094,310 @@
|
||||
[data-sf-theme="blazing-dark"] .sender-preview-error-msg {
|
||||
color: rgba(255, 255, 255, 0.50);
|
||||
}
|
||||
|
||||
.sender-create-wizard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 0.25rem 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sender-create-wizard-popup .dxbl-popup-content {
|
||||
max-height: min(78vh, 760px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sender-create-wizard-popup .dxbl-popup-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sender-create-wizard__progress {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__progress-track {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(126, 34, 206, 0.18);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sender-create-wizard__step {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sender-create-wizard__step-index {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(126, 34, 206, 0.25);
|
||||
}
|
||||
|
||||
.sender-create-wizard__step--active .sender-create-wizard__step-index {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.15);
|
||||
}
|
||||
|
||||
.sender-create-wizard__step--done .sender-create-wizard__step-index {
|
||||
color: #ffffff;
|
||||
background: #2a5298;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.sender-create-wizard__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.sender-create-wizard__description {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sender-create-wizard__stage {
|
||||
border: 1px solid rgba(126, 34, 206, 0.12);
|
||||
border-radius: 10px;
|
||||
background: rgba(126, 34, 206, 0.04);
|
||||
padding: 0.85rem 0.95rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__stage p {
|
||||
margin: 0;
|
||||
color: #334155;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.sender-create-wizard__footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sender-create-wizard__footer .dxbl-btn {
|
||||
flex: 1 1 calc(50% - 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.sender-create-wizard__validation {
|
||||
border: 1px solid rgba(220, 38, 38, 0.24);
|
||||
background: rgba(254, 226, 226, 0.9);
|
||||
color: #991b1b;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__field--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.sender-create-wizard__label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.sender-create-wizard__required {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.sender-create-wizard__optional {
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sender-create-wizard__select {
|
||||
min-height: 38px;
|
||||
border: 1px solid rgba(126, 34, 206, 0.25);
|
||||
border-radius: 8px;
|
||||
padding: 0.45rem 0.55rem;
|
||||
background: #ffffff;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid rgba(126, 34, 206, 0.18);
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem 0.7rem;
|
||||
background: rgba(248, 250, 252, 0.95);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-name {
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-email {
|
||||
font-size: 0.79rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-remove {
|
||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
||||
border-radius: 6px;
|
||||
background: rgba(220, 38, 38, 0.08);
|
||||
color: #b91c1c;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
padding: 0.25rem 0.55rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__upload-stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__upload-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(126, 34, 206, 0.28);
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem 0.9rem;
|
||||
background: rgba(126, 34, 206, 0.08);
|
||||
color: #4c1d95;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sender-create-wizard__upload-btn--disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sender-create-wizard__hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sender-create-wizard__document-meta {
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
border-radius: 8px;
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__document-name {
|
||||
color: #064e3b;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sender-create-wizard__document-size {
|
||||
color: #065f46;
|
||||
font-size: 0.77rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__empty-list {
|
||||
border: 1px dashed rgba(100, 116, 139, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.75rem;
|
||||
color: #475569;
|
||||
font-size: 0.83rem;
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.sender-create-wizard-popup .dxbl-popup {
|
||||
width: 96vw !important;
|
||||
max-width: 96vw !important;
|
||||
}
|
||||
|
||||
.sender-create-wizard__progress {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__title {
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__description {
|
||||
font-size: 0.81rem;
|
||||
}
|
||||
|
||||
.sender-create-wizard__form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sender-create-wizard__receiver-remove {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sender-create-wizard__upload-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user