unclean SPARC
This commit is contained in:
STEINNI
@@ -0,0 +1,377 @@
|
||||
<style>
|
||||
.mailing-sheet > header { background: url('/app/assets/images/cards/mass-mailer.jpg'); }
|
||||
.mailing-sheet .history { min-width: 320px; }
|
||||
.mailing-sheet .sheet-content { display: none; }
|
||||
.mailing-sheet .sheet-content[data-content="template"] section { display: grid; }
|
||||
.mailing-sheet .sheet-content[data-content="template"] section .email-subject {
|
||||
padding: var(--eicui-base-spacing-s);
|
||||
border: 1px solid var(--eicui-base-color-grey-10);
|
||||
margin: var(--eicui-base-spacing-xs) 0 var(--eicui-base-spacing-m) 0;
|
||||
}
|
||||
.mailing-sheet .sheet-content[data-content="template"] section .email-content {
|
||||
border: 1px solid var(--eicui-base-color-grey-10);
|
||||
border-top: 2px solid var(--eicui-base-color-grey-75);
|
||||
padding: var(--eicui-base-spacing-m);
|
||||
display: grid;
|
||||
width: 1fr;
|
||||
overflow: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
.mailing-sheet .sheet-content[data-content="approval"] .pane,
|
||||
.mailing-sheet .sheet-content[data-content="schedule"] .form {
|
||||
border: 1px solid var(--eicui-base-color-grey-10);
|
||||
border-left: 3px solid var(--eicui-base-color-grey-50);
|
||||
margin: var(--eicui-base-spacing-s) 0;
|
||||
padding: 0 var(--eicui-base-spacing-m);
|
||||
}
|
||||
.mailing-sheet .sheet-content[data-content="schedule"] .form {
|
||||
min-height: 20vh;
|
||||
/*
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
*/
|
||||
}
|
||||
.mailing-sheet .metrics { min-width: 160px; text-align: center; }
|
||||
.mailing-sheet .recipients-grid .row { grid-template-columns: 150px 4fr 1fr 60px 100px; }
|
||||
.mailing-sheet .recipients-grid .dataset .row .cell:nth-child(2),
|
||||
.mailing-sheet .recipients-grid .dataset .row .cell:nth-child(4),
|
||||
.mailing-sheet .recipients-grid .dataset .row .cell:nth-child(5) { text-align: center; }
|
||||
.mailing-sheet .recipients-grid .cell.actions {
|
||||
display: grid !important;
|
||||
justify-content: right;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: var(--eicui-base-spacing-xs);
|
||||
}
|
||||
.mailing-sheet .workflow { height: 20vh; }
|
||||
.mailing-sheet .create-path-choice{
|
||||
grid-template-columns: auto min-content;
|
||||
align-items:center;
|
||||
}
|
||||
.mailing-sheet footer button{
|
||||
justify-self: center;
|
||||
}
|
||||
.mailing-sheet span[info].icon-info{ margin-left:3rem; }
|
||||
.mailing-sheet .history section{ max-height: 20rem; }
|
||||
.mailing-sheet button[data-trigger="onDupsInfo"]{ width: min-content; }
|
||||
.mailing-sheet div[data-output="rejectionReason1"],
|
||||
.mailing-sheet div[data-output="rejectionReason2"],
|
||||
.mailing-sheet div[data-output="reviewComments2"]{
|
||||
background-color: var(--eicui-base-color-grey-20);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.mailing-sheet [hidden] { display: none; }
|
||||
</style>
|
||||
<article eiccard media class="massmailer mailing-sheet">
|
||||
<header>
|
||||
<h1 class="mailing-name" data-output="name"></h1>
|
||||
<h2>Communication Services</h2>
|
||||
</header>
|
||||
<section>
|
||||
<div class="cols-2 left">
|
||||
<div>
|
||||
<article eiccard data-async="info">
|
||||
<header>
|
||||
<h1>General Information</h1>
|
||||
</header>
|
||||
<section>
|
||||
<alert eicalert small muted info>current status is <span eicchip small info data-output="status"></span></alert>
|
||||
<div class="cols-2">
|
||||
<div>
|
||||
<label xsmall>Created</label>
|
||||
<span primary data-output="created"></span>
|
||||
</div>
|
||||
<div>
|
||||
<label xsmall>Creator</label>
|
||||
<span primary data-output="author"></span>
|
||||
</div>
|
||||
</div>
|
||||
<label xsmall>Path</label>
|
||||
<span primary data-output="infosPath"></span>
|
||||
<article eiccard>
|
||||
<section>
|
||||
<div data-output="eicpiechart"></div>
|
||||
<div class="cols-4">
|
||||
<div class="center"><span xlarge><b data-output="recipients">0</b></span><label primary xsmall>recipients</label></div>
|
||||
<div class="center"><span xlarge secondary><b data-output="pending">0</b></span><label secondary xsmall>pending</label></div>
|
||||
<div class="center"><span xlarge danger><b data-output="bounced">0</b></span><label danger xsmall>bounced</label></div>
|
||||
<div class="center"><span xlarge success><b data-output="reached">0</b></span><label success xsmall>opened</label></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
<footer>
|
||||
<div class="cols-1 right">
|
||||
<button eicbutton danger small data-trigger="onMailingDelete" data-ref="deleteMailing">Delete this mailing</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<article eiccard collapsable class="history" data-async="activity">
|
||||
<header>
|
||||
<h1>Latest activity</h1>
|
||||
</header>
|
||||
<section>
|
||||
<ul nonbulleted data-output="history"></ul>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div eicstatechart class="workflow" data-async="mainPane"></div>
|
||||
|
||||
<article eiccard class="sheet-content async" data-content="start" data-async="start">
|
||||
<header>
|
||||
<div class="cols-2 search-bar">
|
||||
<h1>Initiate your Mailing
|
||||
<span info class="icon-info" title="Enter the name of your mailing, then choose a place to store it, then hit Save to go to the next step."></span>
|
||||
</h1>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<label>Name</label>
|
||||
<input eicinput type="text" data-ref="mailingName" data-change="onNamePathChange"/>
|
||||
<label>Path</label>
|
||||
<dic class="cols-2 create-path-choice">
|
||||
<div data-output="createPath" data-value=""></div>
|
||||
<button eicbutton small primary data-trigger="onPathBrowse">Browse</button>
|
||||
</dic>
|
||||
</section>
|
||||
<footer>
|
||||
<button eicbutton medium primary data-trigger="onSaveCreated" data-ref="saveCreated" disabled>Save</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article eiccard class="sheet-content" data-content="template" data-async="template">
|
||||
<header>
|
||||
<div class="cols-2 right">
|
||||
<div>
|
||||
<h1>Content
|
||||
<span info class="icon-info" title="Select the content of your mailing amongst the available templates, then proceed to Recipients."></span>
|
||||
</h1>
|
||||
<h2>Template name <b data-output="templateName"></b></h2>
|
||||
</div>
|
||||
<button eicbutton data-ref="changeTemplate" data-trigger="onTemplateChange">Select</button>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div xlarge title="Email subject" class="email-subject"><b data-output="templateSubject"></b></div>
|
||||
<menu eictab class="content-menu">
|
||||
<li>HTML content</li>
|
||||
<li>Text (alt.) content</li>
|
||||
</menu>
|
||||
<div class="email-content" data-output="templateHtmlBody"></div>
|
||||
<div class="email-content text" data-output="templateAlternateText"></div>
|
||||
<div class="cols-2" style="display: none;" >
|
||||
<article eiccard>
|
||||
<header>
|
||||
<h1></h1>
|
||||
<span class="template-path" eicchip="" secondary="" xsmall="">Current path:</span>
|
||||
</header>
|
||||
<section>
|
||||
<div class="templates-grid"></div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard>
|
||||
<header>
|
||||
<h1>Template: </h1>
|
||||
</header>
|
||||
<section>
|
||||
|
||||
</section>
|
||||
<footer>
|
||||
<button eicbutton primary disabled data-trigger="onTestSend"><span>Send a test mail</span></button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article eiccard class="sheet-content async" data-content="recipients" data-async="recipients">
|
||||
<header>
|
||||
<div class="cols-2 ">
|
||||
<h1>Recipients
|
||||
<span info class="icon-info" title="Select or import your recipients source(s). Once you have some recipients, you can proceed to the Mapping step."></span>
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div class="cols-2 left">
|
||||
<article eiccard class="metrics">
|
||||
<header>
|
||||
<h1>summary</h1>
|
||||
</header>
|
||||
<section>
|
||||
<div>
|
||||
<div>
|
||||
<label xsmall><b>Total in sources</b></label>
|
||||
<span xxxlarge><b data-output="totalRecipients">0</b></span>
|
||||
</div>
|
||||
<div>
|
||||
<label xsmall><b data-output="labelDupes">Duplicates</b></label>
|
||||
<span xxlarge><b data-output="totalRecipientsDupes">0</b></span>
|
||||
<button eicbutton secondary rounded xsmall data-ref="dupsInfo" data-trigger="onDupsInfo" title="More info about those duplicates"><i class="icon-search"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<label xsmall><b data-output="labelExcluded">Total excluded</b></label>
|
||||
<span xxlarge><b data-output="totalRecipientsExcluded">0</b></span>
|
||||
</div>
|
||||
<div>
|
||||
<label xsmall><b>Total sendable</b></label>
|
||||
<span xxlarge><b data-output="totalFinalRecipients">0</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard>
|
||||
<header>
|
||||
<div class="cols-2 right" style="grid-template-columns: auto max-content;">
|
||||
<div>
|
||||
<h1>Recipients sources</h1>
|
||||
</div>
|
||||
<div class="cols-3">
|
||||
<button eicbutton primary small data-ref="btnFetch" data-trigger="onFetch" hidden><span>Add from MyEIC</span></button>
|
||||
<button eicbutton primary small data-ref="btnImport" data-trigger="onImport" hidden><span>Add from Excel</span></button>
|
||||
<button eicbutton primary small warning data-ref="btnExclusion" data-trigger="onExclusion" hidden><span>Add exclusion xls</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div eicdatagrid footer="hidden" class="recipients-grid"></div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article eiccard class="sheet-content async" data-content="mappings" data-async="mappings">
|
||||
<header>
|
||||
<h1>Data mapping
|
||||
<span info class="icon-info" title="When all variables are mapped for all your recipients sources, you'll be able test and review (or let review) your mailing."></span>
|
||||
</h1>
|
||||
</header>
|
||||
<section data-output="mappingsPanel"></section>
|
||||
</article>
|
||||
|
||||
<article eiccard class="sheet-content async" data-content="approval" data-async="review">
|
||||
<header>
|
||||
<h1>Approval</h1>
|
||||
<h2>Last checks before scheduling your mailing for expedition</h2>
|
||||
</header>
|
||||
<section class="approval-panel">
|
||||
<div class="pane" data-output="testPane">
|
||||
<label xlarge >Test your content</label>
|
||||
<div class="cols-2 right middle">
|
||||
<p>Send a copy of the email content to your mailbox</p>
|
||||
<button eicbutton primary data-trigger="onTestSend"><span>Send test email...</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pane" data-output="revieweePane">
|
||||
<label xlarge >Review</label>
|
||||
<div data-output="revieweeOngoing">
|
||||
<p>This mailing is currently being reviewed.</p>
|
||||
</div>
|
||||
<div data-output="revieweeApproved">
|
||||
<div eicalert success>Your mailing has been approved by <b data-output="approUser1"></b> on <b data-output="approDate1"></b></div>
|
||||
</div>
|
||||
<div data-output="revieweeRejected">
|
||||
<div eicalert danger>
|
||||
<p>Your mailing has been rejected by <b data-output="rejectionUser1"></b> on <b data-output="rejectionDate1"></b></p>
|
||||
<label medium>Reason</label>
|
||||
<div small data-output="rejectionReason1"></div>
|
||||
<p xsmall>Read the above comments, adapt your mailing accordingly and request another review.</p>
|
||||
<div class="cols-1 center">
|
||||
<button eicbutton primary data-trigger="onReviewRequest"><span>Request new review</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cols-2 right" data-output="revieweeRequest">
|
||||
<p>In order to schedule the expedition of your mailing, it must be reviewed and approved first.</p>
|
||||
<button eicbutton primary data-trigger="onReviewRequest"><span>Request review</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pane" data-output="reviewerPane">
|
||||
<label xlarge >Review request</label>
|
||||
<div data-output="reviewerChoice">
|
||||
<div eicalert info>
|
||||
<div>Final review requested by <b data-output="requestUser2"></b> on <b data-output="requestDate2"></b></div>
|
||||
<label medium>Remarks / Comments</label>
|
||||
<div small data-output="reviewComments2"></div>
|
||||
</div>
|
||||
<p xsmall>Please, have a thorough check on email content and recipients before giving the final GO</p>
|
||||
<div class="cols-2 buttons">
|
||||
<button eicbutton warning data-trigger="onReviewReject"><span>Request changes (Reject sending)</span></button>
|
||||
<button eicbutton primary data-trigger="onReviewApprove"><span>Approve sending</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div data-output="reviewerApproved">
|
||||
<div eicalert success >Mailing approved by <b data-output="approUser2"></b> on <b data-output="approDate2"></b> </div>
|
||||
</div>
|
||||
<div data-output="reviewerRejected">
|
||||
<div eicalert warning >
|
||||
<div>Mailing rejected by <b data-output="rejectionUser2"></b> on <b data-output="rejectionDate2"></b></div>
|
||||
<label medium>Reason:</label>
|
||||
<div small data-output="rejectionReason2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article eiccard class="sheet-content async" data-content="schedule" data-async="schedule">
|
||||
<header>
|
||||
<h1>Expedition</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section class="schedule-panel">
|
||||
<div data-output="toSchedule">
|
||||
<div eicalert info>
|
||||
<span>
|
||||
You are ready to send your mails. Please, choose when you would like to process.<br/>
|
||||
You may choose to sent it now (mails will be processed within 5 minutes), or to schedule it for a specific date and time.
|
||||
</span>
|
||||
</div>
|
||||
<div class="cols-2 center middle">
|
||||
<div class="immediate form">
|
||||
<label large>Send the mailing now</label>
|
||||
<p>(mails will be processed within 5 minutes)</p>
|
||||
<input eicinput type="hidden" data-ref="scheduleDateNow" value="${new Date().toISOString().split('T')[0]}" />
|
||||
<input eicinput type="hidden" data-ref="scheduleTimeNow" value="5min" />
|
||||
<button eicbutton primary data-ref="sendButton" data-trigger="onSendingNow"><span>Send now</span></button>
|
||||
</div>
|
||||
<div class="scheduled form">
|
||||
<label large>Schedule sending for later</label>
|
||||
<div class="cols-2">
|
||||
<div>
|
||||
<label small>Date:</label>
|
||||
<input eicinput type="date" data-ref="scheduleDateLater" min="${new Date().toISOString().split('T')[0]}" value="${new Date().toISOString().split('T')[0]}" data-change="onScheduleDateChange" >
|
||||
</div>
|
||||
<div>
|
||||
<label small>Time:</label>
|
||||
<select eicselect name="scheduleTime" data-ref="scheduleTimeLater" data-change="onScheduleTimeChange">
|
||||
<option></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="schedule" eicbutton disabled primary data-ref="scheduleButton" data-trigger="onSendingLater"><span>Schedule</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cols-1 center">
|
||||
<button class="schedule" eicbutton secondary data-trigger="onAbortSending"><span>Abort sending</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div data-output="scheduled">
|
||||
<div eicalert info>
|
||||
<span>
|
||||
This mailings has been scheduled for <b data-output="scheduledDate"></b>.<br/>
|
||||
As soon as it is sent, you'll be able to access it's statistics from the mailing dashboard.
|
||||
</span>
|
||||
</div>
|
||||
<div class="cols-1 right" data-output="unschedule">
|
||||
<button class="right" eicbutton="" warning="" data-trigger="onUnschedule">Unschedule</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
Reference in New Issue
Block a user