{% extends '@ProductsNotifications/base--full.html.twig' %}
{% form_theme form with [
'@ui2022/forms/themes/messages.html.twig',
_self
] %}
{% block topbar %}
{% set steps =
[
{
active: true,
text: 'Create message',
},
{
text: 'Review and test',
button: {
button: 'form',
type: 'submit',
styles: 'wizard',
attr: {
class: 'btn__next',
},
form: {
form: form.vars.id,
formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
saved: false
})),
},
},
},
]
%}
{% include '@ui2022/topbar--wizard.html.twig' with {
steps: steps,
subactions: [
{
text: 'Exit',
link: path('app.notifications.dashboard.messages.main'),
styles: 'lighter md',
attr: {
id: 'btn__exit',
},
},
{
button: 'form',
type: 'submit',
text: 'Save',
styles: 'lighter md',
form: {
form: form.vars.id,
formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
saved: false,
jump: (message.id is defined and message.id is not empty) ? path('app.notifications.dashboard.messages.update', {message: message.id, saved: true}) : path('app.notifications.dashboard.messages.main')
})),
},
},
],
actions: [
{
button: 'form',
type: 'submit',
text: 'Next',
styles: 'primary wide md',
attr: {
class: 'btn__next',
},
form: {
form: form.vars.id,
formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
saved: false
})),
},
},
],
} %}
{% endblock %}
{% block content %}
{{ form_start(form) }}
{% if form_errors(form) %}
<div class="container-md pl-0 pt-3">
{{ form_errors(form) }}
</div>
{% endif %}
{% if form.recording is defined and form_errors(form.recording) %}
<div class="container-md pl-0 pt-3">
{{ form_errors(form.recording) }}
</div>
{% endif %}
<div class="{% if not form_errors(form) %}pt-3{% endif %} pb-4 mb-2">
<div class="featured__block featured__block--md container-md">
{{ form_row(form.lists) }}
</div>
</div>
<div class="container-md">
{{ form_row(form.title, {
limit_help: {
text: 'Learn best practices',
icon: 'icon-play',
toggle: 'modal',
link: '#modal__%s'|format(
form.title.vars.id
),
},
}) }}
{{ form_row(form.description) }}
<div class="pt-0 mb-4">
<a href="#" data-toggle="modal" data-target="#modal__merge_fields">Show available merge fields</a>
</div>
{% if form.script is defined %}
{{ form_row(form.script) }}
{% endif %}
{% if form.recording is defined %}
<div class="pt-0 mb-5">
{{ form_label(form.recording) }}
{{ form_widget(form.recording) }}
</div>
{% endif %}
{{ form_rest(form) }}
</div>
{{ form_end(form) }}
<script type="text/javascript">
(function (window, document, $, undefined) {
$(function () {
{% if app.request.get('saved') == 1 %}
toastr.options = {
positionClass: "toast-top-left mt-5 pt-4",
fadeIn: 1000,
timeOut: 3000,
fadeOut: 1000,
};
toastr.success('Saved');
{% endif %}
let initialState = null;
setTimeout(function () {
initialState = $('#{{ form.vars.id }}').serialize();
}, 500);
$('#btn__exit').on('click', function (e) {
var $this = $(this),
$modal = $('#modal__exit'),
currentState = $('#{{ form.vars.id }}').serialize();
if (currentState !== initialState) {
$modal.modal();
return false;
}
});
{% if hasManualTranslation is defined and hasManualTranslation == true %}
$('.btn__next').on('click', function () {
const button = $(this);
button.prop('disabled', true);
let isFormValid = false;
$.ajax({
type: "POST",
async: false,
url: ('/_dashboard/notifications/messages/' + {{ message.id }} + '/update/check_form'),
data: $('#message_data_form').serialize(),
success: function(response)
{
if (response && response.isValid) {
isFormValid = true;
}
},
complete: function ()
{
button.prop('disabled', false);
}
});
if (isFormValid === true) {
$('#modal__next').modal();
return false;
}
});
{% endif %}
{% if form.script is defined and form.recording is defined %}
$('#{{ form.script.vars.id }}').on('input', function (e) {
let $target = $(e.currentTarget),
react = $('#{{ form.recording.vars.id }}').data('react');
react.api.setSpeech($target.val());
});
$('#{{ form.script.vars.id }}').trigger('input');
{% endif %}
});
})(window, document, jQuery);
</script>
{% endblock %}
{% block modals %}
{{ parent() }}
{% embed '@ui2022/modal.html.twig' with {
dialog_styles: 'video dialog-centered dialog-scrollable',
attr: {
id: 'modal__%s'|format(
form.title.vars.id
),
},
} %}
{% block content %}
<div class="embed-responsive embed-responsive-16by9">
<!--YouTube Video-->
<iframe src="https://player.vimeo.com/video/662382869?h=3381ea9177" width="640" height="360" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/662382869">Message Compose Best Practices</a> from <a href="https://vimeo.com/campussuite">SchoolStatus Sites & Apps</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<!--Video File-->
<!-- <video class="embed-responsive-item" controls >
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1280_10MG.mp4"></source>
</video> -->
</div>
<button class="modal-video--close" type="button" data-dismiss="modal">
<i class="icon-plus"></i>
</button>
{% endblock %}
{% endembed %}
{% embed '@ui2022/modal.html.twig' with {
attr: {
id: 'modal__next',
},
} %}
{% block content %}
{% embed '@ui2022/modal__content.html.twig' with {
styles: 'bg-gray',
} %}
{% block body %}
<div class="msggroup msggroup__prompts pt-0">
<div class="msggroup__promptsblock">
<div class="prompt-block dismiss-prompt next-modal-submit" data-force="1">
<a href="javascript:void(0)" class="prompt-container">
<div class="prompt-text-block">
<h3>Dismiss edits</h3>
<p>Changes that have been made to other languages will be overwritten.</p>
</div>
</a>
</div>
<div class="prompt-block keep-prompt next-modal-submit" data-force="0">
<a href="javascript:void(0)" class="prompt-container">
<div class="prompt-text-block">
<h3>Keep edits</h3>
<p>Edits made to other languages will not be modified and retain edits.</p>
</div>
</a>
</div>
</div>
</div>
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% embed '@ui2022/modal.html.twig' with {
attr: {
id: 'modal__exit',
},
} %}
{% block content %}
{% embed '@ui2022/modal__content.html.twig' with {
styles: 'bg-gray',
} %}
{% block body %}
<div class="crmsg__dialogs">
<img class="crmsg__icon" src="/ui2022/images/icon-createmsg-exit.svg" width="77.48" height="71.37" />
<h2 class="crmsg__title">
Exiting?
</h2>
<p class="crmsg__desc font-18">
Please confirm if you would like to save a draft.
</p>
<div class="crmsg__btngroup">
{% include '@ui2022/button--a.html.twig' with {
text: 'Do not save',
link: path('app.notifications.dashboard.messages.main'),
styles: 'white',
} %}
{% include '@ui2022/button--form.html.twig' with {
type: 'submit',
text: 'Save draft',
styles: 'success',
form: {
form: form.vars.id,
formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
jump: path('app.notifications.dashboard.messages.main'),
})),
},
} %}
</div>
</div>
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% embed '@ui2022/modal.html.twig' with {
attr: {
id: 'modal__merge_fields',
},
} %}
{% block content %}
{% embed '@ui2022/modal__content.html.twig' with {
styles: 'bg-gray',
title: 'Available merge fields',
} %}
{% block body %}
<div class="crmsg__dialogs">
<ul class="list-inline"style="text-align: left">
{% for param in mergeParams %}
<li class="list-inline-item clippy mb-2" data-dismiss="modal" data-clipboard-text="{{ '{{%s}}'|format(param) }}"><span class="btn btn-lightgray"> {{ '{{%s}}'|format(param) }} <i class="fa fa-copy"></i></span></li>
{% endfor %}
</ul>
</div>
<script>
$(function() {
(new ClipboardJS('.clippy'))
.on('success', function (e) {
toastr.success('Merge field copied to clipboard!');
})
.on('error', function (e) {
toastr.error('Unable to copy merge field to clipboard!');
});
});
</script>
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
<script type="text/javascript">
$("#modal__message_data_form_title").on('hidden.bs.modal', function (e) {
var div = document.getElementById("modal__message_data_form_title");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
iframe.postMessage('{"method":"pause"}', '*');
});
$(".next-modal-submit").on('click', function () {
const forceTranslations = $(this).data('force');
const hiddenFields = $('.force-translation');
if (hiddenFields.length > 0) {
hiddenFields.first().val(forceTranslations)
}
$('#{{ form.vars.id }}').submit();
});
{% if form_errors(form) or (form.recording is defined and form_errors(form.recording)) %}
setTimeout(() => {
react = $('#{{ form.recording.vars.id }}').data('react');
react.api.setSpeech($('#{{ form.script.vars.id }}').val());
}, 1000);
{% endif %}
</script>
{% endblock %}