SendMail.fusion

prototype(Garagist.Mautic:Component.SendMail) < prototype(Neos.Fusion:Component) {
    email = null

    // Redirect after the action is done
    redirect = null
    action = 'send'

    class = 'neos-button neos-button-primary'
    footer = false
    allSegments = ${allSegments}
    canSendLater = ${Configuration.Setting('Garagist.Mautic.action.sendLater')}

    @if.hasEmail = ${this.email}

    renderer = Neos.Fusion:Component {
        @apply.props = ${props}
        _i18n = ${Translation.id('').package('Garagist.Mautic').source('Module')}
        _label = ${this._i18n.id(props.resend ? 'email.resend' : 'email.send').translate()}

        _confirmAttributes = Neos.Fusion:DataStructure {
            :href = "action+'&moduleArguments[date]='+date"
        }

        _sendDateLabel = ${this._i18n.id('email.send.date').translate()}
        _hasSegments = ${Carbon.Array.check(props.segments)}
        // class in xlf file: 'block' Don't remove this as it is needed for tailwindcss to get the needed class name

        _xData = Neos.Fusion:DataStructure {
            action = Neos.Fusion:UriBuilder {
                action = ${props.action}
                arguments = Neos.Fusion:DataStructure {
                    node = ${node}
                    email = ${props.email}
                    redirect = ${props.redirect}
                }
            }
            locale = Neos.Fusion:Match {
                @if.set = ${props.canSendLater}
                @subject = ${Carbon.Backend.language()}
                @default = 'en'
                de = 'de'
            }
            date = 'now'
            sendLater = ${props.canSendLater ? false : null}
            pickr = ${props.canSendLater ? '' : null}
            formattedDate = ${props.canSendLater ? '' : null}
        }
        _xEffect = ${props.canSendLater ? "if(date!='now'){formattedDate=new Date(date).toLocaleDateString(locale,{weekday:'long',year:'numeric',month:'long',day:'numeric',hour:'numeric',minute:'numeric'})}" : null}

        renderer = afx`
            <Garagist.Mautic:Component.ActionButton
                label={props._label}
                icon="fa-paper-plane"
                showText={props.detailView}
                dialogTitle={this.label}
                dialogXData={Json.stringify(props._xData)}
                dialogxEffect={props._xEffect}
                confirmLabel={this.label}
                confirmAttributes={props._confirmAttributes}
                footer={props.footer}
                initalFocusOnConfirm={true}
                type="success"
                dialogMaxWidth={props.canSendLater ? "382px" : null}
            >
                <p x-dialog:description @if={!props._hasSegments}>
                    <span x-show="date=='now'" @if={props.canSendLater}>{props._i18n.id('email.send.now.all').translate()}</span>
                    <span x-show="date!='now'" @if={props.canSendLater}>{props._i18n.id('email.send.later.all').translate()}</span>
                    {props.canSendLater ? '' : props._i18n.id('email.send.now.all').translate()}
                </p>
                <p x-dialog:description @if={props._hasSegments}>
                    <span x-show="date=='now'" @if={props.canSendLater}>{props._i18n.id('email.send.now.segments').translate()}</span>
                    <span x-show="date!='now'" @if={props.canSendLater}>{props._i18n.id('email.send.later.segments').translate()}</span>
                    {props.canSendLater ? '' : props._i18n.id('email.send.now.segments').translate()}
                    <Neos.Fusion:Loop items={props.segments} @glue=", " content={props.allSegments[item].name} />
                </p>
                <Garagist.Mautic:Component.Checkbox
                    @if={props.canSendLater}
                    xModel="sendLater"
                    boolean={true}
                    label={props._i18n.id('email.send.later').translate()}
                    value={true}
                />

                <div
                    @if={props.canSendLater}
                    x-show="sendLater"
                    x-collapse
                    x-effect="date=sendLater&&pickr?pickr:'now'"
                >
                    <label for="date" class="sr-only">{props._sendDateLabel}</label>
                    <input
                        x-show="sendLater"
                        x-model="pickr"
                        x-flatpickr="{locale}"
                        placeholder={props._sendDateLabel}
                        id="date"
                        class="sr-only"
                    />
                    <!-- Spacer for a smoother animation -->
                    <div aria-hidden="true"  class="h-4"></div>
                </div>
            </Garagist.Mautic:Component.ActionButton>
        `
    }
}