Assign to PulseCheck - Done
2 min
Description
Enables users to bulk assign 1 or more contacts to one or more PulseChecks.
HTML
<div class="modal-background">
<div class="modal-container">
<div class="modal-heading-container">
<h1 class="modal-h1">Assign to PulseCheck</h1>
<div class="flex small-gap">
<div><strong>{# of selected contacts}</strong> contacts selected for PulseCheck assignment<br></div>
</div>
</div>
<form id="assign-to-pulsecheck" name="assign-to-pulsecheck" data-name="Form" method="get">
<div class="form-list gap-1rem">
<div class="form-field-container">
<div class="field-label-container"><label for="name" class="field-label">PulseChecks</label>
<div class="required-star">*</div>
<div data-tippy-content="Select one or more PulseChecks to add your contacts to. You can only assign contacts to PulseChecks that have sufficient capacity for the entire selection. Upgrade your plan to increase capacity limits if needed." class="help-tooltip w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg></div>
</div>
<div class="fancy-option-group">
<!-- START PulseChecks - repeat for each PulseCheck -->
<div class="fancy-option {add class here}"> <!-- IF Selected, add class "selected" if over capacity add class "danger" -->
<label class="w-checkbox checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox {IF over capacity add class 'disabled'}"></div>
<input type="checkbox" name="checkbox-2" id="checkbox-2" data-name="Checkbox 2" style="opacity:0;position:absolute;z-index:-1" {IF over capacity add attribute 'disabled'}>
</label>
<div class="fancy-option-text-container">
<div class="flex full space-between">
<div>
<div class="fancy-option-heading">{PulseCheck Name}</div>
<div class="pulsecheck-under-summary">
<div class="flex small-gap">
<div data-tippy-content="View trend chart" class="icon _12 w-embed"><svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"></path>
<polygon points="20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22">
</polygon></svg></div>
<div data-tippy-content="Tuesday, January 3, 2025">{PulseCheck fequency - e.g. Bi-Monthly}</div>
</div>
<div class="flex small-gap">
<div data-tippy-content="View trend chart" class="icon _12 w-embed"><svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M30,30H28V25a5.0057,5.0057,0,0,0-5-5V18a7.0078,7.0078,0,0,1,7,7Z"></path>
<path d="M22,30H20V25a5.0059,5.0059,0,0,0-5-5H9a5.0059,5.0059,0,0,0-5,5v5H2V25a7.0082,7.0082,0,0,1,7-7h6a7.0082,7.0082,0,0,1,7,7Z"></path>
<path d="M20,2V4a5,5,0,0,1,0,10v2A7,7,0,0,0,20,2Z"></path>
<path d="M12,4A5,5,0,1,1,7,9a5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,12,2Z"></path>
</svg></div>
<div data-tippy-content="Tuesday, January 3, 2025">{# contacts assigned to PulseCheck}/{# contacts allowed by plan limit} Contacts</div>
</div>
</div>
</div>
<!-- START Upgrade Button - show if insufficient capacity to add contacts -->
<a href="#" class="button success small w-button">Upgrade Plan</a>
<!-- END Upgrade Button -->
</div>
<div class="progress-bar-container">
<div data-tippy-content="{# contacts currently assigned to this PulseCheck}/{# contacts allowed by plan} Contacts" class="progress-bar-base small">
<div style="width: 23%;" data-progress-variable-color="true" class="progress-bar-progress danger small"></div>
</div>
<div class="progress-bar-under">
<div>After: {contacts currently assigned to PulseCheck + contacts selected}}/{contacts allowed by plan}</div>
<!-- START Conditional error message -->
<div>Insufficient capacity to add {# selected} contacts</div>
<!-- END Conditional error message -->
</div>
</div>
</div>
</div>
<!-- END PulseChecks -->
</div>
</div>
<div class="alert-box warning">
<div class="alert-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"></path>
</svg></div>
<div>Selected contacts will be added to these PulseChecks and will receive the next scheduled PulseCheck survey. Depending on the PulseCheck's schedule, they may not receive a survey immediately. Contacts who already exist in a PulseCheck will not be duplicated.</div>
</div>
</div>
</form>
<div class="form-button-container">
<button type="button" class="button tertiary full w-button">Cancel</button>
<button type="button" class="button full w-button disabled" disabled>Add to Selected PulseChecks</button> <!-- disabled until a pulsecheck is selected -->
</div>
<div class="modal-close-button w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg></div>
</div>
</div>